1 files changed, 9 insertions, 6 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 adbc22a..84cf59e 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
@@ -22,6 +22,8 @@ class FullscreenVideo extends Component {
     scrubbing: false,
     // whether or not the video is ready and displaying an image
     ready: false,
+    // trigger an audio fade-out
+    fadeOut: false,
   }
   constructor(props) {
     super(props)
@@ -49,13 +51,13 @@ class FullscreenVideo extends Component {
       this.setState({ seek })
     }
     // if we started leaving the element...
-    if (this.props.isLeaving && this.props.isLeaving !== prevProps.isLeaving && element.settings.unmuted) {
-      this.fadeOutAudio()
+    if (element.fadeOutDuration
+      && !this.state.fadeOut
+      && element.settings.unmuted) {
+      console.log("fade out audio", this.props.fadeOutDuration)
+      setTimeout(() => this.setState({ fadeOut: true }), 0)
     }
   }
-  fadeOutAudio() {
-    console.log("fade out audio", this.props.fadeOutDuration)
-  }
   handlePlay() {
     this.setState({ ready: true })
   }
@@ -77,7 +79,7 @@ class FullscreenVideo extends Component {
 
   render() {
     const { element, media, transitionDuration, play_ts, playing } = this.props
-    const { duration, seconds, ready } = this.state
+    const { duration, seconds, ready, fadeOut } = this.state
     const { color } = element
     const item = media.lookup[element.settings.media_id]
     const style = {
@@ -109,6 +111,7 @@ class FullscreenVideo extends Component {
             responsive={true}
             controls={false}
             byline={false}
+            fadeOut={fadeOut && this.props.fadeOutDuration}
             onPlay={this.handlePlay}
             onPause={this.handlePause}
             onTimeUpdate={this.handleTimeUpdate}