Improve live streaming (#16447)

* config file changes

* config migrator

* stream selection on single camera live view

* camera streaming settings dialog

* manage persistent group streaming settings

* apply streaming settings in camera groups

* add ability to clear all streaming settings from settings

* docs

* update reference config

* fixes

* clarify docs

* use first stream as default in dialog

* ensure still image is visible after switching stream type to none

* docs

* clarify docs

* add ability to continue playing stream in background

* fix props

* put stream selection inside dropdown on desktop

* add capabilities to live mode hook

* live context menu component

* resize observer: only return new dimensions if they've actually changed

* pass volume prop to players

* fix slider bug, https://github.com/shadcn-ui/ui/issues/1448

* update react-grid-layout

* prevent animated transitions on draggable grid layout

* add context menu to dashboards

* use provider

* streaming dialog from context menu

* docs

* add jsmpeg warning to context menu

* audio and two way talk indicators in single camera view

* add link to debug view

* don't use hook

* create manual events from live camera view

* maintain grow classes on grid items

* fix initial volume state on default dashboard

* fix pointer events causing context menu to end up underneath image on iOS

* mobile drawer tweaks

* stream stats

* show settings menu for non-restreamed cameras

* consistent settings icon

* tweaks

* optional stats to fix birdseye player

* add toaster to live camera view

* fix crash on initial save in streaming dialog

* don't require restreaming for context menu streaming settings

* add debug view to context menu

* stats fixes

* update docs

* always show stream info when restreamed

* update camera streaming dialog

* make note of no h265 support for webrtc

* docs clarity

* ensure docs show streams as a dict

* docs clarity

* fix css file

* tweaks

web/src/views/settings/UiSettingsView.tsx

@@ -46,6 +46,25 @@ export default function UiSettingsView() {
     });
   }, [config]);
 
+  const clearStreamingSettings = useCallback(async () => {
+    if (!config) {
+      return [];
+    }
+
+    await delData(`streaming-settings`)
+      .then(() => {
+        toast.success(`Cleared streaming settings for all camera groups.`, {
+          position: "top-center",
+        });
+      })
+      .catch((error) => {
+        toast.error(
+          `Failed to clear camera groups streaming settings: ${error.response.data.message}`,
+          { position: "top-center" },
+        );
+      });
+  }, [config]);
+
   useEffect(() => {
     document.title = "General Settings - Frigate";
   }, []);
@@ -84,11 +103,15 @@ export default function UiSettingsView() {
                   Automatic Live View
                 </Label>
               </div>
-              <div className="my-2 text-sm text-muted-foreground">
+              <div className="my-2 max-w-5xl 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.
+                  the your dashboards to only update once per minute.{" "}
+                  <em>
+                    This is a global setting but can be overridden on each
+                    camera <strong>in camera groups only</strong>.
+                  </em>
                 </p>
               </div>
             </div>
@@ -103,7 +126,7 @@ export default function UiSettingsView() {
                   Play Alert Videos
                 </Label>
               </div>
-              <div className="my-2 text-sm text-muted-foreground">
+              <div className="my-2 max-w-5xl text-sm text-muted-foreground">
                 <p>
                   By default, recent alerts on the Live dashboard play as small
                   looping videos. Disable this option to only show a static
@@ -114,10 +137,10 @@ export default function UiSettingsView() {
           </div>
 
           <div className="my-3 flex w-full flex-col space-y-6">
-            <div className="mt-2 space-y-6">
+            <div className="mt-2 space-y-3">
               <div className="space-y-0.5">
                 <div className="text-md">Stored Layouts</div>
-                <div className="my-2 text-sm text-muted-foreground">
+                <div className="my-2 max-w-5xl text-sm text-muted-foreground">
                   <p>
                     The layout of cameras in a camera group can be
                     dragged/resized. The positions are stored in your browser's
@@ -133,6 +156,24 @@ export default function UiSettingsView() {
               </Button>
             </div>
 
+            <div className="mt-2 space-y-3">
+              <div className="space-y-0.5">
+                <div className="text-md">Camera Group Streaming Settings</div>
+                <div className="my-2 max-w-5xl text-sm text-muted-foreground">
+                  <p>
+                    Streaming settings for each camera group are stored in your
+                    browser's local storage.
+                  </p>
+                </div>
+              </div>
+              <Button
+                aria-label="Clear all group streaming settings"
+                onClick={clearStreamingSettings}
+              >
+                Clear All Streaming Settings
+              </Button>
+            </div>
+
             <Separator className="my-2 flex bg-secondary" />
 
             <Heading as="h4" className="my-2">