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

migrate item grid back to react-window v1

Browse Source
This commit is contained in:
jeffvli
2025-10-26 01:38:03 -07:00
parent 62127df4f4
commit 0b56524b7d
10 changed files with 471 additions and 353 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/item-card/item-card-controls.tsx
+7 -7
View File
@@ -57,7 +57,7 @@ export const ItemCardControls = ({
<PlayButton
onClick={(e) => {
e.stopPropagation();
controls.onPlay?.(item, itemType, Play.NOW, e);
controls?.onPlay?.(item, itemType, Play.NOW, e);
}}
/>
<SecondaryPlayButton
@@ -65,7 +65,7 @@ export const ItemCardControls = ({
icon="mediaPlayNext"
onClick={(e) => {
e.stopPropagation();
controls.onPlay?.(item, itemType, Play.NEXT, e);
controls?.onPlay?.(item, itemType, Play.NEXT, e);
}}
/>
<SecondaryPlayButton
@@ -73,7 +73,7 @@ export const ItemCardControls = ({
icon="mediaPlayLast"
onClick={(e) => {
e.stopPropagation();
controls.onPlay?.(item, itemType, Play.LAST, e);
controls?.onPlay?.(item, itemType, Play.LAST, e);
}}
/>
<SecondaryButton
@@ -81,7 +81,7 @@ export const ItemCardControls = ({
icon="favorite"
onClick={(e) => {
e.stopPropagation();
controls.onFavorite?.(item, itemType, e);
controls?.onFavorite?.(item, itemType, e);
}}
/>
<Rating className={styles.rating} size="xs" />
@@ -90,16 +90,16 @@ export const ItemCardControls = ({
icon="ellipsisHorizontal"
onClick={(e) => {
e.stopPropagation();
controls.onMore?.(item, itemType, e);
controls?.onMore?.(item, itemType, e);
}}
/>
{controls.onItemExpand && (
{controls?.onItemExpand && (
<SecondaryButton
className={styles.expand}
icon="arrowDownS"
onClick={(e) => {
e.stopPropagation();
controls.onItemExpand?.(item, itemType, e);
controls?.onItemExpand?.(item, itemType, e);
}}
/>
)}
src/renderer/components/item-card/item-card.tsx
+71 -16
View File
@@ -106,12 +106,29 @@ const CompactItemCard = ({
const [showControls, setShowControls] = useState(false);
if (data) {
const handleMouseEnter = () => {
if (withControls) {
setShowControls(true);
}
};
const handleMouseLeave = () => {
if (withControls) {
setShowControls(false);
}
};
const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
controls?.onClick?.(data, itemType, e);
};
return (
<div className={clsx(styles.container, styles.compact)}>
<div
className={clsx(styles.imageContainer, { [styles.isRound]: isRound })}
onMouseEnter={() => withControls && setShowControls(true)}
onMouseLeave={() => withControls && setShowControls(false)}
onClick={handleClick}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
>
<Image
className={clsx(styles.image, { [styles.isRound]: isRound })}
@@ -140,7 +157,7 @@ const CompactItemCard = ({
return (
<div className={clsx(styles.container, styles.compact)}>
<div className={clsx(styles.imageContainer, { [styles.isRound]: isRound })}>
<Skeleton className={styles.image} />
<Skeleton className={styles.image} enableAnimation />
<div className={clsx(styles.detailContainer, styles.compact)}>
{rows.map((row) => (
<div className={styles.row} key={row.id}>
@@ -165,12 +182,29 @@ const DefaultItemCard = ({
const [showControls, setShowControls] = useState(false);
if (data) {
const handleMouseEnter = () => {
if (withControls) {
setShowControls(true);
}
};
const handleMouseLeave = () => {
if (withControls) {
setShowControls(false);
}
};
const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
controls?.onClick?.(data, itemType, e);
};
return (
<div className={clsx(styles.container)}>
<div
className={clsx(styles.imageContainer, { [styles.isRound]: isRound })}
onMouseEnter={() => withControls && setShowControls(true)}
onMouseLeave={() => withControls && setShowControls(false)}
onClick={handleClick}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
>
<Image
className={clsx(styles.image, { [styles.isRound]: isRound })}
@@ -199,7 +233,7 @@ const DefaultItemCard = ({
return (
<div className={clsx(styles.container)}>
<div className={clsx(styles.imageContainer, { [styles.isRound]: isRound })}>
<Skeleton className={styles.image} />
<Skeleton className={styles.image} enableAnimation />
</div>
<div className={styles.detailContainer}>
{rows.map((row) => (
@@ -224,19 +258,35 @@ const PosterItemCard = ({
const [showControls, setShowControls] = useState(false);
if (data) {
const handleMouseEnter = () => {
if (withControls) {
setShowControls(true);
}
};
const handleMouseLeave = () => {
if (withControls) {
setShowControls(false);
}
};
const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
controls?.onClick?.(data, itemType, e);
};
return (
<div className={clsx(styles.container, styles.poster)}>
<div
className={clsx(styles.imageContainer, { [styles.isRound]: isRound })}
onClick={(e) => controls?.onClick?.(data, itemType, e)}
onMouseEnter={() => withControls && setShowControls(true)}
onMouseLeave={() => withControls && setShowControls(false)}
onClick={handleClick}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
>
<Image
className={clsx(styles.image, { [styles.isRound]: isRound })}
src={imageUrl}
/>
{withControls && showControls && (
{withControls && showControls && data && (
<ItemCardControls
controls={controls}
item={data}
@@ -245,11 +295,13 @@ const PosterItemCard = ({
/>
)}
</div>
<div className={styles.detailContainer}>
{rows.map((row) => (
<ItemCardRow data={data!} key={row.id} row={row} type="poster" />
))}
</div>
{data && (
<div className={styles.detailContainer}>
{rows.map((row) => (
<ItemCardRow data={data} key={row.id} row={row} type="poster" />
))}
</div>
)}
</div>
);
}
@@ -257,7 +309,10 @@ const PosterItemCard = ({
return (
<div className={clsx(styles.container, styles.poster)}>
<div className={clsx(styles.imageContainer, { [styles.isRound]: isRound })}>
<Skeleton className={clsx(styles.image, { [styles.isRound]: isRound })} />
<Skeleton
className={clsx(styles.image, { [styles.isRound]: isRound })}
enableAnimation
/>
</div>
<div className={styles.detailContainer}>
{rows.map((row) => (