dev@347: import {
dev@347:   Component,
dev@354:   Input,
dev@354:   ChangeDetectorRef,
dev@347:   ElementRef,
dev@354:   ViewChild
dev@347: } from '@angular/core';
dev@347: import wavesUI from 'waves-ui-piper';
dev@354: import {WavesComponent} from '../waves-base.component';
dev@347: 
dev@347: 
dev@347: @Component({
dev@347:   selector: 'ugly-waveform',
dev@355:   templateUrl: '../waves-template.html',
dev@355:   styleUrls: ['../waves-template.css']
dev@347: })
dev@354: export class WaveformComponent extends WavesComponent {
dev@347:   @ViewChild('track') trackDiv: ElementRef;
dev@347:   @Input() set audioBuffer(buffer: AudioBuffer) {
dev@347:     this._audioBuffer = buffer || undefined;
dev@347:     if (this.audioBuffer) {
dev@347:       this.renderWaveform(this.audioBuffer);
dev@347:     }
dev@347:   }
dev@347: 
dev@347:   get audioBuffer(): AudioBuffer {
dev@347:     return this._audioBuffer;
dev@347:   }
dev@347: 
dev@347:   private _audioBuffer: AudioBuffer;
dev@347: 
dev@347:   constructor(private ref: ChangeDetectorRef) {
dev@354:     super();
dev@347:   }
dev@347: 
dev@347:   renderWaveform(buffer: AudioBuffer): void {
dev@347:     const height = this.trackDiv.nativeElement.getBoundingClientRect().height;
dev@347:     if (this.timeline && this.waveTrack) {
dev@347:       // resize
dev@347:       const width = this.trackDiv.nativeElement.getBoundingClientRect().width;
dev@347: 
dev@347:       this.clearTimeline();
dev@347:       this.timeline.visibleWidth = width;
dev@347:       this.timeline.pixelsPerSecond = width / buffer.duration;
dev@347:       this.waveTrack.height = height;
dev@347:     } else {
dev@354:       this.renderTimeline(this.trackDiv, buffer.duration);
dev@347:     }
dev@347:     this.timeline.timeContext.offset = 0.5 * this.timeline.timeContext.visibleDuration;
dev@347: 
dev@347:     // time axis
dev@347:     const timeAxis = new wavesUI.helpers.TimeAxisLayer({
dev@347:       height: height,
dev@347:       color: '#b0b0b0'
dev@347:     });
dev@347:     this.addLayer(timeAxis, this.waveTrack, this.timeline.timeContext, true);
dev@347: 
dev@347:     const nchannels = buffer.numberOfChannels;
dev@347:     const totalWaveHeight = height * 0.9;
dev@347:     const waveHeight = totalWaveHeight / nchannels;
dev@347: 
dev@347:     for (let ch = 0; ch < nchannels; ++ch) {
dev@347:       const waveformLayer = new wavesUI.helpers.WaveformLayer(buffer, {
dev@347:         top: (height - totalWaveHeight) / 2 + waveHeight * ch,
dev@347:         height: waveHeight,
dev@347:         color: '#0868ac',
dev@347:         channel: ch
dev@347:       });
dev@347:       this.addLayer(waveformLayer, this.waveTrack, this.timeline.timeContext);
dev@347:     }
dev@347: 
dev@347:     this.timeline.state = new wavesUI.states.CenteredZoomState(this.timeline);
dev@347:     this.waveTrack.render();
dev@347:     this.waveTrack.update();
dev@347:     this.ref.markForCheck();
dev@347:   }
dev@347: }