From f28b6d8e00f3f7aecd86bf6a785167892c616b69 Mon Sep 17 00:00:00 2001
From: Eric Rosenbaum <eric.rosenbaum@gmail.com>
Date: Wed, 24 Jul 2019 17:01:56 -0400
Subject: [PATCH] Make the waveform rendering more precisely positioned
---
src/components/sound-editor/sound-editor.css | 1 -
src/components/waveform/waveform.jsx | 13 +++++++------
2 files changed, 7 insertions(+), 7 deletions(-)
diff --git a/src/components/sound-editor/sound-editor.css b/src/components/sound-editor/sound-editor.css
index 12d0106ad..b9cb97f16 100644
--- a/src/components/sound-editor/sound-editor.css
+++ b/src/components/sound-editor/sound-editor.css
@@ -63,7 +63,6 @@
background: hsla(300, 53%, 60%, 0.15);
border: 1px solid $ui-black-transparent;
border-radius: 5px;
- padding: 3px;
margin-top: 20px;
margin-bottom: 20px;
diff --git a/src/components/waveform/waveform.jsx b/src/components/waveform/waveform.jsx
index 48a0a4935..31b777aa7 100644
--- a/src/components/waveform/waveform.jsx
+++ b/src/components/waveform/waveform.jsx
@@ -19,17 +19,18 @@ class Waveform extends React.PureComponent {
// composite time when animating the playhead
const takeEveryN = Math.ceil(data.length / width);
- const filteredData = takeEveryN === 1 ? data :
+ const filteredData = takeEveryN === 1 ? data.slice(0) :
data.filter((_, i) => i % takeEveryN === 0);
- const cappedData = [0, ...filteredData, 0];
+ filteredData[0] = 0;
+ filteredData[filteredData.length - 1] = 0;
const points = [
- ...cappedData.map((v, i) =>
- [width * i / cappedData.length, height * v / 2]
+ ...filteredData.map((v, i) =>
+ [width * i / filteredData.length, height * v / 2]
),
- ...cappedData.reverse().map((v, i) =>
- [width * (cappedData.length - i - 1) / cappedData.length, -height * v / 2]
+ ...filteredData.reverse().map((v, i) =>
+ [width * (filteredData.length - i - 1) / filteredData.length, -height * v / 2]
)
];
const pathComponents = points.map(([x, y], i) => {
--
GitLab