diff --git a/src/components/filterdialog/filterIndicator.js b/src/components/filterdialog/filterIndicator.js new file mode 100644 index 0000000000..5686aef579 --- /dev/null +++ b/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', + '
!
' + ); + btnFilterWrapper.classList.add('btnFilterWithIndicator'); + indicatorElem = btnFilterWrapper.querySelector('.filterIndicator'); + } + + if (indicatorElem) { + indicatorElem.classList.toggle('hide', !hasFilters); + } + } +} diff --git a/src/components/filterdialog/filterIndicator.scss b/src/components/filterdialog/filterIndicator.scss new file mode 100644 index 0000000000..fa5c1b9010 --- /dev/null +++ b/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; +} diff --git a/src/controllers/livetv.html b/src/controllers/livetv.html index f60ade03dc..a490b9c3ad 100644 --- a/src/controllers/livetv.html +++ b/src/controllers/livetv.html @@ -61,7 +61,9 @@
- +
+ +
diff --git a/src/controllers/livetv/livetvchannels.js b/src/controllers/livetv/livetvchannels.js index 3dc1d04c97..f0df9b8f05 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 { 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) { diff --git a/src/controllers/movies/movies.html b/src/controllers/movies/movies.html index 7a08694b2a..d2f2cb42bc 100644 --- a/src/controllers/movies/movies.html +++ b/src/controllers/movies/movies.html @@ -6,7 +6,9 @@ - +
+ +
@@ -48,7 +50,9 @@
- +
+ +
diff --git a/src/controllers/movies/movies.js b/src/controllers/movies/movies.js index 96e7e89c5c..717d197e74 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 { 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(); diff --git a/src/controllers/movies/movietrailers.js b/src/controllers/movies/movietrailers.js index 1993f07c37..9607bbc7c6 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 { 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) { diff --git a/src/controllers/music/music.html b/src/controllers/music/music.html index aad1fe545d..5ba1c72d17 100644 --- a/src/controllers/music/music.html +++ b/src/controllers/music/music.html @@ -15,7 +15,9 @@ - +
+ +
@@ -57,7 +59,9 @@
- +
+ +
@@ -73,7 +77,9 @@
- +
+ +
@@ -94,7 +100,9 @@
- +
+ +
diff --git a/src/controllers/music/musicalbums.js b/src/controllers/music/musicalbums.js index 42d4ad2dc8..6f11aaf10c 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 { 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) { diff --git a/src/controllers/music/musicartists.js b/src/controllers/music/musicartists.js index 3ae5d05d3e..f48543ad22 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 { 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); diff --git a/src/controllers/music/songs.js b/src/controllers/music/songs.js index 277f02a9ce..bd2904ad07 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 { 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) { diff --git a/src/controllers/shows/episodes.js b/src/controllers/shows/episodes.js index 3cf5779968..3fdeefcda8 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 { 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) { diff --git a/src/controllers/shows/tvrecommended.html b/src/controllers/shows/tvrecommended.html index a46d72ae9c..3b0e18255b 100644 --- a/src/controllers/shows/tvrecommended.html +++ b/src/controllers/shows/tvrecommended.html @@ -5,7 +5,9 @@
- +
+ +
@@ -59,7 +61,9 @@
- +
+ +
diff --git a/src/controllers/shows/tvshows.js b/src/controllers/shows/tvshows.js index cb857dfd75..6ffdfa1dfd 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 { 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) { diff --git a/src/scripts/settings/userSettings.js b/src/scripts/settings/userSettings.js index f83f313415..367566a6c8 100644 --- a/src/scripts/settings/userSettings.js +++ b/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)); } /**