☰

Ultrawide Fix for Kick

Adjust video player to maintain 21:9 aspect ratio, filling screen minus sidebars and toolbars with minimal cropping, with dynamic full-screen adjustment

// ==UserScript==
// @name         Ultrawide Fix for Kick
// @namespace    https://greasyfork.org/en/users/1200587-trilla-g
// @version      1.18
// @description  Adjust video player to maintain 21:9 aspect ratio, filling screen minus sidebars and toolbars with minimal cropping, with dynamic full-screen adjustment
// @match        *://kick.com/*
// @grant        none
// @license      MIT
// @run-at       document-idle
// ==/UserScript==

(function () {
    'use strict';

    let adjustVideoElement = () => {
        let videoElement = document.querySelector("video");
        if (videoElement) {
            let leftSidebarWidth = 259;
            let rightSidebarWidth = 345;
            let topToolbarHeight = 77;

            if (document.fullscreenElement) {
                videoElement.style.width = '100vw';
                videoElement.style.height = 'calc(100vw / (21 / 9))';
                videoElement.style.position = 'fixed';
                videoElement.style.left = '0';
                videoElement.style.top = '0';
            } else {
                let viewportWidth = window.innerWidth;
                let availableWidth = viewportWidth - (leftSidebarWidth + rightSidebarWidth);
                let desiredHeight = availableWidth / (21 / 9);

                videoElement.style.width = `${availableWidth}px`;
                videoElement.style.height = `${desiredHeight}px`;
                videoElement.style.position = 'fixed';
                videoElement.style.left = `${leftSidebarWidth}px`;
                videoElement.style.top = `${topToolbarHeight}px`;
            }

            videoElement.style.objectFit = 'fill';
        }
    };

    // Observe DOM changes to reapply adjustments
    let observeChanges = () => {
        let observer = new MutationObserver((mutations) => {
            mutations.forEach((mutation) => {
                if (mutation.type === 'childList') {
                    adjustVideoElement();
                }
            });
        });

        observer.observe(document.body, { childList: true, subtree: true });
    };

    // Trigger adjustments on relevant events
    window.addEventListener('resize', adjustVideoElement);
    window.addEventListener('popstate', adjustVideoElement);
    document.addEventListener('fullscreenchange', adjustVideoElement);

    // Initial adjustment
    adjustVideoElement();

    // Start observing changes
    observeChanges();
})();