show errors in midi input

TeemuKoivisto · Mar 29, 2024 · 6aa98fd · 6aa98fd
1 parent 5490833
commit 6aa98fd
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 20 deletions.
diff --git a/packages/client/src/components/IOSettings.svelte b/packages/client/src/components/IOSettings.svelte
@@ -100,7 +100,7 @@
           class="px-1 my-1 rounded w-50"
           id="device"
           disabled
-          value={$midiInput?.name ?? 'No device'}
+          value={'data' in $midiInput ? $midiInput.data.name : $midiInput.err}
         />
         <div class="flex my-[auto]">
           <button class="btn-sm primary mr-2" on:click={inputsActions.openMidi}>Prompt</button>
@@ -170,7 +170,7 @@
       </div>
     </div>
     {#if setKeys && !$hidden}
-      <h4 class="mt-4 text-lg">Hotkey Map</h4>
+      <h4 class="mt-4 font-bold text-lg">Hotkeys</h4>
       <VirtualKeyboard />
     {/if}
   </fieldset>

diff --git a/packages/client/src/routes/(site)/+page.svelte b/packages/client/src/routes/(site)/+page.svelte
@@ -29,7 +29,7 @@
 
   onMount(() => {
     if ($midiGranted) {
-      handlePromptMIDI()
+      inputsActions.openMidi()
     }
     window.addEventListener('keydown', initAudio)
     window.addEventListener('mousedown', initAudio)
@@ -42,8 +42,8 @@
   })
 
   midiInput.subscribe(input => {
-    if (input) {
-      input.channels[1].addListener('noteon', noteOnListener)
+    if ('data' in input) {
+      input.data.channels[1].addListener('noteon', noteOnListener)
     }
   })
 
@@ -136,16 +136,6 @@
       handlePlayedNote(found.semitones + 12 + e.detail.octave * 12, 80)
     }
   }
-  async function handlePromptMIDI() {
-    status = 'Finding device...'
-    const res = await inputsActions.openMidi()
-    if ('data' in res) {
-      status = res.data.name
-    } else {
-      status = res.err
-      console.error(res.err)
-    }
-  }
   function handleReset() {
     reset()
     window.location.reload()

diff --git a/packages/client/src/stores/inputs.ts b/packages/client/src/stores/inputs.ts
@@ -21,7 +21,7 @@ interface Inputs {
 export const midiGranted = persist(writable<boolean>(false), {
   key: 'midi-access'
 })
-export const midiInput = writable<Input | undefined>(undefined)
+export const midiInput = writable<Result<Input>>({ err: 'Uninitialized', code: 400 })
 export const midiRange = persist(writable<[number, number]>([60, 84]), {
   key: 'midi-range',
   storage: 'session'
@@ -48,21 +48,25 @@ export const inputs = persist(
 
 export const inputsActions = {
   async openMidi(): Promise<Result<Input>> {
-    return WebMidi.enable()
+    const res = await WebMidi.enable()
       .then(() => {
         midiGranted.set(true)
         if (WebMidi.inputs.length > 0) {
-          midiInput.set(WebMidi.inputs[0])
           return { data: WebMidi.inputs[0] }
         } else {
-          return { err: 'No MIDI device found.', code: 400 }
+          return { err: 'No MIDI device found', code: 404 }
         }
       })
       .catch(err => ({ err: err.toString(), code: 403 }))
+    if ('err' in res) {
+      console.error(res.err)
+    }
+    midiInput.set(res)
+    return res
   },
   disableMidi() {
     midiGranted.set(false)
-    midiInput.set(undefined)
+    midiInput.set({ err: 'Uninitialized', code: 400 })
   },
   setMidiRange(range: [number, number]) {
     midiRange.set(range)