Revert "Add per-camera dashboard rotation and cover-fit support for live views"

frigate/config/camera/ui.py

@@ -16,8 +16,3 @@ class CameraUiConfig(FrigateBaseModel):
         title="Show in UI",
         description="Toggle whether this camera is visible everywhere in the Frigate UI. Disabling this will require manually editing the config to view this camera in the UI again.",
     )
-    rotate: bool = Field(
-        default=False,
-        title="Rotate in grid",
-        description="Rotate this camera 90 degrees clockwise in multi-camera dashboard/grid views only.",
-    )

web/src/components/camera/AutoUpdatingCameraImage.tsx

@@ -9,7 +9,6 @@ type AutoUpdatingCameraImageProps = {
   cameraClasses?: string;
   reloadInterval?: number;
   periodicCache?: boolean;
-  fit?: "contain" | "cover";
 };
 
 const MIN_LOAD_TIMEOUT_MS = 200;
@@ -22,7 +21,6 @@ export default function AutoUpdatingCameraImage({
   cameraClasses,
   reloadInterval = MIN_LOAD_TIMEOUT_MS,
   periodicCache = false,
-  fit = "contain",
 }: AutoUpdatingCameraImageProps) {
   const [key, setKey] = useState(Date.now());
   const [fps, setFps] = useState<string>("0");
@@ -98,7 +96,6 @@ export default function AutoUpdatingCameraImage({
         onload={handleLoad}
         searchParams={cacheKey}
         className={cameraClasses}
-        fit={fit}
       />
       {showFps ? <span className="text-xs">Displaying at {fps}fps</span> : null}
     </div>

web/src/components/camera/CameraImage.tsx

@@ -12,7 +12,6 @@ type CameraImageProps = {
   camera: string;
   onload?: () => void;
   searchParams?: string;
-  fit?: "contain" | "cover";
 };
 
 export default function CameraImage({
@@ -20,7 +19,6 @@ export default function CameraImage({
   camera,
   onload,
   searchParams = "",
-  fit = "contain",
 }: CameraImageProps) {
   const { data: config } = useSWR("config");
   const apiHost = useApiHost();
@@ -89,16 +87,12 @@ export default function CameraImage({
         <img
           ref={imgRef}
           className={cn(
-            fit == "cover" ? "size-full object-cover" : "object-contain",
+            "object-contain",
-            fit == "cover"
+            imageLoaded
-              ? imageLoaded
+              ? isPortraitImage
-                ? "visible"
+                ? "h-full w-auto"
-                : "invisible"
+                : "h-auto w-full"
-              : imageLoaded
+              : "invisible",
-                ? isPortraitImage
-                  ? "h-full w-auto"
-                  : "h-auto w-full"
-                : "invisible",
             "rounded-lg md:rounded-2xl",
           )}
           onLoad={handleImageLoad}

web/src/components/player/JSMpegPlayer.tsx

@@ -16,7 +16,6 @@ type JSMpegPlayerProps = {
   useWebGL: boolean;
   setStats?: (stats: PlayerStatsType) => void;
   onPlaying?: () => void;
-  fit?: "contain" | "cover";
 };
 
 export default function JSMpegPlayer({
@@ -29,7 +28,6 @@ export default function JSMpegPlayer({
   useWebGL = false,
   setStats,
   onPlaying,
-  fit = "contain",
 }: JSMpegPlayerProps) {
   const url = `${baseUrl.replace(/^http/, "ws")}live/jsmpeg/${camera}`;
   const videoRef = useRef<HTMLDivElement>(null);
@@ -62,28 +60,8 @@ export default function JSMpegPlayer({
     [containerWidth, containerHeight],
   );
 
-  const scaledDimensions = useMemo(() => {
+  const scaledHeight = useMemo(() => {
-    if (!width || !height || !containerWidth || !containerHeight) {
+    if (selectedContainerRef?.current && width && height) {
-      return { width: undefined, height: undefined };
-    }
-
-    if (fit == "cover") {
-      if (aspectRatio < fitAspect) {
-        const coverWidth = Math.ceil(containerWidth);
-        return {
-          width: coverWidth,
-          height: Math.ceil(coverWidth / aspectRatio),
-        };
-      }
-
-      const coverHeight = Math.ceil(containerHeight);
-      return {
-        width: Math.ceil(coverHeight * aspectRatio),
-        height: coverHeight,
-      };
-    }
-
-    if (selectedContainerRef?.current) {
       const scaledHeight =
         aspectRatio < (fitAspect ?? 0)
           ? Math.floor(
@@ -100,31 +78,33 @@ export default function JSMpegPlayer({
         : Math.min(scaledHeight, height);
 
       if (finalHeight > 0) {
-        return {
+        return finalHeight;
-          width: Math.ceil(finalHeight * aspectRatio),
-          height: finalHeight,
-        };
       }
     }
-
+    return undefined;
-    return { width: undefined, height: undefined };
   }, [
     aspectRatio,
     containerWidth,
     containerHeight,
     fitAspect,
-    fit,
     height,
     width,
     stretch,
     selectedContainerRef,
   ]);
 
+  const scaledWidth = useMemo(() => {
+    if (aspectRatio && scaledHeight) {
+      return Math.ceil(scaledHeight * aspectRatio);
+    }
+    return undefined;
+  }, [scaledHeight, aspectRatio]);
+
   useEffect(() => {
-    if (scaledDimensions.width && scaledDimensions.height) {
+    if (scaledWidth && scaledHeight) {
       setDimensionsReady(true);
     }
-  }, [scaledDimensions]);
+  }, [scaledWidth, scaledHeight]);
 
   useEffect(() => {
     onPlayingRef.current = onPlaying;
@@ -262,7 +242,7 @@ export default function JSMpegPlayer({
         <div
           ref={videoRef}
           className={cn(
-            "jsmpeg flex size-full items-center justify-center overflow-hidden",
+            "jsmpeg flex h-full w-auto items-center justify-center",
             !showCanvas && "hidden",
           )}
         >
@@ -270,8 +250,8 @@ export default function JSMpegPlayer({
             ref={canvasRef}
             className="rounded-lg md:rounded-2xl"
             style={{
-              width: scaledDimensions.width,
+              width: scaledWidth,
-              height: scaledDimensions.height,
+              height: scaledHeight,
             }}
           ></canvas>
         </div>

web/src/components/player/LivePlayer.test.tsx

@@ -1,104 +0,0 @@
-import { renderToStaticMarkup } from "react-dom/server";
-import { describe, expect, it, vi } from "vitest";
-
-import LivePlayer from "./LivePlayer";
-import { CameraConfig } from "@/types/frigateConfig";
-
-vi.mock("@/hooks/resize-observer", () => ({
-  useResizeObserver: () => [{ width: 300, height: 200 }],
-}));
-
-vi.mock("@/hooks/use-camera-activity", () => ({
-  useCameraActivity: () => ({
-    enabled: true,
-    activeMotion: true,
-    activeTracking: false,
-    objects: [],
-    offline: false,
-  }),
-}));
-
-vi.mock("@/hooks/use-camera-friendly-name", () => ({
-  useCameraFriendlyName: () => "Front Door",
-}));
-
-vi.mock("react-i18next", () => ({
-  useTranslation: () => ({ t: (key: string) => key }),
-  Trans: ({ children }: { children: string }) => children,
-  initReactI18next: { type: "3rdParty", init: () => undefined },
-}));
-
-vi.mock("@/utils/i18n", () => ({
-  getTranslatedLabel: (value: string) => value,
-}));
-
-vi.mock("./WebRTCPlayer", () => ({
-  default: ({ className }: { className?: string }) => (
-    <video className={className}>webrtc</video>
-  ),
-}));
-
-vi.mock("./MsePlayer", () => ({
-  default: ({ className }: { className?: string }) => (
-    <video className={className}>mse</video>
-  ),
-}));
-
-vi.mock("./JSMpegPlayer", () => ({
-  default: ({ className }: { className?: string }) => (
-    <div className={className}>jsmpeg</div>
-  ),
-}));
-
-vi.mock("../camera/AutoUpdatingCameraImage", () => ({
-  default: () => <div>still</div>,
-}));
-
-vi.mock("../overlay/ImageShadowOverlay", () => ({
-  ImageShadowOverlay: () => <div />,
-}));
-
-vi.mock("./PlayerStats", () => ({
-  PlayerStats: () => <div />,
-}));
-
-const cameraConfig = {
-  name: "front_door",
-  detect: { width: 1920, height: 1080 },
-} as CameraConfig;
-
-describe("LivePlayer dashboard transform gating", () => {
-  it("does not apply rotate transform when applyDashboardTransforms is false", () => {
-    const html = renderToStaticMarkup(
-      <LivePlayer
-        cameraConfig={cameraConfig}
-        streamName="front_door"
-        preferredLiveMode="webrtc"
-        useWebGL={false}
-        playInBackground={false}
-        rotateClockwise
-        fillContainer
-        applyDashboardTransforms={false}
-      />,
-    );
-
-    expect(html).not.toContain("rotate(90deg)");
-  });
-
-  it("applies rotate transform when dashboard transforms are enabled", () => {
-    const html = renderToStaticMarkup(
-      <LivePlayer
-        cameraConfig={cameraConfig}
-        streamName="front_door"
-        preferredLiveMode="webrtc"
-        useWebGL={false}
-        playInBackground={false}
-        rotateClockwise
-        fillContainer
-        applyDashboardTransforms
-      />,
-    );
-
-    expect(html).toContain("rotate(90deg)");
-  });
-});

web/src/components/player/LivePlayer.tsx

@@ -27,7 +27,6 @@ import { useCameraFriendlyName } from "@/hooks/use-camera-friendly-name";
 import { ImageShadowOverlay } from "../overlay/ImageShadowOverlay";
 import { getTranslatedLabel } from "@/utils/i18n";
 import { formatList } from "@/utils/stringUtil";
-import { useResizeObserver } from "@/hooks/resize-observer";
 
 type LivePlayerProps = {
   cameraRef?: (ref: HTMLDivElement | null) => void;
@@ -48,9 +47,6 @@ type LivePlayerProps = {
   pip?: boolean;
   autoLive?: boolean;
   showStats?: boolean;
-  rotateClockwise?: boolean;
-  fillContainer?: boolean;
-  applyDashboardTransforms?: boolean;
   onClick?: () => void;
   setFullResolution?: React.Dispatch<React.SetStateAction<VideoResolutionType>>;
   onError?: (error: LivePlayerError) => void;
@@ -76,9 +72,6 @@ export default function LivePlayer({
   pip,
   autoLive = true,
   showStats = false,
-  rotateClockwise = false,
-  fillContainer = false,
-  applyDashboardTransforms = false,
   onClick,
   setFullResolution,
   onError,
@@ -90,31 +83,10 @@ export default function LivePlayer({
 
   const cameraName = useCameraFriendlyName(cameraConfig);
 
-  const shouldFillContainer = applyDashboardTransforms && fillContainer;
+  // player is showing on a dashboard if containerRef is not provided
-  const shouldRotateClockwise = applyDashboardTransforms && rotateClockwise;
 
-  const mediaViewportRef = useRef<HTMLDivElement | null>(null);
+  const inDashboard = containerRef?.current == null;
-  const [{ width: viewportWidth, height: viewportHeight }] =
-    useResizeObserver(mediaViewportRef);
 
-  const mediaTransformStyle = useMemo(() => {
-    const transforms = ["translate(-50%, -50%)"];
-
-    if (shouldRotateClockwise) {
-      transforms.push("rotate(90deg)");
-    }
-
-    // For a 90° rotation, the media box must use swapped viewport dimensions
-    // before rotating, otherwise the rotated content can under-fill one axis.
-    const rotatedWidth = viewportHeight ? `${viewportHeight}px` : "100%";
-    const rotatedHeight = viewportWidth ? `${viewportWidth}px` : "100%";
-
-    return {
-      transform: transforms.join(" "),
-      width: shouldRotateClockwise ? rotatedWidth : "100%",
-      height: shouldRotateClockwise ? rotatedHeight : "100%",
-    };
-  }, [shouldRotateClockwise, viewportHeight, viewportWidth]);
   // stats
 
   const [stats, setStats] = useState<PlayerStatsType>({
@@ -307,11 +279,7 @@ export default function LivePlayer({
     player = (
       <WebRtcPlayer
         key={"webrtc_" + key}
-        className={cn(
+        className={`size-full rounded-lg md:rounded-2xl ${liveReady ? "" : "hidden"}`}
-          "size-full rounded-lg md:rounded-2xl",
-          shouldFillContainer && "object-cover",
-          liveReady ? "" : "hidden",
-        )}
         camera={streamName}
         playbackEnabled={cameraActive || liveReady}
         getStats={showStats}
@@ -330,11 +298,7 @@ export default function LivePlayer({
       player = (
         <MSEPlayer
           key={"mse_" + key}
-          className={cn(
+          className={`size-full rounded-lg md:rounded-2xl ${liveReady ? "" : "hidden"}`}
-            "size-full rounded-lg md:rounded-2xl",
-            shouldFillContainer && "object-cover",
-            liveReady ? "" : "hidden",
-          )}
           camera={streamName}
           playbackEnabled={cameraActive || liveReady}
           audioEnabled={playAudio}
@@ -360,11 +324,7 @@ export default function LivePlayer({
       player = (
         <JSMpegPlayer
           key={"jsmpeg_" + key}
-          className={cn(
+          className="flex justify-center overflow-hidden rounded-lg md:rounded-2xl"
-            "flex size-full justify-center overflow-hidden rounded-lg md:rounded-2xl",
-            shouldFillContainer &&
-              "[&_.internal-jsmpeg-container]:size-full [&_.jsmpeg]:size-full",
-          )}
           camera={cameraConfig.name}
           width={cameraConfig.detect.width}
           height={cameraConfig.detect.height}
@@ -375,7 +335,6 @@ export default function LivePlayer({
           setStats={setStats}
           containerRef={containerRef ?? internalContainerRef}
           onPlaying={playerIsPlaying}
-          fit={shouldFillContainer ? "cover" : "contain"}
         />
       );
     } else {
@@ -412,17 +371,7 @@ export default function LivePlayer({
             lowerClassName="md:rounded-2xl"
           />
         )}
-      <div
+      {player}
-        ref={mediaViewportRef}
-        className={cn(
-          "absolute inset-0",
-          shouldFillContainer && "overflow-hidden",
-        )}
-      >
-        <div className="absolute left-1/2 top-1/2" style={mediaTransformStyle}>
-          {player}
-        </div>
-      </div>
       {cameraEnabled &&
         !offline &&
         (!showStillWithoutActivity || isReEnabling) &&
@@ -492,15 +441,8 @@ export default function LivePlayer({
         )}
       >
         <AutoUpdatingCameraImage
-          className={cn(
+          className="pointer-events-none size-full"
-            "pointer-events-none size-full",
+          cameraClasses="relative size-full flex justify-center"
-            shouldFillContainer && "overflow-hidden",
-          )}
-          cameraClasses={cn(
-            "relative size-full",
-            shouldFillContainer && "overflow-hidden",
-          )}
-          fit={shouldFillContainer ? "cover" : "contain"}
           camera={cameraConfig.name}
           showFps={false}
           reloadInterval={stillReloadInterval}
@@ -508,7 +450,7 @@ export default function LivePlayer({
         />
       </div>
 
-      {offline && applyDashboardTransforms && (
+      {offline && inDashboard && (
         <>
           <div className="absolute inset-0 rounded-lg bg-black/50 md:rounded-2xl" />
           <div className="absolute inset-0 left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center">

web/src/types/frigateConfig.ts

@@ -8,7 +8,6 @@ export interface UiConfig {
   time_style?: "full" | "long" | "medium" | "short";
   dashboard: boolean;
   order: number;
-  rotate: boolean;
   unit_system?: "metric" | "imperial";
 }
 

web/src/views/live/DraggableGridLayout.tsx

@@ -27,6 +27,7 @@ import {
   StatsState,
   VolumeState,
 } from "@/types/live";
+import { ASPECT_VERTICAL_LAYOUT, ASPECT_WIDE_LAYOUT } from "@/types/record";
 import { Skeleton } from "@/components/ui/skeleton";
 import { useResizeObserver } from "@/hooks/resize-observer";
 import { isEqual } from "lodash";
@@ -193,20 +194,38 @@ export default function DraggableGridLayout({
           return;
         }
 
-        // Keep birdseye aspect-aware sizing, while camera tiles use a stable size.
+        let aspectRatio;
-        const columnsPerPlayer = 4;
+        let col;
-        const col = index % 3;
-        let width = columnsPerPlayer;
-        let height = columnsPerPlayer;
 
+        // Handle "birdseye" camera as a special case
         if (cameraName === "birdseye") {
-          const aspectRatio =
+          aspectRatio =
             (birdseyeConfig?.width || 1) / (birdseyeConfig?.height || 1);
-          if (aspectRatio < 1) {
+          col = 0; // Set birdseye camera in the first column
-            height = 2 * columnsPerPlayer;
+        } else {
-          } else if (aspectRatio > 2) {
+          const camera = cameras.find((cam) => cam.name === cameraName);
-            width = 2 * columnsPerPlayer;
+          aspectRatio =
-          }
+            (camera && camera?.detect.width / camera?.detect.height) || 16 / 9;
+          col = index % 3; // Regular cameras distributed across columns
+        }
+
+        // Calculate layout options based on aspect ratio
+        const columnsPerPlayer = 4;
+        let height;
+        let width;
+
+        if (aspectRatio < 1) {
+          // Portrait
+          height = 2 * columnsPerPlayer;
+          width = columnsPerPlayer;
+        } else if (aspectRatio > 2) {
+          // Wide
+          height = 1 * columnsPerPlayer;
+          width = 2 * columnsPerPlayer;
+        } else {
+          // Landscape
+          height = 1 * columnsPerPlayer;
+          width = columnsPerPlayer;
         }
 
         const options = {
@@ -587,7 +606,15 @@ export default function DraggableGridLayout({
               </BirdseyeLivePlayerGridItem>
             )}
             {cameras.map((camera) => {
-              const grow = "size-full";
+              let grow;
+              const aspectRatio = camera.detect.width / camera.detect.height;
+              if (aspectRatio > ASPECT_WIDE_LAYOUT) {
+                grow = `aspect-wide w-full`;
+              } else if (aspectRatio < ASPECT_VERTICAL_LAYOUT) {
+                grow = `aspect-tall h-full`;
+              } else {
+                grow = "aspect-video";
+              }
               const availableStreams = camera.live.streams || {};
               const firstStreamEntry = Object.values(availableStreams)[0] || "";
 
@@ -654,7 +681,8 @@ export default function DraggableGridLayout({
                     useWebGL={useWebGL}
                     cameraRef={cameraRef}
                     className={cn(
-                      "size-full overflow-hidden rounded-lg bg-black md:rounded-2xl",
+                      "rounded-lg bg-black md:rounded-2xl",
+                      grow,
                       isEditMode &&
                         showCircles &&
                         "outline-2 outline-muted-foreground hover:cursor-grab hover:outline-4 active:cursor-grabbing",
@@ -681,9 +709,6 @@ export default function DraggableGridLayout({
                     onResetLiveMode={() => resetPreferredLiveMode(camera.name)}
                     playAudio={audioStates[camera.name]}
                     volume={volumeStates[camera.name]}
-                    rotateClockwise={camera.ui.rotate}
-                    fillContainer
-                    applyDashboardTransforms
                   />
                   {isEditMode && showCircles && <CornerCircles />}
                 </GridLiveContextMenu>

web/src/views/live/LiveDashboardView.tsx

@@ -511,7 +511,16 @@ export default function LiveDashboardView({
                   </div>
                 )}
                 {cameras.map((camera) => {
-                  const grow = "aspect-video";
+                  let grow;
+                  const aspectRatio =
+                    camera.detect.width / camera.detect.height;
+                  if (aspectRatio > 2) {
+                    grow = `${mobileLayout == "grid" && "col-span-2"} aspect-wide`;
+                  } else if (aspectRatio < 1) {
+                    grow = `${mobileLayout == "grid" && "row-span-2 h-full"} aspect-tall`;
+                  } else {
+                    grow = "aspect-video";
+                  }
                   const availableStreams = camera.live.streams || {};
                   const firstStreamEntry =
                     Object.values(availableStreams)[0] || "";
@@ -575,7 +584,7 @@ export default function LiveDashboardView({
                       <LivePlayer
                         cameraRef={cameraRef}
                         key={camera.name}
-                        className={`${grow} size-full overflow-hidden rounded-lg bg-black md:rounded-2xl`}
+                        className={`${grow} rounded-lg bg-black md:rounded-2xl`}
                         windowVisible={
                           windowVisible && visibleCameras.includes(camera.name)
                         }
@@ -599,9 +608,6 @@ export default function LiveDashboardView({
                         }
                         playAudio={audioStates[camera.name] ?? false}
                         volume={volumeStates[camera.name]}
-                        rotateClockwise={camera.ui.rotate}
-                        fillContainer
-                        applyDashboardTransforms
                       />
                     </LiveContextMenu>
                   );