diff --git a/ui/src/routes/devices.$id.settings.video.tsx b/ui/src/routes/devices.$id.settings.video.tsx index 9e888ab..f0485ef 100644 --- a/ui/src/routes/devices.$id.settings.video.tsx +++ b/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(null); const [edid, setEdid] = useState(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" /> - +
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" /> @@ -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" /> @@ -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" /> @@ -202,59 +210,64 @@ export default function SettingsVideoRoute() {
- - { - if (e.target.value === "custom") { - setEdid("custom"); - setCustomEdidValue(""); - } else { - setCustomEdidValue(null); - handleEDIDChange(e.target.value as string); - } - }} - options={[...edids, { value: "custom", label: "Custom" }]} - /> - - {customEdidValue !== null && ( - <> - - setCustomEdidValue(e.target.value)} - /> -
-
- - )} + setCustomEdidValue(e.target.value)} + /> +
+
+ + )} +