chore: reconcile performance layer after stack rebase

packages/widgets/src/media-server/component.tsx

@@ -37,6 +37,7 @@ import { useTranslatedMantineReactTable } from "@homarr/ui/hooks";
 import type { WidgetComponentProps } from "../definition";
 import { getUsableWidgetQueryData } from "../common/query-state";
 import { IntegrationErrorIndicator } from "../common/integration-error-indicator";
+import { WidgetQueryErrorIndicator } from "../common/query-state-indicator";
 import classes from "./component.module.css";
 
 type TranscodingDecision = NonNullable<NonNullable<StreamSession["currentlyPlaying"]>["metadata"]>["transcoding"];
@@ -74,16 +75,17 @@ export default function MediaServerWidget({
   isEditMode,
   displayMode,
 }: WidgetComponentProps<"mediaServer">) {
-  const currentStreams =
-    getUsableWidgetQueryData(
-      clientApi.widget.mediaServer.getCurrentStreams.useQuery({
-        integrationIds,
-        showOnlyPlaying: options.showOnlyPlaying,
-      }),
-    ) ?? [];
+  const currentStreamsQuery = clientApi.widget.mediaServer.getCurrentStreams.useQuery({
+    integrationIds,
+    showOnlyPlaying: options.showOnlyPlaying,
+  });
+  const currentStreamsData = getUsableWidgetQueryData(currentStreamsQuery);
+  const currentStreams = useMemo(() => currentStreamsData ?? [], [currentStreamsData]);
 
   const t = useScopedI18n("widget.mediaServer");
   const isAdvanced = displayMode === "advanced";
+  const showLocation = isAdvanced || options.showLocation;
+  const showBitrate = isAdvanced || options.showBitrate;
   const [selectedRowId, setSelectedRowId] = useState<string | null>(null);
   const columns = useMemo<MRT_ColumnDef<StreamSession>[]>(() => {
     const result: MRT_ColumnDef<StreamSession>[] = [
@@ -142,8 +144,8 @@ export default function MediaServerWidget({
                 if (!currentlyPlaying) return null;
 
                 const status = getPlaybackStatus(currentlyPlaying.metadata?.transcoding);
-                const location = options.showLocation ? currentlyPlaying.location : null;
-                const bitrateLabel = options.showBitrate ? formatBitrate(currentlyPlaying.metadata?.bitrateKbps) : null;
+                const location = showLocation ? currentlyPlaying.location : null;
+                const bitrateLabel = showBitrate ? formatBitrate(currentlyPlaying.metadata?.bitrateKbps) : null;
 
                 return (
                   <Stack gap={4} align="flex-start">
@@ -175,7 +177,7 @@ export default function MediaServerWidget({
         : []),
     ];
     return result;
-  }, [isAdvanced, options.showBitrate, options.showLocation, selectedRowId, t, width]);
+  }, [isAdvanced, selectedRowId, showBitrate, showLocation, t, width]);
 
   // Only render the flat list of sessions when the currentStreams change
   // Otherwise it will always create a new array reference and cause the table to re-render
@@ -285,7 +287,7 @@ export default function MediaServerWidget({
     (sum, session) => sum + (session.currentlyPlaying?.metadata?.bitrateKbps ?? 0),
     0,
   );
-  const totalBitrateLabel = options.showBitrate ? formatBitrate(totalBitrateKbps) : null;
+  const totalBitrateLabel = showBitrate ? formatBitrate(totalBitrateKbps) : null;
   const hasFailedIntegrations = currentStreams.some(({ error }) => Boolean(error));
 
   return (
@@ -300,12 +302,14 @@ export default function MediaServerWidget({
             {t("summary.transcoding", { count: transcodingCount })}
           </Badge>
           <Group ml="auto">
+            <WidgetQueryErrorIndicator error={currentStreamsQuery.error} label={t("name")} />
             <IntegrationErrorIndicator results={currentStreams} />
           </Group>
         </Group>
       )}
-      {!isAdvanced && hasFailedIntegrations && (
+      {!isAdvanced && (hasFailedIntegrations || currentStreamsQuery.error) && (
         <Group px="xs" justify="flex-end">
+          <WidgetQueryErrorIndicator error={currentStreamsQuery.error} label={t("name")} />
           <IntegrationErrorIndicator results={currentStreams} />
         </Group>
       )}