Ultrawide Fix for Kick

Adjust video player to fit full width, accounting for sidebars on ultrawide monitors and triggers on VOD navigation
当前为 2024-09-12 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         Ultrawide Fix for Kick
// @namespace    https://greasyfork.org/en/users/1200587-trilla-g
// @version      1.2
// @description  Adjust video player to fit full width, accounting for sidebars on ultrawide monitors and triggers on VOD navigation
// @match        *://kick.com/*
// @grant        none
// @license      MIT
// @author       Trilla_G
// ==/UserScript==

(function() {
    'use strict';

    // Function to adjust the video element considering sidebars and center it
    let adjustVideoElement = () => {
        // Select the <video> element
        let videoElement = document.querySelector("video");

        if (videoElement) {
            // Sidebar dimensions
            let leftSidebarWidth = 256;  // Left sidebar width
            let rightSidebarWidth = 340;  // Right sidebar width
            let totalSidebarWidth = leftSidebarWidth + rightSidebarWidth;  // Total width of both sidebars
            let viewportWidth = window.innerWidth;  // Full viewport width
            let availableWidth = viewportWidth - totalSidebarWidth;

            // Set the video width and height
            videoElement.style.width = `${availableWidth}px`;
            videoElement.style.height = 'auto';  // Maintain aspect ratio
            videoElement.style.maxWidth = 'none'; // Remove any max-width constraints
            videoElement.style.maxHeight = '100vh'; // Fit to viewport height
            videoElement.style.objectFit = 'cover';  // Fill the screen, cropping if needed

            // Center the video element horizontally
            videoElement.style.position = 'fixed'; // Use fixed positioning
            videoElement.style.left = `${leftSidebarWidth}px`;  // Offset for the left sidebar
            videoElement.style.top = '0';  // Align with the top of the viewport
        }
    };

    // Function to check if the URL is a VOD page
    let isVodPage = (url) => {
        const regex = /^https:\/\/kick\.com\/[^\/]+\/videos/;  // Matches kick.com/ANYUSERNAMEHERE/videos/
        return regex.test(url);
    };

    // Function to handle URL changes and trigger the script
    let handleUrlChange = () => {
        if (isVodPage(window.location.href)) {
            adjustVideoElement();  // Re-trigger the adjustment if it's a VOD page
        }
    };

    // Run the adjustment initially in case the user starts on a VOD page
    handleUrlChange();

    // Listen for URL changes (popstate and pushState for single-page applications)
    window.addEventListener('popstate', handleUrlChange);
    window.addEventListener('pushState', handleUrlChange);

    // Also listen for the URL to change dynamically (if a new page is loaded)
    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 for 5 seconds after navigation
    let interval = setInterval(() => {
        adjustVideoElement();
    }, 500);

    setTimeout(() => {
        clearInterval(interval);
    }, 5000);
})();