close fullscreen

5 files changed, 19 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 5775b11..e58e2e1 100644
--- a/animism-align/frontend/app/views/viewer/nav/eflux.chrome.js
+++ b/animism-align/frontend/app/views/viewer/nav/eflux.chrome.js
@@ -57,7 +57,8 @@ class EfluxChrome extends Component {
   render() {
     const {
       navStyle, navGradient,
-      playing, transcriptOpen, isFullscreen,
+      playing, transcriptOpen,
+      isFullscreen, fullscreenVisible,
       growlOpen, growlMessage,
       atEndOfSection, currentSection
     } = this.props
@@ -81,11 +82,15 @@ class EfluxChrome extends Component {
           {growlMessage}
         </div>
         <div className="eflux-nav">
-          {isFullscreen &&
+          {isFullscreen && fullscreenVisible &&
             <div
               className="fullscreen-close"
               onMouseEnter={() => this.handleMouseEnter('close')}
               onMouseLeave={() => this.handleMouseLeave('close')}
+              onClick={() => {
+                actions.viewer.toggleFullscreenVisible(false)
+                this.handleMouseLeave('close')
+              }}
             >
               {EfluxClose}
             </div>
@@ -150,6 +155,7 @@ const mapStateToProps = state => ({
   atEndOfSection: state.viewer.atEndOfSection,
   currentSection: state.viewer.currentSection,
   isFullscreen: state.viewer.isFullscreen,
+  fullscreenVisible: state.viewer.fullscreenVisible,
 })
 
 export default connect(mapStateToProps)(EfluxChrome)
diff --git a/animism-align/frontend/app/views/viewer/player/player.fullscreen.css b/animism-align/frontend/app/views/viewer/player/player.fullscreen.css
index 6c62a40..7384d34 100644
--- a/animism-align/frontend/app/views/viewer/player/player.fullscreen.css
+++ b/animism-align/frontend/app/views/viewer/player/player.fullscreen.css
@@ -7,7 +7,7 @@
   overflow: hidden;
   pointer-events: none;
   user-select: none;
-  opacity: 1.0;
+  opacity: 0.0;
 }
 .viewer-fullscreen.active {
   pointer-events: auto;
diff --git a/animism-align/frontend/app/views/viewer/player/player.fullscreen.js b/animism-align/frontend/app/views/viewer/player/player.fullscreen.js
index a4ea7d3..8727313 100644
--- a/animism-align/frontend/app/views/viewer/player/player.fullscreen.js
+++ b/animism-align/frontend/app/views/viewer/player/player.fullscreen.js
@@ -122,11 +122,11 @@ class PlayerFullscreen extends Component {
   }
 
   render() {
-    const { audio, media, currentSection } = this.props
+    const { audio, media, currentSection, fullscreenVisible } = this.props
     const { play_ts, playing } = audio
     const { elements, persist } = this.state
     let className = "viewer-fullscreen";
-    if (elements.length) {
+    if (elements.length && fullscreenVisible) {
       className += " active"
     }
     if (persist) {
@@ -196,6 +196,7 @@ const FirstChild = (props) => {
 const mapStateToProps = state => ({
   currentSection: state.viewer.currentSection,
   isFullscreen: state.viewer.isFullscreen,
+  fullscreenVisible: state.viewer.fullscreenVisible,
   audio: state.audio,
   media: state.media.index,
   timeline: state.viewer.currentSection ? state.viewer.currentSection.fullscreenTimeline : [],
diff --git a/animism-align/frontend/app/views/viewer/viewer.actions.js b/animism-align/frontend/app/views/viewer/viewer.actions.js
index c1136e7..def0e54 100644
--- a/animism-align/frontend/app/views/viewer/viewer.actions.js
+++ b/animism-align/frontend/app/views/viewer/viewer.actions.js
@@ -313,6 +313,10 @@ export const updateFullscreenStatus = (value, persist) => dispatch => {
   dispatch({ type: types.viewer.toggle_component, key: 'isFullscreenPersist', value: persist })
 }
 
+export const toggleFullscreenVisible = value => dispatch => {
+  dispatch({ type: types.viewer.toggle_component, key: 'fullscreenVisible', value: value })
+}
+
 export const toggleComponent = key => dispatch => {
   hideNavElementsNotMatchedBy(key)(dispatch)
   const state = store.getState().viewer
diff --git a/animism-align/frontend/app/views/viewer/viewer.reducer.js b/animism-align/frontend/app/views/viewer/viewer.reducer.js
index 1011d4e..efb374f 100644
--- a/animism-align/frontend/app/views/viewer/viewer.reducer.js
+++ b/animism-align/frontend/app/views/viewer/viewer.reducer.js
@@ -26,6 +26,7 @@ const initialState = {
   onlyEnableFirstSection: isHandheld,
   isFullscreen: false,
   isFullscreenPersist: false,
+  fullscreenVisible: true,
 
   /* footnotes */
   footnoteList: [],
@@ -79,6 +80,7 @@ export default function viewerReducer(state = initialState, action) {
       return {
         ...state,
         growlOpen: false,
+        fullscreenVisible: true,
       }
 
     case types.viewer.open_growl:
@@ -107,6 +109,7 @@ export default function viewerReducer(state = initialState, action) {
         currentSection: action.currentSection,
         nextSection: action.nextSection,
         navStyle: action.currentSection.color,
+        fullscreenVisible: true,
         atEndOfSection: false,
       }