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

Merge branch 'ui' into for_webui

Browse Source
This commit is contained in:
Sakamoto Shiina
2024-09-24 13:52:11 +09:00
parent 69fb7e994e f0685e206f
commit 1266c94c5f
20 changed files with 155 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src-ui/app/App.jsx
View File

@@ -31,6 +31,7 @@ import { useEnableAutoClearMessageBox } from "@logics_configs/useEnableAutoClear
import { useSendMessageButtonType } from "@logics_configs/useSendMessageButtonType";
import { useUiLanguage } from "@logics_configs/useUiLanguage";
import { useIsMainPageCompactMode } from "@logics_main/useIsMainPageCompactMode";
import { useLanguageSettings } from "@logics_main/useLanguageSettings";
import { useSelectableLanguageList } from "@logics_main/useSelectableLanguageList";
@@ -39,6 +40,7 @@ const StartPythonFacadeComponent = () => {
const hasRunRef = useRef(false);
const main_page = getCurrent();
const { getIsMainPageCompactMode } = useIsMainPageCompactMode();
const { getSoftwareVersion } = useSoftwareVersion();
const { getEnableAutoMicSelect } = useEnableAutoMicSelect();
const { getEnableAutoSpeakerSelect } = useEnableAutoSpeakerSelect();
@@ -67,6 +69,7 @@ const StartPythonFacadeComponent = () => {
if (!hasRunRef.current) {
asyncStartPython().then((result) => {
getUiLanguage();
getIsMainPageCompactMode();
getSoftwareVersion();
@@ -108,7 +111,7 @@ const UiLanguageController = () => {
useEffect(() => {
i18n.changeLanguage(currentUiLanguage.data);
}, [currentUiLanguage]);
}, [currentUiLanguage.data]);
return null;
};

2
src-ui/app/config_page/setting_section/setting_box/components/dropdown_menu/DropdownMenu.jsx
View File

@@ -29,7 +29,7 @@ export const DropdownMenu = (props) => {
});
const dropdown_toggle_button_class_name = clsx(styles["dropdown_toggle_button"], {
[styles.is_loading]: (props.state === "pending") ? true : false,
[styles.is_pending]: (props.state === "pending") ? true : false,
[styles.is_disabled]: props.is_disabled,
});

2
src-ui/app/config_page/setting_section/setting_box/components/dropdown_menu/DropdownMenu.module.scss
View File

@@ -17,7 +17,7 @@
&:active {
background-color: var(--dark_975_color);
}
&.is_loading {
&.is_pending {
pointer-events: none;
}
&.is_disabled {

6
src-ui/app/config_page/setting_section/setting_box/components/switchbox/Switchbox.jsx
View File

@@ -6,11 +6,11 @@ export const Switchbox = (props) => {
const [is_hovered, setIsHovered] = useState(false);
const [is_mouse_down, setIsMouseDown] = useState(false);
const is_loading = (props.variable.state === "pending");
const is_pending = (props.variable.state === "pending");
const getClassNames = (base_class) => clsx(base_class, {
[styles.is_active]: (props.variable.data === true),
[styles.is_loading]: is_loading,
[styles.is_pending]: is_pending,
[styles.is_hovered]: is_hovered,
[styles.is_mouse_down]: is_mouse_down,
});
@@ -36,7 +36,7 @@ export const Switchbox = (props) => {
>
<div className={getClassNames(styles.toggle_control)}>
<span className={getClassNames(styles.control)}></span>
{is_loading && <span className={styles.loader}></span>}
{is_pending && <span className={styles.loader}></span>}
</div>
</div>
</div>

2
src-ui/app/config_page/setting_section/setting_box/components/switchbox/Switchbox.module.scss
View File

@@ -16,7 +16,7 @@
padding: 2rem;
height: 100%;
flex-shrink: 0;
&.is_loading {
&.is_pending {
pointer-events: none;
}
}

2
src-ui/app/config_page/setting_section/setting_box/components/threshold_component/volume_check_button/VolumeCheckButton.jsx
View File

@@ -5,7 +5,7 @@ import clsx from "clsx";
export const VolumeCheckButton = React.memo((props) => {
const getClassNames = (baseClass) => clsx(baseClass, {
[styles.is_active]: (props.isChecking?.data === true),
[styles.is_loading]: (props.isChecking.state === "pending"),
[styles.is_pending]: (props.isChecking.state === "pending"),
});
const toggleFunction = () => {

2
src-ui/app/config_page/setting_section/setting_box/components/threshold_component/volume_check_button/VolumeCheckButton.module.scss
View File

@@ -17,7 +17,7 @@
background-color: var(--primary_550_color);
}
}
&.is_loading {
&.is_pending {
background-color: var(--dark_850_color);
pointer-events: none;
.button_svg, .button_text {

26
src-ui/app/main_page/main_section/MainSection.jsx
View File

@@ -20,7 +20,7 @@ export const MainSection = () => {
import { useLanguageSettings } from "@logics_main/useLanguageSettings";
const HandleLanguageSelector = () => {
const { currentIsOpenedLanguageSelector } = useStore_IsOpenedLanguageSelector();
const { currentIsOpenedLanguageSelector, updateIsOpenedLanguageSelector } = useStore_IsOpenedLanguageSelector();
const {
currentSelectedYourLanguages,
setSelectedYourLanguages,
@@ -29,11 +29,27 @@ const HandleLanguageSelector = () => {
} = useLanguageSettings();
if (currentIsOpenedLanguageSelector.data.your_language === true) {
const onclickFunction_YourLanguage = (payload) => setSelectedYourLanguages(payload);
return <LanguageSelector id="your_language" onClickFunction={onclickFunction_YourLanguage}/>;
const onclickFunction_YourLanguage = (payload) => {
updateIsOpenedLanguageSelector({ your_language: false, target_language: false });
setSelectedYourLanguages(payload);
};
return (
<LanguageSelector
id="your_language"
onClickFunction={onclickFunction_YourLanguage}
/>
);
} else if (currentIsOpenedLanguageSelector.data.target_language === true) {
const onclickFunction_TargetLanguage = (payload) => setSelectedTargetLanguages(payload);
return <LanguageSelector id="target_language" onClickFunction={onclickFunction_TargetLanguage}/>;
const onclickFunction_TargetLanguage = (payload) => {
updateIsOpenedLanguageSelector({ your_language: false, target_language: false });
setSelectedTargetLanguages(payload);
};
return (
<LanguageSelector
id="target_language"
onClickFunction={onclickFunction_TargetLanguage}
/>
);
} else {
return null;
}

2
src-ui/app/main_page/main_section/message_container/log_box/message_container/MessageContainer.module.scss
View File

@@ -62,9 +62,11 @@
.message_main {
color: var(--dark_basic_text_color);
font-size: 1.4rem;
user-select: text;
}
.message_second {
color: var(--dark_450_color);
font-size: 1rem;
user-select: text;
}

10
src-ui/app/main_page/main_section/top_bar/sidebar_compact_mode_button/SidebarCompactModeButton.jsx
View File

@@ -1,22 +1,18 @@
import clsx from "clsx";
import styles from "./SidebarCompactModeButton.module.scss";
import { useStore_IsMainPageCompactMode } from "@store";
import { useIsMainPageCompactMode } from "@logics_main/useIsMainPageCompactMode";
import ArrowLeftSvg from "@images/arrow_left.svg?react";
export const SidebarCompactModeButton = () => {
const { updateIsMainPageCompactMode, currentIsMainPageCompactMode } = useStore_IsMainPageCompactMode();
const toggleCompactMode = () => {
updateIsMainPageCompactMode(!currentIsMainPageCompactMode.data);
};
const { toggleIsMainPageCompactMode, currentIsMainPageCompactMode } = useIsMainPageCompactMode();
const class_names = clsx(styles["arrow_left_svg"], {
[styles["reverse"]]: currentIsMainPageCompactMode.data
});
return (
<div className={styles.container} onClick={toggleCompactMode}>
<div className={styles.container} onClick={toggleIsMainPageCompactMode}>
<ArrowLeftSvg className={class_names} preserveAspectRatio="none" />
</div>
);

5
src-ui/app/main_page/sidebar_section/SidebarSection.jsx
View File

@@ -1,7 +1,8 @@
import clsx from "clsx";
import styles from "./SidebarSection.module.scss";
import { useStore_IsMainPageCompactMode, useStore_IsOpenedLanguageSelector } from "@store";
import { useStore_IsOpenedLanguageSelector } from "@store";
import { useIsMainPageCompactMode } from "@logics_main/useIsMainPageCompactMode";
import { Logo } from "./logo/Logo";
import { MainFunctionSwitch } from "./main_function_switch/MainFunctionSwitch";
@@ -9,7 +10,7 @@ import { LanguageSettings } from "./language_settings/LanguageSettings";
import { OpenSettings } from "./open_settings/OpenSettings";
export const SidebarSection = () => {
const { currentIsMainPageCompactMode } = useStore_IsMainPageCompactMode();
const { currentIsMainPageCompactMode } = useIsMainPageCompactMode();
const container_class_name = clsx(styles.container, {
[styles.is_compact_mode]: currentIsMainPageCompactMode.data
});

3
src-ui/app/main_page/sidebar_section/language_settings/language_swap_button/LanguageSwapButton.jsx
View File

@@ -5,10 +5,12 @@ import { useTranslation } from "react-i18next";
import styles from "./LanguageSwapButton.module.scss";
import NarrowArrowDownSvg from "@images/narrow_arrow_down.svg?react";
import { useLanguageSettings } from "@logics_main/useLanguageSettings";
export const LanguageSwapButton = () => {
const [isHovered, setIsHovered] = useState(false);
const { t } = useTranslation();
const { runLanguageSwap } = useLanguageSettings();
const label = isHovered
? t("main_page.swap_button_label")
@@ -27,6 +29,7 @@ export const LanguageSwapButton = () => {
className={styles.swap_button_wrapper}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
onClick={runLanguageSwap}
>
<NarrowArrowDownSvg className={clsx(styles.narrow_arrow_down_svg, styles.reverse)} />
<p className={labelClassName}>{label}</p>

4
src-ui/app/main_page/sidebar_section/logo/Logo.jsx
View File

@@ -11,10 +11,10 @@ export const Logo = () => {
import vrct_logo from "@images/vrct_logo_for_dark_mode.png";
import chato_img from "@images/chato_white.png";
import { useStore_IsMainPageCompactMode } from "@store";
import { useIsMainPageCompactMode } from "@logics_main/useIsMainPageCompactMode";
export const LogoBox = () => {
const { currentIsMainPageCompactMode } = useStore_IsMainPageCompactMode();
const { currentIsMainPageCompactMode } = useIsMainPageCompactMode();
if (currentIsMainPageCompactMode.data === true) {
return <img src={chato_img} className={styles.logo_chato} alt="VRCT logo chato" />;
} else {

6
src-ui/app/main_page/sidebar_section/main_function_switch/MainFunctionSwitch.jsx
View File

@@ -5,7 +5,7 @@ import TranslationSvg from "@images/translation.svg?react";
import MicSvg from "@images/mic.svg?react";
import HeadphonesSvg from "@images/headphones.svg?react";
import ForegroundSvg from "@images/foreground.svg?react";
import { useStore_IsMainPageCompactMode } from "@store";
import { useIsMainPageCompactMode } from "@logics_main/useIsMainPageCompactMode";
import { useMainFunction } from "@logics_main/useMainFunction";
@@ -74,12 +74,12 @@ export const SwitchContainer = ({ switchLabel, switch_id, children, currentState
const [is_hovered, setIsHovered] = useState(false);
const [is_mouse_down, setIsMouseDown] = useState(false);
const { currentIsMainPageCompactMode } = useStore_IsMainPageCompactMode();
const { currentIsMainPageCompactMode } = useIsMainPageCompactMode();
const getClassNames = (baseClass) => clsx(baseClass, {
[styles.is_compact_mode]: currentIsMainPageCompactMode.data,
[styles.is_active]: (currentState.data === true),
[styles.is_loading]: (currentState.state === "pending"),
[styles.is_pending]: (currentState.state === "pending"),
[styles.is_hovered]: is_hovered,
[styles.is_mouse_down]: is_mouse_down,
});

12
src-ui/app/main_page/sidebar_section/main_function_switch/MainFunctionSwitch.module.scss
View File

@@ -23,7 +23,7 @@
&.is_compact_mode {
padding: 1.5rem;
}
&.is_loading {
&.is_pending {
pointer-events: none;
}
}
@@ -36,23 +36,23 @@
}
$basic_label_color: var(--dark_basic_text_color);
$loading_label_color: var(--dark_500_color);
$pending_label_color: var(--dark_500_color);
.switch_label {
font-size: 1.4rem;
color: $basic_label_color;
&.is_compact_mode {
display: none;
}
&.is_loading {
color: $loading_label_color;
&.is_pending {
color: $pending_label_color;
}
}
.switch_svg {
width: 1.8rem;
color: $basic_label_color;
&.is_loading {
color: $loading_label_color;
&.is_pending {
color: $pending_label_color;
}
&:not(.is_compact_mode) {
width: 1.6rem;

26
src-ui/logics/main/useIsMainPageCompactMode.js Normal file
View File

@@ -0,0 +1,26 @@
import { useStore_IsMainPageCompactMode } from "@store";
import { useStdoutToPython } from "@logics/useStdoutToPython";
export const useIsMainPageCompactMode = () => {
const { asyncStdoutToPython } = useStdoutToPython();
const { currentIsMainPageCompactMode, updateIsMainPageCompactMode } = useStore_IsMainPageCompactMode();
const getIsMainPageCompactMode = () => {
asyncStdoutToPython("/get/main_window_sidebar_compact_mode");
};
const toggleIsMainPageCompactMode = () => {
if (currentIsMainPageCompactMode.data) {
asyncStdoutToPython("/set/disable_main_window_sidebar_compact_mode");
} else {
asyncStdoutToPython("/set/enable_main_window_sidebar_compact_mode");
}
};
return {
currentIsMainPageCompactMode,
getIsMainPageCompactMode,
toggleIsMainPageCompactMode,
updateIsMainPageCompactMode,
};
};

8
src-ui/logics/main/useLanguageSettings.js
View File

@@ -104,6 +104,12 @@ export const useLanguageSettings = () => {
asyncStdoutToPython("/set/data/selected_translator_engines", send_obj);
};
const runLanguageSwap = () => {
pendingSelectedYourLanguages();
pendingSelectedTargetLanguages();
asyncStdoutToPython("/run/swap_your_language_and_target_language");
};
return {
currentSelectedPresetTabNumber,
@@ -134,5 +140,7 @@ export const useLanguageSettings = () => {
getSelectedTranslationEngines,
updateSelectedTranslationEngines,
setSelectedTranslationEngines,
runLanguageSwap,
};
};

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

@@ -5,8 +5,10 @@ import { useMainFunction } from "@logics_main/useMainFunction";
import { useMessage } from "@logics_common/useMessage";
import { useSelectableLanguageList } from "@logics_main/useSelectableLanguageList";
import { useLanguageSettings } from "@logics_main/useLanguageSettings";
import { useIsMainPageCompactMode } from "@logics_main/useIsMainPageCompactMode";
import { useVolume } from "@logics_common/useVolume";
import { useSoftwareVersion } from "@logics_configs/useSoftwareVersion";
import { useEnableAutoMicSelect } from "@logics_configs/useEnableAutoMicSelect";
import { useEnableAutoSpeakerSelect } from "@logics_configs/useEnableAutoSpeakerSelect";
@@ -24,6 +26,7 @@ import { useSendMessageButtonType } from "@logics_configs/useSendMessageButtonTy
import { useUiLanguage } from "@logics_configs/useUiLanguage";
export const useReceiveRoutes = () => {
const { updateIsMainPageCompactMode } = useIsMainPageCompactMode();
const {
updateTranslationStatus,
updateTranscriptionSendStatus,
@@ -66,6 +69,10 @@ export const useReceiveRoutes = () => {
const routes = {
// Main Page
// Page Controls
"/get/main_window_sidebar_compact_mode": updateIsMainPageCompactMode,
"/set/enable_main_window_sidebar_compact_mode": updateIsMainPageCompactMode,
"/set/disable_main_window_sidebar_compact_mode": updateIsMainPageCompactMode,
// Main Functions
"/set/enable/translation": updateTranslationStatus,
"/set/disable/translation": updateTranslationStatus,
@@ -97,6 +104,11 @@ export const useReceiveRoutes = () => {
"/get/data/selected_translation_engines": updateSelectedTranslationEngines,
"/set/data/selected_translator_engines": updateSelectedTranslationEngines,
"/run/swap_your_language_and_target_language": (payload) => {
updateSelectedYourLanguages(payload.your);
updateSelectedTargetLanguages(payload.target);
},
// Language Selector
"/get/data/selectable_language_list": updateSelectableLanguageList,

106
src-ui/store.js
View File

@@ -16,20 +16,20 @@ export const store = {
log_box_ref: null,
};
const generatePropertyNames = (base_ame) => ({
error: `error${base_ame}`,
pending: `pending${base_ame}`,
current: `current${base_ame}`,
update: `update${base_ame}`,
updatePart: `updatePart${base_ame}`,
async_update: `asyncUpdate${base_ame}`,
add: `add${base_ame}`,
async_add: `asyncAdd${base_ame}`,
const generatePropertyNames = (base_name) => ({
error: `error${base_name}`,
pending: `pending${base_name}`,
current: `current${base_name}`,
update: `update${base_name}`,
updatePart: `updatePart${base_name}`,
async_update: `asyncUpdate${base_name}`,
add: `add${base_name}`,
async_add: `asyncAdd${base_name}`,
});
const createAtomWithHook_WIP = (initialValue, base_ame, options) => {
const property_names = generatePropertyNames(base_ame);
const createAtomWithHook = (initialValue, base_name, options) => {
const property_names = generatePropertyNames(base_name);
const atomInstance = atom({
state: (options?.is_state_ok) ? "ok" : "pending",
data: initialValue,
@@ -99,76 +99,76 @@ const createAtomWithHook_WIP = (initialValue, base_ame, options) => {
export const { atomInstance: Atom_SoftwareVersion, useHook: useStore_SoftwareVersion } = createAtomWithHook_WIP("-", "SoftwareVersion");
export const { atomInstance: Atom_SoftwareVersion, useHook: useStore_SoftwareVersion } = createAtomWithHook("-", "SoftwareVersion");
export const { atomInstance: Atom_TranslationStatus, useHook: useStore_TranslationStatus } = createAtomWithHook_WIP(false, "TranslationStatus", {is_state_ok: true});
export const { atomInstance: Atom_TranscriptionSendStatus, useHook: useStore_TranscriptionSendStatus } = createAtomWithHook_WIP(false, "TranscriptionSendStatus", {is_state_ok: true});
export const { atomInstance: Atom_TranscriptionReceiveStatus, useHook: useStore_TranscriptionReceiveStatus } = createAtomWithHook_WIP(false, "TranscriptionReceiveStatus", {is_state_ok: true});
export const { atomInstance: Atom_ForegroundStatus, useHook: useStore_ForegroundStatus } = createAtomWithHook_WIP(false, "ForegroundStatus", {is_state_ok: true});
export const { atomInstance: Atom_TranslationStatus, useHook: useStore_TranslationStatus } = createAtomWithHook(false, "TranslationStatus", {is_state_ok: true});
export const { atomInstance: Atom_TranscriptionSendStatus, useHook: useStore_TranscriptionSendStatus } = createAtomWithHook(false, "TranscriptionSendStatus", {is_state_ok: true});
export const { atomInstance: Atom_TranscriptionReceiveStatus, useHook: useStore_TranscriptionReceiveStatus } = createAtomWithHook(false, "TranscriptionReceiveStatus", {is_state_ok: true});
export const { atomInstance: Atom_ForegroundStatus, useHook: useStore_ForegroundStatus } = createAtomWithHook(false, "ForegroundStatus", {is_state_ok: true});
export const { atomInstance: Atom_MessageLogs, useHook: useStore_MessageLogs } = createAtomWithHook_WIP(generateTestData(20), "MessageLogs");
export const { atomInstance: Atom_IsMainPageCompactMode, useHook: useStore_IsMainPageCompactMode } = createAtomWithHook_WIP(false, "IsMainPageCompactMode");
export const { atomInstance: Atom_MessageLogs, useHook: useStore_MessageLogs } = createAtomWithHook(generateTestData(20), "MessageLogs");
export const { atomInstance: Atom_IsMainPageCompactMode, useHook: useStore_IsMainPageCompactMode } = createAtomWithHook(false, "IsMainPageCompactMode");
export const { atomInstance: Atom_IsOpenedLanguageSelector, useHook: useStore_IsOpenedLanguageSelector } = createAtomWithHook_WIP(
export const { atomInstance: Atom_IsOpenedLanguageSelector, useHook: useStore_IsOpenedLanguageSelector } = createAtomWithHook(
{ your_language: false, target_language: false },
"IsOpenedLanguageSelector"
);
export const { atomInstance: Atom_SelectableLanguageList, useHook: useStore_SelectableLanguageList } = createAtomWithHook_WIP([], "SelectableLanguageList");
export const { atomInstance: Atom_SelectableLanguageList, useHook: useStore_SelectableLanguageList } = createAtomWithHook([], "SelectableLanguageList");
export const { atomInstance: Atom_SelectedPresetTabNumber, useHook: useStore_SelectedPresetTabNumber } = createAtomWithHook_WIP("", "SelectedPresetTabNumber");
export const { atomInstance: Atom_EnableMultiTranslation, useHook: useStore_EnableMultiTranslation } = createAtomWithHook_WIP(false, "EnableMultiTranslation");
export const { atomInstance: Atom_SelectedYourLanguages, useHook: useStore_SelectedYourLanguages } = createAtomWithHook_WIP({}, "SelectedYourLanguages");
export const { atomInstance: Atom_SelectedTargetLanguages, useHook: useStore_SelectedTargetLanguages } = createAtomWithHook_WIP({}, "SelectedTargetLanguages");
export const { atomInstance: Atom_SelectedPresetTabNumber, useHook: useStore_SelectedPresetTabNumber } = createAtomWithHook("", "SelectedPresetTabNumber");
export const { atomInstance: Atom_EnableMultiTranslation, useHook: useStore_EnableMultiTranslation } = createAtomWithHook(false, "EnableMultiTranslation");
export const { atomInstance: Atom_SelectedYourLanguages, useHook: useStore_SelectedYourLanguages } = createAtomWithHook({}, "SelectedYourLanguages");
export const { atomInstance: Atom_SelectedTargetLanguages, useHook: useStore_SelectedTargetLanguages } = createAtomWithHook({}, "SelectedTargetLanguages");
export const { atomInstance: Atom_TranslationEngines, useHook: useStore_TranslationEngines } = createAtomWithHook_WIP(translator_status, "TranslationEngines");
export const { atomInstance: Atom_SelectedTranslationEngines, useHook: useStore_SelectedTranslationEngines } = createAtomWithHook_WIP({}, "SelectedTranslationEngines");
export const { atomInstance: Atom_TranslationEngines, useHook: useStore_TranslationEngines } = createAtomWithHook(translator_status, "TranslationEngines");
export const { atomInstance: Atom_SelectedTranslationEngines, useHook: useStore_SelectedTranslationEngines } = createAtomWithHook({}, "SelectedTranslationEngines");
export const { atomInstance: Atom_IsOpenedConfigPage, useHook: useStore_IsOpenedConfigPage } = createAtomWithHook_WIP(false, "IsOpenedConfigPage");
export const { atomInstance: Atom_SelectedConfigTabId, useHook: useStore_SelectedConfigTabId } = createAtomWithHook_WIP("device", "SelectedConfigTabId");
export const { atomInstance: Atom_IsOpenedDropdownMenu, useHook: useStore_IsOpenedDropdownMenu } = createAtomWithHook_WIP("", "IsOpenedDropdownMenu");
export const { atomInstance: Atom_IsOpenedConfigPage, useHook: useStore_IsOpenedConfigPage } = createAtomWithHook(false, "IsOpenedConfigPage");
export const { atomInstance: Atom_SelectedConfigTabId, useHook: useStore_SelectedConfigTabId } = createAtomWithHook("device", "SelectedConfigTabId");
export const { atomInstance: Atom_IsOpenedDropdownMenu, useHook: useStore_IsOpenedDropdownMenu } = createAtomWithHook("", "IsOpenedDropdownMenu");
// Config Page
export const { atomInstance: Atom_EnableAutoMicSelect, useHook: useStore_EnableAutoMicSelect } = createAtomWithHook_WIP(true, "EnableAutoMicSelect");
export const { atomInstance: Atom_EnableAutoSpeakerSelect, useHook: useStore_EnableAutoSpeakerSelect } = createAtomWithHook_WIP(true, "EnableAutoSpeakerSelect");
export const { atomInstance: Atom_EnableAutoMicSelect, useHook: useStore_EnableAutoMicSelect } = createAtomWithHook(true, "EnableAutoMicSelect");
export const { atomInstance: Atom_EnableAutoSpeakerSelect, useHook: useStore_EnableAutoSpeakerSelect } = createAtomWithHook(true, "EnableAutoSpeakerSelect");
export const { atomInstance: Atom_MicHostList, useHook: useStore_MicHostList } = createAtomWithHook_WIP({}, "MicHostList");
export const { atomInstance: Atom_SelectedMicHost, useHook: useStore_SelectedMicHost } = createAtomWithHook_WIP("Nothing Selected", "SelectedMicHost");
export const { atomInstance: Atom_MicDeviceList, useHook: useStore_MicDeviceList } = createAtomWithHook_WIP({}, "MicDeviceList");
export const { atomInstance: Atom_SelectedMicDevice, useHook: useStore_SelectedMicDevice } = createAtomWithHook_WIP("Nothing Selected", "SelectedMicDevice");
export const { atomInstance: Atom_MicHostList, useHook: useStore_MicHostList } = createAtomWithHook({}, "MicHostList");
export const { atomInstance: Atom_SelectedMicHost, useHook: useStore_SelectedMicHost } = createAtomWithHook("Nothing Selected", "SelectedMicHost");
export const { atomInstance: Atom_MicDeviceList, useHook: useStore_MicDeviceList } = createAtomWithHook({}, "MicDeviceList");
export const { atomInstance: Atom_SelectedMicDevice, useHook: useStore_SelectedMicDevice } = createAtomWithHook("Nothing Selected", "SelectedMicDevice");
export const { atomInstance: Atom_SpeakerDeviceList, useHook: useStore_SpeakerDeviceList } = createAtomWithHook_WIP({}, "SpeakerDeviceList");
export const { atomInstance: Atom_SelectedSpeakerDevice, useHook: useStore_SelectedSpeakerDevice } = createAtomWithHook_WIP("Nothing Selected", "SelectedSpeakerDevice");
export const { atomInstance: Atom_SpeakerDeviceList, useHook: useStore_SpeakerDeviceList } = createAtomWithHook({}, "SpeakerDeviceList");
export const { atomInstance: Atom_SelectedSpeakerDevice, useHook: useStore_SelectedSpeakerDevice } = createAtomWithHook("Nothing Selected", "SelectedSpeakerDevice");
export const { atomInstance: Atom_MicVolume, useHook: useStore_MicVolume } = createAtomWithHook_WIP(0, "MicVolume");
export const { atomInstance: Atom_SpeakerVolume, useHook: useStore_SpeakerVolume } = createAtomWithHook_WIP(0, "SpeakerVolume");
export const { atomInstance: Atom_MicVolume, useHook: useStore_MicVolume } = createAtomWithHook(0, "MicVolume");
export const { atomInstance: Atom_SpeakerVolume, useHook: useStore_SpeakerVolume } = createAtomWithHook(0, "SpeakerVolume");
export const { atomInstance: Atom_MicThresholdCheckStatus, useHook: useStore_MicThresholdCheckStatus } = createAtomWithHook_WIP(false, "MicThresholdCheckStatus", {is_state_ok: true});
export const { atomInstance: Atom_SpeakerThresholdCheckStatus, useHook: useStore_SpeakerThresholdCheckStatus } = createAtomWithHook_WIP(false, "SpeakerThresholdCheckStatus", {is_state_ok: true});
export const { atomInstance: Atom_MicThresholdCheckStatus, useHook: useStore_MicThresholdCheckStatus } = createAtomWithHook(false, "MicThresholdCheckStatus", {is_state_ok: true});
export const { atomInstance: Atom_SpeakerThresholdCheckStatus, useHook: useStore_SpeakerThresholdCheckStatus } = createAtomWithHook(false, "SpeakerThresholdCheckStatus", {is_state_ok: true});
export const { atomInstance: Atom_MicThreshold, useHook: useStore_MicThreshold } = createAtomWithHook_WIP(0, "MicThreshold");
export const { atomInstance: Atom_SpeakerThreshold, useHook: useStore_SpeakerThreshold } = createAtomWithHook_WIP(0, "SpeakerThreshold");
export const { atomInstance: Atom_MicThreshold, useHook: useStore_MicThreshold } = createAtomWithHook(0, "MicThreshold");
export const { atomInstance: Atom_SpeakerThreshold, useHook: useStore_SpeakerThreshold } = createAtomWithHook(0, "SpeakerThreshold");
export const { atomInstance: Atom_EnableAutomaticMicThreshold, useHook: useStore_EnableAutomaticMicThreshold } = createAtomWithHook_WIP(false, "EnableAutomaticMicThreshold");
export const { atomInstance: Atom_EnableAutomaticSpeakerThreshold, useHook: useStore_EnableAutomaticSpeakerThreshold } = createAtomWithHook_WIP(false, "EnableAutomaticSpeakerThreshold");
export const { atomInstance: Atom_EnableAutomaticMicThreshold, useHook: useStore_EnableAutomaticMicThreshold } = createAtomWithHook(false, "EnableAutomaticMicThreshold");
export const { atomInstance: Atom_EnableAutomaticSpeakerThreshold, useHook: useStore_EnableAutomaticSpeakerThreshold } = createAtomWithHook(false, "EnableAutomaticSpeakerThreshold");
// Appearance
export const { atomInstance: Atom_UiLanguage, useHook: useStore_UiLanguage } = createAtomWithHook_WIP("en", "UiLanguage");
export const { atomInstance: Atom_UiLanguage, useHook: useStore_UiLanguage } = createAtomWithHook("en", "UiLanguage");
export const { atomInstance: Atom_IsOpenedWordFilterList, useHook: useStore_IsOpenedWordFilterList } = createAtomWithHook_WIP(false, "IsOpenedWordFilterList");
export const { atomInstance: Atom_WordFilterList, useHook: useStore_WordFilterList } = createAtomWithHook_WIP(word_filter_list, "WordFilterList");
export const { atomInstance: Atom_IsOpenedWordFilterList, useHook: useStore_IsOpenedWordFilterList } = createAtomWithHook(false, "IsOpenedWordFilterList");
export const { atomInstance: Atom_WordFilterList, useHook: useStore_WordFilterList } = createAtomWithHook(word_filter_list, "WordFilterList");
// Others
export const { atomInstance: Atom_EnableAutoClearMessageBox, useHook: useStore_EnableAutoClearMessageBox } = createAtomWithHook_WIP(true, "EnableAutoClearMessageBox");
export const { atomInstance: Atom_SendMessageButtonType, useHook: useStore_SendMessageButtonType } = createAtomWithHook_WIP("show", "SendMessageButtonType");
export const { atomInstance: Atom_EnableAutoClearMessageBox, useHook: useStore_EnableAutoClearMessageBox } = createAtomWithHook(true, "EnableAutoClearMessageBox");
export const { atomInstance: Atom_SendMessageButtonType, useHook: useStore_SendMessageButtonType } = createAtomWithHook("show", "SendMessageButtonType");
export const { atomInstance: Atom_IsOpenedTranslatorSelector, useHook: useStore_IsOpenedTranslatorSelector } = createAtomWithHook_WIP(false, "IsOpenedTranslatorSelector");
export const { atomInstance: Atom_IsOpenedTranslatorSelector, useHook: useStore_IsOpenedTranslatorSelector } = createAtomWithHook(false, "IsOpenedTranslatorSelector");
export const { atomInstance: Atom_VrctPosterIndex, useHook: useStore_VrctPosterIndex } = createAtomWithHook_WIP(0, "VrctPosterIndex");
export const { atomInstance: Atom_PosterShowcaseWorldPageIndex, useHook: useStore_PosterShowcaseWorldPageIndex } = createAtomWithHook_WIP(0, "PosterShowcaseWorldPageIndex");
export const { atomInstance: Atom_VrctPosterIndex, useHook: useStore_VrctPosterIndex } = createAtomWithHook(0, "VrctPosterIndex");
export const { atomInstance: Atom_PosterShowcaseWorldPageIndex, useHook: useStore_PosterShowcaseWorldPageIndex } = createAtomWithHook(0, "PosterShowcaseWorldPageIndex");

2
src-ui/utils/mixins.scss
View File

@@ -76,7 +76,7 @@ $toggle_control_size: $toggle_height - calc($toggle_gutter * 2);
background: $toggle_control_color;
transition: left $toggle_control_speed $toggle_control_ease;
}
&.is_loading:after{
&.is_pending:after{
background-color: var(--dark_600_color);
}
&.is_hovered {