fixes #834 - Change view of TV Shows or Interface for plugins

dashboard-ui/collections.html

@@ -25,7 +25,15 @@
         <div data-role="content">
             <div class="viewSettings">
 
+                <div style="display: inline-block;">
+                    <select data-mini="true" data-inline="true" id="selectView" name="selectView">
+                        <option value="Poster">${OptionPoster}</option>
+                        <option value="List">${OptionList}</option>
+                    </select>
+                </div>
+
                 <div class="viewControls" data-role="controlgroup" data-type="horizontal">
+
                     <button data-mini="true" data-icon="sort" data-inline="true" data-iconpos="notext" title="${ButtonSort}" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">${ButtonSort}</button>
                     <button data-mini="true" data-icon="filter" data-inline="true" data-iconpos="notext" title="${ButtonFilter}" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">${ButtonFilter}</button>
                 </div>

dashboard-ui/css/librarybrowser.css

@@ -1254,14 +1254,14 @@ a.itemTag:hover {
 }
 
     .itemsListview .ui-li-aside {
-        right: 1.5em;
+        right: 1.3em;
         font-weight: normal;
         font-size: 13px;
         font-family: "Open Sans";
     }
 
     .itemsListview .ui-li-count {
-        right: 1.2em;
+        right: 1em;
         top: 70%;
         background: rgba(82, 181, 75, .8);
         border: 0;

dashboard-ui/episodes.html

@@ -20,6 +20,12 @@
         </div>
         <div data-role="content">
             <div class="viewSettings">
+                <div style="display: inline-block;">
+                    <select data-mini="true" data-inline="true" id="selectView" name="selectView">
+                        <option value="Poster">${OptionPoster}</option>
+                        <option value="List">${OptionList}</option>
+                    </select>
+                </div>
                 <div class="viewControls" data-role="controlgroup" data-type="horizontal">
                     <button data-mini="true" data-icon="sort" data-inline="true" data-iconpos="notext" title="${ButtonSort}" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">${ButtonSort}</button>
                     <button data-mini="true" data-icon="filter" data-inline="true" data-iconpos="notext" title="${ButtonFilter}" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">${ButtonFilter}</button>

dashboard-ui/scripts/episodes.js

@@ -1,5 +1,7 @@
 (function ($, document) {
 
+    var view = LibraryBrowser.getDefaultItemsView('Poster', 'List');
+
     // The base query options
     var query = {
 
@@ -7,7 +9,7 @@
         SortOrder: "Ascending",
         IncludeItemTypes: "Episode",
         Recursive: true,
-        Fields: "SeriesInfo,PrimaryImageAspectRatio",
+        Fields: "PrimaryImageAspectRatio,SortName",
         StartIndex: 0,
         IsMissing: false,
         IsVirtualUnaired: false
@@ -35,15 +37,25 @@
 
             var screenWidth = $(window).width();
 
-            html += LibraryBrowser.getPosterViewHtml({
+            if (view == "List") {
-                items: result.Items,
+
-                shape: "backdrop",
+                html = LibraryBrowser.getListViewHtml({
-                showTitle: true,
+                    items: result.Items,
-                showParentTitle: true,
+                    context: 'tv',
-                overlayText: screenWidth >= 600,
+                    sortBy: query.SortBy
-                selectionPanel: true,
+                });
-                lazy: true
+            }
-            });
+            else if (view == "Poster") {
+                html += LibraryBrowser.getPosterViewHtml({
+                    items: result.Items,
+                    shape: "backdrop",
+                    showTitle: true,
+                    showParentTitle: true,
+                    overlayText: screenWidth >= 600,
+                    selectionPanel: true,
+                    lazy: true
+                });
+            }
 
             $('.itemsContainer', page).removeClass('timelineItemsContainer');
 
@@ -107,6 +119,8 @@
 
         }).checkboxradio('refresh');
 
+        $('#selectView', page).val(view).selectmenu('refresh');
+
         $('#chkHD', page).checked(query.IsHD == true).checkboxradio('refresh');
         $('#chkSD', page).checked(query.IsHD == false).checkboxradio('refresh');
 
@@ -272,8 +286,18 @@
 
         });
 
+        $('#selectView', this).on('change', function () {
+
+            view = this.value;
+
+            reloadItems(page);
+
+            LibraryBrowser.saveViewSetting(getSavedQueryKey(), view);
+        });
+
     }).on('pagebeforeshow', "#episodesPage", function () {
 
+        var page = this;
         query.ParentId = LibraryMenu.getTopParentId();
 
         var limit = LibraryBrowser.getDefaultPageSize();
@@ -284,7 +308,9 @@
             query.StartIndex = 0;
         }
 
-        LibraryBrowser.loadSavedQueryValues(getSavedQueryKey(), query);
+        var viewkey = getSavedQueryKey();
+
+        LibraryBrowser.loadSavedQueryValues(viewkey, query);
 
         var filters = getParameterByName('filters');
         if (filters) {
@@ -301,7 +327,14 @@
             query.SortOrder = sortorder;
         }
 
-        reloadItems(this);
+        LibraryBrowser.getSavedViewSetting(viewkey).done(function (val) {
+
+            if (val) {
+                $('#selectView', page).val(val).selectmenu('refresh').trigger('change');
+            } else {
+                reloadItems(page);
+            }
+        });
 
     }).on('pageshow', "#episodesPage", function () {
 

dashboard-ui/scripts/librarybrowser.js

@@ -24,6 +24,12 @@
             return 20;
         },
 
+        getDefaultItemsView: function (view, mobileView) {
+
+            return $.browser.mobile ? mobileView : view;
+
+        },
+
         loadSavedQueryValues: function (key, query) {
 
             var values = localStorage.getItem(key + '_' + Dashboard.getCurrentUserId());
@@ -493,25 +499,101 @@
 
         },
         
+        getListViewIndex: function(item, sortBy) {
+
+            sortBy = (sortBy || '').toLowerCase();
+            
+            if (sortBy.indexOf('sortname') == 0) {
+
+                if (item.Type == 'Episode') return '';
+                
+                // SortName
+                var name = (item.SortName || item.Name)[0];
+                
+                if (!isNaN(name)) {
+                    return '#';
+                }
+                return name.toUpperCase();
+            }
+            if (sortBy.indexOf('officialrating') == 0) {
+
+                return item.OfficialRating || 'Unrated';
+            }
+            if (sortBy.indexOf('communityrating') == 0) {
+
+                if (item.CommunityRating == null) {
+                    return 'Unrated';
+                }
+
+                return Math.floor(item.CommunityRating);
+            }
+            if (sortBy.indexOf('criticrating') == 0) {
+
+                if (item.CriticRating == null) {
+                    return 'Unrated';
+                }
+
+                return Math.floor(item.CriticRating);
+            }
+            if (sortBy.indexOf('metascore') == 0) {
+
+                if (item.Metascore == null) {
+                    return 'Unrated';
+                }
+
+                return Math.floor(item.Metascore);
+            }
+            if (sortBy.indexOf('albumartist') == 0) {
+
+                // SortName
+                if (!item.AlbumArtist) return '';
+                
+                var albumartist = item.AlbumArtist[0];
+
+                if (!isNaN(albumartist)) {
+                    return '#';
+                }
+                return albumartist.toUpperCase();
+            }
+            return '';
+        },
+
         getListViewHtml: function (options) {
 
             var outerHtml = "";
 
             outerHtml += '<ul data-role="listview" data-inset="true" class="itemsListview">';
 
+            var index = 0;
+            var groupTitle = '';
+
             outerHtml += options.items.map(function (item) {
 
                 var html = '';
 
+                var itemGroupTitle = LibraryBrowser.getListViewIndex(item, options.sortBy);
+                
+                if (itemGroupTitle != groupTitle) {
+
+                    html += '<li data-role="list-divider">';
+                    html += itemGroupTitle;
+                    html += '</li>';
+
+                    groupTitle = itemGroupTitle;
+                }
+
                 var href = LibraryBrowser.getHref(item, options.context);
-                html += '<li class="ui-li-has-thumb"><a href="' + href + '">';
+                html += '<li class="ui-li-has-thumb" data-itemid="' + item.Id + '"><a href="' + href + '">';
 
                 var imgUrl;
 
                 if (item.ImageTags.Primary) {
 
+                    // Scaling 400w episode images to 80 doesn't turn out very well
+                    var width = item.Type == 'Episode' ? 160 : 80;
+
                     imgUrl = ApiClient.getScaledImageUrl(item.Id, {
-                        width: 80,
+                        width: width,
                         tag: item.ImageTags.Primary,
                         type: "Primary",
                         index: 0
@@ -519,7 +601,12 @@
 
                 }
                 if (imgUrl) {
-                    html += '<div class="listviewImage ui-li-thumb" style="background-image:url(\'' + imgUrl + '\');"></div>';
+
+                    if (index < 10) {
+                        html += '<div class="listviewImage ui-li-thumb" style="background-image:url(\'' + imgUrl + '\');"></div>';
+                    } else {
+                        html += '<div class="listviewImage ui-li-thumb lazy" data-src="' + imgUrl + '"></div>';
+                    }
                 }
 
                 html += '<h3>';
@@ -550,6 +637,7 @@
 
             outerHtml += '</ul>';
 
+            index++;
             return outerHtml;
         },
 

dashboard-ui/scripts/librarylist.js

@@ -353,8 +353,10 @@
 
                 if (latestItem.ImageTags.Primary) {
 
+                    // Scaling 400w episode images to 80 doesn't turn out very well
+                    var width = latestItem.Type == 'Episode' ? 160 : 80;
                     imgUrl = ApiClient.getScaledImageUrl(latestItem.Id, {
-                        width: 80,
+                        width: width,
                         tag: latestItem.ImageTags.Primary,
                         type: "Primary",
                         index: 0

dashboard-ui/scripts/moviecollections.js

@@ -1,5 +1,7 @@
 (function ($, document) {
 
+    var view = LibraryBrowser.getDefaultItemsView('Poster', 'List');
+
     // The base query options
     var query = {
 
@@ -7,7 +9,7 @@
         SortOrder: "Ascending",
         IncludeItemTypes: "BoxSet",
         Recursive: true,
-        Fields: "PrimaryImageAspectRatio",
+        Fields: "PrimaryImageAspectRatio,SortName",
         StartIndex: 0
     };
 
@@ -33,17 +35,28 @@
 
             if (result.TotalRecordCount) {
 
-                html = LibraryBrowser.getPosterViewHtml({
+                if (view == "List") {
-                    items: result.Items,
+
-                    shape: "portrait",
+                    html = LibraryBrowser.getListViewHtml({
-                    context: 'movies',
+                        items: result.Items,
-                    showTitle: true,
+                        context: 'movies',
-                    centerText: true,
+                        sortBy: query.SortBy
-                    lazy: true
+                    });
-                });
+                }
+                else if (view == "Poster") {
+                    html = LibraryBrowser.getPosterViewHtml({
+                        items: result.Items,
+                        shape: "portrait",
+                        context: 'movies',
+                        showTitle: true,
+                        centerText: true,
+                        lazy: true
+                    });
+                }
 
                 html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);
                 $('.noItemsMessage', page).hide();
+                
             } else {
 
                 $('.noItemsMessage', page).show();
@@ -97,6 +110,8 @@
 
         }).checkboxradio('refresh');
 
+        $('#selectView', page).val(view).selectmenu('refresh');
+
         $('#chkTrailer', page).checked(query.HasTrailer == true).checkboxradio('refresh');
         $('#chkThemeSong', page).checked(query.HasThemeSong == true).checkboxradio('refresh');
         $('#chkThemeVideo', page).checked(query.HasThemeVideo == true).checkboxradio('refresh');
@@ -173,6 +188,15 @@
             reloadItems(page);
         });
 
+        $('#selectView', this).on('change', function () {
+
+            view = this.value;
+
+            reloadItems(page);
+
+            LibraryBrowser.saveViewSetting(getSavedQueryKey(), view);
+        });
+
     }).on('pagebeforeshow', "#boxsetsPage", function () {
 
         var page = this;
@@ -197,9 +221,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', "#boxsetsPage", function () {
 

dashboard-ui/scripts/movies.js

@@ -1,6 +1,6 @@
 (function ($, document) {
 
-    var view = "Poster";
+    var view = LibraryBrowser.getDefaultItemsView('Poster', 'List');
 
     // The base query options
     var query = {
@@ -9,7 +9,7 @@
         SortOrder: "Ascending",
         IncludeItemTypes: "Movie",
         Recursive: true,
-        Fields: "PrimaryImageAspectRatio",
+        Fields: "PrimaryImageAspectRatio,SortName",
         StartIndex: 0
     };
 
@@ -59,7 +59,8 @@
 
                 html = LibraryBrowser.getListViewHtml({
                     items: result.Items,
-                    context: 'movies'
+                    context: 'movies',
+                    sortBy: query.SortBy
                 });
                 $('.itemsContainer', page).removeClass('timelineItemsContainer');
             }

dashboard-ui/scripts/musicalbums.js

@@ -1,6 +1,6 @@
 (function ($, document) {
 
-    var view = "Poster";
+    var view = LibraryBrowser.getDefaultItemsView('Poster', 'List');
 
     // The base query options
     var query = {
@@ -9,7 +9,7 @@
         SortOrder: "Ascending",
         IncludeItemTypes: "MusicAlbum",
         Recursive: true,
-        Fields: "PrimaryImageAspectRatio",
+        Fields: "PrimaryImageAspectRatio,SortName",
         StartIndex: 0
     };
 
@@ -48,7 +48,8 @@
 
                 html = LibraryBrowser.getListViewHtml({
                     items: result.Items,
-                    context: 'music'
+                    context: 'music',
+                    sortBy: query.SortBy
                 });
                 $('.itemsContainer', page).removeClass('timelineItemsContainer');
             }

dashboard-ui/scripts/tvshows.js

@@ -1,6 +1,6 @@
 (function ($, document) {
 
-    var view = "Thumb";
+    var view = LibraryBrowser.getDefaultItemsView('Thumb', 'List');
 
     // The base query options
     var query = {
@@ -9,7 +9,7 @@
         SortOrder: "Ascending",
         IncludeItemTypes: "Series",
         Recursive: true,
-        Fields: "SeriesInfo,PrimaryImageAspectRatio",
+        Fields: "PrimaryImageAspectRatio,SortName",
         StartIndex: 0
     };
 
@@ -72,7 +72,8 @@
 
                 html = LibraryBrowser.getListViewHtml({
                     items: result.Items,
-                    context: 'tv'
+                    context: 'tv',
+                    sortBy: query.SortBy
                 });
                 $('.itemsContainer', page).removeClass('timelineItemsContainer');
             }