CodeDevMLH/Jellyfin-Seasonals-Plugin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 15 Wiki Activity

Refactor halloween.js and halloween.css to streamline symbol initialization and remove random symbol functionality

Browse Source
This commit is contained in:
CodeDevMLH
2026-02-28 01:20:02 +01:00
parent c43f031617
commit 71d07aa0f3
2 changed files with 16 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
Jellyfin.Plugin.Seasonals/Web/halloween.css
View File

@@ -49,66 +49,6 @@
} }
} }
.halloween:nth-of-type(0) {
left: 1%;
animation-delay: 0s, 0s;
}
.halloween:nth-of-type(1) {
left: 10%;
animation-delay: -1s, -1s;
}
.halloween:nth-of-type(2) {
left: 20%;
animation-delay: -2s, -2s;
}
.halloween:nth-of-type(3) {
left: 30%;
animation-delay: -3s, -3s;
}
.halloween:nth-of-type(4) {
left: 40%;
animation-delay: -4s, -4s;
}
.halloween:nth-of-type(5) {
left: 50%;
animation-delay: -5s, -5s;
}
.halloween:nth-of-type(6) {
left: 60%;
animation-delay: -6s, -6s;
}
.halloween:nth-of-type(7) {
left: 70%;
animation-delay: -7s, -7s;
}
.halloween:nth-of-type(8) {
left: 80%;
animation-delay: -8s, -8s;
}
.halloween:nth-of-type(9) {
left: 90%;
animation-delay: -9s, -9s;
}
.halloween:nth-of-type(10) {
left: 25%;
animation-delay: -10s, -10s;
}
.halloween:nth-of-type(11) {
left: 65%;
animation-delay: -11s, -11s;
}
/* --- Fog Layer --- */ /* --- Fog Layer --- */
.halloween-fog-layer { .halloween-fog-layer {
position: absolute; position: absolute;

60
Jellyfin.Plugin.Seasonals/Web/halloween.js
View File

@@ -1,12 +1,11 @@
const config = window.SeasonalsPluginConfig?.Halloween || {}; const config = window.SeasonalsPluginConfig?.Halloween || {};
const halloween = config.EnableHalloween !== undefined ? config.EnableHalloween : true; // enable/disable halloween const halloween = config.EnableHalloween !== undefined ? config.EnableHalloween : true; // enable/disable halloween
const randomSymbols = config.EnableRandomSymbols !== undefined ? config.EnableRandomSymbols : true; // enable random symbols
const randomSymbolsMobile = config.EnableRandomSymbolsMobile !== undefined ? config.EnableRandomSymbolsMobile : false; // enable random symbols on mobile
const enableDiffrentDuration = config.EnableDifferentDuration !== undefined ? config.EnableDifferentDuration : true; // enable different durations const enableDiffrentDuration = config.EnableDifferentDuration !== undefined ? config.EnableDifferentDuration : true; // enable different durations
const enableSpiders = config.EnableSpiders !== undefined ? config.EnableSpiders : true; // enable/disable spiders const enableSpiders = config.EnableSpiders !== undefined ? config.EnableSpiders : true; // enable/disable spiders
const enableMice = config.EnableMice !== undefined ? config.EnableMice : true; // enable/disable mice const enableMice = config.EnableMice !== undefined ? config.EnableMice : true; // enable/disable mice
const halloweenCount = config.SymbolCount !== undefined ? config.SymbolCount : 25; // count of symbols const halloweenCount = config.SymbolCount !== undefined ? config.SymbolCount : 25; // count of symbols
const halloweenCountMobile = config.SymbolCountMobile !== undefined ? config.SymbolCountMobile : 10; // count of symbols on mobile
const images = [ const images = [
"../Seasonals/Resources/halloween_images/ghost_20x20.png", "../Seasonals/Resources/halloween_images/ghost_20x20.png",
@@ -50,12 +49,16 @@ observer.observe(document.body, {
}); });
function addRandomSymbols(count) { function initHalloween(count) {
const halloweenContainer = document.querySelector('.halloween-container'); let halloweenContainer = document.querySelector('.halloween-container');
if (!halloweenContainer) return; if (!halloweenContainer) {
halloweenContainer = document.createElement("div");
console.log('Adding random halloween symbols'); halloweenContainer.className = "halloween-container";
halloweenContainer.setAttribute("aria-hidden", "true");
document.body.appendChild(halloweenContainer);
}
console.log('Adding halloween symbols');
for (let i = 0; i < count; i++) { for (let i = 0; i < count; i++) {
const halloweenDiv = document.createElement("div"); const halloweenDiv = document.createElement("div");
@@ -84,37 +87,7 @@ function addRandomSymbols(count) {
halloweenContainer.appendChild(halloweenDiv); halloweenContainer.appendChild(halloweenDiv);
} }
console.log('Random halloween symbols added'); console.log('Halloween symbols added');
}
function createHalloween() {
const container = document.querySelector('.halloween-container') || document.createElement("div");
if (!document.querySelector('.halloween-container')) {
container.className = "halloween-container";
container.setAttribute("aria-hidden", "true");
document.body.appendChild(container);
}
for (let i = 0; i < 4; i++) {
images.forEach(imageSrc => {
const halloweenDiv = document.createElement("div");
halloweenDiv.className = "halloween";
const img = document.createElement("img");
img.src = imageSrc;
// set random animation duration
if (enableDiffrentDuration) {
const randomAnimationDuration = Math.random() * 10 + 6; // delay (6s to 10s)
const randomAnimationDuration2 = Math.random() * 5 + 2; // delay (2s to 5s)
halloweenDiv.style.animationDuration = `${randomAnimationDuration}s, ${randomAnimationDuration2}s`;
}
halloweenDiv.appendChild(img);
container.appendChild(halloweenDiv);
});
}
} }
// create fog layer // create fog layer
@@ -230,7 +203,11 @@ function createMouse(container) {
function initializeHalloween() { function initializeHalloween() {
if (!halloween) return; if (!halloween) return;
createHalloween();
const isMobile = window.matchMedia("only screen and (max-width: 768px)").matches;
const count = !isMobile ? halloweenCount : halloweenCountMobile;
initHalloween(count);
toggleHalloween(); toggleHalloween();
const container = document.querySelector('.halloween-container'); const container = document.querySelector('.halloween-container');
@@ -252,11 +229,6 @@ function initializeHalloween() {
} }
} }
} }
const screenWidth = window.innerWidth; // get the screen width to detect mobile devices
if (randomSymbols && (screenWidth > 768 || randomSymbolsMobile)) {
addRandomSymbols(halloweenCount);
}
} }
initializeHalloween(); initializeHalloween();