auto-scroll sections list

1 files changed, 11 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
index fd7ade4..3ce1cc1 100644
--- a/animism-align/frontend/app/views/viewer/sections/viewer.sections.list.js
+++ b/animism-align/frontend/app/views/viewer/sections/viewer.sections.list.js
@@ -7,6 +7,8 @@ import { timestamp } from 'app/utils'
 import { thumbnailURL, sectionProgressPercentage } from 'app/utils/annotation.utils'
 import { SpeakerIcon } from '../nav/viewer.icons'
 
+const SECTION_WIDTH = 13 * 16
+
 class ViewerSectionsList extends Component {
   constructor(props) {
     super(props)
@@ -14,9 +16,18 @@ class ViewerSectionsList extends Component {
     this.handleWheel = this.handleWheel.bind(this)
   }
   shouldComponentUpdate(nextProps) {
+    if (this.props.currentSection !== nextProps.currentSection) {
+      this.scrollToSection(nextProps.currentSection)
+    }
     if (nextProps.nav !== this.props.nav) return true
     return nextProps.nav
   }
+  scrollToSection(section) {
+    const dx = section.index * SECTION_WIDTH
+    setTimeout(() => {
+      this.scrollRef.current.scrollTo(dx, 0)
+    }, 500)
+  }
   handleWheel(e) {
     let delta = Math.abs(e.deltaY) > Math.abs(e.deltaX) ? e.deltaY : e.deltaX
     this.scrollRef.current.scrollLeft += delta