Merge pull request #34 from ibs0d/codex/fix-zoom-behavior-in-draggablegridlayout

Apply grid zoom to video layer only and keep overlays anchored

web/src/components/player/LivePlayer.tsx

@@ -51,6 +51,11 @@ type LivePlayerProps = {
   setFullResolution?: React.Dispatch<React.SetStateAction<VideoResolutionType>>;
   onError?: (error: LivePlayerError) => void;
   onResetLiveMode?: () => void;
+  contentTransform?: {
+    scale: number;
+    positionX: number;
+    positionY: number;
+  };
 };
 
 export default function LivePlayer({
@@ -76,6 +81,7 @@ export default function LivePlayer({
   setFullResolution,
   onError,
   onResetLiveMode,
+  contentTransform,
 }: LivePlayerProps) {
   const { t } = useTranslation(["components/player"]);
 
@@ -371,7 +377,41 @@ export default function LivePlayer({
             lowerClassName="md:rounded-2xl"
           />
         )}
-      {player}
+      <div
+        className="absolute inset-0"
+        style={
+          contentTransform
+            ? {
+                transform: `translate(${contentTransform.positionX}px, ${contentTransform.positionY}px) scale(${contentTransform.scale})`,
+                transformOrigin: "0 0",
+              }
+            : undefined
+        }
+      >
+        {player}
+
+        <div
+          className={cn(
+            "absolute inset-0 w-full",
+            showStillWithoutActivity &&
+              !liveReady &&
+              !isReEnabling &&
+              cameraEnabled
+              ? "visible"
+              : "invisible",
+          )}
+        >
+          <AutoUpdatingCameraImage
+            className="pointer-events-none size-full"
+            cameraClasses="relative size-full flex justify-center"
+            camera={cameraConfig.name}
+            showFps={false}
+            reloadInterval={stillReloadInterval}
+            periodicCache
+          />
+        </div>
+      </div>
+
       {cameraEnabled &&
         !offline &&
         (!showStillWithoutActivity || isReEnabling) &&
@@ -429,27 +469,6 @@ export default function LivePlayer({
           </div>
         )}
 
-      <div
-        className={cn(
-          "absolute inset-0 w-full",
-          showStillWithoutActivity &&
-            !liveReady &&
-            !isReEnabling &&
-            cameraEnabled
-            ? "visible"
-            : "invisible",
-        )}
-      >
-        <AutoUpdatingCameraImage
-          className="pointer-events-none size-full"
-          cameraClasses="relative size-full flex justify-center"
-          camera={cameraConfig.name}
-          showFps={false}
-          reloadInterval={stillReloadInterval}
-          periodicCache
-        />
-      </div>
-
       {offline && inDashboard && (
         <>
           <div className="absolute inset-0 rounded-lg bg-black/50 md:rounded-2xl" />

web/src/views/live/DraggableGridLayout.tsx

@@ -514,7 +514,8 @@ export default function DraggableGridLayout({
           cursorX,
           cursorY,
         );
-        const content = event.currentTarget.firstElementChild as HTMLElement | null;
+        const content = event.currentTarget
+          .firstElementChild as HTMLElement | null;
         const persisted = toPersistedCameraZoomState(next, {
           viewportWidth: bounds.width,
           viewportHeight: bounds.height,
@@ -787,59 +788,52 @@ export default function DraggableGridLayout({
                     }}
                     onWheel={(event) => handleCardWheelZoom(camera.name, event)}
                   >
-                    <div
+                    <LivePlayer
-                      className="size-full"
+                      key={camera.name}
-                      style={{
+                      streamName={streamName}
-                        transform: `translate(${zoomTransform.positionX}px, ${zoomTransform.positionY}px) scale(${zoomTransform.scale})`,
+                      autoLive={autoLive ?? globalAutoLive}
-                        transformOrigin: "0 0",
+                      showStillWithoutActivity={
+                        showStillWithoutActivity ?? true
+                      }
+                      alwaysShowCameraName={displayCameraNames}
+                      useWebGL={useWebGL}
+                      cameraRef={cameraRef}
+                      contentTransform={zoomTransform}
+                      className={cn(
+                        "draggable-live-grid-mse-cover size-full rounded-lg bg-black md:rounded-2xl",
+                        camera.ui?.rotate &&
+                          "draggable-live-grid-rotated [--frigate-mse-grid-rotated:1] [--frigate-mse-grid-rotation:rotate(90deg)]",
+                        isEditMode &&
+                          showCircles &&
+                          "outline-2 outline-muted-foreground hover:cursor-grab hover:outline-4 active:cursor-grabbing",
+                      )}
+                      windowVisible={
+                        windowVisible && visibleCameras.includes(camera.name)
+                      }
+                      cameraConfig={camera}
+                      preferredLiveMode={
+                        preferredLiveModes[camera.name] ?? "mse"
+                      }
+                      playInBackground={false}
+                      showStats={statsStates[camera.name] ?? true}
+                      onClick={() => {
+                        !isEditMode && onSelectCamera(camera.name);
                       }}
-                    >
+                      onError={(e) => {
-                      <LivePlayer
+                        setPreferredLiveModes((prevModes) => {
-                        key={camera.name}
+                          const newModes = { ...prevModes };
-                        streamName={streamName}
+                          if (e === "mse-decode") {
-                        autoLive={autoLive ?? globalAutoLive}
+                            delete newModes[camera.name];
-                        showStillWithoutActivity={
+                          }
-                          showStillWithoutActivity ?? true
+                          return newModes;
-                        }
+                        });
-                        alwaysShowCameraName={displayCameraNames}
+                      }}
-                        useWebGL={useWebGL}
+                      onResetLiveMode={() =>
-                        cameraRef={cameraRef}
+                        resetPreferredLiveMode(camera.name)
-                        className={cn(
+                      }
-                          "draggable-live-grid-mse-cover size-full rounded-lg bg-black md:rounded-2xl",
+                      playAudio={audioStates[camera.name]}
-                          camera.ui?.rotate &&
+                      volume={volumeStates[camera.name]}
-                            "draggable-live-grid-rotated [--frigate-mse-grid-rotated:1] [--frigate-mse-grid-rotation:rotate(90deg)]",
+                    />
-                          isEditMode &&
-                            showCircles &&
-                            "outline-2 outline-muted-foreground hover:cursor-grab hover:outline-4 active:cursor-grabbing",
-                        )}
-                        windowVisible={
-                          windowVisible && visibleCameras.includes(camera.name)
-                        }
-                        cameraConfig={camera}
-                        preferredLiveMode={
-                          preferredLiveModes[camera.name] ?? "mse"
-                        }
-                        playInBackground={false}
-                        showStats={statsStates[camera.name] ?? true}
-                        onClick={() => {
-                          !isEditMode && onSelectCamera(camera.name);
-                        }}
-                        onError={(e) => {
-                          setPreferredLiveModes((prevModes) => {
-                            const newModes = { ...prevModes };
-                            if (e === "mse-decode") {
-                              delete newModes[camera.name];
-                            }
-                            return newModes;
-                          });
-                        }}
-                        onResetLiveMode={() =>
-                          resetPreferredLiveMode(camera.name)
-                        }
-                        playAudio={audioStates[camera.name]}
-                        volume={volumeStates[camera.name]}
-                      />
-                    </div>
                   </div>
                   {isEditMode && showCircles && <CornerCircles />}
                 </GridLiveContextMenu>