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',

ui/src/common/PlayButton.js

@@ -3,28 +3,50 @@ import PropTypes from 'prop-types'
 import PlayArrowIcon from '@material-ui/icons/PlayArrow'
 import { IconButton } from '@material-ui/core'
 import { useDispatch } from 'react-redux'
+import { useDataProvider } from 'react-admin'
+import { playTracks } from '../audioplayer'
 
-const defaultIcon = <PlayArrowIcon fontSize="small" />
-
-const PlayButton = ({ icon = defaultIcon, action, ...rest }) => {
+const PlayButton = ({ record, size = 'small', ...rest }) => {
+  let extractSongsData = function (response) {
+    const data = response.data.reduce(
+      (acc, cur) => ({ ...acc, [cur.id]: cur }),
+      {}
+    )
+    const ids = response.data.map((r) => r.id)
+    return { data, ids }
+  }
+  const dataProvider = useDataProvider()
   const dispatch = useDispatch()
+  const playAlbum = record => {
+    dataProvider
+      .getList('albumSong', {
+        pagination: { page: 1, perPage: -1 },
+        sort: { field: 'discNumber, trackNumber', order: 'ASC' },
+        filter: { album_id: record.id, disc_number: record.discNumber },
+      })
+      .then((response) => {
+        let { data, ids } = extractSongsData(response)
+        dispatch(playTracks(data, ids))
+      })
+  }
 
   return (
     <IconButton
       onClick={(e) => {
         e.stopPropagation()
-        dispatch(action)
+        e.preventDefault()
+        playAlbum(record)
       }}
       {...rest}
-      size={'small'}
+      size={size}
     >
-      {icon}
+      <PlayArrowIcon fontSize={size} />
     </IconButton>
   )
 }
 
 PlayButton.propTypes = {
   icon: PropTypes.element,
-  action: PropTypes.object,
+  record: PropTypes.object,
 }
 export default PlayButton