114 lines
3.0 KiB
JavaScript
114 lines
3.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');
|
|
|
|
let videoSequence = [];
|
|
let currentIndex = 0;
|
|
let autoPlayEnabled = true;
|
|
|
|
function videoExists(src) {
|
|
return new Promise(resolve => {
|
|
const video = document.createElement('video');
|
|
video.src = src;
|
|
video.onloadeddata = () => resolve(true);
|
|
video.onerror = () => resolve(false);
|
|
});
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
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 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;
|
|
}
|
|
}
|
|
|
|
translateWordsBtn.addEventListener('click', async () => {
|
|
autoPlayEnabled = true;
|
|
await loadVideoSequenceByWords();
|
|
if (videoSequence.length > 0) {
|
|
playVideoAtIndex(currentIndex);
|
|
}
|
|
});
|
|
|
|
translateLettersBtn.addEventListener('click', async () => {
|
|
autoPlayEnabled = true;
|
|
await loadVideoSequenceByLetters();
|
|
if (videoSequence.length > 0) {
|
|
playVideoAtIndex(currentIndex);
|
|
}
|
|
});
|
|
|
|
prevBtn.addEventListener('click', () => {
|
|
if (currentIndex > 0) {
|
|
autoPlayEnabled = false;
|
|
currentIndex--;
|
|
playVideoAtIndex(currentIndex);
|
|
}
|
|
});
|
|
|
|
nextBtn.addEventListener('click', () => {
|
|
if (currentIndex < videoSequence.length - 1) {
|
|
autoPlayEnabled = false;
|
|
currentIndex++;
|
|
playVideoAtIndex(currentIndex);
|
|
}
|
|
});
|
|
|
|
|
|
function hideControls() {
|
|
if (!videoPlayer.matches(':hover')) {
|
|
videoPlayer.controls = false;
|
|
}
|
|
requestAnimationFrame(hideControls);
|
|
}
|
|
|
|
videoPlayer.addEventListener('mouseenter', () => {
|
|
videoPlayer.controls = true;
|
|
});
|
|
|
|
hideControls();
|