feat: changed hvoer state for album list, added play icon to album details

ui/src/album/AlbumDetails.js

@@ -6,6 +6,7 @@ import 'react-image-lightbox/style.css'
 import subsonic from '../subsonic'
 import { DurationField, formatRange, StarButton, SizeField } from '../common'
 import { ArtistLinkField } from '../common'
+import { AlbumContextMenu, PlayButton } from '../common'
 
 const AlbumDetails = ({ classes, record }) => {
   const [isLightboxOpen, setLightboxOpen] = React.useState(false)
@@ -36,7 +37,9 @@ const AlbumDetails = ({ classes, record }) => {
         image={imageUrl}
         className={classes.albumCover}
         onClick={handleOpenLightbox}
-      />
+      >
+        <PlayButton record={record} className={classes.playButton} size={"large"} />
+      </CardMedia>
       <CardContent className={classes.albumDetails}>
         <Typography variant="h5" className={classes.albumTitle}>
           {record.name}

ui/src/album/AlbumGridView.js

@@ -11,18 +11,25 @@ import { Link } from 'react-router-dom'
 import { linkToRecord, Loading } from 'react-admin'
 import { withContentRect } from 'react-measure'
 import subsonic from '../subsonic'
-import { ArtistLinkField, RangeField } from '../common'
-import { AlbumContextMenu } from '../common'
+import { AlbumContextMenu, PlayButton } from '../common'
 
 const useStyles = makeStyles((theme) => ({
   root: {
     margin: '20px',
   },
   tileBar: {
+    transition:'all 150ms ease-out',
+    opacity:0,
     textAlign: 'left',
     marginBottom: '3px',
     background:
-      'linear-gradient(to top, rgba(0,0,0,1) 0%,rgba(0,0,0,0.4) 70%,rgba(0,0,0,0) 100%)',
+      'linear-gradient(to top, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.4) 70%,rgba(0,0,0,0) 100%)',
+  },
+  tileBarMobile: {
+    textAlign: 'left',
+    marginBottom: '3px',
+    background:
+      'linear-gradient(to top, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.4) 70%,rgba(0,0,0,0) 100%)',
   },
   albumArtistName: {
     whiteSpace: 'nowrap',
@@ -51,8 +58,16 @@ const useStyles = makeStyles((theme) => ({
   link: {
     position:'relative',
     display: 'block',
-    textDecoration:'none'
-  }
+    textDecoration:'none',
+    "&:hover $tileBar": {
+      opacity:1,
+    }
+  },
+  albumLlink: {
+    position:'relative',
+    display: 'block',
+    textDecoration:'none',
+  },
 }))
 
 const useCoverStyles = makeStyles({
@@ -106,14 +121,15 @@ const AlbumGridTile = ({ showArtist, record, basePath }) => {
     >
       <Link className={classes.link} to={linkToRecord(basePath, record.id, 'show')}>
         <Cover album={record} />
-        {(!isDesktop || visible) && (
           <GridListTileBar
-            className={classes.tileBar}
+            className={isDesktop ? classes.tileBar : classes.tileBarMobile}
+            subtitle={
+              <PlayButton record={record} className={classes.playButton} size="small" />
+            }
             actionIcon={<AlbumContextMenu record={record} color={'white'} />}
           />
-        )}
       </Link>
-      <Link className={classes.link} to={linkToRecord(basePath, record.id, 'show')}>
+      <Link className={classes.albumLlink} to={linkToRecord(basePath, record.id, 'show')}>
         <div className={classes.albumName}>{record.name}</div>
         <div className={classes.albumArtist}>{record.albumArtist}</div>
       </Link>

ui/src/album/styles.js

@@ -11,9 +11,16 @@ export const useStyles = makeStyles((theme) => ({
       minWidth: '32em',
     },
   },
+  playButton: {
+    opacity:0,
+    transition:'all 150ms ease-out'
+  },
   albumCover: {
-    display: 'inline-block',
+    display: 'inline-flex',
+    justifyContent:'center',
+    alignItems:'center',
     cursor: 'pointer',
+    
     [theme.breakpoints.down('xs')]: {
       height: '8em',
       width: '8em',
@@ -26,6 +33,9 @@ export const useStyles = makeStyles((theme) => ({
       height: '15em',
       width: '15em',
     },
+    '&:hover $playButton': {
+      opacity:1,  
+    }
   },
   albumDetails: {
     display: 'inline-block',