1 files changed, 22 insertions, 9 deletions
diff --git a/animism-align/frontend/app/views/viewer/player/player.fullscreen.js b/animism-align/frontend/app/views/viewer/player/player.fullscreen.js
index e16a962..3484560 100644
--- a/animism-align/frontend/app/views/viewer/player/player.fullscreen.js
+++ b/animism-align/frontend/app/views/viewer/player/player.fullscreen.js
@@ -3,14 +3,16 @@ import { connect } from 'react-redux'
 import { TransitionGroup, CSSTransition } from 'react-transition-group'
 
 import actions from 'app/actions'
-import { floatInRange, floatLT } from 'app/utils'
+import { clamp, floatInRange, floatLT } from 'app/utils'
 
+import { PERSISTENT_FULLSCREEN_ELEMENTS } from 'app/constants'
 import { fullscreenComponents } from './components.fullscreen'
 import { makeFullscreenEvent } from '../viewer.actions'
 
 class PlayerFullscreen extends Component {
   state = {
     elements: [],
+    video: false,
   }
 
   componentDidMount() {
@@ -18,15 +20,18 @@ class PlayerFullscreen extends Component {
   }
 
   componentDidUpdate(prevProps) {
+    const sectionChanged = this.props.currentSection !== prevProps.currentSection
     const playTimeChanged = this.props.audio.play_ts !== prevProps.audio.play_ts
     const seekTimeChanged = this.props.audio.seek_ts !== prevProps.audio.seek_ts
-    if (!playTimeChanged && !seekTimeChanged) return
-    this.setCurrentElements()
+    if (sectionChanged || playTimeChanged || seekTimeChanged) {
+      this.setCurrentElements()
+    }
   }
 
   setCurrentElements() {
     const { audio, timeline, currentSection, media } = this.props
-    const { play_ts, seek_ts } = audio
+    let { play_ts, seek_ts } = audio
+    play_ts = clamp(play_ts, currentSection.start_ts, currentSection.end_ts)
     // get elements at this play position
     let elements = timeline.filter(element => (
       floatInRange(element.start_ts, play_ts, element.fade_out_start_ts + 0.1)
@@ -77,8 +82,10 @@ class PlayerFullscreen extends Component {
     }
     // console.log(elements)
     // set nav style from top-most element
+    let persist = false;
     if (elements.length) {
       const lastElement = elements[elements.length - 1]
+      persist = elements.filter(e => PERSISTENT_FULLSCREEN_ELEMENTS.has(e.type))
       if (lastElement.color && lastElement.color.textColor === '#ffffff') {
         actions.viewer.setNavStyle('black')
       } else {
@@ -95,15 +102,21 @@ class PlayerFullscreen extends Component {
       actions.viewer.setMediaTitle(null)
     }
     // elements.reverse()
-    this.setState({ elements })
+    this.setState({ elements, persist })
   }
 
   render() {
     const { audio, media } = this.props
-    const { play_ts } = audio
-    const { elements } = this.state
-    const className = elements.length ? "viewer-fullscreen active" : "viewer-fullscreen"
-    // console.log(elements, play_ts)
+    const { play_ts, playing } = audio
+    const { elements, persist } = this.state
+    let className = "viewer-fullscreen";
+    if (elements.length) {
+      className += " active"
+    }
+    if (persist) {
+      className += " persist"
+    }
+    className += playing ? " playing" : " paused"
     return (
       <div className={className}>
         <TransitionGroup>