feat: new album view (initial implementation)

ui/src/album/AlbumList.js

@@ -34,13 +34,13 @@ const AlbumDetails = (props) => {
   )
 }
 
-const albumRowClick = (id, basePath, record) => {
-  const filter = { album: record.name, album_id: id }
-  if (!record.compilation) {
-    filter.artist = record.artist
-  }
-  return `/song?filter=${JSON.stringify(filter)}&order=ASC&sort=trackNumber`
-}
+// const albumRowClick = (id, basePath, record) => {
+//   const filter = { album: record.name, album_id: id }
+//   if (!record.compilation) {
+//     filter.artist = record.artist
+//   }
+//   return `/song?filter=${JSON.stringify(filter)}&order=ASC&sort=trackNumber`
+// }
 
 const AlbumList = (props) => (
   <List
@@ -53,7 +53,7 @@ const AlbumList = (props) => (
     perPage={15}
     pagination={<Pagination />}
   >
-    <Datagrid expand={<AlbumDetails />} rowClick={albumRowClick}>
+    <Datagrid expand={<AlbumDetails />} rowClick={'show'}>
       <TextField source="name" />
       <TextField source="artist" />
       <NumberField source="songCount" />

ui/src/album/AlbumShow.js

@@ -0,0 +1,94 @@
+import React from 'react'
+import { Show, SimpleList, useGetList, useGetOne, Loading } from 'react-admin'
+import { PlayButton, Title } from '../common'
+import { addTrack } from '../player'
+import { DurationField } from '../common'
+import AddIcon from '@material-ui/icons/Add'
+import { Typography, Paper } from '@material-ui/core'
+import { makeStyles } from '@material-ui/core/styles'
+
+const AlbumTitle = ({ record }) => {
+  return <Title subTitle={`Album: ${record ? record.name : ''}`} />
+}
+
+const useStyles = makeStyles({
+  container: { minWidth: '35em', padding: '1em' },
+  rightAlignedCell: { textAlign: 'right' },
+  boldCell: { fontWeight: 'bold' }
+})
+
+const AlbumDetail = (props) => {
+  const classes = useStyles()
+  const { data, loading, error } = useGetOne('album', props.id)
+
+  if (loading) {
+    return <Loading />
+  }
+
+  if (error) {
+    return <p>ERROR: {error}</p>
+  }
+
+  let genreDate = []
+  if (data.genre) {
+    genreDate.push(data.genre)
+  }
+  if (data.year) {
+    genreDate.push(data.year)
+  }
+
+  return (
+    <Paper className={classes.container} elevation={2}>
+      <Typography variant="h5">{data.name}</Typography>
+      <Typography variant="h6">{data.albumArtist || data.artist}</Typography>
+      <Typography variant="h7">{genreDate.join(' - ')}</Typography>
+      <Typography variant="body2"></Typography>
+    </Paper>
+  )
+}
+
+const AlbumSongs = (props) => {
+  const { record } = props
+  const { data, total, loading, error } = useGetList(
+    'song',
+    { page: 0, perPage: 100 },
+    { field: 'album', order: 'ASC' },
+    { album_id: record.id }
+  )
+  if (error) {
+    return <p>ERROR: {error}</p>
+  }
+  return (
+    <SimpleList
+      data={data}
+      ids={Object.keys(data)}
+      loading={loading}
+      total={total}
+      primaryText={(r) => (
+        <>
+          <PlayButton record={r} />
+          <PlayButton record={r} action={addTrack} icon={<AddIcon />} />
+          {r.trackNumber + '. ' + r.title}
+        </>
+      )}
+      secondaryText={(r) =>
+        r.albumArtist && r.artist !== r.albumArtist ? r.artist : ''
+      }
+      tertiaryText={(r) => <DurationField record={r} source={'duration'} />}
+      linkType={false}
+    />
+  )
+}
+
+const AlbumShow = (props) => {
+  return (
+    <>
+      <AlbumDetail {...props} />
+      <Show title={<AlbumTitle />} {...props}>
+        <AlbumSongs {...props} />
+      </Show>
+    </>
+  )
+}
+
+export default AlbumShow

ui/src/album/index.js

@@ -1,7 +1,9 @@
 import AlbumIcon from '@material-ui/icons/Album'
 import AlbumList from './AlbumList'
+import AlbumShow from './AlbumShow'
 
 export default {
   list: AlbumList,
+  show: AlbumShow,
   icon: AlbumIcon
 }

ui/src/common/index.js

@@ -2,5 +2,6 @@ import Title from './Title'
 import DurationField from './DurationField'
 import BitrateField from './BitrateField'
 import Pagination from './Pagination'
+import PlayButton from './PlayButton'
 
-export { Title, DurationField, BitrateField, Pagination }
+export { Title, DurationField, BitrateField, Pagination, PlayButton }

ui/src/song/AddToQueueButton.js

@@ -26,18 +26,14 @@ const AddToQueueButton = ({ selectedIds }) => {
   }
 
   return (
-    <Button
-      color="secondary"
-      label={
-        <Tooltip
-          title={translate('resources.song.bulk.addToQueue')}
-          placement="right"
-        >
-          <AddToQueueIcon />
-        </Tooltip>
-      }
-      onClick={addToQueue}
-    />
+    <Button color="secondary" onClick={addToQueue}>
+      <Tooltip
+        title={translate('resources.song.bulk.addToQueue')}
+        placement="right"
+      >
+        <AddToQueueIcon />
+      </Tooltip>
+    </Button>
   )
 }
 

ui/src/song/SongList.js

@@ -16,7 +16,7 @@ import {
 import { useMediaQuery } from '@material-ui/core'
 import { BitrateField, DurationField, Pagination, Title } from '../common'
 import AddToQueueButton from './AddToQueueButton'
-import PlayButton from './PlayButton'
+import { PlayButton } from '../common'
 import { useDispatch } from 'react-redux'
 import { setTrack, addTrack } from '../player'
 import AddIcon from '@material-ui/icons/Add'