1 files changed, 37 insertions, 8 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 cacd323..adbc443 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
@@ -24,6 +24,10 @@ class FullscreenVideo extends Component {
     ready: false,
     // trigger an audio fade-out
     fadeOut: false,
+    // volume
+    volume: 1.0,
+    volumeFadeTime: 1000,
+    lastCue: -1,
   }
   constructor(props) {
     super(props)
@@ -43,17 +47,18 @@ class FullscreenVideo extends Component {
   }
   componentDidUpdate(prevProps) {
     // if the play_ts jumped more than a second, seek
-    const { play_ts, element, currentSection } = this.props
+    const { play_ts, element, currentSection, fadeOutDuration } = this.props
     if (Math.abs(play_ts - prevProps.play_ts) > 1.0) {
       // handle seek
       const { duration, video_start_ts } = this.state
       const seek = ((play_ts - element.start_ts) % duration) + video_start_ts
       this.setState({ seek })
     }
+    // console.log(play_ts, currentSection.cues.length, fadeOutDuration, element.settings.unmuted, this.state.fadeOut)
     // volume changes - only if unmuted and not already leaving.
     if (element.settings.unmuted && !this.state.fadeOut) {
       // if we just started leaving the element, fade out the audio
-      if (element.fadeOutDuration) {
+      if (fadeOutDuration) {
         // console.log("fade out audio", this.props.fadeOutDuration)
         setTimeout(() => this.setState({ fadeOut: true }), 0)
       }
@@ -63,8 +68,28 @@ class FullscreenVideo extends Component {
       }
     }
   }
-  checkCuePosition() {
-    // if (this.)
+  checkCuePosition(play_ts, cues) {
+    // const { volume element.settings.unmuted ? volume : 0.0
+    const { unmuted } = this.props.element.settings
+    let volume = unmuted ? 1.0 : 0.0
+    let { volumeFadeTime, lastCue } = this.state
+    // console.log(cues)
+    cues.some((cue, i) => {
+      if (cue.start_ts < play_ts) {
+        lastCue = i
+        if (cue.settings.volume) {
+          volume = parseFloat(cue.settings.volume)
+          volumeFadeTime = timestampToSeconds(cue.settings.duration) * 1000
+          // console.log(volume, volumeFadeTime)
+          return false
+        }
+      }
+      return true
+    })
+    // console.log('last cue', lastCue, volume, volumeFadeTime)
+    if (lastCue !== this.state.lastCue) {
+      this.setState({ volume, volumeFadeTime, lastCue })
+    }
   }
   handlePlay() {
     this.setState({ ready: true })
@@ -86,8 +111,8 @@ class FullscreenVideo extends Component {
   }
 
   render() {
-    const { element, media, transitionDuration, play_ts, playing, cc, volume } = this.props
-    const { duration, seconds, ready, fadeOut } = this.state
+    const { element, media, transitionDuration, play_ts, playing, cc, playerVolume } = this.props
+    const { duration, seconds, ready, volume, volumeFadeTime, fadeOut, lastCue } = this.state
     const { color } = element
     const item = media.lookup[element.settings.media_id]
     const style = {
@@ -99,6 +124,7 @@ class FullscreenVideo extends Component {
       opacity: ready ? 1.0 : 0.0
     }
     // 
+    // console.log(volume, playerVolume)
     return (
       <div
         className='fullscreen-element video'
@@ -119,12 +145,15 @@ class FullscreenVideo extends Component {
             responsive={true}
             controls={false}
             byline={false}
-            volume={element.settings.unmuted ? volume : 0.0}
+            volume={element.settings.unmuted ? playerVolume : 0.0}
+            targetVolume={element.settings.unmuted ? volume * playerVolume : 0.0}
+            volumeFadeTime={volumeFadeTime}
             fadeOut={fadeOut && this.props.fadeOutDuration}
             onPlay={this.handlePlay}
             onPause={this.handlePause}
             onTimeUpdate={this.handleTimeUpdate}
             onEnd={this.handleEnd}
+            lastCue={lastCue}
           />
         </div>
         <VideoScrubber
@@ -152,7 +181,7 @@ const mapStateToProps = state => ({
   viewer: state.viewer,
   play_ts: state.audio.play_ts,
   playing: state.audio.playing,
-  volume: state.audio.volume,
+  playerVolume: state.audio.volume,
   cc: state.audio.cc,
 })