// ==UserScript==
// @name        Fullscreen Chat cytu.be
// @namespace   Violentmonkey Scripts
// @match       https://cytu.be/*
// @grant       none
// @version     1.0
// @description 4/19/2025, 9:15:25 PM
// @run-at document-end
// ==/UserScript==

/*
 * Note: Form input in fullscreen does not seem to work, so the script won't activate it automatically, but F11 will work.
 */

const videoControls = document.querySelector("#videocontrols");
if (videoControls) {
  const fsChatBtn = document.createElement("button");
  fsChatBtn.classList.add("btn", "btn-sm", "btn-default");
  fsChatBtn.innerText = "FSC";
  fsChatBtn.setAttribute("alt", "Fullscreen Chat");
  videoControls.insertBefore(fsChatBtn, videoControls.children[0]);

  function openFullscreen() {
    if (elem.requestFullscreen) {
      elem.requestFullscreen();
    } else if (elem.webkitRequestFullscreen) { /* Safari */
      elem.webkitRequestFullscreen();
    } else if (elem.msRequestFullscreen) { /* IE11 */
      elem.msRequestFullscreen();
    }
  }

  function disableFs() {
    fsEnabled = false;

    const videoElement = document.querySelector("video");
    if (videoElement) {
      videoElement.removeAttribute("style");
    }

    const chatElement = document.querySelector("#chatwrap");
    if (chatElement) {
      chatElement.removeAttribute("style");
      chatElement.querySelector("input").removeAttribute("style");
    }

    const videoChatElement = document.querySelector(".videochatContainer");
    if (videoChatElement) {
      videoChatElement.removeAttribute("style");
    }

    const userList = document.querySelector("#userlist");
    const messageBuffer = document.querySelector("#messagebuffer");
    messageBuffer.style.height = messageBuffer.initialHeight;
    userlist.style.height = userlist.initialHeight;
  }

  function enableFs() {
    const videoElement = document.querySelector("video");
    const chatElement = document.querySelector("#chatwrap");
    const videoChatElement = document.querySelector(".videochatContainer");
    const userList = document.querySelector("#userlist");
    const messageBuffer = document.querySelector("#messagebuffer");

    if (!videoElement) {
      alert("This script only supports <video> tags.");
      return;
    }

    fsEnabled = true;
    //openFullscreen();

    videoElement.style.position = "fixed";
    videoElement.style.left = "0";
    videoElement.style.top = "0";
    videoElement.style.left = "20vw";
    videoElement.style.right = "0";
    videoElement.style.maxHeight = "100vh";
    videoElement.style.width = "80vw";
    videoElement.style.zIndex = "10000";
    videoElement.style.objectFit = "contain";
    videoElement.style.backgroundColor = "black";

    videoChatElement.style.position = "fixed";
    videoChatElement.style.left = "0";
    videoChatElement.style.top = "0";
    videoChatElement.style.left = "20vw";
    videoChatElement.style.right = "0";
    videoChatElement.style.maxHeight = "100vh";
    videoChatElement.style.width = "80vw";
    videoChatElement.style.zIndex = "10001";
    videoChatElement.style.objectFit = "contain";
    videoChatElement.style.backgroundColor = "black";

    if (chatElement) {
      chatElement.style.position = "fixed";
      chatElement.style.left = "0";
      chatElement.style.top = "0";
      chatElement.style.bottom = "0";
      chatElement.style.zIndex = "10002";
      chatElement.style.backgroundColor = "black";
      chatElement.style.maxWidth = "20vw";
      chatElement.style.marginBottom = "0";
    }

    messageBuffer.initialHeight = messageBuffer.style.height;
    userlist.initialHeight = userlist.style.height;

    setTimeout(() => {
      messageBuffer.style.height = "90vh";
      userlist.style.height = "90vh";
    }, 500);
  }

  let fsEnabled = false;

  document.body.addEventListener("keyup", e => {
    console.log(e.key);
    if (e.key == "Escape") {
      disableFs();
    }
  });

  window.addEventListener("resize", e => {
    if (fsEnabled) {
      const userList = document.querySelector("#userlist");
      const messageBuffer = document.querySelector("#messagebuffer");
      messageBuffer.style.height = "90vh";
      userlist.style.height = "90vh";
    }
  });

  fsChatBtn.addEventListener("click", e => {
    e.preventDefault();

    if (fsEnabled) {
      disableFs();
    } else {
      enableFs();
    }
  });

  document.addEventListener("fullscreenchange", e => {
    if (!document.fullscreenElement) disableFs();
  });
}