Greasy Fork

本脚本的B站宽屏效果又快又好，但有一点让强迫症浑身难受，就是如附图，打开宽屏后上面的标题行会截掉一半，下面的弹幕输入栏也截掉一半。所以能不能加个定位判定之类的，能完整显示上或下一项？

B站宽屏后会重新定位，要新加个MutationObserver太麻烦了，故不考虑

B站宽屏后会重新定位，要新加个MutationObserver太麻烦了，故不考虑

            function setWide() {
                const btn = document.querySelector('.bpx-player-ctrl-wide:not(.bpx-state-entered)');
                if (btn) {
                    btn.click();
                    // 观察页面是否重新定位
                    const initialScrollY = window.scrollY;
                    setTimeout(() => {
                        if (window.scrollY !== initialScrollY) {
                            // 页面重新定位，上移30个像素
                            window.scrollBy(0, 30);
                            // 停止页面监听
                            if (unsafeWindow.ob) unsafeWindow.ob.disconnect();
                        }
                    }, 200); // 等待0.2秒后检查页面是否重新定位
                }
            }

            new Promise(resolve => {
                const player = document.querySelector('#bilibili-player');
                if (player) {
                    unsafeWindow.ob = new MutationObserver((mutationList) => {
                        setWide();
                    });
                    unsafeWindow.ob.observe(player, {
                        attributes: false,
                        subtree: true,
                        childList: true,
                    });
                }
                resolve();
            });

利用AI尝试修改了这段代码，能实现我说的效果，就是不知道会不会出现什么位置的问题。

测试没问题，200ms可能在加载慢的情况下失效，0.0.71更新加入。

测试没问题，200ms可能在加载慢的情况下失效，0.0.71更新加入。

更新0.0.71后大部分视频都能正常生效，就https://www.bilibili.com/video/BV1Rx421k7wc/?vd_source=3efabeba04674722b9e31a9cbdddd61a这个无论如何都不上移，真是奇怪。

测试没问题，200ms可能在加载慢的情况下失效，0.0.71更新加入。

更新0.0.71后大部分视频都能正常生效，就https://www.bilibili.com/video/BV1Rx421k7wc/?vd_source=3efabeba04674722b9e31a9cbdddd61a这个无论如何都不上移，真是奇怪。

再看了下，其实也是生效的，是因为这是个合作视频，头像上面多了一行“合作团队”的文本，降低了播放器位置，上移30个像素就不够了。

测试没问题，200ms可能在加载慢的情况下失效，0.0.71更新加入。

更新0.0.71后大部分视频都能正常生效，就https://www.bilibili.com/video/BV1Rx421k7wc/?vd_source=3efabeba04674722b9e31a9cbdddd61a这个无论如何都不上移，真是奇怪。

再看了下，其实也是生效的，是因为这是个合作视频，头像上面多了一行“合作团队”的文本，降低了播放器位置，上移30个像素就不够了。

            function setWide() {
                // 查询宽屏按钮，但不处理已经是宽屏状态的按钮
                const btn = document.querySelector('.bpx-player-ctrl-wide:not(.bpx-state-entered)');
                if (btn) {
                    btn.click();
                    // 观察页面是否重新定位，并且调整滚动位置，使播放器顶部与视口顶部相距75像素
                    setTimeout(() => {
                        const player = document.querySelector('#bilibili-player');
                        if (player) {
                            // 获取播放器的位置信息
                            const playerRect = player.getBoundingClientRect();
                            // 计算播放器顶部相对于视口顶部的偏移
                            const playerTopViewportOffset = playerRect.top;
                            // 计算并执行滚动操作，以实现所需的位置
                            const desiredScrollPosition = window.scrollY + playerTopViewportOffset - 75;
                            window.scrollTo({
                                top: desiredScrollPosition,
                                behavior: 'smooth'
                            });
                        }
                    }, 500);
                    // 如果已经存在MutationObserver实例，触发点击后停止监听
                    if (unsafeWindow.ob) unsafeWindow.ob.disconnect();
                }
            }
            new Promise(resolve => {
                // 选择B站播放器元素
                const player = document.querySelector('#bilibili-player');
                if (player && enableWideScreen) {
                    // 创建MutationObserver实例来监视DOM变化
                    unsafeWindow.ob = new MutationObserver((mutationList) => {
                        // 当DOM变化时尝试设置宽屏模式
                        setWide();
                    });
                    // 配置observer监视的内容
                    unsafeWindow.ob.observe(player, {
                        attributes: false,
                        subtree: true,
                        childList: true,
                    });
                }
                // 当上述逻辑运行完毕后，解析Promise
                resolve();
            });

终于解决了这个问题。

goodgood 73版加上