1 files changed, 86 insertions, 0 deletions
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
new file mode 100644
index 0000000..34a944d
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/sections/viewer.sections.list.js
@@ -0,0 +1,86 @@
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+
+import actions from 'app/actions'
+import { ROMAN_NUMERALS } from 'app/constants'
+import { timestamp } from 'app/utils'
+import { thumbnailURL, sectionProgressPercentage } from 'app/utils/annotation.utils'
+import { SpeakerIcon } from '../nav/viewer.icons'
+
+class ViewerSectionsList extends Component {
+  constructor(props) {
+    super(props)
+    this.scrollRef = React.createRef()
+    this.handleWheel = this.handleWheel.bind(this)
+  }
+  shouldComponentUpdate(nextProps) {
+    if (nextProps.nav !== this.props.nav) return true
+    return nextProps.nav
+  }
+  handleWheel(e) {
+    let delta = Math.abs(e.deltaY) > Math.abs(e.deltaX) ? e.deltaY : e.deltaX
+    this.scrollRef.current.scrollLeft += delta
+  }
+  render() {
+    const { play_ts, sections, currentSection } = this.props
+    return (
+      <div
+        ref={this.scrollRef}
+        className="viewer-sections-scroll"
+        onWheel={e => this.handleWheel(e)}
+      >
+        {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 = sectionProgressPercentage(section, play_ts)
+          return (
+            <div
+              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: 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}
+                </div>
+                <div className="section-media">
+                  {section.mediaLabels}
+                </div>
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    )
+  }
+}
+
+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)(ViewerSectionsList)