update db a frontend

Script_Speech_recognition/stranka.html

@@ -45,9 +45,9 @@
 
 
 <!-- Pripojenie skriptov -->
+<script type="module" src="videoplayer.js"></script>
 <script src="kontrola_api.js"></script>
 <script src="speech_recognition.js"></script>
-<script src="videoplayer.js"></script>
 
 </body>
 </html>

Script_Speech_recognition/style.css

@@ -39,7 +39,7 @@ h1 {
     width: 45%;
     max-width: 600px;
     min-width: 350px;
-    box-sizing: border-box; /* Include padding and borders in the element’s dimensions */
+	    box-sizing: border-box; /* Include padding and borders in the element’s dimensions */
 }
 
 /* Styling for the buttons above the textarea */
@@ -309,4 +309,4 @@ textarea.dark-mode:focus {
     #themeToggleBtn {
         font-size: 20px; /* Decrease theme toggle button size for mobile */
     }
-}
+}

Script_Speech_recognition/videoplayer.js

@@ -3,20 +3,23 @@ const supabaseUrl = 'https://manesldshonpegglmyan.supabase.co'
 const supabaseKey = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im1hbmVzbGRzaG9ucGVnZ2xteWFuIiwicm9sZSI6InNlcnZpY2Vfcm9sZSIsImlhdCI6MTczMDcxNzQ2NCwiZXhwIjoyMDQ2MjkzNDY0fQ.saaJeTtwYZCS3YKJYmQsAOSAEFzUVUJnoJSD8-lgLHo'
 const supabase = createClient(supabaseUrl, supabaseKey)
 
+// Select DOM elements
 const inputText = document.getElementById('inputText');
 const videoPlayer = document.getElementById('translationVideo');
 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');
+const translateBtn = document.getElementById('translateBtn'); // Prelož button
 const statusText = document.getElementById('statusText');
 
+// Translation state variables
 let videoSequence = [];
 let currentIndex = 0;
 let autoPlayEnabled = true;
-let currentTranslationMode = 'words'; 
+let currentTranslationMode = 'words'; // Default mode
 
+// Function to check if video exists (for local testing)
 async function videoExists(src) {
     return new Promise(resolve => {
         const video = document.createElement('video');
@@ -26,21 +29,29 @@ async function videoExists(src) {
     });
 }
 
+// Function to fetch video URL from Supabase by label (for word translation)
 async function fetchVideoUrl(word) {
     const { data, error } = await supabase
         .from('Videa') 
         .select('video_url')
         .eq('label', word)
-        .maybeSingle(); 
+        .maybeSingle();  // Use maybeSingle() instead of single()
 
     if (error) {
         console.error('Error fetching video:', error);
         return null;
     }
 
+    if (!data) {
+        console.warn(`No video found for word: ${word}`);
+        return null;
+    }
+
     return data.video_url;
 }
 
+
+// Function to load video sequence by words using Supabase
 async function loadVideoSequenceByWords() {
     const words = inputText.value.trim().split(' ');
     videoSequence = [];
@@ -59,7 +70,7 @@ async function fetchLetterVideoUrl(letter) {
         .from('Videa') 
         .select('video_url')
         .eq('label', letter)
-        .maybeSingle();
+        .maybeSingle(); // Use maybeSingle() for letters
 
     if (error) {
         console.error('Error fetching video for letter:', letter, error);
@@ -74,6 +85,7 @@ async function fetchLetterVideoUrl(letter) {
     return data.video_url;
 }
 
+// Function to load video sequence by letters using Supabase
 async function loadVideoSequenceByLetters() {
     const characters = inputText.value.trim().split('');
     videoSequence = [];
@@ -89,6 +101,7 @@ async function loadVideoSequenceByLetters() {
     currentIndex = 0;
 }
 
+// Function to play video at a specific index
 function playVideoAtIndex(index) {
     if (index < 0 || index >= videoSequence.length) return;
 
@@ -96,6 +109,7 @@ function playVideoAtIndex(index) {
     videoPlayer.play();
     currentIndex = index;
 
+    // Update the title with the current word or letter
     const currentLabel = videoSequence[index].split('/').pop().split('.')[0];
     document.getElementById('currentLetter').innerText = currentLabel.toUpperCase();
 
@@ -113,9 +127,11 @@ function playVideoAtIndex(index) {
     }
 }
 
+// Event listener for "Prelož" button (Translate button)
 translateBtn.addEventListener('click', async () => {
     autoPlayEnabled = true;
 
+    // Load the video sequence based on the current translation mode
     if (currentTranslationMode === 'words') {
         await loadVideoSequenceByWords();
     } else if (currentTranslationMode === 'letters') {
@@ -129,18 +145,21 @@ translateBtn.addEventListener('click', async () => {
     }
 });
 
+// Event listener for "Preložiť po slovách" button
 translateWordsBtn.addEventListener('click', () => {
-    currentTranslationMode = 'words';
+    currentTranslationMode = 'words'; // Set to words mode
     translateWordsBtn.classList.add('active');
     translateLettersBtn.classList.remove('active');
 });
 
+// Event listener for "Preložiť po písmenách" button
 translateLettersBtn.addEventListener('click', () => {
-    currentTranslationMode = 'letters';
+    currentTranslationMode = 'letters'; // Set to letters mode
     translateLettersBtn.classList.add('active');
     translateWordsBtn.classList.remove('active');
 });
 
+// Event listeners for prev and next buttons to navigate video sequence
 prevBtn.addEventListener('click', () => {
     if (currentIndex > 0) {
         autoPlayEnabled = false;
@@ -155,4 +174,4 @@ nextBtn.addEventListener('click', () => {
         currentIndex++;
         playVideoAtIndex(currentIndex);
     }
-});
+});