mk875sd/projekt-7
4
1
Fork 0
Code Issues 14 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Update Script_Speech_recognition/videoplayer.js

Browse Source
This commit is contained in:
Mário Panenko 2024-11-20 22:45:32 +00:00
parent 50cc803e28
commit 830ff00b2b
1 changed files with 97 additions and 156 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

253
Script_Speech_recognition/videoplayer.js
View File

@ -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)
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) // Switch to "letters" mode
async function fetchVideoUrl(word) { letterTab.addEventListener('click', () => {
const { data, error } = await supabase currentMode = 'letters';
.from('Videa') letterTab.classList.add('active');
.select('video_url') wordTab.classList.remove('active');
.eq('label', word) notification.style.display = 'none'; // Hide notification when switching mode
.maybeSingle(); // Use maybeSingle() instead of single() });
if (error) { // Function to check if a video exists
console.error('Error fetching video:', error); async function videoExists(src) {
return null; return new Promise((resolve) => {
const video = document.createElement('video');
video.src = src;
video.onloadeddata = () => resolve(true);
video.onerror = () => resolve(false);
});
} }
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('');
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`;
const exists = await videoExists(videoPath);
// Function to load video sequence by words using Supabase if (exists) {
async function loadVideoSequenceByWords() { videoSequence.push(videoPath);
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 { } else {
autoPlayEnabled = false; missingVideos = true;
} }
}; }
} else {
videoPlayer.onended = null;
}
}
// Event listener for "Prelož" button (Translate button) if (missingVideos) {
translateBtn.addEventListener('click', async () => { notification.style.display = 'flex'; // Show notification if videos are missing
autoPlayEnabled = true; } else {
notification.style.display = 'none'; // Hide notification if all videos exist
}
// Load the video sequence based on the current translation mode currentIndex = 0; // Reset to the beginning of the sequence
if (currentTranslationMode === 'words') {
await loadVideoSequenceByWords();
} else if (currentTranslationMode === 'letters') {
await loadVideoSequenceByLetters();
} }
if (videoSequence.length > 0) { // Play video at the current index
playVideoAtIndex(currentIndex); function playVideo() {
} else { if (videoSequence.length === 0) return;
statusText.innerText = 'No videos found for the entered text.';
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 // Automatically play the next video in the sequence
translateWordsBtn.addEventListener('click', () => { videoPlayer.addEventListener('ended', () => {
currentTranslationMode = 'words'; // Set to words mode if (currentIndex < videoSequence.length - 1) {
translateWordsBtn.classList.add('active'); currentIndex++;
translateLettersBtn.classList.remove('active'); playVideo();
}); }
});
// Event listener for "Preložiť po písmenách" button // Navigate to the previous video
translateLettersBtn.addEventListener('click', () => { prevBtn.addEventListener('click', () => {
currentTranslationMode = 'letters'; // Set to letters mode if (currentIndex > 0) {
translateLettersBtn.classList.add('active'); currentIndex--;
translateWordsBtn.classList.remove('active'); playVideo();
}); }
});
// Event listeners for prev and next buttons to navigate video sequence // Navigate to the next video
prevBtn.addEventListener('click', () => { nextBtn.addEventListener('click', () => {
if (currentIndex > 0) { if (currentIndex < videoSequence.length - 1) {
autoPlayEnabled = false; currentIndex++;
currentIndex--; playVideo();
playVideoAtIndex(currentIndex); }
} });
});
nextBtn.addEventListener('click', () => { // Handle "Prelož" button click
if (currentIndex < videoSequence.length - 1) { translateBtn.addEventListener('click', async () => {
autoPlayEnabled = false; await generateVideoSequence();
currentIndex++; if (videoSequence.length > 0) {
playVideoAtIndex(currentIndex); playVideo();
} }
});
}); });