diff --git a/Jellyfin.Plugin.Seasonals/Web/carnival.js b/Jellyfin.Plugin.Seasonals/Web/carnival.js index 7398a1a..d548285 100644 --- a/Jellyfin.Plugin.Seasonals/Web/carnival.js +++ b/Jellyfin.Plugin.Seasonals/Web/carnival.js @@ -41,7 +41,6 @@ function toggleCarnival() { } } -// observe changes in the DOM const observer = new MutationObserver(toggleCarnival); observer.observe(document.body, { childList: true, diff --git a/Jellyfin.Plugin.Seasonals/Web/easter.js b/Jellyfin.Plugin.Seasonals/Web/easter.js index c30011d..e46ee3d 100644 --- a/Jellyfin.Plugin.Seasonals/Web/easter.js +++ b/Jellyfin.Plugin.Seasonals/Web/easter.js @@ -2,17 +2,18 @@ const config = window.SeasonalsPluginConfig?.Easter || {}; const easter = config.EnableEaster !== undefined ? config.EnableEaster : true; const enableBunny = config.EnableBunny !== undefined ? config.EnableBunny : true; +const minBunnyRestTime = config.MinBunnyRestTime || 2000; +const maxBunnyRestTime = config.MaxBunnyRestTime || 5000; +const eggCount = config.EggCount || 15; + /* MARK: Bunny movement config */ const jumpDistanceVw = 5; // Distance in vw the bunny covers per jump const jumpDurationMs = 770; // Time in ms the bunny spends moving during a jump const pauseDurationMs = 116.6666; // Time in ms the bunny pauses between jumps -const minBunnyRestTime = config.MinBunnyRestTime || 2000; -const maxBunnyRestTime = config.MaxBunnyRestTime || 5000; -const eggCount = config.EggCount || 15; - const rabbit = "../Seasonals/Resources/easter_images/Osterhase.gif"; +// Credit: https://flaticon.com const easterEggImages = [ "../Seasonals/Resources/easter_images/egg_1.png", "../Seasonals/Resources/easter_images/egg_2.png", @@ -197,7 +198,7 @@ function animateRabbit(rabbit) { rabbit.style.transition = 'none'; const transformScale = startFromLeft ? 'scaleX(-1)' : ''; - // Fix bounding box center-of-gravity shift when graphic is flipped + // Set bounding box center-of-gravity shift when graphic is flipped rabbit.style.transformOrigin = startFromLeft ? '59% 50%' : '50% 50%'; rabbit.style.transform = `translateX(${currentX}vw) ${transformScale}`; @@ -213,8 +214,6 @@ function animateRabbit(rabbit) { if (!startTime) { startTime = timestamp; - // resetting gif, appending a timestamp cache-buster forces the browser - // to reload and start the GIF strictly from the first frame. const currSrc = rabbit.src.split('?')[0]; rabbit.src = currSrc + '?t=' + Date.now(); } @@ -236,7 +235,6 @@ function animateRabbit(rabbit) { currentX = startX + (completedLoops * jumpDistanceVw + currentLoopDistance) * direction; - // Update DOM without CSS transitions rabbit.style.transform = `translateX(${currentX}vw) ${transformScale}`; // Check if finished crossing diff --git a/Jellyfin.Plugin.Seasonals/Web/eurovision.js b/Jellyfin.Plugin.Seasonals/Web/eurovision.js index 6c558a9..c0e487c 100644 --- a/Jellyfin.Plugin.Seasonals/Web/eurovision.js +++ b/Jellyfin.Plugin.Seasonals/Web/eurovision.js @@ -9,7 +9,6 @@ const glowSize = config.EurovisionGlowSize !== undefined ? config.EurovisionGlow let msgPrinted = false; -// Toggle Function function toggleEurovision() { const container = document.querySelector('.eurovision-container'); if (!container) return; diff --git a/Jellyfin.Plugin.Seasonals/Web/halloween.js b/Jellyfin.Plugin.Seasonals/Web/halloween.js index 766fbc1..2fe68f6 100644 --- a/Jellyfin.Plugin.Seasonals/Web/halloween.js +++ b/Jellyfin.Plugin.Seasonals/Web/halloween.js @@ -14,7 +14,7 @@ const images = [ "../Seasonals/Resources/halloween_images/pumpkin_20x20.png", ]; -let msgPrinted = false; // flag to prevent multiple console messages +let msgPrinted = false; // function to check and control the halloween function toggleHalloween() { @@ -42,7 +42,6 @@ function toggleHalloween() { } } -// observe changes in the DOM const observer = new MutationObserver(toggleHalloween); observer.observe(document.body, { childList: true, @@ -52,26 +51,22 @@ observer.observe(document.body, { function addRandomSymbols(count) { - const halloweenContainer = document.querySelector('.halloween-container'); // get the halloween container - if (!halloweenContainer) return; // exit if halloween container is not found + const halloweenContainer = document.querySelector('.halloween-container'); + if (!halloweenContainer) return; console.log('Adding random halloween symbols'); for (let i = 0; i < count; i++) { - // create a new halloween elements const halloweenDiv = document.createElement("div"); halloweenDiv.className = "halloween"; - // pick a random halloween symbol const imageSrc = images[Math.floor(Math.random() * images.length)]; const img = document.createElement("img"); img.src = imageSrc; halloweenDiv.appendChild(img); - - // set random horizontal position, animation delay and size(uncomment lines to enable) const randomLeft = Math.random() * 100; // position (0% to 100%) const randomAnimationDelay = Math.random() * 10; // delay (0s to 10s) const randomAnimationDelay2 = -(Math.random() * 3); // delay (-3s to 0s) @@ -87,13 +82,11 @@ function addRandomSymbols(count) { halloweenDiv.style.animationDuration = `${randomAnimationDuration}s, ${randomAnimationDuration2}s`; } - // add the halloween to the container halloweenContainer.appendChild(halloweenDiv); } console.log('Random halloween symbols added'); } -// create halloween objects function createHalloween() { const container = document.querySelector('.halloween-container') || document.createElement("div"); @@ -235,9 +228,8 @@ function createMouse(container) { container.appendChild(mouse); } -// initialize halloween function initializeHalloween() { - if (!halloween) return; // exit if halloween is disabled + if (!halloween) return; createHalloween(); toggleHalloween(); @@ -262,7 +254,7 @@ function initializeHalloween() { } const screenWidth = window.innerWidth; // get the screen width to detect mobile devices - if (randomSymbols && (screenWidth > 768 || randomSymbolsMobile)) { // add random halloweens only on larger screens, unless enabled for mobile devices + if (randomSymbols && (screenWidth > 768 || randomSymbolsMobile)) { addRandomSymbols(halloweenCount); } } diff --git a/Jellyfin.Plugin.Seasonals/Web/oktoberfest.js b/Jellyfin.Plugin.Seasonals/Web/oktoberfest.js index 99ecb63..c64cd3d 100644 --- a/Jellyfin.Plugin.Seasonals/Web/oktoberfest.js +++ b/Jellyfin.Plugin.Seasonals/Web/oktoberfest.js @@ -31,7 +31,6 @@ function toggleOktoberfest() { } } -// observe changes in the DOM const observer = new MutationObserver(toggleOktoberfest); observer.observe(document.body, { childList: true, diff --git a/Jellyfin.Plugin.Seasonals/Web/snowflakes.js b/Jellyfin.Plugin.Seasonals/Web/snowflakes.js index 14fc473..d18d29c 100644 --- a/Jellyfin.Plugin.Seasonals/Web/snowflakes.js +++ b/Jellyfin.Plugin.Seasonals/Web/snowflakes.js @@ -1,11 +1,11 @@ const config = window.SeasonalsPluginConfig?.Snowflakes || {}; const snowflakes = config.EnableSnowflakes !== undefined ? config.EnableSnowflakes : true; // enable/disable snowflakes +const snowflakeCount = config.SnowflakeCount || 25; // count of random extra snowflakes const randomSnowflakes = config.EnableRandomSnowflakes !== undefined ? config.EnableRandomSnowflakes : true; // enable random Snowflakes const randomSnowflakesMobile = config.EnableRandomSnowflakesMobile !== undefined ? config.EnableRandomSnowflakesMobile : false; // enable random Snowflakes on mobile devices const enableColoredSnowflakes = config.EnableColoredSnowflakes !== undefined ? config.EnableColoredSnowflakes : true; // enable colored snowflakes const enableDiffrentDuration = config.EnableDifferentDuration !== undefined ? config.EnableDifferentDuration : true; // enable different animation duration -const snowflakeCount = config.SnowflakeCount || 25; // count of random extra snowflakes const snowflakeSymbols = ['❅', '❆']; // some snowflake symbols const snowflakeSymbolsMobile = ['❅', '❆', '❄']; // some snowflake symbols mobile version diff --git a/Jellyfin.Plugin.Seasonals/Web/spooky.js b/Jellyfin.Plugin.Seasonals/Web/spooky.js index 47f3cae..2952265 100644 --- a/Jellyfin.Plugin.Seasonals/Web/spooky.js +++ b/Jellyfin.Plugin.Seasonals/Web/spooky.js @@ -7,6 +7,12 @@ const enableSpookySway = config.EnableSpookySway !== undefined ? config.EnableSp const spookySize = config.SpookySize || 20; const spookyGlowSize = config.SpookyGlowSize !== undefined ? config.SpookyGlowSize : 2; +const spookyImages = [ + "../Seasonals/Resources/halloween_images/ghost_20x20.png", + "../Seasonals/Resources/halloween_images/bat_20x20.png", + "../Seasonals/Resources/halloween_images/pumpkin_20x20.png", +]; + let msgPrinted = false; // function to check and control the spooky theme @@ -20,13 +26,13 @@ function toggleSpooky() { const hasUserMenu = document.querySelector('#app-user-menu'); if (videoPlayer || trailerPlayer || isDashboard || hasUserMenu) { - spookyContainer.style.display = 'none'; // hide spooky + spookyContainer.style.display = 'none'; if (!msgPrinted) { console.log('Spooky Theme hidden'); msgPrinted = true; } } else { - spookyContainer.style.display = 'block'; // show spooky + spookyContainer.style.display = 'block'; if (msgPrinted) { console.log('Spooky Theme visible'); msgPrinted = false; @@ -34,7 +40,6 @@ function toggleSpooky() { } } -// observe changes in the DOM const observer = new MutationObserver(toggleSpooky); observer.observe(document.body, { childList: true, @@ -42,13 +47,7 @@ observer.observe(document.body, { attributes: true }); -const spookyImages = [ - "../Seasonals/Resources/halloween_images/ghost_20x20.png", - "../Seasonals/Resources/halloween_images/bat_20x20.png", - "../Seasonals/Resources/halloween_images/pumpkin_20x20.png", -]; -// create spooky objects function createSpooky() { const container = document.querySelector('.spooky-container') || document.createElement("div"); @@ -95,7 +94,6 @@ function createSpooky() { }); } - // Add configured extra symbols for (let i = 0; i < spookyCount; i++) { const spookyOuter = document.createElement("div"); spookyOuter.className = "spooky";