170 lines
3.9 KiB
JavaScript
170 lines
3.9 KiB
JavaScript
'use strict';
|
|
|
|
var TimeScale = function() {
|
|
|
|
};
|
|
|
|
TimeScale.prototype.init = function(config) {
|
|
|
|
var that = this,
|
|
canv,
|
|
div,
|
|
resizeTimer;
|
|
|
|
makePublisher(this);
|
|
|
|
div = document.getElementsByClassName("playlist-time-scale")[0];
|
|
|
|
if (div === undefined) {
|
|
return;
|
|
}
|
|
|
|
canv = document.createElement("canvas");
|
|
this.canv = canv;
|
|
this.context = canv.getContext('2d');
|
|
this.config = config;
|
|
this.container = div; //container for the main time scale.
|
|
|
|
//TODO check for window resizes to set these.
|
|
this.width = this.container.clientWidth;
|
|
this.height = this.container.clientHeight;
|
|
|
|
canv.setAttribute('width', this.width);
|
|
canv.setAttribute('height', this.height);
|
|
|
|
//array of divs displaying time every 30 seconds. (TODO should make this depend on resolution)
|
|
this.times = [];
|
|
|
|
this.prevScrollPos = 0; //checking the horizontal scroll (must update timeline above in case of change)
|
|
|
|
//TODO check scroll adjust.
|
|
function doneResizing() {
|
|
that.width = that.container.clientWidth;
|
|
that.height = that.container.clientHeight;
|
|
|
|
canv.setAttribute('width', that.width);
|
|
canv.setAttribute('height', that.height);
|
|
|
|
that.drawScale();
|
|
};
|
|
|
|
function onResize() {
|
|
clearTimeout(resizeTimer);
|
|
resizeTimer = setTimeout(doneResizing, 100);
|
|
};
|
|
|
|
TimeScale.prototype.onResize = onResize;
|
|
|
|
this.drawScale();
|
|
};
|
|
|
|
/*
|
|
Return time in format mm:ss
|
|
*/
|
|
TimeScale.prototype.formatTime = function(seconds) {
|
|
var out, m, s;
|
|
|
|
s = seconds % 60;
|
|
m = (seconds - s) / 60;
|
|
|
|
if (s < 10) {
|
|
s = "0"+s;
|
|
}
|
|
|
|
out = m + ":" + s;
|
|
|
|
return out;
|
|
};
|
|
|
|
TimeScale.prototype.clear = function() {
|
|
|
|
this.container.innerHTML = "";
|
|
this.context.clearRect(0, 0, this.width, this.height);
|
|
};
|
|
|
|
TimeScale.prototype.drawScale = function(offset) {
|
|
var cc = this.context,
|
|
canv = this.canv,
|
|
colors = this.config.getColorScheme(),
|
|
pix,
|
|
res = this.config.getResolution(),
|
|
SR = this.config.getSampleRate(),
|
|
pixPerSec = SR/res,
|
|
pixOffset = offset || 0, //caused by scrolling horizontally
|
|
i,
|
|
end,
|
|
counter = 0,
|
|
pixIndex,
|
|
container = this.container,
|
|
width = this.width,
|
|
height = this.height,
|
|
div,
|
|
time,
|
|
sTime,
|
|
fragment = document.createDocumentFragment(),
|
|
scaleY,
|
|
scaleHeight;
|
|
|
|
|
|
this.clear();
|
|
|
|
fragment.appendChild(canv);
|
|
cc.fillStyle = colors.timeColor;
|
|
end = width + pixOffset;
|
|
|
|
for (i = 0; i < end; i = i + pixPerSec) {
|
|
|
|
pixIndex = ~~(i);
|
|
pix = pixIndex - pixOffset;
|
|
|
|
if (pixIndex >= pixOffset) {
|
|
|
|
//put a timestamp every 30 seconds.
|
|
if (counter % 30 === 0) {
|
|
|
|
sTime = this.formatTime(counter);
|
|
time = document.createTextNode(sTime);
|
|
div = document.createElement("div");
|
|
|
|
div.style.left = pix+"px";
|
|
div.appendChild(time);
|
|
fragment.appendChild(div);
|
|
|
|
scaleHeight = 10;
|
|
scaleY = height - scaleHeight;
|
|
}
|
|
else if (counter % 5 === 0) {
|
|
scaleHeight = 5;
|
|
scaleY = height - scaleHeight;
|
|
}
|
|
else {
|
|
scaleHeight = 2;
|
|
scaleY = height - scaleHeight;
|
|
}
|
|
|
|
cc.fillRect(pix, scaleY, 1, scaleHeight);
|
|
}
|
|
|
|
counter++;
|
|
}
|
|
|
|
container.appendChild(fragment);
|
|
};
|
|
|
|
TimeScale.prototype.onTrackScroll = function() {
|
|
var scroll = this.config.getTrackScroll(),
|
|
scrollX = scroll.left;
|
|
|
|
if (scrollX !== this.prevScrollPos) {
|
|
this.prevScrollPos = scrollX;
|
|
this.drawScale(scrollX);
|
|
}
|
|
};
|
|
|
|
TimeScale.prototype.onResolutionChange = function() {
|
|
var scroll = this.config.getTrackScroll(),
|
|
scrollX = scroll.left;
|
|
|
|
this.drawScale(scrollX);
|
|
};
|