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 #4880 from grafixeyehero/sort-options

Browse source 
Use sort options based on view type
This commit is contained in:
Bill Thornton 2023-11-03 11:22:09 -04:00 • committed by GitHub
commit ad79f39910
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 79 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

96
src/apps/experimental/components/library/SortButton.tsx
View file

@ -16,7 +16,14 @@ import { LibraryTab } from 'types/libraryTab';
import { ItemSortBy } from '@jellyfin/sdk/lib/models/api/item-sort-by';
import { SortOrder } from '@jellyfin/sdk/lib/generated-client';
const sortMenuOptions = [
type SortOption = {
label: string;
value: ItemSortBy;
};
type SortOptionsMapping = Record<string, SortOption[]>;
const movieOrFavoriteOptions = [
{ label: 'Name', value: ItemSortBy.SortName },
{ label: 'OptionRandom', value: ItemSortBy.Random },
{ label: 'OptionImdbRating', value: ItemSortBy.CommunityRating },
@ -29,6 +36,66 @@ const sortMenuOptions = [
{ label: 'Runtime', value: ItemSortBy.Runtime }
];
const sortOptionsMapping: SortOptionsMapping = {
[LibraryTab.Movies]: movieOrFavoriteOptions,
[LibraryTab.Trailers]: [
{ label: 'Name', value: ItemSortBy.SortName },
{ label: 'OptionImdbRating', value: ItemSortBy.CommunityRating },
{ label: 'OptionDateAdded', value: ItemSortBy.DateCreated },
{ label: 'OptionDatePlayed', value: ItemSortBy.DatePlayed },
{ label: 'OptionParentalRating', value: ItemSortBy.OfficialRating },
{ label: 'OptionPlayCount', value: ItemSortBy.PlayCount },
{ label: 'OptionReleaseDate', value: ItemSortBy.PremiereDate }
],
[LibraryTab.Favorites]: movieOrFavoriteOptions,
[LibraryTab.Series]: [
{ label: 'Name', value: ItemSortBy.SortName },
{ label: 'OptionRandom', value: ItemSortBy.Random },
{ label: 'OptionImdbRating', value: ItemSortBy.CommunityRating },
{ label: 'OptionDateShowAdded', value: ItemSortBy.DateCreated },
{ label: 'OptionDateEpisodeAdded', value: ItemSortBy.DateLastContentAdded },
{ label: 'OptionDatePlayed', value: ItemSortBy.SeriesDatePlayed },
{ label: 'OptionParentalRating', value: ItemSortBy.OfficialRating },
{ label: 'OptionReleaseDate', value: ItemSortBy.PremiereDate }
],
[LibraryTab.Episodes]: [
{ label: 'Name', value: ItemSortBy.SeriesSortName },
{ label: 'OptionImdbRating', value: ItemSortBy.CommunityRating },
{ label: 'OptionDateAdded', value: ItemSortBy.DateCreated },
{ label: 'OptionReleaseDate', value: ItemSortBy.PremiereDate },
{ label: 'OptionDatePlayed', value: ItemSortBy.DatePlayed },
{ label: 'OptionParentalRating', value: ItemSortBy.OfficialRating },
{ label: 'OptionPlayCount', value: ItemSortBy.PlayCount },
{ label: 'Runtime', value: ItemSortBy.Runtime },
{ label: 'OptionRandom', value: ItemSortBy.Random }
],
[LibraryTab.Albums]: [
{ label: 'Name', value: ItemSortBy.SortName },
{ label: 'OptionRandom', value: ItemSortBy.Random },
{ label: 'AlbumArtist', value: ItemSortBy.AlbumArtist },
{ label: 'OptionImdbRating', value: ItemSortBy.CommunityRating },
{ label: 'OptionCriticRating', value: ItemSortBy.CriticRating },
{ label: 'OptionReleaseDate', value: ItemSortBy.ProductionYear },
{ label: 'OptionDateAdded', value: ItemSortBy.DateCreated }
],
[LibraryTab.Songs]: [
{ label: 'Name', value: ItemSortBy.SortName },
{ label: 'Album', value: ItemSortBy.Album },
{ label: 'AlbumArtist', value: ItemSortBy.AlbumArtist },
{ label: 'Artist', value: ItemSortBy.Artist },
{ label: 'OptionDateAdded', value: ItemSortBy.DateCreated },
{ label: 'OptionDatePlayed', value: ItemSortBy.DatePlayed },
{ label: 'OptionPlayCount', value: ItemSortBy.PlayCount },
{ label: 'OptionReleaseDate', value: ItemSortBy.PremiereDate },
{ label: 'Runtime', value: ItemSortBy.Runtime },
{ label: 'OptionRandom', value: ItemSortBy.Random }
]
};
const getSortMenuOptions = (viewType: LibraryTab): SortOption[] => {
return sortOptionsMapping[viewType] || [];
};
const sortOrderMenuOptions = [
{ label: 'Ascending', value: SortOrder.Ascending },
{ label: 'Descending', value: SortOrder.Descending }
@ -72,25 +139,7 @@ const SortButton: FC<SortButtonProps> = ({
[setLibraryViewSettings]
);
const getVisibleSortMenu = () => {
const visibleSortMenu: ItemSortBy[] = [ItemSortBy.SortName, ItemSortBy.Random, ItemSortBy.DateCreated];
if (
viewType !== LibraryTab.Photos
&& viewType !== LibraryTab.Videos
&& viewType !== LibraryTab.Books
) {
visibleSortMenu.push(ItemSortBy.CommunityRating);
visibleSortMenu.push(ItemSortBy.CriticRating);
visibleSortMenu.push(ItemSortBy.DatePlayed);
visibleSortMenu.push(ItemSortBy.OfficialRating);
visibleSortMenu.push(ItemSortBy.PlayCount);
visibleSortMenu.push(ItemSortBy.PremiereDate);
visibleSortMenu.push(ItemSortBy.Runtime);
}
return visibleSortMenu;
};
const sortMenuOptions = getSortMenuOptions(viewType);
return (
<Box>
@ -120,7 +169,6 @@ const SortButton: FC<SortButtonProps> = ({
'& .MuiFormControl-root': { m: 1, width: 200 }
}}
>
<FormControl fullWidth>
<InputLabel id='select-sort-label'>
<Typography component='span'>
@ -136,7 +184,6 @@ const SortButton: FC<SortButtonProps> = ({
onChange={onSelectChange}
>
{sortMenuOptions
.filter((option) => getVisibleSortMenu().includes(option.value))
.map((option) => (
<MenuItem
key={option.value}
@ -166,10 +213,7 @@ const SortButton: FC<SortButtonProps> = ({
onChange={onSelectChange}
>
{sortOrderMenuOptions.map((option) => (
<MenuItem
key={option.value}
value={option.value}
>
<MenuItem key={option.value} value={option.value}>
<Typography component='span'>
{option.label}
</Typography>