From 72a719ff33d9192450bb2c88b96c232c86c0532c Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Mon, 10 Jun 2024 17:36:23 -0500
Subject: [PATCH] Show activity indicator before live player starts playing

---
 web/src/components/player/JSMpegPlayer.tsx | 13 +++++++++++--
 web/src/components/player/LivePlayer.tsx   | 14 +++++++++++---
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/web/src/components/player/JSMpegPlayer.tsx b/web/src/components/player/JSMpegPlayer.tsx
index cf25c54c6..91cd3e1c9 100644
--- a/web/src/components/player/JSMpegPlayer.tsx
+++ b/web/src/components/player/JSMpegPlayer.tsx
@@ -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}>
diff --git a/web/src/components/player/LivePlayer.tsx b/web/src/components/player/LivePlayer.tsx
index ffa1579dc..0f61b2062 100644
--- a/web/src/components/player/LivePlayer.tsx
+++ b/web/src/components/player/LivePlayer.tsx
@@ -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">