feat: infinite scrolling in favorites tab (#929)

Co-authored-by: Gauvain <68083474+Gauvino@users.noreply.github.com>

components/home/Favorites.tsx

@@ -9,7 +9,7 @@ import { Image, Text, View } from "react-native";
 import heart from "@/assets/icons/heart.fill.png";
 import { Colors } from "@/constants/Colors";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { ScrollingCollectionList } from "./ScrollingCollectionList";
+import { InfiniteScrollingCollectionList } from "./InfiniteScrollingCollectionList";
 
 type FavoriteTypes =
   | "Series"
@@ -33,7 +33,11 @@ export const Favorites = () => {
   });
 
   const fetchFavoritesByType = useCallback(
-    async (itemType: BaseItemKind) => {
+    async (
+      itemType: BaseItemKind,
+      startIndex: number = 0,
+      limit: number = 20,
+    ) => {
       const response = await getItemsApi(api as Api).getItems({
         userId: user?.Id,
         sortBy: ["SeriesSortName", "SortName"],
@@ -44,16 +48,19 @@ export const Favorites = () => {
         collapseBoxSetItems: false,
         excludeLocationTypes: ["Virtual"],
         enableTotalRecordCount: false,
-        limit: 20,
+        startIndex: startIndex,
+        limit: limit,
         includeItemTypes: [itemType],
       });
       const items = response.data.Items || [];
 
-      // Update empty state for this specific type
+      // Update empty state for this specific type only for the first page
-      setEmptyState((prev) => ({
+      if (startIndex === 0) {
-        ...prev,
+        setEmptyState((prev) => ({
-        [itemType as FavoriteTypes]: items.length === 0,
+          ...prev,
-      }));
+          [itemType as FavoriteTypes]: items.length === 0,
+        }));
+      }
 
       return items;
     },
@@ -82,27 +89,33 @@ export const Favorites = () => {
   };
 
   const fetchFavoriteSeries = useCallback(
-    () => fetchFavoritesByType("Series"),
+    ({ pageParam }: { pageParam: number }) =>
+      fetchFavoritesByType("Series", pageParam),
     [fetchFavoritesByType],
   );
   const fetchFavoriteMovies = useCallback(
-    () => fetchFavoritesByType("Movie"),
+    ({ pageParam }: { pageParam: number }) =>
+      fetchFavoritesByType("Movie", pageParam),
     [fetchFavoritesByType],
   );
   const fetchFavoriteEpisodes = useCallback(
-    () => fetchFavoritesByType("Episode"),
+    ({ pageParam }: { pageParam: number }) =>
+      fetchFavoritesByType("Episode", pageParam),
     [fetchFavoritesByType],
   );
   const fetchFavoriteVideos = useCallback(
-    () => fetchFavoritesByType("Video"),
+    ({ pageParam }: { pageParam: number }) =>
+      fetchFavoritesByType("Video", pageParam),
     [fetchFavoritesByType],
   );
   const fetchFavoriteBoxsets = useCallback(
-    () => fetchFavoritesByType("BoxSet"),
+    ({ pageParam }: { pageParam: number }) =>
+      fetchFavoritesByType("BoxSet", pageParam),
     [fetchFavoritesByType],
   );
   const fetchFavoritePlaylists = useCallback(
-    () => fetchFavoritesByType("Playlist"),
+    ({ pageParam }: { pageParam: number }) =>
+      fetchFavoritesByType("Playlist", pageParam),
     [fetchFavoritesByType],
   );
 
@@ -123,38 +136,38 @@ export const Favorites = () => {
           </Text>
         </View>
       )}
-      <ScrollingCollectionList
+      <InfiniteScrollingCollectionList
         queryFn={fetchFavoriteSeries}
         queryKey={["home", "favorites", "series"]}
         title={t("favorites.series")}
         hideIfEmpty
       />
-      <ScrollingCollectionList
+      <InfiniteScrollingCollectionList
         queryFn={fetchFavoriteMovies}
         queryKey={["home", "favorites", "movies"]}
         title={t("favorites.movies")}
         hideIfEmpty
         orientation='vertical'
       />
-      <ScrollingCollectionList
+      <InfiniteScrollingCollectionList
         queryFn={fetchFavoriteEpisodes}
         queryKey={["home", "favorites", "episodes"]}
         title={t("favorites.episodes")}
         hideIfEmpty
       />
-      <ScrollingCollectionList
+      <InfiniteScrollingCollectionList
         queryFn={fetchFavoriteVideos}
         queryKey={["home", "favorites", "videos"]}
         title={t("favorites.videos")}
         hideIfEmpty
       />
-      <ScrollingCollectionList
+      <InfiniteScrollingCollectionList
         queryFn={fetchFavoriteBoxsets}
         queryKey={["home", "favorites", "boxsets"]}
         title={t("favorites.boxsets")}
         hideIfEmpty
       />
-      <ScrollingCollectionList
+      <InfiniteScrollingCollectionList
         queryFn={fetchFavoritePlaylists}
         queryKey={["home", "favorites", "playlists"]}
         title={t("favorites.playlists")}

components/home/InfiniteScrollingCollectionList.tsx

@@ -0,0 +1,191 @@
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import {
+  type QueryFunction,
+  type QueryKey,
+  useInfiniteQuery,
+} from "@tanstack/react-query";
+import { useTranslation } from "react-i18next";
+import {
+  ActivityIndicator,
+  ScrollView,
+  View,
+  type ViewProps,
+} from "react-native";
+import { Text } from "@/components/common/Text";
+import MoviePoster from "@/components/posters/MoviePoster";
+import ContinueWatchingPoster from "../ContinueWatchingPoster";
+import { TouchableItemRouter } from "../common/TouchableItemRouter";
+import { ItemCardText } from "../ItemCardText";
+import SeriesPoster from "../posters/SeriesPoster";
+
+interface Props extends ViewProps {
+  title?: string | null;
+  orientation?: "horizontal" | "vertical";
+  disabled?: boolean;
+  queryKey: QueryKey;
+  queryFn: QueryFunction<BaseItemDto[], QueryKey, number>;
+  hideIfEmpty?: boolean;
+  pageSize?: number;
+}
+
+export const InfiniteScrollingCollectionList: React.FC<Props> = ({
+  title,
+  orientation = "vertical",
+  disabled = false,
+  queryFn,
+  queryKey,
+  hideIfEmpty = false,
+  pageSize = 20,
+  ...props
+}) => {
+  const { data, isLoading, isFetchingNextPage, hasNextPage, fetchNextPage } =
+    useInfiniteQuery({
+      queryKey: queryKey,
+      queryFn: ({ pageParam = 0, ...context }) =>
+        queryFn({ ...context, queryKey, pageParam }),
+      getNextPageParam: (lastPage, allPages) => {
+        // If the last page has fewer items than pageSize, we've reached the end
+        if (lastPage.length < pageSize) {
+          return undefined;
+        }
+        // Otherwise, return the next start index
+        return allPages.length * pageSize;
+      },
+      initialPageParam: 0,
+      staleTime: 0,
+      refetchOnMount: true,
+      refetchOnWindowFocus: true,
+      refetchOnReconnect: true,
+    });
+
+  const { t } = useTranslation();
+
+  // Flatten all pages into a single array
+  const allItems = data?.pages.flat() || [];
+
+  if (hideIfEmpty === true && allItems.length === 0 && !isLoading) return null;
+  if (disabled || !title) return null;
+
+  const handleScroll = (event: any) => {
+    const { layoutMeasurement, contentOffset, contentSize } = event.nativeEvent;
+    const paddingToBottom = 20;
+
+    // Check if we're near the end of the scroll
+    if (
+      layoutMeasurement.width + contentOffset.x >=
+      contentSize.width - paddingToBottom
+    ) {
+      if (hasNextPage && !isFetchingNextPage) {
+        fetchNextPage();
+      }
+    }
+  };
+
+  return (
+    <View {...props}>
+      <Text className='px-4 text-lg font-bold mb-2 text-neutral-100'>
+        {title}
+      </Text>
+      {isLoading === false && allItems.length === 0 && (
+        <View className='px-4'>
+          <Text className='text-neutral-500'>{t("home.no_items")}</Text>
+        </View>
+      )}
+      {isLoading ? (
+        <View
+          className={`
+            flex flex-row gap-2 px-4
+        `}
+        >
+          {[1, 2, 3].map((i) => (
+            <View className='w-44' key={i}>
+              <View className='bg-neutral-900 h-24 w-full rounded-md mb-1' />
+              <View className='rounded-md overflow-hidden mb-1 self-start'>
+                <Text
+                  className='text-neutral-900 bg-neutral-900 rounded-md'
+                  numberOfLines={1}
+                >
+                  Nisi mollit voluptate amet.
+                </Text>
+              </View>
+              <View className='rounded-md overflow-hidden self-start mb-1'>
+                <Text
+                  className='text-neutral-900 bg-neutral-900 text-xs rounded-md '
+                  numberOfLines={1}
+                >
+                  Lorem ipsum
+                </Text>
+              </View>
+            </View>
+          ))}
+        </View>
+      ) : (
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          onScroll={handleScroll}
+          scrollEventThrottle={16}
+        >
+          <View className='px-4 flex flex-row'>
+            {allItems.map((item) => (
+              <TouchableItemRouter
+                item={item}
+                key={item.Id}
+                className={`mr-2 
+                  ${orientation === "horizontal" ? "w-44" : "w-28"}
+                `}
+              >
+                {item.Type === "Episode" && orientation === "horizontal" && (
+                  <ContinueWatchingPoster item={item} />
+                )}
+                {item.Type === "Episode" && orientation === "vertical" && (
+                  <SeriesPoster item={item} />
+                )}
+                {item.Type === "Movie" && orientation === "horizontal" && (
+                  <ContinueWatchingPoster item={item} />
+                )}
+                {item.Type === "Movie" && orientation === "vertical" && (
+                  <MoviePoster item={item} />
+                )}
+                {item.Type === "Series" && orientation === "vertical" && (
+                  <SeriesPoster item={item} />
+                )}
+                {item.Type === "Series" && orientation === "horizontal" && (
+                  <ContinueWatchingPoster item={item} />
+                )}
+                {item.Type === "Program" && (
+                  <ContinueWatchingPoster item={item} />
+                )}
+                {item.Type === "BoxSet" && orientation === "vertical" && (
+                  <MoviePoster item={item} />
+                )}
+                {item.Type === "BoxSet" && orientation === "horizontal" && (
+                  <ContinueWatchingPoster item={item} />
+                )}
+                {item.Type === "Playlist" && orientation === "vertical" && (
+                  <MoviePoster item={item} />
+                )}
+                {item.Type === "Playlist" && orientation === "horizontal" && (
+                  <ContinueWatchingPoster item={item} />
+                )}
+                {item.Type === "Video" && orientation === "vertical" && (
+                  <MoviePoster item={item} />
+                )}
+                {item.Type === "Video" && orientation === "horizontal" && (
+                  <ContinueWatchingPoster item={item} />
+                )}
+                <ItemCardText item={item} />
+              </TouchableItemRouter>
+            ))}
+            {/* Loading indicator for next page */}
+            {isFetchingNextPage && (
+              <View className='justify-center items-center w-16'>
+                <ActivityIndicator size='small' color='#6366f1' />
+              </View>
+            )}
+          </View>
+        </ScrollView>
+      )}
+    </View>
+  );
+};