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

Update album list implementation

Browse source
This commit is contained in:
jeffvli 2023-07-20 00:34:07 -07:00
parent 55937e71db
commit 6dd9333dbb
9 changed files with 311 additions and 589 deletions
Download patch file Download diff file Expand all files Collapse all files

77
src/renderer/features/albums/routes/album-list-route.tsx
View file

@ -1,28 +1,39 @@
import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
import { AnimatedPage } from '/@/renderer/features/shared';
import { AlbumListHeader } from '/@/renderer/features/albums/components/album-list-header';
import { AlbumListContent } from '/@/renderer/features/albums/components/album-list-content';
import { useRef } from 'react';
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import { useAlbumList } from '/@/renderer/features/albums/queries/album-list-query';
import { generatePageKey, useAlbumListFilter, useCurrentServer } from '/@/renderer/store';
import { useCallback, useMemo, useRef } from 'react';
import { useParams, useSearchParams } from 'react-router-dom';
import { AlbumListContext } from '/@/renderer/features/albums/context/album-list-context';
import { api } from '/@/renderer/api';
import { queryKeys } from '/@/renderer/api/query-keys';
import { LibraryItem } from '/@/renderer/api/types';
import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
import { ListContext } from '/@/renderer/context/list-context';
import { AlbumListContent } from '/@/renderer/features/albums/components/album-list-content';
import { AlbumListHeader } from '/@/renderer/features/albums/components/album-list-header';
import { useAlbumList } from '/@/renderer/features/albums/queries/album-list-query';
import { usePlayQueueAdd } from '/@/renderer/features/player';
import { AnimatedPage } from '/@/renderer/features/shared';
import { queryClient } from '/@/renderer/lib/react-query';
import { useCurrentServer, useListFilterByKey } from '/@/renderer/store';
import { Play } from '/@/renderer/types';
const AlbumListRoute = () => {
const gridRef = useRef<VirtualInfiniteGridRef | null>(null);
const tableRef = useRef<AgGridReactType | null>(null);
const server = useCurrentServer();
const [searchParams] = useSearchParams();
const { albumArtistId } = useParams();
const pageKey = albumArtistId ? `albumArtistAlbum` : 'album';
const handlePlayQueueAdd = usePlayQueueAdd();
const pageKey = generatePageKey(
'album',
albumArtistId ? `${albumArtistId}_${server?.id}` : undefined,
);
const customFilters = useMemo(() => {
return {
...(albumArtistId && { artistIds: [albumArtistId] }),
};
}, [albumArtistId]);
const albumListFilter = useAlbumListFilter({ id: albumArtistId || undefined, key: pageKey });
const albumListFilter = useListFilterByKey({
filter: customFilters,
key: pageKey,
});
const itemCountCheck = useAlbumList({
options: {
@ -42,9 +53,43 @@ const AlbumListRoute = () => {
? undefined
: itemCountCheck.data?.totalRecordCount;
const handlePlay = useCallback(
async (args: { initialSongId?: string; playType: Play }) => {
if (!itemCount || itemCount === 0) return;
const { playType } = args;
const query = {
startIndex: 0,
...albumListFilter,
...customFilters,
};
const queryKey = queryKeys.albums.list(server?.id || '', query);
const albumListRes = await queryClient.fetchQuery({
queryFn: ({ signal }) => {
return api.controller.getAlbumList({
apiClientProps: { server, signal },
query,
});
},
queryKey,
});
const albumIds = albumListRes?.items?.map((a) => a.id) || [];
handlePlayQueueAdd?.({
byItemType: {
id: albumIds,
type: LibraryItem.ALBUM,
},
playType,
});
},
[albumListFilter, customFilters, handlePlayQueueAdd, itemCount, server],
);
return (
<AnimatedPage>
<AlbumListContext.Provider value={{ id: albumArtistId || undefined, pageKey }}>
<ListContext.Provider value={{ customFilters, handlePlay, id: albumArtistId, pageKey }}>
<AlbumListHeader
gridRef={gridRef}
itemCount={itemCount}
@ -56,7 +101,7 @@ const AlbumListRoute = () => {
itemCount={itemCount}
tableRef={tableRef}
/>
</AlbumListContext.Provider>
</ListContext.Provider>
</AnimatedPage>
);
};