administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2025-12-06 13:34:13 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

reset loading state when moving through events in tracking details

Browse Source
This commit is contained in:
Josh Hawkins 2025-11-21 14:13:13 -06:00
parent de704ef211
commit 6286d2aa32
2 changed files with 29 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
web/src/components/overlay/detail/TrackingDetails.tsx
View File

@ -56,6 +56,7 @@ export function TrackingDetails({
const apiHost = useApiHost(); const apiHost = useApiHost();
const imgRef = useRef<HTMLImageElement | null>(null); const imgRef = useRef<HTMLImageElement | null>(null);
const [imgLoaded, setImgLoaded] = useState(false); const [imgLoaded, setImgLoaded] = useState(false);
const [isVideoLoading, setIsVideoLoading] = useState(true);
const [displaySource, _setDisplaySource] = useState<"video" | "image">( const [displaySource, _setDisplaySource] = useState<"video" | "image">(
"video", "video",
); );
@ -70,6 +71,10 @@ export function TrackingDetails({
(event.start_time ?? 0) + annotationOffset / 1000 - REVIEW_PADDING, (event.start_time ?? 0) + annotationOffset / 1000 - REVIEW_PADDING,
); );
useEffect(() => {
setIsVideoLoading(true);
}, [event.id]);
const { data: eventSequence } = useSWR<TrackingDetailsSequence[]>([ const { data: eventSequence } = useSWR<TrackingDetailsSequence[]>([
"timeline", "timeline",
{ {
@ -527,22 +532,28 @@ export function TrackingDetails({
)} )}
> >
{displaySource == "video" && ( {displaySource == "video" && (
<HlsVideoPlayer <>
videoRef={videoRef} <HlsVideoPlayer
containerRef={containerRef} videoRef={videoRef}
visible={true} containerRef={containerRef}
currentSource={videoSource} visible={true}
hotKeys={false} currentSource={videoSource}
supportsFullscreen={false} hotKeys={false}
fullscreen={false} supportsFullscreen={false}
frigateControls={true} fullscreen={false}
onTimeUpdate={handleTimeUpdate} frigateControls={true}
onSeekToTime={handleSeekToTime} onTimeUpdate={handleTimeUpdate}
onUploadFrame={onUploadFrameToPlus} onSeekToTime={handleSeekToTime}
isDetailMode={true} onUploadFrame={onUploadFrameToPlus}
camera={event.camera} onPlaying={() => setIsVideoLoading(false)}
currentTimeOverride={currentTime} isDetailMode={true}
/> camera={event.camera}
currentTimeOverride={currentTime}
/>
{isVideoLoading && (
<ActivityIndicator className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
)}
</>
)} )}
{displaySource == "image" && ( {displaySource == "image" && (
<> <>

2
web/src/components/player/HlsVideoPlayer.tsx
View File

@ -130,6 +130,8 @@ export default function HlsVideoPlayer({
return; return;
} }
setLoadedMetadata(false);
const currentPlaybackRate = videoRef.current.playbackRate; const currentPlaybackRate = videoRef.current.playbackRate;
if (!useHlsCompat) { if (!useHlsCompat) {