vertical timeline

3 files changed, 26 insertions, 25 deletions

diff --git a/animism-align/frontend/views/align/components/ticks.component.js b/animism-align/frontend/views/align/components/ticks.component.js
index 8f59c31..55821ae 100644
--- a/animism-align/frontend/views/align/components/ticks.component.js
+++ b/animism-align/frontend/views/align/components/ticks.component.js
@@ -6,11 +6,11 @@ import { timestamp } from '../../../util'
 export default class Ticks extends Component {
   render() {
     let { start_ts, zoom, duration } = this.props.timeline
-    const width = window.innerWidth
+    const width = window.innerHeight
 
     let secondsPerPixel = ZOOM_STEPS[zoom] * 0.1 // 0.1 sec / step
 
-    let widthTimeDuration = window.innerWidth * secondsPerPixel // secs per pixel
+    let widthTimeDuration = width * secondsPerPixel // secs per pixel
 
     let timeMin = start_ts
     let timeMax = Math.min(start_ts + widthTimeDuration, duration)
@@ -29,8 +29,8 @@ export default class Ticks extends Component {
     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
+      offset = i * pixelsPerLabel + startOffset
+      if (offset > width) continue
       timing = i * secondsPerLabel + startTiming
       if (timing > duration) {
         break
@@ -38,7 +38,7 @@ export default class Ticks extends Component {
       tickLabels.push(
         <div className='tickLabel' key={"tickLabel_" + i}
           style={{
-            left: Math.floor(offset)
+            top: Math.floor(offset)
           }}>
           {timestamp(timing)}
         </div>
@@ -50,7 +50,7 @@ export default class Ticks extends Component {
       tickLabels.push(
         <div className='tickLabel tickLabelTotal' key={"tickLabel_total"}
           style={{
-            left: durationOffset - 20
+            top: durationOffset
           }}>
           {timestamp(duration, 1)}
         </div>
@@ -58,7 +58,7 @@ export default class Ticks extends Component {
       ticks.push(
         <div className='tick' key={"tick_total"}
           style={{
-            left: Math.floor(durationOffset),
+            top: Math.floor(durationOffset),
           }}
         />
       )
@@ -72,7 +72,7 @@ export default class Ticks extends Component {
       ticks.push(
         <div className='tick' key={"tick_" + i}
           style={{
-            left: Math.floor(offset),
+            top: Math.floor(offset),
           }}
         />
       )
diff --git a/animism-align/frontend/views/align/components/timeline.component.js b/animism-align/frontend/views/align/components/timeline.component.js
index a1dad4c..eb851b7 100644
--- a/animism-align/frontend/views/align/components/timeline.component.js
+++ b/animism-align/frontend/views/align/components/timeline.component.js
@@ -42,7 +42,8 @@ class Timeline extends Component {
     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)
+    start_ts = clamp(start_ts + e.deltaY * ZOOM_STEPS[zoom], 0, Math.max(0, duration - widthTimeDuration / 2))
+    console.log(start_ts)
     actions.align.setScrollPosition(start_ts)
   }
   render() {
diff --git a/animism-align/frontend/views/align/components/waveform.component.js b/animism-align/frontend/views/align/components/waveform.component.js
index 2604f2a..4cd9963 100644
--- a/animism-align/frontend/views/align/components/waveform.component.js
+++ b/animism-align/frontend/views/align/components/waveform.component.js
@@ -6,7 +6,7 @@ import { connect } from 'react-redux'
 import actions from '../../../actions'
 // import * as uploadActions from './upload.actions'
 
-import { DEFAULT_HEIGHT, WAVEFORM_HEIGHT, ZOOM_STEPS, ZOOM_LABEL_STEPS, ZOOM_TICK_STEPS } from '../constants'
+import { WAVEFORM_SIZE, ZOOM_STEPS, ZOOM_LABEL_STEPS, ZOOM_TICK_STEPS } from '../constants'
 
 class Waveform extends Component {
   constructor(props){
@@ -22,24 +22,24 @@ class Waveform extends Component {
   }
   resize() {
     const canvas = this.canvasRef.current
-    canvas.width = window.innerWidth
-    canvas.height = DEFAULT_HEIGHT
+    canvas.width = WAVEFORM_SIZE
+    canvas.height = window.innerHeight
   }
   draw() {
     const canvas = this.canvasRef.current
     const ctx = canvas.getContext('2d')
-    const w = window.innerWidth
-    this.clearCanvas(ctx, w)
-    this.drawCurve(ctx, w)
+    const h = window.innerHeight
+    this.clearCanvas(ctx, h)
+    this.drawCurve(ctx, h)
   }
-  clearCanvas(ctx, w) {  
-    const h = WAVEFORM_HEIGHT
+  clearCanvas(ctx, h) {  
+    const w = WAVEFORM_SIZE
     ctx.clearRect(0, 0, w, h)
     ctx.fillStyle = 'rgba(0,0,0,0.5)'
     ctx.fillRect(0, 0, w, h)
     ctx.fillStyle = 'rgba(64,128,192,0.5)'
   }
-  drawCurve(ctx, w) {
+  drawCurve(ctx, h) {
     let { peaks, timeline } = this.props
     let { start_ts, zoom, duration } = timeline
 
@@ -47,7 +47,7 @@ class Waveform extends Component {
     let stepsPerPixel = ZOOM_STEPS[zoom] // 0.1 sec / step
     let indexesPerPixel = stepsPerPixel * 2
 
-    let widthTimeDuration = window.innerWidth * secondsPerPixel // secs per pixel
+    let widthTimeDuration = h * secondsPerPixel // secs per pixel
 
     let timeMin = start_ts
     let timeMax = Math.min(start_ts + widthTimeDuration, duration)
@@ -58,26 +58,26 @@ class Waveform extends Component {
 
     let i = 0
     let step = stepMin
-    let waveformPeak = WAVEFORM_HEIGHT / 2
+    let waveformPeak = WAVEFORM_SIZE / 2
     let origin = (1 - peaks[step]) * waveformPeak
-    let y = origin
+    let y
     let peak
     // console.log(0 * indexesPerPixel + stepMin, pixelWidth * indexesPerPixel + stepMin)
     ctx.beginPath()
-    ctx.moveTo(0, y)
+    ctx.moveTo(origin, 0)
     for (i = 0; i < pixelWidth; i++) {
       step = i * indexesPerPixel + stepMin
       peak = peaks[step]
       y = (1 - peak) * waveformPeak
-      ctx.lineTo(i, y)
+      ctx.lineTo(y, i)
     }
     for (i = pixelWidth - 1; i > 0; i--) {
       step = i * indexesPerPixel + stepMin
       peak = peaks[step]
       y = (1 + peak) * waveformPeak
-      ctx.lineTo(i, y)
+      ctx.lineTo(y, i)
     }
-    ctx.lineTo(0, origin)
+    ctx.lineTo(origin, 0)
     ctx.fillStyle = 'rgba(255,255,255,0.8)'
     ctx.fill()
   }