FEATURE Optimizing article reader behaviour

resources/js/singles/reader.ts

@@ -22,12 +22,17 @@ const DEFAULT_CONFIG: ReaderConfig = {
 };
 
 export default function handleArticleReader() {
+  // Simple nettoyage au démarrage si quelque chose est en cours
+  if (speechSynthesis.speaking || speechSynthesis.pending) {
+    speechSynthesis.cancel();
+  }
+
   // ✅ DÉCLARATION DES VARIABLES
   const playPauseButton = document.getElementById('listen-article');
   const stopReadingButton = document.getElementById('stop-reading');
   const article = document.querySelector('.article-content');
 
-  let utterance: SpeechSynthesisUtterance;
+  let utterance: SpeechSynthesisUtterance | null = null;
   let voices: SpeechSynthesisVoice[] = [];
   let thomasVoice: SpeechSynthesisVoice | null = null;
   let currentWordIndex = 0;
@@ -37,6 +42,22 @@ export default function handleArticleReader() {
    * ********************************************************
    */
 
+  // Fonction de nettoyage simple (optionnelle)
+  function stopAndCleanup(): void {
+    // Arrêter toute synthèse vocale en cours
+    if (speechSynthesis.speaking || speechSynthesis.pending) {
+      speechSynthesis.cancel();
+    }
+
+    // Supprimer le highlight actuel
+    removeHighlight();
+
+    // Remettre le bouton à l'état initial
+    setReaderButtonStopped();
+
+    currentWordIndex = 0;
+  }
+
   // Fonctions de gestion du bouton
   function setReaderButtonReading(): void {
     if (!playPauseButton) return;
@@ -241,7 +262,7 @@ export default function handleArticleReader() {
     removeHighlight();
     currentWordIndex = 0;
 
-    speechSynthesis.paused = false;
+    // speechSynthesis.paused = false;
   }
 
   /* ********************************************************
@@ -249,27 +270,10 @@ export default function handleArticleReader() {
    * ********************************************************
    */
 
-  // Vérifier si la synthèse vocale est déjà en cours au chargement de la page
+  // Optionnel : Arrêter la lecture quand l'utilisateur quitte la page
-  if (speechSynthesis.speaking) {
-    speechSynthesis.cancel();
-    setReaderButtonStopped();
-  }
-
-  // Arrêter la lecture vocale quand l'utilisateur quitte la page
   window.addEventListener('beforeunload', () => {
     if (speechSynthesis.speaking) {
       speechSynthesis.cancel();
-      setReaderButtonStopped();
-    }
-  });
-
-  // Arrêter la lecture vocale quand l'onglet devient invisible
-  document.addEventListener('visibilitychange', () => {
-    if (document.hidden && speechSynthesis.speaking) {
-      speechSynthesis.pause();
-    } else if (!document.hidden && speechSynthesis.paused) {
-      speechSynthesis.resume();
-      setReaderButtonReading();
     }
   });
 
@@ -279,7 +283,15 @@ export default function handleArticleReader() {
 
   // Event listener principal
   playPauseButton?.addEventListener('click', () => {
-    console.log(speechSynthesis);
+    // 🔍 Debug pour diagnostic
+    console.log('Speech Synthesis Support:', {
+      supported: 'speechSynthesis' in window,
+      voices: speechSynthesis.getVoices().length,
+      speaking: speechSynthesis.speaking,
+      paused: speechSynthesis.paused,
+      pending: speechSynthesis.pending,
+    });
+
     if (speechSynthesis.speaking && !speechSynthesis.paused) {
       // En cours de lecture → Pause
       pauseReading();