From e9e753640f1c96ffaf91b35cfc46126fcdb15e2f Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Thu, 12 Nov 2020 18:44:08 +0100
Subject: better control over cover image

---
 animism-align/frontend/app/constants.js            | 20 ++++++++++++++-
 .../frontend/app/utils/annotation.utils.js         |  4 ++-
 .../components/annotations/annotation.form.js      | 17 +++----------
 .../annotationForms/annotationForm.text.js         | 29 ++++++++++++++++++++--
 .../views/viewer/checklist/checklist.content.js    |  3 ++-
 .../components.fullscreen/fullscreen.utility.js    |  6 +++--
 .../app/views/viewer/player/player.fullscreen.css  |  1 +
 .../views/viewer/sections/viewer.sections.list.js  | 12 ++++++---
 .../transcript/components/elementTypes.video.js    |  2 ++
 .../frontend/app/views/viewer/viewer.actions.js    | 11 ++++++--
 10 files changed, 79 insertions(+), 26 deletions(-)

diff --git a/animism-align/frontend/app/constants.js b/animism-align/frontend/app/constants.js
index b70f49c..711d979 100644
--- a/animism-align/frontend/app/constants.js
+++ b/animism-align/frontend/app/constants.js
@@ -1,3 +1,5 @@
+import { capitalize } from 'app/utils'
+
 export const URLS = {
   audio: '/static/data_store/peaks/animism_episode_01_2810.mp3',
   peaks: '/static/data_store/peaks/peaks.json',
@@ -44,6 +46,21 @@ export const ROMAN_NUMERALS = [
   'XI', 'XII', 'XIII', 'XIV', 'XV', 'XVI', 'XVII', 'XVIII', 'XIX', 'XX',
 ]
 
+export const ANNOTATION_SELECT_LABELS = {
+  'section_heading': 'Chapter Heading',
+}
+
+export const ANNOTATION_SELECT_OPTIONS = [
+  'sentence', 'section_heading', 'heading_text', 'pullquote_credit', 'paragraph_end',
+  'footnote',
+  'text_plate',
+  'video', 'subtitle',
+  'image',
+  'gallery', 'carousel', 'grid', 'vitrine',
+  'gallery_advance',
+  'curtain', 'intro', 'schedule',
+].map(name => ({ name, label: ANNOTATION_SELECT_LABELS[name] || capitalize(name.replace('_', ' ')) }))
+
 export const TEXT_ANNOTATION_TYPES = new Set([
   'section_heading', 'heading_text', 'sentence', 'paragraph_end', 'pullquote_credit',
   'footnote', 'text_plate', 'subtitle',
@@ -95,7 +112,7 @@ export const BLACK_WHITE_SELECT_OPTIONS = [
 ]
 
 export const CURTAIN_STYLE_SELECT_OPTIONS = [
-  { label: 'section heading', name: 'section_heading'},
+  { label: 'chapter heading', name: 'section_heading'},
   { label: 'video title', name: 'video_title'},
   { label: 'default', name: 'default'},
 ]
@@ -116,6 +133,7 @@ export const IMAGE_BACKGROUND_SIZE_OPTIONS = [
   { label: 'Contain', name: 'contain' },
   { label: '90% Width', name: '90% auto' },
   { label: '90% Height', name: 'auto 90%' },
+  { label: 'Hidden', name: 'hidden' },
 ]
 
 export const IMAGE_INLINE_SIZE_OPTIONS = [
diff --git a/animism-align/frontend/app/utils/annotation.utils.js b/animism-align/frontend/app/utils/annotation.utils.js
index 5bf21b5..76175c9 100644
--- a/animism-align/frontend/app/utils/annotation.utils.js
+++ b/animism-align/frontend/app/utils/annotation.utils.js
@@ -87,7 +87,9 @@ export const sectionProgressPercentage = (section, play_ts) => {
 
 export const makeMediaItems = (media, types) => {
   const { lookup, order } = media
-  if (!(types instanceof Set)) {
+  if (types instanceof String) {
+    types = new Set([ types ])
+  } else if (!(types instanceof Set)) {
     types = new Set(types)
   }
   const listItems = order.filter(id => types.has(lookup[id].type)).map(id => {
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotation.form.js b/animism-align/frontend/app/views/align/components/annotations/annotation.form.js
index e0a66e4..7b1918a 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotation.form.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotation.form.js
@@ -5,24 +5,13 @@ import { connect } from 'react-redux'
 
 import actions from 'app/actions'
 
-import { MEDIA_ANNOTATION_TYPES } from 'app/constants'
-import { clamp, timestamp, capitalize } from 'app/utils'
+import { ANNOTATION_SELECT_OPTIONS, MEDIA_ANNOTATION_TYPES } from 'app/constants'
+import { timestamp } from 'app/utils'
 import { timeToPosition } from 'app/utils/align.utils'
 import { Select } from 'app/common'
 
 import { annotationFormLookup } from './annotationForms'
 
-const ANNOTATION_TYPES = [
-  'sentence', 'section_heading', 'heading_text', 'pullquote_credit', 'paragraph_end',
-  'footnote',
-  'text_plate',
-  'video', 'subtitle',
-  'image',
-  'gallery', 'carousel', 'grid', 'vitrine',
-  'gallery_advance',
-  'curtain', 'intro', 'schedule',
-].map(name => ({ name, label: capitalize(name.replace('_', ' ')) }))
-
 const annotationTextTypes = new Set([
   'sentence', 'section_heading', 'heading_text', 'pullquote_credit', 'footnote', 'text_plate',
 ])
@@ -148,7 +137,7 @@ class AnnotationForm extends Component {
           <Select
             name='type'
             selected={annotation.type}
-            options={ANNOTATION_TYPES}
+            options={ANNOTATION_SELECT_OPTIONS}
             defaultOption='text'
             onChange={this.handleSelect}
           />
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.text.js b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.text.js
index 9c94435..8bc7675 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.text.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.text.js
@@ -1,10 +1,17 @@
 import React, { Component } from 'react'
 
-import { CURTAIN_COLOR_SELECT_OPTIONS, CURTAIN_STYLE_SELECT_OPTIONS, BLACK_WHITE_SELECT_OPTIONS } from 'app/constants'
+import {
+  CURTAIN_COLOR_SELECT_OPTIONS,
+  CURTAIN_STYLE_SELECT_OPTIONS,
+  BLACK_WHITE_SELECT_OPTIONS,
+  IMAGE_BACKGROUND_SIZE_OPTIONS,
+} from 'app/constants'
 import { Select, Checkbox, TextInput, LabelDescription } from 'app/common'
 import { AnnotationFormFullscreen } from './annotationForm.utility'
+import { makeMediaItems } from 'app/utils/annotation.utils'
 
-export const AnnotationFormSectionHeading = ({ annotation, handleSettingsSelect, handleSettingsChange }) => {
+export const AnnotationFormSectionHeading = ({ annotation, media, handleSettingsSelect, handleSettingsChange }) => {
+  const image_list_items = makeMediaItems(media, ['image', 'video', 'gallery'])
   return (
     <div className='options'>
       <Checkbox
@@ -21,6 +28,24 @@ export const AnnotationFormSectionHeading = ({ annotation, handleSettingsSelect,
         defaultOption='Pick a color'
         onChange={handleSettingsSelect}
       />
+      <Select
+        title='Cover image'
+        name='media_id'
+        className="media_id"
+        selected={annotation.settings.media_id}
+        options={image_list_items}
+        defaultOption='Choose an image'
+        onChange={handleSettingsSelect}
+      />
+      <Select
+        title='Cover style'
+        name='cover_style'
+        className="cover_style"
+        selected={annotation.settings.cover_style}
+        options={IMAGE_BACKGROUND_SIZE_OPTIONS}
+        defaultOption='Cover image caption style'
+        onChange={handleSettingsSelect}
+      />
       <LabelDescription>
         {'Background color for section'}
       </LabelDescription>
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,
-- 
cgit v1.2.3-70-g09d2