From 07294becb5823b387e6b0ae8caae190a8b08551d Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Mon, 6 Jul 2020 19:28:29 +0200
Subject: highlight the current paragraph

---
 .../views/paragraph/paragraph.container.js         | 30 ++++++++++++++++++++++
 1 file changed, 30 insertions(+)

(limited to 'animism-align/frontend/views/paragraph/paragraph.container.js')

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>
-- 
cgit v1.2.3-70-g09d2