Update index.html

index.html

@@ -560,12 +560,27 @@
     <!-- 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 with null checks
+            // Global error handler
+            window.addEventListener('error', (e) => {
+                console.error('Global error caught:', e.error);
+                console.error('Error stack:', e.error?.stack);
+                
+                // Don't show toast for every error, just log them
+                if (e.error?.message?.includes('currentText') || 
+                    e.error?.message?.includes('formatFileSize') ||
+                    e.error?.message?.includes('apikey.trim')) {
+                    console.error('Handled error:', e.error.message);
+                }
+            });
+            
+            // Global unhandled promise rejection handler
+            window.addEventListener('unhandledrejection', (e) => {
+                console.error('Unhandled promise rejection:', e.reason);
+                e.preventDefault(); // Prevent default browser error logging
+            });
+            // Enhanced DOM Elements
             const apiKeyInput = document.getElementById('apiKey');
             const saveKeyBtn = document.getElementById('saveKeyBtn');
             const uploadBtn = document.getElementById('uploadBtn');
@@ -591,7 +606,7 @@
             const readingProgress = document.getElementById('readingProgress');
             const currentPositionMarker = document.getElementById('currentPositionMarker');
             
-            // New feature elements with null checks
+            // New feature elements
             const darkModeToggle = document.getElementById('darkModeToggle');
             const addBookmarkBtn = document.getElementById('addBookmarkBtn');
             const showBookmarksBtn = document.getElementById('showBookmarksBtn');
@@ -605,7 +620,7 @@
             let wordsPerMinute = 150; // Average reading speed
             let isBookmarkPanelOpen = false;
             
-            // Add missing functions
+            // Utility function for file size formatting
             function formatFileSize(bytes) {
                 if (bytes === 0) return '0 Bytes';
                 const k = 1024;
@@ -614,32 +629,6 @@
                 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() {
@@ -1488,168 +1477,51 @@
                 // Download functionality
                 initDownloadFeature();
                 
-            // 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();
-                        }
-                    }
-                    
-                    // 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);
+                // 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');
                     }
-                    
-                } catch (error) {
-                    console.error('Error during initialization:', error);
-                    showToast('Some features may not work properly. Please refresh the page.', 'error');
-                }
-            }
+                });
+                
+                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();
             }
             
             // Dark Mode Implementation
@@ -1918,6 +1790,9 @@
                 showToast('Bookmark removed', 'success', 1000);
             }
             
+            // Make removeBookmark globally accessible
+            window.removeBookmark = removeBookmark;
+            
             function updateBookmarkCount() {
                 bookmarkCount.textContent = bookmarks.length.toString();
             }
@@ -2105,7 +1980,7 @@
                 }
             }
             
-            // Toast notifications function (moved up for early definition)
+            // Toast notifications
             function showToast(message, type = 'success', duration = 3000) {
                 const toast = document.createElement('div');
                 toast.className = `toast ${type}`;
@@ -2118,17 +1993,14 @@
                 }, duration);
             }
             
-            // 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);
-            }
+            // 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);
             
-            // API Key Management
+            // API Key Management  
             saveKeyBtn.addEventListener('click', async () => {
-                const key = apiKeyInput.value.trim();
+                const key = apiKeyInput.value ? apiKeyInput.value.trim() : '';
                 if (key) {
                     // Show loading state
                     saveKeyBtn.innerHTML = '<div class="loading-spinner inline-block w-4 h-4 mr-2"></div>Validating...';
@@ -2310,7 +2182,10 @@
                     const languageCode = languageSelect.value;
                     
                     // Clean and validate API key
-                    const cleanApiKey = apiKey.trim();
+                    const cleanApiKey = apiKey && apiKey.trim ? apiKey.trim() : (apiKey || '');
+                    if (!cleanApiKey) {
+                        throw new Error('API key is empty or invalid');
+                    }
                     
                     // Method 1: Try with API key in header (preferred)
                     let response;
@@ -2971,20 +2846,12 @@
             
             // 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);
@@ -2992,12 +2859,10 @@
                     } 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);
             }
@@ -3458,17 +3323,12 @@
                 return SmartTextProcessor.optimizeChunks(text, maxChunkSize);
             }
             
-            // Event listeners for main functionality
-            if (refreshVoicesBtn) refreshVoicesBtn.addEventListener('click', loadVoices);
-            if (languageSelect) languageSelect.addEventListener('change', loadVoices);
+            // Event listeners
+            refreshVoicesBtn.addEventListener('click', loadVoices);
+            languageSelect.addEventListener('change', loadVoices);
             
-            // Initialize everything when DOM is ready
-            if (document.readyState === 'loading') {
-                document.addEventListener('DOMContentLoaded', init);
-            } else {
-                // DOM is already loaded
-                init();
-            }
+            // Initialize the application
+            init();
         });
     </script>
 </body>