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

use filtermenu

This commit is contained in:
grafixeyehero 2022-10-03 02:33:43 +03:00
parent 0acac1b52d
commit 0dc9ad8904
7 changed files with 215 additions and 51 deletions

View file

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