From c63920b43f8adcc27e102b5eefc28e1515f2360f Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Mon, 9 Nov 2020 15:05:53 +0100
Subject: moving carousel arrows and making them larger

---
 .../player/components.media/media.carousel.js      | 141 +++++++++++----------
 1 file changed, 72 insertions(+), 69 deletions(-)

(limited to 'animism-align/frontend/app/views/viewer/player/components.media/media.carousel.js')

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 40ea3dc..60907e5 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
@@ -64,82 +64,85 @@ const CarouselContainer = ({ element, media, play_ts, withMouseWheel }) => {
 
 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}
-            slider={slider}
-            seekAnnotation={timelineLookup && timelineLookup[idx]}
-          />
-        )
-      })}
-    </div>,
-    <MediaCitation key={'caption_' + media.id} media={(currentCaption && currentCaption.caption) ? currentCaption : media} />,
-    <CarouselNav
-      key={'arrows_' + media.id}
-      currentSlide={currentSlide}
-      slides={image_order}
-      onPrev={() => {
-        slider.prev()
-      }}
-      onNext={() => {
-        slider.next()
-      }}
-      onPick={index => {
-        slider.moveToSlideRelative(index)
-      }}
-    />
-  ]
-}
-
-const Carousel = React.memo(CarouselComponent)
-
-const CarouselNav = ({ currentSlide, slides, onPrev, onNext, onPick }) => {
   return (
-    <div className="carousel-nav">
-      <div
-        className={currentSlide ? "arrow-prev" : "arrow-prev arrow-disabled"}
-        onClick={e => {
-          e.stopPropagation()
-          onPrev()
-        }}
-      >
-        <Arrow type="left" />
-      </div>
-      <div
-        className={currentSlide < slides.length - 1 ? "arrow-next" : "arrow-next arrow-disabled"}
-        onClick={e => {
-          e.stopPropagation()
-          onNext()
-        }}
-      >
-        <Arrow type="right" />
+    <div className="carousel-component">
+      <div className="carousel-positioning">
+        <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}
+                slider={slider}
+                seekAnnotation={timelineLookup && timelineLookup[idx]}
+              />
+            )
+          })}
+        </div>
+        <CarouselArrow
+          type="prev"
+          disabled={!!currentSlide}
+          onClick={() => {
+            slider.prev()
+          }}
+        />
+        <CarouselArrow
+          type="next"
+          disabled={currentSlide < image_order.length - 1}
+          onClick={() => {
+            slider.next()
+          }}
+        />
       </div>
-      <div className="dots">
-        {[...slides.keys()].map(idx => {
-          return (
-            <div
-              key={idx}
-              onClick={() => {
-                onPick(idx)
-              }}
-              className={"dot-item" + (Math.round(currentSlide) === idx ? " active" : "")}
-            >
-              <div className="dot-circle" />
-            </div>
-          )
-        })}
+      <MediaCitation key={'caption_' + media.id} media={(currentCaption && currentCaption.caption) ? currentCaption : media} />
+      <div className="carousel-nav" key={'arrows_' + media.id}>
+        <CarouselDots
+          currentSlide={currentSlide}
+          slides={image_order}
+          onPick={index => {
+            slider.moveToSlideRelative(index)
+          }}
+        />
       </div>
     </div>
-
   )
 }
 
+const Carousel = React.memo(CarouselComponent)
+
+const CarouselArrow = ({ disabled, type, onClick }) => ((
+  <div
+    className={(disabled ? "nav-arrow" : "nav-arrow arrow-disabled") + " " + type}
+    tabIndex={0}
+    onClick={e => {
+      e.stopPropagation()
+      onClick()
+    }}
+  >
+    <Arrow type={type === 'prev' ? 'left' : 'right'} />
+  </div>
+))
+const CarouselDots = ({ slides, currentSlide, onPick }) => ((
+  <div className="dots">
+    {[...slides.keys()].map(idx => {
+      return (
+        <div
+          key={idx}
+          onClick={() => {
+            onPick(idx)
+          }}
+          tabIndex={idx}
+          className={"dot-item" + (Math.round(currentSlide) === idx ? " active" : "")}
+        >
+          <div className="dot-circle" />
+        </div>
+      )
+    })}
+  </div>
+))
+
 const CarouselItem = ({ image, slider, seekAnnotation }) => {
   return (
     <div className='keen-slider__slide carousel-item'>
-- 
cgit v1.2.3-70-g09d2