Improve genres for jellyfin

- Support music folder
- Add images
- Fix genre filters on album/track filters

src/renderer/api/jellyfin.types.ts

@@ -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;

src/renderer/api/jellyfin/jellyfin-controller.ts

@@ -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,
     };

src/renderer/api/jellyfin/jellyfin-normalize.ts

@@ -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,

src/renderer/api/jellyfin/jellyfin-types.ts

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

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

@@ -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(',');
+        return filter?._custom?.jellyfin?.GenreIds?.split(',');
-    }, [filter._custom?.jellyfin?.GenreIds]);
+    }, [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}

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

@@ -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({

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

@@ -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 { ChangeEvent, MouseEvent, MutableRefObject, useCallback, useMemo } from 'react';
-import { RiMoreFill, RiRefreshLine, RiSettings3Fill } from 'react-icons/ri';
+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>

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

@@ -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,
     });
 };

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

@@ -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,
     });

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

@@ -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(',');
+        return filter?._custom?.jellyfin?.GenreIds?.split(',');
-    }, [filter._custom?.jellyfin?.GenreIds]);
+    }, [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}

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

@@ -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(() => {
+    const customFilters = useMemo(() => {
-        return {
+        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();