From 0c0bd2967dcd23746fa09b8f9d989fe288047043 Mon Sep 17 00:00:00 2001
From: Samarjeet <samarsault@gmail.com>
Date: Tue, 21 Sep 2021 06:00:43 +0530
Subject: [PATCH] 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 | 3 +-
scanner/metadata/taglib/get_filename.go | 1 +
scanner/metadata/taglib/get_filename_win.go | 1 +
ui/src/App.js | 2 +
ui/src/actions/dialogs.js | 14 ++++
ui/src/album/AlbumInfo.js | 77 +++++++++++++++++++
ui/src/album/AlbumList.js | 3 +
ui/src/album/AlbumSongs.js | 6 +-
ui/src/album/AlbumTableView.js | 77 +------------------
ui/src/common/ContextMenus.js | 11 +++
ui/src/common/SongContextMenu.js | 13 +++-
ui/src/common/{SongDetails.js => SongInfo.js} | 2 +-
ui/src/common/index.js | 2 +-
ui/src/dialogs/ExpandInfoDialog.js | 57 ++++++++++++++
ui/src/i18n/en.json | 6 +-
ui/src/playlist/PlaylistSongs.js | 6 +-
ui/src/reducers/dialogReducer.js | 26 +++++++
ui/src/song/SongList.js | 5 +-
18 files changed, 223 insertions(+), 89 deletions(-)
create mode 100644 ui/src/album/AlbumInfo.js
rename ui/src/common/{SongDetails.js => SongInfo.js} (98%)
create mode 100644 ui/src/dialogs/ExpandInfoDialog.js
diff --git a/cmd/wire_injectors.go b/cmd/wire_injectors.go
index 6a1f96931..c03d9b804 100644
--- a/cmd/wire_injectors.go
+++ b/cmd/wire_injectors.go
@@ -1,4 +1,5 @@
-//+build wireinject
+//go:build wireinject
+// +build wireinject
package cmd
diff --git a/scanner/metadata/taglib/get_filename.go b/scanner/metadata/taglib/get_filename.go
index f4c2307b5..2a74fee40 100644
--- a/scanner/metadata/taglib/get_filename.go
+++ b/scanner/metadata/taglib/get_filename.go
@@ -1,3 +1,4 @@
+//go:build !windows
// +build !windows
package taglib
diff --git a/scanner/metadata/taglib/get_filename_win.go b/scanner/metadata/taglib/get_filename_win.go
index 90bafec5e..5f93c4294 100644
--- a/scanner/metadata/taglib/get_filename_win.go
+++ b/scanner/metadata/taglib/get_filename_win.go
@@ -1,3 +1,4 @@
+//go:build windows
// +build windows
package taglib
diff --git a/ui/src/App.js b/ui/src/App.js
index 67d163591..118cdc8ae 100644
--- a/ui/src/App.js
+++ b/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,
},
diff --git a/ui/src/actions/dialogs.js b/ui/src/actions/dialogs.js
index 20c3beaed..10243c45a 100644
--- a/ui/src/actions/dialogs.js
+++ b/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,
+})
diff --git a/ui/src/album/AlbumInfo.js b/ui/src/album/AlbumInfo.js
new file mode 100644
index 000000000..95909f734
--- /dev/null
+++ b/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
diff --git a/ui/src/album/AlbumList.js b/ui/src/album/AlbumList.js
index 97abb6de8..f3ffcef62 100644
--- a/ui/src/album/AlbumList.js
+++ b/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 />} />
</>
)
}
diff --git a/ui/src/album/AlbumSongs.js b/ui/src/album/AlbumSongs.js
index b715a0da1..a0f257984 100644
--- a/ui/src/album/AlbumSongs.js
+++ b/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 />} />
</>
)
}
diff --git a/ui/src/album/AlbumTableView.js b/ui/src/album/AlbumTableView.js
index 7e346f0ec..ad4c52816 100644
--- a/ui/src/album/AlbumTableView.js
+++ b/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
diff --git a/ui/src/common/ContextMenus.js b/ui/src/common/ContextMenus.js
index d48be2da5..ae113c098 100644
--- a/ui/src/common/ContextMenus.js
+++ b/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 },
diff --git a/ui/src/common/SongContextMenu.js b/ui/src/common/SongContextMenu.js
index ff7b778f1..6df06bf08 100644
--- a/ui/src/common/SongContextMenu.js
+++ b/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) => {
diff --git a/ui/src/common/SongDetails.js b/ui/src/common/SongInfo.js
similarity index 98%
rename from ui/src/common/SongDetails.js
rename to ui/src/common/SongInfo.js
index c61772e82..e5d3f4ce6 100644
--- a/ui/src/common/SongDetails.js
+++ b/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)
diff --git a/ui/src/common/index.js b/ui/src/common/index.js
index 98135e8ad..ad9bb48c0 100644
--- a/ui/src/common/index.js
+++ b/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'
diff --git a/ui/src/dialogs/ExpandInfoDialog.js b/ui/src/dialogs/ExpandInfoDialog.js
new file mode 100644
index 000000000..40899a2eb
--- /dev/null
+++ b/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
diff --git a/ui/src/i18n/en.json b/ui/src/i18n/en.json
index 3fa2080e2..baed81a9a 100644
--- a/ui/src/i18n/en.json
+++ b/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",
diff --git a/ui/src/playlist/PlaylistSongs.js b/ui/src/playlist/PlaylistSongs.js
index b8c816ae6..435f494c9 100644
--- a/ui/src/playlist/PlaylistSongs.js
+++ b/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)}
</>
)
diff --git a/ui/src/reducers/dialogReducer.js b/ui/src/reducers/dialogReducer.js
index 9d83f2760..f51007bbb 100644
--- a/ui/src/reducers/dialogReducer.js
+++ b/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
+ }
+}
diff --git a/ui/src/song/SongList.js b/ui/src/song/SongList.js
index c0a4ff2d5..9f99f0940 100644
--- a/ui/src/song/SongList.js
+++ b/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 />} />
</>
)
}