Compare commits

...

10 Commits

Author SHA1 Message Date
CodeDevMLH
d3f6641158 Update manifest.json for release v1.6.6.0 [skip ci] 2026-02-19 01:01:21 +00:00
CodeDevMLH
c214a620e4 Bump version to 1.6.6.0
All checks were successful
Auto Release Plugin / build-and-release (push) Successful in 54s
2026-02-19 01:52:31 +01:00
CodeDevMLH
f0c9462878 Implement manual mapping for MediaBarIsEnabled and enhance video backdrop handling 2026-02-19 01:52:17 +01:00
CodeDevMLH
e12a5b56a2 Update manifest.json for release v1.6.5.2 [skip ci] 2026-02-16 23:57:58 +00:00
CodeDevMLH
51ff0f2623 Bump version to 1.6.5.2
All checks were successful
Auto Release Plugin / build-and-release (push) Successful in 51s
2026-02-17 00:57:07 +01:00
CodeDevMLH
2c907debc8 Enhance video handling: release HTTP connections and manage lazy loading for trailers 2026-02-17 00:56:47 +01:00
CodeDevMLH
7b30f8c9e9 typos [skip ci] 2026-02-16 23:06:45 +01:00
CodeDevMLH
3a90605112 Update manifest.json for release v1.6.5.1 [skip ci] 2026-02-16 21:49:25 +00:00
CodeDevMLH
5772d670ff Bump version to 1.6.5.1
All checks were successful
Auto Release Plugin / build-and-release (push) Successful in 53s
2026-02-16 22:48:33 +01:00
CodeDevMLH
e558594c52 Enhance seasonal section layout and adjust input field width in configuration 2026-02-16 22:48:14 +01:00
4 changed files with 100 additions and 32 deletions

View File

@@ -146,7 +146,7 @@
Example: Example:
<code>https://your-jellyfin-url/web/#/details?id=<b style="color:red;">your-item-id</b>&serverId=your-server-id</code><br><br> <code>https://your-jellyfin-url/web/#/details?id=<b style="color:red;">your-item-id</b>&serverId=your-server-id</code><br><br>
You can also insert a name of a collection or playlist to fetch the IDs of all items in You can also insert a name of a collection or playlist to fetch the IDs of all items in
it (will take the first hit.<br><b>Note:</b> there is currently no feedback if the name it (will take the first hit.<br><b>Note:</b> There is currently no feedback if the name
resolution succeeded, you will have to look if the bar displays the correct items). resolution succeeded, you will have to look if the bar displays the correct items).
</p> </p>
</div> </div>
@@ -167,7 +167,7 @@
<div style="background-color: rgba(255, 255, 255, 0.05); border-left: 4px solid #00a4dc; border-radius: 4px; padding: 1em 1.5em; margin: 1.5em 0; display: flex; align-items: center; gap: 1em;"> <div style="background-color: rgba(255, 255, 255, 0.05); border-left: 4px solid #00a4dc; border-radius: 4px; padding: 1em 1.5em; margin: 1.5em 0; display: flex; align-items: center; gap: 1em;">
<i class="material-icons" style="color: #00a4dc; font-size: 24px;">info</i> <i class="material-icons" style="color: #00a4dc; font-size: 24px;">info</i>
<div>Define rules to automatically select a seasonal selection of items based on the date. Rules are evaluated from top to bottom. The first matching rule wins.</div> <div>Define seasonal rules to automatically select a selection of items based on the date. Rules are evaluated from top to bottom. The first matching rule wins.</div>
</div> </div>
<div id="seasonalSectionsList"></div> <div id="seasonalSectionsList"></div>
@@ -449,7 +449,7 @@
ApiClient.getPluginConfiguration(MediaBarEnhancedConfigurationPage.pluginId).then(function (config) { ApiClient.getPluginConfiguration(MediaBarEnhancedConfigurationPage.pluginId).then(function (config) {
var keys = [ var keys = [
'MediaBarIsEnabled', 'ShuffleInterval', 'RetryInterval', 'MinSwipeDistance', 'ShuffleInterval', 'RetryInterval', 'MinSwipeDistance',
'LoadingCheckInterval', 'MaxPlotLength', 'MaxMovies', 'MaxTvShows', 'LoadingCheckInterval', 'MaxPlotLength', 'MaxMovies', 'MaxTvShows',
'MaxItems', 'PreloadCount', 'FadeTransitionDuration', 'MaxPaginationDots', 'MaxItems', 'PreloadCount', 'FadeTransitionDuration', 'MaxPaginationDots',
'SlideAnimationEnabled', 'EnableVideoBackdrop', 'UseSponsorBlock', 'SlideAnimationEnabled', 'EnableVideoBackdrop', 'UseSponsorBlock',
@@ -462,6 +462,12 @@
'IncludeWatchedContent' 'IncludeWatchedContent'
]; ];
// Manual mapping for MediaBarIsEnabled -> IsEnabled, to avoid conflicts with other plugins
var mediaBarEnabledCheckbox = page.querySelector('#MediaBarIsEnabled');
if (mediaBarEnabledCheckbox) {
mediaBarEnabledCheckbox.checked = config.IsEnabled;
}
keys.forEach(function (key) { keys.forEach(function (key) {
var el = page.querySelector('#' + key); var el = page.querySelector('#' + key);
if (el) { if (el) {
@@ -539,8 +545,15 @@
if (seasonalInput) seasonalInput.value = sectionsJson; if (seasonalInput) seasonalInput.value = sectionsJson;
var config = {}; var config = {};
// Manual mapping for MediaBarIsEnabled -> IsEnabled, to avoid conflicts with other plugins
var mediaBarEnabledCheckbox = page.querySelector('#MediaBarIsEnabled');
if (mediaBarEnabledCheckbox) {
config.IsEnabled = mediaBarEnabledCheckbox.checked;
}
var keys = [ var keys = [
'MediaBarIsEnabled', 'ShuffleInterval', 'RetryInterval', 'MinSwipeDistance', 'ShuffleInterval', 'RetryInterval', 'MinSwipeDistance',
'LoadingCheckInterval', 'MaxPlotLength', 'MaxMovies', 'MaxTvShows', 'LoadingCheckInterval', 'MaxPlotLength', 'MaxMovies', 'MaxTvShows',
'MaxItems', 'PreloadCount', 'FadeTransitionDuration', 'MaxPaginationDots', 'MaxItems', 'PreloadCount', 'FadeTransitionDuration', 'MaxPaginationDots',
'SlideAnimationEnabled', 'EnableVideoBackdrop', 'UseSponsorBlock', 'SlideAnimationEnabled', 'EnableVideoBackdrop', 'UseSponsorBlock',
@@ -627,7 +640,7 @@
' </div>' + ' </div>' +
' </div>' + ' </div>' +
' <div class="inputContainer">' + ' <div class="inputContainer">' +
' <input is="emby-input" type="text" class="emby-input section-name" value="' + (data.Name || '') + '" />' + ' <input is="emby-input" type="text" class="emby-input section-name" style="width: 60%;" value="' + (data.Name || '') + '" />' +
' <div class="fieldDescription">Name of the season</div>' + ' <div class="fieldDescription">Name of the season</div>' +
' </div>' + ' </div>' +
'</div>' + '</div>' +

View File

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

View File

@@ -63,6 +63,7 @@ const CONFIG = {
sortOrder: "Ascending", sortOrder: "Ascending",
applyLimitsToCustomIds: false, applyLimitsToCustomIds: false,
seasonalSections: "[]", seasonalSections: "[]",
isEnabled: true,
}; };
// State management // State management
@@ -1638,6 +1639,7 @@ const SlideCreator = {
"data-item-id": itemId, "data-item-id": itemId,
}); });
let videoBackdrop;
let backdrop; let backdrop;
let isVideo = false; let isVideo = false;
let trailerUrl = null; let trailerUrl = null;
@@ -1721,7 +1723,7 @@ const SlideCreator = {
// Create container for YouTube API // Create container for YouTube API
const videoClass = CONFIG.fullWidthVideo ? "video-backdrop-full" : "video-backdrop-default"; const videoClass = CONFIG.fullWidthVideo ? "video-backdrop-full" : "video-backdrop-default";
backdrop = SlideUtils.createElement("div", { videoBackdrop = SlideUtils.createElement("div", {
className: `backdrop video-backdrop ${videoClass}`, className: `backdrop video-backdrop ${videoClass}`,
id: `youtube-player-${itemId}` id: `youtube-player-${itemId}`
}); });
@@ -1853,22 +1855,23 @@ const SlideCreator = {
} else if (!isYoutube) { } else if (!isYoutube) {
isVideo = true; isVideo = true;
const videoSrc = (typeof trailerUrl === 'object' ? trailerUrl.url : trailerUrl);
const videoAttributes = { const videoAttributes = {
className: "backdrop video-backdrop", className: "backdrop video-backdrop",
src: (typeof trailerUrl === 'object' ? trailerUrl.url : trailerUrl), preload: "none",
preload: "auto",
disablePictureInPicture: true, 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;"
}; };
videoAttributes.muted = ""; videoAttributes.muted = "";
backdrop = SlideUtils.createElement("video", videoAttributes); videoBackdrop = SlideUtils.createElement("video", videoAttributes);
backdrop.volume = 0.4; videoBackdrop.volume = 0.4;
STATE.slideshow.videoPlayers[itemId] = backdrop; STATE.slideshow.videoPlayers[itemId] = videoBackdrop;
backdrop.addEventListener('play', (event) => { videoBackdrop.addEventListener('play', (event) => {
const slide = document.querySelector(`.slide[data-item-id="${itemId}"]`); const slide = document.querySelector(`.slide[data-item-id="${itemId}"]`);
if (!slide || !slide.classList.contains('active')) { if (!slide || !slide.classList.contains('active')) {
console.log(`Local video ${itemId} started playing but slide is not active, pausing.`); console.log(`Local video ${itemId} started playing but slide is not active, pausing.`);
@@ -1881,14 +1884,14 @@ const SlideCreator = {
} }
}); });
backdrop.addEventListener('ended', (event) => { videoBackdrop.addEventListener('ended', (event) => {
const slide = event.target.closest('.slide'); const slide = event.target.closest('.slide');
if (slide && slide.classList.contains('active')) { if (slide && slide.classList.contains('active')) {
SlideshowManager.nextSlide(); SlideshowManager.nextSlide();
} }
}); });
backdrop.addEventListener('error', (event) => { videoBackdrop.addEventListener('error', (event) => {
console.warn(`Local video error for item ${itemId}`); console.warn(`Local video error for item ${itemId}`);
const slide = event.target.closest('.slide'); const slide = event.target.closest('.slide');
if (slide && slide.classList.contains('active')) { if (slide && slide.classList.contains('active')) {
@@ -1898,13 +1901,18 @@ const SlideCreator = {
} }
} }
if (!isVideo) { // Always create a static backdrop image (to show while video loads or if no video)
backdrop = SlideUtils.createElement("img", { backdrop = SlideUtils.createElement("img", {
className: "backdrop high-quality", className: "backdrop high-quality",
src: this.buildImageUrl(item, "Backdrop", 0, serverAddress, 60), src: this.buildImageUrl(item, "Backdrop", 0, serverAddress, 60),
alt: LocalizationUtils.getLocalizedString('Backdrop', 'Backdrop'), alt: LocalizationUtils.getLocalizedString('Backdrop', 'Backdrop'),
loading: "eager", loading: "eager",
}); });
// If video, static backdrop should be strictly a background (no animation)
if (isVideo) {
backdrop.style.animation = "none";
backdrop.style.transition = "none";
} }
const backdropOverlay = SlideUtils.createElement("div", { const backdropOverlay = SlideUtils.createElement("div", {
@@ -1914,8 +1922,14 @@ const SlideCreator = {
const backdropContainer = SlideUtils.createElement("div", { const backdropContainer = SlideUtils.createElement("div", {
className: "backdrop-container" + (isVideo && CONFIG.fullWidthVideo ? " full-width-video" : ""), className: "backdrop-container" + (isVideo && CONFIG.fullWidthVideo ? " full-width-video" : ""),
}); });
backdropContainer.append(backdrop, backdropOverlay); backdropContainer.append(backdrop, backdropOverlay);
// If video exists, append on top of static backdrop
if (isVideo && videoBackdrop) {
backdropContainer.appendChild(videoBackdrop);
}
const logo = SlideUtils.createElement("img", { const logo = SlideUtils.createElement("img", {
className: "logo high-quality", className: "logo high-quality",
src: this.buildImageUrl(item, "Logo", undefined, serverAddress, 40), src: this.buildImageUrl(item, "Logo", undefined, serverAddress, 40),
@@ -2356,7 +2370,7 @@ const SlideshowManager = {
currentSlide.classList.add("active"); currentSlide.classList.add("active");
// Manage Video Playback: Stop others, Play current // Manage Video Playback: Stop others, Play current
// 1. Stop all other YouTube players and local video elements // 1. Stop all other YouTube players and local video elements, release connections
if (STATE.slideshow.videoPlayers) { if (STATE.slideshow.videoPlayers) {
Object.keys(STATE.slideshow.videoPlayers).forEach(id => { Object.keys(STATE.slideshow.videoPlayers).forEach(id => {
if (id !== currentItemId) { if (id !== currentItemId) {
@@ -2366,11 +2380,17 @@ const SlideshowManager = {
if (typeof p.pauseVideo === 'function') { if (typeof p.pauseVideo === 'function') {
p.pauseVideo(); p.pauseVideo();
} }
// HTML5 <video> element (local trailers) // HTML5 <video> element (local trailers), release HTTP connection
if (p instanceof HTMLVideoElement) { if (p instanceof HTMLVideoElement) {
p.pause(); p.pause();
p.muted = true; p.muted = true;
p.currentTime = 0; 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();
} }
} }
}); });
@@ -2407,6 +2427,12 @@ const SlideshowManager = {
if (videoBackdrop) { if (videoBackdrop) {
if (videoBackdrop.tagName === 'VIDEO') { if (videoBackdrop.tagName === 'VIDEO') {
// Restore src from data-src if it was deactivated to release connections
const lazySrc = videoBackdrop.getAttribute('data-src');
if (lazySrc && !videoBackdrop.src) {
videoBackdrop.src = lazySrc;
}
videoBackdrop.currentTime = 0; videoBackdrop.currentTime = 0;
videoBackdrop.muted = STATE.slideshow.isMuted; videoBackdrop.muted = STATE.slideshow.isMuted;
@@ -2605,7 +2631,7 @@ const SlideshowManager = {
*/ */
pruneSlideCache() { pruneSlideCache() {
const currentIndex = STATE.slideshow.currentSlideIndex; const currentIndex = STATE.slideshow.currentSlideIndex;
const keepRange = 5; const keepRange = CONFIG.preloadCount + 1;
let prunedAny = false; let prunedAny = false;
Object.keys(STATE.slideshow.createdSlides).forEach((itemId) => { Object.keys(STATE.slideshow.createdSlides).forEach((itemId) => {
@@ -2623,7 +2649,17 @@ const SlideshowManager = {
if (STATE.slideshow.videoPlayers[itemId]) { if (STATE.slideshow.videoPlayers[itemId]) {
const player = STATE.slideshow.videoPlayers[itemId]; const player = STATE.slideshow.videoPlayers[itemId];
if (typeof player.destroy === 'function') { if (typeof player.destroy === 'function') {
// YouTube player
player.destroy(); player.destroy();
} else if (player instanceof HTMLVideoElement) {
// HTML5 video, release HTTP streaming connection
player.pause();
// Save src to data-src and release the HTTP streaming connection
if (player.src && !player.getAttribute('data-src')) {
player.setAttribute('data-src', player.src);
}
player.removeAttribute('src');
player.load();
} }
delete STATE.slideshow.videoPlayers[itemId]; delete STATE.slideshow.videoPlayers[itemId];
} }
@@ -2802,7 +2838,7 @@ const SlideshowManager = {
}); });
} }
// 2. Stop and mute all HTML5 videos // 2. Stop and mute all HTML5 videos, release connections
const container = document.getElementById("slides-container"); const container = document.getElementById("slides-container");
if (container) { if (container) {
container.querySelectorAll('video').forEach(video => { container.querySelectorAll('video').forEach(video => {
@@ -2810,6 +2846,12 @@ const SlideshowManager = {
video.pause(); video.pause();
video.muted = true; video.muted = true;
video.currentTime = 0; video.currentTime = 0;
// Save src and release HTTP streaming connection
if (video.src && !video.getAttribute('data-src')) {
video.setAttribute('data-src', video.src);
}
video.removeAttribute('src');
video.load();
} catch (e) { } catch (e) {
console.warn("Error stopping HTML5 video:", e); console.warn("Error stopping HTML5 video:", e);
} }
@@ -2842,9 +2884,14 @@ const SlideshowManager = {
return; return;
} }
// HTML5 video: just resume, don't reset currentTime // HTML5 video: restore src if needed, then resume
const html5Video = currentSlide.querySelector('video.video-backdrop'); const html5Video = currentSlide.querySelector('video.video-backdrop');
if (html5Video) { if (html5Video) {
// Restore src from data-src if it was cleared to release connections
const lazySrc = html5Video.getAttribute('data-src');
if (lazySrc && !html5Video.src) {
html5Video.src = lazySrc;
}
html5Video.muted = STATE.slideshow.isMuted; html5Video.muted = STATE.slideshow.isMuted;
if (!STATE.slideshow.isMuted) html5Video.volume = 0.4; if (!STATE.slideshow.isMuted) html5Video.volume = 0.4;
html5Video.play().catch(e => console.warn("Error resuming HTML5 video:", e)); html5Video.play().catch(e => console.warn("Error resuming HTML5 video:", e));

View File

@@ -9,12 +9,20 @@
"imageUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/raw/branch/main/logo.png", "imageUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/raw/branch/main/logo.png",
"versions": [ "versions": [
{ {
"version": "1.6.5.0", "version": "1.6.6.0",
"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"
},
{
"version": "1.6.5.2",
"changelog": "- refactored seasonal UI settings", "changelog": "- refactored seasonal UI settings",
"targetAbi": "10.11.0.0", "targetAbi": "10.11.0.0",
"sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.6.5.0/Jellyfin.Plugin.MediaBarEnhanced.zip", "sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.6.5.2/Jellyfin.Plugin.MediaBarEnhanced.zip",
"checksum": "378a8465c281c315ed6ad0e683da4755", "checksum": "552cb3376c77ede5a0664ced56bf7d1e",
"timestamp": "2026-02-16T18:38:40Z" "timestamp": "2026-02-16T23:57:57Z"
}, },
{ {
"version": "1.6.4.1", "version": "1.6.4.1",