keep track of current section

3 files changed, 40 insertions, 2 deletions

diff --git a/animism-align/frontend/app/utils/index.js b/animism-align/frontend/app/utils/index.js
index d0c75dd..9b605c7 100644
--- a/animism-align/frontend/app/utils/index.js
+++ b/animism-align/frontend/app/utils/index.js
@@ -91,6 +91,7 @@ export const mod = (n, m) => n - (m * Math.floor(n / m))
 export const angle = (x1, y1, x2, y2) => Math.atan2(y2 - y1, x2 - x1)
 export const floatLT = (a,b) => ((a*10|0) < (b*10|0))
 export const floatLTE = (a,b) => ((a*10|0) === (b*10|0) || floatLT(a,b))
+export const floatInRange = (a,b,c) => floatLTE(a, b) && floatLT(b, c)
 
 /* URLs */
 
diff --git a/animism-align/frontend/app/views/paragraph/components/paragraph.list.js b/animism-align/frontend/app/views/paragraph/components/paragraph.list.js
index 02db0e2..473a0e9 100644
--- a/animism-align/frontend/app/views/paragraph/components/paragraph.list.js
+++ b/animism-align/frontend/app/views/paragraph/components/paragraph.list.js
@@ -3,7 +3,7 @@ import { Route } from 'react-router-dom'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 
-import { floatLT, floatLTE } from 'app/utils'
+import { floatLT, floatInRange } from 'app/utils'
 import ParagraphForm from '../components/paragraph.form'
 
 class ParagraphList extends Component {
@@ -20,7 +20,7 @@ class ParagraphList extends Component {
   setCurrentParagraph() {
     const { play_ts } = this.props.audio
     const insideParagraph = this.props.paragraphs.some(paragraph => {
-      if (floatLTE(paragraph.start_ts, play_ts) && floatLT(play_ts, paragraph.end_ts)) {
+      if (floatInRange(paragraph.start_ts, play_ts, paragraph.end_ts)) {
         this.setCurrentAnnotation(paragraph, play_ts)
         return true
       }
diff --git a/animism-align/frontend/app/views/viewer/player/player.container.js b/animism-align/frontend/app/views/viewer/player/player.container.js
index 565ece1..3fa91b1 100644
--- a/animism-align/frontend/app/views/viewer/player/player.container.js
+++ b/animism-align/frontend/app/views/viewer/player/player.container.js
@@ -1,12 +1,48 @@
 import React, { Component } from 'react'
 // import { Link } from 'react-router-dom'
 import { connect } from 'react-redux'
+import { floatInRange } from 'app/utils'
 
 import actions from 'app/actions'
 
 class PlayerContainer extends Component {
+  state = {
+    currentSection: -1,
+  }
+
   componentDidMount() {
+    this.setCurrentSection()
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.audio.play_ts === prevProps.audio.play_ts) return
+    this.setCurrentSection()
   }
+
+  setCurrentSection() {
+    const { currentSection } = this.state
+    const { audio, sections } = this.props
+    const { play_ts } = audio
+    if (floatInRange(currentSection.start_ts, play_ts, currentSection.end_ts)) {
+      return
+    }
+
+    const insideSection = sections.some(section => {
+      if (floatInRange(section.start_ts, play_ts, section.end_ts)) {
+        if (currentSection !== section) {
+          this.setState({ currentSection: section })
+        }
+        return true
+      }
+      return false
+    })
+    if (!insideSection) {
+      this.setState({
+        currentSection: sections[0],
+      })
+    }
+  }
+
   
   render() {
     const { } = this.props
@@ -20,6 +56,7 @@ class PlayerContainer extends Component {
 }
 
 const mapStateToProps = state => ({
+  audio: state.audio,
   sections: state.viewer.sections,
   fullscreenTimeline: state.viewer.fullscreenTimeline,
 })