B站自动宽屏居中

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

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

    const wideBtnSelector = '.bpx-player-ctrl-wide';
    let lastScrollPosition = 0;

    function scrollToPlayer() {
        const player = document.querySelector('#bilibili-player');
        if (player) {
            lastScrollPosition = window.pageYOffset;
            const playerTop = player.getBoundingClientRect().top + window.pageYOffset;
            const newPosition = playerTop - 75;
            window.scrollTo({ top: newPosition, behavior: 'smooth' });
        }
    }

    function scrollToTop() {
        window.scrollTo({ top: 0, behavior: 'smooth' });
    }

    function handleWideScreenButton(wideBtn) {
        wideBtn.addEventListener('click', () => {
            const isInWideMode = wideBtn.classList.contains('bpx-state-entered');
            if (isInWideMode) {
                scrollToPlayer();
            } else {
                scrollToTop();
            }
        });
    }

    function setWide(enable) {
        if (!enable) return;
        const wideBtn = document.querySelector(wideBtnSelector);
        if (wideBtn && !wideBtn.classList.contains('bpx-state-entered')) {
            wideBtn.click();
            setTimeout(scrollToPlayer, 500);
        }
    }

    function init() {
        const enableWideScreen = GM_getValue('enableWideScreen', true);
        GM_registerMenuCommand('切换宽屏设置', () => GM_setValue('enableWideScreen', !enableWideScreen));

        const wideBtn = document.querySelector(wideBtnSelector);
        if (wideBtn) {
            handleWideScreenButton(wideBtn);
            setWide(enableWideScreen);
        } else {
            const observer = new MutationObserver((mutations, obs) => {
                const wideBtn = document.querySelector(wideBtnSelector);
                if (wideBtn) {
                    handleWideScreenButton(wideBtn);
                    setWide(enableWideScreen);
                    obs.disconnect();
                }
            });
            observer.observe(document, { childList: true, subtree: true });
        }
        document.addEventListener('keydown', (event) => {
            if (event.key === 'Escape') {
                const wideBtn = document.querySelector(wideBtnSelector);
                if (wideBtn && wideBtn.classList.contains('bpx-state-entered')) {
                    scrollToTop();
                }
            }
        });
    }

    init();

})();