vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-17 06:00:20 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add album detail list view (#1681)

Browse Source
This commit is contained in:
Jeff
2026-02-09 21:56:08 -08:00
committed by GitHub
parent 397610d8ab
commit f39a7f8d6f
79 changed files with 3462 additions and 364 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/features/albums/components/album-detail-header.tsx
+2 -2
View File
@@ -233,8 +233,8 @@ export const AlbumDetailHeader = forwardRef<HTMLDivElement>((_props, ref) => {
{metadataItems.map((item, index) => (
<Fragment key={item.id}>
{index > 0 && (
<Text fw={400} isMuted isNoSelect>
•
<Text isMuted isNoSelect>
<Separator />
</Text>
)}
<Text fw={400}>{item.value}</Text>
src/renderer/features/albums/components/album-list-content.tsx
+47 -2
View File
@@ -36,6 +36,18 @@ const AlbumListPaginatedTable = lazy(() =>
})),
);
const AlbumListInfiniteDetail = lazy(() =>
import('/@/renderer/features/albums/components/album-list-infinite-detail').then((module) => ({
default: module.AlbumListInfiniteDetail,
})),
);
const AlbumListPaginatedDetail = lazy(() =>
import('/@/renderer/features/albums/components/album-list-paginated-detail').then((module) => ({
default: module.AlbumListPaginatedDetail,
})),
);
const AlbumListFilters = () => {
return (
<ListWithSidebarContainer.SidebarPortal>
@@ -62,13 +74,16 @@ export const AlbumListContent = () => {
};
const AlbumListSuspenseContainer = () => {
const { display, grid, itemsPerPage, pagination, table } = useListSettings(ItemListKey.ALBUM);
const { detail, display, grid, itemsPerPage, pagination, table } = useListSettings(
ItemListKey.ALBUM,
);
const { customFilters } = useListContext();
return (
<Suspense fallback={<Spinner container />}>
<AlbumListView
detail={detail}
display={display}
grid={grid}
itemsPerPage={itemsPerPage}
@@ -83,13 +98,17 @@ const AlbumListSuspenseContainer = () => {
export type OverrideAlbumListQuery = Omit<Partial<AlbumListQuery>, 'limit' | 'startIndex'>;
export const AlbumListView = ({
detail,
display,
grid,
itemsPerPage,
overrideQuery,
pagination,
table,
}: ItemListSettings & { overrideQuery?: OverrideAlbumListQuery }) => {
}: ItemListSettings & {
detail?: ItemListSettings['detail'];
overrideQuery?: OverrideAlbumListQuery;
}) => {
const server = useCurrentServer();
const { pageKey } = useListContext();
@@ -179,6 +198,32 @@ export const AlbumListView = ({
return null;
}
}
case ListDisplayType.DETAIL: {
switch (pagination) {
case ListPaginationType.INFINITE: {
return (
<AlbumListInfiniteDetail
enableHeader={detail?.enableHeader}
itemsPerPage={itemsPerPage}
query={mergedQuery}
serverId={server.id}
/>
);
}
case ListPaginationType.PAGINATED: {
return (
<AlbumListPaginatedDetail
enableHeader={detail?.enableHeader}
itemsPerPage={itemsPerPage}
query={mergedQuery}
serverId={server.id}
/>
);
}
default:
return null;
}
}
}
return null;
src/renderer/features/albums/components/album-list-header-filters.tsx
+12 -2
View File
@@ -1,7 +1,10 @@
import { useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { ALBUM_TABLE_COLUMNS } from '/@/renderer/components/item-list/item-table-list/default-columns';
import {
ALBUM_TABLE_COLUMNS,
SONG_TABLE_COLUMNS,
} from '/@/renderer/components/item-list/item-table-list/default-columns';
import { useListContext } from '/@/renderer/context/list-context';
import { useAlbumListFilters } from '/@/renderer/features/albums/hooks/use-album-list-filters';
import { ListConfigMenu } from '/@/renderer/features/shared/components/list-config-menu';
@@ -92,8 +95,15 @@ export const AlbumListHeaderFilters = ({ toggleGenreTarget }: { toggleGenreTarge
<ListRefreshButton listKey={pageKey as ItemListKey} />
</Group>
<Group gap="sm" wrap="nowrap">
<ListDisplayTypeToggleButton listKey={ItemListKey.ALBUM} />
<ListDisplayTypeToggleButton enableDetail listKey={ItemListKey.ALBUM} />
<ListConfigMenu
detailConfig={{
optionsConfig: {
autoFitColumns: { hidden: true },
},
tableColumnsData: SONG_TABLE_COLUMNS,
tableKey: 'detail',
}}
listKey={ItemListKey.ALBUM}
tableColumnsData={ALBUM_TABLE_COLUMNS}
/>
src/renderer/features/albums/components/album-list-infinite-detail.tsx
+69
View File
@@ -0,0 +1,69 @@
import { UseSuspenseQueryOptions } from '@tanstack/react-query';
import { api } from '/@/renderer/api';
import { useItemListInfiniteLoader } from '/@/renderer/components/item-list/helpers/item-list-infinite-loader';
import { useItemListColumnReorder } from '/@/renderer/components/item-list/helpers/use-item-list-column-reorder';
import { useItemListColumnResize } from '/@/renderer/components/item-list/helpers/use-item-list-column-resize';
import { ItemDetailList } from '/@/renderer/components/item-list/item-detail-list/item-detail-list';
import { ItemListComponentProps } from '/@/renderer/components/item-list/types';
import { albumQueries } from '/@/renderer/features/albums/api/album-api';
import {
AlbumListQuery,
AlbumListSort,
LibraryItem,
SortOrder,
} from '/@/shared/types/domain-types';
import { ItemListKey } from '/@/shared/types/types';
interface AlbumListInfiniteDetailProps extends ItemListComponentProps<AlbumListQuery> {
enableHeader?: boolean;
}
export const AlbumListInfiniteDetail = ({
enableHeader = true,
itemsPerPage = 100,
query = {
sortBy: AlbumListSort.NAME,
sortOrder: SortOrder.ASC,
},
serverId,
}: AlbumListInfiniteDetailProps) => {
const listCountQuery = albumQueries.listCount({
query: { ...query },
serverId: serverId,
}) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
const listQueryFn = api.controller.getAlbumList;
const { handleColumnReordered } = useItemListColumnReorder({
itemListKey: ItemListKey.ALBUM,
tableKey: 'detail',
});
const { handleColumnResized } = useItemListColumnResize({
itemListKey: ItemListKey.ALBUM,
tableKey: 'detail',
});
const { getItem, itemCount, loadedItems, onRangeChanged } = useItemListInfiniteLoader({
eventKey: ItemListKey.ALBUM,
itemsPerPage,
itemType: LibraryItem.ALBUM,
listCountQuery,
listQueryFn,
query,
serverId,
});
return (
<ItemDetailList
data={loadedItems}
enableHeader={enableHeader}
getItem={getItem}
itemCount={itemCount}
onColumnReordered={handleColumnReordered}
onColumnResized={handleColumnResized}
onRangeChanged={onRangeChanged}
/>
);
};
src/renderer/features/albums/components/album-list-paginated-detail.tsx
+80
View File
@@ -0,0 +1,80 @@
import { UseSuspenseQueryOptions } from '@tanstack/react-query';
import { api } from '/@/renderer/api';
import { useItemListPaginatedLoader } from '/@/renderer/components/item-list/helpers/item-list-paginated-loader';
import { useItemListColumnReorder } from '/@/renderer/components/item-list/helpers/use-item-list-column-reorder';
import { useItemListColumnResize } from '/@/renderer/components/item-list/helpers/use-item-list-column-resize';
import { ItemDetailList } from '/@/renderer/components/item-list/item-detail-list/item-detail-list';
import { ItemListWithPagination } from '/@/renderer/components/item-list/item-list-pagination/item-list-pagination';
import { useItemListPagination } from '/@/renderer/components/item-list/item-list-pagination/use-item-list-pagination';
import { ItemListComponentProps } from '/@/renderer/components/item-list/types';
import { albumQueries } from '/@/renderer/features/albums/api/album-api';
import {
AlbumListQuery,
AlbumListSort,
LibraryItem,
SortOrder,
} from '/@/shared/types/domain-types';
import { ItemListKey } from '/@/shared/types/types';
interface AlbumListPaginatedDetailProps extends ItemListComponentProps<AlbumListQuery> {
enableHeader?: boolean;
}
export const AlbumListPaginatedDetail = ({
enableHeader = true,
itemsPerPage = 100,
query = {
sortBy: AlbumListSort.NAME,
sortOrder: SortOrder.ASC,
},
serverId,
}: AlbumListPaginatedDetailProps) => {
const listCountQuery = albumQueries.listCount({
query: { ...query },
serverId: serverId,
}) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
const listQueryFn = api.controller.getAlbumList;
const { handleColumnReordered } = useItemListColumnReorder({
itemListKey: ItemListKey.ALBUM,
tableKey: 'detail',
});
const { handleColumnResized } = useItemListColumnResize({
itemListKey: ItemListKey.ALBUM,
tableKey: 'detail',
});
const { currentPage, onChange } = useItemListPagination();
const { data, pageCount, totalItemCount } = useItemListPaginatedLoader({
currentPage,
eventKey: ItemListKey.ALBUM,
itemsPerPage,
itemType: LibraryItem.ALBUM,
listCountQuery,
listQueryFn,
query,
serverId,
});
return (
<ItemListWithPagination
currentPage={currentPage}
itemsPerPage={itemsPerPage}
onChange={onChange}
pageCount={pageCount}
totalItemCount={totalItemCount}
>
<ItemDetailList
currentPage={currentPage}
enableHeader={enableHeader}
items={data || []}
onColumnReordered={handleColumnReordered}
onColumnResized={handleColumnResized}
/>
</ItemListWithPagination>
);
};
src/renderer/features/albums/components/joined-artists.tsx
+20 -7
View File
@@ -1,21 +1,28 @@
import { Fragment } from 'react';
import { Fragment, memo } from 'react';
import { generatePath, Link } from 'react-router';
import { AppRoute } from '/@/renderer/router/routes';
import { Text, TextProps } from '/@/shared/components/text/text';
import { AlbumArtist, RelatedAlbumArtist, RelatedArtist } from '/@/shared/types/domain-types';
export const JOINED_ARTISTS_MUTED_PROPS = {
linkProps: { fw: 400, isMuted: true },
rootTextProps: { fw: 400, isMuted: true, size: 'sm' as const },
} as const;
interface JoinedArtistsProps {
artistName: string;
artists: AlbumArtist[] | RelatedAlbumArtist[] | RelatedArtist[];
linkProps?: Partial<Omit<TextProps, 'children' | 'component' | 'to'>>;
readOnly?: boolean;
rootTextProps?: Partial<Omit<TextProps, 'children' | 'component'>>;
}
export const JoinedArtists = ({
const JoinedArtistsComponent = ({
artistName,
artists,
linkProps,
readOnly = false,
rootTextProps,
}: JoinedArtistsProps) => {
const parts: (
@@ -111,7 +118,7 @@ export const JoinedArtists = ({
{artists.map((artist, index) => (
<Fragment key={artist.id || `artist-${index}`}>
{index > 0 && ', '}
{artist.id ? (
{artist.id && !readOnly ? (
<Text
component={Link}
fw={500}
@@ -124,7 +131,7 @@ export const JoinedArtists = ({
{artist.name}
</Text>
) : (
<Text fw={500} {...linkProps}>
<Text component="span" fw={500} {...linkProps}>
{artist.name}
</Text>
)}
@@ -152,7 +159,7 @@ export const JoinedArtists = ({
const { artist, text } = part;
if (artist.id) {
if (artist.id && !readOnly) {
return (
<Text
component={Link}
@@ -169,7 +176,7 @@ export const JoinedArtists = ({
);
}
return (
<Text fw={500} key={`${artist.name}-${index}`} {...linkProps}>
<Text component="span" fw={500} key={`${artist.name}-${index}`} {...linkProps}>
{text}
</Text>
);
@@ -180,7 +187,7 @@ export const JoinedArtists = ({
{unmatchedArtists.map((artist, index) => (
<Fragment key={artist.id}>
{index > 0 && ', '}
{artist.id ? (
{artist.id && !readOnly ? (
<Text
component={Link}
fw={500}
@@ -192,6 +199,10 @@ export const JoinedArtists = ({
>
{artist.name}
</Text>
) : artist.id ? (
<Text component="span" fw={500} {...linkProps}>
{artist.name}
</Text>
) : (
<Text component="span" isMuted>
{artist.name}
@@ -205,6 +216,8 @@ export const JoinedArtists = ({
);
};
export const JoinedArtists = memo(JoinedArtistsComponent);
function escapeRegex(str: string): string {
return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}