refactor(legacy): remove unused waveform related code (#3003)
Co-authored-by: Thomas Göttgens <tgoettgens@mail.com> Co-authored-by: Kyle Robbertze <paddatrapper@users.noreply.github.com>
This commit is contained in:
Thomas Göttgens
GitHub
parent
a556b73d2a
commit
064c435b09
8 changed files with 62 additions and 1146 deletions
|
|
@ -1,449 +0,0 @@
|
|||
'use strict';
|
||||
|
||||
var WaveformDrawer = function() {
|
||||
|
||||
};
|
||||
|
||||
WaveformDrawer.prototype.init = function(container, config) {
|
||||
|
||||
makePublisher(this);
|
||||
|
||||
this.config = config;
|
||||
this.container = container;
|
||||
this.channels = []; //array of canvases, contexts, 1 for each channel displayed.
|
||||
|
||||
var theme = this.config.getUITheme();
|
||||
|
||||
if (this.loaderStates[theme] !== undefined) {
|
||||
this.loaderStates = this.loaderStates[theme];
|
||||
}
|
||||
else {
|
||||
this.loaderStates = this.loaderStates["default"];
|
||||
}
|
||||
};
|
||||
|
||||
WaveformDrawer.prototype.loaderStates = {
|
||||
"bootstrap": {
|
||||
"downloading": "progress progress-warning",
|
||||
"decoding": "progress progress-success progress-striped active",
|
||||
"loader": "bar"
|
||||
},
|
||||
|
||||
"jQueryUI": {
|
||||
"downloading": "ui-progressbar ui-widget ui-widget-content ui-corner-all",
|
||||
"decoding": "ui-progressbar ui-widget ui-widget-content ui-corner-all",
|
||||
"loader": "ui-progressbar-value ui-widget-header ui-corner-left"
|
||||
},
|
||||
|
||||
"default": {
|
||||
"downloading": "progress",
|
||||
"decoding": "decoding",
|
||||
"loader": "bar"
|
||||
}
|
||||
};
|
||||
|
||||
WaveformDrawer.prototype.getPeaks = function(buffer, cues) {
|
||||
|
||||
// Frames per pixel
|
||||
var res = this.config.getResolution(),
|
||||
peaks = [],
|
||||
i, c, p, l,
|
||||
chanLength = cues.cueout - cues.cuein,
|
||||
pixels = Math.ceil(chanLength / res),
|
||||
numChan = buffer.numberOfChannels,
|
||||
weight = 1 / (numChan),
|
||||
makeMono = this.config.isDisplayMono(),
|
||||
chan,
|
||||
start,
|
||||
end,
|
||||
vals,
|
||||
max,
|
||||
min,
|
||||
maxPeak = -Infinity; //used to scale the waveform on the canvas.
|
||||
|
||||
for (i = 0; i < pixels; i++) {
|
||||
|
||||
peaks[i] = [];
|
||||
|
||||
for (c = 0; c < numChan; c++) {
|
||||
|
||||
chan = buffer.getChannelData(c);
|
||||
chan = chan.subarray(cues.cuein, cues.cueout);
|
||||
|
||||
start = i * res;
|
||||
end = (i + 1) * res > chanLength ? chanLength : (i + 1) * res;
|
||||
vals = chan.subarray(start, end);
|
||||
max = -Infinity;
|
||||
min = Infinity;
|
||||
|
||||
for (p = 0, l = vals.length; p < l; p++) {
|
||||
if (vals[p] > max){
|
||||
max = vals[p];
|
||||
}
|
||||
if (vals[p] < min){
|
||||
min = vals[p];
|
||||
}
|
||||
}
|
||||
peaks[i].push({max:max, min:min});
|
||||
maxPeak = Math.max.apply(Math, [maxPeak, Math.abs(max), Math.abs(min)]);
|
||||
}
|
||||
|
||||
if (makeMono) {
|
||||
max = min = 0;
|
||||
|
||||
for (c = 0 ; c < numChan; c++) {
|
||||
max = max + weight * peaks[i][c].max;
|
||||
min = min + weight * peaks[i][c].min;
|
||||
}
|
||||
|
||||
peaks[i] = []; //need to clear out old stuff (maybe we should keep it for toggling views?).
|
||||
peaks[i].push({max:max, min:min});
|
||||
}
|
||||
}
|
||||
|
||||
this.maxPeak = maxPeak;
|
||||
this.peaks = peaks;
|
||||
};
|
||||
|
||||
WaveformDrawer.prototype.setTimeShift = function(pixels) {
|
||||
var i, len;
|
||||
|
||||
for (i = 0, len = this.channels.length; i < len; i++) {
|
||||
this.channels[i].div.style.left = pixels+"px";
|
||||
}
|
||||
};
|
||||
|
||||
WaveformDrawer.prototype.updateLoader = function(percent) {
|
||||
this.loader.style.width = percent+"%";
|
||||
};
|
||||
|
||||
WaveformDrawer.prototype.setLoaderState = function(state) {
|
||||
this.progressDiv.className = this.loaderStates[state];
|
||||
};
|
||||
|
||||
WaveformDrawer.prototype.drawLoading = function() {
|
||||
var div,
|
||||
loader;
|
||||
|
||||
this.height = this.config.getWaveHeight();
|
||||
|
||||
div = document.createElement("div");
|
||||
div.style.height = this.height+"px";
|
||||
|
||||
loader = document.createElement("div");
|
||||
loader.style.height = "10px";
|
||||
loader.className = this.loaderStates["loader"];
|
||||
|
||||
div.appendChild(loader);
|
||||
|
||||
this.progressDiv = div;
|
||||
this.loader = loader;
|
||||
|
||||
this.setLoaderState("downloading");
|
||||
this.updateLoader(0);
|
||||
|
||||
this.container.appendChild(div);
|
||||
};
|
||||
|
||||
WaveformDrawer.prototype.drawBuffer = function(buffer, pixelOffset, cues) {
|
||||
var canv,
|
||||
div,
|
||||
i,
|
||||
top = 0,
|
||||
left = 0,
|
||||
makeMono = this.config.isDisplayMono(),
|
||||
res = this.config.getResolution(),
|
||||
numChan = makeMono? 1 : buffer.numberOfChannels,
|
||||
numSamples = cues.cueout - cues.cuein + 1,
|
||||
fragment = document.createDocumentFragment(),
|
||||
wrapperHeight;
|
||||
|
||||
this.container.innerHTML = "";
|
||||
this.channels = [];
|
||||
|
||||
//width and height is per waveform canvas.
|
||||
this.width = Math.ceil(numSamples / res);
|
||||
this.height = this.config.getWaveHeight();
|
||||
|
||||
for (i = 0; i < numChan; i++) {
|
||||
|
||||
div = document.createElement("div");
|
||||
div.classList.add("channel");
|
||||
div.classList.add("channel-"+i);
|
||||
div.style.width = this.width+"px";
|
||||
div.style.height = this.height+"px";
|
||||
div.style.top = top+"px";
|
||||
div.style.left = left+"px";
|
||||
|
||||
canv = document.createElement("canvas");
|
||||
canv.setAttribute('width', this.width);
|
||||
canv.setAttribute('height', this.height);
|
||||
|
||||
this.channels.push({
|
||||
canvas: canv,
|
||||
context: canv.getContext('2d'),
|
||||
div: div
|
||||
});
|
||||
|
||||
div.appendChild(canv);
|
||||
fragment.appendChild(div);
|
||||
|
||||
top = top + this.height;
|
||||
}
|
||||
|
||||
wrapperHeight = numChan * this.height;
|
||||
this.container.style.height = wrapperHeight+"px";
|
||||
this.container.appendChild(fragment);
|
||||
|
||||
|
||||
this.getPeaks(buffer, cues);
|
||||
this.updateEditor();
|
||||
|
||||
this.setTimeShift(pixelOffset);
|
||||
};
|
||||
|
||||
WaveformDrawer.prototype.drawFrame = function(chanNum, index, peaks, maxPeak, cursorPos, pixelOffset) {
|
||||
var x, y, w, h, max, min,
|
||||
h2 = this.height / 2,
|
||||
cc = this.channels[chanNum].context,
|
||||
colors = this.config.getColorScheme();
|
||||
|
||||
max = (peaks.max / maxPeak) * h2;
|
||||
min = (peaks.min / maxPeak) * h2;
|
||||
|
||||
w = 1;
|
||||
x = index * w;
|
||||
y = Math.round(h2 - max);
|
||||
h = Math.ceil(max - min);
|
||||
|
||||
//to prevent blank space when there is basically silence in the track.
|
||||
h = h === 0 ? 1 : h;
|
||||
|
||||
if (cursorPos >= (x + pixelOffset)) {
|
||||
cc.fillStyle = colors.progressColor;
|
||||
}
|
||||
else {
|
||||
cc.fillStyle = colors.waveColor;
|
||||
}
|
||||
|
||||
cc.fillRect(x, y, w, h);
|
||||
};
|
||||
|
||||
/*
|
||||
start, end are optional parameters to only redraw part of the canvas.
|
||||
*/
|
||||
WaveformDrawer.prototype.draw = function(cursorPos, pixelOffset, start, end) {
|
||||
var that = this,
|
||||
peaks = this.peaks,
|
||||
i = (start) ? start - pixelOffset : 0,
|
||||
len = (end) ? end - pixelOffset + 1 : peaks.length;
|
||||
|
||||
if (i < 0 && len < 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (i < 0) {
|
||||
i = 0;
|
||||
}
|
||||
|
||||
if (len > peaks.length) {
|
||||
len = peaks.length;
|
||||
}
|
||||
|
||||
this.clear(i, len);
|
||||
|
||||
for (; i < len; i++) {
|
||||
|
||||
peaks[i].forEach(function(peak, chanNum) {
|
||||
that.drawFrame(chanNum, i, peak, that.maxPeak, cursorPos, pixelOffset);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/*
|
||||
If start/end are set clear only part of the canvas.
|
||||
*/
|
||||
WaveformDrawer.prototype.clear = function(start, end) {
|
||||
var i, len,
|
||||
width = end - start;
|
||||
|
||||
for (i = 0, len = this.channels.length; i < len; i++) {
|
||||
this.channels[i].context.clearRect(start, 0, width, this.height);
|
||||
}
|
||||
};
|
||||
|
||||
WaveformDrawer.prototype.updateEditor = function(cursorPos, pixelOffset, start, end, highlighted, selected) {
|
||||
var i, len,
|
||||
fragment = document.createDocumentFragment();
|
||||
|
||||
this.container.innerHTML = "";
|
||||
|
||||
this.draw(cursorPos, pixelOffset, start, end);
|
||||
|
||||
if (highlighted === true && selected !== undefined) {
|
||||
var border = (selected.end - selected.start === 0) ? true : false;
|
||||
this.drawHighlight(selected.start, selected.end, border);
|
||||
}
|
||||
|
||||
for (i = 0, len = this.channels.length; i < len; i++) {
|
||||
fragment.appendChild(this.channels[i].div);
|
||||
}
|
||||
|
||||
this.container.appendChild(fragment);
|
||||
};
|
||||
|
||||
/*
|
||||
start, end in pixels.
|
||||
*/
|
||||
WaveformDrawer.prototype.drawHighlight = function(start, end, isBorder) {
|
||||
var i, len,
|
||||
colors = this.config.getColorScheme(),
|
||||
fillStyle,
|
||||
ctx,
|
||||
width = end - start + 1;
|
||||
|
||||
fillStyle = (isBorder) ? colors.selectBorderColor : colors.selectBackgroundColor;
|
||||
|
||||
for (i = 0, len = this.channels.length; i < len; i++) {
|
||||
ctx = this.channels[i].context;
|
||||
ctx.fillStyle = fillStyle;
|
||||
ctx.fillRect(start, 0, width, this.height);
|
||||
}
|
||||
};
|
||||
|
||||
WaveformDrawer.prototype.sCurveFadeIn = function sCurveFadeIn(ctx, width) {
|
||||
return Curves.createSCurveBuffer(width, (Math.PI/2));
|
||||
};
|
||||
|
||||
WaveformDrawer.prototype.sCurveFadeOut = function sCurveFadeOut(ctx, width) {
|
||||
return Curves.createSCurveBuffer(width, -(Math.PI/2));
|
||||
};
|
||||
|
||||
WaveformDrawer.prototype.logarithmicFadeIn = function logarithmicFadeIn(ctx, width) {
|
||||
return Curves.createLogarithmicBuffer(width, 10, 1);
|
||||
};
|
||||
|
||||
WaveformDrawer.prototype.logarithmicFadeOut = function logarithmicFadeOut(ctx, width) {
|
||||
return Curves.createLogarithmicBuffer(width, 10, -1);
|
||||
};
|
||||
|
||||
WaveformDrawer.prototype.exponentialFadeIn = function exponentialFadeIn(ctx, width) {
|
||||
return Curves.createExponentialBuffer(width, 1);
|
||||
};
|
||||
|
||||
WaveformDrawer.prototype.exponentialFadeOut = function exponentialFadeOut(ctx, width) {
|
||||
return Curves.createExponentialBuffer(width, -1);
|
||||
};
|
||||
|
||||
WaveformDrawer.prototype.linearFadeIn = function linearFadeIn(ctx, width) {
|
||||
return Curves.createLinearBuffer(width, 1);
|
||||
};
|
||||
|
||||
WaveformDrawer.prototype.linearFadeOut = function linearFadeOut(ctx, width) {
|
||||
return Curves.createLinearBuffer(width, -1);
|
||||
};
|
||||
|
||||
WaveformDrawer.prototype.drawFadeCurve = function(ctx, shape, type, width) {
|
||||
var method = shape+type,
|
||||
fn = this[method],
|
||||
colors = this.config.getColorScheme(),
|
||||
curve,
|
||||
i, len,
|
||||
cHeight = this.height,
|
||||
y;
|
||||
|
||||
ctx.strokeStyle = colors.fadeColor;
|
||||
|
||||
curve = fn.call(this, ctx, width);
|
||||
|
||||
y = cHeight - curve[0] * cHeight;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(0, y);
|
||||
|
||||
for (i = 1, len = curve.length; i < len; i++) {
|
||||
y = cHeight - curve[i] * cHeight;
|
||||
ctx.lineTo(i, y);
|
||||
}
|
||||
ctx.stroke();
|
||||
};
|
||||
|
||||
WaveformDrawer.prototype.removeFade = function(id) {
|
||||
var fadeClass = "playlist-fade-"+id,
|
||||
el, els,
|
||||
i,len;
|
||||
|
||||
els = this.container.getElementsByClassName(fadeClass);
|
||||
len = els.length;
|
||||
|
||||
//DOM NodeList is live, use a decrementing counter.
|
||||
if (len > 0) {
|
||||
for (i = len-1; i >= 0; i--) {
|
||||
el = els[i];
|
||||
el.parentNode.removeChild(el);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
WaveformDrawer.prototype.drawFade = function(id, type, shape, start, end) {
|
||||
var div,
|
||||
canv,
|
||||
width,
|
||||
left,
|
||||
fragment = document.createDocumentFragment(),
|
||||
i, len,
|
||||
dup,
|
||||
ctx,
|
||||
tmpCtx;
|
||||
|
||||
if ((end - start) === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
width = ~~(end - start + 1);
|
||||
left = start;
|
||||
|
||||
div = document.createElement("div");
|
||||
div.classList.add("playlist-fade");
|
||||
div.classList.add("playlist-fade-"+id);
|
||||
div.style.width = width+"px";
|
||||
div.style.height = this.height+"px";
|
||||
div.style.top = 0;
|
||||
div.style.left = left+"px";
|
||||
|
||||
canv = document.createElement("canvas");
|
||||
canv.setAttribute('width', width);
|
||||
canv.setAttribute('height', this.height);
|
||||
ctx = canv.getContext('2d');
|
||||
|
||||
this.drawFadeCurve(ctx, shape, type, width);
|
||||
|
||||
div.appendChild(canv);
|
||||
fragment.appendChild(div);
|
||||
|
||||
for (i = 0, len = this.channels.length; i < len; i++) {
|
||||
dup = fragment.cloneNode(true);
|
||||
tmpCtx = dup.querySelector('canvas').getContext('2d');
|
||||
tmpCtx.drawImage(canv, 0, 0);
|
||||
|
||||
this.channels[i].div.appendChild(dup);
|
||||
}
|
||||
};
|
||||
|
||||
WaveformDrawer.prototype.drawFades = function(fades) {
|
||||
var id,
|
||||
fade,
|
||||
startPix,
|
||||
endPix,
|
||||
SR = this.config.getSampleRate(),
|
||||
res = this.config.getResolution();
|
||||
|
||||
for (id in fades) {
|
||||
fade = fades[id];
|
||||
|
||||
if (fades.hasOwnProperty(id)) {
|
||||
startPix = fade.start * SR / res;
|
||||
endPix = fade.end * SR / res;
|
||||
this.drawFade(id, fade.type, fade.shape, startPix, endPix);
|
||||
}
|
||||
}
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue