diff --git a/scripts/videoplayer.js b/scripts/videoplayer.js index 72b95c2..cfd7ffd 100644 --- a/scripts/videoplayer.js +++ b/scripts/videoplayer.js @@ -103,22 +103,27 @@ async function loadVideoSequenceByLetters() { currentIndex = 0; } -// Function to highlight the current word or letter +// Function to highlight the current word or letter in the textarea function highlightCurrentText(index) { let wordsOrLetters = currentTranslationMode === 'words' ? inputText.value.trim().split(' ') : inputText.value.trim().split(''); - // Reset the text content and remove previous highlights - inputText.innerHTML = ''; + // Reset the highlighted text in the textarea + inputText.value = ''; + inputText.setSelectionRange(0, 0); - // Rebuild the text content with highlighting + let startIndex = 0; wordsOrLetters.forEach((item, i) => { - const span = document.createElement('span'); - span.textContent = item + (currentTranslationMode === 'words' ? ' ' : ''); - if (i === index) { - span.classList.add('highlight'); + if (i < index) { + startIndex += item.length + (currentTranslationMode === 'words' ? 1 : 0); } - inputText.appendChild(span); }); + + let endIndex = startIndex + wordsOrLetters[index].length; + inputText.value = wordsOrLetters.join(currentTranslationMode === 'words' ? ' ' : ''); + + // Highlight the current word or letter + inputText.setSelectionRange(startIndex, endIndex); + inputText.focus(); } // Function to play video at a specific index