From b341d49d031b3982d69d0d83b61a90a875faace8 Mon Sep 17 00:00:00 2001 From: pokrishka Date: Mon, 10 Feb 2020 21:56:49 +0300 Subject: [PATCH 1/2] fix(tokens): add Promise rejection for not supporting browsers --- projects/demo/src/app/app.component.html | 41 +++++++++++++----------- projects/demo/src/app/app.component.less | 5 +++ projects/demo/src/app/app.component.ts | 18 ++++++++--- projects/midi/src/tokens/midi-access.ts | 4 ++- 4 files changed, 45 insertions(+), 23 deletions(-) diff --git a/projects/demo/src/app/app.component.html b/projects/demo/src/app/app.component.html index c425a8f..061c9cb 100644 --- a/projects/demo/src/app/app.component.html +++ b/projects/demo/src/app/app.component.html @@ -1,20 +1,25 @@ -
- - - + + +
+ + + + - -
-
+
+
+ diff --git a/projects/demo/src/app/app.component.less b/projects/demo/src/app/app.component.less index 4ec3f4e..16dd437 100644 --- a/projects/demo/src/app/app.component.less +++ b/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; diff --git a/projects/demo/src/app/app.component.ts b/projects/demo/src/app/app.component.ts index 206676e..04efc89 100644 --- a/projects/demo/src/app/app.component.ts +++ b/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>; @@ -20,7 +22,10 @@ export class AppComponent { readonly mouseup$ = new Subject(); - constructor(@Inject(MIDI_MESSAGES) messages$: Observable) { + constructor( + @Inject(MIDI_SUPPORT) readonly supported: boolean, + @Inject(MIDI_MESSAGES) messages$: Observable, + ) { 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; } diff --git a/projects/midi/src/tokens/midi-access.ts b/projects/midi/src/tokens/midi-access.ts index 5ab08f1..4747c2e 100644 --- a/projects/midi/src/tokens/midi-access.ts +++ b/projects/midi/src/tokens/midi-access.ts @@ -12,7 +12,9 @@ export const MIDI_ACCESS = new InjectionToken>( 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')); }, }, ); From e8404900a24a8706432786a651ab2ab12815d3b8 Mon Sep 17 00:00:00 2001 From: waterplea Date: Tue, 11 Feb 2020 11:33:23 +0300 Subject: [PATCH 2/2] properly handle Promise rejection in MIDI_MESSAGES --- README.md | 2 +- package-lock.json | 6 ++--- package.json | 4 ++-- projects/demo/src/app/app.component.html | 5 ++++- projects/demo/src/app/app.component.less | 3 ++- projects/midi/src/tokens/midi-messages.ts | 22 ++++++++++--------- .../midi/src/tokens/tests/midi-access.spec.ts | 16 ++++++++++++++ 7 files changed, 40 insertions(+), 18 deletions(-) diff --git a/README.md b/README.md index 8199b51..221e1b7 100644 --- a/README.md +++ b/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 [Web APIs for Angular](https://ng-web-apis.github.io/) diff --git a/package-lock.json b/package-lock.json index bfd7fc6..e95d7f8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1098,9 +1098,9 @@ } }, "@ng-web-apis/audio": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/@ng-web-apis/audio/-/audio-1.2.0.tgz", - "integrity": "sha512-VyeRg0u/ObHla/m1ctd50OzPKtiuWHrGUnXWEG467urTDlwtQ0J1kxBjAC0Y4YxH/Lb5pwh5GmittbH7r5wrAA==", + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@ng-web-apis/audio/-/audio-1.2.1.tgz", + "integrity": "sha512-uiFc6exhE/uxAVfRCLlchupJ34JT2AzRerz1ZhZPfXWiVbn4c4/9f+heyLOgiW6JEp7LdqfvZEAQC3xS0QIgRA==", "requires": { "tslib": "^1.9.0" } diff --git a/package.json b/package.json index 24c50ee..873c0ca 100644 --- a/package.json +++ b/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", diff --git a/projects/demo/src/app/app.component.html b/projects/demo/src/app/app.component.html index 061c9cb..44423d4 100644 --- a/projects/demo/src/app/app.component.html +++ b/projects/demo/src/app/app.component.html @@ -1,3 +1,6 @@ +

+ Web MIDI API is not supported by your browser +

@@ -8,7 +11,7 @@ waOscillatorNode type="sawtooth" autoplay - [frequency]="toFrequency(note.key) | waAudioParam: 0.2" + [frequency]="toFrequency(note.key)" > diff --git a/projects/demo/src/app/app.component.less b/projects/demo/src/app/app.component.less index 16dd437..ab677ad 100644 --- a/projects/demo/src/app/app.component.less +++ b/projects/demo/src/app/app.component.less @@ -1,10 +1,11 @@ :host { perspective: 150vw; user-select: none; + flex-direction: column; + align-items: center; } .start { - align-self: flex-start; height: 30px; } diff --git a/projects/midi/src/tokens/midi-messages.ts b/projects/midi/src/tokens/midi-messages.ts index 2df7532..a131a67 100644 --- a/projects/midi/src/tokens/midi-messages.ts +++ b/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>( { 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, - 'midimessage', - ), - ), - ), + access instanceof Error + ? throwError(access) + : merge( + ...Array.from(access.inputs).map(([_, input]) => + fromEvent( + input as FromEventTarget, + 'midimessage', + ), + ), + ), ), ), }, diff --git a/projects/midi/src/tokens/tests/midi-access.spec.ts b/projects/midi/src/tokens/tests/midi-access.spec.ts index 6ff51d6..d9a5614 100644 --- a/projects/midi/src/tokens/tests/midi-access.spec.ts +++ b/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(); + }); + }); });