uwu whats this

components/Player/screens/queue.tsx

@@ -2,26 +2,24 @@ import Track from "../../../components/Global/components/track";
 import { StackParamList } from "../../../components/types";
 import { usePlayerContext } from "../../../player/provider";
 import { NativeStackNavigationProp } from "@react-navigation/native-stack";
-import { FlatList } from "react-native";
+import { FlatList, SectionList } from "react-native";
 import { SafeAreaView, useSafeAreaFrame } from "react-native-safe-area-context";
 
 export default function Queue({ navigation }: { navigation: NativeStackNavigationProp<StackParamList>}): React.JSX.Element {
 
     const { width } = useSafeAreaFrame();
-    const { queue, useSkip, nowPlaying } = usePlayerContext();
+    const { getQueueSectionData, queue, useSkip, nowPlaying } = usePlayerContext();
 
     const scrollIndex = queue.findIndex(queueItem => queueItem.item.Id! === nowPlaying!.item.Id!)
 
     return (
         <SafeAreaView edges={["right", "left"]}>
-            <FlatList
-                data={queue}
-                extraData={nowPlaying}
+            <SectionList
+                sections={getQueueSectionData()}
                 getItemLayout={(data, index) => (
                     { length: width / 9, offset: width / 9 * index, index}
                 )}
                 initialScrollIndex={scrollIndex !== -1 ? scrollIndex: 0}
-                numColumns={1}
                 renderItem={({ item: queueItem, index }) => {
                     return (
                         <Track

components/Player/types.ts

@@ -0,0 +1,9 @@
+import { QueuingType } from "../../enums/queuing-type";
+import { JellifyTrack } from "../../types/JellifyTrack";
+
+export type Item = JellifyTrack;
+
+export type Section = {
+    title: QueuingType,
+    data: Item[]
+}

player/provider.tsx

@@ -17,6 +17,7 @@ import { getQueue, pause, seekTo, skip, skipToNext, skipToPrevious } from "react
 import { convertRunTimeTicksToSeconds } from "../helpers/runtimeticks";
 import Client from "../api/client";
 import { AddToQueueMutation, QueueMutation } from "./interfaces";
+import { Section } from "../components/Player/types";
 
 interface PlayerContext {
     showPlayer: boolean;
@@ -28,6 +29,7 @@ interface PlayerContext {
     nowPlaying: JellifyTrack | undefined;
     queue: JellifyTrack[];
     queueName: string | undefined;
+    getQueueSectionData: () => Section[];
     useAddToQueue: UseMutationResult<void, Error, AddToQueueMutation, unknown>;
     useTogglePlayback: UseMutationResult<void, Error, number | undefined, unknown>;
     useSeekTo: UseMutationResult<void, Error, number, unknown>;
@@ -65,6 +67,15 @@ const PlayerContextInitializer = () => {
 
         TrackPlayer.play();
     }
+
+    const getQueueSectionData : () => Section[] = () => {
+        return Object.keys(QueuingType).map((type) => {
+            return {
+                title: type,
+                data: queue.filter(track => track.QueuingType === type)
+            } as Section
+        });
+    }
     
     const resetQueue = async (hideMiniplayer?: boolean | undefined) => {
         console.debug("Clearing queue")
@@ -286,6 +297,7 @@ const PlayerContextInitializer = () => {
         nowPlaying,
         queue,
         queueName,
+        getQueueSectionData,
         useAddToQueue,
         useTogglePlayback,
         useSeekTo,
@@ -309,6 +321,7 @@ export const PlayerContext = createContext<PlayerContext>({
     nowPlaying: undefined,
     queue: [],
     queueName: undefined,
+    getQueueSectionData: () => [],
     useAddToQueue: {
         mutate: () => {},
         mutateAsync: async () => {},
@@ -433,6 +446,7 @@ export const PlayerProvider: ({ children }: { children: ReactNode }) => React.JS
         nowPlaying,
         queue, 
         queueName,
+        getQueueSectionData,
         useAddToQueue,
         useTogglePlayback,
         useSeekTo,
@@ -453,6 +467,7 @@ export const PlayerProvider: ({ children }: { children: ReactNode }) => React.JS
         nowPlaying,
         queue,
         queueName,
+        getQueueSectionData,
         useAddToQueue,
         useTogglePlayback,
         useSeekTo,