every_holiday/VRCT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[bugfix] Config Page: AdvancedSettings: Add save button to Entry components.

Browse Source 
Add error handlings.
This commit is contained in:
Sakamoto Shiina
2025-03-21 17:38:15 +09:00
parent cbd8a77eb6
commit b8ade54e85
11 changed files with 153 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src-ui/app/config_page/setting_section/setting_box/_components/_atoms/_entry/_Entry.jsx
View File

@@ -24,7 +24,7 @@ const _Entry = forwardRef((props, ref) => {
<div className={styles.entry_container}>
<div
className={input_wrapper_class_names}
style={{width: props.width }}
style={{width: props.width || "20rem" }}
>
<input
ref={inputRef}

32
src-ui/app/config_page/setting_section/setting_box/_components/entry_with_save_button/EntryWithSaveButton.jsx Normal file
View File

@@ -0,0 +1,32 @@
import styles from "./EntryWithSaveButton.module.scss";
import { _Entry } from "../_atoms/_entry/_Entry";
import CircularProgress from "@mui/material/CircularProgress";
import { useTranslation } from "react-i18next";
import { clsx } from "clsx";
export const EntryWithSaveButton = (props) => {
const { t } = useTranslation();
const onChangeFunction = (e) => {
props.onChangeFunction?.(e.target.value);
};
const saveFunction = () => {
props.saveFunction();
};
const is_disabled = props.state === "pending";
const save_button_class_names = clsx(styles.save_button, {
[styles.is_disabled]: is_disabled
});
return (
<div className={styles.container}>
<_Entry width={props.width} onChange={onChangeFunction} ui_variable={props.variable} is_disabled={is_disabled}/>
<button className={save_button_class_names} onClick={saveFunction}>
{is_disabled
? <CircularProgress size="1.4rem" sx={{ color: "var(--dark_basic_text_color)" }}/>
: <p className={styles.save_button_label}>{t("config_page.translation.deepl_auth_key.save")}</p>
}
</button>
</div>
);
};

30
src-ui/app/config_page/setting_section/setting_box/_components/entry_with_save_button/EntryWithSaveButton.module.scss Normal file
View File

@@ -0,0 +1,30 @@
.container {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
flex-shrink: 0;
}
.save_button {
padding: 0.8rem 1.2rem;
background-color: var(--primary_600_color);
border-radius: 0.4rem;
text-align: center;
flex-shrink: 0;
min-width: 5.4rem;
&:hover {
background-color: var(--primary_500_color);
}
&:active {
background-color: var(--primary_700_color);
}
&.is_disabled {
pointer-events: none;
background-color: var(--primary_800_color);
}
}
.save_button_label {
font-size: 1.4rem;
}

1
src-ui/app/config_page/setting_section/setting_box/_components/index.js
View File

@@ -3,6 +3,7 @@ export { ComputeDevice } from "./compute_device/ComputeDevice";
export { DeeplAuthKey, OpenWebpage_DeeplAuthKey } from "./deepl_auth_key/DeeplAuthKey";
export { DropdownMenu } from "./dropdown_menu/DropdownMenu";
export { Entry } from "./entry/Entry";
export { EntryWithSaveButton } from "./entry_with_save_button/EntryWithSaveButton";
export { HotkeysEntry } from "./hotkeys_entry/HotkeysEntry";
export { LabelComponent } from "./label_component/LabelComponent";
export { RadioButton } from "./radio_button/RadioButton";

4
src-ui/app/config_page/setting_section/setting_box/_templates/Templates.jsx
View File

@@ -8,6 +8,7 @@ import {
Slider,
SwitchBox,
Entry,
EntryWithSaveButton,
HotkeysEntry,
RadioButton,
OpenWebpage_DeeplAuthKey,
@@ -75,6 +76,9 @@ export const SwitchBoxContainer = (props) => (
export const EntryContainer = (props) => (
<CommonContainer Component={Entry} {...props} add_break_point={false} />
);
export const EntryWithSaveButtonContainer = (props) => (
<CommonContainer Component={EntryWithSaveButton} {...props} add_break_point={false} />
);
export const HotkeysEntryContainer = (props) => (
<CommonContainer Component={HotkeysEntry} {...props} />

57
src-ui/app/config_page/setting_section/setting_box/advanced_settings/AdvancedSettings.jsx
View File

@@ -11,6 +11,7 @@ import {
import {
ActionButtonContainer,
EntryContainer,
EntryWithSaveButtonContainer,
} from "../_templates/Templates";
@@ -30,54 +31,58 @@ export const AdvancedSettings = () => {
const OscIpAddressContainer = () => {
const { t } = useTranslation();
const [ui_variable, setUiVariable] = useState("");
const { currentOscIpAddress, setOscIpAddress } = useOscIpAddress();
const onChangeFunction = (e) => {
const value = e.currentTarget.value;
if (value === "") {
setUiVariable("");
} else {
setUiVariable(value);
setOscIpAddress(value);
}
const [input_value, seInputValue] = useState(currentOscIpAddress.data);
const onChangeFunction = (value) => {
seInputValue(value);
};
const saveFunction = () => {
setOscIpAddress(input_value);
};
useEffect(()=> {
setUiVariable(currentOscIpAddress.data);
seInputValue(currentOscIpAddress.data);
}, [currentOscIpAddress]);
return (
<EntryContainer
<EntryWithSaveButtonContainer
label={t("config_page.advanced_settings.osc_ip_address.label")}
ui_variable={ui_variable}
onChange={onChangeFunction}
variable={input_value}
saveFunction={saveFunction}
onChangeFunction={onChangeFunction}
state={currentOscIpAddress.state}
width="14rem"
/>
);
};
const OscPortContainer = () => {
const { t } = useTranslation();
const [ui_variable, setUiVariable] = useState("");
const { currentOscPort, setOscPort } = useOscPort();
const onChangeFunction = (e) => {
const value = e.currentTarget.value;
if (value === "") {
setUiVariable("");
} else {
setUiVariable(value);
setOscPort(value);
}
const [input_value, seInputValue] = useState(currentOscPort.data);
const onChangeFunction = (value) => {
seInputValue(value);
};
const saveFunction = () => {
setOscPort(input_value);
};
useEffect(()=> {
setUiVariable(currentOscPort.data);
seInputValue(currentOscPort.data);
}, [currentOscPort]);
return (
<EntryContainer
<EntryWithSaveButtonContainer
label={t("config_page.advanced_settings.osc_port.label")}
ui_variable={ui_variable}
onChange={onChangeFunction}
variable={input_value}
saveFunction={saveFunction}
onChangeFunction={onChangeFunction}
state={currentOscPort.state}
width="10rem"
/>
);
};

20
src-ui/logics/_useBackendErrorHandling.js
View File

@@ -14,6 +14,10 @@ import {
useSpeakerMaxWords,
useDeepLAuthKey,
useOscIpAddress,
useOscPort,
} from "@logics_configs";
import { ui_configs } from "../ui_configs";
@@ -29,9 +33,13 @@ export const _useBackendErrorHandling = () => {
const { updateSpeakerPhraseTimeout } = useSpeakerPhraseTimeout();
const { updateSpeakerMaxWords } = useSpeakerMaxWords();
const { updateDeepLAuthKey } = useDeepLAuthKey();
const { updateDeepLAuthKey, saveErrorDeepLAuthKey } = useDeepLAuthKey();
const errorHandling_Backend = ({message, data, endpoint}) => {
const { saveErrorOscIpAddress } = useOscIpAddress();
const { saveErrorOscPort } = useOscPort();
const errorHandling_Backend = ({message, data, endpoint, _result}) => {
switch (message) {
case "No mic device detected":
showNotification_Error(t("common_error.no_device_mic"));
@@ -111,8 +119,12 @@ export const _useBackendErrorHandling = () => {
break;
default:
if (endpoint === "/set/data/deepl_auth_key") updateDeepLAuthKey(data);
showNotification_Error(message);
// determine by endpoint, not message.
if (endpoint === "/set/data/deepl_auth_key") saveErrorDeepLAuthKey({message, data, endpoint, _result});
if (endpoint === "/set/data/osc_ip_address") saveErrorOscIpAddress({message, data, endpoint, _result});
if (endpoint === "/set/data/osc_port") saveErrorOscPort({message, data, endpoint, _result});
break;
}

9
src-ui/logics/configs/advanced_settings/useOscIpAddress.js
View File

@@ -1,7 +1,9 @@
import { useStore_OscIpAddress } from "@store";
import { useStdoutToPython } from "@logics/useStdoutToPython";
import { useNotificationStatus } from "@logics_common";
export const useOscIpAddress = () => {
const { showNotification_Error } = useNotificationStatus();
const { asyncStdoutToPython } = useStdoutToPython();
const { currentOscIpAddress, updateOscIpAddress, pendingOscIpAddress } = useStore_OscIpAddress();
@@ -15,10 +17,17 @@ export const useOscIpAddress = () => {
asyncStdoutToPython("/set/data/osc_ip_address", osc_ip_address);
};
const saveErrorOscIpAddress = ({data, message, _result}) => {
updateOscIpAddress(d => d.data);
showNotification_Error(_result);
};
return {
currentOscIpAddress,
getOscIpAddress,
updateOscIpAddress,
setOscIpAddress,
saveErrorOscIpAddress,
};
};

9
src-ui/logics/configs/advanced_settings/useOscPort.js
View File

@@ -1,7 +1,9 @@
import { useStore_OscPort } from "@store";
import { useStdoutToPython } from "@logics/useStdoutToPython";
import { useNotificationStatus } from "@logics_common";
export const useOscPort = () => {
const { showNotification_Error } = useNotificationStatus();
const { asyncStdoutToPython } = useStdoutToPython();
const { currentOscPort, updateOscPort, pendingOscPort } = useStore_OscPort();
@@ -15,10 +17,17 @@ export const useOscPort = () => {
asyncStdoutToPython("/set/data/osc_port", osc_port);
};
const saveErrorOscPort = ({data, message, _result}) => {
updateOscPort(d => d.data);
showNotification_Error(_result);
};
return {
currentOscPort,
getOscPort,
updateOscPort,
setOscPort,
saveErrorOscPort,
};
};

18
src-ui/logics/configs/translation/useDeepLAuthKey.js
View File

@@ -18,22 +18,30 @@ export const useDeepLAuthKey = () => {
pendingDeepLAuthKey();
asyncStdoutToPython("/set/data/deepl_auth_key", selected_deepl_auth_key);
};
const saveSuccessDeepLAuthKey = (saved_deepl_auth_key) => {
updateDeepLAuthKey(saved_deepl_auth_key);
showNotification_Success(t("config_page.translation.deepl_auth_key.auth_key_success"));
};
const deleteDeepLAuthKey = () => {
pendingDeepLAuthKey();
asyncStdoutToPython("/delete/data/deepl_auth_key");
};
const savedDeepLAuthKey = (data) => {
updateDeepLAuthKey(data);
showNotification_Success(t("config_page.translation.deepl_auth_key.auth_key_success"));
};
const saveErrorDeepLAuthKey = ({data, message}) => {
updateDeepLAuthKey(data);
showNotification_Error(message);
};
return {
currentDeepLAuthKey,
getDeepLAuthKey,
updateDeepLAuthKey,
setDeepLAuthKey,
saveSuccessDeepLAuthKey,
deleteDeepLAuthKey,
saveErrorDeepLAuthKey,
savedDeepLAuthKey,
};
};

9
src-ui/logics/useReceiveRoutes.js
View File

@@ -148,7 +148,7 @@ export const useReceiveRoutes = () => {
const { updateSpeakerPhraseTimeout } = useSpeakerPhraseTimeout();
const { updateSpeakerMaxWords } = useSpeakerMaxWords();
const { updateDeepLAuthKey, saveSuccessDeepLAuthKey } = useDeepLAuthKey();
const { updateDeepLAuthKey, savedDeepLAuthKey } = useDeepLAuthKey();
const { updateSelectedCTranslate2WeightType } = useSelectedCTranslate2WeightType();
const {
updateDownloadedCTranslate2WeightTypeStatus,
@@ -352,7 +352,7 @@ export const useReceiveRoutes = () => {
// Translation
"/get/data/deepl_auth_key": updateDeepLAuthKey,
"/set/data/deepl_auth_key": saveSuccessDeepLAuthKey,
"/set/data/deepl_auth_key": savedDeepLAuthKey,
"/delete/data/deepl_auth_key": () => updateDeepLAuthKey(""),
"/get/data/ctranslate2_weight_type": updateSelectedCTranslate2WeightType,
@@ -523,6 +523,9 @@ export const useReceiveRoutes = () => {
"/set/data/speaker_record_timeout": errorHandling_Backend,
"/set/data/speaker_phrase_timeout": errorHandling_Backend,
"/set/data/speaker_max_phrases": errorHandling_Backend,
"/set/data/osc_ip_address": errorHandling_Backend,
"/set/data/osc_port": errorHandling_Backend,
};
@@ -555,12 +558,14 @@ export const useReceiveRoutes = () => {
break;
case 400:
case 500:
const error_route = error_status_routes[parsed_data.endpoint];
if (error_route) {
error_route({
message: parsed_data.result.message,
data: parsed_data.result.data,
endpoint: parsed_data.endpoint,
_result: parsed_data.result,
});
} else {
handleInvalidEndpoint(parsed_data);