Basic Jellyseerr discover page

2026-01-15 23:59:08 +00:00 · 2024-12-29 10:07:46 -05:00
parent c6b58c5c28
commit cbce83e109
8 changed files with 346 additions and 162 deletions
--- a/components/jellyseerr/DiscoverSlide.tsx
+++ b/components/jellyseerr/DiscoverSlide.tsx
@@ -0,0 +1,75 @@
+import React, {useMemo} from "react";
+import DiscoverSlider from "@/utils/jellyseerr/server/entity/DiscoverSlider";
+import {DiscoverSliderType} from "@/utils/jellyseerr/server/constants/discover";
+import {DiscoverEndpoint, Endpoints, useJellyseerr} from "@/hooks/useJellyseerr";
+import {useInfiniteQuery} from "@tanstack/react-query";
+import {MovieResult, TvResult} from "@/utils/jellyseerr/server/models/Search";
+import JellyseerrPoster from "@/components/posters/JellyseerrPoster";
+import {Text} from "@/components/common/Text";
+import {FlashList} from "@shopify/flash-list";
+
+interface Props {
+  slide: DiscoverSlider
+}
+const DiscoverSlide: React.FC<Props> = ({slide}) => {
+  const {jellyseerrApi} = useJellyseerr();
+
+  const {data, isFetching, fetchNextPage, hasNextPage} = useInfiniteQuery({
+    queryKey: ["jellyseerr", "discover", slide.id],
+    queryFn: async ({ pageParam }) => {
+      let endpoint: DiscoverEndpoint | undefined = undefined;
+      let params: any = {
+        page: Number(pageParam)
+      }
+
+      switch (slide.type) {
+        case DiscoverSliderType.TRENDING:
+          endpoint = Endpoints.DISCOVER_TRENDING;
+          break;
+        case DiscoverSliderType.POPULAR_MOVIES:
+        case DiscoverSliderType.UPCOMING_MOVIES:
+          endpoint = Endpoints.DISCOVER_MOVIES
+          if (slide.type === DiscoverSliderType.UPCOMING_MOVIES)
+            params = { ...params, primaryReleaseDateGte: new Date().toISOString().split('T')[0]}
+          break;
+        case DiscoverSliderType.POPULAR_TV:
+        case DiscoverSliderType.UPCOMING_TV:
+          endpoint = Endpoints.DISCOVER_TV
+          if (slide.type === DiscoverSliderType.UPCOMING_TV)
+            params = {...params, firstAirDateGte: new Date().toISOString().split('T')[0]}
+          break;
+      }
+
+      return endpoint ? jellyseerrApi?.discover(endpoint, params) : null;
+    },
+    initialPageParam: 1,
+    getNextPageParam: (lastPage, pages) => ((lastPage?.page || pages?.findLast(p => p?.results.length)?.page) || 1) + 1,
+    enabled: !!jellyseerrApi,
+    staleTime: 0
+  });
+
+  const flatData = useMemo(() => data?.pages?.filter(p => p?.results.length).flatMap(p => p?.results), [data])
+
+  return (
+    (flatData && flatData?.length > 0) && <>
+      <Text className="font-bold text-lg mb-2">{DiscoverSliderType[slide.type].toString().toTitle()}</Text>
+      <FlashList
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        keyExtractor={item => item!!.id.toString()}
+        estimatedItemSize={250}
+        data={flatData}
+        onEndReachedThreshold={1}
+        onEndReached={() => {
+          if (hasNextPage)
+            fetchNextPage()
+        }}
+        renderItem={({item}) =>
+          (item ? <JellyseerrPoster item={item as MovieResult | TvResult} /> : <></>)
+      }
+      />
+    </>
+  )
+}
+
+export default DiscoverSlide;