1 files changed, 19 insertions, 6 deletions
diff --git a/animism-align/frontend/views/align/containers/timeline.container.js b/animism-align/frontend/views/align/containers/timeline.container.js
index 23b9435..ceb9012 100644
--- a/animism-align/frontend/views/align/containers/timeline.container.js
+++ b/animism-align/frontend/views/align/containers/timeline.container.js
@@ -31,6 +31,12 @@ class Timeline extends Component {
   componentWillUnmount() {
     this.unbind()
   }
+  shouldComponentUpdate(nextProps) {
+    return (
+      nextProps.timeline !== this.props.timeline ||
+      nextProps.annotation !== this.props.annotation
+    )
+  }
   bind() {
     document.addEventListener('keydown', this.handleKeydown)
   }
@@ -41,6 +47,7 @@ class Timeline extends Component {
     if (document.activeElement !== document.body) {
       return
     }
+    // console.log(e.keyCode)
     if (e.shiftKey) {
       switch (e.keyCode) {
         case 187: // plus
@@ -56,6 +63,10 @@ class Timeline extends Component {
         case 27: // escape
           actions.align.hideAnnotationForm()
           break
+        case 65: // A - add
+          e.preventDefault()
+          actions.align.showNewAnnotationForm(this.props.audio.play_ts, this.props.text)
+          break
         case 32: // spacebar
           actions.audio.toggle()
           break
@@ -70,12 +81,13 @@ class Timeline extends Component {
   }
   handleWheel(e) {
     let { start_ts, zoom, duration } = this.props.timeline
+    let { deltaY } = e
     let secondsPerPixel = ZOOM_STEPS[zoom] * 0.1 // 0.1 sec / step
     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))
+    start_ts += (deltaY / 2) * ZOOM_STEPS[zoom]
+    start_ts = clamp(start_ts, 0, Math.max(0, duration - widthTimeDuration / 2))
     if (e.shiftKey) {
-      if (Math.abs(e.deltaY) < 2) return
+      if (Math.abs(deltaY) < 2) return
       if (e.deltaY > 0) {
         actions.align.throttledSetZoom(this.props.timeline.zoom + 1)
       } else {
@@ -93,10 +105,10 @@ class Timeline extends Component {
   }
   handleClick(e) {
     const play_ts = positionToTime(e.pageY, this.props.timeline)
-    if (e.pageX > WAVEFORM_SIZE * 0.67) {
-      actions.align.showNewAnnotationForm(play_ts, this.props.text)
-    } else {
+    if (e.pageX < WAVEFORM_SIZE * 0.67) {
       actions.audio.seek(play_ts)      
+    } else {
+      actions.align.showNewAnnotationForm(play_ts, this.props.text)
     }
   }
   render() {
@@ -122,6 +134,7 @@ class Timeline extends Component {
 const mapStateToProps = state => ({
   timeline: state.align.timeline,
   annotation: state.align.annotation,
+  audio: state.audio,
   text: state.site.text,
 })