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

Add Matrix effect: implement matrix animation with toggle functionality and responsive canvas

Browse Source
This commit is contained in:
CodeDevMLH
2026-02-26 02:53:42 +01:00
parent 2bbf13c044
commit b008221cf4
2 changed files with 19 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
Jellyfin.Plugin.Seasonals/Web/piday.css → Jellyfin.Plugin.Seasonals/Web/matrix.css
View File

@@ -1,4 +1,4 @@
.piday-container { .matrix-container {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;

35
Jellyfin.Plugin.Seasonals/Web/piday.js → Jellyfin.Plugin.Seasonals/Web/matrix.js
View File

@@ -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 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 msgPrinted = false;
let isHidden = false; let isHidden = false;
// Toggle Function // Toggle Function
function togglePiDay() { function toggleMatrix() {
const container = document.querySelector('.piday-container'); const container = document.querySelector('.matrix-container');
if (!container) return; if (!container) return;
const videoPlayer = document.querySelector('.videoPlayerContainer'); const videoPlayer = document.querySelector('.videoPlayerContainer');
@@ -22,7 +23,7 @@ function togglePiDay() {
container.style.display = 'none'; container.style.display = 'none';
isHidden = true; isHidden = true;
if (!msgPrinted) { if (!msgPrinted) {
console.log('PiDay hidden'); console.log('Matrix hidden');
msgPrinted = true; msgPrinted = true;
} }
} }
@@ -31,14 +32,14 @@ function togglePiDay() {
container.style.display = 'block'; container.style.display = 'block';
isHidden = false; isHidden = false;
if (msgPrinted) { if (msgPrinted) {
console.log('PiDay visible'); console.log('Matrix visible');
msgPrinted = false; msgPrinted = false;
} }
} }
} }
} }
const observer = new MutationObserver(togglePiDay); const observer = new MutationObserver(toggleMatrix);
observer.observe(document.body, { observer.observe(document.body, {
childList: true, childList: true,
subtree: true, subtree: true,
@@ -46,10 +47,10 @@ observer.observe(document.body, {
}); });
function createElements() { 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')) { if (!document.querySelector('.matrix-container')) {
container.className = 'piday-container'; container.className = 'matrix-container';
container.setAttribute('aria-hidden', 'true'); container.setAttribute('aria-hidden', 'true');
if (backgroundMode) container.style.zIndex = '5'; if (backgroundMode) container.style.zIndex = '5';
document.body.appendChild(container); document.body.appendChild(container);
@@ -63,7 +64,7 @@ function createElements() {
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
// const chars = '0123456789πABCDEFGHIJKLMNOPQRSTUVWXYZ'.split(''); // const chars = '0123456789πABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
const chars = '0123456789'.split(''); const chars = matrixChars.split('');
const fontSize = 18; const fontSize = 18;
class Trail { class Trail {
@@ -145,8 +146,8 @@ function createElements() {
} }
} }
if (window.pidayInterval) clearInterval(window.pidayInterval); if (window.matrixInterval) clearInterval(window.matrixInterval);
window.pidayInterval = setInterval(loop, 50); window.matrixInterval = setInterval(loop, 50);
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
canvas.width = window.innerWidth; canvas.width = window.innerWidth;
@@ -154,10 +155,10 @@ function createElements() {
}); });
} }
function initializePiDay() { function initializeMatrix() {
if (!enabled) return; if (!enabled) return;
createElements(); createElements();
togglePiDay(); toggleMatrix();
} }
initializePiDay(); initializeMatrix();