comparison src/app/app.component.ts @ 49:92c139e16b51

Disable button whilst extracting (for now) - quick fix to stop multiple process requests being sent (as they aren't queued / no request-response matching is done / process requests are synchronous)

   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
   audioBuffer: AudioBuffer; // TODO consider revising
-  hasAudioBuffer: boolean;
+  canExtract: boolean;
 
   constructor(private audioService: AudioPlayerService,
               private piperService: FeatureExtractionService) {
-    this.hasAudioBuffer = false;
+    this.canExtract = false;
   }
 
   onFileOpened(file: File) {
-    this.hasAudioBuffer = false;
+    this.canExtract = false;
     const reader: FileReader = new FileReader();
     const mimeType = file.type;
     reader.onload = (event: any) => {
       this.audioService.loadAudioFromUrl(
         URL.createObjectURL(new Blob([event.target.result], {type: mimeType}))
       );
       // TODO use a rxjs/Subject instead?
       this.audioService.decodeAudioData(event.target.result).then(audioBuffer => {
         this.audioBuffer = audioBuffer;
         if (this.audioBuffer)
-          this.hasAudioBuffer = true;
+          this.canExtract = true;
       });
     };
     reader.readAsArrayBuffer(file);
   }
 
   extractFeatures(outputInfo: ExtractorOutputInfo): void {
-    if (!this.hasAudioBuffer) return;
+    if (!this.canExtract) return;
+    this.canExtract = false;
     this.piperService.process({
       audioData: [...Array(this.audioBuffer.numberOfChannels).keys()]
         .map(i => this.audioBuffer.getChannelData(i)),
       audioFormat: {
         sampleRate: this.audioBuffer.sampleRate,
         channelCount: this.audioBuffer.numberOfChannels
       },
       key: outputInfo.extractorKey,
       outputId: outputInfo.outputId
-    }).then(data => console.log(data)).catch(err => console.error(err));
+    }).then(data => {
+      this.canExtract = true;
+      console.log(data);
+    }).catch(err => console.error(err));
   }
 }