video modal mostly working

4 files changed, 39 insertions, 13 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 d365c9c..00851be 100644
--- a/animism-align/frontend/app/views/viewer/nav/eflux.chrome.js
+++ b/animism-align/frontend/app/views/viewer/nav/eflux.chrome.js
@@ -24,12 +24,33 @@ class EfluxChrome extends Component {
     started: false,
     playMessage: PLAY_MESSAGES.not_started,
   }
+  constructor(props) {
+    super(props)
+    this.handleToggle = this.handleToggle.bind(this)
+    this.handleClose = this.handleClose.bind(this)
+  }
   handleMouseEnter(category) {
     this.setState({ [category]: true })
   }
   handleMouseLeave(category) {
     this.setState({ [category]: false })
   }
+  handleToggle() {
+    if (this.props.playing) {
+      actions.audio.pause()
+    } else {
+      actions.viewer.playFromClick()
+    }
+  }
+  handleClose() {
+    if (this.props.videoModalOpen) {
+      actions.viewer.closeVideoModal()
+    } else {
+      actions.viewer.toggleFullscreenVisible(false)
+      actions.audio.pause()
+    }
+    this.handleMouseLeave('close')
+  }
   componentDidUpdate(prevProps) {
     if (this.props.playing !== prevProps.playing) {
       if (!this.state.started) {
@@ -61,7 +82,8 @@ class EfluxChrome extends Component {
       playing, transcriptOpen,
       isFullscreen, fullscreenVisible, isFullscreenSingleton,
       growlOpen, growlMessage,
-      atEndOfSection, currentSection
+      atEndOfSection, currentSection,
+      videoModalOpen
     } = this.props
     let className = "eflux-header"
     if (navStyle) className += ' ' + navStyle
@@ -69,7 +91,7 @@ class EfluxChrome extends Component {
     if (transcriptOpen) className += ' transcript-open'
     if (isFullscreen) className += ' is-fullscreen'
     // console.log(isFullscreen, fullscreenVisible, isFullscreenSingleton)
-    const fullscreenWantsCloseButton = isFullscreen && fullscreenVisible && !isFullscreenSingleton
+    const fullscreenWantsCloseButton = (isFullscreen && fullscreenVisible && !isFullscreenSingleton) || videoModalOpen
     return (
       <div className={className}>
         <div className="eflux-gradient" />
@@ -92,7 +114,7 @@ class EfluxChrome extends Component {
             onMouseEnter={() => this.handleMouseEnter('play')}
             onMouseLeave={() => this.handleMouseLeave('play')}
           >
-            <PlayButton playing={playing} />
+            <PlayButton playing={playing} onClick={this.handleToggle} />
           </span>
           <div
             className="transcript-icon"
@@ -108,7 +130,7 @@ class EfluxChrome extends Component {
           ? "growl-tooltip tooltip-close hover"
           : "growl-tooltip tooltip-close"
         }>
-          {'Close fullscreen player'}
+          {videoModalOpen ? 'Close video' : 'Close fullscreen player'}
         </div>
         <div className={
           this.state.eflux
@@ -142,11 +164,7 @@ class EfluxChrome extends Component {
         className="fullscreen-close"
         onMouseEnter={() => this.handleMouseEnter('close')}
         onMouseLeave={() => this.handleMouseLeave('close')}
-        onClick={() => {
-          actions.viewer.toggleFullscreenVisible(false)
-          actions.audio.pause()
-          this.handleMouseLeave('close')
-        }}
+        onClick={this.handleClose}
       >
         {EfluxClose}
       </div>
@@ -166,6 +184,7 @@ const mapStateToProps = state => ({
   isFullscreen: state.viewer.isFullscreen,
   fullscreenVisible: state.viewer.fullscreenVisible,
   isFullscreenSingleton: state.viewer.isFullscreenSingleton,
+  videoModalOpen: state.viewer.videoModal.open,
 })
 
 export default connect(mapStateToProps)(EfluxChrome)
diff --git a/animism-align/frontend/app/views/viewer/nav/eflux.css b/animism-align/frontend/app/views/viewer/nav/eflux.css
index 3c464ae..2670518 100644
--- a/animism-align/frontend/app/views/viewer/nav/eflux.css
+++ b/animism-align/frontend/app/views/viewer/nav/eflux.css
@@ -128,6 +128,7 @@
   padding: 0.75rem;
   text-align: center;
   pointer-events: none;
+  user-select: none;
 }
 .growl-tooltip.tooltip-eflux {
   left: 1.8rem;
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 33f2d58..0f829dd 100644
--- a/animism-align/frontend/app/views/viewer/nav/nav.parent.js
+++ b/animism-align/frontend/app/views/viewer/nav/nav.parent.js
@@ -74,7 +74,7 @@ class NavParent extends Component {
     e && e.stopPropagation()
     if (isMobile) {
       actions.viewer.toggleComponent('nav')
-    } else {
+    } else if (!this.props.videoModal.open) {
       // console.log('>> CLICK NAV')
       // actions.viewer.toggleComponent('nav')
       const percent = (e.pageX / this.navbarRef.current.offsetWidth)
@@ -115,7 +115,7 @@ class NavParent extends Component {
     let containerClassName = "viewer-nav " + viewer.navStyle
     let navClassName = 'nav-row main-nav'
     if (this.state.hoveringNav || !started) containerClassName += ' hovering-nav'
-    if ((this.state.hoveringNext || (viewer.atEndOfSection && !playing)) && !viewer.nav && viewer.nextSection) containerClassName += ' hovering-next'
+    if ((this.state.hoveringNext || (viewer.atEndOfSection && !playing && !viewer.videoModal.open)) && !viewer.nav && viewer.nextSection) containerClassName += ' hovering-next'
     return (
       <div ref={this.navbarRef} className={containerClassName} onMouseMove={this.handleMouseMove} onMouseLeave={this.handleMouseLeave}>
         <div className={navClassName} onClick={this.handleNavBarClick}>
diff --git a/animism-align/frontend/app/views/viewer/nav/viewer.icons.js b/animism-align/frontend/app/views/viewer/nav/viewer.icons.js
index 31910b7..95be8b6 100644
--- a/animism-align/frontend/app/views/viewer/nav/viewer.icons.js
+++ b/animism-align/frontend/app/views/viewer/nav/viewer.icons.js
@@ -67,13 +67,19 @@ export const PauseIcon = (
   </svg>
 )
 
-export const PlayButton = ({ playing }) => {
+export const PlayButton = ({ playing, onClick }) => {
   return (
     <div
       className={playing ? 'playToggle playing' : 'playToggle paused'}
       onClick={e => {
         e && e.stopPropagation()
-        playing ? actions.audio.pause() : actions.viewer.playFromClick()
+        if (onClick) {
+          onClick(playing)
+        } else if (playing) {
+          actions.audio.pause()
+        } else {
+          actions.viewer.playFromClick()
+        }
       }}
     >
       {playing ? PauseIcon : PlayIcon}