RedditBooru 4 YouTube.com

youtubebg.js

// ==UserScript==
// @name         RedditBooru 4 YouTube!
// @namespace    http://tampermonkey.net/
// @version      1.03
// @downloadURL  https://gist.githubusercontent.com/NanoAi/8cd0fc0d069ac33018b09fc60048402e/raw/youtubebg.js
// @description  Gives you a nice RedditBooru wallpaper for youtube, click on the right to go to the thread, click on the left to reverse image search.
// @author       You
// @match        https://www.youtube.com/*
// @grant        unsafeWindow
// @run-at       document-start
// ==/UserScript==

// <ytd-browse class="style-scope ytd-page-manager" rich-grid-title_="" background-color-update="" page-subtype="home

let worker;
let blobURL;
let styleObj;
let loaderObj;
let imgObj;

let redirecting = false;
let loadingWallpaper = false;

const CDN_URL = 0;
const IMG_DATA = 1;
const UPDATE_STATE = 2;

const styleData =
	"@-webkit-keyframes spin{0%{-webkit-transform:rotate(0)}100%{-webkit-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0);-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0)}100%{transform:rotate(360deg);-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0)}100%{-webkit-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}html[dark=true] #mod______Loader{margin-top:39vh;border:16px solid #0f0f0f;border-radius:50%;border-left:16px solid #2c2c2c;width:120px;height:120px;-webkit-animation:spin 1.5s linear infinite;animation:spin 1.5s linear infinite}html:not([dark=true]) #mod______Loader{margin-top:39vh;border:16px solid #d4d4d4;border-radius:50%;border-left:16px solid #e3e3e3;width:120px;height:120px;-webkit-animation:spin 1.5s linear infinite;animation:spin 1.5s linear infinite}img#mod_Wallpaper{position:fixed;height:94vh;width:auto}div.mod_Overlay{pointer-events:none;position:fixed;z-index:1;opacity:0;clip-path:circle(0);filter:sepia(1) blur(5px);-webkit-filter:sepia(1) blur(5px);transition:opacity .5s linear,clip-path .5s linear;-webkit-transition:opacity .5s linear,clip-path .5s linear;-moz-transition:opacity .5s linear,clip-path .5s linear;-ms-transition:opacity .5s linear,clip-path .5s linear;-o-transition:opacity .5s linear,clip-path .5s linear}";

function workerError(e) {
	const search = document.getElementById("search-input").lastChild;
	search.originalPlaceholder = search.originalPlaceholder || search.placeholder;
	search.placeholder = search.originalPlaceholder + " | Error: " + e.data;
}

function windowOpen( url ) {
	if ( redirecting ) return;
	redirecting = true;

	window.open( url );

	setTimeout(() => {
		redirecting = false;
	}, 500);
}

function workerMessage(event) {
	const node = document.querySelector("ytd-browse.style-scope[page-subtype=\"home\"]");
	const command = event.data.cmd;
	const data = event.data.data;

	if ( command != CDN_URL ) {
		const search = document.getElementById("search-input").lastChild;
		switch ( command ) {
			case UPDATE_STATE:
				search.originalPlaceholder = search.originalPlaceholder || search.placeholder;
				search.placeholder = search.originalPlaceholder + " | " + data;
				break;
			case IMG_DATA:
				if (imgObj === null) break;
				imgObj.alt = data[0];
				imgObj.redditId = data[1];
				break;
		}
		return;
	}

	imgObj.onload = () => {
		node.innerHTML = "";
		node.appendChild(imgObj);
		document.body.appendChild(styleObj);
		imgObj.loaded = true;
	};

	imgObj.onclick = (e) => {
		const dim = e.target.getBoundingClientRect();
		buildOverlay( imgObj, dim, e );
	};

	imgObj.ondblclick = (e) => {
		const dim = e.target.getBoundingClientRect();
		const x = e.clientX - (dim.left + dim.width / 2);
		//const y = e.clientY - (dim.top + dim.height / 2);

		if ( x > 0 ) {
			document.getElementsByClassName("mod_Overlay")[0].addEventListener("transitionend", () => {
				windowOpen(`https://redd.it/${e.target.redditId}`);
			});
		}

		if ( x < 0 ) {
			document.getElementsByClassName("mod_Overlay")[0].addEventListener("transitionend", () => {
				windowOpen(`https://yandex.com/images/search?rpt=imageview&url=${e.target.src}`);
			});
		}
	};

	imgObj.onerror = workerError;
	imgObj.src = data;

	this.isAlive = false;
	this.terminate();
}

function buildOverlay( imgObj, dim, e ) {
	const x = e.clientX - dim.left;
	const y = e.clientY - dim.top;
	const node = document.querySelector("ytd-browse.style-scope[page-subtype=\"home\"]");
	if ( node === null ) return;

	const overlay = document.createElement("div");

	overlay.className = "mod_Overlay";
	overlay.style.backgroundImage = `url('${imgObj.src}')`;
	overlay.style.backgroundSize = "contain";
	overlay.style.clipPath = `circle(0% at ${x}px ${y}px)`;
	node.appendChild(overlay);

	overlay.style.opacity = "1";
	overlay.addEventListener("transitionend", (ev) => {
		if (ev.propertyName === "opacity") {
			overlay.remove();
		}
	});

	setTimeout(() => {
		overlay.style.width = dim.width + "px";
		overlay.style.height = dim.height + "px";
		overlay.style.opacity = "0";
		overlay.style.clipPath = `circle(200% at ${x}px ${y}px)`;
	}, 100);
}

function init() {
	"use strict";

	if (typeof worker == "undefined") {
		const blob = new Blob(
			[
				"(",
				function () {
					const CDN_URL = 0;
					const IMG_DATA = 1;
					const UPDATE_STATE = 2;

					function getRandomInt(min, max) {
						return Math.floor(Math.random() * (max - min + 1) + min);
					}

					function redditbooruRequest(subreddits) {
						const multiSubreddit = subreddits.split(",");
						const subreddit = multiSubreddit[getRandomInt(0, multiSubreddit.length - 1)];
						postMessage({cmd: UPDATE_STATE, data: "Loading: " + subreddit});
						console.log("[YouTubeBG]", "Loading From:", subreddit);

						const url = "https://" + subreddit + ".redditbooru.com/images/?limit=100";
						const req = new XMLHttpRequest();

						let foundObj = undefined;
						let returnText = "";

						req.onload = function () {
							postMessage({cmd: UPDATE_STATE, data: "Response: " + req.status});
							if (req.readyState == 4 && req.status == 200) {
								const json = JSON.parse(req.responseText);
								let obj = json[getRandomInt(0, json.length)];

								for (let index = 0; index < 1000; index++) {
									if (obj.height <= 2000 && obj.width > obj.height) {
										break;
									} else {
										obj = json[getRandomInt(0, json.length)];
									}
								}

								foundObj = obj;
								returnText = obj.cdnUrl;
								postMessage({
									cmd: UPDATE_STATE,
									data: `redd.it/${foundObj.externalId} by ${foundObj.userName}`,
								});
								postMessage({ cmd: IMG_DATA, data: [foundObj.title, foundObj.externalId] });
								console.log("[YouTubeBG]", `Source: redd.it/${obj.externalId}`);
							}
						};

						req.onerror = () => {
							postMessage({cmd: UPDATE_STATE, data: "Error :("});
						};

						req.open("GET", url, false);
						req.send();

						setTimeout(() => {
							postMessage({cmd: CDN_URL, data: returnText});
						}, 10);
					}
					redditbooruRequest("awwnime,moescape,animewallpaper,fantasymoe,patchuu,twodeeart");
				}.toString(),
				")()",
			], {
				type: "text/javascript"
			}
		);

		blobURL = window.URL.createObjectURL(blob);
		worker = new Worker(blobURL);

		styleObj = document.createElement("style");
		styleObj.innerHTML = styleData;

		loaderObj = document.createElement("div");
		loaderObj.id = "mod______Loader";

		imgObj = new Image();
		imgObj.id = "mod_Wallpaper";
	}

	const node = document.querySelector("ytd-browse.style-scope[page-subtype=\"home\"]");

	if (node) {
		node.innerHTML = "";
		node.appendChild(loaderObj);

		document.body.appendChild(styleObj);

		worker.isAlive = true;
		worker.onerror = workerError;
		worker.onmessageerror = workerError;
		worker.onmessage = workerMessage;

		setTimeout(() => {
			// If our worker, is MIA...
			if (worker.isAlive === true) {
				worker = new Worker(blobURL);
				worker.isAlive = true;
				worker.onerror = workerError;
				worker.onmessageerror = workerError;
				worker.onmessage = workerMessage;
			}
		}, 5500);
	}
}

console.log("[YouTubeBG]", "Let's Go!");
init();

function reInit() {
	if ( loadingWallpaper ) return;
	loadingWallpaper = true;

	const node = document.querySelector("ytd-browse.style-scope[page-subtype=\"home\"]");
	setTimeout(() => {
		loadingWallpaper = false;
		if (node !== null) {
			if (document.getElementById("mod_Wallpaper") === null) {
				console.log("[YouTubeBG]", "Loading Wallpaper!");
				init();
			}
		} else {
			console.log("[YouTubeBG]", "Waiting for home.");
		}
	}, 500);
}

window.addEventListener("yt-navigate-finish", reInit, false);
//window.addEventListener("hashchange", reInit, false);
//window.addEventListener("load", reInit, false);

Update 1.01
Now with more subreddits! Maybe I should add a settings thing?
Subreddits: awwnime, moescape, animewallpaper, fantasymoe, patchuu, twodeeart
Update 1.02
Shouldn't randomly run more then once, this also fixes some errors with loading.
Update 1.03
Fixed sources not working, fixed concatenation bugging out.