administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-06-21 03:41:55 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

improve motion search layout to match tracking details

Browse Source
This commit is contained in:
Josh Hawkins 2026-05-30 23:08:40 -05:00
parent c2d1583397
commit a3c46e45fd
1 changed files with 32 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
web/src/views/motion-search/MotionSearchDialog.tsx
View File

@ -6,6 +6,7 @@ import { MdOutlineRestartAlt, MdUndo } from "react-icons/md";
import { FrigateConfig } from "@/types/frigateConfig";
import { TimeRange } from "@/types/timeline";
import { ASPECT_PORTRAIT_LAYOUT, ASPECT_WIDE_LAYOUT } from "@/types/record";
import { Button } from "@/components/ui/button";
import {
@ -119,6 +120,27 @@ export default function MotionSearchDialog({
return config.cameras[selectedCamera];
}, [config, selectedCamera]);
const aspectRatio = useMemo(() => {
if (!cameraConfig) {
return 16 / 9;
}
return cameraConfig.detect.width / cameraConfig.detect.height;
}, [cameraConfig]);
// Determine camera aspect ratio category
const cameraAspect = useMemo(() => {
if (!aspectRatio) {
return "normal";
} else if (aspectRatio > ASPECT_WIDE_LAYOUT) {
return "wide";
} else if (aspectRatio < ASPECT_PORTRAIT_LAYOUT) {
return "tall";
} else {
return "normal";
}
}, [aspectRatio]);
const polygonClosed = useMemo(
() => !isDrawingROI && polygonPoints.length >= 3,
[isDrawingROI, polygonPoints.length],
@ -231,7 +253,15 @@ export default function MotionSearchDialog({
height: "100%",
}}
>
<div className="relative flex aspect-video w-full items-center justify-center overflow-hidden rounded-lg border bg-secondary">
<div
className={cn(
"relative mx-auto flex items-center justify-center overflow-hidden rounded-lg border bg-secondary",
cameraAspect === "tall"
? "max-h-[50dvh] lg:max-h-[60dvh]"
: "w-full",
)}
style={{ aspectRatio }}
>
{selectedCamera && cameraConfig ? (
<div className="relative h-full w-full">
<img
@ -370,7 +400,7 @@ export default function MotionSearchDialog({
<Slider
id="frameSkip"
min={1}
max={60}
max={120}
step={1}
value={[frameSkip]}
onValueChange={([value]) => setFrameSkip(value)}