${info}
` : '') + @@ -2159,11 +2160,50 @@ function glossy_grad(can, h, s, l) { p = [0, 0.49, 0.50, 1]; for (var a = 0; a < p.length; a++) - g.addColorStop(p[a], 'hsl(' + h + ',' + s[a] + '%,' + l[a] + '%)'); + g.addColorStop(p[a], 'hsl(' + h + ',' + (Array.isArray(s) ? s[a] : s) + '%,' + (Array.isArray(l) ? l[a] : l) + '%)'); return g; } +function hexToRgb(hex){ + var long = hex.length >= 6; + var _r = long ? hex.substr(1,2) : hex.substr(1,1) + var _g = long ? hex.substr(3,2) : hex.substr(2,1) + var _b = long ? hex.substr(5,2) : hex.substr(3,1) + + if(!long){ + _r += _r; + _g += _g; + _b += _b; + } + + return [ + parseInt(_r, 16), + parseInt(_g, 16), + parseInt(_b, 16) + ]; +} +function rgbToHsl(r, g, b){ + r /= 255, g /= 255, b /= 255; + var max = Math.max(r, g, b), min = Math.min(r, g, b); + var h, s, l = (max + min) / 2; + + if(max == min){ + h = s = 0; // achromatic + }else{ + var d = max - min; + s = l > 0.5 ? d / (2 - max - min) : d / (max + min); + h = Math.atan2(Math.sqrt(3) * (g - b), 2 * r - g - b) + switch(max){ + case r: h = (g - b) / d + (g < b ? 6 : 0); break; + case g: h = (b - r) / d + 2; break; + case b: h = (r - g) / d + 4; break; + } + h /= 6; + } + + return [h, s, l]; +} // buffer/position bar var pbar = (function () { @@ -2256,11 +2296,20 @@ var pbar = (function () { dz = themen == 'dz', dy = themen == 'dy'; + var accentRgb = hexToRgb(getComputedStyle(document.body).getPropertyValue('--a')); + var accentHsl = rgbToHsl(accentRgb[0], accentRgb[1], accentRgb[2]); + accentHsl[0] *= 360; + accentHsl[1] *= 100; + accentHsl[2] *= 100; + if (gradh != gk) { gradh = gk; - grad = glossy_grad(bc, dz ? 120 : 85, - dy ? [0, 0, 0, 0] : [35, 40, 37, 35], - dy ? [20, 24, 22, 20] : light ? [45, 56, 50, 45] : [42, 51, 47, 42]); + var l = accentHsl[2] + var lArr = [l*.7, l, l*.9, l*.7] + grad = glossy_grad(bc, + accentHsl[0], + accentHsl[1], + lArr); } bctx.fillStyle = grad; for (var a = 0; a < mp.au.buffered.length; a++) { @@ -2277,20 +2326,22 @@ var pbar = (function () { bctx.globalAlpha = 1; } - var step = sm > 1 ? 1 : sm > 0.4 ? 3 : sm > 0.05 ? 30 : 720; - bctx.fillStyle = light && !dy ? 'rgba(0,64,0,0.15)' : 'rgba(204,255,128,0.15)'; - for (var p = step, mins = adur / 10; p <= mins; p += step) - bctx.fillRect(Math.floor(sm * p * 10), 0, 2, pc.h); + if(false){ + var step = sm > 1 ? 1 : sm > 0.4 ? 3 : sm > 0.05 ? 30 : 720; + bctx.fillStyle = light && !dy ? 'rgba(0,0,0,0.15)' : 'rgba(255, 255, 255, 0.15)'; + for (var p = step, mins = adur / 10; p <= mins; p += step) + bctx.fillRect(Math.floor(sm * p * 10), 0, 2, pc.h); - step = sm > 0.15 ? 1 : sm > 0.05 ? 10 : 360; - bctx.fillStyle = light && !dy ? 'rgba(0,64,0,0.5)' : 'rgba(192,255,96,0.5)'; - for (var p = step, mins = adur / 60; p <= mins; p += step) - bctx.fillRect(Math.floor(sm * p * 60), 0, 2, pc.h); + step = sm > 0.15 ? 1 : sm > 0.05 ? 10 : 360; + bctx.fillStyle = light && !dy ? 'rgba(0, 0, 0, 0.5)' : 'rgba(255, 255, 255, 0.5)'; + for (var p = step, mins = adur / 60; p <= mins; p += step) + bctx.fillRect(Math.floor(sm * p * 60), 0, 2, pc.h); - step = sm > 0.33 ? 1 : sm > 0.15 ? 5 : sm > 0.05 ? 10 : sm > 0.01 ? 60 : 720; - bctx.fillStyle = dz ? '#0f0' : dy ? '#999' : light ? 'rgba(0,64,0,0.9)' : 'rgba(192,255,96,1)'; - for (var p = step, mins = adur / 60; p <= mins; p += step) { - bctx.fillText(p, Math.floor(sm * p * 60 + 3), pc.h / 3); + step = sm > 0.33 ? 1 : sm > 0.15 ? 5 : sm > 0.05 ? 10 : sm > 0.01 ? 60 : 720; + bctx.fillStyle = dz ? '#0f0' : dy ? '#999' : light ? 'rgba(0, 0, 0, 0.9)' : 'rgb(255, 255, 255)'; + for (var p = step, mins = adur / 60; p <= mins; p += step) { + bctx.fillText(p, Math.floor(sm * p * 60 + 3), pc.h / 3); + } } step = sm > 0.2 ? 10 : sm > 0.1 ? 30 : sm > 0.01 ? 60 : sm > 0.005 ? 720 : 1440; @@ -2303,7 +2354,7 @@ var pbar = (function () { var bc = r.buf, pc = r.pos, pctx = pc.ctx, - w = 8, + w = 2, apos, adur; if (t_redraw) { @@ -2359,8 +2410,8 @@ var pbar = (function () { if (!widget.is_open) return; - pctx.fillStyle = '#573'; pctx.fillRect((x - w / 2) - 1, 0, w + 2, pc.h); - pctx.fillStyle = '#dfc'; pctx.fillRect((x - w / 2), 0, w, pc.h); + pctx.fillStyle = '#bbb'; pctx.fillRect((x - w / 2) - 1, 0, w + 2, pc.h); + pctx.fillStyle = '#fff'; pctx.fillRect((x - w / 2), 0, w, pc.h); pctx.lineWidth = 2.5; pctx.fillStyle = '#fff'; @@ -2368,7 +2419,7 @@ var pbar = (function () { var m1 = pctx.measureText(t1), m1b = pctx.measureText(t1 + ":88"), m2 = pctx.measureText(t2), - yt = pc.h * 0.94, + yt = pc.h * 0.65, xt1 = pc.w - (m1.width + 12), xt2 = x < m1.width * 1.4 ? (x + 12) : (Math.min(pc.w - m1b.width, x - 12) - m2.width); @@ -2418,31 +2469,41 @@ var vbar = (function () { dz = themen == 'dz', dy = themen == 'dy'; + var accentRgb = hexToRgb(getComputedStyle(document.body).getPropertyValue('--a')); + var accentHsl = rgbToHsl(accentRgb[0], accentRgb[1], accentRgb[2]); + accentHsl[0] *= 360; + accentHsl[1] *= 100; + accentHsl[2] *= 100; + if (gradh != gh) { gradh = gh; - grad1 = glossy_grad(r.can, dz ? 120 : 50, - dy ? [0, 0, 0, 0] : light ? [50, 55, 52, 48] : [45, 52, 47, 43], - dy ? [20, 24, 22, 20] : light ? [54, 60, 52, 47] : [42, 51, 47, 42]); - grad2 = glossy_grad(r.can, dz ? 120 : 205, - dz ? [100, 100, 100, 100] : dy ? [0, 0, 0, 0] : [10, 15, 13, 10], - dz ? [10, 14, 12, 10] : dy ? [90, 90, 90, 90] : [16, 20, 18, 16]); + grad1 = glossy_grad(r.can, + accentHsl[0], + accentHsl[1], + accentHsl[2]); + grad2 = glossy_grad(r.can, + accentHsl[0], + 0, + (accentHsl[2] > 0.5 ? accentHsl[2] * 0.35 : accentHsl[2] + 50)); } ctx.fillStyle = grad2; ctx.fillRect(0, 0, w, h); ctx.fillStyle = grad1; ctx.fillRect(0, 0, w * mp.vol, h); + + if(false){ + var vt = Math.floor(mp.vol * 100) + '%', + tw = ctx.measureText(vt).width, + x = w * mp.vol - tw - 8, + li = dy; - var vt = Math.floor(mp.vol * 100) + '%', - tw = ctx.measureText(vt).width, - x = w * mp.vol - tw - 8, - li = dy; + if (mp.vol < 0.5) { + x += tw + 16; + li = !li; + } - if (mp.vol < 0.5) { - x += tw + 16; - li = !li; + ctx.fillStyle = li ? '#fff' : '#210'; + ctx.fillText(vt, x, h / 3 * 2); } - ctx.fillStyle = li ? '#fff' : '#210'; - ctx.fillText(vt, x, h / 3 * 2); - clearTimeout(untext); untext = setTimeout(r.draw, 1000); }; @@ -2477,20 +2538,20 @@ var vbar = (function () { toast.inf(6, 'volume doesnt work because apple says no'); }, 1); } - can.onmousedown = function (e) { + ebi('pvolbg').onmousedown = can.onmousedown = function (e) { if (e.button !== 0) return; - can.onmousemove = mousemove; + ebi('pvolbg').onmousemove = can.onmousemove = mousemove; mousedown(e); }; - can.onmouseup = function (e) { + ebi('pvolbg').onmouseup = can.onmouseup = function (e) { if (e.button === 0) - can.onmousemove = null; + ebi('pvolbg').onmousemove = can.onmousemove = null; }; if (TOUCH) { - can.ontouchstart = mousedown; - can.ontouchmove = mousemove; + ebi('pvolbg').ontouchstart = can.ontouchstart = mousedown; + ebi('pvolbg').ontouchmove = can.ontouchmove = mousemove; } return r; })(); @@ -2683,16 +2744,16 @@ function mpause(e) { seek_au_rel(dist); ev(e); }; - ebi('pvol').onwheel = function (e) { + ebi('pvolbg').onwheel = function (e) { var dist = Math.sign(e.deltaY) * 10; if (Math.abs(e.deltaY) < 30 && !e.deltaMode) dist = e.deltaY; - if (!dist || !mp.au) + if (!dist) return true; dist *= -1; - mp.setvol(Math.round((mp.vol + dist / 500) * 100) / 100 ); + mp.setvol(Math.round((mp.vol + dist / 250) * 100) / 100 ); vbar.draw(); ev(e); };