From 6328fc13b5b6c28acdb662a05df46d7de333c807 Mon Sep 17 00:00:00 2001 From: Nonimart Date: Tue, 30 Sep 2025 12:09:50 +0200 Subject: [PATCH] FEATURE Optimizing article reader behaviour --- resources/js/singles/reader.ts | 52 +++++++++++----------------------- 1 file changed, 16 insertions(+), 36 deletions(-) diff --git a/resources/js/singles/reader.ts b/resources/js/singles/reader.ts index 41bd19b..fe11a38 100644 --- a/resources/js/singles/reader.ts +++ b/resources/js/singles/reader.ts @@ -41,8 +41,8 @@ export default function handleArticleReader() { function setReaderButtonReading(): void { if (!playPauseButton) return; playPauseButton.setAttribute('data-reading-status', 'playing'); - playPauseButton.setAttribute('title', 'Arrêter la lecture vocale'); - playPauseButton.setAttribute('aria-label', 'Arrêter la lecture vocale'); + playPauseButton.setAttribute('title', 'Mettre en pause la lecture vocale'); + playPauseButton.setAttribute('aria-label', 'Mettre en pause la lecture vocale'); } function setReaderButtonStopped(): void { @@ -112,53 +112,28 @@ export default function handleArticleReader() { }); } }); - - // 🐛 DEBUG: Afficher les mots détectés - console.log( - 'Mots détectés dans le DOM:', - wordBoundaries.map((b) => b.word) - ); } function highlightWord(index: number): void { - if (!article || index >= wordBoundaries.length) { - console.log('❌ Highlight impossible:', { index, totalWords: wordBoundaries.length }); - return; - } + if (!article || index >= wordBoundaries.length) return; // Supprimer le highlight précédent et reconstruire les boundaries removeHighlight(); - buildWordBoundaries(); // ✅ Recalculer après cleanup + buildWordBoundaries(); // Vérifier à nouveau après reconstruction - if (index >= wordBoundaries.length) { - console.warn('❌ Index invalide après reconstruction:', { - index, - totalWords: wordBoundaries.length, - }); - return; - } + if (index >= wordBoundaries.length) return; const boundary = wordBoundaries[index]; - console.log('🎯 Highlighting mot #' + index + ':', boundary.word); // Vérifier que le nœud et les offsets sont encore valides - if (!boundary.node || !boundary.node.textContent) { - console.warn('❌ Nœud texte invalide'); - return; - } + if (!boundary.node || !boundary.node.textContent) return; if ( boundary.startOffset > boundary.node.textContent.length || boundary.endOffset > boundary.node.textContent.length - ) { - console.warn('❌ Offsets invalides:', { - startOffset: boundary.startOffset, - endOffset: boundary.endOffset, - nodeLength: boundary.node.textContent.length, - }); + ) return; - } try { const range = document.createRange(); @@ -171,9 +146,8 @@ export default function handleArticleReader() { highlightSpan.style.cssText = DEFAULT_CONFIG.highlightStyle; range.surroundContents(highlightSpan); - console.log('✅ Highlight réussi pour:', boundary.word); } catch (error) { - console.warn('⚠️ Erreur lors du highlight:', error, boundary); + // Ignorer silencieusement les erreurs de highlighting } } @@ -230,7 +204,10 @@ export default function handleArticleReader() { }; utterance.onerror = (event) => { - console.error('Erreur lors de la lecture:', event); + // Ne pas logger les interruptions volontaires (cancel/stop) + if (event.error !== 'interrupted') { + console.error('Erreur lors de la lecture:', event); + } setReaderButtonStopped(); removeHighlight(); currentWordIndex = 0; @@ -258,10 +235,13 @@ export default function handleArticleReader() { } function stopReading(): void { + speechSynthesis.resume(); speechSynthesis.cancel(); setReaderButtonStopped(); removeHighlight(); currentWordIndex = 0; + + speechSynthesis.paused = false; } /* ******************************************************** @@ -299,6 +279,7 @@ export default function handleArticleReader() { // Event listener principal playPauseButton?.addEventListener('click', () => { + console.log(speechSynthesis); if (speechSynthesis.speaking && !speechSynthesis.paused) { // En cours de lecture → Pause pauseReading(); @@ -313,7 +294,6 @@ export default function handleArticleReader() { }); stopReadingButton?.addEventListener('click', () => { stopReading(); - setReaderButtonStopped(); }); }