update episode filters

dashboard-ui/components/filterdialog/filterdialog.js

@@ -106,7 +106,33 @@
         $('.chkHDFilter', context).checked(query.IsHD == true);
         $('.chkSDFilter', context).checked(query.IsHD == false);
 
+        $('#chkSubtitle', context).checked(query.HasSubtitles == true);
+        $('#chkTrailer', context).checked(query.HasTrailer == true);
+        $('#chkThemeSong', context).checked(query.HasThemeSong == true);
+        $('#chkThemeVideo', context).checked(query.HasThemeVideo == true);
+        $('#chkSpecialFeature', context).checked(query.HasSpecialFeature == true);
+
+        $('#chkSpecialEpisode', context).checked(query.ParentIndexNumber == 0);
+        $('#chkMissingEpisode', context).checked(query.IsMissing == true);
+        $('#chkFutureEpisode', context).checked(query.IsUnaired == true);
+
         context.querySelector('.playersRadioGroup').selected = query.MinPlayers == null ? 'all' : query.MinPlayers;
+
+        $('.chkStatus', context).each(function () {
+
+            var filters = "," + (query.SeriesStatus || "");
+            var filterName = this.getAttribute('data-filter');
+
+            this.checked = filters.indexOf(',' + filterName) != -1;
+        });
+
+        $('.chkAirDays', context).each(function () {
+
+            var filters = "," + (query.AirDays || "");
+            var filterName = this.getAttribute('data-filter');
+
+            this.checked = filters.indexOf(',' + filterName) != -1;
+        });
     }
 
     function triggerChange(instance) {
@@ -212,12 +238,119 @@
             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;
-            query.MinPlayers = val == "all" ? null : val;
+            var newValue = val == "all" ? null : val;
-            triggerChange(instance);
+            var changed = query.MinPlayers != newValue;
+            query.MinPlayers = newValue;
+            if (changed) {
+                triggerChange(instance);
+            }
         });
 
         context.addEventListener('change', function(e) {
@@ -313,13 +446,35 @@
             context.querySelector('.yearFilters').classList.remove('hide');
         }
 
-        if (options.mode == 'movies') {
+        if (options.mode == 'movies' || options.mode == 'episodes') {
             context.querySelector('.videoTypeFilters').classList.remove('hide');
         }
 
         if (options.mode == 'games') {
             context.querySelector('.players').classList.remove('hide');
         }
+
+        if (options.mode == 'movies' || options.mode == 'series' || options.mode == 'games' || options.mode == 'episodes') {
+            context.querySelector('.features').classList.remove('hide');
+        }
+
+        if (options.mode == 'series') {
+            context.querySelector('.airdays').classList.remove('hide');
+            context.querySelector('.seriesStatus').classList.remove('hide');
+        }
+
+        if (options.mode == 'episodes') {
+            showByClass(context, 'episodeFilter');
+        }
+    }
+
+    function showByClass(context, className) {
+
+        var elems = context.querySelectorAll('.' + className);
+
+        for (var i = 0, length = elems.length; i < length; i++) {
+            elems[i].classList.remove('hide');
+        }
     }
 
     function hideByClass(context, className) {
@@ -332,7 +487,7 @@
     }
 
     function enableDynamicFilters(mode) {
-        return mode == 'movies' || mode == 'games';
+        return mode == 'movies' || mode == 'games' || mode == 'series';
     }
 
     return function (options) {

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

@@ -9,9 +9,48 @@
         <paper-checkbox class="chkStandardFilter chkFavorite" data-filter="IsFavorite">${OptionFavorite}</paper-checkbox>
         <paper-checkbox class="chkStandardFilter chkLikes" data-filter="Likes">${OptionLikes}</paper-checkbox>
         <paper-checkbox class="chkStandardFilter chkDislikes" data-filter="Dislikes">${OptionDislikes}</paper-checkbox>
+
+        <paper-checkbox id="chkSpecialEpisode" class="episodeFilter hide">${OptionSpecialEpisode}</paper-checkbox>
+        <paper-checkbox id="chkMissingEpisode" class="episodeFilter hide">${OptionMissingEpisode}</paper-checkbox>
+        <paper-checkbox id="chkFutureEpisode" class="episodeFilter hide">${OptionUnairedEpisode}</paper-checkbox>
+    </div>
+    <div class="seriesStatus hide">
+        <br />
+        <h2 style="margin-bottom: .25em;">
+            ${HeaderStatus}
+        </h2>
+        <div class="paperCheckboxList">
+            <paper-checkbox class="chkStatus" id="chkStatusContinuing" data-filter="Continuing">${OptionContinuing}</paper-checkbox>
+            <paper-checkbox class="chkStatus" id="chkStatusEnded" data-filter="Ended">${OptionEnded}</paper-checkbox>
+        </div>
+    </div>
+    <br />
+    <div data-role="collapsible" data-collapsed="true" data-mini="true" class="airdays hide">
+        <h2>${HeaderAirDays}</h2>
+
+        <div class="paperCheckboxList">
+            <paper-checkbox class="chkAirDays" id="chkSunday" data-filter="Sunday">${OptionSunday}</paper-checkbox>
+            <paper-checkbox class="chkAirDays" id="chkMonday" data-filter="Monday">${OptionMonday}</paper-checkbox>
+            <paper-checkbox class="chkAirDays" id="chkTuesday" data-filter="Tuesday">${OptionTuesday}</paper-checkbox>
+            <paper-checkbox class="chkAirDays" id="chkWednesday" data-filter="Wednesday">${OptionWednesday}</paper-checkbox>
+            <paper-checkbox class="chkAirDays" id="chkThursday" data-filter="Thursday">${OptionThursday}</paper-checkbox>
+            <paper-checkbox class="chkAirDays" id="chkFriday" data-filter="Friday">${OptionFriday}</paper-checkbox>
+            <paper-checkbox class="chkAirDays" id="chkSaturday" data-filter="Saturday">${OptionSaturday}</paper-checkbox>
+        </div>
+    </div>
+    <div data-role="collapsible" data-collapsed="true" data-mini="true" class="features hide">
+        <h2>${HeaderFeatures}</h2>
+
+        <div class="paperCheckboxList">
+            <paper-checkbox class="chkFeatureFilter" id="chkSubtitle">${OptionHasSubtitles}</paper-checkbox>
+            <paper-checkbox class="chkFeatureFilter" id="chkTrailer">${OptionHasTrailer}</paper-checkbox>
+            <paper-checkbox class="chkFeatureFilter" id="chkSpecialFeature">${OptionHasSpecialFeatures}</paper-checkbox>
+            <paper-checkbox class="chkFeatureFilter" id="chkThemeSong">${OptionHasThemeSong}</paper-checkbox>
+            <paper-checkbox class="chkFeatureFilter" id="chkThemeVideo">${OptionHasThemeVideo}</paper-checkbox>
+        </div>
     </div>
 
-    <div class="players hide" style="margin-top:1.5em;">
+    <div class="players hide">
         <h2 style="margin-bottom: .25em;">
             ${HeaderNumberOfPlayers}
         </h2>
@@ -22,8 +61,7 @@
             <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">
-    <div data-role="collapsible" data-collapsed="true" data-mini="true" class="genreFilters hide" style="margin-top:2em;">
         <h2>${HeaderGenres}</h2>
 
         <div class="filterOptions">

dashboard-ui/components/filterdialog/style.css

@@ -2,11 +2,14 @@
     position: fixed !important;
     top: 5% !important;
     bottom: 5% !important;
-    margin: 0 !important;
+    left: 50%!important;
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+    margin-right: 0 !important;
     border-radius: 0 !important;
     max-height: none !important;
     max-width: none !important;
-    min-width: 200px;
+    width: 200px;
 }
 
 @media all and (min-height: 300px) {
@@ -20,7 +23,16 @@
 @media all and (min-width: 300px) {
 
     .dynamicFilterDialog {
-        min-width: 240px;
+        width: 240px;
+        margin-left: -120px !important;
+    }
+}
+
+@media all and (min-width: 400px) {
+
+    .dynamicFilterDialog {
+        width: 300px;
+        margin-left: -150px !important;
     }
 }
 

dashboard-ui/scripts/episodes.js

@@ -40,7 +40,7 @@
         return LibraryBrowser.getSavedQueryKey('episodes');
     }
 
-    function reloadItems(page, viewPanel) {
+    function reloadItems(page) {
 
         Dashboard.showLoadingMsg();
 
@@ -57,20 +57,18 @@
                 startIndex: query.StartIndex,
                 limit: query.Limit,
                 totalRecordCount: result.TotalRecordCount,
-                viewButton: true,
                 showLimit: false,
-                viewPanelClass: 'episodesViewPanel',
                 updatePageSizeSetting: false,
                 addLayoutButton: true,
-                viewIcon: 'filter-list',
                 sortButton: true,
                 currentLayout: view,
-                layouts: 'Poster,PosterCard'
+                layouts: 'Poster,PosterCard',
+                filterButton: true
             });
 
             page.querySelector('.listTopPaging').innerHTML = pagingHtml;
 
-            updateFilterControls(page, viewPanel);
+            updateFilterControls(page);
 
             if (view == "List") {
 
@@ -109,18 +107,22 @@
 
             $('.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) {
                 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
@@ -163,7 +165,7 @@
                         id: 'VideoBitRate,SeriesSortName,SortName'
                     }],
                     callback: function () {
-                        reloadItems(page, viewPanel);
+                        reloadItems(page);
                     },
                     query: query
                 });
@@ -175,168 +177,31 @@
         });
     }
 
-    function updateFilterControls(tabContent, viewPanel) {
+    function showFilterMenu(page) {
+
+        require(['components/filterdialog/filterdialog'], function (filterDialogFactory) {
+
+            var filterDialog = new filterDialogFactory({
+                query: getQuery(),
+                mode: 'episodes'
+            });
+
+            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.toLowerCase().indexOf(',' + filterName.toLowerCase()) != -1;
-
-        });
-
-        $('.chkVideoTypeFilter', viewPanel).each(function () {
-
-            var filters = "," + (query.VideoTypes || "");
-            var filterName = this.getAttribute('data-filter');
-
-            this.checked = filters.indexOf(',' + filterName) != -1;
-
-        });
-
-        $('#chkHD', viewPanel).checked(query.IsHD == true);
-        $('#chkSD', viewPanel).checked(query.IsHD == false);
-
-        $('#chkSubtitle', viewPanel).checked(query.HasSubtitles == true);
-        $('#chkTrailer', viewPanel).checked(query.HasTrailer == true);
-        $('#chkThemeSong', viewPanel).checked(query.HasThemeSong == true);
-        $('#chkThemeVideo', viewPanel).checked(query.HasThemeVideo == true);
-        $('#chkSpecialFeature', viewPanel).checked(query.ParentIndexNumber == 0);
-
-        $('#chkMissingEpisode', viewPanel).checked(query.IsMissing == true);
-        $('#chkFutureEpisode', viewPanel).checked(query.IsUnaired == true);
 
         $('.alphabetPicker', tabContent).alphaValue(query.NameStartsWithOrGreater);
     }
 
-    function initPage(tabContent, viewPanel) {
+    function initPage(tabContent) {
-
-        $('.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);
-        });
-
-        $('#chkSubtitle', viewPanel).on('change', function () {
-
-            var query = getQuery();
-            query.StartIndex = 0;
-            query.HasSubtitles = this.checked ? true : null;
-
-            reloadItems(tabContent, viewPanel);
-        });
-
-        $('#chkTrailer', viewPanel).on('change', function () {
-
-            var query = getQuery();
-            query.StartIndex = 0;
-            query.HasTrailer = this.checked ? true : null;
-
-            reloadItems(tabContent, viewPanel);
-        });
-
-        $('#chkThemeSong', viewPanel).on('change', function () {
-
-            var query = getQuery();
-            query.StartIndex = 0;
-            query.HasThemeSong = this.checked ? true : null;
-
-            reloadItems(tabContent, viewPanel);
-        });
-
-        $('#chkThemeVideo', viewPanel).on('change', function () {
-
-            var query = getQuery();
-            query.StartIndex = 0;
-            query.HasThemeVideo = this.checked ? true : null;
-
-            reloadItems(tabContent, viewPanel);
-        });
-
-        $('#chkSpecialFeature', viewPanel).on('change', function () {
-
-            var query = getQuery();
-            query.ParentIndexNumber = this.checked ? 0 : null;
-
-            reloadItems(tabContent, viewPanel);
-        });
-
-        $('#chkMissingEpisode', viewPanel).on('change', function () {
-
-            var query = getQuery();
-            query.StartIndex = 0;
-            query.IsMissing = this.checked ? true : false;
-
-            reloadItems(tabContent, viewPanel);
-        });
-
-        $('#chkFutureEpisode', viewPanel).on('change', function () {
-
-            var query = getQuery();
-            query.StartIndex = 0;
-
-            if (this.checked) {
-                query.IsUnaired = true;
-                query.IsVirtualUnaired = null;
-            } else {
-                query.IsUnaired = null;
-                query.IsVirtualUnaired = false;
-            }
-
-
-            reloadItems(tabContent, viewPanel);
-        });
-
-        $('#chkHD', viewPanel).on('change', function () {
-
-            var query = getQuery();
-            query.StartIndex = 0;
-            query.IsHD = this.checked ? true : null;
-
-            reloadItems(tabContent, viewPanel);
-        });
-
-        $('#chkSD', 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) {
 
@@ -344,35 +209,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);
         });
 
         $('.itemsContainer', tabContent).on('needsrefresh', function () {
 
-            reloadItems(tabContent, viewPanel);
+            reloadItems(tabContent);
-
         });
     }
 
     window.TvPage.initEpisodesTab = function (page, tabContent) {
 
-        var viewPanel = page.querySelector('.episodesViewPanel');
+        initPage(tabContent);
-        initPage(tabContent, viewPanel);
     };
 
     window.TvPage.renderEpisodesTab = function (page, tabContent) {
 
         if (LibraryBrowser.needsRefresh(tabContent)) {
-            var viewPanel = page.querySelector('.episodesViewPanel');
+            reloadItems(tabContent);
-            reloadItems(tabContent, viewPanel);
+            updateFilterControls(tabContent);
-            updateFilterControls(tabContent, viewPanel);
         }
     };
 

dashboard-ui/scripts/moviesrecommended.js

@@ -284,7 +284,6 @@
                 break;
             case 1:
                 depends.push('scripts/movies');
-                depends.push('scripts/queryfilters');
                 renderMethod = 'renderMoviesTab';
                 initMethod = 'initMoviesTab';
                 break;

dashboard-ui/scripts/tvrecommended.js

@@ -208,7 +208,6 @@
                 break;
             case 3:
                 depends.push('scripts/tvshows');
-                depends.push('scripts/queryfilters');
                 renderMethod = 'renderSeriesTab';
                 initMethod = 'initSeriesTab';
                 break;

dashboard-ui/scripts/tvshows.js

@@ -38,7 +38,7 @@
         return LibraryBrowser.getSavedQueryKey('series');
     }
 
-    function reloadItems(page, viewPanel) {
+    function reloadItems(page) {
 
         Dashboard.showLoadingMsg();
 
@@ -56,15 +56,13 @@
                 startIndex: query.StartIndex,
                 limit: query.Limit,
                 totalRecordCount: result.TotalRecordCount,
-                viewButton: true,
                 showLimit: false,
-                viewPanelClass: 'seriesViewPanel',
                 updatePageSizeSetting: false,
                 addLayoutButton: true,
-                viewIcon: 'filter-list',
                 sortButton: true,
                 currentLayout: view,
-                layouts: 'Banner,List,Poster,PosterCard,Thumb,ThumbCard'
+                layouts: 'Banner,List,Poster,PosterCard,Thumb,ThumbCard',
+                filterButton: true
             });
 
             page.querySelector('.listTopPaging').innerHTML = pagingHtml;
@@ -144,18 +142,22 @@
 
             $('.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) {
                 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
@@ -194,7 +196,7 @@
                         id: 'PremiereDate,SortName'
                     }],
                     callback: function () {
-                        reloadItems(page, viewPanel);
+                        reloadItems(page);
                     },
                     query: query
                 });
@@ -207,152 +209,30 @@
         });
     }
 
-    function updateFilterControls(tabContent, viewPanel) {
+    function showFilterMenu(page) {
 
-        $('.chkStatus', viewPanel).each(function () {
+        require(['components/filterdialog/filterdialog'], function (filterDialogFactory) {
 
-            var filters = "," + (getQuery().SeriesStatus || "");
+            var filterDialog = new filterDialogFactory({
-            var filterName = this.getAttribute('data-filter');
+                query: getQuery(),
+                mode: 'series'
+            });
 
-            this.checked = filters.indexOf(',' + filterName) != -1;
+            Events.on(filterDialog, 'filterchange', function () {
+                reloadItems(page);
+            });
 
+            filterDialog.show();
         });
+    }
 
-        $('.chkStandardFilter', viewPanel).each(function () {
+    function updateFilterControls(tabContent) {
-
-            var filters = "," + (getQuery().Filters || "");
-            var filterName = this.getAttribute('data-filter');
-
-            this.checked = filters.indexOf(',' + filterName) != -1;
-
-        });
-
-        $('.chkAirDays', viewPanel).each(function () {
-
-            var filters = "," + (getQuery().AirDays || "");
-            var filterName = this.getAttribute('data-filter');
-
-            this.checked = filters.indexOf(',' + filterName) != -1;
-
-        });
 
         var query = getQuery();
-
-        $('#chkTrailer', viewPanel).checked(query.HasTrailer == true);
-        $('#chkThemeSong', viewPanel).checked(query.HasThemeSong == true);
-        $('#chkThemeVideo', viewPanel).checked(query.HasThemeVideo == true);
-        $('#chkSpecialFeature', viewPanel).checked(query.HasSpecialFeature == true);
-
         $('.alphabetPicker', tabContent).alphaValue(query.NameStartsWith);
     }
 
-    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.Filters = filters;
-            query.StartIndex = 0;
-            reloadItems(tabContent, viewPanel);
-        });
-
-        $('.chkStatus', viewPanel).on('change', function () {
-
-            var query = getQuery();
-            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;
-            reloadItems(tabContent, viewPanel);
-        });
-
-        $('.chkAirDays', viewPanel).on('change', function () {
-
-            var query = getQuery();
-            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;
-            reloadItems(tabContent, viewPanel);
-        });
-
-        $('#chkTrailer', viewPanel).on('change', function () {
-
-            var query = getQuery();
-            query.StartIndex = 0;
-            query.HasTrailer = this.checked ? true : null;
-
-            reloadItems(tabContent, viewPanel);
-        });
-
-        $('#chkThemeSong', viewPanel).on('change', function () {
-
-            var query = getQuery();
-            query.StartIndex = 0;
-            query.HasThemeSong = this.checked ? true : null;
-
-            reloadItems(tabContent, viewPanel);
-        });
-
-        $('#chkSpecialFeature', viewPanel).on('change', function () {
-
-            var query = getQuery();
-            query.StartIndex = 0;
-            query.HasSpecialFeature = this.checked ? true : null;
-
-            reloadItems(tabContent, viewPanel);
-        });
-
-        $('#chkThemeVideo', viewPanel).on('change', function () {
-
-            var query = getQuery();
-            query.StartIndex = 0;
-            query.HasThemeVideo = this.checked ? true : null;
-
-            reloadItems(tabContent, viewPanel);
-        });
 
         $('.alphabetPicker', tabContent).on('alphaselect', function (e, character) {
 
@@ -360,49 +240,27 @@
             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();
-            }
         });
     }
 
     window.TvPage.initSeriesTab = function (page, tabContent) {
 
-        var viewPanel = page.querySelector('.seriesViewPanel');
+        initPage(tabContent);
-        initPage(tabContent, viewPanel);
     };
 
     window.TvPage.renderSeriesTab = function (page, tabContent) {
 
         if (LibraryBrowser.needsRefresh(tabContent)) {
-            var viewPanel = page.querySelector('.seriesViewPanel');
+            reloadItems(tabContent);
-            reloadItems(tabContent, viewPanel);
+            updateFilterControls(tabContent);
-            updateFilterControls(tabContent, viewPanel);
         }
     };
 

dashboard-ui/tv.html

@@ -4,7 +4,7 @@
     <title>Emby</title>
 </head>
 <body>
-    <div id="tvRecommendedPage" data-dom-cache="true" data-role="page" class="page libraryPage backdropPage pageWithAbsoluteTabs" data-backdroptype="series" data-require="jqmpanel,jqmcollapsible,scripts/tvrecommended,paper-tabs,neon-animated-pages,paper-checkbox">
+    <div id="tvRecommendedPage" data-dom-cache="true" data-role="page" class="page libraryPage backdropPage pageWithAbsoluteTabs" data-backdroptype="series" data-require="scripts/tvrecommended,paper-tabs,neon-animated-pages,paper-checkbox">
 
         <div class="libraryViewNav libraryViewNavWithMinHeight">
             <paper-tabs hidescrollbuttons noink>
@@ -117,136 +117,6 @@
             </neon-animated-pages>
         </div>
 
-        <div data-role="panel" class="viewPanel hide seriesViewPanel" data-theme="b" data-position="right" data-display="overlay" data-position-fixed="true">
-            <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="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>
-
-                <div>
-                    <h1>
-                        ${HeaderStatus}
-                    </h1>
-                    <div class="paperCheckboxList">
-                        <paper-checkbox class="chkStatus" id="chkStatusContinuing" data-filter="Continuing">${OptionContinuing}</paper-checkbox>
-                        <paper-checkbox class="chkStatus" id="chkStatusEnded" data-filter="Ended">${OptionEnded}</paper-checkbox>
-                    </div>
-                </div>
-                <br />
-
-                <div data-role="collapsible" data-collapsed="true" data-mini="true">
-                    <h2>${HeaderAirDays}</h2>
-
-                    <div class="paperCheckboxList">
-                        <paper-checkbox class="chkAirDays" id="chkSunday" data-filter="Sunday">${OptionSunday}</paper-checkbox>
-                        <paper-checkbox class="chkAirDays" id="chkMonday" data-filter="Monday">${OptionMonday}</paper-checkbox>
-                        <paper-checkbox class="chkAirDays" id="chkTuesday" data-filter="Tuesday">${OptionTuesday}</paper-checkbox>
-                        <paper-checkbox class="chkAirDays" id="chkWednesday" data-filter="Wednesday">${OptionWednesday}</paper-checkbox>
-                        <paper-checkbox class="chkAirDays" id="chkThursday" data-filter="Thursday">${OptionThursday}</paper-checkbox>
-                        <paper-checkbox class="chkAirDays" id="chkFriday" data-filter="Friday">${OptionFriday}</paper-checkbox>
-                        <paper-checkbox class="chkAirDays" id="chkSaturday" data-filter="Saturday">${OptionSaturday}</paper-checkbox>
-                    </div>
-                </div>
-                <div data-role="collapsible" data-collapsed="true" data-mini="true">
-                    <h2>${HeaderFeatures}</h2>
-
-                    <div class="paperCheckboxList">
-                        <paper-checkbox class="chkFeatureFilter" id="chkTrailer">${OptionHasTrailer}</paper-checkbox>
-                        <paper-checkbox class="chkFeatureFilter" id="chkSpecialFeature">${OptionHasSpecialFeatures}</paper-checkbox>
-                        <paper-checkbox class="chkFeatureFilter" id="chkThemeSong">${OptionHasThemeSong}</paper-checkbox>
-                        <paper-checkbox class="chkFeatureFilter" id="chkThemeVideo">${OptionHasThemeVideo}</paper-checkbox>
-                    </div>
-                </div>
-
-                <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>
-
-            </form>
-        </div>
-
-        <div data-role="panel" class="viewPanel episodesViewPanel hide" data-theme="b" data-position="right" data-display="overlay" data-position-fixed="true">
-            <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>
-
-                        <paper-checkbox id="chkSpecialFeature">${OptionSpecialEpisode}</paper-checkbox>
-                        <paper-checkbox id="chkMissingEpisode">${OptionMissingEpisode}</paper-checkbox>
-                        <paper-checkbox id="chkFutureEpisode">${OptionUnairedEpisode}</paper-checkbox>
-                    </div>
-
-                </div>
-                <div>
-                    <h1>
-                        ${LabelVideoType}
-                    </h1>
-
-                    <div class="paperCheckboxList">
-                        <paper-checkbox class="chkVideoTypeFilter" data-filter="Bluray" id="chkBluray">${OptionBluray}</paper-checkbox>
-                        <paper-checkbox class="chkVideoTypeFilter" data-filter="Dvd" id="chkDvd">${OptionDvd}</paper-checkbox>
-                        <paper-checkbox class="chkVideoTypeFilter" data-filter="Iso" id="chkIso">${OptionIso}</paper-checkbox>
-                        <paper-checkbox class="chkHDFilter" data-filter="IsHD" id="chkHD">${OptionIsHD}</paper-checkbox>
-                        <paper-checkbox class="chkSDFilter" data-filter="IsSD" id="chkSD">${OptionIsSD}</paper-checkbox>
-                    </div>
-                </div>
-
-                <div>
-                    <h1>
-                        ${LabelFeatures}
-                    </h1>
-
-                    <div class="paperCheckboxList">
-                        <paper-checkbox class="chkFeatureFilter" id="chkSubtitle">${OptionHasSubtitles}</paper-checkbox>
-                    </div>
-                </div>
-            </form>
-        </div>
-
         <div data-role="content">
         </div>
     </div>