fix: exchange player position bug #80

festoney8 · Jun 4, 2024 · 1d1b82c · 1d1b82c
1 parent ea51983
commit 1d1b82c
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 14 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,7 @@
 ## 3.6.4
 
 -   新增：播放页展开完整视频标题
+-   修复：交换播放器和标题位置后，宽屏模式遮盖UP主bug
 -   优化：优化代码、优化功能细节
 
 ## 3.6.3

diff --git a/src/components/group.ts b/src/components/group.ts
@@ -32,7 +32,7 @@ export class Group {
         e.querySelector('.bili-cleaner-group')!.id = this.groupID
         e.querySelector('.bili-cleaner-group-title')!.innerHTML = this.title.replaceAll('\n', '<br>')
 
-        const groupList = document.getElementById('bili-cleaner-group-list') as HTMLFormElement
+        const groupList = document.getElementById('bili-cleaner-group-list') as HTMLElement
         groupList.appendChild(e)
     }
     /** 插入group内item列表, 并逐一监听 */

diff --git a/src/components/item.ts b/src/components/item.ts
@@ -71,7 +71,7 @@ export class CheckboxItem implements IItem {
             if (this.isEnable) {
                 e.querySelector('input')!.checked = true
             }
-            const itemGroupList = document.querySelector(`#${groupID} .bili-cleaner-item-list`) as HTMLFormElement
+            const itemGroupList = document.querySelector(`#${groupID} .bili-cleaner-item-list`) as HTMLElement
             if (itemGroupList) {
                 itemGroupList.appendChild(e)
                 debug(`insertItem ${this.option.itemID} OK`)
@@ -247,7 +247,7 @@ export class RadioItem implements IItem {
             }
             // 设定radio input所属互斥组
             e.querySelector('input')!.name = this.option.radioName
-            const itemGroupList = document.querySelector(`#${groupID} .bili-cleaner-item-list`) as HTMLFormElement
+            const itemGroupList = document.querySelector(`#${groupID} .bili-cleaner-item-list`) as HTMLElement
             if (itemGroupList) {
                 itemGroupList.appendChild(e)
                 debug(`insertItem ${this.option.itemID} OK`)
@@ -428,7 +428,7 @@ export class NumberItem implements IItem {
             inputNode.setAttribute('value', this.itemValue!.toString())
             inputNode.setAttribute('min', this.option.minValue.toString())
             inputNode.setAttribute('max', this.option.maxValue.toString())
-            const itemGroupList = document.querySelector(`#${groupID} .bili-cleaner-item-list`) as HTMLFormElement
+            const itemGroupList = document.querySelector(`#${groupID} .bili-cleaner-item-list`) as HTMLElement
             if (itemGroupList) {
                 itemGroupList.appendChild(node)
                 debug(`insertItem ${this.option.itemID} OK`)
@@ -572,7 +572,7 @@ export class ButtonItem implements IItem {
             node.id = this.option.itemID
             node.innerHTML = `${this.nodeHTML}${this.option.description.replaceAll('\n', '<br>')}`
             node.querySelector('button')!.innerHTML = this.option.name
-            const itemGroupList = document.querySelector(`#${groupID} .bili-cleaner-item-list`) as HTMLFormElement
+            const itemGroupList = document.querySelector(`#${groupID} .bili-cleaner-item-list`) as HTMLElement
             if (itemGroupList) {
                 itemGroupList.appendChild(node)
                 debug(`insertItem ${this.option.itemID} OK`)

diff --git a/src/components/panel.ts b/src/components/panel.ts
@@ -58,7 +58,7 @@ export class Panel {
     /** 右上角关闭按钮 */
     watchCloseBtn() {
         try {
-            const closeBtn = document.getElementById('bili-cleaner-close') as HTMLFormElement
+            const closeBtn = document.getElementById('bili-cleaner-close') as HTMLElement
             closeBtn.addEventListener('click', () => {
                 this.hide()
             })
@@ -71,8 +71,8 @@ export class Panel {
     /** 可拖拽panel bar, 拖拽panel顶部的bar可移动panel, 其他区域不可拖拽 */
     draggableBar() {
         try {
-            const panel = document.getElementById('bili-cleaner') as HTMLFormElement
-            const bar = document.getElementById('bili-cleaner-bar') as HTMLFormElement
+            const panel = document.getElementById('bili-cleaner') as HTMLElement
+            const bar = document.getElementById('bili-cleaner-bar') as HTMLElement
             let isDragging = false
             let initX: number, initY: number, initLeft: number, initTop: number
 
@@ -125,7 +125,7 @@ export class Panel {
     }
     /** 隐藏panel */
     hide() {
-        const panel = document.getElementById('bili-cleaner') as HTMLFormElement
+        const panel = document.getElementById('bili-cleaner') as HTMLElement
         if (panel) {
             // 使用 display:none 代替 remove(), 同一页面内再次打开panel记录上次位置
             panel.style.display = 'none'
@@ -134,15 +134,15 @@ export class Panel {
     }
     /** 显示panel */
     show() {
-        const panel = document.getElementById('bili-cleaner') as HTMLFormElement
+        const panel = document.getElementById('bili-cleaner') as HTMLElement
         if (panel) {
             panel.style.removeProperty('display')
         }
         this.isShowing = true
     }
     /** 清空panel内groups, 用于替换功能group */
     clearGroups() {
-        const groupList = document.getElementById('bili-cleaner-group-list') as HTMLFormElement
+        const groupList = document.getElementById('bili-cleaner-group-list') as HTMLElement
         if (groupList) {
             groupList.innerHTML = ''
         }

diff --git a/src/components/wordlist.ts b/src/components/wordlist.ts
@@ -177,8 +177,8 @@ export class WordList {
     /** 可拖拽bar */
     draggableBar() {
         try {
-            const wordlist = document.getElementById('bili-cleaner-wordlist') as HTMLFormElement
-            const bar = document.querySelector('#bili-cleaner-wordlist .wordlist-header') as HTMLFormElement
+            const wordlist = document.getElementById('bili-cleaner-wordlist') as HTMLElement
+            const bar = document.querySelector('#bili-cleaner-wordlist .wordlist-header') as HTMLElement
             let isDragging = false
             let initX: number, initY: number, initLeft: number, initTop: number
 

diff --git a/src/rules/video.ts b/src/rules/video.ts
@@ -3,7 +3,7 @@ import { CheckboxItem } from '../components/item'
 import { debugRules as debug, error } from '../utils/logger'
 import { matchAvidBvid, matchBvid } from '../utils/tool'
 import { isPageFestival, isPagePlaylist, isPageVideo } from '../utils/page-type'
-import { GM_getValue, GM_setValue } from '$'
+import { GM_getValue, GM_setValue, unsafeWindow } from '$'
 
 /** BV号转AV号 */
 const bv2av = () => {
@@ -263,6 +263,62 @@ if (isPageVideo() || isPagePlaylist()) {
                     margin-bottom: 0 !important;
                 }
             `,
+            // fix #80 宽屏模式下播放器遮盖up主
+            itemFunc: () => {
+                let _isWide = window.isWide
+                const onIsWideChange = (isWide: boolean) => {
+                    if (isWide) {
+                        let cnt = 0
+                        const id = setInterval(() => {
+                            const player = document.querySelector(
+                                `.bpx-player-container[data-screen="wide"]`,
+                            ) as HTMLElement
+                            if (player) {
+                                const top = parseInt(getComputedStyle(player).height) + 50
+                                const upPanel = document.querySelector('.up-panel-container') as HTMLElement
+                                if (upPanel) {
+                                    upPanel.style.position = 'relative'
+                                    upPanel.style.top = `${top}px`
+                                }
+                                const danmakuBox = document.querySelector('#danmukuBox') as HTMLElement
+                                if (danmakuBox) {
+                                    danmakuBox.style.marginTop = `${top}px`
+                                }
+                                clearInterval(id)
+                            } else {
+                                cnt++
+                                if (cnt > 100) {
+                                    clearInterval(id)
+                                }
+                            }
+                        }, 10)
+                    } else {
+                        const upPanel = document.querySelector('.up-panel-container') as HTMLElement
+                        if (upPanel) {
+                            upPanel.style.position = 'static'
+                            upPanel.style.top = '0'
+                        }
+                        const danmakuBox = document.querySelector('#danmukuBox') as HTMLElement
+                        if (danmakuBox) {
+                            danmakuBox.style.marginTop = '0'
+                        }
+                    }
+                }
+                window.isWide && onIsWideChange(true)
+                Object.defineProperty(unsafeWindow, 'isWide', {
+                    get() {
+                        return _isWide
+                    },
+                    set(value) {
+                        _isWide = value
+                        if (typeof _isWide === 'boolean') {
+                            onIsWideChange(_isWide)
+                        }
+                    },
+                    configurable: true,
+                    enumerable: true,
+                })
+            },
         }),
     ]
     videoGroupList.push(new Group('video-basic', '播放页 基本功能', basicItems))