Greasy Fork

Greasy Fork is available in English.

B站宽屏播放器自动居中

进入宽屏模式时自动将播放器垂直居中视口，退出宽屏模式自动滚动页面到顶部。

当前为 2024-04-15 提交的版本，查看 最新版本。

// ==UserScript==
// @name         B站宽屏播放器自动居中
// @namespace    @ChatGPT
// @version      1.0
// @description  进入宽屏模式时自动将播放器垂直居中视口，退出宽屏模式自动滚动页面到顶部。
// @author       ChatGPT
// @license      MIT
// @match        https://*.bilibili.com/*
// @grant        none
// @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 init() {
        const wideBtn = document.querySelector(wideBtnSelector);
        if (wideBtn) {
            handleWideScreenButton(wideBtn);
        } else {
            const observer = new MutationObserver((mutations, obs) => {
                const wideBtn = document.querySelector(wideBtnSelector);
                if (wideBtn) {
                    handleWideScreenButton(wideBtn);
                    obs.disconnect();
                }
            });
            observer.observe(document, { childList: true, subtree: true });
        }
    }

    init();

})();