Live player fixes and improvements (#11855)

* Only set stalled error when player is visible

* Show activity indicator before live player starts playing

* remove comment

* keep gradients when still image is showing

* fix chips

* red dot and outline

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}>