119 lines
4.0 KiB
JavaScript
119 lines
4.0 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function () {
|
|
const inputText = document.getElementById('inputText');
|
|
const videoPlayer = document.getElementById('translationVideo');
|
|
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
|
|
|
|
let videoSequence = [];
|
|
let currentIndex = 0;
|
|
let currentMode = 'letters'; // Default mode
|
|
|
|
// Switch to "words" mode
|
|
wordTab.addEventListener('click', () => {
|
|
currentMode = 'words';
|
|
wordTab.classList.add('active');
|
|
letterTab.classList.remove('active');
|
|
notification.style.display = 'none'; // Hide notification when switching mode
|
|
});
|
|
|
|
// Switch to "letters" mode
|
|
letterTab.addEventListener('click', () => {
|
|
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');
|
|
video.src = src;
|
|
video.onloadeddata = () => resolve(true);
|
|
video.onerror = () => resolve(false);
|
|
});
|
|
}
|
|
|
|
// Generate video sequence and check for missing videos
|
|
async function generateVideoSequence() {
|
|
const text = inputText.value.trim();
|
|
const items = currentMode === 'words' ? text.split(' ') : text.split('');
|
|
videoSequence = [];
|
|
let missingVideos = false;
|
|
|
|
for (const item of items) {
|
|
const videoPath =
|
|
currentMode === 'words'
|
|
? `video/${item.toLowerCase()}.mp4`
|
|
: `video/pismena/${item.toLowerCase()}.mp4`;
|
|
|
|
const exists = await videoExists(videoPath);
|
|
if (exists) {
|
|
videoSequence.push(videoPath);
|
|
} else {
|
|
missingVideos = true;
|
|
}
|
|
}
|
|
|
|
if (missingVideos) {
|
|
notification.style.display = 'flex'; // Show notification if videos are missing
|
|
} else {
|
|
notification.style.display = 'none'; // Hide notification if all videos exist
|
|
}
|
|
|
|
currentIndex = 0; // Reset to the beginning of the sequence
|
|
}
|
|
|
|
// Play video at the current index
|
|
function playVideo() {
|
|
if (videoSequence.length === 0) return;
|
|
|
|
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();
|
|
}
|
|
|
|
// Automatically play the next video in the sequence
|
|
videoPlayer.addEventListener('ended', () => {
|
|
if (currentIndex < videoSequence.length - 1) {
|
|
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();
|
|
}
|
|
});
|
|
});
|