Add Genres as "Chips" in Album details and Song details

ui/src/album/AlbumDetails.js

@@ -8,7 +8,13 @@ import {
   Typography,
   useMediaQuery,
 } from '@material-ui/core'
-import { useTranslate } from 'react-admin'
+import {
+  useRecordContext,
+  useTranslate,
+  ArrayField,
+  SingleFieldList,
+  ChipField,
+} from 'react-admin'
 import clsx from 'clsx'
 import Lightbox from 'react-image-lightbox'
 import 'react-image-lightbox/style.css'
@@ -22,6 +28,7 @@ import {
   RatingField,
 } from '../common'
 import config from '../config'
+import { intersperse } from '../utils'
 
 const useStyles = makeStyles(
   (theme) => ({
@@ -85,6 +92,9 @@ const useStyles = makeStyles(
     recordName: {},
     recordArtist: {},
     recordMeta: {},
+    genreList: {
+      marginTop: theme.spacing(1),
+    },
   }),
   {
     name: 'NDAlbumDetails',
@@ -126,23 +136,49 @@ const AlbumComment = ({ record }) => {
   )
 }
 
-const AlbumDetails = ({ record }) => {
+const GenreList = () => {
+  const classes = useStyles()
+  return (
+    <ArrayField className={classes.genreList} source={'genres'}>
+      <SingleFieldList linkType={false}>
+        <ChipField source="name" />
+      </SingleFieldList>
+    </ArrayField>
+  )
+}
+
+const Details = (props) => {
+  const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
+  const translate = useTranslate()
+  const record = useRecordContext(props)
+  let details = []
+  const addDetail = (obj) => {
+    const id = details.length
+    details.push(<span key={`detail-${record.id}-${id}`}>{obj}</span>)
+  }
+
+  const year = formatRange(record, 'year')
+  year && addDetail(<>{year}</>)
+  addDetail(
+    <>
+      {record.songCount +
+        ' ' +
+        translate('resources.song.name', {
+          smart_count: record.songCount,
+        })}
+    </>
+  )
+  !isXsmall && addDetail(<DurationField source={'duration'} />)
+  !isXsmall && addDetail(<SizeField source="size" />)
+
+  return <>{intersperse(details, ' · ')}</>
+}
+
+const AlbumDetails = (props) => {
+  const record = useRecordContext(props)
   const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('lg'))
   const classes = useStyles()
   const [isLightboxOpen, setLightboxOpen] = React.useState(false)
-  const translate = useTranslate()
-
-  const genreYear = (record) => {
-    let genreDateLine = []
-    if (record.genre) {
-      genreDateLine.push(record.genre)
-    }
-    const year = formatRange(record, 'year')
-    if (year) {
-      genreDateLine.push(year)
-    }
-    return genreDateLine.join(' · ')
-  }
 
   const imageUrl = subsonic.getCoverArtUrl(record, 300)
   const fullImageUrl = subsonic.getCoverArtUrl(record)
@@ -188,16 +224,7 @@ const AlbumDetails = ({ record }) => {
               <ArtistLinkField record={record} />
             </Typography>
             <Typography component="p" className={classes.recordMeta}>
-              {genreYear(record)}
+              <Details />
-            </Typography>
-            <Typography component="p" className={classes.recordMeta}>
-              {record.songCount}{' '}
-              {translate('resources.song.name', {
-                smart_count: record.songCount,
-              })}
-              {' · '} <DurationField record={record} source={'duration'} />{' '}
-              {' · '}
-              <SizeField record={record} source="size" />
             </Typography>
             {config.enableStarRating && (
               <div>
@@ -208,6 +235,7 @@ const AlbumDetails = ({ record }) => {
                 />
               </div>
             )}
+            <GenreList />
             {isDesktop && record['comment'] && <AlbumComment record={record} />}
           </CardContent>
         </div>

ui/src/album/AlbumTableView.js

@@ -1,5 +1,4 @@
 import React, { useMemo } from 'react'
-import Paper from '@material-ui/core/Paper'
 import Table from '@material-ui/core/Table'
 import TableBody from '@material-ui/core/TableBody'
 import inflection from 'inflection'
@@ -7,12 +6,15 @@ import TableCell from '@material-ui/core/TableCell'
 import TableContainer from '@material-ui/core/TableContainer'
 import TableRow from '@material-ui/core/TableRow'
 import {
+  ArrayField,
   BooleanField,
+  ChipField,
   Datagrid,
   DateField,
   NumberField,
-  Show,
+  SingleFieldList,
   TextField,
+  useRecordContext,
   useTranslate,
 } from 'react-admin'
 import { useMediaQuery } from '@material-ui/core'
@@ -60,20 +62,28 @@ const useStyles = makeStyles({
 const AlbumDetails = (props) => {
   const classes = useStyles()
   const translate = useTranslate()
-  const { record } = props
+  const record = useRecordContext(props)
   const data = {
-    albumArtist: <TextField record={record} source="albumArtist" />,
+    albumArtist: <TextField source={'albumArtist'} />,
-    genre: <TextField record={record} source="genre" />,
+    genre: (
-    compilation: <BooleanField record={record} source="compilation" />,
+      <ArrayField source={'genres'}>
-    updatedAt: <DateField record={record} source="updatedAt" showTime />,
+        <SingleFieldList linkType={false}>
-    comment: <MultiLineTextField record={record} source="comment" />,
+          <ChipField source={'name'} />
-  }
+        </SingleFieldList>
-  if (!record.comment) {
+      </ArrayField>
-    delete data.comment
+    ),
+    compilation: <BooleanField source={'compilation'} />,
+    updatedAt: <DateField source={'updatedAt'} showTime />,
+    comment: <MultiLineTextField source={'comment'} />,
   }
+
+  const optionalFields = ['comment', 'genre']
+  optionalFields.forEach((field) => {
+    !record[field] && delete data[field]
+  })
+
   return (
-    <Show {...props} title=" ">
+    <TableContainer>
-      <TableContainer component={Paper}>
       <Table aria-label="album details" size="small">
         <TableBody>
           {Object.keys(data).map((key) => {
@@ -96,7 +106,6 @@ const AlbumDetails = (props) => {
         </TableBody>
       </Table>
     </TableContainer>
-    </Show>
   )
 }
 

ui/src/common/BitrateField.js

@@ -1,7 +1,9 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { useRecordContext } from 'react-admin'
 
-export const BitrateField = ({ record = {}, source }) => {
+export const BitrateField = ({ source, ...rest }) => {
+  const record = useRecordContext(rest)
   return <span>{`${record[source]} kbps`}</span>
 }
 

ui/src/common/DurationField.js

@@ -1,8 +1,10 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { formatDuration } from '../utils'
+import { useRecordContext } from 'react-admin'
 
-export const DurationField = ({ record = {}, source }) => {
+export const DurationField = ({ source, ...rest }) => {
+  const record = useRecordContext(rest)
   try {
     return <span>{formatDuration(record[source])}</span>
   } catch (e) {

ui/src/common/LoveButton.js

@@ -5,6 +5,7 @@ import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder'
 import IconButton from '@material-ui/core/IconButton'
 import { makeStyles } from '@material-ui/core/styles'
 import { useToggleLove } from './useToggleLove'
+import { useRecordContext } from 'react-admin'
 
 const useStyles = makeStyles({
   love: {
@@ -16,7 +17,6 @@ const useStyles = makeStyles({
 
 export const LoveButton = ({
   resource,
-  record,
   color,
   visible,
   size,
@@ -25,6 +25,7 @@ export const LoveButton = ({
   disabled,
   ...rest
 }) => {
+  const record = useRecordContext(rest) || {}
   const classes = useStyles({ color, visible, loved: record.starred })
   const [toggleLove, loading] = useToggleLove(resource, record)
 
@@ -56,7 +57,7 @@ export const LoveButton = ({
 
 LoveButton.propTypes = {
   resource: PropTypes.string.isRequired,
-  record: PropTypes.object.isRequired,
+  record: PropTypes.object,
   visible: PropTypes.bool,
   color: PropTypes.string,
   size: PropTypes.string,
@@ -66,7 +67,6 @@ LoveButton.propTypes = {
 
 LoveButton.defaultProps = {
   addLabel: true,
-  record: {},
   visible: true,
   size: 'small',
   color: 'inherit',

ui/src/common/MultiLineTextField.js

@@ -2,18 +2,19 @@ import React, { memo } from 'react'
 import Typography from '@material-ui/core/Typography'
 import sanitizeFieldRestProps from './sanitizeFieldRestProps'
 import md5 from 'blueimp-md5'
+import { useRecordContext } from 'react-admin'
 
 export const MultiLineTextField = memo(
   ({
     className,
     emptyText,
     source,
-    record,
     firstLine,
     maxLines,
     addLabel,
     ...rest
   }) => {
+    const record = useRecordContext(rest)
     const value = record && record[source]
     let lines = value ? value.split('\n') : []
     if (maxLines || firstLine) {
@@ -46,7 +47,6 @@ export const MultiLineTextField = memo(
 )
 
 MultiLineTextField.defaultProps = {
-  record: {},
   addLabel: true,
   firstLine: 0,
 }

ui/src/common/RangeField.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { useRecordContext } from 'react-admin'
 
 export const formatRange = (record, source) => {
   const nameCapitalized = source.charAt(0).toUpperCase() + source.slice(1)
@@ -15,7 +16,8 @@ export const formatRange = (record, source) => {
   return range.join('-')
 }
 
-export const RangeField = ({ className, record = {}, source }) => {
+export const RangeField = ({ className, source, ...rest }) => {
+  const record = useRecordContext(rest)
   return <span className={className}>{formatRange(record, source)}</span>
 }
 

ui/src/common/RatingField.js

@@ -5,6 +5,7 @@ import { makeStyles } from '@material-ui/core/styles'
 import StarBorderIcon from '@material-ui/icons/StarBorder'
 import clsx from 'clsx'
 import { useRating } from './useRating'
+import { useRecordContext } from 'react-admin'
 
 const useStyles = makeStyles({
   rating: {
@@ -21,14 +22,15 @@ const useStyles = makeStyles({
 
 export const RatingField = ({
   resource,
-  record,
   visible,
   className,
   size,
   color,
+  ...rest
 }) => {
+  const record = useRecordContext(rest) || {}
   const [rate, rating] = useRating(resource, record)
-  const classes = useStyles({ visible, rating: record.rating, color })
+  const classes = useStyles({ color, visible })
 
   const stopPropagation = (e) => {
     e.stopPropagation()
@@ -60,13 +62,12 @@ export const RatingField = ({
 }
 RatingField.propTypes = {
   resource: PropTypes.string.isRequired,
-  record: PropTypes.object.isRequired,
+  record: PropTypes.object,
   visible: PropTypes.bool,
   size: PropTypes.string,
 }
 
 RatingField.defaultProps = {
-  record: {},
   visible: true,
   size: 'small',
   color: 'inherit',

ui/src/common/SizeField.js

@@ -1,8 +1,10 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { formatBytes } from '../utils'
+import { useRecordContext } from 'react-admin'
 
-export const SizeField = ({ record = {}, source }) => {
+export const SizeField = ({ source, ...rest }) => {
+  const record = useRecordContext(rest)
   return <span>{formatBytes(record[source])}</span>
 }
 

ui/src/common/SongDetails.js

@@ -1,5 +1,4 @@
 import React from 'react'
-import Paper from '@material-ui/core/Paper'
 import Table from '@material-ui/core/Table'
 import TableBody from '@material-ui/core/TableBody'
 import TableCell from '@material-ui/core/TableCell'
@@ -11,6 +10,10 @@ import {
   TextField,
   NumberField,
   useTranslate,
+  ArrayField,
+  SingleFieldList,
+  ChipField,
+  useRecordContext,
 } from 'react-admin'
 import inflection from 'inflection'
 import { BitrateField, SizeField } from './index'
@@ -26,35 +29,38 @@ const useStyles = makeStyles({
 export const SongDetails = (props) => {
   const classes = useStyles()
   const translate = useTranslate()
-  const { record } = props
+  const record = useRecordContext(props)
   const data = {
-    path: <TextField record={record} source="path" />,
+    path: <TextField source="path" />,
-    album: <TextField record={record} source="album" />,
+    album: <TextField source="album" />,
-    discSubtitle: <TextField record={record} source="discSubtitle" />,
+    discSubtitle: <TextField source="discSubtitle" />,
-    albumArtist: <TextField record={record} source="albumArtist" />,
+    albumArtist: <TextField source="albumArtist" />,
-    genre: <TextField record={record} source="genre" />,
+    genre: (
-    compilation: <BooleanField record={record} source="compilation" />,
+      <ArrayField source={'genres'}>
-    bitRate: <BitrateField record={record} source="bitRate" />,
+        <SingleFieldList linkType={false}>
-    size: <SizeField record={record} source="size" />,
+          <ChipField source="name" />
-    updatedAt: <DateField record={record} source="updatedAt" showTime />,
+        </SingleFieldList>
-    playCount: <TextField record={record} source="playCount" />,
+      </ArrayField>
-    bpm: <NumberField record={record} source="bpm" />,
+    ),
-    comment: <MultiLineTextField record={record} source="comment" />,
+    compilation: <BooleanField source="compilation" />,
-  }
+    bitRate: <BitrateField source="bitRate" />,
-  if (!record.discSubtitle) {
+    size: <SizeField source="size" />,
-    delete data.discSubtitle
+    updatedAt: <DateField source="updatedAt" showTime />,
-  }
+    playCount: <TextField source="playCount" />,
-  if (!record.comment) {
+    bpm: <NumberField source="bpm" />,
-    delete data.comment
+    comment: <MultiLineTextField source="comment" />,
-  }
-  if (!record.bpm) {
-    delete data.bpm
   }
+
+  const optionalFields = ['discSubtitle', 'comment', 'bpm', 'genre']
+  optionalFields.forEach((field) => {
+    !record[field] && delete data[field]
+  })
   if (record.playCount > 0) {
     data.playDate = <DateField record={record} source="playDate" showTime />
   }
+
   return (
-    <TableContainer component={Paper}>
+    <TableContainer>
       <Table aria-label="song details" size="small">
         <TableBody>
           {Object.keys(data).map((key) => {

ui/src/utils/index.js

@@ -1,5 +1,6 @@
 export * from './baseUrl'
 export * from './docsUrl'
 export * from './formatters'
+export * from './intersperse'
 export * from './notifications'
 export * from './openInNewTab'

ui/src/utils/intersperse.js

@@ -0,0 +1,20 @@
+/* intersperse: Return an array with the separator interspersed between
+ * each element of the input array.
+ *
+ * > _([1,2,3]).intersperse(0)
+ * [1,0,2,0,3]
+ *
+ * From: https://stackoverflow.com/a/23619085
+ */
+export const intersperse = (arr, sep) => {
+  if (arr.length === 0) {
+    return []
+  }
+
+  return arr.slice(1).reduce(
+    function (xs, x, i) {
+      return xs.concat([sep, x])
+    },
+    [arr[0]]
+  )
+}