Plex Bookmarklet for scaling videos (when video content has black bars on top/bottom)

plex-scale.js

javascript:(function(){
	video = document.querySelector("video");
	currentScale = video ? video.style.transform : "";
	console.log(currentScale);
	document.addEventListener("fullscreenchange", function() {
		video.style.transform = "";
	});
	function ce(t) { return document.createElement(t) };
	lookup = {
		"1:1": 1,
		"1.33:1": 1.33,
		"1.66:1": 1.66,
		"1.78:1": 1.78,
		"1.85:1": 1.85,
		"2.21:1": 1.221,
		"2.35:1": 1.235,
		"2.39:1": 1.239,
		"2.75:1": 1.275
	};
	function closeModal() {
		document.querySelectorAll(".plexS button").forEach(function(el) {
			el.onmouseout = null;
			el.onmouseover = null;
			el.onclick = null;
		});
		document.querySelectorAll(".plexS").forEach(function(el) {
			el.classList.remove("in");
		});
		setTimeout(function() {
			document.querySelectorAll(".plexS").forEach(function(el) {
				el.remove();
			});
		}, 500);
	};
	function openModal() {
		backdrop = ce("div");
		backdrop.className = "modal-backdrop fade plexS";
		document.body.appendChild(backdrop);

		modal = ce("div");
		modal.className = "modal-info-modal modal modal-lg fade plexS";
		modal.style = "display: block;";
		modalDialog = ce("div");
		modalDialog.className = "modal-dialog";
		modalContent = ce("div");
		modalContent.className = "modal-content";
		modalHeader = ce("div");
		modalHeader.className = "modal-header";
		modalBody = ce("div");
		modalBody.className = "modal-body modal-body-scroll dark-scrollbar";
		scaleOptions = ce("div");
		Object.keys(lookup).forEach(function(o) {
			scaleButton = ce("button");
			if ("scale(" + lookup[o] + ")" == currentScale) {
				scaleButton.className = "selected"
			}
			scaleButton.textContent = o;
			scaleButton.onmouseover = function() {
				video.style.transform = "scale(" + lookup[o] + ")";
			};
			scaleButton.onmouseout = function() {
				video.style.transform = currentScale;
			};
			scaleButton.onclick = function() {
				video.style.transform = "scale(" + lookup[o] + ")";
				closeModal();
			};
			scaleOptions.appendChild(scaleButton);
		});
		modalBody.appendChild(scaleOptions);
		closeButton = ce("button");
		closeButton.className = "close";
		closeButton.dataset.dismiss = "modal";
		closeButton.onclick = closeModal;
		closeIcon = ce("i");
		closeIcon.className = "glyphicon remove-2";
		modalTitle = ce("h4");
		modalTitle.className = "modal-title";
		modalTitle.textContent = "Scale Video";
		modalStyle = ce("style");
		modalStyle.textContent = ".plexS .modal-body button { position:relative; display: flex; align-items: center; width: 100%25; height: 40px; padding: 0 15px; text-align: start; background: none; border: none; color: rgba(255,255,255,.75); font-size: 15px; }.plexS .modal-body button:nth-of-type(odd) { background-color: rgba(255,255,255,.03); }.plexS .modal-body button:nth-of-type(2n) { background-color: #292929 }.plexS .modal-body button:hover { background-color: rgba(255,255,255,.1); box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 2px #cc7b19; }.plexS .modal-body button.selected { box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 3px #f9be03; }";

		closeButton.appendChild(closeIcon);
		modalHeader.appendChild(closeButton);
		modalHeader.appendChild(modalTitle);
		modalContent.appendChild(modalHeader);
		modalContent.appendChild(modalBody);
		modalContent.appendChild(modalStyle);
		modalDialog.appendChild(modalContent);
		modal.appendChild(modalDialog);
		document.body.appendChild(modal);

		setTimeout(function() {
			document.querySelectorAll(".plexS").forEach(function(el) {
				el.classList.add("in");
			});
		}, 250);
	}

	if (document.querySelector("#plex") && !document.querySelector(".modal-backdrop") && video) {
		openModal();
	}
})();