close button on fullscreen content

3 files changed, 50 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 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)
diff --git a/animism-align/frontend/app/views/viewer/nav/eflux.css b/animism-align/frontend/app/views/viewer/nav/eflux.css
index eb7f973..71ff350 100644
--- a/animism-align/frontend/app/views/viewer/nav/eflux.css
+++ b/animism-align/frontend/app/views/viewer/nav/eflux.css
@@ -43,6 +43,7 @@
   top: 1rem;
   right: 1.75rem;
 }
+.eflux-nav .fullscreen-close,
 .eflux-nav .playToggle,
 .eflux-nav .transcript-icon {
   display: flex;
@@ -56,6 +57,7 @@
   margin-left: 1rem;
   cursor: pointer;
 }
+.eflux-nav .fullscreen-close:hover,
 .eflux-nav .playToggle:hover,
 .eflux-nav .transcript-icon:hover {
   background: #ddd;
@@ -71,6 +73,9 @@
 .eflux-nav .playToggle.paused svg {
   margin-left: 2px;
 }
+.eflux-nav .fullscreen-close svg {
+  width: 1rem;
+}
 
 .eflux-nav svg path {
   fill: #000;
@@ -94,10 +99,12 @@
   stroke: #fff;
 }
 
+.black .eflux-nav .fullscreen-close,
 .black .eflux-nav .playToggle,
 .black .eflux-nav .transcript-icon {
   background: #222;
 }
+.black .eflux-nav .fullscreen-close:hover,
 .black .eflux-nav .playToggle:hover,
 .black .eflux-nav .transcript-icon:hover {
   background: #444;
@@ -126,8 +133,15 @@
   transform: translateZ(0) translateY(1rem);
   opacity: 0;
 }
+.growl-tooltip.tooltip-close {
+  right: 10.0rem;
+  top: 5.25rem;
+  transition: opacity 0.2s, transform 0.2s;
+  transform: translateZ(0) translateY(1rem);
+  opacity: 0;
+}
 .growl-tooltip.tooltip-play {
-  right: 7.0rem;
+  right: 6.0rem;
   top: 5.25rem;
   transition: opacity 0.2s, transform 0.2s;
   transform: translateZ(0) translateY(1rem);
@@ -141,6 +155,7 @@
   opacity: 0;
   cursor: pointer;
 }
+.growl-tooltip.tooltip-close.hover,
 .growl-tooltip.tooltip-eflux.hover,
 .growl-tooltip.tooltip-play.hover,
 .growl-tooltip.tooltip-transcript.hover {
diff --git a/animism-align/frontend/app/views/viewer/viewer.container.js b/animism-align/frontend/app/views/viewer/viewer.container.js
index f828c3e..0f9a5e5 100644
--- a/animism-align/frontend/app/views/viewer/viewer.container.js
+++ b/animism-align/frontend/app/views/viewer/viewer.container.js
@@ -65,9 +65,6 @@ class ViewerContainer extends Component {
     if (viewer.onlyEnableFirstSection) {
       className += ' first-section-only'
     }
-    if (viewer.isFullscreen) {
-      className += ' is-fullscreen'
-    }
     return (
       <div>
         <div className='viewer-parent'>