summaryrefslogtreecommitdiff
path: root/animism-align/frontend/views/align/components/waveform.component.js
diff options
context:
space:
mode:
Diffstat (limited to 'animism-align/frontend/views/align/components/waveform.component.js')
-rw-r--r--animism-align/frontend/views/align/components/waveform.component.js22
1 files changed, 7 insertions, 15 deletions
diff --git a/animism-align/frontend/views/align/components/waveform.component.js b/animism-align/frontend/views/align/components/waveform.component.js
index d4ff913..2604f2a 100644
--- a/animism-align/frontend/views/align/components/waveform.component.js
+++ b/animism-align/frontend/views/align/components/waveform.component.js
@@ -43,10 +43,7 @@ class Waveform extends Component {
let { peaks, timeline } = this.props
let { start_ts, zoom, duration } = timeline
- // console.log(start_ts)
- // start_ts *= 10
-
- let secondsPerPixel = ZOOM_STEPS[zoom] / 10 // 0.1 sec / step
+ let secondsPerPixel = ZOOM_STEPS[zoom] * 0.1 // 0.1 sec / step
let stepsPerPixel = ZOOM_STEPS[zoom] // 0.1 sec / step
let indexesPerPixel = stepsPerPixel * 2
@@ -54,15 +51,10 @@ class Waveform extends Component {
let timeMin = start_ts
let timeMax = Math.min(start_ts + widthTimeDuration, duration)
+ let timeWidth = timeMax - timeMin
- let pixelMin = timeMin / secondsPerPixel
- let pixelMax = timeMax / secondsPerPixel
-
- // console.log('wf start_ts', pixelMin)
-
- let stepMin = Math.floor(pixelMin * 2)
- let stepMax = Math.floor(pixelMax * 2)
- let stepWidth = stepMax - stepMin
+ let stepMin = Math.floor(timeMin * 10 * 2)
+ let pixelWidth = Math.ceil(timeWidth / secondsPerPixel)
let i = 0
let step = stepMin
@@ -70,16 +62,16 @@ class Waveform extends Component {
let origin = (1 - peaks[step]) * waveformPeak
let y = origin
let peak
-
+ // console.log(0 * indexesPerPixel + stepMin, pixelWidth * indexesPerPixel + stepMin)
ctx.beginPath()
ctx.moveTo(0, y)
- for (i = 0; i < stepWidth; i++) {
+ for (i = 0; i < pixelWidth; i++) {
step = i * indexesPerPixel + stepMin
peak = peaks[step]
y = (1 - peak) * waveformPeak
ctx.lineTo(i, y)
}
- for (i = stepWidth - 1; i > 0; i--) {
+ for (i = pixelWidth - 1; i > 0; i--) {
step = i * indexesPerPixel + stepMin
peak = peaks[step]
y = (1 + peak) * waveformPeak