Compare commits

...

23 Commits

Author SHA1 Message Date
CodeDevMLH
0682967591 Update manifest.json for release v1.6.1.28 [skip ci] 2026-02-14 14:38:41 +00:00
CodeDevMLH
7938728f8e Bump version to 1.6.1.28 in project file and manifest
All checks were successful
Auto Release Plugin / build-and-release (push) Successful in 53s
2026-02-14 15:37:50 +01:00
CodeDevMLH
a0773c66eb Refactor video playback logic to manage mute state more effectively and improve autoplay handling 2026-02-14 15:37:44 +01:00
CodeDevMLH
10f2a38add Update manifest.json for release v1.6.1.27 [skip ci] 2026-02-14 14:22:59 +00:00
CodeDevMLH
9bfa3ba5ea Bump version to 1.6.1.26
All checks were successful
Auto Release Plugin / build-and-release (push) Successful in 52s
2026-02-14 15:22:09 +01:00
CodeDevMLH
5c00c07b8a Refactor video playback logic and enhance slide management 2026-02-14 15:21:32 +01:00
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 3852 additions and 300 deletions

View File

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

View File

@@ -1435,19 +1435,16 @@ 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'))) {
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();
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;
}
@@ -1462,27 +1459,20 @@ const VisibilityObserver = {
activeTab &&
activeTab.getAttribute("data-index") === "0";
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";
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();
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();
}
},
@@ -1491,11 +1481,6 @@ const VisibilityObserver = {
*/
init() {
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());
@@ -1622,6 +1607,11 @@ const SlideCreator = {
else if (item.RemoteTrailers && item.RemoteTrailers.length > 0) {
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);
@@ -1714,41 +1704,28 @@ const SlideCreator = {
playerVars: playerVars,
events: {
'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
event.target._startTime = playerVars.start || 0;
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);
}
// 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 isVideoPlayerOpen = document.querySelector('.videoPlayerContainer') || document.querySelector('.youtubePlayerContainer');
// Check _pendingPlay flag (set by playCurrentVideo when player wasn't ready yet)
const container = document.getElementById(`youtube-player-${itemId}`);
const hasPendingPlay = container && container._pendingPlay;
if (container) container._pendingPlay = false;
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);
}
const isActiveAndVisible = slide && slide.classList.contains('active') && !document.hidden && (!isVideoPlayerOpen || isVideoPlayerOpen.classList.contains('hide'));
if ((isActiveAndVisible || hasPendingPlay) && !STATE.slideshow.isPaused) {
event.target.playVideo();
// Check if it actually started playing after a short delay (handling autoplay blocks)
@@ -1778,11 +1755,16 @@ const SlideCreator = {
if (CONFIG.waitForTrailerToEnd && STATE.slideshow.slideInterval) {
STATE.slideshow.slideInterval.stop();
}
} else {
event.target.mute();
}
},
'onStateChange': (event) => {
if (event.data === YT.PlayerState.ENDED) {
SlideshowManager.nextSlide();
const slide = document.querySelector(`.slide[data-item-id="${itemId}"]`);
if (slide && slide.classList.contains('active')) {
SlideshowManager.nextSlide();
}
}
},
'onError': (event) => {
@@ -1823,23 +1805,24 @@ const SlideCreator = {
STATE.slideshow.videoPlayers[itemId] = backdrop;
backdrop.addEventListener('play', (event) => {
const slide = document.querySelector(`.slide[data-item-id="${itemId}"]`);
backdrop.addEventListener('play', () => {
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;
}
// 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', () => {
SlideshowManager.nextSlide();
SlideshowManager.nextSlide();
});
backdrop.addEventListener('error', () => {
@@ -2274,16 +2257,6 @@ const SlideshowManager = {
let previousVisibleSlide;
try {
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;
index = Math.max(0, Math.min(index, totalItems - 1));
@@ -2308,53 +2281,134 @@ 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");
// Restore focus for TV mode navigation continuity
requestAnimationFrame(() => {
if (focusSelector) {
const target = currentSlide.querySelector(focusSelector);
if (target) {
target.focus();
return;
// 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);
}
}
// 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') ||
document.body.classList.contains('layout-tv');
if (isTvMode) {
container.focus({ preventScroll: true });
}
// Manage Video Playback: Stop others, Play current
// 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) {
try {
if (typeof p.pauseVideo === 'function') {
p.pauseVideo();
if (typeof p.mute === 'function') {
p.mute();
}
}
} catch (e) { console.warn("Error pausing player", id, e); }
}
}
});
}
// 2. Pause all other HTML5 videos e.g. local trailers
document.querySelectorAll('video').forEach(video => {
if (!video.closest(`.slide[data-item-id="${currentItemId}"]`)) {
video.pause();
video.muted = true;
}
});
// Manage Video Playback: Stop others, Play current
this.pauseOtherVideos(currentItemId);
// 3. Play and Reset current video
const videoBackdrop = currentSlide.querySelector('.video-backdrop');
const hasVideoBackdrop = !!currentSlide.querySelector('.video-backdrop');
// If paused and new slide has video, un-pause for video playback.
// If paused and new slide has only images, stay paused.
if (STATE.slideshow.isPaused && hasVideoBackdrop) {
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);
}
// Update mute button visibility
const muteButton = document.querySelector('.mute-button');
if (muteButton) {
const hasVideo = !!videoBackdrop;
muteButton.style.display = hasVideo ? 'block' : 'none';
}
if (!STATE.slideshow.isPaused) {
this.playCurrentVideo(currentSlide, currentItemId);
} else {
// Still update mute button visibility based on video presence
const muteButton = document.querySelector('.mute-button');
if (muteButton) {
muteButton.style.display = hasVideoBackdrop ? 'block' : 'none';
if (videoBackdrop) {
if (videoBackdrop.tagName === 'VIDEO') {
videoBackdrop.currentTime = 0;
videoBackdrop.muted = STATE.slideshow.isMuted;
if (!STATE.slideshow.isMuted) {
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 && 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));
}
}, 1000);
});
} else if (STATE.slideshow.videoPlayers && STATE.slideshow.videoPlayers[currentItemId]) {
const player = STATE.slideshow.videoPlayers[currentItemId];
if (player && typeof player.loadVideoById === 'function' && player._videoId) {
// 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();
} else {
player.unMute();
player.setVolume(40);
}
// 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) {
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();
}
}
}
@@ -2391,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();
@@ -2450,14 +2505,18 @@ const SlideshowManager = {
async preloadAdjacentSlides(currentIndex) {
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];
SlideCreator.createSlideForItemId(itemId);
if (!preloadedIds.has(itemId)) {
preloadedIds.add(itemId);
SlideCreator.createSlideForItemId(itemId);
}
}
// Preload previous slides
@@ -2466,7 +2525,10 @@ const SlideshowManager = {
if (prevIndex === currentIndex) break;
const prevItemId = STATE.slideshow.itemIds[prevIndex];
SlideCreator.createSlideForItemId(prevItemId);
if (!preloadedIds.has(prevItemId)) {
preloadedIds.add(prevItemId);
SlideCreator.createSlideForItemId(prevItemId);
}
}
},
@@ -2502,13 +2564,11 @@ const SlideshowManager = {
if (index === -1) return;
const totalItems = STATE.slideshow.itemIds.length;
// Calculate wrapped distance
let distance = Math.abs(index - currentIndex);
if (totalItems > keepRange * 2) {
distance = Math.min(distance, totalItems - distance);
}
if (distance > keepRange) {
// Destroy video player if exists
if (STATE.slideshow.videoPlayers[itemId]) {
@@ -2533,13 +2593,11 @@ const SlideshowManager = {
}
});
// 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') {
@@ -2666,125 +2724,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)
* Used when navigating away from the home screen
@@ -2933,7 +2872,7 @@ const SlideshowManager = {
// Determine if we should handle navigation keys (Arrows, Space, M)
// TV Mode: Strict focus required (must be on slideshow)
// 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)
const isInputElement = activeElement && (activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA' || activeElement.isContentEditable);
@@ -3577,69 +3516,75 @@ const MediaBarEnhancedSettingsManager = {
* Initialize page visibility handling to pause when tab is inactive
*/
const initPageVisibilityHandler = () => {
document.addEventListener("visibilitychange", () => {
const isVideoPlayerOpen = document.querySelector('.videoPlayerContainer:not(.hide)') ||
document.querySelector('.youtubePlayerContainer:not(.hide)');
let wasVideoPlayingBeforeHide = false;
document.addEventListener("visibilitychange", () => {
if (document.hidden) {
// Stop slide timer
console.log("Tab inactive - pausing slideshow and videos");
wasVideoPlayingBeforeHide = STATE.slideshow.isVideoPlaying;
if (STATE.slideshow.slideInterval) {
STATE.slideshow.slideInterval.stop();
}
if (isVideoPlayerOpen) {
// Jellyfin video is playing --> full stop to free all resources
console.log("Tab inactive and Jellyfin player active - stopping all playback");
SlideshowManager.stopAllPlayback();
} else {
// Simple tab switch: stop all others, pause only the current
console.log("Tab inactive. Pausing current video, stopping others");
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) {
// Pause active video if playing
const currentItemId = STATE.slideshow.itemIds[STATE.slideshow.currentSlideIndex];
if (currentItemId) {
// YouTube
if (STATE.slideshow.videoPlayers && STATE.slideshow.videoPlayers[currentItemId]) {
const player = STATE.slideshow.videoPlayers[currentItemId];
if (typeof player.pauseVideo === "function") {
try {
if (typeof player.pauseVideo === 'function') {
player.pauseVideo();
} else if (player.tagName === 'VIDEO') {
player.pause();
}
} catch (e) { console.warn("Error pausing video on tab hide:", e); }
player.pauseVideo();
STATE.slideshow.isVideoPlaying = false;
} 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 {
console.log("Tab active. Resuming slideshow");
const isOnHome = window.location.hash === "#/home.html" || window.location.hash === "#/home";
if (isOnHome && !STATE.slideshow.isPaused && !isVideoPlayerOpen) {
SlideshowManager.resumeActivePlayback();
if (STATE.slideshow.slideInterval && !CONFIG.waitForTrailerToEnd) {
STATE.slideshow.slideInterval.start();
console.log("Tab active - resuming slideshow");
if (!STATE.slideshow.isPaused) {
const currentItemId = STATE.slideshow.itemIds[STATE.slideshow.currentSlideIndex];
if (wasVideoPlayingBeforeHide && currentItemId && STATE.slideshow.videoPlayers && STATE.slideshow.videoPlayers[currentItemId]) {
const player = STATE.slideshow.videoPlayers[currentItemId];
// YouTube
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",
"versions": [
{
"version": "1.6.1.20",
"version": "1.6.1.28",
"changelog": "- fix tv mode issue\n- refactor video playback management",
"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",
"checksum": "e3ed985f3e00f8124502faad46bd160d",
"timestamp": "2026-02-14T00:10:57Z"
"sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.6.1.28/Jellyfin.Plugin.MediaBarEnhanced.zip",
"checksum": "2b44f2ee7399b70c4bfdaae33ff80437",
"timestamp": "2026-02-14T14:38:40Z"
},
{
"version": "1.6.0.2",

3607
tmp.js Normal file

File diff suppressed because it is too large Load Diff