From 9f2bc146c0c5de40ac5a2953447d32083e9d157c Mon Sep 17 00:00:00 2001
From: Felix Roos <roos@entrecode.de>
Date: Thu, 24 Feb 2022 20:16:21 +0100
Subject: [PATCH] fix: webmidi hints

---
 repl/src/App.tsx    |  8 ++++----
 repl/src/midi.ts    | 11 +++++++++--
 repl/src/useRepl.ts |  6 +++---
 3 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/repl/src/App.tsx b/repl/src/App.tsx
index ddaee1ad..fd8d029d 100644
--- a/repl/src/App.tsx
+++ b/repl/src/App.tsx
@@ -68,13 +68,13 @@ function App() {
 
   useWebMidi({
     ready: useCallback(({ outputs }) => {
-      pushLog(`WebMidi ready! Just add .midi(${outputs.map((o) => `"${o.name}"`).join(' | ')}) to the pattern. `);
+      pushLog(`WebMidi ready! Just add .midi(${outputs.map((o) => `'${o.name}'`).join(' | ')}) to the pattern. `);
     }, []),
     connected: useCallback(({ outputs }) => {
-      pushLog(`Midi device connected! Available: ${outputs.map((o) => `"${o.name}"`).join(', ')}`);
+      pushLog(`Midi device connected! Available: ${outputs.map((o) => `'${o.name}'`).join(', ')}`);
     }, []),
     disconnected: useCallback(({ outputs }) => {
-      pushLog(`Midi device disconnected! Available: ${outputs.map((o) => `"${o.name}"`).join(', ')}`);
+      pushLog(`Midi device disconnected! Available: ${outputs.map((o) => `'${o.name}'`).join(', ')}`);
     }, []),
   });
 
@@ -123,7 +123,7 @@ function App() {
             </span>
           </div>
           {error && (
-            <div className={cx('absolute right-2 bottom-2', 'text-red-500')}>{error?.message || 'unknown error'}</div>
+            <div className={cx('absolute right-2 bottom-2 px-2', 'text-red-500')}>{error?.message || 'unknown error'}</div>
           )}
         </div>
         <button
diff --git a/repl/src/midi.ts b/repl/src/midi.ts
index a7e601c9..523636c3 100644
--- a/repl/src/midi.ts
+++ b/repl/src/midi.ts
@@ -25,6 +25,13 @@ export default function enableWebMidi() {
 const outputByName = (name: string) => WebMidi.getOutputByName(name);
 
 Pattern.prototype.midi = function (output: string, channel = 1) {
+  if (output?.constructor?.name === 'Pattern') {
+    throw new Error(
+      `.midi does not accept Pattern input. Make sure to pass device name with single quotes. Example: .midi('${
+        WebMidi.outputs?.[0]?.name || 'IAC Driver Bus 1'
+      }')`
+    );
+  }
   return this.fmap((value: any) => ({
     ...value,
     onTrigger: (time: number, event: any) => {
@@ -41,8 +48,8 @@ Pattern.prototype.midi = function (output: string, channel = 1) {
       const device = output ? outputByName(output) : WebMidi.outputs[0];
       if (!device) {
         throw new Error(
-          `🔌 MIDI device ${output ? output : ''} not found. Use one of ${WebMidi.outputs
-            .map((o: any) => `"${o.name}"`)
+          `🔌 MIDI device '${output ? output : ''}' not found. Use one of ${WebMidi.outputs
+            .map((o: any) => `'${o.name}'`)
             .join(' | ')}`
         );
       }
diff --git a/repl/src/useRepl.ts b/repl/src/useRepl.ts
index 66921436..e16eb331 100644
--- a/repl/src/useRepl.ts
+++ b/repl/src/useRepl.ts
@@ -125,13 +125,13 @@ function useRepl({ tune, defaultSynth, autolink = true, onEvent }: any) {
 
   /* useWebMidi({
     ready: useCallback(({ outputs }) => {
-      pushLog(`WebMidi ready! Just add .midi(${outputs.map((o) => `"${o.name}"`).join(' | ')}) to the pattern. `);
+      pushLog(`WebMidi ready! Just add .midi(${outputs.map((o) => `'${o.name}'`).join(' | ')}) to the pattern. `);
     }, []),
     connected: useCallback(({ outputs }) => {
-      pushLog(`Midi device connected! Available: ${outputs.map((o) => `"${o.name}"`).join(', ')}`);
+      pushLog(`Midi device connected! Available: ${outputs.map((o) => `'${o.name}'`).join(', ')}`);
     }, []),
     disconnected: useCallback(({ outputs }) => {
-      pushLog(`Midi device disconnected! Available: ${outputs.map((o) => `"${o.name}"`).join(', ')}`);
+      pushLog(`Midi device disconnected! Available: ${outputs.map((o) => `'${o.name}'`).join(', ')}`);
     }, []),
   }); */