130 lines
3.7 KiB
JavaScript
130 lines
3.7 KiB
JavaScript
// ==UserScript==
|
|
// @name CrackStreams - Fit Video to Window
|
|
// @namespace https://git.okseby.com/okseby/crunchbang
|
|
// @version 1.0
|
|
// @description Adds a button that expands the video player to fill the browser window (not real fullscreen)
|
|
// @author seby
|
|
// @match https://crackstreams.mx/stream/*
|
|
// @match https://footybite.ac/event/*
|
|
// @updateURL https://git.okseby.com/okseby/crunchbang/raw/branch/main/scripts/javascript/fit-to-window.user.js
|
|
// @downloadURL https://git.okseby.com/okseby/crunchbang/raw/branch/main/scripts/javascript/fit-to-window.user.js
|
|
// @grant none
|
|
// @run-at document-idle
|
|
// ==/UserScript==
|
|
|
|
(function () {
|
|
"use strict";
|
|
|
|
const PLAYER_SELECTOR = "#videoPlayer";
|
|
const BUTTON_ID = "fit-to-window-btn";
|
|
|
|
let isFitted = false;
|
|
let placeholder = null; // marks where the player used to live in the DOM
|
|
let originalStyle = null;
|
|
|
|
function getPlayer() {
|
|
return document.querySelector(PLAYER_SELECTOR);
|
|
}
|
|
|
|
function makeButton() {
|
|
const btn = document.createElement("button");
|
|
btn.id = BUTTON_ID;
|
|
btn.textContent = "Fit to Window";
|
|
Object.assign(btn.style, {
|
|
position: "fixed",
|
|
top: "10px",
|
|
right: "10px",
|
|
zIndex: "2147483647",
|
|
padding: "8px 14px",
|
|
fontSize: "14px",
|
|
fontWeight: "600",
|
|
color: "#fff",
|
|
background: "#2563eb",
|
|
border: "none",
|
|
borderRadius: "6px",
|
|
cursor: "pointer",
|
|
boxShadow: "0 2px 6px rgba(0,0,0,0.4)",
|
|
fontFamily: "system-ui, sans-serif",
|
|
opacity: "0.08",
|
|
transition: "opacity 0.2s ease",
|
|
});
|
|
btn.addEventListener("mouseenter", () => {
|
|
btn.style.opacity = "1";
|
|
});
|
|
btn.addEventListener("mouseleave", () => {
|
|
btn.style.opacity = "0.08";
|
|
});
|
|
btn.addEventListener("click", toggleFit);
|
|
document.body.appendChild(btn);
|
|
return btn;
|
|
}
|
|
|
|
function toggleFit() {
|
|
const player = getPlayer();
|
|
if (!player) return;
|
|
|
|
const btn = document.getElementById(BUTTON_ID);
|
|
|
|
if (!isFitted) {
|
|
// Save original position info so we can restore later
|
|
placeholder = document.createComment("fit-to-window-placeholder");
|
|
player.parentNode.insertBefore(placeholder, player);
|
|
|
|
originalStyle = player.getAttribute("style") || "";
|
|
|
|
Object.assign(player.style, {
|
|
position: "fixed",
|
|
top: "0",
|
|
left: "0",
|
|
width: "100vw",
|
|
height: "100vh",
|
|
margin: "0",
|
|
zIndex: "2147483646",
|
|
background: "#000",
|
|
});
|
|
|
|
// Make the iframe/video inside stretch fully too
|
|
const inner = player.querySelector("iframe, video");
|
|
if (inner) {
|
|
inner.style.width = "100%";
|
|
inner.style.height = "100%";
|
|
}
|
|
|
|
document.documentElement.style.overflow = "hidden";
|
|
document.body.style.overflow = "hidden";
|
|
|
|
isFitted = true;
|
|
if (btn) btn.textContent = "Exit Fit";
|
|
} else {
|
|
// Restore original style/position
|
|
if (originalStyle !== null) {
|
|
player.setAttribute("style", originalStyle);
|
|
} else {
|
|
player.removeAttribute("style");
|
|
}
|
|
|
|
if (placeholder && placeholder.parentNode) {
|
|
placeholder.parentNode.insertBefore(player, placeholder);
|
|
placeholder.remove();
|
|
}
|
|
|
|
document.documentElement.style.overflow = "";
|
|
document.body.style.overflow = "";
|
|
|
|
isFitted = false;
|
|
if (btn) btn.textContent = "Fit to Window";
|
|
}
|
|
}
|
|
|
|
function init() {
|
|
if (document.getElementById(BUTTON_ID)) return;
|
|
if (!getPlayer()) {
|
|
// Player might load slightly after DOM ready; retry briefly
|
|
setTimeout(init, 500);
|
|
return;
|
|
}
|
|
makeButton();
|
|
}
|
|
|
|
init();
|
|
})();
|