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

Refactor birthday, olympia, space, and sports animations; enhance symbol management and visual effects

Browse Source 
- Updated birthday.js to improve balloon visuals and confetti effects, including new color schemes and enhanced pop animations.
- Removed legacy fallback logic in olympia.js and improved image error handling.
- Enhanced space.js with configurable counts for planets, astronauts, satellites, ISS, and rockets; improved shooting star animations and added random image swapping.
- Simplified sports.js by removing legacy emoji fallback logic and optimizing ball creation based on selected categories.
- Adjusted CSS styles across birthday, olympia, space, and sports for better visual consistency and performance.
[skip ci]
This commit is contained in:
CodeDevMLH
2026-02-27 01:18:08 +01:00
parent bdc7d2e325
commit 8f322fd6cf
10 changed files with 471 additions and 342 deletions
Download Patch File Download Diff File Expand all files Collapse all files

240
Jellyfin.Plugin.Seasonals/Web/space.js
View File

@@ -1,13 +1,19 @@
const config = window.SeasonalsPluginConfig?.Space || {};
const space = config.EnableSpace !== undefined ? config.EnableSpace : true;
const symbolCount = config.SymbolCount || 25;
const planetCountConf = config.PlanetCount !== undefined ? config.PlanetCount : 6;
const astronautCountConf = config.AstronautCount !== undefined ? config.AstronautCount : 1;
const satelliteCountConf = config.SatelliteCount !== undefined ? config.SatelliteCount : 4;
const issCountConf = config.IssCount !== undefined ? config.IssCount : 1;
const rocketCountConf = config.RocketCount !== undefined ? config.RocketCount : 1;
const useRandomSymbols = config.EnableRandomSymbols !== undefined ? config.EnableRandomSymbols : true;
const enableRandomMobile = config.EnableRandomSymbolsMobile !== undefined ? config.EnableRandomSymbolsMobile : false;
const enableDifferentDuration = config.EnableDifferentDuration !== undefined ? config.EnableDifferentDuration : true;
const spaceImages = [
"../Seasonals/Resources/space_assets/astronaut_1.gif",
const astronautImages = [
"../Seasonals/Resources/space_assets/astronaut_1.gif"
];
const planetImages = [
"../Seasonals/Resources/space_assets/planet_1.png",
"../Seasonals/Resources/space_assets/planet_2.png",
"../Seasonals/Resources/space_assets/planet_3.png",
@@ -16,13 +22,19 @@ const spaceImages = [
"../Seasonals/Resources/space_assets/planet_6.png",
"../Seasonals/Resources/space_assets/planet_7.png",
"../Seasonals/Resources/space_assets/planet_8.png",
"../Seasonals/Resources/space_assets/planet_9.png",
"../Seasonals/Resources/space_assets/rocket.gif",
"../Seasonals/Resources/space_assets/Satellite_1.gif",
"../Seasonals/Resources/space_assets/Satellite_2.gif",
"../Seasonals/Resources/space_assets/space-shuttle.png",
"../Seasonals/Resources/space_assets/iss.png"
"../Seasonals/Resources/space_assets/planet_9.png"
];
const satelliteImages = [
"../Seasonals/Resources/space_assets/Satellite_1.gif",
"../Seasonals/Resources/space_assets/Satellite_2.gif"
];
const issImage = "../Seasonals/Resources/space_assets/iss.png";
const rocketImages = [
"../Seasonals/Resources/space_assets/rocket.gif",
"../Seasonals/Resources/space_assets/space-shuttle.png"
]
let msgPrinted = false;
@@ -66,14 +78,25 @@ function createSpace() {
document.body.appendChild(container);
}
const standardCount = 15;
const totalSymbols = symbolCount + standardCount;
let isMobile = window.matchMedia("only screen and (max-width: 768px)").matches;
let finalCount = totalSymbols;
const standardPlanetCount = 4;
const standardAstronautCount = 1;
const standardSatelliteCount = 2;
const standardIssCount = 1;
const standardRocketCount = 1;
if (isMobile) {
finalCount = enableRandomMobile ? totalSymbols : standardCount;
let isMobile = window.matchMedia("only screen and (max-width: 768px)").matches;
let pCount = planetCountConf;
let aCount = astronautCountConf;
let sCount = satelliteCountConf;
let iCount = issCountConf;
let rCount = rocketCountConf;
if (isMobile && !enableRandomMobile) {
pCount = standardPlanetCount;
aCount = standardAstronautCount;
sCount = standardSatelliteCount;
iCount = standardIssCount;
rCount = standardRocketCount;
}
// Add Nebula Glow
@@ -90,30 +113,43 @@ function createSpace() {
// Generate random stars for parallax starfield using CSS % / vw sizes for responsiveness
for (let i = 0; i < 150; i++) {
boxShadows1.push(`${(Math.random() * 100).toFixed(2)}vw ${(Math.random() * 100).toFixed(2)}vh #FFF`);
if (i < 50) boxShadows2.push(`${(Math.random() * 100).toFixed(2)}vw ${(Math.random() * 100).toFixed(2)}vh #FFF`);
if (i < 20) boxShadows3.push(`${(Math.random() * 100).toFixed(2)}vw ${(Math.random() * 100).toFixed(2)}vh #FFF`);
let x = (Math.random() * 100).toFixed(2);
let y = (Math.random() * 100).toFixed(2);
boxShadows1.push(`${x}vw ${y}vh #FFF`);
boxShadows1.push(`${x}vw ${(parseFloat(y) + 100).toFixed(2)}vh #FFF`);
}
for (let i = 0; i < 50; i++) {
let x = (Math.random() * 100).toFixed(2);
let y = (Math.random() * 100).toFixed(2);
boxShadows2.push(`${x}vw ${y}vh #FFF`);
boxShadows2.push(`${x}vw ${(parseFloat(y) + 100).toFixed(2)}vh #FFF`);
}
for (let i = 0; i < 20; i++) {
let x = (Math.random() * 100).toFixed(2);
let y = (Math.random() * 100).toFixed(2);
boxShadows3.push(`${x}vw ${y}vh #FFF`);
boxShadows3.push(`${x}vw ${(parseFloat(y) + 100).toFixed(2)}vh #FFF`);
}
const starLayer1 = document.createElement('div');
starLayer1.style.width = '1px'; starLayer1.style.height = '1px';
starLayer1.style.background = 'transparent';
starLayer1.style.boxShadow = boxShadows1.join(", ");
starLayer1.style.animation = 'space-slow-spin 200s linear infinite';
starLayer1.style.animation = 'space-star-drift 200s linear infinite';
starfield.appendChild(starLayer1);
const starLayer2 = document.createElement('div');
starLayer2.style.width = '2px'; starLayer2.style.height = '2px';
starLayer2.style.background = 'transparent';
starLayer2.style.boxShadow = boxShadows2.join(", ");
starLayer2.style.animation = 'space-slow-spin 150s linear infinite reverse';
starLayer2.style.animation = 'space-star-drift 150s linear infinite';
starfield.appendChild(starLayer2);
const starLayer3 = document.createElement('div');
starLayer3.style.width = '3px'; starLayer3.style.height = '3px';
starLayer3.style.background = 'transparent';
starLayer3.style.boxShadow = boxShadows3.join(", ");
starLayer3.style.animation = 'space-slow-spin 100s linear infinite';
starLayer3.style.animation = 'space-star-drift 100s linear infinite';
starfield.appendChild(starLayer3);
container.appendChild(starfield);
@@ -125,85 +161,115 @@ function createSpace() {
streak.className = 'space-shooting-star';
// Pick a random tail direction and fall direction to match
const isFromLeft = Math.random() > 0.5;
const rotateAngle = isFromLeft ? 45 : -45;
// Direction angle: random between 15deg-75deg (left) or 105deg-165deg (right)
// so they don't always fall in the exact same quadrant trajectory
let angle = isFromLeft
? Math.random() * 60 + 15
: Math.random() * 60 + 105;
streak.style.transform = `rotate(${rotateAngle}deg)`;
streak.style.transformOrigin = isFromLeft ? 'left center' : 'right center';
streak.style.setProperty('--shoot-angle', `${angle}deg`);
const topStart = Math.random() * 50;
streak.style.setProperty('--shoot-start-x', isFromLeft ? '-20vw' : '120vw');
streak.style.setProperty('--shoot-end-x', isFromLeft ? '120vw' : '-20vw');
streak.style.setProperty('--shoot-start-y', `${topStart}vh`);
streak.style.setProperty('--shoot-end-y', `${topStart + 140}vh`); // 140vh drop to cross screen diagonally
streak.style.left = isFromLeft ? '-20vw' : '120vw';
streak.style.top = `${topStart}vh`;
// Travel 200 viewport widths exactly along the rotated angle
streak.style.setProperty('--shoot-distance', '200vw');
streak.style.animationDelay = `${Math.random() * 20}s`;
// MARK: Shooting Star Speed
const flightCycleDuration = Math.random() * 10 + 15; // 15-25s
streak.style.animationDuration = `${flightCycleDuration}s`;
streak.style.animationDelay = `${Math.random() * 20}s`; // Less frequent
streak.style.animationDuration = `${Math.random() * 2 + 3}s`; // 3-5s
container.appendChild(streak);
}
const useRandomDuration = enableDifferentDuration !== false;
for (let i = 0; i < finalCount; i++) {
let symbol = document.createElement('div');
const randomImage = spaceImages[Math.floor(Math.random() * spaceImages.length)];
symbol.className = `space-symbol`;
function createSpaceItem(imageArr, cCount, addedClass) {
for (let i = 0; i < cCount; i++) {
let symbol = document.createElement('div');
const randomImage = imageArr[Math.floor(Math.random() * imageArr.length)];
symbol.className = `space-symbol ${addedClass}`;
let img = document.createElement('img');
img.src = randomImage;
img.onerror = function() {
this.style.display = 'none';
}; // removed emoji fallback
symbol.appendChild(img);
let img = document.createElement('img');
img.src = randomImage;
img.onerror = function() {
this.style.display = 'none';
};
symbol.appendChild(img);
const topPos = Math.random() * 90; // 0 to 90vh
const delaySeconds = Math.random() * 10;
// Zero gravity sizes / speeds
const depth = Math.random();
const distanceScale = 0.3 + (depth * 0.7); // 0.3 to 1.0 (decently small)
const blurAmount = depth < 0.3 ? (1 - depth) * 2 : 0;
symbol.style.filter = `blur(${blurAmount}px)`;
symbol.style.zIndex = Math.floor(depth * 30) + 20;
const topPos = Math.random() * 90; // 0 to 90vh
// Zero gravity sizes / speeds
const depth = Math.random();
// Make background elements (depth close to 0) much smaller than foreground
const distanceScale = 0.15 + (depth * 0.85); // 0.15 to 1.0
symbol.style.zIndex = Math.floor(depth * 30) + 20;
let durationSeconds = 30; // Very slow
if (useRandomDuration) {
durationSeconds = (1 - depth) * 40 + 30 + Math.random() * 10 - 5;
let durationSeconds = 30; // Very slow
if (useRandomDuration) {
durationSeconds = (1 - depth) * 40 + 30 + Math.random() * 10 - 5;
}
// Randomly pick direction: left-to-right OR right-to-left
const goRight = Math.random() > 0.5;
const baseTransformScale = goRight ? 'scaleX(-1)' : 'scaleX(1)';
if (goRight) {
symbol.style.animationName = 'space-drift-right';
symbol.style.left = '-20vw';
symbol.style.right = 'auto';
} else {
symbol.style.animationName = 'space-drift-left';
symbol.style.right = '-20vw';
symbol.style.left = 'auto';
}
symbol.style.top = `${topPos}vh`;
symbol.style.animationDuration = `${durationSeconds}s`;
// Negative delay correctly scatters them initially across the screen
// so they don't all appear to spawn from the edge at the start
const delaySeconds = -(Math.random() * durationSeconds);
symbol.style.animationDelay = `${delaySeconds}s`;
// Slow rotation inside inner div
const rotationDiv = document.createElement('div');
const rotDur = Math.random() * 20 + 20; // 20-40s spin
const spinReverse = Math.random() > 0.5 ? 'reverse' : 'normal';
rotationDiv.style.animation = `space-slow-spin ${rotDur}s linear infinite ${spinReverse}`;
// Apply final static scaling and facing to inner image directly
img.style.transform = `scale(${distanceScale}) ${baseTransformScale}`;
rotationDiv.appendChild(img);
symbol.appendChild(rotationDiv);
// Swap to a random image from the pool every time it completes an orbit (disappears)
if (imageArr.length > 1) {
// The animation delay pushes the initial cycle, so we use setInterval matched to duration
setInterval(() => {
// Update only if currently out of bounds to avoid popping
const rect = symbol.getBoundingClientRect();
if (rect.right < 0 || rect.left > window.innerWidth) {
img.src = imageArr[Math.floor(Math.random() * imageArr.length)];
}
}, 2000); // Check occasionally if it's off screen
}
container.appendChild(symbol);
}
// Randomly pick direction: left-to-right OR right-to-left
const goRight = Math.random() > 0.5;
const baseTransformScale = goRight ? 'scaleX(-1)' : 'scaleX(1)';
if (goRight) {
symbol.style.animationName = 'space-drift-right';
symbol.style.left = '-15vw';
} else {
symbol.style.animationName = 'space-drift-left';
symbol.style.right = '-15vw';
}
symbol.style.top = `${topPos}vh`;
symbol.style.animationDuration = `${durationSeconds}s`;
symbol.style.animationDelay = `${delaySeconds}s`;
// Slow rotation inside inner div
const rotationDiv = document.createElement('div');
const rotDur = Math.random() * 20 + 20; // 20-40s spin
const spinReverse = Math.random() > 0.5 ? 'reverse' : 'normal';
rotationDiv.style.animation = `space-slow-spin ${rotDur}s linear infinite ${spinReverse}`;
rotationDiv.appendChild(symbol.cloneNode(true));
// Apply final static scaling and facing to inner image
rotationDiv.firstChild.style.transform = `scale(${distanceScale}) ${baseTransformScale}`;
symbol.innerHTML = '';
symbol.appendChild(rotationDiv);
container.appendChild(symbol);
}
createSpaceItem(planetImages, pCount, 'space-planet');
createSpaceItem(astronautImages, aCount, 'space-astronaut');
createSpaceItem(satelliteImages, sCount, 'space-satellite');
createSpaceItem([issImage], iCount, 'space-iss');
createSpaceItem(rocketImages, rCount, 'space-rocket');
}
function initializeSpace() {