feat: optimized for small screens (only)

ui/src/album/AlbumShow.js

@@ -1,91 +1,42 @@
 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 { Show } from 'react-admin'
+import { Title } from '../common'
 import { makeStyles } from '@material-ui/core/styles'
+import { AlbumSongList } from './AlbumSongList'
+import { AlbumDetails } from './AlbumDetails'
 
 const AlbumTitle = ({ record }) => {
-  return <Title subTitle={`Album: ${record ? record.name : ''}`} />
+  return <Title subTitle={record ? record.name : ''} />
 }
 
 const useStyles = makeStyles({
-  container: { minWidth: '35em', padding: '1em' },
+  container: { minWidth: '24em', padding: '1em' },
   rightAlignedCell: { textAlign: 'right' },
-  boldCell: { fontWeight: 'bold' }
+  boldCell: { fontWeight: 'bold' },
+  albumCover: {
+    display: 'inline-block',
+    height: '8em',
+    width: '8em'
+  },
+  albumDetails: {
+    display: 'inline-block',
+    verticalAlign: 'top',
+    width: '14em'
+  },
+  albumTitle: {
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis'
+  }
 })
 
-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) => {
+  const classes = useStyles()
   return (
     <>
-      <AlbumDetail {...props} />
+      <AlbumDetails classes={classes} {...props} />
       <Show title={<AlbumTitle />} {...props}>
-        <AlbumSongs {...props} />
+        <AlbumSongList {...props} />
       </Show>
     </>
   )