passing item state down into carousel component

5 files changed, 13 insertions, 23 deletions

diff --git a/animism-align/frontend/app/utils/vendor/keen-slider/react.js b/animism-align/frontend/app/utils/vendor/keen-slider/react.js
index 9da1b22..a810d73 100644
--- a/animism-align/frontend/app/utils/vendor/keen-slider/react.js
+++ b/animism-align/frontend/app/utils/vendor/keen-slider/react.js
@@ -33,7 +33,7 @@ export function useKeenSlider(options = {}) {
  * @param  {Object|Array}  other  The second object or array to compare
  * @return {Boolean}              Returns true if they're equal
  */
-var isEqual = function (value, other) {
+export const isEqual = function (value, other) {
   // Get the value type
   var type = Object.prototype.toString.call(value)
 
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 5490b35..7ba63f4 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
@@ -54,7 +54,7 @@ export const FullscreenCarousel = ({ element, media, transitionDuration }) => {
       style={style}
     >
       {element.settings.title && <div className='heading'>{element.settings.title}</div>}
-      <Carousel media={item} withCitation />
+      <Carousel element={element} media={item} withCitation />
     </div>
   )
 }
diff --git a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.video.js b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.video.js
index 14aafe9..e9586b6 100644
--- a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.video.js
+++ b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.video.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import VimeoPlayer from 'app/utils/vendor/vimeo'
 
+import actions from 'app/actions'
 import { PlayButton, PlayerTime, VolumeControl } from 'app/views/viewer/nav/viewer.icons'
 
 class FullscreenVideo extends Component {
@@ -70,14 +71,9 @@ class FullscreenVideo extends Component {
           />
         </div>
         <div className='video-nav'>
-          <div className='video-title'>
+          <div className='video-title' onClick={() => actions.viewer.toggleComponent('nav')}>
             {item.title}
           </div>
-          <div className='video-playback'>
-            <PlayButton playing={playing} />
-            <PlayerTime play_ts={seconds} duration={duration} />
-            <VolumeControl volume={volume} />
-          </div>
         </div>
       </div>
     )
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 0c026c9..a119dfb 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
@@ -114,6 +114,9 @@
 .viewer-fullscreen .carousel-item {
   height: 100%;
 }
+.viewer-fullscreen .carousel .citation {
+  height: 5rem;
+}
 
 /* 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 61f5122..36e4a76 100644
--- a/animism-align/frontend/app/views/viewer/player/player.fullscreen.css
+++ b/animism-align/frontend/app/views/viewer/player/player.fullscreen.css
@@ -82,7 +82,7 @@ iframe {
   position: absolute;
   bottom: 0;
   left: 0;
-  width: 66.6%;
+  width: 33.3%;
   height: 3rem;
   font-size: 18px;
   color: white;
@@ -96,20 +96,11 @@ iframe {
   display: flex;
   justify-content: flex-start;
   align-items: center;
-  width: 50%;
+  width: 100%;
   background: black;
   padding-left: 1rem;
-}
-.fullscreen-element.video .video-nav .video-playback {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  width: 50%;
-  background: black;
-}
-.fullscreen-element.video .video-nav .video-next {
-  width: 33%;
-  pointer-events: none;
-  background: transparent;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  cursor: pointer;
 }