administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-12 22:25:24 +03:00
Code Issues Actions 2 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; width: number;
height: number; height: number;
containerRef?: React.MutableRefObject<HTMLDivElement | null>; containerRef?: React.MutableRefObject<HTMLDivElement | null>;
onPlaying?: () => void;
}; };
export default function JSMpegPlayer({ export default function JSMpegPlayer({
@ -18,6 +19,7 @@ export default function JSMpegPlayer({
height, height,
className, className,
containerRef, containerRef,
onPlaying,
}: JSMpegPlayerProps) { }: JSMpegPlayerProps) {
const url = `${baseUrl.replace(/^http/, "ws")}live/jsmpeg/${camera}`; const url = `${baseUrl.replace(/^http/, "ws")}live/jsmpeg/${camera}`;
const playerRef = useRef<HTMLDivElement | null>(null); const playerRef = useRef<HTMLDivElement | null>(null);
@ -88,7 +90,14 @@ export default function JSMpegPlayer({
playerRef.current, playerRef.current,
url, url,
{ canvas: `#${CSS.escape(uniqueId)}` }, { canvas: `#${CSS.escape(uniqueId)}` },
{ protocols: [], audio: false, videoBufferSize: 1024 * 1024 * 4 }, {
protocols: [],
audio: false,
videoBufferSize: 1024 * 1024 * 4,
onPlay: () => {
onPlaying?.();
},
},
); );
return () => { return () => {
@ -100,7 +109,7 @@ export default function JSMpegPlayer({
playerRef.current = null; playerRef.current = null;
} }
}; };
}, [url, uniqueId]); }, [url, uniqueId, onPlaying]);
return ( return (
<div className={className}> <div className={className}>

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

@ -172,6 +172,7 @@ export default function LivePlayer({
width={cameraConfig.detect.width} width={cameraConfig.detect.width}
height={cameraConfig.detect.height} height={cameraConfig.detect.height}
containerRef={containerRef} containerRef={containerRef}
onPlaying={() => setLiveReady(true)}
/> />
); );
} else { } else {
@ -195,11 +196,18 @@ export default function LivePlayer({
)} )}
onClick={onClick} 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> {liveReady && (
<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> <>
<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} {player}
{!offline && !showStillWithoutActivity && !liveReady && (
<ActivityIndicator />
)}
{objects.length > 0 && ( {liveReady && objects.length > 0 && (
<div className="absolute left-0 top-2 z-40"> <div className="absolute left-0 top-2 z-40">
<Tooltip> <Tooltip>
<div className="flex"> <div className="flex">