fix(ui): allow setting a transcoding Default Bit Rate of 0

The Default Bit Rate dropdown on the Transcoding create/edit forms was fed
BITRATE_CHOICES, which starts at 32. There was no way to pick 0, and the
SelectInput was not resettable, so an admin could neither create nor restore a
transcoding with no default bit rate, such as the default FLAC one (seeded with
0 in consts.DefaultTranscodings). Editing that row also rendered a blank
dropdown, since its stored value matched no choice.

Adds TRANSCODING_BITRATE_CHOICES, which prepends a 0 entry labelled 'None' to
the shared list. The forms use it as SelectInput choices, and the list and
read-only show view render it through SelectField, so all four screens resolve
the label from the same array and cannot drift. The shared BITRATE_CHOICES is
left untouched, because 0 is not a meaningful option for the player Max. Bit
Rate or the share dialog.

Reported in discussion #6107, where a user had deleted the default
transcodings and could not recreate the FLAC one.

ui/src/consts.js

@@ -31,3 +31,9 @@ export const DEFAULT_SHARE_BITRATE = 128
 export const BITRATE_CHOICES = [
   32, 48, 64, 80, 96, 112, 128, 160, 192, 256, 320,
 ].map((b) => ({ id: b, name: b.toString() }))
+
+// 0 is a valid stored value ("no default bit rate") that BITRATE_CHOICES cannot express.
+export const TRANSCODING_BITRATE_CHOICES = [
+  { id: 0, name: 'resources.transcoding.choices.noDefaultBitRate' },
+  ...BITRATE_CHOICES,
+]

ui/src/i18n/en.json

@@ -200,6 +200,9 @@
         "targetFormat": "Target Format",
         "defaultBitRate": "Default Bit Rate",
         "command": "Command"
+      },
+      "choices": {
+        "noDefaultBitRate": "None"
       }
     },
     "playlist": {

ui/src/transcoding/TranscodingCreate.jsx

@@ -8,7 +8,7 @@ import {
   useTranslate,
 } from 'react-admin'
 import { Title } from '../common'
-import { BITRATE_CHOICES } from '../consts'
+import { TRANSCODING_BITRATE_CHOICES } from '../consts'
 
 const TranscodingTitle = () => {
   const translate = useTranslate()
@@ -28,7 +28,7 @@ const TranscodingCreate = (props) => (
       <TextInput source="targetFormat" validate={[required()]} />
       <SelectInput
         source="defaultBitRate"
-        choices={BITRATE_CHOICES}
+        choices={TRANSCODING_BITRATE_CHOICES}
         defaultValue={192}
       />
       <TextInput

ui/src/transcoding/TranscodingEdit.jsx

@@ -9,7 +9,7 @@ import {
 } from 'react-admin'
 import { Title } from '../common'
 import { TranscodingNote } from './TranscodingNote'
-import { BITRATE_CHOICES } from '../consts'
+import { TRANSCODING_BITRATE_CHOICES } from '../consts'
 
 const TranscodingTitle = ({ record }) => {
   const translate = useTranslate()
@@ -28,7 +28,10 @@ const TranscodingEdit = (props) => {
         <SimpleForm variant={'outlined'}>
           <TextInput source="name" validate={[required()]} />
           <TextInput source="targetFormat" validate={[required()]} />
-          <SelectInput source="defaultBitRate" choices={BITRATE_CHOICES} />
+          <SelectInput
+            source="defaultBitRate"
+            choices={TRANSCODING_BITRATE_CHOICES}
+          />
           <TextInput source="command" fullWidth validate={[required()]} />
         </SimpleForm>
       </Edit>

ui/src/transcoding/TranscodingList.jsx

@@ -1,7 +1,8 @@
 import React from 'react'
-import { Datagrid, TextField } from 'react-admin'
+import { Datagrid, SelectField, TextField } from 'react-admin'
 import { useMediaQuery } from '@material-ui/core'
 import { SimpleList, List } from '../common'
+import { TRANSCODING_BITRATE_CHOICES } from '../consts'
 import config from '../config'
 
 const TranscodingList = (props) => {
@@ -16,13 +17,22 @@ const TranscodingList = (props) => {
         <SimpleList
           primaryText={(r) => r.name}
           secondaryText={(r) => `format: ${r.targetFormat}`}
-          tertiaryText={(r) => r.defaultBitRate}
+          tertiaryText={(r) => (
+            <SelectField
+              record={r}
+              source="defaultBitRate"
+              choices={TRANSCODING_BITRATE_CHOICES}
+            />
+          )}
         />
       ) : (
         <Datagrid rowClick={config.enableTranscodingConfig ? 'edit' : 'show'}>
           <TextField source="name" />
           <TextField source="targetFormat" />
-          <TextField source="defaultBitRate" />
+          <SelectField
+            source="defaultBitRate"
+            choices={TRANSCODING_BITRATE_CHOICES}
+          />
           <TextField source="command" />
         </Datagrid>
       )}

ui/src/transcoding/TranscodingShow.jsx

@@ -1,7 +1,8 @@
 import React from 'react'
-import { Show, SimpleShowLayout, TextField } from 'react-admin'
+import { SelectField, Show, SimpleShowLayout, TextField } from 'react-admin'
 import { Title } from '../common'
 import { TranscodingNote } from './TranscodingNote'
+import { TRANSCODING_BITRATE_CHOICES } from '../consts'
 
 const TranscodingTitle = ({ record }) => {
   return <Title subTitle={`Transcoding ${record ? record.name : ''}`} />
@@ -16,7 +17,10 @@ const TranscodingShow = (props) => {
         <SimpleShowLayout>
           <TextField source="name" />
           <TextField source="targetFormat" />
-          <TextField source="defaultBitRate" />
+          <SelectField
+            source="defaultBitRate"
+            choices={TRANSCODING_BITRATE_CHOICES}
+          />
           <TextField source="command" />
         </SimpleShowLayout>
       </Show>