mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Merge pull request #231 from dkanada/plugin

Browse source 
Improve the plugin catalog and related controllers
This commit is contained in:
Joshua M. Boniface 2019-04-09 00:33:22 -04:00 • committed by GitHub
commit 00dab1b88c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 172 additions and 179 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/availableplugins.html Normal file
View file

@ -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>

133
src/controllers/addpluginpage.js
View file

@ -2,32 +2,40 @@ define(["jQuery", "loading", "libraryMenu", "globalize", "connectionManager", "e
"use strict"; "use strict";
function populateHistory(packageInfo, page) { 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]; 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) { 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]; 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); var selectmenu = $("#selectVersion", page).html(html);
installedPlugin || $("#pCurrentVersion", page).hide().html(""); if (!installedPlugin) {
$("#pCurrentVersion", page).hide().html("");
}
var packageVersion = packageInfo.versions.filter(function(current) { var packageVersion = packageInfo.versions.filter(function(current) {
return "Release" == current.classification return "Release" == current.classification;
})[0]; })[0];
if (packageVersion || (packageVersion = packageInfo.versions.filter(function(current) { packageVersion = packageVersion || packageInfo.versions.filter(function(current) {
return "Beta" == current.classification return "Beta" == current.classification;
})[0]), packageVersion) { })[0];
if (packageVersion) {
var val = packageVersion.versionStr + "|" + packageVersion.classification; 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) { var installedPlugin = installedPlugins.filter(function(ip) {
return ip.Name == pkg.name return ip.Name == pkg.name
})[0]; })[0];
@ -79,62 +87,69 @@ define(["jQuery", "loading", "libraryMenu", "globalize", "connectionManager", "e
} }
function performInstallation(page, packageName, guid, updateClass, version) { function performInstallation(page, packageName, guid, updateClass, version) {
var developer = $("#developer", page).html().toLowerCase(), var developer = $("#developer", page).html().toLowerCase();
alertCallback = function(confirmed) { var alertCallback = function() {
confirmed && (loading.show(), page.querySelector("#btnInstall").disabled = !0, ApiClient.installPlugin(packageName, guid, updateClass, version).then(function() { loading.show();
loading.hide(), alertText(globalize.translate("PluginInstalledMessage")) page.querySelector("#btnInstall").disabled = true;
})) ApiClient.installPlugin(packageName, guid, updateClass, version).then(function() {
}; loading.hide();
if ("luke" != developer && "ebr" != developer) { alertText(globalize.translate("PluginInstalledMessage"));
});
};
if (developer !== 'jellyfin') {
loading.hide(); loading.hide();
var msg = globalize.translate("MessagePluginInstallDisclaimer"); 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() { confirm(msg, globalize.translate("HeaderConfirmPluginInstallation")).then(function() {
alertCallback(!0) alertCallback();
}, function() { }, function() {
alertCallback(!1) console.log('plugin not installed');
}) });
}) });
} else alertCallback(!0) } else {
alertCallback();
}
} }
return function(view, params) { return function(view, params) {
var onSubmit = function() { $(".addPluginForm", view).on("submit", function() {
loading.show(); loading.show();
var page = $(this).parents("#addPluginPage")[0], var page = $(this).parents("#addPluginPage")[0];
name = params.name, var name = params.name;
guid = params.guid; var guid = params.guid;
return ApiClient.getInstalledPlugins().then(function(plugins) { ApiClient.getInstalledPlugins().then(function(plugins) {
var installedPlugin = plugins.filter(function(ip) { var installedPlugin = plugins.filter(function(plugin) {
return ip.Name == name return plugin.Name == name;
})[0], })[0];
vals = $("#selectVersion", page).val().split("|"), var vals = $("#selectVersion", page).val().split("|");
version = vals[0]; var version = vals[0];
installedPlugin && installedPlugin.Version == version ? (loading.hide(), Dashboard.alert({ if (installedPlugin) {
message: globalize.translate("MessageAlreadyInstalled"), if (installedPlugin.Version === version) {
title: globalize.translate("HeaderPluginInstallation") loading.hide();
})) : performInstallation(page, name, guid, vals[1], version) Dashboard.alert({
}), !1 message: globalize.translate("MessageAlreadyInstalled"),
}; title: globalize.translate("HeaderPluginInstallation")
$(".addPluginForm", view).on("submit", onSubmit), view.addEventListener("viewshow", function() { });
} else {
performInstallation(page, name, guid, vals[1], version);
}
}
});
return false;
});
view.addEventListener("viewshow", function() {
var page = this; var page = this;
loading.show(); loading.show();
var name = params.name, var name = params.name;
guid = params.guid, var guid = params.guid;
promise1 = ApiClient.getPackageInfo(name, guid), var promise1 = ApiClient.getPackageInfo(name, guid);
promise2 = ApiClient.getInstalledPlugins(); var promise2 = ApiClient.getInstalledPlugins();
connectionManager.getRegistrationInfo("themes", ApiClient, { Promise.all([promise1, promise2]).then(function(responses) {
viewOnly: !0 renderPackage(responses[0], responses[1], page);
}), 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)
})
})
}) })
} }
}); });

70
src/controllers/plugincatalogpage.js → src/controllers/availableplugins.js
View file

@ -3,7 +3,7 @@ define(["loading", "libraryMenu", "globalize", "cardStyle", "emby-button", "emby
function reloadList(page) { function reloadList(page) {
loading.show(); loading.show();
var promise1 = ApiClient.getAvailablePlugins(query); var promise1 = ApiClient.getAvailablePlugins();
var promise2 = ApiClient.getInstalledPlugins(); var promise2 = ApiClient.getInstalledPlugins();
Promise.all([promise1, promise2]).then(function (responses) { Promise.all([promise1, promise2]).then(function (responses) {
populateList({ populateList({
@ -33,19 +33,15 @@ define(["loading", "libraryMenu", "globalize", "cardStyle", "emby-button", "emby
function populateList(options) { function populateList(options) {
var availablePlugins = options.availablePlugins; var availablePlugins = options.availablePlugins;
var installedPlugins = options.installedPlugins; 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)) { var categories = [];
if (!options.targetSystem || plugin.targetSystem == options.targetSystem) { availablePlugins.forEach(function (plugin, index, array) {
return "UserInstalled" == plugin.type; plugin.category = plugin.category || 'General';
} plugin.categoryDisplayName = getHeaderText(plugin.category);
} array[index] = plugin;
return false;
}); });
availablePlugins = allPlugins.sort(function (a, b) { availablePlugins.sort(function (a, b) {
if (a.category > b.category) { if (a.category > b.category) {
return 1; return 1;
} else if (b.category > a.category) { } else if (b.category > a.category) {
@ -59,45 +55,29 @@ define(["loading", "libraryMenu", "globalize", "cardStyle", "emby-button", "emby
return 0; return 0;
}); });
var length; var currentCategory = null;
var plugin;
var currentCategory;
var html = ""; 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++) { for (var i = 0; i < availablePlugins.length; i++) {
plugin = availablePlugins[i]; var plugin = availablePlugins[i];
var category = plugin.categoryDisplayName; var category = plugin.categoryDisplayName;
if (category != currentCategory) { if (category != currentCategory) {
if (false !== options.showCategory) { if (currentCategory) {
if (currentCategory) { html += "</div>";
hasOpenTag = false; html += "</div>";
html += "</div>";
html += "</div>";
}
html += '<div class="verticalSection">';
html += '<h2 class="sectionTitle sectionTitle-cards">' + category + "</h2>";
html += '<div class="itemsContainer vertical-wrap">';
hasOpenTag = true;
} }
html += '<div class="verticalSection">';
html += '<h2 class="sectionTitle sectionTitle-cards">' + category + "</h2>";
html += '<div class="itemsContainer vertical-wrap">';
currentCategory = category; currentCategory = category;
} }
html += getPluginHtml(plugin, options, installedPlugins); html += getPluginHtml(plugin, options, installedPlugins);
} }
html += "</div>";
if (hasOpenTag) { html += "</div>";
html += "</div>";
html += "</div>";
}
if (!availablePlugins.length && options.noItemsElement) { if (!availablePlugins.length && options.noItemsElement) {
options.noItemsElement.classList.add("hide"); options.noItemsElement.classList.remove("hide");
} }
options.catalogElement.innerHTML = html; options.catalogElement.innerHTML = html;
@ -145,29 +125,19 @@ define(["loading", "libraryMenu", "globalize", "cardStyle", "emby-button", "emby
function getTabs() { function getTabs() {
return [{ return [{
href: "plugins.html", href: "installedplugins.html",
name: globalize.translate("TabMyPlugins") name: globalize.translate("TabMyPlugins")
}, { }, {
href: "plugincatalog.html", href: "availableplugins.html",
name: globalize.translate("TabCatalog") name: globalize.translate("TabCatalog")
}]; }];
} }
var query = {
TargetSystems: "Server",
IsAppStoreSafe: true,
IsAdult: false
};
window.PluginCatalog = { window.PluginCatalog = {
renderCatalog: populateList renderCatalog: populateList
}; };
return function (view, params) { return function (view, params) {
view.querySelector("#selectSystem").addEventListener("change", function () {
query.TargetSystems = this.value;
reloadList(view);
});
view.addEventListener("viewshow", function () { view.addEventListener("viewshow", function () {
libraryMenu.setTabs("plugins", 1, getTabs); libraryMenu.setTabs("plugins", 1, getTabs);
reloadList(this); reloadList(this);

100
src/scripts/pluginspage.js → src/controllers/installedplugins.js
View file

@ -10,9 +10,10 @@ define(["loading", "libraryMenu", "dom", "globalize", "cardStyle", "emby-button"
primary: "cancel", primary: "cancel",
confirmText: globalize.translate("UninstallPluginHeader") confirmText: globalize.translate("UninstallPluginHeader")
}).then(function() { }).then(function() {
loading.show(), ApiClient.uninstallPlugin(uniqueid).then(function() { loading.show();
reloadList(page) ApiClient.uninstallPlugin(uniqueid).then(function() {
}) reloadList(page);
});
}) })
}) })
} }
@ -20,18 +21,18 @@ define(["loading", "libraryMenu", "dom", "globalize", "cardStyle", "emby-button"
function showNoConfigurationMessage() { function showNoConfigurationMessage() {
Dashboard.alert({ Dashboard.alert({
message: globalize.translate("NoPluginConfigurationMessage") message: globalize.translate("NoPluginConfigurationMessage")
}) });
} }
function showConnectMessage() { function showConnectMessage() {
Dashboard.alert({ Dashboard.alert({
message: globalize.translate("MessagePluginConfigurationRequiresLocalAccess") message: globalize.translate("MessagePluginConfigurationRequiresLocalAccess")
}) });
} }
function getPluginCardHtml(plugin, pluginConfigurationPages) { function getPluginCardHtml(plugin, pluginConfigurationPages) {
var configPage = pluginConfigurationPages.filter(function(pluginConfigurationPage) { var configPage = pluginConfigurationPages.filter(function(pluginConfigurationPage) {
return pluginConfigurationPage.PluginId == plugin.Id return pluginConfigurationPage.PluginId == plugin.Id;
})[0]; })[0];
var configPageUrl = configPage ? Dashboard.getConfigurationPageUrl(configPage.Name) : null; var configPageUrl = configPage ? Dashboard.getConfigurationPageUrl(configPage.Name) : null;
@ -65,38 +66,56 @@ define(["loading", "libraryMenu", "dom", "globalize", "cardStyle", "emby-button"
return html; return html;
} }
function renderPlugins(page, plugins, showNoPluginsMessage) { function renderPlugins(page, plugins) {
ApiClient.getJSON(ApiClient.getUrl("web/configurationpages") + "?pageType=PluginConfiguration").then(function(configPages) { 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) { plugins = plugins.sort(function(plugin1, plugin2) {
return plugin1.Name > plugin2.Name ? 1 : -1 return plugin1.Name > plugin2.Name ? 1 : -1
}); });
var html = plugins.map(function(p) { var html = plugins.map(function(p) {
return getPluginCardHtml(p, pluginConfigurationPages) return getPluginCardHtml(p, pluginConfigurationPages)
}).join(""), }).join("");
installedPluginsElement = page.querySelector(".installedPlugins"); var 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() 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) { function showPluginMenu(page, elem) {
var card = dom.parentWithClass(elem, "card"), var card = dom.parentWithClass(elem, "card");
id = card.getAttribute("data-id"), var id = card.getAttribute("data-id");
name = card.getAttribute("data-name"), var name = card.getAttribute("data-name");
configHref = card.querySelector(".cardContent").getAttribute("href"), var configHref = card.querySelector(".cardContent").getAttribute("href");
menuItems = []; var menuItems = [];
configHref && menuItems.push({ if (configHref) {
name: globalize.translate("ButtonSettings"), menuItems.push({
id: "open", name: globalize.translate("ButtonSettings"),
ironIcon: "mode-edit" id: "open",
}), menuItems.push({ ironIcon: "mode-edit"
});
}
menuItems.push({
name: globalize.translate("ButtonUninstall"), name: globalize.translate("ButtonUninstall"),
id: "delete", id: "delete",
ironIcon: "delete" ironIcon: "delete"
}), require(["actionsheet"], function(actionsheet) { });
require(["actionsheet"], function(actionsheet) {
actionsheet.show({ actionsheet.show({
items: menuItems, items: menuItems,
positionTo: elem, positionTo: elem,
@ -109,37 +128,44 @@ define(["loading", "libraryMenu", "dom", "globalize", "cardStyle", "emby-button"
deletePlugin(page, id, name) deletePlugin(page, id, name)
} }
} }
}) });
}) });
} }
function reloadList(page) { function reloadList(page) {
loading.show(), ApiClient.getInstalledPlugins().then(function(plugins) { loading.show();
renderPlugins(page, plugins, !0) ApiClient.getInstalledPlugins().then(function(plugins) {
}) renderPlugins(page, plugins);
});
} }
function getTabs() { function getTabs() {
return [{ return [{
href: "plugins.html", href: "installedplugins.html",
name: globalize.translate("TabMyPlugins") name: globalize.translate("TabMyPlugins")
}, { }, {
href: "plugincatalog.html", href: "availableplugins.html",
name: globalize.translate("TabCatalog") name: globalize.translate("TabCatalog")
}] }]
} }
function onInstalledPluginsClick(e) { function onInstalledPluginsClick(e) {
if (dom.parentWithClass(e.target, "noConfigPluginCard")) showNoConfigurationMessage(); if (dom.parentWithClass(e.target, "noConfigPluginCard")) {
else if (dom.parentWithClass(e.target, "connectModePluginCard")) showConnectMessage(); showNoConfigurationMessage();
else { } else if (dom.parentWithClass(e.target, "connectModePluginCard")) {
showConnectMessage();
} else {
var btnCardMenu = dom.parentWithClass(e.target, "btnCardMenu"); 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() { pageIdOn("pageshow", "pluginsPage", function() {
libraryMenu.setTabs("plugins", 0, getTabs), reloadList(this) libraryMenu.setTabs("plugins", 0, getTabs);
}), window.PluginsPage = { reloadList(this);
});
window.PluginsPage = {
renderPlugins: renderPlugins renderPlugins: renderPlugins
} }
}); });

4
src/plugins.html → src/installedplugins.html
View file

@ -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>
<div class="content-primary"> <div class="content-primary">
<div class="installedPlugins"></div> <div class="installedPlugins"></div>
</div> </div>
</div> </div>

25
src/plugincatalog.html
View file

@ -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>

2
src/scripts/librarymenu.js
View file

@ -362,7 +362,7 @@ define(["dom", "layoutManager", "inputManager", "connectionManager", "events", "
name: globalize.translate("TabPlugins"), name: globalize.translate("TabPlugins"),
icon: "shopping_cart", icon: "shopping_cart",
color: "#9D22B1", color: "#9D22B1",
href: "plugins.html", href: "installedplugins.html",
pageIds: ["pluginsPage", "pluginCatalogPage"] pageIds: ["pluginsPage", "pluginCatalogPage"]
}); });
links.push({ links.push({

9
src/scripts/routes.js
View file

@ -284,15 +284,16 @@ define([
roles: "admin" roles: "admin"
}); });
defineRoute({ defineRoute({
path: "/plugincatalog.html", path: "/availableplugins.html",
autoFocus: false, autoFocus: false,
roles: "admin", roles: "admin",
controller: "plugincatalogpage" controller: "availableplugins"
}); });
defineRoute({ defineRoute({
path: "/plugins.html", path: "/installedplugins.html",
autoFocus: false, autoFocus: false,
roles: "admin" roles: "admin",
controller: "installedplugins"
}); });
defineRoute({ defineRoute({
path: "/scheduledtask.html", path: "/scheduledtask.html",