diff --git a/Script_Speech_recognition/stranka.html b/Script_Speech_recognition/stranka.html index b024b14..14310d3 100644 --- a/Script_Speech_recognition/stranka.html +++ b/Script_Speech_recognition/stranka.html @@ -45,9 +45,9 @@ + - diff --git a/Script_Speech_recognition/style.css b/Script_Speech_recognition/style.css index 61c0592..661fd1c 100644 --- a/Script_Speech_recognition/style.css +++ b/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 */ } -} +} \ No newline at end of file diff --git a/Script_Speech_recognition/videoplayer.js b/Script_Speech_recognition/videoplayer.js index 414cb3e..addddba 100644 --- a/Script_Speech_recognition/videoplayer.js +++ b/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); } -}); \ No newline at end of file +});