From 830ff00b2bccfad921f008c9cc3cbc020ace7432 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rio=20Panenko?= Date: Wed, 20 Nov 2024 22:45:32 +0000 Subject: [PATCH] Update Script_Speech_recognition/videoplayer.js --- Script_Speech_recognition/videoplayer.js | 253 +++++++++-------------- 1 file changed, 97 insertions(+), 156 deletions(-) diff --git a/Script_Speech_recognition/videoplayer.js b/Script_Speech_recognition/videoplayer.js index addddba..d30e775 100644 --- a/Script_Speech_recognition/videoplayer.js +++ b/Script_Speech_recognition/videoplayer.js @@ -1,177 +1,118 @@ -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) +document.addEventListener('DOMContentLoaded', function () { + const inputText = document.getElementById('inputText'); + const videoPlayer = document.getElementById('translationVideo'); + const translateBtn = document.getElementById('translateBtn'); + const wordTab = document.getElementById('wordTab'); + const letterTab = document.getElementById('letterTab'); + const prevBtn = document.getElementById('prevBtn'); + const nextBtn = document.getElementById('nextBtn'); + const notification = document.getElementById('notification'); + const currentDisplay = document.getElementById('currentDisplay'); // Display for current word/letter -// 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'); // Prelož button -const statusText = document.getElementById('statusText'); + let videoSequence = []; + let currentIndex = 0; + let currentMode = 'letters'; // Default mode -// Translation state variables -let videoSequence = []; -let currentIndex = 0; -let autoPlayEnabled = true; -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'); - video.src = src; - video.onloadeddata = () => resolve(true); - video.onerror = () => resolve(false); + // Switch to "words" mode + wordTab.addEventListener('click', () => { + currentMode = 'words'; + wordTab.classList.add('active'); + letterTab.classList.remove('active'); + notification.style.display = 'none'; // Hide notification when switching mode }); -} -// 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() + // Switch to "letters" mode + letterTab.addEventListener('click', () => { + currentMode = 'letters'; + letterTab.classList.add('active'); + wordTab.classList.remove('active'); + notification.style.display = 'none'; // Hide notification when switching mode + }); - if (error) { - console.error('Error fetching video:', error); - return null; + // Function to check if a video exists + async function videoExists(src) { + return new Promise((resolve) => { + const video = document.createElement('video'); + video.src = src; + video.onloadeddata = () => resolve(true); + video.onerror = () => resolve(false); + }); } - if (!data) { - console.warn(`No video found for word: ${word}`); - return null; - } + // Generate video sequence and check for missing videos + async function generateVideoSequence() { + const text = inputText.value.trim(); + const items = currentMode === 'words' ? text.split(' ') : text.split(''); + videoSequence = []; + let missingVideos = false; - return data.video_url; -} + for (const item of items) { + const videoPath = + currentMode === 'words' + ? `video/${item.toLowerCase()}.mp4` + : `video/pismena/${item.toLowerCase()}.mp4`; - -// Function to load video sequence by words using Supabase -async function loadVideoSequenceByWords() { - const words = inputText.value.trim().split(' '); - videoSequence = []; - - for (const word of words) { - const videoUrl = await fetchVideoUrl(word.toLowerCase()); - if (videoUrl) { - videoSequence.push(videoUrl); - } - } - currentIndex = 0; -} - -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 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; - - videoPlayer.src = videoSequence[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(); - - if (autoPlayEnabled) { - videoPlayer.onended = () => { - currentIndex++; - if (currentIndex < videoSequence.length) { - playVideoAtIndex(currentIndex); + const exists = await videoExists(videoPath); + if (exists) { + videoSequence.push(videoPath); } else { - autoPlayEnabled = false; + missingVideos = true; } - }; - } else { - videoPlayer.onended = null; - } -} + } -// Event listener for "Prelož" button (Translate button) -translateBtn.addEventListener('click', async () => { - autoPlayEnabled = true; + if (missingVideos) { + notification.style.display = 'flex'; // Show notification if videos are missing + } else { + notification.style.display = 'none'; // Hide notification if all videos exist + } - // Load the video sequence based on the current translation mode - if (currentTranslationMode === 'words') { - await loadVideoSequenceByWords(); - } else if (currentTranslationMode === 'letters') { - await loadVideoSequenceByLetters(); + currentIndex = 0; // Reset to the beginning of the sequence } - if (videoSequence.length > 0) { - playVideoAtIndex(currentIndex); - } else { - statusText.innerText = 'No videos found for the entered text.'; + // Play video at the current index + function playVideo() { + if (videoSequence.length === 0) return; + + videoPlayer.src = videoSequence[currentIndex]; + videoPlayer.play(); + + // Update current word/letter display + const currentItem = + currentMode === 'words' + ? inputText.value.trim().split(' ')[currentIndex] + : inputText.value.trim().split('')[currentIndex]; + currentDisplay.textContent = currentItem.toUpperCase(); } -}); -// Event listener for "Preložiť po slovách" button -translateWordsBtn.addEventListener('click', () => { - currentTranslationMode = 'words'; // Set to words mode - translateWordsBtn.classList.add('active'); - translateLettersBtn.classList.remove('active'); -}); + // Automatically play the next video in the sequence + videoPlayer.addEventListener('ended', () => { + if (currentIndex < videoSequence.length - 1) { + currentIndex++; + playVideo(); + } + }); -// Event listener for "Preložiť po písmenách" button -translateLettersBtn.addEventListener('click', () => { - currentTranslationMode = 'letters'; // Set to letters mode - translateLettersBtn.classList.add('active'); - translateWordsBtn.classList.remove('active'); -}); + // Navigate to the previous video + prevBtn.addEventListener('click', () => { + if (currentIndex > 0) { + currentIndex--; + playVideo(); + } + }); -// Event listeners for prev and next buttons to navigate video sequence -prevBtn.addEventListener('click', () => { - if (currentIndex > 0) { - autoPlayEnabled = false; - currentIndex--; - playVideoAtIndex(currentIndex); - } -}); + // Navigate to the next video + nextBtn.addEventListener('click', () => { + if (currentIndex < videoSequence.length - 1) { + currentIndex++; + playVideo(); + } + }); -nextBtn.addEventListener('click', () => { - if (currentIndex < videoSequence.length - 1) { - autoPlayEnabled = false; - currentIndex++; - playVideoAtIndex(currentIndex); - } + // Handle "Prelož" button click + translateBtn.addEventListener('click', async () => { + await generateVideoSequence(); + if (videoSequence.length > 0) { + playVideo(); + } + }); });