mirror of
https://github.com/jeffvli/feishin.git
synced 2026-05-07 12:30:12 +02:00
add initial item detail list design
This commit is contained in:
jeffvli
@@ -0,0 +1,84 @@
|
||||
.container {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr;
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
gap: var(--theme-spacing-sm);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: var(--theme-spacing-sm);
|
||||
container-type: inline-size;
|
||||
background: var(--theme-colors-surface);
|
||||
border-radius: var(--theme-radius-md);
|
||||
|
||||
@container (min-width: 500px) {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.image-container {
|
||||
position: relative;
|
||||
display: none;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
aspect-ratio: 1/1;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: '';
|
||||
background-color: rgb(0 0 0);
|
||||
opacity: 0;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::before {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
@container (min-width: 500px) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.image {
|
||||
aspect-ratio: 1/1;
|
||||
}
|
||||
|
||||
.metadata-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--theme-spacing-sm);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: var(--theme-spacing-xs) 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.metadata-container .header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.metadata-container .header .title {
|
||||
max-width: 70%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.metadata-container .content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--theme-spacing-xs);
|
||||
}
|
||||
|
||||
.metadata-container .content .tags {
|
||||
}
|
||||
@@ -0,0 +1,146 @@
|
||||
import { AnimatePresence } from 'motion/react';
|
||||
import { MouseEvent, useMemo, useState } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import styles from './item-detail.module.css';
|
||||
|
||||
import { ItemCardControls } from '/@/renderer/components/item-card/item-card-controls';
|
||||
import { useFastAverageColor } from '/@/renderer/hooks';
|
||||
import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
|
||||
import { Badge } from '/@/shared/components/badge/badge';
|
||||
import { Divider } from '/@/shared/components/divider/divider';
|
||||
import { Group } from '/@/shared/components/group/group';
|
||||
import { Image } from '/@/shared/components/image/image';
|
||||
import { Rating } from '/@/shared/components/rating/rating';
|
||||
import { Text } from '/@/shared/components/text/text';
|
||||
import {
|
||||
Album,
|
||||
AlbumArtist,
|
||||
Artist,
|
||||
LibraryItem,
|
||||
Playlist,
|
||||
Song,
|
||||
} from '/@/shared/types/domain-types';
|
||||
import { stringToColor } from '/@/shared/utils/string-to-color';
|
||||
|
||||
interface ItemDetailProps {
|
||||
data: Album | AlbumArtist | Artist | Playlist | Song | undefined;
|
||||
itemHeight: number;
|
||||
itemType: LibraryItem;
|
||||
onClick?: (e: MouseEvent<HTMLDivElement>, item: unknown, itemType: LibraryItem) => void;
|
||||
withControls?: boolean;
|
||||
}
|
||||
|
||||
export const ItemDetail = ({ data, itemType, onClick, withControls }: ItemDetailProps) => {
|
||||
const imageUrl = getImageUrl(data);
|
||||
|
||||
const [showControls, setShowControls] = useState(false);
|
||||
|
||||
const { background } = useFastAverageColor({
|
||||
algorithm: 'simple',
|
||||
src: imageUrl,
|
||||
srcLoaded: false,
|
||||
});
|
||||
|
||||
// const tags = [...(data?.genres ?? [])];
|
||||
|
||||
const tags = useMemo(() => {
|
||||
if (!data) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const items: {
|
||||
color?: string;
|
||||
id: string;
|
||||
isLight?: boolean;
|
||||
itemType: LibraryItem;
|
||||
name: string;
|
||||
}[] = [];
|
||||
|
||||
if ('albumArtists' in data && Array.isArray(data.albumArtists)) {
|
||||
data.albumArtists?.forEach((tag: { id: string; name: string }) => {
|
||||
items.push({ id: tag.id, itemType: LibraryItem.ALBUM_ARTIST, name: tag.name });
|
||||
});
|
||||
}
|
||||
|
||||
if ('genres' in data && Array.isArray(data.genres)) {
|
||||
data.genres?.forEach((tag: { id: string; itemType: LibraryItem; name: string }) => {
|
||||
const { color, isLight } = stringToColor(tag.name);
|
||||
items.push({ ...tag, color, isLight });
|
||||
});
|
||||
}
|
||||
|
||||
// if ('tags' in data && typeof data.tags === 'object') {
|
||||
// console.log('data.tags :>> ', data.tags);
|
||||
// Object.entries(data.tags).forEach(([key, value]) => {
|
||||
// items.push({ id: key, itemType: LibraryItem.TAG, name: value });
|
||||
// });
|
||||
// }
|
||||
|
||||
return items;
|
||||
}, [data]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={styles.container}
|
||||
onClick={(e) => onClick?.(e, data, itemType)}
|
||||
style={{ backgroundColor: background }}
|
||||
>
|
||||
<div
|
||||
className={styles.imageContainer}
|
||||
onMouseEnter={() => withControls && setShowControls(true)}
|
||||
onMouseLeave={() => withControls && setShowControls(false)}
|
||||
>
|
||||
<Image alt={data?.name} src={imageUrl} />
|
||||
<AnimatePresence>
|
||||
{withControls && showControls && <ItemCardControls type="compact" />}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
<div className={styles.metadataContainer}>
|
||||
<div className={styles.header}>
|
||||
<Text className={styles.title} component={Link} isLink size="lg" weight={500}>
|
||||
{data?.name}
|
||||
</Text>
|
||||
<Group>
|
||||
{data && 'userRating' in data && (
|
||||
<Rating size="xs" value={data?.userRating ?? 0} />
|
||||
)}
|
||||
{data && 'userFavorite' in data && (
|
||||
<ActionIcon
|
||||
icon="favorite"
|
||||
iconProps={{
|
||||
fill: data?.userFavorite ? 'primary' : 'default',
|
||||
}}
|
||||
size="xs"
|
||||
/>
|
||||
)}
|
||||
</Group>
|
||||
</div>
|
||||
<Divider />
|
||||
<div className={styles.content}>
|
||||
<Group className={styles.tags} gap="xs">
|
||||
{tags.map((tag) => (
|
||||
<Badge
|
||||
key={tag.id}
|
||||
style={{
|
||||
backgroundColor: tag.color,
|
||||
color: tag.isLight ? 'black' : 'white',
|
||||
}}
|
||||
>
|
||||
{tag.name}
|
||||
</Badge>
|
||||
))}
|
||||
</Group>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const getImageUrl = (data: Album | AlbumArtist | Artist | Playlist | Song | undefined) => {
|
||||
if (data && 'imageUrl' in data) {
|
||||
return data.imageUrl || undefined;
|
||||
}
|
||||
|
||||
return undefined;
|
||||
};
|
||||
@@ -0,0 +1,18 @@
|
||||
.item-detail-container {
|
||||
display: flex;
|
||||
flex-direction: column !important;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 var(--theme-spacing-md);
|
||||
}
|
||||
|
||||
.list-expanded-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.item-list {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-bottom: var(--theme-spacing-sm);
|
||||
}
|
||||
@@ -0,0 +1,285 @@
|
||||
import { useElementSize, useMergedRef } from '@mantine/hooks';
|
||||
import { throttle } from 'lodash';
|
||||
import { AnimatePresence, motion, Variants } from 'motion/react';
|
||||
import { useOverlayScrollbars } from 'overlayscrollbars-react';
|
||||
import {
|
||||
MouseEvent,
|
||||
Ref,
|
||||
UIEvent,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useLayoutEffect,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
} from 'react';
|
||||
import { List, ListImperativeAPI, RowComponentProps, useListRef } from 'react-window-v2';
|
||||
|
||||
import styles from './item-list-detail.module.css';
|
||||
|
||||
import { ItemDetail } from '/@/renderer/components/item-detail/item-detail';
|
||||
import { ExpandedListItem } from '/@/renderer/components/item-list/expanded-list-item';
|
||||
import {
|
||||
ItemListStateActions,
|
||||
useItemListState,
|
||||
} from '/@/renderer/components/item-list/helpers/item-list-state';
|
||||
import { LibraryItem } from '/@/shared/types/domain-types';
|
||||
|
||||
export interface ItemGridProps {
|
||||
data: unknown[];
|
||||
enableExpansion?: boolean;
|
||||
enableSelection?: boolean;
|
||||
initialTopMostItemIndex?:
|
||||
| number
|
||||
| {
|
||||
align: 'center' | 'end' | 'start';
|
||||
behavior: 'auto' | 'smooth';
|
||||
index: number;
|
||||
offset?: number;
|
||||
};
|
||||
itemType: LibraryItem;
|
||||
onEndReached?: (index: number) => void;
|
||||
onItemClick?: (item: unknown, index: number) => void;
|
||||
onItemContextMenu?: (item: unknown, index: number) => void;
|
||||
onItemDoubleClick?: (item: unknown, index: number) => void;
|
||||
onRangeChanged?: (range: { endIndex: number; startIndex: number }) => void;
|
||||
onScroll?: (e: UIEvent<HTMLDivElement>) => void;
|
||||
onScrollEnd?: () => void;
|
||||
onStartReached?: (index: number) => void;
|
||||
ref: Ref<ListImperativeAPI>;
|
||||
totalItemCount?: number;
|
||||
}
|
||||
|
||||
const expandedAnimationVariants: Variants = {
|
||||
hidden: {
|
||||
height: 0,
|
||||
minHeight: 0,
|
||||
},
|
||||
show: {
|
||||
minHeight: '300px',
|
||||
transition: {
|
||||
duration: 0.3,
|
||||
ease: 'easeInOut',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const ItemListDetail = ({
|
||||
data,
|
||||
enableExpansion = false,
|
||||
enableSelection = false,
|
||||
initialTopMostItemIndex = 0,
|
||||
itemType,
|
||||
onEndReached,
|
||||
onItemClick,
|
||||
onItemContextMenu,
|
||||
onItemDoubleClick,
|
||||
onRangeChanged,
|
||||
onScroll,
|
||||
onScrollEnd,
|
||||
onStartReached,
|
||||
totalItemCount = 0,
|
||||
}: ItemGridProps) => {
|
||||
const itemDetailRef = useListRef(null);
|
||||
const scrollContainerRef = useRef<HTMLDivElement | null>(null);
|
||||
const { ref: containerRef, width: containerWidth } = useElementSize();
|
||||
const mergedContainerRef = useMergedRef(containerRef, scrollContainerRef);
|
||||
|
||||
const internalState = useItemListState();
|
||||
|
||||
const [initialize] = useOverlayScrollbars({
|
||||
defer: true,
|
||||
events: {
|
||||
initialized(osInstance) {
|
||||
const { viewport } = osInstance.elements();
|
||||
viewport.style.overflowX = `var(--os-viewport-overflow-x)`;
|
||||
viewport.style.overflowY = `var(--os-viewport-overflow-y)`;
|
||||
},
|
||||
},
|
||||
options: {
|
||||
overflow: { x: 'hidden', y: 'scroll' },
|
||||
paddingAbsolute: true,
|
||||
scrollbars: {
|
||||
autoHide: 'leave',
|
||||
autoHideDelay: 500,
|
||||
pointers: ['mouse', 'pen', 'touch'],
|
||||
theme: 'feishin-os-scrollbar',
|
||||
visibility: 'visible',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const { current: root } = scrollContainerRef;
|
||||
|
||||
if (root) {
|
||||
initialize({
|
||||
elements: { viewport: root.firstElementChild as HTMLElement },
|
||||
target: root,
|
||||
});
|
||||
}
|
||||
}, [itemDetailRef, initialize]);
|
||||
|
||||
const hasExpanded = internalState.hasExpanded();
|
||||
|
||||
const handleExpand = useCallback(
|
||||
(_e: MouseEvent<HTMLDivElement>, item: unknown, itemType: LibraryItem) => {
|
||||
if (item && typeof item === 'object' && 'id' in item && 'serverId' in item) {
|
||||
internalState.toggleExpanded({
|
||||
id: item.id as string,
|
||||
itemType: itemType,
|
||||
serverId: item.serverId as string,
|
||||
});
|
||||
}
|
||||
},
|
||||
[internalState],
|
||||
);
|
||||
|
||||
const handleScroll = useCallback(
|
||||
(e: UIEvent<HTMLDivElement>) => {
|
||||
onScroll?.(e);
|
||||
},
|
||||
[onScroll],
|
||||
);
|
||||
|
||||
const [tableMeta, setTableMeta] = useState<null | {
|
||||
itemHeight: number;
|
||||
}>(null);
|
||||
|
||||
// Throttled function to update table meta
|
||||
const throttledSetTableMeta = useMemo(() => {
|
||||
return throttle((width: number) => {
|
||||
const isSm = width >= 600;
|
||||
const isMd = width >= 768;
|
||||
const isLg = width >= 1200;
|
||||
const isXl = width >= 1500;
|
||||
const is2xl = width >= 1920;
|
||||
const is3xl = width >= 2560;
|
||||
|
||||
let itemHeight = 160;
|
||||
|
||||
if (is3xl) {
|
||||
itemHeight = 160;
|
||||
} else if (is2xl) {
|
||||
itemHeight = 160;
|
||||
} else if (isXl) {
|
||||
itemHeight = 160;
|
||||
} else if (isLg) {
|
||||
itemHeight = 160;
|
||||
} else if (isMd) {
|
||||
itemHeight = 160;
|
||||
} else if (isSm) {
|
||||
itemHeight = 160;
|
||||
} else {
|
||||
itemHeight = 160;
|
||||
}
|
||||
|
||||
if (itemHeight === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
setTableMeta({
|
||||
itemHeight,
|
||||
});
|
||||
}, 200);
|
||||
}, []);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
throttledSetTableMeta(containerWidth);
|
||||
}, [containerWidth, data.length, itemType, throttledSetTableMeta]);
|
||||
|
||||
const handleOnRowsRendered = useCallback(
|
||||
(visibleRows: { startIndex: number; stopIndex: number }) => {
|
||||
onRangeChanged?.({
|
||||
endIndex: visibleRows.stopIndex * (tableMeta?.columnCount || 0),
|
||||
startIndex: visibleRows.startIndex * (tableMeta?.columnCount || 0),
|
||||
});
|
||||
|
||||
if (onStartReached || onEndReached) {
|
||||
const totalRows = Math.ceil(totalItemCount / (tableMeta?.columnCount || 0));
|
||||
const startRow = visibleRows.startIndex;
|
||||
const endRow = visibleRows.stopIndex;
|
||||
|
||||
if (startRow === 0) {
|
||||
onStartReached?.(startRow);
|
||||
}
|
||||
if (endRow >= totalRows) {
|
||||
onEndReached?.(endRow);
|
||||
}
|
||||
}
|
||||
},
|
||||
[onEndReached, onRangeChanged, onStartReached, totalItemCount, tableMeta?.columnCount],
|
||||
);
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
animate={{
|
||||
height: '100%',
|
||||
opacity: 1,
|
||||
transition: {
|
||||
duration: 1,
|
||||
ease: 'backInOut',
|
||||
},
|
||||
}}
|
||||
className={styles.itemDetailContainer}
|
||||
data-overlayscrollbars-initialize=""
|
||||
initial={{ opacity: 0 }}
|
||||
ref={mergedContainerRef}
|
||||
>
|
||||
<List
|
||||
listRef={itemDetailRef}
|
||||
onRowsRendered={handleOnRowsRendered}
|
||||
onScroll={handleScroll}
|
||||
rowComponent={RowComponent}
|
||||
rowCount={data.length}
|
||||
rowHeight={tableMeta?.itemHeight || 0}
|
||||
rowProps={{
|
||||
data,
|
||||
handleExpand,
|
||||
itemHeight: tableMeta?.itemHeight || 0,
|
||||
itemType,
|
||||
}}
|
||||
/>
|
||||
<AnimatePresence>
|
||||
{hasExpanded && (
|
||||
<motion.div
|
||||
animate="show"
|
||||
className={styles.listExpandedContainer}
|
||||
exit="hidden"
|
||||
initial="hidden"
|
||||
style={{ height: '500px' }}
|
||||
variants={expandedAnimationVariants}
|
||||
>
|
||||
<ExpandedListItem internalState={internalState} itemType={itemType} />
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
||||
function RowComponent({
|
||||
data,
|
||||
handleExpand,
|
||||
index,
|
||||
itemHeight,
|
||||
itemType,
|
||||
style,
|
||||
}: RowComponentProps<{
|
||||
data: any[];
|
||||
handleExpand: (e: MouseEvent<HTMLDivElement>, item: unknown, itemType: LibraryItem) => void;
|
||||
itemHeight: number;
|
||||
itemType: LibraryItem;
|
||||
}>) {
|
||||
return (
|
||||
<div className={styles.itemList} style={style}>
|
||||
<ItemDetail
|
||||
data={data[index]}
|
||||
itemHeight={itemHeight}
|
||||
itemType={itemType}
|
||||
onClick={(e, item, itemType) => handleExpand(e, item, itemType)}
|
||||
withControls
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user