Add fullscreen controls to tracking details videos (#22252)

This commit is contained in:
Josh Hawkins 2026-03-04 08:59:12 -06:00 committed by GitHub
parent c3c27d036f
commit 5e7d426768
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -1,6 +1,7 @@
import useSWR from "swr"; import useSWR from "swr";
import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { useResizeObserver } from "@/hooks/resize-observer"; import { useResizeObserver } from "@/hooks/resize-observer";
import { useFullscreen } from "@/hooks/use-fullscreen";
import { Event } from "@/types/event"; import { Event } from "@/types/event";
import ActivityIndicator from "@/components/indicators/activity-indicator"; import ActivityIndicator from "@/components/indicators/activity-indicator";
import { TrackingDetailsSequence } from "@/types/timeline"; import { TrackingDetailsSequence } from "@/types/timeline";
@ -243,6 +244,8 @@ export function TrackingDetails({
}, [manualOverride, currentTime, annotationOffset]); }, [manualOverride, currentTime, annotationOffset]);
const containerRef = useRef<HTMLDivElement | null>(null); const containerRef = useRef<HTMLDivElement | null>(null);
const { fullscreen, toggleFullscreen, supportsFullScreen } =
useFullscreen(containerRef);
const timelineContainerRef = useRef<HTMLDivElement | null>(null); const timelineContainerRef = useRef<HTMLDivElement | null>(null);
const rowRefs = useRef<(HTMLDivElement | null)[]>([]); const rowRefs = useRef<(HTMLDivElement | null)[]>([]);
const [_selectedZone, setSelectedZone] = useState(""); const [_selectedZone, setSelectedZone] = useState("");
@ -559,14 +562,15 @@ export function TrackingDetails({
visible={true} visible={true}
currentSource={videoSource} currentSource={videoSource}
hotKeys={false} hotKeys={false}
supportsFullscreen={false} supportsFullscreen={supportsFullScreen}
fullscreen={false} fullscreen={fullscreen}
frigateControls={true} frigateControls={true}
onTimeUpdate={handleTimeUpdate} onTimeUpdate={handleTimeUpdate}
onSeekToTime={handleSeekToTime} onSeekToTime={handleSeekToTime}
onUploadFrame={onUploadFrameToPlus} onUploadFrame={onUploadFrameToPlus}
onPlaying={() => setIsVideoLoading(false)} onPlaying={() => setIsVideoLoading(false)}
setFullResolution={setFullResolution} setFullResolution={setFullResolution}
toggleFullscreen={toggleFullscreen}
isDetailMode={true} isDetailMode={true}
camera={event.camera} camera={event.camera}
currentTimeOverride={currentTime} currentTimeOverride={currentTime}