From 0e45ce2ea046068de8d792e653497dae5433ae77 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 9 Sep 2020 23:10:13 +0200 Subject: carousel image sizing --- .../player/components.media/media.carousel.js | 47 +++++++++++++++------- .../views/viewer/player/components.media/media.css | 25 +++++++++++- .../frontend/app/views/viewer/viewer.actions.js | 7 +++- 3 files changed, 62 insertions(+), 17 deletions(-) (limited to 'animism-align/frontend/app') 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 3759c30..991fc88 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 @@ -3,6 +3,8 @@ import { connect } from 'react-redux' import { useKeenSlider } from "app/utils/vendor/keen-slider/react" import "keen-slider/keen-slider.min.css" +import actions from 'app/actions' +import { SpeakerIcon } from 'app/views/viewer/nav/viewer.icons' import { MediaCitation } from './media.citation' import { Arrow } from 'app/views/viewer/nav/viewer.icons' @@ -13,7 +15,7 @@ const SLIDES_PER_VIEW = 2 let slideChangedHook = slider => console.log(slider) let slideChanged = slider => slideChangedHook(slider) -const CarouselContainer = ({ element, play_ts, media }) => { +const CarouselContainer = ({ element, media, play_ts }) => { const { image_order, caption_lookup } = media.settings const [currentSlide, setCurrentSlide] = React.useState(0) @@ -33,10 +35,7 @@ const CarouselContainer = ({ element, play_ts, media }) => { // step thru this carousel's timeline, which is ordered in reverse BTW element.timeline.some(cue => { if (cue.start_ts < play_ts && (play_ts - cue.start_ts) < 0.5) { - let slide_index = parseInt(cue.settings.frame_index) - if (cue.settings.half_frame) { - slide_index += 0.5 - } + let slide_index = cue.settings.seek_index if (currentSlide < slide_index) { setCurrentSlide(slide_index) slider.moveToSlideRelative(slide_index) @@ -46,7 +45,7 @@ const CarouselContainer = ({ element, play_ts, media }) => { return false }) - const currentCaption = caption_lookup[image_order[currentSlide]] + const currentCaption = caption_lookup[image_order[Math.round(currentSlide)]] return ( { sliderRef={sliderRef} currentSlide={currentSlide} currentCaption={currentCaption} + timelineLookup={element.timelineLookup} /> ) } -const CarouselComponent = ({ media, slider, sliderRef, currentSlide, currentCaption }) => { +const CarouselComponent = ({ media, slider, sliderRef, currentSlide, currentCaption, timelineLookup }) => { const { image_order, display_lookup } = media.settings - return [
{image_order.map((id, idx) => { const image = display_lookup[id] // console.log(image) return ( - + ) })}
, - , + , { ) } -const CarouselItem = ({ image }) => { +const CarouselItem = ({ image, slider, seekAnnotation }) => { return ( -
+
+
+ + {seekAnnotation && ( +
{ + slider.moveToSlideRelative(seekAnnotation.settings.seek_index) + actions.viewer.seekToTimestamp(seekAnnotation.start_ts) + }} + > + {SpeakerIcon} +
+ )} +
+
) } diff --git a/animism-align/frontend/app/views/viewer/player/components.media/media.css b/animism-align/frontend/app/views/viewer/player/components.media/media.css index a119dfb..cb15150 100644 --- a/animism-align/frontend/app/views/viewer/player/components.media/media.css +++ b/animism-align/frontend/app/views/viewer/player/components.media/media.css @@ -104,9 +104,32 @@ height: calc(100vh - 9rem); } .carousel-item { + display: flex; + align-items: center; + justify-content: center; +} +.carousel-item .image-container { + position: relative; + display: inline-block; + max-width: 100%; + max-height: calc(100vh - 10rem); background-size: contain; - background-position: center center; background-repeat: no-repeat; + background-position: center center; +} +.carousel-item img { + width: auto; + height: auto; + max-width: 100%; + max-height: calc(100vh - 10rem); + opacity: 0; + pointer-events: none; + /*object-fit: contain;*/ +} +.carousel-item .speaker-icon { + bottom: 0; + right: 0; + opacity: 1; } .player-transcript .carousel-item { height: 100%; diff --git a/animism-align/frontend/app/views/viewer/viewer.actions.js b/animism-align/frontend/app/views/viewer/viewer.actions.js index 21a8098..fdd47a9 100644 --- a/animism-align/frontend/app/views/viewer/viewer.actions.js +++ b/animism-align/frontend/app/views/viewer/viewer.actions.js @@ -114,8 +114,10 @@ export const loadSections = () => dispatch => { // 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 = [] + 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 } // build timeline of special inline items @@ -172,7 +174,6 @@ export const loadSections = () => dispatch => { } }) // - console.log(initial_curtain_event) currentSection.fullscreenTimeline.push(initial_curtain_event) } currentSection.duration = currentSection.end_ts - currentSection.start_ts @@ -191,6 +192,8 @@ const makeFullscreenEvent = (index, annotation) => { index, settings: annotation.settings, type: annotation.type, + timeline: [], + timelineLookup: {}, } if (annotation.settings.color) { event.color = CURTAIN_COLOR_LOOKUP[annotation.settings.color] || CURTAIN_COLOR_LOOKUP.white -- cgit v1.2.3-70-g09d2