mirror of
https://github.com/jeffvli/feishin.git
synced 2026-05-07 12:30:12 +02:00
fix drag preview image url generation
This commit is contained in:
jeffvli
@@ -1,102 +0,0 @@
|
||||
.container {
|
||||
position: relative;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
transform-style: preserve-3d;
|
||||
perspective: 1000px;
|
||||
}
|
||||
|
||||
.preview {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 300px;
|
||||
min-height: 80px;
|
||||
padding: var(--theme-spacing-md);
|
||||
color: var(--theme-colors-foreground);
|
||||
background: var(--theme-colors-background);
|
||||
border: 1px solid var(--theme-colors-border);
|
||||
border-radius: var(--theme-radius-lg);
|
||||
backdrop-filter: blur(12px) saturate(180%);
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
gap: var(--theme-spacing-md);
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.image-container {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
overflow: hidden;
|
||||
border-radius: var(--theme-radius-md);
|
||||
box-shadow:
|
||||
0 8px 16px rgb(0 0 0 / 25%),
|
||||
0 0 0 1px rgb(255 255 255 / 5%);
|
||||
transform: translateZ(15px) scale(1.05);
|
||||
transition: transform 0.2s ease-out;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.image-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
background: linear-gradient(135deg, rgb(255 255 255 / 10%) 0%, rgb(0 0 0 / 10%) 100%);
|
||||
}
|
||||
|
||||
.icon-container {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
var(--theme-colors-surface) 0%,
|
||||
var(--theme-colors-background) 100%
|
||||
);
|
||||
border: 1px solid var(--theme-colors-border);
|
||||
border-radius: var(--theme-radius-md);
|
||||
box-shadow:
|
||||
0 8px 16px rgb(0 0 0 / 25%),
|
||||
0 0 0 1px rgb(255 255 255 / 5%);
|
||||
transform: translateZ(15px) scale(1.05);
|
||||
transition: transform 0.2s ease-out;
|
||||
}
|
||||
|
||||
.text-container {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
gap: var(--theme-spacing-xs);
|
||||
min-width: 0;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: var(--theme-font-size-sm);
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
color: var(--theme-colors-foreground);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.count {
|
||||
font-size: var(--theme-font-size-sm);
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
color: var(--theme-colors-foreground-muted);
|
||||
}
|
||||
@@ -1,83 +0,0 @@
|
||||
import { memo } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import styles from './drag-preview.module.css';
|
||||
|
||||
import { Icon } from '/@/shared/components/icon/icon';
|
||||
import { LibraryItem } from '/@/shared/types/domain-types';
|
||||
import { DragData } from '/@/shared/types/drag-and-drop';
|
||||
|
||||
interface DragPreviewProps {
|
||||
data: DragData;
|
||||
}
|
||||
|
||||
const getItemName = (item: unknown): string => {
|
||||
if (item && typeof item === 'object') {
|
||||
if ('name' in item && typeof item.name === 'string') {
|
||||
return item.name;
|
||||
}
|
||||
if ('title' in item && typeof item.title === 'string') {
|
||||
return item.title;
|
||||
}
|
||||
}
|
||||
return 'Item';
|
||||
};
|
||||
|
||||
const getItemImage = (item: unknown): null | string => {
|
||||
if (item && typeof item === 'object') {
|
||||
if ('imageUrl' in item && typeof item.imageUrl === 'string') {
|
||||
return item.imageUrl;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
export const DragPreview = memo(({ data }: DragPreviewProps) => {
|
||||
const items = data.item || [];
|
||||
const { t } = useTranslation();
|
||||
const itemCount = items.length;
|
||||
const firstItem = items[0];
|
||||
const itemName = firstItem ? getItemName(firstItem) : 'Item';
|
||||
const itemImage = firstItem ? getItemImage(firstItem) : null;
|
||||
const isMultiple = itemCount > 1;
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<div className={styles.preview}>
|
||||
<div className={styles.content}>
|
||||
{itemImage ? (
|
||||
<div className={styles['image-container']}>
|
||||
<img alt={itemName} className={styles.image} src={itemImage} />
|
||||
<div className={styles['image-overlay']} />
|
||||
</div>
|
||||
) : (
|
||||
<div className={styles['icon-container']}>
|
||||
{data.itemType === LibraryItem.ALBUM && <Icon icon="album" size="xl" />}
|
||||
{data.itemType === LibraryItem.SONG && (
|
||||
<Icon icon="itemSong" size="xl" />
|
||||
)}
|
||||
{data.itemType === LibraryItem.ARTIST && (
|
||||
<Icon icon="artist" size="xl" />
|
||||
)}
|
||||
{data.itemType === LibraryItem.PLAYLIST && (
|
||||
<Icon icon="playlist" size="xl" />
|
||||
)}
|
||||
{data.itemType === LibraryItem.GENRE && <Icon icon="genre" size="xl" />}
|
||||
{!data.itemType && <Icon icon="library" size="xl" />}
|
||||
</div>
|
||||
)}
|
||||
<div className={styles['text-container']}>
|
||||
<div className={styles.name}>{itemName}</div>
|
||||
{isMultiple && (
|
||||
<div className={styles.count}>
|
||||
+{t('common.itemsMore', { count: itemCount - 1 })}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
DragPreview.displayName = 'DragPreview';
|
||||
Reference in New Issue
Block a user