mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
use filtermenu
This commit is contained in:
parent
0acac1b52d
commit
0dc9ad8904
7 changed files with 215 additions and 51 deletions
|
@ -21,8 +21,7 @@ interface ViewItemsContainerI {
|
|||
isBtnNewCollectionEnabled?: boolean;
|
||||
isAlphaPickerEnabled?: boolean;
|
||||
getBasekey: () => string;
|
||||
getFilterMode: () => string;
|
||||
getItemTypes: () => string;
|
||||
getItemTypes: () => string[];
|
||||
getNoItemsMessage: () => string;
|
||||
}
|
||||
|
||||
|
@ -33,7 +32,6 @@ const ViewItemsContainer: FC<ViewItemsContainerI> = ({
|
|||
isBtnNewCollectionEnabled = false,
|
||||
isAlphaPickerEnabled = true,
|
||||
getBasekey,
|
||||
getFilterMode,
|
||||
getItemTypes,
|
||||
getNoItemsMessage
|
||||
}) => {
|
||||
|
@ -62,11 +60,52 @@ const ViewItemsContainer: FC<ViewItemsContainerI> = ({
|
|||
};
|
||||
}, [getDefaultSortBy, getSettingsKey]);
|
||||
|
||||
const getFilters = useCallback(() => {
|
||||
const basekey = getSettingsKey();
|
||||
return {
|
||||
IsPlayed: userSettings.getFilter(basekey + '-filter-IsPlayed') === 'true',
|
||||
IsUnplayed: userSettings.getFilter(basekey + '-filter-IsUnplayed') === 'true',
|
||||
IsFavorite: userSettings.getFilter(basekey + '-filter-IsFavorite') === 'true',
|
||||
IsResumable: userSettings.getFilter(basekey + '-filter-IsResumable') === 'true',
|
||||
Is4K: userSettings.getFilter(basekey + '-filter-Is4K') === 'true',
|
||||
IsHD: userSettings.getFilter(basekey + '-filter-IsHD') === 'true',
|
||||
IsSD: userSettings.getFilter(basekey + '-filter-IsSD') === 'true',
|
||||
Is3D: userSettings.getFilter(basekey + '-filter-Is3D') === 'true',
|
||||
VideoTypes: userSettings.getFilter(basekey + '-filter-VideoTypes'),
|
||||
SeriesStatus: userSettings.getFilter(basekey + '-filter-SeriesStatus'),
|
||||
HasSubtitles: userSettings.getFilter(basekey + '-filter-HasSubtitles'),
|
||||
HasTrailer: userSettings.getFilter(basekey + '-filter-HasTrailer'),
|
||||
HasSpecialFeature: userSettings.getFilter(basekey + '-filter-HasSpecialFeature'),
|
||||
HasThemeSong: userSettings.getFilter(basekey + '-filter-HasThemeSong'),
|
||||
HasThemeVideo: userSettings.getFilter(basekey + '-filter-HasThemeVideo'),
|
||||
GenreIds: userSettings.getFilter(basekey + '-filter-GenreIds')
|
||||
};
|
||||
}, [getSettingsKey]);
|
||||
|
||||
const getFilterMenuOptions = useCallback(() => {
|
||||
return {};
|
||||
}, []);
|
||||
|
||||
const getVisibleFilters = useCallback(() => {
|
||||
return [
|
||||
'IsUnplayed',
|
||||
'IsPlayed',
|
||||
'IsFavorite',
|
||||
'IsResumable',
|
||||
'VideoType',
|
||||
'HasSubtitles',
|
||||
'HasTrailer',
|
||||
'HasSpecialFeature',
|
||||
'HasThemeSong',
|
||||
'HasThemeVideo'
|
||||
];
|
||||
}, []);
|
||||
|
||||
const getQuery = useCallback(() => {
|
||||
const query: QueryI = {
|
||||
SortBy: getSortValues().sortBy,
|
||||
SortOrder: getSortValues().sortOrder,
|
||||
IncludeItemTypes: getItemTypes(),
|
||||
IncludeItemTypes: getItemTypes().join(','),
|
||||
Recursive: true,
|
||||
Fields: 'PrimaryImageAspectRatio,MediaSourceCount,BasicSyncInfo',
|
||||
ImageTypeLimit: 1,
|
||||
|
@ -84,6 +123,97 @@ const ViewItemsContainer: FC<ViewItemsContainerI> = ({
|
|||
return query;
|
||||
}, [getSortValues, getItemTypes, topParentId, getBasekey, getSettingsKey]);
|
||||
|
||||
const getQueryWithFilters = useCallback(() => {
|
||||
const query = getQuery();
|
||||
|
||||
const queryFilters = [];
|
||||
let hasFilters;
|
||||
|
||||
const filters = getFilters();
|
||||
|
||||
if (filters.IsPlayed) {
|
||||
queryFilters.push('IsPlayed');
|
||||
hasFilters = true;
|
||||
}
|
||||
|
||||
if (filters.IsUnplayed) {
|
||||
queryFilters.push('IsUnplayed');
|
||||
hasFilters = true;
|
||||
}
|
||||
|
||||
if (filters.IsFavorite) {
|
||||
queryFilters.push('IsFavorite');
|
||||
hasFilters = true;
|
||||
}
|
||||
|
||||
if (filters.IsResumable) {
|
||||
queryFilters.push('IsResumable');
|
||||
hasFilters = true;
|
||||
}
|
||||
|
||||
if (filters.VideoTypes) {
|
||||
hasFilters = true;
|
||||
query.VideoTypes = filters.VideoTypes;
|
||||
}
|
||||
|
||||
if (filters.GenreIds) {
|
||||
hasFilters = true;
|
||||
query.GenreIds = filters.GenreIds;
|
||||
}
|
||||
|
||||
if (filters.Is4K) {
|
||||
query.Is4K = true;
|
||||
hasFilters = true;
|
||||
}
|
||||
|
||||
if (filters.IsHD) {
|
||||
query.IsHD = true;
|
||||
hasFilters = true;
|
||||
}
|
||||
|
||||
if (filters.IsSD) {
|
||||
query.IsHD = false;
|
||||
hasFilters = true;
|
||||
}
|
||||
|
||||
if (filters.Is3D) {
|
||||
query.Is3D = true;
|
||||
hasFilters = true;
|
||||
}
|
||||
|
||||
if (filters.HasSubtitles) {
|
||||
query.HasSubtitles = true;
|
||||
hasFilters = true;
|
||||
}
|
||||
|
||||
if (filters.HasTrailer) {
|
||||
query.HasTrailer = true;
|
||||
hasFilters = true;
|
||||
}
|
||||
|
||||
if (filters.HasSpecialFeature) {
|
||||
query.HasSpecialFeature = true;
|
||||
hasFilters = true;
|
||||
}
|
||||
|
||||
if (filters.HasThemeSong) {
|
||||
query.HasThemeSong = true;
|
||||
hasFilters = true;
|
||||
}
|
||||
|
||||
if (filters.HasThemeVideo) {
|
||||
query.HasThemeVideo = true;
|
||||
hasFilters = true;
|
||||
}
|
||||
|
||||
query.Filters = queryFilters.length ? queryFilters.join(',') : null;
|
||||
|
||||
return {
|
||||
query: query,
|
||||
hasFilters: hasFilters
|
||||
};
|
||||
}, [getQuery, getFilters]);
|
||||
|
||||
const getSortMenuOptions = useCallback(() => {
|
||||
return [{
|
||||
name: globalize.translate('Name'),
|
||||
|
@ -123,7 +253,7 @@ const ViewItemsContainer: FC<ViewItemsContainerI> = ({
|
|||
}, [getViewSettings]);
|
||||
|
||||
const getContext = useCallback(() => {
|
||||
const itemType = getItemTypes();
|
||||
const itemType = getItemTypes().join(',');
|
||||
if (itemType === 'Movie' || itemType === 'BoxSet') {
|
||||
return 'movies';
|
||||
}
|
||||
|
@ -139,8 +269,8 @@ const ViewItemsContainer: FC<ViewItemsContainerI> = ({
|
|||
return;
|
||||
}
|
||||
loading.show();
|
||||
const query = getQuery();
|
||||
window.ApiClient.getItems(window.ApiClient.getCurrentUserId(), query).then((result) => {
|
||||
const querywithfilters = getQueryWithFilters().query;
|
||||
window.ApiClient.getItems(window.ApiClient.getCurrentUserId(), querywithfilters).then((result) => {
|
||||
setItemsResult(result);
|
||||
window.scrollTo(0, 0);
|
||||
|
||||
|
@ -150,7 +280,7 @@ const ViewItemsContainer: FC<ViewItemsContainerI> = ({
|
|||
autoFocuser.autoFocus(page);
|
||||
});
|
||||
});
|
||||
}, [getQuery]);
|
||||
}, [getQueryWithFilters]);
|
||||
|
||||
useEffect(() => {
|
||||
reloadItems();
|
||||
|
@ -171,7 +301,15 @@ const ViewItemsContainer: FC<ViewItemsContainerI> = ({
|
|||
reloadItems={reloadItems}
|
||||
/>
|
||||
|
||||
{isBtnFilterEnabled && <Filter query={getQuery()} getFilterMode={getFilterMode} reloadItems={reloadItems} />}
|
||||
{isBtnFilterEnabled && <Filter
|
||||
topParentId={topParentId}
|
||||
getFilters={getFilters}
|
||||
getSettingsKey={getSettingsKey}
|
||||
getItemTypes={getItemTypes}
|
||||
getVisibleFilters={getVisibleFilters}
|
||||
getFilterMenuOptions={getFilterMenuOptions}
|
||||
reloadItems={reloadItems}
|
||||
/>}
|
||||
|
||||
{isBtnNewCollectionEnabled && <NewCollection />}
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue