mirror of
https://github.com/blakeblackshear/frigate.git
synced 2025-12-07 14:04:10 +03:00
cc2dbdcb44
* virtualize event segments * use virtual segments in event review timeline * add segmentkey to props * virtualize motion segments * use virtual segments in motion review timeline * update draggable element hook to use only math * timeline zooming hook * add zooming to event review timeline * update playground * zoomable timeline on recording view * consolidate divs in summary timeline * only calculate motion data for visible motion segments * use swr loading state * fix motion only * keep handlebar centered when zooming * zoom animations * clean up * ensure motion only checks both halves of segment * prevent handlebar jump when using motion only mode
42 lines
1.1 KiB
TypeScript
42 lines
1.1 KiB
TypeScript
import { cn } from "@/lib/utils";
|
|
import { ConsolidatedSegmentData } from "@/types/review";
|
|
|
|
type SummarySegmentProps = {
|
|
segmentData: ConsolidatedSegmentData;
|
|
totalDuration: number;
|
|
};
|
|
|
|
export function SummarySegment({
|
|
segmentData,
|
|
totalDuration,
|
|
}: SummarySegmentProps) {
|
|
const { startTime, endTime, severity, reviewed } = segmentData;
|
|
|
|
const severityColors: { [key: string]: string } = {
|
|
significant_motion: reviewed
|
|
? "bg-severity_significant_motion/50"
|
|
: "bg-severity_significant_motion",
|
|
detection: reviewed ? "bg-severity_detection/50" : "bg-severity_detection",
|
|
alert: reviewed ? "bg-severity_alert/50" : "bg-severity_alert",
|
|
empty: "bg-transparent",
|
|
};
|
|
|
|
const height = ((endTime - startTime) / totalDuration) * 100;
|
|
|
|
return (
|
|
<div className="relative w-full" style={{ height: `${height}%` }}>
|
|
<div className="absolute inset-0 flex h-full cursor-pointer justify-end">
|
|
<div
|
|
className={cn(
|
|
"w-[10px]",
|
|
severityColors[severity],
|
|
height < 0.5 && "min-h-[0.5px]",
|
|
)}
|
|
></div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default SummarySegment;
|