Review stream tweaks (#20662)

* tweak api to fetch multiple timelines

* support multiple selected objects in context

* rework context provider

* use toggle in detail stream

* use toggle in menu

* plot multiple object tracks

* verified icon, recognized plate, and clicking tweaks

* add plate to object lifecycle

* close menu before opening frigate+ dialog

* clean up

* normal text case for tooltip

* capitalization

* use flexbox for recording view

web/src/components/player/HlsVideoPlayer.tsx

@@ -20,7 +20,6 @@ import { cn } from "@/lib/utils";
 import { ASPECT_VERTICAL_LAYOUT, RecordingPlayerError } from "@/types/record";
 import { useTranslation } from "react-i18next";
 import ObjectTrackOverlay from "@/components/overlay/ObjectTrackOverlay";
-import { DetailStreamContextType } from "@/context/detail-stream-context";
 
 // Android native hls does not seek correctly
 const USE_NATIVE_HLS = !isAndroid;
@@ -54,8 +53,11 @@ type HlsVideoPlayerProps = {
   onUploadFrame?: (playTime: number) => Promise<AxiosResponse> | undefined;
   toggleFullscreen?: () => void;
   onError?: (error: RecordingPlayerError) => void;
-  detail?: Partial<DetailStreamContextType>;
+  isDetailMode?: boolean;
+  camera?: string;
+  currentTimeOverride?: number;
 };
+
 export default function HlsVideoPlayer({
   videoRef,
   containerRef,
@@ -75,17 +77,15 @@ export default function HlsVideoPlayer({
   onUploadFrame,
   toggleFullscreen,
   onError,
-  detail,
+  isDetailMode = false,
+  camera,
+  currentTimeOverride,
 }: HlsVideoPlayerProps) {
   const { t } = useTranslation("components/player");
   const { data: config } = useSWR<FrigateConfig>("config");
 
   // for detail stream context in History
-  const selectedObjectId = detail?.selectedObjectId;
-  const selectedObjectTimeline = detail?.selectedObjectTimeline;
-  const currentTime = detail?.currentTime;
-  const camera = detail?.camera;
-  const isDetailMode = detail?.isDetailMode ?? false;
+  const currentTime = currentTimeOverride;
 
   // playback
 
@@ -316,16 +316,14 @@ export default function HlsVideoPlayer({
         }}
       >
         {isDetailMode &&
-          selectedObjectId &&
           camera &&
           currentTime &&
           videoDimensions.width > 0 &&
           videoDimensions.height > 0 && (
             <div className="absolute z-50 size-full">
               <ObjectTrackOverlay
-                key={`${selectedObjectId}-${currentTime}`}
+                key={`overlay-${currentTime}`}
                 camera={camera}
-                selectedObjectId={selectedObjectId}
                 showBoundingBoxes={!isPlaying}
                 currentTime={currentTime}
                 videoWidth={videoDimensions.width}
@@ -336,7 +334,6 @@ export default function HlsVideoPlayer({
                     onSeekToTime(timestamp, play);
                   }
                 }}
-                objectTimeline={selectedObjectTimeline}
               />
             </div>
           )}

web/src/components/player/dynamic/DynamicVideoPlayer.tsx

@@ -61,7 +61,11 @@ export default function DynamicVideoPlayer({
   const { data: config } = useSWR<FrigateConfig>("config");
 
   // for detail stream context in History
-  const detail = useDetailStream();
+  const {
+    isDetailMode,
+    camera: contextCamera,
+    currentTime,
+  } = useDetailStream();
 
   // controlling playback
 
@@ -295,7 +299,9 @@ export default function DynamicVideoPlayer({
             setIsBuffering(true);
           }
         }}
-        detail={detail}
+        isDetailMode={isDetailMode}
+        camera={contextCamera || camera}
+        currentTimeOverride={currentTime}
       />
       <PreviewPlayer
         className={cn(