Update Script_Speech_recognition/videoplayer.js

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();
+        }
+    });
 });