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

Refactor video playback logic and enhance slide management

Browse Source
This commit is contained in:
CodeDevMLH
2026-02-14 15:21:32 +01:00
parent 773c49a228
commit 5c00c07b8a
1 changed files with 47 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1758,11 +1758,7 @@ const SlideCreator = {
},
'onStateChange': (event) => {
if (event.data === YT.PlayerState.ENDED) {
if (CONFIG.waitForTrailerToEnd) {
SlideshowManager.nextSlide();
} else {
event.target.playVideo(); // Loop if not waiting for end if trailer is shorter than slide duration
}
SlideshowManager.nextSlide();
}
},
'onError': (event) => {
@@ -1804,15 +1800,23 @@ const SlideCreator = {
STATE.slideshow.videoPlayers[itemId] = backdrop;
backdrop.addEventListener('play', () => {
// 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', () => {
if (CONFIG.waitForTrailerToEnd) {
SlideshowManager.nextSlide();
}
});
backdrop.addEventListener('error', () => {
@@ -2271,9 +2275,25 @@ 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");
// 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);
}
}
// Manage Video Playback: Stop others, Play current
@@ -2293,6 +2313,7 @@ const SlideshowManager = {
document.querySelectorAll('video').forEach(video => {
if (!video.closest(`.slide[data-item-id="${currentItemId}"]`)) {
video.pause();
video.muted = true;
}
});
@@ -2394,7 +2415,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();
@@ -2454,20 +2476,24 @@ const SlideshowManager = {
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];
if (!preloadedIds.has(itemId)) {
preloadedIds.add(itemId);
SlideCreator.createSlideForItemId(itemId);
}
}
// Preload previous slides
for (let i = 1; i <= preloadCount; i++) {
const prevIndex = (currentIndex - i + totalItems) % totalItems;
if (prevIndex === currentIndex) break;
const prevItemId = STATE.slideshow.itemIds[prevIndex];
if (!preloadedIds.has(prevItemId)) {
preloadedIds.add(prevItemId);
@@ -2724,18 +2750,24 @@ const SlideshowManager = {
const currentSlide = document.querySelector(`.slide[data-item-id="${currentItemId}"]`);
if (!currentSlide) return;
// 1. Try YouTube Player
const ytPlayer = STATE.slideshow.videoPlayers[currentItemId];
// YouTube player: just resume, don't reload
const ytPlayer = STATE.slideshow.videoPlayers?.[currentItemId];
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();
return;
}
// 2. Try HTML5 Video
const html5Video = currentSlide.querySelector('video');
// HTML5 video: just resume, don't reset currentTime
const html5Video = currentSlide.querySelector('video.video-backdrop');
if (html5Video) {
if (STATE.slideshow.isMuted) {
html5Video.muted = true;
}
html5Video.muted = STATE.slideshow.isMuted;
if (!STATE.slideshow.isMuted) html5Video.volume = 0.4;
html5Video.play().catch(e => console.warn("Error resuming HTML5 video:", e));
}
},