diff options
Diffstat (limited to 'animism-align/frontend/app/views/viewer/modals')
| -rw-r--r-- | animism-align/frontend/app/views/viewer/modals/modals.video.css | 43 | ||||
| -rw-r--r-- | animism-align/frontend/app/views/viewer/modals/modals.video.js | 177 |
2 files changed, 113 insertions, 107 deletions
diff --git a/animism-align/frontend/app/views/viewer/modals/modals.video.css b/animism-align/frontend/app/views/viewer/modals/modals.video.css new file mode 100644 index 0000000..090391b --- /dev/null +++ b/animism-align/frontend/app/views/viewer/modals/modals.video.css @@ -0,0 +1,43 @@ +.video-modal { + display: flex; + justify-content: center; + align-items: center; + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + transition: opacity 0.5s; + opacity: 0.0; + pointer-events: none; +} +.video-modal.open { + opacity: 1.0; + pointer-events: auto; +} +.video-modal .video { + width: 100%; + height: 100%; +} +.video-modal .video .videoPlayer { + pointer-events: none; + width: 100%; + height: calc(100vh) !important; + padding: 3rem 0 3rem 0; + transition: opacity 0.5s; +} +.video-modal .video .videoPlayer div { + width: 100%; + height: 100% !important; + padding: 0 !important; +} +.nav-open .video-modal .video-scrubber { + transform: translateZ(0) translateY(3rem); + opacity: 0; + pointer-events: none; +} + +.video-modal-open .nav-player { + opacity: 0; + pointer-events: none; +}
\ No newline at end of file diff --git a/animism-align/frontend/app/views/viewer/modals/modals.video.js b/animism-align/frontend/app/views/viewer/modals/modals.video.js index e94b4c4..b67fc4b 100644 --- a/animism-align/frontend/app/views/viewer/modals/modals.video.js +++ b/animism-align/frontend/app/views/viewer/modals/modals.video.js @@ -4,7 +4,7 @@ import VimeoPlayer from 'app/utils/vendor/vimeo' import actions from 'app/actions' import { timestampToSeconds } from 'app/utils' -import { VideoScrubber, VideoSubtitles } from '../components.media' +import { VideoScrubber, VideoSubtitles } from '../player/components.media' class ModalVideo extends Component { state = { @@ -28,6 +28,8 @@ class ModalVideo extends Component { volume: 1.0, volumeFadeTime: 1000, lastCue: -1, + // play state + playing: false, } constructor(props) { super(props) @@ -35,70 +37,24 @@ class ModalVideo extends Component { this.handlePause = this.handlePause.bind(this) this.handleTimeUpdate = this.handleTimeUpdate.bind(this) this.handleScrub = this.handleScrub.bind(this) + this.handleToggle = this.handleToggle.bind(this) this.handleEnd = this.handleEnd.bind(this) } - componentDidMount() { - const video_start_ts = timestampToSeconds(this.props.element.settings.video_start_ts) || 0.0 - // TODO: here you can add the current play time modulo ... - this.setState({ - seek: video_start_ts, - video_start_ts, - }) - } componentDidUpdate(prevProps) { - // if the play_ts jumped more than a second, seek - const { play_ts, element, currentSection, fadeOutDuration } = this.props - if (Math.abs(play_ts - prevProps.play_ts) > 1.0) { - // handle seek - const { duration, video_start_ts } = this.state - const seek = ((play_ts - element.start_ts) % duration) + video_start_ts - this.setState({ seek }) - } - // console.log(play_ts, currentSection.cues.length, fadeOutDuration, element.settings.unmuted, this.state.fadeOut) - // volume changes - only if unmuted and not already leaving. - if (element.settings.unmuted && !this.state.fadeOut) { - // if we just started leaving the element, fade out the audio - if (fadeOutDuration) { - // console.log("fade out audio", this.props.fadeOutDuration) - setTimeout(() => this.setState({ fadeOut: true }), 0) - } - // otherwise, check if we gotta set the volume based on the position - else if (currentSection.cues.length) { - this.checkCuePosition(play_ts, currentSection.cues) - } - } - } - checkCuePosition(play_ts, cues) { - // const { volume element.settings.unmuted ? volume : 0.0 - const { unmuted } = this.props.element.settings - let volume = unmuted ? 1.0 : 0.0 - let { volumeFadeTime, lastCue } = this.state - // console.log(cues) - cues.some((cue, i) => { - if (cue.start_ts < play_ts) { - lastCue = i - if (cue.settings.volume) { - volume = parseFloat(cue.settings.volume) - volumeFadeTime = timestampToSeconds(cue.settings.duration) * 1000 - // console.log(volume, volumeFadeTime) - return false - } - } - return true - }) - // console.log('last cue', lastCue, volume, volumeFadeTime) - if (lastCue !== this.state.lastCue) { - this.setState({ volume, volumeFadeTime, lastCue }) + if (prevProps.open && !this.props.open) { + setTimeout(() => { + actions.viewer.resetVideoModal() + }, 500) } } handlePlay() { - this.setState({ ready: true }) + this.setState({ ready: true, playing: true }) } handlePause() { - + this.setState({ playing: false }) } handleEnd() { - + this.setState({ playing: false }) } handleTimeUpdate(timing) { if (!this.state.scrubbing || ('scrubbing' in timing)) { @@ -107,80 +63,87 @@ class ModalVideo extends Component { } handleScrub(timing) { // console.log(timing) - this.setState(timing) + this.setState({ + ...timing, + seek: timing.seconds, + }) + } + handleToggle() { + console.log('handle toggle to', !this.state.playing) + this.setState({ playing: !this.state.playing }) } - render() { - const { element, media, transitionDuration, play_ts, playing, cc, playerVolume } = this.props - const { duration, seconds, ready, volume, volumeFadeTime, fadeOut, lastCue } = this.state - const { color } = element - const item = media.lookup[element.settings.media_id] + const { open, media: mediaItem, color, cc, playerVolume } = this.props + const { duration, seconds, ready, volume, volumeFadeTime, playing, fadeOut, lastCue } = this.state + if (!color || !mediaItem) { + return <div /> + } const style = { backgroundColor: color.backgroundColor, color: color.textColor, - transitionDuration, } const playerStyle = { opacity: ready ? 1.0 : 0.0 } - // // console.log(volume, playerVolume) return ( <div - className='fullscreen-element video' + className={open ? 'video-modal open' : 'video-modal'} style={style} > - <div - className='videoPlayer' - style={playerStyle} - > - <VimeoPlayer - video={item.url} - paused={!playing} - autoplay={true} - autopause={false} - muted={!element.settings.unmuted} - loop={!!element.settings.loop} - seek={this.state.seek} - responsive={true} - controls={false} - byline={false} - volume={element.settings.unmuted ? playerVolume : 0.0} - targetVolume={element.settings.unmuted ? volume * playerVolume : 0.0} - volumeFadeTime={volumeFadeTime} - fadeOut={fadeOut && this.props.fadeOutDuration} - onPlay={this.handlePlay} - onPause={this.handlePause} - onTimeUpdate={this.handleTimeUpdate} - onEnd={this.handleEnd} - lastCue={lastCue} + <div className='fullscreen-element video' onClick={this.handleToggle}> + <div + className='videoPlayer' + style={playerStyle} + > + <VimeoPlayer + video={mediaItem.url} + paused={!open || (ready && !playing)} + autoplay={true} + autopause={false} + muted={false} + loop={false} + seek={this.state.seek} + responsive={true} + controls={false} + byline={false} + volume={playerVolume} + targetVolume={playerVolume} + volumeFadeTime={volumeFadeTime} + fadeOut={0} + onPlay={this.handlePlay} + onPause={this.handlePause} + onTimeUpdate={this.handleTimeUpdate} + onEnd={this.handleEnd} + lastCue={lastCue} + /> + </div> + <VideoScrubber + play_ts={seconds} + start_ts={0} + video_start_ts={0} + playing={playing} + duration={duration} + timing={this.state} + mediaItem={mediaItem} + cc={cc} + onScrub={this.handleScrub} + onToggle={this.handleToggle} + scrubMasterAudio={false} + /> + <VideoSubtitles + cc={cc} + play_ts={seconds} + mediaItem={mediaItem} /> </div> - <VideoScrubber - play_ts={play_ts} - start_ts={element.start_ts} - video_start_ts={this.state.video_start_ts} - playing={playing} - duration={element.duration} - timing={this.state} - mediaItem={item} - cc={cc} - onScrub={this.handleScrub} - /> - <VideoSubtitles - cc={cc} - play_ts={seconds} - mediaItem={item} - /> </div> ) } } const mapStateToProps = state => ({ - viewer: state.viewer, - play_ts: state.audio.play_ts, - playing: state.audio.playing, + ...state.viewer.videoModal, playerVolume: state.audio.volume, cc: state.audio.cc, }) |