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

Add genre list route and implementation

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/renderer/features/genres/components/genre-list-table-view.tsx
View file

@ -6,7 +6,10 @@ import { useVirtualTable } from '/@/renderer/components/virtual-table/hooks/use-
import { useListContext } from '/@/renderer/context/list-context';
import { ALBUM_CONTEXT_MENU_ITEMS } from '/@/renderer/features/context-menu/context-menu-items';
import { useCurrentServer } from '/@/renderer/store';
import { MutableRefObject } from 'react';
import { MutableRefObject, useCallback } from 'react';
import { RowDoubleClickedEvent } from '@ag-grid-community/core';
import { generatePath, useNavigate } from 'react-router';
import { AppRoute } from '/@/renderer/router/routes';
interface GenreListTableViewProps {
itemCount?: number;
@ -16,6 +19,7 @@ interface GenreListTableViewProps {
export const GenreListTableView = ({ tableRef, itemCount }: GenreListTableViewProps) => {
const server = useCurrentServer();
const { pageKey, customFilters } = useListContext();
const navigate = useNavigate();
const tableProps = useVirtualTable({
contextMenu: ALBUM_CONTEXT_MENU_ITEMS,
@ -27,6 +31,16 @@ export const GenreListTableView = ({ tableRef, itemCount }: GenreListTableViewPr
tableRef,
});
const onRowDoubleClicked = useCallback(
(e: RowDoubleClickedEvent) => {
const { data } = e;
if (!data) return;
navigate(generatePath(AppRoute.LIBRARY_GENRES_SONGS, { genreId: data.id }));
},
[navigate],
);
return (
<VirtualGridAutoSizerContainer>
<VirtualTable
@ -35,6 +49,7 @@ export const GenreListTableView = ({ tableRef, itemCount }: GenreListTableViewPr
key={`table-${tableProps.rowHeight}-${server?.id}`}
ref={tableRef}
{...tableProps}
onRowDoubleClicked={onRowDoubleClicked}
/>
</VirtualGridAutoSizerContainer>
);

8
src/renderer/features/player/components/shuffle-all-modal.tsx
View file

@ -13,6 +13,8 @@ import {
RandomSongListQuery,
MusicFolderListResponse,
ServerType,
GenreListSort,
SortOrder,
} from '/@/renderer/api/types';
import { api } from '/@/renderer/api';
import { useAuthStore } from '/@/renderer/store';
@ -225,7 +227,11 @@ export const openShuffleAllModal = async (
server,
signal,
},
query: null,
query: {
sortBy: GenreListSort.NAME,
sortOrder: SortOrder.ASC,
startIndex: 0,
},
}),
queryKey: queryKeys.genres.list(server?.id),
staleTime: 1000 * 60 * 5,

26
src/renderer/features/songs/components/jellyfin-song-filters.tsx
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>
);
};

22
src/renderer/features/songs/components/navidrome-song-filters.tsx
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>
);

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

@ -1,8 +1,9 @@
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import { useCallback, useRef } from 'react';
import { useCallback, useMemo, useRef } from 'react';
import { useParams, useSearchParams } from 'react-router-dom';
import { LibraryItem, SongListQuery } from '/@/renderer/api/types';
import { GenreListSort, LibraryItem, SongListQuery, SortOrder } from '/@/renderer/api/types';
import { ListContext } from '/@/renderer/context/list-context';
import { useGenreList } from '/@/renderer/features/genres';
import { usePlayQueueAdd } from '/@/renderer/features/player';
import { AnimatedPage } from '/@/renderer/features/shared';
import { SongListContent } from '/@/renderer/features/songs/components/song-list-content';
@ -10,17 +11,31 @@ import { SongListHeader } from '/@/renderer/features/songs/components/song-list-
import { useSongList } from '/@/renderer/features/songs/queries/song-list-query';
import { useCurrentServer, useListFilterByKey } from '/@/renderer/store';
import { Play } from '/@/renderer/types';
import { titleCase } from '/@/renderer/utils';
const TrackListRoute = () => {
const tableRef = useRef<AgGridReactType | null>(null);
const server = useCurrentServer();
const [searchParams] = useSearchParams();
const { albumArtistId } = useParams();
const { albumArtistId, genreId } = useParams();
const pageKey = albumArtistId ? `albumArtistSong` : 'song';
const customFilters = {
...(albumArtistId && { artistIds: [albumArtistId] }),
};
const customFilters: Partial<SongListQuery> = useMemo(() => {
return {
...(albumArtistId && { artistIds: [albumArtistId] }),
...(genreId && {
_custom: {
jellyfin: {
GenreIds: genreId,
},
navidrome: {
genre_id: genreId,
},
},
}),
};
}, [albumArtistId, genreId]);
const handlePlayQueueAdd = usePlayQueueAdd();
const songListFilter = useListFilterByKey<SongListQuery>({
@ -28,6 +43,28 @@ const TrackListRoute = () => {
key: pageKey,
});
const genreList = useGenreList({
options: {
cacheTime: 1000 * 60 * 60,
enabled: !!genreId,
},
query: {
sortBy: GenreListSort.NAME,
sortOrder: SortOrder.ASC,
startIndex: 0,
},
serverId: server?.id,
});
const genreTitle = useMemo(() => {
if (!genreList.data) return '';
const genre = genreList.data.items.find((g) => g.id === genreId);
if (!genre) return 'Unknown';
return genre?.name;
}, [genreId, genreList.data]);
const itemCountCheck = useSongList({
options: {
cacheTime: 1000 * 60,
@ -77,13 +114,26 @@ const TrackListRoute = () => {
[albumArtistId, handlePlayQueueAdd, itemCount, songListFilter],
);
const providerValue = useMemo(() => {
return {
customFilters,
handlePlay,
id: albumArtistId ?? genreId,
pageKey,
};
}, [albumArtistId, customFilters, genreId, handlePlay, pageKey]);
return (
<AnimatedPage>
<ListContext.Provider value={{ customFilters, handlePlay, id: albumArtistId, pageKey }}>
<ListContext.Provider value={providerValue}>
<SongListHeader
itemCount={itemCount}
tableRef={tableRef}
title={searchParams.get('artistName') || undefined}
title={
searchParams.get('artistName') || genreId
? `"${titleCase(genreTitle)}" Tracks`
: undefined
}
/>
<SongListContent
itemCount={itemCount}

20
src/renderer/router/app-router.tsx
View file

@ -105,11 +105,21 @@ export const AppRouter = () => {
errorElement={<RouteErrorBoundary />}
path={AppRoute.NOW_PLAYING}
/>
<Route
element={<GenreListRoute />}
errorElement={<RouteErrorBoundary />}
path={AppRoute.LIBRARY_GENRES}
/>
<Route path={AppRoute.LIBRARY_GENRES}>
<Route
index
element={<GenreListRoute />}
errorElement={<RouteErrorBoundary />}
/>
<Route
element={<AlbumListRoute />}
path={AppRoute.LIBRARY_GENRES_ALBUMS}
/>
<Route
element={<SongListRoute />}
path={AppRoute.LIBRARY_GENRES_SONGS}
/>
</Route>
<Route
element={<AlbumListRoute />}
errorElement={<RouteErrorBoundary />}

2
src/renderer/router/routes.ts
View file

@ -13,6 +13,8 @@ export enum AppRoute {
LIBRARY_ARTISTS_DETAIL = '/library/artists/:artistId',
LIBRARY_FOLDERS = '/library/folders',
LIBRARY_GENRES = '/library/genres',
LIBRARY_GENRES_ALBUMS = '/library/genres/:genreId/albums',
LIBRARY_GENRES_SONGS = '/library/genres/:genreId/songs',
LIBRARY_SONGS = '/library/songs',
NOW_PLAYING = '/now-playing',
PLAYING = '/playing',