# HG changeset patch
# User Lucas Thompson <dev@lucas.im>
# Date 1498763474 -3600
# Node ID 7bb0bac6f8dc3c0ad57fe4835f8fae3232d80873
# Parent  d27f1ca7ba6a85e6bb75908a14e0c72732ef0583
Add export button for recordings and option to remove audio item (also removes all related analyses atm). Revokes associated object url for audio on removal. Will be problematic if the history is used for undo / redo.

diff -r d27f1ca7ba6a -r 7bb0bac6f8dc src/app/analysis-item/analysis-item.component.html
--- a/src/app/analysis-item/analysis-item.component.html	Thu Jun 29 20:09:11 2017 +0100
+++ b/src/app/analysis-item/analysis-item.component.html	Thu Jun 29 20:11:14 2017 +0100
@@ -101,4 +101,15 @@
       </ng-template>
     </div>
   </md-card-content>
+  <md-card-actions
+    *ngIf="isAudioItem()">
+    <a md-icon-button
+       *ngIf="isAudioItem() && item.isExportable"
+      [href]="sanitize(item.uri)"
+      [download]="generateFilename(item)"
+    ><md-icon>file_download</md-icon></a>
+    <button md-icon-button (click)="remove.emit(item)">
+      <md-icon>delete_forever</md-icon>
+    </button>
+  </md-card-actions>
 </md-card>
diff -r d27f1ca7ba6a -r 7bb0bac6f8dc src/app/analysis-item/analysis-item.component.ts
--- a/src/app/analysis-item/analysis-item.component.ts	Thu Jun 29 20:09:11 2017 +0100
+++ b/src/app/analysis-item/analysis-item.component.ts	Thu Jun 29 20:11:14 2017 +0100
@@ -6,7 +6,9 @@
   Component,
   Input,
   OnDestroy,
-  OnInit
+  OnInit,
+  Output,
+  EventEmitter
 } from '@angular/core';
 import {naivePagingMapper} from '../visualisations/WavesJunk';
 import {OnSeekHandler} from '../playhead/PlayHeadHelpers';
@@ -19,6 +21,7 @@
   RenderLoopService,
   TaskRemover
 } from '../services/render-loop/render-loop.service';
+import {DomSanitizer} from '@angular/platform-browser';
 
 export interface Item {
   id: string;
@@ -31,6 +34,7 @@
 export interface PendingRootAudioItem extends Item {
   uri: string;
   mimeType?: string;
+  isExportable?: boolean;
 }
 export interface RootAudioItem extends PendingRootAudioItem {
   audioData: AudioBuffer;
@@ -115,13 +119,17 @@
   @Input() item: Item;
   @Input() contentWidth: number;
   @Input() onSeek: OnSeekHandler;
+  @Output() remove: EventEmitter<Item>;
   // TODO move / re-think - naivePagingMapper feels like a big ol' bodge
   private removeAnimation: TaskRemover;
   private hasProgressOnInit = false;
   private mIsActive: boolean;
   private mTimeline: Timeline;
 
-  constructor(private renderLoop: RenderLoopService) {}
+  constructor(private renderLoop: RenderLoopService,
+              private sanitizer: DomSanitizer) {
+    this.remove = new EventEmitter<Item>();
+  }
 
   ngOnInit(): void {
     this.resetRemoveAnimation();
@@ -164,6 +172,18 @@
     this.removeAnimation();
   }
 
+  private sanitize(url: string) {
+    return this.sanitizer.bypassSecurityTrustUrl(url);
+  }
+
+  private generateFilename(item: PendingRootAudioItem): string {
+    // TODO this is too brittle, and will often produce the wrong result
+    // i.e. audio/mpeg results in .mpeg, when .mp3 is likely desired
+    const mimeParts = item.mimeType ? item.mimeType.split('/') : [];
+    const extension = mimeParts.length === 2 ? mimeParts[1] : '';
+    return `${item.title}.${extension}`;
+  }
+
   private resetRemoveAnimation(): void {
     if (this.removeAnimation) {
       this.removeAnimation();
diff -r d27f1ca7ba6a -r 7bb0bac6f8dc src/app/app.component.html
--- a/src/app/app.component.html	Thu Jun 29 20:09:11 2017 +0100
+++ b/src/app/app.component.html	Thu Jun 29 20:11:14 2017 +0100
@@ -7,7 +7,7 @@
 
       <ugly-playback-control></ugly-playback-control>
       <ugly-recording-control
-        (finishedRecording)="onFileOpened($event); tray.close()"
+        (finishedRecording)="onFileOpened($event, true); tray.close()"
       ></ugly-recording-control>
 
       <!-- This fills the remaining space of the current row -->
@@ -33,6 +33,7 @@
   </ugly-action-tray>
   <div class="ugly-content">
     <ugly-notebook-feed
+      (removeItem)="removeItem($event)"
       [analyses]="analyses.toIterable()"
       [rootAudioUri]="rootAudioItem.uri"
       [onSeek]="onSeek"></ugly-notebook-feed>
diff -r d27f1ca7ba6a -r 7bb0bac6f8dc src/app/app.component.ts
--- a/src/app/app.component.ts	Thu Jun 29 20:09:11 2017 +0100
+++ b/src/app/app.component.ts	Thu Jun 29 20:11:14 2017 +0100
@@ -1,7 +1,8 @@
-import {Component, OnDestroy} from '@angular/core';
+import {Component, Inject, OnDestroy} from '@angular/core';
 import {
   AudioPlayerService,
-  AudioResourceError, AudioResource
+  AudioResourceError,
+  AudioResource
 } from './services/audio-player/audio-player.service';
 import {FeatureExtractionService} from './services/feature-extraction/feature-extraction.service';
 import {ExtractorOutputInfo} from './feature-extraction-menu/feature-extraction-menu.component';
@@ -10,10 +11,15 @@
 import {Subscription} from 'rxjs/Subscription';
 import {
   AnalysisItem,
+  isPendingAnalysisItem, isPendingRootAudioItem,
   isRootAudioItem,
-  Item, PendingAnalysisItem, PendingRootAudioItem, RootAudioItem
+  Item,
+  PendingAnalysisItem,
+  PendingRootAudioItem,
+  RootAudioItem
 } from './analysis-item/analysis-item.component';
 import {OnSeekHandler} from './playhead/PlayHeadHelpers';
+import {UrlResourceLifetimeManager} from './app.module';
 
 class PersistentStack<T> {
   private stack: T[];
@@ -60,6 +66,28 @@
     ];
   }
 
+  map<U>(transform: (value: T, index: number, array: T[]) => U): U[] {
+    return this.stack.map(transform);
+  }
+
+  reduce<U>(reducer: (previousValue: U,
+                      currentValue: T,
+                      currentIndex: number,
+                      array: T[]) => U,
+            initialValue: U): U {
+    return this.stack.reduce(reducer, initialValue);
+  }
+
+  remove(...indices: number[]) {
+    this.history.push([...this.stack]);
+    this.stack = this.stack.reduce((acc, item, i) => {
+      if (!indices.includes(i)) {
+        acc.push(item);
+      }
+      return acc;
+    }, [] as T[]);
+  }
+
   toIterable(): Iterable<T> {
     return this.stack;
   }
@@ -84,7 +112,10 @@
   constructor(private audioService: AudioPlayerService,
               private featureService: FeatureExtractionService,
               private iconRegistry: MdIconRegistry,
-              private sanitizer: DomSanitizer) {
+              private sanitizer: DomSanitizer,
+              @Inject(
+                'UrlResourceLifetimeManager'
+              ) private resourceManager: UrlResourceLifetimeManager) {
     this.analyses = new PersistentStack<AnalysisItem>();
     this.canExtract = false;
     this.nRecordings = 0;
@@ -144,7 +175,7 @@
     );
   }
 
-  onFileOpened(file: File | Blob) {
+  onFileOpened(file: File | Blob, createExportableItem = false) {
     this.canExtract = false;
     const url = this.audioService.loadAudio(file);
     // TODO is it safe to assume it is a recording?
@@ -165,7 +196,8 @@
       title: title,
       description: new Date().toLocaleString(),
       id: `${++this.countingId}`,
-      mimeType: file.type
+      mimeType: file.type,
+      isExportable: createExportableItem
     } as PendingRootAudioItem;
     this.rootAudioItem = pending as RootAudioItem; // TODO this is silly
 
@@ -223,6 +255,22 @@
     });
   }
 
+  removeItem(item: Item): void {
+    const indicesToRemove: number[] = this.analyses.reduce(
+      (toRemove, current, index) => {
+        if (isPendingAnalysisItem(current) && current.parent.id === item.id) {
+          toRemove.push(index);
+        } else if (item.id === current.id) {
+          toRemove.push(index);
+        }
+        return toRemove;
+      }, []);
+    if (isPendingRootAudioItem(item)) {
+      this.resourceManager.revokeUrlToResource(item.uri);
+    }
+    this.analyses.remove(...indicesToRemove);
+  }
+
   ngOnDestroy(): void {
     this.onAudioDataSubscription.unsubscribe();
     this.onProgressUpdated.unsubscribe();
diff -r d27f1ca7ba6a -r 7bb0bac6f8dc src/app/notebook-feed/notebook-feed.component.html
--- a/src/app/notebook-feed/notebook-feed.component.html	Thu Jun 29 20:09:11 2017 +0100
+++ b/src/app/notebook-feed/notebook-feed.component.html	Thu Jun 29 20:11:14 2017 +0100
@@ -1,7 +1,7 @@
 <div class="feed">
   <ng-template ngFor let-item [ngForOf]="analyses">
     <div [class.break]="isAudioItem(item)">
-      <ugly-analysis-item
+      <ugly-analysis-item (remove)="removeItem.emit($event)"
         [timeline]="getOrCreateTimeline(item)"
         [isActive]="isActiveItem(item)"
         [item]="item"
diff -r d27f1ca7ba6a -r 7bb0bac6f8dc src/app/notebook-feed/notebook-feed.component.ts
--- a/src/app/notebook-feed/notebook-feed.component.ts	Thu Jun 29 20:09:11 2017 +0100
+++ b/src/app/notebook-feed/notebook-feed.component.ts	Thu Jun 29 20:11:14 2017 +0100
@@ -4,10 +4,10 @@
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
-  Component,
+  Component, EventEmitter,
   Inject,
   Input,
-  OnDestroy
+  OnDestroy, Output
 } from '@angular/core';
 import Waves from 'waves-ui-piper';
 import {
@@ -32,6 +32,7 @@
     this._rootAudioUri = uri;
   }
   @Input() onSeek: OnSeekHandler;
+  @Output() removeItem: EventEmitter<Item>;
 
   get rootAudioUri(): string {
     return this._rootAudioUri;
@@ -46,6 +47,7 @@
     private ref: ChangeDetectorRef,
     @Inject('DimensionObservable') private onResize: Observable<Dimension>
   ) {
+    this.removeItem = new EventEmitter<Item>();
     this.timelines = new Map();
     this.onResize.subscribe(dim => {
       this.lastWidth = this.width;