Cool_Tools/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2024-11-20 06:27:09 +01:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Add album artist list route

Browse Source
This commit is contained in:
jeffvli 2022-12-30 21:04:06 -08:00
parent 185175aa89
commit 24af17b8fe
19 changed files with 1269 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/renderer/api/controller.ts
View File

@ -191,9 +191,19 @@ const getGenreList = async (args: GenreListArgs) => {
return (apiController('getGenreList') as ControllerEndpoint['getGenreList'])?.(args);
};
const getAlbumArtistList = async (args: AlbumArtistListArgs) => {
return (apiController('getAlbumArtistList') as ControllerEndpoint['getAlbumArtistList'])?.(args);
};
const getArtistList = async (args: ArtistListArgs) => {
return (apiController('getArtistList') as ControllerEndpoint['getArtistList'])?.(args);
};
export const controller = {
getAlbumArtistList,
getAlbumDetail,
getAlbumList,
getArtistList,
getGenreList,
getMusicFolderList,
getSongList,

62
src/renderer/api/jellyfin.api.ts
View File

@ -2,6 +2,7 @@ import ky from 'ky';
import { nanoid } from 'nanoid/non-secure';
import type {
JFAlbum,
JFAlbumArtist,
JFAlbumArtistDetail,
JFAlbumArtistDetailResponse,
JFAlbumArtistList,
@ -33,6 +34,7 @@ import type {
import { JFCollectionType } from '/@/renderer/api/jellyfin.types';
import type {
Album,
AlbumArtist,
AlbumArtistDetailArgs,
AlbumArtistListArgs,
AlbumDetailArgs,
@ -138,7 +140,7 @@ const getAlbumArtistDetail = async (args: AlbumArtistDetailArgs): Promise<JFAlbu
};
const data = await api
.get(`/users/${server?.userId}/items/${query.id}`, {
.get(`users/${server?.userId}/items/${query.id}`, {
headers: { 'X-MediaBrowser-Token': server?.credential },
prefixUrl: server?.url,
searchParams: parseSearchParams(searchParams),
@ -170,12 +172,15 @@ const getAlbumArtistList = async (args: AlbumArtistListArgs): Promise<JFAlbumArt
const { query, server, signal } = args;
const searchParams: JFAlbumArtistListParams = {
fields: 'Genres, DateCreated, ExternalUrls, Overview',
imageTypeLimit: 1,
limit: query.limit,
parentId: query.musicFolderId,
recursive: true,
sortBy: albumArtistListSortMap.jellyfin[query.sortBy],
sortOrder: sortOrderMap.jellyfin[query.sortOrder],
startIndex: query.startIndex,
userId: server?.userId || undefined,
};
const data = await api
@ -187,7 +192,11 @@ const getAlbumArtistList = async (args: AlbumArtistListArgs): Promise<JFAlbumArt
})
.json<JFAlbumArtistListResponse>();
return data;
return {
items: data.Items,
startIndex: query.startIndex,
totalRecordCount: data.TotalRecordCount,
};
};
const getArtistList = async (args: ArtistListArgs): Promise<JFArtistList> => {
@ -303,9 +312,11 @@ const getSongList = async (args: SongListArgs): Promise<JFSongList> => {
const yearsFilter = yearsGroup.length ? getCommaDelimitedString(yearsGroup) : undefined;
const albumIdsFilter = query.albumIds ? getCommaDelimitedString(query.albumIds) : undefined;
const artistIdsFilter = query.artistIds ? getCommaDelimitedString(query.artistIds) : undefined;
const searchParams: JFSongListParams & { maxYear?: number; minYear?: number } = {
albumIds: albumIdsFilter,
artistIds: artistIdsFilter,
fields: 'Genres, DateCreated, MediaSources, ParentId',
includeItemTypes: 'Audio',
limit: query.limit,
@ -496,6 +507,26 @@ const getStreamUrl = (args: {
);
};
const getAlbumArtistCoverArtUrl = (args: {
baseUrl: string;
item: JFAlbumArtist;
size: number;
}) => {
const size = args.size ? args.size : 300;
if (!args.item.ImageTags?.Primary) {
return null;
}
return (
`${args.baseUrl}/Items` +
`/${args.item.Id}` +
'/Images/Primary' +
`?width=${size}&height=${size}` +
'&quality=96'
);
};
const getAlbumCoverArtUrl = (args: { baseUrl: string; item: JFAlbum; size: number }) => {
const size = args.size ? args.size : 300;
@ -628,6 +659,32 @@ const normalizeAlbum = (item: JFAlbum, server: ServerListItem, imageSize?: numbe
};
};
const normalizeAlbumArtist = (
item: JFAlbumArtist,
server: ServerListItem,
imageSize?: number,
): AlbumArtist => {
return {
albumCount: null,
backgroundImageUrl: null,
biography: item.Overview || null,
duration: item.RunTimeTicks / 10000000,
genres: item.GenreItems?.map((entry) => ({ id: entry.Id, name: entry.Name })),
id: item.Id,
imageUrl: getAlbumArtistCoverArtUrl({
baseUrl: server.url,
item,
size: imageSize || 300,
}),
isFavorite: item.UserData.IsFavorite || false,
lastPlayedAt: null,
name: item.Name,
playCount: item.UserData.PlayCount,
rating: null,
songCount: null,
};
};
// const normalizeArtist = (item: any) => {
// return {
// album: (item.album || []).map((entry: any) => normalizeAlbum(entry)),
@ -717,5 +774,6 @@ export const jellyfinApi = {
export const jfNormalize = {
album: normalizeAlbum,
albumArtist: normalizeAlbumArtist,
song: normalizeSong,
};

14
src/renderer/api/jellyfin.types.ts
View File

@ -23,7 +23,11 @@ export interface JFAlbumArtistListResponse extends JFBasePaginatedResponse {
Items: JFAlbumArtist[];
}
export type JFAlbumArtistList = JFAlbumArtistListResponse;
export type JFAlbumArtistList = {
items: JFAlbumArtist[];
startIndex: number;
totalRecordCount: number;
};
export interface JFArtistListResponse extends JFBasePaginatedResponse {
Items: JFAlbumArtist[];
@ -149,6 +153,13 @@ export type JFAlbumArtist = {
RunTimeTicks: number;
ServerId: string;
Type: string;
UserData: {
IsFavorite: boolean;
Key: string;
PlayCount: number;
PlaybackPositionTicks: number;
Played: boolean;
};
};
export type JFArtist = {
@ -474,6 +485,7 @@ type JFBaseParams = {
imageTypeLimit?: number;
parentId?: string;
recursive?: boolean;
userId?: string;
};
type JFPaginationParams = {

44
src/renderer/api/navidrome.api.ts
View File

@ -30,6 +30,7 @@ import type {
NDPlaylistDetailResponse,
NDSongList,
NDSongListResponse,
NDAlbumArtist,
} from '/@/renderer/api/navidrome.types';
import { NDPlaylistListSort, NDSongListSort, NDSortOrder } from '/@/renderer/api/navidrome.types';
import type {
@ -49,6 +50,7 @@ import type {
PlaylistDetailArgs,
CreatePlaylistResponse,
PlaylistSongListArgs,
AlbumArtist,
} from '/@/renderer/api/types';
import {
playlistListSortMap,
@ -160,15 +162,21 @@ const getAlbumArtistList = async (args: AlbumArtistListArgs): Promise<NDAlbumArt
...query.ndParams,
};
const data = await api
.get('api/artist', {
headers: { 'x-nd-authorization': `Bearer ${server?.ndCredential}` },
searchParams,
signal,
})
.json<NDArtistListResponse>();
const res = await api.get('api/artist', {
headers: { 'x-nd-authorization': `Bearer ${server?.ndCredential}` },
prefixUrl: server?.url,
searchParams: parseSearchParams(searchParams),
signal,
});
return data;
const data = await res.json<NDArtistListResponse>();
const itemCount = res.headers.get('x-total-count');
return {
items: data,
startIndex: query.startIndex,
totalRecordCount: Number(itemCount),
};
};
const getAlbumDetail = async (args: AlbumDetailArgs): Promise<NDAlbumDetail> => {
@ -238,6 +246,7 @@ const getSongList = async (args: SongListArgs): Promise<NDSongList> => {
_sort: songListSortMap.navidrome[query.sortBy],
_start: query.startIndex,
album_id: query.albumIds,
artist_id: query.artistIds,
title: query.searchTerm,
...query.ndParams,
};
@ -487,6 +496,24 @@ const normalizeAlbum = (item: NDAlbum, server: ServerListItem, imageSize?: numbe
};
};
const normalizeAlbumArtist = (item: NDAlbumArtist): AlbumArtist => {
return {
albumCount: item.albumCount,
backgroundImageUrl: null,
biography: item.biography,
duration: null,
genres: item.genres,
id: item.id,
imageUrl: item.largeImageUrl,
isFavorite: item.starred,
lastPlayedAt: item.playDate ? item.playDate.split('T')[0] : null,
name: item.name,
playCount: item.playCount,
rating: item.rating,
songCount: item.songCount,
};
};
export const navidromeApi = {
authenticate,
createPlaylist,
@ -505,5 +532,6 @@ export const navidromeApi = {
export const ndNormalize = {
album: normalizeAlbum,
albumArtist: normalizeAlbumArtist,
song: normalizeSong,
};

7
src/renderer/api/navidrome.types.ts
View File

@ -118,7 +118,11 @@ export type NDAlbumArtist = {
export type NDAuthenticationResponse = NDAuthenticate;
export type NDAlbumArtistList = NDAlbumArtist[];
export type NDAlbumArtistList = {
items: NDAlbumArtist[];
startIndex: number;
totalRecordCount: number;
};
export type NDAlbumArtistDetail = NDAlbumArtist;
@ -230,6 +234,7 @@ export enum NDSongListSort {
export type NDSongListParams = {
_sort?: NDSongListSort;
album_id?: string[];
artist_id?: string[];
genre_id?: string;
starred?: boolean;
} & NDPagination &

30
src/renderer/api/normalize.ts
View File

@ -1,15 +1,17 @@
import { jfNormalize } from '/@/renderer/api/jellyfin.api';
import type {
JFAlbum,
JFAlbumArtist,
JFGenreList,
JFMusicFolderList,
JFSong,
} from '/@/renderer/api/jellyfin.types';
import { ndNormalize } from '/@/renderer/api/navidrome.api';
import type { NDAlbum, NDGenreList, NDSong } from '/@/renderer/api/navidrome.types';
import type { NDAlbum, NDAlbumArtist, NDGenreList, NDSong } from '/@/renderer/api/navidrome.types';
import { SSGenreList, SSMusicFolderList } from '/@/renderer/api/subsonic.types';
import type {
Album,
RawAlbumArtistListResponse,
RawAlbumDetailResponse,
RawAlbumListResponse,
RawGenreListResponse,
@ -136,7 +138,33 @@ const genreList = (data: RawGenreListResponse | undefined, server: ServerListIte
return genres;
};
const albumArtistList = (
data: RawAlbumArtistListResponse | undefined,
server: ServerListItem | null,
) => {
let albumArtists;
switch (server?.type) {
case 'jellyfin':
albumArtists = data?.items.map((item) =>
jfNormalize.albumArtist(item as JFAlbumArtist, server),
);
break;
case 'navidrome':
albumArtists = data?.items.map((item) => ndNormalize.albumArtist(item as NDAlbumArtist));
break;
case 'subsonic':
break;
}
return {
items: albumArtists,
startIndex: data?.startIndex,
totalRecordCount: data?.totalRecordCount,
};
};
export const normalize = {
albumArtistList,
albumDetail,
albumList,
genreList,

28
src/renderer/api/query-keys.ts
View File

@ -1,15 +1,32 @@
import type { AlbumListQuery, SongListQuery, AlbumDetailQuery } from './types';
import type {
AlbumListQuery,
SongListQuery,
AlbumDetailQuery,
AlbumArtistListQuery,
ArtistListQuery,
} from './types';
export const queryKeys = {
albumArtists: {
list: (serverId: string, query?: AlbumArtistListQuery) =>
[serverId, 'albumArtists', 'list', query] as const,
root: (serverId: string) => [serverId, 'albumArtists'] as const,
},
albums: {
detail: (serverId: string, query: AlbumDetailQuery) =>
detail: (serverId: string, query?: AlbumDetailQuery) =>
[serverId, 'albums', 'detail', query] as const,
list: (serverId: string, query: AlbumListQuery) => [serverId, 'albums', 'list', query] as const,
root: ['albums'],
list: (serverId: string, query?: AlbumListQuery) =>
[serverId, 'albums', 'list', query] as const,
root: (serverId: string) => [serverId, 'albums'],
serverRoot: (serverId: string) => [serverId, 'albums'],
songs: (serverId: string, query: SongListQuery) =>
[serverId, 'albums', 'songs', query] as const,
},
artists: {
list: (serverId: string, query?: ArtistListQuery) =>
[serverId, 'artists', 'list', query] as const,
root: (serverId: string) => [serverId, 'artists'] as const,
},
genres: {
list: (serverId: string) => [serverId, 'genres', 'list'] as const,
root: (serverId: string) => [serverId, 'genres'] as const,
@ -21,6 +38,7 @@ export const queryKeys = {
root: (serverId: string) => [serverId] as const,
},
songs: {
list: (serverId: string, query: SongListQuery) => [serverId, 'songs', 'list', query] as const,
list: (serverId: string, query?: SongListQuery) => [serverId, 'songs', 'list', query] as const,
root: (serverId: string) => [serverId, 'songs'] as const,
},
};

6
src/renderer/api/subsonic.api.ts
View File

@ -177,7 +177,11 @@ const getAlbumArtistList = async (args: AlbumArtistListArgs): Promise<SSAlbumArt
const artists = (data.artists?.index || []).flatMap((index: SSArtistIndex) => index.artist);
return artists;
return {
items: artists,
startIndex: query.startIndex,
totalRecordCount: null,
};
};
const getGenreList = async (args: GenreListArgs): Promise<SSGenreList> => {

6
src/renderer/api/subsonic.types.ts
View File

@ -33,7 +33,11 @@ export type SSAlbumArtistDetailResponse = {
};
};
export type SSAlbumArtistList = SSAlbumArtistListEntry[];
export type SSAlbumArtistList = {
items: SSAlbumArtistListEntry[];
startIndex: number;
totalRecordCount: number | null;
};
export type SSAlbumArtistListResponse = {
artists: {

19
src/renderer/api/types.ts
View File

@ -202,13 +202,19 @@ export type Song = {
};
export type AlbumArtist = {
albumCount: number | null;
backgroundImageUrl: string | null;
biography: string | null;
createdAt: string;
duration: number | null;
genres: Genre[];
id: string;
imageUrl: string | null;
isFavorite: boolean;
lastPlayedAt: string | null;
name: string;
remoteCreatedAt: string | null;
serverFolderId: string;
updatedAt: string;
playCount: number | null;
rating: number | null;
songCount: number | null;
};
export type RelatedAlbumArtist = {
@ -418,6 +424,7 @@ export enum SongListSort {
export type SongListQuery = {
albumIds?: string[];
artistIds?: string[];
jfParams?: {
filters?: string;
genreIds?: string;
@ -432,7 +439,8 @@ export type SongListQuery = {
limit?: number;
musicFolderId?: string;
ndParams?: {
artist_id?: string;
album_id?: string[];
artist_id?: string[];
compilation?: boolean;
genre_id?: string;
has_rating?: boolean;
@ -554,6 +562,7 @@ export type AlbumArtistListQuery = {
name?: string;
starred?: boolean;
};
searchTerm?: string;
sortBy: AlbumArtistListSort;
sortOrder: SortOrder;
startIndex: number;

13
src/renderer/components/virtual-table/table-config-dropdown.tsx
View File

@ -49,6 +49,19 @@ export const ALBUM_TABLE_COLUMNS = [
{ label: 'Plays', value: TableColumn.PLAY_COUNT },
];
export const ALBUMARTIST_TABLE_COLUMNS = [
{ label: 'Row Index', value: TableColumn.ROW_INDEX },
{ label: 'Title', value: TableColumn.TITLE },
{ label: 'Title (Combined)', value: TableColumn.TITLE_COMBINED },
{ label: 'Duration', value: TableColumn.DURATION },
{ label: 'Biography', value: TableColumn.BIOGRAPHY },
{ label: 'Genre', value: TableColumn.GENRE },
{ label: 'Last Played', value: TableColumn.LAST_PLAYED },
{ label: 'Plays', value: TableColumn.PLAY_COUNT },
{ label: 'Album Count', value: TableColumn.ALBUM_COUNT },
{ label: 'Song Count', value: TableColumn.SONG_COUNT },
];
interface TableConfigDropdownProps {
type: TableType;
}

371
src/renderer/features/artists/components/album-artist-list-content.tsx Normal file
View File

@ -0,0 +1,371 @@
import {
ALBUMARTIST_CARD_ROWS,
getColumnDefs,
TablePagination,
VirtualGridAutoSizerContainer,
VirtualInfiniteGrid,
VirtualInfiniteGridRef,
VirtualTable,
} from '/@/renderer/components';
import { AppRoute } from '/@/renderer/router/routes';
import { ListDisplayType, CardRow, LibraryItem } from '/@/renderer/types';
import AutoSizer from 'react-virtualized-auto-sizer';
import { MutableRefObject, useCallback, useMemo } from 'react';
import { ListOnScrollProps } from 'react-window';
import { api } from '/@/renderer/api';
import { queryKeys } from '/@/renderer/api/query-keys';
import { AlbumArtist, AlbumArtistListSort } from '/@/renderer/api/types';
import { useHandlePlayQueueAdd } from '/@/renderer/features/player/hooks/use-handle-playqueue-add';
import { useQueryClient } from '@tanstack/react-query';
import {
useCurrentServer,
useAlbumArtistListStore,
useAlbumArtistTablePagination,
useSetAlbumArtistStore,
useSetAlbumArtistTable,
useSetAlbumArtistTablePagination,
} from '/@/renderer/store';
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import {
BodyScrollEvent,
CellContextMenuEvent,
ColDef,
GridReadyEvent,
IDatasource,
PaginationChangedEvent,
RowDoubleClickedEvent,
} from '@ag-grid-community/core';
import { AnimatePresence } from 'framer-motion';
import debounce from 'lodash/debounce';
import { openContextMenu } from '/@/renderer/features/context-menu';
import { ALBUM_CONTEXT_MENU_ITEMS } from '/@/renderer/features/context-menu/context-menu-items';
import sortBy from 'lodash/sortBy';
import { generatePath, useNavigate } from 'react-router';
import { useAlbumArtistList } from '/@/renderer/features/artists/queries/album-artist-list-query';
interface AlbumArtistListContentProps {
gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
tableRef: MutableRefObject<AgGridReactType | null>;
}
export const AlbumArtistListContent = ({ gridRef, tableRef }: AlbumArtistListContentProps) => {
const queryClient = useQueryClient();
const navigate = useNavigate();
const server = useCurrentServer();
const page = useAlbumArtistListStore();
const setPage = useSetAlbumArtistStore();
const handlePlayQueueAdd = useHandlePlayQueueAdd();
const pagination = useAlbumArtistTablePagination();
const setPagination = useSetAlbumArtistTablePagination();
const setTable = useSetAlbumArtistTable();
const isPaginationEnabled = page.display === ListDisplayType.TABLE_PAGINATED;
const checkAlbumArtistList = useAlbumArtistList(
{
limit: 1,
startIndex: 0,
...page.filter,
},
{
cacheTime: Infinity,
staleTime: 60 * 1000 * 5,
},
);
const columnDefs: ColDef[] = useMemo(
() => getColumnDefs(page.table.columns),
[page.table.columns],
);
const defaultColumnDefs: ColDef = useMemo(() => {
return {
lockPinned: true,
lockVisible: true,
resizable: true,
};
}, []);
const onTableReady = useCallback(
(params: GridReadyEvent) => {
const dataSource: IDatasource = {
getRows: async (params) => {
const limit = params.endRow - params.startRow;
const startIndex = params.startRow;
const queryKey = queryKeys.albumArtists.list(server?.id || '', {
limit,
startIndex,
...page.filter,
});
const albumArtistsRes = await queryClient.fetchQuery(queryKey, async ({ signal }) =>
api.controller.getAlbumArtistList({
query: {
limit,
startIndex,
...page.filter,
},
server,
signal,
}),
);
const albums = api.normalize.albumArtistList(albumArtistsRes, server);
params.successCallback(
albums?.items || [],
albumArtistsRes?.totalRecordCount || undefined,
);
},
rowCount: undefined,
};
params.api.setDatasource(dataSource);
// params.api.ensureIndexVisible(page.table.scrollOffset || 0, 'top');
},
[page.filter, queryClient, server],
);
const onTablePaginationChanged = useCallback(
(event: PaginationChangedEvent) => {
if (!isPaginationEnabled || !event.api) return;
// Scroll to top of page on pagination change
const currentPageStartIndex = pagination.currentPage * pagination.itemsPerPage;
event.api?.ensureIndexVisible(currentPageStartIndex, 'top');
setPagination({
itemsPerPage: event.api.paginationGetPageSize(),
totalItems: event.api.paginationGetRowCount(),
totalPages: event.api.paginationGetTotalPages() + 1,
});
},
[isPaginationEnabled, pagination.currentPage, pagination.itemsPerPage, setPagination],
);
const handleTableSizeChange = () => {
if (page.table.autoFit) {
tableRef?.current?.api.sizeColumnsToFit();
}
};
const handleTableColumnChange = useCallback(() => {
const { columnApi } = tableRef?.current || {};
const columnsOrder = columnApi?.getAllGridColumns();
if (!columnsOrder) return;
const columnsInSettings = page.table.columns;
const updatedColumns = [];
for (const column of columnsOrder) {
const columnInSettings = columnsInSettings.find((c) => c.column === column.getColDef().colId);
if (columnInSettings) {
updatedColumns.push({
...columnInSettings,
...(!page.table.autoFit && {
width: column.getColDef().width,
}),
});
}
}
setTable({ columns: updatedColumns });
}, [page.table.autoFit, page.table.columns, setTable, tableRef]);
const debouncedTableColumnChange = debounce(handleTableColumnChange, 200);
const handleTableScroll = (e: BodyScrollEvent) => {
const scrollOffset = Number((e.top / page.table.rowHeight).toFixed(0));
setTable({ scrollOffset });
};
const fetch = useCallback(
async ({ skip: startIndex, take: limit }: { skip: number; take: number }) => {
const queryKey = queryKeys.albumArtists.list(server?.id || '', {
limit,
startIndex,
...page.filter,
});
const albumArtistsRes = await queryClient.fetchQuery(queryKey, async ({ signal }) =>
api.controller.getAlbumArtistList({
query: {
limit,
startIndex,
...page.filter,
},
server,
signal,
}),
);
return api.normalize.albumArtistList(albumArtistsRes, server);
},
[page.filter, queryClient, server],
);
const handleGridScroll = useCallback(
(e: ListOnScrollProps) => {
setPage({
list: {
...page,
grid: {
...page.grid,
scrollOffset: e.scrollOffset,
},
},
});
},
[page, setPage],
);
const cardRows = useMemo(() => {
const rows: CardRow<AlbumArtist>[] = [ALBUMARTIST_CARD_ROWS.name];
switch (page.filter.sortBy) {
case AlbumArtistListSort.DURATION:
rows.push(ALBUMARTIST_CARD_ROWS.duration);
break;
case AlbumArtistListSort.FAVORITED:
break;
case AlbumArtistListSort.NAME:
break;
case AlbumArtistListSort.ALBUM_COUNT:
rows.push(ALBUMARTIST_CARD_ROWS.albumCount);
break;
case AlbumArtistListSort.PLAY_COUNT:
rows.push(ALBUMARTIST_CARD_ROWS.playCount);
break;
case AlbumArtistListSort.RANDOM:
break;
case AlbumArtistListSort.RATING:
rows.push(ALBUMARTIST_CARD_ROWS.rating);
break;
case AlbumArtistListSort.RECENTLY_ADDED:
break;
case AlbumArtistListSort.SONG_COUNT:
rows.push(ALBUMARTIST_CARD_ROWS.songCount);
break;
case AlbumArtistListSort.RELEASE_DATE:
break;
}
return rows;
}, [page.filter.sortBy]);
const handleContextMenu = (e: CellContextMenuEvent) => {
if (!e.event) return;
const clickEvent = e.event as MouseEvent;
clickEvent.preventDefault();
const selectedNodes = e.api.getSelectedNodes();
const selectedIds = selectedNodes.map((node) => node.data.id);
let selectedRows = sortBy(selectedNodes, ['rowIndex']).map((node) => node.data);
if (!selectedIds.includes(e.data.id)) {
e.api.deselectAll();
e.node.setSelected(true);
selectedRows = [e.data];
}
openContextMenu({
data: selectedRows,
menuItems: ALBUM_CONTEXT_MENU_ITEMS,
type: LibraryItem.ALBUM,
xPos: clickEvent.clientX,
yPos: clickEvent.clientY,
});
};
const handleRowDoubleClick = (e: RowDoubleClickedEvent) => {
navigate(generatePath(AppRoute.LIBRARY_ALBUMARTISTS_DETAIL, { albumArtistId: e.data.id }));
};
return (
<>
<VirtualGridAutoSizerContainer>
{page.display === ListDisplayType.CARD || page.display === ListDisplayType.POSTER ? (
<AutoSizer>
{({ height, width }) => (
<VirtualInfiniteGrid
key={`albumartist-list-${server?.id}-${page.display}`}
ref={gridRef}
cardRows={cardRows}
display={page.display || ListDisplayType.CARD}
fetchFn={fetch}
handlePlayQueueAdd={handlePlayQueueAdd}
height={height}
initialScrollOffset={page?.grid.scrollOffset || 0}
itemCount={checkAlbumArtistList?.data?.totalRecordCount || 0}
itemGap={20}
itemSize={150 + page.grid?.size}
itemType={LibraryItem.ALBUM_ARTIST}
minimumBatchSize={40}
route={{
route: AppRoute.LIBRARY_ALBUMARTISTS_DETAIL,
slugs: [{ idProperty: 'id', slugProperty: 'albumArtistId' }],
}}
width={width}
onScroll={handleGridScroll}
/>
)}
</AutoSizer>
) : (
<VirtualTable
// https://github.com/ag-grid/ag-grid/issues/5284
// Key is used to force remount of table when display, rowHeight, or server changes
key={`table-${page.display}-${page.table.rowHeight}-${server?.id}`}
ref={tableRef}
alwaysShowHorizontalScroll
animateRows
maintainColumnOrder
suppressCopyRowsToClipboard
suppressMoveWhenRowDragging
suppressPaginationPanel
suppressRowDrag
suppressScrollOnNewData
blockLoadDebounceMillis={200}
cacheBlockSize={500}
cacheOverflowSize={1}
columnDefs={columnDefs}
defaultColDef={defaultColumnDefs}
enableCellChangeFlash={false}
getRowId={(data) => data.data.id}
infiniteInitialRowCount={checkAlbumArtistList.data?.totalRecordCount || 100}
pagination={isPaginationEnabled}
paginationAutoPageSize={isPaginationEnabled}
paginationPageSize={page.table.pagination.itemsPerPage || 100}
rowBuffer={20}
rowHeight={page.table.rowHeight || 40}
rowModelType="infinite"
rowSelection="multiple"
onBodyScrollEnd={handleTableScroll}
onCellContextMenu={handleContextMenu}
onColumnMoved={handleTableColumnChange}
onColumnResized={debouncedTableColumnChange}
onGridReady={onTableReady}
onGridSizeChanged={handleTableSizeChange}
onPaginationChanged={onTablePaginationChanged}
onRowDoubleClicked={handleRowDoubleClick}
/>
)}
</VirtualGridAutoSizerContainer>
{isPaginationEnabled && (
<AnimatePresence
presenceAffectsLayout
initial={false}
mode="wait"
>
{page.display === ListDisplayType.TABLE_PAGINATED && (
<TablePagination
pagination={pagination}
setPagination={setPagination}
tableRef={tableRef}
/>
)}
</AnimatePresence>
)}
</>
);
};

502
src/renderer/features/artists/components/album-artist-list-header.tsx Normal file
View File

@ -0,0 +1,502 @@
import type { ChangeEvent, MouseEvent, MutableRefObject } from 'react';
import { useCallback } from 'react';
import { IDatasource } from '@ag-grid-community/core';
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import { Flex, Group, Stack } from '@mantine/core';
import { useQueryClient } from '@tanstack/react-query';
import debounce from 'lodash/debounce';
import {
RiArrowDownSLine,
RiFilter3Line,
RiFolder2Line,
RiMoreFill,
RiSortAsc,
RiSortDesc,
} from 'react-icons/ri';
import styled from 'styled-components';
import { api } from '/@/renderer/api';
import { queryKeys } from '/@/renderer/api/query-keys';
import { AlbumArtistListSort, ServerType, SortOrder } from '/@/renderer/api/types';
import {
ALBUMARTIST_TABLE_COLUMNS,
Button,
DropdownMenu,
MultiSelect,
PageHeader,
Popover,
SearchInput,
Slider,
Switch,
Text,
TextTitle,
VirtualInfiniteGridRef,
} from '/@/renderer/components';
import { useMusicFolders } from '/@/renderer/features/shared';
import { useContainerQuery } from '/@/renderer/hooks';
import {
AlbumArtistListFilter,
useAlbumArtistListStore,
useCurrentServer,
useSetAlbumArtistFilters,
useSetAlbumArtistStore,
useSetAlbumArtistTable,
useSetAlbumArtistTablePagination,
} from '/@/renderer/store';
import { ListDisplayType, TableColumn } from '/@/renderer/types';
const FILTERS = {
jellyfin: [
{ defaultOrder: SortOrder.ASC, name: 'Album', value: AlbumArtistListSort.ALBUM },
{ defaultOrder: SortOrder.DESC, name: 'Duration', value: AlbumArtistListSort.DURATION },
{ defaultOrder: SortOrder.ASC, name: 'Name', value: AlbumArtistListSort.NAME },
{ defaultOrder: SortOrder.ASC, name: 'Random', value: AlbumArtistListSort.RANDOM },
{
defaultOrder: SortOrder.DESC,
name: 'Recently Added',
value: AlbumArtistListSort.RECENTLY_ADDED,
},
// { defaultOrder: SortOrder.DESC, name: 'Release Date', value: AlbumArtistListSort.RELEASE_DATE },
],
navidrome: [
{ defaultOrder: SortOrder.DESC, name: 'Album Count', value: AlbumArtistListSort.ALBUM_COUNT },
{ defaultOrder: SortOrder.DESC, name: 'Favorited', value: AlbumArtistListSort.FAVORITED },
{ defaultOrder: SortOrder.DESC, name: 'Most Played', value: AlbumArtistListSort.PLAY_COUNT },
{ defaultOrder: SortOrder.ASC, name: 'Name', value: AlbumArtistListSort.NAME },
{ defaultOrder: SortOrder.DESC, name: 'Rating', value: AlbumArtistListSort.RATING },
{ defaultOrder: SortOrder.DESC, name: 'Song Count', value: AlbumArtistListSort.SONG_COUNT },
],
};
const ORDER = [
{ name: 'Ascending', value: SortOrder.ASC },
{ name: 'Descending', value: SortOrder.DESC },
];
const HeaderItems = styled.div`
display: flex;
flex-direction: row;
justify-content: space-between;
`;
interface AlbumArtistListHeaderProps {
gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
tableRef: MutableRefObject<AgGridReactType | null>;
}
export const AlbumArtistListHeader = ({ gridRef, tableRef }: AlbumArtistListHeaderProps) => {
const queryClient = useQueryClient();
const server = useCurrentServer();
const setPage = useSetAlbumArtistStore();
const setFilter = useSetAlbumArtistFilters();
const page = useAlbumArtistListStore();
const filters = page.filter;
const cq = useContainerQuery();
const musicFoldersQuery = useMusicFolders();
const setPagination = useSetAlbumArtistTablePagination();
const setTable = useSetAlbumArtistTable();
const sortByLabel =
(server?.type &&
FILTERS[server.type as keyof typeof FILTERS].find((f) => f.value === filters.sortBy)?.name) ||
'Unknown';
const sortOrderLabel = ORDER.find((o) => o.value === filters.sortOrder)?.name || 'Unknown';
const handleItemSize = (e: number) => {
if (
page.display === ListDisplayType.TABLE ||
page.display === ListDisplayType.TABLE_PAGINATED
) {
setTable({ rowHeight: e });
} else {
setPage({ list: { ...page, grid: { ...page.grid, size: e } } });
}
};
const fetch = useCallback(
async (startIndex: number, limit: number, filters: AlbumArtistListFilter) => {
const queryKey = queryKeys.albumArtists.list(server?.id || '', {
limit,
startIndex,
...filters,
});
const albums = await queryClient.fetchQuery(queryKey, async ({ signal }) =>
api.controller.getAlbumArtistList({
query: {
limit,
startIndex,
...filters,
},
server,
signal,
}),
);
return api.normalize.albumArtistList(albums, server);
},
[queryClient, server],
);
const handleFilterChange = useCallback(
async (filters: AlbumArtistListFilter) => {
if (
page.display === ListDisplayType.TABLE ||
page.display === ListDisplayType.TABLE_PAGINATED
) {
const dataSource: IDatasource = {
getRows: async (params) => {
const limit = params.endRow - params.startRow;
const startIndex = params.startRow;
const queryKey = queryKeys.albumArtists.list(server?.id || '', {
limit,
startIndex,
...filters,
});
const albumArtistsRes = await queryClient.fetchQuery(queryKey, async ({ signal }) =>
api.controller.getAlbumArtistList({
query: {
limit,
startIndex,
...filters,
},
server,
signal,
}),
);
const albumArtists = api.normalize.albumArtistList(albumArtistsRes, server);
params.successCallback(
albumArtists?.items || [],
albumArtistsRes?.totalRecordCount || undefined,
);
},
rowCount: undefined,
};
tableRef.current?.api.setDatasource(dataSource);
tableRef.current?.api.purgeInfiniteCache();
tableRef.current?.api.ensureIndexVisible(0, 'top');
if (page.display === ListDisplayType.TABLE_PAGINATED) {
setPagination({ currentPage: 0 });
}
} else {
gridRef.current?.scrollTo(0);
gridRef.current?.resetLoadMoreItemsCache();
// Refetching within the virtualized grid may be inconsistent due to it refetching
// using an outdated set of filters. To avoid this, we fetch using the updated filters
// and then set the grid's data here.
const data = await fetch(0, 200, filters);
if (!data?.items) return;
gridRef.current?.setItemData(data.items);
}
},
[page.display, tableRef, setPagination, server, queryClient, gridRef, fetch],
);
const handleSetSortBy = useCallback(
(e: MouseEvent<HTMLButtonElement>) => {
if (!e.currentTarget?.value || !server?.type) return;
const sortOrder = FILTERS[server.type as keyof typeof FILTERS].find(
(f) => f.value === e.currentTarget.value,
)?.defaultOrder;
const updatedFilters = setFilter({
sortBy: e.currentTarget.value as AlbumArtistListSort,
sortOrder: sortOrder || SortOrder.ASC,
});
handleFilterChange(updatedFilters);
},
[handleFilterChange, server?.type, setFilter],
);
const handleSetMusicFolder = useCallback(
(e: MouseEvent<HTMLButtonElement>) => {
if (!e.currentTarget?.value) return;
let updatedFilters = null;
if (e.currentTarget.value === String(page.filter.musicFolderId)) {
updatedFilters = setFilter({ musicFolderId: undefined });
} else {
updatedFilters = setFilter({ musicFolderId: e.currentTarget.value });
}
handleFilterChange(updatedFilters);
},
[handleFilterChange, page.filter.musicFolderId, setFilter],
);
const handleToggleSortOrder = useCallback(() => {
const newSortOrder = filters.sortOrder === SortOrder.ASC ? SortOrder.DESC : SortOrder.ASC;
const updatedFilters = setFilter({ sortOrder: newSortOrder });
handleFilterChange(updatedFilters);
}, [filters.sortOrder, handleFilterChange, setFilter]);
const handleSetViewType = useCallback(
(e: MouseEvent<HTMLButtonElement>) => {
if (!e.currentTarget?.value) return;
setPage({ list: { ...page, display: e.currentTarget.value as ListDisplayType } });
},
[page, setPage],
);
const handleSearch = debounce((e: ChangeEvent<HTMLInputElement>) => {
const previousSearchTerm = page.filter.searchTerm;
const searchTerm = e.target.value === '' ? undefined : e.target.value;
const updatedFilters = setFilter({ searchTerm });
if (previousSearchTerm !== searchTerm) handleFilterChange(updatedFilters);
}, 500);
const handleTableColumns = (values: TableColumn[]) => {
const existingColumns = page.table.columns;
if (values.length === 0) {
return setTable({
columns: [],
});
}
// If adding a column
if (values.length > existingColumns.length) {
const newColumn = { column: values[values.length - 1], width: 100 };
setTable({ columns: [...existingColumns, newColumn] });
} else {
// If removing a column
const removed = existingColumns.filter((column) => !values.includes(column.column));
const newColumns = existingColumns.filter((column) => !removed.includes(column));
setTable({ columns: newColumns });
}
return tableRef.current?.api.sizeColumnsToFit();
};
const handleAutoFitColumns = (e: ChangeEvent<HTMLInputElement>) => {
setTable({ autoFit: e.currentTarget.checked });
if (e.currentTarget.checked) {
tableRef.current?.api.sizeColumnsToFit();
}
};
return (
<PageHeader>
<HeaderItems ref={cq.ref}>
<Flex
align="center"
gap="md"
justify="center"
>
<DropdownMenu position="bottom-start">
<DropdownMenu.Target>
<Button
compact
px={0}
rightIcon={<RiArrowDownSLine size={15} />}
size="xl"
variant="subtle"
>
<TextTitle
fw="bold"
order={3}
>
Album Artists
</TextTitle>
</Button>
</DropdownMenu.Target>
<DropdownMenu.Dropdown>
<DropdownMenu.Label>Display type</DropdownMenu.Label>
<DropdownMenu.Item
$isActive={page.display === ListDisplayType.CARD}
value={ListDisplayType.CARD}
onClick={handleSetViewType}
>
Card
</DropdownMenu.Item>
<DropdownMenu.Item
$isActive={page.display === ListDisplayType.POSTER}
value={ListDisplayType.POSTER}
onClick={handleSetViewType}
>
Poster
</DropdownMenu.Item>
<DropdownMenu.Item
$isActive={page.display === ListDisplayType.TABLE}
value={ListDisplayType.TABLE}
onClick={handleSetViewType}
>
Table
</DropdownMenu.Item>
<DropdownMenu.Item
$isActive={page.display === ListDisplayType.TABLE_PAGINATED}
value={ListDisplayType.TABLE_PAGINATED}
onClick={handleSetViewType}
>
Table (paginated)
</DropdownMenu.Item>
<DropdownMenu.Divider />
<DropdownMenu.Label>Item size</DropdownMenu.Label>
<DropdownMenu.Item closeMenuOnClick={false}>
<Slider
defaultValue={
page.display === ListDisplayType.CARD || page.display === ListDisplayType.POSTER
? page.grid.size
: page.table.rowHeight
}
label={null}
max={100}
min={25}
onChangeEnd={handleItemSize}
/>
</DropdownMenu.Item>
{(page.display === ListDisplayType.TABLE ||
page.display === ListDisplayType.TABLE_PAGINATED) && (
<>
<DropdownMenu.Label>Table Columns</DropdownMenu.Label>
<DropdownMenu.Item
closeMenuOnClick={false}
component="div"
sx={{ cursor: 'default' }}
>
<Stack>
<MultiSelect
clearable
data={ALBUMARTIST_TABLE_COLUMNS}
defaultValue={page.table?.columns.map((column) => column.column)}
width={300}
onChange={handleTableColumns}
/>
<Group position="apart">
<Text>Auto Fit Columns</Text>
<Switch
defaultChecked={page.table.autoFit}
onChange={handleAutoFitColumns}
/>
</Group>
</Stack>
</DropdownMenu.Item>
</>
)}
</DropdownMenu.Dropdown>
</DropdownMenu>
<DropdownMenu position="bottom-start">
<DropdownMenu.Target>
<Button
compact
fw="600"
variant="subtle"
>
{sortByLabel}
</Button>
</DropdownMenu.Target>
<DropdownMenu.Dropdown>
{FILTERS[server?.type as keyof typeof FILTERS].map((filter) => (
<DropdownMenu.Item
key={`filter-${filter.name}`}
$isActive={filter.value === filters.sortBy}
value={filter.value}
onClick={handleSetSortBy}
>
{filter.name}
</DropdownMenu.Item>
))}
</DropdownMenu.Dropdown>
</DropdownMenu>
<Button
compact
fw="600"
variant="subtle"
onClick={handleToggleSortOrder}
>
{cq.isMd ? (
sortOrderLabel
) : (
<>
{filters.sortOrder === SortOrder.ASC ? (
<RiSortAsc size={15} />
) : (
<RiSortDesc size={15} />
)}
</>
)}
</Button>
{server?.type === ServerType.JELLYFIN && (
<DropdownMenu position="bottom-start">
<DropdownMenu.Target>
<Button
compact
fw="600"
variant="subtle"
>
{cq.isMd ? 'Folder' : <RiFolder2Line size={15} />}
</Button>
</DropdownMenu.Target>
<DropdownMenu.Dropdown>
{musicFoldersQuery.data?.map((folder) => (
<DropdownMenu.Item
key={`musicFolder-${folder.id}`}
$isActive={filters.musicFolderId === folder.id}
value={folder.id}
onClick={handleSetMusicFolder}
>
{folder.name}
</DropdownMenu.Item>
))}
</DropdownMenu.Dropdown>
</DropdownMenu>
)}
<Popover position="bottom-start">
<Popover.Target>
<Button
compact
fw="600"
variant="subtle"
>
{cq.isMd ? 'Filters' : <RiFilter3Line size={15} />}
</Button>
</Popover.Target>
<Popover.Dropdown>
{/* {server?.type === ServerType.NAVIDROME ? (
<NavidromeAlbumFilters handleFilterChange={handleFilterChange} />
) : (
<JellyfinAlbumFilters handleFilterChange={handleFilterChange} />
)} */}
</Popover.Dropdown>
</Popover>
<DropdownMenu position="bottom-start">
<DropdownMenu.Target>
<Button
compact
variant="subtle"
>
<RiMoreFill size={15} />
</Button>
</DropdownMenu.Target>
<DropdownMenu.Dropdown>
<DropdownMenu.Item disabled>Play</DropdownMenu.Item>
<DropdownMenu.Item disabled>Add to queue (next)</DropdownMenu.Item>
<DropdownMenu.Item disabled>Add to queue (last)</DropdownMenu.Item>
<DropdownMenu.Item disabled>Add to playlist</DropdownMenu.Item>
</DropdownMenu.Dropdown>
</DropdownMenu>
</Flex>
<Flex gap="md">
<SearchInput
defaultValue={page.filter.searchTerm}
openedWidth={cq.isLg ? 300 : cq.isMd ? 250 : cq.isSm ? 150 : 75}
onChange={handleSearch}
/>
</Flex>
</HeaderItems>
</PageHeader>
);
};

22
src/renderer/features/artists/queries/album-artist-list-query.ts Normal file
View File

@ -0,0 +1,22 @@
import { useCallback } from 'react';
import { useQuery } from '@tanstack/react-query';
import { queryKeys } from '/@/renderer/api/query-keys';
import type { AlbumArtistListQuery, RawAlbumArtistListResponse } from '/@/renderer/api/types';
import type { QueryOptions } from '/@/renderer/lib/react-query';
import { useCurrentServer } from '/@/renderer/store';
import { api } from '/@/renderer/api';
export const useAlbumArtistList = (query: AlbumArtistListQuery, options?: QueryOptions) => {
const server = useCurrentServer();
return useQuery({
enabled: !!server?.id,
queryFn: ({ signal }) => api.controller.getAlbumArtistList({ query, server, signal }),
queryKey: queryKeys.albumArtists.list(server?.id || '', query),
select: useCallback(
(data: RawAlbumArtistListResponse | undefined) => api.normalize.albumArtistList(data, server),
[server],
),
...options,
});
};

28
src/renderer/features/artists/routes/album-artist-list-route.tsx Normal file
View File

@ -0,0 +1,28 @@
import { VirtualGridContainer, VirtualInfiniteGridRef } from '/@/renderer/components';
import { AlbumArtistListHeader } from '/@/renderer/features/artists/components/album-artist-list-header';
import { AnimatedPage } from '/@/renderer/features/shared';
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import { useRef } from 'react';
import { AlbumArtistListContent } from '/@/renderer/features/artists/components/album-artist-list-content';
const AlbumArtistListRoute = () => {
const gridRef = useRef<VirtualInfiniteGridRef | null>(null);
const tableRef = useRef<AgGridReactType | null>(null);
return (
<AnimatedPage>
<VirtualGridContainer>
<AlbumArtistListHeader
gridRef={gridRef}
tableRef={tableRef}
/>
<AlbumArtistListContent
gridRef={gridRef}
tableRef={tableRef}
/>
</VirtualGridContainer>
</AnimatedPage>
);
};
export default AlbumArtistListRoute;

7
src/renderer/features/sidebar/components/sidebar.tsx
View File

@ -183,13 +183,10 @@ export const Sidebar = () => {
Tracks
</Group>
</SidebarItem>
<SidebarItem
disabled
to={AppRoute.LIBRARY_ALBUMARTISTS}
>
<SidebarItem to={AppRoute.LIBRARY_ALBUMARTISTS}>
<Group>
<RiUserVoiceLine />
Artists
Album Artists
</Group>
</SidebarItem>
<SidebarItem

5
src/renderer/router/app-router.tsx
View File

@ -8,6 +8,7 @@ import {
import { AppRoute } from './routes';
import { RouteErrorBoundary } from '/@/renderer/features/action-required';
import AlbumDetailRoute from '/@/renderer/features/albums/routes/album-detail-route';
import AlbumArtistListRoute from '/@/renderer/features/artists/routes/album-artist-list-route';
import HomeRoute from '/@/renderer/features/home/routes/home-route';
import { DefaultLayout } from '/@/renderer/layouts';
import { AppOutlet } from '/@/renderer/router/app-outlet';
@ -64,8 +65,8 @@ export const AppRouter = () => {
path={AppRoute.LIBRARY_SONGS}
/>
<Route
element={<></>}
path={AppRoute.LIBRARY_ARTISTS}
element={<AlbumArtistListRoute />}
path={AppRoute.LIBRARY_ALBUMARTISTS}
/>
<Route
element={<InvalidRoute />}

126
src/renderer/store/album-artist.store.ts Normal file
View File

@ -0,0 +1,126 @@
import merge from 'lodash/merge';
import create from 'zustand';
import { devtools, persist } from 'zustand/middleware';
import { immer } from 'zustand/middleware/immer';
import { AlbumArtistListArgs, AlbumArtistListSort, 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 AlbumArtistListFilter = Omit<AlbumArtistListArgs['query'], 'startIndex' | 'limit'>;
export interface AlbumArtistState {
list: ListProps<AlbumArtistListFilter>;
}
export interface AlbumArtistSlice extends AlbumArtistState {
actions: {
setFilters: (data: Partial<AlbumArtistListFilter>) => AlbumArtistListFilter;
setStore: (data: Partial<AlbumArtistSlice>) => void;
setTable: (data: Partial<TableProps>) => void;
setTablePagination: (data: Partial<TableProps['pagination']>) => void;
};
}
export const useAlbumArtistStore = create<AlbumArtistSlice>()(
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: AlbumArtistListSort.NAME,
sortOrder: SortOrder.ASC,
},
grid: {
scrollOffset: 0,
size: 50,
},
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,
},
},
})),
{ name: 'store_artist' },
),
{
merge: (persistedState, currentState) => {
return merge(currentState, persistedState);
},
name: 'store_artist',
version: 1,
},
),
);
export const useAlbumArtistStoreActions = () => useAlbumArtistStore((state) => state.actions);
export const useSetAlbumArtistStore = () => useAlbumArtistStore((state) => state.actions.setStore);
export const useSetAlbumArtistFilters = () =>
useAlbumArtistStore((state) => state.actions.setFilters);
export const useAlbumArtistListStore = () => useAlbumArtistStore((state) => state.list);
export const useAlbumArtistTablePagination = () =>
useAlbumArtistStore((state) => state.list.table.pagination);
export const useSetAlbumArtistTablePagination = () =>
useAlbumArtistStore((state) => state.actions.setTablePagination);
export const useSetAlbumArtistTable = () => useAlbumArtistStore((state) => state.actions.setTable);

1
src/renderer/store/index.ts
View File

@ -3,3 +3,4 @@ export * from './player.store';
export * from './app.store';
export * from './album.store';
export * from './song.store';
export * from './album-artist.store';