1 files changed, 34 insertions, 11 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 e242e8a..c27947b 100644
--- a/animism-align/frontend/app/views/viewer/nav/nav.parent.js
+++ b/animism-align/frontend/app/views/viewer/nav/nav.parent.js
@@ -9,27 +9,44 @@ import { thumbnailURL } from 'app/utils/annotation.utils'
 
 class NavParent extends Component {
   state = {
-    hovering: false,
+    hoveringNext: false,
+    hoveringNav: false,
     suppressHover: false,
   }
   constructor(props){
     super(props)
-    this.handleMouseLeave = this.handleMouseLeave.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)
   }
   handleMouseEnter(){
     if (this.state.suppressHover) return
-    this.setState({ hovering: true })
+    this.setState({ hoveringNext: false, hoveringNav: true })
+  }
+  handleMouseEnterNext(){
+    if (this.state.suppressHover) return
+    this.setState({ hoveringNext: true, hoveringNav: false })
   }
   handleMouseLeave(){
-    this.setState({ hovering: false, suppressHover: false })
+    this.setState({ hoveringNext: false, hoveringNav: false, suppressHover: false })
+  }
+  handleMouseLeaveNext(){
+    this.setState({ hoveringNext: false, suppressHover: true, })
+    setTimeout(() => {
+      this.setState({ suppressHover: false })
+    }, 50)
   }
   render() {
     const { viewer } = this.props
+    let containerClassName = "viewer-nav " + viewer.navStyle
+    let navClassName = 'nav-row main-nav'
+    if (this.state.hoveringNav) navClassName += ' hovering-nav'
+    if (this.state.hoveringNext) containerClassName += ' hovering-next'
     return (
-      <div className={"viewer-nav " + viewer.navStyle + " " + (this.state.hovering ? 'hovering-next': '')} onMouseLeave={this.handleMouseLeave}>
-        <div className='nav-row main-nav'>
-          <div className='nav-section-name'>
+      <div className={containerClassName} onMouseLeave={this.handleMouseLeave}>
+        <div className={navClassName}>
+          <div className='nav-section-name' onMouseEnter={this.handleMouseEnter}>
             <span className="section-link link" onClick={() => actions.viewer.toggleComponent('nav')}>
               <Arrow type={viewer.nav ? 'down' : 'up'} />
               {viewer.currentSection && 
@@ -41,10 +58,16 @@ class NavParent extends Component {
               }
             </span>
           </div>
-          <NavPlayer />
-          <div className='nav-next' onMouseEnter={this.handleMouseEnter}>
+          <div onMouseEnter={this.handleMouseEnter}>
+            <NavPlayer />
+          </div>
+          <div className='nav-next'>
             {viewer.nextSection &&
-              <span className="next-link link" onClick={() => actions.viewer.seekToSection(viewer.nextSection)}>
+              <span
+                className="next-link link"
+                onMouseEnter={this.handleMouseEnterNext}
+                onClick={() => actions.viewer.seekToSection(viewer.nextSection)}
+              >
                 Next
                 <Arrow type={'right'} />
               </span>
@@ -55,7 +78,7 @@ class NavParent extends Component {
           <div className="next-section-thumbnail"
             onClick={() => {
               actions.viewer.seekToSection(viewer.nextSection)
-              this.setState({ hovering: false, suppressHover: true })
+              this.setState({ hoveringNext: false, hoveringNav: false, suppressHover: true })
             }}
             style={{
             backgroundImage: viewer.nextSection.media.length && 'url(' + thumbnailURL(viewer.nextSection.media[0].media) + ')',