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

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

src-ui/logics/useConfig.js

@@ -4,6 +4,8 @@ import {
     useSelectedMicHost,
     useMicDeviceList,
     useSelectedMicDevice,
+    useSpeakerDeviceList,
+    useSelectedSpeakerDevice,
 } from "@store";
 
 import { useStdoutToPython } from "./useStdoutToPython";
@@ -18,6 +20,8 @@ export const useConfig = () => {
     const { updateSelectedMicHost } = useSelectedMicHost();
     const { updateMicDeviceList } = useMicDeviceList();
     const { updateSelectedMicDevice } = useSelectedMicDevice();
+    const { updateSpeakerDeviceList } = useSpeakerDeviceList();
+    const { updateSelectedSpeakerDevice } = useSelectedSpeakerDevice();
 
 
     const asyncPending = () => new Promise(() => {});
@@ -66,6 +70,25 @@ export const useConfig = () => {
             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);

src-ui/logics/useReceiveRoutes.js

@@ -22,6 +22,10 @@ export const useReceiveRoutes = () => {
         updateMicDeviceList,
         updateSelectedMicDevice,
         updateMicHostAndDevice,
+
+        updateSpeakerDeviceList,
+        updateSelectedSpeakerDevice,
+
     } = useConfig();
 
     const routes = {
@@ -32,14 +36,22 @@ export const useReceiveRoutes = () => {
         "/controller/callback_enable_transcription_receive": updateTranscriptionReceiveStatus,
         "/controller/callback_disable_transcription_receive": updateTranscriptionReceiveStatus,
 
+
         "/config/version": updateSoftwareVersion,
+
         "/controller/list_mic_host": updateMicHostList,
         "/config/choice_mic_host": updateSelectedMicHost,
+        "/controller/callback_set_mic_host": updateMicHostAndDevice,
+
         "/controller/list_mic_device": updateMicDeviceList,
         "/config/choice_mic_device": updateSelectedMicDevice,
-        "/controller/callback_set_mic_host": updateMicHostAndDevice,
         "/controller/callback_set_mic_device": updateSelectedMicDevice,
 
+        "/controller/list_speaker_device": updateSpeakerDeviceList,
+        "/config/choice_speaker_device": updateSelectedSpeakerDevice,
+        "/controller/callback_set_speaker_device": updateSelectedSpeakerDevice,
+
+
         "/controller/callback_messagebox_send": updateSentMessageLog,
         "/action/transcription_send_mic_message": addSentMessageLog,
         "/action/transcription_receive_speaker_message": addReceivedMessageLog