Support multiple ES-9s

Only the status component will show when multiple ES-9s are detected.
The user will be prompted to select which ES-9 input and output to use.

The names are expected to be the same for inputs and outputs which makes
it impossible to differentiate. Though the IDs seem to be unique and
durable for each ES-9. Users will have to know which input and output ID
correspond to the same ES-9.

src/App.js

@@ -85,25 +85,36 @@ class App extends React.Component {
 
     this.midi = midi;
 
+    var es9Inputs = [];
+    var es9Outputs = [];
+
     midi.inputs.forEach(function(value, key, map) {
       if (value.name === this.es9InputName) {
-        this.es9.input = value;
-        return;
+        es9Inputs.push(value);
       }
     }.bind(this));
     midi.outputs.forEach(function(value, key, map) {
       if (value.name === this.es9OutputName) {
-        this.es9.output = value;
-        return;
+        es9Outputs.push(value);
       }
     }.bind(this));
 
-    if ([this.es9.input, this.es9.output].includes(undefined)) {
-      this.setState({
-        midiSupport: false,
-        statusMessage: 'ES-9 not found'
-      });
-      return;
+    switch (true) {
+      case es9Inputs.length === 0 || es9Outputs.length === 0:
+        this.setState({
+          midiSupport: false,
+          statusMessage: 'ES-9 not detected'
+        });
+        return;
+      case es9Inputs.length > 1 || es9Outputs.length > 1:
+        this.setState({
+          midiSupport: false,
+          statusMessage: 'Multiple ES-9s detected'
+        });
+        return
+      default:
+        this.es9.input = es9Inputs[0];
+        this.es9.output = es9Outputs[0];
     }
 
     this.setState({

src/Status.js

@@ -66,10 +66,10 @@ class Status extends React.Component {
     var inputs = [];
     var outputs = [];
     this.props.midi?.inputs.forEach(function(value, key, map) {
-      inputs.push(<MenuItem key={value.id} value={value.name}>{value.name}</MenuItem>);
+      inputs.push(<MenuItem key={value.id} value={value.name}>{value.name} ({value.id})</MenuItem>);
     });
     this.props.midi?.outputs.forEach(function(value, key, map) {
-      outputs.push(<MenuItem key={value.id} value={value.name}>{value.name}</MenuItem>);
+      outputs.push(<MenuItem key={value.id} value={value.name}>{value.name} ({value.id})</MenuItem>);
     });
 
     return (
@@ -81,12 +81,12 @@ class Status extends React.Component {
           inputs.length > 0 &&
           outputs.length > 0 &&
           <>
-            <p>Your ES-9 may be named differently than expected.</p>
             <p>Select your ES-9 input and output below.</p>
             <FormControl sx={{ m: 1, minWidth: 200 }}>
               <InputLabel id="input-label">Select MIDI Input</InputLabel>
               <Select
                 labelId="input-label"
+                label="Select MIDI Input"
                 value={this.state?.input}
                 onChange={this.setInput.bind(this)}
               >{inputs}</Select>
@@ -96,6 +96,7 @@ class Status extends React.Component {
               <InputLabel id="ouput-label">Select MIDI Output</InputLabel>
               <Select
                 labelId="output-label"
+                label="Select MIDI Output"
                 value={this.state?.output}
                 onChange={this.setOutput.bind(this)}
               >{outputs}</Select>