Implement lazy audio loading to fix large response truncation

static/js/markdown-editor.js

@@ -1,10 +1,6 @@
 /**
  * Markdown Editor Module
- * UPDATED: Data-driven section markers (stored in editorBlocks array)
- * REMOVED: duplicate renderDocumentBlocks (now only in pdf-handler.js)
- * FIXED: repairAllNewBlockLines no longer removes lines after section-dividers
- * FIXED: removeSection is data-driven, no orphan dividers
- * ADDED: addSectionAtLine function for Custom Section Marker button
+ * UPDATED: Lazy audio loading support — tracks db_id for each block
  */
 
 // ============================================
@@ -15,7 +11,6 @@ let editorBlocks = [];
 let activeBlockId = null;
 let isToolbarClick = false;
 
-// Panel state
 let panelState = {
     startingBlockId: null,
     blockCount: 10,
@@ -31,7 +26,6 @@ function initMarkdownEditor() {
     const editor = document.getElementById('markdownEditor');
     
     editor.addEventListener('click', function(e) {
-        // Pick mode: clicking a block sets it as starting block
         if (panelState.pickMode) {
             const blockEl = e.target.closest('.md-block');
             if (blockEl && !blockEl.classList.contains('editing')) {
@@ -66,7 +60,7 @@ function initMarkdownEditor() {
     });
     
     restorePanelSettings();
-    console.log('📝 Markdown editor initialized (data-driven sections)');
+    console.log('📝 Markdown editor initialized (lazy audio loading)');
 }
 
 // ============================================
@@ -81,7 +75,6 @@ function updatePanelUI() {
     const textBlocks = getTextBlocks();
     const totalBlocks = textBlocks.length;
     
-    // Update total blocks stat with NULL checks
     const totalEl = document.getElementById('ampTotalBlocks');
     if (totalEl) totalEl.textContent = totalBlocks;
     
@@ -96,7 +89,6 @@ function updatePanelUI() {
     const remainEl = document.getElementById('ampRemainingBlocks');
     if (remainEl) remainEl.textContent = (totalBlocks - genCount);
     
-    // Validate starting block
     if (!panelState.startingBlockId || !document.getElementById(panelState.startingBlockId)) {
         if (textBlocks.length > 0) {
             panelState.startingBlockId = textBlocks[0].id;
@@ -302,7 +294,7 @@ function advanceStartingBlockAfterGeneration(generatedCount) {
 }
 
 // ============================================
-// DATA-DRIVEN Section Marker System
+// Section Markers
 // ============================================
 
 function makeSectionStart(blockId, title = null) {
@@ -399,7 +391,7 @@ function renderDocumentOutline() {
 }
 
 // ============================================
-// Block Merge & Split Logic
+// Block Merge & Split
 // ============================================
 
 function mergeBlockUp(blockId) {
@@ -575,6 +567,8 @@ function addBlock(type = 'paragraph', content = '', afterElement = null, images
     
     editorBlocks.push({
         id: blockId,
+        db_id: null,           // Database ID — set when loaded from server
+        has_audio: false,      // Server-reported audio presence
         type: type,
         content: content,
         images: images,
@@ -1112,6 +1106,8 @@ function renderProjectInEditor(projectData) {
                 blockData.audio_format = block.audio_format;
                 blockData.transcription = block.transcription;
                 blockData.tts_text = block.tts_text;
+                blockData.db_id = block.id;           // Track DB ID for lazy audio loading
+                blockData.has_audio = !!block.has_audio;  // Server-reported audio presence
             }
             
             const blockEl = document.getElementById(blockId);
@@ -1119,13 +1115,14 @@ function renderProjectInEditor(projectData) {
                 blockEl.dataset.ttsText = block.tts_text;
             }
             
-            if (block.audio_data && block.block_type !== 'image') {
+            // Show audio indicator based on has_audio flag (audio will be lazy-loaded)
+            if (block.has_audio && block.block_type !== 'image') {
                 if (blockEl) {
                     const indicator = blockEl.querySelector('.audio-indicator');
                     if (indicator) {
                         indicator.classList.remove('no-audio');
                         indicator.classList.add('has-audio');
-                        indicator.title = 'Audio generated';
+                        indicator.title = 'Audio loading...';
                     }
                 }
             }
@@ -1143,7 +1140,7 @@ function renderProjectInEditor(projectData) {
     let foundStart = false;
     for (const tb of textBlocks) {
         const data = editorBlocks.find(b => b.id === tb.id);
-        if (!data || !data.audio_data) {
+        if (!data || !data.has_audio) {
             panelState.startingBlockId = tb.id;
             foundStart = true;
             break;
@@ -1153,12 +1150,11 @@ function renderProjectInEditor(projectData) {
         panelState.startingBlockId = textBlocks[textBlocks.length - 1].id;
     }
     
-    // যুক্ত করা হলো: প্রজেক্ট লোড হলেও প্যানেলের ব্লক কাউন্ট যেন মোট ব্লকের সমান থাকে
     if (textBlocks.length > 0) {
-        panelState.blockCount = textBlocks.length; 
+        panelState.blockCount = textBlocks.length;
     }
     
     updatePanelUI();
     renderDocumentOutline();
     checkEmptyEditor();
-}
+}