1 files changed, 3 insertions, 79 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 8e6f39b..a2f906c 100644
--- a/animism-align/frontend/app/views/viewer/sections/viewer.sections.js
+++ b/animism-align/frontend/app/views/viewer/sections/viewer.sections.js
@@ -1,91 +1,15 @@
 import React, { Component } from 'react'
-// import { Link } from 'react-router-dom'
-import { connect } from 'react-redux'
 
-import actions from 'app/actions'
 import ViewerSectionsNav from './viewer.sections.nav'
-import { ROMAN_NUMERALS, CURTAIN_COLOR_LOOKUP } from 'app/constants'
-import { clamp, timestamp, floatInRange, floatLT } from 'app/utils'
-import { thumbnailURL, sectionProgressPercentage } from 'app/utils/annotation.utils'
-import { SpeakerIcon } from '../nav/viewer.icons'
+import ViewerSectionsList from './viewer.sections.list'
 
-class ViewerSections 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
-  }
+export default class ViewerSections extends Component {
   render() {
-    const { play_ts, sections, currentSection } = this.props
     return (
       <div className="viewer-sections">
-        <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>
+        <ViewerSectionsList />
         <ViewerSectionsNav />
       </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)(ViewerSections)