|
|
|
|
@@ -1709,13 +1709,6 @@ const SlideCreator = {
|
|
|
|
|
event.target._endTime = playerVars.end || undefined;
|
|
|
|
|
event.target._videoId = videoId;
|
|
|
|
|
|
|
|
|
|
if (STATE.slideshow.isMuted) {
|
|
|
|
|
event.target.mute();
|
|
|
|
|
} else {
|
|
|
|
|
event.target.unMute();
|
|
|
|
|
event.target.setVolume(40);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (typeof event.target.setPlaybackQuality === 'function') {
|
|
|
|
|
event.target.setPlaybackQuality(quality);
|
|
|
|
|
}
|
|
|
|
|
@@ -1725,6 +1718,14 @@ const SlideCreator = {
|
|
|
|
|
const isVideoPlayerOpen = document.querySelector('.videoPlayerContainer') || document.querySelector('.youtubePlayerContainer');
|
|
|
|
|
|
|
|
|
|
if (slide && slide.classList.contains('active') && !document.hidden && (!isVideoPlayerOpen || isVideoPlayerOpen.classList.contains('hide'))) {
|
|
|
|
|
// Set mute state only for active slide
|
|
|
|
|
if (STATE.slideshow.isMuted) {
|
|
|
|
|
event.target.mute();
|
|
|
|
|
} else {
|
|
|
|
|
event.target.unMute();
|
|
|
|
|
event.target.setVolume(40);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
event.target.playVideo();
|
|
|
|
|
|
|
|
|
|
// Check if it actually started playing after a short delay (handling autoplay blocks)
|
|
|
|
|
@@ -1754,14 +1755,15 @@ const SlideCreator = {
|
|
|
|
|
if (CONFIG.waitForTrailerToEnd && STATE.slideshow.slideInterval) {
|
|
|
|
|
STATE.slideshow.slideInterval.stop();
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
event.target.mute();
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
'onStateChange': (event) => {
|
|
|
|
|
if (event.data === YT.PlayerState.ENDED) {
|
|
|
|
|
if (CONFIG.waitForTrailerToEnd) {
|
|
|
|
|
const slide = document.querySelector(`.slide[data-item-id="${itemId}"]`);
|
|
|
|
|
if (slide && slide.classList.contains('active')) {
|
|
|
|
|
SlideshowManager.nextSlide();
|
|
|
|
|
} else {
|
|
|
|
|
event.target.playVideo(); // Loop if not waiting for end if trailer is shorter than slide duration
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
@@ -1804,15 +1806,23 @@ const SlideCreator = {
|
|
|
|
|
STATE.slideshow.videoPlayers[itemId] = backdrop;
|
|
|
|
|
|
|
|
|
|
backdrop.addEventListener('play', () => {
|
|
|
|
|
|
|
|
|
|
// backdrop.addEventListener('play', (event) => {
|
|
|
|
|
// const slide = document.querySelector(`.slide[data-item-id="${itemId}"]`);
|
|
|
|
|
|
|
|
|
|
// if (!slide || !slide.classList.contains('active')) {
|
|
|
|
|
// console.log(`Local video ${itemId} started playing but is not active, pausing.`);
|
|
|
|
|
// event.target.pause();
|
|
|
|
|
// event.target.currentTime = 0;
|
|
|
|
|
// return;
|
|
|
|
|
// }
|
|
|
|
|
if (CONFIG.waitForTrailerToEnd && STATE.slideshow.slideInterval) {
|
|
|
|
|
STATE.slideshow.slideInterval.stop();
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
backdrop.addEventListener('ended', () => {
|
|
|
|
|
if (CONFIG.waitForTrailerToEnd) {
|
|
|
|
|
SlideshowManager.nextSlide();
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
backdrop.addEventListener('error', () => {
|
|
|
|
|
@@ -2271,19 +2281,42 @@ const SlideshowManager = {
|
|
|
|
|
|
|
|
|
|
if (previousVisibleSlide) {
|
|
|
|
|
previousVisibleSlide.classList.remove("active");
|
|
|
|
|
previousVisibleSlide.setAttribute("inert", "");
|
|
|
|
|
previousVisibleSlide.setAttribute("tabindex", "-1");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
currentSlide.classList.add("active");
|
|
|
|
|
currentSlide.removeAttribute("inert");
|
|
|
|
|
currentSlide.setAttribute("tabindex", "0");
|
|
|
|
|
|
|
|
|
|
// Update Play/Pause Button State if it was paused
|
|
|
|
|
if (STATE.slideshow.isPaused) {
|
|
|
|
|
STATE.slideshow.isPaused = false;
|
|
|
|
|
const pauseButton = document.querySelector('.pause-button');
|
|
|
|
|
if (pauseButton) {
|
|
|
|
|
pauseButton.innerHTML = '<i class="material-icons">pause</i>';
|
|
|
|
|
const pauseLabel = LocalizationUtils.getLocalizedString('ButtonPause', 'Pause');
|
|
|
|
|
pauseButton.setAttribute("aria-label", pauseLabel);
|
|
|
|
|
pauseButton.setAttribute("title", pauseLabel);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Manage Video Playback: Stop others, Play current
|
|
|
|
|
|
|
|
|
|
// 1. Pause all other YouTube players
|
|
|
|
|
// 1. Pause and mute all other YouTube players
|
|
|
|
|
if (STATE.slideshow.videoPlayers) {
|
|
|
|
|
Object.keys(STATE.slideshow.videoPlayers).forEach(id => {
|
|
|
|
|
if (id !== currentItemId) {
|
|
|
|
|
const p = STATE.slideshow.videoPlayers[id];
|
|
|
|
|
if (p && typeof p.pauseVideo === 'function') {
|
|
|
|
|
p.pauseVideo();
|
|
|
|
|
if (p) {
|
|
|
|
|
try {
|
|
|
|
|
if (typeof p.pauseVideo === 'function') {
|
|
|
|
|
p.pauseVideo();
|
|
|
|
|
if (typeof p.mute === 'function') {
|
|
|
|
|
p.mute();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
} catch (e) { console.warn("Error pausing player", id, e); }
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
@@ -2293,6 +2326,7 @@ const SlideshowManager = {
|
|
|
|
|
document.querySelectorAll('video').forEach(video => {
|
|
|
|
|
if (!video.closest(`.slide[data-item-id="${currentItemId}"]`)) {
|
|
|
|
|
video.pause();
|
|
|
|
|
video.muted = true;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
@@ -2318,8 +2352,8 @@ const SlideshowManager = {
|
|
|
|
|
videoBackdrop.play().catch(e => {
|
|
|
|
|
// Check if it actually started playing after a short delay (handling autoplay blocks)
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
if (videoBackdrop.paused) {
|
|
|
|
|
console.warn(`Autoplay blocked for ${itemId}, attempting muted fallback`);
|
|
|
|
|
if (videoBackdrop.paused && currentSlide.classList.contains('active')) {
|
|
|
|
|
console.warn(`Autoplay blocked for ${currentItemId}, attempting muted fallback`);
|
|
|
|
|
videoBackdrop.muted = true;
|
|
|
|
|
videoBackdrop.play().catch(err => console.error("Muted fallback failed", err));
|
|
|
|
|
}
|
|
|
|
|
@@ -2328,12 +2362,28 @@ const SlideshowManager = {
|
|
|
|
|
} else if (STATE.slideshow.videoPlayers && STATE.slideshow.videoPlayers[currentItemId]) {
|
|
|
|
|
const player = STATE.slideshow.videoPlayers[currentItemId];
|
|
|
|
|
if (player && typeof player.loadVideoById === 'function' && player._videoId) {
|
|
|
|
|
// Use loadVideoById to enforce start and end times
|
|
|
|
|
player.loadVideoById({
|
|
|
|
|
videoId: player._videoId,
|
|
|
|
|
startSeconds: player._startTime || 0,
|
|
|
|
|
endSeconds: player._endTime
|
|
|
|
|
});
|
|
|
|
|
// If same video is already loaded, just seek and play (much faster)
|
|
|
|
|
let isAlreadyLoaded = false;
|
|
|
|
|
if (typeof player.getVideoData === 'function') {
|
|
|
|
|
try {
|
|
|
|
|
const data = player.getVideoData();
|
|
|
|
|
if (data && data.video_id === player._videoId) {
|
|
|
|
|
isAlreadyLoaded = true;
|
|
|
|
|
}
|
|
|
|
|
} catch (e) { /* player not fully ready */ }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (isAlreadyLoaded) {
|
|
|
|
|
player.seekTo(player._startTime || 0);
|
|
|
|
|
player.playVideo();
|
|
|
|
|
} else {
|
|
|
|
|
// Full load needed (first time or different video)
|
|
|
|
|
player.loadVideoById({
|
|
|
|
|
videoId: player._videoId,
|
|
|
|
|
startSeconds: player._startTime || 0,
|
|
|
|
|
endSeconds: player._endTime
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (STATE.slideshow.isMuted) {
|
|
|
|
|
player.mute();
|
|
|
|
|
@@ -2344,6 +2394,7 @@ const SlideshowManager = {
|
|
|
|
|
|
|
|
|
|
// Check if playback successfully started, otherwise fallback to muted
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
if (!currentSlide.classList.contains('active')) return;
|
|
|
|
|
if (player.getPlayerState &&
|
|
|
|
|
player.getPlayerState() !== YT.PlayerState.PLAYING &&
|
|
|
|
|
player.getPlayerState() !== YT.PlayerState.BUFFERING) {
|
|
|
|
|
@@ -2394,7 +2445,8 @@ 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') ||
|
|
|
|
|
(STATE.slideshow.videoPlayers && STATE.slideshow.videoPlayers[currentItemId]);
|
|
|
|
|
if (STATE.slideshow.slideInterval && !STATE.slideshow.isPaused) {
|
|
|
|
|
if (CONFIG.waitForTrailerToEnd && hasVideo) {
|
|
|
|
|
STATE.slideshow.slideInterval.stop();
|
|
|
|
|
@@ -2454,20 +2506,24 @@ const SlideshowManager = {
|
|
|
|
|
const totalItems = STATE.slideshow.totalItems;
|
|
|
|
|
const preloadCount = Math.min(Math.max(CONFIG.preloadCount || 1, 1), 5);
|
|
|
|
|
const preloadedIds = new Set();
|
|
|
|
|
|
|
|
|
|
// Preload next slides
|
|
|
|
|
for (let i = 1; i <= preloadCount; i++) {
|
|
|
|
|
const nextIndex = (currentIndex + i) % totalItems;
|
|
|
|
|
if (nextIndex === currentIndex) break;
|
|
|
|
|
|
|
|
|
|
const itemId = STATE.slideshow.itemIds[nextIndex];
|
|
|
|
|
if (!preloadedIds.has(itemId)) {
|
|
|
|
|
preloadedIds.add(itemId);
|
|
|
|
|
SlideCreator.createSlideForItemId(itemId);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Preload previous slides
|
|
|
|
|
for (let i = 1; i <= preloadCount; i++) {
|
|
|
|
|
const prevIndex = (currentIndex - i + totalItems) % totalItems;
|
|
|
|
|
if (prevIndex === currentIndex) break;
|
|
|
|
|
|
|
|
|
|
const prevItemId = STATE.slideshow.itemIds[prevIndex];
|
|
|
|
|
if (!preloadedIds.has(prevItemId)) {
|
|
|
|
|
preloadedIds.add(prevItemId);
|
|
|
|
|
@@ -2724,18 +2780,24 @@ const SlideshowManager = {
|
|
|
|
|
const currentSlide = document.querySelector(`.slide[data-item-id="${currentItemId}"]`);
|
|
|
|
|
if (!currentSlide) return;
|
|
|
|
|
|
|
|
|
|
// 1. Try YouTube Player
|
|
|
|
|
const ytPlayer = STATE.slideshow.videoPlayers[currentItemId];
|
|
|
|
|
// YouTube player: just resume, don't reload
|
|
|
|
|
const ytPlayer = STATE.slideshow.videoPlayers?.[currentItemId];
|
|
|
|
|
if (ytPlayer && typeof ytPlayer.playVideo === 'function') {
|
|
|
|
|
if (STATE.slideshow.isMuted) {
|
|
|
|
|
if (typeof ytPlayer.mute === 'function') ytPlayer.mute();
|
|
|
|
|
} else {
|
|
|
|
|
if (typeof ytPlayer.unMute === 'function') ytPlayer.unMute();
|
|
|
|
|
if (typeof ytPlayer.setVolume === 'function') ytPlayer.setVolume(40);
|
|
|
|
|
}
|
|
|
|
|
ytPlayer.playVideo();
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 2. Try HTML5 Video
|
|
|
|
|
const html5Video = currentSlide.querySelector('video');
|
|
|
|
|
// HTML5 video: just resume, don't reset currentTime
|
|
|
|
|
const html5Video = currentSlide.querySelector('video.video-backdrop');
|
|
|
|
|
if (html5Video) {
|
|
|
|
|
if (STATE.slideshow.isMuted) {
|
|
|
|
|
html5Video.muted = true;
|
|
|
|
|
}
|
|
|
|
|
html5Video.muted = STATE.slideshow.isMuted;
|
|
|
|
|
if (!STATE.slideshow.isMuted) html5Video.volume = 0.4;
|
|
|
|
|
html5Video.play().catch(e => console.warn("Error resuming HTML5 video:", e));
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
