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 && (
)}