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

Show skeleton until video players finishes loading

Browse Source
This commit is contained in:
Nicolas Mowen 2024-03-14 14:30:56 -06:00
parent 61c4ed9f12
commit ffa9dbc655
1 changed files with 12 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
web/src/components/player/dynamic/DynamicVideoPlayer.tsx
View File

@ -8,6 +8,7 @@ import { Preview } from "@/types/preview";
import PreviewPlayer, { PreviewController } from "../PreviewPlayer";
import { DynamicVideoController } from "./DynamicVideoController";
import HlsVideoPlayer from "../HlsVideoPlayer";
import { Skeleton } from "@/components/ui/skeleton";
/**
* Dynamically switches between video playback and scrubbing preview player.
@ -90,6 +91,7 @@ export default function DynamicVideoPlayer({
// initial state
const [isLoading, setIsLoading] = useState(false);
const [source, setSource] = useState(
`${apiHost}vod/${camera}/start/${timeRange.start}/end/${timeRange.end}/master.m3u8`,
);
@ -110,9 +112,13 @@ export default function DynamicVideoPlayer({
return;
}
if (isLoading) {
setIsLoading(false);
}
onTimestampUpdate(controller.getProgress(time));
},
[controller, onTimestampUpdate],
[controller, isLoading, onTimestampUpdate],
);
// state of playback player
@ -140,6 +146,7 @@ export default function DynamicVideoPlayer({
setSource(
`${apiHost}vod/${camera}/start/${timeRange.start}/end/${timeRange.end}/master.m3u8`,
);
setIsLoading(true);
controller.newPlayback({
recordings: recordings ?? [],
@ -151,7 +158,9 @@ export default function DynamicVideoPlayer({
return (
<div className={`relative ${className ?? ""} cursor-pointer`}>
<div className={`w-full relative ${isScrubbing ? "hidden" : "visible"}`}>
<div
className={`w-full relative ${isScrubbing || isLoading ? "hidden" : "visible"}`}
>
<HlsVideoPlayer
className={` ${wideVideo ? "" : "aspect-video"}`}
videoRef={playerRef}
@ -168,6 +177,7 @@ export default function DynamicVideoPlayer({
)}
</HlsVideoPlayer>
</div>
{isLoading && <Skeleton className="size-full" />}
<PreviewPlayer
className={`${isScrubbing ? "visible" : "hidden"} ${className ?? ""}`}
camera={camera}