add time markers in player

This commit is contained in:
ed 2021-03-21 03:21:05 +01:00
parent b18a07ae6b
commit 6b3295059e
2 changed files with 22 additions and 0 deletions

View file

@ -188,10 +188,31 @@ var pbar = (function () {
pctx.setTransform(scale, 0, 0, scale, 0, 0); pctx.setTransform(scale, 0, 0, scale, 0, 0);
pctx.clearRect(0, 0, sw, sh); pctx.clearRect(0, 0, sw, sh);
pctx.fillStyle = 'rgba(204,255,128,0.15)';
for (var p = 1, mins = mp.au.duration / 10; p <= mins; p++)
pctx.fillRect(Math.floor(sm * p * 10), 0, 2, sh);
pctx.fillStyle = '#9b7';
pctx.fillStyle = 'rgba(192,255,96,0.5)';
for (var p = 1, mins = mp.au.duration / 60; p <= mins; p++)
pctx.fillRect(Math.floor(sm * p * 60), 0, 2, sh);
var w = 8; var w = 8;
var x = sm * mp.au.currentTime; var x = sm * mp.au.currentTime;
pctx.fillStyle = '#573'; pctx.fillRect((x - w / 2) - 1, 0, w + 2, sh); pctx.fillStyle = '#573'; pctx.fillRect((x - w / 2) - 1, 0, w + 2, sh);
pctx.fillStyle = '#dfc'; pctx.fillRect((x - w / 2), 0, 8, sh); pctx.fillStyle = '#dfc'; pctx.fillRect((x - w / 2), 0, 8, sh);
pctx.fillStyle = '#fff';
pctx.font = '1em sans-serif';
var txt = s2ms(mp.au.duration);
var tw = pctx.measureText(txt).width;
pctx.fillText(txt, sw - (tw + 8), sh / 3 * 2);
txt = s2ms(mp.au.currentTime);
tw = pctx.measureText(txt).width;
var gw = pctx.measureText("88:88::").width;
var xt = x < sw / 2 ? (x + 8) : (Math.min(sw - gw, x - 8) - tw);
pctx.fillText(txt, xt, sh / 3 * 2);
}; };
return r; return r;
})(); })();

View file

@ -317,6 +317,7 @@ function unix2iso(ts) {
function s2ms(s) { function s2ms(s) {
s = Math.floor(s);
var m = Math.floor(s / 60); var m = Math.floor(s / 60);
return m + ":" + ("0" + (s - m * 60)).slice(-2); return m + ":" + ("0" + (s - m * 60)).slice(-2);
} }