Merge 3ce223e062 into 37ea6b46b5

Removes [esbuild](https://github.com/evanw/esbuild). It's no longer used after updating ancestor dependencies [esbuild](https://github.com/evanw/esbuild), [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/tree/HEAD/packages/plugin-react-swc), [@vitest/coverage-v8](https://github.com/vitest-dev/vitest/tree/HEAD/packages/coverage-v8), [vite](https://github.com/vitejs/vite/tree/HEAD/packages/vite) and [vitest](https://github.com/vitest-dev/vitest/tree/HEAD/packages/vitest). These dependencies need to be updated together.


Removes `esbuild`

Updates `@vitejs/plugin-react-swc` from 3.8.0 to 4.3.1
- [Release notes](https://github.com/vitejs/vite-plugin-react/releases)
- [Changelog](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc/CHANGELOG.md)
- [Commits](https://github.com/vitejs/vite-plugin-react/commits/v4.3.1/packages/plugin-react-swc)

Updates `@vitest/coverage-v8` from 3.0.7 to 4.1.8
- [Release notes](https://github.com/vitest-dev/vitest/releases)
- [Changelog](https://github.com/vitest-dev/vitest/blob/main/docs/releases.md)
- [Commits](https://github.com/vitest-dev/vitest/commits/v4.1.8/packages/coverage-v8)

Updates `vite` from 6.4.2 to 8.0.16
- [Release notes](https://github.com/vitejs/vite/releases)
- [Changelog](https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md)
- [Commits](https://github.com/vitejs/vite/commits/v8.0.16/packages/vite)

Updates `vitest` from 3.0.7 to 4.1.8
- [Release notes](https://github.com/vitest-dev/vitest/releases)
- [Changelog](https://github.com/vitest-dev/vitest/blob/main/docs/releases.md)
- [Commits](https://github.com/vitest-dev/vitest/commits/v4.1.8/packages/vitest)

---
updated-dependencies:
- dependency-name: esbuild
  dependency-version:
  dependency-type: indirect
- dependency-name: "@vitejs/plugin-react-swc"
  dependency-version: 4.3.1
  dependency-type: direct:development
- dependency-name: "@vitest/coverage-v8"
  dependency-version: 4.1.8
  dependency-type: direct:development
- dependency-name: vite
  dependency-version: 8.0.16
  dependency-type: direct:development
- dependency-name: vitest
  dependency-version: 4.1.8
  dependency-type: direct:development
...

Signed-off-by: dependabot[bot] <support@github.com>

docs/docs/configuration/live.md

@@ -432,3 +432,5 @@ When your browser runs into problems playing back your camera streams, it will l
              roles:
                - detect
    ```
+
+   The same applies to your `record` stream: if its aspect ratio differs from your `detect` stream, your recordings will appear in a different shape than the live view. For consistent framing across live view and recordings, use the same aspect ratio for all of a camera's streams (the resolution can still differ).

docs/docs/guides/reverse_proxy.md

@@ -10,13 +10,14 @@ A reverse proxy is typically needed if you want to set up Frigate on a custom UR
 Before setting up a reverse proxy, check if any of the built-in functionality in Frigate suits your needs:
 |Topic|Docs|
 |-|-|
-|TLS|Please see the  `tls` [configuration option](../configuration/tls.md)|
+|TLS|Please see the `tls` [configuration option](../configuration/tls.md)|
 |Authentication|Please see the [authentication](../configuration/authentication.md) documentation|
 |IPv6|[Enabling IPv6](../configuration/advanced/system.md#enabling-ipv6)
 
-**Note about TLS**  
-When using a reverse proxy, the TLS session is usually terminated at the proxy, sending the internal request over plain HTTP. If this is the desired behavior, TLS must first be disabled in Frigate, or you will encounter an HTTP 400 error: "The plain HTTP request was sent to HTTPS port."  
+**Note about TLS**
+When using a reverse proxy, the TLS session is usually terminated at the proxy, sending the internal request over plain HTTP. If this is the desired behavior, TLS must first be disabled in Frigate, or you will encounter an HTTP 400 error: "The plain HTTP request was sent to HTTPS port."
 To disable TLS, set the following in your Frigate configuration:
+
 ```yml
 tls:
   enabled: false
@@ -24,18 +25,26 @@ tls:
 
 :::warning
 A reverse proxy can be used to secure access to an internal web server, but the user will be entirely reliant on the steps they have taken. You must ensure you are following security best practices.
-This page does not attempt to outline the specific steps needed to secure your internal website.  
+This page does not attempt to outline the specific steps needed to secure your internal website.
 Please use your own knowledge to assess and vet the reverse proxy software before you install anything on your system.
 :::
 
+## WebSocket support
+
+Frigate relies on WebSockets for real-time communication between the browser and the backend. Features such as camera controls (enabling/disabling a camera, audio, detect, recordings, and other toggles), live stream playback, and other live-updating parts of the UI will not function correctly if WebSocket connections are not proxied.
+
+Your reverse proxy must be configured to forward the `Upgrade` and `Connection` headers so that WebSocket connections can be established. Each proxy example below already includes the directives needed to do this, but if you are adapting your own configuration, ensure these headers are passed through.
+
+Note that some proxies disable WebSocket support by default — for example, Nginx Proxy Manager has a "Websockets Support" toggle that must be enabled.
+
 ## Proxies
 
 There are many solutions available to implement reverse proxies and the community is invited to help out documenting others through a contribution to this page.
 
-* [Apache2](#apache2-reverse-proxy)
-* [Nginx](#nginx-reverse-proxy)
-* [Traefik](#traefik-reverse-proxy)
-* [Caddy](#caddy-reverse-proxy)
+- [Apache2](#apache2-reverse-proxy)
+- [Nginx](#nginx-reverse-proxy)
+- [Traefik](#traefik-reverse-proxy)
+- [Caddy](#caddy-reverse-proxy)
 
 ## Apache2 Reverse Proxy
 
@@ -159,7 +168,7 @@ The settings below enabled connection upgrade, sets up logging (optional) and pr
 
 ## Traefik Reverse Proxy
 
-This example shows how to add a `label` to the Frigate Docker compose file, enabling Traefik to automatically discover your Frigate instance.  
+This example shows how to add a `label` to the Frigate Docker compose file, enabling Traefik to automatically discover your Frigate instance.
 Before using the example below, you must first set up Traefik with the [Docker provider](https://doc.traefik.io/traefik/providers/docker/)
 
 ```yml
@@ -203,7 +212,7 @@ This example shows Frigate running under a subdomain with logging and a tls cert
 }
 
 frigate.YOUR_DOMAIN.TLD {
-        reverse_proxy http://localhost:8971 
+        reverse_proxy http://localhost:8971
         import tls
         import logging frigate.YOUR_DOMAIN.TLD
 }

web/package.json

@@ -114,8 +114,8 @@
     "@types/strftime": "^0.9.8",
     "@typescript-eslint/eslint-plugin": "^7.5.0",
     "@typescript-eslint/parser": "^7.5.0",
-    "@vitejs/plugin-react-swc": "^3.8.0",
-    "@vitest/coverage-v8": "^3.0.7",
+    "@vitejs/plugin-react-swc": "^4.3.1",
+    "@vitest/coverage-v8": "^4.1.8",
     "autoprefixer": "^10.4.20",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
@@ -136,8 +136,8 @@
     "prettier-plugin-tailwindcss": "^0.6.5",
     "tailwindcss": "^3.4.9",
     "typescript": "^5.9.3",
-    "vite": "^6.4.2",
-    "vitest": "^3.0.7"
+    "vite": "^8.0.16",
+    "vitest": "^4.1.8"
   },
   "overrides": {
     "@radix-ui/react-compose-refs": "1.1.2",

web/src/pages/Settings.tsx

@@ -34,6 +34,8 @@ import { isMobile } from "react-device-detect";
 import { FaVideo } from "react-icons/fa";
 import { CameraConfig, FrigateConfig } from "@/types/frigateConfig";
 import type { ConfigSectionData, JsonObject } from "@/types/configForm";
+import isEqual from "lodash/isEqual";
+import { maskCredentials } from "@/utils/credentialMask";
 import useSWR from "swr";
 import FilterSwitch from "@/components/filter/FilterSwitch";
 import { ZoneMaskFilterButton } from "@/components/filter/ZoneMaskFilter";
@@ -660,6 +662,11 @@ export default function Settings() {
 
   const isAdmin = useIsAdmin();
 
+  // for unmasked go2rtc stream sources
+  const { data: rawPaths } = useSWR<{
+    go2rtc: { streams: Record<string, string | string[]> };
+  }>(isAdmin ? "config/raw_paths" : null);
+
   const visibleSettingsViews = !isAdmin
     ? ALLOWED_VIEWS_FOR_VIEWER
     : allSettingsViews;
@@ -788,6 +795,40 @@ export default function Settings() {
       },
     );
 
+    // go2rtc streams aren't schema-backed, so build their preview items directly
+    if ("go2rtc_streams" in pendingDataBySection) {
+      const live =
+        (pendingDataBySection["go2rtc_streams"] as Record<string, string[]>) ??
+        {};
+      const saved: Record<string, string[]> = {};
+      for (const [name, urls] of Object.entries(
+        rawPaths?.go2rtc?.streams ?? {},
+      )) {
+        saved[name] = Array.isArray(urls) ? urls : [urls];
+      }
+
+      // Added or changed streams
+      for (const [name, urls] of Object.entries(live)) {
+        if (name in saved && isEqual(urls, saved[name])) continue;
+        const masked = urls.map((url) => maskCredentials(url));
+        items.push({
+          scope: "global",
+          fieldPath: `go2rtc.streams.${name}`,
+          value: masked.length === 1 ? masked[0] : masked,
+        });
+      }
+
+      // Deleted streams (present in saved config, absent from pending)
+      for (const name of Object.keys(saved)) {
+        if (name in live) continue;
+        items.push({
+          scope: "global",
+          fieldPath: `go2rtc.streams.${name}`,
+          value: "",
+        });
+      }
+    }
+
     return items.sort((left, right) => {
       const scopeCompare = left.scope.localeCompare(right.scope);
       if (scopeCompare !== 0) return scopeCompare;
@@ -797,7 +838,13 @@ export default function Settings() {
       if (cameraCompare !== 0) return cameraCompare;
       return left.fieldPath.localeCompare(right.fieldPath);
     });
-  }, [config, fullSchema, pendingDataBySection, profileFriendlyNames]);
+  }, [
+    config,
+    fullSchema,
+    pendingDataBySection,
+    profileFriendlyNames,
+    rawPaths,
+  ]);
 
   // Map a pendingDataKey to SettingsType menu key for clearing section status
   const pendingKeyToMenuKey = useCallback(
@@ -869,10 +916,7 @@ export default function Settings() {
     // after `mutate("config")` resolves
     const keysToClear: string[] = [];
 
-    // `detectors` and `model` are owned by DetectorsAndModelSettingsView,
-    // which saves them atomically (single combined PUT with a pre-clear when
-    // detector keys change or the Plus/Custom tab flips). Doing the same here
-    // keeps Save All consistent with the page's own Save button
+    // `detectors` and `model` are owned by DetectorsAndModelSettingsView
     const hasPendingDetectors = "detectors" in pendingDataBySection;
     const hasPendingModel = "model" in pendingDataBySection;
     if (hasPendingDetectors || hasPendingModel) {
@@ -975,8 +1019,58 @@ export default function Settings() {
       }
     }
 
+    // go2rtc streams are owned by Go2RtcStreamsSettingsView
+    if ("go2rtc_streams" in pendingDataBySection) {
+      try {
+        const liveStreams =
+          (pendingDataBySection["go2rtc_streams"] as Record<
+            string,
+            string[]
+          >) ?? {};
+        const streamsPayload: Record<string, string[] | string> = {
+          ...liveStreams,
+        };
+        const deletedStreamNames = Object.keys(
+          config.go2rtc?.streams ?? {},
+        ).filter((name) => !(name in liveStreams));
+        for (const deleted of deletedStreamNames) {
+          streamsPayload[deleted] = "";
+        }
+
+        await axios.put("config/set", {
+          requires_restart: 0,
+          config_data: { go2rtc: { streams: streamsPayload } },
+        });
+
+        // Update the running go2rtc instance to match
+        const go2rtcUpdates: Promise<unknown>[] = [];
+        for (const [streamName, urls] of Object.entries(liveStreams)) {
+          if (urls[0]) {
+            go2rtcUpdates.push(
+              axios.put(
+                `go2rtc/streams/${streamName}?src=${encodeURIComponent(urls[0])}`,
+              ),
+            );
+          }
+        }
+        for (const deleted of deletedStreamNames) {
+          go2rtcUpdates.push(axios.delete(`go2rtc/streams/${deleted}`));
+        }
+        await Promise.allSettled(go2rtcUpdates);
+
+        keysToClear.push("go2rtc_streams");
+        savedKeys.push("go2rtc_streams");
+        successCount++;
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.error("Save All – error saving go2rtc streams", error);
+        failCount++;
+      }
+    }
+
     const pendingKeys = Object.keys(pendingDataBySection).filter(
-      (key) => key !== "detectors" && key !== "model",
+      (key) =>
+        key !== "detectors" && key !== "model" && key !== "go2rtc_streams",
     );
 
     for (const key of pendingKeys) {

web/src/views/settings/Go2RtcStreamsSettingsView.tsx

@@ -58,8 +58,13 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
+import SaveAllPreviewPopover, {
+  type SaveAllPreviewItem,
+} from "@/components/overlay/detail/SaveAllPreviewPopover";
 import { useDocDomain } from "@/hooks/use-doc-domain";
 import { FrigateConfig } from "@/types/frigateConfig";
+import type { SettingsPageProps } from "@/views/settings/SingleSectionPage";
+import type { ConfigSectionData } from "@/types/configForm";
 import { cn } from "@/lib/utils";
 import {
   isMaskedPath,
@@ -85,18 +90,8 @@ type RawPathsResponse = {
   go2rtc: { streams: Record<string, string | string[]> };
 };
 
-type Go2RtcStreamsSettingsViewProps = {
-  setUnsavedChanges: React.Dispatch<React.SetStateAction<boolean>>;
-  onSectionStatusChange?: (
-    sectionKey: string,
-    level: "global" | "camera",
-    status: {
-      hasChanges: boolean;
-      isOverridden: boolean;
-      hasValidationErrors: boolean;
-    },
-  ) => void;
-};
+const SECTION_KEY = "go2rtc_streams";
+const EMPTY_PENDING: Record<string, ConfigSectionData> = {};
 
 const STREAM_NAME_PATTERN = /^[a-zA-Z0-9_-]+$/;
 
@@ -114,7 +109,11 @@ function normalizeStreams(
 export default function Go2RtcStreamsSettingsView({
   setUnsavedChanges,
   onSectionStatusChange,
-}: Go2RtcStreamsSettingsViewProps) {
+  pendingDataBySection,
+  onPendingDataChange,
+  isSavingAll,
+  onSectionSavingChange,
+}: SettingsPageProps) {
   const { t } = useTranslation(["views/settings", "common"]);
   const { getLocaleDocUrl } = useDocDomain();
   const { data: config, mutate: updateConfig } =
@@ -122,13 +121,6 @@ export default function Go2RtcStreamsSettingsView({
   const { data: rawPaths, mutate: updateRawPaths } =
     useSWR<RawPathsResponse>("config/raw_paths");
 
-  const [editedStreams, setEditedStreams] = useState<Record<string, string[]>>(
-    {},
-  );
-  const [serverStreams, setServerStreams] = useState<Record<string, string[]>>(
-    {},
-  );
-  const [initialized, setInitialized] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [credentialVisibility, setCredentialVisibility] = useState<
     Record<string, boolean>
@@ -138,34 +130,51 @@ export default function Go2RtcStreamsSettingsView({
   const [addStreamDialogOpen, setAddStreamDialogOpen] = useState(false);
   const [newlyAdded, setNewlyAdded] = useState<Set<string>>(new Set());
 
-  // Initialize from config — wait for both config and rawPaths to avoid
-  // a mismatch when rawPaths arrives after config with different data
-  useEffect(() => {
-    if (!config || !rawPaths) return;
+  const childPending = pendingDataBySection ?? EMPTY_PENDING;
 
-    // Always use rawPaths for go2rtc streams — the /config endpoint masks
-    // credentials, so using config.go2rtc.streams would save masked values
-    const normalized = normalizeStreams(rawPaths.go2rtc?.streams);
+  // Saved/server state. Always read from rawPaths
+  const serverStreams = useMemo<Record<string, string[]>>(
+    () => normalizeStreams(rawPaths?.go2rtc?.streams),
+    [rawPaths],
+  );
 
-    setServerStreams(normalized);
-    if (!initialized) {
-      setEditedStreams(normalized);
-      setInitialized(true);
-    }
-  }, [config, rawPaths, initialized]);
+  // Pending edits live in the parent's store so they survive navigation; fall back to saved state
+  const liveStreams = useMemo<Record<string, string[]>>(
+    () =>
+      (childPending[SECTION_KEY] as Record<string, string[]> | undefined) ??
+      serverStreams,
+    [childPending, serverStreams],
+  );
+
+  // Persist edits to the parent store, clearing the entry when an edit returns
+  // the section to its saved state so Save All and the sidebar dot reset cleanly.
+  const commitStreams = useCallback(
+    (next: Record<string, string[]>) => {
+      if (isEqual(next, serverStreams)) {
+        onPendingDataChange?.(SECTION_KEY, undefined, null);
+      } else {
+        onPendingDataChange?.(
+          SECTION_KEY,
+          undefined,
+          next as ConfigSectionData,
+        );
+      }
+    },
+    [serverStreams, onPendingDataChange],
+  );
 
   // Track unsaved changes
   const hasChanges = useMemo(
-    () => initialized && !isEqual(editedStreams, serverStreams),
-    [editedStreams, serverStreams, initialized],
+    () => !isEqual(liveStreams, serverStreams),
+    [liveStreams, serverStreams],
   );
 
   useEffect(() => {
-    setUnsavedChanges(hasChanges);
+    setUnsavedChanges?.(hasChanges);
   }, [hasChanges, setUnsavedChanges]);
 
   const hasValidationErrors = useMemo(() => {
-    const names = Object.keys(editedStreams);
+    const names = Object.keys(liveStreams);
     const seenNames = new Set<string>();
 
     for (const name of names) {
@@ -173,13 +182,43 @@ export default function Go2RtcStreamsSettingsView({
       if (seenNames.has(name)) return true;
       seenNames.add(name);
 
-      const urls = editedStreams[name];
+      const urls = liveStreams[name];
       if (!urls || urls.length === 0 || urls.every((u) => !u.trim()))
         return true;
     }
 
     return false;
-  }, [editedStreams]);
+  }, [liveStreams]);
+
+  // Pending changes for this section's Save All preview popover. Diff the
+  // pending streams against the saved state and mask credentials for display.
+  const sectionPreviewItems = useMemo<SaveAllPreviewItem[]>(() => {
+    if (!hasChanges) return [];
+    const items: SaveAllPreviewItem[] = [];
+
+    // Added or changed streams
+    for (const [name, urls] of Object.entries(liveStreams)) {
+      if (name in serverStreams && isEqual(urls, serverStreams[name])) continue;
+      const masked = urls.map((url) => maskCredentials(url));
+      items.push({
+        scope: "global",
+        fieldPath: `go2rtc.streams.${name}`,
+        value: masked.length === 1 ? masked[0] : masked,
+      });
+    }
+
+    // Deleted streams (present in saved config, absent from pending)
+    for (const name of Object.keys(serverStreams)) {
+      if (name in liveStreams) continue;
+      items.push({
+        scope: "global",
+        fieldPath: `go2rtc.streams.${name}`,
+        value: "",
+      });
+    }
+
+    return items;
+  }, [hasChanges, liveStreams, serverStreams]);
 
   // Report status to parent for sidebar red dot
   useEffect(() => {
@@ -193,13 +232,14 @@ export default function Go2RtcStreamsSettingsView({
   // Save handler
   const saveToConfig = useCallback(async () => {
     setIsLoading(true);
+    onSectionSavingChange?.(true);
 
     try {
       const streamsPayload: Record<string, string[] | string> = {
-        ...editedStreams,
+        ...liveStreams,
       };
       const deletedStreamNames = Object.keys(serverStreams).filter(
-        (name) => !(name in editedStreams),
+        (name) => !(name in liveStreams),
       );
       for (const deleted of deletedStreamNames) {
         streamsPayload[deleted] = "";
@@ -212,7 +252,7 @@ export default function Go2RtcStreamsSettingsView({
 
       // Update running go2rtc instance
       const go2rtcUpdates: Promise<unknown>[] = [];
-      for (const [streamName, urls] of Object.entries(editedStreams)) {
+      for (const [streamName, urls] of Object.entries(liveStreams)) {
         if (urls[0]) {
           go2rtcUpdates.push(
             axios.put(
@@ -233,9 +273,9 @@ export default function Go2RtcStreamsSettingsView({
         }),
       );
 
-      setServerStreams(editedStreams);
-      updateConfig();
-      updateRawPaths();
+      await updateConfig();
+      await updateRawPaths();
+      onPendingDataChange?.(SECTION_KEY, undefined, null);
     } catch {
       toast.error(
         t("toast.error", {
@@ -245,74 +285,86 @@ export default function Go2RtcStreamsSettingsView({
       );
     } finally {
       setIsLoading(false);
+      onSectionSavingChange?.(false);
     }
-  }, [editedStreams, serverStreams, t, updateConfig, updateRawPaths]);
+  }, [
+    liveStreams,
+    serverStreams,
+    t,
+    updateConfig,
+    updateRawPaths,
+    onPendingDataChange,
+    onSectionSavingChange,
+  ]);
 
   // Reset handler
   const onReset = useCallback(() => {
-    setEditedStreams(serverStreams);
+    onPendingDataChange?.(SECTION_KEY, undefined, null);
     setCredentialVisibility({});
-  }, [serverStreams]);
+  }, [onPendingDataChange]);
 
   // Stream CRUD operations
-  const addStream = useCallback((name: string) => {
-    setEditedStreams((prev) => ({ ...prev, [name]: [""] }));
-    setNewlyAdded((prev) => new Set(prev).add(name));
-    setAddStreamDialogOpen(false);
-  }, []);
+  const addStream = useCallback(
+    (name: string) => {
+      commitStreams({ ...liveStreams, [name]: [""] });
+      setNewlyAdded((prev) => new Set(prev).add(name));
+      setAddStreamDialogOpen(false);
+    },
+    [liveStreams, commitStreams],
+  );
 
-  const deleteStream = useCallback((streamName: string) => {
-    setEditedStreams((prev) => {
-      const { [streamName]: _, ...rest } = prev;
-      return rest;
-    });
-    setDeleteDialog(null);
-  }, []);
+  const deleteStream = useCallback(
+    (streamName: string) => {
+      const { [streamName]: _removed, ...rest } = liveStreams;
+      commitStreams(rest);
+      setDeleteDialog(null);
+    },
+    [liveStreams, commitStreams],
+  );
 
-  const renameStream = useCallback((oldName: string, newName: string) => {
-    if (oldName === newName || !newName.trim()) return;
+  const renameStream = useCallback(
+    (oldName: string, newName: string) => {
+      if (oldName === newName || !newName.trim()) return;
+      if (!(oldName in liveStreams)) return;
 
-    setEditedStreams((prev) => {
-      const urls = prev[oldName];
-      if (!urls) return prev;
-
-      const entries = Object.entries(prev);
       const result: Record<string, string[]> = {};
-      for (const [key, value] of entries) {
-        if (key === oldName) {
-          result[newName] = value;
-        } else {
-          result[key] = value;
-        }
+      for (const [key, value] of Object.entries(liveStreams)) {
+        result[key === oldName ? newName : key] = value;
       }
-      return result;
-    });
-  }, []);
+      commitStreams(result);
+    },
+    [liveStreams, commitStreams],
+  );
 
   const updateUrl = useCallback(
     (streamName: string, urlIndex: number, newUrl: string) => {
-      setEditedStreams((prev) => {
-        const urls = [...(prev[streamName] || [])];
-        urls[urlIndex] = newUrl;
-        return { ...prev, [streamName]: urls };
-      });
+      const urls = [...(liveStreams[streamName] || [])];
+      urls[urlIndex] = newUrl;
+      commitStreams({ ...liveStreams, [streamName]: urls });
     },
-    [],
+    [liveStreams, commitStreams],
   );
 
-  const addUrl = useCallback((streamName: string) => {
-    setEditedStreams((prev) => {
-      const urls = [...(prev[streamName] || []), ""];
-      return { ...prev, [streamName]: urls };
-    });
-  }, []);
+  const addUrl = useCallback(
+    (streamName: string) => {
+      const urls = [...(liveStreams[streamName] || []), ""];
+      commitStreams({ ...liveStreams, [streamName]: urls });
+    },
+    [liveStreams, commitStreams],
+  );
 
-  const removeUrl = useCallback((streamName: string, urlIndex: number) => {
-    setEditedStreams((prev) => {
-      const urls = (prev[streamName] || []).filter((_, i) => i !== urlIndex);
-      return { ...prev, [streamName]: urls.length > 0 ? urls : [""] };
-    });
-  }, []);
+  const removeUrl = useCallback(
+    (streamName: string, urlIndex: number) => {
+      const urls = (liveStreams[streamName] || []).filter(
+        (_, i) => i !== urlIndex,
+      );
+      commitStreams({
+        ...liveStreams,
+        [streamName]: urls.length > 0 ? urls : [""],
+      });
+    },
+    [liveStreams, commitStreams],
+  );
 
   const toggleCredentialVisibility = useCallback((key: string) => {
     setCredentialVisibility((prev) => ({ ...prev, [key]: !prev[key] }));
@@ -320,7 +372,7 @@ export default function Go2RtcStreamsSettingsView({
 
   if (!config) return null;
 
-  const streamEntries = Object.entries(editedStreams);
+  const streamEntries = Object.entries(liveStreams);
 
   return (
     <div className="flex size-full flex-col lg:pr-2">
@@ -391,6 +443,12 @@ export default function Go2RtcStreamsSettingsView({
               <span className="text-sm text-unsaved">
                 {t("unsavedChanges")}
               </span>
+              <SaveAllPreviewPopover
+                items={sectionPreviewItems}
+                className="h-7 w-7"
+                align="start"
+                side="top"
+              />
             </div>
           )}
           <div className="flex w-full flex-col gap-2 sm:flex-row sm:items-center md:w-auto">
@@ -398,7 +456,7 @@ export default function Go2RtcStreamsSettingsView({
               <Button
                 onClick={onReset}
                 variant="outline"
-                disabled={isLoading}
+                disabled={isLoading || isSavingAll}
                 className="flex min-w-36 flex-1 gap-2"
               >
                 {t("button.undo", { ns: "common" })}
@@ -407,7 +465,9 @@ export default function Go2RtcStreamsSettingsView({
             <Button
               onClick={saveToConfig}
               variant="select"
-              disabled={!hasChanges || isLoading || hasValidationErrors}
+              disabled={
+                !hasChanges || isLoading || isSavingAll || hasValidationErrors
+              }
               className="flex min-w-36 flex-1 gap-2"
             >
               {isLoading ? (
@@ -459,7 +519,7 @@ export default function Go2RtcStreamsSettingsView({
       <RenameStreamDialog
         open={renameDialog !== null}
         streamName={renameDialog ?? ""}
-        allStreamNames={Object.keys(editedStreams)}
+        allStreamNames={Object.keys(liveStreams)}
         onRename={(oldName, newName) => {
           renameStream(oldName, newName);
           setRenameDialog(null);
@@ -469,7 +529,7 @@ export default function Go2RtcStreamsSettingsView({
 
       <AddStreamDialog
         open={addStreamDialogOpen}
-        allStreamNames={Object.keys(editedStreams)}
+        allStreamNames={Object.keys(liveStreams)}
         onAdd={addStream}
         onClose={() => setAddStreamDialogOpen(false)}
       />