carousel image sizing

3 files changed, 62 insertions, 17 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 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 (
     <Carousel
@@ -55,24 +54,29 @@ const CarouselContainer = ({ element, play_ts, media }) => {
       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 [
     <div key={'carousel_' + media.id} ref={sliderRef} className='keen-slider carousel-items'>
       {image_order.map((id, idx) => {
         const image = display_lookup[id]
         // console.log(image)
         return (
-          <CarouselItem key={id} image={image} />
+          <CarouselItem
+            key={id}
+            image={image}
+            slider={slider}
+            seekAnnotation={timelineLookup[idx]}
+          />
         )
       })}
     </div>,
-    <MediaCitation key={'caption_' + media.id} media={(currentCaption && currentCaption.short_caption) ? currentCaption : media} />,
+    <MediaCitation key={'caption_' + media.id} media={(currentCaption && currentCaption.caption) ? currentCaption : media} />,
     <CarouselNav
       key={'arrows_' + media.id}
       currentSlide={currentSlide}
@@ -133,11 +137,26 @@ const CarouselNav = ({ currentSlide, slides, onPrev, onNext, onPick }) => {
   )
 }
 
-const CarouselItem = ({ image }) => {
+const CarouselItem = ({ image, slider, seekAnnotation }) => {
   return (
-    <div className='keen-slider__slide carousel-item' style={{
-      backgroundImage: 'url(' + image.url + ')',
-    }} />
+    <div className='keen-slider__slide carousel-item'>
+      <div className="image-container" style={{ backgroundImage: 'url(' + image.url + ')' }}>
+        <img
+          src={image.url}
+        />
+        {seekAnnotation && (
+          <div
+            className="speaker-icon"
+            onClick={() => {
+              slider.moveToSlideRelative(seekAnnotation.settings.seek_index)
+              actions.viewer.seekToTimestamp(seekAnnotation.start_ts)
+            }}
+          >
+            {SpeakerIcon}
+          </div>
+        )}
+      </div>
+    </div>
   )
 }
 
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