Skip to content
Snippets Groups Projects
Verified Commit 9d2154f8 authored by Loïs Poujade's avatar Loïs Poujade
Browse files

Experiment: use only SET_CURRENT_TIME, disable SEEK_TO

parent 047b2063
Branches
No related tags found
No related merge requests found
...@@ -15,13 +15,9 @@ ...@@ -15,13 +15,9 @@
theme: { theme: {
transitions: window.location.port === '4488' ? { create: () => 'none' } : {}, transitions: window.location.port === '4488' ? { create: () => 'none' } : {},
}, },
windows: [{ windows: [
manifestId: 'https://iiif.harvardartmuseums.org/manifests/object/299843',
canvasId: 'https://iiif.harvardartmuseums.org/manifests/object/299843/canvas/canvas-47174892',
thumbnailNavigationPosition: 'far-bottom',
},
{ {
manifestId: 'https://iiif.bodleian.ox.ac.uk/iiif/manifest/e32a277e-91e2-4a6d-8ba6-cc4bad230410.json', manifestId: 'http://localhost:4488/__tests__/fixtures/version-3/video.json',
}], }],
catalog: [ catalog: [
{ manifestId: 'https://iiif.bodleian.ox.ac.uk/iiif/manifest/e32a277e-91e2-4a6d-8ba6-cc4bad230410.json' }, { manifestId: 'https://iiif.bodleian.ox.ac.uk/iiif/manifest/e32a277e-91e2-4a6d-8ba6-cc4bad230410.json' },
......
...@@ -114,36 +114,26 @@ export class AnnotationsOverlayVideo extends Component { ...@@ -114,36 +114,26 @@ export class AnnotationsOverlayVideo extends Component {
hoveredAnnotationIds, selectedAnnotationId, hoveredAnnotationIds, selectedAnnotationId,
highlightAllAnnotations, highlightAllAnnotations,
paused, paused,
seekToTime, setCurrentTime,
} = this.props; } = this.props;
this.initializeViewer(); this.initializeViewer();
let prevVideoPausedState;
if (this.video) { if (this.video) {
prevVideoPausedState = this.video.paused; if (paused && !this.video.paused) {
if (this.video.paused && !paused) {
const promise = this.video.play();
if (promise !== undefined) {
promise.catch((e) => {});
}
} else if (!this.video.paused && paused) {
this.video.pause(); this.video.pause();
} else if (!paused && this.video.paused) {
this.video.play();
} }
if (seekToTime !== prevProps.seekToTime) {
if (seekToTime !== undefined) { // TODO another action // better way to determine if user changed time
this.seekTo(seekToTime, true); // or if video is normally playing
return; if (currentTime < prevProps.currentTime || (currentTime - prevProps.currentTime) > 0.5) {
} this.video.currentTime = currentTime - this.temporalOffset;
} }
if (this.video.seeking) { if (this.video.seeking) {
return; return;
} }
if (currentTime !== prevProps.currentTime) {
if (paused && this.video.paused) {
this.video.currentTime = currentTime - this.temporalOffset;
}
}
} }
const annotationsUpdated = !AnnotationsOverlayVideo.annotationsMatch( const annotationsUpdated = !AnnotationsOverlayVideo.annotationsMatch(
...@@ -179,7 +169,7 @@ export class AnnotationsOverlayVideo extends Component { ...@@ -179,7 +169,7 @@ export class AnnotationsOverlayVideo extends Component {
const temporalfragment = resource.temporalfragmentSelector; const temporalfragment = resource.temporalfragmentSelector;
if (temporalfragment && temporalfragment.length > 0 && this.video) { if (temporalfragment && temporalfragment.length > 0 && this.video) {
const seekto = temporalfragment[0] || 0; const seekto = temporalfragment[0] || 0;
this.seekTo(seekto, !prevVideoPausedState); setCurrentTime(seekto);
} }
} }
}); });
...@@ -259,6 +249,7 @@ export class AnnotationsOverlayVideo extends Component { ...@@ -259,6 +249,7 @@ export class AnnotationsOverlayVideo extends Component {
/** */ /** */
onVideoTimeUpdate(event) { onVideoTimeUpdate(event) {
this.props.setCurrentTime(event.target.currentTime);
this.updateCanvas(); this.updateCanvas();
} }
...@@ -436,19 +427,6 @@ export class AnnotationsOverlayVideo extends Component { ...@@ -436,19 +427,6 @@ export class AnnotationsOverlayVideo extends Component {
return imageSource; return imageSource;
} }
/** @private */
seekTo(seekTo, resume) {
const { setCurrentTime, setPaused } = this.props;
setPaused(true);
setCurrentTime(seekTo);
this.video.addEventListener('seeked', function seeked(event) {
event.currentTarget.removeEventListener(event.type, seeked);
if (resume) {
setPaused(false);
}
});
}
/** @private */ /** @private */
isCanvasSizeSpecified() { isCanvasSizeSpecified() {
const { canvas, canvasWorld } = this.props; const { canvas, canvasWorld } = this.props;
......
...@@ -12,11 +12,6 @@ export class VideoViewer extends Component { ...@@ -12,11 +12,6 @@ export class VideoViewer extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.videoRef = React.createRef(); this.videoRef = React.createRef();
this.state = {
start: 0,
time: 0,
};
} }
/** */ /** */
...@@ -37,32 +32,7 @@ export class VideoViewer extends Component { ...@@ -37,32 +32,7 @@ export class VideoViewer extends Component {
/** */ /** */
componentDidUpdate(prevProps) { componentDidUpdate(prevProps) {
const { const { muted, textTrackDisabled } = this.props;
canvas, currentTime, muted, paused,
setCurrentTime, setPaused,
textTrackDisabled,
} = this.props;
if (paused !== prevProps.paused) {
if (currentTime === 0) {
this.timerReset();
}
if (paused) {
this.timerStop();
} else {
this.timerStart();
}
}
if (currentTime !== prevProps.currentTime) {
const duration = canvas.getDuration();
if (duration && duration < currentTime) {
if (!paused) {
setPaused(true);
setCurrentTime(0);
this.timerReset();
}
}
}
const video = this.videoRef.current; const video = this.videoRef.current;
if (video) { if (video) {
if (video.muted !== muted) { if (video.muted !== muted) {
...@@ -77,38 +47,6 @@ export class VideoViewer extends Component { ...@@ -77,38 +47,6 @@ export class VideoViewer extends Component {
} }
} }
/** */
componentWillUnmount() {
this.timerStop();
}
/** */
timerStart() {
const { currentTime } = this.props;
this.setState({
start: Date.now() - currentTime * 1000,
time: currentTime * 1000,
});
this.timer = setInterval(() => {
const { setCurrentTime } = this.props;
this.setState(prevState => ({
time: Date.now() - prevState.start,
}));
const { time } = this.state;
setCurrentTime(time / 1000);
}, 100);
}
/** */
timerStop() {
clearInterval(this.timer);
}
/** */
timerReset() {
this.setState({ time: 0 });
}
/* eslint-disable jsx-a11y/media-has-caption */ /* eslint-disable jsx-a11y/media-has-caption */
/** */ /** */
render() { render() {
...@@ -184,7 +122,6 @@ VideoViewer.propTypes = { ...@@ -184,7 +122,6 @@ VideoViewer.propTypes = {
currentTime: PropTypes.number, currentTime: PropTypes.number,
muted: PropTypes.bool, muted: PropTypes.bool,
paused: PropTypes.bool, paused: PropTypes.bool,
setCurrentTime: PropTypes.func,
setHasTextTrack: PropTypes.func, setHasTextTrack: PropTypes.func,
setPaused: PropTypes.func, setPaused: PropTypes.func,
textTrackDisabled: PropTypes.bool, textTrackDisabled: PropTypes.bool,
...@@ -198,7 +135,6 @@ VideoViewer.defaultProps = { ...@@ -198,7 +135,6 @@ VideoViewer.defaultProps = {
currentTime: 0, currentTime: 0,
muted: false, muted: false,
paused: true, paused: true,
setCurrentTime: () => {},
setHasTextTrack: () => {}, setHasTextTrack: () => {},
setPaused: () => {}, setPaused: () => {},
textTrackDisabled: true, textTrackDisabled: true,
......
...@@ -22,13 +22,18 @@ export class ViewerNavigationVideo extends Component { ...@@ -22,13 +22,18 @@ export class ViewerNavigationVideo extends Component {
/** */ /** */
handleChange = (event, newValue) => { handleChange = (event, newValue) => {
const { paused, setCurrentTime, setSeekTo } = this.props; const { paused, setCurrentTime, setSeekTo } = this.props;
if (!paused) { console.log(event.type, newValue);
setSeekTo(newValue); // if (!paused) {
} else { // setSeekTo(newValue);
// } else {
setCurrentTime(newValue); setCurrentTime(newValue);
} //}
}; };
// componentDidUpdate(prevProps) {
// console.log('ViewerNavigationVideo didUpdate', this.props.currentTime, prevProps.currentTime);
// }
/** /**
* Renders things * Renders things
*/ */
...@@ -46,6 +51,8 @@ export class ViewerNavigationVideo extends Component { ...@@ -46,6 +51,8 @@ export class ViewerNavigationVideo extends Component {
textTrackDisabled, textTrackDisabled,
} = this.props; } = this.props;
// console.log('ViewerNavigationVideo rendering', currentTime);
const start = (duration > 3600 || duration === undefined) ? 11 : 14; const start = (duration > 3600 || duration === undefined) ? 11 : 14;
const len = (duration > 3600 || duration === undefined) ? 8 : 5; const len = (duration > 3600 || duration === undefined) ? 8 : 5;
let durationLabel = new Date(currentTime * 1000).toISOString().substr(start, len); let durationLabel = new Date(currentTime * 1000).toISOString().substr(start, len);
...@@ -54,7 +61,7 @@ export class ViewerNavigationVideo extends Component { ...@@ -54,7 +61,7 @@ export class ViewerNavigationVideo extends Component {
durationLabel = `${durationLabel} / ${new Date(duration * 1000).toISOString().substr(start, len)}`; durationLabel = `${durationLabel} / ${new Date(duration * 1000).toISOString().substr(start, len)}`;
slider = ( slider = (
<div className={classes.sliderDiv}> <div className={classes.sliderDiv}>
<Slider value={currentTime} min={0} max={duration} onChange={this.handleChange} /> <Slider value={currentTime} min={0} max={duration} onChange={this.handleChange} onChangeCommitted={this.handleChange} />
</div> </div>
); );
} }
......
...@@ -182,6 +182,7 @@ export const windowsReducer = (state = {}, action) => { ...@@ -182,6 +182,7 @@ export const windowsReducer = (state = {}, action) => {
[action.windowId]: { [action.windowId]: {
...state[action.windowId], ...state[action.windowId],
currentTime: action.currentTime, currentTime: action.currentTime,
seekToTime: action.currentTime,
}, },
}; };
case ActionTypes.SET_SEEK_TO_TIME: case ActionTypes.SET_SEEK_TO_TIME:
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment