Revert "Expose mediaContentStyle on LivePlayer and pass through to MSEPlayer and still image"

web/src/components/player/LivePlayer.tsx

@@ -3,7 +3,6 @@ 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";
@@ -49,7 +48,6 @@ type LivePlayerProps = {
   autoLive?: boolean;
   showStats?: boolean;
   onClick?: () => void;
-  mediaContentStyle?: CSSProperties;
   setFullResolution?: React.Dispatch<React.SetStateAction<VideoResolutionType>>;
   onError?: (error: LivePlayerError) => void;
   onResetLiveMode?: () => void;
@@ -75,7 +73,6 @@ export default function LivePlayer({
   autoLive = true,
   showStats = false,
   onClick,
-  mediaContentStyle,
   setFullResolution,
   onError,
   onResetLiveMode,
@@ -302,7 +299,6 @@ 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}
@@ -387,7 +383,6 @@ export default function LivePlayer({
             ? "visible"
             : "invisible",
         )}
-        style={mediaContentStyle}
       >
         <AutoUpdatingCameraImage
           className="pointer-events-none size-full"

web/src/components/player/MsePlayer.tsx

@@ -19,7 +19,6 @@ import { isIOS, isSafari } from "react-device-detect";
 type MSEPlayerProps = {
   camera: string;
   className?: string;
-  style?: CSSProperties;
   playbackEnabled?: boolean;
   audioEnabled?: boolean;
   volume?: number;
@@ -35,7 +34,6 @@ type MSEPlayerProps = {
 function MSEPlayer({
   camera,
   className,
-  style,
   playbackEnabled = true,
   audioEnabled = false,
   volume,
@@ -845,21 +843,15 @@ 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: combinedTransform,
+        transform:
+          "var(--frigate-mse-grid-rotation, none)" as CSSProperties["transform"],
         transformOrigin:
           "var(--frigate-mse-grid-rotation-origin, center center)" as CSSProperties["transformOrigin"],
         width: isRotatedGrid ? "100%" : undefined,

web/src/views/live/DraggableGridLayout.tsx

@@ -828,55 +828,59 @@ export default function DraggableGridLayout({
                       hydrateCameraZoomFromStorage(camera.name);
                     }}
                   >
-                    <LivePlayer
+                    <div
-                      key={camera.name}
+                      className="size-full"
-                      streamName={streamName}
+                      style={{
-                      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",
                       }}
-                      onClick={() => {
+                    >
-                        !isEditMode && onSelectCamera(camera.name);
+                      <LivePlayer
-                      }}
+                        key={camera.name}
-                      onError={(e) => {
+                        streamName={streamName}
-                        setPreferredLiveModes((prevModes) => {
+                        autoLive={autoLive ?? globalAutoLive}
-                          const newModes = { ...prevModes };
+                        showStillWithoutActivity={
-                          if (e === "mse-decode") {
+                          showStillWithoutActivity ?? true
-                            delete newModes[camera.name];
+                        }
-                          }
+                        alwaysShowCameraName={displayCameraNames}
-                          return newModes;
+                        useWebGL={useWebGL}
-                        });
+                        cameraRef={cameraRef}
-                      }}
+                        className={cn(
-                      onResetLiveMode={() =>
+                          "draggable-live-grid-mse-cover size-full rounded-lg bg-black md:rounded-2xl",
-                        resetPreferredLiveMode(camera.name)
+                          camera.ui?.rotate &&
-                      }
+                            "draggable-live-grid-rotated [--frigate-mse-grid-rotated:1] [--frigate-mse-grid-rotation:rotate(90deg)]",
-                      playAudio={audioStates[camera.name]}
+                          isEditMode &&
-                      volume={volumeStates[camera.name]}
+                            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>