now make it do the thing!

components/Player/screens/queue.tsx

@@ -36,6 +36,9 @@ export default function Queue({ navigation }: { navigation: NativeStackNavigatio
                 return `${index}-${item.Id}`
             }}
             numColumns={1}
+            onDragEnd={({ data, from, to}) => {
+                
+            }}
             renderItem={({ item: queueItem, getIndex, drag, isActive }) => {
 
                 const index = getIndex();

player/interfaces.ts

@@ -1,3 +1,4 @@
+import { JellifyTrack } from "@/types/JellifyTrack";
 import { QueuingType } from "../enums/queuing-type";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 
@@ -12,4 +13,10 @@ export interface QueueMutation {
 export interface AddToQueueMutation {
     track: BaseItemDto,
     queuingType?: QueuingType | undefined;
+}
+
+export interface QueueOrderMutation {
+    newOrder: JellifyTrack[];
+    from: number;
+    to: number;
 }

player/provider.tsx

@@ -16,7 +16,7 @@ import { trigger } from "react-native-haptic-feedback";
 import { getQueue, pause, seekTo, skip, skipToNext, skipToPrevious } from "react-native-track-player/lib/src/trackPlayer";
 import { convertRunTimeTicksToSeconds } from "../helpers/runtimeticks";
 import Client from "../api/client";
-import { AddToQueueMutation, QueueMutation } from "./interfaces";
+import { AddToQueueMutation, QueueMutation, QueueOrderMutation } from "./interfaces";
 import { Section } from "../components/Player/types";
 
 interface PlayerContext {
@@ -32,6 +32,7 @@ interface PlayerContext {
     getQueueSectionData: () => Section[];
     useAddToQueue: UseMutationResult<void, Error, AddToQueueMutation, unknown>;
     useClearQueue: UseMutationResult<void, Error, void, unknown>;
+    useReorderQueue: UseMutationResult<void, Error, QueueOrderMutation, unknown>;
     useTogglePlayback: UseMutationResult<void, Error, number | undefined, unknown>;
     useSeekTo: UseMutationResult<void, Error, number, unknown>;
     useSkip: UseMutationResult<void, Error, number | undefined, unknown>;
@@ -131,6 +132,14 @@ const PlayerContextInitializer = () => {
 
             setQueue(await getQueue() as JellifyTrack[]);
         }
+    });
+
+    const useReorderQueue = useMutation({
+        mutationFn: async (mutation : QueueOrderMutation) => {
+            await TrackPlayer.move(mutation.from, mutation.to);
+
+            setQueue(mutation.newOrder);
+        }
     })
 
     const useTogglePlayback = useMutation({
@@ -311,6 +320,7 @@ const PlayerContextInitializer = () => {
         getQueueSectionData,
         useAddToQueue,
         useClearQueue,
+        useReorderQueue,
         useTogglePlayback,
         useSeekTo,
         useSkip,
@@ -370,6 +380,24 @@ export const PlayerContext = createContext<PlayerContext>({
         failureReason: null,
         submittedAt: 0
     },
+    useReorderQueue: {
+        mutate: () => {},
+        mutateAsync: async () => {},
+        data: undefined,
+        error: null,
+        variables: undefined,
+        isError: false,
+        isIdle: true,
+        isPaused: false,
+        isPending: false,
+        isSuccess: false,
+        status: "idle",
+        reset: () => {},
+        context: {},
+        failureCount: 0,
+        failureReason: null,
+        submittedAt: 0
+    },
     useTogglePlayback: {
         mutate: () => {},
         mutateAsync: async () => {},
@@ -479,6 +507,7 @@ export const PlayerProvider: ({ children }: { children: ReactNode }) => React.JS
         getQueueSectionData,
         useAddToQueue,
         useClearQueue,
+        useReorderQueue,
         useTogglePlayback,
         useSeekTo,
         useSkip,
@@ -501,6 +530,7 @@ export const PlayerProvider: ({ children }: { children: ReactNode }) => React.JS
         getQueueSectionData,
         useAddToQueue,
         useClearQueue,
+        useReorderQueue,
         useTogglePlayback,
         useSeekTo,
         useSkip,