Merge fb4fe8c430 into 1a75251ffb

web/src/components/menu/LiveContextMenu.tsx

@@ -48,7 +48,6 @@ import { useTranslation } from "react-i18next";
 import { useDateLocale } from "@/hooks/use-date-locale";
 import { useIsAdmin } from "@/hooks/use-is-admin";
 import { CameraNameLabel } from "../camera/FriendlyNameLabel";
-import { LiveStreamMetadata } from "@/types/live";
 
 type LiveContextMenuProps = {
   className?: string;
@@ -69,7 +68,6 @@ type LiveContextMenuProps = {
   resetPreferredLiveMode: () => void;
   config?: FrigateConfig;
   children?: ReactNode;
-  streamMetadata?: { [key: string]: LiveStreamMetadata };
 };
 export default function LiveContextMenu({
   className,
@@ -90,7 +88,6 @@ export default function LiveContextMenu({
   resetPreferredLiveMode,
   config,
   children,
-  streamMetadata,
 }: LiveContextMenuProps) {
   const { t } = useTranslation("views/live");
   const [showSettings, setShowSettings] = useState(false);
@@ -561,7 +558,6 @@ export default function LiveContextMenu({
           setGroupStreamingSettings={setGroupStreamingSettings}
           setIsDialogOpen={setShowSettings}
           onSave={onSave}
-          streamMetadata={streamMetadata}
         />
       </Dialog>
     </div>

web/src/components/settings/CameraStreamingDialog.tsx

@@ -38,7 +38,6 @@ import { useCameraFriendlyName } from "@/hooks/use-camera-friendly-name";
 type CameraStreamingDialogProps = {
   camera: string;
   groupStreamingSettings: GroupStreamingSettings;
-  streamMetadata?: { [key: string]: LiveStreamMetadata };
   setGroupStreamingSettings: React.Dispatch<
     React.SetStateAction<GroupStreamingSettings>
   >;
@@ -49,7 +48,6 @@ type CameraStreamingDialogProps = {
 export function CameraStreamingDialog({
   camera,
   groupStreamingSettings,
-  streamMetadata,
   setGroupStreamingSettings,
   setIsDialogOpen,
   onSave,
@@ -78,7 +76,12 @@ export function CameraStreamingDialog({
     [config, streamName],
   );
 
-  const cameraMetadata = streamName ? streamMetadata?.[streamName] : undefined;
+  const { data: cameraMetadata } = useSWR<LiveStreamMetadata>(
+    isRestreamed ? `go2rtc/streams/${streamName}` : null,
+    {
+      revalidateOnFocus: false,
+    },
+  );
 
   const supportsAudioOutput = useMemo(() => {
     if (!cameraMetadata) {

web/src/hooks/use-camera-live-mode.ts

@@ -1,8 +1,8 @@
+import { baseUrl } from "@/api/baseUrl";
 import { CameraConfig, FrigateConfig } from "@/types/frigateConfig";
 import { useCallback, useEffect, useState, useMemo } from "react";
 import useSWR from "swr";
-import { LivePlayerMode } from "@/types/live";
-import useDeferredStreamMetadata from "./use-deferred-stream-metadata";
+import { LivePlayerMode, LiveStreamMetadata } from "@/types/live";
 
 export default function useCameraLiveMode(
   cameras: CameraConfig[],
@@ -11,9 +11,9 @@ export default function useCameraLiveMode(
 ) {
   const { data: config } = useSWR<FrigateConfig>("config");
 
-  // Compute which streams need metadata (restreamed streams only)
-  const restreamedStreamNames = useMemo(() => {
-    if (!cameras || !config) return [];
+  // Get comma-separated list of restreamed stream names for SWR key
+  const restreamedStreamsKey = useMemo(() => {
+    if (!cameras || !config) return null;
 
     const streamNames = new Set<string>();
     cameras.forEach((camera) => {
@@ -32,13 +32,56 @@ export default function useCameraLiveMode(
       }
     });
 
-    return Array.from(streamNames);
+    return streamNames.size > 0
+      ? Array.from(streamNames).sort().join(",")
+      : null;
   }, [cameras, config, activeStreams]);
 
-  // Fetch stream metadata with deferred loading (doesn't block initial render)
-  const streamMetadata = useDeferredStreamMetadata(restreamedStreamNames);
+  const streamsFetcher = useCallback(async (key: string) => {
+    const streamNames = key.split(",");
+
+    const metadataPromises = streamNames.map(async (streamName) => {
+      try {
+        const response = await fetch(
+          `${baseUrl}api/go2rtc/streams/${streamName}`,
+          {
+            priority: "low",
+          },
+        );
+
+        if (response.ok) {
+          const data = await response.json();
+          return { streamName, data };
+        }
+        return { streamName, data: null };
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.error(`Failed to fetch metadata for ${streamName}:`, error);
+        return { streamName, data: null };
+      }
+    });
+
+    const results = await Promise.allSettled(metadataPromises);
+
+    const metadata: { [key: string]: LiveStreamMetadata } = {};
+    results.forEach((result) => {
+      if (result.status === "fulfilled" && result.value.data) {
+        metadata[result.value.streamName] = result.value.data;
+      }
+    });
+
+    return metadata;
+  }, []);
+
+  const { data: allStreamMetadata = {} } = useSWR<{
+    [key: string]: LiveStreamMetadata;
+  }>(restreamedStreamsKey, streamsFetcher, {
+    revalidateOnFocus: false,
+    revalidateOnReconnect: false,
+    revalidateIfStale: false,
+    dedupingInterval: 60000,
+  });
 
-  // Compute live mode states
   const [preferredLiveModes, setPreferredLiveModes] = useState<{
     [key: string]: LivePlayerMode;
   }>({});
@@ -79,10 +122,10 @@ export default function useCameraLiveMode(
         newPreferredLiveModes[camera.name] = isRestreamed ? "mse" : "jsmpeg";
       }
 
-      // Check each stream for audio support
+      // check each stream for audio support
       if (isRestreamed) {
         Object.values(camera.live.streams).forEach((streamName) => {
-          const metadata = streamMetadata[streamName];
+          const metadata = allStreamMetadata?.[streamName];
           newSupportsAudioOutputStates[streamName] = {
             supportsAudio: metadata
               ? metadata.producers.find(
@@ -107,7 +150,7 @@ export default function useCameraLiveMode(
     setPreferredLiveModes(newPreferredLiveModes);
     setIsRestreamedStates(newIsRestreamedStates);
     setSupportsAudioOutputStates(newSupportsAudioOutputStates);
-  }, [cameras, config, windowVisible, streamMetadata]);
+  }, [cameras, config, windowVisible, allStreamMetadata]);
 
   const resetPreferredLiveMode = useCallback(
     (cameraName: string) => {
@@ -137,6 +180,5 @@ export default function useCameraLiveMode(
     resetPreferredLiveMode,
     isRestreamedStates,
     supportsAudioOutputStates,
-    streamMetadata,
   };
 }

web/src/hooks/use-deferred-stream-metadata.ts

@@ -1,90 +0,0 @@
-import { baseUrl } from "@/api/baseUrl";
-import { useCallback, useEffect, useState, useMemo } from "react";
-import useSWR from "swr";
-import { LiveStreamMetadata } from "@/types/live";
-
-const FETCH_TIMEOUT_MS = 10000;
-const DEFER_DELAY_MS = 2000;
-
-/**
- * Hook that fetches go2rtc stream metadata with deferred loading.
- *
- * Metadata fetching is delayed to prevent blocking initial page load
- * and camera image requests.
- *
- * @param streamNames - Array of stream names to fetch metadata for
- * @returns Object containing stream metadata keyed by stream name
- */
-export default function useDeferredStreamMetadata(streamNames: string[]) {
-  const [fetchEnabled, setFetchEnabled] = useState(false);
-
-  useEffect(() => {
-    const timeoutId = setTimeout(() => {
-      setFetchEnabled(true);
-    }, DEFER_DELAY_MS);
-
-    return () => clearTimeout(timeoutId);
-  }, []);
-
-  const swrKey = useMemo(() => {
-    if (!fetchEnabled || streamNames.length === 0) return null;
-    // Use spread to avoid mutating the original array
-    return `deferred-streams:${[...streamNames].sort().join(",")}`;
-  }, [fetchEnabled, streamNames]);
-
-  const fetcher = useCallback(async (key: string) => {
-    // Extract stream names from key (remove prefix)
-    const names = key.replace("deferred-streams:", "").split(",");
-
-    const promises = names.map(async (streamName) => {
-      const controller = new AbortController();
-      const timeoutId = setTimeout(() => controller.abort(), FETCH_TIMEOUT_MS);
-
-      try {
-        const response = await fetch(
-          `${baseUrl}api/go2rtc/streams/${streamName}`,
-          {
-            priority: "low",
-            signal: controller.signal,
-          },
-        );
-        clearTimeout(timeoutId);
-
-        if (response.ok) {
-          const data = await response.json();
-          return { streamName, data };
-        }
-        return { streamName, data: null };
-      } catch (error) {
-        clearTimeout(timeoutId);
-        if ((error as Error).name !== "AbortError") {
-          // eslint-disable-next-line no-console
-          console.error(`Failed to fetch metadata for ${streamName}:`, error);
-        }
-        return { streamName, data: null };
-      }
-    });
-
-    const results = await Promise.allSettled(promises);
-
-    const metadata: { [key: string]: LiveStreamMetadata } = {};
-    results.forEach((result) => {
-      if (result.status === "fulfilled" && result.value.data) {
-        metadata[result.value.streamName] = result.value.data;
-      }
-    });
-
-    return metadata;
-  }, []);
-
-  const { data: metadata = {} } = useSWR<{
-    [key: string]: LiveStreamMetadata;
-  }>(swrKey, fetcher, {
-    revalidateOnFocus: false,
-    revalidateOnReconnect: false,
-    revalidateIfStale: false,
-    dedupingInterval: 60000,
-  });
-
-  return metadata;
-}

web/src/views/live/DraggableGridLayout.tsx

@@ -24,7 +24,6 @@ import "react-resizable/css/styles.css";
 import {
   AudioState,
   LivePlayerMode,
-  LiveStreamMetadata,
   StatsState,
   VolumeState,
 } from "@/types/live";
@@ -48,6 +47,7 @@ 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,16 +65,6 @@ 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,
@@ -89,12 +79,6 @@ 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");
@@ -114,6 +98,33 @@ 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), []);
@@ -613,7 +624,6 @@ export default function DraggableGridLayout({
                     resetPreferredLiveMode(camera.name)
                   }
                   config={config}
-                  streamMetadata={streamMetadata}
                 >
                   <LivePlayer
                     key={camera.name}
@@ -828,7 +838,6 @@ type GridLiveContextMenuProps = {
   unmuteAll: () => void;
   resetPreferredLiveMode: () => void;
   config?: FrigateConfig;
-  streamMetadata?: { [key: string]: LiveStreamMetadata };
 };
 
 const GridLiveContextMenu = React.forwardRef<
@@ -859,7 +868,6 @@ const GridLiveContextMenu = React.forwardRef<
       unmuteAll,
       resetPreferredLiveMode,
       config,
-      streamMetadata,
       ...props
     },
     ref,
@@ -891,7 +899,6 @@ const GridLiveContextMenu = React.forwardRef<
           unmuteAll={unmuteAll}
           resetPreferredLiveMode={resetPreferredLiveMode}
           config={config}
-          streamMetadata={streamMetadata}
         >
           {children}
         </LiveContextMenu>

web/src/views/live/LiveDashboardView.tsx

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