From f236ba62e056329334765b0c3681057f3c740e20 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Thu, 21 Mar 2024 12:13:21 -0500
Subject: [PATCH] no need to duplicate observer

---
 .../timeline/EventReviewTimeline.tsx          | 62 +++++--------------
 web/src/views/events/EventView.tsx            |  6 ++
 2 files changed, 21 insertions(+), 47 deletions(-)

diff --git a/web/src/components/timeline/EventReviewTimeline.tsx b/web/src/components/timeline/EventReviewTimeline.tsx
index 6c175daf8..6c6a8c8df 100644
--- a/web/src/components/timeline/EventReviewTimeline.tsx
+++ b/web/src/components/timeline/EventReviewTimeline.tsx
@@ -30,6 +30,7 @@ export type EventReviewTimelineProps = {
   setExportStartTime?: React.Dispatch<React.SetStateAction<number>>;
   setExportEndTime?: React.Dispatch<React.SetStateAction<number>>;
   events: ReviewSegment[];
+  visibleTimestamps?: number[];
   severityType: ReviewSeverity;
   timelineRef?: RefObject<HTMLDivElement>;
   contentRef: RefObject<HTMLDivElement>;
@@ -53,6 +54,7 @@ export function EventReviewTimeline({
   setExportStartTime,
   setExportEndTime,
   events,
+  visibleTimestamps,
   severityType,
   timelineRef,
   contentRef,
@@ -61,7 +63,6 @@ export function EventReviewTimeline({
   const [isDragging, setIsDragging] = useState(false);
   const [exportStartPosition, setExportStartPosition] = useState(0);
   const [exportEndPosition, setExportEndPosition] = useState(0);
-  const [visibleThumbnails, setVisibleThumbnails] = useState<number[]>([]);
 
   const internalTimelineRef = useRef<HTMLDivElement>(null);
   const handlebarRef = useRef<HTMLDivElement>(null);
@@ -72,8 +73,6 @@ export function EventReviewTimeline({
   const exportEndTimeRef = useRef<HTMLDivElement>(null);
   const selectedTimelineRef = timelineRef || internalTimelineRef;
 
-  const observer = useRef<IntersectionObserver | null>(null);
-
   const timelineDuration = useMemo(
     () => timelineStart - timelineEnd,
     [timelineEnd, timelineStart],
@@ -221,63 +220,32 @@ export function EventReviewTimeline({
     }
   }, [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(() => {
     if (
       selectedTimelineRef.current &&
       segments &&
-      visibleThumbnails?.length > 0 &&
+      visibleTimestamps &&
+      visibleTimestamps?.length > 0 &&
       !showMinimap
     ) {
+      const alignedVisibleTimestamps = visibleTimestamps.map(
+        alignStartDateToTimeline,
+      );
       const element = selectedTimelineRef.current?.querySelector(
-        `[data-segment-id="${Math.max(...visibleThumbnails)}"]`,
+        `[data-segment-id="${Math.max(...alignedVisibleTimestamps)}"]`,
       );
       scrollIntoView(element as HTMLDivElement, {
         scrollMode: "if-needed",
         behavior: "smooth",
       });
     }
-  }, [visibleThumbnails, selectedTimelineRef, segments, showMinimap]);
+  }, [
+    selectedTimelineRef,
+    segments,
+    showMinimap,
+    alignStartDateToTimeline,
+    visibleTimestamps,
+  ]);
 
   return (
     <ReviewTimeline
diff --git a/web/src/views/events/EventView.tsx b/web/src/views/events/EventView.tsx
index 6259dec8c..d585d92d4 100644
--- a/web/src/views/events/EventView.tsx
+++ b/web/src/views/events/EventView.tsx
@@ -470,6 +470,11 @@ function DetectionReview({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [contentRef.current?.scrollHeight, minimapBounds]);
 
+  const visibleTimestamps = useMemo(
+    () => minimap.map((str) => parseFloat(str)),
+    [minimap],
+  );
+
   return (
     <>
       <div
@@ -559,6 +564,7 @@ function DetectionReview({
             minimapEndTime={minimapBounds.end}
             showHandlebar={previewTime != undefined}
             handlebarTime={previewTime}
+            visibleTimestamps={visibleTimestamps}
             events={reviewItems?.all ?? []}
             severityType={severity}
             contentRef={contentRef}