dev@31: import {Component} from '@angular/core';
dev@37: import {AudioPlayerService} from "./services/audio-player/audio-player.service";
dev@47: import {FeatureExtractionService} from "./services/feature-extraction/feature-extraction.service";
dev@47: import {ExtractorOutputInfo} from "./feature-extraction-menu/feature-extraction-menu.component";
dev@89: import {DomSanitizer} from '@angular/platform-browser';
dev@89: import {MdIconRegistry} from '@angular/material';
angular-cli@0: 
angular-cli@0: @Component({
angular-cli@0:   selector: 'app-root',
angular-cli@0:   templateUrl: './app.component.html',
angular-cli@0:   styleUrls: ['./app.component.css']
angular-cli@0: })
angular-cli@0: export class AppComponent {
dev@31:   audioBuffer: AudioBuffer; // TODO consider revising
dev@49:   canExtract: boolean;
dev@115:   isProcessing: boolean;
dev@1: 
dev@47:   constructor(private audioService: AudioPlayerService,
dev@89:               private piperService: FeatureExtractionService,
dev@89:               private iconRegistry: MdIconRegistry,
dev@89:               private sanitizer: DomSanitizer) {
dev@49:     this.canExtract = false;
dev@115:     this.isProcessing = false;
dev@89:     iconRegistry.addSvgIcon(
dev@89:       'duck',
dev@89:       sanitizer.bypassSecurityTrustResourceUrl('assets/duck.svg')
dev@89:     );
dev@48:   }
dev@16: 
dev@134:   onFileOpened(file: File | Blob) {
dev@49:     this.canExtract = false;
dev@115:     this.isProcessing = true;
dev@31:     const reader: FileReader = new FileReader();
dev@31:     const mimeType = file.type;
dev@31:     reader.onload = (event: any) => {
dev@134:       const url: string = file instanceof Blob ? URL.createObjectURL(file) :
dev@134:         URL.createObjectURL(new Blob([event.target.result], {type: mimeType}));
dev@134:       this.audioService.loadAudioFromUrl(url);
dev@31:       // TODO use a rxjs/Subject instead?
dev@134:       this.audioService.decodeAudioData(event.target.result)
dev@134:         .then(audioBuffer => {
dev@31:         this.audioBuffer = audioBuffer;
dev@115:         if (this.audioBuffer) {
dev@49:           this.canExtract = true;
dev@115:           this.isProcessing = false;
dev@115:         }
dev@134:       }).catch(error => {
dev@134:         this.canExtract = false;
dev@134:         this.isProcessing = false;
dev@134:         console.warn(error);
dev@31:       });
dev@31:     };
dev@31:     reader.readAsArrayBuffer(file);
dev@16:   }
dev@47: 
dev@48:   extractFeatures(outputInfo: ExtractorOutputInfo): void {
dev@50:     if (!this.canExtract || !outputInfo) return;
dev@49:     this.canExtract = false;
dev@115:     this.isProcessing = true;
dev@63:     this.piperService.collect({
dev@47:       audioData: [...Array(this.audioBuffer.numberOfChannels).keys()]
dev@47:         .map(i => this.audioBuffer.getChannelData(i)),
dev@47:       audioFormat: {
dev@47:         sampleRate: this.audioBuffer.sampleRate,
dev@47:         channelCount: this.audioBuffer.numberOfChannels
dev@47:       },
dev@47:       key: outputInfo.extractorKey,
dev@47:       outputId: outputInfo.outputId
dev@50:     }).then(() => {
dev@49:       this.canExtract = true;
dev@115:       this.isProcessing = false;
dev@115:     }).catch(err => {
dev@115:       this.canExtract = true;
dev@115:       this.isProcessing = false;
dev@115:       console.error(err)
dev@115:     });
dev@47:   }
angular-cli@0: }