From 4121502bfe6d159206f629efebde09d0b1b125c2 Mon Sep 17 00:00:00 2001
From: Fredrik Burmester <fredrik.burmester@gmail.com>
Date: Sun, 4 Jan 2026 13:44:53 +0100
Subject: [PATCH] fix: remove song from playlist

---
 .../music/playlist/[playlistId].tsx           | 14 ++++++++++
 components/music/TrackOptionsSheet.tsx        | 26 +++++++++++++++++++
 hooks/usePlaylistMutations.ts                 |  3 +++
 translations/en.json                          |  3 ++-
 4 files changed, 45 insertions(+), 1 deletion(-)

diff --git a/app/(auth)/(tabs)/(home,libraries,search,favorites,watchlists)/music/playlist/[playlistId].tsx b/app/(auth)/(tabs)/(home,libraries,search,favorites,watchlists)/music/playlist/[playlistId].tsx
index ab32a235..4a8dabd4 100644
--- a/app/(auth)/(tabs)/(home,libraries,search,favorites,watchlists)/music/playlist/[playlistId].tsx
+++ b/app/(auth)/(tabs)/(home,libraries,search,favorites,watchlists)/music/playlist/[playlistId].tsx
@@ -21,6 +21,7 @@ import { CreatePlaylistModal } from "@/components/music/CreatePlaylistModal";
 import { MusicTrackItem } from "@/components/music/MusicTrackItem";
 import { PlaylistPickerSheet } from "@/components/music/PlaylistPickerSheet";
 import { TrackOptionsSheet } from "@/components/music/TrackOptionsSheet";
+import { useRemoveFromPlaylist } from "@/hooks/usePlaylistMutations";
 import { downloadTrack, getLocalPath } from "@/providers/AudioStorage";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useMusicPlayer } from "@/providers/MusicPlayerProvider";
@@ -46,6 +47,8 @@ export default function PlaylistDetailScreen() {
   const [createPlaylistOpen, setCreatePlaylistOpen] = useState(false);
   const [isDownloading, setIsDownloading] = useState(false);
 
+  const removeFromPlaylist = useRemoveFromPlaylist();
+
   const handleTrackOptionsPress = useCallback((track: BaseItemDto) => {
     setSelectedTrack(track);
     setTrackOptionsOpen(true);
@@ -59,6 +62,15 @@ export default function PlaylistDetailScreen() {
     setCreatePlaylistOpen(true);
   }, []);
 
+  const handleRemoveFromPlaylist = useCallback(() => {
+    if (selectedTrack?.Id && playlistId) {
+      removeFromPlaylist.mutate({
+        playlistId,
+        entryIds: [selectedTrack.PlaylistItemId ?? selectedTrack.Id],
+      });
+    }
+  }, [selectedTrack, playlistId, removeFromPlaylist]);
+
   const { data: playlist, isLoading: loadingPlaylist } = useQuery({
     queryKey: ["music-playlist", playlistId, user?.Id],
     queryFn: async () => {
@@ -269,6 +281,8 @@ export default function PlaylistDetailScreen() {
             setOpen={setTrackOptionsOpen}
             track={selectedTrack}
             onAddToPlaylist={handleAddToPlaylist}
+            playlistId={playlistId}
+            onRemoveFromPlaylist={handleRemoveFromPlaylist}
           />
           <PlaylistPickerSheet
             open={playlistPickerOpen}
diff --git a/components/music/TrackOptionsSheet.tsx b/components/music/TrackOptionsSheet.tsx
index af1b3605..05d8ec98 100644
--- a/components/music/TrackOptionsSheet.tsx
+++ b/components/music/TrackOptionsSheet.tsx
@@ -42,6 +42,8 @@ interface Props {
   setOpen: (open: boolean) => void;
   track: BaseItemDto | null;
   onAddToPlaylist: () => void;
+  playlistId?: string;
+  onRemoveFromPlaylist?: () => void;
 }
 
 export const TrackOptionsSheet: React.FC<Props> = ({
@@ -49,6 +51,8 @@ export const TrackOptionsSheet: React.FC<Props> = ({
   setOpen,
   track,
   onAddToPlaylist,
+  playlistId,
+  onRemoveFromPlaylist,
 }) => {
   const bottomSheetModalRef = useRef<BottomSheetModal>(null);
   const [api] = useAtom(apiAtom);
@@ -132,6 +136,13 @@ export const TrackOptionsSheet: React.FC<Props> = ({
     }, 300);
   }, [onAddToPlaylist, setOpen]);
 
+  const handleRemoveFromPlaylist = useCallback(() => {
+    if (onRemoveFromPlaylist) {
+      onRemoveFromPlaylist();
+      setOpen(false);
+    }
+  }, [onRemoveFromPlaylist, setOpen]);
+
   const handleDownload = useCallback(async () => {
     if (!track?.Id || !api || !user?.Id || isAlreadyDownloaded) return;
 
@@ -298,6 +309,21 @@ export const TrackOptionsSheet: React.FC<Props> = ({
             </Text>
           </TouchableOpacity>
 
+          {playlistId && (
+            <>
+              <View style={styles.separator} />
+              <TouchableOpacity
+                onPress={handleRemoveFromPlaylist}
+                className='flex-row items-center px-4 py-3.5'
+              >
+                <Ionicons name='trash-outline' size={22} color='#ef4444' />
+                <Text className='text-red-500 ml-4 text-base'>
+                  {t("music.track_options.remove_from_playlist")}
+                </Text>
+              </TouchableOpacity>
+            </>
+          )}
+
           <View style={styles.separator} />
 
           <TouchableOpacity
diff --git a/hooks/usePlaylistMutations.ts b/hooks/usePlaylistMutations.ts
index 65e83e77..9f35e660 100644
--- a/hooks/usePlaylistMutations.ts
+++ b/hooks/usePlaylistMutations.ts
@@ -136,6 +136,9 @@ export const useRemoveFromPlaylist = () => {
       queryClient.invalidateQueries({
         queryKey: ["music-playlist", variables.playlistId],
       });
+      queryClient.invalidateQueries({
+        queryKey: ["music-playlist-tracks", variables.playlistId],
+      });
       if (variables.playlistName) {
         toast.success(
           t("music.playlists.removed_from", { name: variables.playlistName }),
diff --git a/translations/en.json b/translations/en.json
index da3d5a7f..a45fc60b 100644
--- a/translations/en.json
+++ b/translations/en.json
@@ -653,7 +653,8 @@
       "go_to_artist": "Go to Artist",
       "go_to_album": "Go to Album",
       "add_to_favorites": "Add to Favorites",
-      "remove_from_favorites": "Remove from Favorites"
+      "remove_from_favorites": "Remove from Favorites",
+      "remove_from_playlist": "Remove from Playlist"
     },
     "playlists": {
       "create_playlist": "Create Playlist",