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

Refactor olympia.js to enhance configuration handling and streamline symbol creation logic

Browse Source
This commit is contained in:
CodeDevMLH
2026-02-28 00:59:22 +01:00
parent 492acb4052
commit 76006dc162
1 changed files with 45 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
Jellyfin.Plugin.Seasonals/Web/olympia.js
View File

@@ -1,10 +1,34 @@
const config = window.SeasonalsPluginConfig?.Olympia || {};
const olympia = config.EnableOlympia !== undefined ? config.EnableOlympia : true;
const symbolCount = config.SymbolCount || 25;
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 olympia = config.EnableOlympia !== undefined ? config.EnableOlympia : true; // enable/disable olympia theme
const symbolCount = config.SymbolCount !== undefined ? config.SymbolCount : 25; // count of floating symbols
const symbolCountMobile = config.SymbolCountMobile !== undefined ? config.SymbolCountMobile : 10; // count of floating symbols on mobile
const enableDifferentDuration = config.EnableDifferentDuration !== undefined ? config.EnableDifferentDuration : true; // enable different durations
// Olympic Ring Colors (Carnival Config)
const confettiColors = ['#0081C8', '#FCB131', '#000000', '#00A651', '#EE334E'];
const isMobile = window.matchMedia("only screen and (max-width: 768px)").matches;
const confettiCount = isMobile ? 30 : 60;
/**
* Credits:
* https://lottiefiles.com/free-animation/gold-coin-5Spp5kJbLP
* https://lottiefiles.com/free-animation/silver-coin-SIgIP59fII
* https://lottiefiles.com/free-animation/bronze-coin-wWVCJMsOUq
*/
const olympicMedals = [
"../Seasonals/Resources/olympic_assets/gold_coin.gif",
"../Seasonals/Resources/olympic_assets/silver_coin.gif",
"../Seasonals/Resources/olympic_assets/bronze_coin.gif"
]
/**
* Credits:
* https://www.flaticon.com/de/kostenloses-icon/fackel_4683293
* merged with:
* https://lottiefiles.com/free-animation/abstract-flames-lottie-json-animation-oSb0IFoBrj
*/
const olympicTorch = "../Seasonals/Resources/olympic_assets/torch.gif";
let msgPrinted = false;
@@ -49,27 +73,23 @@ function createOlympia() {
}
const standardCount = 15;
const totalSymbols = symbolCount + standardCount;
let isMobile = window.matchMedia("only screen and (max-width: 768px)").matches;
let finalCount = totalSymbols;
if (isMobile) {
finalCount = enableRandomMobile ? totalSymbols : standardCount;
}
let finalCount = isMobile ? symbolCountMobile : symbolCount;
const useRandomDuration = enableDifferentDuration !== false;
const activeItems = ['gold', 'silver', 'bronze', 'torch', 'rings_blue', 'rings_yellow', 'rings_black', 'rings_green', 'rings_red'];
const olympicRings = ['ring_blue.css', 'ring_yellow.css', 'ring_black.css', 'ring_green.css', 'ring_red.css'];
const activeItems = [...olympicMedals, ...olympicRings];
for (let i = 0; i < finalCount; i++) {
let symbol = document.createElement('div');
const randomItem = activeItems[Math.floor(Math.random() * activeItems.length)];
const isRing = randomItem.startsWith('rings');
const isMedal = ['gold', 'silver', 'bronze'].includes(randomItem);
const randomImgUrl = activeItems[Math.floor(Math.random() * activeItems.length)];
const isRing = randomImgUrl.includes('ring_');
const isMedal = randomImgUrl.includes('_coin');
symbol.className = `olympia-symbol olympia-${randomItem}`;
symbol.className = `olympia-symbol`;
// Create inner div for sway/rotation
let innerDiv = document.createElement('div');
@@ -77,19 +97,20 @@ function createOlympia() {
let img = null;
if (isRing) {
const colorName = randomImgUrl.split('ring_')[1].split('.')[0];
const ringColorMap = {
'rings_blue': '#0081C8',
'rings_yellow': '#FCB131',
'rings_black': '#000000',
'rings_green': '#00A651',
'rings_red': '#EE334E'
'blue': '#0081C8',
'yellow': '#FCB131',
'black': '#000000',
'green': '#00A651',
'red': '#EE334E'
};
let ringDiv = document.createElement('div');
ringDiv.className = 'olympia-ring-css';
ringDiv.style.setProperty('--ring-color', ringColorMap[randomItem]);
ringDiv.style.setProperty('--ring-color', ringColorMap[colorName]);
innerDiv.appendChild(ringDiv);
// Add a 3D flip animation for rings and medals
// Add a 3D flip animation for rings
const spinReverse = Math.random() > 0.5 ? 'reverse' : 'normal';
innerDiv.style.animation = `olympia-tumble-3d ${Math.random() * 4 + 4}s linear infinite ${spinReverse}`;
@@ -99,13 +120,7 @@ function createOlympia() {
innerDiv.style.setProperty('--rot-z', (Math.random() * 2 - 1).toFixed(2));
} else {
img = document.createElement('img');
let imgName = randomItem;
if (isMedal) {
imgName = `${randomItem}_coin.gif`;
} else {
imgName = `${randomItem}.png`;
}
img.src = `../Seasonals/Resources/olympic_assets/${imgName}`;
img.src = randomImgUrl;
img.onerror = function() {
symbol.remove();
};
@@ -181,10 +196,6 @@ function createOlympia() {
createTorch(true);
createTorch(false);
// Olympic Ring Colors (Carnival Config)
const confettiColors = ['#0081C8', '#FCB131', '#000000', '#00A651', '#EE334E'];
const confettiCount = isMobile ? 30 : 60;
for (let i = 0; i < confettiCount; i++) {
let wrapper = document.createElement('div');