Add config option to enable/disable Transcoding configuration

ui/src/transcoding/TranscodingEdit.js

@@ -7,6 +7,7 @@ import {
   SimpleForm,
   useTranslate,
 } from 'react-admin'
+import { Card, CardContent, Typography, Box } from '@material-ui/core'
 import { Title } from '../common'
 
 const TranscodingTitle = ({ record }) => {
@@ -18,29 +19,48 @@ const TranscodingTitle = ({ record }) => {
 }
 
 const TranscodingEdit = (props) => (
-  <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>
+  <>
+    <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>
+  </>
 )
 
 export default TranscodingEdit

ui/src/transcoding/TranscodingList.js

@@ -2,6 +2,7 @@ import React from 'react'
 import { Datagrid, List, TextField } from 'react-admin'
 import { useMediaQuery } from '@material-ui/core'
 import { SimpleList, Title } from '../common'
+import config from '../config'
 
 const TranscodingList = (props) => {
   const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
@@ -23,7 +24,7 @@ const TranscodingList = (props) => {
           tertiaryText={(r) => r.defaultBitRate}
         />
       ) : (
-        <Datagrid rowClick="edit">
+        <Datagrid rowClick={config.enableTranscodingConfig ? 'edit' : 'show'}>
           <TextField source="name" />
           <TextField source="targetFormat" />
           <TextField source="defaultBitRate" />

ui/src/transcoding/TranscodingShow.js

@@ -0,0 +1,40 @@
+import React from 'react'
+import { TextField, Show, SimpleShowLayout } from 'react-admin'
+import { Card, CardContent, Typography, Box } from '@material-ui/core'
+import { Title } from '../common'
+
+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>
+
+    <Show title={<TranscodingTitle />} {...props}>
+      <SimpleShowLayout>
+        <TextField source="name" />
+        <TextField source="targetFormat" />
+        <TextField source="defaultBitRate" />
+        <TextField source="command" />
+      </SimpleShowLayout>
+    </Show>
+  </>
+)
+
+export default TranscodingShow

ui/src/transcoding/index.js

@@ -2,10 +2,13 @@ import TransformIcon from '@material-ui/icons/Transform'
 import TranscodingList from './TranscodingList'
 import TranscodingEdit from './TranscodingEdit'
 import TranscodingCreate from './TranscodingCreate'
+import TranscodingShow from './TranscodingShow'
+import config from '../config'
 
 export default {
   list: TranscodingList,
-  edit: TranscodingEdit,
-  create: TranscodingCreate,
+  edit: config.enableTranscodingConfig && TranscodingEdit,
+  create: config.enableTranscodingConfig && TranscodingCreate,
+  show: !config.enableTranscodingConfig && TranscodingShow,
   icon: TransformIcon,
 }