|
|
|
@@ -209,7 +209,7 @@ const initLoadingScreen = () => {
|
|
|
|
if (!isHomePage) return;
|
|
|
|
if (!isHomePage) return;
|
|
|
|
|
|
|
|
|
|
|
|
// Check LocalStorage for cached preference to avoid flash
|
|
|
|
// Check LocalStorage for cached preference to avoid flash
|
|
|
|
const cachedSetting = localStorage.getItem('mediaBarEnhanced_enableLoadingScreen');
|
|
|
|
const cachedSetting = localStorage.getItem('mediaBarEnhanced-enableLoadingScreen');
|
|
|
|
if (cachedSetting === 'false') {
|
|
|
|
if (cachedSetting === 'false') {
|
|
|
|
return;
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@@ -443,7 +443,7 @@ const fetchPluginConfig = async () => {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// Sync to LocalStorage for next load
|
|
|
|
// Sync to LocalStorage for next load
|
|
|
|
localStorage.setItem('mediaBarEnhanced_enableLoadingScreen', CONFIG.enableLoadingScreen);
|
|
|
|
localStorage.setItem('mediaBarEnhanced-enableLoadingScreen', CONFIG.enableLoadingScreen);
|
|
|
|
|
|
|
|
|
|
|
|
console.log("✅ MediaBarEnhanced config loaded", CONFIG);
|
|
|
|
console.log("✅ MediaBarEnhanced config loaded", CONFIG);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@@ -1444,8 +1444,8 @@ const SlideCreator = {
|
|
|
|
const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
|
|
|
|
const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
|
|
|
|
|
|
|
|
|
|
|
|
// Client Setting Overrides
|
|
|
|
// Client Setting Overrides
|
|
|
|
const enableVideo = SettingsManager.getSetting('videoBackdrops', CONFIG.enableVideoBackdrop);
|
|
|
|
const enableVideo = MediaBarEnhancedSettingsManager.getSetting('videoBackdrops', CONFIG.enableVideoBackdrop);
|
|
|
|
const enableMobileVideo = SettingsManager.getSetting('mobileVideo', CONFIG.enableMobileVideo);
|
|
|
|
const enableMobileVideo = MediaBarEnhancedSettingsManager.getSetting('mobileVideo', CONFIG.enableMobileVideo);
|
|
|
|
|
|
|
|
|
|
|
|
const shouldPlayVideo = enableVideo && (!isMobile || enableMobileVideo);
|
|
|
|
const shouldPlayVideo = enableVideo && (!isMobile || enableMobileVideo);
|
|
|
|
|
|
|
|
|
|
|
|
@@ -2142,7 +2142,9 @@ const SlideshowManager = {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
if (CONFIG.slideAnimationEnabled) {
|
|
|
|
const enableAnimations = MediaBarEnhancedSettingsManager.getSetting('slideAnimations', CONFIG.slideAnimationEnabled);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (enableAnimations) {
|
|
|
|
const backdrop = currentSlide.querySelector(".backdrop");
|
|
|
|
const backdrop = currentSlide.querySelector(".backdrop");
|
|
|
|
if (backdrop && !backdrop.classList.contains("video-backdrop")) {
|
|
|
|
if (backdrop && !backdrop.classList.contains("video-backdrop")) {
|
|
|
|
backdrop.classList.add("animate");
|
|
|
|
backdrop.classList.add("animate");
|
|
|
|
@@ -2188,12 +2190,15 @@ const SlideshowManager = {
|
|
|
|
setTimeout(() => {
|
|
|
|
setTimeout(() => {
|
|
|
|
STATE.slideshow.isTransitioning = false;
|
|
|
|
STATE.slideshow.isTransitioning = false;
|
|
|
|
|
|
|
|
|
|
|
|
if (previousVisibleSlide && CONFIG.slideAnimationEnabled) {
|
|
|
|
if (previousVisibleSlide) {
|
|
|
|
|
|
|
|
const enableAnimations = MediaBarEnhancedSettingsManager.getSetting('slideAnimations', CONFIG.slideAnimationEnabled);
|
|
|
|
|
|
|
|
if (enableAnimations) {
|
|
|
|
const prevBackdrop = previousVisibleSlide.querySelector(".backdrop");
|
|
|
|
const prevBackdrop = previousVisibleSlide.querySelector(".backdrop");
|
|
|
|
const prevLogo = previousVisibleSlide.querySelector(".logo");
|
|
|
|
const prevLogo = previousVisibleSlide.querySelector(".logo");
|
|
|
|
if (prevBackdrop) prevBackdrop.classList.remove("animate");
|
|
|
|
if (prevBackdrop) prevBackdrop.classList.remove("animate");
|
|
|
|
if (prevLogo) prevLogo.classList.remove("animate");
|
|
|
|
if (prevLogo) prevLogo.classList.remove("animate");
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
}, CONFIG.fadeTransitionDuration);
|
|
|
|
}, CONFIG.fadeTransitionDuration);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
@@ -2782,7 +2787,7 @@ const SlideshowManager = {
|
|
|
|
}, CONFIG.shuffleInterval);
|
|
|
|
}, CONFIG.shuffleInterval);
|
|
|
|
|
|
|
|
|
|
|
|
// Check if we should wait for trailer
|
|
|
|
// Check if we should wait for trailer
|
|
|
|
const waitForTrailer = SettingsManager.getSetting('waitForTrailer', CONFIG.waitForTrailerToEnd);
|
|
|
|
const waitForTrailer = MediaBarEnhancedSettingsManager.getSetting('waitForTrailer', CONFIG.waitForTrailerToEnd);
|
|
|
|
|
|
|
|
|
|
|
|
if (waitForTrailer && STATE.slideshow.slideInterval) {
|
|
|
|
if (waitForTrailer && STATE.slideshow.slideInterval) {
|
|
|
|
const activeSlide = document.querySelector('.slide.active');
|
|
|
|
const activeSlide = document.querySelector('.slide.active');
|
|
|
|
@@ -2929,7 +2934,7 @@ const initArrowNavigation = () => {
|
|
|
|
);
|
|
|
|
);
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const SettingsManager = {
|
|
|
|
const MediaBarEnhancedSettingsManager = {
|
|
|
|
initialized: false,
|
|
|
|
initialized: false,
|
|
|
|
|
|
|
|
|
|
|
|
init() {
|
|
|
|
init() {
|
|
|
|
@@ -2957,7 +2962,9 @@ const SettingsManager = {
|
|
|
|
button.className = 'paper-icon-button-light headerButton media-bar-settings-button';
|
|
|
|
button.className = 'paper-icon-button-light headerButton media-bar-settings-button';
|
|
|
|
button.title = 'Media Bar Settings';
|
|
|
|
button.title = 'Media Bar Settings';
|
|
|
|
// button.innerHTML = '<span class="material-icons">tune</span>';
|
|
|
|
// button.innerHTML = '<span class="material-icons">tune</span>';
|
|
|
|
button.innerHTML = '<img src="/MediaBarEnhanced/Resources/assets/logo_SW.svg" style="width: 24px; height: 24px; vertical-align: middle;">';
|
|
|
|
// button.innerHTML = '<img src="/MediaBarEnhanced/Resources/assets/logo_SW.svg" style="width: 24px; height: 24px; vertical-align: middle;">';
|
|
|
|
|
|
|
|
// currently not optimal, as it's egg-shaped due to the svg format... but if it's square, it's very small...
|
|
|
|
|
|
|
|
button.innerHTML = '<img src="/Seasonals/Resources/assets/logo_SW.svg" draggable="false" style="width: 52px; height: 24px; vertical-align: middle; pointer-events: none;">';
|
|
|
|
button.style.verticalAlign = 'middle';
|
|
|
|
button.style.verticalAlign = 'middle';
|
|
|
|
|
|
|
|
|
|
|
|
button.addEventListener('click', (e) => {
|
|
|
|
button.addEventListener('click', (e) => {
|
|
|
|
@@ -3015,12 +3022,12 @@ const SettingsManager = {
|
|
|
|
popup.style.top = `${rect.bottom + 10}px`;
|
|
|
|
popup.style.top = `${rect.bottom + 10}px`;
|
|
|
|
|
|
|
|
|
|
|
|
const settings = [
|
|
|
|
const settings = [
|
|
|
|
{ key: 'enabled', label: 'Enable Media Bar', default: true },
|
|
|
|
{ key: 'enabled', label: 'Enable Media Bar', description: 'Toggle the entire media bar visibility.', default: true },
|
|
|
|
{ key: 'videoBackdrops', label: 'Enable Video Backdrops', default: CONFIG.enableVideoBackdrop },
|
|
|
|
{ key: 'videoBackdrops', label: 'Enable Video Backdrops', description: 'Play trailers as background videos.', default: CONFIG.enableVideoBackdrop },
|
|
|
|
{ key: 'trailerButton', label: 'Show Trailer Button', default: CONFIG.showTrailerButton },
|
|
|
|
{ key: 'trailerButton', label: 'Show Trailer Button', description: 'Show button to play trailers in popup on non Video backdrops.', default: CONFIG.showTrailerButton },
|
|
|
|
{ key: 'mobileVideo', label: 'Enable Mobile Video', default: CONFIG.enableMobileVideo },
|
|
|
|
{ key: 'mobileVideo', label: 'Enable Mobile Video', description: 'Allow video backdrops on mobile devices.', default: CONFIG.enableMobileVideo },
|
|
|
|
{ key: 'waitForTrailer', label: 'Wait For Trailer To End', default: CONFIG.waitForTrailerToEnd },
|
|
|
|
{ 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 Slide Animations', default: CONFIG.slideAnimationEnabled },
|
|
|
|
{ key: 'slideAnimations', label: 'Enable Animations', description: 'Enable transition animations between slides.', default: CONFIG.slideAnimationEnabled },
|
|
|
|
];
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
|
|
let html = '<h3 style="margin-top:0; margin-bottom:1em; border-bottom:1px solid #444; padding-bottom:0.5em;">Media Bar Settings</h3>';
|
|
|
|
let html = '<h3 style="margin-top:0; margin-bottom:1em; border-bottom:1px solid #444; padding-bottom:0.5em;">Media Bar Settings</h3>';
|
|
|
|
@@ -3033,6 +3040,7 @@ const SettingsManager = {
|
|
|
|
<input id="mb-setting-${setting.key}" type="checkbox" is="emby-checkbox" class="emby-checkbox" ${isChecked ? 'checked' : ''} />
|
|
|
|
<input id="mb-setting-${setting.key}" type="checkbox" is="emby-checkbox" class="emby-checkbox" ${isChecked ? 'checked' : ''} />
|
|
|
|
<span class="checkboxLabel">${setting.label}</span>
|
|
|
|
<span class="checkboxLabel">${setting.label}</span>
|
|
|
|
</label>
|
|
|
|
</label>
|
|
|
|
|
|
|
|
<div class="fieldDescription">${setting.description}</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
`;
|
|
|
|
`;
|
|
|
|
});
|
|
|
|
});
|
|
|
|
@@ -3091,10 +3099,18 @@ const slidesInit = async () => {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
if (CONFIG.enableClientSideSettings) {
|
|
|
|
if (CONFIG.enableClientSideSettings) {
|
|
|
|
SettingsManager.init();
|
|
|
|
MediaBarEnhancedSettingsManager.init();
|
|
|
|
const isEnabled = SettingsManager.getSetting('enabled', true);
|
|
|
|
const isEnabled = MediaBarEnhancedSettingsManager.getSetting('enabled', true);
|
|
|
|
if (!isEnabled) {
|
|
|
|
if (!isEnabled) {
|
|
|
|
console.log("MediaBarEnhanced: Disabled by client-side setting.");
|
|
|
|
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;
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@@ -3216,6 +3232,6 @@ window.mediaBarEnhanced = {
|
|
|
|
|
|
|
|
|
|
|
|
initLoadingScreen();
|
|
|
|
initLoadingScreen();
|
|
|
|
|
|
|
|
|
|
|
|
loadPluginConfig().then(() => {
|
|
|
|
fetchPluginConfig().then(() => {
|
|
|
|
startLoginStatusWatcher();
|
|
|
|
startLoginStatusWatcher();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
