fix: exclude stats, spinner and motion dot from camera zoom transform

Move PlayerStats, ActivityIndicator and motion dot rendering outside the
zoom transform div in DraggableGridLayout so they are not scaled when
the user zooms with Shift+Wheel.

- Add onStatsUpdate, onLoadingChange, onActiveMotionChange callback props
  to LivePlayer; when provided, suppress the internal overlay elements
  and bubble state up to the parent instead
- In DraggableGridLayout, maintain per-camera overlay states and render
  the three overlays as siblings to the zoom div (inside the clipping
  viewport) so they remain at natural size regardless of zoom level

https://claude.ai/code/session_019B4dJXtcxvHn97ZaqHUB62

web/src/components/player/LivePlayer.tsx

@@ -48,6 +48,9 @@ type LivePlayerProps = {
   pip?: boolean;
   autoLive?: boolean;
   showStats?: boolean;
+  onStatsUpdate?: (stats: PlayerStatsType) => void;
+  onLoadingChange?: (loading: boolean) => void;
+  onActiveMotionChange?: (active: boolean) => void;
   onClick?: () => void;
   setFullResolution?: React.Dispatch<React.SetStateAction<VideoResolutionType>>;
   onError?: (error: LivePlayerError) => void;
@@ -73,6 +76,9 @@ export default function LivePlayer({
   pip,
   autoLive = true,
   showStats = false,
+  onStatsUpdate,
+  onLoadingChange,
+  onActiveMotionChange,
   onClick,
   setFullResolution,
   onError,
@@ -105,6 +111,10 @@ export default function LivePlayer({
     droppedFrameRate: 0, // percentage
   });
 
+  useEffect(() => {
+    onStatsUpdate?.(stats);
+  }, [stats, onStatsUpdate]);
+
   // camera activity
 
   const {
@@ -274,6 +284,42 @@ 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,
+  ]);
+
+  useEffect(() => {
+    if (!onActiveMotionChange) return;
+    const motionVisible = !!(
+      autoLive &&
+      !offline &&
+      activeMotion &&
+      ((showStillWithoutActivity && !liveReady) || liveReady)
+    );
+    onActiveMotionChange(motionVisible);
+  }, [
+    onActiveMotionChange,
+    autoLive,
+    offline,
+    activeMotion,
+    showStillWithoutActivity,
+    liveReady,
+  ]);
+
   if (!cameraConfig) {
     return <ActivityIndicator />;
   }
@@ -407,7 +453,8 @@ export default function LivePlayer({
         />
       </div>
 
-      {cameraEnabled &&
+      {!onLoadingChange &&
+        cameraEnabled &&
         !offline &&
         (!showStillWithoutActivity || isReEnabling) &&
         !liveReady && <ActivityIndicator />}
@@ -530,14 +577,15 @@ export default function LivePlayer({
             {cameraName}
           </Chip>
         )}
-        {autoLive &&
+        {!onActiveMotionChange &&
+          autoLive &&
           !offline &&
           activeMotion &&
           ((showStillWithoutActivity && !liveReady) || liveReady) && (
             <MdCircle className="mr-2 size-2 animate-pulse text-danger shadow-danger drop-shadow-md" />
           )}
       </div>
-      {showStats && (
+      {showStats && !onStatsUpdate && (
         <PlayerStats stats={stats} minimal={cameraRef !== undefined} />
       )}
     </div>

web/src/views/live/DraggableGridLayout.tsx

@@ -23,9 +23,13 @@ import {
   AudioState,
   LivePlayerMode,
   LiveStreamMetadata,
+  PlayerStatsType,
   StatsState,
   VolumeState,
 } from "@/types/live";
+import ActivityIndicator from "@/components/indicators/activity-indicator";
+import { PlayerStats } from "@/components/player/PlayerStats";
+import { MdCircle } from "react-icons/md";
 import { Skeleton } from "@/components/ui/skeleton";
 
 import { isEqual } from "lodash";
@@ -431,6 +435,15 @@ export default function DraggableGridLayout({
   const [cameraZoomStates, setCameraZoomStates] = useState<
     Record<string, CameraZoomRuntimeTransform>
   >({});
+  const [cameraStatsData, setCameraStatsData] = useState<
+    Record<string, PlayerStatsType>
+  >({});
+  const [cameraLoadingStates, setCameraLoadingStates] = useState<
+    Record<string, boolean>
+  >({});
+  const [cameraMotionStates, setCameraMotionStates] = useState<
+    Record<string, boolean>
+  >({});
   const cameraZoomViewportRefs = useRef<Record<string, HTMLDivElement | null>>(
     {},
   );
@@ -808,7 +821,7 @@ export default function DraggableGridLayout({
                   streamMetadata={streamMetadata}
                 >
                   <div
-                    className="size-full overflow-hidden"
+                    className="relative size-full overflow-hidden"
                     ref={(node) => {
                       cameraZoomViewportRefs.current[camera.name] = node;
 
@@ -855,7 +868,25 @@ export default function DraggableGridLayout({
                           preferredLiveModes[camera.name] ?? "mse"
                         }
                         playInBackground={false}
-                        showStats={statsStates[camera.name] ?? true}
+                        showStats={false}
+                        onStatsUpdate={(stats) =>
+                          setCameraStatsData((prev) => ({
+                            ...prev,
+                            [camera.name]: stats,
+                          }))
+                        }
+                        onLoadingChange={(loading) =>
+                          setCameraLoadingStates((prev) => ({
+                            ...prev,
+                            [camera.name]: loading,
+                          }))
+                        }
+                        onActiveMotionChange={(active) =>
+                          setCameraMotionStates((prev) => ({
+                            ...prev,
+                            [camera.name]: active,
+                          }))
+                        }
                         onClick={() => {
                           !isEditMode && onSelectCamera(camera.name);
                         }}
@@ -875,6 +906,23 @@ export default function DraggableGridLayout({
                         volume={volumeStates[camera.name]}
                       />
                     </div>
+                    {cameraLoadingStates[camera.name] && (
+                      <div className="absolute inset-0 flex items-center justify-center">
+                        <ActivityIndicator />
+                      </div>
+                    )}
+                    {statsStates[camera.name] &&
+                      cameraStatsData[camera.name] && (
+                        <PlayerStats
+                          stats={cameraStatsData[camera.name]}
+                          minimal={true}
+                        />
+                      )}
+                    {cameraMotionStates[camera.name] && (
+                      <div className="absolute right-2 top-2 z-40">
+                        <MdCircle className="mr-2 size-2 animate-pulse text-danger shadow-danger drop-shadow-md" />
+                      </div>
+                    )}
                   </div>
                   {isEditMode && showCircles && <CornerCircles />}
                 </GridLiveContextMenu>