fix scrubber, next hover. much nicer transitions when seeking

1 files changed, 13 insertions, 3 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 fdad211..00eab26 100644
--- a/animism-align/frontend/app/views/viewer/nav/nav.parent.js
+++ b/animism-align/frontend/app/views/viewer/nav/nav.parent.js
@@ -15,6 +15,7 @@ class NavParent extends Component {
   }
   constructor(props){
     super(props)
+    this.suppressHover = false
     this.handleMouseEnter = this.handleMouseEnter.bind(this)
     this.handleMouseLeave = this.handleMouseLeave.bind(this)
     this.handleMouseEnterNext = this.handleMouseEnterNext.bind(this)
@@ -23,22 +24,30 @@ class NavParent extends Component {
     this.goToNextSection = this.goToNextSection.bind(this)
   }
   handleMouseEnter(){
+    // console.log('mouse enter')
     if (this.state.suppressHover) return
     this.setState({ hoveringNext: false, hoveringNav: true })
   }
   handleMouseEnterNext(){
+    // console.log('mouse enter next', this.state.suppressHover)
     if (this.state.suppressHover) return
     this.setState({ hoveringNext: true, hoveringNav: false })
   }
   handleMouseLeave(){
-    this.setState({ hoveringNext: false, hoveringNav: false, suppressHover: false })
+    // console.log('mouse leave')
+    this.setState({ hoveringNav: false })
+    clearTimeout(this.timeout)
+    this.timeout = setTimeout(() => {
+      this.setState({ hoveringNext: false, suppressHover: false })
+    }, 100)
   }
   handleMouseLeaveNext(){
+    // console.log('mouse leave next')
     this.setState({ hoveringNext: false, suppressHover: true, })
     clearTimeout(this.timeout)
     this.timeout = setTimeout(() => {
       this.setState({ suppressHover: false })
-    }, 50)
+    }, 100)
   }
   handleNavBarClick(e) {
     e && e.stopPropagation()
@@ -85,11 +94,12 @@ class NavParent extends Component {
           </div>
           <div
             className='nav-next'
-            onMouseEnter={this.handleMouseEnterNext}
+            onMouseEnter={this.handleMouseEnter}
             onClick={this.goToNextSection}
           >
             <span
               className="next-link link"
+              onMouseEnter={this.handleMouseEnterNext}
             >
               {viewer.nextSection
                 ? "Next"