update: handle wide screen mode #80

festoney8 · Jun 4, 2024 · 2ddc401 · 2ddc401
1 parent cd911a2
commit 2ddc401
Showing 1 changed file with 34 additions and 45 deletions.
diff --git a/src/rules/video.ts b/src/rules/video.ts
@@ -90,13 +90,31 @@ const simpleShare = () => {
     }, 200)
 }
 
+/** 宽屏模式监听 */
+let _isWide = unsafeWindow.isWide
+// 修改unsafeWindow.isWide时执行的函数列表
+const onIsWideChangeFuncArr: (() => void)[] = []
+Object.defineProperty(unsafeWindow, 'isWide', {
+    get() {
+        return _isWide
+    },
+    set(value) {
+        _isWide = value
+        if (typeof _isWide === 'boolean') {
+            onIsWideChangeFuncArr.forEach((func) => func())
+        }
+    },
+    configurable: true,
+    enumerable: true,
+})
+
 /** 隐藏弹幕栏时，强行调节播放器高度 */
 const overridePlayerHeight = () => {
     // 念咒
     const genSizeCSS = (): string => {
-        const e = window.isWide
-        const i = window.innerHeight
-        const t = Math.max((document.body && document.body.clientWidth) || window.innerWidth, 1100)
+        const e = unsafeWindow.isWide
+        const i = unsafeWindow.innerHeight
+        const t = Math.max((document.body && document.body.clientWidth) || unsafeWindow.innerWidth, 1100)
         const n = 1680 < innerWidth ? 411 : 350
         const o = (16 * (i - (1690 < innerWidth ? 318 : 308))) / 9
         const r = t - 112 - n
@@ -108,12 +126,12 @@ const overridePlayerHeight = () => {
             d = 1694
         }
         let a = d + n
-        if (window.isWide) {
+        if (unsafeWindow.isWide) {
             a -= 125
             d -= 100
         }
         let l
-        if (window.hasBlackSide && !window.isWide) {
+        if (unsafeWindow.hasBlackSide && !unsafeWindow.isWide) {
             l = Math.round((d - 14 + (e ? n : 0)) * 0.5625) + 96
         } else {
             l = Math.round((d + (e ? n : 0)) * 0.5625)
@@ -156,24 +174,8 @@ const overridePlayerHeight = () => {
     if (document.head) {
         observeStyle.observe(document.head, { childList: true })
     }
-
-    // 监听宽屏按钮click
-    let isWide = window.isWide
-    const observeBtn = new MutationObserver(() => {
-        const wideBtn = document.querySelector('#bilibili-player .bpx-player-ctrl-wide') as HTMLElement
-        if (wideBtn) {
-            wideBtn.addEventListener('click', () => {
-                debug('wideBtn click detected')
-                window.isWide = !isWide
-                isWide = !isWide
-                overrideCSS()
-            })
-            observeBtn.disconnect()
-        }
-    })
-    document.addEventListener('DOMContentLoaded', () => {
-        observeBtn.observe(document, { childList: true, subtree: true })
-    })
+    // 宽屏模式
+    onIsWideChangeFuncArr.push(overrideCSS)
 }
 
 /** 投币时取消自动点赞 */
@@ -265,29 +267,28 @@ if (isPageVideo() || isPagePlaylist()) {
             `,
             // fix #80 宽屏模式下播放器遮盖up主
             itemFunc: () => {
-                let _isWide = window.isWide
-                const onIsWideChange = (isWide: boolean) => {
-                    if (isWide) {
+                const func = () => {
+                    if (unsafeWindow.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 danmakuBox = document.querySelector('#danmukuBox') as HTMLElement
+                                if (danmakuBox) {
+                                    danmakuBox.style.marginTop = `${top}px`
+                                }
                                 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) {
+                                if (cnt > 200) {
                                     clearInterval(id)
                                 }
                             }
@@ -304,20 +305,8 @@ if (isPageVideo() || isPagePlaylist()) {
                         }
                     }
                 }
-                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,
-                })
+                unsafeWindow.isWide && func()
+                onIsWideChangeFuncArr.push(func)
             },
         }),
     ]