Experiment removing SET_SEEK_TO

Only use SET_CURRENT_TIME

__tests__/integration/mirador/index.html

@@ -15,15 +15,13 @@
        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',
-       },
-       {
-         manifestId: 'https://iiif.bodleian.ox.ac.uk/iiif/manifest/e32a277e-91e2-4a6d-8ba6-cc4bad230410.json',
-       }],
        catalog: [
+         { manifestId: 'https://dzkimgs.l.u-tokyo.ac.jp/videos/iiif_in_japan_2017/manifest.json' },
+         { manifestId: 'https://iiif.io/api/cookbook/recipe/0219-using-caption-file/manifest.json' },
+         { manifestId: 'https://preview.iiif.io/cookbook/master/recipe/0003-mvm-video/manifest.json' },
+         { manifestId: 'https://iiif.io/api/cookbook/recipe/0065-opera-multiple-canvases/manifest.json' },
+         { manifestId: 'https://iiif.io/api/cookbook/recipe/0064-opera-one-canvas/manifest.json' },
+         { manifestId: 'https://iiif.io/api/cookbook/recipe/0074-multiple-language-captions/manifest.json' },
          { manifestId: 'https://iiif.bodleian.ox.ac.uk/iiif/manifest/e32a277e-91e2-4a6d-8ba6-cc4bad230410.json' },
          { manifestId: 'https://iiif.harvardartmuseums.org/manifests/object/299843' },
          { manifestId: "https://media.nga.gov/public/manifests/nga_highlights.json", provider: "National Gallery of Art"},

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 (both events modifies currentTime)
+      if (currentTime < prevProps.currentTime || (currentTime - prevProps.currentTime) > 1) {
+        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();
   }
 
@@ -273,15 +264,6 @@ export class AnnotationsOverlayVideo extends Component {
 
   /** */
   onVideoPlaying(event) {
-    if (this.video && this.video.currentTime !== 0) {
-      const { currentTime, seekToTime } = this.props;
-      const currentTimeToVideoTime = currentTime - this.temporalOffset;
-      const diff = Math.abs(currentTimeToVideoTime - this.video.currentTime);
-      const acceptableDiff = 1; // sec.
-      if (diff > acceptableDiff && seekToTime === undefined) {
-        this.seekTo(this.video.currentTime + this.temporalOffset, true);
-      }
-    }
     this.setState({ showProgress: false });
   }
 
@@ -436,19 +418,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;
@@ -648,7 +617,6 @@ AnnotationsOverlayVideo.defaultProps = {
   palette: {},
   paused: true,
   searchAnnotations: [],
-  seekToTime: undefined,
   selectAnnotation: () => {},
   selectedAnnotationId: undefined,
   setCurrentTime: () => {},
@@ -670,7 +638,6 @@ AnnotationsOverlayVideo.propTypes = {
   palette: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   paused: PropTypes.bool,
   searchAnnotations: PropTypes.arrayOf(PropTypes.object),
-  seekToTime: PropTypes.number,
   selectAnnotation: PropTypes.func,
   selectedAnnotationId: PropTypes.string,
   setCurrentTime: PropTypes.func,

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,

src/components/ViewerNavigationVideo.js

@@ -21,12 +21,9 @@ export class ViewerNavigationVideo extends Component {
 
   /** */
   handleChange = (event, newValue) => {
-    const { paused, setCurrentTime, setSeekTo } = this.props;
-    if (!paused) {
-      setSeekTo(newValue);
-    } else {
+    const { setCurrentTime } = this.props;
+    console.debug('[ViewerNavigationVideo] slider changed', event.type, newValue);
     setCurrentTime(newValue);
-    }
   };
 
   /**
@@ -54,7 +51,13 @@ 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>
       );
     }
@@ -105,7 +108,6 @@ ViewerNavigationVideo.propTypes = {
   setCurrentTime: PropTypes.func,
   setMuted: PropTypes.func,
   setPaused: PropTypes.func,
-  setSeekTo: PropTypes.func,
   setTextTrackDisabled: PropTypes.func,
   textTrackDisabled: PropTypes.bool,
 };
@@ -119,7 +121,6 @@ ViewerNavigationVideo.defaultProps = {
   setCurrentTime: () => {},
   setMuted: () => {},
   setPaused: () => {},
-  setSeekTo: () => {},
   setTextTrackDisabled: () => {},
   textTrackDisabled: true,
 };

src/containers/AnnotationsOverlayVideo.js

@@ -13,7 +13,6 @@ import {
   getConfig,
   getCurrentCanvas,
   getWindowCurrentTime,
-  getWindowSeekToTime,
   getWindowPausedStatus,
   getPresentAnnotationsOnSelectedCanvases,
   getSelectedAnnotationId,
@@ -40,7 +39,6 @@ const mapStateToProps = (state, { windowId }) => ({
     state,
     { windowId },
   ),
-  seekToTime: getWindowSeekToTime(state, { windowId }),
   selectedAnnotationId: getSelectedAnnotationId(state, { windowId }),
 });
 

src/containers/ViewerNavigationVideo.js

@@ -33,7 +33,6 @@ const mapDispatchToProps = (dispatch, { windowId }) => ({
   setCurrentTime: (...args) => dispatch(actions.setWindowCurrentTime(windowId, ...args)),
   setMuted: (...args) => dispatch(actions.setWindowMuted(windowId, ...args)),
   setPaused: (...args) => dispatch(actions.setWindowPaused(windowId, ...args)),
-  setSeekTo: (...args) => dispatch(actions.setWindowSeekTo(windowId, ...args)),
   setTextTrackDisabled: (...args) => dispatch(
     actions.setWindowTextTrackDisabled(windowId, ...args),
   ),

src/state/actions/action-types.js

@@ -75,7 +75,6 @@ const ActionTypes = {
   HIDE_COLLECTION_DIALOG: 'mirador/HIDE_COLLECTION_DIALOG',
 
   SET_CURRENT_TIME: 'mirador/SET_CURRENT_TIME',
-  SET_SEEK_TO_TIME: 'mirador/SET_SEEK_TO_TIME',
   SET_VIDEO_PAUSED: 'mirador/SET_VIDEO_PAUSED',
   SET_VIDEO_MUTED: 'mirador/SET_VIDEO_MUTED',
   SET_VIDEO_TEXTTRACK_DISABLED: 'mirador/SET_VIDEO_TEXTTRACK_DISABLED',

src/state/actions/window.js

@@ -222,17 +222,6 @@ export function setWindowCurrentTime(windowId, currentTime) {
   });
 }
 
-/** */
-export function setWindowSeekTo(windowId, seekToTime) {
-  return ((dispatch) => {
-    dispatch({
-      seekToTime,
-      type: ActionTypes.SET_SEEK_TO_TIME,
-      windowId,
-    });
-  });
-}
-
 /** */
 export function setWindowPaused(windowId, paused) {
   return ((dispatch) => {

src/state/reducers/windows.js

@@ -184,14 +184,6 @@ export const windowsReducer = (state = {}, action) => {
           currentTime: action.currentTime,
         },
       };
-    case ActionTypes.SET_SEEK_TO_TIME:
-      return {
-        ...state,
-        [action.windowId]: {
-          ...state[action.windowId],
-          seekToTime: action.seekToTime,
-        },
-      };
     case ActionTypes.SET_VIDEO_PAUSED:
       return {
         ...state,

src/state/selectors/window.js

@@ -12,17 +12,6 @@ export const getWindowCurrentTime = createSelector(
   },
 );
 
-export const getWindowSeekToTime = createSelector(
-  [
-    getWindow,
-  ],
-  (window) => {
-    if (!window) return undefined;
-
-    return window.seekToTime;
-  },
-);
-
 export const getWindowPausedStatus = createSelector(
   [
     getWindow,