Compare commits
23 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
36347cc4b0 | ||
|
|
7f94164e55 | ||
|
|
cbab7de546 | ||
|
|
d0de5cd021 | ||
|
|
16628e9902 | ||
|
|
72bfe0a14a | ||
|
|
6498ec4216 | ||
|
|
0d350fc76b | ||
|
|
2c6e4ce610 | ||
|
|
0c552774dc | ||
|
|
9ab605bb74 | ||
|
|
3d6cba0fe4 | ||
|
|
32e5e2b690 | ||
|
|
c967c1e308 | ||
|
|
ae28d5219b | ||
|
|
e4228f889e | ||
|
|
6d721c755e | ||
|
|
6948953778 | ||
|
|
8a50cef330 | ||
|
|
a0bf5370bd | ||
|
|
c5800b431d | ||
|
|
9a4056651d | ||
|
|
87382db78e |
@@ -18,7 +18,7 @@
|
||||
<a is="emby-linkbutton" class="raised raised-mini emby-button" style="margin-left: 2em;"
|
||||
target="_blank" href="https://github.com/CodeDevMLH/Jellyfin-Seasonals">
|
||||
<i class="md-icon button-icon button-icon-left secondaryText"></i>
|
||||
<span>Help</span>
|
||||
<span>${Help}</span>
|
||||
</a>
|
||||
</div>
|
||||
<hr style="max-width: 800px; margin: 1em 0;">
|
||||
@@ -40,7 +40,7 @@
|
||||
</div>
|
||||
<div class="selectContainer">
|
||||
<label class="selectLabel" for="SelectedSeason">Selected Season</label>
|
||||
<select id="SelectedSeason" name="SelectedSeason" class="emby-select">
|
||||
<select id="SelectedSeason" name="SelectedSeason" class="emby-select" style="width: 100%; padding: 0.5em; background-color: #333; border: 1px solid #444; color: #fff; border-radius: 4px;">
|
||||
<option value="none">None</option>
|
||||
<option value="snowflakes">Snowflakes</option>
|
||||
<option value="snowfall">Snowfall</option>
|
||||
@@ -52,14 +52,14 @@
|
||||
<option value="santa">Santa</option>
|
||||
<option value="autumn">Autumn</option>
|
||||
<option value="easter">Easter</option>
|
||||
<option value="summer" disabled>Summer (not implemented yet, no idea for a theme. Please commit ideas in a issue)</option>
|
||||
<option value="spring" disabled>Spring (not implemented yet, no idea for a theme. Please commit ideas in a issue)</option>
|
||||
<option value="oktoberfest" disabled>Oktoberfest (not implemented yet, no idea for a theme. Please commit ideas in a issue)</option>
|
||||
<option value="carnival" disabled>Carnival (not implemented yet, no idea for a theme. Please commit ideas in a issue)</option>
|
||||
<option value="championships" disabled>European/World Championships (not implemented yet, no idea for a theme. Please commit ideas in a issue)</option>
|
||||
<option value="patrick" disabled>St. Patrick's Day (not implemented yet, no idea for a theme. Please commit ideas in a issue)</option>
|
||||
<option value="thanksgiving" disabled>Thanksgiving (not implemented yet, no idea for a theme. Please commit ideas in a issue)</option>
|
||||
<option value="pride" disabled>Pride (not implemented yet, no idea for a theme. Please commit ideas in a issue)</option>
|
||||
<option value="summer" disabled>Summer (not implemented yet. Please commit ideas in a issue or PR)</option>
|
||||
<option value="spring" disabled>Spring (not implemented yet. Please commit ideas in a issue or PR)</option>
|
||||
<option value="oktoberfest" disabled>Oktoberfest (not implemented yet. Please commit ideas in a issue or PR)</option>
|
||||
<option value="carnival" disabled>Carnival (not implemented yet. Please commit ideas in a issue or PR)</option>
|
||||
<option value="championships" disabled>European/World Championships (not implemented yet. Please commit ideas in a issue or PR)</option>
|
||||
<option value="patrick" disabled>St. Patrick's Day (not implemented yet. Please commit ideas in a issue or PR)</option>
|
||||
<option value="thanksgiving" disabled>Thanksgiving (not implemented yet. Please commit ideas in a issue or PR)</option>
|
||||
<option value="pride" disabled>Pride (not implemented yet. Please commit ideas in a issue or PR)</option>
|
||||
</select>
|
||||
<div class="fieldDescription">The season to display if automation is disabled.</div>
|
||||
</div>
|
||||
@@ -69,8 +69,7 @@
|
||||
is="emby-checkbox" />
|
||||
<span>Allow Client-Side Toggle</span>
|
||||
</label>
|
||||
<div class="fieldDescription">If enabled, users will see a settings icon in the header to toggle
|
||||
animations for their browser.</div>
|
||||
<div class="fieldDescription">If enabled, users will see a seasonals icon in the header to toggle seasonals for their browser (device-specific).</div>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
<!-- <TreatWarningsAsErrors>false</TreatWarningsAsErrors> -->
|
||||
<Title>Jellyfin Seasonals Plugin</Title>
|
||||
<Authors>CodeDevMLH</Authors>
|
||||
<Version>1.6.10.0</Version>
|
||||
<Version>1.6.13.1</Version>
|
||||
<RepositoryUrl>https://github.com/CodeDevMLH/Jellyfin-Seasonals</RepositoryUrl>
|
||||
</PropertyGroup>
|
||||
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
// theme-configs.js
|
||||
/**
|
||||
* Seasonals Plugin (Client Side Manager Logic)
|
||||
*/
|
||||
|
||||
// theme configurations
|
||||
const themeConfigs = {
|
||||
const ThemeConfigs = {
|
||||
snowflakes: {
|
||||
css: '/Seasonals/Resources/snowflakes.css',
|
||||
js: '/Seasonals/Resources/snowflakes.js',
|
||||
@@ -67,227 +68,100 @@ const themeConfigs = {
|
||||
},
|
||||
};
|
||||
|
||||
// determine current theme based on the current month
|
||||
function determineCurrentTheme() {
|
||||
const date = new Date();
|
||||
const month = date.getMonth(); // 0-11
|
||||
const day = date.getDate(); // 1-31
|
||||
const SettingsManager = {
|
||||
initialized: false,
|
||||
config: null,
|
||||
|
||||
if ((month === 11 && day >= 28) || (month === 0 && day <= 5)) return 'fireworks'; //new year fireworks december 28 - january 5
|
||||
init(config) {
|
||||
if (this.initialized) return;
|
||||
this.config = config;
|
||||
|
||||
if (month === 1 && day >= 10 && day <= 18) return 'hearts'; // valentine's day february 10 - 18
|
||||
|
||||
if (month === 11 && day >= 22 && day <= 27) return 'santa'; // christmas december 22 - 27
|
||||
// if (month === 11 && day >= 22 && day <= 27) return 'christmas'; // christmas december 22 - 27
|
||||
|
||||
if (month === 11) return 'snowflakes'; // snowflakes december
|
||||
if (month === 0 || month === 1) return 'snowfall'; // snow january, february
|
||||
// if (month === 0 || month === 1) return 'snowstorm'; // snow january, february
|
||||
|
||||
if ((month === 2 && day >= 25) || (month === 3 && day <= 25)) return 'easter'; // easter march 25 - april 25
|
||||
|
||||
//NOT IMPLEMENTED YET
|
||||
//if (month >= 2 && month <= 4) return 'spring'; // spring march, april, may
|
||||
|
||||
//NOT IMPLEMENTED YET
|
||||
//if (month >= 5 && month <= 7) return 'summer'; // summer june, july, august
|
||||
|
||||
if ((month === 9 && day >= 24) || (month === 10 && day <= 5)) return 'halloween'; // halloween october 24 - november 5
|
||||
|
||||
if (month >= 8 && month <= 10) return 'autumn'; // autumn september, october, november
|
||||
|
||||
return 'none'; // Fallback (nothing)
|
||||
}
|
||||
|
||||
// helper to resolve paths for local testing vs production
|
||||
function resolvePath(path) {
|
||||
if (window.location.protocol === 'file:' || window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
|
||||
return path.replace('/Seasonals/Resources/', './');
|
||||
}
|
||||
return path;
|
||||
}
|
||||
|
||||
// load theme csss
|
||||
function loadThemeCSS(cssPath) {
|
||||
if (!cssPath) return;
|
||||
|
||||
const link = document.createElement('link');
|
||||
link.rel = 'stylesheet';
|
||||
// link.href = resolvePath(cssPath);
|
||||
link.href = cssPath;
|
||||
|
||||
link.onerror = () => {
|
||||
console.error(`Failed to load CSS: ${cssPath}`);
|
||||
};
|
||||
|
||||
document.body.appendChild(link);
|
||||
console.log(`CSS file "${cssPath}" loaded.`);
|
||||
}
|
||||
|
||||
// load theme js
|
||||
function loadThemeJS(jsPath) {
|
||||
if (!jsPath) return;
|
||||
|
||||
const script = document.createElement('script');
|
||||
script.src = jsPath;
|
||||
// script.src = resolvePath(jsPath);
|
||||
script.defer = true;
|
||||
|
||||
script.onerror = () => {
|
||||
console.error(`Failed to load JS: ${jsPath}`);
|
||||
};
|
||||
|
||||
document.body.appendChild(script);
|
||||
console.log(`JS file "${jsPath}" loaded.`);
|
||||
}
|
||||
|
||||
// update theme container class name
|
||||
function updateThemeContainer(containerClass) {
|
||||
// Create container if it doesn't exist
|
||||
let container = document.querySelector('.seasonals-container');
|
||||
if (!container) {
|
||||
container = document.createElement('div');
|
||||
container.className = 'seasonals-container';
|
||||
document.body.appendChild(container);
|
||||
}
|
||||
|
||||
container.className = `seasonals-container ${containerClass}`;
|
||||
console.log(`Seasonals-Container class updated to "${containerClass}".`);
|
||||
}
|
||||
|
||||
// function removeSelf() {
|
||||
// const script = document.currentScript;
|
||||
// if (script) script.parentNode.removeChild(script);
|
||||
// console.log('External script removed:', script);
|
||||
// }
|
||||
|
||||
// initialize theme
|
||||
async function initializeTheme() {
|
||||
|
||||
// Check local user preference
|
||||
const isEnabled = getSavedSetting('seasonals-enabled', 'true') === 'true';
|
||||
if (!isEnabled) {
|
||||
console.log('Seasonals disabled by user preference.');
|
||||
return;
|
||||
}
|
||||
|
||||
const forcedTheme = getSavedSetting('seasonals-theme', 'auto');
|
||||
|
||||
let automateThemeSelection = true;
|
||||
let defaultTheme = 'none';
|
||||
|
||||
try {
|
||||
const response = await fetch('/Seasonals/Config');
|
||||
if (response.ok) {
|
||||
const config = await response.json();
|
||||
automateThemeSelection = config.AutomateSeasonSelection;
|
||||
defaultTheme = config.SelectedSeason;
|
||||
window.SeasonalsPluginConfig = config;
|
||||
console.log('Seasonals Config loaded:', config);
|
||||
} else {
|
||||
console.error('Failed to fetch Seasonals config');
|
||||
// Only inject settings if enabled on server by admin
|
||||
if (this.config && this.config.EnableClientSideToggle !== false) {
|
||||
this.injectSettingsIcon();
|
||||
this.initialized = true;
|
||||
console.log("Seasonals: Client-Side Settings Manager initialized.");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching Seasonals config:', error);
|
||||
}
|
||||
},
|
||||
|
||||
let currentTheme;
|
||||
getSetting(key, defaultValue) {
|
||||
const value = localStorage.getItem(`seasonals-${key}`);
|
||||
return value !== null ? value : defaultValue;
|
||||
},
|
||||
|
||||
if (forcedTheme !== 'auto') {
|
||||
currentTheme = forcedTheme;
|
||||
console.log(`User forced theme: ${currentTheme}`);
|
||||
} else if (automateThemeSelection === false) {
|
||||
currentTheme = defaultTheme;
|
||||
} else {
|
||||
currentTheme = determineCurrentTheme();
|
||||
}
|
||||
setSetting(key, value) {
|
||||
localStorage.setItem(`seasonals-${key}`, value);
|
||||
},
|
||||
|
||||
console.log(`Selected theme: ${currentTheme}`);
|
||||
createIcon() {
|
||||
const button = document.createElement('button');
|
||||
button.type = 'button';
|
||||
button.className = 'paper-icon-button-light headerButton seasonal-settings-button';
|
||||
button.title = 'Seasonal Settings';
|
||||
// button.innerHTML = '<span class="material-icons">ac_unit</span>';
|
||||
// button.innerHTML = '<img src="/Seasonals/Resources/assets/logo_SW.svg" style="width: 52px; height: 24px; vertical-align: middle;">';
|
||||
button.innerHTML = '<img src="/Seasonals/Resources/assets/logo_SW.svg" style="width: 24px; height: 24px; vertical-align: middle;">';
|
||||
button.style.verticalAlign = 'middle';
|
||||
|
||||
if (!currentTheme || currentTheme === 'none') {
|
||||
console.log('No theme selected.');
|
||||
return;
|
||||
}
|
||||
button.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
this.toggleSettingsPopup(button);
|
||||
});
|
||||
|
||||
const theme = themeConfigs[currentTheme];
|
||||
return button;
|
||||
},
|
||||
|
||||
if (!theme) {
|
||||
console.error(`Theme "${currentTheme}" not found.`);
|
||||
return;
|
||||
}
|
||||
updateThemeContainer(theme.containerClass);
|
||||
injectSettingsIcon() {
|
||||
const observer = new MutationObserver((mutations, obs) => {
|
||||
const headerRight = document.querySelector('.headerRight');
|
||||
if (headerRight && !document.querySelector('.seasonal-settings-button')) {
|
||||
const icon = this.createIcon();
|
||||
headerRight.prepend(icon);
|
||||
}
|
||||
});
|
||||
|
||||
if (theme.css) loadThemeCSS(theme.css);
|
||||
if (theme.js) loadThemeJS(theme.js);
|
||||
observer.observe(document.body, {
|
||||
childList: true,
|
||||
subtree: true
|
||||
});
|
||||
},
|
||||
|
||||
console.log(`Theme "${currentTheme}" loaded.`);
|
||||
}
|
||||
createPopup(anchorElement) {
|
||||
const existing = document.querySelector('.seasonal-settings-popup');
|
||||
if (existing) existing.remove();
|
||||
|
||||
const popup = document.createElement('div');
|
||||
popup.className = 'seasonal-settings-popup dialog';
|
||||
|
||||
initializeTheme();
|
||||
Object.assign(popup.style, {
|
||||
position: 'fixed',
|
||||
zIndex: '10000',
|
||||
backgroundColor: '#202020',
|
||||
padding: '1em',
|
||||
borderRadius: '0.3em',
|
||||
boxShadow: '0 0 20px rgba(0,0,0,0.5)',
|
||||
minWidth: '200px',
|
||||
color: '#fff',
|
||||
maxWidth: '250px'
|
||||
});
|
||||
|
||||
const rect = anchorElement.getBoundingClientRect();
|
||||
|
||||
// User UI Seasonal Settings
|
||||
// Positioning logic
|
||||
let rightPos = window.innerWidth - rect.right;
|
||||
if (window.innerWidth < 450 || (window.innerWidth - rightPos) < 260) {
|
||||
popup.style.right = '1rem';
|
||||
popup.style.left = 'auto';
|
||||
} else {
|
||||
popup.style.right = `${rightPos}px`;
|
||||
popup.style.left = 'auto';
|
||||
}
|
||||
popup.style.top = `${rect.bottom + 10}px`;
|
||||
|
||||
function getSavedSetting(key, defaultValue) {
|
||||
const value = localStorage.getItem(key);
|
||||
return value !== null ? value : defaultValue;
|
||||
}
|
||||
// Popup HTML
|
||||
let html = `
|
||||
<h3 style="margin-top:0; margin-bottom:1em; border-bottom:1px solid #444; padding-bottom:0.5em;">Seasonal Settings</h3>
|
||||
|
||||
function setSavedSetting(key, value) {
|
||||
localStorage.setItem(key, value);
|
||||
}
|
||||
|
||||
function createSettingsIcon() {
|
||||
const button = document.createElement('button');
|
||||
button.type = 'button';
|
||||
button.className = 'paper-icon-button-light headerButton seasonal-settings-button';
|
||||
button.title = 'Seasonal Settings';
|
||||
// button.innerHTML = '<span class="material-icons">ac_unit</span>';
|
||||
button.innerHTML = '<img src="/Seasonals/Resources/assets/logo_SW.svg" style="width: 24px; height: 24px; vertical-align: middle;">';
|
||||
button.style.verticalAlign = 'middle';
|
||||
|
||||
button.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
toggleSettingsPopup(button);
|
||||
});
|
||||
|
||||
return button;
|
||||
}
|
||||
|
||||
function createSettingsPopup(anchorElement) {
|
||||
const existing = document.querySelector('.seasonal-settings-popup');
|
||||
if (existing) existing.remove();
|
||||
|
||||
const popup = document.createElement('div');
|
||||
popup.className = 'seasonal-settings-popup dialog';
|
||||
|
||||
Object.assign(popup.style, {
|
||||
position: 'fixed',
|
||||
zIndex: '10000',
|
||||
backgroundColor: '#202020',
|
||||
padding: '1em',
|
||||
borderRadius: '0.3em',
|
||||
boxShadow: '0 0 20px rgba(0,0,0,0.5)',
|
||||
minWidth: '200px',
|
||||
color: '#fff',
|
||||
maxWidth: '250px'
|
||||
});
|
||||
|
||||
const rect = anchorElement.getBoundingClientRect();
|
||||
|
||||
let rightPos = window.innerWidth - rect.right;
|
||||
if (window.innerWidth < 450 || (window.innerWidth - rightPos) < 260) {
|
||||
popup.style.right = '1rem';
|
||||
popup.style.left = 'auto';
|
||||
} else {
|
||||
popup.style.right = `${rightPos}px`;
|
||||
popup.style.left = 'auto';
|
||||
}
|
||||
|
||||
popup.style.top = `${rect.bottom + 10}px`;
|
||||
|
||||
popup.innerHTML = `
|
||||
<div class="checkboxContainer checkboxContainer-withDescription" style="margin-bottom: 0.5em;">
|
||||
<label class="emby-checkbox-label">
|
||||
<input id="seasonal-enable-toggle" type="checkbox" is="emby-checkbox" class="emby-checkbox" />
|
||||
@@ -298,77 +172,200 @@ function createSettingsPopup(anchorElement) {
|
||||
<div class="selectContainer" style="margin-bottom: 0.5em;">
|
||||
<label class="selectLabel" for="seasonal-theme-select" style="margin-bottom: 0.5em; display: block; color: inherit;">Force Theme</label>
|
||||
<select id="seasonal-theme-select" class="emby-select" style="width: 100%; padding: 0.5em; background-color: #333; border: 1px solid #444; color: #fff; border-radius: 4px;">
|
||||
<option value="auto">Auto (Date Based)</option>
|
||||
<option value="auto">Server-Side</option>
|
||||
</select>
|
||||
</div>
|
||||
`;
|
||||
`;
|
||||
|
||||
// Populate Select Options
|
||||
const themeSelect = popup.querySelector('#seasonal-theme-select');
|
||||
Object.keys(themeConfigs).forEach(key => {
|
||||
if (key === 'none') return;
|
||||
const option = document.createElement('option');
|
||||
option.value = key;
|
||||
// Capitalize first letter
|
||||
option.textContent = key.charAt(0).toUpperCase() + key.slice(1);
|
||||
themeSelect.appendChild(option);
|
||||
});
|
||||
popup.innerHTML = html;
|
||||
|
||||
// Set Initial Values
|
||||
const enabledCheckbox = popup.querySelector('#seasonal-enable-toggle');
|
||||
enabledCheckbox.checked = getSavedSetting('seasonals-enabled', 'true') === 'true';
|
||||
// Populate Select Options
|
||||
const themeSelect = popup.querySelector('#seasonal-theme-select');
|
||||
Object.keys(ThemeConfigs).forEach(key => {
|
||||
if (key === 'none') return;
|
||||
const option = document.createElement('option');
|
||||
option.value = key;
|
||||
option.textContent = key.charAt(0).toUpperCase() + key.slice(1);
|
||||
themeSelect.appendChild(option);
|
||||
});
|
||||
|
||||
themeSelect.value = getSavedSetting('seasonals-theme', 'auto');
|
||||
// Set Initial Values
|
||||
const enabledCheckbox = popup.querySelector('#seasonal-enable-toggle');
|
||||
enabledCheckbox.checked = this.getSetting('enabled', 'true') === 'true';
|
||||
themeSelect.value = this.getSetting('theme', 'auto');
|
||||
|
||||
enabledCheckbox.addEventListener('change', (e) => {
|
||||
setSavedSetting('seasonals-enabled', e.target.checked);
|
||||
location.reload();
|
||||
});
|
||||
// Event Listeners
|
||||
enabledCheckbox.addEventListener('change', (e) => {
|
||||
this.setSetting('enabled', e.target.checked);
|
||||
location.reload();
|
||||
});
|
||||
|
||||
themeSelect.addEventListener('change', (e) => {
|
||||
setSavedSetting('seasonals-theme', e.target.value);
|
||||
location.reload();
|
||||
});
|
||||
themeSelect.addEventListener('change', (e) => {
|
||||
this.setSetting('theme', e.target.value);
|
||||
location.reload();
|
||||
});
|
||||
|
||||
const closeHandler = (e) => {
|
||||
if (!popup.contains(e.target) && e.target !== anchorElement && !anchorElement.contains(e.target)) {
|
||||
popup.remove();
|
||||
document.removeEventListener('click', closeHandler);
|
||||
// Close on outside click
|
||||
const closeHandler = (e) => {
|
||||
if (!popup.contains(e.target) && e.target !== anchorElement && !anchorElement.contains(e.target)) {
|
||||
popup.remove();
|
||||
document.removeEventListener('click', closeHandler);
|
||||
}
|
||||
};
|
||||
setTimeout(() => document.addEventListener('click', closeHandler), 0);
|
||||
|
||||
document.body.appendChild(popup);
|
||||
},
|
||||
|
||||
toggleSettingsPopup(anchorElement) {
|
||||
const existing = document.querySelector('.seasonal-settings-popup');
|
||||
if (existing) {
|
||||
existing.remove();
|
||||
} else {
|
||||
this.createPopup(anchorElement);
|
||||
}
|
||||
};
|
||||
setTimeout(() => document.addEventListener('click', closeHandler), 0);
|
||||
|
||||
document.body.appendChild(popup);
|
||||
}
|
||||
|
||||
function toggleSettingsPopup(anchorElement) {
|
||||
const existing = document.querySelector('.seasonal-settings-popup');
|
||||
if (existing) {
|
||||
existing.remove();
|
||||
} else {
|
||||
createSettingsPopup(anchorElement);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function injectSettingsIcon() {
|
||||
const observer = new MutationObserver((mutations, obs) => {
|
||||
// Check if admin has enabled this feature
|
||||
if (window.SeasonalsPluginConfig && window.SeasonalsPluginConfig.EnableClientSideToggle === false) {
|
||||
const SeasonalsManager = {
|
||||
config: null,
|
||||
|
||||
async init() {
|
||||
// Fetch Config
|
||||
try {
|
||||
const response = await fetch('/Seasonals/Config');
|
||||
if (response.ok) {
|
||||
this.config = await response.json();
|
||||
window.SeasonalsPluginConfig = this.config;
|
||||
console.log('Seasonals Config loaded:', this.config);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching Seasonals config:', error);
|
||||
}
|
||||
|
||||
// Initialize Settings UI
|
||||
SettingsManager.init(this.config);
|
||||
|
||||
// User Preference Check
|
||||
const isEnabled = SettingsManager.getSetting('enabled', 'true') === 'true';
|
||||
if (!isEnabled) {
|
||||
console.log('Seasonals disabled by user preference.');
|
||||
return;
|
||||
}
|
||||
|
||||
const headerRight = document.querySelector('.headerRight');
|
||||
if (headerRight && !document.querySelector('.seasonal-settings-button')) {
|
||||
const icon = createSettingsIcon();
|
||||
headerRight.prepend(icon);
|
||||
// obs.disconnect();
|
||||
// Determine Theme
|
||||
const themeName = this.selectTheme();
|
||||
console.log(`Selected theme: ${themeName}`);
|
||||
|
||||
if (!themeName || themeName === 'none') {
|
||||
return;
|
||||
}
|
||||
});
|
||||
|
||||
observer.observe(document.body, {
|
||||
childList: true,
|
||||
subtree: true
|
||||
});
|
||||
}
|
||||
// Apply Theme
|
||||
this.applyTheme(themeName);
|
||||
},
|
||||
|
||||
injectSettingsIcon();
|
||||
selectTheme() {
|
||||
// Check local override
|
||||
const forcedTheme = SettingsManager.getSetting('theme', 'auto');
|
||||
if (forcedTheme !== 'auto') {
|
||||
console.log(`User forced theme: ${forcedTheme}`);
|
||||
return forcedTheme;
|
||||
}
|
||||
|
||||
const automate = this.config ? this.config.AutomateSeasonSelection : true;
|
||||
const defaultTheme = this.config ? this.config.SelectedSeason : 'none';
|
||||
|
||||
if (!automate) {
|
||||
return defaultTheme;
|
||||
}
|
||||
|
||||
return this.determineCurrentThemeDate();
|
||||
},
|
||||
|
||||
determineCurrentThemeDate() {
|
||||
const date = new Date();
|
||||
const month = date.getMonth(); // 0-11
|
||||
const day = date.getDate(); // 1-31
|
||||
|
||||
if ((month === 11 && day >= 28) || (month === 0 && day <= 5)) return 'fireworks'; //new year fireworks december 28 - january 5
|
||||
|
||||
if (month === 1 && day >= 10 && day <= 18) return 'hearts'; // valentine's day february 10 - 18
|
||||
|
||||
if (month === 11 && day >= 22 && day <= 27) return 'santa'; // santa december 22 - 27
|
||||
// if (month === 11 && day >= 22 && day <= 27) return 'christmas'; // christmas december 22 - 27
|
||||
|
||||
if (month === 11) return 'snowflakes'; // snowflakes december
|
||||
if (month === 0 || month === 1) return 'snowfall'; // snow january, february
|
||||
// if (month === 0 || month === 1) return 'snowstorm'; // snow january, february
|
||||
|
||||
if ((month === 2 && day >= 25) || (month === 3 && day <= 25)) return 'easter'; // easter march 25 - april 25
|
||||
|
||||
//NOT IMPLEMENTED YET
|
||||
//if (month >= 2 && month <= 4) return 'spring'; // spring march, april, may
|
||||
|
||||
//NOT IMPLEMENTED YET
|
||||
//if (month >= 5 && month <= 7) return 'summer'; // summer june, july, august
|
||||
|
||||
if ((month === 9 && day >= 24) || (month === 10 && day <= 5)) return 'halloween'; // halloween october 24 - november 5
|
||||
|
||||
if (month >= 8 && month <= 10) return 'autumn'; // autumn september, october, november
|
||||
|
||||
return 'none'; // Fallback (no theme)
|
||||
},
|
||||
|
||||
applyTheme(themeName) {
|
||||
const theme = ThemeConfigs[themeName];
|
||||
if (!theme) {
|
||||
console.error(`Theme "${themeName}" not found.`);
|
||||
return;
|
||||
}
|
||||
|
||||
this.updateThemeContainer(theme.containerClass);
|
||||
|
||||
if (theme.css) this.loadResource('css', theme.css);
|
||||
if (theme.js) this.loadResource('js', theme.js);
|
||||
|
||||
console.log(`Theme "${themeName}" applied.`);
|
||||
},
|
||||
|
||||
updateThemeContainer(containerClass) {
|
||||
let container = document.querySelector('.seasonals-container');
|
||||
if (!container) {
|
||||
container = document.createElement('div');
|
||||
container.className = 'seasonals-container';
|
||||
document.body.appendChild(container);
|
||||
}
|
||||
container.className = `seasonals-container ${containerClass}`;
|
||||
},
|
||||
|
||||
// helper to resolve paths for local testing vs production
|
||||
resolvePath(path) {
|
||||
if (window.location.protocol === 'file:' || window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
|
||||
return path.replace('/Seasonals/Resources/', './');
|
||||
}
|
||||
return path;
|
||||
},
|
||||
|
||||
loadResource(type, path) {
|
||||
if (!path) return;
|
||||
|
||||
if (type === 'css') {
|
||||
const link = document.createElement('link');
|
||||
link.rel = 'stylesheet';
|
||||
link.href = path;
|
||||
// link.href = resolvePath(cssPath);
|
||||
link.onerror = () => console.error(`Failed to load CSS: ${path}`);
|
||||
document.body.appendChild(link);
|
||||
} else if (type === 'js') {
|
||||
const script = document.createElement('script');
|
||||
script.src = path;
|
||||
// script.src = resolvePath(jsPath);
|
||||
script.defer = true;
|
||||
script.onerror = () => console.error(`Failed to load JS: ${path}`);
|
||||
document.body.appendChild(script);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
SeasonalsManager.init();
|
||||
|
||||
188
README.md
188
README.md
@@ -13,20 +13,17 @@ This plugin is based on my manual mod (see the [legacy branch](https://github.co
|
||||
- [Table of Contents](#table-of-contents)
|
||||
- [Features](#features)
|
||||
- [Overview](#overview)
|
||||
- [Ideas for additional seasonals](#ideas-for-additional-seasonals)
|
||||
- [Installation](#installation)
|
||||
- [Client Compatibility](#client-compatibility)
|
||||
- [Configuration](#configuration)
|
||||
- [Automatic Theme Selection](#automatic-theme-selection)
|
||||
- [Theme Settings](#theme-settings)
|
||||
- [Build The Plugin By Yourself](#build-the-plugin-by-yourself)
|
||||
- [Build the plugin by yourself](#build-the-plugin-by-yourself)
|
||||
- [Troubleshooting](#troubleshooting)
|
||||
- [Effects Not Showing](#effects-not-showing)
|
||||
- [Docker Permission Issues](#docker-permission-issues)
|
||||
- [Contributing](#contributing)
|
||||
- [Legacy Manual Installation](#legacy-manual-installation)
|
||||
- [Installation](#installation-1)
|
||||
- [Usage](#usage)
|
||||
- [Additional Directory: Separate Single Seasonals](#additional-directory-separate-single-seasonals)
|
||||
|
||||
---
|
||||
|
||||
@@ -34,39 +31,83 @@ This plugin is based on my manual mod (see the [legacy branch](https://github.co
|
||||
|
||||
- **Automatic Theme Selection**: Dynamically updates the theme based on the date (e.g., snowflakes in December, fireworks for new year's eve).
|
||||
- **Easy Integration**: No manual file editing required. The plugin injects everything automatically.
|
||||
- **Configuration UI**: Configure settings directly in the Jellyfin Dashboard (very basic for now, needs some work in the future).
|
||||
- **Configuration UI**: Configure settings directly in the Jellyfin Dashboard.
|
||||
<details>
|
||||
<summary>Have a look:</summary>
|
||||
<img width="852" height="782" alt="Admin-Settings" src="https://github.com/user-attachments/assets/03d04ea8-7dd9-418e-88f8-9ae2937c06bb" />
|
||||
</details>
|
||||
- **User Toggle**: Optionally allow users to enable/disable seasonal effects from their client.
|
||||
<details>
|
||||
<summary>Have a look:</summary>
|
||||
<img width="467" height="263" alt="Client-Settings" src="https://github.com/user-attachments/assets/a8dfc90a-16c8-409c-9133-4139f6527b0b" />
|
||||
</details>
|
||||
|
||||
## Overview
|
||||
Click on the following themes to expand them and see the theme in action:
|
||||
|
||||
<details>
|
||||
<summary>Easter</summary>
|
||||
|
||||
**Easter**
|
||||
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>Autumn</summary>
|
||||
|
||||
**Autumn**
|
||||
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>Santa</summary>
|
||||
|
||||
**Santa**
|
||||
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>Christmas</summary>
|
||||
|
||||
**Christmas**
|
||||
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>Fireworks</summary>
|
||||
|
||||
**Fireworks**
|
||||
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>Halloween</summary>
|
||||
|
||||
**Halloween**
|
||||
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>Hearts</summary>
|
||||
|
||||
**Hearts**
|
||||
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>Snowfall</summary>
|
||||
|
||||
**Snowfall**
|
||||
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>Snowflakes</summary>
|
||||
|
||||
**Snowflakes**
|
||||
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>Snowstorm</summary>
|
||||
|
||||
**Snowstorm**
|
||||
|
||||
</details>
|
||||
|
||||
|
||||
## Ideas for additional seasonals
|
||||
If you have any (specific) ideas for additional seasonals, feel free to open an issue or create a pull request.
|
||||
|
||||
## Installation
|
||||
|
||||
@@ -135,7 +176,7 @@ If automatic selection is enabled, the following themes are applied based on the
|
||||
## Theme Settings
|
||||
Each theme contains additional settings to customize its behavior. Expand the advanced configuration section to configure each theme, adjust parameters like particle count, animation speed etc.
|
||||
|
||||
## Build The Plugin By Yourself
|
||||
## Build the plugin by yourself
|
||||
|
||||
If you want to build the plugin yourself:
|
||||
|
||||
@@ -203,116 +244,3 @@ volumes:
|
||||
|
||||
Feel free to contribute to this project by creating pull requests or reporting issues.
|
||||
|
||||
---
|
||||
|
||||
## Legacy Manual Installation
|
||||
|
||||
<details>
|
||||
<summary>Click to expand instructions for the old manual installation method (without plugin)</summary>
|
||||
|
||||
### Installation
|
||||
|
||||
> [!TIP]
|
||||
> Take a look at [CodeDevMLH/Jellyfin-Mods-Automated-Script](https://github.com/CodeDevMLH/Jellyfin-Mods-Automated-Script)
|
||||
|
||||
1. **Add Seasonal Container to `index.html`**
|
||||
Edit the `index.html` file of your Jellyfin web instance. Add the following code inside the `<body>` tag:
|
||||
|
||||
```html
|
||||
<div class="seasonals-container"></div>
|
||||
<script src="seasonals/seasonals.js"></script>
|
||||
```
|
||||
2. **Deploy Files**
|
||||
Place the seasonals folder (including seasonals.js, CSS, and additional JavaScript files for each theme [this one](https://github.com/CodeDevMLH/Jellyfin-Seasonals/tree/legacy/seasonals)) inside the Jellyfin web server directory (labeld with "web").
|
||||
|
||||
3. **Configure Themes**
|
||||
Customize the theme-configs.js file to modify or add new themes. The default configuration is shown below:
|
||||
|
||||
```javascript
|
||||
const automateThemeSelection = true; // Set to false to disable automatic theme selection based on current date
|
||||
const defaultTheme = 'none'; // Default theme if automatic selection is off
|
||||
|
||||
const themeConfigs = {
|
||||
snowflakes: {
|
||||
css: 'seasonals/snowflakes.css',
|
||||
js: 'seasonals/snowflakes.js',
|
||||
containerClass: 'snowflakes'
|
||||
},
|
||||
snowfall: {
|
||||
css: 'seasonals/snowfall.css',
|
||||
js: 'seasonals/snowfall.js',
|
||||
containerClass: 'snowfall-container'
|
||||
},
|
||||
|
||||
// more configs...
|
||||
|
||||
none: {
|
||||
containerClass: 'none'
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
4. **Reload the web interface**
|
||||
After making these changes, restart your Jellyfin server and/or refresh the web interface (ctrl+F5, sometimes you need to clear the browsers temp files/cache (every time with firefox ;-()) to see the changes.
|
||||
|
||||
### Theme Settings
|
||||
Each theme's JavaScript file contains additional settings to customize its behavior. Here are examples for the `autumn` and `snowflakes` themes:
|
||||
|
||||
**Autumn Theme Settings**
|
||||
```javascript
|
||||
const leaves = true; // Enable/disable leaves
|
||||
const randomLeaves = true; // Enable random leaves
|
||||
const randomLeavesMobile = false; // Enable random leaves on mobile devices
|
||||
const enableDiffrentDuration = true; // Enable different animation duration for random leaves
|
||||
const leafCount = 25; // Number of random extra leaves
|
||||
```
|
||||
|
||||
**Snowflakes Theme Settings**
|
||||
```javascript
|
||||
const snowflakes = true; // Enable/disable snowflakes
|
||||
const randomSnowflakes = true; // Enable random snowflakes
|
||||
const randomSnowflakesMobile = false; // Enable random snowflakes on mobile devices
|
||||
const enableColoredSnowflakes = true; // Enable colored snowflakes on mobile devices
|
||||
const enableDiffrentDuration = true; // Enable different animation duration for random snowflakes
|
||||
const snowflakeCount = 25; // Number of random extra snowflakes
|
||||
```
|
||||
|
||||
### Usage
|
||||
**Automatic Theme Selection**
|
||||
By default, the theme is automatically selected based on the date. For example:
|
||||
|
||||
Snowfall: January
|
||||
Hearts: February (Valentine's Day)
|
||||
Halloween: October
|
||||
|
||||
Modify the determineCurrentTheme() function in seasonals.js to adjust date-based logic.
|
||||
|
||||
**Manual Theme Selection**
|
||||
To use a fixed theme, set automateThemeSelection to false in the theme-configs.js file and specify a defaultTheme.
|
||||
|
||||
**Custom Themes**
|
||||
1. Add your CSS and JavaScript files to the seasonals folder.
|
||||
|
||||
2. Extend the themeConfigs object with your theme details:
|
||||
```javascript
|
||||
myTheme: {
|
||||
css: 'seasonals/my-theme.css',
|
||||
js: 'seasonals/my-theme.js',
|
||||
containerClass: 'my-theme-container',
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### Additional Directory: Separate Single Seasonals
|
||||
For users who prefer not to use the automatic seasonal theme selection, individual seasonals are available in the `separate single seasonals` folder. Each seasonal theme can be independently loaded and used without relying on the main automatic selection system.
|
||||
|
||||
but this requires to the modify of the `index.html` with adding the html in `add_to_index_html`.
|
||||
|
||||
To use a single seasonal theme, include its specific CSS and JS files in your `index.html` inside the `<body> </body>` tags provided by `add_to_index_html.html` in the sub-theme-folders as shown below:
|
||||
|
||||
```html
|
||||
<div class="seasonalsname-container"></div>
|
||||
<script src="separate single seasonals/snowflakes.js"></script>
|
||||
<link rel="stylesheet" href="separate single seasonals/snowflakes.css">
|
||||
|
||||
</details>
|
||||
|
||||
@@ -26,8 +26,11 @@ git merge main
|
||||
Setzt deine Commits neu auf die Spitze eines anderen Branches. Die Commit-IDs werden dabei neu geschrieben.
|
||||
|
||||
```bash
|
||||
git stash # (optional) Änderungen parken.
|
||||
git checkout dev
|
||||
git rebase main
|
||||
git fetch origin
|
||||
git rebase origin/main
|
||||
git stash pop # (optional) Änderungen zurückholen.
|
||||
```
|
||||
|
||||
| Details | |
|
||||
@@ -38,6 +41,60 @@ git rebase main
|
||||
|
||||
---
|
||||
|
||||
## **Git: dev zurücksetzen & „main ist Chef“**
|
||||
|
||||
Problem
|
||||
|
||||
Beim Arbeiten mit Git passiert oft Folgendes:
|
||||
|
||||
- `dev` hat Commits, die nicht in `main` sind
|
||||
- diese Commits brauche ich nicht mehr
|
||||
- beim `git rebase origin/main` will Git trotzdem mergen oder Konflikte lösen
|
||||
|
||||
⚠️ Wichtiges Missverständnis:
|
||||
|
||||
Das sind keine lokalen Änderungen, sondern Commits, die auf `dev` existieren.
|
||||
|
||||
`git reset --hard origin/dev` entfernt nur lokale, nicht gepushte Commits,
|
||||
aber nicht Commits, die bereits auf `origin/dev` liegen.
|
||||
|
||||
Praktische Befehle & sichere Vorgehensweise
|
||||
|
||||
- Prüfen — welche Commits würden entfernt werden:
|
||||
|
||||
```bash
|
||||
git fetch origin
|
||||
git log --oneline origin/main..origin/dev
|
||||
```
|
||||
|
||||
- Optional: Backup des aktuellen `origin/dev`, falls etwas schiefgeht:
|
||||
|
||||
```bash
|
||||
git fetch origin
|
||||
git branch backup/dev origin/dev
|
||||
```
|
||||
|
||||
- Sicheres Zurücksetzen von `dev` auf `main` (lokal + remote):
|
||||
|
||||
```bash
|
||||
git checkout dev
|
||||
git fetch origin
|
||||
git reset --hard origin/main
|
||||
git push --force-with-lease origin dev
|
||||
```
|
||||
|
||||
- Alternative (ohne lokalen Checkout): Push von `main` direkt nach `dev`:
|
||||
|
||||
```bash
|
||||
git fetch origin
|
||||
git push --force-with-lease origin origin/main:refs/heads/dev
|
||||
```
|
||||
|
||||
- Warnung: Diese Aktionen schreiben die Remote‑History um. Koordiniere dich mit
|
||||
dem Team bevor du ein Force‑Push ausführst. Verwende `--force-with-lease`
|
||||
anstelle von `--force` für etwas mehr Sicherheit.
|
||||
|
||||
|
||||
## 📦 Temporäres Speichern & Spezialbefehle
|
||||
|
||||
### Stash (Das "Regal")
|
||||
|
||||
@@ -9,12 +9,12 @@
|
||||
"imageUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/Jellyfin-Seasonals-Plugin/raw/branch/main/logo.png",
|
||||
"versions": [
|
||||
{
|
||||
"version": "1.6.10.0",
|
||||
"version": "1.6.13.1",
|
||||
"changelog": "- feat: Add client-side toggle option for seasonal settings",
|
||||
"targetAbi": "10.11.0.0",
|
||||
"sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/Jellyfin-Seasonals-Plugin/releases/download/v1.6.10.0/Jellyfin.Plugin.Seasonals.zip",
|
||||
"checksum": "3a56b23e0adf64e1e85f0aa1ac93e1b2",
|
||||
"timestamp": "2026-02-03T21:03:40Z"
|
||||
"sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/Jellyfin-Seasonals-Plugin/releases/download/v1.6.13.1/Jellyfin.Plugin.Seasonals.zip",
|
||||
"checksum": "73177840d232ea06a0b621b901770d4c",
|
||||
"timestamp": "2026-02-04T12:39:13Z"
|
||||
},
|
||||
{
|
||||
"version": "1.5.1.0",
|
||||
@@ -107,6 +107,38 @@
|
||||
"category": "General",
|
||||
"imageUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/raw/branch/main/logo.png",
|
||||
"versions": [
|
||||
{
|
||||
"version": "1.3.0.3",
|
||||
"changelog": "- feat: Enhance custom media ID functionality with manual trailer override support",
|
||||
"targetAbi": "10.11.0.0",
|
||||
"sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.3.0.3/Jellyfin.Plugin.MediaBarEnhanced.zip",
|
||||
"checksum": "1d9e0a8342d46f84aed3f7bd1bee32d3",
|
||||
"timestamp": "2026-02-04T01:41:35Z"
|
||||
},
|
||||
{
|
||||
"version": "1.3.0.2",
|
||||
"changelog": "- feat: Enhance custom media ID functionality with manual trailer override support",
|
||||
"targetAbi": "10.11.0.0",
|
||||
"sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.3.0.2/Jellyfin.Plugin.MediaBarEnhanced.zip",
|
||||
"checksum": "22e79daa5f433ca09a3db4f8e37679b4",
|
||||
"timestamp": "2026-02-04T01:27:55Z"
|
||||
},
|
||||
{
|
||||
"version": "1.3.0.1",
|
||||
"changelog": "- feat: Enhance custom media ID functionality with manual trailer override support",
|
||||
"targetAbi": "10.11.0.0",
|
||||
"sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.3.0.1/Jellyfin.Plugin.MediaBarEnhanced.zip",
|
||||
"checksum": "5a4f555e29c733dabd51169f6ace56eb",
|
||||
"timestamp": "2026-02-04T01:14:19Z"
|
||||
},
|
||||
{
|
||||
"version": "1.3.0.0",
|
||||
"changelog": "- feat: Enhance custom media ID functionality with manual trailer override support",
|
||||
"targetAbi": "10.11.0.0",
|
||||
"sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.3.0.0/Jellyfin.Plugin.MediaBarEnhanced.zip",
|
||||
"checksum": "83c26ba8f7ad6e1a7fe73c7190f532f3",
|
||||
"timestamp": "2026-02-04T00:07:15Z"
|
||||
},
|
||||
{
|
||||
"version": "1.2.3.7",
|
||||
"changelog": "- Fixes the issue where buttons were cut off on smaller screens such as on S24/S25.\n- Update mediaBarEnhanced.js and mediaBarEnhanced.css with version 3.0.9 from original repo",
|
||||
|
||||
Reference in New Issue
Block a user