From b008221cf4c38dc13d0f458365d1367f4b32eea8 Mon Sep 17 00:00:00 2001
From: CodeDevMLH <145071728+CodeDevMLH@users.noreply.github.com>
Date: Thu, 26 Feb 2026 02:53:42 +0100
Subject: [PATCH] Add Matrix effect: implement matrix animation with toggle
 functionality and responsive canvas

---
 .../Web/{piday.css => matrix.css}             |  2 +-
 .../Web/{piday.js => matrix.js}               | 35 ++++++++++---------
 2 files changed, 19 insertions(+), 18 deletions(-)
 rename Jellyfin.Plugin.Seasonals/Web/{piday.css => matrix.css} (89%)
 rename Jellyfin.Plugin.Seasonals/Web/{piday.js => matrix.js} (82%)

diff --git a/Jellyfin.Plugin.Seasonals/Web/piday.css b/Jellyfin.Plugin.Seasonals/Web/matrix.css
similarity index 89%
rename from Jellyfin.Plugin.Seasonals/Web/piday.css
rename to Jellyfin.Plugin.Seasonals/Web/matrix.css
index 3810f31..db87e07 100644
--- a/Jellyfin.Plugin.Seasonals/Web/piday.css
+++ b/Jellyfin.Plugin.Seasonals/Web/matrix.css
@@ -1,4 +1,4 @@
-.piday-container {
+.matrix-container {
     position: fixed;
     top: 0;
     left: 0;
diff --git a/Jellyfin.Plugin.Seasonals/Web/piday.js b/Jellyfin.Plugin.Seasonals/Web/matrix.js
similarity index 82%
rename from Jellyfin.Plugin.Seasonals/Web/piday.js
rename to Jellyfin.Plugin.Seasonals/Web/matrix.js
index d3e48be..d89b245 100644
--- a/Jellyfin.Plugin.Seasonals/Web/piday.js
+++ b/Jellyfin.Plugin.Seasonals/Web/matrix.js
@@ -1,15 +1,16 @@
-const config = window.SeasonalsPluginConfig?.PiDay || {};
+const config = window.SeasonalsPluginConfig?.Matrix || {};
 
-const enabled = config.EnablePiDay !== undefined ? config.EnablePiDay : true;
+const enabled = config.EnableMatrix !== undefined ? config.EnableMatrix : true;
 const maxTrails = config.SymbolCount || 25; 
-const backgroundMode = config.EnablePiDayBackground !== undefined ? config.EnablePiDayBackground : false;
+const backgroundMode = config.EnableMatrixBackground !== undefined ? config.EnableMatrixBackground : false;
+const matrixChars = config.MatrixChars || '0123456789';
 
 let msgPrinted = false;
 let isHidden = false;
 
 // Toggle Function
-function togglePiDay() {
-  const container = document.querySelector('.piday-container');
+function toggleMatrix() {
+  const container = document.querySelector('.matrix-container');
   if (!container) return;
 
   const videoPlayer = document.querySelector('.videoPlayerContainer');
@@ -22,7 +23,7 @@ function togglePiDay() {
       container.style.display = 'none';
       isHidden = true;
       if (!msgPrinted) {
-        console.log('PiDay hidden');
+        console.log('Matrix hidden');
         msgPrinted = true;
       }
     }
@@ -31,14 +32,14 @@ function togglePiDay() {
       container.style.display = 'block';
       isHidden = false;
       if (msgPrinted) {
-        console.log('PiDay visible');
+        console.log('Matrix visible');
         msgPrinted = false;
       }
     }
   }
 }
 
-const observer = new MutationObserver(togglePiDay);
+const observer = new MutationObserver(toggleMatrix);
 observer.observe(document.body, {
   childList: true,
   subtree: true,
@@ -46,10 +47,10 @@ observer.observe(document.body, {
 });
 
 function createElements() {
-  const container = document.querySelector('.piday-container') || document.createElement('div');
+  const container = document.querySelector('.matrix-container') || document.createElement('div');
 
-  if (!document.querySelector('.piday-container')) {
-    container.className = 'piday-container';
+  if (!document.querySelector('.matrix-container')) {
+    container.className = 'matrix-container';
     container.setAttribute('aria-hidden', 'true');
     if (backgroundMode) container.style.zIndex = '5';
     document.body.appendChild(container);
@@ -63,7 +64,7 @@ function createElements() {
 
   const ctx = canvas.getContext('2d');
 //   const chars = '0123456789πABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
-  const chars = '0123456789'.split('');
+  const chars = matrixChars.split('');
   const fontSize = 18;
 
   class Trail {
@@ -145,8 +146,8 @@ function createElements() {
       }
   }
 
-  if (window.pidayInterval) clearInterval(window.pidayInterval);
-  window.pidayInterval = setInterval(loop, 50);
+  if (window.matrixInterval) clearInterval(window.matrixInterval);
+  window.matrixInterval = setInterval(loop, 50);
 
   window.addEventListener('resize', () => {
       canvas.width = window.innerWidth;
@@ -154,10 +155,10 @@ function createElements() {
   });
 }
 
-function initializePiDay() {
+function initializeMatrix() {
   if (!enabled) return;
   createElements();
-  togglePiDay();
+  toggleMatrix();
 }
 
-initializePiDay();
+initializeMatrix();