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_error": "Auth Key is incorrect or Usage limit reached."
},
"mic_host": {
"label": "Mic Host/Driver"
},
"mic_device": {
"label": "Mic Device"
"mic_host_device": {
"label": "Mic Device",
"label_host": "Host/Driver",
"label_device": "Device"
},
"mic_dynamic_energy_threshold": {
"label_for_automatic": "Mic Energy Threshold (Current Setting: Automatic)",

9
locales/ja.json
View File

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

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

@@ -35,8 +35,8 @@ const StartPythonFacadeComponent = () => {
const { getSelectedMicHost } = useSelectedMicHost();
const { getSelectedMicDevice } = useSelectedMicDevice();
const { getSelectedSpeakerDevice } = useSelectedSpeakerDevice();
const { getMicThreshold } = useMicThreshold();
const { getSpeakerThreshold } = useSpeakerThreshold();
const { getMicThreshold, getEnableAutomaticMicThreshold } = useMicThreshold();
const { getSpeakerThreshold, getEnableAutomaticSpeakerThreshold } = useSpeakerThreshold();
const { getEnableAutoClearMessageBox } = useEnableAutoClearMessageBox();
const { getSendMessageButtonType } = useSendMessageButtonType();
@@ -52,6 +52,8 @@ const StartPythonFacadeComponent = () => {
getMicThreshold();
getSpeakerThreshold();
getEnableAutomaticMicThreshold();
getEnableAutomaticSpeakerThreshold();
getEnableAutoClearMessageBox();
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 (
<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")
? <p className={styles.dropdown_selected_text}>Loading...</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;
background-color: var(--dark_950_color);
min-width: 20rem;
padding: 0.6rem 1rem;
padding: 0.8rem 1.4rem;
cursor: pointer;
border-radius: 0.4rem;
&:hover {
@@ -24,14 +24,15 @@
.dropdown_selected_text {
font-size: 1.4rem;
padding-right: 2.8rem;
}
.dropdown_content_wrapper {
display: none;
position: absolute;
top: 100%; // Position it below the toggle button
left: 0;
width: 100%;
right: 0;
min-width: 20rem;
z-index: 1;
&.is_opened {
display: block;
@@ -44,11 +45,12 @@
display: flex;
flex-direction: column;
gap: 0.1rem;
white-space: nowrap;
}
.value_button {
background-color: var(--dark_875_color);
padding: 0.8rem;
padding: 1.2rem;
cursor: pointer;
&:hover {
background-color: var(--dark_800_color);
@@ -59,7 +61,7 @@
}
.value_text {
font-size: 1.2rem;
font-size: 1.4rem;
}
.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";
export const Switchbox = (props) => {
const [is_turned_on, setIsTurnedOn] = useState(false);
const [is_hovered, setIsHovered] = useState(false);
const [is_mouse_down, setIsMouseDown] = useState(false);
const getClassNames = (baseClass) => clsx(baseClass, {
[styles.is_active]: (is_turned_on === true),
// [styles.is_loading]: (currentState.state === "loading"),
const is_loading = (props.variable.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_mouse_down]: is_mouse_down,
});
@@ -21,21 +21,22 @@ export const Switchbox = (props) => {
const onMouseUp = () => setIsMouseDown(false);
const toggleFunction = () => {
setIsTurnedOn(!is_turned_on);
props.toggleFunction();
};
return (
<div className={styles.switchbox_container}>
<div className={styles.switchbox_wrapper}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onMouseDown={onMouseDown}
onMouseUp={onMouseUp}
onClick={toggleFunction}
<div className={getClassNames(styles.switchbox_wrapper)}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onMouseDown={onMouseDown}
onMouseUp={onMouseUp}
onClick={toggleFunction}
>
<div className={getClassNames(styles.toggle_control)}>
<span className={getClassNames(styles.control)}></span>
{is_loading && <span className={styles.loader}></span>}
</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;
padding: 2rem;
height: 100%;
&.is_loading {
pointer-events: none;
}
}
.toggle_control {
@@ -22,4 +25,8 @@
display: flex;
justify-content: 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 { useMicThreshold } from "@logics_configs/useMicThreshold";
const MicComponent = (props) => {
const { currentMicThreshold, setMicThreshold } = useMicThreshold();
const {
currentMicThreshold,
setMicThreshold,
currentEnableAutomaticMicThreshold,
} = useMicThreshold();
const [ui_threshold, setUiThreshold] = useState(currentMicThreshold);
const {volumeCheckStart_Mic, volumeCheckStop_Mic, currentMicThresholdCheckStatus } = useVolume();
const {
volumeCheckStart_Mic,
volumeCheckStop_Mic,
currentMicThresholdCheckStatus,
} = useVolume();
useEffect(() => {
setUiThreshold(currentMicThreshold);
}, [currentMicThreshold]);
if (currentEnableAutomaticMicThreshold.data === true) {
setUiThreshold("Auto");
} else {
setUiThreshold(currentMicThreshold);
}
}, [currentMicThreshold, currentEnableAutomaticMicThreshold]);
const setUiThresholdFunction = (payload_ui_threshold) => {
setUiThreshold(payload_ui_threshold);
@@ -33,6 +45,8 @@ const MicComponent = (props) => {
setMicThreshold(payload_threshold);
};
const is_disable = currentEnableAutomaticMicThreshold.data === true ? true : false;
return (
<>
<VolumeCheckButton
@@ -53,6 +67,7 @@ const MicComponent = (props) => {
ui_threshold={ui_threshold}
setUiThresholdFunction={setUiThresholdFunction}
setThresholdFunction={setThresholdFunction}
is_disable={is_disable}
/>
</>
);
@@ -60,13 +75,25 @@ const MicComponent = (props) => {
import HeadphonesSvg from "@images/headphones.svg?react";
import { useSpeakerThreshold } from "@logics_configs/useSpeakerThreshold";
const SpeakerComponent = (props) => {
const { currentSpeakerThreshold, setSpeakerThreshold } = useSpeakerThreshold();
const {
currentSpeakerThreshold,
setSpeakerThreshold,
currentEnableAutomaticSpeakerThreshold,
} = useSpeakerThreshold();
const [ui_threshold, setUiThreshold] = useState(currentSpeakerThreshold);
const {volumeCheckStart_Speaker, volumeCheckStop_Speaker, currentSpeakerThresholdCheckStatus } = useVolume();
const {
volumeCheckStart_Speaker,
volumeCheckStop_Speaker,
currentSpeakerThresholdCheckStatus,
} = useVolume();
useEffect(() => {
setUiThreshold(currentSpeakerThreshold);
}, [currentSpeakerThreshold]);
if (currentEnableAutomaticSpeakerThreshold.data === true) {
setUiThreshold("Auto");
} else {
setUiThreshold(currentSpeakerThreshold);
}
}, [currentSpeakerThreshold, currentEnableAutomaticSpeakerThreshold]);
const setUiThresholdFunction = (payload_ui_threshold) => {
setUiThreshold(payload_ui_threshold);
@@ -75,6 +102,8 @@ const SpeakerComponent = (props) => {
setSpeakerThreshold(payload_threshold);
};
const is_disable = currentEnableAutomaticSpeakerThreshold.data === true ? true : false;
return (
<>
<VolumeCheckButton
@@ -95,6 +124,7 @@ const SpeakerComponent = (props) => {
ui_threshold={ui_threshold}
setUiThresholdFunction={setUiThresholdFunction}
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 {
useStore_MicVolume,
@@ -18,48 +17,56 @@ export const SliderAndMeter = (props) => {
);
};
import { useMicThreshold } from "@logics_configs/useMicThreshold";
const ThresholdVolumeMeter_Mic = (props) => {
const { currentMicVolume } = useStore_MicVolume();
const { currentEnableAutomaticMicThreshold } = useMicThreshold();
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={props.ui_threshold}/>
<input
type="range"
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}
/>
{currentEnableAutomaticMicThreshold.data === false &&
<input
type="range"
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}
/>
}
</>
);
};
import { useSpeakerThreshold } from "@logics_configs/useSpeakerThreshold";
const ThresholdVolumeMeter_Speaker = (props) => {
const { currentSpeakerVolume } = useStore_SpeakerVolume();
const { currentEnableAutomaticSpeakerThreshold } = useSpeakerThreshold();
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={currentVolumeVariable} threshold={props.ui_threshold} />
<input
type="range"
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}
/>
{currentEnableAutomaticSpeakerThreshold.data === false &&
<input
type="range"
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}
/>
}
</>
);
};

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";
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 (
<input
className={styles.entry_input_area}
className={class_names}
onChange={onChangeFunction}
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 (
<input
className={styles.entry_input_area}
className={class_names}
onChange={onChangeFunction}
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%;
font-size: 1.4rem;
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";
const useOnMouseLeaveDropdownMenu = () => {
export const useOnMouseLeaveDropdownMenu = () => {
const { updateIsOpenedDropdownMenu } = useStore_IsOpenedDropdownMenu();
const onMouseLeaveFunction = () => {
@@ -38,25 +38,22 @@ export const DropdownMenuContainer = (props) => {
};
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 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}>

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

@@ -4,7 +4,6 @@
justify-content: space-between;
align-items: center;
padding: 2rem;
display: flex;
justify-content: space-between;
align-items: center;
gap: 2rem;
@@ -18,27 +17,25 @@
width: 100%;
}
.threshold_container {
display: flex;
width: 100%;
flex-direction: column;
justify-content: space-between;
align-items: center;
gap: 2rem;
padding: 2rem;
border-bottom: solid 0.1rem var(--dark_800_color);
}
// .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_switch_section {
// display: flex;
// width: 100%;
// justify-content: space-between;
// align-items: center;
// }
.threshold_section {
width: 100%;
}
// .threshold_section {
// width: 100%;
// }
.deepl_auth_key_label_section {
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 styles from "./Device.module.scss";
import {
DropdownMenuContainer,
ThresholdContainer,
useOnMouseLeaveDropdownMenu,
} from "../components/useSettingBox";
export const Device = () => {
return (
<>
<DropdownMenuContainer_MicHost />
<DropdownMenuContainer_MicDevice />
<ThresholdContainer_Mic />
<DropdownMenuContainer_SpeakerDevice />
<ThresholdContainer_Speaker />
<Mic_Container />
<Speaker_Container />
</>
);
};
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 = () => {
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 { 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 { currentMicDeviceList, getMicDeviceList } = useMicDeviceList();
const selectFunction = (selected_data) => {
const selectFunction_device = (selected_data) => {
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 (
<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}
/>
<div className={styles.mic_container}>
<div className={styles.device_container} onMouseLeave={onMouseLeaveFunction}>
<LabelComponent label={t("config_page.mic_host_device.label")} />
<div className={styles.device_contents}>
<div className={styles.device_dropdown_wrapper}>
<p className={styles.device_dropdown_label}>{t("config_page.mic_host_device.label_host")}</p>
<DropdownMenu
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 { useSelectedSpeakerDevice } from "@logics_configs/useSelectedSpeakerDevice";
const DropdownMenuContainer_SpeakerDevice = () => {
import { useSpeakerThreshold } from "@logics_configs/useSpeakerThreshold";
const Speaker_Container = () => {
const { t } = useTranslation();
const { currentSelectedSpeakerDevice, setSelectedSpeakerDevice } = useSelectedSpeakerDevice();
const { currentSpeakerDeviceList, getSpeakerDeviceList } = useSpeakerDeviceList();
const { onMouseLeaveFunction } = useOnMouseLeaveDropdownMenu();
const { currentEnableAutomaticSpeakerThreshold, toggleEnableAutomaticSpeakerThreshold } = useSpeakerThreshold();
const selectFunction = (selected_data) => {
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 (
<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"
/>
<div className={styles.speaker_container}>
<div className={styles.device_container} onMouseLeave={onMouseLeaveFunction}>
<LabelComponent label={t("config_page.speaker_device.label")} />
<div className={styles.device_contents}>
<div className={styles.device_dropdown_wrapper}>
<DropdownMenu
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}
/>
</div>
</div>
</div>
<div className={styles.threshold_container}>
<div className={styles.threshold_switch_section}>
<LabelComponent {...getLabels()}/>
<Switchbox
variable={currentEnableAutomaticSpeakerThreshold}
toggleFunction={toggleEnableAutomaticSpeakerThreshold}
/>
</div>
<div className={styles.threshold_section}>
<ThresholdComponent
id="speaker_threshold"
min="0"
max="4000"
/>
</div>
</div>
</div>
);
};

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 styles from "./SidebarSection.module.scss";
import { useStore_IsMainPageCompactMode } from "@store";
import { useStore_IsMainPageCompactMode, useStore_IsOpenedLanguageSelector } from "@store";
import { Logo } from "./logo/Logo";
import { MainFunctionSwitch } from "./main_function_switch/MainFunctionSwitch";
@@ -10,15 +10,22 @@ import { OpenSettings } from "./open_settings/OpenSettings";
export const SidebarSection = () => {
const { currentIsMainPageCompactMode } = useStore_IsMainPageCompactMode();
const container_class_name = clsx(styles["container"], {
[styles["is_compact_mode"]]: currentIsMainPageCompactMode
const container_class_name = clsx(styles.container, {
[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 (
<div className={container_class_name}>
<Logo />
<MainFunctionSwitch />
{!currentIsMainPageCompactMode && <LanguageSettings />}
<div className={scroll_container_class_names}>
<MainFunctionSwitch />
{!currentIsMainPageCompactMode && <LanguageSettings />}
</div>
<OpenSettings />
</div>
);

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

@@ -7,5 +7,45 @@
background-color: var(--dark_850_color);
&.is_compact_mode {
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";
export const useMicThreshold = () => {
const { asyncStdoutToPython } = useStdoutToPython();
const { updateMicThreshold, currentMicThreshold } = useStore_MicThreshold();
const { updateEnableAutomaticMicThreshold, currentEnableAutomaticMicThreshold } = useStore_EnableAutomaticMicThreshold();
const getMicThreshold = () => {
asyncStdoutToPython("/config/input_mic_energy_threshold");
@@ -13,10 +14,29 @@ export const useMicThreshold = () => {
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 {
currentMicThreshold,
getMicThreshold,
setMicThreshold,
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";
export const useSpeakerThreshold = () => {
const { asyncStdoutToPython } = useStdoutToPython();
const { updateSpeakerThreshold, currentSpeakerThreshold } = useStore_SpeakerThreshold();
const { updateEnableAutomaticSpeakerThreshold, currentEnableAutomaticSpeakerThreshold } = useStore_EnableAutomaticSpeakerThreshold();
const getSpeakerThreshold = () => {
asyncStdoutToPython("/config/input_speaker_energy_threshold");
@@ -13,10 +14,29 @@ export const useSpeakerThreshold = () => {
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 {
currentSpeakerThreshold,
getSpeakerThreshold,
setSpeakerThreshold,
updateSpeakerThreshold,
currentEnableAutomaticSpeakerThreshold,
getEnableAutomaticSpeakerThreshold,
toggleEnableAutomaticSpeakerThreshold,
updateEnableAutomaticSpeakerThreshold,
};
};

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

@@ -36,8 +36,10 @@ export const useReceiveRoutes = () => {
const { updateSelectedMicDevice } = useSelectedMicDevice();
const { updateSpeakerDeviceList } = useSpeakerDeviceList();
const { updateSelectedSpeakerDevice } = useSelectedSpeakerDevice();
const { updateMicThreshold } = useMicThreshold();
const { updateSpeakerThreshold } = useSpeakerThreshold();
const { updateMicThreshold, updateEnableAutomaticMicThreshold } = useMicThreshold();
const { updateSpeakerThreshold, updateEnableAutomaticSpeakerThreshold } = useSpeakerThreshold();
const { updateEnableAutoClearMessageBox } = useEnableAutoClearMessageBox();
const { updateSendMessageButtonType } = useSendMessageButtonType();
@@ -94,6 +96,12 @@ export const useReceiveRoutes = () => {
"/config/input_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,
"/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_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({
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;
transition: left $toggle_control_speed $toggle_control_ease;
}
&.is_loading:after{
background-color: var(--dark_600_color);
}
&.is_hovered {
background-color: var(--dark_725_color);
}