From 9e34041e10f630c0755a8784886912e20aece789 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Wed, 13 Nov 2024 11:28:55 -0600
Subject: [PATCH] use first stream as default in dialog

---
 .../settings/CameraStreamingDialog.tsx        | 30 ++++++++++++++-----
 1 file changed, 22 insertions(+), 8 deletions(-)

diff --git a/web/src/components/settings/CameraStreamingDialog.tsx b/web/src/components/settings/CameraStreamingDialog.tsx
index 586ed73b6..1d05afbef 100644
--- a/web/src/components/settings/CameraStreamingDialog.tsx
+++ b/web/src/components/settings/CameraStreamingDialog.tsx
@@ -47,22 +47,30 @@ export function CameraStreamingDialog({
   const [isDialogOpen, setIsDialogOpen] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
 
-  const [streamName, setStreamName] = useState("");
+  const [streamName, setStreamName] = useState(
+    Object.entries(config?.cameras[camera]?.live?.streams || {})[0]?.[1] || "",
+  );
   const [streamType, setStreamType] = useState<StreamType>("smart");
   const [compatibilityMode, setCompatibilityMode] = useState(false);
 
   useEffect(() => {
+    if (!config) {
+      return;
+    }
     if (groupStreamingSettings && groupStreamingSettings[camera]) {
       const cameraSettings = groupStreamingSettings[camera];
       setStreamName(cameraSettings.streamName || "");
       setStreamType(cameraSettings.streamType || "smart");
       setCompatibilityMode(cameraSettings.compatibilityMode || false);
     } else {
-      setStreamName("");
+      setStreamName(
+        Object.entries(config?.cameras[camera]?.live?.streams || {})[0]?.[1] ||
+          "",
+      );
       setStreamType("smart");
       setCompatibilityMode(false);
     }
-  }, [groupStreamingSettings, camera]);
+  }, [groupStreamingSettings, camera, config]);
 
   const handleSave = useCallback(() => {
     setIsLoading(true);
@@ -81,18 +89,24 @@ export function CameraStreamingDialog({
   ]);
 
   const handleCancel = useCallback(() => {
+    if (!config) {
+      return;
+    }
     if (groupStreamingSettings && groupStreamingSettings[camera]) {
       const cameraSettings = groupStreamingSettings[camera];
       setStreamName(cameraSettings.streamName || "");
       setStreamType(cameraSettings.streamType || "smart");
       setCompatibilityMode(cameraSettings.compatibilityMode || false);
     } else {
-      setStreamName("");
+      setStreamName(
+        Object.entries(config?.cameras[camera]?.live?.streams || {})[0]?.[1] ||
+          "",
+      );
       setStreamType("smart");
       setCompatibilityMode(false);
     }
     setIsDialogOpen(false);
-  }, [groupStreamingSettings, camera]);
+  }, [groupStreamingSettings, camera, config]);
 
   if (!config) {
     return null;
@@ -141,9 +155,9 @@ export function CameraStreamingDialog({
                 <SelectContent>
                   {camera !== "birdseye" &&
                     Object.entries(config?.cameras[camera].live.streams).map(
-                      ([stream, name]) => (
-                        <SelectItem key={stream} value={name}>
-                          {stream}
+                      ([name, stream]) => (
+                        <SelectItem key={stream} value={stream}>
+                          {name}
                         </SelectItem>
                       ),
                     )}