111 lines
3.3 KiB
JavaScript
111 lines
3.3 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');
|
||
|
|
||
|
let videoSequence = []; // Array to store video paths
|
||
|
let currentIndex = 0; // Track the current video index
|
||
|
let autoPlayEnabled = true; // Flag for autoplay
|
||
|
|
||
|
// Helper function to check if a video file exists
|
||
|
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 based on words
|
||
|
async function loadVideoSequenceByWords() {
|
||
|
const words = inputText.value.trim().split(' '); // Split input into words
|
||
|
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 based on letters
|
||
|
async function loadVideoSequenceByLetters() {
|
||
|
const characters = inputText.value.trim().split(''); // Split input into characters
|
||
|
videoSequence = [];
|
||
|
|
||
|
for (const char of characters) {
|
||
|
// Skip spaces and punctuation
|
||
|
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 the specified index
|
||
|
function playVideoAtIndex(index) {
|
||
|
if (index < 0 || index >= videoSequence.length) return;
|
||
|
|
||
|
videoPlayer.src = videoSequence[index];
|
||
|
videoPlayer.play();
|
||
|
currentIndex = index;
|
||
|
|
||
|
if (autoPlayEnabled) {
|
||
|
videoPlayer.onended = () => {
|
||
|
currentIndex++;
|
||
|
if (currentIndex < videoSequence.length) {
|
||
|
playVideoAtIndex(currentIndex);
|
||
|
} else {
|
||
|
autoPlayEnabled = false;
|
||
|
}
|
||
|
};
|
||
|
} else {
|
||
|
videoPlayer.onended = null;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Event listener for the "Preložiť po slovách" button
|
||
|
translateWordsBtn.addEventListener('click', async () => {
|
||
|
autoPlayEnabled = true;
|
||
|
await loadVideoSequenceByWords();
|
||
|
if (videoSequence.length > 0) {
|
||
|
playVideoAtIndex(currentIndex);
|
||
|
}
|
||
|
});
|
||
|
|
||
|
// Event listener for the "Preložiť po písmenách" button
|
||
|
translateLettersBtn.addEventListener('click', async () => {
|
||
|
autoPlayEnabled = true;
|
||
|
await loadVideoSequenceByLetters();
|
||
|
if (videoSequence.length > 0) {
|
||
|
playVideoAtIndex(currentIndex);
|
||
|
}
|
||
|
});
|
||
|
|
||
|
// Event listeners for "Previous" and "Next" buttons
|
||
|
prevBtn.addEventListener('click', () => {
|
||
|
if (currentIndex > 0) {
|
||
|
autoPlayEnabled = false;
|
||
|
currentIndex--;
|
||
|
playVideoAtIndex(currentIndex);
|
||
|
}
|
||
|
});
|
||
|
|
||
|
nextBtn.addEventListener('click', () => {
|
||
|
if (currentIndex < videoSequence.length - 1) {
|
||
|
autoPlayEnabled = false;
|
||
|
currentIndex++;
|
||
|
playVideoAtIndex(currentIndex);
|
||
|
}
|
||
|
});
|
||
|
|
||
|
|