Add ability to add/remove songs from playlist (#17)

* Add api for add/remove playlist items

* Add playlistItemId property to normalized Song

- This is used for Navidrome to delete songs from playlists

* Add mutations for add/remove from playlist

* Add context modal for playlist add

* Add remove from playlist from context menu

* Set jellyfin to use playlistItemId

* Adjust font sizing

* Add playlist add from detail pages

* Bump mantine to v6-alpha.2

src/renderer/features/playlists/components/add-to-playlist-context-modal.tsx

@@ -0,0 +1,212 @@
+import { Box, Group, Stack } from '@mantine/core';
+import { useForm } from '@mantine/form';
+import { closeModal, ContextModalProps } from '@mantine/modals';
+import { useMemo, useState } from 'react';
+import { api } from '/@/renderer/api';
+import { queryKeys } from '/@/renderer/api/query-keys';
+import { PlaylistListSort, SongListQuery, SongListSort, SortOrder } from '/@/renderer/api/types';
+import { Button, MultiSelect, Switch, toast } from '/@/renderer/components';
+import { useAddToPlaylist } from '/@/renderer/features/playlists/mutations/add-to-playlist-mutation';
+import { usePlaylistList } from '/@/renderer/features/playlists/queries/playlist-list-query';
+import { queryClient } from '/@/renderer/lib/react-query';
+import { useCurrentServer } from '/@/renderer/store';
+
+export const AddToPlaylistContextModal = ({
+  id,
+  innerProps,
+}: ContextModalProps<{
+  albumId?: string[];
+  artistId?: string[];
+  songId?: string[];
+}>) => {
+  const { albumId, artistId, songId } = innerProps;
+  const server = useCurrentServer();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const addToPlaylistMutation = useAddToPlaylist();
+
+  const playlistList = usePlaylistList({
+    ndParams: {
+      smart: false,
+    },
+    sortBy: PlaylistListSort.NAME,
+    sortOrder: SortOrder.ASC,
+    startIndex: 0,
+  });
+
+  const playlistSelect = useMemo(() => {
+    return (
+      playlistList.data?.items?.map((playlist) => ({
+        label: playlist.name,
+        value: playlist.id,
+      })) || []
+    );
+  }, [playlistList.data]);
+
+  const form = useForm({
+    initialValues: {
+      playlistId: [],
+      skipDuplicates: true,
+    },
+  });
+
+  const getSongsByAlbum = async (albumId: string) => {
+    const query: SongListQuery = {
+      albumIds: [albumId],
+      sortBy: SongListSort.ALBUM,
+      sortOrder: SortOrder.ASC,
+      startIndex: 0,
+    };
+
+    const queryKey = queryKeys.songs.list(server?.id || '', query);
+
+    const songsRes = await queryClient.fetchQuery(queryKey, ({ signal }) =>
+      api.controller.getSongList({ query, server, signal }),
+    );
+
+    return api.normalize.songList(songsRes, server);
+  };
+
+  const getSongsByArtist = async (artistId: string) => {
+    const query: SongListQuery = {
+      artistIds: [artistId],
+      sortBy: SongListSort.ARTIST,
+      sortOrder: SortOrder.ASC,
+      startIndex: 0,
+    };
+
+    const queryKey = queryKeys.songs.list(server?.id || '', query);
+
+    const songsRes = await queryClient.fetchQuery(queryKey, ({ signal }) =>
+      api.controller.getSongList({ query, server, signal }),
+    );
+
+    return api.normalize.songList(songsRes, server);
+  };
+
+  const isSubmitDisabled = form.values.playlistId.length === 0 || addToPlaylistMutation.isLoading;
+
+  const handleSubmit = form.onSubmit(async (values) => {
+    setIsLoading(true);
+    const allSongIds: string[] = [];
+    const uniqueSongIds: string[] = [];
+
+    if (albumId && albumId.length > 0) {
+      for (const id of albumId) {
+        const songs = await getSongsByAlbum(id);
+        allSongIds.push(...(songs?.items?.map((song) => song.id) || []));
+      }
+    }
+
+    if (artistId && artistId.length > 0) {
+      for (const id of artistId) {
+        const songs = await getSongsByArtist(id);
+        allSongIds.push(...(songs?.items?.map((song) => song.id) || []));
+      }
+    }
+
+    if (songId && songId.length > 0) {
+      allSongIds.push(...songId);
+    }
+
+    for (const playlistId of values.playlistId) {
+      if (values.skipDuplicates) {
+        const query = {
+          id: playlistId,
+          startIndex: 0,
+        };
+
+        const queryKey = queryKeys.playlists.songList(server?.id || '', playlistId, query);
+
+        const playlistSongsRes = await queryClient.fetchQuery(queryKey, ({ signal }) =>
+          api.controller.getPlaylistSongList({
+            query: { id: playlistId, startIndex: 0 },
+            server,
+            signal,
+          }),
+        );
+
+        const playlistSongIds = api.normalize
+          .songList(playlistSongsRes, server)
+          .items?.map((song) => song.id);
+
+        for (const songId of allSongIds) {
+          if (!playlistSongIds?.includes(songId)) {
+            uniqueSongIds.push(songId);
+          }
+        }
+      }
+
+      if (values.skipDuplicates ? uniqueSongIds.length > 0 : allSongIds.length > 0) {
+        addToPlaylistMutation.mutate(
+          {
+            body: { songId: values.skipDuplicates ? uniqueSongIds : allSongIds },
+            query: { id: playlistId },
+          },
+          {
+            onError: (err) => {
+              toast.error({
+                message: `[${
+                  playlistSelect.find((playlist) => playlist.value === playlistId)?.label
+                }] ${err.message}`,
+                title: 'Failed to add songs to playlist',
+              });
+            },
+          },
+        );
+      }
+    }
+
+    setIsLoading(false);
+    toast.success({
+      message: `Added ${
+        values.skipDuplicates ? uniqueSongIds.length : allSongIds.length
+      } songs to ${values.playlistId.length} playlist(s)`,
+    });
+    closeModal(id);
+    return null;
+  });
+
+  return (
+    <Box p="1rem">
+      <form onSubmit={handleSubmit}>
+        <Stack>
+          <MultiSelect
+            clearable
+            searchable
+            data={playlistSelect}
+            disabled={playlistList.isLoading}
+            label="Playlists"
+            size="md"
+            {...form.getInputProps('playlistId')}
+          />
+          <Switch
+            label="Skip duplicates"
+            {...form.getInputProps('skipDuplicates', { type: 'checkbox' })}
+          />
+          <Group position="right">
+            <Group>
+              <Button
+                disabled={addToPlaylistMutation.isLoading}
+                size="md"
+                variant="subtle"
+                onClick={() => closeModal(id)}
+              >
+                Cancel
+              </Button>
+              <Button
+                disabled={isSubmitDisabled}
+                loading={isLoading}
+                size="md"
+                type="submit"
+                variant="filled"
+              >
+                Add
+              </Button>
+            </Group>
+          </Group>
+        </Stack>
+      </form>
+    </Box>
+  );
+};

src/renderer/features/playlists/components/playlist-detail-content.tsx

@@ -28,7 +28,7 @@ import {
   VirtualTable,
 } from '/@/renderer/components';
 import { useHandleTableContextMenu } from '/@/renderer/features/context-menu';
-import { SONG_CONTEXT_MENU_ITEMS } from '/@/renderer/features/context-menu/context-menu-items';
+import { PLAYLIST_SONG_CONTEXT_MENU_ITEMS } from '/@/renderer/features/context-menu/context-menu-items';
 import { usePlayQueueAdd } from '/@/renderer/features/player';
 import { UpdatePlaylistForm } from '/@/renderer/features/playlists/components/update-playlist-form';
 import { useDeletePlaylist } from '/@/renderer/features/playlists/mutations/delete-playlist-mutation';
@@ -90,7 +90,11 @@ export const PlaylistDetailContent = ({ tableRef }: PlaylistDetailContentProps)
     [page.table.columns],
   );
 
-  const handleContextMenu = useHandleTableContextMenu(LibraryItem.SONG, SONG_CONTEXT_MENU_ITEMS);
+  const handleContextMenu = useHandleTableContextMenu(
+    LibraryItem.SONG,
+    PLAYLIST_SONG_CONTEXT_MENU_ITEMS,
+    { playlistId },
+  );
 
   const playlistSongData = useMemo(
     () => playlistSongsQueryInfinite.data?.pages.flatMap((p) => p.items),

src/renderer/features/playlists/components/playlist-detail-song-list-content.tsx

@@ -26,7 +26,7 @@ import { useQueryClient } from '@tanstack/react-query';
 import { AnimatePresence } from 'framer-motion';
 import debounce from 'lodash/debounce';
 import { useHandleTableContextMenu } from '/@/renderer/features/context-menu';
-import { SONG_CONTEXT_MENU_ITEMS } from '/@/renderer/features/context-menu/context-menu-items';
+import { PLAYLIST_SONG_CONTEXT_MENU_ITEMS } from '/@/renderer/features/context-menu/context-menu-items';
 import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
 import {
   LibraryItem,
@@ -185,7 +185,11 @@ export const PlaylistDetailSongListContent = ({ tableRef }: PlaylistDetailConten
     setPagination(playlistId, { scrollOffset });
   };
 
-  const handleContextMenu = useHandleTableContextMenu(LibraryItem.SONG, SONG_CONTEXT_MENU_ITEMS);
+  const handleContextMenu = useHandleTableContextMenu(
+    LibraryItem.SONG,
+    PLAYLIST_SONG_CONTEXT_MENU_ITEMS,
+    { playlistId, tableRef },
+  );
 
   const handleRowDoubleClick = (e: RowDoubleClickedEvent<QueueSong>) => {
     if (!e.data) return;

src/renderer/features/playlists/index.ts

@@ -1,5 +1,8 @@
 export * from './queries/playlist-list-query';
+export * from './components/add-to-playlist-context-modal';
 export * from './components/create-playlist-form';
 export * from './mutations/delete-playlist-mutation';
 export * from './mutations/create-playlist-mutation';
 export * from './mutations/update-playlist-mutation';
+export * from './mutations/add-to-playlist-mutation';
+export * from './mutations/remove-from-playlist-mutation';

src/renderer/features/playlists/mutations/add-to-playlist-mutation.ts

@@ -0,0 +1,28 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { HTTPError } from 'ky';
+import { api } from '/@/renderer/api';
+import { queryKeys } from '/@/renderer/api/query-keys';
+import { AddToPlaylistArgs, RawAddToPlaylistResponse } from '/@/renderer/api/types';
+import { MutationOptions } from '/@/renderer/lib/react-query';
+import { useCurrentServer } from '/@/renderer/store';
+
+export const useAddToPlaylist = (options?: MutationOptions) => {
+  const queryClient = useQueryClient();
+  const server = useCurrentServer();
+
+  return useMutation<RawAddToPlaylistResponse, HTTPError, Omit<AddToPlaylistArgs, 'server'>, null>({
+    mutationFn: (args) => api.controller.addToPlaylist({ ...args, server }),
+    onSuccess: (_data, variables) => {
+      queryClient.invalidateQueries(queryKeys.playlists.list(server?.id || ''), { exact: false });
+
+      queryClient.invalidateQueries(
+        queryKeys.playlists.detail(server?.id || '', variables.query.id),
+      );
+
+      queryClient.invalidateQueries(
+        queryKeys.playlists.detailSongList(server?.id || '', variables.query.id),
+      );
+    },
+    ...options,
+  });
+};

src/renderer/features/playlists/mutations/remove-from-playlist-mutation.ts

@@ -0,0 +1,33 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { HTTPError } from 'ky';
+import { api } from '/@/renderer/api';
+import { queryKeys } from '/@/renderer/api/query-keys';
+import { RawRemoveFromPlaylistResponse, RemoveFromPlaylistArgs } from '/@/renderer/api/types';
+import { MutationOptions } from '/@/renderer/lib/react-query';
+import { useCurrentServer } from '/@/renderer/store';
+
+export const useRemoveFromPlaylist = (options?: MutationOptions) => {
+  const queryClient = useQueryClient();
+  const server = useCurrentServer();
+
+  return useMutation<
+    RawRemoveFromPlaylistResponse,
+    HTTPError,
+    Omit<RemoveFromPlaylistArgs, 'server'>,
+    null
+  >({
+    mutationFn: (args) => api.controller.removeFromPlaylist({ ...args, server }),
+    onSuccess: (_data, variables) => {
+      queryClient.invalidateQueries(queryKeys.playlists.list(server?.id || ''), { exact: false });
+
+      queryClient.invalidateQueries(
+        queryKeys.playlists.detail(server?.id || '', variables.query.id),
+      );
+
+      queryClient.invalidateQueries(
+        queryKeys.playlists.detailSongList(server?.id || '', variables.query.id),
+      );
+    },
+    ...options,
+  });
+};