diff --git a/locales/en.json b/locales/en.json index 20523a0f..29e25d8c 100644 --- a/locales/en.json +++ b/locales/en.json @@ -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)", diff --git a/locales/ja.json b/locales/ja.json index d9bab947..085a7f30 100644 --- a/locales/ja.json +++ b/locales/ja.json @@ -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": "マイク入力感度の調整 (現在の設定: 自動)", diff --git a/src-ui/app/App.jsx b/src-ui/app/App.jsx index 8cd46ab6..c085683f 100644 --- a/src-ui/app/App.jsx +++ b/src-ui/app/App.jsx @@ -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(); diff --git a/src-ui/app/config_page/setting_section/setting_box/components/dropdown_menu/DropdownMenu.jsx b/src-ui/app/config_page/setting_section/setting_box/components/dropdown_menu/DropdownMenu.jsx index 4194fc15..86f811fd 100644 --- a/src-ui/app/config_page/setting_section/setting_box/components/dropdown_menu/DropdownMenu.jsx +++ b/src-ui/app/config_page/setting_section/setting_box/components/dropdown_menu/DropdownMenu.jsx @@ -43,7 +43,7 @@ export const DropdownMenu = (props) => { return (
-
+
{(props.state === "loading") ?

Loading...

:

{getSelectedText()}

diff --git a/src-ui/app/config_page/setting_section/setting_box/components/dropdown_menu/DropdownMenu.module.scss b/src-ui/app/config_page/setting_section/setting_box/components/dropdown_menu/DropdownMenu.module.scss index b47b3bac..0387f420 100644 --- a/src-ui/app/config_page/setting_section/setting_box/components/dropdown_menu/DropdownMenu.module.scss +++ b/src-ui/app/config_page/setting_section/setting_box/components/dropdown_menu/DropdownMenu.module.scss @@ -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 { diff --git a/src-ui/app/config_page/setting_section/setting_box/components/switchbox/Switchbox.jsx b/src-ui/app/config_page/setting_section/setting_box/components/switchbox/Switchbox.jsx index f8b16f1e..f9fc0977 100644 --- a/src-ui/app/config_page/setting_section/setting_box/components/switchbox/Switchbox.jsx +++ b/src-ui/app/config_page/setting_section/setting_box/components/switchbox/Switchbox.jsx @@ -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 (
-
+ {is_loading && }
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/switchbox/Switchbox.module.scss b/src-ui/app/config_page/setting_section/setting_box/components/switchbox/Switchbox.module.scss index 1f7f7c83..2c69fe8f 100644 --- a/src-ui/app/config_page/setting_section/setting_box/components/switchbox/Switchbox.module.scss +++ b/src-ui/app/config_page/setting_section/setting_box/components/switchbox/Switchbox.module.scss @@ -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); } \ No newline at end of file diff --git a/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/ThresholdComponent.jsx b/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/ThresholdComponent.jsx index f10c114e..5c5d07e2 100644 --- a/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/ThresholdComponent.jsx +++ b/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/ThresholdComponent.jsx @@ -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 ( <> { 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 ( <> { ui_threshold={ui_threshold} setUiThresholdFunction={setUiThresholdFunction} setThresholdFunction={setThresholdFunction} + is_disable={is_disable} /> ); diff --git a/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/slider_and_meter/SliderAndMeter.jsx b/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/slider_and_meter/SliderAndMeter.jsx index bb3e2dcf..6fbe0c1b 100644 --- a/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/slider_and_meter/SliderAndMeter.jsx +++ b/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/slider_and_meter/SliderAndMeter.jsx @@ -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 ( <> - props.setUiThresholdFunction(e.target.value)} - onMouseUp={(e) => props.setThresholdFunction(e.target.value)} - className={styles.threshold_slider} - /> + {currentEnableAutomaticMicThreshold.data === false && + 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 ( <> - props.setUiThresholdFunction(e.target.value)} - onMouseUp={(e) => props.setThresholdFunction(e.target.value)} - className={styles.threshold_slider} - /> + {currentEnableAutomaticSpeakerThreshold.data === false && + props.setUiThresholdFunction(e.target.value)} + onMouseUp={(e) => props.setThresholdFunction(e.target.value)} + className={styles.threshold_slider} + /> + } ); }; diff --git a/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/threshold_entry/ThresholdEntry.jsx b/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/threshold_entry/ThresholdEntry.jsx index 9b5b5e62..cb7b010c 100644 --- a/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/threshold_entry/ThresholdEntry.jsx +++ b/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/threshold_entry/ThresholdEntry.jsx @@ -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 ( @@ -40,9 +45,13 @@ const ThresholdEntry_Speaker = (props) => { } }; + const class_names = clsx(styles.entry_input_area, { + [styles.is_disable]: props.is_disable + }); + return ( diff --git a/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/threshold_entry/ThresholdEntry.module.scss b/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/threshold_entry/ThresholdEntry.module.scss index 2f6a2522..d2378d03 100644 --- a/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/threshold_entry/ThresholdEntry.module.scss +++ b/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/threshold_entry/ThresholdEntry.module.scss @@ -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; + } } \ No newline at end of file diff --git a/src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.jsx b/src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.jsx index 03df067f..5d6f0982 100644 --- a/src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.jsx +++ b/src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.jsx @@ -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 ( -
-
- - -
-
- -
-
- ); -}; +// export const ThresholdContainer = (props) => { +// return ( +//
+//
+// +// +//
+//
+// +//
+//
+// ); +// }; export const useSettingBox = () => { - console.log("useSettingBox______________"); - - const SliderContainer = (props) => { return (
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.module.scss b/src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.module.scss index 6740a057..8eb56996 100644 --- a/src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.module.scss +++ b/src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.module.scss @@ -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; diff --git a/src-ui/app/config_page/setting_section/setting_box/device/Device.jsx b/src-ui/app/config_page/setting_section/setting_box/device/Device.jsx index 0354f438..6bfee05f 100644 --- a/src-ui/app/config_page/setting_section/setting_box/device/Device.jsx +++ b/src-ui/app/config_page/setting_section/setting_box/device/Device.jsx @@ -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 ( <> - - - - - + + ); }; 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 ( - - ); -}; 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 ( - +
+
+ +
+
+

{t("config_page.mic_host_device.label_host")}

+ +
+ +
+

{t("config_page.mic_host_device.label_device")}

+ +
+
+
+
+
+ + +
+
+ +
+
+
); }; 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 ( - - ); -}; - -const ThresholdContainer_Mic = () => { - const { t } = useTranslation(); - - return ( - - ); -}; - -const ThresholdContainer_Speaker = () => { - const { t } = useTranslation(); - - return ( - +
+
+ +
+
+ +
+
+
+
+
+ + +
+
+ +
+
+
); }; \ No newline at end of file diff --git a/src-ui/app/config_page/setting_section/setting_box/device/Device.module.scss b/src-ui/app/config_page/setting_section/setting_box/device/Device.module.scss new file mode 100644 index 00000000..1e2f9117 --- /dev/null +++ b/src-ui/app/config_page/setting_section/setting_box/device/Device.module.scss @@ -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); +} \ No newline at end of file diff --git a/src-ui/app/main_page/sidebar_section/SidebarSection.jsx b/src-ui/app/main_page/sidebar_section/SidebarSection.jsx index 1d00ea55..64e7c7ba 100644 --- a/src-ui/app/main_page/sidebar_section/SidebarSection.jsx +++ b/src-ui/app/main_page/sidebar_section/SidebarSection.jsx @@ -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 (
- - {!currentIsMainPageCompactMode && } +
+ + {!currentIsMainPageCompactMode && } +
); diff --git a/src-ui/app/main_page/sidebar_section/SidebarSection.module.scss b/src-ui/app/main_page/sidebar_section/SidebarSection.module.scss index de2f091a..26096649 100644 --- a/src-ui/app/main_page/sidebar_section/SidebarSection.module.scss +++ b/src-ui/app/main_page/sidebar_section/SidebarSection.module.scss @@ -7,5 +7,45 @@ background-color: var(--dark_850_color); &.is_compact_mode { min-width: auto; + .scroll_container { + overflow-y: hidden; + width: auto; + } } -} \ No newline at end of file +} + +.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); + } + } + +} diff --git a/src-ui/logics/configs/useMicThreshold.js b/src-ui/logics/configs/useMicThreshold.js index 14b2a91c..0a850f88 100644 --- a/src-ui/logics/configs/useMicThreshold.js +++ b/src-ui/logics/configs/useMicThreshold.js @@ -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, }; }; \ No newline at end of file diff --git a/src-ui/logics/configs/useSpeakerThreshold.js b/src-ui/logics/configs/useSpeakerThreshold.js index f30c4382..74c2307b 100644 --- a/src-ui/logics/configs/useSpeakerThreshold.js +++ b/src-ui/logics/configs/useSpeakerThreshold.js @@ -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, }; }; \ No newline at end of file diff --git a/src-ui/logics/useReceiveRoutes.js b/src-ui/logics/useReceiveRoutes.js index badd556b..fe05b0b1 100644 --- a/src-ui/logics/useReceiveRoutes.js +++ b/src-ui/logics/useReceiveRoutes.js @@ -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, diff --git a/src-ui/store.js b/src-ui/store.js index 9a161d83..9fc296c1 100644 --- a/src-ui/store.js +++ b/src-ui/store.js @@ -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: "", diff --git a/src-ui/utils/mixins.scss b/src-ui/utils/mixins.scss index c1776870..72420f7f 100644 --- a/src-ui/utils/mixins.scss +++ b/src-ui/utils/mixins.scss @@ -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); }