diff --git a/Script_Speech_recognition/videoplayer.js b/Script_Speech_recognition/videoplayer.js index 414cb3e..ae35e14 100644 --- a/Script_Speech_recognition/videoplayer.js +++ b/Script_Speech_recognition/videoplayer.js @@ -1,22 +1,19 @@ -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'); -const statusText = document.getElementById('statusText'); +const translateBtn = document.getElementById('translateBtn'); // Prelož button 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'); @@ -26,69 +23,37 @@ async function videoExists(src) { }); } -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; -} - +// Function to load video sequence by words async function loadVideoSequenceByWords() { - const words = inputText.value.trim().split(' '); + const words = inputText.value.trim().split(' '); videoSequence = []; for (const word of words) { - const videoUrl = await fetchVideoUrl(word.toLowerCase()); - if (videoUrl) { - videoSequence.push(videoUrl); + const videoSrc = `video/${word.toLowerCase()}.mp4`; + if (await videoExists(videoSrc)) { + videoSequence.push(videoSrc); } } currentIndex = 0; } -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; -} - +// Function to load video sequence by letters async function loadVideoSequenceByLetters() { const characters = inputText.value.trim().split(''); videoSequence = []; for (const char of characters) { if (/[a-zA-Z]/.test(char)) { - const videoUrl = await fetchLetterVideoUrl(char.toLowerCase()); - if (videoUrl) { - videoSequence.push(videoUrl); + const videoSrc = `video/pismena/${char.toLowerCase()}.mp4`; + if (await videoExists(videoSrc)) { + videoSequence.push(videoSrc); } } } currentIndex = 0; } +// Function to play video at a specific index function playVideoAtIndex(index) { if (index < 0 || index >= videoSequence.length) return; @@ -96,8 +61,9 @@ function playVideoAtIndex(index) { videoPlayer.play(); currentIndex = index; - const currentLabel = videoSequence[index].split('/').pop().split('.')[0]; - document.getElementById('currentLetter').innerText = currentLabel.toUpperCase(); + // Update the title with the current letter or word + const currentChar = videoSequence[index].split('/').pop().split('.')[0]; + document.getElementById('currentLetter').innerText = currentChar.toUpperCase(); if (autoPlayEnabled) { videoPlayer.onended = () => { @@ -113,9 +79,11 @@ 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') { @@ -124,23 +92,24 @@ 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'; - translateWordsBtn.classList.add('active'); + 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'; - translateLettersBtn.classList.add('active'); + 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; @@ -155,4 +124,4 @@ nextBtn.addEventListener('click', () => { currentIndex++; playVideoAtIndex(currentIndex); } -}); \ No newline at end of file +});