|
|
|
|
@@ -1719,6 +1719,13 @@ const SlideCreator = {
|
|
|
|
|
if (iframe) {
|
|
|
|
|
iframe.setAttribute('tabindex', '-1');
|
|
|
|
|
iframe.setAttribute('inert', '');
|
|
|
|
|
// Preserve video-backdrop class on the iframe (YT API replaces the original div)
|
|
|
|
|
iframe.classList.add('backdrop', 'video-backdrop');
|
|
|
|
|
if (CONFIG.fullWidthVideo) {
|
|
|
|
|
iframe.classList.add('video-backdrop-full');
|
|
|
|
|
} else {
|
|
|
|
|
iframe.classList.add('video-backdrop-default');
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Store start/end time and videoId for later use
|
|
|
|
|
@@ -2333,7 +2340,10 @@ const SlideshowManager = {
|
|
|
|
|
// Manage Video Playback: Stop others, Play current
|
|
|
|
|
this.pauseOtherVideos(currentItemId);
|
|
|
|
|
|
|
|
|
|
const hasVideoBackdrop = !!currentSlide.querySelector('.video-backdrop');
|
|
|
|
|
// Check for video backdrop (also check by YouTube player ID since YT replaces div with iframe)
|
|
|
|
|
const hasVideoBackdrop = !!(currentSlide.querySelector('.video-backdrop') ||
|
|
|
|
|
currentSlide.querySelector(`#youtube-player-${currentItemId}`) ||
|
|
|
|
|
(STATE.slideshow.videoPlayers && STATE.slideshow.videoPlayers[currentItemId]));
|
|
|
|
|
|
|
|
|
|
// If paused and new slide has video, un-pause for video playback.
|
|
|
|
|
// If paused and new slide has only images, stay paused.
|
|
|
|
|
@@ -2391,7 +2401,9 @@ const SlideshowManager = {
|
|
|
|
|
this.updateDots();
|
|
|
|
|
|
|
|
|
|
// Only restart interval if we are NOT waiting for a video to end
|
|
|
|
|
const hasVideo = currentSlide.querySelector('.video-backdrop');
|
|
|
|
|
const hasVideo = currentSlide.querySelector('.video-backdrop') ||
|
|
|
|
|
currentSlide.querySelector(`#youtube-player-${currentItemId}`) ||
|
|
|
|
|
(STATE.slideshow.videoPlayers && STATE.slideshow.videoPlayers[currentItemId]);
|
|
|
|
|
if (STATE.slideshow.slideInterval && !STATE.slideshow.isPaused) {
|
|
|
|
|
if (CONFIG.waitForTrailerToEnd && hasVideo) {
|
|
|
|
|
STATE.slideshow.slideInterval.stop();
|
|
|
|
|
@@ -2653,7 +2665,9 @@ const SlideshowManager = {
|
|
|
|
|
// Only restart interval if we are NOT waiting for a video to end
|
|
|
|
|
const currentItemId = STATE.slideshow.itemIds[STATE.slideshow.currentSlideIndex];
|
|
|
|
|
const currentSlide = document.querySelector(`.slide[data-item-id="${currentItemId}"]`);
|
|
|
|
|
const hasVideo = currentSlide && currentSlide.querySelector('.video-backdrop');
|
|
|
|
|
const hasVideo = currentSlide && (currentSlide.querySelector('.video-backdrop') ||
|
|
|
|
|
currentSlide.querySelector(`#youtube-player-${currentItemId}`) ||
|
|
|
|
|
(STATE.slideshow.videoPlayers && STATE.slideshow.videoPlayers[currentItemId]));
|
|
|
|
|
|
|
|
|
|
if (!CONFIG.waitForTrailerToEnd || !hasVideo) {
|
|
|
|
|
STATE.slideshow.slideInterval.start();
|
|
|
|
|
@@ -2712,17 +2726,24 @@ const SlideshowManager = {
|
|
|
|
|
* @returns {boolean} Whether a video was found and playback attempted
|
|
|
|
|
*/
|
|
|
|
|
playCurrentVideo(slide, itemId) {
|
|
|
|
|
const videoBackdrop = slide.querySelector('.video-backdrop');
|
|
|
|
|
// Try finding by class first, then fall back to YouTube player container by ID
|
|
|
|
|
let videoBackdrop = slide.querySelector('.video-backdrop');
|
|
|
|
|
if (!videoBackdrop) {
|
|
|
|
|
// YouTube API replaces the div with an iframe, which may not have the class yet
|
|
|
|
|
videoBackdrop = slide.querySelector(`#youtube-player-${itemId}`);
|
|
|
|
|
}
|
|
|
|
|
// Also check if a player exists in the registry even if no DOM element found
|
|
|
|
|
const hasRegisteredPlayer = !!(STATE.slideshow.videoPlayers && STATE.slideshow.videoPlayers[itemId]);
|
|
|
|
|
|
|
|
|
|
// Update mute button visibility
|
|
|
|
|
const muteButton = document.querySelector('.mute-button');
|
|
|
|
|
if (muteButton) {
|
|
|
|
|
muteButton.style.display = videoBackdrop ? 'block' : 'none';
|
|
|
|
|
muteButton.style.display = (videoBackdrop || hasRegisteredPlayer) ? 'block' : 'none';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (!videoBackdrop) return false;
|
|
|
|
|
if (!videoBackdrop && !hasRegisteredPlayer) return false;
|
|
|
|
|
|
|
|
|
|
if (videoBackdrop.tagName === 'VIDEO') {
|
|
|
|
|
if (videoBackdrop && videoBackdrop.tagName === 'VIDEO') {
|
|
|
|
|
videoBackdrop.currentTime = 0;
|
|
|
|
|
videoBackdrop.muted = STATE.slideshow.isMuted;
|
|
|
|
|
if (!STATE.slideshow.isMuted) videoBackdrop.volume = 0.4;
|
|
|
|
|
@@ -2741,7 +2762,9 @@ const SlideshowManager = {
|
|
|
|
|
|
|
|
|
|
// YouTube player
|
|
|
|
|
const player = STATE.slideshow.videoPlayers && STATE.slideshow.videoPlayers[itemId];
|
|
|
|
|
if (player && typeof player.loadVideoById === 'function' && player._videoId) {
|
|
|
|
|
const playerIsReady = player && typeof player.loadVideoById === 'function' && player._videoId;
|
|
|
|
|
|
|
|
|
|
if (playerIsReady) {
|
|
|
|
|
player.loadVideoById({
|
|
|
|
|
videoId: player._videoId,
|
|
|
|
|
startSeconds: player._startTime || 0,
|
|
|
|
|
@@ -2767,18 +2790,64 @@ const SlideshowManager = {
|
|
|
|
|
}
|
|
|
|
|
}, 1000);
|
|
|
|
|
return true;
|
|
|
|
|
} else if (player && typeof player.seekTo === 'function') {
|
|
|
|
|
// Fallback if loadVideoById is not available or videoId missing but player object exists
|
|
|
|
|
const startTime = player._startTime || 0;
|
|
|
|
|
player.seekTo(startTime);
|
|
|
|
|
player.playVideo();
|
|
|
|
|
return true;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// YouTube player not ready yet (still loading from preload) — mark for auto-play when onReady fires
|
|
|
|
|
if (videoBackdrop && videoBackdrop.id && videoBackdrop.id.startsWith('youtube-player-') && !player) {
|
|
|
|
|
console.log(`YouTube player for ${itemId} not ready yet, marking _pendingPlay`);
|
|
|
|
|
videoBackdrop._pendingPlay = true;
|
|
|
|
|
// YouTube player exists but NOT fully ready yet.
|
|
|
|
|
// new YT.Player() returns an object immediately, but API methods like
|
|
|
|
|
// loadVideoById and _videoId aren't available until onReady fires.
|
|
|
|
|
// onReady may have ALREADY fired (during preload), so we can't rely on
|
|
|
|
|
// _pendingPlay alone. Instead, poll for readiness.
|
|
|
|
|
const ytContainer = videoBackdrop || slide.querySelector(`[id^="youtube-player-"]`);
|
|
|
|
|
if (ytContainer && (ytContainer.tagName === 'IFRAME' || (ytContainer.id && ytContainer.id.startsWith('youtube-player-')))) {
|
|
|
|
|
console.log(`YouTube player for ${itemId} not ready yet, polling for readiness...`);
|
|
|
|
|
|
|
|
|
|
// Also set _pendingPlay as fallback in case onReady hasn't fired yet
|
|
|
|
|
ytContainer._pendingPlay = true;
|
|
|
|
|
|
|
|
|
|
let attempts = 0;
|
|
|
|
|
const maxAttempts = 25; // 25 * 200ms = 5 seconds max
|
|
|
|
|
const pollInterval = setInterval(() => {
|
|
|
|
|
attempts++;
|
|
|
|
|
|
|
|
|
|
// Stop if slide is no longer active (user navigated away)
|
|
|
|
|
if (!slide.classList.contains('active')) {
|
|
|
|
|
clearInterval(pollInterval);
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const p = STATE.slideshow.videoPlayers && STATE.slideshow.videoPlayers[itemId];
|
|
|
|
|
if (p && typeof p.loadVideoById === 'function' && p._videoId) {
|
|
|
|
|
clearInterval(pollInterval);
|
|
|
|
|
console.log(`YouTube player for ${itemId} now ready (after ${attempts * 200}ms), starting playback`);
|
|
|
|
|
|
|
|
|
|
if (STATE.slideshow.isPaused) return;
|
|
|
|
|
|
|
|
|
|
p.loadVideoById({
|
|
|
|
|
videoId: p._videoId,
|
|
|
|
|
startSeconds: p._startTime || 0,
|
|
|
|
|
endSeconds: p._endTime
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
if (STATE.slideshow.isMuted) {
|
|
|
|
|
p.mute();
|
|
|
|
|
} else {
|
|
|
|
|
p.unMute();
|
|
|
|
|
p.setVolume(40);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Pause slideshow timer when video starts if configured
|
|
|
|
|
if (CONFIG.waitForTrailerToEnd && STATE.slideshow.slideInterval) {
|
|
|
|
|
STATE.slideshow.slideInterval.stop();
|
|
|
|
|
}
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (attempts >= maxAttempts) {
|
|
|
|
|
clearInterval(pollInterval);
|
|
|
|
|
console.warn(`YouTube player for ${itemId} failed to become ready after ${maxAttempts * 200}ms`);
|
|
|
|
|
}
|
|
|
|
|
}, 200);
|
|
|
|
|
|
|
|
|
|
return true;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
