funguje

scripts/videoplayer.js

@@ -53,7 +53,6 @@ async function fetchVideoUrl(word) {
     return data.video_url;
 }
 
-
 // Function to load video sequence by words using Supabase
 async function loadVideoSequenceByWords() {
     const words = inputText.value.trim().split(' ');
@@ -104,6 +103,29 @@ async function loadVideoSequenceByLetters() {
     currentIndex = 0;
 }
 
+// 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 highlighted text in the textarea
+    inputText.value = '';
+    inputText.setSelectionRange(0, 0);
+
+    let startIndex = 0;
+    wordsOrLetters.forEach((item, i) => {
+        if (i < index) {
+            startIndex += item.length + (currentTranslationMode === 'words' ? 1 : 0);
+        }
+    });
+
+    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
 function playVideoAtIndex(index) {
     if (index < 0 || index >= videoSequence.length) return;
@@ -112,6 +134,9 @@ function playVideoAtIndex(index) {
     videoPlayer.play();
     currentIndex = index;
 
+    // Highlight the current word or letter
+    highlightCurrentText(currentIndex);
+
     // Update the title with the current word or letter
     const currentLabel = videoSequence[index].split('/').pop().split('.')[0];
     document.getElementById('currentLetter').innerText = currentLabel.toUpperCase();
@@ -194,4 +219,4 @@ inputText.addEventListener('input', () => {
     } else {
         translateBtn.disabled = true; // Disable the translate button if the text is empty
     }
-});
+});

styles/style.css

@@ -153,6 +153,13 @@ h1 {
     background-color: #357ae8;
 }
 
+/* Zvýraznenie pre aktuálne slovo/písmeno */
+.highlight {
+    background-color: #ffeb3b; /* Svetložltá farba na zvýraznenie */
+    font-weight: bold;
+    color: #333;
+}
+
 .video {
     position: relative;
     width: 45%;