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

add context menu selection preview

Browse Source
This commit is contained in:
jeffvli
2025-11-28 17:47:12 -08:00
parent dbad1088ea
commit 4fc036f4ea
11 changed files with 224 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/features/context-menu/menus/album-artist-context-menu.tsx
+6 -2
View File
@@ -9,20 +9,24 @@ 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 { 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 {
items: AlbumArtist[];
type: LibraryItem.ALBUM_ARTIST;
}
export const AlbumArtistContextMenu = ({ items }: AlbumArtistContextMenuProps) => {
export const AlbumArtistContextMenu = ({ items, type }: AlbumArtistContextMenuProps) => {
const { ids } = useMemo(() => {
const ids = items.map((item) => item.id);
return { ids };
}, [items]);
return (
<ContextMenu.Content>
<ContextMenu.Content
bottomStickyContent={<ContextMenuPreview items={items} itemType={type} />}
>
<PlayAction ids={ids} itemType={LibraryItem.ALBUM_ARTIST} />
<ContextMenu.Divider />
<AddToPlaylistAction items={ids} itemType={LibraryItem.ALBUM_ARTIST} />
src/renderer/features/context-menu/menus/album-context-menu.tsx
+6 -2
View File
@@ -9,20 +9,24 @@ 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 { 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 {
items: Album[];
type: LibraryItem.ALBUM;
}
export const AlbumContextMenu = ({ items }: AlbumContextMenuProps) => {
export const AlbumContextMenu = ({ items, type }: AlbumContextMenuProps) => {
const { ids } = useMemo(() => {
const ids = items.map((item) => item.id);
return { ids };
}, [items]);
return (
<ContextMenu.Content>
<ContextMenu.Content
bottomStickyContent={<ContextMenuPreview items={items} itemType={type} />}
>
<PlayAction ids={ids} itemType={LibraryItem.ALBUM} />
<ContextMenu.Divider />
<AddToPlaylistAction items={ids} itemType={LibraryItem.ALBUM} />
src/renderer/features/context-menu/menus/artist-context-menu.tsx
+6 -2
View File
@@ -9,20 +9,24 @@ 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 { 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 {
items: Artist[];
type: LibraryItem.ARTIST;
}
export const ArtistContextMenu = ({ items }: ArtistContextMenuProps) => {
export const ArtistContextMenu = ({ items, type }: ArtistContextMenuProps) => {
const { ids } = useMemo(() => {
const ids = items.map((item) => item.id);
return { ids };
}, [items]);
return (
<ContextMenu.Content>
<ContextMenu.Content
bottomStickyContent={<ContextMenuPreview items={items} itemType={type} />}
>
<PlayAction ids={ids} itemType={LibraryItem.ARTIST} />
<ContextMenu.Divider />
<AddToPlaylistAction items={ids} itemType={LibraryItem.ARTIST} />
src/renderer/features/context-menu/menus/genre-context-menu.tsx
+6 -2
View File
@@ -3,20 +3,24 @@ 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 { 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 {
items: Genre[];
type: LibraryItem.GENRE;
}
export const GenreContextMenu = ({ items }: GenreContextMenuProps) => {
export const GenreContextMenu = ({ items, type }: GenreContextMenuProps) => {
const { ids } = useMemo(() => {
const ids = items.map((item) => item.id);
return { ids };
}, [items]);
return (
<ContextMenu.Content>
<ContextMenu.Content
bottomStickyContent={<ContextMenuPreview items={items} itemType={type} />}
>
<PlayAction ids={ids} itemType={LibraryItem.ALBUM} />
<ContextMenu.Divider />
<AddToPlaylistAction items={ids} itemType={LibraryItem.ALBUM} />
src/renderer/features/context-menu/menus/playlist-context-menu.tsx
+6 -2
View File
@@ -5,20 +5,24 @@ import { DeletePlaylistAction } from '/@/renderer/features/context-menu/actions/
import { GetInfoAction } from '/@/renderer/features/context-menu/actions/get-info-action';
import { PlayAction } from '/@/renderer/features/context-menu/actions/play-action';
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 {
items: Playlist[];
type: LibraryItem.PLAYLIST;
}
export const PlaylistContextMenu = ({ items }: PlaylistContextMenuProps) => {
export const PlaylistContextMenu = ({ items, type }: PlaylistContextMenuProps) => {
const { ids } = useMemo(() => {
const ids = items.map((item) => item.id);
return { ids };
}, [items]);
return (
<ContextMenu.Content>
<ContextMenu.Content
bottomStickyContent={<ContextMenuPreview items={items} itemType={type} />}
>
<PlayAction ids={ids} itemType={LibraryItem.ALBUM} />
<ContextMenu.Divider />
<AddToPlaylistAction items={ids} itemType={LibraryItem.ALBUM} />
src/renderer/features/context-menu/menus/playlist-song-context-menu.tsx
+6 -2
View File
@@ -10,20 +10,24 @@ 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 { 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 {
items: Song[];
type: LibraryItem.PLAYLIST_SONG;
}
export const PlaylistSongContextMenu = ({ items }: PlaylistSongContextMenuProps) => {
export const PlaylistSongContextMenu = ({ items, type }: PlaylistSongContextMenuProps) => {
const { ids } = useMemo(() => {
const ids = items.map((item) => item.id);
return { ids };
}, [items]);
return (
<ContextMenu.Content>
<ContextMenu.Content
bottomStickyContent={<ContextMenuPreview items={items} itemType={LibraryItem.SONG} />}
>
<PlayAction ids={ids} itemType={LibraryItem.SONG} />
<ContextMenu.Divider />
<RemoveFromPlaylistAction items={items} />
src/renderer/features/context-menu/menus/queue-context-menu.tsx
+8 -2
View File
@@ -11,20 +11,26 @@ import { SetRatingAction } from '/@/renderer/features/context-menu/actions/set-r
import { ShareAction } from '/@/renderer/features/context-menu/actions/share-action';
import { ShuffleItemsAction } from '/@/renderer/features/context-menu/actions/shuffle-items-action';
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 {
items: QueueSong[];
type: LibraryItem.QUEUE_SONG;
}
export const QueueContextMenu = ({ items }: QueueContextMenuProps) => {
export const QueueContextMenu = ({ items, type }: QueueContextMenuProps) => {
const { ids } = useMemo(() => {
const ids = items.map((item) => item.id);
return { ids };
}, [items]);
return (
<ContextMenu.Content>
<ContextMenu.Content
bottomStickyContent={
<ContextMenuPreview items={items} itemType={LibraryItem.SONG} />
}
>
<RemoveFromQueueAction items={items} />
<ContextMenu.Divider />
<MoveQueueItemsAction items={items} />
src/renderer/features/context-menu/menus/song-context-menu.tsx
+6 -2
View File
@@ -9,20 +9,24 @@ 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 { 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 {
items: Song[];
type: LibraryItem.SONG;
}
export const SongContextMenu = ({ items }: SongContextMenuProps) => {
export const SongContextMenu = ({ items, type }: SongContextMenuProps) => {
const { ids } = useMemo(() => {
const ids = items.map((item) => item.id);
return { ids };
}, [items]);
return (
<ContextMenu.Content>
<ContextMenu.Content
bottomStickyContent={<ContextMenuPreview items={items} itemType={type} />}
>
<PlayAction ids={ids} itemType={LibraryItem.SONG} songs={items} />
<ContextMenu.Divider />
<AddToPlaylistAction items={ids} itemType={LibraryItem.SONG} />
src/shared/components/context-menu/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/shared/components/context-menu/context-menu-preview.tsx
+80
View File
@@ -0,0 +1,80 @@
import { memo } from 'react';
import styles from './context-menu-preview.module.css';
import { Icon } from '/@/shared/components/icon/icon';
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 ('imageUrl' in item && typeof item.imageUrl === 'string') {
return item.imageUrl;
}
}
return null;
};
export const ContextMenuPreview = memo(({ items, itemType }: ContextMenuPreviewProps) => {
const itemCount = items.length;
const firstItem = items[0];
const itemName = firstItem ? getItemName(firstItem) : 'Item';
const itemImage = firstItem ? getItemImage(firstItem) : null;
const isMultiple = itemCount > 1;
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={itemImage} />
<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 && <Icon icon="library" size="md" />}
</div>
)}
<div className={styles.textContainer}>
<div className={styles.name}>{itemName}</div>
{isMultiple && <div className={styles.count}>+{itemCount - 1} more</div>}
</div>
</div>
</div>
</div>
);
});
ContextMenuPreview.displayName = 'ContextMenuPreview';
src/shared/components/context-menu/context-menu.tsx
+3 -1
View File
@@ -19,6 +19,7 @@ interface ContextMenuContext {
export const ContextMenuContext = createContext<ContextMenuContext | null>(null);
interface ContentProps {
bottomStickyContent?: ReactNode;
children: ReactNode;
onCloseAutoFocus?: (event: FocusEvent) => void;
onEscapeKeyDown?: (event: KeyboardEvent) => void;
@@ -72,7 +73,7 @@ export function ContextMenu(props: ContextMenuProps) {
}
function Content(props: ContentProps) {
const { children, stickyContent } = props;
const { bottomStickyContent, children, stickyContent } = props;
const { open } = useContext(ContextMenuContext) as ContextMenuContext;
return (
@@ -88,6 +89,7 @@ function Content(props: ContentProps) {
>
{stickyContent}
<ScrollArea className={styles.maxHeight}>{children}</ScrollArea>
{bottomStickyContent}
</motion.div>
</RadixContextMenu.Content>
</RadixContextMenu.Portal>