☰

B站播放界面尺寸自动调整

浏览器全屏时，把B站播放界面调整到合适的更大尺寸

// ==UserScript==
// @name         B站播放界面尺寸自动调整
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  浏览器全屏时，把B站播放界面调整到合适的更大尺寸
// @author       coccvo
// @match        https://www.bilibili.com/video/*
// @icon         https://www.bilibili.com/favicon.ico
// @license      MIT
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 定义目标尺寸
    const targetWidth = "1415px";
    const targetHeight = "796px";
    const videoContainerWidthThreshold = 1882;

    // 防抖设置
    let resizeTimeout;
    const debounceTime = 200; // 防抖延迟时间，毫秒

    // 缓存DOM元素
    let videoContainer = null;
    let leftContainer = null;
    let playerWrap = null;
    let bilibiliPlayer = null;

    // 检查并应用样式
    function checkAndApplyStyles() {
        // 如果元素未找到，尝试重新获取
        if (!videoContainer || !leftContainer || !playerWrap || !bilibiliPlayer) {
            videoContainer = document.getElementById("mirror-vdcon");
            leftContainer = document.querySelector(".left-container.scroll-sticky");
            playerWrap = document.getElementById("playerWrap");
            bilibiliPlayer = document.getElementById("bilibili-player");
        }

        // 检查元素是否存在
        if (!videoContainer || !leftContainer || !playerWrap || !bilibiliPlayer) {
            console.log("未找到必要的元素");
            return;
        }

        // 获取视频容器的当前宽度
        const containerWidth = videoContainer.clientWidth;

        // 如果容器宽度未变化，不执行后续操作
        if (checkAndApplyStyles.lastWidth === containerWidth) {
            return;
        }
        checkAndApplyStyles.lastWidth = containerWidth;

        // 清除之前添加的样式
        leftContainer.style.removeProperty('width');
        playerWrap.style.removeProperty('height');
        bilibiliPlayer.style.removeProperty('width');
        bilibiliPlayer.style.removeProperty('height');

        // 如果视频容器宽度达到或超过阈值，应用自定义样式
        if (containerWidth >= videoContainerWidthThreshold) {
            leftContainer.style.width = targetWidth;
            playerWrap.style.height = targetHeight;
            bilibiliPlayer.style.width = targetWidth;
            bilibiliPlayer.style.height = targetHeight;
            console.log("已应用自定义样式");
        } else {
            console.log("未应用自定义样式，视频容器宽度不足");
        }
    }
    checkAndApplyStyles.lastWidth = null;

    // 防抖函数
    function debounce(func, delay) {
        return function() {
            const context = this;
            const args = arguments;
            clearTimeout(resizeTimeout);
            resizeTimeout = setTimeout(() => func.apply(context, args), delay);
        };
    }

    // 优化后的窗口大小变化处理函数
    const optimizedResizeHandler = debounce(checkAndApplyStyles, debounceTime);

    // 初始检查
    checkAndApplyStyles();

    // 创建观察器实例
    const observer = new MutationObserver(mutationsList => {
        // 检查是否有相关DOM变化
        for (const mutation of mutationsList) {
            if (
                mutation.type === 'attributes' &&
                (mutation.target.id === 'mirror-vdcon' ||
                 mutation.target.classList.contains('left-container') ||
                 mutation.target.id === 'playerWrap' ||
                 mutation.target.id === 'bilibili-player')
            ) {
                optimizedResizeHandler();
                break;
            }
        }
    });

    // 开始观察相关节点
    if (videoContainer) observer.observe(videoContainer, { attributes: true, attributeFilter: ['style', 'class'] });
    if (leftContainer) observer.observe(leftContainer, { attributes: true, attributeFilter: ['style', 'class'] });
    if (playerWrap) observer.observe(playerWrap, { attributes: true, attributeFilter: ['style', 'class'] });
    if (bilibiliPlayer) observer.observe(bilibiliPlayer, { attributes: true, attributeFilter: ['style', 'class'] });

    // 监听窗口大小变化
    window.addEventListener('resize', optimizedResizeHandler);

    // 页面加载完成后检查
    window.addEventListener('load', checkAndApplyStyles);
})();