Display a badge on favicon with a number of users streaming from the server
目前为
// ==UserScript==
// @name Plex now playing badge
// @namespace V@no
// @description Display a badge on favicon with a number of users streaming from the server
// @include http://localhost:32400/web/*
// @include http://127.0.0.1:32400/web/*
// @include https://app.plex.tv/desktop
// @include https://app.plex.tv/desktop/*
// @icon data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACVklEQVRYhc2Xy08TURTGZ6NAn7RMp1xo587ChVUTY9mCCfFPMFZicGlMNNGli7YoIsYBNDyCDyKmQVGpQMJC0aVuTKCkoFCbEhQoCNrUkBDWn4uWR8s0tHVu603O+vzuPed857scpRTFDO6/Bxi4VIWAhyjGpJvglENkC1B3UsSEWxkg4CHwX6liC0Apxc2ztowAU02VcNXZ2QIcPUIxmfYKU16CYLMVM3cEfG6yQpIYN2Grqzrl1tO3rfh6V8CcbMG3Dh5yI2ELIEkUn24QBLwE082J5KE2HuEHFYh0mRHpNMN5LPeGzGkMz9XaEbxViS+tAuaSyee7zfj+sByLT4x457awBaCUYvgawew9C8L3d5Mv9RkRfWbAqk+PC2eq2QI4HSJmZR6RTjMWek1YTCb/OaDD+qAW4UeGnBoyLyWUGwnme0z48bgc0f5E8l8vtYj5NYiPlKHrssAWQJIogjKPpT4jVnx6rA9qERvS4M9oKTbGShAfLUXNiey0Ie9d0FBvw/LT5O1faREfLsPGWAk23x7G1vtD+NhhYAtAKcW4h8facx1+v9bgA8flFf8EUHNcRNSnR2yo2AD+XYBsjyoA414eay90KS9QMICGehui/YZ9PbB9OI5TDFUAJIki2FaRMgUFBZAvEiz0mlJ04KASqAbgdIgItfM7SricVMKCAYxcJwi1798FmQBULYGr1o6ZFqviNmQOsG1IMvkB5iXYsWQZHBFTgHRTmu4JJ1oEtmOoZMv3uuLzp23sAA76mLy5mnDDzKQ4269ZUZbR3ijKOlYD4C/uwVlNS+Cv+wAAAABJRU5ErkJggg==
// @author V@no
// @version 2.0
// @grant none
// ==/UserScript==
var prefs = {
position: 2, //0 = top-left, 1 = top-right, 2 = bottom-right, 3 = bottom-left
offsetX: 0, //move badge away from x egde (use negative numbers for auto scale based on text size)
offsetY: 0, //move badge away from y edge (use negative numbers for auto scale based on text size)
textSize: 0, //text size, 0 = auto, 1 = 5px, 2 = 10px, so on
textMargin: -1, //margin around text, use negative number for auto scale based on text size
textColor: "#000000", // text color
backgroundColor: "#FFFFFF", //background color
borderColor: "#B90000", //border color
borderWidth: -1, //border width, -1 = auto based on text size
borderRadius: 0, //border corners radius
sizeIcon: 0, //image size in pixels, 0 = original
};
var links = document.getElementsByTagName("link"),
link = null,
head = document.getElementsByTagName('head')[0],
prev = null,
img = new Image(),
canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d'),
size = 16,
multi;
for(let i = 0; i < links.length; i++)
{
if (links[i].getAttribute("rel") == "shortcut icon")
{
link = links[i];
break;
}
}
if (!link)
{
link = document.createElement('link');
head.appendChild(link);
/*
//for debuging purposes
link = document.createElement('img');
document.body.appendChild(link);
let span = document.createElement("span");
var auto = false,add = 0;
span.className = "activity-badge badge badge-transparent";
span.innerText = "0";
span.style.display = "none";
document.body.appendChild(span);
link.addEventListener("click", function(e){if (e.button)return;add = 1;}, false);
link.addEventListener("dblclick", function(e){auto = !auto;}, false);
*/
link.type = 'image/x-icon';
link.rel = 'shortcut icon';
link.href = "/web/favicon.ico";
}
img.setAttribute('crossOrigin','anonymous');
img.src = link.href;
img.onload = function()
{
if (prefs.sizeIcon)
img.width = img.height = prefs.sizeIcon;
img.loaded = true;
size = img.height;
multi = prefs.textSize ? prefs.textSize : size / 16;
canvas.width = canvas.height = size;
};
function drawText(text)
{
if (!img.loaded)
return;
ctx.save();
ctx.drawImage(img, 0, 0, size, size);
if (text)
{
let textArray = text.toString().toUpperCase().split(''),
textHeight = 0,
textWidth = textArray.reduce(function (prev, cur)
{
let px = getPixelMap(cur);
if (px.length * multi > textHeight)
textHeight = px.length * multi;
return prev + px[0].length * multi + 1;
}, -1),
borderWidth = prefs.borderWidth == -1 ? multi : prefs.borderWidth,
textMargin = prefs.textMargin < 0 ? -prefs.textMargin * multi : prefs.textMargin,
width = textWidth + textMargin * 2 + borderWidth,
height = textHeight + textMargin * 2 + borderWidth,
xy = -borderWidth / 2,
offsetX = prefs.offsetX < 0 ? -prefs.offsetX * multi : prefs.offsetX,
offsetY = prefs.offsetY < 0 ? -prefs.offsetY * multi : prefs.offsetY,
x, y;
switch (prefs.position)
{
case 0:
x = borderWidth + offsetX;
y = borderWidth + offsetY;
break;
case 1:
x = size - width - offsetX;
y = borderWidth + offsetY;
break;
default:
case 2:
x = size - width - offsetX;
y = size - height - offsetY;
break;
case 3:
x = borderWidth + offsetX;
y = size - height - offsetX;
break;
}
ctx.translate(x, y);
// Draw Box
ctx.fillStyle = prefs.backgroundColor;//backgborderRadius
ctx.strokeStyle = prefs.borderColor;//border
ctx.lineWidth = borderWidth;
ctx.borderRadiusRect(xy, xy, width, height, prefs.borderRadius * multi).fill();
ctx.borderRadiusRect(xy, xy, width, height, prefs.borderRadius * multi).stroke();
// Draw Text
ctx.fillStyle = prefs.textColor;
ctx.translate(textMargin, textMargin);
for(let i = 0; i < textArray.length; i++)
{
let px = getPixelMap(textArray[i]),
_y = 0;
for (let y = 0; y < px.length; y++)
{
let _x = 0;
for (let x = 0; x < px[y].length; x++)
{
if (px[y] && px[y][x])
{
for(let mx = 0; mx < multi; mx++)
{
for(let my = 0; my < multi; my++)
{
ctx.fillRect(_x + mx, _y + my, 1, 1);
}
}
}
_x += multi;
}
_y += multi;
}
ctx.translate(px[0].length * multi + 1, 0);
}
}
let data = canvas.toDataURL("image/x-icon");
ctx.restore();
ctx.clearRect(0, 0, size, size);
return data;
}
//borrowed from https://chrome.google.com/webstore/detail/favicon-badges/fjnaohmeicdkcipkhddeaibfhmbobbfm/related?hl=en-US
/**
* Gets a character's pixel map
*/
function getPixelMap(sym)
{
let px = PIXELMAPS[sym];
if (!px)
px = PIXELMAPS['0'];
return px;
}
var PIXELMAPS = {
'0': [
[1,1,1],
[1,0,1],
[1,0,1],
[1,0,1],
[1,1,1]
],
'1': [
[0,1,0],
[1,1,0],
[0,1,0],
[0,1,0],
[1,1,1]
],
'2': [
[1,1,1],
[0,0,1],
[1,1,1],
[1,0,0],
[1,1,1]
],
'3': [
[1,1,1],
[0,0,1],
[0,1,1],
[0,0,1],
[1,1,1]
],
'4': [
[1,0,1],
[1,0,1],
[1,0,1],
[1,1,1],
[0,0,1]
],
'5': [
[1,1,1],
[1,0,0],
[1,1,1],
[0,0,1],
[1,1,1]
],
'6': [
[1,1,1],
[1,0,0],
[1,1,1],
[1,0,1],
[1,1,1]
],
'7': [
[1,1,1],
[0,0,1],
[0,0,1],
[0,1,0],
[0,1,0]
],
'8': [
[1,1,1],
[1,0,1],
[1,1,1],
[1,0,1],
[1,1,1]
],
'9': [
[1,1,1],
[1,0,1],
[1,1,1],
[0,0,1],
[1,1,1]
],
};
//https://stackoverflow.com/a/7838871/2930038
CanvasRenderingContext2D.prototype.borderRadiusRect = function (x, y, w, h, r)
{
if (w < 2 * r) r = w / 2;
if (h < 2 * r) r = h / 2;
this.beginPath();
this.moveTo(x+r, y);
this.arcTo(x+w, y, x+w, y+h, r);
this.arcTo(x+w, y+h, x, y+h, r);
this.arcTo(x, y+h, x, y, r);
this.arcTo(x, y, x+w, y, r);
this.closePath();
return this;
};
(function loop()
{
let data,
_badge = document.getElementsByClassName("activity-badge badge badge-transparent"),
badge = _badge.length ? _badge[0].innerText : "";
//try{if(add)_badge[0].innerText++; if(!auto) add = 0}catch(e){};
let text = parseInt(badge);
if (isNaN(text))
text = 0;
if (prev != text && (data = drawText(text)))
{
//link.src = data;
link.href = data;
prev = text;
}
setTimeout(loop, 1000);
})();