1 files changed, 74 insertions, 6 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 914a8d9..edaa209 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
@@ -2,20 +2,32 @@ import React, { Component } from 'react'
 import { useKeenSlider } from "keen-slider/react"
 import "keen-slider/keen-slider.min.css"
 
+import { MediaCitation } from './media.citation'
+import { Arrow } from 'app/views/viewer/nav/viewer.icons'
+
 export const Carousel = ({ media }) => {
-  const { image_order, image_lookup, display_lookup, thumbnail_lookup } = media.settings
+  const { image_order, image_lookup, display_lookup, thumbnail_lookup, caption_lookup } = media.settings
 
-  const [sliderRef] = useKeenSlider({
+  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,
     centered: true,
-    loop: false
-  });
+    loop: false,
+    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 ref={sliderRef} className='keen-slider carousel-items'>
+  return [
+    <div key={'carousel_' + media.id} ref={sliderRef} className='keen-slider carousel-items'>
       {image_order.map(id => {
         const image = display_lookup[id]
         // console.log(image)
@@ -23,7 +35,63 @@ export const Carousel = ({ media }) => {
           <CarouselItem key={id} image={image} />
         )
       })}
+    </div>,
+    <MediaCitation key={'caption_' + media.id} media={currentCaption} />,
+    <CarouselNav
+      key={'arrows_' + media.id}
+      currentSlide={currentSlide}
+      slides={image_order}
+      onPrev={() => {
+        slider.prev()
+      }}
+      onNext={() => {
+        slider.next()
+      }}
+      onPick={index => {
+        slider.moveToSlideRelative(index)
+      }}
+    />
+  ]
+}
+
+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>
+      <div className="dots">
+        {[...slides.keys()].map(idx => {
+          return (
+            <div
+              key={idx}
+              onClick={() => {
+                onPick(idx)
+              }}
+              className={"dot-item" + (currentSlide === idx ? " active" : "")}
+            >
+              <div className="dot-circle" />
+            </div>
+          )
+        })}
+      </div>
     </div>
+
   )
 }