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

Enhance video playback handling: enable autoplay, adjust mute settings for Safari compatibility, and improve navigation checks during autoplay.

Browse Source
This commit is contained in:
CodeDevMLH
2026-03-05 22:42:40 +01:00
parent 71402f7e86
commit 3117d627dd
1 changed files with 36 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1749,8 +1749,8 @@ const SlideCreator = {
// Fetch SponsorBlock data // Fetch SponsorBlock data
ApiUtils.fetchSponsorBlockData(videoId).then(segments => { ApiUtils.fetchSponsorBlockData(videoId).then(segments => {
const playerVars = { const playerVars = {
autoplay: 0, autoplay: 1,
mute: STATE.slideshow.isMuted ? 1 : 0, mute: 1, // need to be muted for Safari, because apple makes life difficult...
controls: 0, controls: 0,
disablekb: 1, disablekb: 1,
fs: 0, fs: 0,
@@ -1808,9 +1808,8 @@ const SlideCreator = {
// Store reference to wrapper for fading // Store reference to wrapper for fading
event.target._wrapperDiv = videoBackdrop; event.target._wrapperDiv = videoBackdrop;
if (STATE.slideshow.isMuted) { // Unmute now if user wants sound.
event.target.mute(); if (!STATE.slideshow.isMuted) {
} else {
event.target.unMute(); event.target.unMute();
event.target.setVolume(40); event.target.setVolume(40);
} }
@@ -1819,28 +1818,34 @@ const SlideCreator = {
event.target.setPlaybackQuality(quality); event.target.setPlaybackQuality(quality);
} }
// Only play if this is the active slide // Stop playback if slide was navigated away from
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'))) { if (!slide || !slide.classList.contains('active') || document.hidden || (isVideoPlayerOpen && !isVideoPlayerOpen.classList.contains('hide'))) {
event.target.playVideo(); event.target.stopVideo();
} else {
// Pause slideshow timer when video starts if configured
if (CONFIG.waitForTrailerToEnd && STATE.slideshow.slideInterval) {
STATE.slideshow.slideInterval.stop();
}
// Check if it actually started playing after a short delay (handling autoplay blocks) // Safety check after 1s: handle navigation-away during the window,
// and fallback to muted play if autoplay failed for any reason.
const timeoutId = setTimeout(() => { const timeoutId = setTimeout(() => {
// Re-check conditions before processing fallback
const isVideoPlayerOpenNow = document.querySelector('.videoPlayerContainer') || document.querySelector('.youtubePlayerContainer'); const isVideoPlayerOpenNow = document.querySelector('.videoPlayerContainer') || document.querySelector('.youtubePlayerContainer');
if (document.hidden || (isVideoPlayerOpenNow && !isVideoPlayerOpenNow.classList.contains('hide')) || !slide.classList.contains('active')) { if (document.hidden || (isVideoPlayerOpenNow && !isVideoPlayerOpenNow.classList.contains('hide')) || !slide.classList.contains('active')) {
console.log(`Navigation detected during autoplay check for ${itemId}, stopping video.`); console.log(`Navigation detected during autoplay check for ${itemId}, stopping video.`);
try { try {
event.target.stopVideo(); event.target.stopVideo();
} catch (e) { console.warn("Error stopping video in timeout:", e); } } catch (e) { console.warn("Error stopping video:", e); }
return; return;
} }
if (event.target.getPlayerState() !== YT.PlayerState.PLAYING && // If somehow not playing/buffering yet, force muted fallback
event.target.getPlayerState() !== YT.PlayerState.BUFFERING) { const state = event.target.getPlayerState();
console.warn(`Autoplay blocked for ${itemId}, attempting muted fallback`); if (state !== YT.PlayerState.PLAYING && state !== YT.PlayerState.BUFFERING) {
console.warn(`Autoplay stalled for ${itemId}, attempting muted fallback`);
event.target.mute(); event.target.mute();
event.target.playVideo(); event.target.playVideo();
} }
@@ -1848,11 +1853,6 @@ const SlideCreator = {
if (!STATE.slideshow.autoplayTimeouts) STATE.slideshow.autoplayTimeouts = []; if (!STATE.slideshow.autoplayTimeouts) STATE.slideshow.autoplayTimeouts = [];
STATE.slideshow.autoplayTimeouts.push(timeoutId); STATE.slideshow.autoplayTimeouts.push(timeoutId);
// Pause slideshow timer when video starts if configured
if (CONFIG.waitForTrailerToEnd && STATE.slideshow.slideInterval) {
STATE.slideshow.slideInterval.stop();
}
} }
}, },
'onStateChange': (event) => { 'onStateChange': (event) => {
@@ -1896,6 +1896,7 @@ const SlideCreator = {
}; };
videoAttributes.muted = ""; videoAttributes.muted = "";
videoAttributes.playsinline = ""; // again Safari needs extra treatment...
videoBackdrop = SlideUtils.createElement("video", videoAttributes); videoBackdrop = SlideUtils.createElement("video", videoAttributes);
videoBackdrop.volume = 0.4; videoBackdrop.volume = 0.4;
@@ -2468,6 +2469,7 @@ const SlideshowManager = {
const lazySrc = videoBackdrop.getAttribute('data-src'); const lazySrc = videoBackdrop.getAttribute('data-src');
if (lazySrc && !videoBackdrop.src) { if (lazySrc && !videoBackdrop.src) {
videoBackdrop.src = lazySrc; videoBackdrop.src = lazySrc;
videoBackdrop.load();
} }
videoBackdrop.currentTime = 0; videoBackdrop.currentTime = 0;
@@ -2491,17 +2493,21 @@ const SlideshowManager = {
const player = STATE.slideshow.videoPlayers[currentItemId]; const player = STATE.slideshow.videoPlayers[currentItemId];
if (player && typeof player.loadVideoById === 'function' && player._videoId) { if (player && typeof player.loadVideoById === 'function' && player._videoId) {
// Use loadVideoById to enforce start and end times // Use loadVideoById to enforce start and end times
// load always starts muted first, then unmute if needed
player.loadVideoById({ player.loadVideoById({
videoId: player._videoId, videoId: player._videoId,
startSeconds: player._startTime || 0, startSeconds: player._startTime || 0,
endSeconds: player._endTime endSeconds: player._endTime
}); });
player.mute();
if (STATE.slideshow.isMuted) { if (!STATE.slideshow.isMuted) {
player.mute(); setTimeout(() => {
} else { // Only unmute if still on the same slide
player.unMute(); if (currentSlide.classList.contains('active')) {
player.setVolume(40); player.unMute();
player.setVolume(40);
}
}, 600);
} }
// Check if playback successfully started, otherwise fallback to muted // Check if playback successfully started, otherwise fallback to muted