Мобильные автоматические перерывы между позициями транскрипта ⇐ Javascript

[Anonymous]

На мобильном телефоне, когда транскрипт прокручивает автоматически, чтобы следовать диалогу в настоящее время воспроизводимого в настоящее время, представление не остается фиксированным.
Вместо этого он прыгает: < /p>
Сначала он переходит к текущему диалогу, < /p>
, затем он внезапно переходит к вершине списка, < /p>
, а затем он снова поднимается назад. /> Это происходит во время нормальной прокрутки «следуя за токой»-не от постукивания. Автоматический свиток прерывается и запускается несколько раз в быстрой последовательности, поэтому положение продолжает меняться, а не плавно оставаться на текущем диалоге. < /P>
function generateTranscript() {
const transcriptContent = document.getElementById('transcriptContent');

if (!transcriptContent) {
console.error('Transcript content element not found');
return;
}

const hasEnglish = englishSubtitlesEnabled && englishSubtitles && englishSubtitles.length > 0;
const hasPersian = persianSubtitlesEnabled && persianSubtitles && persianSubtitles.length > 0;
const hasEnglishData = englishSubtitles && englishSubtitles.length > 0;

if (!hasEnglish && !hasPersian && hasEnglishData) {
transcriptContent.innerHTML = '';
generateTranscriptItems(englishSubtitles, false, false);
return;
}

if (!hasEnglish && !hasPersian) {
transcriptContent.innerHTML = '

هیچ متنی برای نمایش وجود ندارد';
return;
}

transcriptContent.innerHTML = '';

if (hasEnglish && hasPersian) {
generateBilingualTranscript();
} else if (hasEnglish) {
generateTranscriptItems(englishSubtitles, false, false);
} else if (hasPersian) {
generateTranscriptItems(persianSubtitles, true, false);
}

console.log(`Transcript generated successfully with ${hasEnglish && hasPersian ? 'bilingual' : hasEnglish ? 'English' : 'Persian'} subtitles`);
}

setTimeout(() => {
const currentItem = document.querySelector('.transcript-item.current');
if (currentItem && transcriptContent) {
scrollToCurrentItem(currentItem, transcriptContent);
}
}, 0);

function generateBilingualTranscript() {
const transcriptContent = document.getElementById('transcriptContent');
const maxLength = Math.max(englishSubtitles.length, persianSubtitles.length);
const isMobile = window.innerWidth word.trim());

words.forEach((word, wordIndex) => {
const wordSpan = document.createElement('span');
const cleanWord = word.replace(/[^\w'-]/g, '');

wordSpan.textContent = word;
wordSpan.className = 'transcript-word';
wordSpan.setAttribute('data-word', cleanWord.toLowerCase());

if (isMobile) {
wordSpan.style.cssText += `
display: inline;
word-break: break-word;
overflow-wrap: break-word;
`;
}

if (cleanWord.length > 1) {
wordSpan.addEventListener('click', (e) => {
e.preventDefault();
e.stopPropagation();
const targetWord = e.target.getAttribute('data-word');
if (targetWord) {
showTranslation(targetWord);
}
});

wordSpan.style.cursor = 'pointer';
wordSpan.addEventListener('mouseenter', function() {
if (!modalIsOpen) {
this.style.backgroundColor = 'rgba(76, 175, 80, 0.3)';
}
});
wordSpan.addEventListener('mouseleave', function() {
this.style.backgroundColor = 'transparent';
});
}

englishDiv.appendChild(wordSpan);

if (wordIndex < words.length - 1) {
englishDiv.appendChild(document.createTextNode(' '));
}
});

textContainer.appendChild(englishDiv);
}

if (persianSub) {
const persianDiv = document.createElement('div');
persianDiv.className = 'transcript-text persian-text';
persianDiv.style.direction = 'rtl';
persianDiv.style.textAlign = 'right';
persianDiv.style.color = '#888';
persianDiv.style.fontSize = '0.9em';
persianDiv.style.marginTop = '2px';

if (isMobile) {
persianDiv.style.cssText += `
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
line-height: 1.4;
max-width: 100%;
white-space: normal;
`;
}

const cleanedPersianText = cleanSubtitleText(persianSub.text);
persianDiv.textContent = cleanedPersianText;

textContainer.appendChild(persianDiv);
}

transcriptItem.addEventListener('click', (e) => {
if (!e.target.classList.contains('transcript-word')) {
document.querySelectorAll('.transcript-item').forEach(item => {
item.classList.remove('selected');
});

transcriptItem.classList.add('selected');

video.currentTime = subtitle.start;

clearTimeout(window.transcriptScrollTimeout);

setTimeout(() => {
updateCurrentTranscriptItem();
}, 50);
}
});

transcriptItem.appendChild(timeSpan);
transcriptItem.appendChild(textContainer);
transcriptContent.appendChild(transcriptItem);
}
}
function generateTranscriptItems(subtitles, isPersian, isBilingual = false) {
const transcriptContent = document.getElementById('transcriptContent');
const isMobile = window.innerWidth {
const transcriptItem = document.createElement('div');
transcriptItem.className = 'transcript-item';
transcriptItem.setAttribute('data-start', subtitle.start);
transcriptItem.setAttribute('data-end', subtitle.end);
transcriptItem.setAttribute('data-index', index);

if (isMobile) {
transcriptItem.style.cssText += `
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
max-width: 100%;
box-sizing: border-box;
padding: 10px 8px;
margin-bottom: 8px;
`;
}

const timeSpan = document.createElement('span');
timeSpan.className = 'transcript-time';
timeSpan.innerHTML = ` ${formatTime(subtitle.start)}`;

if (isMobile) {
timeSpan.style.cssText += `
display: block;
margin-bottom: 6px;
font-size: 12px;
opacity: 0.8;
`;
}

const textDiv = document.createElement('div');
textDiv.className = 'transcript-text';

if (isMobile) {
textDiv.style.cssText += `
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
line-height: 1.4;
max-width: 100%;
white-space: normal;
`;
}

const cleanedText = cleanSubtitleText(subtitle.text);

if (isPersian) {
textDiv.textContent = cleanedText;
textDiv.style.direction = 'rtl';
textDiv.style.textAlign = 'right';
} else {
const words = cleanedText.split(/\s+/).filter(word => word.trim());

words.forEach((word, wordIndex) => {
const wordSpan = document.createElement('span');
const cleanWord = word.replace(/[^\w'-]/g, '');

wordSpan.textContent = word;
wordSpan.className = 'transcript-word';
wordSpan.setAttribute('data-word', cleanWord.toLowerCase());

if (isMobile) {
wordSpan.style.cssText += `
display: inline;
word-break: break-word;
overflow-wrap: break-word;
`;
}

if (cleanWord.length > 1) {
wordSpan.addEventListener('click', (e) => {
e.preventDefault();
e.stopPropagation();
const targetWord = e.target.getAttribute('data-word');
if (targetWord) {
showTranslation(targetWord);
}
});

wordSpan.style.cursor = 'pointer';
wordSpan.addEventListener('mouseenter', function() {
if (!modalIsOpen) {
this.style.backgroundColor = 'rgba(76, 175, 80, 0.3)';
}
});
wordSpan.addEventListener('mouseleave', function() {
this.style.backgroundColor = 'transparent';
});
}

textDiv.appendChild(wordSpan);

if (wordIndex < words.length - 1) {
textDiv.appendChild(document.createTextNode(' '));
}
});
}

transcriptItem.addEventListener('click', (e) => {
if (!e.target.classList.contains('transcript-word')) {
document.querySelectorAll('.transcript-item').forEach(item => {
item.classList.remove('selected');
});
transcriptItem.classList.add('selected');

video.currentTime = subtitle.start;

clearTimeout(window.transcriptScrollTimeout);

setTimeout(() => {
updateCurrentTranscriptItem();
}, 50);
}
});

transcriptItem.appendChild(timeSpan);
transcriptItem.appendChild(textDiv);
transcriptContent.appendChild(transcriptItem);
});
}

window.transcriptScrollTimeout = null;

let autoScrollEnabled = true;
const AUTO_SCROLL_DISABLE_DURATION = 3000;

function updateCurrentTranscriptItem() {

if (!autoScrollEnabled) return;

const currentTime = video.currentTime;
const transcriptItems = document.querySelectorAll('.transcript-item');
const transcriptContent = document.getElementById('transcriptContent');

if (transcriptItems.length === 0 || !transcriptContent) {
return;
}

let newCurrentIndex = -1;

for (let i = 0; i < transcriptItems.length; i++) {
const item = transcriptItems;
const start = parseFloat(item.getAttribute('data-start'));
const end = parseFloat(item.getAttribute('data-end'));

if (currentTime >= start && currentTime < end) {
newCurrentIndex = i;
break;
}
}

if (newCurrentIndex !== -1 && newCurrentIndex !== currentTranscriptIndex) {
const oldItem = document.querySelector('.transcript-item.current');
if (oldItem) {
oldItem.classList.remove('current');
}

const currentItem = transcriptItems[newCurrentIndex];
currentItem.classList.add('current');
currentTranscriptIndex = newCurrentIndex;

scrollToCurrentItem(currentItem, transcriptContent);
} else if (newCurrentIndex === -1 && currentTranscriptIndex !== -1) {

const oldItem = document.querySelector('.transcript-item.current');
if (oldItem) {
oldItem.classList.remove('current');
}
currentTranscriptIndex = -1;
}
}

function handleUserScroll() {
autoScrollEnabled = false;

if (window.autoScrollTimeout) {
clearTimeout(window.autoScrollTimeout);
}

window.autoScrollTimeout = setTimeout(() => {
autoScrollEnabled = true;
}, 4000);
}

function scrollToCurrentItem(currentItem, transcriptContent) {
if (!currentItem || !transcriptContent || !autoScrollEnabled) return;

const containerRect = transcriptContent.getBoundingClientRect();
const itemRect = currentItem.getBoundingClientRect();

const isVisible = (
itemRect.top >= containerRect.top &&
itemRect.bottom {
isScrolling = true;
});

transcriptContent.addEventListener('touchend', () => {
if (isScrolling) {
handleUserScroll();
isScrolling = false;
}
});

transcriptContent.addEventListener('wheel', () => {
handleUserScroll();
});

let touchStartY = 0;
transcriptContent.addEventListener('touchstart', (e) => {
touchStartY = e.touches[0].clientY;
});

transcriptContent.addEventListener('touchmove', (e) => {
const touchCurrentY = e.touches[0].clientY;
const touchDiff = Math.abs(touchCurrentY - touchStartY);

if (touchDiff > 10) {
handleUserScroll();
}
});
}
});
function handleMobileLayout() {
const isMobile = window.innerWidth {
generateTranscript();
handleMobileLayout();

transcriptContent.scrollTop = savedScrollTop;

const currentItem = document.querySelector('.transcript-item.current');
if (currentItem) {
scrollToCurrentItem(currentItem, transcriptContent);
}

}, 250);
}

window.addEventListener('resize', handleResize);
window.addEventListener('orientationchange', handleResize);

window.addEventListener('orientationchange', () => {
setTimeout(() => {
handleResize();
}, 500);
});

if (window.visualViewport) {
window.visualViewport.addEventListener('resize', () => {
handleResize();
});
}
function updateTranscriptSubtitles() {
const transcriptContent = document.getElementById('transcriptContent');
const isMobile = window.innerWidth {
generateTranscript();
handleMobileLayout();
}, 100);
});


Подробнее здесь: https://stackoverflow.com/questions/797 ... -positions