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 @@
+ + + + diff --git a/dashboard-ui/scripts/indexpage.js b/dashboard-ui/scripts/indexpage.js index 65eea8d591..d9c0c49a71 100644 --- a/dashboard-ui/scripts/indexpage.js +++ b/dashboard-ui/scripts/indexpage.js @@ -4,11 +4,11 @@ var html = ''; - html += '
'; - html += ''; - html += '
' + view.name + '
'; + html += '
'; + + html += '
' + view.name + '
'; + html += '
'; - html += '
'; return html; } @@ -32,7 +32,9 @@ $('#divCollections', page).html(LibraryBrowser.getPosterViewHtml({ items: result.Items, - showTitle: true + showTitle: true, + shape: "backdrop", + centerText: true })); }); diff --git a/dashboard-ui/scripts/librarybrowser.js b/dashboard-ui/scripts/librarybrowser.js index 9209a9aec9..50cd2cbdf7 100644 --- a/dashboard-ui/scripts/librarybrowser.js +++ b/dashboard-ui/scripts/librarybrowser.js @@ -349,66 +349,109 @@ var items = options.items; + options.shape = options.shape || "portrait"; + 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; - - var cssClass = showText ? "posterViewItem" : "posterViewItem posterViewItemWithNoText"; - - html += "
"; + 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 += ''; + + var style = ""; + + if (imgUrl) { + style += 'background-image:url(\'' + imgUrl + '\');'; + } + + if (background) { + style += "background-color:" + background + ";"; + } + + html += '
'; + + if (!imgUrl && !options.showTitle) { + html += "
"; + html += item.Name; + html += "
"; + } + + var cssclass = options.centerText ? "posterItemText posterItemTextCentered" : "posterItemText"; + + if (options.showParentTitle) { + + html += "
"; + html += item.SeriesName || item.Album || item.Artist || " "; + html += "
"; + } + + if (options.showTitle) { + + html += "
"; html += item.Name; html += "
"; } @@ -417,84 +460,8 @@ html += LibraryBrowser.getNewIndicatorHtml(item); } - 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 += "
"; - - if (options.preferBackdrop && item.BackdropImageTags && item.BackdropImageTags.length) { - html += ""; - } else if (hasPrimaryImage) { - - var height = 300; - var width = primaryImageAspectRatio ? parseInt(height * primaryImageAspectRatio) : null; - - html += ""; - - } else if (item.BackdropImageTags && item.BackdropImageTags.length) { - html += ""; - } else { - html += ""; - } - - if (showText) { - html += "
"; - if (item.SeriesName != null) { - html += item.SeriesName; - html += "
"; - html += "
"; - } - if (item.ParentIndexNumber != null) { - html += item.ParentIndexNumber + "."; - } - if (item.IndexNumber != null) { - html += item.IndexNumber + " -"; - } - - html += " " + item.Name; - html += "
"; - } - - if (options.showNewIndicator !== false) { - html += LibraryBrowser.getNewIndicatorHtml(item); - } - - 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 })); });