administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-04-12 01:57:36 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

use toggle in detail stream

Browse Source
This commit is contained in:
Josh Hawkins 2025-10-25 08:42:07 -05:00
parent 89e082746d
commit 13377cc5b9
1 changed files with 17 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
web/src/components/timeline/DetailStream.tsx
View File

@ -423,30 +423,32 @@ function EventList({
}: EventListProps) { }: EventListProps) {
const { data: config } = useSWR<FrigateConfig>("config"); const { data: config } = useSWR<FrigateConfig>("config");
const { selectedObjectId, setSelectedObjectId } = useDetailStream(); const { selectedObjectIds, toggleObjectSelection } = useDetailStream();
const isSelected = selectedObjectIds.includes(event.id);
const handleObjectSelect = (event: Event | undefined) => { const handleObjectSelect = (event: Event | undefined) => {
if (event) { if (event) {
onSeek(event.start_time ?? 0); // onSeek(event.start_time ?? 0);
setSelectedObjectId(event.id); toggleObjectSelection(event.id);
} else { } else {
setSelectedObjectId(undefined); toggleObjectSelection(undefined);
} }
}; };
// Clear selectedObjectId when effectiveTime has passed this event's end_time // Clear selection when effectiveTime has passed this event's end_time
useEffect(() => { useEffect(() => {
if (selectedObjectId === event.id && effectiveTime && event.end_time) { if (isSelected && effectiveTime && event.end_time) {
if (effectiveTime >= event.end_time) { if (effectiveTime >= event.end_time) {
setSelectedObjectId(undefined); toggleObjectSelection(event.id);
} }
} }
}, [ }, [
selectedObjectId, isSelected,
event.id, event.id,
event.end_time, event.end_time,
effectiveTime, effectiveTime,
setSelectedObjectId, toggleObjectSelection,
]); ]);
return ( return (
@ -454,10 +456,10 @@ function EventList({
<div <div
className={cn( className={cn(
"rounded-md bg-secondary p-2", "rounded-md bg-secondary p-2",
event.id == selectedObjectId isSelected
? "bg-secondary-highlight" ? "bg-secondary-highlight"
: "outline-transparent duration-500", : "outline-transparent duration-500",
event.id != selectedObjectId && !isSelected &&
(effectiveTime ?? 0) >= (event.start_time ?? 0) - 0.5 && (effectiveTime ?? 0) >= (event.start_time ?? 0) - 0.5 &&
(effectiveTime ?? 0) <= (effectiveTime ?? 0) <=
(event.end_time ?? event.start_time ?? 0) + 0.5 && (event.end_time ?? event.start_time ?? 0) + 0.5 &&
@ -469,18 +471,14 @@ function EventList({
className="flex items-center gap-2 text-sm font-medium" className="flex items-center gap-2 text-sm font-medium"
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
handleObjectSelect( handleObjectSelect(isSelected ? undefined : event);
event.id == selectedObjectId ? undefined : event,
);
}} }}
role="button" role="button"
> >
<div <div
className={cn( className={cn(
"rounded-full p-1", "rounded-full p-1",
event.id == selectedObjectId isSelected ? "bg-selected" : "bg-muted-foreground",
? "bg-selected"
: "bg-muted-foreground",
)} )}
> >
{getIconForLabel(event.label, "size-3 text-white")} {getIconForLabel(event.label, "size-3 text-white")}
@ -494,8 +492,8 @@ function EventList({
event={event} event={event}
config={config} config={config}
onOpenUpload={(e) => onOpenUpload?.(e)} onOpenUpload={(e) => onOpenUpload?.(e)}
selectedObjectId={selectedObjectId} isSelected={isSelected}
setSelectedObjectId={handleObjectSelect} onToggleSelection={handleObjectSelect}
/> />
</div> </div>
</div> </div>