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 config = window.SeasonalsPluginConfig?.Olympia || {};
const olympia = config.EnableOlympia !== undefined ? config.EnableOlympia : true; const olympia = config.EnableOlympia !== undefined ? config.EnableOlympia : true; // enable/disable olympia theme
const symbolCount = config.SymbolCount || 25; const symbolCount = config.SymbolCount !== undefined ? config.SymbolCount : 25; // count of floating symbols
const useRandomSymbols = config.EnableRandomSymbols !== undefined ? config.EnableRandomSymbols : true; const symbolCountMobile = config.SymbolCountMobile !== undefined ? config.SymbolCountMobile : 10; // count of floating symbols on mobile
const enableRandomMobile = config.EnableRandomSymbolsMobile !== undefined ? config.EnableRandomSymbolsMobile : false; const enableDifferentDuration = config.EnableDifferentDuration !== undefined ? config.EnableDifferentDuration : true; // enable different durations
const enableDifferentDuration = config.EnableDifferentDuration !== undefined ? config.EnableDifferentDuration : true;
// 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; let msgPrinted = false;
@@ -49,27 +73,23 @@ function createOlympia() {
} }
const standardCount = 15; const standardCount = 15;
const totalSymbols = symbolCount + standardCount;
let isMobile = window.matchMedia("only screen and (max-width: 768px)").matches; let isMobile = window.matchMedia("only screen and (max-width: 768px)").matches;
let finalCount = totalSymbols; let finalCount = isMobile ? symbolCountMobile : symbolCount;
if (isMobile) {
finalCount = enableRandomMobile ? totalSymbols : standardCount;
}
const useRandomDuration = enableDifferentDuration !== false; 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++) { for (let i = 0; i < finalCount; i++) {
let symbol = document.createElement('div'); let symbol = document.createElement('div');
const randomItem = activeItems[Math.floor(Math.random() * activeItems.length)]; const randomImgUrl = activeItems[Math.floor(Math.random() * activeItems.length)];
const isRing = randomItem.startsWith('rings'); const isRing = randomImgUrl.includes('ring_');
const isMedal = ['gold', 'silver', 'bronze'].includes(randomItem); const isMedal = randomImgUrl.includes('_coin');
symbol.className = `olympia-symbol olympia-${randomItem}`; symbol.className = `olympia-symbol`;
// Create inner div for sway/rotation // Create inner div for sway/rotation
let innerDiv = document.createElement('div'); let innerDiv = document.createElement('div');
@@ -77,19 +97,20 @@ function createOlympia() {
let img = null; let img = null;
if (isRing) { if (isRing) {
const colorName = randomImgUrl.split('ring_')[1].split('.')[0];
const ringColorMap = { const ringColorMap = {
'rings_blue': '#0081C8', 'blue': '#0081C8',
'rings_yellow': '#FCB131', 'yellow': '#FCB131',
'rings_black': '#000000', 'black': '#000000',
'rings_green': '#00A651', 'green': '#00A651',
'rings_red': '#EE334E' 'red': '#EE334E'
}; };
let ringDiv = document.createElement('div'); let ringDiv = document.createElement('div');
ringDiv.className = 'olympia-ring-css'; ringDiv.className = 'olympia-ring-css';
ringDiv.style.setProperty('--ring-color', ringColorMap[randomItem]); ringDiv.style.setProperty('--ring-color', ringColorMap[colorName]);
innerDiv.appendChild(ringDiv); 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'; const spinReverse = Math.random() > 0.5 ? 'reverse' : 'normal';
innerDiv.style.animation = `olympia-tumble-3d ${Math.random() * 4 + 4}s linear infinite ${spinReverse}`; 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)); innerDiv.style.setProperty('--rot-z', (Math.random() * 2 - 1).toFixed(2));
} else { } else {
img = document.createElement('img'); img = document.createElement('img');
let imgName = randomItem; img.src = randomImgUrl;
if (isMedal) {
imgName = `${randomItem}_coin.gif`;
} else {
imgName = `${randomItem}.png`;
}
img.src = `../Seasonals/Resources/olympic_assets/${imgName}`;
img.onerror = function() { img.onerror = function() {
symbol.remove(); symbol.remove();
}; };
@@ -182,10 +197,6 @@ function createOlympia() {
createTorch(true); createTorch(true);
createTorch(false); 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++) { for (let i = 0; i < confettiCount; i++) {
let wrapper = document.createElement('div'); let wrapper = document.createElement('div');
wrapper.className = 'olympia-confetti-wrapper'; wrapper.className = 'olympia-confetti-wrapper';