From 171688445d8e0b68cb406284ada6139c61112dc5 Mon Sep 17 00:00:00 2001
From: ibs0d <53568938+ibs0d@users.noreply.github.com>
Date: Mon, 9 Mar 2026 13:57:16 +1100
Subject: [PATCH] Revert LivePlayer transform wrapper regression

---
 web/src/components/player/LivePlayer.tsx   | 58 ++++++++--------------
 web/src/views/live/DraggableGridLayout.tsx |  5 +-
 2 files changed, 21 insertions(+), 42 deletions(-)

diff --git a/web/src/components/player/LivePlayer.tsx b/web/src/components/player/LivePlayer.tsx
index d89f59f72..717e9a59d 100644
--- a/web/src/components/player/LivePlayer.tsx
+++ b/web/src/components/player/LivePlayer.tsx
@@ -51,11 +51,6 @@ 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({
@@ -81,7 +76,6 @@ export default function LivePlayer({
   setFullResolution,
   onError,
   onResetLiveMode,
-  contentTransform,
 }: LivePlayerProps) {
   const { t } = useTranslation(["components/player"]);
 
@@ -377,39 +371,27 @@ export default function LivePlayer({
             lowerClassName="md:rounded-2xl"
           />
         )}
-      <div
-        className="absolute inset-0"
-        style={
-          contentTransform
-            ? {
-                transform: `translate(${contentTransform.positionX}px, ${contentTransform.positionY}px) scale(${contentTransform.scale})`,
-                transformOrigin: "0 0",
-              }
-            : undefined
-        }
-      >
-        {player}
+      {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
+        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>
 
       {cameraEnabled &&
diff --git a/web/src/views/live/DraggableGridLayout.tsx b/web/src/views/live/DraggableGridLayout.tsx
index 74fddf494..14bd94d2d 100644
--- a/web/src/views/live/DraggableGridLayout.tsx
+++ b/web/src/views/live/DraggableGridLayout.tsx
@@ -435,7 +435,7 @@ export default function DraggableGridLayout({
   const [audioStates, setAudioStates] = useState<AudioState>({});
   const [volumeStates, setVolumeStates] = useState<VolumeState>({});
   const [statsStates, setStatsStates] = useState<StatsState>({});
-  const [cameraZoomStates, setCameraZoomStates] = useState<
+  const [_cameraZoomStates, setCameraZoomStates] = useState<
     Record<string, CameraZoomRuntimeTransform>
   >({});
   const cameraZoomViewportRefs = useRef<Record<string, HTMLDivElement | null>>(
@@ -779,8 +779,6 @@ export default function DraggableGridLayout({
               const useWebGL =
                 currentGroupStreamingSettings?.[camera.name]
                   ?.compatibilityMode || false;
-              const zoomTransform =
-                cameraZoomStates[camera.name] ?? getDefaultZoomTransform();
               return (
                 <GridLiveContextMenu
                   className="size-full"
@@ -837,7 +835,6 @@ export default function DraggableGridLayout({
                       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 &&