diff options
Diffstat (limited to 'animism-align')
9 files changed, 57 insertions, 15 deletions
diff --git a/animism-align/frontend/app/types.js b/animism-align/frontend/app/types.js index 3c0ec6f..d2b08b8 100644 --- a/animism-align/frontend/app/types.js +++ b/animism-align/frontend/app/types.js @@ -23,7 +23,7 @@ export const align = crud_type('align', [ ]) export const audio = with_type('audio', [ - 'play', 'pause', 'update_time', 'set_volume', + 'play', 'pause', 'seek', 'update_time', 'set_volume', ]) export const viewer = with_type('viewer', [ diff --git a/animism-align/frontend/app/utils/index.js b/animism-align/frontend/app/utils/index.js index 6777a5e..d6c1a16 100644 --- a/animism-align/frontend/app/utils/index.js +++ b/animism-align/frontend/app/utils/index.js @@ -95,10 +95,11 @@ export const dist = (x1, y1, x2, y2) => Math.sqrt(Math.pow(x1 - x2, 2) + Math.po export const mod = (n, m) => n - (m * Math.floor(n / m)) export const angle = (x1, y1, x2, y2) => Math.atan2(y2 - y1, x2 - x1) export const lerp = (n,a,b) => (b-a)*n+a +export const floatEQ = (a,b) => ((a*10|0) === (b*10|0)) export const floatLT = (a,b) => ((a*10|0) < (b*10|0)) -export const floatLTE = (a,b) => ((a*10|0) === (b*10|0) || floatLT(a,b)) +export const floatLTE = (a,b) => (floatEQ(a,b) || floatLT(a,b)) export const floatGT = (a,b) => ((a*10|0) > (b*10|0)) -export const floatGTE = (a,b) => ((a*10|0) === (b*10|0) || floatGT(a,b)) +export const floatGTE = (a,b) => (floatEQ(a,b) || floatGT(a,b)) export const floatInRange = (a,b,c) => floatLTE(a, b) && floatLT(b, c) export const simpleArraysEqual = (a, b) => JSON.stringify(a) === JSON.stringify(b) diff --git a/animism-align/frontend/app/views/audio/audio.actions.js b/animism-align/frontend/app/views/audio/audio.actions.js index 86dd100..a156f9b 100644 --- a/animism-align/frontend/app/views/audio/audio.actions.js +++ b/animism-align/frontend/app/views/audio/audio.actions.js @@ -33,9 +33,11 @@ export const pause = () => dispatch => { } export const seek = play_ts => dispatch => { audioPlayer.currentTime = play_ts + dispatch({ type: types.audio.seek, seek_ts: audioPlayer.currentTime }) } export const jump = delta_ts => dispatch => { audioPlayer.currentTime += delta_ts + dispatch({ type: types.audio.seek, seek_ts: audioPlayer.currentTime }) } export const toggle = () => dispatch => { if (store.getState().audio.playing) { diff --git a/animism-align/frontend/app/views/audio/audio.reducer.js b/animism-align/frontend/app/views/audio/audio.reducer.js index c88d6f9..51bcacc 100644 --- a/animism-align/frontend/app/views/audio/audio.reducer.js +++ b/animism-align/frontend/app/views/audio/audio.reducer.js @@ -5,6 +5,7 @@ const initialState = { started: false, playing: false, play_ts: 0, + seek_ts: 0, volume: 1.0, } @@ -22,6 +23,12 @@ export default function alignReducer(state = initialState, action) { ...state, playing: false, } + case types.audio.seek: + return { + ...state, + play_ts: action.play_ts, + seek_ts: action.seek_ts, + } case types.audio.update_time: return { ...state, 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 a4c2aee..fdad211 100644 --- a/animism-align/frontend/app/views/viewer/nav/nav.parent.js +++ b/animism-align/frontend/app/views/viewer/nav/nav.parent.js @@ -43,16 +43,19 @@ class NavParent extends Component { handleNavBarClick(e) { e && e.stopPropagation() actions.viewer.toggleComponent('nav') + console.log('>> CLICK NAV') } goToNextSection(e) { e && e.preventDefault() e && e.stopPropagation() const { viewer } = this.props + console.log('>> SEEK') if (viewer.nextSection) { actions.viewer.seekToSection(viewer.nextSection) } else { actions.viewer.seekToBeginning() } + this.setState({ hoveringNext: false, hoveringNav: false, suppressHover: true }) } render() { const { viewer, play_ts, started, playing } = this.props @@ -101,13 +104,14 @@ class NavParent extends Component { </div> {viewer.nextSection && <div className="next-section-thumbnail" - onClick={() => { - actions.viewer.seekToSection(viewer.nextSection) - this.setState({ hoveringNext: false, hoveringNav: false, suppressHover: true }) - }} + onClick={this.goToNextSection} style={{ - backgroundImage: viewer.nextSection.media.length && 'url(' + thumbnailURL(viewer.nextSection.media[0].media) + ')', - }}/> + backgroundImage: ( + viewer.nextSection.media.length + && 'url(' + thumbnailURL(viewer.nextSection.media[0].media) + ')' + ), + }} + /> } </div> ) 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') { |