rework filter dialog

dashboard-ui/collections.html

@@ -1,17 +0,0 @@
-<div id="boxsetsPage" data-role="page" class="page libraryPage backdropPage collectionEditorPage noSecondaryNavPage" data-backdroptype="movie,boxset" data-require="scripts/moviecollections,paper-fab">
-
-    <div data-role="content">
-        <div class="viewSettings">
-
-            <div class="listTopPaging">
-                &nbsp;
-            </div>
-        </div>
-        <div class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
-        <div class="noItemsMessage" style="display: none; text-align: center;">
-            <p>${MessageNoCollectionsAvailable}</p>
-        </div>
-
-        <paper-fab class="btnNewCollection bottomFab" icon="add" style="position:fixed;right:20px;background-color:#db4437;"></paper-fab>
-    </div>
-</div>

dashboard-ui/components/filterdialog/filterdialog.js

@@ -1,4 +1,4 @@
-define(['dialogHelper', 'events', 'browser', 'jQuery', 'emby-checkbox', 'emby-collapsible', 'css!components/filterdialog/style', 'paper-radio-button', 'paper-radio-group'], function (dialogHelper, events, browser, $) {
+define(['dialogHelper', 'events', 'browser', 'emby-checkbox', 'emby-collapsible', 'css!components/filterdialog/style', 'paper-radio-button', 'paper-radio-group'], function (dialogHelper, events, browser) {
 
     function renderOptions(context, selector, cssClass, items, isCheckedFn) {
 
@@ -85,6 +85,8 @@
 
         var query = options.query;
 
+        var elems, i, length;
+
         if (options.mode == 'livetvchannels') {
 
             context.querySelector('.chkFavorite').checked = query.IsFavorite == true;
@@ -92,22 +94,26 @@
             context.querySelector('.chkDislikes').checked = query.IsDisliked == true;
 
         } else {
-            $('.chkStandardFilter', context).each(function () {
+            elems = context.querySelectorAll('.chkStandardFilter');
+            for (i = 0, length = elems.length; i < length; i++) {
 
+                var chkStandardFilter = elems[i];
                 var filters = "," + (query.Filters || "");
-                var filterName = this.getAttribute('data-filter');
+                var filterName = chkStandardFilter.getAttribute('data-filter');
 
-                this.checked = filters.indexOf(',' + filterName) != -1;
-            });
+                chkStandardFilter.checked = filters.indexOf(',' + filterName) != -1;
+            }
         }
 
-        $('.chkVideoTypeFilter', context).each(function () {
+        elems = context.querySelectorAll('.chkVideoTypeFilter');
+        for (i = 0, length = elems.length; i < length; i++) {
 
+            var chkVideoTypeFilter = elems[i];
             var filters = "," + (query.VideoTypes || "");
-            var filterName = this.getAttribute('data-filter');
+            var filterName = chkVideoTypeFilter.getAttribute('data-filter');
 
-            this.checked = filters.indexOf(',' + filterName) != -1;
-        });
+            chkVideoTypeFilter.checked = filters.indexOf(',' + filterName) != -1;
+        }
 
         context.querySelector('.chk3DFilter').checked = query.Is3D == true;
         context.querySelector('.chkHDFilter').checked = query.IsHD == true;
@@ -119,27 +125,30 @@
         context.querySelector('#chkThemeVideo').checked = query.HasThemeVideo == true;
         context.querySelector('#chkSpecialFeature').checked = query.HasSpecialFeature == true;
 
-        $('#chkSpecialEpisode', context).checked(query.ParentIndexNumber == 0);
-        $('#chkMissingEpisode', context).checked(query.IsMissing == true);
-        $('#chkFutureEpisode', context).checked(query.IsUnaired == true);
+        context.querySelector('#chkSpecialEpisode').checked = query.ParentIndexNumber == 0;
+        context.querySelector('#chkMissingEpisode').checked = query.IsMissing == true;
+        context.querySelector('#chkFutureEpisode').checked = query.IsUnaired == true;
 
         context.querySelector('.playersRadioGroup').selected = query.MinPlayers == null ? 'all' : query.MinPlayers;
 
-        $('.chkStatus', context).each(function () {
+        for (i = 0, length = elems.length; i < length; i++) {
 
+            var chkStatus = elems[i];
             var filters = "," + (query.SeriesStatus || "");
-            var filterName = this.getAttribute('data-filter');
+            var filterName = chkStatus.getAttribute('data-filter');
 
-            this.checked = filters.indexOf(',' + filterName) != -1;
-        });
+            chkStatus.checked = filters.indexOf(',' + filterName) != -1;
+        }
 
-        $('.chkAirDays', context).each(function () {
+        elems = context.querySelectorAll('.chkAirDays');
+        for (i = 0, length = elems.length; i < length; i++) {
 
+            var chkAirDays = elems[i];
             var filters = "," + (query.AirDays || "");
-            var filterName = this.getAttribute('data-filter');
+            var filterName = chkAirDays.getAttribute('data-filter');
 
-            this.checked = filters.indexOf(',' + filterName) != -1;
-        });
+            chkAirDays.checked = filters.indexOf(',' + filterName) != -1;
+        }
     }
 
     function triggerChange(instance) {
@@ -160,286 +169,6 @@
         return elem;
     }
 
-    function bindEvents(instance, context, options) {
-
-        var query = options.query;
-
-        if (options.mode == 'livetvchannels') {
-
-            $('.chkFavorite', context).on('change', function () {
-                query.StartIndex = 0;
-                query.IsFavorite = this.checked ? true : null;
-                triggerChange(instance);
-            });
-
-
-            $('.chkLikes', context).on('change', function () {
-
-                query.StartIndex = 0;
-                query.IsLiked = this.checked ? true : null;
-                triggerChange(instance);
-            });
-
-            $('.chkDislikes', context).on('change', function () {
-
-                query.StartIndex = 0;
-                query.IsDisliked = this.checked ? true : null;
-                triggerChange(instance);
-            });
-
-        } else {
-            $('.chkStandardFilter', context).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.StartIndex = 0;
-                query.Filters = filters;
-                triggerChange(instance);
-            });
-        }
-
-        $('.chkVideoTypeFilter', context).on('change', function () {
-
-            var filterName = this.getAttribute('data-filter');
-            var filters = query.VideoTypes || "";
-
-            filters = (',' + filters).replace(',' + filterName, '').substring(1);
-
-            if (this.checked) {
-                filters = filters ? (filters + ',' + filterName) : filterName;
-            }
-
-            query.StartIndex = 0;
-            query.VideoTypes = filters;
-
-            triggerChange(instance);
-        });
-
-        $('.chk3DFilter', context).on('change', function () {
-
-            query.StartIndex = 0;
-            query.Is3D = this.checked ? true : null;
-
-            triggerChange(instance);
-        });
-
-        $('.chkHDFilter', context).on('change', function () {
-
-            query.StartIndex = 0;
-            query.IsHD = this.checked ? true : null;
-            triggerChange(instance);
-        });
-
-        $('.chkSDFilter', context).on('change', function () {
-
-            query.StartIndex = 0;
-            query.IsHD = this.checked ? false : null;
-
-            triggerChange(instance);
-        });
-
-        $('.chkStatus', context).on('change', function () {
-
-            var filterName = this.getAttribute('data-filter');
-            var filters = query.SeriesStatus || "";
-
-            filters = (',' + filters).replace(',' + filterName, '').substring(1);
-
-            if (this.checked) {
-                filters = filters ? (filters + ',' + filterName) : filterName;
-            }
-
-            query.SeriesStatus = filters;
-            query.StartIndex = 0;
-            triggerChange(instance);
-        });
-
-        $('.chkAirDays', context).on('change', function () {
-
-            var filterName = this.getAttribute('data-filter');
-            var filters = query.AirDays || "";
-
-            filters = (',' + filters).replace(',' + filterName, '').substring(1);
-
-            if (this.checked) {
-                filters = filters ? (filters + ',' + filterName) : filterName;
-            }
-
-            query.AirDays = filters;
-            query.StartIndex = 0;
-            triggerChange(instance);
-        });
-
-        $('#chkTrailer', context).on('change', function () {
-
-            query.StartIndex = 0;
-            query.HasTrailer = this.checked ? true : null;
-
-            triggerChange(instance);
-        });
-
-        $('#chkThemeSong', context).on('change', function () {
-
-            query.StartIndex = 0;
-            query.HasThemeSong = this.checked ? true : null;
-
-            triggerChange(instance);
-        });
-
-        $('#chkSpecialFeature', context).on('change', function () {
-
-            query.StartIndex = 0;
-            query.HasSpecialFeature = this.checked ? true : null;
-
-            triggerChange(instance);
-        });
-
-        $('#chkThemeVideo', context).on('change', function () {
-
-            query.StartIndex = 0;
-            query.HasThemeVideo = this.checked ? true : null;
-
-            triggerChange(instance);
-        });
-
-        $('#chkMissingEpisode', context).on('change', function () {
-
-            query.StartIndex = 0;
-            query.IsMissing = this.checked ? true : false;
-
-            triggerChange(instance);
-        });
-
-        $('#chkSpecialEpisode', context).on('change', function () {
-
-            query.StartIndex = 0;
-            query.ParentIndexNumber = this.checked ? 0 : null;
-
-            triggerChange(instance);
-        });
-
-        $('#chkFutureEpisode', context).on('change', function () {
-
-            query.StartIndex = 0;
-
-            if (this.checked) {
-                query.IsUnaired = true;
-                query.IsVirtualUnaired = null;
-            } else {
-                query.IsUnaired = null;
-                query.IsVirtualUnaired = false;
-            }
-
-            triggerChange(instance);
-        });
-
-        $('#chkSubtitle', context).on('change', function () {
-
-            query.StartIndex = 0;
-            query.HasSubtitles = this.checked ? true : null;
-
-            triggerChange(instance);
-        });
-
-        context.querySelector('.playersRadioGroup').addEventListener('iron-select', function (e) {
-
-            query.StartIndex = 0;
-            var val = e.target.selected;
-            var newValue = val == "all" ? null : val;
-            var changed = query.MinPlayers != newValue;
-            query.MinPlayers = newValue;
-            if (changed) {
-                triggerChange(instance);
-            }
-        });
-
-        context.addEventListener('change', function (e) {
-
-            var chkGenreFilter = parentWithClass(e.target, 'chkGenreFilter');
-            if (chkGenreFilter) {
-                var filterName = chkGenreFilter.getAttribute('data-filter');
-                var filters = query.Genres || "";
-                var delimiter = '|';
-
-                filters = (delimiter + filters).replace(delimiter + filterName, '').substring(1);
-
-                if (chkGenreFilter.checked) {
-                    filters = filters ? (filters + delimiter + filterName) : filterName;
-                }
-
-                query.StartIndex = 0;
-                query.Genres = filters;
-
-                triggerChange(instance);
-                return;
-            }
-
-            var chkTagFilter = parentWithClass(e.target, 'chkTagFilter');
-            if (chkTagFilter) {
-                var filterName = chkTagFilter.getAttribute('data-filter');
-                var filters = query.Tags || "";
-                var delimiter = '|';
-
-                filters = (delimiter + filters).replace(delimiter + filterName, '').substring(1);
-
-                if (chkTagFilter.checked) {
-                    filters = filters ? (filters + delimiter + filterName) : filterName;
-                }
-
-                query.StartIndex = 0;
-                query.Tags = filters;
-
-                triggerChange(instance);
-                return;
-            }
-
-            var chkYearFilter = parentWithClass(e.target, 'chkYearFilter');
-            if (chkYearFilter) {
-                var filterName = chkYearFilter.getAttribute('data-filter');
-                var filters = query.Years || "";
-                var delimiter = ',';
-
-                filters = (delimiter + filters).replace(delimiter + filterName, '').substring(1);
-
-                if (chkYearFilter.checked) {
-                    filters = filters ? (filters + delimiter + filterName) : filterName;
-                }
-
-                query.StartIndex = 0;
-                query.Years = filters;
-
-                triggerChange(instance);
-                return;
-            }
-
-            var chkOfficialRatingFilter = parentWithClass(e.target, 'chkOfficialRatingFilter');
-            if (chkOfficialRatingFilter) {
-                var filterName = chkOfficialRatingFilter.getAttribute('data-filter');
-                var filters = query.OfficialRatings || "";
-                var delimiter = '|';
-
-                filters = (delimiter + filters).replace(delimiter + filterName, '').substring(1);
-
-                if (chkOfficialRatingFilter.checked) {
-                    filters = filters ? (filters + delimiter + filterName) : filterName;
-                }
-
-                query.StartIndex = 0;
-                query.OfficialRatings = filters;
-
-                triggerChange(instance);
-                return;
-            }
-        });
-    }
-
     function setVisibility(context, options) {
 
         if (options.mode == 'livetvchannels' || options.mode == 'albums' || options.mode == 'artists' || options.mode == 'albumartists' || options.mode == 'songs') {
@@ -501,6 +230,314 @@
 
         var self = this;
 
+        function onFavoriteChange() {
+            var query = options.query;
+            query.StartIndex = 0;
+            query.IsFavorite = this.checked ? true : null;
+            triggerChange(self);
+        }
+
+        function onStandardFilterChange() {
+            
+            var query = options.query;
+            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.StartIndex = 0;
+            query.Filters = filters;
+            triggerChange(self);
+        }
+
+        function onVideoTypeFilterChange() {
+
+            var query = options.query;
+            var filterName = this.getAttribute('data-filter');
+            var filters = query.VideoTypes || "";
+
+            filters = (',' + filters).replace(',' + filterName, '').substring(1);
+
+            if (this.checked) {
+                filters = filters ? (filters + ',' + filterName) : filterName;
+            }
+
+            query.StartIndex = 0;
+            query.VideoTypes = filters;
+
+            triggerChange(self);
+        }
+
+        function onStatusChange() {
+            var query = options.query;
+            var filterName = this.getAttribute('data-filter');
+            var filters = query.SeriesStatus || "";
+
+            filters = (',' + filters).replace(',' + filterName, '').substring(1);
+
+            if (this.checked) {
+                filters = filters ? (filters + ',' + filterName) : filterName;
+            }
+
+            query.SeriesStatus = filters;
+            query.StartIndex = 0;
+            triggerChange(self);
+        }
+
+        function onAirDayChange() {
+            
+            var query = options.query;
+            var filterName = this.getAttribute('data-filter');
+            var filters = query.AirDays || "";
+
+            filters = (',' + filters).replace(',' + filterName, '').substring(1);
+
+            if (this.checked) {
+                filters = filters ? (filters + ',' + filterName) : filterName;
+            }
+
+            query.AirDays = filters;
+            query.StartIndex = 0;
+            triggerChange(self);
+        }
+
+        function bindEvents(context) {
+
+            var query = options.query;
+            var elems, i, length;
+
+            if (options.mode == 'livetvchannels') {
+
+                elems = context.querySelectorAll('.chkFavorite');
+                for (i = 0, length = elems.length; i < length; i++) {
+
+                    elems[i].addEventListener('change', onFavoriteChange);
+                }
+
+
+                context.querySelector('.chkLikes').addEventListener('change', function () {
+
+                    query.StartIndex = 0;
+                    query.IsLiked = this.checked ? true : null;
+                    triggerChange(self);
+                });
+
+                context.querySelector('.chkDislikes').addEventListener('change', function () {
+
+                    query.StartIndex = 0;
+                    query.IsDisliked = this.checked ? true : null;
+                    triggerChange(self);
+                });
+
+            } else {
+                elems = context.querySelectorAll('.chkStandardFilter');
+                for (i = 0, length = elems.length; i < length; i++) {
+                    elems[i].addEventListener('change', onStandardFilterChange);
+                }
+            }
+
+            elems = context.querySelectorAll('.chkVideoTypeFilter');
+            for (i = 0, length = elems.length; i < length; i++) {
+                elems[i].addEventListener('change', onVideoTypeFilterChange);
+            }
+
+            context.querySelector('.chk3DFilter').addEventListener('change', function () {
+
+                query.StartIndex = 0;
+                query.Is3D = this.checked ? true : null;
+
+                triggerChange(self);
+            });
+
+            context.querySelector('.chkHDFilter').addEventListener('change', function () {
+
+                query.StartIndex = 0;
+                query.IsHD = this.checked ? true : null;
+                triggerChange(self);
+            });
+
+            context.querySelector('.chkSDFilter').addEventListener('change', function () {
+
+                query.StartIndex = 0;
+                query.IsHD = this.checked ? false : null;
+
+                triggerChange(self);
+            });
+
+            elems = context.querySelectorAll('.chkStatus');
+            for (i = 0, length = elems.length; i < length; i++) {
+                elems[i].addEventListener('change', onStatusChange);
+            }
+
+            elems = context.querySelectorAll('.chkAirDays');
+            for (i = 0, length = elems.length; i < length; i++) {
+                elems[i].addEventListener('change', onAirDayChange);
+            }
+
+            context.querySelector('#chkTrailer').addEventListener('change', function () {
+                query.StartIndex = 0;
+                query.HasTrailer = this.checked ? true : null;
+
+                triggerChange(self);
+            });
+
+            context.querySelector('#chkThemeSong').addEventListener('change', function () {
+                query.StartIndex = 0;
+                query.HasThemeSong = this.checked ? true : null;
+
+                triggerChange(self);
+            });
+
+            context.querySelector('#chkSpecialFeature').addEventListener('change', function () {
+                query.StartIndex = 0;
+                query.HasSpecialFeature = this.checked ? true : null;
+
+                triggerChange(self);
+            });
+
+            context.querySelector('#chkThemeVideo').addEventListener('change', function () {
+
+                query.StartIndex = 0;
+                query.HasThemeVideo = this.checked ? true : null;
+
+                triggerChange(self);
+            });
+
+            context.querySelector('#chkMissingEpisode').addEventListener('change', function () {
+
+                query.StartIndex = 0;
+                query.IsMissing = this.checked ? true : false;
+
+                triggerChange(self);
+            });
+
+            context.querySelector('#chkSpecialEpisode').addEventListener('change', function () {
+
+                query.StartIndex = 0;
+                query.ParentIndexNumber = this.checked ? 0 : null;
+
+                triggerChange(self);
+            });
+
+            context.querySelector('#chkFutureEpisode').addEventListener('change', function () {
+
+                query.StartIndex = 0;
+
+                if (this.checked) {
+                    query.IsUnaired = true;
+                    query.IsVirtualUnaired = null;
+                } else {
+                    query.IsUnaired = null;
+                    query.IsVirtualUnaired = false;
+                }
+
+                triggerChange(self);
+            });
+
+            context.querySelector('#chkSubtitle').addEventListener('change', function () {
+
+                query.StartIndex = 0;
+                query.HasSubtitles = this.checked ? true : null;
+
+                triggerChange(self);
+            });
+
+            context.querySelector('.playersRadioGroup').addEventListener('iron-select', function (e) {
+
+                query.StartIndex = 0;
+                var val = e.target.selected;
+                var newValue = val == "all" ? null : val;
+                var changed = query.MinPlayers != newValue;
+                query.MinPlayers = newValue;
+                if (changed) {
+                    triggerChange(self);
+                }
+            });
+
+            context.addEventListener('change', function (e) {
+
+                var chkGenreFilter = parentWithClass(e.target, 'chkGenreFilter');
+                if (chkGenreFilter) {
+                    var filterName = chkGenreFilter.getAttribute('data-filter');
+                    var filters = query.Genres || "";
+                    var delimiter = '|';
+
+                    filters = (delimiter + filters).replace(delimiter + filterName, '').substring(1);
+
+                    if (chkGenreFilter.checked) {
+                        filters = filters ? (filters + delimiter + filterName) : filterName;
+                    }
+
+                    query.StartIndex = 0;
+                    query.Genres = filters;
+
+                    triggerChange(self);
+                    return;
+                }
+
+                var chkTagFilter = parentWithClass(e.target, 'chkTagFilter');
+                if (chkTagFilter) {
+                    var filterName = chkTagFilter.getAttribute('data-filter');
+                    var filters = query.Tags || "";
+                    var delimiter = '|';
+
+                    filters = (delimiter + filters).replace(delimiter + filterName, '').substring(1);
+
+                    if (chkTagFilter.checked) {
+                        filters = filters ? (filters + delimiter + filterName) : filterName;
+                    }
+
+                    query.StartIndex = 0;
+                    query.Tags = filters;
+
+                    triggerChange(self);
+                    return;
+                }
+
+                var chkYearFilter = parentWithClass(e.target, 'chkYearFilter');
+                if (chkYearFilter) {
+                    var filterName = chkYearFilter.getAttribute('data-filter');
+                    var filters = query.Years || "";
+                    var delimiter = ',';
+
+                    filters = (delimiter + filters).replace(delimiter + filterName, '').substring(1);
+
+                    if (chkYearFilter.checked) {
+                        filters = filters ? (filters + delimiter + filterName) : filterName;
+                    }
+
+                    query.StartIndex = 0;
+                    query.Years = filters;
+
+                    triggerChange(self);
+                    return;
+                }
+
+                var chkOfficialRatingFilter = parentWithClass(e.target, 'chkOfficialRatingFilter');
+                if (chkOfficialRatingFilter) {
+                    var filterName = chkOfficialRatingFilter.getAttribute('data-filter');
+                    var filters = query.OfficialRatings || "";
+                    var delimiter = '|';
+
+                    filters = (delimiter + filters).replace(delimiter + filterName, '').substring(1);
+
+                    if (chkOfficialRatingFilter.checked) {
+                        filters = filters ? (filters + delimiter + filterName) : filterName;
+                    }
+
+                    query.StartIndex = 0;
+                    query.OfficialRatings = filters;
+
+                    triggerChange(self);
+                    return;
+                }
+            });
+        }
+
         self.show = function () {
             return new Promise(function (resolve, reject) {
 
@@ -535,7 +572,7 @@
 
                     var onTimeout = function () {
                         updateFilterControls(dlg, options);
-                        bindEvents(self, dlg, options);
+                        bindEvents(dlg);
 
                         if (enableDynamicFilters(options.mode)) {
                             dlg.classList.add('dynamicFilterDialog');

dashboard-ui/components/filterdialog/filterdialog.template.html

@@ -47,11 +47,11 @@
         </h2>
         <div class="checkboxList">
             <label>
-                <input type="checkbox" is="emby-checkbox" class="chkStatus" id="chkStatusContinuing" data-filter="Continuing"/>
+                <input type="checkbox" is="emby-checkbox" class="chkStatus" data-filter="Continuing"/>
                 <span>${OptionContinuing}</span>
             </label>
             <label>
-                <input type="checkbox" is="emby-checkbox" id="chkStatusContinuing" data-filter="Continuing" />
+                <input type="checkbox" is="emby-checkbox" class="chkStatus" data-filter="Ended" />
                 <span>${OptionEnded}</span>
             </label>
         </div>

dashboard-ui/itemlist.html

@@ -8,6 +8,7 @@
             <button is="paper-icon-button-light" class="btnSelectView" title="${ButtonSelectView}"><iron-icon icon="view-comfy"></iron-icon></button>
             <button is="paper-icon-button-light" class="btnSort" title="${ButtonSort}"><iron-icon icon="sort-by-alpha"></iron-icon></button>
             <button is="paper-icon-button-light" class="btnFilter" title="${ButtonFilter}"><iron-icon icon="filter-list"></iron-icon></button>
+            <button type="button" is="paper-icon-button-light" class="btnNewCollection autoSize hide"><i class="md-icon">add</i></button>
         </div>
         <div id="items" class="itemsContainer paddedItemsContainer itemsContainerWithAlphaPicker" style="text-align:center;"></div>
     </div>

dashboard-ui/scripts/itemlistpage.js

@@ -118,7 +118,7 @@
                     posterOptions.shape = "backdrop";
                     html = libraryBrowser.getPosterViewHtml(posterOptions);
                 } else {
-                    
+
                     // Poster
                     posterOptions.showTitle = context == 'photos' ? 'auto' : true;
                     posterOptions.overlayText = context == 'photos';
@@ -126,6 +126,15 @@
                     html = libraryBrowser.getPosterViewHtml(posterOptions);
                 }
 
+                if (currentItem.CollectionType == 'boxsets') {
+                    view.querySelector('.btnNewCollection').classList.remove('hide');
+                    if (!result.Items.length) {
+                        html = '<p style="text-align:center;">' + Globalize.translate('MessageNoCollectionsAvailable') + '</p>';
+                    }
+                } else {
+                    view.querySelector('.btnNewCollection').classList.add('hide');
+                }
+
                 var elem = view.querySelector('#items');
                 elem.innerHTML = html + pagingHtml;
                 ImageLoader.lazyChildren(elem);
@@ -310,6 +319,20 @@
             });
         });
 
+        // The button is created dynamically
+        view.querySelector('.btnNewCollection').addEventListener('click', function () {
+
+            require(['collectionEditor'], function (collectionEditor) {
+
+                var serverId = ApiClient.serverInfo().Id;
+                new collectionEditor().show({
+                    items: [],
+                    serverId: serverId
+                });
+
+            });
+        });
+
         view.addEventListener('viewbeforeshow', function (e) {
             reloadItems(view);
             updateFilterControls();

dashboard-ui/scripts/librarybrowser.js

@@ -1033,7 +1033,7 @@
                     }
 
                     if (item.CollectionType == 'boxsets') {
-                        return 'collections.html?topParentId=' + item.Id;
+                        return 'itemlist.html?topParentId=' + item.Id + '&parentId=' + item.Id;
                     }
 
                     if (item.CollectionType == 'tvshows') {

dashboard-ui/scripts/site.js

@@ -2423,12 +2423,6 @@ var AppInfo = {};
             roles: 'admin'
         });
 
-        defineRoute({
-            path: '/collections.html',
-            dependencies: [],
-            autoFocus: false
-        });
-
         defineRoute({
             path: '/connectlogin.html',
             dependencies: ['emby-button', 'emby-input'],