Experiment: use only SET_CURRENT_TIME, disable SEEK_TO

__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' },

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;

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

@@ -22,13 +22,18 @@ export class ViewerNavigationVideo extends Component {
   /** */
   handleChange = (event, newValue) => {
     const { paused, setCurrentTime, setSeekTo } = this.props;
-    if (!paused) {
-      setSeekTo(newValue);
-    } else {
+    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>
       );
     }

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: