feat(ui): Enhance EDID settings with loading state and Fieldset component

This commit is contained in:
Adam Shiervani 2025-07-15 21:49:20 +02:00
parent cff3ddad29
commit d09784f24e
1 changed files with 61 additions and 52 deletions

View File

@ -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;
@ -99,7 +103,9 @@ export default function SettingsVideoRoute() {
};
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;
@ -202,9 +208,11 @@ export default function SettingsVideoRoute() {
</div>
</div>
<Fieldset disabled={edidLoading}>
<SettingsItem
title="EDID"
description="Adjust the EDID settings for the display"
loading={edidLoading}
>
<SelectMenuBasic
size="SM"
@ -255,6 +263,7 @@ export default function SettingsVideoRoute() {
</div>
</>
)}
</Fieldset>
</div>
</div>
</div>