Feature/add queue to existing playlist

packages/app/app/components/PlayQueue/QueueMenu/QueueMenuMore/index.tsx

@@ -9,41 +9,63 @@ import { Track } from '@nuclear/ui/lib/types';
 import styles from './styles.scss';
 import { normalizeTrack } from '../../../../utils';
 
-export const addTrackToPlaylist = (updatePlaylist, playlist: Playlist, track: Track) => {
+export const addTrackToPlaylist = (
+  updatePlaylist,
+  playlist: Playlist,
+  track: Track
+) => {
   if (track && track.name) {
     if (isArtistObject(track.artist)) {
       track.artist = getTrackArtist(track);
     }
 
     updatePlaylist({
       ...playlist,
-      tracks: [
-        ...playlist.tracks,
-        PlaylistHelper.extractTrackData(track)
-      ]
+      tracks: [...playlist.tracks, PlaylistHelper.extractTrackData(track)]
     });
   }
 };
 
+export const addQueueToPlaylist = (
+  updatePlaylist,
+  playlist: Playlist,
+  tracks: Track[]
+) => {
+  const newTracks = tracks.map((track) => {
+    if (isArtistObject(track.artist)) {
+      track.artist = getTrackArtist(track);
+    }
+
+    return PlaylistHelper.extractTrackData(track);
+  });
+
+  updatePlaylist({
+    ...playlist,
+    tracks: [...playlist.tracks, ...newTracks]
+  });
+};
+
 export type QueueMenuMoreProps = {
   disabled: boolean;
   updatePlaylist: (playlist: Playlist) => void;
   savePlaylistDialog: React.ReactNode;
   playlists: Playlist[];
   currentItem: Track;
+  items: Track[];
 
   clearQueue: () => void;
   resetPlayer: () => void;
   addToDownloads: (track: Track) => void;
   addFavoriteTrack: (track: Track) => void;
-}
+};
 
 export const QueueMenuMore: React.FC<QueueMenuMoreProps> = ({
   disabled,
   savePlaylistDialog,
   updatePlaylist,
   playlists,
   currentItem,
+  items,
   clearQueue,
   resetPlayer,
   addToDownloads,
@@ -67,10 +89,11 @@ export const QueueMenuMore: React.FC<QueueMenuMoreProps> = ({
   }, [addFavoriteTrack, currentItem]);
 
   return (
-    <Dropdown 
-      item 
-      icon='ellipsis vertical' data-testid='queue-menu-more-container' 
-      className={styles.queue_menu_more} 
+    <Dropdown
+      item
+      icon='ellipsis vertical'
+      data-testid='queue-menu-more-container'
+      className={styles.queue_menu_more}
       disabled={disabled}
     >
       <Dropdown.Menu>
@@ -80,26 +103,40 @@ export const QueueMenuMore: React.FC<QueueMenuMoreProps> = ({
           {t('clear')}
         </Dropdown.Item>
         {savePlaylistDialog}
+        <Dropdown.Item>
+          <Dropdown text={t('playlist-add-queue')} className='left'>
+            <Dropdown.Menu className={cx('left', styles.playlists_menu)}>
+              {playlists?.map((playlist, i) => (
+                <Dropdown.Item
+                  key={i}
+                  onClick={() =>
+                    addQueueToPlaylist(updatePlaylist, playlist, items)
+                  }
+                >
+                  <Icon name='music' />
+                  {playlist.name}
+                </Dropdown.Item>
+              ))}
+            </Dropdown.Menu>
+          </Dropdown>
+        </Dropdown.Item>
         <Dropdown.Divider />
 
         <Dropdown.Header>{t('header-track')}</Dropdown.Header>
         <Dropdown.Item>
           <Dropdown text={t('playlist-add')} className='left'>
-            <Dropdown.Menu
-              className={cx('left', styles.playlists_menu)}
-            >
-              {
-                playlists?.map(
-                  (playlist, i) => (
-                    <Dropdown.Item
-                      key={i}
-                      onClick={() => addTrackToPlaylist(updatePlaylist, playlist, currentItem)}
-                    >
-                      <Icon name='music' />
-                      {playlist.name}
-                    </Dropdown.Item>
-                  ))
-              }
+            <Dropdown.Menu className={cx('left', styles.playlists_menu)}>
+              {playlists?.map((playlist, i) => (
+                <Dropdown.Item
+                  key={i}
+                  onClick={() =>
+                    addTrackToPlaylist(updatePlaylist, playlist, currentItem)
+                  }
+                >
+                  <Icon name='music' />
+                  {playlist.name}
+                </Dropdown.Item>
+              ))}
             </Dropdown.Menu>
           </Dropdown>
         </Dropdown.Item>

packages/app/app/components/PlayQueue/QueueMenu/index.tsx

@@ -1,9 +1,6 @@
 import React from 'react';
 import { head, isEmpty } from 'lodash';
-import {
-  Dropdown,
-  Icon
-} from 'semantic-ui-react';
+import { Dropdown, Icon } from 'semantic-ui-react';
 import { useTranslation } from 'react-i18next';
 import { Playlist, PlaylistTrack } from '@nuclear/core';
 import { InputDialog } from '@nuclear/ui';
@@ -22,13 +19,13 @@ type QueueMenuProps = {
   addFavoriteTrack: PlayQueueActions['addFavoriteTrack'];
   addToDownloads: (track: QueueItem) => void;
   currentSong: number;
-  success : PlayQueueActions['success'];
+  success: PlayQueueActions['success'];
   items: QueueItem[];
   toggleOption: PlayQueueActions['toggleOption'];
   settings: SettingsState;
   playlists: Playlist[];
   compact: boolean;
-}
+};
 
 const QueueMenu: React.FC<QueueMenuProps> = ({
   addPlaylist,
@@ -45,8 +42,8 @@ const QueueMenu: React.FC<QueueMenuProps> = ({
   playlists,
   compact
 }) => {
-  const {t} = useTranslation('queue');
-  const handleAddPlaylist = name => {
+  const { t } = useTranslation('queue');
+  const handleAddPlaylist = (name) => {
     addPlaylist(items as PlaylistTrack[], name);
     success(
       t('playlist-toast-title'),
@@ -64,14 +61,19 @@ const QueueMenu: React.FC<QueueMenuProps> = ({
           href='#'
           className='compactButton'
           data-testid='queue-menu-collapse'
-          onClick={() => toggleOption(
-            settingsConst.find(setting => setting.name === 'compactQueueBar'),
-            settings
-          )}
+          onClick={() =>
+            toggleOption(
+              settingsConst.find(
+                (setting) => setting.name === 'compactQueueBar'
+              ),
+              settings
+            )
+          }
         >
-          <Icon name={settings.compactQueueBar ? 'angle left' : 'angle right'} />
+          <Icon
+            name={settings.compactQueueBar ? 'angle left' : 'angle right'}
+          />
         </a>
-
         {
           !compact &&
             <QueueMenuMore
@@ -83,6 +85,7 @@ const QueueMenu: React.FC<QueueMenuProps> = ({
               addToDownloads={addToDownloads}
               playlists={playlists}
               currentItem={items[currentSong]}
+              items={items}
               savePlaylistDialog={
                 <InputDialog
                   header={<h4>{t('create-playlist-dialog-title')}</h4>}
@@ -101,7 +104,6 @@ const QueueMenu: React.FC<QueueMenuProps> = ({
               }
             />
         }
-
       </div>
       <hr />
     </div>