Add genre list route and implementation

This commit is contained in:
jeffvli 2023-08-03 16:58:35 -07:00
parent f6d74ce9c3
commit 5896d886d7
7 changed files with 126 additions and 35 deletions

View file

@ -23,6 +23,8 @@ export const JellyfinSongFilters = ({
const { setFilter } = useListStoreActions();
const { filter } = useListFilterByKey({ key: pageKey });
const isGenrePage = customFilters?._custom?.jellyfin?.GenreIds !== undefined;
// TODO - eventually replace with /items/filters endpoint to fetch genres and tags specific to the selected library
const genreListQuery = useGenreList({
query: {
@ -162,17 +164,19 @@ export const JellyfinSongFilters = ({
onChange={handleMaxYearFilter}
/>
</Group>
<Group grow>
<MultiSelect
clearable
searchable
data={genreList}
defaultValue={selectedGenres}
label="Genres"
width={250}
onChange={handleGenresFilter}
/>
</Group>
{!isGenrePage && (
<Group grow>
<MultiSelect
clearable
searchable
data={genreList}
defaultValue={selectedGenres}
label="Genres"
width={250}
onChange={handleGenresFilter}
/>
</Group>
)}
</Stack>
);
};

View file

@ -22,6 +22,8 @@ export const NavidromeSongFilters = ({
const { setFilter } = useListStoreActions();
const filter = useListFilterByKey({ key: pageKey });
const isGenrePage = customFilters?._custom?.navidrome?.genre_id !== undefined;
const genreListQuery = useGenreList({
query: {
sortBy: GenreListSort.NAME,
@ -124,15 +126,17 @@ export const NavidromeSongFilters = ({
width={50}
onChange={(e) => handleYearFilter(e)}
/>
<Select
clearable
searchable
data={genreList}
defaultValue={filter._custom?.navidrome?.genre_id}
label="Genre"
width={150}
onChange={handleGenresFilter}
/>
{!isGenrePage && (
<Select
clearable
searchable
data={genreList}
defaultValue={filter._custom?.navidrome?.genre_id}
label="Genre"
width={150}
onChange={handleGenresFilter}
/>
)}
</Group>
</Stack>
);