From cbe299583b59c058e41c0671e6b88dc1a0d0d6da Mon Sep 17 00:00:00 2001
From: josc146 <josStorer@outlook.com>
Date: Thu, 30 Nov 2023 11:57:52 +0800
Subject: [PATCH] improve details of MIDI Input

---
 .../src/pages/AudiotrackManager/AudiotrackEditor.tsx  |  2 +-
 frontend/src/pages/Composition.tsx                    | 11 ++++++++++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/AudiotrackManager/AudiotrackEditor.tsx b/frontend/src/pages/AudiotrackManager/AudiotrackEditor.tsx
index c827ae1..9d4a5d4 100644
--- a/frontend/src/pages/AudiotrackManager/AudiotrackEditor.tsx
+++ b/frontend/src/pages/AudiotrackManager/AudiotrackEditor.tsx
@@ -487,7 +487,7 @@ const AudiotrackEditor: FC<{ setPrompt: (prompt: string) => void }> = observer((
               }
             }
           }
-          const result = globalMessages.map(m => midiMessageToToken(m)).join('');
+          const result = ('<pad> ' + globalMessages.map(m => midiMessageToToken(m)).join('')).trim();
           commonStore.setCompositionSubmittedPrompt(result);
           setPrompt(result);
         }}>
diff --git a/frontend/src/pages/Composition.tsx b/frontend/src/pages/Composition.tsx
index 037c9be..e16e60c 100644
--- a/frontend/src/pages/Composition.tsx
+++ b/frontend/src/pages/Composition.tsx
@@ -98,6 +98,13 @@ const CompositionPanel: FC = observer(() => {
     }
   }, []);
 
+  useEffect(() => {
+    if (!(commonStore.activeMidiDeviceIndex in commonStore.midiPorts)) {
+      commonStore.setActiveMidiDeviceIndex(-1);
+      CloseMidiPort();
+    }
+  }, [commonStore.midiPorts]);
+
   const generateNs = (autoPlay: boolean) => {
     fetch(getServerRoot(port) + '/text-to-midi', {
       method: 'POST',
@@ -270,7 +277,9 @@ const CompositionPanel: FC = observer(() => {
                 content={
                   <div className="flex flex-col gap-1">
                     <Dropdown style={{ minWidth: 0 }}
-                      value={commonStore.activeMidiDeviceIndex === -1 ? t('None')! : commonStore.midiPorts[commonStore.activeMidiDeviceIndex].name}
+                      value={(commonStore.activeMidiDeviceIndex === -1 || !(commonStore.activeMidiDeviceIndex in commonStore.midiPorts))
+                        ? t('None')!
+                        : commonStore.midiPorts[commonStore.activeMidiDeviceIndex].name}
                       selectedOptions={[commonStore.activeMidiDeviceIndex.toString()]}
                       onOptionSelect={(_, data) => {
                         if (data.optionValue) {