highlight the current paragraph

1 files changed, 52 insertions, 5 deletions

diff --git a/animism-align/frontend/views/paragraph/containers/paragraphList.container.js b/animism-align/frontend/views/paragraph/containers/paragraphList.container.js
index 059baff..8b61df5 100644
--- a/animism-align/frontend/views/paragraph/containers/paragraphList.container.js
+++ b/animism-align/frontend/views/paragraph/containers/paragraphList.container.js
@@ -6,9 +6,14 @@ import { connect } from 'react-redux'
 import actions from '../../../actions'
 import { ParagraphElementLookup } from '../components/paragraph.types'
 
+const floatLT = (a,b) => ((a*10|0) < (b*10|0))
+const floatLTE = (a,b) => (a*10|0 === b*10|0 || floatLT(a,b))
+
 class ParagraphList extends Component {
   state = {
     paragraphs: [],
+    currentParagraph: -1,
+    currentAnnotation: -1,
   }
   constructor(props) {
     super(props)
@@ -18,6 +23,37 @@ class ParagraphList extends Component {
   componentDidMount() {
     this.build()
   }
+  componentDidUpdate(prevProps) {
+    if (this.props.audio.play_ts === prevProps.audio.play_ts) return
+    this.setCurrentParagraph()
+  }
+  setCurrentParagraph() {
+    const { play_ts } = this.props.audio
+    this.state.paragraphs.some(paragraph => {
+      if (floatLTE(paragraph.start_ts, play_ts) && floatLT(play_ts, paragraph.end_ts)) {
+        this.setCurrentAnnotation(paragraph, play_ts)
+        return true
+      }
+      return false
+    })
+  }
+  setCurrentAnnotation(paragraph, play_ts) {
+    const { id: currentParagraph, annotations } = paragraph
+    let currentAnnotation
+    let annotation
+    let i = 0
+    let len = annotations.length
+    for (let i = 0; i < len - 1; i++) {
+      if (floatLT(play_ts, annotations[i+1].start_ts)) {
+        currentAnnotation = annotations[i].id
+        break
+      }
+    }
+    if (!currentAnnotation) {
+      currentAnnotation = annotations[len-1].id
+    }
+    this.setState({ currentParagraph, currentAnnotation })
+  }
   build() {
     const { order: annotationOrder, lookup: annotationLookup } = this.props.annotation
     const { lookup: paragraphLookup } = this.props.paragraph
@@ -31,22 +67,33 @@ class ParagraphList extends Component {
         currentParagraph = {
           id: annotation.paragraph_id || ('index_' + i),
           type: paragraph_type,
+          start_ts: annotation.start_ts,
+          end_ts: 0,
           annotations: [],
         }
         paragraphs.push(currentParagraph)
       }
-      currentParagraph.annotations.push(annotation)
+      if (annotation.type === 'paragraph_end') {
+        currentParagraph.end_ts = annotation.start_ts
+      } else {
+        currentParagraph.annotations.push(annotation)
+      }
     })
+    for (let i = 0; i < (paragraphs.length - 1); i++) {
+      if (!paragraphs[i].end_ts) {
+        paragraphs[i].end_ts = paragraphs[i+1].start_ts - 0.1
+      }
+    }
     this.setState({ paragraphs })
   }
   onAnnotationClick(e, paragraph, annotation){
-    //
+    actions.audio.seek(annotation.start_ts)
   }
   onParagraphDoubleClick(e, paragraph) {
     //
   }
   render() {
-    const { paragraphs } = this.state
+    const { paragraphs, currentParagraph, currentAnnotation } = this.state
     return (
       <div className='paragraphs'>
         <div className='content'>
@@ -57,8 +104,8 @@ class ParagraphList extends Component {
                 <ParagraphElement
                   key={paragraph.id}
                   paragraph={paragraph}
-                  selectedParagraph={false}
-                  selectedAnnotation={-1}
+                  selectedParagraph={paragraph.id === currentParagraph}
+                  selectedAnnotation={paragraph.id === currentParagraph && currentAnnotation}
                   onAnnotationClick={this.onAnnotationClick}
                   onDoubleClick={this.onParagraphDoubleClick}
                 />