Add filter status indicator

src/components/filterdialog/filterIndicator.js

@@ -0,0 +1,49 @@
+import './filterIndicator.scss';
+
+function getFilterStatus(query) {
+    return Boolean(
+        query.Filters
+            || query.IsFavorite
+            || query.VideoTypes
+            || query.SeriesStatus
+            || query.Is4K
+            || (query.IsHD !== undefined && query.IsHD !== null)
+            || query.IsSD
+            || query.Is3D
+            || query.HasSubtitles
+            || query.HasTrailer
+            || query.HasSpecialFeature
+            || query.HasThemeSong
+            || query.HasThemeVideo
+            || query.IsMissing
+            || query.ParentIndexNumber
+            || query.Genres
+            || query.Tags
+            || query.Years
+            || query.OfficialRatings
+            || query.IsUnaired
+    );
+}
+
+export function setFilterStatus(page, query) {
+    const hasFilters = getFilterStatus(query);
+
+    const btnFilterWrapper = page.querySelector('.btnFilter-wrapper');
+
+    if (btnFilterWrapper) {
+        let indicatorElem = btnFilterWrapper.querySelector('.filterIndicator');
+
+        if (!indicatorElem && hasFilters) {
+            btnFilterWrapper.insertAdjacentHTML(
+                'afterbegin',
+                '<div class="filterIndicator">!</div>'
+            );
+            btnFilterWrapper.classList.add('btnFilterWithIndicator');
+            indicatorElem = btnFilterWrapper.querySelector('.filterIndicator');
+        }
+
+        if (indicatorElem) {
+            indicatorElem.classList.toggle('hide', !hasFilters);
+        }
+    }
+}

src/components/filterdialog/filterIndicator.scss

@@ -0,0 +1,21 @@
+.btnFilterWithIndicator {
+    position: relative;
+}
+
+.filterIndicator {
+    color: #fff;
+    position: absolute;
+    top: 2px;
+    right: 2px;
+    width: 1.8em;
+    height: 1.8em;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 60%;
+    border-radius: 100em;
+    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
+    background: #03a9f4;
+    font-weight: bold;
+}

src/controllers/livetv.html

@@ -61,7 +61,9 @@ <h2 class="sectionTitle sectionTitle-cards" style="display: inline-block; vertic
         <div class="pageTabContent" id="channelsTab" data-index="2">
             <div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom focuscontainer-x">
                 <div class="paging"></div>
-                <button is="paper-icon-button-light" class="btnFilter sectionTitleButton" title="${Filter}"><span class="material-icons filter_list" aria-hidden="true"></span></button>
+                <div class="btnFilter-wrapper">
+                    <button is="paper-icon-button-light" class="btnFilter sectionTitleButton" title="${Filter}"><span class="material-icons filter_list" aria-hidden="true"></span></button>
+                </div>
             </div>
             <div is="emby-itemscontainer" id="items" class="itemsContainer vertical-wrap padded-left padded-right"></div>
             <div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom focuscontainer-x">

src/controllers/livetv/livetvchannels.js

@@ -4,6 +4,7 @@ import libraryBrowser from '../../scripts/libraryBrowser';
 import loading from '../../components/loading/loading';
 import * as userSettings from '../../scripts/settings/userSettings';
 import Events from '../../utils/events.ts';
+import { setFilterStatus } from 'components/filterdialog/filterIndicator';
 
 import '../../elements/emby-itemscontainer/emby-itemscontainer';
 
@@ -117,6 +118,8 @@ export default function (view, params, tabContent) {
         loading.show();
         isLoading = true;
         const query = getQuery();
+        setFilterStatus(context, query);
+
         const apiClient = ApiClient;
         query.UserId = apiClient.getCurrentUserId();
         return apiClient.getLiveTvChannels(query).then(function (result) {

src/controllers/movies/movies.html

@@ -6,7 +6,9 @@
             <button is="paper-icon-button-light" class="btnShuffle autoSize hide" title="${Shuffle}"><span class="material-icons shuffle" aria-hidden="true"></span></button>
             <button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><span class="material-icons view_comfy" aria-hidden="true"></span></button>
             <button is="paper-icon-button-light" class="btnSort autoSize" title="${Sort}"><span class="material-icons sort_by_alpha" aria-hidden="true"></span></button>
-            <button is="paper-icon-button-light" class="btnFilter autoSize" title="${Filter}"><span class="material-icons filter_list" aria-hidden="true"></span></button>
+            <div class="btnFilter-wrapper">
+                <button is="paper-icon-button-light" class="btnFilter autoSize" title="${Filter}"><span class="material-icons filter_list" aria-hidden="true"></span></button>
+            </div>
         </div>
 
         <div class="alphaPicker alphaPicker-fixed alphaPicker-vertical">
@@ -48,7 +50,9 @@ <h2 class="sectionTitle sectionTitle-cards padded-left">${HeaderLatestMovies}</h
         <div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom focuscontainer-x">
             <div class="paging"></div>
             <button is="paper-icon-button-light" class="btnSort autoSize" title="${Sort}"><span class="material-icons sort_by_alpha" aria-hidden="true"></span></button>
-            <button is="paper-icon-button-light" class="btnFilter autoSize" title="${Filter}"><span class="material-icons filter_list" aria-hidden="true"></span></button>
+            <div class="btnFilter-wrapper">
+                <button is="paper-icon-button-light" class="btnFilter autoSize" title="${Filter}"><span class="material-icons filter_list" aria-hidden="true"></span></button>
+            </div>
         </div>
 
         <div class="alphaPicker alphaPicker-fixed alphaPicker-fixed-right alphaPicker-vertical">

src/controllers/movies/movies.js

@@ -7,6 +7,7 @@ import cardBuilder from '../../components/cardbuilder/cardBuilder';
 import globalize from '../../lib/globalize';
 import Events from '../../utils/events.ts';
 import { playbackManager } from '../../components/playback/playbackmanager';
+import { setFilterStatus } from 'components/filterdialog/filterIndicator';
 
 import '../../elements/emby-itemscontainer/emby-itemscontainer';
 
@@ -39,6 +40,8 @@ export default function (view, params, tabContent, options) {
     }
 
     const afterRefresh = (result) => {
+        setFilterStatus(tabContent, query);
+
         function onNextPageClick() {
             if (isLoading) {
                 return;
@@ -297,6 +300,7 @@ export default function (view, params, tabContent, options) {
             });
             Events.on(filterDialog, 'filterchange', () => {
                 query.StartIndex = 0;
+                userSettings.saveQuerySettings(savedQueryKey, query);
                 itemsContainer.refreshItems();
             });
             filterDialog.show();

src/controllers/movies/movietrailers.js

@@ -7,6 +7,7 @@ import cardBuilder from '../../components/cardbuilder/cardBuilder';
 import * as userSettings from '../../scripts/settings/userSettings';
 import globalize from '../../lib/globalize';
 import Events from '../../utils/events.ts';
+import { setFilterStatus } from 'components/filterdialog/filterIndicator';
 
 import '../../elements/emby-itemscontainer/emby-itemscontainer';
 
@@ -52,6 +53,8 @@ export default function (view, params, tabContent) {
         loading.show();
         isLoading = true;
         const query = getQuery();
+        setFilterStatus(tabContent, query);
+
         ApiClient.getItems(ApiClient.getCurrentUserId(), query).then((result) => {
             function onNextPageClick() {
                 if (isLoading) {

src/controllers/music/music.html

@@ -15,7 +15,9 @@
             <button is="paper-icon-button-light" class="btnShuffle musicglobalButton" title="${Shuffle}"><span class="material-icons shuffle" aria-hidden="true"></span></button>
             <button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><span class="material-icons view_comfy" aria-hidden="true"></span></button>
             <button is="paper-icon-button-light" class="btnSort autoSize" title="${Sort}"><span class="material-icons sort_by_alpha" aria-hidden="true"></span></button>
-            <button is="paper-icon-button-light" class="btnFilter autoSize" title="${Filter}"><span class="material-icons filter_list" aria-hidden="true"></span></button>
+            <div class="btnFilter-wrapper">
+                <button is="paper-icon-button-light" class="btnFilter autoSize" title="${Filter}"><span class="material-icons filter_list" aria-hidden="true"></span></button>
+            </div>
         </div>
 
         <div class="alphaPicker alphaPicker-fixed alphaPicker-vertical">
@@ -57,7 +59,9 @@ <h2 class="sectionTitle sectionTitle-cards padded-left">${HeaderFrequentlyPlayed
         <div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom focuscontainer-x">
             <div class="paging"></div>
             <button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><span class="material-icons view_comfy" aria-hidden="true"></span></button>
-            <button is="paper-icon-button-light" class="btnFilter autoSize" title="${Filter}"><span class="material-icons filter_list" aria-hidden="true"></span></button>
+            <div class="btnFilter-wrapper">
+                <button is="paper-icon-button-light" class="btnFilter autoSize" title="${Filter}"><span class="material-icons filter_list" aria-hidden="true"></span></button>
+            </div>
         </div>
 
         <div class="alphaPicker alphaPicker-fixed alphaPicker-vertical">
@@ -73,7 +77,9 @@ <h2 class="sectionTitle sectionTitle-cards padded-left">${HeaderFrequentlyPlayed
         <div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom focuscontainer-x">
             <div class="paging"></div>
             <button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><span class="material-icons view_comfy" aria-hidden="true"></span></button>
-            <button is="paper-icon-button-light" class="btnFilter autoSize" title="${Filter}"><span class="material-icons filter_list" aria-hidden="true"></span></button>
+            <div class="btnFilter-wrapper">
+                <button is="paper-icon-button-light" class="btnFilter autoSize" title="${Filter}"><span class="material-icons filter_list" aria-hidden="true"></span></button>
+            </div>
         </div>
 
         <div class="alphaPicker alphaPicker-fixed alphaPicker-vertical">
@@ -94,7 +100,9 @@ <h2 class="sectionTitle sectionTitle-cards padded-left">${HeaderFrequentlyPlayed
             <div class="paging"></div>
             <button is="paper-icon-button-light" class="btnShuffle autoSize" title="${Shuffle}"><span class="material-icons shuffle" aria-hidden="true"></span></button>
             <button is="paper-icon-button-light" class="btnSort autoSize" title="${Sort}"><span class="material-icons sort_by_alpha" aria-hidden="true"></span></button>
-            <button is="paper-icon-button-light" class="btnFilter autoSize" title="${Filter}"><span class="material-icons filter_list" aria-hidden="true"></span></button>
+            <div class="btnFilter-wrapper">
+                <button is="paper-icon-button-light" class="btnFilter autoSize" title="${Filter}"><span class="material-icons filter_list" aria-hidden="true"></span></button>
+            </div>
         </div>
 
         <div is="emby-itemscontainer" id="items" class="itemsContainer vertical-list" style="max-width:67.5em;margin: 0 auto;"></div>

src/controllers/music/musicalbums.js

@@ -8,6 +8,7 @@ import cardBuilder from '../../components/cardbuilder/cardBuilder';
 import * as userSettings from '../../scripts/settings/userSettings';
 import globalize from '../../lib/globalize';
 import Events from '../../utils/events.ts';
+import { setFilterStatus } from 'components/filterdialog/filterIndicator';
 
 import '../../elements/emby-itemscontainer/emby-itemscontainer';
 
@@ -83,6 +84,8 @@ export default function (view, params, tabContent) {
         loading.show();
         isLoading = true;
         const query = getQuery();
+        setFilterStatus(tabContent, query);
+
         ApiClient.getItems(ApiClient.getCurrentUserId(), query).then((result) => {
             function onNextPageClick() {
                 if (isLoading) {

src/controllers/music/musicartists.js

@@ -6,6 +6,7 @@ import listView from '../../components/listview/listview';
 import cardBuilder from '../../components/cardbuilder/cardBuilder';
 import * as userSettings from '../../scripts/settings/userSettings';
 import Events from '../../utils/events.ts';
+import { setFilterStatus } from 'components/filterdialog/filterIndicator';
 
 import '../../elements/emby-itemscontainer/emby-itemscontainer';
 
@@ -67,6 +68,8 @@ export default function (view, params, tabContent, options) {
         loading.show();
         isLoading = true;
         const query = getQuery();
+        setFilterStatus(tabContent, query);
+
         const promise = options.mode == 'albumartists' ?
             ApiClient.getAlbumArtists(ApiClient.getCurrentUserId(), query) :
             ApiClient.getArtists(ApiClient.getCurrentUserId(), query);

src/controllers/music/songs.js

@@ -8,6 +8,7 @@ import * as userSettings from '../../scripts/settings/userSettings';
 import globalize from '../../lib/globalize';
 import Dashboard from '../../utils/dashboard';
 import Events from '../../utils/events.ts';
+import { setFilterStatus } from 'components/filterdialog/filterIndicator';
 
 import '../../elements/emby-itemscontainer/emby-itemscontainer';
 
@@ -53,6 +54,8 @@ export default function (view, params, tabContent) {
         loading.show();
         isLoading = true;
         const query = getQuery();
+        setFilterStatus(tabContent, query);
+
         ApiClient.getItems(Dashboard.getCurrentUserId(), query).then(function (result) {
             function onNextPageClick() {
                 if (isLoading) {

src/controllers/shows/episodes.js

@@ -7,6 +7,7 @@ import * as userSettings from '../../scripts/settings/userSettings';
 import globalize from '../../lib/globalize';
 import Dashboard from '../../utils/dashboard';
 import Events from '../../utils/events.ts';
+import { setFilterStatus } from 'components/filterdialog/filterIndicator';
 
 import '../../elements/emby-itemscontainer/emby-itemscontainer';
 
@@ -69,6 +70,8 @@ export default function (view, params, tabContent) {
         loading.show();
         isLoading = true;
         const query = getQuery();
+        setFilterStatus(page, query);
+
         ApiClient.getItems(Dashboard.getCurrentUserId(), query).then(function (result) {
             function onNextPageClick() {
                 if (isLoading) {

src/controllers/shows/tvrecommended.html

@@ -5,7 +5,9 @@
             <div class="paging"></div>
             <button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><span class="material-icons view_comfy" aria-hidden="true"></span></button>
             <button is="paper-icon-button-light" class="btnSort autoSize" title="${Sort}"><span class="material-icons sort_by_alpha" aria-hidden="true"></span></button>
-            <button is="paper-icon-button-light" class="btnFilter autoSize" title="${Filter}"><span class="material-icons filter_list" aria-hidden="true"></span></button>
+            <div class="btnFilter-wrapper">
+                <button is="paper-icon-button-light" class="btnFilter autoSize" title="${Filter}"><span class="material-icons filter_list" aria-hidden="true"></span></button>
+            </div>
         </div>
 
         <div is="emby-itemscontainer" class="itemsContainer padded-left padded-right"></div>
@@ -59,7 +61,9 @@ <h1>${MessageNothingHere}</h1>
             <div class="paging"></div>
             <button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><span class="material-icons view_comfy" aria-hidden="true"></span></button>
             <button is="paper-icon-button-light" class="btnSort autoSize" title="${Sort}"><span class="material-icons sort_by_alpha" aria-hidden="true"></span></button>
-            <button is="paper-icon-button-light" class="btnFilter autoSize" title="${Filter}"><span class="material-icons filter_list" aria-hidden="true"></span></button>
+            <div class="btnFilter-wrapper">
+                <button is="paper-icon-button-light" class="btnFilter autoSize" title="${Filter}"><span class="material-icons filter_list" aria-hidden="true"></span></button>
+            </div>
         </div>
         <div is="emby-itemscontainer" class="itemsContainer vertical-wrap padded-left padded-right">
         </div>

src/controllers/shows/tvshows.js

@@ -7,6 +7,7 @@ import AlphaPicker from '../../components/alphaPicker/alphaPicker';
 import * as userSettings from '../../scripts/settings/userSettings';
 import globalize from '../../lib/globalize';
 import Events from '../../utils/events.ts';
+import { setFilterStatus } from 'components/filterdialog/filterIndicator';
 
 import '../../elements/emby-itemscontainer/emby-itemscontainer';
 
@@ -68,6 +69,8 @@ export default function (view, params, tabContent) {
         loading.show();
         isLoading = true;
         const query = getQuery();
+        setFilterStatus(page, query);
+
         ApiClient.getItems(ApiClient.getCurrentUserId(), query).then((result) => {
             function onNextPageClick() {
                 if (isLoading) {

src/scripts/settings/userSettings.js

@@ -523,16 +523,7 @@ export class UserSettings {
      * @param {Object} query - Query.
      */
     saveQuerySettings(key, query) {
-        const values = {};
-        if (query.SortBy) {
-            values.SortBy = query.SortBy;
-        }
-
-        if (query.SortOrder) {
-            values.SortOrder = query.SortOrder;
-        }
-
-        return this.set(key, JSON.stringify(values));
+        return this.set(key, JSON.stringify(query));
     }
 
     /**