antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2026-01-01 18:33:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

[enhancement]: Show item details (#573)

Browse source 
* start

* More details, don't show manage server when other modal
This commit is contained in:
Kendall Garner 2024-04-04 04:19:46 +00:00 • committed by GitHub
parent 7bebe286d5
commit 197497df05
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 365 additions and 82 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/renderer/features/context-menu/context-menu-items.tsx
View file

@ -9,6 +9,7 @@ export const QUEUE_CONTEXT_MENU_ITEMS: SetContextMenuItems = [
{ divider: true, id: 'removeFromFavorites' },
{ children: true, disabled: false, id: 'setRating' },
{ disabled: false, id: 'deselectAll' },
{ divider: true, id: 'showDetails' },
];
export const SONG_CONTEXT_MENU_ITEMS: SetContextMenuItems = [
@ -19,6 +20,7 @@ export const SONG_CONTEXT_MENU_ITEMS: SetContextMenuItems = [
{ id: 'addToFavorites' },
{ divider: true, id: 'removeFromFavorites' },
{ children: true, disabled: false, id: 'setRating' },
{ divider: true, id: 'showDetails' },
];
export const PLAYLIST_SONG_CONTEXT_MENU_ITEMS: SetContextMenuItems = [
@ -30,6 +32,7 @@ export const PLAYLIST_SONG_CONTEXT_MENU_ITEMS: SetContextMenuItems = [
{ id: 'addToFavorites' },
{ divider: true, id: 'removeFromFavorites' },
{ children: true, disabled: false, id: 'setRating' },
{ divider: true, id: 'showDetails' },
];
export const SMART_PLAYLIST_SONG_CONTEXT_MENU_ITEMS: SetContextMenuItems = [
@ -40,6 +43,7 @@ export const SMART_PLAYLIST_SONG_CONTEXT_MENU_ITEMS: SetContextMenuItems = [
{ id: 'addToFavorites' },
{ divider: true, id: 'removeFromFavorites' },
{ children: true, disabled: false, id: 'setRating' },
{ divider: true, id: 'showDetails' },
];
export const ALBUM_CONTEXT_MENU_ITEMS: SetContextMenuItems = [
@ -50,6 +54,7 @@ export const ALBUM_CONTEXT_MENU_ITEMS: SetContextMenuItems = [
{ id: 'addToFavorites' },
{ id: 'removeFromFavorites' },
{ children: true, disabled: false, id: 'setRating' },
{ divider: true, id: 'showDetails' },
];
export const GENRE_CONTEXT_MENU_ITEMS: SetContextMenuItems = [
@ -67,6 +72,7 @@ export const ARTIST_CONTEXT_MENU_ITEMS: SetContextMenuItems = [
{ id: 'addToFavorites' },
{ divider: true, id: 'removeFromFavorites' },
{ children: true, disabled: false, id: 'setRating' },
{ divider: true, id: 'showDetails' },
];
export const PLAYLIST_CONTEXT_MENU_ITEMS: SetContextMenuItems = [

165
src/renderer/features/context-menu/context-menu-provider.tsx
View file

@ -25,6 +25,7 @@ import {
RiPlayListAddFill,
RiStarFill,
RiCloseCircleLine,
RiInformationFill,
} from 'react-icons/ri';
import { AnyLibraryItems, LibraryItem, ServerType, AnyLibraryItem } from '/@/renderer/api/types';
import {
@ -53,6 +54,7 @@ import {
} from '/@/renderer/store';
import { usePlaybackType } from '/@/renderer/store/settings.store';
import { Play, PlaybackType } from '/@/renderer/types';
import { ItemDetailsModal } from '/@/renderer/features/item-details/components/item-details-modal';
type ContextMenuContextProps = {
closeContextMenu: () => void;
@ -627,6 +629,16 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
ctx.tableApi?.deselectAll();
}, [ctx.tableApi]);
const handleOpenItemDetails = useCallback(() => {
const item = ctx.data[0];
openModal({
children: <ItemDetailsModal item={item} />,
size: 'xl',
title: t('page.contextMenu.showDetails', { postProcess: 'titleCase' }),
});
}, [ctx.data, t]);
const contextMenuItems: Record<ContextMenuItemType, ContextMenuItem> = useMemo(() => {
return {
addToFavorites: {
@ -775,20 +787,29 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
onClick: () => {},
rightIcon: <RiArrowRightSFill size="1.2rem" />,
},
showDetails: {
disabled: ctx.data?.length !== 1 || !ctx.data[0].itemType,
id: 'showDetails',
label: t('page.contextMenu.showDetails', { postProcess: 'sentenceCase' }),
leftIcon: <RiInformationFill />,
onClick: handleOpenItemDetails,
},
};
}, [
t,
handleAddToFavorites,
handleAddToPlaylist,
openDeletePlaylistModal,
handleDeselectAll,
handleMoveToBottom,
handleMoveToTop,
handlePlay,
handleRemoveFromFavorites,
handleRemoveFromPlaylist,
handleRemoveSelected,
ctx.data,
handleOpenItemDetails,
handlePlay,
handleUpdateRating,
openDeletePlaylistModal,
t,
]);
const mergedRef = useMergedRef(ref, clickOutsideRef);
@ -819,72 +840,80 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
>
{ctx.menuItems?.map((item) => {
return (
<Fragment key={`context-menu-${item.id}`}>
{item.children ? (
<HoverCard
offset={5}
position="right"
>
<HoverCard.Target>
<ContextMenuButton
disabled={item.disabled}
leftIcon={
contextMenuItems[item.id]
.leftIcon
}
rightIcon={
contextMenuItems[item.id]
.rightIcon
}
onClick={
contextMenuItems[item.id]
.onClick
}
>
{contextMenuItems[item.id].label}
</ContextMenuButton>
</HoverCard.Target>
<HoverCard.Dropdown>
<Stack spacing={0}>
{contextMenuItems[
item.id
].children?.map((child) => (
<ContextMenuButton
key={`sub-${child.id}`}
disabled={child.disabled}
leftIcon={child.leftIcon}
rightIcon={child.rightIcon}
onClick={child.onClick}
>
{child.label}
</ContextMenuButton>
))}
</Stack>
</HoverCard.Dropdown>
</HoverCard>
) : (
<ContextMenuButton
disabled={item.disabled}
leftIcon={
contextMenuItems[item.id].leftIcon
}
rightIcon={
contextMenuItems[item.id].rightIcon
}
onClick={contextMenuItems[item.id].onClick}
>
{contextMenuItems[item.id].label}
</ContextMenuButton>
)}
!contextMenuItems[item.id].disabled && (
<Fragment key={`context-menu-${item.id}`}>
{item.children ? (
<HoverCard
offset={5}
position="right"
>
<HoverCard.Target>
<ContextMenuButton
leftIcon={
contextMenuItems[item.id]
.leftIcon
}
rightIcon={
contextMenuItems[item.id]
.rightIcon
}
onClick={
contextMenuItems[item.id]
.onClick
}
>
{
contextMenuItems[item.id]
.label
}
</ContextMenuButton>
</HoverCard.Target>
<HoverCard.Dropdown>
<Stack spacing={0}>
{contextMenuItems[
item.id
].children?.map((child) => (
<ContextMenuButton
key={`sub-${child.id}`}
leftIcon={
child.leftIcon
}
rightIcon={
child.rightIcon
}
onClick={child.onClick}
>
{child.label}
</ContextMenuButton>
))}
</Stack>
</HoverCard.Dropdown>
</HoverCard>
) : (
<ContextMenuButton
leftIcon={
contextMenuItems[item.id].leftIcon
}
rightIcon={
contextMenuItems[item.id].rightIcon
}
onClick={
contextMenuItems[item.id].onClick
}
>
{contextMenuItems[item.id].label}
</ContextMenuButton>
)}
{item.divider && (
<Divider
key={`context-menu-divider-${item.id}`}
color="rgb(62, 62, 62)"
size="sm"
/>
)}
</Fragment>
{item.divider && (
<Divider
key={`context-menu-divider-${item.id}`}
color="rgb(62, 62, 62)"
size="sm"
/>
)}
</Fragment>
)
);
})}
</Stack>

3
src/renderer/features/context-menu/events.ts
View file

@ -33,7 +33,8 @@ export type ContextMenuItemType =
| 'moveToBottomOfQueue'
| 'moveToTopOfQueue'
| 'removeFromQueue'
| 'deselectAll';
| 'deselectAll'
| 'showDetails';
export type SetContextMenuItems = {
children?: boolean;