speaker icons in gallery

4 files changed, 41 insertions, 32 deletions

diff --git a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.gallery.js b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.gallery.js
index 530048d..25b6bc0 100644
--- a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.gallery.js
+++ b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.gallery.js
@@ -5,7 +5,7 @@ import { MediaCitation, Vitrine, Gallery, Carousel, Grid } from '../components.m
 
 export const FullscreenVitrine = ({ element, media, transitionDuration }) => {
   const { color } = element
-  const item = media.lookup[element.settings.media_id]
+  const mediaItem = media.lookup[element.settings.media_id]
   const style = {
     backgroundColor: color.backgroundColor,
     color: color.textColor,
@@ -17,15 +17,15 @@ export const FullscreenVitrine = ({ element, media, transitionDuration }) => {
       style={style}
     >
       {element.settings.title && <div className='heading'>{element.settings.title}</div>}
-      <Vitrine media={item} color={color} />
-      <MediaCitation media={item} />
+      <Vitrine media={mediaItem} color={color} />
+      <MediaCitation media={mediaItem} />
     </div>
   )
 }
 
 export const FullscreenGallery = ({ element, media, transitionDuration }) => {
   const { color } = element
-  const item = media.lookup[element.settings.media_id]
+  const mediaItem = media.lookup[element.settings.media_id]
   const style = {
     backgroundColor: color.backgroundColor,
     color: color.textColor,
@@ -40,8 +40,8 @@ export const FullscreenGallery = ({ element, media, transitionDuration }) => {
   )
 }
 
-export const FullscreenCarousel = ({ element, media, transitionDuration }) => {
-  const item = media.lookup[element.settings.media_id]
+export const FullscreenCarousel = ({ element, media, currentSection, transitionDuration }) => {
+  const mediaItem = media.lookup[element.settings.media_id]
   const color = element.color || CURTAIN_COLOR_LOOKUP.white
   const style = {
     backgroundColor: color.backgroundColor,
@@ -54,7 +54,13 @@ export const FullscreenCarousel = ({ element, media, transitionDuration }) => {
       style={style}
     >
       {element.settings.title && <div className='heading'>{element.settings.title}</div>}
-      <Carousel element={element} media={item} withCitation withMouseWheel />
+      <Carousel
+        cues={currentSection.mediaCues[mediaItem.id]}
+        element={element}
+        media={mediaItem}
+        withCitation
+        withMouseWheel
+      />
     </div>
   )
 }
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 20dedd2..f113abf 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
@@ -5,7 +5,7 @@ import { MediaCitation, Vitrine, Gallery, Carousel, Grid } from '../components.m
 
 export const InlineVitrine = ({ paragraph, media, currentSection, onAnnotationClick }) => {
   const annotation = paragraph.annotations[0]
-  const item = media.lookup[annotation.settings.media_id]
+  const mediaItem = media.lookup[annotation.settings.media_id]
   const color = CURTAIN_COLOR_LOOKUP[annotation.settings.color] || CURTAIN_COLOR_LOOKUP.white
   const style = {
     backgroundColor: color.backgroundColor,
@@ -17,39 +17,41 @@ export const InlineVitrine = ({ paragraph, media, currentSection, onAnnotationCl
       style={style}
     >
       {annotation.settings.title && <div className='heading'>{annotation.settings.title}</div>}
-      <Vitrine media={item} color={color} />
+      <Vitrine media={mediaItem} color={color} />
     </div>
   )
-  // <MediaCitation media={item} />
+  // <MediaCitation media={mediaItem} />
 }
 
 export const InlineGallery = ({ paragraph, media, currentSection, onAnnotationClick }) => {
   const annotation = paragraph.annotations[0]
-  const item = media.lookup[annotation.settings.media_id]
+  const mediaItem = media.lookup[annotation.settings.media_id]
   return (
     <div
       className='inline-element media gallery'
     >
-      <Gallery media={item} annotation={annotation} />
+      <Gallery media={mediaItem} annotation={annotation} />
     </div>
   )
 }
 
 export const InlineCarousel = ({ paragraph, media, currentSection, onAnnotationClick }) => {
   const annotation = paragraph.annotations[0]
-  const item = media.lookup[annotation.settings.media_id]
+  const mediaItem = media.lookup[annotation.settings.media_id]
   const color = CURTAIN_COLOR_LOOKUP[annotation.settings.color] || CURTAIN_COLOR_LOOKUP.white
   const style = {
     backgroundColor: color.backgroundColor,
     color: color.textColor,
   }
-
   return (
     <div
       className={'inline-element media carousel ' + color.label}
     >
       <div style={style} className='carousel-container'>
-        <Carousel media={item} />
+        <Carousel
+          media={mediaItem}
+          cues={currentSection.mediaCues[mediaItem.id]}
+        />
       </div>
     </div>
   )
@@ -57,15 +59,14 @@ export const InlineCarousel = ({ paragraph, media, currentSection, onAnnotationC
 
 export const InlineGrid = ({ paragraph, media, currentSection, onAnnotationClick }) => {
   const annotation = paragraph.annotations[0]
-  const item = media.lookup[annotation.settings.media_id]
-
+  const mediaItem = media.lookup[annotation.settings.media_id]
   return (
     <div
       className='inline-element media grid'
     >
-      <Grid media={item} annotation={annotation} />
+      <Grid media={mediaItem} annotation={annotation} />
     </div>
   )
 }
 
-// <MediaCitation media={item} />
+// <MediaCitation media={mediaItem} />
diff --git a/animism-align/frontend/app/views/viewer/player/components.media/media.carousel.js b/animism-align/frontend/app/views/viewer/player/components.media/media.carousel.js
index 60907e5..143c97d 100644
--- a/animism-align/frontend/app/views/viewer/player/components.media/media.carousel.js
+++ b/animism-align/frontend/app/views/viewer/player/components.media/media.carousel.js
@@ -15,7 +15,7 @@ const SLIDES_PER_VIEW = 2
 let slideChangedHook = slider => console.log(slider)
 let slideChanged = slider => slideChangedHook(slider)
 
-const CarouselContainer = ({ element, media, play_ts, withMouseWheel }) => {
+const CarouselContainer = ({ element, media, cues, play_ts, withMouseWheel }) => {
   const { image_order, caption_lookup } = media.settings
 
   const [currentSlide, setCurrentSlide] = React.useState(0)
@@ -57,18 +57,18 @@ const CarouselContainer = ({ element, media, play_ts, withMouseWheel }) => {
       sliderRef={sliderRef}
       currentSlide={currentSlide}
       currentCaption={currentCaption}
-      timelineLookup={element && element.timelineLookup}
+      cues={cues}
     />
   )
 }
 
-const CarouselComponent = ({ media, slider, sliderRef, currentSlide, currentCaption, timelineLookup }) => {
+const CarouselComponent = ({ media, slider, sliderRef, currentSlide, currentCaption, cues }) => {
   const { image_order, display_lookup } = media.settings
   return (
     <div className="carousel-component">
       <div className="carousel-positioning">
         <div key={'carousel_' + media.id} ref={sliderRef} className='keen-slider carousel-items'>
-          {image_order.map((id, idx) => {
+          {image_order.map((id, index) => {
             const image = display_lookup[id]
             // console.log(image)
             return (
@@ -76,7 +76,7 @@ const CarouselComponent = ({ media, slider, sliderRef, currentSlide, currentCapt
                 key={id}
                 image={image}
                 slider={slider}
-                seekAnnotation={timelineLookup && timelineLookup[idx]}
+                seekAnnotation={cues && cues.lookup[index]}
               />
             )
           })}
@@ -124,17 +124,18 @@ const CarouselArrow = ({ disabled, type, onClick }) => ((
     <Arrow type={type === 'prev' ? 'left' : 'right'} />
   </div>
 ))
+
 const CarouselDots = ({ slides, currentSlide, onPick }) => ((
   <div className="dots">
-    {[...slides.keys()].map(idx => {
+    {[...slides.keys()].map(index => {
       return (
         <div
-          key={idx}
+          key={index}
           onClick={() => {
-            onPick(idx)
+            onPick(index)
           }}
-          tabIndex={idx}
-          className={"dot-item" + (Math.round(currentSlide) === idx ? " active" : "")}
+          tabIndex={index}
+          className={"dot-item" + (Math.round(currentSlide) === index ? " active" : "")}
         >
           <div className="dot-circle" />
         </div>
diff --git a/animism-align/frontend/app/views/viewer/viewer.actions.js b/animism-align/frontend/app/views/viewer/viewer.actions.js
index a5ac4a2..43c40da 100644
--- a/animism-align/frontend/app/views/viewer/viewer.actions.js
+++ b/animism-align/frontend/app/views/viewer/viewer.actions.js
@@ -118,8 +118,9 @@ export const loadSections = () => dispatch => {
       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)
+        currentSection.mediaCues[annotation.settings.media_id] = currentSection.mediaCues[annotation.settings.media_id] || { cues: [], lookup: {} }
+        currentSection.mediaCues[annotation.settings.media_id].cues.push(annotation)
+        currentSection.mediaCues[annotation.settings.media_id].lookup[annotation.settings.frame_index] = annotation
       }
       else {
         currentSection.cues.push(annotation)
@@ -251,7 +252,7 @@ export const makeFullscreenEvent = (index, annotation, currentSection) => {
     settings: annotation.settings,
     type: annotation.type,
     timeline: [],
-    timelineLookup: {},
+    // timelineLookup: {},
   }
   if (annotation.settings.color) {
     if (annotation.settings.color.name) {