From c779035a75c67c586d03d9b5e345934350a36bed Mon Sep 17 00:00:00 2001 From: grafixeyehero Date: Tue, 18 Jun 2024 05:00:20 +0300 Subject: [PATCH] Add Filter Status Indicator --- .../filterdialog/filterIndicator.js | 50 +++++++++++++++++++ .../filterdialog/filterIndicator.scss | 25 ++++++++++ src/controllers/livetv/livetvchannels.js | 4 ++ src/controllers/movies/movies.js | 4 ++ src/controllers/movies/movietrailers.js | 4 ++ src/controllers/music/musicalbums.js | 4 ++ src/controllers/music/musicartists.js | 4 ++ src/controllers/music/songs.js | 4 ++ src/controllers/shows/episodes.js | 4 ++ src/controllers/shows/tvshows.js | 4 ++ 10 files changed, 107 insertions(+) create mode 100644 src/components/filterdialog/filterIndicator.js create mode 100644 src/components/filterdialog/filterIndicator.scss 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) {