From 41e6c1032d18bba69718fb6ae7ed60194be14219 Mon Sep 17 00:00:00 2001 From: CodeDevMLH <145071728+CodeDevMLH@users.noreply.github.com> Date: Sun, 8 Mar 2026 20:09:47 +0100 Subject: [PATCH] Add Hide Arrows on Mobile option to configuration and update related logic --- .../Configuration/PluginConfiguration.cs | 1 + .../Configuration/configPage.html | 72 +++++++++++-------- .../Web/mediaBarEnhanced.js | 5 ++ 3 files changed, 50 insertions(+), 28 deletions(-) diff --git a/Jellyfin.Plugin.MediaBarEnhanced/Configuration/PluginConfiguration.cs b/Jellyfin.Plugin.MediaBarEnhanced/Configuration/PluginConfiguration.cs index dc93253..1ec4755 100644 --- a/Jellyfin.Plugin.MediaBarEnhanced/Configuration/PluginConfiguration.cs +++ b/Jellyfin.Plugin.MediaBarEnhanced/Configuration/PluginConfiguration.cs @@ -36,6 +36,7 @@ namespace Jellyfin.Plugin.MediaBarEnhanced.Configuration public bool EnableLoadingScreen { get; set; } = true; public bool EnableKeyboardControls { get; set; } = true; public bool AlwaysShowArrows { get; set; } = false; + public bool HideArrowsOnMobile { get; set; } = true; public string CustomMediaIds { get; set; } = ""; public bool EnableCustomMediaIds { get; set; } = true; public string PreferredVideoQuality { get; set; } = "Auto"; diff --git a/Jellyfin.Plugin.MediaBarEnhanced/Configuration/configPage.html b/Jellyfin.Plugin.MediaBarEnhanced/Configuration/configPage.html index b1afc7a..8604d0a 100644 --- a/Jellyfin.Plugin.MediaBarEnhanced/Configuration/configPage.html +++ b/Jellyfin.Plugin.MediaBarEnhanced/Configuration/configPage.html @@ -78,7 +78,7 @@
If enabled, local backdrop videos (Theme Videos) will be preferred over remote and local trailers.
-
+
Delay slide transition until trailer finishes.
-
+
-
Display a button to open trailer in modal. Only visible if - trailer is not set as backdrop or if no trailer is available.
+
Display a button to open trailer in modal. Button only + visible if trailer is not set as backdrop.
@@ -183,15 +183,15 @@ 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.
-
- -
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.
-
-
If enabled, navigation arrows will always be visible instead - of only on hover.
+
Force the UI arrow navigation buttons to always be visible instead of only when hovered.
+
+
+ +
Completely disable the navigation arrows on mobile devices (since swiping is available).
+

Time Settings

Leave a setting blank to use the default value.

@@ -363,6 +371,7 @@
Minimum distance in pixels for a swipe to be registered (for mobile).
+

Content Sorting and Filtering

@@ -405,6 +414,16 @@
Only show items added in the last X days. Leave blank or set to 0 for no limit. Example: 30.
+
+ +
If enabled, watched content will be included in the random + selection results.
+
+

Content Limits

Leave a setting blank to use the default value.

@@ -435,7 +454,7 @@
Show or hide the pagination dots/counter navigation at the bottom of the slideshow.
@@ -454,15 +473,6 @@
Maximum characters for the plot summary.
-
- -
If enabled, watched content will be included in the random - selection results.
-
IsEnabled, to avoid conflicts with other plugins @@ -582,14 +592,20 @@ var enableVideoBackdropCheckbox = page.querySelector('#EnableVideoBackdrop'); var preferLocalContainer = page.querySelector('#PreferLocalTrailersContainer'); var preferLocalBackdropsContainer = page.querySelector('#PreferLocalBackdropsContainer'); + var waitForTrailerContainer = page.querySelector('#WaitForTrailerToEndContainer'); + var enableMobileVideoContainer = page.querySelector('#EnableMobileVideoContainer'); function updatePreferLocalVisibility() { if (enableVideoBackdropCheckbox && enableVideoBackdropCheckbox.checked) { if (preferLocalContainer) preferLocalContainer.style.display = 'block'; if (preferLocalBackdropsContainer) preferLocalBackdropsContainer.style.display = 'block'; + if (waitForTrailerContainer) waitForTrailerContainer.style.display = 'block'; + if (enableMobileVideoContainer) enableMobileVideoContainer.style.display = 'block'; } else { if (preferLocalContainer) preferLocalContainer.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', 'PreferLocalBackdrops', 'RandomizeThemeVideos', 'RandomizeLocalTrailers', 'IncludeWatchedContent', 'ShowPaginationDots', 'MaxParentalRating', - 'MaxDaysRecent', 'ExcludeSeasonalContent' + 'MaxDaysRecent', 'ExcludeSeasonalContent', 'HideArrowsOnMobile' ]; keys.forEach(function (key) { diff --git a/Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.js b/Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.js index d12f6d5..58c787d 100644 --- a/Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.js +++ b/Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.js @@ -57,6 +57,7 @@ const CONFIG = { preferredVideoQuality: "Auto", enableKeyboardControls: true, alwaysShowArrows: false, + hideArrowsOnMobile: true, enableCustomMediaIds: true, enableSeasonalContent: false, customMediaIds: "", @@ -3469,6 +3470,10 @@ const initArrowNavigation = () => { container.appendChild(muteButton); const showArrows = () => { + if (CONFIG.hideArrowsOnMobile && window.matchMedia("only screen and (max-width: 768px)").matches) { + return; // disable arrow display on mobile + } + leftArrow.style.display = "block"; rightArrow.style.display = "block";