TICKS AND WAVEFORM LINE UP

5 files changed, 39 insertions, 54 deletions

diff --git a/animism-align/frontend/views/align/align.reducer.js b/animism-align/frontend/views/align/align.reducer.js
index c0dcfac..00d77ff 100644
--- a/animism-align/frontend/views/align/align.reducer.js
+++ b/animism-align/frontend/views/align/align.reducer.js
@@ -6,7 +6,7 @@ import { crudState, crudReducer } from '../../api/crud.reducer'
 const initialState = {
   timeline: {
     start_ts: 0,
-    zoom: 0,
+    zoom: 1,
     duration: 0,
   },
   options: {
@@ -21,7 +21,7 @@ export default function alignReducer(state = initialState, action) {
         ...state,
         timeline: {
           ...state.timeline,
-          duration: action.data.length / 2,
+          duration: action.data.length / 20,
         }
       }
 
diff --git a/animism-align/frontend/views/align/components/ticks.component.js b/animism-align/frontend/views/align/components/ticks.component.js
index 69866f0..8f59c31 100644
--- a/animism-align/frontend/views/align/components/ticks.component.js
+++ b/animism-align/frontend/views/align/components/ticks.component.js
@@ -6,39 +6,32 @@ import { timestamp } from '../../../util'
 export default class Ticks extends Component {
   render() {
     let { start_ts, zoom, duration } = this.props.timeline
-    duration /= 10
     const width = window.innerWidth
 
-    let secondsPerPixel = ZOOM_STEPS[zoom] / 10 // 0.1 sec / step
-    let pixelTimeDuration = 1 / secondsPerPixel // secs per pixel
-    let widthTimeDuration = width / pixelTimeDuration // secs per pixel
-    // console.log(secondsPerPixel, pixelTimeDuration)
-    // console.log('width in seconds', widthTimeDuration)
+    let secondsPerPixel = ZOOM_STEPS[zoom] * 0.1 // 0.1 sec / step
 
-    let secondsPerTick = ZOOM_LABEL_STEPS[zoom] // secs
-    let pixelsPerLabel = secondsPerTick * pixelTimeDuration
-    let pixelsPerTick = ZOOM_TICK_STEPS[zoom]
-    // console.log('pixels per label', pixelsPerLabel)
+    let widthTimeDuration = window.innerWidth * secondsPerPixel // secs per pixel
 
-    let subdivision = secondsPerTick
-    while (pixelsPerLabel < 200) {
-      pixelsPerLabel *= 2
-      pixelsPerTick *= 2
-      subdivision *= 2
-    }
+    let timeMin = start_ts
+    let timeMax = Math.min(start_ts + widthTimeDuration, duration)
+    let timeWidth = timeMax - timeMin
+
+    let pixelMin = timeMin / secondsPerPixel
+
+    let secondsPerLabel = ZOOM_LABEL_STEPS[zoom] // secs
+    let pixelsPerLabel = secondsPerLabel / secondsPerPixel
+    let secondsPerTick = ZOOM_TICK_STEPS[zoom]
+    let pixelsPerTick = secondsPerTick / secondsPerPixel
 
-    // console.log('start ts', start_ts)
-    let pixelOffset = (start_ts / secondsPerPixel)
-    let pixelRemainder = pixelOffset % pixelsPerLabel
-    let startOffset = pixelsPerLabel - pixelRemainder
-    let startTiming = (pixelOffset + startOffset) * secondsPerPixel
+    let startOffset = pixelsPerLabel - (pixelMin % pixelsPerLabel)
+    let startTiming = (pixelMin + startOffset) * secondsPerPixel
 
-    let labelCount = Math.ceil(width / pixelsPerLabel) + 2
+    let labelCount = Math.ceil(width / pixelsPerLabel) + 1
     let offset, timing, tickLabels = [], ticks = []
     for (var i = -1; i < labelCount; i++) {
       offset = i * pixelsPerLabel + startOffset - 20
       if (offset + 20 > width) continue
-      timing = i * subdivision + startTiming
+      timing = i * secondsPerLabel + startTiming
       if (timing > duration) {
         break
       }
@@ -52,7 +45,7 @@ export default class Ticks extends Component {
       )
     }
 
-    let durationOffset = duration / secondsPerPixel - pixelOffset
+    let durationOffset = duration / secondsPerPixel - pixelMin
     if (timing > duration) {
       tickLabels.push(
         <div className='tickLabel tickLabelTotal' key={"tickLabel_total"}
diff --git a/animism-align/frontend/views/align/components/timeline.component.js b/animism-align/frontend/views/align/components/timeline.component.js
index 5e07c0b..a1dad4c 100644
--- a/animism-align/frontend/views/align/components/timeline.component.js
+++ b/animism-align/frontend/views/align/components/timeline.component.js
@@ -39,7 +39,7 @@ class Timeline extends Component {
   }
   handleWheel(e) {
     let { start_ts, zoom, duration } = this.props.timeline
-    let secondsPerPixel = ZOOM_STEPS[zoom] / 10 // 0.1 sec / step
+    let secondsPerPixel = ZOOM_STEPS[zoom] * 0.1 // 0.1 sec / step
     let widthTimeDuration = window.innerWidth * secondsPerPixel // secs per pixel
 
     start_ts = clamp(start_ts + e.deltaY * ZOOM_STEPS[zoom], 0, duration - widthTimeDuration / 2)
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
diff --git a/animism-align/frontend/views/align/constants.js b/animism-align/frontend/views/align/constants.js
index ad4645c..15129da 100644
--- a/animism-align/frontend/views/align/constants.js
+++ b/animism-align/frontend/views/align/constants.js
@@ -12,21 +12,21 @@ export const ZOOM_STEPS = [
 ]
 
 export const ZOOM_LABEL_STEPS = [
-  10,
-  30,
-  30,
-  75,
-  300,
+  20,
+  60,
+  60,
   300,
   600,
+  600,
+  1200,
 ]
 
 export const ZOOM_TICK_STEPS = [
-  20,
-  25,
-  25,
-  15,
-  15,
-  20,
-  25,
+  5,
+  10,
+  30,
+  60,
+  60,
+  60,
+  600,
 ]