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

Refactor summer.js to streamline bubble and dust creation, enhance mobile handling, and remove unused randomization options

Browse Source
This commit is contained in:
CodeDevMLH
2026-02-27 23:03:42 +01:00
parent b85c038df0
commit 5ee724201b
1 changed files with 44 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
Jellyfin.Plugin.Seasonals/Web/summer.js
View File

@@ -3,8 +3,7 @@ const config = window.SeasonalsPluginConfig?.Summer || {};
const summer = config.EnableSummer !== undefined ? config.EnableSummer : true; // Enable/disable summer theme
const bubbleCount = config.BubbleCount || 30; // Number of bubbles
const dustCount = config.DustCount || 50; // Number of dust particles
const randomSummer = config.EnableRandomSummer !== undefined ? config.EnableRandomSummer : true; // Enable random generating objects
const randomSummerMobile = config.EnableRandomSummerMobile !== undefined ? config.EnableRandomSummerMobile : false; // Enable random generating objects on mobile
const symbolCountMobile = config.SymbolCountMobile !== undefined ? config.SymbolCountMobile : 2; // Devisor to reduce number of objects on mobile
const enableDifferentDuration = config.EnableDifferentDuration !== undefined ? config.EnableDifferentDuration : true; // Randomize animation duration of bubbles and dust
let msgPrinted = false;
@@ -39,34 +38,23 @@ observer.observe(document.body, {
subtree: true,
attributes: true
});
function createBubble(container, isDust = false) {
function createBubble(container) {
const bubble = document.createElement('div');
if (isDust) {
bubble.classList.add('summer-dust');
} else {
bubble.classList.add('summer-bubble');
}
bubble.classList.add('summer-bubble');
// Random horizontal position
const randomLeft = Math.random() * 100;
bubble.style.left = `${randomLeft}%`;
// Random size
if (!isDust) {
// MARK: BUBBLE SIZE
const size = Math.random() * 20 + 10; // 10-30px bubbles
bubble.style.width = `${size}px`;
bubble.style.height = `${size}px`;
} else {
// MARK: DUST SIZE
const size = Math.random() * 3 + 1; // 1-4px dust
bubble.style.width = `${size}px`;
bubble.style.height = `${size}px`;
}
// MARK: BUBBLE SIZE
const size = Math.random() * 20 + 10; // 10-30px bubbles
bubble.style.width = `${size}px`;
bubble.style.height = `${size}px`;
// Animation properties
const duration = isDust ? (Math.random() * 20 + 10) : (Math.random() * 10 + 5); // Dust is slower
const duration = (Math.random() * 10 + 5);
const delay = Math.random() * 10;
if (enableDifferentDuration) {
@@ -77,19 +65,30 @@ function createBubble(container, isDust = false) {
container.appendChild(bubble);
}
function addRandomSummerObjects() {
const container = document.querySelector('.summer-container');
if (!container) return;
function createDust(container) {
const dust = document.createElement('div');
dust.classList.add('summer-dust');
// Random horizontal position
const randomLeft = Math.random() * 100;
dust.style.left = `${randomLeft}%`;
// MARK: DUST SIZE
const size = Math.random() * 3 + 1; // 1-4px dust
dust.style.width = `${size}px`;
dust.style.height = `${size}px`;
// Animation properties
const duration = (Math.random() * 20 + 10); // Dust is slower
const delay = Math.random() * 10;
// Add bubbles
for (let i = 0; i < bubbleCount; i++) {
createBubble(container, false);
}
// Add some dust particles
for (let i = 0; i < dustCount; i++) {
createBubble(container, true);
if (enableDifferentDuration) {
dust.style.animationDuration = `${duration}s`;
}
dust.style.animationDelay = `${delay}s`;
container.appendChild(dust);
}
function initSummerObjects() {
@@ -101,38 +100,18 @@ function initSummerObjects() {
document.body.appendChild(container);
}
// Initial bubbles/dust
for (let i = 0; i < 10; i++) {
const bubble = document.createElement('div');
const isDust = Math.random() > 0.5;
if (isDust) {
bubble.classList.add('summer-dust');
} else {
bubble.classList.add('summer-bubble');
}
const randomLeft = Math.random() * 100;
bubble.style.left = `${randomLeft}%`;
if (!isDust) {
// MARK: BUBBLE SIZE
const size = Math.random() * 20 + 10;
bubble.style.width = `${size}px`;
bubble.style.height = `${size}px`;
} else {
// MARK: DUST SIZE
const size = Math.random() * 3 + 1;
bubble.style.width = `${size}px`;
bubble.style.height = `${size}px`;
}
const duration = isDust ? (Math.random() * 20 + 10) : (Math.random() * 10 + 5);
if (enableDifferentDuration) {
bubble.style.animationDuration = `${duration}s`;
}
bubble.style.animationDelay = `-${Math.random() * 10}s`;
container.appendChild(bubble);
let isMobile = window.matchMedia("only screen and (max-width: 768px)").matches;
let limitBubbles = isMobile ? Math.floor(bubbleCount / Math.max(1, symbolCountMobile)) : bubbleCount;
let limitDust = isMobile ? Math.floor(dustCount / Math.max(1, symbolCountMobile)) : dustCount;
// Initial bubbles
for (let i = 0; i < limitBubbles; i++) {
createBubble(container);
}
// Initial dust
for (let i = 0; i < limitDust; i++) {
createDust(container);
}
}
@@ -140,11 +119,6 @@ function initializeSummer() {
if (!summer) return;
initSummerObjects();
toggleSummer();
const screenWidth = window.innerWidth;
if (randomSummer && (screenWidth > 768 || randomSummerMobile)) {
addRandomSummerObjects();
}
}
initializeSummer();