// ==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();
})();