pridanie funkcionality pullovania videi z db

Script_Speech_recognition/stranka.html

@@ -45,9 +45,12 @@
 
 
 <!-- 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/videoplayer.js

@@ -1,3 +1,9 @@
+import { createClient } from 'https://cdn.jsdelivr.net/npm/@supabase/supabase-js/+esm';
+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');
@@ -5,15 +11,15 @@ const translateLettersBtn = document.getElementById('translateLettersBtn');
 const prevBtn = document.getElementById('prevBtn');
 const nextBtn = document.getElementById('nextBtn');
 const translateBtn = document.getElementById('translateBtn'); // Prelož button
+const statusText = document.getElementById('statusText');
 
+// Translation state variables
 let videoSequence = [];
 let currentIndex = 0;
 let autoPlayEnabled = true;
-
-// Variable to track the current translation method
 let currentTranslationMode = 'words'; // Default mode
 
-// Function to check if video exists
+// Function to check if video exists (for local testing)
 async function videoExists(src) {
     return new Promise(resolve => {
         const video = document.createElement('video');
@@ -23,30 +29,72 @@ async function videoExists(src) {
     });
 }
 
-// Function to load video sequence by words
+// 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();  // 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(' '); 
+    const words = inputText.value.trim().split(' ');
     videoSequence = [];
 
     for (const word of words) {
-        const videoSrc = `video/${word.toLowerCase()}.mp4`;
-        if (await videoExists(videoSrc)) {
-            videoSequence.push(videoSrc);
+        const videoUrl = await fetchVideoUrl(word.toLowerCase());
+        if (videoUrl) {
+            videoSequence.push(videoUrl);
         }
     }
     currentIndex = 0;
 }
 
-// Function to load video sequence by letters
+async function fetchLetterVideoUrl(letter) {
+    const { data, error } = await supabase
+        .from('Videa') 
+        .select('video_url')
+        .eq('label', letter)
+        .maybeSingle(); // Use maybeSingle() for letters
+
+    if (error) {
+        console.error('Error fetching video for letter:', letter, error);
+        return null;
+    }
+
+    if (!data) {
+        console.warn(`No video found for letter: ${letter}`);
+        return null;
+    }
+
+    return data.video_url;
+}
+
+// Function to load video sequence by letters using Supabase
 async function loadVideoSequenceByLetters() {
     const characters = inputText.value.trim().split('');
     videoSequence = [];
 
     for (const char of characters) {
         if (/[a-zA-Z]/.test(char)) {
-            const videoSrc = `video/pismena/${char.toLowerCase()}.mp4`;
-            if (await videoExists(videoSrc)) {
-                videoSequence.push(videoSrc);
+            const videoUrl = await fetchLetterVideoUrl(char.toLowerCase());
+            if (videoUrl) {
+                videoSequence.push(videoUrl);
             }
         }
     }
@@ -61,9 +109,9 @@ function playVideoAtIndex(index) {
     videoPlayer.play();
     currentIndex = index;
 
-    // Update the title with the current letter or word
-    const currentChar = videoSequence[index].split('/').pop().split('.')[0];
-    document.getElementById('currentLetter').innerText = currentChar.toUpperCase();
+    // Update the title with the current word or letter
+    const currentLabel = videoSequence[index].split('/').pop().split('.')[0];
+    document.getElementById('currentLetter').innerText = currentLabel.toUpperCase();
 
     if (autoPlayEnabled) {
         videoPlayer.onended = () => {
@@ -83,7 +131,7 @@ function playVideoAtIndex(index) {
 translateBtn.addEventListener('click', async () => {
     autoPlayEnabled = true;
 
-    // Based on current mode, load the correct video sequence
+    // Load the video sequence based on the current translation mode
     if (currentTranslationMode === 'words') {
         await loadVideoSequenceByWords();
     } else if (currentTranslationMode === 'letters') {
@@ -92,20 +140,22 @@ translateBtn.addEventListener('click', async () => {
 
     if (videoSequence.length > 0) {
         playVideoAtIndex(currentIndex);
+    } else {
+        statusText.innerText = 'No videos found for the entered text.';
     }
 });
 
 // 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
+    translateWordsBtn.classList.add('active');
     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
+    translateLettersBtn.classList.add('active');
     translateWordsBtn.classList.remove('active');
 });