dev@171: /**
dev@171:  * Created by lucast on 21/03/2017.
dev@171:  */
dev@232: import {
dev@232:   ChangeDetectionStrategy,
dev@285:   ChangeDetectorRef,
dev@232:   Component,
dev@285:   Inject,
dev@285:   Input,
dev@285:   OnDestroy
dev@236: } from '@angular/core';
dev@289: import Waves from 'waves-ui-piper';
dev@236: import {AnalysisItem} from '../analysis-item/analysis-item.component';
dev@285: import {Observable} from 'rxjs/Observable';
dev@285: import {Dimension} from '../app.module';
dev@285: import {Subscription} from 'rxjs/Subscription';
dev@171: 
dev@171: @Component({
dev@171:   selector: 'ugly-notebook-feed',
dev@171:   templateUrl: './notebook-feed.component.html',
dev@232:   styleUrls: ['./notebook-feed.component.css'],
dev@232:   changeDetection: ChangeDetectionStrategy.OnPush
dev@171: })
dev@285: export class NotebookFeedComponent implements OnDestroy {
dev@201:   @Input() analyses: AnalysisItem[];
dev@201:   @Input() set rootAudioUri(uri: string) {
dev@201:     this._rootAudioUri = uri;
dev@171:   }
dev@171: 
dev@201:   get rootAudioUri(): string {
dev@201:     return this._rootAudioUri;
dev@171:   }
dev@201:   private _rootAudioUri: string;
dev@285:   private resizeSubscription: Subscription;
dev@285:   private width: number;
dev@285:   private lastWidth: number;
dev@282:   private timelines: Map<string, Timeline>;
dev@181: 
dev@285:   constructor(
dev@285:     private ref: ChangeDetectorRef,
dev@285:     @Inject('DimensionObservable') private onResize: Observable<Dimension>
dev@285:   ) {
dev@282:     this.timelines = new Map();
dev@285:     this.onResize.subscribe(dim => {
dev@285:       this.lastWidth = this.width;
dev@285:       this.width = dim.width;
dev@285:     });
dev@285: 
dev@285:     // the use of requestAnimationFrame here is to leave the dom updates
dev@285:     // to a time convenient for the browser, and avoid a cascade / waterfall
dev@285:     // of DOM changes for rapid resize events in the event handler above.
dev@285:     // ..I'm not convinced this is particularly beneficial here // TODO
dev@285:     const triggerChangeDetectionOnResize = () => {
dev@285:       requestAnimationFrame(triggerChangeDetectionOnResize);
dev@285:       if (this.width !== this.lastWidth) {
dev@285:         ref.markForCheck(); // only trigger change detection if width changed
dev@285:       }
dev@285:     };
dev@285:     requestAnimationFrame(triggerChangeDetectionOnResize);
dev@282:   }
dev@282: 
dev@282:   getOrCreateTimeline(item: AnalysisItem): Timeline | void {
dev@282:     if (!item.hasSharedTimeline) {
dev@282:       return;
dev@282:     }
dev@282: 
dev@282:     if (this.timelines.has(item.rootAudioUri)) {
dev@282:       return this.timelines.get(item.rootAudioUri);
dev@282:     } else {
dev@282:       const timeline = new Waves.core.Timeline();
dev@282:       this.timelines.set(item.rootAudioUri, timeline);
dev@282:       return timeline;
dev@282:     }
dev@181:   }
dev@285: 
dev@285:   ngOnDestroy(): void {
dev@285:     if (this.resizeSubscription) {
dev@285:       this.resizeSubscription.unsubscribe();
dev@285:     }
dev@285:   }
dev@171: }