clicking the nav bar jumps to that point

1 files changed, 23 insertions, 10 deletions

diff --git a/animism-align/frontend/app/views/viewer/nav/nav.parent.js b/animism-align/frontend/app/views/viewer/nav/nav.parent.js
index 5f1e173..6fc4b07 100644
--- a/animism-align/frontend/app/views/viewer/nav/nav.parent.js
+++ b/animism-align/frontend/app/views/viewer/nav/nav.parent.js
@@ -5,7 +5,7 @@ import actions from 'app/actions'
 import { ROMAN_NUMERALS } from 'app/constants'
 import { Arrow } from './viewer.icons'
 import NavPlayer from './nav.player'
-import { thumbnailURL, sectionProgressPercentage } from 'app/utils/annotation.utils'
+import { thumbnailURL, sectionProgressPercentage, sectionOffsetSeconds } from 'app/utils/annotation.utils'
 
 class NavParent extends Component {
   state = {
@@ -15,12 +15,14 @@ class NavParent extends Component {
   }
   constructor(props){
     super(props)
+    this.navbarRef = React.createRef()
     this.handleMouseMove = this.handleMouseMove.bind(this)
     this.handleMouseEnter = this.handleMouseEnter.bind(this)
     this.handleMouseLeave = this.handleMouseLeave.bind(this)
     this.handleMouseEnterNext = this.handleMouseEnterNext.bind(this)
     this.handleMouseLeaveNext = this.handleMouseLeaveNext.bind(this)
     this.handleNavBarClick = this.handleNavBarClick.bind(this)
+    this.handleSectionLinkClick = this.handleSectionLinkClick.bind(this)
     this.goToNextSection = this.goToNextSection.bind(this)
   }
   handleMouseEnter(){
@@ -51,8 +53,18 @@ class NavParent extends Component {
   }
   handleNavBarClick(e) {
     e && e.stopPropagation()
-    actions.viewer.toggleComponent('nav')
     // console.log('>> CLICK NAV')
+    // actions.viewer.toggleComponent('nav')
+    const percent = (e.pageX / this.navbarRef.current.offsetWidth)
+    const seconds = sectionOffsetSeconds(this.props.currentSection, percent)
+    console.log(e.pageX, this.navbarRef.current.offsetWidth, percent)
+    console.log(this.props.currentSection)
+    console.log(">>", seconds)
+    actions.viewer.seekToTimestamp(seconds)
+  }
+  handleSectionLinkClick(e) {
+    e && e.stopPropagation()
+    actions.viewer.toggleComponent('nav')
   }
   handleMouseMove(e) {
     e && e.stopPropagation()
@@ -71,24 +83,24 @@ class NavParent extends Component {
     this.setState({ hoveringNext: false, hoveringNav: false, suppressHover: true })
   }
   render() {
-    const { viewer, play_ts, started, playing } = this.props
+    const { viewer, currentSection, play_ts, started, playing } = this.props
     let containerClassName = "viewer-nav " + viewer.navStyle
     let navClassName = 'nav-row main-nav'
     if (this.state.hoveringNav || !started) containerClassName += ' hovering-nav'
     if ((this.state.hoveringNext || (viewer.atEndOfSection && !playing)) && !viewer.nav && viewer.nextSection) containerClassName += ' hovering-next'
     return (
-      <div className={containerClassName} onMouseMove={this.handleMouseMove} onMouseLeave={this.handleMouseLeave}>
+      <div ref={this.navbarRef} className={containerClassName} onMouseMove={this.handleMouseMove} onMouseLeave={this.handleMouseLeave}>
         <div className={navClassName} onClick={this.handleNavBarClick}>
           <div className='nav-section-name' onMouseEnter={this.handleMouseEnter}>
-            <span className="section-link link">
+            <span className="section-link link" onClick={this.handleSectionLinkClick}>
               <Arrow type={viewer.nav ? 'down' : 'up'} />
-              {viewer.currentSection && (
+              {currentSection && (
                 viewer.mediaTitle
                 ? <span><i>{viewer.mediaTitle}</i></span>
                 : <span>
-                    {ROMAN_NUMERALS[viewer.currentSection.index]}
+                    {ROMAN_NUMERALS[currentSection.index]}
                     {'. '}
-                    {viewer.currentSection.title}
+                    {currentSection.title}
                   </span>
               )}
             </span>
@@ -99,11 +111,11 @@ class NavParent extends Component {
           <div
             className='nav-next'
             onMouseEnter={this.handleMouseEnter}
-            onClick={this.goToNextSection}
           >
             <span
               className="next-link link"
               onMouseEnter={this.handleMouseEnterNext}
+              onClick={this.goToNextSection}
             >
               {viewer.nextSection
                 ? "Next"
@@ -113,7 +125,7 @@ class NavParent extends Component {
             </span>
           </div>
           <div className="nav-progress-percentage" style={{
-            width: viewer.currentSection ? sectionProgressPercentage(viewer.currentSection, play_ts) : 0
+            width: currentSection ? sectionProgressPercentage(currentSection, play_ts) : 0
           }} />
         </div>
         {viewer.nextSection &&
@@ -134,6 +146,7 @@ class NavParent extends Component {
 
 const mapStateToProps = state => ({
   viewer: state.viewer,
+  currentSection: state.viewer.currentSection,
   started: state.audio.started,
   playing: state.audio.playing,
   play_ts: state.audio.play_ts,