Player button additions

Setting "skip-next" for skip buttons in miniplayer and player

making miniplayer artwork scalable

components/Player/component.tsx

@@ -15,6 +15,8 @@ import { HorizontalSlider } from "../Global/helpers/slider";
 import PlayPauseButton from "./helpers/buttons";
 import { BlurView } from "@react-native-community/blur";
 import React from "react";
+import { skipToNext, skipToPrevious } from "react-native-track-player/lib/src/trackPlayer";
+import Icon from "../Global/helpers/icon";
 
 export default function Player({ navigation }: { navigation : NavigationHelpers<ParamListBase, BottomTabNavigationEventMap> }): React.JSX.Element {
 
@@ -44,7 +46,7 @@ export default function Player({ navigation }: { navigation : NavigationHelpers<
                         borderRadius: 2
                     }}
                 />
-                <BlurView blurType="dark" />
+                <BlurView />
 
                 <YStack>
 
@@ -100,7 +102,19 @@ export default function Player({ navigation }: { navigation : NavigationHelpers<
                     </XStack>
 
                     <XStack justifyContent="center">
+                        <Icon
+                            large
+                            name="skip-previous"
+                            onPress={() => skipToPrevious()}
+                            />
+
                         <PlayPauseButton />
+
+                        <Icon 
+                            large
+                            name="skip-next" 
+                            onPress={() => skipToNext()}
+                            />                    
                     </XStack>
 
                     

components/Player/helpers/buttons.tsx

@@ -1,6 +1,6 @@
 import { State } from "react-native-track-player";
 import { Colors } from "react-native/Libraries/NewAppScreen";
-import { Spinner } from "tamagui";
+import { Spinner, View } from "tamagui";
 import Icon from "../../Global/helpers/icon";
 import { usePlayerContext } from "@/player/provider";
 
@@ -28,5 +28,9 @@ export default function PlayPauseButton() : React.JSX.Element {
         }
     }
 
-    return button;
+    return (
+        <View justifyContent="center" alignItems="center">
+            { button }
+        </View>
+    );
 }

components/Player/mini-player.tsx

@@ -16,6 +16,7 @@ import { useApiClientContext } from "../jellyfin-api-provider";
 import TextTicker from 'react-native-text-ticker';
 import PlayPauseButton from "./helpers/buttons";
 import { skipToNext } from "react-native-track-player/lib/src/trackPlayer";
+import { useSafeAreaFrame } from "react-native-safe-area-context";
 
 export function Miniplayer({ navigation }: { navigation : NavigationHelpers<ParamListBase, BottomTabNavigationEventMap> }) : React.JSX.Element {
 
@@ -23,6 +24,8 @@ export function Miniplayer({ navigation }: { navigation : NavigationHelpers<Para
 
     const { apiClient } = useApiClientContext();
 
+    const { width } = useSafeAreaFrame();
+
     return (
         <BlurView>
             { nowPlaying && (
@@ -47,8 +50,8 @@ export function Miniplayer({ navigation }: { navigation : NavigationHelpers<Para
                             }
                             imageStyle={{
                                 position: "relative",
-                                width: 60,
-                                height: 60,
+                                width: width / 6,
+                                height: width / 6,
                                 borderRadius: 2,
                             }}
                         />
@@ -77,14 +80,14 @@ export function Miniplayer({ navigation }: { navigation : NavigationHelpers<Para
                     </YStack>
                     
                     <XStack 
-                        justifyContent="flex-end" 
+                        justifyContent="center" 
                         flex={1}
                     >
                         <PlayPauseButton />
 
                         <Icon 
                             large
-                            name="fast-forward" 
+                            name="skip-next" 
                             onPress={() => skipToNext()}
                             />
                     </XStack>