CodeDevMLH/jellyfin-plugin-media-bar-enhanced
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 24 Wiki Activity

init
All checks were successful
Auto Release Plugin / build-and-release (push) Successful in 48s
Details

Browse Source
This commit is contained in:
CodeDevMLH
2026-01-06 02:17:48 +01:00
parent c35b86dd81
commit ba75b0175a
27 changed files with 6431 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
Jellyfin.Plugin.MediaBarEnhanced/Api/MediaBarEnhancedController.cs Normal file
View File

@@ -0,0 +1,76 @@
using System;
using System.Reflection;
using Microsoft.AspNetCore.Mvc;
using Jellyfin.Plugin.MediaBarEnhanced;
using Jellyfin.Plugin.MediaBarEnhanced.Configuration;
namespace Jellyfin.Plugin.MediaBarEnhanced.Api
{
/// <summary>
/// Controller for serving MediaBarEnhanced resources and configuration.
/// </summary>
[ApiController]
[Route("MediaBarEnhanced")]
public class MediaBarEnhancedController : ControllerBase
{
/// <summary>
/// Gets the current plugin configuration.
/// </summary>
/// <returns>The configuration object.</returns>
[HttpGet("Config")]
[Produces("application/json")]
public ActionResult<PluginConfiguration> GetConfig()
{
return MediaBarEnhancedPlugin.Instance?.Configuration ?? new PluginConfiguration();
}
/// <summary>
/// Serves embedded resources.
/// </summary>
/// <param name="path">The path to the resource.</param>
/// <returns>The resource file.</returns>
[HttpGet("Resources/{*path}")]
public ActionResult GetResource(string path)
{
// Sanitize path
if (string.IsNullOrWhiteSpace(path) || path.Contains("..", StringComparison.Ordinal))
{
return BadRequest();
}
var assembly = typeof(MediaBarEnhancedPlugin).Assembly;
var resourcePath = path.Replace('/', '.').Replace('\\', '.');
var resourceName = $"Jellyfin.Plugin.MediaBarEnhanced.Web.{resourcePath}";
var stream = assembly.GetManifestResourceStream(resourceName);
// if (stream == null)
// {
// // Try fallback/debug matching
// var allNames = assembly.GetManifestResourceNames();
// var match = Array.Find(allNames, n => n.EndsWith(resourcePath, StringComparison.OrdinalIgnoreCase));
// if (match != null)
// {
// stream = assembly.GetManifestResourceStream(match);
// }
// }
if (stream == null)
{
return NotFound($"Resource not found: {resourceName}");
}
var contentType = GetContentType(path);
return File(stream, contentType);
}
private string GetContentType(string path)
{
if (path.EndsWith(".js", StringComparison.OrdinalIgnoreCase)) return "application/javascript";
if (path.EndsWith(".css", StringComparison.OrdinalIgnoreCase)) return "text/css";
if (path.EndsWith(".html", StringComparison.OrdinalIgnoreCase)) return "text/html";
return "application/octet-stream";
}
}
}

37
Jellyfin.Plugin.MediaBarEnhanced/Configuration/PluginConfiguration.cs Normal file
View File

@@ -0,0 +1,37 @@
using MediaBrowser.Model.Plugins;
namespace Jellyfin.Plugin.MediaBarEnhanced.Configuration
{
/// <summary>
/// Plugin configuration.
/// </summary>
public class PluginConfiguration : BasePluginConfiguration
{
public int ShuffleInterval { get; set; } = 7000;
public int RetryInterval { get; set; } = 500;
public int MinSwipeDistance { get; set; } = 50;
public int LoadingCheckInterval { get; set; } = 100;
public int MaxPlotLength { get; set; } = 360;
public int MaxMovies { get; set; } = 15;
public int MaxTvShows { get; set; } = 15;
public int MaxItems { get; set; } = 500;
public int PreloadCount { get; set; } = 3;
public int FadeTransitionDuration { get; set; } = 500;
public int MaxPaginationDots { get; set; } = 15;
public bool SlideAnimationEnabled { get; set; } = true;
public bool EnableVideoBackdrop { get; set; } = true;
public bool UseSponsorBlock { get; set; } = true;
public bool WaitForTrailerToEnd { get; set; } = true;
public bool StartMuted { get; set; } = true;
public bool FullWidthVideo { get; set; } = true;
public bool EnableMobileVideo { get; set; } = false;
public bool ShowTrailerButton { get; set; } = true;
public bool EnableLoadingScreen { get; set; } = true;
public bool EnableKeyboardControls { get; set; } = true;
public bool AlwaysShowArrows { get; set; } = false;
public string CustomMediaIds { get; set; } = "";
public bool EnableCustomMediaIds { get; set; } = false;
public bool EnableSeasonalContent { get; set; } = false;
public bool IsEnabled { get; set; } = true;
}
}

431
Jellyfin.Plugin.MediaBarEnhanced/Configuration/configPage.html Normal file
View File

@@ -0,0 +1,431 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Media Bar Enhanced Configuration</title>
</head>
<body>
<div id="MediaBarEnhancedConfigurationPage" data-role="page" class="page type-interior pluginConfigurationPage"
data-require="emby-input,emby-button,emby-select,emby-checkbox,emby-textarea">
<div data-role="content">
<div class="content-primary">
<div class="sectionTitleContainer">
<h2 class="sectionTitle">Media Bar Enhanced</h2>
<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>
</a>
</div>
<hr style="max-width: 800px; margin: 1em 0;">
<div style="margin-bottom: 1.5em;">
<button class="jellyfin-tab-button active" onclick="showTab('basic', this)"
style="background: none; border: none; color: #fff; cursor: pointer; transition: color 0.3s, border-bottom 0.3s; padding: 0.5em 1em; border-bottom: 2px solid #00a4dc;">
<h3>General Settings</h3>
</button>
<button class="jellyfin-tab-button" onclick="showTab('custom', this)"
style="background: none; border: none; color: #ccc; cursor: pointer; transition: color 0.3s, border-bottom 0.3s; padding: 0.5em 1em; border-bottom: 2px solid transparent;">
<h3>Custom Content</h3>
</button>
<button class="jellyfin-tab-button" onclick="showTab('advanced', this)"
style="background: none; border: none; color: #ccc; cursor: pointer; transition: color 0.3s, border-bottom 0.3s; padding: 0.5em 1em; border-bottom: 2px solid transparent;">
<h3>Advanced Settings</h3>
</button>
</div>
<form id="mediaBarEnhancedConfigForm">
<!-- BASIC TAB -->
<div id="basic" class="tab-content">
<h2 class="sectionTitle">Main Plugin Settings</h2>
<div class="checkboxContainer checkboxContainer-withDescription">
<label>
<input is="emby-checkbox" type="checkbox" id="IsEnabled" name="IsEnabled" />
<span>Enable Media Bar Enhanced Plugin</span>
</label>
<div class="fieldDescription">Enable or disable the entire plugin functionality.</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label>
<input is="emby-checkbox" type="checkbox" id="EnableVideoBackdrop"
name="EnableVideoBackdrop" />
<span>Enable Video Backdrops</span>
</label>
<div class="fieldDescription">Show video trailers as background if available.<br>Adds a
mute/unmute and pause/play button to control the video in the right top corner.</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label>
<input is="emby-checkbox" type="checkbox" id="WaitForTrailerToEnd"
name="WaitForTrailerToEnd" />
<span>Wait For Trailer To End</span>
</label>
<div class="fieldDescription">Delay slide transition until trailer finishes.</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label>
<input is="emby-checkbox" type="checkbox" id="EnableMobileVideo"
name="EnableMobileVideo" />
<span>Enable Mobile Video</span>
</label>
<div class="fieldDescription">Allow video playback on mobile devices.</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label>
<input is="emby-checkbox" type="checkbox" id="ShowTrailerButton"
name="ShowTrailerButton" />
<span>Show Trailer Button</span>
</label>
<div class="fieldDescription">Display a button to open trailer in modal. Only visible if
trailer is not set as backdrop.</div>
</div>
</div>
<!-- CUSTOM CONTENT TAB -->
<div id="custom" class="tab-content" style="display:none;">
<h2 class="sectionTitle">Custom Media IDs</h2>
<div class="checkboxContainer checkboxContainer-withDescription">
<label>
<input is="emby-checkbox" type="checkbox" id="EnableCustomMediaIds"
name="EnableCustomMediaIds" />
<span>Enable Custom Media IDs</span>
</label>
<div class="fieldDescription">If enabled, the slideshow will ONLY show the items listed
below.</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label>
<input is="emby-checkbox" type="checkbox" id="EnableSeasonalContent"
name="EnableSeasonalContent" />
<span>Enable Seasonal Content Mode</span>
</label>
<div class="fieldDescription">Enable this to define time-based lists in the field below.
</div>
</div>
<div class="inputContainer">
<label class="inputLabel inputLabelUnfocused" for="CustomMediaIds">Media/Collection/Playlist
IDs
(Comma or Newline separated)</label>
<textarea is="emby-textarea" id="CustomMediaIds" name="CustomMediaIds"
style="width: 100%; height: 150px; font-family: monospace;"></textarea>
<div class="fieldDescription" id="customMediaIdsDesc">Enter the IDs of the items you want to
show in the slideshow.
You can separate them by comma or new line.</div>
<div class="fieldDescription" id="seasonalMediaIdsDesc" style="display: none;">
<b>Seasonal Mode Enabled:</b> Define lines with date ranges (Format: DD.MM-DD.MM |
<i>name</i> | <i>IDs</i>).<br>
Example:<br>
<code>20.10-31.10 | Halloween | ID1, ID2</code><br>
<code>01.12-26.12 | Christmas | ID3, ID4</code><br>
<i>Only lines matching the current date will be used. If no line matches, it will try to
fetch the list.txt or use random items.</i>
</div>
<p>You can find the IDs of your items in the URL of the item page in the web interface.<br>
Example:
<code>https://your-jellyfin-url/web/#/details?id=<b style="color:red;">your-item-id</b>&serverId=your-server-id</code><br>
You can also insert a name of a collection or playlist to fetch the IDs of all items in
it (will take the first hit. Note: there is currently no feedback if the name resolution
succeeded, you
will have to look if the bar displays the correct items.).
</p>
</div>
</div>
<!-- ADVANCED TAB -->
<div id="advanced" class="tab-content" style="display:none;">
<h2 class="sectionTitle">Features</h2>
<div class="checkboxContainer checkboxContainer-withDescription">
<label>
<input is="emby-checkbox" type="checkbox" id="SlideAnimationEnabled"
name="SlideAnimationEnabled" />
<span>Enable Slide Animations</span>
</label>
<div class="fieldDescription">Enable the zooming-in effect when a new slide is
shown. Attention: This may cause performance issues on weaker client hardware.</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label>
<input is="emby-checkbox" type="checkbox" id="UseSponsorBlock" name="UseSponsorBlock" />
<span>Use SponsorBlock</span>
</label>
<div class="fieldDescription">Skip intro/outro segments in YouTube trailers.</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label>
<input is="emby-checkbox" type="checkbox" id="StartMuted" name="StartMuted" />
<span>Start Muted</span>
</label>
<div class="fieldDescription">Start trailer video playback muted. (Known issue: In the
Android/IOS app, backdrop trailers are always muted.)</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label>
<input is="emby-checkbox" type="checkbox" id="FullWidthVideo" name="FullWidthVideo" />
<span>Full Width Video</span>
</label>
<div class="fieldDescription">Stretch video to full width. Very nice on desktops, on mobile
devices only the middle of the video is visible.<br>Disable to get the full aspect ratio
on
mobile devices. (looks bad on desktops)</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label>
<input is="emby-checkbox" type="checkbox" id="EnableLoadingScreen"
name="EnableLoadingScreen" />
<span>Enable Loading Screen</span>
</label>
<div class="fieldDescription">Show a loading screen while the slideshow initializes. (You
may have to reload the page twice)</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label>
<input is="emby-checkbox" type="checkbox" id="AlwaysShowArrows"
name="AlwaysShowArrows" />
<span>Always Show Arrows</span>
</label>
<div class="fieldDescription">If enabled, navigation arrows will always be visible instead
of only on hover.</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label>
<input is="emby-checkbox" type="checkbox" id="EnableKeyboardControls"
name="EnableKeyboardControls" />
<span>Enable Keyboard Controls</span>
</label>
<div class="fieldDescription">Enable keyboard shortcuts (Arrows left/right (change slide),
Space (pause), M (mute/unmute)) for
the slideshow.</div>
</div>
<h2 class="sectionTitle">Time Settings</h2>
<p>Leave a setting blank to use the default value.</p>
<div class="inputContainer">
<label class="inputLabel inputLabelUnfocused" for="ShuffleInterval">Shuffle Interval
(ms)</label>
<input is="emby-input" type="number" id="ShuffleInterval" name="ShuffleInterval" />
<div class="fieldDescription">Time in milliseconds between changing slides.</div>
</div>
<div class="inputContainer">
<label class="inputLabel inputLabelUnfocused" for="RetryInterval">Retry Interval
(ms)</label>
<input is="emby-input" type="number" id="RetryInterval" name="RetryInterval" />
<div class="fieldDescription">Time in milliseconds to wait before retrying failed
operations.</div>
</div>
<div class="inputContainer">
<label class="inputLabel inputLabelUnfocused" for="LoadingCheckInterval">Loading Check
Interval (ms)</label>
<input is="emby-input" type="number" id="LoadingCheckInterval"
name="LoadingCheckInterval" />
<div class="fieldDescription">Frequency of checking wether the login screen or home screen
has loaded (in milliseconds).</div>
</div>
<div class="inputContainer">
<label class="inputLabel inputLabelUnfocused" for="FadeTransitionDuration">Fade
Transition Duration (ms)</label>
<input is="emby-input" type="number" id="FadeTransitionDuration"
name="FadeTransitionDuration" />
<div class="fieldDescription">Duration in milliseconds of the transition between slides.
</div>
</div>
<div class="inputContainer">
<label class="inputLabel inputLabelUnfocused" for="MinSwipeDistance">Min Swipe Distance
(px)</label>
<input is="emby-input" type="number" id="MinSwipeDistance" name="MinSwipeDistance" />
<div class="fieldDescription">Minimum distance in pixels for a swipe to be registered (for
mobile).</div>
</div>
<h2 class="sectionTitle">Content Limits</h2>
<p>Leave a setting blank to use the default value.</p>
<div class="inputContainer">
<label class="inputLabel inputLabelUnfocused" for="MaxItems">Total Max Items</label>
<input is="emby-input" type="number" id="MaxItems" name="MaxItems" />
<div class="fieldDescription">Maximum total items to fetch (for all content types combined).
</div>
</div>
<div class="inputContainer">
<label class="inputLabel inputLabelUnfocused" for="MaxMovies">Max Movies</label>
<input is="emby-input" type="number" id="MaxMovies" name="MaxMovies" />
<div class="fieldDescription">Maximum movies to include in slideshow (for random selection).
</div>
</div>
<div class="inputContainer">
<label class="inputLabel inputLabelUnfocused" for="MaxTvShows">Max TV Shows</label>
<input is="emby-input" type="number" id="MaxTvShows" name="MaxTvShows" />
<div class="fieldDescription">Maximum TV shows to include in slideshow (for random
selection).</div>
</div>
<div class="inputContainer">
<label class="inputLabel inputLabelUnfocused" for="PreloadCount">Preload Count</label>
<input is="emby-input" type="number" id="PreloadCount" name="PreloadCount" />
<div class="fieldDescription">Number of images to preload.</div>
</div>
<div class="inputContainer">
<label class="inputLabel inputLabelUnfocused" for="MaxPaginationDots">Max Pagination
Dots</label>
<input is="emby-input" type="number" id="MaxPaginationDots" name="MaxPaginationDots" />
<div class="fieldDescription">Maximum number of dots to show in navigation. If the number
will be exceeded, the dots will "turn" into a counter style (e.g. 1/100). Set to 0 to
enable counter style directly.</div>
</div>
<div class="inputContainer">
<label class="inputLabel inputLabelUnfocused" for="MaxPlotLength">Max Plot
Length</label>
<input is="emby-input" type="number" id="MaxPlotLength" name="MaxPlotLength" />
<div class="fieldDescription">Maximum characters for the plot summary.</div>
</div>
</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;">
<i class="material-icons" style="color: #00a4dc; font-size: 24px;">info</i>
<div>
All changes require a page refresh (ctrl + r or F5) after saving for changes to take effect.
<br />
If old settings persist, please force clear browser cache.
</div>
</div>
<div>
<button is="emby-button" type="submit" class="raised button-submit block emby-button">
<span>${Save}</span>
</button>
<button is="emby-button" type="button" class="raised button-cancel block btnCancel"
onclick="history.back();">
<span>${ButtonCancel}</span>
</button>
</div>
</form>
</div>
</div>
<script>
function showTab(tabId, btn) {
document.querySelectorAll('.tab-content').forEach(el => el.style.display = 'none');
document.getElementById(tabId).style.display = 'block';
document.querySelectorAll('.jellyfin-tab-button').forEach(b => {
b.classList.remove('active');
b.style.color = '#ccc';
b.style.borderBottom = '2px solid transparent';
});
if (btn) {
btn.classList.add('active');
btn.style.color = '#fff';
btn.style.borderBottom = '2px solid #00a4dc';
}
}
var MediaBarEnhancedConfigurationPage = {
pluginId: 'd7e11d57-819b-4bdd-a88d-53c5f5560225',
loadConfiguration: function (page) {
Dashboard.showLoadingMsg();
ApiClient.getPluginConfiguration(MediaBarEnhancedConfigurationPage.pluginId).then(function (config) {
var keys = [
'IsEnabled', 'ShuffleInterval', 'RetryInterval', 'MinSwipeDistance',
'LoadingCheckInterval', 'MaxPlotLength', 'MaxMovies', 'MaxTvShows',
'MaxItems', 'PreloadCount', 'FadeTransitionDuration', 'MaxPaginationDots',
'SlideAnimationEnabled', 'EnableVideoBackdrop', 'UseSponsorBlock',
'WaitForTrailerToEnd', 'StartMuted', 'FullWidthVideo', 'EnableMobileVideo',
'ShowTrailerButton', 'AlwaysShowArrows', 'EnableKeyboardControls',
'EnableCustomMediaIds', 'CustomMediaIds', 'EnableLoadingScreen',
'EnableSeasonalContent'
];
keys.forEach(function (key) {
var el = page.querySelector('#' + key);
if (el) {
if (el.type === 'checkbox') {
el.checked = config[key];
} else {
el.value = config[key];
}
}
});
// Handle Seasonal UI logic
var seasonalCheckbox = page.querySelector('#EnableSeasonalContent');
var normalDesc = page.querySelector('#customMediaIdsDesc');
var seasonalDesc = page.querySelector('#seasonalMediaIdsDesc');
function updateDesc() {
if (seasonalCheckbox && seasonalCheckbox.checked) {
if (normalDesc) normalDesc.style.display = 'none';
if (seasonalDesc) seasonalDesc.style.display = 'block';
} else {
if (normalDesc) normalDesc.style.display = 'block';
if (seasonalDesc) seasonalDesc.style.display = 'none';
}
}
if (seasonalCheckbox) {
seasonalCheckbox.addEventListener('change', updateDesc);
updateDesc();
}
Dashboard.hideLoadingMsg();
});
},
saveConfiguration: function (page) {
Dashboard.showLoadingMsg();
var config = {};
var keys = [
'IsEnabled', 'ShuffleInterval', 'RetryInterval', 'MinSwipeDistance',
'LoadingCheckInterval', 'MaxPlotLength', 'MaxMovies', 'MaxTvShows',
'MaxItems', 'PreloadCount', 'FadeTransitionDuration', 'MaxPaginationDots',
'SlideAnimationEnabled', 'EnableVideoBackdrop', 'UseSponsorBlock',
'WaitForTrailerToEnd', 'StartMuted', 'FullWidthVideo', 'EnableMobileVideo',
'ShowTrailerButton', 'AlwaysShowArrows', 'EnableKeyboardControls',
'EnableCustomMediaIds', 'CustomMediaIds', 'EnableLoadingScreen',
'EnableSeasonalContent'
];
keys.forEach(function (key) {
var el = page.querySelector('#' + key);
if (el) {
if (el.type === 'checkbox') {
config[key] = el.checked;
} else {
config[key] = (el.type === 'number') ? parseInt(el.value, 10) : el.value;
}
}
});
ApiClient.updatePluginConfiguration(MediaBarEnhancedConfigurationPage.pluginId, config).then(function (result) {
Dashboard.processPluginConfigurationUpdateResult(result);
});
}
};
document.querySelector('#MediaBarEnhancedConfigurationPage').addEventListener('pageshow', function () {
MediaBarEnhancedConfigurationPage.loadConfiguration(this);
});
document.querySelector('#mediaBarEnhancedConfigForm').addEventListener('submit', function (e) {
e.preventDefault();
MediaBarEnhancedConfigurationPage.saveConfiguration(document.querySelector('#MediaBarEnhancedConfigurationPage'));
return false;
});
</script>
<style>
.jellyfin-tab-button.active {
color: #fff !important;
border-bottom: 2px solid #00a4dc !important;
}
</style>
</div>
</body>
</html>

58
Jellyfin.Plugin.MediaBarEnhanced/Helpers/TransformationPatches.cs Normal file
View File

@@ -0,0 +1,58 @@
using System;
using Jellyfin.Plugin.MediaBarEnhanced.Model;
namespace Jellyfin.Plugin.MediaBarEnhanced.Helpers
{
public static class TransformationPatches
{
public static string IndexHtml(PatchRequestPayload payload)
{
// Always return original content if something fails or is null
string? originalContents = payload?.Contents;
if (string.IsNullOrEmpty(originalContents))
{
return originalContents ?? string.Empty;
}
try
{
// Safety Check: If plugin is disabled, do nothing
if (!MediaBarEnhancedPlugin.Instance.Configuration.IsEnabled)
{
return originalContents;
}
// Use StringBuilder for efficient modification (conceptually similar to stream processing)
var builder = new System.Text.StringBuilder(originalContents);
// Inject Script if missing
if (!originalContents.Contains(ScriptInjector.ScriptTag))
{
var scriptIndex = originalContents.LastIndexOf(ScriptInjector.ScriptMarker, StringComparison.OrdinalIgnoreCase);
if (scriptIndex != -1)
{
builder.Insert(scriptIndex, ScriptInjector.ScriptTag + Environment.NewLine);
}
}
// Inject CSS if missing
if (!originalContents.Contains(ScriptInjector.CssTag))
{
var cssIndex = originalContents.LastIndexOf(ScriptInjector.CssMarker, StringComparison.OrdinalIgnoreCase);
if (cssIndex != -1)
{
builder.Insert(cssIndex, ScriptInjector.CssTag + Environment.NewLine);
}
}
return builder.ToString();
}
catch
{
// On error, return original content to avoid breaking the UI
return originalContents;
}
}
}
}

35
Jellyfin.Plugin.MediaBarEnhanced/Jellyfin.Plugin.MediaBarEnhanced.csproj Normal file
View File

@@ -0,0 +1,35 @@
<Project Sdk="Microsoft.NET.Sdk">
<PropertyGroup>
<JellyfinVersion>10.11.0</JellyfinVersion>
<TargetFramework Condition="$(JellyfinVersion.StartsWith('10.11'))">net9.0</TargetFramework>
<TargetFramework Condition="!$(JellyfinVersion.StartsWith('10.11'))">net8.0</TargetFramework>
<RootNamespace>Jellyfin.Plugin.MediaBarEnhanced</RootNamespace>
<Nullable>enable</Nullable>
<!-- <AnalysisMode>AllEnabledByDefault</AnalysisMode> -->
<!-- <CodeAnalysisRuleSet>../jellyfin.ruleset</CodeAnalysisRuleSet> -->
<!-- <GenerateDocumentationFile>true</GenerateDocumentationFile> -->
<!-- <TreatWarningsAsErrors>false</TreatWarningsAsErrors> -->
<Title>Jellyfin Media Bar Enhanced Plugin</Title>
<Authors>CodeDevMLH</Authors>
<Version>1.5.0.0</Version>
<RepositoryUrl>https://git.mahom03-spacecloud.de/CodeDevMLH/Media-Bar-Plugin</RepositoryUrl>
</PropertyGroup>
<ItemGroup>
<PackageReference Include="Jellyfin.Controller" Version="$(JellyfinVersion)" />
<PackageReference Include="Jellyfin.Model" Version="$(JellyfinVersion)" />
<PackageReference Include="Newtonsoft.Json" Version="13.0.4" />
</ItemGroup>
<ItemGroup>
<None Remove="Configuration\configPage.html" />
<EmbeddedResource Include="Configuration\configPage.html" />
<None Remove="Web\**" />
<EmbeddedResource Include="Web\**\*" />
<None Include="..\README.md" />
<None Include="..\logo.png" CopyToOutputDirectory="Always" />
</ItemGroup>
</Project>

87
Jellyfin.Plugin.MediaBarEnhanced/MediaBarEnhancedPlugin.cs Normal file
View File

@@ -0,0 +1,87 @@
using System;
using System.Collections.Generic;
using System.Globalization;
using Jellyfin.Plugin.MediaBarEnhanced.Configuration;
using MediaBrowser.Common.Configuration;
using MediaBrowser.Common.Plugins;
using MediaBrowser.Model.Plugins;
using MediaBrowser.Model.Serialization;
using Microsoft.Extensions.Logging;
namespace Jellyfin.Plugin.MediaBarEnhanced
{
/// <summary>
/// The main plugin.
/// </summary>
public class MediaBarEnhancedPlugin : BasePlugin<PluginConfiguration>, IHasWebPages
{
private readonly ScriptInjector _scriptInjector;
private readonly ILoggerFactory _loggerFactory;
public IServiceProvider ServiceProvider { get; }
/// <summary>
/// Initializes a new instance of the <see cref="MediaBarEnhancedPlugin"/> class.
/// </summary>
/// <param name="applicationPaths">Instance of the <see cref="IApplicationPaths"/> interface.</param>
/// <param name="xmlSerializer">Instance of the <see cref="IXmlSerializer"/> interface.</param>
/// <param name="loggerFactory">Instance of the <see cref="ILoggerFactory"/> interface.</param>
public MediaBarEnhancedPlugin(IApplicationPaths applicationPaths, IXmlSerializer xmlSerializer, ILoggerFactory loggerFactory)
: base(applicationPaths, xmlSerializer)
{
Instance = this;
_loggerFactory = loggerFactory;
_scriptInjector = new ScriptInjector(applicationPaths, loggerFactory.CreateLogger<ScriptInjector>());
if (Configuration.IsEnabled)
{
_scriptInjector.Inject();
}
else
{
_scriptInjector.Remove();
}
}
/// <inheritdoc />
public override void UpdateConfiguration(BasePluginConfiguration configuration)
{
var oldConfig = Configuration;
base.UpdateConfiguration(configuration);
if (Configuration.IsEnabled && !oldConfig.IsEnabled)
{
_scriptInjector.Inject();
}
else if (!Configuration.IsEnabled && oldConfig.IsEnabled)
{
_scriptInjector.Remove();
}
}
/// <inheritdoc />
public override string Name => "Media Bar";
/// <inheritdoc />
public override Guid Id => Guid.Parse("d7e11d57-819b-4bdd-a88d-53c5f5560225");
/// <summary>
/// Gets the current plugin instance.
/// </summary>
public static MediaBarEnhancedPlugin? Instance { get; private set; }
/// <inheritdoc />
public IEnumerable<PluginPageInfo> GetPages()
{
return
[
new PluginPageInfo
{
Name = Name,
EnableInMainMenu = true,
EmbeddedResourcePath = string.Format(CultureInfo.InvariantCulture, "{0}.Configuration.configPage.html", GetType().Namespace)
}
];
}
}
}

10
Jellyfin.Plugin.MediaBarEnhanced/Model/PatchRequestPayload.cs Normal file
View File

@@ -0,0 +1,10 @@
using System.Text.Json.Serialization;
namespace Jellyfin.Plugin.MediaBarEnhanced.Model
{
public class PatchRequestPayload
{
[JsonPropertyName("contents")]
public string? Contents { get; set; }
}
}

240
Jellyfin.Plugin.MediaBarEnhanced/ScriptInjector.cs Normal file
View File

@@ -0,0 +1,240 @@
using System;
using System.Reflection;
using System.IO;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Loader;
using Microsoft.Extensions.Logging;
using Newtonsoft.Json.Linq;
using MediaBrowser.Common.Configuration;
using Jellyfin.Plugin.MediaBarEnhanced.Helpers;
namespace Jellyfin.Plugin.MediaBarEnhanced
{
/// <summary>
/// Handles the injection of the MediaBarEnhanced script into the Jellyfin web interface.
/// </summary>
public class ScriptInjector
{
private readonly IApplicationPaths _appPaths;
private readonly ILogger<ScriptInjector> _logger;
public const string ScriptTag = "<script src=\"/MediaBarEnhanced/Resources/slideshowpure.js\" defer></script>";
public const string CssTag = "<link rel=\"stylesheet\" href=\"/MediaBarEnhanced/Resources/slideshowpure.css\" />";
// private const string ScriptTag = "<script src=\"/MediaBarEnhanced/Resources/media-bar.js\" defer></script>";
// private const string CssTag = "<link rel=\"stylesheet\" href=\"/MediaBarEnhanced/Resources/media-bar.css\">";
public const string ScriptMarker = "</body>";
public const string CssMarker = "</head>";
/// <summary>
/// Initializes a new instance of the <see cref="ScriptInjector"/> class.
/// </summary>
/// <param name="appPaths">The application paths.</param>
/// <param name="logger">The logger.</param>
public ScriptInjector(IApplicationPaths appPaths, ILogger<ScriptInjector> logger)
{
_appPaths = appPaths;
_logger = logger;
}
/// <summary>
/// Injects the script tag into index.html if it's not already present.
/// </summary>
/// <returns>True if injection was successful or already present, false otherwise.</returns>
public void Inject()
{
try
{
var webPath = GetWebPath();
if (string.IsNullOrEmpty(webPath))
{
_logger.LogWarning("Could not find Jellyfin web path. Script injection skipped. Attempting fallback.");
RegisterFileTransformation();
return;
}
var indexPath = Path.Combine(webPath, "index.html");
if (!File.Exists(indexPath))
{
_logger.LogWarning("index.html not found at {Path}. Script injection skipped. Attempting fallback.", indexPath);
RegisterFileTransformation();
return;
}
var content = File.ReadAllText(indexPath);
var injectedJS = false;
var injectedCSS = false;
if (!content.Contains(ScriptTag))
{
var index = content.IndexOf(ScriptMarker, StringComparison.OrdinalIgnoreCase);
if (index != -1)
{
content = content.Insert(index, ScriptTag + Environment.NewLine);
injectedJS = true;
}
}
if (!content.Contains(CssTag))
{
var index = content.IndexOf(CssMarker, StringComparison.OrdinalIgnoreCase);
if (index != -1)
{
content = content.Insert(index, CssTag + Environment.NewLine);
injectedCSS = true;
}
}
if (injectedJS && injectedCSS)
{
File.WriteAllText(indexPath, content);
_logger.LogInformation("MediaBarEnhanced script injected into index.html.");
} else if (injectedJS)
{
File.WriteAllText(indexPath, content);
_logger.LogInformation("MediaBarEnhanced JS script injected into index.html. But CSS was already present or could not be injected.");
}
else if (injectedCSS)
{
File.WriteAllText(indexPath, content);
_logger.LogInformation("MediaBarEnhanced CSS injected into index.html. But JS script was already present or could not be injected.");
}
else
{
_logger.LogInformation("MediaBarEnhanced script and CSS already present in index.html. Or could not be injected.");
}
}
catch (Exception ex)
{
_logger.LogError(ex, "Error injecting MediaBarEnhanced resources. Attempting fallback.");
RegisterFileTransformation();
}
}
/// <summary>
/// Removes the script tag from index.html.
/// </summary>
public void Remove()
{
UnregisterFileTransformation();
try
{
var webPath = GetWebPath();
if (string.IsNullOrEmpty(webPath))
{
return;
}
var indexPath = Path.Combine(webPath, "index.html");
if (!File.Exists(indexPath))
{
return;
}
var content = File.ReadAllText(indexPath);
var modified = false;
if (content.Contains(ScriptTag))
{
content = content.Replace(ScriptTag + Environment.NewLine, "").Replace(ScriptTag, "");
modified = true;
}
if (content.Contains(CssTag))
{
content = content.Replace(CssTag + Environment.NewLine, "").Replace(CssTag, "");
modified = true;
}
if (modified)
{
File.WriteAllText(indexPath, content);
_logger.LogInformation("MediaBarEnhanced script removed from index.html.");
}
}
catch (Exception ex)
{
_logger.LogError(ex, "Error removing MediaBarEnhanced script.");
}
}
private string? GetWebPath()
{
var prop = _appPaths.GetType().GetProperty("WebPath", BindingFlags.Instance | BindingFlags.Public);
return prop?.GetValue(_appPaths) as string;
}
private void RegisterFileTransformation()
{
_logger.LogInformation("MediaBarEnhanced Fallback. Registering file transformations.");
List<JObject> payloads = new List<JObject>();
{
JObject payload = new JObject();
// Random GUID for ID
payload.Add("id", "0dfac9d7-d898-4944-900b-1c1837707279");
payload.Add("fileNamePattern", "index.html");
payload.Add("callbackAssembly", GetType().Assembly.FullName);
payload.Add("callbackClass", typeof(TransformationPatches).FullName);
payload.Add("callbackMethod", nameof(TransformationPatches.IndexHtml));
payloads.Add(payload);
}
Assembly? fileTransformationAssembly =
AssemblyLoadContext.All.SelectMany(x => x.Assemblies).FirstOrDefault(x =>
x.FullName?.Contains(".FileTransformation") ?? false);
if (fileTransformationAssembly != null)
{
Type? pluginInterfaceType = fileTransformationAssembly.GetType("Jellyfin.Plugin.FileTransformation.PluginInterface");
if (pluginInterfaceType != null)
{
foreach (JObject payload in payloads)
{
pluginInterfaceType.GetMethod("RegisterTransformation")?.Invoke(null, new object?[] { payload });
}
_logger.LogInformation("File transformations registered successfully.");
}
else
{
_logger.LogWarning("FileTransformation plugin found but PluginInterface type missing.");
}
}
else
{
_logger.LogWarning("FileTransformation plugin assembly not found. Fallback failed.");
}
}
private void UnregisterFileTransformation()
{
try
{
Assembly? fileTransformationAssembly =
AssemblyLoadContext.All.SelectMany(x => x.Assemblies).FirstOrDefault(x =>
x.FullName?.Contains(".FileTransformation") ?? false);
if (fileTransformationAssembly != null)
{
Type? pluginInterfaceType = fileTransformationAssembly.GetType("Jellyfin.Plugin.FileTransformation.PluginInterface");
if (pluginInterfaceType != null)
{
// The ID must match the one used in RegisterFileTransformation
Guid id = Guid.Parse("0dfac9d7-d898-4944-900b-1c1837707279");
pluginInterfaceType.GetMethod("RemoveTransformation")?.Invoke(null, new object?[] { id });
_logger.LogInformation("File transformation unregistered successfully.");
}
}
}
catch (Exception ex)
{
// Log but don't throw, as we want to continue with normal removal
_logger.LogWarning(ex, "Error attempting to unregister file transformation. It might not have been registered.");
}
}
}
}

948
Jellyfin.Plugin.MediaBarEnhanced/Web/slideshowpure.css Normal file
View File

@@ -0,0 +1,948 @@
/*
* Jellyfin Slideshow by M0RPH3US v3.0.6
* Modified by CodeDevMLH v1.1.0.0
*
* New features:
* - optional Trailer background video support
* - option to make video backdrops full width
* - SponsorBlock support to skip intro/outro segments
* - option to always show arrows
* - option to disable/enable keyboard controls
* - option to show/hide trailer button if trailer as backdrop is disabled (opens in a modal)
* - option to wait for trailer to end before loading next slide
* - option to set a maximum for the pagination dots (will turn into a counter style if exceeded)
* - option to disable loading screen
* - option to put collection (boxsets) IDs into the slideshow to display their items
*/
@import url(https://fonts.googleapis.com/css2?family=Archivo+Narrow:ital,wght@0,400..700;1,400..700&display=swap);
.backdrop.animate {
animation:
frostedGlass 1.2s cubic-bezier(0.4, 0, 0.2, 1),
kenBurnsZoomIn 10s ease-out forwards;
}
.logo.animate {
animation: frostedGlass 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes frostedGlass {
from {
filter: blur(8px);
opacity: 0.7;
}
to {
filter: blur(0);
opacity: 1;
}
}
@keyframes kenBurnsZoomIn {
from {
transform: scale(1);
}
to {
transform: scale(1.1);
}
}
.bar-loading {
z-index: 99999999 !important;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: #000;
display: flex;
align-items: center;
justify-content: center;
opacity: 1;
transition: opacity 0.3s ease-in-out;
overflow: hidden;
/*will-change: opacity;*/
}
.bar-loading.hide {
opacity: 0;
}
.loader-content {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
width: 250px;
height: auto;
}
.bar-loading h1 {
width: 250px;
margin: 0 auto;
height: 250px;
display: flex;
justify-content: center;
align-items: center;
}
.bar-loading h1 div {
width: 250px;
max-height: 250px;
display: block;
object-fit: contain;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.progress-container {
width: 200px;
height: 6px;
display: flex;
align-items: center;
position: relative;
}
.progress-bar {
height: 5px;
background: white;
border-radius: 2px;
transition: width 0.2s ease-in-out;
}
.progress-gap {
width: 6px;
height: 5px;
background: transparent;
flex-shrink: 0;
}
.unfilled-bar {
height: 5px;
background: #686868;
border-radius: 2px;
flex-grow: 1;
transition: width 0.2s ease-in-out;
}
.backdrop.low-quality {
filter: blur(0.5px);
transform: scale(1.01);
transition:
filter 0.3s ease-in-out,
transform 0.3s ease-in-out;
}
.backdrop.high-quality {
filter: blur(0);
transform: scale(1);
transition:
filter 0.3s ease-in-out,
transform 0.3s ease-in-out;
}
.logo.low-quality {
filter: brightness(1) blur(0.5px);
transition: filter 0.3s ease-in-out;
}
.logo.high-quality {
filter: brightness(1.1) blur(0);
transition: filter 0.3s ease-in-out;
}
.homeSectionsContainer {
position: relative;
top: 65vh;
z-index: 6;
}
#slides-container {
position: relative;
width: 100vw;
height: 90%;
overflow: hidden;
margin: 0 auto;
}
.arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 24px;
cursor: pointer;
color: #fff;
z-index: 5;
width: 40px;
height: 40px;
border-radius: 50%;
display: block;
text-align: center;
-webkit-tap-highlight-color: #fff0;
transition: background-color 0.3s ease, transform 0.2s ease;
user-select: none;
margin: 0;
padding: 0;
}
.arrow i {
display: block;
font-size: 24px;
line-height: 40px;
width: 100%;
height: 100%;
text-align: center;
margin: 0;
padding: 0;
}
.arrow:hover {
background-color: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(4px);
transform: translateY(-50%) scale(1.1);
}
.left-arrow {
left: 20px;
}
.right-arrow {
right: 20px;
}
.pause-button {
position: absolute;
top: 5rem;
right: 0.8rem;
cursor: pointer;
color: white;
z-index: 10;
opacity: 0.3;
transition: opacity 0.3s ease;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}
.pause-button i {
font-size: 1.5rem;
}
.pause-button:hover {
opacity: 0.9;
}
@media (max-width: 1599px) {
.pause-button {
top: 8rem;
}
.pause-button i {
font-size: 2rem;
}
}
@media (max-width: 768px) {
.pause-button i {
font-size: 2.5rem;
}
}
.mute-button {
position: absolute;
top: 5rem;
right: 3.5rem;
cursor: pointer;
color: white;
z-index: 10;
opacity: 0.3;
transition: opacity 0.3s ease;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}
.mute-button i {
font-size: 1.5rem;
}
.mute-button:hover {
opacity: 0.9;
}
@media (max-width: 1599px) {
.mute-button {
top: 8rem;
}
.mute-button i {
font-size: 2rem;
}
}
@media (max-width: 768px) {
.mute-button i {
font-size: 2.5rem;
}
}
.dots-container {
position: absolute;
top: calc(50% + 18vh);
right: 3%;
z-index: 5;
display: flex;
justify-content: center;
align-items: center;
width: auto;
height: auto;
transition: opacity 0.3s ease-in-out;
}
.dot {
display: inline-block;
width: 0.5em;
height: 0.5em;
margin: 0 5px;
background-color: #cecece99;
border-radius: 50%;
transform-origin: center;
transition:
transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
background-color 0.5s ease-in-out;
}
.dot.active {
background-color: #fff;
transform: scale(1.7);
}
.slide {
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: opacity 0.5s ease-in-out;
z-index: 0;
}
.slide.active {
opacity: 1;
z-index: 1;
}
.backdrop-container {
position: absolute;
top: 0%;
right: 0%;
width: 100%;
height: 100%;
mask-image: linear-gradient(to top,
#fff0 2%,
rgb(0 0 0 / 0.5) 6%,
#000000 8%);
-webkit-mask-image: linear-gradient(to top,
#fff0 2%,
rgb(0 0 0 / 0.5) 6%,
#000000 8%);
}
.backdrop-container.full-width-video {
overflow: hidden;
mask-image: linear-gradient(to top,
#fff0 0%,
#fff0 10%,
#000 25%);
-webkit-mask-image: linear-gradient(to top,
#fff0 0%,
#fff0 10%,
#000 25%);
}
.backdrop {
right: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 20%;
border-radius: 5px;
z-index: 3;
mask-image: linear-gradient(to top,
#fff0 2%,
rgb(0 0 0 / 0.5) 6%,
#000000 8%);
-webkit-mask-image: linear-gradient(to top,
#fff0 2%,
rgb(0 0 0 / 0.5) 6%,
#000000 8%);
}
.backdrop-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.2);
border-radius: 5px;
z-index: 4;
mask-image: linear-gradient(to top,
#fff0 2%,
rgb(0 0 0 / 0.5) 4%,
#000000 6%);
-webkit-mask-image: linear-gradient(to top,
#fff0 2%,
rgb(0 0 0 / 0.5) 4%,
#000000 6%);
}
.gradient-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(130deg,
rgba(29, 29, 29, 0.65) 10%,
rgba(29, 29, 29, 0.35) 30%,
rgba(29, 29, 29, 0) 100%);
z-index: 4;
mask-image: linear-gradient(to top,
#fff0 2%,
rgb(0 0 0 / 0.5) 4%,
#000000 6%);
-webkit-mask-image: linear-gradient(to top,
#fff0 2%,
rgb(0 0 0 / 0.5) 4%,
#000000 6%);
}
.gradient-overlay.full-width-video {
z-index: 4;
mask-image: linear-gradient(to top,
#fff0 0%,
#fff0 10%,
#000 25%);
-webkit-mask-image: linear-gradient(to top,
#fff0 0%,
#fff0 10%,
#000 25%);
}
.logo-container {
width: 40%;
height: 35%;
position: relative;
display: flex;
align-items: center;
z-index: 5;
top: 15vh;
left: 4vw;
}
.logo {
max-height: 70%;
max-width: 100%;
height: auto;
width: auto;
object-fit: contain;
filter: brightness(1.5);
font-size: 4rem;
}
.plot-container {
position: absolute;
top: calc(50% + 8vh);
color: #fff;
height: 15%;
width: 90%;
left: 4vw;
z-index: 5;
display: flex;
align-items: flex-start;
justify-content: flex-start;
text-align: justify;
box-sizing: border-box;
}
.plot {
display: -webkit-box;
line-clamp: 2;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.genre {
display: flex;
gap: 5px;
align-items: center;
justify-content: center;
position: absolute;
top: calc(50% + 4vh);
left: 4vw;
text-align: center;
color: #fff;
font-family: "Archivo Narrow", sans-serif;
z-index: 5;
flex-wrap: wrap;
}
.button-container {
position: absolute;
top: calc(50% + 17vh);
left: 4vw;
display: flex;
z-index: 5;
justify-content: space-between;
gap: 15px;
}
.play-button,
.trailer-button {
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 8px 16px;
border: solid 0px rgba(255, 255, 255, 0);
font-family: "Archivo Narrow", sans-serif;
font-size: 18px;
white-space: nowrap;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 700;
gap: 6px;
-webkit-tap-highlight-color: #fff0;
border-radius: 8px;
}
.detail-button {
font-size: 18px;
color: rgb(0, 0, 0);
border-radius: 50%;
height: 50px;
width: 50px;
border: none;
cursor: pointer;
transition: color 0.2s;
-webkit-tap-highlight-color: #fff0;
}
.favorite-button {
font-size: 18px;
color: red;
border-radius: 50%;
height: 50px;
width: 50px;
border: none;
cursor: pointer;
transition: color 0.2s;
-webkit-tap-highlight-color: #fff0;
}
.favorite-button.favorited {
color: red;
}
.favorite-button::before {
content: "favorite_outline";
font-family: "Material Icons";
}
.favorite-button.favorited::before {
content: "favorite";
font-family: "Material Icons";
}
.play-button::before {
content: "play_arrow";
font-family: "Material Icons";
}
.detail-button::before {
content: "info_outline";
font-family: "Material Icons";
}
.play-button::before,
.detail-button::before,
.favorite-button::before,
.favorite-button.favorited::before {
font-weight: 600;
display: inline-block;
font-size: 22px;
color: inherit;
vertical-align: middle;
}
.play-button:hover,
.detail-button:hover,
.favorite-button:hover,
.trailer-button:hover {
opacity: 0.8;
}
.info-container {
position: absolute;
top: calc(50% + 0vh);
display: flex;
align-items: center;
justify-content: center;
left: 4vw;
color: #fff;
z-index: 5;
align-content: center;
flex-wrap: wrap;
font-weight: 500;
}
.misc-info {
font-family: "Archivo Narrow", sans-serif;
display: flex;
align-items: center;
z-index: 5;
position: relative;
gap: 10px;
}
.runTime {
font-family: "Archivo Narrow", sans-serif;
display: flex;
align-items: center;
align-content: center;
justify-content: center;
flex-wrap: wrap;
font-weight: 500;
}
/* Star Icon Styling */
.community-rating-star {
color: #f2b01e;
font-size: 1.4em;
height: auto !important;
margin-right: 0.125em;
width: auto !important;
}
.star-rating-container {
display: flex;
align-items: center;
}
/* Rotten Tomatoes Critic Rating Styles */
.critic-rating {
-webkit-align-items: center;
align-items: center;
display: flex;
min-height: 1.2em;
gap: 0.25em;
}
/**/
.age-rating {
display: flex;
align-items: center;
border-radius: 5px;
background: rgb(255 255 255 / 0.8);
color: #000;
border: none;
font-weight: 600;
white-space: nowrap;
padding: 0 0.5em;
}
.date {
font-family: "Archivo Narrow", sans-serif;
font-weight: 500;
display: flex;
align-items: center;
flex-wrap: wrap;
align-content: center;
justify-content: center;
}
.separator-icon {
font-size: 10px;
color: aquamarine;
}
.featured-content {
display: none;
}
/*Portrait-Modes Phone*/
@media only screen and (max-width: 767px) and (orientation: portrait) {
.plot-container {
display: none;
}
.backdrop-container {
position: absolute;
right: 0%;
width: 100%;
height: 100%;
}
.backdrop {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 20%;
z-index: 3;
mask-image: linear-gradient(to top,
#fff0 2%,
rgb(0 0 0 / 0.5) 6%,
#000000 8%);
-webkit-mask-image: linear-gradient(to top,
#fff0 2%,
rgb(0 0 0 / 0.5) 6%,
#000000 8%);
}
.gradient-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgb(0 0 0 / 0.25);
z-index: 4;
pointer-events: none;
mask-image: linear-gradient(to top,
#fff0 2%,
rgb(0 0 0 / 0.5) 6%,
#000000 8%);
-webkit-mask-image: linear-gradient(to top,
#fff0 2%,
rgb(0 0 0 / 0.5) 6%,
#000000 8%);
}
.dots-container {
top: calc(50% + 20vh);
left: 50%;
transform: translateX(-50%) scale(0.8);
background-color: #ffffff00;
}
.dot.active {
transform: scale(1.6);
}
.genre {
top: calc(50% + 15vh);
left: 50%;
width: 100%;
transform: translateX(-50%);
}
.info-container {
top: calc(50% + 10vh);
left: 50%;
transform: translateX(-50%);
width: 95%;
}
.button-container {
top: calc(50% + 25vh);
left: 50%;
transform: translateX(-50%) scale(0.95);
}
.logo {
position: absolute;
top: 50%;
left: 50%;
max-height: 60%;
max-width: 100%;
width: auto;
z-index: 5;
filter: brightness(1.5);
transform: translate(-50%, -50%);
transition: filter 0.3s ease;
}
.logo-container {
width: 75%;
height: 25%;
position: relative;
display: flex;
align-items: start;
z-index: 5;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
/*Landscape Mode Phones*/
@media only screen and (max-height: 767px) and (orientation: landscape) {
#slides-container {
height: 100%;
}
.homeSectionsContainer {
top: 57vh;
}
.button-container {
left: 3vw;
transform: scale(0.85);
}
.dots-container {
scale: 0.6;
}
.info-container {
top: calc(50% + -10vh);
}
.plot-container {
top: calc(50% + 6vh);
}
.genre {
top: calc(50% + -1vh);
}
.logo-container {
height: 30%;
top: 10%;
}
.logo-container,
.info-container,
.genre,
.plot-container {
left: 5vw;
}
}
@media only screen and (min-width: 2560px) {
.button-container {
top: calc(50% + 15vh);
}
.dots-container {
top: calc(50% + 15vh);
}
}
/* Video Modal Styles */
#video-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}
.modal-close-button {
position: absolute;
top: 20px;
right: 20px;
background: transparent;
border: none;
color: white;
font-size: 2rem;
cursor: pointer;
z-index: 10000;
}
.video-modal-content {
width: 80%;
height: 80%;
position: relative;
max-width: 1280px;
max-height: 720px;
}
#modal-yt-player,
.video-modal-player {
width: 100%;
height: 100%;
}
.video-modal-player {
object-fit: contain;
}
@media (orientation: portrait) {
.video-modal-content {
width: 95%;
height: auto;
aspect-ratio: 16/9;
}
}
@media (orientation: landscape) {
.video-modal-content {
height: 95%;
width: auto;
aspect-ratio: 16/9;
max-width: 95%;
}
}
/* Video Backdrop Styles */
.video-backdrop {
pointer-events: none;
object-fit: cover;
}
.video-backdrop-default {
width: 100%;
height: 100%;
}
.video-backdrop-full {
width: 100vw;
height: 56.25vw;
min-height: 100vh;
min-width: 177.77vh;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* Slide Counter Styling */
.slide-counter {
font-family: "Archivo Narrow", sans-serif;
color: #fff;
font-size: 1.2rem;
font-weight: 600;
letter-spacing: 1px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
background: rgba(0, 0, 0, 0.4);
padding: 5px 16px;
border-radius: 30px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.15);
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
text-align: center;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.dots-container .slide-counter {
margin: 0;
}

2865
Jellyfin.Plugin.MediaBarEnhanced/Web/slideshowpure.js Normal file
View File

File diff suppressed because it is too large Load Diff