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 1 Packages Projects Releases Wiki Activity

Merge pull request #21 from ibs0d/codex/update-camera-card-sizing-in-draggable-grid

Browse Source 
Simplify regular camera sizing in draggable live grid
This commit is contained in:
ibs0d 2026-03-08 18:06:19 +11:00 committed by GitHub
commit defa1dfabd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 3 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -27,7 +27,6 @@ import {
StatsState, StatsState,
VolumeState, VolumeState,
} from "@/types/live"; } from "@/types/live";
import { ASPECT_VERTICAL_LAYOUT, ASPECT_WIDE_LAYOUT } from "@/types/record";
import { Skeleton } from "@/components/ui/skeleton"; import { Skeleton } from "@/components/ui/skeleton";
import { useResizeObserver } from "@/hooks/resize-observer"; import { useResizeObserver } from "@/hooks/resize-observer";
import { isEqual } from "lodash"; import { isEqual } from "lodash";
@ -203,9 +202,7 @@ export default function DraggableGridLayout({
(birdseyeConfig?.width || 1) / (birdseyeConfig?.height || 1); (birdseyeConfig?.width || 1) / (birdseyeConfig?.height || 1);
col = 0; // Set birdseye camera in the first column col = 0; // Set birdseye camera in the first column
} else { } else {
const camera = cameras.find((cam) => cam.name === cameraName); aspectRatio = 16 / 9;
aspectRatio =
(camera && camera?.detect.width / camera?.detect.height) || 16 / 9;
col = index % 3; // Regular cameras distributed across columns col = index % 3; // Regular cameras distributed across columns
} }
@ -606,15 +603,6 @@ export default function DraggableGridLayout({
</BirdseyeLivePlayerGridItem> </BirdseyeLivePlayerGridItem>
)} )}
{cameras.map((camera) => { {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 availableStreams = camera.live.streams || {}; const availableStreams = camera.live.streams || {};
const firstStreamEntry = Object.values(availableStreams)[0] || ""; const firstStreamEntry = Object.values(availableStreams)[0] || "";
@ -643,7 +631,7 @@ export default function DraggableGridLayout({
?.compatibilityMode || false; ?.compatibilityMode || false;
return ( return (
<GridLiveContextMenu <GridLiveContextMenu
className={grow} className="size-full"
key={camera.name} key={camera.name}
camera={camera.name} camera={camera.name}
streamName={streamName} streamName={streamName}
@ -681,8 +669,7 @@ export default function DraggableGridLayout({
useWebGL={useWebGL} useWebGL={useWebGL}
cameraRef={cameraRef} cameraRef={cameraRef}
className={cn( className={cn(
"rounded-lg bg-black md:rounded-2xl", "size-full rounded-lg bg-black md:rounded-2xl",
grow,
isEditMode && isEditMode &&
showCircles && showCircles &&
"outline-2 outline-muted-foreground hover:cursor-grab hover:outline-4 active:cursor-grabbing", "outline-2 outline-muted-foreground hover:cursor-grab hover:outline-4 active:cursor-grabbing",