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

[Refactor] store.js, etc..: Rename variables and functions.

Browse Source 
suffix '_Status' is for async. It has 'loading' state, for now.
This commit is contained in:
Sakamoto Shiina
2024-07-27 21:08:48 +09:00
parent 03d689ac18
commit 04a68fe074
23 changed files with 162 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
data.js
View File

@@ -9,6 +9,11 @@ export const translator_list = [
{ translator_key: "CTranslate2", translator_name: `Internal\n(Default)`, is_available: true }, { translator_key: "CTranslate2", translator_name: `Internal\n(Default)`, is_available: true },
]; ];
export const test_device_list = {
a: "Device A",
"device b": "Device B",
};
export const generateTestData = (num) => { export const generateTestData = (num) => {
const testDataArray = []; const testDataArray = [];

46
src-ui/store.js
View File

@@ -4,7 +4,7 @@ import {
useSetAtom useSetAtom
} from "jotai"; } from "jotai";
import { translator_list, generateTestData } from "@data"; import { translator_list, test_device_list, generateTestData } from "@data";
export const store = { export const store = {
backend_subprocess: null, backend_subprocess: null,
@@ -90,33 +90,31 @@ const createAsyncAtomWithHook = (initialValue, base_ame) => {
return { atomInstance, useHook }; return { atomInstance, useHook };
}; };
export const { atomInstance: uiLanguage, useHook: useUiLanguage } = createAtomWithHook("en", "UiLanguage"); export const { atomInstance: Atom_UiLanguageStatus, useHook: useUiLanguageStatus } = createAtomWithHook("en", "UiLanguageStatus");
export const { atomInstance: State_Translation, useHook: useState_Translation } = createAsyncAtomWithHook(false, "State_Translation"); export const { atomInstance: Atom_TranslationStatus, useHook: useTranslationStatus } = createAsyncAtomWithHook(false, "TranslationStatus");
export const { atomInstance: State_TranscriptionSend, useHook: useState_TranscriptionSend } = createAsyncAtomWithHook(false, "State_TranscriptionSend"); export const { atomInstance: Atom_TranscriptionSendStatus, useHook: useTranscriptionSendStatus } = createAsyncAtomWithHook(false, "TranscriptionSendStatus");
export const { atomInstance: State_TranscriptionReceive, useHook: useState_TranscriptionReceive } = createAsyncAtomWithHook(false, "State_TranscriptionReceive"); export const { atomInstance: Atom_TranscriptionReceiveStatus, useHook: useTranscriptionReceiveStatus } = createAsyncAtomWithHook(false, "TranscriptionReceiveStatus");
export const { atomInstance: State_Foreground, useHook: useState_Foreground } = createAsyncAtomWithHook(false, "State_Foreground"); export const { atomInstance: Atom_ForegroundStatus, useHook: useForegroundStatus } = createAsyncAtomWithHook(false, "ForegroundStatus");
export const { atomInstance: messageLogs, useHook: useMessageLogs } = createAtomWithHook(generateTestData(20), "MessageLogs"); export const { atomInstance: Atom_MessageLogsStatus, useHook: useMessageLogsStatus } = createAtomWithHook(generateTestData(20), "MessageLogsStatus");
export const { atomInstance: isCompactMode, useHook: useIsCompactMode } = createAtomWithHook(false, "IsCompactMode"); export const { atomInstance: Atom_MainWindowCompactModeStatus, useHook: useMainWindowCompactModeStatus } = createAtomWithHook(false, "MainWindowCompactModeStatus");
export const { atomInstance: isOpenedLanguageSelector, useHook: useIsOpenedLanguageSelector } = createAtomWithHook( export const { atomInstance: Atom_IsOpenedLanguageSelector, useHook: useIsOpenedLanguageSelector } = createAtomWithHook(
{ your_language: false, target_language: false }, { your_language: false, target_language: false },
"IsOpenedLanguageSelector" "IsOpenedLanguageSelector"
); );
export const { atomInstance: selectedTab, useHook: useSelectedTab } = createAtomWithHook(1, "SelectedTab"); export const { atomInstance: Atom_SelectedPresetTabStatus, useHook: useSelectedPresetTabStatus } = createAtomWithHook(1, "SelectedPresetTabStatus");
export const { atomInstance: isOpenedConfigWindow, useHook: useIsOpenedConfigWindow } = createAtomWithHook(false, "IsOpenedConfigWindow"); export const { atomInstance: Atom_IsOpenedConfigWindow, useHook: useIsOpenedConfigWindow } = createAtomWithHook(false, "IsOpenedConfigWindow");
export const { atomInstance: selectedConfigTab, useHook: useSelectedConfigTab } = createAtomWithHook("appearance", "SelectedConfigTab"); export const { atomInstance: Atom_SelectedConfigTabId, useHook: useSelectedConfigTabId } = createAtomWithHook("appearance", "SelectedConfigTabId");
export const { atomInstance: openedDropdownMenu, useHook: useOpenedDropdownMenu } = createAtomWithHook("", "OpenedDropdownMenu"); export const { atomInstance: Atom_IsOpenedDropdownMenu, useHook: useIsOpenedDropdownMenu } = createAtomWithHook("", "IsOpenedDropdownMenu");
export const { atomInstance: selectedMicDevice, useHook: useSelectedMicDevice } = createAsyncAtomWithHook("device b", "SelectedMicDevice");
const test_list = { export const { atomInstance: Atom_SelectedMicDeviceStatus, useHook: useSelectedMicDeviceStatus } = createAsyncAtomWithHook("device b", "SelectedMicDeviceStatus");
a: "Device A",
"device b": "Device B",
};
export const { atomInstance: micDeviceList, useHook: useMicDeviceList } = createAtomWithHook(test_list, "MicDeviceList"); export const { atomInstance: Atom_MicDeviceListStatus, useHook: useMicDeviceListStatus } = createAtomWithHook(test_device_list, "MicDeviceListStatus");
export const { atomInstance: translatorList, useHook: useTranslatorList } = createAtomWithHook(translator_list, "TranslatorList");
export const { atomInstance: selectedTranslator, useHook: useSelectedTranslator } = createAtomWithHook("CTranslate2", "SelectedTranslator"); export const { atomInstance: Atom_TranslatorListStatus, useHook: useTranslatorListStatus } = createAtomWithHook(translator_list, "TranslatorListStatus");
export const { atomInstance: openedTranslatorSelector, useHook: useOpenedTranslatorSelector } = createAtomWithHook(false, "OpenedTranslatorSelector"); export const { atomInstance: Atom_SelectedTranslatorIdStatus, useHook: useSelectedTranslatorIdStatus } = createAtomWithHook("CTranslate2", "SelectedTranslatorIdStatus");
export const { atomInstance: vrctPosterIndex, useHook: useVrctPosterIndex } = createAtomWithHook(0, "VrctPosterIndex"); export const { atomInstance: Atom_IsOpenedTranslatorSelector, useHook: useIsOpenedTranslatorSelector } = createAtomWithHook(false, "IsOpenedTranslatorSelector");
export const { atomInstance: posterShowcaseWorldPageIndex, useHook: usePosterShowcaseWorldPageIndex } = createAtomWithHook(0, "PosterShowcaseWorldPageIndex");
export const { atomInstance: Atom_VrctPosterIndex, useHook: useVrctPosterIndex } = createAtomWithHook(0, "VrctPosterIndex");
export const { atomInstance: Atom_PosterShowcaseWorldPageIndex, useHook: usePosterShowcaseWorldPageIndex } = createAtomWithHook(0, "PosterShowcaseWorldPageIndex");

74
src-ui/utils/logics/useMainFunction.js
View File

@@ -1,74 +1,74 @@
import { getCurrent } from "@tauri-apps/api/window"; import { getCurrent } from "@tauri-apps/api/window";
import { import {
useState_Translation, useTranslationStatus,
useState_TranscriptionSend, useTranscriptionSendStatus,
useState_TranscriptionReceive, useTranscriptionReceiveStatus,
useState_Foreground, useForegroundStatus,
} from "@store"; } from "@store";
import { useStdoutToPython } from "./useStdoutToPython"; import { useStdoutToPython } from "./useStdoutToPython";
export const useMainFunction = () => { export const useMainFunction = () => {
const { const {
currentState_Translation, currentTranslationStatus,
updateState_Translation, updateTranslationStatus,
asyncUpdateState_Translation, asyncUpdateTranslationStatus,
} = useState_Translation(); } = useTranslationStatus();
const { const {
currentState_TranscriptionSend, currentTranscriptionSendStatus,
updateState_TranscriptionSend, updateTranscriptionSendStatus,
asyncUpdateState_TranscriptionSend, asyncUpdateTranscriptionSendStatus,
} = useState_TranscriptionSend(); } = useTranscriptionSendStatus();
const { const {
currentState_TranscriptionReceive, currentTranscriptionReceiveStatus,
updateState_TranscriptionReceive, updateTranscriptionReceiveStatus,
asyncUpdateState_TranscriptionReceive, asyncUpdateTranscriptionReceiveStatus,
} = useState_TranscriptionReceive(); } = useTranscriptionReceiveStatus();
const { const {
currentState_Foreground, currentForegroundStatus,
updateState_Foreground, updateForegroundStatus,
} = useState_Foreground(); } = useForegroundStatus();
const { asyncStdoutToPython } = useStdoutToPython(); const { asyncStdoutToPython } = useStdoutToPython();
const asyncPending = () => new Promise(() => {}); const asyncPending = () => new Promise(() => {});
return { return {
toggleTranslation: () => { toggleTranslation: () => {
asyncStdoutToPython({id: "/controller/callback_toggle_translation", data: !currentState_Translation.data}); asyncStdoutToPython({id: "/controller/callback_toggle_translation", data: !currentTranslationStatus.data});
asyncUpdateState_Translation(asyncPending); asyncUpdateTranslationStatus(asyncPending);
}, },
currentState_Translation: currentState_Translation, currentTranslationStatus: currentTranslationStatus,
updateState_Translation: (payload) => { updateTranslationStatus: (payload) => {
updateState_Translation(payload.data); updateTranslationStatus(payload.data);
}, },
toggleTranscriptionSend: () => { toggleTranscriptionSend: () => {
asyncStdoutToPython({id: "/controller/callback_toggle_transcription_send", data: !currentState_TranscriptionSend.data}); asyncStdoutToPython({id: "/controller/callback_toggle_transcription_send", data: !currentTranscriptionSendStatus.data});
asyncUpdateState_TranscriptionSend(asyncPending); asyncUpdateTranscriptionSendStatus(asyncPending);
}, },
currentState_TranscriptionSend: currentState_TranscriptionSend, currentTranscriptionSendStatus: currentTranscriptionSendStatus,
updateState_TranscriptionSend: (payload) => { updateTranscriptionSendStatus: (payload) => {
updateState_TranscriptionSend(payload.data); updateTranscriptionSendStatus(payload.data);
}, },
toggleTranscriptionReceive: () => { toggleTranscriptionReceive: () => {
asyncStdoutToPython({id: "/controller/callback_toggle_transcription_receive", data: !currentState_TranscriptionReceive.data}); asyncStdoutToPython({id: "/controller/callback_toggle_transcription_receive", data: !currentTranscriptionReceiveStatus.data});
asyncUpdateState_TranscriptionReceive(asyncPending); asyncUpdateTranscriptionReceiveStatus(asyncPending);
}, },
currentState_TranscriptionReceive: currentState_TranscriptionReceive, currentTranscriptionReceiveStatus: currentTranscriptionReceiveStatus,
updateState_TranscriptionReceive: (payload) => { updateTranscriptionReceiveStatus: (payload) => {
updateState_TranscriptionReceive(payload.data); updateTranscriptionReceiveStatus(payload.data);
}, },
toggleForeground: () => { toggleForeground: () => {
const main_window = getCurrent(); const main_window = getCurrent();
const is_foreground_enabled = !currentState_Foreground.data; const is_foreground_enabled = !currentForegroundStatus.data;
main_window.setAlwaysOnTop(is_foreground_enabled); main_window.setAlwaysOnTop(is_foreground_enabled);
updateState_Foreground(is_foreground_enabled); updateForegroundStatus(is_foreground_enabled);
}, },
currentState_Foreground: currentState_Foreground, currentForegroundStatus: currentForegroundStatus,
}; };
}; };

10
src-ui/utils/logics/useMessage.js
View File

@@ -1,11 +1,11 @@
import { import {
useMessageLogs, useMessageLogsStatus,
} from "@store"; } from "@store";
import { useStdoutToPython } from "./useStdoutToPython"; import { useStdoutToPython } from "./useStdoutToPython";
export const useMessage = () => { export const useMessage = () => {
const { currentMessageLogs, addMessageLogs, updateMessageLogs } = useMessageLogs(); const { currentMessageLogsStatus, addMessageLogsStatus, updateMessageLogsStatus } = useMessageLogsStatus();
const { asyncStdoutToPython } = useStdoutToPython(); const { asyncStdoutToPython } = useStdoutToPython();
return { return {
@@ -17,7 +17,7 @@ export const useMessage = () => {
{hour12: false, hour: "2-digit", minute:"2-digit"}, {hour12: false, hour: "2-digit", minute:"2-digit"},
); );
addMessageLogs({ addMessageLogsStatus({
id: uuid, id: uuid,
category: "sent", category: "sent",
status: "pending", status: "pending",
@@ -39,10 +39,10 @@ export const useMessage = () => {
return item; return item;
}); });
}; };
updateMessageLogs(updateItemById(uuid)); updateMessageLogsStatus(updateItemById(uuid));
}, 3000); }, 3000);
}, },
currentMessageLogs: currentMessageLogs, currentMessageLogsStatus: currentMessageLogsStatus,
}; };
}; };

12
src-ui/utils/logics/useStartPython.js
View File

@@ -5,15 +5,15 @@ import { useMainFunction } from "./useMainFunction";
export const useStartPython = () => { export const useStartPython = () => {
const { const {
updateState_Translation, updateTranslationStatus,
updateState_TranscriptionSend, updateTranscriptionSendStatus,
updateState_TranscriptionReceive, updateTranscriptionReceiveStatus,
} = useMainFunction(); } = useMainFunction();
const routes = { const routes = {
"/controller/callback_toggle_translation": updateState_Translation, "/controller/callback_toggle_translation": updateTranslationStatus,
"/controller/callback_toggle_transcription_send": updateState_TranscriptionSend, "/controller/callback_toggle_transcription_send": updateTranscriptionSendStatus,
"/controller/callback_toggle_transcription_receive": updateState_TranscriptionReceive, "/controller/callback_toggle_transcription_receive": updateTranscriptionReceiveStatus,
}; };
const receiveRoutes = (parsed_data) => { const receiveRoutes = (parsed_data) => {

10
src-ui/windows/config_window/setting_section/setting_box/Appearance/Appearance.jsx
View File

@@ -1,8 +1,8 @@
import { useSettingBox } from "../useSettingBox"; import { useSettingBox } from "../useSettingBox";
import { useSelectedMicDevice, useMicDeviceList } from "@store"; import { useSelectedMicDeviceStatus, useMicDeviceListStatus } from "@store";
export const Appearance = () => { export const Appearance = () => {
const { currentSelectedMicDevice, updateSelectedMicDevice } = useSelectedMicDevice(); const { currentSelectedMicDeviceStatus, updateSelectedMicDeviceStatus } = useSelectedMicDeviceStatus();
const { currentMicDeviceList } = useMicDeviceList(); const { currentMicDeviceListStatus } = useMicDeviceListStatus();
const { DropdownMenuContainer } = useSettingBox(); const { DropdownMenuContainer } = useSettingBox();
const selectFunction = (selected_data) => { const selectFunction = (selected_data) => {
@@ -13,13 +13,13 @@ export const Appearance = () => {
}, 3000); }, 3000);
}); });
}; };
updateSelectedMicDevice(asyncFunction); updateSelectedMicDeviceStatus(asyncFunction);
}; };
return ( return (
<> <>
<DropdownMenuContainer dropdown_id="mic_host" label="Mic Host/Driver" desc="description" selected_id="b" list={{a: "A", b: "B", c: "C"}} /> <DropdownMenuContainer dropdown_id="mic_host" label="Mic Host/Driver" desc="description" selected_id="b" list={{a: "A", b: "B", c: "C"}} />
<DropdownMenuContainer dropdown_id="mic_device" label="Mic Device" desc="description" selected_id={currentSelectedMicDevice.data} list={currentMicDeviceList} selectFunction={selectFunction} state={currentSelectedMicDevice.state} /> <DropdownMenuContainer dropdown_id="mic_device" label="Mic Device" desc="description" selected_id={currentSelectedMicDeviceStatus.data} list={currentMicDeviceListStatus} selectFunction={selectFunction} state={currentSelectedMicDeviceStatus.state} />
</> </>
); );
}; };

6
src-ui/windows/config_window/setting_section/setting_box/SettingBox.jsx
View File

@@ -1,12 +1,12 @@
import styles from "./SettingBox.module.scss"; import styles from "./SettingBox.module.scss";
import { useSelectedConfigTab } from "@store"; import { useSelectedConfigTabId } from "@store";
import { Appearance } from "./appearance/Appearance"; import { Appearance } from "./appearance/Appearance";
import { AboutVrct } from "./about_vrct/AboutVrct"; import { AboutVrct } from "./about_vrct/AboutVrct";
export const SettingBox = () => { export const SettingBox = () => {
const { currentSelectedConfigTab } = useSelectedConfigTab(); const { currentSelectedConfigTabId } = useSelectedConfigTabId();
switch (currentSelectedConfigTab) { switch (currentSelectedConfigTabId) {
case "appearance": case "appearance":
return <Appearance />; return <Appearance />;
case "about_vrct": case "about_vrct":

6
src-ui/windows/config_window/setting_section/setting_box/about_vrct/AboutVrct.jsx
View File

@@ -19,12 +19,12 @@ import vrchat_disclaimer from "@images/about_vrct/vrchat_disclaimer.png";
import clsx from "clsx"; import clsx from "clsx";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { useUiLanguage } from "@store"; import { useUiLanguageStatus } from "@store";
import { PosterShowcaseContents } from "./poster_showcase_contents/PosterShowcaseContents"; import { PosterShowcaseContents } from "./poster_showcase_contents/PosterShowcaseContents";
export const AboutVrct = () => { export const AboutVrct = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const { currentUiLanguage } = useUiLanguage(); const { currentUiLanguageStatus } = useUiLanguageStatus();
return ( return (
<div className={styles.container}> <div className={styles.container}>
<div className={styles.dev_section}> <div className={styles.dev_section}>
@@ -74,7 +74,7 @@ export const AboutVrct = () => {
<img src={special_thanks_section_title} className={clsx(styles.section_title, styles.special_thanks)} /> <img src={special_thanks_section_title} className={clsx(styles.section_title, styles.special_thanks)} />
<img src={special_thanks_members} className={styles.special_thanks_members_img} /> <img src={special_thanks_members} className={styles.special_thanks_members_img} />
{ {
currentUiLanguage === "ja" currentUiLanguageStatus === "ja"
? <img src={special_thanks_message_ja} className={styles.special_thanks_message_img} /> ? <img src={special_thanks_message_ja} className={styles.special_thanks_message_img} />
: <img src={special_thanks_message_en} className={styles.special_thanks_message_img} /> : <img src={special_thanks_message_en} className={styles.special_thanks_message_img} />
} }

6
src-ui/windows/config_window/setting_section/setting_box/about_vrct/poster_showcase_contents/posters_contents/PostersContents.jsx
View File

@@ -1,6 +1,6 @@
import clsx from "clsx"; import clsx from "clsx";
import styles from "./PostersContents.module.scss"; import styles from "./PostersContents.module.scss";
import { useUiLanguage } from "@store"; import { useUiLanguageStatus } from "@store";
import { useVrctPosterIndex } from "@store"; import { useVrctPosterIndex } from "@store";
import ArrowLeftSvg from "@images/arrow_left.svg?react"; import ArrowLeftSvg from "@images/arrow_left.svg?react";
@@ -30,7 +30,7 @@ import poster_images_authors_m_en from "@images/about_vrct/vrct_posters/authors/
export const PostersContents = () => { export const PostersContents = () => {
const { currentVrctPosterIndex, updateVrctPosterIndex } = useVrctPosterIndex(); const { currentVrctPosterIndex, updateVrctPosterIndex } = useVrctPosterIndex();
const { currentUiLanguage } = useUiLanguage(); const { currentUiLanguageStatus } = useUiLanguageStatus();
const updateIndex = (delta) => { const updateIndex = (delta) => {
@@ -60,7 +60,7 @@ export const PostersContents = () => {
</button> </button>
</div> </div>
{ {
currentUiLanguage === "ja" currentUiLanguageStatus === "ja"
? <img src={current_poster_authors_img_ja} className={styles.poster_authors_img} /> ? <img src={current_poster_authors_img_ja} className={styles.poster_authors_img} />
: <img src={current_poster_authors_img_en} className={styles.poster_authors_img} /> : <img src={current_poster_authors_img_en} className={styles.poster_authors_img} />
} }

10
src-ui/windows/config_window/setting_section/setting_box/components/dropdown_menu/DropdownMenu.jsx
View File

@@ -2,17 +2,17 @@ import styles from "./DropdownMenu.module.scss";
import clsx from "clsx"; import clsx from "clsx";
import { useOpenedDropdownMenu } from "@store"; import { useIsOpenedDropdownMenu } from "@store";
export const DropdownMenu = (props) => { export const DropdownMenu = (props) => {
const { updateOpenedDropdownMenu, currentOpenedDropdownMenu } = useOpenedDropdownMenu(); const { updateIsOpenedDropdownMenu, currentIsOpenedDropdownMenu } = useIsOpenedDropdownMenu();
const openDropdownMenu = () => { const openDropdownMenu = () => {
updateOpenedDropdownMenu(props.dropdown_id); updateIsOpenedDropdownMenu(props.dropdown_id);
}; };
const selectValue = (key) => { const selectValue = (key) => {
updateOpenedDropdownMenu(""); updateIsOpenedDropdownMenu("");
props.selectFunction({ props.selectFunction({
dropdown_id: props.dropdown_id, dropdown_id: props.dropdown_id,
selected_id: key, selected_id: key,
@@ -20,7 +20,7 @@ export const DropdownMenu = (props) => {
}; };
const dropdown_content_wrapper_class_name = clsx(styles["dropdown_content_wrapper"], { const dropdown_content_wrapper_class_name = clsx(styles["dropdown_content_wrapper"], {
[styles["is_opened"]]: (currentOpenedDropdownMenu === props.dropdown_id) ? true : false [styles["is_opened"]]: (currentIsOpenedDropdownMenu === props.dropdown_id) ? true : false
}); });
const dropdown_toggle_button_class_name = clsx(styles["dropdown_toggle_button"], { const dropdown_toggle_button_class_name = clsx(styles["dropdown_toggle_button"], {

6
src-ui/windows/config_window/setting_section/setting_box/useSettingBox.jsx
View File

@@ -1,14 +1,14 @@
import styles from "./useSettingBox.module.scss"; import styles from "./useSettingBox.module.scss";
import { LabelComponent } from "./components/label_component/LabelComponent"; import { LabelComponent } from "./components/label_component/LabelComponent";
import { DropdownMenu } from "./components/dropdown_menu/DropdownMenu"; import { DropdownMenu } from "./components/dropdown_menu/DropdownMenu";
import { useOpenedDropdownMenu } from "@store"; import { useIsOpenedDropdownMenu } from "@store";
export const useSettingBox = () => { export const useSettingBox = () => {
const { updateOpenedDropdownMenu } = useOpenedDropdownMenu(); const { updateIsOpenedDropdownMenu } = useIsOpenedDropdownMenu();
const DropdownMenuContainer = (props) => { const DropdownMenuContainer = (props) => {
const onMouseLeaveFunction = () => { const onMouseLeaveFunction = () => {
updateOpenedDropdownMenu(""); updateIsOpenedDropdownMenu("");
}; };
return ( return (

10
src-ui/windows/config_window/sidebar_section/SidebarSection.jsx
View File

@@ -21,20 +21,20 @@ export const SidebarSection = () => {
import clsx from "clsx"; import clsx from "clsx";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { useSelectedConfigTab } from "@store"; import { useSelectedConfigTabId } from "@store";
const Tab = (props) => { const Tab = (props) => {
const { t } = useTranslation(); const { t } = useTranslation();
const { updateSelectedConfigTab, currentSelectedConfigTab } = useSelectedConfigTab(); const { updateSelectedConfigTabId, currentSelectedConfigTabId } = useSelectedConfigTabId();
const onclickFunction = () => { const onclickFunction = () => {
updateSelectedConfigTab(props.tab_id); updateSelectedConfigTabId(props.tab_id);
}; };
const tab_container_class_names = clsx(styles["tab_container"], { const tab_container_class_names = clsx(styles["tab_container"], {
[styles["is_selected"]]: (currentSelectedConfigTab === props.tab_id) ? true : false [styles["is_selected"]]: (currentSelectedConfigTabId === props.tab_id) ? true : false
}); });
const switch_indicator_class_names = clsx(styles["switch_indicator"], { const switch_indicator_class_names = clsx(styles["switch_indicator"], {
[styles["is_selected"]]: (currentSelectedConfigTab === props.tab_id) ? true : false [styles["is_selected"]]: (currentSelectedConfigTabId === props.tab_id) ? true : false
}); });
return ( return (

6
src-ui/windows/config_window/topbar/section_title_box/SectionTitleBox.jsx
View File

@@ -1,13 +1,13 @@
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import styles from "./SectionTitleBox.module.scss"; import styles from "./SectionTitleBox.module.scss";
import { useSelectedConfigTab } from "@store"; import { useSelectedConfigTabId } from "@store";
export const SectionTitleBox = () => { export const SectionTitleBox = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const { currentSelectedConfigTab } = useSelectedConfigTab(); const { currentSelectedConfigTabId } = useSelectedConfigTabId();
return ( return (
<div className={styles.container}> <div className={styles.container}>
<p className={styles.title}>{t(`config_window.side_menu_labels.${currentSelectedConfigTab}`)}</p> <p className={styles.title}>{t(`config_window.side_menu_labels.${currentSelectedConfigTabId}`)}</p>
</div> </div>
); );
}; };

8
src-ui/windows/main_window/main_section/message_container/log_box/LogBox.jsx
View File

@@ -1,11 +1,11 @@
import { useEffect, useLayoutEffect, useRef, useState } from "react"; import { useEffect, useLayoutEffect, useRef, useState } from "react";
import styles from "./LogBox.module.scss"; import styles from "./LogBox.module.scss";
import { useMessageLogs, store } from "@store"; import { useMessageLogsStatus, store } from "@store";
import { MessageContainer } from "./message_container/MessageContainer"; import { MessageContainer } from "./message_container/MessageContainer";
import { scrollToBottom } from "@logics/scrollToBottom"; import { scrollToBottom } from "@logics/scrollToBottom";
export const LogBox = () => { export const LogBox = () => {
const { currentMessageLogs } = useMessageLogs(); const { currentMessageLogsStatus } = useMessageLogsStatus();
const log_container_ref = useRef(null); const log_container_ref = useRef(null);
const [is_scrolling, setIsScrolling] = useState(false); const [is_scrolling, setIsScrolling] = useState(false);
@@ -14,7 +14,7 @@ export const LogBox = () => {
if (!is_scrolling) { if (!is_scrolling) {
scrollToBottom(store.log_box_ref, true); scrollToBottom(store.log_box_ref, true);
} }
}, [currentMessageLogs]); }, [currentMessageLogsStatus]);
useEffect(() => { useEffect(() => {
const handleScroll = () => { const handleScroll = () => {
@@ -39,7 +39,7 @@ export const LogBox = () => {
return ( return (
<div id="log_container" className={styles.container} ref={log_container_ref}> <div id="log_container" className={styles.container} ref={log_container_ref}>
{currentMessageLogs.map(message_data => ( {currentMessageLogsStatus.map(message_data => (
<MessageContainer key={message_data.id} {...message_data} /> <MessageContainer key={message_data.id} {...message_data} />
))} ))}
</div> </div>

8
src-ui/windows/main_window/main_section/top_bar/sidebar_compact_mode_button/SidebarCompactModeButton.jsx
View File

@@ -1,18 +1,18 @@
import clsx from "clsx"; import clsx from "clsx";
import styles from "./SidebarCompactModeButton.module.scss"; import styles from "./SidebarCompactModeButton.module.scss";
import { useIsCompactMode } from "@store"; import { useMainWindowCompactModeStatus } from "@store";
import ArrowLeftSvg from "@images/arrow_left.svg?react"; import ArrowLeftSvg from "@images/arrow_left.svg?react";
export const SidebarCompactModeButton = () => { export const SidebarCompactModeButton = () => {
const { updateIsCompactMode, currentIsCompactMode } = useIsCompactMode(); const { updateMainWindowCompactModeStatus, currentMainWindowCompactModeStatus } = useMainWindowCompactModeStatus();
const toggleCompactMode = () => { const toggleCompactMode = () => {
updateIsCompactMode(!currentIsCompactMode); updateMainWindowCompactModeStatus(!currentMainWindowCompactModeStatus);
}; };
const class_names = clsx(styles["arrow_left_svg"], { const class_names = clsx(styles["arrow_left_svg"], {
[styles["reverse"]]: currentIsCompactMode [styles["reverse"]]: currentMainWindowCompactModeStatus
}); });
return ( return (

8
src-ui/windows/main_window/sidebar_section/SidebarSection.jsx
View File

@@ -1,7 +1,7 @@
import clsx from "clsx"; import clsx from "clsx";
import styles from "./SidebarSection.module.scss"; import styles from "./SidebarSection.module.scss";
import { useIsCompactMode } from "@store"; import { useMainWindowCompactModeStatus } from "@store";
import { Logo } from "./logo/Logo"; import { Logo } from "./logo/Logo";
import { MainFunctionSwitch } from "./main_function_switch/MainFunctionSwitch"; import { MainFunctionSwitch } from "./main_function_switch/MainFunctionSwitch";
@@ -9,16 +9,16 @@ import { LanguageSettings } from "./language_settings/LanguageSettings";
import { OpenSettings } from "./open_settings/OpenSettings"; import { OpenSettings } from "./open_settings/OpenSettings";
export const SidebarSection = () => { export const SidebarSection = () => {
const { currentIsCompactMode } = useIsCompactMode(); const { currentMainWindowCompactModeStatus } = useMainWindowCompactModeStatus();
const container_class_name = clsx(styles["container"], { const container_class_name = clsx(styles["container"], {
[styles["is_compact_mode"]]: currentIsCompactMode [styles["is_compact_mode"]]: currentMainWindowCompactModeStatus
}); });
return ( return (
<div className={container_class_name}> <div className={container_class_name}>
<Logo /> <Logo />
<MainFunctionSwitch /> <MainFunctionSwitch />
{!currentIsCompactMode && <LanguageSettings />} {!currentMainWindowCompactModeStatus && <LanguageSettings />}
<OpenSettings /> <OpenSettings />
</div> </div>
); );

18
src-ui/windows/main_window/sidebar_section/language_settings/LanguageSettings.jsx
View File

@@ -2,20 +2,20 @@ import { useTranslation } from "react-i18next";
import styles from "./LanguageSettings.module.scss"; import styles from "./LanguageSettings.module.scss";
import { PresetSelectTabs } from "./preset_select_tabs/PresetSelectTabs"; import { PresetTabSelector } from "./preset_tab_selector/PresetTabSelector";
import { LanguageSelectorOpenButton } from "./language_selector_open_button/LanguageSelectorOpenButton"; import { LanguageSelectorOpenButton } from "./language_selector_open_button/LanguageSelectorOpenButton";
import { LanguageSwapButton } from "./language_swap_button/LanguageSwapButton"; import { LanguageSwapButton } from "./language_swap_button/LanguageSwapButton";
import { TranslatorSelectorOpenButton } from "./translator_selector_open_button/TranslatorSelectorOpenButton"; import { TranslatorSelectorOpenButton } from "./translator_selector_open_button/TranslatorSelectorOpenButton";
import { useOpenedTranslatorSelector } from "@store"; import { useIsOpenedTranslatorSelector } from "@store";
export const LanguageSettings = () => { export const LanguageSettings = () => {
const { updateOpenedTranslatorSelector} = useOpenedTranslatorSelector(); const { updateIsOpenedTranslatorSelector} = useIsOpenedTranslatorSelector();
const closeTranslatorSelector = () => updateOpenedTranslatorSelector(false); const closeTranslatorSelector = () => updateIsOpenedTranslatorSelector(false);
return ( return (
<div className={styles.container} onMouseLeave={closeTranslatorSelector} > <div className={styles.container} onMouseLeave={closeTranslatorSelector} >
<p className={styles.title}>Language Settings</p> <p className={styles.title}>Language Settings</p>
<PresetSelectTabs /> <PresetTabSelector />
<PresetContainer /> <PresetContainer />
</div> </div>
); );
@@ -32,8 +32,8 @@ const PresetContainer = () => {
const { updateIsOpenedLanguageSelector, currentIsOpenedLanguageSelector } = useIsOpenedLanguageSelector(); const { updateIsOpenedLanguageSelector, currentIsOpenedLanguageSelector } = useIsOpenedLanguageSelector();
const { const {
currentState_TranscriptionSend, currentTranscriptionSendStatus,
currentState_TranscriptionReceive, currentTranscriptionReceiveStatus,
} = useMainFunction(); } = useMainFunction();
@@ -79,7 +79,7 @@ const PresetContainer = () => {
is_opened: currentIsOpenedLanguageSelector.your_language, is_opened: currentIsOpenedLanguageSelector.your_language,
onClickFunction: () => handleLanguageSelectorClick("your_language"), onClickFunction: () => handleLanguageSelectorClick("your_language"),
TurnedOnSvgComponent: <MicSvg />, TurnedOnSvgComponent: <MicSvg />,
is_turned_on: currentState_TranscriptionSend.data, is_turned_on: currentTranscriptionSendStatus.data,
}; };
const target_language_settings = { const target_language_settings = {
@@ -87,7 +87,7 @@ const PresetContainer = () => {
is_opened: currentIsOpenedLanguageSelector.target_language, is_opened: currentIsOpenedLanguageSelector.target_language,
onClickFunction: () => handleLanguageSelectorClick("target_language"), onClickFunction: () => handleLanguageSelectorClick("target_language"),
TurnedOnSvgComponent: <HeadphonesSvg />, TurnedOnSvgComponent: <HeadphonesSvg />,
is_turned_on: currentState_TranscriptionReceive.data, is_turned_on: currentTranscriptionReceiveStatus.data,
}; };
return ( return (

12
src-ui/windows/main_window/sidebar_section/language_settings/preset_select_tabs/PresetSelectTabs.jsx → src-ui/windows/main_window/sidebar_section/language_settings/preset_tab_selector/PresetTabSelector.jsx
View File

@@ -1,6 +1,6 @@
import styles from "./PresetSelectTabs.module.scss"; import styles from "./PresetTabSelector.module.scss";
export const PresetSelectTabs = () => { export const PresetTabSelector = () => {
return ( return (
<div className={styles.container}> <div className={styles.container}>
<Tab preset_number={1} /> <Tab preset_number={1} />
@@ -12,16 +12,16 @@ export const PresetSelectTabs = () => {
import clsx from "clsx"; import clsx from "clsx";
import { useSelectedTab } from "@store"; import { useSelectedPresetTabStatus } from "@store";
const Tab = (props) => { const Tab = (props) => {
const { updateSelectedTab, currentSelectedTab } = useSelectedTab(); const { updateSelectedPresetTabStatus, currentSelectedPresetTabStatus } = useSelectedPresetTabStatus();
const onclickFunction = () => { const onclickFunction = () => {
updateSelectedTab(props.preset_number); updateSelectedPresetTabStatus(props.preset_number);
}; };
const class_names = clsx(styles["tab_container"], { const class_names = clsx(styles["tab_container"], {
[styles["is_selected"]]: (currentSelectedTab === props.preset_number) ? true : false [styles["is_selected"]]: (currentSelectedPresetTabStatus === props.preset_number) ? true : false
}); });
return ( return (

0
src-ui/windows/main_window/sidebar_section/language_settings/preset_select_tabs/PresetSelectTabs.module.scss → src-ui/windows/main_window/sidebar_section/language_settings/preset_tab_selector/PresetTabSelector.module.scss
View File

16
src-ui/windows/main_window/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.jsx
View File

@@ -2,19 +2,19 @@ import { useTranslation } from "react-i18next";
import styles from "./TranslatorSelectorOpenButton.module.scss"; import styles from "./TranslatorSelectorOpenButton.module.scss";
import { TranslatorSelector } from "./translator_selector/TranslatorSelector"; import { TranslatorSelector } from "./translator_selector/TranslatorSelector";
import { useTranslatorList, useSelectedTranslator, useOpenedTranslatorSelector } from "@store"; import { useTranslatorListStatus, useSelectedTranslatorIdStatus, useIsOpenedTranslatorSelector } from "@store";
export const TranslatorSelectorOpenButton = () => { export const TranslatorSelectorOpenButton = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const { currentSelectedTranslator } = useSelectedTranslator(); const { currentSelectedTranslatorIdStatus } = useSelectedTranslatorIdStatus();
const { currentTranslatorList } = useTranslatorList(); const { currentTranslatorListStatus } = useTranslatorListStatus();
const currentTranslator = currentTranslatorList.find( const currentTranslator = currentTranslatorListStatus.find(
translator_data => translator_data.translator_key === currentSelectedTranslator translator_data => translator_data.translator_key === currentSelectedTranslatorIdStatus
); );
const { currentOpenedTranslatorSelector, updateOpenedTranslatorSelector} = useOpenedTranslatorSelector(); const { currentIsOpenedTranslatorSelector, updateIsOpenedTranslatorSelector} = useIsOpenedTranslatorSelector();
const openTranslatorSelector = () => updateOpenedTranslatorSelector(!currentOpenedTranslatorSelector); const openTranslatorSelector = () => updateIsOpenedTranslatorSelector(!currentIsOpenedTranslatorSelector);
return ( return (
<div className={styles.container}> <div className={styles.container}>
@@ -22,7 +22,7 @@ export const TranslatorSelectorOpenButton = () => {
<p className={styles.label}>{t("main_window.translator")}</p> <p className={styles.label}>{t("main_window.translator")}</p>
<p className={styles.label}>{currentTranslator?.translator_name}</p> <p className={styles.label}>{currentTranslator?.translator_name}</p>
</div> </div>
{currentOpenedTranslatorSelector && <TranslatorSelector />} {currentIsOpenedTranslatorSelector && <TranslatorSelector />}
</div> </div>
); );
}; };

16
src-ui/windows/main_window/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.jsx
View File

@@ -1,10 +1,10 @@
import styles from "./TranslatorSelector.module.scss"; import styles from "./TranslatorSelector.module.scss";
import { chunkArray } from "@utils/chunkArray"; import { chunkArray } from "@utils/chunkArray";
import { useTranslatorList, useSelectedTranslator, useOpenedTranslatorSelector } from "@store"; import { useTranslatorListStatus, useSelectedTranslatorIdStatus, useIsOpenedTranslatorSelector } from "@store";
export const TranslatorSelector = () => { export const TranslatorSelector = () => {
const { currentTranslatorList } = useTranslatorList(); const { currentTranslatorListStatus } = useTranslatorListStatus();
const columns = chunkArray(currentTranslatorList, 2); const columns = chunkArray(currentTranslatorListStatus, 2);
return ( return (
<div className={styles.container}> <div className={styles.container}>
@@ -28,18 +28,18 @@ export const TranslatorSelector = () => {
import clsx from "clsx"; import clsx from "clsx";
const TranslatorBox = (props) => { const TranslatorBox = (props) => {
const { currentSelectedTranslator, updateSelectedTranslator} = useSelectedTranslator(); const { currentSelectedTranslatorIdStatus, updateSelectedTranslatorIdStatus} = useSelectedTranslatorIdStatus();
const { updateOpenedTranslatorSelector} = useOpenedTranslatorSelector(); const { updateIsOpenedTranslatorSelector} = useIsOpenedTranslatorSelector();
const box_class_name = clsx( const box_class_name = clsx(
styles.box, styles.box,
{ [styles["is_selected"]]: (currentSelectedTranslator === props.translator_id) ? true : false }, { [styles["is_selected"]]: (currentSelectedTranslatorIdStatus === props.translator_id) ? true : false },
{ [styles["is_available"]]: (props.is_available === true) ? true : false } { [styles["is_available"]]: (props.is_available === true) ? true : false }
); );
const selectTranslator = () => { const selectTranslator = () => {
updateSelectedTranslator(props.translator_id); updateSelectedTranslatorIdStatus(props.translator_id);
updateOpenedTranslatorSelector(false); updateIsOpenedTranslatorSelector(false);
}; };
return ( return (
<div className={box_class_name} onClick={selectTranslator}> <div className={box_class_name} onClick={selectTranslator}>

6
src-ui/windows/main_window/sidebar_section/logo/Logo.jsx
View File

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

22
src-ui/windows/main_window/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 MicSvg from "@images/mic.svg?react";
import HeadphonesSvg from "@images/headphones.svg?react"; import HeadphonesSvg from "@images/headphones.svg?react";
import ForegroundSvg from "@images/foreground.svg?react"; import ForegroundSvg from "@images/foreground.svg?react";
import { useIsCompactMode } from "@store"; import { useMainWindowCompactModeStatus } from "@store";
import { useMainFunction } from "@logics/useMainFunction"; import { useMainFunction } from "@logics/useMainFunction";
@@ -13,10 +13,10 @@ export const MainFunctionSwitch = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const { const {
toggleTranslation, currentState_Translation, toggleTranslation, currentTranslationStatus,
toggleTranscriptionSend, currentState_TranscriptionSend, toggleTranscriptionSend, currentTranscriptionSendStatus,
toggleTranscriptionReceive, currentState_TranscriptionReceive, toggleTranscriptionReceive, currentTranscriptionReceiveStatus,
toggleForeground, currentState_Foreground, toggleForeground, currentForegroundStatus,
} = useMainFunction(); } = useMainFunction();
@@ -25,28 +25,28 @@ export const MainFunctionSwitch = () => {
switch_id: "translation", switch_id: "translation",
label: t("main_window.translation"), label: t("main_window.translation"),
SvgComponent: TranslationSvg, SvgComponent: TranslationSvg,
currentState: currentState_Translation, currentState: currentTranslationStatus,
toggleFunction: toggleTranslation, toggleFunction: toggleTranslation,
}, },
{ {
switch_id: "transcription_send", switch_id: "transcription_send",
label: t("main_window.transcription_send"), label: t("main_window.transcription_send"),
SvgComponent: MicSvg, SvgComponent: MicSvg,
currentState: currentState_TranscriptionSend, currentState: currentTranscriptionSendStatus,
toggleFunction: toggleTranscriptionSend, toggleFunction: toggleTranscriptionSend,
}, },
{ {
switch_id: "transcription_receive", switch_id: "transcription_receive",
label: t("main_window.transcription_receive"), label: t("main_window.transcription_receive"),
SvgComponent: HeadphonesSvg, SvgComponent: HeadphonesSvg,
currentState: currentState_TranscriptionReceive, currentState: currentTranscriptionReceiveStatus,
toggleFunction: toggleTranscriptionReceive, toggleFunction: toggleTranscriptionReceive,
}, },
{ {
switch_id: "foreground", switch_id: "foreground",
label: t("main_window.foreground"), label: t("main_window.foreground"),
SvgComponent: ForegroundSvg, SvgComponent: ForegroundSvg,
currentState: currentState_Foreground, currentState: currentForegroundStatus,
toggleFunction: toggleForeground, toggleFunction: toggleForeground,
}, },
]; ];
@@ -74,10 +74,10 @@ export const SwitchContainer = ({ switchLabel, switch_id, children, currentState
const [is_hovered, setIsHovered] = useState(false); const [is_hovered, setIsHovered] = useState(false);
const [is_mouse_down, setIsMouseDown] = useState(false); const [is_mouse_down, setIsMouseDown] = useState(false);
const { currentIsCompactMode } = useIsCompactMode(); const { currentMainWindowCompactModeStatus } = useMainWindowCompactModeStatus();
const getClassNames = (baseClass) => clsx(baseClass, { const getClassNames = (baseClass) => clsx(baseClass, {
[styles.is_compact_mode]: currentIsCompactMode, [styles.is_compact_mode]: currentMainWindowCompactModeStatus,
[styles.is_active]: (currentState.data === true), [styles.is_active]: (currentState.data === true),
[styles.is_loading]: (currentState.state === "loading"), [styles.is_loading]: (currentState.state === "loading"),
[styles.is_hovered]: is_hovered, [styles.is_hovered]: is_hovered,