diff --git a/README.md b/README.md index 2bbcc2d..96e619e 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,107 @@ -# Seasonals +# Jellyfin Seasonals +Jellyfin Seasonals is a simple modification that adds seasonal themes to your Jellyfin web interface. Depending on the configuration, it automatically selects a theme based on the current date or allows you to manually set a default theme. + +## Features + +- **Automatic Theme Selection**: Dynamically updates the theme based on the date (e.g., snowflakes in December, hearts for Valentine's Day). +- **Custom Themes**: Add your own seasonal themes by extending the `themeConfigs` object. +- **Easy Integration**: Lightweight and requires minimal changes to your Jellyfin setup. + +## Installation + +1. **Add Seasonal Container to `index.html`** + Edit the `index.html` file of your Jellyfin web instance. Add the following code inside the `` tag: + + ```html +
+ + ``` +2. **Deploy Files** + Place the seasonals folder (including seasonals.js, CSS, and additional JavaScript files for each theme) 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' + }, + + // more configs... + + none: { + containerClass: 'none' + }, + }; + ``` + +4. **Restart Jellyfin Web Interface** + After making these changes, restart your Jellyfin web server or refresh the interface 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', + } + ``` + +## Troubleshooting +- **No Theme Appears:** Ensure the `
` and `` element exists in your index.html inside the ` ` tags. +- **Missing Files:** Verify that the paths in themeConfigs point to the correct files in the seasonals folder. +- **Errors in Console:** Check browser developer tools for logs or errors related to the seasonal scripts. + +## Contributing + +Feel free to contribute to this project by creating pull requests or reporting issues. \ No newline at end of file diff --git a/seasonals/seasonals.js b/seasonals/seasonals.js index 0651a7c..bdebcfe 100644 --- a/seasonals/seasonals.js +++ b/seasonals/seasonals.js @@ -1,7 +1,7 @@ // theme-configs.js -const automateThemeSelection = true; // Set to false to disable automatic theme selection based on the current month -const defaultTheme = 'snowfall'; // The theme to use if automatic theme selection is disabled +const automateThemeSelection = true; // Set to false to disable automatic theme selection based on current date +const defaultTheme = 'none'; // The theme to use if automatic theme selection is disabled // theme configurations const themeConfigs = {