text-reader.js

(() => {
    const init = () => {
        if (window.hwReader) return;
        const supported = 'speechSynthesis' in window;

        const cfg = window.hwReaderConfig || {};
        const opts = {
            lang: cfg.lang || 'en-US',
            rate: typeof cfg.rate === 'number' ? cfg.rate : 1,
            pitch: typeof cfg.pitch === 'number' ? cfg.pitch : 1,
            ttsEndpoint: cfg.ttsEndpoint || '',
            ttsApiKey: cfg.ttsApiKey || '',
            ttsVoice: cfg.ttsVoice || '',
        };
        const canFetch = typeof fetch === 'function';
        const audio = new Audio();

        const btn = document.createElement('button');
        btn.id = 'hw-reader-btn';
        btn.setAttribute('aria-label', 'Listen to selected text');
        Object.assign(btn.style, {
            position: 'fixed',
            right: '16px',
            top: '50%',
            zIndex: '2147483600',
            background: 'linear-gradient(135deg, #4ad9d9, #f77f64)',
            color: '#0a1728',
            border: '1px solid #46c5c5',
            borderRadius: '12px',
            padding: '10px 14px',
            fontWeight: '800',
            letterSpacing: '0.01em',
            boxShadow: '0 14px 32px rgba(0,0,0,0.28)',
            cursor: 'pointer',
            display: 'inline-flex',
            fontFamily: 'Inter, Segoe UI, system-ui, sans-serif',
            transform: 'translateY(-50%)',
            opacity: '1',
            pointerEvents: 'auto',
            visibility: 'visible'
        });
        btn.innerHTML = `<span aria-hidden="true" style="display:inline-flex;align-items:center;gap:8px;">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false">
                <path d="M8 5v14l11-7z"></path>
            </svg>
            <span>Listen</span>
        </span>`;

        const info = document.createElement('div');
        info.id = 'hw-reader-hint';
        Object.assign(info.style, {
            position: 'fixed',
            right: '16px',
            top: 'calc(50% + 56px)',
            zIndex: '2147483599',
            background: '#0d1f34',
            color: '#eef5ff',
            border: '1px solid rgba(255,255,255,0.16)',
            borderRadius: '10px',
            padding: '10px 12px',
            boxShadow: '0 10px 24px rgba(0,0,0,0.28)',
            fontFamily: 'Inter, Segoe UI, system-ui, sans-serif',
            fontSize: '0.95rem',
            maxWidth: '240px',
            display: 'none',
        });
        info.textContent = 'Highlight text, then click Listen to hear it.';

        const setPosition = () => {
            const isMobile = window.matchMedia('(max-width: 575px)').matches;
            if (isMobile) {
                btn.style.right = '12px';
                btn.style.left = 'auto';
                btn.style.top = '40%';
                btn.style.bottom = 'auto';
                btn.style.width = 'auto';
                btn.style.transform = 'translateY(-50%)';

                info.style.right = '12px';
                info.style.left = 'auto';
                info.style.top = 'calc(40% + 56px)';
                info.style.bottom = 'auto';
            } else {
                btn.style.left = 'auto';
                btn.style.width = 'auto';
                btn.style.top = '50%';
                btn.style.bottom = 'auto';
                btn.style.transform = 'translateY(-50%)';

                info.style.left = 'auto';
                info.style.bottom = 'auto';
                info.style.top = 'calc(50% + 56px)';
            }
        };

        setPosition();
        window.addEventListener('resize', setPosition);

        let lastText = '';
        let hintTimer = null;

        const getSelectionText = () => {
            const sel = window.getSelection();
            if (!sel) return '';
            const text = sel.toString().trim();
            return text.length > 2 ? text : '';
        };

        document.addEventListener('selectionchange', () => {
            const text = getSelectionText();
            if (text) {
                lastText = text;
            }
        });

        btn.addEventListener('click', () => {
            if (!lastText || !supported) {
                info.style.display = 'block';
                clearTimeout(hintTimer);
                hintTimer = setTimeout(() => {
                    info.style.display = 'none';
                }, 2800);
                return;
            }
            speakText(lastText);
        });

        document.body.appendChild(btn);
        document.body.appendChild(info);

        window.hwReader = {
            speak: (text) => {
                if (!text) return;
                speakText(text);
            },
            cancel: () => {
                if (audio) audio.pause();
                supported && window.speechSynthesis.cancel();
            },
        };

        function speakText(text) {
            // Try cloud TTS if configured
            if (opts.ttsEndpoint && opts.ttsApiKey && canFetch) {
                btn.disabled = true;
                btn.style.opacity = '0.8';
                fetch(opts.ttsEndpoint, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': `Bearer ${opts.ttsApiKey}`,
                    },
                    body: JSON.stringify({ text, voice: opts.ttsVoice || opts.lang }),
                })
                .then(res => res.json())
                .then(data => {
                    const src = data.audioUrl || data.url || '';
                    if (src) {
                        audio.src = src;
                        audio.play().catch(() => fallbackSpeech(text));
                    } else {
                        fallbackSpeech(text);
                    }
                })
                .catch(() => fallbackSpeech(text))
                .finally(() => {
                    btn.disabled = false;
                    btn.style.opacity = '1';
                });
            } else {
                fallbackSpeech(text);
            }
        }

        function fallbackSpeech(text) {
            if (!supported) return;
            window.speechSynthesis.cancel();
            const utter = new SpeechSynthesisUtterance(text);
            utter.lang = opts.lang;
            utter.rate = opts.rate;
            utter.pitch = opts.pitch;
            window.speechSynthesis.speak(utter);
        }
    };

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init, { once: true });
        window.addEventListener('load', init, { once: true });
    } else {
        init();
    }
})();