diff --git a/src/App.js b/src/App.js index d3eb4d2a..30423027 100644 --- a/src/App.js +++ b/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({ diff --git a/src/Status.js b/src/Status.js index f583d7de..eb82f538 100644 --- a/src/Status.js +++ b/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({value.name}); + inputs.push({value.name} ({value.id})); }); this.props.midi?.outputs.forEach(function(value, key, map) { - outputs.push({value.name}); + outputs.push({value.name} ({value.id})); }); return ( @@ -81,12 +81,12 @@ class Status extends React.Component { inputs.length > 0 && outputs.length > 0 && <> -

Your ES-9 may be named differently than expected.

Select your ES-9 input and output below.

Select MIDI Input @@ -96,6 +96,7 @@ class Status extends React.Component { Select MIDI Output