diff --git a/Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.js b/Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.js index d61a956..9f99339 100644 --- a/Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.js +++ b/Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.js @@ -1741,7 +1741,14 @@ const SlideCreator = { const slide = document.querySelector(`.slide[data-item-id="${itemId}"]`); const isVideoPlayerOpen = document.querySelector('.videoPlayerContainer') || document.querySelector('.youtubePlayerContainer'); - if (slide && slide.classList.contains('active') && !document.hidden && (!isVideoPlayerOpen || isVideoPlayerOpen.classList.contains('hide'))) { + // 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; + + 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) @@ -2325,7 +2332,31 @@ const SlideshowManager = { // Manage Video Playback: Stop others, Play current this.pauseOtherVideos(currentItemId); - this.playCurrentVideo(currentSlide, currentItemId); + + 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 = 'pause'; + const pauseLabel = LocalizationUtils.getLocalizedString('ButtonPause', 'Pause'); + pauseButton.setAttribute('aria-label', pauseLabel); + pauseButton.setAttribute('title', pauseLabel); + } + } + + 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'; + } + } const enableAnimations = MediaBarEnhancedSettingsManager.getSetting('slideAnimations', CONFIG.slideAnimationEnabled); @@ -2744,6 +2775,13 @@ const SlideshowManager = { 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; },