diff options
| -rw-r--r-- | animism-align/frontend/app/views/viewer/sections/viewer.sections.list.js | 11 |
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 |