FEATURE Optimizing article reader behaviour

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();
   });
 }