Merge fecd40b45d into 608f69db13

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

@@ -8,6 +8,7 @@ import { useSettingsStore } from "@/hooks/stores";
 
 import notifications from "../notifications";
 import { SelectMenuBasic } from "../components/SelectMenuBasic";
+import Fieldset from "../components/Fieldset";
 
 import { SettingsItem } from "./devices.$id.settings";
 const defaultEdid =
@@ -45,6 +46,7 @@ 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 = useSettingsStore(state => state.videoSaturation);
@@ -55,12 +57,14 @@ export default function SettingsVideoRoute() {
   const setVideoContrast = useSettingsStore(state => state.setVideoContrast);
 
   useEffect(() => {
+    setEdidLoading(true);
     send("getStreamQualityFactor", {}, resp => {
       if ("error" in resp) return;
       setStreamQuality(String(resp.result));
     });
 
     send("getEDID", {}, resp => {
+      setEdidLoading(false);
       if ("error" in resp) {
         notifications.error(`Failed to get EDID: ${resp.error.data || "Unknown error"}`);
         return;
@@ -93,20 +97,24 @@ export default function SettingsVideoRoute() {
         return;
       }
 
-      notifications.success(`Stream quality set to ${streamQualityOptions.find(x => x.value === factor)?.label}`);
+      notifications.success(
+        `Stream quality set to ${streamQualityOptions.find(x => x.value === factor)?.label}`,
+      );
       setStreamQuality(factor);
     });
   };
 
   const handleEDIDChange = (newEdid: string) => {
+    setEdidLoading(true);
     send("setEDID", { edid: newEdid }, resp => {
+      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 || "custom"}`,
       );
       // Update the EDID value in the UI
       setEdid(newEdid);
@@ -141,7 +149,7 @@ export default function SettingsVideoRoute() {
               title="Video Enhancement"
               description="Adjust color settings to make the video output more vibrant and colorful"
             />
-            
+
             <div className="space-y-4 pl-4">
               <SettingsItem
                 title="Saturation"
@@ -154,7 +162,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>
 
@@ -169,7 +177,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>
 
@@ -184,7 +192,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>
 
@@ -202,59 +210,64 @@ export default function SettingsVideoRoute() {
               </div>
             </div>
 
-            <SettingsItem
+            <Fieldset disabled={edidLoading} className="space-y-4">
-              title="EDID"
+              <SettingsItem
-              description="Adjust the EDID settings for the display"
+                title="EDID"
-            >
+                description="Adjust the EDID settings for the display"
-              <SelectMenuBasic
+                loading={edidLoading}
-                size="SM"
+              >
-                label=""
+                <SelectMenuBasic
-                fullWidth
+                  size="SM"
-                value={customEdidValue ? "custom" : edid || "asd"}
+                  label=""
-                onChange={e => {
+                  fullWidth
-                  if (e.target.value === "custom") {
+                  value={customEdidValue ? "custom" : edid || "asd"}
-                    setEdid("custom");
+                  onChange={e => {
-                    setCustomEdidValue("");
+                    if (e.target.value === "custom") {
-                  } else {
+                      setEdid("custom");
-                    setCustomEdidValue(null);
+                      setCustomEdidValue("");
-                    handleEDIDChange(e.target.value as string);
+                    } else {
-                  }
-                }}
-                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>