Initial support for song browsing from UI

ui/src/song/SongList.js

@@ -0,0 +1,59 @@
+import React from 'react'
+import {
+  BooleanField,
+  Datagrid,
+  DateField,
+  Filter,
+  List,
+  NumberField,
+  SearchInput,
+  Show,
+  SimpleShowLayout,
+  TextField
+} from 'react-admin'
+import { BitrateField, DurationField, Title } from '../common'
+
+const SongFilter = (props) => (
+  <Filter {...props}>
+    <SearchInput source="title" alwaysOn />
+  </Filter>
+)
+
+const SongDetails = (props) => {
+  return (
+    <Show {...props} title=" ">
+      <SimpleShowLayout>
+        <TextField source="path" />
+        <TextField label="Album Artist" source="albumArtist" />
+        <TextField source="genre" />
+        <BooleanField source="compilation" />
+        <BitrateField source="bitRate" />
+        <DateField source="updatedAt" showTime />
+      </SimpleShowLayout>
+    </Show>
+  )
+}
+
+const SongList = (props) => (
+  <List
+    {...props}
+    title={<Title subTitle={'Songs'} />}
+    sort={{ field: 'title', order: 'ASC' }}
+    exporter={false}
+    bulkActionButtons={false}
+    filters={<SongFilter />}
+    perPage={15}
+  >
+    <Datagrid rowClick="expand" expand={<SongDetails />}>
+      <TextField source="title" />
+      <TextField source="album" />
+      <TextField source="artist" />
+      <NumberField label="Track #" source="trackNumber" />
+      <NumberField label="Disc #" source="discNumber" />
+      <TextField source="year" />
+      <DurationField label="Time" source="duration" />
+    </Datagrid>
+  </List>
+)
+
+export default SongList

ui/src/song/index.js

@@ -0,0 +1,7 @@
+import MusicNote from '@material-ui/icons/MusicNote'
+import SongList from './SongList'
+
+export default {
+  list: SongList,
+  icon: MusicNote
+}