Add album list context menu

- Fix stale selected value when selecting single row with right click

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<VirtualInfiniteGridRef | null>;
@@ -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 (
     <>
       <VirtualGridAutoSizerContainer>
@@ -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}

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,36 +70,57 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
     openContextMenu,
   });
 
-  const contextMenuItems = useMemo(() => {
-    return {
+  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: () => {
-          if (ctx.type === LibraryItem.SONG) {
-            handlePlayQueueAdd({ byData: ctx.data, play: Play.NOW });
-          }
-        },
+      onClick: () => handlePlay(Play.NOW),
     },
     playLast: {
       id: 'playLast',
       label: 'Play Last',
-        onClick: () => {
-          if (ctx.type === LibraryItem.SONG) {
-            handlePlayQueueAdd({ byData: ctx.data, play: Play.LAST });
-          }
-        },
+      onClick: () => handlePlay(Play.LAST),
     },
     playNext: {
       id: 'playNext',
       label: 'Play Next',
-        onClick: () => {
-          if (ctx.type === LibraryItem.SONG) {
-            handlePlayQueueAdd({ byData: ctx.data, play: Play.NEXT });
-          }
-        },
+      onClick: () => handlePlay(Play.NEXT),
     },
     removeFromFavorites: {
       id: 'removeFromFavorites',
@@ -107,7 +129,6 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
     },
     setRating: { id: 'setRating', label: 'Set rating', onClick: () => {} },
   };
-  }, [ctx.data, ctx.type, handlePlayQueueAdd]);
 
   return (
     <ContextMenuContext.Provider

src/renderer/features/songs/components/song-list-content.tsx

@@ -160,12 +160,13 @@ export const SongListContent = ({ tableRef }: SongListContentProps) => {
     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({