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;
top: 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 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();