diff --git a/web/src/components/player/LivePlayer.tsx b/web/src/components/player/LivePlayer.tsx index af0511ac1..e0959e555 100644 --- a/web/src/components/player/LivePlayer.tsx +++ b/web/src/components/player/LivePlayer.tsx @@ -111,9 +111,16 @@ export default function LivePlayer({ droppedFrameRate: 0, // percentage }); + const onStatsUpdateRef = useRef(onStatsUpdate); + const onLoadingChangeRef = useRef(onLoadingChange); + const onActiveMotionChangeRef = useRef(onActiveMotionChange); + onStatsUpdateRef.current = onStatsUpdate; + onLoadingChangeRef.current = onLoadingChange; + onActiveMotionChangeRef.current = onActiveMotionChange; + useEffect(() => { - onStatsUpdate?.(stats); - }, [stats, onStatsUpdate]); + onStatsUpdateRef.current?.(stats); + }, [stats]); // camera activity @@ -285,40 +292,24 @@ export default function LivePlayer({ }, [liveReady, isReEnabling]); useEffect(() => { - if (!onLoadingChange) return; const loading = !!( cameraEnabled && !offline && (!showStillWithoutActivity || isReEnabling) && !liveReady ); - onLoadingChange(loading); - }, [ - onLoadingChange, - cameraEnabled, - offline, - showStillWithoutActivity, - isReEnabling, - liveReady, - ]); + onLoadingChangeRef.current?.(loading); + }, [cameraEnabled, offline, showStillWithoutActivity, isReEnabling, liveReady]); useEffect(() => { - if (!onActiveMotionChange) return; const motionVisible = !!( autoLive && !offline && activeMotion && ((showStillWithoutActivity && !liveReady) || liveReady) ); - onActiveMotionChange(motionVisible); - }, [ - onActiveMotionChange, - autoLive, - offline, - activeMotion, - showStillWithoutActivity, - liveReady, - ]); + onActiveMotionChangeRef.current?.(motionVisible); + }, [autoLive, offline, activeMotion, showStillWithoutActivity, liveReady]); if (!cameraConfig) { return ; @@ -453,7 +444,7 @@ export default function LivePlayer({ /> - {!onLoadingChange && + {!onLoadingChangeRef.current && cameraEnabled && !offline && (!showStillWithoutActivity || isReEnabling) && @@ -577,7 +568,7 @@ export default function LivePlayer({ {cameraName} )} - {!onActiveMotionChange && + {!onActiveMotionChangeRef.current && autoLive && !offline && activeMotion && @@ -585,7 +576,7 @@ export default function LivePlayer({ )} - {showStats && !onStatsUpdate && ( + {showStats && !onStatsUpdateRef.current && ( )}