feat: transcoding and player datastores and configuration

ui/src/App.js

@@ -5,6 +5,7 @@ import authProvider from './authProvider'
 import polyglotI18nProvider from 'ra-i18n-polyglot'
 import messages from './i18n'
 import { DarkTheme, Layout, Login } from './layout'
+import transcoding from './transcoding'
 import user from './user'
 import song from './song'
 import album from './album'
@@ -44,7 +45,16 @@ const App = () => {
         <Resource name="album" {...album} options={{ subMenu: 'library' }} />,
         <Resource name="song" {...song} options={{ subMenu: 'library' }} />,
         <Resource name="albumSong" />,
-        permissions === 'admin' ? <Resource name="user" {...user} /> : null,
+        permissions === 'admin' ? (
+          <Resource name="user" {...user} options={{ subMenu: 'settings' }} />
+        ) : null,
+        permissions === 'admin' ? (
+          <Resource
+            name="transcoding"
+            {...transcoding}
+            options={{ subMenu: 'settings' }}
+          />
+        ) : null,
         <Player />
       ]}
     </Admin>

ui/src/i18n/en.js

@@ -40,7 +40,8 @@ export default deepmerge(englishMessages, {
     }
   },
   menu: {
-    library: 'Library'
+    library: 'Library',
+    settings: 'Settings'
   },
   player: {
     panelTitle: 'Play Queue',

ui/src/layout/Menu.js

@@ -4,6 +4,7 @@ import { useMediaQuery } from '@material-ui/core'
 import { useTranslate, MenuItemLink, getResources } from 'react-admin'
 import { withRouter } from 'react-router-dom'
 import LibraryMusicIcon from '@material-ui/icons/LibraryMusic'
+import SettingsIcon from '@material-ui/icons/Settings'
 import ViewListIcon from '@material-ui/icons/ViewList'
 import SubMenu from './SubMenu'
 import inflection from 'inflection'
@@ -27,7 +28,8 @@ const Menu = ({ onMenuClick, dense, logout }) => {
   const resources = useSelector(getResources)
 
   const [state, setState] = useState({
-    menuLibrary: true
+    menuLibrary: true,
+    menuSettings: false
   })
 
   const handleToggle = (menu) => {
@@ -63,6 +65,16 @@ const Menu = ({ onMenuClick, dense, logout }) => {
       >
         {resources.filter(subItems('library')).map(renderMenuItemLink)}
       </SubMenu>
+      <SubMenu
+        handleToggle={() => handleToggle('menuSettings')}
+        isOpen={state.menuSettings}
+        sidebarIsOpen={open}
+        name="menu.settings"
+        icon={<SettingsIcon />}
+        dense={dense}
+      >
+        {resources.filter(subItems('settings')).map(renderMenuItemLink)}
+      </SubMenu>
       {resources.filter(subItems(undefined)).map(renderMenuItemLink)}
       {isXsmall && logout}
     </div>

ui/src/transcoding/TranscodingCreate.js

@@ -0,0 +1,54 @@
+import React from 'react'
+import {
+  TextInput,
+  SelectInput,
+  Create,
+  required,
+  SimpleForm
+} from 'react-admin'
+import { Title } from '../common'
+
+const TranscodingTitle = ({ record }) => {
+  return <Title subTitle={`Transcoding ${record ? record.name : ''}`} />
+}
+
+const TranscodingCreate = (props) => (
+  <Create 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' }
+        ]}
+        initialValue={192}
+      />
+      <TextInput
+        source="command"
+        fullWidth
+        validate={[required()]}
+        helperText={
+          <span>
+            Substitutions: <br />
+            %s: File path <br />
+            %b: BitRate (in kbps)
+            <br />
+          </span>
+        }
+      />
+    </SimpleForm>
+  </Create>
+)
+
+export default TranscodingCreate

ui/src/transcoding/TranscodingEdit.js

@@ -0,0 +1,35 @@
+import React from 'react'
+import { TextInput, SelectInput, Edit, required, SimpleForm } from 'react-admin'
+import { Title } from '../common'
+
+const TranscodingTitle = ({ record }) => {
+  return <Title subTitle={`Transcoding ${record ? record.name : ''}`} />
+}
+
+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>
+)
+
+export default TranscodingEdit

ui/src/transcoding/TranscodingList.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import { Datagrid, List, TextField } from 'react-admin'
+import { Title } from '../common'
+
+const TranscodingList = (props) => (
+  <List title={<Title subTitle={'Transcodings'} />} exporter={false} {...props}>
+    <Datagrid rowClick="edit">
+      <TextField source="name" />
+      <TextField source="targetFormat" />
+      <TextField source="defaultBitRate" />
+      <TextField source="command" />
+    </Datagrid>
+  </List>
+)
+
+export default TranscodingList

ui/src/transcoding/index.js

@@ -0,0 +1,11 @@
+import TransformIcon from '@material-ui/icons/Transform'
+import TranscodingList from './TranscodingList'
+import TranscodingEdit from './TranscodingEdit'
+import TranscodingCreate from './TranscodingCreate'
+
+export default {
+  list: TranscodingList,
+  edit: TranscodingEdit,
+  create: TranscodingCreate,
+  icon: TransformIcon
+}