Adjust logic to only run interval when video is playing.

This commit is contained in:
David Granado 2022-03-02 20:41:37 -06:00 committed by infinite-persistence
parent 0f2eba8733
commit 3631bdddbc

View file

@ -127,6 +127,7 @@ function VideoViewer(props: Props) {
const [ended, setEnded] = useState(false); const [ended, setEnded] = useState(false);
const [showAutoplayCountdown, setShowAutoplayCountdown] = useState(false); const [showAutoplayCountdown, setShowAutoplayCountdown] = useState(false);
const [isEndedEmbed, setIsEndedEmbed] = useState(false); const [isEndedEmbed, setIsEndedEmbed] = useState(false);
const [playerObj, setPlayerObj] = useState(null);
const vjsCallbackDataRef: any = React.useRef(); const vjsCallbackDataRef: any = React.useRef();
const previousUri = usePrevious(uri); const previousUri = usePrevious(uri);
const embedded = useContext(EmbedContext); const embedded = useContext(EmbedContext);
@ -139,7 +140,7 @@ function VideoViewer(props: Props) {
const [videoNode, setVideoNode] = useState(); const [videoNode, setVideoNode] = useState();
const [localAutoplayNext, setLocalAutoplayNext] = useState(autoplayNext); const [localAutoplayNext, setLocalAutoplayNext] = useState(autoplayNext);
const isFirstRender = React.useRef(true); const isFirstRender = React.useRef(true);
const playerRef = React.useRef(null); const savePositionInterval = isPlaying ? PLAY_POSITION_SAVE_INTERVAL_MS : null;
useEffect(() => { useEffect(() => {
if (isFirstRender.current) { if (isFirstRender.current) {
@ -150,10 +151,10 @@ function VideoViewer(props: Props) {
}, [localAutoplayNext]); }, [localAutoplayNext]);
useInterval(() => { useInterval(() => {
if (playerRef.current && isPlaying) { if (playerObj) {
handlePosition(playerRef.current); handlePosition(playerObj);
} }
}, PLAY_POSITION_SAVE_INTERVAL_MS); }, savePositionInterval);
const updateVolumeState = React.useCallback( const updateVolumeState = React.useCallback(
debounce((volume, muted) => { debounce((volume, muted) => {
@ -430,7 +431,7 @@ function VideoViewer(props: Props) {
player.currentTime(position); player.currentTime(position);
} }
playerRef.current = player; setPlayerObj(player);
}, playerReadyDependencyList); // eslint-disable-line }, playerReadyDependencyList); // eslint-disable-line
return ( return (