|
|
|
|
@@ -85,6 +85,7 @@ const STATE = {
|
|
|
|
|
isMuted: CONFIG.startMuted,
|
|
|
|
|
customTrailerUrls: {},
|
|
|
|
|
ytPromise: null,
|
|
|
|
|
autoplayTimeouts: [],
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
@@ -1416,6 +1417,24 @@ class SlideTimer {
|
|
|
|
|
*/
|
|
|
|
|
const VisibilityObserver = {
|
|
|
|
|
updateVisibility() {
|
|
|
|
|
const videoPlayer = document.querySelector('.videoPlayerContainer');
|
|
|
|
|
const trailerPlayer = document.querySelector('.youtubePlayerContainer');
|
|
|
|
|
|
|
|
|
|
// If a full screen video player is active, hide slideshow and stop playback
|
|
|
|
|
if ((videoPlayer && !videoPlayer.classList.contains('hide')) || (trailerPlayer && !trailerPlayer.classList.contains('hide'))) {
|
|
|
|
|
const container = document.getElementById("slides-container");
|
|
|
|
|
if (container) {
|
|
|
|
|
container.style.display = "none";
|
|
|
|
|
container.style.visibility = "hidden";
|
|
|
|
|
container.style.pointerEvents = "none";
|
|
|
|
|
}
|
|
|
|
|
if (STATE.slideshow.slideInterval) {
|
|
|
|
|
STATE.slideshow.slideInterval.stop();
|
|
|
|
|
}
|
|
|
|
|
SlideshowManager.stopAllPlayback();
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const activeTab = document.querySelector(".emby-tab-button-active");
|
|
|
|
|
const container = document.getElementById("slides-container");
|
|
|
|
|
|
|
|
|
|
@@ -1660,10 +1679,23 @@ const SlideCreator = {
|
|
|
|
|
|
|
|
|
|
// Only play if this is the active slide
|
|
|
|
|
const slide = document.querySelector(`.slide[data-item-id="${itemId}"]`);
|
|
|
|
|
if (slide && slide.classList.contains('active')) {
|
|
|
|
|
const isVideoPlayerOpen = document.querySelector('.videoPlayerContainer') || document.querySelector('.youtubePlayerContainer');
|
|
|
|
|
|
|
|
|
|
if (slide && slide.classList.contains('active') && !document.hidden && (!isVideoPlayerOpen || isVideoPlayerOpen.classList.contains('hide'))) {
|
|
|
|
|
event.target.playVideo();
|
|
|
|
|
|
|
|
|
|
// Check if it actually started playing after a short delay (handling autoplay blocks)
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
const timeoutId = setTimeout(() => {
|
|
|
|
|
// Re-check conditions before processing fallback
|
|
|
|
|
const isVideoPlayerOpenNow = document.querySelector('.videoPlayerContainer') || document.querySelector('.youtubePlayerContainer');
|
|
|
|
|
if (document.hidden || (isVideoPlayerOpenNow && !isVideoPlayerOpenNow.classList.contains('hide')) || !slide.classList.contains('active')) {
|
|
|
|
|
console.log(`Navigation detected during autoplay check for ${itemId}, stopping video.`);
|
|
|
|
|
try {
|
|
|
|
|
event.target.stopVideo();
|
|
|
|
|
} catch (e) { console.warn("Error stopping video in timeout:", e); }
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (event.target.getPlayerState() !== YT.PlayerState.PLAYING &&
|
|
|
|
|
event.target.getPlayerState() !== YT.PlayerState.BUFFERING) {
|
|
|
|
|
console.warn(`Autoplay blocked for ${itemId}, attempting muted fallback`);
|
|
|
|
|
@@ -1672,6 +1704,9 @@ const SlideCreator = {
|
|
|
|
|
}
|
|
|
|
|
}, 1000);
|
|
|
|
|
|
|
|
|
|
if (!STATE.slideshow.autoplayTimeouts) STATE.slideshow.autoplayTimeouts = [];
|
|
|
|
|
STATE.slideshow.autoplayTimeouts.push(timeoutId);
|
|
|
|
|
|
|
|
|
|
// Pause slideshow timer when video starts if configured
|
|
|
|
|
if (CONFIG.waitForTrailerToEnd && STATE.slideshow.slideInterval) {
|
|
|
|
|
STATE.slideshow.slideInterval.stop();
|
|
|
|
|
@@ -2547,15 +2582,26 @@ const SlideshowManager = {
|
|
|
|
|
* Used when navigating away from the home screen
|
|
|
|
|
*/
|
|
|
|
|
stopAllPlayback() {
|
|
|
|
|
// 1. Pause all YouTube players
|
|
|
|
|
// Clear any pending autoplay timeouts
|
|
|
|
|
if (STATE.slideshow.autoplayTimeouts) {
|
|
|
|
|
STATE.slideshow.autoplayTimeouts.forEach(id => clearTimeout(id));
|
|
|
|
|
STATE.slideshow.autoplayTimeouts = [];
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 1. Stop all YouTube players
|
|
|
|
|
if (STATE.slideshow.videoPlayers) {
|
|
|
|
|
Object.values(STATE.slideshow.videoPlayers).forEach(player => {
|
|
|
|
|
try {
|
|
|
|
|
if (player && typeof player.pauseVideo === 'function') {
|
|
|
|
|
if (player && typeof player.stopVideo === 'function') {
|
|
|
|
|
player.stopVideo();
|
|
|
|
|
if (typeof player.clearVideo === 'function') {
|
|
|
|
|
player.clearVideo();
|
|
|
|
|
}
|
|
|
|
|
} else if (player && typeof player.pauseVideo === 'function') {
|
|
|
|
|
player.pauseVideo();
|
|
|
|
|
}
|
|
|
|
|
} catch (e) {
|
|
|
|
|
console.warn("Error pausing YouTube player:", e);
|
|
|
|
|
console.warn("Error pausing/stopping YouTube player:", e);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
@@ -2659,35 +2705,50 @@ const SlideshowManager = {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const activeElement = document.activeElement;
|
|
|
|
|
const isSlideshowFocused = container.contains(activeElement) || activeElement === container;
|
|
|
|
|
const isTvMode = window.layoutManager && window.layoutManager.tv;
|
|
|
|
|
const isSlideshowFocused = container.contains(activeElement) || activeElement === container || (!isTvMode && activeElement === document.body);
|
|
|
|
|
|
|
|
|
|
if (!isSlideshowFocused) {
|
|
|
|
|
const isInputElement = activeElement && (activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA' || activeElement.isContentEditable);
|
|
|
|
|
|
|
|
|
|
if (isInputElement) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Check if video player is open
|
|
|
|
|
const videoPlayer = document.querySelector('.videoPlayerContainer');
|
|
|
|
|
const trailerPlayer = document.querySelector('.youtubePlayerContainer');
|
|
|
|
|
if ((videoPlayer && !videoPlayer.classList.contains('hide')) || (trailerPlayer && !trailerPlayer.classList.contains('hide'))) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
switch (e.key) {
|
|
|
|
|
case "ArrowRight":
|
|
|
|
|
if (isTvMode && !isSlideshowFocused) return;
|
|
|
|
|
SlideshowManager.nextSlide();
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
break;
|
|
|
|
|
|
|
|
|
|
case "ArrowLeft":
|
|
|
|
|
if (isTvMode && !isSlideshowFocused) return;
|
|
|
|
|
SlideshowManager.prevSlide();
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
break;
|
|
|
|
|
|
|
|
|
|
case " ": // Space bar
|
|
|
|
|
if (isTvMode && !isSlideshowFocused) return;
|
|
|
|
|
this.togglePause();
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
break;
|
|
|
|
|
|
|
|
|
|
case "m": // Mute toggle
|
|
|
|
|
case "M":
|
|
|
|
|
if (isTvMode && !isSlideshowFocused) return;
|
|
|
|
|
this.toggleMute();
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
break;
|
|
|
|
|
|
|
|
|
|
case "Enter":
|
|
|
|
|
if (!isSlideshowFocused) return;
|
|
|
|
|
const currentItemId = STATE.slideshow.itemIds[STATE.slideshow.currentSlideIndex];
|
|
|
|
|
if (currentItemId) {
|
|
|
|
|
if (window.Emby && window.Emby.Page) {
|
|
|
|
|
|