improved tile styles

dashboard-ui/css/librarybrowser.css

@@ -37,10 +37,6 @@
     margin-bottom: 5px;
 }
 
-.firstListHeader {
-    margin-top: .75em;
-}
-
 .libraryViewNav {
     text-align: center;
 }

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 {
+.posterItemTextCentered {
-        padding-top: 2px;
+    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;
+        height: 160px;
-        background-size: 200px auto;
     }
 
 .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;
+    }
+}

dashboard-ui/musicrecommended.html

@@ -26,6 +26,20 @@
 
                 <div id="recentlyAddedSongs">
                 </div>
+
+                <div id="recentlyPlayed" style="display: none;">
+                    <h1 class="listHeader">Recently Played</h1>
+
+                    <div id="recentlyPlayedSongs">
+                    </div>
+                </div>
+
+                <div id="topPlayed" style="display: none;">
+                    <h1 class="listHeader">Most Frequently Played</h1>
+
+                    <div id="topPlayedSongs">
+                    </div>
+                </div>
             </div>
         </div>
     </div>

dashboard-ui/scripts/indexpage.js

@@ -4,11 +4,11 @@
 
         var html = '';
 
-        html += '<div class="posterViewItem">';
+        html += '<a class="posterItem backdropPosterItem" href="' + view.url + '">';
-        html += '<a href="' + view.url + '">';
+
-        html += '<img style="background: ' + view.background + ';" src="' + view.img + '"><div class="posterViewItemText">' + view.name + '</div>';
+        html += '<div class="posterItemImage" style="background-color: ' + view.background + ';background-image:url(\'' + view.img + '\');"></div><div class="posterItemText posterItemTextCentered">' + view.name + '</div>';
+
         html += '</a>';
-        html += '</div>';
 
         return html;
     }
@@ -32,7 +32,9 @@
 
             $('#divCollections', page).html(LibraryBrowser.getPosterViewHtml({
                 items: result.Items,
-                showTitle: true
+                showTitle: true,
+                shape: "backdrop",
+                centerText: true
             }));
 
         });

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 imgUrl = null;
-
+                var background;
-                var showText = options.showTitle || !hasPrimaryImage;
-
-                var cssClass = showText ? "posterViewItem" : "posterViewItem posterViewItemWithNoText";
-
-                html += "<div class='" + cssClass + "'><a href='" + LibraryBrowser.getHref(item) + "'>";
 
                 if (options.preferBackdrop && item.BackdropImageTags && item.BackdropImageTags.length) {
-                    html += "<img src='" + ApiClient.getImageUrl(item.Id, {
+
+                    imgUrl = ApiClient.getImageUrl(item.Id, {
                         type: "Backdrop",
                         height: 198,
                         width: 352,
                         tag: item.BackdropImageTags[0]
+                    });
 
-                    }) + "' />";
+                } else if (item.ImageTags && item.ImageTags.Primary) {
-                } else if (hasPrimaryImage) {
 
                     var height = 300;
                     var width = primaryImageAspectRatio ? parseInt(height * primaryImageAspectRatio) : null;
 
-                    html += "<img src='" + ApiClient.getImageUrl(item.Id, {
+                    imgUrl = ApiClient.getImageUrl(item.Id, {
                         type: "Primary",
                         height: height,
                         width: width,
                         tag: item.ImageTags.Primary
-
+                    });
-                    }) + "' />";
 
                 } else if (item.BackdropImageTags && item.BackdropImageTags.length) {
-                    html += "<img src='" + ApiClient.getImageUrl(item.Id, {
+
+                    imgUrl = ApiClient.getImageUrl(item.Id, {
                         type: "Backdrop",
                         height: 198,
                         width: 352,
                         tag: item.BackdropImageTags[0]
+                    });
 
-                    }) + "' />";
                 }
                 else if (item.MediaType == "Audio" || item.Type == "MusicAlbum" || item.Type == "MusicArtist") {
 
-                    html += "<img style='background:" + defaultBackground + ";' src='css/images/items/list/audio.png' />";
+                    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 += "<img style='background:" + defaultBackground + ";' src='css/images/items/list/video.png' />";
+                    if (item.Name && options.showTitle) {
+                        imgUrl = 'css/images/items/list/video.png';
+                        background = defaultBackground;
+                    } else {
+                        background = '#555';
+                    }
                 }
                 else {
-
+                    if (item.Name && options.showTitle) {
-                    html += "<img style='background:" + LibraryBrowser.getMetroColor(item.Id) + ";' src='css/images/items/list/collection.png' />";
+                        imgUrl = 'css/images/items/list/collection.png';
+                        background = LibraryBrowser.getMetroColor(item.Id);
+                    } else {
+                        background = '#555';
+                    }
                 }
 
-                if (showText) {
+                html += '<a class="posterItem ' + options.shape + 'PosterItem" href="' + LibraryBrowser.getHref(item, options.context) + '">';
-                    html += "<div class='posterViewItemText'>";
+
+                var style = "";
+
+                if (imgUrl) {
+                    style += 'background-image:url(\'' + imgUrl + '\');';
+                }
+
+                if (background) {
+                    style += "background-color:" + background + ";";
+                }
+
+                html += '<div class="posterItemImage" style="' + style + '"></div>';
+
+                if (!imgUrl && !options.showTitle) {
+                    html += "<div class='posterItemDefaultText'>";
+                    html += item.Name;
+                    html += "</div>";
+                }
+
+                var cssclass = options.centerText ? "posterItemText posterItemTextCentered" : "posterItemText";
+
+                if (options.showParentTitle) {
+
+                    html += "<div class='" + cssclass + "'>";
+                    html += item.SeriesName || item.Album || item.Artist || "&nbsp;";
+                    html += "</div>";
+                }
+
+                if (options.showTitle) {
+
+                    html += "<div class='" + cssclass + "'>";
                     html += item.Name;
                     html += "</div>";
                 }
@@ -417,84 +460,8 @@
                     html += LibraryBrowser.getNewIndicatorHtml(item);
                 }
 
-                html += "</a></div>";
+                html += "</a>";
-            }
 
-            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 += "<div class='" + cssClass + "'><a href='" + LibraryBrowser.getHref(item, "tv") + "'>";
-
-                if (options.preferBackdrop && item.BackdropImageTags && item.BackdropImageTags.length) {
-                    html += "<img src='" + ApiClient.getImageUrl(item.Id, {
-                        type: "Backdrop",
-                        height: 198,
-                        width: 352,
-                        tag: item.BackdropImageTags[0]
-                    }) + "' />";
-                } else if (hasPrimaryImage) {
-
-                    var height = 300;
-                    var width = primaryImageAspectRatio ? parseInt(height * primaryImageAspectRatio) : null;
-
-                    html += "<img src='" + ApiClient.getImageUrl(item.Id, {
-                        type: "Primary",
-                        height: height,
-                        width: width,
-                        tag: item.ImageTags.Primary
-                    }) + "' />";
-
-                } else if (item.BackdropImageTags && item.BackdropImageTags.length) {
-                    html += "<img src='" + ApiClient.getImageUrl(item.Id, {
-                        type: "Backdrop",
-                        height: 198,
-                        width: 352,
-                        tag: item.BackdropImageTags[0]
-                    }) + "' />";
-                } else {
-                    html += "<img style='background:" + defaultBackground + ";' src='css/images/items/list/collection.png' />";
-                }
-
-                if (showText) {
-                    html += "<div class='posterViewItemText posterViewItemPrimaryText'>";
-                    if (item.SeriesName != null) {
-                        html += item.SeriesName;
-                        html += "</div>";
-                        html += "<div class='posterViewItemText'>";
-                    }
-                    if (item.ParentIndexNumber != null) {
-                        html += item.ParentIndexNumber + ".";
-                    }
-                    if (item.IndexNumber != null) {
-                        html += item.IndexNumber + " -";
-                    }
-
-                    html += " " + item.Name;
-                    html += "</div>";
-                }
-
-                if (options.showNewIndicator !== false) {
-                    html += LibraryBrowser.getNewIndicatorHtml(item);
-                }
-
-                html += "</a></div>";
             }
 
             return html;

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"

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
             }));
 
         });

dashboard-ui/scripts/plugincatalogpage.js

@@ -55,7 +55,7 @@
 
             var color = plugin.tileColor || LibraryBrowser.getMetroColor(plugin.name);
 
-            html += "<div class='posterItemText' style='background:" + color + "'>";
+            html += "<div class='posterItemText posterItemTextCentered' style='background:" + color + "'>";
 
             var installedPlugin = installedPlugins.filter(function (ip) {
                 return ip.Name == plugin.name;

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
 			}));
 
 		});