Merge e7e4fb7ddd11b7de9c3d63be1c0c3cf9bc89ffce into 9b862e88337e5f3fe7f8d8d6ed1fdac2c6c5151b

ui/src/actions/dialogs.js

@@ -29,9 +29,10 @@ export const closeShareMenu = () => ({
   type: SHARE_MENU_CLOSE,
 })
 
-export const openAddToPlaylist = ({ selectedIds, onSuccess }) => ({
+export const openAddToPlaylist = ({ selectedIds, albumIds, onSuccess }) => ({
   type: ADD_TO_PLAYLIST_OPEN,
   selectedIds,
+  albumIds,
   onSuccess,
 })
 

ui/src/album/AlbumActions.jsx

@@ -5,6 +5,8 @@ import {
   Button,
   sanitizeListRestProps,
   TopToolbar,
+  useDataProvider,
+  useNotify,
   useRecordContext,
   useTranslate,
 } from 'react-admin'
@@ -19,7 +21,6 @@ import {
   playNext,
   addTracks,
   playTracks,
-  shuffleTracks,
   openAddToPlaylist,
   openDownloadMenu,
   DOWNLOAD_MENU_ALBUM,
@@ -52,30 +53,76 @@ const AlbumActions = ({
 }) => {
   const dispatch = useDispatch()
   const translate = useTranslate()
+  const dataProvider = useDataProvider()
+  const notify = useNotify()
   const classes = useStyles()
   const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
   const isNotSmall = useMediaQuery((theme) => theme.breakpoints.up('sm'))
 
+  const getAllSongsAndDispatch = React.useCallback(
+    (action) => {
+      if (ids && ids.length === record.songCount) {
+        return dispatch(action(data, ids))
+      }
+      dataProvider
+        .getList('song', {
+          pagination: { page: 1, perPage: 0 },
+          sort: { field: 'album', order: 'ASC' },
+          filter: { album_id: record.id },
+        })
+        .then((res) => {
+          const allData = res.data.reduce(
+            (acc, curr) => ({ ...acc, [curr.id]: curr }),
+            {},
+          )
+          const allIds = res.data.map((s) => s.id)
+          dispatch(action(allData, allIds))
+        })
+        .catch(() => {
+          notify('ra.page.error', 'warning')
+        })
+    },
+    [dataProvider, dispatch, record, data, ids, notify],
+  )
+
   const handlePlay = React.useCallback(() => {
-    dispatch(playTracks(data, ids))
-  }, [dispatch, data, ids])
+    getAllSongsAndDispatch(playTracks)
+  }, [getAllSongsAndDispatch])
 
   const handlePlayNext = React.useCallback(() => {
-    dispatch(playNext(data, ids))
-  }, [dispatch, data, ids])
+    getAllSongsAndDispatch(playNext)
+  }, [getAllSongsAndDispatch])
 
   const handlePlayLater = React.useCallback(() => {
-    dispatch(addTracks(data, ids))
-  }, [dispatch, data, ids])
+    getAllSongsAndDispatch(addTracks)
+  }, [getAllSongsAndDispatch])
 
   const handleShuffle = React.useCallback(() => {
-    dispatch(shuffleTracks(data, ids))
-  }, [dispatch, data, ids])
+    const filter = { album_id: record.id }
+    if (config.skipLowRatingInShuffle) {
+      filter.not_disliked = true
+    }
+    dataProvider
+      .getList('song', {
+        pagination: { page: 1, perPage: 500 },
+        sort: { field: 'random', order: 'ASC' },
+        filter,
+      })
+      .then((res) => {
+        const allData = res.data.reduce(
+          (acc, curr) => ({ ...acc, [curr.id]: curr }),
+          {},
+        )
+        dispatch(playTracks(allData))
+      })
+      .catch(() => {
+        notify('ra.page.error', 'warning')
+      })
+  }, [dataProvider, dispatch, record, notify])
 
   const handleAddToPlaylist = React.useCallback(() => {
-    const selectedIds = ids.filter((id) => !data[id].missing)
-    dispatch(openAddToPlaylist({ selectedIds }))
-  }, [dispatch, data, ids])
+    dispatch(openAddToPlaylist({ albumIds: [record.id] }))
+  }, [dataProvider, dispatch, record, data, ids, notify])
 
   const handleShare = React.useCallback(() => {
     dispatch(openShareMenu([record.id], 'album', record.name))

ui/src/album/AlbumShow.jsx

@@ -4,6 +4,7 @@ import {
   ShowContextProvider,
   useShowContext,
   useShowController,
+  Pagination,
   Title as RaTitle,
 } from 'react-admin'
 import { makeStyles } from '@material-ui/core/styles'
@@ -40,8 +41,7 @@ const AlbumShowLayout = (props) => {
           reference="song"
           target="album_id"
           sort={{ field: 'album', order: 'ASC' }}
-          perPage={0}
-          pagination={null}
+          perPage={50}
         >
           <AlbumSongs
             resource={'song'}
@@ -50,6 +50,7 @@ const AlbumShowLayout = (props) => {
             actions={
               <AlbumActions className={classes.albumActions} record={record} />
             }
+            pagination={<Pagination rowsPerPageOptions={[25, 50, 100]} />}
           />
         </ReferenceManyField>
       )}

ui/src/album/AlbumSongs.jsx

@@ -89,6 +89,7 @@ const useStyles = makeStyles(
 
 const AlbumSongs = (props) => {
   const { data, ids } = props
+  const listContext = useListContext(props)
   const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
   const classes = useStyles({ isDesktop })
   const dispatch = useDispatch()
@@ -210,6 +211,8 @@ const AlbumSongs = (props) => {
         </Card>
       </div>
       <ExpandInfoDialog content={<SongInfo />} />
+      {props.pagination &&
+        React.cloneElement(props.pagination, listContext)}
     </>
   )
 }
@@ -217,7 +220,17 @@ const AlbumSongs = (props) => {
 const SanitizedAlbumSongs = (props) => {
   removeAlbumCommentsFromSongs(props)
   const { loaded, loading, total, ...rest } = useListContext(props)
-  return <>{loaded && <AlbumSongs {...rest} actions={props.actions} />}</>
+  return (
+    <>
+      {loaded && (
+        <AlbumSongs
+          {...rest}
+          actions={props.actions}
+          pagination={props.pagination}
+        />
+      )}
+    </>
+  )
 }
 
 export default SanitizedAlbumSongs

ui/src/dialogs/AddToPlaylistDialog.jsx

@@ -39,7 +39,7 @@ const useStyles = makeStyles({
 
 export const AddToPlaylistDialog = () => {
   const classes = useStyles()
-  const { open, selectedIds, onSuccess, duplicateSong, duplicateIds } =
+  const { open, selectedIds, albumIds, onSuccess, duplicateSong, duplicateIds } =
     useSelector((state) => state.addToPlaylistDialog)
   const dispatch = useDispatch()
   const translate = useTranslate()
@@ -61,10 +61,11 @@ export const AddToPlaylistDialog = () => {
 
   const addToPlaylist = (playlistId, distinctIds) => {
     const trackIds = Array.isArray(distinctIds) ? distinctIds : selectedIds
-    if (trackIds.length) {
+    const data = albumIds?.length ? { albumIds } : { ids: trackIds }
+    if (albumIds?.length || trackIds.length) {
       dataProvider
         .create('playlistTrack', {
-          data: { ids: trackIds },
+          data,
           filter: { playlist_id: playlistId },
         })
         .then(() => {

ui/src/reducers/dialogReducer.js

@@ -63,6 +63,7 @@ export const addToPlaylistDialogReducer = (
         ...previousState,
         open: true,
         selectedIds: payload.selectedIds,
+        albumIds: payload.albumIds,
         onSuccess: payload.onSuccess,
       }
     case ADD_TO_PLAYLIST_CLOSE: