Adjust logic to only run interval when video is playing.
This commit is contained in:
parent
0f2eba8733
commit
3631bdddbc
1 changed files with 6 additions and 5 deletions
|
@ -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 (
|
||||||
|
|
Loading…
Reference in a new issue