diff --git a/App.tsx b/App.tsx index a7b2f17a..5575e1ac 100644 --- a/App.tsx +++ b/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(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 ( + { playerIsReady && ( + )} diff --git a/components/jellify.tsx b/components/jellify.tsx index f4821959..16813759 100644 --- a/components/jellify.tsx +++ b/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 ( - { isPlayerReady && ( - - )} +