Implement non auto live

web/src/components/player/LivePlayer.tsx

@@ -17,6 +17,7 @@ import { cn } from "@/lib/utils";
 
 type LivePlayerProps = {
   cameraRef?: (ref: HTMLDivElement | null) => void;
+  containerRef?: React.MutableRefObject<HTMLDivElement | null>;
   className?: string;
   cameraConfig: CameraConfig;
   preferredLiveMode?: LivePlayerMode;
@@ -26,13 +27,14 @@ type LivePlayerProps = {
   micEnabled?: boolean; // only webrtc supports mic
   iOSCompatFullScreen?: boolean;
   pip?: boolean;
+  autoLive?: boolean;
   onClick?: () => void;
   setFullResolution?: React.Dispatch<React.SetStateAction<VideoResolutionType>>;
-  containerRef?: React.MutableRefObject<HTMLDivElement | null>;
 };
 
 export default function LivePlayer({
   cameraRef = undefined,
+  containerRef,
   className,
   cameraConfig,
   preferredLiveMode,
@@ -42,9 +44,9 @@ export default function LivePlayer({
   micEnabled = false,
   iOSCompatFullScreen = false,
   pip,
+  autoLive = true,
   onClick,
   setFullResolution,
-  containerRef,
 }: LivePlayerProps) {
   // camera activity
 
@@ -64,6 +66,10 @@ export default function LivePlayer({
 
   const [liveReady, setLiveReady] = useState(false);
   useEffect(() => {
+    if (!autoLive) {
+      return;
+    }
+
     if (!liveReady) {
       if (cameraActive && liveMode == "jsmpeg") {
         setLiveReady(true);
@@ -77,7 +83,7 @@ export default function LivePlayer({
     }
     // live mode won't change
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [cameraActive, liveReady]);
+  }, [autoLive, cameraActive, liveReady]);
 
   // camera still state
 
@@ -91,18 +97,31 @@ export default function LivePlayer({
     }
 
     if (activeMotion || activeTracking) {
-      return 200;
+      if (autoLive) {
+        return 200;
+      } else {
+        return 59000;
+      }
     }
 
     return 30000;
-  }, [liveReady, activeMotion, activeTracking, offline, windowVisible]);
+  }, [
+    autoLive,
+    liveReady,
+    activeMotion,
+    activeTracking,
+    offline,
+    windowVisible,
+  ]);
 
   if (!cameraConfig) {
     return <ActivityIndicator />;
   }
 
   let player;
-  if (liveMode == "webrtc") {
+  if (!autoLive) {
+    player = null;
+  } else if (liveMode == "webrtc") {
     player = (
       <WebRtcPlayer
         className={`size-full rounded-lg md:rounded-2xl ${liveReady ? "" : "hidden"}`}

web/src/views/live/LiveDashboardView.tsx

@@ -50,6 +50,7 @@ export default function LiveDashboardView({
   const containerRef = useRef<HTMLDivElement>(null);
 
   // recent events
+
   const { payload: eventUpdate } = useFrigateReviews();
   const { data: allEvents, mutate: updateEvents } = useSWR<ReviewSegment[]>([
     "review",
@@ -92,6 +93,7 @@ export default function LiveDashboardView({
 
   // camera live views
 
+  const [autoLiveView] = usePersistence("autoLiveView");
   const [windowVisible, setWindowVisible] = useState(true);
   const visibilityListener = useCallback(() => {
     setWindowVisible(document.visibilityState == "visible");

web/src/views/settings/GeneralSettingsVIew.tsx

@@ -49,6 +49,9 @@ export default function GeneralSettingsView() {
     document.title = "General Settings - Frigate";
   }, []);
 
+  // settings
+
+  const [autoLive, setAutoLive] = usePersistence("autoLiveView", true);
   const [playbackRate, setPlaybackRate] = usePersistence("playbackRate", 1);
 
   return (
@@ -60,7 +63,33 @@ export default function GeneralSettingsView() {
             General Settings
           </Heading>
 
-          <div className="flex w-full flex-col space-y-6">
+          <Separator className="my-2 flex bg-secondary" />
+
+          <Heading as="h4" className="my-2">
+            Dashboard
+          </Heading>
+
+          <div className="mt-2 space-y-6">
+            <div className="space-y-3">
+              <div className="flex flex-row items-center justify-start gap-2">
+                <Switch
+                  id="auto-live"
+                  checked={autoLive}
+                  onCheckedChange={setAutoLive}
+                />
+                <Label className="cursor-pointer" htmlFor="auto-live">
+                  Automatic Live View
+                </Label>
+              </div>
+              <div className="my-2 text-sm text-muted-foreground">
+                <p>
+                  Automatically switch to live view when motion is detected.
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <div className="my-3 flex w-full flex-col space-y-6">
             <div className="mt-2 space-y-6">
               <div className="space-y-0.5">
                 <div className="text-md">Stored Layouts</div>
@@ -72,11 +101,15 @@ export default function GeneralSettingsView() {
                   </p>
                 </div>
               </div>
-              <div className="flex flex-row items-center justify-start gap-2">
+              <Button onClick={clearStoredLayouts}>Clear All Layouts</Button>
-                <Button onClick={clearStoredLayouts}>Clear All Layouts</Button>
-              </div>
             </div>
+
             <Separator className="my-2 flex bg-secondary" />
+
+            <Heading as="h4" className="my-2">
+              Recordings Viewer
+            </Heading>
+
             <div className="mt-2 space-y-6">
               <div className="space-y-0.5">
                 <div className="text-md">Default Playback Rate</div>
@@ -107,26 +140,6 @@ export default function GeneralSettingsView() {
               </SelectContent>
             </Select>
             <Separator className="my-2 flex bg-secondary" />
-            <div className="mt-2 space-y-6">
-              <div className="space-y-0.5">
-                <div className="text-md">Low Data Mode</div>
-                <div className="my-2 text-sm text-muted-foreground">
-                  <p>
-                    Not yet implemented. <em>Default: disabled</em>
-                  </p>
-                </div>
-              </div>
-              <div className="flex flex-row items-center justify-start gap-2">
-                <Switch
-                  id="lowdata"
-                  checked={false}
-                  onCheckedChange={() => {}}
-                />
-                <Label htmlFor="lowdata">
-                  Low Data Mode (this device only)
-                </Label>
-              </div>
-            </div>
           </div>
         </div>
       </div>

web/src/views/settings/MasksAndZonesView.tsx

@@ -9,7 +9,7 @@ import {
   useRef,
   useState,
 } from "react";
-import { PolygonCanvas } from "./PolygonCanvas";
+import { PolygonCanvas } from "@/components/settings/PolygonCanvas";
 import { Polygon, PolygonType } from "@/types/canvas";
 import { interpolatePoints, parseCoordinates } from "@/utils/canvasUtil";
 import { Skeleton } from "@/components/ui/skeleton";