Update index.html

index.html

@@ -560,9 +560,12 @@
     <!-- PDF.js library for PDF support -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.12.313/pdf.min.js"></script>
     
+    <!-- Mammoth library for Word document support -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/mammoth/1.4.2/mammoth.browser.min.js"></script>
+    
     <script>
         document.addEventListener('DOMContentLoaded', () => {
-            // Enhanced DOM Elements
+            // Enhanced DOM Elements with null checks
             const apiKeyInput = document.getElementById('apiKey');
             const saveKeyBtn = document.getElementById('saveKeyBtn');
             const uploadBtn = document.getElementById('uploadBtn');
@@ -588,7 +591,7 @@
             const readingProgress = document.getElementById('readingProgress');
             const currentPositionMarker = document.getElementById('currentPositionMarker');
             
-            // New feature elements
+            // New feature elements with null checks
             const darkModeToggle = document.getElementById('darkModeToggle');
             const addBookmarkBtn = document.getElementById('addBookmarkBtn');
             const showBookmarksBtn = document.getElementById('showBookmarksBtn');
@@ -602,6 +605,41 @@
             let wordsPerMinute = 150; // Average reading speed
             let isBookmarkPanelOpen = false;
             
+            // Add missing functions
+            function formatFileSize(bytes) {
+                if (bytes === 0) return '0 Bytes';
+                const k = 1024;
+                const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+                const i = Math.floor(Math.log(bytes) / Math.log(k));
+                return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+            }
+            
+            function updateBookmarkCount() {
+                if (bookmarkCount) {
+                    bookmarkCount.textContent = bookmarks.length.toString();
+                }
+            }
+            
+            function removeBookmark(id) {
+                bookmarks = bookmarks.filter(b => b.id !== id);
+                localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
+                renderBookmarks();
+                updateBookmarkCount();
+                showToast('Bookmark removed', 'success', 1000);
+            }
+            
+            // Voice preset functions (needed for onclick handlers)
+            window.voicePresets = {
+                loadPreset: function(id) {
+                    console.log('Voice preset loading not yet implemented');
+                    showToast('Voice presets feature coming soon', 'info');
+                },
+                deletePreset: function(id) {
+                    console.log('Voice preset deletion not yet implemented');
+                    showToast('Voice presets feature coming soon', 'info');
+                }
+            };
+            
             // Caching & Smart Processing System
             class TTSCache {
                 constructor() {
@@ -1450,51 +1488,168 @@
                 // Download functionality
                 initDownloadFeature();
                 
-                // Initialize Audio Library
-                document.getElementById('openLibraryBtn').addEventListener('click', () => {
-                    document.getElementById('audioLibraryPanel').classList.add('open');
-                });
-                
-                document.getElementById('closeAudioLibrary').addEventListener('click', () => {
-                    document.getElementById('audioLibraryPanel').classList.remove('open');
-                });
-                
-                document.getElementById('saveToLibraryBtn').addEventListener('click', saveToLibrary);
-                document.getElementById('clearLibraryBtn').addEventListener('click', () => {
-                    if (confirm('Clear entire audio library? This cannot be undone.')) {
-                        audioLibrary.clearLibrary();
-                        showToast('Library cleared', 'success');
+            // Enhanced Initialize function with proper error handling
+            function init() {
+                try {
+                    // Load saved API key
+                    if (apiKey) {
+                        apiKeyInput.value = apiKey;
+                        // Only load voices if we have elements
+                        if (voiceGrid && languageSelect) {
+                            loadVoices();
+                        }
                     }
-                });
-                
-                document.getElementById('exportLibraryBtn').addEventListener('click', () => {
-                    audioLibrary.exportLibrary();
-                });
-                
-                // Initialize Budget System
-                document.getElementById('openBudgetBtn').addEventListener('click', () => {
-                    document.getElementById('costBudgetPanel').classList.add('open');
-                    budgetManager.updateBudgetDisplay();
-                });
-                
-                document.getElementById('closeBudgetPanel').addEventListener('click', () => {
-                    document.getElementById('costBudgetPanel').classList.remove('open');
-                });
-                
-                document.getElementById('monthlyBudget').addEventListener('change', (e) => {
-                    budgetManager.setMonthlyBudget(parseFloat(e.target.value) || 0);
-                });
-                
-                document.getElementById('alertThreshold').addEventListener('input', (e) => {
-                    budgetManager.setAlertThreshold(parseInt(e.target.value));
-                    document.getElementById('alertThresholdValue').textContent = `${e.target.value}%`;
-                });
-                
-                // Initialize cache system
-                ttsCache.init();
-                
-                // Update library display
-                audioLibrary.updateLibraryDisplay();
+                    
+                    // Set PDF.js worker path
+                    if (typeof pdfjsLib !== 'undefined') {
+                        pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.12.313/pdf.worker.min.js';
+                    }
+                    
+                    // Initialize AudioContext on user interaction
+                    document.addEventListener('click', initAudioContext, { once: true });
+                    
+                    // API Key visibility toggle
+                    const toggleKeyVisibility = document.getElementById('toggleKeyVisibility');
+                    const eyeIcon = document.getElementById('eyeIcon');
+                    
+                    if (toggleKeyVisibility && eyeIcon && apiKeyInput) {
+                        toggleKeyVisibility.addEventListener('click', () => {
+                            if (apiKeyInput.type === 'password') {
+                                apiKeyInput.type = 'text';
+                                eyeIcon.className = 'fas fa-eye-slash';
+                            } else {
+                                apiKeyInput.type = 'password';
+                                eyeIcon.className = 'fas fa-eye';
+                            }
+                        });
+                    }
+                    
+                    // Dark mode initialization
+                    if (darkModeToggle) {
+                        initDarkMode();
+                    }
+                    
+                    // Keyboard shortcuts
+                    initKeyboardShortcuts();
+                    
+                    // Bookmark system
+                    if (addBookmarkBtn && showBookmarksBtn) {
+                        initBookmarkSystem();
+                    }
+                    
+                    // Progress indicator
+                    if (progressContainer) {
+                        initProgressIndicator();
+                    }
+                    
+                    // Download functionality
+                    if (downloadBtn) {
+                        initDownloadFeature();
+                    }
+                    
+                    // Initialize Audio Library
+                    const openLibraryBtn = document.getElementById('openLibraryBtn');
+                    const closeAudioLibrary = document.getElementById('closeAudioLibrary');
+                    const saveToLibraryBtn = document.getElementById('saveToLibraryBtn');
+                    const clearLibraryBtn = document.getElementById('clearLibraryBtn');
+                    const exportLibraryBtn = document.getElementById('exportLibraryBtn');
+                    
+                    if (openLibraryBtn) {
+                        openLibraryBtn.addEventListener('click', () => {
+                            const panel = document.getElementById('audioLibraryPanel');
+                            if (panel) panel.classList.add('open');
+                        });
+                    }
+                    
+                    if (closeAudioLibrary) {
+                        closeAudioLibrary.addEventListener('click', () => {
+                            const panel = document.getElementById('audioLibraryPanel');
+                            if (panel) panel.classList.remove('open');
+                        });
+                    }
+                    
+                    if (saveToLibraryBtn) {
+                        saveToLibraryBtn.addEventListener('click', saveToLibrary);
+                    }
+                    
+                    if (clearLibraryBtn) {
+                        clearLibraryBtn.addEventListener('click', () => {
+                            if (confirm('Clear entire audio library? This cannot be undone.')) {
+                                audioLibrary.clearLibrary();
+                                showToast('Library cleared', 'success');
+                            }
+                        });
+                    }
+                    
+                    if (exportLibraryBtn) {
+                        exportLibraryBtn.addEventListener('click', () => {
+                            audioLibrary.exportLibrary();
+                        });
+                    }
+                    
+                    // Initialize Budget System
+                    const openBudgetBtn = document.getElementById('openBudgetBtn');
+                    const closeBudgetPanel = document.getElementById('closeBudgetPanel');
+                    const monthlyBudget = document.getElementById('monthlyBudget');
+                    const alertThreshold = document.getElementById('alertThreshold');
+                    
+                    if (openBudgetBtn) {
+                        openBudgetBtn.addEventListener('click', () => {
+                            const panel = document.getElementById('costBudgetPanel');
+                            if (panel) {
+                                panel.classList.add('open');
+                                budgetManager.updateBudgetDisplay();
+                            }
+                        });
+                    }
+                    
+                    if (closeBudgetPanel) {
+                        closeBudgetPanel.addEventListener('click', () => {
+                            const panel = document.getElementById('costBudgetPanel');
+                            if (panel) panel.classList.remove('open');
+                        });
+                    }
+                    
+                    if (monthlyBudget) {
+                        monthlyBudget.addEventListener('change', (e) => {
+                            budgetManager.setMonthlyBudget(parseFloat(e.target.value) || 0);
+                        });
+                    }
+                    
+                    if (alertThreshold) {
+                        alertThreshold.addEventListener('input', (e) => {
+                            budgetManager.setAlertThreshold(parseInt(e.target.value));
+                            const thresholdValue = document.getElementById('alertThresholdValue');
+                            if (thresholdValue) {
+                                thresholdValue.textContent = `${e.target.value}%`;
+                            }
+                        });
+                    }
+                    
+                    // Initialize cache system
+                    if (typeof ttsCache !== 'undefined') {
+                        ttsCache.init();
+                    }
+                    
+                    // Update library display
+                    if (typeof audioLibrary !== 'undefined') {
+                        audioLibrary.updateLibraryDisplay();
+                    }
+                    
+                    // Update bookmark count
+                    updateBookmarkCount();
+                    
+                    // Cost breakdown modal
+                    const showCostBreakdown = document.getElementById('showCostBreakdown');
+                    if (showCostBreakdown) {
+                        showCostBreakdown.addEventListener('click', showCostBreakdownModal);
+                    }
+                    
+                } catch (error) {
+                    console.error('Error during initialization:', error);
+                    showToast('Some features may not work properly. Please refresh the page.', 'error');
+                }
+            }
             }
             
             // Dark Mode Implementation
@@ -1950,7 +2105,7 @@
                 }
             }
             
-            // Toast notifications
+            // Toast notifications function (moved up for early definition)
             function showToast(message, type = 'success', duration = 3000) {
                 const toast = document.createElement('div');
                 toast.className = `toast ${type}`;
@@ -1963,10 +2118,13 @@
                 }, duration);
             }
             
-            // Add slideOut animation
-            const style = document.createElement('style');
-            style.textContent = '@keyframes slideOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } }';
-            document.head.appendChild(style);
+            // Add slideOut animation style if not exists
+            if (!document.querySelector('style[data-toast-styles]')) {
+                const style = document.createElement('style');
+                style.setAttribute('data-toast-styles', 'true');
+                style.textContent = '@keyframes slideOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } }';
+                document.head.appendChild(style);
+            }
             
             // API Key Management
             saveKeyBtn.addEventListener('click', async () => {
@@ -2813,12 +2971,20 @@
             
             // Word document reader (.doc/.docx)
             function readWordDocument(file) {
+                // Check if mammoth library is available
+                if (typeof mammoth === 'undefined') {
+                    showToast('Word document support not available. Mammoth library not loaded.', 'error');
+                    return;
+                }
+                
                 const reader = new FileReader();
                 reader.onload = async (e) => {
                     try {
                         // Use mammoth to convert docx to text
                         const result = await mammoth.extractRawText({arrayBuffer: e.target.result});
                         setDocumentContent(result.value);
+                        showFileProgress(file.name, 'success');
+                        showToast(`Loaded Word document: ${formatFileSize(file.size)}`, 'success');
                         
                         if (result.messages.length > 0) {
                             console.warn('Word processing warnings:', result.messages);
@@ -2826,10 +2992,12 @@
                     } catch (error) {
                         console.error('Error reading Word document:', error);
                         showToast('Error reading Word document. Please try saving as a different format.', 'error');
+                        showFileProgress(file.name, 'error');
                     }
                 };
                 reader.onerror = () => {
                     showToast('Error reading Word document', 'error');
+                    showFileProgress(file.name, 'error');
                 };
                 reader.readAsArrayBuffer(file);
             }
@@ -3290,12 +3458,17 @@
                 return SmartTextProcessor.optimizeChunks(text, maxChunkSize);
             }
             
-            // Event listeners
-            refreshVoicesBtn.addEventListener('click', loadVoices);
-            languageSelect.addEventListener('change', loadVoices);
+            // Event listeners for main functionality
+            if (refreshVoicesBtn) refreshVoicesBtn.addEventListener('click', loadVoices);
+            if (languageSelect) languageSelect.addEventListener('change', loadVoices);
             
-            // Initialize the application
-            init();
+            // Initialize everything when DOM is ready
+            if (document.readyState === 'loading') {
+                document.addEventListener('DOMContentLoaded', init);
+            } else {
+                // DOM is already loaded
+                init();
+            }
         });
     </script>
 </body>