Ultrawide Fix for Kick (Auto Toggle by Aspect Ratio)

Ultrawide Fix for Kick

Adjust video player to maintain 21:9 aspect ratio, filling screen minus sidebars and toolbars with minimal cropping
目前為 2024-09-17 提交的版本，檢視最新版本。
安裝腳本 ?
換行
// ==UserScript==
// @name         Ultrawide Fix for Kick
// @namespace    https://greasyfork.org/en/users/1200587-trilla-g
// @version      1.10
// @description  Adjust video player to maintain 21:9 aspect ratio, filling screen minus sidebars and toolbars with minimal cropping
// @match        *://kick.com/*
// @grant        none
// @license      MIT
// @author       Trilla_G
// ==/UserScript==

(function() {
    'use strict';

    // Function to adjust the video element considering sidebars and maintain 21:9 aspect ratio
    let adjustVideoElement = () => {
        // Select the <video> element
        let videoElement = document.querySelector("video");

        if (videoElement) {
            // Sidebar and toolbar dimensions
            let leftSidebarWidth = 256;  // Left sidebar width
            let rightSidebarWidth = 340;  // Right sidebar width
            let totalSidebarWidth = leftSidebarWidth + rightSidebarWidth;  // Total width of both sidebars
            let topToolbarHeight = 50;   // Estimate for top toolbar
            let bottomToolbarHeight = 0; // Adjust bottom toolbar height to allow full screen fitting

            // Calculate available width and height
            let viewportWidth = window.innerWidth;  // Full viewport width
            let viewportHeight = window.innerHeight;  // Full viewport height
            let availableWidth = viewportWidth - totalSidebarWidth;  // Width after accounting for sidebars
            let availableHeight = viewportHeight - topToolbarHeight - bottomToolbarHeight;  // Height after toolbars

            // Maintain a 21:9 aspect ratio
            let desiredHeight = availableWidth / (21 / 9);  // Calculate height based on 21:9 aspect ratio

            // Set the video dimensions to fill the width and adjust height accordingly
            videoElement.style.width = `${availableWidth}px`;  // Set width to available width
            videoElement.style.height = `${desiredHeight + 20}px`;  // Extend height by 10 pixels

            // Adjust the container dimensions
            videoElement.style.position = 'fixed';  // Use fixed positioning
            videoElement.style.left = `${leftSidebarWidth}px`;  // Offset for the left sidebar
            videoElement.style.top = `${topToolbarHeight}px`;  // Position at the top

            // Ensure the video fits within the container without significant cropping
            videoElement.style.objectFit = 'fill';  // Scale to fill the container
        }
    };

    // Function to handle URL changes and trigger the script
    let handleUrlChange = () => {
        adjustVideoElement();  // Always adjust the video element
    };

    // Run the adjustment initially
    handleUrlChange();

    // Monitor for changes in the page state
    window.addEventListener('popstate', handleUrlChange);
    window.addEventListener('pushState', handleUrlChange);

    // Override pushState to handle dynamic content changes
    let originalPushState = history.pushState;
    history.pushState = function() {
        originalPushState.apply(this, arguments);
        handleUrlChange();  // Trigger on navigation to a new URL
    };

    // Continuously adjust video element every 500ms
    setInterval(adjustVideoElement, 500);
})();