add context menu selection preview

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
@@ -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} />
@@ -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} />
@@ -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} />
@@ -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} />
@@ -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} />
@@ -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} />
@@ -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} />
@@ -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} />