Also fix MoreMoviesWithActor component to use SimpleTouchableItemRouter

Co-authored-by: lostb1t <168401+lostb1t@users.noreply.github.com>

components/MoreMoviesWithActor.tsx

@@ -6,8 +6,8 @@ import type React from "react";
 import { useTranslation } from "react-i18next";
 import { View, type ViewProps } from "react-native";
 import { HorizontalScroll } from "@/components/common/HorrizontalScroll";
+import { SimpleTouchableItemRouter } from "@/components/common/SimpleTouchableItemRouter";
 import { Text } from "@/components/common/Text";
-import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
 import { ItemCardText } from "@/components/ItemCardText";
 import MoviePoster from "@/components/posters/MoviePoster";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
@@ -83,8 +83,9 @@ export const MoreMoviesWithActor: React.FC<Props> = ({
         data={items}
         loading={isLoading}
         height={247}
+        estimatedItemSize={112}
         renderItem={(item: BaseItemDto, idx: number) => (
-          <TouchableItemRouter
+          <SimpleTouchableItemRouter
             key={idx}
             item={item}
             className='flex flex-col w-28'
@@ -93,7 +94,7 @@ export const MoreMoviesWithActor: React.FC<Props> = ({
               <MoviePoster item={item} />
               <ItemCardText item={item} />
             </View>
-          </TouchableItemRouter>
+          </SimpleTouchableItemRouter>
         )}
       />
     </View>

components/SimilarItems.tsx

@@ -8,8 +8,8 @@ import { View, type ViewProps } from "react-native";
 import MoviePoster from "@/components/posters/MoviePoster";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { HorizontalScroll } from "./common/HorrizontalScroll";
+import { SimpleTouchableItemRouter } from "./common/SimpleTouchableItemRouter";
 import { Text } from "./common/Text";
-import { TouchableItemRouter } from "./common/TouchableItemRouter";
 import { ItemCardText } from "./ItemCardText";
 
 interface SimilarItemsProps extends ViewProps {
@@ -54,9 +54,10 @@ export const SimilarItems: React.FC<SimilarItemsProps> = ({
         data={movies}
         loading={isLoading}
         height={247}
+        estimatedItemSize={112}
         noItemsText={t("item_card.no_similar_items_found")}
         renderItem={(item: BaseItemDto, idx: number) => (
-          <TouchableItemRouter
+          <SimpleTouchableItemRouter
             key={idx}
             item={item}
             className='flex flex-col w-28'
@@ -65,7 +66,7 @@ export const SimilarItems: React.FC<SimilarItemsProps> = ({
               <MoviePoster item={item} />
               <ItemCardText item={item} />
             </View>
-          </TouchableItemRouter>
+          </SimpleTouchableItemRouter>
         )}
       />
     </View>

components/common/SimpleTouchableItemRouter.tsx

@@ -0,0 +1,86 @@
+import type {
+  BaseItemDto,
+  BaseItemPerson,
+} from "@jellyfin/sdk/lib/generated-client/models";
+import { useRouter, useSegments } from "expo-router";
+import { type PropsWithChildren } from "react";
+import { TouchableOpacity, type TouchableOpacityProps } from "react-native";
+
+interface Props extends TouchableOpacityProps {
+  item: BaseItemDto;
+  isOffline?: boolean;
+}
+
+export const itemRouter = (
+  item: BaseItemDto | BaseItemPerson,
+  from: string,
+) => {
+  if ("CollectionType" in item && item.CollectionType === "livetv") {
+    return `/(auth)/(tabs)/${from}/livetv`;
+  }
+
+  if (item.Type === "Series") {
+    return `/(auth)/(tabs)/${from}/series/${item.Id}`;
+  }
+
+  if (item.Type === "Person" || item.Type === "Actor") {
+    return `/(auth)/(tabs)/${from}/actors/${item.Id}`;
+  }
+
+  if (item.Type === "BoxSet") {
+    return `/(auth)/(tabs)/${from}/collections/${item.Id}`;
+  }
+
+  if (item.Type === "UserView") {
+    return `/(auth)/(tabs)/${from}/collections/${item.Id}`;
+  }
+
+  if (item.Type === "CollectionFolder") {
+    return `/(auth)/(tabs)/(libraries)/${item.Id}`;
+  }
+
+  if (item.Type === "Playlist") {
+    return `/(auth)/(tabs)/(libraries)/${item.Id}`;
+  }
+
+  return `/(auth)/(tabs)/${from}/items/page?id=${item.Id}`;
+};
+
+/**
+ * Simplified TouchableItemRouter that doesn't use hooks that might trigger API calls.
+ * Intended for use in similar items rows where we want to avoid unnecessary requests.
+ */
+export const SimpleTouchableItemRouter: React.FC<PropsWithChildren<Props>> = ({
+  item,
+  isOffline = false,
+  children,
+  ...props
+}) => {
+  const router = useRouter();
+  const segments = useSegments();
+  const from = segments[2] || "(home)";
+
+  if (
+    from === "(home)" ||
+    from === "(search)" ||
+    from === "(libraries)" ||
+    from === "(favorites)"
+  )
+    return (
+      <TouchableOpacity
+        onPress={() => {
+          let url = itemRouter(item, from);
+          if (isOffline) {
+            url += `&offline=true`;
+          }
+          // @ts-expect-error
+          router.push(url);
+        }}
+        {...props}
+      >
+        {children}
+      </TouchableOpacity>
+    );
+
+  return null;
+};