// ==UserScript==
// @name        Plex now playing badge
// @namespace   V@no
// @description Display a badge on favicon with a number of users streaming from the server
// @author      V@no
// @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,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAADi0lEQVRYhc2XXYgbVRTH/8bFdrex2+5Xdppmbyg+2OJaLL5IG1DEh74p4ka0gj4UpEh8rLDtth1dadQurYMW+6DSIH6sInlRhAgiSqDdtZt2W5dZlJZYEYlgLSMqyM8HJ9nJmEiTNOiFCwMzc8/vnHvO/54rYwz/5dT/HuDk7g3M7bMaztOTFndsHusuQGrrGKcmGwPM7bN4b8+G7gIYYzjw4MamAPNTo0ykEt0FuPUWw+lQFOb3W5w5FKP03AjFqRjJZJeTcHoiXuf1gh3j3PMjnM8O8/VLQ2R3Wd0FSCYNn++1mNtvsXDob+MXXhhiaWYQ99gA7tEBtm1pPSFbKsOHdiQ4c3CUs9MjnPeNL788wLevruPia/18NDncXQBjDO9nLBYPD7N0ZMX4pRP9lF9fy+U3b+aRe+PdBdi2eYzF7BDu0QG+eWU9F33j35+M8sNba1g6vralhGxLCbO7LJad9Vya6efqfTfxx1gEpGua5Z4eZqNRtsfj7QMkk4azBwf5s++GusWvSkxL3C+xUWKVxJ0ST0iUQiBXIhG2x+PtnwWfja6pW7AkcbtEJpOhVCpRHZVKhXw+jzGGmRDEbDTaPkC5p6e20JcSUQnHcWg2yuUyxhiOh6LQNkDQk90Sxhg8z2sKAJDP5+mVuBz4t2OAXyV6JXK5XJ23qVQKY0zddniehyTevZ4Ab0jID7/rulQqFRzHYZXEoJ8TwSGJvdcT4CkfIDwTfhXYtl0XGUm83SlAMrkC8JvEVxI5iWck7g5ApFIpyuVyDcC2bSTxS6cA2cespkLzoW/cdd26vXccB0k8EPq+LSm+8OJQU4AjPkDQcwDXdUmn02yScDsB+OBp618B9gTCr1ASep6HMYbH2wWY2JGg9GyMxcPDDY3/KHGXDxCRiPnPhUKhBlEoFJDET60CVBuSaj9QNbpTYouvhMEqeEfiO/85n8/XbYV89WwJoNaS+R1RFSAdSLrqvtu2zZMSC/67YrH4D4AvWgEIN6XzU6M1gGMNkq6qhNGQQgLkcjnkK+g1AzRqy6sASz5AUHCajWoSjreShM0uJr+vu7G2yMMNQt3IeDqdRhKfqoXTsNnVrLK1twbgSdwWiES4HygWi7WynAp4/0lfX/tnwXgiUVeCyxKPqvG5IAnLl+tgL7DTsjq7HY8nEsxGo1yJrPSEH0sckJiQuEciI3FC4ueA4eLq1bWe8C/6ASv5oJETowAAAABJRU5ErkJggg==
// @version     1.1
// @grant       none
// @downloadURL none
// ==/UserScript==

var links = document.getElementsByTagName("link"),
		link = null,
		head = document.getElementsByTagName('head')[0],
		prev = null;

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');
	link.type = 'image/x-icon';
	link.rel = 'shortcut icon';
	link.href = "/web/favicon.ico";
	head.appendChild(link);

/*
	link = document.createElement('img');
	document.body.appendChild(link);
	let span = document.createElement("span");
	span.className = "activity-badge badge badge-transparent";
	span.innerText = "0";
	document.body.appendChild(span);
*/
}
var src = link.href,
		_coords = [
			{// badge < 10
				roundRect: [14, 11, 18, 21, 4],
				lineWidth: 3,
				text: [17, 30],
				size: 23,
				color: ["#F00", "#FFF", "#000"]
			},
			{// badge > 9
				roundRect: [4, 11, 28, 21, 4],
				lineWidth: 3,
				text: [5, 30],
				size: 23,
				color: ["#F00", "#FFF", "#000"]
			}
		];

(function loop()
{
	let badge = document.getElementsByClassName("activity-badge badge badge-transparent");
	badge = badge.length ? badge[0].innerText : "";
	
	let text = parseInt(badge);

	if (isNaN(text))
		text = 0;

	if (badge && prev != text)
	{
		let canvas = document.createElement('canvas'),
				ctx = canvas.getContext('2d'),
				img = new Image();

		canvas.width = 32;
		canvas.height = 32;
		img.setAttribute('crossOrigin','anonymous');
		img.src = src;
		img.onload = function()
		{
			ctx.drawImage(img, 0, 0);
			if (text)
			{
				let coords = _coords[text < 10 ? 0 : 1];
				ctx.fillStyle = coords.color[0];
				ctx.roundRect.apply(ctx, coords.roundRect).fill();
				ctx.font = 'bold ' + coords.size + 'px sans-serif';
				ctx.strokeStyle = coords.color[2];
				ctx.lineWidth = coords.lineWidth;
				ctx.strokeText(text, coords.text[0], coords.text[1]);
				ctx.fillStyle = coords.color[1];
				ctx.fillText(text, coords.text[0], coords.text[1]);
			}
			link.href = canvas.toDataURL("image/x-icon");
			prev = text;
/*
			link.src = canvas.toDataURL("image/x-icon");
			badge[0].innerText++;
*/
		};
	}
	setTimeout(loop, 3000);
})();

//https://stackoverflow.com/a/7838871/2930038
CanvasRenderingContext2D.prototype.roundRect = 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;
};