Merge pull request #231 from dkanada/plugin

Improve the plugin catalog and related controllers
2025-03-30 19:56:21 +00:00 · 2019-04-09 00:33:22 -04:00 · 2019-04-09 00:33:22 -04:00 · 00dab1b88c
commit 00dab1b88c
parent da96b1120c eb469bd1da
8 changed files with 172 additions and 179 deletions
--- a/src/availableplugins.html
+++ b/src/availableplugins.html
@ -0,0 +1,8 @@
+<div id="pluginCatalogPage" data-role="page" class="page type-interior pluginConfigurationPage withTabs fullWidthContent">
+    <div>
+        <div class="content-primary">
+            <div id="noPlugins" class="hide">${MessageNoAvailablePlugins}</div>
+            <div id="pluginTiles" style="text-align:left;"></div>
+        </div>
+    </div>
+</div>
--- a/src/controllers/addpluginpage.js
+++ b/src/controllers/addpluginpage.js
@ -2,32 +2,40 @@ define(["jQuery", "loading", "libraryMenu", "globalize", "connectionManager", "e
    "use strict";

    function populateHistory(packageInfo, page) {
-        for (var html = "", i = 0, length = Math.min(packageInfo.versions.length, 10); i < length; i++) {
+        var html = "";
+        var length = Math.min(packageInfo.versions.length, 10);
+        for (var i = 0; i < length; i++) {
            var version = packageInfo.versions[i];
-            html += '<h2 style="margin:.5em 0;">' + version.versionStr + " (" + version.classification + ")</h2>", html += '<div style="margin-bottom:1.5em;">' + version.description + "</div>"
+            html += '<h2 style="margin:.5em 0;">' + version.versionStr + " (" + version.classification + ")</h2>";
+            html += '<div style="margin-bottom:1.5em;">' + version.description + "</div>";
        }
-        $("#revisionHistory", page).html(html)
+        $("#revisionHistory", page).html(html);
    }

    function populateVersions(packageInfo, page, installedPlugin) {
-        for (var html = "", i = 0, length = packageInfo.versions.length; i < length; i++) {
+        var html = "";
+        for (var i = 0; i < packageInfo.versions.length; i++) {
            var version = packageInfo.versions[i];
-            html += '<option value="' + version.versionStr + "|" + version.classification + '">' + version.versionStr + " (" + version.classification + ")</option>"
+            html += '<option value="' + version.versionStr + "|" + version.classification + '">' + version.versionStr + " (" + version.classification + ")</option>";
        }
        var selectmenu = $("#selectVersion", page).html(html);
-        installedPlugin || $("#pCurrentVersion", page).hide().html("");
+        if (!installedPlugin) {
+            $("#pCurrentVersion", page).hide().html("");
+        }
        var packageVersion = packageInfo.versions.filter(function(current) {
-            return "Release" == current.classification
+            return "Release" == current.classification;
        })[0];
-        if (packageVersion || (packageVersion = packageInfo.versions.filter(function(current) {
-                return "Beta" == current.classification
-            })[0]), packageVersion) {
+        packageVersion = packageVersion || packageInfo.versions.filter(function(current) {
+            return "Beta" == current.classification;
+        })[0];
+
+        if (packageVersion) {
            var val = packageVersion.versionStr + "|" + packageVersion.classification;
-            selectmenu.val(val)
+            selectmenu.val(val);
        }
    }

-    function renderPackage(pkg, installedPlugins, pluginSecurityInfo, page) {
+    function renderPackage(pkg, installedPlugins, page) {
        var installedPlugin = installedPlugins.filter(function(ip) {
            return ip.Name == pkg.name
        })[0];
@ -79,62 +87,69 @@ define(["jQuery", "loading", "libraryMenu", "globalize", "connectionManager", "e
    }

    function performInstallation(page, packageName, guid, updateClass, version) {
-        var developer = $("#developer", page).html().toLowerCase(),
-            alertCallback = function(confirmed) {
-                confirmed && (loading.show(), page.querySelector("#btnInstall").disabled = !0, ApiClient.installPlugin(packageName, guid, updateClass, version).then(function() {
-                    loading.hide(), alertText(globalize.translate("PluginInstalledMessage"))
-                }))
-            };
-        if ("luke" != developer && "ebr" != developer) {
+        var developer = $("#developer", page).html().toLowerCase();
+        var alertCallback = function() {
+            loading.show();
+            page.querySelector("#btnInstall").disabled = true;
+            ApiClient.installPlugin(packageName, guid, updateClass, version).then(function() {
+                loading.hide();
+                alertText(globalize.translate("PluginInstalledMessage"));
+            });
+        };
+        if (developer !== 'jellyfin') {
            loading.hide();
            var msg = globalize.translate("MessagePluginInstallDisclaimer");
-            msg += "<br/>", msg += "<br/>", msg += globalize.translate("PleaseConfirmPluginInstallation"), require(["confirm"], function(confirm) {
+            msg += "<br/>";
+            msg += "<br/>";
+            msg += globalize.translate("PleaseConfirmPluginInstallation");
+            require(["confirm"], function(confirm) {
                confirm(msg, globalize.translate("HeaderConfirmPluginInstallation")).then(function() {
-                    alertCallback(!0)
+                    alertCallback();
                }, function() {
-                    alertCallback(!1)
-                })
-            })
-        } else alertCallback(!0)
+                    console.log('plugin not installed');
+                });
+            });
+        } else {
+            alertCallback();
+        }
    }
+
    return function(view, params) {
-        var onSubmit = function() {
+        $(".addPluginForm", view).on("submit", function() {
            loading.show();
-            var page = $(this).parents("#addPluginPage")[0],
-                name = params.name,
-                guid = params.guid;
-            return ApiClient.getInstalledPlugins().then(function(plugins) {
-                var installedPlugin = plugins.filter(function(ip) {
-                        return ip.Name == name
-                    })[0],
-                    vals = $("#selectVersion", page).val().split("|"),
-                    version = vals[0];
-                installedPlugin && installedPlugin.Version == version ? (loading.hide(), Dashboard.alert({
-                    message: globalize.translate("MessageAlreadyInstalled"),
-                    title: globalize.translate("HeaderPluginInstallation")
-                })) : performInstallation(page, name, guid, vals[1], version)
-            }), !1
-        };
-        $(".addPluginForm", view).on("submit", onSubmit), view.addEventListener("viewshow", function() {
+            var page = $(this).parents("#addPluginPage")[0];
+            var name = params.name;
+            var guid = params.guid;
+            ApiClient.getInstalledPlugins().then(function(plugins) {
+                var installedPlugin = plugins.filter(function(plugin) {
+                    return plugin.Name == name;
+                })[0];
+                var vals = $("#selectVersion", page).val().split("|");
+                var version = vals[0];
+                if (installedPlugin) {
+                    if (installedPlugin.Version === version) {
+                        loading.hide();
+                        Dashboard.alert({
+                            message: globalize.translate("MessageAlreadyInstalled"),
+                            title: globalize.translate("HeaderPluginInstallation")
+                        });
+                    } else {
+                        performInstallation(page, name, guid, vals[1], version);
+                    }
+                }
+            });
+            return false;
+        });
+        view.addEventListener("viewshow", function() {
            var page = this;
            loading.show();
-            var name = params.name,
-                guid = params.guid,
-                promise1 = ApiClient.getPackageInfo(name, guid),
-                promise2 = ApiClient.getInstalledPlugins();
-            connectionManager.getRegistrationInfo("themes", ApiClient, {
-                viewOnly: !0
-            }), Promise.all([promise1, promise2]).then(function(responses) {
-                connectionManager.getRegistrationInfo("themes", ApiClient, {
-                    viewOnly: !0
-                }).then(function() {
-                    renderPackage(responses[0], responses[1], {
-                        IsMBSupporter: !0
-                    }, page)
-                }, function() {
-                    renderPackage(responses[0], responses[1], {}, page)
-                })
-            })
+            var name = params.name;
+            var guid = params.guid;
+            var promise1 = ApiClient.getPackageInfo(name, guid);
+            var promise2 = ApiClient.getInstalledPlugins();
+            Promise.all([promise1, promise2]).then(function(responses) {
+                renderPackage(responses[0], responses[1], page);
+            });
        })
    }
 });
--- a/src/controllers/plugincatalogpage.js
+++ b/src/controllers/plugincatalogpage.js
@ -3,7 +3,7 @@ define(["loading", "libraryMenu", "globalize", "cardStyle", "emby-button", "emby

    function reloadList(page) {
        loading.show();
-        var promise1 = ApiClient.getAvailablePlugins(query);
+        var promise1 = ApiClient.getAvailablePlugins();
        var promise2 = ApiClient.getInstalledPlugins();
        Promise.all([promise1, promise2]).then(function (responses) {
            populateList({
@ -33,19 +33,15 @@ define(["loading", "libraryMenu", "globalize", "cardStyle", "emby-button", "emby
    function populateList(options) {
        var availablePlugins = options.availablePlugins;
        var installedPlugins = options.installedPlugins;
-        var allPlugins = availablePlugins.filter(function (plugin) {
-            plugin.category = plugin.category || "General";
-            plugin.categoryDisplayName = getHeaderText(plugin.category);

-            if (!options.categories || -1 != options.categories.indexOf(plugin.category)) {
-                if (!options.targetSystem || plugin.targetSystem == options.targetSystem) {
-                    return "UserInstalled" == plugin.type;
-                }
-            }
-            return false;
+        var categories = [];
+        availablePlugins.forEach(function (plugin, index, array) {
+            plugin.category = plugin.category || 'General';
+            plugin.categoryDisplayName = getHeaderText(plugin.category);
+            array[index] = plugin;
        });

-        availablePlugins = allPlugins.sort(function (a, b) {
+        availablePlugins.sort(function (a, b) {
            if (a.category > b.category) {
                return 1;
            } else if (b.category > a.category) {
@ -59,45 +55,29 @@ define(["loading", "libraryMenu", "globalize", "cardStyle", "emby-button", "emby
            return 0;
        });

-        var length;
-        var plugin;
-        var currentCategory;
+        var currentCategory = null;
        var html = "";

-        var hasOpenTag = false;
-        currentCategory = null;
-        if (options.showCategory === false) {
-            html += '<div class="itemsContainer vertical-wrap">';
-            hasOpenTag = true;
-        }
        for (var i = 0; i < availablePlugins.length; i++) {
-            plugin = availablePlugins[i];
+            var plugin = availablePlugins[i];
            var category = plugin.categoryDisplayName;
-
            if (category != currentCategory) {
-                if (false !== options.showCategory) {
-                    if (currentCategory) {
-                        hasOpenTag = false;
-                        html += "</div>";
-                        html += "</div>";
-                    }
-                    html += '<div class="verticalSection">';
-                    html += '<h2 class="sectionTitle sectionTitle-cards">' + category + "</h2>";
-                    html += '<div class="itemsContainer vertical-wrap">';
-                    hasOpenTag = true;
+                if (currentCategory) {
+                    html += "</div>";
+                    html += "</div>";
                }
+                html += '<div class="verticalSection">';
+                html += '<h2 class="sectionTitle sectionTitle-cards">' + category + "</h2>";
+                html += '<div class="itemsContainer vertical-wrap">';
                currentCategory = category;
            }
            html += getPluginHtml(plugin, options, installedPlugins);
        }
-
-        if (hasOpenTag) {
-            html += "</div>";
-            html += "</div>";
-        }
+        html += "</div>";
+        html += "</div>";

        if (!availablePlugins.length && options.noItemsElement) {
-            options.noItemsElement.classList.add("hide");
+            options.noItemsElement.classList.remove("hide");
        }

        options.catalogElement.innerHTML = html;
@ -145,29 +125,19 @@ define(["loading", "libraryMenu", "globalize", "cardStyle", "emby-button", "emby

    function getTabs() {
        return [{
-            href: "plugins.html",
+            href: "installedplugins.html",
            name: globalize.translate("TabMyPlugins")
        }, {
-            href: "plugincatalog.html",
+            href: "availableplugins.html",
            name: globalize.translate("TabCatalog")
        }];
    }

-    var query = {
-        TargetSystems: "Server",
-        IsAppStoreSafe: true,
-        IsAdult: false
-    };
-
    window.PluginCatalog = {
        renderCatalog: populateList
    };

    return function (view, params) {
-        view.querySelector("#selectSystem").addEventListener("change", function () {
-            query.TargetSystems = this.value;
-            reloadList(view);
-        });
        view.addEventListener("viewshow", function () {
            libraryMenu.setTabs("plugins", 1, getTabs);
            reloadList(this);
--- a/src/controllers/installedplugins.js
+++ b/src/controllers/installedplugins.js
@ -10,9 +10,10 @@ define(["loading", "libraryMenu", "dom", "globalize", "cardStyle", "emby-button"
                primary: "cancel",
                confirmText: globalize.translate("UninstallPluginHeader")
            }).then(function() {
-                loading.show(), ApiClient.uninstallPlugin(uniqueid).then(function() {
-                    reloadList(page)
-                })
+                loading.show();
+                ApiClient.uninstallPlugin(uniqueid).then(function() {
+                    reloadList(page);
+                });
            })
        })
    }
@ -20,18 +21,18 @@ define(["loading", "libraryMenu", "dom", "globalize", "cardStyle", "emby-button"
    function showNoConfigurationMessage() {
        Dashboard.alert({
            message: globalize.translate("NoPluginConfigurationMessage")
-        })
+        });
    }

    function showConnectMessage() {
        Dashboard.alert({
            message: globalize.translate("MessagePluginConfigurationRequiresLocalAccess")
-        })
+        });
    }

    function getPluginCardHtml(plugin, pluginConfigurationPages) {
        var configPage = pluginConfigurationPages.filter(function(pluginConfigurationPage) {
-                return pluginConfigurationPage.PluginId == plugin.Id
+                return pluginConfigurationPage.PluginId == plugin.Id;
        })[0];
        var configPageUrl = configPage ? Dashboard.getConfigurationPageUrl(configPage.Name) : null;

@ -65,38 +66,56 @@ define(["loading", "libraryMenu", "dom", "globalize", "cardStyle", "emby-button"
        return html;
    }

-    function renderPlugins(page, plugins, showNoPluginsMessage) {
+    function renderPlugins(page, plugins) {
        ApiClient.getJSON(ApiClient.getUrl("web/configurationpages") + "?pageType=PluginConfiguration").then(function(configPages) {
-            populateList(page, plugins, configPages, showNoPluginsMessage)
-        })
+            populateList(page, plugins, configPages);
+        });
    }

-    function populateList(page, plugins, pluginConfigurationPages, showNoPluginsMessage) {
+    function populateList(page, plugins, pluginConfigurationPages) {
        plugins = plugins.sort(function(plugin1, plugin2) {
            return plugin1.Name > plugin2.Name ? 1 : -1
        });
        var html = plugins.map(function(p) {
                return getPluginCardHtml(p, pluginConfigurationPages)
-            }).join(""),
-            installedPluginsElement = page.querySelector(".installedPlugins");
-        installedPluginsElement.removeEventListener("click", onInstalledPluginsClick), installedPluginsElement.addEventListener("click", onInstalledPluginsClick), plugins.length ? (installedPluginsElement.classList.add("itemsContainer"), installedPluginsElement.classList.add("vertical-wrap"), installedPluginsElement.innerHTML = html) : (showNoPluginsMessage && (html += '<div style="padding:5px;">', html += "<p>" + globalize.translate("MessageNoPluginsInstalled") + "</p>", html += '<p><a is="emby-linkbutton" class="button-link" href="plugincatalog.html">', html += globalize.translate("BrowsePluginCatalogMessage"), html += "</a></p>", html += "</div>"), installedPluginsElement.innerHTML = html), loading.hide()
+        }).join("");
+        var installedPluginsElement = page.querySelector(".installedPlugins");
+        installedPluginsElement.removeEventListener("click", onInstalledPluginsClick);
+        installedPluginsElement.addEventListener("click", onInstalledPluginsClick);
+        if (plugins.length) {
+            installedPluginsElement.classList.add("itemsContainer");
+            installedPluginsElement.classList.add("vertical-wrap");
+        } else {
+            html += '<div style="padding:5px;">';
+            html += "<p>" + globalize.translate("MessageNoPluginsInstalled") + "</p>";
+            html += '<p><a is="emby-linkbutton" class="button-link" href="availableplugins.html">';
+            html += globalize.translate("BrowsePluginCatalogMessage");
+            html += "</a></p>";
+            html += "</div>";
+        }
+        installedPluginsElement.innerHTML = html;
+        loading.hide();
    }

    function showPluginMenu(page, elem) {
-        var card = dom.parentWithClass(elem, "card"),
-            id = card.getAttribute("data-id"),
-            name = card.getAttribute("data-name"),
-            configHref = card.querySelector(".cardContent").getAttribute("href"),
-            menuItems = [];
-        configHref && menuItems.push({
-            name: globalize.translate("ButtonSettings"),
-            id: "open",
-            ironIcon: "mode-edit"
-        }), menuItems.push({
+        var card = dom.parentWithClass(elem, "card");
+        var id = card.getAttribute("data-id");
+        var name = card.getAttribute("data-name");
+        var configHref = card.querySelector(".cardContent").getAttribute("href");
+        var menuItems = [];
+        if (configHref) {
+            menuItems.push({
+                name: globalize.translate("ButtonSettings"),
+                id: "open",
+                ironIcon: "mode-edit"
+            });
+        }
+        menuItems.push({
            name: globalize.translate("ButtonUninstall"),
            id: "delete",
            ironIcon: "delete"
-        }), require(["actionsheet"], function(actionsheet) {
+        });
+        require(["actionsheet"], function(actionsheet) {
            actionsheet.show({
                items: menuItems,
                positionTo: elem,
@ -109,37 +128,44 @@ define(["loading", "libraryMenu", "dom", "globalize", "cardStyle", "emby-button"
                            deletePlugin(page, id, name)
                    }
                }
-            })
-        })
+            });
+        });
    }

    function reloadList(page) {
-        loading.show(), ApiClient.getInstalledPlugins().then(function(plugins) {
-            renderPlugins(page, plugins, !0)
-        })
+        loading.show();
+        ApiClient.getInstalledPlugins().then(function(plugins) {
+            renderPlugins(page, plugins);
+        });
    }

    function getTabs() {
        return [{
-            href: "plugins.html",
+            href: "installedplugins.html",
            name: globalize.translate("TabMyPlugins")
        }, {
-            href: "plugincatalog.html",
+            href: "availableplugins.html",
            name: globalize.translate("TabCatalog")
        }]
    }

    function onInstalledPluginsClick(e) {
-        if (dom.parentWithClass(e.target, "noConfigPluginCard")) showNoConfigurationMessage();
-        else if (dom.parentWithClass(e.target, "connectModePluginCard")) showConnectMessage();
-        else {
+        if (dom.parentWithClass(e.target, "noConfigPluginCard")) {
+            showNoConfigurationMessage();
+        } else if (dom.parentWithClass(e.target, "connectModePluginCard")) {
+            showConnectMessage();
+        } else {
            var btnCardMenu = dom.parentWithClass(e.target, "btnCardMenu");
-            btnCardMenu && showPluginMenu(dom.parentWithClass(btnCardMenu, "page"), btnCardMenu)
+            btnCardMenu && showPluginMenu(dom.parentWithClass(btnCardMenu, "page"), btnCardMenu);
        }
    }
+
    pageIdOn("pageshow", "pluginsPage", function() {
-        libraryMenu.setTabs("plugins", 0, getTabs), reloadList(this)
-    }), window.PluginsPage = {
+        libraryMenu.setTabs("plugins", 0, getTabs);
+        reloadList(this);
+    });
+
+    window.PluginsPage = {
        renderPlugins: renderPlugins
    }
 });
--- a/src/installedplugins.html
+++ b/src/installedplugins.html
@ -1,8 +1,6 @@
-<div id="pluginsPage" data-role="page" class="page type-interior pluginConfigurationPage withTabs fullWidthContent" data-require="scripts/pluginspage">
-
+<div id="pluginsPage" data-role="page" class="page type-interior pluginConfigurationPage withTabs fullWidthContent">
    <div>
        <div class="content-primary">
-
            <div class="installedPlugins"></div>
        </div>
    </div>
--- a/src/plugincatalog.html
+++ b/src/plugincatalog.html
@ -1,25 +0,0 @@
-<div id="pluginCatalogPage" data-role="page" class="page type-interior pluginConfigurationPage withTabs fullWidthContent">
-    <div>
-        <div class="content-primary">
-
-            <div class="verticalSection">
-                <div class="sectionTitleContainer flex align-items-center">
-
-                    <div class="selectContainer">
-                        <select is="emby-select" id="selectSystem" label="${LabelDisplayPluginsFor}">
-                            <option value="Server">${HeaderJellyfinServer}</option>
-                            <option value="MBClassic">${PluginTabAppClassic}</option>
-                        </select>
-                    </div>
-
-                    <a is="emby-linkbutton" class="raised button-alt headerHelpButton" target="_blank" href="https://jellyfin.readthedocs.io/en/latest/administrator-docs/plugins/">${Help}</a>
-                </div>
-
-            </div>
-
-            <div id="noPlugins" class="hide">${MessageNoAvailablePlugins}</div>
-
-            <div id="pluginTiles" style="text-align:left;"></div>
-        </div>
-    </div>
-</div>
--- a/src/scripts/librarymenu.js
+++ b/src/scripts/librarymenu.js
@ -362,7 +362,7 @@ define(["dom", "layoutManager", "inputManager", "connectionManager", "events", "
            name: globalize.translate("TabPlugins"),
            icon: "shopping_cart",
            color: "#9D22B1",
-            href: "plugins.html",
+            href: "installedplugins.html",
            pageIds: ["pluginsPage", "pluginCatalogPage"]
        });
        links.push({
--- a/src/scripts/routes.js
+++ b/src/scripts/routes.js
@ -284,15 +284,16 @@ define([
        roles: "admin"
    });
    defineRoute({
-        path: "/plugincatalog.html",
+        path: "/availableplugins.html",
        autoFocus: false,
        roles: "admin",
-        controller: "plugincatalogpage"
+        controller: "availableplugins"
    });
    defineRoute({
-        path: "/plugins.html",
+        path: "/installedplugins.html",
        autoFocus: false,
-        roles: "admin"
+        roles: "admin",
+        controller: "installedplugins"
    });
    defineRoute({
        path: "/scheduledtask.html",