Improve genres for jellyfin
- Support music folder - Add images - Fix genre filters on album/track filters
This commit is contained in:
parent
3f813b1a26
commit
7c59722f0a
11 changed files with 163 additions and 51 deletions
|
@ -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;
|
||||
|
|
|
@ -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,
|
||||
};
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -309,7 +309,7 @@ const genreList = pagination.extend({
|
|||
});
|
||||
|
||||
const genreListSort = {
|
||||
NAME: 'Name,SortName',
|
||||
NAME: 'SortName',
|
||||
} as const;
|
||||
|
||||
const genreListParameters = paginationParameters.merge(
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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({
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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,
|
||||
});
|
||||
};
|
||||
|
|
|
@ -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,
|
||||
});
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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();
|
||||
|
|
Reference in a new issue