diff options
Diffstat (limited to 'animism-align/frontend/app/views/viewer')
4 files changed, 24 insertions, 11 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 bc7e4e7..d2462b2 100644 --- a/animism-align/frontend/app/views/viewer/nav/eflux.chrome.js +++ b/animism-align/frontend/app/views/viewer/nav/eflux.chrome.js @@ -59,7 +59,7 @@ class EfluxChrome extends Component { const { navStyle, navGradient, playing, transcriptOpen, - isFullscreen, fullscreenVisible, + isFullscreen, fullscreenVisible, isFullscreenSingleton, growlOpen, growlMessage, atEndOfSection, currentSection } = this.props @@ -68,6 +68,7 @@ class EfluxChrome extends Component { if (navGradient) className += ' gradient' if (transcriptOpen) className += ' transcript-open' if (isFullscreen) className += ' is-fullscreen' + const fullscreenWantsCloseButton = isFullscreen && fullscreenVisible && !isFullscreenSingleton return ( <div className={className}> <div className="eflux-gradient" /> @@ -83,9 +84,9 @@ class EfluxChrome extends Component { <div className={growlOpen ? "growl-tooltip growl-message open" : "growl-tooltip growl-message"}> {growlMessage} </div> - {isFullscreen && fullscreenVisible && isHandheld && this.renderCloseButton()} + {fullscreenWantsCloseButton && isHandheld && this.renderCloseButton()} <div className="eflux-nav"> - {isFullscreen && fullscreenVisible && !isHandheld && this.renderCloseButton()} + {fullscreenWantsCloseButton && !isHandheld && this.renderCloseButton()} <span onMouseEnter={() => this.handleMouseEnter('play')} onMouseLeave={() => this.handleMouseLeave('play')} 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 cf3c697..6faa60b 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,11 @@ overflow: hidden; pointer-events: none; user-select: none; - opacity: 0.0; + opacity: 1.0; + transition: opacity 0.5s; +} +.viewer-fullscreen.seeked { + transition: opacity 0.0s; } .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 04421de..a1cc235 100644 --- a/animism-align/frontend/app/views/viewer/player/player.fullscreen.js +++ b/animism-align/frontend/app/views/viewer/player/player.fullscreen.js @@ -13,6 +13,8 @@ class PlayerFullscreen extends Component { state = { elements: [], video: false, + isSingleton: false, + atChapterStart: false, } componentDidMount() { @@ -33,11 +35,12 @@ class PlayerFullscreen extends Component { let { play_ts, seek_ts } = audio play_ts = clamp(play_ts, currentSection.start_ts, currentSection.end_ts) - let elements; + let elements, isSingleton = false, atChapterStart = false // console.log(timeline) // some classes can be singleton media for an entire chapter, like vitrines if (timeline.length === 1 && timeline[0].type === 'vitrine') { elements = timeline + isSingleton = true } else { // get elements at this play position @@ -66,6 +69,7 @@ class PlayerFullscreen extends Component { // also any elements starting at this point should transition immediately, // to prevent flash of the underlying content. if (justSeeked && seekedElements.length) { + atChapterStart = true // console.log(play_ts, seek_ts, 'seeked', seekedElements) elements = seekedElements.map(e => { if (e.start_ts === seek_ts && e.type !== 'curtain') { @@ -113,18 +117,18 @@ class PlayerFullscreen extends Component { actions.viewer.setNavStyle(currentSection.color) actions.viewer.setMediaTitle(null) } - // elements.reverse() - this.setState({ elements, persist }) // if fullscreen mode started or ended... if (!!elements.length !== this.props.isFullscreen) { - actions.viewer.updateFullscreenStatus(!!elements.length, persist) + actions.viewer.updateFullscreenStatus(!!elements.length, persist, isSingleton) } + // elements.reverse() + this.setState({ elements, persist, isSingleton, atChapterStart }) } render() { const { audio, media, currentSection, fullscreenVisible } = this.props const { play_ts, playing } = audio - const { elements, persist } = this.state + const { elements, persist, atChapterStart } = this.state let className = "viewer-fullscreen"; if (elements.length) { className += " active" @@ -135,6 +139,9 @@ class PlayerFullscreen extends Component { if (persist) { className += " persist" } + if (atChapterStart) { + className += " seeked" + } className += playing ? " playing" : " paused" return ( <div className={className}> diff --git a/animism-align/frontend/app/views/viewer/viewer.actions.js b/animism-align/frontend/app/views/viewer/viewer.actions.js index def0e54..0995982 100644 --- a/animism-align/frontend/app/views/viewer/viewer.actions.js +++ b/animism-align/frontend/app/views/viewer/viewer.actions.js @@ -307,10 +307,11 @@ export const toggleNavGradient = value => dispatch => { dispatch({ type: types.viewer.toggle_component, key: 'navGradient', value: value }) } -export const updateFullscreenStatus = (value, persist) => dispatch => { - console.log('fullscreen', value, persist) +export const updateFullscreenStatus = (value, persist, isSingleton) => dispatch => { + console.log('fullscreen', value, persist, isSingleton) dispatch({ type: types.viewer.toggle_component, key: 'isFullscreen', value: value }) dispatch({ type: types.viewer.toggle_component, key: 'isFullscreenPersist', value: persist }) + dispatch({ type: types.viewer.toggle_component, key: 'isFullscreenSingleton', value: isSingleton }) } export const toggleFullscreenVisible = value => dispatch => { |