better potential logic for whether persistent fullscreen elements are present

4 files changed, 38 insertions, 11 deletions

diff --git a/animism-align/frontend/app/constants.js b/animism-align/frontend/app/constants.js
index c113f3c..73cc5e7 100644
--- a/animism-align/frontend/app/constants.js
+++ b/animism-align/frontend/app/constants.js
@@ -76,6 +76,11 @@ export const GALLERY_UTILITY_ANNOTATION_TYPES = new Set([
   'gallery_advance',
 ])
 
+// elements which, if fullscreen, will not disappear if the episode is paused
+export const PERSISTENT_FULLSCREEN_ELEMENTS = new Set([
+  'video', 'gallery', 'carousel', 'vitrine',
+])
+
 export const CURTAIN_COLORS = [
   { label: 'white', backgroundColor: 'rgba(255,255,255,1.0)', textColor: '#000000' },
   { label: 'light gray', backgroundColor: 'rgba(238,238,238,1.0)', textColor: '#000000' },
@@ -124,4 +129,4 @@ export const GROWL = {
   REACHED_END_OF_FIRST_SECTION: "Click \"Next\" to advance the exhibition.",
 }
 
-export const VIDEO_SCRUBBER_HIDE_DELAY = 1500
+export const VIDEO_SCRUBBER_HIDE_DELAY = 1000
diff --git a/animism-align/frontend/app/views/viewer/nav/nav.parent.js b/animism-align/frontend/app/views/viewer/nav/nav.parent.js
index 0c17c7d..3df2ce4 100644
--- a/animism-align/frontend/app/views/viewer/nav/nav.parent.js
+++ b/animism-align/frontend/app/views/viewer/nav/nav.parent.js
@@ -52,7 +52,7 @@ class NavParent extends Component {
   handleNavBarClick(e) {
     e && e.stopPropagation()
     actions.viewer.toggleComponent('nav')
-    console.log('>> CLICK NAV')
+    // console.log('>> CLICK NAV')
   }
   handleMouseMove(e) {
     e && e.stopPropagation()
diff --git a/animism-align/frontend/app/views/viewer/player/player.fullscreen.css b/animism-align/frontend/app/views/viewer/player/player.fullscreen.css
index 5963433..6fa028e 100644
--- a/animism-align/frontend/app/views/viewer/player/player.fullscreen.css
+++ b/animism-align/frontend/app/views/viewer/player/player.fullscreen.css
@@ -7,10 +7,19 @@
   overflow: hidden;
   pointer-events: none;
   user-select: none;
+  opacity: 1.0;
 }
 .viewer-fullscreen.active {
   pointer-events: auto;
   user-select: auto;
+  transition: opacity 0.5s;
+  opacity: 1.0;
+}
+.viewer-fullscreen.active.playing {
+  pointer-events: auto;
+  user-select: auto;
+  transition: opacity 0.5s;
+  opacity: 1.0;
 }
 
 /* transitions */
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>