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

Show loading indicators for previews on recordings page

Browse Source
This commit is contained in:
Nicolas Mowen 2024-04-14 09:51:54 -06:00
parent 5cc05ee859
commit d374155651
2 changed files with 16 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -14,6 +14,7 @@ import { isCurrentHour } from "@/utils/dateUtil";
import { baseUrl } from "@/api/baseUrl"; import { baseUrl } from "@/api/baseUrl";
import { isAndroid, isChrome, isMobile } from "react-device-detect"; import { isAndroid, isChrome, isMobile } from "react-device-detect";
import { TimeRange } from "@/types/timeline"; import { TimeRange } from "@/types/timeline";
import { Skeleton } from "../ui/skeleton";
type PreviewPlayerProps = { type PreviewPlayerProps = {
className?: string; className?: string;
@ -143,6 +144,8 @@ function PreviewVideoPlayer({
// initial state // initial state
const [firstLoad, setFirstLoad] = useState(true);
const initialPreview = useMemo(() => { const initialPreview = useMemo(() => {
return cameraPreviews.find( return cameraPreviews.find(
(preview) => (preview) =>
@ -253,6 +256,10 @@ function PreviewVideoPlayer({
disableRemotePlayback disableRemotePlayback
onSeeked={onPreviewSeeked} onSeeked={onPreviewSeeked}
onLoadedData={() => { onLoadedData={() => {
if (firstLoad) {
setFirstLoad(false);
}
if (controller) { if (controller) {
controller.previewReady(); controller.previewReady();
} else { } else {
@ -280,6 +287,7 @@ function PreviewVideoPlayer({
No Preview Found No Preview Found
</div> </div>
)} )}
{firstLoad && <Skeleton className="absolute size-full aspect-video" />}
</div> </div>
); );
} }
@ -427,6 +435,8 @@ function PreviewFramesPlayer({
// initial state // initial state
const [firstLoad, setFirstLoad] = useState(true);
useEffect(() => { useEffect(() => {
if (!controller) { if (!controller) {
return; return;
@ -441,6 +451,8 @@ function PreviewFramesPlayer({
}, [controller]); }, [controller]);
const onImageLoaded = useCallback(() => { const onImageLoaded = useCallback(() => {
setFirstLoad(false);
if (!controller) { if (!controller) {
return; return;
} }
@ -477,6 +489,7 @@ function PreviewFramesPlayer({
No Preview Found No Preview Found
</div> </div>
)} )}
{firstLoad && <Skeleton className="absolute size-full aspect-video" />}
</div> </div>
); );
} }

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

@ -1,5 +1,4 @@
import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import TimelineEventOverlay from "../../overlay/TimelineDataOverlay";
import { useApiHost } from "@/api"; import { useApiHost } from "@/api";
import useSWR from "swr"; import useSWR from "swr";
import { FrigateConfig } from "@/types/frigateConfig"; import { FrigateConfig } from "@/types/frigateConfig";
@ -8,7 +7,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 { TimeRange, Timeline } from "@/types/timeline"; import { TimeRange } from "@/types/timeline";
/** /**
* Dynamically switches between video playback and scrubbing preview player. * Dynamically switches between video playback and scrubbing preview player.
@ -45,9 +44,6 @@ export default function DynamicVideoPlayer({
const playerRef = useRef<HTMLVideoElement | null>(null); const playerRef = useRef<HTMLVideoElement | null>(null);
const [previewController, setPreviewController] = const [previewController, setPreviewController] =
useState<PreviewController | null>(null); useState<PreviewController | null>(null);
const [focusedItem, setFocusedItem] = useState<Timeline | undefined>(
undefined,
);
const controller = useMemo(() => { const controller = useMemo(() => {
if (!config || !playerRef.current || !previewController) { if (!config || !playerRef.current || !previewController) {
return undefined; return undefined;
@ -59,7 +55,7 @@ export default function DynamicVideoPlayer({
previewController, previewController,
(config.cameras[camera]?.detect?.annotation_offset || 0) / 1000, (config.cameras[camera]?.detect?.annotation_offset || 0) / 1000,
isScrubbing ? "scrubbing" : "playback", isScrubbing ? "scrubbing" : "playback",
setFocusedItem, () => {},
); );
// we only want to fire once when players are ready // we only want to fire once when players are ready
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
@ -164,14 +160,7 @@ export default function DynamicVideoPlayer({
setIsLoading(false); setIsLoading(false);
}} }}
> />
{config && focusedItem && (
<TimelineEventOverlay
timeline={focusedItem}
cameraConfig={config.cameras[camera]}
/>
)}
</HlsVideoPlayer>
<PreviewPlayer <PreviewPlayer
className={`${isScrubbing || isLoading ? "visible" : "hidden"} ${className}`} className={`${isScrubbing || isLoading ? "visible" : "hidden"} ${className}`}
camera={camera} camera={camera}