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>
-  );
-};

components/library/LibraryItemCard.tsx

@@ -0,0 +1,179 @@
+import { TouchableOpacityProps, View, ViewProps } from "react-native";
+import { Text } from "@/components/common/Text";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
+import { useAtom } from "jotai";
+import { useEffect, useMemo, useState } from "react";
+import { TouchableItemRouter } from "../common/TouchableItemRouter";
+import {
+  BaseItemDto,
+  BaseItemKind,
+  CollectionType,
+} from "@jellyfin/sdk/lib/generated-client/models";
+import { Image } from "expo-image";
+import { getColors, ImageColorsResult } from "react-native-image-colors";
+import { useQuery } from "@tanstack/react-query";
+import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
+import { sortBy } from "lodash";
+import { useSettings } from "@/utils/atoms/settings";
+import { Ionicons } from "@expo/vector-icons";
+
+interface Props extends TouchableOpacityProps {
+  library: BaseItemDto;
+}
+
+type LibraryColor = {
+  dominantColor: string;
+  averageColor: string;
+  secondary: string;
+};
+
+type IconName = React.ComponentProps<typeof Ionicons>["name"];
+
+const icons: Record<CollectionType, IconName> = {
+  movies: "film",
+  tvshows: "tv",
+  music: "musical-notes",
+  books: "book",
+  homevideos: "videocam",
+  boxsets: "albums",
+  playlists: "list",
+  folders: "folder",
+  livetv: "tv",
+  musicvideos: "musical-notes",
+  photos: "images",
+  trailers: "videocam",
+  unknown: "help-circle",
+} as const;
+export const LibraryItemCard: React.FC<Props> = ({ library, ...props }) => {
+  const [api] = useAtom(apiAtom);
+  const [user] = useAtom(userAtom);
+  const [settings] = useSettings();
+
+  const [imageInfo, setImageInfo] = useState<LibraryColor>({
+    dominantColor: "#fff",
+    averageColor: "#fff",
+    secondary: "#fff",
+  });
+
+  const url = useMemo(
+    () =>
+      getPrimaryImageUrl({
+        api,
+        item: library,
+      }),
+    [library]
+  );
+
+  const { data: itemsCount } = useQuery({
+    queryKey: ["library-count", library.Id],
+    queryFn: async () => {
+      if (!api) return null;
+      const response = await getItemsApi(api).getItems({
+        userId: user?.Id,
+        parentId: library.Id,
+        limit: 0,
+      });
+      return response.data.TotalRecordCount;
+    },
+  });
+
+  useEffect(() => {
+    if (url) {
+      getColors(url, {
+        fallback: "#fff",
+        cache: true,
+        key: url,
+      })
+        .then((colors) => {
+          let dominantColor: string = "#fff";
+          let averageColor: string = "#fff";
+          let secondary: string = "#fff";
+
+          if (colors.platform === "android") {
+            dominantColor = colors.dominant;
+            averageColor = colors.average;
+            secondary = colors.muted;
+          } else if (colors.platform === "ios") {
+            dominantColor = colors.primary;
+            averageColor = colors.background;
+            secondary = colors.detail;
+          }
+
+          setImageInfo({
+            dominantColor,
+            averageColor,
+            secondary,
+          });
+        })
+        .catch((error) => {
+          console.log("Error getting colors", error);
+        });
+    }
+  }, [url]);
+
+  if (!url) return null;
+
+  if (settings?.libraryOptions?.display === "row") {
+    return (
+      <TouchableItemRouter item={library} className="w-full px-4">
+        <View className="flex flex-row items-center w-full relative">
+          <Ionicons
+            name={icons[library.CollectionType!] || "folder"}
+            size={22}
+            color={"#e5e5e5"}
+          />
+          <Text className="text-start px-4 text-neutral-200">
+            {library.Name}
+          </Text>
+        </View>
+      </TouchableItemRouter>
+    );
+  }
+
+  if (settings?.libraryOptions?.imageStyle === "cover") {
+    return (
+      <TouchableItemRouter item={library} className="w-full">
+        <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,
+            }}
+          />
+          {settings?.libraryOptions?.showTitles && (
+            <Text className="font-bold text-xl text-start px-4">
+              {library.Name}
+            </Text>
+          )}
+        </View>
+      </TouchableItemRouter>
+    );
+  }
+
+  return (
+    <TouchableItemRouter item={library} {...props}>
+      <View className="flex flex-row items-center justify-between rounded-xl w-full relative border bg-neutral-900 border-neutral-900 h-20">
+        <View className="flex flex-col">
+          <Text className="font-bold text-lg text-start px-4">
+            {library.Name}
+          </Text>
+          <Text className="font-bold text-xs text-neutral-500 text-start px-4">
+            {itemsCount} items
+          </Text>
+        </View>
+        <View className="p-2">
+          <Image
+            source={{ uri: url }}
+            className="h-full aspect-[2/1] object-cover rounded-lg overflow-hidden"
+          />
+        </View>
+      </View>
+    </TouchableItemRouter>
+  );
+};

package.json

@@ -62,6 +62,7 @@
     "react-native-gesture-handler": "~2.16.1",
     "react-native-get-random-values": "^1.11.0",
     "react-native-google-cast": "^4.8.2",
+    "react-native-image-colors": "^2.4.0",
     "react-native-ios-context-menu": "^2.5.1",
     "react-native-ios-utilities": "^4.4.5",
     "react-native-reanimated": "~3.10.1",

utils/atoms/settings.ts

@@ -24,6 +24,13 @@ export const DownloadOptions: DownloadOption[] = [
   },
 ];
 
+export type LibraryOptions = {
+  display: "row" | "list";
+  cardStyle: "compact" | "detailed";
+  imageStyle: "poster" | "cover";
+  showTitles: boolean;
+};
+
 type Settings = {
   autoRotate?: boolean;
   forceLandscapeInVideoPlayer?: boolean;
@@ -36,6 +43,7 @@ type Settings = {
   marlinServerUrl?: string;
   openInVLC?: boolean;
   downloadQuality?: DownloadOption;
+  libraryOptions: LibraryOptions;
 };
 
 /**
@@ -59,6 +67,12 @@ const loadSettings = async (): Promise<Settings> => {
     marlinServerUrl: "",
     openInVLC: false,
     downloadQuality: DownloadOptions[0],
+    libraryOptions: {
+      display: "list",
+      cardStyle: "detailed",
+      imageStyle: "cover",
+      showTitles: true,
+    },
   };
 
   try {