From 462a2beea18060ff85e9d223abeb64a8a1648eb0 Mon Sep 17 00:00:00 2001
From: Thomas Gander <thomas@silverhat.ca>
Date: Mon, 16 Feb 2026 16:08:12 -0700
Subject: [PATCH] Moved styles to a global.css stylesheet. Also added basic
 validation with a transition

---
 Jellyfin.Plugin.MediaCleaner/Configuration.cs | 18 ++---
 .../Pages/configuration.html                  | 51 +++++++++-----
 .../Pages/configuration.js                    | 69 ++++++++++++++++---
 .../Pages/{home.css => global.css}            | 19 +++++
 Jellyfin.Plugin.MediaCleaner/Pages/home.html  |  2 +-
 Jellyfin.Plugin.MediaCleaner/Plugin.cs        |  4 +-
 6 files changed, 119 insertions(+), 44 deletions(-)
 rename Jellyfin.Plugin.MediaCleaner/Pages/{home.css => global.css} (72%)

diff --git a/Jellyfin.Plugin.MediaCleaner/Configuration.cs b/Jellyfin.Plugin.MediaCleaner/Configuration.cs
index dd7dadb..e32c0b4 100644
--- a/Jellyfin.Plugin.MediaCleaner/Configuration.cs
+++ b/Jellyfin.Plugin.MediaCleaner/Configuration.cs
@@ -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.
diff --git a/Jellyfin.Plugin.MediaCleaner/Pages/configuration.html b/Jellyfin.Plugin.MediaCleaner/Pages/configuration.html
index 335b48e..7100e76 100644
--- a/Jellyfin.Plugin.MediaCleaner/Pages/configuration.html
+++ b/Jellyfin.Plugin.MediaCleaner/Pages/configuration.html
@@ -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>
diff --git a/Jellyfin.Plugin.MediaCleaner/Pages/configuration.js b/Jellyfin.Plugin.MediaCleaner/Pages/configuration.js
index 7e70fcc..f1696c4 100644
--- a/Jellyfin.Plugin.MediaCleaner/Pages/configuration.js
+++ b/Jellyfin.Plugin.MediaCleaner/Pages/configuration.js
@@ -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) {
diff --git a/Jellyfin.Plugin.MediaCleaner/Pages/home.css b/Jellyfin.Plugin.MediaCleaner/Pages/global.css
similarity index 72%
rename from Jellyfin.Plugin.MediaCleaner/Pages/home.css
rename to Jellyfin.Plugin.MediaCleaner/Pages/global.css
index 023848d..b6e3bbc 100644
--- a/Jellyfin.Plugin.MediaCleaner/Pages/home.css
+++ b/Jellyfin.Plugin.MediaCleaner/Pages/global.css
@@ -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%;
+}
diff --git a/Jellyfin.Plugin.MediaCleaner/Pages/home.html b/Jellyfin.Plugin.MediaCleaner/Pages/home.html
index 1a614a6..3553396 100644
--- a/Jellyfin.Plugin.MediaCleaner/Pages/home.html
+++ b/Jellyfin.Plugin.MediaCleaner/Pages/home.html
@@ -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>
diff --git a/Jellyfin.Plugin.MediaCleaner/Plugin.cs b/Jellyfin.Plugin.MediaCleaner/Plugin.cs
index 4ce13d4..cd4bc5c 100644
--- a/Jellyfin.Plugin.MediaCleaner/Plugin.cs
+++ b/Jellyfin.Plugin.MediaCleaner/Plugin.cs
@@ -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),
             }
         ];
     }