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

Reuse song list for artist songs

Browse source
This commit is contained in:
jeffvli 2023-01-15 20:39:43 -08:00
parent 784da2f8b9
commit 2e74f7533a
7 changed files with 160 additions and 97 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
src/renderer/features/artists/components/album-artist-detail-content.tsx
View file

@ -73,6 +73,13 @@ export const AlbumArtistDetailContent = () => {
artistName: detailQuery?.data?.name || '',
})}`;
const artistSongsLink = `${generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL_SONGS, {
albumArtistId,
})}?${createSearchParams({
artistId: albumArtistId,
artistName: detailQuery?.data?.name || '',
})}`;
const recentAlbumsQuery = useAlbumList({
jfParams: server?.type === ServerType.JELLYFIN ? { artistIds: albumArtistId } : undefined,
limit: itemsPerPage,
@ -85,6 +92,19 @@ export const AlbumArtistDetailContent = () => {
startIndex: 0,
});
const compilationAlbumsQuery = useAlbumList({
jfParams:
server?.type === ServerType.JELLYFIN ? { contributingArtistIds: albumArtistId } : undefined,
limit: itemsPerPage,
ndParams:
server?.type === ServerType.NAVIDROME
? { artist_id: albumArtistId, compilation: true }
: undefined,
sortBy: AlbumListSort.RELEASE_DATE,
sortOrder: SortOrder.DESC,
startIndex: 0,
});
const topSongsQuery = useTopSongsList(
{ artist: detailQuery?.data?.name || '' },
{ enabled: server?.type !== ServerType.JELLYFIN && !!detailQuery?.data?.name },
@ -136,6 +156,7 @@ export const AlbumArtistDetailContent = () => {
const carousels = [
{
data: recentAlbumsQuery?.data?.items,
isHidden: !recentAlbumsQuery?.data?.items?.length,
itemType: LibraryItem.ALBUM,
loading: recentAlbumsQuery?.isLoading || recentAlbumsQuery.isFetching,
pagination: {
@ -147,7 +168,7 @@ export const AlbumArtistDetailContent = () => {
fw="bold"
order={3}
>
Recent albums
Recent releases
</TextTitle>
<Button
compact
@ -160,7 +181,25 @@ export const AlbumArtistDetailContent = () => {
</Button>
</>
),
uniqueId: 'recentAlbums',
uniqueId: 'recentReleases',
},
{
data: compilationAlbumsQuery?.data?.items,
isHidden: !compilationAlbumsQuery?.data?.items?.length,
itemType: LibraryItem.ALBUM,
loading: compilationAlbumsQuery?.isLoading || compilationAlbumsQuery.isFetching,
pagination: {
itemsPerPage,
},
title: (
<TextTitle
fw="bold"
order={3}
>
Appears on
</TextTitle>
),
uniqueId: 'compilationAlbums',
},
{
data: detailQuery?.data?.similarArtists?.slice(0, itemsPerPage),
@ -232,12 +271,10 @@ export const AlbumArtistDetailContent = () => {
const showBiography =
detailQuery?.data?.biography !== undefined && detailQuery?.data?.biography !== null;
const showTopSongs = server?.type !== ServerType.JELLYFIN && topSongsQuery?.data?.items?.length;
const showGenres = detailQuery?.data?.genres?.length !== 0;
const showGenres = detailQuery?.data?.genres ? detailQuery?.data?.genres.length !== 0 : false;
const isLoading =
detailQuery?.isLoading ||
recentAlbumsQuery?.isLoading ||
(server?.type === ServerType.NAVIDROME && topSongsQuery?.isLoading);
detailQuery?.isLoading || (server?.type === ServerType.NAVIDROME && topSongsQuery?.isLoading);
if (isLoading) return <ContentContainer ref={cq.ref} />;
@ -297,7 +334,7 @@ export const AlbumArtistDetailContent = () => {
compact
uppercase
component={Link}
to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL_SONGS, { albumArtistId })}
to={artistSongsLink}
variant="subtle"
>
View all songs

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

@ -96,38 +96,34 @@ export const JellyfinSongFilters = ({ handleFilterChange }: JellyfinSongFiltersP
</Group>
))}
<Divider my="0.5rem" />
<Group position="apart">
<Text>Year range</Text>
<Group>
<NumberInput
required
max={2300}
min={1700}
value={filter.jfParams?.minYear}
width={60}
onChange={handleMinYearFilter}
/>
<NumberInput
max={2300}
min={1700}
value={filter.jfParams?.maxYear}
width={60}
onChange={handleMaxYearFilter}
/>
</Group>
<Group grow>
<NumberInput
required
label="From year"
max={2300}
min={1700}
value={filter.jfParams?.minYear}
onChange={handleMinYearFilter}
/>
<NumberInput
label="To year"
max={2300}
min={1700}
value={filter.jfParams?.maxYear}
onChange={handleMaxYearFilter}
/>
</Group>
<Divider my="0.5rem" />
<Stack>
<Text>Genres</Text>
<Group grow>
<MultiSelect
clearable
searchable
data={genreList}
defaultValue={selectedGenres}
label="Genres"
width={250}
onChange={handleGenresFilter}
/>
</Stack>
</Group>
</Stack>
);
};

43
src/renderer/features/songs/components/navidrome-song-filters.tsx
View file

@ -59,29 +59,6 @@ export const NavidromeSongFilters = ({ handleFilterChange }: NavidromeSongFilter
return (
<Stack p="0.8rem">
<Group position="apart">
<Text>Year</Text>
<NumberInput
max={5000}
min={0}
value={filter.ndParams?.year}
width={50}
onChange={handleYearFilter}
/>
</Group>
<Divider my="0.5rem" />
<Group position="apart">
<Text>Genre</Text>
<Select
clearable
searchable
data={genreList}
defaultValue={filter.ndParams?.genre_id}
width={150}
onChange={handleGenresFilter}
/>
</Group>
<Divider my="0.5rem" />
{toggleFilters.map((filter) => (
<Group
key={`nd-filter-${filter.label}`}
@ -95,6 +72,26 @@ export const NavidromeSongFilters = ({ handleFilterChange }: NavidromeSongFilter
/>
</Group>
))}
<Divider my="0.5rem" />
<Group grow>
<NumberInput
label="Year"
max={5000}
min={0}
value={filter.ndParams?.year}
width={50}
onChange={handleYearFilter}
/>
<Select
clearable
searchable
data={genreList}
defaultValue={filter.ndParams?.genre_id}
label="Genre"
width={150}
onChange={handleGenresFilter}
/>
</Group>
</Stack>
);
};

21
src/renderer/features/songs/components/song-list-content.tsx
View file

@ -19,6 +19,7 @@ import {
VirtualTable,
} from '/@/renderer/components';
import {
SongListFilter,
useCurrentServer,
useSetSongTable,
useSetSongTablePagination,
@ -31,15 +32,16 @@ import debounce from 'lodash/debounce';
import { useHandleTableContextMenu } from '/@/renderer/features/context-menu';
import { SONG_CONTEXT_MENU_ITEMS } from '/@/renderer/features/context-menu/context-menu-items';
import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
import { LibraryItem, QueueSong } from '/@/renderer/api/types';
import { LibraryItem, QueueSong, SongListQuery } from '/@/renderer/api/types';
import { usePlayQueueAdd } from '/@/renderer/features/player';
interface SongListContentProps {
customFilters?: Partial<SongListFilter>;
itemCount?: number;
tableRef: MutableRefObject<AgGridReactType | null>;
}
export const SongListContent = ({ itemCount, tableRef }: SongListContentProps) => {
export const SongListContent = ({ customFilters, itemCount, tableRef }: SongListContentProps) => {
const queryClient = useQueryClient();
const server = useCurrentServer();
const page = useSongListStore();
@ -64,21 +66,20 @@ export const SongListContent = ({ itemCount, tableRef }: SongListContentProps) =
const limit = params.endRow - params.startRow;
const startIndex = params.startRow;
const queryKey = queryKeys.songs.list(server?.id || '', {
const query: SongListQuery = {
limit,
startIndex,
...page.filter,
});
...customFilters,
};
const queryKey = queryKeys.songs.list(server?.id || '', query);
const songsRes = await queryClient.fetchQuery(
queryKey,
async ({ signal }) =>
api.controller.getSongList({
query: {
limit,
startIndex,
...page.filter,
},
query,
server,
signal,
}),
@ -93,7 +94,7 @@ export const SongListContent = ({ itemCount, tableRef }: SongListContentProps) =
params.api.setDatasource(dataSource);
params.api.ensureIndexVisible(page.table.scrollOffset, 'top');
},
[page.filter, page.table.scrollOffset, queryClient, server],
[customFilters, page.filter, page.table.scrollOffset, queryClient, server],
);
const onPaginationChanged = useCallback(

70
src/renderer/features/songs/components/song-list-header.tsx
View file

@ -1,6 +1,7 @@
import type { IDatasource } from '@ag-grid-community/core';
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import { Flex, Group, Stack } from '@mantine/core';
import { openModal } from '@mantine/modals';
import debounce from 'lodash/debounce';
import { ChangeEvent, MouseEvent, MutableRefObject, useCallback } from 'react';
import {
@ -89,11 +90,18 @@ const ORDER = [
];
interface SongListHeaderProps {
customFilters?: Partial<SongListFilter>;
itemCount?: number;
tableRef: MutableRefObject<AgGridReactType | null>;
title?: string;
}
export const SongListHeader = ({ itemCount, tableRef }: SongListHeaderProps) => {
export const SongListHeader = ({
customFilters,
title,
itemCount,
tableRef,
}: SongListHeaderProps) => {
const server = useCurrentServer();
const page = useSongListStore();
const setPage = useSetSongStore();
@ -123,21 +131,20 @@ export const SongListHeader = ({ itemCount, tableRef }: SongListHeaderProps) =>
const pageFilters = filters || page.filter;
const queryKey = queryKeys.songs.list(server?.id || '', {
const query: SongListQuery = {
limit,
startIndex,
...pageFilters,
});
...customFilters,
};
const queryKey = queryKeys.songs.list(server?.id || '', query);
const songsRes = await queryClient.fetchQuery(
queryKey,
async ({ signal }) =>
api.controller.getSongList({
query: {
limit,
startIndex,
...pageFilters,
},
query,
server,
signal,
}),
@ -154,7 +161,7 @@ export const SongListHeader = ({ itemCount, tableRef }: SongListHeaderProps) =>
tableRef.current?.api.ensureIndexVisible(0, 'top');
setPagination({ currentPage: 0 });
},
[page.filter, server, setPagination, tableRef],
[customFilters, page.filter, server, setPagination, tableRef],
);
const handleSetSortBy = useCallback(
@ -273,6 +280,21 @@ export const SongListHeader = ({ itemCount, tableRef }: SongListHeaderProps) =>
});
};
const handleOpenFiltersModal = () => {
openModal({
children: (
<>
{server?.type === ServerType.NAVIDROME ? (
<NavidromeSongFilters handleFilterChange={handleFilterChange} />
) : (
<JellyfinSongFilters handleFilterChange={handleFilterChange} />
)}
</>
),
title: 'Song Filters',
});
};
return (
<PageHeader p="1rem">
<Flex
@ -297,9 +319,11 @@ export const SongListHeader = ({ itemCount, tableRef }: SongListHeaderProps) =>
<Group noWrap>
<TextTitle
fw="bold"
maw="20vw"
order={3}
overflow="hidden"
>
Tracks
{title || 'Tracks'}
</TextTitle>
<Badge
radius="xl"
@ -428,24 +452,14 @@ export const SongListHeader = ({ itemCount, tableRef }: SongListHeaderProps) =>
</DropdownMenu.Dropdown>
</DropdownMenu>
)}
<DropdownMenu position="bottom-start">
<DropdownMenu.Target>
<Button
compact
fw="600"
variant="subtle"
>
{cq.isMd ? 'Filters' : <RiFilter3Line size={15} />}
</Button>
</DropdownMenu.Target>
<DropdownMenu.Dropdown>
{server?.type === ServerType.NAVIDROME ? (
<NavidromeSongFilters handleFilterChange={handleFilterChange} />
) : (
<JellyfinSongFilters handleFilterChange={handleFilterChange} />
)}
</DropdownMenu.Dropdown>
</DropdownMenu>
<Button
compact
fw="600"
variant="subtle"
onClick={handleOpenFiltersModal}
>
{cq.isMd ? 'Filters' : <RiFilter3Line size={15} />}
</Button>
<DropdownMenu position="bottom-start">
<DropdownMenu.Target>
<Button

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

@ -1,5 +1,7 @@
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import { useRef } from 'react';
import { useSearchParams } from 'react-router-dom';
import { SongListQuery } from '/@/renderer/api/types';
import { VirtualGridContainer } from '/@/renderer/components';
import { AnimatedPage } from '/@/renderer/features/shared';
import { SongListContent } from '/@/renderer/features/songs/components/song-list-content';
@ -9,14 +11,31 @@ import { useSongListFilters } from '/@/renderer/store';
const TrackListRoute = () => {
const tableRef = useRef<AgGridReactType | null>(null);
const filters = useSongListFilters();
const [searchParams] = useSearchParams();
const customFilters: Partial<SongListQuery> | undefined = searchParams.get('artistId')
? {
artistIds: [searchParams.get('artistId') as string],
}
: undefined;
const itemCountCheck = useSongList(
{
limit: 1,
startIndex: 0,
...filters,
...customFilters,
jfParams: {
...customFilters?.jfParams,
...filters.jfParams,
includeItemTypes: 'Audio',
},
ndParams: {
...customFilters?.ndParams,
...filters.ndParams,
},
},
{
cacheTime: 1000 * 60 * 60 * 2,
@ -33,10 +52,13 @@ const TrackListRoute = () => {
<AnimatedPage>
<VirtualGridContainer>
<SongListHeader
customFilters={customFilters}
itemCount={itemCount}
tableRef={tableRef}
title={searchParams.get('artistName') || undefined}
/>
<SongListContent
customFilters={customFilters}
itemCount={itemCount}
tableRef={tableRef}
/>

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

@ -50,10 +50,6 @@ const AlbumArtistDetailRoute = lazy(
() => import('/@/renderer/features/artists/routes/album-artist-detail-route'),
);
const AlbumArtistDetailSongListRoute = lazy(
() => import('../features/artists/routes/album-artist-detail-song-list-route'),
);
const AlbumArtistDetailTopSongsListRoute = lazy(
() => import('../features/artists/routes/album-artist-detail-top-songs-list-route'),
);
@ -141,7 +137,7 @@ export const AppRouter = () => {
path={AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL_DISCOGRAPHY}
/>
<Route
element={<AlbumArtistDetailSongListRoute />}
element={<SongListRoute />}
path={AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL_SONGS}
/>
<Route