Compare commits
10 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
56298487f4 | ||
|
|
89fc1c38f0 | ||
|
|
4c168a5ec2 | ||
|
|
92d9e1a9ad | ||
|
|
007e55a612 | ||
|
|
20da9899e4 | ||
|
|
9b9cad1caa | ||
|
|
e8e3424cc9 | ||
|
|
0eeed99508 | ||
|
|
a0f261f597 |
@@ -270,9 +270,9 @@ You can test your theme without a Jellyfin server by using the included test sit
|
||||
### Steps
|
||||
|
||||
1. Navigate to the `Jellyfin.Plugin.Seasonals/Web/` directory
|
||||
2. Open `test-site.html` in your browser (just double-click the file) or vscode or what ever you use...
|
||||
2. Open [`test-site.html`](./Jellyfin.Plugin.Seasonals/Web/test-site.html) in your browser (just double-click the file) or vscode or what ever you use...
|
||||
3. Use the **theme selector dropdown** to pick an existing theme or select **"Custom (Local Files)"** to test your own
|
||||
4. When "Custom" is selected, enter your theme's JS and CSS filenames (e.g., `mytheme.js` and `mytheme.css` (must be in the same folder as `test-site.html` for this to work))
|
||||
4. When "Custom" is selected, enter your theme's JS and CSS filenames (e.g., `mytheme.js` and `mytheme.css` (must be in the same folder as [`test-site.html`](./Jellyfin.Plugin.Seasonals/Web/test-site.html) for this to work))
|
||||
5. Click **"Load Theme"** to apply. Click **"Clear & Reload"** to reset and try again
|
||||
|
||||
### What to Verify
|
||||
@@ -293,7 +293,7 @@ You can test your theme without a Jellyfin server by using the included test sit
|
||||
- [ ] Created `{themeName}.css` following the [CSS pattern](#css-file-pattern)
|
||||
- [ ] (If applicable) Created `{themeName}_images/` with optimized assets
|
||||
- [ ] Added theme to `ThemeConfigs` in `seasonals.js`
|
||||
- [ ] Tested locally with `test-site.html`
|
||||
- [ ] Tested locally with [`test-site.html`](./Jellyfin.Plugin.Seasonals/Web/test-site.html)
|
||||
- [ ] No theme related console errors
|
||||
- [ ] Effect has `pointer-events: none` (doesn't block the UI)
|
||||
- [ ] Effect hides during video/trailer playback (toggle function implemented)
|
||||
|
||||
@@ -28,6 +28,9 @@ public class PluginConfiguration : BasePluginConfiguration
|
||||
Santa = new SantaOptions();
|
||||
Easter = new EasterOptions();
|
||||
Resurrection = new ResurrectionOptions();
|
||||
Spring = new SpringOptions();
|
||||
Summer = new SummerOptions();
|
||||
Carnival = new CarnivalOptions();
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
@@ -53,7 +56,7 @@ public class PluginConfiguration : BasePluginConfiguration
|
||||
/// <summary>
|
||||
/// Gets or sets the seasonal rules configuration as JSON.
|
||||
/// </summary>
|
||||
public string SeasonalRules { get; set; } = "[{\"Name\":\"New Year Fireworks\",\"StartDay\":28,\"StartMonth\":12,\"EndDay\":5,\"EndMonth\":1,\"Theme\":\"fireworks\"},{\"Name\":\"Valentine's Day\",\"StartDay\":10,\"StartMonth\":2,\"EndDay\":18,\"EndMonth\":2,\"Theme\":\"hearts\"},{\"Name\":\"Santa\",\"StartDay\":22,\"StartMonth\":12,\"EndDay\":27,\"EndMonth\":12,\"Theme\":\"santa\"},{\"Name\":\"Snowflakes (December)\",\"StartDay\":1,\"StartMonth\":12,\"EndDay\":31,\"EndMonth\":12,\"Theme\":\"snowflakes\"},{\"Name\":\"Snowfall (January)\",\"StartDay\":1,\"StartMonth\":1,\"EndDay\":31,\"EndMonth\":1,\"Theme\":\"snowfall\"},{\"Name\":\"Snowfall (February)\",\"StartDay\":1,\"StartMonth\":2,\"EndDay\":29,\"EndMonth\":2,\"Theme\":\"snowfall\"},{\"Name\":\"Easter\",\"StartDay\":25,\"StartMonth\":3,\"EndDay\":25,\"EndMonth\":4,\"Theme\":\"easter\"},{\"Name\":\"Halloween\",\"StartDay\":24,\"StartMonth\":10,\"EndDay\":5,\"EndMonth\":11,\"Theme\":\"halloween\"},{\"Name\":\"Autumn\",\"StartDay\":1,\"StartMonth\":9,\"EndDay\":30,\"EndMonth\":11,\"Theme\":\"autumn\"}]";
|
||||
public string SeasonalRules { get; set; } = "[{\"Name\":\"New Year Fireworks\",\"StartDay\":28,\"StartMonth\":12,\"EndDay\":5,\"EndMonth\":1,\"Theme\":\"fireworks\"},{\"Name\":\"Carnival\",\"StartDay\":19,\"StartMonth\":2,\"EndDay\":28,\"EndMonth\":2,\"Theme\":\"carnival\"},{\"Name\":\"Valentine's Day\",\"StartDay\":10,\"StartMonth\":2,\"EndDay\":18,\"EndMonth\":2,\"Theme\":\"hearts\"},{\"Name\":\"Spring\",\"StartDay\":1,\"StartMonth\":3,\"EndDay\":31,\"EndMonth\":5,\"Theme\":\"spring\"},{\"Name\":\"Summer\",\"StartDay\":1,\"StartMonth\":6,\"EndDay\":31,\"EndMonth\":8,\"Theme\":\"summer\"},{\"Name\":\"Santa\",\"StartDay\":22,\"StartMonth\":12,\"EndDay\":27,\"EndMonth\":12,\"Theme\":\"santa\"},{\"Name\":\"Snowflakes (December)\",\"StartDay\":1,\"StartMonth\":12,\"EndDay\":31,\"EndMonth\":12,\"Theme\":\"snowflakes\"},{\"Name\":\"Snowfall (January)\",\"StartDay\":1,\"StartMonth\":1,\"EndDay\":31,\"EndMonth\":1,\"Theme\":\"snowfall\"},{\"Name\":\"Snowfall (February)\",\"StartDay\":1,\"StartMonth\":2,\"EndDay\":29,\"EndMonth\":2,\"Theme\":\"snowfall\"},{\"Name\":\"Easter\",\"StartDay\":25,\"StartMonth\":3,\"EndDay\":25,\"EndMonth\":4,\"Theme\":\"easter\"},{\"Name\":\"Halloween\",\"StartDay\":24,\"StartMonth\":10,\"EndDay\":5,\"EndMonth\":11,\"Theme\":\"halloween\"},{\"Name\":\"Autumn\",\"StartDay\":1,\"StartMonth\":9,\"EndDay\":30,\"EndMonth\":11,\"Theme\":\"autumn\"}]";
|
||||
|
||||
/// <summary>
|
||||
/// Gets or sets the Seasonals options.
|
||||
@@ -69,6 +72,9 @@ public class PluginConfiguration : BasePluginConfiguration
|
||||
public SantaOptions Santa { get; set; }
|
||||
public EasterOptions Easter { get; set; }
|
||||
public ResurrectionOptions Resurrection { get; set; }
|
||||
public SpringOptions Spring { get; set; }
|
||||
public SummerOptions Summer { get; set; }
|
||||
public CarnivalOptions Carnival { get; set; }
|
||||
}
|
||||
|
||||
public class AutumnOptions
|
||||
@@ -182,3 +188,34 @@ public class ResurrectionOptions
|
||||
public bool EnableRandomSymbolsMobile { get; set; } = false;
|
||||
public bool EnableDifferentDuration { get; set; } = true;
|
||||
}
|
||||
|
||||
public class SpringOptions
|
||||
{
|
||||
public int PetalCount { get; set; } = 25;
|
||||
public int PollenCount { get; set; } = 15;
|
||||
public int LadybugCount { get; set; } = 5;
|
||||
public int SunbeamCount { get; set; } = 5;
|
||||
public bool EnableSpring { get; set; } = true;
|
||||
public bool EnableRandomSpring { get; set; } = true;
|
||||
public bool EnableRandomSpringMobile { get; set; } = false;
|
||||
public bool EnableDifferentDuration { get; set; } = true;
|
||||
}
|
||||
|
||||
public class SummerOptions
|
||||
{
|
||||
public int BubbleCount { get; set; } = 20;
|
||||
public int DustCount { get; set; } = 50;
|
||||
public bool EnableSummer { get; set; } = true;
|
||||
public bool EnableRandomSummer { get; set; } = true;
|
||||
public bool EnableRandomSummerMobile { get; set; } = false;
|
||||
public bool EnableDifferentDuration { get; set; } = true;
|
||||
}
|
||||
|
||||
public class CarnivalOptions
|
||||
{
|
||||
public int ObjectCount { get; set; } = 25;
|
||||
public bool EnableCarnival { get; set; } = true;
|
||||
public bool EnableRandomCarnival { get; set; } = true;
|
||||
public bool EnableRandomCarnivalMobile { get; set; } = false;
|
||||
public bool EnableDifferentDuration { get; set; } = true;
|
||||
}
|
||||
|
||||
@@ -62,14 +62,13 @@
|
||||
<option value="halloween">Halloween</option>
|
||||
<option value="hearts">Hearts</option>
|
||||
<option value="christmas">Christmas</option>
|
||||
<option value="santa">Santa</option>
|
||||
<option value="autumn">Autumn</option>
|
||||
<option value="santa">Santa (flying santa & snowfall)</option>
|
||||
<option value="autumn">Autumn (falling leaves)</option>
|
||||
<option value="easter">Easter</option>
|
||||
<option value="resurrection">Resurrection</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="summer">Summer (Bubbles)</option>
|
||||
<option value="spring">Spring</option>
|
||||
<option value="carnival">Carnival (Confetti)</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>
|
||||
@@ -576,6 +575,140 @@
|
||||
<div class="fieldDescription">Randomize the movement speed.</div>
|
||||
</div>
|
||||
</details>
|
||||
<hr style="max-width: 800px; margin: 1em 0;">
|
||||
|
||||
<details>
|
||||
<summary>Spring</summary>
|
||||
<div class="checkboxContainer checkboxContainer-withDescription">
|
||||
<label class="emby-checkbox-label">
|
||||
<input id="EnableSpring" name="EnableSpring" type="checkbox" is="emby-checkbox" />
|
||||
<span>Enable Spring Seasonal</span>
|
||||
</label>
|
||||
<div class="fieldDescription">Enable the Spring theme in general (e.g. for automation).</div>
|
||||
</div>
|
||||
<div class="checkboxContainer checkboxContainer-withDescription">
|
||||
<label class="emby-checkbox-label">
|
||||
<input id="EnableRandomSpring" name="EnableRandomSpring" type="checkbox" is="emby-checkbox" />
|
||||
<span>Enable Additional Random Sakura Petals</span>
|
||||
</label>
|
||||
<div class="fieldDescription">Displays additional Sakura petals falling across the screen.</div>
|
||||
</div>
|
||||
<div class="checkboxContainer checkboxContainer-withDescription">
|
||||
<label class="emby-checkbox-label">
|
||||
<input id="EnableRandomSpringMobile" name="EnableRandomSpringMobile" type="checkbox" is="emby-checkbox" />
|
||||
<span>Enable Additional Random Sakura Petals on Mobile</span>
|
||||
</label>
|
||||
<div class="fieldDescription">Displays additional Sakura petals falling across the screen on mobile devices. Warning: High values may affect performance.</div>
|
||||
</div>
|
||||
<div class="inputContainer">
|
||||
<label class="inputLabel" for="SpringPetalCount">Sakura Petal Count</label>
|
||||
<input is="emby-input" type="number" id="SpringPetalCount" name="SpringPetalCount" />
|
||||
<div class="fieldDescription">Number of additional Sakura petals (if enabled).</div>
|
||||
</div>
|
||||
<div class="inputContainer">
|
||||
<label class="inputLabel" for="SpringPollenCount">Pollen Count</label>
|
||||
<input is="emby-input" type="number" id="SpringPollenCount" name="SpringPollenCount" />
|
||||
<div class="fieldDescription">Number of pollen particles (if enabled).</div>
|
||||
</div>
|
||||
<div class="inputContainer">
|
||||
<label class="inputLabel" for="SpringLadybugCount">Ladybug Count</label>
|
||||
<input is="emby-input" type="number" id="SpringLadybugCount" name="SpringLadybugCount" />
|
||||
<div class="fieldDescription">Number of ladybugs.</div>
|
||||
</div>
|
||||
<div class="inputContainer">
|
||||
<label class="inputLabel" for="SpringSunbeamCount">Sunbeam Count</label>
|
||||
<input is="emby-input" type="number" id="SpringSunbeamCount" name="SpringSunbeamCount" />
|
||||
<div class="fieldDescription">Number of sunbeams (if enabled).</div>
|
||||
</div>
|
||||
<div class="checkboxContainer checkboxContainer-withDescription">
|
||||
<label class="emby-checkbox-label">
|
||||
<input id="EnableDifferentDurationSpring" name="EnableDifferentDurationSpring" type="checkbox" is="emby-checkbox" />
|
||||
<span>Enable Different Falling Speed</span>
|
||||
</label>
|
||||
<div class="fieldDescription">Randomize the falling speed of petals.</div>
|
||||
</div>
|
||||
</details>
|
||||
<hr style="max-width: 800px; margin: 1em 0;">
|
||||
|
||||
<details>
|
||||
<summary>Summer</summary>
|
||||
<div class="checkboxContainer checkboxContainer-withDescription">
|
||||
<label class="emby-checkbox-label">
|
||||
<input id="EnableSummer" name="EnableSummer" type="checkbox" is="emby-checkbox" />
|
||||
<span>Enable Summer Seasonal</span>
|
||||
</label>
|
||||
<div class="fieldDescription">Enable the Summer theme in general (e.g. for automation).</div>
|
||||
</div>
|
||||
<div class="checkboxContainer checkboxContainer-withDescription">
|
||||
<label class="emby-checkbox-label">
|
||||
<input id="EnableRandomSummer" name="EnableRandomSummer" type="checkbox" is="emby-checkbox" />
|
||||
<span>Enable Additional Random Bubbles and Dust</span>
|
||||
</label>
|
||||
<div class="fieldDescription">Displays additional bubbles and dust particles rising across the screen.</div>
|
||||
</div>
|
||||
<div class="checkboxContainer checkboxContainer-withDescription">
|
||||
<label class="emby-checkbox-label">
|
||||
<input id="EnableRandomSummerMobile" name="EnableRandomSummerMobile" type="checkbox" is="emby-checkbox" />
|
||||
<span>Enable Additional Random Bubbles and Dust on Mobile</span>
|
||||
</label>
|
||||
<div class="fieldDescription">Displays additional bubbles and dust particles rising across the screen on mobile devices. Warning: High values may affect performance.</div>
|
||||
</div>
|
||||
<div class="inputContainer">
|
||||
<label class="inputLabel" for="SummerBubbleCount">Bubbles Count</label>
|
||||
<input is="emby-input" type="number" id="SummerBubbleCount" name="SummerBubbleCount" />
|
||||
<div class="fieldDescription">Number of bubbles (if enabled).</div>
|
||||
</div>
|
||||
<div class="inputContainer">
|
||||
<label class="inputLabel" for="SummerDustCount">Dust Count</label>
|
||||
<input is="emby-input" type="number" id="SummerDustCount" name="SummerDustCount" />
|
||||
<div class="fieldDescription">Number of dust particles (if enabled).</div>
|
||||
</div>
|
||||
<div class="checkboxContainer checkboxContainer-withDescription">
|
||||
<label class="emby-checkbox-label">
|
||||
<input id="EnableDifferentDurationSummer" name="EnableDifferentDurationSummer" type="checkbox" is="emby-checkbox" />
|
||||
<span>Enable Different Rising Speed</span>
|
||||
</label>
|
||||
<div class="fieldDescription">Randomize the rising speed of bubbles.</div>
|
||||
</div>
|
||||
</details>
|
||||
<hr style="max-width: 800px; margin: 1em 0;">
|
||||
|
||||
<details>
|
||||
<summary>Carnival</summary>
|
||||
<div class="checkboxContainer checkboxContainer-withDescription">
|
||||
<label class="emby-checkbox-label">
|
||||
<input id="EnableCarnival" name="EnableCarnival" type="checkbox" is="emby-checkbox" />
|
||||
<span>Enable Carnival Seasonal</span>
|
||||
</label>
|
||||
<div class="fieldDescription">Enable the Carnival theme in general (e.g. for automation).</div>
|
||||
</div>
|
||||
<div class="checkboxContainer checkboxContainer-withDescription">
|
||||
<label class="emby-checkbox-label">
|
||||
<input id="EnableRandomCarnival" name="EnableRandomCarnival" type="checkbox" is="emby-checkbox" />
|
||||
<span>Enable Additional Random Confetti</span>
|
||||
</label>
|
||||
<div class="fieldDescription">Displays additional confetti falling and fluttering across the screen.</div>
|
||||
</div>
|
||||
<div class="checkboxContainer checkboxContainer-withDescription">
|
||||
<label class="emby-checkbox-label">
|
||||
<input id="EnableRandomCarnivalMobile" name="EnableRandomCarnivalMobile" type="checkbox" is="emby-checkbox" />
|
||||
<span>Enable Additional Random Confetti on Mobile</span>
|
||||
</label>
|
||||
<div class="fieldDescription">Displays additional confetti falling and fluttering across the screen on mobile devices. Warning: High values may affect performance.</div>
|
||||
</div>
|
||||
<div class="inputContainer">
|
||||
<label class="inputLabel" for="CarnivalObjectCount">Confetti Count</label>
|
||||
<input is="emby-input" type="number" id="CarnivalObjectCount" name="CarnivalObjectCount" />
|
||||
<div class="fieldDescription">Number of additional confetti pieces (if enabled).</div>
|
||||
</div>
|
||||
<div class="checkboxContainer checkboxContainer-withDescription">
|
||||
<label class="emby-checkbox-label">
|
||||
<input id="EnableDifferentDurationCarnival" name="EnableDifferentDurationCarnival" type="checkbox" is="emby-checkbox" />
|
||||
<span>Enable Different Falling Speed</span>
|
||||
</label>
|
||||
<div class="fieldDescription">Randomize the falling speed of confetti.</div>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<div style="background-color: rgba(255, 255, 255, 0.05); border-left: 4px solid #00a4dc; border-radius: 4px; padding: 1em 1.5em; margin: 1.5em 0; display: flex; align-items: center; gap: 1em;">
|
||||
@@ -755,6 +888,9 @@
|
||||
' <option value="autumn">Autumn</option>' +
|
||||
' <option value="easter">Easter</option>' +
|
||||
' <option value="resurrection">Resurrection</option>' +
|
||||
' <option value="spring">Spring</option>' +
|
||||
' <option value="summer">Summer</option>' +
|
||||
' <option value="carnival">Carnival</option>' +
|
||||
' </select>' +
|
||||
' </div>' +
|
||||
'</div>';
|
||||
@@ -927,6 +1063,31 @@
|
||||
document.querySelector('#EnableRandomResurrectionMobile').checked = config.Resurrection.EnableRandomSymbolsMobile;
|
||||
document.querySelector('#EnableDifferentDurationResurrection').checked = config.Resurrection.EnableDifferentDuration;
|
||||
|
||||
// Spring
|
||||
document.querySelector('#EnableSpring').checked = config.Spring.EnableSpring;
|
||||
document.querySelector('#SpringPetalCount').value = config.Spring.PetalCount;
|
||||
document.querySelector('#SpringPollenCount').value = config.Spring.PollenCount;
|
||||
document.querySelector('#SpringLadybugCount').value = config.Spring.LadybugCount;
|
||||
document.querySelector('#SpringSunbeamCount').value = config.Spring.SunbeamCount;
|
||||
document.querySelector('#EnableRandomSpring').checked = config.Spring.EnableRandomSpring;
|
||||
document.querySelector('#EnableRandomSpringMobile').checked = config.Spring.EnableRandomSpringMobile;
|
||||
document.querySelector('#EnableDifferentDurationSpring').checked = config.Spring.EnableDifferentDuration;
|
||||
|
||||
// Summer
|
||||
document.querySelector('#EnableSummer').checked = config.Summer.EnableSummer;
|
||||
document.querySelector('#SummerBubbleCount').value = config.Summer.BubbleCount;
|
||||
document.querySelector('#SummerDustCount').value = config.Summer.DustCount;
|
||||
document.querySelector('#EnableRandomSummer').checked = config.Summer.EnableRandomSummer;
|
||||
document.querySelector('#EnableRandomSummerMobile').checked = config.Summer.EnableRandomSummerMobile;
|
||||
document.querySelector('#EnableDifferentDurationSummer').checked = config.Summer.EnableDifferentDuration;
|
||||
|
||||
// Carnival
|
||||
document.querySelector('#EnableCarnival').checked = config.Carnival.EnableCarnival;
|
||||
document.querySelector('#CarnivalObjectCount').value = config.Carnival.ObjectCount;
|
||||
document.querySelector('#EnableRandomCarnival').checked = config.Carnival.EnableRandomCarnival;
|
||||
document.querySelector('#EnableRandomCarnivalMobile').checked = config.Carnival.EnableRandomCarnivalMobile;
|
||||
document.querySelector('#EnableDifferentDurationCarnival').checked = config.Carnival.EnableDifferentDuration;
|
||||
|
||||
Dashboard.hideLoadingMsg();
|
||||
});
|
||||
});
|
||||
@@ -1034,6 +1195,31 @@
|
||||
config.Resurrection.EnableRandomSymbolsMobile = document.querySelector('#EnableRandomResurrectionMobile').checked;
|
||||
config.Resurrection.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationResurrection').checked;
|
||||
|
||||
// Spring
|
||||
config.Spring.EnableSpring = document.querySelector('#EnableSpring').checked;
|
||||
config.Spring.PetalCount = parseInt(document.querySelector('#SpringPetalCount').value);
|
||||
config.Spring.PollenCount = parseInt(document.querySelector('#SpringPollenCount').value);
|
||||
config.Spring.LadybugCount = parseInt(document.querySelector('#SpringLadybugCount').value);
|
||||
config.Spring.SunbeamCount = parseInt(document.querySelector('#SpringSunbeamCount').value);
|
||||
config.Spring.EnableRandomSpring = document.querySelector('#EnableRandomSpring').checked;
|
||||
config.Spring.EnableRandomSpringMobile = document.querySelector('#EnableRandomSpringMobile').checked;
|
||||
config.Spring.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationSpring').checked;
|
||||
|
||||
// Summer
|
||||
config.Summer.EnableSummer = document.querySelector('#EnableSummer').checked;
|
||||
config.Summer.BubbleCount = parseInt(document.querySelector('#SummerBubbleCount').value);
|
||||
config.Summer.DustCount = parseInt(document.querySelector('#SummerDustCount').value);
|
||||
config.Summer.EnableRandomSummer = document.querySelector('#EnableRandomSummer').checked;
|
||||
config.Summer.EnableRandomSummerMobile = document.querySelector('#EnableRandomSummerMobile').checked;
|
||||
config.Summer.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationSummer').checked;
|
||||
|
||||
// Carnival
|
||||
config.Carnival.EnableCarnival = document.querySelector('#EnableCarnival').checked;
|
||||
config.Carnival.ObjectCount = parseInt(document.querySelector('#CarnivalObjectCount').value);
|
||||
config.Carnival.EnableRandomCarnival = document.querySelector('#EnableRandomCarnival').checked;
|
||||
config.Carnival.EnableRandomCarnivalMobile = document.querySelector('#EnableRandomCarnivalMobile').checked;
|
||||
config.Carnival.EnableDifferentDuration = document.querySelector('#EnableDifferentDurationCarnival').checked;
|
||||
|
||||
ApiClient.updatePluginConfiguration(SeasonalsConfigPage.pluginUniqueId, config).then(function (result) {
|
||||
Dashboard.processPluginConfigurationUpdateResult(result);
|
||||
});
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
<!-- <TreatWarningsAsErrors>false</TreatWarningsAsErrors> -->
|
||||
<Title>Jellyfin Seasonals Plugin</Title>
|
||||
<Authors>CodeDevMLH</Authors>
|
||||
<Version>1.7.0.15</Version>
|
||||
<Version>1.7.1.0</Version>
|
||||
<RepositoryUrl>https://github.com/CodeDevMLH/Jellyfin-Seasonals</RepositoryUrl>
|
||||
</PropertyGroup>
|
||||
|
||||
|
||||
101
Jellyfin.Plugin.Seasonals/Web/carnival.css
Normal file
101
Jellyfin.Plugin.Seasonals/Web/carnival.css
Normal file
@@ -0,0 +1,101 @@
|
||||
.carnival-container {
|
||||
display: block;
|
||||
position: fixed;
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
perspective: 600px;
|
||||
}
|
||||
|
||||
.carnival-wrapper {
|
||||
position: fixed;
|
||||
z-index: 15;
|
||||
top: -20px;
|
||||
will-change: top;
|
||||
animation-name: carnival-fall;
|
||||
animation-timing-function: linear;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.carnival-sway-wrapper {
|
||||
will-change: transform;
|
||||
animation-name: carnival-sway;
|
||||
animation-timing-function: ease-in-out;
|
||||
animation-iteration-count: infinite;
|
||||
animation-direction: alternate;
|
||||
}
|
||||
|
||||
.carnival-confetti {
|
||||
width: 8px;
|
||||
height: 16px;
|
||||
background-color: #f0f;
|
||||
will-change: transform;
|
||||
animation-name: carnival-flutter;
|
||||
animation-timing-function: ease-in-out;
|
||||
animation-iteration-count: infinite;
|
||||
animation-duration: 2s;
|
||||
}
|
||||
|
||||
.carnival-confetti.circle {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.carnival-confetti.square {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.carnival-confetti.triangle {
|
||||
width: 0;
|
||||
height: 0;
|
||||
background-color: transparent !important;
|
||||
border-left: 5px solid transparent;
|
||||
border-right: 5px solid transparent;
|
||||
border-bottom: 10px solid;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: inherit;
|
||||
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
|
||||
}
|
||||
|
||||
@keyframes carnival-fall {
|
||||
0% {
|
||||
top: -10%;
|
||||
}
|
||||
100% {
|
||||
top: 110%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes carnival-sway {
|
||||
0% {
|
||||
transform: translateX(calc(var(--sway-amount, 50px) * -1));
|
||||
}
|
||||
100% {
|
||||
transform: translateX(var(--sway-amount, 50px));
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes carnival-flutter {
|
||||
0% {
|
||||
transform: rotate3d(1, 1, 1, 0deg);
|
||||
}
|
||||
25% {
|
||||
transform: rotate3d(1, 0.5, 0, 90deg);
|
||||
}
|
||||
50% {
|
||||
transform: rotate3d(0.5, 1, 0.5, 180deg);
|
||||
}
|
||||
75% {
|
||||
transform: rotate3d(0, 0.5, 1, 270deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate3d(1, 1, 1, 360deg);
|
||||
}
|
||||
}
|
||||
174
Jellyfin.Plugin.Seasonals/Web/carnival.js
Normal file
174
Jellyfin.Plugin.Seasonals/Web/carnival.js
Normal file
@@ -0,0 +1,174 @@
|
||||
const config = window.SeasonalsPluginConfig?.Carnival || {};
|
||||
|
||||
const carnival = config.EnableCarnival !== undefined ? config.EnableCarnival : true;
|
||||
const randomCarnival = config.EnableRandomCarnival !== undefined ? config.EnableRandomCarnival : true;
|
||||
const randomCarnivalMobile = config.EnableRandomCarnivalMobile !== undefined ? config.EnableRandomCarnivalMobile : false;
|
||||
const enableDifferentDuration = config.EnableDifferentDuration !== undefined ? config.EnableDifferentDuration : true;
|
||||
const enableSway = config.EnableCarnivalSway !== undefined ? config.EnableCarnivalSway : true;
|
||||
const carnivalCount = config.ObjectCount || 80;
|
||||
|
||||
let msgPrinted = false;
|
||||
|
||||
// function to check and control the carnival animation
|
||||
function toggleCarnival() {
|
||||
const carnivalContainer = document.querySelector('.carnival-container');
|
||||
if (!carnivalContainer) return;
|
||||
|
||||
const videoPlayer = document.querySelector('.videoPlayerContainer');
|
||||
const trailerPlayer = document.querySelector('.youtubePlayerContainer');
|
||||
const isDashboard = document.body.classList.contains('dashboardDocument');
|
||||
const hasUserMenu = document.querySelector('#app-user-menu');
|
||||
|
||||
// hide carnival if video/trailer player is active or dashboard is visible
|
||||
if (videoPlayer || trailerPlayer || isDashboard || hasUserMenu) {
|
||||
carnivalContainer.style.display = 'none'; // hide carnival
|
||||
if (!msgPrinted) {
|
||||
console.log('Carnival hidden');
|
||||
msgPrinted = true;
|
||||
}
|
||||
} else {
|
||||
carnivalContainer.style.display = 'block'; // show carnival
|
||||
if (msgPrinted) {
|
||||
console.log('Carnival visible');
|
||||
msgPrinted = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// observe changes in the DOM
|
||||
const observer = new MutationObserver(toggleCarnival);
|
||||
|
||||
// start observation
|
||||
observer.observe(document.body, {
|
||||
childList: true, // observe adding/removing of child elements
|
||||
subtree: true, // observe all levels of the DOM tree
|
||||
attributes: true // observe changes to attributes (e.g. class changes)
|
||||
});
|
||||
|
||||
const confettiColors = [
|
||||
'#fce18a', '#ff726d', '#b48def', '#f4306d',
|
||||
'#36c5f0', '#2ccc5d', '#e9b31d', '#9b59b6',
|
||||
'#3498db', '#e74c3c', '#1abc9c', '#f1c40f'
|
||||
];
|
||||
|
||||
function createConfettiPiece(container, isInitial = false) {
|
||||
const wrapper = document.createElement('div');
|
||||
wrapper.classList.add('carnival-wrapper');
|
||||
|
||||
let swayWrapper = wrapper;
|
||||
|
||||
if (enableSway) {
|
||||
swayWrapper = document.createElement('div');
|
||||
swayWrapper.classList.add('carnival-sway-wrapper');
|
||||
wrapper.appendChild(swayWrapper);
|
||||
}
|
||||
|
||||
const confetti = document.createElement('div');
|
||||
confetti.classList.add('carnival-confetti');
|
||||
|
||||
// Random color
|
||||
const color = confettiColors[Math.floor(Math.random() * confettiColors.length)];
|
||||
confetti.style.backgroundColor = color;
|
||||
|
||||
// Random shape
|
||||
const shape = Math.random();
|
||||
if (shape > 0.8) {
|
||||
confetti.classList.add('circle');
|
||||
} else if (shape > 0.6) {
|
||||
confetti.classList.add('square');
|
||||
} else if (shape > 0.4) {
|
||||
confetti.classList.add('triangle');
|
||||
} else {
|
||||
confetti.classList.add('rect');
|
||||
}
|
||||
|
||||
// Random position
|
||||
wrapper.style.left = `${Math.random() * 100}%`;
|
||||
|
||||
// Random dimensions
|
||||
if (!confetti.classList.contains('circle') && !confetti.classList.contains('square') && !confetti.classList.contains('triangle')) {
|
||||
const width = Math.random() * 5 + 4;
|
||||
const height = Math.random() * 6 + 8;
|
||||
confetti.style.width = `${width}px`;
|
||||
confetti.style.height = `${height}px`;
|
||||
}
|
||||
|
||||
// Animation settings
|
||||
const duration = Math.random() * 5 + 5;
|
||||
|
||||
let delay = 0;
|
||||
if (isInitial) {
|
||||
delay = -Math.random() * duration;
|
||||
} else {
|
||||
delay = Math.random() * 10;
|
||||
}
|
||||
|
||||
wrapper.style.animationDelay = `${delay}s`;
|
||||
wrapper.style.animationDuration = `${duration}s`;
|
||||
|
||||
if (enableSway) {
|
||||
// Random sway duration
|
||||
const swayDuration = Math.random() * 2 + 3; // 3-5s per cycle
|
||||
swayWrapper.style.animationDuration = `${swayDuration}s`;
|
||||
swayWrapper.style.animationDelay = `-${Math.random() * 5}s`;
|
||||
|
||||
// Random sway amplitude (using CSS variable for dynamic keyframe)
|
||||
// Sway between 30px and 100px
|
||||
const swayAmount = Math.random() * 70 + 30;
|
||||
const direction = Math.random() > 0.5 ? 1 : -1;
|
||||
swayWrapper.style.setProperty('--sway-amount', `${swayAmount * direction}px`);
|
||||
}
|
||||
|
||||
// Flutter speed variation
|
||||
confetti.style.animationDuration = `${Math.random() * 2 + 1}s`;
|
||||
|
||||
if (enableSway) {
|
||||
swayWrapper.appendChild(confetti);
|
||||
wrapper.appendChild(swayWrapper);
|
||||
} else {
|
||||
wrapper.appendChild(confetti);
|
||||
}
|
||||
|
||||
container.appendChild(wrapper);
|
||||
}
|
||||
|
||||
function addRandomCarnivalObjects(count) {
|
||||
const carnivalContainer = document.querySelector('.carnival-container');
|
||||
if (!carnivalContainer) return;
|
||||
|
||||
console.log('Adding random carnival confetti');
|
||||
|
||||
for (let i = 0; i < count; i++) {
|
||||
createConfettiPiece(carnivalContainer, true);
|
||||
}
|
||||
}
|
||||
|
||||
// initialize standard carnival objects
|
||||
function initCarnivalObjects() {
|
||||
let container = document.querySelector('.carnival-container');
|
||||
if (!container) {
|
||||
container = document.createElement("div");
|
||||
container.className = "carnival-container";
|
||||
container.setAttribute("aria-hidden", "true");
|
||||
document.body.appendChild(container);
|
||||
}
|
||||
|
||||
// Initial confetti
|
||||
for (let i = 0; i < 30; i++) {
|
||||
createConfettiPiece(container, true);
|
||||
}
|
||||
}
|
||||
|
||||
// initialize carnival
|
||||
function initializeCarnival() {
|
||||
if (!carnival) return; // exit if carnival is disabled
|
||||
initCarnivalObjects();
|
||||
toggleCarnival();
|
||||
|
||||
const screenWidth = window.innerWidth;
|
||||
if (randomCarnival && (screenWidth > 768 || randomCarnivalMobile)) {
|
||||
addRandomCarnivalObjects(carnivalCount);
|
||||
}
|
||||
}
|
||||
|
||||
initializeCarnival();
|
||||
@@ -1,4 +1,4 @@
|
||||
.ressurection-container {
|
||||
.resurrection-container {
|
||||
display: block;
|
||||
position: fixed;
|
||||
overflow: hidden;
|
||||
@@ -10,20 +10,20 @@
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.ressurection-symbol {
|
||||
.resurrection-symbol {
|
||||
position: fixed;
|
||||
z-index: 15;
|
||||
top: -15%;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
cursor: default;
|
||||
animation-name: ressurection-fall, ressurection-sway;
|
||||
animation-name: resurrection-fall, resurrection-sway;
|
||||
animation-timing-function: linear, ease-in-out;
|
||||
animation-iteration-count: infinite, infinite;
|
||||
will-change: transform, top;
|
||||
}
|
||||
|
||||
.ressurection-symbol img {
|
||||
.resurrection-symbol img {
|
||||
z-index: 15;
|
||||
height: auto;
|
||||
width: 56px;
|
||||
@@ -32,12 +32,12 @@
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.ressurection-symbol img {
|
||||
.resurrection-symbol img {
|
||||
width: 42px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ressurection-fall {
|
||||
@keyframes resurrection-fall {
|
||||
0% {
|
||||
top: -15%;
|
||||
}
|
||||
@@ -47,7 +47,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ressurection-sway {
|
||||
@keyframes resurrection-sway {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
|
||||
@@ -68,6 +68,11 @@ const ThemeConfigs = {
|
||||
js: '../Seasonals/Resources/spring.js',
|
||||
containerClass: 'spring-container'
|
||||
},
|
||||
carnival: {
|
||||
css: '../Seasonals/Resources/carnival.css',
|
||||
js: '../Seasonals/Resources/carnival.js',
|
||||
containerClass: 'carnival-container'
|
||||
},
|
||||
none: {
|
||||
containerClass: 'none'
|
||||
},
|
||||
|
||||
179
Jellyfin.Plugin.Seasonals/Web/spring.css
Normal file
179
Jellyfin.Plugin.Seasonals/Web/spring.css
Normal file
@@ -0,0 +1,179 @@
|
||||
.spring-container {
|
||||
display: block;
|
||||
position: fixed;
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
/* Petals */
|
||||
.spring-petal {
|
||||
position: fixed;
|
||||
top: -20px;
|
||||
z-index: 1005;
|
||||
width: 15px;
|
||||
height: 10px;
|
||||
background-color: #ffc0cb;
|
||||
border-radius: 15px 0px 15px 0px;
|
||||
|
||||
will-change: transform, top;
|
||||
animation-name: spring-fall, spring-sway;
|
||||
animation-timing-function: linear, ease-in-out;
|
||||
animation-iteration-count: infinite, infinite;
|
||||
animation-duration: 10s, 3s;
|
||||
}
|
||||
|
||||
.spring-petal.lighter {
|
||||
background-color: #ffd1dc;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.spring-petal.darker {
|
||||
background-color: #ffb7c5;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.spring-petal.type2 {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 10px 0px 10px 5px;
|
||||
}
|
||||
|
||||
/* Pollen */
|
||||
.spring-pollen {
|
||||
position: fixed;
|
||||
z-index: 14;
|
||||
background-color: #fffacd;
|
||||
border-radius: 50%;
|
||||
opacity: 0.6;
|
||||
box-shadow: 0 0 4px rgba(255, 250, 205, 0.4);
|
||||
|
||||
will-change: transform;
|
||||
animation-name: spring-float;
|
||||
animation-timing-function: linear;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
/* Sunbeams */
|
||||
.spring-sunbeam {
|
||||
position: fixed;
|
||||
top: -50%;
|
||||
height: 200%;
|
||||
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 200, 0.08) 50%, rgba(255, 255, 255, 0));
|
||||
z-index: 5;
|
||||
transform-origin: top center;
|
||||
pointer-events: none;
|
||||
|
||||
animation-name: spring-beam-pulse;
|
||||
animation-timing-function: ease-in-out;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
/* Grass */
|
||||
.spring-grass-container {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
z-index: 1002;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.spring-grass {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 3px;
|
||||
border-radius: 100% 0 0 0;
|
||||
transform-origin: bottom center;
|
||||
background-color: #4caf50;
|
||||
|
||||
will-change: transform;
|
||||
animation-name: spring-grass-sway;
|
||||
animation-timing-function: ease-in-out;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
/* Ladybugs */
|
||||
.spring-ladybug {
|
||||
position: absolute;
|
||||
width: 6px;
|
||||
height: 4px;
|
||||
background-color: #e74c3c; /* Red */
|
||||
border-radius: 3px 3px 0 0;
|
||||
z-index: 1003;
|
||||
|
||||
will-change: left, transform;
|
||||
animation-timing-function: linear;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.spring-ladybug.right {
|
||||
animation-name: spring-bug-crawl-right;
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
.spring-ladybug.left {
|
||||
animation-name: spring-bug-crawl-left;
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
.spring-ladybug::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: -2px;
|
||||
top: 1px;
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
background-color: #000;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
@keyframes spring-fall {
|
||||
0% { top: -10%; }
|
||||
100% { top: 100%; }
|
||||
}
|
||||
|
||||
@keyframes spring-sway {
|
||||
0%, 100% {
|
||||
transform: translateX(0) rotate(0deg);
|
||||
}
|
||||
50% {
|
||||
transform: translateX(30px) rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spring-float {
|
||||
0% { transform: translateX(0) translateY(0); }
|
||||
25% { transform: translateX(20px) translateY(-10px); }
|
||||
50% { transform: translateX(40px) translateY(0); }
|
||||
75% { transform: translateX(20px) translateY(10px); }
|
||||
100% { transform: translateX(0) translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes spring-beam-pulse {
|
||||
0% { opacity: 0.3; transform: rotate(45deg) scaleX(1); }
|
||||
50% { opacity: 0.6; transform: rotate(45deg) scaleX(1.1); }
|
||||
100% { opacity: 0.3; transform: rotate(45deg) scaleX(1); }
|
||||
}
|
||||
|
||||
@keyframes spring-grass-sway {
|
||||
0% { transform: rotate(0deg); }
|
||||
50% { transform: rotate(8deg); }
|
||||
100% { transform: rotate(0deg); }
|
||||
}
|
||||
|
||||
@keyframes spring-bug-crawl-right {
|
||||
0% { left: -5%; }
|
||||
100% { left: 105%; }
|
||||
}
|
||||
|
||||
@keyframes spring-bug-crawl-left {
|
||||
0% { left: 105%; }
|
||||
100% { left: -5%; }
|
||||
}
|
||||
245
Jellyfin.Plugin.Seasonals/Web/spring.js
Normal file
245
Jellyfin.Plugin.Seasonals/Web/spring.js
Normal file
@@ -0,0 +1,245 @@
|
||||
const config = window.SeasonalsPluginConfig?.Spring || {};
|
||||
|
||||
const spring = config.EnableSpring !== undefined ? config.EnableSpring : true;
|
||||
const petalCount = config.PetalCount || 25;
|
||||
const pollenCount = config.PollenCount || 15;
|
||||
const ladybugCountConfig = config.LadybugCount || 5;
|
||||
const sunbeamCount = config.SunbeamCount || 5;
|
||||
|
||||
const randomSpring = config.EnableRandomSpring !== undefined ? config.EnableRandomSpring : true;
|
||||
const randomSpringMobile = config.EnableRandomSpringMobile !== undefined ? config.EnableRandomSpringMobile : false;
|
||||
const enableDifferentDuration = config.EnableDifferentDuration !== undefined ? config.EnableDifferentDuration : true;
|
||||
const enablePetals = config.EnableSpringPetals !== undefined ? config.EnableSpringPetals : true;
|
||||
const enableSunbeams = config.EnableSpringSunbeams !== undefined ? config.EnableSpringSunbeams : true;
|
||||
|
||||
let msgPrinted = false;
|
||||
|
||||
function toggleSpring() {
|
||||
const springContainer = document.querySelector('.spring-container');
|
||||
if (!springContainer) return;
|
||||
|
||||
const videoPlayer = document.querySelector('.videoPlayerContainer');
|
||||
const trailerPlayer = document.querySelector('.youtubePlayerContainer');
|
||||
const isDashboard = document.body.classList.contains('dashboardDocument');
|
||||
const hasUserMenu = document.querySelector('#app-user-menu');
|
||||
|
||||
if (videoPlayer || trailerPlayer || isDashboard || hasUserMenu) {
|
||||
springContainer.style.display = 'none';
|
||||
if (!msgPrinted) {
|
||||
console.log('Spring hidden');
|
||||
msgPrinted = true;
|
||||
}
|
||||
} else {
|
||||
springContainer.style.display = 'block';
|
||||
if (msgPrinted) {
|
||||
console.log('Spring visible');
|
||||
msgPrinted = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const observer = new MutationObserver(toggleSpring);
|
||||
observer.observe(document.body, { childList: true, subtree: true, attributes: true });
|
||||
|
||||
function createPetal(container) {
|
||||
if (!enablePetals) return;
|
||||
|
||||
const petal = document.createElement('div');
|
||||
petal.classList.add('spring-petal');
|
||||
|
||||
const type = Math.random() > 0.5 ? 'type1' : 'type2';
|
||||
petal.classList.add(type);
|
||||
|
||||
const color = Math.random() > 0.7 ? 'darker' : 'lighter';
|
||||
petal.classList.add(color);
|
||||
|
||||
const randomLeft = Math.random() * 100;
|
||||
petal.style.left = `${randomLeft}%`;
|
||||
|
||||
const size = Math.random() * 0.5 + 0.5;
|
||||
petal.style.transform = `scale(${size})`;
|
||||
|
||||
const duration = Math.random() * 5 + 8;
|
||||
const delay = Math.random() * 10;
|
||||
const swayDuration = Math.random() * 2 + 2;
|
||||
|
||||
if (enableDifferentDuration) {
|
||||
petal.style.animationDuration = `${duration}s, ${swayDuration}s`;
|
||||
}
|
||||
petal.style.animationDelay = `${delay}s, ${Math.random() * 3}s`;
|
||||
|
||||
container.appendChild(petal);
|
||||
}
|
||||
|
||||
function createPollen(container) {
|
||||
const pollen = document.createElement('div');
|
||||
pollen.classList.add('spring-pollen');
|
||||
|
||||
const startY = Math.random() * 60 + 20;
|
||||
pollen.style.top = `${startY}%`;
|
||||
pollen.style.left = `${Math.random() * 100}%`;
|
||||
|
||||
const size = Math.random() * 3 + 1;
|
||||
pollen.style.width = `${size}px`;
|
||||
pollen.style.height = `${size}px`;
|
||||
|
||||
const duration = Math.random() * 20 + 20;
|
||||
pollen.style.animationDuration = `${duration}s`;
|
||||
pollen.style.animationDelay = `-${Math.random() * 20}s`;
|
||||
|
||||
container.appendChild(pollen);
|
||||
}
|
||||
|
||||
function createSunbeam(container) {
|
||||
if (!enableSunbeams) return;
|
||||
|
||||
const beam = document.createElement('div');
|
||||
beam.classList.add('spring-sunbeam');
|
||||
|
||||
const left = Math.random() * 100; // Spread across full width
|
||||
beam.style.left = `${left}%`;
|
||||
|
||||
// Thinner beams as requested
|
||||
const width = Math.random() * 20 + 10; // 10-30px wide
|
||||
beam.style.width = `${width}px`;
|
||||
|
||||
const rotate = Math.random() * 20 - 10 + 45;
|
||||
beam.style.transform = `rotate(${rotate}deg)`;
|
||||
|
||||
const duration = Math.random() * 10 + 10;
|
||||
beam.style.animationDuration = `${duration}s`;
|
||||
beam.style.animationDelay = `-${Math.random() * 10}s`;
|
||||
|
||||
container.appendChild(beam);
|
||||
}
|
||||
|
||||
function createGrass(container) {
|
||||
let grassContainer = container.querySelector('.spring-grass-container');
|
||||
if (!grassContainer) {
|
||||
grassContainer = document.createElement('div');
|
||||
grassContainer.className = 'spring-grass-container';
|
||||
container.appendChild(grassContainer);
|
||||
}
|
||||
|
||||
// More grass: 1 blade every 3px (was 15px)
|
||||
const bladeCount = window.innerWidth / 3;
|
||||
for (let i = 0; i < bladeCount; i++) {
|
||||
const blade = document.createElement('div');
|
||||
blade.classList.add('spring-grass');
|
||||
|
||||
const height = Math.random() * 40 + 20; // 20-60px height
|
||||
blade.style.height = `${height}px`;
|
||||
blade.style.left = `${i * 3 + Math.random() * 2}px`;
|
||||
|
||||
const duration = Math.random() * 2 + 3;
|
||||
blade.style.animationDuration = `${duration}s`;
|
||||
blade.style.animationDelay = `-${Math.random() * 5}s`;
|
||||
|
||||
const hue = 100 + Math.random() * 40;
|
||||
blade.style.backgroundColor = `hsl(${hue}, 60%, 40%)`;
|
||||
|
||||
grassContainer.appendChild(blade);
|
||||
}
|
||||
|
||||
// Add Ladybugs
|
||||
const bugs = ladybugCountConfig;
|
||||
for (let i = 0; i < bugs; i++) {
|
||||
createLadybug(grassContainer);
|
||||
}
|
||||
}
|
||||
|
||||
function createLadybug(container) {
|
||||
const bug = document.createElement('div');
|
||||
bug.classList.add('spring-ladybug');
|
||||
|
||||
const direction = Math.random() > 0.5 ? 'right' : 'left';
|
||||
bug.classList.add(direction);
|
||||
|
||||
// Position lower (bottom of grass), but ensure visibility
|
||||
const bottomOffset = direction === 'right' ? Math.random() * 5 + 6 : Math.random() * 5 + 2;
|
||||
bug.style.bottom = `${bottomOffset}px`;
|
||||
|
||||
// Start position depends on direction
|
||||
if (direction === 'right') {
|
||||
bug.style.left = '-5%'; // Start off-screen left
|
||||
} else {
|
||||
bug.style.left = '105%'; // Start off-screen right
|
||||
}
|
||||
|
||||
const duration = Math.random() * 20 + 20; // Slow crawl
|
||||
bug.style.animationDuration = `${duration}s`;
|
||||
bug.style.animationDelay = `-${Math.random() * 20}s`;
|
||||
|
||||
container.appendChild(bug);
|
||||
}
|
||||
|
||||
function addRandomSpringObjects() {
|
||||
const container = document.querySelector('.spring-container');
|
||||
if (!container) return;
|
||||
|
||||
if (enablePetals) {
|
||||
for (let i = 0; i < petalCount; i++) {
|
||||
createPetal(container);
|
||||
}
|
||||
}
|
||||
|
||||
for (let i = 0; i < pollenCount; i++) {
|
||||
createPollen(container);
|
||||
}
|
||||
}
|
||||
|
||||
function initSpringObjects() {
|
||||
let container = document.querySelector('.spring-container');
|
||||
if (!container) {
|
||||
container = document.createElement("div");
|
||||
container.className = "spring-container";
|
||||
container.setAttribute("aria-hidden", "true");
|
||||
document.body.appendChild(container);
|
||||
}
|
||||
|
||||
createGrass(container);
|
||||
|
||||
if (enablePetals) {
|
||||
for (let i = 0; i < 15; i++) {
|
||||
const petal = document.createElement('div');
|
||||
petal.classList.add('spring-petal');
|
||||
const type = Math.random() > 0.5 ? 'type1' : 'type2';
|
||||
petal.classList.add(type);
|
||||
const color = Math.random() > 0.7 ? 'darker' : 'lighter';
|
||||
petal.classList.add(color);
|
||||
const randomLeft = Math.random() * 100;
|
||||
petal.style.left = `${randomLeft}%`;
|
||||
const size = Math.random() * 0.5 + 0.5;
|
||||
petal.style.transform = `scale(${size})`;
|
||||
|
||||
const duration = Math.random() * 5 + 8;
|
||||
const swayDuration = Math.random() * 2 + 2;
|
||||
|
||||
if (enableDifferentDuration) {
|
||||
petal.style.animationDuration = `${duration}s, ${swayDuration}s`;
|
||||
}
|
||||
petal.style.animationDelay = `-${Math.random() * 10}s, -${Math.random() * 3}s`;
|
||||
container.appendChild(petal);
|
||||
}
|
||||
}
|
||||
|
||||
if (enableSunbeams) {
|
||||
// Initial sunbeams
|
||||
for (let i = 0; i < sunbeamCount; i++) {
|
||||
createSunbeam(container);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function initializeSpring() {
|
||||
if (!spring) return;
|
||||
initSpringObjects();
|
||||
toggleSpring();
|
||||
|
||||
const screenWidth = window.innerWidth;
|
||||
if (randomSpring && (screenWidth > 768 || randomSpringMobile)) {
|
||||
addRandomSpringObjects();
|
||||
}
|
||||
}
|
||||
|
||||
initializeSpring();
|
||||
80
Jellyfin.Plugin.Seasonals/Web/summer.css
Normal file
80
Jellyfin.Plugin.Seasonals/Web/summer.css
Normal file
@@ -0,0 +1,80 @@
|
||||
.summer-container {
|
||||
display: block;
|
||||
position: fixed;
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.summer-bubble {
|
||||
position: fixed;
|
||||
bottom: -50px;
|
||||
z-index: 15;
|
||||
background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.1) 60%, rgba(255, 255, 255, 0.05));
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
|
||||
|
||||
will-change: transform, bottom;
|
||||
animation-name: summer-rise, summer-wobble;
|
||||
animation-timing-function: linear, ease-in-out;
|
||||
animation-iteration-count: infinite, infinite;
|
||||
animation-duration: 10s, 3s;
|
||||
}
|
||||
|
||||
.summer-dust {
|
||||
position: fixed;
|
||||
bottom: -10px;
|
||||
z-index: 12;
|
||||
background-color: rgba(255, 223, 186, 0.6);
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 5px rgba(255, 223, 186, 0.4);
|
||||
|
||||
will-change: transform, bottom;
|
||||
animation-name: summer-rise, summer-drift;
|
||||
animation-timing-function: linear, ease-in-out;
|
||||
animation-iteration-count: infinite, infinite;
|
||||
animation-duration: 20s, 5s;
|
||||
}
|
||||
|
||||
@keyframes summer-rise {
|
||||
0% {
|
||||
bottom: -10%;
|
||||
}
|
||||
100% {
|
||||
bottom: 110%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes summer-wobble {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
33% {
|
||||
transform: translateX(15px);
|
||||
}
|
||||
66% {
|
||||
transform: translateX(-15px);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes summer-drift {
|
||||
0% {
|
||||
transform: translateX(0) translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateX(30px) translateY(-20px);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0) translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
143
Jellyfin.Plugin.Seasonals/Web/summer.js
Normal file
143
Jellyfin.Plugin.Seasonals/Web/summer.js
Normal file
@@ -0,0 +1,143 @@
|
||||
const config = window.SeasonalsPluginConfig?.Summer || {};
|
||||
|
||||
const summer = config.EnableSummer !== undefined ? config.EnableSummer : true; // enable/disable summer
|
||||
const bubbleCount = config.BubbleCount || 20;
|
||||
const dustCount = config.DustCount || 50;
|
||||
const randomSummer = config.EnableRandomSummer !== undefined ? config.EnableRandomSummer : true; // enable random objects
|
||||
const randomSummerMobile = config.EnableRandomSummerMobile !== undefined ? config.EnableRandomSummerMobile : false; // enable random objects on mobile
|
||||
const enableDifferentDuration = config.EnableDifferentDuration !== undefined ? config.EnableDifferentDuration : true; // enable different animation duration
|
||||
|
||||
let msgPrinted = false;
|
||||
|
||||
function toggleSummer() {
|
||||
const summerContainer = document.querySelector('.summer-container');
|
||||
if (!summerContainer) return;
|
||||
|
||||
const videoPlayer = document.querySelector('.videoPlayerContainer');
|
||||
const trailerPlayer = document.querySelector('.youtubePlayerContainer');
|
||||
const isDashboard = document.body.classList.contains('dashboardDocument');
|
||||
const hasUserMenu = document.querySelector('#app-user-menu');
|
||||
|
||||
if (videoPlayer || trailerPlayer || isDashboard || hasUserMenu) {
|
||||
summerContainer.style.display = 'none';
|
||||
if (!msgPrinted) {
|
||||
console.log('Summer hidden');
|
||||
msgPrinted = true;
|
||||
}
|
||||
} else {
|
||||
summerContainer.style.display = 'block';
|
||||
if (msgPrinted) {
|
||||
console.log('Summer visible');
|
||||
msgPrinted = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const observer = new MutationObserver(toggleSummer);
|
||||
observer.observe(document.body, { childList: true, subtree: true, attributes: true });
|
||||
|
||||
function createBubble(container, isDust = false) {
|
||||
const bubble = document.createElement('div');
|
||||
|
||||
if (isDust) {
|
||||
bubble.classList.add('summer-dust');
|
||||
} else {
|
||||
bubble.classList.add('summer-bubble');
|
||||
}
|
||||
|
||||
// Random horizontal position
|
||||
const randomLeft = Math.random() * 100;
|
||||
bubble.style.left = `${randomLeft}%`;
|
||||
|
||||
// Random size
|
||||
if (!isDust) {
|
||||
const size = Math.random() * 20 + 10; // 10-30px bubbles
|
||||
bubble.style.width = `${size}px`;
|
||||
bubble.style.height = `${size}px`;
|
||||
} else {
|
||||
const size = Math.random() * 3 + 1; // 1-4px dust
|
||||
bubble.style.width = `${size}px`;
|
||||
bubble.style.height = `${size}px`;
|
||||
}
|
||||
|
||||
// Animation properties
|
||||
const duration = isDust ? (Math.random() * 20 + 10) : (Math.random() * 10 + 5); // Dust is slower
|
||||
const delay = Math.random() * 10;
|
||||
|
||||
if (enableDifferentDuration) {
|
||||
bubble.style.animationDuration = `${duration}s`;
|
||||
}
|
||||
bubble.style.animationDelay = `${delay}s`;
|
||||
|
||||
container.appendChild(bubble);
|
||||
}
|
||||
|
||||
function addRandomSummerObjects() {
|
||||
const container = document.querySelector('.summer-container');
|
||||
if (!container) return;
|
||||
|
||||
// Add bubbles
|
||||
for (let i = 0; i < bubbleCount; i++) {
|
||||
createBubble(container, false);
|
||||
}
|
||||
|
||||
// Add some dust particles (more of them, they are subtle)
|
||||
for (let i = 0; i < dustCount; i++) {
|
||||
createBubble(container, true);
|
||||
}
|
||||
}
|
||||
|
||||
function initSummerObjects() {
|
||||
let container = document.querySelector('.summer-container');
|
||||
if (!container) {
|
||||
container = document.createElement("div");
|
||||
container.className = "summer-container";
|
||||
container.setAttribute("aria-hidden", "true");
|
||||
document.body.appendChild(container);
|
||||
}
|
||||
|
||||
// Initial bubbles/dust
|
||||
for (let i = 0; i < 10; i++) {
|
||||
const bubble = document.createElement('div');
|
||||
const isDust = Math.random() > 0.5;
|
||||
if (isDust) {
|
||||
bubble.classList.add('summer-dust');
|
||||
} else {
|
||||
bubble.classList.add('summer-bubble');
|
||||
}
|
||||
|
||||
const randomLeft = Math.random() * 100;
|
||||
bubble.style.left = `${randomLeft}%`;
|
||||
|
||||
if (!isDust) {
|
||||
const size = Math.random() * 20 + 10;
|
||||
bubble.style.width = `${size}px`;
|
||||
bubble.style.height = `${size}px`;
|
||||
} else {
|
||||
const size = Math.random() * 3 + 1;
|
||||
bubble.style.width = `${size}px`;
|
||||
bubble.style.height = `${size}px`;
|
||||
}
|
||||
|
||||
const duration = isDust ? (Math.random() * 20 + 10) : (Math.random() * 10 + 5);
|
||||
if (enableDifferentDuration) {
|
||||
bubble.style.animationDuration = `${duration}s`;
|
||||
}
|
||||
|
||||
bubble.style.animationDelay = `-${Math.random() * 10}s`;
|
||||
container.appendChild(bubble);
|
||||
}
|
||||
}
|
||||
|
||||
function initializeSummer() {
|
||||
if (!summer) return;
|
||||
initSummerObjects();
|
||||
toggleSummer();
|
||||
|
||||
const screenWidth = window.innerWidth;
|
||||
if (randomSummer && (screenWidth > 768 || randomSummerMobile)) {
|
||||
addRandomSummerObjects();
|
||||
}
|
||||
}
|
||||
|
||||
initializeSummer();
|
||||
@@ -245,6 +245,9 @@
|
||||
<option value="autumn">Autumn</option>
|
||||
<option value="easter">Easter</option>
|
||||
<option value="resurrection">Resurrection</option>
|
||||
<option value="spring">Spring</option>
|
||||
<option value="summer">Summer (Bubbles)</option>
|
||||
<option value="carnival">Carnival (Confetti)</option>
|
||||
<option value="custom">⚙ Custom (Local Files)</option>
|
||||
</select>
|
||||
|
||||
@@ -327,6 +330,9 @@
|
||||
autumn: { css: 'autumn.css', js: 'autumn.js', container: 'autumn-container' },
|
||||
easter: { css: 'easter.css', js: 'easter.js', container: 'easter-container' },
|
||||
resurrection: { css: 'resurrection.css', js: 'resurrection.js', container: 'resurrection-container' },
|
||||
spring: { css: 'spring.css', js: 'spring.js', container: 'spring-container' },
|
||||
summer: { css: 'summer.css', js: 'summer.js', container: 'summer-container' },
|
||||
carnival: { css: 'carnival.css', js: 'carnival.js', container: 'carnival-container' },
|
||||
};
|
||||
|
||||
const select = document.getElementById('theme-select');
|
||||
@@ -352,7 +358,9 @@
|
||||
'.snowfall-container', '.snowflakes', '.snowstorm-container',
|
||||
'.fireworks', '.halloween-container', '.hearts-container',
|
||||
'.christmas-container', '.santa-container', '.autumn-container',
|
||||
'.easter-container', '.resurrection-container'
|
||||
'.christmas-container', '.santa-container', '.autumn-container',
|
||||
'.easter-container', '.resurrection-container', '.spring-container',
|
||||
'.summer-container', '.carnival-container'
|
||||
];
|
||||
knownContainers.forEach(sel => {
|
||||
document.querySelectorAll(sel).forEach(el => {
|
||||
|
||||
@@ -8,6 +8,14 @@
|
||||
"category": "General",
|
||||
"imageUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/Jellyfin-Seasonals-Plugin/raw/branch/main/logo.png",
|
||||
"versions": [
|
||||
{
|
||||
"version": "1.7.1.0",
|
||||
"changelog": "- feat: add summer, spring and carnival themes",
|
||||
"targetAbi": "10.11.0.0",
|
||||
"sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/Jellyfin-Seasonals-Plugin/releases/download/v1.7.1.0/Jellyfin.Plugin.Seasonals.zip",
|
||||
"checksum": "5f288972124771d1223484f75138f566",
|
||||
"timestamp": "2026-02-19T02:20:23Z"
|
||||
},
|
||||
{
|
||||
"version": "1.7.0.15",
|
||||
"changelog": "- feat: add customizable auto seasonal list via config page\n- feat: add new season theme 'resurrection' by Bioflash257",
|
||||
|
||||
Reference in New Issue
Block a user