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

Add configuration options for local backdrops and randomization features

Browse Source
This commit is contained in:
CodeDevMLH
2026-02-15 00:31:01 +01:00
parent a4b39ae3bf
commit 619d8533d2
3 changed files with 110 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
Jellyfin.Plugin.MediaBarEnhanced/Configuration/PluginConfiguration.cs
View File

@@ -22,6 +22,9 @@ namespace Jellyfin.Plugin.MediaBarEnhanced.Configuration
public bool EnableVideoBackdrop { get; set; } = true;
public bool UseSponsorBlock { get; set; } = true;
public bool PreferLocalTrailers { get; set; } = false;
public bool RandomizeLocalTrailers { get; set; } = false;
public bool PreferLocalBackdrops { get; set; } = false;
public bool RandomizeThemeVideos { get; set; } = false;
public bool WaitForTrailerToEnd { get; set; } = true;
public bool StartMuted { get; set; } = true;
public bool FullWidthVideo { get; set; } = true;

33
Jellyfin.Plugin.MediaBarEnhanced/Configuration/configPage.html
View File

@@ -65,6 +65,14 @@
</label>
<div class="fieldDescription">If enabled, local trailers will be preferred over remote (YouTube) trailers.</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription" id="PreferLocalBackdropsContainer">
<label>
<input is="emby-checkbox" type="checkbox" id="PreferLocalBackdrops"
name="PreferLocalBackdrops" />
<span>Prefer Local Backdrops / Theme Videos</span>
</label>
<div class="fieldDescription">If enabled, local backdrop videos (Theme Videos) will be preferred over trailers.</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label>
<input is="emby-checkbox" type="checkbox" id="WaitForTrailerToEnd"
@@ -187,6 +195,22 @@
<div class="fieldDescription">If enabled, users will see a media bar icon in the header to
override settings (like disabling the bar or trailer backdrops) locally on their device.</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label>
<input is="emby-checkbox" type="checkbox" id="RandomizeThemeVideos"
name="RandomizeThemeVideos" />
<span>Randomize Backdrop Video</span>
</label>
<div class="fieldDescription">If enabled, a random video from the backdrops/theme videos will be selected instead of the first one.</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label>
<input is="emby-checkbox" type="checkbox" id="RandomizeLocalTrailers"
name="RandomizeLocalTrailers" />
<span>Randomize Local Trailer</span>
</label>
<div class="fieldDescription">If enabled, a random local trailer will be selected instead of the first one (if multiple exist).</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label>
<input is="emby-checkbox" type="checkbox" id="UseSponsorBlock" name="UseSponsorBlock" />
@@ -419,7 +443,8 @@
'ShowTrailerButton', 'AlwaysShowArrows', 'EnableKeyboardControls',
'EnableCustomMediaIds', 'CustomMediaIds', 'EnableLoadingScreen',
'EnableSeasonalContent', 'EnableClientSideSettings', 'SortBy', 'SortOrder',
'PreferLocalTrailers', 'ApplyLimitsToCustomIds', 'SeasonalSections'
'PreferLocalTrailers', 'ApplyLimitsToCustomIds', 'SeasonalSections',
'PreferLocalBackdrops', 'RandomizeThemeVideos', 'RandomizeLocalTrailers'
];
keys.forEach(function (key) {
@@ -470,12 +495,15 @@
// Handle Prefer Local Trailers visibility
var enableVideoBackdropCheckbox = page.querySelector('#EnableVideoBackdrop');
var preferLocalContainer = page.querySelector('#PreferLocalTrailersContainer');
var preferLocalBackdropsContainer = page.querySelector('#PreferLocalBackdropsContainer');
function updatePreferLocalVisibility() {
if (enableVideoBackdropCheckbox && enableVideoBackdropCheckbox.checked) {
if (preferLocalContainer) preferLocalContainer.style.display = 'block';
if (preferLocalBackdropsContainer) preferLocalBackdropsContainer.style.display = 'block';
} else {
if (preferLocalContainer) preferLocalContainer.style.display = 'none';
if (preferLocalBackdropsContainer) preferLocalBackdropsContainer.style.display = 'none';
}
}
@@ -505,7 +533,8 @@
'ShowTrailerButton', 'AlwaysShowArrows', 'EnableKeyboardControls',
'EnableCustomMediaIds', 'CustomMediaIds', 'EnableLoadingScreen',
'EnableSeasonalContent', 'EnableClientSideSettings', 'SortBy', 'SortOrder',
'PreferLocalTrailers', 'ApplyLimitsToCustomIds', 'SeasonalSections'
'PreferLocalTrailers', 'ApplyLimitsToCustomIds', 'SeasonalSections',
'PreferLocalBackdrops', 'RandomizeThemeVideos', 'RandomizeLocalTrailers'
];
keys.forEach(function (key) {

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

@@ -42,6 +42,9 @@ const CONFIG = {
enableVideoBackdrop: true,
useSponsorBlock: true,
preferLocalTrailers: false,
randomizeLocalTrailers: false,
preferLocalBackdrops: false,
randomizeThemeVideos: false,
waitForTrailerToEnd: true,
startMuted: true,
fullWidthVideo: true,
@@ -1371,20 +1374,68 @@ const ApiUtils = {
return null;
}
const trailers = await response.json();
if (trailers && trailers.length > 0) {
const trailer = trailers[0];
const mediaSourceId = trailer.MediaSources && trailer.MediaSources[0] ? trailer.MediaSources[0].Id : trailer.Id;
// Return object with ID and URL
return {
id: trailer.Id,
url: `${STATE.jellyfinData.serverAddress}/Videos/${trailer.Id}/stream.mp4?Static=true&mediaSourceId=${mediaSourceId}&api_key=${STATE.jellyfinData.accessToken}`
};
const trailers = await response.json();
if (trailers && trailers.length > 0) {
let trailer;
if (CONFIG.randomizeLocalTrailers && trailers.length > 1) {
const randomIndex = Math.floor(Math.random() * trailers.length);
trailer = trailers[randomIndex];
console.log(`Using random local trailer (${randomIndex + 1}/${trailers.length}) for ${itemId}: ${trailer.Name}`);
} else {
trailer = trailers[0];
}
const mediaSourceId = trailer.MediaSources && trailer.MediaSources[0] ? trailer.MediaSources[0].Id : trailer.Id;
return {
id: trailer.Id,
url: `${STATE.jellyfinData.serverAddress}/Videos/${trailer.Id}/stream.mp4?mediaSourceId=${mediaSourceId}&api_key=${STATE.jellyfinData.accessToken}`
};
}
return null;
} catch (error) {
console.error(`Error fetching local trailer for ${itemId}:`, error);
return null;
}
},
/**
* Fetches theme videos for an item
* @param {string} itemId - Item ID
* @returns {Promise<Object|null>} Theme video data object {id, url} or null
*/
async fetchThemeVideos(itemId) {
try {
const response = await fetch(
`${STATE.jellyfinData.serverAddress}/Items/${itemId}/ThemeVideos?userId=${STATE.jellyfinData.userId}`,
{ headers: this.getAuthHeaders() }
);
if (response.ok) {
const data = await response.json();
const items = Array.isArray(data) ? data : (data.Items || []);
if (items.length > 0) {
let video;
if (CONFIG.randomizeThemeVideos && items.length > 1) {
const randomIndex = Math.floor(Math.random() * items.length);
video = items[randomIndex];
console.log(`Found Theme Video (Random ${randomIndex + 1}/${items.length}) via ThemeVideos endpoint: ${video.Name} (${video.Id})`);
} else {
video = items[0];
console.log(`Found Theme Video (First) via ThemeVideos endpoint: ${video.Name} (${video.Id})`);
}
return {
id: video.Id,
url: `${STATE.jellyfinData.serverAddress}/Videos/${video.Id}/stream.mp4?api_key=${STATE.jellyfinData.accessToken}`
};
}
}
return null;
} catch (error) {
console.error(`Error fetching local trailer for ${itemId}:`, error);
console.error(`Error fetching theme videos for ${itemId}:`, error);
return null;
}
}
@@ -1603,24 +1654,29 @@ const SlideCreator = {
trailerUrl = {
id: videoId,
url: `${STATE.jellyfinData.serverAddress}/Videos/${videoId}/stream.mp4?Static=true&api_key=${STATE.jellyfinData.accessToken}`
url: `${STATE.jellyfinData.serverAddress}/Videos/${videoId}/stream.mp4?api_key=${STATE.jellyfinData.accessToken}`
};
} else {
// Assume it's a standard URL (YouTube, etc.)
trailerUrl = customValue;
console.log(`Using custom trailer URL for ${itemId}: ${trailerUrl}`);
}
}
// 1b. Check Theme Video if preferred (Local Backdrop)
else if (CONFIG.preferLocalBackdrops && item.themeVideoUrl) {
trailerUrl = item.themeVideoUrl;
console.log(`Using theme video (local backdrop) for ${itemId}: ${trailerUrl.url || trailerUrl}`);
}
// 1b. Check Local Trailer if preferred
// 1c. Check Local Trailer if preferred
else if (CONFIG.preferLocalTrailers && item.LocalTrailerCount > 0 && item.localTrailerUrl) {
trailerUrl = item.localTrailerUrl;
console.log(`Using local trailer for ${itemId}: ${trailerUrl}`);
}
// 1c. Fallback to Remote Trailer
// 1d. Fallback to Remote Trailer
else if (item.RemoteTrailers && item.RemoteTrailers.length > 0) {
trailerUrl = item.RemoteTrailers[0].Url;
}
// 1d. Final Fallback to Local Trailer (even if not preferred)
// 1e. Final Fallback to Local Trailer (even if not preferred)
else if (item.LocalTrailerCount > 0 && item.localTrailerUrl) {
trailerUrl = item.localTrailerUrl;
console.log(`Using local trailer fallback for ${itemId}: ${trailerUrl}`);
@@ -2170,6 +2226,11 @@ const SlideCreator = {
item.localTrailerUrl = await ApiUtils.fetchLocalTrailer(itemId);
}
// Pre-fetch theme video URL if needed
if (CONFIG.preferLocalBackdrops) {
item.themeVideoUrl = await ApiUtils.fetchThemeVideos(itemId);
}
const slideElement = this.createSlideElement(
item,
item.Type === "Movie" ? "Movie" : "TV Show"