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 --- */
.halloween-fog-layer {
position: absolute;

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

@@ -1,12 +1,11 @@
const config = window.SeasonalsPluginConfig?.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 enableSpiders = config.EnableSpiders !== undefined ? config.EnableSpiders : true; // enable/disable spiders
const enableMice = config.EnableMice !== undefined ? config.EnableMice : true; // enable/disable mice
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 = [
"../Seasonals/Resources/halloween_images/ghost_20x20.png",
@@ -50,12 +49,16 @@ observer.observe(document.body, {
});
function addRandomSymbols(count) {
const halloweenContainer = document.querySelector('.halloween-container');
if (!halloweenContainer) return;
console.log('Adding random halloween symbols');
function initHalloween(count) {
let halloweenContainer = document.querySelector('.halloween-container');
if (!halloweenContainer) {
halloweenContainer = document.createElement("div");
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++) {
const halloweenDiv = document.createElement("div");
@@ -84,37 +87,7 @@ function addRandomSymbols(count) {
halloweenContainer.appendChild(halloweenDiv);
}
console.log('Random 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);
});
}
console.log('Halloween symbols added');
}
// create fog layer
@@ -230,7 +203,11 @@ function createMouse(container) {
function initializeHalloween() {
if (!halloween) return;
createHalloween();
const isMobile = window.matchMedia("only screen and (max-width: 768px)").matches;
const count = !isMobile ? halloweenCount : halloweenCountMobile;
initHalloween(count);
toggleHalloween();
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();