When video is playing, save position intermittently (#1013)

ui/component/viewers/videoViewer/view.jsx

@@ -27,9 +27,11 @@ import { getAllIds } from 'util/buildHomepage';
 import type { HomepageCat } from 'util/buildHomepage';
 import debounce from 'util/debounce';
 import { formatLbryUrlForWeb, generateListSearchUrlParams } from 'util/url';
+import useInterval from 'effects/use-interval';
 
 // const PLAY_TIMEOUT_ERROR = 'play_timeout_error';
 // const PLAY_TIMEOUT_LIMIT = 2000;
+const PLAY_POSITION_SAVE_INTERVAL_MS = 15000;
 
 type Props = {
   position: number,
@@ -137,6 +139,7 @@ function VideoViewer(props: Props) {
   const [videoNode, setVideoNode] = useState();
   const [localAutoplayNext, setLocalAutoplayNext] = useState(autoplayNext);
   const isFirstRender = React.useRef(true);
+  const playerRef = React.useRef(null);
 
   useEffect(() => {
     if (isFirstRender.current) {
@@ -146,6 +149,12 @@ function VideoViewer(props: Props) {
     toggleAutoplayNext();
   }, [localAutoplayNext]);
 
+  useInterval(() => {
+    if (playerRef.current && isPlaying) {
+      handlePosition(playerRef.current);
+    }
+  }, PLAY_POSITION_SAVE_INTERVAL_MS);
+
   const updateVolumeState = React.useCallback(
     debounce((volume, muted) => {
       changeVolume(volume);
@@ -420,6 +429,8 @@ function VideoViewer(props: Props) {
     if (position) {
       player.currentTime(position);
     }
+
+    playerRef.current = player;
   }, playerReadyDependencyList); // eslint-disable-line
 
   return (

ui/effects/use-interval.js

@@ -0,0 +1,19 @@
+import { useRef, useEffect } from 'react';
+
+export default function useInterval(callback, delay) {
+  const savedCallback = useRef();
+
+  useEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+
+  useEffect(() => {
+    const tick = () => {
+      savedCallback.current();
+    };
+    if (delay !== null) {
+      const id = setInterval(tick, delay);
+      return () => clearInterval(id);
+    }
+  }, [delay]);
+}