Add Friday the 13th feature: implement CSS and JS for themed animations and visibility toggle

Jellyfin.Plugin.Seasonals/Web/friday13.css

@@ -0,0 +1,35 @@
+.friday13-container {
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 10000;
+    contain: strict;
+    overflow: hidden;
+}
+
+.friday13-cat {
+    position: absolute;
+    width: 100px;
+    height: auto;
+    user-select: none;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+    opacity: 0;
+}
+
+@keyframes cat-walk-right {
+    0% { left: -10vw; transform: scaleX(1); opacity: 1; }
+    99% { left: 110vw; transform: scaleX(1); opacity: 1; }
+    100% { opacity: 0; }
+}
+
+@keyframes cat-walk-left {
+    0% { left: 110vw; transform: scaleX(-1); opacity: 1; }
+    99% { left: -10vw; transform: scaleX(-1); opacity: 1; }
+    100% { opacity: 0; }
+}
+

Jellyfin.Plugin.Seasonals/Web/friday13.js

@@ -0,0 +1,66 @@
+const config = window.SeasonalsPluginConfig?.Friday13 || {};
+const friday13 = config.EnableFriday13 !== undefined ? config.EnableFriday13 : true;
+
+let msgPrinted = false;
+
+function toggleFriday13() {
+    const container = document.querySelector('.friday13-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('Friday13 hidden');
+            msgPrinted = true;
+        }
+    } else {
+        container.style.display = 'block';
+        if (msgPrinted) {
+            console.log('Friday13 visible');
+            msgPrinted = false;
+        }
+    }
+}
+
+const observer = new MutationObserver(toggleFriday13);
+observer.observe(document.body, {
+  childList: true,
+  subtree: true,
+  attributes: true
+});
+
+function createFriday13(container) {
+    // Add walking black cat
+    const numCats = 1;
+    for (let i = 0; i < numCats; i++) {
+        const cat = document.createElement('img');
+        cat.className = 'friday13-cat';
+        cat.src = '../Seasonals/Resources/friday_assets/black-cat.gif';
+        cat.style.animationDelay = `${Math.random() * 5}s`;
+        cat.style.bottom = `5px`; // Walk along the very bottom edge
+        
+        // Either walk left to right or right to left
+        const dir = Math.random() > 0.5 ? 'right' : 'left';
+        cat.style.animationName = `cat-walk-${dir}`;
+        cat.style.animationDuration = `18s`;
+        container.appendChild(cat);
+    }
+}
+
+function initializeFriday13() {
+    if (!friday13) return;
+    const container = document.querySelector('.friday13-container') || document.createElement("div");
+    if (!document.querySelector('.friday13-container')) {
+        container.className = "friday13-container";
+        container.setAttribute("aria-hidden", "true");
+        document.body.appendChild(container);
+    }
+    createFriday13(container);
+    toggleFriday13();
+}
+initializeFriday13();