vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-08 04:50:12 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix image on context menu preview

Browse Source
This commit is contained in:
jeffvli
2025-12-27 14:25:57 -08:00
parent a7c2a92f16
commit 856400048b
12 changed files with 57 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/features/context-menu/components/context-menu-preview.module.css
+91
View File
@@ -0,0 +1,91 @@
.container {
position: relative;
width: 100%;
}
.divider {
height: 1px;
margin: var(--theme-spacing-xs) 0;
background: none;
border: none;
border-top: 1px solid var(--theme-colors-border);
}
.preview {
display: flex;
align-items: center;
padding: var(--theme-spacing-sm) var(--theme-spacing-md);
border-radius: var(--theme-radius-sm);
}
.content {
display: flex;
gap: var(--theme-spacing-sm);
align-items: center;
width: 100%;
}
.image-container {
position: relative;
flex-shrink: 0;
width: 40px;
height: 40px;
overflow: hidden;
border-radius: var(--theme-radius-sm);
box-shadow: 0 2px 8px rgb(0 0 0 / 20%);
}
.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: 40px;
height: 40px;
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-sm);
box-shadow: 0 2px 8px rgb(0 0 0 / 20%);
}
.text-container {
display: flex;
flex: 1;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.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-xs);
font-weight: 500;
line-height: 1.2;
color: var(--theme-colors-foreground-muted);
}
src/renderer/features/context-menu/components/context-menu-preview.tsx
+100
View File
@@ -0,0 +1,100 @@
import { useTranslation } from 'react-i18next';
import styles from './context-menu-preview.module.css';
import { useItemImageUrl } from '/@/renderer/components/item-image/item-image';
import { Icon } from '/@/shared/components/icon/icon';
import { Text } from '/@/shared/components/text/text';
import { LibraryItem } from '/@/shared/types/domain-types';
interface ContextMenuPreviewProps {
items: unknown[];
itemType?: LibraryItem;
}
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 ('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,
itemType: itemType || LibraryItem.SONG,
type: 'table',
});
if (itemCount === 0) {
return null;
}
return (
<div className={styles.container}>
<div className={styles.divider} />
<div className={styles.preview}>
<div className={styles.content}>
{itemImage ? (
<div className={styles.imageContainer}>
<img alt={itemName} className={styles.image} src={imageUrl} />
<div className={styles.imageOverlay} />
</div>
) : (
<div className={styles.iconContainer}>
{itemType === LibraryItem.ALBUM && <Icon icon="album" size="md" />}
{itemType === LibraryItem.SONG && <Icon icon="itemSong" size="md" />}
{itemType === LibraryItem.ALBUM_ARTIST && (
<Icon icon="artist" size="md" />
)}
{itemType === LibraryItem.ARTIST && <Icon icon="artist" size="md" />}
{itemType === LibraryItem.PLAYLIST && (
<Icon icon="playlist" size="md" />
)}
{itemType === LibraryItem.GENRE && <Icon icon="genre" size="md" />}
{itemType === LibraryItem.FOLDER && <Icon icon="folder" size="md" />}
{!itemType && <Icon icon="library" size="md" />}
</div>
)}
<div className={styles.textContainer}>
<Text className={styles.name} isNoSelect>
{itemName}
</Text>
{isMultiple && (
<Text className={styles.count} isNoSelect>
+{t('common.itemsMore', { count: itemCount - 1 })}
</Text>
)}
</div>
</div>
</div>
</div>
);
};
ContextMenuPreview.displayName = 'ContextMenuPreview';
src/renderer/features/context-menu/menus/album-artist-context-menu.tsx
+1 -1
View File
@@ -9,8 +9,8 @@ import { PlayArtistRadioAction } from '/@/renderer/features/context-menu/actions
import { SetFavoriteAction } from '/@/renderer/features/context-menu/actions/set-favorite-action';
import { SetRatingAction } from '/@/renderer/features/context-menu/actions/set-rating-action';
import { ShareAction } from '/@/renderer/features/context-menu/actions/share-action';
import { ContextMenuPreview } from '/@/renderer/features/context-menu/components/context-menu-preview';
import { ContextMenu } from '/@/shared/components/context-menu/context-menu';
import { ContextMenuPreview } from '/@/shared/components/context-menu/context-menu-preview';
import { AlbumArtist, LibraryItem } from '/@/shared/types/domain-types';
interface AlbumArtistContextMenuProps {
src/renderer/features/context-menu/menus/album-context-menu.tsx
+1 -1
View File
@@ -8,8 +8,8 @@ import { PlayAction } from '/@/renderer/features/context-menu/actions/play-actio
import { SetFavoriteAction } from '/@/renderer/features/context-menu/actions/set-favorite-action';
import { SetRatingAction } from '/@/renderer/features/context-menu/actions/set-rating-action';
import { ShareAction } from '/@/renderer/features/context-menu/actions/share-action';
import { ContextMenuPreview } from '/@/renderer/features/context-menu/components/context-menu-preview';
import { ContextMenu } from '/@/shared/components/context-menu/context-menu';
import { ContextMenuPreview } from '/@/shared/components/context-menu/context-menu-preview';
import { Album, LibraryItem } from '/@/shared/types/domain-types';
interface AlbumContextMenuProps {
src/renderer/features/context-menu/menus/artist-context-menu.tsx
+1 -1
View File
@@ -9,8 +9,8 @@ import { PlayArtistRadioAction } from '/@/renderer/features/context-menu/actions
import { SetFavoriteAction } from '/@/renderer/features/context-menu/actions/set-favorite-action';
import { SetRatingAction } from '/@/renderer/features/context-menu/actions/set-rating-action';
import { ShareAction } from '/@/renderer/features/context-menu/actions/share-action';
import { ContextMenuPreview } from '/@/renderer/features/context-menu/components/context-menu-preview';
import { ContextMenu } from '/@/shared/components/context-menu/context-menu';
import { ContextMenuPreview } from '/@/shared/components/context-menu/context-menu-preview';
import { Artist, LibraryItem } from '/@/shared/types/domain-types';
interface ArtistContextMenuProps {
src/renderer/features/context-menu/menus/folder-context-menu.tsx
+1 -1
View File
@@ -4,8 +4,8 @@ import { AddToPlaylistAction } from '/@/renderer/features/context-menu/actions/a
import { DownloadAction } from '/@/renderer/features/context-menu/actions/download-action';
import { PlayAction } from '/@/renderer/features/context-menu/actions/play-action';
import { ShareAction } from '/@/renderer/features/context-menu/actions/share-action';
import { ContextMenuPreview } from '/@/renderer/features/context-menu/components/context-menu-preview';
import { ContextMenu } from '/@/shared/components/context-menu/context-menu';
import { ContextMenuPreview } from '/@/shared/components/context-menu/context-menu-preview';
import { Folder, LibraryItem } from '/@/shared/types/domain-types';
interface FolderContextMenuProps {
src/renderer/features/context-menu/menus/genre-context-menu.tsx
+1 -1
View File
@@ -2,8 +2,8 @@ import { useMemo } from 'react';
import { AddToPlaylistAction } from '/@/renderer/features/context-menu/actions/add-to-playlist-action';
import { PlayAction } from '/@/renderer/features/context-menu/actions/play-action';
import { ContextMenuPreview } from '/@/renderer/features/context-menu/components/context-menu-preview';
import { ContextMenu } from '/@/shared/components/context-menu/context-menu';
import { ContextMenuPreview } from '/@/shared/components/context-menu/context-menu-preview';
import { Genre, LibraryItem } from '/@/shared/types/domain-types';
interface GenreContextMenuProps {
src/renderer/features/context-menu/menus/playlist-context-menu.tsx
+1 -1
View File
@@ -5,9 +5,9 @@ import { DeletePlaylistAction } from '/@/renderer/features/context-menu/actions/
import { EditPlaylistAction } from '/@/renderer/features/context-menu/actions/edit-playlist-action';
import { GetInfoAction } from '/@/renderer/features/context-menu/actions/get-info-action';
import { PlayAction } from '/@/renderer/features/context-menu/actions/play-action';
import { ContextMenuPreview } from '/@/renderer/features/context-menu/components/context-menu-preview';
import { usePermissions } from '/@/renderer/store';
import { ContextMenu } from '/@/shared/components/context-menu/context-menu';
import { ContextMenuPreview } from '/@/shared/components/context-menu/context-menu-preview';
import { LibraryItem, Playlist } from '/@/shared/types/domain-types';
interface PlaylistContextMenuProps {
src/renderer/features/context-menu/menus/playlist-song-context-menu.tsx
+1 -1
View File
@@ -10,8 +10,8 @@ import { RemoveFromPlaylistAction } from '/@/renderer/features/context-menu/acti
import { SetFavoriteAction } from '/@/renderer/features/context-menu/actions/set-favorite-action';
import { SetRatingAction } from '/@/renderer/features/context-menu/actions/set-rating-action';
import { ShareAction } from '/@/renderer/features/context-menu/actions/share-action';
import { ContextMenuPreview } from '/@/renderer/features/context-menu/components/context-menu-preview';
import { ContextMenu } from '/@/shared/components/context-menu/context-menu';
import { ContextMenuPreview } from '/@/shared/components/context-menu/context-menu-preview';
import { LibraryItem, Song } from '/@/shared/types/domain-types';
interface PlaylistSongContextMenuProps {
src/renderer/features/context-menu/menus/queue-context-menu.tsx
+1 -1
View File
@@ -11,8 +11,8 @@ import { SetFavoriteAction } from '/@/renderer/features/context-menu/actions/set
import { SetRatingAction } from '/@/renderer/features/context-menu/actions/set-rating-action';
import { ShareAction } from '/@/renderer/features/context-menu/actions/share-action';
import { ShuffleItemsAction } from '/@/renderer/features/context-menu/actions/shuffle-items-action';
import { ContextMenuPreview } from '/@/renderer/features/context-menu/components/context-menu-preview';
import { ContextMenu } from '/@/shared/components/context-menu/context-menu';
import { ContextMenuPreview } from '/@/shared/components/context-menu/context-menu-preview';
import { LibraryItem, QueueSong } from '/@/shared/types/domain-types';
interface QueueContextMenuProps {
src/renderer/features/context-menu/menus/song-context-menu.tsx
+1 -1
View File
@@ -9,8 +9,8 @@ import { PlayTrackRadioAction } from '/@/renderer/features/context-menu/actions/
import { SetFavoriteAction } from '/@/renderer/features/context-menu/actions/set-favorite-action';
import { SetRatingAction } from '/@/renderer/features/context-menu/actions/set-rating-action';
import { ShareAction } from '/@/renderer/features/context-menu/actions/share-action';
import { ContextMenuPreview } from '/@/renderer/features/context-menu/components/context-menu-preview';
import { ContextMenu } from '/@/shared/components/context-menu/context-menu';
import { ContextMenuPreview } from '/@/shared/components/context-menu/context-menu-preview';
import { LibraryItem, Song } from '/@/shared/types/domain-types';
interface SongContextMenuProps {