Add context menu to all list types

- Add prop to disable specific context menu options

src/api/api.ts

@@ -211,7 +211,9 @@ export const getStarred = async () => {
       ...entry,
       albumId: entry.id,
       image: getCoverArtUrl(entry),
+      type: 'album',
       index,
+      uniqueId: nanoid(),
     })),
     song: (data.starred2.song || []).map((entry: any, index: any) => ({
       ...entry,
@@ -238,6 +240,7 @@ export const getAlbums = async (options: any, coverArtSize = 150) => {
       starred: entry.starred || undefined,
       type: 'album',
       index,
+      uniqueId: nanoid(),
     })),
   };
 };
@@ -255,6 +258,7 @@ export const getAlbumsDirect = async (options: any, coverArtSize = 150) => {
       starred: entry.starred || undefined,
       type: 'album',
       index,
+      uniqueId: nanoid(),
     })
   );
 
@@ -287,6 +291,7 @@ export const getAllAlbums = (
           starred: entry.starred || undefined,
           type: 'album',
           index,
+          uniqueId: nanoid(),
         }));
       }
 

src/components/library/AlbumView.tsx

@@ -215,6 +215,7 @@ const AlbumView = ({ ...rest }: any) => {
         }}
         listType="music"
         isModal={rest.isModal}
+        disabledContextMenuOptions={['removeFromCurrent']}
       />
     </GenericPage>
   );

src/components/shared/ContextMenu.tsx

@@ -223,7 +223,7 @@ export const GlobalContextMenu = () => {
 
   return (
     <>
-      {misc.contextMenu.show && misc.contextMenu.type === 'nowPlaying' && (
+      {misc.contextMenu.show && (
         <ContextMenu
           xPos={misc.contextMenu.xPos}
           yPos={misc.contextMenu.yPos}
@@ -235,10 +235,17 @@ export const GlobalContextMenu = () => {
             text={`Selected: ${multiSelect.selected.length}`}
           />
           <ContextMenuDivider />
-          <ContextMenuButton text="Add to queue" onClick={handleAddToQueue} />
+          <ContextMenuButton
+            text="Add to queue"
+            onClick={handleAddToQueue}
+            disabled={misc.contextMenu.disabledOptions.includes('addToQueue')}
+          />
           <ContextMenuButton
             text="Remove from current"
             onClick={handleRemoveFromQueue}
+            disabled={misc.contextMenu.disabledOptions.includes(
+              'removeFromCurrent'
+            )}
           />
           <ContextMenuDivider />
 
@@ -316,20 +323,32 @@ export const GlobalContextMenu = () => {
                   ? playlistTriggerRef.current.close()
                   : playlistTriggerRef.current.open()
               }
+              disabled={misc.contextMenu.disabledOptions.includes(
+                'addToPlaylist'
+              )}
             />
           </Whisper>
           <ContextMenuDivider />
           <ContextMenuButton
             text="Add to favorites"
             onClick={() => handleFavorite(false)}
+            disabled={misc.contextMenu.disabledOptions.includes(
+              'addToFavorites'
+            )}
           />
           <ContextMenuButton
             text="Add to favorites (ordered)"
             onClick={() => handleFavorite(true)}
+            disabled={misc.contextMenu.disabledOptions.includes(
+              'addToFavoritesOrdered'
+            )}
           />
           <ContextMenuButton
             text="Remove from favorites"
             onClick={handleUnfavorite}
+            disabled={misc.contextMenu.disabledOptions.includes(
+              'removeFromFavorites'
+            )}
           />
         </ContextMenu>
       )}

src/components/starred/StarredView.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { useHistory } from 'react-router';
 import { useQuery } from 'react-query';
 import { Nav } from 'rsuite';
 import settings from 'electron-settings';
@@ -25,6 +26,7 @@ import { setStatus } from '../../redux/playerSlice';
 import { StyledNavItem } from '../shared/styled';
 
 const StarredView = () => {
+  const history = useHistory();
   const dispatch = useAppDispatch();
   const [currentPage, setCurrentPage] = useState('Tracks');
   const [viewType, setViewType] = useState(
@@ -66,7 +68,7 @@ const StarredView = () => {
             if (searchQuery !== '') {
               dispatch(toggleRangeSelected(filteredData));
             } else {
-              dispatch(toggleRangeSelected(data.album));
+              dispatch(toggleRangeSelected(data?.album));
             }
           } else {
             // !TODO
@@ -95,6 +97,10 @@ const StarredView = () => {
     dispatch(fixPlayer2Index());
   };
 
+  const handleRowDoubleClickAlbum = (e: any) => {
+    history.push(`/library/album/${e.id}`);
+  };
+
   if (isLoading) {
     return <PageLoader />;
   }
@@ -142,6 +148,7 @@ const StarredView = () => {
           }}
           listType="music"
           virtualized
+          disabledContextMenuOptions={['removeFromCurrent']}
         />
       )}
       {currentPage === 'Albums' && (
@@ -153,6 +160,7 @@ const StarredView = () => {
               rowHeight={Number(settings.getSync('albumListRowHeight'))}
               fontSize={settings.getSync('albumListFontSize')}
               handleRowClick={handleRowClick}
+              handleRowDoubleClick={handleRowDoubleClickAlbum}
               cacheImages={{
                 enabled: settings.getSync('cacheImages'),
                 cacheType: 'album',
@@ -160,6 +168,7 @@ const StarredView = () => {
               }}
               listType="album"
               virtualized
+              disabledContextMenuOptions={['removeFromCurrent']}
             />
           )}
           {viewType === 'grid' && (

src/components/viewtypes/ListViewTable.tsx

@@ -62,6 +62,7 @@ const ListViewTable = ({
   handleDragEnd,
   miniView,
   dnd,
+  disabledContextMenuOptions,
 }: any) => {
   const history = useHistory();
   const dispatch = useAppDispatch();
@@ -236,6 +237,7 @@ const ListViewTable = ({
                 yPos: e.pageY,
                 rowId: rowData.uniqueId,
                 type: nowPlaying ? 'nowPlaying' : 'other',
+                disabledOptions: disabledContextMenuOptions || [],
               })
             );
           } else {

src/components/viewtypes/ListViewType.tsx

@@ -36,6 +36,7 @@ const ListViewType = (
     handleDragEnd,
     dnd,
     miniView,
+    disabledContextMenuOptions,
     ...rest
   }: any,
   ref: any
@@ -335,6 +336,7 @@ const ListViewType = (
             handleDragEnd={handleDragEnd}
             dnd={dnd}
             miniView={miniView}
+            disabledContextMenuOptions={disabledContextMenuOptions}
             // onScroll={(e) => setScrollY(tableRef.current.scrollY)}
           />
         )}

src/redux/miscSlice.ts

@@ -15,12 +15,21 @@ export interface Modal {
   currentPageIndex: number | undefined;
 }
 
+type ContextMenuOptions =
+  | 'addToQueue'
+  | 'removeFromCurrent'
+  | 'addToPlaylist'
+  | 'addToFavorites'
+  | 'addToFavoritesOrdered'
+  | 'removeFromFavorites';
+
 export interface ContextMenu {
   show: boolean;
   xPos?: number;
   yPos?: number;
   rowId?: string;
   type?: string;
+  disabledOptions?: ContextMenuOptions[];
 }
 export interface General {
   theme: string;
@@ -67,6 +76,7 @@ const miscSlice = createSlice({
       state.contextMenu.yPos = action.payload.yPos;
       state.contextMenu.rowId = action.payload.rowId;
       state.contextMenu.type = action.payload.type;
+      state.contextMenu.disabledOptions = action.payload.disabledOptions;
     },
 
     addProcessingPlaylist: (state, action: PayloadAction<string>) => {