TICKS AND WAVEFORM LINE UP

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