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

[Fix/Update] FIx OSC availability handling and integrate into UI components.

Browse Source
This commit is contained in:
Sakamoto Shiina
2025-11-18 07:22:20 +09:00
parent d22c6c8f0c
commit fbbc1a8d45
8 changed files with 71 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src-ui/logics/common/index.js
View File

@@ -12,5 +12,6 @@ export { useUpdateSoftware } from "./useUpdateSoftware";
export { useVolume } from "./useVolume";
export { useHandleNetworkConnection } from "./useHandleNetworkConnection";
export { useHandleOscQuery } from "./useHandleOscQuery";
export { useIsOscAvailable } from "./useIsOscAvailable";
export { useIsVrctAvailable } from "./useIsVrctAvailable";
export { useFetch } from "./useFetch";

47
src-ui/logics/common/useHandleOscQuery.js
View File

@@ -1,45 +1,36 @@
import { useI18n } from "@useI18n";
import { useNotificationStatus } from "@logics_common";
import { useOthers } from "@logics_configs";
import {
useNotificationStatus,
useIsOscAvailable,
} from "@logics_common";
export const useHandleOscQuery = () => {
const { t } = useI18n();
const { showNotification_Warning } = useNotificationStatus();
const { updateEnableVrcMicMuteSync } = useOthers();
const { updateIsOscAvailable } = useIsOscAvailable();
const handleOscQuery = (payload) => {
const is_osc_query_enabled = payload.data;
const disabled_functions = payload.disabled_functions;
// OSC無効になるのは、OSC IP Addressが127.0.0.1、localhost以外の場合で発生。
if (is_osc_query_enabled) {
updateEnableVrcMicMuteSync(prev => ({
...prev.data,
is_available: true,
}));
return;
}
updateIsOscAvailable(true);
if (!disabled_functions.length) {
updateEnableVrcMicMuteSync(prev => ({
...prev.data,
is_available: false,
}));
return;
}
} else { // OSC自体は無効だが、無効になった機能がない場合。
updateIsOscAvailable(false);
const items_label = disabled_functions
.filter(fn => fn === "vrc_mic_mute_sync")
.map(() => `- ${t("config_page.others.vrc_mic_mute_sync.label")}`)
.join("\n");
if (disabled_functions.length > 0) { // 無効になった機能がある場合は通知。
const items_label = disabled_functions
.filter(fn => fn === "vrc_mic_mute_sync")
.map(() => `- ${t("config_page.others.vrc_mic_mute_sync.label")}`)
.join("\n");
updateEnableVrcMicMuteSync({
is_enabled: false,
is_available: false,
});
if (items_label) {
const message = `${t("common_warning.unable_to_use_osc_query")}\n${items_label}`;
showNotification_Warning(message, { hide_duration: 10000 });
if (items_label) {
const message = `${t("common_warning.unable_to_use_osc_query")}\n${items_label}`;
showNotification_Warning(message, { hide_duration: 10000 });
}
}
}
};

10
src-ui/logics/common/useIsOscAvailable.js Normal file
View File

@@ -0,0 +1,10 @@
import { useStore_IsOscAvailable } from "@store";
export const useIsOscAvailable = () => {
const { currentIsOscAvailable, updateIsOscAvailable } = useStore_IsOscAvailable();
return {
currentIsOscAvailable,
updateIsOscAvailable,
};
};

1
src-ui/logics/store.js
View File

@@ -146,6 +146,7 @@ export const registerMany = (settingsArray = []) => {
// Common
export const { atomInstance: Atom_IsBackendReady, useHook: useStore_IsBackendReady } = createAtomWithHook(false, "IsBackendReady");
export const { atomInstance: Atom_IsVrctAvailable, useHook: useStore_IsVrctAvailable } = createAtomWithHook(true, "IsVrctAvailable");
export const { atomInstance: Atom_IsOscAvailable, useHook: useStore_IsOscAvailable } = createAtomWithHook(true, "IsOscAvailable");
export const { atomInstance: Atom_ComputeMode, useHook: useStore_ComputeMode } = createAtomWithHook("", "ComputeMode");
export const { atomInstance: Atom_IsOpenedConfigPage, useHook: useStore_IsOpenedConfigPage } = createAtomWithHook(false, "IsOpenedConfigPage");
export const { atomInstance: Atom_MainFunctionsStateMemory, useHook: useStore_MainFunctionsStateMemory } = createAtomWithHook({

16
src-ui/views/app/config_page/setting_section/setting_box/others/Others.jsx
View File

@@ -1,7 +1,11 @@
import { useI18n } from "@useI18n";
import styles from "./Others.module.scss";
import { useOpenFolder } from "@logics_common";
import {
useOpenFolder,
useIsOscAvailable,
} from "@logics_common";
import {
useOthers,
} from "@logics_configs";
@@ -104,18 +108,14 @@ const AutoExportMessageLogsContainer = () => {
export const VrcMicMuteSyncContainer = () => {
const { t } = useI18n();
const { currentEnableVrcMicMuteSync, toggleEnableVrcMicMuteSync } = useOthers();
const variable = {
state: currentEnableVrcMicMuteSync.state,
data: currentEnableVrcMicMuteSync.data.is_enabled,
};
const { currentIsOscAvailable } = useIsOscAvailable();
return (
<CheckboxContainer
label={t("config_page.others.vrc_mic_mute_sync.label")}
desc={t("config_page.others.vrc_mic_mute_sync.desc")}
variable={variable}
is_available={currentEnableVrcMicMuteSync.data.is_available}
variable={currentEnableVrcMicMuteSync}
is_available={currentIsOscAvailable.data}
toggleFunction={toggleEnableVrcMicMuteSync}
/>
);

10
src-ui/views/app/main_page/main_section/top_bar/right_side_components/RightSideComponents.jsx
View File

@@ -4,7 +4,11 @@ import RefreshSvg from "@images/refresh.svg?react";
import HelpSvg from "@images/help.svg?react";
import { useStore_OpenedQuickSetting } from "@store";
import { useSoftwareVersion } from "@logics_common";
import {
useSoftwareVersion,
useIsOscAvailable,
} from "@logics_common";
import { useVr, useOthers } from "@logics_configs";
import { OpenQuickSettingButton } from "./_buttons/OpenQuickSettingButton";
@@ -70,6 +74,7 @@ const PluginsQuickSetting = () => {
const OpenVrcMicMuteSyncQuickSetting = () => {
const { t } = useI18n();
const { updateOpenedQuickSetting } = useStore_OpenedQuickSetting();
const { currentIsOscAvailable } = useIsOscAvailable();
const { currentEnableVrcMicMuteSync } = useOthers();
const onClickFunction = () => {
@@ -79,7 +84,8 @@ const OpenVrcMicMuteSyncQuickSetting = () => {
return (
<OpenQuickSettingButton
label={t("config_page.others.vrc_mic_mute_sync.label")}
variable={currentEnableVrcMicMuteSync.data.is_enabled}
variable={currentEnableVrcMicMuteSync.data}
is_available={currentIsOscAvailable.data}
onClickFunction={onClickFunction}
/>
);

14
src-ui/views/app/main_page/main_section/top_bar/right_side_components/_buttons/OpenQuickSettingButton.jsx
View File

@@ -1,21 +1,31 @@
import { useI18n } from "@useI18n";
import clsx from "clsx";
import styles from "./OpenQuickSettingButton.module.scss";
import WarningSvg from "@images/warning.svg?react";
export const OpenQuickSettingButton = (props) => {
const { t } = useI18n();
const variable = (typeof props.variable === "boolean") ? props.variable : null;
const is_available = (typeof props.is_available === "boolean") ? props.is_available : true;
const getIndicatorLabelClassName = (base_classnames = []) => {
return clsx(...base_classnames, is_available && styles.is_available);
};
return (
<div className={styles.container}>
<div className={styles.button_wrapper} onClick={props.onClickFunction}>
<p className={styles.button_label}>{props.label}</p>
{variable !== null && (
props.variable === true ? (
<p className={clsx(styles.button_indicator_label, styles.enabled)}>
<p className={getIndicatorLabelClassName([styles.button_indicator_label, styles.is_enabled])}>
{t("main_page.state_text_enabled")}
{is_available === false && (
<WarningSvg className={styles.warning_svg} />
)}
</p>
) : (
<p className={clsx(styles.button_indicator_label, styles.disabled)}>
<p className={getIndicatorLabelClassName([styles.button_indicator_label, styles.is_disabled])}>
{t("main_page.state_text_disabled")}
</p>
)

14
src-ui/views/app/main_page/main_section/top_bar/right_side_components/_buttons/OpenQuickSettingButton.module.scss
View File

@@ -26,10 +26,20 @@
.button_indicator_label {
font-size: 1rem;
&.disabled {
&.is_disabled {
color: var(--dark_600_color);
}
&.enabled {
&.is_enabled {
color: var(--primary_300_color);
&:not(.is_available) {
color: var(--warning_color);
}
}
}
.warning_svg {
margin-left: 0.4rem;
padding-bottom: 0.1rem;
width: 1.1rem;
color: var(--warning_color);
}