} 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: item.Id, Type: item.Type });
+ }
+ } catch (e) {
+ console.warn(`Error resolving item ${rawId}:`, 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.enableSeasonalContent) {
+ console.log("Using Custom Media IDs from configuration");
+ const rawIds = this.parseCustomIds();
+ const resolvedItems = await this.resolveCollectionsAndItems(rawIds);
+
+ // Apply max items limit to custom IDs if enabled
+ if (CONFIG.applyLimitsToCustomIds) {
+ let movieCount = 0;
+ let showCount = 0;
+ let keptItems = [];
+
+ for (const item of resolvedItems) {
+ if (keptItems.length >= CONFIG.maxItems) break;
+
+ if (item.Type === 'Movie') {
+ if (movieCount < CONFIG.maxMovies) {
+ movieCount++;
+ keptItems.push(item);
+ }
+ } else if (item.Type === 'Series' || item.Type === 'Season' || item.Type === 'Episode') {
+ // Count Seasons/Episodes as TV Shows
+ if (showCount < CONFIG.maxTvShows) {
+ showCount++;
+ keptItems.push(item);
+ }
+ } else {
+ // Other types: count towards total only
+ keptItems.push(item);
+ }
+ }
+ itemIds = keptItems.map(i => i.Id);
+ console.log(`Applied limits to custom IDs: ${itemIds.length} items (Movies: ${movieCount}, Shows: ${showCount})`);
+ } else {
+ itemIds = resolvedItems.map(i => i.Id);
+ }
+ }
+
+ // 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 = () => {
+ document.addEventListener("visibilitychange", () => {
+ const isVideoPlayerOpen = document.querySelector('.videoPlayerContainer:not(.hide)') ||
+ document.querySelector('.youtubePlayerContainer:not(.hide)');
+
+ if (document.hidden) {
+ // Stop slide timer
+ if (STATE.slideshow.slideInterval) {
+ STATE.slideshow.slideInterval.stop();
+ }
+
+ if (isVideoPlayerOpen) {
+ // Jellyfin video is playing --> full stop to free all resources
+ console.log("Tab inactive and Jellyfin player active - stopping all playback");
+ SlideshowManager.stopAllPlayback();
+ } else {
+ // Simple tab switch: stop all others, pause only the current
+ console.log("Tab inactive. Pausing current video, stopping others");
+ const currentItemId = STATE.slideshow.itemIds?.[STATE.slideshow.currentSlideIndex];
+
+ // Stop all players except the current one
+ if (STATE.slideshow.videoPlayers) {
+ Object.keys(STATE.slideshow.videoPlayers).forEach(id => {
+ if (id === currentItemId) return;
+ const p = STATE.slideshow.videoPlayers[id];
+ if (p) {
+ try {
+ if (typeof p.stopVideo === 'function') {
+ p.stopVideo();
+ if (typeof p.clearVideo === 'function') p.clearVideo();
+ } else if (p.tagName === 'VIDEO') {
+ p.pause();
+ p.muted = true;
+ p.currentTime = 0;
+ }
+ } catch (e) { console.warn("Error stopping background player", id, e); }
+ }
+ });
+ }
+
+ // Pause only the current video
+ if (currentItemId) {
+ const player = STATE.slideshow.videoPlayers?.[currentItemId];
+ if (player) {
+ try {
+ if (typeof player.pauseVideo === 'function') {
+ player.pauseVideo();
+ } else if (player.tagName === 'VIDEO') {
+ player.pause();
+ }
+ } catch (e) { console.warn("Error pausing video on tab hide:", e); }
+ }
+ }
+ }
+ } else {
+ console.log("Tab active. Resuming slideshow");
+ const isOnHome = window.location.hash === "#/home.html" || window.location.hash === "#/home";
+
+ if (isOnHome && !STATE.slideshow.isPaused && !isVideoPlayerOpen) {
+ SlideshowManager.resumeActivePlayback();
+
+ if (STATE.slideshow.slideInterval && !CONFIG.waitForTrailerToEnd) {
+ STATE.slideshow.slideInterval.start();
+ }
+ }
+ }
+ });
+};
+
+/**
+ * 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();
+});
diff --git a/tmp_3.js b/tmp_3.js
new file mode 100644
index 0000000..795c97e
--- /dev/null
+++ b/tmp_3.js
@@ -0,0 +1,3860 @@
+/*
+ * Jellyfin Slideshow by M0RPH3US v4.0.1
+ * Modified by CodeDevMLH
+ *
+ * New features:
+ * - optional Trailer background video support
+ * - option to make video backdrops full width
+ * - SponsorBlock support to skip intro/outro segments
+ * - option to always show arrows
+ * - option to disable/enable keyboard controls
+ * - option to show/hide trailer button if trailer as backdrop is disabled (opens in a modal)
+ * - option to wait for trailer to end before loading next slide
+ * - option to set a maximum for the pagination dots (will turn into a counter style if exceeded)
+ * - option to disable loading screen
+ * - 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 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
+const CONFIG = {
+ IMAGE_SVG: {
+ freshTomato:
+ '',
+ rottenTomato:
+ '',
+ },
+ shuffleInterval: 7000,
+ retryInterval: 500,
+ minSwipeDistance: 50,
+ loadingCheckInterval: 100,
+ maxPlotLength: 360,
+ maxMovies: 15,
+ maxTvShows: 15,
+ maxItems: 500,
+ preloadCount: 3,
+ fadeTransitionDuration: 500,
+ maxPaginationDots: 15,
+ slideAnimationEnabled: true,
+ enableVideoBackdrop: true,
+ useSponsorBlock: true,
+ preferLocalTrailers: false,
+ waitForTrailerToEnd: true,
+ startMuted: true,
+ fullWidthVideo: true,
+ enableMobileVideo: false,
+ showTrailerButton: true,
+ preferredVideoQuality: "Auto",
+ enableKeyboardControls: true,
+ alwaysShowArrows: false,
+ enableCustomMediaIds: true,
+ enableSeasonalContent: false,
+ customMediaIds: "",
+ enableLoadingScreen: true,
+ enableClientSideSettings: false,
+ sortBy: "Random",
+ sortOrder: "Ascending",
+ applyLimitsToCustomIds: false,
+ seasonalSections: "[]",
+};
+
+// State management
+const STATE = {
+ jellyfinData: {
+ userId: null,
+ appName: null,
+ appVersion: null,
+ deviceName: null,
+ deviceId: null,
+ accessToken: null,
+ serverAddress: null,
+ },
+ slideshow: {
+ hasInitialized: false,
+ isTransitioning: false,
+ isPaused: false,
+ currentSlideIndex: 0,
+ focusedSlide: null,
+ containerFocused: false,
+ slideInterval: null,
+ itemIds: [],
+ loadedItems: {},
+ createdSlides: {},
+ totalItems: 0,
+ isLoading: false,
+ videoPlayers: {},
+ sponsorBlockInterval: null,
+ isMuted: CONFIG.startMuted,
+ customTrailerUrls: {},
+ ytPromise: null,
+ autoplayTimeouts: [],
+ },
+};
+
+// Request throttling system
+const requestQueue = [];
+let isProcessingQueue = false;
+
+/**
+ * Process the next request in the queue with throttling
+ */
+const processNextRequest = () => {
+ if (requestQueue.length === 0) {
+ isProcessingQueue = false;
+ return;
+ }
+
+ isProcessingQueue = true;
+ const { url, callback } = requestQueue.shift();
+
+ fetch(url)
+ .then((response) => {
+ if (response.ok) {
+ return response;
+ }
+ throw new Error(`Failed to fetch: ${response.status}`);
+ })
+ .then(callback)
+ .catch((error) => {
+ console.error("Error in throttled request:", error);
+ })
+ .finally(() => {
+ setTimeout(processNextRequest, 100);
+ });
+};
+
+/**
+ * Add a request to the throttled queue
+ * @param {string} url - URL to fetch
+ * @param {Function} callback - Callback to run on successful fetch
+ */
+const addThrottledRequest = (url, callback) => {
+ requestQueue.push({ url, callback });
+ if (!isProcessingQueue) {
+ processNextRequest();
+ }
+};
+
+/**
+ * Checks if the user is currently logged in
+ * @returns {boolean} True if logged in, false otherwise
+ */
+
+const isUserLoggedIn = () => {
+ try {
+ return (
+ window.ApiClient &&
+ window.ApiClient._currentUser &&
+ window.ApiClient._currentUser.Id &&
+ window.ApiClient._serverInfo &&
+ window.ApiClient._serverInfo.AccessToken
+ );
+ } catch (error) {
+ console.error("Error checking login status:", error);
+ return false;
+ }
+};
+
+/**
+ * Initializes Jellyfin data from ApiClient
+ * @param {Function} callback - Function to call once data is initialized
+ */
+const initJellyfinData = (callback) => {
+ if (!window.ApiClient) {
+ console.warn("⏳ window.ApiClient is not available yet. Retrying...");
+ setTimeout(() => initJellyfinData(callback), CONFIG.retryInterval);
+ return;
+ }
+
+ try {
+ const apiClient = window.ApiClient;
+ STATE.jellyfinData = {
+ userId: apiClient.getCurrentUserId() || "Not Found",
+ appName: apiClient._appName || "Not Found",
+ appVersion: apiClient._appVersion || "Not Found",
+ deviceName: apiClient._deviceName || "Not Found",
+ deviceId: apiClient._deviceId || "Not Found",
+ accessToken: apiClient._serverInfo.AccessToken || "Not Found",
+ serverId: apiClient._serverInfo.Id || "Not Found",
+ serverAddress: apiClient._serverAddress || "Not Found",
+ };
+ if (callback && typeof callback === "function") {
+ callback();
+ }
+ } catch (error) {
+ console.error("Error initializing Jellyfin data:", error);
+ setTimeout(() => initJellyfinData(callback), CONFIG.retryInterval);
+ }
+};
+
+/**
+ * Initializes localization by loading translation chunks
+ */
+const initLocalization = async () => {
+ try {
+ const locale = await LocalizationUtils.getCurrentLocale();
+ await LocalizationUtils.loadTranslations(locale);
+ console.log("✅ Localization initialized");
+ } catch (error) {
+ console.error("Error initializing localization:", error);
+ }
+};
+
+/**
+ * Creates and displays loading screen
+ */
+
+const initLoadingScreen = () => {
+ const currentPath = window.location.href.toLowerCase().replace(window.location.origin, "");
+ const isHomePage =
+ currentPath.includes("/web/#/home.html") ||
+ currentPath.includes("/web/#/home") ||
+ currentPath.includes("/web/index.html#/home.html") ||
+ currentPath === "/web/index.html#/home" ||
+ currentPath.endsWith("/web/");
+
+ if (!isHomePage) return;
+
+ // Check LocalStorage for cached preference to avoid flash
+ const cachedSetting = localStorage.getItem('mediaBarEnhanced-enableLoadingScreen');
+ if (cachedSetting === 'false') {
+ return;
+ }
+
+ const loadingDiv = document.createElement("div");
+ loadingDiv.className = "bar-loading";
+ loadingDiv.id = "page-loader";
+ loadingDiv.innerHTML = `
+
+ `;
+ document.body.appendChild(loadingDiv);
+
+ requestAnimationFrame(() => {
+ document.querySelector(".bar-loading h1 div").style.opacity = "1";
+ });
+
+ const progressBar = document.getElementById("progress-bar");
+ const unfilledBar = document.getElementById("unfilled-bar");
+
+ let progress = 0;
+ let lastIncrement = 5;
+
+ const progressInterval = setInterval(() => {
+ if (progress < 95) {
+ lastIncrement = Math.max(0.5, lastIncrement * 0.98);
+ const randomFactor = 0.8 + Math.random() * 0.4;
+ const increment = lastIncrement * randomFactor;
+ progress += increment;
+ progress = Math.min(progress, 95);
+
+ progressBar.style.width = `${progress}%`;
+ unfilledBar.style.width = `${100 - progress}%`;
+ }
+ }, 150);
+
+ const checkInterval = setInterval(() => {
+ const loginFormLoaded = document.querySelector(".manualLoginForm");
+ const activeTab = document.querySelector(".pageTabContent.is-active");
+
+ if (loginFormLoaded) {
+ finishLoading();
+ return;
+ }
+
+ if (activeTab) {
+ const tabIndex = activeTab.getAttribute("data-index");
+
+ if (tabIndex === "0") {
+ const homeSections = document.querySelector(".homeSectionsContainer");
+ const slidesContainer = document.querySelector("#slides-container");
+
+ if (homeSections && slidesContainer) {
+ finishLoading();
+ }
+ } else {
+ if (
+ activeTab.children.length > 0 ||
+ activeTab.innerText.trim().length > 0
+ ) {
+ finishLoading();
+ }
+ }
+ }
+ }, CONFIG.loadingCheckInterval);
+
+ const finishLoading = () => {
+ clearInterval(progressInterval);
+ clearInterval(checkInterval);
+ progressBar.style.transition = "width 300ms ease-in-out";
+ progressBar.style.width = "100%";
+ unfilledBar.style.width = "0%";
+
+ progressBar.addEventListener("transitionend", () => {
+ requestAnimationFrame(() => {
+ const loader = document.querySelector(".bar-loading");
+ if (loader) {
+ loader.style.opacity = "0";
+ setTimeout(() => {
+ loader.remove();
+ }, 300);
+ }
+ });
+ });
+ };
+};
+
+/**
+ * Resets the slideshow state completely
+ */
+const resetSlideshowState = () => {
+ console.log("🔄 Resetting slideshow state...");
+
+ if (STATE.slideshow.slideInterval) {
+ STATE.slideshow.slideInterval.stop();
+ }
+
+ // Destroy all video players
+ if (STATE.slideshow.videoPlayers) {
+ Object.values(STATE.slideshow.videoPlayers).forEach(player => {
+ if (player && typeof player.destroy === 'function') {
+ player.destroy();
+ }
+ });
+ STATE.slideshow.videoPlayers = {};
+ }
+
+ if (STATE.slideshow.sponsorBlockInterval) {
+ clearInterval(STATE.slideshow.sponsorBlockInterval);
+ STATE.slideshow.sponsorBlockInterval = null;
+ }
+
+ const container = document.getElementById("slides-container");
+ if (container) {
+ while (container.firstChild) {
+ container.removeChild(container.firstChild);
+ }
+ }
+
+ STATE.slideshow.hasInitialized = false;
+ STATE.slideshow.isTransitioning = false;
+ STATE.slideshow.isPaused = false;
+ STATE.slideshow.currentSlideIndex = 0;
+ STATE.slideshow.focusedSlide = null;
+ STATE.slideshow.containerFocused = false;
+ STATE.slideshow.slideInterval = null;
+ STATE.slideshow.itemIds = [];
+ STATE.slideshow.loadedItems = {};
+ STATE.slideshow.createdSlides = {};
+ STATE.slideshow.customTrailerUrls = {};
+ STATE.slideshow.totalItems = 0;
+ STATE.slideshow.isLoading = false;
+};
+
+/**
+ * Watches for login status changes
+ */
+const startLoginStatusWatcher = () => {
+ let wasLoggedIn = false;
+
+ setInterval(() => {
+ const isLoggedIn = isUserLoggedIn();
+
+ if (isLoggedIn !== wasLoggedIn) {
+ if (isLoggedIn) {
+ console.log("👤 User logged in. Initializing slideshow...");
+ if (!STATE.slideshow.hasInitialized) {
+ waitForApiClientAndInitialize();
+ } else {
+ console.log("🔄 Slideshow already initialized, skipping");
+ }
+ } else {
+ console.log("👋 User logged out. Stopping slideshow...");
+ resetSlideshowState();
+ }
+ wasLoggedIn = isLoggedIn;
+ }
+ }, 2000);
+};
+
+/**
+ * Wait for ApiClient to initialize before starting the slideshow
+ */
+const waitForApiClientAndInitialize = () => {
+ if (window.slideshowCheckInterval) {
+ clearInterval(window.slideshowCheckInterval);
+ }
+
+ window.slideshowCheckInterval = setInterval(() => {
+ if (!window.ApiClient) {
+ console.log("⏳ ApiClient not available yet. Waiting...");
+ return;
+ }
+
+ if (
+ window.ApiClient._currentUser &&
+ window.ApiClient._currentUser.Id &&
+ window.ApiClient._serverInfo &&
+ window.ApiClient._serverInfo.AccessToken
+ ) {
+ console.log(
+ "🔓 User is fully logged in. Starting slideshow initialization..."
+ );
+ clearInterval(window.slideshowCheckInterval);
+
+ if (!STATE.slideshow.hasInitialized) {
+ initJellyfinData(async () => {
+ console.log("✅ Jellyfin API client initialized successfully");
+ await initLocalization();
+ await fetchPluginConfig();
+ slidesInit();
+ });
+ } else {
+ console.log("🔄 Slideshow already initialized, skipping");
+ }
+ } else {
+ console.log(
+ "🔒 Authentication incomplete. Waiting for complete login..."
+ );
+ }
+ }, CONFIG.retryInterval);
+};
+
+const fetchPluginConfig = async () => {
+ try {
+ const response = await fetch('/MediaBarEnhanced/Config');
+ if (response.ok) {
+ const pluginConfig = await response.json();
+ if (pluginConfig) {
+ for (const key in pluginConfig) {
+ const camelKey = key.charAt(0).toLowerCase() + key.slice(1);
+ if (CONFIG.hasOwnProperty(camelKey)) {
+ CONFIG[camelKey] = pluginConfig[key];
+ }
+ }
+ STATE.slideshow.isMuted = CONFIG.startMuted;
+
+ if (!CONFIG.enableLoadingScreen) {
+ const loader = document.querySelector(".bar-loading");
+ if (loader) {
+ loader.remove();
+ }
+ }
+
+ // Sync to LocalStorage for next load
+ localStorage.setItem('mediaBarEnhanced-enableLoadingScreen', CONFIG.enableLoadingScreen);
+
+ console.log("✅ MediaBarEnhanced config loaded", CONFIG);
+ }
+ }
+ } catch (e) {
+ console.error("Failed to load MediaBarEnhanced config", e);
+ }
+};
+
+waitForApiClientAndInitialize();
+
+/**
+ * Utility functions for slide creation and management
+ */
+const SlideUtils = {
+ /**
+ * Sorts items based on configuration
+ * @param {Array