From 078b6f62a77de34b0043cd967af382738e517e2b Mon Sep 17 00:00:00 2001
From: ibs0d <53568938+ibs0d@users.noreply.github.com>
Date: Mon, 9 Mar 2026 15:07:43 +1100
Subject: [PATCH] Revert non-MSE style props from live players

---
 web/src/components/player/LivePlayer.tsx   |  5 ++
 web/src/components/player/MsePlayer.tsx    | 12 ++-
 web/src/views/live/DraggableGridLayout.tsx | 96 +++++++++++-----------
 3 files changed, 61 insertions(+), 52 deletions(-)

diff --git a/web/src/components/player/LivePlayer.tsx b/web/src/components/player/LivePlayer.tsx
index 717e9a59d..baf555d8b 100644
--- a/web/src/components/player/LivePlayer.tsx
+++ b/web/src/components/player/LivePlayer.tsx
@@ -3,6 +3,7 @@ import { CameraConfig } from "@/types/frigateConfig";
 import AutoUpdatingCameraImage from "../camera/AutoUpdatingCameraImage";
 import ActivityIndicator from "../indicators/activity-indicator";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { CSSProperties } from "react";
 import MSEPlayer from "./MsePlayer";
 import JSMpegPlayer from "./JSMpegPlayer";
 import { MdCircle } from "react-icons/md";
@@ -48,6 +49,7 @@ type LivePlayerProps = {
   autoLive?: boolean;
   showStats?: boolean;
   onClick?: () => void;
+  mediaContentStyle?: CSSProperties;
   setFullResolution?: React.Dispatch<React.SetStateAction<VideoResolutionType>>;
   onError?: (error: LivePlayerError) => void;
   onResetLiveMode?: () => void;
@@ -73,6 +75,7 @@ export default function LivePlayer({
   autoLive = true,
   showStats = false,
   onClick,
+  mediaContentStyle,
   setFullResolution,
   onError,
   onResetLiveMode,
@@ -299,6 +302,7 @@ export default function LivePlayer({
         <MSEPlayer
           key={"mse_" + key}
           className={`size-full rounded-lg md:rounded-2xl ${liveReady ? "" : "hidden"}`}
+          style={mediaContentStyle}
           camera={streamName}
           playbackEnabled={cameraActive || liveReady}
           audioEnabled={playAudio}
@@ -383,6 +387,7 @@ export default function LivePlayer({
             ? "visible"
             : "invisible",
         )}
+        style={mediaContentStyle}
       >
         <AutoUpdatingCameraImage
           className="pointer-events-none size-full"
diff --git a/web/src/components/player/MsePlayer.tsx b/web/src/components/player/MsePlayer.tsx
index 382c879f8..d1f7fca73 100644
--- a/web/src/components/player/MsePlayer.tsx
+++ b/web/src/components/player/MsePlayer.tsx
@@ -19,6 +19,7 @@ import { isIOS, isSafari } from "react-device-detect";
 type MSEPlayerProps = {
   camera: string;
   className?: string;
+  style?: CSSProperties;
   playbackEnabled?: boolean;
   audioEnabled?: boolean;
   volume?: number;
@@ -34,6 +35,7 @@ type MSEPlayerProps = {
 function MSEPlayer({
   camera,
   className,
+  style,
   playbackEnabled = true,
   audioEnabled = false,
   volume,
@@ -843,15 +845,21 @@ function MSEPlayer({
     };
   }, [isRotatedGrid]);
 
+  const rotationTransform =
+    "var(--frigate-mse-grid-rotation, none)" as CSSProperties["transform"];
+  const combinedTransform = style?.transform
+    ? `${style.transform} ${rotationTransform}`
+    : rotationTransform;
+
   const videoElement = (
     <video
       ref={videoRef}
       className={className}
       style={{
+        ...style,
         objectFit:
           "var(--frigate-mse-object-fit, fill)" as CSSProperties["objectFit"],
-        transform:
-          "var(--frigate-mse-grid-rotation, none)" as CSSProperties["transform"],
+        transform: combinedTransform,
         transformOrigin:
           "var(--frigate-mse-grid-rotation-origin, center center)" as CSSProperties["transformOrigin"],
         width: isRotatedGrid ? "100%" : undefined,
diff --git a/web/src/views/live/DraggableGridLayout.tsx b/web/src/views/live/DraggableGridLayout.tsx
index ee57758b2..34f9a72ad 100644
--- a/web/src/views/live/DraggableGridLayout.tsx
+++ b/web/src/views/live/DraggableGridLayout.tsx
@@ -828,59 +828,55 @@ export default function DraggableGridLayout({
                       hydrateCameraZoomFromStorage(camera.name);
                     }}
                   >
-                    <div
-                      className="size-full"
-                      style={{
+                    <LivePlayer
+                      key={camera.name}
+                      streamName={streamName}
+                      autoLive={autoLive ?? globalAutoLive}
+                      showStillWithoutActivity={
+                        showStillWithoutActivity ?? true
+                      }
+                      alwaysShowCameraName={displayCameraNames}
+                      useWebGL={useWebGL}
+                      cameraRef={cameraRef}
+                      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}
+                      mediaContentStyle={{
                         transform: `translate3d(${cameraZoomTransform.positionX}px, ${cameraZoomTransform.positionY}px, 0) scale(${cameraZoomTransform.scale})`,
                         transformOrigin: "top left",
                       }}
-                    >
-                      <LivePlayer
-                        key={camera.name}
-                        streamName={streamName}
-                        autoLive={autoLive ?? globalAutoLive}
-                        showStillWithoutActivity={
-                          showStillWithoutActivity ?? true
-                        }
-                        alwaysShowCameraName={displayCameraNames}
-                        useWebGL={useWebGL}
-                        cameraRef={cameraRef}
-                        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) => {
-                          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>
+                      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>
                   {isEditMode && showCircles && <CornerCircles />}
                 </GridLiveContextMenu>