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

Normalize album artist list store

Browse source
This commit is contained in:
jeffvli 2023-03-05 21:02:05 -08:00
parent 828cca9c19
commit 123478a24f
14 changed files with 186 additions and 1656 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/renderer/features/albums/components/album-list-content.tsx
View file

@ -94,8 +94,6 @@ export const AlbumListContent = ({
}, },
}; };
console.log('query', query);
const queryKey = queryKeys.albums.list(server?.id || '', query); const queryKey = queryKeys.albums.list(server?.id || '', query);
const albumsRes = await queryClient.fetchQuery( const albumsRes = await queryClient.fetchQuery(

198
src/renderer/features/artists/components/album-artist-detail-discography-detail-list.tsx
View file

@ -1,198 +0,0 @@
// import { useMemo, useRef } from 'react';
// import { ColDef } from '@ag-grid-community/core';
// import { Box, Group, Stack } from '@mantine/core';
// import { useVirtualizer, Virtualizer } from '@tanstack/react-virtual';
// import { useParams } from 'react-router';
// import { AlbumListSort, SortOrder, SongListSort, Song } from '/@/renderer/api/types';
// import {
// getColumnDefs,
// VirtualTable,
// Text,
// TextTitle,
// NativeScrollArea,
// } from '/@/renderer/components';
// import { useAlbumList } from '/@/renderer/features/albums';
// import { PlayButton } from '/@/renderer/features/shared';
// import { useSongList } from '/@/renderer/features/songs';
// import { useSongListStore } from '/@/renderer/store';
// import { usePlayQueueAdd } from '/@/renderer/features/player';
// import { Play } from '/@/renderer/types';
// const RowVirtualizer = ({
// rows,
// columnDefs,
// handlePlay,
// rowVirtualizer,
// }: {
// columnDefs: ColDef[];
// handlePlay: (play: Play, data: any[]) => void;
// rowVirtualizer: Virtualizer<any, Element>;
// rows: any[];
// }) => {
// const items = rowVirtualizer.getVirtualItems();
// return (
// <div
// style={{
// height: `${rowVirtualizer.getTotalSize()}px`,
// position: 'relative',
// width: '100%',
// }}
// >
// {items.map((virtualRow) => (
// <div
// key={rows?.[virtualRow.index].id}
// style={{
// height: `${(rows?.[virtualRow.index].songs?.length || 0) * 60 + 300}px`,
// left: 0,
// position: 'absolute',
// top: 0,
// transform: `translateY(${virtualRow.start}px)`,
// width: '100%',
// }}
// >
// <Stack
// p="2rem"
// spacing="lg"
// >
// <Group noWrap>
// <img
// alt={`${rows?.[virtualRow.index]?.name}-cover`}
// height={150}
// src={rows?.[virtualRow.index]?.imageUrl}
// width={150}
// />
// <Stack>
// <TextTitle
// order={1}
// weight={700}
// >
// {rows?.[virtualRow.index]?.name}
// </TextTitle>
// <Text $secondary>{rows?.[virtualRow.index]?.releaseYear}</Text>
// <PlayButton
// h="35px"
// w="35px"
// onClick={() => handlePlay?.(Play.NOW, rows?.[virtualRow.index]?.songs)}
// />
// </Stack>
// </Group>
// <Box sx={{ height: `${(rows?.[virtualRow.index].songs?.length || 0) * 60 + 60}px` }}>
// <VirtualTable
// autoFitColumns
// suppressCellFocus
// suppressHorizontalScroll
// suppressLoadingOverlay
// suppressRowDrag
// transparentHeader
// columnDefs={columnDefs}
// getRowId={(data) => data.data.id}
// rowData={rows?.[virtualRow.index]?.songs}
// rowHeight={60}
// rowModelType="clientSide"
// rowSelection="multiple"
// />
// </Box>
// </Stack>
// </div>
// ))}
// </div>
// );
// };
// export const AlbumArtistDiscographyDetailList = () => {
// const { albumArtistId } = useParams() as { albumArtistId: string };
// // const albumArtistQuery = useAlbumArtistDetail({ id: albumArtistId });
// const albumsQuery = useAlbumList({
// jfParams: { artistIds: albumArtistId },
// ndParams: { artist_id: albumArtistId },
// sortBy: AlbumListSort.YEAR,
// sortOrder: SortOrder.DESC,
// startIndex: 0,
// });
// const songsQuery = useSongList(
// {
// albumIds: albumsQuery.data?.items?.map((album) => album.id),
// sortBy: SongListSort.ALBUM,
// sortOrder: SortOrder.ASC,
// startIndex: 0,
// },
// {
// enabled: !albumsQuery.isLoading,
// },
// );
// const songsByAlbum = useMemo(() => {
// if (songsQuery.isLoading || albumsQuery.isLoading) return null;
// const songsByAlbumMap = songsQuery?.data?.items?.reduce((acc, song) => {
// if (!acc[song.albumId as keyof typeof acc]) {
// acc[song.albumId as keyof typeof acc] = [];
// }
// acc[song.albumId as keyof typeof acc].push(song);
// return acc;
// }, {} as Record<string, Song[]>);
// const albumDetailWithSongs = albumsQuery?.data?.items?.map((album) => {
// return {
// ...album,
// songs: songsByAlbumMap?.[album.id],
// };
// });
// return albumDetailWithSongs;
// }, [
// albumsQuery?.data?.items,
// albumsQuery?.isLoading,
// songsQuery?.data?.items,
// songsQuery?.isLoading,
// ]);
// const page = useSongListStore();
// const columnDefs: ColDef[] = useMemo(
// () =>
// getColumnDefs(page.table.columns).filter((c) => c.colId !== 'album' && c.colId !== 'artist'),
// [page.table.columns],
// );
// const handlePlayQueueAdd = usePlayQueueAdd();
// const parentRef = useRef<any>();
// const rowVirtualizer = useVirtualizer({
// count: songsByAlbum?.length || 0,
// estimateSize: (i) => (songsByAlbum?.[i].songs?.length || 0) * 60 + 300,
// getScrollElement: () => parentRef.current,
// overscan: 3,
// });
// const handlePlay = (play: Play, data: any[]) => {
// handlePlayQueueAdd?.({
// byData: data,
// play,
// });
// };
// if (albumsQuery.isLoading || songsQuery.isLoading) return null;
// return (
// <NativeScrollArea
// ref={parentRef}
// scrollBarOffset="0"
// >
// {songsByAlbum && (
// <RowVirtualizer
// columnDefs={columnDefs}
// handlePlay={handlePlay}
// rowVirtualizer={rowVirtualizer}
// rows={songsByAlbum}
// />
// )}
// </NativeScrollArea>
// );
// };

473
src/renderer/features/artists/components/album-artist-detail-discography-header.tsx
View file

@ -1,473 +0,0 @@
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 { ChangeEvent, MouseEvent, MutableRefObject, useCallback } from 'react';
import {
RiArrowDownSLine,
RiFilter3Line,
RiFolder2Line,
RiMoreFill,
RiSortAsc,
RiSortDesc,
} from 'react-icons/ri';
import { api } from '/@/renderer/api';
import { queryKeys } from '/@/renderer/api/query-keys';
import {
LibraryItem,
ServerType,
SongListQuery,
SongListSort,
SortOrder,
} from '/@/renderer/api/types';
import {
Button,
DropdownMenu,
PageHeader,
Slider,
TextTitle,
Switch,
MultiSelect,
Text,
SONG_TABLE_COLUMNS,
Badge,
SpinnerIcon,
} from '/@/renderer/components';
import { usePlayQueueAdd } from '/@/renderer/features/player';
import { useMusicFolders } from '/@/renderer/features/shared';
import { JellyfinSongFilters } from '/@/renderer/features/songs/components/jellyfin-song-filters';
import { NavidromeSongFilters } from '/@/renderer/features/songs/components/navidrome-song-filters';
import { useContainerQuery } from '/@/renderer/hooks';
import { queryClient } from '/@/renderer/lib/react-query';
import {
SongListFilter,
useCurrentServer,
useSetSongFilters,
useSetSongStore,
useSetSongTable,
useSetSongTablePagination,
useSongListStore,
} from '/@/renderer/store';
import { ListDisplayType, Play, TableColumn } from '/@/renderer/types';
const FILTERS = {
jellyfin: [
{ defaultOrder: SortOrder.ASC, name: 'Album', value: SongListSort.ALBUM },
{ defaultOrder: SortOrder.ASC, name: 'Album Artist', value: SongListSort.ALBUM_ARTIST },
{ defaultOrder: SortOrder.ASC, name: 'Artist', value: SongListSort.ARTIST },
{ defaultOrder: SortOrder.ASC, name: 'Duration', value: SongListSort.DURATION },
{ defaultOrder: SortOrder.ASC, name: 'Most Played', value: SongListSort.PLAY_COUNT },
{ defaultOrder: SortOrder.ASC, name: 'Name', value: SongListSort.NAME },
{ defaultOrder: SortOrder.ASC, name: 'Random', value: SongListSort.RANDOM },
{ defaultOrder: SortOrder.ASC, name: 'Recently Added', value: SongListSort.RECENTLY_ADDED },
{ defaultOrder: SortOrder.ASC, name: 'Recently Played', value: SongListSort.RECENTLY_PLAYED },
{ defaultOrder: SortOrder.ASC, name: 'Release Date', value: SongListSort.RELEASE_DATE },
],
navidrome: [
{ defaultOrder: SortOrder.ASC, name: 'Album', value: SongListSort.ALBUM },
{ defaultOrder: SortOrder.ASC, name: 'Album Artist', value: SongListSort.ALBUM_ARTIST },
{ defaultOrder: SortOrder.ASC, name: 'Artist', value: SongListSort.ARTIST },
{ defaultOrder: SortOrder.DESC, name: 'BPM', value: SongListSort.BPM },
{ defaultOrder: SortOrder.ASC, name: 'Channels', value: SongListSort.CHANNELS },
{ defaultOrder: SortOrder.ASC, name: 'Comment', value: SongListSort.COMMENT },
{ defaultOrder: SortOrder.DESC, name: 'Duration', value: SongListSort.DURATION },
{ defaultOrder: SortOrder.DESC, name: 'Favorited', value: SongListSort.FAVORITED },
{ defaultOrder: SortOrder.ASC, name: 'Genre', value: SongListSort.GENRE },
{ defaultOrder: SortOrder.ASC, name: 'Name', value: SongListSort.NAME },
{ defaultOrder: SortOrder.DESC, name: 'Play Count', value: SongListSort.PLAY_COUNT },
{ defaultOrder: SortOrder.DESC, name: 'Rating', value: SongListSort.RATING },
{ defaultOrder: SortOrder.DESC, name: 'Recently Added', value: SongListSort.RECENTLY_ADDED },
{ defaultOrder: SortOrder.DESC, name: 'Recently Played', value: SongListSort.RECENTLY_PLAYED },
{ defaultOrder: SortOrder.DESC, name: 'Year', value: SongListSort.YEAR },
],
};
const ORDER = [
{ name: 'Ascending', value: SortOrder.ASC },
{ name: 'Descending', value: SortOrder.DESC },
];
interface SongListHeaderProps {
itemCount?: number;
tableRef: MutableRefObject<AgGridReactType | null>;
}
export const AlbumArtistDiscographyHeader = ({ itemCount, tableRef }: SongListHeaderProps) => {
const server = useCurrentServer();
const page = useSongListStore();
const setPage = useSetSongStore();
const setFilter = useSetSongFilters();
const setTable = useSetSongTable();
const setPagination = useSetSongTablePagination();
const handlePlayQueueAdd = usePlayQueueAdd();
const cq = useContainerQuery();
const musicFoldersQuery = useMusicFolders();
const sortByLabel =
(server?.type &&
(FILTERS[server.type as keyof typeof FILTERS] as { name: string; value: string }[]).find(
(f) => f.value === page.filter.sortBy,
)?.name) ||
'Unknown';
const sortOrderLabel = ORDER.find((s) => s.value === page.filter.sortOrder)?.name;
const handleFilterChange = useCallback(
async (filters?: SongListFilter) => {
const dataSource: IDatasource = {
getRows: async (params) => {
const limit = params.endRow - params.startRow;
const startIndex = params.startRow;
const pageFilters = filters || page.filter;
const queryKey = queryKeys.songs.list(server?.id || '', {
limit,
startIndex,
...pageFilters,
});
const songsRes = await queryClient.fetchQuery(
queryKey,
async ({ signal }) =>
api.controller.getSongList({
query: {
limit,
startIndex,
...pageFilters,
},
server,
signal,
}),
{ cacheTime: 1000 * 60 * 1 },
);
const songs = api.normalize.songList(songsRes, server);
params.successCallback(songs?.items || [], songsRes?.totalRecordCount || 0);
},
rowCount: undefined,
};
tableRef.current?.api.setDatasource(dataSource);
tableRef.current?.api.purgeInfiniteCache();
tableRef.current?.api.ensureIndexVisible(0, 'top');
setPagination({ currentPage: 0 });
},
[page.filter, server, setPagination, tableRef],
);
const handleSetSortBy = useCallback(
(e: MouseEvent<HTMLButtonElement>) => {
if (!e.currentTarget?.value || !server?.type) return;
const sortOrder = FILTERS[server.type as keyof typeof FILTERS].find(
(f) => f.value === e.currentTarget.value,
)?.defaultOrder;
const updatedFilters = setFilter({
sortBy: e.currentTarget.value as SongListSort,
sortOrder: sortOrder || SortOrder.ASC,
});
handleFilterChange(updatedFilters);
},
[handleFilterChange, server?.type, setFilter],
);
const handleSetMusicFolder = useCallback(
(e: MouseEvent<HTMLButtonElement>) => {
if (!e.currentTarget?.value) return;
let updatedFilters = null;
if (e.currentTarget.value === String(page.filter.musicFolderId)) {
updatedFilters = setFilter({ musicFolderId: undefined });
} else {
updatedFilters = setFilter({ musicFolderId: e.currentTarget.value });
}
handleFilterChange(updatedFilters);
},
[handleFilterChange, page.filter.musicFolderId, setFilter],
);
const handleToggleSortOrder = useCallback(() => {
const newSortOrder = page.filter.sortOrder === SortOrder.ASC ? SortOrder.DESC : SortOrder.ASC;
const updatedFilters = setFilter({ sortOrder: newSortOrder });
handleFilterChange(updatedFilters);
}, [page.filter.sortOrder, handleFilterChange, setFilter]);
const handleSetViewType = useCallback(
(e: MouseEvent<HTMLButtonElement>) => {
if (!e.currentTarget?.value) return;
const display = e.currentTarget.value as ListDisplayType;
setPage({ list: { ...page, display: e.currentTarget.value as ListDisplayType } });
if (display === ListDisplayType.TABLE) {
tableRef.current?.api.paginationSetPageSize(tableRef.current.props.infiniteInitialRowCount);
setPagination({ currentPage: 0 });
} else if (display === ListDisplayType.TABLE_PAGINATED) {
setPagination({ currentPage: 0 });
}
},
[page, setPage, setPagination, tableRef],
);
// const handleSearch = debounce((e: ChangeEvent<HTMLInputElement>) => {
// const previousSearchTerm = page.filter.searchTerm;
// const searchTerm = e.target.value === '' ? undefined : e.target.value;
// const updatedFilters = setFilter({ searchTerm });
// if (previousSearchTerm !== searchTerm) handleFilterChange(updatedFilters);
// }, 500);
const handleTableColumns = (values: TableColumn[]) => {
const existingColumns = page.table.columns;
if (values.length === 0) {
return setTable({
columns: [],
});
}
// If adding a column
if (values.length > existingColumns.length) {
const newColumn = { column: values[values.length - 1], width: 100 };
return setTable({ columns: [...existingColumns, newColumn] });
}
// If removing a column
const removed = existingColumns.filter((column) => !values.includes(column.column));
const newColumns = existingColumns.filter((column) => !removed.includes(column));
return setTable({ columns: newColumns });
};
const handleAutoFitColumns = (e: ChangeEvent<HTMLInputElement>) => {
setTable({ autoFit: e.currentTarget.checked });
if (e.currentTarget.checked) {
tableRef.current?.api.sizeColumnsToFit();
}
};
const handleRowHeight = (e: number) => {
setTable({ rowHeight: e });
};
const handleRefresh = () => {
queryClient.invalidateQueries(queryKeys.songs.list(server?.id || ''));
handleFilterChange(page.filter);
};
const handlePlay = async (play: Play) => {
if (!itemCount || itemCount === 0) return;
const query: SongListQuery = { startIndex: 0, ...page.filter };
handlePlayQueueAdd?.({
byItemType: {
id: query,
type: LibraryItem.SONG,
},
play,
});
};
return (
<PageHeader p="1rem">
<Flex
ref={cq.ref}
direction="row"
justify="space-between"
>
<Flex
align="center"
gap="md"
justify="center"
>
<DropdownMenu position="bottom-start">
<DropdownMenu.Target>
<Button
compact
rightIcon={<RiArrowDownSLine size={15} />}
size="xl"
sx={{ paddingLeft: 0, paddingRight: 0 }}
variant="subtle"
>
<Group noWrap>
<TextTitle
order={2}
weight={700}
>
Tracks
</TextTitle>
<Badge
radius="xl"
size="lg"
>
{itemCount === null || itemCount === undefined ? <SpinnerIcon /> : itemCount}
</Badge>
</Group>
</Button>
</DropdownMenu.Target>
<DropdownMenu.Dropdown>
<DropdownMenu.Label>Display type</DropdownMenu.Label>
<DropdownMenu.Item
$isActive={page.display === ListDisplayType.TABLE}
value={ListDisplayType.TABLE}
onClick={handleSetViewType}
>
Table
</DropdownMenu.Item>
<DropdownMenu.Item
$isActive={page.display === ListDisplayType.TABLE_PAGINATED}
value={ListDisplayType.TABLE_PAGINATED}
onClick={handleSetViewType}
>
Table (paginated)
</DropdownMenu.Item>
<DropdownMenu.Divider />
<DropdownMenu.Label>Item Size</DropdownMenu.Label>
<DropdownMenu.Item closeMenuOnClick={false}>
<Slider
defaultValue={page.table.rowHeight || 0}
label={null}
max={100}
min={25}
onChangeEnd={handleRowHeight}
/>
</DropdownMenu.Item>
<DropdownMenu.Label>Table Columns</DropdownMenu.Label>
<DropdownMenu.Item
closeMenuOnClick={false}
component="div"
sx={{ cursor: 'default' }}
>
<Stack>
<MultiSelect
clearable
data={SONG_TABLE_COLUMNS}
defaultValue={page.table?.columns.map((column) => column.column)}
width={300}
onChange={handleTableColumns}
/>
<Group position="apart">
<Text>Auto Fit Columns</Text>
<Switch
defaultChecked={page.table.autoFit}
onChange={handleAutoFitColumns}
/>
</Group>
</Stack>
</DropdownMenu.Item>
</DropdownMenu.Dropdown>
</DropdownMenu>
<DropdownMenu position="bottom-start">
<DropdownMenu.Target>
<Button
compact
fw={600}
variant="subtle"
>
{sortByLabel}
</Button>
</DropdownMenu.Target>
<DropdownMenu.Dropdown>
{FILTERS[server?.type as keyof typeof FILTERS].map((filter) => (
<DropdownMenu.Item
key={`filter-${filter.name}`}
$isActive={filter.value === page.filter.sortBy}
value={filter.value}
onClick={handleSetSortBy}
>
{filter.name}
</DropdownMenu.Item>
))}
</DropdownMenu.Dropdown>
</DropdownMenu>
<Button
compact
fw={600}
variant="subtle"
onClick={handleToggleSortOrder}
>
{cq.isMd ? (
sortOrderLabel
) : (
<>
{page.filter.sortOrder === SortOrder.ASC ? (
<RiSortAsc size={15} />
) : (
<RiSortDesc size={15} />
)}
</>
)}
</Button>
{server?.type === ServerType.JELLYFIN && (
<DropdownMenu position="bottom-start">
<DropdownMenu.Target>
<Button
compact
fw={600}
variant="subtle"
>
{cq.isMd ? 'Folder' : <RiFolder2Line size={15} />}
</Button>
</DropdownMenu.Target>
<DropdownMenu.Dropdown>
{musicFoldersQuery.data?.map((folder) => (
<DropdownMenu.Item
key={`musicFolder-${folder.id}`}
$isActive={page.filter.musicFolderId === folder.id}
value={folder.id}
onClick={handleSetMusicFolder}
>
{folder.name}
</DropdownMenu.Item>
))}
</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>
<DropdownMenu position="bottom-start">
<DropdownMenu.Target>
<Button
compact
fw="600"
variant="subtle"
>
<RiMoreFill size={15} />
</Button>
</DropdownMenu.Target>
<DropdownMenu.Dropdown>
<DropdownMenu.Item onClick={() => handlePlay(Play.NOW)}>Play</DropdownMenu.Item>
<DropdownMenu.Item onClick={() => handlePlay(Play.LAST)}>
Add to queue
</DropdownMenu.Item>
<DropdownMenu.Item onClick={() => handlePlay(Play.NEXT)}>
Add to queue next
</DropdownMenu.Item>
<DropdownMenu.Divider />
<DropdownMenu.Item onClick={handleRefresh}>Refresh</DropdownMenu.Item>
</DropdownMenu.Dropdown>
</DropdownMenu>
</Flex>
</Flex>
</PageHeader>
);
};

213
src/renderer/features/artists/components/album-artist-detail-song-list-content.tsx
View file

@ -1,213 +0,0 @@
import { MutableRefObject, useCallback, useMemo } from 'react';
import type {
ColDef,
GridReadyEvent,
IDatasource,
PaginationChangedEvent,
RowDoubleClickedEvent,
} from '@ag-grid-community/core';
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import { useSetState } from '@mantine/hooks';
import { useQueryClient } from '@tanstack/react-query';
import { api } from '/@/renderer/api';
import { queryKeys } from '/@/renderer/api/query-keys';
import {
getColumnDefs,
TablePagination,
VirtualGridAutoSizerContainer,
VirtualTable,
} from '/@/renderer/components';
import {
SongListFilter,
useCurrentServer,
useSetSongTable,
useSongListStore,
} from '/@/renderer/store';
import { ListDisplayType, TablePagination as TablePaginationType } from '/@/renderer/types';
import { AnimatePresence } from 'framer-motion';
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 { usePlayQueueAdd } from '/@/renderer/features/player';
interface AlbumArtistSongListContentProps {
filter: SongListFilter;
itemCount?: number;
tableRef: MutableRefObject<AgGridReactType | null>;
}
export const AlbumArtistDetailSongListContent = ({
itemCount,
filter,
tableRef,
}: AlbumArtistSongListContentProps) => {
const queryClient = useQueryClient();
const server = useCurrentServer();
const page = useSongListStore();
const [pagination, setPagination] = useSetState<TablePaginationType>({
currentPage: 0,
itemsPerPage: 100,
totalItems: itemCount || 0,
totalPages: 0,
});
const setTable = useSetSongTable();
const handlePlayQueueAdd = usePlayQueueAdd();
const playButtonBehavior = usePlayButtonBehavior();
const isPaginationEnabled = page.display === ListDisplayType.TABLE_PAGINATED;
const columnDefs: ColDef[] = useMemo(
() => getColumnDefs(page.table.columns),
[page.table.columns],
);
const onGridReady = useCallback(
(params: GridReadyEvent) => {
const dataSource: IDatasource = {
getRows: async (params) => {
const limit = params.endRow - params.startRow;
const startIndex = params.startRow;
const queryKey = queryKeys.songs.list(server?.id || '', {
...filter,
limit,
startIndex,
});
const songsRes = await queryClient.fetchQuery(
queryKey,
async ({ signal }) =>
api.controller.getSongList({
query: {
...filter,
limit,
startIndex,
},
server,
signal,
}),
{ cacheTime: 1000 * 60 * 1 },
);
const songs = api.normalize.songList(songsRes, server);
params.successCallback(songs?.items || [], songsRes?.totalRecordCount || 0);
},
rowCount: undefined,
};
params.api.setDatasource(dataSource);
},
[filter, queryClient, server],
);
const onPaginationChanged = useCallback(
(event: PaginationChangedEvent) => {
if (!isPaginationEnabled || !event.api) return;
// Scroll to top of page on pagination change
const currentPageStartIndex = pagination.currentPage * pagination.itemsPerPage;
event.api?.ensureIndexVisible(currentPageStartIndex, 'top');
setPagination({
itemsPerPage: event.api.paginationGetPageSize(),
totalItems: event.api.paginationGetRowCount(),
totalPages: event.api.paginationGetTotalPages() + 1,
});
},
[isPaginationEnabled, pagination.currentPage, pagination.itemsPerPage, setPagination],
);
const handleColumnChange = useCallback(() => {
const { columnApi } = tableRef?.current || {};
const columnsOrder = columnApi?.getAllGridColumns();
if (!columnsOrder) return;
const columnsInSettings = page.table.columns;
const updatedColumns = [];
for (const column of columnsOrder) {
const columnInSettings = columnsInSettings.find((c) => c.column === column.getColDef().colId);
if (columnInSettings) {
updatedColumns.push({
...columnInSettings,
...(!page.table.autoFit && {
width: column.getActualWidth(),
}),
});
}
}
setTable({ columns: updatedColumns });
}, [page.table.autoFit, page.table.columns, setTable, tableRef]);
const debouncedColumnChange = debounce(handleColumnChange, 200);
const handleContextMenu = useHandleTableContextMenu(LibraryItem.SONG, SONG_CONTEXT_MENU_ITEMS);
const handleRowDoubleClick = (e: RowDoubleClickedEvent<QueueSong>) => {
if (!e.data) return;
handlePlayQueueAdd?.({
byData: [e.data],
play: playButtonBehavior,
});
};
return (
<>
<VirtualGridAutoSizerContainer>
<VirtualTable
// https://github.com/ag-grid/ag-grid/issues/5284
// Key is used to force remount of table when display, rowHeight, or server changes
key={`table-${page.display}-${page.table.rowHeight}-${server?.id}`}
ref={tableRef}
alwaysShowHorizontalScroll
animateRows
maintainColumnOrder
suppressCopyRowsToClipboard
suppressMoveWhenRowDragging
suppressPaginationPanel
suppressRowDrag
suppressScrollOnNewData
autoFitColumns={page.table.autoFit}
blockLoadDebounceMillis={200}
cacheBlockSize={500}
cacheOverflowSize={1}
columnDefs={columnDefs}
enableCellChangeFlash={false}
getRowId={(data) => data.data.id}
infiniteInitialRowCount={itemCount || 100}
pagination={isPaginationEnabled}
paginationAutoPageSize={isPaginationEnabled}
paginationPageSize={page.table.pagination.itemsPerPage || 100}
rowBuffer={20}
rowHeight={page.table.rowHeight || 40}
rowModelType="infinite"
rowSelection="multiple"
onCellContextMenu={handleContextMenu}
onColumnMoved={handleColumnChange}
onColumnResized={debouncedColumnChange}
onGridReady={onGridReady}
onPaginationChanged={onPaginationChanged}
onRowDoubleClicked={handleRowDoubleClick}
/>
</VirtualGridAutoSizerContainer>
<AnimatePresence
presenceAffectsLayout
initial={false}
mode="wait"
>
{page.display === ListDisplayType.TABLE_PAGINATED && (
<TablePagination
pagination={pagination}
setPagination={setPagination}
tableRef={tableRef}
/>
)}
</AnimatePresence>
</>
);
};

470
src/renderer/features/artists/components/album-artist-detail-song-list-header.tsx
View file

@ -1,470 +0,0 @@
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 debounce from 'lodash/debounce';
import { ChangeEvent, MouseEvent, MutableRefObject, useCallback } from 'react';
import { RiArrowDownSLine, RiFolder2Line, RiMoreFill, RiSortAsc, RiSortDesc } from 'react-icons/ri';
import { api } from '/@/renderer/api';
import { queryKeys } from '/@/renderer/api/query-keys';
import {
LibraryItem,
ServerType,
SongListQuery,
SongListSort,
SortOrder,
} from '/@/renderer/api/types';
import {
Button,
DropdownMenu,
PageHeader,
SearchInput,
Slider,
TextTitle,
Switch,
MultiSelect,
Text,
SONG_TABLE_COLUMNS,
Badge,
SpinnerIcon,
} from '/@/renderer/components';
import { usePlayQueueAdd } from '/@/renderer/features/player';
import { useMusicFolders } from '/@/renderer/features/shared';
import { useContainerQuery } from '/@/renderer/hooks';
import { queryClient } from '/@/renderer/lib/react-query';
import {
SongListFilter,
useCurrentServer,
useSetSongStore,
useSetSongTable,
useSetSongTablePagination,
useSongListStore,
} from '/@/renderer/store';
import { ListDisplayType, Play, TableColumn } from '/@/renderer/types';
const FILTERS = {
jellyfin: [
{ defaultOrder: SortOrder.ASC, name: 'Album', value: SongListSort.ALBUM },
{ defaultOrder: SortOrder.ASC, name: 'Album Artist', value: SongListSort.ALBUM_ARTIST },
{ defaultOrder: SortOrder.ASC, name: 'Artist', value: SongListSort.ARTIST },
{ defaultOrder: SortOrder.ASC, name: 'Duration', value: SongListSort.DURATION },
{ defaultOrder: SortOrder.ASC, name: 'Most Played', value: SongListSort.PLAY_COUNT },
{ defaultOrder: SortOrder.ASC, name: 'Name', value: SongListSort.NAME },
{ defaultOrder: SortOrder.ASC, name: 'Random', value: SongListSort.RANDOM },
{ defaultOrder: SortOrder.ASC, name: 'Recently Added', value: SongListSort.RECENTLY_ADDED },
{ defaultOrder: SortOrder.ASC, name: 'Recently Played', value: SongListSort.RECENTLY_PLAYED },
{ defaultOrder: SortOrder.ASC, name: 'Release Date', value: SongListSort.RELEASE_DATE },
],
navidrome: [
{ defaultOrder: SortOrder.ASC, name: 'Album', value: SongListSort.ALBUM },
{ defaultOrder: SortOrder.ASC, name: 'Album Artist', value: SongListSort.ALBUM_ARTIST },
{ defaultOrder: SortOrder.ASC, name: 'Artist', value: SongListSort.ARTIST },
{ defaultOrder: SortOrder.DESC, name: 'BPM', value: SongListSort.BPM },
{ defaultOrder: SortOrder.ASC, name: 'Channels', value: SongListSort.CHANNELS },
{ defaultOrder: SortOrder.ASC, name: 'Comment', value: SongListSort.COMMENT },
{ defaultOrder: SortOrder.DESC, name: 'Duration', value: SongListSort.DURATION },
{ defaultOrder: SortOrder.DESC, name: 'Favorited', value: SongListSort.FAVORITED },
{ defaultOrder: SortOrder.ASC, name: 'Genre', value: SongListSort.GENRE },
{ defaultOrder: SortOrder.ASC, name: 'Name', value: SongListSort.NAME },
{ defaultOrder: SortOrder.DESC, name: 'Play Count', value: SongListSort.PLAY_COUNT },
{ defaultOrder: SortOrder.DESC, name: 'Rating', value: SongListSort.RATING },
{ defaultOrder: SortOrder.DESC, name: 'Recently Added', value: SongListSort.RECENTLY_ADDED },
{ defaultOrder: SortOrder.DESC, name: 'Recently Played', value: SongListSort.RECENTLY_PLAYED },
{ defaultOrder: SortOrder.DESC, name: 'Year', value: SongListSort.YEAR },
],
};
const ORDER = [
{ name: 'Ascending', value: SortOrder.ASC },
{ name: 'Descending', value: SortOrder.DESC },
];
interface AlbumArtistDetailSongListHeaderProps {
filter: SongListFilter;
itemCount?: number;
setFilter: (filter: Partial<SongListFilter>) => void;
tableRef: MutableRefObject<AgGridReactType | null>;
title: string;
}
export const AlbumArtistDetailSongListHeader = ({
filter,
setFilter,
title,
itemCount,
tableRef,
}: AlbumArtistDetailSongListHeaderProps) => {
const server = useCurrentServer();
const page = useSongListStore();
const setPage = useSetSongStore();
const setTable = useSetSongTable();
const setPagination = useSetSongTablePagination();
const handlePlayQueueAdd = usePlayQueueAdd();
const cq = useContainerQuery();
const musicFoldersQuery = useMusicFolders();
const sortByLabel =
(server?.type &&
(FILTERS[server.type as keyof typeof FILTERS] as { name: string; value: string }[]).find(
(f) => f.value === filter.sortBy,
)?.name) ||
'Unknown';
const sortOrderLabel = ORDER.find((s) => s.value === filter.sortOrder)?.name;
const handleFilterChange = useCallback(
async (filters?: SongListFilter) => {
const dataSource: IDatasource = {
getRows: async (params) => {
const limit = params.endRow - params.startRow;
const startIndex = params.startRow;
const pageFilters = filters || filter;
const queryKey = queryKeys.songs.list(server?.id || '', {
limit,
startIndex,
...pageFilters,
});
const songsRes = await queryClient.fetchQuery(
queryKey,
async ({ signal }) =>
api.controller.getSongList({
query: {
limit,
startIndex,
...pageFilters,
},
server,
signal,
}),
{ cacheTime: 1000 * 60 * 1 },
);
const songs = api.normalize.songList(songsRes, server);
params.successCallback(songs?.items || [], songsRes?.totalRecordCount || 0);
},
rowCount: undefined,
};
tableRef.current?.api.setDatasource(dataSource);
tableRef.current?.api.purgeInfiniteCache();
tableRef.current?.api.ensureIndexVisible(0, 'top');
setPagination({ currentPage: 0 });
},
[filter, server, setPagination, tableRef],
);
const handleSetSortBy = useCallback(
(e: MouseEvent<HTMLButtonElement>) => {
if (!e.currentTarget?.value || !server?.type) return;
const sortOrder = FILTERS[server.type as keyof typeof FILTERS].find(
(f) => f.value === e.currentTarget.value,
)?.defaultOrder;
setFilter({
sortBy: e.currentTarget.value as SongListSort,
sortOrder: sortOrder || SortOrder.ASC,
});
handleFilterChange({
...filter,
sortBy: e.currentTarget.value as SongListSort,
sortOrder: sortOrder || SortOrder.ASC,
});
},
[filter, handleFilterChange, server?.type, setFilter],
);
const handleSetMusicFolder = useCallback(
(e: MouseEvent<HTMLButtonElement>) => {
if (!e.currentTarget?.value) return;
let updatedFilters = null;
if (e.currentTarget.value === String(page.filter.musicFolderId)) {
updatedFilters = { musicFolderId: undefined };
setFilter(updatedFilters);
} else {
updatedFilters = { musicFolderId: e.currentTarget.value };
setFilter(updatedFilters);
}
handleFilterChange({ ...filter, ...updatedFilters });
},
[filter, handleFilterChange, page.filter.musicFolderId, setFilter],
);
const handleToggleSortOrder = useCallback(() => {
const newSortOrder = filter.sortOrder === SortOrder.ASC ? SortOrder.DESC : SortOrder.ASC;
setFilter({ sortOrder: newSortOrder });
handleFilterChange({ ...filter, sortOrder: newSortOrder });
}, [filter, handleFilterChange, setFilter]);
const handleSetViewType = useCallback(
(e: MouseEvent<HTMLButtonElement>) => {
if (!e.currentTarget?.value) return;
const display = e.currentTarget.value as ListDisplayType;
setPage({ list: { ...page, display: e.currentTarget.value as ListDisplayType } });
if (display === ListDisplayType.TABLE) {
tableRef.current?.api.paginationSetPageSize(tableRef.current.props.infiniteInitialRowCount);
setPagination({ currentPage: 0 });
} else if (display === ListDisplayType.TABLE_PAGINATED) {
setPagination({ currentPage: 0 });
}
},
[page, setPage, setPagination, tableRef],
);
const handleSearch = debounce((e: ChangeEvent<HTMLInputElement>) => {
const previousSearchTerm = filter.searchTerm;
const searchTerm = e.target.value === '' ? undefined : e.target.value;
setFilter({ searchTerm });
if (previousSearchTerm !== searchTerm) handleFilterChange({ ...filter, searchTerm });
}, 500);
const handleTableColumns = (values: TableColumn[]) => {
const existingColumns = page.table.columns;
if (values.length === 0) {
return setTable({
columns: [],
});
}
// If adding a column
if (values.length > existingColumns.length) {
const newColumn = { column: values[values.length - 1], width: 100 };
return setTable({ columns: [...existingColumns, newColumn] });
}
// If removing a column
const removed = existingColumns.filter((column) => !values.includes(column.column));
const newColumns = existingColumns.filter((column) => !removed.includes(column));
return setTable({ columns: newColumns });
};
const handleAutoFitColumns = (e: ChangeEvent<HTMLInputElement>) => {
setTable({ autoFit: e.currentTarget.checked });
if (e.currentTarget.checked) {
tableRef.current?.api.sizeColumnsToFit();
}
};
const handleRowHeight = (e: number) => {
setTable({ rowHeight: e });
};
const handleRefresh = () => {
queryClient.invalidateQueries(queryKeys.songs.list(server?.id || ''));
handleFilterChange(filter);
};
const handlePlay = async (play: Play) => {
const query: SongListQuery = { startIndex: 0, ...filter };
handlePlayQueueAdd?.({
byItemType: {
id: query,
type: LibraryItem.SONG,
},
play,
});
};
return (
<PageHeader p="1rem">
<Flex
ref={cq.ref}
direction="row"
justify="space-between"
>
<Flex
align="center"
gap="md"
justify="center"
>
<DropdownMenu position="bottom-start">
<DropdownMenu.Target>
<Button
compact
rightIcon={<RiArrowDownSLine size={15} />}
size="xl"
sx={{ paddingLeft: 0, paddingRight: 0 }}
variant="subtle"
>
<Group noWrap>
<TextTitle
maw="20vw"
order={2}
overflow="hidden"
weight={700}
>
{title}
</TextTitle>
<Badge
radius="xl"
size="lg"
>
{itemCount === null || itemCount === undefined ? <SpinnerIcon /> : itemCount}
</Badge>
</Group>
</Button>
</DropdownMenu.Target>
<DropdownMenu.Dropdown>
<DropdownMenu.Label>Display type</DropdownMenu.Label>
<DropdownMenu.Item
$isActive={page.display === ListDisplayType.TABLE}
value={ListDisplayType.TABLE}
onClick={handleSetViewType}
>
Table
</DropdownMenu.Item>
<DropdownMenu.Item
$isActive={page.display === ListDisplayType.TABLE_PAGINATED}
value={ListDisplayType.TABLE_PAGINATED}
onClick={handleSetViewType}
>
Table (paginated)
</DropdownMenu.Item>
<DropdownMenu.Divider />
<DropdownMenu.Label>Item Size</DropdownMenu.Label>
<DropdownMenu.Item closeMenuOnClick={false}>
<Slider
defaultValue={page.table.rowHeight || 0}
label={null}
max={100}
min={25}
onChangeEnd={handleRowHeight}
/>
</DropdownMenu.Item>
<DropdownMenu.Label>Table Columns</DropdownMenu.Label>
<DropdownMenu.Item
closeMenuOnClick={false}
component="div"
sx={{ cursor: 'default' }}
>
<Stack>
<MultiSelect
clearable
data={SONG_TABLE_COLUMNS}
defaultValue={page.table?.columns.map((column) => column.column)}
width={300}
onChange={handleTableColumns}
/>
<Group position="apart">
<Text>Auto Fit Columns</Text>
<Switch
defaultChecked={page.table.autoFit}
onChange={handleAutoFitColumns}
/>
</Group>
</Stack>
</DropdownMenu.Item>
</DropdownMenu.Dropdown>
</DropdownMenu>
<DropdownMenu position="bottom-start">
<DropdownMenu.Target>
<Button
compact
fw="600"
variant="subtle"
>
{sortByLabel}
</Button>
</DropdownMenu.Target>
<DropdownMenu.Dropdown>
{FILTERS[server?.type as keyof typeof FILTERS].map((filter) => (
<DropdownMenu.Item
key={`filter-${filter.name}`}
$isActive={filter.value === page.filter.sortBy}
value={filter.value}
onClick={handleSetSortBy}
>
{filter.name}
</DropdownMenu.Item>
))}
</DropdownMenu.Dropdown>
</DropdownMenu>
<Button
compact
fw="600"
variant="subtle"
onClick={handleToggleSortOrder}
>
{cq.isMd ? (
sortOrderLabel
) : (
<>
{filter.sortOrder === SortOrder.ASC ? (
<RiSortAsc size={15} />
) : (
<RiSortDesc size={15} />
)}
</>
)}
</Button>
{server?.type === ServerType.JELLYFIN && (
<DropdownMenu position="bottom-start">
<DropdownMenu.Target>
<Button
compact
fw="600"
variant="subtle"
>
{cq.isMd ? 'Folder' : <RiFolder2Line size={15} />}
</Button>
</DropdownMenu.Target>
<DropdownMenu.Dropdown>
{musicFoldersQuery.data?.map((folder) => (
<DropdownMenu.Item
key={`musicFolder-${folder.id}`}
$isActive={page.filter.musicFolderId === folder.id}
value={folder.id}
onClick={handleSetMusicFolder}
>
{folder.name}
</DropdownMenu.Item>
))}
</DropdownMenu.Dropdown>
</DropdownMenu>
)}
<DropdownMenu position="bottom-start">
<DropdownMenu.Target>
<Button
compact
fw="600"
variant="subtle"
>
<RiMoreFill size={15} />
</Button>
</DropdownMenu.Target>
<DropdownMenu.Dropdown>
<DropdownMenu.Item onClick={() => handlePlay(Play.NOW)}>Play</DropdownMenu.Item>
<DropdownMenu.Item onClick={() => handlePlay(Play.LAST)}>
Add to queue
</DropdownMenu.Item>
<DropdownMenu.Item onClick={() => handlePlay(Play.NEXT)}>
Add to queue next
</DropdownMenu.Item>
<DropdownMenu.Divider />
<DropdownMenu.Item onClick={handleRefresh}>Refresh</DropdownMenu.Item>
</DropdownMenu.Dropdown>
</DropdownMenu>
</Flex>
<Flex gap="md">
<SearchInput
defaultValue={filter.searchTerm}
openedWidth={cq.isLg ? 300 : cq.isMd ? 250 : cq.isSm ? 150 : 75}
onChange={handleSearch}
/>
</Flex>
</Flex>
</PageHeader>
);
};

115
src/renderer/features/artists/components/album-artist-list-content.tsx
View file

@ -19,10 +19,6 @@ import { useQueryClient } from '@tanstack/react-query';
import { import {
useCurrentServer, useCurrentServer,
useAlbumArtistListStore, useAlbumArtistListStore,
useAlbumArtistTablePagination,
useSetAlbumArtistStore,
useSetAlbumArtistTable,
useSetAlbumArtistTablePagination,
useAlbumArtistListItemData, useAlbumArtistListItemData,
} from '/@/renderer/store'; } from '/@/renderer/store';
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact'; import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
@ -41,6 +37,8 @@ import { ALBUM_CONTEXT_MENU_ITEMS } from '/@/renderer/features/context-menu/cont
import { generatePath, useNavigate } from 'react-router'; import { generatePath, useNavigate } from 'react-router';
import { useAlbumArtistList } from '/@/renderer/features/artists/queries/album-artist-list-query'; import { useAlbumArtistList } from '/@/renderer/features/artists/queries/album-artist-list-query';
import { usePlayQueueAdd } from '/@/renderer/features/player'; import { usePlayQueueAdd } from '/@/renderer/features/player';
import { useAlbumArtistListFilter, useListStoreActions } from '../../../store/list.store';
import { useAlbumArtistListContext } from '/@/renderer/features/artists/context/album-artist-list-context';
interface AlbumArtistListContentProps { interface AlbumArtistListContentProps {
gridRef: MutableRefObject<VirtualInfiniteGridRef | null>; gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
@ -51,23 +49,21 @@ export const AlbumArtistListContent = ({ gridRef, tableRef }: AlbumArtistListCon
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const navigate = useNavigate(); const navigate = useNavigate();
const server = useCurrentServer(); const server = useCurrentServer();
const page = useAlbumArtistListStore();
const setPage = useSetAlbumArtistStore();
const handlePlayQueueAdd = usePlayQueueAdd(); const handlePlayQueueAdd = usePlayQueueAdd();
const { id, pageKey } = useAlbumArtistListContext();
const filter = useAlbumArtistListFilter({ id, key: pageKey });
const { table, grid, display } = useAlbumArtistListStore();
const { setTable, setTablePagination, setGrid } = useListStoreActions();
const { itemData, setItemData } = useAlbumArtistListItemData(); const { itemData, setItemData } = useAlbumArtistListItemData();
const pagination = useAlbumArtistTablePagination(); const isPaginationEnabled = display === ListDisplayType.TABLE_PAGINATED;
const setPagination = useSetAlbumArtistTablePagination();
const setTable = useSetAlbumArtistTable();
const isPaginationEnabled = page.display === ListDisplayType.TABLE_PAGINATED;
const checkAlbumArtistList = useAlbumArtistList( const checkAlbumArtistList = useAlbumArtistList(
{ {
limit: 1, limit: 1,
startIndex: 0, startIndex: 0,
...page.filter, ...filter,
}, },
{ {
cacheTime: Infinity, cacheTime: Infinity,
@ -75,10 +71,7 @@ export const AlbumArtistListContent = ({ gridRef, tableRef }: AlbumArtistListCon
}, },
); );
const columnDefs: ColDef[] = useMemo( const columnDefs: ColDef[] = useMemo(() => getColumnDefs(table.columns), [table.columns]);
() => getColumnDefs(page.table.columns),
[page.table.columns],
);
const onTableReady = useCallback( const onTableReady = useCallback(
(params: GridReadyEvent) => { (params: GridReadyEvent) => {
@ -90,7 +83,7 @@ export const AlbumArtistListContent = ({ gridRef, tableRef }: AlbumArtistListCon
const queryKey = queryKeys.albumArtists.list(server?.id || '', { const queryKey = queryKeys.albumArtists.list(server?.id || '', {
limit, limit,
startIndex, startIndex,
...page.filter, ...filter,
}); });
const albumArtistsRes = await queryClient.fetchQuery( const albumArtistsRes = await queryClient.fetchQuery(
@ -100,7 +93,7 @@ export const AlbumArtistListContent = ({ gridRef, tableRef }: AlbumArtistListCon
query: { query: {
limit, limit,
startIndex, startIndex,
...page.filter, ...filter,
}, },
server, server,
signal, signal,
@ -115,9 +108,9 @@ export const AlbumArtistListContent = ({ gridRef, tableRef }: AlbumArtistListCon
}; };
params.api.setDatasource(dataSource); params.api.setDatasource(dataSource);
params.api.ensureIndexVisible(page.table.scrollOffset || 0, 'top'); params.api.ensureIndexVisible(table.scrollOffset || 0, 'top');
}, },
[page.filter, page.table.scrollOffset, queryClient, server], [filter, table.scrollOffset, queryClient, server],
); );
const onTablePaginationChanged = useCallback( const onTablePaginationChanged = useCallback(
@ -126,19 +119,28 @@ export const AlbumArtistListContent = ({ gridRef, tableRef }: AlbumArtistListCon
try { try {
// Scroll to top of page on pagination change // Scroll to top of page on pagination change
const currentPageStartIndex = pagination.currentPage * pagination.itemsPerPage; const currentPageStartIndex = table.pagination.currentPage * table.pagination.itemsPerPage;
event.api?.ensureIndexVisible(currentPageStartIndex, 'top'); event.api?.ensureIndexVisible(currentPageStartIndex, 'top');
} catch (err) { } catch (err) {
console.log(err); console.log(err);
} }
setPagination({ setTablePagination({
itemsPerPage: event.api.paginationGetPageSize(), data: {
totalItems: event.api.paginationGetRowCount(), itemsPerPage: event.api.paginationGetPageSize(),
totalPages: event.api.paginationGetTotalPages() + 1, totalItems: event.api.paginationGetRowCount(),
totalPages: event.api.paginationGetTotalPages() + 1,
},
key: pageKey,
}); });
}, },
[isPaginationEnabled, pagination.currentPage, pagination.itemsPerPage, setPagination], [
isPaginationEnabled,
pageKey,
setTablePagination,
table.pagination.currentPage,
table.pagination.itemsPerPage,
],
); );
const handleTableColumnChange = useCallback(() => { const handleTableColumnChange = useCallback(() => {
@ -147,7 +149,7 @@ export const AlbumArtistListContent = ({ gridRef, tableRef }: AlbumArtistListCon
if (!columnsOrder) return; if (!columnsOrder) return;
const columnsInSettings = page.table.columns; const columnsInSettings = table.columns;
const updatedColumns = []; const updatedColumns = [];
for (const column of columnsOrder) { for (const column of columnsOrder) {
const columnInSettings = columnsInSettings.find((c) => c.column === column.getColDef().colId); const columnInSettings = columnsInSettings.find((c) => c.column === column.getColDef().colId);
@ -155,21 +157,21 @@ export const AlbumArtistListContent = ({ gridRef, tableRef }: AlbumArtistListCon
if (columnInSettings) { if (columnInSettings) {
updatedColumns.push({ updatedColumns.push({
...columnInSettings, ...columnInSettings,
...(!page.table.autoFit && { ...(!table.autoFit && {
width: column.getColDef().width, width: column.getColDef().width,
}), }),
}); });
} }
} }
setTable({ columns: updatedColumns }); setTable({ data: { columns: updatedColumns }, key: pageKey });
}, [page.table.autoFit, page.table.columns, setTable, tableRef]); }, [tableRef, table.columns, table.autoFit, setTable, pageKey]);
const debouncedTableColumnChange = debounce(handleTableColumnChange, 200); const debouncedTableColumnChange = debounce(handleTableColumnChange, 200);
const handleTableScroll = (e: BodyScrollEvent) => { const handleTableScroll = (e: BodyScrollEvent) => {
const scrollOffset = Number((e.top / page.table.rowHeight).toFixed(0)); const scrollOffset = Number((e.top / table.rowHeight).toFixed(0));
setTable({ scrollOffset }); setTable({ data: { scrollOffset }, key: pageKey });
}; };
const fetch = useCallback( const fetch = useCallback(
@ -177,7 +179,7 @@ export const AlbumArtistListContent = ({ gridRef, tableRef }: AlbumArtistListCon
const queryKey = queryKeys.albumArtists.list(server?.id || '', { const queryKey = queryKeys.albumArtists.list(server?.id || '', {
limit, limit,
startIndex, startIndex,
...page.filter, ...filter,
}); });
const albumArtistsRes = await queryClient.fetchQuery( const albumArtistsRes = await queryClient.fetchQuery(
@ -187,7 +189,7 @@ export const AlbumArtistListContent = ({ gridRef, tableRef }: AlbumArtistListCon
query: { query: {
limit, limit,
startIndex, startIndex,
...page.filter, ...filter,
}, },
server, server,
signal, signal,
@ -197,26 +199,18 @@ export const AlbumArtistListContent = ({ gridRef, tableRef }: AlbumArtistListCon
return api.normalize.albumArtistList(albumArtistsRes, server); return api.normalize.albumArtistList(albumArtistsRes, server);
}, },
[page.filter, queryClient, server], [filter, queryClient, server],
); );
const handleGridScroll = useCallback( const handleGridScroll = useCallback(
(e: ListOnScrollProps) => { (e: ListOnScrollProps) => {
setPage({ setGrid({ data: { scrollOffset: e.scrollOffset }, key: pageKey });
list: {
...page,
grid: {
...page.grid,
scrollOffset: e.scrollOffset,
},
},
});
}, },
[page, setPage], [pageKey, setGrid],
); );
const handleGridSizeChange = () => { const handleGridSizeChange = () => {
if (page.table.autoFit) { if (table.autoFit) {
tableRef?.current?.api.sizeColumnsToFit(); tableRef?.current?.api.sizeColumnsToFit();
} }
}; };
@ -224,7 +218,7 @@ export const AlbumArtistListContent = ({ gridRef, tableRef }: AlbumArtistListCon
const cardRows = useMemo(() => { const cardRows = useMemo(() => {
const rows: CardRow<AlbumArtist>[] = [ALBUMARTIST_CARD_ROWS.name]; const rows: CardRow<AlbumArtist>[] = [ALBUMARTIST_CARD_ROWS.name];
switch (page.filter.sortBy) { switch (filter.sortBy) {
case AlbumArtistListSort.DURATION: case AlbumArtistListSort.DURATION:
rows.push(ALBUMARTIST_CARD_ROWS.duration); rows.push(ALBUMARTIST_CARD_ROWS.duration);
break; break;
@ -253,7 +247,7 @@ export const AlbumArtistListContent = ({ gridRef, tableRef }: AlbumArtistListCon
} }
return rows; return rows;
}, [page.filter.sortBy]); }, [filter.sortBy]);
const handleContextMenu = useHandleTableContextMenu( const handleContextMenu = useHandleTableContextMenu(
LibraryItem.ALBUM_ARTIST, LibraryItem.ALBUM_ARTIST,
@ -267,22 +261,22 @@ export const AlbumArtistListContent = ({ gridRef, tableRef }: AlbumArtistListCon
return ( return (
<> <>
<VirtualGridAutoSizerContainer> <VirtualGridAutoSizerContainer>
{page.display === ListDisplayType.CARD || page.display === ListDisplayType.POSTER ? ( {display === ListDisplayType.CARD || display === ListDisplayType.POSTER ? (
<AutoSizer> <AutoSizer>
{({ height, width }) => ( {({ height, width }) => (
<VirtualInfiniteGrid <VirtualInfiniteGrid
key={`albumartist-list-${server?.id}-${page.display}`} key={`albumartist-list-${server?.id}-${display}`}
ref={gridRef} ref={gridRef}
cardRows={cardRows} cardRows={cardRows}
display={page.display || ListDisplayType.CARD} display={display || ListDisplayType.CARD}
fetchFn={fetch} fetchFn={fetch}
handlePlayQueueAdd={handlePlayQueueAdd} handlePlayQueueAdd={handlePlayQueueAdd}
height={height} height={height}
initialScrollOffset={page?.grid.scrollOffset || 0} initialScrollOffset={grid?.scrollOffset || 0}
itemCount={checkAlbumArtistList?.data?.totalRecordCount || 0} itemCount={checkAlbumArtistList?.data?.totalRecordCount || 0}
itemData={itemData} itemData={itemData}
itemGap={20} itemGap={20}
itemSize={150 + page.grid?.size} itemSize={150 + (grid?.size || 0)}
itemType={LibraryItem.ALBUM_ARTIST} itemType={LibraryItem.ALBUM_ARTIST}
loading={checkAlbumArtistList.isLoading} loading={checkAlbumArtistList.isLoading}
minimumBatchSize={40} minimumBatchSize={40}
@ -300,18 +294,18 @@ export const AlbumArtistListContent = ({ gridRef, tableRef }: AlbumArtistListCon
<VirtualTable <VirtualTable
// https://github.com/ag-grid/ag-grid/issues/5284 // https://github.com/ag-grid/ag-grid/issues/5284
// Key is used to force remount of table when display, rowHeight, or server changes // Key is used to force remount of table when display, rowHeight, or server changes
key={`table-${page.display}-${page.table.rowHeight}-${server?.id}`} key={`table-${display}-${table.rowHeight}-${server?.id}`}
ref={tableRef} ref={tableRef}
alwaysShowHorizontalScroll alwaysShowHorizontalScroll
suppressRowDrag suppressRowDrag
autoFitColumns={page.table.autoFit} autoFitColumns={table.autoFit}
columnDefs={columnDefs} columnDefs={columnDefs}
getRowId={(data) => data.data.id} getRowId={(data) => data.data.id}
infiniteInitialRowCount={checkAlbumArtistList.data?.totalRecordCount || 1} infiniteInitialRowCount={checkAlbumArtistList.data?.totalRecordCount || 1}
pagination={isPaginationEnabled} pagination={isPaginationEnabled}
paginationAutoPageSize={isPaginationEnabled} paginationAutoPageSize={isPaginationEnabled}
paginationPageSize={page.table.pagination.itemsPerPage || 100} paginationPageSize={table.pagination.itemsPerPage || 100}
rowHeight={page.table.rowHeight || 40} rowHeight={table.rowHeight || 40}
rowModelType="infinite" rowModelType="infinite"
onBodyScrollEnd={handleTableScroll} onBodyScrollEnd={handleTableScroll}
onCellContextMenu={handleContextMenu} onCellContextMenu={handleContextMenu}
@ -330,10 +324,11 @@ export const AlbumArtistListContent = ({ gridRef, tableRef }: AlbumArtistListCon
initial={false} initial={false}
mode="wait" mode="wait"
> >
{page.display === ListDisplayType.TABLE_PAGINATED && ( {display === ListDisplayType.TABLE_PAGINATED && (
<TablePagination <TablePagination
pagination={pagination} pageKey={pageKey}
setPagination={setPagination} pagination={table.pagination}
setPagination={setTablePagination}
tableRef={tableRef} tableRef={tableRef}
/> />
)} )}

134
src/renderer/features/artists/components/album-artist-list-header-filters.tsx
View file

@ -28,14 +28,13 @@ import { useMusicFolders } from '/@/renderer/features/shared';
import { useContainerQuery } from '/@/renderer/hooks'; import { useContainerQuery } from '/@/renderer/hooks';
import { import {
useCurrentServer, useCurrentServer,
useSetAlbumArtistStore,
useSetAlbumArtistFilters,
useAlbumArtistListStore, useAlbumArtistListStore,
useSetAlbumArtistTablePagination,
useSetAlbumArtistTable,
AlbumArtistListFilter, AlbumArtistListFilter,
useListStoreActions,
useAlbumArtistListFilter,
} from '/@/renderer/store'; } from '/@/renderer/store';
import { ListDisplayType, TableColumn, ServerType } from '/@/renderer/types'; import { ListDisplayType, TableColumn, ServerType } from '/@/renderer/types';
import { useAlbumArtistListContext } from '../context/album-artist-list-context';
const FILTERS = { const FILTERS = {
jellyfin: [ jellyfin: [
@ -76,32 +75,27 @@ export const AlbumArtistListHeaderFilters = ({
}: AlbumArtistListHeaderFiltersProps) => { }: AlbumArtistListHeaderFiltersProps) => {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const server = useCurrentServer(); const server = useCurrentServer();
const setPage = useSetAlbumArtistStore(); const { pageKey } = useAlbumArtistListContext();
const setFilter = useSetAlbumArtistFilters(); const { display, table, grid } = useAlbumArtistListStore();
const page = useAlbumArtistListStore(); const { setFilter, setTable, setTablePagination, setDisplayType, setGrid } =
const filters = page.filter; useListStoreActions();
const filter = useAlbumArtistListFilter({ key: pageKey });
const cq = useContainerQuery(); const cq = useContainerQuery();
const musicFoldersQuery = useMusicFolders(); const musicFoldersQuery = useMusicFolders();
const setPagination = useSetAlbumArtistTablePagination();
const setTable = useSetAlbumArtistTable();
const sortByLabel = const sortByLabel =
(server?.type && (server?.type &&
FILTERS[server.type as keyof typeof FILTERS].find((f) => f.value === filters.sortBy)?.name) || FILTERS[server.type as keyof typeof FILTERS].find((f) => f.value === filter.sortBy)?.name) ||
'Unknown'; 'Unknown';
const sortOrderLabel = ORDER.find((o) => o.value === filters.sortOrder)?.name || 'Unknown'; const sortOrderLabel = ORDER.find((o) => o.value === filter.sortOrder)?.name || 'Unknown';
const handleItemSize = (e: number) => { const handleItemSize = (e: number) => {
if ( if (display === ListDisplayType.TABLE || display === ListDisplayType.TABLE_PAGINATED) {
page.display === ListDisplayType.TABLE || setTable({ data: { rowHeight: e }, key: pageKey });
page.display === ListDisplayType.TABLE_PAGINATED
) {
setTable({ rowHeight: e });
} else { } else {
setPage({ list: { ...page, grid: { ...page.grid, size: e } } }); setGrid({ data: { size: e }, key: pageKey });
} }
}; };
@ -135,10 +129,7 @@ export const AlbumArtistListHeaderFilters = ({
const handleFilterChange = useCallback( const handleFilterChange = useCallback(
async (filters: AlbumArtistListFilter) => { async (filters: AlbumArtistListFilter) => {
if ( if (display === ListDisplayType.TABLE || display === ListDisplayType.TABLE_PAGINATED) {
page.display === ListDisplayType.TABLE ||
page.display === ListDisplayType.TABLE_PAGINATED
) {
const dataSource: IDatasource = { const dataSource: IDatasource = {
getRows: async (params) => { getRows: async (params) => {
const limit = params.endRow - params.startRow; const limit = params.endRow - params.startRow;
@ -177,8 +168,8 @@ export const AlbumArtistListHeaderFilters = ({
tableRef.current?.api.purgeInfiniteCache(); tableRef.current?.api.purgeInfiniteCache();
tableRef.current?.api.ensureIndexVisible(0, 'top'); tableRef.current?.api.ensureIndexVisible(0, 'top');
if (page.display === ListDisplayType.TABLE_PAGINATED) { if (display === ListDisplayType.TABLE_PAGINATED) {
setPagination({ currentPage: 0 }); setTablePagination({ data: { currentPage: 0 }, key: pageKey });
} }
} else { } else {
gridRef.current?.scrollTo(0); gridRef.current?.scrollTo(0);
@ -193,7 +184,7 @@ export const AlbumArtistListHeaderFilters = ({
gridRef.current?.setItemData(data.items); gridRef.current?.setItemData(data.items);
} }
}, },
[page.display, tableRef, setPagination, server, queryClient, gridRef, fetch], [display, tableRef, server, queryClient, setTablePagination, pageKey, gridRef, fetch],
); );
const handleSetSortBy = useCallback( const handleSetSortBy = useCallback(
@ -205,13 +196,16 @@ export const AlbumArtistListHeaderFilters = ({
)?.defaultOrder; )?.defaultOrder;
const updatedFilters = setFilter({ const updatedFilters = setFilter({
sortBy: e.currentTarget.value as AlbumArtistListSort, data: {
sortOrder: sortOrder || SortOrder.ASC, sortBy: e.currentTarget.value as AlbumArtistListSort,
}); sortOrder: sortOrder || SortOrder.ASC,
},
key: pageKey,
}) as AlbumArtistListFilter;
handleFilterChange(updatedFilters); handleFilterChange(updatedFilters);
}, },
[handleFilterChange, server?.type, setFilter], [handleFilterChange, pageKey, server?.type, setFilter],
); );
const handleSetMusicFolder = useCallback( const handleSetMusicFolder = useCallback(
@ -219,37 +213,50 @@ export const AlbumArtistListHeaderFilters = ({
if (!e.currentTarget?.value) return; if (!e.currentTarget?.value) return;
let updatedFilters = null; let updatedFilters = null;
if (e.currentTarget.value === String(page.filter.musicFolderId)) { if (e.currentTarget.value === String(filter.musicFolderId)) {
updatedFilters = setFilter({ musicFolderId: undefined }); updatedFilters = setFilter({
data: { musicFolderId: undefined },
key: pageKey,
}) as AlbumArtistListFilter;
} else { } else {
updatedFilters = setFilter({ musicFolderId: e.currentTarget.value }); updatedFilters = setFilter({
data: { musicFolderId: e.currentTarget.value },
key: pageKey,
}) as AlbumArtistListFilter;
} }
handleFilterChange(updatedFilters); handleFilterChange(updatedFilters);
}, },
[handleFilterChange, page.filter.musicFolderId, setFilter], [filter.musicFolderId, handleFilterChange, setFilter, pageKey],
); );
const handleToggleSortOrder = useCallback(() => { const handleToggleSortOrder = useCallback(() => {
const newSortOrder = filters.sortOrder === SortOrder.ASC ? SortOrder.DESC : SortOrder.ASC; const newSortOrder = filter.sortOrder === SortOrder.ASC ? SortOrder.DESC : SortOrder.ASC;
const updatedFilters = setFilter({ sortOrder: newSortOrder }); const updatedFilters = setFilter({
data: { sortOrder: newSortOrder },
key: pageKey,
}) as AlbumArtistListFilter;
handleFilterChange(updatedFilters); handleFilterChange(updatedFilters);
}, [filters.sortOrder, handleFilterChange, setFilter]); }, [filter.sortOrder, handleFilterChange, pageKey, setFilter]);
const handleSetViewType = useCallback( const handleSetViewType = useCallback(
(e: MouseEvent<HTMLButtonElement>) => { (e: MouseEvent<HTMLButtonElement>) => {
if (!e.currentTarget?.value) return; if (!e.currentTarget?.value) return;
setPage({ list: { ...page, display: e.currentTarget.value as ListDisplayType } });
setDisplayType({ data: e.currentTarget.value as ListDisplayType, key: pageKey });
}, },
[page, setPage], [pageKey, setDisplayType],
); );
const handleTableColumns = (values: TableColumn[]) => { const handleTableColumns = (values: TableColumn[]) => {
const existingColumns = page.table.columns; const existingColumns = table.columns;
if (values.length === 0) { if (values.length === 0) {
return setTable({ return setTable({
columns: [], data: {
columns: [],
},
key: pageKey,
}); });
} }
@ -257,20 +264,20 @@ export const AlbumArtistListHeaderFilters = ({
if (values.length > existingColumns.length) { if (values.length > existingColumns.length) {
const newColumn = { column: values[values.length - 1], width: 100 }; const newColumn = { column: values[values.length - 1], width: 100 };
setTable({ columns: [...existingColumns, newColumn] }); setTable({ data: { columns: [...existingColumns, newColumn] }, key: pageKey });
} else { } else {
// If removing a column // If removing a column
const removed = existingColumns.filter((column) => !values.includes(column.column)); const removed = existingColumns.filter((column) => !values.includes(column.column));
const newColumns = existingColumns.filter((column) => !removed.includes(column)); const newColumns = existingColumns.filter((column) => !removed.includes(column));
setTable({ columns: newColumns }); setTable({ data: { columns: newColumns }, key: pageKey });
} }
return tableRef.current?.api.sizeColumnsToFit(); return tableRef.current?.api.sizeColumnsToFit();
}; };
const handleAutoFitColumns = (e: ChangeEvent<HTMLInputElement>) => { const handleAutoFitColumns = (e: ChangeEvent<HTMLInputElement>) => {
setTable({ autoFit: e.currentTarget.checked }); setTable({ data: { autoFit: e.currentTarget.checked }, key: pageKey });
if (e.currentTarget.checked) { if (e.currentTarget.checked) {
tableRef.current?.api.sizeColumnsToFit(); tableRef.current?.api.sizeColumnsToFit();
@ -279,8 +286,8 @@ export const AlbumArtistListHeaderFilters = ({
const handleRefresh = useCallback(() => { const handleRefresh = useCallback(() => {
queryClient.invalidateQueries(queryKeys.albumArtists.list(server?.id || '')); queryClient.invalidateQueries(queryKeys.albumArtists.list(server?.id || ''));
handleFilterChange(filters); handleFilterChange(filter);
}, [filters, handleFilterChange, queryClient, server?.id]); }, [filter, handleFilterChange, queryClient, server?.id]);
return ( return (
<Flex justify="space-between"> <Flex justify="space-between">
@ -301,14 +308,14 @@ export const AlbumArtistListHeaderFilters = ({
</Button> </Button>
</DropdownMenu.Target> </DropdownMenu.Target>
<DropdownMenu.Dropdown> <DropdownMenu.Dropdown>
{FILTERS[server?.type as keyof typeof FILTERS].map((filter) => ( {FILTERS[server?.type as keyof typeof FILTERS].map((f) => (
<DropdownMenu.Item <DropdownMenu.Item
key={`filter-${filter.name}`} key={`filter-${f.name}`}
$isActive={filter.value === filters.sortBy} $isActive={f.value === filter.sortBy}
value={filter.value} value={f.value}
onClick={handleSetSortBy} onClick={handleSetSortBy}
> >
{filter.name} {f.name}
</DropdownMenu.Item> </DropdownMenu.Item>
))} ))}
</DropdownMenu.Dropdown> </DropdownMenu.Dropdown>
@ -324,7 +331,7 @@ export const AlbumArtistListHeaderFilters = ({
sortOrderLabel sortOrderLabel
) : ( ) : (
<> <>
{filters.sortOrder === SortOrder.ASC ? ( {filter.sortOrder === SortOrder.ASC ? (
<RiSortAsc size={15} /> <RiSortAsc size={15} />
) : ( ) : (
<RiSortDesc size={15} /> <RiSortDesc size={15} />
@ -348,7 +355,7 @@ export const AlbumArtistListHeaderFilters = ({
{musicFoldersQuery.data?.map((folder) => ( {musicFoldersQuery.data?.map((folder) => (
<DropdownMenu.Item <DropdownMenu.Item
key={`musicFolder-${folder.id}`} key={`musicFolder-${folder.id}`}
$isActive={filters.musicFolderId === folder.id} $isActive={filter.musicFolderId === folder.id}
value={folder.id} value={folder.id}
onClick={handleSetMusicFolder} onClick={handleSetMusicFolder}
> >
@ -392,28 +399,28 @@ export const AlbumArtistListHeaderFilters = ({
<DropdownMenu.Dropdown> <DropdownMenu.Dropdown>
<DropdownMenu.Label>Display type</DropdownMenu.Label> <DropdownMenu.Label>Display type</DropdownMenu.Label>
<DropdownMenu.Item <DropdownMenu.Item
$isActive={page.display === ListDisplayType.CARD} $isActive={display === ListDisplayType.CARD}
value={ListDisplayType.CARD} value={ListDisplayType.CARD}
onClick={handleSetViewType} onClick={handleSetViewType}
> >
Card Card
</DropdownMenu.Item> </DropdownMenu.Item>
<DropdownMenu.Item <DropdownMenu.Item
$isActive={page.display === ListDisplayType.POSTER} $isActive={display === ListDisplayType.POSTER}
value={ListDisplayType.POSTER} value={ListDisplayType.POSTER}
onClick={handleSetViewType} onClick={handleSetViewType}
> >
Poster Poster
</DropdownMenu.Item> </DropdownMenu.Item>
<DropdownMenu.Item <DropdownMenu.Item
$isActive={page.display === ListDisplayType.TABLE} $isActive={display === ListDisplayType.TABLE}
value={ListDisplayType.TABLE} value={ListDisplayType.TABLE}
onClick={handleSetViewType} onClick={handleSetViewType}
> >
Table Table
</DropdownMenu.Item> </DropdownMenu.Item>
<DropdownMenu.Item <DropdownMenu.Item
$isActive={page.display === ListDisplayType.TABLE_PAGINATED} $isActive={display === ListDisplayType.TABLE_PAGINATED}
value={ListDisplayType.TABLE_PAGINATED} value={ListDisplayType.TABLE_PAGINATED}
onClick={handleSetViewType} onClick={handleSetViewType}
> >
@ -424,9 +431,9 @@ export const AlbumArtistListHeaderFilters = ({
<DropdownMenu.Item closeMenuOnClick={false}> <DropdownMenu.Item closeMenuOnClick={false}>
<Slider <Slider
defaultValue={ defaultValue={
page.display === ListDisplayType.CARD || page.display === ListDisplayType.POSTER display === ListDisplayType.CARD || display === ListDisplayType.POSTER
? page.grid.size ? grid?.size
: page.table.rowHeight : table.rowHeight
} }
label={null} label={null}
max={100} max={100}
@ -434,8 +441,7 @@ export const AlbumArtistListHeaderFilters = ({
onChangeEnd={handleItemSize} onChangeEnd={handleItemSize}
/> />
</DropdownMenu.Item> </DropdownMenu.Item>
{(page.display === ListDisplayType.TABLE || {(display === ListDisplayType.TABLE || display === ListDisplayType.TABLE_PAGINATED) && (
page.display === ListDisplayType.TABLE_PAGINATED) && (
<> <>
<DropdownMenu.Label>Table Columns</DropdownMenu.Label> <DropdownMenu.Label>Table Columns</DropdownMenu.Label>
<DropdownMenu.Item <DropdownMenu.Item
@ -447,14 +453,14 @@ export const AlbumArtistListHeaderFilters = ({
<MultiSelect <MultiSelect
clearable clearable
data={ALBUMARTIST_TABLE_COLUMNS} data={ALBUMARTIST_TABLE_COLUMNS}
defaultValue={page.table?.columns.map((column) => column.column)} defaultValue={table?.columns.map((column) => column.column)}
width={300} width={300}
onChange={handleTableColumns} onChange={handleTableColumns}
/> />
<Group position="apart"> <Group position="apart">
<Text>Auto Fit Columns</Text> <Text>Auto Fit Columns</Text>
<Switch <Switch
defaultChecked={page.table.autoFit} defaultChecked={table.autoFit}
onChange={handleAutoFitColumns} onChange={handleAutoFitColumns}
/> />
</Group> </Group>

31
src/renderer/features/artists/components/album-artist-list-header.tsx
View file

@ -20,11 +20,11 @@ import {
AlbumArtistListFilter, AlbumArtistListFilter,
useAlbumArtistListStore, useAlbumArtistListStore,
useCurrentServer, useCurrentServer,
useSetAlbumArtistFilters, useListStoreActions,
useSetAlbumArtistTablePagination,
} from '/@/renderer/store'; } from '/@/renderer/store';
import { ListDisplayType } from '/@/renderer/types'; import { ListDisplayType } from '/@/renderer/types';
import { AlbumArtistListHeaderFilters } from '/@/renderer/features/artists/components/album-artist-list-header-filters'; import { AlbumArtistListHeaderFilters } from '/@/renderer/features/artists/components/album-artist-list-header-filters';
import { useAlbumArtistListContext } from '/@/renderer/features/artists/context/album-artist-list-context';
interface AlbumArtistListHeaderProps { interface AlbumArtistListHeaderProps {
gridRef: MutableRefObject<VirtualInfiniteGridRef | null>; gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
@ -39,12 +39,11 @@ export const AlbumArtistListHeader = ({
}: AlbumArtistListHeaderProps) => { }: AlbumArtistListHeaderProps) => {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const server = useCurrentServer(); const server = useCurrentServer();
const setFilter = useSetAlbumArtistFilters(); const { pageKey } = useAlbumArtistListContext();
const page = useAlbumArtistListStore(); const { display, filter } = useAlbumArtistListStore();
const { setFilter, setTablePagination } = useListStoreActions();
const cq = useContainerQuery(); const cq = useContainerQuery();
const setPagination = useSetAlbumArtistTablePagination();
const fetch = useCallback( const fetch = useCallback(
async (startIndex: number, limit: number, filters: AlbumArtistListFilter) => { async (startIndex: number, limit: number, filters: AlbumArtistListFilter) => {
const queryKey = queryKeys.albumArtists.list(server?.id || '', { const queryKey = queryKeys.albumArtists.list(server?.id || '', {
@ -75,10 +74,7 @@ export const AlbumArtistListHeader = ({
const handleFilterChange = useCallback( const handleFilterChange = useCallback(
async (filters: AlbumArtistListFilter) => { async (filters: AlbumArtistListFilter) => {
if ( if (display === ListDisplayType.TABLE || display === ListDisplayType.TABLE_PAGINATED) {
page.display === ListDisplayType.TABLE ||
page.display === ListDisplayType.TABLE_PAGINATED
) {
const dataSource: IDatasource = { const dataSource: IDatasource = {
getRows: async (params) => { getRows: async (params) => {
const limit = params.endRow - params.startRow; const limit = params.endRow - params.startRow;
@ -117,8 +113,8 @@ export const AlbumArtistListHeader = ({
tableRef.current?.api.purgeInfiniteCache(); tableRef.current?.api.purgeInfiniteCache();
tableRef.current?.api.ensureIndexVisible(0, 'top'); tableRef.current?.api.ensureIndexVisible(0, 'top');
if (page.display === ListDisplayType.TABLE_PAGINATED) { if (display === ListDisplayType.TABLE_PAGINATED) {
setPagination({ currentPage: 0 }); setTablePagination({ data: { currentPage: 0 }, key: pageKey });
} }
} else { } else {
gridRef.current?.scrollTo(0); gridRef.current?.scrollTo(0);
@ -133,13 +129,16 @@ export const AlbumArtistListHeader = ({
gridRef.current?.setItemData(data.items); gridRef.current?.setItemData(data.items);
} }
}, },
[page.display, tableRef, setPagination, server, queryClient, gridRef, fetch], [display, tableRef, server, queryClient, setTablePagination, pageKey, gridRef, fetch],
); );
const handleSearch = debounce((e: ChangeEvent<HTMLInputElement>) => { const handleSearch = debounce((e: ChangeEvent<HTMLInputElement>) => {
const previousSearchTerm = page.filter.searchTerm; const previousSearchTerm = filter.searchTerm;
const searchTerm = e.target.value === '' ? undefined : e.target.value; const searchTerm = e.target.value === '' ? undefined : e.target.value;
const updatedFilters = setFilter({ searchTerm }); const updatedFilters = setFilter({
data: { searchTerm },
key: pageKey,
}) as AlbumArtistListFilter;
if (previousSearchTerm !== searchTerm) handleFilterChange(updatedFilters); if (previousSearchTerm !== searchTerm) handleFilterChange(updatedFilters);
}, 500); }, 500);
@ -166,7 +165,7 @@ export const AlbumArtistListHeader = ({
</LibraryHeaderBar> </LibraryHeaderBar>
<Group> <Group>
<SearchInput <SearchInput
defaultValue={page.filter.searchTerm} defaultValue={filter.searchTerm}
openedWidth={cq.isMd ? 250 : cq.isSm ? 200 : 150} openedWidth={cq.isMd ? 250 : cq.isSm ? 200 : 150}
onChange={handleSearch} onChange={handleSearch}
/> />

11
src/renderer/features/artists/context/album-artist-detail-song-list-context.tsx Normal file
View file

@ -0,0 +1,11 @@
import { createContext, useContext } from 'react';
import { ListKey } from '/@/renderer/store';
export const AlbumArtistDetailSongListContext = createContext<{ id?: string; pageKey: ListKey }>({
pageKey: 'albumArtist',
});
export const useAlbumArtistDetailSongListContext = () => {
const ctxValue = useContext(AlbumArtistDetailSongListContext);
return ctxValue;
};

11
src/renderer/features/artists/context/album-artist-list-context.tsx Normal file
View file

@ -0,0 +1,11 @@
import { createContext, useContext } from 'react';
import { ListKey } from '/@/renderer/store';
export const AlbumArtistListContext = createContext<{ id?: string; pageKey: ListKey }>({
pageKey: 'albumArtist',
});
export const useAlbumArtistListContext = () => {
const ctxValue = useContext(AlbumArtistListContext);
return ctxValue;
};

83
src/renderer/features/artists/routes/album-artist-detail-discography-route.tsx
View file

@ -1,83 +0,0 @@
import { useParams } from 'react-router';
import { AlbumListSort, SortOrder, SongListSort } from '/@/renderer/api/types';
import { VirtualGridContainer } from '/@/renderer/components';
import { useAlbumList } from '/@/renderer/features/albums';
import { AnimatedPage } from '/@/renderer/features/shared';
import { useSongList } from '/@/renderer/features/songs';
// import { useSongListStore } from '/@/renderer/store';
// import { usePlayQueueAdd } from '/@/renderer/features/player';
// import { Play } from '/@/renderer/types';
// import { useAlbumArtistDetail } from '/@/renderer/features/artists/queries/album-artist-detail-query';
const AlbumArtistDetailDiscographyRoute = () => {
const { albumArtistId } = useParams() as { albumArtistId: string };
// const albumArtistQuery = useAlbumArtistDetail({ id: albumArtistId });
const albumsQuery = useAlbumList({
jfParams: { artistIds: albumArtistId },
ndParams: { artist_id: albumArtistId },
sortBy: AlbumListSort.YEAR,
sortOrder: SortOrder.DESC,
startIndex: 0,
});
const songsQuery = useSongList(
{
albumIds: albumsQuery.data?.items?.map((album) => album.id),
sortBy: SongListSort.ALBUM,
sortOrder: SortOrder.ASC,
startIndex: 0,
},
{
enabled: !albumsQuery.isLoading,
},
);
// const page = useSongListStore();
// const handlePlayQueueAdd = usePlayQueueAdd();
if (albumsQuery.isLoading || songsQuery.isLoading) return null;
// const handlePlay = (play: Play, data: any[]) => {
// handlePlayQueueAdd?.({
// byData: data,
// play,
// });
// };
return (
<AnimatedPage>
<VirtualGridContainer>
{/* <AlbumArtistDiscographyHeader />
<PageHeader>
<Group
position="apart"
w="100%"
>
{albumArtistQuery?.data?.name || ''}
<Group spacing="xs">
<Button
compact
radius="xl"
variant="subtle"
>
<RiListUnordered size="1.5em" />
</Button>
<Button
compact
radius="xl"
variant="subtle"
>
<RiLayoutGridFill size="1.5em" />
</Button>
</Group>
</Group>
</PageHeader> *
<AlbumArtistDiscographyDetailList /> */}
</VirtualGridContainer>
</AnimatedPage>
);
};
export default AlbumArtistDetailDiscographyRoute;

62
src/renderer/features/artists/routes/album-artist-detail-song-list-route.tsx
View file

@ -1,62 +0,0 @@
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import { useSetState } from '@mantine/hooks';
import { useRef } from 'react';
import { useParams } from 'react-router';
import { SongListSort, SortOrder } from '/@/renderer/api/types';
import { AlbumArtistDetailSongListContent } from '/@/renderer/features/artists/components/album-artist-detail-song-list-content';
import { AlbumArtistDetailSongListHeader } from '/@/renderer/features/artists/components/album-artist-detail-song-list-header';
import { useAlbumArtistDetail } from '/@/renderer/features/artists/queries/album-artist-detail-query';
import { AnimatedPage } from '/@/renderer/features/shared';
import { useSongList } from '/@/renderer/features/songs';
import { SongListFilter } from '/@/renderer/store';
const AlbumArtistDetailSongListRoute = () => {
const tableRef = useRef<AgGridReactType | null>(null);
const { albumArtistId } = useParams() as { albumArtistId: string };
const detailQuery = useAlbumArtistDetail({ id: albumArtistId });
const [filter, setFilter] = useSetState<SongListFilter>({
artistIds: [albumArtistId],
sortBy: SongListSort.ALBUM,
sortOrder: SortOrder.ASC,
});
const itemCountCheck = useSongList(
{
limit: 1,
startIndex: 0,
...filter,
},
{
cacheTime: 1000 * 60 * 60 * 2,
staleTime: 1000 * 60 * 60 * 2,
},
);
const itemCount =
itemCountCheck.data?.totalRecordCount === null
? undefined
: itemCountCheck.data?.totalRecordCount;
if (detailQuery.isLoading) return null;
return (
<AnimatedPage>
<AlbumArtistDetailSongListHeader
filter={filter}
itemCount={itemCount}
setFilter={setFilter}
tableRef={tableRef}
title={detailQuery?.data?.name || 'Unknown'}
/>
<AlbumArtistDetailSongListContent
filter={filter}
itemCount={itemCount}
tableRef={tableRef}
/>
</AnimatedPage>
);
};
export default AlbumArtistDetailSongListRoute;

34
src/renderer/features/artists/routes/album-artist-list-route.tsx
View file

@ -5,23 +5,25 @@ import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/li
import { useRef } from 'react'; import { useRef } from 'react';
import { AlbumArtistListContent } from '/@/renderer/features/artists/components/album-artist-list-content'; import { AlbumArtistListContent } from '/@/renderer/features/artists/components/album-artist-list-content';
import { useAlbumArtistList } from '/@/renderer/features/artists/queries/album-artist-list-query'; import { useAlbumArtistList } from '/@/renderer/features/artists/queries/album-artist-list-query';
import { useAlbumArtistListStore } from '/@/renderer/store'; import { generatePageKey, useAlbumArtistListFilter } from '/@/renderer/store';
import { AlbumArtistListContext } from '/@/renderer/features/artists/context/album-artist-list-context';
const AlbumArtistListRoute = () => { const AlbumArtistListRoute = () => {
const gridRef = useRef<VirtualInfiniteGridRef | null>(null); const gridRef = useRef<VirtualInfiniteGridRef | null>(null);
const tableRef = useRef<AgGridReactType | null>(null); const tableRef = useRef<AgGridReactType | null>(null);
const page = useAlbumArtistListStore(); const pageKey = generatePageKey('albumArtist', undefined);
const filters = page.filter;
const albumArtistListFilter = useAlbumArtistListFilter({ id: undefined, key: pageKey });
const itemCountCheck = useAlbumArtistList( const itemCountCheck = useAlbumArtistList(
{ {
limit: 1, limit: 1,
startIndex: 0, startIndex: 0,
...filters, ...albumArtistListFilter,
}, },
{ {
cacheTime: 1000 * 60 * 60 * 2, cacheTime: 1000 * 60,
staleTime: 1000 * 60 * 60 * 2, staleTime: 1000 * 60,
}, },
); );
@ -32,15 +34,17 @@ const AlbumArtistListRoute = () => {
return ( return (
<AnimatedPage> <AnimatedPage>
<AlbumArtistListHeader <AlbumArtistListContext.Provider value={{ id: undefined, pageKey }}>
gridRef={gridRef} <AlbumArtistListHeader
itemCount={itemCount} gridRef={gridRef}
tableRef={tableRef} itemCount={itemCount}
/> tableRef={tableRef}
<AlbumArtistListContent />
gridRef={gridRef} <AlbumArtistListContent
tableRef={tableRef} gridRef={gridRef}
/> tableRef={tableRef}
/>
</AlbumArtistListContext.Provider>
</AnimatedPage> </AnimatedPage>
); );
}; };

5
src/renderer/store/list.store.ts
View file

@ -476,4 +476,9 @@ export const useAlbumListFilter = (args: { id?: string; key?: string }) =>
return state._actions.getFilter({ id: args.id, key: args.key }) as AlbumListFilter; return state._actions.getFilter({ id: args.id, key: args.key }) as AlbumListFilter;
}, shallow); }, shallow);
export const useAlbumArtistListFilter = (args: { id?: string; key?: string }) =>
useListStore((state) => {
return state._actions.getFilter({ id: args.id, key: args.key }) as AlbumArtistListFilter;
}, shallow);
export const useListDetail = (key: string) => useListStore((state) => state.detail[key], shallow); export const useListDetail = (key: string) => useListStore((state) => state.detail[key], shallow);