Change Automatic Live View setting to allow for continuous playback

web/src/types/live.ts

@@ -32,3 +32,6 @@ export type LiveStreamMetadata = {
 };
 
 export type LivePlayerError = "stalled" | "startup" | "mse-decode";
+
+export const LiveViewModes = ["Auto", "Static", "Continuous"] as const
+export type LiveViewMode = (typeof LiveViewModes)[number];

web/src/views/live/DraggableGridLayout.tsx

@@ -20,7 +20,7 @@ import {
 } from "react-grid-layout";
 import "react-grid-layout/css/styles.css";
 import "react-resizable/css/styles.css";
-import { LivePlayerError, LivePlayerMode } from "@/types/live";
+import { LivePlayerError, LivePlayerMode, LiveViewMode } from "@/types/live";
 import { ASPECT_VERTICAL_LAYOUT, ASPECT_WIDE_LAYOUT } from "@/types/record";
 import { Skeleton } from "@/components/ui/skeleton";
 import { useResizeObserver } from "@/hooks/resize-observer";
@@ -74,10 +74,10 @@ export default function DraggableGridLayout({
   const birdseyeConfig = useMemo(() => config?.birdseye, [config]);
 
   // preferred live modes per camera
-
   const [preferredLiveModes, setPreferredLiveModes] = useState<{
     [key: string]: LivePlayerMode;
   }>({});
+  const [liveViewMode] = usePersistence<LiveViewMode>("liveViewMode", "Auto");
 
   useEffect(() => {
     if (!cameras) return;
@@ -463,6 +463,7 @@ export default function DraggableGridLayout({
                   }
                   cameraConfig={camera}
                   preferredLiveMode={preferredLiveModes[camera.name] ?? "mse"}
+                  liveViewMode={liveViewMode}
                   onClick={() => {
                     !isEditMode && onSelectCamera(camera.name);
                   }}
@@ -635,6 +636,7 @@ type LivePlayerGridItemProps = {
   preferredLiveMode: LivePlayerMode;
   onClick: () => void;
   onError: (e: LivePlayerError) => void;
+  liveViewMode?: LiveViewMode;
 };
 
 const LivePlayerGridItem = React.forwardRef<
@@ -655,6 +657,7 @@ const LivePlayerGridItem = React.forwardRef<
       preferredLiveMode,
       onClick,
       onError,
+      liveViewMode,
       ...props
     },
     ref,
@@ -677,6 +680,8 @@ const LivePlayerGridItem = React.forwardRef<
           onClick={onClick}
           onError={onError}
           containerRef={ref as React.RefObject<HTMLDivElement>}
+          autoLive={liveViewMode == "Auto" || liveViewMode == "Continuous"}
+          showStillWithoutActivity={liveViewMode != "Continuous"}
         />
         {children}
       </div>

web/src/views/live/LiveDashboardView.tsx

@@ -28,7 +28,7 @@ import DraggableGridLayout from "./DraggableGridLayout";
 import { IoClose } from "react-icons/io5";
 import { LuLayoutDashboard } from "react-icons/lu";
 import { cn } from "@/lib/utils";
-import { LivePlayerError, LivePlayerMode } from "@/types/live";
+import {LivePlayerError, LivePlayerMode, LiveViewMode} from "@/types/live";
 import { FaCompress, FaExpand } from "react-icons/fa";
 import { useResizeObserver } from "@/hooks/resize-observer";
 
@@ -128,7 +128,7 @@ export default function LiveDashboardView({
 
   // camera live views
 
-  const [autoLiveView] = usePersistence("autoLiveView", true);
+  const [liveViewMode] = usePersistence<LiveViewMode>("liveViewMode", "Auto");
   const [preferredLiveModes, setPreferredLiveModes] = useState<{
     [key: string]: LivePlayerMode;
   }>({});
@@ -377,7 +377,10 @@ export default function LiveDashboardView({
                   }
                   cameraConfig={camera}
                   preferredLiveMode={preferredLiveModes[camera.name] ?? "mse"}
-                  autoLive={autoLiveView}
+                  autoLive={
+                    liveViewMode == "Auto" || liveViewMode == "Continuous"
+                  }
+                  showStillWithoutActivity={liveViewMode != "Continuous"}
                   onClick={() => onSelectCamera(camera.name)}
                   onError={(e) => handleError(camera.name, e)}
                 />

web/src/views/settings/GeneralSettingsView.tsx

@@ -18,6 +18,7 @@ import {
   SelectItem,
   SelectTrigger,
 } from "../../components/ui/select";
+import { LiveViewMode, LiveViewModes } from "@/types/live.ts";
 
 const PLAYBACK_RATE_DEFAULT = isSafari ? [0.5, 1, 2] : [0.5, 1, 2, 4, 8, 16];
 const WEEK_STARTS_ON = ["Sunday", "Monday"];
@@ -52,7 +53,10 @@ export default function GeneralSettingsView() {
 
   // settings
 
-  const [autoLive, setAutoLive] = usePersistence("autoLiveView", true);
+  const [liveViewMode, setLiveViewMode] = usePersistence<LiveViewMode>(
+    "liveViewMode",
+    "Auto",
+  );
   const [playbackRate, setPlaybackRate] = usePersistence("playbackRate", 1);
   const [weekStartsOn, setWeekStartsOn] = usePersistence("weekStartsOn", 0);
   const [alertVideos, setAlertVideos] = usePersistence("alertVideos", true);
@@ -61,7 +65,8 @@ export default function GeneralSettingsView() {
       <>
       <div className="flex size-full flex-col md:flex-row">
         <Toaster position="top-center" closeButton={true}/>
-        <div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto rounded-lg border-[1px] border-secondary-foreground bg-background_alt p-2 md:order-none md:mb-0 md:mr-2 md:mt-0">
+        <div
+            className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto rounded-lg border-[1px] border-secondary-foreground bg-background_alt p-2 md:order-none md:mb-0 md:mr-2 md:mt-0">
           <Heading as="h3" className="my-2">
             General Settings
           </Heading>
@@ -73,25 +78,34 @@ export default function GeneralSettingsView() {
           </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="text-md">Live View Modes</div>
             <div className="my-2 text-sm text-muted-foreground">
-                <p>
-                  Automatically switch to a camera's live view when activity is
-                  detected. Disabling this option causes static camera images on
-                  the Live dashboard to only update once per minute.
-                </p>
-              </div>
+              <p>The mode for live streams. <br/> Auto mode (default) will begin streaming when motion is
+                detected.<br/> Static mode will update images on live streams once per minute.<br/> Continuous mode
+                will stream cameras regardless of motion. Caution: Continuous mode will increase bandwidth
+                usage and may affect performance.</p>
             </div>
+            <Select
+                value={liveViewMode}
+                onValueChange={(value: LiveViewMode) => setLiveViewMode(value)}
+            >
+              <SelectTrigger className="w-100">
+                {liveViewMode}
+              </SelectTrigger>
+              <SelectContent>
+                <SelectGroup>
+                  {LiveViewModes.map((mode) => (
+                      <SelectItem
+                          key={mode}
+                          className="cursor-pointer"
+                          value={mode}
+                      >
+                        {mode}
+                      </SelectItem>
+                  ))}
+                </SelectGroup>
+              </SelectContent>
+            </Select>
             <div className="space-y-3">
               <div className="flex flex-row items-center justify-start gap-2">
                 <Switch
@@ -203,5 +217,6 @@ export default function GeneralSettingsView() {
       </div>
 </div>
 </>
-  );
+)
+  ;
 }