handle imageUrl in drag preview and context menu

This commit is contained in:
jeffvli
2026-02-07 02:33:31 -08:00
parent ba56ab8844
commit c8ae128ac4
2 changed files with 5 additions and 16 deletions
@@ -32,8 +32,10 @@ export const DragPreview = memo(({ data }: DragPreviewProps) => {
const itemName = firstItem ? getItemName(firstItem) : 'Item';
const itemImage = useItemImageUrl({
id: (firstItem as { imageId: string })?.imageId,
id: (firstItem as { imageId?: string })?.imageId,
imageUrl: (firstItem as { imageUrl?: string })?.imageUrl,
itemType: data.itemType || LibraryItem.SONG,
serverId: (firstItem as { _serverId?: string })?._serverId,
type: 'table',
});
@@ -24,29 +24,16 @@ const getItemName = (item: unknown): string => {
return 'Item';
};
const getItemImage = (item: unknown): null | string => {
if (item && typeof item === 'object') {
if ('imageId' in item && typeof item.imageId === 'string') {
return item.imageId;
}
if ('imageUrl' in item && typeof item.imageUrl === 'string') {
return item.imageUrl;
}
}
return null;
};
export const ContextMenuPreview = ({ items, itemType }: ContextMenuPreviewProps) => {
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;
const imageUrl = useItemImageUrl({
id: (firstItem as { imageId?: string })?.imageId,
imageUrl: (firstItem as { imageUrl?: string })?.imageUrl,
itemType: itemType || LibraryItem.SONG,
serverId: (firstItem as { _serverId?: string })?._serverId,
type: 'table',
@@ -61,7 +48,7 @@ export const ContextMenuPreview = ({ items, itemType }: ContextMenuPreviewProps)
<div className={styles.divider} />
<div className={styles.preview}>
<div className={styles.content}>
{itemImage ? (
{imageUrl ? (
<div className={styles.imageContainer}>
<img alt={itemName} className={styles.image} src={imageUrl} />
<div className={styles.imageOverlay} />