Add 'view in modal' to context menu (#8)

src/components/library/AlbumView.tsx

@@ -242,7 +242,12 @@ const AlbumView = ({ ...rest }: any) => {
         }}
         listType="music"
         isModal={rest.isModal}
-        disabledContextMenuOptions={['removeFromCurrent', 'moveSelectedTo', 'deletePlaylist']}
+        disabledContextMenuOptions={[
+          'removeFromCurrent',
+          'moveSelectedTo',
+          'deletePlaylist',
+          'viewInModal',
+        ]}
         handleFavorite={handleRowFavorite}
       />
     </GenericPage>

src/components/library/GenreList.tsx

@@ -86,6 +86,7 @@ const GenreList = () => {
             'deletePlaylist',
             'addToFavorites',
             'removeFromFavorites',
+            'viewInModal',
           ]}
         />
       )}

src/components/player/NowPlayingMiniView.tsx

@@ -241,7 +241,7 @@ const NowPlayingMiniView = () => {
               miniView
               nowPlaying
               dnd
-              disabledContextMenuOptions={['deletePlaylist']}
+              disabledContextMenuOptions={['deletePlaylist', 'viewInModal']}
               handleFavorite={handleRowFavorite}
             />
           </GenericPage>

src/components/player/NowPlayingView.tsx

@@ -428,7 +428,7 @@ const NowPlayingView = () => {
           listType="music"
           nowPlaying
           dnd
-          disabledContextMenuOptions={['deletePlaylist']}
+          disabledContextMenuOptions={['deletePlaylist', 'viewInModal']}
           handleFavorite={handleRowFavorite}
           handleRating={handleRowRating}
         />

src/components/playlist/PlaylistView.tsx

@@ -497,7 +497,7 @@ const PlaylistView = ({ ...rest }) => {
         listType="music"
         dnd
         isModal={rest.isModal}
-        disabledContextMenuOptions={['deletePlaylist']}
+        disabledContextMenuOptions={['deletePlaylist', 'viewInModal']}
         handleFavorite={handleRowFavorite}
         handleRating={handleRowRating}
       />

src/components/search/SearchView.tsx

@@ -158,7 +158,7 @@ const SearchView = () => {
                 cacheType: 'album',
                 cacheIdProperty: 'albumId',
               }}
-              disabledContextMenuOptions={['deletePlaylist']}
+              disabledContextMenuOptions={['deletePlaylist', 'viewInModal']}
               playQueue={playQueue}
               multiSelect={multiSelect}
               isModal={false}

src/components/shared/ContextMenu.tsx

@@ -17,6 +17,7 @@ import {
 } from '../../api/api';
 import { useAppDispatch, useAppSelector } from '../../redux/hooks';
 import {
+  addModalPage,
   addProcessingPlaylist,
   removeProcessingPlaylist,
   setContextMenu,
@@ -455,6 +456,20 @@ export const GlobalContextMenu = () => {
     }
   };
 
+  const handleViewInModal = () => {
+    dispatch(setContextMenu({ show: false }));
+    if (misc.contextMenu.type !== 'music' && multiSelect.selected.length === 1) {
+      dispatch(
+        addModalPage({
+          pageType: misc.contextMenu.type,
+          id: misc.contextMenu.details.id,
+        })
+      );
+    } else {
+      notifyToast('error', 'Select only one row');
+    }
+  };
+
   return (
     <>
       {misc.contextMenu.show && (
@@ -462,7 +477,7 @@ export const GlobalContextMenu = () => {
           xPos={misc.contextMenu.xPos}
           yPos={misc.contextMenu.yPos}
           width={190}
-          numOfButtons={9}
+          numOfButtons={10}
           numOfDividers={3}
         >
           <ContextMenuButton
@@ -599,7 +614,11 @@ export const GlobalContextMenu = () => {
             disabled={misc.contextMenu.disabledOptions.includes('removeFromFavorites')}
           />
           <ContextMenuDivider />
-
+          <ContextMenuButton
+            text="View in modal"
+            onClick={handleViewInModal}
+            disabled={misc.contextMenu.disabledOptions.includes('viewInModal')}
+          />
           <Whisper
             enterable
             placement="autoHorizontalStart"

src/components/starred/StarredView.tsx

@@ -161,7 +161,12 @@ const StarredView = () => {
               }}
               listType="music"
               virtualized
-              disabledContextMenuOptions={['removeFromCurrent', 'moveSelectedTo', 'deletePlaylist']}
+              disabledContextMenuOptions={[
+                'removeFromCurrent',
+                'moveSelectedTo',
+                'deletePlaylist',
+                'viewInModal',
+              ]}
               handleFavorite={handleRowFavorite}
             />
           )}

src/components/viewtypes/ListViewTable.tsx

@@ -293,7 +293,7 @@ const ListViewTable = ({
 
           // Use the calculated ContextMenu height
           // numOfButtons * 30 + props.numOfDividers * 1.5
-          const contextMenuHeight = 8 * 30 + 3 * 1.5;
+          const contextMenuHeight = 9 * 30 + 3 * 1.5;
           if (e.pageY + contextMenuHeight >= window.innerHeight) {
             pageY = e.pageY - contextMenuHeight;
           } else {
@@ -301,7 +301,8 @@ const ListViewTable = ({
           }
 
           if (
-            (misc.contextMenu.show === false || misc.contextMenu.rowId !== rowData.uniqueId) &&
+            (misc.contextMenu.show === false ||
+              misc.contextMenu.details.uniqueId !== rowData.uniqueId) &&
             multiSelect.selected.filter((entry: any) => entry.uniqueId === rowData.uniqueId)
               .length > 0
           ) {
@@ -311,8 +312,8 @@ const ListViewTable = ({
                 show: true,
                 xPos: pageX,
                 yPos: pageY,
-                rowId: rowData.uniqueId,
                 type: nowPlaying ? 'nowPlaying' : rowData.type,
+                details: rowData,
                 disabledOptions: disabledContextMenuOptions || [],
               })
             );
@@ -324,8 +325,8 @@ const ListViewTable = ({
                 show: true,
                 xPos: pageX,
                 yPos: pageY,
-                rowId: rowData.uniqueId,
                 type: nowPlaying ? 'nowPlaying' : rowData.type,
+                details: rowData,
                 disabledOptions: disabledContextMenuOptions || [],
               })
             );

src/redux/miscSlice.ts

@@ -1,6 +1,7 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import settings from 'electron-settings';
 import { mockSettings } from '../shared/mockSettings';
+import { Entry } from './playQueueSlice';
 
 const parsedSettings = process.env.NODE_ENV === 'test' ? mockSettings : settings.getSync();
 
@@ -23,6 +24,7 @@ type ContextMenuOptions =
   | 'deletePlaylist'
   | 'addToFavorites'
   | 'removeFromFavorites'
+  | 'viewInModal'
   | 'moveSelectedTo';
 
 export interface ContextMenu {
@@ -31,6 +33,7 @@ export interface ContextMenu {
   yPos?: number;
   rowId?: string;
   type?: string;
+  details?: Entry;
   disabledOptions?: ContextMenuOptions[];
 }
 export interface General {
@@ -88,8 +91,8 @@ const miscSlice = createSlice({
       state.contextMenu.show = action.payload.show;
       state.contextMenu.xPos = action.payload.xPos;
       state.contextMenu.yPos = action.payload.yPos;
-      state.contextMenu.rowId = action.payload.rowId;
       state.contextMenu.type = action.payload.type;
+      state.contextMenu.details = action.payload.details;
       state.contextMenu.disabledOptions = action.payload.disabledOptions;
     },