diff options
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 |