Revert non-MSE style props from live players

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"

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,

web/src/views/live/DraggableGridLayout.tsx

@@ -827,13 +827,6 @@ export default function DraggableGridLayout({
 
                       hydrateCameraZoomFromStorage(camera.name);
                     }}
-                  >
-                    <div
-                      className="size-full"
-                      style={{
-                        transform: `translate3d(${cameraZoomTransform.positionX}px, ${cameraZoomTransform.positionY}px, 0) scale(${cameraZoomTransform.scale})`,
-                        transformOrigin: "top left",
-                      }}
                   >
                     <LivePlayer
                       key={camera.name}
@@ -862,6 +855,10 @@ export default function DraggableGridLayout({
                       }
                       playInBackground={false}
                       showStats={statsStates[camera.name] ?? true}
+                      mediaContentStyle={{
+                        transform: `translate3d(${cameraZoomTransform.positionX}px, ${cameraZoomTransform.positionY}px, 0) scale(${cameraZoomTransform.scale})`,
+                        transformOrigin: "top left",
+                      }}
                       onClick={() => {
                         !isEditMode && onSelectCamera(camera.name);
                       }}
@@ -881,7 +878,6 @@ export default function DraggableGridLayout({
                       volume={volumeStates[camera.name]}
                     />
                   </div>
-                  </div>
                   {isEditMode && showCircles && <CornerCircles />}
                 </GridLiveContextMenu>
               );