feat: library list design

app/(auth)/(tabs)/(libraries)/[libraryId].tsx

@@ -9,7 +9,7 @@ import React, {
   useMemo,
   useState,
 } from "react";
-import { FlatList, View } from "react-native";
+import { FlatList, RefreshControl, View } from "react-native";
 
 import { Text } from "@/components/common/Text";
 import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
@@ -38,6 +38,7 @@ import {
   getUserLibraryApi,
 } from "@jellyfin/sdk/lib/utils/api";
 import { FlashList } from "@shopify/flash-list";
+import { Loader } from "@/components/Loader";
 
 const MemoizedTouchableItemRouter = React.memo(TouchableItemRouter);
 
@@ -90,7 +91,7 @@ const Page = () => {
     };
   }, []);
 
-  const { data: library } = useQuery({
+  const { data: library, isLoading: isLibraryLoading } = useQuery({
     queryKey: ["library", libraryId],
     queryFn: async () => {
       if (!api) return null;
@@ -101,7 +102,7 @@ const Page = () => {
       return response.data;
     },
     enabled: !!api && !!user?.Id && !!libraryId,
-    staleTime: 0,
+    staleTime: 60 * 1000,
   });
 
   const fetchItems = useCallback(
@@ -112,28 +113,6 @@ const Page = () => {
     }): Promise<BaseItemDtoQueryResult | null> => {
       if (!api || !library) return null;
 
-      let includeItemTypes: BaseItemKind[] | undefined = [];
-
-      console.log("Page:", pageParam);
-
-      // switch (library?.CollectionType) {
-      //   case "movies":
-      //     includeItemTypes.push("Movie");
-      //     break;
-      //   case "boxsets":
-      //     includeItemTypes.push("BoxSet");
-      //     break;
-      //   case "tvshows":
-      //     includeItemTypes.push("Series");
-      //     break;
-      //   case "music":
-      //     includeItemTypes.push("MusicAlbum");
-      //     break;
-      //   default:
-      //     includeItemTypes = ["Series", "Movie", "CollectionFolder"];
-      //     break;
-      // }
-
       const response = await getItemsApi(api).getItems({
         userId: user?.Id,
         parentId: libraryId,
@@ -141,7 +120,6 @@ const Page = () => {
         startIndex: pageParam,
         sortBy: [sortBy[0].key, "SortName", "ProductionYear"],
         sortOrder: [sortOrder[0].key],
-        includeItemTypes,
         enableImageTypes: ["Primary", "Backdrop", "Banner", "Thumb"],
         recursive: false,
         imageTypeLimit: 1,
@@ -166,40 +144,41 @@ const Page = () => {
     ]
   );
 
-  const { data, isFetching, fetchNextPage, hasNextPage } = useInfiniteQuery({
-    queryKey: [
-      "library-items",
-      libraryId,
-      selectedGenres,
-      selectedYears,
-      selectedTags,
-      sortBy,
-      sortOrder,
-    ],
-    queryFn: fetchItems,
-    getNextPageParam: (lastPage, pages) => {
-      if (
-        !lastPage?.Items ||
-        !lastPage?.TotalRecordCount ||
-        lastPage?.TotalRecordCount === 0
-      )
-        return undefined;
+  const { data, isFetching, fetchNextPage, hasNextPage, isLoading } =
+    useInfiniteQuery({
+      queryKey: [
+        "library-items",
+        libraryId,
+        selectedGenres,
+        selectedYears,
+        selectedTags,
+        sortBy,
+        sortOrder,
+      ],
+      queryFn: fetchItems,
+      getNextPageParam: (lastPage, pages) => {
+        if (
+          !lastPage?.Items ||
+          !lastPage?.TotalRecordCount ||
+          lastPage?.TotalRecordCount === 0
+        )
+          return undefined;
 
-      const totalItems = lastPage.TotalRecordCount;
-      const accumulatedItems = pages.reduce(
-        (acc, curr) => acc + (curr?.Items?.length || 0),
-        0
-      );
+        const totalItems = lastPage.TotalRecordCount;
+        const accumulatedItems = pages.reduce(
+          (acc, curr) => acc + (curr?.Items?.length || 0),
+          0
+        );
 
-      if (accumulatedItems < totalItems) {
-        return lastPage?.Items?.length * pages.length;
-      } else {
-        return undefined;
-      }
-    },
-    initialPageParam: 0,
-    enabled: !!api && !!user?.Id && !!library,
-  });
+        if (accumulatedItems < totalItems) {
+          return lastPage?.Items?.length * pages.length;
+        } else {
+          return undefined;
+        }
+      },
+      initialPageParam: 0,
+      enabled: !!api && !!user?.Id && !!library,
+    });
 
   const flatData = useMemo(() => {
     return (
@@ -396,7 +375,19 @@ const Page = () => {
     ]
   );
 
-  if (!library) return null;
+  if (isLoading || isLibraryLoading)
+    return (
+      <View className="w-full h-full flex items-center justify-center">
+        <Loader />
+      </View>
+    );
+
+  if (flatData.length === 0)
+    return (
+      <View className="h-full w-full flex justify-center items-center">
+        <Text className="text-lg text-neutral-500">No items found</Text>
+      </View>
+    );
 
   return (
     <FlashList

app/(auth)/(tabs)/(libraries)/_layout.tsx

@@ -1,8 +1,15 @@
 import { nestedTabPageScreenOptions } from "@/components/stacks/NestedTabPageStack";
+import { useSettings } from "@/utils/atoms/settings";
+import { Ionicons } from "@expo/vector-icons";
 import { Stack } from "expo-router";
 import { Platform } from "react-native";
+import * as DropdownMenu from "zeego/dropdown-menu";
 
 export default function IndexLayout() {
+  const [settings, updateSettings] = useSettings();
+
+  if (!settings?.libraryOptions) return null;
+
   return (
     <Stack>
       <Stack.Screen
@@ -14,6 +21,148 @@ export default function IndexLayout() {
           headerBlurEffect: "prominent",
           headerTransparent: Platform.OS === "ios" ? true : false,
           headerShadowVisible: false,
+          headerRight: () => (
+            <DropdownMenu.Root>
+              <DropdownMenu.Trigger>
+                <Ionicons
+                  name="ellipsis-horizontal-outline"
+                  size={24}
+                  color="white"
+                />
+              </DropdownMenu.Trigger>
+              <DropdownMenu.Content
+                align={"end"}
+                alignOffset={-10}
+                avoidCollisions={false}
+                collisionPadding={0}
+                loop={false}
+                side={"bottom"}
+                sideOffset={10}
+              >
+                <DropdownMenu.Label>Display</DropdownMenu.Label>
+                <DropdownMenu.Group key="display-group">
+                  <DropdownMenu.Sub>
+                    <DropdownMenu.SubTrigger key="image-style-trigger">
+                      Display
+                    </DropdownMenu.SubTrigger>
+                    <DropdownMenu.SubContent
+                      alignOffset={-10}
+                      avoidCollisions={true}
+                      collisionPadding={0}
+                      loop={true}
+                      sideOffset={10}
+                    >
+                      <DropdownMenu.CheckboxItem
+                        key="display-option-1"
+                        value={settings.libraryOptions.display === "row"}
+                        onValueChange={() =>
+                          updateSettings({
+                            libraryOptions: {
+                              ...settings.libraryOptions,
+                              display: "row",
+                            },
+                          })
+                        }
+                      >
+                        <DropdownMenu.ItemIndicator />
+                        <DropdownMenu.ItemTitle key="display-title-1">
+                          Row
+                        </DropdownMenu.ItemTitle>
+                      </DropdownMenu.CheckboxItem>
+                      <DropdownMenu.CheckboxItem
+                        key="display-option-2"
+                        value={settings.libraryOptions.display === "list"}
+                        onValueChange={() =>
+                          updateSettings({
+                            libraryOptions: {
+                              ...settings.libraryOptions,
+                              display: "list",
+                            },
+                          })
+                        }
+                      >
+                        <DropdownMenu.ItemIndicator />
+                        <DropdownMenu.ItemTitle key="display-title-2">
+                          List
+                        </DropdownMenu.ItemTitle>
+                      </DropdownMenu.CheckboxItem>
+                    </DropdownMenu.SubContent>
+                  </DropdownMenu.Sub>
+                  <DropdownMenu.Sub>
+                    <DropdownMenu.SubTrigger key="image-style-trigger">
+                      Image style
+                    </DropdownMenu.SubTrigger>
+                    <DropdownMenu.SubContent
+                      alignOffset={-10}
+                      avoidCollisions={true}
+                      collisionPadding={0}
+                      loop={true}
+                      sideOffset={10}
+                    >
+                      <DropdownMenu.CheckboxItem
+                        key="poster-option"
+                        value={settings.libraryOptions.imageStyle === "poster"}
+                        onValueChange={() =>
+                          updateSettings({
+                            libraryOptions: {
+                              ...settings.libraryOptions,
+                              imageStyle: "poster",
+                            },
+                          })
+                        }
+                      >
+                        <DropdownMenu.ItemIndicator />
+                        <DropdownMenu.ItemTitle key="poster-title">
+                          Poster
+                        </DropdownMenu.ItemTitle>
+                      </DropdownMenu.CheckboxItem>
+                      <DropdownMenu.CheckboxItem
+                        key="cover-option"
+                        value={settings.libraryOptions.imageStyle === "cover"}
+                        onValueChange={() =>
+                          updateSettings({
+                            libraryOptions: {
+                              ...settings.libraryOptions,
+                              imageStyle: "cover",
+                            },
+                          })
+                        }
+                      >
+                        <DropdownMenu.ItemIndicator />
+                        <DropdownMenu.ItemTitle key="cover-title">
+                          Cover
+                        </DropdownMenu.ItemTitle>
+                      </DropdownMenu.CheckboxItem>
+                    </DropdownMenu.SubContent>
+                  </DropdownMenu.Sub>
+                </DropdownMenu.Group>
+                <DropdownMenu.Group key="show-titles-group">
+                  <DropdownMenu.CheckboxItem
+                    disabled={settings.libraryOptions.imageStyle === "poster"}
+                    key="show-titles-option"
+                    value={settings.libraryOptions.showTitles}
+                    onValueChange={(newValue) => {
+                      if (settings.libraryOptions.imageStyle === "poster")
+                        return;
+                      updateSettings({
+                        libraryOptions: {
+                          ...settings.libraryOptions,
+                          showTitles: newValue === "on" ? true : false,
+                        },
+                      });
+                    }}
+                  >
+                    <DropdownMenu.ItemIndicator />
+                    <DropdownMenu.ItemTitle key="show-titles-title">
+                      Show titles
+                    </DropdownMenu.ItemTitle>
+                  </DropdownMenu.CheckboxItem>
+                </DropdownMenu.Group>
+
+                <DropdownMenu.Separator />
+              </DropdownMenu.Content>
+            </DropdownMenu.Root>
+          ),
         }}
       />
       <Stack.Screen

app/(auth)/(tabs)/(libraries)/index.tsx

@@ -1,21 +1,24 @@
 import { Text } from "@/components/common/Text";
-import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
+import { LibraryItemCard } from "@/components/library/LibraryItemCard";
 import { Loader } from "@/components/Loader";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { getUserViewsApi } from "@jellyfin/sdk/lib/utils/api";
+import { useSettings } from "@/utils/atoms/settings";
+import {
+  getUserLibraryApi,
+  getUserViewsApi,
+} from "@jellyfin/sdk/lib/utils/api";
 import { FlashList } from "@shopify/flash-list";
-import { useQuery } from "@tanstack/react-query";
-import { Image } from "expo-image";
-import { useRouter } from "expo-router";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useNavigation } from "expo-router";
 import { useAtom } from "jotai";
-import { useMemo } from "react";
-import { TouchableOpacity, View } from "react-native";
+import { useEffect } from "react";
+import { StyleSheet, View } from "react-native";
 
 export default function index() {
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
+  const queryClient = useQueryClient();
+  const [settings] = useSettings();
 
   const { data, isLoading: isLoading } = useQuery({
     queryKey: ["user-views", user?.Id],
@@ -34,6 +37,23 @@ export default function index() {
     staleTime: 60 * 1000,
   });
 
+  useEffect(() => {
+    for (const item of data || []) {
+      queryClient.prefetchQuery({
+        queryKey: ["library", item.Id],
+        queryFn: async () => {
+          if (!item.Id || !user?.Id || !api) return null;
+          const response = await getUserLibraryApi(api).getItem({
+            itemId: item.Id,
+            userId: user?.Id,
+          });
+          return response.data;
+        },
+        staleTime: 60 * 1000,
+      });
+    }
+  }, [data]);
+
   if (isLoading)
     return (
       <View className="justify-center items-center h-full">
@@ -41,59 +61,38 @@ export default function index() {
       </View>
     );
 
+  if (!data)
+    return (
+      <View className="h-full w-full flex justify-center items-center">
+        <Text className="text-lg text-neutral-500">No libraries found</Text>
+      </View>
+    );
+
   return (
     <FlashList
+      extraData={settings}
       contentInsetAdjustmentBehavior="automatic"
       contentContainerStyle={{
         paddingTop: 17,
-        paddingHorizontal: 17,
+        paddingHorizontal: settings?.libraryOptions?.display === "row" ? 0 : 17,
         paddingBottom: 150,
       }}
       data={data}
       renderItem={({ item }) => <LibraryItemCard library={item} />}
       keyExtractor={(item) => item.Id || ""}
-      ItemSeparatorComponent={() => <View className="h-4" />}
+      ItemSeparatorComponent={() =>
+        settings?.libraryOptions?.display === "row" ? (
+          <View
+            style={{
+              height: StyleSheet.hairlineWidth,
+            }}
+            className="bg-neutral-800 mx-2 my-4"
+          ></View>
+        ) : (
+          <View className="h-4" />
+        )
+      }
       estimatedItemSize={200}
     />
   );
 }
-
-interface Props {
-  library: BaseItemDto;
-}
-
-const LibraryItemCard: React.FC<Props> = ({ library }) => {
-  const [api] = useAtom(apiAtom);
-
-  const url = useMemo(
-    () =>
-      getPrimaryImageUrl({
-        api,
-        item: library,
-      }),
-    [library]
-  );
-
-  if (!url) return null;
-
-  return (
-    <TouchableItemRouter item={library}>
-      <View className="flex justify-center rounded-xl w-full relative border border-neutral-900 h-20 ">
-        <Image
-          source={{ uri: url }}
-          style={{
-            width: "100%",
-            height: "100%",
-            borderRadius: 8,
-            position: "absolute",
-            top: 0,
-            left: 0,
-          }}
-        />
-        <Text className="font-bold text-xl text-start px-4">
-          {library.Name}
-        </Text>
-      </View>
-    </TouchableItemRouter>
-  );
-};