1 files changed, 37 insertions, 0 deletions
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,
 })