administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-05-07 05:55:27 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

simplify loading logic

Browse Source
This commit is contained in:
Josh Hawkins 2026-05-03 12:46:20 -05:00
parent e86c94f294
commit 51624f755f
1 changed files with 24 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
web/src/pages/Replay.tsx
View File

@ -117,8 +117,6 @@ const DEBUG_OPTION_I18N_KEY: Record<keyof DebugOptions, string> = {
paths: "paths", paths: "paths",
}; };
const REPLAY_INIT_SKELETON_TIMEOUT_MS = 8000;
export default function Replay() { export default function Replay() {
const { t } = useTranslation(["views/replay", "views/settings", "common"]); const { t } = useTranslation(["views/replay", "views/settings", "common"]);
const navigate = useNavigate(); const navigate = useNavigate();
@ -145,12 +143,6 @@ export default function Replay() {
initializeStatus(); initializeStatus();
}, [refreshStatus]); }, [refreshStatus]);
useEffect(() => {
if (status?.live_ready) {
setShowReplayInitSkeleton(false);
}
}, [status?.live_ready]);
const [options, setOptions] = useState<DebugOptions>(DEFAULT_OPTIONS); const [options, setOptions] = useState<DebugOptions>(DEFAULT_OPTIONS);
const [isStopping, setIsStopping] = useState(false); const [isStopping, setIsStopping] = useState(false);
const [configDialogOpen, setConfigDialogOpen] = useState(false); const [configDialogOpen, setConfigDialogOpen] = useState(false);
@ -205,35 +197,10 @@ export default function Replay() {
const { objects } = useCameraActivity(replayCameraConfig); const { objects } = useCameraActivity(replayCameraConfig);
const [showReplayInitSkeleton, setShowReplayInitSkeleton] = useState(false);
// debug draw // debug draw
const containerRef = useRef<HTMLDivElement>(null); const containerRef = useRef<HTMLDivElement>(null);
const [debugDraw, setDebugDraw] = useState(false); const [debugDraw, setDebugDraw] = useState(false);
useEffect(() => {
if (!status?.active || !status.replay_camera) {
setShowReplayInitSkeleton(false);
return;
}
setShowReplayInitSkeleton(true);
const timeout = window.setTimeout(() => {
setShowReplayInitSkeleton(false);
}, REPLAY_INIT_SKELETON_TIMEOUT_MS);
return () => {
window.clearTimeout(timeout);
};
}, [status?.active, status?.replay_camera]);
useEffect(() => {
if (status?.live_ready) {
setShowReplayInitSkeleton(false);
}
}, [status?.live_ready]);
// Format time range for display // Format time range for display
const timeRangeDisplay = useMemo(() => { const timeRangeDisplay = useMemo(() => {
if (!status?.start_time || !status?.end_time) return ""; if (!status?.start_time || !status?.end_time) return "";
@ -436,29 +403,30 @@ export default function Replay() {
) : ( ) : (
status.replay_camera && ( status.replay_camera && (
<div className="relative size-full min-h-10" ref={containerRef}> <div className="relative size-full min-h-10" ref={containerRef}>
{status.live_ready && ( {status.live_ready ? (
<AutoUpdatingCameraImage <>
className="size-full" <AutoUpdatingCameraImage
cameraClasses="relative w-full h-full flex flex-col justify-start" className="size-full"
searchParams={searchParams} cameraClasses="relative w-full h-full flex flex-col justify-start"
camera={status.replay_camera} searchParams={searchParams}
showFps={false} camera={status.replay_camera}
/> showFps={false}
)} />
{debugDraw && ( {debugDraw && (
<DebugDrawingLayer <DebugDrawingLayer
containerRef={containerRef} containerRef={containerRef}
cameraWidth={ cameraWidth={
config?.cameras?.[status.source_camera ?? ""]?.detect config?.cameras?.[status.source_camera ?? ""]?.detect
.width ?? 1280 .width ?? 1280
} }
cameraHeight={ cameraHeight={
config?.cameras?.[status.source_camera ?? ""]?.detect config?.cameras?.[status.source_camera ?? ""]?.detect
.height ?? 720 .height ?? 720
} }
/> />
)} )}
{showReplayInitSkeleton && ( </>
) : (
<div className="pointer-events-none absolute inset-0 z-10 size-full rounded-lg bg-background"> <div className="pointer-events-none absolute inset-0 z-10 size-full rounded-lg bg-background">
<Skeleton className="size-full rounded-lg" /> <Skeleton className="size-full rounded-lg" />
<div className="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center gap-2"> <div className="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center gap-2">