Miscellaneous Fixes (#21072)

* Implement renaming in model editing dialog

* add transcription faq

* remove incorrect constraint for viewer as username

should be able to change anyone's role other than admin

* Don't save redundant state changes

* prevent crash when a camera doesn't support onvif imaging service required for focus support

* Fine tune behavior

* Stop redundant go2rtc stream metadata requests and defer audio information to allow bandwidth for image requests

* Improve cleanup logic for capture process

---------

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>

web/src/views/live/DraggableGridLayout.tsx

@@ -24,6 +24,7 @@ import "react-resizable/css/styles.css";
 import {
   AudioState,
   LivePlayerMode,
+  LiveStreamMetadata,
   StatsState,
   VolumeState,
 } from "@/types/live";
@@ -47,7 +48,6 @@ import {
   TooltipContent,
 } from "@/components/ui/tooltip";
 import { Toaster } from "@/components/ui/sonner";
-import useCameraLiveMode from "@/hooks/use-camera-live-mode";
 import LiveContextMenu from "@/components/menu/LiveContextMenu";
 import { useStreamingSettings } from "@/context/streaming-settings-provider";
 import { useTranslation } from "react-i18next";
@@ -65,6 +65,16 @@ type DraggableGridLayoutProps = {
   setIsEditMode: React.Dispatch<React.SetStateAction<boolean>>;
   fullscreen: boolean;
   toggleFullscreen: () => void;
+  preferredLiveModes: { [key: string]: LivePlayerMode };
+  setPreferredLiveModes: React.Dispatch<
+    React.SetStateAction<{ [key: string]: LivePlayerMode }>
+  >;
+  resetPreferredLiveMode: (cameraName: string) => void;
+  isRestreamedStates: { [key: string]: boolean };
+  supportsAudioOutputStates: {
+    [key: string]: { supportsAudio: boolean; cameraName: string };
+  };
+  streamMetadata: { [key: string]: LiveStreamMetadata };
 };
 export default function DraggableGridLayout({
   cameras,
@@ -79,6 +89,12 @@ export default function DraggableGridLayout({
   setIsEditMode,
   fullscreen,
   toggleFullscreen,
+  preferredLiveModes,
+  setPreferredLiveModes,
+  resetPreferredLiveMode,
+  isRestreamedStates,
+  supportsAudioOutputStates,
+  streamMetadata,
 }: DraggableGridLayoutProps) {
   const { t } = useTranslation(["views/live"]);
   const { data: config } = useSWR<FrigateConfig>("config");
@@ -98,33 +114,6 @@ export default function DraggableGridLayout({
     }
   }, [allGroupsStreamingSettings, cameraGroup]);
 
-  const activeStreams = useMemo(() => {
-    const streams: { [cameraName: string]: string } = {};
-    cameras.forEach((camera) => {
-      const availableStreams = camera.live.streams || {};
-      const streamNameFromSettings =
-        currentGroupStreamingSettings?.[camera.name]?.streamName || "";
-      const streamExists =
-        streamNameFromSettings &&
-        Object.values(availableStreams).includes(streamNameFromSettings);
-
-      const streamName = streamExists
-        ? streamNameFromSettings
-        : Object.values(availableStreams)[0] || "";
-
-      streams[camera.name] = streamName;
-    });
-    return streams;
-  }, [cameras, currentGroupStreamingSettings]);
-
-  const {
-    preferredLiveModes,
-    setPreferredLiveModes,
-    resetPreferredLiveMode,
-    isRestreamedStates,
-    supportsAudioOutputStates,
-  } = useCameraLiveMode(cameras, windowVisible, activeStreams);
-
   // grid layout
 
   const ResponsiveGridLayout = useMemo(() => WidthProvider(Responsive), []);
@@ -624,6 +613,7 @@ export default function DraggableGridLayout({
                     resetPreferredLiveMode(camera.name)
                   }
                   config={config}
+                  streamMetadata={streamMetadata}
                 >
                   <LivePlayer
                     key={camera.name}
@@ -838,6 +828,7 @@ type GridLiveContextMenuProps = {
   unmuteAll: () => void;
   resetPreferredLiveMode: () => void;
   config?: FrigateConfig;
+  streamMetadata?: { [key: string]: LiveStreamMetadata };
 };
 
 const GridLiveContextMenu = React.forwardRef<
@@ -868,6 +859,7 @@ const GridLiveContextMenu = React.forwardRef<
       unmuteAll,
       resetPreferredLiveMode,
       config,
+      streamMetadata,
       ...props
     },
     ref,
@@ -899,6 +891,7 @@ const GridLiveContextMenu = React.forwardRef<
           unmuteAll={unmuteAll}
           resetPreferredLiveMode={resetPreferredLiveMode}
           config={config}
+          streamMetadata={streamMetadata}
         >
           {children}
         </LiveContextMenu>

web/src/views/live/LiveDashboardView.tsx

@@ -265,6 +265,7 @@ export default function LiveDashboardView({
     resetPreferredLiveMode,
     isRestreamedStates,
     supportsAudioOutputStates,
+    streamMetadata,
   } = useCameraLiveMode(cameras, windowVisible, activeStreams);
 
   const birdseyeConfig = useMemo(() => config?.birdseye, [config]);
@@ -650,6 +651,12 @@ export default function LiveDashboardView({
               setIsEditMode={setIsEditMode}
               fullscreen={fullscreen}
               toggleFullscreen={toggleFullscreen}
+              preferredLiveModes={preferredLiveModes}
+              setPreferredLiveModes={setPreferredLiveModes}
+              resetPreferredLiveMode={resetPreferredLiveMode}
+              isRestreamedStates={isRestreamedStates}
+              supportsAudioOutputStates={supportsAudioOutputStates}
+              streamMetadata={streamMetadata}
             />
           )}
         </>

web/src/views/settings/AuthenticationView.tsx

@@ -478,33 +478,32 @@ export default function AuthenticationView({
                       <TableCell className="text-right">
                         <TooltipProvider>
                           <div className="flex items-center justify-end gap-2">
-                            {user.username !== "admin" &&
-                              user.username !== "viewer" && (
-                                <Tooltip>
-                                  <TooltipTrigger asChild>
-                                    <Button
-                                      size="sm"
-                                      variant="outline"
-                                      className="h-8 px-2"
-                                      onClick={() => {
-                                        setSelectedUser(user.username);
-                                        setSelectedUserRole(
-                                          user.role || "viewer",
-                                        );
-                                        setShowRoleChange(true);
-                                      }}
-                                    >
-                                      <LuUserCog className="size-3.5" />
-                                      <span className="ml-1.5 hidden sm:inline-block">
-                                        {t("role.title", { ns: "common" })}
-                                      </span>
-                                    </Button>
-                                  </TooltipTrigger>
-                                  <TooltipContent>
-                                    <p>{t("users.table.changeRole")}</p>
-                                  </TooltipContent>
-                                </Tooltip>
-                              )}
+                            {user.username !== "admin" && (
+                              <Tooltip>
+                                <TooltipTrigger asChild>
+                                  <Button
+                                    size="sm"
+                                    variant="outline"
+                                    className="h-8 px-2"
+                                    onClick={() => {
+                                      setSelectedUser(user.username);
+                                      setSelectedUserRole(
+                                        user.role || "viewer",
+                                      );
+                                      setShowRoleChange(true);
+                                    }}
+                                  >
+                                    <LuUserCog className="size-3.5" />
+                                    <span className="ml-1.5 hidden sm:inline-block">
+                                      {t("role.title", { ns: "common" })}
+                                    </span>
+                                  </Button>
+                                </TooltipTrigger>
+                                <TooltipContent>
+                                  <p>{t("users.table.changeRole")}</p>
+                                </TooltipContent>
+                              </Tooltip>
+                            )}
 
                             <Tooltip>
                               <TooltipTrigger asChild>