camera streaming settings dialog

web/src/components/filter/CameraGroupSelector.tsx

@@ -1,10 +1,14 @@
-import { CameraGroupConfig, FrigateConfig } from "@/types/frigateConfig";
+import {
+  CameraGroupConfig,
+  FrigateConfig,
+  GroupStreamingSettingsType,
+} from "@/types/frigateConfig";
 import { isDesktop, isMobile } from "react-device-detect";
 import useSWR from "swr";
 import { MdHome } from "react-icons/md";
 import { usePersistedOverlayState } from "@/hooks/use-overlay-state";
 import { Button, buttonVariants } from "../ui/button";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
 import { LuPencil, LuPlus } from "react-icons/lu";
 import {
@@ -43,7 +47,6 @@ import {
   AlertDialogTitle,
 } from "../ui/alert-dialog";
 import axios from "axios";
-import FilterSwitch from "./FilterSwitch";
 import { HiOutlineDotsVertical, HiTrash } from "react-icons/hi";
 import IconWrapper from "../ui/icon-wrapper";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -66,6 +69,9 @@ import {
   MobilePageHeader,
   MobilePageTitle,
 } from "../mobile/MobilePage";
+import { Label } from "../ui/label";
+import { Switch } from "../ui/switch";
+import { CameraStreamingDialog } from "../settings/CameraStreamingDialog";
 
 type CameraGroupSelectorProps = {
   className?: string;
@@ -607,6 +613,14 @@ export function CameraGroupEdit({
   const { data: config, mutate: updateConfig } =
     useSWR<FrigateConfig>("config");
 
+  const [groupStreamingSettings, setGroupStreamingSettings] =
+    useState<GroupStreamingSettingsType>({});
+
+  const [persistedGroupStreamingSettings, setPersistedGroupStreamingSettings] =
+    usePersistence<{ [groupName: string]: GroupStreamingSettingsType }>(
+      "streaming-settings",
+    );
+
   const birdseyeConfig = useMemo(() => config?.birdseye, [config]);
 
   const formSchema = z.object({
@@ -656,6 +670,18 @@ export function CameraGroupEdit({
 
       setIsLoading(true);
 
+      // update streaming settings
+      const updatedSettings: {
+        [groupName: string]: GroupStreamingSettingsType;
+      } = {
+        ...Object.fromEntries(
+          Object.entries(persistedGroupStreamingSettings || {}).filter(
+            ([key]) => key !== editingGroup?.[0],
+          ),
+        ),
+        [values.name]: groupStreamingSettings,
+      };
+
       let renamingQuery = "";
       if (editingGroup && editingGroup[0] !== values.name) {
         renamingQuery = `camera_groups.${editingGroup[0]}&`;
@@ -679,7 +705,7 @@ export function CameraGroupEdit({
             requires_restart: 0,
           },
         )
-        .then((res) => {
+        .then(async (res) => {
           if (res.status === 200) {
             toast.success(`Camera group (${values.name}) has been saved.`, {
               position: "top-center",
@@ -688,6 +714,7 @@ export function CameraGroupEdit({
             if (onSave) {
               onSave();
             }
+            await setPersistedGroupStreamingSettings(updatedSettings);
           } else {
             toast.error(`Failed to save config changes: ${res.statusText}`, {
               position: "top-center",
@@ -704,7 +731,16 @@ export function CameraGroupEdit({
           setIsLoading(false);
         });
     },
-    [currentGroups, setIsLoading, onSave, updateConfig, editingGroup],
+    [
+      currentGroups,
+      setIsLoading,
+      onSave,
+      updateConfig,
+      editingGroup,
+      groupStreamingSettings,
+      setPersistedGroupStreamingSettings,
+      persistedGroupStreamingSettings,
+    ],
   );
 
   const form = useForm<z.infer<typeof formSchema>>({
@@ -717,6 +753,20 @@ export function CameraGroupEdit({
     },
   });
 
+  // streaming settings
+
+  useEffect(() => {
+    if (editingGroup && editingGroup[0] && persistedGroupStreamingSettings) {
+      setGroupStreamingSettings(
+        persistedGroupStreamingSettings[editingGroup[0]] || {},
+      );
+    }
+  }, [
+    editingGroup,
+    persistedGroupStreamingSettings,
+    setGroupStreamingSettings,
+  ]);
+
   return (
     <Form {...form}>
       <form
@@ -758,16 +808,38 @@ export function CameraGroupEdit({
                   ...Object.keys(config?.cameras ?? {}),
                 ].map((camera) => (
                   <FormControl key={camera}>
-                    <FilterSwitch
-                      isChecked={field.value && field.value.includes(camera)}
-                      label={camera.replaceAll("_", " ")}
-                      onCheckedChange={(checked) => {
-                        const updatedCameras = checked
-                          ? [...(field.value || []), camera]
-                          : (field.value || []).filter((c) => c !== camera);
-                        form.setValue("cameras", updatedCameras);
-                      }}
-                    />
+                    <div className="flex items-center justify-between gap-1">
+                      <Label
+                        className="mx-2 w-full cursor-pointer capitalize text-primary"
+                        htmlFor={camera.replaceAll("_", " ")}
+                      >
+                        {camera.replaceAll("_", " ")}
+                      </Label>
+
+                      <div className="flex items-center gap-x-2">
+                        {camera !== "birdseye" && (
+                          <CameraStreamingDialog
+                            camera={camera}
+                            selectedCameras={field.value}
+                            config={config}
+                            groupStreamingSettings={groupStreamingSettings}
+                            setGroupStreamingSettings={
+                              setGroupStreamingSettings
+                            }
+                          />
+                        )}
+                        <Switch
+                          id={camera.replaceAll("_", " ")}
+                          checked={field.value && field.value.includes(camera)}
+                          onCheckedChange={(checked) => {
+                            const updatedCameras = checked
+                              ? [...(field.value || []), camera]
+                              : (field.value || []).filter((c) => c !== camera);
+                            form.setValue("cameras", updatedCameras);
+                          }}
+                        />
+                      </div>
+                    </div>
                   </FormControl>
                 ))}
               </FormItem>

web/src/components/settings/CameraStreamingDialog.tsx

@@ -0,0 +1,253 @@
+import { useState, useCallback, useEffect } from "react";
+import { IoIosWarning } from "react-icons/io";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  DialogDescription,
+} from "@/components/ui/dialog";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+import { cn } from "@/lib/utils";
+import {
+  FrigateConfig,
+  GroupStreamingSettingsType,
+} from "@/types/frigateConfig";
+import ActivityIndicator from "../indicators/activity-indicator";
+import { LuSettings } from "react-icons/lu";
+
+type CameraStreamingDialogProps = {
+  camera: string;
+  selectedCameras: string[];
+  config?: FrigateConfig;
+  groupStreamingSettings: GroupStreamingSettingsType;
+  setGroupStreamingSettings: React.Dispatch<
+    React.SetStateAction<GroupStreamingSettingsType>
+  >;
+};
+
+export function CameraStreamingDialog({
+  camera,
+  selectedCameras,
+  config,
+  groupStreamingSettings,
+  setGroupStreamingSettings,
+}: CameraStreamingDialogProps) {
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [streamName, setStreamName] = useState("");
+  const [streamType, setStreamType] = useState("smart");
+  const [compatibilityMode, setCompatibilityMode] = useState(false);
+
+  useEffect(() => {
+    if (groupStreamingSettings && groupStreamingSettings[camera]) {
+      const cameraSettings = groupStreamingSettings[camera];
+      setStreamName(cameraSettings.streamName || "");
+      setStreamType(cameraSettings.streamType || "smart");
+      setCompatibilityMode(cameraSettings.compatibilityMode || false);
+    } else {
+      setStreamName("");
+      setStreamType("smart");
+      setCompatibilityMode(false);
+    }
+  }, [groupStreamingSettings, camera]);
+
+  const handleSave = useCallback(() => {
+    setIsLoading(true);
+    setGroupStreamingSettings((prevSettings) => ({
+      ...prevSettings,
+      [camera]: { streamName, streamType, compatibilityMode },
+    }));
+    setIsDialogOpen(false);
+    setIsLoading(false);
+  }, [
+    setGroupStreamingSettings,
+    camera,
+    streamName,
+    streamType,
+    compatibilityMode,
+  ]);
+
+  const handleCancel = useCallback(() => {
+    if (groupStreamingSettings && groupStreamingSettings[camera]) {
+      const cameraSettings = groupStreamingSettings[camera];
+      setStreamName(cameraSettings.streamName || "");
+      setStreamType(cameraSettings.streamType || "smart");
+      setCompatibilityMode(cameraSettings.compatibilityMode || false);
+    } else {
+      setStreamName("");
+      setStreamType("smart");
+      setCompatibilityMode(false);
+    }
+    setIsDialogOpen(false);
+  }, [groupStreamingSettings, camera]);
+
+  if (!config) {
+    return null;
+  }
+
+  return (
+    <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+      <DialogTrigger asChild>
+        <Button
+          className="flex h-auto items-center gap-1"
+          aria-label="Camera streaming settings"
+          size="icon"
+          variant="ghost"
+          disabled={!(selectedCameras && selectedCameras.includes(camera))}
+        >
+          <LuSettings
+            className={cn(
+              selectedCameras && selectedCameras.includes(camera)
+                ? "text-primary"
+                : "text-muted-foreground",
+              "size-5",
+            )}
+          />
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader className="mb-4">
+          <DialogTitle className="capitalize">
+            {camera.replaceAll("_", " ")} Streaming Settings
+          </DialogTitle>
+          <DialogDescription>
+            Change the live streaming options for this camera group's dashboard.{" "}
+            <em>These settings are device/browser-specific.</em>
+          </DialogDescription>
+        </DialogHeader>
+        <div className="flex flex-col space-y-8">
+          {Object.entries(config?.cameras[camera].live.streams).length > 1 && (
+            <div className="flex flex-col items-start gap-2">
+              <Label htmlFor="stream" className="text-right">
+                Stream
+              </Label>
+              <Select value={streamName} onValueChange={setStreamName}>
+                <SelectTrigger className="">
+                  <SelectValue placeholder="Choose a stream" />
+                </SelectTrigger>
+                <SelectContent>
+                  {camera !== "birdseye" &&
+                    Object.entries(config?.cameras[camera].live.streams).map(
+                      ([stream, name]) => (
+                        <SelectItem key={stream} value={name}>
+                          {stream}
+                        </SelectItem>
+                      ),
+                    )}
+                </SelectContent>
+              </Select>
+            </div>
+          )}
+          <div className="flex flex-col items-start gap-2">
+            <Label htmlFor="streaming-method" className="text-right">
+              Streaming Method
+            </Label>
+            <Select value={streamType} onValueChange={setStreamType}>
+              <SelectTrigger className="">
+                <SelectValue placeholder="Choose a streaming option" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="no-streaming">No Streaming</SelectItem>
+                <SelectItem value="smart">
+                  Smart Streaming (recommended)
+                </SelectItem>
+                <SelectItem value="continuous">Continuous Streaming</SelectItem>
+              </SelectContent>
+            </Select>
+            {streamType === "no-streaming" && (
+              <p className="text-sm text-muted-foreground">
+                Camera images will only update once per minute and no live
+                streaming will occur.
+              </p>
+            )}
+            {streamType === "smart" && (
+              <p className="text-sm text-muted-foreground">
+                Smart streaming will update your camera image once per minute
+                when no detectable activity is occurring to conserve bandwidth
+                and resources. When activity is detected, the image seamlessly
+                switches to a live stream.
+              </p>
+            )}
+            {streamType === "continuous" && (
+              <>
+                <p className="text-sm text-muted-foreground">
+                  Camera image will always be a live stream when visible on the
+                  dashboard, even if no activity is being detected.
+                </p>
+                <div className="flex items-center gap-2">
+                  <IoIosWarning className="mr-2 size-5 text-danger" />
+                  <div className="max-w-[85%] text-sm">
+                    Continuous streaming may cause high bandwidth usage and
+                    performance issues. Use with caution.
+                  </div>
+                </div>
+              </>
+            )}
+          </div>
+          <div className="flex flex-col items-start gap-2">
+            <div className="flex items-center gap-2">
+              <Checkbox
+                id="compatibility"
+                className="size-5 text-white accent-white data-[state=checked]:bg-selected data-[state=checked]:text-white"
+                checked={compatibilityMode}
+                onCheckedChange={() => setCompatibilityMode(!compatibilityMode)}
+              />
+              <Label
+                htmlFor="compatibility"
+                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+              >
+                Compatibility mode
+              </Label>
+            </div>
+            <div className="flex flex-col gap-2 leading-none">
+              <p className="text-sm text-muted-foreground">
+                Enable this option only if your camera's live stream is
+                displaying color artifacts and has a diagonal line on the right
+                side of the image.
+              </p>
+            </div>
+          </div>
+        </div>
+        <div className="flex flex-1 flex-col justify-end">
+          <div className="flex flex-row gap-2 pt-5">
+            <Button
+              className="flex flex-1"
+              aria-label="Cancel"
+              onClick={handleCancel}
+            >
+              Cancel
+            </Button>
+            <Button
+              variant="select"
+              aria-label="Save"
+              disabled={isLoading}
+              className="flex flex-1"
+              onClick={handleSave}
+            >
+              {isLoading ? (
+                <div className="flex flex-row items-center gap-2">
+                  <ActivityIndicator />
+                  <span>Saving...</span>
+                </div>
+              ) : (
+                "Save"
+              )}
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

web/src/hooks/use-camera-live-mode.ts

@@ -23,7 +23,7 @@ export default function useCameraLiveMode(
         const isRestreamed =
           config &&
           Object.keys(config.go2rtc.streams || {}).includes(
-            camera.live.stream_name,
+            Object.values(camera.live.streams)[0],
           );
 
         if (!mseSupported) {

web/src/types/frigateConfig.ts

@@ -229,6 +229,16 @@ export type CameraGroupConfig = {
   order: number;
 };
 
+export type CameraStreamingSettings = {
+  streamName: string;
+  streamType: string;
+  compatibilityMode: boolean;
+};
+
+export type GroupStreamingSettingsType = {
+  [cameraName: string]: CameraStreamingSettings;
+};
+
 export interface FrigateConfig {
   audio: {
     enabled: boolean;

web/src/views/live/DraggableGridLayout.tsx

@@ -650,6 +650,7 @@ const LivePlayerGridItem = React.forwardRef<
           windowVisible={windowVisible}
           cameraConfig={cameraConfig}
           preferredLiveMode={preferredLiveMode}
+          streamName={Object.values(cameraConfig.live.streams)[0]}
           onClick={onClick}
           onError={onError}
           onResetLiveMode={onResetLiveMode}

web/src/views/live/LiveDashboardView.tsx

@@ -356,6 +356,7 @@ export default function LiveDashboardView({
                   cameraConfig={camera}
                   preferredLiveMode={preferredLiveModes[camera.name] ?? "mse"}
                   autoLive={autoLiveView}
+                  streamName={Object.values(camera.live.streams)[0]}
                   onClick={() => onSelectCamera(camera.name)}
                   onError={(e) => handleError(camera.name, e)}
                   onResetLiveMode={() => resetPreferredLiveMode(camera.name)}