fix(tokens): add Promise rejection for not supporting browsers

Author: waterplea

projects/demo/src/app/app.component.html

@@ -1,20 +1,25 @@
-<section *ngIf="notes$ | async as notes" class="piano">
-    <ng-container
-        *ngFor="let note of notes | keyvalue; trackBy: noteKey"
-        waOscillatorNode
-        type="sawtooth"
-        autoplay
-        [frequency]="toFrequency(note.key) | waAudioParam: 0.2"
-    >
-        <ng-container waGainNode gain="0" [gain]="note.value | waAudioParam: 0.01">
-            <ng-container waAudioDestinationNode></ng-container>
+<button *ngIf="!started; else piano" class="start" (click)="start()">
+    Start AudioContext
+</button>
+<ng-template #piano>
+    <section *ngIf="notes$ | async as notes" class="piano">
+        <ng-container
+            *ngFor="let note of notes | keyvalue; trackBy: noteKey"
+            waOscillatorNode
+            type="sawtooth"
+            autoplay
+            [frequency]="toFrequency(note.key) | waAudioParam: 0.2"
+        >
+            <ng-container waGainNode gain="0" [gain]="note.value | waAudioParam: 0.01">
+                <ng-container waAudioDestinationNode></ng-container>
+            </ng-container>
         </ng-container>
-    </ng-container>
 
-    <div
-        *ngFor="let key of octaves"
-        [class]="getClass(notes, key)"
-        (mousedown)="onMouseDown(key)"
-        (touchstart)="onMouseDown(key)"
-    ></div>
-</section>
+        <div
+            *ngFor="let key of octaves"
+            [class]="getClass(notes, key)"
+            (mousedown)="onMouseDown(key)"
+            (touchstart)="onMouseDown(key)"
+        ></div>
+    </section>
+</ng-template>

projects/demo/src/app/app.component.less

@@ -3,6 +3,11 @@
     user-select: none;
 }
 
+.start {
+    align-self: flex-start;
+    height: 30px;
+}
+
 .piano {
     margin: -12.5vw auto 12.5vw;
     height: 50vw;

projects/demo/src/app/app.component.ts

@@ -1,7 +1,7 @@
 import {ChangeDetectionStrategy, Component, HostListener, Inject} from '@angular/core';
-import {MIDI_MESSAGES, notes, toData, toFrequency} from '@ng-web-apis/midi';
-import {merge, Observable, Subject} from 'rxjs';
-import {map, scan, startWith, switchMap} from 'rxjs/operators';
+import {MIDI_MESSAGES, MIDI_SUPPORT, notes, toData, toFrequency} from '@ng-web-apis/midi';
+import {EMPTY, merge, Observable, Subject} from 'rxjs';
+import {catchError, map, scan, startWith, switchMap} from 'rxjs/operators';
 
 import MIDIMessageEvent = WebMidi.MIDIMessageEvent;
 
@@ -12,6 +12,8 @@ import MIDIMessageEvent = WebMidi.MIDIMessageEvent;
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent {
+    started = false;
+
     readonly octaves = Array.from({length: 24}, (_, i) => i + 48);
 
     readonly notes$: Observable<Map<number, number>>;
@@ -20,7 +22,10 @@ export class AppComponent {
 
     readonly mouseup$ = new Subject<void>();
 
-    constructor(@Inject(MIDI_MESSAGES) messages$: Observable<MIDIMessageEvent>) {
+    constructor(
+        @Inject(MIDI_SUPPORT) readonly supported: boolean,
+        @Inject(MIDI_MESSAGES) messages$: Observable<MIDIMessageEvent>,
+    ) {
         const mouseInitiated$ = this.mousedown$.pipe(
             switchMap(down =>
                 this.mouseup$.pipe(
@@ -32,6 +37,7 @@ export class AppComponent {
 
         this.notes$ = merge(
             messages$.pipe(
+                catchError(() => EMPTY),
                 notes(),
                 toData(),
             ),
@@ -42,6 +48,10 @@ export class AppComponent {
         );
     }
 
+    start() {
+        this.started = true;
+    }
+
     noteKey({key}: {key: number}): number {
         return key;
     }

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

@@ -12,7 +12,9 @@ export const MIDI_ACCESS = new InjectionToken<Promise<MIDIAccess>>(
             const navigatorRef = inject(NAVIGATOR);
             const sysex = inject(SYSEX);
 
-            return navigatorRef.requestMIDIAccess({sysex});
+            return navigatorRef.requestMIDIAccess
+                ? navigatorRef.requestMIDIAccess({sysex})
+                : Promise.reject(new Error('Web MIDI API is not supported'));
         },
     },
 );