1 files changed, 16 insertions, 16 deletions

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()
   }