add some player controls

components/Player/mini-player.tsx

@@ -1,11 +1,13 @@
 import React from "react";
-import { Text, XStack, YStack } from "tamagui";
+import { Button, Spacer, Text, XStack, YStack } from "tamagui";
 import { useActiveTrack } from "react-native-track-player";
 import { JellifyTrack } from "../../types/JellifyTrack";
 import { usePlayerContext } from "../../player/provider";
 import { BottomTabNavigationEventMap, BottomTabNavigationProp } from "@react-navigation/bottom-tabs";
 import { NavigationHelpers, ParamListBase } from "@react-navigation/native";
 import { BlurView } from "@react-native-community/blur";
+import { pause, skipToNext } from "react-native-track-player/lib/src/trackPlayer";
+import Icon from "../Global/icon";
 
 export function Miniplayer({ navigation }: { navigation : NavigationHelpers<ParamListBase, BottomTabNavigationEventMap> }) : React.JSX.Element {
 
@@ -16,9 +18,21 @@ export function Miniplayer({ navigation }: { navigation : NavigationHelpers<Para
     return (
         <BlurView>
             <XStack height={"$8"} onPress={() => navigation.navigate("Player")}>
-                <YStack>
+                <YStack alignItems="flex-start">
                     <Text>{activeTrack?.title ?? "Nothing Playing"}</Text>
                 </YStack>
+
+                <Spacer />
+
+                <Button onPress={() => {
+                    pause()
+                }}>
+                    <Icon name="pause" />
+                </Button>
+
+                <Button onPress={() => skipToNext()}>
+                    <Icon name="fast-forward" />
+                </Button>
             </XStack>
         </BlurView>
     )