feat(tv): add option selector for playback settings

components/library/Libraries.tsx

@@ -0,0 +1,109 @@
+import {
+  getUserLibraryApi,
+  getUserViewsApi,
+} from "@jellyfin/sdk/lib/utils/api";
+import { FlashList } from "@shopify/flash-list";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useAtom } from "jotai";
+import { useEffect, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { Platform, StyleSheet, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Text } from "@/components/common/Text";
+import { Loader } from "@/components/Loader";
+import { LibraryItemCard } from "@/components/library/LibraryItemCard";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { useSettings } from "@/utils/atoms/settings";
+
+export const Libraries: React.FC = () => {
+  const [api] = useAtom(apiAtom);
+  const [user] = useAtom(userAtom);
+  const queryClient = useQueryClient();
+  const { settings } = useSettings();
+
+  const { t } = useTranslation();
+
+  const { data, isLoading } = useQuery({
+    queryKey: ["user-views", user?.Id],
+    queryFn: async () => {
+      const response = await getUserViewsApi(api!).getUserViews({
+        userId: user?.Id,
+      });
+
+      return response.data.Items || null;
+    },
+    staleTime: 60,
+  });
+
+  const libraries = useMemo(
+    () =>
+      data
+        ?.filter((l) => !settings?.hiddenLibraries?.includes(l.Id!))
+        .filter((l) => l.CollectionType !== "books") || [],
+    [data, settings?.hiddenLibraries],
+  );
+
+  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, api, queryClient, user?.Id]);
+
+  const insets = useSafeAreaInsets();
+
+  if (isLoading)
+    return (
+      <View className='justify-center items-center h-full'>
+        <Loader />
+      </View>
+    );
+
+  if (!libraries)
+    return (
+      <View className='h-full w-full flex justify-center items-center'>
+        <Text className='text-lg text-neutral-500'>
+          {t("library.no_libraries_found")}
+        </Text>
+      </View>
+    );
+
+  return (
+    <FlashList
+      extraData={settings}
+      contentInsetAdjustmentBehavior='automatic'
+      contentContainerStyle={{
+        paddingTop: Platform.OS === "android" ? 17 : 0,
+        paddingHorizontal: settings?.libraryOptions?.display === "row" ? 0 : 17,
+        paddingBottom: 150,
+        paddingLeft: insets.left + 17,
+        paddingRight: insets.right + 17,
+      }}
+      data={libraries}
+      renderItem={({ item }) => <LibraryItemCard library={item} />}
+      keyExtractor={(item) => item.Id || ""}
+      ItemSeparatorComponent={() =>
+        settings?.libraryOptions?.display === "row" ? (
+          <View
+            style={{
+              height: StyleSheet.hairlineWidth,
+            }}
+            className='bg-neutral-800 mx-2 my-4'
+          />
+        ) : (
+          <View className='h-4' />
+        )
+      }
+    />
+  );
+};

components/library/TVLibraries.tsx

@@ -0,0 +1,165 @@
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { getUserViewsApi } from "@jellyfin/sdk/lib/utils/api";
+import { useQuery } from "@tanstack/react-query";
+import { useAtom } from "jotai";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { FlatList, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Text } from "@/components/common/Text";
+import { getItemNavigation } from "@/components/common/TouchableItemRouter";
+import { Loader } from "@/components/Loader";
+import {
+  TV_LIBRARY_CARD_WIDTH,
+  TVLibraryCard,
+} from "@/components/library/TVLibraryCard";
+import { TVFocusablePoster } from "@/components/tv/TVFocusablePoster";
+import useRouter from "@/hooks/useAppRouter";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { useSettings } from "@/utils/atoms/settings";
+
+const HORIZONTAL_PADDING = 60;
+const ITEM_GAP = 24;
+const SCALE_PADDING = 20;
+
+export const TVLibraries: React.FC = () => {
+  const [api] = useAtom(apiAtom);
+  const [user] = useAtom(userAtom);
+  const { settings } = useSettings();
+  const insets = useSafeAreaInsets();
+  const router = useRouter();
+  const { t } = useTranslation();
+  const flatListRef = useRef<FlatList<BaseItemDto>>(null);
+  const [focusedCount, setFocusedCount] = useState(0);
+  const prevFocusedCount = useRef(0);
+
+  const { data, isLoading } = useQuery({
+    queryKey: ["user-views", user?.Id],
+    queryFn: async () => {
+      const response = await getUserViewsApi(api!).getUserViews({
+        userId: user?.Id,
+      });
+
+      return response.data.Items || null;
+    },
+    staleTime: 60,
+    enabled: !!api && !!user?.Id,
+  });
+
+  const libraries = useMemo(
+    () =>
+      data
+        ?.filter((l) => !settings?.hiddenLibraries?.includes(l.Id!))
+        .filter((l) => l.CollectionType !== "books") || [],
+    [data, settings?.hiddenLibraries],
+  );
+
+  // Scroll back to start when section loses focus
+  useEffect(() => {
+    if (prevFocusedCount.current > 0 && focusedCount === 0) {
+      flatListRef.current?.scrollToOffset({ offset: 0, animated: true });
+    }
+    prevFocusedCount.current = focusedCount;
+  }, [focusedCount]);
+
+  const handleItemFocus = useCallback(() => {
+    setFocusedCount((c) => c + 1);
+  }, []);
+
+  const handleItemBlur = useCallback(() => {
+    setFocusedCount((c) => Math.max(0, c - 1));
+  }, []);
+
+  const handleItemPress = useCallback(
+    (item: BaseItemDto) => {
+      const navigation = getItemNavigation(item, "(libraries)");
+      router.push(navigation as any);
+    },
+    [router],
+  );
+
+  const getItemLayout = useCallback(
+    (_data: ArrayLike<BaseItemDto> | null | undefined, index: number) => ({
+      length: TV_LIBRARY_CARD_WIDTH + ITEM_GAP,
+      offset: (TV_LIBRARY_CARD_WIDTH + ITEM_GAP) * index,
+      index,
+    }),
+    [],
+  );
+
+  const renderItem = useCallback(
+    ({ item, index }: { item: BaseItemDto; index: number }) => {
+      const isFirstItem = index === 0;
+
+      return (
+        <View style={{ marginRight: ITEM_GAP }}>
+          <TVFocusablePoster
+            onPress={() => handleItemPress(item)}
+            hasTVPreferredFocus={isFirstItem}
+            onFocus={handleItemFocus}
+            onBlur={handleItemBlur}
+          >
+            <TVLibraryCard library={item} />
+          </TVFocusablePoster>
+        </View>
+      );
+    },
+    [handleItemPress, handleItemFocus, handleItemBlur],
+  );
+
+  if (isLoading) {
+    return (
+      <View
+        style={{
+          flex: 1,
+          justifyContent: "center",
+          alignItems: "center",
+        }}
+      >
+        <Loader />
+      </View>
+    );
+  }
+
+  if (!libraries || libraries.length === 0) {
+    return (
+      <View
+        style={{
+          flex: 1,
+          justifyContent: "center",
+          alignItems: "center",
+        }}
+      >
+        <Text style={{ fontSize: 20, color: "#737373" }}>
+          {t("library.no_libraries_found")}
+        </Text>
+      </View>
+    );
+  }
+
+  return (
+    <View
+      style={{
+        flex: 1,
+        justifyContent: "center",
+        paddingLeft: insets.left + HORIZONTAL_PADDING,
+        paddingRight: insets.right + HORIZONTAL_PADDING,
+      }}
+    >
+      <FlatList
+        ref={flatListRef}
+        horizontal
+        data={libraries}
+        keyExtractor={(item) => item.Id || ""}
+        renderItem={renderItem}
+        showsHorizontalScrollIndicator={false}
+        getItemLayout={getItemLayout}
+        style={{ overflow: "visible", flexGrow: 0 }}
+        contentContainerStyle={{
+          paddingVertical: SCALE_PADDING,
+          paddingHorizontal: SCALE_PADDING,
+        }}
+      />
+    </View>
+  );
+};

components/library/TVLibraryCard.tsx

@@ -0,0 +1,174 @@
+import { Ionicons } from "@expo/vector-icons";
+import type {
+  BaseItemDto,
+  BaseItemKind,
+  CollectionType,
+} from "@jellyfin/sdk/lib/generated-client/models";
+import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
+import { useQuery } from "@tanstack/react-query";
+import { Image } from "expo-image";
+import { useAtom } from "jotai";
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { View } from "react-native";
+import { Text } from "@/components/common/Text";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
+
+export const TV_LIBRARY_CARD_WIDTH = 280;
+export const TV_LIBRARY_CARD_HEIGHT = 180;
+
+interface Props {
+  library: BaseItemDto;
+}
+
+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 TVLibraryCard: React.FC<Props> = ({ library }) => {
+  const [api] = useAtom(apiAtom);
+  const [user] = useAtom(userAtom);
+  const { t } = useTranslation();
+
+  const url = useMemo(
+    () =>
+      getPrimaryImageUrl({
+        api,
+        item: library,
+      }),
+    [api, library],
+  );
+
+  const itemType = useMemo(() => {
+    let _itemType: BaseItemKind | undefined;
+
+    if (library.CollectionType === "movies") {
+      _itemType = "Movie";
+    } else if (library.CollectionType === "tvshows") {
+      _itemType = "Series";
+    } else if (library.CollectionType === "boxsets") {
+      _itemType = "BoxSet";
+    } else if (library.CollectionType === "homevideos") {
+      _itemType = "Video";
+    } else if (library.CollectionType === "musicvideos") {
+      _itemType = "MusicVideo";
+    }
+
+    return _itemType;
+  }, [library.CollectionType]);
+
+  const itemTypeName = useMemo(() => {
+    let nameStr: string;
+
+    if (library.CollectionType === "movies") {
+      nameStr = t("library.item_types.movies");
+    } else if (library.CollectionType === "tvshows") {
+      nameStr = t("library.item_types.series");
+    } else if (library.CollectionType === "boxsets") {
+      nameStr = t("library.item_types.boxsets");
+    } else {
+      nameStr = t("library.item_types.items");
+    }
+
+    return nameStr;
+  }, [library.CollectionType, t]);
+
+  const { data: itemsCount } = useQuery({
+    queryKey: ["library-count", library.Id],
+    queryFn: async () => {
+      const response = await getItemsApi(api!).getItems({
+        userId: user?.Id,
+        parentId: library.Id,
+        recursive: true,
+        limit: 0,
+        includeItemTypes: itemType ? [itemType] : undefined,
+      });
+      return response.data.TotalRecordCount;
+    },
+    enabled: !!api && !!user?.Id && !!library.Id,
+  });
+
+  const iconName = icons[library.CollectionType!] || "folder";
+
+  return (
+    <View
+      style={{
+        width: TV_LIBRARY_CARD_WIDTH,
+        height: TV_LIBRARY_CARD_HEIGHT,
+        borderRadius: 16,
+        overflow: "hidden",
+        backgroundColor: "#1a1a1a",
+        borderWidth: 1,
+        borderColor: "#333",
+      }}
+    >
+      {url && (
+        <Image
+          source={{ uri: url }}
+          style={{
+            position: "absolute",
+            width: "100%",
+            height: "100%",
+          }}
+          cachePolicy='memory-disk'
+        />
+      )}
+      <View
+        style={{
+          position: "absolute",
+          width: "100%",
+          height: "100%",
+          backgroundColor: url ? "rgba(0, 0, 0, 0.6)" : "transparent",
+        }}
+      />
+      <View
+        style={{
+          flex: 1,
+          justifyContent: "center",
+          alignItems: "center",
+          padding: 20,
+        }}
+      >
+        <Ionicons name={iconName} size={48} color='#e5e5e5' />
+        <Text
+          numberOfLines={1}
+          style={{
+            fontSize: 22,
+            fontWeight: "600",
+            color: "#FFFFFF",
+            marginTop: 12,
+            textAlign: "center",
+          }}
+        >
+          {library.Name}
+        </Text>
+        {itemsCount !== undefined && (
+          <Text
+            style={{
+              fontSize: 14,
+              color: "#9CA3AF",
+              marginTop: 4,
+            }}
+          >
+            {itemsCount} {itemTypeName}
+          </Text>
+        )}
+      </View>
+    </View>
+  );
+};