Update Script_Speech_recognition/videoplayer.js

Script_Speech_recognition/videoplayer.js

@@ -4,12 +4,17 @@ const translateWordsBtn = document.getElementById('translateWordsBtn');
 const translateLettersBtn = document.getElementById('translateLettersBtn');
 const prevBtn = document.getElementById('prevBtn');
 const nextBtn = document.getElementById('nextBtn');
+const translateBtn = document.getElementById('translateBtn'); // Prelož button
 
 let videoSequence = [];
 let currentIndex = 0;
 let autoPlayEnabled = true;
 
-function videoExists(src) {
+// Variable to track the current translation method
+let currentTranslationMode = 'words'; // Default mode
+
+// Function to check if video exists
+async function videoExists(src) {
     return new Promise(resolve => {
         const video = document.createElement('video');
         video.src = src;
@@ -18,6 +23,7 @@ function videoExists(src) {
     });
 }
 
+// Function to load video sequence by words
 async function loadVideoSequenceByWords() {
     const words = inputText.value.trim().split(' '); 
     videoSequence = [];
@@ -31,6 +37,7 @@ async function loadVideoSequenceByWords() {
     currentIndex = 0;
 }
 
+// Function to load video sequence by letters
 async function loadVideoSequenceByLetters() {
     const characters = inputText.value.trim().split('');
     videoSequence = [];
@@ -46,6 +53,7 @@ async function loadVideoSequenceByLetters() {
     currentIndex = 0;
 }
 
+// Function to play video at a specific index
 function playVideoAtIndex(index) {
     if (index < 0 || index >= videoSequence.length) return;
 
@@ -54,8 +62,8 @@ function playVideoAtIndex(index) {
     currentIndex = index;
 
     // Update the title with the current letter or word
-    const currentChar = videoSequence[index].split('/').pop().split('.')[0]; // Extract letter from the video path
+    const currentChar = videoSequence[index].split('/').pop().split('.')[0];
-    document.getElementById('currentLetter').innerText = `Po písmenách ${currentChar.toUpperCase()}`; // Update text
+    document.getElementById('currentLetter').innerText = currentChar.toUpperCase();
 
     if (autoPlayEnabled) {
         videoPlayer.onended = () => {
@@ -71,22 +79,37 @@ function playVideoAtIndex(index) {
     }
 }
 
-translateWordsBtn.addEventListener('click', async () => {
+// Event listener for "Prelož" button (Translate button)
+translateBtn.addEventListener('click', async () => {
     autoPlayEnabled = true;
+
+    // Based on current mode, load the correct video sequence
+    if (currentTranslationMode === 'words') {
         await loadVideoSequenceByWords();
-    if (videoSequence.length > 0) {
+    } else if (currentTranslationMode === 'letters') {
-        playVideoAtIndex(currentIndex);
-    }
-});
-
-translateLettersBtn.addEventListener('click', async () => {
-    autoPlayEnabled = true;
         await loadVideoSequenceByLetters();
+    }
+
     if (videoSequence.length > 0) {
         playVideoAtIndex(currentIndex);
     }
 });
 
+// Event listener for "Preložiť po slovách" button
+translateWordsBtn.addEventListener('click', () => {
+    currentTranslationMode = 'words'; // Set to words mode
+    translateWordsBtn.classList.add('active'); // Optionally add active class
+    translateLettersBtn.classList.remove('active');
+});
+
+// Event listener for "Preložiť po písmenách" button
+translateLettersBtn.addEventListener('click', () => {
+    currentTranslationMode = 'letters'; // Set to letters mode
+    translateLettersBtn.classList.add('active'); // Optionally add active class
+    translateWordsBtn.classList.remove('active');
+});
+
+// Event listeners for prev and next buttons to navigate video sequence
 prevBtn.addEventListener('click', () => {
     if (currentIndex > 0) {
         autoPlayEnabled = false;
@@ -102,17 +125,3 @@ nextBtn.addEventListener('click', () => {
         playVideoAtIndex(currentIndex);
     }
 });
-
-
-function hideControls() {
-    if (!videoPlayer.matches(':hover')) {
-        videoPlayer.controls = false;
-    }
-    requestAnimationFrame(hideControls);
-}
-
-videoPlayer.addEventListener('mouseenter', () => {
-    videoPlayer.controls = true; 
-});
-
-hideControls();