From 810d8108cab099457a08b139216db7cfabe67851 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Thu, 5 Nov 2020 16:57:33 +0100
Subject: fix scrubber, next hover. much nicer transitions when seeking

---
 .../frontend/app/views/viewer/nav/nav.parent.js          | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

(limited to 'animism-align/frontend/app/views/viewer/nav/nav.parent.js')

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"
-- 
cgit v1.2.3-70-g09d2