Update app.py

app.py

@@ -360,80 +360,93 @@ button.lg.secondary.svelte-1gz44hr span {
 </style>
 
 <script>
-// 观察回调函数
-const observerCallback = (mutationsList, observer) => {
-    mutationsList.forEach(mutation => {
-        console.log(mutation);
-    });
-};
-
-// 检查目标元素是否存在，如果存在则开始观察
-const checkAndObserve = () => {
-    const targetNode = document.getElementById('targetElement');
-    if (targetNode) {
-        const observer = new MutationObserver(observerCallback);
-        observer.observe(targetNode, { childList: true, subtree: true });
-        console.log('开始观察目标元素');
+// 新版同步控制代码
+function syncMediaElements() {
+    // 获取视频和音频元素
+    const video = document.querySelector('[data-testid="Video-player"] video');
+    const waveform = document.querySelector('#waveform');
+    const audio = waveform?.querySelector('audio') || waveform?.shadowRoot?.querySelector('audio');
+
+    // 如果任一元素不存在，则退出
+    if (!video || !audio) return;
+
+    // 解除旧的事件监听（避免重复绑定）
+    video.removeEventListener('play', syncPlay);
+    audio.removeEventListener('play', syncPlay);
+    video.removeEventListener('timeupdate', syncVideoTime);
+    audio.removeEventListener('timeupdate', syncAudioTime);
+
+    // 定义同步函数
+    function syncPlay(e) {
+        if(e.target === video && audio.paused) audio.play();
+        if(e.target === audio && video.paused) video.play();
     }
-};
 
-// 使用 setInterval 定期检查目标节点是否存在
-const intervalId = setInterval(() => {
-    checkAndObserve();
-}, 100);
+    function syncVideoTime() {
+        if(!audio.seeking && Math.abs(video.currentTime - audio.currentTime) > 0.1){
+            audio.currentTime = video.currentTime;
+        }
+    }
 
-// 可选：设置最大等待时间，防止无限检查
-setTimeout(() => {
-    clearInterval(intervalId);  // 停止检查
-    console.log('停止检查目标元素');
-}, 1000000);  // 10秒后停止检查
-
-// 另外一种方法：在 DOM 加载完成后检查
-document.addEventListener('DOMContentLoaded', () => {
-    const targetNode = document.getElementById('targetElement');
-    if (targetNode) {
-        const observer = new MutationObserver(observerCallback);
-        observer.observe(targetNode, { childList: true, subtree: true });
-        console.log('开始观察目标元素');
+    function syncAudioTime() {
+        if(!video.seeking && Math.abs(audio.currentTime - video.currentTime) > 0.1){
+            video.currentTime = audio.currentTime;
+        }
     }
-});
 
-// 如果目标元素是动态生成的，可以使用 MutationObserver 来监听其父节点的变化
-const containerNode = document.getElementById('container'); // 包含目标元素的父节点
-
-const containerObserverCallback = (mutationsList, observer) => {
-    mutationsList.forEach(mutation => {
-        if (mutation.type === 'childList') {
-            mutation.addedNodes.forEach(addedNode => {
-                if (addedNode.id === 'targetElement') {
-                    console.log('目标元素已添加');
-                    observer.disconnect(); // 停止监听
-                    // 开始观察目标元素
-                    const observer = new MutationObserver(observerCallback);
-                    observer.observe(addedNode, { childList: true, subtree: true });
+    // 绑定新的事件监听
+    video.addEventListener('play', syncPlay);
+    audio.addEventListener('play', syncPlay);
+    video.addEventListener('timeupdate', syncVideoTime);
+    audio.addEventListener('timeupdate', syncAudioTime);
+
+    // 同步暂停事件
+    video.addEventListener('pause', () => audio.pause());
+    audio.addEventListener('pause', () => video.pause());
+
+    console.log('Media elements synced successfully!');
+}
+
+// 智能DOM观察器
+const observer = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+        if (mutation.addedNodes.length) {
+            mutation.addedNodes.forEach((node) => {
+                // 深度检查新增节点
+                if (node.nodeType === 1) { // Element node
+                    // 检查是否包含视频组件
+                    if (node.querySelector?.('[data-testid="Video-player"]')) {
+                        // 当视频组件出现时，开始查找音频
+                        const audioObserver = new MutationObserver(() => {
+                            if(document.querySelector('#waveform audio')) {
+                                audioObserver.disconnect();
+                                setTimeout(syncMediaElements, 500); // 等待组件完全加载
+                            }
+                        });
+                        audioObserver.observe(document.body, {
+                            childList: true,
+                            subtree: true
+                        });
+                    }
                 }
             });
         }
     });
-};
-
-const containerObserver = new MutationObserver(containerObserverCallback);
-containerObserver.observe(containerNode, { childList: true, subtree: true });
-
-// 使用 requestAnimationFrame 高效检查目标元素是否存在
-const waitForElement = () => {
-    const targetNode = document.getElementById('targetElement');
-    if (targetNode) {
-        const observer = new MutationObserver(observerCallback);
-        observer.observe(targetNode, { childList: true, subtree: true });
-        console.log('开始观察目标元素');
-    } else {
-        requestAnimationFrame(waitForElement);
-    }
-};
+});
 
-waitForElement();  // 启动检查直到元素出现
+// 开始观察整个文档
+observer.observe(document.body, {
+    childList: true,
+    subtree: true
+});
 
+// 初始检查（应对组件已存在的情况）
+setTimeout(() => {
+    if(document.querySelector('[data-testid="Video-player"] video') && 
+       document.querySelector('#waveform audio')){
+        syncMediaElements();
+    }
+}, 1000);
 </script>
 """