speaker icons in gallery

1 files changed, 11 insertions, 10 deletions

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>