update game filters

dashboard-ui/components/filterdialog/filterdialog.js

@@ -1,4 +1,77 @@
-define(['paperdialoghelper', 'events', 'paper-checkbox'], function (paperDialogHelper, events) {
+define(['paperdialoghelper', 'events', 'paper-checkbox', 'jqmcollapsible', 'css!components/filterdialog/style', 'paper-radio-button', 'paper-radio-group'], function (paperDialogHelper, events) {
+
+    function renderOptions(context, selector, cssClass, items) {
+
+        var elem = context.querySelector(selector);
+
+        if (items.length) {
+
+            elem.classList.remove('hide');
+
+        } else {
+            elem.classList.add('hide');
+        }
+
+        var html = '';
+
+        //  style="margin: -.2em -.8em;"
+        html += '<div class="paperCheckboxList">';
+
+        var index = 0;
+        var idPrefix = 'chk' + selector.substring(1);
+
+        html += items.map(function (filter) {
+
+            var itemHtml = '';
+
+            var id = idPrefix + index;
+            //itemHtml += '<div class="checkboxContainer">';
+            //itemHtml += '<input id="' + id + '" type="checkbox" data-filter="' + filter + '" data-role="none" class="' + cssClass + '" />';
+            //itemHtml += '<label for="' + id + '">' + filter + '</label>';
+            //itemHtml += '</div>';
+
+            itemHtml += '<paper-checkbox id="' + id + '" data-filter="' + filter + '" class="' + cssClass + '">' + filter + '</paper-checkbox>';
+
+            index++;
+
+            return itemHtml;
+
+        }).join('');
+
+        html += '</div>';
+
+        elem.querySelector('.filterOptions').innerHTML = html;
+    }
+
+    function renderFilters(context, result) {
+
+        // If there's a huge number of these they will be really show to render
+        if (result.Tags) {
+            result.Tags.length = Math.min(result.Tags.length, 50);
+        }
+
+        renderOptions(context, '.genreFilters', 'chkGenreFilter', result.Genres);
+        renderOptions(context, '.officialRatingFilters', 'chkOfficialRatingFilter', result.OfficialRatings);
+        renderOptions(context, '.tagFilters', 'chkTagFilter', result.Tags);
+        renderOptions(context, '.yearFilters', 'chkYearFilter', result.Years);
+
+    }
+
+    function loadDynamicFilters(context, userId, itemQuery) {
+
+        return ApiClient.getJSON(ApiClient.getUrl('Items/Filters', {
+
+            UserId: userId,
+            ParentId: itemQuery.ParentId,
+            IncludeItemTypes: itemQuery.IncludeItemTypes
+
+
+        })).then(function (result) {
+
+            renderFilters(context, result);
+        });
+
+    }
 
     function updateFilterControls(context, options) {
 
@@ -20,6 +93,20 @@
 
             });
         }
+
+        $('.chkVideoTypeFilter', context).each(function () {
+
+            var filters = "," + (query.VideoTypes || "");
+            var filterName = this.getAttribute('data-filter');
+
+            this.checked = filters.indexOf(',' + filterName) != -1;
+        });
+
+        $('.chk3DFilter', context).checked(query.Is3D == true);
+        $('.chkHDFilter', context).checked(query.IsHD == true);
+        $('.chkSDFilter', context).checked(query.IsHD == false);
+
+        context.querySelector('.playersRadioGroup').selected = query.MinPlayers == null ? 'all' : query.MinPlayers;
     }
 
     function triggerChange(instance) {
@@ -27,6 +114,19 @@
         events.trigger(instance, 'filterchange');
     }
 
+    function parentWithClass(elem, className) {
+
+        while (!elem.classList || !elem.classList.contains(className)) {
+            elem = elem.parentNode;
+
+            if (!elem) {
+                return null;
+            }
+        }
+
+        return elem;
+    }
+
     function bindEvents(instance, context, options) {
 
         var query = options.query;
@@ -71,6 +171,133 @@
                 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);
+        });
+
+        context.querySelector('.playersRadioGroup').addEventListener('iron-select', function(e) {
+
+            query.StartIndex = 0;
+            var val = e.target.selected;
+            query.MinPlayers = val == "all" ? null : val;
+            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) {
@@ -79,6 +306,20 @@
             hideByClass(context, 'nolivetvchannels');
         }
 
+        if (enableDynamicFilters(options.mode)) {
+            context.querySelector('.genreFilters').classList.remove('hide');
+            context.querySelector('.officialRatingFilters').classList.remove('hide');
+            context.querySelector('.tagFilters').classList.remove('hide');
+            context.querySelector('.yearFilters').classList.remove('hide');
+        }
+
+        if (options.mode == 'movies') {
+            context.querySelector('.videoTypeFilters').classList.remove('hide');
+        }
+
+        if (options.mode == 'games') {
+            context.querySelector('.players').classList.remove('hide');
+        }
     }
 
     function hideByClass(context, className) {
@@ -90,6 +331,10 @@
         }
     }
 
+    function enableDynamicFilters(mode) {
+        return mode == 'movies' || mode == 'games';
+    }
+
     return function (options) {
 
         var self = this;
@@ -115,21 +360,31 @@
                     dlg.classList.add('background-theme-a');
 
                     dlg.classList.add('formDialog');
+                    dlg.classList.add('filterDialog');
 
                     var html = '';
 
                     html += Globalize.translateDocument(template);
 
                     dlg.innerHTML = html;
+
                     setVisibility(dlg, options);
                     document.body.appendChild(dlg);
 
+                    // needed for jqm collapsibles
+                    $(dlg.querySelector('.filterDialogContent')).trigger('create');
+
                     paperDialogHelper.open(dlg);
 
                     dlg.addEventListener('iron-overlay-closed', resolve);
 
                     updateFilterControls(dlg, options);
                     bindEvents(self, dlg, options);
+
+                    if (enableDynamicFilters(options.mode)) {
+                        dlg.classList.add('dynamicFilterDialog');
+                        loadDynamicFilters(dlg, Dashboard.getCurrentUserId(), options.query);
+                    }
                 }
 
                 xhr.send();

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

@@ -1,5 +1,5 @@
-<div style="margin: 0;padding:1.5em 2em;">
+<div style="margin: 0;padding:1.5em 2em;" class="filterDialogContent">
-    <h2 style="margin-bottom: .5em;">
+    <h2 style="margin-bottom: .25em;">
         ${HeaderFilters}
     </h2>
     <div class="paperCheckboxList">
@@ -10,4 +10,65 @@
         <paper-checkbox class="chkStandardFilter chkLikes" data-filter="Likes">${OptionLikes}</paper-checkbox>
         <paper-checkbox class="chkStandardFilter chkDislikes" data-filter="Dislikes">${OptionDislikes}</paper-checkbox>
     </div>
+
+    <div class="players hide" style="margin-top:1.5em;">
+        <h2 style="margin-bottom: .25em;">
+            ${HeaderNumberOfPlayers}
+        </h2>
+        <paper-radio-group class="playersRadioGroup" selected="all">
+            <paper-radio-button class="radioPlayers" name="all">${OptionAnyNumberOfPlayers}</paper-radio-button>
+            <paper-radio-button class="radioPlayers" name="2">${Option2Player}</paper-radio-button>
+            <paper-radio-button class="radioPlayers" name="3">${Option3Player}</paper-radio-button>
+            <paper-radio-button class="radioPlayers" name="4">${Option4Player}</paper-radio-button>
+        </paper-radio-group>
+    </div>
+
+    <div data-role="collapsible" data-collapsed="true" data-mini="true" class="genreFilters hide" style="margin-top:2em;">
+        <h2>${HeaderGenres}</h2>
+
+        <div class="filterOptions">
+        </div>
+    </div>
+
+    <div data-role="collapsible" data-collapsed="true" data-mini="true" class="officialRatingFilters hide">
+        <h2>${HeaderParentalRatings}</h2>
+
+        <div class="filterOptions">
+        </div>
+    </div>
+
+    <div data-role="collapsible" data-collapsed="true" data-mini="true" class="tagFilters hide">
+        <h2>${HeaderTags}</h2>
+
+        <div class="filterOptions">
+        </div>
+    </div>
+
+    <div data-role="collapsible" data-collapsed="true" data-mini="true" class="tagFilters hide">
+        <h2>${HeaderTags}</h2>
+
+        <div class="filterOptions">
+        </div>
+    </div>
+
+    <div data-role="collapsible" data-collapsed="true" data-mini="true" class="videoTypeFilters hide">
+        <h2>${HeaderVideoTypes}</h2>
+
+        <div class="paperCheckboxList">
+            <paper-checkbox class="chkVideoTypeFilter chkBluray" data-filter="Bluray">${OptionBluray}</paper-checkbox>
+            <paper-checkbox class="chkVideoTypeFilter chkDvd" data-filter="Dvd">${OptionDvd}</paper-checkbox>
+            <paper-checkbox class="chkVideoTypeFilter chkIso" data-filter="Iso">${OptionIso}</paper-checkbox>
+
+            <paper-checkbox class="chkHDFilter IsHD">${OptionIsHD}</paper-checkbox>
+            <paper-checkbox class="chkSDFilter IsHD">${OptionIsSD}</paper-checkbox>
+            <paper-checkbox class="chk3DFilter chk3D">${Option3D}</paper-checkbox>
+        </div>
+    </div>
+
+    <div data-role="collapsible" data-collapsed="true" data-mini="true" class="yearFilters hide">
+        <h2>${HeaderYears}</h2>
+
+        <div class="filterOptions">
+        </div>
+    </div>
 </div>

dashboard-ui/components/filterdialog/style.css

@@ -0,0 +1,30 @@
+.dynamicFilterDialog {
+    position: fixed !important;
+    top: 5% !important;
+    bottom: 5% !important;
+    margin: 0 !important;
+    border-radius: 0 !important;
+    max-height: none !important;
+    max-width: none !important;
+    min-width: 200px;
+}
+
+@media all and (min-height: 300px) {
+
+    .dynamicFilterDialog {
+        top: 10% !important;
+        bottom: 10% !important;
+    }
+}
+
+@media all and (min-width: 300px) {
+
+    .dynamicFilterDialog {
+        min-width: 240px;
+    }
+}
+
+.filterDialog paper-radio-button {
+    display: block;
+    padding-left: 0;
+}

dashboard-ui/games.html

@@ -4,7 +4,7 @@
     <title>Emby</title>
 </head>
 <body>
-    <div id="gamesPage" data-role="page" class="page libraryPage listPage" data-require="jqmcheckbox,jqmcontrolgroup,jqmpanel,jqmcollapsible,scripts/gamespage,scripts/queryfilters">
+    <div id="gamesPage" data-role="page" class="page libraryPage listPage" data-require="jqmpanel,scripts/gamespage">
         <div class="libraryViewNav scopedLibraryViewNav">
             <a href="gamesrecommended.html">${TabSuggestions}</a>
             <a href="#" class="ui-btn-active">${TabGames}</a>
@@ -23,143 +23,6 @@
             <div id="items" class="itemsContainer"></div>
 
         </div>
-
-        <div data-role="panel" class="viewPanel" data-theme="a" data-position="right" data-display="overlay" data-position-fixed="true">
-            <form>
-
-                <div data-role="controlgroup" data-type="horizontal" data-mini="true" class="viewPanelTabs">
-                    <a href="#" data-role="button" class="viewTabButton" data-tab="tabView">${TabView}</a>
-                    <a href="#" data-role="button" class="viewTabButton" data-tab="tabSort">${TabSort}</a>
-                    <a href="#" data-role="button" class="viewTabButton" data-tab="tabFilter">${TabFilter}</a>
-                </div>
-
-                <div class="tabView viewTab">
-
-                    <div>
-                        <label for="selectView">${LabelView}</label>
-                        <select id="selectView">
-                            <option value="List">${OptionList}</option>
-                            <option value="Poster">${OptionPoster}</option>
-                            <option value="PosterCard">${OptionPosterCard}</option>
-                        </select>
-                    </div>
-                    <br />
-                    <div>
-                        <label for="selectPageSize">${LabelPageSize}</label>
-                        <select id="selectPageSize" class="selectPageSize"></select>
-                    </div>
-
-                </div>
-
-                <div class="tabSort viewTab">
-                    <fieldset data-role="controlgroup">
-                        <legend>
-                            ${HeaderSortBy}
-                        </legend>
-
-                        <input class="radioSortBy defaultSort" type="radio" name="radioSortBy" id="radioSortName" value="on" checked="checked" data-sortby="SortName" data-mini="true">
-                        <label for="radioSortName">${OptionNameSort}</label>
-
-                        <input class="radioSortBy" type="radio" name="radioSortBy" id="radioCommunityRating" value="off" data-sortby="CommunityRating" data-mini="true">
-                        <label for="radioCommunityRating">${OptionCommunityRating}</label>
-
-                        <input class="radioSortBy" type="radio" name="radioSortBy" id="radioDateCreated" value="off" data-sortby="DateCreated" data-mini="true">
-                        <label for="radioDateCreated">${OptionDateAdded}</label>
-
-                        <input class="radioSortBy" type="radio" name="radioSortBy" id="radioDatePlayed" value="off" data-sortby="DatePlayed" data-mini="true">
-                        <label for="radioDatePlayed">${OptionDatePlayed}</label>
-
-                        <input class="radioSortBy" type="radio" name="radioSortBy" id="radioContentRating" value="off" data-sortby="OfficialRating" data-mini="true">
-                        <label for="radioContentRating">${OptionParentalRating}</label>
-
-                        <input class="radioSortBy" type="radio" name="radioSortBy" id="radioPremiereDate" value="off" data-sortby="PremiereDate" data-mini="true">
-                        <label for="radioPremiereDate">${OptionReleaseDate}</label>
-                    </fieldset>
-
-                    <fieldset data-role="controlgroup">
-                        <legend>
-                            ${HeaderSortOrder}
-                        </legend>
-
-                        <input class="radioSortOrder" type="radio" name="radioSortOrder" id="radioAscending" value="on" checked="checked" data-sortorder="Ascending" data-mini="true">
-                        <label for="radioAscending">${OptionAscending}</label>
-
-                        <input class="radioSortOrder" type="radio" name="radioSortOrder" id="radioDescending" value="off" data-sortorder="Descending" data-mini="true">
-                        <label for="radioDescending">${OptionDescending}</label>
-                    </fieldset>
-
-                </div>
-
-                <div class="tabFilter viewTab">
-                    <fieldset data-role="controlgroup">
-                        <legend>
-                            ${HeaderFilters}
-                        </legend>
-                        <input class="chkStandardFilter" type="checkbox" name="chkPlayed" id="chkPlayed" data-filter="IsPlayed" data-mini="true">
-                        <label for="chkPlayed">${OptionPlayed}</label>
-
-                        <input class="chkStandardFilter" type="checkbox" name="chkUnplayed" id="chkUnplayed" data-filter="IsUnPlayed" data-mini="true">
-                        <label for="chkUnplayed">${OptionUnplayed}</label>
-
-                        <input class="chkStandardFilter" type="checkbox" name="chkIsFavorite" id="chkIsFavorite" data-filter="IsFavorite" data-mini="true">
-                        <label for="chkIsFavorite">${OptionFavorite}</label>
-
-                        <input class="chkStandardFilter" type="checkbox" name="chkLikes" id="chkLikes" data-filter="Likes" data-mini="true">
-                        <label for="chkLikes">${OptionLikes}</label>
-
-                        <input class="chkStandardFilter" type="checkbox" name="chkDislikes" id="chkDislikes" data-filter="Dislikes" data-mini="true">
-                        <label for="chkDislikes">${OptionDislikes}</label>
-                    </fieldset>
-
-                    <fieldset data-role="controlgroup">
-                        <legend>
-                            ${HeaderNumberOfPlayers}
-                        </legend>
-
-                        <input class="radioPlayers" type="radio" name="radioPlayers" id="radioAll" value="on" checked="checked" data-value="all" data-mini="true">
-                        <label for="radioAll">${OptionAnyNumberOfPlayers}</label>
-
-                        <input class="radioPlayers" type="radio" name="radioPlayers" id="radioTwo" value="off" data-value="2" data-mini="true">
-                        <label for="radioTwo">${Option2Player}</label>
-
-                        <input class="radioPlayers" type="radio" name="radioPlayers" id="radioThree" value="off" data-value="3" data-mini="true">
-                        <label for="radioThree">${Option3Player}</label>
-
-                        <input class="radioPlayers" type="radio" name="radioPlayers" id="radioFour" value="off" data-value="4" data-mini="true">
-                        <label for="radioFour">${Option4Player}</label>
-                    </fieldset>
-                    <br />
-
-                    <div data-role="collapsible" data-collapsed="true" data-mini="true" class="genreFilters">
-                        <h2>${HeaderGenres}</h2>
-
-                        <div class="filterOptions">
-                        </div>
-                    </div>
-
-                    <div data-role="collapsible" data-collapsed="true" data-mini="true" class="officialRatingFilters">
-                        <h2>${HeaderParentalRatings}</h2>
-
-                        <div class="filterOptions">
-                        </div>
-                    </div>
-
-                    <div data-role="collapsible" data-collapsed="true" data-mini="true" class="tagFilters">
-                        <h2>${HeaderTags}</h2>
-
-                        <div class="filterOptions">
-                        </div>
-                    </div>
-
-                    <div data-role="collapsible" data-collapsed="true" data-mini="true" class="yearFilters">
-                        <h2>${HeaderYears}</h2>
-
-                        <div class="filterOptions">
-                        </div>
-                    </div>
-                </div>
-            </form>
-        </div>
     </div>
 </body>
 </html>

dashboard-ui/movies.html

@@ -4,7 +4,7 @@
     <title>Emby</title>
 </head>
 <body>
-    <div id="moviesPage" data-role="page" data-dom-cache="true" class="page libraryPage backdropPage pageWithAbsoluteTabs collectionEditorPage" data-backdroptype="movie" data-require="jqmpanel,jqmcollapsible,scripts/moviesrecommended,paper-tabs,neon-animated-pages,paper-checkbox,paper-fab">
+    <div id="moviesPage" data-role="page" data-dom-cache="true" class="page libraryPage backdropPage pageWithAbsoluteTabs collectionEditorPage" data-backdroptype="movie" data-require="scripts/moviesrecommended,paper-tabs,neon-animated-pages,paper-checkbox,paper-fab">
 
         <div class="libraryViewNav libraryViewNavWithMinHeight">
             <paper-tabs hidescrollbuttons noink>
@@ -117,92 +117,6 @@
             </neon-animated-pages>
         </div>
 
-        <div data-role="panel" class="viewPanel movieViewPanel hide" data-theme="b" data-position="right" data-display="overlay" data-position-fixed="true">
-            <div class="ui-panel-inner">
-                <form>
-
-                    <div>
-                        <h1>
-                            ${HeaderFilters}
-                        </h1>
-                        <div class="paperCheckboxList">
-                            <paper-checkbox class="chkStandardFilter" data-filter="IsPlayed">${OptionPlayed}</paper-checkbox>
-                            <paper-checkbox class="chkStandardFilter" data-filter="IsUnPlayed">${OptionUnplayed}</paper-checkbox>
-                            <paper-checkbox class="chkStandardFilter" data-filter="IsResumable">${OptionResumable}</paper-checkbox>
-                            <paper-checkbox class="chkStandardFilter" data-filter="IsFavorite">${OptionFavorite}</paper-checkbox>
-                            <paper-checkbox class="chkStandardFilter" data-filter="Likes">${OptionLikes}</paper-checkbox>
-                            <paper-checkbox class="chkStandardFilter" data-filter="Dislikes">${OptionDislikes}</paper-checkbox>
-                        </div>
-                    </div>
-                    <br />
-
-                    <div data-role="collapsible" data-collapsed="true" data-mini="true" class="genreFilters">
-                        <h2>${HeaderGenres}</h2>
-
-                        <div class="filterOptions">
-                        </div>
-                    </div>
-
-                    <div data-role="collapsible" data-collapsed="true" data-mini="true" class="officialRatingFilters">
-                        <h2>${HeaderParentalRatings}</h2>
-
-                        <div class="filterOptions">
-                        </div>
-                    </div>
-
-                    <div data-role="collapsible" data-collapsed="true" data-mini="true" class="tagFilters">
-                        <h2>${HeaderTags}</h2>
-
-                        <div class="filterOptions">
-                        </div>
-                    </div>
-
-                    <div data-role="collapsible" data-collapsed="true" data-mini="true">
-                        <h2>${HeaderVideoTypes}</h2>
-
-                        <div>
-
-                            <div class="checkboxContainer">
-                                <input class="chkVideoTypeFilter chkBluray" type="checkbox" id="chkBlurayMovie" data-filter="Bluray" data-role="none">
-                                <label for="chkBlurayMovie">${OptionBluray}</label>
-                            </div>
-
-                            <div class="checkboxContainer">
-                                <input class="chkVideoTypeFilter chkDvd" type="checkbox" id="chkDvdMovie" data-filter="Dvd" data-role="none">
-                                <label for="chkDvdMovie">${OptionDvd}</label>
-                            </div>
-
-                            <div class="checkboxContainer">
-                                <input class="chkVideoTypeFilter chkIso" type="checkbox" id="chkIsoMovie" data-filter="Iso" data-role="none">
-                                <label for="chkIsoMovie">${OptionIso}</label>
-                            </div>
-
-                            <div class="checkboxContainer">
-                                <input class="chkHDFilter IsHD" type="checkbox" id="chkHDMovie" data-filter="IsHD" data-role="none">
-                                <label for="chkHDMovie">${OptionIsHD}</label>
-                            </div>
-
-                            <div class="checkboxContainer">
-                                <input class="chkSDFilter IsHD" type="checkbox" id="chkSDMovie" data-filter="IsHD" data-role="none">
-                                <label for="chkSDMovie">${OptionIsSD}</label>
-                            </div>
-
-                            <div class="checkboxContainer">
-                                <input class="chk3DFilter chk3D" type="checkbox" id="chk3DMovie" data-filter="Digital3D,Sbs3D" data-role="none">
-                                <label for="chk3DMovie">${Option3D}</label>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div data-role="collapsible" data-collapsed="true" data-mini="true" class="yearFilters">
-                        <h2>${HeaderYears}</h2>
-
-                        <div class="filterOptions">
-                        </div>
-                    </div>
-                </form>
-            </div>
-        </div>
         <div data-role="content">
 
         </div>

dashboard-ui/scripts/gamespage.js

@@ -1,30 +1,49 @@
-
 (function ($, document) {
 
-    var view = LibraryBrowser.getDefaultItemsView('Poster', 'List');
+    var data = {};
 
-    // The base query options
+    function getPageData() {
-    var query = {
+        var key = getSavedQueryKey();
+        var pageData = data[key];
 
-        SortBy: "SortName",
+        if (!pageData) {
-        SortOrder: "Ascending",
+            pageData = data[key] = {
-        MediaTypes: "Game",
+                query: {
-        Recursive: true,
+                    SortBy: "SortName",
-        Fields: "Genres,Studios,PrimaryImageAspectRatio,SortName",
+                    SortOrder: "Ascending",
-        StartIndex: 0,
+                    MediaTypes: "Game",
-        ImageTypeLimit: 1,
+                    Recursive: true,
-        EnableImageTypes: "Primary,Backdrop,Banner,Thumb"
+                    Fields: "Genres,Studios,PrimaryImageAspectRatio,SortName",
-    };
+                    ImageTypeLimit: 1,
+                    EnableImageTypes: "Primary,Backdrop,Banner,Thumb",
+                    StartIndex: 0,
+                    Limit: LibraryBrowser.getDefaultPageSize()
+                },
+                view: LibraryBrowser.getSavedView(key) || LibraryBrowser.getDefaultItemsView('Poster', 'List')
+            };
+
+            pageData.query.ParentId = LibraryMenu.getTopParentId();
+            LibraryBrowser.loadSavedQueryValues(key, pageData.query);
+        }
+        return pageData;
+    }
+
+    function getQuery() {
+
+        return getPageData().query;
+    }
 
     function getSavedQueryKey() {
 
-        return LibraryBrowser.getSavedQueryKey();
+        return LibraryBrowser.getSavedQueryKey('movies');
     }
 
     function reloadItems(page) {
 
         Dashboard.showLoadingMsg();
 
+        var query = getQuery();
+
         ApiClient.getItems(Dashboard.getCurrentUserId(), query).then(function (result) {
 
             // Scroll back up so they can see the results from the beginning
@@ -36,12 +55,11 @@
                 startIndex: query.StartIndex,
                 limit: query.Limit,
                 totalRecordCount: result.TotalRecordCount,
-                viewButton: true,
+                showLimit: false,
-                showLimit: false
+                filterButton: true
             }));
 
-            updateFilterControls(page);
+            var view = getPageData().view;
-            var trigger = false;
 
             if (view == "List") {
 
@@ -86,120 +104,40 @@
                 reloadItems(page);
             });
 
+            $('.btnFilter', page).on('click', function () {
+                showFilterMenu(page);
+            });
+
             LibraryBrowser.saveQueryValues(getSavedQueryKey(), query);
 
             Dashboard.hideLoadingMsg();
         });
     }
 
-    function updateFilterControls(page) {
+    function showFilterMenu(page) {
 
-        // Reset form values using the last used query
+        require(['components/filterdialog/filterdialog'], function (filterDialogFactory) {
-        $('.radioSortBy', page).each(function () {
 
-            this.checked = (query.SortBy || '').toLowerCase() == this.getAttribute('data-sortby').toLowerCase();
+            var filterDialog = new filterDialogFactory({
-
+                query: getQuery(),
-        }).checkboxradio('refresh');
+                mode: 'games'
-
+            });
-        $('.radioSortOrder', page).each(function () {
-
-            this.checked = (query.SortOrder || '').toLowerCase() == this.getAttribute('data-sortorder').toLowerCase();
-
-        }).checkboxradio('refresh');
-
-        $('.radioPlayers', page).each(function () {
-
-            var val = this.getAttribute('data-value');
-
-            if (val == "all") {
-
-                this.checked = query.MinPlayers == null;
-            } else {
-                this.checked = query.MinPlayers == val;
-            }
-
-        }).checkboxradio('refresh');
-
-        $('.chkStandardFilter', page).each(function () {
-
-            var filters = "," + (query.Filters || "");
-            var filterName = this.getAttribute('data-filter');
-
-            this.checked = filters.indexOf(',' + filterName) != -1;
-
-        }).checkboxradio('refresh');
-
-        $('#selectView', page).val(view);
-
-        $('.alphabetPicker', page).alphaValue(query.NameStartsWith);
-        $('#selectPageSize', page).val(query.Limit);
-    }
-
-    var filtersLoaded;
-    function reloadFiltersIfNeeded(page) {
-
-        if (!filtersLoaded) {
-
-            filtersLoaded = true;
-
-            QueryFilters.loadFilters(page, Dashboard.getCurrentUserId(), query, function () {
 
+            Events.on(filterDialog, 'filterchange', function () {
                 reloadItems(page);
             });
-        }
+
+            filterDialog.show();
+        });
     }
 
     $(document).on('pageinit', "#gamesPage", function () {
 
         var page = this;
 
-        $('.viewPanel', page).on('panelopen', function () {
-
-            reloadFiltersIfNeeded(page);
-        });
-
-        $('.radioSortBy', this).on('click', function () {
-            query.StartIndex = 0;
-            query.SortBy = this.getAttribute('data-sortby');
-            reloadItems(page);
-        });
-
-        $('.radioSortOrder', this).on('click', function () {
-            query.StartIndex = 0;
-            query.SortOrder = this.getAttribute('data-sortorder');
-            reloadItems(page);
-        });
-
-        $('.radioPlayers', this).on('click', function () {
-
-            query.StartIndex = 0;
-
-            var val = this.getAttribute('data-value');
-
-            query.MinPlayers = val == "all" ? null : val;
-
-            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.StartIndex = 0;
-            query.Filters = filters;
-
-            reloadItems(page);
-        });
-
         $('.alphabetPicker', this).on('alphaselect', function (e, character) {
 
+            var query = getQuery();
             query.NameStartsWithOrGreater = character;
             query.StartIndex = 0;
 
@@ -207,38 +145,16 @@
 
         }).on('alphaclear', function (e) {
 
+            var query = getQuery();
             query.NameStartsWithOrGreater = '';
 
             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);
-        });
-
-        $('#selectPageSize', page).on('change', function () {
-            query.Limit = parseInt(this.value);
-            query.StartIndex = 0;
-            reloadItems(page);
-        });
-
     }).on('pagebeforeshow', "#gamesPage", function () {
 
         var page = this;
+        var query = getQuery();
         query.ParentId = LibraryMenu.getTopParentId();
 
         var limit = LibraryBrowser.getDefaultPageSize();
@@ -252,7 +168,6 @@
         var viewkey = getSavedQueryKey();
 
         LibraryBrowser.loadSavedQueryValues(viewkey, query);
-        QueryFilters.onPageShow(page, query);
 
         LibraryBrowser.getSavedViewSetting(viewkey).then(function (val) {
 
@@ -262,8 +177,6 @@
                 reloadItems(page);
             }
         });
-
-        updateFilterControls(this);
     });
 
 })(jQuery, document);

dashboard-ui/scripts/movies.js

@@ -58,15 +58,13 @@
                 startIndex: query.StartIndex,
                 limit: query.Limit,
                 totalRecordCount: result.TotalRecordCount,
-                viewButton: true,
                 showLimit: false,
-                viewPanelClass: 'movieViewPanel',
                 updatePageSizeSetting: false,
                 addLayoutButton: true,
-                viewIcon: 'filter-list',
                 sortButton: true,
                 currentLayout: view,
-                layouts: 'Banner,List,Poster,PosterCard,Thumb,ThumbCard,Timeline'
+                layouts: 'Banner,List,Poster,PosterCard,Thumb,ThumbCard,Timeline',
+                filterButton: true
             });
 
             page.querySelector('.listTopPaging').innerHTML = pagingHtml;
@@ -152,12 +150,12 @@
 
             $('.btnNextPage', page).on('click', function () {
                 query.StartIndex += query.Limit;
-                reloadItems(page, viewPanel);
+                reloadItems(page);
             });
 
             $('.btnPreviousPage', page).on('click', function () {
                 query.StartIndex -= query.Limit;
-                reloadItems(page, viewPanel);
+                reloadItems(page);
             });
 
             $('.btnChangeLayout', page).on('layoutchange', function (e, layout) {
@@ -169,7 +167,11 @@
 
                 getPageData().view = layout;
                 LibraryBrowser.saveViewSetting(getSavedQueryKey(), layout);
-                reloadItems(page, viewPanel);
+                reloadItems(page);
+            });
+
+            $('.btnFilter', page).on('click', function () {
+                showFilterMenu(page);
             });
 
             // On callback make sure to set StartIndex = 0
@@ -228,7 +230,7 @@
                         id: 'VideoBitRate,SortName'
                     }],
                     callback: function () {
-                        reloadItems(page, viewPanel);
+                        reloadItems(page);
                     },
                     query: query
                 });
@@ -242,117 +244,31 @@
         });
     }
 
-    function updateFilterControls(tabContent, viewPanel) {
+    function showFilterMenu(page) {
+
+        require(['components/filterdialog/filterdialog'], function (filterDialogFactory) {
+
+            var filterDialog = new filterDialogFactory({
+                query: getQuery(),
+                mode: 'movies'
+            });
+
+            Events.on(filterDialog, 'filterchange', function () {
+                reloadItems(page);
+            });
+
+            filterDialog.show();
+        });
+    }
+
+    function updateFilterControls(tabContent) {
 
         var query = getQuery();
 
-        $('.chkStandardFilter', viewPanel).each(function () {
-
-            var filters = "," + (query.Filters || "");
-            var filterName = this.getAttribute('data-filter');
-
-            this.checked = filters.indexOf(',' + filterName) != -1;
-
-        });
-
-        $('.chkVideoTypeFilter', viewPanel).each(function () {
-
-            var filters = "," + (query.VideoTypes || "");
-            var filterName = this.getAttribute('data-filter');
-
-            this.checked = filters.indexOf(',' + filterName) != -1;
-
-        });
-
-        $('.chk3DFilter', viewPanel).checked(query.Is3D == true);
-        $('.chkHDFilter', viewPanel).checked(query.IsHD == true);
-        $('.chkSDFilter', viewPanel).checked(query.IsHD == false);
-
         $('.alphabetPicker', tabContent).alphaValue(query.NameStartsWithOrGreater);
     }
 
-    function reloadFiltersIfNeeded(tabContent, viewPanel) {
+    function initPage(tabContent) {
-
-        if (!getPageData().filtersLoaded) {
-
-            getPageData().filtersLoaded = true;
-
-            var query = getQuery();
-            QueryFilters.loadFilters(viewPanel, Dashboard.getCurrentUserId(), query, function () {
-
-                reloadItems(tabContent, viewPanel);
-            });
-        }
-    }
-
-    function initPage(tabContent, viewPanel) {
-
-        $(viewPanel).on('panelopen', function () {
-
-            reloadFiltersIfNeeded(tabContent, viewPanel);
-        });
-
-        $('.chkStandardFilter', viewPanel).on('change', function () {
-
-            var query = getQuery();
-            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;
-
-            reloadItems(tabContent, viewPanel);
-        });
-
-        $('.chkVideoTypeFilter', viewPanel).on('change', function () {
-
-            var query = getQuery();
-            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;
-
-            reloadItems(tabContent, viewPanel);
-        });
-
-        $('.chk3DFilter', viewPanel).on('change', function () {
-
-            var query = getQuery();
-            query.StartIndex = 0;
-            query.Is3D = this.checked ? true : null;
-
-            reloadItems(tabContent, viewPanel);
-        });
-
-        $('.chkHDFilter', viewPanel).on('change', function () {
-
-            var query = getQuery();
-            query.StartIndex = 0;
-            query.IsHD = this.checked ? true : null;
-            reloadItems(tabContent, viewPanel);
-        });
-
-        $('.chkSDFilter', viewPanel).on('change', function () {
-
-            var query = getQuery();
-            query.StartIndex = 0;
-            query.IsHD = this.checked ? false : null;
-
-            reloadItems(tabContent, viewPanel);
-        });
 
         $('.alphabetPicker', tabContent).on('alphaselect', function (e, character) {
 
@@ -360,55 +276,32 @@
             query.NameStartsWithOrGreater = character;
             query.StartIndex = 0;
 
-            reloadItems(tabContent, viewPanel);
+            reloadItems(tabContent);
 
         }).on('alphaclear', function (e) {
 
             var query = getQuery();
             query.NameStartsWithOrGreater = '';
 
-            reloadItems(tabContent, viewPanel);
+            reloadItems(tabContent);
-        });
-
-        $('.radioBasicFilters', viewPanel).on('change', function () {
-
-            if (this.checked) {
-                $('.basicFilters', viewPanel).show();
-                $('.advancedFilters', viewPanel).hide();
-            } else {
-                $('.basicFilters', viewPanel).hide();
-            }
-        });
-
-        $('.radioAdvancedFilters', viewPanel).on('change', function () {
-
-            if (this.checked) {
-                $('.advancedFilters', viewPanel).show();
-                $('.basicFilters', viewPanel).hide();
-            } else {
-                $('.advancedFilters', viewPanel).hide();
-            }
         });
 
         $('.itemsContainer', tabContent).on('needsrefresh', function () {
 
-            reloadItems(tabContent, viewPanel);
+            reloadItems(tabContent);
-
         });
     }
 
     window.MoviesPage.initMoviesTab = function (page, tabContent) {
 
-        var viewPanel = page.querySelector('.movieViewPanel');
+        initPage(tabContent);
-        initPage(tabContent, viewPanel);
     };
 
     window.MoviesPage.renderMoviesTab = function (page, tabContent) {
 
         if (LibraryBrowser.needsRefresh(tabContent)) {
-            var viewPanel = page.querySelector('.movieViewPanel');
+            reloadItems(tabContent);
-            reloadItems(tabContent, viewPanel);
+            updateFilterControls(tabContent);
-            updateFilterControls(tabContent, viewPanel);
         }
     };
 

dashboard-ui/strings/html/server.json

@@ -476,7 +476,7 @@
     "LabelEnableRealtimeMonitor": "Enable real time monitoring",
     "LabelEnableRealtimeMonitorHelp": "Changes will be processed immediately, on supported file systems.",
     "ButtonScanLibrary": "Scan Library",
-    "HeaderNumberOfPlayers": "Players:",
+    "HeaderNumberOfPlayers": "Players",
     "OptionAnyNumberOfPlayers": "Any",
     "Option1Player": "1+",
     "Option2Player": "2+",