diff --git a/src/renderer/api/jellyfin.types.ts b/src/renderer/api/jellyfin.types.ts index 7a6be466..511e7466 100644 --- a/src/renderer/api/jellyfin.types.ts +++ b/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; diff --git a/src/renderer/api/jellyfin/jellyfin-controller.ts b/src/renderer/api/jellyfin/jellyfin-controller.ts index 0d961455..9bef6ed8 100644 --- a/src/renderer/api/jellyfin/jellyfin-controller.ts +++ b/src/renderer/api/jellyfin/jellyfin-controller.ts @@ -119,12 +119,20 @@ const getMusicFolderList = async (args: MusicFolderListArgs): Promise => { 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 => } 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, }; diff --git a/src/renderer/api/jellyfin/jellyfin-normalize.ts b/src/renderer/api/jellyfin/jellyfin-normalize.ts index 9dd38a77..cbc6a0c5 100644 --- a/src/renderer/api/jellyfin/jellyfin-normalize.ts +++ b/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; + 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, diff --git a/src/renderer/api/jellyfin/jellyfin-types.ts b/src/renderer/api/jellyfin/jellyfin-types.ts index 47215cb0..a984ea28 100644 --- a/src/renderer/api/jellyfin/jellyfin-types.ts +++ b/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( diff --git a/src/renderer/features/albums/components/jellyfin-album-filters.tsx b/src/renderer/features/albums/components/jellyfin-album-filters.tsx index 711bffb7..b2fbdccf 100644 --- a/src/renderer/features/albums/components/jellyfin-album-filters.tsx +++ b/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(','); - }, [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 = ({ handleMinYearFilter(e)} /> handleMaxYearFilter(e)} /> @@ -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} diff --git a/src/renderer/features/albums/routes/album-list-route.tsx b/src/renderer/features/albums/routes/album-list-route.tsx index b345fb96..b05a15de 100644 --- a/src/renderer/features/albums/routes/album-list-route.tsx +++ b/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({ diff --git a/src/renderer/features/genres/components/genre-list-header-filters.tsx b/src/renderer/features/genres/components/genre-list-header-filters.tsx index 3ef00d97..b1dfd48e 100644 --- a/src/renderer/features/genres/components/genre-list-header-filters.tsx +++ b/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 { 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) => { + 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 ( + {server?.type === ServerType.JELLYFIN && ( + <> + + + + + + + {musicFoldersQuery.data?.items.map((folder) => ( + + {folder.name} + + ))} + + + + )} diff --git a/src/renderer/features/genres/queries/genre-list-query.ts b/src/renderer/features/genres/queries/genre-list-query.ts index 1122b769..9d209b33 100644 --- a/src/renderer/features/genres/queries/genre-list-query.ts +++ b/src/renderer/features/genres/queries/genre-list-query.ts @@ -16,7 +16,7 @@ export const useGenreList = (args: QueryHookArgs) => { return api.controller.getGenreList({ apiClientProps: { server, signal }, query }); }, queryKey: queryKeys.genres.list(server?.id || '', query), - staleTime: 1000 * 60, + staleTime: 1000 * 5, ...options, }); }; diff --git a/src/renderer/features/genres/routes/genre-list-route.tsx b/src/renderer/features/genres/routes/genre-list-route.tsx index 13389426..72a7c375 100644 --- a/src/renderer/features/genres/routes/genre-list-route.tsx +++ b/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(null); const tableRef = useRef(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, }); diff --git a/src/renderer/features/songs/components/jellyfin-song-filters.tsx b/src/renderer/features/songs/components/jellyfin-song-filters.tsx index 102d76bb..42720ff8 100644 --- a/src/renderer/features/songs/components/jellyfin-song-filters.tsx +++ b/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(','); - }, [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 = ({ { const pageKey = albumArtistId ? `albumArtistSong` : 'song'; - const customFilters: Partial = 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();