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-12 17:13:36 +09:00
parent b1751f69cb 6b3ff1f3b2
commit eeabb8088a
22 changed files with 469 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
locales/en.json
View File

@@ -141,11 +141,10 @@
"auth_key_success": "Auth key update completed.", "auth_key_success": "Auth key update completed.",
"auth_key_error": "Auth Key is incorrect or Usage limit reached." "auth_key_error": "Auth Key is incorrect or Usage limit reached."
}, },
"mic_host": { "mic_host_device": {
"label": "Mic Host/Driver" "label": "Mic Device",
}, "label_host": "Host/Driver",
"mic_device": { "label_device": "Device"
"label": "Mic Device"
}, },
"mic_dynamic_energy_threshold": { "mic_dynamic_energy_threshold": {
"label_for_automatic": "Mic Energy Threshold (Current Setting: Automatic)", "label_for_automatic": "Mic Energy Threshold (Current Setting: Automatic)",

9
locales/ja.json
View File

@@ -136,11 +136,10 @@
"auth_key_success": "認証キーの更新が完了しました。", "auth_key_success": "認証キーの更新が完了しました。",
"auth_key_error": "認証キーが間違っているか、API使用制限が上限に達しています。" "auth_key_error": "認証キーが間違っているか、API使用制限が上限に達しています。"
}, },
"mic_host": { "mic_host_device": {
"label": "マイク（ホスト/ドライバー）" "label": "マイク （デバイス）",
}, "label_host": "ホスト/ドライバー",
"mic_device": { "label_device": "デバイス"
"label": "マイク （デバイス）"
}, },
"mic_dynamic_energy_threshold": { "mic_dynamic_energy_threshold": {
"label_for_automatic": "マイク入力感度の調整 (現在の設定: 自動)", "label_for_automatic": "マイク入力感度の調整 (現在の設定: 自動)",

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

@@ -35,8 +35,8 @@ const StartPythonFacadeComponent = () => {
const { getSelectedMicHost } = useSelectedMicHost(); const { getSelectedMicHost } = useSelectedMicHost();
const { getSelectedMicDevice } = useSelectedMicDevice(); const { getSelectedMicDevice } = useSelectedMicDevice();
const { getSelectedSpeakerDevice } = useSelectedSpeakerDevice(); const { getSelectedSpeakerDevice } = useSelectedSpeakerDevice();
const { getMicThreshold } = useMicThreshold(); const { getMicThreshold, getEnableAutomaticMicThreshold } = useMicThreshold();
const { getSpeakerThreshold } = useSpeakerThreshold(); const { getSpeakerThreshold, getEnableAutomaticSpeakerThreshold } = useSpeakerThreshold();
const { getEnableAutoClearMessageBox } = useEnableAutoClearMessageBox(); const { getEnableAutoClearMessageBox } = useEnableAutoClearMessageBox();
const { getSendMessageButtonType } = useSendMessageButtonType(); const { getSendMessageButtonType } = useSendMessageButtonType();
@@ -52,6 +52,8 @@ const StartPythonFacadeComponent = () => {
getMicThreshold(); getMicThreshold();
getSpeakerThreshold(); getSpeakerThreshold();
getEnableAutomaticMicThreshold();
getEnableAutomaticSpeakerThreshold();
getEnableAutoClearMessageBox(); getEnableAutoClearMessageBox();
getSendMessageButtonType(); getSendMessageButtonType();

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

@@ -43,7 +43,7 @@ export const DropdownMenu = (props) => {
return ( return (
<div className={styles.container}> <div className={styles.container}>
<div className={dropdown_toggle_button_class_name} onClick={toggleDropdownMenu}> <div className={dropdown_toggle_button_class_name} onClick={toggleDropdownMenu} style={props.style}>
{(props.state === "loading") {(props.state === "loading")
? <p className={styles.dropdown_selected_text}>Loading...</p> ? <p className={styles.dropdown_selected_text}>Loading...</p>
: <p className={styles.dropdown_selected_text}>{getSelectedText()}</p> : <p className={styles.dropdown_selected_text}>{getSelectedText()}</p>

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

@@ -8,7 +8,7 @@
position: relative; position: relative;
background-color: var(--dark_950_color); background-color: var(--dark_950_color);
min-width: 20rem; min-width: 20rem;
padding: 0.6rem 1rem; padding: 0.8rem 1.4rem;
cursor: pointer; cursor: pointer;
border-radius: 0.4rem; border-radius: 0.4rem;
&:hover { &:hover {
@@ -24,14 +24,15 @@
.dropdown_selected_text { .dropdown_selected_text {
font-size: 1.4rem; font-size: 1.4rem;
padding-right: 2.8rem;
} }
.dropdown_content_wrapper { .dropdown_content_wrapper {
display: none; display: none;
position: absolute; position: absolute;
top: 100%; // Position it below the toggle button top: 100%; // Position it below the toggle button
left: 0; right: 0;
width: 100%; min-width: 20rem;
z-index: 1; z-index: 1;
&.is_opened { &.is_opened {
display: block; display: block;
@@ -44,11 +45,12 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.1rem; gap: 0.1rem;
white-space: nowrap;
} }
.value_button { .value_button {
background-color: var(--dark_875_color); background-color: var(--dark_875_color);
padding: 0.8rem; padding: 1.2rem;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: var(--dark_800_color); background-color: var(--dark_800_color);
@@ -59,7 +61,7 @@
} }
.value_text { .value_text {
font-size: 1.2rem; font-size: 1.4rem;
} }
.loader { .loader {

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

@@ -3,14 +3,14 @@ import { useState } from "react";
import styles from "./Switchbox.module.scss"; import styles from "./Switchbox.module.scss";
export const Switchbox = (props) => { export const Switchbox = (props) => {
const [is_turned_on, setIsTurnedOn] = useState(false);
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 getClassNames = (baseClass) => clsx(baseClass, { const is_loading = (props.variable.state === "loading");
[styles.is_active]: (is_turned_on === true),
// [styles.is_loading]: (currentState.state === "loading"), const getClassNames = (base_class) => clsx(base_class, {
[styles.is_active]: (props.variable.data === true),
[styles.is_loading]: is_loading,
[styles.is_hovered]: is_hovered, [styles.is_hovered]: is_hovered,
[styles.is_mouse_down]: is_mouse_down, [styles.is_mouse_down]: is_mouse_down,
}); });
@@ -21,21 +21,22 @@ export const Switchbox = (props) => {
const onMouseUp = () => setIsMouseDown(false); const onMouseUp = () => setIsMouseDown(false);
const toggleFunction = () => { const toggleFunction = () => {
setIsTurnedOn(!is_turned_on); props.toggleFunction();
}; };
return ( return (
<div className={styles.switchbox_container}> <div className={styles.switchbox_container}>
<div className={styles.switchbox_wrapper} <div className={getClassNames(styles.switchbox_wrapper)}
onMouseEnter={onMouseEnter} onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave} onMouseLeave={onMouseLeave}
onMouseDown={onMouseDown} onMouseDown={onMouseDown}
onMouseUp={onMouseUp} onMouseUp={onMouseUp}
onClick={toggleFunction} onClick={toggleFunction}
> >
<div className={getClassNames(styles.toggle_control)}> <div className={getClassNames(styles.toggle_control)}>
<span className={getClassNames(styles.control)}></span> <span className={getClassNames(styles.control)}></span>
{is_loading && <span className={styles.loader}></span>}
</div> </div>
</div> </div>
</div> </div>

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

@@ -15,6 +15,9 @@
cursor: pointer; cursor: pointer;
padding: 2rem; padding: 2rem;
height: 100%; height: 100%;
&.is_loading {
pointer-events: none;
}
} }
.toggle_control { .toggle_control {
@@ -23,3 +26,7 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.loader {
@include loader(2rem, 0.2rem, right, -4rem);
}

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

@@ -17,14 +17,26 @@ export const ThresholdComponent = (props) => {
import MicSvg from "@images/mic.svg?react"; import MicSvg from "@images/mic.svg?react";
import { useMicThreshold } from "@logics_configs/useMicThreshold"; import { useMicThreshold } from "@logics_configs/useMicThreshold";
const MicComponent = (props) => { const MicComponent = (props) => {
const { currentMicThreshold, setMicThreshold } = useMicThreshold(); const {
currentMicThreshold,
setMicThreshold,
currentEnableAutomaticMicThreshold,
} = useMicThreshold();
const [ui_threshold, setUiThreshold] = useState(currentMicThreshold); const [ui_threshold, setUiThreshold] = useState(currentMicThreshold);
const {volumeCheckStart_Mic, volumeCheckStop_Mic, currentMicThresholdCheckStatus } = useVolume(); const {
volumeCheckStart_Mic,
volumeCheckStop_Mic,
currentMicThresholdCheckStatus,
} = useVolume();
useEffect(() => { useEffect(() => {
setUiThreshold(currentMicThreshold); if (currentEnableAutomaticMicThreshold.data === true) {
}, [currentMicThreshold]); setUiThreshold("Auto");
} else {
setUiThreshold(currentMicThreshold);
}
}, [currentMicThreshold, currentEnableAutomaticMicThreshold]);
const setUiThresholdFunction = (payload_ui_threshold) => { const setUiThresholdFunction = (payload_ui_threshold) => {
setUiThreshold(payload_ui_threshold); setUiThreshold(payload_ui_threshold);
@@ -33,6 +45,8 @@ const MicComponent = (props) => {
setMicThreshold(payload_threshold); setMicThreshold(payload_threshold);
}; };
const is_disable = currentEnableAutomaticMicThreshold.data === true ? true : false;
return ( return (
<> <>
<VolumeCheckButton <VolumeCheckButton
@@ -53,6 +67,7 @@ const MicComponent = (props) => {
ui_threshold={ui_threshold} ui_threshold={ui_threshold}
setUiThresholdFunction={setUiThresholdFunction} setUiThresholdFunction={setUiThresholdFunction}
setThresholdFunction={setThresholdFunction} setThresholdFunction={setThresholdFunction}
is_disable={is_disable}
/> />
</> </>
); );
@@ -60,13 +75,25 @@ const MicComponent = (props) => {
import HeadphonesSvg from "@images/headphones.svg?react"; import HeadphonesSvg from "@images/headphones.svg?react";
import { useSpeakerThreshold } from "@logics_configs/useSpeakerThreshold"; import { useSpeakerThreshold } from "@logics_configs/useSpeakerThreshold";
const SpeakerComponent = (props) => { const SpeakerComponent = (props) => {
const { currentSpeakerThreshold, setSpeakerThreshold } = useSpeakerThreshold(); const {
currentSpeakerThreshold,
setSpeakerThreshold,
currentEnableAutomaticSpeakerThreshold,
} = useSpeakerThreshold();
const [ui_threshold, setUiThreshold] = useState(currentSpeakerThreshold); const [ui_threshold, setUiThreshold] = useState(currentSpeakerThreshold);
const {volumeCheckStart_Speaker, volumeCheckStop_Speaker, currentSpeakerThresholdCheckStatus } = useVolume(); const {
volumeCheckStart_Speaker,
volumeCheckStop_Speaker,
currentSpeakerThresholdCheckStatus,
} = useVolume();
useEffect(() => { useEffect(() => {
setUiThreshold(currentSpeakerThreshold); if (currentEnableAutomaticSpeakerThreshold.data === true) {
}, [currentSpeakerThreshold]); setUiThreshold("Auto");
} else {
setUiThreshold(currentSpeakerThreshold);
}
}, [currentSpeakerThreshold, currentEnableAutomaticSpeakerThreshold]);
const setUiThresholdFunction = (payload_ui_threshold) => { const setUiThresholdFunction = (payload_ui_threshold) => {
setUiThreshold(payload_ui_threshold); setUiThreshold(payload_ui_threshold);
@@ -75,6 +102,8 @@ const SpeakerComponent = (props) => {
setSpeakerThreshold(payload_threshold); setSpeakerThreshold(payload_threshold);
}; };
const is_disable = currentEnableAutomaticSpeakerThreshold.data === true ? true : false;
return ( return (
<> <>
<VolumeCheckButton <VolumeCheckButton
@@ -95,6 +124,7 @@ const SpeakerComponent = (props) => {
ui_threshold={ui_threshold} ui_threshold={ui_threshold}
setUiThresholdFunction={setUiThresholdFunction} setUiThresholdFunction={setUiThresholdFunction}
setThresholdFunction={setThresholdFunction} setThresholdFunction={setThresholdFunction}
is_disable={is_disable}
/> />
</> </>
); );

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

@@ -1,4 +1,3 @@
import { useState } from "react";
import styles from "./SliderAndMeter.module.scss"; import styles from "./SliderAndMeter.module.scss";
import { import {
useStore_MicVolume, useStore_MicVolume,
@@ -18,48 +17,56 @@ export const SliderAndMeter = (props) => {
); );
}; };
import { useMicThreshold } from "@logics_configs/useMicThreshold";
const ThresholdVolumeMeter_Mic = (props) => { const ThresholdVolumeMeter_Mic = (props) => {
const { currentMicVolume } = useStore_MicVolume(); const { currentMicVolume } = useStore_MicVolume();
const { currentEnableAutomaticMicThreshold } = useMicThreshold();
const currentVolumeVariable = Math.min(currentMicVolume.data, props.max); const currentVolumeVariable = Math.min(currentMicVolume.data, props.max);
const volume_width_percentage = (currentVolumeVariable / props.max) * 100; const volume_width_percentage = (currentVolumeVariable / props.max) * 100;
return ( return (
<> <>
<VolumeMeter volume_width_percentage={volume_width_percentage} volume={currentVolumeVariable} threshold={props.ui_threshold}/> <VolumeMeter volume_width_percentage={volume_width_percentage} volume={currentVolumeVariable} threshold={props.ui_threshold}/>
<input {currentEnableAutomaticMicThreshold.data === false &&
type="range" <input
min={props.min} type="range"
max={props.max} min={props.min}
value={props.ui_threshold} max={props.max}
onChange={(e) => props.setUiThresholdFunction(e.target.value)} value={props.ui_threshold}
onMouseUp={(e) => props.setThresholdFunction(e.target.value)} onChange={(e) => props.setUiThresholdFunction(e.target.value)}
className={styles.threshold_slider} onMouseUp={(e) => props.setThresholdFunction(e.target.value)}
/> className={styles.threshold_slider}
/>
}
</> </>
); );
}; };
import { useSpeakerThreshold } from "@logics_configs/useSpeakerThreshold";
const ThresholdVolumeMeter_Speaker = (props) => { const ThresholdVolumeMeter_Speaker = (props) => {
const { currentSpeakerVolume } = useStore_SpeakerVolume(); const { currentSpeakerVolume } = useStore_SpeakerVolume();
const { currentEnableAutomaticSpeakerThreshold } = useSpeakerThreshold();
const currentVolumeVariable = Math.min(currentSpeakerVolume.data, props.max); const currentVolumeVariable = Math.min(currentSpeakerVolume.data, props.max);
const volume_width_percentage = (currentVolumeVariable / props.max) * 100; const volume_width_percentage = (currentVolumeVariable / props.max) * 100;
return ( return (
<> <>
<VolumeMeter volume_width_percentage={volume_width_percentage} volume={currentVolumeVariable} threshold={props.ui_threshold} /> <VolumeMeter volume_width_percentage={volume_width_percentage} volume={currentVolumeVariable} threshold={props.ui_threshold} />
<input {currentEnableAutomaticSpeakerThreshold.data === false &&
type="range" <input
min={props.min} type="range"
max={props.max} min={props.min}
value={props.ui_threshold} max={props.max}
onChange={(e) => props.setUiThresholdFunction(e.target.value)} value={props.ui_threshold}
onMouseUp={(e) => props.setThresholdFunction(e.target.value)} onChange={(e) => props.setUiThresholdFunction(e.target.value)}
className={styles.threshold_slider} onMouseUp={(e) => props.setThresholdFunction(e.target.value)}
/> className={styles.threshold_slider}
/>
}
</> </>
); );
}; };

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

@@ -1,3 +1,4 @@
import clsx from "clsx";
import styles from "./ThresholdEntry.module.scss"; import styles from "./ThresholdEntry.module.scss";
export const ThresholdEntry = (props) => { export const ThresholdEntry = (props) => {
@@ -22,9 +23,13 @@ const ThresholdEntry_Mic = (props) => {
} }
}; };
const class_names = clsx(styles.entry_input_area, {
[styles.is_disable]: props.is_disable
});
return ( return (
<input <input
className={styles.entry_input_area} className={class_names}
onChange={onChangeFunction} onChange={onChangeFunction}
value={props.ui_threshold} value={props.ui_threshold}
/> />
@@ -40,9 +45,13 @@ const ThresholdEntry_Speaker = (props) => {
} }
}; };
const class_names = clsx(styles.entry_input_area, {
[styles.is_disable]: props.is_disable
});
return ( return (
<input <input
className={styles.entry_input_area} className={class_names}
onChange={onChangeFunction} onChange={onChangeFunction}
value={props.ui_threshold} value={props.ui_threshold}
/> />

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

@@ -15,4 +15,9 @@
height: 100%; height: 100%;
font-size: 1.4rem; font-size: 1.4rem;
resize: none; resize: none;
color: var(--dark_basic_text_color);
&.is_disable {
color: var(--dark_500_color);
pointer-events: none;
}
} }

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

@@ -16,7 +16,7 @@ import { ActionButton } from "./action_button/ActionButton";
import { WordFilter, WordFilterListToggleComponent } from "./word_filter/WordFilter"; import { WordFilter, WordFilterListToggleComponent } from "./word_filter/WordFilter";
const useOnMouseLeaveDropdownMenu = () => { export const useOnMouseLeaveDropdownMenu = () => {
const { updateIsOpenedDropdownMenu } = useStore_IsOpenedDropdownMenu(); const { updateIsOpenedDropdownMenu } = useStore_IsOpenedDropdownMenu();
const onMouseLeaveFunction = () => { const onMouseLeaveFunction = () => {
@@ -38,25 +38,22 @@ export const DropdownMenuContainer = (props) => {
}; };
export const ThresholdContainer = (props) => { // export const ThresholdContainer = (props) => {
return ( // return (
<div className={styles.threshold_container}> // <div className={styles.threshold_container}>
<div className={styles.threshold_switch_section}> // <div className={styles.threshold_switch_section}>
<LabelComponent label={props.label} desc={props.desc} /> // <LabelComponent label={props.label} desc={props.desc} />
<Switchbox {...props}/> // <Switchbox {...props}/>
</div> // </div>
<div className={styles.threshold_section}> // <div className={styles.threshold_section}>
<ThresholdComponent {...props}/> // <ThresholdComponent {...props}/>
</div> // </div>
</div> // </div>
); // );
}; // };
export const useSettingBox = () => { export const useSettingBox = () => {
console.log("useSettingBox______________");
const SliderContainer = (props) => { const SliderContainer = (props) => {
return ( return (
<div className={styles.container}> <div className={styles.container}>

37
src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.module.scss
View File

@@ -4,7 +4,6 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 2rem; padding: 2rem;
display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
gap: 2rem; gap: 2rem;
@@ -18,27 +17,25 @@
width: 100%; width: 100%;
} }
.threshold_container { // .threshold_container {
display: flex; // display: flex;
width: 100%; // width: 100%;
flex-direction: column; // flex-direction: column;
justify-content: space-between; // justify-content: space-between;
align-items: center; // align-items: center;
gap: 2rem; // gap: 2rem;
padding: 2rem; // }
border-bottom: solid 0.1rem var(--dark_800_color);
}
.threshold_switch_section { // .threshold_switch_section {
display: flex; // display: flex;
width: 100%; // width: 100%;
justify-content: space-between; // justify-content: space-between;
align-items: center; // align-items: center;
} // }
.threshold_section { // .threshold_section {
width: 100%; // width: 100%;
} // }
.deepl_auth_key_label_section { .deepl_auth_key_label_section {
max-width: 34rem; max-width: 34rem;

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

@@ -1,119 +1,177 @@
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import styles from "./Device.module.scss";
import { import {
DropdownMenuContainer, useOnMouseLeaveDropdownMenu,
ThresholdContainer,
} from "../components/useSettingBox"; } from "../components/useSettingBox";
export const Device = () => { export const Device = () => {
return ( return (
<> <>
<DropdownMenuContainer_MicHost /> <Mic_Container />
<DropdownMenuContainer_MicDevice /> <Speaker_Container />
<ThresholdContainer_Mic />
<DropdownMenuContainer_SpeakerDevice />
<ThresholdContainer_Speaker />
</> </>
); );
}; };
import { useMicHostList } from "@logics_configs/useMicHostList"; import { useMicHostList } from "@logics_configs/useMicHostList";
import { useSelectedMicHost } from "@logics_configs/useSelectedMicHost"; 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 { useMicDeviceList } from "@logics_configs/useMicDeviceList";
import { useSelectedMicDevice } from "@logics_configs/useSelectedMicDevice"; import { useSelectedMicDevice } from "@logics_configs/useSelectedMicDevice";
const DropdownMenuContainer_MicDevice = () => { import { useMicThreshold } from "@logics_configs/useMicThreshold";
import { LabelComponent } from "../components/label_component/LabelComponent";
import { DropdownMenu } from "../components/dropdown_menu/DropdownMenu";
import { ThresholdComponent } from "../components/threshold_component/ThresholdComponent";
import { Switchbox } from "../components/switchbox/Switchbox";
const Mic_Container = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const { currentSelectedMicHost, setSelectedMicHost } = useSelectedMicHost();
const { currentMicHostList, getMicHostList } = useMicHostList();
const { onMouseLeaveFunction } = useOnMouseLeaveDropdownMenu();
const { currentEnableAutomaticMicThreshold, toggleEnableAutomaticMicThreshold } = useMicThreshold();
const selectFunction_host = (selected_data) => {
setSelectedMicHost(selected_data.selected_id);
};
const { currentSelectedMicDevice, setSelectedMicDevice } = useSelectedMicDevice(); const { currentSelectedMicDevice, setSelectedMicDevice } = useSelectedMicDevice();
const { currentMicDeviceList, getMicDeviceList } = useMicDeviceList(); const { currentMicDeviceList, getMicDeviceList } = useMicDeviceList();
const selectFunction = (selected_data) => { const selectFunction_device = (selected_data) => {
setSelectedMicDevice(selected_data.selected_id); setSelectedMicDevice(selected_data.selected_id);
}; };
const getLabels = () => {
if (currentEnableAutomaticMicThreshold.data === true) {
return {
label: t("config_page.mic_dynamic_energy_threshold.label_for_automatic"),
desc: t("config_page.mic_dynamic_energy_threshold.desc_for_automatic"),
};
} else {
return {
label: t("config_page.mic_dynamic_energy_threshold.label_for_manual"),
desc: t("config_page.mic_dynamic_energy_threshold.desc_for_manual"),
};
}
};
return ( return (
<DropdownMenuContainer <div className={styles.mic_container}>
dropdown_id="mic_device" <div className={styles.device_container} onMouseLeave={onMouseLeaveFunction}>
label={t("config_page.mic_device.label")} <LabelComponent label={t("config_page.mic_host_device.label")} />
selected_id={currentSelectedMicDevice.data} <div className={styles.device_contents}>
list={currentMicDeviceList.data} <div className={styles.device_dropdown_wrapper}>
selectFunction={selectFunction} <p className={styles.device_dropdown_label}>{t("config_page.mic_host_device.label_host")}</p>
openListFunction={getMicDeviceList} <DropdownMenu
state={currentSelectedMicDevice.state} dropdown_id="mic_host"
/> selected_id={currentSelectedMicHost.data}
list={currentMicHostList.data}
selectFunction={selectFunction_host}
openListFunction={getMicHostList}
state={currentSelectedMicHost.state}
style={{ maxWidth: "20rem", minWidth: "10rem" }}
/>
</div>
<div className={styles.device_dropdown_wrapper}>
<p className={styles.device_dropdown_label}>{t("config_page.mic_host_device.label_device")}</p>
<DropdownMenu
dropdown_id="mic_device"
selected_id={currentSelectedMicDevice.data}
list={currentMicDeviceList.data}
selectFunction={selectFunction_device}
openListFunction={getMicDeviceList}
state={currentSelectedMicDevice.state}
/>
</div>
</div>
</div>
<div className={styles.threshold_container}>
<div className={styles.threshold_switch_section}>
<LabelComponent {...getLabels()} />
<Switchbox
variable={currentEnableAutomaticMicThreshold}
toggleFunction={toggleEnableAutomaticMicThreshold}
/>
</div>
<div className={styles.threshold_section}>
<ThresholdComponent
id="mic_threshold"
min="0"
max="2000"
/>
</div>
</div>
</div>
); );
}; };
import { useSpeakerDeviceList } from "@logics_configs/useSpeakerDeviceList"; import { useSpeakerDeviceList } from "@logics_configs/useSpeakerDeviceList";
import { useSelectedSpeakerDevice } from "@logics_configs/useSelectedSpeakerDevice"; import { useSelectedSpeakerDevice } from "@logics_configs/useSelectedSpeakerDevice";
const DropdownMenuContainer_SpeakerDevice = () => { import { useSpeakerThreshold } from "@logics_configs/useSpeakerThreshold";
const Speaker_Container = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const { currentSelectedSpeakerDevice, setSelectedSpeakerDevice } = useSelectedSpeakerDevice(); const { currentSelectedSpeakerDevice, setSelectedSpeakerDevice } = useSelectedSpeakerDevice();
const { currentSpeakerDeviceList, getSpeakerDeviceList } = useSpeakerDeviceList(); const { currentSpeakerDeviceList, getSpeakerDeviceList } = useSpeakerDeviceList();
const { onMouseLeaveFunction } = useOnMouseLeaveDropdownMenu();
const { currentEnableAutomaticSpeakerThreshold, toggleEnableAutomaticSpeakerThreshold } = useSpeakerThreshold();
const selectFunction = (selected_data) => { const selectFunction = (selected_data) => {
setSelectedSpeakerDevice(selected_data.selected_id); setSelectedSpeakerDevice(selected_data.selected_id);
}; };
const getLabels = () => {
if (currentEnableAutomaticSpeakerThreshold.data === true) {
return {
label: t("config_page.speaker_dynamic_energy_threshold.label_for_automatic"),
desc: t("config_page.speaker_dynamic_energy_threshold.desc_for_automatic"),
};
} else {
return {
label: t("config_page.speaker_dynamic_energy_threshold.label_for_manual"),
desc: t("config_page.speaker_dynamic_energy_threshold.desc_for_manual"),
};
}
};
return ( return (
<DropdownMenuContainer <div className={styles.speaker_container}>
dropdown_id="speaker_device" <div className={styles.device_container} onMouseLeave={onMouseLeaveFunction}>
label={t("config_page.speaker_device.label")} <LabelComponent label={t("config_page.speaker_device.label")} />
selected_id={currentSelectedSpeakerDevice.data} <div className={styles.device_contents}>
list={currentSpeakerDeviceList.data} <div className={styles.device_dropdown_wrapper}>
selectFunction={selectFunction} <DropdownMenu
openListFunction={getSpeakerDeviceList} dropdown_id="speaker_device"
state={currentSelectedSpeakerDevice.state} label={t("config_page.speaker_device.label")}
/> selected_id={currentSelectedSpeakerDevice.data}
); list={currentSpeakerDeviceList.data}
}; selectFunction={selectFunction}
openListFunction={getSpeakerDeviceList}
const ThresholdContainer_Mic = () => { state={currentSelectedSpeakerDevice.state}
const { t } = useTranslation(); />
</div>
return ( </div>
<ThresholdContainer </div>
label={t("config_page.mic_dynamic_energy_threshold.label_for_manual")} <div className={styles.threshold_container}>
desc={t("config_page.mic_dynamic_energy_threshold.desc_for_manual")} <div className={styles.threshold_switch_section}>
id="mic_threshold" <LabelComponent {...getLabels()}/>
min="0" <Switchbox
max="2000" variable={currentEnableAutomaticSpeakerThreshold}
/> toggleFunction={toggleEnableAutomaticSpeakerThreshold}
); />
}; </div>
<div className={styles.threshold_section}>
const ThresholdContainer_Speaker = () => { <ThresholdComponent
const { t } = useTranslation(); id="speaker_threshold"
min="0"
return ( max="4000"
<ThresholdContainer />
label={t("config_page.speaker_dynamic_energy_threshold.label_for_manual")} </div>
desc={t("config_page.speaker_dynamic_energy_threshold.desc_for_manual")} </div>
id="speaker_threshold" </div>
min="0"
max="4000"
/>
); );
}; };

70
src-ui/app/config_page/setting_section/setting_box/device/Device.module.scss Normal file
View File

@@ -0,0 +1,70 @@
.mic_container {
display: flex;
flex-direction: column;
border-bottom: solid 0.1rem var(--dark_800_color);
padding-bottom: 2rem;
}
.speaker_container {
padding-top: 2rem;
}
.device_container {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
padding: 2rem;
margin-bottom: 0rem;
}
.threshold_container {
padding: 2rem;
}
.threshold_container {
display: flex;
width: 100%;
flex-direction: column;
justify-content: space-between;
align-items: center;
gap: 2rem;
}
.threshold_switch_section {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
}
.threshold_section {
width: 100%;
}
.device_label {
font-size: 1.8rem;
color: var(--dark_basic_text_color);
}
.device_contents {
display: flex;
gap: 2.8rem;
}
.device_dropdown_wrapper {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.device_dropdown_label {
padding-left: 0.2rem;
font-size: 1.4rem;
color: var(--dark_500_color);
}

17
src-ui/app/main_page/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 { useStore_IsMainPageCompactMode } from "@store"; import { useStore_IsMainPageCompactMode, useStore_IsOpenedLanguageSelector } 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";
@@ -10,15 +10,22 @@ import { OpenSettings } from "./open_settings/OpenSettings";
export const SidebarSection = () => { export const SidebarSection = () => {
const { currentIsMainPageCompactMode } = useStore_IsMainPageCompactMode(); const { currentIsMainPageCompactMode } = useStore_IsMainPageCompactMode();
const container_class_name = clsx(styles["container"], { const container_class_name = clsx(styles.container, {
[styles["is_compact_mode"]]: currentIsMainPageCompactMode [styles.is_compact_mode]: currentIsMainPageCompactMode
});
const { currentIsOpenedLanguageSelector } = useStore_IsOpenedLanguageSelector();
const scroll_container_class_names = clsx(styles.scroll_container, {
[styles.is_opened]: (currentIsOpenedLanguageSelector.your_language === true || currentIsOpenedLanguageSelector.target_language === true)
}); });
return ( return (
<div className={container_class_name}> <div className={container_class_name}>
<Logo /> <Logo />
<MainFunctionSwitch /> <div className={scroll_container_class_names}>
{!currentIsMainPageCompactMode && <LanguageSettings />} <MainFunctionSwitch />
{!currentIsMainPageCompactMode && <LanguageSettings />}
</div>
<OpenSettings /> <OpenSettings />
</div> </div>
); );

40
src-ui/app/main_page/sidebar_section/SidebarSection.module.scss
View File

@@ -7,5 +7,45 @@
background-color: var(--dark_850_color); background-color: var(--dark_850_color);
&.is_compact_mode { &.is_compact_mode {
min-width: auto; min-width: auto;
.scroll_container {
overflow-y: hidden;
width: auto;
}
} }
} }
.scroll_container {
width: calc(100% + 0.8rem);
overflow-y: scroll;
overflow-x: hidden;
margin-bottom: calc(2rem + 1.6rem + 2rem); // config button's sizes (svg + padding + margin).
pointer-events: auto;
z-index: 1;
&::-webkit-scrollbar {
width: 0.8rem;
}
&::-webkit-scrollbar-track {
background-color: var(--dark_888_color);
border-radius: 0.4rem;
}
&::-webkit-scrollbar-thumb {
background-color: var(--dark_888_color);
border-radius: 0.4rem;
}
&.is_opened {
&::-webkit-scrollbar-track {
background-color: var(--dark_875_color);
}
&::-webkit-scrollbar-thumb {
background-color: var(--dark_875_color);
}
}
&:hover {
&::-webkit-scrollbar-thumb {
background-color: var(--dark_800_color);
}
}
}

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

@@ -1,9 +1,10 @@
import { useStore_MicThreshold } from "@store"; import { useStore_MicThreshold, useStore_EnableAutomaticMicThreshold } from "@store";
import { useStdoutToPython } from "@logics/useStdoutToPython"; import { useStdoutToPython } from "@logics/useStdoutToPython";
export const useMicThreshold = () => { export const useMicThreshold = () => {
const { asyncStdoutToPython } = useStdoutToPython(); const { asyncStdoutToPython } = useStdoutToPython();
const { updateMicThreshold, currentMicThreshold } = useStore_MicThreshold(); const { updateMicThreshold, currentMicThreshold } = useStore_MicThreshold();
const { updateEnableAutomaticMicThreshold, currentEnableAutomaticMicThreshold } = useStore_EnableAutomaticMicThreshold();
const getMicThreshold = () => { const getMicThreshold = () => {
asyncStdoutToPython("/config/input_mic_energy_threshold"); asyncStdoutToPython("/config/input_mic_energy_threshold");
@@ -13,10 +14,29 @@ export const useMicThreshold = () => {
asyncStdoutToPython("/controller/callback_set_mic_energy_threshold", mic_threshold); asyncStdoutToPython("/controller/callback_set_mic_energy_threshold", mic_threshold);
}; };
const getEnableAutomaticMicThreshold = () => {
updateEnableAutomaticMicThreshold(() => new Promise(() => {}));
asyncStdoutToPython("/config/input_mic_dynamic_energy_threshold");
};
const toggleEnableAutomaticMicThreshold = () => {
updateEnableAutomaticMicThreshold(() => new Promise(() => {}));
if (currentEnableAutomaticMicThreshold.data) {
asyncStdoutToPython("/controller/callback_disable_mic_dynamic_energy_threshold");
} else {
asyncStdoutToPython("/controller/callback_enable_mic_dynamic_energy_threshold");
}
};
return { return {
currentMicThreshold, currentMicThreshold,
getMicThreshold, getMicThreshold,
setMicThreshold, setMicThreshold,
updateMicThreshold, updateMicThreshold,
currentEnableAutomaticMicThreshold,
getEnableAutomaticMicThreshold,
toggleEnableAutomaticMicThreshold,
updateEnableAutomaticMicThreshold,
}; };
}; };

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

@@ -1,9 +1,10 @@
import { useStore_SpeakerThreshold } from "@store"; import { useStore_SpeakerThreshold, useStore_EnableAutomaticSpeakerThreshold } from "@store";
import { useStdoutToPython } from "@logics/useStdoutToPython"; import { useStdoutToPython } from "@logics/useStdoutToPython";
export const useSpeakerThreshold = () => { export const useSpeakerThreshold = () => {
const { asyncStdoutToPython } = useStdoutToPython(); const { asyncStdoutToPython } = useStdoutToPython();
const { updateSpeakerThreshold, currentSpeakerThreshold } = useStore_SpeakerThreshold(); const { updateSpeakerThreshold, currentSpeakerThreshold } = useStore_SpeakerThreshold();
const { updateEnableAutomaticSpeakerThreshold, currentEnableAutomaticSpeakerThreshold } = useStore_EnableAutomaticSpeakerThreshold();
const getSpeakerThreshold = () => { const getSpeakerThreshold = () => {
asyncStdoutToPython("/config/input_speaker_energy_threshold"); asyncStdoutToPython("/config/input_speaker_energy_threshold");
@@ -13,10 +14,29 @@ export const useSpeakerThreshold = () => {
asyncStdoutToPython("/controller/callback_set_speaker_energy_threshold", speaker_threshold); asyncStdoutToPython("/controller/callback_set_speaker_energy_threshold", speaker_threshold);
}; };
const getEnableAutomaticSpeakerThreshold = () => {
updateEnableAutomaticSpeakerThreshold(() => new Promise(() => {}));
asyncStdoutToPython("/config/input_speaker_dynamic_energy_threshold");
};
const toggleEnableAutomaticSpeakerThreshold = () => {
updateEnableAutomaticSpeakerThreshold(() => new Promise(() => {}));
if (currentEnableAutomaticSpeakerThreshold.data) {
asyncStdoutToPython("/controller/callback_disable_speaker_dynamic_energy_threshold");
} else {
asyncStdoutToPython("/controller/callback_enable_speaker_dynamic_energy_threshold");
}
};
return { return {
currentSpeakerThreshold, currentSpeakerThreshold,
getSpeakerThreshold, getSpeakerThreshold,
setSpeakerThreshold, setSpeakerThreshold,
updateSpeakerThreshold, updateSpeakerThreshold,
currentEnableAutomaticSpeakerThreshold,
getEnableAutomaticSpeakerThreshold,
toggleEnableAutomaticSpeakerThreshold,
updateEnableAutomaticSpeakerThreshold,
}; };
}; };

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

@@ -36,8 +36,10 @@ export const useReceiveRoutes = () => {
const { updateSelectedMicDevice } = useSelectedMicDevice(); const { updateSelectedMicDevice } = useSelectedMicDevice();
const { updateSpeakerDeviceList } = useSpeakerDeviceList(); const { updateSpeakerDeviceList } = useSpeakerDeviceList();
const { updateSelectedSpeakerDevice } = useSelectedSpeakerDevice(); const { updateSelectedSpeakerDevice } = useSelectedSpeakerDevice();
const { updateMicThreshold } = useMicThreshold();
const { updateSpeakerThreshold } = useSpeakerThreshold(); const { updateMicThreshold, updateEnableAutomaticMicThreshold } = useMicThreshold();
const { updateSpeakerThreshold, updateEnableAutomaticSpeakerThreshold } = useSpeakerThreshold();
const { updateEnableAutoClearMessageBox } = useEnableAutoClearMessageBox(); const { updateEnableAutoClearMessageBox } = useEnableAutoClearMessageBox();
const { updateSendMessageButtonType } = useSendMessageButtonType(); const { updateSendMessageButtonType } = useSendMessageButtonType();
@@ -94,6 +96,12 @@ export const useReceiveRoutes = () => {
"/config/input_speaker_energy_threshold": updateSpeakerThreshold, "/config/input_speaker_energy_threshold": updateSpeakerThreshold,
"/controller/callback_set_speaker_energy_threshold": updateSpeakerThreshold, "/controller/callback_set_speaker_energy_threshold": updateSpeakerThreshold,
"/config/input_mic_dynamic_energy_threshold": updateEnableAutomaticMicThreshold,
"/controller/callback_enable_mic_dynamic_energy_threshold": updateEnableAutomaticMicThreshold,
"/controller/callback_disable_mic_dynamic_energy_threshold": updateEnableAutomaticMicThreshold,
"/config/input_speaker_dynamic_energy_threshold": updateEnableAutomaticSpeakerThreshold,
"/controller/callback_enable_speaker_dynamic_energy_threshold": updateEnableAutomaticSpeakerThreshold,
"/controller/callback_disable_speaker_dynamic_energy_threshold": updateEnableAutomaticSpeakerThreshold,
"/controller/callback_messagebox_send": updateSentMessageLogById, "/controller/callback_messagebox_send": updateSentMessageLogById,
"/action/transcription_send_mic_message": addSentMessageLog, "/action/transcription_send_mic_message": addSentMessageLog,

2
src-ui/store.js
View File

@@ -133,6 +133,8 @@ export const { atomInstance: Atom_SpeakerThresholdCheckStatus, useHook: useStore
export const { atomInstance: Atom_MicThreshold, useHook: useStore_MicThreshold } = createAtomWithHook(0, "MicThreshold"); 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_SpeakerThreshold, useHook: useStore_SpeakerThreshold } = createAtomWithHook(0, "SpeakerThreshold");
export const { atomInstance: Atom_EnableAutomaticMicThreshold, useHook: useStore_EnableAutomaticMicThreshold } = createAsyncAtomWithHook(false, "EnableAutomaticMicThreshold");
export const { atomInstance: Atom_EnableAutomaticSpeakerThreshold, useHook: useStore_EnableAutomaticSpeakerThreshold } = createAsyncAtomWithHook(false, "EnableAutomaticSpeakerThreshold");
export const { atomInstance: Atom_SendMessageFormat, useHook: useStore_SendMessageFormat } = createAtomWithHook({ export const { atomInstance: Atom_SendMessageFormat, useHook: useStore_SendMessageFormat } = createAtomWithHook({
before: "", before: "",

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

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