administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-10 05:05:26 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

no need to duplicate observer

Browse Source
This commit is contained in:
Josh Hawkins 2024-03-21 12:13:21 -05:00
parent e4ae1112ef
commit f236ba62e0
2 changed files with 21 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
web/src/components/timeline/EventReviewTimeline.tsx
View File

@ -30,6 +30,7 @@ export type EventReviewTimelineProps = {
setExportStartTime?: React.Dispatch<React.SetStateAction<number>>; setExportStartTime?: React.Dispatch<React.SetStateAction<number>>;
setExportEndTime?: React.Dispatch<React.SetStateAction<number>>; setExportEndTime?: React.Dispatch<React.SetStateAction<number>>;
events: ReviewSegment[]; events: ReviewSegment[];
visibleTimestamps?: number[];
severityType: ReviewSeverity; severityType: ReviewSeverity;
timelineRef?: RefObject<HTMLDivElement>; timelineRef?: RefObject<HTMLDivElement>;
contentRef: RefObject<HTMLDivElement>; contentRef: RefObject<HTMLDivElement>;
@ -53,6 +54,7 @@ export function EventReviewTimeline({
setExportStartTime, setExportStartTime,
setExportEndTime, setExportEndTime,
events, events,
visibleTimestamps,
severityType, severityType,
timelineRef, timelineRef,
contentRef, contentRef,
@ -61,7 +63,6 @@ export function EventReviewTimeline({
const [isDragging, setIsDragging] = useState(false); const [isDragging, setIsDragging] = useState(false);
const [exportStartPosition, setExportStartPosition] = useState(0); const [exportStartPosition, setExportStartPosition] = useState(0);
const [exportEndPosition, setExportEndPosition] = useState(0); const [exportEndPosition, setExportEndPosition] = useState(0);
const [visibleThumbnails, setVisibleThumbnails] = useState<number[]>([]);
const internalTimelineRef = useRef<HTMLDivElement>(null); const internalTimelineRef = useRef<HTMLDivElement>(null);
const handlebarRef = useRef<HTMLDivElement>(null); const handlebarRef = useRef<HTMLDivElement>(null);
@ -72,8 +73,6 @@ export function EventReviewTimeline({
const exportEndTimeRef = useRef<HTMLDivElement>(null); const exportEndTimeRef = useRef<HTMLDivElement>(null);
const selectedTimelineRef = timelineRef || internalTimelineRef; const selectedTimelineRef = timelineRef || internalTimelineRef;
const observer = useRef<IntersectionObserver | null>(null);
const timelineDuration = useMemo( const timelineDuration = useMemo(
() => timelineStart - timelineEnd, () => timelineStart - timelineEnd,
[timelineEnd, timelineStart], [timelineEnd, timelineStart],
@ -221,63 +220,32 @@ export function EventReviewTimeline({
} }
}, [isDragging, onHandlebarDraggingChange]); }, [isDragging, onHandlebarDraggingChange]);
useEffect(() => {
if (contentRef.current && segments && !showMinimap) {
observer.current = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
const segmentStartId =
entry.target.getAttribute("data-segment-start");
if (segmentStartId) {
setVisibleThumbnails((prevState) => [
...prevState,
parseInt(segmentStartId),
]);
}
} else {
const segmentStartId =
entry.target.getAttribute("data-segment-start");
if (segmentStartId) {
setVisibleThumbnails((prevState) =>
prevState.filter(
(timestamp) => timestamp !== parseInt(segmentStartId),
),
);
}
}
});
},
{ threshold: 0.5 },
);
const reviewItems = contentRef.current.querySelectorAll(".review-item");
reviewItems.forEach((item) => {
observer.current?.observe(item);
});
}
return () => {
observer.current?.disconnect();
};
}, [contentRef, segments, showMinimap]);
useEffect(() => { useEffect(() => {
if ( if (
selectedTimelineRef.current && selectedTimelineRef.current &&
segments && segments &&
visibleThumbnails?.length > 0 && visibleTimestamps &&
visibleTimestamps?.length > 0 &&
!showMinimap !showMinimap
) { ) {
const alignedVisibleTimestamps = visibleTimestamps.map(
alignStartDateToTimeline,
);
const element = selectedTimelineRef.current?.querySelector( const element = selectedTimelineRef.current?.querySelector(
`[data-segment-id="${Math.max(...visibleThumbnails)}"]`, `[data-segment-id="${Math.max(...alignedVisibleTimestamps)}"]`,
); );
scrollIntoView(element as HTMLDivElement, { scrollIntoView(element as HTMLDivElement, {
scrollMode: "if-needed", scrollMode: "if-needed",
behavior: "smooth", behavior: "smooth",
}); });
} }
}, [visibleThumbnails, selectedTimelineRef, segments, showMinimap]); }, [
selectedTimelineRef,
segments,
showMinimap,
alignStartDateToTimeline,
visibleTimestamps,
]);
return ( return (
<ReviewTimeline <ReviewTimeline

6
web/src/views/events/EventView.tsx
View File

@ -470,6 +470,11 @@ function DetectionReview({
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [contentRef.current?.scrollHeight, minimapBounds]); }, [contentRef.current?.scrollHeight, minimapBounds]);
const visibleTimestamps = useMemo(
() => minimap.map((str) => parseFloat(str)),
[minimap],
);
return ( return (
<> <>
<div <div
@ -559,6 +564,7 @@ function DetectionReview({
minimapEndTime={minimapBounds.end} minimapEndTime={minimapBounds.end}
showHandlebar={previewTime != undefined} showHandlebar={previewTime != undefined}
handlebarTime={previewTime} handlebarTime={previewTime}
visibleTimestamps={visibleTimestamps}
events={reviewItems?.all ?? []} events={reviewItems?.all ?? []}
severityType={severity} severityType={severity}
contentRef={contentRef} contentRef={contentRef}