Fine tune colors, remove PlayButton from AlbumDetail

ui/src/album/AlbumDetails.js

@@ -6,7 +6,6 @@ import 'react-image-lightbox/style.css'
 import subsonic from '../subsonic'
 import { DurationField, formatRange, StarButton, SizeField } from '../common'
 import { ArtistLinkField } from '../common'
-import { PlayButton } from '../common'
 
 const AlbumDetails = ({ classes, record }) => {
   const [isLightboxOpen, setLightboxOpen] = React.useState(false)
@@ -37,13 +36,7 @@ const AlbumDetails = ({ classes, record }) => {
         image={imageUrl}
         className={classes.albumCover}
         onClick={handleOpenLightbox}
-      >
-        <PlayButton
-          record={record}
-          className={classes.playButton}
-          size={'large'}
-        />
-      </CardMedia>
+      ></CardMedia>
       <CardContent className={classes.albumDetails}>
         <Typography variant="h5" className={classes.albumTitle}>
           {record.name}
@@ -54,8 +47,8 @@ const AlbumDetails = ({ classes, record }) => {
         <Typography component="p">{genreYear(record)}</Typography>
         <Typography component="p">
           {record.songCount}{' '}
-          {translate('resources.song.name', { smart_count: record.songCount })}{' '}
-          · <DurationField record={record} source={'duration'} /> ·{' '}
+          {translate('resources.song.name', { smart_count: record.songCount })}
+          {' · '} <DurationField record={record} source={'duration'} /> {' · '}
           <SizeField record={record} source="size" />
         </Typography>
         <StarButton record={record} resource={'album'} size={'large'} />

ui/src/album/AlbumGridView.js

@@ -2,6 +2,7 @@ import React from 'react'
 import {
   GridList,
   GridListTile,
+  Typography,
   GridListTileBar,
   useMediaQuery,
 } from '@material-ui/core'
@@ -11,7 +12,12 @@ import { Link } from 'react-router-dom'
 import { linkToRecord, Loading } from 'react-admin'
 import { withContentRect } from 'react-measure'
 import subsonic from '../subsonic'
-import { AlbumContextMenu, PlayButton } from '../common'
+import {
+  AlbumContextMenu,
+  PlayButton,
+  ArtistLinkField,
+  RangeField,
+} from '../common'
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -38,19 +44,16 @@ const useStyles = makeStyles((theme) => ({
     textAlign: 'left',
     fontSize: '1em',
   },
-  artistLink: {
-    color: theme.palette.primary.light,
-  },
-  albumArtist: {
-    fontSize: '12px',
-    color: '#c5c5c5',
+  albumName: {
+    fontSize: '14px',
+    color: theme.palette.type === 'dark' ? '#eee' : 'black',
     overflow: 'hidden',
     whiteSpace: 'nowrap',
     textOverflow: 'ellipsis',
   },
-  albumName: {
-    fontSize: '14px',
-    color: '#eee',
+  albumSubtitle: {
+    fontSize: '12px',
+    color: theme.palette.type === 'dark' ? '#c5c5c5' : '#696969',
     overflow: 'hidden',
     whiteSpace: 'nowrap',
     textOverflow: 'ellipsis',
@@ -63,7 +66,7 @@ const useStyles = makeStyles((theme) => ({
       opacity: 1,
     },
   },
-  albumLlink: {
+  albumLink: {
     position: 'relative',
     display: 'block',
     textDecoration: 'none',
@@ -118,22 +121,26 @@ const AlbumGridTile = ({ showArtist, record, basePath }) => {
         <Cover album={record} />
         <GridListTileBar
           className={isDesktop ? classes.tileBar : classes.tileBarMobile}
-          subtitle={
-            <PlayButton
-              record={record}
-              className={classes.playButton}
-              size="small"
-            />
-          }
+          subtitle={<PlayButton color={'white'} record={record} size="small" />}
           actionIcon={<AlbumContextMenu record={record} color={'white'} />}
         />
       </Link>
       <Link
-        className={classes.albumLlink}
+        className={classes.albumLink}
         to={linkToRecord(basePath, record.id, 'show')}
       >
-        <div className={classes.albumName}>{record.name}</div>
-        <div className={classes.albumArtist}>{record.albumArtist}</div>
+        <Typography className={classes.albumName}>{record.name}</Typography>
+        {showArtist ? (
+          <ArtistLinkField record={record} className={classes.albumSubtitle} />
+        ) : (
+          <RangeField
+            record={record}
+            source={'year'}
+            sortBy={'maxYear'}
+            sortByOrder={'DESC'}
+            className={classes.albumSubtitle}
+          />
+        )}
       </Link>
     </div>
   )

ui/src/album/styles.js

@@ -11,10 +11,6 @@ export const useStyles = makeStyles((theme) => ({
       minWidth: '32em',
     },
   },
-  playButton: {
-    opacity: 0,
-    transition: 'all 150ms ease-out',
-  },
   albumCover: {
     display: 'inline-flex',
     justifyContent: 'center',

ui/src/common/PlayButton.js

@@ -5,8 +5,16 @@ import { IconButton } from '@material-ui/core'
 import { useDispatch } from 'react-redux'
 import { useDataProvider } from 'react-admin'
 import { playTracks } from '../audioplayer'
+import { makeStyles } from '@material-ui/core/styles'
 
-const PlayButton = ({ record, size = 'small', ...rest }) => {
+const useStyles = makeStyles({
+  icon: {
+    color: (props) => props.color,
+  },
+})
+
+const PlayButton = ({ record, color, size, ...rest }) => {
+  const classes = useStyles({ color })
   let extractSongsData = function (response) {
     const data = response.data.reduce(
       (acc, cur) => ({ ...acc, [cur.id]: cur }),
@@ -37,6 +45,8 @@ const PlayButton = ({ record, size = 'small', ...rest }) => {
         e.preventDefault()
         playAlbum(record)
       }}
+      aria-label="play"
+      className={classes.icon}
       {...rest}
       size={size}
     >
@@ -46,7 +56,12 @@ const PlayButton = ({ record, size = 'small', ...rest }) => {
 }
 
 PlayButton.propTypes = {
-  icon: PropTypes.element,
   record: PropTypes.object,
+  color: PropTypes.string,
+  size: PropTypes.string,
+}
+
+PlayButton.defaultProps = {
+  size: 'small',
 }
 export default PlayButton

ui/src/common/RangeField.js

@@ -15,8 +15,8 @@ const formatRange = (record, source) => {
   return range.join('-')
 }
 
-const RangeField = ({ record = {}, source }) => {
-  return <span>{formatRange(record, source)}</span>
+const RangeField = ({ className, record = {}, source }) => {
+  return <span className={className}>{formatRange(record, source)}</span>
 }
 
 RangeField.propTypes = {