diff options
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, } |