Merge branch 'dev' into feat/audio-support

ui/src/components/CustomTooltip.tsx

@@ -1,25 +1,25 @@
 import Card from "@components/Card";
 
 export interface CustomTooltipProps {
-  payload: { payload: { date: number; stat: number }; unit: string }[];
+  payload: { payload: { date: number; metric: number }; unit: string }[];
 }
 
 export default function CustomTooltip({ payload }: CustomTooltipProps) {
   if (payload?.length) {
     const toolTipData = payload[0];
-    const { date, stat } = toolTipData.payload;
+    const { date, metric } = toolTipData.payload;
 
     return (
       <Card>
-        <div className="p-2 text-black dark:text-white">
+        <div className="px-2 py-1.5 text-black dark:text-white">
-          <div className="font-semibold">
+          <div className="text-[13px] font-semibold">
             {new Date(date * 1000).toLocaleTimeString()}
           </div>
           <div className="space-y-1">
             <div className="flex items-center gap-x-1">
               <div className="h-[2px] w-2 bg-blue-700" />
-              <span >
+              <span className="text-[13px]">
-                {stat} {toolTipData?.unit}
+                {metric} {toolTipData?.unit}
               </span>
             </div>
           </div>

ui/src/components/Header.tsx

@@ -103,7 +103,7 @@ export default function DashboardNavbar({
                     <hr className="h-[20px] w-px self-center border-none bg-slate-800/20 dark:bg-slate-300/20" />
                     <div className="relative inline-block text-left">
                       <Menu>
-                        <MenuButton className="h-full">
+                        <MenuButton as="div" className="h-full">
                           <Button className="flex h-full items-center gap-x-3 rounded-md border border-slate-800/20 bg-white px-2 py-1.5 dark:border-slate-600 dark:bg-slate-800 dark:text-white">
                             {picture ? (
                               <img

ui/src/components/KvmCard.tsx

@@ -100,15 +100,12 @@ export default function KvmCard({
             )}
           </div>
           <Menu as="div" className="relative inline-block text-left">
-            <div>
+            <MenuButton
-              <MenuButton
+              as={Button}
-                as={Button}
+              theme="light"
-                theme="light"
+              TrailingIcon={LuEllipsisVertical}
-                TrailingIcon={LuEllipsisVertical}
+              size="MD"
-                size="MD"
+            ></MenuButton>
-              ></MenuButton>
-            </div>
-
             <MenuItems
               transition
               className="data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-100 data-leave:duration-75 data-enter:ease-out data-leave:ease-in"

ui/src/components/Metric.tsx

@@ -0,0 +1,180 @@
+/* eslint-disable react-refresh/only-export-components */
+import { ComponentProps } from "react";
+import { cva, cx } from "cva";
+
+import { someIterable } from "../utils";
+
+import { GridCard } from "./Card";
+import MetricsChart from "./MetricsChart";
+
+interface ChartPoint {
+  date: number;
+  metric: number | null;
+}
+
+interface MetricProps<T, K extends keyof T> {
+  title: string;
+  description: string;
+  stream?: Map<number, T>;
+  metric?: K;
+  data?: ChartPoint[];
+  gate?: Map<number, unknown>;
+  supported?: boolean;
+  map?: (p: { date: number; metric: number | null }) => ChartPoint;
+  domain?: [number, number];
+  unit: string;
+  heightClassName?: string;
+  referenceValue?: number;
+  badge?: ComponentProps<typeof MetricHeader>["badge"];
+  badgeTheme?: ComponentProps<typeof MetricHeader>["badgeTheme"];
+}
+
+/**
+ * Creates a chart array from a metrics map and a metric name.
+ *
+ * @param metrics - Expected to be ordered from oldest to newest.
+ * @param metricName - Name of the metric to create a chart array for.
+ */
+export function createChartArray<T, K extends keyof T>(
+  metrics: Map<number, T>,
+  metricName: K,
+) {
+  const result: { date: number; metric: number | null }[] = [];
+  const iter = metrics.entries();
+  let next = iter.next() as IteratorResult<[number, T]>;
+  const nowSeconds = Math.floor(Date.now() / 1000);
+
+  // We want 120 data points, in the chart.
+  const firstDate = Math.min(next.value?.[0] ?? nowSeconds, nowSeconds - 120);
+
+  for (let t = firstDate; t < nowSeconds; t++) {
+    while (!next.done && next.value[0] < t) next = iter.next();
+    const has = !next.done && next.value[0] === t;
+
+    let metric = null;
+    if (has) metric = next.value[1][metricName] as number;
+    result.push({ date: t, metric });
+
+    if (has) next = iter.next();
+  }
+
+  return result;
+}
+
+function computeReferenceValue(points: ChartPoint[]): number | undefined {
+  const values = points
+    .filter(p => p.metric != null && Number.isFinite(p.metric))
+    .map(p => Number(p.metric));
+
+  if (values.length === 0) return undefined;
+
+  const sum = values.reduce((acc, v) => acc + v, 0);
+  const mean = sum / values.length;
+  return Math.round(mean);
+}
+
+const theme = {
+  light:
+    "bg-white text-black border border-slate-800/20 dark:border dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300",
+  danger: "bg-red-500 dark:border-red-700 dark:bg-red-800 dark:text-red-50",
+  primary: "bg-blue-500 dark:border-blue-700 dark:bg-blue-800 dark:text-blue-50",
+};
+
+interface SettingsItemProps {
+  readonly title: string;
+  readonly description: string | React.ReactNode;
+  readonly badge?: string;
+  readonly className?: string;
+  readonly children?: React.ReactNode;
+  readonly badgeTheme?: keyof typeof theme;
+}
+
+export function MetricHeader(props: SettingsItemProps) {
+  const { title, description, badge } = props;
+  const badgeVariants = cva({ variants: { theme: theme } });
+
+  return (
+    <div className="space-y-0.5">
+      <div className="flex items-center gap-x-2">
+        <div className="flex w-full items-center justify-between text-base font-semibold text-black dark:text-white">
+          {title}
+          {badge && (
+            <span
+              className={cx(
+                "ml-2 rounded-sm px-2 py-1 font-mono text-[10px] leading-none font-medium",
+                badgeVariants({ theme: props.badgeTheme ?? "light" }),
+              )}
+            >
+              {badge}
+            </span>
+          )}
+        </div>
+      </div>
+      <div className="text-sm text-slate-700 dark:text-slate-300">{description}</div>
+    </div>
+  );
+}
+
+export function Metric<T, K extends keyof T>({
+  title,
+  description,
+  stream,
+  metric,
+  data,
+  gate,
+  supported,
+  map,
+  domain = [0, 600],
+  unit = "",
+  heightClassName = "h-[127px]",
+  badge,
+  badgeTheme,
+}: MetricProps<T, K>) {
+  const ready = gate ? gate.size > 0 : stream ? stream.size > 0 : true;
+  const supportedFinal =
+    supported ??
+    (stream && metric ? someIterable(stream, ([, s]) => s[metric] !== undefined) : true);
+
+  // Either we let the consumer provide their own chartArray, or we create one from the stream and metric.
+  const raw = data ?? ((stream && metric && createChartArray(stream, metric)) || []);
+
+  // If the consumer provides a map function, we apply it to the raw data.
+  const dataFinal: ChartPoint[] = map ? raw.map(map) : raw;
+
+  // Compute the average value of the metric.
+  const referenceValue = computeReferenceValue(dataFinal);
+
+  return (
+    <div className="space-y-2">
+      <MetricHeader
+        title={title}
+        description={description}
+        badge={badge}
+        badgeTheme={badgeTheme}
+      />
+
+      <GridCard>
+        <div
+          className={`flex ${heightClassName} w-full items-center justify-center text-sm text-slate-500`}
+        >
+          {!ready ? (
+            <div className="flex flex-col items-center space-y-1">
+              <p className="text-slate-700">Waiting for data...</p>
+            </div>
+          ) : supportedFinal ? (
+            <MetricsChart
+              data={dataFinal}
+              domain={domain}
+              unit={unit}
+              referenceValue={referenceValue}
+            />
+          ) : (
+            <div className="flex flex-col items-center space-y-1">
+              <p className="text-black">Metric not supported</p>
+            </div>
+          )}
+        </div>
+      </GridCard>
+    </div>
+  );
+}

ui/src/components/MetricsChart.tsx

@@ -12,13 +12,13 @@ import {
 
 import CustomTooltip, { CustomTooltipProps } from "@components/CustomTooltip";
 
-export default function StatChart({
+export default function MetricsChart({
   data,
   domain,
   unit,
   referenceValue,
 }: {
-  data: { date: number; stat: number | null | undefined }[];
+  data: { date: number; metric: number | null | undefined }[];
   domain?: [string | number, string | number];
   unit?: string;
   referenceValue?: number;
@@ -33,7 +33,7 @@ export default function StatChart({
           strokeLinecap="butt"
           stroke="rgba(30, 41, 59, 0.1)"
         />
-        {referenceValue && (
+        {referenceValue !== undefined && (
           <ReferenceLine
             y={referenceValue}
             strokeDasharray="3 3"
@@ -64,7 +64,7 @@ export default function StatChart({
             .map(x => x.date)}
         />
         <YAxis
-          dataKey="stat"
+          dataKey="metric"
           axisLine={false}
           orientation="right"
           tick={{
@@ -73,6 +73,7 @@ export default function StatChart({
             fill: "rgba(107, 114, 128, 1)",
           }}
           padding={{ top: 0, bottom: 0 }}
+          allowDecimals
           tickLine={false}
           unit={unit}
           domain={domain || ["auto", "auto"]}
@@ -87,7 +88,7 @@ export default function StatChart({
         <Line
           type="monotone"
           isAnimationActive={false}
-          dataKey="stat"
+          dataKey="metric"
           stroke="rgb(29 78 216)"
           strokeLinecap="round"
           strokeWidth={2}

ui/src/components/sidebar/connectionStats.tsx

@@ -1,74 +1,40 @@
 import { useInterval } from "usehooks-ts";
 
 import SidebarHeader from "@/components/SidebarHeader";
-import { GridCard } from "@/components/Card";
 import { useRTCStore, useUiStore } from "@/hooks/stores";
-import StatChart from "@/components/StatChart";
+import { someIterable } from "@/utils";
 
-function createChartArray<T, K extends keyof T>(
+import { createChartArray, Metric } from "../Metric";
-  stream: Map<number, T>,
+import { SettingsSectionHeader } from "../SettingsSectionHeader";
-  metric: K,
-): { date: number; stat: T[K] | null }[] {
-  const stat = Array.from(stream).map(([key, stats]) => {
-    return { date: key, stat: stats[metric] };
-  });
-
-  // Sort the dates to ensure they are in chronological order
-  const sortedStat = stat.map(x => x.date).sort((a, b) => a - b);
-
-  // Determine the earliest statistic date
-  const earliestStat = sortedStat[0];
-
-  // Current time in seconds since the Unix epoch
-  const now = Math.floor(Date.now() / 1000);
-
-  // Determine the starting point for the chart data
-  const firstChartDate = earliestStat ? Math.min(earliestStat, now - 120) : now - 120;
-
-  // Generate the chart array for the range between 'firstChartDate' and 'now'
-  return Array.from({ length: now - firstChartDate }, (_, i) => {
-    const currentDate = firstChartDate + i;
-    return {
-      date: currentDate,
-      // Find the statistic for 'currentDate', or use the last known statistic if none exists for that date
-      stat: stat.find(x => x.date === currentDate)?.stat ?? null,
-    };
-  });
-}
 
 export default function ConnectionStatsSidebar() {
   const { sidebarView, setSidebarView } = useUiStore();
   const {
-     mediaStream,
+    mediaStream,
-     peerConnection,
+    peerConnection,
-     inboundRtpStats,
+    inboundRtpStats: inboundVideoRtpStats,
-     appendInboundRtpStats,
+    appendInboundRtpStats: appendInboundVideoRtpStats,
-     candidatePairStats,
+    candidatePairStats: iceCandidatePairStats,
-     appendCandidatePairStats,
+    appendCandidatePairStats,
-     appendLocalCandidateStats,
+    appendLocalCandidateStats,
-     appendRemoteCandidateStats,
+    appendRemoteCandidateStats,
-     appendDiskDataChannelStats,
+    appendDiskDataChannelStats,
   } = useRTCStore();
 
-  function isMetricSupported<T, K extends keyof T>(
-    stream: Map<number, T>,
-    metric: K,
-  ): boolean {
-    return Array.from(stream).some(([, stat]) => stat[metric] !== undefined);
-  }
-
   useInterval(function collectWebRTCStats() {
     (async () => {
       if (!mediaStream) return;
+
       const videoTrack = mediaStream.getVideoTracks()[0];
       if (!videoTrack) return;
+
       const stats = await peerConnection?.getStats();
       let successfulLocalCandidateId: string | null = null;
       let successfulRemoteCandidateId: string | null = null;
 
       stats?.forEach(report => {
-        if (report.type === "inbound-rtp") {
+        if (report.type === "inbound-rtp" && report.kind === "video") {
-          appendInboundRtpStats(report);
+          appendInboundVideoRtpStats(report);
         } else if (report.type === "candidate-pair" && report.nominated) {
           if (report.state === "succeeded") {
             successfulLocalCandidateId = report.localCandidateId;
@@ -91,144 +57,133 @@ export default function ConnectionStatsSidebar() {
     })();
   }, 500);
 
+  const jitterBufferDelay = createChartArray(inboundVideoRtpStats, "jitterBufferDelay");
+  const jitterBufferEmittedCount = createChartArray(
+    inboundVideoRtpStats,
+    "jitterBufferEmittedCount",
+  );
+
+  const jitterBufferAvgDelayData = jitterBufferDelay.map((d, idx) => {
+    if (idx === 0) return { date: d.date, metric: null };
+    const prevDelay = jitterBufferDelay[idx - 1]?.metric as number | null | undefined;
+    const currDelay = d.metric as number | null | undefined;
+    const prevCountEmitted =
+      (jitterBufferEmittedCount[idx - 1]?.metric as number | null | undefined) ?? null;
+    const currCountEmitted =
+      (jitterBufferEmittedCount[idx]?.metric as number | null | undefined) ?? null;
+
+    if (
+      prevDelay == null ||
+      currDelay == null ||
+      prevCountEmitted == null ||
+      currCountEmitted == null
+    ) {
+      return { date: d.date, metric: null };
+    }
+
+    const deltaDelay = currDelay - prevDelay;
+    const deltaEmitted = currCountEmitted - prevCountEmitted;
+
+    // Guard counter resets or no emitted frames
+    if (deltaDelay < 0 || deltaEmitted <= 0) {
+      return { date: d.date, metric: null };
+    }
+
+    const valueMs = Math.round((deltaDelay / deltaEmitted) * 1000);
+    return { date: d.date, metric: valueMs };
+  });
+
   return (
     <div className="grid h-full grid-rows-(--grid-headerBody) shadow-xs">
       <SidebarHeader title="Connection Stats" setSidebarView={setSidebarView} />
       <div className="h-full space-y-4 overflow-y-scroll bg-white px-4 py-2 pb-8 dark:bg-slate-900">
         <div className="space-y-4">
-          {/*
-            The entire sidebar component is always rendered, with a display none when not visible
-            The charts below, need a height and width, otherwise they throw. So simply don't render them unless the thing is visible
-          */}
           {sidebarView === "connection-stats" && (
-            <div className="space-y-4">
+            <div className="space-y-8">
-              <div className="space-y-2">
+              {/* Connection Group */}
-                <div>
+              <div className="space-y-3">
-                  <h2 className="text-lg font-semibold text-black dark:text-white">
+                <SettingsSectionHeader
-                    Packets Lost
+                  title="Connection"
-                  </h2>
+                  description="The connection between the client and the JetKVM."
-                  <p className="text-sm text-slate-700 dark:text-slate-300">
+                />
-                    Number of data packets lost during transmission.
+                <Metric
-                  </p>
+                  title="Round-Trip Time"
-                </div>
+                  description="Round-trip time for the active ICE candidate pair between peers."
-                <GridCard>
+                  stream={iceCandidatePairStats}
-                  <div className="flex h-[127px] w-full items-center justify-center text-sm text-slate-500">
+                  metric="currentRoundTripTime"
-                    {inboundRtpStats.size === 0 ? (
+                  map={x => ({
-                      <div className="flex flex-col items-center space-y-1">
+                    date: x.date,
-                        <p className="text-slate-700">Waiting for data...</p>
+                    metric: x.metric != null ? Math.round(x.metric * 1000) : null,
-                      </div>
+                  })}
-                    ) : isMetricSupported(inboundRtpStats, "packetsLost") ? (
+                  domain={[0, 600]}
-                      <StatChart
+                  unit=" ms"
-                        data={createChartArray(inboundRtpStats, "packetsLost")}
+                />
-                        domain={[0, 100]}
-                        unit=" packets"
-                      />
-                    ) : (
-                      <div className="flex flex-col items-center space-y-1">
-                        <p className="text-black">Metric not supported</p>
-                      </div>
-                    )}
-                  </div>
-                </GridCard>
               </div>
-              <div className="space-y-2">
+
-                <div>
+              {/* Video Group */}
-                  <h2 className="text-lg font-semibold text-black dark:text-white">
+              <div className="space-y-3">
-                    Round-Trip Time
+                <SettingsSectionHeader
-                  </h2>
+                  title="Video"
-                  <p className="text-sm text-slate-700 dark:text-slate-300">
+                  description="The video stream from the JetKVM to the client."
-                    Time taken for data to travel from source to destination and back
+                />
-                  </p>
+
-                </div>
+                {/* RTP Jitter */}
-                <GridCard>
+                <Metric
-                  <div className="flex h-[127px] w-full items-center justify-center text-sm text-slate-500">
+                  title="Network Stability"
-                    {inboundRtpStats.size === 0 ? (
+                  badge="Jitter"
-                      <div className="flex flex-col items-center space-y-1">
+                  badgeTheme="light"
-                        <p className="text-slate-700">Waiting for data...</p>
+                  description="How steady the flow of inbound video packets is across the network."
-                      </div>
+                  stream={inboundVideoRtpStats}
-                    ) : isMetricSupported(candidatePairStats, "currentRoundTripTime") ? (
+                  metric="jitter"
-                      <StatChart
+                  map={x => ({
-                        data={createChartArray(
+                    date: x.date,
-                          candidatePairStats,
+                    metric: x.metric != null ? Math.round(x.metric * 1000) : null,
-                          "currentRoundTripTime",
+                  })}
-                        ).map(x => {
+                  domain={[0, 10]}
-                          return {
+                  unit=" ms"
-                            date: x.date,
+                />
-                            stat: x.stat ? Math.round(x.stat * 1000) : null,
+
-                          };
+                {/* Playback Delay */}
-                        })}
+                <Metric
-                        domain={[0, 600]}
+                  title="Playback Delay"
-                        unit=" ms"
+                  description="Delay added by the jitter buffer to smooth playback when frames arrive unevenly."
-                      />
+                  badge="Jitter Buffer Avg. Delay"
-                    ) : (
+                  badgeTheme="light"
-                      <div className="flex flex-col items-center space-y-1">
+                  data={jitterBufferAvgDelayData}
-                        <p className="text-black">Metric not supported</p>
+                  gate={inboundVideoRtpStats}
-                      </div>
+                  supported={
-                    )}
+                    someIterable(
-                  </div>
+                      inboundVideoRtpStats,
-                </GridCard>
+                      ([, x]) => x.jitterBufferDelay != null,
-              </div>
+                    ) &&
-              <div className="space-y-2">
+                    someIterable(
-                <div>
+                      inboundVideoRtpStats,
-                  <h2 className="text-lg font-semibold text-black dark:text-white">
+                      ([, x]) => x.jitterBufferEmittedCount != null,
-                    Jitter
+                    )
-                  </h2>
+                  }
-                  <p className="text-sm text-slate-700 dark:text-slate-300">
+                  domain={[0, 30]}
-                    Variation in packet delay, affecting video smoothness.{" "}
+                  unit=" ms"
-                  </p>
+                />
-                </div>
+
-                <GridCard>
+                {/* Packets Lost */}
-                  <div className="flex h-[127px] w-full items-center justify-center text-sm text-slate-500">
+                <Metric
-                    {inboundRtpStats.size === 0 ? (
+                  title="Packets Lost"
-                      <div className="flex flex-col items-center space-y-1">
+                  description="Count of lost inbound video RTP packets."
-                        <p className="text-slate-700">Waiting for data...</p>
+                  stream={inboundVideoRtpStats}
-                      </div>
+                  metric="packetsLost"
-                    ) : (
+                  domain={[0, 100]}
-                      <StatChart
+                  unit=" packets"
-                        data={createChartArray(inboundRtpStats, "jitter").map(x => {
+                />
-                          return {
+
-                            date: x.date,
+                {/* Frames Per Second */}
-                            stat: x.stat ? Math.round(x.stat * 1000) : null,
+                <Metric
-                          };
+                  title="Frames per second"
-                        })}
+                  description="Number of inbound video frames displayed per second."
-                        domain={[0, 300]}
+                  stream={inboundVideoRtpStats}
-                        unit=" ms"
+                  metric="framesPerSecond"
-                      />
+                  domain={[0, 80]}
-                    )}
+                  unit=" fps"
-                  </div>
+                />
-                </GridCard>
-              </div>
-              <div className="space-y-2">
-                <div>
-                  <h2 className="text-lg font-semibold text-black dark:text-white">
-                    Frames per second
-                  </h2>
-                  <p className="text-sm text-slate-700 dark:text-slate-300">
-                    Number of video frames displayed per second.
-                  </p>
-                </div>
-                <GridCard>
-                  <div className="flex h-[127px] w-full items-center justify-center text-sm text-slate-500">
-                    {inboundRtpStats.size === 0 ? (
-                      <div className="flex flex-col items-center space-y-1">
-                        <p className="text-slate-700">Waiting for data...</p>
-                      </div>
-                    ) : (
-                      <StatChart
-                        data={createChartArray(inboundRtpStats, "framesPerSecond").map(
-                          x => {
-                            return {
-                              date: x.date,
-                              stat: x.stat ? x.stat : null,
-                            };
-                          },
-                        )}
-                        domain={[0, 80]}
-                        unit=" fps"
-                      />
-                    )}
-                  </div>
-                </GridCard>
               </div>
             </div>
           )}

ui/src/main.tsx

@@ -116,6 +116,7 @@ if (isOnDevice) {
       path: "/",
       errorElement: <ErrorBoundary />,
       element: <DeviceRoute />,
+      HydrateFallback: () => <div className="p-4">Loading...</div>,
       loader: DeviceRoute.loader,
       children: [
         {

ui/src/routes/devices.$id.mount.tsx

@@ -355,7 +355,7 @@ function UrlView({
   const popularImages = [
     {
       name: "Ubuntu 24.04 LTS",
-      url: "https://releases.ubuntu.com/24.04.2/ubuntu-24.04.2-desktop-amd64.iso",
+      url: "https://releases.ubuntu.com/24.04.3/ubuntu-24.04.3-desktop-amd64.iso",
       icon: UbuntuIcon,
     },
     {
@@ -369,8 +369,8 @@ function UrlView({
       icon: DebianIcon,
     },
     {
-      name: "Fedora 41",
+      name: "Fedora 42",
-      url: "https://download.fedoraproject.org/pub/fedora/linux/releases/41/Workstation/x86_64/iso/Fedora-Workstation-Live-x86_64-41-1.4.iso",
+      url: "https://download.fedoraproject.org/pub/fedora/linux/releases/42/Workstation/x86_64/iso/Fedora-Workstation-Live-42-1.1.x86_64.iso",
       icon: FedoraIcon,
     },
     {
@@ -385,7 +385,7 @@ function UrlView({
     },
     {
       name: "Arch Linux",
-      url: "https://archlinux.doridian.net/iso/2025.02.01/archlinux-2025.02.01-x86_64.iso",
+      url: "https://archlinux.doridian.net/iso/latest/archlinux-x86_64.iso",
       icon: ArchIcon,
     },
     {

ui/src/routes/devices.$id.settings.video.tsx

@@ -1,15 +1,16 @@
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
 
 import { Button } from "@/components/Button";
 import { TextAreaWithLabel } from "@/components/TextArea";
 import { JsonRpcResponse, useJsonRpc } from "@/hooks/useJsonRpc";
 import { SettingsPageHeader } from "@components/SettingsPageheader";
 import { useSettingsStore } from "@/hooks/stores";
-
+import { SelectMenuBasic } from "@components/SelectMenuBasic";
-import notifications from "../notifications";
+import Fieldset from "@components/Fieldset";
-import { SelectMenuBasic } from "../components/SelectMenuBasic";
+import notifications from "@/notifications";
 
 import { SettingsItem } from "./devices.$id.settings";
+
 const defaultEdid =
   "00ffffffffffff0052620188008888881c150103800000780a0dc9a05747982712484c00000001010101010101010101010101010101023a801871382d40582c4500c48e2100001e011d007251d01e206e285500c48e2100001e000000fc00543734392d6648443732300a20000000fd00147801ff1d000a202020202020017b";
 const edids = [
@@ -50,21 +51,27 @@ export default function SettingsVideoRoute() {
   const [streamQuality, setStreamQuality] = useState("1");
   const [customEdidValue, setCustomEdidValue] = useState<string | null>(null);
   const [edid, setEdid] = useState<string | null>(null);
+  const [edidLoading, setEdidLoading] = useState(false);
 
   // Video enhancement settings from store
   const {
-    videoSaturation, setVideoSaturation,
+    videoSaturation,
-    videoBrightness, setVideoBrightness,
+    setVideoSaturation,
-    videoContrast, setVideoContrast
+    videoBrightness,
+    setVideoBrightness,
+    videoContrast,
+    setVideoContrast,
   } = useSettingsStore();
 
   useEffect(() => {
+    setEdidLoading(true);
     send("getStreamQualityFactor", {}, (resp: JsonRpcResponse) => {
       if ("error" in resp) return;
       setStreamQuality(String(resp.result));
     });
 
     send("getEDID", {}, (resp: JsonRpcResponse) => {
+      setEdidLoading(false);
       if ("error" in resp) {
         notifications.error(`Failed to get EDID: ${resp.error.data || "Unknown error"}`);
         return;
@@ -89,28 +96,36 @@ export default function SettingsVideoRoute() {
   }, [send]);
 
   const handleStreamQualityChange = (factor: string) => {
-    send("setStreamQualityFactor", { factor: Number(factor) }, (resp: JsonRpcResponse) => {
+    send(
-      if ("error" in resp) {
+      "setStreamQualityFactor",
-        notifications.error(
+      { factor: Number(factor) },
-          `Failed to set stream quality: ${resp.error.data || "Unknown error"}`,
+      (resp: JsonRpcResponse) => {
-        );
+        if ("error" in resp) {
-        return;
+          notifications.error(
-      }
+            `Failed to set stream quality: ${resp.error.data || "Unknown error"}`,
+          );
+          return;
+        }
 
-      notifications.success(`Stream quality set to ${streamQualityOptions.find(x => x.value === factor)?.label}`);
+        notifications.success(
-      setStreamQuality(factor);
+          `Stream quality set to ${streamQualityOptions.find(x => x.value === factor)?.label}`,
-    });
+        );
+        setStreamQuality(factor);
+      },
+    );
   };
 
   const handleEDIDChange = (newEdid: string) => {
+    setEdidLoading(true);
     send("setEDID", { edid: newEdid }, (resp: JsonRpcResponse) => {
+      setEdidLoading(false);
       if ("error" in resp) {
         notifications.error(`Failed to set EDID: ${resp.error.data || "Unknown error"}`);
         return;
       }
 
       notifications.success(
-        `EDID set successfully to ${edids.find(x => x.value === newEdid)?.label}`,
+        `EDID set successfully to ${edids.find(x => x.value === newEdid)?.label ?? "the custom EDID"}`,
       );
       // Update the EDID value in the UI
       setEdid(newEdid);
@@ -158,7 +173,7 @@ export default function SettingsVideoRoute() {
                   step="0.1"
                   value={videoSaturation}
                   onChange={e => setVideoSaturation(parseFloat(e.target.value))}
-                  className="w-32 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
+                  className="h-2 w-32 cursor-pointer appearance-none rounded-lg bg-gray-200 dark:bg-gray-700"
                 />
               </SettingsItem>
 
@@ -173,7 +188,7 @@ export default function SettingsVideoRoute() {
                   step="0.1"
                   value={videoBrightness}
                   onChange={e => setVideoBrightness(parseFloat(e.target.value))}
-                  className="w-32 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
+                  className="h-2 w-32 cursor-pointer appearance-none rounded-lg bg-gray-200 dark:bg-gray-700"
                 />
               </SettingsItem>
 
@@ -188,7 +203,7 @@ export default function SettingsVideoRoute() {
                   step="0.1"
                   value={videoContrast}
                   onChange={e => setVideoContrast(parseFloat(e.target.value))}
-                  className="w-32 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
+                  className="h-2 w-32 cursor-pointer appearance-none rounded-lg bg-gray-200 dark:bg-gray-700"
                 />
               </SettingsItem>
 
@@ -205,60 +220,64 @@ export default function SettingsVideoRoute() {
                 />
               </div>
             </div>
-
+            <Fieldset disabled={edidLoading} className="space-y-2">
-            <SettingsItem
+              <SettingsItem
-              title="EDID"
+                title="EDID"
-              description="Adjust the EDID settings for the display"
+                description="Adjust the EDID settings for the display"
-            >
+                loading={edidLoading}
-              <SelectMenuBasic
+              >
-                size="SM"
+                <SelectMenuBasic
-                label=""
+                  size="SM"
-                fullWidth
+                  label=""
-                value={customEdidValue ? "custom" : edid || "asd"}
+                  fullWidth
-                onChange={e => {
+                  value={customEdidValue ? "custom" : edid || "asd"}
-                  if (e.target.value === "custom") {
+                  onChange={e => {
-                    setEdid("custom");
+                    if (e.target.value === "custom") {
-                    setCustomEdidValue("");
+                      setEdid("custom");
-                  } else {
+                      setCustomEdidValue("");
-                    setCustomEdidValue(null);
+                    } else {
-                    handleEDIDChange(e.target.value as string);
-                  }
-                }}
-                options={[...edids, { value: "custom", label: "Custom" }]}
-              />
-            </SettingsItem>
-            {customEdidValue !== null && (
-              <>
-                <SettingsItem
-                  title="Custom EDID"
-                  description="EDID details video mode compatibility. Default settings works in most cases, but unique UEFI/BIOS might need adjustments."
-                />
-                <TextAreaWithLabel
-                  label="EDID File"
-                  placeholder="00F..."
-                  rows={3}
-                  value={customEdidValue}
-                  onChange={e => setCustomEdidValue(e.target.value)}
-                />
-                <div className="flex justify-start gap-x-2">
-                  <Button
-                    size="SM"
-                    theme="primary"
-                    text="Set Custom EDID"
-                    onClick={() => handleEDIDChange(customEdidValue)}
-                  />
-                  <Button
-                    size="SM"
-                    theme="light"
-                    text="Restore to default"
-                    onClick={() => {
                       setCustomEdidValue(null);
-                      handleEDIDChange(defaultEdid);
+                      handleEDIDChange(e.target.value as string);
-                    }}
+                    }
+                  }}
+                  options={[...edids, { value: "custom", label: "Custom" }]}
+                />
+              </SettingsItem>
+              {customEdidValue !== null && (
+                <>
+                  <SettingsItem
+                    title="Custom EDID"
+                    description="EDID details video mode compatibility. Default settings works in most cases, but unique UEFI/BIOS might need adjustments."
                   />
-                </div>
+                  <TextAreaWithLabel
-              </>
+                    label="EDID File"
-            )}
+                    placeholder="00F..."
+                    rows={3}
+                    value={customEdidValue}
+                    onChange={e => setCustomEdidValue(e.target.value)}
+                  />
+                  <div className="flex justify-start gap-x-2">
+                    <Button
+                      size="SM"
+                      theme="primary"
+                      text="Set Custom EDID"
+                      loading={edidLoading}
+                      onClick={() => handleEDIDChange(customEdidValue)}
+                    />
+                    <Button
+                      size="SM"
+                      theme="light"
+                      text="Restore to default"
+                      loading={edidLoading}
+                      onClick={() => {
+                        setCustomEdidValue(null);
+                        handleEDIDChange(defaultEdid);
+                      }}
+                    />
+                  </div>
+                </>
+              )}
+            </Fieldset>
           </div>
         </div>
       </div>

ui/src/utils.ts

@@ -94,6 +94,17 @@ export const formatters = {
   },
 };
 
+export function someIterable<T>(
+  iterable: Iterable<T>,
+  predicate: (item: T) => boolean,
+): boolean {
+  for (const item of iterable) {
+    if (predicate(item)) return true;
+  }
+
+  return false;
+}
+
 export const VIDEO = new Blob(
   [
     new Uint8Array([