mirror of
https://github.com/navidrome/navidrome.git
synced 2026-08-31 07:30:32 +00:00
feat: server-side shuffle and add-to-playlist for album view
- Album shuffle fetches max 500 random songs server-side instead of loading all songs client-side, preventing browser freeze on large albums. Respects SkipLowRatingInShuffle setting. - Add to Playlist sends albumIds to server API instead of fetching all song IDs client-side. Server resolves album to tracks. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
0f686a301c
commit
e7e4fb7ddd
@ -29,9 +29,10 @@ export const closeShareMenu = () => ({
|
|||||||
type: SHARE_MENU_CLOSE,
|
type: SHARE_MENU_CLOSE,
|
||||||
})
|
})
|
||||||
|
|
||||||
export const openAddToPlaylist = ({ selectedIds, onSuccess }) => ({
|
export const openAddToPlaylist = ({ selectedIds, albumIds, onSuccess }) => ({
|
||||||
type: ADD_TO_PLAYLIST_OPEN,
|
type: ADD_TO_PLAYLIST_OPEN,
|
||||||
selectedIds,
|
selectedIds,
|
||||||
|
albumIds,
|
||||||
onSuccess,
|
onSuccess,
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@ -21,7 +21,6 @@ import {
|
|||||||
playNext,
|
playNext,
|
||||||
addTracks,
|
addTracks,
|
||||||
playTracks,
|
playTracks,
|
||||||
shuffleTracks,
|
|
||||||
openAddToPlaylist,
|
openAddToPlaylist,
|
||||||
openDownloadMenu,
|
openDownloadMenu,
|
||||||
DOWNLOAD_MENU_ALBUM,
|
DOWNLOAD_MENU_ALBUM,
|
||||||
@ -99,29 +98,30 @@ const AlbumActions = ({
|
|||||||
}, [getAllSongsAndDispatch])
|
}, [getAllSongsAndDispatch])
|
||||||
|
|
||||||
const handleShuffle = React.useCallback(() => {
|
const handleShuffle = React.useCallback(() => {
|
||||||
getAllSongsAndDispatch(shuffleTracks)
|
const filter = { album_id: record.id }
|
||||||
}, [getAllSongsAndDispatch])
|
if (config.skipLowRatingInShuffle) {
|
||||||
|
filter.not_disliked = true
|
||||||
const handleAddToPlaylist = React.useCallback(() => {
|
|
||||||
if (ids && ids.length === record.songCount) {
|
|
||||||
const selectedIds = ids.filter((id) => !data[id].missing)
|
|
||||||
return dispatch(openAddToPlaylist({ selectedIds }))
|
|
||||||
}
|
}
|
||||||
dataProvider
|
dataProvider
|
||||||
.getList('song', {
|
.getList('song', {
|
||||||
pagination: { page: 1, perPage: 0 },
|
pagination: { page: 1, perPage: 500 },
|
||||||
sort: { field: 'album', order: 'ASC' },
|
sort: { field: 'random', order: 'ASC' },
|
||||||
filter: { album_id: record.id },
|
filter,
|
||||||
})
|
})
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
const selectedIds = res.data
|
const allData = res.data.reduce(
|
||||||
.filter((s) => !s.missing)
|
(acc, curr) => ({ ...acc, [curr.id]: curr }),
|
||||||
.map((s) => s.id)
|
{},
|
||||||
dispatch(openAddToPlaylist({ selectedIds }))
|
)
|
||||||
|
dispatch(playTracks(allData))
|
||||||
})
|
})
|
||||||
.catch(() => {
|
.catch(() => {
|
||||||
notify('ra.page.error', 'warning')
|
notify('ra.page.error', 'warning')
|
||||||
})
|
})
|
||||||
|
}, [dataProvider, dispatch, record, notify])
|
||||||
|
|
||||||
|
const handleAddToPlaylist = React.useCallback(() => {
|
||||||
|
dispatch(openAddToPlaylist({ albumIds: [record.id] }))
|
||||||
}, [dataProvider, dispatch, record, data, ids, notify])
|
}, [dataProvider, dispatch, record, data, ids, notify])
|
||||||
|
|
||||||
const handleShare = React.useCallback(() => {
|
const handleShare = React.useCallback(() => {
|
||||||
|
|||||||
@ -39,7 +39,7 @@ const useStyles = makeStyles({
|
|||||||
|
|
||||||
export const AddToPlaylistDialog = () => {
|
export const AddToPlaylistDialog = () => {
|
||||||
const classes = useStyles()
|
const classes = useStyles()
|
||||||
const { open, selectedIds, onSuccess, duplicateSong, duplicateIds } =
|
const { open, selectedIds, albumIds, onSuccess, duplicateSong, duplicateIds } =
|
||||||
useSelector((state) => state.addToPlaylistDialog)
|
useSelector((state) => state.addToPlaylistDialog)
|
||||||
const dispatch = useDispatch()
|
const dispatch = useDispatch()
|
||||||
const translate = useTranslate()
|
const translate = useTranslate()
|
||||||
@ -61,10 +61,11 @@ export const AddToPlaylistDialog = () => {
|
|||||||
|
|
||||||
const addToPlaylist = (playlistId, distinctIds) => {
|
const addToPlaylist = (playlistId, distinctIds) => {
|
||||||
const trackIds = Array.isArray(distinctIds) ? distinctIds : selectedIds
|
const trackIds = Array.isArray(distinctIds) ? distinctIds : selectedIds
|
||||||
if (trackIds.length) {
|
const data = albumIds?.length ? { albumIds } : { ids: trackIds }
|
||||||
|
if (albumIds?.length || trackIds.length) {
|
||||||
dataProvider
|
dataProvider
|
||||||
.create('playlistTrack', {
|
.create('playlistTrack', {
|
||||||
data: { ids: trackIds },
|
data,
|
||||||
filter: { playlist_id: playlistId },
|
filter: { playlist_id: playlistId },
|
||||||
})
|
})
|
||||||
.then(() => {
|
.then(() => {
|
||||||
|
|||||||
@ -63,6 +63,7 @@ export const addToPlaylistDialogReducer = (
|
|||||||
...previousState,
|
...previousState,
|
||||||
open: true,
|
open: true,
|
||||||
selectedIds: payload.selectedIds,
|
selectedIds: payload.selectedIds,
|
||||||
|
albumIds: payload.albumIds,
|
||||||
onSuccess: payload.onSuccess,
|
onSuccess: payload.onSuccess,
|
||||||
}
|
}
|
||||||
case ADD_TO_PLAYLIST_CLOSE:
|
case ADD_TO_PLAYLIST_CLOSE:
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user