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/context/providers.tsx

@@ -5,6 +5,7 @@ import { ApiProvider } from "@/api";
 import { IconContext } from "react-icons";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { StatusBarMessagesProvider } from "@/context/statusbar-provider";
+import { StreamingSettingsProvider } from "./streaming-settings-provider";
 
 type TProvidersProps = {
   children: ReactNode;
@@ -17,7 +18,11 @@ function providers({ children }: TProvidersProps) {
         <ThemeProvider defaultTheme="system" storageKey="frigate-ui-theme">
           <TooltipProvider>
             <IconContext.Provider value={{ size: "20" }}>
-              <StatusBarMessagesProvider>{children}</StatusBarMessagesProvider>
+              <StatusBarMessagesProvider>
+                <StreamingSettingsProvider>
+                  {children}
+                </StreamingSettingsProvider>
+              </StatusBarMessagesProvider>
             </IconContext.Provider>
           </TooltipProvider>
         </ThemeProvider>

web/src/context/streaming-settings-provider.tsx

@@ -0,0 +1,68 @@
+import {
+  createContext,
+  useState,
+  useEffect,
+  ReactNode,
+  useContext,
+} from "react";
+import { AllGroupsStreamingSettings } from "@/types/frigateConfig";
+import { usePersistence } from "@/hooks/use-persistence";
+
+type StreamingSettingsContextType = {
+  allGroupsStreamingSettings: AllGroupsStreamingSettings;
+  setAllGroupsStreamingSettings: (settings: AllGroupsStreamingSettings) => void;
+  isPersistedStreamingSettingsLoaded: boolean;
+};
+
+const StreamingSettingsContext =
+  createContext<StreamingSettingsContextType | null>(null);
+
+export function StreamingSettingsProvider({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  const [allGroupsStreamingSettings, setAllGroupsStreamingSettings] =
+    useState<AllGroupsStreamingSettings>({});
+
+  const [
+    persistedGroupStreamingSettings,
+    setPersistedGroupStreamingSettings,
+    isPersistedStreamingSettingsLoaded,
+  ] = usePersistence<AllGroupsStreamingSettings>("streaming-settings");
+
+  useEffect(() => {
+    if (isPersistedStreamingSettingsLoaded) {
+      setAllGroupsStreamingSettings(persistedGroupStreamingSettings ?? {});
+    }
+  }, [isPersistedStreamingSettingsLoaded, persistedGroupStreamingSettings]);
+
+  useEffect(() => {
+    if (Object.keys(allGroupsStreamingSettings).length) {
+      setPersistedGroupStreamingSettings(allGroupsStreamingSettings);
+    }
+  }, [allGroupsStreamingSettings, setPersistedGroupStreamingSettings]);
+
+  return (
+    <StreamingSettingsContext.Provider
+      value={{
+        allGroupsStreamingSettings,
+        setAllGroupsStreamingSettings,
+        isPersistedStreamingSettingsLoaded,
+      }}
+    >
+      {children}
+    </StreamingSettingsContext.Provider>
+  );
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+export function useStreamingSettings() {
+  const context = useContext(StreamingSettingsContext);
+  if (!context) {
+    throw new Error(
+      "useStreamingSettings must be used within a StreamingSettingsProvider",
+    );
+  }
+  return context;
+}