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

Add album list context menu

Browse source 
- Fix stale selected value when selecting single row with right click
This commit is contained in:
jeffvli 2022-12-28 19:19:51 -08:00
parent 9836d548a6
commit 131e3b3c65
3 changed files with 92 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,6 @@
import { Stack } from '@mantine/core';
import { useClickOutside, useResizeObserver, useSetState, useViewportSize } from '@mantine/hooks';
import { createContext, useMemo, useState } from 'react';
import { createContext, useState } from 'react';
import { ContextMenu, ContextMenuButton } from '/@/renderer/components';
import {
OpenContextMenuProps,
@ -48,7 +48,8 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
const handlePlayQueueAdd = useHandlePlayQueueAdd();
const openContextMenu = (args: OpenContextMenuProps) => {
const { xPos, yPos, menuItems, data } = args;
console.log('args.data', args.data);
const { xPos, yPos, menuItems, data, type } = args;
const shouldReverseY = yPos + menuRect.height > viewport.height;
const shouldReverseX = xPos + menuRect.width > viewport.width;
@ -56,7 +57,7 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
const calculatedXPos = shouldReverseX ? xPos - menuRect.width : xPos;
const calculatedYPos = shouldReverseY ? yPos - menuRect.height : yPos;
setCtx({ data, menuItems, xPos: calculatedXPos, yPos: calculatedYPos });
setCtx({ data, menuItems, type, xPos: calculatedXPos, yPos: calculatedYPos });
setOpened(true);
};
@ -69,45 +70,65 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
openContextMenu,
});
const contextMenuItems = useMemo(() => {
return {
addToFavorites: { id: 'addToFavorites', label: 'Add to favorites', onClick: () => {} },
addToPlaylist: { id: 'addToPlaylist', label: 'Add to playlist', onClick: () => {} },
play: {
id: 'play',
label: 'Play',
onClick: () => {
if (ctx.type === LibraryItem.SONG) {
handlePlayQueueAdd({ byData: ctx.data, play: Play.NOW });
}
},
},
playLast: {
id: 'playLast',
label: 'Play Last',
onClick: () => {
if (ctx.type === LibraryItem.SONG) {
handlePlayQueueAdd({ byData: ctx.data, play: Play.LAST });
}
},
},
playNext: {
id: 'playNext',
label: 'Play Next',
onClick: () => {
if (ctx.type === LibraryItem.SONG) {
handlePlayQueueAdd({ byData: ctx.data, play: Play.NEXT });
}
},
},
removeFromFavorites: {
id: 'removeFromFavorites',
label: 'Remove from favorites',
onClick: () => {},
},
setRating: { id: 'setRating', label: 'Set rating', onClick: () => {} },
};
}, [ctx.data, ctx.type, handlePlayQueueAdd]);
const handlePlay = (play: Play) => {
console.log('ctx', ctx);
switch (ctx.type) {
case LibraryItem.ALBUM:
handlePlayQueueAdd({
byItemType: { id: ctx.data.map((item) => item.id), type: ctx.type },
play,
});
break;
case LibraryItem.ARTIST:
handlePlayQueueAdd({
byItemType: { id: ctx.data.map((item) => item.id), type: ctx.type },
play,
});
break;
case LibraryItem.ALBUM_ARTIST:
handlePlayQueueAdd({
byItemType: { id: ctx.data.map((item) => item.id), type: ctx.type },
play,
});
break;
case LibraryItem.SONG:
handlePlayQueueAdd({ byData: ctx.data, play });
break;
case LibraryItem.PLAYLIST:
handlePlayQueueAdd({
byItemType: { id: ctx.data.map((item) => item.id), type: ctx.type },
play,
});
break;
}
};
const contextMenuItems = {
addToFavorites: { id: 'addToFavorites', label: 'Add to favorites', onClick: () => {} },
addToPlaylist: { id: 'addToPlaylist', label: 'Add to playlist', onClick: () => {} },
play: {
id: 'play',
label: 'Play',
onClick: () => handlePlay(Play.NOW),
},
playLast: {
id: 'playLast',
label: 'Play Last',
onClick: () => handlePlay(Play.LAST),
},
playNext: {
id: 'playNext',
label: 'Play Next',
onClick: () => handlePlay(Play.NEXT),
},
removeFromFavorites: {
id: 'removeFromFavorites',
label: 'Remove from favorites',
onClick: () => {},
},
setRating: { id: 'setRating', label: 'Set rating', onClick: () => {} },
};
return (
<ContextMenuContext.Provider