mirror of
https://github.com/blakeblackshear/frigate.git
synced 2026-03-10 10:33:11 +03:00
add ability to filter motion previews via heatmap grid
This commit is contained in:
Josh Hawkins
parent
b2c7840c29
commit
f3c8f69c2b
110
web/src/components/filter/MotionRegionFilterGrid.tsx
Normal file
110
web/src/components/filter/MotionRegionFilterGrid.tsx
Normal file
@ -0,0 +1,110 @@
|
||||
import { baseUrl } from "@/api/baseUrl";
|
||||
import { useCallback, useRef } from "react";
|
||||
|
||||
const GRID_SIZE = 16;
|
||||
|
||||
type MotionRegionFilterGridProps = {
|
||||
cameraName: string;
|
||||
selectedCells: Set<number>;
|
||||
onCellsChange: (cells: Set<number>) => void;
|
||||
};
|
||||
|
||||
export default function MotionRegionFilterGrid({
|
||||
cameraName,
|
||||
selectedCells,
|
||||
onCellsChange,
|
||||
}: MotionRegionFilterGridProps) {
|
||||
const paintingRef = useRef<{ active: boolean; adding: boolean }>({
|
||||
active: false,
|
||||
adding: true,
|
||||
});
|
||||
|
||||
const toggleCell = useCallback(
|
||||
(index: number, forceAdd?: boolean) => {
|
||||
const next = new Set(selectedCells);
|
||||
|
||||
if (forceAdd !== undefined) {
|
||||
if (forceAdd) {
|
||||
next.add(index);
|
||||
} else {
|
||||
next.delete(index);
|
||||
}
|
||||
} else if (next.has(index)) {
|
||||
next.delete(index);
|
||||
} else {
|
||||
next.add(index);
|
||||
}
|
||||
|
||||
onCellsChange(next);
|
||||
},
|
||||
[selectedCells, onCellsChange],
|
||||
);
|
||||
|
||||
const handlePointerDown = useCallback(
|
||||
(index: number) => {
|
||||
const adding = !selectedCells.has(index);
|
||||
paintingRef.current = { active: true, adding };
|
||||
toggleCell(index, adding);
|
||||
},
|
||||
[selectedCells, toggleCell],
|
||||
);
|
||||
|
||||
const handlePointerEnter = useCallback(
|
||||
(index: number) => {
|
||||
if (!paintingRef.current.active) {
|
||||
return;
|
||||
}
|
||||
|
||||
toggleCell(index, paintingRef.current.adding);
|
||||
},
|
||||
[toggleCell],
|
||||
);
|
||||
|
||||
const handlePointerUp = useCallback(() => {
|
||||
paintingRef.current.active = false;
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<div
|
||||
className="relative aspect-video w-full select-none overflow-hidden rounded-lg"
|
||||
style={{ touchAction: "none" }}
|
||||
onPointerUp={handlePointerUp}
|
||||
onPointerLeave={handlePointerUp}
|
||||
>
|
||||
<img
|
||||
src={`${baseUrl}api/${cameraName}/latest.jpg?h=500`}
|
||||
className="absolute inset-0 size-full object-contain"
|
||||
draggable={false}
|
||||
alt=""
|
||||
/>
|
||||
<div
|
||||
className="absolute inset-0 grid"
|
||||
style={{
|
||||
gridTemplateColumns: `repeat(${GRID_SIZE}, 1fr)`,
|
||||
gridTemplateRows: `repeat(${GRID_SIZE}, 1fr)`,
|
||||
}}
|
||||
>
|
||||
{Array.from({ length: GRID_SIZE * GRID_SIZE }, (_, index) => {
|
||||
const isSelected = selectedCells.has(index);
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className={
|
||||
isSelected
|
||||
? "border border-severity_alert/60 bg-severity_alert/40"
|
||||
: "border border-transparent hover:bg-white/20"
|
||||
}
|
||||
onPointerDown={(e) => {
|
||||
e.preventDefault();
|
||||
handlePointerDown(index);
|
||||
}}
|
||||
onPointerEnter={() => handlePointerEnter(index)}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -79,7 +79,18 @@ import { GiSoundWaves } from "react-icons/gi";
|
||||
import useKeyboardListener from "@/hooks/use-keyboard-listener";
|
||||
import { useTimelineZoom } from "@/hooks/use-timeline-zoom";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { FaCog } from "react-icons/fa";
|
||||
import { FaCog, FaFilter } from "react-icons/fa";
|
||||
import MotionRegionFilterGrid from "@/components/filter/MotionRegionFilterGrid";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Drawer, DrawerContent, DrawerTrigger } from "@/components/ui/drawer";
|
||||
import ReviewActivityCalendar from "@/components/overlay/ReviewActivityCalendar";
|
||||
import PlatformAwareDialog from "@/components/overlay/dialog/PlatformAwareDialog";
|
||||
import MotionPreviewsPane from "./MotionPreviewsPane";
|
||||
@ -1117,6 +1128,13 @@ function MotionReview({
|
||||
const [controlsOpen, setControlsOpen] = useState(false);
|
||||
const [dimStrength, setDimStrength] = useState(82);
|
||||
const [isPreviewSettingsOpen, setIsPreviewSettingsOpen] = useState(false);
|
||||
const [motionFilterCells, setMotionFilterCells] = useState<Set<number>>(
|
||||
new Set(),
|
||||
);
|
||||
const [pendingFilterCells, setPendingFilterCells] = useState<Set<number>>(
|
||||
new Set(),
|
||||
);
|
||||
const [isRegionFilterOpen, setIsRegionFilterOpen] = useState(false);
|
||||
|
||||
const objectReviewItems = useMemo(
|
||||
() =>
|
||||
@ -1314,6 +1332,135 @@ function MotionReview({
|
||||
updateSelectedDay={onUpdateSelectedDay}
|
||||
/>
|
||||
)}
|
||||
{isDesktop ? (
|
||||
<Dialog
|
||||
open={isRegionFilterOpen}
|
||||
onOpenChange={(open) => {
|
||||
if (open) {
|
||||
setPendingFilterCells(new Set(motionFilterCells));
|
||||
}
|
||||
setIsRegionFilterOpen(open);
|
||||
}}
|
||||
>
|
||||
<DialogTrigger asChild>
|
||||
<Button
|
||||
className="flex items-center gap-2"
|
||||
size="sm"
|
||||
variant={
|
||||
motionFilterCells.size > 0 ? "select" : "default"
|
||||
}
|
||||
aria-label={t("motionPreviews.filter")}
|
||||
>
|
||||
<FaFilter
|
||||
className={
|
||||
motionFilterCells.size > 0
|
||||
? "text-selected-foreground"
|
||||
: "text-secondary-foreground"
|
||||
}
|
||||
/>
|
||||
{t("motionPreviews.filter")}
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="max-h-[90dvh] overflow-y-auto sm:max-w-[85%] md:max-w-[70%] lg:max-w-[60%]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{t("motionPreviews.filter")}</DialogTitle>
|
||||
<DialogDescription>
|
||||
{t("motionPreviews.filterDesc")}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<MotionRegionFilterGrid
|
||||
cameraName={selectedMotionPreviewCamera.name}
|
||||
selectedCells={pendingFilterCells}
|
||||
onCellsChange={setPendingFilterCells}
|
||||
/>
|
||||
<DialogFooter className="justify-end gap-1">
|
||||
<Button
|
||||
variant="outline"
|
||||
disabled={pendingFilterCells.size === 0}
|
||||
onClick={() => {
|
||||
setPendingFilterCells(new Set());
|
||||
}}
|
||||
>
|
||||
{t("motionPreviews.filterClear")}
|
||||
</Button>
|
||||
<Button
|
||||
variant="select"
|
||||
onClick={() => {
|
||||
setMotionFilterCells(new Set(pendingFilterCells));
|
||||
setIsRegionFilterOpen(false);
|
||||
}}
|
||||
>
|
||||
{t("button.apply", { ns: "common" })}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
) : (
|
||||
<Drawer
|
||||
open={isRegionFilterOpen}
|
||||
onOpenChange={(open) => {
|
||||
if (open) {
|
||||
setPendingFilterCells(new Set(motionFilterCells));
|
||||
}
|
||||
setIsRegionFilterOpen(open);
|
||||
}}
|
||||
>
|
||||
<DrawerTrigger asChild>
|
||||
<Button
|
||||
className="rounded-lg"
|
||||
size="sm"
|
||||
variant={
|
||||
motionFilterCells.size > 0 ? "select" : "default"
|
||||
}
|
||||
aria-label={t("motionPreviews.filter")}
|
||||
>
|
||||
<FaFilter
|
||||
className={
|
||||
motionFilterCells.size > 0
|
||||
? "text-selected-foreground"
|
||||
: "text-secondary-foreground"
|
||||
}
|
||||
/>
|
||||
</Button>
|
||||
</DrawerTrigger>
|
||||
<DrawerContent className="max-h-[75dvh] overflow-hidden px-4 pb-4">
|
||||
<div className="space-y-4 py-2">
|
||||
<div className="space-y-0.5">
|
||||
<div className="text-md">
|
||||
{t("motionPreviews.filter")}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
{t("motionPreviews.filterDesc")}
|
||||
</div>
|
||||
</div>
|
||||
<MotionRegionFilterGrid
|
||||
cameraName={selectedMotionPreviewCamera.name}
|
||||
selectedCells={pendingFilterCells}
|
||||
onCellsChange={setPendingFilterCells}
|
||||
/>
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
disabled={pendingFilterCells.size === 0}
|
||||
onClick={() => {
|
||||
setPendingFilterCells(new Set());
|
||||
}}
|
||||
>
|
||||
{t("motionPreviews.filterClear")}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => {
|
||||
setMotionFilterCells(new Set(pendingFilterCells));
|
||||
setIsRegionFilterOpen(false);
|
||||
}}
|
||||
>
|
||||
{t("button.apply", { ns: "common" })}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</DrawerContent>
|
||||
</Drawer>
|
||||
)}
|
||||
<PlatformAwareDialog
|
||||
trigger={
|
||||
<Button
|
||||
@ -1456,6 +1603,7 @@ function MotionReview({
|
||||
}
|
||||
playbackRate={playbackRate}
|
||||
nonMotionAlpha={dimStrength / 100}
|
||||
motionFilterCells={motionFilterCells}
|
||||
onSeek={(timestamp) => {
|
||||
onOpenRecording({
|
||||
camera: selectedMotionPreviewCamera.name,
|
||||
|
||||
@ -589,6 +589,7 @@ type MotionPreviewsPaneProps = {
|
||||
isLoadingMotionRanges?: boolean;
|
||||
playbackRate: number;
|
||||
nonMotionAlpha: number;
|
||||
motionFilterCells?: Set<number>;
|
||||
onSeek: (timestamp: number) => void;
|
||||
};
|
||||
|
||||
@ -600,6 +601,7 @@ export default function MotionPreviewsPane({
|
||||
isLoadingMotionRanges = false,
|
||||
playbackRate,
|
||||
nonMotionAlpha,
|
||||
motionFilterCells,
|
||||
onSeek,
|
||||
}: MotionPreviewsPaneProps) {
|
||||
const { t } = useTranslation(["views/events"]);
|
||||
@ -879,6 +881,26 @@ export default function MotionPreviewsPane({
|
||||
],
|
||||
);
|
||||
|
||||
const filteredClipData = useMemo(() => {
|
||||
if (!motionFilterCells || motionFilterCells.size === 0) {
|
||||
return clipData;
|
||||
}
|
||||
|
||||
return clipData.filter(({ motionHeatmap }) => {
|
||||
if (!motionHeatmap) {
|
||||
return false;
|
||||
}
|
||||
|
||||
for (const cellIndex of motionFilterCells) {
|
||||
if ((motionHeatmap[cellIndex.toString()] ?? 0) > 0) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
});
|
||||
}, [clipData, motionFilterCells]);
|
||||
|
||||
const hasCurrentHourRanges = useMemo(
|
||||
() => motionRanges.some((range) => isCurrentHour(range.end_time)),
|
||||
[motionRanges],
|
||||
@ -901,13 +923,13 @@ export default function MotionPreviewsPane({
|
||||
ref={setContentNode}
|
||||
className="no-scrollbar min-h-0 flex-1 overflow-y-auto"
|
||||
>
|
||||
{clipData.length === 0 ? (
|
||||
{filteredClipData.length === 0 ? (
|
||||
<div className="flex h-full items-center justify-center text-lg text-primary">
|
||||
{t("motionPreviews.empty")}
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 gap-2 pb-2 sm:grid-cols-2 md:gap-4 xl:grid-cols-4">
|
||||
{clipData.map(
|
||||
{filteredClipData.map(
|
||||
({ range, preview, fallbackFrameTimes, motionHeatmap }, idx) => {
|
||||
const clipId = `${camera.name}-${range.start_time}-${range.end_time}-${idx}`;
|
||||
const isMounted = mountedClips.has(clipId);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user