view src/app/visualisations/waveform/waveform.component.ts @ 509:041468f553e1 tip master

Merge pull request #57 from LucasThompson/fix/session-stack-max-call-stack Fix accidental recursion in PersistentStack
author Lucas Thompson <LucasThompson@users.noreply.github.com>
date Mon, 27 Nov 2017 11:04:30 +0000
parents 64ed45a0bad3
children
line wrap: on
line source
import {
  Component,
  Input,
  ChangeDetectionStrategy
} from '@angular/core';
import wavesUI from 'waves-ui-piper';
import {PlayheadRenderer, WavesComponent} from '../waves-base.component';


@Component({
  selector: 'ugly-waveform',
  templateUrl: '../waves-template.html',
  styleUrls: ['../waves-template.css'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  providers: [
    {provide: PlayheadRenderer, useExisting: WaveformComponent },
    {provide: WavesComponent, useExisting: WaveformComponent}
  ]
})
export class WaveformComponent extends WavesComponent<AudioBuffer> {
  @Input() set audioBuffer(buffer: AudioBuffer) {
    this.duration = buffer.duration;
    this.timeline.pixelsPerSecond = this.timeline.visibleWidth / buffer.duration;
    this.feature = buffer;
  }

  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
        })
      );
    }
    return channelLayers;
  }
}