Skip to content

Commit

Permalink
[enhancement]: Show item details (#573)
Browse files Browse the repository at this point in the history 
* start

* More details, don't show manage server when other modal
  • Loading branch information
@kgarner7
kgarner7 authored Apr 4, 2024
1 parent 7bebe28 commit 197497d
Show file tree
Hide file tree
Showing 6 changed files with 366 additions and 83 deletions.
8 changes: 7 additions & 1 deletion src/i18n/locales/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,8 @@
"action_one": "action",
"action_other": "actions",
"add": "add",
"albumGain": "album gain",
"albumPeak": "album peak",
"areYouSure": "are you sure?",
"ascending": "ascending",
"backward": "backward",
Expand Down Expand Up @@ -72,6 +74,7 @@
"menu": "menu",
"minimize": "minimize",
"modified": "modified",
"mbid": "MusicBrainz ID",
"name": "name",
"no": "no",
"none": "none",
Expand Down Expand Up @@ -102,6 +105,8 @@
"sortOrder": "order",
"title": "title",
"trackNumber": "track",
"trackGain": "track gain",
"trackPeak": "track peak",
"unknown": "unknown",
"version": "version",
"year": "year",
Expand Down Expand Up @@ -306,7 +311,8 @@
"removeFromFavorites": "$t(action.removeFromFavorites)",
"removeFromPlaylist": "$t(action.removeFromPlaylist)",
"removeFromQueue": "$t(action.removeFromQueue)",
"setRating": "$t(action.setRating)"
"setRating": "$t(action.setRating)",
"showDetails": "get info"
},
"fullscreenPlayer": {
"config": {
Expand Down
28 changes: 16 additions & 12 deletions src/renderer/features/action-required/routes/action-required-route.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,19 +80,23 @@ const ActionRequiredRoute = () => {
</Button>
</>
)}
<Group
noWrap
position="center"
>
<Button
fullWidth
leftIcon={<RiEdit2Line />}
variant="filled"
onClick={handleManageServersModal}
{!displayedCheck && (
<Group
noWrap
position="center"
>
{t('page.appMenu.manageServers', { postProcess: 'sentenceCase' })}
</Button>
</Group>
<Button
fullWidth
leftIcon={<RiEdit2Line />}
variant="filled"
onClick={handleManageServersModal}
>
{t('page.appMenu.manageServers', {
postProcess: 'sentenceCase',
})}
</Button>
</Group>
)}
</Stack>
</Stack>
</Center>
Expand Down
6 changes: 6 additions & 0 deletions src/renderer/features/context-menu/context-menu-items.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [
Expand All @@ -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 = [
Expand All @@ -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 = [
Expand All @@ -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 = [
Expand All @@ -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 = [
Expand All @@ -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 = [
Expand Down
167 changes: 98 additions & 69 deletions src/renderer/features/context-menu/context-menu-provider.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import {
RiPlayListAddFill,
RiStarFill,
RiCloseCircleLine,
RiInformationFill,
} from 'react-icons/ri';
import { AnyLibraryItems, LibraryItem, ServerType, AnyLibraryItem } from '/@/renderer/api/types';
import {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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: {
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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>
)}

{item.divider && (
<Divider
key={`context-menu-divider-${item.id}`}
color="rgb(62, 62, 62)"
size="sm"
/>
)}
</Fragment>
!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>
)
);
})}
</Stack>
Expand Down
3 changes: 2 additions & 1 deletion src/renderer/features/context-menu/events.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,8 @@ export type ContextMenuItemType =
| 'moveToBottomOfQueue'
| 'moveToTopOfQueue'
| 'removeFromQueue'
| 'deselectAll';
| 'deselectAll'
| 'showDetails';

export type SetContextMenuItems = {
children?: boolean;
Expand Down
Loading

0 comments on commit 197497d

Please sign in to comment.