mirror of
https://github.com/blakeblackshear/frigate.git
synced 2026-04-12 10:07:36 +03:00
373 lines
11 KiB
TypeScript
373 lines
11 KiB
TypeScript
import { useMemo, useCallback } from "react";
|
|
import { ObjectLifecycleSequence, LifecycleClassType } from "@/types/timeline";
|
|
import { FrigateConfig } from "@/types/frigateConfig";
|
|
import useSWR from "swr";
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipTrigger,
|
|
} from "@/components/ui/tooltip";
|
|
import { TooltipPortal } from "@radix-ui/react-tooltip";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type ObjectTrackOverlayProps = {
|
|
camera: string;
|
|
selectedObjectId: string;
|
|
currentTime: number;
|
|
videoWidth: number;
|
|
videoHeight: number;
|
|
className?: string;
|
|
onSeekToTime?: (timestamp: number) => void;
|
|
};
|
|
|
|
export default function ObjectTrackOverlay({
|
|
camera,
|
|
selectedObjectId,
|
|
currentTime,
|
|
videoWidth,
|
|
videoHeight,
|
|
className,
|
|
onSeekToTime,
|
|
}: ObjectTrackOverlayProps) {
|
|
const { data: config } = useSWR<FrigateConfig>("config");
|
|
|
|
// Fetch timeline data for the selected object
|
|
const { data: objectTimeline } = useSWR<ObjectLifecycleSequence[]>([
|
|
"timeline",
|
|
{
|
|
source_id: selectedObjectId,
|
|
},
|
|
]);
|
|
|
|
// Fetch the full event data to get saved path points
|
|
const { data: eventData } = useSWR(["event_ids", { ids: selectedObjectId }]);
|
|
|
|
const typeColorMap = useMemo(
|
|
() => ({
|
|
[LifecycleClassType.VISIBLE]: [0, 255, 0], // Green
|
|
[LifecycleClassType.GONE]: [255, 0, 0], // Red
|
|
[LifecycleClassType.ENTERED_ZONE]: [255, 165, 0], // Orange
|
|
[LifecycleClassType.ATTRIBUTE]: [128, 0, 128], // Purple
|
|
[LifecycleClassType.ACTIVE]: [255, 255, 0], // Yellow
|
|
[LifecycleClassType.STATIONARY]: [128, 128, 128], // Gray
|
|
[LifecycleClassType.HEARD]: [0, 255, 255], // Cyan
|
|
[LifecycleClassType.EXTERNAL]: [165, 42, 42], // Brown
|
|
}),
|
|
[],
|
|
);
|
|
|
|
const getObjectColor = useMemo(() => {
|
|
return (label: string) => {
|
|
const objectColor = config?.model?.colormap[label];
|
|
if (objectColor) {
|
|
const reversed = [...objectColor].reverse();
|
|
return `rgb(${reversed.join(",")})`;
|
|
}
|
|
return "rgb(255, 0, 0)"; // fallback red
|
|
};
|
|
}, [config]);
|
|
|
|
const getZoneColor = useCallback(
|
|
(zoneName: string) => {
|
|
const zoneColor = config?.cameras?.[camera]?.zones?.[zoneName]?.color;
|
|
if (zoneColor) {
|
|
const reversed = [...zoneColor].reverse();
|
|
return `rgb(${reversed.join(",")})`;
|
|
}
|
|
return "rgb(255, 0, 0)"; // fallback red
|
|
},
|
|
[config, camera],
|
|
);
|
|
|
|
const currentObjectZones = useMemo(() => {
|
|
if (!objectTimeline) return [];
|
|
|
|
// Find the most recent timeline event at or before current time
|
|
const relevantEvents = objectTimeline
|
|
.filter((event) => event.timestamp <= currentTime)
|
|
.sort((a, b) => b.timestamp - a.timestamp); // Most recent first
|
|
|
|
// Get zones from the most recent event
|
|
return relevantEvents[0]?.data?.zones || [];
|
|
}, [objectTimeline, currentTime]);
|
|
|
|
const zones = useMemo(() => {
|
|
if (!config?.cameras?.[camera]?.zones || !currentObjectZones.length)
|
|
return [];
|
|
|
|
return Object.entries(config.cameras[camera].zones)
|
|
.filter(([name]) => currentObjectZones.includes(name))
|
|
.map(([name, zone]) => ({
|
|
name,
|
|
coordinates: zone.coordinates,
|
|
color: getZoneColor(name),
|
|
}));
|
|
}, [config, camera, getZoneColor, currentObjectZones]);
|
|
|
|
const savedPathPoints = useMemo(() => {
|
|
return (
|
|
eventData?.[0].data?.path_data?.map(
|
|
([coords, timestamp]: [number[], number]) => ({
|
|
x: coords[0],
|
|
y: coords[1],
|
|
timestamp,
|
|
lifecycle_item: undefined,
|
|
}),
|
|
) || []
|
|
);
|
|
}, [eventData]);
|
|
|
|
const eventSequencePoints = useMemo(() => {
|
|
return (
|
|
objectTimeline
|
|
?.filter((event) => event.data.box !== undefined)
|
|
.map((event) => {
|
|
const [left, top, width, height] = event.data.box!;
|
|
|
|
return {
|
|
x: left + width / 2, // Center x-coordinate
|
|
y: top + height, // Bottom y-coordinate
|
|
timestamp: event.timestamp,
|
|
lifecycle_item: event,
|
|
};
|
|
}) || []
|
|
);
|
|
}, [objectTimeline]);
|
|
|
|
// final object path with timeline points included
|
|
const pathPoints = useMemo(() => {
|
|
// don't display a path for autotracking cameras
|
|
if (config?.cameras[camera]?.onvif.autotracking.enabled_in_config)
|
|
return [];
|
|
|
|
const combinedPoints = [...savedPathPoints, ...eventSequencePoints].sort(
|
|
(a, b) => a.timestamp - b.timestamp,
|
|
);
|
|
|
|
// Filter points around current time (within a reasonable window)
|
|
const timeWindow = 30; // 30 seconds window
|
|
return combinedPoints.filter(
|
|
(point) =>
|
|
point.timestamp >= currentTime - timeWindow &&
|
|
point.timestamp <= currentTime + timeWindow,
|
|
);
|
|
}, [savedPathPoints, eventSequencePoints, config, camera, currentTime]);
|
|
|
|
const getAbsolutePositions = useCallback(() => {
|
|
if (!pathPoints) return [];
|
|
return pathPoints.map((point) => {
|
|
// Find the corresponding timeline entry for this point
|
|
const timelineEntry = objectTimeline?.find(
|
|
(entry) => Math.abs(entry.timestamp - point.timestamp) < 0.1,
|
|
);
|
|
|
|
return {
|
|
x: point.x * videoWidth,
|
|
y: point.y * videoHeight,
|
|
timestamp: point.timestamp,
|
|
lifecycle_item:
|
|
timelineEntry ||
|
|
(point.box
|
|
? {
|
|
timestamp: point.timestamp,
|
|
camera: camera,
|
|
source: "tracked_object",
|
|
source_id: selectedObjectId,
|
|
class_type: "visible" as LifecycleClassType,
|
|
data: {
|
|
camera: camera,
|
|
label: point.label,
|
|
sub_label: "",
|
|
box: point.box,
|
|
region: [0, 0, 0, 0], // placeholder
|
|
attribute: "",
|
|
zones: [],
|
|
},
|
|
}
|
|
: undefined),
|
|
};
|
|
});
|
|
}, [
|
|
pathPoints,
|
|
videoWidth,
|
|
videoHeight,
|
|
objectTimeline,
|
|
camera,
|
|
selectedObjectId,
|
|
]);
|
|
|
|
const generateStraightPath = useCallback(
|
|
(points: { x: number; y: number }[]) => {
|
|
if (!points || points.length < 2) return "";
|
|
let path = `M ${points[0].x} ${points[0].y}`;
|
|
for (let i = 1; i < points.length; i++) {
|
|
path += ` L ${points[i].x} ${points[i].y}`;
|
|
}
|
|
return path;
|
|
},
|
|
[],
|
|
);
|
|
|
|
const getPointColor = useCallback(
|
|
(baseColor: number[], type?: string) => {
|
|
if (type && typeColorMap[type as keyof typeof typeColorMap]) {
|
|
const typeColor = typeColorMap[type as keyof typeof typeColorMap];
|
|
if (typeColor) {
|
|
return `rgb(${typeColor.join(",")})`;
|
|
}
|
|
}
|
|
// normal path point
|
|
return `rgb(${baseColor.map((c) => Math.max(0, c - 10)).join(",")})`;
|
|
},
|
|
[typeColorMap],
|
|
);
|
|
|
|
if (!pathPoints.length || !config) {
|
|
return null;
|
|
}
|
|
|
|
// Get the object color from the first point's label
|
|
const objectColor = pathPoints[0]?.label
|
|
? getObjectColor(pathPoints[0].label)
|
|
: "rgb(255, 0, 0)";
|
|
const objectColorArray = pathPoints[0]?.label
|
|
? getObjectColor(pathPoints[0].label).match(/\d+/g)?.map(Number) || [
|
|
255, 0, 0,
|
|
]
|
|
: [255, 0, 0];
|
|
|
|
const absolutePositions = getAbsolutePositions();
|
|
|
|
return (
|
|
<svg
|
|
className={cn(className)}
|
|
viewBox={`0 0 ${videoWidth} ${videoHeight}`}
|
|
style={{
|
|
width: "100%",
|
|
height: "100%",
|
|
}}
|
|
preserveAspectRatio="xMidYMid slice"
|
|
>
|
|
{/* Render zones */}
|
|
{zones.map((zone) => {
|
|
// Convert zone coordinates from normalized (0-1) to pixel coordinates
|
|
const points = zone.coordinates
|
|
.split(",")
|
|
.map(Number.parseFloat)
|
|
.reduce((acc: string[], value, index) => {
|
|
const isXCoordinate = index % 2 === 0;
|
|
const coordinate = isXCoordinate
|
|
? value * videoWidth
|
|
: value * videoHeight;
|
|
acc.push(coordinate.toString());
|
|
return acc;
|
|
}, [])
|
|
.join(",");
|
|
|
|
return (
|
|
<polygon
|
|
key={zone.name}
|
|
points={points}
|
|
fill={`rgba(${zone.color.replace("rgb(", "").replace(")", "")}, 0.3)`}
|
|
stroke={zone.color}
|
|
strokeWidth="5"
|
|
opacity="0.7"
|
|
/>
|
|
);
|
|
})}
|
|
|
|
{/* Draw path connecting the points */}
|
|
{absolutePositions.length > 1 && (
|
|
<path
|
|
d={generateStraightPath(absolutePositions)}
|
|
fill="none"
|
|
stroke={objectColor}
|
|
strokeWidth="5"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
)}
|
|
|
|
{/* Draw points with tooltips */}
|
|
{absolutePositions.map((pos, index) => (
|
|
<Tooltip key={`point-${index}`}>
|
|
<TooltipTrigger asChild>
|
|
<circle
|
|
cx={pos.x}
|
|
cy={pos.y}
|
|
r="7"
|
|
fill={getPointColor(
|
|
objectColorArray,
|
|
pos.lifecycle_item?.class_type,
|
|
)}
|
|
stroke="white"
|
|
strokeWidth="3"
|
|
style={{ cursor: onSeekToTime ? "pointer" : "default" }}
|
|
onClick={() => {
|
|
onSeekToTime?.(pos.timestamp);
|
|
}}
|
|
/>
|
|
</TooltipTrigger>
|
|
<TooltipPortal>
|
|
<TooltipContent side="top" className="smart-capitalize">
|
|
{pos.lifecycle_item
|
|
? `${pos.lifecycle_item.class_type.replace("_", " ")} at ${new Date(pos.timestamp * 1000).toLocaleTimeString()}`
|
|
: "Tracked point"}
|
|
{onSeekToTime && (
|
|
<div className="mt-1 text-xs text-muted-foreground">
|
|
Click to seek to this time
|
|
</div>
|
|
)}
|
|
</TooltipContent>
|
|
</TooltipPortal>
|
|
</Tooltip>
|
|
))}
|
|
|
|
{/* Highlight current position with bounding box */}
|
|
{(() => {
|
|
if (!objectTimeline) return null;
|
|
|
|
// Find the most recent timeline event at or before current time with a bounding box
|
|
const relevantEvents = objectTimeline
|
|
.filter((event) => event.timestamp <= currentTime && event.data.box)
|
|
.sort((a, b) => b.timestamp - a.timestamp); // Most recent first
|
|
|
|
const currentEvent = relevantEvents[0];
|
|
|
|
if (currentEvent && currentEvent.data.box) {
|
|
const [left, top, width, height] = currentEvent.data.box;
|
|
const centerX = left + width / 2;
|
|
const centerY = top + height;
|
|
|
|
return (
|
|
<g>
|
|
{/* Bounding box */}
|
|
<rect
|
|
x={left * videoWidth}
|
|
y={top * videoHeight}
|
|
width={width * videoWidth}
|
|
height={height * videoHeight}
|
|
fill="none"
|
|
stroke={objectColor}
|
|
strokeWidth="5"
|
|
opacity="0.9"
|
|
/>
|
|
{/* Center point highlight */}
|
|
<circle
|
|
cx={centerX * videoWidth}
|
|
cy={centerY * videoHeight}
|
|
r="5"
|
|
fill="rgb(255, 255, 0)" // yellow highlight
|
|
stroke={objectColor}
|
|
strokeWidth="5"
|
|
opacity="1"
|
|
/>
|
|
</g>
|
|
);
|
|
}
|
|
return null;
|
|
})()}
|
|
</svg>
|
|
);
|
|
}
|