diff --git a/src/components/card/Card.tsx b/src/components/card/Card.tsx index 41b60b5..9e1f10e 100644 --- a/src/components/card/Card.tsx +++ b/src/components/card/Card.tsx @@ -22,6 +22,7 @@ import { FavoriteOverlayButton, AppendOverlayButton, ModalViewOverlayButton, + AppendNextOverlayButton, } from './styled'; import { setStatus } from '../../redux/playerSlice'; import { addModalPage } from '../../redux/miscSlice'; @@ -75,22 +76,22 @@ const Card = ({ dispatch(fixPlayer2Index()); }; - const handlePlayAppend = async () => { + const handlePlayAppend = async (type: 'next' | 'later') => { if (playClick.type === 'playlist') { const res = await getPlaylist(playClick.id); - dispatch(appendPlayQueue({ entries: res.song })); + dispatch(appendPlayQueue({ entries: res.song, type })); notifyToast('info', `Added ${res.song.length} song(s)`); } if (playClick.type === 'album') { const res = await getAlbum(playClick.id); - dispatch(appendPlayQueue({ entries: res.song })); + dispatch(appendPlayQueue({ entries: res.song, type })); notifyToast('info', `Added ${res.song.length} song(s)`); } if (playClick.type === 'artist') { const songs = await getAllArtistSongs(playClick.id); - dispatch(appendPlayQueue({ entries: songs })); + dispatch(appendPlayQueue({ entries: songs, type })); notifyToast('info', `Added ${songs.length} song(s)`); } @@ -171,20 +172,25 @@ const Card = ({ onClick={handlePlayClick} /> handlePlayAppend('later')} + size={size <= 160 ? 'xs' : 'sm'} icon={} /> + handlePlayAppend('next')} + size={size <= 160 ? 'xs' : 'sm'} + icon={} + /> {playClick.type !== 'playlist' && ( } /> )} {!rest.isModal && ( } onClick={handleOpenModal} /> diff --git a/src/components/card/styled.tsx b/src/components/card/styled.tsx index a423964..cce44ca 100644 --- a/src/components/card/styled.tsx +++ b/src/components/card/styled.tsx @@ -118,11 +118,16 @@ export const AppendOverlayButton = styled(OverlayButton)` left: 90%; `; -export const FavoriteOverlayButton = styled(OverlayButton)` +export const AppendNextOverlayButton = styled(OverlayButton)` top: 90%; left: 70%; `; +export const FavoriteOverlayButton = styled(OverlayButton)` + top: 90%; + left: 50%; +`; + export const ModalViewOverlayButton = styled(OverlayButton)` top: 10%; left: 90%; diff --git a/src/components/library/AlbumView.tsx b/src/components/library/AlbumView.tsx index a6a7d2f..567e9ce 100644 --- a/src/components/library/AlbumView.tsx +++ b/src/components/library/AlbumView.tsx @@ -4,7 +4,12 @@ import settings from 'electron-settings'; import { ButtonToolbar, Tag } from 'rsuite'; import { useQuery, useQueryClient } from 'react-query'; import { useParams, useHistory } from 'react-router-dom'; -import { FavoriteButton, PlayAppendButton, PlayButton } from '../shared/ToolbarButtons'; +import { + FavoriteButton, + PlayAppendButton, + PlayAppendNextButton, + PlayButton, +} from '../shared/ToolbarButtons'; import { getAlbum, star, unstar } from '../../api/api'; import { useAppDispatch, useAppSelector } from '../../redux/hooks'; import { @@ -98,8 +103,8 @@ const AlbumView = ({ ...rest }: any) => { notifyToast('info', `Playing ${data.song.length} song(s)`); }; - const handlePlayAppend = () => { - dispatch(appendPlayQueue({ entries: data.song })); + const handlePlayAppend = (type: 'next' | 'later') => { + dispatch(appendPlayQueue({ entries: data.song, type })); if (playQueue.entry.length < 1) { dispatch(setStatus('PLAYING')); } @@ -198,9 +203,18 @@ const AlbumView = ({ ...rest }: any) => {
- - - + + handlePlayAppend('later')} + /> + handlePlayAppend('next')} + /> +
diff --git a/src/components/library/ArtistView.tsx b/src/components/library/ArtistView.tsx index 75464db..0f43c42 100644 --- a/src/components/library/ArtistView.tsx +++ b/src/components/library/ArtistView.tsx @@ -5,7 +5,12 @@ import settings from 'electron-settings'; import { ButtonToolbar, Tag, Whisper, Button, Popover, TagGroup } from 'rsuite'; import { useQuery, useQueryClient } from 'react-query'; import { useParams, useHistory } from 'react-router-dom'; -import { FavoriteButton, PlayAppendButton, PlayButton } from '../shared/ToolbarButtons'; +import { + FavoriteButton, + PlayAppendButton, + PlayAppendNextButton, + PlayButton, +} from '../shared/ToolbarButtons'; import { getAllArtistSongs, getArtist, getArtistInfo, star, unstar } from '../../api/api'; import { useAppDispatch } from '../../redux/hooks'; import { @@ -94,9 +99,9 @@ const ArtistView = ({ ...rest }: any) => { notifyToast('info', `Playing ${songs.length} song(s)`); }; - const handlePlayAppend = async () => { + const handlePlayAppend = async (type: 'next' | 'later') => { const songs = await getAllArtistSongs(data.id); - dispatch(appendPlayQueue({ entries: songs })); + dispatch(appendPlayQueue({ entries: songs, type })); notifyToast('info', `Added ${songs.length} song(s)`); }; @@ -165,9 +170,18 @@ const ArtistView = ({ ...rest }: any) => {
- - - + + handlePlayAppend('later')} + /> + handlePlayAppend('later')} + /> + { } > - +
diff --git a/src/components/library/GenreList.tsx b/src/components/library/GenreList.tsx index 590f216..cfe43d3 100644 --- a/src/components/library/GenreList.tsx +++ b/src/components/library/GenreList.tsx @@ -78,7 +78,8 @@ const GenreList = () => { virtualized disabledContextMenuOptions={[ 'play', - 'addToQueue', + 'addToQueueNext', + 'addToQueueLast', 'moveSelectedTo', 'removeFromCurrent', 'addToPlaylist', diff --git a/src/components/player/NowPlayingView.tsx b/src/components/player/NowPlayingView.tsx index bc90b9f..e5e5ceb 100644 --- a/src/components/player/NowPlayingView.tsx +++ b/src/components/player/NowPlayingView.tsx @@ -168,7 +168,7 @@ const NowPlayingView = () => { } }; - const handlePlayRandom = async (action: 'play' | 'add') => { + const handlePlayRandom = async (action: 'play' | 'addNext' | 'addLater') => { setIsLoadingRandom(true); const res = await getRandomSongs({ size: randomPlaylistTrackCount, @@ -198,8 +198,17 @@ const NowPlayingView = () => { difference !== 0 ? `(-${difference} invalid)` : '' } song(s)` ); + } else if (action === 'addLater') { + dispatch(appendPlayQueue({ entries: cleanedSongs, type: 'later' })); + if (playQueue.entry.length < 1) { + dispatch(setStatus('PLAYING')); + } + notifyToast( + 'info', + `Added ${cleanedSongs.length} ${difference !== 0 ? `(-${difference} invalid)` : ''} song(s)` + ); } else { - dispatch(appendPlayQueue({ entries: cleanedSongs })); + dispatch(appendPlayQueue({ entries: cleanedSongs, type: 'next' })); if (playQueue.entry.length < 1) { dispatch(setStatus('PLAYING')); } @@ -329,6 +338,8 @@ const NowPlayingView = () => {
handlePlayRandom('play')} loading={isLoadingRandom} disabled={!(typeof randomPlaylistTrackCount === 'number')} @@ -336,12 +347,21 @@ const NowPlayingView = () => { Play + + + handlePlayRandom('addNext')} + loading={isLoadingRandom} + disabled={!(typeof randomPlaylistTrackCount === 'number')} + > + Add (next) + handlePlayRandom('add')} + onClick={() => handlePlayRandom('addLater')} loading={isLoadingRandom} disabled={!(typeof randomPlaylistTrackCount === 'number')} > - Add to queue + Add (later) diff --git a/src/components/playlist/PlaylistView.tsx b/src/components/playlist/PlaylistView.tsx index 0612d0b..4f9346c 100644 --- a/src/components/playlist/PlaylistView.tsx +++ b/src/components/playlist/PlaylistView.tsx @@ -11,6 +11,7 @@ import { DeleteButton, EditButton, PlayAppendButton, + PlayAppendNextButton, PlayButton, SaveButton, UndoButton, @@ -175,8 +176,8 @@ const PlaylistView = ({ ...rest }) => { notifyToast('info', `Playing ${playlist.entry.length} song(s)`); }; - const handlePlayAppend = () => { - dispatch(appendPlayQueue({ entries: playlist.entry })); + const handlePlayAppend = (type: 'next' | 'later') => { + dispatch(appendPlayQueue({ entries: playlist.entry, type })); if (playQueue.entry.length < 1) { dispatch(setStatus('PLAYING')); } @@ -363,18 +364,24 @@ const PlaylistView = ({ ...rest }) => { handlePlayAppend('later')} + disabled={playlist.entry?.length < 1} + /> + handlePlayAppend('next')} disabled={playlist.entry?.length < 1} /> { onClick={() => handleSave(needsRecovery)} /> {
{ } > - + { } >