third-party-mirrors/navidrome
1
0
Fork 0
mirror of https://github.com/navidrome/navidrome.git synced 2025-04-28 01:12:17 +03:00
Code Issues Packages Projects Releases Wiki Activity

Better layout for Song Details

Browse Source
This commit is contained in:
Deluan 2020-04-14 16:19:18 -04:00
parent afba4c9915
commit 57f2c3f823
1 changed files with 41 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
ui/src/common/SongDetails.js
View File

@ -1,29 +1,50 @@
import React from 'react' import React from 'react'
import { import Paper from '@material-ui/core/Paper'
Show, import Table from '@material-ui/core/Table'
SimpleShowLayout, import TableBody from '@material-ui/core/TableBody'
BooleanField, import TableCell from '@material-ui/core/TableCell'
DateField, import TableContainer from '@material-ui/core/TableContainer'
TextField import TableRow from '@material-ui/core/TableRow'
} from 'react-admin' import { BooleanField, DateField, TextField, useTranslate } from 'react-admin'
import inflection from 'inflection'
import { BitrateField, SizeField } from './index' import { BitrateField, SizeField } from './index'
const SongDetails = (props) => { const SongDetails = (props) => {
const translate = useTranslate()
const { record } = props const { record } = props
const data = {
path: <TextField record={record} source="path" />,
albumArtist: <TextField record={record} source="albumArtist" />,
genre: <TextField record={record} source="genre" />,
compilation: <BooleanField record={record} source="compilation" />,
bitRate: <BitrateField record={record} source="bitRate" />,
size: <SizeField record={record} source="size" />,
updatedAt: <DateField record={record} source="updatedAt" showTime />,
playCount: <TextField record={record} source="playCount" />
}
if (record.playCount > 0) {
data.playDate = <DateField record={record} source="playDate" showTime />
}
return ( return (
<Show {...props} title=" "> <TableContainer component={Paper}>
<SimpleShowLayout> <Table aria-label="simple table">
<TextField source="path" /> <TableBody>
<TextField source="albumArtist" /> {Object.keys(data).map((key) => {
<TextField source="genre" /> return (
<BooleanField source="compilation" /> <TableRow key={record.id}>
<BitrateField source="bitRate" /> <TableCell component="th" scope="row">
<DateField source="updatedAt" showTime /> {translate(`resources.song.fields.${key}`, {
<SizeField source="size" /> _: inflection.humanize(inflection.underscore(key))
<TextField source="playCount" /> })}
{record.playCount > 0 && <DateField source="playDate" showTime />} :
</SimpleShowLayout> </TableCell>
</Show> <TableCell align="left">{data[key]}</TableCell>
</TableRow>
)
})}
</TableBody>
</Table>
</TableContainer>
) )
} }