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 { ItemSortBy } from '@jellyfin/sdk/lib/models/api/item-sort-by';
import { SortOrder } from '@jellyfin/sdk/lib/generated-client'; 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: 'Name', value: ItemSortBy.SortName },
{ label: 'OptionRandom', value: ItemSortBy.Random }, { label: 'OptionRandom', value: ItemSortBy.Random },
{ label: 'OptionImdbRating', value: ItemSortBy.CommunityRating }, { label: 'OptionImdbRating', value: ItemSortBy.CommunityRating },
@ -29,6 +36,66 @@ const sortMenuOptions = [
{ label: 'Runtime', value: ItemSortBy.Runtime } { 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 = [ const sortOrderMenuOptions = [
{ label: 'Ascending', value: SortOrder.Ascending }, { label: 'Ascending', value: SortOrder.Ascending },
{ label: 'Descending', value: SortOrder.Descending } { label: 'Descending', value: SortOrder.Descending }
@ -72,25 +139,7 @@ const SortButton: FC<SortButtonProps> = ({
[setLibraryViewSettings] [setLibraryViewSettings]
); );
const getVisibleSortMenu = () => { const sortMenuOptions = getSortMenuOptions(viewType);
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;
};
return ( return (
<Box> <Box>
@ -120,7 +169,6 @@ const SortButton: FC<SortButtonProps> = ({
'& .MuiFormControl-root': { m: 1, width: 200 } '& .MuiFormControl-root': { m: 1, width: 200 }
}} }}
> >
<FormControl fullWidth> <FormControl fullWidth>
<InputLabel id='select-sort-label'> <InputLabel id='select-sort-label'>
<Typography component='span'> <Typography component='span'>
@ -136,7 +184,6 @@ const SortButton: FC<SortButtonProps> = ({
onChange={onSelectChange} onChange={onSelectChange}
> >
{sortMenuOptions {sortMenuOptions
.filter((option) => getVisibleSortMenu().includes(option.value))
.map((option) => ( .map((option) => (
<MenuItem <MenuItem
key={option.value} key={option.value}
@ -166,10 +213,7 @@ const SortButton: FC<SortButtonProps> = ({
onChange={onSelectChange} onChange={onSelectChange}
> >
{sortOrderMenuOptions.map((option) => ( {sortOrderMenuOptions.map((option) => (
<MenuItem <MenuItem key={option.value} value={option.value}>
key={option.value}
value={option.value}
>
<Typography component='span'> <Typography component='span'>
{option.label} {option.label}
</Typography> </Typography>

10
src/utils/items.ts
View file

@ -144,6 +144,14 @@ export const getSettingsKey = (viewType: LibraryTab, parentId: ParentId) => {
return `${viewType} - ${parentId}`; return `${viewType} - ${parentId}`;
}; };
export const getDefaultSortBy = (viewType: LibraryTab) => {
if (viewType === LibraryTab.Episodes) {
return ItemSortBy.SeriesSortName;
}
return ItemSortBy.SortName;
};
export const getDefaultLibraryViewSettings = (viewType: LibraryTab): LibraryViewSettings => { export const getDefaultLibraryViewSettings = (viewType: LibraryTab): LibraryViewSettings => {
return { return {
ShowTitle: true, ShowTitle: true,
@ -151,7 +159,7 @@ export const getDefaultLibraryViewSettings = (viewType: LibraryTab): LibraryView
ViewMode: viewType === LibraryTab.Songs ? ViewMode.ListView : ViewMode.GridView, ViewMode: viewType === LibraryTab.Songs ? ViewMode.ListView : ViewMode.GridView,
ImageType: viewType === LibraryTab.Networks ? ImageType.Thumb : ImageType.Primary, ImageType: viewType === LibraryTab.Networks ? ImageType.Thumb : ImageType.Primary,
CardLayout: false, CardLayout: false,
SortBy: ItemSortBy.SortName, SortBy: getDefaultSortBy(viewType),
SortOrder: SortOrder.Ascending, SortOrder: SortOrder.Ascending,
StartIndex: 0 StartIndex: 0
}; };