diff --git a/dashboard-ui/boxsets.html b/dashboard-ui/boxsets.html index 2f49b5970d..839c44f796 100644 --- a/dashboard-ui/boxsets.html +++ b/dashboard-ui/boxsets.html @@ -1,14 +1,77 @@  - Media Browser + Media Browser -
-

- Movies

-
-
-
+
+

+ Box Sets

+
+
+ Recommended + Movies + Box Sets + Genres + Actors + Directors +
+
+ + +
+
+
+
+ +
+
+
+ +

Sort By:

+ + + + + + + + + + +
+ +
+ +

Sort Order:

+ + + + + + + +
+
+
+
+
+
+
+ +

Filters:

+ + + + + + + + + +
+
+
+
diff --git a/dashboard-ui/scripts/boxsets.js b/dashboard-ui/scripts/boxsets.js index 5f282702bb..84e0871fc1 100644 --- a/dashboard-ui/scripts/boxsets.js +++ b/dashboard-ui/scripts/boxsets.js @@ -1 +1,88 @@ - \ No newline at end of file +(function ($, document) { + + // The base query options + var query = { + + SortBy: "SortName", + SortOrder: "Ascending", + IncludeItemTypes: "BoxSet", + Recursive: true, + Fields: "PrimaryImageAspectRatio,ItemCounts" + }; + + + function reloadItems(page) { + + Dashboard.showLoadingMsg(); + + ApiClient.getItems(Dashboard.getCurrentUserId(), query).done(function (result) { + + $('#items', page).html(LibraryBrowser.getBoxsetPosterViewHtml({ + + items: result.Items, + useAverageAspectRatio: true + + })); + + Dashboard.hideLoadingMsg(); + }); + } + + $(document).on('pageinit', "#boxsetsPage", function () { + + var page = this; + + $('.radioSortBy', this).on('click', function () { + query.SortBy = this.getAttribute('data-sortby'); + reloadItems(page); + }); + + $('.radioSortOrder', this).on('click', function () { + query.SortOrder = this.getAttribute('data-sortorder'); + reloadItems(page); + }); + + $('.chkStandardFilter', this).on('change', function () { + + var filterName = this.getAttribute('data-filter'); + var filters = query.Filters || ""; + + filters = (',' + filters).replace(',' + filterName, '').substring(1); + + if (this.checked) { + filters = filters ? (filters + ',' + filterName) : filterName; + } + + query.Filters = filters; + + reloadItems(page); + }); + + }).on('pageshow', "#boxsetsPage", function () { + + reloadItems(this); + + // Reset form values using the last used query + $('.radioSortBy', this).each(function () { + + this.checked = query.SortBy == this.getAttribute('data-sortby'); + + }).checkboxradio('refresh'); + + $('.radioSortOrder', this).each(function () { + + this.checked = query.SortOrder == this.getAttribute('data-sortorder'); + + }).checkboxradio('refresh'); + + $('.chkStandardFilter', this).each(function () { + + var filters = "," + (query.Filters || ""); + var filterName = this.getAttribute('data-filter'); + + this.checked = filters.indexOf(',' + filterName) != -1; + + }).checkboxradio('refresh'); + }); + +})(jQuery, document); \ No newline at end of file diff --git a/dashboard-ui/scripts/librarybrowser.js b/dashboard-ui/scripts/librarybrowser.js index d8fe5424ec..0c51ed1447 100644 --- a/dashboard-ui/scripts/librarybrowser.js +++ b/dashboard-ui/scripts/librarybrowser.js @@ -142,6 +142,73 @@ return html; }, + getBoxsetPosterViewHtml: 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 href = item.url || (item.IsFolder ? (item.Id ? "itemList.html?parentId=" + item.Id : "#") : "itemdetails.html?id=" + item.Id); + + 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 += "
"; + html += item.Name; + html += "
"; + html += "
"; + html += item.ChildCount+" Movie"; + if (item.ChildCount > 1) html += "s"; + html += "
"; + } + + html += "
"; + } + + return html; + }, + getAveragePrimaryImageAspectRatio: function (items) { var values = [];