Add play next buttons on all pages

- Decrease button sizes to account for added button: lg -> md
- Use dynamic button sizing on card depending on card size

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}
               />
               <AppendOverlayButton
-                onClick={handlePlayAppend}
-                size="xs"
+                onClick={() => handlePlayAppend('later')}
+                size={size <= 160 ? 'xs' : 'sm'}
                 icon={<Icon icon="plus" />}
               />
+              <AppendNextOverlayButton
+                onClick={() => handlePlayAppend('next')}
+                size={size <= 160 ? 'xs' : 'sm'}
+                icon={<Icon icon="plus-circle" />}
+              />
               {playClick.type !== 'playlist' && (
                 <FavoriteOverlayButton
                   onClick={handleFavorite}
-                  size="xs"
+                  size={size <= 160 ? 'xs' : 'sm'}
                   icon={<Icon icon={rest.details.starred ? 'heart' : 'heart-o'} />}
                 />
               )}
               {!rest.isModal && (
                 <ModalViewOverlayButton
-                  size="xs"
+                  size={size <= 160 ? 'xs' : 'sm'}
                   icon={<Icon icon="external-link" />}
                   onClick={handleOpenModal}
                 />

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%;

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) => {
               </div>
               <div style={{ marginTop: '10px' }}>
                 <ButtonToolbar>
-                  <PlayButton appearance="primary" size="lg" onClick={handlePlay} />
-                  <PlayAppendButton appearance="primary" size="lg" onClick={handlePlayAppend} />
-                  <FavoriteButton size="lg" isFavorite={data.starred} onClick={handleFavorite} />
+                  <PlayButton appearance="primary" size="md" onClick={handlePlay} />
+                  <PlayAppendButton
+                    appearance="primary"
+                    size="md"
+                    onClick={() => handlePlayAppend('later')}
+                  />
+                  <PlayAppendNextButton
+                    appearance="primary"
+                    size="md"
+                    onClick={() => handlePlayAppend('next')}
+                  />
+                  <FavoriteButton size="md" isFavorite={data.starred} onClick={handleFavorite} />
                 </ButtonToolbar>
               </div>
             </div>

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) => {
               </CustomTooltip>
               <div style={{ marginTop: '10px' }}>
                 <ButtonToolbar>
-                  <PlayButton appearance="primary" size="lg" onClick={handlePlay} />
-                  <PlayAppendButton appearance="primary" size="lg" onClick={handlePlayAppend} />
-                  <FavoriteButton size="lg" isFavorite={data.starred} onClick={handleFavorite} />
+                  <PlayButton appearance="primary" size="md" onClick={handlePlay} />
+                  <PlayAppendButton
+                    appearance="primary"
+                    size="md"
+                    onClick={() => handlePlayAppend('later')}
+                  />
+                  <PlayAppendNextButton
+                    appearance="primary"
+                    size="md"
+                    onClick={() => handlePlayAppend('later')}
+                  />
+                  <FavoriteButton size="md" isFavorite={data.starred} onClick={handleFavorite} />
                   <Whisper
                     placement="bottomStart"
                     trigger="hover"
@@ -199,7 +213,7 @@ const ArtistView = ({ ...rest }: any) => {
                       </Popover>
                     }
                   >
-                    <Button size="lg">Related Artists</Button>
+                    <Button size="md">Related Artists</Button>
                   </Whisper>
                 </ButtonToolbar>
               </div>

src/components/library/GenreList.tsx

@@ -78,7 +78,8 @@ const GenreList = () => {
           virtualized
           disabledContextMenuOptions={[
             'play',
-            'addToQueue',
+            'addToQueueNext',
+            'addToQueueLast',
             'moveSelectedTo',
             'removeFromCurrent',
             'addToPlaylist',

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 = () => {
                       <br />
                       <ButtonToolbar>
                         <StyledButton
+                          block
+                          appearance="primary"
                           onClick={() => handlePlayRandom('play')}
                           loading={isLoadingRandom}
                           disabled={!(typeof randomPlaylistTrackCount === 'number')}
@@ -336,12 +347,21 @@ const NowPlayingView = () => {
                           <Icon icon="play" style={{ marginRight: '10px' }} />
                           Play
                         </StyledButton>
+                      </ButtonToolbar>
+                      <ButtonToolbar>
                         <StyledButton
-                          onClick={() => handlePlayRandom('add')}
+                          onClick={() => handlePlayRandom('addNext')}
                           loading={isLoadingRandom}
                           disabled={!(typeof randomPlaylistTrackCount === 'number')}
                         >
-                          <Icon icon="plus" style={{ marginRight: '10px' }} /> Add to queue
+                          <Icon icon="plus" style={{ marginRight: '10px' }} /> Add (next)
+                        </StyledButton>
+                        <StyledButton
+                          onClick={() => handlePlayRandom('addLater')}
+                          loading={isLoadingRandom}
+                          disabled={!(typeof randomPlaylistTrackCount === 'number')}
+                        >
+                          <Icon icon="plus" style={{ marginRight: '10px' }} /> Add (later)
                         </StyledButton>
                       </ButtonToolbar>
                     </StyledPopover>

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 }) => {
                 <ButtonToolbar>
                   <PlayButton
                     appearance="primary"
-                    size="lg"
+                    size="md"
                     onClick={handlePlay}
                     disabled={playlist.entry?.length < 1}
                   />
                   <PlayAppendButton
                     appearance="primary"
-                    size="lg"
-                    onClick={handlePlayAppend}
+                    size="md"
+                    onClick={() => handlePlayAppend('later')}
+                    disabled={playlist.entry?.length < 1}
+                  />
+                  <PlayAppendNextButton
+                    appearance="primary"
+                    size="md"
+                    onClick={() => handlePlayAppend('next')}
                     disabled={playlist.entry?.length < 1}
                   />
                   <SaveButton
-                    size="lg"
+                    size="md"
                     text={
                       needsRecovery
                         ? 'Recover playlist'
@@ -389,7 +396,7 @@ const PlaylistView = ({ ...rest }) => {
                     onClick={() => handleSave(needsRecovery)}
                   />
                   <UndoButton
-                    size="lg"
+                    size="md"
                     color={needsRecovery ? 'red' : undefined}
                     disabled={
                       needsRecovery || !isModified || misc.isProcessingPlaylist.includes(data?.id)
@@ -427,7 +434,7 @@ const PlaylistView = ({ ...rest }) => {
                           </StyledCheckbox>
                           <br />
                           <StyledButton
-                            size="sm"
+                            size="md"
                             type="submit"
                             block
                             loading={isSubmittingEdit}
@@ -441,7 +448,7 @@ const PlaylistView = ({ ...rest }) => {
                       </Popover>
                     }
                   >
-                    <EditButton size="lg" disabled={misc.isProcessingPlaylist.includes(data?.id)} />
+                    <EditButton size="md" disabled={misc.isProcessingPlaylist.includes(data?.id)} />
                   </Whisper>
 
                   <Whisper
@@ -458,7 +465,7 @@ const PlaylistView = ({ ...rest }) => {
                     }
                   >
                     <DeleteButton
-                      size="lg"
+                      size="md"
                       disabled={misc.isProcessingPlaylist.includes(data?.id)}
                     />
                   </Whisper>