times and stuff on the section nav

5 files changed, 131 insertions, 9 deletions

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 a632e70..d3009d8 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,6 +1,7 @@
 import React, { Component } from 'react'
 
-import { Select, Checkbox } from 'app/common'
+import { CURTAIN_COLOR_SELECT_OPTIONS, BLACK_WHITE_SELECT_OPTIONS } from 'app/constants'
+import { Select, Checkbox, LabelDescription } from 'app/common'
 
 export const AnnotationFormSectionHeading = ({ annotation, handleSettingsSelect, handleSettingsChange }) => {
   return (
@@ -11,6 +12,41 @@ export const AnnotationFormSectionHeading = ({ annotation, handleSettingsSelect,
         checked={annotation.settings.hidden}
         onChange={handleSettingsSelect}
       />
+      <Select
+        title='Transition Color'
+        name='transition_color'
+        selected={annotation.settings.transition_color}
+        options={CURTAIN_COLOR_SELECT_OPTIONS}
+        defaultOption='Pick a color'
+        onChange={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
+            title='Section Nav Color'
+            name='section_nav_color'
+            selected={annotation.settings.section_nav_color}
+            options={BLACK_WHITE_SELECT_OPTIONS}
+            defaultOption='Pick a color'
+            onChange={handleSettingsSelect}
+          />
+          <LabelDescription>
+            {'Set the color of the duration icon on the section navigation'}
+          </LabelDescription>
+        </div>
+      }
     </div>
   )
 }
diff --git a/animism-align/frontend/app/views/viewer/nav/viewer.icons.js b/animism-align/frontend/app/views/viewer/nav/viewer.icons.js
index 7bc0219..059f0c0 100644
--- a/animism-align/frontend/app/views/viewer/nav/viewer.icons.js
+++ b/animism-align/frontend/app/views/viewer/nav/viewer.icons.js
@@ -92,3 +92,10 @@ export const ZoomPlus = (
     <path className='cross' d="M27.5,19.5h-7v-7h-1v7h-7v1h7v7h1v-7h7V19.5z"/>
   </svg>
 )
+
+export const SpeakerIcon = (
+  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
+  <path d="M29.11,20.37c0,2.48-1.21,4.74-3.23,6.04l-0.57-0.89c1.71-1.1,2.74-3.03,2.74-5.15c0-2.11-1.06-4.09-2.77-5.18l0.57-0.9
+    C27.89,15.59,29.11,17.86,29.11,20.37z M10.89,15.5v9h5.02l5.4,4.38V11.12l-5.4,4.38H10.89z"/>
+  </svg>
+)
\ No newline at end of file
diff --git a/animism-align/frontend/app/views/viewer/sections/sections.css b/animism-align/frontend/app/views/viewer/sections/sections.css
index 1ddb9d2..a60a063 100644
--- a/animism-align/frontend/app/views/viewer/sections/sections.css
+++ b/animism-align/frontend/app/views/viewer/sections/sections.css
@@ -58,6 +58,14 @@
   margin: 1rem 0 1rem 1rem;
   font-size: 16px;
   cursor: pointer;
+  opacity: 0.6;
+  transition: opacity 0.2s;
+}
+.viewer-sections .viewer-section:hover {
+  opacity: 1.0;
+}
+.viewer-sections .viewer-section.current-section {
+  opacity: 1.0;
 }
 .viewer-sections .viewer-section:last-child {
   margin-right: 1rem;
@@ -66,7 +74,7 @@
   height: calc(20rem - 4px);
   width: 12rem;
 }
-.viewer-sections .section-thumbnail {
+.viewer-section .section-thumbnail {
   display: block;
   border-radius: 1rem;
   width: 12rem;
@@ -74,8 +82,44 @@
   margin-bottom: 0.5rem;
   background-size: cover;
   background-position: center center;
+  position: relative;
+  overflow: hidden;
 }
-.viewer-sections .section-media {
+.viewer-section .section-duration {
+  position: absolute;
+  bottom: 0.5rem;
+  left: 0.5rem;
+  font-size: 0.75rem;
+} 
+.section-duration-white { color: white; }
+.section-duration-black { color: black; }
+.section-duration-white svg path { fill: white; }
+.section-duration-black svg path { fill: black; }
+.viewer-section .section-media {
   margin-top: 0.75rem;
   font-size: 12px;
 }
+.viewer-section .section-has-audio {
+  position: absolute;
+  bottom: -0.25rem;
+  right: 0.25rem;
+}
+.viewer-section .section-has-audio svg {
+  width: 2.5rem;
+  height: 2.5rem;
+}
+.viewer-section .section-progress-bar {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 3px;
+  background: #333;
+}
+.viewer-section .section-progress {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 3px;
+  background: #fff;
+}
\ No newline at end of file
diff --git a/animism-align/frontend/app/views/viewer/sections/viewer.sections.js b/animism-align/frontend/app/views/viewer/sections/viewer.sections.js
index 4bb61ec..05eef9c 100644
--- a/animism-align/frontend/app/views/viewer/sections/viewer.sections.js
+++ b/animism-align/frontend/app/views/viewer/sections/viewer.sections.js
@@ -4,27 +4,52 @@ import { connect } from 'react-redux'
 
 import actions from 'app/actions'
 import ViewerSectionsNav from './viewer.sections.nav'
-import { ROMAN_NUMERALS } from 'app/constants'
+import { ROMAN_NUMERALS, CURTAIN_COLOR_LOOKUP } from 'app/constants'
+import { clamp, timestamp, floatInRange, floatLT } from 'app/utils'
 import { thumbnailURL } from 'app/utils/annotation.utils'
+import { SpeakerIcon } from '../nav/viewer.icons'
 
 class ViewerSections extends Component {
+  shouldComponentUpdate(nextProps) {
+    if (nextProps.nav !== this.props.nav) return true
+    return nextProps.nav
+  }
   render() {
-    const { sections } = this.props
+    const { play_ts, sections, currentSection } = this.props
     return (
       <div className="viewer-sections">
         <div className="viewer-sections-scroll">
           {sections.map(section => {
             // console.log(section)
+            const media = section.media.length ? section.media[0].media : null
+            const { no_audio, section_nav_color } = section
+            const progress = Math.round(sectionProgress(section, play_ts) * 100)
             return (
               <div
-                className="viewer-section"
+                className={(!currentSection || section.index === currentSection.index) ? "viewer-section current-section" : "viewer-section"}
                 key={section.index}
                 onClick={() => actions.viewer.seekToSection(section)}
               >
                 <div>
                   <div className="section-thumbnail" style={{
-                    backgroundImage: section.media.length && 'url(' + thumbnailURL(section.media[0].media) + ')',
-                  }}/>
+                    backgroundImage: media && 'url(' + thumbnailURL(media) + ')',
+                  }}>
+                    {!no_audio &&
+                      <div className={"section-duration-" + section_nav_color}>
+                        <div className="section-duration">
+                          {timestamp(section.duration)}
+                        </div>
+                        <div className="section-has-audio">
+                          {SpeakerIcon}
+                        </div>
+                        <div className="section-progress-bar">
+                          <div className="section-progress"
+                            style={{ width: progress + '%' }}
+                          />
+                        </div>
+                      </div>
+                    }
+                  </div>
                   <div className="section-title">
                     {ROMAN_NUMERALS[section.index]}<br />
                     {section.title}
@@ -43,8 +68,15 @@ class ViewerSections extends Component {
   }
 }
 
+const sectionProgress = (section, play_ts) => {
+  return (clamp(play_ts, section.start_ts, section.end_ts) - section.start_ts) / section.duration
+}
+
 const mapStateToProps = state => ({
+  nav: state.viewer.nav,
+  play_ts: state.audio.play_ts,
   sections: state.viewer.sections,
+  currentSection: state.viewer.currentSection,
 })
 
 export default connect(mapStateToProps)(ViewerSections)
diff --git a/animism-align/frontend/app/views/viewer/viewer.actions.js b/animism-align/frontend/app/views/viewer/viewer.actions.js
index 097f01b..f5f0630 100644
--- a/animism-align/frontend/app/views/viewer/viewer.actions.js
+++ b/animism-align/frontend/app/views/viewer/viewer.actions.js
@@ -18,6 +18,8 @@ const newSection = (annotation, index, mediaIndex) => ({
   media: [],
   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.
@@ -125,7 +127,7 @@ export const loadSections = () => dispatch => {
   if (currentSection) {
     currentSection.mediaLabels = Object.keys(currentMediaLabels).sort().join(', ')
     currentSection.paragraphs = buildParagraphs(sectionTextAnnotationOrder, currentSection.index)
-    currentSection.end_ts = timeline.duration
+    currentSection.duration = timeline.duration
   }
 
   // set the end_ts for each section (i.e. just before the next section starts)
@@ -134,6 +136,7 @@ export const loadSections = () => dispatch => {
     if (currentSection.end_ts === 0) {
       currentSection.end_ts = sections[i+1].start_ts - 1
     }
+    currentSection.duration = currentSection.end_ts - currentSection.start_ts
   }
 
   // console.log(sections)