steam-fullscreen-screenshots.user.js

// ==UserScript==
// @name         Steam fullscreen screenshots
// @namespace    https://github.com/thomas-ashcraft
// @version      0.1.0
// @description  Ability to view screenshots in fullscreen mode
// @author       Thomas Ashcraft
// @match        *://store.steampowered.com/app/*
// @license      GPL-2.0+; http://www.gnu.org/licenses/gpl-2.0.txt
// @grant        none
// @noframes
// ==/UserScript==

(function() {
	let helperStyle = `
.es_fullscreen_toggle {
	position: absolute;
	right: 18%;
	top: 0;
}
.es_fullscreen_toggle i {
	display: block;
	background-image: url('data:image/gif;base64,R0lGODlhEAAgAIABAP///////yH5BAEAAAEALAAAAAAQACAAAAJAjH+gC+jB1HNxpmqjnHVz31iQOIoh5D0Spmom+y0kypDaOWf2hVMNjLi9asNUTFZECpO9FjIDDLqOvyYvscsVAAA7');
	background-position: top left;
	width: 16px;
	height: 16px;
	margin: 5px;
}
.screenshot_popup_modal_content.es_fullscreen .es_fullscreen_toggle i {
	background-position: bottom left;
}
.screenshot_popup_modal_content.es_fullscreen {
	padding: 0;
	width: 100%;
	/* fullscreen fix for Chrome */
	height: 100%;
}
.screenshot_popup_modal_content.es_fullscreen .screenshot_popup_modal_title {
	/* position: absolute; */
	display: none;
}
.screenshot_popup_modal_content.es_fullscreen .screenshot_img_ctn {
	width: 100%;
	height: 100%;
}
.screenshot_popup_modal_content.es_fullscreen .screenshot_img_ctn > img {
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: scale-down;
	width: 100%;
	height: 100%;
}
.screenshot_popup_modal_content.es_fullscreen .screenshot_popup_modal_footer {
	position: absolute;
	width: 100%;
	bottom: 0;
	overflow: visible;
}
.screenshot_popup_modal_content.es_fullscreen .screenshot_popup_modal_footer > .btn_medium {
	opacity: 0;
	transition: opacity 0.25s ease-in-out;
}
.screenshot_popup_modal_content.es_fullscreen .screenshot_popup_modal_footer:hover > .btn_medium {
	opacity: 1;
}
.screenshot_popup_modal_content.es_fullscreen .screenshot_popup_modal_footer > div:first-child {
	display: inline-block;
	background: rgba(103, 193, 245, 0.2);
	border-radius: 100px;
	padding: 0 1em;
}
.screenshot_popup_modal_content.es_fullscreen .screenshot_popup_modal_footer > .previous:before {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 200%;
	height: 10000%;
}
@keyframes es_screenshot_popup_modal_hook {
	from {
		opacity: 0.99;
	}
	to {
		opacity: 1;
	}
}
.screenshot_popup_modal {
	animation-duration: 0.001s;
	animation-name: es_screenshot_popup_modal_hook;
}
`;
	document.head.appendChild(document.createElement("style")).textContent = helperStyle;

	function es_toggleFullScreen(event) {
		let element = event.target.closest(".screenshot_popup_modal_content");
		let doc = window.document;
		let requestFullScreen = element.requestFullscreen || element.mozRequestFullScreen || element.webkitRequestFullScreen;
		let cancelFullScreen = doc.exitFullscreen || doc.mozCancelFullScreen || doc.webkitExitFullscreen;
		if (!doc.fullscreenElement && !doc.mozFullScreenElement && !doc.webkitFullscreenElement) {
			requestFullScreen.call(element);
		} else {
			cancelFullScreen.call(doc);
		}
	}

	function es_fullScreenChangeHandler(event) {
		let es_fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;
		if (es_fullscreenElement) {
			if (es_fullscreenElement.classList.contains("screenshot_popup_modal_content")) {
				es_fullscreenElement.classList.add("es_fullscreen");
			}
		} else {
			document.querySelector(".es_fullscreen").classList.remove("es_fullscreen");
		}
	}

	if ("onfullscreenchange" in document) {
		document.addEventListener("fullscreenchange", es_fullScreenChangeHandler, false);
	}
	if ("onmozfullscreenchange" in document) {
		document.addEventListener("mozfullscreenchange", es_fullScreenChangeHandler, false);
	}
	if ("onwebkitfullscreenchange" in document) {
		document.addEventListener("webkitfullscreenchange", es_fullScreenChangeHandler, false);
	}

	document.addEventListener("animationstart", function(event) {
		if (event.animationName !== "es_screenshot_popup_modal_hook") return;
		let fsvButtonTarget = document.querySelector(".screenshot_popup_modal_footer");
		let fsvButton = document.createElement('div');
		fsvButton.classList.add("btnv6_blue_hoverfade", "btn_medium", "es_fullscreen_toggle");
		fsvButton.innerHTML = "<i></i>";
		let nextButtonOuterWidth = fsvButtonTarget.querySelector(".next").offsetWidth;
		fsvButton.style.right = `calc(${nextButtonOuterWidth}px + 0.5em)`;
		fsvButton.addEventListener("click", es_toggleFullScreen);
		fsvButtonTarget.appendChild(fsvButton);
	}, false);
})();