From d8ac0c8298cf6157fcf5773eab088f19a2c8fbb1 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Mon, 21 Sep 2020 21:48:23 +0200
Subject: background color stuff, pull quotes in the text but not the
 transcript, inline vitrine stuff

---
 .../annotationForms/annotationForm.text.js         | 31 +++++++++++++++-------
 .../views/media/components/media.formGallery.js    | 10 +++++++
 .../app/views/viewer/modals/modals.vitrine.js      |  3 +--
 .../components.fullscreen/fullscreen.image.js      |  4 ++-
 .../player/components.inline/inline.gallery.js     |  8 +++---
 .../viewer/player/components.inline/inline.text.js |  1 +
 .../views/viewer/player/components.media/media.css | 14 ++++++++++
 .../app/views/viewer/player/player.container.js    |  2 +-
 .../app/views/viewer/player/player.fullscreen.js   |  5 ++--
 .../app/views/viewer/player/player.transcript.css  | 11 ++++++++
 .../app/views/viewer/player/player.transcript.js   |  8 ++++--
 .../frontend/app/views/viewer/viewer.actions.js    | 25 ++++++++---------
 .../frontend/app/views/viewer/viewer.reducer.js    |  1 +
 13 files changed, 89 insertions(+), 34 deletions(-)

(limited to 'animism-align/frontend/app')

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 d3009d8..07a79a3 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
@@ -12,6 +12,17 @@ export const AnnotationFormSectionHeading = ({ annotation, handleSettingsSelect,
         checked={annotation.settings.hidden}
         onChange={handleSettingsSelect}
       />
+      <Select
+        title='Background Color'
+        name='color'
+        selected={annotation.settings.color}
+        options={BLACK_WHITE_SELECT_OPTIONS}
+        defaultOption='Pick a color'
+        onChange={handleSettingsSelect}
+      />
+      <LabelDescription>
+        {'Background color for section'}
+      </LabelDescription>
       <Select
         title='Transition Color'
         name='transition_color'
@@ -23,15 +34,6 @@ export const AnnotationFormSectionHeading = ({ annotation, handleSettingsSelect,
       <LabelDescription>
         {'Player will fade from this color when section begins'}
       </LabelDescription>
-      <Checkbox
-        label="Section does not have audio"
-        name="no_audio"
-        checked={annotation.settings.no_audio}
-        onChange={handleSettingsSelect}
-      />
-      <LabelDescription>
-        {'Check if this is a text-only section'}
-      </LabelDescription>
       {!annotation.settings.no_audio &&
         <div>
           <Select
@@ -43,10 +45,19 @@ export const AnnotationFormSectionHeading = ({ annotation, handleSettingsSelect,
             onChange={handleSettingsSelect}
           />
           <LabelDescription>
-            {'Set the color of the duration icon on the section navigation'}
+            {'Section nav thumbnail icon color'}
           </LabelDescription>
         </div>
       }
+      <Checkbox
+        label="Section does not have audio"
+        name="no_audio"
+        checked={annotation.settings.no_audio}
+        onChange={handleSettingsSelect}
+      />
+      <LabelDescription>
+        {'Check if this is a text-only section'}
+      </LabelDescription>
     </div>
   )
 }
diff --git a/animism-align/frontend/app/views/media/components/media.formGallery.js b/animism-align/frontend/app/views/media/components/media.formGallery.js
index 3b7cdd1..a62a4dc 100644
--- a/animism-align/frontend/app/views/media/components/media.formGallery.js
+++ b/animism-align/frontend/app/views/media/components/media.formGallery.js
@@ -29,6 +29,16 @@ export default class MediaGalleryForm extends Component {
     this.handleDestroyGalleryThumbnail = this.handleDestroyGalleryThumbnail.bind(this)
   }
 
+  componentDidMount() {
+    const { data } = this.props
+    this.handleSettingsChange('multiple', {
+      image_order: data.settings.image_order || [],
+      image_lookup: data.settings.image_lookup || {},
+      caption_lookup: data.settings.caption_lookup || {},
+      thumbnail_lookup: data.settings.thumbnail_lookup || {},
+    })
+  }
+
   handleChange(e) {
     const { name, value } = e.target
     this.handleSelect(name, value)
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 ebe346d..febd3eb 100644
--- a/animism-align/frontend/app/views/viewer/modals/modals.vitrine.js
+++ b/animism-align/frontend/app/views/viewer/modals/modals.vitrine.js
@@ -3,7 +3,6 @@ import { connect } from 'react-redux'
 
 import actions from 'app/actions'
 
-import { mod } from 'app/utils'
 import { EfluxClose } from '../nav/eflux.icons'
 import { Arrow } from '../nav/viewer.icons'
 
@@ -18,7 +17,7 @@ class VitrineModal extends Component {
     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]
-    const caption = media.settings.caption_lookup[id]
+    const caption = media.settings.caption_lookup[id] || {}
     return (
       <div className={className}>
         <div className='vitrine-modal-content'>
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 15525f4..85badb0 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,7 +1,9 @@
 import React from 'react'
 
+import { CURTAIN_COLOR_LOOKUP } from 'app/constants'
 export const FullscreenImage = ({ element, media, transitionDuration }) => {
-  const { color } = element
+  const color = element.color || CURTAIN_COLOR_LOOKUP.white
+
   const item = media.lookup[element.settings.media_id]
   const style = {
     backgroundColor: color.backgroundColor,
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 44fa751..3ac8fc6 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
@@ -3,7 +3,7 @@
 import { CURTAIN_COLOR_LOOKUP } from 'app/constants'
 import { MediaCitation, Vitrine, Gallery, Carousel, Grid } from '../components.media'
 
-export const InlineVitrine = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick }) => {
+export const InlineVitrine = ({ paragraph, media, onAnnotationClick }) => {
   const annotation = paragraph.annotations[0]
   const item = media.lookup[annotation.settings.media_id]
   const color = CURTAIN_COLOR_LOOKUP[annotation.settings.color] || CURTAIN_COLOR_LOOKUP.white
@@ -23,7 +23,7 @@ export const InlineVitrine = ({ paragraph, media, currentParagraph, currentAnnot
   // <MediaCitation media={item} />
 }
 
-export const InlineGallery = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick }) => {
+export const InlineGallery = ({ paragraph, media, onAnnotationClick }) => {
   const annotation = paragraph.annotations[0]
   const item = media.lookup[annotation.settings.media_id]
   return (
@@ -35,7 +35,7 @@ export const InlineGallery = ({ paragraph, media, currentParagraph, currentAnnot
   )
 }
 
-export const InlineCarousel = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick }) => {
+export const InlineCarousel = ({ paragraph, media, onAnnotationClick }) => {
   const annotation = paragraph.annotations[0]
   const item = media.lookup[annotation.settings.media_id]
   const color = CURTAIN_COLOR_LOOKUP[annotation.settings.color] || CURTAIN_COLOR_LOOKUP.white
@@ -55,7 +55,7 @@ export const InlineCarousel = ({ paragraph, media, currentParagraph, currentAnno
   )
 }
 
-export const InlineGrid = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick }) => {
+export const InlineGrid = ({ paragraph, media, onAnnotationClick }) => {
   const annotation = paragraph.annotations[0]
   const item = media.lookup[annotation.settings.media_id]
 
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 70cf91a..18b026f 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
@@ -5,6 +5,7 @@ import { SpeakerIcon } from '../../nav/viewer.icons'
 
 export const Paragraph = ({ paragraph, currentParagraph, currentAnnotation, onAnnotationClick }) => {
   if (paragraph.hidden) return null
+  if (paragraph.annotations.length === 0) return null
   let className = paragraph.type
   if (className !== 'paragraph') className += ' paragraph'
   if (currentParagraph) className += ' current'
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 2296d73..d2e9910 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
@@ -242,6 +242,13 @@
   justify-content: space-between;
   height: calc(45vh - 7.5rem);
 }
+.inline-element .vitrine {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+.inline-element .vitrine-item {
+  margin-bottom: 1rem;
+}
 .vitrine-items .vitrine-item .vitrine-image {
   display: flex;
   justify-content: center;
@@ -276,3 +283,10 @@
 .inline-element.vitrine .heading {
   padding-top: 8rem;
 }
+.black .vitrine-item .zoomPlus {
+  opacity: 0.2;
+  transition: opacity 0.2s;
+}
+.black .vitrine-item:hover .zoomPlus {
+  opacity: 1.0;
+}
diff --git a/animism-align/frontend/app/views/viewer/player/player.container.js b/animism-align/frontend/app/views/viewer/player/player.container.js
index 3379bfe..bbad771 100644
--- a/animism-align/frontend/app/views/viewer/player/player.container.js
+++ b/animism-align/frontend/app/views/viewer/player/player.container.js
@@ -70,7 +70,7 @@ class PlayerContainer extends Component {
   }
 
   setCurrentSection() {
-    const { audio, sections, currentSection, autoAdvance } = this.props
+    const { audio, currentSection, autoAdvance } = this.props
     const { play_ts } = audio
     if (floatInRange(currentSection.start_ts, play_ts, currentSection.end_ts)) {
       return
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 90e4925..23648b9 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 } = this.props
+    const { audio, timeline, currentSection } = this.props
     const { play_ts } = audio
     const elements = timeline.filter(element => (
       floatInRange(element.start_ts, play_ts, element.fade_out_start_ts + 0.1)
@@ -36,7 +36,7 @@ class PlayerFullscreen extends Component {
         actions.viewer.setNavStyle('white')
       }
     } else {
-      actions.viewer.setNavStyle('white')
+      actions.viewer.setNavStyle(currentSection.color)
     }
     this.setState({ elements })
   }
@@ -101,6 +101,7 @@ const FirstChild = (props) => {
 }
 
 const mapStateToProps = state => ({
+  currentSection: state.viewer.currentSection,
   audio: state.audio,
   media: state.media.index,
   timeline: state.viewer.currentSection ? state.viewer.currentSection.fullscreenTimeline : [],
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 f34da4a..1de88c7 100644
--- a/animism-align/frontend/app/views/viewer/player/player.transcript.css
+++ b/animism-align/frontend/app/views/viewer/player/player.transcript.css
@@ -7,6 +7,11 @@
   overflow-y: scroll;
 }
 
+.player-transcript.black {
+  background: #000;
+  color: #fff;
+}
+
 .player-transcript .section_heading,
 .player-transcript .paragraph.intro_paragraph {
   font-family: "Freight Text", serif;
@@ -162,6 +167,12 @@
 .paragraph:hover .speaker-icon {
   opacity: 1;
 }
+.player-transcript.black .speaker-icon svg {
+  background: white;
+}
+.player-transcript.black .speaker-icon svg path {
+  fill: black;
+}
 
 /* media */
 
diff --git a/animism-align/frontend/app/views/viewer/player/player.transcript.js b/animism-align/frontend/app/views/viewer/player/player.transcript.js
index 0d0a636..dbc87b5 100644
--- a/animism-align/frontend/app/views/viewer/player/player.transcript.js
+++ b/animism-align/frontend/app/views/viewer/player/player.transcript.js
@@ -54,9 +54,13 @@ class PlayerTranscript extends Component {
   }
 
   render() {
-    const { paragraphs } = this.props.section
+    const { paragraphs, color } = this.props.section
     return (
-      <div className="player-transcript" ref={this.containerRef} onScroll={this.handleScroll}>
+      <div
+        className={"player-transcript " + color}
+        ref={this.containerRef}
+        onScroll={this.handleScroll}
+      >
         <div className='content'>
           <ParagraphList
             paragraphs={paragraphs}
diff --git a/animism-align/frontend/app/views/viewer/viewer.actions.js b/animism-align/frontend/app/views/viewer/viewer.actions.js
index fdd47a9..b4a374c 100644
--- a/animism-align/frontend/app/views/viewer/viewer.actions.js
+++ b/animism-align/frontend/app/views/viewer/viewer.actions.js
@@ -15,18 +15,6 @@ import { buildParagraphs } from 'app/utils/transcript.utils'
 import { annotationFadeTimings } from 'app/utils/annotation.utils'
 import { getNextSection } from 'app/utils/viewer.utils'
 
-const newSection = (annotation, index, mediaIndex) => ({
-  start_ts: annotation.start_ts,
-  end_ts: 0,
-  title: annotation.text,
-  media: [],
-  fullscreenTimeline: [],
-  index,
-  mediaIndex,
-  no_audio: !!annotation.settings.no_audio,
-  section_nav_color: annotation.settings.section_nav_color || 'white',
-})
-
 // build the list of sections from the raw annotation list.
 export const loadSections = () => dispatch => {
   // list of all sections
@@ -184,6 +172,19 @@ export const loadSections = () => dispatch => {
   dispatch({ type: types.viewer.load_sections, sections })
 }
 
+const newSection = (annotation, index, mediaIndex) => ({
+  start_ts: annotation.start_ts,
+  end_ts: 0,
+  title: annotation.text,
+  media: [],
+  fullscreenTimeline: [],
+  index,
+  mediaIndex,
+  no_audio: !!annotation.settings.no_audio,
+  color: annotation.settings.color || 'white',
+  section_nav_color: annotation.settings.section_nav_color || 'white',
+})
+
 const makeFullscreenEvent = (index, annotation) => {
   const timing = annotationFadeTimings(annotation)
   const event = {
diff --git a/animism-align/frontend/app/views/viewer/viewer.reducer.js b/animism-align/frontend/app/views/viewer/viewer.reducer.js
index e32a0df..17eb90e 100644
--- a/animism-align/frontend/app/views/viewer/viewer.reducer.js
+++ b/animism-align/frontend/app/views/viewer/viewer.reducer.js
@@ -61,6 +61,7 @@ export default function viewerReducer(state = initialState, action) {
         ...state,
         currentSection: action.currentSection,
         nextSection: action.nextSection,
+        navStyle: action.currentSection.color,
         atEndOfSection: false,
       }
 
-- 
cgit v1.2.3-70-g09d2