Compare commits
122 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
2bc7d90254 | ||
|
|
3f302d4c64 | ||
|
|
13a1cc7885 | ||
|
|
a62900f96e | ||
|
|
9d90a29a40 | ||
|
|
cd3973088e | ||
|
|
4112cfad4a | ||
|
|
2618b18df1 | ||
|
|
ef378c5e87 | ||
|
|
b8d0dd9f1a | ||
|
|
d7c44061cb | ||
|
|
9acb05d19e | ||
|
|
619d8533d2 | ||
|
|
a4b39ae3bf | ||
|
|
74a367584b | ||
|
|
06407f9121 | ||
|
|
0926493391 | ||
|
|
6dbb33be96 | ||
|
|
211d9d316a | ||
|
|
329733246d | ||
|
|
6110e1cdd8 | ||
|
|
31c8a209a5 | ||
|
|
ad2e761bbd | ||
|
|
85f90e8fbb | ||
|
|
9f5f607168 | ||
|
|
108a644983 | ||
|
|
ab778f774f | ||
|
|
5dcb60487e | ||
|
|
9a6997f1da | ||
|
|
31d315ed8f | ||
|
|
2b1301ea0b | ||
|
|
ee8c0b8888 | ||
|
|
64ef4915b8 | ||
|
|
1f655ed7b6 | ||
|
|
0682967591 | ||
|
|
7938728f8e | ||
|
|
a0773c66eb | ||
|
|
10f2a38add | ||
|
|
9bfa3ba5ea | ||
|
|
5c00c07b8a | ||
|
|
773c49a228 | ||
|
|
41a309e0d1 | ||
|
|
43797fbb98 | ||
|
|
f13a1ba1af | ||
|
|
d489c22f28 | ||
|
|
7816c87543 | ||
|
|
720567bafc | ||
|
|
2289a1f83e | ||
|
|
a269318f58 | ||
|
|
fdb409fd3b | ||
|
|
9bb4b9d355 | ||
|
|
1e18c22937 | ||
|
|
a83913d15c | ||
|
|
2f50931beb | ||
|
|
5b14bdba35 | ||
|
|
9ba3b1e49f | ||
|
|
bf7c7fb8e8 | ||
|
|
39e29046de | ||
|
|
18260f8eac | ||
|
|
59c07f3c45 | ||
|
|
b06d1e9375 | ||
|
|
e5bf23a7bc | ||
|
|
0d7113969b | ||
|
|
f69f676a68 | ||
|
|
f448c89ef2 | ||
|
|
daf26fe53a | ||
|
|
26ef307838 | ||
|
|
c296483583 | ||
|
|
7992e20715 | ||
|
|
1ae59f5da5 | ||
|
|
92eaf91173 | ||
|
|
e7410ec22a | ||
|
|
bb43d1e679 | ||
|
|
b6609d23a2 | ||
|
|
9d4cbf37d3 | ||
|
|
b5e63ef3b7 | ||
|
|
22f9906188 | ||
|
|
ae54ab41a8 | ||
|
|
9663ab78d2 | ||
|
|
f633e4273f | ||
|
|
c0895fd8d7 | ||
|
|
002ccdb08b | ||
|
|
7cb03410ee | ||
|
|
17c8681e93 | ||
|
|
3a4c663c0e | ||
|
|
3385196611 | ||
|
|
2538556f7c | ||
|
|
550ebed942 | ||
|
|
21d55711d4 | ||
|
|
81a0d375be | ||
|
|
23cbc0a85a | ||
|
|
2de066cca8 | ||
|
|
138e50ff15 | ||
|
|
bf72dc08a3 | ||
|
|
65a63b4aa0 | ||
|
|
a1df756c56 | ||
|
|
f2d383ec61 | ||
|
|
b85f52d8d3 | ||
|
|
ad18acb011 | ||
|
|
2ae147ac01 | ||
|
|
9896044988 | ||
|
|
93e91e2e60 | ||
|
|
b613b028d0 | ||
|
|
9906784845 | ||
|
|
009a3c4720 | ||
|
|
595056230a | ||
|
|
b18060dfd7 | ||
|
|
ebb2af9d24 | ||
|
|
743af20b8e | ||
|
|
9844b186d7 | ||
|
|
104b76aa41 | ||
|
|
7493c8fa93 | ||
|
|
77c03157a1 | ||
|
|
a7929e1ff6 | ||
|
|
c78e07de62 | ||
|
|
a90f805ea8 | ||
|
|
ccba1857e1 | ||
|
|
ff56c9370b | ||
|
|
162600c43f | ||
|
|
a21549af47 | ||
|
|
1b319ade40 | ||
|
|
75757d67e7 |
@@ -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;
|
||||
@@ -34,8 +37,11 @@ namespace Jellyfin.Plugin.MediaBarEnhanced.Configuration
|
||||
public bool EnableCustomMediaIds { get; set; } = true;
|
||||
public string PreferredVideoQuality { get; set; } = "Auto";
|
||||
public bool EnableSeasonalContent { get; set; } = false;
|
||||
public string SeasonalSections { get; set; } = "[]";
|
||||
public bool IsEnabled { get; set; } = true;
|
||||
public bool EnableClientSideSettings { get; set; } = false;
|
||||
public bool ApplyLimitsToCustomIds { get; set; } = false;
|
||||
public bool IncludeWatchedContent { get; set; } = false;
|
||||
public string SortBy { get; set; } = "Random";
|
||||
public string SortOrder { get; set; } = "Ascending";
|
||||
}
|
||||
|
||||
@@ -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"
|
||||
@@ -94,6 +102,7 @@
|
||||
|
||||
<!-- CUSTOM CONTENT TAB -->
|
||||
<div id="custom" class="tab-content" style="display:none;">
|
||||
<!-- Default Custom Media IDs -->
|
||||
<h2 class="sectionTitle">Custom Media IDs</h2>
|
||||
<div class="checkboxContainer checkboxContainer-withDescription">
|
||||
<label>
|
||||
@@ -101,61 +110,68 @@
|
||||
name="EnableCustomMediaIds" />
|
||||
<span>Enable Custom Media IDs</span>
|
||||
</label>
|
||||
<div class="fieldDescription">If enabled, the slideshow will try to show the items listed
|
||||
below. If the list is empty, default behavior (random items) is used. Disable this
|
||||
to temporarily ignore your custom list without deleting it.</div>
|
||||
<div class="fieldDescription">If enabled, the slideshow will show the items listed
|
||||
below as the default content. If the list is empty, random items from your library are used.</div>
|
||||
</div>
|
||||
<div class="checkboxContainer checkboxContainer-withDescription">
|
||||
<label>
|
||||
<input is="emby-checkbox" type="checkbox" id="ApplyLimitsToCustomIds"
|
||||
name="ApplyLimitsToCustomIds" />
|
||||
<span>Apply Limits to Custom IDs</span>
|
||||
</label>
|
||||
<div class="fieldDescription">If enabled, the Max Items limit (Advanced → Content Limits) will also apply to Custom Media IDs and Collections. By default, custom lists are not limited.</div>
|
||||
</div>
|
||||
<div id="customMediaIdsContainer">
|
||||
<div class="inputContainer">
|
||||
<label class="inputLabel inputLabelUnfocused" for="CustomMediaIds">Default Media/Collection/Playlist IDs (Newline or Comma-separated)</label>
|
||||
<textarea class="emby-textarea" is="emby-textarea" id="CustomMediaIds" name="CustomMediaIds"
|
||||
style="width: 100%; height: 150px; font-family: monospace;"></textarea>
|
||||
<div class="fieldDescription">Enter the IDs of the items you want to show in the slideshow as your default content. You can separate them by new line or comma.
|
||||
<br><br>
|
||||
<b>Manual Trailer/Video Override:</b> You can specify a YouTube URL <b>OR</b> a Jellyfin Item ID (e.g. for a Theme Video) for an item by adding it in
|
||||
brackets: <br> <code>e.g. ID DESCRIPTION [https://youtu.be/...]</code> or <code>ID [JellyfinItemId] DESCRIPTION</code>.
|
||||
<br>
|
||||
Methods:
|
||||
<ul>
|
||||
<li><b>YouTube URL:</b> Play a remote trailer from YouTube.</li>
|
||||
<li><b>Jellyfin Item ID (GUID):</b> Play the video of another library item (e.g. a Theme Video or Backdrop Video) using the native player.</li>
|
||||
</ul>
|
||||
You can also add a description after the ID using any separator like space, pipe (|) or dash (-): <br>e.g. <code>ID DESCRIPTION</code> or <code>ID | DESCRIPTION</code>
|
||||
<br><br>
|
||||
<b>Note:</b> If using a <b>Collection Name</b> (instead of an ID) combined with a description, you <b>MUST</b> use the pipe (|) separator.
|
||||
<br>
|
||||
<b>Note:</b> The separator <b>MUST NOT</b> be a hex character (0-9, a-f).
|
||||
</div>
|
||||
<p>You can find the IDs of your items in the URL of the item page in the web interface.<br>
|
||||
Example:
|
||||
<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
|
||||
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).
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Seasonal Content -->
|
||||
<h2 class="sectionTitle" style="margin-top: 2em;">Seasonal Content</h2>
|
||||
<div class="checkboxContainer checkboxContainer-withDescription">
|
||||
<label>
|
||||
<input is="emby-checkbox" type="checkbox" id="EnableSeasonalContent"
|
||||
name="EnableSeasonalContent" />
|
||||
<span>Enable Seasonal Content Mode</span>
|
||||
<span>Enable Seasonal Content</span>
|
||||
</label>
|
||||
<div class="fieldDescription">Enable this to define time-based lists in the field below.
|
||||
</div>
|
||||
<div class="fieldDescription">When enabled, seasonal sections below will override the default list or random selection
|
||||
during their active date ranges. If no season matches the current date, the default Custom Media IDs above or random selection are used as fallback.</div>
|
||||
</div>
|
||||
<div class="inputContainer">
|
||||
<label class="inputLabel inputLabelUnfocused" for="CustomMediaIds">Media/Collection/Playlist
|
||||
IDs
|
||||
(Newline or Comma separated)</label>
|
||||
<textarea is="emby-textarea" id="CustomMediaIds" name="CustomMediaIds"
|
||||
style="width: 100%; height: 150px; font-family: monospace;"></textarea>
|
||||
<div class="fieldDescription" id="customMediaIdsDesc">Enter the IDs of the items you want to show in the slideshow.
|
||||
You can separate them by new line or comma.
|
||||
<br><br>
|
||||
<b>Manual Trailer/Video Override:</b> You can specify a YouTube URL <b>OR</b> a Jellyfin Item ID (e.g. for a Theme Video) for an item by adding it in
|
||||
brackets: <br> <code>e.g. ID DESCRIPTION [https://youtu.be/...]</code> or <code>ID [Method] DESCRIPTION</code>.
|
||||
<br>
|
||||
Methods:
|
||||
<ul>
|
||||
<li><b>YouTube URL:</b> Play a remote trailer from YouTube.</li>
|
||||
<li><b>Jellyfin Item ID (GUID):</b> Play the video of another library item (e.g. a Theme Video or Backdrop Video) using the native player.</li>
|
||||
</ul>
|
||||
<br>
|
||||
You can also add a description after the ID using any separator like space, pipe
|
||||
(|) or dash (-): <br>e.g. <code>ID DESCRIPTION</code> or <code>ID | DESCRIPTION</code>
|
||||
<br><br>
|
||||
<b>Note:</b> If using a <b>Collection Name</b> (instead of an ID) combined with a description, you <b>MUST</b> use
|
||||
the pipe (|) separator.
|
||||
<br>
|
||||
<b>Note:</b> The separator <b>MUST NOT</b> be a hex character (0-9, a-f).</div>
|
||||
<div class="fieldDescription" id="seasonalMediaIdsDesc" style="display: none;">
|
||||
<b>Seasonal Mode Enabled:</b> Define lines with date ranges (Format: DD.MM-DD.MM |
|
||||
<i>name</i> | <i>IDs</i>).<br>
|
||||
Example:<br>
|
||||
<code>20.10-31.10 | Halloween | ID1, ID2 [https://youtu.be/...]</code><br>
|
||||
<code>01.12-26.12 | Christmas | ID3, ID4</code><br>
|
||||
<i>Only lines matching the current date will be used. If no line matches, it will try to
|
||||
fetch the list.txt or use random items.</i>
|
||||
</div>
|
||||
<p>You can find the IDs of your items in the URL of the item page in the web interface.<br>
|
||||
Example:
|
||||
<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
|
||||
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.).
|
||||
</p>
|
||||
<div id="seasonalContentContainer" style="display: none;">
|
||||
<div id="seasonalSectionsList"></div>
|
||||
<button is="emby-button" type="button" id="addSeasonBtn" class="raised emby-button"
|
||||
style="margin-top: 1em; display: inline-flex; align-items: center; gap: 0.4em;">
|
||||
<i class="material-icons" style="font-size: 24px;">add</i>
|
||||
<span>Add Season</span>
|
||||
</button>
|
||||
</div>
|
||||
<input type="hidden" id="SeasonalSections" name="SeasonalSections" value="[]" />
|
||||
</div>
|
||||
|
||||
<!-- ADVANCED TAB -->
|
||||
@@ -179,16 +195,32 @@
|
||||
<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 (if multiple exist).</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" />
|
||||
<span>Use SponsorBlock</span>
|
||||
</label>
|
||||
<div class="fieldDescription">Skip intro/outro segments in YouTube trailers.</div>
|
||||
<div class="fieldDescription">Skip intro/outro segments in YouTube trailers (if data is available).</div>
|
||||
</div>
|
||||
<div class="selectContainer">
|
||||
<label class="selectLabel" for="PreferredVideoQuality">Preferred YouTube Quality</label>
|
||||
<select is="emby-select" id="PreferredVideoQuality" name="PreferredVideoQuality" class="selectLayout emby-select-withcolor emby-select">
|
||||
<select is="emby-select" id="PreferredVideoQuality" name="PreferredVideoQuality" class="selectLayout emby-select-withcolor emby-select" style="width: 100%; -webkit-appearance: menulist; appearance: menulist;">
|
||||
<option value="Auto">Auto (Smart)</option>
|
||||
<option value="Maximum">Maximum (4K+)</option>
|
||||
<option value="1080p">1080p</option>
|
||||
@@ -290,7 +322,7 @@
|
||||
<h2 class="sectionTitle">Content Sorting</h2>
|
||||
<div class="selectContainer">
|
||||
<label class="selectLabel" for="SortBy">Sort By</label>
|
||||
<select is="emby-select" id="SortBy" name="SortBy" class="selectLayout emby-select-withcolor emby-select">
|
||||
<select is="emby-select" id="SortBy" name="SortBy" class="selectLayout emby-select-withcolor emby-select" style="width: 100%; -webkit-appearance: menulist; appearance: menulist;">
|
||||
<option value="Random">Random</option>
|
||||
<option value="Original">Original (Custom List Order)</option>
|
||||
<option value="PremiereDate">Premiere Date</option>
|
||||
@@ -304,7 +336,7 @@
|
||||
</div>
|
||||
<div class="selectContainer">
|
||||
<label class="selectLabel" for="SortOrder">Sort Order</label>
|
||||
<select is="emby-select" id="SortOrder" name="SortOrder" class="selectLayout emby-select-withcolor emby-select">
|
||||
<select is="emby-select" id="SortOrder" name="SortOrder" class="selectLayout emby-select-withcolor emby-select" style="width: 100%; -webkit-appearance: menulist; appearance: menulist;">
|
||||
<option value="Ascending">Ascending</option>
|
||||
<option value="Descending">Descending</option>
|
||||
</select>
|
||||
@@ -353,6 +385,14 @@
|
||||
<input is="emby-input" type="number" id="MaxPlotLength" name="MaxPlotLength" />
|
||||
<div class="fieldDescription">Maximum characters for the plot summary.</div>
|
||||
</div>
|
||||
<div class="checkboxContainer checkboxContainer-withDescription">
|
||||
<label>
|
||||
<input is="emby-checkbox" type="checkbox" id="IncludeWatchedContent"
|
||||
name="IncludeWatchedContent" />
|
||||
<span>Include Watched Content</span>
|
||||
</label>
|
||||
<div class="fieldDescription">If enabled, watched content will be included in the random selection results.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
@@ -411,7 +451,9 @@
|
||||
'ShowTrailerButton', 'AlwaysShowArrows', 'EnableKeyboardControls',
|
||||
'EnableCustomMediaIds', 'CustomMediaIds', 'EnableLoadingScreen',
|
||||
'EnableSeasonalContent', 'EnableClientSideSettings', 'SortBy', 'SortOrder',
|
||||
'PreferLocalTrailers'
|
||||
'PreferLocalTrailers', 'ApplyLimitsToCustomIds', 'SeasonalSections',
|
||||
'PreferLocalBackdrops', 'RandomizeThemeVideos', 'RandomizeLocalTrailers',
|
||||
'IncludeWatchedContent'
|
||||
];
|
||||
|
||||
keys.forEach(function (key) {
|
||||
@@ -425,35 +467,52 @@
|
||||
}
|
||||
});
|
||||
|
||||
// Handle Seasonal UI logic
|
||||
var seasonalCheckbox = page.querySelector('#EnableSeasonalContent');
|
||||
var normalDesc = page.querySelector('#customMediaIdsDesc');
|
||||
var seasonalDesc = page.querySelector('#seasonalMediaIdsDesc');
|
||||
// Render Seasonal Sections
|
||||
try {
|
||||
var sections = JSON.parse(config.SeasonalSections || "[]");
|
||||
MediaBarEnhancedConfigurationPage.renderSeasonalSections(page, sections);
|
||||
} catch (e) {
|
||||
console.error("Error parsing SeasonalSections", e);
|
||||
}
|
||||
|
||||
function updateDesc() {
|
||||
if (seasonalCheckbox && seasonalCheckbox.checked) {
|
||||
if (normalDesc) normalDesc.style.display = 'none';
|
||||
if (seasonalDesc) seasonalDesc.style.display = 'block';
|
||||
} else {
|
||||
if (normalDesc) normalDesc.style.display = 'block';
|
||||
if (seasonalDesc) seasonalDesc.style.display = 'none';
|
||||
// Handle Seasonal UI visibility
|
||||
var seasonalCheckbox = page.querySelector('#EnableSeasonalContent');
|
||||
var seasonalContainer = page.querySelector('#seasonalContentContainer');
|
||||
|
||||
function updateSeasonalVisibility() {
|
||||
if (seasonalContainer) {
|
||||
seasonalContainer.style.display = seasonalCheckbox && seasonalCheckbox.checked ? 'block' : 'none';
|
||||
}
|
||||
}
|
||||
|
||||
if (seasonalCheckbox) {
|
||||
seasonalCheckbox.addEventListener('change', updateDesc);
|
||||
updateDesc();
|
||||
seasonalCheckbox.addEventListener('change', updateSeasonalVisibility);
|
||||
updateSeasonalVisibility();
|
||||
}
|
||||
|
||||
// Add Season Button
|
||||
var addSeasonBtn = page.querySelector('#addSeasonBtn');
|
||||
if (addSeasonBtn) {
|
||||
// Remove existing listeners to avoid duplicates if re-attached
|
||||
var newBtn = addSeasonBtn.cloneNode(true);
|
||||
addSeasonBtn.parentNode.replaceChild(newBtn, addSeasonBtn);
|
||||
newBtn.addEventListener('click', function() {
|
||||
MediaBarEnhancedConfigurationPage.addSeasonalSection(page);
|
||||
});
|
||||
}
|
||||
|
||||
// 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';
|
||||
}
|
||||
}
|
||||
|
||||
@@ -468,6 +527,11 @@
|
||||
saveConfiguration: function (page) {
|
||||
Dashboard.showLoadingMsg();
|
||||
|
||||
var sections = MediaBarEnhancedConfigurationPage.getSeasonalSectionsFromUI(page);
|
||||
var sectionsJson = JSON.stringify(sections);
|
||||
var seasonalInput = page.querySelector('#SeasonalSections');
|
||||
if (seasonalInput) seasonalInput.value = sectionsJson;
|
||||
|
||||
var config = {};
|
||||
var keys = [
|
||||
'IsEnabled', 'ShuffleInterval', 'RetryInterval', 'MinSwipeDistance',
|
||||
@@ -478,7 +542,9 @@
|
||||
'ShowTrailerButton', 'AlwaysShowArrows', 'EnableKeyboardControls',
|
||||
'EnableCustomMediaIds', 'CustomMediaIds', 'EnableLoadingScreen',
|
||||
'EnableSeasonalContent', 'EnableClientSideSettings', 'SortBy', 'SortOrder',
|
||||
'PreferLocalTrailers'
|
||||
'PreferLocalTrailers', 'ApplyLimitsToCustomIds', 'SeasonalSections',
|
||||
'PreferLocalBackdrops', 'RandomizeThemeVideos', 'RandomizeLocalTrailers',
|
||||
'IncludeWatchedContent'
|
||||
];
|
||||
|
||||
keys.forEach(function (key) {
|
||||
@@ -495,6 +561,105 @@
|
||||
ApiClient.updatePluginConfiguration(MediaBarEnhancedConfigurationPage.pluginId, config).then(function (result) {
|
||||
Dashboard.processPluginConfigurationUpdateResult(result);
|
||||
});
|
||||
},
|
||||
|
||||
renderSeasonalSections: function(page, sections) {
|
||||
var container = page.querySelector('#seasonalSectionsList');
|
||||
if (!container) return;
|
||||
container.innerHTML = '';
|
||||
sections.forEach(function(section, index) {
|
||||
MediaBarEnhancedConfigurationPage.createSectionElement(container, section, index + 1);
|
||||
});
|
||||
},
|
||||
|
||||
addSeasonalSection: function(page) {
|
||||
var container = page.querySelector('#seasonalSectionsList');
|
||||
if (!container) return;
|
||||
var index = container.children.length + 1;
|
||||
MediaBarEnhancedConfigurationPage.createSectionElement(container, {
|
||||
Name: 'New Season',
|
||||
StartDay: 1, StartMonth: 1,
|
||||
EndDay: 1, EndMonth: 1,
|
||||
MediaIds: ''
|
||||
}, index);
|
||||
},
|
||||
|
||||
createSectionElement: function(container, data, index) {
|
||||
var div = document.createElement('div');
|
||||
div.className = 'seasonal-section';
|
||||
div.style.cssText = 'background: rgba(0,0,0,0.2); padding: 1em; margin-bottom: 1em; border-radius: 4px; border: 1px solid rgba(255,255,255,0.1);';
|
||||
|
||||
var days = [];
|
||||
for(var i=1; i<=31; i++) days.push(i);
|
||||
var months = [
|
||||
{v:1, n:'Jan'}, {v:2, n:'Feb'}, {v:3, n:'Mar'}, {v:4, n:'Apr'},
|
||||
{v:5, n:'May'}, {v:6, n:'Jun'}, {v:7, n:'Jul'}, {v:8, n:'Aug'},
|
||||
{v:9, n:'Sep'}, {v:10, n:'Oct'}, {v:11, n:'Nov'}, {v:12, n:'Dec'}
|
||||
];
|
||||
|
||||
function mkSelect(val, opts, cls) {
|
||||
var h = '<select class="emby-select emby-select-withcolor ' + cls + '" style="width: auto; display: inline-block; margin-right: 5px; -webkit-appearance: menulist; appearance: menulist;">';
|
||||
opts.forEach(function(o) {
|
||||
var v = o.v || o;
|
||||
var n = o.n || o;
|
||||
h += '<option value="'+v+'" ' + (v == val ? 'selected' : '') + '>' + n + '</option>';
|
||||
});
|
||||
h += '</select>';
|
||||
return h;
|
||||
}
|
||||
|
||||
var labelText = 'Season list #' + (index || 1);
|
||||
|
||||
div.innerHTML =
|
||||
'<div class="inputContainer" style="margin-bottom: 0.5em;">' +
|
||||
' <label class="inputLabel" style="font-size: 1.2em; font-weight: bold; margin-bottom:0.5em; display:block;">' + labelText + '</label>' +
|
||||
' <div style="display: flex; align-items: center;">' +
|
||||
' <div style="flex-grow:1;">' +
|
||||
' <input is="emby-input" type="text" class="emby-input section-name" value="' + (data.Name || '') + '" />' +
|
||||
' </div>' +
|
||||
' <button type="button" class="raised emby-button remove-section" style="background: #a94442; min-width: unset; margin-left: 1em;">Remove</button>' +
|
||||
' </div>' +
|
||||
' <div class="fieldDescription">Name of the season</div>' +
|
||||
'</div>' +
|
||||
'<div class="inputContainer" style="margin-bottom: 1em;">' +
|
||||
' <label class="inputLabel" style="margin-bottom:0.5em; display:block;">Active Period</label>' +
|
||||
' <div style="display: flex; align-items: center; flex-wrap: wrap; gap: 0.5em;">' +
|
||||
' <span>From:</span>' +
|
||||
mkSelect(data.StartDay, days, 'start-day') +
|
||||
mkSelect(data.StartMonth, months, 'start-month') +
|
||||
' <span style="margin-left: 1em;">To:</span>' +
|
||||
mkSelect(data.EndDay, days, 'end-day') +
|
||||
mkSelect(data.EndMonth, months, 'end-month') +
|
||||
' </div>' +
|
||||
' <div class="fieldDescription">Date range (inclusive) when this content is active.</div>' +
|
||||
'</div>' +
|
||||
'<div class="inputContainer">' +
|
||||
' <label class="inputLabel" style="margin-bottom:0.5em; display:block;">Media IDs</label>' +
|
||||
' <textarea is="emby-textarea" class="emby-textarea section-ids" style="width: 100%; height: 80px; font-family: monospace;">' + (data.MediaIds || '') + '</textarea>' +
|
||||
' <div class="fieldDescription">Comma-separated or Newline separated list of Movie/Series/Collection IDs to show during this season.<br>Same options available as for the default media IDs.</div>' +
|
||||
'</div>';
|
||||
|
||||
div.querySelector('.remove-section').addEventListener('click', function() {
|
||||
div.remove();
|
||||
});
|
||||
|
||||
container.appendChild(div);
|
||||
},
|
||||
|
||||
getSeasonalSectionsFromUI: function(page) {
|
||||
var sections = [];
|
||||
var els = page.querySelectorAll('.seasonal-section');
|
||||
els.forEach(function(el) {
|
||||
sections.push({
|
||||
Name: el.querySelector('.section-name').value,
|
||||
StartDay: parseInt(el.querySelector('.start-day').value),
|
||||
StartMonth: parseInt(el.querySelector('.start-month').value),
|
||||
EndDay: parseInt(el.querySelector('.end-day').value),
|
||||
EndMonth: parseInt(el.querySelector('.end-month').value),
|
||||
MediaIds: el.querySelector('.section-ids').value
|
||||
});
|
||||
});
|
||||
return sections;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
<!-- <TreatWarningsAsErrors>false</TreatWarningsAsErrors> -->
|
||||
<Title>Jellyfin Media Bar Enhanced Plugin</Title>
|
||||
<Authors>CodeDevMLH</Authors>
|
||||
<Version>1.6.1.2</Version>
|
||||
<Version>1.6.2.3</Version>
|
||||
<RepositoryUrl>https://github.com/CodeDevMLH/jellyfin-plugin-media-bar-enhanced</RepositoryUrl>
|
||||
</PropertyGroup>
|
||||
|
||||
|
||||
@@ -175,6 +175,7 @@
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
pointer-events: auto;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#slides-container[style*="display: none"],
|
||||
@@ -996,13 +997,6 @@
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.layout-tv .video-backdrop {
|
||||
mask-image: linear-gradient(to top,
|
||||
#fff0 2%,
|
||||
rgb(0 0 0 / 0.5) 6%,
|
||||
#000000 8%);
|
||||
-webkit-mask-image: linear-gradient(to top,
|
||||
#fff0 2%,
|
||||
rgb(0 0 0 / 0.5) 6%,
|
||||
#000000 8%);
|
||||
.layout-tv .backdrop-container{
|
||||
top: -5%;
|
||||
}
|
||||
|
||||
@@ -42,6 +42,10 @@ const CONFIG = {
|
||||
enableVideoBackdrop: true,
|
||||
useSponsorBlock: true,
|
||||
preferLocalTrailers: false,
|
||||
randomizeLocalTrailers: false,
|
||||
preferLocalBackdrops: false,
|
||||
randomizeThemeVideos: false,
|
||||
includeWatchedContent: false,
|
||||
waitForTrailerToEnd: true,
|
||||
startMuted: true,
|
||||
fullWidthVideo: true,
|
||||
@@ -57,6 +61,8 @@ const CONFIG = {
|
||||
enableClientSideSettings: false,
|
||||
sortBy: "Random",
|
||||
sortOrder: "Ascending",
|
||||
applyLimitsToCustomIds: false,
|
||||
seasonalSections: "[]",
|
||||
};
|
||||
|
||||
// State management
|
||||
@@ -611,7 +617,8 @@ const SlideUtils = {
|
||||
if (!container) {
|
||||
container = this.createElement("div", {
|
||||
id: "slides-container",
|
||||
className: "noautofocus"
|
||||
className: "noautofocus",
|
||||
tabIndex: "-1"
|
||||
});
|
||||
document.body.appendChild(container);
|
||||
}
|
||||
@@ -1115,8 +1122,11 @@ const ApiUtils = {
|
||||
sortParams += `&sortOrder=${CONFIG.sortOrder}`;
|
||||
}
|
||||
|
||||
// Filter by isPlayed=False unless IncludeWatchedContent is enabled
|
||||
const playedFilter = CONFIG.includeWatchedContent ? '' : '&isPlayed=False';
|
||||
|
||||
const response = await fetch(
|
||||
`${STATE.jellyfinData.serverAddress}/Items?IncludeItemTypes=Movie,Series&Recursive=true&hasOverview=true&imageTypes=Logo,Backdrop&${sortParams}&isPlayed=False&enableUserData=true&Limit=${CONFIG.maxItems}&fields=Id`,
|
||||
`${STATE.jellyfinData.serverAddress}/Items?IncludeItemTypes=Movie,Series&Recursive=true&hasOverview=true&imageTypes=Logo,Backdrop&${sortParams}${playedFilter}&enableUserData=true&Limit=${CONFIG.maxItems}&fields=Id`,
|
||||
{
|
||||
headers: this.getAuthHeaders(),
|
||||
}
|
||||
@@ -1255,9 +1265,20 @@ const ApiUtils = {
|
||||
*/
|
||||
async fetchSponsorBlockData(videoId) {
|
||||
if (!CONFIG.useSponsorBlock) return { intro: null, outro: null };
|
||||
|
||||
// Return cached result if available
|
||||
if (!this._sponsorBlockCache) this._sponsorBlockCache = {};
|
||||
if (this._sponsorBlockCache[videoId]) {
|
||||
return this._sponsorBlockCache[videoId];
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`https://sponsor.ajay.app/api/skipSegments?videoID=${videoId}&categories=["intro","outro"]`);
|
||||
if (!response.ok) return { intro: null, outro: null };
|
||||
if (!response.ok) {
|
||||
const result = { intro: null, outro: null };
|
||||
this._sponsorBlockCache[videoId] = result;
|
||||
return result;
|
||||
}
|
||||
|
||||
const segments = await response.json();
|
||||
let intro = null;
|
||||
@@ -1271,7 +1292,9 @@ const ApiUtils = {
|
||||
}
|
||||
});
|
||||
|
||||
return { intro, outro };
|
||||
const result = { intro, outro };
|
||||
this._sponsorBlockCache[videoId] = result;
|
||||
return result;
|
||||
} catch (error) {
|
||||
console.warn('Error fetching SponsorBlock data:', error);
|
||||
return { intro: null, outro: null };
|
||||
@@ -1316,7 +1339,7 @@ const ApiUtils = {
|
||||
async fetchCollectionItems(collectionId) {
|
||||
try {
|
||||
const response = await fetch(
|
||||
`${STATE.jellyfinData.serverAddress}/Items?ParentId=${collectionId}&Recursive=true&IncludeItemTypes=Movie,Series&fields=Id&userId=${STATE.jellyfinData.userId}`,
|
||||
`${STATE.jellyfinData.serverAddress}/Items?ParentId=${collectionId}&Recursive=true&IncludeItemTypes=Movie,Series&fields=Id,Type&userId=${STATE.jellyfinData.userId}`,
|
||||
{
|
||||
headers: this.getAuthHeaders(),
|
||||
}
|
||||
@@ -1330,7 +1353,7 @@ const ApiUtils = {
|
||||
const data = await response.json();
|
||||
const items = data.Items || [];
|
||||
console.log(`Resolved collection ${collectionId} to ${items.length} items`);
|
||||
return items.map(i => i.Id);
|
||||
return items.map(i => ({ Id: i.Id, Type: i.Type }));
|
||||
} catch (error) {
|
||||
console.error(`Error fetching collection items for ${collectionId}:`, error);
|
||||
return [];
|
||||
@@ -1355,20 +1378,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;
|
||||
const trailers = await response.json();
|
||||
if (trailers && trailers.length > 0) {
|
||||
|
||||
// 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}`
|
||||
};
|
||||
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;
|
||||
}
|
||||
}
|
||||
@@ -1587,7 +1658,7 @@ 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.)
|
||||
@@ -1595,15 +1666,25 @@ const SlideCreator = {
|
||||
console.log(`Using custom trailer URL for ${itemId}: ${trailerUrl}`);
|
||||
}
|
||||
}
|
||||
// 1b. Check Local Trailer if preferred
|
||||
// 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}`);
|
||||
}
|
||||
// 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;
|
||||
}
|
||||
// 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}`);
|
||||
}
|
||||
|
||||
const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
|
||||
|
||||
@@ -1712,18 +1793,11 @@ const SlideCreator = {
|
||||
event.target.setPlaybackQuality(quality);
|
||||
}
|
||||
|
||||
// Only play if this is the active slide AND the slideshow is visible
|
||||
// Only play if this is the active slide
|
||||
const slide = document.querySelector(`.slide[data-item-id="${itemId}"]`);
|
||||
const isVideoPlayerOpen = document.querySelector('.videoPlayerContainer') || document.querySelector('.youtubePlayerContainer');
|
||||
|
||||
if (slide && slide.classList.contains('active') && !document.hidden && (!isVideoPlayerOpen || isVideoPlayerOpen.classList.contains('hide'))) {
|
||||
const currentIndex = STATE.slideshow.currentSlideIndex;
|
||||
const currentItemId = STATE.slideshow.itemIds[currentIndex];
|
||||
if (currentItemId !== itemId) {
|
||||
console.log(`Slide ${itemId} is no longer active (current: ${currentItemId}), aborting playback.`);
|
||||
event.target.mute(); // Mute just in case
|
||||
return;
|
||||
}
|
||||
event.target.playVideo();
|
||||
|
||||
// Check if it actually started playing after a short delay (handling autoplay blocks)
|
||||
@@ -1757,14 +1831,18 @@ 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
|
||||
const slide = document.querySelector(`.slide[data-item-id="${itemId}"]`);
|
||||
if (slide && slide.classList.contains('active')) {
|
||||
if (CONFIG.waitForTrailerToEnd) {
|
||||
SlideshowManager.nextSlide();
|
||||
} else {
|
||||
event.target.playVideo(); // Loop if trailer is shorter than slide duration
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
'onError': () => {
|
||||
'onError': (event) => {
|
||||
console.warn(`YouTube player error ${event.data} for video ${videoId}`);
|
||||
// Fallback to next slide on error
|
||||
if (CONFIG.waitForTrailerToEnd) {
|
||||
SlideshowManager.nextSlide();
|
||||
@@ -1785,46 +1863,40 @@ const SlideCreator = {
|
||||
autoplay: false,
|
||||
preload: "auto",
|
||||
loop: false,
|
||||
disablePictureInPicture: true,
|
||||
style: "object-fit: cover; object-position: center center; width: 100%; height: 100%; position: absolute; top: 0; left: 0; pointer-events: none;"
|
||||
};
|
||||
|
||||
if (STATE.slideshow.isMuted) {
|
||||
videoAttributes.muted = "";
|
||||
}
|
||||
videoAttributes.muted = "";
|
||||
|
||||
backdrop = SlideUtils.createElement("video", videoAttributes);
|
||||
|
||||
if (!STATE.slideshow.isMuted) {
|
||||
backdrop.volume = 0.4;
|
||||
}
|
||||
backdrop.volume = 0.4;
|
||||
|
||||
STATE.slideshow.videoPlayers[itemId] = backdrop;
|
||||
|
||||
backdrop.addEventListener('play', (event) => {
|
||||
const slide = document.querySelector(`.slide[data-item-id="${itemId}"]`);
|
||||
const currentIndex = STATE.slideshow.currentSlideIndex;
|
||||
const currentItemId = STATE.slideshow.itemIds[currentIndex];
|
||||
|
||||
if (!slide || !slide.classList.contains('active') || currentItemId !== itemId) {
|
||||
console.log(`Local video ${itemId} started playing but is not active, pausing.`);
|
||||
event.target.pause();
|
||||
event.target.currentTime = 0;
|
||||
return;
|
||||
if (!slide || !slide.classList.contains('active')) {
|
||||
console.log(`Local video ${itemId} started playing but slide 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();
|
||||
}
|
||||
const slide = document.querySelector(`.slide[data-item-id="${itemId}"]`);
|
||||
if (slide && slide.classList.contains('active')) {
|
||||
SlideshowManager.nextSlide();
|
||||
}
|
||||
});
|
||||
|
||||
backdrop.addEventListener('error', () => {
|
||||
if (CONFIG.waitForTrailerToEnd) {
|
||||
const slide = document.querySelector(`.slide[data-item-id="${itemId}"]`);
|
||||
if (CONFIG.waitForTrailerToEnd && slide && slide.classList.contains('active')) {
|
||||
SlideshowManager.nextSlide();
|
||||
}
|
||||
});
|
||||
@@ -2158,6 +2230,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"
|
||||
@@ -2255,16 +2332,6 @@ const SlideshowManager = {
|
||||
let previousVisibleSlide;
|
||||
try {
|
||||
const container = SlideUtils.getOrCreateSlidesContainer();
|
||||
|
||||
const activeElement = document.activeElement;
|
||||
let focusSelector = null;
|
||||
if (container.contains(activeElement)) {
|
||||
if (activeElement.classList.contains('play-button')) focusSelector = '.play-button';
|
||||
else if (activeElement.classList.contains('detail-button')) focusSelector = '.detail-button';
|
||||
else if (activeElement.classList.contains('favorite-button')) focusSelector = '.favorite-button';
|
||||
else if (activeElement.classList.contains('trailer-button')) focusSelector = '.trailer-button';
|
||||
}
|
||||
|
||||
const totalItems = STATE.slideshow.totalItems;
|
||||
|
||||
index = Math.max(0, Math.min(index, totalItems - 1));
|
||||
@@ -2293,30 +2360,22 @@ const SlideshowManager = {
|
||||
|
||||
currentSlide.classList.add("active");
|
||||
|
||||
if (focusSelector) {
|
||||
const target = currentSlide.querySelector(focusSelector);
|
||||
if (target) {
|
||||
requestAnimationFrame(() => {
|
||||
target.focus();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Manage Video Playback: Stop others, Play current
|
||||
|
||||
// 1. Pause all other YouTube players
|
||||
// 1. Stop all other YouTube players and local video elements
|
||||
if (STATE.slideshow.videoPlayers) {
|
||||
Object.keys(STATE.slideshow.videoPlayers).forEach(id => {
|
||||
if (id !== currentItemId) {
|
||||
const p = STATE.slideshow.videoPlayers[id];
|
||||
if (p) {
|
||||
try {
|
||||
if (typeof p.pauseVideo === 'function') {
|
||||
p.pauseVideo();
|
||||
} else if (p.tagName === 'VIDEO') {
|
||||
p.pause();
|
||||
}
|
||||
} catch (e) { console.warn("Error pausing player", id, e); }
|
||||
if (!p) return;
|
||||
// YouTube player
|
||||
if (typeof p.pauseVideo === 'function') {
|
||||
p.pauseVideo();
|
||||
}
|
||||
// HTML5 <video> element (local trailers)
|
||||
if (p instanceof HTMLVideoElement) {
|
||||
p.pause();
|
||||
p.muted = true;
|
||||
p.currentTime = 0;
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -2324,17 +2383,26 @@ const SlideshowManager = {
|
||||
|
||||
// 2. Pause all other HTML5 videos e.g. local trailers
|
||||
document.querySelectorAll('video').forEach(video => {
|
||||
const slideParent = video.closest('.slide');
|
||||
if (slideParent && slideParent.dataset.itemId !== currentItemId) {
|
||||
try {
|
||||
video.pause();
|
||||
} catch (e) {}
|
||||
if (!video.closest(`.slide[data-item-id="${currentItemId}"]`)) {
|
||||
video.pause();
|
||||
}
|
||||
});
|
||||
|
||||
// 3. Play and Reset current video
|
||||
const videoBackdrop = currentSlide.querySelector('.video-backdrop');
|
||||
|
||||
// Auto-unpause when a video slide becomes active
|
||||
if (videoBackdrop && 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);
|
||||
}
|
||||
}
|
||||
|
||||
// Update mute button visibility
|
||||
const muteButton = document.querySelector('.mute-button');
|
||||
if (muteButton) {
|
||||
@@ -2354,8 +2422,8 @@ const SlideshowManager = {
|
||||
videoBackdrop.play().catch(e => {
|
||||
// Check if it actually started playing after a short delay (handling autoplay blocks)
|
||||
setTimeout(() => {
|
||||
if (videoBackdrop.paused) {
|
||||
console.warn(`Autoplay blocked for ${itemId}, attempting muted fallback`);
|
||||
if (videoBackdrop.paused && currentSlide.classList.contains('active')) {
|
||||
console.warn(`Autoplay blocked for ${currentItemId}, attempting muted fallback`);
|
||||
videoBackdrop.muted = true;
|
||||
videoBackdrop.play().catch(err => console.error("Muted fallback failed", err));
|
||||
}
|
||||
@@ -2380,6 +2448,7 @@ const SlideshowManager = {
|
||||
|
||||
// Check if playback successfully started, otherwise fallback to muted
|
||||
setTimeout(() => {
|
||||
if (!currentSlide.classList.contains('active')) return;
|
||||
if (player.getPlayerState &&
|
||||
player.getPlayerState() !== YT.PlayerState.PLAYING &&
|
||||
player.getPlayerState() !== YT.PlayerState.BUFFERING) {
|
||||
@@ -2404,7 +2473,8 @@ const SlideshowManager = {
|
||||
if (backdrop && !backdrop.classList.contains("video-backdrop")) {
|
||||
backdrop.classList.add("animate");
|
||||
}
|
||||
currentSlide.querySelector(".logo").classList.add("animate");
|
||||
const logo = currentSlide.querySelector(".logo");
|
||||
if (logo) logo.classList.add("animate");
|
||||
}
|
||||
|
||||
STATE.slideshow.currentSlideIndex = index;
|
||||
@@ -2429,7 +2499,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();
|
||||
@@ -2488,19 +2559,30 @@ const SlideshowManager = {
|
||||
async preloadAdjacentSlides(currentIndex) {
|
||||
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];
|
||||
SlideCreator.createSlideForItemId(itemId);
|
||||
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];
|
||||
SlideCreator.createSlideForItemId(prevItemId);
|
||||
if (!preloadedIds.has(prevItemId)) {
|
||||
preloadedIds.add(prevItemId);
|
||||
SlideCreator.createSlideForItemId(prevItemId);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@@ -2529,14 +2611,13 @@ const SlideshowManager = {
|
||||
pruneSlideCache() {
|
||||
const currentIndex = STATE.slideshow.currentSlideIndex;
|
||||
const keepRange = 5;
|
||||
let prunedAny = false;
|
||||
|
||||
Object.keys(STATE.slideshow.createdSlides).forEach((itemId) => {
|
||||
const index = STATE.slideshow.itemIds.indexOf(itemId);
|
||||
if (index === -1) return;
|
||||
|
||||
const totalItems = STATE.slideshow.itemIds.length;
|
||||
|
||||
// Calculate wrapped distance
|
||||
let distance = Math.abs(index - currentIndex);
|
||||
if (totalItems > keepRange * 2) {
|
||||
distance = Math.min(distance, totalItems - distance);
|
||||
@@ -2560,10 +2641,25 @@ const SlideshowManager = {
|
||||
if (slide) slide.remove();
|
||||
|
||||
delete STATE.slideshow.createdSlides[itemId];
|
||||
prunedAny = true;
|
||||
|
||||
console.log(`Pruned slide ${itemId} at distance ${distance} from view`);
|
||||
}
|
||||
});
|
||||
|
||||
if (prunedAny) {
|
||||
const isTvMode = (window.layoutManager && window.layoutManager.tv) ||
|
||||
document.documentElement.classList.contains('layout-tv') ||
|
||||
document.body.classList.contains('layout-tv');
|
||||
if (isTvMode) {
|
||||
setTimeout(() => {
|
||||
const container = document.getElementById("slides-container");
|
||||
if (container && container.style.display !== 'none') {
|
||||
container.focus({ preventScroll: true });
|
||||
}
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
toggleMute() {
|
||||
@@ -2711,14 +2807,16 @@ const SlideshowManager = {
|
||||
});
|
||||
}
|
||||
|
||||
// 2. Pause all HTML5 videos
|
||||
// 2. Stop and mute all HTML5 videos
|
||||
const container = document.getElementById("slides-container");
|
||||
if (container) {
|
||||
container.querySelectorAll('video').forEach(video => {
|
||||
try {
|
||||
video.pause();
|
||||
video.muted = true;
|
||||
video.currentTime = 0;
|
||||
} catch (e) {
|
||||
console.warn("Error pausing HTML5 video:", e);
|
||||
console.warn("Error stopping HTML5 video:", e);
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -2736,18 +2834,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));
|
||||
}
|
||||
},
|
||||
@@ -2895,22 +2999,96 @@ const SlideshowManager = {
|
||||
},
|
||||
|
||||
/**
|
||||
* Parses custom media IDs, handling seasonal content if enabled
|
||||
* Parses custom media IDs, handling seasonal content if enabled.
|
||||
* If Seasonal Content is enabled:
|
||||
* - Check if any defined season matches the current date.
|
||||
* - If match: Return IDs from that season.
|
||||
* - If NO match: Fall back to Default Custom IDs.
|
||||
* If Custom Media IDs are enabled (and no seasonal match):
|
||||
* - Return Default Custom IDs.
|
||||
* If no Custom Media IDs are enabled:
|
||||
* - Return empty array (triggering random fallback).
|
||||
* @returns {string[]} Array of media IDs
|
||||
*/
|
||||
parseCustomIds() {
|
||||
if (!CONFIG.enableSeasonalContent) {
|
||||
return CONFIG.customMediaIds
|
||||
.split(/[\n,]/).map((line) => {
|
||||
let idsString = CONFIG.customMediaIds;
|
||||
let usingSeasonal = false;
|
||||
|
||||
if (CONFIG.enableSeasonalContent) {
|
||||
try {
|
||||
const sections = JSON.parse(CONFIG.seasonalSections || "[]");
|
||||
const currentDate = new Date();
|
||||
const currentMonth = currentDate.getMonth() + 1; // 1-12
|
||||
const currentDay = currentDate.getDate(); // 1-31
|
||||
|
||||
for (const section of sections) {
|
||||
const startDay = parseInt(section.StartDay);
|
||||
const startMonth = parseInt(section.StartMonth);
|
||||
const endDay = parseInt(section.EndDay);
|
||||
const endMonth = parseInt(section.EndMonth);
|
||||
|
||||
let isInRange = false;
|
||||
|
||||
if (startMonth === endMonth) {
|
||||
if (currentMonth === startMonth && currentDay >= startDay && currentDay <= endDay) {
|
||||
isInRange = true;
|
||||
}
|
||||
} else if (startMonth < endMonth) {
|
||||
// Normal range
|
||||
if (
|
||||
(currentMonth > startMonth && currentMonth < endMonth) ||
|
||||
(currentMonth === startMonth && currentDay >= startDay) ||
|
||||
(currentMonth === endMonth && currentDay <= endDay)
|
||||
) {
|
||||
isInRange = true;
|
||||
}
|
||||
} else {
|
||||
// Wrap around year
|
||||
if (
|
||||
(currentMonth > startMonth || currentMonth < endMonth) ||
|
||||
(currentMonth === startMonth && currentDay >= startDay) ||
|
||||
(currentMonth === endMonth && currentDay <= endDay)
|
||||
) {
|
||||
isInRange = true;
|
||||
}
|
||||
}
|
||||
|
||||
if (isInRange) {
|
||||
console.log(`Seasonal match found: ${section.Name}`);
|
||||
idsString = section.MediaIds;
|
||||
usingSeasonal = true;
|
||||
break; // Use first matching season
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Error parsing seasonal sections in JS:", e);
|
||||
}
|
||||
}
|
||||
|
||||
// If NOT using seasonal content (disabled or no match),
|
||||
// Custom IDs are disabled, return empty to skip to random
|
||||
if (!usingSeasonal && !CONFIG.enableCustomMediaIds) {
|
||||
return [];
|
||||
}
|
||||
|
||||
// Parse the resulting string (either seasonal or default)
|
||||
if (!idsString) return [];
|
||||
|
||||
return idsString
|
||||
.split(/[\n,]/)
|
||||
.map((line) => {
|
||||
const urlMatch = line.match(/\[(.*?)\]/);
|
||||
let id = line;
|
||||
if (urlMatch) {
|
||||
const url = urlMatch[1];
|
||||
// Remove the [url] part from the ID string for parsing
|
||||
id = line.replace(/\[.*?\]/, '').trim();
|
||||
// Attempt to extract GUID if present
|
||||
const guidMatch = id.match(/([0-9a-f]{32})/i);
|
||||
if (guidMatch) {
|
||||
id = guidMatch[1];
|
||||
} else {
|
||||
// Fallback: split by pipe if used
|
||||
id = id.split('|')[0].trim();
|
||||
}
|
||||
STATE.slideshow.customTrailerUrls[id] = url;
|
||||
@@ -2919,83 +3097,6 @@ const SlideshowManager = {
|
||||
})
|
||||
.map((id) => id.trim())
|
||||
.filter((id) => id);
|
||||
} else {
|
||||
return this.parseSeasonalIds();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Parses custom media IDs, handling seasonal content if enabled
|
||||
* @returns {string[]} Array of media IDs
|
||||
*/
|
||||
parseSeasonalIds() {
|
||||
console.log("Using Seasonal Content Mode");
|
||||
const lines = CONFIG.customMediaIds.split('\n');
|
||||
const currentDate = new Date();
|
||||
const currentMonth = currentDate.getMonth() + 1; // 1-12
|
||||
const currentDay = currentDate.getDate(); // 1-31
|
||||
const rawIds = [];
|
||||
|
||||
for (const line of lines) {
|
||||
const match = line.match(/^\s*(\d{1,2})\.(\d{1,2})-(\d{1,2})\.(\d{1,2})\s*\|.*\|(.*)$/) ||
|
||||
line.match(/^\s*(\d{1,2})\.(\d{1,2})-(\d{1,2})\.(\d{1,2})\s*\|(.*)$/);
|
||||
|
||||
if (match) {
|
||||
const startDay = parseInt(match[1]);
|
||||
const startMonth = parseInt(match[2]);
|
||||
const endDay = parseInt(match[3]);
|
||||
const endMonth = parseInt(match[4]);
|
||||
const idsPart = match[5];
|
||||
|
||||
let isInRange = false;
|
||||
|
||||
if (startMonth === endMonth) {
|
||||
if (currentMonth === startMonth && currentDay >= startDay && currentDay <= endDay) {
|
||||
isInRange = true;
|
||||
}
|
||||
} else if (startMonth < endMonth) {
|
||||
// Normal range spanning months (e.g. 15.06 - 15.08)
|
||||
if (
|
||||
(currentMonth > startMonth && currentMonth < endMonth) ||
|
||||
(currentMonth === startMonth && currentDay >= startDay) ||
|
||||
(currentMonth === endMonth && currentDay <= endDay)
|
||||
) {
|
||||
isInRange = true;
|
||||
}
|
||||
} else {
|
||||
// Wrap around year (e.g. 01.12 - 15.01)
|
||||
if (
|
||||
(currentMonth > startMonth || currentMonth < endMonth) ||
|
||||
(currentMonth === startMonth && currentDay >= startDay) ||
|
||||
(currentMonth === endMonth && currentDay <= endDay)
|
||||
) {
|
||||
isInRange = true;
|
||||
}
|
||||
}
|
||||
|
||||
if (isInRange) {
|
||||
console.log(`Seasonal match found: ${line}`);
|
||||
const ids = idsPart.split(/[,]/).map(line => {
|
||||
const urlMatch = line.match(/\[(.*?)\]/);
|
||||
let id = line;
|
||||
if (urlMatch) {
|
||||
const url = urlMatch[1];
|
||||
id = line.replace(/\[.*?\]/, '').trim();
|
||||
const guidMatch = id.match(/([0-9a-f]{32})/i);
|
||||
if (guidMatch) {
|
||||
id = guidMatch[1];
|
||||
} else {
|
||||
id = id.split('|')[0].trim();
|
||||
}
|
||||
STATE.slideshow.customTrailerUrls[id] = url;
|
||||
}
|
||||
return id.trim();
|
||||
}).filter(id => id);
|
||||
rawIds.push(...ids);
|
||||
}
|
||||
}
|
||||
}
|
||||
return rawIds;
|
||||
},
|
||||
|
||||
/**
|
||||
@@ -3037,10 +3138,10 @@ const SlideshowManager = {
|
||||
const children = await ApiUtils.fetchCollectionItems(id);
|
||||
finalIds.push(...children);
|
||||
} else if (item) {
|
||||
finalIds.push(id);
|
||||
finalIds.push({ Id: item.Id, Type: item.Type });
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn(`Error resolving item ${id}:`, e);
|
||||
console.warn(`Error resolving item ${rawId}:`, e);
|
||||
}
|
||||
}
|
||||
return finalIds;
|
||||
@@ -3055,10 +3156,41 @@ const SlideshowManager = {
|
||||
let itemIds = [];
|
||||
|
||||
// 1. Try Custom Media/Collection IDs from Config & seasonal content
|
||||
if (CONFIG.enableCustomMediaIds && CONFIG.customMediaIds) {
|
||||
if (CONFIG.enableCustomMediaIds || CONFIG.enableSeasonalContent) {
|
||||
console.log("Using Custom Media IDs from configuration");
|
||||
const rawIds = this.parseCustomIds();
|
||||
itemIds = await this.resolveCollectionsAndItems(rawIds);
|
||||
const resolvedItems = await this.resolveCollectionsAndItems(rawIds);
|
||||
|
||||
// Apply max items limit to custom IDs if enabled
|
||||
if (CONFIG.applyLimitsToCustomIds) {
|
||||
let movieCount = 0;
|
||||
let showCount = 0;
|
||||
let keptItems = [];
|
||||
|
||||
for (const item of resolvedItems) {
|
||||
if (keptItems.length >= CONFIG.maxItems) break;
|
||||
|
||||
if (item.Type === 'Movie') {
|
||||
if (movieCount < CONFIG.maxMovies) {
|
||||
movieCount++;
|
||||
keptItems.push(item);
|
||||
}
|
||||
} else if (item.Type === 'Series' || item.Type === 'Season' || item.Type === 'Episode') {
|
||||
// Count Seasons/Episodes as TV Shows
|
||||
if (showCount < CONFIG.maxTvShows) {
|
||||
showCount++;
|
||||
keptItems.push(item);
|
||||
}
|
||||
} else {
|
||||
// Other types: count towards total only
|
||||
keptItems.push(item);
|
||||
}
|
||||
}
|
||||
itemIds = keptItems.map(i => i.Id);
|
||||
console.log(`Applied limits to custom IDs: ${itemIds.length} items (Movies: ${movieCount}, Shows: ${showCount})`);
|
||||
} else {
|
||||
itemIds = resolvedItems.map(i => i.Id);
|
||||
}
|
||||
}
|
||||
|
||||
// 2. Try Avatar List (list.txt)
|
||||
|
||||
56
README.md
56
README.md
@@ -20,11 +20,14 @@ This plugin is a fork and enhancement of the original [Media Bar by MakD](https:
|
||||
- [Configuration](#configuration)
|
||||
- [General Settings](#general-settings)
|
||||
- [Custom Content](#custom-content)
|
||||
- [Content Sorting](#content-sorting)
|
||||
- [Content Limits](#content-limits)
|
||||
- [Advanced Settings](#advanced-settings)
|
||||
- [Build The Plugin By Yourself](#build-the-plugin-by-yourself)
|
||||
- [Troubleshooting](#troubleshooting)
|
||||
- [Effects Not Showing](#effects-not-showing)
|
||||
- [Docker Permission Issues](#docker-permission-issues)
|
||||
- [Credits](#credits)
|
||||
- [Contributing](#contributing)
|
||||
|
||||
---
|
||||
@@ -97,6 +100,12 @@ This plugin builds upon the original Media Bar with new capabilities and improve
|
||||
<summary>Have a look:</summary>
|
||||
<img width="513" height="575" alt="Client-Settings" src="https://github.com/user-attachments/assets/3e29a84f-f8ea-4b7b-b561-80493cb1535b" />
|
||||
</details>
|
||||
* **Local Trailers Preference**: Option to prefer local trailers (from the media item) over online sources.
|
||||
* **Theme Video Support**: Option to prefer local theme videos (backdrops) over trailers.
|
||||
* **Randomization**: Options to randomize theme videos and local trailers if multiple versions exist.
|
||||
* **Include Watched Content**: Option to include watched items in the random slideshow.
|
||||
* **Content Sorting Options**: Sort content by various criteria such as PremiereDate, ProductionYear, Random, or Original order.
|
||||
* **Client-Side Settings**: Allow users to override settings locally on their device.
|
||||
|
||||
### Core Features
|
||||
* **Immersive Slideshow**: Rotates through your media library
|
||||
@@ -104,6 +113,7 @@ This plugin builds upon the original Media Bar with new capabilities and improve
|
||||
* **Direct Play**: Click "Play" to start watching immediately
|
||||
* **Details View**: Click "Info" to jump to the item's detail page
|
||||
* **Add To Favorites**: Click the heart to add the item to your favorites
|
||||
* **Customize**: Change the plugins behavior through the Jellyfin admin panel
|
||||
|
||||
## Installation
|
||||
|
||||
@@ -150,30 +160,62 @@ Configure the plugin via **Dashboard** > **Plugins** > **Media Bar Enhanced**.
|
||||
* **Wait For Trailer To End**: Prevents slide transition until the video finishes.
|
||||
* **Enable Mobile Video**: specific setting to allow video playback on mobile devices (disabled by default to save data/battery).
|
||||
* **Show Trailer Button**: Adds a button to open the trailer in a popup modal if video backdrops are disabled (e.g. on mobile if trailers are disabled there)
|
||||
* **Prefer Local Trailers**: If enabled, local trailers will be preferred over remote (YouTube) trailers.
|
||||
* **Prefer Local Backdrops / Theme Videos**: If enabled, local backdrop videos (Theme Videos) will be preferred over trailers.
|
||||
|
||||
### Custom Content
|
||||
Define exactly what shows up in your bar.
|
||||
|
||||
* **Enable Custom Media IDs**: Restrict the slideshow to a specific list of IDs.
|
||||
* **Manual Trailer Override**: Add `[YouTube_URL]` after an ID to force a specific trailer.
|
||||
* **Manual Trailer Override**: Add `[YouTube_URL]` or `[Jellyfin_ID]` after an ID to force a specific trailer/video.
|
||||
* Example ID: `a1b2c3d4e5... [https://www.youtube.com/watch?v=VIDEO_ID]`
|
||||
* Example ID: `z1b2c3d4e5... [Jellyfin_ID]`
|
||||
* **Example Mixed List**:
|
||||
```
|
||||
a1b2c3d4e5f6... <-- Plays local item video
|
||||
6bdu812812hd... [https://youtu.be/...] <-- Item metadata + Custom YouTube Trailer
|
||||
12h44h124sf7... [hdc78127z4ff...] <-- Item metadata + Custom Jellyfin Trailer/Video etc.
|
||||
```
|
||||
* Example Collection Name: `Halloween Collection [https://...] | My Description` (Note: Use `|` to separate description from name if using a name instead of an ID)
|
||||
* **Apply Limits to Custom IDs**: If enabled, the "Content Limits" (see below) will also apply to your Custom Media IDs list. By default, custom lists show all listed items regardless of limits.
|
||||
* **Enable Seasonal Content Mode**: Advanced date-based scheduling.
|
||||
* Format: `DD.MM-DD.MM | Name | ID1, ID2, ID3`
|
||||
* Example: `20.10-31.10 | Halloween | <ID_OF_HALLOWEEN_COLLECTION>`
|
||||
* If the current date matches a range, those IDs are used. Otherwise, it defaults to standard behavior or the Custom Media IDs list.
|
||||
* **GUI Configuration**: You can easily add "Seasons" via the **Add Season** button.
|
||||
* **Active Period**: Select the Start and End Day/Month for each season.
|
||||
* **Media IDs**: Enter the Comma-separated list of IDs (Movies, Series, Collections) for that season.
|
||||
* **Priority**: If the current date matches a defined season, those IDs are used. If multiple seasons overlap, the first matching one is used. If no season matches, it falls back to the Default Custom Media IDs.
|
||||
|
||||
**How to get IDs:**
|
||||
Check the URL of an item in the web interface:
|
||||
`.../web/#/details?id=YOUR_ITEM_ID_HERE&...`
|
||||
|
||||
### Content Sorting
|
||||
Customize the order of slides in the Media Bar.
|
||||
|
||||
* **Sort By**: Choose criteria like *Random*, *Premiere Date*, *Production Year*, *Critic Rating*, *Community Rating*, *Name*, or *Runtime*.
|
||||
* **Sort Order**: Ascending or Descending.
|
||||
* **Note**: Sorting applies to both server-fetched content AND Custom Media IDs. Select **Original** to preserve the exact order of your Custom Media IDs list.
|
||||
|
||||
### Content Limits
|
||||
Fine-tune performance by limiting the number of items fetched from the server.
|
||||
|
||||
* **Total Max Items**: Maximum total items to fetch (combined).
|
||||
* **Include Watched Content**: If enabled, the random slideshow will also include items that you have already watched.
|
||||
* **Max Movies**: Maximum movies to include (for random selection).
|
||||
* **Max Tv Shows**: Maximum TV shows to include (for random selection).
|
||||
* **Preload Count**: Number of slides to preload for smooth transitions.
|
||||
* *Intelligent Preloading*: The plugin uses a safe preloading strategy that respects this count but handles small lists gracefully to avoid playback issues.
|
||||
* **Max Pagination Dots**: Maximum number of dots to show. If exceeded, it switches to a counter (e.g., 1/20).
|
||||
|
||||
### Advanced Settings
|
||||
* **Slide Animations**: Enable/disable the "Zoom In" effect.
|
||||
* **Use SponsorBlock**: Skips non-content segments in YouTube trailers (if the data exists).
|
||||
* **Preferred YouTube Quality**: Select your preferred resolution (*Auto*, *Maximum*, *1080p*, *720p*).
|
||||
* **Start Muted**: Videos start without sound (user can unmute).
|
||||
* **Full Width Video**: Stretches video to cover the entire width (good for desktop, crop on mobile).
|
||||
* **Enable Loading Screen**: Enable/disable the loading indicator while the bar initializes.
|
||||
* **Always Show Arrows**: Keeps navigation arrows visible instead of hiding them on mouse leave.
|
||||
* **Randomize Backdrop Video**: If enabled, a random video from the backdrops/theme videos will be selected instead of the first one.
|
||||
* **Randomize Local Trailer**: If enabled, a random local trailer will be selected instead of the first one.
|
||||
* **Enable Keyboard Controls**:
|
||||
* `Left`/`Right`: Change slide
|
||||
* `Space`: Pause/Play slideshow
|
||||
@@ -244,6 +286,12 @@ volumes:
|
||||
- /path/to/jellyfin/config/index.html:/jellyfin/jellyfin-web/index.html
|
||||
```
|
||||
|
||||
## Credits
|
||||
|
||||
This project is based on the original [Jellyfin Media Bar by MakD](https://github.com/MakD/Jellyfin-Media-Bar) and incorporates concepts from [IAmParadox27's plugin fork](https://github.com/IAmParadox27/jellyfin-plugin-media-bar). Thanks for their work!
|
||||
|
||||
Also, special thanks to IAmParadox27 for the [File Transformation plugin](https://github.com/IAmParadox27/jellyfin-plugin-file-transformation) which this plugin can optionally use for improved Docker compatibility.
|
||||
|
||||
## Contributing
|
||||
|
||||
Feel free to contribute to this project by creating pull requests or reporting issues.
|
||||
|
||||
@@ -43,7 +43,7 @@ Bevor du baust, musst du die Versionsnummer in den folgenden Dateien aktualisier
|
||||
Führe den folgenden Befehl im Terminal (PowerShell) im Hauptverzeichnis aus. Wir nutzen hier `dotnet build` statt `publish`, um unnötige Dateien zu vermeiden.
|
||||
|
||||
```powershell
|
||||
dotnet build Jellyfin.Plugin.MediaBar/Jellyfin.Plugin.MediaBar.csproj --configuration Release --output bin/Publish; Compress-Archive -Path bin/Publish/* -DestinationPath bin/Publish/Jellyfin.Plugin.MediaBar.zip -Force; $hash = (Get-FileHash -Algorithm MD5 bin/Publish/Jellyfin.Plugin.MediaBar.zip).Hash.ToLower(); $time = (Get-Date).ToUniversalTime().ToString("yyyy-MM-ddTHH:mm:ssZ"); Write-Output "`n----------------------------------------"; Write-Output "NEUE CHECKSUMME (MD5): $hash"; Write-Output "ZEITSTEMPEL: $time"; Write-Output "----------------------------------------`n"
|
||||
dotnet build Jellyfin.Plugin.MediaBarEnhanced/Jellyfin.Plugin.MediaBarEnhanced.csproj --configuration Release --output bin/Publish; Compress-Archive -Path bin/Publish/* -DestinationPath bin/Publish/Jellyfin.Plugin.MediaBarEnhanced.zip -Force; $hash = (Get-FileHash -Algorithm MD5 bin/Publish/Jellyfin.Plugin.MediaBarEnhanced.zip).Hash.ToLower(); $time = (Get-Date).ToUniversalTime().ToString("yyyy-MM-ddTHH:mm:ssZ"); Write-Output "`n----------------------------------------"; Write-Output "NEUE CHECKSUMME (MD5): $hash"; Write-Output "ZEITSTEMPEL: $time"; Write-Output "----------------------------------------`n"
|
||||
```
|
||||
|
||||
## 3. Manifest aktualisieren
|
||||
|
||||
@@ -9,12 +9,20 @@
|
||||
"imageUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/raw/branch/main/logo.png",
|
||||
"versions": [
|
||||
{
|
||||
"version": "1.6.1.2",
|
||||
"changelog": "- fix tv mode issue",
|
||||
"version": "1.6.2.3",
|
||||
"changelog": "- feat: add options for local backdrops (theme videos) support and randomization features for local trailer/backdrops if more than one is available\n- feat: add option to include watched content in the random selection",
|
||||
"targetAbi": "10.11.0.0",
|
||||
"sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.6.1.2/Jellyfin.Plugin.MediaBarEnhanced.zip",
|
||||
"checksum": "186c08c80091c24270fda41f0908e951",
|
||||
"timestamp": "2026-02-11T19:13:24Z"
|
||||
"sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.6.2.3/Jellyfin.Plugin.MediaBarEnhanced.zip",
|
||||
"checksum": "c7ff2d783889c25b5a53783bfbe30b11",
|
||||
"timestamp": "2026-02-15T00:38:07Z"
|
||||
},
|
||||
{
|
||||
"version": "1.6.1.32",
|
||||
"changelog": "- feat: add seasonal UI logic\n- add option to also set the limits for custom ids\n- fix tv mode scroll issue\n- smaller fixes and improvements",
|
||||
"targetAbi": "10.11.0.0",
|
||||
"sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.6.1.32/Jellyfin.Plugin.MediaBarEnhanced.zip",
|
||||
"checksum": "e196fd393ef0bcf51f8ce535103f1811",
|
||||
"timestamp": "2026-02-14T16:34:32Z"
|
||||
},
|
||||
{
|
||||
"version": "1.6.0.2",
|
||||
|
||||
116
test_scripts/check_backdrop_fields.js
Normal file
116
test_scripts/check_backdrop_fields.js
Normal file
@@ -0,0 +1,116 @@
|
||||
(async () => {
|
||||
// 1. Initialisierung
|
||||
const apiClient = window.ApiClient;
|
||||
if (!apiClient) {
|
||||
console.error("❌ ApiClient nicht gefunden. Bitte in der Browser-Konsole einer Jellyfin-Seite ausführen.");
|
||||
return;
|
||||
}
|
||||
|
||||
// 2. Item ID abfragen oder festlegen
|
||||
let itemId = prompt("Bitte die Item ID eingeben (von einem Film/Serie mit Theme Video/Backdrop Video):");
|
||||
if (!itemId) {
|
||||
console.warn("Keine Item ID eingegeben. Abbruch.");
|
||||
return;
|
||||
}
|
||||
itemId = itemId.trim();
|
||||
|
||||
const userId = apiClient.getCurrentUserId();
|
||||
console.log(`%c🔍 Untersuche Item: ${itemId}`, "color: #00a4dc; font-size: 1.2em; font-weight: bold;");
|
||||
|
||||
// 3. Helper Funktion für Fetch requests
|
||||
const fetchJson = async (url) => {
|
||||
try {
|
||||
const res = await fetch(url, {
|
||||
headers: {
|
||||
'Authorization': `MediaBrowser Client="Jellyfin Web", Device="Browser", DeviceId="${apiClient.deviceId()}", Version="${apiClient.appVersion()}", Token="${apiClient.accessToken()}"`
|
||||
}
|
||||
});
|
||||
if (res.ok) return await res.json();
|
||||
console.warn(`⚠️ Request fehlgeschlagen: ${url} (${res.status})`);
|
||||
return null;
|
||||
} catch (e) {
|
||||
console.error(`❌ Fehler bei Request: ${url}`, e);
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
// ---------------------------------------------------------
|
||||
// TEST 1: Standard Item Details mit erweiterten Feldern
|
||||
// ---------------------------------------------------------
|
||||
console.group("1. Standard Item Details (mit Fields)");
|
||||
const fields = "Overview,RemoteTrailers,MediaSources,LocalTrailerCount,ThemeVideoIds,ThemeSongIds";
|
||||
const itemDetailsUrl = `${apiClient.serverAddress()}/Users/${userId}/Items/${itemId}?Fields=${fields}`;
|
||||
|
||||
const item = await fetchJson(itemDetailsUrl);
|
||||
if (item) {
|
||||
console.log("Name:", item.Name);
|
||||
console.log("ThemeVideoIds:", item.ThemeVideoIds);
|
||||
console.log("ThemeSongIds:", item.ThemeSongIds);
|
||||
console.log("LocalTrailerCount:", item.LocalTrailerCount);
|
||||
console.log("RemoteTrailers:", item.RemoteTrailers);
|
||||
|
||||
if (item.ThemeVideoIds && item.ThemeVideoIds.length > 0) {
|
||||
console.log(`%c✅ ThemeVideoIds gefunden: ${item.ThemeVideoIds.length}`, "color: green; font-weight: bold;");
|
||||
} else {
|
||||
console.log(`%c❌ Keine ThemeVideoIds im Item-Objekt.`, "color: orange;");
|
||||
}
|
||||
}
|
||||
console.groupEnd();
|
||||
|
||||
// ---------------------------------------------------------
|
||||
// TEST 2: ThemeMedia Endpoint
|
||||
// ---------------------------------------------------------
|
||||
console.group("2. Endpoint: /Items/{Id}/ThemeMedia");
|
||||
const themeMediaUrl = `${apiClient.serverAddress()}/Items/${itemId}/ThemeMedia?userId=${userId}`;
|
||||
const themeMedia = await fetchJson(themeMediaUrl);
|
||||
|
||||
if (themeMedia) {
|
||||
console.dir(themeMedia);
|
||||
if (themeMedia.ThemeVideos && themeMedia.ThemeVideos.length > 0) {
|
||||
console.log(`%c✅ ThemeVideos gefunden: ${themeMedia.ThemeVideos.length}`, "color: green; font-weight: bold;");
|
||||
themeMedia.ThemeVideos.forEach(v => console.log(` - ID: ${v.Id}, Name: ${v.Name}, Path: ${v.Path}`));
|
||||
} else {
|
||||
console.log("❌ Keine ThemeVideos in ThemeMedia gefunden.");
|
||||
}
|
||||
}
|
||||
console.groupEnd();
|
||||
|
||||
// ---------------------------------------------------------
|
||||
// TEST 3: ThemeVideos Endpoint (Spezifisch)
|
||||
// ---------------------------------------------------------
|
||||
console.group("3. Endpoint: /Items/{Id}/ThemeVideos");
|
||||
// Manchmal auch unter Users/{UserId}/Items/{Id}/ThemeVideos
|
||||
const themeVideosUrl = `${apiClient.serverAddress()}/Items/${itemId}/ThemeVideos?userId=${userId}`;
|
||||
const themeVideos = await fetchJson(themeVideosUrl);
|
||||
|
||||
if (themeVideos) {
|
||||
// Kann Array oder Objekt mit Items sein
|
||||
const videos = Array.isArray(themeVideos) ? themeVideos : (themeVideos.Items || []);
|
||||
console.dir(videos);
|
||||
|
||||
if (videos.length > 0) {
|
||||
console.log(`%c✅ ThemeVideos Endpoint lieferte Ergebnisse: ${videos.length}`, "color: green; font-weight: bold;");
|
||||
} else {
|
||||
console.log("❌ ThemeVideos Endpoint lieferte leeres Array.");
|
||||
}
|
||||
}
|
||||
console.groupEnd();
|
||||
|
||||
// ---------------------------------------------------------
|
||||
// TEST 4: LocalTrailers Endpoint
|
||||
// ---------------------------------------------------------
|
||||
console.group("4. Endpoint: /Items/{Id}/LocalTrailers");
|
||||
const localTrailersUrl = `${apiClient.serverAddress()}/Users/${userId}/Items/${itemId}/LocalTrailers`;
|
||||
const localTrailers = await fetchJson(localTrailersUrl);
|
||||
|
||||
if (localTrailers && localTrailers.length > 0) {
|
||||
console.log(`%cℹ️ LocalTrailers gefunden: ${localTrailers.length}`, "color: blue;");
|
||||
console.dir(localTrailers);
|
||||
} else {
|
||||
console.log("❌ Keine LocalTrailers gefunden.");
|
||||
}
|
||||
console.groupEnd();
|
||||
|
||||
console.log("%cFertig.", "font-weight: bold;");
|
||||
|
||||
})();
|
||||
37
test_scripts/fetch_specific_items_with_fields.js
Normal file
37
test_scripts/fetch_specific_items_with_fields.js
Normal file
@@ -0,0 +1,37 @@
|
||||
(async () => {
|
||||
const apiClient = window.ApiClient;
|
||||
if (!apiClient) {
|
||||
console.error("ApiClient nicht gefunden.");
|
||||
return;
|
||||
}
|
||||
|
||||
const itemId = "DEINE_ITEM_ID_HIER";
|
||||
const userId = apiClient.getCurrentUserId();
|
||||
|
||||
const fields = "Overview,RemoteTrailers,Genres,CommunityRating,CriticRating,OfficialRating,PremiereDate,ProductionYear,MediaSources,RunTimeTicks,LocalTrailerCount,ThemeVideoIds";
|
||||
|
||||
try {
|
||||
console.log(`Rufe erweiterte Details für Item ${itemId} ab...`);
|
||||
|
||||
const url = apiClient.getUrl(`Users/${userId}/Items/${itemId}`, {
|
||||
Fields: fields
|
||||
});
|
||||
|
||||
const item = await apiClient.getJSON(url);
|
||||
|
||||
if (item) {
|
||||
console.log(`%cErgebnis für: ${item.Name}`, "color: #00a4dc; font-weight: bold;");
|
||||
|
||||
console.log("Remote Trailer:", item.RemoteTrailers);
|
||||
console.log("Local Trailer Count:", item.LocalTrailerCount);
|
||||
console.log("Media Sources:", item.MediaSources);
|
||||
console.log("ThemeVideos:", item.ThemeVideoIds);
|
||||
|
||||
console.dir(item);
|
||||
} else {
|
||||
console.warn("Item konnte nicht gefunden werden.");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Fehler beim Abrufen des Items:", error);
|
||||
}
|
||||
})();
|
||||
Reference in New Issue
Block a user