# HG changeset patch
# User Lucas Thompson <dev@lucas.im>
# Date 1495731374 -3600
# Node ID d17d5038b11a66c2268e13bb18a6a598bd6b7099
# Parent  82d476b976e0d2c73eb90a71b6635d9cf58a342e
Wire up as necessary to push the handlers down the tree. This is unfinished.

diff -r 82d476b976e0 -r d17d5038b11a src/app/analysis-item/analysis-item.component.css
--- a/src/app/analysis-item/analysis-item.component.css	Thu May 25 17:55:29 2017 +0100
+++ b/src/app/analysis-item/analysis-item.component.css	Thu May 25 17:56:14 2017 +0100
@@ -13,3 +13,14 @@
 md-card-header {
   margin-bottom: 8px;
 }
+
+ugly-live-play-head {
+  position: absolute;
+  z-index: 99;
+  height: 160px;
+}
+
+.content {
+  height: 160px;
+  width: 100%;
+}
diff -r 82d476b976e0 -r d17d5038b11a src/app/analysis-item/analysis-item.component.html
--- a/src/app/analysis-item/analysis-item.component.html	Thu May 25 17:55:29 2017 +0100
+++ b/src/app/analysis-item/analysis-item.component.html	Thu May 25 17:56:14 2017 +0100
@@ -10,16 +10,26 @@
         [progress]="item.progress"
       ></ugly-progress-bar>
     </ng-template>
-    <ng-template [ngIf]="!isLoading()">
-      <ugly-waveform
-        [timeline]="timeline"
-        [trackIdPrefix]=" item.id || item.title"
-        [isSubscribedToAudioService]="isActive && item.isRoot"
-        [isSubscribedToExtractionService]="isActive && !item.isRoot"
-        [isOneShotExtractor]="true"
-        [isSeeking]="isActive"
-        [width]="contentWidth"
-      ></ugly-waveform>
-    </ng-template>
+    <div class="content">
+      <ng-template [ngIf]="!isLoading()">
+        <ng-template [ngIf]="isActive && isAudioItem()">
+          <ugly-live-play-head
+            [timeToPixel]="DOES_NOT_BELONG_HERE"
+            [colour]="'#c33c54'"
+          >
+          </ugly-live-play-head>
+        </ng-template>
+        <ugly-waveform *ngIf="isAudioItem(); else showSpinner"
+          [timeline]="timeline"
+          [trackIdPrefix]=" item.id || item.title"
+          [width]="contentWidth"
+          [audioBuffer]="item.audioData"
+          [onSeek]="onSeek"
+        ></ugly-waveform>
+        <ng-template #showSpinner>
+          <ugly-progress-spinner></ugly-progress-spinner>
+        </ng-template>
+      </ng-template>
+    </div>
   </md-card-content>
 </md-card>
diff -r 82d476b976e0 -r d17d5038b11a src/app/analysis-item/analysis-item.component.ts
--- a/src/app/analysis-item/analysis-item.component.ts	Thu May 25 17:55:29 2017 +0100
+++ b/src/app/analysis-item/analysis-item.component.ts	Thu May 25 17:56:14 2017 +0100
@@ -7,6 +7,8 @@
   Input,
   OnInit
 } from '@angular/core';
+import {naivePagingMapper} from '../visualisations/WavesJunk';
+import {OnSeekHandler, TimePixelMapper} from '../playhead/PlayHeadHelpers';
 
 export interface AnalysisItem {
   rootAudioUri: string;
@@ -17,6 +19,7 @@
   description?: string;
   id?: string;
   progress?: number;
+  audioData?: AudioBuffer;
 }
 
 @Component({
@@ -31,13 +34,25 @@
   @Input() isActive: boolean;
   @Input() item: AnalysisItem;
   @Input() contentWidth: number;
+  @Input() onSeek: OnSeekHandler;
   private hasProgressOnInit = false;
 
+
+  // TODO move
+  private DOES_NOT_BELONG_HERE: TimePixelMapper;
+
   ngOnInit(): void {
     this.hasProgressOnInit = this.item.progress != null;
+    this.DOES_NOT_BELONG_HERE = naivePagingMapper(this.timeline);
   }
 
   isLoading(): boolean {
     return this.hasProgressOnInit && this.item.progress < 100;
   }
+
+  isAudioItem(): boolean {
+    return this.item &&
+      this.item.isRoot &&
+      this.item.audioData instanceof AudioBuffer;
+  }
 }
diff -r 82d476b976e0 -r d17d5038b11a src/app/notebook-feed/notebook-feed.component.css
--- a/src/app/notebook-feed/notebook-feed.component.css	Thu May 25 17:55:29 2017 +0100
+++ b/src/app/notebook-feed/notebook-feed.component.css	Thu May 25 17:56:14 2017 +0100
@@ -4,4 +4,5 @@
 
 .feed {
   width: 100%;
+  overflow-x: hidden;
 }
diff -r 82d476b976e0 -r d17d5038b11a src/app/notebook-feed/notebook-feed.component.html
--- a/src/app/notebook-feed/notebook-feed.component.html	Thu May 25 17:55:29 2017 +0100
+++ b/src/app/notebook-feed/notebook-feed.component.html	Thu May 25 17:56:14 2017 +0100
@@ -3,9 +3,10 @@
     <div [class.break]="item.isRoot">
       <ugly-analysis-item
         [timeline]="getOrCreateTimeline(item)"
-        [isActive]="rootAudioUri === item.rootAudioUri"
+        [isActive]="isActiveItem(item)"
         [item]="item"
         [contentWidth]="width"
+        [onSeek]="getOnSeekForItem(item)"
       ></ugly-analysis-item>
     </div>
   </ng-template>
diff -r 82d476b976e0 -r d17d5038b11a src/app/notebook-feed/notebook-feed.component.ts
--- a/src/app/notebook-feed/notebook-feed.component.ts	Thu May 25 17:55:29 2017 +0100
+++ b/src/app/notebook-feed/notebook-feed.component.ts	Thu May 25 17:56:14 2017 +0100
@@ -14,6 +14,7 @@
 import {Observable} from 'rxjs/Observable';
 import {Dimension} from '../app.module';
 import {Subscription} from 'rxjs/Subscription';
+import {OnSeekHandler} from '../playhead/PlayHeadHelpers';
 
 @Component({
   selector: 'ugly-notebook-feed',
@@ -26,6 +27,7 @@
   @Input() set rootAudioUri(uri: string) {
     this._rootAudioUri = uri;
   }
+  @Input() onSeek: OnSeekHandler;
 
   get rootAudioUri(): string {
     return this._rootAudioUri;
@@ -73,6 +75,14 @@
     }
   }
 
+  isActiveItem(item: AnalysisItem): boolean {
+    return this.rootAudioUri === item.rootAudioUri;
+  }
+
+  getOnSeekForItem(item: AnalysisItem): (timeSecounds: number) => any {
+    return this.isActiveItem(item) ? this.onSeek : () => {};
+  }
+
   ngOnDestroy(): void {
     if (this.resizeSubscription) {
       this.resizeSubscription.unsubscribe();