diff --git a/packages/client/src/components/IOSettings.svelte b/packages/client/src/components/IOSettings.svelte index 0c3b18b6..dbbe6b80 100644 --- 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} />
@@ -170,7 +170,7 @@
{#if setKeys && !$hidden} -

Hotkey Map

+

Hotkeys

{/if} diff --git a/packages/client/src/routes/(site)/+page.svelte b/packages/client/src/routes/(site)/+page.svelte index a5f5260f..75a27423 100644 --- 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 index 254f6ca8..138db4f3 100644 --- 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(false), { key: 'midi-access' }) -export const midiInput = writable(undefined) +export const midiInput = writable>({ 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> { - 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)