diff --git a/Script_Speech_recognition/videoplayer.js b/Script_Speech_recognition/videoplayer.js index ae35e14..414cb3e 100644 --- a/Script_Speech_recognition/videoplayer.js +++ b/Script_Speech_recognition/videoplayer.js @@ -1,19 +1,22 @@ +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) + 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'); // Prelož button +const translateBtn = document.getElementById('translateBtn'); +const statusText = document.getElementById('statusText'); let videoSequence = []; let currentIndex = 0; let autoPlayEnabled = true; +let currentTranslationMode = 'words'; -// 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'); @@ -23,37 +26,69 @@ async function videoExists(src) { }); } -// Function to load video sequence by words +async function fetchVideoUrl(word) { + const { data, error } = await supabase + .from('Videa') + .select('video_url') + .eq('label', word) + .maybeSingle(); + + if (error) { + console.error('Error fetching video:', error); + return null; + } + + return data.video_url; +} + 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(); + + 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; +} + 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); } } } currentIndex = 0; } -// Function to play video at a specific index function playVideoAtIndex(index) { if (index < 0 || index >= videoSequence.length) return; @@ -61,9 +96,8 @@ 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(); + const currentLabel = videoSequence[index].split('/').pop().split('.')[0]; + document.getElementById('currentLetter').innerText = currentLabel.toUpperCase(); if (autoPlayEnabled) { videoPlayer.onended = () => { @@ -79,11 +113,9 @@ function playVideoAtIndex(index) { } } -// 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(); } else if (currentTranslationMode === 'letters') { @@ -92,24 +124,23 @@ 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 + currentTranslationMode = 'words'; + 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 + currentTranslationMode = 'letters'; + 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; @@ -124,4 +155,4 @@ nextBtn.addEventListener('click', () => { currentIndex++; playVideoAtIndex(currentIndex); } -}); +}); \ No newline at end of file