Adjust video player to fit full width, accounting for sidebars on ultrawide monitors and triggers on VOD navigation
目前為
// ==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);
})();