diff --git a/Jellyfin.Plugin.Seasonals/Web/friday13.css b/Jellyfin.Plugin.Seasonals/Web/friday13.css new file mode 100644 index 0000000..8743e25 --- /dev/null +++ b/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; } +} + diff --git a/Jellyfin.Plugin.Seasonals/Web/friday13.js b/Jellyfin.Plugin.Seasonals/Web/friday13.js new file mode 100644 index 0000000..70a8857 --- /dev/null +++ b/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();