Localize translation config notice

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) => (
-  <>
-    <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

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 { 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