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-18 17:45:16 +00:00
parent 8dae29305a
commit 6154b6effe
1 changed files with 28 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
Script_Speech_recognition/videoplayer.js
View File

@ -1,22 +1,19 @@
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)
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');
const translateBtn = document.getElementById('translateBtn'); // Prelož button
let videoSequence = [];
let currentIndex = 0;
let autoPlayEnabled = true;
let currentTranslationMode = 'words';
// Variable to track the current translation method
let currentTranslationMode = 'words'; // Default mode
// Function to check if video exists
async function videoExists(src) {
return new Promise(resolve => {
const video = document.createElement('video');
@ -26,69 +23,37 @@ async function videoExists(src) {
});
}
async function fetchVideoUrl(word) {
const { data, error } = await supabase
.from('Videa')
.select('video_url')
.eq('label', word)
.maybeSingle();
if (error) {
console.error('Error fetching video:', error);
return null;
}
return data.video_url;
}
// Function to load video sequence by words
async function loadVideoSequenceByWords() {
const words = inputText.value.trim().split(' ');
const words = inputText.value.trim().split(' ');
videoSequence = [];
for (const word of words) {
const videoUrl = await fetchVideoUrl(word.toLowerCase());
if (videoUrl) {
videoSequence.push(videoUrl);
const videoSrc = `video/${word.toLowerCase()}.mp4`;
if (await videoExists(videoSrc)) {
videoSequence.push(videoSrc);
}
}
currentIndex = 0;
}
async function fetchLetterVideoUrl(letter) {
const { data, error } = await supabase
.from('Videa')
.select('video_url')
.eq('label', letter)
.maybeSingle();
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
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);
const videoSrc = `video/pismena/${char.toLowerCase()}.mp4`;
if (await videoExists(videoSrc)) {
videoSequence.push(videoSrc);
}
}
}
currentIndex = 0;
}
// Function to play video at a specific index
function playVideoAtIndex(index) {
if (index < 0 || index >= videoSequence.length) return;
@ -96,8 +61,9 @@ function playVideoAtIndex(index) {
videoPlayer.play();
currentIndex = index;
const currentLabel = videoSequence[index].split('/').pop().split('.')[0];
document.getElementById('currentLetter').innerText = currentLabel.toUpperCase();
// Update the title with the current letter or word
const currentChar = videoSequence[index].split('/').pop().split('.')[0];
document.getElementById('currentLetter').innerText = currentChar.toUpperCase();
if (autoPlayEnabled) {
videoPlayer.onended = () => {
@ -113,9 +79,11 @@ function playVideoAtIndex(index) {
}
}
// Event listener for "Prelož" button (Translate button)
translateBtn.addEventListener('click', async () => {
autoPlayEnabled = true;
// Based on current mode, load the correct video sequence
if (currentTranslationMode === 'words') {
await loadVideoSequenceByWords();
} else if (currentTranslationMode === 'letters') {
@ -124,23 +92,24 @@ translateBtn.addEventListener('click', async () => {
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';
translateWordsBtn.classList.add('active');
currentTranslationMode = 'words'; // Set to words mode
translateWordsBtn.classList.add('active'); // Optionally add active class
translateLettersBtn.classList.remove('active');
});
// Event listener for "Preložiť po písmenách" button
translateLettersBtn.addEventListener('click', () => {
currentTranslationMode = 'letters';
translateLettersBtn.classList.add('active');
currentTranslationMode = 'letters'; // Set to letters mode
translateLettersBtn.classList.add('active'); // Optionally add active class
translateWordsBtn.classList.remove('active');
});
// Event listeners for prev and next buttons to navigate video sequence
prevBtn.addEventListener('click', () => {
if (currentIndex > 0) {
autoPlayEnabled = false;
@ -155,4 +124,4 @@ nextBtn.addEventListener('click', () => {
currentIndex++;
playVideoAtIndex(currentIndex);
}
});
});