mirror of
https://github.com/jeffvli/feishin.git
synced 2026-05-07 04:20:12 +02:00
add expanded list item component
This commit is contained in:
jeffvli
@@ -1,7 +1,7 @@
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: var(--theme-spacing-lg);
|
||||
padding: var(--theme-spacing-sm);
|
||||
}
|
||||
|
||||
.inner {
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
import { Suspense } from 'react';
|
||||
|
||||
import styles from './expanded-list-item.module.css';
|
||||
|
||||
import {
|
||||
@@ -5,6 +7,7 @@ import {
|
||||
ItemListStateActions,
|
||||
} from '/@/renderer/components/item-list/helpers/item-list-state';
|
||||
import { ExpandedAlbumListItem } from '/@/renderer/features/albums/components/expanded-album-list-item';
|
||||
import { Spinner } from '/@/shared/components/spinner/spinner';
|
||||
import { LibraryItem } from '/@/shared/types/domain-types';
|
||||
|
||||
interface ExpandedListItemProps {
|
||||
@@ -23,7 +26,9 @@ export const ExpandedListItem = ({ internalState, itemType }: ExpandedListItemPr
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<div className={styles.inner}>
|
||||
<SelectedItem item={currentItem} itemType={itemType} />
|
||||
<Suspense fallback={<Spinner container />}>
|
||||
<SelectedItem item={currentItem} itemType={itemType} />
|
||||
</Suspense>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -2,6 +2,8 @@
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
container-name: expanded-album-list-item;
|
||||
container-type: inline-size;
|
||||
background-color: var(--theme-colors-surface);
|
||||
border-radius: var(--theme-radius-md);
|
||||
}
|
||||
@@ -12,3 +14,129 @@
|
||||
bottom: 0;
|
||||
padding: var(--theme-spacing-sm);
|
||||
}
|
||||
|
||||
.expanded {
|
||||
position: relative;
|
||||
gap: var(--theme-spacing-md);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
border-radius: var(--theme-radius-md);
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--theme-spacing-xs);
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--theme-spacing-md);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
padding: var(--theme-spacing-md);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
z-index: 100;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
line-height: 1.3;
|
||||
color: black;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.item-subtitle {
|
||||
color: black;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.dark {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.image-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
grid-area: image;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.background-image {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 60%;
|
||||
height: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
filter: blur(2px);
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
content: '';
|
||||
background: linear-gradient(to right, var(--bg-color) 0%, transparent 100%);
|
||||
}
|
||||
|
||||
@container (min-width: 640px) {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
@container (min-width: 768px) {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
@container (min-width: 1200px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.tracks {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
gap: var(--theme-spacing-sm);
|
||||
width: 60%;
|
||||
max-width: 700px;
|
||||
min-height: 0;
|
||||
|
||||
@container (min-width: 640px) {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
@container (min-width: 768px) {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
@container (min-width: 1200px) {
|
||||
width: 30%;
|
||||
}
|
||||
}
|
||||
|
||||
.tracks * {
|
||||
color: black;
|
||||
|
||||
/* stylelint-disable-next-line selector-class-pattern */
|
||||
:global(.table-row-module_row) {
|
||||
/* height: var(--table-row-config-condensed-height); */
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.tracks.dark * {
|
||||
color: white;
|
||||
}
|
||||
|
||||
@@ -1,77 +1,122 @@
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { useSuspenseQuery } from '@tanstack/react-query';
|
||||
import clsx from 'clsx';
|
||||
import formatDuration from 'format-duration';
|
||||
import { motion } from 'motion/react';
|
||||
import { useEffect, useRef, useTransition } from 'react';
|
||||
import { Fragment, Suspense } from 'react';
|
||||
|
||||
import styles from './expanded-album-list-item.module.css';
|
||||
|
||||
import { ItemListItem } from '/@/renderer/components/item-list/helpers/item-list-state';
|
||||
import { albumQueries } from '/@/renderer/features/albums/api/album-api';
|
||||
import { useFastAverageColor } from '/@/renderer/hooks';
|
||||
import { Group } from '/@/shared/components/group/group';
|
||||
import { ScrollArea } from '/@/shared/components/scroll-area/scroll-area';
|
||||
import { Separator } from '/@/shared/components/separator/separator';
|
||||
import { Spinner } from '/@/shared/components/spinner/spinner';
|
||||
import { Table } from '/@/shared/components/table/table';
|
||||
import { TextTitle } from '/@/shared/components/text-title/text-title';
|
||||
import { Text } from '/@/shared/components/text/text';
|
||||
|
||||
interface ExpandedAlbumListItemProps {
|
||||
item: ItemListItem;
|
||||
previousItem?: ItemListItem | null;
|
||||
}
|
||||
|
||||
export const ExpandedAlbumListItem = ({ item, previousItem }: ExpandedAlbumListItemProps) => {
|
||||
const [, startTransition] = useTransition();
|
||||
const previousDataRef = useRef<any>(null);
|
||||
|
||||
const { data, isLoading } = useQuery(
|
||||
export const ExpandedAlbumListItem = ({ item }: ExpandedAlbumListItemProps) => {
|
||||
const { data, isLoading } = useSuspenseQuery(
|
||||
albumQueries.detail({
|
||||
options: {},
|
||||
query: { id: item.id },
|
||||
serverId: item.serverId,
|
||||
}),
|
||||
);
|
||||
|
||||
// Store the previous data when we have new data
|
||||
useEffect(() => {
|
||||
if (data && !isLoading) {
|
||||
previousDataRef.current = data;
|
||||
}
|
||||
}, [data, isLoading]);
|
||||
|
||||
// Use current data if available, otherwise use previous data for smooth transition
|
||||
const displayData = data || previousDataRef.current;
|
||||
const isDataTransitioning = isLoading && previousDataRef.current;
|
||||
|
||||
const color = useFastAverageColor({
|
||||
algorithm: 'sqrt',
|
||||
id: item.id,
|
||||
src: displayData?.imageUrl,
|
||||
srcLoaded: !isDataTransitioning,
|
||||
src: data?.imageUrl,
|
||||
srcLoaded: true,
|
||||
});
|
||||
|
||||
// Start transition when item changes
|
||||
useEffect(() => {
|
||||
if (previousItem && previousItem.id !== item.id) {
|
||||
startTransition(() => {});
|
||||
}
|
||||
}, [item.id, previousItem, startTransition]);
|
||||
if (color.isLoading) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
animate={{
|
||||
backgroundColor: color.background,
|
||||
opacity: isDataTransitioning ? 0.8 : 1,
|
||||
opacity: 1,
|
||||
}}
|
||||
className={styles.container}
|
||||
exit={{ opacity: 0 }}
|
||||
initial={{ backgroundColor: color.background, opacity: 0 }}
|
||||
transition={{
|
||||
duration: 0.4,
|
||||
ease: 'easeInOut',
|
||||
}}
|
||||
initial={{ opacity: 0 }}
|
||||
style={{ backgroundColor: color.background }}
|
||||
>
|
||||
{isDataTransitioning && (
|
||||
{isLoading && (
|
||||
<div className={styles.loading}>
|
||||
<Spinner />
|
||||
</div>
|
||||
)}
|
||||
<div style={{ padding: '1rem' }}>
|
||||
ExpandedAlbumListItem - {displayData?.name || 'Loading...'}
|
||||
</div>
|
||||
<Suspense>
|
||||
<div className={styles.expanded}>
|
||||
<div className={styles.content}>
|
||||
<div className={styles.header}>
|
||||
<TextTitle
|
||||
className={clsx(styles.itemTitle, { [styles.dark]: color.isDark })}
|
||||
fw={700}
|
||||
order={4}
|
||||
>
|
||||
{data?.name}
|
||||
</TextTitle>
|
||||
<Group
|
||||
className={clsx(styles.itemSubtitle, {
|
||||
[styles.dark]: color.isDark,
|
||||
})}
|
||||
gap="xs"
|
||||
>
|
||||
{data?.albumArtists.map((artist, index) => (
|
||||
<Fragment key={artist.id}>
|
||||
<Text
|
||||
className={clsx(styles.itemSubtitle, {
|
||||
[styles.dark]: color.isDark,
|
||||
})}
|
||||
>
|
||||
{artist.name}
|
||||
</Text>
|
||||
{index < data?.albumArtists.length - 1 && <Separator />}
|
||||
</Fragment>
|
||||
))}
|
||||
</Group>
|
||||
</div>
|
||||
<div className={clsx(styles.tracks, { [styles.dark]: color.isDark })}>
|
||||
<ScrollArea>
|
||||
<Table withRowBorders={false}>
|
||||
<Table.Tbody>
|
||||
{data?.songs?.map((song) => (
|
||||
<Table.Tr key={song.id}>
|
||||
<Table.Td style={{ width: '45px' }}>
|
||||
{song.discNumber} - {song.trackNumber}
|
||||
</Table.Td>
|
||||
<Table.Td>{song.name}</Table.Td>
|
||||
<Table.Td style={{ width: '50px' }}>
|
||||
{formatDuration(song.duration)}
|
||||
</Table.Td>
|
||||
</Table.Tr>
|
||||
))}
|
||||
</Table.Tbody>
|
||||
</Table>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.imageContainer}>
|
||||
<div
|
||||
className={styles.backgroundImage}
|
||||
style={{
|
||||
['--bg-color' as string]: color?.background,
|
||||
backgroundImage: `url(${data?.imageUrl})`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Suspense>
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user