introducing stuff for fading in audio

3 files changed, 15 insertions, 4 deletions

diff --git a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.video.js b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.video.js
index e226bab..adbc22a 100644
--- a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.video.js
+++ b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.video.js
@@ -40,13 +40,21 @@ class FullscreenVideo extends Component {
     })
   }
   componentDidUpdate(prevProps) {
-    if (Math.abs(this.props.play_ts - prevProps.play_ts) > 1.0) {
+    // if the play_ts jumped more than a second, seek
+    const { play_ts, element } = this.props
+    if (Math.abs(play_ts - prevProps.play_ts) > 1.0) {
       // handle seek
-      const { play_ts, element } = this.props
       const { duration, video_start_ts } = this.state
       const seek = ((play_ts - element.start_ts) % duration) + video_start_ts
       this.setState({ seek })
     }
+    // if we started leaving the element...
+    if (this.props.isLeaving && this.props.isLeaving !== prevProps.isLeaving && element.settings.unmuted) {
+      this.fadeOutAudio()
+    }
+  }
+  fadeOutAudio() {
+    console.log("fade out audio", this.props.fadeOutDuration)
   }
   handlePlay() {
     this.setState({ ready: true })
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 2f17375..4da9a3b 100644
--- a/animism-align/frontend/app/views/viewer/player/player.fullscreen.js
+++ b/animism-align/frontend/app/views/viewer/player/player.fullscreen.js
@@ -59,8 +59,6 @@ class PlayerFullscreen extends Component {
         }
         return e
       })
-    } else {
-      // console.log(play_ts, seek_ts, 'elements', elements)
     }
     // console.log(elements)
     // set nav style from top-most element
@@ -128,6 +126,10 @@ class PlayerFullscreen extends Component {
                 <FullscreenComponent
                   element={element}
                   media={media}
+                  fadeInDuration={fadeInDuration}
+                  fadeOutDuration={fadeOutDuration}
+                  isEntering={isEntering}
+                  isLeaving={isLeaving}
                   transitionDuration={transitionDuration}
                 />
               </CSSTransition>
diff --git a/animism-align/frontend/app/views/viewer/player/player.transcript.css b/animism-align/frontend/app/views/viewer/player/player.transcript.css
index e5a323c..15a02b6 100644
--- a/animism-align/frontend/app/views/viewer/player/player.transcript.css
+++ b/animism-align/frontend/app/views/viewer/player/player.transcript.css
@@ -247,6 +247,7 @@
 
 .player-transcript .media.video .videoContainer {
   position: relative;
+  transition: opacity 0.5s;
 }
 
 .player-transcript .media.video .speaker-icon,