auto advance carousel

3 files changed, 57 insertions, 16 deletions

diff --git a/animism-align/frontend/app/views/viewer/player/components.media/index.js b/animism-align/frontend/app/views/viewer/player/components.media/index.js
index 4fcf649..37f6f64 100644
--- a/animism-align/frontend/app/views/viewer/player/components.media/index.js
+++ b/animism-align/frontend/app/views/viewer/player/components.media/index.js
@@ -12,9 +12,7 @@ import {
   Gallery
 } from './media.gallery'
 
-import {
-  Carousel
-} from './media.carousel'
+import Carousel from './media.carousel'
 
 import {
   Grid
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 46458b5..c2d091a 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
@@ -1,4 +1,5 @@
 import React, { Component } from 'react'
+import { connect } from 'react-redux'
 import { useKeenSlider } from "app/utils/vendor/keen-slider/react"
 import "keen-slider/keen-slider.min.css"
 
@@ -8,12 +9,14 @@ import { Arrow } from 'app/views/viewer/nav/viewer.icons'
 const SPACING = 15
 const SLIDES_PER_VIEW = 2
 
-export const Carousel = ({ media }) => {
-  const { image_order, image_lookup, display_lookup, thumbnail_lookup, caption_lookup } = media.settings
+// obnoxious i have to do this but the slideChanged function would be "different" otherwise
+let slideChangedHook = slider => console.log(slider)
+let slideChanged = slider => slideChangedHook(slider)
+
+const CarouselContainer = ({ element, play_ts, media }) => {
+  const { image_order, caption_lookup } = media.settings
 
-  // const [details, setDetails] = React.useState(null)
   const [currentSlide, setCurrentSlide] = React.useState(0)
-  const [currentCaption, setCurrentCaption] = React.useState(caption_lookup[image_order[0]])
   const [sliderRef, slider] = useKeenSlider({
     slidesPerView: SLIDES_PER_VIEW,
     mode: "free",
@@ -21,15 +24,46 @@ export const Carousel = ({ media }) => {
     centered: true,
     loop: false,
     // duration: 700,
-    slideChanged: slider => {
-      const currentSlideIndex = slider.details().relativeSlide
-      const currentImageId = image_order[currentSlideIndex]
-      const currentCaption = caption_lookup[currentImageId]
-      setCurrentSlide(currentSlideIndex)
-      setCurrentCaption(currentCaption)
-    },
+    slideChanged: slideChanged,
+  })
+
+  slideChangedHook = s => {
+    const currentSlideIndex = s.details().relativeSlide
+    setCurrentSlide(currentSlideIndex)
+  }
+
+  // step thru this carousel's timeline, which is ordered in reverse BTW
+  element.timeline.some(cue => {
+    if (cue.start_ts < play_ts) {
+      let slide_index = parseInt(cue.settings.frame_index)
+      if (cue.settings.half_frame) {
+        slide_index += 0.5
+      }
+      if (currentSlide < slide_index) {
+        setCurrentSlide(slide_index)
+        slider.moveToSlideRelative(slide_index)
+      }
+      return true
+    }
+    return false
   })
 
+  const currentCaption = caption_lookup[image_order[currentSlide]]
+
+  return (
+    <Carousel
+      media={media}
+      slider={slider}
+      sliderRef={sliderRef}
+      currentSlide={currentSlide}
+      currentCaption={currentCaption}
+    />
+  )
+}
+
+const CarouselComponent = ({ media, slider, sliderRef, currentSlide, currentCaption }) => {
+  const { image_order, display_lookup } = media.settings
+
   return [
     <div key={'carousel_' + media.id} ref={sliderRef} className='keen-slider carousel-items'>
       {image_order.map((id, idx) => {
@@ -58,6 +92,8 @@ export const Carousel = ({ media }) => {
   ]
 }
 
+const Carousel = React.memo(CarouselComponent)
+
 const CarouselNav = ({ currentSlide, slides, onPrev, onNext, onPick }) => {
   return (
     <div className="carousel-nav">
@@ -106,3 +142,10 @@ const CarouselItem = ({ image }) => {
     }} />
   )
 }
+
+
+const mapStateToProps = state => ({
+  play_ts: state.audio.play_ts,
+})
+
+export default connect(mapStateToProps)(CarouselContainer)
diff --git a/animism-align/frontend/app/views/viewer/viewer.actions.js b/animism-align/frontend/app/views/viewer/viewer.actions.js
index 2771957..21a8098 100644
--- a/animism-align/frontend/app/views/viewer/viewer.actions.js
+++ b/animism-align/frontend/app/views/viewer/viewer.actions.js
@@ -111,11 +111,11 @@ export const loadSections = () => dispatch => {
       }
     }
 
-    // build timeline of gallery / carousel advance instructions
+    // build timeline of gallery / carousel advance instructions. this is in reverse so we can step thru it
     if (GALLERY_UTILITY_ANNOTATION_TYPES.has(annotation.type) && currentSection.fullscreenTimeline.length) {
       const lastTimelineEvent = currentSection.fullscreenTimeline[currentSection.fullscreenTimeline.length - 1]
       if (!lastTimelineEvent.timeline) lastTimelineEvent.timeline = []
-      lastTimelineEvent.timeline.push(annotation)
+      lastTimelineEvent.timeline.unshift(annotation)
     }
 
     // build timeline of special inline items