diff --git a/src/components/sound-editor/sound-editor.css b/src/components/sound-editor/sound-editor.css index 12d0106ade999de14e17e0f312db61f1bc7dfce7..b9cb97f168be0ee85037b327ff3428f811cc0e34 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 48a0a4935c376995624e4cf4c41c194539b27ec8..31b777aa785c37835f69c6117200bda02af7ebc9 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) => {