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 when switching previews

Browse Source
This commit is contained in:
Nicolas Mowen 2024-03-12 10:43:12 -06:00
parent 8db5e2d0d7
commit 7550ad627c
1 changed files with 6 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,6 +13,7 @@ import { PreviewPlayback } from "@/types/playback";
import { isCurrentHour } from "@/utils/dateUtil"; import { isCurrentHour } from "@/utils/dateUtil";
import { baseUrl } from "@/api/baseUrl"; import { baseUrl } from "@/api/baseUrl";
import { isAndroid } from "react-device-detect"; import { isAndroid } from "react-device-detect";
import { Skeleton } from "../ui/skeleton";
type PreviewPlayerProps = { type PreviewPlayerProps = {
className?: string; className?: string;
@ -119,6 +120,7 @@ function PreviewVideoPlayer({
// initial state // initial state
const [loaded, setLoaded] = useState(false);
const initialPreview = useMemo(() => { const initialPreview = useMemo(() => {
return cameraPreviews.find( return cameraPreviews.find(
(preview) => (preview) =>
@ -152,6 +154,7 @@ function PreviewVideoPlayer({
Math.round(preview.start) >= timeRange.start && Math.round(preview.start) >= timeRange.start &&
Math.floor(preview.end) <= timeRange.end, Math.floor(preview.end) <= timeRange.end,
); );
setLoaded(false);
setCurrentPreview(preview); setCurrentPreview(preview);
controller.newPlayback({ controller.newPlayback({
@ -186,6 +189,8 @@ function PreviewVideoPlayer({
disableRemotePlayback disableRemotePlayback
onSeeked={onPreviewSeeked} onSeeked={onPreviewSeeked}
onLoadedData={() => { onLoadedData={() => {
setLoaded(true);
if (controller) { if (controller) {
controller.previewReady(); controller.previewReady();
} else { } else {
@ -201,6 +206,7 @@ function PreviewVideoPlayer({
<source src={currentPreview.src} type={currentPreview.type} /> <source src={currentPreview.src} type={currentPreview.type} />
)} )}
</video> </video>
{!loaded && <Skeleton className="absolute inset-0" />}
{cameraPreviews && !currentPreview && ( {cameraPreviews && !currentPreview && (
<div className="absolute inset-x-0 top-1/2 -y-translate-1/2 bg-black text-white rounded-2xl align-center text-center"> <div className="absolute inset-x-0 top-1/2 -y-translate-1/2 bg-black text-white rounded-2xl align-center text-center">
No Preview Found No Preview Found