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

Enhance video backdrop handling to support YouTube iframe integration and improve video playback logic

Browse Source
This commit is contained in:
CodeDevMLH
2026-02-14 01:33:54 +01:00
parent 39e29046de
commit bf7c7fb8e8
1 changed files with 27 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1719,6 +1719,13 @@ const SlideCreator = {
if (iframe) {
iframe.setAttribute('tabindex', '-1');
iframe.setAttribute('inert', '');
// Preserve video-backdrop class on the iframe (YT API replaces the original div)
iframe.classList.add('backdrop', 'video-backdrop');
if (CONFIG.fullWidthVideo) {
iframe.classList.add('video-backdrop-full');
} else {
iframe.classList.add('video-backdrop-default');
}
}
// Store start/end time and videoId for later use
@@ -2333,7 +2340,10 @@ const SlideshowManager = {
// Manage Video Playback: Stop others, Play current
this.pauseOtherVideos(currentItemId);
const hasVideoBackdrop = !!currentSlide.querySelector('.video-backdrop');
// Check for video backdrop (also check by YouTube player ID since YT replaces div with iframe)
const hasVideoBackdrop = !!(currentSlide.querySelector('.video-backdrop') ||
currentSlide.querySelector(`#youtube-player-${currentItemId}`) ||
(STATE.slideshow.videoPlayers && STATE.slideshow.videoPlayers[currentItemId]));
// If paused and new slide has video, un-pause for video playback.
// If paused and new slide has only images, stay paused.
@@ -2391,7 +2401,9 @@ 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') ||
currentSlide.querySelector(`#youtube-player-${currentItemId}`) ||
(STATE.slideshow.videoPlayers && STATE.slideshow.videoPlayers[currentItemId]);
if (STATE.slideshow.slideInterval && !STATE.slideshow.isPaused) {
if (CONFIG.waitForTrailerToEnd && hasVideo) {
STATE.slideshow.slideInterval.stop();
@@ -2653,7 +2665,9 @@ const SlideshowManager = {
// Only restart interval if we are NOT waiting for a video to end
const currentItemId = STATE.slideshow.itemIds[STATE.slideshow.currentSlideIndex];
const currentSlide = document.querySelector(`.slide[data-item-id="${currentItemId}"]`);
const hasVideo = currentSlide && currentSlide.querySelector('.video-backdrop');
const hasVideo = currentSlide && (currentSlide.querySelector('.video-backdrop') ||
currentSlide.querySelector(`#youtube-player-${currentItemId}`) ||
(STATE.slideshow.videoPlayers && STATE.slideshow.videoPlayers[currentItemId]));
if (!CONFIG.waitForTrailerToEnd || !hasVideo) {
STATE.slideshow.slideInterval.start();
@@ -2712,15 +2726,22 @@ const SlideshowManager = {
* @returns {boolean} Whether a video was found and playback attempted
*/
playCurrentVideo(slide, itemId) {
const videoBackdrop = slide.querySelector('.video-backdrop');
// Try finding by class first, then fall back to YouTube player container by ID
let videoBackdrop = slide.querySelector('.video-backdrop');
if (!videoBackdrop) {
// YouTube API replaces the div with an iframe, which may not have the class yet
videoBackdrop = slide.querySelector(`#youtube-player-${itemId}`);
}
// Also check if a player exists in the registry even if no DOM element found
const hasRegisteredPlayer = !!(STATE.slideshow.videoPlayers && STATE.slideshow.videoPlayers[itemId]);
// Update mute button visibility
const muteButton = document.querySelector('.mute-button');
if (muteButton) {
muteButton.style.display = videoBackdrop ? 'block' : 'none';
muteButton.style.display = (videoBackdrop || hasRegisteredPlayer) ? 'block' : 'none';
}
if (!videoBackdrop) return false;
if (!videoBackdrop && !hasRegisteredPlayer) return false;
if (videoBackdrop.tagName === 'VIDEO') {
videoBackdrop.currentTime = 0;