From 1e7f7163f838566e2967d9672c7f33a41f5aaffe Mon Sep 17 00:00:00 2001 From: jeffvli Date: Mon, 11 Oct 2021 01:57:09 -0700 Subject: [PATCH] Add 'view in modal' to context menu (#8) --- src/components/library/AlbumView.tsx | 7 +++++- src/components/library/GenreList.tsx | 1 + src/components/player/NowPlayingMiniView.tsx | 2 +- src/components/player/NowPlayingView.tsx | 2 +- src/components/playlist/PlaylistView.tsx | 2 +- src/components/search/SearchView.tsx | 2 +- src/components/shared/ContextMenu.tsx | 23 ++++++++++++++++++-- src/components/starred/StarredView.tsx | 7 +++++- src/components/viewtypes/ListViewTable.tsx | 9 ++++---- src/redux/miscSlice.ts | 5 ++++- 10 files changed, 47 insertions(+), 13 deletions(-) diff --git a/src/components/library/AlbumView.tsx b/src/components/library/AlbumView.tsx index bad73ab..72799fc 100644 --- a/src/components/library/AlbumView.tsx +++ b/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} /> diff --git a/src/components/library/GenreList.tsx b/src/components/library/GenreList.tsx index cfe43d3..70e20fc 100644 --- a/src/components/library/GenreList.tsx +++ b/src/components/library/GenreList.tsx @@ -86,6 +86,7 @@ const GenreList = () => { 'deletePlaylist', 'addToFavorites', 'removeFromFavorites', + 'viewInModal', ]} /> )} diff --git a/src/components/player/NowPlayingMiniView.tsx b/src/components/player/NowPlayingMiniView.tsx index 59a46d0..432f6f7 100644 --- a/src/components/player/NowPlayingMiniView.tsx +++ b/src/components/player/NowPlayingMiniView.tsx @@ -241,7 +241,7 @@ const NowPlayingMiniView = () => { miniView nowPlaying dnd - disabledContextMenuOptions={['deletePlaylist']} + disabledContextMenuOptions={['deletePlaylist', 'viewInModal']} handleFavorite={handleRowFavorite} /> diff --git a/src/components/player/NowPlayingView.tsx b/src/components/player/NowPlayingView.tsx index dc25f37..254a8b7 100644 --- a/src/components/player/NowPlayingView.tsx +++ b/src/components/player/NowPlayingView.tsx @@ -428,7 +428,7 @@ const NowPlayingView = () => { listType="music" nowPlaying dnd - disabledContextMenuOptions={['deletePlaylist']} + disabledContextMenuOptions={['deletePlaylist', 'viewInModal']} handleFavorite={handleRowFavorite} handleRating={handleRowRating} /> diff --git a/src/components/playlist/PlaylistView.tsx b/src/components/playlist/PlaylistView.tsx index cc044f6..2625dea 100644 --- a/src/components/playlist/PlaylistView.tsx +++ b/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} /> diff --git a/src/components/search/SearchView.tsx b/src/components/search/SearchView.tsx index f96c082..20973ee 100644 --- a/src/components/search/SearchView.tsx +++ b/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} diff --git a/src/components/shared/ContextMenu.tsx b/src/components/shared/ContextMenu.tsx index cbcc646..5897217 100644 --- a/src/components/shared/ContextMenu.tsx +++ b/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} > { disabled={misc.contextMenu.disabledOptions.includes('removeFromFavorites')} /> - + { }} listType="music" virtualized - disabledContextMenuOptions={['removeFromCurrent', 'moveSelectedTo', 'deletePlaylist']} + disabledContextMenuOptions={[ + 'removeFromCurrent', + 'moveSelectedTo', + 'deletePlaylist', + 'viewInModal', + ]} handleFavorite={handleRowFavorite} /> )} diff --git a/src/components/viewtypes/ListViewTable.tsx b/src/components/viewtypes/ListViewTable.tsx index 27857c1..834fa3c 100644 --- a/src/components/viewtypes/ListViewTable.tsx +++ b/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 || [], }) ); diff --git a/src/redux/miscSlice.ts b/src/redux/miscSlice.ts index 55d284e..89545ef 100644 --- a/src/redux/miscSlice.ts +++ b/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; },