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-11 00:45:14 +09:00
parent 5a7de58525 4d9a6fedb7
commit ccdd070fed
57 changed files with 939 additions and 695 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,7 @@
import { getCurrent } from "@tauri-apps/api/window";
import { useEffect, useRef } from "react";
import { useStartPython } from "@logics/useStartPython";
import { useConfig } from "@logics/useConfig";
// import { useConfig } from "@logics/useConfig";
import { MainPage } from "./main_page/MainPage";
import { ConfigPage } from "./config_page/ConfigPage";
import styles from "./App.module.scss";
@@ -17,22 +17,28 @@ export const App = () => {
};
import { useSoftwareVersion } from "@logics_configs/useSoftwareVersion";
import { useSelectedMicHost } from "@logics_configs/useSelectedMicHost";
import { useSelectedMicDevice } from "@logics_configs/useSelectedMicDevice";
import { useSelectedSpeakerDevice } from "@logics_configs/useSelectedSpeakerDevice";
import { useMicThreshold } from "@logics_configs/useMicThreshold";
import { useSpeakerThreshold } from "@logics_configs/useSpeakerThreshold";
import { useEnableAutoClearMessageBox } from "@logics_configs/useEnableAutoClearMessageBox";
import { useSendMessageButtonType } from "@logics_configs/useSendMessageButtonType";
const StartPythonFacadeComponent = () => {
const { asyncStartPython } = useStartPython();
const hasRunRef = useRef(false);
const main_page = getCurrent();
const {
getSoftwareVersion,
// getMicHostList,
getSelectedMicHost,
// getMicDeviceList,
getSelectedMicDevice,
getSelectedSpeakerDevice,
getEnableAutoClearMessageBox,
getSendMessageButtonType,
} = useConfig();
const { getSoftwareVersion } = useSoftwareVersion();
const { getSelectedMicHost } = useSelectedMicHost();
const { getSelectedMicDevice } = useSelectedMicDevice();
const { getSelectedSpeakerDevice } = useSelectedSpeakerDevice();
const { getMicThreshold } = useMicThreshold();
const { getSpeakerThreshold } = useSpeakerThreshold();
const { getEnableAutoClearMessageBox } = useEnableAutoClearMessageBox();
const { getSendMessageButtonType } = useSendMessageButtonType();
useEffect(() => {
@@ -40,12 +46,13 @@ const StartPythonFacadeComponent = () => {
if (!hasRunRef.current) {
asyncStartPython().then((result) => {
getSoftwareVersion();
// getMicHostList();
getSelectedMicHost();
// getMicDeviceList();
getSelectedMicDevice();
getSelectedSpeakerDevice();
getMicThreshold();
getSpeakerThreshold();
getEnableAutoClearMessageBox();
getSendMessageButtonType();
}).catch((err) => {

2
src-ui/app/config_page/ConfigPage.jsx
View File

@@ -4,7 +4,7 @@ import { Topbar } from "./topbar/Topbar.jsx";
import { SidebarSection } from "./sidebar_section/SidebarSection.jsx";
import { SettingSection } from "./setting_section/SettingSection.jsx";
import { useSoftwareVersion } from "@store";
import { useSoftwareVersion } from "@logics_configs/useSoftwareVersion";
import { useTranslation } from "react-i18next";
export const ConfigPage = () => {

12
src-ui/app/config_page/setting_section/setting_box/SettingBox.jsx
View File

@@ -1,17 +1,17 @@
import { useSelectedConfigTabId } from "@store";
import { useStore_SelectedConfigTabId } from "@store";
import { Device } from "./device/Device";
import { Appearance } from "./appearance/Appearance";
import { Others } from "./others/Others";
import { AboutVrct } from "./about_vrct/AboutVrct";
// import { Others } from "./others/Others";
// import { AboutVrct } from "./about_vrct/AboutVrct";
export const SettingBox = () => {
const { currentSelectedConfigTabId } = useSelectedConfigTabId();
const { currentSelectedConfigTabId } = useStore_SelectedConfigTabId();
switch (currentSelectedConfigTabId) {
case "device":
return <Device />;
case "others":
return <Others />;
// case "others":
// return <Others />;
// case "appearance":
// return <Appearance />;
// case "about_vrct":

6
src-ui/app/config_page/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 { useTranslation } from "react-i18next";
import { useUiLanguageStatus } from "@store";
import { useStore_UiLanguage } from "@store";
import { PosterShowcaseContents } from "./poster_showcase_contents/PosterShowcaseContents";
export const AboutVrct = () => {
const { t } = useTranslation();
const { currentUiLanguageStatus } = useUiLanguageStatus();
const { currentUiLanguage } = useStore_UiLanguage();
return (
<div className={styles.container}>
<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_members} className={styles.special_thanks_members_img} />
{
currentUiLanguageStatus === "ja"
currentUiLanguage === "ja"
? <img src={special_thanks_message_ja} className={styles.special_thanks_message_img} />
: <img src={special_thanks_message_en} className={styles.special_thanks_message_img} />
}

6
src-ui/app/config_page/setting_section/setting_box/about_vrct/poster_showcase_contents/poster_showcase_worlds_contents/PosterShowcaseWorldsContents.jsx
View File

@@ -1,6 +1,6 @@
import clsx from "clsx";
import styles from "./PosterShowcaseWorldsContents.module.scss";
import { usePosterShowcaseWorldPageIndex } from "@store";
import { useStore_PosterShowcaseWorldPageIndex } from "@store";
const images = import.meta.glob("@images/about_vrct/showcased_worlds/*.{png,jpg,jpeg,svg}", { eager: true });
const getImageByFileName = (file_name) => {
@@ -12,7 +12,7 @@ import poster_showcase_worlds_settings from "./poster_showcase_worlds_settings";
import { chunkArray } from "@utils/chunkArray";
export const PosterShowcaseWorldsContents = () => {
const { currentPosterShowcaseWorldPageIndex } = usePosterShowcaseWorldPageIndex();
const { currentPosterShowcaseWorldPageIndex } = useStore_PosterShowcaseWorldPageIndex();
const poster_showcase_world_images = poster_showcase_worlds_settings.map((setting) => ({
img: getImageByFileName(setting.image_file_name),
x_post_num: setting.x_post_num
@@ -59,7 +59,7 @@ import chat_white_square from "@images/chato_white_square.png";
import { useEffect } from "react";
import { randomIntMinMax } from "@utils/randomIntMinMax";
const PosterShowcaseWorldsPagination = ({ page_length }) => {
const { currentPosterShowcaseWorldPageIndex, updatePosterShowcaseWorldPageIndex } = usePosterShowcaseWorldPageIndex();
const { currentPosterShowcaseWorldPageIndex, updatePosterShowcaseWorldPageIndex } = useStore_PosterShowcaseWorldPageIndex();
useEffect(() => {
updatePosterShowcaseWorldPageIndex(randomIntMinMax(page_length -1));

10
src-ui/app/config_page/setting_section/setting_box/about_vrct/poster_showcase_contents/posters_contents/PostersContents.jsx
View File

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

6
src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx
View File

@@ -2,11 +2,11 @@ import { useTranslation } from "react-i18next";
import FolderOpenSvg from "@images/folder_open.svg?react";
import { useSettingBox } from "../components/useSettingBox";
import { useSelectedMicDevice, useMicDeviceList } from "@store";
import { useStore_SelectedMicDevice, useStore_MicDeviceList } from "@store";
export const Appearance = () => {
const { t } = useTranslation();
const { currentSelectedMicDevice, updateSelectedMicDevice } = useSelectedMicDevice();
const { currentMicDeviceList } = useMicDeviceList();
const { currentSelectedMicDevice, updateSelectedMicDevice } = useStore_SelectedMicDevice();
const { currentMicDeviceList } = useStore_MicDeviceList();
const {
DropdownMenuContainer,
SliderContainer,

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

@@ -1,10 +1,10 @@
import styles from "./DropdownMenu.module.scss";
import clsx from "clsx";
import ArrowLeftSvg from "@images/arrow_left.svg?react";
import { useIsOpenedDropdownMenu } from "@store";
import { useStore_IsOpenedDropdownMenu } from "@store";
export const DropdownMenu = (props) => {
const { updateIsOpenedDropdownMenu, currentIsOpenedDropdownMenu } = useIsOpenedDropdownMenu();
const { updateIsOpenedDropdownMenu, currentIsOpenedDropdownMenu } = useStore_IsOpenedDropdownMenu();
const toggleDropdownMenu = () => {
if (currentIsOpenedDropdownMenu === props.dropdown_id) {

22
src-ui/app/config_page/setting_section/setting_box/components/message_format/MessageFormat.jsx
View File

@@ -1,20 +1,20 @@
import styles from "./MessageFormat.module.scss";
import { useTranslation } from "react-i18next";
import {
useUiLanguageStatus,
useSendMessageFormat,
useSendMessageFormatWithT,
useReceivedMessageFormat,
useReceivedMessageFormatWithT,
useStore_UiLanguage,
useStore_SendMessageFormat,
useStore_SendMessageFormatWithT,
useStore_ReceivedMessageFormat,
useStore_ReceivedMessageFormatWithT,
} from "@store";
import { _Entry } from "../_atoms/_entry/_Entry";
import SwapImg from "@images/swap_icon.png";
export const MessageFormat = (props) => {
const { currentSendMessageFormat, updateSendMessageFormat } = useSendMessageFormat();
const { currentSendMessageFormatWithT, updateSendMessageFormatWithT } = useSendMessageFormatWithT();
const { currentReceivedMessageFormat, updateReceivedMessageFormat } = useReceivedMessageFormat();
const { currentReceivedMessageFormatWithT, updateReceivedMessageFormatWithT } = useReceivedMessageFormatWithT();
const { currentSendMessageFormat, updateSendMessageFormat } = useStore_SendMessageFormat();
const { currentSendMessageFormatWithT, updateSendMessageFormatWithT } = useStore_SendMessageFormatWithT();
const { currentReceivedMessageFormat, updateReceivedMessageFormat } = useStore_ReceivedMessageFormat();
const { currentReceivedMessageFormatWithT, updateReceivedMessageFormatWithT } = useStore_ReceivedMessageFormatWithT();
let atoms = [];
switch (props.id) {
@@ -49,14 +49,14 @@ export const MessageFormat = (props) => {
const ExampleComponent = ({ id, current_format }) => {
const { t } = useTranslation();
const { currentUiLanguageStatus } = useUiLanguageStatus();
const { currentUiLanguage } = useStore_UiLanguage();
const createExampleMessage = () => {
const originalLangMessage = t("config_page.send_message_format.example_text");
let format = current_format;
if (["send_with_t", "received_with_t"].includes(id)) {
const translationLocale = currentUiLanguageStatus === "en" ? "ja" : "en";
const translationLocale = currentUiLanguage === "en" ? "ja" : "en";
const translatedLangMessage = t("config_page.send_message_format.example_text", { lng: translationLocale });
return format.is_message_first

95
src-ui/app/config_page/setting_section/setting_box/components/threshold_component/ThresholdComponent.jsx
View File

@@ -1,14 +1,101 @@
import { useEffect, useState } from "react";
import styles from "./ThresholdComponent.module.scss";
import { SliderAndMeter } from "./slider_and_meter/SliderAndMeter";
import { ThresholdEntry } from "./threshold_entry/ThresholdEntry";
import { VolumeCheckButton } from "./volume_check_button/VolumeCheckButton";
import { useVolume } from "@logics/useVolume";
export const ThresholdComponent = (props) => {
return (
<div className={styles.container}>
<VolumeCheckButton {...props}/>
<SliderAndMeter {...props}/>
<ThresholdEntry/>
{props.id === "mic_threshold"
? <MicComponent {...props} />
: <SpeakerComponent {...props} />
}
</div>
);
};
import MicSvg from "@images/mic.svg?react";
import { useMicThreshold } from "@logics_configs/useMicThreshold";
const MicComponent = (props) => {
const { currentMicThreshold, setMicThreshold } = useMicThreshold();
const [ui_threshold, setUiThreshold] = useState(currentMicThreshold);
const {volumeCheckStart_Mic, volumeCheckStop_Mic, currentMicThresholdCheckStatus } = useVolume();
useEffect(() => {
setUiThreshold(currentMicThreshold);
}, [currentMicThreshold]);
const setUiThresholdFunction = (payload_ui_threshold) => {
setUiThreshold(payload_ui_threshold);
};
const setThresholdFunction = (payload_threshold) => {
setMicThreshold(payload_threshold);
};
return (
<>
<VolumeCheckButton
{...props}
SvgComponent={MicSvg}
startFunction={volumeCheckStart_Mic}
stopFunction={volumeCheckStop_Mic}
isChecking={currentMicThresholdCheckStatus}
/>
<SliderAndMeter
{...props}
ui_threshold={ui_threshold}
setUiThresholdFunction={setUiThresholdFunction}
setThresholdFunction={setThresholdFunction}
/>
<ThresholdEntry
{...props}
ui_threshold={ui_threshold}
setUiThresholdFunction={setUiThresholdFunction}
setThresholdFunction={setThresholdFunction}
/>
</>
);
};
import HeadphonesSvg from "@images/headphones.svg?react";
import { useSpeakerThreshold } from "@logics_configs/useSpeakerThreshold";
const SpeakerComponent = (props) => {
const { currentSpeakerThreshold, setSpeakerThreshold } = useSpeakerThreshold();
const [ui_threshold, setUiThreshold] = useState(currentSpeakerThreshold);
const {volumeCheckStart_Speaker, volumeCheckStop_Speaker, currentSpeakerThresholdCheckStatus } = useVolume();
useEffect(() => {
setUiThreshold(currentSpeakerThreshold);
}, [currentSpeakerThreshold]);
const setUiThresholdFunction = (payload_ui_threshold) => {
setUiThreshold(payload_ui_threshold);
};
const setThresholdFunction = (payload_threshold) => {
setSpeakerThreshold(payload_threshold);
};
return (
<>
<VolumeCheckButton
{...props}
SvgComponent={HeadphonesSvg}
startFunction={volumeCheckStart_Speaker}
stopFunction={volumeCheckStop_Speaker}
isChecking={currentSpeakerThresholdCheckStatus}
/>
<SliderAndMeter
{...props}
ui_threshold={ui_threshold}
setUiThresholdFunction={setUiThresholdFunction}
setThresholdFunction={setThresholdFunction}
/>
<ThresholdEntry
{...props}
ui_threshold={ui_threshold}
setUiThresholdFunction={setUiThresholdFunction}
setThresholdFunction={setThresholdFunction}
/>
</>
);
};

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

@@ -3,5 +3,5 @@
width: 100%;
justify-content: space-between;
align-items: center;
gap: 3rem;
gap: 2rem;
}

96
src-ui/app/config_page/setting_section/setting_box/components/threshold_component/slider_and_meter/SliderAndMeter.jsx
View File

@@ -1,44 +1,40 @@
import { useState } from "react";
import styles from "./SliderAndMeter.module.scss";
import {
useMicVolume,
useSpeakerVolume,
useStore_MicVolume,
useStore_SpeakerVolume,
} from "@store";
import { useVolume } from "@logics/useVolume";
export const SliderAndMeter = (props) => {
return (
<div className={styles.container}>
<div className={styles.meter_container}>
{props.id === "mic_threshold"
? <ThresholdVolumeMeter_Mic min={props.min} max={props.max}/>
: <ThresholdVolumeMeter_Speaker min={props.min} max={props.max}/>
? <ThresholdVolumeMeter_Mic {...props}/>
: <ThresholdVolumeMeter_Speaker {...props}/>
}
</div>
<DevSection {...props}/>
</div>
);
};
const ThresholdVolumeMeter_Mic = ({min, max}) => {
const [threshold, setThreshold] = useState(max / 2);
const ThresholdVolumeMeter_Mic = (props) => {
const { currentMicVolume } = useStore_MicVolume();
const { currentMicVolume } = useMicVolume();
const currentVolumeVariable = Math.min(currentMicVolume.data, max);
const volume_width_percentage = (currentVolumeVariable / max) * 100;
const currentVolumeVariable = Math.min(currentMicVolume.data, props.max);
const volume_width_percentage = (currentVolumeVariable / props.max) * 100;
return (
<>
<VolumeMeter volume_width_percentage={volume_width_percentage} volume={currentVolumeVariable} threshold={threshold}/>
<VolumeMeter volume_width_percentage={volume_width_percentage} volume={currentVolumeVariable} threshold={props.ui_threshold}/>
<input
type="range"
min={min}
max={max}
value={threshold}
onChange={(e) => setThreshold(e.target.value)}
min={props.min}
max={props.max}
value={props.ui_threshold}
onChange={(e) => props.setUiThresholdFunction(e.target.value)}
onMouseUp={(e) => props.setThresholdFunction(e.target.value)}
className={styles.threshold_slider}
/>
</>
@@ -46,23 +42,22 @@ const ThresholdVolumeMeter_Mic = ({min, max}) => {
};
const ThresholdVolumeMeter_Speaker = ({min, max}) => {
const [threshold, setThreshold] = useState(max / 2);
const ThresholdVolumeMeter_Speaker = (props) => {
const { currentSpeakerVolume } = useStore_SpeakerVolume();
const { currentSpeakerVolume } = useSpeakerVolume();
const currentVolumeVariable = Math.min(currentSpeakerVolume.data, max);
const volume_width_percentage = (currentVolumeVariable / max) * 100;
const currentVolumeVariable = Math.min(currentSpeakerVolume.data, props.max);
const volume_width_percentage = (currentVolumeVariable / props.max) * 100;
return (
<>
<VolumeMeter volume_width_percentage={volume_width_percentage} volume={currentSpeakerVolume} threshold={threshold}/>
<input
<VolumeMeter volume_width_percentage={volume_width_percentage} volume={currentVolumeVariable} threshold={props.ui_threshold} />
<input
type="range"
min={min}
max={max}
value={threshold}
onChange={(e) => setThreshold(e.target.value)}
min={props.min}
max={props.max}
value={props.ui_threshold}
onChange={(e) => props.setUiThresholdFunction(e.target.value)}
onMouseUp={(e) => props.setThresholdFunction(e.target.value)}
className={styles.threshold_slider}
/>
</>
@@ -70,6 +65,7 @@ const ThresholdVolumeMeter_Speaker = ({min, max}) => {
};
const VolumeMeter = ({ volume_width_percentage, volume, threshold }) => {
return (
@@ -81,44 +77,4 @@ const VolumeMeter = ({ volume_width_percentage, volume, threshold }) => {
}}
/>
);
};
const DevSection = (props) => {
const {
volumeCheckStart_Mic,
volumeCheckStop_Mic,
volumeCheckStart_Speaker,
volumeCheckStop_Speaker,
} = useVolume();
const volumeCheckStart = () => {
if (props.id === "mic_threshold") {
volumeCheckStart_Mic();
} else if (props.id === "speaker_threshold") {
volumeCheckStart_Speaker();
}
};
const volumeCheckStop = () => {
if (props.id === "mic_threshold") {
volumeCheckStop_Mic();
} else if (props.id === "speaker_threshold") {
volumeCheckStop_Speaker();
}
};
return (
<div className={styles.dev_info_box}>
<p>dev</p>
<button className={styles.volume_check_button} onClick={() => volumeCheckStart()}>Start</button>
<button className={styles.volume_check_button} onClick={() => volumeCheckStop()}>Stop</button>
<div className={styles.volume_info}>
{/* <span>Current Volume: {(currentVolumeVariable)}</span> */}
</div>
<div className={styles.threshold_info}>
{/* <span>Threshold: {props.threshold}</span> */}
</div>
</div>
);
};

29
src-ui/app/config_page/setting_section/setting_box/components/threshold_component/slider_and_meter/SliderAndMeter.module.scss
View File

@@ -52,33 +52,4 @@
&:focus {
outline: none;
}
}
// for dev
.dev_info_box {
position: absolute;
top: -4rem;
display: flex;
gap: 2rem
}
.volume_info, .threshold_info {
font-size: 1.2rem;
}
.volume_check_button {
font-size: 1.4rem;
background-color: var(--dark_800_color);
padding: 1rem;
cursor: pointer;
&:hover {
background-color: var(--dark_775_color);
}
}

54
src-ui/app/config_page/setting_section/setting_box/components/threshold_component/threshold_entry/ThresholdEntry.jsx
View File

@@ -1,22 +1,50 @@
import { useState, useEffect } from "react";
import styles from "./ThresholdEntry.module.scss";
export const ThresholdEntry = () => {
const [input_value, setInputValue] = useState();
const onChangeFunction = (e) => {
setInputValue(e.currentTarget.value);
};
export const ThresholdEntry = (props) => {
return (
<div className={styles.container}>
<div className={styles.entry_wrapper}>
<input
className={styles.entry_input_area}
onChange={onChangeFunction}
/>
{props.id === "mic_threshold"
? <ThresholdEntry_Mic {...props}/>
: <ThresholdEntry_Speaker {...props}/>
}
</div>
</div>
);
};
const ThresholdEntry_Mic = (props) => {
const onChangeFunction = (e) => {
if (e.currentTarget.value === "") {
props.setThresholdFunction("0");
} else {
props.setThresholdFunction(e.currentTarget.value);
}
};
return (
<input
className={styles.entry_input_area}
onChange={onChangeFunction}
value={props.ui_threshold}
/>
);
};
const ThresholdEntry_Speaker = (props) => {
const onChangeFunction = (e) => {
if (e.currentTarget.value === "") {
props.setThresholdFunction("0");
} else {
props.setThresholdFunction(e.currentTarget.value);
}
};
return (
<input
className={styles.entry_input_area}
onChange={onChangeFunction}
value={props.ui_threshold}
/>
);
};

3
src-ui/app/config_page/setting_section/setting_box/components/threshold_component/threshold_entry/ThresholdEntry.module.scss
View File

@@ -1,9 +1,8 @@
.container {
background-color: green;
}
.entry_wrapper {
width: 10rem;
width: 6rem;
height: 100%;
padding: 0.6rem;
background-color: var(--dark_875_color);

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

@@ -1,31 +1,27 @@
import React from "react";
import styles from "./VolumeCheckButton.module.scss";
import MicSvg from "@images/mic.svg?react";
import HeadphonesSvg from "@images/headphones.svg?react";
import clsx from "clsx";
// import { useVolume } from "@logics/useVolume";
export const VolumeCheckButton = React.memo((props) => {
const SvgComponent = props.id === "mic_threshold" ? MicSvg : HeadphonesSvg;
const getClassNames = (baseClass) => clsx(baseClass, {
// [styles.is_active]: (currentState.data === true),
// [styles.is_loading]: (currentState.state === "loading"),
// [styles.is_hovered]: is_hovered,
// [styles.is_mouse_down]: is_mouse_down,
[styles.is_active]: (props.isChecking?.data === true),
[styles.is_loading]: (props.isChecking.state === "loading"),
});
// const {
// volumeCheckStart_Mic,
// volumeCheckStop_Mic,
// } = useVolume();
const toggleFunction = () => {
if (props.isChecking?.data === true) {
props.stopFunction();
} else if (props.isChecking?.data === false) {
props.startFunction();
}
};
return (
// <div className={styles.container} onClick={() => volumeCheckStop_Mic()}>
<div className={styles.container}>
<div className={getClassNames(styles.button_button)}>
<SvgComponent className={getClassNames(styles.button_svg)} />
<div className={getClassNames(styles.button)} onClick={toggleFunction}>
<props.SvgComponent className={styles.button_svg} />
<p className={styles.button_text}>Check Volume</p>
</div>
</div>
);

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

@@ -1,14 +1,45 @@
.button_button {
.button {
width: 100%;
background-color: var(--dark_800_color);
display: flex;
justify-content: center;
align-items: center;
padding: 1rem;
border-radius: 50%;
padding: 0.8rem 1rem;
border-radius: 0.4rem;
gap: 0.4rem;
cursor: pointer;
&.is_active {
background-color: var(--primary_500_color);
&:hover {
background-color: var(--primary_450_color);
}
&:active {
background-color: var(--primary_550_color);
}
}
&.is_loading {
background-color: var(--dark_850_color);
pointer-events: none;
.button_svg, .button_text {
color: var(--dark_500_color);
}
}
&:hover {
background-color: var(--dark_775_color);
}
&:active {
background-color: var(--dark_850_color);
}
}
.button_svg {
width: 2.6rem;
width: 1.4rem;
color: var(--dark_350_color);
}
.button_text {
font-size: 1.2rem;
color: var(--dark_basic_text_color);
}

68
src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.jsx
View File

@@ -1,5 +1,5 @@
import styles from "./useSettingBox.module.scss";
import { useIsOpenedDropdownMenu } from "@store";
import { useStore_IsOpenedDropdownMenu } from "@store";
import clsx from "clsx";
import { LabelComponent } from "./label_component/LabelComponent";
@@ -15,22 +15,48 @@ import { MessageFormat } from "./message_format/MessageFormat";
import { ActionButton } from "./action_button/ActionButton";
import { WordFilter, WordFilterListToggleComponent } from "./word_filter/WordFilter";
export const useSettingBox = () => {
const { updateIsOpenedDropdownMenu } = useIsOpenedDropdownMenu();
const DropdownMenuContainer = (props) => {
const onMouseLeaveFunction = () => {
updateIsOpenedDropdownMenu("");
};
const useOnMouseLeaveDropdownMenu = () => {
const { updateIsOpenedDropdownMenu } = useStore_IsOpenedDropdownMenu();
return (
<div className={styles.container} onMouseLeave={onMouseLeaveFunction}>
<LabelComponent label={props.label} desc={props.desc} />
<DropdownMenu {...props}/>
</div>
);
const onMouseLeaveFunction = () => {
updateIsOpenedDropdownMenu("");
};
return { onMouseLeaveFunction };
};
export const DropdownMenuContainer = (props) => {
const { onMouseLeaveFunction } = useOnMouseLeaveDropdownMenu();
return (
<div className={styles.container} onMouseLeave={onMouseLeaveFunction}>
<LabelComponent label={props.label} desc={props.desc} />
<DropdownMenu {...props} />
</div>
);
};
export const ThresholdContainer = (props) => {
return (
<div className={styles.threshold_container}>
<div className={styles.threshold_switch_section}>
<LabelComponent label={props.label} desc={props.desc} />
<Switchbox {...props}/>
</div>
<div className={styles.threshold_section}>
<ThresholdComponent {...props}/>
</div>
</div>
);
};
export const useSettingBox = () => {
console.log("useSettingBox______________");
const SliderContainer = (props) => {
return (
<div className={styles.container}>
@@ -76,20 +102,6 @@ export const useSettingBox = () => {
);
};
const ThresholdContainer = (props) => {
return (
<div className={styles.threshold_container}>
<div className={styles.threshold_switch_section}>
<LabelComponent label={props.label} desc={props.desc} />
<Switchbox {...props}/>
</div>
<div className={styles.threshold_section}>
<ThresholdComponent {...props}/>
</div>
</div>
);
};
const DeeplAuthKeyContainer = (props) => {
return (
<div className={styles.container}>
@@ -144,12 +156,10 @@ export const useSettingBox = () => {
};
return {
DropdownMenuContainer,
SliderContainer,
CheckboxContainer,
SwitchboxContainer,
EntryContainer,
ThresholdContainer,
RadioButtonContainer,
DeeplAuthKeyContainer,
MessageFormatContainer,

10
src-ui/app/config_page/setting_section/setting_box/components/word_filter/WordFilter.jsx
View File

@@ -1,11 +1,11 @@
import styles from "./WordFilter.module.scss";
import { _Entry } from "../_atoms/_entry/_Entry";
import { useState } from "react";
import { useWordFilterList, useIsOpenedWordFilterList } from "@store";
import { useStore_WordFilterList, useStore_IsOpenedWordFilterList } from "@store";
export const WordFilter = () => {
const [input_value, setInputValue] = useState();
const { currentWordFilterList, updateWordFilterList } = useWordFilterList();
const { currentIsOpenedWordFilterList, updateIsOpenedWordFilterList } = useIsOpenedWordFilterList();
const { currentWordFilterList, updateWordFilterList } = useStore_WordFilterList();
const { currentIsOpenedWordFilterList, updateIsOpenedWordFilterList } = useStore_IsOpenedWordFilterList();
const onChangeEntry = (e) => {
setInputValue(e.target.value);
@@ -112,8 +112,8 @@ import { useTranslation } from "react-i18next";
import ArrowLeftSvg from "@images/arrow_left.svg?react";
export const WordFilterListToggleComponent = (props) => {
const { t } = useTranslation();
const { currentIsOpenedWordFilterList, updateIsOpenedWordFilterList } = useIsOpenedWordFilterList();
const { currentWordFilterList } = useWordFilterList();
const { currentIsOpenedWordFilterList, updateIsOpenedWordFilterList } = useStore_IsOpenedWordFilterList();
const { currentWordFilterList } = useStore_WordFilterList();
const svg_class_names = clsx(styles["arrow_left_svg"], {

220
src-ui/app/config_page/setting_section/setting_box/device/Device.jsx
View File

@@ -1,119 +1,119 @@
import { useTranslation } from "react-i18next";
import { useSettingBox } from "../components/useSettingBox";
import {
useMicHostList,
useSelectedMicHost,
useSelectedMicDevice,
useMicDeviceList,
useSelectedSpeakerDevice,
useSpeakerDeviceList,
} from "@store";
import { useConfig } from "@logics/useConfig";
DropdownMenuContainer,
ThresholdContainer,
} from "../components/useSettingBox";
export const Device = () => {
const { t } = useTranslation();
const {
DropdownMenuContainer,
ThresholdContainer,
} = useSettingBox();
const { currentMicHostList } = useMicHostList();
const { currentSelectedMicHost } = useSelectedMicHost();
const { currentMicDeviceList } = useMicDeviceList();
const { currentSelectedMicDevice } = useSelectedMicDevice();
const { currentSpeakerDeviceList } = useSpeakerDeviceList();
const { currentSelectedSpeakerDevice } = useSelectedSpeakerDevice();
const {
setSelectedMicHost,
setSelectedMicDevice,
getMicHostList,
getMicDeviceList,
setSelectedSpeakerDevice,
getSpeakerDeviceList,
} = useConfig();
const selectFunction = (selected_data) => {
switch (selected_data.dropdown_id) {
case "mic_host":
setSelectedMicHost(selected_data.selected_id);
break;
case "mic_device":
setSelectedMicDevice(selected_data.selected_id);
break;
case "speaker_device":
setSelectedSpeakerDevice(selected_data.selected_id);
break;
default:
break;
}
};
// const volumeCheckStartFunction_Mic = () => {
// volumeCheckStart_Mic();
// };
// const volumeCheckStopFunction_Mic = () => {
// volumeCheckStop_Mic();
// };
return (
<>
<DropdownMenuContainer
dropdown_id="mic_host"
label={t("config_page.mic_host.label")}
selected_id={currentSelectedMicHost.data}
list={currentMicHostList.data}
selectFunction={selectFunction}
openListFunction={getMicHostList}
state={currentSelectedMicHost.state}
/>
<DropdownMenuContainer
dropdown_id="mic_device"
label={t("config_page.mic_device.label")}
selected_id={currentSelectedMicDevice.data}
list={currentMicDeviceList.data}
selectFunction={selectFunction}
openListFunction={getMicDeviceList}
state={currentSelectedMicDevice.state}
/>
<ThresholdContainer
label={t("config_page.mic_dynamic_energy_threshold.label_for_manual")}
desc={t("config_page.mic_dynamic_energy_threshold.desc_for_manual")}
id="mic_threshold"
min="0"
max="2000"
// volumeCheckStartFunction={volumeCheckStartFunction_Mic}
// volumeCheckStopFunction={volumeCheckStopFunction_Mic}
/>
<DropdownMenuContainer
dropdown_id="speaker_device"
label={t("config_page.speaker_device.label")}
selected_id={currentSelectedSpeakerDevice.data}
list={currentSpeakerDeviceList.data}
selectFunction={selectFunction}
openListFunction={getSpeakerDeviceList}
state={currentSelectedSpeakerDevice.state}
/>
<ThresholdContainer
label={t("config_page.speaker_dynamic_energy_threshold.label_for_manual")}
desc={t("config_page.speaker_dynamic_energy_threshold.desc_for_manual")}
id="speaker_threshold"
min="0"
max="4000"
/>
<DropdownMenuContainer_MicHost />
<DropdownMenuContainer_MicDevice />
<ThresholdContainer_Mic />
<DropdownMenuContainer_SpeakerDevice />
<ThresholdContainer_Speaker />
</>
);
};
import { useMicHostList } from "@logics_configs/useMicHostList";
import { useSelectedMicHost } from "@logics_configs/useSelectedMicHost";
const DropdownMenuContainer_MicHost = () => {
const { t } = useTranslation();
const { currentSelectedMicHost, setSelectedMicHost } = useSelectedMicHost();
const { currentMicHostList, getMicHostList } = useMicHostList();
const selectFunction = (selected_data) => {
setSelectedMicHost(selected_data.selected_id);
};
return (
<DropdownMenuContainer
dropdown_id="mic_host"
label={t("config_page.mic_host.label")}
selected_id={currentSelectedMicHost.data}
list={currentMicHostList.data}
selectFunction={selectFunction}
openListFunction={getMicHostList}
state={currentSelectedMicHost.state}
/>
);
};
import { useMicDeviceList } from "@logics_configs/useMicDeviceList";
import { useSelectedMicDevice } from "@logics_configs/useSelectedMicDevice";
const DropdownMenuContainer_MicDevice = () => {
const { t } = useTranslation();
const { currentSelectedMicDevice, setSelectedMicDevice } = useSelectedMicDevice();
const { currentMicDeviceList, getMicDeviceList } = useMicDeviceList();
const selectFunction = (selected_data) => {
setSelectedMicDevice(selected_data.selected_id);
};
return (
<DropdownMenuContainer
dropdown_id="mic_device"
label={t("config_page.mic_device.label")}
selected_id={currentSelectedMicDevice.data}
list={currentMicDeviceList.data}
selectFunction={selectFunction}
openListFunction={getMicDeviceList}
state={currentSelectedMicDevice.state}
/>
);
};
import { useSpeakerDeviceList } from "@logics_configs/useSpeakerDeviceList";
import { useSelectedSpeakerDevice } from "@logics_configs/useSelectedSpeakerDevice";
const DropdownMenuContainer_SpeakerDevice = () => {
const { t } = useTranslation();
const { currentSelectedSpeakerDevice, setSelectedSpeakerDevice } = useSelectedSpeakerDevice();
const { currentSpeakerDeviceList, getSpeakerDeviceList } = useSpeakerDeviceList();
const selectFunction = (selected_data) => {
setSelectedSpeakerDevice(selected_data.selected_id);
};
return (
<DropdownMenuContainer
dropdown_id="speaker_device"
label={t("config_page.speaker_device.label")}
selected_id={currentSelectedSpeakerDevice.data}
list={currentSpeakerDeviceList.data}
selectFunction={selectFunction}
openListFunction={getSpeakerDeviceList}
state={currentSelectedSpeakerDevice.state}
/>
);
};
const ThresholdContainer_Mic = () => {
const { t } = useTranslation();
return (
<ThresholdContainer
label={t("config_page.mic_dynamic_energy_threshold.label_for_manual")}
desc={t("config_page.mic_dynamic_energy_threshold.desc_for_manual")}
id="mic_threshold"
min="0"
max="2000"
/>
);
};
const ThresholdContainer_Speaker = () => {
const { t } = useTranslation();
return (
<ThresholdContainer
label={t("config_page.speaker_dynamic_energy_threshold.label_for_manual")}
desc={t("config_page.speaker_dynamic_energy_threshold.desc_for_manual")}
id="speaker_threshold"
min="0"
max="4000"
/>
);
};

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

@@ -1,7 +1,7 @@
import { useTranslation } from "react-i18next";
import { useSettingBox } from "../components/useSettingBox";
// import {
// useEnableAutoClearMessageBox,
// useStore_EnableAutoClearMessageBox,
// } from "@store";
import { useConfig } from "@logics/useConfig";

4
src-ui/app/config_page/sidebar_section/SidebarSection.jsx
View File

@@ -22,11 +22,11 @@ export const SidebarSection = () => {
import clsx from "clsx";
import { useTranslation } from "react-i18next";
import { useSelectedConfigTabId } from "@store";
import { useStore_SelectedConfigTabId } from "@store";
const Tab = (props) => {
const { t } = useTranslation();
const { updateSelectedConfigTabId, currentSelectedConfigTabId } = useSelectedConfigTabId();
const { updateSelectedConfigTabId, currentSelectedConfigTabId } = useStore_SelectedConfigTabId();
const onclickFunction = () => {
updateSelectedConfigTabId(props.tab_id);
};

4
src-ui/app/config_page/topbar/Topbar.jsx
View File

@@ -1,7 +1,7 @@
import clsx from "clsx";
import styles from "./Topbar.module.scss";
import { useIsOpenedConfigPage } from "@store";
import { useStore_IsOpenedConfigPage } from "@store";
import ArrowLeftSvg from "@images/arrow_left.svg?react";
import { TitleBox } from "./title_box/TitleBox";
@@ -9,7 +9,7 @@ import { SectionTitleBox } from "./section_title_box/SectionTitleBox";
import { CompactSwitchBox } from "./compact_switch_box/CompactSwitchBox";
export const Topbar = () => {
const { currentIsOpenedConfigPage, updateIsOpenedConfigPage } = useIsOpenedConfigPage();
const { currentIsOpenedConfigPage, updateIsOpenedConfigPage } = useStore_IsOpenedConfigPage();
const closeConfigPage = () => {
updateIsOpenedConfigPage(false);
};

4
src-ui/app/config_page/topbar/section_title_box/SectionTitleBox.jsx
View File

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

4
src-ui/app/main_page/MainPage.jsx
View File

@@ -2,10 +2,10 @@ import clsx from "clsx";
import styles from "./MainPage.module.scss";
import { SidebarSection } from "./sidebar_section/SidebarSection";
import { MainSection } from "./main_section/MainSection";
import { useIsOpenedConfigPage } from "@store";
import { useStore_IsOpenedConfigPage } from "@store";
export const MainPage = () => {
const { currentIsOpenedConfigPage } = useIsOpenedConfigPage();
const { currentIsOpenedConfigPage } = useStore_IsOpenedConfigPage();
return (
<div className={clsx(styles.page, styles.main_page, {

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

@@ -4,7 +4,7 @@ import { TopBar } from "./top_bar/TopBar";
import { MessageContainer } from "./message_container/MessageContainer";
import { LanguageSelector } from "./language_selector/LanguageSelector";
import { useIsOpenedLanguageSelector } from "@store";
import { useStore_IsOpenedLanguageSelector } from "@store";
export const MainSection = () => {
@@ -18,7 +18,7 @@ export const MainSection = () => {
};
const HandleLanguageSelector = () => {
const { currentIsOpenedLanguageSelector } = useIsOpenedLanguageSelector();
const { currentIsOpenedLanguageSelector } = useStore_IsOpenedLanguageSelector();
if (currentIsOpenedLanguageSelector.your_language === true) {
return <LanguageSelector id="your_language"/>;

4
src-ui/app/main_page/main_section/language_selector/language_selector_top_bar/LanguageSelectorTopBar.jsx
View File

@@ -1,9 +1,9 @@
import styles from "./LanguageSelectorTopBar.module.scss";
import { useIsOpenedLanguageSelector } from "@store";
import { useStore_IsOpenedLanguageSelector } from "@store";
export const LanguageSelectorTopBar = (props) => {
const { updateIsOpenedLanguageSelector } = useIsOpenedLanguageSelector();
const { updateIsOpenedLanguageSelector } = useStore_IsOpenedLanguageSelector();
const closeLanguageSelector = () => {
updateIsOpenedLanguageSelector({

8
src-ui/app/main_page/main_section/message_container/log_box/LogBox.jsx
View File

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

7
src-ui/app/main_page/main_section/message_container/message_input_box/MessageInputBox.jsx
View File

@@ -2,16 +2,17 @@ import { useState } from "react";
import styles from "./MessageInputBox.module.scss";
import SendMessageSvg from "@images/send_message.svg?react";
import { useMessage } from "@logics/useMessage";
import { store, useEnableAutoClearMessageBox } from "@store";
import { store } from "@store";
import { scrollToBottom } from "@logics/scrollToBottom";
import { useConfig } from "@logics/useConfig";
import { useSendMessageButtonType } from "@logics_configs/useSendMessageButtonType";
import { useEnableAutoClearMessageBox } from "@logics_configs/useEnableAutoClearMessageBox";
export const MessageInputBox = () => {
const [inputValue, setInputValue] = useState("");
const { sendMessage } = useMessage();
const { currentEnableAutoClearMessageBox } = useEnableAutoClearMessageBox();
const { currentSendMessageButtonType } = useConfig();
const { currentSendMessageButtonType } = useSendMessageButtonType();
const onSubmitFunction = (e) => {
e.preventDefault();

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

@@ -1,18 +1,18 @@
import clsx from "clsx";
import styles from "./SidebarCompactModeButton.module.scss";
import { useMainPageCompactModeStatus } from "@store";
import { useStore_IsMainPageCompactMode } from "@store";
import ArrowLeftSvg from "@images/arrow_left.svg?react";
export const SidebarCompactModeButton = () => {
const { updateMainPageCompactModeStatus, currentMainPageCompactModeStatus } = useMainPageCompactModeStatus();
const { updateIsMainPageCompactMode, currentIsMainPageCompactMode } = useStore_IsMainPageCompactMode();
const toggleCompactMode = () => {
updateMainPageCompactModeStatus(!currentMainPageCompactModeStatus);
updateIsMainPageCompactMode(!currentIsMainPageCompactMode);
};
const class_names = clsx(styles["arrow_left_svg"], {
[styles["reverse"]]: currentMainPageCompactModeStatus
[styles["reverse"]]: currentIsMainPageCompactMode
});
return (

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

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

8
src-ui/app/main_page/sidebar_section/language_settings/LanguageSettings.jsx
View File

@@ -6,10 +6,10 @@ import { PresetTabSelector } from "./preset_tab_selector/PresetTabSelector";
import { LanguageSelectorOpenButton } from "./language_selector_open_button/LanguageSelectorOpenButton";
import { LanguageSwapButton } from "./language_swap_button/LanguageSwapButton";
import { TranslatorSelectorOpenButton } from "./translator_selector_open_button/TranslatorSelectorOpenButton";
import { useIsOpenedTranslatorSelector } from "@store";
import { useStore_IsOpenedTranslatorSelector } from "@store";
export const LanguageSettings = () => {
const { updateIsOpenedTranslatorSelector} = useIsOpenedTranslatorSelector();
const { updateIsOpenedTranslatorSelector} = useStore_IsOpenedTranslatorSelector();
const closeTranslatorSelector = () => updateIsOpenedTranslatorSelector(false);
return (
@@ -24,12 +24,12 @@ export const LanguageSettings = () => {
import MicSvg from "@images/mic.svg?react";
import HeadphonesSvg from "@images/headphones.svg?react";
import { useIsOpenedLanguageSelector } from "@store";
import { useStore_IsOpenedLanguageSelector } from "@store";
import { useMainFunction } from "@logics/useMainFunction";
const PresetContainer = () => {
const { t } = useTranslation();
const { updateIsOpenedLanguageSelector, currentIsOpenedLanguageSelector } = useIsOpenedLanguageSelector();
const { updateIsOpenedLanguageSelector, currentIsOpenedLanguageSelector } = useStore_IsOpenedLanguageSelector();
const {
currentTranscriptionSendStatus,

8
src-ui/app/main_page/sidebar_section/language_settings/preset_tab_selector/PresetTabSelector.jsx
View File

@@ -12,16 +12,16 @@ export const PresetTabSelector = () => {
import clsx from "clsx";
import { useSelectedPresetTabStatus } from "@store";
import { useStore_SelectedPresetTabNumber } from "@store";
const Tab = (props) => {
const { updateSelectedPresetTabStatus, currentSelectedPresetTabStatus } = useSelectedPresetTabStatus();
const { updateSelectedPresetTabNumber, currentSelectedPresetTabNumber } = useStore_SelectedPresetTabNumber();
const onclickFunction = () => {
updateSelectedPresetTabStatus(props.preset_number);
updateSelectedPresetTabNumber(props.preset_number);
};
const class_names = clsx(styles["tab_container"], {
[styles["is_selected"]]: (currentSelectedPresetTabStatus === props.preset_number) ? true : false
[styles["is_selected"]]: (currentSelectedPresetTabNumber === props.preset_number) ? true : false
});
return (

12
src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.jsx
View File

@@ -2,17 +2,17 @@ import { useTranslation } from "react-i18next";
import styles from "./TranslatorSelectorOpenButton.module.scss";
import { TranslatorSelector } from "./translator_selector/TranslatorSelector";
import { useTranslatorListStatus, useSelectedTranslatorIdStatus, useIsOpenedTranslatorSelector } from "@store";
import { useStore_TranslatorList, useStore_SelectedTranslatorId, useStore_IsOpenedTranslatorSelector } from "@store";
export const TranslatorSelectorOpenButton = () => {
const { t } = useTranslation();
const { currentSelectedTranslatorIdStatus } = useSelectedTranslatorIdStatus();
const { currentTranslatorListStatus } = useTranslatorListStatus();
const currentTranslator = currentTranslatorListStatus.find(
translator_data => translator_data.translator_key === currentSelectedTranslatorIdStatus
const { currentSelectedTranslatorId } = useStore_SelectedTranslatorId();
const { currentTranslatorList } = useStore_TranslatorList();
const currentTranslator = currentTranslatorList.find(
translator_data => translator_data.translator_key === currentSelectedTranslatorId
);
const { currentIsOpenedTranslatorSelector, updateIsOpenedTranslatorSelector} = useIsOpenedTranslatorSelector();
const { currentIsOpenedTranslatorSelector, updateIsOpenedTranslatorSelector} = useStore_IsOpenedTranslatorSelector();
const openTranslatorSelector = () => updateIsOpenedTranslatorSelector(!currentIsOpenedTranslatorSelector);

14
src-ui/app/main_page/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 { chunkArray } from "@utils/chunkArray";
import { useTranslatorListStatus, useSelectedTranslatorIdStatus, useIsOpenedTranslatorSelector } from "@store";
import { useStore_TranslatorList, useStore_SelectedTranslatorId, useStore_IsOpenedTranslatorSelector } from "@store";
export const TranslatorSelector = () => {
const { currentTranslatorListStatus } = useTranslatorListStatus();
const columns = chunkArray(currentTranslatorListStatus, 2);
const { currentTranslatorList } = useStore_TranslatorList();
const columns = chunkArray(currentTranslatorList, 2);
return (
<div className={styles.container}>
@@ -28,17 +28,17 @@ export const TranslatorSelector = () => {
import clsx from "clsx";
const TranslatorBox = (props) => {
const { currentSelectedTranslatorIdStatus, updateSelectedTranslatorIdStatus} = useSelectedTranslatorIdStatus();
const { updateIsOpenedTranslatorSelector} = useIsOpenedTranslatorSelector();
const { currentSelectedTranslatorId, updateSelectedTranslatorId} = useStore_SelectedTranslatorId();
const { updateIsOpenedTranslatorSelector} = useStore_IsOpenedTranslatorSelector();
const box_class_name = clsx(
styles.box,
{ [styles["is_selected"]]: (currentSelectedTranslatorIdStatus === props.translator_id) ? true : false },
{ [styles["is_selected"]]: (currentSelectedTranslatorId === props.translator_id) ? true : false },
{ [styles["is_available"]]: (props.is_available === true) ? true : false }
);
const selectTranslator = () => {
updateSelectedTranslatorIdStatus(props.translator_id);
updateSelectedTranslatorId(props.translator_id);
updateIsOpenedTranslatorSelector(false);
};
return (

6
src-ui/app/main_page/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 chato_img from "@images/chato_white.png";
import { useMainPageCompactModeStatus } from "@store";
import { useStore_IsMainPageCompactMode } from "@store";
export const LogoBox = () => {
const { currentMainPageCompactModeStatus } = useMainPageCompactModeStatus();
if (currentMainPageCompactModeStatus === true) {
const { currentIsMainPageCompactMode } = useStore_IsMainPageCompactMode();
if (currentIsMainPageCompactMode === true) {
return <img src={chato_img} className={styles.logo_chato} alt="VRCT logo chato" />;
} else {
return <img src={vrct_logo} className={styles.logo} alt="VRCT logo" />;

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 { useMainPageCompactModeStatus } from "@store";
import { useStore_IsMainPageCompactMode } from "@store";
import { useMainFunction } from "@logics/useMainFunction";
@@ -74,10 +74,10 @@ export const SwitchContainer = ({ switchLabel, switch_id, children, currentState
const [is_hovered, setIsHovered] = useState(false);
const [is_mouse_down, setIsMouseDown] = useState(false);
const { currentMainPageCompactModeStatus } = useMainPageCompactModeStatus();
const { currentIsMainPageCompactMode } = useStore_IsMainPageCompactMode();
const getClassNames = (baseClass) => clsx(baseClass, {
[styles.is_compact_mode]: currentMainPageCompactModeStatus,
[styles.is_compact_mode]: currentIsMainPageCompactMode,
[styles.is_active]: (currentState.data === true),
[styles.is_loading]: (currentState.state === "loading"),
[styles.is_hovered]: is_hovered,

4
src-ui/app/main_page/sidebar_section/open_settings/OpenSettings.jsx
View File

@@ -1,9 +1,9 @@
import styles from "./OpenSettings.module.scss";
import { useIsOpenedConfigPage } from "@store";
import { useStore_IsOpenedConfigPage } from "@store";
import ConfigurationSvg from "@images/configuration.svg?react";
export const OpenSettings = () => {
const { updateIsOpenedConfigPage } = useIsOpenedConfigPage();
const { updateIsOpenedConfigPage } = useStore_IsOpenedConfigPage();
const openConfigPage = () => {
updateIsOpenedConfigPage(true);

28
src-ui/logics/configs/useEnableAutoClearMessageBox.js Normal file
View File

@@ -0,0 +1,28 @@
import { useStore_EnableAutoClearMessageBox } from "@store";
import { useStdoutToPython } from "@logics/useStdoutToPython";
export const useEnableAutoClearMessageBox = () => {
const { asyncStdoutToPython } = useStdoutToPython();
const { currentEnableAutoClearMessageBox, updateEnableAutoClearMessageBox } = useStore_EnableAutoClearMessageBox();
const getEnableAutoClearMessageBox = () => {
updateEnableAutoClearMessageBox(() => new Promise(() => {}));
asyncStdoutToPython("/config/enable_auto_clear_message_box");
};
const toggleEnableAutoClearMessageBox = () => {
updateEnableAutoClearMessageBox(() => new Promise(() => {}));
if (currentEnableAutoClearMessageBox.data) {
asyncStdoutToPython("/controller/callback_disable_auto_clear_chatbox");
} else {
asyncStdoutToPython("/controller/callback_enable_auto_clear_chatbox");
}
};
return {
currentEnableAutoClearMessageBox,
getEnableAutoClearMessageBox,
toggleEnableAutoClearMessageBox,
updateEnableAutoClearMessageBox,
};
};

18
src-ui/logics/configs/useMicDeviceList.js Normal file
View File

@@ -0,0 +1,18 @@
import { useStore_MicDeviceList } from "@store";
import { useStdoutToPython } from "@logics/useStdoutToPython";
export const useMicDeviceList = () => {
const { asyncStdoutToPython } = useStdoutToPython();
const { currentMicDeviceList, updateMicDeviceList } = useStore_MicDeviceList();
const getMicDeviceList = () => {
updateMicDeviceList(() => new Promise(() => {}));
asyncStdoutToPython("/controller/list_mic_device");
};
return {
currentMicDeviceList,
getMicDeviceList,
updateMicDeviceList,
};
};

18
src-ui/logics/configs/useMicHostList.js Normal file
View File

@@ -0,0 +1,18 @@
import { useStore_MicHostList } from "@store";
import { useStdoutToPython } from "@logics/useStdoutToPython";
export const useMicHostList = () => {
const { asyncStdoutToPython } = useStdoutToPython();
const { currentMicHostList, updateMicHostList } = useStore_MicHostList();
const getMicHostList = () => {
updateMicHostList(() => new Promise(() => {}));
asyncStdoutToPython("/controller/list_mic_host");
};
return {
currentMicHostList,
getMicHostList,
updateMicHostList,
};
};

22
src-ui/logics/configs/useMicThreshold.js Normal file
View File

@@ -0,0 +1,22 @@
import { useStore_MicThreshold } from "@store";
import { useStdoutToPython } from "@logics/useStdoutToPython";
export const useMicThreshold = () => {
const { asyncStdoutToPython } = useStdoutToPython();
const { updateMicThreshold, currentMicThreshold } = useStore_MicThreshold();
const getMicThreshold = () => {
asyncStdoutToPython("/config/input_mic_energy_threshold");
};
const setMicThreshold = (mic_threshold) => {
asyncStdoutToPython("/controller/callback_set_mic_energy_threshold", mic_threshold);
};
return {
currentMicThreshold,
getMicThreshold,
setMicThreshold,
updateMicThreshold,
};
};

24
src-ui/logics/configs/useSelectedMicDevice.js Normal file
View File

@@ -0,0 +1,24 @@
import { useStore_SelectedMicDevice } from "@store";
import { useStdoutToPython } from "@logics/useStdoutToPython";
export const useSelectedMicDevice = () => {
const { asyncStdoutToPython } = useStdoutToPython();
const { currentSelectedMicDevice, updateSelectedMicDevice } = useStore_SelectedMicDevice();
const getSelectedMicDevice = () => {
updateSelectedMicDevice(() => new Promise(() => {}));
asyncStdoutToPython("/config/choice_mic_device");
};
const setSelectedMicDevice = (selected_mic_device) => {
updateSelectedMicDevice(() => new Promise(() => {}));
asyncStdoutToPython("/controller/callback_set_mic_device", selected_mic_device);
};
return {
currentSelectedMicDevice,
getSelectedMicDevice,
updateSelectedMicDevice,
setSelectedMicDevice,
};
};

24
src-ui/logics/configs/useSelectedMicHost.js Normal file
View File

@@ -0,0 +1,24 @@
import { useStore_SelectedMicHost } from "@store";
import { useStdoutToPython } from "@logics/useStdoutToPython";
export const useSelectedMicHost = () => {
const { asyncStdoutToPython } = useStdoutToPython();
const { currentSelectedMicHost, updateSelectedMicHost } = useStore_SelectedMicHost();
const getSelectedMicHost = () => {
updateSelectedMicHost(() => new Promise(() => {}));
asyncStdoutToPython("/config/choice_mic_host");
};
const setSelectedMicHost = (selected_mic_host) => {
updateSelectedMicHost(() => new Promise(() => {}));
asyncStdoutToPython("/controller/callback_set_mic_host", selected_mic_host);
};
return {
currentSelectedMicHost,
getSelectedMicHost,
updateSelectedMicHost,
setSelectedMicHost,
};
};

24
src-ui/logics/configs/useSelectedSpeakerDevice.js Normal file
View File

@@ -0,0 +1,24 @@
import { useStore_SelectedSpeakerDevice } from "@store";
import { useStdoutToPython } from "@logics/useStdoutToPython";
export const useSelectedSpeakerDevice = () => {
const { asyncStdoutToPython } = useStdoutToPython();
const { currentSelectedSpeakerDevice, updateSelectedSpeakerDevice } = useStore_SelectedSpeakerDevice();
const getSelectedSpeakerDevice = () => {
updateSelectedSpeakerDevice(() => new Promise(() => {}));
asyncStdoutToPython("/config/choice_speaker_device");
};
const setSelectedSpeakerDevice = (selected_speaker_device) => {
updateSelectedSpeakerDevice(() => new Promise(() => {}));
asyncStdoutToPython("/controller/callback_set_speaker_device", selected_speaker_device);
};
return {
currentSelectedSpeakerDevice,
getSelectedSpeakerDevice,
updateSelectedSpeakerDevice,
setSelectedSpeakerDevice,
};
};

24
src-ui/logics/configs/useSendMessageButtonType.js Normal file
View File

@@ -0,0 +1,24 @@
import { useStore_SendMessageButtonType } from "@store";
import { useStdoutToPython } from "@logics/useStdoutToPython";
export const useSendMessageButtonType = () => {
const { asyncStdoutToPython } = useStdoutToPython();
const { currentSendMessageButtonType, updateSendMessageButtonType } = useStore_SendMessageButtonType();
const getSendMessageButtonType = () => {
updateSendMessageButtonType(() => new Promise(() => {}));
asyncStdoutToPython("/config/send_message_button_type");
};
const setSendMessageButtonType = (selected_type) => {
updateSendMessageButtonType(() => new Promise(() => {}));
asyncStdoutToPython("/controller/callback_set_send_message_button_type", selected_type);
};
return {
currentSendMessageButtonType,
getSendMessageButtonType,
setSendMessageButtonType,
updateSendMessageButtonType,
};
};

18
src-ui/logics/configs/useSoftwareVersion.js Normal file
View File

@@ -0,0 +1,18 @@
import { useStore_SoftwareVersion } from "@store";
import { useStdoutToPython } from "@logics/useStdoutToPython";
export const useSoftwareVersion = () => {
const { asyncStdoutToPython } = useStdoutToPython();
const { currentSoftwareVersion, updateSoftwareVersion } = useStore_SoftwareVersion();
const getSoftwareVersion = () => {
updateSoftwareVersion(() => new Promise(() => {}));
asyncStdoutToPython("/config/version");
};
return {
currentSoftwareVersion,
getSoftwareVersion,
updateSoftwareVersion,
};
};

18
src-ui/logics/configs/useSpeakerDeviceList.js Normal file
View File

@@ -0,0 +1,18 @@
import { useStore_SpeakerDeviceList } from "@store";
import { useStdoutToPython } from "@logics/useStdoutToPython";
export const useSpeakerDeviceList = () => {
const { asyncStdoutToPython } = useStdoutToPython();
const { currentSpeakerDeviceList, updateSpeakerDeviceList } = useStore_SpeakerDeviceList();
const getSpeakerDeviceList = () => {
updateSpeakerDeviceList(() => new Promise(() => {}));
asyncStdoutToPython("/controller/list_speaker_device");
};
return {
currentSpeakerDeviceList,
getSpeakerDeviceList,
updateSpeakerDeviceList,
};
};

22
src-ui/logics/configs/useSpeakerThreshold.js Normal file
View File

@@ -0,0 +1,22 @@
import { useStore_SpeakerThreshold } from "@store";
import { useStdoutToPython } from "@logics/useStdoutToPython";
export const useSpeakerThreshold = () => {
const { asyncStdoutToPython } = useStdoutToPython();
const { updateSpeakerThreshold, currentSpeakerThreshold } = useStore_SpeakerThreshold();
const getSpeakerThreshold = () => {
asyncStdoutToPython("/config/input_speaker_energy_threshold");
};
const setSpeakerThreshold = (speaker_threshold) => {
asyncStdoutToPython("/controller/callback_set_speaker_energy_threshold", speaker_threshold);
};
return {
currentSpeakerThreshold,
getSpeakerThreshold,
setSpeakerThreshold,
updateSpeakerThreshold,
};
};

138
src-ui/logics/useConfig.js
View File

@@ -1,138 +0,0 @@
import {
useSoftwareVersion,
useMicHostList,
useSelectedMicHost,
useMicDeviceList,
useSelectedMicDevice,
useSpeakerDeviceList,
useSelectedSpeakerDevice,
useEnableAutoClearMessageBox,
useSendMessageButtonType,
} from "@store";
import { useStdoutToPython } from "./useStdoutToPython";
import { arrayToObject } from "@utils/arrayToObject";
export const useConfig = () => {
const { asyncStdoutToPython } = useStdoutToPython();
const { updateSoftwareVersion } = useSoftwareVersion();
const { updateMicHostList } = useMicHostList();
const { updateSelectedMicHost } = useSelectedMicHost();
const { updateMicDeviceList } = useMicDeviceList();
const { updateSelectedMicDevice } = useSelectedMicDevice();
const { updateSpeakerDeviceList } = useSpeakerDeviceList();
const { updateSelectedSpeakerDevice } = useSelectedSpeakerDevice();
const { currentEnableAutoClearMessageBox, updateEnableAutoClearMessageBox } = useEnableAutoClearMessageBox();
const { currentSendMessageButtonType, updateSendMessageButtonType } = useSendMessageButtonType();
const asyncPending = () => new Promise(() => {});
return {
getSoftwareVersion: () => {
updateSoftwareVersion(asyncPending);
asyncStdoutToPython("/config/version");
},
updateSoftwareVersion: (payload) => updateSoftwareVersion(payload.data),
getMicHostList: () => {
updateMicHostList(asyncPending);
asyncStdoutToPython("/controller/list_mic_host");
},
updateMicHostList: (payload) => {
updateMicHostList(arrayToObject(payload.data));
},
getSelectedMicHost: () => {
updateSelectedMicHost(asyncPending);
asyncStdoutToPython("/config/choice_mic_host");
},
updateSelectedMicHost: (payload) => {
updateSelectedMicHost(payload.data);
},
setSelectedMicHost: (selected_mic_host) => {
updateSelectedMicHost(asyncPending);
asyncStdoutToPython("/controller/callback_set_mic_host", selected_mic_host);
},
getMicDeviceList: () => {
updateMicDeviceList(asyncPending);
asyncStdoutToPython("/controller/list_mic_device");
},
updateMicDeviceList: (payload) => {
updateMicDeviceList(arrayToObject(payload.data));
},
getSelectedMicDevice: () => {
updateSelectedMicDevice(asyncPending);
asyncStdoutToPython("/config/choice_mic_device");
},
updateSelectedMicDevice: (payload) => {
updateSelectedMicDevice(payload.data);
},
setSelectedMicDevice: (selected_mic_device) => {
updateSelectedMicDevice(asyncPending);
asyncStdoutToPython("/controller/callback_set_mic_device", selected_mic_device);
},
getSpeakerDeviceList: () => {
updateSpeakerDeviceList(asyncPending);
asyncStdoutToPython("/controller/list_speaker_device");
},
updateSpeakerDeviceList: (payload) => {
updateSpeakerDeviceList(arrayToObject(payload.data));
},
getSelectedSpeakerDevice: () => {
updateSelectedSpeakerDevice(asyncPending);
asyncStdoutToPython("/config/choice_speaker_device");
},
updateSelectedSpeakerDevice: (payload) => {
updateSelectedSpeakerDevice(payload.data);
},
setSelectedSpeakerDevice: (selected_speaker_device) => {
updateSelectedSpeakerDevice(asyncPending);
asyncStdoutToPython("/controller/callback_set_speaker_device", selected_speaker_device);
},
updateMicHostAndDevice: (payload) => {
updateSelectedMicHost(payload.data.host);
updateSelectedMicDevice(payload.data.device);
},
// Others
getEnableAutoClearMessageBox: () => {
updateEnableAutoClearMessageBox(asyncPending);
asyncStdoutToPython("/config/enable_auto_clear_message_box");
},
toggleEnableAutoClearMessageBox: () => {
updateEnableAutoClearMessageBox(asyncPending);
if (currentEnableAutoClearMessageBox.data) {
asyncStdoutToPython("/controller/callback_disable_auto_clear_chatbox");
} else {
asyncStdoutToPython("/controller/callback_enable_auto_clear_chatbox");
}
},
currentEnableAutoClearMessageBox: currentEnableAutoClearMessageBox,
updateEnableAutoClearMessageBox: (payload) => {
updateEnableAutoClearMessageBox(payload.data);
},
getSendMessageButtonType: () => {
updateSendMessageButtonType(asyncPending);
asyncStdoutToPython("/config/send_message_button_type");
},
setSendMessageButtonType: (selected_type) => {
updateSendMessageButtonType(asyncPending);
asyncStdoutToPython("/controller/callback_set_send_message_button_type", selected_type);
},
currentSendMessageButtonType: currentSendMessageButtonType,
updateSendMessageButtonType: (payload) => {
updateSendMessageButtonType(payload.data);
},
};
};

107
src-ui/logics/useMainFunction.js
View File

@@ -1,85 +1,88 @@
import { getCurrent } from "@tauri-apps/api/window";
import {
useTranslationStatus,
useTranscriptionSendStatus,
useTranscriptionReceiveStatus,
useForegroundStatus,
useStore_TranslationStatus,
useStore_TranscriptionSendStatus,
useStore_TranscriptionReceiveStatus,
useStore_ForegroundStatus,
} from "@store";
import { useStdoutToPython } from "./useStdoutToPython";
import { useStdoutToPython } from "@logics/useStdoutToPython";
export const useMainFunction = () => {
const {
currentTranslationStatus,
updateTranslationStatus,
asyncUpdateTranslationStatus,
} = useTranslationStatus();
} = useStore_TranslationStatus();
const {
currentTranscriptionSendStatus,
updateTranscriptionSendStatus,
asyncUpdateTranscriptionSendStatus,
} = useTranscriptionSendStatus();
} = useStore_TranscriptionSendStatus();
const {
currentTranscriptionReceiveStatus,
updateTranscriptionReceiveStatus,
asyncUpdateTranscriptionReceiveStatus,
} = useTranscriptionReceiveStatus();
} = useStore_TranscriptionReceiveStatus();
const {
currentForegroundStatus,
updateForegroundStatus,
} = useForegroundStatus();
} = useStore_ForegroundStatus();
const { asyncStdoutToPython } = useStdoutToPython();
const asyncPending = () => new Promise(() => {});
const toggleTranslation = () => {
asyncUpdateTranslationStatus(asyncPending);
if (currentTranslationStatus.data) {
asyncStdoutToPython("/controller/callback_disable_translation");
} else {
asyncStdoutToPython("/controller/callback_enable_translation");
}
};
const toggleTranscriptionSend = () => {
asyncUpdateTranscriptionSendStatus(asyncPending);
if (currentTranscriptionSendStatus.data) {
asyncStdoutToPython("/controller/callback_disable_transcription_send");
} else {
asyncStdoutToPython("/controller/callback_enable_transcription_send");
}
};
const toggleTranscriptionReceive = () => {
asyncUpdateTranscriptionReceiveStatus(asyncPending);
if (currentTranscriptionReceiveStatus.data) {
asyncStdoutToPython("/controller/callback_disable_transcription_receive");
} else {
asyncStdoutToPython("/controller/callback_enable_transcription_receive");
}
};
const toggleForeground = () => {
const main_page = getCurrent();
const is_foreground_enabled = !currentForegroundStatus.data;
main_page.setAlwaysOnTop(is_foreground_enabled);
updateForegroundStatus(is_foreground_enabled);
};
return {
toggleTranslation: () => {
asyncUpdateTranslationStatus(asyncPending);
if (currentTranslationStatus.data) {
asyncStdoutToPython("/controller/callback_disable_translation");
} else {
asyncStdoutToPython("/controller/callback_enable_translation");
}
},
currentTranslationStatus: currentTranslationStatus,
updateTranslationStatus: (payload) => {
updateTranslationStatus(payload.data);
},
currentTranslationStatus,
toggleTranslation,
updateTranslationStatus,
toggleTranscriptionSend: () => {
asyncUpdateTranscriptionSendStatus(asyncPending);
if (currentTranscriptionSendStatus.data) {
asyncStdoutToPython("/controller/callback_disable_transcription_send");
} else {
asyncStdoutToPython("/controller/callback_enable_transcription_send");
}
},
currentTranscriptionSendStatus: currentTranscriptionSendStatus,
updateTranscriptionSendStatus: (payload) => {
updateTranscriptionSendStatus(payload.data);
},
currentTranscriptionSendStatus,
toggleTranscriptionSend,
updateTranscriptionSendStatus,
toggleTranscriptionReceive: () => {
asyncUpdateTranscriptionReceiveStatus(asyncPending);
if (currentTranscriptionReceiveStatus.data) {
asyncStdoutToPython("/controller/callback_disable_transcription_receive");
} else {
asyncStdoutToPython("/controller/callback_enable_transcription_receive");
}
},
currentTranscriptionReceiveStatus: currentTranscriptionReceiveStatus,
updateTranscriptionReceiveStatus: (payload) => {
updateTranscriptionReceiveStatus(payload.data);
},
currentTranscriptionReceiveStatus,
toggleTranscriptionReceive,
updateTranscriptionReceiveStatus,
toggleForeground: () => {
const main_page = getCurrent();
const is_foreground_enabled = !currentForegroundStatus.data;
main_page.setAlwaysOnTop(is_foreground_enabled);
updateForegroundStatus(is_foreground_enabled);
currentForegroundStatus,
toggleForeground,
updateForegroundStatus,
},
currentForegroundStatus: currentForegroundStatus,
};
};

78
src-ui/logics/useMessage.js
View File

@@ -1,49 +1,51 @@
import {
useMessageLogsStatus,
useStore_MessageLogs,
} from "@store";
import { useStdoutToPython } from "./useStdoutToPython";
import { useStdoutToPython } from "@logics/useStdoutToPython";
export const useMessage = () => {
const { currentMessageLogsStatus, addMessageLogsStatus, updateMessageLogsStatus } = useMessageLogsStatus();
const { currentMessageLogs, addMessageLogs, updateMessageLogs } = useStore_MessageLogs();
const { asyncStdoutToPython } = useStdoutToPython();
const sendMessage = (message) => {
const uuid = crypto.randomUUID();
const send_message_object = {
id: uuid,
message: message,
};
asyncStdoutToPython("/controller/callback_messagebox_send", send_message_object);
addMessageLogs({
id: uuid,
category: "sent",
status: "pending",
created_at: generateTimeData(),
messages: {
original: message,
translated: [],
},
});
};
const updateSentMessageLogById = (payload) => {
updateMessageLogs(updateItemById(payload.id, payload.translation));
};
const addSentMessageLog = (payload) => {
const message_object = generateMessageObject(payload, "sent");
addMessageLogs(message_object);
};
const addReceivedMessageLog = (payload) => {
const message_object = generateMessageObject(payload, "received");
addMessageLogs(message_object);
};
return {
sendMessage: (message) => {
const uuid = crypto.randomUUID();
const send_message_object = {
id: uuid,
message: message,
};
asyncStdoutToPython("/controller/callback_messagebox_send", send_message_object);
addMessageLogsStatus({
id: uuid,
category: "sent",
status: "pending",
created_at: generateTimeData(),
messages: {
original: message,
translated: [],
},
});
},
currentMessageLogsStatus: currentMessageLogsStatus,
updateSentMessageLog: (payload) => {
const data = payload.data;
updateMessageLogsStatus(updateItemById(data.id, data.translation));
},
addSentMessageLog: (payload) => {
const data = payload.data;
const message_object = generateMessageObject(data, "sent");
addMessageLogsStatus(message_object);
},
addReceivedMessageLog: (payload) => {
const data = payload.data;
const message_object = generateMessageObject(data, "received");
addMessageLogsStatus(message_object);
},
currentMessageLogs,
sendMessage,
updateSentMessageLogById,
addSentMessageLog,
addReceivedMessageLog,
};
};

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

@@ -1,8 +1,21 @@
import { arrayToObject } from "@utils/arrayToObject";
import { useMainFunction } from "./useMainFunction";
import { useConfig } from "./useConfig";
import { useMessage } from "./useMessage";
import { useVolume } from "./useVolume";
import { useSoftwareVersion } from "@logics_configs/useSoftwareVersion";
import { useMicHostList } from "@logics_configs/useMicHostList";
import { useSelectedMicHost } from "@logics_configs/useSelectedMicHost";
import { useMicDeviceList } from "@logics_configs/useMicDeviceList";
import { useSelectedMicDevice } from "@logics_configs/useSelectedMicDevice";
import { useSpeakerDeviceList } from "@logics_configs/useSpeakerDeviceList";
import { useSelectedSpeakerDevice } from "@logics_configs/useSelectedSpeakerDevice";
import { useMicThreshold } from "@logics_configs/useMicThreshold";
import { useSpeakerThreshold } from "@logics_configs/useSpeakerThreshold";
import { useEnableAutoClearMessageBox } from "@logics_configs/useEnableAutoClearMessageBox";
import { useSendMessageButtonType } from "@logics_configs/useSendMessageButtonType";
export const useReceiveRoutes = () => {
const {
updateTranslationStatus,
@@ -11,27 +24,30 @@ export const useReceiveRoutes = () => {
} = useMainFunction();
const {
updateSentMessageLog,
updateSentMessageLogById,
addSentMessageLog,
addReceivedMessageLog,
} = useMessage();
const { updateSoftwareVersion } = useSoftwareVersion();
const { updateMicHostList } = useMicHostList();
const { updateSelectedMicHost } = useSelectedMicHost();
const { updateMicDeviceList } = useMicDeviceList();
const { updateSelectedMicDevice } = useSelectedMicDevice();
const { updateSpeakerDeviceList } = useSpeakerDeviceList();
const { updateSelectedSpeakerDevice } = useSelectedSpeakerDevice();
const { updateMicThreshold } = useMicThreshold();
const { updateSpeakerThreshold } = useSpeakerThreshold();
const { updateEnableAutoClearMessageBox } = useEnableAutoClearMessageBox();
const { updateSendMessageButtonType } = useSendMessageButtonType();
const {
updateSoftwareVersion,
updateMicHostList,
updateSelectedMicHost,
updateMicDeviceList,
updateSelectedMicDevice,
updateMicHostAndDevice,
updateSpeakerDeviceList,
updateSelectedSpeakerDevice,
updateEnableAutoClearMessageBox,
updateSendMessageButtonType,
} = useConfig();
const { updateVolumeVariable_Mic, updateVolumeVariable_Speaker } = useVolume();
updateVolumeVariable_Mic,
updateVolumeVariable_Speaker,
updateMicThresholdCheckStatus,
updateSpeakerThresholdCheckStatus,
} = useVolume();
const routes = {
"/controller/callback_enable_translation": updateTranslationStatus,
@@ -44,20 +60,27 @@ export const useReceiveRoutes = () => {
"/config/version": updateSoftwareVersion,
"/controller/list_mic_host": updateMicHostList,
"/controller/list_mic_host": (payload) => updateMicHostList(arrayToObject(payload)),
"/config/choice_mic_host": updateSelectedMicHost,
"/controller/callback_set_mic_host": updateMicHostAndDevice,
"/controller/callback_set_mic_host": (payload) => {
updateSelectedMicHost(payload.host);
updateSelectedMicDevice(payload.device);
},
"/controller/list_mic_device": updateMicDeviceList,
"/controller/list_mic_device": (payload) => updateMicDeviceList(arrayToObject(payload)),
"/config/choice_mic_device": updateSelectedMicDevice,
"/controller/callback_set_mic_device": updateSelectedMicDevice,
"/controller/list_speaker_device": updateSpeakerDeviceList,
"/controller/list_speaker_device": (payload) => updateSpeakerDeviceList(arrayToObject(payload)),
"/config/choice_speaker_device": updateSelectedSpeakerDevice,
"/controller/callback_set_speaker_device": updateSelectedSpeakerDevice,
"/action/check_mic_threshold_energy": updateVolumeVariable_Mic,
"/action/check_speaker_threshold_energy": updateVolumeVariable_Speaker,
"/controller/callback_enable_check_mic_threshold": () => updateMicThresholdCheckStatus(true),
"/controller/callback_disable_check_mic_threshold": () => updateMicThresholdCheckStatus(false),
"/controller/callback_enable_check_speaker_threshold": () => updateSpeakerThresholdCheckStatus(true),
"/controller/callback_disable_check_speaker_threshold": () => updateSpeakerThresholdCheckStatus(false),
"/config/enable_auto_clear_message_box": updateEnableAutoClearMessageBox,
"/controller/callback_enable_auto_clear_chatbox": updateEnableAutoClearMessageBox,
@@ -66,8 +89,13 @@ export const useReceiveRoutes = () => {
"/config/send_message_button_type": updateSendMessageButtonType,
"/controller/callback_set_send_message_button_type": updateSendMessageButtonType,
"/config/input_mic_energy_threshold": updateMicThreshold,
"/controller/callback_set_mic_energy_threshold": updateMicThreshold,
"/config/input_speaker_energy_threshold": updateSpeakerThreshold,
"/controller/callback_set_speaker_energy_threshold": updateSpeakerThreshold,
"/controller/callback_messagebox_send": updateSentMessageLog,
"/controller/callback_messagebox_send": updateSentMessageLogById,
"/action/transcription_send_mic_message": addSentMessageLog,
"/action/transcription_receive_speaker_message": addReceivedMessageLog
};
@@ -76,7 +104,7 @@ export const useReceiveRoutes = () => {
switch (parsed_data.status) {
case 200:
const route = routes[parsed_data.endpoint];
(route) ? route({ data: parsed_data.result }) : console.error(`Invalid endpoint: ${parsed_data.endpoint}`);
(route) ? route(parsed_data.result) : console.error(`Invalid endpoint: ${parsed_data.endpoint}`);
break;
case 348:

50
src-ui/logics/useVolume.js
View File

@@ -1,30 +1,48 @@
import {
useMicVolume,
useSpeakerVolume,
useStore_MicVolume,
useStore_SpeakerVolume,
useStore_MicThresholdCheckStatus,
useStore_SpeakerThresholdCheckStatus,
} from "@store";
import { useStdoutToPython } from "./useStdoutToPython";
import { useStdoutToPython } from "@logics/useStdoutToPython";
export const useVolume = () => {
const { asyncStdoutToPython } = useStdoutToPython();
const { updateMicVolume } = useMicVolume();
const { updateSpeakerVolume } = useSpeakerVolume();
const { updateMicVolume } = useStore_MicVolume();
const { updateSpeakerVolume } = useStore_SpeakerVolume();
const { currentMicThresholdCheckStatus, updateMicThresholdCheckStatus } = useStore_MicThresholdCheckStatus();
const { currentSpeakerThresholdCheckStatus, updateSpeakerThresholdCheckStatus } = useStore_SpeakerThresholdCheckStatus();
// const asyncPending = () => new Promise(() => {});
const asyncPending = () => new Promise(() => {});
return {
volumeCheckStart_Mic: () => asyncStdoutToPython("/controller/callback_enable_check_mic_threshold"),
volumeCheckStop_Mic: () => asyncStdoutToPython("/controller/callback_disable_check_mic_threshold"),
updateVolumeVariable_Mic: (payload) => {
updateMicVolume(payload.data);
volumeCheckStart_Mic: () => {
updateMicThresholdCheckStatus(asyncPending);
asyncStdoutToPython("/controller/callback_enable_check_mic_threshold");
},
volumeCheckStop_Mic: () => {
updateMicThresholdCheckStatus(asyncPending);
asyncStdoutToPython("/controller/callback_disable_check_mic_threshold");
},
updateVolumeVariable_Mic: (payload) => {
updateMicVolume(payload);
},
currentMicThresholdCheckStatus: currentMicThresholdCheckStatus,
updateMicThresholdCheckStatus: (payload) => updateMicThresholdCheckStatus(payload),
volumeCheckStart_Speaker: () => asyncStdoutToPython("/controller/callback_enable_check_speaker_threshold"),
volumeCheckStop_Speaker: () => asyncStdoutToPython("/controller/callback_disable_check_speaker_threshold"),
volumeCheckStart_Speaker: () => {
updateSpeakerThresholdCheckStatus(asyncPending);
asyncStdoutToPython("/controller/callback_enable_check_speaker_threshold");
},
volumeCheckStop_Speaker: () => {
updateSpeakerThresholdCheckStatus(asyncPending);
asyncStdoutToPython("/controller/callback_disable_check_speaker_threshold");
},
updateVolumeVariable_Speaker: (payload) => {
updateSpeakerVolume(payload.data);
}
updateSpeakerVolume(payload);
},
currentSpeakerThresholdCheckStatus: currentSpeakerThresholdCheckStatus,
updateSpeakerThresholdCheckStatus: (payload) => updateSpeakerThresholdCheckStatus(payload),
};
};

4
src-ui/logics/useWindow.js
View File

@@ -1,9 +1,9 @@
import { WebviewWindow } from "@tauri-apps/api/window";
import { store, useIsOpenedConfigPage } from "@store";
import { store, useStore_IsOpenedConfigPage } from "@store";
import { getCurrent } from "@tauri-apps/api/window";
export const useWindow = () => {
const { updateIsOpenedConfigPage } = useIsOpenedConfigPage();
const { updateIsOpenedConfigPage } = useStore_IsOpenedConfigPage();
const createConfigPage = async () => {
const main_page = getCurrent();

78
src-ui/store.js
View File

@@ -94,75 +94,79 @@ const createAsyncAtomWithHook = (initialValue, base_ame) => {
return { atomInstance, useHook };
};
export const { atomInstance: Atom_SoftwareVersion, useHook: useSoftwareVersion } = createAtomWithHook("-", "SoftwareVersion");
export const { atomInstance: Atom_SoftwareVersion, useHook: useStore_SoftwareVersion } = createAtomWithHook("-", "SoftwareVersion");
export const { atomInstance: Atom_UiLanguageStatus, useHook: useUiLanguageStatus } = createAtomWithHook("en", "UiLanguageStatus");
export const { atomInstance: Atom_TranslationStatus, useHook: useTranslationStatus } = createAsyncAtomWithHook(false, "TranslationStatus");
export const { atomInstance: Atom_TranscriptionSendStatus, useHook: useTranscriptionSendStatus } = createAsyncAtomWithHook(false, "TranscriptionSendStatus");
export const { atomInstance: Atom_TranscriptionReceiveStatus, useHook: useTranscriptionReceiveStatus } = createAsyncAtomWithHook(false, "TranscriptionReceiveStatus");
export const { atomInstance: Atom_ForegroundStatus, useHook: useForegroundStatus } = createAsyncAtomWithHook(false, "ForegroundStatus");
export const { atomInstance: Atom_UiLanguage, useHook: useStore_UiLanguage } = createAtomWithHook("en", "UiLanguage");
export const { atomInstance: Atom_TranslationStatus, useHook: useStore_TranslationStatus } = createAsyncAtomWithHook(false, "TranslationStatus");
export const { atomInstance: Atom_TranscriptionSendStatus, useHook: useStore_TranscriptionSendStatus } = createAsyncAtomWithHook(false, "TranscriptionSendStatus");
export const { atomInstance: Atom_TranscriptionReceiveStatus, useHook: useStore_TranscriptionReceiveStatus } = createAsyncAtomWithHook(false, "TranscriptionReceiveStatus");
export const { atomInstance: Atom_ForegroundStatus, useHook: useStore_ForegroundStatus } = createAsyncAtomWithHook(false, "ForegroundStatus");
export const { atomInstance: Atom_MessageLogsStatus, useHook: useMessageLogsStatus } = createAtomWithHook(generateTestData(20), "MessageLogsStatus");
export const { atomInstance: Atom_MainPageCompactModeStatus, useHook: useMainPageCompactModeStatus } = createAtomWithHook(false, "MainPageCompactModeStatus");
export const { atomInstance: Atom_IsOpenedLanguageSelector, useHook: useIsOpenedLanguageSelector } = createAtomWithHook(
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(
{ your_language: false, target_language: false },
"IsOpenedLanguageSelector"
);
export const { atomInstance: Atom_SelectedPresetTabStatus, useHook: useSelectedPresetTabStatus } = createAtomWithHook(1, "SelectedPresetTabStatus");
export const { atomInstance: Atom_IsOpenedConfigPage, useHook: useIsOpenedConfigPage } = createAtomWithHook(false, "IsOpenedConfigPage");
export const { atomInstance: Atom_SelectedConfigTabId, useHook: useSelectedConfigTabId } = createAtomWithHook("device", "SelectedConfigTabId");
export const { atomInstance: Atom_IsOpenedDropdownMenu, useHook: useIsOpenedDropdownMenu } = createAtomWithHook("", "IsOpenedDropdownMenu");
export const { atomInstance: Atom_SelectedPresetTabNumber, useHook: useStore_SelectedPresetTabNumber } = createAtomWithHook(1, "SelectedPresetTabNumber");
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_MicHostList, useHook: useMicHostList } = createAsyncAtomWithHook({}, "MicHostList");
export const { atomInstance: Atom_SelectedMicHost, useHook: useSelectedMicHost } = createAsyncAtomWithHook("Nothing Selected", "SelectedMicHost");
export const { atomInstance: Atom_MicDeviceList, useHook: useMicDeviceList } = createAsyncAtomWithHook({}, "MicDeviceList");
export const { atomInstance: Atom_SelectedMicDevice, useHook: useSelectedMicDevice } = createAsyncAtomWithHook("Nothing Selected", "SelectedMicDevice");
export const { atomInstance: Atom_MicHostList, useHook: useStore_MicHostList } = createAsyncAtomWithHook({}, "MicHostList");
export const { atomInstance: Atom_SelectedMicHost, useHook: useStore_SelectedMicHost } = createAsyncAtomWithHook("Nothing Selected", "SelectedMicHost");
export const { atomInstance: Atom_MicDeviceList, useHook: useStore_MicDeviceList } = createAsyncAtomWithHook({}, "MicDeviceList");
export const { atomInstance: Atom_SelectedMicDevice, useHook: useStore_SelectedMicDevice } = createAsyncAtomWithHook("Nothing Selected", "SelectedMicDevice");
export const { atomInstance: Atom_SpeakerDeviceList, useHook: useSpeakerDeviceList } = createAsyncAtomWithHook({}, "SpeakerDeviceList");
export const { atomInstance: Atom_SelectedSpeakerDevice, useHook: useSelectedSpeakerDevice } = createAsyncAtomWithHook("Nothing Selected", "SelectedSpeakerDevice");
export const { atomInstance: Atom_SpeakerDeviceList, useHook: useStore_SpeakerDeviceList } = createAsyncAtomWithHook({}, "SpeakerDeviceList");
export const { atomInstance: Atom_SelectedSpeakerDevice, useHook: useStore_SelectedSpeakerDevice } = createAsyncAtomWithHook("Nothing Selected", "SelectedSpeakerDevice");
export const { atomInstance: Atom_MicVolume, useHook: useMicVolume } = createAsyncAtomWithHook(0, "MicVolume");
export const { atomInstance: Atom_SpeakerVolume, useHook: useSpeakerVolume } = createAsyncAtomWithHook(0, "SpeakerVolume");
export const { atomInstance: Atom_MicVolume, useHook: useStore_MicVolume } = createAsyncAtomWithHook(0, "MicVolume");
export const { atomInstance: Atom_SpeakerVolume, useHook: useStore_SpeakerVolume } = createAsyncAtomWithHook(0, "SpeakerVolume");
export const { atomInstance: Atom_SendMessageFormat, useHook: useSendMessageFormat } = createAtomWithHook({
export const { atomInstance: Atom_MicThresholdCheckStatus, useHook: useStore_MicThresholdCheckStatus } = createAsyncAtomWithHook(false, "MicThresholdCheckStatus");
export const { atomInstance: Atom_SpeakerThresholdCheckStatus, useHook: useStore_SpeakerThresholdCheckStatus } = createAsyncAtomWithHook(false, "SpeakerThresholdCheckStatus");
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_SendMessageFormat, useHook: useStore_SendMessageFormat } = createAtomWithHook({
before: "",
after: "",
}, "SendMessageFormat");
export const { atomInstance: Atom_SendMessageFormatWithT, useHook: useSendMessageFormatWithT } = createAtomWithHook({
export const { atomInstance: Atom_SendMessageFormatWithT, useHook: useStore_SendMessageFormatWithT } = createAtomWithHook({
before: "",
between: "",
after: "",
is_message_first: true,
}, "SendMessageFormatWithT");
export const { atomInstance: Atom_ReceivedMessageFormat, useHook: useReceivedMessageFormat } = createAtomWithHook({
export const { atomInstance: Atom_ReceivedMessageFormat, useHook: useStore_ReceivedMessageFormat } = createAtomWithHook({
before: "",
after: "",
}, "ReceivedMessageFormat");
export const { atomInstance: Atom_ReceivedMessageFormatWithT, useHook: useReceivedMessageFormatWithT } = createAtomWithHook({
export const { atomInstance: Atom_ReceivedMessageFormatWithT, useHook: useStore_ReceivedMessageFormatWithT } = createAtomWithHook({
before: "",
between: "",
after: "",
is_message_first: true,
}, "ReceivedMessageFormatWithT");
export const { atomInstance: Atom_IsOpenedWordFilterList, useHook: useIsOpenedWordFilterList } = createAtomWithHook(false, "IsOpenedWordFilterList");
export const { atomInstance: Atom_WordFilterList, useHook: useWordFilterList } = createAtomWithHook(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: useEnableAutoClearMessageBox } = createAsyncAtomWithHook(true, "EnableAutoClearMessageBox");
export const { atomInstance: Atom_SendMessageButtonType, useHook: useSendMessageButtonType } = createAsyncAtomWithHook("show", "SendMessageButtonType");
export const { atomInstance: Atom_EnableAutoClearMessageBox, useHook: useStore_EnableAutoClearMessageBox } = createAsyncAtomWithHook(true, "EnableAutoClearMessageBox");
export const { atomInstance: Atom_SendMessageButtonType, useHook: useStore_SendMessageButtonType } = createAsyncAtomWithHook("show", "SendMessageButtonType");
export const { atomInstance: Atom_TranslatorList, useHook: useStore_TranslatorList } = createAtomWithHook(translator_list, "TranslatorList");
export const { atomInstance: Atom_SelectedTranslatorId, useHook: useStore_SelectedTranslatorId } = createAtomWithHook("CTranslate2", "SelectedTranslatorId");
export const { atomInstance: Atom_IsOpenedTranslatorSelector, useHook: useStore_IsOpenedTranslatorSelector } = createAtomWithHook(false, "IsOpenedTranslatorSelector");
export const { atomInstance: Atom_TranslatorListStatus, useHook: useTranslatorListStatus } = createAtomWithHook(translator_list, "TranslatorListStatus");
export const { atomInstance: Atom_SelectedTranslatorIdStatus, useHook: useSelectedTranslatorIdStatus } = createAtomWithHook("CTranslate2", "SelectedTranslatorIdStatus");
export const { atomInstance: Atom_IsOpenedTranslatorSelector, useHook: useIsOpenedTranslatorSelector } = createAtomWithHook(false, "IsOpenedTranslatorSelector");
export const { atomInstance: Atom_VrctPosterIndex, useHook: useVrctPosterIndex } = createAtomWithHook(0, "VrctPosterIndex");
export const { atomInstance: Atom_PosterShowcaseWorldPageIndex, useHook: usePosterShowcaseWorldPageIndex } = createAtomWithHook(0, "PosterShowcaseWorldPageIndex");
export const { atomInstance: Atom_VrctPosterIndex, useHook: useStore_VrctPosterIndex } = createAtomWithHook(0, "VrctPosterIndex");
export const { atomInstance: Atom_PosterShowcaseWorldPageIndex, useHook: useStore_PosterShowcaseWorldPageIndex } = createAtomWithHook(0, "PosterShowcaseWorldPageIndex");

1
vite.config.js
View File

@@ -40,6 +40,7 @@ export default defineConfig(async () => ({
"@images": path.resolve(__dirname, "src-ui/assets"),
"@utils": path.resolve(__dirname, "src-ui/utils"),
"@logics": path.resolve(__dirname, "src-ui/logics"),
"@logics_configs": path.resolve(__dirname, "src-ui/logics/configs"),
},
},