mirror of
https://github.com/ranaldsgift/KefinTweaks.git
synced 2026-11-05 15:52:47 +01:00
Add option to enable/disable the Christmas background on the home screen
This commit is contained in:
@@ -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',
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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));
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user