pass detail stream as prop to avoid context error

This commit is contained in:
Josh Hawkins 2025-10-18 06:54:04 -05:00
parent 29aa61db02
commit 0c8491f7d3
3 changed files with 16 additions and 9 deletions

View File

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

View File

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

View File

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