don't refetch timeline

web/src/components/overlay/ObjectTrackOverlay.tsx

@@ -18,6 +18,7 @@ type ObjectTrackOverlayProps = {
   videoHeight: number;
   className?: string;
   onSeekToTime?: (timestamp: number) => void;
+  objectTimeline?: ObjectLifecycleSequence[];
 };
 
 export default function ObjectTrackOverlay({
@@ -28,17 +29,10 @@ export default function ObjectTrackOverlay({
   videoHeight,
   className,
   onSeekToTime,
+  objectTimeline,
 }: 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 }]);
 
@@ -158,9 +152,8 @@ export default function ObjectTrackOverlay({
     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,
+        (entry) => entry.timestamp == point.timestamp,
       );
-
       return {
         x: point.x * videoWidth,
         y: point.y * videoHeight,

web/src/components/player/HlsVideoPlayer.tsx

@@ -77,8 +77,13 @@ export default function HlsVideoPlayer({
 }: HlsVideoPlayerProps) {
   const { t } = useTranslation("components/player");
   const { data: config } = useSWR<FrigateConfig>("config");
-  const { selectedObjectId, currentTime, camera, isActivityMode } =
+  const {
-    useActivityStream();
+    selectedObjectId,
+    selectedObjectTimeline,
+    currentTime,
+    camera,
+    isActivityMode,
+  } = useActivityStream();
 
   // playback
 
@@ -327,6 +332,7 @@ export default function HlsVideoPlayer({
                     onSeekToTime(timestamp);
                   }
                 }}
+                objectTimeline={selectedObjectTimeline}
               />
             </div>
           )}

web/src/contexts/ActivityStreamContext.tsx

@@ -1,7 +1,9 @@
-import React, { createContext, useContext, useState } from "react";
+import React, { createContext, useContext, useState, useMemo } from "react";
+import { ObjectLifecycleSequence } from "@/types/timeline";
 
 interface ActivityStreamContextType {
   selectedObjectId: string | undefined;
+  selectedObjectTimeline: ObjectLifecycleSequence[] | undefined;
   currentTime: number;
   camera: string;
   setSelectedObjectId: (id: string | undefined) => void;
@@ -17,6 +19,7 @@ interface ActivityStreamProviderProps {
   isActivityMode: boolean;
   currentTime: number;
   camera: string;
+  timelineData: ObjectLifecycleSequence[];
 }
 
 export function ActivityStreamProvider({
@@ -24,13 +27,20 @@ export function ActivityStreamProvider({
   isActivityMode,
   currentTime,
   camera,
+  timelineData,
 }: ActivityStreamProviderProps) {
   const [selectedObjectId, setSelectedObjectId] = useState<
     string | undefined
   >();
 
+  const selectedObjectTimeline = useMemo(() => {
+    if (!selectedObjectId || !timelineData) return undefined;
+    return timelineData.filter((item) => item.source_id === selectedObjectId);
+  }, [timelineData, selectedObjectId]);
+
   const value: ActivityStreamContextType = {
     selectedObjectId,
+    selectedObjectTimeline,
     currentTime,
     camera,
     setSelectedObjectId,

web/src/views/recording/RecordingView.tsx

@@ -571,6 +571,7 @@ export function RecordingView({
       isActivityMode={timelineType === "activity"}
       currentTime={currentTime}
       camera={mainCamera}
+      timelineData={timelineData}
     >
       <div ref={contentRef} className="flex size-full flex-col pt-2">
         <Toaster closeButton={true} />