From f673398053c3b4bd1e633f0222cea884e32c0c8b Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Tue, 7 Oct 2025 08:24:20 -0500
Subject: [PATCH] fix activity stream group from being highlighted prematurely

---
 web/src/components/player/HlsVideoPlayer.tsx  |  1 +
 .../components/timeline/ActivityStream.tsx    | 28 +++++++++++++------
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/web/src/components/player/HlsVideoPlayer.tsx b/web/src/components/player/HlsVideoPlayer.tsx
index 69c51a45f..78347220a 100644
--- a/web/src/components/player/HlsVideoPlayer.tsx
+++ b/web/src/components/player/HlsVideoPlayer.tsx
@@ -321,6 +321,7 @@ export default function HlsVideoPlayer({
           videoDimensions.height > 0 && (
             <div className="absolute z-50 size-full">
               <ObjectTrackOverlay
+                key={`${selectedObjectId}-${currentTime}`}
                 camera={camera}
                 selectedObjectId={selectedObjectId}
                 currentTime={currentTime}
diff --git a/web/src/components/timeline/ActivityStream.tsx b/web/src/components/timeline/ActivityStream.tsx
index dda453c0a..7ff6db8f3 100644
--- a/web/src/components/timeline/ActivityStream.tsx
+++ b/web/src/components/timeline/ActivityStream.tsx
@@ -18,7 +18,7 @@ export default function ActivityStream({
   const { selectedObjectId } = useActivityStream();
   const scrollRef = useRef<HTMLDivElement>(null);
 
-  // Group activities by timestamp (within 1 second resolution window)
+  // group activities by timestamp (within 1 second resolution window)
   const groupedActivities = useMemo(() => {
     const groups: { [key: number]: ObjectLifecycleSequence[] } = {};
 
@@ -31,10 +31,15 @@ export default function ActivityStream({
     });
 
     return Object.entries(groups)
-      .map(([timestamp, activities]) => ({
-        timestamp: parseInt(timestamp),
-        activities: activities.sort((a, b) => a.timestamp - b.timestamp),
-      }))
+      .map(([_timestamp, activities]) => {
+        const sortedActivities = activities.sort(
+          (a, b) => a.timestamp - b.timestamp,
+        );
+        return {
+          timestamp: sortedActivities[0].timestamp, // use the earliest activity timestamp
+          activities: sortedActivities,
+        };
+      })
       .sort((a, b) => a.timestamp - b.timestamp);
   }, [timelineData]);
 
@@ -57,9 +62,14 @@ export default function ActivityStream({
   useEffect(() => {
     if (!scrollRef.current) return;
 
-    const currentGroupIndex = filteredGroups.findIndex(
-      (group) => group.timestamp >= currentTime,
-    );
+    // Find the last group where timestamp <= currentTime
+    let currentGroupIndex = -1;
+    for (let i = filteredGroups.length - 1; i >= 0; i--) {
+      if (filteredGroups[i].timestamp <= currentTime) {
+        currentGroupIndex = i;
+        break;
+      }
+    }
 
     if (currentGroupIndex !== -1) {
       const element = scrollRef.current.children[
@@ -72,7 +82,7 @@ export default function ActivityStream({
         });
       }
     }
-  }, [currentTime, filteredGroups]);
+  }, [filteredGroups, currentTime]);
 
   return (
     <div