From b7fcd41737a6ed29b572bf6e920eea2bcccb379b Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Sun, 23 Mar 2025 13:51:06 -0500
Subject: [PATCH] UI tweaks (#17319)

---
 .../settings/CameraStreamingDialog.tsx        | 37 ++++++++++++++-----
 web/src/views/live/DraggableGridLayout.tsx    | 17 +++++++--
 web/src/views/system/StorageMetrics.tsx       |  4 +-
 3 files changed, 44 insertions(+), 14 deletions(-)

diff --git a/web/src/components/settings/CameraStreamingDialog.tsx b/web/src/components/settings/CameraStreamingDialog.tsx
index 6e5fde8ba..393de0419 100644
--- a/web/src/components/settings/CameraStreamingDialog.tsx
+++ b/web/src/components/settings/CameraStreamingDialog.tsx
@@ -103,16 +103,24 @@ export function CameraStreamingDialog({
     if (!config) {
       return;
     }
+
+    // Get available streams from the config and first stream entry as fallback
+    const availableStreams = config?.cameras[camera]?.live?.streams || {};
+    const firstStreamEntry = Object.entries(availableStreams)[0]?.[1] || "";
+
     if (groupStreamingSettings && groupStreamingSettings[camera]) {
       const cameraSettings = groupStreamingSettings[camera];
-      setStreamName(cameraSettings.streamName || "");
+      const streamNameFromSettings = cameraSettings.streamName || "";
+
+      const streamExists =
+        streamNameFromSettings &&
+        Object.values(availableStreams).includes(streamNameFromSettings);
+
+      setStreamName(streamExists ? streamNameFromSettings : firstStreamEntry);
       setStreamType(cameraSettings.streamType || "smart");
       setCompatibilityMode(cameraSettings.compatibilityMode || false);
     } else {
-      setStreamName(
-        Object.entries(config?.cameras[camera]?.live?.streams || {})[0]?.[1] ||
-          "",
-      );
+      setStreamName(firstStreamEntry);
       setStreamType("smart");
       setCompatibilityMode(false);
     }
@@ -150,19 +158,28 @@ export function CameraStreamingDialog({
     if (!config) {
       return;
     }
+
+    // Get available streams from the config and first stream entry as fallback
+    const availableStreams = config?.cameras[camera]?.live?.streams || {};
+    const firstStreamEntry = Object.entries(availableStreams)[0]?.[1] || "";
+
     if (groupStreamingSettings && groupStreamingSettings[camera]) {
       const cameraSettings = groupStreamingSettings[camera];
-      setStreamName(cameraSettings.streamName || "");
+      const streamNameFromSettings = cameraSettings.streamName || "";
+
+      const streamExists =
+        streamNameFromSettings &&
+        Object.values(availableStreams).includes(streamNameFromSettings);
+
+      setStreamName(streamExists ? streamNameFromSettings : firstStreamEntry);
       setStreamType(cameraSettings.streamType || "smart");
       setCompatibilityMode(cameraSettings.compatibilityMode || false);
     } else {
-      setStreamName(
-        Object.entries(config?.cameras[camera]?.live?.streams || {})[0]?.[1] ||
-          "",
-      );
+      setStreamName(firstStreamEntry);
       setStreamType("smart");
       setCompatibilityMode(false);
     }
+
     setIsDialogOpen(false);
   }, [groupStreamingSettings, camera, config, setIsDialogOpen]);
 
diff --git a/web/src/views/live/DraggableGridLayout.tsx b/web/src/views/live/DraggableGridLayout.tsx
index 2fc21357d..b80f59b27 100644
--- a/web/src/views/live/DraggableGridLayout.tsx
+++ b/web/src/views/live/DraggableGridLayout.tsx
@@ -549,9 +549,20 @@ export default function DraggableGridLayout({
               } else {
                 grow = "aspect-video";
               }
-              const streamName =
-                currentGroupStreamingSettings?.[camera.name]?.streamName ||
-                Object.values(camera.live.streams)[0];
+              const availableStreams = camera.live.streams || {};
+              const firstStreamEntry = Object.values(availableStreams)[0] || "";
+
+              const streamNameFromSettings =
+                currentGroupStreamingSettings?.[camera.name]?.streamName || "";
+              const streamExists =
+                streamNameFromSettings &&
+                Object.values(availableStreams).includes(
+                  streamNameFromSettings,
+                );
+
+              const streamName = streamExists
+                ? streamNameFromSettings
+                : firstStreamEntry;
               const autoLive =
                 currentGroupStreamingSettings?.[camera.name]?.streamType !==
                 "no-streaming";
diff --git a/web/src/views/system/StorageMetrics.tsx b/web/src/views/system/StorageMetrics.tsx
index 0bd150bfb..4e7ff646d 100644
--- a/web/src/views/system/StorageMetrics.tsx
+++ b/web/src/views/system/StorageMetrics.tsx
@@ -117,7 +117,9 @@ export default function StorageMetrics({
               {formatUnixTimestampToDateTime(earliestDate, {
                 timezone: timezone,
                 strftime_fmt:
-                  config.ui.time_format == "24hour" ? "%d %b %Y" : "%B %d, %Y",
+                  config.ui.time_format === "24hour"
+                    ? "%d %b %Y, %H:%M"
+                    : "%B %d, %Y, %I:%M %p",
               })}
             </div>
           )}