changeset 285:2d7da410ba46

Introduce width Inputs to analysis items and waveform and observe for Dimension changes in notebook-feed.

--- a/src/app/analysis-item/analysis-item.component.html	Thu May 04 16:57:57 2017 +0100
+++ b/src/app/analysis-item/analysis-item.component.html	Thu May 04 17:09:48 2017 +0100
@@ -18,6 +18,7 @@
         [isSubscribedToExtractionService]="isActive && !item.isRoot"
         [isOneShotExtractor]="true"
         [isSeeking]="isActive"
+        [width]="contentWidth"
       ></ugly-waveform>
     </ng-template>
   </md-card-content>

--- a/src/app/analysis-item/analysis-item.component.ts	Thu May 04 16:57:57 2017 +0100
+++ b/src/app/analysis-item/analysis-item.component.ts	Thu May 04 17:09:48 2017 +0100
@@ -30,6 +30,7 @@
   @Input() timeline: Timeline;
   @Input() isActive: boolean;
   @Input() item: AnalysisItem;
+  @Input() contentWidth: number;
   private hasProgressOnInit = false;
 
   ngOnInit(): void {

--- a/src/app/notebook-feed/notebook-feed.component.html	Thu May 04 16:57:57 2017 +0100
+++ b/src/app/notebook-feed/notebook-feed.component.html	Thu May 04 17:09:48 2017 +0100
@@ -5,6 +5,7 @@
         [timeline]="getOrCreateTimeline(item)"
         [isActive]="rootAudioUri === item.rootAudioUri"
         [item]="item"
+        [contentWidth]="width"
       ></ugly-analysis-item>
     </div>
   </ng-template>

--- a/src/app/notebook-feed/notebook-feed.component.ts	Thu May 04 16:57:57 2017 +0100
+++ b/src/app/notebook-feed/notebook-feed.component.ts	Thu May 04 17:09:48 2017 +0100
@@ -3,11 +3,17 @@
  */
 import {
   ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
-  Input
+  Inject,
+  Input,
+  OnDestroy
 } from '@angular/core';
 import Waves from 'waves-ui';
 import {AnalysisItem} from '../analysis-item/analysis-item.component';
+import {Observable} from 'rxjs/Observable';
+import {Dimension} from '../app.module';
+import {Subscription} from 'rxjs/Subscription';
 
 @Component({
   selector: 'ugly-notebook-feed',
@@ -15,7 +21,7 @@
   styleUrls: ['./notebook-feed.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class NotebookFeedComponent {
+export class NotebookFeedComponent implements OnDestroy {
   @Input() analyses: AnalysisItem[];
   @Input() set rootAudioUri(uri: string) {
     this._rootAudioUri = uri;
@@ -25,10 +31,32 @@
     return this._rootAudioUri;
   }
   private _rootAudioUri: string;
+  private resizeSubscription: Subscription;
+  private width: number;
+  private lastWidth: number;
   private timelines: Map<string, Timeline>;
 
-  constructor() {
+  constructor(
+    private ref: ChangeDetectorRef,
+    @Inject('DimensionObservable') private onResize: Observable<Dimension>
+  ) {
     this.timelines = new Map();
+    this.onResize.subscribe(dim => {
+      this.lastWidth = this.width;
+      this.width = dim.width;
+    });
+
+    // the use of requestAnimationFrame here is to leave the dom updates
+    // to a time convenient for the browser, and avoid a cascade / waterfall
+    // of DOM changes for rapid resize events in the event handler above.
+    // ..I'm not convinced this is particularly beneficial here // TODO
+    const triggerChangeDetectionOnResize = () => {
+      requestAnimationFrame(triggerChangeDetectionOnResize);
+      if (this.width !== this.lastWidth) {
+        ref.markForCheck(); // only trigger change detection if width changed
+      }
+    };
+    requestAnimationFrame(triggerChangeDetectionOnResize);
   }
 
   getOrCreateTimeline(item: AnalysisItem): Timeline | void {
@@ -44,4 +72,10 @@
       return timeline;
     }
   }
+
+  ngOnDestroy(): void {
+    if (this.resizeSubscription) {
+      this.resizeSubscription.unsubscribe();
+    }
+  }
 }

--- a/src/app/waveform/waveform.component.ts	Thu May 04 16:57:57 2017 +0100
+++ b/src/app/waveform/waveform.component.ts	Thu May 04 17:09:48 2017 +0100
@@ -60,7 +60,14 @@
 export class WaveformComponent implements OnInit, AfterViewInit, OnDestroy {
 
   @ViewChild('track') trackDiv: ElementRef;
-
+  @Input() set width(width: number) {
+    if (this.timeline) {
+      requestAnimationFrame(() => {
+        this.timeline.timeContext.visibleWidth = width;
+        this.timeline.tracks.update();
+      });
+    }
+  }
   @Input() timeline: Timeline;
   @Input() trackIdPrefix: string;
   @Input() set isSubscribedToExtractionService(isSubscribed: boolean) {