administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-03-18 06:08:22 +03:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Fix LivePlayer regression by gating dashboard transform path

Browse Source
This commit is contained in:
ibs0d 2026-03-08 15:48:06 +11:00
parent 6f97f3e873
commit e774760714
9 changed files with 305 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frigate/config/camera/ui.py
View File

@ -16,3 +16,8 @@ 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.",
)

3
web/src/components/camera/AutoUpdatingCameraImage.tsx
View File

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

18
web/src/components/camera/CameraImage.tsx
View File

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

52
web/src/components/player/JSMpegPlayer.tsx
View File

@ -16,6 +16,7 @@ type JSMpegPlayerProps = {
useWebGL: boolean;
setStats?: (stats: PlayerStatsType) => void;
onPlaying?: () => void;
fit?: "contain" | "cover";
};
export default function JSMpegPlayer({
@ -28,6 +29,7 @@ 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);
@ -60,8 +62,28 @@ export default function JSMpegPlayer({
[containerWidth, containerHeight],
);
const scaledHeight = useMemo(() => {
if (selectedContainerRef?.current && width && height) {
const scaledDimensions = useMemo(() => {
if (!width || !height || !containerWidth || !containerHeight) {
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(
@ -78,33 +100,31 @@ export default function JSMpegPlayer({
: Math.min(scaledHeight, height);
if (finalHeight > 0) {
return finalHeight;
return {
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 (scaledWidth && scaledHeight) {
if (scaledDimensions.width && scaledDimensions.height) {
setDimensionsReady(true);
}
}, [scaledWidth, scaledHeight]);
}, [scaledDimensions]);
useEffect(() => {
onPlayingRef.current = onPlaying;
@ -242,7 +262,7 @@ export default function JSMpegPlayer({
<div
ref={videoRef}
className={cn(
"jsmpeg flex h-full w-auto items-center justify-center",
"jsmpeg flex size-full items-center justify-center overflow-hidden",
!showCanvas && "hidden",
)}
>
@ -250,8 +270,8 @@ export default function JSMpegPlayer({
ref={canvasRef}
className="rounded-lg md:rounded-2xl"
style={{
width: scaledWidth,
height: scaledHeight,
width: scaledDimensions.width,
height: scaledDimensions.height,
}}
></canvas>
</div>

104
web/src/components/player/LivePlayer.test.tsx Normal file
View File

@ -0,0 +1,104 @@
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)");
});
});

149
web/src/components/player/LivePlayer.tsx
View File

@ -27,6 +27,7 @@ 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;
@ -47,6 +48,9 @@ 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;
@ -72,6 +76,9 @@ export default function LivePlayer({
pip,
autoLive = true,
showStats = false,
rotateClockwise = false,
fillContainer = false,
applyDashboardTransforms = false,
onClick,
setFullResolution,
onError,
@ -83,10 +90,31 @@ export default function LivePlayer({
const cameraName = useCameraFriendlyName(cameraConfig);
// player is showing on a dashboard if containerRef is not provided
const shouldFillContainer = applyDashboardTransforms && fillContainer;
const shouldRotateClockwise = applyDashboardTransforms && rotateClockwise;
const inDashboard = containerRef?.current == null;
const mediaViewportRef = useRef<HTMLDivElement | null>(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>({
@ -279,7 +307,11 @@ export default function LivePlayer({
player = (
<WebRtcPlayer
key={"webrtc_" + key}
className={`size-full rounded-lg md:rounded-2xl ${liveReady ? "" : "hidden"}`}
className={cn(
"size-full rounded-lg md:rounded-2xl",
shouldFillContainer && "object-cover",
liveReady ? "" : "hidden",
)}
camera={streamName}
playbackEnabled={cameraActive || liveReady}
getStats={showStats}
@ -298,7 +330,11 @@ export default function LivePlayer({
player = (
<MSEPlayer
key={"mse_" + key}
className={`size-full rounded-lg md:rounded-2xl ${liveReady ? "" : "hidden"}`}
className={cn(
"size-full rounded-lg md:rounded-2xl",
shouldFillContainer && "object-cover",
liveReady ? "" : "hidden",
)}
camera={streamName}
playbackEnabled={cameraActive || liveReady}
audioEnabled={playAudio}
@ -324,7 +360,11 @@ export default function LivePlayer({
player = (
<JSMpegPlayer
key={"jsmpeg_" + key}
className="flex justify-center overflow-hidden rounded-lg md:rounded-2xl"
className={cn(
"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}
@ -335,6 +375,7 @@ export default function LivePlayer({
setStats={setStats}
containerRef={containerRef ?? internalContainerRef}
onPlaying={playerIsPlaying}
fit={shouldFillContainer ? "cover" : "contain"}
/>
);
} else {
@ -371,7 +412,24 @@ export default function LivePlayer({
lowerClassName="md:rounded-2xl"
/>
)}
{player}
{applyDashboardTransforms ? (
<div
ref={mediaViewportRef}
className={cn(
"absolute inset-0",
shouldFillContainer && "overflow-hidden",
)}
>
<div
className="absolute left-1/2 top-1/2"
style={mediaTransformStyle}
>
{player}
</div>
</div>
) : (
player
)}
{cameraEnabled &&
!offline &&
(!showStillWithoutActivity || isReEnabling) &&
@ -429,28 +487,65 @@ export default function LivePlayer({
</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>
{applyDashboardTransforms ? (
<div
className={cn(
"absolute inset-0",
showStillWithoutActivity &&
!liveReady &&
!isReEnabling &&
cameraEnabled
? "visible"
: "invisible",
shouldFillContainer && "overflow-hidden",
)}
>
<div
className="absolute left-1/2 top-1/2"
style={mediaTransformStyle}
>
<AutoUpdatingCameraImage
className={cn(
"pointer-events-none size-full",
shouldFillContainer && "overflow-hidden",
)}
cameraClasses={cn(
"relative size-full",
shouldFillContainer && "overflow-hidden",
)}
fit={shouldFillContainer ? "cover" : "contain"}
camera={cameraConfig.name}
showFps={false}
reloadInterval={stillReloadInterval}
periodicCache
/>
</div>
</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"
fit="contain"
camera={cameraConfig.name}
showFps={false}
reloadInterval={stillReloadInterval}
periodicCache
/>
</div>
)}
{offline && inDashboard && (
{offline && applyDashboardTransforms && (
<>
<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">

1
web/src/types/frigateConfig.ts
View File

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

59
web/src/views/live/DraggableGridLayout.tsx
View File

@ -27,7 +27,6 @@ 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";
@ -194,38 +193,20 @@ export default function DraggableGridLayout({
return;
}
let aspectRatio;
let col;
// Handle "birdseye" camera as a special case
if (cameraName === "birdseye") {
aspectRatio =
(birdseyeConfig?.width || 1) / (birdseyeConfig?.height || 1);
col = 0; // Set birdseye camera in the first column
} else {
const camera = cameras.find((cam) => cam.name === cameraName);
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
// Keep birdseye aspect-aware sizing, while camera tiles use a stable size.
const columnsPerPlayer = 4;
let height;
let width;
const col = index % 3;
let width = columnsPerPlayer;
let height = columnsPerPlayer;
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;
if (cameraName === "birdseye") {
const aspectRatio =
(birdseyeConfig?.width || 1) / (birdseyeConfig?.height || 1);
if (aspectRatio < 1) {
height = 2 * columnsPerPlayer;
} else if (aspectRatio > 2) {
width = 2 * columnsPerPlayer;
}
}
const options = {
@ -606,15 +587,7 @@ export default function DraggableGridLayout({
</BirdseyeLivePlayerGridItem>
)}
{cameras.map((camera) => {
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 grow = "size-full";
const availableStreams = camera.live.streams || {};
const firstStreamEntry = Object.values(availableStreams)[0] || "";
@ -681,8 +654,7 @@ export default function DraggableGridLayout({
useWebGL={useWebGL}
cameraRef={cameraRef}
className={cn(
"rounded-lg bg-black md:rounded-2xl",
grow,
"size-full overflow-hidden rounded-lg bg-black md:rounded-2xl",
isEditMode &&
showCircles &&
"outline-2 outline-muted-foreground hover:cursor-grab hover:outline-4 active:cursor-grabbing",
@ -709,6 +681,9 @@ 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>

16
web/src/views/live/LiveDashboardView.tsx
View File

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