CodeDevMLH/jellyfin-plugin-media-bar-enhanced
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 24 Wiki Activity

Enhance video playback logic to handle pending play state and improve pause behavior for video backdrops

Browse Source
This commit is contained in:
CodeDevMLH
2026-02-14 01:09:48 +01:00
parent e5bf23a7bc
commit b06d1e9375
1 changed files with 40 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.js
View File

@@ -1741,7 +1741,14 @@ const SlideCreator = {
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');
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(); 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)
@@ -2325,7 +2332,31 @@ const SlideshowManager = {
// Manage Video Playback: Stop others, Play current // Manage Video Playback: Stop others, Play current
this.pauseOtherVideos(currentItemId); 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 = '<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) {
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); const enableAnimations = MediaBarEnhancedSettingsManager.getSetting('slideAnimations', CONFIG.slideAnimationEnabled);
@@ -2744,6 +2775,13 @@ const SlideshowManager = {
return true; 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; return false;
}, },