Localize translation config notice

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',

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 <Title subTitle={`${resourceName} ${record ? record.name : ''}`} />
 }
 
-const TranscodingEdit = (props) => (
+const TranscodingEdit = (props) => {
-  <>
+  return (
-    <Card>
+    <>
-      <CardContent>
+      <TranscodingNote message={'message.transcodingEnabled'} />
-        <Typography>
+
-          <Box fontWeight="fontWeightBold" component={'span'}>
+      <Edit title={<TranscodingTitle />} {...props}>
-            NOTE:
+        <SimpleForm>
-          </Box>{' '}
+          <TextInput source="name" validate={[required()]} />
-          Navidrome is currently running with the{' '}
+          <TextInput source="targetFormat" validate={[required()]} />
-          <Box fontFamily="Monospace" component={'span'}>
+          <SelectInput
-            ND_ENABLETRANSCODINGCONFIG=true
+            source="defaultBitRate"
-          </Box>
+            choices={[
-          , making it possible to run system commands from the transcoding
+              { id: 32, name: '32' },
-          settings using the web interface. We recommend to disable it for
+              { id: 48, name: '48' },
-          security reasons and only enable it when configuring Transcoding
+              { id: 64, name: '64' },
-          options.
+              { id: 80, name: '80' },
-        </Typography>
+              { id: 96, name: '96' },
-      </CardContent>
+              { id: 112, name: '112' },
-    </Card>
+              { id: 128, name: '128' },
-    <Edit title={<TranscodingTitle />} {...props}>
+              { id: 160, name: '160' },
-      <SimpleForm>
+              { id: 192, name: '192' },
-        <TextInput source="name" validate={[required()]} />
+              { id: 256, name: '256' },
-        <TextInput source="targetFormat" validate={[required()]} />
+              { id: 320, name: '320' },
-        <SelectInput
+            ]}
-          source="defaultBitRate"
+          />
-          choices={[
+          <TextInput source="command" fullWidth validate={[required()]} />
-            { id: 32, name: '32' },
+        </SimpleForm>
-            { id: 48, name: '48' },
+      </Edit>
-            { 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

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>
+  )
+}

ui/src/transcoding/TranscodingShow.js

@@ -1,40 +1,27 @@
 import React from 'react'
-import { TextField, Show, SimpleShowLayout } from 'react-admin'
+import { Show, SimpleShowLayout, TextField } from 'react-admin'
-import { Card, CardContent, Typography, Box } from '@material-ui/core'
 import { Title } from '../common'
+import { TranscodingNote } from './TranscodingNote'
 
 const TranscodingTitle = ({ record }) => {
   return <Title subTitle={`Transcoding ${record ? record.name : ''}`} />
 }
 
-const TranscodingShow = (props) => (
+const TranscodingShow = (props) => {
-  <>
+  return (
-    <Card>
+    <>
-      <CardContent>
+      <TranscodingNote message={'message.transcodingDisabled'} />
-        <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>
 
-    <Show title={<TranscodingTitle />} {...props}>
+      <Show title={<TranscodingTitle />} {...props}>
-      <SimpleShowLayout>
+        <SimpleShowLayout>
-        <TextField source="name" />
+          <TextField source="name" />
-        <TextField source="targetFormat" />
+          <TextField source="targetFormat" />
-        <TextField source="defaultBitRate" />
+          <TextField source="defaultBitRate" />
-        <TextField source="command" />
+          <TextField source="command" />
-      </SimpleShowLayout>
+        </SimpleShowLayout>
-    </Show>
+      </Show>
-  </>
+    </>
-)
+  )
+}
 
 export default TranscodingShow