Merge pull request #2 from ng-web-apis/proper-reject

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

README.md

@@ -1,4 +1,4 @@
-# ![ng-web-apis logo](https://github.com/ng-web-apis/midi/blob/master/projects/demo/src/assets/logo.svg) Web MIDI API for Angular
+# ![ng-web-apis logo](projects/demo/src/assets/logo.svg) Web MIDI API for Angular
 
 > Part of <img src="projects/demo/src/assets/web-api.svg" align="top"> [Web APIs for Angular](https://ng-web-apis.github.io/)
 

package.json

@@ -49,8 +49,8 @@
         "@angular/platform-browser-dynamic": "^7.2.15",
         "@angular/platform-server": "^7.2.15",
         "@angular/router": "^7.2.15",
-        "@ng-web-apis/audio": "latest",
-        "@ng-web-apis/common": "latest",
+        "@ng-web-apis/audio": "^1.2.1",
+        "@ng-web-apis/common": "^1.0.1",
         "@nguniversal/common": "^7.1.1",
         "@nguniversal/express-engine": "^7.1.1",
         "@nguniversal/module-map-ngfactory-loader": "^7.1.1",

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

@@ -1,20 +1,28 @@
-<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>
+<p *ngIf="!supported">
+    Web MIDI API is not supported by your browser
+</p>
+<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)"
+        >
+            <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

@@ -1,6 +1,12 @@
 :host {
     perspective: 150vw;
     user-select: none;
+    flex-direction: column;
+    align-items: center;
+}
+
+.start {
+    height: 30px;
 }
 
 .piano {

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'));
         },
     },
 );

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

@@ -1,5 +1,5 @@
 import {inject, InjectionToken} from '@angular/core';
-import {from, fromEvent, merge, Observable} from 'rxjs';
+import {from, fromEvent, merge, Observable, throwError} from 'rxjs';
 import {FromEventTarget} from 'rxjs/internal/observable/fromEvent';
 import {switchMap} from 'rxjs/operators';
 import {MIDI_ACCESS} from './midi-access';
@@ -11,16 +11,18 @@ export const MIDI_MESSAGES = new InjectionToken<Observable<MIDIMessageEvent>>(
     {
         providedIn: 'root',
         factory: () =>
-            from(inject(MIDI_ACCESS)).pipe(
+            from(inject(MIDI_ACCESS).catch((e: Error) => e)).pipe(
                 switchMap(access =>
-                    merge(
-                        ...Array.from(access.inputs).map(([_, input]) =>
-                            fromEvent(
-                                input as FromEventTarget<MIDIMessageEvent>,
-                                'midimessage',
-                            ),
-                        ),
-                    ),
+                    access instanceof Error
+                        ? throwError(access)
+                        : merge(
+                              ...Array.from(access.inputs).map(([_, input]) =>
+                                  fromEvent(
+                                      input as FromEventTarget<MIDIMessageEvent>,
+                                      'midimessage',
+                                  ),
+                              ),
+                          ),
                 ),
             ),
     },

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

@@ -43,4 +43,20 @@ describe('MIDI_ACCESS', () => {
             sysex: true,
         });
     });
+
+    it('Promise is rejected when Web MIDI API is not supported', done => {
+        TestBed.configureTestingModule({
+            providers: [
+                {
+                    provide: NAVIGATOR,
+                    useValue: {},
+                },
+            ],
+        });
+
+        TestBed.get(MIDI_ACCESS).catch((e: any) => {
+            expect(e instanceof Error).toBe(true);
+            done();
+        });
+    });
 });