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

use pure css for motion search dialog video

Browse Source
This commit is contained in:
Josh Hawkins 2026-05-30 22:14:20 -05:00
parent 98653fd844
commit d3519933a1
1 changed files with 2 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -112,35 +112,8 @@ export default function MotionSearchDialog({
}: MotionSearchDialogProps) { }: MotionSearchDialogProps) {
const { t } = useTranslation(["views/motionSearch", "common"]); const { t } = useTranslation(["views/motionSearch", "common"]);
const apiHost = useApiHost(); const apiHost = useApiHost();
const [containerNode, setContainerNode] = useState<HTMLDivElement | null>(
null,
);
const [containerSize, setContainerSize] = useState({ width: 0, height: 0 });
const containerWidth = containerSize.width;
const containerHeight = containerSize.height;
const [imageLoaded, setImageLoaded] = useState(false); const [imageLoaded, setImageLoaded] = useState(false);
useEffect(() => {
if (!containerNode) {
return;
}
const measure = () => {
const rect = containerNode.getBoundingClientRect();
setContainerSize((prev) =>
prev.width === rect.width && prev.height === rect.height
? prev
: { width: rect.width, height: rect.height },
);
};
measure();
const observer = new ResizeObserver(() => measure());
observer.observe(containerNode);
return () => observer.disconnect();
}, [containerNode]);
const cameraConfig = useMemo(() => { const cameraConfig = useMemo(() => {
if (!selectedCamera) return undefined; if (!selectedCamera) return undefined;
return config.cameras[selectedCamera]; return config.cameras[selectedCamera];
@ -169,28 +142,6 @@ export default function MotionSearchDialog({
setIsDrawingROI(true); setIsDrawingROI(true);
}, [isSearching, polygonPoints.length, setIsDrawingROI, setPolygonPoints]); }, [isSearching, polygonPoints.length, setIsDrawingROI, setPolygonPoints]);
const imageSize = useMemo(() => {
if (!containerWidth || !containerHeight || !cameraConfig) {
return { width: 0, height: 0 };
}
const cameraAspectRatio =
cameraConfig.detect.width / cameraConfig.detect.height;
const availableAspectRatio = containerWidth / containerHeight;
if (availableAspectRatio >= cameraAspectRatio) {
return {
width: containerHeight * cameraAspectRatio,
height: containerHeight,
};
}
return {
width: containerWidth,
height: containerWidth / cameraAspectRatio,
};
}, [containerWidth, containerHeight, cameraConfig]);
useEffect(() => { useEffect(() => {
setImageLoaded(false); setImageLoaded(false);
}, [selectedCamera]); }, [selectedCamera]);
@ -280,19 +231,9 @@ export default function MotionSearchDialog({
height: "100%", height: "100%",
}} }}
> >
<div <div className="relative flex aspect-video w-full items-center justify-center overflow-hidden rounded-lg border bg-secondary">
ref={setContainerNode}
className="relative flex w-full items-center justify-center overflow-hidden rounded-lg border bg-secondary"
style={{ aspectRatio: "16 / 9" }}
>
{selectedCamera && cameraConfig ? ( {selectedCamera && cameraConfig ? (
<div <div className="relative h-full w-full">
className="relative"
style={{
width: imageSize.width || "100%",
height: imageSize.height || "100%",
}}
>
<img <img
alt={t("dialog.previewAlt", { alt={t("dialog.previewAlt", {
camera: selectedCamera, camera: selectedCamera,