|
|
|
|
@@ -611,7 +611,8 @@ const SlideUtils = {
|
|
|
|
|
if (!container) {
|
|
|
|
|
container = this.createElement("div", {
|
|
|
|
|
id: "slides-container",
|
|
|
|
|
className: "noautofocus"
|
|
|
|
|
className: "noautofocus",
|
|
|
|
|
tabIndex: "-1"
|
|
|
|
|
});
|
|
|
|
|
document.body.appendChild(container);
|
|
|
|
|
}
|
|
|
|
|
@@ -1432,16 +1433,19 @@ const VisibilityObserver = {
|
|
|
|
|
|
|
|
|
|
// 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 (this._lastVisibleState !== 'player-active') {
|
|
|
|
|
this._lastVisibleState = 'player-active';
|
|
|
|
|
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();
|
|
|
|
|
}
|
|
|
|
|
if (STATE.slideshow.slideInterval) {
|
|
|
|
|
STATE.slideshow.slideInterval.stop();
|
|
|
|
|
}
|
|
|
|
|
SlideshowManager.stopAllPlayback();
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@@ -1456,20 +1460,27 @@ const VisibilityObserver = {
|
|
|
|
|
activeTab &&
|
|
|
|
|
activeTab.getAttribute("data-index") === "0";
|
|
|
|
|
|
|
|
|
|
container.style.display = isVisible ? "block" : "none";
|
|
|
|
|
container.style.visibility = isVisible ? "visible" : "hidden";
|
|
|
|
|
container.style.pointerEvents = isVisible ? "auto" : "none";
|
|
|
|
|
const newState = isVisible ? 'visible' : 'hidden';
|
|
|
|
|
|
|
|
|
|
// Only update DOM and trigger actions when state actually changes
|
|
|
|
|
if (this._lastVisibleState !== newState) {
|
|
|
|
|
this._lastVisibleState = newState;
|
|
|
|
|
|
|
|
|
|
container.style.display = isVisible ? "block" : "none";
|
|
|
|
|
container.style.visibility = isVisible ? "visible" : "hidden";
|
|
|
|
|
container.style.pointerEvents = isVisible ? "auto" : "none";
|
|
|
|
|
|
|
|
|
|
if (isVisible) {
|
|
|
|
|
if (STATE.slideshow.slideInterval && !STATE.slideshow.isPaused) {
|
|
|
|
|
STATE.slideshow.slideInterval.start();
|
|
|
|
|
SlideshowManager.resumeActivePlayback();
|
|
|
|
|
if (isVisible) {
|
|
|
|
|
if (STATE.slideshow.slideInterval && !STATE.slideshow.isPaused) {
|
|
|
|
|
STATE.slideshow.slideInterval.start();
|
|
|
|
|
SlideshowManager.resumeActivePlayback();
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
if (STATE.slideshow.slideInterval) {
|
|
|
|
|
STATE.slideshow.slideInterval.stop();
|
|
|
|
|
}
|
|
|
|
|
SlideshowManager.stopAllPlayback();
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
if (STATE.slideshow.slideInterval) {
|
|
|
|
|
STATE.slideshow.slideInterval.stop();
|
|
|
|
|
}
|
|
|
|
|
SlideshowManager.stopAllPlayback();
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
@@ -1477,7 +1488,13 @@ const VisibilityObserver = {
|
|
|
|
|
* Initializes visibility observer
|
|
|
|
|
*/
|
|
|
|
|
init() {
|
|
|
|
|
const observer = new MutationObserver(() => this.updateVisibility());
|
|
|
|
|
// MARK: Mark
|
|
|
|
|
// const observer = new MutationObserver(() => this.updateVisibility());
|
|
|
|
|
let debounceTimer = null;
|
|
|
|
|
const observer = new MutationObserver(() => {
|
|
|
|
|
if (debounceTimer) clearTimeout(debounceTimer);
|
|
|
|
|
debounceTimer = setTimeout(() => this.updateVisibility(), 250);
|
|
|
|
|
});
|
|
|
|
|
observer.observe(document.body, { childList: true, subtree: true });
|
|
|
|
|
|
|
|
|
|
document.body.addEventListener("click", () => this.updateVisibility());
|
|
|
|
|
@@ -1700,6 +1717,7 @@ const SlideCreator = {
|
|
|
|
|
const iframe = event.target.getIframe();
|
|
|
|
|
if (iframe) {
|
|
|
|
|
iframe.setAttribute('tabindex', '-1');
|
|
|
|
|
iframe.setAttribute('inert', '');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Store start/end time and videoId for later use
|
|
|
|
|
@@ -2455,6 +2473,7 @@ const SlideshowManager = {
|
|
|
|
|
pruneSlideCache() {
|
|
|
|
|
const currentIndex = STATE.slideshow.currentSlideIndex;
|
|
|
|
|
const keepRange = 5;
|
|
|
|
|
let prunedAny = false;
|
|
|
|
|
|
|
|
|
|
Object.keys(STATE.slideshow.createdSlides).forEach((itemId) => {
|
|
|
|
|
const index = STATE.slideshow.itemIds.indexOf(itemId);
|
|
|
|
|
@@ -2486,10 +2505,27 @@ const SlideshowManager = {
|
|
|
|
|
if (slide) slide.remove();
|
|
|
|
|
|
|
|
|
|
delete STATE.slideshow.createdSlides[itemId];
|
|
|
|
|
prunedAny = true;
|
|
|
|
|
|
|
|
|
|
console.log(`Pruned slide ${itemId} at distance ${distance} from view`);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// After pruning, restore focus to container in TV mode
|
|
|
|
|
if (prunedAny) {
|
|
|
|
|
const isTvMode = (window.layoutManager && window.layoutManager.tv) ||
|
|
|
|
|
document.documentElement.classList.contains('layout-tv') ||
|
|
|
|
|
document.body.classList.contains('layout-tv');
|
|
|
|
|
if (isTvMode) {
|
|
|
|
|
// Use setTimeout to execute AFTER Jellyfin's focus manager processes the iframe removal
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
const container = document.getElementById("slides-container");
|
|
|
|
|
if (container && container.style.display !== 'none') {
|
|
|
|
|
container.focus({ preventScroll: true });
|
|
|
|
|
}
|
|
|
|
|
}, 0);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
toggleMute() {
|
|
|
|
|
@@ -2772,8 +2808,26 @@ const SlideshowManager = {
|
|
|
|
|
const currentSlide = document.querySelector(`.slide[data-item-id="${currentItemId}"]`);
|
|
|
|
|
if (!currentSlide) return;
|
|
|
|
|
|
|
|
|
|
// Use playCurrentVideo to properly restore video with correct mute state
|
|
|
|
|
this.playCurrentVideo(currentSlide, 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;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// HTML5 video: just resume, don't reset currentTime
|
|
|
|
|
const html5Video = currentSlide.querySelector('video.video-backdrop');
|
|
|
|
|
if (html5Video) {
|
|
|
|
|
html5Video.muted = STATE.slideshow.isMuted;
|
|
|
|
|
if (!STATE.slideshow.isMuted) html5Video.volume = 0.4;
|
|
|
|
|
html5Video.play().catch(e => console.warn("Error resuming HTML5 video:", e));
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
|