annotate 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 |
|
rev |
line source |
dev@347
|
1 import {
|
dev@347
|
2 Component,
|
dev@354
|
3 Input,
|
dev@357
|
4 ChangeDetectionStrategy
|
dev@347
|
5 } from '@angular/core';
|
dev@347
|
6 import wavesUI from 'waves-ui-piper';
|
dev@488
|
7 import {PlayheadRenderer, WavesComponent} from '../waves-base.component';
|
dev@347
|
8
|
dev@347
|
9
|
dev@347
|
10 @Component({
|
dev@347
|
11 selector: 'ugly-waveform',
|
dev@355
|
12 templateUrl: '../waves-template.html',
|
dev@357
|
13 styleUrls: ['../waves-template.css'],
|
dev@405
|
14 changeDetection: ChangeDetectionStrategy.OnPush,
|
dev@405
|
15 providers: [
|
dev@488
|
16 {provide: PlayheadRenderer, useExisting: WaveformComponent },
|
dev@405
|
17 {provide: WavesComponent, useExisting: WaveformComponent}
|
dev@405
|
18 ]
|
dev@347
|
19 })
|
dev@383
|
20 export class WaveformComponent extends WavesComponent<AudioBuffer> {
|
dev@347
|
21 @Input() set audioBuffer(buffer: AudioBuffer) {
|
dev@414
|
22 this.duration = buffer.duration;
|
dev@383
|
23 this.timeline.pixelsPerSecond = this.timeline.visibleWidth / buffer.duration;
|
dev@383
|
24 this.feature = buffer;
|
dev@347
|
25 }
|
dev@347
|
26
|
dev@383
|
27 protected get featureLayers(): Layer[] {
|
dev@383
|
28 const nChannels = this.feature.numberOfChannels;
|
dev@383
|
29 const totalWaveHeight = this.height * 0.9;
|
dev@383
|
30 const waveHeight = totalWaveHeight / nChannels;
|
dev@383
|
31
|
dev@383
|
32 const channelLayers: Layer[] = [];
|
dev@383
|
33 for (let ch = 0; ch < nChannels; ++ch) {
|
dev@383
|
34 channelLayers.push(new wavesUI.helpers.WaveformLayer(this.feature, {
|
dev@383
|
35 top: (this.height - totalWaveHeight) / 2 + waveHeight * ch,
|
dev@383
|
36 height: waveHeight,
|
dev@383
|
37 color: this.colour,
|
dev@383
|
38 channel: ch
|
dev@383
|
39 })
|
dev@383
|
40 );
|
dev@347
|
41 }
|
dev@383
|
42 return channelLayers;
|
dev@347
|
43 }
|
dev@347
|
44 }
|