comparison src/app/waveform/waveform.component.ts @ 10:0b24b8ae62f8

Get some wave-ui layers rendering inside the waveform component, a real shame about the global scope of the waves-ui library currently.

-import {Component, OnInit, ViewChild, ElementRef} from '@angular/core';
+import {
+  Component, OnInit, ViewChild, ElementRef,
+  AfterViewInit
+} from '@angular/core';
 
 declare var wavesUI: any;
 
 @Component({
   selector: 'app-waveform',
   templateUrl: './waveform.component.html',
   styleUrls: ['./waveform.component.css']
 })
-export class WaveformComponent implements OnInit {
+export class WaveformComponent implements OnInit, AfterViewInit {
   @ViewChild('track') trackDiv: ElementRef;
 
   constructor() {
     console.log(wavesUI.core);
   }
 
-  ngOnInit() {
-    console.log(this.trackDiv.nativeElement.getBoundingClientRect().width);
+  ngOnInit() {}
+
+  ngAfterViewInit(): void {
+    const track: HTMLElement = this.trackDiv.nativeElement;
+    const duration: number = 1.0;
+    const height: number = track.getBoundingClientRect().height;
+    const width: number = track.getBoundingClientRect().width;
+    const pixelsPerSecond = width / duration;
+    const timeline: any = new wavesUI.core.Timeline(pixelsPerSecond, width);
+    timeline.createTrack(track, height, 'main');
+    // time axis
+    const timeAxis = new wavesUI.helpers.TimeAxisLayer({
+      height: height,
+      top: 10,
+      color: 'gray'
+    });
+    timeline.addLayer(timeAxis, 'main', 'default', true);
+    timeline.state = new wavesUI.states.CenteredZoomState(timeline);
   }
 }