moving carousel arrows and making them larger

4 files changed, 131 insertions, 87 deletions

diff --git a/animism-align/frontend/app/views/media/components/media.formVideo.js b/animism-align/frontend/app/views/media/components/media.formVideo.js
index 493a10c..d85fc4d 100644
--- a/animism-align/frontend/app/views/media/components/media.formVideo.js
+++ b/animism-align/frontend/app/views/media/components/media.formVideo.js
@@ -82,7 +82,7 @@ export default class MediaVideoForm extends Component {
           autoComplete="off"
         />
 
-        {data.url &&
+        {data.url && (
           <div>
             <LabelDescription className='video'>
               <VimeoPlayer video={data.url} />
@@ -102,8 +102,16 @@ export default class MediaVideoForm extends Component {
               onChange={this.handleUpload}
             />
 
+            <TextArea
+              title="Subtitles"
+              name="subtitles"
+              required
+              data={data}
+              onChange={this.handleChange}
+              autoComplete="off"
+            />
           </div>
-        }
+        )}
       </div>
     )
   }
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'>
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 5f4b84f..fea25ec 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
@@ -33,30 +33,50 @@
 
 /* arrows and dots */
 
-.carousel-nav .arrow-prev {
-  position: absolute;
-  left: 1rem;
-  top: 50%;
-  margin-top: -3.5rem;
-  transform: translateY(-50%);
-  cursor: pointer;
+.carousel-positioning {
+  position: relative;
 }
-.carousel-nav .arrow-next {
+.carousel-component .nav-arrow {
   position: absolute;
-  right: 1rem;
-  top: 50%;
-  margin-top: -3.5rem;
-  transform: translateY(-50%);
+  top: 0;
+  height: 100%;
+  max-height: calc(100vh - 19rem);
+  width: 8rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   cursor: pointer;
+  transition: background 0.2s, backdrop-filter 0.2s;
 }
-.carousel-nav .arrow {
+.viewer-fullscreen .carousel-component .nav-arrow {
+  max-height: calc(100vh - 19rem);
+}
+.carousel-component .nav-arrow.prev {
+  left: 0;
+}
+.carousel-component .nav-arrow.next {
+  right: 0;
+}
+.carousel-component .nav-arrow:focus {
+  background: transparent;
+  outline: 0;
+}
+.carousel-component .nav-arrow:hover {
+  backdrop-filter: contrast(344%) grayscale(100%);
+  background: rgba(255,255,255,0.9)
+}
+/*.white .carousel-component .nav-arrow { background: rgba(255,255,255,0.0); }
+.white .carousel-component .nav-arrow:hover { background: rgba(255,255,255,0.0); }
+*/.black .carousel-component .nav-arrow { background: rgba(0,0,0,0.0); }
+.black .carousel-component .nav-arrow:hover { background: rgba(0,0,0,0.0); }
+.carousel-component .arrow {
    width: 4rem;
 }
-.carousel-nav .arrow-disabled {
+.carousel-component .arrow-disabled {
   cursor: default;
   opacity: 0.2;
 }
-.carousel-nav .dots {
+.carousel-component .dots {
   position: absolute;
   bottom: 6rem;
   left: 0;
@@ -94,6 +114,9 @@
 
 /* carousel */
 
+.inline-element:nth-child(2) .carousel-container {
+  padding-top: 0rem;
+}
 .inline-element .carousel-container {
   padding-top: 1.5rem;
   margin-bottom: 1.5rem;
@@ -155,7 +178,7 @@
   height: 9rem;
   padding-top: 4rem;
 }
-.player-transcript .carousel-nav .dots {
+.player-transcript .carousel-component .dots {
   bottom: 5rem;
 }
 
diff --git a/animism-align/frontend/app/views/viewer/player/player.transcript.css b/animism-align/frontend/app/views/viewer/player/player.transcript.css
index 15a02b6..24b677b 100644
--- a/animism-align/frontend/app/views/viewer/player/player.transcript.css
+++ b/animism-align/frontend/app/views/viewer/player/player.transcript.css
@@ -134,6 +134,16 @@
   color: #000;
   transition: all 0.1s;
 }
+.player-transcript .pullquote .current {
+  box-shadow: -3px -2px 0 #e8e8e8,
+               3px -2px 0 #e8e8e8,
+              -3px  2px 0 #e8e8e8,
+               3px  2px 0 #e8e8e8;
+  box-decoration-break: clone;
+  background: #e8e8e8;
+  color: #000;
+  transition: all 0.1s;
+}
 
 .player-transcript .paragraph {
   position: relative;