[Update] Config Page: Add Device tab. add mic host list.(not selectable yet.)

locales/en.json

@@ -80,6 +80,7 @@
             "invalid_value": "Invalid value."
         },
         "side_menu_labels": {
+            "device": "Device",
             "appearance": "Appearance",
             "translation": "Translation",
             "transcription": "Transcription",

locales/ja.json

@@ -78,6 +78,7 @@
             "invalid_value": "無効な値です。"
         },
         "side_menu_labels": {
+            "device": "デバイス",
             "appearance": "デザイン",
             "translation": "翻訳",
             "transcription": "音声認識",

src-ui/app/App.jsx

@@ -14,13 +14,19 @@ export const App = () => {
     const main_page = getCurrent();
 
     const { currentIsOpenedConfigPage } = useIsOpenedConfigPage();
-    const { getSoftwareVersion } = useConfig();
+    const {
+        getSoftwareVersion,
+        getMicHostList,
+        getSelectedMicHost,
+    } = useConfig();
 
     useEffect(() => {
         main_page.setDecorations(true);
         if (!hasRunRef.current) {
             asyncStartPython().then((result) => {
                 getSoftwareVersion();
+                getMicHostList();
+                getSelectedMicHost();
             }).catch((err) => {
 
             });

src-ui/app/config_page/setting_section/setting_box/SettingBox.jsx

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

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

@@ -2,11 +2,11 @@ import { useTranslation } from "react-i18next";
 import FolderOpenSvg from "@images/folder_open.svg?react";
 
 import { useSettingBox } from "../components/useSettingBox";
-import { useSelectedMicDeviceStatus, useMicDeviceListStatus } from "@store";
+import { useSelectedMicDevice, useMicDeviceList } from "@store";
 export const Appearance = () => {
     const { t } = useTranslation();
-    const { currentSelectedMicDeviceStatus, updateSelectedMicDeviceStatus } = useSelectedMicDeviceStatus();
+    const { currentSelectedMicDevice, updateSelectedMicDevice } = useSelectedMicDevice();
-    const { currentMicDeviceListStatus } = useMicDeviceListStatus();
+    const { currentMicDeviceList } = useMicDeviceList();
     const {
         DropdownMenuContainer,
         SliderContainer,
@@ -29,13 +29,13 @@ export const Appearance = () => {
                 }, 3000);
             });
         };
-        updateSelectedMicDeviceStatus(asyncFunction);
+        updateSelectedMicDevice(asyncFunction);
     };
 
     return (
         <>
             <DropdownMenuContainer dropdown_id="mic_host" label="Mic Host/Driver" desc="description" selected_id="b" list={{a: "A", b: "B", c: "C"}} />
-            <DropdownMenuContainer dropdown_id="mic_device" label="Mic Device" desc="description" selected_id={currentSelectedMicDeviceStatus.data} list={currentMicDeviceListStatus} selectFunction={selectFunction} state={currentSelectedMicDeviceStatus.state} />
+            <DropdownMenuContainer dropdown_id="mic_device" label="Mic Device" desc="description" selected_id={currentSelectedMicDevice.data} list={currentMicDeviceList} selectFunction={selectFunction} state={currentSelectedMicDevice.state} />
 
             <SliderContainer label="Transparent" desc="description" min="0" max="3000"/>
             <CheckboxContainer label="Transparent" desc="description" checkbox_id="checkbox_id_1"/>

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

@@ -35,12 +35,18 @@ export const DropdownMenu = (props) => {
         [styles["is_opened"]]: (currentIsOpenedDropdownMenu === props.dropdown_id) ? true : false
     });
 
+    const getSelectedText = () => {
+        if (props.state !== "hasData") return;
+        return (props.list[props.selected_id]) ? props.list[props.selected_id] : "Nothing selected";
+    };
+
+
     return (
         <div className={styles.container}>
             <div className={dropdown_toggle_button_class_name} onClick={toggleDropdownMenu}>
                 {(props.state === "loading")
                     ? <p className={styles.dropdown_selected_text}>Loading...</p>
-                    : <p className={styles.dropdown_selected_text}>{props.list[props.selected_id]}</p>
+                    : <p className={styles.dropdown_selected_text}>{getSelectedText()}</p>
                 }
                 {(props.state === "loading")
                     ? <span className={styles.loader}></span>
@@ -49,14 +55,15 @@ export const DropdownMenu = (props) => {
             </div>
             <div className={dropdown_content_wrapper_class_name}>
                 <div className={styles.dropdown_content}>
-                    {
+                    {(props.state === "hasData")
-                        Object.entries(props.list).map(([key, value]) => {
+                        ? Object.entries(props.list).map(([key, value]) => {
                             return (
                                 <div key={key} className={styles.value_button} onClick={() => selectValue(key)}>
                                     <p className={styles.value_text} >{value}</p>
                                 </div>
                             );
                         })
+                        : null
                     }
                 </div>
             </div>

src-ui/app/config_page/setting_section/setting_box/components/label_component/LabelComponent.jsx

@@ -4,7 +4,10 @@ export const LabelComponent = (props) => {
     return (
         <div className={styles.label_component}>
             <p className={styles.label}>{props.label}</p>
-            <p className={styles.desc}>{props.desc}</p>
+            {props.desc
+                ? <p className={styles.desc}>{props.desc}</p>
+                : null
+            }
         </div>
     );
 };

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

@@ -26,6 +26,7 @@
     align-items: center;
     gap: 2rem;
     padding: 2rem;
+    border-bottom: solid 0.1rem var(--dark_800_color);
 }
 
 .threshold_switch_section {

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

@@ -0,0 +1,65 @@
+import { useTranslation } from "react-i18next";
+import FolderOpenSvg from "@images/folder_open.svg?react";
+
+import { useSettingBox } from "../components/useSettingBox";
+import {
+    useMicHostList,
+    useSelectedMicHost,
+    useSelectedMicDevice,
+    useMicDeviceList,
+} from "@store";
+
+export const Device = () => {
+    const { t } = useTranslation();
+    const {
+        DropdownMenuContainer,
+        ThresholdContainer,
+    } = useSettingBox();
+
+
+    const { currentMicHostList, updateMicHostList } = useMicHostList();
+    const { currentSelectedMicHost, updateSelectedMicHost } = useSelectedMicHost();
+
+    const { currentMicDeviceList } = useMicDeviceList();
+    const { currentSelectedMicDevice, updateSelectedMicDevice } = useSelectedMicDevice();
+
+    const selectFunction = (selected_data) => {
+        switch (selected_data.dropdown_id) {
+            case "mic_host":
+
+                break;
+
+            default:
+                break;
+        }
+    };
+
+
+    return (
+        <>
+            <DropdownMenuContainer
+                dropdown_id="mic_host"
+                label={t("config_page.mic_host.label")}
+                selected_id={currentSelectedMicHost.data}
+                list={currentMicHostList.data}
+                selectFunction={selectFunction}
+                state={currentSelectedMicHost.state}
+            />
+            {/* <DropdownMenuContainer
+                dropdown_id="mic_device"
+                label={t("config_page.mic_device.label")}
+                selected_id={currentSelectedMicDevice.data}
+                list={currentMicDeviceList.data}
+                selectFunction={selectFunction}
+                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="3000"/>
+
+
+            <DropdownMenuContainer dropdown_id="speaker_device" label={t("config_page.speaker_device.label")}  selected_id={currentSelectedMicDevice.data} list={currentMicDeviceList} selectFunction={selectFunction} state={currentSelectedMicDevice.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="3000"/> */}
+        </>
+    );
+};

src-ui/app/config_page/sidebar_section/SidebarSection.jsx

@@ -4,6 +4,7 @@ export const SidebarSection = () => {
     return (
         <div className={styles.container}>
             <div className={styles.tabs_wrapper}>
+                <Tab tab_id="device" />
                 <Tab tab_id="appearance" />
                 <Tab tab_id="translation" />
                 <Tab tab_id="transcription" />

src-ui/app/config_page/topbar/Topbar.jsx

@@ -12,7 +12,6 @@ export const Topbar = () => {
     const { currentIsOpenedConfigPage, updateIsOpenedConfigPage } = useIsOpenedConfigPage();
     const closeConfigPage = () => {
         updateIsOpenedConfigPage(false);
-
     };
 
     return (

src-ui/logics/useConfig.js

@@ -1,22 +1,34 @@
 import {
     useSoftwareVersion,
+    useMicHostList,
+    useSelectedMicHost,
 } from "@store";
 
 import { useStdoutToPython } from "./useStdoutToPython";
 
-export const useConfig = () => {
+import { arrayToObject } from "@utils/arrayToObject";
-    const {
-        updateSoftwareVersion,
-    } = useSoftwareVersion();
 
+export const useConfig = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
 
+    const { updateSoftwareVersion } = useSoftwareVersion();
+    const { updateMicHostList } = useMicHostList();
+    const { updateSelectedMicHost } = useSelectedMicHost();
+
+
     return {
-        getSoftwareVersion: () => {
+        getSoftwareVersion: () => asyncStdoutToPython("/config/version"),
-            asyncStdoutToPython("/config/version");
+        updateSoftwareVersion: (payload) => updateSoftwareVersion(payload.data),
+
+        getMicHostList: () => asyncStdoutToPython("/controller/list_mic_host"),
+        updateMicHostList: (payload) => {
+            updateMicHostList(arrayToObject(payload.data));
         },
-        updateSoftwareVersion: (payload) => {
+        getSelectedMicHost: () => asyncStdoutToPython("/config/choice_mic_host"),
-            updateSoftwareVersion(payload.data);
+        updateSelectedMicHost: (payload) => {
+            updateSelectedMicHost(payload.data);
         },
+
+
     };
 };

src-ui/logics/useReceiveRoutes.js

@@ -17,6 +17,8 @@ export const useReceiveRoutes = () => {
 
     const {
         updateSoftwareVersion,
+        updateMicHostList,
+        updateSelectedMicHost,
     } = useConfig();
 
     const routes = {
@@ -28,6 +30,9 @@ export const useReceiveRoutes = () => {
         "/controller/callback_disable_transcription_receive": updateTranscriptionReceiveStatus,
 
         "/config/version": updateSoftwareVersion,
+        "/controller/list_mic_host": updateMicHostList,
+        "/config/choice_mic_host": updateSelectedMicHost,
+
 
         "/controller/callback_messagebox_send": updateSentMessageLog,
         "/action/transcription_send_mic_message": addSentMessageLog,

src-ui/store.js

@@ -112,12 +112,16 @@ export const { atomInstance: Atom_IsOpenedLanguageSelector, useHook: useIsOpened
 
 export const { atomInstance: Atom_SelectedPresetTabStatus, useHook: useSelectedPresetTabStatus } = createAtomWithHook(1, "SelectedPresetTabStatus");
 export const { atomInstance: Atom_IsOpenedConfigPage, useHook: useIsOpenedConfigPage } = createAtomWithHook(false, "IsOpenedConfigPage");
-export const { atomInstance: Atom_SelectedConfigTabId, useHook: useSelectedConfigTabId } = createAtomWithHook("appearance", "SelectedConfigTabId");
+export const { atomInstance: Atom_SelectedConfigTabId, useHook: useSelectedConfigTabId } = createAtomWithHook("device", "SelectedConfigTabId");
 export const { atomInstance: Atom_IsOpenedDropdownMenu, useHook: useIsOpenedDropdownMenu } = createAtomWithHook("", "IsOpenedDropdownMenu");
 
-export const { atomInstance: Atom_SelectedMicDeviceStatus, useHook: useSelectedMicDeviceStatus } = createAsyncAtomWithHook("device b", "SelectedMicDeviceStatus");
 
-export const { atomInstance: Atom_MicDeviceListStatus, useHook: useMicDeviceListStatus } = createAtomWithHook(test_device_list, "MicDeviceListStatus");
+// Config Page
+export const { atomInstance: Atom_MicHostList, useHook: useMicHostList } = createAsyncAtomWithHook([], "MicHostList");
+export const { atomInstance: Atom_SelectedMicHost, useHook: useSelectedMicHost } = createAsyncAtomWithHook("Nothing Selected", "SelectedMicHost");
+export const { atomInstance: Atom_MicDeviceList, useHook: useMicDeviceList } = createAsyncAtomWithHook(test_device_list, "MicDeviceList");
+export const { atomInstance: Atom_SelectedMicDevice, useHook: useSelectedMicDevice } = createAsyncAtomWithHook("device b", "SelectedMicDevice");
+
 
 export const { atomInstance: Atom_SendMessageFormat, useHook: useSendMessageFormat } = createAtomWithHook({
     before: "",

src-ui/utils/arrayToObject.js

@@ -0,0 +1,6 @@
+export const arrayToObject = (array) => {
+    return array.reduce((obj, item) => {
+        obj[item] = item;
+        return obj;
+    }, {});
+};