diff --git a/web/src/hooks/use-camera-activity.ts b/web/src/hooks/use-camera-activity.ts index 76a982725..112812f2c 100644 --- a/web/src/hooks/use-camera-activity.ts +++ b/web/src/hooks/use-camera-activity.ts @@ -176,9 +176,7 @@ export function useCameraActivity( enabled: isCameraEnabled, activeTracking: isCameraEnabled ? hasActiveObjects : false, activeMotion: isCameraEnabled - ? detectingMotion - ? detectingMotion === "ON" - : updatedCameraState?.motion === true + ? updatedCameraState?.motion === true || detectingMotion === "ON" : false, objects: isCameraEnabled ? (objects ?? []) : [], audio_detections: isCameraEnabled ? (audioDetections ?? []) : [], diff --git a/web/src/views/live/DraggableGridLayout.tsx b/web/src/views/live/DraggableGridLayout.tsx index 5d36ca1ba..e26c3071e 100644 --- a/web/src/views/live/DraggableGridLayout.tsx +++ b/web/src/views/live/DraggableGridLayout.tsx @@ -32,6 +32,8 @@ import { PlayerStats } from "@/components/player/PlayerStats"; import { MdCircle } from "react-icons/md"; import { useCameraActivity } from "@/hooks/use-camera-activity"; import { Skeleton } from "@/components/ui/skeleton"; +import { MdCircle } from "react-icons/md"; +import { useCameraActivity } from "@/hooks/use-camera-activity"; import { isEqual } from "lodash"; import useSWR from "swr"; @@ -1081,9 +1083,8 @@ const BirdseyeLivePlayerGridItem = React.forwardRef< }, ); -// Separate component so it can call useCameraActivity as a hook (no hooks in loops). -// Direct WS subscription guarantees the dot reacts to motion changes in real-time -// without relying on an intermediate callback → parent-state chain. +// Separate component so useCameraActivity can be called as a hook (no hooks in loops). +// Rendered outside the zoom transform div so it doesn't scale with the camera zoom. function CameraMotionDot({ camera, autoLive, @@ -1095,7 +1096,7 @@ function CameraMotionDot({ if (autoLive === false || offline || !activeMotion) return null; return (