Deluan Quintão
fcdd30ba8f
* feat: create vite project * feat: it's alive! * feat: `make dev` working! * feat: replace custom serviceWorker with vite plugin * test: replace Jest with Vitest * fix: run prettier * fix: skip eslint for now. * chore: remove ui.old folder * refactor: replace lodash.pick with simple destructuring * fix: eslint errors (wip) * fix: eslint errors (wip) * fix: display-name eslint errors (wip) * fix: no-console eslint errors (wip) * fix: react-refresh/only-export-components eslint errors (wip) * fix: react-refresh/only-export-components eslint errors (wip) * fix: react-refresh/only-export-components eslint errors (wip) * fix: react-refresh/only-export-components eslint errors (wip) * fix: build * fix: pwa manifest * refactor: pwa manifest * refactor: simplify PORT configuration * refactor: rename simple JS files * test: cover playlistUtils * fix: react-image-lightbox * feat(ui): add sourcemaps to help debug issues
76 lines
1.9 KiB
React
76 lines
1.9 KiB
React
import { Card, CardContent, Typography } from '@material-ui/core'
|
|
import { makeStyles } from '@material-ui/core/styles'
|
|
import { useTranslate } from 'react-admin'
|
|
import { CollapsibleComment, DurationField, SizeField } from '../common'
|
|
|
|
const useStyles = makeStyles(
|
|
(theme) => ({
|
|
container: {
|
|
[theme.breakpoints.down('xs')]: {
|
|
padding: '0.7em',
|
|
minWidth: '24em',
|
|
},
|
|
[theme.breakpoints.up('sm')]: {
|
|
padding: '1em',
|
|
minWidth: '32em',
|
|
},
|
|
},
|
|
details: {
|
|
display: 'inline-block',
|
|
verticalAlign: 'top',
|
|
[theme.breakpoints.down('xs')]: {
|
|
width: '14em',
|
|
},
|
|
[theme.breakpoints.up('sm')]: {
|
|
width: '26em',
|
|
},
|
|
[theme.breakpoints.up('lg')]: {
|
|
width: '38em',
|
|
},
|
|
},
|
|
title: {
|
|
whiteSpace: 'nowrap',
|
|
overflow: 'hidden',
|
|
textOverflow: 'ellipsis',
|
|
},
|
|
}),
|
|
{
|
|
name: 'NDPlaylistDetails',
|
|
},
|
|
)
|
|
|
|
const PlaylistDetails = (props) => {
|
|
const { record = {} } = props
|
|
const translate = useTranslate()
|
|
const classes = useStyles()
|
|
|
|
return (
|
|
<Card className={classes.container}>
|
|
<CardContent className={classes.details}>
|
|
<Typography variant="h5" className={classes.title}>
|
|
{record.name || translate('ra.page.loading')}
|
|
</Typography>
|
|
<Typography component="p">
|
|
{record.songCount ? (
|
|
<span>
|
|
{record.songCount}{' '}
|
|
{translate('resources.song.name', {
|
|
smart_count: record.songCount,
|
|
})}
|
|
{' · '}
|
|
<DurationField record={record} source={'duration'} />
|
|
{' · '}
|
|
<SizeField record={record} source={'size'} />
|
|
</span>
|
|
) : (
|
|
<span> </span>
|
|
)}
|
|
</Typography>
|
|
<CollapsibleComment record={record} />
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
export default PlaylistDetails
|