fix fades

2 files changed, 17 insertions, 6 deletions

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 cf3c697..6faa60b 100644
--- a/animism-align/frontend/app/views/viewer/player/player.fullscreen.css
+++ b/animism-align/frontend/app/views/viewer/player/player.fullscreen.css
@@ -7,7 +7,11 @@
   overflow: hidden;
   pointer-events: none;
   user-select: none;
-  opacity: 0.0;
+  opacity: 1.0;
+  transition: opacity 0.5s;
+}
+.viewer-fullscreen.seeked {
+  transition: opacity 0.0s;
 }
 .viewer-fullscreen.active {
   pointer-events: auto;
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 04421de..a1cc235 100644
--- a/animism-align/frontend/app/views/viewer/player/player.fullscreen.js
+++ b/animism-align/frontend/app/views/viewer/player/player.fullscreen.js
@@ -13,6 +13,8 @@ class PlayerFullscreen extends Component {
   state = {
     elements: [],
     video: false,
+    isSingleton: false,
+    atChapterStart: false,
   }
 
   componentDidMount() {
@@ -33,11 +35,12 @@ class PlayerFullscreen extends Component {
     let { play_ts, seek_ts } = audio
     play_ts = clamp(play_ts, currentSection.start_ts, currentSection.end_ts)
 
-    let elements;
+    let elements, isSingleton = false, atChapterStart = false
     // console.log(timeline)
     // some classes can be singleton media for an entire chapter, like vitrines
     if (timeline.length === 1 && timeline[0].type === 'vitrine') {
       elements = timeline
+      isSingleton = true
     }
     else {
       // get elements at this play position
@@ -66,6 +69,7 @@ class PlayerFullscreen extends Component {
       // also any elements starting at this point should transition immediately,
       // to prevent flash of the underlying content.
       if (justSeeked && seekedElements.length) {
+        atChapterStart = true
         // console.log(play_ts, seek_ts, 'seeked', seekedElements)
         elements = seekedElements.map(e => {
           if (e.start_ts === seek_ts && e.type !== 'curtain') {
@@ -113,18 +117,18 @@ class PlayerFullscreen extends Component {
       actions.viewer.setNavStyle(currentSection.color)
       actions.viewer.setMediaTitle(null)
     }
-    // elements.reverse()
-    this.setState({ elements, persist })
     // if fullscreen mode started or ended...
     if (!!elements.length !== this.props.isFullscreen) {
-      actions.viewer.updateFullscreenStatus(!!elements.length, persist)
+      actions.viewer.updateFullscreenStatus(!!elements.length, persist, isSingleton)
     }
+    // elements.reverse()
+    this.setState({ elements, persist, isSingleton, atChapterStart })
   }
 
   render() {
     const { audio, media, currentSection, fullscreenVisible } = this.props
     const { play_ts, playing } = audio
-    const { elements, persist } = this.state
+    const { elements, persist, atChapterStart } = this.state
     let className = "viewer-fullscreen";
     if (elements.length) {
       className += " active"
@@ -135,6 +139,9 @@ class PlayerFullscreen extends Component {
     if (persist) {
       className += " persist"
     }
+    if (atChapterStart) {
+      className += " seeked"
+    }
     className += playing ? " playing" : " paused"
     return (
       <div className={className}>