128 lines
4.0 KiB
JavaScript
128 lines
4.0 KiB
JavaScript
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
|
|
|
|
let videoSequence = [];
|
|
let currentIndex = 0;
|
|
let autoPlayEnabled = true;
|
|
|
|
// 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');
|
|
video.src = src;
|
|
video.onloadeddata = () => resolve(true);
|
|
video.onerror = () => resolve(false);
|
|
});
|
|
}
|
|
|
|
// Function to load video sequence by words
|
|
async function loadVideoSequenceByWords() {
|
|
const words = inputText.value.trim().split(' ');
|
|
videoSequence = [];
|
|
|
|
for (const word of words) {
|
|
const videoSrc = `video/${word.toLowerCase()}.mp4`;
|
|
if (await videoExists(videoSrc)) {
|
|
videoSequence.push(videoSrc);
|
|
}
|
|
}
|
|
currentIndex = 0;
|
|
}
|
|
|
|
// 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 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;
|
|
|
|
videoPlayer.src = videoSequence[index];
|
|
videoPlayer.play();
|
|
currentIndex = index;
|
|
|
|
// 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 = () => {
|
|
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;
|
|
|
|
// Based on current mode, load the correct video sequence
|
|
if (currentTranslationMode === 'words') {
|
|
await loadVideoSequenceByWords();
|
|
} else if (currentTranslationMode === 'letters') {
|
|
await loadVideoSequenceByLetters();
|
|
}
|
|
|
|
if (videoSequence.length > 0) {
|
|
playVideoAtIndex(currentIndex);
|
|
}
|
|
});
|
|
|
|
// Event listener for "Preložiť po slovách" button
|
|
translateWordsBtn.addEventListener('click', () => {
|
|
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'; // 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;
|
|
currentIndex--;
|
|
playVideoAtIndex(currentIndex);
|
|
}
|
|
});
|
|
|
|
nextBtn.addEventListener('click', () => {
|
|
if (currentIndex < videoSequence.length - 1) {
|
|
autoPlayEnabled = false;
|
|
currentIndex++;
|
|
playVideoAtIndex(currentIndex);
|
|
}
|
|
});
|