fullscreen background colors... update ui with section name

11 files changed, 47 insertions, 31 deletions

diff --git a/animism-align/frontend/app/common/app.css b/animism-align/frontend/app/common/app.css
index 362b933..e9efdc3 100644
--- a/animism-align/frontend/app/common/app.css
+++ b/animism-align/frontend/app/common/app.css
@@ -114,9 +114,6 @@ p {
 
 /* links */
 
-b {
-  color: #fff;
-}
 a {
   text-decoration: underline;
   color: #8df;
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.image.js b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.image.js
index 0a6cc17..9ca5295 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.image.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.image.js
@@ -39,6 +39,7 @@ export const AnnotationFormImage = ({ annotation, media, handleSettingsSelect, h
         <AnnotationFormFullscreen
           annotation={annotation}
           handleSettingsChange={handleSettingsChange}
+          handleSettingsSelect={handleSettingsSelect}
         />
       )}
     </div>
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.utility.js b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.utility.js
index a926741..6c835c5 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.utility.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.utility.js
@@ -8,15 +8,6 @@ import { annotationFadeTimings } from 'app/utils/annotation.utils'
 export const AnnotationFormCurtain = ({ annotation, handleSettingsChange, handleSettingsSelect }) => {
   return (
     <div className='options'>
-      <Select
-        title='Color'
-        name='color'
-        selected={annotation.settings.color}
-        options={CURTAIN_COLOR_SELECT_OPTIONS}
-        defaultOption='Pick a color'
-        onChange={handleSettingsSelect}
-      />
-
       <TextInput
         title="Curtain text"
         name="curtain_text"
@@ -30,18 +21,28 @@ export const AnnotationFormCurtain = ({ annotation, handleSettingsChange, handle
         alwaysAccessible
         annotation={annotation}
         handleSettingsChange={handleSettingsChange}
+        handleSettingsSelect={handleSettingsSelect}
       />
     </div>
   )
 }
 
-export const AnnotationFormFullscreen = ({ annotation, handleSettingsChange }) => {
+export const AnnotationFormFullscreen = ({ annotation, handleSettingsChange, handleSettingsSelect }) => {
   const {
     fadeInDuration, fadeOutDuration, duration,
     start_ts, end_ts, fade_in_end_ts, fade_out_start_ts,
   } = annotationFadeTimings(annotation)
   return (
     <div>
+      <Select
+        title='Color'
+        name='color'
+        selected={annotation.settings.color}
+        options={CURTAIN_COLOR_SELECT_OPTIONS}
+        defaultOption='Pick a color'
+        onChange={handleSettingsSelect}
+      />
+
       <TextInput
         title="Total duration"
         name="duration"
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.video.js b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.video.js
index 5b4e199..50ca033 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.video.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.video.js
@@ -39,6 +39,7 @@ export const AnnotationFormVideo = ({ annotation, media, handleSettingsSelect, h
         <AnnotationFormFullscreen
           annotation={annotation}
           handleSettingsChange={handleSettingsChange}
+          handleSettingsSelect={handleSettingsSelect}
         />
       )}
     </div>
diff --git a/animism-align/frontend/app/views/media/components/media.indexOptions.js b/animism-align/frontend/app/views/media/components/media.indexOptions.js
index 09a0f74..d8187c9 100644
--- a/animism-align/frontend/app/views/media/components/media.indexOptions.js
+++ b/animism-align/frontend/app/views/media/components/media.indexOptions.js
@@ -44,12 +44,6 @@ class IndexOptions extends Component {
           selected={options.sort}
           onChange={actions.upload.updateOption}
         />
-        <Select
-          name={'thumbnailSize'}
-          options={thumbnailOptions}
-          selected={options.thumbnailSize}
-          onChange={actions.upload.updateOption}
-        />
       </div>
     )
   }
diff --git a/animism-align/frontend/app/views/media/media.css b/animism-align/frontend/app/views/media/media.css
index a2d95c8..81eae26 100644
--- a/animism-align/frontend/app/views/media/media.css
+++ b/animism-align/frontend/app/views/media/media.css
@@ -58,7 +58,6 @@
 .imageSelection img {
   display: block;
   max-width: 100%;
-  max-height: 20rem;
 }
 .imageSelection img.loading {
   opacity: 0.5;
diff --git a/animism-align/frontend/app/views/viewer/nav/nav.parent.js b/animism-align/frontend/app/views/viewer/nav/nav.parent.js
index fb505c2..5697d88 100644
--- a/animism-align/frontend/app/views/viewer/nav/nav.parent.js
+++ b/animism-align/frontend/app/views/viewer/nav/nav.parent.js
@@ -15,11 +15,13 @@ class NavParent extends Component {
           <div className='nav-section-name'>
             <span className="section-link link" onClick={() => actions.viewer.toggleComponent('nav')}>
               <Arrow type={viewer.nav ? 'down' : 'up'} />
-              <span>
-                {ROMAN_NUMERALS[0]}
-                {'. '}
-                {'Introduction'}
-              </span>
+              {viewer.currentSection && 
+                <span>
+                  {ROMAN_NUMERALS[viewer.currentSection.index]}
+                  {'. '}
+                  {viewer.currentSection.title}
+                </span>
+              }
             </span>
           </div>
           <NavPlayer />
diff --git a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.image.js b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.image.js
index 6ca6d79..15525f4 100644
--- a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.image.js
+++ b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.image.js
@@ -1,16 +1,21 @@
 import React from 'react'
 
 export const FullscreenImage = ({ element, media, transitionDuration }) => {
+  const { color } = element
   const item = media.lookup[element.settings.media_id]
   const style = {
+    backgroundColor: color.backgroundColor,
+    color: color.textColor,
     transitionDuration,
-    backgroundImage: 'url(' + item.settings.display.url + ')',
   }
   return (
     <div
       className='fullscreen-element image'
       style={style}
     >
+      <div style={{
+        backgroundImage: 'url(' + item.settings.display.url + ')',
+      }} />
     </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 9122426..6ca7ec8 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,17 +2,27 @@ import React from 'react'
 import VimeoPlayer from '@u-wave/react-vimeo'
 
 export const FullscreenVideo = ({ element, media, transitionDuration }) => {
+  const { color } = element
   const item = media.lookup[element.settings.media_id]
   const style = {
+    backgroundColor: color.backgroundColor,
+    color: color.textColor,
     transitionDuration,
-    backgroundImage: 'url(' + item.settings.display.url + ')',
   }
+  console.log(item, window.innerWidth, window.innerHeight)
   return (
     <div
       className='fullscreen-element video'
       style={style}
     >
-      <VimeoPlayer video={data.url} autoplay muted />
+      <VimeoPlayer
+        video={item.url}
+        autoplay muted
+        controls={false}
+        byline={false}
+        width={window.innerWidth}
+        height={window.innerHeight}
+      />
     </div>
   )
 }
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 fb4d8af..8d38fa0 100644
--- a/animism-align/frontend/app/views/viewer/player/player.fullscreen.css
+++ b/animism-align/frontend/app/views/viewer/player/player.fullscreen.css
@@ -38,12 +38,18 @@
   height: 100%;
   top: 0;
   left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .viewer-fullscreen .curtain {
 }
 
-.viewer-fullscreen .image {
-  background-size: cover;
+.viewer-fullscreen .image div {
+  width: 90%;
+  height: 90%;
+  background-size: contain;
+  background-repeat: no-repeat;
   background-position: center center;
 }
diff --git a/animism-align/frontend/app/views/viewer/viewer.actions.js b/animism-align/frontend/app/views/viewer/viewer.actions.js
index a456646..679cafc 100644
--- a/animism-align/frontend/app/views/viewer/viewer.actions.js
+++ b/animism-align/frontend/app/views/viewer/viewer.actions.js
@@ -137,7 +137,7 @@ const makeFullscreenEvent = (index, annotation) => {
     settings: annotation.settings,
     type: annotation.type,
   }
-  if (event.type === 'curtain') {
+  if (annotation.settings.color) {
     event.color = CURTAIN_COLOR_LOOKUP[annotation.settings.color] || CURTAIN_COLOR_LOOKUP.white
   }
   return event