diff --git a/ui/src/album/AlbumListView.js b/ui/src/album/AlbumListView.js
index dea990a64..e7c7e6c41 100644
--- a/ui/src/album/AlbumListView.js
+++ b/ui/src/album/AlbumListView.js
@@ -1,12 +1,19 @@
import React from 'react'
+import Paper from '@material-ui/core/Paper'
+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 {
BooleanField,
Datagrid,
DateField,
NumberField,
Show,
- SimpleShowLayout,
TextField,
+ useTranslate,
} from 'react-admin'
import { useMediaQuery } from '@material-ui/core'
import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder'
@@ -16,7 +23,6 @@ import {
DurationField,
RangeField,
SimpleList,
- SizeField,
MultiLineTextField,
AlbumContextMenu,
} from '../common'
@@ -35,24 +41,53 @@ const useStyles = makeStyles({
},
},
},
+ tableCell: {
+ width: '17.5%',
+ },
contextMenu: {
visibility: 'hidden',
},
})
const AlbumDetails = (props) => {
+ const classes = useStyles()
+ const translate = useTranslate()
+ const { record } = props
+ const data = {
+ albumArtist: ,
+ genre: ,
+ compilation: ,
+ updatedAt: ,
+ comment: ,
+ }
+ if (!record.comment) {
+ delete data.comment
+ }
return (
-
-
-
-
-
-
- {props.record && props.record['comment'] && (
-
- )}
-
+
+
+
+ {Object.keys(data).map((key) => {
+ return (
+
+
+ {translate(`resources.album.fields.${key}`, {
+ _: inflection.humanize(inflection.underscore(key)),
+ })}
+ :
+
+ {data[key]}
+
+ )
+ })}
+
+
+
)
}
diff --git a/ui/src/common/SongDetails.js b/ui/src/common/SongDetails.js
index b26ceed22..57d1a7555 100644
--- a/ui/src/common/SongDetails.js
+++ b/ui/src/common/SongDetails.js
@@ -9,8 +9,16 @@ import { BooleanField, DateField, TextField, useTranslate } 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 SongDetails = (props) => {
+ const classes = useStyles()
const translate = useTranslate()
const { record } = props
const data = {
@@ -42,7 +50,11 @@ export const SongDetails = (props) => {
{Object.keys(data).map((key) => {
return (
-
+
{translate(`resources.song.fields.${key}`, {
_: inflection.humanize(inflection.underscore(key)),
})}