fix: remove song from playlist

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}

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

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 }),

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",