diff src/app/app.component.ts @ 203:f9088265a1fc

Some basic idea of a session - though barely. Add new items after opening a file and extracting features.

--- a/src/app/app.component.ts	Fri Mar 24 11:07:54 2017 +0000
+++ b/src/app/app.component.ts	Fri Mar 24 11:08:32 2017 +0000
@@ -8,6 +8,7 @@
 import {DomSanitizer} from '@angular/platform-browser';
 import {MdIconRegistry} from '@angular/material';
 import {Subscription} from "rxjs";
+import {AnalysisItem} from "./analysis-item/analysis-item.component";
 
 @Component({
   selector: 'app-root',
@@ -17,15 +18,18 @@
 export class AppComponent implements OnDestroy {
   audioBuffer: AudioBuffer; // TODO consider revising
   canExtract: boolean;
-  isProcessing: boolean;
   private onAudioDataSubscription: Subscription;
+  private analyses: AnalysisItem[]; // TODO some immutable state container describing entire session
+  private nRecordings: number; // TODO user control for naming a recording
+  private rootAudioUri: string;
 
   constructor(private audioService: AudioPlayerService,
               private piperService: FeatureExtractionService,
               private iconRegistry: MdIconRegistry,
               private sanitizer: DomSanitizer) {
+    this.analyses = [];
     this.canExtract = false;
-    this.isProcessing = false;
+    this.nRecordings = 0;
     iconRegistry.addSvgIcon(
       'duck',
       sanitizer.bypassSecurityTrustResourceUrl('assets/duck.svg')
@@ -35,13 +39,12 @@
       resource => {
         const wasError = (resource as AudioResourceError).message != null;
         if (wasError) {
-          this.isProcessing = false;
+          this.analyses.shift();
           this.canExtract = false;
         } else {
           this.audioBuffer = (resource as AudioResource).samples;
           if (this.audioBuffer) {
             this.canExtract = true;
-            this.isProcessing = false;
           }
         }
       }
@@ -50,14 +53,46 @@
 
   onFileOpened(file: File | Blob) {
     this.canExtract = false;
-    this.isProcessing = true;
-    this.audioService.loadAudio(file);
+    const url = this.audioService.loadAudio(file);
+    this.rootAudioUri = url; // TODO this isn't going to work to id previously loaded files
+
+    // TODO is it safe to assume it is a recording?
+    const title = (file instanceof File) ?
+      (file as File).name : `Recording ${this.nRecordings++}`;
+
+    if (this.analyses.filter(item => item.title === title).length > 0) {
+      // TODO this reveals how brittle the current name / uri based id is
+      // need something more robust, and also need to notify the user
+      // in a suitable way in the actual event of a duplicate file
+      console.warn('There is already a notebook based on this audio file.');
+      return;
+    }
+
+    // TODO re-ordering of items for display
+    // , one alternative is a Angular Pipe / Filter for use in the Template
+    this.analyses.unshift({
+      rootAudioUri: url,
+      hasSharedTimeline: true,
+      extractorKey: 'not:real',
+      isRoot: true,
+      title: title,
+      description: new Date().toLocaleString()
+    });
   }
 
   extractFeatures(outputInfo: ExtractorOutputInfo): void {
     if (!this.canExtract || !outputInfo) return;
     this.canExtract = false;
-    this.isProcessing = true;
+
+    this.analyses.unshift({
+      rootAudioUri: this.rootAudioUri,
+      hasSharedTimeline: true,
+      extractorKey: outputInfo.combinedKey,
+      isRoot: false,
+      title: outputInfo.name,
+      description: outputInfo.outputId
+    });
+
     this.piperService.collect({
       audioData: [...Array(this.audioBuffer.numberOfChannels).keys()]
         .map(i => this.audioBuffer.getChannelData(i)),
@@ -69,10 +104,8 @@
       outputId: outputInfo.outputId
     }).then(() => {
       this.canExtract = true;
-      this.isProcessing = false;
     }).catch(err => {
       this.canExtract = true;
-      this.isProcessing = false;
       console.error(err)
     });
   }