update js in app.py

app.py

@@ -360,96 +360,79 @@ button.lg.secondary.svelte-1gz44hr span {
 </style>
 
 <script>
-function initializeControls() {
-    const video = document.querySelector('[data-testid="Video-player"]');
-    const waveform = document.getElementById('waveform');
-    
-    // Ensure the video and waveform elements are available
-    if (!video || !waveform) {
-        console.log("Video or waveform element not found.");
-        return;
-    }
-
-    // Try to get the audio element from the shadow DOM
-    const audio = waveform.querySelector('div')?.shadowRoot?.querySelector('audio');
-    if (!audio) {
-        console.log("Audio element not found.");
-        return;
-    }
-
-    console.log('Elements found:', { video, audio });
-
-    // Event listener to synchronize the video and audio play states
-    video.addEventListener("play", () => {
-        if (audio.paused) {
-            audio.play();  // If audio is paused, start playing it
-        }
-    });
-
-    audio.addEventListener("play", () => {
-        if (video.paused) {
-            video.play();  // If video is paused, start playing it
-        }
+// 观察回调函数
+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('开始观察目标元素');
+    }
+};
 
-    // Sync the play progress between video and audio
-    video.addEventListener("timeupdate", () => {
-        if (Math.abs(video.currentTime - audio.currentTime) > 0.1) {
-            audio.currentTime = video.currentTime; // Sync time if the difference is more than 0.1s
-        }
-    });
+// 使用 setInterval 定期检查目标节点是否存在
+const intervalId = setInterval(() => {
+    checkAndObserve();
+}, 100);
 
-    audio.addEventListener("timeupdate", () => {
-        if (Math.abs(audio.currentTime - video.currentTime) > 0.1) {
-            video.currentTime = audio.currentTime; // Sync time if the difference is more than 0.1s
-        }
-    });
+// 可选：设置最大等待时间，防止无限检查
+setTimeout(() => {
+    clearInterval(intervalId);  // 停止检查
+    console.log('停止检查目标元素');
+}, 10000);  // 10秒后停止检查
 
-    // Pause both video and audio when one of them is paused
-    video.addEventListener("pause", () => {
-        if (!audio.paused) {
-            audio.pause();
-        }
-    });
+// 另外一种方法：在 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('开始观察目标元素');
+    }
+});
 
-    audio.addEventListener("pause", () => {
-        if (!video.paused) {
-            video.pause();
+// 如果目标元素是动态生成的，可以使用 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 });
+                }
+            });
         }
     });
-}
-
-// Create a MutationObserver to watch for DOM changes
-const observer = new MutationObserver((mutations) => {
-    mutations.forEach((mutation) => {
-        mutation.addedNodes.forEach((node) => {
-            // Check if the audio element has been added
-            if (node.tagName === 'AUDIO') {
-                console.log("Audio element detected");
-                initializeControls(); // Call initialize when the audio element is found
-                observer.disconnect();  // Disconnect the observer once we've found the audio element
-            }
-        });
-    });
-});
-
-// Start observing the DOM for new nodes
-observer.observe(document.body, {
-    childList: true,
-    subtree: true
-});
-
-// Ensure the initialization happens after DOM is fully loaded
-document.addEventListener('DOMContentLoaded', () => {
-    console.log('DOM Content Loaded');
-    initializeControls(); // Initialize controls once the DOM is loaded
-});
+};
+
+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);
+    }
+};
 
-// In case the page takes longer to load, use the load event
-window.addEventListener('load', () => {
-    console.log('Window loaded');
-    initializeControls(); // Ensure everything is loaded before initializing
-});
+waitForElement();  // 启动检查直到元素出现
 
 </script>
 """