diff options
Diffstat (limited to 'animism-align/frontend/app/views')
5 files changed, 16 insertions, 12 deletions
diff --git a/animism-align/frontend/app/views/viewer/nav/eflux.css b/animism-align/frontend/app/views/viewer/nav/eflux.css index 65e9db2..d62a3af 100644 --- a/animism-align/frontend/app/views/viewer/nav/eflux.css +++ b/animism-align/frontend/app/views/viewer/nav/eflux.css @@ -88,21 +88,21 @@ } .growl-tooltip.tooltip-eflux { left: 1.8rem; - top: 4rem; + top: 5rem; transition: opacity 0.2s, transform 0.2s; transform: translateZ(0) translateY(1rem); opacity: 0; } .growl-tooltip.tooltip-play { right: 6.5rem; - top: 4rem; + top: 6rem; transition: opacity 0.2s, transform 0.2s; transform: translateZ(0) translateY(1rem); opacity: 0; } .growl-tooltip.tooltip-transcript { right: 2.2rem; - top: 4rem; + top: 6rem; transition: opacity 0.2s, transform 0.2s; transform: translateZ(0) translateY(1rem); opacity: 0; diff --git a/animism-align/frontend/app/views/viewer/nav/nav.parent.js b/animism-align/frontend/app/views/viewer/nav/nav.parent.js index 554f5bd..0c17c7d 100644 --- a/animism-align/frontend/app/views/viewer/nav/nav.parent.js +++ b/animism-align/frontend/app/views/viewer/nav/nav.parent.js @@ -15,7 +15,6 @@ class NavParent extends Component { } constructor(props){ super(props) - this.suppressHover = false this.handleMouseMove = this.handleMouseMove.bind(this) this.handleMouseEnter = this.handleMouseEnter.bind(this) this.handleMouseLeave = this.handleMouseLeave.bind(this) diff --git a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.video.js b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.video.js index adbc22a..84cf59e 100644 --- a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.video.js +++ b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.video.js @@ -22,6 +22,8 @@ class FullscreenVideo extends Component { scrubbing: false, // whether or not the video is ready and displaying an image ready: false, + // trigger an audio fade-out + fadeOut: false, } constructor(props) { super(props) @@ -49,13 +51,13 @@ class FullscreenVideo extends Component { this.setState({ seek }) } // if we started leaving the element... - if (this.props.isLeaving && this.props.isLeaving !== prevProps.isLeaving && element.settings.unmuted) { - this.fadeOutAudio() + if (element.fadeOutDuration + && !this.state.fadeOut + && element.settings.unmuted) { + console.log("fade out audio", this.props.fadeOutDuration) + setTimeout(() => this.setState({ fadeOut: true }), 0) } } - fadeOutAudio() { - console.log("fade out audio", this.props.fadeOutDuration) - } handlePlay() { this.setState({ ready: true }) } @@ -77,7 +79,7 @@ class FullscreenVideo extends Component { render() { const { element, media, transitionDuration, play_ts, playing } = this.props - const { duration, seconds, ready } = this.state + const { duration, seconds, ready, fadeOut } = this.state const { color } = element const item = media.lookup[element.settings.media_id] const style = { @@ -109,6 +111,7 @@ class FullscreenVideo extends Component { responsive={true} controls={false} byline={false} + fadeOut={fadeOut && this.props.fadeOutDuration} onPlay={this.handlePlay} onPause={this.handlePause} onTimeUpdate={this.handleTimeUpdate} 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 a3fcd68..28e90c0 100644 --- a/animism-align/frontend/app/views/viewer/player/player.fullscreen.css +++ b/animism-align/frontend/app/views/viewer/player/player.fullscreen.css @@ -70,7 +70,7 @@ iframe { pointer-events: none; width: 100%; height: calc(100vh) !important; - padding: 0 0 3rem 0; + padding: 3rem 0 3rem 0; transition: opacity 0.5s; } 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 4da9a3b..076b7ac 100644 --- a/animism-align/frontend/app/views/viewer/player/player.fullscreen.js +++ b/animism-align/frontend/app/views/viewer/player/player.fullscreen.js @@ -107,8 +107,10 @@ class PlayerFullscreen extends Component { const FullscreenComponent = fullscreenComponents[type] fadeInDuration *= 1000 fadeOutDuration *= 1000 - if (!isEntering && !isLeaving) { + if (!isEntering) { fadeInDuration = 0 + } + if (!isLeaving) { fadeOutDuration = 0 } const transitionDuration = (isEntering ? fadeInDuration : fadeOutDuration) + 'ms' |