Compare commits

...

6 Commits

Author SHA1 Message Date
CodeDevMLH
a44bf7ebf4 Update manifest.json for release v1.6.6.2 [skip ci] 2026-02-19 02:36:42 +00:00
CodeDevMLH
1f273906bf Bump version to 1.6.6.2
All checks were successful
Auto Release Plugin / build-and-release (push) Successful in 51s
2026-02-19 03:35:50 +01:00
CodeDevMLH
0534d0458e Add delay before stopping other video players during slideshow transitions 2026-02-19 03:35:38 +01:00
CodeDevMLH
8b0d6f137d Update manifest.json for release v1.6.6.1 [skip ci] 2026-02-19 02:25:34 +00:00
CodeDevMLH
2208b86a47 Bump version to 1.6.6.1
All checks were successful
Auto Release Plugin / build-and-release (push) Successful in 52s
2026-02-19 03:24:42 +01:00
CodeDevMLH
5a1048687c Enhance video backdrop handling with opacity transitions for smoother playback 2026-02-19 03:24:27 +01:00
3 changed files with 54 additions and 30 deletions

View File

@@ -12,7 +12,7 @@
<!-- <TreatWarningsAsErrors>false</TreatWarningsAsErrors> -->
<Title>Jellyfin Media Bar Enhanced Plugin</Title>
<Authors>CodeDevMLH</Authors>
<Version>1.6.6.0</Version>
<Version>1.6.6.2</Version>
<RepositoryUrl>https://github.com/CodeDevMLH/jellyfin-plugin-media-bar-enhanced</RepositoryUrl>
</PropertyGroup>

View File

@@ -1723,11 +1723,19 @@ const SlideCreator = {
// Create container for YouTube API
const videoClass = CONFIG.fullWidthVideo ? "video-backdrop-full" : "video-backdrop-default";
// Create a wrapper for opacity transition
videoBackdrop = SlideUtils.createElement("div", {
className: `backdrop video-backdrop ${videoClass}`,
id: `youtube-player-${itemId}`
className: `backdrop video-backdrop ${videoClass}`,
style: "opacity: 0; transition: opacity 1.2s ease-in-out;" // Start interrupted/transparent
});
const ytPlayerDiv = SlideUtils.createElement("div", {
id: `youtube-player-${itemId}`,
style: "width: 100%; height: 100%;"
});
videoBackdrop.appendChild(ytPlayerDiv);
// Initialize YouTube Player
SlideUtils.loadYouTubeIframeAPI().then(() => {
// Fetch SponsorBlock data
@@ -1784,6 +1792,9 @@ const SlideCreator = {
event.target._endTime = playerVars.end || undefined;
event.target._videoId = videoId;
// Store reference to wrapper for fading
event.target._wrapperDiv = videoBackdrop;
if (STATE.slideshow.isMuted) {
event.target.mute();
} else {
@@ -1832,6 +1843,13 @@ const SlideCreator = {
}
},
'onStateChange': (event) => {
// Fade in when playing
if (event.data === YT.PlayerState.PLAYING) {
if (event.target._wrapperDiv) {
event.target._wrapperDiv.style.opacity = "1";
}
}
if (event.data === YT.PlayerState.ENDED) {
const slide = document.querySelector(`.slide[data-item-id="${itemId}"]`);
if (slide && slide.classList.contains('active')) {
@@ -1861,7 +1879,7 @@ const SlideCreator = {
preload: "none",
disablePictureInPicture: true,
"data-src": videoSrc,
style: "object-fit: cover; object-position: center center; width: 100%; height: 100%; position: absolute; top: 0; left: 0; pointer-events: none;"
style: "object-fit: cover; object-position: center center; width: 100%; height: 100%; position: absolute; top: 0; left: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s ease-in-out;"
};
videoAttributes.muted = "";
@@ -1879,6 +1897,10 @@ const SlideCreator = {
event.target.currentTime = 0;
return;
}
// Fade in
event.target.style.opacity = "1";
if (CONFIG.waitForTrailerToEnd && STATE.slideshow.slideInterval) {
STATE.slideshow.slideInterval.stop();
}
@@ -2371,30 +2393,32 @@ const SlideshowManager = {
// Manage Video Playback: Stop others, Play current
// 1. Stop all other YouTube players and local video elements, release connections
if (STATE.slideshow.videoPlayers) {
Object.keys(STATE.slideshow.videoPlayers).forEach(id => {
if (id !== currentItemId) {
const p = STATE.slideshow.videoPlayers[id];
if (!p) return;
// YouTube player
if (typeof p.pauseVideo === 'function') {
p.pauseVideo();
}
// HTML5 <video> element (local trailers), release HTTP connection
if (p instanceof HTMLVideoElement) {
p.pause();
p.muted = true;
p.currentTime = 0;
// Save src to data-src and release the HTTP streaming connection
if (p.src && !p.getAttribute('data-src')) {
p.setAttribute('data-src', p.src);
setTimeout(() => {
if (STATE.slideshow.videoPlayers) {
Object.keys(STATE.slideshow.videoPlayers).forEach(id => {
if (id !== currentItemId) {
const p = STATE.slideshow.videoPlayers[id];
if (!p) return;
// YouTube player
if (typeof p.pauseVideo === 'function') {
p.pauseVideo();
}
// HTML5 <video> element (local trailers), release HTTP connection
if (p instanceof HTMLVideoElement) {
p.pause();
p.muted = true;
p.currentTime = 0;
// Save src to data-src and release the HTTP streaming connection
if (p.src && !p.getAttribute('data-src')) {
p.setAttribute('data-src', p.src);
}
p.removeAttribute('src');
p.load();
}
p.removeAttribute('src');
p.load();
}
}
});
}
});
}
}, CONFIG.fadeTransitionDuration);
// 2. Pause all other HTML5 videos e.g. local trailers
document.querySelectorAll('video').forEach(video => {

View File

@@ -9,12 +9,12 @@
"imageUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/raw/branch/main/logo.png",
"versions": [
{
"version": "1.6.6.0",
"version": "1.6.6.2",
"changelog": "- feat: add static backdrop also for video backdrops\n- fix: renaming issue of settings (avoiding conflict with other plugins)",
"targetAbi": "10.11.0.0",
"sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.6.6.0/Jellyfin.Plugin.MediaBarEnhanced.zip",
"checksum": "af624d779b5e43cc6e21899eb24db26d",
"timestamp": "2026-02-19T01:01:20Z"
"sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.6.6.2/Jellyfin.Plugin.MediaBarEnhanced.zip",
"checksum": "5672ad96720adf049e780c85174a88bc",
"timestamp": "2026-02-19T02:36:41Z"
},
{
"version": "1.6.5.2",