highlight the current paragraph

1 files changed, 30 insertions, 0 deletions

diff --git a/animism-align/frontend/views/paragraph/paragraph.container.js b/animism-align/frontend/views/paragraph/paragraph.container.js
index ecd5417..13753a4 100644
--- a/animism-align/frontend/views/paragraph/paragraph.container.js
+++ b/animism-align/frontend/views/paragraph/paragraph.container.js
@@ -11,6 +11,36 @@ import { Loader } from '../../common'
 import ParagraphList from './containers/paragraphList.container'
 
 class ParagraphContainer extends Component {
+  componentDidMount() {
+    this.bind()
+  }
+  componentWillUnmount() {
+    this.unbind()
+  }
+  bind() {
+    document.addEventListener('keydown', this.handleKeydown)
+  }
+  unbind() {
+    document.removeEventListener('keydown', this.handleKeydown)
+  }
+  handleKeydown(e) {
+    if (document.activeElement !== document.body) {
+      return
+    }
+    // console.log(e.keyCode)
+    switch (e.keyCode) {
+      case 32: // spacebar
+        e.preventDefault()
+        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
+    }
+  }
   render() {
     if (!this.props.annotation.lookup || !this.props.paragraph.lookup) {
       return <div className='body loading'><Loader /></div>