vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-07 20:40:15 +02:00
Code Issues Packages Projects Releases Wiki Activity

add layout animation for artist album cards

Browse Source
This commit is contained in:
jeffvli
2025-12-27 02:25:13 -08:00
parent 928b0b6f4d
commit a1114235d6
1 changed files with 34 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/features/artists/components/album-artist-detail-content.tsx
+34 -20
View File
@@ -1,4 +1,5 @@
import { useQuery, useQueryClient, useSuspenseQuery } from '@tanstack/react-query';
import { LayoutGroup, motion } from 'motion/react';
import { useCallback, useMemo, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { createSearchParams, generatePath, Link, useParams } from 'react-router';
@@ -796,15 +797,25 @@ const AlbumSection = ({ albums, controls, cq, rows, title }: AlbumSectionProps)
<Grid columns={24} gutter="md" type="container">
{displayedAlbums.map((album) => (
<Grid.Col key={album.id} span={span}>
<MemoizedItemCard
controls={controls}
data={album}
enableDrag
itemType={LibraryItem.ALBUM}
rows={rows}
type="poster"
withControls
/>
<motion.div
layout
layoutId={album.id}
transition={{
duration: 0.5,
ease: 'easeInOut',
layout: { duration: 0.5, ease: 'easeInOut' },
}}
>
<MemoizedItemCard
controls={controls}
data={album}
enableDrag
itemType={LibraryItem.ALBUM}
rows={rows}
type="poster"
withControls
/>
</motion.div>
</Grid.Col>
))}
</Grid>
@@ -1017,17 +1028,20 @@ const ArtistAlbums = () => {
/>
</Group>
<div className={styles.albumSectionContainer} ref={cq.ref}>
{cq.isCalculated &&
releaseTypeEntries.map(({ albums, displayName, releaseType }) => (
<AlbumSection
albums={albums}
controls={controls}
cq={cq}
key={releaseType}
rows={rows}
title={displayName}
/>
))}
{cq.isCalculated && (
<LayoutGroup>
{releaseTypeEntries.map(({ albums, displayName, releaseType }) => (
<AlbumSection
albums={albums}
controls={controls}
cq={cq}
key={releaseType}
rows={rows}
title={displayName}
/>
))}
</LayoutGroup>
)}
</div>
</Stack>
);