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,25 +18,11 @@ const TranscodingTitle = ({ record }) => {
   return <Title subTitle={`${resourceName} ${record ? record.name : ''}`} />
 }
 
-const TranscodingEdit = (props) => (
+const TranscodingEdit = (props) => {
+  return (
     <>
-    <Card>
+      <TranscodingNote message={'message.transcodingEnabled'} />
-      <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()]} />
@@ -61,6 +47,7 @@ const TranscodingEdit = (props) => (
         </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,30 +1,16 @@
 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>
+      <TranscodingNote message={'message.transcodingDisabled'} />
-      <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>
 
       <Show title={<TranscodingTitle />} {...props}>
         <SimpleShowLayout>
@@ -35,6 +21,7 @@ const TranscodingShow = (props) => (
         </SimpleShowLayout>
       </Show>
     </>
-)
+  )
+}
 
 export default TranscodingShow