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>
2021-09-21 06:00:43 +05:30
parent 15ae3d47cf
commit 0c0bd2967d
18 changed files with 223 additions and 89 deletions
@@ -0,0 +1,78 @@
+import React from 'react'
+import Table from '@material-ui/core/Table'
+import TableBody from '@material-ui/core/TableBody'
+import TableCell from '@material-ui/core/TableCell'
+import TableContainer from '@material-ui/core/TableContainer'
+import TableRow from '@material-ui/core/TableRow'
+import {
+  BooleanField,
+  DateField,
+  TextField,
+  NumberField,
+  FunctionField,
+  useTranslate,
+  useRecordContext,
+} from 'react-admin'
+import inflection from 'inflection'
+import { BitrateField, SizeField } from './index'
+import { MultiLineTextField } from './MultiLineTextField'
+import { makeStyles } from '@material-ui/core/styles'
+
+const useStyles = makeStyles({
+  tableCell: {
+    width: '17.5%',
+  },
+})
+
+export const SongInfo = (props) => {
+  const classes = useStyles()
+  const translate = useTranslate()
+  const record = useRecordContext(props)
+  const data = {
+    path: <TextField source="path" />,
+    album: <TextField source="album" />,
+    discSubtitle: <TextField source="discSubtitle" />,
+    albumArtist: <TextField source="albumArtist" />,
+    genre: (
+      <FunctionField render={(r) => r.genres?.map((g) => g.name).join(', ')} />
+    ),
+    compilation: <BooleanField source="compilation" />,
+    bitRate: <BitrateField source="bitRate" />,
+    channels: <NumberField source="channels" />,
+    size: <SizeField source="size" />,
+    updatedAt: <DateField source="updatedAt" showTime />,
+    playCount: <TextField source="playCount" />,
+    bpm: <NumberField source="bpm" />,
+    comment: <MultiLineTextField source="comment" />,
+  }
+
+  const optionalFields = ['discSubtitle', 'comment', 'bpm', 'genre']
+  optionalFields.forEach((field) => {
+    !record[field] && delete data[field]
+  })
+  if (record.playCount > 0) {
+    data.playDate = <DateField record={record} source="playDate" showTime />
+  }
+
+  return (
+    <TableContainer>
+      <Table aria-label="song details" size="small">
+        <TableBody>
+          {Object.keys(data).map((key) => {
+            return (
+              <TableRow key={`${record.id}-${key}`}>
+                <TableCell scope="row" className={classes.tableCell}>
+                  {translate(`resources.song.fields.${key}`, {
+                    _: inflection.humanize(inflection.underscore(key)),
+                  })}
+                  :
+                </TableCell>
+                <TableCell align="left">{data[key]}</TableCell>
+              </TableRow>
+            )
+          })}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  )
+}