times and stuff on the section nav

1 files changed, 37 insertions, 5 deletions

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)