返回首頁 

Beautify

美化<误>各网页界面

< 脚本Beautify的反馈

评价:好评 - 脚本运行良好

发表于:2024-02-26

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

symant作者
发表于:2024-02-28

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

发表于:2024-03-21

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尝试修改了这段代码,能实现我说的效果,就是不知道会不会出现什么位置的问题。

symant作者
发表于:2024-03-21

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

发表于:2024-03-21

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

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

发表于:2024-03-21

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

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

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

发表于:2024-03-24

测试没问题,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,});}// 当上述逻辑运行完毕后,解析Promiseresolve();});

终于解决了这个问题。

symant作者
发表于:2024-03-24

goodgood 73版加上

发表回复

登录以发表回复。