diff --git a/ui/component/viewers/videoViewer/view.jsx b/ui/component/viewers/videoViewer/view.jsx index f23b92771..aa2f652e8 100644 --- a/ui/component/viewers/videoViewer/view.jsx +++ b/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 = 1500; 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); + 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 ( diff --git a/ui/effects/use-interval.js b/ui/effects/use-interval.js new file mode 100644 index 000000000..bffe7c18e --- /dev/null +++ b/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) { + let id = setInterval(tick, delay); + return () => clearInterval(id); + } + }, [delay]); +}