From 0e45ce2ea046068de8d792e653497dae5433ae77 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
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 +++++++++++-
 2 files changed, 57 insertions(+), 15 deletions(-)

(limited to 'animism-align/frontend/app/views/viewer/player')

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%;
-- 
cgit v1.2.3-70-g09d2