feat: new large carousel (#1098)

components/settings/HomeIndex.tsx

@@ -27,7 +27,6 @@ import {
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Button } from "@/components/Button";
 import { Text } from "@/components/common/Text";
-import { LargeMovieCarousel } from "@/components/home/LargeMovieCarousel";
 import { ScrollingCollectionList } from "@/components/home/ScrollingCollectionList";
 import { Loader } from "@/components/Loader";
 import { MediaListSection } from "@/components/medialists/MediaListSection";
@@ -38,6 +37,7 @@ import { useDownload } from "@/providers/DownloadProvider";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
 import { eventBus } from "@/utils/eventBus";
+import { AppleTVCarousel } from "../AppleTVCarousel";
 
 type ScrollingCollectionListSection = {
   type: "ScrollingCollectionList";
@@ -126,7 +126,10 @@ export const HomeIndex = () => {
   useEffect(() => {
     const unsubscribe = eventBus.on("scrollToTop", () => {
       if ((segments as string[])[2] === "(home)")
-        scrollViewRef.current?.scrollTo({ y: -152, animated: true });
+        scrollViewRef.current?.scrollTo({
+          y: Platform.isTV ? -152 : -100,
+          animated: true,
+        });
     });
 
     return () => {
@@ -192,9 +195,9 @@ export const HomeIndex = () => {
             await getUserLibraryApi(api).getLatestMedia({
               userId: user?.Id,
               limit: 20,
-              fields: ["PrimaryImageAspectRatio", "Path"],
+              fields: ["PrimaryImageAspectRatio", "Path", "Genres"],
               imageTypeLimit: 1,
-              enableImageTypes: ["Primary", "Backdrop", "Thumb"],
+              enableImageTypes: ["Primary", "Backdrop", "Thumb", "Logo"],
               includeItemTypes,
               parentId,
             })
@@ -236,8 +239,9 @@ export const HomeIndex = () => {
           (
             await getItemsApi(api).getResumeItems({
               userId: user.Id,
-              enableImageTypes: ["Primary", "Backdrop", "Thumb"],
+              enableImageTypes: ["Primary", "Backdrop", "Thumb", "Logo"],
               includeItemTypes: ["Movie", "Series", "Episode"],
+              fields: ["Genres"],
             })
           ).data.Items || [],
         type: "ScrollingCollectionList",
@@ -250,9 +254,9 @@ export const HomeIndex = () => {
           (
             await getTvShowsApi(api).getNextUp({
               userId: user?.Id,
-              fields: ["MediaSourceCount"],
+              fields: ["MediaSourceCount", "Genres"],
               limit: 20,
-              enableImageTypes: ["Primary", "Backdrop", "Thumb"],
+              enableImageTypes: ["Primary", "Backdrop", "Thumb", "Logo"],
               enableResumable: false,
             })
           ).data.Items || [],
@@ -334,9 +338,9 @@ export const HomeIndex = () => {
           if (section.nextUp) {
             const response = await getTvShowsApi(api).getNextUp({
               userId: user?.Id,
-              fields: ["MediaSourceCount"],
+              fields: ["MediaSourceCount", "Genres"],
               limit: section.nextUp?.limit || 25,
-              enableImageTypes: ["Primary", "Backdrop", "Thumb"],
+              enableImageTypes: ["Primary", "Backdrop", "Thumb", "Logo"],
               enableResumable: section.nextUp?.enableResumable,
               enableRewatching: section.nextUp?.enableRewatching,
             });
@@ -443,44 +447,60 @@ export const HomeIndex = () => {
       scrollToOverflowEnabled={true}
       ref={scrollViewRef}
       nestedScrollEnabled
-      contentInsetAdjustmentBehavior='automatic'
+      contentInsetAdjustmentBehavior='never'
       refreshControl={
-        <RefreshControl refreshing={loading} onRefresh={refetch} />
+        <RefreshControl
+          refreshing={loading}
+          onRefresh={refetch}
+          tintColor='white' // For iOS
+          colors={["white"]} // For Android
+          progressViewOffset={200} // This offsets the refresh indicator to appear over the carousel
+        />
       }
-      contentContainerStyle={{
-        paddingLeft: insets.left,
-        paddingRight: insets.right,
-        paddingBottom: 16,
-      }}
+      style={{ marginTop: Platform.isTV ? 0 : -100 }}
+      contentContainerStyle={{ paddingTop: Platform.isTV ? 0 : 100 }}
     >
-      <View className='flex flex-col space-y-4'>
-        <LargeMovieCarousel />
-
-        {sections.map((section, index) => {
-          if (section.type === "ScrollingCollectionList") {
-            return (
-              <ScrollingCollectionList
-                key={index}
-                title={section.title}
-                queryKey={section.queryKey}
-                queryFn={section.queryFn}
-                orientation={section.orientation}
-                hideIfEmpty
-              />
-            );
-          }
-          if (section.type === "MediaListSection") {
-            return (
-              <MediaListSection
-                key={index}
-                queryKey={section.queryKey}
-                queryFn={section.queryFn}
-              />
-            );
-          }
-          return null;
-        })}
+      <AppleTVCarousel
+        initialIndex={0}
+        onItemChange={(index) => {
+          console.log(`Now viewing carousel item ${index}`);
+        }}
+      />
+      <View
+        style={{
+          paddingLeft: insets.left,
+          paddingRight: insets.right,
+          paddingBottom: 16,
+        }}
+      >
+        <View className='flex flex-col space-y-4'>
+          {sections.map((section, index) => {
+            if (section.type === "ScrollingCollectionList") {
+              return (
+                <ScrollingCollectionList
+                  key={index}
+                  title={section.title}
+                  queryKey={section.queryKey}
+                  queryFn={section.queryFn}
+                  orientation={section.orientation}
+                  hideIfEmpty
+                />
+              );
+            }
+            if (section.type === "MediaListSection") {
+              return (
+                <MediaListSection
+                  key={index}
+                  queryKey={section.queryKey}
+                  queryFn={section.queryFn}
+                />
+              );
+            }
+            return null;
+          })}
+        </View>
       </View>
+      <View className='h-24' />
     </ScrollView>
   );
 };