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

Migrate to mantine v6 (#15)

Browse source 
* Add letter spacing to cell text

* Set window control height in px

* Add temp unused routes

* Migrate text title font weights

* Bump mantine to v6 alpha

* Migrate modals / notifications

* Increase header bar to 65px

* Adjust play button props

* Migrate various components

* Migrate various pages and root styles

* Adjust default badge padding

* Fix sidebar spacing

* Fix list header badges

* Adjust default theme
This commit is contained in:
Jeff 2023-01-28 20:46:07 -08:00 • committed by GitHub
parent 768269f074
commit 44a4b88809
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
52 changed files with 1301 additions and 349 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/renderer/features/artists/components/album-artist-detail-content.tsx
View file

@ -165,8 +165,8 @@ export const AlbumArtistDetailContent = () => {
title: (
<>
<TextTitle
fw="bold"
order={3}
weight={700}
>
Recent releases
</TextTitle>
@ -193,8 +193,8 @@ export const AlbumArtistDetailContent = () => {
},
title: (
<TextTitle
fw="bold"
order={3}
weight={700}
>
Appears on
</TextTitle>
@ -211,8 +211,8 @@ export const AlbumArtistDetailContent = () => {
},
title: (
<TextTitle
fw="bold"
order={3}
weight={700}
>
Related artists
</TextTitle>
@ -281,7 +281,7 @@ export const AlbumArtistDetailContent = () => {
return (
<ContentContainer ref={cq.ref}>
<Box component="section">
<Group spacing="lg">
<Group spacing="md">
<PlayButton onClick={() => handlePlay(playButtonBehavior)} />
<Group spacing="xs">
<Button
@ -369,8 +369,8 @@ export const AlbumArtistDetailContent = () => {
maw="1280px"
>
<TextTitle
fw="bold"
order={3}
weight={700}
>
About {detailQuery?.data?.name}
</TextTitle>
@ -393,8 +393,8 @@ export const AlbumArtistDetailContent = () => {
align="flex-end"
>
<TextTitle
fw="bold"
order={3}
weight={700}
>
Top Songs
</TextTitle>

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

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

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

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

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

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

@ -46,7 +46,7 @@ export const AlbumArtistDetailHeader = forwardRef(
item={{ route: AppRoute.LIBRARY_ALBUM_ARTISTS, type: LibraryItem.ALBUM_ARTIST }}
title={detailQuery?.data?.name || ''}
>
<Stack mt="1rem">
<Stack>
<Group>
{metadataItems
.filter((i) => i.value)

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

@ -1,6 +1,5 @@
import { MutableRefObject, useCallback, useMemo } from 'react';
import type {
BodyScrollEvent,
ColDef,
GridReadyEvent,
IDatasource,
@ -8,6 +7,7 @@ import type {
RowDoubleClickedEvent,
} from '@ag-grid-community/core';
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import { useSetState } from '@mantine/hooks';
import { useQueryClient } from '@tanstack/react-query';
import { api } from '/@/renderer/api';
import { queryKeys } from '/@/renderer/api/query-keys';
@ -21,11 +21,9 @@ import {
SongListFilter,
useCurrentServer,
useSetSongTable,
useSetSongTablePagination,
useSongListStore,
useSongTablePagination,
} from '/@/renderer/store';
import { ListDisplayType } from '/@/renderer/types';
import { ListDisplayType, TablePagination as TablePaginationType } from '/@/renderer/types';
import { AnimatePresence } from 'framer-motion';
import debounce from 'lodash/debounce';
import { useHandleTableContextMenu } from '/@/renderer/features/context-menu';
@ -49,8 +47,13 @@ export const AlbumArtistDetailSongListContent = ({
const server = useCurrentServer();
const page = useSongListStore();
const pagination = useSongTablePagination();
const setPagination = useSetSongTablePagination();
const [pagination, setPagination] = useSetState<TablePaginationType>({
currentPage: 0,
itemsPerPage: 100,
totalItems: itemCount || 0,
totalPages: 0,
});
const setTable = useSetSongTable();
const handlePlayQueueAdd = usePlayQueueAdd();
const playButtonBehavior = usePlayButtonBehavior();
@ -62,14 +65,6 @@ export const AlbumArtistDetailSongListContent = ({
[page.table.columns],
);
const defaultColumnDefs: ColDef = useMemo(() => {
return {
lockPinned: true,
lockVisible: true,
resizable: true,
};
}, []);
const onGridReady = useCallback(
(params: GridReadyEvent) => {
const dataSource: IDatasource = {
@ -79,10 +74,7 @@ export const AlbumArtistDetailSongListContent = ({
const queryKey = queryKeys.songs.list(server?.id || '', {
...filter,
// artistIds: [albumArtistId],
limit,
// sortBy: SongListSort.ALBUM,
// sortOrder: SortOrder.ASC,
startIndex,
});
@ -91,11 +83,8 @@ export const AlbumArtistDetailSongListContent = ({
async ({ signal }) =>
api.controller.getSongList({
query: {
// artistIds: [albumArtistId],
...filter,
limit,
// sortBy: SongListSort.ALBUM,
// sortOrder: SortOrder.ASC,
startIndex,
},
server,
@ -110,9 +99,8 @@ export const AlbumArtistDetailSongListContent = ({
rowCount: undefined,
};
params.api.setDatasource(dataSource);
params.api.ensureIndexVisible(page.table.scrollOffset, 'top');
},
[filter, page.table.scrollOffset, queryClient, server],
[filter, queryClient, server],
);
const onPaginationChanged = useCallback(
@ -132,12 +120,6 @@ export const AlbumArtistDetailSongListContent = ({
[isPaginationEnabled, pagination.currentPage, pagination.itemsPerPage, setPagination],
);
const handleGridSizeChange = () => {
if (page.table.autoFit) {
tableRef?.current?.api.sizeColumnsToFit();
}
};
const handleColumnChange = useCallback(() => {
const { columnApi } = tableRef?.current || {};
const columnsOrder = columnApi?.getAllGridColumns();
@ -164,11 +146,6 @@ export const AlbumArtistDetailSongListContent = ({
const debouncedColumnChange = debounce(handleColumnChange, 200);
const handleScroll = (e: BodyScrollEvent) => {
const scrollOffset = Number((e.top / page.table.rowHeight).toFixed(0));
setTable({ scrollOffset });
};
const handleContextMenu = useHandleTableContextMenu(LibraryItem.SONG, SONG_CONTEXT_MENU_ITEMS);
const handleRowDoubleClick = (e: RowDoubleClickedEvent<QueueSong>) => {
@ -189,18 +166,17 @@ export const AlbumArtistDetailSongListContent = ({
ref={tableRef}
alwaysShowHorizontalScroll
animateRows
autoFitColumns
maintainColumnOrder
suppressCopyRowsToClipboard
suppressMoveWhenRowDragging
suppressPaginationPanel
suppressRowDrag
suppressScrollOnNewData
autoFitColumns={page.table.autoFit}
blockLoadDebounceMillis={200}
cacheBlockSize={500}
cacheOverflowSize={1}
columnDefs={columnDefs}
defaultColDef={defaultColumnDefs}
enableCellChangeFlash={false}
getRowId={(data) => data.data.id}
infiniteInitialRowCount={itemCount || 100}
@ -211,12 +187,10 @@ export const AlbumArtistDetailSongListContent = ({
rowHeight={page.table.rowHeight || 40}
rowModelType="infinite"
rowSelection="multiple"
onBodyScrollEnd={handleScroll}
onCellContextMenu={handleContextMenu}
onColumnMoved={handleColumnChange}
onColumnResized={debouncedColumnChange}
onGridReady={onGridReady}
onGridSizeChanged={handleGridSizeChange}
onPaginationChanged={onPaginationChanged}
onRowDoubleClicked={handleRowDoubleClick}
/>

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

@ -96,7 +96,6 @@ export const AlbumArtistDetailSongListHeader = ({
const server = useCurrentServer();
const page = useSongListStore();
const setPage = useSetSongStore();
// const setFilter = useSetSongFilters();
const setTable = useSetSongTable();
const setPagination = useSetSongTablePagination();
const handlePlayQueueAdd = usePlayQueueAdd();
@ -300,10 +299,10 @@ export const AlbumArtistDetailSongListHeader = ({
>
<Group noWrap>
<TextTitle
fw="bold"
maw="20vw"
order={3}
overflow="hidden"
weight={700}
>
{title}
</TextTitle>
@ -402,7 +401,7 @@ export const AlbumArtistDetailSongListHeader = ({
sortOrderLabel
) : (
<>
{page.filter.sortOrder === SortOrder.ASC ? (
{filter.sortOrder === SortOrder.ASC ? (
<RiSortAsc size={15} />
) : (
<RiSortDesc size={15} />

2
src/renderer/features/artists/components/album-artist-detail-top-songs-list-header.tsx
View file

@ -54,10 +54,10 @@ export const AlbumArtistDetailTopSongsListHeader = ({
>
<Group noWrap>
<TextTitle
fw="bold"
maw="20vw"
order={3}
overflow="hidden"
weight={700}
>
{title}
</TextTitle>

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

@ -12,12 +12,14 @@ import { queryKeys } from '/@/renderer/api/query-keys';
import { AlbumArtistListSort, ServerType, SortOrder } from '/@/renderer/api/types';
import {
ALBUMARTIST_TABLE_COLUMNS,
Badge,
Button,
DropdownMenu,
MultiSelect,
PageHeader,
SearchInput,
Slider,
SpinnerIcon,
Switch,
Text,
TextTitle,
@ -72,10 +74,15 @@ const HeaderItems = styled.div`
interface AlbumArtistListHeaderProps {
gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
itemCount?: number;
tableRef: MutableRefObject<AgGridReactType | null>;
}
export const AlbumArtistListHeader = ({ gridRef, tableRef }: AlbumArtistListHeaderProps) => {
export const AlbumArtistListHeader = ({
itemCount,
gridRef,
tableRef,
}: AlbumArtistListHeaderProps) => {
const queryClient = useQueryClient();
const server = useCurrentServer();
const setPage = useSetAlbumArtistStore();
@ -308,12 +315,21 @@ export const AlbumArtistListHeader = ({ gridRef, tableRef }: AlbumArtistListHead
size="xl"
variant="subtle"
>
<TextTitle
fw="bold"
order={3}
>
Album Artists
</TextTitle>
<Group noWrap>
<TextTitle
order={3}
weight={700}
>
Album Artists
</TextTitle>
<Badge
px="1rem"
radius="xl"
size="xl"
>
{itemCount === null || itemCount === undefined ? <SpinnerIcon /> : itemCount}
</Badge>
</Group>
</Button>
</DropdownMenu.Target>
<DropdownMenu.Dropdown>

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

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

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

@ -4,16 +4,38 @@ 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';
import { useAlbumArtistList } from '/@/renderer/features/artists/queries/album-artist-list-query';
import { useAlbumArtistListStore } from '/@/renderer/store';
const AlbumArtistListRoute = () => {
const gridRef = useRef<VirtualInfiniteGridRef | null>(null);
const tableRef = useRef<AgGridReactType | null>(null);
const page = useAlbumArtistListStore();
const filters = page.filter;
const itemCountCheck = useAlbumArtistList(
{
limit: 1,
startIndex: 0,
...filters,
},
{
cacheTime: 1000 * 60 * 60 * 2,
staleTime: 1000 * 60 * 60 * 2,
},
);
const itemCount =
itemCountCheck.data?.totalRecordCount === null
? undefined
: itemCountCheck.data?.totalRecordCount;
return (
<AnimatedPage>
<VirtualGridContainer>
<AlbumArtistListHeader
gridRef={gridRef}
itemCount={itemCount}
tableRef={tableRef}
/>
<AlbumArtistListContent