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

Change grid size to items per row

Browse source
This commit is contained in:
jeffvli 2023-03-28 15:37:50 -07:00
parent e47fcfc62e
commit 219a9ed613
8 changed files with 125 additions and 97 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
src/renderer/components/virtual-grid/grid-card/default-card.tsx
View file

@ -1,4 +1,4 @@
import { generatePath, Link } from 'react-router-dom';
import { generatePath, useNavigate } from 'react-router-dom';
import { ListChildComponentProps } from 'react-window';
import styled from 'styled-components';
import { Album, AlbumArtist, Artist, LibraryItem } from '/@/renderer/api/types';
@ -31,6 +31,7 @@ const DefaultCardContainer = styled.div<{ $isHidden?: boolean }>`
overflow: hidden;
background: var(--card-default-bg);
border-radius: var(--card-default-radius);
cursor: pointer;
opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};
pointer-events: auto;
@ -106,42 +107,44 @@ export const DefaultCard = ({
controls,
isHidden,
}: BaseGridCardProps) => {
const navigate = useNavigate();
if (data) {
const path = generatePath(
controls.route.route,
controls.route.slugs?.reduce((acc, slug) => {
return {
...acc,
[slug.slugProperty]: data[slug.idProperty],
};
}, {}),
);
return (
<DefaultCardContainer>
<Link
tabIndex={0}
to={generatePath(
controls.route.route,
controls.route.slugs?.reduce((acc, slug) => {
return {
...acc,
[slug.slugProperty]: data[slug.idProperty],
};
}, {}),
)}
>
<InnerCardContainer key={`card-${columnIndex}-${listChildProps.index}`}>
<ImageContainer>
<Image
placeholder={data?.imagePlaceholderUrl || 'var(--placeholder-bg)'}
src={data?.imageUrl}
/>
<GridCardControls
handleFavorite={controls.handleFavorite}
handlePlayQueueAdd={controls.handlePlayQueueAdd}
itemData={data}
itemType={controls.itemType}
/>
</ImageContainer>
<DetailContainer>
<CardRows
data={data}
rows={controls.cardRows}
/>
</DetailContainer>
</InnerCardContainer>
</Link>
<DefaultCardContainer
key={`card-${columnIndex}-${listChildProps.index}`}
onClick={() => navigate(path)}
>
<InnerCardContainer>
<ImageContainer>
<Image
placeholder={data?.imagePlaceholderUrl || 'var(--placeholder-bg)'}
src={data?.imageUrl}
/>
<GridCardControls
handleFavorite={controls.handleFavorite}
handlePlayQueueAdd={controls.handlePlayQueueAdd}
itemData={data}
itemType={controls.itemType}
/>
</ImageContainer>
<DetailContainer>
<CardRows
data={data}
rows={controls.cardRows}
/>
</DetailContainer>
</InnerCardContainer>
</DefaultCardContainer>
);
}

79
src/renderer/components/virtual-grid/grid-card/poster-card.tsx
View file

@ -1,4 +1,5 @@
import { generatePath, Link } from 'react-router-dom';
import { Stack } from '@mantine/core';
import { generatePath, useNavigate } from 'react-router-dom';
import { ListChildComponentProps } from 'react-window';
import styled from 'styled-components';
import { Album, AlbumArtist, Artist, LibraryItem } from '/@/renderer/api/types';
@ -27,7 +28,7 @@ const PosterCardContainer = styled.div<{ $isHidden?: boolean }>`
flex-direction: column;
width: 100%;
height: 100%;
margin: 0.5rem;
margin: 1rem;
overflow: hidden;
opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};
pointer-events: auto;
@ -35,16 +36,10 @@ const PosterCardContainer = styled.div<{ $isHidden?: boolean }>`
.card-controls {
opacity: 0;
}
`;
&:hover .card-controls {
opacity: 1;
}
&:hover * {
&::before {
opacity: 0.5;
}
}
const LinkContainer = styled.div`
cursor: pointer;
`;
const ImageContainer = styled.div`
@ -70,6 +65,16 @@ const ImageContainer = styled.div`
content: '';
user-select: none;
}
&:hover {
&::before {
opacity: 0.5;
}
}
&:hover .card-controls {
opacity: 1;
}
`;
const Image = styled.img`
@ -91,21 +96,22 @@ export const PosterCard = ({
controls,
isHidden,
}: BaseGridCardProps) => {
const navigate = useNavigate();
if (data) {
const path = generatePath(
controls.route.route,
controls.route.slugs?.reduce((acc, slug) => {
return {
...acc,
[slug.slugProperty]: data[slug.idProperty],
};
}, {}),
);
return (
<PosterCardContainer key={`card-${columnIndex}-${listChildProps.index}`}>
<Link
tabIndex={0}
to={generatePath(
controls.route.route,
controls.route.slugs?.reduce((acc, slug) => {
return {
...acc,
[slug.slugProperty]: data[slug.idProperty],
};
}, {}),
)}
>
<LinkContainer onClick={() => navigate(path)}>
<ImageContainer>
<Image
placeholder={data?.imagePlaceholderUrl || 'var(--card-default-bg)'}
@ -118,7 +124,7 @@ export const PosterCard = ({
itemType={controls.itemType}
/>
</ImageContainer>
</Link>
</LinkContainer>
<DetailContainer>
<CardRows
data={data}
@ -134,13 +140,24 @@ export const PosterCard = ({
key={`card-${columnIndex}-${listChildProps.index}`}
$isHidden={isHidden}
>
<ImageContainer>
<Skeleton
visible
radius="sm"
/>
</ImageContainer>
<DetailContainer />
<Skeleton
visible
radius="sm"
>
<ImageContainer />
</Skeleton>
<DetailContainer>
<Stack spacing="sm">
{controls.cardRows.map((row) => (
<Skeleton
key={row.arrayProperty}
visible
height={14}
radius="sm"
/>
))}
</Stack>
</DetailContainer>
</PosterCardContainer>
);
};

9
src/renderer/components/virtual-grid/virtual-infinite-grid.tsx
View file

@ -56,20 +56,17 @@ export const VirtualInfiniteGrid = forwardRef(
const listRef = useRef<any>(null);
const loader = useRef<InfiniteLoader>(null);
const sz = itemSize / 2;
const { itemHeight, rowCount, columnCount } = useMemo(() => {
const itemsPerRow = Math.floor(Number(width) / sz!) - 1;
const widthPerItem = Number(width) / itemsPerRow - 10;
const itemsPerRow = itemSize;
const widthPerItem = Number(width) / itemsPerRow;
const itemHeight = widthPerItem + cardRows.length * 26;
return {
columnCount: itemsPerRow,
itemHeight,
itemWidth: sz,
rowCount: Math.ceil(itemCount / itemsPerRow),
};
}, [cardRows.length, itemCount, sz, width]);
}, [cardRows.length, itemCount, itemSize, width]);
const isItemLoaded = useCallback(
(index: number) => {

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

@ -318,7 +318,7 @@ export const AlbumListContent = ({ itemCount, gridRef, tableRef }: AlbumListCont
itemCount={itemCount || 0}
itemData={itemData}
itemGap={20}
itemSize={150 + (grid?.size || 0)}
itemSize={grid?.itemsPerRow || 5}
itemType={LibraryItem.ALBUM}
loading={itemCount === undefined || itemCount === null}
minimumBatchSize={40}

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

@ -331,7 +331,7 @@ export const AlbumListHeaderFilters = ({
if (display === ListDisplayType.TABLE || display === ListDisplayType.TABLE_PAGINATED) {
setTable({ data: { rowHeight: e }, key: 'album' });
} else {
setGrid({ data: { size: e }, key: 'album' });
setGrid({ data: { itemsPerRow: e }, key: 'album' });
}
};
@ -564,17 +564,21 @@ export const AlbumListHeaderFilters = ({
Table (paginated)
</DropdownMenu.Item>
<DropdownMenu.Divider />
<DropdownMenu.Label>Item size</DropdownMenu.Label>
<DropdownMenu.Label>
{display === ListDisplayType.CARD || display === ListDisplayType.POSTER
? 'Items per row'
: 'Item size'}
</DropdownMenu.Label>
<DropdownMenu.Item closeMenuOnClick={false}>
<Slider
defaultValue={
display === ListDisplayType.CARD || display === ListDisplayType.POSTER
? grid?.size || 0
? grid?.itemsPerRow || 0
: table.rowHeight
}
label={null}
max={400}
min={-25}
max={14}
min={2}
onChange={debouncedHandleItemSize}
/>
</DropdownMenu.Item>

2
src/renderer/features/artists/components/album-artist-list-content.tsx
View file

@ -276,7 +276,7 @@ export const AlbumArtistListContent = ({ gridRef, tableRef }: AlbumArtistListCon
itemCount={checkAlbumArtistList?.data?.totalRecordCount || 0}
itemData={itemData}
itemGap={20}
itemSize={150 + (grid?.size || 0)}
itemSize={grid?.itemsPerRow || 5}
itemType={LibraryItem.ALBUM_ARTIST}
loading={checkAlbumArtistList.isLoading}
minimumBatchSize={40}

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

@ -96,7 +96,7 @@ export const AlbumArtistListHeaderFilters = ({
if (display === ListDisplayType.TABLE || display === ListDisplayType.TABLE_PAGINATED) {
setTable({ data: { rowHeight: e }, key: pageKey });
} else {
setGrid({ data: { size: e }, key: pageKey });
setGrid({ data: { itemsPerRow: e }, key: pageKey });
}
};
@ -432,17 +432,23 @@ export const AlbumArtistListHeaderFilters = ({
<DropdownMenu.Divider />
<DropdownMenu.Label>Item size</DropdownMenu.Label>
<DropdownMenu.Item closeMenuOnClick={false}>
<Slider
defaultValue={
display === ListDisplayType.CARD || display === ListDisplayType.POSTER
? grid?.size
: table.rowHeight
}
label={null}
max={400}
min={-50}
onChange={debouncedHandleItemSize}
/>
{display === ListDisplayType.CARD || display === ListDisplayType.POSTER ? (
<Slider
defaultValue={grid?.itemsPerRow}
label={null}
max={10}
min={2}
onChange={debouncedHandleItemSize}
/>
) : (
<Slider
defaultValue={table.rowHeight}
label={null}
max={100}
min={30}
onChange={debouncedHandleItemSize}
/>
)}
</DropdownMenu.Item>
{(display === ListDisplayType.TABLE || display === ListDisplayType.TABLE_PAGINATED) && (
<>

13
src/renderer/store/list.store.ts
View file

@ -34,8 +34,8 @@ type ListTableProps = {
} & DataTableProps;
type ListGridProps = {
itemsPerRow?: number;
scrollOffset?: number;
size?: number;
};
type ItemProps<TFilter = any> = {
@ -165,8 +165,9 @@ export const useListStore = create<ListSlice>()(
state.detail[args.key] = {
filter: {} as FilterType,
grid: {
itemsPerRow:
state.item[page as keyof ListState['item']].grid?.itemsPerRow || 5,
scrollOffset: 0,
size: state.item[page as keyof ListState['item']].grid?.size || 200,
},
table: {
pagination: {
@ -282,7 +283,7 @@ export const useListStore = create<ListSlice>()(
sortBy: AlbumListSort.RECENTLY_ADDED,
sortOrder: SortOrder.DESC,
},
grid: { scrollOffset: 0, size: 200 },
grid: { itemsPerRow: 5, scrollOffset: 0 },
table: {
autoFit: true,
columns: [
@ -323,7 +324,7 @@ export const useListStore = create<ListSlice>()(
sortBy: AlbumArtistListSort.NAME,
sortOrder: SortOrder.DESC,
},
grid: { scrollOffset: 0, size: 200 },
grid: { itemsPerRow: 5, scrollOffset: 0 },
table: {
autoFit: true,
columns: [
@ -409,7 +410,7 @@ export const useListStore = create<ListSlice>()(
sortBy: SongListSort.RECENTLY_ADDED,
sortOrder: SortOrder.DESC,
},
grid: { scrollOffset: 0, size: 0 },
grid: { itemsPerRow: 5, scrollOffset: 0 },
table: {
autoFit: true,
columns: [
@ -470,7 +471,7 @@ export const useListStore = create<ListSlice>()(
Object.entries(state).filter(([key]) => !['detail'].includes(key)),
);
},
version: 1,
version: 2,
},
),
);