diff --git a/src/components/filterdialog/filterIndicator.js b/src/components/filterdialog/filterIndicator.js
new file mode 100644
index 0000000000..ac70b512d5
--- /dev/null
+++ b/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',
+ '
!
'
+ );
+ btnFilter.classList.add('btnFilterWithIndicator');
+ indicatorElem = btnFilter.querySelector('.filterIndicator');
+ }
+
+ if (indicatorElem) {
+ if (hasFilters) {
+ indicatorElem.classList.remove('hide');
+ } else {
+ indicatorElem.classList.add('hide');
+ }
+ }
+ }
+}
diff --git a/src/components/filterdialog/filterIndicator.scss b/src/components/filterdialog/filterIndicator.scss
new file mode 100644
index 0000000000..922099384e
--- /dev/null
+++ b/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;
+}
diff --git a/src/controllers/livetv/livetvchannels.js b/src/controllers/livetv/livetvchannels.js
index 3dc1d04c97..3ad4538cbd 100644
--- a/src/controllers/livetv/livetvchannels.js
+++ b/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) {
diff --git a/src/controllers/movies/movies.js b/src/controllers/movies/movies.js
index 96e7e89c5c..58be2f68c4 100644
--- a/src/controllers/movies/movies.js
+++ b/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;
diff --git a/src/controllers/movies/movietrailers.js b/src/controllers/movies/movietrailers.js
index 1993f07c37..7c12756d65 100644
--- a/src/controllers/movies/movietrailers.js
+++ b/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) {
diff --git a/src/controllers/music/musicalbums.js b/src/controllers/music/musicalbums.js
index 42d4ad2dc8..67c4ac3b6a 100644
--- a/src/controllers/music/musicalbums.js
+++ b/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) {
diff --git a/src/controllers/music/musicartists.js b/src/controllers/music/musicartists.js
index 3ae5d05d3e..9c9856f42c 100644
--- a/src/controllers/music/musicartists.js
+++ b/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);
diff --git a/src/controllers/music/songs.js b/src/controllers/music/songs.js
index 277f02a9ce..bbeea5ea60 100644
--- a/src/controllers/music/songs.js
+++ b/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) {
diff --git a/src/controllers/shows/episodes.js b/src/controllers/shows/episodes.js
index 3cf5779968..6b6b0386c2 100644
--- a/src/controllers/shows/episodes.js
+++ b/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) {
diff --git a/src/controllers/shows/tvshows.js b/src/controllers/shows/tvshows.js
index cb857dfd75..aa02d8df62 100644
--- a/src/controllers/shows/tvshows.js
+++ b/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) {