From 0ebc9a2e9278502f236dcf101ce82608992f5aa3 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Thu, 16 Oct 2025 14:26:45 -0500
Subject: [PATCH] ensure play prop is passed down

---
 web/src/components/timeline/DetailStream.tsx | 16 ++++++++--------
 web/src/views/recording/RecordingView.tsx    |  6 ++++--
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/web/src/components/timeline/DetailStream.tsx b/web/src/components/timeline/DetailStream.tsx
index 8fb569dd7..73e0cf530 100644
--- a/web/src/components/timeline/DetailStream.tsx
+++ b/web/src/components/timeline/DetailStream.tsx
@@ -201,7 +201,7 @@ type ReviewGroupProps = {
   review: ReviewSegment;
   id: string;
   config: FrigateConfig;
-  onSeek: (timestamp: number) => void;
+  onSeek: (timestamp: number, play?: boolean) => void;
   isActive?: boolean;
   onActivate?: () => void;
   onOpenUpload?: (e: Event) => void;
@@ -325,7 +325,7 @@ function ReviewGroup({
 type EventCollapsibleProps = {
   event: Event;
   effectiveTime?: number;
-  onSeek: (ts: number) => void;
+  onSeek: (ts: number, play?: boolean) => void;
   onOpenUpload?: (e: Event) => void;
 };
 function EventCollapsible({
@@ -450,9 +450,7 @@ function EventCollapsible({
           <div className="mt-2">
             <ObjectTimeline
               eventId={event.id}
-              onSeek={(ts) => {
-                onSeek(ts);
-              }}
+              onSeek={onSeek}
               effectiveTime={effectiveTime}
             />
           </div>
@@ -492,7 +490,9 @@ function LifecycleItem({ event, isActive, onSeek }: LifecycleItemProps) {
   return (
     <div
       role="button"
-      onClick={() => onSeek?.(event.timestamp ?? 0, false)}
+      onClick={() => {
+        onSeek?.(event.timestamp ?? 0, false);
+      }}
       className={cn(
         "flex cursor-pointer items-center gap-2 text-sm text-primary-variant",
         isActive
@@ -518,7 +518,7 @@ function ObjectTimeline({
   effectiveTime,
 }: {
   eventId: string;
-  onSeek: (ts: number) => void;
+  onSeek: (ts: number, play?: boolean) => void;
   effectiveTime?: number;
 }) {
   const { t } = useTranslation("views/events");
@@ -548,7 +548,7 @@ function ObjectTimeline({
           Math.abs((effectiveTime ?? 0) - (event.timestamp ?? 0)) <= 0.5;
         return (
           <LifecycleItem
-            key={`${event.timestamp}-${event.source_id ?? idx}`}
+            key={`${event.timestamp}-${event.source_id ?? ""}-${idx}`}
             event={event}
             onSeek={onSeek}
             isActive={isActive}
diff --git a/web/src/views/recording/RecordingView.tsx b/web/src/views/recording/RecordingView.tsx
index cdd27f6ac..aee60b6b2 100644
--- a/web/src/views/recording/RecordingView.tsx
+++ b/web/src/views/recording/RecordingView.tsx
@@ -290,7 +290,7 @@ export function RecordingView({
       setCurrentTime(time);
 
       if (currentTimeRange.after <= time && currentTimeRange.before >= time) {
-        mainControllerRef.current?.seekToTimestamp(time, !play);
+        mainControllerRef.current?.seekToTimestamp(time, play);
       } else {
         updateSelectedSegment(time, true);
       }
@@ -1005,7 +1005,9 @@ function Timeline({
       ) : timelineType == "detail" ? (
         <DetailStream
           currentTime={currentTime}
-          onSeek={(timestamp) => manuallySetCurrentTime(timestamp, true)}
+          onSeek={(timestamp, play) =>
+            manuallySetCurrentTime(timestamp, play ?? true)
+          }
           reviewItems={mainCameraReviewItems}
         />
       ) : (