Raw Source Toggle Dropdown

• Minified Source

maloomf9 / Picarto Thumbnail Refresh

// ==UserScript==
// @name        Picarto Thumbnail Refresh
// @namespace   http://www.furaffinity.net/user/Maloo
// @description Want to keep up with other people in a multistream are doing, but don't want to use a bunch of bandwidth on it? This script refreshes the preview images on unplayed streams every 5 minutes, and paused streams every minute.
// @license     MIT
// @include     https://picarto.tv/*
// @exclude		https://picarto.tv/communities*
// @exclude		https://picarto.tv/
// @exclude		https://picarto.tv/settings*
// @connect     picarto.tv
// @version     0.4
// @grant       GM.xmlHttpRequest
// @run-at		document-end
// ==/UserScript==



var picUser = window.location.href.match(/\.tv\/([\w]*)/)[1];
var thumbnailUrl = "https://picarto.tv/process/channel_thumbnail?channel=";
//document.querySelector(".vjs-play-control").parentNode.parentNode.childNodes[1].style.backgroundImage.match(/"(.*)"/)[1];

var waitForPlayer = setInterval(function() {
    if (document.querySelector(".vjs-play-control"))
    {
        thumbnailUrl = "https://picarto.tv/" + document.querySelector(".vjs-play-control").parentNode.parentNode.childNodes[1].style.backgroundImage.match(/"(.*=).*"/)[1];
        GM.xmlHttpRequest({
            method: "GET",
            url: thumbnailUrl + picUser,
            onload: function(response) {
                //console.log("reqResp Follows");
                //console.log(response.finalUrl);
                thumbnailUrl = response.finalUrl.match(/^.*\//)[0];
            }
        });
        clearInterval(waitForPlayer);
    }
},50);





function addGlobalStyle(css) {
	try {
		var elmHead, elmStyle;
		while (document.getElementsByTagName('head')[0] === null)
		{
			/*var ms;
			ms = 10;
			ms += new Date().getTime();
			while (new Date() < ms){}*/
		}
		elmHead = document.getElementsByTagName('head')[0];
		elmStyle = document.createElement('style');
		elmStyle.type = 'text/css';
		elmHead.appendChild(elmStyle);
		elmStyle.innerHTML = css;
	} catch (e) {
		if (!document.styleSheets.length) {
			document.createStyleSheet();
		}
		document.styleSheets[0].cssText += css;
	}
}

function updateChanImage(buttonEl)
{
    //console.log("UpdateChanImage Called");
    var imgEl = buttonEl.parentNode.parentNode.childNodes[1];
    var x = thumbnailUrl;
    if (x.slice(-1) == "=")
    {
        x += imgEl.parentNode.parentNode.getAttribute("channel");
        x += "#" + nocache;
    }
    else
    {
        x += imgEl.parentNode.parentNode.getAttribute("channel");
        x += ".jpg?" + nocache;
    }
    if (imgEl.style.content === "none") updateFGImage(x, imgEl);
    else updateBGImage(x, imgEl);
    nocache = Math.round((new Date()).getTime() / 1000);
}

function updateBGImage(url, element)
{
    //console.log("Updating bg image on " + url);
    var img = new Image();
    img.onload = function() {
        element.style.backgroundImage = "url(\"" + url + "\")";
        setTimeout(function() {element.style.content = "none"; }, 100);
    }
    img.src = url;
}

function updateFGImage(url, element)
{
    //console.log("Updating fg image on " + url);
    var img = new Image();
    img.onload = function() {
        setTimeout(function() { element.style.content = "url(\"" + url + "\")";}, 100);
    }
    img.src = url;
}

addGlobalStyle('.vjs-paused .vjs-poster.vjs-hidden {display: revert !important; background-color: transparent !important;}');

const now = new Date();
var nocache = Math.round(now.getTime() / 1000);


setTimeout(function() {
    //document.querySelectorAll(".vjs-poster:not(.vjs-hidden)").forEach(element => {element.style.backgroundImage = element.style.backgroundImage.slice(0, -2) + "#0\")"});

    setInterval(function(){
        document.querySelectorAll(".vjs-play-control:not(.vjs-paused):not(.vjs-playing)").forEach(element => {updateChanImage(element);});
    }, 300000);
    setInterval(function(){
        document.querySelectorAll(".vjs-paused.vjs-play-control").forEach(element => {updateChanImage(element);});
    }, 60000);

}, 10000);