diff --git a/src-ui/logics/common/index.js b/src-ui/logics/common/index.js index c03d13eb..7cac177c 100644 --- a/src-ui/logics/common/index.js +++ b/src-ui/logics/common/index.js @@ -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"; \ No newline at end of file diff --git a/src-ui/logics/common/useHandleOscQuery.js b/src-ui/logics/common/useHandleOscQuery.js index f952aaac..45b03b96 100644 --- a/src-ui/logics/common/useHandleOscQuery.js +++ b/src-ui/logics/common/useHandleOscQuery.js @@ -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 }); + } + } } }; diff --git a/src-ui/logics/common/useIsOscAvailable.js b/src-ui/logics/common/useIsOscAvailable.js new file mode 100644 index 00000000..ffbb96c9 --- /dev/null +++ b/src-ui/logics/common/useIsOscAvailable.js @@ -0,0 +1,10 @@ +import { useStore_IsOscAvailable } from "@store"; + +export const useIsOscAvailable = () => { + const { currentIsOscAvailable, updateIsOscAvailable } = useStore_IsOscAvailable(); + + return { + currentIsOscAvailable, + updateIsOscAvailable, + }; +}; \ No newline at end of file diff --git a/src-ui/logics/store.js b/src-ui/logics/store.js index 74e8f6da..8f332a6e 100644 --- a/src-ui/logics/store.js +++ b/src-ui/logics/store.js @@ -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({ diff --git a/src-ui/views/app/config_page/setting_section/setting_box/others/Others.jsx b/src-ui/views/app/config_page/setting_section/setting_box/others/Others.jsx index 3b32746a..a70a2300 100644 --- a/src-ui/views/app/config_page/setting_section/setting_box/others/Others.jsx +++ b/src-ui/views/app/config_page/setting_section/setting_box/others/Others.jsx @@ -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 ( ); diff --git a/src-ui/views/app/main_page/main_section/top_bar/right_side_components/RightSideComponents.jsx b/src-ui/views/app/main_page/main_section/top_bar/right_side_components/RightSideComponents.jsx index 6c1ff7d3..d76616e0 100644 --- a/src-ui/views/app/main_page/main_section/top_bar/right_side_components/RightSideComponents.jsx +++ b/src-ui/views/app/main_page/main_section/top_bar/right_side_components/RightSideComponents.jsx @@ -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 ( ); diff --git a/src-ui/views/app/main_page/main_section/top_bar/right_side_components/_buttons/OpenQuickSettingButton.jsx b/src-ui/views/app/main_page/main_section/top_bar/right_side_components/_buttons/OpenQuickSettingButton.jsx index c24f40f4..c2d84773 100644 --- a/src-ui/views/app/main_page/main_section/top_bar/right_side_components/_buttons/OpenQuickSettingButton.jsx +++ b/src-ui/views/app/main_page/main_section/top_bar/right_side_components/_buttons/OpenQuickSettingButton.jsx @@ -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 (

{props.label}

{variable !== null && ( props.variable === true ? ( -

+

{t("main_page.state_text_enabled")} + {is_available === false && ( + + )}

) : ( -

+

{t("main_page.state_text_disabled")}

) diff --git a/src-ui/views/app/main_page/main_section/top_bar/right_side_components/_buttons/OpenQuickSettingButton.module.scss b/src-ui/views/app/main_page/main_section/top_bar/right_side_components/_buttons/OpenQuickSettingButton.module.scss index d46cbee0..92f741bb 100644 --- a/src-ui/views/app/main_page/main_section/top_bar/right_side_components/_buttons/OpenQuickSettingButton.module.scss +++ b/src-ui/views/app/main_page/main_section/top_bar/right_side_components/_buttons/OpenQuickSettingButton.module.scss @@ -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); } \ No newline at end of file