mirror of
https://github.com/jeffvli/feishin.git
synced 2026-05-07 04:20:12 +02:00
improve compact size item card
This commit is contained in:
@@ -177,6 +177,7 @@
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
gap: 0;
|
||||
width: 100%;
|
||||
padding: var(--theme-spacing-xs);
|
||||
background-color: alpha(var(--theme-colors-background), 0.5);
|
||||
|
||||
@@ -896,7 +896,7 @@ const PosterItemCard = ({
|
||||
);
|
||||
};
|
||||
|
||||
export const getDataRows = (): DataRow[] => {
|
||||
export const getDataRows = (type?: 'compact' | 'default' | 'poster'): DataRow[] => {
|
||||
return [
|
||||
{
|
||||
format: (data) => {
|
||||
@@ -959,7 +959,11 @@ export const getDataRows = (): DataRow[] => {
|
||||
artistName={data.albumArtistName}
|
||||
artists={data.albumArtists}
|
||||
linkProps={{ fw: 400, isMuted: true }}
|
||||
rootTextProps={{ fw: 400, isMuted: true, size: 'sm' }}
|
||||
rootTextProps={{
|
||||
fw: 400,
|
||||
isMuted: type === 'compact' ? false : true,
|
||||
size: 'sm',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -6,8 +6,11 @@ import { LibraryItem } from '/@/shared/types/domain-types';
|
||||
import { TableColumn } from '/@/shared/types/types';
|
||||
import { ItemListKey } from '/@/shared/types/types';
|
||||
|
||||
const getDefaultRowsForItemType = (itemType: LibraryItem): DataRow[] => {
|
||||
const allRows = getDataRows();
|
||||
const getDefaultRowsForItemType = (
|
||||
itemType: LibraryItem,
|
||||
type?: 'compact' | 'default' | 'poster',
|
||||
): DataRow[] => {
|
||||
const allRows = getDataRows(type);
|
||||
const rowMap = new Map(allRows.map((row) => [row.id, row]));
|
||||
|
||||
switch (itemType) {
|
||||
@@ -80,16 +83,22 @@ const getRowIdFromTableColumn = (tableColumn: TableColumn): null | string => {
|
||||
return columnToRowIdMap[tableColumn] || null;
|
||||
};
|
||||
|
||||
export const useGridRows = (itemType: LibraryItem, listKey?: ItemListKey) => {
|
||||
export const useGridRows = (
|
||||
itemType: LibraryItem,
|
||||
listKey?: ItemListKey,
|
||||
size?: 'compact' | 'default' | 'large',
|
||||
) => {
|
||||
const gridRowsConfig = useSettingsStore((state) =>
|
||||
listKey ? state.lists[listKey]?.grid?.rows : undefined,
|
||||
);
|
||||
|
||||
const type: 'compact' | 'default' | 'poster' = size === 'compact' ? 'compact' : 'poster';
|
||||
|
||||
return useMemo(() => {
|
||||
const allRows = getDataRows();
|
||||
const allRows = getDataRows(type);
|
||||
|
||||
if (!listKey || !gridRowsConfig || gridRowsConfig.length === 0) {
|
||||
const defaultRows = getDefaultRowsForItemType(itemType);
|
||||
const defaultRows = getDefaultRowsForItemType(itemType, type);
|
||||
return defaultRows.length > 0 ? defaultRows : allRows;
|
||||
}
|
||||
|
||||
@@ -110,5 +119,5 @@ export const useGridRows = (itemType: LibraryItem, listKey?: ItemListKey) => {
|
||||
.filter((row): row is NonNullable<typeof row> => row !== null && row !== undefined);
|
||||
|
||||
return configuredRows.length > 0 ? configuredRows : allRows;
|
||||
}, [itemType, listKey, gridRowsConfig]);
|
||||
}, [itemType, listKey, gridRowsConfig, type]);
|
||||
};
|
||||
|
||||
@@ -50,7 +50,7 @@ export const AlbumListInfiniteGrid = ({
|
||||
enabled: saveScrollOffset,
|
||||
});
|
||||
|
||||
const rows = useGridRows(LibraryItem.ALBUM, ItemListKey.ALBUM);
|
||||
const rows = useGridRows(LibraryItem.ALBUM, ItemListKey.ALBUM, size);
|
||||
|
||||
return (
|
||||
<ItemGridList
|
||||
|
||||
@@ -55,7 +55,7 @@ export const AlbumListPaginatedGrid = ({
|
||||
enabled: saveScrollOffset,
|
||||
});
|
||||
|
||||
const rows = useGridRows(LibraryItem.ALBUM, ItemListKey.ALBUM);
|
||||
const rows = useGridRows(LibraryItem.ALBUM, ItemListKey.ALBUM, size);
|
||||
|
||||
return (
|
||||
<ItemListWithPagination
|
||||
|
||||
@@ -51,7 +51,7 @@ export const AlbumArtistListInfiniteGrid = ({
|
||||
enabled: saveScrollOffset,
|
||||
});
|
||||
|
||||
const rows = useGridRows(LibraryItem.ALBUM_ARTIST, ItemListKey.ALBUM_ARTIST);
|
||||
const rows = useGridRows(LibraryItem.ALBUM_ARTIST, ItemListKey.ALBUM_ARTIST, size);
|
||||
|
||||
return (
|
||||
<ItemGridList
|
||||
|
||||
@@ -56,7 +56,7 @@ export const AlbumArtistListPaginatedGrid = ({
|
||||
enabled: saveScrollOffset,
|
||||
});
|
||||
|
||||
const rows = useGridRows(LibraryItem.ALBUM_ARTIST, ItemListKey.ALBUM_ARTIST);
|
||||
const rows = useGridRows(LibraryItem.ALBUM_ARTIST, ItemListKey.ALBUM_ARTIST, size);
|
||||
|
||||
return (
|
||||
<ItemListWithPagination
|
||||
|
||||
@@ -50,7 +50,7 @@ export const ArtistListInfiniteGrid = ({
|
||||
enabled: saveScrollOffset,
|
||||
});
|
||||
|
||||
const rows = useGridRows(LibraryItem.ARTIST, ItemListKey.ARTIST);
|
||||
const rows = useGridRows(LibraryItem.ARTIST, ItemListKey.ARTIST, size);
|
||||
|
||||
return (
|
||||
<ItemGridList
|
||||
|
||||
@@ -55,7 +55,7 @@ export const ArtistListPaginatedGrid = ({
|
||||
enabled: saveScrollOffset,
|
||||
});
|
||||
|
||||
const rows = useGridRows(LibraryItem.ARTIST, ItemListKey.ARTIST);
|
||||
const rows = useGridRows(LibraryItem.ARTIST, ItemListKey.ARTIST, size);
|
||||
|
||||
return (
|
||||
<ItemListWithPagination
|
||||
|
||||
@@ -50,7 +50,7 @@ export const GenreListInfiniteGrid = ({
|
||||
enabled: saveScrollOffset,
|
||||
});
|
||||
|
||||
const rows = useGridRows(LibraryItem.GENRE, ItemListKey.GENRE);
|
||||
const rows = useGridRows(LibraryItem.GENRE, ItemListKey.GENRE, size);
|
||||
|
||||
return (
|
||||
<ItemGridList
|
||||
|
||||
@@ -55,7 +55,7 @@ export const GenreListPaginatedGrid = ({
|
||||
enabled: saveScrollOffset,
|
||||
});
|
||||
|
||||
const rows = useGridRows(LibraryItem.GENRE, ItemListKey.GENRE);
|
||||
const rows = useGridRows(LibraryItem.GENRE, ItemListKey.GENRE, size);
|
||||
|
||||
return (
|
||||
<ItemListWithPagination
|
||||
|
||||
@@ -50,7 +50,7 @@ export const PlaylistListInfiniteGrid = ({
|
||||
enabled: saveScrollOffset,
|
||||
});
|
||||
|
||||
const rows = useGridRows(LibraryItem.PLAYLIST, ItemListKey.PLAYLIST);
|
||||
const rows = useGridRows(LibraryItem.PLAYLIST, ItemListKey.PLAYLIST, size);
|
||||
|
||||
return (
|
||||
<ItemGridList
|
||||
|
||||
@@ -55,7 +55,7 @@ export const PlaylistListPaginatedGrid = ({
|
||||
enabled: saveScrollOffset,
|
||||
});
|
||||
|
||||
const rows = useGridRows(LibraryItem.PLAYLIST, ItemListKey.PLAYLIST);
|
||||
const rows = useGridRows(LibraryItem.PLAYLIST, ItemListKey.PLAYLIST, size);
|
||||
|
||||
return (
|
||||
<ItemListWithPagination
|
||||
|
||||
@@ -45,7 +45,7 @@ export const SongListInfiniteGrid = ({
|
||||
enabled: saveScrollOffset,
|
||||
});
|
||||
|
||||
const rows = useGridRows(LibraryItem.SONG, ItemListKey.SONG);
|
||||
const rows = useGridRows(LibraryItem.SONG, ItemListKey.SONG, size);
|
||||
|
||||
return (
|
||||
<ItemGridList
|
||||
|
||||
@@ -44,7 +44,7 @@ export const SongListPaginatedGrid = ({
|
||||
serverId,
|
||||
});
|
||||
|
||||
const rows = useGridRows(LibraryItem.SONG, ItemListKey.SONG);
|
||||
const rows = useGridRows(LibraryItem.SONG, ItemListKey.SONG, size);
|
||||
|
||||
return (
|
||||
<ItemListWithPagination
|
||||
|
||||
Reference in New Issue
Block a user