Compare commits
42 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
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 |
@@ -115,14 +115,10 @@
|
|||||||
</div>
|
</div>
|
||||||
<div id="customMediaIdsContainer">
|
<div id="customMediaIdsContainer">
|
||||||
<div class="inputContainer">
|
<div class="inputContainer">
|
||||||
<label class="inputLabel inputLabelUnfocused" for="CustomMediaIds">Default Media/Collection/Playlist
|
<label class="inputLabel inputLabelUnfocused" for="CustomMediaIds">Default Media/Collection/Playlist IDs (Newline or Comma-separated)</label>
|
||||||
IDs
|
|
||||||
(Newline or Comma separated)</label>
|
|
||||||
<textarea class="emby-textarea" is="emby-textarea" id="CustomMediaIds" name="CustomMediaIds"
|
<textarea class="emby-textarea" is="emby-textarea" id="CustomMediaIds" name="CustomMediaIds"
|
||||||
style="width: 100%; height: 150px; font-family: monospace;"></textarea>
|
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
|
<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.
|
||||||
your default content.
|
|
||||||
You can separate them by new line or comma.
|
|
||||||
<br><br>
|
<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
|
<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>.
|
brackets: <br> <code>e.g. ID DESCRIPTION [https://youtu.be/...]</code> or <code>ID [JellyfinItemId] DESCRIPTION</code>.
|
||||||
@@ -132,11 +128,9 @@
|
|||||||
<li><b>YouTube URL:</b> Play a remote trailer from YouTube.</li>
|
<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>
|
<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>
|
</ul>
|
||||||
You can also add a description after the ID using any separator like space, pipe
|
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>
|
||||||
(|) or dash (-): <br>e.g. <code>ID DESCRIPTION</code> or <code>ID | DESCRIPTION</code>
|
|
||||||
<br><br>
|
<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
|
<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.
|
||||||
the pipe (|) separator.
|
|
||||||
<br>
|
<br>
|
||||||
<b>Note:</b> The separator <b>MUST NOT</b> be a hex character (0-9, a-f).
|
<b>Note:</b> The separator <b>MUST NOT</b> be a hex character (0-9, a-f).
|
||||||
</div>
|
</div>
|
||||||
@@ -198,11 +192,11 @@
|
|||||||
<input is="emby-checkbox" type="checkbox" id="UseSponsorBlock" name="UseSponsorBlock" />
|
<input is="emby-checkbox" type="checkbox" id="UseSponsorBlock" name="UseSponsorBlock" />
|
||||||
<span>Use SponsorBlock</span>
|
<span>Use SponsorBlock</span>
|
||||||
</label>
|
</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>
|
||||||
<div class="selectContainer">
|
<div class="selectContainer">
|
||||||
<label class="selectLabel" for="PreferredVideoQuality">Preferred YouTube Quality</label>
|
<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="Auto">Auto (Smart)</option>
|
||||||
<option value="Maximum">Maximum (4K+)</option>
|
<option value="Maximum">Maximum (4K+)</option>
|
||||||
<option value="1080p">1080p</option>
|
<option value="1080p">1080p</option>
|
||||||
@@ -304,7 +298,7 @@
|
|||||||
<h2 class="sectionTitle">Content Sorting</h2>
|
<h2 class="sectionTitle">Content Sorting</h2>
|
||||||
<div class="selectContainer">
|
<div class="selectContainer">
|
||||||
<label class="selectLabel" for="SortBy">Sort By</label>
|
<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="Random">Random</option>
|
||||||
<option value="Original">Original (Custom List Order)</option>
|
<option value="Original">Original (Custom List Order)</option>
|
||||||
<option value="PremiereDate">Premiere Date</option>
|
<option value="PremiereDate">Premiere Date</option>
|
||||||
@@ -318,7 +312,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="selectContainer">
|
<div class="selectContainer">
|
||||||
<label class="selectLabel" for="SortOrder">Sort Order</label>
|
<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="Ascending">Ascending</option>
|
||||||
<option value="Descending">Descending</option>
|
<option value="Descending">Descending</option>
|
||||||
</select>
|
</select>
|
||||||
@@ -534,23 +528,24 @@
|
|||||||
var container = page.querySelector('#seasonalSectionsList');
|
var container = page.querySelector('#seasonalSectionsList');
|
||||||
if (!container) return;
|
if (!container) return;
|
||||||
container.innerHTML = '';
|
container.innerHTML = '';
|
||||||
sections.forEach(function(section) {
|
sections.forEach(function(section, index) {
|
||||||
MediaBarEnhancedConfigurationPage.createSectionElement(container, section);
|
MediaBarEnhancedConfigurationPage.createSectionElement(container, section, index + 1);
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
addSeasonalSection: function(page) {
|
addSeasonalSection: function(page) {
|
||||||
var container = page.querySelector('#seasonalSectionsList');
|
var container = page.querySelector('#seasonalSectionsList');
|
||||||
if (!container) return;
|
if (!container) return;
|
||||||
|
var index = container.children.length + 1;
|
||||||
MediaBarEnhancedConfigurationPage.createSectionElement(container, {
|
MediaBarEnhancedConfigurationPage.createSectionElement(container, {
|
||||||
Name: 'New Season',
|
Name: 'New Season',
|
||||||
StartDay: 1, StartMonth: 1,
|
StartDay: 1, StartMonth: 1,
|
||||||
EndDay: 1, EndMonth: 1,
|
EndDay: 1, EndMonth: 1,
|
||||||
MediaIds: ''
|
MediaIds: ''
|
||||||
});
|
}, index);
|
||||||
},
|
},
|
||||||
|
|
||||||
createSectionElement: function(container, data) {
|
createSectionElement: function(container, data, index) {
|
||||||
var div = document.createElement('div');
|
var div = document.createElement('div');
|
||||||
div.className = 'seasonal-section';
|
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);';
|
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);';
|
||||||
@@ -564,7 +559,7 @@
|
|||||||
];
|
];
|
||||||
|
|
||||||
function mkSelect(val, opts, cls) {
|
function mkSelect(val, opts, cls) {
|
||||||
var h = '<select class="emby-select emby-select-withcolor ' + cls + '" style="width: auto; display: inline-block; margin-right: 5px;">';
|
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) {
|
opts.forEach(function(o) {
|
||||||
var v = o.v || o;
|
var v = o.v || o;
|
||||||
var n = o.n || o;
|
var n = o.n || o;
|
||||||
@@ -574,14 +569,20 @@
|
|||||||
return h;
|
return h;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.innerHTML = '<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.5em;">' +
|
var labelText = 'Season list #' + (index || 1);
|
||||||
' <div style="flex-grow:1; margin-right:1em;">' +
|
|
||||||
' <input is="emby-input" type="text" class="emby-input section-name" value="' + (data.Name || '') + '" label="Season Name" />' +
|
div.innerHTML =
|
||||||
' <div class="fieldDescription">Name of the season (e.g. Christmas).</div>' +
|
'<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>' +
|
||||||
' <button type="button" class="raised emby-button remove-section" style="background: #a94442; min-width: unset; margin-top: 0.5em;">Remove</button>' +
|
' <div class="fieldDescription">Name of the season</div>' +
|
||||||
'</div>' +
|
'</div>' +
|
||||||
'<div style="margin-bottom: 1em;">' +
|
'<div class="inputContainer" style="margin-bottom: 1em;">' +
|
||||||
' <label class="inputLabel" style="margin-bottom:0.5em; display:block;">Active Period</label>' +
|
' <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;">' +
|
' <div style="display: flex; align-items: center; flex-wrap: wrap; gap: 0.5em;">' +
|
||||||
' <span>From:</span>' +
|
' <span>From:</span>' +
|
||||||
@@ -593,10 +594,10 @@
|
|||||||
' </div>' +
|
' </div>' +
|
||||||
' <div class="fieldDescription">Date range (inclusive) when this content is active.</div>' +
|
' <div class="fieldDescription">Date range (inclusive) when this content is active.</div>' +
|
||||||
'</div>' +
|
'</div>' +
|
||||||
'<div>' +
|
'<div class="inputContainer">' +
|
||||||
' <label class="inputLabel" style="margin-bottom:0.5em; display:block;">Media IDs</label>' +
|
' <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>' +
|
' <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 list of Movie/Series/Collection IDs to show during this season.</div>' +
|
' <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>';
|
||||||
|
|
||||||
div.querySelector('.remove-section').addEventListener('click', function() {
|
div.querySelector('.remove-section').addEventListener('click', function() {
|
||||||
|
|||||||
@@ -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.1.11</Version>
|
<Version>1.6.1.23</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>
|
||||||
|
|
||||||
|
|||||||
@@ -1490,7 +1490,6 @@ const VisibilityObserver = {
|
|||||||
* Initializes visibility observer
|
* Initializes visibility observer
|
||||||
*/
|
*/
|
||||||
init() {
|
init() {
|
||||||
// MARK: Mark
|
|
||||||
const observer = new MutationObserver(() => this.updateVisibility());
|
const observer = new MutationObserver(() => this.updateVisibility());
|
||||||
// let debounceTimer = null;
|
// let debounceTimer = null;
|
||||||
// const observer = new MutationObserver(() => {
|
// const observer = new MutationObserver(() => {
|
||||||
@@ -1720,6 +1719,13 @@ const SlideCreator = {
|
|||||||
if (iframe) {
|
if (iframe) {
|
||||||
iframe.setAttribute('tabindex', '-1');
|
iframe.setAttribute('tabindex', '-1');
|
||||||
iframe.setAttribute('inert', '');
|
iframe.setAttribute('inert', '');
|
||||||
|
// Preserve video-backdrop class on the iframe (YT API replaces the original div)
|
||||||
|
iframe.classList.add('backdrop', 'video-backdrop');
|
||||||
|
if (CONFIG.fullWidthVideo) {
|
||||||
|
iframe.classList.add('video-backdrop-full');
|
||||||
|
} else {
|
||||||
|
iframe.classList.add('video-backdrop-default');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Store start/end time and videoId for later use
|
// Store start/end time and videoId for later use
|
||||||
@@ -1738,18 +1744,11 @@ const SlideCreator = {
|
|||||||
event.target.setPlaybackQuality(quality);
|
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 and not paused
|
||||||
const slide = document.querySelector(`.slide[data-item-id="${itemId}"]`);
|
const slide = document.querySelector(`.slide[data-item-id="${itemId}"]`);
|
||||||
const isVideoPlayerOpen = document.querySelector('.videoPlayerContainer') || document.querySelector('.youtubePlayerContainer');
|
const isVideoPlayerOpen = document.querySelector('.videoPlayerContainer') || document.querySelector('.youtubePlayerContainer');
|
||||||
|
|
||||||
if (slide && slide.classList.contains('active') && !document.hidden && (!isVideoPlayerOpen || isVideoPlayerOpen.classList.contains('hide'))) {
|
if (slide && slide.classList.contains('active') && !document.hidden && !STATE.slideshow.isPaused && (!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();
|
event.target.playVideo();
|
||||||
|
|
||||||
// Check if it actually started playing after a short delay (handling autoplay blocks)
|
// Check if it actually started playing after a short delay (handling autoplay blocks)
|
||||||
@@ -1826,10 +1825,8 @@ const SlideCreator = {
|
|||||||
|
|
||||||
backdrop.addEventListener('play', (event) => {
|
backdrop.addEventListener('play', (event) => {
|
||||||
const slide = document.querySelector(`.slide[data-item-id="${itemId}"]`);
|
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')) {
|
||||||
|
|
||||||
if (!slide || !slide.classList.contains('active') || currentItemId !== itemId) {
|
|
||||||
console.log(`Local video ${itemId} started playing but is not active, pausing.`);
|
console.log(`Local video ${itemId} started playing but is not active, pausing.`);
|
||||||
event.target.pause();
|
event.target.pause();
|
||||||
event.target.currentTime = 0;
|
event.target.currentTime = 0;
|
||||||
@@ -2314,7 +2311,7 @@ const SlideshowManager = {
|
|||||||
}
|
}
|
||||||
|
|
||||||
currentSlide.classList.add("active");
|
currentSlide.classList.add("active");
|
||||||
|
|
||||||
// Restore focus for TV mode navigation continuity
|
// Restore focus for TV mode navigation continuity
|
||||||
requestAnimationFrame(() => {
|
requestAnimationFrame(() => {
|
||||||
if (focusSelector) {
|
if (focusSelector) {
|
||||||
@@ -2334,8 +2331,107 @@ const SlideshowManager = {
|
|||||||
});
|
});
|
||||||
|
|
||||||
// Manage Video Playback: Stop others, Play current
|
// Manage Video Playback: Stop others, Play current
|
||||||
this.pauseOtherVideos(currentItemId);
|
|
||||||
this.playCurrentVideo(currentSlide, currentItemId);
|
// 1. Pause all other YouTube players
|
||||||
|
if (STATE.slideshow.videoPlayers) {
|
||||||
|
Object.keys(STATE.slideshow.videoPlayers).forEach(id => {
|
||||||
|
if (id !== currentItemId) {
|
||||||
|
const p = STATE.slideshow.videoPlayers[id];
|
||||||
|
if (p && typeof p.pauseVideo === 'function') {
|
||||||
|
p.pauseVideo();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2. Pause all other HTML5 videos
|
||||||
|
document.querySelectorAll('video').forEach(video => {
|
||||||
|
if (!video.closest(`.slide[data-item-id="${currentItemId}"]`)) {
|
||||||
|
video.pause();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 3. Play and Reset current video
|
||||||
|
const videoBackdrop = currentSlide.querySelector('.video-backdrop');
|
||||||
|
|
||||||
|
// Update mute button visibility
|
||||||
|
const muteButton = document.querySelector('.mute-button');
|
||||||
|
if (muteButton) {
|
||||||
|
const hasVideo = !!videoBackdrop;
|
||||||
|
muteButton.style.display = hasVideo ? 'block' : 'none';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Option B: If paused and new slide has video, un-pause for video playback.
|
||||||
|
// If paused and new slide has only images, stay paused.
|
||||||
|
if (STATE.slideshow.isPaused && videoBackdrop) {
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (videoBackdrop && !STATE.slideshow.isPaused) {
|
||||||
|
if (videoBackdrop.tagName === 'VIDEO') {
|
||||||
|
videoBackdrop.currentTime = 0;
|
||||||
|
|
||||||
|
videoBackdrop.muted = STATE.slideshow.isMuted;
|
||||||
|
if (!STATE.slideshow.isMuted) {
|
||||||
|
videoBackdrop.volume = 0.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
videoBackdrop.play().catch(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
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));
|
||||||
|
}
|
||||||
|
}, 1000);
|
||||||
|
});
|
||||||
|
} else if (STATE.slideshow.videoPlayers && STATE.slideshow.videoPlayers[currentItemId]) {
|
||||||
|
const player = STATE.slideshow.videoPlayers[currentItemId];
|
||||||
|
if (player && typeof player.loadVideoById === 'function' && player._videoId) {
|
||||||
|
// Use loadVideoById to enforce start and end times
|
||||||
|
player.loadVideoById({
|
||||||
|
videoId: player._videoId,
|
||||||
|
startSeconds: player._startTime || 0,
|
||||||
|
endSeconds: player._endTime
|
||||||
|
});
|
||||||
|
|
||||||
|
if (STATE.slideshow.isMuted) {
|
||||||
|
player.mute();
|
||||||
|
} else {
|
||||||
|
player.unMute();
|
||||||
|
player.setVolume(40);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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) {
|
||||||
|
console.log("YouTube loadVideoById didn't start playback, retrying muted...");
|
||||||
|
player.mute();
|
||||||
|
player.playVideo();
|
||||||
|
}
|
||||||
|
}, 1000);
|
||||||
|
} else if (player && typeof player.seekTo === 'function') {
|
||||||
|
// Fallback if loadVideoById is not available or videoId missing
|
||||||
|
const startTime = player._startTime || 0;
|
||||||
|
player.seekTo(startTime);
|
||||||
|
player.playVideo();
|
||||||
|
}
|
||||||
|
// If player exists but is NOT ready yet (no loadVideoById), do nothing here.
|
||||||
|
// The onReady handler will fire later, see the slide is active, and auto-play.
|
||||||
|
}
|
||||||
|
// If videoBackdrop is a YouTube div but player hasn't been created yet,
|
||||||
|
// do nothing — onReady will handle it when the player becomes ready.
|
||||||
|
}
|
||||||
|
|
||||||
const enableAnimations = MediaBarEnhancedSettingsManager.getSetting('slideAnimations', CONFIG.slideAnimationEnabled);
|
const enableAnimations = MediaBarEnhancedSettingsManager.getSetting('slideAnimations', CONFIG.slideAnimationEnabled);
|
||||||
|
|
||||||
@@ -2370,7 +2466,7 @@ const SlideshowManager = {
|
|||||||
this.updateDots();
|
this.updateDots();
|
||||||
|
|
||||||
// Only restart interval if we are NOT waiting for a video to end
|
// Only restart interval if we are NOT waiting for a video to end
|
||||||
const hasVideo = currentSlide.querySelector('.video-backdrop');
|
const hasVideo = videoBackdrop;
|
||||||
if (STATE.slideshow.slideInterval && !STATE.slideshow.isPaused) {
|
if (STATE.slideshow.slideInterval && !STATE.slideshow.isPaused) {
|
||||||
if (CONFIG.waitForTrailerToEnd && hasVideo) {
|
if (CONFIG.waitForTrailerToEnd && hasVideo) {
|
||||||
STATE.slideshow.slideInterval.stop();
|
STATE.slideshow.slideInterval.stop();
|
||||||
@@ -2433,6 +2529,8 @@ const SlideshowManager = {
|
|||||||
// Preload next slides
|
// Preload next slides
|
||||||
for (let i = 1; i <= preloadCount; i++) {
|
for (let i = 1; i <= preloadCount; i++) {
|
||||||
const nextIndex = (currentIndex + i) % totalItems;
|
const nextIndex = (currentIndex + i) % totalItems;
|
||||||
|
if (nextIndex === currentIndex) break;
|
||||||
|
|
||||||
const itemId = STATE.slideshow.itemIds[nextIndex];
|
const itemId = STATE.slideshow.itemIds[nextIndex];
|
||||||
SlideCreator.createSlideForItemId(itemId);
|
SlideCreator.createSlideForItemId(itemId);
|
||||||
}
|
}
|
||||||
@@ -2440,6 +2538,8 @@ const SlideshowManager = {
|
|||||||
// Preload previous slides
|
// Preload previous slides
|
||||||
for (let i = 1; i <= preloadCount; i++) {
|
for (let i = 1; i <= preloadCount; i++) {
|
||||||
const prevIndex = (currentIndex - i + totalItems) % totalItems;
|
const prevIndex = (currentIndex - i + totalItems) % totalItems;
|
||||||
|
if (prevIndex === currentIndex) break;
|
||||||
|
|
||||||
const prevItemId = STATE.slideshow.itemIds[prevIndex];
|
const prevItemId = STATE.slideshow.itemIds[prevIndex];
|
||||||
SlideCreator.createSlideForItemId(prevItemId);
|
SlideCreator.createSlideForItemId(prevItemId);
|
||||||
}
|
}
|
||||||
@@ -2680,78 +2780,7 @@ const SlideshowManager = {
|
|||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
|
||||||
* Plays the video backdrop on the given slide and updates mute button visibility
|
|
||||||
* @param {Element} slide - The slide DOM element
|
|
||||||
* @param {string} itemId - The item ID of the slide
|
|
||||||
* @returns {boolean} Whether a video was found and playback attempted
|
|
||||||
*/
|
|
||||||
playCurrentVideo(slide, itemId) {
|
|
||||||
const videoBackdrop = slide.querySelector('.video-backdrop');
|
|
||||||
|
|
||||||
// Update mute button visibility
|
|
||||||
const muteButton = document.querySelector('.mute-button');
|
|
||||||
if (muteButton) {
|
|
||||||
muteButton.style.display = videoBackdrop ? 'block' : 'none';
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!videoBackdrop) return false;
|
|
||||||
|
|
||||||
if (videoBackdrop.tagName === 'VIDEO') {
|
|
||||||
videoBackdrop.currentTime = 0;
|
|
||||||
videoBackdrop.muted = STATE.slideshow.isMuted;
|
|
||||||
if (!STATE.slideshow.isMuted) videoBackdrop.volume = 0.4;
|
|
||||||
|
|
||||||
videoBackdrop.play().catch(() => {
|
|
||||||
setTimeout(() => {
|
|
||||||
if (videoBackdrop.paused && slide.classList.contains('active')) {
|
|
||||||
console.warn(`Autoplay blocked for ${itemId}, attempting muted fallback`);
|
|
||||||
videoBackdrop.muted = true;
|
|
||||||
videoBackdrop.play().catch(err => console.error("Muted fallback failed", err));
|
|
||||||
}
|
|
||||||
}, 1000);
|
|
||||||
});
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
// YouTube player
|
|
||||||
const player = STATE.slideshow.videoPlayers?.[itemId];
|
|
||||||
if (player && typeof player.loadVideoById === 'function' && player._videoId) {
|
|
||||||
player.loadVideoById({
|
|
||||||
videoId: player._videoId,
|
|
||||||
startSeconds: player._startTime || 0,
|
|
||||||
endSeconds: player._endTime
|
|
||||||
});
|
|
||||||
|
|
||||||
if (STATE.slideshow.isMuted) {
|
|
||||||
player.mute();
|
|
||||||
} else {
|
|
||||||
player.unMute();
|
|
||||||
player.setVolume(40);
|
|
||||||
}
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
if (!slide.classList.contains('active')) return;
|
|
||||||
|
|
||||||
if (player.getPlayerState &&
|
|
||||||
player.getPlayerState() !== YT.PlayerState.PLAYING &&
|
|
||||||
player.getPlayerState() !== YT.PlayerState.BUFFERING) {
|
|
||||||
console.log("YouTube loadVideoById didn't start playback, retrying muted...");
|
|
||||||
player.mute();
|
|
||||||
player.playVideo();
|
|
||||||
}
|
|
||||||
}, 1000);
|
|
||||||
return true;
|
|
||||||
} else if (player && typeof player.seekTo === 'function') {
|
|
||||||
// Fallback if loadVideoById is not available or videoId missing but player object exists
|
|
||||||
const startTime = player._startTime || 0;
|
|
||||||
player.seekTo(startTime);
|
|
||||||
player.playVideo();
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
return false;
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Stops all video playback (YouTube and HTML5)
|
* Stops all video playback (YouTube and HTML5)
|
||||||
|
|||||||
35
README.md
35
README.md
@@ -155,21 +155,48 @@ Configure the plugin via **Dashboard** > **Plugins** > **Media Bar Enhanced**.
|
|||||||
Define exactly what shows up in your bar.
|
Define exactly what shows up in your bar.
|
||||||
|
|
||||||
* **Enable Custom Media IDs**: Restrict the slideshow to a specific list of IDs.
|
* **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: `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)
|
* 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.
|
* **Enable Seasonal Content Mode**: Advanced date-based scheduling.
|
||||||
* Format: `DD.MM-DD.MM | Name | ID1, ID2, ID3`
|
* **GUI Configuration**: You can easily add "Seasons" via the **Add Season** button.
|
||||||
* Example: `20.10-31.10 | Halloween | <ID_OF_HALLOWEEN_COLLECTION>`
|
* **Active Period**: Select the Start and End Day/Month for each season.
|
||||||
* If the current date matches a range, those IDs are used. Otherwise, it defaults to standard behavior or the Custom Media IDs list.
|
* **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:**
|
**How to get IDs:**
|
||||||
Check the URL of an item in the web interface:
|
Check the URL of an item in the web interface:
|
||||||
`.../web/#/details?id=YOUR_ITEM_ID_HERE&...`
|
`.../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).
|
||||||
|
* **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
|
### Advanced Settings
|
||||||
* **Slide Animations**: Enable/disable the "Zoom In" effect.
|
* **Slide Animations**: Enable/disable the "Zoom In" effect.
|
||||||
* **Use SponsorBlock**: Skips non-content segments in YouTube trailers (if the data exists).
|
* **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).
|
* **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).
|
* **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.
|
* **Enable Loading Screen**: Enable/disable the loading indicator while the bar initializes.
|
||||||
|
|||||||
@@ -9,12 +9,12 @@
|
|||||||
"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.1.11",
|
"version": "1.6.1.23",
|
||||||
"changelog": "- fix tv mode issue\n- refactor video playback management",
|
"changelog": "- fix tv mode issue\n- refactor video playback management",
|
||||||
"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.1.11/Jellyfin.Plugin.MediaBarEnhanced.zip",
|
"sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.6.1.23/Jellyfin.Plugin.MediaBarEnhanced.zip",
|
||||||
"checksum": "facf565dde91902e27b919b6fd0bc9fb",
|
"checksum": "49da653098d471e82999ecd6726cf067",
|
||||||
"timestamp": "2026-02-13T01:12:46Z"
|
"timestamp": "2026-02-14T00:58:26Z"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"version": "1.6.0.2",
|
"version": "1.6.0.2",
|
||||||
|
|||||||
Reference in New Issue
Block a user