changeset 115:c02c76b94148

Basic spinner for indicating loading of files and features - the flag used for tracking state is mostly redundant (it is usually !canExtract... apart from initial state)... but going with this for now.

--- a/src/app/app.component.html	Mon Mar 13 15:46:24 2017 +0000
+++ b/src/app/app.component.html	Tue Mar 14 16:11:40 2017 +0000
@@ -29,4 +29,5 @@
   <app-waveform
     [audioBuffer]="audioBuffer"
     ></app-waveform>
+  <ugly-progress-spinner [isVisible]="isProcessing"></ugly-progress-spinner>
 </md-sidenav-container>

--- a/src/app/app.component.ts	Mon Mar 13 15:46:24 2017 +0000
+++ b/src/app/app.component.ts	Tue Mar 14 16:11:40 2017 +0000
@@ -13,12 +13,14 @@
 export class AppComponent {
   audioBuffer: AudioBuffer; // TODO consider revising
   canExtract: boolean;
+  isProcessing: boolean;
 
   constructor(private audioService: AudioPlayerService,
               private piperService: FeatureExtractionService,
               private iconRegistry: MdIconRegistry,
               private sanitizer: DomSanitizer) {
     this.canExtract = false;
+    this.isProcessing = false;
     iconRegistry.addSvgIcon(
       'duck',
       sanitizer.bypassSecurityTrustResourceUrl('assets/duck.svg')
@@ -27,6 +29,7 @@
 
   onFileOpened(file: File) {
     this.canExtract = false;
+    this.isProcessing = true;
     const reader: FileReader = new FileReader();
     const mimeType = file.type;
     reader.onload = (event: any) => {
@@ -36,8 +39,10 @@
       // TODO use a rxjs/Subject instead?
       this.audioService.decodeAudioData(event.target.result).then(audioBuffer => {
         this.audioBuffer = audioBuffer;
-        if (this.audioBuffer)
+        if (this.audioBuffer) {
           this.canExtract = true;
+          this.isProcessing = false;
+        }
       });
     };
     reader.readAsArrayBuffer(file);
@@ -46,6 +51,7 @@
   extractFeatures(outputInfo: ExtractorOutputInfo): void {
     if (!this.canExtract || !outputInfo) return;
     this.canExtract = false;
+    this.isProcessing = true;
     this.piperService.collect({
       audioData: [...Array(this.audioBuffer.numberOfChannels).keys()]
         .map(i => this.audioBuffer.getChannelData(i)),
@@ -57,6 +63,11 @@
       outputId: outputInfo.outputId
     }).then(() => {
       this.canExtract = true;
-    }).catch(err => console.error(err));
+      this.isProcessing = false;
+    }).catch(err => {
+      this.canExtract = true;
+      this.isProcessing = false;
+      console.error(err)
+    });
   }
 }

--- a/src/app/app.module.ts	Mon Mar 13 15:46:24 2017 +0000
+++ b/src/app/app.module.ts	Tue Mar 14 16:11:40 2017 +0000
@@ -11,6 +11,7 @@
 import { AudioPlayerService } from "./services/audio-player/audio-player.service";
 import { FeatureExtractionService } from "./services/feature-extraction/feature-extraction.service";
 import { FeatureExtractionMenuComponent } from "./feature-extraction-menu/feature-extraction-menu.component";
+import { ProgressSpinnerComponent } from "./progress-spinner/progress-spinner.component";
 
 export function createAudioContext(): AudioContext {
   return new (
@@ -29,7 +30,8 @@
     WaveformComponent,
     AudioFileOpenComponent,
     PlaybackControlComponent,
-    FeatureExtractionMenuComponent
+    FeatureExtractionMenuComponent,
+    ProgressSpinnerComponent
   ],
   imports: [
     BrowserModule,

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/app/progress-spinner/progress-spinner.component.ts	Tue Mar 14 16:11:40 2017 +0000
@@ -0,0 +1,34 @@
+/**
+ * Created by lucast on 14/03/2017.
+ */
+
+
+import {Component, Input} from "@angular/core";
+@Component({
+  selector: 'ugly-progress-spinner',
+  template: `
+    <div class="container" [hidden]="!isVisible">
+      <md-spinner
+        class="spinner"
+        color="primary"
+      ></md-spinner>
+    </div>
+  `,
+  styles: [`
+    .container {
+      height: 40px;
+      width: 40px;
+      position: absolute;
+      top: calc(100% - 40px);
+      left: calc(100% - 40px);
+    }
+    
+    .spinner {
+      width: 100%;
+      height: 100%;
+    }
+  `]
+})
+export class ProgressSpinnerComponent {
+  @Input() isVisible: boolean = true;
+}