From f34eaa6ee2b6e34e7acf778898fd9405820f3008 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Tue, 3 Sep 2024 11:30:40 +0900
Subject: [PATCH] [Update] Config Page: Device Tab. Add Speaker device
 selector. (Now, Devices (Mic host, Mic device, Speaker device) are
 selectable.)

---
 src-ui/app/App.jsx                            | 10 ++++----
 .../setting_box/device/Device.jsx             | 21 +++++++++++++++++
 src-ui/logics/useConfig.js                    | 23 +++++++++++++++++++
 src-ui/logics/useReceiveRoutes.js             | 14 ++++++++++-
 src-ui/store.js                               |  2 ++
 5 files changed, 65 insertions(+), 5 deletions(-)

diff --git a/src-ui/app/App.jsx b/src-ui/app/App.jsx
index 3d69130c..337d701f 100644
--- a/src-ui/app/App.jsx
+++ b/src-ui/app/App.jsx
@@ -16,10 +16,11 @@ export const App = () => {
     const { currentIsOpenedConfigPage } = useIsOpenedConfigPage();
     const {
         getSoftwareVersion,
-        getMicHostList,
+        // getMicHostList,
         getSelectedMicHost,
-        getMicDeviceList,
+        // getMicDeviceList,
         getSelectedMicDevice,
+        getSelectedSpeakerDevice,
     } = useConfig();
 
     useEffect(() => {
@@ -27,10 +28,11 @@ export const App = () => {
         if (!hasRunRef.current) {
             asyncStartPython().then((result) => {
                 getSoftwareVersion();
-                getMicHostList();
+                // getMicHostList();
                 getSelectedMicHost();
-                getMicDeviceList();
+                // getMicDeviceList();
                 getSelectedMicDevice();
+                getSelectedSpeakerDevice();
             }).catch((err) => {
                 console.error(err);
             });
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 626078bc..6059dbd4 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
@@ -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"/>
 
diff --git a/src-ui/logics/useConfig.js b/src-ui/logics/useConfig.js
index 35cc1f50..fb7c54fc 100644
--- a/src-ui/logics/useConfig.js
+++ b/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);
diff --git a/src-ui/logics/useReceiveRoutes.js b/src-ui/logics/useReceiveRoutes.js
index 0e481ae3..d3fee4b6 100644
--- a/src-ui/logics/useReceiveRoutes.js
+++ b/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
diff --git a/src-ui/store.js b/src-ui/store.js
index b9db8364..553d2e75 100644
--- a/src-ui/store.js
+++ b/src-ui/store.js
@@ -121,6 +121,8 @@ export const { atomInstance: Atom_SelectedMicHost, useHook: useSelectedMicHost }
 export const { atomInstance: Atom_MicDeviceList, useHook: useMicDeviceList } = createAsyncAtomWithHook({}, "MicDeviceList");
 export const { atomInstance: Atom_SelectedMicDevice, useHook: useSelectedMicDevice } = createAsyncAtomWithHook("Nothing Selected", "SelectedMicDevice");
 
+export const { atomInstance: Atom_SpeakerDeviceList, useHook: useSpeakerDeviceList } = createAsyncAtomWithHook({}, "SpeakerDeviceList");
+export const { atomInstance: Atom_SelectedSpeakerDevice, useHook: useSelectedSpeakerDevice } = createAsyncAtomWithHook("Nothing Selected", "SelectedSpeakerDevice");
 
 export const { atomInstance: Atom_SendMessageFormat, useHook: useSendMessageFormat } = createAtomWithHook({
     before: "",