comparison src/app/waveform/waveform.component.ts @ 180:a1983e30cdd7

WIP - allow for using a provided TimelineTimeContext, and a few other small changes relating to instantiating the Timeline. Comment out some things for trying out single layer without spectrogram.

 } from "piper/HigherLevelUtilities";
 import {toSeconds} from "piper";
 import {FeatureList, Feature} from "piper/Feature";
 import * as Hammer from 'hammerjs';
 import {WavesSpectrogramLayer} from "../spectrogram/Spectrogram";
-
-type Timeline = any; // TODO what type actually is it.. start a .d.ts for waves-ui?
+import {PartialEventEmitter} from "../notebook-feed/notebook-feed.component";
+
 type Layer = any;
 type Track = any;
 type Colour = string;
 
 @Component({

 })
 export class WaveformComponent implements OnInit, AfterViewInit, OnDestroy {
 
   @ViewChild('track') trackDiv: ElementRef;
 
+  @Input() timeContext: TimelineTimeContext & PartialEventEmitter;
   private _audioBuffer: AudioBuffer;
   private timeline: Timeline;
   private cursorLayer: any;
 
   @Input()
   set audioBuffer(buffer: AudioBuffer) {
     this._audioBuffer = buffer || undefined;
     if (this.audioBuffer) {
       this.renderWaveform(this.audioBuffer);
-      this.renderSpectrogram(this.audioBuffer);
+      // this.renderSpectrogram(this.audioBuffer);
     }
   }
 
   get audioBuffer(): AudioBuffer {
     return this._audioBuffer;

 
   ngOnInit() {
   }
 
   ngAfterViewInit(): void {
-    this.timeline = this.renderTimeline();
+    this.renderTimeline();
   }
 
   renderTimeline(duration: number = 1.0): Timeline {
     const track: HTMLElement = this.trackDiv.nativeElement;
     track.innerHTML = "";
     const height: number = track.getBoundingClientRect().height;
     const width: number = track.getBoundingClientRect().width;
     const pixelsPerSecond = width / duration;
-    const timeline = new wavesUI.core.Timeline(pixelsPerSecond, width);
-    timeline.createTrack(track, height/2, 'wave');
-    timeline.createTrack(track, height/2, 'grid');
-    return timeline;
+    if (this.timeline instanceof wavesUI.core.Timeline) {
+      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');
   }
 
   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 / 2;
+    const height: number = this.trackDiv.nativeElement.getBoundingClientRect().height;
     const waveTrack = this.timeline.getTrackById('wave');
     if (this.timeline) {
       // resize
       const width = this.trackDiv.nativeElement.getBoundingClientRect().width;
 

 
       this.timeline.visibleWidth = width;
       this.timeline.pixelsPerSecond = width / buffer.duration;
       waveTrack.height = height;
     } else {
-      this.timeline = this.renderTimeline(buffer.duration)
+      this.renderTimeline(buffer.duration)
     }
     this.timeline.timeContext.offset = 0.5 * this.timeline.timeContext.visibleDuration;
 
     // time axis
     const timeAxis = new wavesUI.helpers.TimeAxisLayer({

         // 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();