better control over cover image

6 files changed, 27 insertions, 8 deletions

diff --git a/animism-align/frontend/app/views/viewer/checklist/checklist.content.js b/animism-align/frontend/app/views/viewer/checklist/checklist.content.js
index c3e5c58..4194d4a 100644
--- a/animism-align/frontend/app/views/viewer/checklist/checklist.content.js
+++ b/animism-align/frontend/app/views/viewer/checklist/checklist.content.js
@@ -23,6 +23,7 @@ class ChecklistContent extends Component {
 
   render() {
     const { sections, checklistSection } = this.props
+    let mediaIndex = 1
     return (
       <div className="checklist-content">
         <div className="checklist-table">
@@ -39,7 +40,7 @@ class ChecklistContent extends Component {
                     onClick={() => this.handleMediaSelection(section, mediaItem, i)}
                   >
                     <div className="media-id">
-                      {pad(section.mediaIndex + i + 1, 2)}
+                      {pad(mediaIndex++, 2)}
                     </div>
                     <div className="media-section">
                       {ROMAN_NUMERALS[section.index]}
diff --git a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.utility.js b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.utility.js
index 5ec4833..02a9525 100644
--- a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.utility.js
+++ b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.utility.js
@@ -12,9 +12,11 @@ export const FullscreenCurtain = ({ element, transitionDuration }) => {
     transitionDuration,
   }
   console.log(element)
-  const curtainBackground = element.mediaItem && {
+  const curtainBackground = (element.cover_style !== "hidden" && !!element.mediaItem) && {
     backgroundImage: 'url(' + (displayThumbnailURL(element.mediaItem)) + ')',
+    backgroundSize: element.cover_style,
   }
+
   let texts = []
   // console.log(element)
   switch (element.settings.curtain_style) {
@@ -46,7 +48,7 @@ export const FullscreenCurtain = ({ element, transitionDuration }) => {
   }
   return (
     <div className='fullscreen-element curtain' style={style}>
-      {element.mediaItem && (
+      {curtainBackground && (
         <div className='curtain-background' style={curtainBackground} />
       )}
       <div className='curtain-text'>
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 4f7b33d..63112e7 100644
--- a/animism-align/frontend/app/views/viewer/player/player.fullscreen.css
+++ b/animism-align/frontend/app/views/viewer/player/player.fullscreen.css
@@ -139,6 +139,7 @@ iframe {
   height: 100%;
   background-size: cover;
   background-position: center;
+  background-repeat: no-repeat;
   z-index: 0;
   transition: opacity 3.0s;
   opacity: 0;
diff --git a/animism-align/frontend/app/views/viewer/sections/viewer.sections.list.js b/animism-align/frontend/app/views/viewer/sections/viewer.sections.list.js
index 34a944d..fd7ade4 100644
--- a/animism-align/frontend/app/views/viewer/sections/viewer.sections.list.js
+++ b/animism-align/frontend/app/views/viewer/sections/viewer.sections.list.js
@@ -22,7 +22,7 @@ class ViewerSectionsList extends Component {
     this.scrollRef.current.scrollLeft += delta
   }
   render() {
-    const { play_ts, sections, currentSection } = this.props
+    const { play_ts, sections, media, currentSection } = this.props
     return (
       <div
         ref={this.scrollRef}
@@ -31,7 +31,12 @@ class ViewerSectionsList extends Component {
       >
         {sections.map(section => {
           // console.log(section)
-          const media = section.media.length ? section.media[0].media : null
+          let mediaItem
+          if (section.cover_id) {
+            mediaItem = media.lookup[section.cover_id]
+          } else {
+            mediaItem = section.media.length ? section.media[0].media : null
+          }
           const { no_audio, section_nav_color } = section
           const progress = sectionProgressPercentage(section, play_ts)
           return (
@@ -42,7 +47,7 @@ class ViewerSectionsList extends Component {
             >
               <div>
                 <div className="section-thumbnail" style={{
-                  backgroundImage: media && 'url(' + thumbnailURL(media) + ')',
+                  backgroundImage: mediaItem && 'url(' + thumbnailURL(mediaItem) + ')',
                 }}>
                   {!no_audio &&
                     <div className={"section-duration-" + section_nav_color}>
@@ -77,6 +82,7 @@ class ViewerSectionsList extends Component {
 }
 
 const mapStateToProps = state => ({
+  media: state.media.index,
   nav: state.viewer.nav,
   play_ts: state.audio.play_ts,
   sections: state.viewer.sections,
diff --git a/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.video.js b/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.video.js
index 6ad46b2..a86f8c3 100644
--- a/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.video.js
+++ b/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.video.js
@@ -77,6 +77,7 @@ class TranscriptVideoSubtitles extends Component {
     }
   }
   render() {
+    const { mediaItem } = this.props
     const { subtitles, current } = this.state
     if (!subtitles) return
     return (
@@ -96,6 +97,7 @@ class TranscriptVideoSubtitles extends Component {
             </span>
           )
         })}
+        <span className="pullquote_credit sentence">{mediaItem.author}</span>
       </div>
     )
   }
diff --git a/animism-align/frontend/app/views/viewer/viewer.actions.js b/animism-align/frontend/app/views/viewer/viewer.actions.js
index fa63804..82d3cf1 100644
--- a/animism-align/frontend/app/views/viewer/viewer.actions.js
+++ b/animism-align/frontend/app/views/viewer/viewer.actions.js
@@ -192,8 +192,13 @@ export const loadSections = () => dispatch => {
       // 
       currentSection.fullscreenTimeline.unshift(initial_curtain_event)
     }
-    if (currentSection.fullscreenTimeline.length && currentSection.fullscreenTimeline[0].type === 'curtain' && currentSection.media.length) {
-      currentSection.fullscreenTimeline[0].mediaItem = currentSection.media[0].media
+    if (currentSection.fullscreenTimeline.length && currentSection.fullscreenTimeline[0].type === 'curtain') {
+      if (currentSection.cover_id) {
+        currentSection.fullscreenTimeline[0].mediaItem = mediaLookup[currentSection.cover_id]
+      } else if (currentSection.media.length) {
+        currentSection.fullscreenTimeline[0].mediaItem = currentSection.media[0].media
+      }
+      currentSection.fullscreenTimeline[0].cover_style = currentSection.cover_style
     }
     currentSection.duration = currentSection.end_ts - currentSection.start_ts
     currentSection.inlineParagraphCount = currentSection.paragraphs.filter(p => !p.hidden).length
@@ -209,6 +214,8 @@ const newSection = (annotation, index, mediaIndex) => ({
   start_ts: annotation.start_ts,
   end_ts: 0,
   title: annotation.text,
+  cover_id: annotation.settings.media_id || 0,
+  cover_style: annotation.settings.cover_style || "cover",
   media: [],
   fullscreenTimeline: [],
   index,