Mercurial > hg > ugly-duckling

changeset 189:a50feba0d7f0

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Share Timeline instance instead of previous event emitting TimelineTimeContext bodge.
author Lucas Thompson <dev@lucas.im>
date Wed, 22 Mar 2017 14:34:43 +0000
parents 3f84bd16c1e8
children 5e8a2eb8bdbf
files src/app/analysis-item/analysis-item.component.html src/app/analysis-item/analysis-item.component.ts src/app/notebook-feed/notebook-feed.component.html src/app/notebook-feed/notebook-feed.component.ts src/app/waveform/waveform.component.ts
diffstat 5 files changed, 24 insertions(+), 73 deletions(-) [+]
line wrap: on
line diff
--- a/src/app/analysis-item/analysis-item.component.html	Wed Mar 22 14:30:19 2017 +0000
+++ b/src/app/analysis-item/analysis-item.component.html	Wed Mar 22 14:34:43 2017 +0000
@@ -6,7 +6,8 @@
   <md-card-content>
     <app-waveform
       [audioBuffer]="audioBuffer"
-      [timeContext]="timeContext"
+      [timeline]="timeline"
+      [trackIdPrefix]="title"
     ></app-waveform>
   </md-card-content>
 </md-card>
--- a/src/app/analysis-item/analysis-item.component.ts	Wed Mar 22 14:30:19 2017 +0000
+++ b/src/app/analysis-item/analysis-item.component.ts	Wed Mar 22 14:34:43 2017 +0000
@@ -16,7 +16,7 @@
 })
 export class AnalysisItemComponent {
   private _audioBuffer: AudioBuffer;
-  @Input() timeContext: TimelineTimeContext;
+  @Input() timeline: Timeline;
   @Input() title: string;
   @Input() description: string;
 
--- a/src/app/notebook-feed/notebook-feed.component.html	Wed Mar 22 14:30:19 2017 +0000
+++ b/src/app/notebook-feed/notebook-feed.component.html	Wed Mar 22 14:34:43 2017 +0000
@@ -1,8 +1,14 @@
 <ugly-analysis-item
   [audioBuffer]="audioBuffer"
-  [timeContext]="sharedTimeContext"></ugly-analysis-item>
+  [timeline]="sharedTimeline"
+  [title]="'one'"
+  [description]="'Shared timeline'"></ugly-analysis-item>
 <ugly-analysis-item
   [audioBuffer]="audioBuffer"
-  [timeContext]="sharedTimeContext"></ugly-analysis-item>
+  [timeline]="sharedTimeline"
+  [title]="'two'"
+  [description]="'Shared timeline'"></ugly-analysis-item>
 <ugly-analysis-item
-  [audioBuffer]="audioBuffer"></ugly-analysis-item>
+  [audioBuffer]="audioBuffer"
+  [title]="'three'"
+  [description]="'Independent timeline'"></ugly-analysis-item>
--- a/src/app/notebook-feed/notebook-feed.component.ts	Wed Mar 22 14:30:19 2017 +0000
+++ b/src/app/notebook-feed/notebook-feed.component.ts	Wed Mar 22 14:34:43 2017 +0000
@@ -3,48 +3,6 @@
  */
 import {Component, Input} from "@angular/core";
 import Waves from 'waves-ui';
-import {EventEmitter} from 'events';
-
-export interface PartialEventEmitter {
-  on(event: string|symbol, listener: Function): void;
-}
-
-class NotifyingTimeContext extends Waves.core.TimelineTimeContext
-  implements PartialEventEmitter {
-
-  private eventEmitter: EventEmitter;
-
-  constructor(pixelsPerSecond: number, visibleWidth: number) {
-    super(pixelsPerSecond, visibleWidth);
-    this.eventEmitter = new EventEmitter();
-  }
-
-  get offset(){
-    return super.offset;
-  }
-
-  set offset(value: number) {
-    if (value !== this.offset) {
-      this.eventEmitter.emit('offset');
-    }
-    super.offset = value;
-  }
-
-  get zoom(){
-    return super.zoom;
-  }
-
-  set zoom(value: number) {
-    if (value !== this.zoom) {
-      this.eventEmitter.emit('zoom');
-    }
-    super.zoom = value;
-  }
-
-  on(event: string|symbol, listener: Function): void {
-    this.eventEmitter.on(event, listener);
-  }
-}
 
 @Component({
   selector: 'ugly-notebook-feed',
@@ -53,7 +11,7 @@
 })
 export class NotebookFeedComponent {
   private _audioBuffer: AudioBuffer;
-  sharedTimeContext: TimelineTimeContext;
+  sharedTimeline: Timeline;
 
 
   @Input()
@@ -69,6 +27,6 @@
   }
 
   constructor() {
-    this.sharedTimeContext = new NotifyingTimeContext(100, 1000);
+    this.sharedTimeline = new Waves.core.Timeline();
   }
 }
--- a/src/app/waveform/waveform.component.ts	Wed Mar 22 14:30:19 2017 +0000
+++ b/src/app/waveform/waveform.component.ts	Wed Mar 22 14:34:43 2017 +0000
@@ -16,7 +16,6 @@
 import {FeatureList, Feature} from "piper/Feature";
 import * as Hammer from 'hammerjs';
 import {WavesSpectrogramLayer} from "../spectrogram/Spectrogram";
-import {PartialEventEmitter} from "../notebook-feed/notebook-feed.component";
 
 type Layer = any;
 type Track = any;
@@ -31,9 +30,9 @@
 
   @ViewChild('track') trackDiv: ElementRef;
 
-  @Input() timeContext: TimelineTimeContext & PartialEventEmitter;
+  @Input() timeline: Timeline;
+  @Input() trackIdPrefix: string;
   private _audioBuffer: AudioBuffer;
-  private timeline: Timeline;
   private cursorLayer: any;
   private layers: Layer[];
 
@@ -103,6 +102,7 @@
   }
 
   ngAfterViewInit(): void {
+    this.trackIdPrefix = this.trackIdPrefix || "default";
     this.renderTimeline();
   }
 
@@ -118,19 +118,9 @@
     } else {
       this.timeline = new wavesUI.core.Timeline(pixelsPerSecond, width);
     }
-    if (this.timeContext instanceof wavesUI.core.TimelineTimeContext) {
-      console.warn('Has shared timeline');
-      this.timeline.timeContext = this.timeContext;
-      this.timeContext.on('zoom', () => {
-        this.timeline.tracks.update();
-      });
-      this.timeContext.on('offset', () => {
-        this.timeline.tracks.update();
-      });
-    }
-    this.timeline.createTrack(track, height, 'wave');
-    // this.timeline.createTrack(track, height/2, 'wave');
-    // this.timeline.createTrack(track, height/2, 'grid');
+    this.timeline.createTrack(track, height, `wave-${this.trackIdPrefix}`);
+    // this.timeline.createTrack(track, height/2, `wave-${this.trackIdPrefix}`);
+    // this.timeline.createTrack(track, height/2, `grid-${this.trackIdPrefix}`);
   }
 
   estimatePercentile(matrix, percentile) {
@@ -273,7 +263,7 @@
   renderWaveform(buffer: AudioBuffer): void {
     // const height: number = this.trackDiv.nativeElement.getBoundingClientRect().height / 2;
     const height: number = this.trackDiv.nativeElement.getBoundingClientRect().height;
-    const waveTrack = this.timeline.getTrackById('wave');
+    const waveTrack = this.timeline.getTrackById(`wave-${this.trackIdPrefix}`);
     if (this.timeline) {
       // resize
       const width = this.trackDiv.nativeElement.getBoundingClientRect().width;
@@ -298,7 +288,7 @@
     const nchannels = buffer.numberOfChannels;
     const totalWaveHeight = height * 0.9;
     const waveHeight = totalWaveHeight / nchannels;
-    
+
     for (let ch = 0; ch < nchannels; ++ch) {
       console.log("about to construct a waveform layer for channel " + ch);
       const waveformLayer = new wavesUI.helpers.WaveformLayer(buffer, {
@@ -403,7 +393,7 @@
 
   renderSpectrogram(buffer: AudioBuffer): void {
     const height: number = this.trackDiv.nativeElement.getBoundingClientRect().height / 2;
-    const gridTrack = this.timeline.getTrackById('grid');
+    const gridTrack = this.timeline.getTrackById(`grid-${this.trackIdPrefix}`);
 
     const spectrogramLayer = new WavesSpectrogramLayer(buffer, {
       top: height * 0.05,
@@ -425,7 +415,7 @@
     const features: FeatureCollection = (extracted.features as FeatureCollection);
     const outputDescriptor = extracted.outputDescriptor;
     const height = this.trackDiv.nativeElement.getBoundingClientRect().height / 2;
-    const waveTrack = this.timeline.getTrackById('wave');
+    const waveTrack = this.timeline.getTrackById(`wave-${this.trackIdPrefix}`);
 
     // TODO refactor all of this
     switch (features.shape) {
@@ -616,19 +606,15 @@
         const mustPageBackward = currentTime < -currentOffset;
 
         if (mustPageForward) {
-          console.warn('page forward', mustPageForward, offsetTimestamp, visibleDuration);
           const hasSkippedMultiplePages = offsetTimestamp - visibleDuration > visibleDuration;
 
             this.timeline.timeContext.offset = hasSkippedMultiplePages ?
                 -currentTime +  0.5 * visibleDuration :
                 currentOffset - visibleDuration;
           this.timeline.tracks.update();
-        } else {
-          console.warn('no page', mustPageForward, offsetTimestamp, visibleDuration);
         }
 
         if (mustPageBackward) {
-          console.warn('page back');
           const hasSkippedMultiplePages = currentTime + visibleDuration < -currentOffset;
             this.timeline.timeContext.offset = hasSkippedMultiplePages ?
                 -currentTime + 0.5 * visibleDuration :