antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2026-01-01 10:23:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

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

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}
/>