diff --git a/src/ui.js b/src/ui.js index 9ecd73b..da80375 100644 --- a/src/ui.js +++ b/src/ui.js @@ -1094,6 +1094,7 @@ async function openUncloseaiEmbeddedModalNew() { let readPageAudio = null; let isReadingPage = false; + let readPageContainer = null; const controlActions = [ { text: "πŸ“– Read Page", action: async (button) => { @@ -1113,18 +1114,107 @@ async function openUncloseaiEmbeddedModalNew() { return; } + // Prevent multiple simultaneous requests + if (isReadingPage) return; + // Start new reading button.textContent = "⏳ Processing..."; button.disabled = true; + isReadingPage = true; try { - await window.readPageWithHermes(); - // Note: The actual audio handling would need to be integrated with readPageWithHermes - button.textContent = "⏸️ Pause"; - isReadingPage = true; + // Get page content + const { extractWebpageContent } = await import('./content.js'); + const pageContent = extractWebpageContent(); + + // Generate TTS + const { speakText } = await import('./tts.js'); + const result = await speakText(pageContent, 'alloy', 1.0); + readPageAudio = result.audio; + + // Set up audio event handlers + readPageAudio.onplay = () => { + button.textContent = "⏸️ Pause"; + isReadingPage = true; + }; + + readPageAudio.onpause = () => { + button.textContent = "▢️ Resume"; + }; + + readPageAudio.onended = () => { + button.textContent = "πŸ“– Read Page"; + isReadingPage = false; + readPageAudio = null; + // Remove download button container if it exists + if (readPageContainer) { + readPageContainer.remove(); + readPageContainer = null; + } + }; + + // Create download button next to the read button + if (!readPageContainer) { + readPageContainer = document.createElement('div'); + readPageContainer.style.cssText = ` + display: inline-flex; + gap: 8px; + align-items: center; + `; + + // Move the read button into the container + const parent = button.parentElement; + parent.insertBefore(readPageContainer, button); + readPageContainer.appendChild(button); + + // Add download button + const downloadBtn = document.createElement('button'); + downloadBtn.textContent = 'πŸ’Ύ'; + downloadBtn.title = 'Download audio'; + downloadBtn.style.cssText = ` + padding: 8px 16px; + background: #f8f9fa; + border: 1px solid #dee2e6; + border-radius: 20px; + cursor: pointer; + font-size: 14px; + white-space: nowrap; + transition: all 0.2s; + `; + downloadBtn.onmouseover = () => { + downloadBtn.style.background = '#e9ecef'; + downloadBtn.style.borderColor = '#adb5bd'; + }; + downloadBtn.onmouseout = () => { + downloadBtn.style.background = '#f8f9fa'; + downloadBtn.style.borderColor = '#dee2e6'; + }; + downloadBtn.onclick = () => { + if (readPageAudio) { + const url = readPageAudio.src; + const a = document.createElement('a'); + a.href = url; + a.download = 'page-audio.mp3'; + document.body.appendChild(a); + a.click(); + document.body.removeChild(a); + } + }; + + readPageContainer.appendChild(downloadBtn); + } + + // Auto-play the generated audio + try { + await readPageAudio.play(); + } catch (playError) { + button.textContent = "πŸ“– Read Page"; + isReadingPage = false; + } } catch (error) { alert("Failed to read page: " + error.message); button.textContent = "πŸ“– Read Page"; + isReadingPage = false; } finally { button.disabled = false; }