player init stuff

App.tsx

@@ -1,5 +1,5 @@
 import './gesture-handler';
-import React from 'react';
+import React, { useState } from 'react';
 import "react-native-url-polyfill/auto";
 import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client'
 import Jellify from './components/jellify';
@@ -9,13 +9,44 @@ import jellifyConfig from './tamagui.config';
 import { clientPersister } from './constants/storage';
 import { queryClient } from './constants/query-client';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import TrackPlayer, { IOSCategory, IOSCategoryOptions } from 'react-native-track-player';
+import { CAPABILITIES } from './player/constants';
 
 // export const backgroundRuntime = createWorkletRuntime('background');
 
 export default function App(): React.JSX.Element {
   
+  const [playerIsReady, setPlayerIsReady] = useState<boolean>(false);
   const isDarkMode = useColorScheme() === 'dark';
 
+  TrackPlayer.setupPlayer({
+    autoHandleInterruptions: true,
+    maxCacheSize: 1000 * 100, // 100MB, TODO make this adjustable
+    iosCategory: IOSCategory.Playback,
+    iosCategoryOptions: [
+        IOSCategoryOptions.AllowAirPlay,
+        IOSCategoryOptions.AllowBluetooth,
+    ]
+  })
+  .then(() => TrackPlayer.updateOptions({
+    progressUpdateEventInterval: 1,
+    capabilities: CAPABILITIES,
+    notificationCapabilities: CAPABILITIES,
+    compactCapabilities: CAPABILITIES,
+    // ratingType: RatingType.Heart,
+    // likeOptions: {
+    //     isActive: false,
+    //     title: "Favorite"
+    // },
+    // dislikeOptions: {
+    //     isActive: true,
+    //     title: "Unfavorite"
+    // }
+  }))
+  .finally(() => {
+    setPlayerIsReady(true);
+  });
+
   return (
     <PersistQueryClientProvider 
       client={queryClient} 
@@ -25,7 +56,9 @@ export default function App(): React.JSX.Element {
       <GestureHandlerRootView>
         <TamaguiProvider config={jellifyConfig}>
           <Theme name={isDarkMode ? 'dark' : 'light'}>
+            { playerIsReady && (
               <Jellify />
+            )}
           </Theme>
         </TamaguiProvider>
       </GestureHandlerRootView>

components/jellify.tsx

@@ -10,54 +10,16 @@ import { PlayerProvider } from "../player/provider";
 import { useColorScheme } from "react-native";
 import { PortalProvider } from "@tamagui/portal";
 import { JellifyProvider, useJellifyContext } from "./provider";
-import { ToastProvider, ToastViewport } from "@tamagui/toast";
+import { ToastProvider } from "@tamagui/toast";
 import SafeToastViewport from "./Global/components/toast-area-view-port";
-import { QueryKeys } from "../enums/query-keys";
-import { useQuery } from "@tanstack/react-query";
-import TrackPlayer, { IOSCategory, IOSCategoryOptions } from "react-native-track-player";
-import { CAPABILITIES } from "../player/constants";
 
 export default function Jellify(): React.JSX.Element {
 
-  const { isSuccess: isPlayerReady } = useQuery({
-    queryKey: [QueryKeys.Player],
-    queryFn: async () => {
-      return await TrackPlayer.setupPlayer({
-        autoHandleInterruptions: true,
-        maxCacheSize: 1000 * 100, // 100MB, TODO make this adjustable
-        iosCategory: IOSCategory.Playback,
-        iosCategoryOptions: [
-            IOSCategoryOptions.AllowAirPlay,
-            IOSCategoryOptions.AllowBluetooth,
-        ]
-      })
-      .then(() => TrackPlayer.updateOptions({
-        progressUpdateEventInterval: 1,
-        capabilities: CAPABILITIES,
-        notificationCapabilities: CAPABILITIES,
-        compactCapabilities: CAPABILITIES,
-        // ratingType: RatingType.Heart,
-        // likeOptions: {
-        //     isActive: false,
-        //     title: "Favorite"
-        // },
-        // dislikeOptions: {
-        //     isActive: true,
-        //     title: "Unfavorite"
-        // }
-      }));
-    },
-    gcTime: 0,
-    staleTime: 1000 * 60 * 60 * 24 * 7 // 7 days
-  });
-
   return (
     <PortalProvider shouldAddRootHost>
       <ToastProvider burntOptions={{ from: 'top'}}>
         <JellifyProvider>
-          { isPlayerReady && (
-            <App />
-          )}
+          <App />
         </JellifyProvider>
       </ToastProvider>
     </PortalProvider>