passing cues down to the video and galleries

4 files changed, 22 insertions, 12 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 abdd90a..cacd323 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
@@ -43,21 +43,29 @@ class FullscreenVideo extends Component {
   }
   componentDidUpdate(prevProps) {
     // if the play_ts jumped more than a second, seek
-    const { play_ts, element } = this.props
+    const { play_ts, element, currentSection } = 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 })
     }
-    // if we started leaving the element...
-    if (element.fadeOutDuration
-      && !this.state.fadeOut
-      && element.settings.unmuted) {
-      // console.log("fade out audio", this.props.fadeOutDuration)
-      setTimeout(() => this.setState({ fadeOut: true }), 0)
+    // 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) {
+        // console.log("fade out audio", this.props.fadeOutDuration)
+        setTimeout(() => this.setState({ fadeOut: true }), 0)
+      }
+      // otherwise, check if we gotta set the volume based on the position
+      else if (currentSection.cues.length) {
+        this.checkCuePosition(play_ts, currentSection.cues)
+      }
     }
   }
+  checkCuePosition() {
+    // if (this.)
+  }
   handlePlay() {
     this.setState({ ready: true })
   }
diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/inline.gallery.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.gallery.js
index 68fad1e..20dedd2 100644
--- a/animism-align/frontend/app/views/viewer/player/components.inline/inline.gallery.js
+++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.gallery.js
@@ -3,7 +3,7 @@
 import { CURTAIN_COLOR_LOOKUP } from 'app/constants'
 import { MediaCitation, Vitrine, Gallery, Carousel, Grid } from '../components.media'
 
-export const InlineVitrine = ({ paragraph, media, onAnnotationClick }) => {
+export const InlineVitrine = ({ paragraph, media, currentSection, onAnnotationClick }) => {
   const annotation = paragraph.annotations[0]
   const item = media.lookup[annotation.settings.media_id]
   const color = CURTAIN_COLOR_LOOKUP[annotation.settings.color] || CURTAIN_COLOR_LOOKUP.white
@@ -23,7 +23,7 @@ export const InlineVitrine = ({ paragraph, media, onAnnotationClick }) => {
   // <MediaCitation media={item} />
 }
 
-export const InlineGallery = ({ paragraph, media, onAnnotationClick }) => {
+export const InlineGallery = ({ paragraph, media, currentSection, onAnnotationClick }) => {
   const annotation = paragraph.annotations[0]
   const item = media.lookup[annotation.settings.media_id]
   return (
@@ -35,7 +35,7 @@ export const InlineGallery = ({ paragraph, media, onAnnotationClick }) => {
   )
 }
 
-export const InlineCarousel = ({ paragraph, media, onAnnotationClick }) => {
+export const InlineCarousel = ({ paragraph, media, currentSection, onAnnotationClick }) => {
   const annotation = paragraph.annotations[0]
   const item = media.lookup[annotation.settings.media_id]
   const color = CURTAIN_COLOR_LOOKUP[annotation.settings.color] || CURTAIN_COLOR_LOOKUP.white
@@ -55,7 +55,7 @@ export const InlineCarousel = ({ paragraph, media, onAnnotationClick }) => {
   )
 }
 
-export const InlineGrid = ({ paragraph, media, onAnnotationClick }) => {
+export const InlineGrid = ({ paragraph, media, currentSection, onAnnotationClick }) => {
   const annotation = paragraph.annotations[0]
   const item = media.lookup[annotation.settings.media_id]
 
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 96a428e..a60eee9 100644
--- a/animism-align/frontend/app/views/viewer/player/player.fullscreen.js
+++ b/animism-align/frontend/app/views/viewer/player/player.fullscreen.js
@@ -118,7 +118,7 @@ class PlayerFullscreen extends Component {
   }
 
   render() {
-    const { audio, media } = this.props
+    const { audio, media, currentSection } = this.props
     const { play_ts, playing } = audio
     const { elements, persist } = this.state
     let className = "viewer-fullscreen";
@@ -168,6 +168,7 @@ class PlayerFullscreen extends Component {
                 <FullscreenComponent
                   element={element}
                   media={media}
+                  currentSection={currentSection}
                   fadeInDuration={fadeInDuration}
                   fadeOutDuration={fadeOutDuration}
                   isEntering={isEntering}
diff --git a/animism-align/frontend/app/views/viewer/player/player.transcript.js b/animism-align/frontend/app/views/viewer/player/player.transcript.js
index 3599976..1ce98ef 100644
--- a/animism-align/frontend/app/views/viewer/player/player.transcript.js
+++ b/animism-align/frontend/app/views/viewer/player/player.transcript.js
@@ -71,6 +71,7 @@ class PlayerTranscript extends Component {
           <ParagraphList
             paragraphs={paragraphs}
             paragraphElementLookup={inlineComponents}
+            currentSection={this.props.section}
             onAnnotationClick={this.handleAnnotationClick}
             onParagraphDoubleClick={this.handleParagraphDoubleClick}
           />