Show still image when no activity is occurring

web/src/components/camera/AutoUpdatingCameraImage.tsx

@@ -6,6 +6,8 @@ type AutoUpdatingCameraImageProps = {
   searchParams?: {};
   showFps?: boolean;
   className?: string;
+  reloadInterval?: number;
+  fitAspect?: number;
 };
 
 const MIN_LOAD_TIMEOUT_MS = 200;
@@ -15,6 +17,8 @@ export default function AutoUpdatingCameraImage({
   searchParams = "",
   showFps = true,
   className,
+  reloadInterval = MIN_LOAD_TIMEOUT_MS,
+  fitAspect,
 }: AutoUpdatingCameraImageProps) {
   const [key, setKey] = useState(Date.now());
   const [fps, setFps] = useState<string>("0");
@@ -23,14 +27,14 @@ export default function AutoUpdatingCameraImage({
     const loadTime = Date.now() - key;
 
     if (showFps) {
-      setFps((1000 / Math.max(loadTime, MIN_LOAD_TIMEOUT_MS)).toFixed(1));
+      setFps((1000 / Math.max(loadTime, reloadInterval)).toFixed(1));
     }
 
     setTimeout(
       () => {
         setKey(Date.now());
       },
-      loadTime > MIN_LOAD_TIMEOUT_MS ? 1 : MIN_LOAD_TIMEOUT_MS
+      loadTime > reloadInterval ? 1 : reloadInterval
     );
   }, [key, setFps]);
 
@@ -39,6 +43,7 @@ export default function AutoUpdatingCameraImage({
       <CameraImage
         camera={camera}
         onload={handleLoad}
+        fitAspect={fitAspect}
         searchParams={`cache=${key}&${searchParams}`}
       />
       {showFps ? <span className="text-xs">Displaying at {fps}fps</span> : null}

web/src/components/camera/CameraImage.tsx

@@ -5,6 +5,7 @@ import ActivityIndicator from "../ui/activity-indicator";
 import { useResizeObserver } from "@/hooks/resize-observer";
 
 type CameraImageProps = {
+  className?: string;
   camera: string;
   onload?: (event: Event) => void;
   searchParams?: {};
@@ -13,6 +14,7 @@ type CameraImageProps = {
 };
 
 export default function CameraImage({
+  className,
   camera,
   onload,
   searchParams = "",
@@ -88,11 +90,12 @@ export default function CameraImage({
     <div
       className={`relative w-full ${
         fitAspect && aspectRatio < fitAspect ? "h-full flex justify-center" : ""
-      }`}
+      } ${className}`}
       ref={containerRef}
     >
       {enabled ? (
         <canvas
+          className="rounded-2xl"
           data-testid="cameraimage-canvas"
           height={scaledHeight}
           ref={canvasRef}

web/src/components/player/LivePlayer.tsx

@@ -4,7 +4,7 @@ import AutoUpdatingCameraImage from "../camera/AutoUpdatingCameraImage";
 import ActivityIndicator from "../ui/activity-indicator";
 import { Button } from "../ui/button";
 import { LuSettings } from "react-icons/lu";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
 import { Switch } from "../ui/switch";
 import { Label } from "../ui/label";
@@ -15,14 +15,18 @@ import { MdCircle, MdLeakAdd, MdSelectAll } from "react-icons/md";
 import { BsSoundwave } from "react-icons/bs";
 import Chip from "../Chip";
 import useCameraActivity from "@/hooks/use-camera-activity";
+import CameraImage from "../camera/CameraImage";
 
 const emptyObject = Object.freeze({});
 
+type LivePlayerMode = "webrtc" | "mse" | "jsmpeg" | "debug";
+
 type LivePlayerProps = {
   className?: string;
   cameraConfig: CameraConfig;
-  liveMode?: "webrtc" | "mse" | "jsmpeg" | "debug";
+  liveMode?: LivePlayerMode;
   liveChips?: boolean;
+  showStillWithoutActivity?: boolean;
 };
 
 type Options = { [key: string]: boolean };
@@ -32,11 +36,23 @@ export default function LivePlayer({
   cameraConfig,
   liveMode = "mse",
   liveChips = false,
+  showStillWithoutActivity = true,
 }: LivePlayerProps) {
   // camera activity
   const { activeMotion, activeAudio, activeTracking } =
     useCameraActivity(cameraConfig);
 
+  const [liveReady, setLiveReady] = useState(false);
+  useEffect(() => {
+    if (!liveReady) {
+      return;
+    }
+
+    if (!activeMotion && !activeTracking) {
+      setLiveReady(false);
+    }
+  }, [activeMotion, activeTracking, liveReady]);
+
   // debug view settings
 
   const [showSettings, setShowSettings] = useState(false);
@@ -80,7 +96,13 @@ export default function LivePlayer({
     );
   } else if (liveMode == "mse") {
     if ("MediaSource" in window || "ManagedMediaSource" in window) {
-      player = <MSEPlayer className="rounded-2xl" camera={cameraConfig.name} />;
+      player = (
+        <MSEPlayer
+          className="rounded-2xl"
+          camera={cameraConfig.name}
+          onPlaying={() => setLiveReady(true)}
+        />
+      );
     } else {
       player = (
         <div className="w-5xl text-center text-sm">
@@ -131,31 +153,57 @@ export default function LivePlayer({
 
   return (
     <div className={`relative flex justify-center ${className}`}>
-      {player}
-      <div className="absolute flex left-2 top-2 gap-2">
-        <Chip className="bg-gray-500 bg-gradient-to-br">
-          <MdLeakAdd
-            className={`w-4 h-4 ${activeMotion ? "text-motion" : "text-white"}`}
+      {(showStillWithoutActivity == false || activeMotion || activeTracking) &&
+        player}
+
+      {showStillWithoutActivity && !liveReady && (
+        <div className="absolute left-0 top-0 right-0 bottom-0">
+          <AutoUpdatingCameraImage
+            className="w-full h-full"
+            camera={cameraConfig.name}
+            showFps={false}
+            reloadInterval={30000}
+            fitAspect={
+              cameraConfig.detect.width / cameraConfig.detect.height > 2 ||
+              cameraConfig.detect.width / cameraConfig.detect.height < 1
+                ? undefined
+                : 16 / 9
+            }
+            searchParams={`cache=${123}`}
           />
-          <div className="ml-1 capitalize text-white text-xs">Motion</div>
-        </Chip>
-        {cameraConfig.audio.enabled_in_config && (
+        </div>
+      )}
+
+      {liveChips && (
+        <div className="absolute flex left-2 top-2 gap-2">
           <Chip className="bg-gray-500 bg-gradient-to-br">
-            <BsSoundwave
-              className={`w-4 h-4 ${activeAudio ? "text-audio" : "text-white"}`}
+            <MdLeakAdd
+              className={`w-4 h-4 ${
+                activeMotion ? "text-motion" : "text-white"
+              }`}
             />
-            <div className="ml-1 capitalize text-white text-xs">Sound</div>
+            <div className="ml-1 capitalize text-white text-xs">Motion</div>
           </Chip>
-        )}
-        <Chip className="bg-gray-500 bg-gradient-to-br">
-          <MdSelectAll
-            className={`w-4 h-4 ${
-              activeTracking ? "text-object" : "text-white"
-            }`}
-          />
-          <div className="ml-1 capitalize text-white text-xs">Tracking</div>
-        </Chip>
-      </div>
+          {cameraConfig.audio.enabled_in_config && (
+            <Chip className="bg-gray-500 bg-gradient-to-br">
+              <BsSoundwave
+                className={`w-4 h-4 ${
+                  activeAudio ? "text-audio" : "text-white"
+                }`}
+              />
+              <div className="ml-1 capitalize text-white text-xs">Sound</div>
+            </Chip>
+          )}
+          <Chip className="bg-gray-500 bg-gradient-to-br">
+            <MdSelectAll
+              className={`w-4 h-4 ${
+                activeTracking ? "text-object" : "text-white"
+              }`}
+            />
+            <div className="ml-1 capitalize text-white text-xs">Tracking</div>
+          </Chip>
+        </div>
+      )}
       <Chip className="absolute right-2 top-2 bg-gray-500 bg-gradient-to-br">
         <MdCircle className="w-2 h-2 text-danger" />
         <div className="ml-1 capitalize text-white text-xs">

web/src/components/player/MsePlayer.tsx

@@ -4,9 +4,10 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 type MSEPlayerProps = {
   camera: string;
   className?: string;
+  onPlaying?: () => void;
 };
 
-function MSEPlayer({ camera, className }: MSEPlayerProps) {
+function MSEPlayer({ camera, className, onPlaying }: MSEPlayerProps) {
   let connectTS: number = 0;
 
   const RECONNECT_TIMEOUT: number = 30000;
@@ -250,6 +251,7 @@ function MSEPlayer({ camera, className }: MSEPlayerProps) {
       className={className}
       playsInline
       preload="auto"
+      onLoadedData={onPlaying}
       muted
     />
   );