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>

cmd/wire_injectors.go

@@ -1,4 +1,5 @@
-//+build wireinject
+//go:build wireinject
+// +build wireinject
 
 package cmd
 

scanner/metadata/taglib/get_filename.go

@@ -1,3 +1,4 @@
+//go:build !windows
 // +build !windows
 
 package taglib

scanner/metadata/taglib/get_filename_win.go

@@ -1,3 +1,4 @@
+//go:build windows
 // +build windows
 
 package taglib

ui/src/App.js

@@ -19,6 +19,7 @@ import customRoutes from './routes'
 import {
   themeReducer,
   addToPlaylistDialogReducer,
+  expandInfoDialogReducer,
   playerReducer,
   albumViewReducer,
   activityReducer,
@@ -52,6 +53,7 @@ const App = () => (
         albumView: albumViewReducer,
         theme: themeReducer,
         addToPlaylistDialog: addToPlaylistDialogReducer,
+        expandInfoDialog: expandInfoDialogReducer,
         activity: activityReducer,
         settings: settingsReducer,
       },

ui/src/actions/dialogs.js

@@ -2,6 +2,9 @@ export const ADD_TO_PLAYLIST_OPEN = 'ADD_TO_PLAYLIST_OPEN'
 export const ADD_TO_PLAYLIST_CLOSE = 'ADD_TO_PLAYLIST_CLOSE'
 export const DUPLICATE_SONG_WARNING_OPEN = 'DUPLICATE_SONG_WARNING_OPEN'
 export const DUPLICATE_SONG_WARNING_CLOSE = 'DUPLICATE_SONG_WARNING_CLOSE'
+export const EXTENDED_INFO_OPEN = 'EXTENDED_INFO_OPEN'
+export const EXTENDED_INFO_CLOSE = 'EXTENDED_INFO_CLOSE'
+
 export const openAddToPlaylist = ({ selectedIds, onSuccess }) => ({
   type: ADD_TO_PLAYLIST_OPEN,
   selectedIds,
@@ -20,3 +23,14 @@ export const openDuplicateSongWarning = (duplicateIds) => ({
 export const closeDuplicateSongDialog = () => ({
   type: DUPLICATE_SONG_WARNING_CLOSE,
 })
+
+export const openExtendedInfoDialog = (record) => {
+  return {
+    type: EXTENDED_INFO_OPEN,
+    record,
+  }
+}
+
+export const closeExtendedInfoDialog = () => ({
+  type: EXTENDED_INFO_CLOSE,
+})

ui/src/album/AlbumInfo.js

@@ -0,0 +1,77 @@
+import Table from '@material-ui/core/Table'
+import TableBody from '@material-ui/core/TableBody'
+import inflection from 'inflection'
+import TableCell from '@material-ui/core/TableCell'
+import TableContainer from '@material-ui/core/TableContainer'
+import TableRow from '@material-ui/core/TableRow'
+import {
+  ArrayField,
+  BooleanField,
+  ChipField,
+  DateField,
+  SingleFieldList,
+  TextField,
+  useRecordContext,
+  useTranslate,
+} from 'react-admin'
+import { makeStyles } from '@material-ui/core/styles'
+import { MultiLineTextField } from '../common'
+
+const useStyles = makeStyles({
+  tableCell: {
+    width: '17.5%',
+  },
+})
+
+const AlbumInfo = (props) => {
+  const classes = useStyles()
+  const translate = useTranslate()
+  const record = useRecordContext(props)
+  const data = {
+    album: <TextField source={'name'} />,
+    albumArtist: <TextField source={'albumArtist'} />,
+    genre: (
+      <ArrayField source={'genres'}>
+        <SingleFieldList linkType={false}>
+          <ChipField source={'name'} />
+        </SingleFieldList>
+      </ArrayField>
+    ),
+    compilation: <BooleanField source={'compilation'} />,
+    updatedAt: <DateField source={'updatedAt'} showTime />,
+    comment: <MultiLineTextField source={'comment'} />,
+  }
+
+  const optionalFields = ['comment', 'genre']
+  optionalFields.forEach((field) => {
+    !record[field] && delete data[field]
+  })
+
+  return (
+    <TableContainer>
+      <Table aria-label="album details" size="small">
+        <TableBody>
+          {Object.keys(data).map((key) => {
+            return (
+              <TableRow key={`${record.id}-${key}`}>
+                <TableCell
+                  component="th"
+                  scope="row"
+                  className={classes.tableCell}
+                >
+                  {translate(`resources.album.fields.${key}`, {
+                    _: inflection.humanize(inflection.underscore(key)),
+                  })}
+                  :
+                </TableCell>
+                <TableCell align="left">{data[key]}</TableCell>
+              </TableRow>
+            )
+          })}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  )
+}
+
+export default AlbumInfo

ui/src/album/AlbumList.js

@@ -27,6 +27,8 @@ import AlbumGridView from './AlbumGridView'
 import { AddToPlaylistDialog } from '../dialogs'
 import albumLists, { defaultAlbumList } from './albumLists'
 import config from '../config'
+import AlbumInfo from './AlbumInfo'
+import ExpandInfoDialog from '../dialogs/ExpandInfoDialog'
 
 const AlbumFilter = (props) => {
   const translate = useTranslate()
@@ -130,6 +132,7 @@ const AlbumList = (props) => {
         )}
       </List>
       <AddToPlaylistDialog />
+      <ExpandInfoDialog content={<AlbumInfo />} />
     </>
   )
 }

ui/src/album/AlbumSongs.js

@@ -19,7 +19,7 @@ import {
   SongBulkActions,
   SongContextMenu,
   SongDatagrid,
-  SongDetails,
+  SongInfo,
   SongTitleField,
   RatingField,
   QualityInfo,
@@ -28,6 +28,7 @@ import {
 } from '../common'
 import { AddToPlaylistDialog } from '../dialogs'
 import config from '../config'
+import ExpandInfoDialog from '../dialogs/ExpandInfoDialog'
 
 const useStyles = makeStyles(
   (theme) => ({
@@ -85,7 +86,6 @@ const useStyles = makeStyles(
 
 const AlbumSongs = (props) => {
   const { data, ids } = props
-  const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
   const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
   const classes = useStyles({ isDesktop })
   const dispatch = useDispatch()
@@ -157,7 +157,6 @@ const AlbumSongs = (props) => {
             <SongBulkActions />
           </BulkActionsToolbar>
           <SongDatagrid
-            expand={isXsmall ? null : <SongDetails />}
             rowClick={(id) => dispatch(playTracks(data, ids, id))}
             {...props}
             hasBulkActions={true}
@@ -183,6 +182,7 @@ const AlbumSongs = (props) => {
         </Card>
       </div>
       <AddToPlaylistDialog />
+      <ExpandInfoDialog content={<SongInfo />} />
     </>
   )
 }

ui/src/album/AlbumTableView.js

@@ -1,22 +1,5 @@
 import React, { useMemo } from 'react'
-import Table from '@material-ui/core/Table'
-import TableBody from '@material-ui/core/TableBody'
-import inflection from 'inflection'
-import TableCell from '@material-ui/core/TableCell'
-import TableContainer from '@material-ui/core/TableContainer'
-import TableRow from '@material-ui/core/TableRow'
-import {
-  ArrayField,
-  BooleanField,
-  ChipField,
-  Datagrid,
-  DateField,
-  NumberField,
-  SingleFieldList,
-  TextField,
-  useRecordContext,
-  useTranslate,
-} from 'react-admin'
+import { Datagrid, NumberField, TextField } from 'react-admin'
 import { useMediaQuery } from '@material-ui/core'
 import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder'
 import { makeStyles } from '@material-ui/core/styles'
@@ -25,7 +8,6 @@ import {
   DurationField,
   RangeField,
   SimpleList,
-  MultiLineTextField,
   AlbumContextMenu,
   RatingField,
   useSelectedFields,
@@ -59,56 +41,6 @@ const useStyles = makeStyles({
   },
 })
 
-const AlbumDetails = (props) => {
-  const classes = useStyles()
-  const translate = useTranslate()
-  const record = useRecordContext(props)
-  const data = {
-    albumArtist: <TextField source={'albumArtist'} />,
-    genre: (
-      <ArrayField source={'genres'}>
-        <SingleFieldList linkType={false}>
-          <ChipField source={'name'} />
-        </SingleFieldList>
-      </ArrayField>
-    ),
-    compilation: <BooleanField source={'compilation'} />,
-    updatedAt: <DateField source={'updatedAt'} showTime />,
-    comment: <MultiLineTextField source={'comment'} />,
-  }
-
-  const optionalFields = ['comment', 'genre']
-  optionalFields.forEach((field) => {
-    !record[field] && delete data[field]
-  })
-
-  return (
-    <TableContainer>
-      <Table aria-label="album details" size="small">
-        <TableBody>
-          {Object.keys(data).map((key) => {
-            return (
-              <TableRow key={`${record.id}-${key}`}>
-                <TableCell
-                  component="th"
-                  scope="row"
-                  className={classes.tableCell}
-                >
-                  {translate(`resources.album.fields.${key}`, {
-                    _: inflection.humanize(inflection.underscore(key)),
-                  })}
-                  :
-                </TableCell>
-                <TableCell align="left">{data[key]}</TableCell>
-              </TableRow>
-            )
-          })}
-        </TableBody>
-      </Table>
-    </TableContainer>
-  )
-}
-
 const AlbumTableView = ({
   hasShow,
   hasEdit,
@@ -180,12 +112,7 @@ const AlbumTableView = ({
       {...rest}
     />
   ) : (
-    <Datagrid
-      expand={<AlbumDetails />}
-      rowClick={'show'}
-      classes={{ row: classes.row }}
-      {...rest}
-    >
+    <Datagrid rowClick={'show'} classes={{ row: classes.row }} {...rest}>
       <TextField source="name" />
       {columns}
       <AlbumContextMenu

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'

ui/src/dialogs/ExpandInfoDialog.js

@@ -0,0 +1,57 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { useDispatch, useSelector } from 'react-redux'
+import { RecordContextProvider, useTranslate } from 'react-admin'
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+} from '@material-ui/core'
+import { closeExtendedInfoDialog } from '../actions'
+
+const ExpandInfoDialog = ({ title, content }) => {
+  const { open, record } = useSelector((state) => state.expandInfoDialog)
+  const dispatch = useDispatch()
+  const translate = useTranslate()
+
+  const handleClose = (e) => {
+    dispatch(closeExtendedInfoDialog())
+    e.stopPropagation()
+  }
+
+  return (
+    <Dialog
+      open={open}
+      onClose={handleClose}
+      onBackdropClick={handleClose}
+      aria-labelledby="info-dialog-album"
+      fullWidth={true}
+      maxWidth={'sm'}
+    >
+      <DialogTitle id="info-dialog-album">
+        {translate(title || 'resources.song.actions.info')}
+      </DialogTitle>
+      <DialogContent>
+        {record && (
+          <RecordContextProvider value={record}>
+            {content}
+          </RecordContextProvider>
+        )}
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={handleClose} color="primary">
+          {translate('ra.action.close')}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+}
+
+ExpandInfoDialog.propTypes = {
+  title: PropTypes.string,
+  content: PropTypes.elementType.isRequired,
+}
+
+export default ExpandInfoDialog

ui/src/i18n/en.json

@@ -33,7 +33,8 @@
                 "addToPlaylist": "Add to Playlist",
                 "shuffleAll": "Shuffle All",
                 "download": "Download",
-                "playNext": "Play Next"
+                "playNext": "Play Next",
+                "info": "Get Info"
             }
         },
         "album": {
@@ -58,7 +59,8 @@
                 "addToQueue": "Play Later",
                 "shuffle": "Shuffle",
                 "addToPlaylist": "Add to Playlist",
-                "download": "Download"
+                "download": "Download",
+                "info": "Get Info"
             },
             "lists": {
                 "all": "All",

ui/src/playlist/PlaylistSongs.js

@@ -19,7 +19,7 @@ import { makeStyles } from '@material-ui/core/styles'
 import ReactDragListView from 'react-drag-listview'
 import {
   DurationField,
-  SongDetails,
+  SongInfo,
   SongContextMenu,
   SongDatagrid,
   SongTitleField,
@@ -31,6 +31,7 @@ import { AddToPlaylistDialog } from '../dialogs'
 import { AlbumLinkField } from '../song/AlbumLinkField'
 import { playTracks } from '../actions'
 import PlaylistSongBulkActions from './PlaylistSongBulkActions'
+import ExpandInfoDialog from '../dialogs/ExpandInfoDialog'
 
 const useStyles = makeStyles(
   (theme) => ({
@@ -85,7 +86,6 @@ const ReorderableList = ({ readOnly, children, ...rest }) => {
 const PlaylistSongs = ({ playlistId, readOnly, actions, ...props }) => {
   const listContext = useListContext()
   const { data, ids, onUnselectItems } = listContext
-  const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
   const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
   const classes = useStyles({ isDesktop })
   const dispatch = useDispatch()
@@ -186,7 +186,6 @@ const PlaylistSongs = ({ playlistId, readOnly, actions, ...props }) => {
             nodeSelector={'tr'}
           >
             <SongDatagrid
-              expand={!isXsmall && <SongDetails />}
               rowClick={(id) => dispatch(playTracks(data, ids, id))}
               {...listContext}
               hasBulkActions={true}
@@ -204,6 +203,7 @@ const PlaylistSongs = ({ playlistId, readOnly, actions, ...props }) => {
         </Card>
       </div>
       <AddToPlaylistDialog />
+      <ExpandInfoDialog content={<SongInfo />} />
       {React.cloneElement(props.pagination, listContext)}
     </>
   )

ui/src/reducers/dialogReducer.js

@@ -3,6 +3,8 @@ import {
   ADD_TO_PLAYLIST_OPEN,
   DUPLICATE_SONG_WARNING_OPEN,
   DUPLICATE_SONG_WARNING_CLOSE,
+  EXTENDED_INFO_OPEN,
+  EXTENDED_INFO_CLOSE,
 } from '../actions'
 
 export const addToPlaylistDialogReducer = (
@@ -35,3 +37,27 @@ export const addToPlaylistDialogReducer = (
       return previousState
   }
 }
+
+export const expandInfoDialogReducer = (
+  previousState = {
+    open: false,
+  },
+  payload
+) => {
+  const { type } = payload
+  switch (type) {
+    case EXTENDED_INFO_OPEN:
+      return {
+        ...previousState,
+        open: true,
+        record: payload.record,
+      }
+    case EXTENDED_INFO_CLOSE:
+      return {
+        ...previousState,
+        open: false,
+      }
+    default:
+      return previousState
+  }
+}

ui/src/song/SongList.js

@@ -17,7 +17,7 @@ import {
   List,
   SongContextMenu,
   SongDatagrid,
-  SongDetails,
+  SongInfo,
   QuickFilter,
   SongTitleField,
   SongSimpleList,
@@ -33,6 +33,7 @@ import { AlbumLinkField } from './AlbumLinkField'
 import { AddToPlaylistDialog } from '../dialogs'
 import { SongBulkActions, QualityInfo, useSelectedFields } from '../common'
 import config from '../config'
+import ExpandInfoDialog from '../dialogs/ExpandInfoDialog'
 
 const useStyles = makeStyles({
   contextHeader: {
@@ -167,7 +168,6 @@ const SongList = (props) => {
           <SongSimpleList />
         ) : (
           <SongDatagrid
-            expand={<SongDetails />}
             rowClick={handleRowClick}
             contextAlwaysVisible={!isDesktop}
             classes={{ row: classes.row }}
@@ -193,6 +193,7 @@ const SongList = (props) => {
         )}
       </List>
       <AddToPlaylistDialog />
+      <ExpandInfoDialog content={<SongInfo />} />
     </>
   )
 }