1 files changed, 39 insertions, 3 deletions
diff --git a/animism-align/frontend/views/align/components/timeline.component.js b/animism-align/frontend/views/align/components/timeline.component.js
index af3c57b..0a97c3a 100644
--- a/animism-align/frontend/views/align/components/timeline.component.js
+++ b/animism-align/frontend/views/align/components/timeline.component.js
@@ -8,7 +8,7 @@ import actions from '../../../actions'
 
 import Ticks from './ticks.component'
 
-import * as constants from '../constants'
+import { DEFAULT_HEIGHT, WAVEFORM_HEIGHT, ZOOM_STEPS, ZOOM_LABEL_STEPS, ZOOM_TICK_STEPS } from '../constants'
 
 class Timeline extends Component {
   constructor(props){
@@ -39,21 +39,56 @@ class Timeline extends Component {
   resize() {
     const canvas = this.canvasRef.current
     canvas.width = window.innerWidth
-    canvas.height = constants.DEFAULT_HEIGHT
+    canvas.height = DEFAULT_HEIGHT
   }
   draw() {
     const canvas = this.canvasRef.current
     const ctx = canvas.getContext('2d')
     const w = window.innerWidth
     this.clearCanvas(ctx, w)
+    this.drawCurve(ctx, w)
   }
   clearCanvas(ctx, w) {  
-    const h = constants.WAVEFORM_HEIGHT
+    const h = WAVEFORM_HEIGHT
     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) {
+    let { peaks, timeline } = this.props
+    let { start_ts, zoom, duration } = timeline
+    let stepsPerPixel = ZOOM_STEPS[zoom] // 0.1 sec / step
+    let indexesPerPixel = stepsPerPixel * 2
+    let stepMin = start_ts * 10
+    let stepDuration = duration * 10 / stepsPerPixel
+    let stepMax = stepDuration - stepMin
+    let stepWidth = Math.min(stepMax, w)
+    stepWidth += 2 + (stepWidth % 2)
+    let i = 0
+    let step = stepMin
+    let waveformPeak = WAVEFORM_HEIGHT / 2
+    let origin = (1 - peaks[step]) * waveformPeak
+    let y = origin
+    let peak
+    ctx.beginPath()
+    ctx.moveTo(0, y)
+    for (i = 0; i < stepWidth; i++) {
+      step = i * indexesPerPixel + stepMin
+      peak = peaks[step]
+      y = (1 - peak) * waveformPeak
+      ctx.lineTo(i, y)
+    }
+    for (i = stepWidth - 1; i > 0; i--) {
+      step = i * indexesPerPixel + stepMin
+      peak = peaks[step]
+      y = (1 + peaks[step]) * waveformPeak
+      ctx.lineTo(i, y)
+    }
+    ctx.lineTo(0, origin)
+    ctx.fillStyle = 'rgba(255,255,255,0.8)'
+    ctx.fill()
+  }
   render() {
     return (
       <div className='timeline'>
@@ -66,6 +101,7 @@ class Timeline extends Component {
 
 const mapStateToProps = state => ({
   timeline: state.align.timeline,
+  peaks: state.site.peaks,
 })
 
 const mapDispatchToProps = dispatch => ({