Antoine/carhop__dynamiques-theme__PROD-DEV
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FEATURE Optimizing article reader behaviour
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Nonimart 2025-09-30 12:09:50 +02:00
parent 8d6b6ca05f
commit 6328fc13b5
1 changed files with 16 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
resources/js/singles/reader.ts
View File

@ -41,8 +41,8 @@ export default function handleArticleReader() {
function setReaderButtonReading(): void { function setReaderButtonReading(): void {
if (!playPauseButton) return; if (!playPauseButton) return;
playPauseButton.setAttribute('data-reading-status', 'playing'); playPauseButton.setAttribute('data-reading-status', 'playing');
playPauseButton.setAttribute('title', 'Arrêter la lecture vocale'); playPauseButton.setAttribute('title', 'Mettre en pause la lecture vocale');
playPauseButton.setAttribute('aria-label', 'Arrêter la lecture vocale'); playPauseButton.setAttribute('aria-label', 'Mettre en pause la lecture vocale');
} }
function setReaderButtonStopped(): void { 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 { function highlightWord(index: number): void {
if (!article || index >= wordBoundaries.length) { if (!article || index >= wordBoundaries.length) return;
console.log('❌ Highlight impossible:', { index, totalWords: wordBoundaries.length });
return;
}
// Supprimer le highlight précédent et reconstruire les boundaries // Supprimer le highlight précédent et reconstruire les boundaries
removeHighlight(); removeHighlight();
buildWordBoundaries(); // ✅ Recalculer après cleanup buildWordBoundaries();
// Vérifier à nouveau après reconstruction // Vérifier à nouveau après reconstruction
if (index >= wordBoundaries.length) { if (index >= wordBoundaries.length) return;
console.warn('❌ Index invalide après reconstruction:', {
index,
totalWords: wordBoundaries.length,
});
return;
}
const boundary = wordBoundaries[index]; const boundary = wordBoundaries[index];
console.log('🎯 Highlighting mot #' + index + ':', boundary.word);
// Vérifier que le nœud et les offsets sont encore valides // Vérifier que le nœud et les offsets sont encore valides
if (!boundary.node || !boundary.node.textContent) { if (!boundary.node || !boundary.node.textContent) return;
console.warn('❌ Nœud texte invalide');
return;
}
if ( if (
boundary.startOffset > boundary.node.textContent.length || boundary.startOffset > boundary.node.textContent.length ||
boundary.endOffset > 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; return;
}
try { try {
const range = document.createRange(); const range = document.createRange();
@ -171,9 +146,8 @@ export default function handleArticleReader() {
highlightSpan.style.cssText = DEFAULT_CONFIG.highlightStyle; highlightSpan.style.cssText = DEFAULT_CONFIG.highlightStyle;
range.surroundContents(highlightSpan); range.surroundContents(highlightSpan);
console.log('✅ Highlight réussi pour:', boundary.word);
} catch (error) { } 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) => { 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(); setReaderButtonStopped();
removeHighlight(); removeHighlight();
currentWordIndex = 0; currentWordIndex = 0;
@ -258,10 +235,13 @@ export default function handleArticleReader() {
} }
function stopReading(): void { function stopReading(): void {
speechSynthesis.resume();
speechSynthesis.cancel(); speechSynthesis.cancel();
setReaderButtonStopped(); setReaderButtonStopped();
removeHighlight(); removeHighlight();
currentWordIndex = 0; currentWordIndex = 0;
speechSynthesis.paused = false;
} }
/* ******************************************************** /* ********************************************************
@ -299,6 +279,7 @@ export default function handleArticleReader() {
// Event listener principal // Event listener principal
playPauseButton?.addEventListener('click', () => { playPauseButton?.addEventListener('click', () => {
console.log(speechSynthesis);
if (speechSynthesis.speaking && !speechSynthesis.paused) { if (speechSynthesis.speaking && !speechSynthesis.paused) {
// En cours de lecture → Pause // En cours de lecture → Pause
pauseReading(); pauseReading();
@ -313,7 +294,6 @@ export default function handleArticleReader() {
}); });
stopReadingButton?.addEventListener('click', () => { stopReadingButton?.addEventListener('click', () => {
stopReading(); stopReading();
setReaderButtonStopped();
}); });
} }