[Perf/bugfix] Separate custom hooks and prevent re-render issues.
Config Page: Device Tab. threshold component. fix problem that the input component focused out when input something each time. Set threshold data when started python.
This commit is contained in:
Sakamoto Shiina
@@ -1,7 +1,7 @@
|
||||
import { getCurrent } from "@tauri-apps/api/window";
|
||||
import { useEffect, useRef } from "react";
|
||||
import { useStartPython } from "@logics/useStartPython";
|
||||
import { useConfig } from "@logics/useConfig";
|
||||
// import { useConfig } from "@logics/useConfig";
|
||||
import { MainPage } from "./main_page/MainPage";
|
||||
import { ConfigPage } from "./config_page/ConfigPage";
|
||||
import styles from "./App.module.scss";
|
||||
@@ -17,22 +17,28 @@ export const App = () => {
|
||||
};
|
||||
|
||||
|
||||
import { useSoftwareVersion } from "@logics_configs/useSoftwareVersion";
|
||||
import { useSelectedMicHost } from "@logics_configs/useSelectedMicHost";
|
||||
import { useSelectedMicDevice } from "@logics_configs/useSelectedMicDevice";
|
||||
import { useSelectedSpeakerDevice } from "@logics_configs/useSelectedSpeakerDevice";
|
||||
import { useMicThreshold } from "@logics_configs/useMicThreshold";
|
||||
import { useSpeakerThreshold } from "@logics_configs/useSpeakerThreshold";
|
||||
import { useEnableAutoClearMessageBox } from "@logics_configs/useEnableAutoClearMessageBox";
|
||||
import { useSendMessageButtonType } from "@logics_configs/useSendMessageButtonType";
|
||||
|
||||
const StartPythonFacadeComponent = () => {
|
||||
const { asyncStartPython } = useStartPython();
|
||||
const hasRunRef = useRef(false);
|
||||
const main_page = getCurrent();
|
||||
|
||||
const {
|
||||
getSoftwareVersion,
|
||||
// getMicHostList,
|
||||
getSelectedMicHost,
|
||||
// getMicDeviceList,
|
||||
getSelectedMicDevice,
|
||||
getSelectedSpeakerDevice,
|
||||
|
||||
getEnableAutoClearMessageBox,
|
||||
getSendMessageButtonType,
|
||||
} = useConfig();
|
||||
const { getSoftwareVersion } = useSoftwareVersion();
|
||||
const { getSelectedMicHost } = useSelectedMicHost();
|
||||
const { getSelectedMicDevice } = useSelectedMicDevice();
|
||||
const { getSelectedSpeakerDevice } = useSelectedSpeakerDevice();
|
||||
const { getMicThreshold } = useMicThreshold();
|
||||
const { getSpeakerThreshold } = useSpeakerThreshold();
|
||||
const { getEnableAutoClearMessageBox } = useEnableAutoClearMessageBox();
|
||||
const { getSendMessageButtonType } = useSendMessageButtonType();
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
@@ -40,12 +46,13 @@ const StartPythonFacadeComponent = () => {
|
||||
if (!hasRunRef.current) {
|
||||
asyncStartPython().then((result) => {
|
||||
getSoftwareVersion();
|
||||
// getMicHostList();
|
||||
getSelectedMicHost();
|
||||
// getMicDeviceList();
|
||||
getSelectedMicDevice();
|
||||
getSelectedSpeakerDevice();
|
||||
|
||||
getMicThreshold();
|
||||
getSpeakerThreshold();
|
||||
|
||||
getEnableAutoClearMessageBox();
|
||||
getSendMessageButtonType();
|
||||
}).catch((err) => {
|
||||
|
||||
@@ -2,16 +2,16 @@ import { useSelectedConfigTabId } from "@store";
|
||||
|
||||
import { Device } from "./device/Device";
|
||||
import { Appearance } from "./appearance/Appearance";
|
||||
import { Others } from "./others/Others";
|
||||
import { AboutVrct } from "./about_vrct/AboutVrct";
|
||||
// import { Others } from "./others/Others";
|
||||
// import { AboutVrct } from "./about_vrct/AboutVrct";
|
||||
|
||||
export const SettingBox = () => {
|
||||
const { currentSelectedConfigTabId } = useSelectedConfigTabId();
|
||||
switch (currentSelectedConfigTabId) {
|
||||
case "device":
|
||||
return <Device />;
|
||||
case "others":
|
||||
return <Others />;
|
||||
// case "others":
|
||||
// return <Others />;
|
||||
// case "appearance":
|
||||
// return <Appearance />;
|
||||
// case "about_vrct":
|
||||
|
||||
@@ -1,10 +1,8 @@
|
||||
import { useState } from "react";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import styles from "./ThresholdComponent.module.scss";
|
||||
import { SliderAndMeter } from "./slider_and_meter/SliderAndMeter";
|
||||
import { ThresholdEntry } from "./threshold_entry/ThresholdEntry";
|
||||
import { VolumeCheckButton } from "./volume_check_button/VolumeCheckButton";
|
||||
import { useConfig } from "@logics/useConfig";
|
||||
|
||||
export const ThresholdComponent = (props) => {
|
||||
return (
|
||||
@@ -18,10 +16,15 @@ export const ThresholdComponent = (props) => {
|
||||
);
|
||||
};
|
||||
|
||||
import { useMicThreshold } from "@logics_configs/useMicThreshold";
|
||||
const MicComponent = (props) => {
|
||||
const { currentMicThreshold, setMicThreshold } = useConfig();
|
||||
const { currentMicThreshold, setMicThreshold } = useMicThreshold();
|
||||
const [ui_threshold, setUiThreshold] = useState(currentMicThreshold);
|
||||
|
||||
useEffect(() => {
|
||||
setUiThreshold(currentMicThreshold);
|
||||
}, [currentMicThreshold]);
|
||||
|
||||
const setUiThresholdFunction = (payload_ui_threshold) => {
|
||||
setUiThreshold(payload_ui_threshold);
|
||||
};
|
||||
@@ -47,11 +50,15 @@ const MicComponent = (props) => {
|
||||
);
|
||||
};
|
||||
|
||||
import { useSpeakerThreshold } from "@logics_configs/useSpeakerThreshold";
|
||||
const SpeakerComponent = (props) => {
|
||||
|
||||
const { currentSpeakerThreshold, setSpeakerThreshold } = useConfig();
|
||||
const { currentSpeakerThreshold, setSpeakerThreshold } = useSpeakerThreshold();
|
||||
const [ui_threshold, setUiThreshold] = useState(currentSpeakerThreshold);
|
||||
|
||||
useEffect(() => {
|
||||
setUiThreshold(currentSpeakerThreshold);
|
||||
}, [currentSpeakerThreshold]);
|
||||
|
||||
const setUiThresholdFunction = (payload_ui_threshold) => {
|
||||
setUiThreshold(payload_ui_threshold);
|
||||
};
|
||||
|
||||
@@ -15,22 +15,48 @@ import { MessageFormat } from "./message_format/MessageFormat";
|
||||
import { ActionButton } from "./action_button/ActionButton";
|
||||
import { WordFilter, WordFilterListToggleComponent } from "./word_filter/WordFilter";
|
||||
|
||||
export const useSettingBox = () => {
|
||||
|
||||
const useOnMouseLeaveDropdownMenu = () => {
|
||||
const { updateIsOpenedDropdownMenu } = useIsOpenedDropdownMenu();
|
||||
|
||||
const DropdownMenuContainer = (props) => {
|
||||
const onMouseLeaveFunction = () => {
|
||||
updateIsOpenedDropdownMenu("");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles.container} onMouseLeave={onMouseLeaveFunction}>
|
||||
<LabelComponent label={props.label} desc={props.desc} />
|
||||
<DropdownMenu {...props}/>
|
||||
</div>
|
||||
);
|
||||
const onMouseLeaveFunction = () => {
|
||||
updateIsOpenedDropdownMenu("");
|
||||
};
|
||||
|
||||
return { onMouseLeaveFunction };
|
||||
};
|
||||
|
||||
export const DropdownMenuContainer = (props) => {
|
||||
const { onMouseLeaveFunction } = useOnMouseLeaveDropdownMenu();
|
||||
|
||||
return (
|
||||
<div className={styles.container} onMouseLeave={onMouseLeaveFunction}>
|
||||
<LabelComponent label={props.label} desc={props.desc} />
|
||||
<DropdownMenu {...props} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
export const ThresholdContainer = (props) => {
|
||||
return (
|
||||
<div className={styles.threshold_container}>
|
||||
<div className={styles.threshold_switch_section}>
|
||||
<LabelComponent label={props.label} desc={props.desc} />
|
||||
<Switchbox {...props}/>
|
||||
</div>
|
||||
<div className={styles.threshold_section}>
|
||||
<ThresholdComponent {...props}/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
export const useSettingBox = () => {
|
||||
console.log("useSettingBox______________");
|
||||
|
||||
|
||||
const SliderContainer = (props) => {
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
@@ -76,20 +102,6 @@ export const useSettingBox = () => {
|
||||
);
|
||||
};
|
||||
|
||||
const ThresholdContainer = (props) => {
|
||||
return (
|
||||
<div className={styles.threshold_container}>
|
||||
<div className={styles.threshold_switch_section}>
|
||||
<LabelComponent label={props.label} desc={props.desc} />
|
||||
<Switchbox {...props}/>
|
||||
</div>
|
||||
<div className={styles.threshold_section}>
|
||||
<ThresholdComponent {...props}/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const DeeplAuthKeyContainer = (props) => {
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
@@ -144,12 +156,10 @@ export const useSettingBox = () => {
|
||||
};
|
||||
|
||||
return {
|
||||
DropdownMenuContainer,
|
||||
SliderContainer,
|
||||
CheckboxContainer,
|
||||
SwitchboxContainer,
|
||||
EntryContainer,
|
||||
ThresholdContainer,
|
||||
RadioButtonContainer,
|
||||
DeeplAuthKeyContainer,
|
||||
MessageFormatContainer,
|
||||
|
||||
@@ -1,119 +1,119 @@
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useSettingBox } from "../components/useSettingBox";
|
||||
import {
|
||||
useMicHostList,
|
||||
useSelectedMicHost,
|
||||
useSelectedMicDevice,
|
||||
useMicDeviceList,
|
||||
useSelectedSpeakerDevice,
|
||||
useSpeakerDeviceList,
|
||||
} from "@store";
|
||||
|
||||
import { useConfig } from "@logics/useConfig";
|
||||
|
||||
DropdownMenuContainer,
|
||||
ThresholdContainer,
|
||||
} from "../components/useSettingBox";
|
||||
export const Device = () => {
|
||||
const { t } = useTranslation();
|
||||
const {
|
||||
DropdownMenuContainer,
|
||||
ThresholdContainer,
|
||||
} = useSettingBox();
|
||||
|
||||
|
||||
const { currentMicHostList } = useMicHostList();
|
||||
const { currentSelectedMicHost } = useSelectedMicHost();
|
||||
|
||||
const { currentMicDeviceList } = useMicDeviceList();
|
||||
const { currentSelectedMicDevice } = useSelectedMicDevice();
|
||||
|
||||
const { currentSpeakerDeviceList } = useSpeakerDeviceList();
|
||||
const { currentSelectedSpeakerDevice } = useSelectedSpeakerDevice();
|
||||
|
||||
const {
|
||||
setSelectedMicHost,
|
||||
setSelectedMicDevice,
|
||||
getMicHostList,
|
||||
getMicDeviceList,
|
||||
setSelectedSpeakerDevice,
|
||||
getSpeakerDeviceList,
|
||||
} = useConfig();
|
||||
|
||||
const selectFunction = (selected_data) => {
|
||||
switch (selected_data.dropdown_id) {
|
||||
case "mic_host":
|
||||
setSelectedMicHost(selected_data.selected_id);
|
||||
break;
|
||||
|
||||
case "mic_device":
|
||||
setSelectedMicDevice(selected_data.selected_id);
|
||||
break;
|
||||
|
||||
case "speaker_device":
|
||||
setSelectedSpeakerDevice(selected_data.selected_id);
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
// const volumeCheckStartFunction_Mic = () => {
|
||||
// volumeCheckStart_Mic();
|
||||
// };
|
||||
// const volumeCheckStopFunction_Mic = () => {
|
||||
// volumeCheckStop_Mic();
|
||||
// };
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<DropdownMenuContainer
|
||||
dropdown_id="mic_host"
|
||||
label={t("config_page.mic_host.label")}
|
||||
selected_id={currentSelectedMicHost.data}
|
||||
list={currentMicHostList.data}
|
||||
selectFunction={selectFunction}
|
||||
openListFunction={getMicHostList}
|
||||
state={currentSelectedMicHost.state}
|
||||
/>
|
||||
|
||||
<DropdownMenuContainer
|
||||
dropdown_id="mic_device"
|
||||
label={t("config_page.mic_device.label")}
|
||||
selected_id={currentSelectedMicDevice.data}
|
||||
list={currentMicDeviceList.data}
|
||||
selectFunction={selectFunction}
|
||||
openListFunction={getMicDeviceList}
|
||||
state={currentSelectedMicDevice.state}
|
||||
/>
|
||||
|
||||
<ThresholdContainer
|
||||
label={t("config_page.mic_dynamic_energy_threshold.label_for_manual")}
|
||||
desc={t("config_page.mic_dynamic_energy_threshold.desc_for_manual")}
|
||||
id="mic_threshold"
|
||||
min="0"
|
||||
max="2000"
|
||||
// volumeCheckStartFunction={volumeCheckStartFunction_Mic}
|
||||
// volumeCheckStopFunction={volumeCheckStopFunction_Mic}
|
||||
/>
|
||||
|
||||
|
||||
<DropdownMenuContainer
|
||||
dropdown_id="speaker_device"
|
||||
label={t("config_page.speaker_device.label")}
|
||||
selected_id={currentSelectedSpeakerDevice.data}
|
||||
list={currentSpeakerDeviceList.data}
|
||||
selectFunction={selectFunction}
|
||||
openListFunction={getSpeakerDeviceList}
|
||||
state={currentSelectedSpeakerDevice.state}
|
||||
/>
|
||||
|
||||
<ThresholdContainer
|
||||
label={t("config_page.speaker_dynamic_energy_threshold.label_for_manual")}
|
||||
desc={t("config_page.speaker_dynamic_energy_threshold.desc_for_manual")}
|
||||
id="speaker_threshold"
|
||||
min="0"
|
||||
max="4000"
|
||||
/>
|
||||
<DropdownMenuContainer_MicHost />
|
||||
<DropdownMenuContainer_MicDevice />
|
||||
<ThresholdContainer_Mic />
|
||||
<DropdownMenuContainer_SpeakerDevice />
|
||||
<ThresholdContainer_Speaker />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
import { useMicHostList } from "@logics_configs/useMicHostList";
|
||||
import { useSelectedMicHost } from "@logics_configs/useSelectedMicHost";
|
||||
const DropdownMenuContainer_MicHost = () => {
|
||||
const { t } = useTranslation();
|
||||
const { currentSelectedMicHost, setSelectedMicHost } = useSelectedMicHost();
|
||||
const { currentMicHostList, getMicHostList } = useMicHostList();
|
||||
|
||||
const selectFunction = (selected_data) => {
|
||||
setSelectedMicHost(selected_data.selected_id);
|
||||
};
|
||||
|
||||
return (
|
||||
<DropdownMenuContainer
|
||||
dropdown_id="mic_host"
|
||||
label={t("config_page.mic_host.label")}
|
||||
selected_id={currentSelectedMicHost.data}
|
||||
list={currentMicHostList.data}
|
||||
selectFunction={selectFunction}
|
||||
openListFunction={getMicHostList}
|
||||
state={currentSelectedMicHost.state}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
import { useMicDeviceList } from "@logics_configs/useMicDeviceList";
|
||||
import { useSelectedMicDevice } from "@logics_configs/useSelectedMicDevice";
|
||||
const DropdownMenuContainer_MicDevice = () => {
|
||||
const { t } = useTranslation();
|
||||
const { currentSelectedMicDevice, setSelectedMicDevice } = useSelectedMicDevice();
|
||||
const { currentMicDeviceList, getMicDeviceList } = useMicDeviceList();
|
||||
|
||||
const selectFunction = (selected_data) => {
|
||||
setSelectedMicDevice(selected_data.selected_id);
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<DropdownMenuContainer
|
||||
dropdown_id="mic_device"
|
||||
label={t("config_page.mic_device.label")}
|
||||
selected_id={currentSelectedMicDevice.data}
|
||||
list={currentMicDeviceList.data}
|
||||
selectFunction={selectFunction}
|
||||
openListFunction={getMicDeviceList}
|
||||
state={currentSelectedMicDevice.state}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
import { useSpeakerDeviceList } from "@logics_configs/useSpeakerDeviceList";
|
||||
import { useSelectedSpeakerDevice } from "@logics_configs/useSelectedSpeakerDevice";
|
||||
const DropdownMenuContainer_SpeakerDevice = () => {
|
||||
const { t } = useTranslation();
|
||||
const { currentSelectedSpeakerDevice, setSelectedSpeakerDevice } = useSelectedSpeakerDevice();
|
||||
const { currentSpeakerDeviceList, getSpeakerDeviceList } = useSpeakerDeviceList();
|
||||
|
||||
const selectFunction = (selected_data) => {
|
||||
setSelectedSpeakerDevice(selected_data.selected_id);
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<DropdownMenuContainer
|
||||
dropdown_id="speaker_device"
|
||||
label={t("config_page.speaker_device.label")}
|
||||
selected_id={currentSelectedSpeakerDevice.data}
|
||||
list={currentSpeakerDeviceList.data}
|
||||
selectFunction={selectFunction}
|
||||
openListFunction={getSpeakerDeviceList}
|
||||
state={currentSelectedSpeakerDevice.state}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const ThresholdContainer_Mic = () => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<ThresholdContainer
|
||||
label={t("config_page.mic_dynamic_energy_threshold.label_for_manual")}
|
||||
desc={t("config_page.mic_dynamic_energy_threshold.desc_for_manual")}
|
||||
id="mic_threshold"
|
||||
min="0"
|
||||
max="2000"
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const ThresholdContainer_Speaker = () => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<ThresholdContainer
|
||||
label={t("config_page.speaker_dynamic_energy_threshold.label_for_manual")}
|
||||
desc={t("config_page.speaker_dynamic_energy_threshold.desc_for_manual")}
|
||||
id="speaker_threshold"
|
||||
min="0"
|
||||
max="4000"
|
||||
/>
|
||||
);
|
||||
};
|
||||
@@ -4,14 +4,14 @@ import SendMessageSvg from "@images/send_message.svg?react";
|
||||
import { useMessage } from "@logics/useMessage";
|
||||
import { store, useEnableAutoClearMessageBox } from "@store";
|
||||
import { scrollToBottom } from "@logics/scrollToBottom";
|
||||
import { useConfig } from "@logics/useConfig";
|
||||
import { useSendMessageButtonType } from "@logics_configs/useSendMessageButtonType";
|
||||
|
||||
export const MessageInputBox = () => {
|
||||
const [inputValue, setInputValue] = useState("");
|
||||
const { sendMessage } = useMessage();
|
||||
|
||||
const { currentEnableAutoClearMessageBox } = useEnableAutoClearMessageBox();
|
||||
const { currentSendMessageButtonType } = useConfig();
|
||||
const { currentSendMessageButtonType } = useSendMessageButtonType();
|
||||
|
||||
const onSubmitFunction = (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
28
src-ui/logics/configs/useEnableAutoClearMessageBox.js
Normal file
28
src-ui/logics/configs/useEnableAutoClearMessageBox.js
Normal file
@@ -0,0 +1,28 @@
|
||||
import { useEnableAutoClearMessageBox as useStoreEnableAutoClearMessageBox } from "@store";
|
||||
import { useStdoutToPython } from "@logics/useStdoutToPython";
|
||||
|
||||
export const useEnableAutoClearMessageBox = () => {
|
||||
const { asyncStdoutToPython } = useStdoutToPython();
|
||||
const { currentEnableAutoClearMessageBox, updateEnableAutoClearMessageBox } = useStoreEnableAutoClearMessageBox();
|
||||
|
||||
const getEnableAutoClearMessageBox = () => {
|
||||
updateEnableAutoClearMessageBox(() => new Promise(() => {}));
|
||||
asyncStdoutToPython("/config/enable_auto_clear_message_box");
|
||||
};
|
||||
|
||||
const toggleEnableAutoClearMessageBox = () => {
|
||||
updateEnableAutoClearMessageBox(() => new Promise(() => {}));
|
||||
if (currentEnableAutoClearMessageBox.data) {
|
||||
asyncStdoutToPython("/controller/callback_disable_auto_clear_chatbox");
|
||||
} else {
|
||||
asyncStdoutToPython("/controller/callback_enable_auto_clear_chatbox");
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
getEnableAutoClearMessageBox,
|
||||
toggleEnableAutoClearMessageBox,
|
||||
currentEnableAutoClearMessageBox,
|
||||
updateEnableAutoClearMessageBox
|
||||
};
|
||||
};
|
||||
14
src-ui/logics/configs/useMicDeviceList.js
Normal file
14
src-ui/logics/configs/useMicDeviceList.js
Normal file
@@ -0,0 +1,14 @@
|
||||
import { useMicDeviceList as useStoreMicDeviceList } from "@store";
|
||||
import { useStdoutToPython } from "@logics/useStdoutToPython";
|
||||
|
||||
export const useMicDeviceList = () => {
|
||||
const { asyncStdoutToPython } = useStdoutToPython();
|
||||
const { currentMicDeviceList, updateMicDeviceList } = useStoreMicDeviceList();
|
||||
|
||||
const getMicDeviceList = () => {
|
||||
updateMicDeviceList(() => new Promise(() => {}));
|
||||
asyncStdoutToPython("/controller/list_mic_device");
|
||||
};
|
||||
|
||||
return { currentMicDeviceList, getMicDeviceList, updateMicDeviceList };
|
||||
};
|
||||
14
src-ui/logics/configs/useMicHostList.js
Normal file
14
src-ui/logics/configs/useMicHostList.js
Normal file
@@ -0,0 +1,14 @@
|
||||
import { useMicHostList as useStoreMicHostList } from "@store";
|
||||
import { useStdoutToPython } from "@logics/useStdoutToPython";
|
||||
|
||||
export const useMicHostList = () => {
|
||||
const { asyncStdoutToPython } = useStdoutToPython();
|
||||
const { currentMicHostList, updateMicHostList } = useStoreMicHostList();
|
||||
|
||||
const getMicHostList = () => {
|
||||
updateMicHostList(() => new Promise(() => {}));
|
||||
asyncStdoutToPython("/controller/list_mic_host");
|
||||
};
|
||||
|
||||
return { currentMicHostList, getMicHostList, updateMicHostList };
|
||||
};
|
||||
17
src-ui/logics/configs/useMicThreshold.js
Normal file
17
src-ui/logics/configs/useMicThreshold.js
Normal file
@@ -0,0 +1,17 @@
|
||||
import { useMicThreshold as useStoreMicThreshold } from "@store";
|
||||
import { useStdoutToPython } from "@logics/useStdoutToPython";
|
||||
|
||||
export const useMicThreshold = () => {
|
||||
const { asyncStdoutToPython } = useStdoutToPython();
|
||||
const { updateMicThreshold, currentMicThreshold } = useStoreMicThreshold();
|
||||
|
||||
const getMicThreshold = () => {
|
||||
asyncStdoutToPython("/config/input_mic_energy_threshold");
|
||||
};
|
||||
|
||||
const setMicThreshold = (mic_threshold) => {
|
||||
asyncStdoutToPython("/controller/callback_set_mic_energy_threshold", mic_threshold);
|
||||
};
|
||||
|
||||
return { getMicThreshold, setMicThreshold, currentMicThreshold, updateMicThreshold };
|
||||
};
|
||||
19
src-ui/logics/configs/useSelectedMicDevice.js
Normal file
19
src-ui/logics/configs/useSelectedMicDevice.js
Normal file
@@ -0,0 +1,19 @@
|
||||
import { useSelectedMicDevice as useStoreSelectedMicDevice } from "@store";
|
||||
import { useStdoutToPython } from "@logics/useStdoutToPython";
|
||||
|
||||
export const useSelectedMicDevice = () => {
|
||||
const { asyncStdoutToPython } = useStdoutToPython();
|
||||
const { currentSelectedMicDevice, updateSelectedMicDevice } = useStoreSelectedMicDevice();
|
||||
|
||||
const getSelectedMicDevice = () => {
|
||||
updateSelectedMicDevice(() => new Promise(() => {}));
|
||||
asyncStdoutToPython("/config/choice_mic_device");
|
||||
};
|
||||
|
||||
const setSelectedMicDevice = (selected_mic_device) => {
|
||||
updateSelectedMicDevice(() => new Promise(() => {}));
|
||||
asyncStdoutToPython("/controller/callback_set_mic_device", selected_mic_device);
|
||||
};
|
||||
|
||||
return { currentSelectedMicDevice, getSelectedMicDevice, updateSelectedMicDevice, setSelectedMicDevice };
|
||||
};
|
||||
19
src-ui/logics/configs/useSelectedMicHost.js
Normal file
19
src-ui/logics/configs/useSelectedMicHost.js
Normal file
@@ -0,0 +1,19 @@
|
||||
import { useSelectedMicHost as useStoreSelectedMicHost } from "@store";
|
||||
import { useStdoutToPython } from "@logics/useStdoutToPython";
|
||||
|
||||
export const useSelectedMicHost = () => {
|
||||
const { asyncStdoutToPython } = useStdoutToPython();
|
||||
const { currentSelectedMicHost, updateSelectedMicHost } = useStoreSelectedMicHost();
|
||||
|
||||
const getSelectedMicHost = () => {
|
||||
updateSelectedMicHost(() => new Promise(() => {}));
|
||||
asyncStdoutToPython("/config/choice_mic_host");
|
||||
};
|
||||
|
||||
const setSelectedMicHost = (selected_mic_host) => {
|
||||
updateSelectedMicHost(() => new Promise(() => {}));
|
||||
asyncStdoutToPython("/controller/callback_set_mic_host", selected_mic_host);
|
||||
};
|
||||
|
||||
return { currentSelectedMicHost, getSelectedMicHost, updateSelectedMicHost, setSelectedMicHost };
|
||||
};
|
||||
19
src-ui/logics/configs/useSelectedSpeakerDevice.js
Normal file
19
src-ui/logics/configs/useSelectedSpeakerDevice.js
Normal file
@@ -0,0 +1,19 @@
|
||||
import { useSelectedSpeakerDevice as useStoreSelectedSpeakerDevice } from "@store";
|
||||
import { useStdoutToPython } from "@logics/useStdoutToPython";
|
||||
|
||||
export const useSelectedSpeakerDevice = () => {
|
||||
const { asyncStdoutToPython } = useStdoutToPython();
|
||||
const { currentSelectedSpeakerDevice, updateSelectedSpeakerDevice } = useStoreSelectedSpeakerDevice();
|
||||
|
||||
const getSelectedSpeakerDevice = () => {
|
||||
updateSelectedSpeakerDevice(() => new Promise(() => {}));
|
||||
asyncStdoutToPython("/config/choice_speaker_device");
|
||||
};
|
||||
|
||||
const setSelectedSpeakerDevice = (selected_speaker_device) => {
|
||||
updateSelectedSpeakerDevice(() => new Promise(() => {}));
|
||||
asyncStdoutToPython("/controller/callback_set_speaker_device", selected_speaker_device);
|
||||
};
|
||||
|
||||
return { currentSelectedSpeakerDevice, getSelectedSpeakerDevice, updateSelectedSpeakerDevice, setSelectedSpeakerDevice };
|
||||
};
|
||||
24
src-ui/logics/configs/useSendMessageButtonType.js
Normal file
24
src-ui/logics/configs/useSendMessageButtonType.js
Normal file
@@ -0,0 +1,24 @@
|
||||
import { useSendMessageButtonType as useStoreSendMessageButtonType } from "@store";
|
||||
import { useStdoutToPython } from "@logics/useStdoutToPython";
|
||||
|
||||
export const useSendMessageButtonType = () => {
|
||||
const { asyncStdoutToPython } = useStdoutToPython();
|
||||
const { currentSendMessageButtonType, updateSendMessageButtonType } = useStoreSendMessageButtonType();
|
||||
|
||||
const getSendMessageButtonType = () => {
|
||||
updateSendMessageButtonType(() => new Promise(() => {}));
|
||||
asyncStdoutToPython("/config/send_message_button_type");
|
||||
};
|
||||
|
||||
const setSendMessageButtonType = (selected_type) => {
|
||||
updateSendMessageButtonType(() => new Promise(() => {}));
|
||||
asyncStdoutToPython("/controller/callback_set_send_message_button_type", selected_type);
|
||||
};
|
||||
|
||||
return {
|
||||
getSendMessageButtonType,
|
||||
setSendMessageButtonType,
|
||||
currentSendMessageButtonType,
|
||||
updateSendMessageButtonType
|
||||
};
|
||||
};
|
||||
14
src-ui/logics/configs/useSoftwareVersion.js
Normal file
14
src-ui/logics/configs/useSoftwareVersion.js
Normal file
@@ -0,0 +1,14 @@
|
||||
import { useSoftwareVersion as useStoreSoftwareVersion } from "@store";
|
||||
import { useStdoutToPython } from "@logics/useStdoutToPython";
|
||||
|
||||
export const useSoftwareVersion = () => {
|
||||
const { asyncStdoutToPython } = useStdoutToPython();
|
||||
const { currentSoftwareVersion, updateSoftwareVersion } = useStoreSoftwareVersion();
|
||||
|
||||
const getSoftwareVersion = () => {
|
||||
updateSoftwareVersion(() => new Promise(() => {}));
|
||||
asyncStdoutToPython("/config/version");
|
||||
};
|
||||
|
||||
return { currentSoftwareVersion, getSoftwareVersion, updateSoftwareVersion };
|
||||
};
|
||||
14
src-ui/logics/configs/useSpeakerDeviceList.js
Normal file
14
src-ui/logics/configs/useSpeakerDeviceList.js
Normal file
@@ -0,0 +1,14 @@
|
||||
import { useSpeakerDeviceList as useStoreSpeakerDeviceList } from "@store";
|
||||
import { useStdoutToPython } from "@logics/useStdoutToPython";
|
||||
|
||||
export const useSpeakerDeviceList = () => {
|
||||
const { asyncStdoutToPython } = useStdoutToPython();
|
||||
const { currentSpeakerDeviceList, updateSpeakerDeviceList } = useStoreSpeakerDeviceList();
|
||||
|
||||
const getSpeakerDeviceList = () => {
|
||||
updateSpeakerDeviceList(() => new Promise(() => {}));
|
||||
asyncStdoutToPython("/controller/list_speaker_device");
|
||||
};
|
||||
|
||||
return { currentSpeakerDeviceList, getSpeakerDeviceList, updateSpeakerDeviceList };
|
||||
};
|
||||
17
src-ui/logics/configs/useSpeakerThreshold.js
Normal file
17
src-ui/logics/configs/useSpeakerThreshold.js
Normal file
@@ -0,0 +1,17 @@
|
||||
import { useSpeakerThreshold as useStoreSpeakerThreshold } from "@store";
|
||||
import { useStdoutToPython } from "@logics/useStdoutToPython";
|
||||
|
||||
export const useSpeakerThreshold = () => {
|
||||
const { asyncStdoutToPython } = useStdoutToPython();
|
||||
const { updateSpeakerThreshold, currentSpeakerThreshold } = useStoreSpeakerThreshold();
|
||||
|
||||
const getSpeakerThreshold = () => {
|
||||
asyncStdoutToPython("/config/input_speaker_energy_threshold");
|
||||
};
|
||||
|
||||
const setSpeakerThreshold = (speaker_threshold) => {
|
||||
asyncStdoutToPython("/controller/callback_set_speaker_energy_threshold", speaker_threshold);
|
||||
};
|
||||
|
||||
return { getSpeakerThreshold, setSpeakerThreshold, currentSpeakerThreshold, updateSpeakerThreshold };
|
||||
};
|
||||
@@ -1,169 +0,0 @@
|
||||
import {
|
||||
useSoftwareVersion,
|
||||
useMicHostList,
|
||||
useSelectedMicHost,
|
||||
useMicDeviceList,
|
||||
useSelectedMicDevice,
|
||||
useSpeakerDeviceList,
|
||||
useSelectedSpeakerDevice,
|
||||
|
||||
useEnableAutoClearMessageBox,
|
||||
useSendMessageButtonType,
|
||||
useMicThreshold,
|
||||
useSpeakerThreshold,
|
||||
} from "@store";
|
||||
|
||||
import { useStdoutToPython } from "./useStdoutToPython";
|
||||
|
||||
import { arrayToObject } from "@utils/arrayToObject";
|
||||
|
||||
export const useConfig = () => {
|
||||
const { asyncStdoutToPython } = useStdoutToPython();
|
||||
|
||||
const { updateSoftwareVersion } = useSoftwareVersion();
|
||||
const { updateMicHostList } = useMicHostList();
|
||||
const { updateSelectedMicHost } = useSelectedMicHost();
|
||||
const { updateMicDeviceList } = useMicDeviceList();
|
||||
const { updateSelectedMicDevice } = useSelectedMicDevice();
|
||||
const { updateSpeakerDeviceList } = useSpeakerDeviceList();
|
||||
const { updateSelectedSpeakerDevice } = useSelectedSpeakerDevice();
|
||||
const { currentEnableAutoClearMessageBox, updateEnableAutoClearMessageBox } = useEnableAutoClearMessageBox();
|
||||
const { currentSendMessageButtonType, updateSendMessageButtonType } = useSendMessageButtonType();
|
||||
const { currentMicThreshold, updateMicThreshold } = useMicThreshold();
|
||||
const { currentSpeakerThreshold, updateSpeakerThreshold } = useSpeakerThreshold();
|
||||
|
||||
|
||||
const asyncPending = () => new Promise(() => {});
|
||||
return {
|
||||
getSoftwareVersion: () => {
|
||||
updateSoftwareVersion(asyncPending);
|
||||
asyncStdoutToPython("/config/version");
|
||||
},
|
||||
updateSoftwareVersion: (payload) => updateSoftwareVersion(payload.data),
|
||||
|
||||
// Device
|
||||
getMicHostList: () => {
|
||||
updateMicHostList(asyncPending);
|
||||
asyncStdoutToPython("/controller/list_mic_host");
|
||||
},
|
||||
updateMicHostList: (payload) => {
|
||||
updateMicHostList(arrayToObject(payload.data));
|
||||
},
|
||||
getSelectedMicHost: () => {
|
||||
updateSelectedMicHost(asyncPending);
|
||||
asyncStdoutToPython("/config/choice_mic_host");
|
||||
},
|
||||
updateSelectedMicHost: (payload) => {
|
||||
updateSelectedMicHost(payload.data);
|
||||
},
|
||||
setSelectedMicHost: (selected_mic_host) => {
|
||||
updateSelectedMicHost(asyncPending);
|
||||
asyncStdoutToPython("/controller/callback_set_mic_host", selected_mic_host);
|
||||
},
|
||||
|
||||
getMicDeviceList: () => {
|
||||
updateMicDeviceList(asyncPending);
|
||||
asyncStdoutToPython("/controller/list_mic_device");
|
||||
},
|
||||
updateMicDeviceList: (payload) => {
|
||||
updateMicDeviceList(arrayToObject(payload.data));
|
||||
},
|
||||
getSelectedMicDevice: () => {
|
||||
updateSelectedMicDevice(asyncPending);
|
||||
asyncStdoutToPython("/config/choice_mic_device");
|
||||
},
|
||||
updateSelectedMicDevice: (payload) => {
|
||||
updateSelectedMicDevice(payload.data);
|
||||
},
|
||||
setSelectedMicDevice: (selected_mic_device) => {
|
||||
updateSelectedMicDevice(asyncPending);
|
||||
asyncStdoutToPython("/controller/callback_set_mic_device", selected_mic_device);
|
||||
},
|
||||
|
||||
getSpeakerDeviceList: () => {
|
||||
updateSpeakerDeviceList(asyncPending);
|
||||
asyncStdoutToPython("/controller/list_speaker_device");
|
||||
},
|
||||
updateSpeakerDeviceList: (payload) => {
|
||||
updateSpeakerDeviceList(arrayToObject(payload.data));
|
||||
},
|
||||
getSelectedSpeakerDevice: () => {
|
||||
updateSelectedSpeakerDevice(asyncPending);
|
||||
asyncStdoutToPython("/config/choice_speaker_device");
|
||||
},
|
||||
updateSelectedSpeakerDevice: (payload) => {
|
||||
updateSelectedSpeakerDevice(payload.data);
|
||||
},
|
||||
setSelectedSpeakerDevice: (selected_speaker_device) => {
|
||||
updateSelectedSpeakerDevice(asyncPending);
|
||||
asyncStdoutToPython("/controller/callback_set_speaker_device", selected_speaker_device);
|
||||
},
|
||||
|
||||
updateMicHostAndDevice: (payload) => {
|
||||
updateSelectedMicHost(payload.data.host);
|
||||
updateSelectedMicDevice(payload.data.device);
|
||||
},
|
||||
|
||||
getMicThreshold: () => {
|
||||
// updateMicThreshold(asyncPending);
|
||||
asyncStdoutToPython("/config/input_mic_energy_threshold");
|
||||
},
|
||||
setMicThreshold: (mic_threshold) => {
|
||||
// updateMicThreshold(asyncPending);
|
||||
asyncStdoutToPython("/controller/callback_set_mic_energy_threshold", mic_threshold);
|
||||
},
|
||||
currentMicThreshold: currentMicThreshold,
|
||||
updateMicThreshold: (payload) => {
|
||||
updateMicThreshold(payload.data);
|
||||
},
|
||||
|
||||
getSpeakerThreshold: () => {
|
||||
// updateSpeakerThreshold(asyncPending);
|
||||
asyncStdoutToPython("/config/input_speaker_energy_threshold");
|
||||
},
|
||||
setSpeakerThreshold: (speaker_threshold) => {
|
||||
// updateSpeakerThreshold(asyncPending);
|
||||
asyncStdoutToPython("/controller/callback_set_speaker_energy_threshold", speaker_threshold);
|
||||
},
|
||||
currentSpeakerThreshold: currentSpeakerThreshold,
|
||||
updateSpeakerThreshold: (payload) => {
|
||||
updateSpeakerThreshold(payload.data);
|
||||
},
|
||||
|
||||
|
||||
|
||||
// Others
|
||||
getEnableAutoClearMessageBox: () => {
|
||||
updateEnableAutoClearMessageBox(asyncPending);
|
||||
asyncStdoutToPython("/config/enable_auto_clear_message_box");
|
||||
},
|
||||
toggleEnableAutoClearMessageBox: () => {
|
||||
updateEnableAutoClearMessageBox(asyncPending);
|
||||
if (currentEnableAutoClearMessageBox.data) {
|
||||
asyncStdoutToPython("/controller/callback_disable_auto_clear_chatbox");
|
||||
} else {
|
||||
asyncStdoutToPython("/controller/callback_enable_auto_clear_chatbox");
|
||||
}
|
||||
},
|
||||
currentEnableAutoClearMessageBox: currentEnableAutoClearMessageBox,
|
||||
updateEnableAutoClearMessageBox: (payload) => {
|
||||
updateEnableAutoClearMessageBox(payload.data);
|
||||
},
|
||||
|
||||
getSendMessageButtonType: () => {
|
||||
updateSendMessageButtonType(asyncPending);
|
||||
asyncStdoutToPython("/config/send_message_button_type");
|
||||
},
|
||||
setSendMessageButtonType: (selected_type) => {
|
||||
updateSendMessageButtonType(asyncPending);
|
||||
asyncStdoutToPython("/controller/callback_set_send_message_button_type", selected_type);
|
||||
},
|
||||
currentSendMessageButtonType: currentSendMessageButtonType,
|
||||
updateSendMessageButtonType: (payload) => {
|
||||
updateSendMessageButtonType(payload.data);
|
||||
},
|
||||
|
||||
|
||||
|
||||
};
|
||||
};
|
||||
@@ -7,7 +7,7 @@ import {
|
||||
useForegroundStatus,
|
||||
} from "@store";
|
||||
|
||||
import { useStdoutToPython } from "./useStdoutToPython";
|
||||
import { useStdoutToPython } from "@logics/useStdoutToPython";
|
||||
|
||||
export const useMainFunction = () => {
|
||||
const {
|
||||
@@ -33,53 +33,56 @@ export const useMainFunction = () => {
|
||||
const { asyncStdoutToPython } = useStdoutToPython();
|
||||
|
||||
const asyncPending = () => new Promise(() => {});
|
||||
const toggleTranslation = () => {
|
||||
asyncUpdateTranslationStatus(asyncPending);
|
||||
if (currentTranslationStatus.data) {
|
||||
asyncStdoutToPython("/controller/callback_disable_translation");
|
||||
} else {
|
||||
asyncStdoutToPython("/controller/callback_enable_translation");
|
||||
}
|
||||
};
|
||||
|
||||
const toggleTranscriptionSend = () => {
|
||||
asyncUpdateTranscriptionSendStatus(asyncPending);
|
||||
if (currentTranscriptionSendStatus.data) {
|
||||
asyncStdoutToPython("/controller/callback_disable_transcription_send");
|
||||
} else {
|
||||
asyncStdoutToPython("/controller/callback_enable_transcription_send");
|
||||
}
|
||||
};
|
||||
|
||||
const toggleTranscriptionReceive = () => {
|
||||
asyncUpdateTranscriptionReceiveStatus(asyncPending);
|
||||
if (currentTranscriptionReceiveStatus.data) {
|
||||
asyncStdoutToPython("/controller/callback_disable_transcription_receive");
|
||||
} else {
|
||||
asyncStdoutToPython("/controller/callback_enable_transcription_receive");
|
||||
}
|
||||
};
|
||||
|
||||
const toggleForeground = () => {
|
||||
const main_page = getCurrent();
|
||||
const is_foreground_enabled = !currentForegroundStatus.data;
|
||||
main_page.setAlwaysOnTop(is_foreground_enabled);
|
||||
updateForegroundStatus(is_foreground_enabled);
|
||||
};
|
||||
|
||||
return {
|
||||
toggleTranslation: () => {
|
||||
asyncUpdateTranslationStatus(asyncPending);
|
||||
if (currentTranslationStatus.data) {
|
||||
asyncStdoutToPython("/controller/callback_disable_translation");
|
||||
} else {
|
||||
asyncStdoutToPython("/controller/callback_enable_translation");
|
||||
}
|
||||
},
|
||||
currentTranslationStatus: currentTranslationStatus,
|
||||
updateTranslationStatus: (payload) => {
|
||||
updateTranslationStatus(payload.data);
|
||||
},
|
||||
currentTranslationStatus,
|
||||
toggleTranslation,
|
||||
updateTranslationStatus,
|
||||
|
||||
toggleTranscriptionSend: () => {
|
||||
asyncUpdateTranscriptionSendStatus(asyncPending);
|
||||
if (currentTranscriptionSendStatus.data) {
|
||||
asyncStdoutToPython("/controller/callback_disable_transcription_send");
|
||||
} else {
|
||||
asyncStdoutToPython("/controller/callback_enable_transcription_send");
|
||||
}
|
||||
},
|
||||
currentTranscriptionSendStatus: currentTranscriptionSendStatus,
|
||||
updateTranscriptionSendStatus: (payload) => {
|
||||
updateTranscriptionSendStatus(payload.data);
|
||||
},
|
||||
currentTranscriptionSendStatus,
|
||||
toggleTranscriptionSend,
|
||||
updateTranscriptionSendStatus,
|
||||
|
||||
toggleTranscriptionReceive: () => {
|
||||
asyncUpdateTranscriptionReceiveStatus(asyncPending);
|
||||
if (currentTranscriptionReceiveStatus.data) {
|
||||
asyncStdoutToPython("/controller/callback_disable_transcription_receive");
|
||||
} else {
|
||||
asyncStdoutToPython("/controller/callback_enable_transcription_receive");
|
||||
}
|
||||
},
|
||||
currentTranscriptionReceiveStatus: currentTranscriptionReceiveStatus,
|
||||
updateTranscriptionReceiveStatus: (payload) => {
|
||||
updateTranscriptionReceiveStatus(payload.data);
|
||||
},
|
||||
currentTranscriptionReceiveStatus,
|
||||
toggleTranscriptionReceive,
|
||||
updateTranscriptionReceiveStatus,
|
||||
|
||||
toggleForeground: () => {
|
||||
const main_page = getCurrent();
|
||||
const is_foreground_enabled = !currentForegroundStatus.data;
|
||||
main_page.setAlwaysOnTop(is_foreground_enabled);
|
||||
updateForegroundStatus(is_foreground_enabled);
|
||||
currentForegroundStatus,
|
||||
toggleForeground,
|
||||
updateForegroundStatus,
|
||||
|
||||
},
|
||||
currentForegroundStatus: currentForegroundStatus,
|
||||
};
|
||||
};
|
||||
@@ -2,48 +2,50 @@ import {
|
||||
useMessageLogsStatus,
|
||||
} from "@store";
|
||||
|
||||
import { useStdoutToPython } from "./useStdoutToPython";
|
||||
import { useStdoutToPython } from "@logics/useStdoutToPython";
|
||||
|
||||
export const useMessage = () => {
|
||||
const { currentMessageLogsStatus, addMessageLogsStatus, updateMessageLogsStatus } = useMessageLogsStatus();
|
||||
const { asyncStdoutToPython } = useStdoutToPython();
|
||||
|
||||
const sendMessage = (message) => {
|
||||
const uuid = crypto.randomUUID();
|
||||
const send_message_object = {
|
||||
id: uuid,
|
||||
message: message,
|
||||
};
|
||||
asyncStdoutToPython("/controller/callback_messagebox_send", send_message_object);
|
||||
|
||||
addMessageLogsStatus({
|
||||
id: uuid,
|
||||
category: "sent",
|
||||
status: "pending",
|
||||
created_at: generateTimeData(),
|
||||
messages: {
|
||||
original: message,
|
||||
translated: [],
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const updateSentMessageLogById = (payload) => {
|
||||
updateMessageLogsStatus(updateItemById(data.id, payload.translation));
|
||||
};
|
||||
const addSentMessageLog = (payload) => {
|
||||
const message_object = generateMessageObject(payload, "sent");
|
||||
addMessageLogsStatus(message_object);
|
||||
};
|
||||
const addReceivedMessageLog = (payload) => {
|
||||
const message_object = generateMessageObject(payload, "received");
|
||||
addMessageLogsStatus(message_object);
|
||||
};
|
||||
|
||||
return {
|
||||
sendMessage: (message) => {
|
||||
const uuid = crypto.randomUUID();
|
||||
const send_message_object = {
|
||||
id: uuid,
|
||||
message: message,
|
||||
};
|
||||
asyncStdoutToPython("/controller/callback_messagebox_send", send_message_object);
|
||||
|
||||
addMessageLogsStatus({
|
||||
id: uuid,
|
||||
category: "sent",
|
||||
status: "pending",
|
||||
created_at: generateTimeData(),
|
||||
messages: {
|
||||
original: message,
|
||||
translated: [],
|
||||
},
|
||||
});
|
||||
},
|
||||
currentMessageLogsStatus: currentMessageLogsStatus,
|
||||
|
||||
updateSentMessageLog: (payload) => {
|
||||
const data = payload.data;
|
||||
updateMessageLogsStatus(updateItemById(data.id, data.translation));
|
||||
},
|
||||
addSentMessageLog: (payload) => {
|
||||
const data = payload.data;
|
||||
const message_object = generateMessageObject(data, "sent");
|
||||
addMessageLogsStatus(message_object);
|
||||
},
|
||||
addReceivedMessageLog: (payload) => {
|
||||
const data = payload.data;
|
||||
const message_object = generateMessageObject(data, "received");
|
||||
addMessageLogsStatus(message_object);
|
||||
},
|
||||
currentMessageLogsStatus,
|
||||
sendMessage,
|
||||
updateSentMessageLogById,
|
||||
addSentMessageLog,
|
||||
addReceivedMessageLog,
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
@@ -1,8 +1,21 @@
|
||||
import { arrayToObject } from "@utils/arrayToObject";
|
||||
import { useMainFunction } from "./useMainFunction";
|
||||
import { useConfig } from "./useConfig";
|
||||
import { useMessage } from "./useMessage";
|
||||
import { useVolume } from "./useVolume";
|
||||
|
||||
import { useSoftwareVersion } from "@logics_configs/useSoftwareVersion";
|
||||
import { useMicHostList } from "@logics_configs/useMicHostList";
|
||||
import { useSelectedMicHost } from "@logics_configs/useSelectedMicHost";
|
||||
import { useMicDeviceList } from "@logics_configs/useMicDeviceList";
|
||||
import { useSelectedMicDevice } from "@logics_configs/useSelectedMicDevice";
|
||||
import { useSpeakerDeviceList } from "@logics_configs/useSpeakerDeviceList";
|
||||
import { useSelectedSpeakerDevice } from "@logics_configs/useSelectedSpeakerDevice";
|
||||
import { useMicThreshold } from "@logics_configs/useMicThreshold";
|
||||
import { useSpeakerThreshold } from "@logics_configs/useSpeakerThreshold";
|
||||
import { useEnableAutoClearMessageBox } from "@logics_configs/useEnableAutoClearMessageBox";
|
||||
import { useSendMessageButtonType } from "@logics_configs/useSendMessageButtonType";
|
||||
|
||||
|
||||
export const useReceiveRoutes = () => {
|
||||
const {
|
||||
updateTranslationStatus,
|
||||
@@ -11,27 +24,23 @@ export const useReceiveRoutes = () => {
|
||||
} = useMainFunction();
|
||||
|
||||
const {
|
||||
updateSentMessageLog,
|
||||
updateSentMessageLogById,
|
||||
addSentMessageLog,
|
||||
addReceivedMessageLog,
|
||||
} = useMessage();
|
||||
|
||||
const {
|
||||
updateSoftwareVersion,
|
||||
updateMicHostList,
|
||||
updateSelectedMicHost,
|
||||
updateMicDeviceList,
|
||||
updateSelectedMicDevice,
|
||||
updateMicHostAndDevice,
|
||||
const { updateSoftwareVersion } = useSoftwareVersion();
|
||||
const { updateMicHostList } = useMicHostList();
|
||||
const { updateSelectedMicHost } = useSelectedMicHost();
|
||||
const { updateMicDeviceList } = useMicDeviceList();
|
||||
const { updateSelectedMicDevice } = useSelectedMicDevice();
|
||||
const { updateSpeakerDeviceList } = useSpeakerDeviceList();
|
||||
const { updateSelectedSpeakerDevice } = useSelectedSpeakerDevice();
|
||||
const { updateMicThreshold } = useMicThreshold();
|
||||
const { updateSpeakerThreshold } = useSpeakerThreshold();
|
||||
const { updateEnableAutoClearMessageBox } = useEnableAutoClearMessageBox();
|
||||
const { updateSendMessageButtonType } = useSendMessageButtonType();
|
||||
|
||||
updateSpeakerDeviceList,
|
||||
updateSelectedSpeakerDevice,
|
||||
|
||||
updateEnableAutoClearMessageBox,
|
||||
updateSendMessageButtonType,
|
||||
updateMicThreshold,
|
||||
updateSpeakerThreshold,
|
||||
} = useConfig();
|
||||
|
||||
const { updateVolumeVariable_Mic, updateVolumeVariable_Speaker } = useVolume();
|
||||
|
||||
@@ -46,15 +55,18 @@ export const useReceiveRoutes = () => {
|
||||
|
||||
"/config/version": updateSoftwareVersion,
|
||||
|
||||
"/controller/list_mic_host": updateMicHostList,
|
||||
"/controller/list_mic_host": (payload) => updateMicHostList(arrayToObject(payload)),
|
||||
"/config/choice_mic_host": updateSelectedMicHost,
|
||||
"/controller/callback_set_mic_host": updateMicHostAndDevice,
|
||||
"/controller/callback_set_mic_host": (payload) => {
|
||||
updateSelectedMicHost(payload.host);
|
||||
updateSelectedMicDevice(payload.device);
|
||||
},
|
||||
|
||||
"/controller/list_mic_device": updateMicDeviceList,
|
||||
"/controller/list_mic_device": (payload) => updateMicDeviceList(arrayToObject(payload)),
|
||||
"/config/choice_mic_device": updateSelectedMicDevice,
|
||||
"/controller/callback_set_mic_device": updateSelectedMicDevice,
|
||||
|
||||
"/controller/list_speaker_device": updateSpeakerDeviceList,
|
||||
"/controller/list_speaker_device": (payload) => updateSpeakerDeviceList(arrayToObject(payload)),
|
||||
"/config/choice_speaker_device": updateSelectedSpeakerDevice,
|
||||
"/controller/callback_set_speaker_device": updateSelectedSpeakerDevice,
|
||||
|
||||
@@ -68,11 +80,13 @@ export const useReceiveRoutes = () => {
|
||||
"/config/send_message_button_type": updateSendMessageButtonType,
|
||||
"/controller/callback_set_send_message_button_type": updateSendMessageButtonType,
|
||||
|
||||
"/config/input_mic_energy_threshold": updateMicThreshold,
|
||||
"/controller/callback_set_mic_energy_threshold": updateMicThreshold,
|
||||
"/config/input_speaker_energy_threshold": updateSpeakerThreshold,
|
||||
"/controller/callback_set_speaker_energy_threshold": updateSpeakerThreshold,
|
||||
|
||||
|
||||
"/controller/callback_messagebox_send": updateSentMessageLog,
|
||||
"/controller/callback_messagebox_send": updateSentMessageLogById,
|
||||
"/action/transcription_send_mic_message": addSentMessageLog,
|
||||
"/action/transcription_receive_speaker_message": addReceivedMessageLog
|
||||
};
|
||||
@@ -81,7 +95,7 @@ export const useReceiveRoutes = () => {
|
||||
switch (parsed_data.status) {
|
||||
case 200:
|
||||
const route = routes[parsed_data.endpoint];
|
||||
(route) ? route({ data: parsed_data.result }) : console.error(`Invalid endpoint: ${parsed_data.endpoint}`);
|
||||
(route) ? route(parsed_data.result) : console.error(`Invalid endpoint: ${parsed_data.endpoint}`);
|
||||
break;
|
||||
|
||||
case 348:
|
||||
|
||||
@@ -3,28 +3,25 @@ import {
|
||||
useSpeakerVolume,
|
||||
} from "@store";
|
||||
|
||||
import { useStdoutToPython } from "./useStdoutToPython";
|
||||
|
||||
import { useStdoutToPython } from "@logics/useStdoutToPython";
|
||||
|
||||
export const useVolume = () => {
|
||||
const { asyncStdoutToPython } = useStdoutToPython();
|
||||
const { updateMicVolume } = useMicVolume();
|
||||
const { updateSpeakerVolume } = useSpeakerVolume();
|
||||
|
||||
// const asyncPending = () => new Promise(() => {});
|
||||
return {
|
||||
volumeCheckStart_Mic: () => asyncStdoutToPython("/controller/callback_enable_check_mic_threshold"),
|
||||
volumeCheckStop_Mic: () => asyncStdoutToPython("/controller/callback_disable_check_mic_threshold"),
|
||||
updateVolumeVariable_Mic: (payload) => {
|
||||
updateMicVolume(payload.data);
|
||||
updateMicVolume(payload);
|
||||
},
|
||||
|
||||
volumeCheckStart_Speaker: () => asyncStdoutToPython("/controller/callback_enable_check_speaker_threshold"),
|
||||
volumeCheckStop_Speaker: () => asyncStdoutToPython("/controller/callback_disable_check_speaker_threshold"),
|
||||
updateVolumeVariable_Speaker: (payload) => {
|
||||
updateSpeakerVolume(payload.data);
|
||||
}
|
||||
|
||||
updateSpeakerVolume(payload);
|
||||
},
|
||||
|
||||
};
|
||||
};
|
||||
@@ -40,6 +40,7 @@ export default defineConfig(async () => ({
|
||||
"@images": path.resolve(__dirname, "src-ui/assets"),
|
||||
"@utils": path.resolve(__dirname, "src-ui/utils"),
|
||||
"@logics": path.resolve(__dirname, "src-ui/logics"),
|
||||
"@logics_configs": path.resolve(__dirname, "src-ui/logics/configs"),
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
Reference in New Issue
Block a user