Also fix MoreMoviesWithActor component to use SimpleTouchableItemRouter

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

.github/workflows/ci-codeql.yml

@@ -31,13 +31,13 @@ jobs:
           fetch-depth: 0
 
       - name: 🏁 Initialize CodeQL
-        uses: github/codeql-action/init@3c3833e0f8c1c83d449a7478aa59c036a9165498 # v3.29.11
+        uses: github/codeql-action/init@2d92b76c45b91eb80fc44c74ce3fce0ee94e8f9d # v3.30.0
         with:
           languages: ${{ matrix.language }}
           queries: +security-extended,security-and-quality
 
       - name: 🛠️ Autobuild
-        uses: github/codeql-action/autobuild@3c3833e0f8c1c83d449a7478aa59c036a9165498 # v3.29.11
+        uses: github/codeql-action/autobuild@2d92b76c45b91eb80fc44c74ce3fce0ee94e8f9d # v3.30.0
 
       - name: 🧪 Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@3c3833e0f8c1c83d449a7478aa59c036a9165498 # v3.29.11
+        uses: github/codeql-action/analyze@2d92b76c45b91eb80fc44c74ce3fce0ee94e8f9d # v3.30.0

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/SubtitleTrackSelector.tsx

@@ -1,6 +1,7 @@
 import type { MediaSourceInfo } from "@jellyfin/sdk/lib/generated-client/models";
 import { useMemo } from "react";
 import { Platform, TouchableOpacity, View } from "react-native";
+import { tc } from "@/utils/textTools";
 
 const DropdownMenu = !Platform.isTV ? require("zeego/dropdown-menu") : null;
 
@@ -36,7 +37,7 @@ export const SubtitleTrackSelector: React.FC<Props> = ({
       className='flex col shrink justify-start place-self-start items-start'
       style={{
         minWidth: 60,
-        maxWidth: 220,
+        maxWidth: 200,
       }}
     >
       <DropdownMenu.Root>
@@ -46,8 +47,10 @@ export const SubtitleTrackSelector: React.FC<Props> = ({
               {t("item_card.subtitles")}
             </Text>
             <TouchableOpacity className='bg-neutral-900  h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between'>
-              <Text className=' ' numberOfLines={1}>
-                {selectedSubtitleSteam?.DisplayTitle || t("item_card.none")}
+              <Text className=' '>
+                {selectedSubtitleSteam
+                  ? tc(selectedSubtitleSteam?.DisplayTitle, 7)
+                  : t("item_card.none")}
               </Text>
             </TouchableOpacity>
           </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;
+};

utils/_jellyseerr/useJellyseerrCanRequest.ts

@@ -3,6 +3,7 @@ import { useJellyseerr } from "@/hooks/useJellyseerr";
 import {
   MediaRequestStatus,
   MediaStatus,
+  MediaType,
 } from "@/utils/jellyseerr/server/constants/media";
 import {
   hasPermission,
@@ -40,7 +41,7 @@ export const useJellyseerrCanRequest = (
     const userHasPermission = hasPermission(
       [
         Permission.REQUEST,
-        item?.mediaInfo?.mediaType
+        item?.mediaInfo?.mediaType === MediaType.MOVIE
           ? Permission.REQUEST_MOVIE
           : Permission.REQUEST_TV,
       ],