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