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

Begin normalizing list stores

Browse source
This commit is contained in:
jeffvli 2023-03-05 18:28:26 -08:00
parent 918b77eebb
commit ae292e3a5f
22 changed files with 1057 additions and 764 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/renderer/api/navidrome.api.ts
View file

@ -281,6 +281,7 @@ const getAlbumList = async (args: AlbumListArgs): Promise<NDAlbumList> => {
_order: sortOrderMap.navidrome[query.sortOrder], _order: sortOrderMap.navidrome[query.sortOrder],
_sort: albumListSortMap.navidrome[query.sortBy], _sort: albumListSortMap.navidrome[query.sortBy],
_start: query.startIndex, _start: query.startIndex,
artist_id: query.artistIds?.[0],
name: query.searchTerm, name: query.searchTerm,
...query.ndParams, ...query.ndParams,
}; };

1
src/renderer/api/types.ts
View file

@ -343,6 +343,7 @@ export enum AlbumListSort {
} }
export type AlbumListQuery = { export type AlbumListQuery = {
artistIds?: string[];
jfParams?: { jfParams?: {
albumArtistIds?: string; albumArtistIds?: string;
artistIds?: string; artistIds?: string;

17
src/renderer/components/virtual-table/table-pagination.tsx
View file

@ -12,21 +12,21 @@ import { Popover } from '/@/renderer/components/popover';
import { Text } from '/@/renderer/components/text'; import { Text } from '/@/renderer/components/text';
import { useContainerQuery } from '/@/renderer/hooks'; import { useContainerQuery } from '/@/renderer/hooks';
import { TablePagination as TablePaginationType } from '/@/renderer/types'; import { TablePagination as TablePaginationType } from '/@/renderer/types';
import { ListKey } from '/@/renderer/store';
interface TablePaginationProps { interface TablePaginationProps {
id?: string; pageKey: ListKey;
pagination: TablePaginationType; pagination: TablePaginationType;
setIdPagination?: (id: string, pagination: Partial<TablePaginationType>) => void; setIdPagination?: (id: string, pagination: Partial<TablePaginationType>) => void;
setPagination?: (pagination: Partial<TablePaginationType>) => void; setPagination?: (args: { data: Partial<TablePaginationType>; key: ListKey }) => void;
tableRef: MutableRefObject<AgGridReactType | null>; tableRef: MutableRefObject<AgGridReactType | null>;
} }
export const TablePagination = ({ export const TablePagination = ({
id, pageKey,
tableRef, tableRef,
pagination, pagination,
setPagination, setPagination,
setIdPagination,
}: TablePaginationProps) => { }: TablePaginationProps) => {
const [isGoToPageOpen, handlers] = useDisclosure(false); const [isGoToPageOpen, handlers] = useDisclosure(false);
const containerQuery = useContainerQuery(); const containerQuery = useContainerQuery();
@ -40,8 +40,7 @@ export const TablePagination = ({
const handlePagination = (index: number) => { const handlePagination = (index: number) => {
const newPage = index - 1; const newPage = index - 1;
tableRef.current?.api.paginationGoToPage(newPage); tableRef.current?.api.paginationGoToPage(newPage);
setPagination?.({ currentPage: newPage }); setPagination?.({ data: { currentPage: newPage }, key: pageKey });
setIdPagination?.(id || '', { currentPage: newPage });
}; };
const handleGoSubmit = goToForm.onSubmit((values) => { const handleGoSubmit = goToForm.onSubmit((values) => {
@ -52,8 +51,7 @@ export const TablePagination = ({
const newPage = values.pageNumber - 1; const newPage = values.pageNumber - 1;
tableRef.current?.api.paginationGoToPage(newPage); tableRef.current?.api.paginationGoToPage(newPage);
setPagination?.({ currentPage: newPage }); setPagination?.({ data: { currentPage: newPage }, key: pageKey });
setIdPagination?.(id || '', { currentPage: newPage });
}); });
const currentPageStartIndex = pagination.currentPage * pagination.itemsPerPage + 1; const currentPageStartIndex = pagination.currentPage * pagination.itemsPerPage + 1;
@ -103,7 +101,6 @@ export const TablePagination = ({
trapFocus trapFocus
opened={isGoToPageOpen} opened={isGoToPageOpen}
position="bottom-start" position="bottom-start"
transition="fade"
onClose={() => handlers.close()} onClose={() => handlers.close()}
> >
<Popover.Target> <Popover.Target>
@ -142,10 +139,10 @@ export const TablePagination = ({
noWrap noWrap
$hideDividers={!containerQuery.isSm} $hideDividers={!containerQuery.isSm}
boundaries={1} boundaries={1}
page={pagination.currentPage + 1}
radius="sm" radius="sm"
siblings={containerQuery.isMd ? 2 : containerQuery.isSm ? 1 : 0} siblings={containerQuery.isMd ? 2 : containerQuery.isSm ? 1 : 0}
total={pagination.totalPages - 1} total={pagination.totalPages - 1}
value={pagination.currentPage + 1}
onChange={handlePagination} onChange={handlePagination}
/> />
</Group> </Group>

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

@ -19,13 +19,11 @@ import { Album, AlbumListQuery, AlbumListSort, LibraryItem } from '/@/renderer/a
import { useQueryClient } from '@tanstack/react-query'; import { useQueryClient } from '@tanstack/react-query';
import { import {
useCurrentServer, useCurrentServer,
useSetAlbumStore,
useAlbumListStore, useAlbumListStore,
useAlbumTablePagination,
useSetAlbumTable,
useSetAlbumTablePagination,
useAlbumListItemData, useAlbumListItemData,
AlbumListFilter, AlbumListFilter,
useListStoreActions,
useAlbumListFilter,
} 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';
import { import {
@ -43,6 +41,7 @@ import { ALBUM_CONTEXT_MENU_ITEMS } from '/@/renderer/features/context-menu/cont
import { generatePath, useNavigate } from 'react-router'; import { generatePath, useNavigate } from 'react-router';
import { usePlayQueueAdd } from '/@/renderer/features/player'; import { usePlayQueueAdd } from '/@/renderer/features/player';
import { useCreateFavorite, useDeleteFavorite } from '/@/renderer/features/shared'; import { useCreateFavorite, useDeleteFavorite } from '/@/renderer/features/shared';
import { useAlbumListContext } from '/@/renderer/features/albums/context/album-list-context';
interface AlbumListContentProps { interface AlbumListContentProps {
customFilters?: Partial<AlbumListFilter>; customFilters?: Partial<AlbumListFilter>;
@ -60,23 +59,18 @@ export const AlbumListContent = ({
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const navigate = useNavigate(); const navigate = useNavigate();
const server = useCurrentServer(); const server = useCurrentServer();
const page = useAlbumListStore();
const setPage = useSetAlbumStore();
const handlePlayQueueAdd = usePlayQueueAdd(); const handlePlayQueueAdd = usePlayQueueAdd();
const { itemData, setItemData } = useAlbumListItemData(); const { itemData, setItemData } = useAlbumListItemData();
const [localItemData, setLocalItemData] = useState<any[]>([]); const [localItemData, setLocalItemData] = useState<any[]>([]);
const pagination = useAlbumTablePagination(); const { id, pageKey } = useAlbumListContext();
const setPagination = useSetAlbumTablePagination(); const filter = useAlbumListFilter({ id, key: pageKey });
const setTable = useSetAlbumTable(); const { setTable, setTablePagination, setGrid } = useListStoreActions();
const { table, grid, display } = useAlbumListStore();
const isPaginationEnabled = display === ListDisplayType.TABLE_PAGINATED;
const isPaginationEnabled = page.display === ListDisplayType.TABLE_PAGINATED; const columnDefs: ColDef[] = useMemo(() => getColumnDefs(table.columns), [table.columns]);
const columnDefs: ColDef[] = useMemo(
() => getColumnDefs(page.table.columns),
[page.table.columns],
);
const onTableReady = useCallback( const onTableReady = useCallback(
(params: GridReadyEvent) => { (params: GridReadyEvent) => {
@ -88,18 +82,20 @@ export const AlbumListContent = ({
const query: AlbumListQuery = { const query: AlbumListQuery = {
limit, limit,
startIndex, startIndex,
...page.filter, ...filter,
...customFilters, ...customFilters,
jfParams: { jfParams: {
...page.filter.jfParams, ...filter.jfParams,
...customFilters?.jfParams, ...customFilters?.jfParams,
}, },
ndParams: { ndParams: {
...page.filter.ndParams, ...filter.ndParams,
...customFilters?.ndParams, ...customFilters?.ndParams,
}, },
}; };
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(
@ -121,10 +117,10 @@ export const AlbumListContent = ({
params.api.setDatasource(dataSource); params.api.setDatasource(dataSource);
if (!customFilters) { if (!customFilters) {
params.api.ensureIndexVisible(page.table.scrollOffset || 0, 'top'); params.api.ensureIndexVisible(table.scrollOffset || 0, 'top');
} }
}, },
[customFilters, page.filter, page.table.scrollOffset, queryClient, server], [customFilters, filter, table.scrollOffset, queryClient, server],
); );
const onTablePaginationChanged = useCallback( const onTablePaginationChanged = useCallback(
@ -133,19 +129,28 @@ export const AlbumListContent = ({
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,
setTablePagination,
pageKey,
table.pagination.currentPage,
table.pagination.itemsPerPage,
],
); );
const handleTableColumnChange = useCallback(() => { const handleTableColumnChange = useCallback(() => {
@ -154,7 +159,7 @@ export const AlbumListContent = ({
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);
@ -162,22 +167,22 @@ export const AlbumListContent = ({
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) => {
if (customFilters) return; if (customFilters) return;
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(
@ -185,14 +190,14 @@ export const AlbumListContent = ({
const query: AlbumListQuery = { const query: AlbumListQuery = {
limit: take, limit: take,
startIndex: skip, startIndex: skip,
...page.filter, ...filter,
...customFilters, ...customFilters,
jfParams: { jfParams: {
...page.filter.jfParams, ...filter.jfParams,
...customFilters?.jfParams, ...customFilters?.jfParams,
}, },
ndParams: { ndParams: {
...page.filter.ndParams, ...filter.ndParams,
...customFilters?.ndParams, ...customFilters?.ndParams,
}, },
}; };
@ -209,29 +214,21 @@ export const AlbumListContent = ({
return api.normalize.albumList(albums, server); return api.normalize.albumList(albums, server);
}, },
[customFilters, page.filter, queryClient, server], [customFilters, filter, queryClient, server],
); );
const handleGridScroll = useCallback( const handleGridScroll = useCallback(
(e: ListOnScrollProps) => { (e: ListOnScrollProps) => {
if (customFilters) return; if (customFilters) return;
setPage({ setGrid({ data: { scrollOffset: e.scrollOffset }, key: pageKey });
list: {
...page,
grid: {
...page.grid,
scrollOffset: e.scrollOffset,
},
},
});
}, },
[customFilters, page, setPage], [customFilters, pageKey, setGrid],
); );
const cardRows = useMemo(() => { const cardRows = useMemo(() => {
const rows: CardRow<Album>[] = [ALBUM_CARD_ROWS.name]; const rows: CardRow<Album>[] = [ALBUM_CARD_ROWS.name];
switch (page.filter.sortBy) { switch (filter.sortBy) {
case AlbumListSort.ALBUM_ARTIST: case AlbumListSort.ALBUM_ARTIST:
rows.push(ALBUM_CARD_ROWS.albumArtists); rows.push(ALBUM_CARD_ROWS.albumArtists);
rows.push(ALBUM_CARD_ROWS.releaseYear); rows.push(ALBUM_CARD_ROWS.releaseYear);
@ -289,7 +286,7 @@ export const AlbumListContent = ({
} }
return rows; return rows;
}, [page.filter.sortBy]); }, [filter.sortBy]);
const handleContextMenu = useHandleTableContextMenu(LibraryItem.ALBUM, ALBUM_CONTEXT_MENU_ITEMS); const handleContextMenu = useHandleTableContextMenu(LibraryItem.ALBUM, ALBUM_CONTEXT_MENU_ITEMS);
@ -326,24 +323,24 @@ export const AlbumListContent = ({
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={`album-list-${server?.id}-${page.display}`} key={`album-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}
handleFavorite={handleFavorite} handleFavorite={handleFavorite}
handlePlayQueueAdd={handlePlayQueueAdd} handlePlayQueueAdd={handlePlayQueueAdd}
height={height} height={height}
initialScrollOffset={customFilters ? 0 : page?.grid.scrollOffset || 0} initialScrollOffset={customFilters ? 0 : grid?.scrollOffset || 0}
itemCount={itemCount || 0} itemCount={itemCount || 0}
itemData={customFilters ? localItemData : itemData} itemData={customFilters ? localItemData : itemData}
itemGap={20} itemGap={20}
itemSize={150 + page.grid?.size} itemSize={150 + (grid?.size || 0)}
itemType={LibraryItem.ALBUM} itemType={LibraryItem.ALBUM}
loading={itemCount === undefined || itemCount === null} loading={itemCount === undefined || itemCount === null}
minimumBatchSize={40} minimumBatchSize={40}
@ -362,20 +359,20 @@ export const AlbumListContent = ({
<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}
blockLoadDebounceMillis={200} blockLoadDebounceMillis={200}
columnDefs={columnDefs} columnDefs={columnDefs}
getRowId={(data) => data.data.id} getRowId={(data) => data.data.id}
infiniteInitialRowCount={itemCount || 100} infiniteInitialRowCount={itemCount || 100}
pagination={isPaginationEnabled} pagination={isPaginationEnabled}
paginationAutoPageSize={isPaginationEnabled} paginationAutoPageSize={isPaginationEnabled}
paginationPageSize={page.table.pagination.itemsPerPage || 100} paginationPageSize={table.pagination.itemsPerPage || 100}
rowBuffer={20} rowBuffer={20}
rowHeight={page.table.rowHeight || 40} rowHeight={table.rowHeight || 40}
rowModelType="infinite" rowModelType="infinite"
onBodyScrollEnd={handleTableScroll} onBodyScrollEnd={handleTableScroll}
onCellContextMenu={handleContextMenu} onCellContextMenu={handleContextMenu}
@ -393,10 +390,11 @@ export const AlbumListContent = ({
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}
/> />
)} )}

154
src/renderer/features/albums/components/album-list-header-filters.tsx
View file

@ -29,21 +29,19 @@ import {
Text, Text,
VirtualInfiniteGridRef, VirtualInfiniteGridRef,
} from '/@/renderer/components'; } from '/@/renderer/components';
import { JellyfinAlbumFilters } from '/@/renderer/features/albums/components/jellyfin-album-filters';
import { NavidromeAlbumFilters } from '/@/renderer/features/albums/components/navidrome-album-filters';
import { useContainerQuery } from '/@/renderer/hooks'; import { useContainerQuery } from '/@/renderer/hooks';
import { import {
AlbumListFilter, AlbumListFilter,
useAlbumListStore, useAlbumListStore,
useCurrentServer, useCurrentServer,
useSetAlbumFilters, useListStoreActions,
useSetAlbumStore,
useSetAlbumTable,
useSetAlbumTablePagination,
} from '/@/renderer/store'; } from '/@/renderer/store';
import { ServerType, Play, ListDisplayType, TableColumn } from '/@/renderer/types'; import { ServerType, Play, ListDisplayType, TableColumn } from '/@/renderer/types';
import { useMusicFolders } from '/@/renderer/features/shared'; import { useMusicFolders } from '/@/renderer/features/shared';
import { usePlayQueueAdd } from '/@/renderer/features/player'; import { usePlayQueueAdd } from '/@/renderer/features/player';
import { JellyfinAlbumFilters } from '/@/renderer/features/albums/components/jellyfin-album-filters';
import { NavidromeAlbumFilters } from '/@/renderer/features/albums/components/navidrome-album-filters';
import { useAlbumListContext } from '/@/renderer/features/albums/context/album-list-context';
const FILTERS = { const FILTERS = {
jellyfin: [ jellyfin: [
@ -94,25 +92,21 @@ export const AlbumListHeaderFilters = ({
itemCount, itemCount,
}: AlbumListHeaderFiltersProps) => { }: AlbumListHeaderFiltersProps) => {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const { id, pageKey } = useAlbumListContext();
const server = useCurrentServer(); const server = useCurrentServer();
const { setFilter, setTablePagination, setTable, setGrid, setDisplayType, setTableColumns } =
const setPage = useSetAlbumStore(); useListStoreActions();
const setFilter = useSetAlbumFilters(); const { display, filter, table, grid } = useAlbumListStore();
const page = useAlbumListStore();
const filters = page.filter;
const cq = useContainerQuery(); const cq = useContainerQuery();
const musicFoldersQuery = useMusicFolders(); const musicFoldersQuery = useMusicFolders();
const setPagination = useSetAlbumTablePagination();
const setTable = useSetAlbumTable();
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 fetch = useCallback( const fetch = useCallback(
async (skip: number, take: number, filters: AlbumListFilter) => { async (skip: number, take: number, filters: AlbumListFilter) => {
@ -151,10 +145,7 @@ export const AlbumListHeaderFilters = ({
const handleFilterChange = useCallback( const handleFilterChange = useCallback(
async (filters: AlbumListFilter) => { async (filters: AlbumListFilter) => {
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;
@ -197,8 +188,8 @@ export const AlbumListHeaderFilters = ({
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: 'album' });
} }
} else { } else {
gridRef.current?.scrollTo(0); gridRef.current?.scrollTo(0);
@ -213,7 +204,7 @@ export const AlbumListHeaderFilters = ({
gridRef.current?.setItemData(data.items); gridRef.current?.setItemData(data.items);
} }
}, },
[page.display, tableRef, customFilters, server, queryClient, setPagination, gridRef, fetch], [display, tableRef, customFilters, server, queryClient, setTablePagination, gridRef, fetch],
); );
const handleOpenFiltersModal = () => { const handleOpenFiltersModal = () => {
@ -224,11 +215,15 @@ export const AlbumListHeaderFilters = ({
<NavidromeAlbumFilters <NavidromeAlbumFilters
disableArtistFilter={!!customFilters} disableArtistFilter={!!customFilters}
handleFilterChange={handleFilterChange} handleFilterChange={handleFilterChange}
id={id}
pageKey={pageKey}
/> />
) : ( ) : (
<JellyfinAlbumFilters <JellyfinAlbumFilters
disableArtistFilter={!!customFilters} disableArtistFilter={!!customFilters}
handleFilterChange={handleFilterChange} handleFilterChange={handleFilterChange}
id={id}
pageKey={pageKey}
/> />
)} )}
</> </>
@ -239,8 +234,8 @@ export const AlbumListHeaderFilters = ({
const handleRefresh = useCallback(() => { const handleRefresh = useCallback(() => {
queryClient.invalidateQueries(queryKeys.albums.list(server?.id || '')); queryClient.invalidateQueries(queryKeys.albums.list(server?.id || ''));
handleFilterChange(filters); handleFilterChange(filter);
}, [filters, handleFilterChange, queryClient, server?.id]); }, [filter, handleFilterChange, queryClient, server?.id]);
const handleSetSortBy = useCallback( const handleSetSortBy = useCallback(
(e: MouseEvent<HTMLButtonElement>) => { (e: MouseEvent<HTMLButtonElement>) => {
@ -251,9 +246,12 @@ export const AlbumListHeaderFilters = ({
)?.defaultOrder; )?.defaultOrder;
const updatedFilters = setFilter({ const updatedFilters = setFilter({
sortBy: e.currentTarget.value as AlbumListSort, data: {
sortOrder: sortOrder || SortOrder.ASC, sortBy: e.currentTarget.value as AlbumListSort,
}); sortOrder: sortOrder || SortOrder.ASC,
},
key: 'album',
}) as AlbumListFilter;
handleFilterChange(updatedFilters); handleFilterChange(updatedFilters);
}, },
@ -265,22 +263,31 @@ export const AlbumListHeaderFilters = ({
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: 'album',
}) as AlbumListFilter;
} else { } else {
updatedFilters = setFilter({ musicFolderId: e.currentTarget.value }); updatedFilters = setFilter({
data: { musicFolderId: e.currentTarget.value },
key: 'album',
}) as AlbumListFilter;
} }
handleFilterChange(updatedFilters); handleFilterChange(updatedFilters);
}, },
[handleFilterChange, page.filter.musicFolderId, setFilter], [handleFilterChange, filter.musicFolderId, setFilter],
); );
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: 'album',
}) as AlbumListFilter;
handleFilterChange(updatedFilters); handleFilterChange(updatedFilters);
}, [filters.sortOrder, handleFilterChange, setFilter]); }, [filter.sortOrder, handleFilterChange, setFilter]);
const handlePlayQueueAdd = usePlayQueueAdd(); const handlePlayQueueAdd = usePlayQueueAdd();
@ -289,14 +296,14 @@ export const AlbumListHeaderFilters = ({
const query = { const query = {
startIndex: 0, startIndex: 0,
...filters, ...filter,
...customFilters, ...customFilters,
jfParams: { jfParams: {
...filters.jfParams, ...filter.jfParams,
...customFilters?.jfParams, ...customFilters?.jfParams,
}, },
ndParams: { ndParams: {
...filters.ndParams, ...filter.ndParams,
...customFilters?.ndParams, ...customFilters?.ndParams,
}, },
}; };
@ -320,30 +327,28 @@ export const AlbumListHeaderFilters = ({
}; };
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: 'album' });
page.display === ListDisplayType.TABLE_PAGINATED
) {
setTable({ rowHeight: e });
} else { } else {
setPage({ list: { ...page, grid: { ...page.grid, size: e } } }); setGrid({ data: { size: e }, key: 'album' });
} }
}; };
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: 'album' });
}, },
[page, setPage], [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 setTableColumns({
columns: [], data: [],
key: 'album',
}); });
} }
@ -351,20 +356,20 @@ export const AlbumListHeaderFilters = ({
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] }); setTableColumns({ data: [...existingColumns, newColumn], key: 'album' });
} 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 }); setTableColumns({ data: newColumns, key: 'album' });
} }
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: 'album' });
if (e.currentTarget.checked) { if (e.currentTarget.checked) {
tableRef.current?.api.sizeColumnsToFit(); tableRef.current?.api.sizeColumnsToFit();
@ -374,16 +379,16 @@ export const AlbumListHeaderFilters = ({
const isFilterApplied = useMemo(() => { const isFilterApplied = useMemo(() => {
const isNavidromeFilterApplied = const isNavidromeFilterApplied =
server?.type === ServerType.NAVIDROME && server?.type === ServerType.NAVIDROME &&
page.filter.ndParams && filter.ndParams &&
Object.values(page.filter.ndParams).some((value) => value !== undefined); Object.values(filter.ndParams).some((value) => value !== undefined);
const isJellyfinFilterApplied = const isJellyfinFilterApplied =
server?.type === ServerType.JELLYFIN && server?.type === ServerType.JELLYFIN &&
page.filter.jfParams && filter.jfParams &&
Object.values(page.filter.jfParams).some((value) => value !== undefined); Object.values(filter.jfParams).some((value) => value !== undefined);
return isNavidromeFilterApplied || isJellyfinFilterApplied; return isNavidromeFilterApplied || isJellyfinFilterApplied;
}, [page.filter.jfParams, page.filter.ndParams, server?.type]); }, [filter.jfParams, filter.ndParams, server?.type]);
return ( return (
<Flex justify="space-between"> <Flex justify="space-between">
@ -404,14 +409,14 @@ export const AlbumListHeaderFilters = ({
</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>
@ -427,7 +432,7 @@ export const AlbumListHeaderFilters = ({
sortOrderLabel sortOrderLabel
) : ( ) : (
<> <>
{filters.sortOrder === SortOrder.ASC ? ( {filter.sortOrder === SortOrder.ASC ? (
<RiSortAsc size={15} /> <RiSortAsc size={15} />
) : ( ) : (
<RiSortDesc size={15} /> <RiSortDesc size={15} />
@ -451,7 +456,7 @@ export const AlbumListHeaderFilters = ({
{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}
> >
@ -528,28 +533,28 @@ export const AlbumListHeaderFilters = ({
<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}
> >
@ -560,9 +565,9 @@ export const AlbumListHeaderFilters = ({
<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 || 0
: page.table.rowHeight : table.rowHeight
} }
label={null} label={null}
max={100} max={100}
@ -570,8 +575,7 @@ export const AlbumListHeaderFilters = ({
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
@ -583,14 +587,14 @@ export const AlbumListHeaderFilters = ({
<MultiSelect <MultiSelect
clearable clearable
data={ALBUM_TABLE_COLUMNS} data={ALBUM_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>

33
src/renderer/features/albums/components/album-list-header.tsx
View file

@ -22,8 +22,7 @@ import {
AlbumListFilter, AlbumListFilter,
useAlbumListStore, useAlbumListStore,
useCurrentServer, useCurrentServer,
useSetAlbumFilters, useListStoreActions,
useSetAlbumTablePagination,
} from '/@/renderer/store'; } from '/@/renderer/store';
import { ListDisplayType, Play } from '/@/renderer/types'; import { ListDisplayType, Play } from '/@/renderer/types';
import { AlbumListHeaderFilters } from '/@/renderer/features/albums/components/album-list-header-filters'; import { AlbumListHeaderFilters } from '/@/renderer/features/albums/components/album-list-header-filters';
@ -47,12 +46,9 @@ export const AlbumListHeader = ({
}: AlbumListHeaderProps) => { }: AlbumListHeaderProps) => {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const server = useCurrentServer(); const server = useCurrentServer();
const setFilter = useSetAlbumFilters(); const { setFilter, setTablePagination } = useListStoreActions();
const page = useAlbumListStore();
const filters = page.filter;
const cq = useContainerQuery(); const cq = useContainerQuery();
const { filter, display } = useAlbumListStore();
const setPagination = useSetAlbumTablePagination();
const fetch = useCallback( const fetch = useCallback(
async (skip: number, take: number, filters: AlbumListFilter) => { async (skip: number, take: number, filters: AlbumListFilter) => {
@ -91,10 +87,7 @@ export const AlbumListHeader = ({
const handleFilterChange = useCallback( const handleFilterChange = useCallback(
async (filters: AlbumListFilter) => { async (filters: AlbumListFilter) => {
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;
@ -137,8 +130,8 @@ export const AlbumListHeader = ({
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: 'album' });
} }
} else { } else {
gridRef.current?.scrollTo(0); gridRef.current?.scrollTo(0);
@ -153,13 +146,13 @@ export const AlbumListHeader = ({
gridRef.current?.setItemData(data.items); gridRef.current?.setItemData(data.items);
} }
}, },
[page.display, tableRef, customFilters, server, queryClient, setPagination, gridRef, fetch], [display, tableRef, customFilters, server, queryClient, setTablePagination, 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: 'album' }) as AlbumListFilter;
if (previousSearchTerm !== searchTerm) handleFilterChange(updatedFilters); if (previousSearchTerm !== searchTerm) handleFilterChange(updatedFilters);
}, 500); }, 500);
@ -171,14 +164,14 @@ export const AlbumListHeader = ({
const query = { const query = {
startIndex: 0, startIndex: 0,
...filters, ...filter,
...customFilters, ...customFilters,
jfParams: { jfParams: {
...filters.jfParams, ...filter.jfParams,
...customFilters?.jfParams, ...customFilters?.jfParams,
}, },
ndParams: { ndParams: {
...filters.ndParams, ...filter.ndParams,
...customFilters?.ndParams, ...customFilters?.ndParams,
}, },
}; };
@ -225,7 +218,7 @@ export const AlbumListHeader = ({
</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}
/> />

75
src/renderer/features/albums/components/jellyfin-album-filters.tsx
View file

@ -1,7 +1,7 @@
import { ChangeEvent, useMemo, useState } from 'react'; import { ChangeEvent, useMemo, useState } from 'react';
import { Divider, Group, Stack } from '@mantine/core'; import { Divider, Group, Stack } from '@mantine/core';
import { MultiSelect, NumberInput, SpinnerIcon, Switch, Text } from '/@/renderer/components'; import { MultiSelect, NumberInput, SpinnerIcon, Switch, Text } from '/@/renderer/components';
import { AlbumListFilter, useAlbumListStore, useSetAlbumFilters } from '/@/renderer/store'; import { AlbumListFilter, useAlbumListFilter, useListStoreActions } from '/@/renderer/store';
import debounce from 'lodash/debounce'; import debounce from 'lodash/debounce';
import { useGenreList } from '/@/renderer/features/genres'; import { useGenreList } from '/@/renderer/features/genres';
import { AlbumArtistListSort, SortOrder } from '/@/renderer/api/types'; import { AlbumArtistListSort, SortOrder } from '/@/renderer/api/types';
@ -10,14 +10,18 @@ import { useAlbumArtistList } from '/@/renderer/features/artists/queries/album-a
interface JellyfinAlbumFiltersProps { interface JellyfinAlbumFiltersProps {
disableArtistFilter?: boolean; disableArtistFilter?: boolean;
handleFilterChange: (filters: AlbumListFilter) => void; handleFilterChange: (filters: AlbumListFilter) => void;
id?: string;
pageKey: string;
} }
export const JellyfinAlbumFilters = ({ export const JellyfinAlbumFilters = ({
disableArtistFilter, disableArtistFilter,
handleFilterChange, handleFilterChange,
pageKey,
id,
}: JellyfinAlbumFiltersProps) => { }: JellyfinAlbumFiltersProps) => {
const { filter } = useAlbumListStore(); const filter = useAlbumListFilter({ id, key: pageKey });
const setFilters = useSetAlbumFilters(); const { setFilter } = useListStoreActions();
// TODO - eventually replace with /items/filters endpoint to fetch genres and tags specific to the selected library // TODO - eventually replace with /items/filters endpoint to fetch genres and tags specific to the selected library
const genreListQuery = useGenreList(null); const genreListQuery = useGenreList(null);
@ -38,9 +42,16 @@ export const JellyfinAlbumFilters = ({
{ {
label: 'Is favorited', label: 'Is favorited',
onChange: (e: ChangeEvent<HTMLInputElement>) => { onChange: (e: ChangeEvent<HTMLInputElement>) => {
const updatedFilters = setFilters({ const updatedFilters = setFilter({
jfParams: { ...filter.jfParams, isFavorite: e.currentTarget.checked ? true : undefined }, data: {
}); jfParams: {
...filter.jfParams,
includeItemTypes: 'Audio',
isFavorite: e.currentTarget.checked ? true : undefined,
},
},
key: pageKey,
}) as AlbumListFilter;
handleFilterChange(updatedFilters); handleFilterChange(updatedFilters);
}, },
value: filter.jfParams?.isFavorite, value: filter.jfParams?.isFavorite,
@ -49,34 +60,43 @@ export const JellyfinAlbumFilters = ({
const handleMinYearFilter = debounce((e: number | string) => { const handleMinYearFilter = debounce((e: number | string) => {
if (typeof e === 'number' && (e < 1700 || e > 2300)) return; if (typeof e === 'number' && (e < 1700 || e > 2300)) return;
const updatedFilters = setFilters({ const updatedFilters = setFilter({
jfParams: { data: {
...filter.jfParams, jfParams: {
minYear: e === '' ? undefined : (e as number), ...filter.jfParams,
minYear: e === '' ? undefined : (e as number),
},
}, },
}); key: pageKey,
}) as AlbumListFilter;
handleFilterChange(updatedFilters); handleFilterChange(updatedFilters);
}, 500); }, 500);
const handleMaxYearFilter = debounce((e: number | string) => { const handleMaxYearFilter = debounce((e: number | string) => {
if (typeof e === 'number' && (e < 1700 || e > 2300)) return; if (typeof e === 'number' && (e < 1700 || e > 2300)) return;
const updatedFilters = setFilters({ const updatedFilters = setFilter({
jfParams: { data: {
...filter.jfParams, jfParams: {
maxYear: e === '' ? undefined : (e as number), ...filter.jfParams,
maxYear: e === '' ? undefined : (e as number),
},
}, },
}); key: pageKey,
}) as AlbumListFilter;
handleFilterChange(updatedFilters); handleFilterChange(updatedFilters);
}, 500); }, 500);
const handleGenresFilter = debounce((e: string[] | undefined) => { const handleGenresFilter = debounce((e: string[] | undefined) => {
const genreFilterString = e?.length ? e.join(',') : undefined; const genreFilterString = e?.length ? e.join(',') : undefined;
const updatedFilters = setFilters({ const updatedFilters = setFilter({
jfParams: { data: {
...filter.jfParams, jfParams: {
genreIds: genreFilterString, ...filter.jfParams,
genreIds: genreFilterString,
},
}, },
}); key: pageKey,
}) as AlbumListFilter;
handleFilterChange(updatedFilters); handleFilterChange(updatedFilters);
}, 250); }, 250);
@ -105,12 +125,15 @@ export const JellyfinAlbumFilters = ({
const handleAlbumArtistFilter = (e: string[] | null) => { const handleAlbumArtistFilter = (e: string[] | null) => {
const albumArtistFilterString = e?.length ? e.join(',') : undefined; const albumArtistFilterString = e?.length ? e.join(',') : undefined;
const updatedFilters = setFilters({ const updatedFilters = setFilter({
jfParams: { data: {
...filter.jfParams, jfParams: {
albumArtistIds: albumArtistFilterString, ...filter.jfParams,
albumArtistIds: albumArtistFilterString,
},
}, },
}); key: pageKey,
}) as AlbumListFilter;
handleFilterChange(updatedFilters); handleFilterChange(updatedFilters);
}; };

98
src/renderer/features/albums/components/navidrome-album-filters.tsx
View file

@ -1,7 +1,7 @@
import { ChangeEvent, useMemo, useState } from 'react'; import { ChangeEvent, useMemo, useState } from 'react';
import { Divider, Group, Stack } from '@mantine/core'; import { Divider, Group, Stack } from '@mantine/core';
import { NumberInput, Switch, Text, Select, SpinnerIcon } from '/@/renderer/components'; import { NumberInput, Switch, Text, Select, SpinnerIcon } from '/@/renderer/components';
import { AlbumListFilter, useAlbumListStore, useSetAlbumFilters } from '/@/renderer/store'; import { AlbumListFilter, useAlbumListFilter, useListStoreActions } from '/@/renderer/store';
import debounce from 'lodash/debounce'; import debounce from 'lodash/debounce';
import { useGenreList } from '/@/renderer/features/genres'; import { useGenreList } from '/@/renderer/features/genres';
import { useAlbumArtistList } from '/@/renderer/features/artists/queries/album-artist-list-query'; import { useAlbumArtistList } from '/@/renderer/features/artists/queries/album-artist-list-query';
@ -10,14 +10,20 @@ import { AlbumArtistListSort, SortOrder } from '/@/renderer/api/types';
interface NavidromeAlbumFiltersProps { interface NavidromeAlbumFiltersProps {
disableArtistFilter?: boolean; disableArtistFilter?: boolean;
handleFilterChange: (filters: AlbumListFilter) => void; handleFilterChange: (filters: AlbumListFilter) => void;
id?: string;
pageKey: string;
} }
export const NavidromeAlbumFilters = ({ export const NavidromeAlbumFilters = ({
handleFilterChange, handleFilterChange,
disableArtistFilter, disableArtistFilter,
pageKey,
id,
}: NavidromeAlbumFiltersProps) => { }: NavidromeAlbumFiltersProps) => {
const { filter } = useAlbumListStore(); const filter = useAlbumListFilter({ id, key: pageKey });
const setFilters = useSetAlbumFilters(); const { setFilter } = useListStoreActions();
console.log('pageKey, id', pageKey, id);
const genreListQuery = useGenreList(null); const genreListQuery = useGenreList(null);
@ -30,12 +36,15 @@ export const NavidromeAlbumFilters = ({
}, [genreListQuery.data]); }, [genreListQuery.data]);
const handleGenresFilter = debounce((e: string | null) => { const handleGenresFilter = debounce((e: string | null) => {
const updatedFilters = setFilters({ const updatedFilters = setFilter({
ndParams: { data: {
...filter.ndParams, ndParams: {
genre_id: e || undefined, ...filter.ndParams,
genre_id: e || undefined,
},
}, },
}); key: 'album',
}) as AlbumListFilter;
handleFilterChange(updatedFilters); handleFilterChange(updatedFilters);
}, 250); }, 250);
@ -43,9 +52,15 @@ export const NavidromeAlbumFilters = ({
{ {
label: 'Is rated', label: 'Is rated',
onChange: (e: ChangeEvent<HTMLInputElement>) => { onChange: (e: ChangeEvent<HTMLInputElement>) => {
const updatedFilters = setFilters({ const updatedFilters = setFilter({
ndParams: { ...filter.ndParams, has_rating: e.currentTarget.checked ? true : undefined }, data: {
}); ndParams: {
...filter.ndParams,
has_rating: e.currentTarget.checked ? true : undefined,
},
},
key: pageKey,
}) as AlbumListFilter;
handleFilterChange(updatedFilters); handleFilterChange(updatedFilters);
}, },
value: filter.ndParams?.has_rating, value: filter.ndParams?.has_rating,
@ -53,9 +68,13 @@ export const NavidromeAlbumFilters = ({
{ {
label: 'Is favorited', label: 'Is favorited',
onChange: (e: ChangeEvent<HTMLInputElement>) => { onChange: (e: ChangeEvent<HTMLInputElement>) => {
const updatedFilters = setFilters({ const updatedFilters = setFilter({
ndParams: { ...filter.ndParams, starred: e.currentTarget.checked ? true : undefined }, data: {
}); ndParams: { ...filter.ndParams, starred: e.currentTarget.checked ? true : undefined },
},
key: pageKey,
}) as AlbumListFilter;
console.log('updatedFilters :>> ', updatedFilters);
handleFilterChange(updatedFilters); handleFilterChange(updatedFilters);
}, },
value: filter.ndParams?.starred, value: filter.ndParams?.starred,
@ -63,9 +82,15 @@ export const NavidromeAlbumFilters = ({
{ {
label: 'Is compilation', label: 'Is compilation',
onChange: (e: ChangeEvent<HTMLInputElement>) => { onChange: (e: ChangeEvent<HTMLInputElement>) => {
const updatedFilters = setFilters({ const updatedFilters = setFilter({
ndParams: { ...filter.ndParams, compilation: e.currentTarget.checked ? true : undefined }, data: {
}); ndParams: {
...filter.ndParams,
compilation: e.currentTarget.checked ? true : undefined,
},
},
key: pageKey,
}) as AlbumListFilter;
handleFilterChange(updatedFilters); handleFilterChange(updatedFilters);
}, },
value: filter.ndParams?.compilation, value: filter.ndParams?.compilation,
@ -73,12 +98,15 @@ export const NavidromeAlbumFilters = ({
{ {
label: 'Is recently played', label: 'Is recently played',
onChange: (e: ChangeEvent<HTMLInputElement>) => { onChange: (e: ChangeEvent<HTMLInputElement>) => {
const updatedFilters = setFilters({ const updatedFilters = setFilter({
ndParams: { data: {
...filter.ndParams, ndParams: {
recently_played: e.currentTarget.checked ? true : undefined, ...filter.ndParams,
recently_played: e.currentTarget.checked ? true : undefined,
},
}, },
}); key: pageKey,
}) as AlbumListFilter;
handleFilterChange(updatedFilters); handleFilterChange(updatedFilters);
}, },
value: filter.ndParams?.recently_played, value: filter.ndParams?.recently_played,
@ -86,12 +114,15 @@ export const NavidromeAlbumFilters = ({
]; ];
const handleYearFilter = debounce((e: number | string) => { const handleYearFilter = debounce((e: number | string) => {
const updatedFilters = setFilters({ const updatedFilters = setFilter({
ndParams: { data: {
...filter.ndParams, ndParams: {
year: e === '' ? undefined : (e as number), ...filter.ndParams,
year: e === '' ? undefined : (e as number),
},
}, },
}); key: pageKey,
}) as AlbumListFilter;
handleFilterChange(updatedFilters); handleFilterChange(updatedFilters);
}, 500); }, 500);
@ -120,12 +151,15 @@ export const NavidromeAlbumFilters = ({
}, [albumArtistListQuery?.data?.items]); }, [albumArtistListQuery?.data?.items]);
const handleAlbumArtistFilter = (e: string | null) => { const handleAlbumArtistFilter = (e: string | null) => {
const updatedFilters = setFilters({ const updatedFilters = setFilter({
ndParams: { data: {
...filter.ndParams, ndParams: {
artist_id: e || undefined, ...filter.ndParams,
artist_id: e || undefined,
},
}, },
}); key: pageKey,
}) as AlbumListFilter;
handleFilterChange(updatedFilters); handleFilterChange(updatedFilters);
}; };

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

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

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

@ -5,53 +5,34 @@ import { AlbumListContent } from '/@/renderer/features/albums/components/album-l
import { useRef } from 'react'; import { useRef } from 'react';
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact'; import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import { useAlbumList } from '/@/renderer/features/albums/queries/album-list-query'; import { useAlbumList } from '/@/renderer/features/albums/queries/album-list-query';
import { useAlbumListFilters, useCurrentServer } from '/@/renderer/store'; import { generatePageKey, useAlbumListFilter, useCurrentServer } from '/@/renderer/store';
import { useSearchParams } from 'react-router-dom'; import { useParams, useSearchParams } from 'react-router-dom';
import { AlbumListQuery, ServerType } from '/@/renderer/api/types'; import { AlbumListContext } from '/@/renderer/features/albums/context/album-list-context';
const AlbumListRoute = () => { const AlbumListRoute = () => {
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 filters = useAlbumListFilters();
const server = useCurrentServer(); const server = useCurrentServer();
const [searchParams] = useSearchParams(); const [searchParams] = useSearchParams();
const { albumArtistId } = useParams();
const customFilters: Partial<AlbumListQuery> | undefined = searchParams.get('artistId') const pageKey = generatePageKey(
? { 'album',
jfParams: albumArtistId ? `${albumArtistId}_${server?.id}` : undefined,
server?.type === ServerType.JELLYFIN );
? {
artistIds: searchParams.get('artistId') as string, const albumListFilter = useAlbumListFilter({ id: albumArtistId || undefined, key: pageKey });
}
: undefined,
ndParams:
server?.type === ServerType.NAVIDROME
? {
artist_id: searchParams.get('artistId') as string,
}
: undefined,
}
: undefined;
const itemCountCheck = useAlbumList( const itemCountCheck = useAlbumList(
{ {
limit: 1, limit: 1,
startIndex: 0, startIndex: 0,
...filters, ...albumListFilter,
...customFilters,
jfParams: {
...filters.jfParams,
...customFilters?.jfParams,
},
ndParams: {
...filters.ndParams,
...customFilters?.ndParams,
},
}, },
{ {
cacheTime: 1000 * 60 * 60 * 2, cacheTime: 1000 * 60,
staleTime: 1000 * 60 * 60 * 2, staleTime: 1000 * 60,
}, },
); );
@ -62,19 +43,19 @@ const AlbumListRoute = () => {
return ( return (
<AnimatedPage> <AnimatedPage>
<AlbumListHeader <AlbumListContext.Provider value={{ id: albumArtistId || undefined, pageKey }}>
customFilters={customFilters} <AlbumListHeader
gridRef={gridRef} gridRef={gridRef}
itemCount={itemCount} itemCount={itemCount}
tableRef={tableRef} tableRef={tableRef}
title={searchParams.get('artistName') || undefined} title={searchParams.get('artistName') || undefined}
/> />
<AlbumListContent <AlbumListContent
customFilters={customFilters} gridRef={gridRef}
gridRef={gridRef} itemCount={itemCount}
itemCount={itemCount} tableRef={tableRef}
tableRef={tableRef} />
/> </AlbumListContext.Provider>
</AnimatedPage> </AnimatedPage>
); );
}; };

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

@ -1,17 +1,23 @@
import { ChangeEvent, useMemo } from 'react'; import { ChangeEvent, useMemo } from 'react';
import { Divider, Group, Stack } from '@mantine/core'; import { Divider, Group, Stack } from '@mantine/core';
import { MultiSelect, NumberInput, Switch, Text } from '/@/renderer/components'; import { MultiSelect, NumberInput, Switch, Text } from '/@/renderer/components';
import { SongListFilter, useSetSongFilters, useSongListStore } from '/@/renderer/store'; import { SongListFilter, useListStoreActions, useSongListFilter } from '/@/renderer/store';
import debounce from 'lodash/debounce'; import debounce from 'lodash/debounce';
import { useGenreList } from '/@/renderer/features/genres'; import { useGenreList } from '/@/renderer/features/genres';
interface JellyfinSongFiltersProps { interface JellyfinSongFiltersProps {
handleFilterChange: (filters: SongListFilter) => void; handleFilterChange: (filters: SongListFilter) => void;
id?: string;
pageKey: string;
} }
export const JellyfinSongFilters = ({ handleFilterChange }: JellyfinSongFiltersProps) => { export const JellyfinSongFilters = ({
const { filter } = useSongListStore(); id,
const setFilters = useSetSongFilters(); pageKey,
handleFilterChange,
}: JellyfinSongFiltersProps) => {
const { setFilter } = useListStoreActions();
const filter = useSongListFilter({ id, key: pageKey });
// TODO - eventually replace with /items/filters endpoint to fetch genres and tags specific to the selected library // TODO - eventually replace with /items/filters endpoint to fetch genres and tags specific to the selected library
const genreListQuery = useGenreList(null); const genreListQuery = useGenreList(null);
@ -32,13 +38,16 @@ export const JellyfinSongFilters = ({ handleFilterChange }: JellyfinSongFiltersP
{ {
label: 'Is favorited', label: 'Is favorited',
onChange: (e: ChangeEvent<HTMLInputElement>) => { onChange: (e: ChangeEvent<HTMLInputElement>) => {
const updatedFilters = setFilters({ const updatedFilters = setFilter({
jfParams: { data: {
...filter.jfParams, jfParams: {
includeItemTypes: 'Audio', ...filter.jfParams,
isFavorite: e.currentTarget.checked ? true : undefined, includeItemTypes: 'Audio',
isFavorite: e.currentTarget.checked ? true : undefined,
},
}, },
}); key: pageKey,
}) as SongListFilter;
handleFilterChange(updatedFilters); handleFilterChange(updatedFilters);
}, },
value: filter.jfParams?.isFavorite, value: filter.jfParams?.isFavorite,
@ -47,37 +56,46 @@ export const JellyfinSongFilters = ({ handleFilterChange }: JellyfinSongFiltersP
const handleMinYearFilter = debounce((e: number | string) => { const handleMinYearFilter = debounce((e: number | string) => {
if (typeof e === 'number' && (e < 1700 || e > 2300)) return; if (typeof e === 'number' && (e < 1700 || e > 2300)) return;
const updatedFilters = setFilters({ const updatedFilters = setFilter({
jfParams: { data: {
...filter.jfParams, jfParams: {
includeItemTypes: 'Audio', ...filter.jfParams,
minYear: e === '' ? undefined : (e as number), includeItemTypes: 'Audio',
minYear: e === '' ? undefined : (e as number),
},
}, },
}); key: pageKey,
}) as SongListFilter;
handleFilterChange(updatedFilters); handleFilterChange(updatedFilters);
}, 500); }, 500);
const handleMaxYearFilter = debounce((e: number | string) => { const handleMaxYearFilter = debounce((e: number | string) => {
if (typeof e === 'number' && (e < 1700 || e > 2300)) return; if (typeof e === 'number' && (e < 1700 || e > 2300)) return;
const updatedFilters = setFilters({ const updatedFilters = setFilter({
jfParams: { data: {
...filter.jfParams, jfParams: {
includeItemTypes: 'Audio', ...filter.jfParams,
maxYear: e === '' ? undefined : (e as number), includeItemTypes: 'Audio',
maxYear: e === '' ? undefined : (e as number),
},
}, },
}); key: pageKey,
}) as SongListFilter;
handleFilterChange(updatedFilters); handleFilterChange(updatedFilters);
}, 500); }, 500);
const handleGenresFilter = debounce((e: string[] | undefined) => { const handleGenresFilter = debounce((e: string[] | undefined) => {
const genreFilterString = e?.length ? e.join(',') : undefined; const genreFilterString = e?.length ? e.join(',') : undefined;
const updatedFilters = setFilters({ const updatedFilters = setFilter({
jfParams: { data: {
...filter.jfParams, jfParams: {
genreIds: genreFilterString, ...filter.jfParams,
includeItemTypes: 'Audio', genreIds: genreFilterString,
includeItemTypes: 'Audio',
},
}, },
}); key: pageKey,
}) as SongListFilter;
handleFilterChange(updatedFilters); handleFilterChange(updatedFilters);
}, 250); }, 250);

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

@ -1,17 +1,23 @@
import { ChangeEvent, useMemo } from 'react'; import { ChangeEvent, useMemo } from 'react';
import { Divider, Group, Stack } from '@mantine/core'; import { Divider, Group, Stack } from '@mantine/core';
import { NumberInput, Select, Switch, Text } from '/@/renderer/components'; import { NumberInput, Select, Switch, Text } from '/@/renderer/components';
import { SongListFilter, useSetSongFilters, useSongListStore } from '/@/renderer/store'; import { SongListFilter, useListStoreActions, useSongListFilter } from '/@/renderer/store';
import debounce from 'lodash/debounce'; import debounce from 'lodash/debounce';
import { useGenreList } from '/@/renderer/features/genres'; import { useGenreList } from '/@/renderer/features/genres';
interface NavidromeSongFiltersProps { interface NavidromeSongFiltersProps {
handleFilterChange: (filters: SongListFilter) => void; handleFilterChange: (filters: SongListFilter) => void;
id?: string;
pageKey: string;
} }
export const NavidromeSongFilters = ({ handleFilterChange }: NavidromeSongFiltersProps) => { export const NavidromeSongFilters = ({
const { filter } = useSongListStore(); handleFilterChange,
const setFilters = useSetSongFilters(); pageKey,
id,
}: NavidromeSongFiltersProps) => {
const { setFilter } = useListStoreActions();
const filter = useSongListFilter({ id, key: pageKey });
const genreListQuery = useGenreList(null); const genreListQuery = useGenreList(null);
@ -24,12 +30,15 @@ export const NavidromeSongFilters = ({ handleFilterChange }: NavidromeSongFilter
}, [genreListQuery.data]); }, [genreListQuery.data]);
const handleGenresFilter = debounce((e: string | null) => { const handleGenresFilter = debounce((e: string | null) => {
const updatedFilters = setFilters({ const updatedFilters = setFilter({
ndParams: { data: {
...filter.ndParams, ndParams: {
genre_id: e || undefined, ...filter.ndParams,
genre_id: e || undefined,
},
}, },
}); key: pageKey,
}) as SongListFilter;
handleFilterChange(updatedFilters); handleFilterChange(updatedFilters);
}, 250); }, 250);
@ -37,9 +46,14 @@ export const NavidromeSongFilters = ({ handleFilterChange }: NavidromeSongFilter
{ {
label: 'Is favorited', label: 'Is favorited',
onChange: (e: ChangeEvent<HTMLInputElement>) => { onChange: (e: ChangeEvent<HTMLInputElement>) => {
const updatedFilters = setFilters({ const updatedFilters = setFilter({
ndParams: { ...filter.ndParams, starred: e.currentTarget.checked ? true : undefined }, data: {
}); ndParams: { ...filter.ndParams, starred: e.currentTarget.checked ? true : undefined },
},
key: pageKey,
}) as SongListFilter;
console.log('updatedFilters :>> ', updatedFilters);
handleFilterChange(updatedFilters); handleFilterChange(updatedFilters);
}, },
value: filter.ndParams?.starred, value: filter.ndParams?.starred,
@ -47,12 +61,15 @@ export const NavidromeSongFilters = ({ handleFilterChange }: NavidromeSongFilter
]; ];
const handleYearFilter = debounce((e: number | string) => { const handleYearFilter = debounce((e: number | string) => {
const updatedFilters = setFilters({ const updatedFilters = setFilter({
ndParams: { data: {
...filter.ndParams, ndParams: {
year: e === '' ? undefined : (e as number), ...filter.ndParams,
year: e === '' ? undefined : (e as number),
},
}, },
}); key: pageKey,
}) as SongListFilter;
handleFilterChange(updatedFilters); handleFilterChange(updatedFilters);
}, 500); }, 500);

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

@ -19,12 +19,10 @@ import {
VirtualTable, VirtualTable,
} from '/@/renderer/components'; } from '/@/renderer/components';
import { import {
SongListFilter,
useCurrentServer, useCurrentServer,
useSetSongTable, useListStoreActions,
useSetSongTablePagination, useSongListFilter,
useSongListStore, useSongListStore,
useSongTablePagination,
} from '/@/renderer/store'; } from '/@/renderer/store';
import { ListDisplayType } from '/@/renderer/types'; import { ListDisplayType } from '/@/renderer/types';
import { AnimatePresence } from 'framer-motion'; import { AnimatePresence } from 'framer-motion';
@ -34,30 +32,28 @@ import { SONG_CONTEXT_MENU_ITEMS } from '/@/renderer/features/context-menu/conte
import { usePlayButtonBehavior } from '/@/renderer/store/settings.store'; import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
import { LibraryItem, QueueSong, SongListQuery } from '/@/renderer/api/types'; import { LibraryItem, QueueSong, SongListQuery } from '/@/renderer/api/types';
import { usePlayQueueAdd } from '/@/renderer/features/player'; import { usePlayQueueAdd } from '/@/renderer/features/player';
import { useSongListContext } from '/@/renderer/features/songs/context/song-list-context';
interface SongListContentProps { interface SongListContentProps {
customFilters?: Partial<SongListFilter>;
itemCount?: number; itemCount?: number;
tableRef: MutableRefObject<AgGridReactType | null>; tableRef: MutableRefObject<AgGridReactType | null>;
} }
export const SongListContent = ({ customFilters, itemCount, tableRef }: SongListContentProps) => { export const SongListContent = ({ itemCount, tableRef }: SongListContentProps) => {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const server = useCurrentServer(); const server = useCurrentServer();
const page = useSongListStore();
const pagination = useSongTablePagination(); const { display, table } = useSongListStore();
const setPagination = useSetSongTablePagination(); const { id, pageKey } = useSongListContext();
const setTable = useSetSongTable(); const filter = useSongListFilter({ id, key: pageKey });
const { setTable, setTablePagination } = useListStoreActions();
const handlePlayQueueAdd = usePlayQueueAdd(); const handlePlayQueueAdd = usePlayQueueAdd();
const playButtonBehavior = usePlayButtonBehavior(); const playButtonBehavior = usePlayButtonBehavior();
const isPaginationEnabled = page.display === ListDisplayType.TABLE_PAGINATED; const isPaginationEnabled = display === ListDisplayType.TABLE_PAGINATED;
const columnDefs: ColDef[] = useMemo( const columnDefs: ColDef[] = useMemo(() => getColumnDefs(table.columns), [table.columns]);
() => getColumnDefs(page.table.columns),
[page.table.columns],
);
const onGridReady = useCallback( const onGridReady = useCallback(
(params: GridReadyEvent) => { (params: GridReadyEvent) => {
@ -69,8 +65,7 @@ export const SongListContent = ({ customFilters, itemCount, tableRef }: SongList
const query: SongListQuery = { const query: SongListQuery = {
limit, limit,
startIndex, startIndex,
...page.filter, ...filter,
...customFilters,
}; };
const queryKey = queryKeys.songs.list(server?.id || '', query); const queryKey = queryKeys.songs.list(server?.id || '', query);
@ -93,11 +88,9 @@ export const SongListContent = ({ customFilters, itemCount, tableRef }: SongList
}; };
params.api.setDatasource(dataSource); params.api.setDatasource(dataSource);
if (!customFilters) { params.api.ensureIndexVisible(table.scrollOffset, 'top');
params.api.ensureIndexVisible(page.table.scrollOffset, 'top');
}
}, },
[customFilters, page.filter, page.table.scrollOffset, queryClient, server], [filter, table.scrollOffset, queryClient, server],
); );
const onPaginationChanged = useCallback( const onPaginationChanged = useCallback(
@ -106,22 +99,31 @@ export const SongListContent = ({ customFilters, itemCount, tableRef }: SongList
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 handleGridSizeChange = () => { const handleGridSizeChange = () => {
if (page.table.autoFit) { if (table.autoFit) {
tableRef?.current?.api.sizeColumnsToFit(); tableRef?.current?.api.sizeColumnsToFit();
} }
}; };
@ -132,7 +134,7 @@ export const SongListContent = ({ customFilters, itemCount, tableRef }: SongList
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);
@ -140,22 +142,22 @@ export const SongListContent = ({ customFilters, itemCount, tableRef }: SongList
if (columnInSettings) { if (columnInSettings) {
updatedColumns.push({ updatedColumns.push({
...columnInSettings, ...columnInSettings,
...(!page.table.autoFit && { ...(!table.autoFit && {
width: column.getActualWidth(), width: column.getActualWidth(),
}), }),
}); });
} }
} }
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 debouncedColumnChange = debounce(handleColumnChange, 200); const debouncedColumnChange = debounce(handleColumnChange, 200);
const handleScroll = (e: BodyScrollEvent) => { const handleScroll = (e: BodyScrollEvent) => {
if (customFilters) return; if (id) return;
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 handleContextMenu = useHandleTableContextMenu(LibraryItem.SONG, SONG_CONTEXT_MENU_ITEMS); const handleContextMenu = useHandleTableContextMenu(LibraryItem.SONG, SONG_CONTEXT_MENU_ITEMS);
@ -177,23 +179,20 @@ export const SongListContent = ({ customFilters, itemCount, tableRef }: SongList
<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}
blockLoadDebounceMillis={200} blockLoadDebounceMillis={200}
cacheBlockSize={500}
cacheOverflowSize={1}
columnDefs={columnDefs} columnDefs={columnDefs}
enableCellChangeFlash={false}
getRowId={(data) => data.data.id} getRowId={(data) => data.data.id}
infiniteInitialRowCount={itemCount || 100} infiniteInitialRowCount={itemCount || 100}
pagination={isPaginationEnabled} pagination={isPaginationEnabled}
paginationAutoPageSize={isPaginationEnabled} paginationAutoPageSize={isPaginationEnabled}
paginationPageSize={page.table.pagination.itemsPerPage || 100} paginationPageSize={table.pagination.itemsPerPage || 100}
rowBuffer={20} rowBuffer={20}
rowHeight={page.table.rowHeight || 40} rowHeight={table.rowHeight || 40}
rowModelType="infinite" rowModelType="infinite"
rowSelection="multiple" rowSelection="multiple"
onBodyScrollEnd={handleScroll} onBodyScrollEnd={handleScroll}
@ -211,10 +210,11 @@ export const SongListContent = ({ customFilters, itemCount, tableRef }: SongList
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}
/> />
)} )}

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

@ -34,15 +34,14 @@ import { useContainerQuery } from '/@/renderer/hooks';
import { queryClient } from '/@/renderer/lib/react-query'; import { queryClient } from '/@/renderer/lib/react-query';
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact'; import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import { import {
useCurrentServer,
useSongListStore,
useSetSongStore,
useSetSongFilters,
useSetSongTable,
useSetSongTablePagination,
SongListFilter, SongListFilter,
useCurrentServer,
useListStoreActions,
useSongListFilter,
useSongListStore,
} from '/@/renderer/store'; } from '/@/renderer/store';
import { ListDisplayType, ServerType, Play, TableColumn } from '/@/renderer/types'; import { ListDisplayType, ServerType, Play, TableColumn } from '/@/renderer/types';
import { useSongListContext } from '/@/renderer/features/songs/context/song-list-context';
const FILTERS = { const FILTERS = {
jellyfin: [ jellyfin: [
@ -93,11 +92,11 @@ export const SongListHeaderFilters = ({
tableRef, tableRef,
}: SongListHeaderFiltersProps) => { }: SongListHeaderFiltersProps) => {
const server = useCurrentServer(); const server = useCurrentServer();
const page = useSongListStore(); const { id, pageKey } = useSongListContext();
const setPage = useSetSongStore(); const { display, table } = useSongListStore();
const setFilter = useSetSongFilters(); const { setFilter, setTable, setTablePagination, setDisplayType } = useListStoreActions();
const setTable = useSetSongTable(); const filter = useSongListFilter({ id, key: pageKey });
const setPagination = useSetSongTablePagination();
const handlePlayQueueAdd = usePlayQueueAdd(); const handlePlayQueueAdd = usePlayQueueAdd();
const cq = useContainerQuery(); const cq = useContainerQuery();
@ -106,11 +105,11 @@ export const SongListHeaderFilters = ({
const sortByLabel = const sortByLabel =
(server?.type && (server?.type &&
(FILTERS[server.type as keyof typeof FILTERS] as { name: string; value: string }[]).find( (FILTERS[server.type as keyof typeof FILTERS] as { name: string; value: string }[]).find(
(f) => f.value === page.filter.sortBy, (f) => f.value === filter.sortBy,
)?.name) || )?.name) ||
'Unknown'; 'Unknown';
const sortOrderLabel = ORDER.find((s) => s.value === page.filter.sortOrder)?.name; const sortOrderLabel = ORDER.find((s) => s.value === filter.sortOrder)?.name;
const handleFilterChange = useCallback( const handleFilterChange = useCallback(
async (filters?: SongListFilter) => { async (filters?: SongListFilter) => {
@ -119,7 +118,7 @@ export const SongListHeaderFilters = ({
const limit = params.endRow - params.startRow; const limit = params.endRow - params.startRow;
const startIndex = params.startRow; const startIndex = params.startRow;
const pageFilters = filters || page.filter; const pageFilters = filters || filter;
const query: SongListQuery = { const query: SongListQuery = {
limit, limit,
@ -149,9 +148,9 @@ export const SongListHeaderFilters = ({
tableRef.current?.api.setDatasource(dataSource); tableRef.current?.api.setDatasource(dataSource);
tableRef.current?.api.purgeInfiniteCache(); tableRef.current?.api.purgeInfiniteCache();
tableRef.current?.api.ensureIndexVisible(0, 'top'); tableRef.current?.api.ensureIndexVisible(0, 'top');
setPagination({ currentPage: 0 }); setTablePagination({ data: { currentPage: 0 }, key: pageKey });
}, },
[customFilters, page.filter, server, setPagination, tableRef], [customFilters, filter, pageKey, server, setTablePagination, tableRef],
); );
const handleSetSortBy = useCallback( const handleSetSortBy = useCallback(
@ -163,13 +162,16 @@ export const SongListHeaderFilters = ({
)?.defaultOrder; )?.defaultOrder;
const updatedFilters = setFilter({ const updatedFilters = setFilter({
sortBy: e.currentTarget.value as SongListSort, data: {
sortOrder: sortOrder || SortOrder.ASC, sortBy: e.currentTarget.value as SongListSort,
}); sortOrder: sortOrder || SortOrder.ASC,
},
key: pageKey,
}) as SongListFilter;
handleFilterChange(updatedFilters); handleFilterChange(updatedFilters);
}, },
[handleFilterChange, server?.type, setFilter], [handleFilterChange, pageKey, server?.type, setFilter],
); );
const handleSetMusicFolder = useCallback( const handleSetMusicFolder = useCallback(
@ -177,45 +179,60 @@ export const SongListHeaderFilters = ({
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 SongListFilter;
} else { } else {
updatedFilters = setFilter({ musicFolderId: e.currentTarget.value }); updatedFilters = setFilter({
data: { musicFolderId: e.currentTarget.value },
key: pageKey,
}) as SongListFilter;
} }
handleFilterChange(updatedFilters); handleFilterChange(updatedFilters);
}, },
[handleFilterChange, page.filter.musicFolderId, setFilter], [filter.musicFolderId, handleFilterChange, setFilter, pageKey],
); );
const handleToggleSortOrder = useCallback(() => { const handleToggleSortOrder = useCallback(() => {
const newSortOrder = page.filter.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 SongListFilter;
handleFilterChange(updatedFilters); handleFilterChange(updatedFilters);
}, [page.filter.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;
const display = e.currentTarget.value as ListDisplayType; const display = e.currentTarget.value as ListDisplayType;
setPage({ list: { ...page, display: e.currentTarget.value as ListDisplayType } }); setDisplayType({
data: e.currentTarget.value as ListDisplayType,
key: pageKey,
});
if (display === ListDisplayType.TABLE) { if (display === ListDisplayType.TABLE) {
tableRef.current?.api.paginationSetPageSize(tableRef.current.props.infiniteInitialRowCount); tableRef.current?.api.paginationSetPageSize(tableRef.current.props.infiniteInitialRowCount);
setPagination({ currentPage: 0 }); setTablePagination({ data: { currentPage: 0 }, key: pageKey });
} else if (display === ListDisplayType.TABLE_PAGINATED) { } else if (display === ListDisplayType.TABLE_PAGINATED) {
setPagination({ currentPage: 0 }); setTablePagination({ data: { currentPage: 0 }, key: pageKey });
} }
}, },
[page, setPage, setPagination, tableRef], [pageKey, setDisplayType, setTablePagination, tableRef],
); );
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,
}); });
} }
@ -223,18 +240,18 @@ export const SongListHeaderFilters = ({
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 };
return setTable({ columns: [...existingColumns, newColumn] }); return setTable({ data: { columns: [...existingColumns, newColumn] }, key: pageKey });
} }
// 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));
return setTable({ columns: newColumns }); return setTable({ data: { columns: newColumns }, key: pageKey });
}; };
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();
@ -242,17 +259,17 @@ export const SongListHeaderFilters = ({
}; };
const handleRowHeight = (e: number) => { const handleRowHeight = (e: number) => {
setTable({ rowHeight: e }); setTable({ data: { rowHeight: e }, key: pageKey });
}; };
const handleRefresh = () => { const handleRefresh = () => {
queryClient.invalidateQueries(queryKeys.songs.list(server?.id || '')); queryClient.invalidateQueries(queryKeys.songs.list(server?.id || ''));
handleFilterChange(page.filter); handleFilterChange(filter);
}; };
const handlePlay = async (play: Play) => { const handlePlay = async (play: Play) => {
if (!itemCount || itemCount === 0) return; if (!itemCount || itemCount === 0) return;
const query: SongListQuery = { startIndex: 0, ...page.filter, ...customFilters }; const query: SongListQuery = { startIndex: 0, ...filter, ...customFilters };
handlePlayQueueAdd?.({ handlePlayQueueAdd?.({
byItemType: { byItemType: {
@ -268,9 +285,17 @@ export const SongListHeaderFilters = ({
children: ( children: (
<> <>
{server?.type === ServerType.NAVIDROME ? ( {server?.type === ServerType.NAVIDROME ? (
<NavidromeSongFilters handleFilterChange={handleFilterChange} /> <NavidromeSongFilters
handleFilterChange={handleFilterChange}
id={id}
pageKey={pageKey}
/>
) : ( ) : (
<JellyfinSongFilters handleFilterChange={handleFilterChange} /> <JellyfinSongFilters
handleFilterChange={handleFilterChange}
id={id}
pageKey={pageKey}
/>
)} )}
</> </>
), ),
@ -281,18 +306,18 @@ export const SongListHeaderFilters = ({
const isFilterApplied = useMemo(() => { const isFilterApplied = useMemo(() => {
const isNavidromeFilterApplied = const isNavidromeFilterApplied =
server?.type === ServerType.NAVIDROME && server?.type === ServerType.NAVIDROME &&
page.filter.ndParams && filter.ndParams &&
Object.values(page.filter.ndParams).some((value) => value !== undefined); Object.values(filter.ndParams).some((value) => value !== undefined);
const isJellyfinFilterApplied = const isJellyfinFilterApplied =
server?.type === ServerType.JELLYFIN && server?.type === ServerType.JELLYFIN &&
page.filter.jfParams && filter.jfParams &&
Object.values(page.filter.jfParams) Object.values(filter.jfParams)
.filter((value) => value !== 'Audio') // Don't account for includeItemTypes: Audio .filter((value) => value !== 'Audio') // Don't account for includeItemTypes: Audio
.some((value) => value !== undefined); .some((value) => value !== undefined);
return isNavidromeFilterApplied || isJellyfinFilterApplied; return isNavidromeFilterApplied || isJellyfinFilterApplied;
}, [page.filter.jfParams, page.filter.ndParams, server?.type]); }, [filter.jfParams, filter.ndParams, server?.type]);
return ( return (
<Flex justify="space-between"> <Flex justify="space-between">
@ -313,14 +338,14 @@ export const SongListHeaderFilters = ({
</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 === page.filter.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>
@ -336,7 +361,7 @@ export const SongListHeaderFilters = ({
sortOrderLabel sortOrderLabel
) : ( ) : (
<> <>
{page.filter.sortOrder === SortOrder.ASC ? ( {filter.sortOrder === SortOrder.ASC ? (
<RiSortAsc size="1.3rem" /> <RiSortAsc size="1.3rem" />
) : ( ) : (
<RiSortDesc size="1.3rem" /> <RiSortDesc size="1.3rem" />
@ -360,7 +385,7 @@ export const SongListHeaderFilters = ({
{musicFoldersQuery.data?.map((folder) => ( {musicFoldersQuery.data?.map((folder) => (
<DropdownMenu.Item <DropdownMenu.Item
key={`musicFolder-${folder.id}`} key={`musicFolder-${folder.id}`}
$isActive={page.filter.musicFolderId === folder.id} $isActive={filter.musicFolderId === folder.id}
value={folder.id} value={folder.id}
onClick={handleSetMusicFolder} onClick={handleSetMusicFolder}
> >
@ -437,14 +462,14 @@ export const SongListHeaderFilters = ({
<DropdownMenu.Dropdown> <DropdownMenu.Dropdown>
<DropdownMenu.Label>Display type</DropdownMenu.Label> <DropdownMenu.Label>Display type</DropdownMenu.Label>
<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}
> >
@ -454,7 +479,7 @@ export const SongListHeaderFilters = ({
<DropdownMenu.Label>Item Size</DropdownMenu.Label> <DropdownMenu.Label>Item Size</DropdownMenu.Label>
<DropdownMenu.Item closeMenuOnClick={false}> <DropdownMenu.Item closeMenuOnClick={false}>
<Slider <Slider
defaultValue={page.table.rowHeight || 0} defaultValue={table.rowHeight || 0}
label={null} label={null}
max={100} max={100}
min={25} min={25}
@ -471,14 +496,14 @@ export const SongListHeaderFilters = ({
<MultiSelect <MultiSelect
clearable clearable
data={SONG_TABLE_COLUMNS} data={SONG_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>

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

@ -10,13 +10,13 @@ import { PageHeader, Paper, SearchInput, SpinnerIcon } from '/@/renderer/compone
import { usePlayQueueAdd } from '/@/renderer/features/player'; import { usePlayQueueAdd } from '/@/renderer/features/player';
import { LibraryHeaderBar } from '/@/renderer/features/shared'; import { LibraryHeaderBar } from '/@/renderer/features/shared';
import { SongListHeaderFilters } from '/@/renderer/features/songs/components/song-list-header-filters'; import { SongListHeaderFilters } from '/@/renderer/features/songs/components/song-list-header-filters';
import { useSongListContext } from '/@/renderer/features/songs/context/song-list-context';
import { useContainerQuery } from '/@/renderer/hooks'; import { useContainerQuery } from '/@/renderer/hooks';
import { queryClient } from '/@/renderer/lib/react-query'; import { queryClient } from '/@/renderer/lib/react-query';
import { import {
SongListFilter, SongListFilter,
useCurrentServer, useCurrentServer,
useSetSongFilters, useListStoreActions,
useSetSongTablePagination,
useSongListStore, useSongListStore,
} from '/@/renderer/store'; } from '/@/renderer/store';
import { usePlayButtonBehavior } from '/@/renderer/store/settings.store'; import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
@ -36,9 +36,9 @@ export const SongListHeader = ({
tableRef, tableRef,
}: SongListHeaderProps) => { }: SongListHeaderProps) => {
const server = useCurrentServer(); const server = useCurrentServer();
const page = useSongListStore(); const { pageKey } = useSongListContext();
const setFilter = useSetSongFilters(); const { filter } = useSongListStore();
const setPagination = useSetSongTablePagination(); const { setFilter, setTablePagination } = useListStoreActions();
const handlePlayQueueAdd = usePlayQueueAdd(); const handlePlayQueueAdd = usePlayQueueAdd();
const cq = useContainerQuery(); const cq = useContainerQuery();
@ -49,7 +49,7 @@ export const SongListHeader = ({
const limit = params.endRow - params.startRow; const limit = params.endRow - params.startRow;
const startIndex = params.startRow; const startIndex = params.startRow;
const pageFilters = filters || page.filter; const pageFilters = filters || filter;
const query: SongListQuery = { const query: SongListQuery = {
limit, limit,
@ -79,15 +79,15 @@ export const SongListHeader = ({
tableRef.current?.api.setDatasource(dataSource); tableRef.current?.api.setDatasource(dataSource);
tableRef.current?.api.purgeInfiniteCache(); tableRef.current?.api.purgeInfiniteCache();
tableRef.current?.api.ensureIndexVisible(0, 'top'); tableRef.current?.api.ensureIndexVisible(0, 'top');
setPagination({ currentPage: 0 }); setTablePagination({ data: { currentPage: 0 }, key: pageKey });
}, },
[customFilters, page.filter, server, setPagination, tableRef], [customFilters, filter, pageKey, server, setTablePagination, tableRef],
); );
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 SongListFilter;
if (previousSearchTerm !== searchTerm) handleFilterChange(updatedFilters); if (previousSearchTerm !== searchTerm) handleFilterChange(updatedFilters);
}, 500); }, 500);
@ -95,7 +95,7 @@ export const SongListHeader = ({
const handlePlay = async (play: Play) => { const handlePlay = async (play: Play) => {
if (!itemCount || itemCount === 0) return; if (!itemCount || itemCount === 0) return;
const query: SongListQuery = { startIndex: 0, ...page.filter, ...customFilters }; const query: SongListQuery = { startIndex: 0, ...filter, ...customFilters };
handlePlayQueueAdd?.({ handlePlayQueueAdd?.({
byItemType: { byItemType: {
@ -130,7 +130,7 @@ export const SongListHeader = ({
</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}
/> />

16
src/renderer/features/songs/context/song-list-context.tsx Normal file
View file

@ -0,0 +1,16 @@
import { createContext, useContext } from 'react';
import { ListKey } from '/@/renderer/store';
interface SongListContextProps {
id?: string;
pageKey: ListKey;
}
export const SongListContext = createContext<SongListContextProps>({
pageKey: 'song',
});
export const useSongListContext = () => {
const ctxValue = useContext(SongListContext);
return ctxValue;
};

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

@ -1,44 +1,33 @@
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact'; import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import { useRef } from 'react'; import { useRef } from 'react';
import { useSearchParams } from 'react-router-dom'; import { useParams, useSearchParams } from 'react-router-dom';
import { SongListQuery } from '/@/renderer/api/types';
import { AnimatedPage } from '/@/renderer/features/shared'; import { AnimatedPage } from '/@/renderer/features/shared';
import { SongListContent } from '/@/renderer/features/songs/components/song-list-content'; import { SongListContent } from '/@/renderer/features/songs/components/song-list-content';
import { SongListHeader } from '/@/renderer/features/songs/components/song-list-header'; import { SongListHeader } from '/@/renderer/features/songs/components/song-list-header';
import { SongListContext } from '/@/renderer/features/songs/context/song-list-context';
import { useSongList } from '/@/renderer/features/songs/queries/song-list-query'; import { useSongList } from '/@/renderer/features/songs/queries/song-list-query';
import { useSongListFilters } from '/@/renderer/store'; import { generatePageKey, useCurrentServer, useSongListFilter } from '/@/renderer/store';
const TrackListRoute = () => { const TrackListRoute = () => {
const tableRef = useRef<AgGridReactType | null>(null); const tableRef = useRef<AgGridReactType | null>(null);
const filters = useSongListFilters(); const server = useCurrentServer();
const [searchParams] = useSearchParams(); const [searchParams] = useSearchParams();
const { albumArtistId } = useParams();
const pageKey = generatePageKey(
'song',
albumArtistId ? `${albumArtistId}_${server?.id}` : undefined,
);
const customFilters: Partial<SongListQuery> | undefined = searchParams.get('artistId') const songListFilter = useSongListFilter({ id: albumArtistId, key: pageKey });
? {
artistIds: [searchParams.get('artistId') as string],
}
: undefined;
const itemCountCheck = useSongList( const itemCountCheck = useSongList(
{ {
limit: 1, limit: 1,
startIndex: 0, startIndex: 0,
...filters, ...songListFilter,
...customFilters,
jfParams: {
...customFilters?.jfParams,
...filters.jfParams,
includeItemTypes: 'Audio',
},
ndParams: {
...customFilters?.ndParams,
...filters.ndParams,
},
}, },
{ {
cacheTime: 1000 * 60 * 60 * 2, cacheTime: 1000 * 60,
staleTime: 1000 * 60 * 60 * 2, staleTime: 1000 * 60,
}, },
); );
@ -49,17 +38,17 @@ const TrackListRoute = () => {
return ( return (
<AnimatedPage> <AnimatedPage>
<SongListHeader <SongListContext.Provider value={{ id: albumArtistId, pageKey }}>
customFilters={customFilters} <SongListHeader
itemCount={itemCount} itemCount={itemCount}
tableRef={tableRef} tableRef={tableRef}
title={searchParams.get('artistName') || undefined} title={searchParams.get('artistName') || undefined}
/> />
<SongListContent <SongListContent
customFilters={customFilters} itemCount={itemCount}
itemCount={itemCount} tableRef={tableRef}
tableRef={tableRef} />
/> </SongListContext.Provider>
</AnimatedPage> </AnimatedPage>
); );
}; };

138
src/renderer/store/album.store.ts
View file

@ -1,138 +0,0 @@
import merge from 'lodash/merge';
import create from 'zustand';
import { devtools, persist } from 'zustand/middleware';
import { immer } from 'zustand/middleware/immer';
import { AlbumListArgs, AlbumListSort, SortOrder } from '/@/renderer/api/types';
import { DataTableProps } from '/@/renderer/store/settings.store';
import { ListDisplayType, TableColumn, TablePagination } from '/@/renderer/types';
type TableProps = {
pagination: TablePagination;
scrollOffset: number;
} & DataTableProps;
type ListProps<T> = {
display: ListDisplayType;
filter: T;
grid: {
scrollOffset: number;
size: number;
};
table: TableProps;
};
export type AlbumListFilter = Omit<AlbumListArgs['query'], 'startIndex' | 'limit'>;
export interface AlbumState {
list: ListProps<AlbumListFilter>;
}
export interface AlbumSlice extends AlbumState {
actions: {
setFilters: (data: Partial<AlbumListFilter>) => AlbumListFilter;
setStore: (data: Partial<AlbumSlice>) => void;
setTable: (data: Partial<TableProps>) => void;
setTablePagination: (data: Partial<TableProps['pagination']>) => void;
};
}
export const useAlbumStore = create<AlbumSlice>()(
persist(
devtools(
immer((set, get) => ({
actions: {
setFilters: (data) => {
set((state) => {
state.list.filter = { ...state.list.filter, ...data };
});
return get().list.filter;
},
setStore: (data) => {
set({ ...get(), ...data });
},
setTable: (data) => {
set((state) => {
state.list.table = { ...state.list.table, ...data };
});
},
setTablePagination: (data) => {
set((state) => {
state.list.table.pagination = { ...state.list.table.pagination, ...data };
});
},
},
list: {
display: ListDisplayType.CARD,
filter: {
musicFolderId: undefined,
sortBy: AlbumListSort.RECENTLY_ADDED,
sortOrder: SortOrder.ASC,
},
grid: {
scrollOffset: 0,
size: 50,
},
table: {
autoFit: true,
columns: [
{
column: TableColumn.ROW_INDEX,
width: 50,
},
{
column: TableColumn.TITLE_COMBINED,
width: 500,
},
{
column: TableColumn.DURATION,
width: 100,
},
{
column: TableColumn.ALBUM_ARTIST,
width: 300,
},
{
column: TableColumn.YEAR,
width: 100,
},
],
pagination: {
currentPage: 1,
itemsPerPage: 100,
totalItems: 1,
totalPages: 1,
},
rowHeight: 60,
scrollOffset: 0,
},
},
})),
{ name: 'store_album' },
),
{
merge: (persistedState, currentState) => {
return merge(currentState, persistedState);
},
name: 'store_album',
version: 1,
},
),
);
export const useAlbumStoreActions = () => useAlbumStore((state) => state.actions);
export const useSetAlbumStore = () => useAlbumStore((state) => state.actions.setStore);
export const useSetAlbumFilters = () => useAlbumStore((state) => state.actions.setFilters);
export const useAlbumListStore = () => useAlbumStore((state) => state.list);
export const useAlbumListFilters = () => useAlbumStore((state) => state.list.filter);
export const useAlbumTablePagination = () => useAlbumStore((state) => state.list.table.pagination);
export const useSetAlbumTablePagination = () =>
useAlbumStore((state) => state.actions.setTablePagination);
export const useSetAlbumTable = () => useAlbumStore((state) => state.actions.setTable);

16
src/renderer/store/auth.store.ts
View file

@ -3,11 +3,9 @@ import { nanoid } from 'nanoid/non-secure';
import create from 'zustand'; import create from 'zustand';
import { devtools, persist } from 'zustand/middleware'; import { devtools, persist } from 'zustand/middleware';
import { immer } from 'zustand/middleware/immer'; import { immer } from 'zustand/middleware/immer';
import { AlbumListSort, SongListSort, SortOrder } from '/@/renderer/api/types';
import { useAlbumArtistListDataStore } from '/@/renderer/store/album-artist-list-data.store'; import { useAlbumArtistListDataStore } from '/@/renderer/store/album-artist-list-data.store';
import { useAlbumListDataStore } from '/@/renderer/store/album-list-data.store'; import { useAlbumListDataStore } from '/@/renderer/store/album-list-data.store';
import { useAlbumStore } from '/@/renderer/store/album.store'; import { useListStore } from '/@/renderer/store/list.store';
import { useSongStore } from '/@/renderer/store/song.store';
import { ServerListItem } from '/@/renderer/types'; import { ServerListItem } from '/@/renderer/types';
export interface AuthState { export interface AuthState {
@ -52,16 +50,8 @@ export const useAuthStore = create<AuthSlice>()(
state.currentServer = server; state.currentServer = server;
if (server) { if (server) {
useAlbumStore.getState().actions.setFilters({ // Reset list filters
musicFolderId: undefined, useListStore.getState()._actions.resetFilter();
sortBy: AlbumListSort.RECENTLY_ADDED,
sortOrder: SortOrder.DESC,
});
useSongStore.getState().actions.setFilters({
musicFolderId: undefined,
sortBy: SongListSort.RECENTLY_ADDED,
sortOrder: SortOrder.DESC,
});
// Reset persisted grid list stores // Reset persisted grid list stores
useAlbumListDataStore.getState().actions.setItemData([]); useAlbumListDataStore.getState().actions.setItemData([]);

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

@ -1,9 +1,6 @@
export * from './auth.store'; export * from './auth.store';
export * from './player.store'; export * from './player.store';
export * from './app.store'; export * from './app.store';
export * from './album.store'; export * from './list.store';
export * from './song.store';
export * from './album-artist.store';
export * from './playlist.store';
export * from './album-list-data.store'; export * from './album-list-data.store';
export * from './album-artist-list-data.store'; export * from './album-artist-list-data.store';

482
src/renderer/store/list.store.ts Normal file
View file

@ -0,0 +1,482 @@
import merge from 'lodash/merge';
import create from 'zustand';
import { devtools, persist } from 'zustand/middleware';
import { immer } from 'zustand/middleware/immer';
import shallow from 'zustand/shallow';
import {
AlbumArtistListArgs,
AlbumArtistListSort,
AlbumListArgs,
AlbumListSort,
PlaylistListArgs,
PlaylistListSort,
SongListArgs,
SongListSort,
SortOrder,
} from '/@/renderer/api/types';
import { DataTableProps, PersistedTableColumn } from '/@/renderer/store/settings.store';
import { ListDisplayType, TableColumn, TablePagination } from '/@/renderer/types';
export const generatePageKey = (page: string, id?: string) => {
return id ? `${page}_${id}` : page;
};
export type AlbumListFilter = Omit<AlbumListArgs['query'], 'startIndex' | 'limit'>;
export type SongListFilter = Omit<SongListArgs['query'], 'startIndex' | 'limit'>;
export type AlbumArtistListFilter = Omit<AlbumArtistListArgs['query'], 'startIndex' | 'limit'>;
export type PlaylistListFilter = Omit<PlaylistListArgs['query'], 'startIndex' | 'limit'>;
export type ListKey = keyof ListState['item'] | string;
type FilterType = AlbumListFilter | SongListFilter | AlbumArtistListFilter | PlaylistListFilter;
type ListTableProps = {
pagination: TablePagination;
scrollOffset: number;
} & DataTableProps;
type ListGridProps = {
scrollOffset?: number;
size?: number;
};
type ItemProps<TFilter = any> = {
display: ListDisplayType;
filter: TFilter;
grid?: ListGridProps;
table: ListTableProps;
};
export interface ListState {
detail: {
[key: string]: Omit<ItemProps<any>, 'display' | 'grid'>;
};
item: {
album: ItemProps<AlbumListFilter>;
albumArtist: ItemProps<AlbumArtistListFilter>;
albumDetail: ItemProps<any>;
playlist: ItemProps<PlaylistListFilter>;
song: ItemProps<SongListFilter>;
};
}
type DeterministicArgs = { key: ListKey };
export interface ListSlice extends ListState {
_actions: {
getFilter: (args: { id?: string; key?: string }) => FilterType;
resetFilter: () => void;
setDisplayType: (args: { data: ListDisplayType } & DeterministicArgs) => void;
setFilter: (args: { data: Partial<FilterType> } & DeterministicArgs) => FilterType;
setGrid: (args: { data: Partial<ListGridProps> } & DeterministicArgs) => void;
setStore: (data: Partial<ListSlice>) => void;
setTable: (args: { data: Partial<ListTableProps> } & DeterministicArgs) => void;
setTableColumns: (args: { data: PersistedTableColumn[] } & DeterministicArgs) => void;
setTablePagination: (args: { data: Partial<TablePagination> } & DeterministicArgs) => void;
};
}
export const useListStore = create<ListSlice>()(
persist(
devtools(
immer((set, get) => ({
_actions: {
getFilter: (args) => {
const state = get();
if (args.id && args.key) {
return {
artistIds: [args.id],
...state.item.song.filter,
...state.detail[args.key]?.filter,
jfParams: {
...state.detail[args.key]?.filter.jfParams,
includeItemTypes: 'Audio',
},
ndParams: {
...state.detail[args.key]?.filter.ndParams,
},
};
}
if (args.key) {
return state.item[args.key as keyof ListState['item']].filter;
}
return state.item.song.filter;
},
resetFilter: () => {
set((state) => {
state.item.album.filter = {
musicFolderId: undefined,
sortBy: AlbumListSort.RECENTLY_ADDED,
sortOrder: SortOrder.DESC,
} as AlbumListFilter;
state.item.song.filter = {
musicFolderId: undefined,
sortBy: SongListSort.RECENTLY_ADDED,
sortOrder: SortOrder.DESC,
} as SongListFilter;
});
},
setDisplayType: (args) => {
set((state) => {
const [page] = args.key.split('_');
state.item[page as keyof ListState['item']].display = args.data;
});
},
setFilter: (args) => {
const [, id] = args.key.split('_');
console.log('args', args);
set((state) => {
if (id) {
if (!state.detail[args.key]) {
state.detail[args.key] = {
filter: {} as FilterType,
table: {
pagination: {
currentPage: 1,
itemsPerPage: 100,
totalItems: 0,
totalPages: 0,
},
} as ListTableProps,
};
}
state.detail[args.key].filter = {
...state.detail[args.key as keyof ListState['item']].filter,
...args.data,
} as FilterType;
} else {
state.item[args.key as keyof ListState['item']].filter = {
...state.item[args.key as keyof ListState['item']].filter,
...args.data,
} as FilterType;
}
});
return get()._actions.getFilter({ id, key: args.key });
},
setGrid: (args) => {
set((state) => {
if (state.item[args.key as keyof ListState['item']].grid) {
state.item[args.key as keyof ListState['item']].grid = {
...state.item[args.key as keyof ListState['item']]?.grid,
...args.data,
};
}
});
},
setStore: (data) => {
set({ ...get(), ...data });
},
setTable: (args) => {
set((state) => {
const [page, id] = args.key.split('_');
if (id) {
if (!state.detail[args.key]) {
state.detail[args.key] = {
filter: {} as FilterType,
table: {
pagination: {
currentPage: 1,
itemsPerPage: 100,
totalItems: 0,
totalPages: 0,
},
} as ListTableProps,
};
}
if (!state.detail[args.key]?.table) {
state.detail[args.key].table = {
...state.item[page as keyof ListState['item']].table,
pagination: {
currentPage: 1,
itemsPerPage: 100,
totalItems: 0,
totalPages: 0,
},
};
}
if (!state.detail[args.key]?.filter) {
state.detail[args.key].filter = {
...state.item[page as keyof ListState['item']].filter,
jfParams: {},
ndParams: {},
};
}
} else {
state.item[page as keyof ListState['item']].table = {
...state.item[page as keyof ListState['item']].table,
...args.data,
};
}
});
},
setTableColumns: (args) => {
set((state) => {
state.item[args.key as keyof ListState['item']].table.columns = {
...state.item[args.key as keyof ListState['item']].table.columns,
...args.data,
};
});
},
setTablePagination: (args) => {
set((state) => {
const [, id] = args.key.split('_');
if (id) {
if (!state.detail[args.key]) {
state.detail[args.key] = {
filter: {} as FilterType,
table: {
pagination: {
currentPage: 1,
itemsPerPage: 100,
totalItems: 0,
totalPages: 0,
},
} as ListTableProps,
};
}
state.detail[args.key as keyof ListState['item']].table.pagination = {
...state.detail[args.key as keyof ListState['item']].table.pagination,
...args.data,
};
} else {
state.item[args.key as keyof ListState['item']].table.pagination = {
...state.item[args.key as keyof ListState['item']].table.pagination,
...args.data,
};
}
});
},
},
detail: {},
item: {
album: {
display: ListDisplayType.CARD,
filter: {
sortBy: AlbumListSort.RECENTLY_ADDED,
sortOrder: SortOrder.DESC,
},
grid: { scrollOffset: 0, size: 0 },
table: {
autoFit: true,
columns: [
{
column: TableColumn.ROW_INDEX,
width: 50,
},
{
column: TableColumn.TITLE_COMBINED,
width: 500,
},
{
column: TableColumn.DURATION,
width: 100,
},
{
column: TableColumn.ALBUM_ARTIST,
width: 300,
},
{
column: TableColumn.YEAR,
width: 100,
},
],
pagination: {
currentPage: 1,
itemsPerPage: 100,
totalItems: 1,
totalPages: 1,
},
rowHeight: 60,
scrollOffset: 0,
},
},
albumArtist: {
display: ListDisplayType.CARD,
filter: {
sortBy: AlbumArtistListSort.NAME,
sortOrder: SortOrder.DESC,
},
grid: { scrollOffset: 0, size: 0 },
table: {
autoFit: true,
columns: [
{
column: TableColumn.ROW_INDEX,
width: 50,
},
{
column: TableColumn.TITLE_COMBINED,
width: 500,
},
],
pagination: {
currentPage: 1,
itemsPerPage: 100,
totalItems: 1,
totalPages: 1,
},
rowHeight: 60,
scrollOffset: 0,
},
},
albumDetail: {
display: ListDisplayType.TABLE,
filter: {
sortBy: SongListSort.ALBUM,
sortOrder: SortOrder.ASC,
},
table: {
autoFit: true,
columns: [],
followCurrentSong: false,
pagination: {
currentPage: 1,
itemsPerPage: 100,
totalItems: 1,
totalPages: 1,
},
rowHeight: 60,
scrollOffset: 0,
},
},
playlist: {
display: ListDisplayType.CARD,
filter: {
sortBy: PlaylistListSort.NAME,
sortOrder: SortOrder.DESC,
},
grid: { scrollOffset: 0, size: 0 },
table: {
autoFit: true,
columns: [
{
column: TableColumn.ROW_INDEX,
width: 50,
},
{
column: TableColumn.TITLE_COMBINED,
width: 500,
},
{
column: TableColumn.DURATION,
width: 100,
},
{
column: TableColumn.ALBUM,
width: 500,
},
],
pagination: {
currentPage: 1,
itemsPerPage: 100,
totalItems: 1,
totalPages: 1,
},
rowHeight: 60,
scrollOffset: 0,
},
},
song: {
display: ListDisplayType.CARD,
filter: {
sortBy: SongListSort.RECENTLY_ADDED,
sortOrder: SortOrder.DESC,
},
grid: { scrollOffset: 0, size: 0 },
table: {
autoFit: true,
columns: [
{
column: TableColumn.ROW_INDEX,
width: 50,
},
{
column: TableColumn.TITLE_COMBINED,
width: 500,
},
{
column: TableColumn.DURATION,
width: 100,
},
{
column: TableColumn.ALBUM,
width: 300,
},
{
column: TableColumn.ARTIST,
width: 100,
},
{
column: TableColumn.YEAR,
width: 100,
},
{
column: TableColumn.DATE_ADDED,
width: 100,
},
{
column: TableColumn.PLAY_COUNT,
width: 100,
},
],
pagination: {
currentPage: 1,
itemsPerPage: 100,
totalItems: 1,
totalPages: 1,
},
rowHeight: 60,
scrollOffset: 0,
},
},
},
})),
{ name: 'store_list' },
),
{
merge: (persistedState, currentState) => {
return merge(currentState, persistedState);
},
name: 'store_list',
partialize: (state) => {
return Object.fromEntries(
Object.entries(state).filter(([key]) => !['detail'].includes(key)),
);
},
version: 1,
},
),
);
export const useListStoreActions = () => useListStore((state) => state._actions);
export const useAlbumListStore = () => useListStore((state) => state.item.album, shallow);
export const useAlbumArtistListStore = () =>
useListStore((state) => state.item.albumArtist, shallow);
export const useSongListStore = () => useListStore((state) => state.item.song, shallow);
export const useSongListFilter = (args: { id?: string; key?: string }) =>
useListStore((state) => {
return state._actions.getFilter({ id: args.id, key: args.key }) as SongListFilter;
}, shallow);
export const useAlbumListFilter = (args: { id?: string; key?: string }) =>
useListStore((state) => {
return state._actions.getFilter({ id: args.id, key: args.key }) as AlbumListFilter;
}, shallow);
export const useListDetail = (key: string) => useListStore((state) => state.detail[key], shallow);

146
src/renderer/store/song.store.ts
View file

@ -1,146 +0,0 @@
import merge from 'lodash/merge';
import create from 'zustand';
import { devtools, persist } from 'zustand/middleware';
import { immer } from 'zustand/middleware/immer';
import { SongListArgs, SongListSort, SortOrder } from '/@/renderer/api/types';
import { DataTableProps } from '/@/renderer/store/settings.store';
import { ListDisplayType, TableColumn, TablePagination } from '/@/renderer/types';
type TableProps = {
pagination: TablePagination;
scrollOffset: number;
} & DataTableProps;
type ListProps<T> = {
display: ListDisplayType;
filter: T;
table: TableProps;
};
export type SongListFilter = Omit<SongListArgs['query'], 'startIndex' | 'limit'>;
interface SongState {
list: ListProps<SongListFilter>;
}
export interface SongSlice extends SongState {
actions: {
setFilters: (data: Partial<SongListFilter>) => SongListFilter;
setStore: (data: Partial<SongSlice>) => void;
setTable: (data: Partial<TableProps>) => void;
setTablePagination: (data: Partial<TableProps['pagination']>) => void;
};
}
export const useSongStore = create<SongSlice>()(
persist(
devtools(
immer((set, get) => ({
actions: {
setFilters: (data) => {
set((state) => {
state.list.filter = { ...state.list.filter, ...data };
});
return get().list.filter;
},
setStore: (data) => {
set({ ...get(), ...data });
},
setTable: (data) => {
set((state) => {
state.list.table = { ...state.list.table, ...data };
});
},
setTablePagination: (data) => {
set((state) => {
state.list.table.pagination = { ...state.list.table.pagination, ...data };
});
},
},
list: {
display: ListDisplayType.TABLE,
filter: {
musicFolderId: undefined,
sortBy: SongListSort.RECENTLY_ADDED,
sortOrder: SortOrder.ASC,
},
table: {
autoFit: true,
columns: [
{
column: TableColumn.ROW_INDEX,
width: 50,
},
{
column: TableColumn.TITLE_COMBINED,
width: 500,
},
{
column: TableColumn.DURATION,
width: 100,
},
{
column: TableColumn.ALBUM,
width: 300,
},
{
column: TableColumn.ARTIST,
width: 100,
},
{
column: TableColumn.YEAR,
width: 100,
},
{
column: TableColumn.DATE_ADDED,
width: 100,
},
{
column: TableColumn.PLAY_COUNT,
width: 100,
},
],
pagination: {
currentPage: 1,
itemsPerPage: 100,
totalItems: 1,
totalPages: 1,
},
rowHeight: 60,
scrollOffset: 0,
},
},
})),
{ name: 'store_song' },
),
{
merge: (persistedState, currentState) => {
return merge(currentState, persistedState);
},
name: 'store_song',
version: 1,
},
),
);
export const useSongStoreActions = () => useSongStore((state) => state.actions);
export const useSetSongStore = () => useSongStore((state) => state.actions.setStore);
export const useSetSongFilters = () => useSongStore((state) => state.actions.setFilters);
export const useSongFilters = () => {
return useSongStore((state) => [state.list.filter, state.actions.setFilters]);
};
export const useSongListFilters = () => useSongStore((state) => state.list.filter);
export const useSongListStore = () => useSongStore((state) => state.list);
export const useSongTablePagination = () => useSongStore((state) => state.list.table.pagination);
export const useSetSongTablePagination = () =>
useSongStore((state) => state.actions.setTablePagination);
export const useSetSongTable = () => useSongStore((state) => state.actions.setTable);