Update Script_Speech_recognition/videoplayer.js
This commit is contained in:
parent
50cc803e28
commit
830ff00b2b
@ -1,177 +1,118 @@
|
|||||||
import { createClient } from 'https://cdn.jsdelivr.net/npm/@supabase/supabase-js/+esm';
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
const supabaseUrl = 'https://manesldshonpegglmyan.supabase.co'
|
const inputText = document.getElementById('inputText');
|
||||||
const supabaseKey = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im1hbmVzbGRzaG9ucGVnZ2xteWFuIiwicm9sZSI6InNlcnZpY2Vfcm9sZSIsImlhdCI6MTczMDcxNzQ2NCwiZXhwIjoyMDQ2MjkzNDY0fQ.saaJeTtwYZCS3YKJYmQsAOSAEFzUVUJnoJSD8-lgLHo'
|
const videoPlayer = document.getElementById('translationVideo');
|
||||||
const supabase = createClient(supabaseUrl, supabaseKey)
|
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
|
let videoSequence = [];
|
||||||
const inputText = document.getElementById('inputText');
|
let currentIndex = 0;
|
||||||
const videoPlayer = document.getElementById('translationVideo');
|
let currentMode = 'letters'; // Default mode
|
||||||
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');
|
|
||||||
|
|
||||||
// Translation state variables
|
// Switch to "words" mode
|
||||||
let videoSequence = [];
|
wordTab.addEventListener('click', () => {
|
||||||
let currentIndex = 0;
|
currentMode = 'words';
|
||||||
let autoPlayEnabled = true;
|
wordTab.classList.add('active');
|
||||||
let currentTranslationMode = 'words'; // Default mode
|
letterTab.classList.remove('active');
|
||||||
|
notification.style.display = 'none'; // Hide notification when switching mode
|
||||||
|
});
|
||||||
|
|
||||||
// Function to check if video exists (for local testing)
|
// Switch to "letters" mode
|
||||||
async function videoExists(src) {
|
letterTab.addEventListener('click', () => {
|
||||||
return new Promise(resolve => {
|
currentMode = 'letters';
|
||||||
|
letterTab.classList.add('active');
|
||||||
|
wordTab.classList.remove('active');
|
||||||
|
notification.style.display = 'none'; // Hide notification when switching mode
|
||||||
|
});
|
||||||
|
|
||||||
|
// Function to check if a video exists
|
||||||
|
async function videoExists(src) {
|
||||||
|
return new Promise((resolve) => {
|
||||||
const video = document.createElement('video');
|
const video = document.createElement('video');
|
||||||
video.src = src;
|
video.src = src;
|
||||||
video.onloadeddata = () => resolve(true);
|
video.onloadeddata = () => resolve(true);
|
||||||
video.onerror = () => resolve(false);
|
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) {
|
// Generate video sequence and check for missing videos
|
||||||
console.warn(`No video found for word: ${word}`);
|
async function generateVideoSequence() {
|
||||||
return null;
|
const text = inputText.value.trim();
|
||||||
}
|
const items = currentMode === 'words' ? text.split(' ') : text.split('');
|
||||||
|
|
||||||
return data.video_url;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Function to load video sequence by words using Supabase
|
|
||||||
async function loadVideoSequenceByWords() {
|
|
||||||
const words = inputText.value.trim().split(' ');
|
|
||||||
videoSequence = [];
|
videoSequence = [];
|
||||||
|
let missingVideos = false;
|
||||||
|
|
||||||
for (const word of words) {
|
for (const item of items) {
|
||||||
const videoUrl = await fetchVideoUrl(word.toLowerCase());
|
const videoPath =
|
||||||
if (videoUrl) {
|
currentMode === 'words'
|
||||||
videoSequence.push(videoUrl);
|
? `video/${item.toLowerCase()}.mp4`
|
||||||
|
: `video/pismena/${item.toLowerCase()}.mp4`;
|
||||||
|
|
||||||
|
const exists = await videoExists(videoPath);
|
||||||
|
if (exists) {
|
||||||
|
videoSequence.push(videoPath);
|
||||||
|
} else {
|
||||||
|
missingVideos = true;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
currentIndex = 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
async function fetchLetterVideoUrl(letter) {
|
if (missingVideos) {
|
||||||
const { data, error } = await supabase
|
notification.style.display = 'flex'; // Show notification if videos are missing
|
||||||
.from('Videa')
|
} else {
|
||||||
.select('video_url')
|
notification.style.display = 'none'; // Hide notification if all videos exist
|
||||||
.eq('label', letter)
|
|
||||||
.maybeSingle(); // Use maybeSingle() for letters
|
|
||||||
|
|
||||||
if (error) {
|
|
||||||
console.error('Error fetching video for letter:', letter, error);
|
|
||||||
return null;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!data) {
|
currentIndex = 0; // Reset to the beginning of the sequence
|
||||||
console.warn(`No video found for letter: ${letter}`);
|
|
||||||
return null;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return data.video_url;
|
// Play video at the current index
|
||||||
}
|
function playVideo() {
|
||||||
|
if (videoSequence.length === 0) return;
|
||||||
|
|
||||||
// Function to load video sequence by letters using Supabase
|
videoPlayer.src = videoSequence[currentIndex];
|
||||||
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();
|
videoPlayer.play();
|
||||||
currentIndex = index;
|
|
||||||
|
|
||||||
// Update the title with the current word or letter
|
// Update current word/letter display
|
||||||
const currentLabel = videoSequence[index].split('/').pop().split('.')[0];
|
const currentItem =
|
||||||
document.getElementById('currentLetter').innerText = currentLabel.toUpperCase();
|
currentMode === 'words'
|
||||||
|
? inputText.value.trim().split(' ')[currentIndex]
|
||||||
if (autoPlayEnabled) {
|
: inputText.value.trim().split('')[currentIndex];
|
||||||
videoPlayer.onended = () => {
|
currentDisplay.textContent = currentItem.toUpperCase();
|
||||||
currentIndex++;
|
|
||||||
if (currentIndex < videoSequence.length) {
|
|
||||||
playVideoAtIndex(currentIndex);
|
|
||||||
} else {
|
|
||||||
autoPlayEnabled = false;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
} else {
|
|
||||||
videoPlayer.onended = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 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) {
|
// Automatically play the next video in the sequence
|
||||||
playVideoAtIndex(currentIndex);
|
videoPlayer.addEventListener('ended', () => {
|
||||||
} 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) {
|
if (currentIndex < videoSequence.length - 1) {
|
||||||
autoPlayEnabled = false;
|
|
||||||
currentIndex++;
|
currentIndex++;
|
||||||
playVideoAtIndex(currentIndex);
|
playVideo();
|
||||||
}
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Navigate to the previous video
|
||||||
|
prevBtn.addEventListener('click', () => {
|
||||||
|
if (currentIndex > 0) {
|
||||||
|
currentIndex--;
|
||||||
|
playVideo();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Navigate to the next video
|
||||||
|
nextBtn.addEventListener('click', () => {
|
||||||
|
if (currentIndex < videoSequence.length - 1) {
|
||||||
|
currentIndex++;
|
||||||
|
playVideo();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Handle "Prelož" button click
|
||||||
|
translateBtn.addEventListener('click', async () => {
|
||||||
|
await generateVideoSequence();
|
||||||
|
if (videoSequence.length > 0) {
|
||||||
|
playVideo();
|
||||||
|
}
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user