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

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