Add Filter Status Indicator

src/components/filterdialog/filterIndicator.js

@@ -0,0 +1,50 @@
+import './filterIndicator.scss';
+
+export function getFilterStatus(query) {
+    return Boolean(
+        query.Filters
+            || 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, hasFilters) {
+    const btnFilter = page.querySelector('.btnFilter');
+
+    if (btnFilter) {
+        let indicatorElem = btnFilter.querySelector('.filterIndicator');
+
+        if (!indicatorElem && hasFilters) {
+            btnFilter.insertAdjacentHTML(
+                'beforeend',
+                '<div class="filterIndicator">!</div>'
+            );
+            btnFilter.classList.add('btnFilterWithIndicator');
+            indicatorElem = btnFilter.querySelector('.filterIndicator');
+        }
+
+        if (indicatorElem) {
+            if (hasFilters) {
+                indicatorElem.classList.remove('hide');
+            } else {
+                indicatorElem.classList.add('hide');
+            }
+        }
+    }
+}

src/components/filterdialog/filterIndicator.scss

@@ -0,0 +1,25 @@
+.btnFilterWithIndicator {
+    position: relative;
+}
+
+.btnFilterWithIndicator > div {
+    margin-left: 3px;
+}
+
+.filterIndicator {
+    color: #fff;
+    position: absolute;
+    top: -7px;
+    right: 0;
+    width: 1.6em;
+    height: 1.6em;
+    z-index: 100000000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 45%;
+    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/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 { getFilterStatus, setFilterStatus } from 'components/filterdialog/filterIndicator';
 
 import '../../elements/emby-itemscontainer/emby-itemscontainer';
 
@@ -117,6 +118,9 @@ export default function (view, params, tabContent) {
         loading.show();
         isLoading = true;
         const query = getQuery();
+        const hasFilters = getFilterStatus(query);
+        setFilterStatus(context, hasFilters);
+
         const apiClient = ApiClient;
         query.UserId = apiClient.getCurrentUserId();
         return apiClient.getLiveTvChannels(query).then(function (result) {

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 { getFilterStatus, setFilterStatus } from 'components/filterdialog/filterIndicator';
 
 import '../../elements/emby-itemscontainer/emby-itemscontainer';
 
@@ -39,6 +40,9 @@ export default function (view, params, tabContent, options) {
     }
 
     const afterRefresh = (result) => {
+        const hasFilters = getFilterStatus(query);
+        setFilterStatus(tabContent, hasFilters);
+
         function onNextPageClick() {
             if (isLoading) {
                 return;

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 { getFilterStatus, setFilterStatus } from 'components/filterdialog/filterIndicator';
 
 import '../../elements/emby-itemscontainer/emby-itemscontainer';
 
@@ -52,6 +53,9 @@ export default function (view, params, tabContent) {
         loading.show();
         isLoading = true;
         const query = getQuery();
+        const hasFilters = getFilterStatus(query);
+        setFilterStatus(tabContent, hasFilters);
+
         ApiClient.getItems(ApiClient.getCurrentUserId(), query).then((result) => {
             function onNextPageClick() {
                 if (isLoading) {

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 { getFilterStatus, setFilterStatus } from 'components/filterdialog/filterIndicator';
 
 import '../../elements/emby-itemscontainer/emby-itemscontainer';
 
@@ -83,6 +84,9 @@ export default function (view, params, tabContent) {
         loading.show();
         isLoading = true;
         const query = getQuery();
+        const hasFilters = getFilterStatus(query);
+        setFilterStatus(tabContent, hasFilters);
+
         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 { getFilterStatus, setFilterStatus } from 'components/filterdialog/filterIndicator';
 
 import '../../elements/emby-itemscontainer/emby-itemscontainer';
 
@@ -67,6 +68,9 @@ export default function (view, params, tabContent, options) {
         loading.show();
         isLoading = true;
         const query = getQuery();
+        const hasFilters = getFilterStatus(query);
+        setFilterStatus(tabContent, hasFilters);
+
         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 { getFilterStatus, setFilterStatus } from 'components/filterdialog/filterIndicator';
 
 import '../../elements/emby-itemscontainer/emby-itemscontainer';
 
@@ -53,6 +54,9 @@ export default function (view, params, tabContent) {
         loading.show();
         isLoading = true;
         const query = getQuery();
+        const hasFilters = getFilterStatus(query);
+        setFilterStatus(tabContent, hasFilters);
+
         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 { getFilterStatus, setFilterStatus } from 'components/filterdialog/filterIndicator';
 
 import '../../elements/emby-itemscontainer/emby-itemscontainer';
 
@@ -69,6 +70,9 @@ export default function (view, params, tabContent) {
         loading.show();
         isLoading = true;
         const query = getQuery();
+        const hasFilters = getFilterStatus(query);
+        setFilterStatus(page, hasFilters);
+
         ApiClient.getItems(Dashboard.getCurrentUserId(), query).then(function (result) {
             function onNextPageClick() {
                 if (isLoading) {

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 { getFilterStatus, setFilterStatus } from 'components/filterdialog/filterIndicator';
 
 import '../../elements/emby-itemscontainer/emby-itemscontainer';
 
@@ -68,6 +69,9 @@ export default function (view, params, tabContent) {
         loading.show();
         isLoading = true;
         const query = getQuery();
+        const hasFilters = getFilterStatus(query);
+        setFilterStatus(page, hasFilters);
+
         ApiClient.getItems(ApiClient.getCurrentUserId(), query).then((result) => {
             function onNextPageClick() {
                 if (isLoading) {