comparison src/app/waveform/waveform.component.ts @ 189:a50feba0d7f0

Share Timeline instance instead of previous event emitting TimelineTimeContext bodge.

 } from "piper/HigherLevelUtilities";
 import {toSeconds} from "piper";
 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;
 type Colour = string;
 

 })
 export class WaveformComponent implements OnInit, AfterViewInit, OnDestroy {
 
   @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[];
 
   @Input()
   set audioBuffer(buffer: AudioBuffer) {

 
   ngOnInit() {
   }
 
   ngAfterViewInit(): void {
+    this.trackIdPrefix = this.trackIdPrefix || "default";
     this.renderTimeline();
   }
 
   renderTimeline(duration: number = 1.0): Timeline {
     const track: HTMLElement = this.trackDiv.nativeElement;

       this.timeline.pixelsPerSecond = pixelsPerSecond;
       this.timeline.visibleWidth = width;
     } 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) {
     // our sample is not evenly distributed across the whole data set:
     // it is guaranteed to include at least one sample from every

   }
 
   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;
 
       this.clearTimeline();

     this.addLayer(timeAxis, waveTrack, this.timeline.timeContext, true);
 
     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, {
 	top: (height - totalWaveHeight)/2 + waveHeight * ch,
 	height: waveHeight,

     this.animate();
   }
 
   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,
       height: height * 0.9,
       stepSize: 512,

     if (!extracted.hasOwnProperty('features') || !extracted.hasOwnProperty('outputDescriptor')) return;
     if (!extracted.features.hasOwnProperty('shape') || !extracted.features.hasOwnProperty('data')) return;
     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) {
       case 'vector': {
         const stepDuration = (features as FixedSpacedFeatures).stepDuration;

         // this kinda logic should also be tested
         const mustPageForward = offsetTimestamp > visibleDuration;
         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 :
                 currentOffset + visibleDuration;
           this.timeline.tracks.update();