From 9d2154f83438b74de7d17707831dea2c50ad373e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFs=20Poujade?= <lois.poujade@tetras-libre.fr>
Date: Wed, 1 Feb 2023 10:23:14 +0100
Subject: [PATCH] Experiment: use only SET_CURRENT_TIME, disable SEEK_TO
---
__tests__/integration/mirador/index.html | 8 +--
src/components/AnnotationsOverlayVideo.js | 44 ++++-----------
src/components/VideoViewer.js | 66 +----------------------
src/components/ViewerNavigationVideo.js | 19 ++++---
src/state/reducers/windows.js | 1 +
5 files changed, 28 insertions(+), 110 deletions(-)
diff --git a/__tests__/integration/mirador/index.html b/__tests__/integration/mirador/index.html
index 67f6e8257..680c5e50b 100644
--- a/__tests__/integration/mirador/index.html
+++ b/__tests__/integration/mirador/index.html
@@ -15,13 +15,9 @@
theme: {
transitions: window.location.port === '4488' ? { create: () => 'none' } : {},
},
- windows: [{
- manifestId: 'https://iiif.harvardartmuseums.org/manifests/object/299843',
- canvasId: 'https://iiif.harvardartmuseums.org/manifests/object/299843/canvas/canvas-47174892',
- thumbnailNavigationPosition: 'far-bottom',
- },
+ windows: [
{
- 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: [
{ manifestId: 'https://iiif.bodleian.ox.ac.uk/iiif/manifest/e32a277e-91e2-4a6d-8ba6-cc4bad230410.json' },
diff --git a/src/components/AnnotationsOverlayVideo.js b/src/components/AnnotationsOverlayVideo.js
index bc4562cfc..92e72509b 100755
--- a/src/components/AnnotationsOverlayVideo.js
+++ b/src/components/AnnotationsOverlayVideo.js
@@ -114,36 +114,26 @@ export class AnnotationsOverlayVideo extends Component {
hoveredAnnotationIds, selectedAnnotationId,
highlightAllAnnotations,
paused,
- seekToTime,
+ setCurrentTime,
} = this.props;
this.initializeViewer();
- let prevVideoPausedState;
if (this.video) {
- prevVideoPausedState = 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) {
+ if (paused && !this.video.paused) {
this.video.pause();
+ } else if (!paused && this.video.paused) {
+ this.video.play();
}
- if (seekToTime !== prevProps.seekToTime) {
- if (seekToTime !== undefined) {
- this.seekTo(seekToTime, true);
- return;
- }
+
+ // TODO another action // better way to determine if user changed time
+ // or if video is normally playing
+ if (currentTime < prevProps.currentTime || (currentTime - prevProps.currentTime) > 0.5) {
+ this.video.currentTime = currentTime - this.temporalOffset;
}
if (this.video.seeking) {
return;
}
- if (currentTime !== prevProps.currentTime) {
- if (paused && this.video.paused) {
- this.video.currentTime = currentTime - this.temporalOffset;
- }
- }
}
const annotationsUpdated = !AnnotationsOverlayVideo.annotationsMatch(
@@ -179,7 +169,7 @@ export class AnnotationsOverlayVideo extends Component {
const temporalfragment = resource.temporalfragmentSelector;
if (temporalfragment && temporalfragment.length > 0 && this.video) {
const seekto = temporalfragment[0] || 0;
- this.seekTo(seekto, !prevVideoPausedState);
+ setCurrentTime(seekto);
}
}
});
@@ -259,6 +249,7 @@ export class AnnotationsOverlayVideo extends Component {
/** */
onVideoTimeUpdate(event) {
+ this.props.setCurrentTime(event.target.currentTime);
this.updateCanvas();
}
@@ -436,19 +427,6 @@ export class AnnotationsOverlayVideo extends Component {
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 */
isCanvasSizeSpecified() {
const { canvas, canvasWorld } = this.props;
diff --git a/src/components/VideoViewer.js b/src/components/VideoViewer.js
index d13ebbdaf..a194d5bf7 100644
--- a/src/components/VideoViewer.js
+++ b/src/components/VideoViewer.js
@@ -12,11 +12,6 @@ export class VideoViewer extends Component {
constructor(props) {
super(props);
this.videoRef = React.createRef();
-
- this.state = {
- start: 0,
- time: 0,
- };
}
/** */
@@ -37,32 +32,7 @@ export class VideoViewer extends Component {
/** */
componentDidUpdate(prevProps) {
- const {
- 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 { muted, textTrackDisabled } = this.props;
const video = this.videoRef.current;
if (video) {
if (video.muted !== muted) {
@@ -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 */
/** */
render() {
@@ -184,7 +122,6 @@ VideoViewer.propTypes = {
currentTime: PropTypes.number,
muted: PropTypes.bool,
paused: PropTypes.bool,
- setCurrentTime: PropTypes.func,
setHasTextTrack: PropTypes.func,
setPaused: PropTypes.func,
textTrackDisabled: PropTypes.bool,
@@ -198,7 +135,6 @@ VideoViewer.defaultProps = {
currentTime: 0,
muted: false,
paused: true,
- setCurrentTime: () => {},
setHasTextTrack: () => {},
setPaused: () => {},
textTrackDisabled: true,
diff --git a/src/components/ViewerNavigationVideo.js b/src/components/ViewerNavigationVideo.js
index 0542fe7f6..ac991dec5 100755
--- a/src/components/ViewerNavigationVideo.js
+++ b/src/components/ViewerNavigationVideo.js
@@ -22,13 +22,18 @@ export class ViewerNavigationVideo extends Component {
/** */
handleChange = (event, newValue) => {
const { paused, setCurrentTime, setSeekTo } = this.props;
- if (!paused) {
- setSeekTo(newValue);
- } else {
- setCurrentTime(newValue);
- }
+ console.log(event.type, newValue);
+ // if (!paused) {
+ // setSeekTo(newValue);
+ // } else {
+ setCurrentTime(newValue);
+ //}
};
+ // componentDidUpdate(prevProps) {
+ // console.log('ViewerNavigationVideo didUpdate', this.props.currentTime, prevProps.currentTime);
+ // }
+
/**
* Renders things
*/
@@ -46,6 +51,8 @@ export class ViewerNavigationVideo extends Component {
textTrackDisabled,
} = this.props;
+ // console.log('ViewerNavigationVideo rendering', currentTime);
+
const start = (duration > 3600 || duration === undefined) ? 11 : 14;
const len = (duration > 3600 || duration === undefined) ? 8 : 5;
let durationLabel = new Date(currentTime * 1000).toISOString().substr(start, len);
@@ -54,7 +61,7 @@ export class ViewerNavigationVideo extends Component {
durationLabel = `${durationLabel} / ${new Date(duration * 1000).toISOString().substr(start, len)}`;
slider = (
<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>
);
}
diff --git a/src/state/reducers/windows.js b/src/state/reducers/windows.js
index 1009c575f..38ac69d27 100644
--- a/src/state/reducers/windows.js
+++ b/src/state/reducers/windows.js
@@ -182,6 +182,7 @@ export const windowsReducer = (state = {}, action) => {
[action.windowId]: {
...state[action.windowId],
currentTime: action.currentTime,
+ seekToTime: action.currentTime,
},
};
case ActionTypes.SET_SEEK_TO_TIME:
--
GitLab