Add option to enable/disable the Christmas background on the home screen

This commit is contained in:
HighImKevin
2025-12-03 22:28:17 -05:00
parent f72a529791
commit dd6942f8db
4 changed files with 24 additions and 10 deletions
+14 -6
View File
@@ -1816,13 +1816,20 @@
</summary>
<div style="padding: 0.75em 0 0 0;">
<div id="homeScreen_seasonal_container">
<div class="listItem" style="border: 1px solid rgba(255,255,255,0.1); border-radius: 4px; padding: 0.75em; margin-bottom: 1em;">
<div class="listItemContent">
<div class="listItemBodyText" style="margin-bottom: 0.5em;">Enable Seasonal Animations</div>
<div class="listItemBodyText secondary" style="margin-bottom: 0.75em; font-size: 0.9em;">Enable falling snow/leaves animations for seasonal themes</div>
${buildJellyfinCheckbox('homeScreen_seasonal_enableSeasonalAnimations', seasonal.enableSeasonalAnimations !== false, 'Enabled')}
<div class="listItem" style="border: 1px solid rgba(255,255,255,0.1); border-radius: 4px; padding: 0.75em; margin-bottom: 1em;">
<div class="listItemContent">
<div class="listItemBodyText" style="margin-bottom: 0.5em;">Enable Seasonal Animations</div>
<div class="listItemBodyText secondary" style="margin-bottom: 0.75em; font-size: 0.9em;">Enable falling snow/leaves animations for seasonal themes</div>
${buildJellyfinCheckbox('homeScreen_seasonal_enableSeasonalAnimations', seasonal.enableSeasonalAnimations !== false, 'Enabled')}
</div>
</div>
<div class="listItem" style="border: 1px solid rgba(255,255,255,0.1); border-radius: 4px; padding: 0.75em; margin-bottom: 1em;">
<div class="listItemContent">
<div class="listItemBodyText" style="margin-bottom: 0.5em;">Enable Christmas Background</div>
<div class="listItemBodyText secondary" style="margin-bottom: 0.75em; font-size: 0.9em;">Enable the festive background image for the Christmas theme</div>
${buildJellyfinCheckbox('homeScreen_seasonal_enableSeasonalBackground', seasonal.enableSeasonalBackground !== false, 'Enabled')}
</div>
</div>
</div>
<div id="homeScreen_seasonal_seasons_list" style="margin-bottom: 1em;">
${seasonalSectionsHtml}
</div>
@@ -5080,6 +5087,7 @@ window.KefinTweaksConfig = ${JSON.stringify(config, null, 2)};`;
seasonal: {
enabled: document.getElementById('homeScreen_seasonal_enabled')?.checked !== false,
enableSeasonalAnimations: document.getElementById('homeScreen_seasonal_enableSeasonalAnimations')?.checked !== false,
enableSeasonalBackground: document.getElementById('homeScreen_seasonal_enableSeasonalBackground')?.checked !== false,
defaultItemLimit: 16,
defaultSortOrder: 'Random',
defaultCardFormat: 'Poster',
+2 -2
View File
@@ -58,7 +58,7 @@
}
/* Halloween theme */
.home-screen.halloween-theme #reactRoot:has(.libraryPage:not(.hide) .pageTabContent.is-active[data-index="0"])>.backgroundContainer::after {
.home-screen.halloween-theme.with-background #reactRoot:has(.libraryPage:not(.hide) .pageTabContent.is-active[data-index="0"])>.backgroundContainer::after {
content: '';
position: absolute;
top: 0;
@@ -71,7 +71,7 @@
}
/* Christmas theme */
.home-screen.christmas-theme #reactRoot:has(.libraryPage:not(.hide) .pageTabContent.is-active[data-index="0"])>.backgroundContainer::after {
.home-screen.christmas-theme.with-background #reactRoot:has(.libraryPage:not(.hide) .pageTabContent.is-active[data-index="0"])>.backgroundContainer::after {
content: '';
position: absolute;
top: 0;
+7 -2
View File
@@ -142,6 +142,7 @@
const homeScreenConfig = window.KefinTweaksConfig?.homeScreen || {};
const seasonalConfig = homeScreenConfig.seasonal || {};
const enableSeasonalAnimations = seasonalConfig.enableSeasonalAnimations !== false;
const enableSeasonalBackground = seasonalConfig.enableSeasonalBackground !== false;
// Manage home-screen class
if (isHomePage && body) {
@@ -153,7 +154,7 @@
// Manage theme classes (only on home page)
if (isHomePage) {
// Remove all existing theme classes
const themeClasses = ['halloween-theme', 'christmas-theme', 'valentines-theme', 'newyear-theme'];
const themeClasses = ['halloween-theme', 'christmas-theme', 'valentines-theme', 'newyear-theme', 'with-background'];
themeClasses.forEach(themeClass => body.classList.remove(themeClass));
// Add appropriate theme class based on current date
@@ -162,6 +163,10 @@
} else if (isChristmasPeriod()) {
body.classList.add('christmas-theme');
if (enableSeasonalBackground) {
body.classList.add('with-background');
}
if (enableSeasonalAnimations) {
// Import the Flurry module and leverage it from jQuery. /scripts/third party/flurry.js by appending it to the head
const flurryScriptSrc = (window.KefinTweaksConfig.kefinTweaksRoot || '') + 'scripts/third party/jquery.flurry.min.js';
@@ -192,7 +197,7 @@
}
} else {
// Remove all theme classes when not on home page
const themeClasses = ['halloween-theme', 'christmas-theme', 'valentines-theme', 'newyear-theme'];
const themeClasses = ['halloween-theme', 'christmas-theme', 'valentines-theme', 'newyear-theme', 'with-background'];
themeClasses.forEach(themeClass => body.classList.remove(themeClass));
}
}