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);

This will give you a nice wallpaper for YouTube from RedditBooru, no more tiles from random "popular" channels that you have little to no interest in. No more huge annoying tiles just some nice anime pictures.

You can double-click on the right side of the image to go to the reddit thread, and double-click on the left side to reverse image search.
I decided to use Yandex for reverse image searching mostly because I felt like I got better results then searching with Google. (You can still reverse image search by right clicking and using a web extension as well.)

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.