();
+ const [selectedPlaylistId, setSelectedPlaylistId] = useState('');
+
+ const { data: playlists }: any = useQuery(['playlists', 'name'], () =>
+ getPlaylists('name')
+ );
+
+ const handleAddToPlaylist = async () => {
+ // If the window is closed, the selectedPlaylistId will be deleted
+ const localSelectedPlaylistId = selectedPlaylistId;
+ dispatch(addProcessingPlaylist(selectedPlaylistId));
+
+ const sortedEntries = [...multiSelect.selected].sort(
+ (a: any, b: any) => a.rowIndex - b.rowIndex
+ );
+
+ try {
+ const res = await populatePlaylist(
+ localSelectedPlaylistId,
+ sortedEntries
+ );
+
+ if (res.status === 'failed') {
+ notifyToast('error', res.error.message);
+ } else {
+ notifyToast(
+ 'success',
+ <>
+
+ Added {sortedEntries.length} song(s) to playlist "
+ {
+ playlists.find(
+ (playlist: any) => playlist.id === localSelectedPlaylistId
+ )?.name
+ }
+ "
+
+ {
+ history.push(`/playlist/${localSelectedPlaylistId}`);
+ dispatch(setContextMenu({ show: false }));
+ }}
+ >
+ Go to playlist
+
+ >
+ );
+ }
+ } catch (err) {
+ console.log(err);
+ }
+
+ dispatch(removeProcessingPlaylist(localSelectedPlaylistId));
+ };
+
+ return (
+ <>
+ {misc.contextMenu.show && misc.contextMenu.type === 'nowPlaying' && (
+ <>
+
+
+ Selected: {multiSelect.selected.length}
+
+
+ Add to queue
+ Remove from current
+
+
+
+ setSelectedPlaylistId(e)}
+ />
+
+ Add
+
+
+ }
+ >
+
+ playlistTriggerRef.current.state.isOverlayShown
+ ? playlistTriggerRef.current.close()
+ : playlistTriggerRef.current.open()
+ }
+ >
+ Add to playlist
+
+
+
+
+ Add to favorites
+ Remove from favorites
+
+ >
+ )}
+ >
+ );
+};
diff --git a/src/components/shared/styled.ts b/src/components/shared/styled.ts
index 8897fe6..a5d1ad6 100644
--- a/src/components/shared/styled.ts
+++ b/src/components/shared/styled.ts
@@ -170,7 +170,7 @@ export const ContextMenuWindow = styled.div<{
left: ${(props) => `${props.xPos}px`};
height: ${(props) =>
`${
- props.numOfButtons * 30 +
+ props.numOfButtons * 30.5 +
props.numOfDividers * 7 +
(props.hasTitle ? 16 : 0)
}px`};
@@ -180,7 +180,7 @@ export const ContextMenuWindow = styled.div<{
overflow: hidden;
overflow-x: hidden;
font-size: smaller;
- background: ${(props) => props.theme.primary.background};
+ background: ${(props) => props.theme.primary.sideBar};
border: 1px #3c4043 solid;
`;
diff --git a/src/components/viewtypes/ListViewTable.tsx b/src/components/viewtypes/ListViewTable.tsx
index bfc59f1..2d11c15 100644
--- a/src/components/viewtypes/ListViewTable.tsx
+++ b/src/components/viewtypes/ListViewTable.tsx
@@ -213,13 +213,11 @@ const ListViewTable = ({
(entry: any) => entry.uniqueId === rowData.uniqueId
).length > 0
) {
- const xFix = misc.expandSidebar ? 185 : 50;
- const yFix = nowPlaying ? 150 : 215;
dispatch(
setContextMenu({
show: true,
- xPos: e.pageX - xFix,
- yPos: e.pageY - yFix,
+ xPos: e.pageX,
+ yPos: e.pageY,
rowId: rowData.uniqueId,
type: nowPlaying ? 'nowPlaying' : 'other',
})