mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
display top plugins
This commit is contained in:
Luke Pulverenti
parent
bc4468cb40
commit
78258425bf
2 changed files with 152 additions and 92 deletions
|
|
@ -45,7 +45,7 @@
|
||||||
var availablePlugins = options.availablePlugins;
|
var availablePlugins = options.availablePlugins;
|
||||||
var installedPlugins = options.installedPlugins;
|
var installedPlugins = options.installedPlugins;
|
||||||
|
|
||||||
availablePlugins = availablePlugins.filter(function (p) {
|
var allPlugins = availablePlugins.filter(function (p) {
|
||||||
|
|
||||||
p.category = p.category || "General";
|
p.category = p.category || "General";
|
||||||
p.categoryDisplayName = Globalize.translate('PluginCategory' + p.category.replace(' ', ''));
|
p.categoryDisplayName = Globalize.translate('PluginCategory' + p.category.replace(' ', ''));
|
||||||
|
|
@ -64,21 +64,74 @@
|
||||||
|
|
||||||
return p.type == "UserInstalled";
|
return p.type == "UserInstalled";
|
||||||
|
|
||||||
}).sort(function (a, b) {
|
|
||||||
|
|
||||||
var aName = (a.category) + " " + a.name;
|
|
||||||
var bame = (b.category) + " " + b.name;
|
|
||||||
|
|
||||||
return aName > bame ? 1 : -1;
|
|
||||||
});
|
});
|
||||||
|
|
||||||
var pluginhtml = '';
|
availablePlugins = allPlugins.sort(function (a, b) {
|
||||||
|
|
||||||
var currentCategory;
|
var aName = (a.category);
|
||||||
|
var bName = (b.category);
|
||||||
|
|
||||||
for (var i = 0, length = availablePlugins.length; i < length; i++) {
|
if (aName > bName) {
|
||||||
var html = '';
|
return 1;
|
||||||
var plugin = availablePlugins[i];
|
}
|
||||||
|
if (bName > aName) {
|
||||||
|
return -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
aName = (a.name);
|
||||||
|
bName = (b.name);
|
||||||
|
|
||||||
|
if (aName > bName) {
|
||||||
|
return 1;
|
||||||
|
}
|
||||||
|
if (bName > aName) {
|
||||||
|
return -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (a.installs > b.installs) {
|
||||||
|
return 1;
|
||||||
|
}
|
||||||
|
if (b.installs > a.installs) {
|
||||||
|
return -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
return 0;
|
||||||
|
});
|
||||||
|
|
||||||
|
var html = '';
|
||||||
|
var i, length, plugin;
|
||||||
|
|
||||||
|
var currentCategory = Globalize.translate('HeaderTopPlugins');
|
||||||
|
html += '<div class="detailSectionHeader">' + currentCategory + '</div>';
|
||||||
|
var topPlugins = allPlugins.slice(0).sort(function (a, b) {
|
||||||
|
|
||||||
|
if (a.installs > b.installs) {
|
||||||
|
return 1;
|
||||||
|
}
|
||||||
|
if (b.installs > a.installs) {
|
||||||
|
return -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
var aName = (a.name);
|
||||||
|
var bName = (b.name);
|
||||||
|
|
||||||
|
if (aName > bName) {
|
||||||
|
return 1;
|
||||||
|
}
|
||||||
|
if (bName > aName) {
|
||||||
|
return -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
return 0;
|
||||||
|
});
|
||||||
|
|
||||||
|
for (i = 0, length = Math.min(topPlugins.length, 12) ; i < length; i++) {
|
||||||
|
html += getPluginHtml(topPlugins[i], options, installedPlugins);
|
||||||
|
}
|
||||||
|
|
||||||
|
for (i = 0, length = availablePlugins.length; i < length; i++) {
|
||||||
|
|
||||||
|
plugin = availablePlugins[i];
|
||||||
|
|
||||||
var category = plugin.categoryDisplayName;
|
var category = plugin.categoryDisplayName;
|
||||||
|
|
||||||
|
|
@ -97,83 +150,7 @@
|
||||||
currentCategory = category;
|
currentCategory = category;
|
||||||
}
|
}
|
||||||
|
|
||||||
var href = plugin.externalUrl ? plugin.externalUrl : "addplugin.html?name=" + encodeURIComponent(plugin.name) + "&guid=" + plugin.guid;
|
html += getPluginHtml(plugin, options, installedPlugins);
|
||||||
|
|
||||||
if (options.context) {
|
|
||||||
href += "&context=" + options.context;
|
|
||||||
}
|
|
||||||
var target = plugin.externalUrl ? ' target="_blank"' : '';
|
|
||||||
|
|
||||||
html += "<div class='card backdropCard alternateHover bottomPaddedCard'>";
|
|
||||||
|
|
||||||
html += '<div class="cardBox visualCardBox">';
|
|
||||||
html += '<div class="cardScalable">';
|
|
||||||
|
|
||||||
html += '<div class="cardPadder"></div>';
|
|
||||||
|
|
||||||
html += '<a class="cardContent" href="' + href + '"' + target + '>';
|
|
||||||
if (plugin.thumbImage) {
|
|
||||||
html += '<div class="cardImage" style="background-image:url(\'' + plugin.thumbImage + '\');">';
|
|
||||||
} else {
|
|
||||||
html += '<div class="cardImage" style="background-image:url(\'css/images/items/list/collection.png\');">';
|
|
||||||
}
|
|
||||||
|
|
||||||
if (plugin.isPremium) {
|
|
||||||
if (plugin.price > 0) {
|
|
||||||
html += "<div class='premiumBanner'><img src='css/images/supporter/premiumflag.png' /></div>";
|
|
||||||
} else {
|
|
||||||
html += "<div class='premiumBanner'><img src='css/images/supporter/supporterflag.png' /></div>";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
html += "</div>";
|
|
||||||
|
|
||||||
// cardContent
|
|
||||||
html += "</a>";
|
|
||||||
|
|
||||||
// cardScalable
|
|
||||||
html += "</div>";
|
|
||||||
|
|
||||||
html += '<div class="cardFooter">';
|
|
||||||
|
|
||||||
html += "<div class='cardText'>";
|
|
||||||
html += plugin.name;
|
|
||||||
html += "</div>";
|
|
||||||
|
|
||||||
if (!plugin.isExternal) {
|
|
||||||
html += "<div class='cardText packageReviewText'>";
|
|
||||||
html += plugin.price > 0 ? "$" + plugin.price.toFixed(2) : Globalize.translate('LabelFree');
|
|
||||||
html += RatingHelpers.getStoreRatingHtml(plugin.avgRating, plugin.id, plugin.name, true);
|
|
||||||
|
|
||||||
html += "<span class='storeReviewCount'>";
|
|
||||||
html += " " + Globalize.translate('LabelNumberReviews').replace("{0}", plugin.totalRatings);
|
|
||||||
html += "</span>";
|
|
||||||
|
|
||||||
html += "</div>";
|
|
||||||
}
|
|
||||||
|
|
||||||
var installedPlugin = plugin.isApp ? null : installedPlugins.filter(function (ip) {
|
|
||||||
return ip.Id == plugin.guid;
|
|
||||||
})[0];
|
|
||||||
|
|
||||||
html += "<div class='cardText'>";
|
|
||||||
|
|
||||||
if (installedPlugin) {
|
|
||||||
html += Globalize.translate('LabelVersionInstalled').replace("{0}", installedPlugin.Version);
|
|
||||||
} else {
|
|
||||||
html += ' ';
|
|
||||||
}
|
|
||||||
html += "</div>";
|
|
||||||
|
|
||||||
// cardFooter
|
|
||||||
html += "</div>";
|
|
||||||
|
|
||||||
// cardBox
|
|
||||||
html += "</div>";
|
|
||||||
|
|
||||||
// card
|
|
||||||
html += "</div>";
|
|
||||||
|
|
||||||
pluginhtml += html;
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -181,11 +158,94 @@
|
||||||
$(options.noItemsElement).hide();
|
$(options.noItemsElement).hide();
|
||||||
}
|
}
|
||||||
|
|
||||||
$(options.catalogElement).html(pluginhtml);
|
$(options.catalogElement).html(html);
|
||||||
|
|
||||||
Dashboard.hideLoadingMsg();
|
Dashboard.hideLoadingMsg();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function getPluginHtml(plugin, options, installedPlugins) {
|
||||||
|
|
||||||
|
var html = '';
|
||||||
|
|
||||||
|
var href = plugin.externalUrl ? plugin.externalUrl : "addplugin.html?name=" + encodeURIComponent(plugin.name) + "&guid=" + plugin.guid;
|
||||||
|
|
||||||
|
if (options.context) {
|
||||||
|
href += "&context=" + options.context;
|
||||||
|
}
|
||||||
|
var target = plugin.externalUrl ? ' target="_blank"' : '';
|
||||||
|
|
||||||
|
html += "<div class='card backdropCard alternateHover bottomPaddedCard'>";
|
||||||
|
|
||||||
|
html += '<div class="cardBox visualCardBox">';
|
||||||
|
html += '<div class="cardScalable">';
|
||||||
|
|
||||||
|
html += '<div class="cardPadder"></div>';
|
||||||
|
|
||||||
|
html += '<a class="cardContent" href="' + href + '"' + target + '>';
|
||||||
|
if (plugin.thumbImage) {
|
||||||
|
html += '<div class="cardImage" style="background-image:url(\'' + plugin.thumbImage + '\');">';
|
||||||
|
} else {
|
||||||
|
html += '<div class="cardImage" style="background-image:url(\'css/images/items/list/collection.png\');">';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (plugin.isPremium) {
|
||||||
|
if (plugin.price > 0) {
|
||||||
|
html += "<div class='premiumBanner'><img src='css/images/supporter/premiumflag.png' /></div>";
|
||||||
|
} else {
|
||||||
|
html += "<div class='premiumBanner'><img src='css/images/supporter/supporterflag.png' /></div>";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
html += "</div>";
|
||||||
|
|
||||||
|
// cardContent
|
||||||
|
html += "</a>";
|
||||||
|
|
||||||
|
// cardScalable
|
||||||
|
html += "</div>";
|
||||||
|
|
||||||
|
html += '<div class="cardFooter">';
|
||||||
|
|
||||||
|
html += "<div class='cardText'>";
|
||||||
|
html += plugin.name;
|
||||||
|
html += "</div>";
|
||||||
|
|
||||||
|
if (!plugin.isExternal) {
|
||||||
|
html += "<div class='cardText packageReviewText'>";
|
||||||
|
html += plugin.price > 0 ? "$" + plugin.price.toFixed(2) : Globalize.translate('LabelFree');
|
||||||
|
html += RatingHelpers.getStoreRatingHtml(plugin.avgRating, plugin.id, plugin.name, true);
|
||||||
|
|
||||||
|
html += "<span class='storeReviewCount'>";
|
||||||
|
html += " " + Globalize.translate('LabelNumberReviews').replace("{0}", plugin.totalRatings);
|
||||||
|
html += "</span>";
|
||||||
|
|
||||||
|
html += "</div>";
|
||||||
|
}
|
||||||
|
|
||||||
|
var installedPlugin = plugin.isApp ? null : installedPlugins.filter(function (ip) {
|
||||||
|
return ip.Id == plugin.guid;
|
||||||
|
})[0];
|
||||||
|
|
||||||
|
html += "<div class='cardText'>";
|
||||||
|
|
||||||
|
if (installedPlugin) {
|
||||||
|
html += Globalize.translate('LabelVersionInstalled').replace("{0}", installedPlugin.Version);
|
||||||
|
} else {
|
||||||
|
html += ' ';
|
||||||
|
}
|
||||||
|
html += "</div>";
|
||||||
|
|
||||||
|
// cardFooter
|
||||||
|
html += "</div>";
|
||||||
|
|
||||||
|
// cardBox
|
||||||
|
html += "</div>";
|
||||||
|
|
||||||
|
// card
|
||||||
|
html += "</div>";
|
||||||
|
|
||||||
|
return html;
|
||||||
|
}
|
||||||
|
|
||||||
$(document).on('pageinitdepends', "#pluginCatalogPage", function () {
|
$(document).on('pageinitdepends', "#pluginCatalogPage", function () {
|
||||||
|
|
||||||
var page = this;
|
var page = this;
|
||||||
|
|
|
||||||
|
|
@ -847,6 +847,6 @@
|
||||||
"OptionBanner": "Banner",
|
"OptionBanner": "Banner",
|
||||||
"NoSlideshowContentFound": "No slideshow images were found.",
|
"NoSlideshowContentFound": "No slideshow images were found.",
|
||||||
"OptionPhotoSlideshow": "Photo slideshow",
|
"OptionPhotoSlideshow": "Photo slideshow",
|
||||||
"OptionBackdropSlideshow": "Backdrop slideshow"
|
"OptionBackdropSlideshow": "Backdrop slideshow",
|
||||||
|
"HeaderTopPlugins": "Top Plugins"
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue