passing cues down to the video and galleries

7 files changed, 40 insertions, 22 deletions

diff --git a/animism-align/frontend/app/constants.js b/animism-align/frontend/app/constants.js
index 079c6b5..8655c3a 100644
--- a/animism-align/frontend/app/constants.js
+++ b/animism-align/frontend/app/constants.js
@@ -97,7 +97,7 @@ export const FULLSCREEN_UTILITY_ANNOTATION_TYPES = new Set([
   'curtain', 'text_plate', 'subtitle',
 ])
 
-export const GALLERY_UTILITY_ANNOTATION_TYPES = new Set([
+export const CUE_UTILITY_ANNOTATION_TYPES = new Set([
   'gallery_advance',
 ])
 
diff --git a/animism-align/frontend/app/views/paragraph/components/paragraph.list.js b/animism-align/frontend/app/views/paragraph/components/paragraph.list.js
index 6de44ba..8020ded 100644
--- a/animism-align/frontend/app/views/paragraph/components/paragraph.list.js
+++ b/animism-align/frontend/app/views/paragraph/components/paragraph.list.js
@@ -62,6 +62,7 @@ class ParagraphList extends Component {
       paragraphs, media,
       paragraphElementLookup, selectedParagraph,
       onAnnotationClick, onParagraphDoubleClick,
+      currentSection,
     } = this.props
     const { currentParagraph, currentAnnotation } = this.state
     if (!paragraphs) return null
@@ -76,6 +77,7 @@ class ParagraphList extends Component {
             key={paragraph.id + "_" + i}
             paragraph={paragraph}
             media={media}
+            currentSection={currentSection}
             currentParagraph={paragraph.id === currentParagraph}
             currentAnnotation={paragraph.id === currentParagraph && currentAnnotation}
             onAnnotationClick={onAnnotationClick}
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}
           />
diff --git a/animism-align/frontend/app/views/viewer/viewer.actions.js b/animism-align/frontend/app/views/viewer/viewer.actions.js
index 1113680..a5ac4a2 100644
--- a/animism-align/frontend/app/views/viewer/viewer.actions.js
+++ b/animism-align/frontend/app/views/viewer/viewer.actions.js
@@ -1,12 +1,12 @@
 import * as types from 'app/types'
-import { store, history, dispatch } from 'app/store'
+import { store } from 'app/store'
 import actions from 'app/actions'
 import {
   MEDIA_ANNOTATION_TYPES, MEDIA_LABEL_TYPES,
   TEXT_ANNOTATION_TYPES,
   INLINE_UTILITY_ANNOTATION_TYPES,
   FULLSCREEN_UTILITY_ANNOTATION_TYPES,
-  GALLERY_UTILITY_ANNOTATION_TYPES,
+  CUE_UTILITY_ANNOTATION_TYPES,
   CURTAIN_COLOR_LOOKUP,
   GROWL,
 } from 'app/constants'
@@ -112,14 +112,18 @@ export const loadSections = () => dispatch => {
       }
     }
 
-    // build timeline of gallery / carousel advance instructions. this is in reverse so we can step thru it
+    // build timeline of "cue" instructions, which tell elements to change
     // TODO: modify this to append these instructions to a list based on media_id, so we can grab it for the gallery
-    if (GALLERY_UTILITY_ANNOTATION_TYPES.has(annotation.type) && currentSection.fullscreenTimeline.length) {
-      const lastTimelineEvent = currentSection.fullscreenTimeline[currentSection.fullscreenTimeline.length - 1]
-      annotation.settings.frame_index = parseInt(annotation.settings.frame_index)
-      annotation.settings.seek_index = annotation.settings.half_frame ? annotation.settings.frame_index + 0.5 : annotation.settings.frame_index
-      lastTimelineEvent.timeline.unshift(annotation)
-      lastTimelineEvent.timelineLookup[annotation.settings.frame_index] = annotation
+    if (CUE_UTILITY_ANNOTATION_TYPES.has(annotation.type)) {
+      if (annotation.type === 'gallery_advance') {
+        annotation.settings.frame_index = parseInt(annotation.settings.frame_index)
+        annotation.settings.seek_index = annotation.settings.half_frame ? annotation.settings.frame_index + 0.5 : annotation.settings.frame_index
+        currentSection.mediaCues[annotation.settings.media_id] = currentSection.mediaCues[annotation.settings.media_id] || []
+        currentSection.mediaCues[annotation.settings.media_id].push(annotation)
+      }
+      else {
+        currentSection.cues.push(annotation)
+      }
     }
 
     // build timeline of special inline items
@@ -229,6 +233,8 @@ const newSection = (annotation, index, mediaIndex) => ({
   cover_style: annotation.settings.cover_style || "cover",
   media: [],
   fullscreenTimeline: [],
+  cues: [],
+  mediaCues: {},
   index,
   mediaIndex,
   no_audio: !!annotation.settings.no_audio,