fixes #944 - Add card views

dashboard-ui/css/card.css

@@ -90,8 +90,9 @@
 }
 
 .visualCardBox-b {
-    border-radius: 3px;
     background: rgb(51, 51, 51);
+    border: 1px solid rgb(31, 31, 31);
+    border-radius: 3px;
 }
 
 .cardScalable {
@@ -130,9 +131,9 @@
     right: 0;
 }
 
-.cardContent:hover .cardImage {
+    .cardContent:hover .cardImage {
-    opacity: .5;
+        opacity: .5;
-}
+    }
 
 /*.preview-overlay-container {
     -moz-border-radius: 2px;

dashboard-ui/css/site.css

@@ -489,10 +489,10 @@ h1 .imageLink {
 
     .mediaLocationsHeader .ui-btn {
         position: absolute;
-        right: -6px;
+        right: -3px;
         margin-top: 0 !important;
         margin-bottom: 0 !important;
-        top: 6px;
+        top: 4px;
     }
 
 #ulDirectoryPickerList a {

dashboard-ui/episodes.html

@@ -47,8 +47,9 @@
                     <div>
                         <label for="selectView">${LabelView}</label>
                         <select id="selectView">
-                            <option value="Poster">${OptionPoster}</option>
                             <option value="List">${OptionList}</option>
+                            <option value="Poster">${OptionPoster}</option>
+                            <option value="PosterCard">${OptionPosterCard}</option>
                         </select>
                     </div>
                     <br />

dashboard-ui/games.html

@@ -38,8 +38,9 @@
                     <div>
                         <label for="selectView">${LabelView}</label>
                         <select id="selectView">
-                            <option value="Poster">${OptionPoster}</option>
                             <option value="List">${OptionList}</option>
+                            <option value="Poster">${OptionPoster}</option>
+                            <option value="PosterCard">${OptionPosterCard}</option>
                         </select>
                     </div>
                     <br />

dashboard-ui/moviegenres.html

@@ -35,6 +35,15 @@
 
                 <div class="tabView viewTab">
 
+                    <div>
+                        <label for="selectView">${LabelView}</label>
+                        <select id="selectView">
+                            <option value="Poster">${OptionPoster}</option>
+                            <option value="Thumb">${OptionThumb}</option>
+                            <option value="ThumbCard">${OptionThumbCard}</option>
+                        </select>
+                    </div>
+                    <br />
                     <div>
                         <label for="selectPageSize">${LabelPageSize}</label>
                         <select id="selectPageSize"></select>

dashboard-ui/movies.html

@@ -49,10 +49,11 @@
                     <div>
                         <label for="selectView">${LabelView}</label>
                         <select id="selectView">
-                            <option value="Thumb">${OptionThumb}</option>
-                            <option value="Poster">${OptionPoster}</option>
                             <option value="Banner">${OptionBanner}</option>
                             <option value="List">${OptionList}</option>
+                            <option value="Poster">${OptionPoster}</option>
+                            <option value="Thumb">${OptionThumb}</option>
+                            <option value="ThumbCard">${OptionThumbCard}</option>
                             <option value="Timeline">${OptionTimeline}</option>
                         </select>
                     </div>

dashboard-ui/musicalbumartists.html

@@ -43,8 +43,9 @@
                     <div>
                         <label for="selectView">${LabelView}</label>
                         <select id="selectView">
-                            <option value="Poster">${OptionPoster}</option>
                             <option value="List">${OptionList}</option>
+                            <option value="Poster">${OptionPoster}</option>
+                            <option value="PosterCard">${OptionPosterCard}</option>
                         </select>
                     </div>
                     <br />

dashboard-ui/musicalbums.html

@@ -43,8 +43,9 @@
                     <div>
                         <label for="selectView">${LabelView}</label>
                         <select id="selectView">
-                            <option value="Poster">${OptionPoster}</option>
                             <option value="List">${OptionList}</option>
+                            <option value="Poster">${OptionPoster}</option>
+                            <option value="PosterCard">${OptionPosterCard}</option>
                             <option value="Timeline">${OptionTimeline}</option>
                         </select>
                     </div>

dashboard-ui/musicartists.html

@@ -42,8 +42,9 @@
                     <div>
                         <label for="selectView">${LabelView}</label>
                         <select id="selectView">
-                            <option value="Poster">${OptionPoster}</option>
                             <option value="List">${OptionList}</option>
+                            <option value="Poster">${OptionPoster}</option>
+                            <option value="PosterCard">${OptionPosterCard}</option>
                         </select>
                     </div>
                     <br />

dashboard-ui/scripts/episodes.js

@@ -59,11 +59,21 @@
                     showTitle: true,
                     showParentTitle: true,
                     overlayText: true,
-                    selectionPanel: true,
                     lazy: true,
                     context: 'tv'
                 });
             }
+            else if (view == "PosterCard") {
+                html += LibraryBrowser.getPosterViewHtml({
+                    items: result.Items,
+                    shape: "backdrop",
+                    showTitle: true,
+                    showParentTitle: true,
+                    lazy: true,
+                    context: 'tv',
+                    cardLayout: true
+                });
+            }
 
             html += pagingHtml;
 

dashboard-ui/scripts/gamespage.js

@@ -61,6 +61,17 @@
                     centerText: true
                 });
             }
+            else if (view == "PosterCard") {
+                html = LibraryBrowser.getPosterViewHtml({
+                    items: result.Items,
+                    shape: "auto",
+                    context: 'games',
+                    showTitle: true,
+                    showParentTitle: true,
+                    cardLayout: true
+                });
+            }
+
 
             html += pagingHtml;
 

dashboard-ui/scripts/gamesrecommendedpage.js

@@ -10,7 +10,7 @@
         var options = {
 
             IncludeItemTypes: "Game",
-            Limit: 8,
+            Limit: 18,
             Fields: "PrimaryImageAspectRatio",
             ParentId: parentId
         };
@@ -33,7 +33,7 @@
             SortBy: "DatePlayed",
             SortOrder: "Descending",
             MediaTypes: "Game",
-            Limit: 8,
+            Limit: 18,
             Recursive: true,
             Filters: "IsPlayed",
             Fields: "ItemCounts,AudioInfo,PrimaryImageAspectRatio",

dashboard-ui/scripts/librarybrowser.js

@@ -1217,7 +1217,7 @@
                     cssClass += ' itemWithAction';
                 }
 
-                html += '<a' + dataAttributes + ' class="' + cssClass + '" href="' + href + '"' + defaultActionAttribute + '>';
+                html += '<div' + dataAttributes + ' class="' + cssClass + '">';
 
                 var style = "";
 
@@ -1250,7 +1250,7 @@
                 html += '<div class="cardScalable">';
 
                 html += '<div class="cardPadder"></div>';
-                html += '<div class="cardContent">';
+                html += '<a class="cardContent" href="' + href + '"' + defaultActionAttribute + '>';
                 html += '<div class="' + imageCssClass + '" style="' + style + '"' + dataSrc + '></div>';
 
                 html += '<div class="cardOverlayTarget"></div>';
@@ -1292,7 +1292,7 @@
                 }
 
                 // cardContent
-                html += '</div>';
+                html += '</a>';
 
                 // cardScalable
                 html += '</div>';
@@ -1304,7 +1304,7 @@
                 // cardBox
                 html += '</div>';
 
-                html += "</a>";
+                html += "</div>";
 
             }
 
@@ -1317,6 +1317,12 @@
 
             html += '<div class="' + footerClass + '">';
 
+            if (options.cardLayout) {
+                html += '<div class="cardText" style="text-align:right; float:right;">';
+                html += '<button class="listviewMenuButton" type="button" data-inline="true" data-iconpos="notext" data-icon="ellipsis-v" style="margin: 4px 0 0;"></button>';
+                html += "</div>";
+            }
+
             var name = LibraryBrowser.getPosterViewDisplayName(item, options.displayAsSpecial);
 
             if (!imgUrl && !options.showTitle) {
@@ -1346,6 +1352,19 @@
                 lines.push(itemCountHtml);
             }
 
+            if (options.showSongCount) {
+
+                var songLine = '';
+
+                if (item.SongCount) {
+                    songLine = item.SongCount == 1 ?
+					Globalize.translate('ValueOneSong') :
+					Globalize.translate('ValueSongCount', item.SongCount);
+                }
+
+                lines.push(songLine);
+            }
+
             if (options.showPremiereDate && item.PremiereDate) {
 
                 try {
@@ -1363,6 +1382,18 @@
                 lines.push(item.ProductionYear || '');
             }
 
+            if (options.showSeriesYear) {
+
+                if (item.Status == "Continuing") {
+
+                    lines.push(Globalize.translate('ValueSeriesYearToPresent', item.ProductionYear || ''));
+
+                } else {
+                    lines.push(item.ProductionYear || '');
+                }
+
+            }
+
             html += LibraryBrowser.getCardTextLines(lines, cssClass, !options.overlayText);
 
             if (options.overlayText) {

dashboard-ui/scripts/librarylist.js

@@ -319,7 +319,7 @@
         var displayContextItem = card;
 
         if ($(card).hasClass('listviewMenuButton')) {
-            card = $(card).parents('.listItem')[0];
+            card = $(card).parents('.listItem,.card')[0];
         }
 
         var itemId = card.getAttribute('data-itemid');
@@ -342,7 +342,7 @@
             html += '<ul data-role="listview" style="min-width: 240px;">';
             html += '<li data-role="list-divider">' + Globalize.translate('HeaderMenu') + '</li>';
 
-            var href = card.getAttribute('data-href') || card.href;
+            var href = card.getAttribute('data-href') || card.href || $('a', card).attr('href');
 
             if (commands.indexOf('playlist') != -1) {
                 html += '<li data-icon="plus"><a href="#" class="btnAddToPlaylist" data-itemid="' + itemId + '">' + Globalize.translate('ButtonAddToPlaylist') + '</a></li>';

dashboard-ui/scripts/medialibrarypage.js

@@ -3,7 +3,7 @@
     onPageInit: function () {
 
         var page = this;
-        $('#selectCollectionType', page).on('change', function() {
+        $('#selectCollectionType', page).on('change', function () {
 
             var index = this.selectedIndex;
             if (index != -1) {
@@ -93,11 +93,11 @@
 
         html += '<p style="padding-left:.5em;">';
 
-		html += Globalize.translate('LabelFolderTypeValue').replace('{0}', '<b>' + typeName + '</b>');
+        html += Globalize.translate('LabelFolderTypeValue').replace('{0}', '<b>' + typeName + '</b>');
-		html += '</p><ul class="mediaFolderLocations" data-inset="true" data-role="listview" data-split-icon="minus">';
+        html += '</p><ul class="mediaFolderLocations" data-inset="true" data-role="listview" data-split-icon="minus">';
 
         html += '<li data-role="list-divider" class="mediaLocationsHeader">' + Globalize.translate('HeaderMediaLocations');
-        html += '<button type="button" data-icon="plus" data-mini="true" data-inline="true" data-iconpos="notext" onclick="MediaLibraryPage.addMediaLocation(' + index + ');"></button>';
+        html += '<button type="button" data-icon="plus" data-mini="true" data-iconpos="notext" data-inline="true" onclick="MediaLibraryPage.addMediaLocation(' + index + ');">' + Globalize.translate('ButtonAdd') + '</button>';
         html += '</li>';
 
         for (var i = 0, length = virtualFolder.Locations.length; i < length; i++) {
@@ -115,9 +115,9 @@
         }
 
         html += '<p>';
-        html += '<button type="button" data-inline="true" data-icon="minus" data-folderindex="' + index + '" onclick="MediaLibraryPage.deleteVirtualFolder(this);" data-mini="true">'+Globalize.translate('ButtonRemove')+'</button>';
+        html += '<button type="button" data-inline="true" data-icon="minus" data-folderindex="' + index + '" onclick="MediaLibraryPage.deleteVirtualFolder(this);" data-mini="true">' + Globalize.translate('ButtonRemove') + '</button>';
-        html += '<button type="button" data-inline="true" data-icon="edit" data-folderindex="' + index + '" onclick="MediaLibraryPage.renameVirtualFolder(this);" data-mini="true">'+Globalize.translate('ButtonRename')+'</button>';
+        html += '<button type="button" data-inline="true" data-icon="edit" data-folderindex="' + index + '" onclick="MediaLibraryPage.renameVirtualFolder(this);" data-mini="true">' + Globalize.translate('ButtonRename') + '</button>';
-        html += '<button type="button" data-inline="true" data-icon="edit" data-folderindex="' + index + '" onclick="MediaLibraryPage.changeCollectionType(this);" data-mini="true">'+Globalize.translate('ButtonChangeType')+'</button>';
+        html += '<button type="button" data-inline="true" data-icon="edit" data-folderindex="' + index + '" onclick="MediaLibraryPage.changeCollectionType(this);" data-mini="true">' + Globalize.translate('ButtonChangeType') + '</button>';
         html += '</p>';
 
         html += '</div>';
@@ -281,7 +281,7 @@
         var msg = Globalize.translate('MessageAreYouSureYouWishToRemoveMediaFolder');
 
         if (locations.length) {
-            msg += "<br/><br/>"+Globalize.translate("MessageTheFollowingLocationWillBeRemovedFromLibrary")+"<br/><br/>";
+            msg += "<br/><br/>" + Globalize.translate("MessageTheFollowingLocationWillBeRemovedFromLibrary") + "<br/><br/>";
             msg += locations.join("<br/>");
         }
 

dashboard-ui/scripts/mediaplayer-video.js

@@ -1119,7 +1119,8 @@
                 html += '<source type="application/x-mpegURL" src="' + hlsVideoUrl + '" />';
             }
 
-            var mp4BeforeWebm = self.getVideoTranscodingExtension() != '.webm';
+            // Live streams seem to function better with mp4
+            var mp4BeforeWebm = self.getVideoTranscodingExtension() != '.webm' || !mediaSource.RunTimeTicks;
 
             if (mp4BeforeWebm) {
                 html += '<source type="video/mp4" src="' + mp4VideoUrl + '" />';

dashboard-ui/scripts/moviegenres.js

@@ -1,5 +1,7 @@
 (function ($, document) {
 
+    var view = LibraryBrowser.getDefaultItemsView('Thumb', 'Thumb');
+
     // The base query options
     var query = {
 
@@ -39,14 +41,41 @@
 
             updateFilterControls(page);
 
-            html = LibraryBrowser.getPosterViewHtml({
+            if (view == "Thumb") {
-                items: result.Items,
+                html = LibraryBrowser.getPosterViewHtml({
-                shape: "backdrop",
+                    items: result.Items,
-                preferThumb: true,
+                    shape: "backdrop",
-                context: 'movies',
+                    preferThumb: true,
-                showItemCounts: true,
+                    context: 'movies',
-                centerText: true
+                    showItemCounts: true,
-            });
+                    centerText: true
+                });
+                $('.itemsContainer', page).removeClass('timelineItemsContainer');
+            }
+            else if (view == "ThumbCard") {
+
+                html = LibraryBrowser.getPosterViewHtml({
+                    items: result.Items,
+                    shape: "backdrop",
+                    preferThumb: true,
+                    context: 'movies',
+                    showItemCounts: true,
+                    cardLayout: true,
+                    showTitle: true
+                });
+                $('.itemsContainer', page).removeClass('timelineItemsContainer');
+            }
+            else if (view == "Poster") {
+                html = LibraryBrowser.getPosterViewHtml({
+                    items: result.Items,
+                    shape: "portrait",
+                    context: 'movies',
+                    centerText: true,
+                    showItemCounts: true,
+                    lazy: true
+                });
+                $('.itemsContainer', page).removeClass('timelineItemsContainer');
+            }
 
             html += pagingHtml;
 
@@ -71,6 +100,7 @@
     function updateFilterControls(page) {
 
         $('#selectPageSize', page).val(query.Limit).selectmenu('refresh');
+        $('#selectView', page).val(view).selectmenu('refresh');
     }
 
     $(document).on('pageinit', "#movieGenresPage", function () {
@@ -100,8 +130,27 @@
             reloadItems(page);
         });
 
+        $('#selectView', this).on('change', function () {
+
+            view = this.value;
+
+            if (view == "Timeline") {
+
+                query.SortBy = "PremiereDate";
+                query.SortOrder = "Descending";
+                query.StartIndex = 0;
+                $('#radioPremiereDate', page)[0].click();
+
+            } else {
+                reloadItems(page);
+            }
+
+            LibraryBrowser.saveViewSetting(getSavedQueryKey(), view);
+        });
+
     }).on('pagebeforeshow', "#movieGenresPage", function () {
 
+        var page = this;
         query.ParentId = LibraryMenu.getTopParentId();
 
         var limit = LibraryBrowser.getDefaultPageSize();
@@ -112,9 +161,18 @@
             query.StartIndex = 0;
         }
 
-        LibraryBrowser.loadSavedQueryValues(getSavedQueryKey(), query);
+        var viewkey = getSavedQueryKey();
 
-        reloadItems(this);
+        LibraryBrowser.loadSavedQueryValues(viewkey, query);
+
+        LibraryBrowser.getSavedViewSetting(viewkey).done(function (val) {
+
+            if (val) {
+                $('#selectView', page).val(val).selectmenu('refresh').trigger('change');
+            } else {
+                reloadItems(page);
+            }
+        });
 
     }).on('pageshow', "#movieGenresPage", function () {
 

dashboard-ui/scripts/movies.js

@@ -50,13 +50,26 @@
                     shape: "backdrop",
                     preferThumb: true,
                     context: 'movies',
-                    selectionPanel: true,
                     lazy: true,
                     overlayText: true,
                     showTitle: false
                 });
                 $('.itemsContainer', page).removeClass('timelineItemsContainer');
             }
+            else if (view == "ThumbCard") {
+
+                html = LibraryBrowser.getPosterViewHtml({
+                    items: result.Items,
+                    shape: "backdrop",
+                    preferThumb: true,
+                    context: 'movies',
+                    lazy: true,
+                    showTitle: true,
+                    cardLayout: true,
+                    showYear: true
+                });
+                $('.itemsContainer', page).removeClass('timelineItemsContainer');
+            }
             else if (view == "Banner") {
 
                 html = LibraryBrowser.getPosterViewHtml({
@@ -84,7 +97,6 @@
                     context: 'movies',
                     showTitle: false,
                     centerText: true,
-                    selectionPanel: true,
                     lazy: true,
                     overlayText: true
                 });
@@ -98,7 +110,6 @@
                     showTitle: true,
                     timeline: true,
                     centerText: true,
-                    selectionPanel: true,
                     lazy: true
                 });
                 $('.itemsContainer', page).addClass('timelineItemsContainer');

dashboard-ui/scripts/musicalbumartists.js

@@ -60,10 +60,23 @@
                     showTitle: true,
                     coverImage: true,
                     centerText: true,
-                    lazy: true,
+                    lazy: true
-                    selectionPanel: true
                 });
             }
+            else if (view == "PosterCard") {
+
+                html = LibraryBrowser.getPosterViewHtml({
+                    items: result.Items,
+                    shape: "square",
+                    context: 'music',
+                    showTitle: true,
+                    coverImage: true,
+                    lazy: true,
+                    cardLayout: true,
+                    showSongCount: true
+                });
+                $('.itemsContainer', page).removeClass('timelineItemsContainer');
+            }
 
             html += pagingHtml;
 

dashboard-ui/scripts/musicalbums.js

@@ -49,8 +49,21 @@
                     context: 'music',
                     showTitle: true,
                     showParentTitle: true,
+                    lazy: true
+                });
+                $('.itemsContainer', page).removeClass('timelineItemsContainer');
+            }
+            else if (view == "PosterCard") {
+
+                html = LibraryBrowser.getPosterViewHtml({
+                    items: result.Items,
+                    shape: "square",
+                    context: 'music',
+                    showTitle: true,
+                    coverImage: true,
+                    showParentTitle: true,
                     lazy: true,
-                    selectionPanel: true
+                    cardLayout: true
                 });
                 $('.itemsContainer', page).removeClass('timelineItemsContainer');
             }
@@ -71,8 +84,7 @@
                     showTitle: true,
                     showParentTitle: true,
                     timeline: true,
-                    lazy: true,
+                    lazy: true
-                    selectionPanel: true
                 });
                 $('.itemsContainer', page).addClass('timelineItemsContainer');
             }

dashboard-ui/scripts/musicartists.js

@@ -60,10 +60,23 @@
                     showTitle: true,
                     coverImage: true,
                     centerText: true,
-                    lazy: true,
+                    lazy: true
-                    selectionPanel: true
                 });
             }
+            else if (view == "PosterCard") {
+
+                html = LibraryBrowser.getPosterViewHtml({
+                    items: result.Items,
+                    shape: "square",
+                    context: 'music',
+                    showTitle: true,
+                    coverImage: true,
+                    lazy: true,
+                    cardLayout: true,
+                    showSongCount: true
+                });
+                $('.itemsContainer', page).removeClass('timelineItemsContainer');
+            }
 
             html += pagingHtml;
 

dashboard-ui/scripts/musicgenres.js

@@ -47,8 +47,7 @@
                 context: 'music',
                 showItemCounts: true,
                 centerText: true,
-                lazy: true,
+                lazy: true
-                selectionPanel: true
             });
 
             html += pagingHtml;

dashboard-ui/scripts/tvgenres.js

@@ -1,5 +1,7 @@
 (function ($, document) {
 
+    var view = LibraryBrowser.getDefaultItemsView('Thumb', 'Thumb');
+
     // The base query options
     var query = {
 
@@ -39,17 +41,41 @@
 
             updateFilterControls(page);
 
-            html += LibraryBrowser.getPosterViewHtml({
+            if (view == "Thumb") {
-                items: result.Items,
+                html = LibraryBrowser.getPosterViewHtml({
-                shape: "backdrop",
+                    items: result.Items,
-                showTitle: false,
+                    shape: "backdrop",
-                context: 'tv',
+                    preferThumb: true,
-                preferThumb: true,
+                    context: 'tv',
-                showItemCounts: true,
+                    showItemCounts: true,
-                centerText: true,
+                    centerText: true
-                lazy: true
+                });
-                
+                $('.itemsContainer', page).removeClass('timelineItemsContainer');
-            });
+            }
+            else if (view == "ThumbCard") {
+
+                html = LibraryBrowser.getPosterViewHtml({
+                    items: result.Items,
+                    shape: "backdrop",
+                    preferThumb: true,
+                    context: 'tv',
+                    showItemCounts: true,
+                    cardLayout: true,
+                    showTitle: true
+                });
+                $('.itemsContainer', page).removeClass('timelineItemsContainer');
+            }
+            else if (view == "Poster") {
+                html = LibraryBrowser.getPosterViewHtml({
+                    items: result.Items,
+                    shape: "portrait",
+                    context: 'tv',
+                    centerText: true,
+                    showItemCounts: true,
+                    lazy: true
+                });
+                $('.itemsContainer', page).removeClass('timelineItemsContainer');
+            }
 
             html += pagingHtml;
 
@@ -89,6 +115,7 @@
         }).checkboxradio('refresh');
 
         $('#selectPageSize', page).val(query.Limit).selectmenu('refresh');
+        $('#selectView', page).val(view).selectmenu('refresh');
     }
 
     $(document).on('pageinit', "#tvGenresPage", function () {
@@ -118,9 +145,28 @@
             reloadItems(page);
         });
 
+        $('#selectView', this).on('change', function () {
+
+            view = this.value;
+
+            if (view == "Timeline") {
+
+                query.SortBy = "PremiereDate";
+                query.SortOrder = "Descending";
+                query.StartIndex = 0;
+                $('#radioPremiereDate', page)[0].click();
+
+            } else {
+                reloadItems(page);
+            }
+
+            LibraryBrowser.saveViewSetting(getSavedQueryKey(), view);
+        });
+
     }).on('pagebeforeshow', "#tvGenresPage", function () {
 
         query.ParentId = LibraryMenu.getTopParentId();
+        var page = this;
 
         var limit = LibraryBrowser.getDefaultPageSize();
 
@@ -130,9 +176,17 @@
             query.StartIndex = 0;
         }
 
-        LibraryBrowser.loadSavedQueryValues(getSavedQueryKey(), query);
+        var viewkey = getSavedQueryKey();
+        LibraryBrowser.loadSavedQueryValues(viewkey, query);
 
-        reloadItems(this);
+        LibraryBrowser.getSavedViewSetting(viewkey).done(function (val) {
+
+            if (val) {
+                $('#selectView', page).val(val).selectmenu('refresh').trigger('change');
+            } else {
+                reloadItems(page);
+            }
+        });
 
     }).on('pageshow', "#tvGenresPage", function () {
 

dashboard-ui/scripts/tvshows.js

@@ -53,6 +53,20 @@
 
                 $('.itemsContainer', page).removeClass('timelineItemsContainer');
             }
+            else if (view == "ThumbCard") {
+
+                html = LibraryBrowser.getPosterViewHtml({
+                    items: result.Items,
+                    shape: "backdrop",
+                    preferThumb: true,
+                    context: 'tv',
+                    lazy: true,
+                    cardLayout: true,
+                    showTitle: true,
+                    showSeriesYear: true
+                });
+                $('.itemsContainer', page).removeClass('timelineItemsContainer');
+            }
             else if (view == "Banner") {
 
                 html = LibraryBrowser.getPosterViewHtml({

dashboard-ui/scripts/userprofilespage.js

@@ -139,7 +139,6 @@
         html += '<div class="cardFooter">';
 
         html += '<div class="cardText" style="text-align:right; float:right;">';
-
         html += '<button class="btnUserMenu" type="button" data-inline="true" data-iconpos="notext" data-icon="ellipsis-v" style="margin: 2px 0 0;"></button>';
         html += "</div>";
 

dashboard-ui/tvgenres.html

@@ -33,6 +33,15 @@
 
                 <div class="tabView viewTab">
 
+                    <div>
+                        <label for="selectView">${LabelView}</label>
+                        <select id="selectView">
+                            <option value="Poster">${OptionPoster}</option>
+                            <option value="Thumb">${OptionThumb}</option>
+                            <option value="ThumbCard">${OptionThumbCard}</option>
+                        </select>
+                    </div>
+                    <br />
                     <div>
                         <label for="selectPageSize">${LabelPageSize}</label>
                         <select id="selectPageSize"></select>

dashboard-ui/tvshows.html

@@ -39,10 +39,11 @@
                     <div>
                         <label for="selectView">${LabelView}</label>
                         <select id="selectView">
-                            <option value="Thumb">${OptionThumb}</option>
-                            <option value="Poster">${OptionPoster}</option>
                             <option value="Banner">${OptionBanner}</option>
                             <option value="List">${OptionList}</option>
+                            <option value="Poster">${OptionPoster}</option>
+                            <option value="Thumb">${OptionThumb}</option>
+                            <option value="ThumbCard">${OptionThumbCard}</option>
                         </select>
                     </div>
                     <br />