fix buttons in nav while fullscreen video is open

3 files changed, 20 insertions, 14 deletions

diff --git a/animism-align/frontend/app/views/viewer/nav/eflux.chrome.js b/animism-align/frontend/app/views/viewer/nav/eflux.chrome.js
index 00851be..5f26e21 100644
--- a/animism-align/frontend/app/views/viewer/nav/eflux.chrome.js
+++ b/animism-align/frontend/app/views/viewer/nav/eflux.chrome.js
@@ -50,6 +50,7 @@ class EfluxChrome extends Component {
       actions.audio.pause()
     }
     this.handleMouseLeave('close')
+    this.handleMouseLeave('eflux')
   }
   componentDidUpdate(prevProps) {
     if (this.props.playing !== prevProps.playing) {
@@ -110,12 +111,14 @@ class EfluxChrome extends Component {
         {fullscreenWantsCloseButton && isHandheld && this.renderCloseButton()}
         <div className="eflux-nav">
           {fullscreenWantsCloseButton && !isHandheld && this.renderCloseButton()}
-          <span
-            onMouseEnter={() => this.handleMouseEnter('play')}
-            onMouseLeave={() => this.handleMouseLeave('play')}
-          >
-            <PlayButton playing={playing} onClick={this.handleToggle} />
-          </span>
+          {!videoModalOpen && (
+            <span
+              onMouseEnter={() => this.handleMouseEnter('play')}
+              onMouseLeave={() => this.handleMouseLeave('play')}
+            >
+              <PlayButton playing={playing} onClick={this.handleToggle} />
+            </span>
+          )}
           <div
             className="transcript-icon"
             onMouseEnter={() => this.handleMouseEnter('transcript')}
@@ -130,7 +133,7 @@ class EfluxChrome extends Component {
           ? "growl-tooltip tooltip-close hover"
           : "growl-tooltip tooltip-close"
         }>
-          {videoModalOpen ? 'Close video' : 'Close fullscreen player'}
+          {'Close fullscreen player'}
         </div>
         <div className={
           this.state.eflux
@@ -144,7 +147,7 @@ class EfluxChrome extends Component {
           ? "growl-tooltip tooltip-play hover"
           : "growl-tooltip tooltip-play"
         }>
-          {this.state.playMessage}
+          {videoModalOpen ? 'Close video' : this.state.playMessage}
         </div>
         <div className={
             this.state.transcript
@@ -159,11 +162,12 @@ class EfluxChrome extends Component {
     )
   }
   renderCloseButton() {
+    const { videoModalOpen } = this.props
     return (
       <div
         className="fullscreen-close"
-        onMouseEnter={() => this.handleMouseEnter('close')}
-        onMouseLeave={() => this.handleMouseLeave('close')}
+        onMouseEnter={() => this.handleMouseEnter(videoModalOpen ? 'play' : 'close')}
+        onMouseLeave={() => this.handleMouseLeave(videoModalOpen ? 'play' : 'close')}
         onClick={this.handleClose}
       >
         {EfluxClose}
diff --git a/animism-align/frontend/app/views/viewer/nav/eflux.css b/animism-align/frontend/app/views/viewer/nav/eflux.css
index 2670518..8eff441 100644
--- a/animism-align/frontend/app/views/viewer/nav/eflux.css
+++ b/animism-align/frontend/app/views/viewer/nav/eflux.css
@@ -132,7 +132,7 @@
 }
 .growl-tooltip.tooltip-eflux {
   left: 1.8rem;
-  top: 4rem;
+  top: 4.5rem;
   transition: opacity 0.2s, transform 0.2s;
   transform: translateZ(0) translateY(1rem);
   opacity: 0;
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 0f829dd..e59df34 100644
--- a/animism-align/frontend/app/views/viewer/nav/nav.parent.js
+++ b/animism-align/frontend/app/views/viewer/nav/nav.parent.js
@@ -152,9 +152,11 @@ class NavParent extends Component {
               <Arrow type={'right'} />
             </span>
           </div>
-          <div className="nav-progress-percentage" style={{
-            width: currentSection ? sectionProgressPercentage(currentSection, play_ts) : 0
-          }} />
+          {!viewer.videoModal.open && (
+            <div className="nav-progress-percentage" style={{
+              width: currentSection ? sectionProgressPercentage(currentSection, play_ts) : 0
+            }} />
+          )}
         </div>
         {viewer.nextSection &&
           <div className="next-section-thumbnail"