Compare commits

...

17 Commits

Author SHA1 Message Date
CodeDevMLH
773c49a228 Update manifest.json for release v1.6.1.25 [skip ci] 2026-02-14 02:21:15 +00:00
CodeDevMLH
41a309e0d1 Bump version to 1.6.1.25
All checks were successful
Auto Release Plugin / build-and-release (push) Successful in 51s
2026-02-14 03:20:25 +01:00
CodeDevMLH
43797fbb98 Refactor video playback handling and improve tab visibility management 2026-02-14 03:20:04 +01:00
CodeDevMLH
f13a1ba1af test [skip ci] 2026-02-14 02:18:13 +01:00
CodeDevMLH
d489c22f28 Update manifest.json for release v1.6.1.24 [skip ci] 2026-02-14 01:12:45 +00:00
CodeDevMLH
7816c87543 Bump version to 1.6.1.24
All checks were successful
Auto Release Plugin / build-and-release (push) Successful in 1m19s
2026-02-14 02:11:09 +01:00
CodeDevMLH
720567bafc Enhance video playback logic with improved state handling and retry mechanism for YouTube players 2026-02-14 02:10:55 +01:00
CodeDevMLH
2289a1f83e Update manifest.json for release v1.6.1.23 [skip ci] 2026-02-14 00:58:27 +00:00
CodeDevMLH
a269318f58 Bump version to 1.6.1.23
All checks were successful
Auto Release Plugin / build-and-release (push) Successful in 51s
2026-02-14 01:57:36 +01:00
CodeDevMLH
fdb409fd3b Merge branch 'main' of ssh://git.mahom03-spacecloud.de:44322/CodeDevMLH/jellyfin-plugin-media-bar-enhanced 2026-02-14 01:57:18 +01:00
CodeDevMLH
9bb4b9d355 Refactor video playback logic to improve handling of active slides and paused state 2026-02-14 01:57:14 +01:00
CodeDevMLH
1e18c22937 Update manifest.json for release v1.6.1.22 [skip ci] 2026-02-14 00:43:45 +00:00
CodeDevMLH
a83913d15c Bump version to 1.6.1.22
All checks were successful
Auto Release Plugin / build-and-release (push) Successful in 53s
2026-02-14 01:42:53 +01:00
CodeDevMLH
2f50931beb Fix YouTube player readiness checks and improve polling logic for video playback 2026-02-14 01:42:42 +01:00
CodeDevMLH
5b14bdba35 Update manifest.json for release v1.6.1.21 [skip ci] 2026-02-14 00:35:03 +00:00
CodeDevMLH
9ba3b1e49f Bump version to 1.6.1.21
All checks were successful
Auto Release Plugin / build-and-release (push) Successful in 53s
2026-02-14 01:34:12 +01:00
CodeDevMLH
bf7c7fb8e8 Enhance video backdrop handling to support YouTube iframe integration and improve video playback logic 2026-02-14 01:33:54 +01:00
4 changed files with 3801 additions and 311 deletions

View File

@@ -12,7 +12,7 @@
<!-- <TreatWarningsAsErrors>false</TreatWarningsAsErrors> --> <!-- <TreatWarningsAsErrors>false</TreatWarningsAsErrors> -->
<Title>Jellyfin Media Bar Enhanced Plugin</Title> <Title>Jellyfin Media Bar Enhanced Plugin</Title>
<Authors>CodeDevMLH</Authors> <Authors>CodeDevMLH</Authors>
<Version>1.6.1.20</Version> <Version>1.6.1.25</Version>
<RepositoryUrl>https://github.com/CodeDevMLH/jellyfin-plugin-media-bar-enhanced</RepositoryUrl> <RepositoryUrl>https://github.com/CodeDevMLH/jellyfin-plugin-media-bar-enhanced</RepositoryUrl>
</PropertyGroup> </PropertyGroup>

View File

@@ -1435,19 +1435,16 @@ const VisibilityObserver = {
// If a full screen video player is active, hide slideshow and stop playback // If a full screen video player is active, hide slideshow and stop playback
if ((videoPlayer && !videoPlayer.classList.contains('hide')) || (trailerPlayer && !trailerPlayer.classList.contains('hide'))) { if ((videoPlayer && !videoPlayer.classList.contains('hide')) || (trailerPlayer && !trailerPlayer.classList.contains('hide'))) {
if (this._lastVisibleState !== 'player-active') { const container = document.getElementById("slides-container");
this._lastVisibleState = 'player-active'; if (container) {
const container = document.getElementById("slides-container"); container.style.display = "none";
if (container) { container.style.visibility = "hidden";
container.style.display = "none"; container.style.pointerEvents = "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; return;
} }
@@ -1462,27 +1459,20 @@ const VisibilityObserver = {
activeTab && activeTab &&
activeTab.getAttribute("data-index") === "0"; activeTab.getAttribute("data-index") === "0";
const newState = isVisible ? 'visible' : 'hidden'; container.style.display = isVisible ? "block" : "none";
container.style.visibility = isVisible ? "visible" : "hidden";
container.style.pointerEvents = isVisible ? "auto" : "none";
// Only update DOM and trigger actions when state actually changes if (isVisible) {
if (this._lastVisibleState !== newState) { if (STATE.slideshow.slideInterval && !STATE.slideshow.isPaused) {
this._lastVisibleState = newState; STATE.slideshow.slideInterval.start();
SlideshowManager.resumeActivePlayback();
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();
}
} else {
if (STATE.slideshow.slideInterval) {
STATE.slideshow.slideInterval.stop();
}
SlideshowManager.stopAllPlayback();
} }
} else {
if (STATE.slideshow.slideInterval) {
STATE.slideshow.slideInterval.stop();
}
SlideshowManager.stopAllPlayback();
} }
}, },
@@ -1491,11 +1481,6 @@ const VisibilityObserver = {
*/ */
init() { init() {
const observer = new MutationObserver(() => this.updateVisibility()); 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 }); observer.observe(document.body, { childList: true, subtree: true });
document.body.addEventListener("click", () => this.updateVisibility()); document.body.addEventListener("click", () => this.updateVisibility());
@@ -1622,6 +1607,11 @@ const SlideCreator = {
else if (item.RemoteTrailers && item.RemoteTrailers.length > 0) { else if (item.RemoteTrailers && item.RemoteTrailers.length > 0) {
trailerUrl = item.RemoteTrailers[0].Url; trailerUrl = item.RemoteTrailers[0].Url;
} }
// 1d. Final Fallback to Local Trailer (even if not preferred)
else if (item.LocalTrailerCount > 0 && item.localTrailerUrl) {
trailerUrl = item.localTrailerUrl;
console.log(`Using local trailer fallback for ${itemId}: ${trailerUrl}`);
}
const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent); const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
@@ -1714,13 +1704,6 @@ const SlideCreator = {
playerVars: playerVars, playerVars: playerVars,
events: { events: {
'onReady': (event) => { 'onReady': (event) => {
// Prevent iframe from stealing focus (critical for TV mode)
const iframe = event.target.getIframe();
if (iframe) {
iframe.setAttribute('tabindex', '-1');
iframe.setAttribute('inert', '');
}
// Store start/end time and videoId for later use // Store start/end time and videoId for later use
event.target._startTime = playerVars.start || 0; event.target._startTime = playerVars.start || 0;
event.target._endTime = playerVars.end || undefined; event.target._endTime = playerVars.end || undefined;
@@ -1737,18 +1720,11 @@ const SlideCreator = {
event.target.setPlaybackQuality(quality); event.target.setPlaybackQuality(quality);
} }
// Only play if this is the active slide AND the slideshow is visible // Only play if this is the active slide
const slide = document.querySelector(`.slide[data-item-id="${itemId}"]`); const slide = document.querySelector(`.slide[data-item-id="${itemId}"]`);
const isVideoPlayerOpen = document.querySelector('.videoPlayerContainer') || document.querySelector('.youtubePlayerContainer'); const isVideoPlayerOpen = document.querySelector('.videoPlayerContainer') || document.querySelector('.youtubePlayerContainer');
// Check _pendingPlay flag (set by playCurrentVideo when player wasn't ready yet) if (slide && slide.classList.contains('active') && !document.hidden && (!isVideoPlayerOpen || isVideoPlayerOpen.classList.contains('hide'))) {
const container = document.getElementById(`youtube-player-${itemId}`);
const hasPendingPlay = container && container._pendingPlay;
if (container) container._pendingPlay = false;
const isActiveAndVisible = slide && slide.classList.contains('active') && !document.hidden && (!isVideoPlayerOpen || isVideoPlayerOpen.classList.contains('hide'));
if ((isActiveAndVisible || hasPendingPlay) && !STATE.slideshow.isPaused) {
event.target.playVideo(); event.target.playVideo();
// Check if it actually started playing after a short delay (handling autoplay blocks) // Check if it actually started playing after a short delay (handling autoplay blocks)
@@ -1782,7 +1758,11 @@ const SlideCreator = {
}, },
'onStateChange': (event) => { 'onStateChange': (event) => {
if (event.data === YT.PlayerState.ENDED) { if (event.data === YT.PlayerState.ENDED) {
SlideshowManager.nextSlide(); if (CONFIG.waitForTrailerToEnd) {
SlideshowManager.nextSlide();
} else {
event.target.playVideo(); // Loop if not waiting for end if trailer is shorter than slide duration
}
} }
}, },
'onError': (event) => { 'onError': (event) => {
@@ -1823,23 +1803,16 @@ const SlideCreator = {
STATE.slideshow.videoPlayers[itemId] = backdrop; STATE.slideshow.videoPlayers[itemId] = backdrop;
backdrop.addEventListener('play', (event) => { backdrop.addEventListener('play', () => {
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) { if (CONFIG.waitForTrailerToEnd && STATE.slideshow.slideInterval) {
STATE.slideshow.slideInterval.stop(); STATE.slideshow.slideInterval.stop();
} }
}); });
backdrop.addEventListener('ended', () => { backdrop.addEventListener('ended', () => {
SlideshowManager.nextSlide(); if (CONFIG.waitForTrailerToEnd) {
SlideshowManager.nextSlide();
}
}); });
backdrop.addEventListener('error', () => { backdrop.addEventListener('error', () => {
@@ -2274,16 +2247,6 @@ const SlideshowManager = {
let previousVisibleSlide; let previousVisibleSlide;
try { try {
const container = SlideUtils.getOrCreateSlidesContainer(); const container = SlideUtils.getOrCreateSlidesContainer();
const activeElement = document.activeElement;
let focusSelector = null;
if (container.contains(activeElement)) {
if (activeElement.classList.contains('play-button')) focusSelector = '.play-button';
else if (activeElement.classList.contains('detail-button')) focusSelector = '.detail-button';
else if (activeElement.classList.contains('favorite-button')) focusSelector = '.favorite-button';
else if (activeElement.classList.contains('trailer-button')) focusSelector = '.trailer-button';
}
const totalItems = STATE.slideshow.totalItems; const totalItems = STATE.slideshow.totalItems;
index = Math.max(0, Math.min(index, totalItems - 1)); index = Math.max(0, Math.min(index, totalItems - 1));
@@ -2312,49 +2275,89 @@ const SlideshowManager = {
currentSlide.classList.add("active"); currentSlide.classList.add("active");
// Restore focus for TV mode navigation continuity // Manage Video Playback: Stop others, Play current
requestAnimationFrame(() => {
if (focusSelector) { // 1. Pause all other YouTube players
const target = currentSlide.querySelector(focusSelector); if (STATE.slideshow.videoPlayers) {
if (target) { Object.keys(STATE.slideshow.videoPlayers).forEach(id => {
target.focus(); if (id !== currentItemId) {
return; const p = STATE.slideshow.videoPlayers[id];
if (p && typeof p.pauseVideo === 'function') {
p.pauseVideo();
}
} }
} });
// Always ensure container has focus in TV mode to keep keyboard navigation working }
const isTvMode = (window.layoutManager && window.layoutManager.tv) ||
document.documentElement.classList.contains('layout-tv') || // 2. Pause all other HTML5 videos e.g. local trailers
document.body.classList.contains('layout-tv'); document.querySelectorAll('video').forEach(video => {
if (isTvMode) { if (!video.closest(`.slide[data-item-id="${currentItemId}"]`)) {
container.focus({ preventScroll: true }); video.pause();
} }
}); });
// Manage Video Playback: Stop others, Play current // 3. Play and Reset current video
this.pauseOtherVideos(currentItemId); const videoBackdrop = currentSlide.querySelector('.video-backdrop');
const hasVideoBackdrop = !!currentSlide.querySelector('.video-backdrop'); // Update mute button visibility
const muteButton = document.querySelector('.mute-button');
// If paused and new slide has video, un-pause for video playback. if (muteButton) {
// If paused and new slide has only images, stay paused. const hasVideo = !!videoBackdrop;
if (STATE.slideshow.isPaused && hasVideoBackdrop) { muteButton.style.display = hasVideo ? 'block' : 'none';
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);
}
} }
if (!STATE.slideshow.isPaused) { if (videoBackdrop) {
this.playCurrentVideo(currentSlide, currentItemId); if (videoBackdrop.tagName === 'VIDEO') {
} else { videoBackdrop.currentTime = 0;
// Still update mute button visibility based on video presence
const muteButton = document.querySelector('.mute-button'); videoBackdrop.muted = STATE.slideshow.isMuted;
if (muteButton) { if (!STATE.slideshow.isMuted) {
muteButton.style.display = hasVideoBackdrop ? 'block' : 'none'; videoBackdrop.volume = 0.4;
}
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`);
videoBackdrop.muted = true;
videoBackdrop.play().catch(err => console.error("Muted fallback failed", err));
}
}, 1000);
});
} 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 (STATE.slideshow.isMuted) {
player.mute();
} else {
player.unMute();
player.setVolume(40);
}
// Check if playback successfully started, otherwise fallback to muted
setTimeout(() => {
if (player.getPlayerState &&
player.getPlayerState() !== YT.PlayerState.PLAYING &&
player.getPlayerState() !== YT.PlayerState.BUFFERING) {
console.log("YouTube loadVideoById didn't start playback, retrying muted...");
player.mute();
player.playVideo();
}
}, 1000);
} else if (player && typeof player.seekTo === 'function') {
// Fallback if loadVideoById is not available or videoId missing
const startTime = player._startTime || 0;
player.seekTo(startTime);
player.playVideo();
}
} }
} }
@@ -2450,23 +2453,26 @@ const SlideshowManager = {
async preloadAdjacentSlides(currentIndex) { async preloadAdjacentSlides(currentIndex) {
const totalItems = STATE.slideshow.totalItems; const totalItems = STATE.slideshow.totalItems;
const preloadCount = Math.min(Math.max(CONFIG.preloadCount || 1, 1), 5); const preloadCount = Math.min(Math.max(CONFIG.preloadCount || 1, 1), 5);
const preloadedIds = new Set();
// Preload next slides // Preload next slides
for (let i = 1; i <= preloadCount; i++) { for (let i = 1; i <= preloadCount; i++) {
const nextIndex = (currentIndex + i) % totalItems; const nextIndex = (currentIndex + i) % totalItems;
if (nextIndex === currentIndex) break; if (nextIndex === currentIndex) break;
const itemId = STATE.slideshow.itemIds[nextIndex]; const itemId = STATE.slideshow.itemIds[nextIndex];
SlideCreator.createSlideForItemId(itemId); if (!preloadedIds.has(itemId)) {
preloadedIds.add(itemId);
SlideCreator.createSlideForItemId(itemId);
}
} }
// Preload previous slides // Preload previous slides
for (let i = 1; i <= preloadCount; i++) { for (let i = 1; i <= preloadCount; i++) {
const prevIndex = (currentIndex - i + totalItems) % totalItems; const prevIndex = (currentIndex - i + totalItems) % totalItems;
if (prevIndex === currentIndex) break; if (prevIndex === currentIndex) break;
const prevItemId = STATE.slideshow.itemIds[prevIndex]; const prevItemId = STATE.slideshow.itemIds[prevIndex];
SlideCreator.createSlideForItemId(prevItemId); if (!preloadedIds.has(prevItemId)) {
preloadedIds.add(prevItemId);
SlideCreator.createSlideForItemId(prevItemId);
}
} }
}, },
@@ -2502,8 +2508,6 @@ const SlideshowManager = {
if (index === -1) return; if (index === -1) return;
const totalItems = STATE.slideshow.itemIds.length; const totalItems = STATE.slideshow.itemIds.length;
// Calculate wrapped distance
let distance = Math.abs(index - currentIndex); let distance = Math.abs(index - currentIndex);
if (totalItems > keepRange * 2) { if (totalItems > keepRange * 2) {
distance = Math.min(distance, totalItems - distance); distance = Math.min(distance, totalItems - distance);
@@ -2533,13 +2537,11 @@ const SlideshowManager = {
} }
}); });
// After pruning, restore focus to container in TV mode
if (prunedAny) { if (prunedAny) {
const isTvMode = (window.layoutManager && window.layoutManager.tv) || const isTvMode = (window.layoutManager && window.layoutManager.tv) ||
document.documentElement.classList.contains('layout-tv') || document.documentElement.classList.contains('layout-tv') ||
document.body.classList.contains('layout-tv'); document.body.classList.contains('layout-tv');
if (isTvMode) { if (isTvMode) {
// Use setTimeout to execute AFTER Jellyfin's focus manager processes the iframe removal
setTimeout(() => { setTimeout(() => {
const container = document.getElementById("slides-container"); const container = document.getElementById("slides-container");
if (container && container.style.display !== 'none') { if (container && container.style.display !== 'none') {
@@ -2666,125 +2668,6 @@ const SlideshowManager = {
} }
}, },
/**
* Pauses all video players except the one with the given item ID
* @param {string} excludeItemId - Item ID to exclude from pausing
*/
pauseOtherVideos(excludeItemId) {
// Pause YouTube players
if (STATE.slideshow.videoPlayers) {
Object.keys(STATE.slideshow.videoPlayers).forEach(id => {
if (id !== excludeItemId) {
const p = STATE.slideshow.videoPlayers[id];
if (p) {
try {
if (typeof p.pauseVideo === 'function') {
p.pauseVideo();
if (typeof p.mute === 'function') {
p.mute();
}
}
else if (p.tagName === 'VIDEO') {
p.pause();
p.muted = true;
}
} catch (e) { console.warn("Error pausing player", id, e); }
}
}
});
}
// Pause HTML5 videos
document.querySelectorAll('video').forEach(video => {
const slideParent = video.closest('.slide');
if (slideParent && slideParent.dataset.itemId !== excludeItemId) {
try {
video.pause();
video.muted = true;
} catch (e) {}
}
});
},
/**
* Plays the video backdrop on the given slide and updates mute button visibility
* @param {Element} slide - The slide DOM element
* @param {string} itemId - The item ID of the slide
* @returns {boolean} Whether a video was found and playback attempted
*/
playCurrentVideo(slide, itemId) {
const videoBackdrop = slide.querySelector('.video-backdrop');
// Update mute button visibility
const muteButton = document.querySelector('.mute-button');
if (muteButton) {
muteButton.style.display = videoBackdrop ? 'block' : 'none';
}
if (!videoBackdrop) return false;
if (videoBackdrop.tagName === 'VIDEO') {
videoBackdrop.currentTime = 0;
videoBackdrop.muted = STATE.slideshow.isMuted;
if (!STATE.slideshow.isMuted) videoBackdrop.volume = 0.4;
videoBackdrop.play().catch(() => {
setTimeout(() => {
if (videoBackdrop.paused && slide.classList.contains('active')) {
console.warn(`Autoplay blocked for ${itemId}, attempting muted fallback`);
videoBackdrop.muted = true;
videoBackdrop.play().catch(err => console.error("Muted fallback failed", err));
}
}, 1000);
});
return true;
}
// YouTube player
const player = STATE.slideshow.videoPlayers && STATE.slideshow.videoPlayers[itemId];
if (player && typeof player.loadVideoById === 'function' && player._videoId) {
player.loadVideoById({
videoId: player._videoId,
startSeconds: player._startTime || 0,
endSeconds: player._endTime
});
if (STATE.slideshow.isMuted) {
player.mute();
} else {
player.unMute();
player.setVolume(40);
}
setTimeout(() => {
if (!slide.classList.contains('active')) return;
if (player.getPlayerState &&
player.getPlayerState() !== YT.PlayerState.PLAYING &&
player.getPlayerState() !== YT.PlayerState.BUFFERING) {
console.log("YouTube loadVideoById didn't start playback, retrying muted...");
player.mute();
player.playVideo();
}
}, 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;
return true;
}
return false;
},
/** /**
* Stops all video playback (YouTube and HTML5) * Stops all video playback (YouTube and HTML5)
* Used when navigating away from the home screen * Used when navigating away from the home screen
@@ -2841,24 +2724,18 @@ const SlideshowManager = {
const currentSlide = document.querySelector(`.slide[data-item-id="${currentItemId}"]`); const currentSlide = document.querySelector(`.slide[data-item-id="${currentItemId}"]`);
if (!currentSlide) return; if (!currentSlide) return;
// YouTube player: just resume, don't reload // 1. Try YouTube Player
const ytPlayer = STATE.slideshow.videoPlayers?.[currentItemId]; const ytPlayer = STATE.slideshow.videoPlayers[currentItemId];
if (ytPlayer && typeof ytPlayer.playVideo === 'function') { 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(); ytPlayer.playVideo();
return;
} }
// HTML5 video: just resume, don't reset currentTime // 2. Try HTML5 Video
const html5Video = currentSlide.querySelector('video.video-backdrop'); const html5Video = currentSlide.querySelector('video');
if (html5Video) { if (html5Video) {
html5Video.muted = STATE.slideshow.isMuted; if (STATE.slideshow.isMuted) {
if (!STATE.slideshow.isMuted) html5Video.volume = 0.4; html5Video.muted = true;
}
html5Video.play().catch(e => console.warn("Error resuming HTML5 video:", e)); html5Video.play().catch(e => console.warn("Error resuming HTML5 video:", e));
} }
}, },
@@ -2933,7 +2810,7 @@ const SlideshowManager = {
// Determine if we should handle navigation keys (Arrows, Space, M) // Determine if we should handle navigation keys (Arrows, Space, M)
// TV Mode: Strict focus required (must be on slideshow) // TV Mode: Strict focus required (must be on slideshow)
// Desktop Mode: Loose focus allowed (slideshow OR body/nothing focused) // Desktop Mode: Loose focus allowed (slideshow OR body/nothing focused)
let canControlSlideshow = isTvMode ? hasDirectFocus : (hasDirectFocus || isBodyFocused); const canControlSlideshow = isTvMode ? hasDirectFocus : (hasDirectFocus || isBodyFocused);
// Check for Input Fields (always ignore typing) // Check for Input Fields (always ignore typing)
const isInputElement = activeElement && (activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA' || activeElement.isContentEditable); const isInputElement = activeElement && (activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA' || activeElement.isContentEditable);
@@ -3577,69 +3454,75 @@ const MediaBarEnhancedSettingsManager = {
* Initialize page visibility handling to pause when tab is inactive * Initialize page visibility handling to pause when tab is inactive
*/ */
const initPageVisibilityHandler = () => { const initPageVisibilityHandler = () => {
document.addEventListener("visibilitychange", () => { let wasVideoPlayingBeforeHide = false;
const isVideoPlayerOpen = document.querySelector('.videoPlayerContainer:not(.hide)') ||
document.querySelector('.youtubePlayerContainer:not(.hide)');
document.addEventListener("visibilitychange", () => {
if (document.hidden) { if (document.hidden) {
// Stop slide timer console.log("Tab inactive - pausing slideshow and videos");
wasVideoPlayingBeforeHide = STATE.slideshow.isVideoPlaying;
if (STATE.slideshow.slideInterval) { if (STATE.slideshow.slideInterval) {
STATE.slideshow.slideInterval.stop(); STATE.slideshow.slideInterval.stop();
} }
if (isVideoPlayerOpen) { // Pause active video if playing
// Jellyfin video is playing --> full stop to free all resources const currentItemId = STATE.slideshow.itemIds[STATE.slideshow.currentSlideIndex];
console.log("Tab inactive and Jellyfin player active - stopping all playback"); if (currentItemId) {
SlideshowManager.stopAllPlayback(); // YouTube
} else { if (STATE.slideshow.videoPlayers && STATE.slideshow.videoPlayers[currentItemId]) {
// Simple tab switch: stop all others, pause only the current const player = STATE.slideshow.videoPlayers[currentItemId];
console.log("Tab inactive. Pausing current video, stopping others"); if (typeof player.pauseVideo === "function") {
const currentItemId = STATE.slideshow.itemIds?.[STATE.slideshow.currentSlideIndex];
// Stop all players except the current one
if (STATE.slideshow.videoPlayers) {
Object.keys(STATE.slideshow.videoPlayers).forEach(id => {
if (id === currentItemId) return;
const p = STATE.slideshow.videoPlayers[id];
if (p) {
try {
if (typeof p.stopVideo === 'function') {
p.stopVideo();
if (typeof p.clearVideo === 'function') p.clearVideo();
} else if (p.tagName === 'VIDEO') {
p.pause();
p.muted = true;
p.currentTime = 0;
}
} catch (e) { console.warn("Error stopping background player", id, e); }
}
});
}
// Pause only the current video
if (currentItemId) {
const player = STATE.slideshow.videoPlayers?.[currentItemId];
if (player) {
try { try {
if (typeof player.pauseVideo === 'function') { player.pauseVideo();
player.pauseVideo(); STATE.slideshow.isVideoPlaying = false;
} else if (player.tagName === 'VIDEO') { } catch (e) {
player.pause(); console.warn("Error pausing video on tab hide:", e);
} }
} catch (e) { console.warn("Error pausing video on tab hide:", e); } } else if (player.tagName === 'VIDEO') { // HTML5 Video
player.pause();
STATE.slideshow.isVideoPlaying = false;
} }
} }
} }
} else { } else {
console.log("Tab active. Resuming slideshow"); console.log("Tab active - resuming slideshow");
const isOnHome = window.location.hash === "#/home.html" || window.location.hash === "#/home"; if (!STATE.slideshow.isPaused) {
const currentItemId = STATE.slideshow.itemIds[STATE.slideshow.currentSlideIndex];
if (isOnHome && !STATE.slideshow.isPaused && !isVideoPlayerOpen) { if (wasVideoPlayingBeforeHide && currentItemId && STATE.slideshow.videoPlayers && STATE.slideshow.videoPlayers[currentItemId]) {
SlideshowManager.resumeActivePlayback(); const player = STATE.slideshow.videoPlayers[currentItemId];
if (STATE.slideshow.slideInterval && !CONFIG.waitForTrailerToEnd) { // YouTube
STATE.slideshow.slideInterval.start(); if (typeof player.playVideo === "function") {
try {
player.playVideo();
STATE.slideshow.isVideoPlaying = true;
} catch (e) {
console.warn("Error resuming video on tab show:", e);
if (STATE.slideshow.slideInterval) {
STATE.slideshow.slideInterval.start();
}
}
} else if (player.tagName === 'VIDEO') { // HTML5 Video
try {
player.play().catch(e => console.warn("Error resuming HTML5 video:", e));
STATE.slideshow.isVideoPlaying = true;
} catch(e) { console.warn(e); }
}
} else {
// No video was playing, just restart interval
const activeSlide = document.querySelector('.slide.active');
const hasVideo = activeSlide && activeSlide.querySelector('.video-backdrop');
if (CONFIG.waitForTrailerToEnd && hasVideo) {
// Don't restart interval if waiting for trailer
} else {
if (STATE.slideshow.slideInterval) {
STATE.slideshow.slideInterval.start();
}
}
} }
wasVideoPlayingBeforeHide = false;
} }
} }
}); });

View File

@@ -9,12 +9,12 @@
"imageUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/raw/branch/main/logo.png", "imageUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/raw/branch/main/logo.png",
"versions": [ "versions": [
{ {
"version": "1.6.1.20", "version": "1.6.1.25",
"changelog": "- fix tv mode issue\n- refactor video playback management", "changelog": "- fix tv mode issue\n- refactor video playback management",
"targetAbi": "10.11.0.0", "targetAbi": "10.11.0.0",
"sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.6.1.20/Jellyfin.Plugin.MediaBarEnhanced.zip", "sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.6.1.25/Jellyfin.Plugin.MediaBarEnhanced.zip",
"checksum": "e3ed985f3e00f8124502faad46bd160d", "checksum": "283886aa51ccd1d40f057b65617b7ea4",
"timestamp": "2026-02-14T00:10:57Z" "timestamp": "2026-02-14T02:21:14Z"
}, },
{ {
"version": "1.6.0.2", "version": "1.6.0.2",

3607
tmp.js Normal file

File diff suppressed because it is too large Load Diff