changeset 48:af0b4b05311c

Guard against extraction when no audio is loaded.

--- a/src/app/app.component.html	Mon Dec 05 16:57:34 2016 +0000
+++ b/src/app/app.component.html	Tue Dec 06 11:03:38 2016 +0000
@@ -22,7 +22,9 @@
         <app-playback-control class="playback-content"></app-playback-control>
       </md-tab>
       <md-tab label="Feature Extraction">
-        <app-feature-extraction-menu (requestOutput)="extractFeatures($event)"></app-feature-extraction-menu>
+        <app-feature-extraction-menu
+          (requestOutput)="extractFeatures($event)"
+          [disabled]="!hasAudioBuffer"></app-feature-extraction-menu>
       </md-tab>
     </md-tab-group>
   </md-sidenav>

--- a/src/app/app.component.ts	Mon Dec 05 16:57:34 2016 +0000
+++ b/src/app/app.component.ts	Tue Dec 06 11:03:38 2016 +0000
@@ -10,11 +10,15 @@
 })
 export class AppComponent {
   audioBuffer: AudioBuffer; // TODO consider revising
+  hasAudioBuffer: boolean;
 
   constructor(private audioService: AudioPlayerService,
-              private piperService: FeatureExtractionService) {}
+              private piperService: FeatureExtractionService) {
+    this.hasAudioBuffer = false;
+  }
 
   onFileOpened(file: File) {
+    this.hasAudioBuffer = false;
     const reader: FileReader = new FileReader();
     const mimeType = file.type;
     reader.onload = (event: any) => {
@@ -24,12 +28,15 @@
       // TODO use a rxjs/Subject instead?
       this.audioService.decodeAudioData(event.target.result).then(audioBuffer => {
         this.audioBuffer = audioBuffer;
+        if (this.audioBuffer)
+          this.hasAudioBuffer = true;
       });
     };
     reader.readAsArrayBuffer(file);
   }
 
-  extractFeatures(outputInfo: ExtractorOutputInfo) {
+  extractFeatures(outputInfo: ExtractorOutputInfo): void {
+    if (!this.hasAudioBuffer) return;
     this.piperService.process({
       audioData: [...Array(this.audioBuffer.numberOfChannels).keys()]
         .map(i => this.audioBuffer.getChannelData(i)),

--- a/src/app/feature-extraction-menu/feature-extraction-menu.component.html	Mon Dec 05 16:57:34 2016 +0000
+++ b/src/app/feature-extraction-menu/feature-extraction-menu.component.html	Tue Dec 06 11:03:38 2016 +0000
@@ -7,5 +7,6 @@
 <p>
   <button md-raised-button
           color="primary"
-          (click)="extract(extractorOutputs.value)">Extract</button>
+          (click)="extract(extractorOutputs.value)"
+          [disabled]="disabled">Extract</button>
 </p>

--- a/src/app/feature-extraction-menu/feature-extraction-menu.component.ts	Mon Dec 05 16:57:34 2016 +0000
+++ b/src/app/feature-extraction-menu/feature-extraction-menu.component.ts	Tue Dec 06 11:03:38 2016 +0000
@@ -1,4 +1,4 @@
-import {Component, OnInit, Output, EventEmitter} from '@angular/core';
+import {Component, OnInit, Output, EventEmitter, Input} from '@angular/core';
 import {FeatureExtractionService} from "../services/feature-extraction/feature-extraction.service";
 
 export interface ExtractorOutputInfo {
@@ -15,8 +15,18 @@
 })
 export class FeatureExtractionMenuComponent implements OnInit {
 
+  @Input()
+  set disabled(isDisabled: boolean) {
+    this.isDisabled = isDisabled;
+  }
+
+  get disabled() {
+    return this.isDisabled;
+  }
+
   @Output() requestOutput: EventEmitter<ExtractorOutputInfo>;
 
+  private isDisabled: boolean;
   private extractorsMap: Map<string, ExtractorOutputInfo>;
   extractors: Iterable<ExtractorOutputInfo>;
 
@@ -24,6 +34,7 @@
     this.extractorsMap = new Map();
     this.extractors = [];
     this.requestOutput = new EventEmitter();
+    this.isDisabled = true;
   }
 
   ngOnInit() {