Compare commits

..

40 Commits

Author SHA1 Message Date
CodeDevMLH
a70746e095 Update manifest.json for release v1.5.1.3 [skip ci] 2026-02-10 20:12:59 +00:00
CodeDevMLH
f32283e0bf Bump version to 1.5.1.3 and update changelog for release
All checks were successful
Auto Release Plugin / build-and-release (push) Successful in 54s
2026-02-10 21:12:05 +01:00
CodeDevMLH
8f3985f307 Update manifest.json for release v1.5.1.2 [skip ci] 2026-02-10 17:39:23 +00:00
CodeDevMLH
0b2817ecff Bump version to 1.5.1.2 and update changelog for release
All checks were successful
Auto Release Plugin / build-and-release (push) Successful in 52s
2026-02-10 18:38:31 +01:00
CodeDevMLH
84faee2db4 Update manifest.json for release v1.5.1.1 [skip ci] 2026-02-10 16:58:48 +00:00
CodeDevMLH
3efa07ec51 Bump version to 1.5.1.1 and update changelog for release
All checks were successful
Auto Release Plugin / build-and-release (push) Successful in 55s
2026-02-10 17:57:54 +01:00
CodeDevMLH
af603e8803 Enhance options in mediaBarEnhanced for seasonal content, local trailers, and sorting criteria [skip ci] 2026-02-10 01:57:51 +01:00
CodeDevMLH
fe63414e4b Update manifest.json for release v1.5.1.0 [skip ci] 2026-02-10 00:51:17 +00:00
CodeDevMLH
614c86083f Bump version to 1.5.1.0 and update changelog for iOS/MacOS playback fix
All checks were successful
Auto Release Plugin / build-and-release (push) Successful in 51s
2026-02-10 01:50:27 +01:00
CodeDevMLH
17b9e8921e Update manifest.json for release v1.5.0.28 [skip ci] 2026-02-10 00:35:42 +00:00
CodeDevMLH
5075226ba8 fix wording
All checks were successful
Auto Release Plugin / build-and-release (push) Successful in 56s
2026-02-10 01:34:47 +01:00
CodeDevMLH
443fb1008b Update version to 1.5.0.28 and enhance changelog with new features and fixes [skip ci] 2026-02-10 01:32:33 +01:00
CodeDevMLH
8f12140aad Update manifest.json for release v1.5.0.28 [skip ci] 2026-02-10 00:22:00 +00:00
CodeDevMLH
1469712bb5 reverted to 25
All checks were successful
Auto Release Plugin / build-and-release (push) Successful in 54s
2026-02-10 01:21:08 +01:00
CodeDevMLH
76ff03ac17 Update manifest.json for release v1.5.0.27 [skip ci] 2026-02-10 00:16:23 +00:00
CodeDevMLH
25b1ba5f2b Bump version to 1.5.0.26 and update changelog for recent changes
All checks were successful
Auto Release Plugin / build-and-release (push) Successful in 50s
2026-02-10 01:15:33 +01:00
CodeDevMLH
eed3ca1860 Update manifest.json for release v1.5.0.25 [skip ci] 2026-02-10 00:07:06 +00:00
CodeDevMLH
0f14577f5d Bump version to 1.5.0.25 and update changelog for recent changes
All checks were successful
Auto Release Plugin / build-and-release (push) Successful in 51s
2026-02-10 01:06:15 +01:00
CodeDevMLH
9999d6a633 Update manifest.json for release v1.5.0.24 [skip ci] 2026-02-09 23:53:21 +00:00
CodeDevMLH
a935fd7d5d Bump version to 1.5.0.24 and update changelog for recent changes
All checks were successful
Auto Release Plugin / build-and-release (push) Successful in 52s
2026-02-10 00:52:29 +01:00
CodeDevMLH
60293e81e1 Update manifest.json for release v1.5.0.23 [skip ci] 2026-02-09 23:34:11 +00:00
CodeDevMLH
f54e55fe04 Bump version to 1.5.0.23 and update changelog for recent changes
All checks were successful
Auto Release Plugin / build-and-release (push) Successful in 52s
2026-02-10 00:33:19 +01:00
CodeDevMLH
b3c42e2100 Update manifest.json for release v1.5.0.22 [skip ci] 2026-02-09 23:08:41 +00:00
CodeDevMLH
20ddbb32c7 Bump version to 1.5.0.22 and update changelog for recent changes
All checks were successful
Auto Release Plugin / build-and-release (push) Successful in 50s
2026-02-10 00:07:51 +01:00
CodeDevMLH
14a5075e22 Update manifest.json for release v1.5.0.21 [skip ci] 2026-02-09 22:29:09 +00:00
CodeDevMLH
accb316a81 Bump version to 1.5.0.21 and update changelog for recent changes
All checks were successful
Auto Release Plugin / build-and-release (push) Successful in 55s
2026-02-09 23:28:15 +01:00
CodeDevMLH
51c5cdf5bf Update manifest.json for release v1.5.0.20 [skip ci] 2026-02-09 16:53:01 +00:00
CodeDevMLH
306eff757b Update changelog formatting for version 1.5.0.20
All checks were successful
Auto Release Plugin / build-and-release (push) Successful in 51s
2026-02-09 17:52:10 +01:00
CodeDevMLH
b8f28a5735 Bump version to 1.5.0.20 and update changelog for recent changes
Some checks failed
Auto Release Plugin / build-and-release (push) Has been cancelled
2026-02-09 17:49:36 +01:00
CodeDevMLH
0932d9611d Update manifest.json for release v1.5.0.19 [skip ci] 2026-02-09 16:33:56 +00:00
CodeDevMLH
5e616db0ae Bump version to 1.5.0.19 and update changelog for recent changes
All checks were successful
Auto Release Plugin / build-and-release (push) Successful in 57s
2026-02-09 17:32:59 +01:00
CodeDevMLH
538b0f2110 Update manifest.json for release v1.5.0.18 [skip ci] 2026-02-09 16:21:43 +00:00
CodeDevMLH
e717c07c54 Bump version to 1.5.0.18 and update changelog for recent changes
All checks were successful
Auto Release Plugin / build-and-release (push) Successful in 1m2s
2026-02-09 17:20:40 +01:00
CodeDevMLH
0fa2d01ca3 Update manifest.json for release v1.5.0.17 [skip ci] 2026-02-09 16:05:12 +00:00
CodeDevMLH
5299b2a9d5 Bump version to 1.5.0.17 and update changelog for recent changes
All checks were successful
Auto Release Plugin / build-and-release (push) Successful in 57s
2026-02-09 17:04:15 +01:00
CodeDevMLH
4f244988b9 Update manifest.json for release v1.5.0.16 [skip ci] 2026-02-09 15:54:25 +00:00
CodeDevMLH
5635a8f05e Bump version to 1.5.0.16 and update changelog for keyboard controls and sorting options
All checks were successful
Auto Release Plugin / build-and-release (push) Successful in 52s
2026-02-09 16:53:33 +01:00
CodeDevMLH
c901da4b0c Update manifest.json for release v1.5.0.15 [skip ci] 2026-02-09 15:41:45 +00:00
CodeDevMLH
c45cd0281f Bump version to 1.5.0.15 in project file and manifest.json
All checks were successful
Auto Release Plugin / build-and-release (push) Successful in 51s
2026-02-09 16:40:24 +01:00
CodeDevMLH
0c3e74829a Remove upstream trailer layout feature from configuration and UI 2026-02-09 16:40:01 +01:00
6 changed files with 150 additions and 177 deletions

View File

@@ -36,7 +36,6 @@ namespace Jellyfin.Plugin.MediaBarEnhanced.Configuration
public bool EnableSeasonalContent { get; set; } = false; public bool EnableSeasonalContent { get; set; } = false;
public bool IsEnabled { get; set; } = true; public bool IsEnabled { get; set; } = true;
public bool EnableClientSideSettings { get; set; } = false; public bool EnableClientSideSettings { get; set; } = false;
public bool EnableUpstreamTrailerLayout { get; set; } = false;
public string SortBy { get; set; } = "Random"; public string SortBy { get; set; } = "Random";
public string SortOrder { get; set; } = "Ascending"; public string SortOrder { get; set; } = "Ascending";
} }

View File

@@ -73,14 +73,6 @@
</label> </label>
<div class="fieldDescription">Delay slide transition until trailer finishes.</div> <div class="fieldDescription">Delay slide transition until trailer finishes.</div>
</div> </div>
<div id="UpstreamTrailerLayoutContainer" class="checkboxContainer checkboxContainer-withDescription">
<label>
<input is="emby-checkbox" type="checkbox" id="EnableUpstreamTrailerLayout"
name="EnableUpstreamTrailerLayout" />
<span>Enable Upstream Trailer Layout</span>
</label>
<div class="fieldDescription">Use the upstream (original) layout for trailers. This renders the video inside a container overlaying the backdrop, instead of replacing it to support full-width video.</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription"> <div class="checkboxContainer checkboxContainer-withDescription">
<label> <label>
<input is="emby-checkbox" type="checkbox" id="EnableMobileVideo" <input is="emby-checkbox" type="checkbox" id="EnableMobileVideo"
@@ -190,8 +182,7 @@
</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" <select is="emby-select" id="PreferredVideoQuality" name="PreferredVideoQuality" class="selectLayout emby-select-withcolor emby-select">
class="emby-select-withcolor emby-select">
<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>
@@ -293,7 +284,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="emby-select-withcolor emby-select"> <select is="emby-select" id="SortBy" name="SortBy" class="selectLayout emby-select-withcolor emby-select">
<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>
@@ -307,7 +298,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="emby-select-withcolor emby-select"> <select is="emby-select" id="SortOrder" name="SortOrder" class="selectLayout emby-select-withcolor emby-select">
<option value="Ascending">Ascending</option> <option value="Ascending">Ascending</option>
<option value="Descending">Descending</option> <option value="Descending">Descending</option>
</select> </select>
@@ -414,7 +405,7 @@
'ShowTrailerButton', 'AlwaysShowArrows', 'EnableKeyboardControls', 'ShowTrailerButton', 'AlwaysShowArrows', 'EnableKeyboardControls',
'EnableCustomMediaIds', 'CustomMediaIds', 'EnableLoadingScreen', 'EnableCustomMediaIds', 'CustomMediaIds', 'EnableLoadingScreen',
'EnableSeasonalContent', 'EnableClientSideSettings', 'SortBy', 'SortOrder', 'EnableSeasonalContent', 'EnableClientSideSettings', 'SortBy', 'SortOrder',
'PreferLocalTrailers', 'EnableUpstreamTrailerLayout' 'PreferLocalTrailers'
]; ];
keys.forEach(function (key) { keys.forEach(function (key) {
@@ -451,15 +442,12 @@
// Handle Prefer Local Trailers visibility // Handle Prefer Local Trailers visibility
var enableVideoBackdropCheckbox = page.querySelector('#EnableVideoBackdrop'); var enableVideoBackdropCheckbox = page.querySelector('#EnableVideoBackdrop');
var preferLocalContainer = page.querySelector('#PreferLocalTrailersContainer'); var preferLocalContainer = page.querySelector('#PreferLocalTrailersContainer');
var upstreamLayoutContainer = page.querySelector('#UpstreamTrailerLayoutContainer');
function updatePreferLocalVisibility() { function updatePreferLocalVisibility() {
if (enableVideoBackdropCheckbox && enableVideoBackdropCheckbox.checked) { if (enableVideoBackdropCheckbox && enableVideoBackdropCheckbox.checked) {
if (preferLocalContainer) preferLocalContainer.style.display = 'block'; if (preferLocalContainer) preferLocalContainer.style.display = 'block';
if (upstreamLayoutContainer) upstreamLayoutContainer.style.display = 'block';
} else { } else {
if (preferLocalContainer) preferLocalContainer.style.display = 'none'; if (preferLocalContainer) preferLocalContainer.style.display = 'none';
if (upstreamLayoutContainer) upstreamLayoutContainer.style.display = 'none';
} }
} }
@@ -484,7 +472,7 @@
'ShowTrailerButton', 'AlwaysShowArrows', 'EnableKeyboardControls', 'ShowTrailerButton', 'AlwaysShowArrows', 'EnableKeyboardControls',
'EnableCustomMediaIds', 'CustomMediaIds', 'EnableLoadingScreen', 'EnableCustomMediaIds', 'CustomMediaIds', 'EnableLoadingScreen',
'EnableSeasonalContent', 'EnableClientSideSettings', 'SortBy', 'SortOrder', 'EnableSeasonalContent', 'EnableClientSideSettings', 'SortBy', 'SortOrder',
'PreferLocalTrailers', 'EnableUpstreamTrailerLayout' 'PreferLocalTrailers'
]; ];
keys.forEach(function (key) { keys.forEach(function (key) {

View File

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

View File

@@ -1,6 +1,6 @@
/* /*
* Jellyfin Slideshow by M0RPH3US v3.0.9 * Jellyfin Slideshow by M0RPH3US v4.0.1
* Modified by CodeDevMLH v1.1.0.0 * Modified by CodeDevMLH
* *
* New features: * New features:
* - optional Trailer background video support * - optional Trailer background video support
@@ -14,6 +14,9 @@
* - option to disable loading screen * - option to disable loading screen
* - option to put collection (boxsets) IDs into the slideshow to display their items * - option to put collection (boxsets) IDs into the slideshow to display their items
* - option to enable client-side settings (allow users to override settings locally on their device) * - option to enable client-side settings (allow users to override settings locally on their device)
* - option to enable seasonal content (only show items that are relevant to the current season/holiday)
* - option to prefer local trailers (from the media item) over online sources
* - options to sort the content by various criteria (PremiereDate, ProductionYear, Random, Original order, etc.)
*/ */
@import url(https://fonts.googleapis.com/css2?family=Archivo+Narrow:ital,wght@0,400..700;1,400..700&display=swap); @import url(https://fonts.googleapis.com/css2?family=Archivo+Narrow:ital,wght@0,400..700;1,400..700&display=swap);
@@ -343,50 +346,6 @@
z-index: 1; z-index: 1;
} }
.video-container {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 0;
z-index: 2;
overflow: hidden;
transition:
width 0.5s ease-in-out,
opacity 0.5s ease-in-out;
opacity: 0;
pointer-events: none;
mask-image:
linear-gradient(to right, transparent 10%, black 30%),
linear-gradient(to top, transparent 2%, rgba(0, 0, 0, 0.5) 6%, black 8%);
-webkit-mask-image:
linear-gradient(to right, transparent 10%, black 30%),
linear-gradient(to top, transparent 2%, rgba(0, 0, 0, 0.5) 6%, black 8%);
mask-composite: intersect;
-webkit-mask-composite: source-in;
}
.video-container.active {
opacity: 1;
pointer-events: auto;
width: 100%;
}
.video-player {
width: 100%;
height: 100%;
}
/* Ensure video inside container fills it */
.video-container iframe,
.video-container video {
width: 100%;
height: 100%;
border: none;
}
.backdrop-container { .backdrop-container {
position: absolute; position: absolute;
top: 0%; top: 0%;
@@ -423,10 +382,6 @@
object-position: center 20%; object-position: center 20%;
border-radius: 5px; border-radius: 5px;
z-index: 3; z-index: 3;
transition:
width 0.5s ease-in-out,
mask-image 0.5s ease-in-out,
-webkit-mask-image 0.5s ease-in-out;
mask-image: linear-gradient(to top, mask-image: linear-gradient(to top,
#fff0 2%, #fff0 2%,
rgb(0 0 0 / 0.5) 6%, rgb(0 0 0 / 0.5) 6%,
@@ -437,20 +392,6 @@
#000000 8%); #000000 8%);
} }
.backdrop.with-video {
width: 100%;
mask-image:
linear-gradient(to top, #fff0 2%, rgb(0 0 0 / 0.5) 6%, #000000 8%),
linear-gradient(to right, black 30%, transparent 85%);
-webkit-mask-image:
linear-gradient(to top, #fff0 2%, rgb(0 0 0 / 0.5) 6%, #000000 8%),
linear-gradient(to right, black 30%, transparent 85%);
mask-composite: source-in;
-webkit-mask-composite: source-in;
}
.backdrop-overlay { .backdrop-overlay {
position: absolute; position: absolute;
top: 0; top: 0;
@@ -1053,4 +994,4 @@
.dots-container .slide-counter { .dots-container .slide-counter {
margin: 0; margin: 0;
} }

View File

@@ -1,6 +1,6 @@
/* /*
* Jellyfin Slideshow by M0RPH3US v4.0.1 * Jellyfin Slideshow by M0RPH3US v4.0.1
* Modified by CodeDevMLH v1.1.0.0 * Modified by CodeDevMLH
* *
* New features: * New features:
* - optional Trailer background video support * - optional Trailer background video support
@@ -14,6 +14,9 @@
* - option to disable loading screen * - option to disable loading screen
* - option to put collection (boxsets) IDs into the slideshow to display their items * - option to put collection (boxsets) IDs into the slideshow to display their items
* - option to enable client-side settings (allow users to override settings locally on their device) * - option to enable client-side settings (allow users to override settings locally on their device)
* - option to enable seasonal content (only show items that are relevant to the current season/holiday)
* - option to prefer local trailers (from the media item) over online sources
* - options to sort the content by various criteria (PremiereDate, ProductionYear, Random, Original order, etc.)
*/ */
//Core Module Configuration //Core Module Configuration
@@ -52,7 +55,6 @@ const CONFIG = {
customMediaIds: "", customMediaIds: "",
enableLoadingScreen: true, enableLoadingScreen: true,
enableClientSideSettings: false, enableClientSideSettings: false,
enableUpstreamTrailerLayout: false,
sortBy: "Random", sortBy: "Random",
sortOrder: "Ascending", sortOrder: "Ascending",
}; };
@@ -86,6 +88,7 @@ const STATE = {
isMuted: CONFIG.startMuted, isMuted: CONFIG.startMuted,
customTrailerUrls: {}, customTrailerUrls: {},
ytPromise: null, ytPromise: null,
autoplayTimeouts: [],
}, },
}; };
@@ -606,7 +609,10 @@ const SlideUtils = {
getOrCreateSlidesContainer() { getOrCreateSlidesContainer() {
let container = document.getElementById("slides-container"); let container = document.getElementById("slides-container");
if (!container) { if (!container) {
container = this.createElement("div", { id: "slides-container" }); container = this.createElement("div", {
id: "slides-container",
className: "noautofocus"
});
document.body.appendChild(container); document.body.appendChild(container);
} }
return container; return container;
@@ -734,7 +740,9 @@ const SlideUtils = {
autoplay: 1, autoplay: 1,
controls: 1, controls: 1,
iv_load_policy: 3, iv_load_policy: 3,
rel: 0 rel: 0,
playsinline: 1,
origin: window.location.origin
} }
}); });
}); });
@@ -1414,6 +1422,24 @@ class SlideTimer {
*/ */
const VisibilityObserver = { const VisibilityObserver = {
updateVisibility() { updateVisibility() {
const videoPlayer = document.querySelector('.videoPlayerContainer');
const trailerPlayer = document.querySelector('.youtubePlayerContainer');
// If a full screen video player is active, hide slideshow and stop playback
if ((videoPlayer && !videoPlayer.classList.contains('hide')) || (trailerPlayer && !trailerPlayer.classList.contains('hide'))) {
const container = document.getElementById("slides-container");
if (container) {
container.style.display = "none";
container.style.visibility = "hidden";
container.style.pointerEvents = "none";
}
if (STATE.slideshow.slideInterval) {
STATE.slideshow.slideInterval.stop();
}
SlideshowManager.stopAllPlayback();
return;
}
const activeTab = document.querySelector(".emby-tab-button-active"); const activeTab = document.querySelector(".emby-tab-button-active");
const container = document.getElementById("slides-container"); const container = document.getElementById("slides-container");
@@ -1538,7 +1564,6 @@ const SlideCreator = {
let backdrop; let backdrop;
let isVideo = false; let isVideo = false;
let hasUpstreamVideo = false;
let trailerUrl = null; let trailerUrl = null;
// 1. Check for Remote/Local Trailers // 1. Check for Remote/Local Trailers
@@ -1586,31 +1611,13 @@ const SlideCreator = {
if (isYoutube && videoId) { if (isYoutube && videoId) {
isVideo = true; isVideo = true;
// Create container for YouTube API
const videoClass = CONFIG.fullWidthVideo ? "video-backdrop-full" : "video-backdrop-default"; const videoClass = CONFIG.fullWidthVideo ? "video-backdrop-full" : "video-backdrop-default";
if (CONFIG.enableUpstreamTrailerLayout) { backdrop = SlideUtils.createElement("div", {
// UPSTREAM LAYOUT: Wrapper Container className: `backdrop video-backdrop ${videoClass}`,
const videoContainer = SlideUtils.createElement("div", { id: `youtube-player-${itemId}`
className: "video-container", });
id: `video-container-${itemId}`
});
const playerDiv = SlideUtils.createElement("div", {
id: `youtube-player-${itemId}`
});
videoContainer.appendChild(playerDiv);
slide.appendChild(videoContainer); // Append container first
isVideo = false;
hasUpstreamVideo = true;
} else {
// ENHANCED LAYOUT: Direct Backdrop Replacement
backdrop = SlideUtils.createElement("div", {
className: `backdrop video-backdrop ${videoClass}`,
id: `youtube-player-${itemId}`
});
}
// Initialize YouTube Player // Initialize YouTube Player
SlideUtils.loadYouTubeIframeAPI().then(() => { SlideUtils.loadYouTubeIframeAPI().then(() => {
@@ -1624,7 +1631,9 @@ const SlideCreator = {
fs: 0, fs: 0,
iv_load_policy: 3, iv_load_policy: 3,
rel: 0, rel: 0,
loop: 0 loop: 0,
playsinline: 1,
origin: window.location.origin
}; };
// Determine video quality // Determine video quality
@@ -1677,10 +1686,23 @@ const SlideCreator = {
// Only play if this is the active slide // Only play if this is the active slide
const slide = document.querySelector(`.slide[data-item-id="${itemId}"]`); const slide = document.querySelector(`.slide[data-item-id="${itemId}"]`);
if (slide && slide.classList.contains('active')) { const isVideoPlayerOpen = document.querySelector('.videoPlayerContainer') || document.querySelector('.youtubePlayerContainer');
if (slide && slide.classList.contains('active') && !document.hidden && (!isVideoPlayerOpen || isVideoPlayerOpen.classList.contains('hide'))) {
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)
setTimeout(() => { const timeoutId = setTimeout(() => {
// Re-check conditions before processing fallback
const isVideoPlayerOpenNow = document.querySelector('.videoPlayerContainer') || document.querySelector('.youtubePlayerContainer');
if (document.hidden || (isVideoPlayerOpenNow && !isVideoPlayerOpenNow.classList.contains('hide')) || !slide.classList.contains('active')) {
console.log(`Navigation detected during autoplay check for ${itemId}, stopping video.`);
try {
event.target.stopVideo();
} catch (e) { console.warn("Error stopping video in timeout:", e); }
return;
}
if (event.target.getPlayerState() !== YT.PlayerState.PLAYING && if (event.target.getPlayerState() !== YT.PlayerState.PLAYING &&
event.target.getPlayerState() !== YT.PlayerState.BUFFERING) { event.target.getPlayerState() !== YT.PlayerState.BUFFERING) {
console.warn(`Autoplay blocked for ${itemId}, attempting muted fallback`); console.warn(`Autoplay blocked for ${itemId}, attempting muted fallback`);
@@ -1689,6 +1711,9 @@ const SlideCreator = {
} }
}, 1000); }, 1000);
if (!STATE.slideshow.autoplayTimeouts) STATE.slideshow.autoplayTimeouts = [];
STATE.slideshow.autoplayTimeouts.push(timeoutId);
// Pause slideshow timer when video starts if configured // Pause slideshow timer when video starts if configured
if (CONFIG.waitForTrailerToEnd && STATE.slideshow.slideInterval) { if (CONFIG.waitForTrailerToEnd && STATE.slideshow.slideInterval) {
STATE.slideshow.slideInterval.stop(); STATE.slideshow.slideInterval.stop();
@@ -1696,19 +1721,7 @@ const SlideCreator = {
} }
}, },
'onStateChange': (event) => { 'onStateChange': (event) => {
const slide = document.querySelector(`.slide[data-item-id="${itemId}"]`);
const videoContainer = slide ? slide.querySelector('.video-container') : null;
if (event.data === YT.PlayerState.PLAYING || event.data === YT.PlayerState.BUFFERING) {
if (videoContainer) videoContainer.classList.add('active');
} else {
if (videoContainer && event.data !== YT.PlayerState.BUFFERING) {
videoContainer.classList.remove('active');
}
}
if (event.data === YT.PlayerState.ENDED) { if (event.data === YT.PlayerState.ENDED) {
if (videoContainer) videoContainer.classList.remove('active');
if (CONFIG.waitForTrailerToEnd) { if (CONFIG.waitForTrailerToEnd) {
SlideshowManager.nextSlide(); SlideshowManager.nextSlide();
} else { } else {
@@ -1717,7 +1730,6 @@ const SlideCreator = {
} }
}, },
'onError': () => { 'onError': () => {
if (videoContainer) videoContainer.classList.remove('active');
// Fallback to next slide on error // Fallback to next slide on error
if (CONFIG.waitForTrailerToEnd) { if (CONFIG.waitForTrailerToEnd) {
SlideshowManager.nextSlide(); SlideshowManager.nextSlide();
@@ -1770,34 +1782,12 @@ const SlideCreator = {
SlideshowManager.nextSlide(); SlideshowManager.nextSlide();
} }
}); });
if (CONFIG.enableUpstreamTrailerLayout) {
// Wrap in container
const videoContainer = SlideUtils.createElement("div", {
className: "video-container",
id: `video-container-${itemId}`
});
backdrop.style.position = "";
videoContainer.appendChild(backdrop);
slide.appendChild(videoContainer);
isVideo = false;
hasUpstreamVideo = true;
// Use requestAnimationFrame to ensure listeners attach and class adds correctly
requestAnimationFrame(() => {
backdrop.addEventListener('play', () => videoContainer.classList.add('active'));
backdrop.addEventListener('playing', () => videoContainer.classList.add('active'));
backdrop.addEventListener('pause', () => videoContainer.classList.remove('active'));
backdrop.addEventListener('ended', () => videoContainer.classList.remove('active'));
});
}
} }
} }
if (!isVideo) { if (!isVideo) {
backdrop = SlideUtils.createElement("img", { backdrop = SlideUtils.createElement("img", {
className: hasUpstreamVideo ? "backdrop high-quality with-video" : "backdrop high-quality", className: "backdrop high-quality",
src: this.buildImageUrl(item, "Backdrop", 0, serverAddress, 60), src: this.buildImageUrl(item, "Backdrop", 0, serverAddress, 60),
alt: LocalizationUtils.getLocalizedString('Backdrop', 'Backdrop'), alt: LocalizationUtils.getLocalizedString('Backdrop', 'Backdrop'),
loading: "eager", loading: "eager",
@@ -2599,15 +2589,26 @@ const SlideshowManager = {
* Used when navigating away from the home screen * Used when navigating away from the home screen
*/ */
stopAllPlayback() { stopAllPlayback() {
// 1. Pause all YouTube players // Clear any pending autoplay timeouts
if (STATE.slideshow.autoplayTimeouts) {
STATE.slideshow.autoplayTimeouts.forEach(id => clearTimeout(id));
STATE.slideshow.autoplayTimeouts = [];
}
// 1. Stop all YouTube players
if (STATE.slideshow.videoPlayers) { if (STATE.slideshow.videoPlayers) {
Object.values(STATE.slideshow.videoPlayers).forEach(player => { Object.values(STATE.slideshow.videoPlayers).forEach(player => {
try { try {
if (player && typeof player.pauseVideo === 'function') { if (player && typeof player.stopVideo === 'function') {
player.stopVideo();
if (typeof player.clearVideo === 'function') {
player.clearVideo();
}
} else if (player && typeof player.pauseVideo === 'function') {
player.pauseVideo(); player.pauseVideo();
} }
} catch (e) { } catch (e) {
console.warn("Error pausing YouTube player:", e); console.warn("Error pausing/stopping YouTube player:", e);
} }
}); });
} }
@@ -2710,40 +2711,76 @@ const SlideshowManager = {
return; return;
} }
const activeElement = document.activeElement;
const isTvDevice = window.browser && window.browser.tv;
const isTvLayout = window.layoutManager && window.layoutManager.tv;
const hasTvClass = document.documentElement.classList.contains('layout-tv') || document.body.classList.contains('layout-tv');
const isTvMode = isTvDevice || isTvLayout || hasTvClass;
// Check Focus State
const isBodyFocused = activeElement === document.body;
const hasDirectFocus = container.contains(activeElement) || activeElement === container;
// Determine if we should handle navigation keys (Arrows, Space, M)
// TV Mode: Strict focus required (must be on slideshow)
// Desktop Mode: Loose focus allowed (slideshow OR body/nothing focused)
const canControlSlideshow = isTvMode ? hasDirectFocus : (hasDirectFocus || isBodyFocused);
// Check for Input Fields (always ignore typing)
const isInputElement = activeElement && (activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA' || activeElement.isContentEditable);
if (isInputElement) return;
// Check active video players (ignore if video is playing/overlay is open)
const videoPlayer = document.querySelector('.videoPlayerContainer');
const trailerPlayer = document.querySelector('.youtubePlayerContainer');
const isVideoOpen = (videoPlayer && !videoPlayer.classList.contains('hide')) || (trailerPlayer && !trailerPlayer.classList.contains('hide'));
if (isVideoOpen) return;
switch (e.key) { switch (e.key) {
case "ArrowRight": case "ArrowRight":
SlideshowManager.nextSlide(); if (canControlSlideshow) {
e.preventDefault(); SlideshowManager.nextSlide();
e.preventDefault();
}
break; break;
case "ArrowLeft": case "ArrowLeft":
SlideshowManager.prevSlide(); if (canControlSlideshow) {
e.preventDefault(); SlideshowManager.prevSlide();
e.preventDefault();
}
break; break;
case " ": // Space bar case " ": // Space bar
this.togglePause(); if (canControlSlideshow) {
e.preventDefault(); this.togglePause();
e.preventDefault();
}
break; break;
case "m": // Mute toggle case "m": // Mute toggle
case "M": case "M":
this.toggleMute(); if (canControlSlideshow) {
e.preventDefault(); this.toggleMute();
e.preventDefault();
}
break; break;
case "Enter": case "Enter":
const currentItemId = STATE.slideshow.itemIds[STATE.slideshow.currentSlideIndex]; // Enter always requires direct focus on the slideshow to avoid conflicts
if (currentItemId) { if (hasDirectFocus) {
if (window.Emby && window.Emby.Page) { const currentItemId = STATE.slideshow.itemIds[STATE.slideshow.currentSlideIndex];
Emby.Page.show( if (currentItemId) {
`/details?id=${currentItemId}&serverId=${STATE.jellyfinData.serverId}` if (window.Emby && window.Emby.Page) {
); Emby.Page.show(
} else { `/details?id=${currentItemId}&serverId=${STATE.jellyfinData.serverId}`
window.location.href = `#/details?id=${currentItemId}&serverId=${STATE.jellyfinData.serverId}`; );
} } else {
window.location.href = `#/details?id=${currentItemId}&serverId=${STATE.jellyfinData.serverId}`;
}
}
e.preventDefault();
} }
e.preventDefault();
break; break;
} }
}); });

View File

@@ -9,12 +9,20 @@
"imageUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/raw/branch/main/logo.png", "imageUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/raw/branch/main/logo.png",
"versions": [ "versions": [
{ {
"version": "1.5.0.14", "version": "1.5.1.3",
"changelog": "- fix: keyboard controls in TV mode\n- Add sorting options for content\n- Update mediaBarEnhanced.js and mediaBarEnhanced.css with version 4.0.1 from original repo", "changelog": "- fix: iOS/MacOS playback issue?",
"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.5.0.14/Jellyfin.Plugin.MediaBarEnhanced.zip", "sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.5.1.3/Jellyfin.Plugin.MediaBarEnhanced.zip",
"checksum": "c2ed0d5ac38c3be6f904027fef0ff8eb", "checksum": "9d9dbed453673d4b78acf2adaaaee126",
"timestamp": "2026-02-09T15:30:51Z" "timestamp": "2026-02-10T20:12:59Z"
},
{
"version": "1.5.0.28",
"changelog": "- fix: Keyboard controls in TV mode\n- Add sorting options for content\n- Add local trailer support\n- fix performance issue\n- Update mediaBarEnhanced.js and mediaBarEnhanced.css with version 4.0.1 from upstream repo",
"targetAbi": "10.11.0.0",
"sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.5.0.28/Jellyfin.Plugin.MediaBarEnhanced.zip",
"checksum": "0261ff27be18d48cefa5078706954240",
"timestamp": "2026-02-10T00:35:41Z"
}, },
{ {
"version": "1.3.0.3", "version": "1.3.0.3",