Superminaren
/
kvm
mirror of https://github.com/jetkvm/kvm.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
ui/src/routes/devices.$id.settings.video.tsx
View File

@ -8,6 +8,7 @@ import { useSettingsStore } from "@/hooks/stores";
import notifications from "../notifications"; import notifications from "../notifications";
import { SelectMenuBasic } from "../components/SelectMenuBasic"; import { SelectMenuBasic } from "../components/SelectMenuBasic";
import Fieldset from "../components/Fieldset";
import { SettingsItem } from "./devices.$id.settings"; import { SettingsItem } from "./devices.$id.settings";
const defaultEdid = const defaultEdid =
@ -45,6 +46,7 @@ export default function SettingsVideoRoute() {
const [streamQuality, setStreamQuality] = useState("1"); const [streamQuality, setStreamQuality] = useState("1");
const [customEdidValue, setCustomEdidValue] = useState<string | null>(null); const [customEdidValue, setCustomEdidValue] = useState<string | null>(null);
const [edid, setEdid] = useState<string | null>(null); const [edid, setEdid] = useState<string | null>(null);
const [edidLoading, setEdidLoading] = useState(false);
// Video enhancement settings from store // Video enhancement settings from store
const videoSaturation = useSettingsStore(state => state.videoSaturation); const videoSaturation = useSettingsStore(state => state.videoSaturation);
@ -55,12 +57,14 @@ export default function SettingsVideoRoute() {
const setVideoContrast = useSettingsStore(state => state.setVideoContrast); const setVideoContrast = useSettingsStore(state => state.setVideoContrast);
useEffect(() => { useEffect(() => {
setEdidLoading(true);
send("getStreamQualityFactor", {}, resp => { send("getStreamQualityFactor", {}, resp => {
if ("error" in resp) return; if ("error" in resp) return;
setStreamQuality(String(resp.result)); setStreamQuality(String(resp.result));
}); });
send("getEDID", {}, resp => { send("getEDID", {}, resp => {
setEdidLoading(false);
if ("error" in resp) { if ("error" in resp) {
notifications.error(`Failed to get EDID: ${resp.error.data || "Unknown error"}`); notifications.error(`Failed to get EDID: ${resp.error.data || "Unknown error"}`);
return; return;
@ -99,7 +103,9 @@ export default function SettingsVideoRoute() {
}; };
const handleEDIDChange = (newEdid: string) => { const handleEDIDChange = (newEdid: string) => {
setEdidLoading(true);
send("setEDID", { edid: newEdid }, resp => { send("setEDID", { edid: newEdid }, resp => {
setEdidLoading(false);
if ("error" in resp) { if ("error" in resp) {
notifications.error(`Failed to set EDID: ${resp.error.data || "Unknown error"}`); notifications.error(`Failed to set EDID: ${resp.error.data || "Unknown error"}`);
return; return;
@ -202,9 +208,11 @@ export default function SettingsVideoRoute() {
</div> </div>
</div> </div>
<Fieldset disabled={edidLoading}>
<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 <SelectMenuBasic
size="SM" size="SM"
@ -255,6 +263,7 @@ export default function SettingsVideoRoute() {
</div> </div>
</> </>
)} )}
</Fieldset>
</div> </div>
</div> </div>
</div> </div>