vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-09 20:29:36 +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 { useQuery, useQueryClient, useSuspenseQuery } from '@tanstack/react-query';
import { LayoutGroup, motion } from 'motion/react';
import { useCallback, useMemo, useRef, useState } from 'react'; import { useCallback, useMemo, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { createSearchParams, generatePath, Link, useParams } from 'react-router'; 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"> <Grid columns={24} gutter="md" type="container">
{displayedAlbums.map((album) => ( {displayedAlbums.map((album) => (
<Grid.Col key={album.id} span={span}> <Grid.Col key={album.id} span={span}>
<MemoizedItemCard <motion.div
controls={controls} layout
data={album} layoutId={album.id}
enableDrag transition={{
itemType={LibraryItem.ALBUM} duration: 0.5,
rows={rows} ease: 'easeInOut',
type="poster" layout: { duration: 0.5, ease: 'easeInOut' },
withControls }}
/> >
<MemoizedItemCard
controls={controls}
data={album}
enableDrag
itemType={LibraryItem.ALBUM}
rows={rows}
type="poster"
withControls
/>
</motion.div>
</Grid.Col> </Grid.Col>
))} ))}
</Grid> </Grid>
@@ -1017,17 +1028,20 @@ const ArtistAlbums = () => {
/> />
</Group> </Group>
<div className={styles.albumSectionContainer} ref={cq.ref}> <div className={styles.albumSectionContainer} ref={cq.ref}>
{cq.isCalculated && {cq.isCalculated && (
releaseTypeEntries.map(({ albums, displayName, releaseType }) => ( <LayoutGroup>
<AlbumSection {releaseTypeEntries.map(({ albums, displayName, releaseType }) => (
albums={albums} <AlbumSection
controls={controls} albums={albums}
cq={cq} controls={controls}
key={releaseType} cq={cq}
rows={rows} key={releaseType}
title={displayName} rows={rows}
/> title={displayName}
))} />
))}
</LayoutGroup>
)}
</div> </div>
</Stack> </Stack>
); );