dev@10: import {
dev@10:   Component, OnInit, ViewChild, ElementRef,
dev@16:   AfterViewInit, OnChanges, SimpleChanges, Input
dev@10: } from '@angular/core';
dev@8: 
dev@16: declare var wavesUI: any; // TODO non-global app scope import
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@16: export class WaveformComponent implements OnInit, AfterViewInit, OnChanges {
dev@8:   @ViewChild('track') trackDiv: ElementRef;
dev@6: 
dev@16:   private _audioBuffer: AudioBuffer = undefined;
dev@16: 
dev@16:   @Input()
dev@16:   set audioBuffer(buffer: AudioBuffer) {
dev@16:     console.log("setter");
dev@16:     this._audioBuffer = buffer || undefined;
dev@16:   }
dev@16: 
dev@16:   get audioBuffer(): AudioBuffer {
dev@16:     return this._audioBuffer;
dev@16:   }
dev@16: 
dev@16: 
dev@16: 
dev@16:   private timeline: any; // TODO what type is it?
dev@16: 
dev@6:   constructor() {
dev@6:   }
dev@6: 
dev@10:   ngOnInit() {}
dev@10: 
dev@10:   ngAfterViewInit(): void {
dev@16:     // const track: HTMLElement = this.trackDiv.nativeElement;
dev@16:     // const duration: number = 1.0;
dev@16:     // const height: number = track.getBoundingClientRect().height;
dev@16:     // const width: number = track.getBoundingClientRect().width;
dev@16:     // const pixelsPerSecond = width / duration;
dev@16:     // const timeline = new wavesUI.core.Timeline(pixelsPerSecond, width);
dev@16:     // timeline.createTrack(track, height, 'main');
dev@16:     //
dev@16:     // // time axis
dev@16:     // const timeAxis = new wavesUI.helpers.TimeAxisLayer({
dev@16:     //   height: height,
dev@16:     //   top: 10,
dev@16:     //   color: 'gray'
dev@16:     // });
dev@16:     //
dev@16:     // timeline.addLayer(timeAxis, 'main', 'default', true);
dev@16:     // timeline.state = new wavesUI.states.CenteredZoomState(timeline);
dev@16:   }
dev@16: 
dev@16:   ngOnChanges(changes: SimpleChanges): void {
dev@16:     console.log("ng changes");
dev@16:     if (changes.hasOwnProperty("audioBuffer")) { // why wouldn't it?
dev@16:       if (changes["audioBuffer"].currentValue)
dev@16:         this.renderWaveform(changes["audioBuffer"].currentValue);
dev@16:     }
dev@16:   }
dev@16: 
dev@16:   renderWaveform(buffer: AudioBuffer) {
dev@16:     // TODO reduce dupe from original timeline state, anyway to actually not instantiate new timeline?
dev@16:     console.log("render wave");
dev@10:     const track: HTMLElement = this.trackDiv.nativeElement;
dev@16:     const duration: number = buffer.duration;
dev@10:     const height: number = track.getBoundingClientRect().height;
dev@10:     const width: number = track.getBoundingClientRect().width;
dev@10:     const pixelsPerSecond = width / duration;
dev@16:     const timeline = new wavesUI.core.Timeline(pixelsPerSecond, width);
dev@10:     timeline.createTrack(track, height, 'main');
dev@16: 
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@16: 
dev@10:     timeline.addLayer(timeAxis, 'main', 'default', true);
dev@10:     timeline.state = new wavesUI.states.CenteredZoomState(timeline);
dev@16:     // TODO dispose of the existing layer?
dev@16:     const waveformLayer = new wavesUI.helpers.WaveformLayer(buffer, {
dev@16:       height: 600,
dev@16:       color: 'darkblue'
dev@16:     });
dev@16:     timeline.addLayer(waveformLayer, 'main');
dev@6:   }
dev@16: 
dev@6: }