Merge PR #18: add album to playlist

src/lib/components/AlbumCard.svelte

@@ -21,6 +21,7 @@
     onPlay?: () => void;
     onPlayNext?: () => void;
     onPlayLater?: () => void;
+    onAddAlbumToPlaylist?: () => void;
     onShareQobuz?: () => void;
     onShareSonglink?: () => void;
     onDownload?: () => void;
@@ -44,6 +45,7 @@
     onPlay,
     onPlayNext,
     onPlayLater,
+    onAddAlbumToPlaylist,
     onShareQobuz,
     onShareSonglink,
     onDownload,
@@ -202,6 +204,7 @@
               <AlbumMenu
                 onPlayNext={onPlayNext}
                 onPlayLater={onPlayLater}
+                onAddToPlaylist={onAddAlbumToPlaylist}
                 onShareQobuz={onShareQobuz}
                 onShareSonglink={onShareSonglink}
                 onDownload={onDownload}

src/lib/components/AlbumMenu.svelte

@@ -6,6 +6,7 @@
     MoreHorizontal,
     ListPlus,
     ListEnd,
+    ListMusic,
     Share2,
     CloudDownload,
     Link,
@@ -15,6 +16,7 @@
   interface Props {
     onPlayNext?: () => void;
     onPlayLater?: () => void;
+    onAddToPlaylist?: () => void;
     onShareQobuz?: () => void;
     onShareSonglink?: () => void;
     onDownload?: () => void;
@@ -27,6 +29,7 @@
   let {
     onPlayNext,
     onPlayLater,
+    onAddToPlaylist,
     onShareQobuz,
     onShareSonglink,
     onDownload,
@@ -53,9 +56,10 @@
   const menuId = Symbol('album-menu');
 
   const hasQueue = $derived(!!(onPlayNext || onPlayLater));
+  const hasLibrary = $derived(!!onAddToPlaylist);
   const hasShare = $derived(!!(onShareQobuz || onShareSonglink));
   const hasDownload = $derived(!!onDownload || isAlbumFullyDownloaded);
-  const hasMenu = $derived(hasQueue || hasShare || hasDownload);
+  const hasMenu = $derived(hasQueue || hasLibrary || hasShare || hasDownload);
 
   function closeMenu() {
     isOpen = false;
@@ -260,7 +264,18 @@
             {/if}
           {/if}
 
-          {#if hasQueue && (hasShare || hasDownload)}
+          {#if hasQueue && (hasLibrary || hasShare || hasDownload)}
+            <div class="separator"></div>
+          {/if}
+
+          {#if hasLibrary}
+            <button class="menu-item" onclick={() => handleAction(onAddToPlaylist)}>
+              <ListMusic size={14} />
+              <span>Add to playlist</span>
+            </button>
+          {/if}
+
+          {#if hasLibrary && (hasShare || hasDownload)}
             <div class="separator"></div>
           {/if}
 

src/lib/components/views/AlbumDetailView.svelte

@@ -56,6 +56,7 @@
     onPlayAllNext?: () => void;
     onPlayAllLater?: () => void;
     onAddTrackToPlaylist?: (trackId: number) => void;
+    onAddAlbumToPlaylist?: () => void;
     onTrackDownload?: (track: Track) => void;
     onTrackRemoveDownload?: (trackId: number) => void;
     onTrackReDownload?: (track: Track) => void;
@@ -87,6 +88,7 @@
     onPlayAllNext,
     onPlayAllLater,
     onAddTrackToPlaylist,
+    onAddAlbumToPlaylist,
     onTrackDownload,
     onTrackRemoveDownload,
     onTrackReDownload,
@@ -160,6 +162,11 @@
       isFavoriteLoading = false;
     }
   }
+
+  function handleAddAlbumToPlaylist() {
+    if (!album?.tracks?.length) return;
+    onAddAlbumToPlaylist?.();
+  }
 </script>
 
 <div class="album-detail" bind:this={scrollContainer}>
@@ -216,6 +223,7 @@
         <AlbumMenu
           onPlayNext={onPlayAllNext}
           onPlayLater={onPlayAllLater}
+          onAddToPlaylist={onAddAlbumToPlaylist ? handleAddAlbumToPlaylist : undefined}
           onShareQobuz={onShareAlbumQobuz}
           onShareSonglink={onShareAlbumSonglink}
           onDownload={onDownloadAlbum}

src/lib/components/views/ArtistDetailView.svelte

@@ -68,6 +68,7 @@
     onTrackPlayLater?: (track: Track) => void;
     onTrackAddFavorite?: (trackId: number) => void;
     onTrackAddToPlaylist?: (trackId: number) => void;
+    onAddAlbumToPlaylist?: (albumId: string) => void;
     onTrackShareQobuz?: (trackId: number) => void;
     onTrackShareSonglink?: (track: Track) => void;
     onTrackGoToAlbum?: (albumId: string) => void;
@@ -98,6 +99,7 @@
     onTrackPlayLater,
     onTrackAddFavorite,
     onTrackAddToPlaylist,
+    onAddAlbumToPlaylist,
     onTrackShareQobuz,
     onTrackShareSonglink,
     onTrackGoToAlbum,
@@ -1019,6 +1021,7 @@
               onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
               onPlayNext={onAlbumPlayNext ? () => onAlbumPlayNext(album.id) : undefined}
               onPlayLater={onAlbumPlayLater ? () => onAlbumPlayLater(album.id) : undefined}
+              onAddAlbumToPlaylist={onAddAlbumToPlaylist ? () => onAddAlbumToPlaylist(album.id) : undefined}
               onShareQobuz={onAlbumShareQobuz ? () => onAlbumShareQobuz(album.id) : undefined}
               onShareSonglink={onAlbumShareSonglink ? () => onAlbumShareSonglink(album.id) : undefined}
               onDownload={onAlbumDownload ? () => onAlbumDownload(album.id) : undefined}
@@ -1062,6 +1065,7 @@
             onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
             onPlayNext={onAlbumPlayNext ? () => onAlbumPlayNext(album.id) : undefined}
             onPlayLater={onAlbumPlayLater ? () => onAlbumPlayLater(album.id) : undefined}
+            onAddAlbumToPlaylist={onAddAlbumToPlaylist ? () => onAddAlbumToPlaylist(album.id) : undefined}
             onShareQobuz={onAlbumShareQobuz ? () => onAlbumShareQobuz(album.id) : undefined}
             onShareSonglink={onAlbumShareSonglink ? () => onAlbumShareSonglink(album.id) : undefined}
             onDownload={onAlbumDownload ? () => onAlbumDownload(album.id) : undefined}
@@ -1093,6 +1097,7 @@
             onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
             onPlayNext={onAlbumPlayNext ? () => onAlbumPlayNext(album.id) : undefined}
             onPlayLater={onAlbumPlayLater ? () => onAlbumPlayLater(album.id) : undefined}
+            onAddAlbumToPlaylist={onAddAlbumToPlaylist ? () => onAddAlbumToPlaylist(album.id) : undefined}
             onShareQobuz={onAlbumShareQobuz ? () => onAlbumShareQobuz(album.id) : undefined}
             onShareSonglink={onAlbumShareSonglink ? () => onAlbumShareSonglink(album.id) : undefined}
             onDownload={onAlbumDownload ? () => onAlbumDownload(album.id) : undefined}
@@ -1124,6 +1129,7 @@
             onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
             onPlayNext={onAlbumPlayNext ? () => onAlbumPlayNext(album.id) : undefined}
             onPlayLater={onAlbumPlayLater ? () => onAlbumPlayLater(album.id) : undefined}
+            onAddAlbumToPlaylist={onAddAlbumToPlaylist ? () => onAddAlbumToPlaylist(album.id) : undefined}
             onShareQobuz={onAlbumShareQobuz ? () => onAlbumShareQobuz(album.id) : undefined}
             onShareSonglink={onAlbumShareSonglink ? () => onAlbumShareSonglink(album.id) : undefined}
             onDownload={onAlbumDownload ? () => onAlbumDownload(album.id) : undefined}
@@ -1155,6 +1161,7 @@
             onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
             onPlayNext={onAlbumPlayNext ? () => onAlbumPlayNext(album.id) : undefined}
             onPlayLater={onAlbumPlayLater ? () => onAlbumPlayLater(album.id) : undefined}
+            onAddAlbumToPlaylist={onAddAlbumToPlaylist ? () => onAddAlbumToPlaylist(album.id) : undefined}
             onShareQobuz={onAlbumShareQobuz ? () => onAlbumShareQobuz(album.id) : undefined}
             onShareSonglink={onAlbumShareSonglink ? () => onAlbumShareSonglink(album.id) : undefined}
             onDownload={onAlbumDownload ? () => onAlbumDownload(album.id) : undefined}

src/lib/components/views/HomeView.svelte

@@ -64,6 +64,7 @@
     onTrackPlayNext?: (track: DisplayTrack) => void;
     onTrackPlayLater?: (track: DisplayTrack) => void;
     onTrackAddToPlaylist?: (trackId: number) => void;
+    onAddAlbumToPlaylist?: (albumId: string) => void;
     onTrackShareQobuz?: (trackId: number) => void;
     onTrackShareSonglink?: (track: DisplayTrack) => void;
     onTrackGoToAlbum?: (albumId: string) => void;
@@ -94,6 +95,7 @@
     onTrackPlayNext,
     onTrackPlayLater,
     onTrackAddToPlaylist,
+    onAddAlbumToPlaylist,
     onTrackShareQobuz,
     onTrackShareSonglink,
     onTrackGoToAlbum,
@@ -639,6 +641,7 @@
                 onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
                 onPlayNext={onAlbumPlayNext ? () => onAlbumPlayNext(album.id) : undefined}
                 onPlayLater={onAlbumPlayLater ? () => onAlbumPlayLater(album.id) : undefined}
+                onAddAlbumToPlaylist={onAddAlbumToPlaylist ? () => onAddAlbumToPlaylist(album.id) : undefined}
                 onShareQobuz={onAlbumShareQobuz ? () => onAlbumShareQobuz(album.id) : undefined}
                 onShareSonglink={onAlbumShareSonglink ? () => onAlbumShareSonglink(album.id) : undefined}
                 onDownload={onAlbumDownload ? () => onAlbumDownload(album.id) : undefined}
@@ -667,6 +670,7 @@
                 onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
                 onPlayNext={onAlbumPlayNext ? () => onAlbumPlayNext(album.id) : undefined}
                 onPlayLater={onAlbumPlayLater ? () => onAlbumPlayLater(album.id) : undefined}
+                onAddAlbumToPlaylist={onAddAlbumToPlaylist ? () => onAddAlbumToPlaylist(album.id) : undefined}
                 onShareQobuz={onAlbumShareQobuz ? () => onAlbumShareQobuz(album.id) : undefined}
                 onShareSonglink={onAlbumShareSonglink ? () => onAlbumShareSonglink(album.id) : undefined}
                 onDownload={onAlbumDownload ? () => onAlbumDownload(album.id) : undefined}
@@ -695,6 +699,7 @@
                 onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
                 onPlayNext={onAlbumPlayNext ? () => onAlbumPlayNext(album.id) : undefined}
                 onPlayLater={onAlbumPlayLater ? () => onAlbumPlayLater(album.id) : undefined}
+                onAddAlbumToPlaylist={onAddAlbumToPlaylist ? () => onAddAlbumToPlaylist(album.id) : undefined}
                 onShareQobuz={onAlbumShareQobuz ? () => onAlbumShareQobuz(album.id) : undefined}
                 onShareSonglink={onAlbumShareSonglink ? () => onAlbumShareSonglink(album.id) : undefined}
                 onDownload={onAlbumDownload ? () => onAlbumDownload(album.id) : undefined}
@@ -723,6 +728,7 @@
                 onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
                 onPlayNext={onAlbumPlayNext ? () => onAlbumPlayNext(album.id) : undefined}
                 onPlayLater={onAlbumPlayLater ? () => onAlbumPlayLater(album.id) : undefined}
+                onAddAlbumToPlaylist={onAddAlbumToPlaylist ? () => onAddAlbumToPlaylist(album.id) : undefined}
                 onShareQobuz={onAlbumShareQobuz ? () => onAlbumShareQobuz(album.id) : undefined}
                 onShareSonglink={onAlbumShareSonglink ? () => onAlbumShareSonglink(album.id) : undefined}
                 onDownload={onAlbumDownload ? () => onAlbumDownload(album.id) : undefined}
@@ -751,6 +757,7 @@
                 onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
                 onPlayNext={onAlbumPlayNext ? () => onAlbumPlayNext(album.id) : undefined}
                 onPlayLater={onAlbumPlayLater ? () => onAlbumPlayLater(album.id) : undefined}
+                onAddAlbumToPlaylist={onAddAlbumToPlaylist ? () => onAddAlbumToPlaylist(album.id) : undefined}
                 onShareQobuz={onAlbumShareQobuz ? () => onAlbumShareQobuz(album.id) : undefined}
                 onShareSonglink={onAlbumShareSonglink ? () => onAlbumShareSonglink(album.id) : undefined}
                 onDownload={onAlbumDownload ? () => onAlbumDownload(album.id) : undefined}
@@ -779,6 +786,7 @@
                 onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
                 onPlayNext={onAlbumPlayNext ? () => onAlbumPlayNext(album.id) : undefined}
                 onPlayLater={onAlbumPlayLater ? () => onAlbumPlayLater(album.id) : undefined}
+                onAddAlbumToPlaylist={onAddAlbumToPlaylist ? () => onAddAlbumToPlaylist(album.id) : undefined}
                 onShareQobuz={onAlbumShareQobuz ? () => onAlbumShareQobuz(album.id) : undefined}
                 onShareSonglink={onAlbumShareSonglink ? () => onAlbumShareSonglink(album.id) : undefined}
                 onDownload={onAlbumDownload ? () => onAlbumDownload(album.id) : undefined}
@@ -877,6 +885,7 @@
                 onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
                 onPlayNext={onAlbumPlayNext ? () => onAlbumPlayNext(album.id) : undefined}
                 onPlayLater={onAlbumPlayLater ? () => onAlbumPlayLater(album.id) : undefined}
+                onAddAlbumToPlaylist={onAddAlbumToPlaylist ? () => onAddAlbumToPlaylist(album.id) : undefined}
                 onShareQobuz={onAlbumShareQobuz ? () => onAlbumShareQobuz(album.id) : undefined}
                 onShareSonglink={onAlbumShareSonglink ? () => onAlbumShareSonglink(album.id) : undefined}
                 onDownload={onAlbumDownload ? () => onAlbumDownload(album.id) : undefined}

src/lib/components/views/SearchView.svelte

@@ -83,6 +83,7 @@
     onTrackPlayLater?: (track: Track) => void;
     onTrackAddFavorite?: (trackId: number) => void;
     onTrackAddToPlaylist?: (trackId: number) => void;
+    onAddAlbumToPlaylist?: (albumId: string) => void;
     onTrackShareQobuz?: (trackId: number) => void;
     onTrackShareSonglink?: (track: Track) => void;
     onTrackGoToAlbum?: (albumId: string) => void;
@@ -113,6 +114,7 @@
     onTrackPlayLater,
     onTrackAddFavorite,
     onTrackAddToPlaylist,
+    onAddAlbumToPlaylist,
     onTrackShareQobuz,
     onTrackShareSonglink,
     onTrackGoToAlbum,
@@ -626,6 +628,7 @@
                 onPlay={onAlbumPlay ? () => onAlbumPlay(allResults.albums.items[0].id) : undefined}
                 onPlayNext={onAlbumPlayNext ? () => onAlbumPlayNext(allResults.albums.items[0].id) : undefined}
                 onPlayLater={onAlbumPlayLater ? () => onAlbumPlayLater(allResults.albums.items[0].id) : undefined}
+                onAddAlbumToPlaylist={onAddAlbumToPlaylist ? () => onAddAlbumToPlaylist(album.id) : undefined}
                 onShareQobuz={onAlbumShareQobuz ? () => onAlbumShareQobuz(allResults.albums.items[0].id) : undefined}
                 onShareSonglink={onAlbumShareSonglink ? () => onAlbumShareSonglink(allResults.albums.items[0].id) : undefined}
                 onDownload={onAlbumDownload ? () => onAlbumDownload(allResults.albums.items[0].id) : undefined}
@@ -757,6 +760,7 @@
                           onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
                           onPlayNext={onAlbumPlayNext ? () => onAlbumPlayNext(album.id) : undefined}
                           onPlayLater={onAlbumPlayLater ? () => onAlbumPlayLater(album.id) : undefined}
+                          onAddAlbumToPlaylist={onAddAlbumToPlaylist ? () => onAddAlbumToPlaylist(album.id) : undefined}
                           onShareQobuz={onAlbumShareQobuz ? () => onAlbumShareQobuz(album.id) : undefined}
                           onShareSonglink={onAlbumShareSonglink ? () => onAlbumShareSonglink(album.id) : undefined}
                           onDownload={onAlbumDownload ? () => onAlbumDownload(album.id) : undefined}
@@ -923,6 +927,7 @@
               onPlay={onAlbumPlay ? () => onAlbumPlay(album.id) : undefined}
               onPlayNext={onAlbumPlayNext ? () => onAlbumPlayNext(album.id) : undefined}
               onPlayLater={onAlbumPlayLater ? () => onAlbumPlayLater(album.id) : undefined}
+              onAddAlbumToPlaylist={onAddAlbumToPlaylist ? () => onAddAlbumToPlaylist(album.id) : undefined}
               onShareQobuz={onAlbumShareQobuz ? () => onAlbumShareQobuz(album.id) : undefined}
               onShareSonglink={onAlbumShareSonglink ? () => onAlbumShareSonglink(album.id) : undefined}
               onDownload={onAlbumDownload ? () => onAlbumDownload(album.id) : undefined}

src/routes/+page.svelte

@@ -1110,6 +1110,17 @@
     }
   }
 
+  async function addAlbumToPlaylistById(albumId: string) {
+    const album = await fetchAlbumDetail(albumId);
+    addAlbumToPlaylist(album);
+  }
+  
+  function addAlbumToPlaylist(album: AlbumDetail | null) {
+    if (!album?.tracks?.length) return;
+    const trackIds = album.tracks.map(t => t.id);
+    openAddToPlaylist(trackIds);
+  }
+
   // Share album Qobuz link
   function shareAlbumQobuzLink() {
     if (!selectedAlbum?.id) return;
@@ -1447,7 +1458,7 @@
 
   function handlePlaylistCreated() {
     if (playlistModalMode === 'addTrack') {
-      showToast('Track added to playlist', 'success');
+      showToast('Track(s) added to playlist', 'success');
     } else {
       showToast('Playlist created', 'success');
     }
@@ -2122,6 +2133,7 @@
             onTrackPlayNext={queueQobuzTrackNext}
             onTrackPlayLater={queueQobuzTrackLater}
             onTrackAddToPlaylist={(trackId) => openAddToPlaylist([trackId])}
+            onAddAlbumToPlaylist={addAlbumToPlaylistById}
             onTrackShareQobuz={shareQobuzTrackLink}
             onTrackShareSonglink={(track) => shareSonglinkTrack(track.id, track.isrc)}
             onTrackGoToAlbum={handleAlbumClick}
@@ -2158,6 +2170,7 @@
             onTrackPlayLater={queueQobuzTrackLater}
             onTrackAddFavorite={handleAddToFavorites}
             onTrackAddToPlaylist={(trackId) => openAddToPlaylist([trackId])}
+            onAddAlbumToPlaylist={addAlbumToPlaylistById}
             onTrackShareQobuz={shareQobuzTrackLink}
             onTrackShareSonglink={(track) => shareSonglinkTrack(track.id, track.isrc)}
             onTrackGoToAlbum={handleAlbumClick}
@@ -2199,6 +2212,7 @@
           onPlayAllNext={handleAddAlbumToQueueNext}
           onPlayAllLater={handleAddAlbumToQueueLater}
           onAddTrackToPlaylist={(trackId) => openAddToPlaylist([trackId])}
+          onAddAlbumToPlaylist={() => addAlbumToPlaylist(selectedAlbum)}
           onTrackDownload={handleTrackDownload}
           onTrackRemoveDownload={handleTrackRemoveDownload}
           onTrackReDownload={handleTrackReDownload}
@@ -2232,6 +2246,7 @@
           onTrackPlayLater={queueQobuzTrackLater}
           onTrackAddFavorite={handleAddToFavorites}
           onTrackAddToPlaylist={(trackId) => openAddToPlaylist([trackId])}
+          onAddAlbumToPlaylist={addAlbumToPlaylistById}
           onTrackShareQobuz={shareQobuzTrackLink}
           onTrackShareSonglink={(track) => shareSonglinkTrack(track.id, track.isrc)}
           onTrackGoToAlbum={handleAlbumClick}