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

Adjust Earth Day CSS height and update JavaScript height configuration for consistency

Browse Source
This commit is contained in:
CodeDevMLH
2026-02-24 18:34:26 +01:00
parent 08b2ae987e
commit 26eb40e282
2 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
Jellyfin.Plugin.Seasonals/Web/earthday.css
View File

@@ -3,7 +3,7 @@
bottom: 0; bottom: 0;
left: 0; left: 0;
width: 100vw; width: 100vw;
height: 15vh; height: 8vh;
pointer-events: none; pointer-events: none;
z-index: 1000; z-index: 1000;
overflow: hidden; overflow: hidden;

16
Jellyfin.Plugin.Seasonals/Web/earthday.js
View File

@@ -1,4 +1,3 @@
// 1. Read Configuration
const config = window.SeasonalsPluginConfig?.EarthDay || {}; const config = window.SeasonalsPluginConfig?.EarthDay || {};
const enabled = config.EnableEarthDay !== undefined ? config.EnableEarthDay : true; const enabled = config.EnableEarthDay !== undefined ? config.EnableEarthDay : true;
@@ -6,7 +5,7 @@ const vineCount = config.VineCount || 4;
let msgPrinted = false; let msgPrinted = false;
// 2. Toggle Function // Toggle Function
function toggleEarthDay() { function toggleEarthDay() {
const container = document.querySelector('.earthday-container'); const container = document.querySelector('.earthday-container');
if (!container) return; if (!container) return;
@@ -31,7 +30,6 @@ function toggleEarthDay() {
} }
} }
// 3. MutationObserver
const observer = new MutationObserver(toggleEarthDay); const observer = new MutationObserver(toggleEarthDay);
observer.observe(document.body, { observer.observe(document.body, {
childList: true, childList: true,
@@ -39,7 +37,7 @@ observer.observe(document.body, {
attributes: true attributes: true
}); });
// 4. Element Creation
function createElements() { function createElements() {
const container = document.querySelector('.earthday-container') || document.createElement('div'); const container = document.querySelector('.earthday-container') || document.createElement('div');
@@ -50,7 +48,10 @@ function createElements() {
} }
const w = window.innerWidth; const w = window.innerWidth;
const hSVG = Math.floor(window.innerHeight * 0.15) || 100; // 15vh roughly // MARK: GRASS HEIGHT CONFIGURATION
// To prevent squishing, hSVG calculation MUST match the height in earthday.css exactly
// earthday.css uses 8vh, so here it is 0.08
const hSVG = Math.floor(window.innerHeight * 0.08) || 80;
let paths = ''; let paths = '';
// Generate Grass // Generate Grass
@@ -58,7 +59,7 @@ function createElements() {
const x = Math.random() * w; const x = Math.random() * w;
const h = hSVG * 0.2 + Math.random() * (hSVG * 0.8); const h = hSVG * 0.2 + Math.random() * (hSVG * 0.8);
const cY = hSVG - h; const cY = hSVG - h;
const bend = x + (Math.random() * 40 - 20); const bend = x + (Math.random() * 15 - 7.5); // curvature
const color = Math.random() > 0.5 ? '#2E8B57' : '#3CB371'; const color = Math.random() > 0.5 ? '#2E8B57' : '#3CB371';
const width = 1 + Math.random() * 2; const width = 1 + Math.random() * 2;
paths += `<path d="M ${x} ${hSVG} Q ${bend} ${cY+hSVG*0.2} ${bend} ${cY}" stroke="${color}" stroke-width="${width}" fill="none"/>`; paths += `<path d="M ${x} ${hSVG} Q ${bend} ${cY+hSVG*0.2} ${bend} ${cY}" stroke="${color}" stroke-width="${width}" fill="none"/>`;
@@ -93,7 +94,7 @@ function createElements() {
container.innerHTML = svgContent; container.innerHTML = svgContent;
} }
// 5. Responsive Resize // Responsive Resize
function debounce(func, wait) { function debounce(func, wait) {
let timeout; let timeout;
return function executedFunction(...args) { return function executedFunction(...args) {
@@ -116,7 +117,6 @@ const handleResize = debounce(() => {
window.addEventListener('resize', handleResize); window.addEventListener('resize', handleResize);
// 6. Initialization
function initializeEarthDay() { function initializeEarthDay() {
if (!enabled) return; if (!enabled) return;
createElements(); createElements();