91 lines
2.6 KiB
JavaScript
91 lines
2.6 KiB
JavaScript
import Ember from 'ember';
|
|
|
|
const { Mixin, observer, $ } = Ember;
|
|
|
|
export default Mixin.create({
|
|
currentVisName: 'None',
|
|
|
|
visNames: ['None', 'Bars', 'Wave'],
|
|
|
|
onCurrentVisNameChange: observer('currentVisName', function() {
|
|
let currentVisName = this.get('currentVisName');
|
|
|
|
if (currentVisName === 'None') {
|
|
let canvasEl = $('#visualization')[0],
|
|
ctx = canvasEl.getContext('2d');
|
|
|
|
ctx.clearRect(0, 0, canvasEl.width, canvasEl.height);
|
|
}
|
|
|
|
this.get('storage').set('huegasm.currentVisName', currentVisName);
|
|
}),
|
|
|
|
didInsertElement() {
|
|
let dancer = this.get('dancer'),
|
|
canvas = $('#visualization')[0],
|
|
playerArea = $('#player-area'),
|
|
ctx = canvas.getContext('2d'),
|
|
spacing = 2,
|
|
h = playerArea.height(),
|
|
w;
|
|
|
|
canvas.height = h;
|
|
|
|
// must be done to preserver resolution so that things don't appear blurry
|
|
// note that the height is set to 400px via css so it doesn't need to be recalculated
|
|
let syncCanvasHeight = () => {
|
|
w = playerArea.width();
|
|
canvas.width = w;
|
|
};
|
|
|
|
syncCanvasHeight();
|
|
|
|
$(window).on('resize', syncCanvasHeight);
|
|
|
|
dancer.bind('update', () => {
|
|
let currentVisName = this.get('currentVisName'),
|
|
gradient = ctx.createLinearGradient(0, 0, 0, h),
|
|
pageHidden = document.hidden || document.msHidden || document.webkitHidden || document.mozHidden;
|
|
|
|
// dont do anything if the page is hidden or no visualization
|
|
if (currentVisName === 'None' || pageHidden || !this.get('active')) {
|
|
return;
|
|
}
|
|
|
|
ctx.clearRect(0, 0, w, h);
|
|
|
|
if (currentVisName === 'Wave') {
|
|
let width = 3,
|
|
count = 1024;
|
|
|
|
gradient.addColorStop(0.6, 'white');
|
|
gradient.addColorStop(0, '#0036FA');
|
|
|
|
ctx.lineWidth = 1;
|
|
ctx.strokeStyle = gradient;
|
|
let waveform = dancer.getWaveform();
|
|
|
|
ctx.beginPath();
|
|
ctx.moveTo(0, h / 2);
|
|
for (let i = 0, l = waveform.length; i < l && i < count; i++) {
|
|
ctx.lineTo(i * (spacing + width), h / 2 + waveform[i] * (h / 2));
|
|
}
|
|
ctx.stroke();
|
|
ctx.closePath();
|
|
} else if (currentVisName === 'Bars') {
|
|
let width = 4,
|
|
count = 128;
|
|
|
|
gradient.addColorStop(1, '#0f0');
|
|
gradient.addColorStop(0.6, '#ff0');
|
|
gradient.addColorStop(0.2, '#F12B24');
|
|
|
|
ctx.fillStyle = gradient;
|
|
let spectrum = dancer.getSpectrum();
|
|
for (let i = 0, l = spectrum.length; i < l && i < count; i++) {
|
|
ctx.fillRect(i * (spacing + width), h, width, -spectrum[i] * h - 60);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
});
|