diff options
6 files changed, 79 insertions, 48 deletions
diff --git a/animism-align/frontend/app/utils/vendor/vimeo/index.js b/animism-align/frontend/app/utils/vendor/vimeo/index.js index 68363e3..ffa374c 100644 --- a/animism-align/frontend/app/utils/vendor/vimeo/index.js +++ b/animism-align/frontend/app/utils/vendor/vimeo/index.js @@ -1,28 +1,29 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import Player from '@vimeo/player'; -import eventNames from './eventNames'; +import React from 'react' +import PropTypes from 'prop-types' +import Player from '@vimeo/player' +import eventNames from './eventNames' +import oktween from 'app/utils/oktween' class Vimeo extends React.Component { constructor(props) { - super(props); + super(props) - this.refContainer = this.refContainer.bind(this); + this.refContainer = this.refContainer.bind(this) } componentDidMount() { - this.createPlayer(); + this.createPlayer() } componentDidUpdate(prevProps) { // eslint-disable-next-line react/destructuring-assignment - const changes = Object.keys(this.props).filter((name) => this.props[name] !== prevProps[name]); + const changes = Object.keys(this.props).filter((name) => this.props[name] !== prevProps[name]) - this.updateProps(changes); + this.updateProps(changes) } componentWillUnmount() { - this.player.destroy(); + this.player.destroy() } /** @@ -45,7 +46,7 @@ class Vimeo extends React.Component { muted: this.props.muted, background: this.props.background, responsive: this.props.responsive, - }; + } /* eslint-enable react/destructuring-assignment */ } @@ -53,34 +54,35 @@ class Vimeo extends React.Component { * @private */ updateProps(propNames) { - const { player } = this; + const { player } = this propNames.forEach((name) => { // eslint-disable-next-line react/destructuring-assignment - const value = this.props[name]; + const value = this.props[name] switch (name) { case 'autopause': - player.setAutopause(value); - break; + player.setAutopause(value) + break case 'color': - player.setColor(value); - break; + player.setColor(value) + break case 'loop': - player.setLoop(value); - break; + player.setLoop(value) + break case 'volume': - player.setVolume(value); - break; + player.setVolume(value) + break case 'paused': player.getPaused().then((paused) => { if (value && !paused) { - return player.pause(); + return player.pause() } if (!value && paused) { - return player.play(); + return player.play() } - return null; - }); - break; + return null + }) + break + case 'seek': player.setCurrentTime(value).then(function(seconds) { }).catch(function(error) { @@ -92,31 +94,56 @@ class Vimeo extends React.Component { // some other error occurred break } - }); + }) + player.element[name] = value + break + case 'width': + player.element[name] = value + break case 'height': - player.element[name] = value; - break; + player.element[name] = value + break + + case 'fadeOut': + if (this.props.muted || !value || this.fadeOutTween) return + console.log('fade out audio') + this.fadeOutTween = oktween.add({ + from: { volume: 1.0 }, + to: { volume: 0.0 }, + duration: value, + easing: oktween.easing.quad_in_out, + update: obj => { + console.log(obj.volume) + player.setVolume(obj.volume) + }, + finished: () => { + player.setVolume(0.0) + this.fadeOutTween = null + } + }) + break + case 'video': if (value) { - const { start } = this.props; - const loaded = player.loadVideo(value); + const { start } = this.props + const loaded = player.loadVideo(value) // Set the start time only when loading a new video. // It seems like this has to be done after the video has loaded, else it just starts at // the beginning! if (typeof start === 'number') { loaded.then(() => { - player.setCurrentTime(start); - }); + player.setCurrentTime(start) + }) } } else { - player.unload(); + player.unload() } - break; + break default: // Nothing } - }); + }) } /** 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' |