diff options
Diffstat (limited to 'animism-align/frontend/app/views/viewer/player')
4 files changed, 34 insertions, 6 deletions
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 ec020f8..a2c4b72 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 @@ -89,6 +89,7 @@ class FullscreenVideo extends Component { video={item.url} paused={!playing} autoplay={true} + autopause={false} muted={!element.settings.unmuted} loop={!!element.settings.loop} seek={this.state.seek} diff --git a/animism-align/frontend/app/views/viewer/player/components.media/video.scrubber.js b/animism-align/frontend/app/views/viewer/player/components.media/video.scrubber.js index 48250c7..78c4b1d 100644 --- a/animism-align/frontend/app/views/viewer/player/components.media/video.scrubber.js +++ b/animism-align/frontend/app/views/viewer/player/components.media/video.scrubber.js @@ -85,7 +85,7 @@ class VideoScrubber extends Component { const { playing, start_ts, play_ts, volume, timing, video_start_ts, duration } = this.props const { hovering, showing } = this.state // remove video start offset from timing - console.log(start_ts, play_ts) + // console.log(start_ts, play_ts) const player_ts = play_ts - start_ts // compute percent from the length of the fullscreen element const percent = clamp(player_ts / duration, 0, 1) diff --git a/animism-align/frontend/app/views/viewer/player/player.container.js b/animism-align/frontend/app/views/viewer/player/player.container.js index afb6a40..8972386 100644 --- a/animism-align/frontend/app/views/viewer/player/player.container.js +++ b/animism-align/frontend/app/views/viewer/player/player.container.js @@ -2,7 +2,7 @@ import React, { Component } from 'react' import { connect } from 'react-redux' import actions from 'app/actions' -import { floatInRange, clamp } from 'app/utils' +import { floatEQ, floatInRange, clamp } from 'app/utils' import PlayerTranscript from './player.transcript' import PlayerFullscreen from './player.fullscreen' @@ -76,8 +76,10 @@ class PlayerContainer extends Component { setCurrentSection() { const { audio, currentSection, autoAdvance } = this.props - const { play_ts } = audio - if (floatInRange(currentSection.start_ts, play_ts, currentSection.end_ts)) { + const { play_ts, seek_ts } = audio + const didSeek = floatEQ(play_ts, seek_ts) + // console.log('didSeek?', didSeek) + if (!didSeek || floatInRange(currentSection.start_ts, play_ts, currentSection.end_ts)) { return } if (autoAdvance) { 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 50cd633..75a7e33 100644 --- a/animism-align/frontend/app/views/viewer/player/player.fullscreen.js +++ b/animism-align/frontend/app/views/viewer/player/player.fullscreen.js @@ -17,16 +17,21 @@ class PlayerFullscreen extends Component { } componentDidUpdate(prevProps) { - if (this.props.audio.play_ts === prevProps.audio.play_ts) return + const playTimeChanged = this.props.audio.play_ts !== prevProps.audio.play_ts + const seekTimeChanged = this.props.audio.seek_ts !== prevProps.audio.seek_ts + if (!playTimeChanged && !seekTimeChanged) return this.setCurrentElements() } setCurrentElements() { const { audio, timeline, currentSection, media } = this.props - const { play_ts } = audio + const { play_ts, seek_ts } = audio + // get elements at this play position let elements = timeline.filter(element => ( floatInRange(element.start_ts, play_ts, element.fade_out_start_ts + 0.1) )) + + // if the audio is paused, and the first el is a curtain, remove it if (elements.length && !audio.playing && elements[0].type === 'curtain') { elements.shift() } @@ -35,7 +40,27 @@ class PlayerFullscreen extends Component { .sort((a,b) => a[0] - b[0]) .map(p => p[1]) } + + // if the seek time matches any element, we wanna show that element immediately. + // additionally, if we were still inside another earlier element, dont show it at all + // did we recently seek to an element? + const seekedElements = elements.filter(e => e.start_ts <= seek_ts) + // if we did, then we want to use the filtered elements i.e. dont show earlier nodes + // also any elements starting at this point should transition immediately, + // to prevent flash of the underlying content. + if (seekedElements.length) { + elements = seekedElements.map(e => { + if (e.start_ts === seek_ts && e.type !== 'curtain') { + return { + ...e, + fadeInDuration: 0, + } + } + return e + }) + } // console.log(elements) + // set nav style from top-most element if (elements.length) { const lastElement = elements[elements.length - 1] if (lastElement.color && lastElement.color.textColor === '#ffffff') { |