Add delete playlist modal

api/mutations/functions/playlists.ts

@@ -1,6 +1,6 @@
 import { BaseItemDto, MediaType } from "@jellyfin/sdk/lib/generated-client/models";
 import Client from "../../../api/client";
-import { getPlaylistsApi } from "@jellyfin/sdk/lib/utils/api";
+import { getLibraryApi, getPlaylistsApi } from "@jellyfin/sdk/lib/utils/api";
 
 export async function addToPlaylist(track: BaseItemDto, playlist: BaseItemDto) {
 
@@ -40,7 +40,7 @@ export async function reorderPlaylist(playlistId: string, itemId: string, to: nu
 }
 
 export async function createPlaylist(name: string) {
-    console.debug("Creating new playlist");
+    console.debug("Creating new playlist...");
 
     return getPlaylistsApi(Client.api!)
         .createPlaylist({
@@ -52,6 +52,15 @@ export async function createPlaylist(name: string) {
         });
 }
 
+export async function deletePlaylist(playlistId: string) {
+    console.debug("Deleting playlist...");
+
+    return getLibraryApi(Client.api!)
+        .deleteItem({
+            itemId: playlistId
+        })
+}
+
 /**
  * Updates a Jellyfin playlist with the provided options.
  * 

components/Library/components/delete-playlist.tsx

@@ -0,0 +1,47 @@
+import { View, XStack } from "tamagui";
+import { DeletePlaylistProps } from "../../../components/types";
+import Button from "../../../components/Global/helpers/button";
+import { Text } from "../../../components/Global/helpers/text";
+import { useMutation } from "@tanstack/react-query";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { deletePlaylist } from "../../../api/mutations/functions/playlists";
+import { trigger } from "react-native-haptic-feedback";
+
+import * as Burnt from "burnt";
+
+export default function DeletePlaylist(
+{ 
+    navigation, 
+    route 
+}: DeletePlaylistProps) : React.JSX.Element {
+
+
+    const useDeletePlaylist = useMutation({
+        mutationFn: (playlist: BaseItemDto) => deletePlaylist(playlist.Id!),
+        onSuccess: (data, playlist) => {
+            trigger("notificationSuccess");
+
+            Burnt.alert({
+                title: `Playlist deleted`,
+                message: `Deleted ${playlist.Name ?? "Untitled Playlist"}`,
+                duration: 1,
+                preset: 'done'
+            });
+            
+        },
+        onError: () => {
+            trigger("notificationError");
+        }
+    })
+
+    return (
+        <View marginHorizontal={"$2"}>
+            <Text>{`Delete playlist ${route.params.playlist.Name ?? "Untitled Playlist"}?`}</Text>
+            <XStack justifyContent="space-evenly">
+                <Button onPress={() => navigation.goBack()}>Cancel</Button>
+                <Button danger onPress={() => useDeletePlaylist.mutate(route.params.playlist)}>Delete</Button>
+            </XStack>
+        </View>
+        
+    )
+}

components/Library/stack.tsx

@@ -11,6 +11,7 @@ import TracksScreen from "../Tracks/screen";
 import DetailsScreen from "../ItemDetail/screen";
 import PlaylistsScreen from "../Playlists/screen";
 import AddPlaylist from "./components/add-playlist";
+import DeletePlaylist from "./components/delete-playlist";
 
 const Stack = createNativeStackNavigator<StackParamList>();
 
@@ -111,6 +112,14 @@ export default function LibraryStack(): React.JSX.Element {
                         title: "Add Playlist",
                     }}
                 />
+
+                <Stack.Screen
+                    name="DeletePlaylist"
+                    component={DeletePlaylist}
+                    options={{
+                        title: "Delete Playlist"
+                    }}
+                />
             </Stack.Group>
 
         </Stack.Navigator>

components/Player/mini-player.tsx

@@ -73,7 +73,7 @@ export function Miniplayer({ navigation }: { navigation : NavigationHelpers<Para
                                         color={theme.borderColor.val}
                                         name="skip-next" 
                                         onPress={() => useSkip.mutate(undefined)}
-                                        />
+                                    />
                                 </XStack>
                             </XStack>
                         )

components/Playlist/component.tsx

@@ -1,7 +1,7 @@
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { NativeStackNavigationProp } from "@react-navigation/native-stack";
 import { StackParamList } from "../types";
-import { getTokens, Separator, XStack, YStack } from "tamagui";
+import { getToken, getTokens, Separator, XStack, YStack } from "tamagui";
 import { useItemTracks } from "../../api/queries/tracks";
 import { RunTimeTicks } from "../Global/helpers/time-codes";
 import { H4, H5, Text } from "../Global/helpers/text";
@@ -45,14 +45,27 @@ export default function Playlist({
     navigation.setOptions({
         headerRight: () => {
             return (
-                <Icon 
-                    color={editing 
-                        ? getTokens().color.telemagenta.val 
-                        : getTokens().color.white.val
-                    }
-                    name={editing ? 'check' : 'pencil'} 
-                    onPress={() => setEditing(!editing)} 
-                />
+
+                <XStack justifyContent="space-between">
+
+                    { editing && (
+                        <Icon
+                            color={getToken("$color.danger")}
+                            name="delete-sweep-outline" // otherwise use "delete-circle"
+                            onPress={() => navigation.navigate("DeletePlaylist", { playlist })}
+                        />
+
+                    )}
+
+                    <Icon 
+                        color={editing 
+                            ? getTokens().color.amethyst.val 
+                            : getTokens().color.white.val
+                        }
+                        name={editing ? 'check' : 'pencil'} 
+                        onPress={() => setEditing(!editing)} 
+                    />
+                </XStack>
             )
         }
     });

components/types.d.ts

@@ -26,6 +26,9 @@ export type StackParamList = {
     Tracks: undefined;
     Genres: undefined;
     Playlists: undefined;
+    DeletePlaylist: {
+        playlist: BaseItemDto
+    }
 
     Search: undefined;
 
@@ -84,6 +87,7 @@ export type ArtistsProps = NativeStackScreenProps<StackParamList, "Artists">;
 export type AlbumsProps = NativeStackScreenProps<StackParamList, "Albums">;
 
 export type FavoritePlaylistsProps = NativeStackScreenProps<StackParamList, "Playlists">;
+export type DeletePlaylistProps = NativeStackScreenProps<StackParamList, "DeletePlaylist">;
 
 export type FavoriteTracksProps = NativeStackScreenProps<StackParamList, "Tracks">;
 

tamagui.config.ts

@@ -5,6 +5,7 @@ import { headingFont, bodyFont } from './fonts.config'
 const tokens = createTokens({
   ...TamaguiTokens,
   color: {
+    danger: "#691029",
     purpleDark: "#0C0622",
     purple: "#100538",
     purpleGray: "#66617B",