T-Gander/jellyfin-plugin-mediacleaner
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases 15 Wiki Activity

Moved styles to a global.css stylesheet. Also added basic validation with a transition

Browse Source
This commit is contained in:
Thomas Gander
2026-02-16 16:08:12 -07:00
parent a720bba7a7
commit 462a2beea1
6 changed files with 119 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
Jellyfin.Plugin.MediaCleaner/Configuration.cs
View File

@@ -11,14 +11,9 @@ namespace Jellyfin.Plugin.MediaCleaner;
public class Configuration : BasePluginConfiguration
{
/// <summary>
/// Gets or sets the http address for your Radarr instance.
/// Gets or sets the http and port address for your Radarr instance.
/// </summary>
public string RadarrHTTPAddress { get; set; } = string.Empty;
/// <summary>
/// Gets or sets the port for your Radarr instance.
/// </summary>
public string RadarrPort { get; set; } = string.Empty;
public string RadarrAddress { get; set; } = string.Empty;
/// <summary>
/// Gets or sets the api for your Radarr instance.
@@ -26,14 +21,9 @@ public class Configuration : BasePluginConfiguration
public string RadarrAPIKey { get; set; } = string.Empty;
/// <summary>
/// Gets or sets the http address for your Sonarr instance.
/// Gets or sets the http and port address for your Sonarr instance.
/// </summary>
public string SonarrHTTPAddress { get; set; } = string.Empty;
/// <summary>
/// Gets or sets the port for your Sonarr instance.
/// </summary>
public string SonarrPort { get; set; } = string.Empty;
public string SonarrAddress { get; set; } = string.Empty;
/// <summary>
/// Gets or sets the api for your Sonarr instance.

51
Jellyfin.Plugin.MediaCleaner/Pages/configuration.html
View File

@@ -1,49 +1,62 @@
<div id="MediaCleanerConfigPage" data-role="page" class="page type-interior pluginConfigurationPage" data-require="emby-input,emby-button,emby-select,emby-checkbox" data-controller="__plugin/configuration.js">
<div data-role="content">
<div class="content-primary">
<link rel="stylesheet" href="/web/configurationpage?name=global.css" />
<form id="MediaCleanerConfigForm">
<h2>Media Cleaner Configuration</h2>
<div class="inputContainer">
<label class="inputLabel inputLabelUnfocused" for="RadarrHTTPAddress">Radarr Address (http)</label>
<input id="RadarrHTTPAddress" name="RadarrHTTPAddress" type="text" is="emby-input" />
<div class="fieldDescription">The http address of your radarr instance.</div>
</div>
<div class="inputContainer">
<label class="inputLabel inputLabelUnfocused" for="RadarrPort">Radarr Port</label>
<input id="RadarrPort" name="RadarrPort" type="text" is="emby-input" />
<div class="fieldDescription">The port of your radarr instance.</div>
</div>
<div class="inputContainer">
<label class="inputLabel inputLabelUnfocused" for="RadarrAPIKey">Radarr API Key</label>
<input id="RadarrAPIKey" name="RadarrAPIKey" type="text" is="emby-input" />
<input id="RadarrAPIKey" class="medium-width" name="RadarrAPIKey" type="text" is="emby-input" />
<div class="fieldDescription">The api key used by your radarr instance</div>
</div>
<div class="inputContainer">
<label class="inputLabel inputLabelUnfocused" for="SonarrHTTPAddress">Sonarr Address (http)</label>
<input id="SonarrHTTPAddress" name="SonarrHTTPAddress" type="text" is="emby-input" />
<div class="fieldDescription">The http address of your sonarr instance.</div>
<label class="inputLabel inputLabelUnfocused" for="RadarrAddress">Radarr Address (http:port)</label>
<input id="RadarrAddress" class="small-width" name="RadarrAddress" type="text" is="emby-input" />
<div class="fieldDescription">The address and port of your radarr instance.</div>
</div>
<div class="inputContainer">
<label class="inputLabel inputLabelUnfocused" for="SonarrPort">Sonarr Port</label>
<input id="SonarrPort" name="SonarrPort" type="text" is="emby-input" />
<div class="fieldDescription">The port of your sonarr instance.</div>
<button id="RadarrTestConnectionButton" is="emby-button" type="button" class="raised button-submit emby-button small-width">
<span>Test Connection</span>
</button>
</div>
<div class="inputContainer validation hidden medium-width" id="RadarrConnectionValidation" hidden>
</div>
<div class="inputContainer">
<label class="inputLabel inputLabelUnfocused" for="SonarrAPIKey">Sonarr API Key</label>
<input id="SonarrAPIKey" name="SonarrAPIKey" type="text" is="emby-input" />
<input id="SonarrAPIKey" class="medium-width" name="SonarrAPIKey" type="text" is="emby-input" />
<div class="fieldDescription">The api key used by your sonarr instance</div>
</div>
<div class="inputContainer">
<label class="inputLabel inputLabelUnfocused" for="SonarrAddress">Sonarr Address (http:port)</label>
<input id="SonarrAddress" class="small-width" name="SonarrAddress" type="text" is="emby-input" />
<div class="fieldDescription">The address and port of your sonarr instance.</div>
</div>
<div class="inputContainer">
<button id="SonarrTestConnectionButton" is="emby-button" type="button" class="raised button-submit emby-button small-width">
<span>Test Connection</span>
</button>
</div>
<div class="inputContainer validation hidden medium-width" id="SonarrConnectionValidation" hidden>
</div>
<div class="inputContainer">
<label class="inputLabel inputLabelUnfocused" for="StaleMediaCutoff">Stale Media Cutoff</label>
<input id="StaleMediaCutoff" name="StaleMediaCutoff" type="number" is="emby-input" style="width: 20%;"/>
<input id="StaleMediaCutoff" class="xsmall-width" name="StaleMediaCutoff" type="number" is="emby-input"/>
<div class="fieldDescription">How many days to wait before marking files as stale</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription">
<label class="emby-checkbox-label">
<input id="DebugMode" name="DebugMode" type="checkbox" is="emby-checkbox" />
<span>Debug Mode</span>
</label>
</div>
<div>
<button is="emby-button" type="submit" class="raised button-submit block emby-button">
<span>Save</span>

69
Jellyfin.Plugin.MediaCleaner/Pages/configuration.js
View File

@@ -2,16 +2,71 @@ var MediaCleanerConfig = {
pluginUniqueId: 'fef007a8-3e8f-4aa8-a22e-486a387f4192'
};
const testConnectionSonarr = () => {
var apiKeyElement = document.getElementById('SonarrAPIKey');
var addressElement = document.getElementById('SonarrAddress');
var validationElement = document.getElementById('SonarrConnectionValidation');
validateConnection(apiKeyElement, addressElement, validationElement);
}
const testConnectionRadarr = () => {
var apiKeyElement = document.getElementById('RadarrAPIKey');
var addressElement = document.getElementById('RadarrAddress');
var validationElement = document.getElementById('RadarrConnectionValidation');
validateConnection(apiKeyElement, addressElement, validationElement);
}
const validateConnection = (apiKeyElement, addressElement, validationElement) => {
// Refactor this to a method called show element?
validationElement.removeAttribute('hidden');
validationElement.style.opacity = '1';
console.log("Api Key: ", apiKeyElement.value);
console.log("Address: ", addressElement.value);
var success = false;
if(success){
validationElement.style.color = 'Green';
validationElement.innerText = "Success!"
}
else {
validationElement.style.color = 'Red';
validationElement.innerText = "Failed!"
}
setTimeout(() => startFadeOut(validationElement, 50), 1000);
}
const startFadeOut = (element, interval = 100) => {
const timer = setInterval(() => {
let currentOpacity = parseFloat(getComputedStyle(element).opacity);
if (isNaN(currentOpacity)) currentOpacity = 1;
if (currentOpacity > 0) {
currentOpacity = Math.max(0, currentOpacity - 0.05);
element.style.opacity = currentOpacity.toString();
} else {
clearInterval(timer);
element.setAttribute('hidden', '');
}
}, interval);
};
document.querySelector('#RadarrTestConnectionButton')
.addEventListener('click', testConnectionRadarr);
document.querySelector('#SonarrTestConnectionButton')
.addEventListener('click', testConnectionSonarr);
document.querySelector('#MediaCleanerConfigPage')
.addEventListener('pageshow', function() {
Dashboard.showLoadingMsg();
ApiClient.getPluginConfiguration(MediaCleanerConfig.pluginUniqueId).then(function (config) {
document.querySelector('#RadarrHTTPAddress').value = config.RadarrHTTPAddress;
document.querySelector('#RadarrPort').value = config.RadarrPort;
document.querySelector('#RadarrAPIKey').value = config.RadarrAPIKey;
document.querySelector('#SonarrHTTPAddress').value = config.SonarrHTTPAddress;
document.querySelector('#SonarrPort').value = config.SonarrPort;
document.querySelector('#RadarrAddress').value = config.RadarrAddress;
document.querySelector('#SonarrAPIKey').value = config.SonarrAPIKey;
document.querySelector('#SonarrAddress').value = config.SonarrAddress;
document.querySelector('#StaleMediaCutoff').value = config.StaleMediaCutoff;
document.querySelector('#DebugMode').checked = config.DebugMode;
Dashboard.hideLoadingMsg();
@@ -22,12 +77,10 @@ document.querySelector('#MediaCleanerConfigForm')
.addEventListener('submit', function(e) {
Dashboard.showLoadingMsg();
ApiClient.getPluginConfiguration(MediaCleanerConfig.pluginUniqueId).then(function (config) {
config.RadarrHTTPAddress = document.querySelector('#RadarrHTTPAddress').value;
config.RadarrPort = document.querySelector('#RadarrPort').value;
config.RadarrAPIKey = document.querySelector('#RadarrAPIKey').value;
config.SonarrHTTPAddress = document.querySelector('#SonarrHTTPAddress').value;
config.SonarrPort = document.querySelector('#SonarrPort').value;
config.RadarrAddress = document.querySelector('#RadarrAddress').value;
config.SonarrAPIKey = document.querySelector('#SonarrAPIKey').value;
config.SonarrAddress = document.querySelector('#SonarrAddress').value;
config.StaleMediaCutoff = document.querySelector('#StaleMediaCutoff').value;
config.DebugMode = document.querySelector('#DebugMode').checked;
ApiClient.updatePluginConfiguration(MediaCleanerConfig.pluginUniqueId, config).then(function (result) {

19
Jellyfin.Plugin.MediaCleaner/Pages/home.css → Jellyfin.Plugin.MediaCleaner/Pages/global.css
View File

@@ -29,3 +29,22 @@ td, th {
.actions-cell {
text-align: center;
}
.validation {
border: 1px solid;
border-radius: 0.25rem;
padding: 1rem;
opacity: 1;
}
.medium-width {
width: 50%;
}
.small-width {
width: 20%;
}
.xsmall-width {
width: 10%;
}

2
Jellyfin.Plugin.MediaCleaner/Pages/home.html
View File

@@ -2,7 +2,7 @@
data-controller="__plugin/home.js">
<div data-role="content">
<div class="content-primary">
<link rel="stylesheet" href="/web/configurationpage?name=home.css" />
<link rel="stylesheet" href="/web/configurationpage?name=global.css" />
<div id="loading">Loading...</div>
<div id="homepage" style="visibility: hidden;">
<button class="links" data-target="configurationpage?name=Configuration">Configuration</button>

4
Jellyfin.Plugin.MediaCleaner/Plugin.cs
View File

@@ -63,8 +63,8 @@ public class Plugin : BasePlugin<Configuration>, IHasWebPages
},
new PluginPageInfo
{
Name = "home.css",
EmbeddedResourcePath = string.Format(CultureInfo.InvariantCulture, "{0}.Pages.home.css", GetType().Namespace),
Name = "global.css",
EmbeddedResourcePath = string.Format(CultureInfo.InvariantCulture, "{0}.Pages.global.css", GetType().Namespace),
}
];
}