mirror of
https://github.com/antebudimir/feishin.git
synced 2026-01-01 10:23:33 +00:00
Add favorite handler to grid cards
This commit is contained in:
parent
7a3bdb531d
commit
d17f30f5e6
12 changed files with 114 additions and 7 deletions
|
|
@ -101,6 +101,7 @@ interface BaseGridCardProps {
|
|||
columnIndex: number;
|
||||
controls: {
|
||||
cardRows: CardRow<Album | AlbumArtist | Artist>[];
|
||||
handleFavorite: (options: { id: string[]; isFavorite: boolean; itemType: LibraryItem }) => void;
|
||||
handlePlayQueueAdd: (options: PlayQueueAddOptions) => void;
|
||||
itemType: LibraryItem;
|
||||
playButtonBehavior: Play;
|
||||
|
|
@ -179,6 +180,7 @@ export const DefaultCard = ({
|
|||
)}
|
||||
<ControlsContainer>
|
||||
<GridCardControls
|
||||
handleFavorite={controls.handleFavorite}
|
||||
handlePlayQueueAdd={handlePlayQueueAdd}
|
||||
itemData={data}
|
||||
itemType={itemType}
|
||||
|
|
|
|||
|
|
@ -118,7 +118,9 @@ export const GridCardControls = ({
|
|||
itemData,
|
||||
itemType,
|
||||
handlePlayQueueAdd,
|
||||
handleFavorite,
|
||||
}: {
|
||||
handleFavorite: (options: { id: string[]; isFavorite: boolean; itemType: LibraryItem }) => void;
|
||||
handlePlayQueueAdd?: (options: PlayQueueAddOptions) => void;
|
||||
itemData: any;
|
||||
itemType: LibraryItem;
|
||||
|
|
@ -138,6 +140,17 @@ export const GridCardControls = ({
|
|||
});
|
||||
};
|
||||
|
||||
const handleFavorites = async (e: MouseEvent<HTMLButtonElement>) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
handleFavorite?.({
|
||||
id: [itemData.id],
|
||||
isFavorite: itemData.userFavorite,
|
||||
itemType,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<GridCardControlsContainer>
|
||||
{/* <TopControls /> */}
|
||||
|
|
@ -148,13 +161,13 @@ export const GridCardControls = ({
|
|||
</PlayButton>
|
||||
<Group spacing="xs">
|
||||
<SecondaryButton
|
||||
disabled
|
||||
p={5}
|
||||
sx={{ svg: { fill: 'white !important' } }}
|
||||
variant="subtle"
|
||||
onClick={handleFavorites}
|
||||
>
|
||||
<FavoriteWrapper isFavorite={itemData?.isFavorite}>
|
||||
{itemData?.isFavorite ? (
|
||||
{itemData?.userFavorite ? (
|
||||
<RiHeartFill size={20} />
|
||||
) : (
|
||||
<RiHeartLine
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ export const GridCard = memo(({ data, index, style }: ListChildComponentProps) =
|
|||
itemType,
|
||||
playButtonBehavior,
|
||||
handlePlayQueueAdd,
|
||||
handleFavorite,
|
||||
route,
|
||||
display,
|
||||
} = data as GridCardData;
|
||||
|
|
@ -35,6 +36,7 @@ export const GridCard = memo(({ data, index, style }: ListChildComponentProps) =
|
|||
columnIndex={i}
|
||||
controls={{
|
||||
cardRows,
|
||||
handleFavorite,
|
||||
handlePlayQueueAdd,
|
||||
itemType,
|
||||
playButtonBehavior,
|
||||
|
|
|
|||
|
|
@ -105,6 +105,7 @@ interface BaseGridCardProps {
|
|||
columnIndex: number;
|
||||
controls: {
|
||||
cardRows: CardRow<Album | AlbumArtist | Artist>[];
|
||||
handleFavorite: (options: { id: string[]; isFavorite: boolean; itemType: LibraryItem }) => void;
|
||||
handlePlayQueueAdd: (options: PlayQueueAddOptions) => void;
|
||||
itemType: LibraryItem;
|
||||
playButtonBehavior: Play;
|
||||
|
|
@ -173,6 +174,7 @@ export const PosterCard = ({
|
|||
)}
|
||||
<ControlsContainer>
|
||||
<GridCardControls
|
||||
handleFavorite={controls.handleFavorite}
|
||||
handlePlayQueueAdd={controls.handlePlayQueueAdd}
|
||||
itemData={data}
|
||||
itemType={controls.itemType}
|
||||
|
|
|
|||
|
|
@ -21,10 +21,12 @@ const createItemData = memoize(
|
|||
itemWidth,
|
||||
route,
|
||||
handlePlayQueueAdd,
|
||||
handleFavorite,
|
||||
) => ({
|
||||
cardRows,
|
||||
columnCount,
|
||||
display,
|
||||
handleFavorite,
|
||||
handlePlayQueueAdd,
|
||||
itemCount,
|
||||
itemData,
|
||||
|
|
@ -50,6 +52,7 @@ export const VirtualGridWrapper = ({
|
|||
columnCount,
|
||||
rowCount,
|
||||
initialScrollOffset,
|
||||
handleFavorite,
|
||||
handlePlayQueueAdd,
|
||||
itemData,
|
||||
route,
|
||||
|
|
@ -59,6 +62,7 @@ export const VirtualGridWrapper = ({
|
|||
cardRows: CardRow<Album | AlbumArtist | Artist>[];
|
||||
columnCount: number;
|
||||
display: ListDisplayType;
|
||||
handleFavorite?: (options: { id: string[]; isFavorite: boolean; itemType: LibraryItem }) => void;
|
||||
handlePlayQueueAdd?: (options: PlayQueueAddOptions) => void;
|
||||
itemData: any[];
|
||||
itemGap: number;
|
||||
|
|
@ -81,6 +85,7 @@ export const VirtualGridWrapper = ({
|
|||
itemWidth,
|
||||
route,
|
||||
handlePlayQueueAdd,
|
||||
handleFavorite,
|
||||
);
|
||||
|
||||
const memoizedOnScroll = createScrollHandler(onScroll);
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ interface VirtualGridProps extends Omit<FixedSizeListProps, 'children' | 'itemSi
|
|||
cardRows: CardRow<any>[];
|
||||
display?: ListDisplayType;
|
||||
fetchFn: (options: { columnCount: number; skip: number; take: number }) => Promise<any>;
|
||||
handleFavorite?: (options: { id: string[]; isFavorite: boolean; itemType: LibraryItem }) => void;
|
||||
handlePlayQueueAdd?: (options: PlayQueueAddOptions) => void;
|
||||
itemData: any[];
|
||||
itemGap: number;
|
||||
|
|
@ -54,6 +55,7 @@ export const VirtualInfiniteGrid = forwardRef(
|
|||
fetchFn,
|
||||
loading,
|
||||
initialScrollOffset,
|
||||
handleFavorite,
|
||||
height,
|
||||
width,
|
||||
}: VirtualGridProps,
|
||||
|
|
@ -146,6 +148,7 @@ export const VirtualInfiniteGrid = forwardRef(
|
|||
cardRows={cardRows}
|
||||
columnCount={columnCount}
|
||||
display={display || ListDisplayType.CARD}
|
||||
handleFavorite={handleFavorite}
|
||||
handlePlayQueueAdd={handlePlayQueueAdd}
|
||||
height={height}
|
||||
initialScrollOffset={initialScrollOffset}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue