Update app.py

app.py

@@ -360,91 +360,95 @@ button.lg.secondary.svelte-1gz44hr span {
 </style>
 
 <script>
-// Function to initialize controls once elements are found
 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 });
-    
-   // 监听视频播放进度
-  video.addEventListener("play", () => {
-    if (audio.paused) {
-      audio.play();  // 如果音频暂停，开始播放
-    }
-  });
 
-  // 监听音频播放进度
-  audio.addEventListener("play", () => {
-    if (video.paused) {
-      video.play();  // 如果视频暂停，开始播放
-    }
-  });
+    // 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
+        }
+    });
 
-  // 同步视频和音频的播放进度
-  video.addEventListener("timeupdate", () => {
-    if (Math.abs(video.currentTime - audio.currentTime) > 0.1) {
-      audio.currentTime = video.currentTime; // 如果时间差超过0.1秒，同步
-    }
-  });
+    audio.addEventListener("play", () => {
+        if (video.paused) {
+            video.play();  // If video is paused, start playing it
+        }
+    });
 
-  audio.addEventListener("timeupdate", () => {
-    if (Math.abs(audio.currentTime - video.currentTime) > 0.1) {
-      video.currentTime = audio.currentTime; // 如果时间差超过0.1秒，同步
-    }
-  });
+    // 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
+        }
+    });
 
-  // 监听暂停事件，确保视频和音频都暂停
-  video.addEventListener("pause", () => {
-    if (!audio.paused) {
-      audio.pause();  // 如果音频未暂停，暂停音频
-    }
-  });
+    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
+        }
+    });
 
-  audio.addEventListener("pause", () => {
-    if (!video.paused) {
-      video.pause();  // 如果视频未暂停，暂停视频
-    }
-  });
+    // Pause both video and audio when one of them is paused
+    video.addEventListener("pause", () => {
+        if (!audio.paused) {
+            audio.pause();
+        }
+    });
+
+    audio.addEventListener("pause", () => {
+        if (!video.paused) {
+            video.pause();
+        }
+    });
 }
 
-// 创建观察器监听DOM变化
+// Create a MutationObserver to watch for DOM changes
 const observer = new MutationObserver((mutations) => {
-    for (const mutation of mutations) {
-        if (mutation.addedNodes.length) {
-            // 当有新节点添加时，尝试初始化
-            const waveform = document.getElementById('waveform');
-            if (waveform?.querySelector('div')?.shadowRoot?.querySelector('audio')) {
-                console.log('Audio element detected');
-                initializeControls();
-                // 可选：如果不需要继续监听，可以断开观察器
-                // observer.disconnect();
+    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();
+    initializeControls(); // Initialize controls once the DOM is loaded
+});
+
+// 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
 });
 
 </script>