From 9a27f55d7766629d71c2d93bb63609f6e890ae8b Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Tue, 8 Sep 2020 17:16:38 +0200
Subject: fullscreen carousel stuff

---
 .../viewer/player/components.fullscreen/fullscreen.gallery.js |  4 ++--
 .../views/viewer/player/components.media/media.carousel.js    |  2 +-
 .../app/views/viewer/player/components.media/media.css        | 11 +++++++++--
 .../frontend/app/views/viewer/player/player.fullscreen.css    |  7 +++++++
 4 files changed, 19 insertions(+), 5 deletions(-)

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

diff --git a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.gallery.js b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.gallery.js
index 9cd2787..5490b35 100644
--- a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.gallery.js
+++ b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.gallery.js
@@ -41,8 +41,8 @@ export const FullscreenGallery = ({ element, media, transitionDuration }) => {
 }
 
 export const FullscreenCarousel = ({ element, media, transitionDuration }) => {
-  const { color } = element
   const item = media.lookup[element.settings.media_id]
+  const color = element.color || CURTAIN_COLOR_LOOKUP.white
   const style = {
     backgroundColor: color.backgroundColor,
     color: color.textColor,
@@ -50,7 +50,7 @@ export const FullscreenCarousel = ({ element, media, transitionDuration }) => {
   }
   return (
     <div
-      className='fullscreen-element carousel'
+      className={'fullscreen-element carousel ' + color.label}
       style={style}
     >
       {element.settings.title && <div className='heading'>{element.settings.title}</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 edaa209..bbfe520 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
@@ -36,7 +36,7 @@ export const Carousel = ({ media }) => {
         )
       })}
     </div>,
-    <MediaCitation key={'caption_' + media.id} media={currentCaption} />,
+    <MediaCitation key={'caption_' + media.id} media={(currentCaption && currentCaption.title) ? currentCaption : media} />,
     <CarouselNav
       key={'arrows_' + media.id}
       currentSlide={currentSlide}
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 f552eba..86c50a9 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
@@ -23,6 +23,7 @@
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
+  padding-top: 1rem;
 }
 .viewer-fullscreen .fullscreen-element.gallery .citation,
 .viewer-fullscreen .fullscreen-element.carousel .citation,
@@ -57,7 +58,7 @@
 }
 .carousel-nav .dots {
   position: absolute;
-  bottom: 5.5rem;
+  bottom: 6rem;
   left: 0;
   width: 100%;
   display: flex;
@@ -84,6 +85,12 @@
 .dots .dot-item.active {
   opacity: 1.0;
 }
+.carousel.black .dots .dot-circle {
+  background: #fff;
+}
+.carousel.black svg polygon {
+  fill: #fff;
+}
 
 /* carousel */
 
@@ -103,7 +110,7 @@
 }
 .viewer-fullscreen .carousel-item {
   width: 50vw;
-  height: calc(100vh - 8rem);
+  height: calc(100vh - 9rem);
 }
 
 /* gallery */
diff --git a/animism-align/frontend/app/views/viewer/player/player.fullscreen.css b/animism-align/frontend/app/views/viewer/player/player.fullscreen.css
index 8d38fa0..263083b 100644
--- a/animism-align/frontend/app/views/viewer/player/player.fullscreen.css
+++ b/animism-align/frontend/app/views/viewer/player/player.fullscreen.css
@@ -53,3 +53,10 @@
   background-repeat: no-repeat;
   background-position: center center;
 }
+.viewer-fullscreen .video {
+  pointer-events: none;
+}
+
+iframe {
+  pointer-events: none;
+}
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2