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

Add dynamic grid sizing

Browse source
This commit is contained in:
jeffvli 2023-08-07 14:42:47 -07:00
parent 1ab75f7187
commit f09ad1da89
15 changed files with 127 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -20,6 +20,7 @@ interface BaseGridCardProps {
itemType: LibraryItem;
}) => void;
handlePlayQueueAdd: (options: PlayQueueAddOptions) => void;
itemGap: number;
itemType: LibraryItem;
playButtonBehavior: Play;
resetInfiniteLoaderCache: () => void;
@ -30,12 +31,12 @@ interface BaseGridCardProps {
listChildProps: Omit<ListChildComponentProps, 'data' | 'style'>;
}
const DefaultCardContainer = styled.div<{ $isHidden?: boolean }>`
const DefaultCardContainer = styled.div<{ $isHidden?: boolean; $itemGap: number }>`
display: flex;
flex-direction: column;
width: 100%;
height: calc(100% - 2rem);
margin: 0.5rem;
margin: ${({ $itemGap }) => $itemGap}px;
overflow: hidden;
background: var(--card-default-bg);
border-radius: var(--card-default-radius);
@ -172,6 +173,7 @@ export const DefaultCard = ({
return (
<DefaultCardContainer
key={`card-${columnIndex}-${listChildProps.index}`}
$itemGap={controls.itemGap}
onClick={() => navigate(path)}
>
<InnerCardContainer>
@ -221,6 +223,7 @@ export const DefaultCard = ({
<DefaultCardContainer
key={`card-${columnIndex}-${listChildProps.index}`}
$isHidden={isHidden}
$itemGap={controls.itemGap}
>
<InnerCardContainer>
<ImageContainer>

2
src/renderer/components/virtual-grid/grid-card/grid-card-controls.tsx
View file

@ -123,7 +123,7 @@ export const GridCardControls = ({
handlePlayQueueAdd?: (options: PlayQueueAddOptions) => void;
itemData: any;
itemType: LibraryItem;
resetInfiniteLoaderCache: () => void;
resetInfiniteLoaderCache?: () => void;
}) => {
const [isFavorite, setIsFavorite] = useState(itemData?.userFavorite);
const playButtonBehavior = usePlayButtonBehavior();

2
src/renderer/components/virtual-grid/grid-card/index.tsx
View file

@ -12,6 +12,7 @@ export const GridCard = memo(({ data, index, style }: ListChildComponentProps) =
cardRows,
itemData,
itemType,
itemGap,
playButtonBehavior,
handlePlayQueueAdd,
handleFavorite,
@ -40,6 +41,7 @@ export const GridCard = memo(({ data, index, style }: ListChildComponentProps) =
cardRows,
handleFavorite,
handlePlayQueueAdd,
itemGap,
itemType,
playButtonBehavior,
resetInfiniteLoaderCache,

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

@ -20,6 +20,7 @@ interface BaseGridCardProps {
itemType: LibraryItem;
}) => void;
handlePlayQueueAdd: (options: PlayQueueAddOptions) => void;
itemGap: number;
itemType: LibraryItem;
playButtonBehavior: Play;
resetInfiniteLoaderCache: () => void;
@ -30,12 +31,12 @@ interface BaseGridCardProps {
listChildProps: Omit<ListChildComponentProps, 'data' | 'style'>;
}
const PosterCardContainer = styled.div<{ $isHidden?: boolean }>`
const PosterCardContainer = styled.div<{ $isHidden?: boolean; $itemGap: number }>`
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
margin: 1rem;
margin: ${({ $itemGap }) => $itemGap}px;
overflow: hidden;
opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};
pointer-events: auto;
@ -158,7 +159,10 @@ export const PosterCard = ({
}
return (
<PosterCardContainer key={`card-${columnIndex}-${listChildProps.index}`}>
<PosterCardContainer
key={`card-${columnIndex}-${listChildProps.index}`}
$itemGap={controls.itemGap}
>
<LinkContainer onClick={() => navigate(path)}>
<ImageContainer $isFavorite={data?.userFavorite}>
{data?.imageUrl ? (
@ -205,6 +209,7 @@ export const PosterCard = ({
<PosterCardContainer
key={`card-${columnIndex}-${listChildProps.index}`}
$isHidden={isHidden}
$itemGap={controls.itemGap}
>
<Skeleton
visible

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

@ -72,7 +72,7 @@ export const VirtualInfiniteGrid = forwardRef(
const [itemData, setItemData] = useState<any[]>(fetchInitialData?.() || []);
const { itemHeight, rowCount, columnCount } = useMemo(() => {
const itemsPerRow = itemSize;
const itemsPerRow = width ? Math.floor(width / itemSize) : 5;
const widthPerItem = Number(width) / itemsPerRow;
const itemHeight = widthPerItem + cardRows.length * 26;