better nav

3 files changed, 19 insertions, 7 deletions

diff --git a/animism-align/frontend/app/views/viewer/nav/nav.css b/animism-align/frontend/app/views/viewer/nav/nav.css
index 02e5649..6cab857 100644
--- a/animism-align/frontend/app/views/viewer/nav/nav.css
+++ b/animism-align/frontend/app/views/viewer/nav/nav.css
@@ -25,6 +25,7 @@
   transition: all 0.2s;
   transform: translateZ(0) translateY(0);
   border-top: 1px solid transparent;
+  cursor: pointer;
 }
 .viewer-nav.hovering-nav .main-nav {
   background: black;
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 98598d0..a4c2aee 100644
--- a/animism-align/frontend/app/views/viewer/nav/nav.parent.js
+++ b/animism-align/frontend/app/views/viewer/nav/nav.parent.js
@@ -19,6 +19,7 @@ class NavParent extends Component {
     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.goToNextSection = this.goToNextSection.bind(this)
   }
   handleMouseEnter(){
@@ -34,11 +35,18 @@ class NavParent extends Component {
   }
   handleMouseLeaveNext(){
     this.setState({ hoveringNext: false, suppressHover: true, })
-    setTimeout(() => {
+    clearTimeout(this.timeout)
+    this.timeout = setTimeout(() => {
       this.setState({ suppressHover: false })
     }, 50)
   }
-  goToNextSection() {
+  handleNavBarClick(e) {
+    e && e.stopPropagation()
+    actions.viewer.toggleComponent('nav')
+  }
+  goToNextSection(e) {
+    e && e.preventDefault()
+    e && e.stopPropagation()
     const { viewer } = this.props
     if (viewer.nextSection) {
       actions.viewer.seekToSection(viewer.nextSection)
@@ -54,9 +62,9 @@ class NavParent extends Component {
     if ((this.state.hoveringNext || (viewer.atEndOfSection && !playing)) && !viewer.nav && viewer.nextSection) containerClassName += ' hovering-next'
     return (
       <div className={containerClassName} onMouseLeave={this.handleMouseLeave}>
-        <div className={navClassName}>
+        <div className={navClassName} onClick={this.handleNavBarClick}>
           <div className='nav-section-name' onMouseEnter={this.handleMouseEnter}>
-            <span className="section-link link" onClick={() => actions.viewer.toggleComponent('nav')}>
+            <span className="section-link link">
               <Arrow type={viewer.nav ? 'down' : 'up'} />
               {viewer.currentSection && (
                 viewer.mediaTitle
@@ -72,11 +80,13 @@ class NavParent extends Component {
           <div onMouseEnter={this.handleMouseEnter}>
             <NavPlayer />
           </div>
-          <div className='nav-next'>
+          <div
+            className='nav-next'
+            onMouseEnter={this.handleMouseEnterNext}
+            onClick={this.goToNextSection}
+          >
             <span
               className="next-link link"
-              onMouseEnter={this.handleMouseEnterNext}
-              onClick={this.goToNextSection}
             >
               {viewer.nextSection
                 ? "Next"
diff --git a/animism-align/frontend/app/views/viewer/player/player.transcript.css b/animism-align/frontend/app/views/viewer/player/player.transcript.css
index 1bee462..3a8f61c 100644
--- a/animism-align/frontend/app/views/viewer/player/player.transcript.css
+++ b/animism-align/frontend/app/views/viewer/player/player.transcript.css
@@ -223,6 +223,7 @@
   color: #888;
 }
 .player-transcript .media.video .videoPlayer {
+  position: relative;
   pointer-events: none;
   width: 100%;
   height: calc(100vh - 15rem) !important;