B站自动宽屏居中

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

自动宽屏播放并将播放器垂直居中视口，退出宽屏模式自动滚动页面到顶部。
当前为 2024-06-28 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         B站自动宽屏居中
// @namespace    @ChatGPT
// @version      1.2
// @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, player;

    function cacheElements() {
        wideBtn = document.querySelector('.bpx-player-ctrl-wide');
        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' && wideBtn.classList.contains('bpx-state-entered')) {
            wideBtn.click();
            scrollToTop();
        }
    }

    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 init() {
        registerMenuCommands();
        waitForElement('.bpx-player-ctrl-wide', () => {
            cacheElements();
            setupWideScreenButton();
            setWideMode(GM_getValue('enableWideScreen', true));
        });
        document.addEventListener('keydown', handleKeyPress);
    }

    function setupWideScreenButton() {
        wideBtn.addEventListener('click', () => {
            wideBtn.classList.contains('bpx-state-entered') ? scrollToPlayer() : scrollToTop();
        });
    }

    init();
})();