administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-08 12:15:25 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

set aspect ratios on live display

Browse Source
This commit is contained in:
Josh Hawkins 2024-02-10 09:09:59 -06:00
parent 44d8cdbba1
commit 8377e466a3
3 changed files with 23 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/components/Sidebar.tsx
View File

@ -74,8 +74,8 @@ function SidebarItem({ Icon, title, url, dev, onClick }: SidebarItemProps) {
className={({ isActive }) => className={({ isActive }) =>
`mx-[10px] mb-6 flex flex-col justify-center items-center rounded-lg ${ `mx-[10px] mb-6 flex flex-col justify-center items-center rounded-lg ${
isActive isActive
? "font-bold text-white bg-primary" ? "font-bold text-primary-foreground bg-primary"
: "text-muted-foreground bg-secondary" : "text-muted-foreground bg-muted"
}` }`
} }
> >

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

@ -23,6 +23,7 @@ const emptyObject = Object.freeze({});
type LivePlayerProps = { type LivePlayerProps = {
className?: string; className?: string;
aspectRatio?: string;
cameraConfig: CameraConfig; cameraConfig: CameraConfig;
preferredLiveMode?: LivePlayerMode; preferredLiveMode?: LivePlayerMode;
showStillWithoutActivity?: boolean; showStillWithoutActivity?: boolean;
@ -32,6 +33,7 @@ type Options = { [key: string]: boolean };
export default function LivePlayer({ export default function LivePlayer({
className, className,
aspectRatio,
cameraConfig, cameraConfig,
preferredLiveMode, preferredLiveMode,
showStillWithoutActivity = true, showStillWithoutActivity = true,
@ -166,6 +168,7 @@ export default function LivePlayer({
? "outline-destructive outline-1 rounded-2xl shadow-[0_0_6px_1px] shadow-destructive" ? "outline-destructive outline-1 rounded-2xl shadow-[0_0_6px_1px] shadow-destructive"
: "outline-0" : "outline-0"
} transition-all duration-500 ${className}`} } transition-all duration-500 ${className}`}
style={{ aspectRatio: aspectRatio }}
> >
{(showStillWithoutActivity == false || activeMotion || activeTracking) && {(showStillWithoutActivity == false || activeMotion || activeTracking) &&
player} player}

24
web/src/pages/Live.tsx
View File

@ -78,16 +78,19 @@ function Live() {
<div className="mt-4 md:grid md:grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4 gap-4"> <div className="mt-4 md:grid md:grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4 gap-4">
{cameras.map((camera) => { {cameras.map((camera) => {
let grow; let grow;
if (camera.detect.width / camera.detect.height > 2) { let aspectRatio = camera.detect.width / camera.detect.height;
grow = "aspect-wide md:col-span-2"; if (aspectRatio > 2) {
} else if (camera.detect.width / camera.detect.height < 1) { grow = "md:col-span-2";
grow = "aspect-tall md:aspect-auto md:row-span-2"; } else if (aspectRatio < 1) {
} else { grow = `md:row-span-2`;
grow = "aspect-video";
} }
return ( return (
<LivePlayer <LivePlayer
key={camera.name} key={camera.name}
aspectRatio={getAspectRatio(
camera.detect.width,
camera.detect.height
)}
className={`mb-2 md:mb-0 rounded-2xl bg-black ${grow}`} className={`mb-2 md:mb-0 rounded-2xl bg-black ${grow}`}
cameraConfig={camera} cameraConfig={camera}
preferredLiveMode="mse" preferredLiveMode="mse"
@ -99,4 +102,13 @@ function Live() {
); );
} }
function getAspectRatio(width: number, height: number): string {
const gcd = (a: number, b: number): number => {
return b === 0 ? a : gcd(b, a % b);
};
const common = gcd(width, height);
return `${width / common}/${height / common}`;
}
export default Live; export default Live;