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

Show activity indicator before live player starts playing

Browse Source
This commit is contained in:
Josh Hawkins 2024-06-10 17:36:23 -05:00
parent dc907ed197
commit 72a719ff33
2 changed files with 22 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,6 +10,7 @@ type JSMpegPlayerProps = {
width: number;
height: number;
containerRef?: React.MutableRefObject<HTMLDivElement | null>;
onPlaying?: () => void;
};
export default function JSMpegPlayer({
@ -18,6 +19,7 @@ export default function JSMpegPlayer({
height,
className,
containerRef,
onPlaying,
}: JSMpegPlayerProps) {
const url = `${baseUrl.replace(/^http/, "ws")}live/jsmpeg/${camera}`;
const playerRef = useRef<HTMLDivElement | null>(null);
@ -88,7 +90,14 @@ export default function JSMpegPlayer({
playerRef.current,
url,
{ canvas: `#${CSS.escape(uniqueId)}` },
{ protocols: [], audio: false, videoBufferSize: 1024 * 1024 * 4 },
{
protocols: [],
audio: false,
videoBufferSize: 1024 * 1024 * 4,
onPlay: () => {
onPlaying?.();
},
},
);
return () => {
@ -100,7 +109,7 @@ export default function JSMpegPlayer({
playerRef.current = null;
}
};
}, [url, uniqueId]);
}, [url, uniqueId, onPlaying]);
return (
<div className={className}>

14
web/src/components/player/LivePlayer.tsx
View File

@ -172,6 +172,7 @@ export default function LivePlayer({
width={cameraConfig.detect.width}
height={cameraConfig.detect.height}
containerRef={containerRef}
onPlaying={() => setLiveReady(true)}
/>
);
} else {
@ -195,11 +196,18 @@ export default function LivePlayer({
)}
onClick={onClick}
>
<div className="pointer-events-none absolute inset-x-0 top-0 z-10 h-[30%] w-full rounded-lg bg-gradient-to-b from-black/20 to-transparent md:rounded-2xl"></div>
<div className="pointer-events-none absolute inset-x-0 bottom-0 z-10 h-[10%] w-full rounded-lg bg-gradient-to-t from-black/20 to-transparent md:rounded-2xl"></div>
{liveReady && (
<>
<div className="pointer-events-none absolute inset-x-0 top-0 z-10 h-[30%] w-full rounded-lg bg-gradient-to-b from-black/20 to-transparent md:rounded-2xl"></div>
<div className="pointer-events-none absolute inset-x-0 bottom-0 z-10 h-[10%] w-full rounded-lg bg-gradient-to-t from-black/20 to-transparent md:rounded-2xl"></div>
</>
)}
{player}
{!offline && !showStillWithoutActivity && !liveReady && (
<ActivityIndicator />
)}
{objects.length > 0 && (
{liveReady && objects.length > 0 && (
<div className="absolute left-0 top-2 z-40">
<Tooltip>
<div className="flex">