1 files changed, 28 insertions, 9 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)