projekt-7/scripts/videoplayer.js

import { createClient } from 'https://cdn.jsdelivr.net/npm/@supabase/supabase-js/+esm';
import config from '../scripts/config.js';

const supabaseUrl = config.SUPABASE_URL;
const supabaseKey = config.SUPABASE_KEY;
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 statusText = document.getElementById('statusText');

// Translation state variables
let videoSequence = [];
let currentIndex = 0;
let autoPlayEnabled = true;
let currentTranslationMode = 'letters'; // Default mode
translateBtn.disabled = true;

// 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);
    });
}

// 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()

    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 = [];

    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);
            } else {
                autoPlayEnabled = false;
            }
        };
    } else {
        videoPlayer.onended = null;
    }
}

// Initially set the active button based on the default translation mode
if (currentTranslationMode === 'letters') {
    translateLettersBtn.classList.add('active');
    translateWordsBtn.classList.remove('active');
} else {
    translateWordsBtn.classList.add('active');
    translateLettersBtn.classList.remove('active');
}

// 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') {
        await loadVideoSequenceByLetters();
    }

    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');
    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');
    translateWordsBtn.classList.remove('active');
});

// Event listeners for prev and next buttons to navigate video sequence
prevBtn.addEventListener('click', () => {
    if (currentIndex > 0) {
        autoPlayEnabled = false;
        currentIndex--;
        playVideoAtIndex(currentIndex);
    }
});

nextBtn.addEventListener('click', () => {
    if (currentIndex < videoSequence.length - 1) {
        autoPlayEnabled = false;
        currentIndex++;
        playVideoAtIndex(currentIndex);
    }
});

inputText.addEventListener('input', () => {
    if (inputText.value.trim().length > 0) {
        translateBtn.disabled = false; // Enable the translate button if there's text
    } else {
        translateBtn.disabled = true; // Disable the translate button if the text is empty
    }
});