From dfe5c96faa3ebbc4f2b93dd0ca717fde83d11593 Mon Sep 17 00:00:00 2001
From: Violet Caulfield <violet@cosmonautical.cloud>
Date: Mon, 27 Jan 2025 19:34:30 -0600
Subject: [PATCH] getting ready to add that same reordering to playlists

---
 api/mutations/functions/playlists.ts | 13 +++++
 api/queries/functions/playlists.ts   |  1 -
 components/Player/screens/queue.tsx  | 35 +++++--------
 components/Playlist/component.tsx    | 76 ++++++++++++++--------------
 4 files changed, 64 insertions(+), 61 deletions(-)
 create mode 100644 api/mutations/functions/playlists.ts

diff --git a/api/mutations/functions/playlists.ts b/api/mutations/functions/playlists.ts
new file mode 100644
index 00000000..af6159a1
--- /dev/null
+++ b/api/mutations/functions/playlists.ts
@@ -0,0 +1,13 @@
+import Client from "@/api/client";
+import { getPlaylistsApi } from "@jellyfin/sdk/lib/utils/api";
+
+
+
+export async function reorderPlaylist(playlistId: string, itemId: string, to: number) {
+    return getPlaylistsApi(Client.api!)
+        .moveItem({
+            playlistId, 
+            itemId,
+            newIndex: to
+        });
+}
\ No newline at end of file
diff --git a/api/queries/functions/playlists.ts b/api/queries/functions/playlists.ts
index 92646b82..2a33bcd6 100644
--- a/api/queries/functions/playlists.ts
+++ b/api/queries/functions/playlists.ts
@@ -1,5 +1,4 @@
 import Client from "../../client";
-import { Api } from "@jellyfin/sdk";
 import { BaseItemDto, ItemSortBy, SortOrder } from "@jellyfin/sdk/lib/generated-client/models";
 import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
 
diff --git a/components/Player/screens/queue.tsx b/components/Player/screens/queue.tsx
index 0ce850e2..09e63d58 100644
--- a/components/Player/screens/queue.tsx
+++ b/components/Player/screens/queue.tsx
@@ -45,29 +45,18 @@ export default function Queue({ navigation }: { navigation: NativeStackNavigatio
                 const index = getIndex();
 
                 return (
-                    <SwipeableItem
-                        key={index}
-                        item={queueItem}
-                        renderUnderlayLeft={() => (
-                            <Icon name="close" onPress={() => {
-
-                            }} />
-                        )}
-                        >
-
-                        <Track
-                            navigation={navigation}
-                            track={queueItem.item}
-                            tracklist={queue.map((track) => track.item)}
-                            index={getIndex()}
-                            showArtwork
-                            onPress={() => {
-                                useSkip.mutate(index);
-                            }}
-                            onLongPress={drag}
-                            isNested
-                            />
-                    </SwipeableItem>
+                    <Track
+                        navigation={navigation}
+                        track={queueItem.item}
+                        tracklist={queue.map((track) => track.item)}
+                        index={getIndex()}
+                        showArtwork
+                        onPress={() => {
+                            useSkip.mutate(index);
+                        }}
+                        onLongPress={drag}
+                        isNested
+                        />
                 )
             }}
         />
diff --git a/components/Playlist/component.tsx b/components/Playlist/component.tsx
index f1375934..9cf96dbd 100644
--- a/components/Playlist/component.tsx
+++ b/components/Playlist/component.tsx
@@ -33,44 +33,46 @@ export default function Playlist({
     ]);
 
     return (
-        <ScrollView contentInsetAdjustmentBehavior="automatic">
-            <YStack alignItems="center">
-                <BlurhashedImage
-                    item={playlist}
-                    width={300}
-                />
+        <FlatList
+            contentInsetAdjustmentBehavior="automatic"
+            data={tracks}
+            extraData={nowPlaying}
+            ListHeaderComponent={() => (
+                <YStack alignItems="center">
+                    <BlurhashedImage
+                        item={playlist}
+                        width={300}
+                    />
 
-                <H4>{ playlist.Name ?? "Untitled Playlist" }</H4>
-                <H5>{ playlist.ProductionYear?.toString() ?? "" }</H5>
-            </YStack>
-            <FlatList
-                data={tracks}
-                extraData={nowPlaying}
-                numColumns={1}
-                renderItem={({ item: track, index }) => {
+                    <H4>{ playlist.Name ?? "Untitled Playlist" }</H4>
+                    <H5>{ playlist.ProductionYear?.toString() ?? "" }</H5>
+                </YStack>
+            )}
+            numColumns={1}
+            renderItem={({ item: track, index }) => {
 
-                    return (
-                        <Track
-                            navigation={navigation}
-                            track={track}
-                            tracklist={tracks!}
-                            index={index}
-                            queueName={playlist.Name ?? "Untitled Playlist"}
-                            showArtwork
-                        />
-                    )
-
-            }}/>
-
-            <XStack justifyContent="flex-end">
-                <Text 
-                    color={"$borderColor"} 
-                    style={{ display: "block"}}
-                >
-                    Total Runtime:
-                </Text>
-                <RunTimeTicks>{ playlist.RunTimeTicks }</RunTimeTicks>
-            </XStack>
-        </ScrollView>
+                return (
+                    <Track
+                        navigation={navigation}
+                        track={track}
+                        tracklist={tracks!}
+                        index={index}
+                        queueName={playlist.Name ?? "Untitled Playlist"}
+                        showArtwork
+                    />
+                )    
+            }}
+            ListFooterComponent={() => (
+                <XStack justifyContent="flex-end">
+                    <Text 
+                        color={"$borderColor"} 
+                        style={{ display: "block"}}
+                    >
+                        Total Runtime:
+                    </Text>
+                    <RunTimeTicks>{ playlist.RunTimeTicks }</RunTimeTicks>
+                </XStack>
+            )}
+        />
     )
 }
\ No newline at end of file