} Flattened list of item IDs
+ */
+ async resolveCollectionsAndItems(rawIds) {
+ const finalIds = [];
+ const guidRegex = /^([0-9a-f]{32})$/i;
+
+ for (const rawId of rawIds) {
+ try {
+ let id = rawId;
+
+ // If not a valid GUID, check if it starts with one (comments) or treat as a name
+ if (!guidRegex.test(rawId)) {
+ const guidMatch = rawId.match(/^([0-9a-f]{32})(?:[^0-9a-f]|$)/i);
+
+ if (guidMatch) {
+ id = guidMatch[1];
+ } else {
+ console.log(`Input '${rawId}' is not a GUID, searching for Collection/Playlist by name...`);
+ const resolvedId = await ApiUtils.findCollectionOrPlaylistByName(rawId);
+
+ if (resolvedId) {
+ console.log(`Resolved name '${rawId}' to ID: ${resolvedId}`);
+ id = resolvedId;
+ } else {
+ console.warn(`Could not find Collection or Playlist with name: '${rawId}'`);
+ continue; // Skip if resolution failed
+ }
+ }
+ }
+
+ const item = await ApiUtils.fetchItemDetails(id);
+ if (item && (item.Type === 'BoxSet' || item.Type === 'Playlist')) {
+ console.log(`Found Collection/Playlist: ${id} (${item.Type}), fetching children...`);
+ const children = await ApiUtils.fetchCollectionItems(id);
+ finalIds.push(...children);
+ } else if (item) {
+ finalIds.push(id);
+ }
+ } catch (e) {
+ console.warn(`Error resolving item ${id}:`, e);
+ }
+ }
+ return finalIds;
+ },
+
+ /**
+ * Loads slideshow data and initializes the slideshow
+ */
+ async loadSlideshowData() {
+ try {
+ STATE.slideshow.isLoading = true;
+ let itemIds = [];
+
+ // 1. Try Custom Media/Collection IDs from Config & seasonal content
+ if (CONFIG.enableCustomMediaIds && CONFIG.customMediaIds) {
+ console.log("Using Custom Media IDs from configuration");
+ const rawIds = this.parseCustomIds();
+ itemIds = await this.resolveCollectionsAndItems(rawIds);
+ }
+
+ // 2. Try Avatar List (list.txt)
+ if (itemIds.length === 0) {
+ itemIds = await ApiUtils.fetchItemIdsFromList();
+ }
+
+ // 3. Fallback to server query (Random)
+ if (itemIds.length === 0) {
+ console.log("No custom list found, fetching random items from server...");
+ itemIds = await ApiUtils.fetchItemIdsFromServer();
+
+ if (CONFIG.sortBy === 'Random') {
+ itemIds = SlideUtils.shuffleArray(itemIds);
+ }
+ } else {
+ // Custom IDs
+ if (CONFIG.sortBy === 'Random') {
+ itemIds = SlideUtils.shuffleArray(itemIds);
+ } else if (CONFIG.sortBy !== 'Original') {
+ // Client-side sort required...
+ console.log(`Sorting ${itemIds.length} custom items by ${CONFIG.sortBy} ${CONFIG.sortOrder}`);
+ const itemsWithDetails = [];
+ for (const id of itemIds) {
+ const item = await ApiUtils.fetchItemDetails(id);
+ if (item) itemsWithDetails.push(item);
+ }
+
+ const sortedItems = SlideUtils.sortItems(itemsWithDetails, CONFIG.sortBy, CONFIG.sortOrder);
+ itemIds = sortedItems.map(i => i.Id);
+ }
+ }
+
+ STATE.slideshow.itemIds = itemIds;
+ STATE.slideshow.totalItems = itemIds.length;
+
+ this.createPaginationDots();
+
+ await this.updateCurrentSlide(0);
+
+ STATE.slideshow.slideInterval = new SlideTimer(() => {
+ if (STATE.slideshow.isPaused) return;
+
+ if (CONFIG.waitForTrailerToEnd) {
+ const activeSlide = document.querySelector('.slide.active');
+ const hasActiveVideo = !!(activeSlide && activeSlide.querySelector('.video-backdrop'));
+ if (hasActiveVideo) return;
+ }
+
+ this.nextSlide();
+ }, CONFIG.shuffleInterval);
+
+ // Check if we should wait for trailer
+ const waitForTrailer = MediaBarEnhancedSettingsManager.getSetting('waitForTrailer', CONFIG.waitForTrailerToEnd);
+
+ if (waitForTrailer && STATE.slideshow.slideInterval) {
+ const activeSlide = document.querySelector('.slide.active');
+ const hasActiveVideo = !!(activeSlide && activeSlide.querySelector('.video-backdrop'));
+ if (hasActiveVideo) {
+ STATE.slideshow.slideInterval.stop();
+ }
+ }
+ } catch (error) {
+ console.error("Error loading slideshow data:", error);
+ } finally {
+ STATE.slideshow.isLoading = false;
+ }
+ },
+};
+
+/**
+ * Initializes arrow navigation elements
+ */
+const initArrowNavigation = () => {
+ const container = SlideUtils.getOrCreateSlidesContainer();
+
+ const leftArrow = SlideUtils.createElement("div", {
+ className: "arrow left-arrow",
+ innerHTML: 'chevron_left',
+ tabIndex: "0",
+ onclick: (e) => {
+ e.preventDefault();
+ e.stopPropagation();
+ SlideshowManager.prevSlide();
+ },
+ style: {
+ opacity: "0",
+ transition: "opacity 0.3s ease",
+ display: "none",
+ },
+ });
+
+ const rightArrow = SlideUtils.createElement("div", {
+ className: "arrow right-arrow",
+ innerHTML: 'chevron_right',
+ tabIndex: "0",
+ onclick: (e) => {
+ e.preventDefault();
+ e.stopPropagation();
+ SlideshowManager.nextSlide();
+ },
+ style: {
+ opacity: "0",
+ transition: "opacity 0.3s ease",
+ display: "none",
+ },
+ });
+
+ const pauseButton = SlideUtils.createElement("div", {
+ className: "pause-button",
+ innerHTML: 'pause',
+ tabIndex: "0",
+ "aria-label": LocalizationUtils.getLocalizedString('ButtonPause', 'Pause'),
+ title: LocalizationUtils.getLocalizedString('ButtonPause', 'Pause'),
+ onclick: (e) => {
+ e.preventDefault();
+ e.stopPropagation();
+ SlideshowManager.togglePause();
+ }
+ });
+
+ // Prevent touch events from bubbling to container
+ pauseButton.addEventListener("touchstart", (e) => e.stopPropagation(), { passive: true });
+ pauseButton.addEventListener("touchend", (e) => e.stopPropagation(), { passive: true });
+ pauseButton.addEventListener("mousedown", (e) => e.stopPropagation());
+
+ const muteButton = SlideUtils.createElement("div", {
+ className: "mute-button",
+ innerHTML: STATE.slideshow.isMuted ? 'volume_off' : 'volume_up',
+ tabIndex: "0",
+ "aria-label": STATE.slideshow.isMuted ? LocalizationUtils.getLocalizedString('Unmute', 'Unmute') : LocalizationUtils.getLocalizedString('Mute', 'Mute'),
+ title: STATE.slideshow.isMuted ? LocalizationUtils.getLocalizedString('Unmute', 'Unmute') : LocalizationUtils.getLocalizedString('Mute', 'Mute'),
+ style: { display: "none" },
+ onclick: (e) => {
+ e.preventDefault();
+ e.stopPropagation();
+ SlideshowManager.toggleMute();
+ }
+ });
+
+ // Prevent touch events from bubbling to container
+ muteButton.addEventListener("touchstart", (e) => e.stopPropagation(), { passive: true });
+ muteButton.addEventListener("touchend", (e) => e.stopPropagation(), { passive: true });
+ muteButton.addEventListener("mousedown", (e) => e.stopPropagation());
+
+ container.appendChild(leftArrow);
+ container.appendChild(rightArrow);
+ container.appendChild(pauseButton);
+ container.appendChild(muteButton);
+
+ const showArrows = () => {
+ leftArrow.style.display = "block";
+ rightArrow.style.display = "block";
+
+ void leftArrow.offsetWidth;
+ void rightArrow.offsetWidth;
+
+ leftArrow.style.opacity = "1";
+ rightArrow.style.opacity = "1";
+ };
+
+ const hideArrows = () => {
+ leftArrow.style.opacity = "0";
+ rightArrow.style.opacity = "0";
+
+ setTimeout(() => {
+ if (leftArrow.style.opacity === "0") {
+ leftArrow.style.display = "none";
+ rightArrow.style.display = "none";
+ }
+ }, 300);
+ };
+
+ container.addEventListener("mouseenter", showArrows);
+
+ container.addEventListener("mouseleave", hideArrows);
+
+ if (CONFIG.alwaysShowArrows) {
+ showArrows();
+ // Remove listeners to keep them shown
+ container.removeEventListener("mouseenter", showArrows);
+ container.removeEventListener("mouseleave", hideArrows);
+ }
+
+ let arrowTimeout;
+ container.addEventListener(
+ "touchstart",
+ () => {
+ if (arrowTimeout) {
+ clearTimeout(arrowTimeout);
+ }
+
+ showArrows();
+
+ arrowTimeout = setTimeout(hideArrows, 2000);
+ },
+ { passive: true }
+ );
+};
+
+const MediaBarEnhancedSettingsManager = {
+ initialized: false,
+
+ init() {
+ if (this.initialized) return;
+ if (!CONFIG.enableClientSideSettings) return;
+
+ this.initialized = true;
+ this.injectSettingsIcon();
+ console.log("MediaBarEnhanced: Client-Side Settings Manager initialized.");
+ },
+
+ getSetting(key, defaultValue) {
+ if (!CONFIG.enableClientSideSettings) return defaultValue;
+ const value = localStorage.getItem(`mediaBarEnhanced-${key}`);
+ return value !== null ? value === 'true' : defaultValue;
+ },
+
+ setSetting(key, value) {
+ localStorage.setItem(`mediaBarEnhanced-${key}`, value);
+ },
+
+ createIcon() {
+ const button = document.createElement('button');
+ button.type = 'button';
+ button.className = 'paper-icon-button-light headerButton media-bar-settings-button';
+ button.title = 'Media Bar Settings';
+ // button.innerHTML = 'tune';
+
+ // button.innerHTML = '
';
+ // currently not optimal, as it's egg-shaped due to the svg format... but if it's square, it's very small...
+ // button.innerHTML = '';
+ // button.innerHTML = '
';
+ button.innerHTML = '
';
+
+ button.style.verticalAlign = 'middle';
+
+ button.addEventListener('click', (e) => {
+ e.stopPropagation();
+ this.toggleSettingsPopup(button);
+ });
+
+ return button;
+ },
+
+ injectSettingsIcon() {
+ const observer = new MutationObserver((mutations, obs) => {
+ const headerRight = document.querySelector('.headerRight');
+ if (headerRight && !document.querySelector('.media-bar-settings-button')) {
+ const icon = this.createIcon();
+ headerRight.prepend(icon);
+ }
+ });
+
+ observer.observe(document.body, {
+ childList: true,
+ subtree: true
+ });
+ },
+
+ createPopup(anchorElement) {
+ const existing = document.querySelector('.media-bar-settings-popup');
+ if (existing) existing.remove();
+
+ const popup = document.createElement('div');
+ popup.className = 'media-bar-settings-popup dialog';
+
+ Object.assign(popup.style, {
+ position: 'fixed',
+ zIndex: '10000',
+ backgroundColor: '#202020',
+ padding: '1em',
+ borderRadius: '0.3em',
+ boxShadow: '0 0 20px rgba(0,0,0,0.5)',
+ minWidth: '250px',
+ color: '#fff',
+ });
+
+ const rect = anchorElement.getBoundingClientRect();
+
+ let rightPos = window.innerWidth - rect.right;
+ if (window.innerWidth < 450 || (window.innerWidth - rightPos) < 260) {
+ popup.style.right = '1rem';
+ popup.style.left = 'auto';
+ } else {
+ popup.style.right = `${rightPos}px`;
+ popup.style.left = 'auto';
+ }
+
+ popup.style.top = `${rect.bottom + 10}px`;
+
+ const settings = [
+ { key: 'enabled', label: 'Enable Media Bar Enhanced', description: 'Toggle the entire media bar visibility.', default: true },
+ { key: 'videoBackdrops', label: 'Enable Trailer Backdrops', description: 'Play trailers as background videos.', default: CONFIG.enableVideoBackdrop },
+ { key: 'trailerButton', label: 'Show Trailer Button', description: 'Show button to play trailer in popup (only backdrops without trailer)', default: CONFIG.showTrailerButton },
+ { key: 'mobileVideo', label: 'Enable Trailer On Mobile', description: 'Allow trailer backdrops on mobile devices.', default: CONFIG.enableMobileVideo },
+ { key: 'waitForTrailer', label: 'Wait For Trailer To End', description: 'Wait for the trailer to finish before changing slides.', default: CONFIG.waitForTrailerToEnd },
+ { key: 'slideAnimations', label: 'Enable Animations', description: 'Enable zooming-in effect (only on background images)', default: CONFIG.slideAnimationEnabled },
+ ];
+
+ let html = 'Media Bar Settings
';
+
+ settings.forEach(setting => {
+ const isChecked = this.getSetting(setting.key, setting.default);
+ html += `
+
+
+
${setting.description}
+
+
+
+
+ `;
+
+ popup.innerHTML = html;
+
+ // Add Listeners
+ settings.forEach(setting => {
+ const checkbox = popup.querySelector(`#mb-setting-${setting.key}`);
+ checkbox.addEventListener('change', (e) => {
+ this.setSetting(setting.key, e.target.checked);
+ });
+ });
+
+ // Reload Handler
+ popup.querySelector('#mb-settings-save').addEventListener('click', () => {
+ location.reload();
+ });
+
+ // Reset Handler
+ popup.querySelector('#mb-settings-reset').addEventListener('click', () => {
+ if (confirm("Reset all local Media Bar settings to server defaults?")) {
+ Object.keys(localStorage).forEach(key => {
+ if (key.startsWith('mediaBarEnhanced-')) {
+ localStorage.removeItem(key);
+ }
+ });
+ location.reload();
+ }
+ });
+
+ const closeHandler = (e) => {
+ if (!popup.contains(e.target) && e.target !== anchorElement && !anchorElement.contains(e.target)) {
+ popup.remove();
+ document.removeEventListener('click', closeHandler);
+ }
+ };
+ setTimeout(() => document.addEventListener('click', closeHandler), 0);
+
+ document.body.appendChild(popup);
+ },
+
+ toggleSettingsPopup(anchorElement) {
+ const existing = document.querySelector('.media-bar-settings-popup');
+ if (existing) {
+ existing.remove();
+ } else {
+ this.createPopup(anchorElement);
+ }
+ }
+};
+
+/**
+ * Initialize page visibility handling to pause when tab is inactive
+ */
+const initPageVisibilityHandler = () => {
+ let wasVideoPlayingBeforeHide = false;
+
+ document.addEventListener("visibilitychange", () => {
+ if (document.hidden) {
+ console.log("Tab inactive - pausing slideshow and videos");
+ wasVideoPlayingBeforeHide = STATE.slideshow.isVideoPlaying;
+
+ if (STATE.slideshow.slideInterval) {
+ STATE.slideshow.slideInterval.stop();
+ }
+
+ // Pause active video if playing
+ const currentItemId = STATE.slideshow.itemIds[STATE.slideshow.currentSlideIndex];
+ if (currentItemId) {
+ // YouTube
+ if (STATE.slideshow.videoPlayers && STATE.slideshow.videoPlayers[currentItemId]) {
+ const player = STATE.slideshow.videoPlayers[currentItemId];
+ if (typeof player.pauseVideo === "function") {
+ try {
+ player.pauseVideo();
+ STATE.slideshow.isVideoPlaying = false;
+ } catch (e) {
+ console.warn("Error pausing video on tab hide:", e);
+ }
+ } else if (player.tagName === 'VIDEO') { // HTML5 Video
+ player.pause();
+ STATE.slideshow.isVideoPlaying = false;
+ }
+ }
+ }
+ } else {
+ console.log("Tab active - resuming slideshow");
+ if (!STATE.slideshow.isPaused) {
+ const currentItemId = STATE.slideshow.itemIds[STATE.slideshow.currentSlideIndex];
+
+ if (wasVideoPlayingBeforeHide && currentItemId && STATE.slideshow.videoPlayers && STATE.slideshow.videoPlayers[currentItemId]) {
+ const player = STATE.slideshow.videoPlayers[currentItemId];
+
+ // YouTube
+ if (typeof player.playVideo === "function") {
+ try {
+ player.playVideo();
+ STATE.slideshow.isVideoPlaying = true;
+ } catch (e) {
+ console.warn("Error resuming video on tab show:", e);
+ if (STATE.slideshow.slideInterval) {
+ STATE.slideshow.slideInterval.start();
+ }
+ }
+ } else if (player.tagName === 'VIDEO') { // HTML5 Video
+ try {
+ player.play().catch(e => console.warn("Error resuming HTML5 video:", e));
+ STATE.slideshow.isVideoPlaying = true;
+ } catch(e) { console.warn(e); }
+ }
+ } else {
+ // No video was playing, just restart interval
+ const activeSlide = document.querySelector('.slide.active');
+ const hasVideo = activeSlide && activeSlide.querySelector('.video-backdrop');
+
+ if (CONFIG.waitForTrailerToEnd && hasVideo) {
+ // Don't restart interval if waiting for trailer
+ } else {
+ if (STATE.slideshow.slideInterval) {
+ STATE.slideshow.slideInterval.start();
+ }
+ }
+ }
+ wasVideoPlayingBeforeHide = false;
+ }
+ }
+ });
+};
+
+/**
+ * Initialize the slideshow
+ */
+const slidesInit = async () => {
+ if (STATE.slideshow.hasInitialized) {
+ console.log("⚠️ Slideshow already initialized, skipping");
+ return;
+ }
+
+ if (CONFIG.enableClientSideSettings) {
+ MediaBarEnhancedSettingsManager.init();
+ const isEnabled = MediaBarEnhancedSettingsManager.getSetting('enabled', true);
+ if (!isEnabled) {
+ console.log("MediaBarEnhanced: Disabled by client-side setting.");
+ const homeSections = document.querySelector('.homeSectionsContainer');
+ if (homeSections) {
+ homeSections.style.top = '0';
+ homeSections.style.marginTop = '0';
+ }
+ const container = document.getElementById('slides-container');
+ if (container) container.style.display = 'none';
+
+ return;
+ }
+ }
+
+ STATE.slideshow.hasInitialized = true;
+
+ /**
+ * Initialize IntersectionObserver for lazy loading images
+ */
+ const initLazyLoading = () => {
+ const imageObserver = new IntersectionObserver(
+ (entries, observer) => {
+ entries.forEach((entry) => {
+ if (entry.isIntersecting) {
+ const image = entry.target;
+ const highQualityUrl = image.getAttribute("data-high-quality");
+
+ if (
+ highQualityUrl &&
+ image.closest(".slide").style.opacity === "1"
+ ) {
+ requestQueue.push({
+ url: highQualityUrl,
+ callback: () => {
+ image.src = highQualityUrl;
+ image.classList.remove("low-quality");
+ image.classList.add("high-quality");
+ },
+ });
+
+ if (requestQueue.length === 1) {
+ processNextRequest();
+ }
+ }
+
+ observer.unobserve(image);
+ }
+ });
+ },
+ {
+ rootMargin: "50px",
+ threshold: 0.1,
+ }
+ );
+
+ const observeSlideImages = () => {
+ const slides = document.querySelectorAll(".slide");
+ slides.forEach((slide) => {
+ const images = slide.querySelectorAll("img.low-quality");
+ images.forEach((image) => {
+ imageObserver.observe(image);
+ });
+ });
+ };
+
+ const slideObserver = new MutationObserver((mutations) => {
+ mutations.forEach((mutation) => {
+ if (mutation.addedNodes) {
+ mutation.addedNodes.forEach((node) => {
+ if (node.classList && node.classList.contains("slide")) {
+ const images = node.querySelectorAll("img.low-quality");
+ images.forEach((image) => {
+ imageObserver.observe(image);
+ });
+ }
+ });
+ }
+ });
+ });
+
+ const container = SlideUtils.getOrCreateSlidesContainer();
+ slideObserver.observe(container, { childList: true });
+
+ observeSlideImages();
+
+ return imageObserver;
+ };
+
+ const lazyLoadObserver = initLazyLoading();
+
+ try {
+ console.log("🌟 Initializing Enhanced Jellyfin Slideshow");
+
+ initArrowNavigation();
+
+ await SlideshowManager.loadSlideshowData();
+
+ SlideshowManager.initTouchEvents();
+
+ SlideshowManager.initKeyboardEvents();
+
+ initPageVisibilityHandler();
+
+ VisibilityObserver.init();
+
+ console.log("✅ Enhanced Jellyfin Slideshow initialized successfully");
+ } catch (error) {
+ console.error("Error initializing slideshow:", error);
+ STATE.slideshow.hasInitialized = false;
+ }
+};
+
+window.mediaBarEnhanced = {
+ CONFIG,
+ STATE,
+ SlideUtils,
+ ApiUtils,
+ SlideCreator,
+ SlideshowManager,
+ VisibilityObserver,
+ initSlideshowData: () => {
+ SlideshowManager.loadSlideshowData();
+ },
+ nextSlide: () => {
+ SlideshowManager.nextSlide();
+ },
+ prevSlide: () => {
+ SlideshowManager.prevSlide();
+ },
+};
+
+initLoadingScreen();
+
+fetchPluginConfig().then(() => {
+ startLoginStatusWatcher();
+});