From 8260dba2d8149d769845c007e81bc44cd4836bca Mon Sep 17 00:00:00 2001
From: eeelester <11475842+eeelester@users.noreply.github.com>
Date: Tue, 8 Oct 2024 13:53:20 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=88=87=E6=8D=A2=E6=B8=85=E6=99=B0?=
 =?UTF-8?q?=E5=BA=A6=E5=90=8E=E6=97=A0=E6=B3=95=E6=AD=A3=E7=A1=AE=E7=9B=91?=
 =?UTF-8?q?=E5=90=ACvideo=E5=AE=BD=E5=BA=A6=E5=8F=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 entrypoints/content.tsx | 54 ++++++++++++++++++++++++++++++++++++++---
 1 file changed, 51 insertions(+), 3 deletions(-)

diff --git a/entrypoints/content.tsx b/entrypoints/content.tsx
index e3d6718..aafbbc8 100644
--- a/entrypoints/content.tsx
+++ b/entrypoints/content.tsx
@@ -14,6 +14,7 @@ export default defineContentScript({
         let existElement: HTMLElement | null
         let root: Root | null
         let liveWS: LiveWS | null
+        let resizeObserver: ResizeObserver | null
         let switchState: boolean = true
         let isMount = false
         let isFirst = true
@@ -39,11 +40,13 @@ export default defineContentScript({
             true,
         );
 
-        // 判断video出现的时机，没用mutationobserver是因为监听iframe里的节点麻烦
+        // video出现的时机
         function loop() {
             const video = getVideoDom()
             if (video) {
                 listenVideoSizeChange(video)
+                // 如果切换清晰度，会销毁原本的video，然后新增video，所以原本在之前的video监听宽度已经没用了，需要重新监听
+                monitorVideo(video)
             } else {
                 window.requestAnimationFrame(loop);
             }
@@ -51,6 +54,51 @@ export default defineContentScript({
 
         window.requestAnimationFrame(loop);
 
+        function monitorVideo(video){
+            const videoParent = video.parentNode
+
+            // 当观察到变动时执行的回调函数
+            const callback = function (mutationsList) {
+                for (const mutation of mutationsList) {
+                    if (mutation.type === 'childList') {
+                        for (const i of mutation.addedNodes) {
+                            // 遍历新增的节点，取出新增的video节点
+                            const addVideoDom = getAddVideoDom(i);
+                            if(addVideoDom){
+                                resizeObserver?.disconnect()
+                                listenVideoSizeChange(addVideoDom)
+                            }
+                        }
+                    }
+                }
+            };
+        
+            // 创建一个观察器实例并传入回调函数
+            const observer = new MutationObserver(callback);
+        
+            // 以上述配置开始观察目标节点
+            observer.observe(videoParent as Node, {
+                attributes: false,
+                childList: true,
+                subtree: true
+            });
+        }
+
+        function getAddVideoDom(dom: HTMLElement | ChildNode): false | HTMLVideoElement {
+            if (dom.nodeName === 'VIDEO') {
+                return dom as HTMLVideoElement;
+            }
+        
+            for (const i of dom.childNodes) {
+                const iframeDom = getAddVideoDom(i);
+                if (iframeDom) {
+                    return iframeDom;
+                }
+            }
+            return false;
+        }
+
+
         function mount(log: string) {
             if (isMount) return
             isMount = true
@@ -92,7 +140,7 @@ export default defineContentScript({
 
         function listenVideoSizeChange(video: HTMLVideoElement) {
             let lastTimePageFullScreen = false
-            const resizeObserver = new ResizeObserver((entries) => {
+            resizeObserver = new ResizeObserver((entries) => {
                 // 当用户在popup关闭此功能后
                 if (!switchState)
                     return
@@ -157,7 +205,7 @@ export default defineContentScript({
             })
         }
 
-        // 获取跟video的父级dom（B站video的父级dom结构老是变，有病的！）
+        // 获取跟video的dom（B站video的父级dom结构老是变，有病的！）
         function getVideoDom() {
             return document.querySelector('video') || getVideoDomFromIframe()?.contentDocument?.querySelector('video')
         }