From d919bdd91a540050e792a11e9837223388fd6aa7 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Tue, 8 Sep 2020 18:15:53 +0200
Subject: forking keen-slider... adding scroll

---
 .../viewer/player/components.media/media.carousel.js | 20 ++++++++++++--------
 .../views/viewer/player/components.media/media.css   | 10 ++++++----
 2 files changed, 18 insertions(+), 12 deletions(-)

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

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 bbfe520..46458b5 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,34 +1,38 @@
 import React, { Component } from 'react'
-import { useKeenSlider } from "keen-slider/react"
+import { useKeenSlider } from "app/utils/vendor/keen-slider/react"
 import "keen-slider/keen-slider.min.css"
 
 import { MediaCitation } from './media.citation'
 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
 
+  // 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: 2,
-    mode: "free-snap",
-    spacing: 15,
+    slidesPerView: SLIDES_PER_VIEW,
+    mode: "free",
+    spacing: SPACING,
     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)
-    }
+    },
   })
-  // console.log(display_lookup)
-  // console.log(width)
+
   return [
     <div key={'carousel_' + media.id} ref={sliderRef} className='keen-slider carousel-items'>
-      {image_order.map(id => {
+      {image_order.map((id, idx) => {
         const image = display_lookup[id]
         // console.log(image)
         return (
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 86c50a9..74e3d6b 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
@@ -99,18 +99,20 @@
   margin-bottom: 1.5rem;
   padding: 1rem;
 }
+.carousel-items {
+  width: 100%;
+  height: calc(100vh - 9rem);
+}
 .carousel-item {
   background-size: contain;
   background-position: center center;
   background-repeat: no-repeat;
 }
 .player-transcript .carousel-item {
-  width: 50vw;
-  height: calc(100vh - 9rem);
+  height: 100%;
 }
 .viewer-fullscreen .carousel-item {
-  width: 50vw;
-  height: calc(100vh - 9rem);
+  height: 100%;
 }
 
 /* gallery */
-- 
cgit v1.2.3-70-g09d2