From 7ee24b7518343172d0e105b7d849d2cd7d6bc7d1 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 19 Mar 2026 03:51:29 +0000
Subject: [PATCH] fix: motion dot outside zoom transform in LiveCameraView

Same pattern as DraggableGridLayout: render the dot outside
TransformComponent so it doesn't scale with pinch/zoom.
LivePlayer gets showMotionDot={false} to avoid duplicate.

https://claude.ai/code/session_019B4dJXtcxvHn97ZaqHUB62
---
 web/src/views/live/LiveCameraView.tsx | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/web/src/views/live/LiveCameraView.tsx b/web/src/views/live/LiveCameraView.tsx
index 9d6f45f87..bddceb2b2 100644
--- a/web/src/views/live/LiveCameraView.tsx
+++ b/web/src/views/live/LiveCameraView.tsx
@@ -86,6 +86,7 @@ import {
   MdPersonOff,
   MdPersonSearch,
   MdPhotoCamera,
+  MdCircle,
 } from "react-icons/md";
 import { Link, useNavigate } from "react-router-dom";
 import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
@@ -114,6 +115,7 @@ import { detectCameraAudioFeatures } from "@/utils/cameraUtil";
 import PtzControlPanel from "@/components/overlay/PtzControlPanel";
 import ObjectSettingsView from "../settings/ObjectSettingsView";
 import { useSearchEffect } from "@/hooks/use-overlay-state";
+import { useCameraActivity } from "@/hooks/use-camera-activity";
 import {
   downloadSnapshot,
   fetchCameraSnapshot,
@@ -190,6 +192,9 @@ export default function LiveCameraView({
   const { payload: enabledState } = useEnabledState(camera.name);
   const cameraEnabled = enabledState === "ON";
 
+  // motion dot
+  const { activeMotion, offline: cameraOffline } = useCameraActivity(camera);
+
   // for audio transcriptions
 
   const { payload: audioTranscriptionState, send: sendTranscription } =
@@ -646,6 +651,7 @@ export default function LiveCameraView({
                   className={`${fullscreen ? "*:rounded-none" : ""}`}
                   windowVisible
                   showStillWithoutActivity={false}
+                  showMotionDot={false}
                   alwaysShowCameraName={false}
                   cameraConfig={camera}
                   playAudio={audio}
@@ -663,6 +669,11 @@ export default function LiveCameraView({
                 />
               </div>
             </TransformComponent>
+            {activeMotion && !cameraOffline && (
+              <div className="absolute right-4 top-4 z-40">
+                <MdCircle className="size-2 animate-pulse text-danger drop-shadow-md" />
+              </div>
+            )}
             {camera?.audio?.enabled_in_config &&
               audioTranscriptionState == "ON" &&
               transcription != null && (