edit when reading highlight only the word pronounced - Follow Up Deployment

index.html

@@ -119,6 +119,12 @@
             margin-bottom: 1.5rem;
             text-align: justify;
         }
+        
+        .highlight-word {
+            background-color: rgba(59, 130, 246, 0.3);
+            border-radius: 2px;
+            transition: background-color 0.2s ease;
+        }
 
         .book-content img {
             max-width: 100%;
@@ -382,24 +388,6 @@
             justify-content: center;
         }
 
-        .word-highlight {
-            background-color: #dbeafe;
-            border-radius: 4px;
-            padding: 0 2px;
-            transition: background-color 0.2s ease;
-        }
-
-        .word-highlight.current {
-            background-color: #3b82f6;
-            color: white;
-            animation: pulse 0.5s infinite;
-        }
-
-        @keyframes pulse {
-            0%, 100% { opacity: 1; }
-            50% { opacity: 0.8; }
-        }
-
         @keyframes pulse {
             0%, 100% { opacity: 1; }
             50% { opacity: 0.7; }
@@ -1087,8 +1075,9 @@
                     synthesis.cancel();
                 }
                 
-                // Prepare the text for word-by-word highlighting
-                highlightReadingText();
+                // Clear previous highlights
+                const highlighted = document.querySelectorAll('.highlight-word');
+                highlighted.forEach(el => el.classList.remove('highlight-word'));
                 
                 currentUtterance = new SpeechSynthesisUtterance(text);
                 currentUtterance.rate = audioSpeed;
@@ -1102,43 +1091,81 @@
                 currentUtterance.addEventListener('end', () => {
                     isPlaying = false;
                     document.getElementById('playBtn').innerHTML = '<i class="fas fa-play"></i>';
-                    removeHighlights();
                 });
                 
                 currentUtterance.addEventListener('boundary', (event) => {
+                    // Clear previous highlights
+                    const highlighted = document.querySelectorAll('.highlight-word');
+                    highlighted.forEach(el => el.classList.remove('highlight-word'));
+                    
+                    // Highlight current word
                     if (event.name === 'word') {
-                        const wordElements = bookContent.querySelectorAll('.word-highlight');
-                        const currentIndex = event.charIndex;
-                        
-                        // Find the word element that contains this character index
-                        let wordIndex = 0;
-                        let charCount = 0;
+                        const textNode = event.utterance.text.substring(0, event.charIndex);
+                        const wordStart = textNode.lastIndexOf(' ') + 1;
+                        const wordEnd = event.utterance.text.indexOf(' ', event.charIndex);
+                        const word = event.utterance.text.substring(wordStart, wordEnd === -1 ? event.utterance.text.length : wordEnd);
                         
-                        for (let i = 0; i < wordElements.length; i++) {
-                            const wordLength = wordElements[i].textContent.length;
-                            if (currentIndex >= charCount && currentIndex < charCount + wordLength) {
-                                wordIndex = i;
-                                break;
-                            }
-                            charCount += wordLength + 1; // +1 for space
-                        }
+                        // Find and highlight the word in the DOM
+                        highlightWordInContent(word, event.charIndex);
+                    }
+                });
+                
+                synthesis.speak(currentUtterance);
+            }
+        }
+        
+        function highlightWordInContent(word, charIndex) {
+            const bookContent = document.getElementById('bookContent');
+            const textNodes = [];
+            
+            // Find all text nodes in the content
+            const walker = document.createTreeWalker(
+                bookContent,
+                NodeFilter.SHOW_TEXT,
+                null,
+                false
+            );
+            
+            let node;
+            while (node = walker.nextNode()) {
+                textNodes.push(node);
+            }
+            
+            // Find the node containing the word
+            let cumulativeLength = 0;
+            for (const node of textNodes) {
+                const nodeText = node.nodeValue;
+                const nodeLength = nodeText.length;
+                
+                if (charIndex >= cumulativeLength && charIndex < cumulativeLength + nodeLength) {
+                    const offset = charIndex - cumulativeLength;
+                    const wordStartInNode = nodeText.lastIndexOf(' ', offset) + 1;
+                    const wordEndInNode = nodeText.indexOf(' ', offset);
+                    const wordInNode = nodeText.substring(
+                        wordStartInNode,
+                        wordEndInNode === -1 ? nodeText.length : wordEndInNode
+                    );
+                    
+                    if (wordInNode === word) {
+                        // Create range and wrap the word in a span
+                        const range = document.createRange();
+                        range.setStart(node, wordStartInNode);
+                        range.setEnd(node, wordEndInNode === -1 ? nodeText.length : wordEndInNode);
                         
-                        // Remove highlight from previous word
-                        if (currentBook.lastHighlightedWord !== undefined) {
-                            wordElements[currentBook.lastHighlightedWord]?.classList.remove('current');
-                        }
+                        const span = document.createElement('span');
+                        span.className = 'highlight-word';
+                        range.surroundContents(span);
                         
-                        // Add highlight to current word
-                        wordElements[wordIndex].classList.add('current');
-                        wordElements[wordIndex].scrollIntoView({
+                        // Scroll to the word
+                        span.scrollIntoView({
                             behavior: 'smooth',
                             block: 'center'
                         });
-                        currentBook.lastHighlightedWord = wordIndex;
                     }
-                });
+                    break;
+                }
                 
-                synthesis.speak(currentUtterance);
+                cumulativeLength += nodeLength;
             }
         }
 
@@ -1155,16 +1182,14 @@
                 synthesis.cancel();
                 isPlaying = false;
                 document.getElementById('playBtn').innerHTML = '<i class="fas fa-play"></i>';
-                removeHighlights();
                 
-                // Clean up
-                if (currentBook) {
-                    currentBook.lastHighlightedWord = undefined;
-                    if (currentBook.highlightInterval) {
-                        clearInterval(currentBook.highlightInterval);
-                        currentBook.highlightInterval = undefined;
-                    }
-                }
+                // Clear all highlights
+                const highlighted = document.querySelectorAll('.highlight-word');
+                highlighted.forEach(el => {
+                    const parent = el.parentNode;
+                    parent.replaceChild(document.createTextNode(el.textContent), el);
+                    parent.normalize();
+                });
             }
         }
 
@@ -1207,32 +1232,6 @@
             voicePitch = parseFloat(pitch);
         }
 
-        function highlightReadingText() {
-            const bookContent = document.getElementById('bookContent');
-            // Wrap each word in a span for highlighting
-            bookContent.innerHTML = bookContent.textContent.replace(/\S+/g, word => 
-                `<span class="word-highlight">${word}</span>`
-            );
-        }
-
-        function removeHighlights() {
-            const bookContent = document.getElementById('bookContent');
-            const wordElements = bookContent.querySelectorAll('.word-highlight');
-            
-            // Clear any active highlighting interval
-            if (currentBook && currentBook.highlightInterval) {
-                clearInterval(currentBook.highlightInterval);
-            }
-            
-            // Remove all word highlights
-            wordElements.forEach(el => el.classList.remove('current'));
-            
-            // Restore original text (remove span wrappers)
-            if (wordElements.length > 0) {
-                bookContent.innerHTML = bookContent.textContent;
-            }
-        }
-
         function estimateReadingTime(text) {
             const wordsPerMinute = 200;
             const words = text.split(' ').length;