diff src/app/visualisations/waveform/waveform.component.ts @ 383:1241ca979fd9

Refactor based on pattern which emerged when implementing multiple components. Still some very obvious dupe regarding the ElementRef stuff, I don't think ViewChild decorated props are inherited.. but I haven't actually verified that.

--- a/src/app/visualisations/waveform/waveform.component.ts	Wed May 31 17:33:23 2017 +0100
+++ b/src/app/visualisations/waveform/waveform.component.ts	Wed May 31 19:14:46 2017 +0100
@@ -1,7 +1,6 @@
 import {
   Component,
   Input,
-  ChangeDetectorRef,
   ElementRef,
   ViewChild,
   ChangeDetectionStrategy
@@ -16,54 +15,38 @@
   styleUrls: ['../waves-template.css'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class WaveformComponent extends WavesComponent {
+export class WaveformComponent extends WavesComponent<AudioBuffer> {
+
   @ViewChild('track') trackDiv: ElementRef;
   @Input() set audioBuffer(buffer: AudioBuffer) {
-    this._audioBuffer = buffer || undefined;
-    if (this.audioBuffer) {
-      this.renderWaveform(this.audioBuffer);
-    }
+    this.duration = buffer.duration;
+    this.timeline.pixelsPerSecond = this.timeline.visibleWidth / buffer.duration;
+    this.feature = buffer;
   }
 
-  get audioBuffer(): AudioBuffer {
-    return this._audioBuffer;
+  protected get containerHeight(): number {
+    return this.trackDiv.nativeElement.getBoundingClientRect().height;
   }
 
-  private _audioBuffer: AudioBuffer;
-
-  constructor(private ref: ChangeDetectorRef) {
-    super();
+  protected get trackContainer(): ElementRef {
+    return this.trackDiv;
   }
 
-  renderWaveform(buffer: AudioBuffer): void {
-    const height = this.trackDiv.nativeElement.getBoundingClientRect().height;
-    if (this.timeline && this.waveTrack) {
-      // resize
-      const width = this.trackDiv.nativeElement.getBoundingClientRect().width;
-      this.clearTimeline(this.trackDiv);
-      this.timeline.visibleWidth = width;
-      this.timeline.pixelsPerSecond = width / buffer.duration;
-      this.waveTrack.height = height;
-    } else {
-      this.renderTimeline(this.trackDiv, buffer.duration);
+  protected get featureLayers(): Layer[] {
+    const nChannels = this.feature.numberOfChannels;
+    const totalWaveHeight = this.height * 0.9;
+    const waveHeight = totalWaveHeight / nChannels;
+
+    const channelLayers: Layer[] = [];
+    for (let ch = 0; ch < nChannels; ++ch) {
+      channelLayers.push(new wavesUI.helpers.WaveformLayer(this.feature, {
+          top: (this.height - totalWaveHeight) / 2 + waveHeight * ch,
+          height: waveHeight,
+          color: this.colour,
+          channel: ch
+        })
+      );
     }
-
-    const nchannels = buffer.numberOfChannels;
-    const totalWaveHeight = height * 0.9;
-    const waveHeight = totalWaveHeight / nchannels;
-
-    for (let ch = 0; ch < nchannels; ++ch) {
-      const waveformLayer = new wavesUI.helpers.WaveformLayer(buffer, {
-        top: (height - totalWaveHeight) / 2 + waveHeight * ch,
-        height: waveHeight,
-        color: this.colour,
-        channel: ch
-      });
-      this.addLayer(waveformLayer, this.waveTrack, this.timeline.timeContext);
-    }
-
-    this.waveTrack.render();
-    this.waveTrack.update();
-    this.ref.markForCheck();
+    return channelLayers;
   }
 }