From 716de24f1e9bd92be956b72d6b744e3478aea14d Mon Sep 17 00:00:00 2001 From: Deluan Date: Wed, 29 Apr 2020 11:58:42 -0400 Subject: [PATCH] Localize translation config notice --- ui/src/i18n/en.js | 11 ++++ ui/src/transcoding/TranscodingEdit.js | 81 +++++++++++---------------- ui/src/transcoding/TranscodingNote.js | 33 +++++++++++ ui/src/transcoding/TranscodingShow.js | 47 ++++++---------- 4 files changed, 95 insertions(+), 77 deletions(-) create mode 100644 ui/src/transcoding/TranscodingNote.js diff --git a/ui/src/i18n/en.js b/ui/src/i18n/en.js index 88873e038..62b092494 100644 --- a/ui/src/i18n/en.js +++ b/ui/src/i18n/en.js @@ -60,6 +60,17 @@ export default deepmerge(englishMessages, { passwordDoesNotMatch: 'Password does not match', }, }, + message: { + note: 'NOTE', + transcodingDisabled: + 'Changing the transcoding configuration through the web interface is disabled for security ' + + 'reasons. If you would like to change (edit or add) transcoding options, restart the server with ' + + 'the %{config} configuration option.', + transcodingEnabled: + 'Navidrome is currently running with %{config}, making it possible to run system ' + + 'commands from the transcoding settings using the web interface. We recommend to disable it for security reasons ' + + 'and only enable it when configuring Transcoding options.', + }, menu: { library: 'Library', settings: 'Settings', diff --git a/ui/src/transcoding/TranscodingEdit.js b/ui/src/transcoding/TranscodingEdit.js index f17e5c315..1a6debbac 100644 --- a/ui/src/transcoding/TranscodingEdit.js +++ b/ui/src/transcoding/TranscodingEdit.js @@ -1,14 +1,14 @@ import React from 'react' import { - TextInput, - SelectInput, Edit, required, + SelectInput, SimpleForm, + TextInput, useTranslate, } from 'react-admin' -import { Card, CardContent, Typography, Box } from '@material-ui/core' import { Title } from '../common' +import { TranscodingNote } from './TranscodingNote' const TranscodingTitle = ({ record }) => { const translate = useTranslate() @@ -18,49 +18,36 @@ const TranscodingTitle = ({ record }) => { return } -const TranscodingEdit = (props) => ( - <> - <Card> - <CardContent> - <Typography> - <Box fontWeight="fontWeightBold" component={'span'}> - NOTE: - </Box>{' '} - Navidrome is currently running with the{' '} - <Box fontFamily="Monospace" component={'span'}> - ND_ENABLETRANSCODINGCONFIG=true - </Box> - , making it possible to run system commands from the transcoding - settings using the web interface. We recommend to disable it for - security reasons and only enable it when configuring Transcoding - options. - </Typography> - </CardContent> - </Card> - <Edit title={<TranscodingTitle />} {...props}> - <SimpleForm> - <TextInput source="name" validate={[required()]} /> - <TextInput source="targetFormat" validate={[required()]} /> - <SelectInput - source="defaultBitRate" - choices={[ - { id: 32, name: '32' }, - { id: 48, name: '48' }, - { id: 64, name: '64' }, - { id: 80, name: '80' }, - { id: 96, name: '96' }, - { id: 112, name: '112' }, - { id: 128, name: '128' }, - { id: 160, name: '160' }, - { id: 192, name: '192' }, - { id: 256, name: '256' }, - { id: 320, name: '320' }, - ]} - /> - <TextInput source="command" fullWidth validate={[required()]} /> - </SimpleForm> - </Edit> - </> -) +const TranscodingEdit = (props) => { + return ( + <> + <TranscodingNote message={'message.transcodingEnabled'} /> + + <Edit title={<TranscodingTitle />} {...props}> + <SimpleForm> + <TextInput source="name" validate={[required()]} /> + <TextInput source="targetFormat" validate={[required()]} /> + <SelectInput + source="defaultBitRate" + choices={[ + { id: 32, name: '32' }, + { id: 48, name: '48' }, + { id: 64, name: '64' }, + { id: 80, name: '80' }, + { id: 96, name: '96' }, + { id: 112, name: '112' }, + { id: 128, name: '128' }, + { id: 160, name: '160' }, + { id: 192, name: '192' }, + { id: 256, name: '256' }, + { id: 320, name: '320' }, + ]} + /> + <TextInput source="command" fullWidth validate={[required()]} /> + </SimpleForm> + </Edit> + </> + ) +} export default TranscodingEdit diff --git a/ui/src/transcoding/TranscodingNote.js b/ui/src/transcoding/TranscodingNote.js new file mode 100644 index 000000000..a70776e02 --- /dev/null +++ b/ui/src/transcoding/TranscodingNote.js @@ -0,0 +1,33 @@ +import React from 'react' +import { Card, CardContent, Typography, Box } from '@material-ui/core' +import { useTranslate } from 'react-admin' + +export const Interpolate = ({ message, field, children }) => { + const split = message.split(`%{${field}}`) + return ( + <span> + {split[0]} + {children} + {split[1]} + </span> + ) +} +export const TranscodingNote = ({ message }) => { + const translate = useTranslate() + return ( + <Card> + <CardContent> + <Typography> + <Box fontWeight="fontWeightBold" component={'span'}> + {translate('message.note')}: + </Box>{' '} + <Interpolate message={translate(message)} field={'config'}> + <Box fontFamily="Monospace" component={'span'}> + ND_ENABLETRANSCODINGCONFIG=true + </Box> + </Interpolate> + </Typography> + </CardContent> + </Card> + ) +} diff --git a/ui/src/transcoding/TranscodingShow.js b/ui/src/transcoding/TranscodingShow.js index 932aec42b..e132afee5 100644 --- a/ui/src/transcoding/TranscodingShow.js +++ b/ui/src/transcoding/TranscodingShow.js @@ -1,40 +1,27 @@ import React from 'react' -import { TextField, Show, SimpleShowLayout } from 'react-admin' -import { Card, CardContent, Typography, Box } from '@material-ui/core' +import { Show, SimpleShowLayout, TextField } from 'react-admin' import { Title } from '../common' +import { TranscodingNote } from './TranscodingNote' const TranscodingTitle = ({ record }) => { return <Title subTitle={`Transcoding ${record ? record.name : ''}`} /> } -const TranscodingShow = (props) => ( - <> - <Card> - <CardContent> - <Typography> - <Box fontWeight="fontWeightBold" component={'span'}> - NOTE: - </Box>{' '} - Changing the transcoding configuration through the web interface is - disabled for security reasons. If you would like to change (edit or - add) transcoding options, restart the server with the{' '} - <Box fontFamily="Monospace" component={'span'}> - ND_ENABLETRANSCODINGCONFIG=true - </Box>{' '} - configuration option. - </Typography> - </CardContent> - </Card> +const TranscodingShow = (props) => { + return ( + <> + <TranscodingNote message={'message.transcodingDisabled'} /> - <Show title={<TranscodingTitle />} {...props}> - <SimpleShowLayout> - <TextField source="name" /> - <TextField source="targetFormat" /> - <TextField source="defaultBitRate" /> - <TextField source="command" /> - </SimpleShowLayout> - </Show> - </> -) + <Show title={<TranscodingTitle />} {...props}> + <SimpleShowLayout> + <TextField source="name" /> + <TextField source="targetFormat" /> + <TextField source="defaultBitRate" /> + <TextField source="command" /> + </SimpleShowLayout> + </Show> + </> + ) +} export default TranscodingShow