☰

Replace Kick Embed with Channel Page and Enable Theatre Mode

Replaces Kick embed with a full channel page and enables theatre mode on Kick.com only when loaded as an embed replacement

  1. // ==UserScript==
  2. // @name         Replace Kick Embed with Channel Page and Enable Theatre Mode
  3. // @namespace    https://multikick.com/
  4. // @version      1.7
  5. // @description  Replaces Kick embed with a full channel page and enables theatre mode on Kick.com only when loaded as an embed replacement
  6. // @author       nobody
  7. // @match        *://multikick.com/*
  8. // @match        *://kick.com/*
  9. // @grant        GM_setValue
  10. // @grant        GM_getValue
  11. // @grant        GM_addStyle
  12. // @grant        GM_registerMenuCommand
  13. // @license      GPL-3.0-or-later
  14. // ==/UserScript==
  15.  
  16. let chatButtonVisible = GM_getValue('kickChatButtonVisible', true);
  17.  
  18. GM_registerMenuCommand('Toggle chat button visibility', () => {
  19.     chatButtonVisible = !chatButtonVisible;
  20.     GM_setValue('kickChatButtonVisible', chatButtonVisible);
  21.  
  22.     alert('Refresh for changes to take effect.');
  23. });
  24.  
  25. let liveInformationVisible = GM_getValue('kickLiveInformationVisible', false);
  26.  
  27. GM_registerMenuCommand('Toggle live information visibility', () => {
  28.     liveInformationVisible = !liveInformationVisible;
  29.     GM_setValue('kickLiveInformationVisible', liveInformationVisible);
  30.  
  31.     alert('Refresh for changes to take effect.');
  32. });
  33.  
  34. if (window.location.host.includes("multikick.com")) {
  35.     // Code for the embed page: Replace the Kick player with a full channel page
  36.     const observer = new MutationObserver(() => {
  37.         const playerContainer = document.querySelector(".video-container");
  38.         if (playerContainer) {
  39.             // Extract channel information from the URL
  40.             const channelUrl = window.location.href;
  41.             console.log("Channel URL:", channelUrl);
  42.             const splitURL = channelUrl.split("/");
  43.             const channelId = splitURL[splitURL.length - 1]; // Assumes URL is like: https://multikick.com/player/{channelId}
  44.             console.log("Channel ID:", channelId);
  45.  
  46.             // Create an iframe for the full Kick channel page
  47.             const iframe = document.createElement("iframe");
  48.             iframe.src = `https://kick.com/${channelId}`;
  49.             iframe.style.width = "100%";
  50.             iframe.style.height = "100vh"; // Full viewport height
  51.             iframe.style.border = "none";
  52.  
  53.             // Replace the embed with the full channel page
  54.             playerContainer.innerHTML = "";
  55.             playerContainer.appendChild(iframe);
  56.  
  57.             if (!liveInformationVisible) {
  58.                 GM_addStyle(`
  59.                 .live-informations {
  60.                   display: none !important;
  61.                 }
  62.               `);
  63.             }
  64.  
  65.             // Stop observing and mark that we replaced the embed
  66.             observer.disconnect();
  67.             GM_setValue("embedReplaced", true);
  68.         }
  69.     });
  70.     observer.observe(document.body, {
  71.         subtree: true,
  72.         childList: true,
  73.     });
  74. } else if (window.location.host.includes("kick.com")) {
  75.     // Code for kick.com: Only run if the embed was replaced and the referrer indicates it came from multikick.com
  76.     const embedReplacedValue = GM_getValue("embedReplaced", false);
  77.     if (embedReplacedValue && document.referrer.includes("multikick.com")) {
  78.         console.log("Embed replacement detected via referrer. Enabling theatre mode...");
  79.         const observer2 = new MutationObserver(() => {
  80.             const el = document.querySelector('[data-sidebar]');
  81.             el.dataset.sidebar = 'false';
  82.             el.dataset.chat = 'false';
  83.             el.dataset.theatre = 'true';
  84.  
  85.             GM_addStyle(`
  86.               [data-sidebar] > .w-xvw {
  87.                 padding-top: unset !important;
  88.               }
  89.  
  90.               #channel-content {
  91.                 display: none;
  92.               }
  93.             `);
  94.  
  95.             if (!chatButtonVisible) {
  96.                 GM_addStyle(`
  97.                 [data-theatre-mode-container] .z-controls > button {
  98.                   display: none !important;
  99.                 }
  100.               `);
  101.             }
  102.  
  103.             observer2.disconnect();
  104.             // Clear the flag so subsequent direct visits to kick.com don't trigger theatre mode
  105.             GM_setValue("embedReplaced", false);
  106.         });
  107.         observer2.observe(document.body, {
  108.             subtree: true,
  109.             childList: true,
  110.         });
  111.     }
  112. }