scrubber when nav is open. dont shrink content?

3 files changed, 18 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 00eab26..554f5bd 100644
--- a/animism-align/frontend/app/views/viewer/nav/nav.parent.js
+++ b/animism-align/frontend/app/views/viewer/nav/nav.parent.js
@@ -16,6 +16,7 @@ class NavParent extends Component {
   constructor(props){
     super(props)
     this.suppressHover = false
+    this.handleMouseMove = this.handleMouseMove.bind(this)
     this.handleMouseEnter = this.handleMouseEnter.bind(this)
     this.handleMouseLeave = this.handleMouseLeave.bind(this)
     this.handleMouseEnterNext = this.handleMouseEnterNext.bind(this)
@@ -54,6 +55,9 @@ class NavParent extends Component {
     actions.viewer.toggleComponent('nav')
     console.log('>> CLICK NAV')
   }
+  handleMouseMove(e) {
+    e && e.stopPropagation()
+  }
   goToNextSection(e) {
     e && e.preventDefault()
     e && e.stopPropagation()
@@ -73,7 +77,7 @@ class NavParent extends Component {
     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} onMouseLeave={this.handleMouseLeave}>
+      <div 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">
diff --git a/animism-align/frontend/app/views/viewer/player/components.media/media.css b/animism-align/frontend/app/views/viewer/player/components.media/media.css
index ffb3988..5f4b84f 100644
--- a/animism-align/frontend/app/views/viewer/player/components.media/media.css
+++ b/animism-align/frontend/app/views/viewer/player/components.media/media.css
@@ -329,10 +329,14 @@
   display: flex;
   align-items: center;
   opacity: 0.0;
-  transition: opacity 0.2s;
+  transition: opacity 0.2s, transform 0.2s;
+  transform: translateZ(0);
   font-size: 1rem;
   z-index: 1;
 }
+.nav-open .video-scrubber {
+  transform: translateZ(0) translateY(-22rem);
+}
 .video-scrubber.show {
   opacity: 1.0;
 }
diff --git a/animism-align/frontend/app/views/viewer/sections/viewer.sections.js b/animism-align/frontend/app/views/viewer/sections/viewer.sections.js
index a2f906c..76c7b03 100644
--- a/animism-align/frontend/app/views/viewer/sections/viewer.sections.js
+++ b/animism-align/frontend/app/views/viewer/sections/viewer.sections.js
@@ -4,9 +4,16 @@ import ViewerSectionsNav from './viewer.sections.nav'
 import ViewerSectionsList from './viewer.sections.list'
 
 export default class ViewerSections extends Component {
+  constructor(props) {
+    super(props)
+    this.handleMouseMove = this.handleMouseMove.bind(this)
+  }
+  handleMouseMove(e) {
+    e && e.stopPropagation()
+  }
   render() {
     return (
-      <div className="viewer-sections">
+      <div className="viewer-sections" onMouseMove={this.handleMouseMove}>
         <ViewerSectionsList />
         <ViewerSectionsNav />
       </div>