1 files changed, 59 insertions, 24 deletions

diff --git a/animism-align/frontend/views/align/components/timeline.component.js b/animism-align/frontend/views/align/components/timeline.component.js
index 86175cf..3b12cb5 100644
--- a/animism-align/frontend/views/align/components/timeline.component.js
+++ b/animism-align/frontend/views/align/components/timeline.component.js
@@ -9,6 +9,8 @@ import actions from '../../../actions'
 import Waveform from './waveform.component'
 import Ticks from './ticks.component'
 import Cursor from './cursor.component'
+import PlayButton from './playButton.component'
+import PlayCursor from './playCursor.component'
 
 import { ZOOM_STEPS } from '../constants'
 import { clamp } from '../../../util'
@@ -19,6 +21,7 @@ class Timeline extends Component {
     this.handleKeydown = this.handleKeydown.bind(this)
     this.handleMouseMove = this.handleMouseMove.bind(this)
     this.handleWheel = this.handleWheel.bind(this)
+    this.handleClick = this.handleClick.bind(this)
   }
   componentDidMount() {
     this.bind()
@@ -33,10 +36,31 @@ class Timeline extends Component {
     document.removeEventListener('keydown', this.handleKeydown)
   }
   handleKeydown(e) {
-    if (e.shiftKey && e.keyCode === 189) {
-      actions.align.setZoom(this.props.timeline.zoom - 1)
-    } else if (e.shiftKey && e.keyCode === 187) {
-      actions.align.setZoom(this.props.timeline.zoom + 1)
+    if (document.activeElement !== document.body) {
+      return
+    }
+    if (e.shiftKey) {
+      switch (e.keyCode) {
+        case 187: // plus
+          actions.align.setZoom(this.props.timeline.zoom - 1)
+          break
+        case 189: // minus
+          actions.align.setZoom(this.props.timeline.zoom + 1)
+          break
+      }
+    } else {
+      console.log(e.keyCode)
+      switch (e.keyCode) {
+        case 32: // spacebar
+          actions.audio.toggle()
+          break
+        case 38: // up
+          actions.audio.jump(- ZOOM_STEPS[this.props.timeline.zoom] * 0.1)
+          break
+        case 40: // down
+          actions.audio.jump(ZOOM_STEPS[this.props.timeline.zoom] * 0.1)
+          break
+      }
     }
   }
   handleWheel(e) {
@@ -45,28 +69,26 @@ class Timeline extends Component {
     let widthTimeDuration = window.innerHeight * secondsPerPixel // secs per pixel
 
     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)
+    if (e.shiftKey) {
+      if (Math.abs(e.deltaY) < 2) return
+      if (e.deltaY > 0) {
+        actions.align.throttledSetZoom(this.props.timeline.zoom + 1)
+      } else {
+        actions.align.throttledSetZoom(this.props.timeline.zoom - 1)
+      }
+    } else if (e.altKey) {
+      actions.audio.seek(start_ts)
+    } else {
+      actions.align.setScrollPosition(start_ts)
+    }
   }
   handleMouseMove(e) {
-    const { start_ts, zoom, duration } = this.props.timeline
-    const y = e.pageY
-    const height = window.innerHeight
-
-    let secondsPerPixel = ZOOM_STEPS[zoom] * 0.1
-    let widthTimeDuration = height * secondsPerPixel
-
-    let timeMin = start_ts
-    let timeMax = Math.min(start_ts + widthTimeDuration, duration)
-    let timeWidth = timeMax - timeMin
-
-    let cursor_ts = y * secondsPerPixel + start_ts
-    cursor_ts = clamp(cursor_ts, 0, timeMax)
-
+    const cursor_ts = positionToTime(e.pageY, this.props.timeline)
     actions.align.setCursor(cursor_ts)
-
-    // let pixelMin = timeMin / secondsPerPixel
-    // const ts = 
+  }
+  handleClick(e) {
+    const play_ts = positionToTime(e.pageY, this.props.timeline)
+    actions.audio.seek(play_ts)
   }
   render() {
     return (
@@ -75,14 +97,27 @@ class Timeline extends Component {
         onWheel={this.handleWheel}
         onMouseMove={this.handleMouseMove}
       >
-        <Waveform />
+        <Waveform onClick={this.handleClick} />
         <Ticks timeline={this.props.timeline} />
         <Cursor timeline={this.props.timeline} />
+        <PlayCursor />
+        <PlayButton />
       </div>
     )
   }
 }
 
+const positionToTime = (y, { start_ts, zoom, duration }) => {
+  const secondsPerPixel = ZOOM_STEPS[zoom] * 0.1
+  const widthTimeDuration = window.innerHeight * secondsPerPixel
+
+  const timeMin = start_ts
+  const timeMax = Math.min(start_ts + widthTimeDuration, duration)
+  const timeWidth = timeMax - timeMin
+
+  return clamp(y * secondsPerPixel + start_ts, 0, timeMax)
+}
+
 const mapStateToProps = state => ({
   timeline: state.align.timeline,
 })