Improve thumbnails and live player (#9828)

* Don't show gif until event is over and fix aspect

* Be more efficient about updating events

* ensure previews are sorted

* Don't show live view when window is not visible

* Move debug camera to separate view

* Improve jpg loading

* Ensure still is updated on player live finish

* Don't reload when window not visible

* Only disconnect instead of full remove

* Use start time instead of event over to determine gif

web/src/components/player/LivePlayer.tsx

@@ -2,13 +2,7 @@ import WebRtcPlayer from "./WebRTCPlayer";
 import { CameraConfig } from "@/types/frigateConfig";
 import AutoUpdatingCameraImage from "../camera/AutoUpdatingCameraImage";
 import ActivityIndicator from "../ui/activity-indicator";
-import { Button } from "../ui/button";
-import { LuSettings } from "react-icons/lu";
-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";
-import { usePersistence } from "@/hooks/use-persistence";
+import { useEffect, useMemo, useState } from "react";
 import MSEPlayer from "./MsePlayer";
 import JSMpegPlayer from "./JSMpegPlayer";
 import { MdCircle, MdLeakAdd } from "react-icons/md";
@@ -19,31 +13,33 @@ import { useRecordingsState } from "@/api/ws";
 import { LivePlayerMode } from "@/types/live";
 import useCameraLiveMode from "@/hooks/use-camera-live-mode";
 
-const emptyObject = Object.freeze({});
-
 type LivePlayerProps = {
   className?: string;
   cameraConfig: CameraConfig;
   preferredLiveMode?: LivePlayerMode;
   showStillWithoutActivity?: boolean;
+  windowVisible?: boolean;
 };
 
-type Options = { [key: string]: boolean };
-
 export default function LivePlayer({
   className,
   cameraConfig,
   preferredLiveMode,
   showStillWithoutActivity = true,
+  windowVisible = true,
 }: LivePlayerProps) {
   // camera activity
+
   const { activeMotion, activeAudio, activeTracking } =
     useCameraActivity(cameraConfig);
 
   const cameraActive = useMemo(
-    () => activeMotion || activeTracking,
-    [activeMotion, activeTracking]
+    () => windowVisible && (activeMotion || activeTracking),
+    [activeMotion, activeTracking, windowVisible]
   );
+
+  // camera live state
+
   const liveMode = useCameraLiveMode(cameraConfig, preferredLiveMode);
 
   const [liveReady, setLiveReady] = useState(false);
@@ -63,34 +59,23 @@ export default function LivePlayer({
 
   const { payload: recording } = useRecordingsState(cameraConfig.name);
 
-  // debug view settings
+  // camera still state
 
-  const [showSettings, setShowSettings] = useState(false);
-  const [options, setOptions] = usePersistence(
-    `${cameraConfig?.name}-feed`,
-    emptyObject
-  );
-  const handleSetOption = useCallback(
-    (id: string, value: boolean) => {
-      const newOptions = { ...options, [id]: value };
-      setOptions(newOptions);
-    },
-    [options]
-  );
-  const searchParams = useMemo(
-    () =>
-      new URLSearchParams(
-        Object.keys(options).reduce((memo, key) => {
-          //@ts-ignore we know this is correct
-          memo.push([key, options[key] === true ? "1" : "0"]);
-          return memo;
-        }, [])
-      ),
-    [options]
-  );
-  const handleToggleSettings = useCallback(() => {
-    setShowSettings(!showSettings);
-  }, [showSettings]);
+  const stillReloadInterval = useMemo(() => {
+    if (!windowVisible) {
+      return -1; // no reason to update the image when the window is not visible
+    }
+
+    if (liveReady) {
+      return 60000;
+    }
+
+    if (cameraActive) {
+      return 200;
+    }
+
+    return 30000;
+  }, []);
 
   if (!cameraConfig) {
     return <ActivityIndicator />;
@@ -111,6 +96,7 @@ export default function LivePlayer({
         <MSEPlayer
           className={`rounded-2xl h-full ${liveReady ? "" : "hidden"}`}
           camera={cameraConfig.name}
+          playbackEnabled={cameraActive}
           onPlaying={() => setLiveReady(true)}
         />
       );
@@ -131,34 +117,6 @@ export default function LivePlayer({
         height={cameraConfig.detect.height}
       />
     );
-  } else if (liveMode == "debug") {
-    player = (
-      <>
-        <AutoUpdatingCameraImage
-          camera={cameraConfig.name}
-          searchParams={searchParams}
-        />
-        <Button onClick={handleToggleSettings} variant="link" size="sm">
-          <span className="w-5 h-5">
-            <LuSettings />
-          </span>{" "}
-          <span>{showSettings ? "Hide" : "Show"} Options</span>
-        </Button>
-        {showSettings ? (
-          <Card>
-            <CardHeader>
-              <CardTitle>Options</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <DebugSettings
-                handleSetOption={handleSetOption}
-                options={options}
-              />
-            </CardContent>
-          </Card>
-        ) : null}
-      </>
-    );
   } else {
     player = <ActivityIndicator />;
   }
@@ -173,8 +131,7 @@ export default function LivePlayer({
     >
       <div className="absolute top-0 left-0 right-0 rounded-2xl z-10 w-full h-[30%] bg-gradient-to-b from-black/20 to-transparent pointer-events-none"></div>
       <div className="absolute bottom-0 left-0 right-0 rounded-2xl z-10 w-full h-[10%] bg-gradient-to-t from-black/20 to-transparent pointer-events-none"></div>
-
-      {(showStillWithoutActivity == false || cameraActive) && player}
+      {player}
 
       <div
         className={`absolute left-0 top-0 right-0 bottom-0 w-full ${
@@ -185,7 +142,7 @@ export default function LivePlayer({
           className="w-full h-full"
           camera={cameraConfig.name}
           showFps={false}
-          reloadInterval={cameraActive && !liveReady ? 200 : 30000}
+          reloadInterval={stillReloadInterval}
         />
       </div>
 
@@ -220,75 +177,3 @@ export default function LivePlayer({
     </div>
   );
 }
-
-type DebugSettingsProps = {
-  handleSetOption: (id: string, value: boolean) => void;
-  options: Options;
-};
-
-function DebugSettings({ handleSetOption, options }: DebugSettingsProps) {
-  return (
-    <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
-      <div className="flex items-center space-x-2">
-        <Switch
-          id="bbox"
-          checked={options["bbox"]}
-          onCheckedChange={(isChecked) => {
-            handleSetOption("bbox", isChecked);
-          }}
-        />
-        <Label htmlFor="bbox">Bounding Box</Label>
-      </div>
-      <div className="flex items-center space-x-2">
-        <Switch
-          id="timestamp"
-          checked={options["timestamp"]}
-          onCheckedChange={(isChecked) => {
-            handleSetOption("timestamp", isChecked);
-          }}
-        />
-        <Label htmlFor="timestamp">Timestamp</Label>
-      </div>
-      <div className="flex items-center space-x-2">
-        <Switch
-          id="zones"
-          checked={options["zones"]}
-          onCheckedChange={(isChecked) => {
-            handleSetOption("zones", isChecked);
-          }}
-        />
-        <Label htmlFor="zones">Zones</Label>
-      </div>
-      <div className="flex items-center space-x-2">
-        <Switch
-          id="mask"
-          checked={options["mask"]}
-          onCheckedChange={(isChecked) => {
-            handleSetOption("mask", isChecked);
-          }}
-        />
-        <Label htmlFor="mask">Mask</Label>
-      </div>
-      <div className="flex items-center space-x-2">
-        <Switch
-          id="motion"
-          checked={options["motion"]}
-          onCheckedChange={(isChecked) => {
-            handleSetOption("motion", isChecked);
-          }}
-        />
-        <Label htmlFor="motion">Motion</Label>
-      </div>
-      <div className="flex items-center space-x-2">
-        <Switch
-          id="regions"
-          checked={options["regions"]}
-          onCheckedChange={(isChecked) => {
-            handleSetOption("regions", isChecked);
-          }}
-        />
-        <Label htmlFor="regions">Regions</Label>
-      </div>
-    </div>
-  );
-}