Rework toggleplayback, add haptic feedback

components/Player/component.tsx

@@ -9,20 +9,20 @@ import { ImageType } from "@jellyfin/sdk/lib/generated-client/models";
 import { queryConfig } from "../../api/queries/query.config";
 import { Text } from "../Global/helpers/text";
 import { SafeAreaView } from "react-native-safe-area-context";
-import { playPauseButton } from "./helpers/buttons";
 import { BottomTabNavigationEventMap } from "@react-navigation/bottom-tabs";
 import { NavigationHelpers, ParamListBase } from "@react-navigation/native";
 import { HorizontalSlider } from "../Global/helpers/slider";
+import PlayPauseButton from "./helpers/buttons";
 
 export default function Player({ navigation }: { navigation : NavigationHelpers<ParamListBase, BottomTabNavigationEventMap> }): React.JSX.Element {
 
     const { apiClient } = useApiClientContext();
-    const { queue, playbackState, nowPlaying, play, pause, progress } = usePlayerContext();
+    const { queue, playbackState, nowPlaying, useTogglePlayback, progress } = usePlayerContext();
 
     return (
         <SafeAreaView>
             { nowPlaying && (
-                <YStack alignItems="center">
+                <YStack>
 
                     <XStack alignItems="center">
 
@@ -45,7 +45,6 @@ export default function Player({ navigation }: { navigation : NavigationHelpers<
 
                     <XStack 
                         marginVertical={10}
-                        flex={1}
                     >
 
                         <YStack justifyContent="flex-start" flex={4}>
@@ -63,14 +62,14 @@ export default function Player({ navigation }: { navigation : NavigationHelpers<
                                 {nowPlaying.artist ?? "Unknown Artist"}</Text>
                         </YStack>
 
-                        <XStack alignItems="center">
+                        <XStack alignItems="center" flex={1}>
                             {/* Buttons for favorites, song menu go here */}
 
                         </XStack>
 
                     </XStack>
 
-                    <XStack>
+                    <XStack alignItems="center">
                         {/* playback progress goes here */}
                         <HorizontalSlider 
                             value={progress!.position}
@@ -80,12 +79,12 @@ export default function Player({ navigation }: { navigation : NavigationHelpers<
 
                     </XStack>
 
-                    <XStack>
-                        {playPauseButton(playbackState, play, pause)}
+                    <XStack alignItems="center">
+                        <PlayPauseButton />
                     </XStack>
 
                     
-                    </YStack>
+                </YStack>
             )}
         </SafeAreaView>
     );

components/Player/helpers/buttons.tsx

@@ -2,14 +2,17 @@ import { State } from "react-native-track-player";
 import { Colors } from "react-native/Libraries/NewAppScreen";
 import { Spinner } from "tamagui";
 import Icon from "../../Global/helpers/icon";
+import { usePlayerContext } from "@/player/provider";
 
-export function playPauseButton(playbackState: State | undefined, play: Function, pause: Function) {
+export default function PlayPauseButton() : React.JSX.Element {
+
+    const { playbackState, useTogglePlayback } = usePlayerContext();
 
     let button : React.JSX.Element;
 
     switch (playbackState) {
         case (State.Playing) : {
-            button = <Icon name="pause" large onPress={() => pause()} />;
+            button = <Icon name="pause" large onPress={() => useTogglePlayback.mutate(undefined)} />;
             break;
         }
     
@@ -20,7 +23,7 @@ export function playPauseButton(playbackState: State | undefined, play: Function
         }
         
         default : {
-            button = <Icon name="play" large onPress={() => play()} />
+            button = <Icon name="play" large onPress={() => useTogglePlayback.mutate(undefined)} />
             break;
         }
     }

components/Player/mini-player.tsx

@@ -14,12 +14,12 @@ import { getImageApi } from "@jellyfin/sdk/lib/utils/api";
 import { queryConfig } from "../../api/queries/query.config";
 import { useApiClientContext } from "../jellyfin-api-provider";
 import TextTicker from 'react-native-text-ticker';
-import { playPauseButton } from "./helpers/buttons";
+import PlayPauseButton from "./helpers/buttons";
 import { skipToNext } from "react-native-track-player/lib/src/trackPlayer";
 
 export function Miniplayer({ navigation }: { navigation : NavigationHelpers<ParamListBase, BottomTabNavigationEventMap> }) : React.JSX.Element {
 
-    const { nowPlaying, playbackState, play, pause } = usePlayerContext();
+    const { nowPlaying } = usePlayerContext();
 
     const { apiClient } = useApiClientContext();
 
@@ -77,7 +77,7 @@ export function Miniplayer({ navigation }: { navigation : NavigationHelpers<Para
                     </YStack>
                     
                     <XStack flex={2}>
-                        { playPauseButton(playbackState, play, pause) }
+                        <PlayPauseButton />
 
                         <Icon 
                             large