Replace expanded with a dialog (#1258)

* Replace expanded with a dialog

* Change `info` label to "Get Info"

* Rename things for consistency

Co-authored-by: Deluan <deluan@navidrome.org>

ui/src/common/ContextMenus.js

@@ -14,6 +14,7 @@ import {
   playTracks,
   shuffleTracks,
   openAddToPlaylist,
+  openExtendedInfoDialog,
 } from '../actions'
 import subsonic from '../subsonic'
 import { LoveButton } from './LoveButton'
@@ -36,6 +37,7 @@ const ContextMenu = ({
   color,
   className,
   songQueryParams,
+  hideInfo,
 }) => {
   const classes = useStyles({ color })
   const dataProvider = useDataProvider()
@@ -83,6 +85,14 @@ const ContextMenu = ({
       )})`,
       action: () => subsonic.download(record.id),
     },
+    ...(!hideInfo && {
+      info: {
+        enabled: true,
+        needData: true,
+        label: translate('resources.album.actions.info'),
+        action: () => dispatch(openExtendedInfoDialog(record)),
+      },
+    }),
   }
 
   const handleClick = (e) => {
@@ -195,6 +205,7 @@ export const ArtistContextMenu = (props) =>
   props.record ? (
     <ContextMenu
       {...props}
+      hideInfo={true}
       resource={'artist'}
       songQueryParams={{
         pagination: { page: 1, perPage: 200 },

ui/src/common/SongContextMenu.js

@@ -6,7 +6,13 @@ import { IconButton, Menu, MenuItem } from '@material-ui/core'
 import { makeStyles } from '@material-ui/core/styles'
 import MoreVertIcon from '@material-ui/icons/MoreVert'
 import clsx from 'clsx'
-import { playNext, addTracks, setTrack, openAddToPlaylist } from '../actions'
+import {
+  playNext,
+  addTracks,
+  setTrack,
+  openAddToPlaylist,
+  openExtendedInfoDialog,
+} from '../actions'
 import subsonic from '../subsonic'
 import { LoveButton } from './LoveButton'
 import config from '../config'
@@ -63,6 +69,11 @@ export const SongContextMenu = ({
       )})`,
       action: (record) => subsonic.download(record.mediaFileId || record.id),
     },
+    info: {
+      enabled: true,
+      label: translate('resources.song.actions.info'),
+      action: (record) => dispatch(openExtendedInfoDialog(record)),
+    },
   }
 
   const handleClick = (e) => {

ui/src/common/SongInfo.js

@@ -24,7 +24,7 @@ const useStyles = makeStyles({
   },
 })
 
-export const SongDetails = (props) => {
+export const SongInfo = (props) => {
   const classes = useStyles()
   const translate = useTranslate()
   const record = useRecordContext(props)

ui/src/common/index.js

@@ -17,7 +17,7 @@ export * from './SimpleList'
 export * from './SizeField'
 export * from './SongContextMenu'
 export * from './SongDatagrid'
-export * from './SongDetails'
+export * from './SongInfo'
 export * from './SongTitleField'
 export * from './LoveButton'
 export * from './Title'