// ==UserScript==
// @name        Better DGG Kick Embed
// @namespace   yuniDev.kickembed
// @match       https://kick.com/*
// @match       https://www.destiny.gg/bigscreen
// @match       https://destiny.gg/bigscreen
// @grant       none
// @version     1.3
// @license     MIT
// @author      yuniDev
// @run-at      document-idle
// @description I CANNOT GUARANTEE THIS WILL WORK ON EVERY BROWSER/USERSCRIPT RUNNER COMBINATION. Hacky solution to embed full kick site instead of the embed. I can't promise it will continue to work indefinitely. If it bugs out when resizing the window, try refreshing the page.
// @downloadURL https://update.greasyfork.icu/scripts/527980/Better%20DGG%20Kick%20Embed.user.js
// @updateURL https://update.greasyfork.icu/scripts/527980/Better%20DGG%20Kick%20Embed.meta.js
// ==/UserScript==

let prevHash = "";

function htmlToNode(html) {
    const template = document.createElement('template');
    template.innerHTML = html;
    return template.content.firstChild;
}

function hideElObserver(selector) {
    function checkAndHide(obs) {
        const elToHide = document.querySelector(selector);
        if (elToHide) {
            elToHide.style.display = 'none';
            obs.disconnect();
        }
    }
    const observer = new MutationObserver((_, obs) => checkAndHide(obs));
    observer.observe(document.body, { childList: true, subtree: true });
    checkAndHide(observer);
}

function hideSurroundings() {
    [...document.querySelectorAll("nav")].forEach(el => el.style = "display: none;");

    hideElObserver("#channel-chatroom");
    hideElObserver("#sidebar-wrapper");
    hideElObserver("#channel-content");

    const injectedChannelPlayer = document.getElementById("injected-channel-player");
    if (injectedChannelPlayer) {
      injectedChannelPlayer.style = "padding: 0px; max-height: max-content;";
      injectedChannelPlayer.parentNode.style = "max-height: max-content;";
    }

    const bodyChild = document.body.firstChild;
    if (bodyChild) {
      bodyChild.style = "height: min-content;";
      [...bodyChild.children].forEach(el => el.style = el.getAttribute("style") ?? "" +  ";padding-top: 0px;");
    }
    document.body.style = "height: min-content;";

    hideElObserver(".z-modal:has(button[data-testid='accept-cookies'])");
}

function loadDestinyGG() {
  const { hash } = window.location;

  if (prevHash.startsWith("#kick/") && !hash.startsWith("#kick")) location.reload(); // Reload page if switching away from kick embed
  prevHash = hash;

  // Check if the URL starts with the desired base
  const isValidStart = hash.startsWith("#kick/") && window.location.pathname === "/bigscreen";

  // Extract the channel name
  const channel = isValidStart ? hash.split("/")[1] : null;

  if (channel && isValidStart) { // We are watching a kick embed on Destiny.gg
    document.body.appendChild(htmlToNode(`<script type="module" src="https://unpkg.com/x-frame-bypass"></script>`));
    const targetUrl = `https://kick.com/${channel}`;

    id = setInterval(() => {
      const embedContainer = document.getElementById("embed");
      const existingIframe = embedContainer.querySelector(".embed-frame");
      if (!existingIframe) return;

      existingIframe.remove();

      clearInterval(id);

      const iframe = htmlToNode(`<iframe is="x-frame-bypass" class="embed-frame" src="${targetUrl}" allow="fullscreen; autoplay; encrypted-media; picture-in-picture; web-share"></iframe>`);
      embedContainer.appendChild(iframe);
      iframe.contentDocument.location.reload();
    }, 100);
  }
}

if (window.location.hostname === "kick.com" && window.self !== window.top) { // Kick inside of iframe
  hideSurroundings();
  setInterval(() => {
    if (![...document.querySelectorAll("nav")].find(el => el.getAttribute("style") && el.getAttribute("style").indexOf("display: none") > -1)) hideSurroundings();
  }, 200);
} else {
  setTimeout(() => {
    loadDestinyGG();
    addEventListener('hashchange', loadDestinyGG);
  }, 100);
}