close button on fullscreen content

1 files changed, 34 insertions, 5 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 f2f02d2..b9fe340 100644
--- a/animism-align/frontend/app/views/viewer/nav/eflux.chrome.js
+++ b/animism-align/frontend/app/views/viewer/nav/eflux.chrome.js
@@ -19,6 +19,7 @@ class EfluxChrome extends Component {
     eflux: false,
     play: false,
     transcript: false,
+    close: false,
     started: false,
     playMessage: PLAY_MESSAGES.not_started,
   }
@@ -50,7 +51,7 @@ class EfluxChrome extends Component {
   render() {
     const {
       navStyle, navGradient,
-      playing, transcriptOpen,
+      playing, transcriptOpen, isFullscreen,
       growlOpen, growlMessage,
       atEndOfSection, currentSection
     } = this.props
@@ -75,6 +76,15 @@ class EfluxChrome extends Component {
           {growlMessage}
         </div>
         <div className="eflux-nav">
+          {isFullscreen &&
+            <div
+              className="fullscreen-close"
+              onMouseEnter={() => this.handleMouseEnter('close')}
+              onMouseLeave={() => this.handleMouseLeave('close')}
+            >
+              {EfluxClose}
+            </div>
+          }
           <span
             onMouseEnter={() => this.handleMouseEnter('play')}
             onMouseLeave={() => this.handleMouseLeave('play')}
@@ -90,14 +100,32 @@ class EfluxChrome extends Component {
             {TranscriptIcon}
           </div>
         </div>
-        <div className={this.state.eflux ? "growl-tooltip tooltip-eflux hover" : "growl-tooltip tooltip-eflux"}>
+        <div className={
+          this.state.close
+          ? "growl-tooltip tooltip-close hover"
+          : "growl-tooltip tooltip-close"
+        }>
+          {'Close fullscreen player'}
+        </div>
+        <div className={
+          this.state.eflux
+          ? "growl-tooltip tooltip-eflux hover"
+          : "growl-tooltip tooltip-eflux"
+        }>
           {'Back to e-flux'}
         </div>
-        <div className={(!showingTranscriptTooltip && this.state.play) ? "growl-tooltip tooltip-play hover" : "growl-tooltip tooltip-play"}>
+        <div className={
+          (!showingTranscriptTooltip && this.state.play)
+          ? "growl-tooltip tooltip-play hover"
+          : "growl-tooltip tooltip-play"
+        }>
           {this.state.playMessage}
         </div>
-        <div
-          className={showingTranscriptTooltip ? "growl-tooltip tooltip-transcript hover" : "growl-tooltip tooltip-transcript"}
+        <div className={
+            showingTranscriptTooltip
+            ? "growl-tooltip tooltip-transcript hover"
+            : "growl-tooltip tooltip-transcript"
+          }
           onClick={() => actions.viewer.toggleComponent('transcript')}
         >
           {'Read the Transcript'}
@@ -116,6 +144,7 @@ const mapStateToProps = state => ({
   growlMessage: state.viewer.growlMessage,
   atEndOfSection: state.viewer.atEndOfSection,
   currentSection: state.viewer.currentSection,
+  isFullscreen: state.viewer.isFullscreen,
 })
 
 export default connect(mapStateToProps)(EfluxChrome)