} 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("🎬 Media Bar:", `Input '${rawId}' is not a GUID, searching for Collection/Playlist by name...`);
const resolvedId = await ApiUtils.findCollectionOrPlaylistByName(rawId);
if (resolvedId) {
console.log("🎬 Media Bar:", `Resolved name '${rawId}' to ID: ${resolvedId}`);
id = resolvedId;
} else {
console.warn("🎬 Media Bar:", `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("🎬 Media Bar:", `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("🎬 Media Bar:", `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("🎬 Media Bar:", "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("🎬 Media Bar:", `Applied limits to custom IDs: ${itemIds.length} items (Movies: ${movieCount}, Shows: ${showCount})`);
} else {
itemIds = resolvedItems.map(i => i.Id);
}
}
// 2. Fallback to server query (Random)
if (itemIds.length === 0) {
console.log("🎬 Media Bar:", "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("🎬 Media Bar:", `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("🎬 Media Bar:", "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("🎬 Media Bar:", "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 += `
`;
});
// Buttons Container
html += `
`;
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("🎬 Media Bar:", "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("🎬 Media Bar:", "Error pausing video on tab hide:", e);
}
} else if (player.tagName === 'VIDEO') { // HTML5 Video
player.pause();
STATE.slideshow.isVideoPlaying = false;
}
}
}
} else {
console.log("🎬 Media Bar:", "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("🎬 Media Bar:", "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("🎬 Media Bar:", "Error resuming HTML5 video:", e));
STATE.slideshow.isVideoPlaying = true;
} catch(e) { console.warn("🎬 Media Bar:", 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("🎬 Media Bar:", "⚠️ Slideshow already initialized, skipping");
return;
}
if (CONFIG.enableClientSideSettings) {
MediaBarEnhancedSettingsManager.init();
const isClientSideEnabled = MediaBarEnhancedSettingsManager.getSetting('enabled', true);
if (!isClientSideEnabled) {
console.log("🎬 Media Bar:", "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("🎬 Media Bar:", "🌟 Initializing Enhanced Jellyfin Slideshow");
initArrowNavigation();
await SlideshowManager.loadSlideshowData();
SlideshowManager.initTouchEvents();
SlideshowManager.initKeyboardEvents();
initPageVisibilityHandler();
VisibilityObserver.init();
console.log("🎬 Media Bar:", "✅ Enhanced Jellyfin Slideshow initialized successfully");
} catch (error) {
console.error("🎬 Media Bar:", "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();
});