diff --git a/ui/src/album/AlbumList.js b/ui/src/album/AlbumList.js index 284d577a7..50fac62cc 100644 --- a/ui/src/album/AlbumList.js +++ b/ui/src/album/AlbumList.js @@ -67,7 +67,9 @@ const AlbumList = (props) => { return ( } + title={ + + } exporter={false} bulkActionButtons={false} actions={<AlbumListActions />} diff --git a/ui/src/artist/ArtistList.js b/ui/src/artist/ArtistList.js index ae95d33f2..f7f64aba6 100644 --- a/ui/src/artist/ArtistList.js +++ b/ui/src/artist/ArtistList.js @@ -25,7 +25,9 @@ const artistRowClick = (id) => { const ArtistList = (props) => ( <List {...props} - title={<Title subTitle={'Artists'} />} + title={ + <Title subTitle={'resources.artist.name'} args={{ smart_count: 2 }} /> + } sort={{ field: 'name', order: 'ASC' }} exporter={false} bulkActionButtons={false} diff --git a/ui/src/common/Title.js b/ui/src/common/Title.js index 07c9f7645..0b4765c43 100644 --- a/ui/src/common/Title.js +++ b/ui/src/common/Title.js @@ -1,13 +1,16 @@ import React from 'react' import { useMediaQuery } from '@material-ui/core' +import { useTranslate } from 'react-admin' -const Title = ({ subTitle }) => { +const Title = ({ subTitle, args }) => { + const translate = useTranslate() const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md')) + const text = translate(subTitle, { ...args, _: subTitle }) if (isDesktop) { - return <span>Navidrome {subTitle ? ` - ${subTitle}` : ''}</span> + return <span>Navidrome {text ? ` - ${text}` : ''}</span> } - return <span>{subTitle ? subTitle : 'Navidrome'}</span> + return <span>{text ? text : 'Navidrome'}</span> } export default Title diff --git a/ui/src/i18n/en.js b/ui/src/i18n/en.js index 99d4c4b4c..62e821c8c 100644 --- a/ui/src/i18n/en.js +++ b/ui/src/i18n/en.js @@ -17,6 +17,7 @@ export default deepmerge(englishMessages, { }, }, album: { + name: 'Album |||| Albums', fields: { albumArtist: 'Album Artist', artist: 'Artist', @@ -31,6 +32,18 @@ export default deepmerge(englishMessages, { shuffle: 'Shuffle', }, }, + artist: { + name: 'Artist |||| Artists', + }, + user: { + name: 'User |||| Users', + }, + player: { + name: 'Player |||| Players', + }, + transcoding: { + name: 'Transcoding |||| Transcodings', + }, }, ra: { auth: { diff --git a/ui/src/i18n/pt.js b/ui/src/i18n/pt.js index c023b2bcc..9ab93df70 100644 --- a/ui/src/i18n/pt.js +++ b/ui/src/i18n/pt.js @@ -92,6 +92,9 @@ export default deepmerge(portugueseMessages, { invalidChars: 'Somente use letras e numeros', passwordDoesNotMatch: 'Senha não confere', }, + page: { + create: 'Criar %{name}', + }, }, menu: { library: 'Biblioteca', diff --git a/ui/src/player/PlayerEdit.js b/ui/src/player/PlayerEdit.js index fbb98bf85..4890f7a85 100644 --- a/ui/src/player/PlayerEdit.js +++ b/ui/src/player/PlayerEdit.js @@ -7,11 +7,14 @@ import { SimpleForm, SelectInput, ReferenceInput, + useTranslate, } from 'react-admin' import { Title } from '../common' const PlayerTitle = ({ record }) => { - return <Title subTitle={`Player ${record ? record.name : ''}`} /> + const translate = useTranslate() + const resourceName = translate('resources.player.name', { smart_count: 1 }) + return <Title subTitle={`${resourceName} ${record ? record.name : ''}`} /> } const PlayerEdit = (props) => ( diff --git a/ui/src/player/PlayerList.js b/ui/src/player/PlayerList.js index 10c72a4a5..ad2b2d283 100644 --- a/ui/src/player/PlayerList.js +++ b/ui/src/player/PlayerList.js @@ -13,7 +13,13 @@ import { SimpleList, Title } from '../common' const PlayerList = (props) => { const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs')) return ( - <List title={<Title subTitle={'Players'} />} exporter={false} {...props}> + <List + title={ + <Title subTitle={'resources.player.name'} args={{ smart_count: 2 }} /> + } + exporter={false} + {...props} + > {isXsmall ? ( <SimpleList primaryText={(r) => r.client} diff --git a/ui/src/song/SongList.js b/ui/src/song/SongList.js index f81d768f4..b7de7f6c2 100644 --- a/ui/src/song/SongList.js +++ b/ui/src/song/SongList.js @@ -36,7 +36,9 @@ const SongList = (props) => { return ( <List {...props} - title={<Title subTitle={'Songs'} />} + title={ + <Title subTitle={'resources.song.name'} args={{ smart_count: 2 }} /> + } sort={{ field: 'title', order: 'ASC' }} exporter={false} bulkActionButtons={<SongBulkActions />} diff --git a/ui/src/transcoding/TranscodingCreate.js b/ui/src/transcoding/TranscodingCreate.js index 64684428b..3f85a87f2 100644 --- a/ui/src/transcoding/TranscodingCreate.js +++ b/ui/src/transcoding/TranscodingCreate.js @@ -5,11 +5,19 @@ import { Create, required, SimpleForm, + useTranslate, } from 'react-admin' import { Title } from '../common' -const TranscodingTitle = ({ record }) => { - return <Title subTitle={`Transcoding ${record ? record.name : ''}`} /> +const TranscodingTitle = () => { + const translate = useTranslate() + const resourceName = translate('resources.transcoding.name', { + smart_count: 1, + }) + const title = translate('ra.page.create', { + name: `${resourceName}`, + }) + return <Title subTitle={title} /> } const TranscodingCreate = (props) => ( diff --git a/ui/src/transcoding/TranscodingEdit.js b/ui/src/transcoding/TranscodingEdit.js index 406fecfe4..9a6c85c9d 100644 --- a/ui/src/transcoding/TranscodingEdit.js +++ b/ui/src/transcoding/TranscodingEdit.js @@ -1,9 +1,20 @@ import React from 'react' -import { TextInput, SelectInput, Edit, required, SimpleForm } from 'react-admin' +import { + TextInput, + SelectInput, + Edit, + required, + SimpleForm, + useTranslate, +} from 'react-admin' import { Title } from '../common' const TranscodingTitle = ({ record }) => { - return <Title subTitle={`Transcoding ${record ? record.name : ''}`} /> + const translate = useTranslate() + const resourceName = translate('resources.transcoding.name', { + smart_count: 1, + }) + return <Title subTitle={`${resourceName} ${record ? record.name : ''}`} /> } const TranscodingEdit = (props) => ( diff --git a/ui/src/transcoding/TranscodingList.js b/ui/src/transcoding/TranscodingList.js index 3cfa754fc..162ad2b0e 100644 --- a/ui/src/transcoding/TranscodingList.js +++ b/ui/src/transcoding/TranscodingList.js @@ -7,7 +7,12 @@ const TranscodingList = (props) => { const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs')) return ( <List - title={<Title subTitle={'Transcodings'} />} + title={ + <Title + subTitle={'resources.transcoding.name'} + args={{ smart_count: 2 }} + /> + } exporter={false} {...props} > diff --git a/ui/src/user/UserCreate.js b/ui/src/user/UserCreate.js index df7cca604..5ccf922a7 100644 --- a/ui/src/user/UserCreate.js +++ b/ui/src/user/UserCreate.js @@ -7,19 +7,27 @@ import { required, email, SimpleForm, + useTranslate, } from 'react-admin' import { Title } from '../common' -const UserCreate = (props) => ( - <Create title={<Title subTitle={'Create User'} />} {...props}> - <SimpleForm redirect="list"> - <TextInput source="userName" validate={[required()]} /> - <TextInput source="name" validate={[required()]} /> - <TextInput source="email" validate={[required(), email()]} /> - <PasswordInput source="password" validate={[required()]} /> - <BooleanInput source="isAdmin" defaultValue={false} /> - </SimpleForm> - </Create> -) +const UserCreate = (props) => { + const translate = useTranslate() + const resourceName = translate('resources.user.name', { smart_count: 1 }) + const title = translate('ra.page.create', { + name: `${resourceName}`, + }) + return ( + <Create title={<Title subTitle={title} />} {...props}> + <SimpleForm redirect="list"> + <TextInput source="userName" validate={[required()]} /> + <TextInput source="name" validate={[required()]} /> + <TextInput source="email" validate={[required(), email()]} /> + <PasswordInput source="password" validate={[required()]} /> + <BooleanInput source="isAdmin" defaultValue={false} /> + </SimpleForm> + </Create> + ) +} export default UserCreate diff --git a/ui/src/user/UserEdit.js b/ui/src/user/UserEdit.js index 68d7bb2c1..207fca86a 100644 --- a/ui/src/user/UserEdit.js +++ b/ui/src/user/UserEdit.js @@ -8,11 +8,14 @@ import { required, email, SimpleForm, + useTranslate, } from 'react-admin' import { Title } from '../common' const UserTitle = ({ record }) => { - return <Title subTitle={`User ${record ? record.name : ''}`} /> + const translate = useTranslate() + const resourceName = translate('resources.user.name', { smart_count: 1 }) + return <Title subTitle={`${resourceName} ${record ? record.name : ''}`} /> } const UserEdit = (props) => ( <Edit title={<UserTitle />} {...props}> diff --git a/ui/src/user/UserList.js b/ui/src/user/UserList.js index e30f074e7..cc1af8c32 100644 --- a/ui/src/user/UserList.js +++ b/ui/src/user/UserList.js @@ -24,7 +24,9 @@ const UserList = (props) => { return ( <List {...props} - title={<Title subTitle={'Users'} />} + title={ + <Title subTitle={'resources.user.name'} args={{ smart_count: 2 }} /> + } sort={{ field: 'userName', order: 'ASC' }} exporter={false} filters={<UserFilter />}