B站自动宽屏居中

Greasy Fork is available in English.
B站自动宽屏居中

自动宽屏播放并将播放器垂直居中视口，退出宽屏模式自动滚动页面到顶部。
当前为 2024-06-30 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         B站自动宽屏居中
// @namespace    @ChatGPT
// @supportURL   http://greasyfork.icu/zh-CN/scripts/492413-b%E7%AB%99%E8%87%AA%E5%8A%A8%E5%AE%BD%E5%B1%8F%E5%B1%85%E4%B8%AD/feedback
// @homepageURL  http://greasyfork.icu/zh-CN/scripts/492413-b%E7%AB%99%E8%87%AA%E5%8A%A8%E5%AE%BD%E5%B1%8F%E5%B1%85%E4%B8%AD
// @version      1.3
// @description  自动宽屏播放并将播放器垂直居中视口，退出宽屏模式自动滚动页面到顶部。
// @author       ChatGPT;ChatGLM
// @license      MIT
// @match        https://*.bilibili.com/*
// @grant        GM_getValue
// @grant        GM_setValue
// @grant        GM_registerMenuCommand
// @run-at       document-end
// ==/UserScript==

(function() {
    'use strict';

    let wideBtn, webFullBtn, fullBtn, player;

    function cacheElements() {
        wideBtn = document.querySelector('.bpx-player-ctrl-wide');
        webFullBtn = document.querySelector('.bpx-player-ctrl-web');
        fullBtn = document.querySelector('.bpx-player-ctrl-full');
        player = document.querySelector('#bilibili-player');
    }

    function waitForElement(selector, callback) {
        const element = document.querySelector(selector);
        if (element) {
            callback(element);
        } else {
            const observer = new MutationObserver(() => {
                const el = document.querySelector(selector);
                if (el) {
                    callback(el);
                    observer.disconnect();
                }
            });
            observer.observe(document, { childList: true, subtree: true });
        }
    }

    function scrollToPosition(topPosition) {
        window.scrollTo({ top: topPosition, behavior: 'smooth' });
    }

    function scrollToPlayer() {
        if (player) {
            const playerTop = player.getBoundingClientRect().top + window.pageYOffset;
            const newPosition = playerTop - 75;
            scrollToPosition(newPosition);
        }
    }

    function scrollToTop() {
        scrollToPosition(0);
    }

    function setWideMode(enable) {
        if (wideBtn && enable && !wideBtn.classList.contains('bpx-state-entered')) {
            wideBtn.click();
            setTimeout(scrollToPlayer, 500);
        }
    }

    function handleKeyPress(event) {
        if (event.key === 'Escape') {
            setTimeout(() => handlePlayerStateChange(), 100);
        }
    }

    function registerMenuCommands() {
        const isEnabled = GM_getValue('enableWideScreen', true);
        const statusText = isEnabled ? '开启' : '关闭';
        GM_registerMenuCommand(`自动宽屏（当前：${statusText}）`, () => {
            toggleWideScreen();
            registerMenuCommands(); 
        });
    }

    function toggleWideScreen() {
        const enableWideScreen = GM_getValue('enableWideScreen', true);
        GM_setValue('enableWideScreen', !enableWideScreen);
        setWideMode(!enableWideScreen);
        window.location.reload();
    }

    function handlePlayerStateChange() {
        const isWideScreen = wideBtn.classList.contains('bpx-state-entered');
        const isFullScreen = document.fullscreenElement || document.webkitFullscreenElement;
        if (isWideScreen && !isFullScreen) {
            scrollToPlayer();
        } else {
            scrollToTop();
        }
    }

    function init() {
        registerMenuCommands();
        waitForElement('.bpx-player-ctrl-wide', () => {
            cacheElements();
            setupEventListeners();
            setWideMode(GM_getValue('enableWideScreen', true));
        });
        document.addEventListener('keydown', handleKeyPress);

        const observer = new MutationObserver((mutationsList) => {
            mutationsList.forEach((mutation) => {
                if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
                    handlePlayerStateChange();
                }
            });
        });

        waitForElement('#bilibili-player', (element) => {
            player = element;
            observer.observe(element, { attributes: true });
        });
    }

    function setupEventListeners() {
        if (wideBtn) {
            wideBtn.addEventListener('click', () => {
                setTimeout(() => handlePlayerStateChange(), 100);
            });
        }
        if (webFullBtn) {
            webFullBtn.addEventListener('click', () => {
                setTimeout(() => handlePlayerStateChange(), 100);
            });
        }
        if (fullBtn) {
            fullBtn.addEventListener('click', () => {
                setTimeout(() => handlePlayerStateChange(), 100);
            });
        }
        document.querySelector('.bpx-player-video-area').addEventListener('dblclick', () => {
            setTimeout(() => handlePlayerStateChange(), 100);
        });

        document.addEventListener('fullscreenchange', handlePlayerStateChange);
        document.addEventListener('webkitfullscreenchange', handlePlayerStateChange);
    }

    init();
})();