administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-12 22:25:24 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Maintain slow loading behavior

Browse Source
This commit is contained in:
Nicolas Mowen 2024-06-19 09:47:12 -06:00
parent 04d1ec1f92
commit 3838a61059
1 changed files with 12 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
web/src/components/player/PreviewPlayer.tsx
View File

@ -487,6 +487,14 @@ function PreviewFramesPlayer({
// initial state // initial state
const [firstLoad, setFirstLoad] = useState(true);
useEffect(() => {
if (previewFrames != undefined && previewFrames.length == 0) {
setFirstLoad(false);
}
}, [previewFrames]);
useEffect(() => { useEffect(() => {
if (!controller) { if (!controller) {
return; return;
@ -501,6 +509,8 @@ function PreviewFramesPlayer({
}, [controller]); }, [controller]);
const onImageLoaded = useCallback(() => { const onImageLoaded = useCallback(() => {
setFirstLoad(false);
if (!controller) { if (!controller) {
return; return;
} }
@ -536,14 +546,12 @@ function PreviewFramesPlayer({
className={`size-full rounded-lg bg-black object-contain md:rounded-2xl`} className={`size-full rounded-lg bg-black object-contain md:rounded-2xl`}
onLoad={onImageLoaded} onLoad={onImageLoaded}
/> />
{previewFrames && previewFrames.length === 0 && ( {previewFrames?.length === 0 && (
<div className="-y-translate-1/2 align-center absolute inset-x-0 top-1/2 rounded-lg bg-background_alt text-center text-primary md:rounded-2xl"> <div className="-y-translate-1/2 align-center absolute inset-x-0 top-1/2 rounded-lg bg-background_alt text-center text-primary md:rounded-2xl">
No Preview Found for {camera.replaceAll("_", " ")} No Preview Found for {camera.replaceAll("_", " ")}
</div> </div>
)} )}
{previewFrames == undefined && ( {firstLoad && <Skeleton className="absolute aspect-video size-full" />}
<Skeleton className="absolute aspect-video size-full" />
)}
</div> </div>
); );
} }