color background on vitrine modal if it is set

7 files changed, 33 insertions, 14 deletions

diff --git a/animism-align/frontend/app/views/viewer/modals/modals.css b/animism-align/frontend/app/views/viewer/modals/modals.css
index c3ec675..c541962 100644
--- a/animism-align/frontend/app/views/viewer/modals/modals.css
+++ b/animism-align/frontend/app/views/viewer/modals/modals.css
@@ -132,3 +132,12 @@
   height: 100%;
 }
 
+.vitrine-nav.black {
+  color: #fff;
+}
+.vitrine-nav.black .arrow svg polygon {
+  fill: #fff;
+}
+.vitrine-nav .vitrine-nav-thumbnail.black {
+  background-color: #000;
+}
diff --git a/animism-align/frontend/app/views/viewer/modals/modals.vitrine.js b/animism-align/frontend/app/views/viewer/modals/modals.vitrine.js
index febd3eb..7cea428 100644
--- a/animism-align/frontend/app/views/viewer/modals/modals.vitrine.js
+++ b/animism-align/frontend/app/views/viewer/modals/modals.vitrine.js
@@ -5,15 +5,17 @@ import actions from 'app/actions'
 
 import { EfluxClose } from '../nav/eflux.icons'
 import { Arrow } from '../nav/viewer.icons'
+import { CURTAIN_COLOR_LOOKUP } from 'app/constants'
 
 class VitrineModal extends Component {
   render() {
-    const { open, media, index } = this.props.vitrineModal
+    const { open, media, color, index } = this.props.vitrineModal
     if (!media) {
       return (
         <div className='vitrine-modal'></div>
       )
     }
+    console.log(color)
     const className = open ? 'vitrine-modal open' : 'vitrine-modal'
     const id = media.settings.image_order[index]
     const image = media.settings.display_lookup[id] || media.settings.image_lookup[id]
@@ -23,6 +25,7 @@ class VitrineModal extends Component {
         <div className='vitrine-modal-content'>
           <div className='vitrine-image' style={{
             backgroundImage: 'url(' + image.url + ')',
+            backgroundColor: color.backgroundColor,
           }} />
           <div className='vitrine-text'>
             <div>
@@ -36,17 +39,17 @@ class VitrineModal extends Component {
         <div className='vitrine-close' onClick={() => actions.viewer.closeVitrineModal()}>
           {EfluxClose}
         </div>
-        <VitrineNavigation media={media} index={index} direction={-1} />
-        <VitrineNavigation media={media} index={index} direction={+1} />
+        <VitrineNavigation media={media} index={index} color={color} direction={-1} />
+        <VitrineNavigation media={media} index={index} color={CURTAIN_COLOR_LOOKUP.white} direction={+1} />
       </div>
     )
   }
 }
 
-const VitrineNavigation = ({ media, index, direction }) => {
+const VitrineNavigation = ({ media, color, index, direction }) => {
   let id, thumbnail
   const isPrev = direction === -1
-  let className = isPrev ? 'vitrine-nav prev' : 'vitrine-nav next'
+  let className = (isPrev ? 'vitrine-nav prev ' : 'vitrine-nav next ') + color.label
   // const targetIndex = mod(index + direction, media.settings.image_order.length)
   const targetIndex = index + direction
   const shouldClose = (targetIndex < 0) || (targetIndex === media.settings.image_order.length)
@@ -65,7 +68,12 @@ const VitrineNavigation = ({ media, index, direction }) => {
         {shouldClose ? 'Close' : isPrev ? 'Previous' : 'Next'}
         {!isPrev && <Arrow type='right'/>}
       </div>
-      {!shouldClose && <div className='vitrine-nav-thumbnail' style={{ backgroundImage: 'url(' + thumbnail.url + ')' }} />}
+      {!shouldClose && (
+        <div
+          className={'vitrine-nav-thumbnail ' + color.label}
+          style={{ backgroundImage: 'url(' + thumbnail.url + ')' }}
+        />
+      )}
     </div>
   )
 }
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 933227b..530048d 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
@@ -17,7 +17,7 @@ export const FullscreenVitrine = ({ element, media, transitionDuration }) => {
       style={style}
     >
       {element.settings.title && <div className='heading'>{element.settings.title}</div>}
-      <Vitrine media={item} />
+      <Vitrine media={item} color={color} />
       <MediaCitation media={item} />
     </div>
   )
diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/inline.gallery.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.gallery.js
index 3ac8fc6..647b545 100644
--- a/animism-align/frontend/app/views/viewer/player/components.inline/inline.gallery.js
+++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.gallery.js
@@ -17,7 +17,7 @@ export const InlineVitrine = ({ paragraph, media, onAnnotationClick }) => {
       style={style}
     >
       {annotation.settings.title && <div className='heading'>{annotation.settings.title}</div>}
-      <Vitrine media={item} />
+      <Vitrine media={item} color={color} />
     </div>
   )
   // <MediaCitation media={item} />
diff --git a/animism-align/frontend/app/views/viewer/player/components.media/media.vitrine.js b/animism-align/frontend/app/views/viewer/player/components.media/media.vitrine.js
index ae0bfd7..1e5fca2 100644
--- a/animism-align/frontend/app/views/viewer/player/components.media/media.vitrine.js
+++ b/animism-align/frontend/app/views/viewer/player/components.media/media.vitrine.js
@@ -4,7 +4,7 @@ import { ZoomPlus } from '../../nav/viewer.icons.js'
 
 import actions from 'app/actions'
 
-export const Vitrine = ({ media }) => {
+export const Vitrine = ({ media, color }) => {
   const { image_order, image_lookup, thumbnail_lookup } = media.settings
   let width = (Math.floor(100 / image_order.length * 2))
   if (image_order.length % 2) {
@@ -23,6 +23,7 @@ export const Vitrine = ({ media }) => {
             id={id}
             image={thumbnail}
             width={displayWidth}
+            color={color}
           />
         )
       })}
@@ -30,9 +31,9 @@ export const Vitrine = ({ media }) => {
   )
 }
 
-const VitrineItem = ({ media, id, image, width }) => {
+const VitrineItem = ({ media, id, image, width, color }) => {
   return (
-    <div className='vitrine-item' style={{ width }} onClick={() => actions.viewer.openVitrineModal(media, id)}>
+    <div className='vitrine-item' style={{ width }} onClick={() => actions.viewer.openVitrineModal(media, color, id)}>
       <div className='vitrine-image'>
         <img src={image.url} />
       </div>
diff --git a/animism-align/frontend/app/views/viewer/viewer.actions.js b/animism-align/frontend/app/views/viewer/viewer.actions.js
index b4a374c..bdf5640 100644
--- a/animism-align/frontend/app/views/viewer/viewer.actions.js
+++ b/animism-align/frontend/app/views/viewer/viewer.actions.js
@@ -268,12 +268,12 @@ export const setSectionFromTimestamp = play_ts => dispatch => {
   }
 }
 
-export const openVitrineModal = (media, id) => dispatch => {
+export const openVitrineModal = (media, color, id) => dispatch => {
   console.log(media)
   const index = media.settings.image_order.indexOf(id)
-  dispatch({ type: types.viewer.open_vitrine_modal, media, index })
+  dispatch({ type: types.viewer.open_vitrine_modal, media, color, index })
 }
-export const closeVitrineModal = (media, id) => dispatch => {
+export const closeVitrineModal = () => dispatch => {
   dispatch({ type: types.viewer.close_vitrine_modal })
 }
 export const setVitrineIndex = (index) => dispatch => {
diff --git a/animism-align/frontend/app/views/viewer/viewer.reducer.js b/animism-align/frontend/app/views/viewer/viewer.reducer.js
index 17eb90e..e7b3eeb 100644
--- a/animism-align/frontend/app/views/viewer/viewer.reducer.js
+++ b/animism-align/frontend/app/views/viewer/viewer.reducer.js
@@ -84,6 +84,7 @@ export default function viewerReducer(state = initialState, action) {
           open: true,
           media: action.media,
           index: action.index,
+          color: action.color,
         }
       }