pogmommy/feishin
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve genres for jellyfin

Browse source 
- Support music folder
- Add images
- Fix genre filters on album/track filters
This commit is contained in:
jeffvli 2023-08-08 09:18:43 -07:00
parent 3f813b1a26
commit 7c59722f0a
11 changed files with 163 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/renderer/api/jellyfin.types.ts
View file

@ -16,7 +16,7 @@ export interface JFGenreListResponse extends JFBasePaginatedResponse {
export type JFGenreList = JFGenreListResponse;
export enum JFGenreListSort {
NAME = 'Name,SortName',
NAME = 'SortName',
}
export type JFAlbumArtistDetailResponse = JFAlbumArtist;

12
src/renderer/api/jellyfin/jellyfin-controller.ts
View file

@ -119,12 +119,20 @@ const getMusicFolderList = async (args: MusicFolderListArgs): Promise<MusicFolde
const getGenreList = async (args: GenreListArgs): Promise<GenreListResponse> => {
const { apiClientProps, query } = args;
if (!apiClientProps.server?.userId) {
throw new Error('No userId found');
}
const res = await jfApiClient(apiClientProps).getGenreList({
query: {
Fields: 'ItemCounts',
ParentId: query?.musicFolderId,
Recursive: true,
SearchTerm: query?.searchTerm,
SortBy: genreListSortMap.jellyfin[query.sortBy] || 'Name,SortName',
SortBy: genreListSortMap.jellyfin[query.sortBy] || 'SortName',
SortOrder: sortOrderMap.jellyfin[query.sortOrder],
StartIndex: query.startIndex,
UserId: apiClientProps.server?.userId,
},
});
@ -133,7 +141,7 @@ const getGenreList = async (args: GenreListArgs): Promise<GenreListResponse> =>
}
return {
items: res.body.Items.map(jfNormalize.genre),
items: res.body.Items.map((item) => jfNormalize.genre(item, apiClientProps.server)),
startIndex: query.startIndex || 0,
totalRecordCount: res.body?.TotalRecordCount || 0,
};

24
src/renderer/api/jellyfin/jellyfin-normalize.ts
View file

@ -357,11 +357,31 @@ const normalizeMusicFolder = (item: JFMusicFolder): MusicFolder => {
// };
// };
const normalizeGenre = (item: JFGenre): Genre => {
const getGenreCoverArtUrl = (args: {
baseUrl: string;
item: z.infer<typeof jfType._response.genre>;
size: number;
}) => {
const size = args.size ? args.size : 300;
if (!args.item.ImageTags?.Primary) {
return null;
}
return (
`${args.baseUrl}/Items` +
`/${args.item.Id}` +
'/Images/Primary' +
`?width=${size}&height=${size}` +
'&quality=96'
);
};
const normalizeGenre = (item: JFGenre, server: ServerListItem | null): Genre => {
return {
albumCount: undefined,
id: item.Id,
imageUrl: null,
imageUrl: getGenreCoverArtUrl({ baseUrl: server?.url || '', item, size: 200 }),
itemType: LibraryItem.GENRE,
name: item.Name,
songCount: undefined,

2
src/renderer/api/jellyfin/jellyfin-types.ts
View file

@ -309,7 +309,7 @@ const genreList = pagination.extend({
});
const genreListSort = {
NAME: 'Name,SortName',
NAME: 'SortName',
} as const;
const genreListParameters = paginationParameters.merge(

37
src/renderer/features/albums/components/jellyfin-album-filters.tsx
View file

@ -29,6 +29,7 @@ export const JellyfinAlbumFilters = ({
// TODO - eventually replace with /items/filters endpoint to fetch genres and tags specific to the selected library
const genreListQuery = useGenreList({
query: {
musicFolderId: filter?.musicFolderId,
sortBy: GenreListSort.NAME,
sortOrder: SortOrder.ASC,
startIndex: 0,
@ -45,8 +46,8 @@ export const JellyfinAlbumFilters = ({
}, [genreListQuery.data]);
const selectedGenres = useMemo(() => {
return filter._custom?.jellyfin?.GenreIds?.split(',');
}, [filter._custom?.jellyfin?.GenreIds]);
return filter?._custom?.jellyfin?.GenreIds?.split(',');
}, [filter?._custom?.jellyfin?.GenreIds]);
const toggleFilters = [
{
@ -56,9 +57,9 @@ export const JellyfinAlbumFilters = ({
customFilters,
data: {
_custom: {
...filter._custom,
...filter?._custom,
jellyfin: {
...filter._custom?.jellyfin,
...filter?._custom?.jellyfin,
IsFavorite: e.currentTarget.checked ? true : undefined,
},
},
@ -68,7 +69,7 @@ export const JellyfinAlbumFilters = ({
}) as AlbumListFilter;
onFilterChange(updatedFilters);
},
value: filter._custom?.jellyfin?.IsFavorite,
value: filter?._custom?.jellyfin?.IsFavorite,
},
];
@ -78,9 +79,9 @@ export const JellyfinAlbumFilters = ({
customFilters,
data: {
_custom: {
...filter._custom,
...filter?._custom,
jellyfin: {
...filter._custom?.jellyfin,
...filter?._custom?.jellyfin,
minYear: e === '' ? undefined : (e as number),
},
},
@ -97,9 +98,9 @@ export const JellyfinAlbumFilters = ({
customFilters,
data: {
_custom: {
...filter._custom,
...filter?._custom,
jellyfin: {
...filter._custom?.jellyfin,
...filter?._custom?.jellyfin,
maxYear: e === '' ? undefined : (e as number),
},
},
@ -116,9 +117,9 @@ export const JellyfinAlbumFilters = ({
customFilters,
data: {
_custom: {
...filter._custom,
...filter?._custom,
jellyfin: {
...filter._custom?.jellyfin,
...filter?._custom?.jellyfin,
GenreIds: genreFilterString,
},
},
@ -159,9 +160,9 @@ export const JellyfinAlbumFilters = ({
customFilters,
data: {
_custom: {
...filter._custom,
...filter?._custom,
jellyfin: {
...filter._custom?.jellyfin,
...filter?._custom?.jellyfin,
AlbumArtistIds: albumArtistFilterString,
},
},
@ -190,21 +191,21 @@ export const JellyfinAlbumFilters = ({
<Divider my="0.5rem" />
<Group grow>
<NumberInput
defaultValue={filter._custom?.jellyfin?.minYear}
defaultValue={filter?._custom?.jellyfin?.minYear}
hideControls={false}
label="From year"
max={2300}
min={1700}
required={!!filter._custom?.jellyfin?.maxYear}
required={!!filter?._custom?.jellyfin?.maxYear}
onChange={(e) => handleMinYearFilter(e)}
/>
<NumberInput
defaultValue={filter._custom?.jellyfin?.maxYear}
defaultValue={filter?._custom?.jellyfin?.maxYear}
hideControls={false}
label="To year"
max={2300}
min={1700}
required={!!filter._custom?.jellyfin?.minYear}
required={!!filter?._custom?.jellyfin?.minYear}
onChange={(e) => handleMaxYearFilter(e)}
/>
</Group>
@ -224,7 +225,7 @@ export const JellyfinAlbumFilters = ({
clearable
searchable
data={selectableAlbumArtists}
defaultValue={filter._custom?.jellyfin?.AlbumArtistIds?.split(',')}
defaultValue={filter?._custom?.jellyfin?.AlbumArtistIds?.split(',')}
disabled={disableArtistFilter}
label="Artist"
limit={300}

11
src/renderer/features/albums/routes/album-list-route.tsx
View file

@ -1,5 +1,6 @@
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import { useCallback, useMemo, useRef } from 'react';
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import isEmpty from 'lodash/isEmpty';
import { useParams, useSearchParams } from 'react-router-dom';
import { api } from '/@/renderer/api';
import { queryKeys } from '/@/renderer/api/query-keys';
@ -25,9 +26,15 @@ const AlbumListRoute = () => {
const handlePlayQueueAdd = usePlayQueueAdd();
const customFilters = useMemo(() => {
return {
const value = {
...(albumArtistId && { artistIds: [albumArtistId] }),
};
if (isEmpty(value)) {
return undefined;
}
return value;
}, [albumArtistId]);
const albumListFilter = useListFilterByKey({

76
src/renderer/features/genres/components/genre-list-header-filters.tsx
View file

@ -1,15 +1,15 @@
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import { Divider, Flex, Group, Stack } from '@mantine/core';
import { useQueryClient } from '@tanstack/react-query';
import { ChangeEvent, MouseEvent, MutableRefObject, useCallback } from 'react';
import { RiMoreFill, RiRefreshLine, RiSettings3Fill } from 'react-icons/ri';
import { ChangeEvent, MouseEvent, MutableRefObject, useCallback, useMemo } from 'react';
import { RiFolder2Fill, RiMoreFill, RiRefreshLine, RiSettings3Fill } from 'react-icons/ri';
import { queryKeys } from '/@/renderer/api/query-keys';
import { GenreListSort, LibraryItem, SortOrder } from '/@/renderer/api/types';
import { Button, DropdownMenu, MultiSelect, Slider, Switch, Text } from '/@/renderer/components';
import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
import { GENRE_TABLE_COLUMNS } from '/@/renderer/components/virtual-table';
import { useListContext } from '/@/renderer/context/list-context';
import { OrderToggleButton } from '/@/renderer/features/shared';
import { OrderToggleButton, useMusicFolders } from '/@/renderer/features/shared';
import { useContainerQuery } from '/@/renderer/hooks';
import { useListFilterRefresh } from '/@/renderer/hooks/use-list-filter-refresh';
import {
@ -18,7 +18,7 @@ import {
useListStoreActions,
useListStoreByKey,
} from '/@/renderer/store';
import { ListDisplayType, TableColumn } from '/@/renderer/types';
import { ListDisplayType, ServerType, TableColumn } from '/@/renderer/types';
const FILTERS = {
jellyfin: [{ defaultOrder: SortOrder.ASC, name: 'Name', value: GenreListSort.NAME }],
@ -43,6 +43,8 @@ export const GenreListHeaderFilters = ({ gridRef, tableRef }: GenreListHeaderFil
server,
});
const musicFoldersQuery = useMusicFolders({ query: null, serverId: server?.id });
const sortByLabel =
(server?.type &&
FILTERS[server.type as keyof typeof FILTERS].find((f) => f.value === filter.sortBy)
@ -96,6 +98,32 @@ export const GenreListHeaderFilters = ({ gridRef, tableRef }: GenreListHeaderFil
[customFilters, onFilterChange, pageKey, server?.type, setFilter],
);
const handleSetMusicFolder = useCallback(
(e: MouseEvent<HTMLButtonElement>) => {
if (!e.currentTarget?.value) return;
let updatedFilters = null;
if (e.currentTarget.value === String(filter.musicFolderId)) {
updatedFilters = setFilter({
customFilters,
data: { musicFolderId: undefined },
itemType: LibraryItem.GENRE,
key: pageKey,
}) as GenreListFilter;
} else {
updatedFilters = setFilter({
customFilters,
data: { musicFolderId: e.currentTarget.value },
itemType: LibraryItem.GENRE,
key: pageKey,
}) as GenreListFilter;
}
onFilterChange(updatedFilters);
},
[filter.musicFolderId, onFilterChange, setFilter, customFilters, pageKey],
);
const handleToggleSortOrder = useCallback(() => {
const newSortOrder = filter.sortOrder === SortOrder.ASC ? SortOrder.DESC : SortOrder.ASC;
const updatedFilters = setFilter({
@ -161,6 +189,10 @@ export const GenreListHeaderFilters = ({ gridRef, tableRef }: GenreListHeaderFil
}
};
const isFolderFilterApplied = useMemo(() => {
return filter.musicFolderId !== undefined;
}, [filter.musicFolderId]);
return (
<Flex justify="space-between">
<Group
@ -197,6 +229,42 @@ export const GenreListHeaderFilters = ({ gridRef, tableRef }: GenreListHeaderFil
sortOrder={filter.sortOrder}
onToggle={handleToggleSortOrder}
/>
{server?.type === ServerType.JELLYFIN && (
<>
<Divider orientation="vertical" />
<DropdownMenu position="bottom-start">
<DropdownMenu.Target>
<Button
compact
fw={600}
size="md"
sx={{
svg: {
fill: isFolderFilterApplied
? 'var(--primary-color) !important'
: undefined,
},
}}
variant="subtle"
>
<RiFolder2Fill size="1.3rem" />
</Button>
</DropdownMenu.Target>
<DropdownMenu.Dropdown>
{musicFoldersQuery.data?.items.map((folder) => (
<DropdownMenu.Item
key={`musicFolder-${folder.id}`}
$isActive={filter.musicFolderId === folder.id}
value={folder.id}
onClick={handleSetMusicFolder}
>
{folder.name}
</DropdownMenu.Item>
))}
</DropdownMenu.Dropdown>
</DropdownMenu>
</>
)}
<Divider orientation="vertical" />
<DropdownMenu position="bottom-start">
<DropdownMenu.Target>

2
src/renderer/features/genres/queries/genre-list-query.ts
View file

@ -16,7 +16,7 @@ export const useGenreList = (args: QueryHookArgs<GenreListQuery>) => {
return api.controller.getGenreList({ apiClientProps: { server, signal }, query });
},
queryKey: queryKeys.genres.list(server?.id || '', query),
staleTime: 1000 * 60,
staleTime: 1000 * 5,
...options,
});
};

8
src/renderer/features/genres/routes/genre-list-route.tsx
View file

@ -1,6 +1,5 @@
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import { useMemo, useRef } from 'react';
import { GenreListSort, SortOrder } from '/@/renderer/api/types';
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
import { ListContext } from '/@/renderer/context/list-context';
import { GenreListContent } from '/@/renderer/features/genres/components/genre-list-content';
@ -8,19 +7,20 @@ import { GenreListHeader } from '/@/renderer/features/genres/components/genre-li
import { useGenreList } from '/@/renderer/features/genres/queries/genre-list-query';
import { AnimatedPage } from '/@/renderer/features/shared';
import { useCurrentServer } from '/@/renderer/store';
import { useListStoreByKey } from '../../../store/list.store';
const GenreListRoute = () => {
const gridRef = useRef<VirtualInfiniteGridRef | null>(null);
const tableRef = useRef<AgGridReactType | null>(null);
const server = useCurrentServer();
const pageKey = 'genre';
const { filter } = useListStoreByKey({ key: pageKey });
const itemCountCheck = useGenreList({
query: {
limit: 1,
sortBy: GenreListSort.NAME,
sortOrder: SortOrder.ASC,
startIndex: 0,
...filter,
},
serverId: server?.id,
});

27
src/renderer/features/songs/components/jellyfin-song-filters.tsx
View file

@ -28,6 +28,7 @@ export const JellyfinSongFilters = ({
// TODO - eventually replace with /items/filters endpoint to fetch genres and tags specific to the selected library
const genreListQuery = useGenreList({
query: {
musicFolderId: filter?.musicFolderId,
sortBy: GenreListSort.NAME,
sortOrder: SortOrder.ASC,
startIndex: 0,
@ -44,8 +45,8 @@ export const JellyfinSongFilters = ({
}, [genreListQuery.data]);
const selectedGenres = useMemo(() => {
return filter._custom?.jellyfin?.GenreIds?.split(',');
}, [filter._custom?.jellyfin?.GenreIds]);
return filter?._custom?.jellyfin?.GenreIds?.split(',');
}, [filter?._custom?.jellyfin?.GenreIds]);
const toggleFilters = [
{
@ -55,9 +56,9 @@ export const JellyfinSongFilters = ({
customFilters,
data: {
_custom: {
...filter._custom,
...filter?._custom,
jellyfin: {
...filter._custom?.jellyfin,
...filter?._custom?.jellyfin,
IncludeItemTypes: 'Audio',
IsFavorite: e.currentTarget.checked ? true : undefined,
},
@ -68,7 +69,7 @@ export const JellyfinSongFilters = ({
}) as SongListFilter;
onFilterChange(updatedFilters);
},
value: filter._custom?.jellyfin?.IsFavorite,
value: filter?._custom?.jellyfin?.IsFavorite,
},
];
@ -78,9 +79,9 @@ export const JellyfinSongFilters = ({
customFilters,
data: {
_custom: {
...filter._custom,
...filter?._custom,
jellyfin: {
...filter._custom?.jellyfin,
...filter?._custom?.jellyfin,
IncludeItemTypes: 'Audio',
minYear: e === '' ? undefined : (e as number),
},
@ -98,9 +99,9 @@ export const JellyfinSongFilters = ({
customFilters,
data: {
_custom: {
...filter._custom,
...filter?._custom,
jellyfin: {
...filter._custom?.jellyfin,
...filter?._custom?.jellyfin,
IncludeItemTypes: 'Audio',
maxYear: e === '' ? undefined : (e as number),
},
@ -118,9 +119,9 @@ export const JellyfinSongFilters = ({
customFilters,
data: {
_custom: {
...filter._custom,
...filter?._custom,
jellyfin: {
...filter._custom?.jellyfin,
...filter?._custom?.jellyfin,
GenreIds: genreFilterString,
IncludeItemTypes: 'Audio',
},
@ -150,14 +151,14 @@ export const JellyfinSongFilters = ({
<Group grow>
<NumberInput
required
defaultValue={filter._custom?.jellyfin?.minYear}
defaultValue={filter?._custom?.jellyfin?.minYear}
label="From year"
max={2300}
min={1700}
onChange={handleMinYearFilter}
/>
<NumberInput
defaultValue={filter._custom?.jellyfin?.maxYear}
defaultValue={filter?._custom?.jellyfin?.maxYear}
label="To year"
max={2300}
min={1700}

13
src/renderer/features/songs/routes/song-list-route.tsx
View file

@ -1,5 +1,6 @@
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import { useCallback, useMemo, useRef } from 'react';
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import isEmpty from 'lodash/isEmpty';
import { useParams, useSearchParams } from 'react-router-dom';
import { GenreListSort, LibraryItem, SongListQuery, SortOrder } from '/@/renderer/api/types';
import { ListContext } from '/@/renderer/context/list-context';
@ -21,8 +22,8 @@ const TrackListRoute = () => {
const pageKey = albumArtistId ? `albumArtistSong` : 'song';
const customFilters: Partial<SongListQuery> = useMemo(() => {
return {
const customFilters = useMemo(() => {
const value = {
...(albumArtistId && { artistIds: [albumArtistId] }),
...(genreId && {
_custom: {
@ -35,6 +36,12 @@ const TrackListRoute = () => {
},
}),
};
if (isEmpty(value)) {
return undefined;
}
return value;
}, [albumArtistId, genreId]);
const handlePlayQueueAdd = usePlayQueueAdd();