fixed slide rendering bug

app.py

@@ -1007,27 +1007,93 @@ js_code = """
         }, interval);
     }
 
-    // Function to check if a file exists
-    async function checkFileExists(url) {
-        try {
-            const response = await fetch(url, { method: 'HEAD' });
-            return response.ok;
-        } catch (error) {
-            console.error(`Error checking file existence for ${url}:`, error);
-            return false;
+    // Function to check if a file exists with retries
+    async function checkFileExists(url, maxRetries = 5, delay = 1000) {
+        for (let i = 0; i < maxRetries; i++) {
+            try {
+                const response = await fetch(url, { method: 'HEAD' });
+                if (response.ok) {
+                    console.log(`File exists: ${url}`);
+                    return true;
+                }
+                console.log(`File not found (attempt ${i + 1}/${maxRetries}): ${url}`);
+                await new Promise(resolve => setTimeout(resolve, delay));
+            } catch (error) {
+                console.error(`Error checking file (attempt ${i + 1}/${maxRetries}):`, error);
+                await new Promise(resolve => setTimeout(resolve, delay));
+            }
+        }
+        return false;
+    }
+
+    // Function to validate and initialize audio elements
+    async function initializeAudioElements(audioUrls) {
+        console.log("Initializing audio elements with URLs:", audioUrls);
+        const audioElements = [];
+        
+        for (let i = 0; i < audioUrls.length; i++) {
+            const url = audioUrls[i];
+            const audioId = `audio-${i+1}`;
+            let audio = document.getElementById(audioId);
+            
+            if (!audio) {
+                console.log(`Creating new audio element: ${audioId}`);
+                audio = document.createElement('audio');
+                audio.id = audioId;
+                audio.controls = true;
+                audio.style.display = 'inline-block';
+                audio.style.margin = '0 10px';
+                audio.style.width = '200px';
+                
+                // Find the audio container and append the new element
+                const audioContainer = document.querySelector('.audio-timeline');
+                if (audioContainer) {
+                    audioContainer.appendChild(audio);
+                }
+            }
+            
+            if (url) {
+                const exists = await checkFileExists(url);
+                if (exists) {
+                    audio.src = url;
+                    audio.load();
+                    console.log(`Audio source set for ${audioId}: ${url}`);
+                } else {
+                    console.error(`Audio file not found: ${url}`);
+                    audio.innerHTML = "<span>Audio unavailable</span>";
+                }
+            } else {
+                console.log(`No URL provided for ${audioId}`);
+                audio.innerHTML = "<span>No audio</span>";
+            }
+            
+            audioElements.push(audio);
         }
+        
+        return audioElements;
     }
 
-    // Function to retry loading a file
-    async function retryLoadFile(url, maxRetries = 3, delay = 1000) {
+    // Function to render slide with retries
+    async function renderSlideWithRetry(iframe, url, maxRetries = 5) {
+        console.log(`Attempting to render slide: ${url}`);
+        
         for (let i = 0; i < maxRetries; i++) {
-            const exists = await checkFileExists(url);
-            if (exists) {
-                return true;
+            try {
+                const exists = await checkFileExists(url);
+                if (exists) {
+                    iframe.src = url;
+                    console.log(`Slide rendered successfully: ${url}`);
+                    return true;
+                }
+                console.log(`Slide not found (attempt ${i + 1}/${maxRetries}): ${url}`);
+                await new Promise(resolve => setTimeout(resolve, 1000));
+            } catch (error) {
+                console.error(`Error rendering slide (attempt ${i + 1}/${maxRetries}):`, error);
+                await new Promise(resolve => setTimeout(resolve, 1000));
             }
-            console.log(`Retry ${i + 1}/${maxRetries} for ${url}`);
-            await new Promise(resolve => setTimeout(resolve, delay));
         }
+        
+        console.error(`Failed to render slide after ${maxRetries} attempts: ${url}`);
         return false;
     }
 
@@ -1041,6 +1107,7 @@ js_code = """
                 console.error("Lecture data element is empty");
                 return;
             }
+            
             let lectureData;
             try {
                 lectureData = JSON.parse(dataElement.textContent);
@@ -1067,82 +1134,56 @@ js_code = """
                 console.log("Slide content element found");
 
                 // Initialize audio elements
-                for (let i = 0; i < totalSlides; i++) {
-                    const audio = document.getElementById(`audio-${i+1}`);
-                    if (audio) {
-                        audioElements.push(audio);
-                        console.log(`Found audio element audio-${i+1}:`, audio);
-                    } else {
-                        console.error(`Audio element audio-${i+1} not found`);
-                    }
-                }
+                audioElements = await initializeAudioElements(lectureData.audioFiles);
+                console.log(`Initialized ${audioElements.length} audio elements`);
 
                 async function renderSlide() {
                     console.log("Rendering slide:", currentSlide + 1);
+                    const iframe = document.getElementById('slide-iframe');
+                    if (!iframe) {
+                        console.error("Iframe not found");
+                        return;
+                    }
+
                     if (currentSlide >= 0 && currentSlide < totalSlides && lectureData.htmlFiles[currentSlide]) {
-                        const iframe = document.getElementById('slide-iframe');
-                        if (iframe) {
-                            const htmlUrl = lectureData.htmlFiles[currentSlide];
-                            const exists = await retryLoadFile(htmlUrl);
-                            if (exists) {
-                                iframe.src = htmlUrl;
-                                console.log("Set iframe src to:", htmlUrl);
-                                // Adjust font size based on content length and screen size
-                                waitForElement('iframe', (iframe) => {
-                                    iframe.onload = () => {
-                                        const doc = iframe.contentDocument || iframe.contentWindow.document;
-                                        const body = doc.body;
-                                        if (body) {
-                                            const textLength = body.textContent.length;
-                                            const screenWidth = window.innerWidth;
-                                            const screenHeight = window.innerHeight;
-                                            
-                                            // Base font size calculation
-                                            let baseFontSize;
-                                            if (screenWidth >= 1920) {
-                                                baseFontSize = 20;  // Large screens
-                                            } else if (screenWidth >= 1366) {
-                                                baseFontSize = 18;  // Medium screens
-                                            } else {
-                                                baseFontSize = 16;  // Small screens
-                                            }
-                                            
-                                            // Adjust based on content length
-                                            let adjustedFontSize;
-                                            if (textLength > 1000) {
-                                                adjustedFontSize = baseFontSize * 0.8;  // Reduce for long content
-                                            } else if (textLength > 500) {
-                                                adjustedFontSize = baseFontSize * 0.9;  // Slightly reduce for medium content
-                                            } else {
-                                                adjustedFontSize = baseFontSize;  // Keep base size for short content
-                                            }
-                                            
-                                            // Ensure minimum and maximum sizes
-                                            adjustedFontSize = Math.max(14, Math.min(24, adjustedFontSize));
-                                            
-                                            // Apply to all elements
-                                            const elements = body.getElementsByTagName('*');
-                                            for (let elem of elements) {
-                                                elem.style.fontSize = `${adjustedFontSize}px`;
-                                            }
-                                            
-                                            console.log(`Adjusted font size to ${adjustedFontSize}px for ${textLength} characters on ${screenWidth}x${screenHeight} screen`);
+                        const htmlUrl = lectureData.htmlFiles[currentSlide];
+                        const success = await renderSlideWithRetry(iframe, htmlUrl);
+                        
+                        if (success) {
+                            // Adjust font size based on content
+                            iframe.onload = () => {
+                                try {
+                                    const doc = iframe.contentDocument || iframe.contentWindow.document;
+                                    const body = doc.body;
+                                    if (body) {
+                                        const textLength = body.textContent.length;
+                                        const screenWidth = window.innerWidth;
+                                        
+                                        let baseFontSize = screenWidth >= 1920 ? 20 : screenWidth >= 1366 ? 18 : 16;
+                                        let adjustedFontSize = textLength > 1000 ? baseFontSize * 0.8 : 
+                                                                 textLength > 500 ? baseFontSize * 0.9 : 
+                                                                 baseFontSize;
+                                        
+                                        adjustedFontSize = Math.max(14, Math.min(24, adjustedFontSize));
+                                        
+                                        const elements = body.getElementsByTagName('*');
+                                        for (let elem of elements) {
+                                            elem.style.fontSize = `${adjustedFontSize}px`;
                                         }
-                                    };
-                                });
-                            } else {
-                                console.error(`HTML file not found after retries: ${htmlUrl}`);
-                                iframe.src = "about:blank";
-                            }
+                                        
+                                        console.log(`Adjusted font size to ${adjustedFontSize}px`);
+                                    }
+                                } catch (error) {
+                                    console.error("Error adjusting font size:", error);
+                                }
+                            };
                         } else {
-                            console.error("Iframe not found");
-                        }
-                    } else {
-                        const iframe = document.getElementById('slide-iframe');
-                        if (iframe) {
                             iframe.src = "about:blank";
-                            console.log("No valid slide content for index:", currentSlide);
+                            console.error("Failed to render slide");
                         }
+                    } else {
+                        iframe.src = "about:blank";
+                        console.log("No valid slide content for index:", currentSlide);
                     }
                 }
 
@@ -1170,7 +1211,7 @@ js_code = """
                         const url = audioUrls[i];
                         const audio = audioElements[i];
                         if (audio && url) {
-                            const exists = await retryLoadFile(url);
+                            const exists = await checkFileExists(url);
                             if (exists) {
                                 if (audio.src !== url) {
                                     audio.src = url;