diff --git a/src/renderer/features/albums/components/album-list-content.tsx b/src/renderer/features/albums/components/album-list-content.tsx index d237c22b..dca06717 100644 --- a/src/renderer/features/albums/components/album-list-content.tsx +++ b/src/renderer/features/albums/components/album-list-content.tsx @@ -30,6 +30,7 @@ import { import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact'; import { BodyScrollEvent, + CellContextMenuEvent, ColDef, GridReadyEvent, IDatasource, @@ -37,6 +38,8 @@ import { } from '@ag-grid-community/core'; import { AnimatePresence } from 'framer-motion'; import debounce from 'lodash/debounce'; +import { openContextMenu } from '/@/renderer/features/context-menu'; +import { ALBUM_CONTEXT_MENU_ITEMS } from '/@/renderer/features/context-menu/context-menu-items'; interface AlbumListContentProps { gridRef: MutableRefObject; @@ -268,6 +271,29 @@ export const AlbumListContent = ({ gridRef, tableRef }: AlbumListContentProps) = return rows; }, [page.filter.sortBy]); + const handleContextMenu = (e: CellContextMenuEvent) => { + if (!e.event) return; + const clickEvent = e.event as MouseEvent; + clickEvent.preventDefault(); + + let selectedRows = e.api.getSelectedRows(); + const selectedIds = selectedRows.map((row) => row.id); + + if (!selectedIds.includes(e.data.id)) { + e.api.deselectAll(); + e.node.setSelected(true); + selectedRows = [e.data]; + } + + openContextMenu({ + data: selectedRows, + menuItems: ALBUM_CONTEXT_MENU_ITEMS, + type: LibraryItem.ALBUM, + xPos: clickEvent.clientX, + yPos: clickEvent.clientY, + }); + }; + return ( <> @@ -327,7 +353,7 @@ export const AlbumListContent = ({ gridRef, tableRef }: AlbumListContentProps) = rowModelType="infinite" rowSelection="multiple" onBodyScrollEnd={handleTableScroll} - onCellContextMenu={(e) => console.log('context', e)} + onCellContextMenu={handleContextMenu} onColumnMoved={handleTableColumnChange} onColumnResized={debouncedTableColumnChange} onGridReady={onTableReady} diff --git a/src/renderer/features/context-menu/context-menu-provider.tsx b/src/renderer/features/context-menu/context-menu-provider.tsx index 546f89a7..6fd306eb 100644 --- a/src/renderer/features/context-menu/context-menu-provider.tsx +++ b/src/renderer/features/context-menu/context-menu-provider.tsx @@ -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 ( { const clickEvent = e.event as MouseEvent; clickEvent.preventDefault(); - const selectedRows = e.api.getSelectedRows(); + let selectedRows = e.api.getSelectedRows(); const selectedUniqueIds = selectedRows.map((row) => row.uniqueId); if (!selectedUniqueIds.includes(e.data.uniqueId)) { e.api.deselectAll(); e.node.setSelected(true); + selectedRows = [e.data]; } openContextMenu({