feat(ui): add CoverArtAvatar component and integrate it into artist and playlist lists

Signed-off-by: Deluan <deluan@navidrome.org>

ui/src/playlist/PlaylistList.jsx

@@ -16,10 +16,10 @@ import {
   usePermissions,
 } from 'react-admin'
 import Switch from '@material-ui/core/Switch'
-import { Avatar } from '@material-ui/core'
 import { makeStyles } from '@material-ui/core/styles'
 import { useMediaQuery } from '@material-ui/core'
 import {
+  CoverArtAvatar,
   DurationField,
   List,
   Writable,
@@ -29,17 +29,11 @@ import {
 } from '../common'
 import PlaylistListActions from './PlaylistListActions'
 import ChangePublicStatusButton from './ChangePublicStatusButton'
-import subsonic from '../subsonic'
 
 const useStyles = makeStyles((theme) => ({
   button: {
     color: theme.palette.type === 'dark' ? 'white' : undefined,
   },
-  coverArt: {
-    width: '40px',
-    height: '40px',
-    borderRadius: '4px',
-  },
 }))
 
 const PlaylistFilter = (props) => {
@@ -126,25 +120,6 @@ const ToggleAutoImport = ({ resource, source }) => {
   ) : null
 }
 
-const CoverArtField = () => {
-  const classes = useStyles()
-  const record = useRecordContext()
-  if (!record) return null
-  return (
-    <Avatar
-      src={subsonic.getCoverArtUrl(record, 80, true)}
-      variant="square"
-      className={classes.coverArt}
-      alt={record.name}
-    />
-  )
-}
-
-CoverArtField.defaultProps = {
-  label: '',
-  sortable: false,
-}
-
 const PlaylistListBulkActions = (props) => {
   const classes = useStyles()
   return (
@@ -204,7 +179,7 @@ const PlaylistList = (props) => {
       bulkActionButtons={!isXsmall && <PlaylistListBulkActions />}
     >
       <Datagrid rowClick="show" isRowSelectable={(r) => isWritable(r?.ownerId)}>
-        <CoverArtField source="id" />
+        <CoverArtAvatar source="id" variant="square" />
         <TextField source="name" />
         {columns}
         <Writable>