Add Eid feature: create CSS and JS for Eid symbols and animations

Jellyfin.Plugin.Seasonals/Web/eid.js

@@ -0,0 +1,87 @@
+const config = window.SeasonalsPluginConfig?.Eid || {};
+const eid = config.EnableEid !== undefined ? config.EnableEid : true;
+
+const eidSymbols = ['🌙', '⭐', '✨'];
+
+let msgPrinted = false;
+
+function toggleEid() {
+    const container = document.querySelector('.eid-container');
+    if (!container) return;
+
+    const videoPlayer = document.querySelector('.videoPlayerContainer');
+    const trailerPlayer = document.querySelector('.youtubePlayerContainer');
+    const isDashboard = document.body.classList.contains('dashboardDocument');
+    const hasUserMenu = document.querySelector('#app-user-menu');
+
+    if (videoPlayer || trailerPlayer || isDashboard || hasUserMenu) {
+        container.style.display = 'none';
+        if (!msgPrinted) {
+            console.log('Eid hidden');
+            msgPrinted = true;
+        }
+    } else {
+        container.style.display = 'block';
+        if (msgPrinted) {
+            console.log('Eid visible');
+            msgPrinted = false;
+        }
+    }
+}
+
+const observer = new MutationObserver(toggleEid);
+observer.observe(document.body, {
+  childList: true,
+  subtree: true,
+  attributes: true
+});
+
+
+function createEid(container) {
+    for (let i = 0; i < 25; i++) {
+        const symbol = document.createElement('div');
+        symbol.className = 'eid-symbol';
+        const isLantern = Math.random() > 0.8;
+        
+        if (isLantern) {
+            symbol.classList.add('lantern-rope');
+            symbol.style.left = `${Math.random() * 90 + 5}%`;
+            symbol.style.animationDelay = `${Math.random() * -4}s`;
+            const ropeLen = 15 + Math.random() * 15; // 15vh to 30vh
+            symbol.style.height = `${ropeLen}vh`;
+
+            const lanternSpan = document.createElement('span');
+            lanternSpan.className = 'lantern-emoji';
+            lanternSpan.textContent = '🏮';
+            symbol.appendChild(lanternSpan);
+        } else {
+            symbol.textContent = eidSymbols[Math.floor(Math.random() * eidSymbols.length)];
+            symbol.classList.add('floating-star');
+            symbol.style.left = `${Math.random() * 100}%`;
+            symbol.style.top = `${Math.random() * 100}%`;
+            symbol.style.animationDelay = `${Math.random() * -5}s`;
+        }
+        
+        symbol.addEventListener('animationiteration', () => {
+            if (!isLantern) {
+                symbol.style.left = `${Math.random() * 90 + 5}%`;
+                symbol.style.top = `${Math.random() * 100}%`;
+            }
+        });
+
+        container.appendChild(symbol);
+    }
+}
+
+function initializeEid() {
+    if (!eid) return;
+    const container = document.querySelector('.eid-container') || document.createElement("div");
+    if (!document.querySelector('.eid-container')) {
+        container.className = "eid-container";
+        container.setAttribute("aria-hidden", "true");
+        document.body.appendChild(container);
+    }
+    createEid(container);
+    toggleEid();
+}
+initializeEid();