diff --git a/dashboard-ui/css/librarybrowser.css b/dashboard-ui/css/librarybrowser.css
index 5eb5aab14e..b266c79ffd 100644
--- a/dashboard-ui/css/librarybrowser.css
+++ b/dashboard-ui/css/librarybrowser.css
@@ -37,10 +37,6 @@
margin-bottom: 5px;
}
-.firstListHeader {
- margin-top: .75em;
-}
-
.libraryViewNav {
text-align: center;
}
diff --git a/dashboard-ui/css/posteritem.css b/dashboard-ui/css/posteritem.css
index 0b511affdb..21f47df581 100644
--- a/dashboard-ui/css/posteritem.css
+++ b/dashboard-ui/css/posteritem.css
@@ -18,10 +18,9 @@
}
.posterItemImage {
- background-size: contain;
+ background-size: 100% auto;
background-repeat: no-repeat;
background-position: center bottom;
- overflow: hidden;
}
.defaultPosterItemImage {
@@ -38,17 +37,28 @@
text-shadow: none;
}
- .posterItemText + .posterItemText {
- padding-top: 2px;
- }
+.posterItemTextCentered {
+ text-align: center;
+}
+
+.posterItemText + .posterItemText {
+ padding-top: 2px;
+}
+
+.posterItemDefaultText {
+ position: absolute;
+ top: 30%;
+ left: 0;
+ right: 0;
+ text-align: center;
+}
.squarePosterItem {
- width: 200px;
+ width: 160px;
}
.squarePosterItem .posterItemImage {
- height: 200px;
- background-size: 200px auto;
+ height: 160px;
}
.backdropPosterItem {
@@ -57,5 +67,123 @@
.backdropPosterItem .posterItemImage {
height: 90px;
- background-size: 160px auto;
}
+
+.portraitPosterItem {
+ width: 100px;
+}
+
+ .portraitPosterItem .posterItemImage {
+ height: 150px;
+ }
+
+
+@media all and (min-width: 750px) {
+
+ .backdropPosterItem {
+ width: 192px;
+ }
+
+ .backdropPosterItem .posterItemImage {
+ height: 108px;
+ }
+
+ .squarePosterItem {
+ width: 160px;
+ }
+
+ .squarePosterItem .posterItemImage {
+ height: 160px;
+ }
+
+ .portraitPosterItem {
+ width: 110px;
+ }
+
+ .portraitPosterItem .posterItemImage {
+ height: 165px;
+ }
+}
+
+@media all and (min-width: 1200px) {
+
+ .backdropPosterItem {
+ width: 272px;
+ }
+
+ .backdropPosterItem .posterItemImage {
+ height: 153px;
+ }
+
+ .squarePosterItem {
+ width: 160px;
+ }
+
+ .squarePosterItem .posterItemImage {
+ height: 160px;
+ }
+
+ .portraitPosterItem {
+ width: 100px;
+ }
+
+ .portraitPosterItem .posterItemImage {
+ height: 150px;
+ }
+
+ .posterItem {
+ font-size: 15px;
+ }
+}
+
+@media all and (min-width: 1440px) {
+
+
+
+ .squarePosterItem {
+ width: 170px;
+ }
+
+ .squarePosterItem .posterItemImage {
+ height: 170px;
+ }
+
+ .portraitPosterItem {
+ width: 112px;
+ }
+
+ .portraitPosterItem .posterItemImage {
+ height: 168px;
+ }
+}
+
+@media all and (min-width: 1920px) {
+
+ .backdropPosterItem {
+ width: 304px;
+ }
+
+ .backdropPosterItem .posterItemImage {
+ height: 171px;
+ }
+
+ .squarePosterItem {
+ width: 185px;
+ }
+
+ .squarePosterItem .posterItemImage {
+ height: 185px;
+ }
+
+ .portraitPosterItem {
+ width: 126px;
+ }
+
+ .portraitPosterItem .posterItemImage {
+ height: 189px;
+ }
+
+ .posterItem {
+ font-size: 16px;
+ }
+}
diff --git a/dashboard-ui/musicrecommended.html b/dashboard-ui/musicrecommended.html
index 885b7b2101..387e67cb48 100644
--- a/dashboard-ui/musicrecommended.html
+++ b/dashboard-ui/musicrecommended.html
@@ -26,6 +26,20 @@
";
+ var imgUrl = null;
+ var background;
if (options.preferBackdrop && item.BackdropImageTags && item.BackdropImageTags.length) {
- html += "
";
- } else if (hasPrimaryImage) {
+ } else if (item.ImageTags && item.ImageTags.Primary) {
var height = 300;
var width = primaryImageAspectRatio ? parseInt(height * primaryImageAspectRatio) : null;
- html += "
";
+ });
} else if (item.BackdropImageTags && item.BackdropImageTags.length) {
- html += "
";
}
else if (item.MediaType == "Audio" || item.Type == "MusicAlbum" || item.Type == "MusicArtist") {
- html += "
";
+ if (item.Name && options.showTitle) {
+ imgUrl = 'css/images/items/list/audio.png';
+ background = defaultBackground;
+ } else {
+ background = '#555';
+ }
}
else if (item.MediaType == "Video" || item.Type == "Season" || item.Type == "Series") {
- html += "
";
+ if (item.Name && options.showTitle) {
+ imgUrl = 'css/images/items/list/video.png';
+ background = defaultBackground;
+ } else {
+ background = '#555';
+ }
}
else {
-
- html += "
";
+ if (item.Name && options.showTitle) {
+ imgUrl = 'css/images/items/list/collection.png';
+ background = LibraryBrowser.getMetroColor(item.Id);
+ } else {
+ background = '#555';
+ }
}
- if (showText) {
- html += "";
- }
+ html += "";
- return html;
- },
-
- getEpisodePosterViewHtml: function (options) {
-
- var items = options.items;
-
- var primaryImageAspectRatio = options.useAverageAspectRatio ? LibraryBrowser.getAveragePrimaryImageAspectRatio(items) : null;
-
- var html = "";
-
- for (var i = 0, length = items.length; i < length; i++) {
- var item = items[i];
-
- var hasPrimaryImage = item.ImageTags && item.ImageTags.Primary;
-
- var showText = options.showTitle || !hasPrimaryImage || (item.Type !== 'Movie' && item.Type !== 'Series' && item.Type !== 'Season' && item.Type !== 'Trailer');
-
- var cssClass = showText ? "posterViewItem posterViewItemWithDualText" : "posterViewItem posterViewItemWithNoText";
-
- html += "
";
}
return html;
@@ -1110,7 +1077,7 @@
var miscInfo = [];
var text;
-
+
if (item.ProductionYear && item.Type == "Series") {
if (item.Status == "Continuing") {
@@ -1135,13 +1102,13 @@
}
if (item.Type != "Series" && item.Type != "Episode") {
-
+
if (item.ProductionYear) {
miscInfo.push(item.ProductionYear);
}
else if (item.PremiereDate) {
-
+
try {
text = "-" + parseISO8601Date(item.PremiereDate, { toLocal: true }).getFullYear();
miscInfo.push(text);
diff --git a/dashboard-ui/scripts/moviesrecommended.js b/dashboard-ui/scripts/moviesrecommended.js
index 3e83e0cec8..a79a1ecbec 100644
--- a/dashboard-ui/scripts/moviesrecommended.js
+++ b/dashboard-ui/scripts/moviesrecommended.js
@@ -9,7 +9,7 @@
SortBy: "DateCreated",
SortOrder: "Descending",
IncludeItemTypes: "Movie",
- Limit: 5,
+ Limit: 7,
Recursive: true,
Fields: "PrimaryImageAspectRatio",
Filters: "IsUnplayed"
@@ -32,7 +32,7 @@
SortOrder: "Descending",
IncludeItemTypes: "Movie",
Filters: "IsResumable",
- Limit: 5,
+ Limit: 7,
Recursive: true,
Fields: "PrimaryImageAspectRatio"
};
@@ -58,7 +58,7 @@
SortBy: "DateCreated",
SortOrder: "Descending",
IncludeItemTypes: "Trailer",
- Limit: 5,
+ Limit: 7,
Recursive: true,
Fields: "PrimaryImageAspectRatio,DateCreated",
Filters: "IsUnplayed"
diff --git a/dashboard-ui/scripts/musicrecommended.js b/dashboard-ui/scripts/musicrecommended.js
index 218367b720..dfea068e74 100644
--- a/dashboard-ui/scripts/musicrecommended.js
+++ b/dashboard-ui/scripts/musicrecommended.js
@@ -19,7 +19,8 @@
$('#recentlyAddedAlbums', page).html(LibraryBrowser.getPosterViewHtml({
items: result.Items,
useAverageAspectRatio: true,
- showNewIndicator: false
+ showNewIndicator: false,
+ shape: "square"
}));
});
@@ -31,7 +32,7 @@
IncludeItemTypes: "Audio",
Limit: 5,
Recursive: true,
- Fields: "PrimaryImageAspectRatio"
+ Fields: "PrimaryImageAspectRatio,AudioInfo"
};
ApiClient.getItems(Dashboard.getCurrentUserId(), options).done(function (result) {
@@ -39,7 +40,70 @@
$('#recentlyAddedSongs', page).html(LibraryBrowser.getPosterViewHtml({
items: result.Items,
useAverageAspectRatio: true,
- showNewIndicator: false
+ showNewIndicator: false,
+ shape: "square",
+ showTitle: true,
+ showParentTitle: true
+ }));
+
+ });
+
+ options = {
+
+ SortBy: "DatePlayed",
+ SortOrder: "Descending",
+ IncludeItemTypes: "Audio",
+ Limit: 5,
+ Recursive: true,
+ Fields: "PrimaryImageAspectRatio,AudioInfo",
+ Filters: "IsPlayed"
+ };
+
+ ApiClient.getItems(Dashboard.getCurrentUserId(), options).done(function (result) {
+
+ if (result.Items.length) {
+ $('#recentlyPlayed', page).show();
+ } else {
+ $('#recentlyPlayed', page).hide();
+ }
+
+ $('#recentlyPlayedSongs', page).html(LibraryBrowser.getPosterViewHtml({
+ items: result.Items,
+ useAverageAspectRatio: true,
+ showNewIndicator: false,
+ shape: "square",
+ showTitle: true,
+ showParentTitle: true
+ }));
+
+ });
+
+ options = {
+
+ SortBy: "PlayCount",
+ SortOrder: "Descending",
+ IncludeItemTypes: "Audio",
+ Limit: 5,
+ Recursive: true,
+ Fields: "PrimaryImageAspectRatio,AudioInfo",
+ Filters: "IsPlayed"
+ };
+
+ ApiClient.getItems(Dashboard.getCurrentUserId(), options).done(function (result) {
+
+ if (result.Items.length) {
+ $('#topPlayed', page).show();
+ } else {
+ $('#topPlayed', page).hide();
+ }
+
+ $('#topPlayedSongs', page).html(LibraryBrowser.getPosterViewHtml({
+ items: result.Items,
+ useAverageAspectRatio: true,
+ showNewIndicator: false,
+ shape: "square",
+ showTitle: true,
+ showParentTitle: true
}));
});
diff --git a/dashboard-ui/scripts/plugincatalogpage.js b/dashboard-ui/scripts/plugincatalogpage.js
index d5abd42fb8..7db37446a3 100644
--- a/dashboard-ui/scripts/plugincatalogpage.js
+++ b/dashboard-ui/scripts/plugincatalogpage.js
@@ -55,7 +55,7 @@
var color = plugin.tileColor || LibraryBrowser.getMetroColor(plugin.name);
- html += "
";
+ html += "
";
var installedPlugin = installedPlugins.filter(function (ip) {
return ip.Name == plugin.name;
diff --git a/dashboard-ui/scripts/tvrecommended.js b/dashboard-ui/scripts/tvrecommended.js
index 58aa760832..d090909803 100644
--- a/dashboard-ui/scripts/tvrecommended.js
+++ b/dashboard-ui/scripts/tvrecommended.js
@@ -17,10 +17,13 @@
ApiClient.getItems(Dashboard.getCurrentUserId(), options).done(function (result) {
- $('#recentlyAddedItems', page).html(LibraryBrowser.getEpisodePosterViewHtml({
+ $('#recentlyAddedItems', page).html(LibraryBrowser.getPosterViewHtml({
items: result.Items,
useAverageAspectRatio: true,
- showNewIndicator: false
+ showNewIndicator: false,
+ shape: "backdrop",
+ showTitle: true,
+ showParentTitle: true
}));
});
@@ -45,9 +48,12 @@
$('#resumableSection', page).hide();
}
- $('#resumableItems', page).html(LibraryBrowser.getEpisodePosterViewHtml({
+ $('#resumableItems', page).html(LibraryBrowser.getPosterViewHtml({
items: result.Items,
- useAverageAspectRatio: true
+ useAverageAspectRatio: true,
+ shape: "backdrop",
+ showTitle: true,
+ showParentTitle: true
}));
});