administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-10 05:05:26 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Different layout for portrait recordings

Browse Source
This commit is contained in:
Nicolas Mowen 2024-03-15 15:56:54 -06:00
parent f23a22735c
commit 82d268d610
1 changed files with 28 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
web/src/views/events/RecordingView.tsx
View File

@ -170,21 +170,34 @@ export function DesktopRecordingView({
: null, : null,
); );
const grow = useMemo(() => { const mainCameraAspect = useMemo(() => {
if (!config) { if (!config) {
return "aspect-video"; return "normal";
} }
const aspectRatio = const aspectRatio =
config.cameras[mainCamera].detect.width / config.cameras[mainCamera].detect.width /
config.cameras[mainCamera].detect.height; config.cameras[mainCamera].detect.height;
if (aspectRatio > 2) { if (aspectRatio > 2) {
return "aspect-wide"; return "wide";
} else if (aspectRatio < 1) {
return "tall";
} else { } else {
return "aspect-video"; return "normal";
} }
}, [config, mainCamera]); }, [config, mainCamera]);
const grow = useMemo(() => {
if (mainCameraAspect == "wide") {
return "w-full aspect-wide";
} else if (mainCameraAspect == "tall") {
return "h-full aspect-tall";
} else {
return "w-full aspect-video";
}
}, [mainCameraAspect]);
return ( return (
<div ref={contentRef} className="relative size-full"> <div ref={contentRef} className="relative size-full">
<Button <Button
@ -197,13 +210,15 @@ export function DesktopRecordingView({
<div className="flex h-full justify-center overflow-hidden"> <div className="flex h-full justify-center overflow-hidden">
<div className="flex flex-1 flex-wrap"> <div className="flex flex-1 flex-wrap">
<div className="w-full flex flex-col h-full px-2 justify-center items-center"> <div
className={`size-full flex px-2 items-center ${mainCameraAspect == "tall" ? "flex-row justify-evenly" : "flex-col justify-center"}`}
>
<div <div
key={mainCamera} key={mainCamera}
className="w-[82%] flex justify-center items mb-5" className={`flex justify-center items mb-5 ${mainCameraAspect == "tall" ? "h-[96%]" : "w-[82%]"}`}
> >
<DynamicVideoPlayer <DynamicVideoPlayer
className={`w-full ${grow}`} className={grow}
camera={mainCamera} camera={mainCamera}
timeRange={currentTimeRange} timeRange={currentTimeRange}
cameraPreviews={allPreviews ?? []} cameraPreviews={allPreviews ?? []}
@ -222,13 +237,17 @@ export function DesktopRecordingView({
isScrubbing={scrubbing} isScrubbing={scrubbing}
/> />
</div> </div>
<div className="w-full flex justify-center gap-2 overflow-x-auto"> <div
className={`flex justify-center gap-2 ${mainCameraAspect == "tall" ? "h-full flex-col overflow-y-auto items-center" : "w-full overflow-x-auto"}`}
>
{allCameras.map((cam) => { {allCameras.map((cam) => {
if (cam !== mainCamera) { if (cam !== mainCamera) {
return ( return (
<div key={cam}> <div key={cam}>
<PreviewPlayer <PreviewPlayer
className="size-full" className={
mainCameraAspect == "tall" ? "" : "size-full"
}
camera={cam} camera={cam}
timeRange={currentTimeRange} timeRange={currentTimeRange}
cameraPreviews={allPreviews ?? []} cameraPreviews={allPreviews ?? []}