Updated styling for the configuration page

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;
+    public string RadarrAddress { get; set; } = string.Empty;
-
-    /// <summary>
-    /// Gets or sets the port for your Radarr instance.
-    /// </summary>
-    public string RadarrPort { 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;
+    public string SonarrAddress { get; set; } = string.Empty;
-
-    /// <summary>
-    /// Gets or sets the port for your Sonarr instance.
-    /// </summary>
-    public string SonarrPort { get; set; } = string.Empty;
 
     /// <summary>
     /// Gets or sets the api for your Sonarr instance.

Jellyfin.Plugin.MediaCleaner/Pages/configuration.html

@@ -1,49 +1,68 @@
 <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>
+                <h3>Management Configuration</h3>
-                    <input id="RadarrHTTPAddress" name="RadarrHTTPAddress" type="text" is="emby-input" />
+
-                    <div class="fieldDescription">The http address of your radarr instance.</div>
+                <div class="inlineContainer">
-                </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" />
                         <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>
+                        <label class="inputLabel inputLabelUnfocused" for="RadarrAddress">Radarr Address (http:port)</label>
-                    <input id="SonarrHTTPAddress" name="SonarrHTTPAddress" type="text" is="emby-input" />
+                        <input id="RadarrAddress" name="RadarrAddress" type="text" is="emby-input" />
-                    <div class="fieldDescription">The http address of your sonarr instance.</div>
+                        <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>
+                        <button id="RadarrTestConnectionButton" is="emby-button" type="button" class="raised button-submit block emby-button">
-                    <input id="SonarrPort" name="SonarrPort" type="text" is="emby-input" />
+                            <span>Test</span>
-                    <div class="fieldDescription">The port of your sonarr instance.</div>
+                        </button>
+                        <div class="validation" id="RadarrConnectionValidation" hidden>
                         </div>
+                    </div>
+                </div>
+
+                <div class="inlineContainer">
                     <div class="inputContainer">
                         <label class="inputLabel inputLabelUnfocused" for="SonarrAPIKey">Sonarr API Key</label>
                         <input id="SonarrAPIKey" 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" 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 block emby-button">
+                            <span>Test</span>
+                        </button>
+                        <div class="validation" id="SonarrConnectionValidation" hidden>
+                        </div>
+                    </div>
+                </div>
+
+                <h3>General Settings</h3>
+                <div class="inlineContainer">
                     <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="medium-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>
+
                 <div>
                     <button is="emby-button" type="submit" class="raised button-submit block emby-button">
                         <span>Save</span>

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('#RadarrAddress').value = config.RadarrAddress;
-            document.querySelector('#SonarrPort').value = config.SonarrPort;
             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.RadarrAddress = document.querySelector('#RadarrAddress').value;
-        config.SonarrPort = document.querySelector('#SonarrPort').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) {

Jellyfin.Plugin.MediaCleaner/Pages/global.css

@@ -0,0 +1,71 @@
+.content-primary > * {
+    box-sizing: border-box;
+}
+
+.inlineContainer {
+    display: inline-flex;
+    margin-bottom: 1.8em;
+    flex-direction: column;
+    /* Would be nice to figure out why 50% doesn't work. */
+    width: 49%;
+}
+
+.inlineContainer > * {
+    padding: 0 0.5rem;
+}
+
+table {
+    border: 1px solid;
+    border-collapse: collapse;
+}
+
+td, th {
+    border: 1px solid;
+    padding: 0.5rem 0.75rem;
+    text-align: left;
+}
+
+.links {
+    background-color: #0f0f0f;
+    border: 1px solid;
+    padding: 0.8rem 1.8rem;
+    font-size: 1.2rem;
+    color: #ffffff;
+    text-decoration: none;
+    cursor: pointer;
+    line-height: inherit;
+    vertical-align: baseline;
+    transition: background-color 0.3s ease;
+}
+
+.links:hover {
+  background-color: #2a2a2a;
+}
+
+.actions-cell {
+    text-align: center;
+}
+
+.validation {
+  border: 1px solid;
+  border-radius: 0.25rem;
+  margin-top: 1rem;
+  padding: 1rem;
+  opacity: 1;
+}
+
+.max-width{
+    width: 100%;
+}
+
+.medium-width {
+    width: 50%;
+}
+
+.small-width {
+    width: 20%;
+}
+
+.xsmall-width {
+    width: 10%;
+}

Jellyfin.Plugin.MediaCleaner/Pages/home.css

@@ -1,31 +0,0 @@
-table {
-    border: 1px solid;
-    border-collapse: collapse;
-}
-
-td, th {
-    border: 1px solid;
-    padding: 0.5rem 0.75rem;
-    text-align: left;
-}
-
-.links {
-    background-color: #0f0f0f;
-    border: 1px solid;
-    padding: 0.8rem 1.8rem;
-    font-size: 1.2rem;
-    color: #ffffff;
-    text-decoration: none;
-    cursor: pointer;
-    line-height: inherit;
-    vertical-align: baseline;
-    transition: background-color 0.3s ease;
-}
-
-.links:hover {
-  background-color: #2a2a2a;
-}
-
-.actions-cell {
-    text-align: center;
-}

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>

Jellyfin.Plugin.MediaCleaner/Plugin.cs

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