CodeDevMLH/jellyfin-plugin-media-bar-enhanced
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 24 Wiki Activity

Enhance slideshow responsiveness by adjusting dot display for small screens

Browse Source
This commit is contained in:
CodeDevMLH
2026-03-23 17:25:48 +01:00
parent e25a99439a
commit e9fe356cee
2 changed files with 19 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.css
View File

@@ -749,6 +749,14 @@
left: 50%; left: 50%;
transform: translateX(-50%) scale(0.8); transform: translateX(-50%) scale(0.8);
background-color: #ffffff00; background-color: #ffffff00;
width: max-content;
max-width: 90vw;
flex-wrap: nowrap;
overflow: hidden;
}
.dot {
flex-shrink: 0;
} }
.dot.active { .dot.active {

13
Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.js
View File

@@ -1,4 +1,4 @@
/* /*
* Jellyfin Slideshow by M0RPH3US v4.0.1 * Jellyfin Slideshow by M0RPH3US v4.0.1
* Modified by CodeDevMLH * Modified by CodeDevMLH
* *
@@ -2363,8 +2363,17 @@ const SlideshowManager = {
const totalItems = STATE.slideshow.totalItems || 0; const totalItems = STATE.slideshow.totalItems || 0;
// dynamically lower the max dots threshold on small screens
let effectiveMaxDots = CONFIG.maxPaginationDots;
if (window.matchMedia("(max-width: 767px) and (orientation: portrait)").matches) {
const availableWidth = window.innerWidth * 0.9;
const dotWidth = 18; // approximate width per dot
const fittingDots = Math.floor(availableWidth / dotWidth) - 1;
effectiveMaxDots = Math.min(effectiveMaxDots, fittingDots);
}
// Switch to counter style if too many items // Switch to counter style if too many items
if (totalItems > CONFIG.maxPaginationDots) { if (totalItems > effectiveMaxDots) {
const counter = document.createElement("span"); const counter = document.createElement("span");
counter.className = "slide-counter"; counter.className = "slide-counter";
counter.id = "slide-counter"; counter.id = "slide-counter";