pass detail stream as prop to avoid context error

web/src/components/player/HlsVideoPlayer.tsx

@@ -20,7 +20,7 @@ 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 { useDetailStream } from "@/context/detail-stream-context";
+import { DetailStreamContextType } from "@/context/detail-stream-context";
 
 // Android native hls does not seek correctly
 const USE_NATIVE_HLS = !isAndroid;
@@ -54,6 +54,7 @@ type HlsVideoPlayerProps = {
   onUploadFrame?: (playTime: number) => Promise<AxiosResponse> | undefined;
   toggleFullscreen?: () => void;
   onError?: (error: RecordingPlayerError) => void;
+  detail?: Partial<DetailStreamContextType>;
 };
 export default function HlsVideoPlayer({
   videoRef,
@@ -74,16 +75,17 @@ export default function HlsVideoPlayer({
   onUploadFrame,
   toggleFullscreen,
   onError,
+  detail,
 }: HlsVideoPlayerProps) {
   const { t } = useTranslation("components/player");
   const { data: config } = useSWR<FrigateConfig>("config");
-  const {
-    selectedObjectId,
-    selectedObjectTimeline,
-    currentTime,
-    camera,
-    isDetailMode,
-  } = useDetailStream();
+
+  // 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;
 
   // playback
 

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

@@ -7,6 +7,7 @@ import { Preview } from "@/types/preview";
 import PreviewPlayer, { PreviewController } from "../PreviewPlayer";
 import { DynamicVideoController } from "./DynamicVideoController";
 import HlsVideoPlayer, { HlsSource } from "../HlsVideoPlayer";
+import { useDetailStream } from "@/context/detail-stream-context";
 import { TimeRange } from "@/types/timeline";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
 import { VideoResolutionType } from "@/types/live";
@@ -59,6 +60,9 @@ export default function DynamicVideoPlayer({
   const apiHost = useApiHost();
   const { data: config } = useSWR<FrigateConfig>("config");
 
+  // for detail stream context in History
+  const detail = useDetailStream();
+
   // controlling playback
 
   const playerRef = useRef<HTMLVideoElement | null>(null);
@@ -291,6 +295,7 @@ export default function DynamicVideoPlayer({
             setIsBuffering(true);
           }
         }}
+        detail={detail}
       />
       <PreviewPlayer
         className={cn(

web/src/context/detail-stream-context.tsx

@@ -3,7 +3,7 @@ import { FrigateConfig } from "@/types/frigateConfig";
 import useSWR from "swr";
 import { ObjectLifecycleSequence } from "@/types/timeline";
 
-interface DetailStreamContextType {
+export interface DetailStreamContextType {
   selectedObjectId: string | undefined;
   selectedObjectTimeline?: ObjectLifecycleSequence[];
   currentTime: number;