Localize translation config notice

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