[Update] Config Page: Device Tab. Add Speaker device selector.

(Now, Devices (Mic host, Mic device, Speaker device) are selectable.)

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

@@ -5,6 +5,8 @@ import {
     useSelectedMicHost,
     useSelectedMicDevice,
     useMicDeviceList,
+    useSelectedSpeakerDevice,
+    useSpeakerDeviceList,
 } from "@store";
 
 import { useConfig } from "@logics/useConfig";
@@ -23,11 +25,16 @@ export const Device = () => {
     const { currentMicDeviceList } = useMicDeviceList();
     const { currentSelectedMicDevice } = useSelectedMicDevice();
 
+    const { currentSpeakerDeviceList } = useSpeakerDeviceList();
+    const { currentSelectedSpeakerDevice } = useSelectedSpeakerDevice();
+
     const {
         setSelectedMicHost,
         setSelectedMicDevice,
         getMicHostList,
         getMicDeviceList,
+        setSelectedSpeakerDevice,
+        getSpeakerDeviceList,
     } = useConfig();
 
     const selectFunction = (selected_data) => {
@@ -40,6 +47,10 @@ export const Device = () => {
                 setSelectedMicDevice(selected_data.selected_id);
                 break;
 
+                case "speaker_device":
+                setSelectedSpeakerDevice(selected_data.selected_id);
+                break;
+
             default:
                 break;
         }
@@ -67,6 +78,16 @@ export const Device = () => {
                 openListFunction={getMicDeviceList}
                 state={currentSelectedMicDevice.state}
             />
+
+            <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.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"/>