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