fixing heights of carousels. set media title from fullscreen video

10 files changed, 66 insertions, 34 deletions

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 8ba9c9b..b89a412 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
@@ -43,6 +43,12 @@ export const AnnotationFormVideo = ({ annotation, media, handleSettingsSelect, h
         onChange={handleSettingsSelect}
       />
       <Checkbox
+        label="Show poster image"
+        name="poster"
+        checked={annotation.settings.poster}
+        onChange={handleSettingsSelect}
+      />
+      <Checkbox
         label="Hide in transcript"
         name="hide_in_transcript"
         checked={annotation.settings.hide_in_transcript}
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 5ddc13d..fc72cf3 100644
--- a/animism-align/frontend/app/views/viewer/nav/nav.parent.js
+++ b/animism-align/frontend/app/views/viewer/nav/nav.parent.js
@@ -49,13 +49,15 @@ class NavParent extends Component {
           <div className='nav-section-name' onMouseEnter={this.handleMouseEnter}>
             <span className="section-link link" onClick={() => actions.viewer.toggleComponent('nav')}>
               <Arrow type={viewer.nav ? 'down' : 'up'} />
-              {viewer.currentSection && 
-                <span>
-                  {ROMAN_NUMERALS[viewer.currentSection.index]}
-                  {'. '}
-                  {viewer.currentSection.title}
-                </span>
-              }
+              {viewer.currentSection && (
+                viewer.mediaTitle
+                ? <span>{viewer.mediaTitle}</span>
+                : <span>
+                    {ROMAN_NUMERALS[viewer.currentSection.index]}
+                    {'. '}
+                    {viewer.currentSection.title}
+                  </span>
+              )}
             </span>
           </div>
           <div onMouseEnter={this.handleMouseEnter}>
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 d6f95ed..a196ee5 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
@@ -118,11 +118,6 @@ class FullscreenVideo extends Component {
             onMouseDown={this.handleScrubDotMouseDown}
           />
         </div>
-        <div className='video-nav'>
-          <div className='video-title' onClick={() => actions.viewer.toggleComponent('nav')}>
-            {item.title}
-          </div>
-        </div>
       </div>
     )
   }
diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/inline.text.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.text.js
index 18b026f..d978465 100644
--- a/animism-align/frontend/app/views/viewer/player/components.inline/inline.text.js
+++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.text.js
@@ -56,27 +56,24 @@ export const Pullquote = ({ paragraph, currentParagraph, currentAnnotation, onAn
   )
 }
 
-export const SectionHeading = ({ paragraph, currentParagraph, currentAnnotation, onAnnotationClick }) => {
+export const SectionHeading = ({ paragraph }) => {
   if (paragraph.hidden) return null
-  let className = currentParagraph ? 'section_heading current' : 'section_heading'
-  const text = paragraph.annotations.map(annotation => annotation.text).join(' ')
   return (
-    <div
-      className={className}
-    >
-      <span>{ROMAN_NUMERALS[paragraph.sectionIndex]}{'. '}{text}</span>
+    <div className='section_heading'>
+      <span>
+        {ROMAN_NUMERALS[paragraph.sectionIndex]}
+        {'. '}
+        {paragraph.annotations[0].text}
+      </span>
     </div>
   )
 }
 
-export const HeadingText = ({ paragraph, currentParagraph, currentAnnotation, onAnnotationClick }) => {
+export const HeadingText = ({ paragraph }) => {
   if (paragraph.hidden) return null
-  let className = currentParagraph ? 'section_heading current' : 'section_heading'
   const text = paragraph.annotations.map(annotation => annotation.text).join(' ')
   return (
-    <div
-      className={className}
-    >
+    <div className='section_heading'>
       <span>{text}</span>
     </div>
   )
diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js
index 050ade5..cf3043b 100644
--- a/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js
+++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js
@@ -20,6 +20,12 @@ export const MediaVideo = ({ paragraph, media, currentParagraph, onAnnotationCli
     height: height + 32,
     backgroundColor: color.backgroundColor,
   }
+  const poster = annotation.settings.poster ? {
+    backgroundImage: 'url(' + item.settings.video.thumbnail_url + ')',
+    backgroundSize: '50%',
+    backgroundPosition: 'center center',
+    backgroundRepeat: 'no-repeat',
+  } : {}
   // console.log(annotation.settings)
   return (
     <div
@@ -33,12 +39,7 @@ export const MediaVideo = ({ paragraph, media, currentParagraph, onAnnotationCli
           responsive={true}
           controls={false}
           byline={false}
-          style={{
-            backgroundImage: 'url(' + item.settings.video.thumbnail_url + ')',
-            backgroundSize: '50%',
-            backgroundPosition: 'center center',
-            backgroundRepeat: 'no-repeat',
-          }}
+          style={poster}
         />
       </div>
       <MediaCitation media={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 7bb3038..32d35d0 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
@@ -98,11 +98,18 @@
   margin-top: 0.5rem;
   margin-bottom: 1.5rem;
   /*padding: 1rem;*/
-  height: calc(100vh - 1rem);
   position: relative;
 }
 .carousel-items {
   width: 100%;
+}
+.player-transcript .carousel-items {
+  align-items: center;
+}
+.viewer-fullscreen .carousel-container {
+  height: calc(100vh - 1rem);
+}
+.viewer-fullscreen .carousel-items {
   height: calc(100vh - 9rem);
 }
 .carousel-item {
diff --git a/animism-align/frontend/app/views/viewer/player/player.fullscreen.js b/animism-align/frontend/app/views/viewer/player/player.fullscreen.js
index 23648b9..24fc52e 100644
--- a/animism-align/frontend/app/views/viewer/player/player.fullscreen.js
+++ b/animism-align/frontend/app/views/viewer/player/player.fullscreen.js
@@ -22,7 +22,7 @@ class PlayerFullscreen extends Component {
   }
 
   setCurrentElements() {
-    const { audio, timeline, currentSection } = this.props
+    const { audio, timeline, currentSection, media } = this.props
     const { play_ts } = audio
     const elements = timeline.filter(element => (
       floatInRange(element.start_ts, play_ts, element.fade_out_start_ts + 0.1)
@@ -35,8 +35,15 @@ class PlayerFullscreen extends Component {
       } else {
         actions.viewer.setNavStyle('white')
       }
+      if (lastElement.type === 'video') {
+        const item = media.lookup[lastElement.settings.media_id]
+        actions.viewer.setMediaTitle(item.title)
+      } else {
+        actions.viewer.setMediaTitle(null)
+      }
     } else {
       actions.viewer.setNavStyle(currentSection.color)
+      actions.viewer.setMediaTitle(null)
     }
     this.setState({ elements })
   }
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 1de88c7..03a73ac 100644
--- a/animism-align/frontend/app/views/viewer/player/player.transcript.css
+++ b/animism-align/frontend/app/views/viewer/player/player.transcript.css
@@ -196,7 +196,7 @@
 .player-transcript .media.fullscreen .img {
   position: relative;
   width: 100vw;
-  height: 100vh;
+  height: calc(80vh - 7rem);
   background-size: cover;
   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 7566968..25a353f 100644
--- a/animism-align/frontend/app/views/viewer/viewer.actions.js
+++ b/animism-align/frontend/app/views/viewer/viewer.actions.js
@@ -121,7 +121,7 @@ export const loadSections = () => dispatch => {
     }
 
     // build timeline of fullscreen events
-    if (FULLSCREEN_UTILITY_ANNOTATION_TYPES.has(annotation.type) || annotation.settings.fullscreen) {
+    if ((FULLSCREEN_UTILITY_ANNOTATION_TYPES.has(annotation.type) || annotation.settings.fullscreen) && !annotation.settings.inline) {
       const event = makeFullscreenEvent(eventIndex++, annotation)
       currentSection.fullscreenTimeline.push(event)
     }
@@ -213,6 +213,10 @@ export const setNavStyle = color => dispatch => {
   dispatch({ type: types.viewer.set_nav_style, color })
 }
 
+export const setMediaTitle = title => dispatch => {
+  dispatch({ type: types.viewer.set_media_title, title })
+}
+
 export const showComponent = key => dispatch => {
   dispatch({ type: types.viewer.toggle_component, key, value: true })
 }
diff --git a/animism-align/frontend/app/views/viewer/viewer.reducer.js b/animism-align/frontend/app/views/viewer/viewer.reducer.js
index e7b3eeb..70e94ee 100644
--- a/animism-align/frontend/app/views/viewer/viewer.reducer.js
+++ b/animism-align/frontend/app/views/viewer/viewer.reducer.js
@@ -9,6 +9,7 @@ const initialState = {
   currentSection: null,
   nextSection: null,
   navStyle: 'white',
+  mediaTitle: null,
   autoAdvance: false,
   atEndOfSection: false,
   growlOpen: true,
@@ -72,11 +73,23 @@ export default function viewerReducer(state = initialState, action) {
       }
 
     case types.viewer.set_nav_style:
+      if (action.color === state.navStyle) {
+        return state
+      }
       return {
         ...state,
         navStyle: action.color,
       }
 
+    case types.viewer.set_media_title:
+      if (action.title === state.mediaTitle) {
+        return state
+      }
+      return {
+        ...state,
+        mediaTitle: action.title,
+      }
+
     case types.viewer.open_vitrine_modal:
       return {
         ...state,