feat(tokens): add MIDI_INPUTS and MIDI_OUTPUTS

Author: waterplea

projects/midi/src/public-api.ts

@@ -30,8 +30,10 @@ export * from './pipes/frequency/frequency.pipe';
 /* Tokens */
 export * from './tokens/midi-access';
 export * from './tokens/midi-input';
+export * from './tokens/midi-inputs';
 export * from './tokens/midi-messages';
 export * from './tokens/midi-output';
+export * from './tokens/midi-outputs';
 export * from './tokens/midi-support';
 export * from './tokens/sysex';
 

projects/midi/src/tokens/midi-inputs.ts

@@ -0,0 +1,12 @@
+import MIDIInput = WebMidi.MIDIInput;
+
+import {InjectionToken} from '@angular/core';
+import {Observable} from 'rxjs';
+import {getPortsStream} from '../utils/get-ports-stream';
+
+export const MIDI_INPUTS = new InjectionToken<Observable<MIDIInput[]>>(
+    'Array of MIDI inputs',
+    {
+        factory: () => getPortsStream('inputs'),
+    },
+);

projects/midi/src/tokens/midi-outputs.ts

@@ -0,0 +1,12 @@
+import MIDIOutput = WebMidi.MIDIOutput;
+
+import {InjectionToken} from '@angular/core';
+import {Observable} from 'rxjs';
+import {getPortsStream} from '../utils/get-ports-stream';
+
+export const MIDI_OUTPUTS = new InjectionToken<Observable<MIDIOutput[]>>(
+    'Array of MIDI inputs',
+    {
+        factory: () => getPortsStream('outputs'),
+    },
+);

projects/midi/src/utils/get-ports-stream.ts

@@ -0,0 +1,26 @@
+import MIDIInput = WebMidi.MIDIInput;
+import MIDIOutput = WebMidi.MIDIOutput;
+
+import {inject} from '@angular/core';
+import {MIDI_ACCESS} from '@ng-web-apis/midi';
+import {from, fromEvent, Observable, of} from 'rxjs';
+import {FromEventTarget} from 'rxjs/internal/observable/fromEvent';
+import {map, shareReplay, startWith, switchMap} from 'rxjs/operators';
+
+export function getPortsStream(ports: 'inputs'): Observable<MIDIInput[]>;
+export function getPortsStream(ports: 'outputs'): Observable<MIDIOutput[]>;
+export function getPortsStream(
+    ports: 'inputs' | 'outputs',
+): Observable<(MIDIOutput | MIDIInput)[]> {
+    return from(inject(MIDI_ACCESS).catch(() => null)).pipe(
+        switchMap(access =>
+            access
+                ? fromEvent(access as FromEventTarget<any>, 'statechange').pipe(
+                      map(() => [...access[ports].values()]),
+                      startWith([...access[ports].values()]),
+                  )
+                : of([]),
+        ),
+        shareReplay(1),
+    );
+}