Merge pull request #141 from anultravioletaurora/59-improve-onboarding-experience

Actually understanding TanStack Query

App.tsx

@@ -11,8 +11,9 @@ 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';
+import { createWorkletRuntime } from 'react-native-reanimated';
 
-// export const backgroundRuntime = createWorkletRuntime('background');
+export const backgroundRuntime = createWorkletRuntime('background');
 
 export default function App(): React.JSX.Element {
   
@@ -51,7 +52,7 @@ export default function App(): React.JSX.Element {
     <PersistQueryClientProvider 
       client={queryClient} 
       persistOptions={{ 
-        persister: clientPersister
+        persister: clientPersister,
     }}>
       <GestureHandlerRootView>
         <TamaguiProvider config={jellifyConfig}>

components/Album/index.tsx

@@ -14,6 +14,7 @@ import { QueryKeys } from "../../enums/query-keys";
 import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
 import Client from "../../api/client";
 import { useMemo } from "react";
+import { useSharedValue } from "react-native-reanimated";
 
 
 export function AlbumScreen({ 
@@ -99,6 +100,7 @@ export function AlbumScreen({
                     
                 }}
                 ListFooterComponent={(
+                    
                     <YStack justifyContent="flex-start">
                         <XStack flex={1} marginTop={"$3"} justifyContent="flex-end">
                             <Text 

components/Global/components/blurhashed-image.tsx

@@ -32,6 +32,8 @@ export default function BlurhashedImage({
             Math.ceil(height ?? width / 100) * 100 // So these keys need to match
         ],
         queryFn: () => fetchItemImage(item.AlbumId ? item.AlbumId : item.Id!, type ?? ImageType.Primary, width, height ?? width),
+        gcTime: 1000 * 5, // 5 minutes, these are stored on disk anyways
+        staleTime: 1000 * 5 
     });
 
     const blurhash = !isEmpty(item.ImageBlurHashes) 

constants/query-client.ts

@@ -3,9 +3,9 @@ import { QueryClient } from "@tanstack/react-query";
 export const queryClient = new QueryClient({
     defaultOptions: {
         queries: {
-            refetchOnWindowFocus: false,
-            gcTime: (1000 * 60 * 60 * 24) * 5, // 5 days, for maximum cache-age
-            staleTime: (1000 * 60 * 60 * 1), // 1 hour, this can be refreshed manually anyways
+            // refetchOnWindowFocus: false,
+            gcTime: Infinity, // disable
+            // staleTime: (1000 * 60 * 60 * 1), // 1 hour, this can be refreshed manually anyways
         }
     }
 });

constants/storage.ts

@@ -18,4 +18,5 @@ const clientStorage = {
   
 export const clientPersister = createSyncStoragePersister({ 
   storage: clientStorage,
+  throttleTime: 0 // MMKV is FAST 
 });

helpers/mappings.ts

@@ -5,12 +5,13 @@ import { QueuingType } from "../enums/queuing-type";
 import { getImageApi } from "@jellyfin/sdk/lib/utils/api";
 import Client from "../api/client";
 import { isUndefined } from "lodash";
+import { runOnRuntime } from "react-native-reanimated";
+import { backgroundRuntime } from "../App";
 
 // TODO: Make this configurable
 const transcodingContainer = "m4a";
 
 export function mapDtoToTrack(item: BaseItemDto, queuingType?: QueuingType) : JellifyTrack {
-
     const urlParams = {
         "Container": item.Container!,
         "TranscodingContainer": transcodingContainer,

helpers/runtimeticks.ts

@@ -1,5 +1,4 @@
-// import { backgroundRuntime } from "@/App";
-import { runOnRuntime } from "react-native-reanimated";
+import { SharedValue } from "react-native-reanimated";
 
 /**
  * Converts the run time seconds of a track to the RunTimeTicks standard set by Emby / Jellyfin
@@ -9,11 +8,9 @@ import { runOnRuntime } from "react-native-reanimated";
  * @see https://emby.media/community/index.php?/topic/63357-runtimeticks-microseconds-milliseconds-or-nanoseconds/
  */
 export function convertSecondsToRunTimeTicks(seconds: number) {
-    // return runOnRuntime(backgroundRuntime, (runTimeSeconds: number) => {
-        const runTimeMilliseconds = seconds * 1000 * 10000;
-    
-        return runTimeMilliseconds;
-    // })(seconds);
+    'worklet';
+    const runTimeMilliseconds = seconds * 1000 * 10000;
+    return runTimeMilliseconds;
 }
 
 /**
@@ -24,9 +21,8 @@ export function convertSecondsToRunTimeTicks(seconds: number) {
  * @see https://emby.media/community/index.php?/topic/63357-runtimeticks-microseconds-milliseconds-or-nanoseconds/
  */
 export function convertRunTimeTicksToSeconds(ticks: number) {
-    // return runOnRuntime(backgroundRuntime, (runTimeTicks : number) => {
-        const runTimeMilliseconds = ticks / 10000; 
-        const runTimeTotalSeconds = Math.floor(runTimeMilliseconds / 1000);
-        return runTimeTotalSeconds;
-    // })(ticks);
+    'worklet';
+    const runTimeMilliseconds = ticks / 10000; 
+    const runTimeTotalSeconds = Math.floor(runTimeMilliseconds / 1000);
+    return runTimeTotalSeconds;
 }