From c01b4d88857bf7690ae5dd3ea0c696db00935ff9 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 9 Sep 2020 17:47:43 +0200 Subject: handle seeking for now --- animism-align/frontend/app/utils/vendor/vimeo/index.js | 12 ++++++++++++ .../viewer/player/components.fullscreen/fullscreen.video.js | 12 +++++++++++- .../frontend/app/views/viewer/player/player.fullscreen.css | 2 +- 3 files changed, 24 insertions(+), 2 deletions(-) diff --git a/animism-align/frontend/app/utils/vendor/vimeo/index.js b/animism-align/frontend/app/utils/vendor/vimeo/index.js index 45d5ab0..42b40a6 100644 --- a/animism-align/frontend/app/utils/vendor/vimeo/index.js +++ b/animism-align/frontend/app/utils/vendor/vimeo/index.js @@ -81,6 +81,18 @@ class Vimeo extends React.Component { return null; }); break; + case 'seek': + player.setCurrentTime(value).then(function(seconds) { + }).catch(function(error) { + switch (error.name) { + case 'RangeError': + // the time was less than 0 or greater than the video’s duration + break + default: + // some other error occurred + break + } + }); case 'width': case 'height': player.element[name] = value; 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 1d7d055..14aafe9 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 @@ -6,9 +6,10 @@ import { PlayButton, PlayerTime, VolumeControl } from 'app/views/viewer/nav/view class FullscreenVideo extends Component { state = { - duration: 1.0, + duration: 0.0, percent: 0.0, seconds: 0.0, + seek: 0.0, } constructor(props) { super(props) @@ -17,6 +18,13 @@ class FullscreenVideo extends Component { this.handleTimeUpdate = this.handleTimeUpdate.bind(this) this.handleEnd = this.handleEnd.bind(this) } + componentDidUpdate(prevProps) { + if (Math.abs(this.props.play_ts - prevProps.play_ts) > 2.0) { + // handle seek + const seek = this.props.play_ts - this.props.element.start_ts + this.setState({ seek }) + } + } handlePlay() { } @@ -51,6 +59,7 @@ class FullscreenVideo extends Component { paused={!playing} autoplay={true} muted={true} + seek={this.state.seek} responsive={true} controls={false} byline={false} @@ -77,6 +86,7 @@ class FullscreenVideo extends Component { const mapStateToProps = state => ({ viewer: state.viewer, + play_ts: state.audio.play_ts, playing: state.audio.playing, volume: state.audio.volume, }) 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 1aad149..61f5122 100644 --- a/animism-align/frontend/app/views/viewer/player/player.fullscreen.css +++ b/animism-align/frontend/app/views/viewer/player/player.fullscreen.css @@ -82,7 +82,7 @@ iframe { position: absolute; bottom: 0; left: 0; - width: 66%; + width: 66.6%; height: 3rem; font-size: 18px; color: white; -- cgit v1.2.3-70-g09d2