B站-播放器自动宽屏

B站进入播放页后，自动点击宽屏按钮，并将播放器滚动到合适的位置
换行
// ==UserScript==
// @name         B站-播放器自动宽屏
// @namespace    http://tampermonkey.net/
// @version      2024-09-14
// @description  B站进入播放页后，自动点击宽屏按钮，并将播放器滚动到合适的位置
// @author       oahnaLiew
// @match        https://www.bilibili.com/video/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=bilibili.com
// @grant        none
// @license      GPL-3.0 License
// ==/UserScript==

(function () {

    'use strict';

    scriptLog('Script started');

    // 顶部导航栏（需要根据其高度计算最后播放器的位置）
    var headerBar = null;
    // 「播放器」对象
    var player = null;
    // 「宽屏」按钮
    var btnWide = null;

    // 尝试获取按钮的次数
    var count = 0;
    // 执行完成标记，避免重复运行
    var done = false;

    // 获取所有需要用到的界面元素
    function getElements() {

        scriptLog('getElements()');

        headerBar = document.querySelector('.bili-header__bar.mini-header');
        player = document.getElementById('bilibili-player');
        btnWide = document.querySelector('.bpx-player-ctrl-btn-icon.bpx-player-ctrl-wide-enter');

        // 必须获取到所有需要的元素才算成功
        if (btnWide && player && headerBar) {
            return true;
        } else {
            return false;
        }
    }

    // 自动宽屏并滚动到合适位置
    function autoWide() {

        scriptLog('autoWide()：' + count);

        // 如果没有获取到需要的元素
        if (!getElements()) {

            // 500 毫秒后重试，最多尝试 20 次（10秒）
            if (count++ < 20) {
                setTimeout(autoWide, 500);
            } else { // 超时，获取不到对象，就算了
                scriptLog('getElements(): timeout! ');
            }

            return;
        }

        scriptLog('Got elements');

        // 获取到元素后，重置尝试次数，后面可能还要用到
        count = 0;

        // 给「宽屏」按钮增加点击事件监听
        btnWide.addEventListener('click', function () {

            scriptLog('btnWide clicked');

            // 每次点击延迟 500 毫秒自动调整播放器位置
            setTimeout(scrollPlayer, 500)
        });

        // 自动点击「宽屏」按钮
        btnWide.click();

        // 标记完成，避免重复执行
        done = true;
    }

    // 将播放器滚动到合适的位置
    function scrollPlayer() {

        scriptLog('scrollPlayer(): ' + count);

        // 获取窗口和所有相关元素的高度
        var windowHeight = window.innerHeight;
        var headerBarHeight = headerBar.getBoundingClientRect().height;
        var playerHeight = player.getBoundingClientRect().height;
        // 获取当前窗口的滚动距离，以及播放器顶部相对于窗口顶部的距离
        var scrollTop = document.documentElement.scrollTop;
        var playerTop = player.getBoundingClientRect().top;

        scriptLog("windowHeight : " + windowHeight);
        scriptLog("headerBarHeight : " + headerBarHeight);
        scriptLog("playerHeight : " + playerHeight);
        scriptLog("scrollTop : " + scrollTop);
        scriptLog("playerTop : " + playerTop);

        // 有时候无法获取到正确的元素高度，直接给定默认值
        if (headerBarHeight == 0) {
            headerBarHeight = 64;
        }
        if (playerHeight == 0) {
            playerHeight = 712;
        }

        // 有时候会获取不到正确的高度
        // if (headerBarHeight == 0 || playerHeight == 0) {

        //     // 500 毫秒后重试，同样只尝试 20 次（10秒）
        //     if (count++ < 20) {

        //         scriptLog('getHeight: ' + count);

        //         setTimeout(scrollPlayer, 500);
        //         // window.requestAnimationFrame(scrollPlayer);
        //         return;

        //     } else { // 超时后给定默认值

        //         scriptLog("getHeight Timeout! ");

        //         if (headerBarHeight == 0) {
        //             headerBarHeight = 64;
        //         }

        //         if (playerHeight == 0) {
        //             playerHeight = 712;
        //         }
        //     }
        // }

        scriptLog("Got Height ");

        var playerFinalTop = 0;

        // 如果 窗口高度 大于 （顶栏 + 播放器 + 空隙）
        if (windowHeight > (headerBarHeight + playerHeight + 10)) {

            scriptLog("Big window");

            // 修改顶栏的 position 属性，可以固定显示
            headerBar.style.position = "fixed";
            // 使播放器顶部距离顶栏10个像素
            playerFinalTop = headerBarHeight + 10;

        }
        // 窗口高度不够
        else {

            scriptLog("Small window");

            // 修改顶栏的 position 属性，使其不要固定显示在顶部
            headerBar.style.position = "absolute";
            // 使播放器顶部距离窗口顶部 10 个像素
            playerFinalTop = 10;
        }

        scriptLog("playerFinalTop : " + playerFinalTop);

        // 滚动到指定位置
        window.scrollTo({
            // 播放器顶部 与 窗口顶部 的距离为 playerFinalTop 个像素
            top: scrollTop + playerTop - playerFinalTop,
            // 使用平滑滚动效果，可选
            behavior: 'smooth' 
        });
        
        scriptLog("window.scrollTo : " + playerFinalTop);

        // 强制触发浏览器重绘，使得对于 headerBar 的 position 属性的修改生效
        headerBar.offsetHeight = headerBar.offsetHeight;

    }

    // 当页面在前台时才执行
    // 因为经常提前在后台打开多个视频标签页，而标签页在后台时不会加载DOM元素，但是脚本依然会运行
    // 等切换到提前在后台打开的视频标签页时，上述代码的早已运行完毕，仍无法获取到所需的元素对象

    // 若是直接前台打开的页面，就直接执行
    if (!document.hidden) {

        scriptLog("页面就在前台，直接执行");
        autoWide();

    } else { // 否则，监听页面可见性变化事件

        document.addEventListener('visibilitychange', function () {

            // 当页面切换到前台，且「未完成」，则执行代码
            // 一定要有「执行完毕」的标记，否则切换标签页时会重复执行
            if (!document.hidden && !done) {
                scriptLog("页面切换到前台");
                autoWide();
            }
        });

    }

    function scriptLog(message) {
        console.log("【B站-自动宽屏】： " + message);
    }

})();
欢迎访问Greasy Fork镜像
