mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Merge pull request #5717 from grafixeyehero/Add-filter-status-Indicator-legacy

Browse source 
Add filter status indicator
This commit is contained in:
Bill Thornton 2024-08-20 16:45:52 -04:00 • committed by GitHub
commit 31fbc08269
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
15 changed files with 123 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

49
src/components/filterdialog/filterIndicator.js Normal file
View file

@ -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);
}
}
}

21
src/components/filterdialog/filterIndicator.scss Normal file
View file

@ -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;
}

4
src/controllers/livetv.html
View file

@ -61,7 +61,9 @@
<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">

3
src/controllers/livetv/livetvchannels.js
View file

@ -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) {

8
src/controllers/movies/movies.html
View file

@ -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 @@
<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">

4
src/controllers/movies/movies.js
View file

@ -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();

3
src/controllers/movies/movietrailers.js
View file

@ -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) {

16
src/controllers/music/music.html
View file

@ -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 @@
<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 @@
<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 @@
<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>

3
src/controllers/music/musicalbums.js
View file

@ -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) {

3
src/controllers/music/musicartists.js
View file

@ -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);

3
src/controllers/music/songs.js
View file

@ -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) {

3
src/controllers/shows/episodes.js
View file

@ -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) {

8
src/controllers/shows/tvrecommended.html
View file

@ -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 @@
<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>

3
src/controllers/shows/tvshows.js
View file

@ -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) {

11
src/scripts/settings/userSettings.js
View file

@ -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));
}
/**