Compare commits

..

22 Commits

Author SHA1 Message Date
CodeDevMLH
b2dbd6df45 Update manifest.json for release v1.7.1.13 [skip ci] 2026-03-08 22:50:48 +00:00
CodeDevMLH
60c72a01b1 Bump version to 1.7.1.13 in project file and manifest for release
All checks were successful
Auto Release Plugin / build-and-release (push) Successful in 44s
2026-03-08 23:50:03 +01:00
CodeDevMLH
9f7ef3c96b Refactor button background colors for improved visibility and update YouTube iframe attributes for better playback control 2026-03-08 23:49:49 +01:00
CodeDevMLH
7ffcfa68c1 Update manifest.json for release v1.7.1.12 [skip ci] 2026-03-08 22:15:28 +00:00
CodeDevMLH
aaf21d3c33 Bump version to 1.7.1.12 in project file and manifest for release
All checks were successful
Auto Release Plugin / build-and-release (push) Successful in 45s
2026-03-08 23:14:42 +01:00
CodeDevMLH
9758ecd417 Add background color to detail and favorite buttons for improved visibility 2026-03-08 23:14:09 +01:00
CodeDevMLH
a4547d80b1 Update manifest.json for release v1.7.1.11 [skip ci] 2026-03-08 22:06:37 +00:00
CodeDevMLH
671e38ff32 Bump version to 1.7.1.11 in project file and manifest for release
All checks were successful
Auto Release Plugin / build-and-release (push) Successful in 45s
2026-03-08 23:05:51 +01:00
CodeDevMLH
0e9d0f9d09 Remove appearance properties from button styles and add background color and text color to button for improved visibility 2026-03-08 23:05:38 +01:00
CodeDevMLH
5f296f3c88 Update manifest.json for release v1.7.1.10 [skip ci] 2026-03-08 21:36:22 +00:00
CodeDevMLH
a14b3ca8b5 Bump version to 1.7.1.10 in project file and manifest
All checks were successful
Auto Release Plugin / build-and-release (push) Successful in 45s
2026-03-08 22:35:35 +01:00
CodeDevMLH
4d12e34d01 Enhance CSS styles for buttons and overlays, improving appearance and consistency 2026-03-08 22:35:31 +01:00
CodeDevMLH
59fe6f7083 Update manifest.json for release v1.7.1.9 [skip ci] 2026-03-08 20:58:25 +00:00
CodeDevMLH
dcb2164ea1 Bump version to 1.7.1.9
All checks were successful
Auto Release Plugin / build-and-release (push) Successful in 44s
2026-03-08 21:57:41 +01:00
CodeDevMLH
2f71f7b46b Improve null checks and conditionals for better stability in localization and slideshow management
Some checks failed
Auto Release Plugin / build-and-release (push) Has been cancelled
2026-03-08 21:57:22 +01:00
CodeDevMLH
70b0a2a192 Update manifest.json for release v1.7.1.8 [skip ci] 2026-03-08 19:29:25 +00:00
CodeDevMLH
300c76890b Bump version to 1.7.1.8 in project file and manifest
All checks were successful
Auto Release Plugin / build-and-release (push) Successful in 46s
2026-03-08 20:28:38 +01:00
CodeDevMLH
64e5441aff Optimize slideshow distance calculation for circular navigation 2026-03-08 20:28:20 +01:00
CodeDevMLH
f47c9dde88 Update manifest.json for release v1.7.1.7 [skip ci] 2026-03-08 19:15:10 +00:00
CodeDevMLH
9d42b5af8d Merge branch 'main' of ssh://git.mahom03-spacecloud.de:44322/CodeDevMLH/jellyfin-plugin-media-bar-enhanced
All checks were successful
Auto Release Plugin / build-and-release (push) Successful in 46s
2026-03-08 20:14:23 +01:00
CodeDevMLH
8c5f66716f Update version to 1.7.1.7 and enhance changelog with new features and fixes 2026-03-08 20:09:58 +01:00
CodeDevMLH
41e6c1032d Add Hide Arrows on Mobile option to configuration and update related logic 2026-03-08 20:09:47 +01:00
6 changed files with 97 additions and 109 deletions

View File

@@ -36,6 +36,7 @@ namespace Jellyfin.Plugin.MediaBarEnhanced.Configuration
public bool EnableLoadingScreen { get; set; } = true; public bool EnableLoadingScreen { get; set; } = true;
public bool EnableKeyboardControls { get; set; } = true; public bool EnableKeyboardControls { get; set; } = true;
public bool AlwaysShowArrows { get; set; } = false; public bool AlwaysShowArrows { get; set; } = false;
public bool HideArrowsOnMobile { get; set; } = true;
public string CustomMediaIds { get; set; } = ""; public string CustomMediaIds { get; set; } = "";
public bool EnableCustomMediaIds { get; set; } = true; public bool EnableCustomMediaIds { get; set; } = true;
public string PreferredVideoQuality { get; set; } = "Auto"; public string PreferredVideoQuality { get; set; } = "Auto";

View File

@@ -78,7 +78,7 @@
<div class="fieldDescription">If enabled, local backdrop videos (Theme Videos) will be <div class="fieldDescription">If enabled, local backdrop videos (Theme Videos) will be
preferred over remote and local trailers.</div> preferred over remote and local trailers.</div>
</div> </div>
<div class="checkboxContainer checkboxContainer-withDescription"> <div class="checkboxContainer checkboxContainer-withDescription" id="WaitForTrailerToEndContainer">
<label> <label>
<input is="emby-checkbox" type="checkbox" id="WaitForTrailerToEnd" <input is="emby-checkbox" type="checkbox" id="WaitForTrailerToEnd"
name="WaitForTrailerToEnd" /> name="WaitForTrailerToEnd" />
@@ -86,7 +86,7 @@
</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 class="checkboxContainer checkboxContainer-withDescription"> <div class="checkboxContainer checkboxContainer-withDescription" id="EnableMobileVideoContainer">
<label> <label>
<input is="emby-checkbox" type="checkbox" id="EnableMobileVideo" <input is="emby-checkbox" type="checkbox" id="EnableMobileVideo"
name="EnableMobileVideo" /> name="EnableMobileVideo" />
@@ -100,8 +100,8 @@
name="ShowTrailerButton" /> name="ShowTrailerButton" />
<span>Show Trailer Button</span> <span>Show Trailer Button</span>
</label> </label>
<div class="fieldDescription">Display a button to open trailer in modal. Only visible if <div class="fieldDescription">Display a button to open trailer in modal. Button only
trailer is not set as backdrop or if no trailer is available.</div> visible if trailer is not set as backdrop.</div>
</div> </div>
</div> </div>
@@ -183,6 +183,7 @@
during their active date ranges. If no season matches the current date, the default 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> Custom Media IDs above or random selection are used as fallback.</div>
</div> </div>
<div id="seasonalContentContainer" style="display: none;">
<div class="checkboxContainer checkboxContainer-withDescription"> <div class="checkboxContainer checkboxContainer-withDescription">
<label> <label>
<input is="emby-checkbox" type="checkbox" id="ExcludeSeasonalContent" <input is="emby-checkbox" type="checkbox" id="ExcludeSeasonalContent"
@@ -191,7 +192,6 @@
</label> </label>
<div class="fieldDescription">When enabled, any items defined in your Seasonal Sections below will be explicitly excluded from being shown when the plugin pulls random items from your library.</div> <div class="fieldDescription">When enabled, any items defined in your Seasonal Sections below will be explicitly excluded from being shown when the plugin pulls random items from your library.</div>
</div> </div>
<div id="seasonalContentContainer" style="display: none;">
<div <div
style="background-color: rgba(255, 255, 255, 0.05); border-left: 4px solid #00a4dc; border-radius: 4px; padding: 1em 1.5em; margin: 1.5em 0; display: flex; align-items: center; gap: 1em;"> style="background-color: rgba(255, 255, 255, 0.05); border-left: 4px solid #00a4dc; border-radius: 4px; padding: 1em 1.5em; margin: 1.5em 0; display: flex; align-items: center; gap: 1em;">
@@ -299,16 +299,23 @@
<span>Enable Loading Screen</span> <span>Enable Loading Screen</span>
</label> </label>
<div class="fieldDescription">Show a loading screen while the slideshow initializes. (You <div class="fieldDescription">Show a loading screen while the slideshow initializes. (You
may have to reload the page twice)</div> may have to reload the page twice (after changing this setting) to take effect)</div>
</div> </div>
<div class="checkboxContainer checkboxContainer-withDescription"> <div class="checkboxContainer checkboxContainer-withDescription">
<label> <label>
<input is="emby-checkbox" type="checkbox" id="AlwaysShowArrows" <input is="emby-checkbox" type="checkbox" id="AlwaysShowArrows"
name="AlwaysShowArrows" /> name="AlwaysShowArrows" />
<span>Always Show Arrows</span> <span>Always Show Arrow Navigation Buttons</span>
</label> </label>
<div class="fieldDescription">If enabled, navigation arrows will always be visible instead <div class="fieldDescription">Force the UI arrow navigation buttons to always be visible instead of only when hovered.</div>
of only on hover.</div> </div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label>
<input is="emby-checkbox" type="checkbox" id="HideArrowsOnMobile"
name="HideArrowsOnMobile" />
<span>Hide Arrows on Mobile</span>
</label>
<div class="fieldDescription">Completely disable the navigation arrows on mobile devices (since swiping is available).</div>
</div> </div>
<div class="checkboxContainer checkboxContainer-withDescription"> <div class="checkboxContainer checkboxContainer-withDescription">
<label> <label>
@@ -320,6 +327,7 @@
Space (pause), M (mute/unmute)) for Space (pause), M (mute/unmute)) for
the slideshow.</div> the slideshow.</div>
</div> </div>
<hr style="max-width: 800px; margin: 1em 0;">
<h2 class="sectionTitle">Time Settings</h2> <h2 class="sectionTitle">Time Settings</h2>
<p>Leave a setting blank to use the default value.</p> <p>Leave a setting blank to use the default value.</p>
@@ -363,6 +371,7 @@
<div class="fieldDescription">Minimum distance in pixels for a swipe to be registered (for <div class="fieldDescription">Minimum distance in pixels for a swipe to be registered (for
mobile).</div> mobile).</div>
</div> </div>
<hr style="max-width: 800px; margin: 1em 0;">
<h2 class="sectionTitle">Content Sorting and Filtering</h2> <h2 class="sectionTitle">Content Sorting and Filtering</h2>
<div class="selectContainer"> <div class="selectContainer">
@@ -405,6 +414,16 @@
<input is="emby-input" type="number" id="MaxDaysRecent" name="MaxDaysRecent" /> <input is="emby-input" type="number" id="MaxDaysRecent" name="MaxDaysRecent" />
<div class="fieldDescription">Only show items added in the last X days. Leave blank or set to 0 for no limit. Example: 30.</div> <div class="fieldDescription">Only show items added in the last X days. Leave blank or set to 0 for no limit. Example: 30.</div>
</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>
<hr style="max-width: 800px; margin: 1em 0;">
<h2 class="sectionTitle">Content Limits</h2> <h2 class="sectionTitle">Content Limits</h2>
<p>Leave a setting blank to use the default value.</p> <p>Leave a setting blank to use the default value.</p>
@@ -435,7 +454,7 @@
<label> <label>
<input is="emby-checkbox" type="checkbox" id="ShowPaginationDots" <input is="emby-checkbox" type="checkbox" id="ShowPaginationDots"
name="ShowPaginationDots" /> name="ShowPaginationDots" />
<span>Show Pagination Dots</span> <span>Show Pagination Dots/Counter</span>
</label> </label>
<div class="fieldDescription">Show or hide the pagination dots/counter navigation at the <div class="fieldDescription">Show or hide the pagination dots/counter navigation at the
bottom of the slideshow.</div> bottom of the slideshow.</div>
@@ -454,15 +473,6 @@
<input is="emby-input" type="number" id="MaxPlotLength" name="MaxPlotLength" /> <input is="emby-input" type="number" id="MaxPlotLength" name="MaxPlotLength" />
<div class="fieldDescription">Maximum characters for the plot summary.</div> <div class="fieldDescription">Maximum characters for the plot summary.</div>
</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>
<div <div
@@ -524,7 +534,7 @@
'PreferLocalTrailers', 'ApplyLimitsToCustomIds', 'SeasonalSections', 'PreferLocalTrailers', 'ApplyLimitsToCustomIds', 'SeasonalSections',
'PreferLocalBackdrops', 'RandomizeThemeVideos', 'RandomizeLocalTrailers', 'PreferLocalBackdrops', 'RandomizeThemeVideos', 'RandomizeLocalTrailers',
'IncludeWatchedContent', 'ShowPaginationDots', 'MaxParentalRating', 'IncludeWatchedContent', 'ShowPaginationDots', 'MaxParentalRating',
'MaxDaysRecent', 'ExcludeSeasonalContent' 'MaxDaysRecent', 'ExcludeSeasonalContent', 'HideArrowsOnMobile'
]; ];
// Manual mapping for MediaBarIsEnabled -> IsEnabled, to avoid conflicts with other plugins // Manual mapping for MediaBarIsEnabled -> IsEnabled, to avoid conflicts with other plugins
@@ -582,14 +592,20 @@
var enableVideoBackdropCheckbox = page.querySelector('#EnableVideoBackdrop'); var enableVideoBackdropCheckbox = page.querySelector('#EnableVideoBackdrop');
var preferLocalContainer = page.querySelector('#PreferLocalTrailersContainer'); var preferLocalContainer = page.querySelector('#PreferLocalTrailersContainer');
var preferLocalBackdropsContainer = page.querySelector('#PreferLocalBackdropsContainer'); var preferLocalBackdropsContainer = page.querySelector('#PreferLocalBackdropsContainer');
var waitForTrailerContainer = page.querySelector('#WaitForTrailerToEndContainer');
var enableMobileVideoContainer = page.querySelector('#EnableMobileVideoContainer');
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 (preferLocalBackdropsContainer) preferLocalBackdropsContainer.style.display = 'block'; if (preferLocalBackdropsContainer) preferLocalBackdropsContainer.style.display = 'block';
if (waitForTrailerContainer) waitForTrailerContainer.style.display = 'block';
if (enableMobileVideoContainer) enableMobileVideoContainer.style.display = 'block';
} else { } else {
if (preferLocalContainer) preferLocalContainer.style.display = 'none'; if (preferLocalContainer) preferLocalContainer.style.display = 'none';
if (preferLocalBackdropsContainer) preferLocalBackdropsContainer.style.display = 'none'; if (preferLocalBackdropsContainer) preferLocalBackdropsContainer.style.display = 'none';
if (waitForTrailerContainer) waitForTrailerContainer.style.display = 'none';
if (enableMobileVideoContainer) enableMobileVideoContainer.style.display = 'none';
} }
} }
@@ -629,7 +645,7 @@
'PreferLocalTrailers', 'ApplyLimitsToCustomIds', 'SeasonalSections', 'PreferLocalTrailers', 'ApplyLimitsToCustomIds', 'SeasonalSections',
'PreferLocalBackdrops', 'RandomizeThemeVideos', 'RandomizeLocalTrailers', 'PreferLocalBackdrops', 'RandomizeThemeVideos', 'RandomizeLocalTrailers',
'IncludeWatchedContent', 'ShowPaginationDots', 'MaxParentalRating', 'IncludeWatchedContent', 'ShowPaginationDots', 'MaxParentalRating',
'MaxDaysRecent', 'ExcludeSeasonalContent' 'MaxDaysRecent', 'ExcludeSeasonalContent', 'HideArrowsOnMobile'
]; ];
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.7.1.6</Version> <Version>1.7.1.13</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

@@ -353,14 +353,8 @@
right: 0%; right: 0%;
width: 100%; width: 100%;
height: 100%; height: 100%;
mask-image: linear-gradient(to top, mask-image: linear-gradient(to top, rgba(255,255,255,0) 2%, rgba(0,0,0,0.5) 6%, #000000 8%);
#fff0 2%, -webkit-mask-image: linear-gradient(to top, rgba(255,255,255,0) 2%, rgba(0,0,0,0.5) 6%, #000000 8%);
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%);
} }
.backdrop-container.full-width-video { .backdrop-container.full-width-video {
@@ -383,14 +377,8 @@
object-position: center 20%; object-position: center 20%;
border-radius: 5px; border-radius: 5px;
z-index: 3; z-index: 3;
mask-image: linear-gradient(to top, mask-image: linear-gradient(to top, rgba(255,255,255,0) 2%, rgba(0,0,0,0.5) 6%, #000000 8%);
#fff0 2%, -webkit-mask-image: linear-gradient(to top, rgba(255,255,255,0) 2%, rgba(0,0,0,0.5) 6%, #000000 8%);
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%);
} }
.backdrop-overlay { .backdrop-overlay {
@@ -402,14 +390,8 @@
background-color: rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.2);
border-radius: 5px; border-radius: 5px;
z-index: 4; z-index: 4;
mask-image: linear-gradient(to top, mask-image: linear-gradient(to top, rgba(255,255,255,0) 2%, rgba(0,0,0,0.5) 4%, #000000 6%);
#fff0 2%, -webkit-mask-image: linear-gradient(to top, rgba(255,255,255,0) 2%, rgba(0,0,0,0.5) 4%, #000000 6%);
rgb(0 0 0 / 0.5) 4%,
#000000 6%);
-webkit-mask-image: linear-gradient(to top,
#fff0 2%,
rgb(0 0 0 / 0.5) 4%,
#000000 6%);
} }
.gradient-overlay { .gradient-overlay {
@@ -423,14 +405,8 @@
rgba(29, 29, 29, 0.35) 30%, rgba(29, 29, 29, 0.35) 30%,
rgba(29, 29, 29, 0) 100%); rgba(29, 29, 29, 0) 100%);
z-index: 4; z-index: 4;
mask-image: linear-gradient(to top, mask-image: linear-gradient(to top, rgba(255,255,255,0) 2%, rgba(0,0,0,0.5) 4%, #000000 6%);
#fff0 2%, -webkit-mask-image: linear-gradient(to top, rgba(255,255,255,0) 2%, rgba(0,0,0,0.5) 4%, #000000 6%);
rgb(0 0 0 / 0.5) 4%,
#000000 6%);
-webkit-mask-image: linear-gradient(to top,
#fff0 2%,
rgb(0 0 0 / 0.5) 4%,
#000000 6%);
} }
.gradient-overlay.full-width-video { .gradient-overlay.full-width-video {
@@ -525,16 +501,21 @@
font-family: "Archivo Narrow", sans-serif; font-family: "Archivo Narrow", sans-serif;
font-size: 18px; font-size: 18px;
white-space: nowrap; white-space: nowrap;
background-color: rgb(255, 255, 255);
color: rgb(0, 0, 0);
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: all 0.3s ease;
font-weight: 700; font-weight: 700;
gap: 6px; gap: 6px;
-webkit-tap-highlight-color: #fff0; -webkit-tap-highlight-color: #fff0;
border-radius: 8px; border-radius: 8px;
-webkit-appearance: none;
appearance: none;
} }
.detail-button { .detail-button {
font-size: 18px; font-size: 18px;
background-color: rgb(255, 255, 255);
color: rgb(0, 0, 0); color: rgb(0, 0, 0);
border-radius: 50%; border-radius: 50%;
height: 50px; height: 50px;
@@ -543,10 +524,13 @@
cursor: pointer; cursor: pointer;
transition: color 0.2s; transition: color 0.2s;
-webkit-tap-highlight-color: #fff0; -webkit-tap-highlight-color: #fff0;
-webkit-appearance: none;
appearance: none;
} }
.favorite-button { .favorite-button {
font-size: 18px; font-size: 18px;
background-color: rgb(255, 255, 255);
color: red; color: red;
border-radius: 50%; border-radius: 50%;
height: 50px; height: 50px;
@@ -555,6 +539,8 @@
cursor: pointer; cursor: pointer;
transition: color 0.2s; transition: color 0.2s;
-webkit-tap-highlight-color: #fff0; -webkit-tap-highlight-color: #fff0;
-webkit-appearance: none;
appearance: none;
} }
.favorite-button.favorited { .favorite-button.favorited {
@@ -662,7 +648,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
border-radius: 5px; border-radius: 5px;
background: rgb(255 255 255 / 0.8); background: rgba(255, 255, 255, 0.8);
color: #000; color: #000;
border: none; border: none;
font-weight: 600; font-weight: 600;
@@ -711,14 +697,8 @@
object-fit: cover; object-fit: cover;
object-position: center 20%; object-position: center 20%;
z-index: 3; z-index: 3;
mask-image: linear-gradient(to top, mask-image: linear-gradient(to top, rgba(255,255,255,0) 2%, rgba(0,0,0,0.5) 6%, #000000 8%);
#fff0 2%, -webkit-mask-image: linear-gradient(to top, rgba(255,255,255,0) 2%, rgba(0,0,0,0.5) 6%, #000000 8%);
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%);
} }
.gradient-overlay { .gradient-overlay {
@@ -727,17 +707,11 @@
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: rgb(0 0 0 / 0.25); background: rgba(0, 0, 0, 0.25);
z-index: 4; z-index: 4;
pointer-events: none; pointer-events: none;
mask-image: linear-gradient(to top, mask-image: linear-gradient(to top, rgba(255,255,255,0) 2%, rgba(0,0,0,0.5) 6%, #000000 8%);
#fff0 2%, -webkit-mask-image: linear-gradient(to top, rgba(255,255,255,0) 2%, rgba(0,0,0,0.5) 6%, #000000 8%);
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%);
} }
.dots-container { .dots-container {

View File

@@ -57,6 +57,7 @@ const CONFIG = {
preferredVideoQuality: "Auto", preferredVideoQuality: "Auto",
enableKeyboardControls: true, enableKeyboardControls: true,
alwaysShowArrows: false, alwaysShowArrows: false,
hideArrowsOnMobile: true,
enableCustomMediaIds: true, enableCustomMediaIds: true,
enableSeasonalContent: false, enableSeasonalContent: false,
customMediaIds: "", customMediaIds: "",
@@ -748,7 +749,7 @@ const SlideUtils = {
if (isYoutube && videoId) { if (isYoutube && videoId) {
const ytIframe = this.createElement('iframe', { const ytIframe = this.createElement('iframe', {
id: 'modal-yt-player', id: 'modal-yt-player',
src: `https://www.youtube-nocookie.com/embed/${videoId}?enablejsapi=1&origin=${encodeURIComponent(window.location.origin)}`, src: `https://www.youtube-nocookie.com/embed/${videoId}?autoplay=1&controls=1&iv_load_policy=3&rel=0&playsinline=1`,
allow: 'autoplay; encrypted-media', allow: 'autoplay; encrypted-media',
style: 'width: 100%; height: 100%; border: none;', style: 'width: 100%; height: 100%; border: none;',
referrerpolicy: 'strict-origin-when-cross-origin', referrerpolicy: 'strict-origin-when-cross-origin',
@@ -758,20 +759,6 @@ const SlideUtils = {
contentContainer.appendChild(ytIframe); contentContainer.appendChild(ytIframe);
overlay.append(closeButton, contentContainer); overlay.append(closeButton, contentContainer);
document.body.appendChild(overlay); document.body.appendChild(overlay);
this.loadYouTubeIframeAPI().then(() => {
new YT.Player(ytIframe, {
playerVars: {
autoplay: 1,
controls: 1,
iv_load_policy: 3,
rel: 0,
playsinline: 1,
origin: window.location.origin,
enablejsapi: 1
}
});
});
} else { } else {
const video = this.createElement('video', { const video = this.createElement('video', {
src: url, src: url,
@@ -779,6 +766,7 @@ const SlideUtils = {
autoplay: true, autoplay: true,
className: 'video-modal-player' className: 'video-modal-player'
}); });
video.setAttribute('playsinline', '');
contentContainer.appendChild(video); contentContainer.appendChild(video);
overlay.append(closeButton, contentContainer); overlay.append(closeButton, contentContainer);
document.body.appendChild(overlay); document.body.appendChild(overlay);
@@ -835,7 +823,7 @@ const LocalizationUtils = {
} }
} }
if (window.ApiClient && STATE.jellyfinData?.accessToken) { if (window.ApiClient && STATE.jellyfinData && STATE.jellyfinData.accessToken) {
try { try {
const userId = window.ApiClient.getCurrentUserId(); const userId = window.ApiClient.getCurrentUserId();
if (userId) { if (userId) {
@@ -845,7 +833,7 @@ const LocalizationUtils = {
}); });
if (userResponse.ok) { if (userResponse.ok) {
const userData = await userResponse.json(); const userData = await userResponse.json();
if (userData.Configuration?.AudioLanguagePreference) { if (userData.Configuration && userData.Configuration.AudioLanguagePreference) {
locale = userData.Configuration.AudioLanguagePreference.toLowerCase(); locale = userData.Configuration.AudioLanguagePreference.toLowerCase();
} }
} }
@@ -855,7 +843,7 @@ const LocalizationUtils = {
} }
} }
if (!locale && window.ApiClient && STATE.jellyfinData?.accessToken) { if (!locale && window.ApiClient && (STATE.jellyfinData && STATE.jellyfinData.accessToken)) {
try { try {
const configUrl = window.ApiClient.getUrl('System/Configuration'); const configUrl = window.ApiClient.getUrl('System/Configuration');
const configResponse = await fetch(configUrl, { const configResponse = await fetch(configUrl, {
@@ -1030,7 +1018,7 @@ const LocalizationUtils = {
*/ */
getLocalizedString(key, fallback, ...args) { getLocalizedString(key, fallback, ...args) {
const locale = this.cachedLocale || 'en-us'; const locale = this.cachedLocale || 'en-us';
let translated = this.translations[locale]?.[key] || fallback; let translated = (this.translations[locale] && this.translations[locale][key]) || fallback;
if (args.length > 0) { if (args.length > 0) {
for (let i = 0; i < args.length; i++) { for (let i = 0; i < args.length; i++) {
@@ -1775,9 +1763,12 @@ const SlideCreator = {
} }
const isLowPower = isLowPowerDevice(); const isLowPower = isLowPowerDevice();
const isIOSApp = /iPhone|iPad|iPod/i.test(navigator.userAgent);
const limitVideos = isLowPower || isIOSApp;
const itemIndex = STATE.slideshow.itemIds ? STATE.slideshow.itemIds.indexOf(itemId) : -1; const itemIndex = STATE.slideshow.itemIds ? STATE.slideshow.itemIds.indexOf(itemId) : -1;
const isActiveSlide = itemIndex !== -1 && itemIndex === STATE.slideshow.currentSlideIndex; const isActiveSlide = itemIndex !== -1 && itemIndex === STATE.slideshow.currentSlideIndex;
const shouldCreateVideo = !isLowPower || isActiveSlide; // Limit YouTube iframe bulk creation on low power devices OR iOS (which kills the WebProcess on OOM)
const shouldCreateVideo = !limitVideos || isActiveSlide;
if (isYoutube && videoId && shouldCreateVideo) { if (isYoutube && videoId && shouldCreateVideo) {
isVideo = true; isVideo = true;
@@ -1945,6 +1936,7 @@ const SlideCreator = {
}; };
videoAttributes.muted = ""; videoAttributes.muted = "";
videoAttributes.playsinline = "";
videoBackdrop = SlideUtils.createElement("video", videoAttributes); videoBackdrop = SlideUtils.createElement("video", videoAttributes);
videoBackdrop.volume = 0.4; videoBackdrop.volume = 0.4;
@@ -2453,6 +2445,7 @@ const SlideshowManager = {
previousVisibleSlide.classList.remove("active"); previousVisibleSlide.classList.remove("active");
} }
void currentSlide.offsetWidth;
currentSlide.classList.add("active"); currentSlide.classList.add("active");
// Manage Video Playback: Stop others, Play current // Manage Video Playback: Stop others, Play current
@@ -2730,9 +2723,9 @@ const SlideshowManager = {
const totalItems = STATE.slideshow.itemIds.length; const totalItems = STATE.slideshow.itemIds.length;
let distance = Math.abs(index - currentIndex); let distance = Math.abs(index - currentIndex);
if (totalItems > keepRange * 2) {
// Always calculate circular distance for slideshow
distance = Math.min(distance, totalItems - distance); distance = Math.min(distance, totalItems - distance);
}
if (distance > keepRange) { if (distance > keepRange) {
// Destroy video player if exists // Destroy video player if exists
@@ -2802,7 +2795,7 @@ const SlideshowManager = {
if (currentItemId) { if (currentItemId) {
const currentSlide = document.querySelector(`.slide[data-item-id="${currentItemId}"]`); const currentSlide = document.querySelector(`.slide[data-item-id="${currentItemId}"]`);
const video = currentSlide?.querySelector('video'); const video = currentSlide ? currentSlide.querySelector('video') : null;
if (video) { if (video) {
video.muted = STATE.slideshow.isMuted; video.muted = STATE.slideshow.isMuted;
@@ -2962,7 +2955,7 @@ const SlideshowManager = {
if (!currentSlide) return; if (!currentSlide) return;
// YouTube player: just resume, don't reload // YouTube player: just resume, don't reload
const ytPlayer = STATE.slideshow.videoPlayers?.[currentItemId]; const ytPlayer = (STATE.slideshow.videoPlayers && STATE.slideshow.videoPlayers[currentItemId]) ? STATE.slideshow.videoPlayers[currentItemId] : undefined;
if (ytPlayer && typeof ytPlayer.playVideo === 'function') { if (ytPlayer && typeof ytPlayer.playVideo === 'function') {
if (STATE.slideshow.isMuted) { if (STATE.slideshow.isMuted) {
if (typeof ytPlayer.mute === 'function') ytPlayer.mute(); if (typeof ytPlayer.mute === 'function') ytPlayer.mute();
@@ -3469,6 +3462,10 @@ const initArrowNavigation = () => {
container.appendChild(muteButton); container.appendChild(muteButton);
const showArrows = () => { const showArrows = () => {
if (CONFIG.hideArrowsOnMobile && window.matchMedia("only screen and (max-width: 768px)").matches) {
return; // disable arrow display on mobile
}
leftArrow.style.display = "block"; leftArrow.style.display = "block";
rightArrow.style.display = "block"; rightArrow.style.display = "block";

View File

@@ -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.7.1.6", "version": "1.7.1.13",
"changelog": "- feat: add option to disable pagination dots/counter\n- feat: add exclude seasonal content from random fetching option\n- fix button issue on mobile when using ElegantFin Theme", "changelog": "- feat: add option to disable pagination dots/counter\n- feat: add exclude seasonal content from random fetching option\n- Add hide arrows on mobile option \n- fix button issue on mobile when using ElegantFin Theme",
"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.7.1.6/Jellyfin.Plugin.MediaBarEnhanced.zip", "sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.7.1.13/Jellyfin.Plugin.MediaBarEnhanced.zip",
"checksum": "d334b961ac8c6a527dba490b5a926c40", "checksum": "3eda8e65484a1a75e4f2c0f3da89b182",
"timestamp": "2026-03-08T18:33:15Z" "timestamp": "2026-03-08T22:50:48Z"
}, },
{ {
"version": "1.7.0.14", "version": "1.7.0.14",