jellyfin-plugin-mediacleaner/Jellyfin.Plugin.MediaCleaner/Pages/configuration.js

// Variables
var MediaCleanerConfig = {
    pluginUniqueId: 'fef007a8-3e8f-4aa8-a22e-486a387f4192'
};

// Fades
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);
};

const startFadeIn = (element, interval = 100) => {
  const timer = setInterval(() => {
    let currentOpacity = parseFloat(getComputedStyle(element).opacity);
    if (isNaN(currentOpacity)) currentOpacity = 0;
    if (currentOpacity < 1) {
      currentOpacity = Math.max(0, currentOpacity + 0.05);
      element.style.opacity = currentOpacity.toString();
    } else {
      clearInterval(timer);
    }
  }, interval);
};

// Connection Methods
const testConnectionSonarr = async () => {
    var apiKeyElement = document.getElementById('SonarrAPIKey');
    var addressElement = document.getElementById('SonarrAddress');
    var validationElement = document.getElementById('SonarrConnectionValidation');

    await validateConnection(apiKeyElement, addressElement, validationElement, "sonarr");
}

const testConnectionRadarr = async () => {
    var apiKeyElement = document.getElementById('RadarrAPIKey');
    var addressElement = document.getElementById('RadarrAddress');
    var validationElement = document.getElementById('RadarrConnectionValidation');

    await validateConnection(apiKeyElement, addressElement, validationElement, "radarr");
}

// Validation and Normalization
const normalizeUrl = (url) => {
    let normalizedUrl = url.trim();
    if (!/^https?:\/\//i.test(normalizedUrl)) {
        normalizedUrl = 'http://' + normalizedUrl;
    }
    return normalizedUrl;
};

const validateConnection = async (apiKeyElement, addressElement, validationElement, controller) => {
    var httpAddress = addressElement.value;
    var apiKey = apiKeyElement.value;

    console.log("Address: ", httpAddress);
    console.log("Api Key: ", apiKey);

    // Only valid with characters
    const validHttp = httpAddress.trim().length > 0;
    const validApiKey = apiKey.trim().length > 0;

    console.log("Valid Http: ", validHttp);
    console.log("Valid Api: ", validApiKey);

    var success = false;

    if(validHttp && validApiKey){
        setAttemptingConnection(validationElement);
        try{
            const url = normalizeUrl(httpAddress);
            // Move endpoint to a constant?
            const response = await fetch(`/${controller}/testConnection`, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({ address: url, apiKey })
            });

            if (response.ok) {
                const result = await response.json();
                success = result?.success === true;
            }
        }
        catch (error){
            console.error(`Error: ${error}`);
        }
    }

    processValidationElement(validationElement, success);
}

const setAttemptingConnection = (validationElement) => {
    validationElement.removeAttribute('hidden');
    validationElement.style.opacity = '0';

    validationElement.style.color = 'Yellow';
    validationElement.innerText = "Attempting Connection..."
    setTimeout(startFadeIn(validationElement, 50));
}

const processValidationElement = (validationElement, success) => {
    validationElement.removeAttribute('hidden');
    validationElement.style.opacity = '1';

    if(success){
        validationElement.style.color = 'Green';
        validationElement.innerText = "Successful Connection!"
    }
    else {
        validationElement.style.color = 'Red';
        validationElement.innerText = "Failed Connection!"
    }

    setTimeout(() => startFadeOut(validationElement, 50), 2000);
}

// Handlers
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('#RadarrAPIKey').value = config.RadarrAPIKey;
            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();
        });
    });

document.querySelector('#MediaCleanerConfigForm')
    .addEventListener('submit', function(e) {
    Dashboard.showLoadingMsg();
    ApiClient.getPluginConfiguration(MediaCleanerConfig.pluginUniqueId).then(function (config) {
        config.RadarrAPIKey = document.querySelector('#RadarrAPIKey').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) {
            Dashboard.processPluginConfigurationUpdateResult(result);
        });
    });

    e.preventDefault();
    return false;
});