wip: use general poster component

feat: Add Default option and use collection sorting as default

.gitignore

@@ -21,6 +21,7 @@ build-*
 *.mp4
 build-*
 Streamyfin.app
+package-lock.json
 
 /ios
 /android

README.md

@@ -1,5 +1,7 @@
 # 📺 Streamyfin
 
+<a href="https://www.buymeacoffee.com/fredrikbur3" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Buy Me A Coffee" style="height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;" ></a>
+
 Welcome to Streamyfin, a simple and user-friendly Jellyfin client built with Expo. If you're looking for an alternative to other Jellyfin clients, we hope you'll find Streamyfin to be a useful addition to your media streaming toolbox.
 
 <div style="display: flex; flex-direction: row; gap: 5px">
@@ -87,6 +89,12 @@ We welcome any help to make Streamyfin better. If you'd like to contribute, plea
 
 ### Development info
 
+1. Use node `20`
+2. Install deps `bun i`
+3. `Create an expo dev build by running `npx expo run:ios` or `npx expo run:android`.
+
+## Extended chromecast controls
+
 Add this to AppDelegate.mm:
 
 ```
@@ -135,10 +143,6 @@ If you have questions or need support, feel free to reach out:
 - GitHub Issues: Report bugs or request features here.
 - Email: [fredrik.burmester@gmail.com](mailto:fredrik.burmester@gmail.com)
 
-## Support
-
-<a href="https://www.buymeacoffee.com/fredrikbur3" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Buy Me A Coffee" style="height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;" ></a>
-
 ## 📝 Credits
 
 Streamyfin is developed by Fredrik Burmester and is not affiliated with Jellyfin. The app is built with Expo, React Native, and other open-source libraries.

app.json

@@ -2,7 +2,7 @@
   "expo": {
     "name": "Streamyfin",
     "slug": "streamyfin",
-    "version": "0.8.1",
+    "version": "0.10.3",
     "orientation": "default",
     "icon": "./assets/images/icon.png",
     "scheme": "streamyfin",
@@ -25,12 +25,15 @@
           "NSAllowsArbitraryLoads": true
         }
       },
+      "config": {
+        "usesNonExemptEncryption": false
+      },
       "supportsTablet": true,
       "bundleIdentifier": "com.fredrikburmester.streamyfin"
     },
     "android": {
       "jsEngine": "hermes",
-      "versionCode": 21,
+      "versionCode": 32,
       "adaptiveIcon": {
         "foregroundImage": "./assets/images/icon.png"
       },
@@ -68,6 +71,13 @@
           }
         }
       ],
+      [
+        "./plugins/withAndroidMainActivityAttributes",
+        {
+          "com.reactnative.googlecast.RNGCExpandedControllerActivity": true
+        }
+      ],
+      ["./plugins/withExpandedController.js"],
       [
         "expo-build-properties",
         {
@@ -75,6 +85,11 @@
             "deploymentTarget": "14.0"
           },
           "android": {
+            "android": {
+              "compileSdkVersion": 34,
+              "targetSdkVersion": 34,
+              "buildToolsVersion": "34.0.0"
+            },
             "minSdkVersion": 24,
             "usesCleartextTraffic": true,
             "packagingOptions": {

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

@@ -1,8 +1,9 @@
 import { Chromecast } from "@/components/Chromecast";
+import { HeaderBackButton } from "@/components/common/HeaderBackButton";
+import { nestedTabPageScreenOptions } from "@/components/stacks/NestedTabPageStack";
 import { Feather } from "@expo/vector-icons";
 import { Stack, useRouter } from "expo-router";
-import { Platform, View } from "react-native";
-import { TouchableOpacity } from "react-native";
+import { Platform, TouchableOpacity, View } from "react-native";
 
 export default function IndexLayout() {
   const router = useRouter();
@@ -45,6 +46,21 @@ export default function IndexLayout() {
           ),
         }}
       />
+      <Stack.Screen
+        name="downloads"
+        options={{
+          title: "Downloads",
+        }}
+      />
+      <Stack.Screen
+        name="settings"
+        options={{
+          title: "Settings",
+        }}
+      />
+      {Object.entries(nestedTabPageScreenOptions).map(([name, options]) => (
+        <Stack.Screen key={name} name={name} options={options} />
+      ))}
     </Stack>
   );
 }

app/(auth)/(tabs)/(home)/downloads.tsx

@@ -13,6 +13,7 @@ import { FFmpegKit } from "ffmpeg-kit-react-native";
 import { useAtom } from "jotai";
 import { useMemo } from "react";
 import { ScrollView, TouchableOpacity, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 const downloads: React.FC = () => {
   const [process, setProcess] = useAtom(runningProcesses);
@@ -53,6 +54,8 @@ const downloads: React.FC = () => {
     return formatNumber(timeLeft / 10000);
   }, [process]);
 
+  const insets = useSafeAreaInsets();
+
   if (isLoading) {
     return (
       <View className="h-full flex flex-col items-center justify-center -mt-6">
@@ -62,7 +65,13 @@ const downloads: React.FC = () => {
   }
 
   return (
-    <ScrollView>
+    <ScrollView
+      contentContainerStyle={{
+        paddingLeft: insets.left,
+        paddingRight: insets.right,
+        paddingBottom: 100,
+      }}
+    >
       <View className="px-4 py-4">
         <View className="mb-4 flex flex-col space-y-4">
           <View>
@@ -70,7 +79,9 @@ const downloads: React.FC = () => {
             <View className="flex flex-col space-y-2">
               {queue.map((q) => (
                 <TouchableOpacity
-                  onPress={() => router.push(`/(auth)/items/${q.item.Id}`)}
+                  onPress={() =>
+                    router.push(`/(auth)/items/page?id=${q.item.Id}`)
+                  }
                   className="relative bg-neutral-900 border border-neutral-800 p-4 rounded-2xl overflow-hidden flex flex-row items-center justify-between"
                 >
                   <View>
@@ -97,7 +108,9 @@ const downloads: React.FC = () => {
             <Text className="text-2xl font-bold mb-2">Active download</Text>
             {process?.item ? (
               <TouchableOpacity
-                onPress={() => router.push(`/(auth)/items/${process.item.Id}`)}
+                onPress={() =>
+                  router.push(`/(auth)/items/page?id=${process.item.Id}`)
+                }
                 className="relative bg-neutral-900 border border-neutral-800 p-4 rounded-2xl overflow-hidden flex flex-row items-center justify-between"
               >
                 <View>

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

@@ -0,0 +1,335 @@
+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";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { useSettings } from "@/utils/atoms/settings";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import {
+  getItemsApi,
+  getSuggestionsApi,
+  getTvShowsApi,
+  getUserLibraryApi,
+  getUserViewsApi,
+} from "@jellyfin/sdk/lib/utils/api";
+import NetInfo from "@react-native-community/netinfo";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useRouter } from "expo-router";
+import { useAtom } from "jotai";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { RefreshControl, SafeAreaView, ScrollView, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+type BaseSection = {
+  title: string;
+  queryKey: (string | undefined)[];
+};
+
+type ScrollingCollectionListSection = BaseSection & {
+  type: "ScrollingCollectionList";
+  queryFn: () => Promise<BaseItemDto[]>;
+  orientation?: "horizontal" | "vertical";
+};
+
+type MediaListSection = BaseSection & {
+  type: "MediaListSection";
+  queryFn: () => Promise<BaseItemDto>;
+};
+
+type Section = ScrollingCollectionListSection | MediaListSection;
+
+export default function index() {
+  const queryClient = useQueryClient();
+
+  const [api] = useAtom(apiAtom);
+  const [user] = useAtom(userAtom);
+
+  const [loading, setLoading] = useState(false);
+  const [settings, _] = useSettings();
+
+  const [isConnected, setIsConnected] = useState<boolean | null>(null);
+
+  useEffect(() => {
+    const unsubscribe = NetInfo.addEventListener((state) => {
+      if (state.isConnected == false || state.isInternetReachable === false)
+        setIsConnected(false);
+      else setIsConnected(true);
+    });
+
+    NetInfo.fetch().then((state) => {
+      setIsConnected(state.isConnected);
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, []);
+
+  const {
+    data: userViews,
+    isError: e1,
+    isLoading: l1,
+  } = useQuery({
+    queryKey: ["userViews", user?.Id],
+    queryFn: async () => {
+      if (!api || !user?.Id) {
+        return null;
+      }
+
+      const response = await getUserViewsApi(api).getUserViews({
+        userId: user.Id,
+      });
+
+      return response.data.Items || null;
+    },
+    enabled: !!api && !!user?.Id,
+    staleTime: 60 * 1000,
+  });
+
+  const {
+    data: mediaListCollections,
+    isError: e2,
+    isLoading: l2,
+  } = useQuery({
+    queryKey: ["sf_promoted", user?.Id, settings?.usePopularPlugin],
+    queryFn: async () => {
+      if (!api || !user?.Id) return [];
+
+      const response = await getItemsApi(api).getItems({
+        userId: user.Id,
+        tags: ["sf_promoted"],
+        recursive: true,
+        fields: ["Tags"],
+        includeItemTypes: ["BoxSet"],
+      });
+
+      return response.data.Items || [];
+    },
+    enabled: !!api && !!user?.Id && settings?.usePopularPlugin === true,
+    staleTime: 60 * 1000,
+  });
+
+  const movieCollectionId = useMemo(() => {
+    return userViews?.find((c) => c.CollectionType === "movies")?.Id;
+  }, [userViews]);
+
+  const tvShowCollectionId = useMemo(() => {
+    return userViews?.find((c) => c.CollectionType === "tvshows")?.Id;
+  }, [userViews]);
+
+  const refetch = useCallback(async () => {
+    setLoading(true);
+    await queryClient.refetchQueries({ queryKey: ["userViews"] });
+    await queryClient.refetchQueries({ queryKey: ["resumeItems"] });
+    await queryClient.refetchQueries({ queryKey: ["nextUp-all"] });
+    await queryClient.refetchQueries({ queryKey: ["recentlyAddedInMovies"] });
+    await queryClient.refetchQueries({ queryKey: ["recentlyAddedInTVShows"] });
+    await queryClient.refetchQueries({ queryKey: ["suggestions"] });
+    await queryClient.refetchQueries({
+      queryKey: ["sf_promoted"],
+    });
+    await queryClient.refetchQueries({
+      queryKey: ["sf_carousel"],
+    });
+    setLoading(false);
+  }, [queryClient, user?.Id]);
+
+  const sections = useMemo(() => {
+    if (!api || !user?.Id) return [];
+
+    const ss: Section[] = [
+      {
+        title: "Continue Watching",
+        queryKey: ["resumeItems", user.Id],
+        queryFn: async () =>
+          (
+            await getItemsApi(api).getResumeItems({
+              userId: user.Id,
+              enableImageTypes: ["Primary", "Backdrop", "Thumb"],
+            })
+          ).data.Items || [],
+        type: "ScrollingCollectionList",
+        orientation: "horizontal",
+      },
+      {
+        title: "Next Up",
+        queryKey: ["nextUp-all", user?.Id],
+        queryFn: async () =>
+          (
+            await getTvShowsApi(api).getNextUp({
+              userId: user?.Id,
+              fields: ["MediaSourceCount"],
+              limit: 20,
+              enableImageTypes: ["Primary", "Backdrop", "Thumb"],
+            })
+          ).data.Items || [],
+        type: "ScrollingCollectionList",
+        orientation: "horizontal",
+      },
+      ...(mediaListCollections?.map(
+        (ml) =>
+          ({
+            title: ml.Name || "",
+            queryKey: ["mediaList", ml.Id],
+            queryFn: async () => ml,
+            type: "MediaListSection",
+          } as MediaListSection)
+      ) || []),
+      {
+        title: "Recently Added in Movies",
+        queryKey: ["recentlyAddedInMovies", user?.Id, movieCollectionId],
+        queryFn: async () =>
+          (
+            await getUserLibraryApi(api).getLatestMedia({
+              userId: user?.Id,
+              limit: 50,
+              fields: ["PrimaryImageAspectRatio", "Path"],
+              imageTypeLimit: 1,
+              enableImageTypes: ["Primary", "Backdrop", "Thumb"],
+              parentId: movieCollectionId,
+            })
+          ).data || [],
+        type: "ScrollingCollectionList",
+      },
+      {
+        title: "Recently Added in TV-Shows",
+        queryKey: ["recentlyAddedInTVShows", user?.Id, tvShowCollectionId],
+        queryFn: async () =>
+          (
+            await getUserLibraryApi(api).getLatestMedia({
+              userId: user?.Id,
+              limit: 50,
+              fields: ["PrimaryImageAspectRatio", "Path"],
+              imageTypeLimit: 1,
+              enableImageTypes: ["Primary", "Backdrop", "Thumb"],
+              parentId: tvShowCollectionId,
+            })
+          ).data || [],
+        type: "ScrollingCollectionList",
+      },
+      {
+        title: "Suggested Movies",
+        queryKey: ["suggestedMovies", user?.Id],
+        queryFn: async () =>
+          (
+            await getSuggestionsApi(api).getSuggestions({
+              userId: user?.Id,
+              limit: 10,
+              mediaType: ["Video"],
+              type: ["Movie"],
+            })
+          ).data.Items || [],
+        type: "ScrollingCollectionList",
+        orientation: "vertical",
+      },
+      {
+        title: "Suggested Episodes",
+        queryKey: ["suggestedEpisodes", user?.Id],
+        queryFn: async () =>
+          (
+            await getSuggestionsApi(api).getSuggestions({
+              userId: user?.Id,
+              limit: 10,
+              mediaType: ["Video"],
+              type: ["Episode"],
+            })
+          ).data.Items || [],
+        type: "ScrollingCollectionList",
+        orientation: "horizontal",
+      },
+    ];
+    return ss;
+  }, [
+    api,
+    user?.Id,
+    movieCollectionId,
+    tvShowCollectionId,
+    mediaListCollections,
+  ]);
+
+  // if (isConnected === false) {
+  //   return (
+  //     <View className="flex flex-col items-center justify-center h-full -mt-6 px-8">
+  //       <Text className="text-3xl font-bold mb-2">No Internet</Text>
+  //       <Text className="text-center opacity-70">
+  //         No worries, you can still watch{"\n"}downloaded content.
+  //       </Text>
+  //       <View className="mt-4">
+  //         <Button
+  //           color="purple"
+  //           onPress={() => router.push("/(auth)/downloads")}
+  //           justify="center"
+  //           iconRight={
+  //             <Ionicons name="arrow-forward" size={20} color="white" />
+  //           }
+  //         >
+  //           Go to downloads
+  //         </Button>
+  //       </View>
+  //     </View>
+  //   );
+  // }
+
+  const insets = useSafeAreaInsets();
+
+  if (e1 || e2)
+    return (
+      <View className="flex flex-col items-center justify-center h-full -mt-6">
+        <Text className="text-3xl font-bold mb-2">Oops!</Text>
+        <Text className="text-center opacity-70">
+          Something went wrong.{"\n"}Please log out and in again.
+        </Text>
+      </View>
+    );
+
+  if (l1 || l2)
+    return (
+      <View className="justify-center items-center h-full">
+        <Loader />
+      </View>
+    );
+
+  return (
+    <ScrollView
+      nestedScrollEnabled
+      contentInsetAdjustmentBehavior="automatic"
+      refreshControl={
+        <RefreshControl refreshing={loading} onRefresh={refetch} />
+      }
+    >
+      <View
+        style={{
+          paddingLeft: insets.left,
+          paddingRight: insets.right,
+        }}
+        className="flex flex-col pt-4 pb-24 gap-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}
+              />
+            );
+          } else if (section.type === "MediaListSection") {
+            return (
+              <MediaListSection
+                key={index}
+                queryKey={section.queryKey}
+                queryFn={section.queryFn}
+              />
+            );
+          }
+          return null;
+        })}
+      </View>
+    </ScrollView>
+  );
+}

app/(auth)/(tabs)/(home)/settings.tsx

@@ -1,15 +1,15 @@
 import { Button } from "@/components/Button";
 import { Text } from "@/components/common/Text";
 import { ListItem } from "@/components/ListItem";
+import { SettingToggles } from "@/components/settings/SettingToggles";
+import { useFiles } from "@/hooks/useFiles";
 import { apiAtom, useJellyfin, userAtom } from "@/providers/JellyfinProvider";
 import { clearLogs, readFromLog } from "@/utils/log";
 import { useQuery } from "@tanstack/react-query";
+import * as Haptics from "expo-haptics";
 import { useAtom } from "jotai";
 import { ScrollView, View } from "react-native";
-import * as Haptics from "expo-haptics";
-import { useFiles } from "@/hooks/useFiles";
-import { SettingToggles } from "@/components/settings/SettingToggles";
-import { WebSocketsTest } from "@/components/settings/WebsocketsText";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 export default function settings() {
   const { logout } = useJellyfin();
@@ -24,9 +24,17 @@ export default function settings() {
     refetchInterval: 1000,
   });
 
+  const insets = useSafeAreaInsets();
+
   return (
-    <ScrollView>
-      <View className="p-4 flex flex-col gap-y-4 pb-12">
+    <ScrollView
+      contentContainerStyle={{
+        paddingLeft: insets.left,
+        paddingRight: insets.right,
+        paddingBottom: 100,
+      }}
+    >
+      <View className="p-4 flex flex-col gap-y-4">
         <Text className="font-bold text-2xl">Information</Text>
 
         <View className="flex flex-col rounded-xl mb-4 overflow-hidden border-neutral-800 divide-y-2 divide-solid divide-neutral-800 ">

app/(auth)/(tabs)/(home,libraries,search)/actors/[actorId].tsx

@@ -0,0 +1,140 @@
+import { ItemCardText } from "@/components/ItemCardText";
+import { Loader } from "@/components/Loader";
+import { OverviewText } from "@/components/OverviewText";
+import { ParallaxScrollView } from "@/components/ParallaxPage";
+import { InfiniteHorizontalScroll } from "@/components/common/InfiniteHorrizontalScroll";
+import { Text } from "@/components/common/Text";
+import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
+import { MoviesTitleHeader } from "@/components/movies/MoviesTitleHeader";
+import MoviePoster from "@/components/posters/MoviePoster";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
+import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
+import { BaseItemDtoQueryResult } 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 { useLocalSearchParams } from "expo-router";
+import { useAtom } from "jotai";
+import { useCallback, useMemo } from "react";
+import { View } from "react-native";
+
+const page: React.FC = () => {
+  const local = useLocalSearchParams();
+  const { actorId } = local as { actorId: string };
+
+  const [api] = useAtom(apiAtom);
+  const [user] = useAtom(userAtom);
+
+  const { data: item, isLoading: l1 } = useQuery({
+    queryKey: ["item", actorId],
+    queryFn: async () =>
+      await getUserItemData({
+        api,
+        userId: user?.Id,
+        itemId: actorId,
+      }),
+    enabled: !!actorId && !!api,
+    staleTime: 60,
+  });
+
+  const fetchItems = useCallback(
+    async ({
+      pageParam,
+    }: {
+      pageParam: number;
+    }): Promise<BaseItemDtoQueryResult | null> => {
+      if (!api || !user?.Id) return null;
+
+      const response = await getItemsApi(api).getItems({
+        userId: user.Id,
+        personIds: [actorId],
+        startIndex: pageParam,
+        limit: 8,
+        sortOrder: ["Descending", "Descending", "Ascending"],
+        includeItemTypes: ["Movie", "Series"],
+        recursive: true,
+        fields: [
+          "ParentId",
+          "PrimaryImageAspectRatio",
+          "ParentId",
+          "PrimaryImageAspectRatio",
+        ],
+        sortBy: ["PremiereDate", "ProductionYear", "SortName"],
+        collapseBoxSetItems: false,
+      });
+
+      return response.data;
+    },
+    [api, user?.Id, actorId]
+  );
+
+  const backdropUrl = useMemo(
+    () =>
+      getBackdropUrl({
+        api,
+        item,
+        quality: 90,
+        width: 1000,
+      }),
+    [item]
+  );
+
+  if (l1)
+    return (
+      <View className="justify-center items-center h-full">
+        <Loader />
+      </View>
+    );
+
+  if (!item?.Id || !backdropUrl) return null;
+
+  return (
+    <ParallaxScrollView
+      headerImage={
+        <Image
+          source={{
+            uri: backdropUrl,
+          }}
+          style={{
+            width: "100%",
+            height: "100%",
+          }}
+        />
+      }
+    >
+      <View className="flex flex-col space-y-4 my-4">
+        <View className="px-4 mb-4">
+          <MoviesTitleHeader item={item} className="mb-4" />
+          <OverviewText text={item.Overview} />
+        </View>
+
+        <Text className="px-4 text-2xl font-bold mb-2 text-neutral-100">
+          Appeared In
+        </Text>
+        <InfiniteHorizontalScroll
+          height={247}
+          renderItem={(i, idx) => (
+            <TouchableItemRouter
+              key={idx}
+              item={i}
+              className={`flex flex-col
+              ${"w-28"}
+            `}
+            >
+              <View>
+                <MoviePoster item={i} />
+                <ItemCardText item={i} />
+              </View>
+            </TouchableItemRouter>
+          )}
+          queryFn={fetchItems}
+          queryKey={["actor", "movies", actorId]}
+        />
+        <View className="h-12"></View>
+      </View>
+    </ParallaxScrollView>
+  );
+};
+
+export default page;

app/(auth)/(tabs)/(home,libraries,search)/albums/[albumId].tsx

@@ -1,6 +1,9 @@
 import { Chromecast } from "@/components/Chromecast";
+import { ItemImage } from "@/components/common/ItemImage";
 import { Text } from "@/components/common/Text";
+import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
 import { SongsList } from "@/components/music/SongsList";
+import { ParallaxScrollView } from "@/components/ParallaxPage";
 import ArtistPoster from "@/components/posters/ArtistPoster";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
@@ -10,6 +13,7 @@ import { router, useLocalSearchParams, useNavigation } from "expo-router";
 import { useAtom } from "jotai";
 import { useEffect, useState } from "react";
 import { ScrollView, TouchableOpacity, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 export default function page() {
   const searchParams = useLocalSearchParams();
@@ -87,35 +91,31 @@ export default function page() {
     enabled: !!api && !!user?.Id,
   });
 
+  const insets = useSafeAreaInsets();
+
   if (!album) return null;
 
   return (
-    <ScrollView>
-      <View className="px-4 pb-24">
-        <View className="flex flex-row space-x-4 items-start mb-4">
-          <View className="w-24">
-            <ArtistPoster item={album} />
-          </View>
-          <View className="flex flex-col shrink">
-            <Text className="font-bold text-3xl">{album?.Name}</Text>
-            <Text className="">{album?.ProductionYear}</Text>
-
-            <View className="flex flex-row space-x-2 mt-1">
-              {album.AlbumArtists?.map((a) => (
-                <TouchableOpacity
-                  key={a.Id}
-                  onPress={() => {
-                    router.push(`/artists/${a.Id}/page`);
-                  }}
-                >
-                  <Text className="font-bold text-purple-600">
-                    {album?.AlbumArtist}
-                  </Text>
-                </TouchableOpacity>
-              ))}
-            </View>
-          </View>
-        </View>
+    <ParallaxScrollView
+      headerHeight={400}
+      headerImage={
+        <ItemImage
+          variant={"Primary"}
+          item={album}
+          style={{
+            width: "100%",
+            height: "100%",
+          }}
+        />
+      }
+    >
+      <View className="px-4 mb-8">
+        <Text className="font-bold text-2xl mb-2">{album?.Name}</Text>
+        <Text className="text-neutral-500">
+          {songs?.TotalRecordCount} songs
+        </Text>
+      </View>
+      <View className="px-4">
         <SongsList
           albumId={albumId}
           songs={songs?.Items}
@@ -123,6 +123,6 @@ export default function page() {
           artistId={artistId}
         />
       </View>
-    </ScrollView>
+    </ParallaxScrollView>
   );
 }

app/(auth)/(tabs)/(home,libraries,search)/artists/[artistId].tsx

@@ -8,6 +8,10 @@ import { router, useLocalSearchParams, useNavigation } from "expo-router";
 import { useAtom } from "jotai";
 import { useEffect, useState } from "react";
 import { FlatList, ScrollView, TouchableOpacity, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { ItemImage } from "@/components/common/ItemImage";
+import { ParallaxScrollView } from "@/components/ParallaxPage";
+import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
 
 export default function page() {
   const searchParams = useLocalSearchParams();
@@ -82,50 +86,45 @@ export default function page() {
     enabled: !!api && !!user?.Id,
   });
 
-  useEffect(() => {
-    navigation.setOptions({
-      title: albums?.Items?.[0].AlbumArtist,
-    });
-  }, [albums]);
+  const insets = useSafeAreaInsets();
 
   if (!artist || !albums) return null;
 
   return (
-    <FlatList
-      contentContainerStyle={{
-        padding: 16,
-        paddingBottom: 140,
-      }}
-      ListHeaderComponent={
-        <View className="mb-2">
-          <View className="w-32 mb-4">
-            <ArtistPoster item={artist} />
-          </View>
-          <Text className="font-bold text-2xl mb-4">Albums</Text>
-        </View>
-      }
-      nestedScrollEnabled
-      data={albums.Items}
-      numColumns={3}
-      columnWrapperStyle={{
-        justifyContent: "space-between",
-      }}
-      renderItem={({ item, index }) => (
-        <TouchableOpacity
-          style={{ width: "30%" }}
-          key={index}
-          onPress={() => {
-            router.push(`/albums/${item.Id}`);
+    <ParallaxScrollView
+      headerHeight={400}
+      headerImage={
+        <ItemImage
+          variant={"Primary"}
+          item={artist}
+          style={{
+            width: "100%",
+            height: "100%",
           }}
-        >
-          <View className="flex flex-col gap-y-2">
-            <ArtistPoster item={item} />
-            <Text>{item.Name}</Text>
-            <Text className="opacity-50 text-xs">{item.ProductionYear}</Text>
-          </View>
-        </TouchableOpacity>
-      )}
-      keyExtractor={(item) => item.Id || ""}
-    />
+        />
+      }
+    >
+      <View className="px-4 mb-8">
+        <Text className="font-bold text-2xl mb-2">{artist?.Name}</Text>
+        <Text className="text-neutral-500">
+          {albums.TotalRecordCount} albums
+        </Text>
+      </View>
+      <View className="flex flex-row flex-wrap justify-between px-4">
+        {albums.Items.map((item, idx) => (
+          <TouchableItemRouter
+            item={item}
+            style={{ width: "30%", marginBottom: 20 }}
+            key={idx}
+          >
+            <View className="flex flex-col gap-y-2">
+              <ArtistPoster item={item} />
+              <Text numberOfLines={2}>{item.Name}</Text>
+              <Text className="opacity-50 text-xs">{item.ProductionYear}</Text>
+            </View>
+          </TouchableItemRouter>
+        ))}
+      </View>
+    </ParallaxScrollView>
   );
 }

app/(auth)/(tabs)/(home,libraries,search)/artists/index.tsx

@@ -1,4 +1,5 @@
 import { Text } from "@/components/common/Text";
+import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
 import ArtistPoster from "@/components/posters/ArtistPoster";
 import MoviePoster from "@/components/posters/MoviePoster";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
@@ -90,15 +91,13 @@ export default function page() {
         justifyContent: "space-between",
       }}
       renderItem={({ item, index }) => (
-        <TouchableOpacity
+        <TouchableItemRouter
           style={{
             maxWidth: "30%",
             width: "100%",
           }}
           key={index}
-          onPress={() => {
-            router.push(`/artists/${item.Id}/page`);
-          }}
+          item={item}
         >
           <View className="flex flex-col gap-y-2">
             {collection?.CollectionType === "movies" && (
@@ -110,7 +109,7 @@ export default function page() {
             <Text>{item.Name}</Text>
             <Text className="opacity-50 text-xs">{item.ProductionYear}</Text>
           </View>
-        </TouchableOpacity>
+        </TouchableItemRouter>
       )}
       keyExtractor={(item) => item.Id || ""}
     />

app/(auth)/(tabs)/(home,libraries,search)/collections/[collectionId].tsx

@@ -0,0 +1,422 @@
+import { ItemImage } from "@/components/common/ItemImage";
+import { Text } from "@/components/common/Text";
+import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
+import { FilterButton } from "@/components/filters/FilterButton";
+import { ResetFiltersButton } from "@/components/filters/ResetFiltersButton";
+import { ItemCardText } from "@/components/ItemCardText";
+import { ItemPoster } from "@/components/posters/ItemPoster";
+import MoviePoster from "@/components/posters/MoviePoster";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import {
+  genreFilterAtom,
+  sortByAtom,
+  SortByOption,
+  sortOptions,
+  sortOrderAtom,
+  SortOrderOption,
+  sortOrderOptions,
+  tagsFilterAtom,
+  yearFilterAtom,
+} from "@/utils/atoms/filters";
+import {
+  BaseItemDto,
+  BaseItemDtoQueryResult,
+  ItemSortBy,
+} from "@jellyfin/sdk/lib/generated-client/models";
+import {
+  getFilterApi,
+  getItemsApi,
+  getUserLibraryApi,
+} from "@jellyfin/sdk/lib/utils/api";
+import { FlashList } from "@shopify/flash-list";
+import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
+import { useLocalSearchParams, useNavigation } from "expo-router";
+import * as ScreenOrientation from "expo-screen-orientation";
+import { useAtom } from "jotai";
+import React, {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useState,
+} from "react";
+import { FlatList, View } from "react-native";
+
+const MemoizedTouchableItemRouter = React.memo(TouchableItemRouter);
+
+const page: React.FC = () => {
+  const searchParams = useLocalSearchParams();
+  const { collectionId } = searchParams as { collectionId: string };
+
+  const [api] = useAtom(apiAtom);
+  const [user] = useAtom(userAtom);
+  const navigation = useNavigation();
+  const [orientation, setOrientation] = useState(
+    ScreenOrientation.Orientation.PORTRAIT_UP
+  );
+
+  const [selectedGenres, setSelectedGenres] = useAtom(genreFilterAtom);
+  const [selectedYears, setSelectedYears] = useAtom(yearFilterAtom);
+  const [selectedTags, setSelectedTags] = useAtom(tagsFilterAtom);
+  const [sortBy, setSortBy] = useAtom(sortByAtom);
+  const [sortOrder, setSortOrder] = useAtom(sortOrderAtom);
+
+  const { data: collection } = useQuery({
+    queryKey: ["collection", collectionId],
+    queryFn: async () => {
+      if (!api) return null;
+      const response = await getUserLibraryApi(api).getItem({
+        itemId: collectionId,
+        userId: user?.Id,
+      });
+      const data = response.data;
+      return data;
+    },
+    enabled: !!api && !!user?.Id && !!collectionId,
+    staleTime: 60 * 1000,
+  });
+
+  useEffect(() => {
+    navigation.setOptions({ title: collection?.Name || "" });
+    setSortOrder([SortOrderOption.Ascending]);
+
+    if (!collection) return;
+
+    // Convert the DisplayOrder to SortByOption
+    const displayOrder = collection.DisplayOrder as ItemSortBy;
+    const sortByOption = displayOrder
+      ? SortByOption[displayOrder as keyof typeof SortByOption] ||
+        SortByOption.PremiereDate
+      : SortByOption.PremiereDate;
+
+    setSortBy([sortByOption]);
+  }, [navigation, collection]);
+
+  const fetchItems = useCallback(
+    async ({
+      pageParam,
+    }: {
+      pageParam: number;
+    }): Promise<BaseItemDtoQueryResult | null> => {
+      if (!api || !collection) return null;
+
+      const response = await getItemsApi(api).getItems({
+        userId: user?.Id,
+        parentId: collectionId,
+        limit: 18,
+        startIndex: pageParam,
+        // Set one ordering at a time. As collections do not work with correctly with multiple.
+        sortBy: [sortBy[0]],
+        sortOrder: [sortOrder[0]],
+        fields: [
+          "ItemCounts",
+          "PrimaryImageAspectRatio",
+          "CanDelete",
+          "MediaSourceCount",
+        ],
+        genres: selectedGenres,
+        tags: selectedTags,
+        years: selectedYears.map((year) => parseInt(year)),
+      });
+
+      return response.data || null;
+    },
+    [
+      api,
+      user?.Id,
+      collection,
+      selectedGenres,
+      selectedYears,
+      selectedTags,
+      sortBy,
+      sortOrder,
+    ]
+  );
+
+  const { data, isFetching, fetchNextPage, hasNextPage } = useInfiniteQuery({
+    queryKey: [
+      "collection-items",
+      collection,
+      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
+      );
+
+      if (accumulatedItems < totalItems) {
+        return lastPage?.Items?.length * pages.length;
+      } else {
+        return undefined;
+      }
+    },
+    initialPageParam: 0,
+    enabled: !!api && !!user?.Id && !!collection,
+  });
+
+  const flatData = useMemo(() => {
+    return (
+      (data?.pages.flatMap((p) => p?.Items).filter(Boolean) as BaseItemDto[]) ||
+      []
+    );
+  }, [data]);
+
+  const renderItem = useCallback(
+    ({ item, index }: { item: BaseItemDto; index: number }) => (
+      <MemoizedTouchableItemRouter
+        key={item.Id}
+        style={{
+          width: "100%",
+          marginBottom:
+            orientation === ScreenOrientation.Orientation.PORTRAIT_UP ? 4 : 16,
+        }}
+        item={item}
+      >
+        <View
+          style={{
+            alignSelf:
+              index % 3 === 0
+                ? "flex-end"
+                : (index + 1) % 3 === 0
+                ? "flex-start"
+                : "center",
+            width: "89%",
+          }}
+        >
+          <ItemPoster item={item} />
+          {/* <MoviePoster item={item} /> */}
+          <ItemCardText item={item} />
+        </View>
+      </MemoizedTouchableItemRouter>
+    ),
+    [orientation]
+  );
+
+  const keyExtractor = useCallback((item: BaseItemDto) => item.Id || "", []);
+
+  const ListHeaderComponent = useCallback(
+    () => (
+      <View className="">
+        <FlatList
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          contentContainerStyle={{
+            display: "flex",
+            paddingHorizontal: 15,
+            paddingVertical: 16,
+            flexDirection: "row",
+          }}
+          extraData={[
+            selectedGenres,
+            selectedYears,
+            selectedTags,
+            sortBy,
+            sortOrder,
+          ]}
+          data={[
+            {
+              key: "reset",
+              component: <ResetFiltersButton />,
+            },
+            {
+              key: "genre",
+              component: (
+                <FilterButton
+                  className="mr-1"
+                  collectionId={collectionId}
+                  queryKey="genreFilter"
+                  queryFn={async () => {
+                    if (!api) return null;
+                    const response = await getFilterApi(
+                      api
+                    ).getQueryFiltersLegacy({
+                      userId: user?.Id,
+                      parentId: collectionId,
+                    });
+                    return response.data.Genres || [];
+                  }}
+                  set={setSelectedGenres}
+                  values={selectedGenres}
+                  title="Genres"
+                  renderItemLabel={(item) => item.toString()}
+                  searchFilter={(item, search) =>
+                    item.toLowerCase().includes(search.toLowerCase())
+                  }
+                />
+              ),
+            },
+            {
+              key: "year",
+              component: (
+                <FilterButton
+                  className="mr-1"
+                  collectionId={collectionId}
+                  queryKey="yearFilter"
+                  queryFn={async () => {
+                    if (!api) return null;
+                    const response = await getFilterApi(
+                      api
+                    ).getQueryFiltersLegacy({
+                      userId: user?.Id,
+                      parentId: collectionId,
+                    });
+                    return response.data.Years || [];
+                  }}
+                  set={setSelectedYears}
+                  values={selectedYears}
+                  title="Years"
+                  renderItemLabel={(item) => item.toString()}
+                  searchFilter={(item, search) => item.includes(search)}
+                />
+              ),
+            },
+            {
+              key: "tags",
+              component: (
+                <FilterButton
+                  className="mr-1"
+                  collectionId={collectionId}
+                  queryKey="tagsFilter"
+                  queryFn={async () => {
+                    if (!api) return null;
+                    const response = await getFilterApi(
+                      api
+                    ).getQueryFiltersLegacy({
+                      userId: user?.Id,
+                      parentId: collectionId,
+                    });
+                    return response.data.Tags || [];
+                  }}
+                  set={setSelectedTags}
+                  values={selectedTags}
+                  title="Tags"
+                  renderItemLabel={(item) => item.toString()}
+                  searchFilter={(item, search) =>
+                    item.toLowerCase().includes(search.toLowerCase())
+                  }
+                />
+              ),
+            },
+            {
+              key: "sortBy",
+              component: (
+                <FilterButton
+                  className="mr-1"
+                  collectionId={collectionId}
+                  queryKey="sortBy"
+                  queryFn={async () => sortOptions.map((s) => s.key)}
+                  set={setSortBy}
+                  values={sortBy}
+                  title="Sort By"
+                  renderItemLabel={(item) =>
+                    sortOptions.find((i) => i.key === item)?.value || ""
+                  }
+                  searchFilter={(item, search) =>
+                    item.toLowerCase().includes(search.toLowerCase())
+                  }
+                />
+              ),
+            },
+            {
+              key: "sortOrder",
+              component: (
+                <FilterButton
+                  className="mr-1"
+                  collectionId={collectionId}
+                  queryKey="sortOrder"
+                  queryFn={async () => sortOrderOptions.map((s) => s.key)}
+                  set={setSortOrder}
+                  values={sortOrder}
+                  title="Sort Order"
+                  renderItemLabel={(item) =>
+                    sortOrderOptions.find((i) => i.key === item)?.value || ""
+                  }
+                  searchFilter={(item, search) =>
+                    item.toLowerCase().includes(search.toLowerCase())
+                  }
+                />
+              ),
+            },
+          ]}
+          renderItem={({ item }) => item.component}
+          keyExtractor={(item) => item.key}
+        />
+      </View>
+    ),
+    [
+      collectionId,
+      api,
+      user?.Id,
+      selectedGenres,
+      setSelectedGenres,
+      selectedYears,
+      setSelectedYears,
+      selectedTags,
+      setSelectedTags,
+      sortBy,
+      setSortBy,
+      sortOrder,
+      setSortOrder,
+      isFetching,
+    ]
+  );
+
+  if (!collection) return null;
+
+  return (
+    <FlashList
+      ListEmptyComponent={
+        <View className="flex flex-col items-center justify-center h-full">
+          <Text className="font-bold text-xl text-neutral-500">No results</Text>
+        </View>
+      }
+      extraData={[
+        selectedGenres,
+        selectedYears,
+        selectedTags,
+        sortBy,
+        sortOrder,
+      ]}
+      contentInsetAdjustmentBehavior="automatic"
+      data={flatData}
+      renderItem={renderItem}
+      keyExtractor={keyExtractor}
+      estimatedItemSize={255}
+      numColumns={
+        orientation === ScreenOrientation.Orientation.PORTRAIT_UP ? 3 : 5
+      }
+      onEndReached={() => {
+        if (hasNextPage) {
+          fetchNextPage();
+        }
+      }}
+      onEndReachedThreshold={0.5}
+      ListHeaderComponent={ListHeaderComponent}
+      contentContainerStyle={{ paddingBottom: 24 }}
+      ItemSeparatorComponent={() => (
+        <View
+          style={{
+            width: 10,
+            height: 10,
+          }}
+        ></View>
+      )}
+    />
+  );
+};
+
+export default page;

app/(auth)/(tabs)/(home,libraries,search)/items/page.tsx

@@ -0,0 +1,13 @@
+import { ItemContent } from "@/components/ItemContent";
+import { useLocalSearchParams } from "expo-router";
+import React, { useMemo } from "react";
+
+const Page: React.FC = () => {
+  const { id } = useLocalSearchParams() as { id: string };
+
+  const memoizedContent = useMemo(() => <ItemContent id={id} />, [id]);
+
+  return memoizedContent;
+};
+
+export default React.memo(Page);

app/(auth)/(tabs)/(home,libraries,search)/series/[id].tsx

@@ -20,6 +20,8 @@ const page: React.FC = () => {
     seasonIndex: string;
   };
 
+  console.log("seasonIndex", seasonIndex);
+
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
 
@@ -59,6 +61,7 @@ const page: React.FC = () => {
 
   return (
     <ParallaxScrollView
+      headerHeight={400}
       headerImage={
         <Image
           source={{
@@ -95,7 +98,7 @@ const page: React.FC = () => {
         <View className="mb-4">
           <NextUp seriesId={seriesId} />
         </View>
-        <SeasonPicker item={item} />
+        <SeasonPicker item={item} initialSeasonIndex={Number(seasonIndex)} />
       </View>
     </ParallaxScrollView>
   );

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

@@ -0,0 +1,422 @@
+import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
+import { useLocalSearchParams, useNavigation } from "expo-router";
+import * as ScreenOrientation from "expo-screen-orientation";
+import { useAtom } from "jotai";
+import React, {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useState,
+} from "react";
+import { FlatList, useWindowDimensions, View } from "react-native";
+
+import { Text } from "@/components/common/Text";
+import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
+import { FilterButton } from "@/components/filters/FilterButton";
+import { ResetFiltersButton } from "@/components/filters/ResetFiltersButton";
+import { ItemCardText } from "@/components/ItemCardText";
+import { Loader } from "@/components/Loader";
+import MoviePoster from "@/components/posters/MoviePoster";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import {
+  genreFilterAtom,
+  sortByAtom,
+  SortByOption,
+  sortOptions,
+  sortOrderAtom,
+  SortOrderOption,
+  sortOrderOptions,
+  tagsFilterAtom,
+  yearFilterAtom,
+} from "@/utils/atoms/filters";
+import {
+  BaseItemDto,
+  BaseItemDtoQueryResult,
+} from "@jellyfin/sdk/lib/generated-client/models";
+import {
+  getFilterApi,
+  getItemsApi,
+  getUserLibraryApi,
+} from "@jellyfin/sdk/lib/utils/api";
+import { FlashList } from "@shopify/flash-list";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { orientationAtom } from "@/utils/atoms/orientation";
+import { ItemPoster } from "@/components/posters/ItemPoster";
+
+const MemoizedTouchableItemRouter = React.memo(TouchableItemRouter);
+
+const Page = () => {
+  const searchParams = useLocalSearchParams();
+  const { libraryId } = searchParams as { libraryId: string };
+
+  const [api] = useAtom(apiAtom);
+  const [user] = useAtom(userAtom);
+  const { width: screenWidth } = useWindowDimensions();
+
+  const [selectedGenres, setSelectedGenres] = useAtom(genreFilterAtom);
+  const [selectedYears, setSelectedYears] = useAtom(yearFilterAtom);
+  const [selectedTags, setSelectedTags] = useAtom(tagsFilterAtom);
+  const [sortBy, setSortBy] = useAtom(sortByAtom);
+  const [sortOrder, setSortOrder] = useAtom(sortOrderAtom);
+
+  const [orientation, setOrientation] = useAtom(orientationAtom);
+
+  const getNumberOfColumns = useCallback(() => {
+    if (orientation === ScreenOrientation.Orientation.PORTRAIT_UP) return 3;
+    if (screenWidth < 600) return 5;
+    if (screenWidth < 960) return 6;
+    if (screenWidth < 1280) return 7;
+    return 6;
+  }, [screenWidth, orientation]);
+
+  useLayoutEffect(() => {
+    setSortBy([SortByOption.SortName]);
+    setSortOrder([SortOrderOption.Ascending]);
+  }, []);
+
+  const { data: library, isLoading: isLibraryLoading } = useQuery({
+    queryKey: ["library", libraryId],
+    queryFn: async () => {
+      if (!api) return null;
+      const response = await getUserLibraryApi(api).getItem({
+        itemId: libraryId,
+        userId: user?.Id,
+      });
+      return response.data;
+    },
+    enabled: !!api && !!user?.Id && !!libraryId,
+    staleTime: 60 * 1000,
+  });
+
+  const fetchItems = useCallback(
+    async ({
+      pageParam,
+    }: {
+      pageParam: number;
+    }): Promise<BaseItemDtoQueryResult | null> => {
+      if (!api || !library) return null;
+
+      const response = await getItemsApi(api).getItems({
+        userId: user?.Id,
+        parentId: libraryId,
+        limit: 36,
+        startIndex: pageParam,
+        sortBy: [sortBy[0], "SortName", "ProductionYear"],
+        sortOrder: [sortOrder[0]],
+        enableImageTypes: ["Primary", "Backdrop", "Banner", "Thumb"],
+        recursive: false,
+        imageTypeLimit: 1,
+        fields: ["PrimaryImageAspectRatio", "SortName"],
+        genres: selectedGenres,
+        tags: selectedTags,
+        years: selectedYears.map((year) => parseInt(year)),
+      });
+
+      return response.data || null;
+    },
+    [
+      api,
+      user?.Id,
+      libraryId,
+      library,
+      selectedGenres,
+      selectedYears,
+      selectedTags,
+      sortBy,
+      sortOrder,
+    ]
+  );
+
+  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
+        );
+
+        if (accumulatedItems < totalItems) {
+          return lastPage?.Items?.length * pages.length;
+        } else {
+          return undefined;
+        }
+      },
+      initialPageParam: 0,
+      enabled: !!api && !!user?.Id && !!library,
+    });
+
+  const flatData = useMemo(() => {
+    return (
+      (data?.pages.flatMap((p) => p?.Items).filter(Boolean) as BaseItemDto[]) ||
+      []
+    );
+  }, [data]);
+
+  const renderItem = useCallback(
+    ({ item, index }: { item: BaseItemDto; index: number }) => (
+      <MemoizedTouchableItemRouter
+        key={item.Id}
+        style={{
+          width: "100%",
+          marginBottom: 4,
+        }}
+        item={item}
+      >
+        <View
+          style={{
+            alignSelf:
+              orientation === ScreenOrientation.Orientation.PORTRAIT_UP
+                ? index % 3 === 0
+                  ? "flex-end"
+                  : (index + 1) % 3 === 0
+                  ? "flex-start"
+                  : "center"
+                : "center",
+            width: "89%",
+          }}
+        >
+          {/* <MoviePoster item={item} /> */}
+          <ItemPoster item={item} />
+          <ItemCardText item={item} />
+        </View>
+      </MemoizedTouchableItemRouter>
+    ),
+    [orientation]
+  );
+
+  const keyExtractor = useCallback((item: BaseItemDto) => item.Id || "", []);
+
+  const ListHeaderComponent = useCallback(
+    () => (
+      <View className="">
+        <FlatList
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          contentContainerStyle={{
+            display: "flex",
+            paddingHorizontal: 15,
+            paddingVertical: 16,
+            flexDirection: "row",
+          }}
+          data={[
+            {
+              key: "reset",
+              component: <ResetFiltersButton />,
+            },
+            {
+              key: "genre",
+              component: (
+                <FilterButton
+                  className="mr-1"
+                  collectionId={libraryId}
+                  queryKey="genreFilter"
+                  queryFn={async () => {
+                    if (!api) return null;
+                    const response = await getFilterApi(
+                      api
+                    ).getQueryFiltersLegacy({
+                      userId: user?.Id,
+                      parentId: libraryId,
+                    });
+                    return response.data.Genres || [];
+                  }}
+                  set={setSelectedGenres}
+                  values={selectedGenres}
+                  title="Genres"
+                  renderItemLabel={(item) => item.toString()}
+                  searchFilter={(item, search) =>
+                    item.toLowerCase().includes(search.toLowerCase())
+                  }
+                />
+              ),
+            },
+            {
+              key: "year",
+              component: (
+                <FilterButton
+                  className="mr-1"
+                  collectionId={libraryId}
+                  queryKey="yearFilter"
+                  queryFn={async () => {
+                    if (!api) return null;
+                    const response = await getFilterApi(
+                      api
+                    ).getQueryFiltersLegacy({
+                      userId: user?.Id,
+                      parentId: libraryId,
+                    });
+                    return response.data.Years || [];
+                  }}
+                  set={setSelectedYears}
+                  values={selectedYears}
+                  title="Years"
+                  renderItemLabel={(item) => item.toString()}
+                  searchFilter={(item, search) => item.includes(search)}
+                />
+              ),
+            },
+            {
+              key: "tags",
+              component: (
+                <FilterButton
+                  className="mr-1"
+                  collectionId={libraryId}
+                  queryKey="tagsFilter"
+                  queryFn={async () => {
+                    if (!api) return null;
+                    const response = await getFilterApi(
+                      api
+                    ).getQueryFiltersLegacy({
+                      userId: user?.Id,
+                      parentId: libraryId,
+                    });
+                    return response.data.Tags || [];
+                  }}
+                  set={setSelectedTags}
+                  values={selectedTags}
+                  title="Tags"
+                  renderItemLabel={(item) => item.toString()}
+                  searchFilter={(item, search) =>
+                    item.toLowerCase().includes(search.toLowerCase())
+                  }
+                />
+              ),
+            },
+            {
+              key: "sortBy",
+              component: (
+                <FilterButton
+                  className="mr-1"
+                  collectionId={libraryId}
+                  queryKey="sortBy"
+                  queryFn={async () => sortOptions.map((s) => s.key)}
+                  set={setSortBy}
+                  values={sortBy}
+                  title="Sort By"
+                  renderItemLabel={(item) =>
+                    sortOptions.find((i) => i.key === item)?.value || ""
+                  }
+                  searchFilter={(item, search) =>
+                    item.toLowerCase().includes(search.toLowerCase())
+                  }
+                />
+              ),
+            },
+            {
+              key: "sortOrder",
+              component: (
+                <FilterButton
+                  className="mr-1"
+                  collectionId={libraryId}
+                  queryKey="sortOrder"
+                  queryFn={async () => sortOrderOptions.map((s) => s.key)}
+                  set={setSortOrder}
+                  values={sortOrder}
+                  title="Sort Order"
+                  renderItemLabel={(item) =>
+                    sortOrderOptions.find((i) => i.key === item)?.value || ""
+                  }
+                  searchFilter={(item, search) =>
+                    item.toLowerCase().includes(search.toLowerCase())
+                  }
+                />
+              ),
+            },
+          ]}
+          renderItem={({ item }) => item.component}
+          keyExtractor={(item) => item.key}
+        />
+      </View>
+    ),
+    [
+      libraryId,
+      api,
+      user?.Id,
+      selectedGenres,
+      setSelectedGenres,
+      selectedYears,
+      setSelectedYears,
+      selectedTags,
+      setSelectedTags,
+      sortBy,
+      setSortBy,
+      sortOrder,
+      setSortOrder,
+      isFetching,
+    ]
+  );
+
+  const insets = useSafeAreaInsets();
+
+  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
+      ListEmptyComponent={
+        <View className="flex flex-col items-center justify-center h-full">
+          <Text className="font-bold text-xl text-neutral-500">No results</Text>
+        </View>
+      }
+      contentInsetAdjustmentBehavior="automatic"
+      data={flatData}
+      renderItem={renderItem}
+      extraData={orientation}
+      keyExtractor={keyExtractor}
+      estimatedItemSize={244}
+      numColumns={getNumberOfColumns()}
+      onEndReached={() => {
+        if (hasNextPage) {
+          fetchNextPage();
+        }
+      }}
+      onEndReachedThreshold={1}
+      ListHeaderComponent={ListHeaderComponent}
+      contentContainerStyle={{
+        paddingBottom: 24,
+        paddingLeft: insets.left,
+        paddingRight: insets.right,
+      }}
+      ItemSeparatorComponent={() => (
+        <View
+          style={{
+            width: 10,
+            height: 10,
+          }}
+        ></View>
+      )}
+    />
+  );
+};
+
+export default React.memo(Page);

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

@@ -0,0 +1,200 @@
+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
+        name="index"
+        options={{
+          headerShown: true,
+          headerLargeTitle: true,
+          headerTitle: "Library",
+          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.CheckboxItem
+                    key="show-stats-option"
+                    value={settings.libraryOptions.showStats}
+                    onValueChange={(newValue) => {
+                      updateSettings({
+                        libraryOptions: {
+                          ...settings.libraryOptions,
+                          showStats: newValue === "on" ? true : false,
+                        },
+                      });
+                    }}
+                  >
+                    <DropdownMenu.ItemIndicator />
+                    <DropdownMenu.ItemTitle key="show-stats-title">
+                      Show stats
+                    </DropdownMenu.ItemTitle>
+                  </DropdownMenu.CheckboxItem>
+                </DropdownMenu.Group>
+
+                <DropdownMenu.Separator />
+              </DropdownMenu.Content>
+            </DropdownMenu.Root>
+          ),
+        }}
+      />
+      <Stack.Screen
+        name="[libraryId]"
+        options={{
+          title: "",
+          headerShown: true,
+          headerBlurEffect: "prominent",
+          headerTransparent: Platform.OS === "ios" ? true : false,
+          headerShadowVisible: false,
+        }}
+      />
+      {Object.entries(nestedTabPageScreenOptions).map(([name, options]) => (
+        <Stack.Screen key={name} name={name} options={options} />
+      ))}
+    </Stack>
+  );
+}

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

@@ -0,0 +1,103 @@
+import { Text } from "@/components/common/Text";
+import { LibraryItemCard } from "@/components/library/LibraryItemCard";
+import { Loader } from "@/components/Loader";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { useSettings } from "@/utils/atoms/settings";
+import {
+  getUserLibraryApi,
+  getUserViewsApi,
+} from "@jellyfin/sdk/lib/utils/api";
+import { FlashList } from "@shopify/flash-list";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useNavigation } from "expo-router";
+import { useAtom } from "jotai";
+import { useEffect } from "react";
+import { StyleSheet, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+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],
+    queryFn: async () => {
+      if (!api || !user?.Id) {
+        return null;
+      }
+
+      const response = await getUserViewsApi(api).getUserViews({
+        userId: user.Id,
+      });
+
+      return response.data.Items || null;
+    },
+    enabled: !!api && !!user?.Id,
+    staleTime: 60 * 1000 * 60,
+  });
+
+  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]);
+
+  const insets = useSafeAreaInsets();
+
+  if (isLoading)
+    return (
+      <View className="justify-center items-center h-full">
+        <Loader />
+      </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: settings?.libraryOptions?.display === "row" ? 0 : 17,
+        paddingBottom: 150,
+        paddingLeft: insets.left,
+        paddingRight: insets.right,
+      }}
+      data={data}
+      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>
+        ) : (
+          <View className="h-4" />
+        )
+      }
+      estimatedItemSize={200}
+    />
+  );
+}

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

@@ -1,3 +1,4 @@
+import { nestedTabPageScreenOptions } from "@/components/stacks/NestedTabPageStack";
 import { Stack } from "expo-router";
 import { Platform } from "react-native";
 
@@ -15,6 +16,9 @@ export default function SearchLayout() {
           headerShadowVisible: false,
         }}
       />
+      {Object.entries(nestedTabPageScreenOptions).map(([name, options]) => (
+        <Stack.Screen key={name} name={name} options={options} />
+      ))}
     </Stack>
   );
 }

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

@@ -1,4 +1,3 @@
-import { Button } from "@/components/Button";
 import { HorizontalScroll } from "@/components/common/HorrizontalScroll";
 import { Input } from "@/components/common/Input";
 import { Text } from "@/components/common/Text";
@@ -12,8 +11,6 @@ import SeriesPoster from "@/components/posters/SeriesPoster";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
 import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
-import { Ionicons } from "@expo/vector-icons";
-import { Api } from "@jellyfin/sdk";
 import {
   BaseItemDto,
   BaseItemKind,
@@ -21,13 +18,7 @@ import {
 import { getItemsApi, getSearchApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery } from "@tanstack/react-query";
 import axios from "axios";
-import {
-  Href,
-  router,
-  useLocalSearchParams,
-  useNavigation,
-  usePathname,
-} from "expo-router";
+import { Href, router, useLocalSearchParams, useNavigation } from "expo-router";
 import { useAtom } from "jotai";
 import React, {
   useCallback,
@@ -37,6 +28,7 @@ import React, {
   useState,
 } from "react";
 import { Platform, ScrollView, TouchableOpacity, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useDebounce } from "use-debounce";
 
 const exampleSearches = [
@@ -50,6 +42,7 @@ const exampleSearches = [
 
 export default function search() {
   const params = useLocalSearchParams();
+  const insets = useSafeAreaInsets();
 
   const { q, prev } = params as { q: string; prev: Href<string> };
 
@@ -157,6 +150,26 @@ export default function search() {
     enabled: debouncedSearch.length > 0,
   });
 
+  const { data: collections, isFetching: l7 } = useQuery({
+    queryKey: ["search", "collections", debouncedSearch],
+    queryFn: () =>
+      searchFn({
+        query: debouncedSearch,
+        types: ["BoxSet"],
+      }),
+    enabled: debouncedSearch.length > 0,
+  });
+
+  const { data: actors, isFetching: l8 } = useQuery({
+    queryKey: ["search", "actors", debouncedSearch],
+    queryFn: () =>
+      searchFn({
+        query: debouncedSearch,
+        types: ["Person"],
+      }),
+    enabled: debouncedSearch.length > 0,
+  });
+
   const { data: artists, isFetching: l4 } = useQuery({
     queryKey: ["search", "artists", debouncedSearch],
     queryFn: () =>
@@ -194,19 +207,25 @@ export default function search() {
       songs?.length ||
       movies?.length ||
       episodes?.length ||
-      series?.length
+      series?.length ||
+      collections?.length ||
+      actors?.length
     );
-  }, [artists, episodes, albums, songs, movies, series]);
+  }, [artists, episodes, albums, songs, movies, series, collections, actors]);
 
   const loading = useMemo(() => {
-    return l1 || l2 || l3 || l4 || l5 || l6;
-  }, [l1, l2, l3, l4, l5, l6]);
+    return l1 || l2 || l3 || l4 || l5 || l6 || l7 || l8;
+  }, [l1, l2, l3, l4, l5, l6, l7, l8]);
 
   return (
     <>
       <ScrollView
         keyboardDismissMode="on-drag"
         contentInsetAdjustmentBehavior="automatic"
+        contentContainerStyle={{
+          paddingLeft: insets.left,
+          paddingRight: insets.right,
+        }}
       >
         <View className="flex flex-col pt-4 pb-32">
           {Platform.OS === "android" && (
@@ -232,13 +251,13 @@ export default function search() {
             header="Movies"
             ids={movies?.map((m) => m.Id!)}
             renderItem={(data) => (
-              <HorizontalScroll<BaseItemDto>
+              <HorizontalScroll
                 data={data}
                 renderItem={(item) => (
-                  <TouchableOpacity
+                  <TouchableItemRouter
                     key={item.Id}
                     className="flex flex-col w-28"
-                    onPress={() => router.push(`/items/${item.Id}`)}
+                    item={item}
                   >
                     <MoviePoster item={item} key={item.Id} />
                     <Text numberOfLines={2} className="mt-2">
@@ -247,7 +266,7 @@ export default function search() {
                     <Text className="opacity-50 text-xs">
                       {item.ProductionYear}
                     </Text>
-                  </TouchableOpacity>
+                  </TouchableItemRouter>
                 )}
               />
             )}
@@ -256,7 +275,7 @@ export default function search() {
             ids={series?.map((m) => m.Id!)}
             header="Series"
             renderItem={(data) => (
-              <HorizontalScroll<BaseItemDto>
+              <HorizontalScroll
                 data={data}
                 renderItem={(item) => (
                   <TouchableOpacity
@@ -280,12 +299,12 @@ export default function search() {
             ids={episodes?.map((m) => m.Id!)}
             header="Episodes"
             renderItem={(data) => (
-              <HorizontalScroll<BaseItemDto>
+              <HorizontalScroll
                 data={data}
                 renderItem={(item) => (
                   <TouchableOpacity
                     key={item.Id}
-                    onPress={() => router.push(`/items/${item.Id}`)}
+                    onPress={() => router.push(`/items/page?id=${item.Id}`)}
                     className="flex flex-col w-44"
                   >
                     <ContinueWatchingPoster item={item} />
@@ -295,11 +314,51 @@ export default function search() {
               />
             )}
           />
+          <SearchItemWrapper
+            ids={collections?.map((m) => m.Id!)}
+            header="Collections"
+            renderItem={(data) => (
+              <HorizontalScroll
+                data={data}
+                renderItem={(item) => (
+                  <TouchableOpacity
+                    key={item.Id}
+                    className="flex flex-col w-28"
+                    onPress={() => router.push(`/collections/${item.Id}`)}
+                  >
+                    <MoviePoster item={item} key={item.Id} />
+                    <Text numberOfLines={2} className="mt-2">
+                      {item.Name}
+                    </Text>
+                  </TouchableOpacity>
+                )}
+              />
+            )}
+          />
+          <SearchItemWrapper
+            ids={actors?.map((m) => m.Id!)}
+            header="Actors"
+            renderItem={(data) => (
+              <HorizontalScroll
+                data={data}
+                renderItem={(item) => (
+                  <TouchableItemRouter
+                    item={item}
+                    key={item.Id}
+                    className="flex flex-col w-28"
+                  >
+                    <MoviePoster item={item} />
+                    <ItemCardText item={item} />
+                  </TouchableItemRouter>
+                )}
+              />
+            )}
+          />
           <SearchItemWrapper
             ids={artists?.map((m) => m.Id!)}
             header="Artists"
             renderItem={(data) => (
-              <HorizontalScroll<BaseItemDto>
+              <HorizontalScroll
                 data={data}
                 renderItem={(item) => (
                   <TouchableItemRouter
@@ -318,7 +377,7 @@ export default function search() {
             ids={albums?.map((m) => m.Id!)}
             header="Albums"
             renderItem={(data) => (
-              <HorizontalScroll<BaseItemDto>
+              <HorizontalScroll
                 data={data}
                 renderItem={(item) => (
                   <TouchableItemRouter
@@ -337,7 +396,7 @@ export default function search() {
             ids={songs?.map((m) => m.Id!)}
             header="Songs"
             renderItem={(data) => (
-              <HorizontalScroll<BaseItemDto>
+              <HorizontalScroll
                 data={data}
                 renderItem={(item) => (
                   <TouchableItemRouter

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

@@ -1,13 +1,10 @@
-import { router, Tabs } from "expo-router";
-import React, { useEffect } from "react";
-import * as NavigationBar from "expo-navigation-bar";
 import { TabBarIcon } from "@/components/navigation/TabBarIcon";
 import { Colors } from "@/constants/Colors";
-import { Platform, TouchableOpacity, View } from "react-native";
-import { Feather } from "@expo/vector-icons";
-import { Chromecast } from "@/components/Chromecast";
 import { BlurView } from "expo-blur";
-import { StyleSheet } from "react-native";
+import * as NavigationBar from "expo-navigation-bar";
+import { Tabs } from "expo-router";
+import React, { useEffect } from "react";
+import { Platform, StyleSheet } from "react-native";
 
 export default function TabLayout() {
   useEffect(() => {
@@ -50,7 +47,7 @@ export default function TabLayout() {
     >
       <Tabs.Screen redirect name="index" />
       <Tabs.Screen
-        name="home"
+        name="(home)"
         options={{
           headerShown: false,
           title: "Home",
@@ -63,7 +60,7 @@ export default function TabLayout() {
         }}
       />
       <Tabs.Screen
-        name="search"
+        name="(search)"
         options={{
           headerShown: false,
           title: "Search",
@@ -73,7 +70,7 @@ export default function TabLayout() {
         }}
       />
       <Tabs.Screen
-        name="libraries"
+        name="(libraries)"
         options={{
           headerShown: false,
           title: "Library",

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

@@ -1,298 +0,0 @@
-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";
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { useSettings } from "@/utils/atoms/settings";
-import { Ionicons } from "@expo/vector-icons";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import {
-  getItemsApi,
-  getSuggestionsApi,
-  getTvShowsApi,
-  getUserLibraryApi,
-  getUserViewsApi,
-} from "@jellyfin/sdk/lib/utils/api";
-import NetInfo from "@react-native-community/netinfo";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { useRouter } from "expo-router";
-import { useAtom } from "jotai";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { RefreshControl, ScrollView, View } from "react-native";
-
-export default function index() {
-  const router = useRouter();
-  const queryClient = useQueryClient();
-
-  const [api] = useAtom(apiAtom);
-  const [user] = useAtom(userAtom);
-
-  const [loading, setLoading] = useState(false);
-  const [settings, _] = useSettings();
-
-  const [isConnected, setIsConnected] = useState<boolean | null>(null);
-
-  useEffect(() => {
-    const unsubscribe = NetInfo.addEventListener((state) => {
-      if (state.isConnected == false || state.isInternetReachable === false)
-        setIsConnected(false);
-      else setIsConnected(true);
-    });
-
-    NetInfo.fetch().then((state) => {
-      setIsConnected(state.isConnected);
-    });
-
-    return () => {
-      unsubscribe();
-    };
-  }, []);
-
-  const { data, isLoading, isError } = useQuery<BaseItemDto[]>({
-    queryKey: ["resumeItems", user?.Id],
-    queryFn: async () =>
-      (api &&
-        (
-          await getItemsApi(api).getResumeItems({
-            userId: user?.Id,
-          })
-        ).data.Items) ||
-      [],
-    enabled: !!api && !!user?.Id,
-    staleTime: 60 * 1000,
-  });
-
-  const { data: _nextUpData, isLoading: isLoadingNextUp } = useQuery({
-    queryKey: ["nextUp-all", user?.Id],
-    queryFn: async () =>
-      (api &&
-        (
-          await getTvShowsApi(api).getNextUp({
-            userId: user?.Id,
-            fields: ["MediaSourceCount"],
-          })
-        ).data.Items) ||
-      [],
-    enabled: !!api && !!user?.Id,
-    staleTime: 0,
-  });
-
-  const nextUpData = useMemo(() => {
-    return _nextUpData?.filter((i) => !data?.find((d) => d.Id === i.Id));
-  }, [_nextUpData]);
-
-  const { data: collections } = useQuery({
-    queryKey: ["collectinos", user?.Id],
-    queryFn: async () => {
-      if (!api || !user?.Id) {
-        return null;
-      }
-
-      const response = await getUserViewsApi(api).getUserViews({
-        userId: user.Id,
-      });
-
-      return response.data.Items || null;
-    },
-    enabled: !!api && !!user?.Id,
-    staleTime: 60 * 1000,
-  });
-
-  const movieCollectionId = useMemo(() => {
-    return collections?.find((c) => c.CollectionType === "movies")?.Id;
-  }, [collections]);
-
-  const tvShowCollectionId = useMemo(() => {
-    return collections?.find((c) => c.CollectionType === "tvshows")?.Id;
-  }, [collections]);
-
-  const {
-    data: recentlyAddedInMovies,
-    isLoading: isLoadingRecentlyAddedMovies,
-  } = useQuery<BaseItemDto[]>({
-    queryKey: ["recentlyAddedInMovies", user?.Id, movieCollectionId],
-    queryFn: async () =>
-      (api &&
-        (
-          await getUserLibraryApi(api).getLatestMedia({
-            userId: user?.Id,
-            limit: 50,
-            fields: ["PrimaryImageAspectRatio", "Path"],
-            imageTypeLimit: 1,
-            enableImageTypes: ["Primary", "Backdrop", "Thumb"],
-            parentId: movieCollectionId,
-          })
-        ).data) ||
-      [],
-    enabled: !!api && !!user?.Id && !!movieCollectionId,
-    staleTime: 60 * 1000,
-  });
-
-  const {
-    data: recentlyAddedInTVShows,
-    isLoading: isLoadingRecentlyAddedTVShows,
-  } = useQuery<BaseItemDto[]>({
-    queryKey: ["recentlyAddedInTVShows", user?.Id, tvShowCollectionId],
-    queryFn: async () =>
-      (api &&
-        (
-          await getUserLibraryApi(api).getLatestMedia({
-            userId: user?.Id,
-            limit: 50,
-            fields: ["PrimaryImageAspectRatio", "Path"],
-            imageTypeLimit: 1,
-            enableImageTypes: ["Primary", "Backdrop", "Thumb"],
-            parentId: tvShowCollectionId,
-          })
-        ).data) ||
-      [],
-    enabled: !!api && !!user?.Id && !!tvShowCollectionId,
-    staleTime: 60 * 1000,
-  });
-
-  const { data: suggestions, isLoading: isLoadingSuggestions } = useQuery<
-    BaseItemDto[]
-  >({
-    queryKey: ["suggestions", user?.Id],
-    queryFn: async () =>
-      (api &&
-        (
-          await getSuggestionsApi(api).getSuggestions({
-            userId: user?.Id,
-            limit: 5,
-            mediaType: ["Video"],
-          })
-        ).data.Items) ||
-      [],
-    enabled: !!api && !!user?.Id,
-    staleTime: 60 * 1000,
-  });
-
-  const { data: mediaListCollections } = useQuery({
-    queryKey: ["sf_promoted", user?.Id, settings?.usePopularPlugin],
-    queryFn: async () => {
-      if (!api || !user?.Id) return [];
-
-      const response = await getItemsApi(api).getItems({
-        userId: user.Id,
-        tags: ["sf_promoted"],
-        recursive: true,
-        fields: ["Tags"],
-        includeItemTypes: ["BoxSet"],
-      });
-
-      return response.data.Items || [];
-    },
-    enabled: !!api && !!user?.Id && settings?.usePopularPlugin === true,
-    staleTime: 0,
-  });
-
-  const refetch = useCallback(async () => {
-    setLoading(true);
-    await queryClient.refetchQueries({ queryKey: ["resumeItems"] });
-    await queryClient.refetchQueries({ queryKey: ["nextUp-all"] });
-    await queryClient.refetchQueries({ queryKey: ["recentlyAddedInMovies"] });
-    await queryClient.refetchQueries({ queryKey: ["recentlyAddedInTVShows"] });
-    await queryClient.refetchQueries({ queryKey: ["suggestions"] });
-    await queryClient.refetchQueries({
-      queryKey: ["sf_promoted"],
-    });
-    await queryClient.refetchQueries({
-      queryKey: ["sf_carousel"],
-    });
-    setLoading(false);
-  }, [queryClient, user?.Id]);
-
-  if (isConnected === false) {
-    return (
-      <View className="flex flex-col items-center justify-center h-full -mt-6 px-8">
-        <Text className="text-3xl font-bold mb-2">No Internet</Text>
-        <Text className="text-center opacity-70">
-          No worries, you can still watch{"\n"}downloaded content.
-        </Text>
-        <View className="mt-4">
-          <Button
-            color="purple"
-            onPress={() => router.push("/(auth)/downloads")}
-            justify="center"
-            iconRight={
-              <Ionicons name="arrow-forward" size={20} color="white" />
-            }
-          >
-            Go to downloads
-          </Button>
-        </View>
-      </View>
-    );
-  }
-
-  if (isError)
-    return (
-      <View className="flex flex-col items-center justify-center h-full -mt-6">
-        <Text className="text-3xl font-bold mb-2">Oops!</Text>
-        <Text className="text-center opacity-70">
-          Something went wrong.{"\n"}Please log out and in again.
-        </Text>
-      </View>
-    );
-
-  if (isLoading)
-    return (
-      <View className="justify-center items-center h-full">
-        <Loader />
-      </View>
-    );
-
-  return (
-    <ScrollView
-      nestedScrollEnabled
-      contentInsetAdjustmentBehavior="automatic"
-      refreshControl={
-        <RefreshControl refreshing={loading} onRefresh={refetch} />
-      }
-    >
-      <View className="flex flex-col pt-4 pb-24 gap-y-4">
-        <LargeMovieCarousel />
-
-        <ScrollingCollectionList
-          title="Continue Watching"
-          data={data}
-          loading={isLoading}
-          orientation="horizontal"
-        />
-
-        <ScrollingCollectionList
-          title="Next Up"
-          data={nextUpData}
-          loading={isLoadingNextUp}
-          orientation="horizontal"
-        />
-
-        {mediaListCollections?.map((ml) => (
-          <MediaListSection key={ml.Id} collection={ml} />
-        ))}
-
-        <ScrollingCollectionList
-          title="Recently Added in Movies"
-          data={recentlyAddedInMovies}
-          loading={isLoadingRecentlyAddedMovies}
-        />
-
-        <ScrollingCollectionList
-          title="Recently Added in TV-Shows"
-          data={recentlyAddedInTVShows}
-          loading={isLoadingRecentlyAddedTVShows}
-        />
-
-        <ScrollingCollectionList
-          title="Suggestions"
-          data={suggestions}
-          loading={isLoadingSuggestions}
-          orientation="horizontal"
-        />
-      </View>
-    </ScrollView>
-  );
-}

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

@@ -1,370 +0,0 @@
-import { Text } from "@/components/common/Text";
-import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
-import { FilterButton } from "@/components/filters/FilterButton";
-import { ResetFiltersButton } from "@/components/filters/ResetFiltersButton";
-import { ItemCardText } from "@/components/ItemCardText";
-import { Loader } from "@/components/Loader";
-import MoviePoster from "@/components/posters/MoviePoster";
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import {
-  genreFilterAtom,
-  sortByAtom,
-  sortOptions,
-  sortOrderAtom,
-  sortOrderOptions,
-  tagsFilterAtom,
-  yearFilterAtom,
-} from "@/utils/atoms/filters";
-import {
-  BaseItemDtoQueryResult,
-  BaseItemKind,
-} from "@jellyfin/sdk/lib/generated-client/models";
-import {
-  getFilterApi,
-  getItemsApi,
-  getUserLibraryApi,
-} from "@jellyfin/sdk/lib/utils/api";
-import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
-import { Stack, useLocalSearchParams, useNavigation } from "expo-router";
-import { useAtom } from "jotai";
-import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { NativeScrollEvent, ScrollView, View } from "react-native";
-import * as ScreenOrientation from "expo-screen-orientation";
-
-const isCloseToBottom = ({
-  layoutMeasurement,
-  contentOffset,
-  contentSize,
-}: NativeScrollEvent) => {
-  const paddingToBottom = 200;
-  return (
-    layoutMeasurement.height + contentOffset.y >=
-    contentSize.height - paddingToBottom
-  );
-};
-
-const page: React.FC = () => {
-  const searchParams = useLocalSearchParams();
-  const { libraryId } = searchParams as { libraryId: string };
-
-  const [api] = useAtom(apiAtom);
-  const [user] = useAtom(userAtom);
-  const navigation = useNavigation();
-
-  const [selectedGenres, setSelectedGenres] = useAtom(genreFilterAtom);
-  const [selectedYears, setSelectedYears] = useAtom(yearFilterAtom);
-  const [selectedTags, setSelectedTags] = useAtom(tagsFilterAtom);
-  const [sortBy, setSortBy] = useAtom(sortByAtom);
-  const [sortOrder, setSortOrder] = useAtom(sortOrderAtom);
-
-  const [orientation, setOrientation] = useState(
-    ScreenOrientation.Orientation.PORTRAIT_UP
-  );
-
-  useEffect(() => {
-    const subscription = ScreenOrientation.addOrientationChangeListener(
-      (event) => {
-        setOrientation(event.orientationInfo.orientation);
-      }
-    );
-
-    // Set the initial orientation
-    ScreenOrientation.getOrientationAsync().then((initialOrientation) => {
-      setOrientation(initialOrientation);
-    });
-
-    return () => {
-      ScreenOrientation.removeOrientationChangeListener(subscription);
-    };
-  }, [ScreenOrientation]);
-
-  const { data: library } = useQuery({
-    queryKey: ["library", libraryId],
-    queryFn: async () => {
-      if (!api) return null;
-      const response = await getUserLibraryApi(api).getItem({
-        itemId: libraryId,
-        userId: user?.Id,
-      });
-      const data = response.data;
-      return data;
-    },
-    enabled: !!api && !!user?.Id && !!libraryId,
-    staleTime: 0,
-  });
-
-  const fetchItems = useCallback(
-    async ({
-      pageParam,
-    }: {
-      pageParam: number;
-    }): Promise<BaseItemDtoQueryResult | null> => {
-      if (!api || !library) return null;
-
-      const includeItemTypes: BaseItemKind[] = [];
-
-      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:
-          break;
-      }
-
-      const response = await getItemsApi(api).getItems({
-        userId: user?.Id,
-        parentId: libraryId,
-        limit: 66,
-        startIndex: pageParam,
-        sortBy: [sortBy[0].key, "SortName", "ProductionYear"],
-        sortOrder: [sortOrder[0].key],
-        includeItemTypes,
-        enableImageTypes: ["Primary", "Backdrop", "Banner", "Thumb"],
-        recursive: true,
-        imageTypeLimit: 1,
-        fields: ["PrimaryImageAspectRatio", "SortName"],
-        genres: selectedGenres,
-        tags: selectedTags,
-        years: selectedYears.map((year) => parseInt(year)),
-      });
-
-      return response.data || null;
-    },
-    [
-      api,
-      user?.Id,
-      libraryId,
-      library,
-      selectedGenres,
-      selectedYears,
-      selectedTags,
-      sortBy,
-      sortOrder,
-    ]
-  );
-
-  const { data, isFetching, fetchNextPage } = useInfiniteQuery({
-    queryKey: [
-      "library-items",
-      library,
-      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
-      );
-
-      if (accumulatedItems < totalItems) {
-        return lastPage?.Items?.length * pages.length;
-      } else {
-        return undefined;
-      }
-    },
-    initialPageParam: 0,
-    enabled: !!api && !!user?.Id && !!library,
-  });
-
-  const type = useMemo(() => {
-    return data?.pages.flatMap((page) => page?.Items)[0]?.Type || null;
-  }, [data]);
-
-  const flatData = useMemo(() => {
-    return data?.pages.flatMap((p) => p?.Items) || [];
-  }, [data]);
-
-  if (!library || !library.CollectionType) return null;
-
-  return (
-    <ScrollView
-      contentInsetAdjustmentBehavior="automatic"
-      onScroll={({ nativeEvent }) => {
-        if (isCloseToBottom(nativeEvent)) {
-          fetchNextPage();
-        }
-      }}
-      scrollEventThrottle={400}
-    >
-      <View className="mt-4 mb-24">
-        <View className="mb-4">
-          <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-            <View className="flex flex-row space-x-1 px-3">
-              <ResetFiltersButton />
-              <FilterButton
-                collectionId={libraryId}
-                queryKey="genreFilter"
-                queryFn={async () => {
-                  if (!api) return null;
-                  const response = await getFilterApi(
-                    api
-                  ).getQueryFiltersLegacy({
-                    userId: user?.Id,
-                    includeItemTypes: type ? [type] : [],
-                    parentId: libraryId,
-                  });
-                  return response.data.Genres || [];
-                }}
-                set={setSelectedGenres}
-                values={selectedGenres}
-                title="Genres"
-                renderItemLabel={(item) => item.toString()}
-                searchFilter={(item, search) =>
-                  item.toLowerCase().includes(search.toLowerCase())
-                }
-              />
-              <FilterButton
-                collectionId={libraryId}
-                queryKey="tagsFilter"
-                queryFn={async () => {
-                  if (!api) return null;
-                  const response = await getFilterApi(
-                    api
-                  ).getQueryFiltersLegacy({
-                    userId: user?.Id,
-                    includeItemTypes: type ? [type] : [],
-                    parentId: libraryId,
-                  });
-                  return response.data.Tags || [];
-                }}
-                set={setSelectedTags}
-                values={selectedTags}
-                title="Tags"
-                renderItemLabel={(item) => item.toString()}
-                searchFilter={(item, search) =>
-                  item.toLowerCase().includes(search.toLowerCase())
-                }
-              />
-              <FilterButton
-                collectionId={libraryId}
-                queryKey="yearFilter"
-                queryFn={async () => {
-                  if (!api) return null;
-                  const response = await getFilterApi(
-                    api
-                  ).getQueryFiltersLegacy({
-                    userId: user?.Id,
-                    includeItemTypes: type ? [type] : [],
-                    parentId: libraryId,
-                  });
-                  return (
-                    response.data.Years?.sort((a, b) => b - a).map((y) =>
-                      y.toString()
-                    ) || []
-                  );
-                }}
-                set={setSelectedYears}
-                values={selectedYears}
-                title="Years"
-                renderItemLabel={(item) => item.toString()}
-                searchFilter={(item, search) =>
-                  item.toLowerCase().includes(search.toLowerCase())
-                }
-              />
-              <FilterButton
-                icon="sort"
-                collectionId={libraryId}
-                queryKey="sortByFilter"
-                queryFn={async () => {
-                  return sortOptions;
-                }}
-                set={setSortBy}
-                values={sortBy}
-                title="Sort by"
-                renderItemLabel={(item) => item.value}
-                searchFilter={(item, search) =>
-                  item.value.toLowerCase().includes(search.toLowerCase()) ||
-                  item.value.toLowerCase().includes(search.toLowerCase())
-                }
-                showSearch={false}
-              />
-              <FilterButton
-                icon="sort"
-                showSearch={false}
-                collectionId={libraryId}
-                queryKey="orderByFilter"
-                queryFn={async () => {
-                  return sortOrderOptions;
-                }}
-                set={setSortOrder}
-                values={sortOrder}
-                title="Order by"
-                renderItemLabel={(item) => item.value}
-                searchFilter={(item, search) =>
-                  item.value.toLowerCase().includes(search.toLowerCase()) ||
-                  item.value.toLowerCase().includes(search.toLowerCase())
-                }
-              />
-            </View>
-          </ScrollView>
-          {!type && isFetching && (
-            <Loader
-              style={{
-                marginTop: 300,
-              }}
-            />
-          )}
-        </View>
-        <View className="flex flex-row flex-wrap px-4 justify-between after:content-['']">
-          {flatData.map(
-            (item, index) =>
-              item && (
-                <TouchableItemRouter
-                  key={`${item.Id}-${index}`}
-                  style={{
-                    width:
-                      orientation === ScreenOrientation.Orientation.PORTRAIT_UP
-                        ? "32%"
-                        : "20%",
-                    marginBottom:
-                      orientation === ScreenOrientation.Orientation.PORTRAIT_UP
-                        ? 4
-                        : 16,
-                  }}
-                  item={item}
-                  className={`
-                    `}
-                >
-                  <MoviePoster item={item} />
-                  <ItemCardText item={item} />
-                </TouchableItemRouter>
-              )
-          )}
-          {flatData.length % 3 !== 0 && (
-            <View
-              style={{
-                width:
-                  orientation === ScreenOrientation.Orientation.PORTRAIT_UP
-                    ? "32%"
-                    : "20%",
-              }}
-            ></View>
-          )}
-        </View>
-      </View>
-    </ScrollView>
-  );
-};
-
-export default page;

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

@@ -1,30 +0,0 @@
-import { Stack, useRouter } from "expo-router";
-import { Platform } from "react-native";
-
-export default function IndexLayout() {
-  return (
-    <Stack>
-      <Stack.Screen
-        name="index"
-        options={{
-          headerShown: true,
-          headerLargeTitle: true,
-          headerTitle: "Library",
-          headerBlurEffect: "prominent",
-          headerTransparent: Platform.OS === "ios" ? true : false,
-          headerShadowVisible: false,
-        }}
-      />
-      <Stack.Screen
-        name="[libraryId]"
-        options={{
-          title: "",
-          headerShown: true,
-          headerBlurEffect: "prominent",
-          headerTransparent: Platform.OS === "ios" ? true : false,
-          headerShadowVisible: false,
-        }}
-      />
-    </Stack>
-  );
-}

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

@@ -1,104 +0,0 @@
-import { Text } from "@/components/common/Text";
-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 { FlashList } from "@shopify/flash-list";
-import { useQuery } from "@tanstack/react-query";
-import { Image } from "expo-image";
-import { useRouter } from "expo-router";
-import { useAtom } from "jotai";
-import { useMemo } from "react";
-import { TouchableOpacity, View } from "react-native";
-
-export default function index() {
-  const [api] = useAtom(apiAtom);
-  const [user] = useAtom(userAtom);
-
-  const { data, isLoading: isLoading } = useQuery({
-    queryKey: ["user-views", user?.Id],
-    queryFn: async () => {
-      if (!api || !user?.Id) {
-        return null;
-      }
-
-      const response = await getUserViewsApi(api).getUserViews({
-        userId: user.Id,
-      });
-
-      return response.data.Items || null;
-    },
-    enabled: !!api && !!user?.Id,
-    staleTime: 60 * 1000,
-  });
-
-  if (isLoading)
-    return (
-      <View className="justify-center items-center h-full">
-        <Loader />
-      </View>
-    );
-
-  return (
-    <FlashList
-      contentInsetAdjustmentBehavior="automatic"
-      contentContainerStyle={{
-        paddingTop: 17,
-        paddingHorizontal: 17,
-        paddingBottom: 150,
-      }}
-      data={data}
-      renderItem={({ item }) => <LibraryItemCard library={item} />}
-      keyExtractor={(item) => item.Id || ""}
-      ItemSeparatorComponent={() => <View className="h-4" />}
-      estimatedItemSize={200}
-    />
-  );
-}
-
-interface Props {
-  library: BaseItemDto;
-}
-
-const LibraryItemCard: React.FC<Props> = ({ library }) => {
-  const router = useRouter();
-
-  const [api] = useAtom(apiAtom);
-
-  const url = useMemo(
-    () =>
-      getPrimaryImageUrl({
-        api,
-        item: library,
-      }),
-    [library]
-  );
-
-  if (!url) return null;
-
-  return (
-    <TouchableOpacity
-      onPress={() => {
-        router.push(`/libraries/${library.Id}`);
-      }}
-    >
-      <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>
-    </TouchableOpacity>
-  );
-};

app/(auth)/collections/[collectionId].tsx

@@ -1,343 +0,0 @@
-import { Text } from "@/components/common/Text";
-import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
-import { FilterButton } from "@/components/filters/FilterButton";
-import { ResetFiltersButton } from "@/components/filters/ResetFiltersButton";
-import { ItemCardText } from "@/components/ItemCardText";
-import { Loader } from "@/components/Loader";
-import MoviePoster from "@/components/posters/MoviePoster";
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import {
-  genreFilterAtom,
-  sortByAtom,
-  sortOptions,
-  sortOrderAtom,
-  sortOrderOptions,
-  tagsFilterAtom,
-  yearFilterAtom,
-} from "@/utils/atoms/filters";
-import {
-  BaseItemDtoQueryResult,
-  BaseItemKind,
-} from "@jellyfin/sdk/lib/generated-client/models";
-import {
-  getFilterApi,
-  getItemsApi,
-  getUserLibraryApi,
-} from "@jellyfin/sdk/lib/utils/api";
-import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
-import { Stack, useLocalSearchParams, useNavigation } from "expo-router";
-import { useAtom } from "jotai";
-import React, { useCallback, useEffect, useMemo } from "react";
-import { NativeScrollEvent, ScrollView, View } from "react-native";
-
-const isCloseToBottom = ({
-  layoutMeasurement,
-  contentOffset,
-  contentSize,
-}: NativeScrollEvent) => {
-  const paddingToBottom = 200;
-  return (
-    layoutMeasurement.height + contentOffset.y >=
-    contentSize.height - paddingToBottom
-  );
-};
-
-const page: React.FC = () => {
-  const searchParams = useLocalSearchParams();
-  const { collectionId } = searchParams as { collectionId: string };
-
-  const [api] = useAtom(apiAtom);
-  const [user] = useAtom(userAtom);
-  const navigation = useNavigation();
-
-  const [selectedGenres, setSelectedGenres] = useAtom(genreFilterAtom);
-  const [selectedYears, setSelectedYears] = useAtom(yearFilterAtom);
-  const [selectedTags, setSelectedTags] = useAtom(tagsFilterAtom);
-  const [sortBy, setSortBy] = useAtom(sortByAtom);
-  const [sortOrder, setSortOrder] = useAtom(sortOrderAtom);
-
-  useEffect(() => {
-    setSortBy([
-      {
-        key: "PremiereDate",
-        value: "Premiere Date",
-      },
-    ]);
-    setSortOrder([
-      {
-        key: "Ascending",
-        value: "Ascending",
-      },
-    ]);
-  }, []);
-
-  const { data: collection } = useQuery({
-    queryKey: ["collection", collectionId],
-    queryFn: async () => {
-      if (!api) return null;
-      const response = await getUserLibraryApi(api).getItem({
-        itemId: collectionId,
-        userId: user?.Id,
-      });
-      const data = response.data;
-      return data;
-    },
-    enabled: !!api && !!user?.Id && !!collectionId,
-    staleTime: 0,
-  });
-
-  useEffect(() => {
-    navigation.setOptions({ title: collection?.Name || "" });
-  }, [navigation, collection]);
-
-  const fetchItems = useCallback(
-    async ({
-      pageParam,
-    }: {
-      pageParam: number;
-    }): Promise<BaseItemDtoQueryResult | null> => {
-      if (!api || !collection) return null;
-
-      const response = await getItemsApi(api).getItems({
-        userId: user?.Id,
-        parentId: collectionId,
-        limit: 18,
-        startIndex: pageParam,
-        sortBy: [sortBy[0].key, "SortName", "ProductionYear"],
-        sortOrder: [sortOrder[0].key],
-        fields: [
-          "ItemCounts",
-          "PrimaryImageAspectRatio",
-          "CanDelete",
-          "MediaSourceCount",
-        ],
-        genres: selectedGenres,
-        tags: selectedTags,
-        years: selectedYears.map((year) => parseInt(year)),
-      });
-
-      return response.data || null;
-    },
-    [
-      api,
-      user?.Id,
-      collection,
-      selectedGenres,
-      selectedYears,
-      selectedTags,
-      sortBy,
-      sortOrder,
-    ]
-  );
-
-  const { data, isFetching, fetchNextPage } = useInfiniteQuery({
-    queryKey: [
-      "collection-items",
-      collection,
-      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
-      );
-
-      if (accumulatedItems < totalItems) {
-        return lastPage?.Items?.length * pages.length;
-      } else {
-        return undefined;
-      }
-    },
-    initialPageParam: 0,
-    enabled: !!api && !!user?.Id && !!collection,
-  });
-
-  useEffect(() => {
-    console.log("Data: ", data);
-  }, [data]);
-
-  const type = useMemo(() => {
-    return data?.pages.flatMap((page) => page?.Items)[0]?.Type || null;
-  }, [data]);
-
-  const flatData = useMemo(() => {
-    return data?.pages.flatMap((p) => p?.Items) || [];
-  }, [data]);
-
-  if (!collection) return null;
-
-  return (
-    <ScrollView
-      contentInsetAdjustmentBehavior="automatic"
-      onScroll={({ nativeEvent }) => {
-        if (isCloseToBottom(nativeEvent)) {
-          fetchNextPage();
-        }
-      }}
-      scrollEventThrottle={400}
-    >
-      <View className="mt-4 mb-24">
-        <View className="mb-4">
-          <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-            <View className="flex flex-row space-x-1 px-3">
-              <ResetFiltersButton />
-              <FilterButton
-                collectionId={collectionId}
-                queryKey="genreFilter"
-                queryFn={async () => {
-                  if (!api) return null;
-                  const response = await getFilterApi(
-                    api
-                  ).getQueryFiltersLegacy({
-                    userId: user?.Id,
-                    includeItemTypes: type ? [type] : [],
-                    parentId: collectionId,
-                  });
-                  return response.data.Genres || [];
-                }}
-                set={setSelectedGenres}
-                values={selectedGenres}
-                title="Genres"
-                renderItemLabel={(item) => item.toString()}
-                searchFilter={(item, search) =>
-                  item.toLowerCase().includes(search.toLowerCase())
-                }
-              />
-              <FilterButton
-                collectionId={collectionId}
-                queryKey="tagsFilter"
-                queryFn={async () => {
-                  if (!api) return null;
-                  const response = await getFilterApi(
-                    api
-                  ).getQueryFiltersLegacy({
-                    userId: user?.Id,
-                    includeItemTypes: type ? [type] : [],
-                    parentId: collectionId,
-                  });
-                  return response.data.Tags || [];
-                }}
-                set={setSelectedTags}
-                values={selectedTags}
-                title="Tags"
-                renderItemLabel={(item) => item.toString()}
-                searchFilter={(item, search) =>
-                  item.toLowerCase().includes(search.toLowerCase())
-                }
-              />
-              <FilterButton
-                collectionId={collectionId}
-                queryKey="yearFilter"
-                queryFn={async () => {
-                  if (!api) return null;
-                  const response = await getFilterApi(
-                    api
-                  ).getQueryFiltersLegacy({
-                    userId: user?.Id,
-                    includeItemTypes: type ? [type] : [],
-                    parentId: collectionId,
-                  });
-                  return (
-                    response.data.Years?.sort((a, b) => b - a).map((y) =>
-                      y.toString()
-                    ) || []
-                  );
-                }}
-                set={setSelectedYears}
-                values={selectedYears}
-                title="Years"
-                renderItemLabel={(item) => item.toString()}
-                searchFilter={(item, search) =>
-                  item.toLowerCase().includes(search.toLowerCase())
-                }
-              />
-              <FilterButton
-                icon="sort"
-                collectionId={collectionId}
-                queryKey="sortByFilter"
-                queryFn={async () => {
-                  return sortOptions;
-                }}
-                set={setSortBy}
-                values={sortBy}
-                title="Sort by"
-                renderItemLabel={(item) => item.value}
-                searchFilter={(item, search) =>
-                  item.value.toLowerCase().includes(search.toLowerCase()) ||
-                  item.value.toLowerCase().includes(search.toLowerCase())
-                }
-                showSearch={false}
-              />
-              <FilterButton
-                icon="sort"
-                showSearch={false}
-                collectionId={collectionId}
-                queryKey="orderByFilter"
-                queryFn={async () => {
-                  return sortOrderOptions;
-                }}
-                set={setSortOrder}
-                values={sortOrder}
-                title="Order by"
-                renderItemLabel={(item) => item.value}
-                searchFilter={(item, search) =>
-                  item.value.toLowerCase().includes(search.toLowerCase()) ||
-                  item.value.toLowerCase().includes(search.toLowerCase())
-                }
-              />
-            </View>
-          </ScrollView>
-          {!type && isFetching && (
-            <Loader
-              style={{
-                marginTop: 300,
-              }}
-            />
-          )}
-        </View>
-        <View className="flex flex-row flex-wrap px-4 justify-between after:content-['']">
-          {flatData.map(
-            (item, index) =>
-              item && (
-                <TouchableItemRouter
-                  key={`${item.Id}`}
-                  style={{
-                    width: "32%",
-                    marginBottom: 4,
-                  }}
-                  item={item}
-                  className={`
-                    `}
-                >
-                  <MoviePoster item={item} />
-                  <ItemCardText item={item} />
-                </TouchableItemRouter>
-              )
-          )}
-          {flatData.length % 3 !== 0 && (
-            <View
-              style={{
-                width: "33%",
-              }}
-            ></View>
-          )}
-        </View>
-      </View>
-    </ScrollView>
-  );
-};
-
-export default page;

app/(auth)/items/[id].tsx

@@ -1,245 +0,0 @@
-import { AudioTrackSelector } from "@/components/AudioTrackSelector";
-import { Bitrate, BitrateSelector } from "@/components/BitrateSelector";
-import { DownloadItem } from "@/components/DownloadItem";
-import { Loader } from "@/components/Loader";
-import { OverviewText } from "@/components/OverviewText";
-import { PlayButton } from "@/components/PlayButton";
-import { PlayedStatus } from "@/components/PlayedStatus";
-import { Ratings } from "@/components/Ratings";
-import { SimilarItems } from "@/components/SimilarItems";
-import { SubtitleTrackSelector } from "@/components/SubtitleTrackSelector";
-import { Text } from "@/components/common/Text";
-import { MoviesTitleHeader } from "@/components/movies/MoviesTitleHeader";
-import { CastAndCrew } from "@/components/series/CastAndCrew";
-import { CurrentSeries } from "@/components/series/CurrentSeries";
-import { NextEpisodeButton } from "@/components/series/NextEpisodeButton";
-import { SeriesTitleHeader } from "@/components/series/SeriesTitleHeader";
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { useSettings } from "@/utils/atoms/settings";
-import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
-import { getLogoImageUrlById } from "@/utils/jellyfin/image/getLogoImageUrlById";
-import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
-import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
-import { chromecastProfile } from "@/utils/profiles/chromecast";
-import ios from "@/utils/profiles/ios";
-import native from "@/utils/profiles/native";
-import old from "@/utils/profiles/old";
-import { getMediaInfoApi } from "@jellyfin/sdk/lib/utils/api";
-import { useQuery } from "@tanstack/react-query";
-import { Image } from "expo-image";
-import { useLocalSearchParams } from "expo-router";
-import { useAtom } from "jotai";
-import { useMemo, useState } from "react";
-import { View } from "react-native";
-import { useCastDevice } from "react-native-google-cast";
-import { ParallaxScrollView } from "../../../components/ParallaxPage";
-
-const page: React.FC = () => {
-  const local = useLocalSearchParams();
-  const { id } = local as { id: string };
-
-  const [api] = useAtom(apiAtom);
-  const [user] = useAtom(userAtom);
-
-  const [settings] = useSettings();
-
-  const castDevice = useCastDevice();
-
-  const [selectedAudioStream, setSelectedAudioStream] = useState<number>(-1);
-  const [selectedSubtitleStream, setSelectedSubtitleStream] =
-    useState<number>(0);
-  const [maxBitrate, setMaxBitrate] = useState<Bitrate>({
-    key: "Max",
-    value: undefined,
-  });
-
-  const { data: item, isLoading: l1 } = useQuery({
-    queryKey: ["item", id],
-    queryFn: async () =>
-      await getUserItemData({
-        api,
-        userId: user?.Id,
-        itemId: id,
-      }),
-    enabled: !!id && !!api,
-    staleTime: 60,
-  });
-
-  const { data: sessionData } = useQuery({
-    queryKey: ["sessionData", item?.Id],
-    queryFn: async () => {
-      if (!api || !user?.Id || !item?.Id) return null;
-      const playbackData = await getMediaInfoApi(api!).getPlaybackInfo({
-        itemId: item?.Id,
-        userId: user?.Id,
-      });
-
-      return playbackData.data;
-    },
-    enabled: !!item?.Id && !!api && !!user?.Id,
-    staleTime: 0,
-  });
-
-  const { data: playbackUrl } = useQuery({
-    queryKey: [
-      "playbackUrl",
-      item?.Id,
-      maxBitrate,
-      castDevice,
-      selectedAudioStream,
-      selectedSubtitleStream,
-      settings,
-    ],
-    queryFn: async () => {
-      if (!api || !user?.Id || !sessionData) return null;
-
-      let deviceProfile: any = ios;
-
-      if (castDevice?.deviceId) {
-        deviceProfile = chromecastProfile;
-      } else if (settings?.deviceProfile === "Native") {
-        deviceProfile = native;
-      } else if (settings?.deviceProfile === "Old") {
-        deviceProfile = old;
-      }
-
-      const url = await getStreamUrl({
-        api,
-        userId: user.Id,
-        item,
-        startTimeTicks: item?.UserData?.PlaybackPositionTicks || 0,
-        maxStreamingBitrate: maxBitrate.value,
-        sessionData,
-        deviceProfile,
-        audioStreamIndex: selectedAudioStream,
-        subtitleStreamIndex: selectedSubtitleStream,
-        forceDirectPlay: settings?.forceDirectPlay,
-      });
-
-      console.log("Transcode URL: ", url);
-
-      return url;
-    },
-    enabled: !!sessionData && !!api && !!user?.Id && !!item?.Id,
-    staleTime: 0,
-  });
-
-  const backdropUrl = useMemo(
-    () =>
-      getBackdropUrl({
-        api,
-        item,
-        quality: 90,
-        width: 1000,
-      }),
-    [item]
-  );
-
-  const logoUrl = useMemo(
-    () => (item?.Type === "Movie" ? getLogoImageUrlById({ api, item }) : null),
-    [item]
-  );
-
-  if (l1)
-    return (
-      <View className="justify-center items-center h-full">
-        <Loader />
-      </View>
-    );
-
-  if (!item?.Id || !backdropUrl) return null;
-
-  return (
-    <ParallaxScrollView
-      headerImage={
-        <Image
-          source={{
-            uri: backdropUrl,
-          }}
-          style={{
-            width: "100%",
-            height: "100%",
-          }}
-        />
-      }
-      logo={
-        <>
-          {logoUrl ? (
-            <Image
-              source={{
-                uri: logoUrl,
-              }}
-              style={{
-                height: 130,
-                width: "100%",
-                resizeMode: "contain",
-              }}
-            />
-          ) : null}
-        </>
-      }
-    >
-      <View className="flex flex-col px-4 pt-4">
-        <View className="flex flex-col">
-          {item.Type === "Episode" ? (
-            <SeriesTitleHeader item={item} />
-          ) : (
-            <>
-              <MoviesTitleHeader item={item} />
-            </>
-          )}
-          <Text className="text-center opacity-50">{item?.ProductionYear}</Text>
-          <Ratings item={item} />
-        </View>
-
-        <View className="flex flex-row justify-between items-center mb-2">
-          {playbackUrl ? (
-            <DownloadItem item={item} />
-          ) : (
-            <View className="h-12 aspect-square flex items-center justify-center"></View>
-          )}
-          <PlayedStatus item={item} />
-        </View>
-
-        <OverviewText text={item.Overview} />
-      </View>
-      <View className="flex flex-col p-4 w-full">
-        <View className="flex flex-row items-center space-x-2 w-full">
-          <BitrateSelector
-            onChange={(val) => setMaxBitrate(val)}
-            selected={maxBitrate}
-          />
-          <AudioTrackSelector
-            item={item}
-            onChange={setSelectedAudioStream}
-            selected={selectedAudioStream}
-          />
-          <SubtitleTrackSelector
-            item={item}
-            onChange={setSelectedSubtitleStream}
-            selected={selectedSubtitleStream}
-          />
-        </View>
-        <View className="flex flex-row items-center justify-between w-full">
-          <NextEpisodeButton item={item} type="previous" className="mr-2" />
-          <PlayButton item={item} url={playbackUrl} className="grow" />
-          <NextEpisodeButton item={item} className="ml-2" />
-        </View>
-      </View>
-
-      <CastAndCrew item={item} />
-
-      {item.Type === "Episode" && (
-        <View className="mb-4">
-          <CurrentSeries item={item} />
-        </View>
-      )}
-
-      <SimilarItems itemId={item.Id} />
-
-      <View className="h-12"></View>
-    </ParallaxScrollView>
-  );
-};
-
-export default page;

app/(auth)/songs/[songId].tsx

@@ -1,271 +0,0 @@
-import { AudioTrackSelector } from "@/components/AudioTrackSelector";
-import { Bitrate, BitrateSelector } from "@/components/BitrateSelector";
-import { Chromecast } from "@/components/Chromecast";
-import { Text } from "@/components/common/Text";
-import { DownloadItem } from "@/components/DownloadItem";
-import { Loader } from "@/components/Loader";
-import { MoviesTitleHeader } from "@/components/movies/MoviesTitleHeader";
-import { ParallaxScrollView } from "@/components/ParallaxPage";
-import { PlayButton } from "@/components/PlayButton";
-import { NextEpisodeButton } from "@/components/series/NextEpisodeButton";
-import { SimilarItems } from "@/components/SimilarItems";
-import { SubtitleTrackSelector } from "@/components/SubtitleTrackSelector";
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { usePlayback } from "@/providers/PlaybackProvider";
-import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
-import { getLogoImageUrlById } from "@/utils/jellyfin/image/getLogoImageUrlById";
-import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
-import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
-import { chromecastProfile } from "@/utils/profiles/chromecast";
-import ios from "@/utils/profiles/ios";
-import { getMediaInfoApi } from "@jellyfin/sdk/lib/utils/api";
-import { useQuery } from "@tanstack/react-query";
-import { Image } from "expo-image";
-import { useLocalSearchParams, useNavigation } from "expo-router";
-import { useAtom } from "jotai";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { ScrollView, View } from "react-native";
-import CastContext, {
-  PlayServicesState,
-  useCastDevice,
-  useRemoteMediaClient,
-} from "react-native-google-cast";
-
-const page: React.FC = () => {
-  const local = useLocalSearchParams();
-  const { songId: id } = local as { songId: string };
-
-  const [api] = useAtom(apiAtom);
-  const [user] = useAtom(userAtom);
-
-  const { setCurrentlyPlayingState } = usePlayback();
-
-  const castDevice = useCastDevice();
-  const navigation = useNavigation();
-
-  useEffect(() => {
-    navigation.setOptions({
-      headerRight: () => (
-        <View className="">
-          <Chromecast />
-        </View>
-      ),
-    });
-  });
-
-  const chromecastReady = useMemo(() => !!castDevice?.deviceId, [castDevice]);
-  const [selectedAudioStream, setSelectedAudioStream] = useState<number>(-1);
-  const [selectedSubtitleStream, setSelectedSubtitleStream] =
-    useState<number>(0);
-  const [maxBitrate, setMaxBitrate] = useState<Bitrate>({
-    key: "Max",
-    value: undefined,
-  });
-
-  const { data: item, isLoading: l1 } = useQuery({
-    queryKey: ["item", id],
-    queryFn: async () =>
-      await getUserItemData({
-        api,
-        userId: user?.Id,
-        itemId: id,
-      }),
-    enabled: !!id && !!api,
-    staleTime: 60 * 1000,
-  });
-
-  const backdropUrl = useMemo(
-    () =>
-      getBackdropUrl({
-        api,
-        item,
-        quality: 90,
-        width: 1000,
-      }),
-    [item]
-  );
-
-  const logoUrl = useMemo(
-    () => (item?.Type === "Movie" ? getLogoImageUrlById({ api, item }) : null),
-    [item]
-  );
-
-  const { data: sessionData } = useQuery({
-    queryKey: ["sessionData", item?.Id],
-    queryFn: async () => {
-      if (!api || !user?.Id || !item?.Id) return null;
-      const playbackData = await getMediaInfoApi(api!).getPlaybackInfo({
-        itemId: item?.Id,
-        userId: user?.Id,
-      });
-
-      return playbackData.data;
-    },
-    enabled: !!item?.Id && !!api && !!user?.Id,
-    staleTime: 0,
-  });
-
-  const { data: playbackUrl } = useQuery({
-    queryKey: [
-      "playbackUrl",
-      item?.Id,
-      maxBitrate,
-      castDevice,
-      selectedAudioStream,
-      selectedSubtitleStream,
-    ],
-    queryFn: async () => {
-      if (!api || !user?.Id || !sessionData) return null;
-
-      const url = await getStreamUrl({
-        api,
-        userId: user.Id,
-        item,
-        startTimeTicks: item?.UserData?.PlaybackPositionTicks || 0,
-        maxStreamingBitrate: maxBitrate.value,
-        sessionData,
-        deviceProfile: castDevice?.deviceId ? chromecastProfile : ios,
-        audioStreamIndex: selectedAudioStream,
-        subtitleStreamIndex: selectedSubtitleStream,
-      });
-
-      console.log("Transcode URL: ", url);
-
-      return url;
-    },
-    enabled: !!sessionData,
-    staleTime: 0,
-  });
-
-  const client = useRemoteMediaClient();
-
-  const onPressPlay = useCallback(
-    async (type: "device" | "cast" = "device") => {
-      if (!playbackUrl || !item) return;
-
-      if (type === "cast" && client) {
-        await CastContext.getPlayServicesState().then((state) => {
-          if (state && state !== PlayServicesState.SUCCESS)
-            CastContext.showPlayServicesErrorDialog(state);
-          else {
-            client.loadMedia({
-              mediaInfo: {
-                contentUrl: playbackUrl,
-                contentType: "video/mp4",
-                metadata: {
-                  type: item.Type === "Episode" ? "tvShow" : "movie",
-                  title: item.Name || "",
-                  subtitle: item.Overview || "",
-                },
-              },
-              startTime: 0,
-            });
-          }
-        });
-      } else {
-        setCurrentlyPlayingState({
-          item,
-          url: playbackUrl,
-        });
-      }
-    },
-    [playbackUrl, item]
-  );
-
-  if (l1)
-    return (
-      <View className="justify-center items-center h-full">
-        <Loader />
-      </View>
-    );
-
-  if (!item?.Id || !backdropUrl) return null;
-
-  return (
-    <ParallaxScrollView
-      headerImage={
-        <Image
-          source={{
-            uri: backdropUrl,
-          }}
-          style={{
-            width: "100%",
-            height: "100%",
-          }}
-        />
-      }
-      logo={
-        <>
-          {logoUrl ? (
-            <Image
-              source={{
-                uri: logoUrl,
-              }}
-              style={{
-                height: 130,
-                width: "100%",
-                resizeMode: "contain",
-              }}
-            />
-          ) : null}
-        </>
-      }
-    >
-      <View className="flex flex-col px-4 pt-4">
-        <View className="flex flex-col">
-          <MoviesTitleHeader item={item} />
-          <Text className="text-center opacity-50">{item?.ProductionYear}</Text>
-        </View>
-
-        <View className="flex flex-row justify-between items-center w-full my-4">
-          {playbackUrl ? (
-            <DownloadItem item={item} />
-          ) : (
-            <View className="h-12 aspect-square flex items-center justify-center"></View>
-          )}
-        </View>
-      </View>
-      <View className="flex flex-col p-4 w-full">
-        <View className="flex flex-row items-center space-x-2 w-full">
-          <BitrateSelector
-            onChange={(val) => setMaxBitrate(val)}
-            selected={maxBitrate}
-          />
-          <AudioTrackSelector
-            item={item}
-            onChange={setSelectedAudioStream}
-            selected={selectedAudioStream}
-          />
-          <SubtitleTrackSelector
-            item={item}
-            onChange={setSelectedSubtitleStream}
-            selected={selectedSubtitleStream}
-          />
-        </View>
-        <View className="flex flex-row items-center justify-between w-full">
-          <NextEpisodeButton item={item} type="previous" className="mr-2" />
-          <PlayButton item={item} className="grow" />
-          <NextEpisodeButton item={item} className="ml-2" />
-        </View>
-      </View>
-      <ScrollView horizontal className="flex px-4 mb-4">
-        <View className="flex flex-row space-x-2 ">
-          <View className="flex flex-col">
-            <Text className="text-sm opacity-70">Audio</Text>
-          </View>
-          <View className="flex flex-col">
-            <Text className="text-sm opacity-70">
-              {item.MediaStreams?.find((i) => i.Type === "Audio")?.DisplayTitle}
-            </Text>
-          </View>
-        </View>
-      </ScrollView>
-
-      <SimilarItems itemId={item.Id} />
-
-      <View className="h-12"></View>
-    </ParallaxScrollView>
-  );
-};
-
-export default page;

app/_layout.tsx

@@ -9,22 +9,19 @@ import { DarkTheme, ThemeProvider } from "@react-navigation/native";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { useFonts } from "expo-font";
 import { useKeepAwake } from "expo-keep-awake";
-import { Stack } from "expo-router";
+import { Stack, useRouter } from "expo-router";
 import * as ScreenOrientation from "expo-screen-orientation";
 import * as SplashScreen from "expo-splash-screen";
 import { StatusBar } from "expo-status-bar";
-import { Provider as JotaiProvider } from "jotai";
+import { Provider as JotaiProvider, useAtom } from "jotai";
 import { useEffect, useRef } from "react";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import "react-native-reanimated";
+import * as Linking from "expo-linking";
+import { orientationAtom } from "@/utils/atoms/orientation";
 
-// Prevent the splash screen from auto-hiding before asset loading is complete.
 SplashScreen.preventAutoHideAsync();
 
-export const unstable_settings = {
-  initialRouteName: "/index",
-};
-
 export default function RootLayout() {
   const [loaded] = useFonts({
     SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
@@ -49,6 +46,7 @@ export default function RootLayout() {
 
 function Layout() {
   const [settings, updateSettings] = useSettings();
+  const [orientation, setOrientation] = useAtom(orientationAtom);
 
   useKeepAwake();
 
@@ -75,6 +73,29 @@ function Layout() {
       );
   }, [settings]);
 
+  useEffect(() => {
+    const subscription = ScreenOrientation.addOrientationChangeListener(
+      (event) => {
+        console.log(event.orientationInfo.orientation);
+        setOrientation(event.orientationInfo.orientation);
+      }
+    );
+
+    ScreenOrientation.getOrientationAsync().then((initialOrientation) => {
+      setOrientation(initialOrientation);
+    });
+
+    return () => {
+      ScreenOrientation.removeOrientationChangeListener(subscription);
+    };
+  }, []);
+
+  const url = Linking.useURL();
+
+  if (url) {
+    const { hostname, path, queryParams } = Linking.parse(url);
+  }
+
   return (
     <GestureHandlerRootView style={{ flex: 1 }}>
       <QueryClientProvider client={queryClientRef.current}>
@@ -93,81 +114,6 @@ function Layout() {
                           title: "",
                         }}
                       />
-                      <Stack.Screen
-                        name="(auth)/settings"
-                        options={{
-                          headerShown: true,
-                          title: "Settings",
-                          headerStyle: { backgroundColor: "black" },
-                          headerShadowVisible: false,
-                        }}
-                      />
-                      <Stack.Screen
-                        name="(auth)/downloads"
-                        options={{
-                          headerShown: true,
-                          title: "Downloads",
-                          headerStyle: { backgroundColor: "black" },
-                          headerShadowVisible: false,
-                        }}
-                      />
-                      <Stack.Screen
-                        name="(auth)/items/[id]"
-                        options={{
-                          title: "",
-                          headerShown: false,
-                        }}
-                      />
-                      <Stack.Screen
-                        name="(auth)/collections/[collectionId]"
-                        options={{
-                          title: "",
-                          headerShown: true,
-                          headerStyle: { backgroundColor: "black" },
-                          headerShadowVisible: false,
-                        }}
-                      />
-                      <Stack.Screen
-                        name="(auth)/artists/page"
-                        options={{
-                          title: "",
-                          headerShown: true,
-                          headerStyle: { backgroundColor: "black" },
-                          headerShadowVisible: false,
-                        }}
-                      />
-                      <Stack.Screen
-                        name="(auth)/artists/[artistId]/page"
-                        options={{
-                          title: "",
-                          headerShown: true,
-                          headerStyle: { backgroundColor: "black" },
-                          headerShadowVisible: false,
-                        }}
-                      />
-                      <Stack.Screen
-                        name="(auth)/albums/[albumId]"
-                        options={{
-                          title: "",
-                          headerShown: true,
-                          headerStyle: { backgroundColor: "black" },
-                          headerShadowVisible: false,
-                        }}
-                      />
-                      <Stack.Screen
-                        name="(auth)/songs/[songId]"
-                        options={{
-                          title: "",
-                          headerShown: false,
-                        }}
-                      />
-                      <Stack.Screen
-                        name="(auth)/series/[id]"
-                        options={{
-                          title: "",
-                          headerShown: false,
-                        }}
-                      />
                       <Stack.Screen
                         name="login"
                         options={{ headerShown: false, title: "Login" }}

app/login.tsx

@@ -3,9 +3,9 @@ import { Input } from "@/components/common/Input";
 import { Text } from "@/components/common/Text";
 import { apiAtom, useJellyfin } from "@/providers/JellyfinProvider";
 import { Ionicons } from "@expo/vector-icons";
-import { AxiosError } from "axios";
+import { useLocalSearchParams } from "expo-router";
 import { useAtom } from "jotai";
-import React, { useMemo, useState } from "react";
+import React, { useEffect, useState } from "react";
 import {
   Alert,
   KeyboardAvoidingView,
@@ -21,19 +21,44 @@ const CredentialsSchema = z.object({
 });
 
 const Login: React.FC = () => {
-  const { setServer, login, removeServer } = useJellyfin();
+  const { setServer, login, removeServer, initiateQuickConnect } =
+    useJellyfin();
   const [api] = useAtom(apiAtom);
+  const params = useLocalSearchParams();
 
-  const [serverURL, setServerURL] = useState<string>("");
+  const {
+    apiUrl: _apiUrl,
+    username: _username,
+    password: _password,
+  } = params as { apiUrl: string; username: string; password: string };
+
+  const [serverURL, setServerURL] = useState<string>(_apiUrl);
   const [error, setError] = useState<string>("");
   const [credentials, setCredentials] = useState<{
     username: string;
     password: string;
   }>({
-    username: "",
-    password: "",
+    username: _username,
+    password: _password,
   });
 
+  useEffect(() => {
+    (async () => {
+      if (_apiUrl) {
+        setServer({
+          address: _apiUrl,
+        });
+
+        setTimeout(() => {
+          if (_username && _password) {
+            setCredentials({ username: _username, password: _password });
+            login(_username, _password);
+          }
+        }, 300);
+      }
+    })();
+  }, [_apiUrl, _username, _password]);
+
   const [loading, setLoading] = useState<boolean>(false);
 
   const handleLogin = async () => {
@@ -62,6 +87,21 @@ const Login: React.FC = () => {
     setServer({ address: url.trim() });
   };
 
+  const handleQuickConnect = async () => {
+    try {
+      const code = await initiateQuickConnect();
+      if (code) {
+        Alert.alert("Quick Connect", `Enter code ${code} to login`, [
+          {
+            text: "Got It",
+          },
+        ]);
+      }
+    } catch (error) {
+      Alert.alert("Error", "Failed to initiate Quick Connect");
+    }
+  };
+
   if (api?.basePath) {
     return (
       <SafeAreaView style={{ flex: 1 }}>
@@ -137,13 +177,18 @@ const Login: React.FC = () => {
               <Text className="text-red-600 mb-2">{error}</Text>
             </View>
 
-            <Button
-              onPress={handleLogin}
-              loading={loading}
-              className="mt-auto mb-2"
-            >
-              Log in
-            </Button>
+            <View className="mt-auto mb-2">
+              <Button
+                color="black"
+                onPress={handleQuickConnect}
+                className="mb-2"
+              >
+                Use Quick Connect
+              </Button>
+              <Button onPress={handleLogin} loading={loading}>
+                Log in
+              </Button>
+            </View>
           </View>
         </KeyboardAvoidingView>
       </SafeAreaView>

components/AudioTrackSelector.tsx

@@ -2,27 +2,29 @@ import { TouchableOpacity, View } from "react-native";
 import * as DropdownMenu from "zeego/dropdown-menu";
 import { Text } from "./common/Text";
 import { atom, useAtom } from "jotai";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import {
+  BaseItemDto,
+  MediaSourceInfo,
+} from "@jellyfin/sdk/lib/generated-client/models";
 import { useEffect, useMemo } from "react";
 import { MediaStream } from "@jellyfin/sdk/lib/generated-client/models";
 import { tc } from "@/utils/textTools";
 
 interface Props extends React.ComponentProps<typeof View> {
-  item: BaseItemDto;
+  source: MediaSourceInfo;
   onChange: (value: number) => void;
   selected: number;
 }
 
 export const AudioTrackSelector: React.FC<Props> = ({
-  item,
+  source,
   onChange,
   selected,
   ...props
 }) => {
   const audioStreams = useMemo(
-    () =>
-      item.MediaSources?.[0].MediaStreams?.filter((x) => x.Type === "Audio"),
-    [item]
+    () => source.MediaStreams?.filter((x) => x.Type === "Audio"),
+    [source]
   );
 
   const selectedAudioSteam = useMemo(
@@ -31,23 +33,26 @@ export const AudioTrackSelector: React.FC<Props> = ({
   );
 
   useEffect(() => {
-    const index = item.MediaSources?.[0].DefaultAudioStreamIndex;
+    const index = source.DefaultAudioStreamIndex;
     if (index !== undefined && index !== null) onChange(index);
   }, []);
 
   return (
-    <View className="flex flex-row items-center justify-between" {...props}>
+    <View
+      className="flex shrink"
+      style={{
+        minWidth: 50,
+      }}
+    >
       <DropdownMenu.Root>
         <DropdownMenu.Trigger>
-          <View className="flex flex-col mb-2">
-            <Text className="opacity-50 mb-1 text-xs">Audio streams</Text>
-            <View className="flex flex-row">
-              <TouchableOpacity className="bg-neutral-900 max-w-32 h-10 rounded-xl border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between">
-                <Text className="">
-                  {tc(selectedAudioSteam?.DisplayTitle, 13)}
-                </Text>
-              </TouchableOpacity>
-            </View>
+          <View className="flex flex-col" {...props}>
+            <Text className="opacity-50 mb-1 text-xs">Audio</Text>
+            <TouchableOpacity className="bg-neutral-900  h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between">
+              <Text className="" numberOfLines={1}>
+                {selectedAudioSteam?.DisplayTitle}
+              </Text>
+            </TouchableOpacity>
           </View>
         </DropdownMenu.Trigger>
         <DropdownMenu.Content

components/BitrateSelector.tsx

@@ -1,11 +1,12 @@
 import { TouchableOpacity, View } from "react-native";
 import * as DropdownMenu from "zeego/dropdown-menu";
 import { Text } from "./common/Text";
-import { atom, useAtom } from "jotai";
+import { useMemo } from "react";
 
 export type Bitrate = {
   key: string;
   value: number | undefined;
+  height?: number;
 };
 
 const BITRATES: Bitrate[] = [
@@ -16,63 +17,84 @@ const BITRATES: Bitrate[] = [
   {
     key: "8 Mb/s",
     value: 8000000,
+    height: 1080,
   },
   {
     key: "4 Mb/s",
     value: 4000000,
+    height: 1080,
   },
   {
     key: "2 Mb/s",
     value: 2000000,
+    height: 720,
   },
   {
     key: "500 Kb/s",
     value: 500000,
+    height: 480,
   },
   {
     key: "250 Kb/s",
     value: 250000,
+    height: 480,
   },
 ];
 
 interface Props extends React.ComponentProps<typeof View> {
   onChange: (value: Bitrate) => void;
   selected: Bitrate;
+  inverted?: boolean;
 }
 
 export const BitrateSelector: React.FC<Props> = ({
   onChange,
   selected,
+  inverted,
   ...props
 }) => {
+  const sorted = useMemo(() => {
+    if (inverted)
+      return BITRATES.sort(
+        (a, b) => (a.value || Infinity) - (b.value || Infinity)
+      );
+    return BITRATES.sort(
+      (a, b) => (b.value || Infinity) - (a.value || Infinity)
+    );
+  }, []);
+
   return (
-    <View className="flex flex-row items-center justify-between" {...props}>
+    <View
+      className="flex shrink"
+      style={{
+        minWidth: 60,
+        maxWidth: 200,
+      }}
+    >
       <DropdownMenu.Root>
         <DropdownMenu.Trigger>
-          <View className="flex flex-col mb-2">
-            <Text className="opacity-50 mb-1 text-xs">Bitrate</Text>
-            <View className="flex flex-row">
-              <TouchableOpacity className="bg-neutral-900 h-10 rounded-xl border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between">
-                <Text>
-                  {BITRATES.find((b) => b.value === selected.value)?.key}
-                </Text>
-              </TouchableOpacity>
-            </View>
+          <View className="flex flex-col" {...props}>
+            <Text className="opacity-50 mb-1 text-xs">Quality</Text>
+            <TouchableOpacity className="bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between">
+              <Text style={{}} className="" numberOfLines={1}>
+                {BITRATES.find((b) => b.value === selected.value)?.key}
+              </Text>
+            </TouchableOpacity>
           </View>
         </DropdownMenu.Trigger>
         <DropdownMenu.Content
-          loop={true}
+          loop={false}
           side="bottom"
-          align="start"
+          align="center"
           alignOffset={0}
           avoidCollisions={true}
-          collisionPadding={8}
-          sideOffset={8}
+          collisionPadding={0}
+          sideOffset={0}
         >
           <DropdownMenu.Label>Bitrates</DropdownMenu.Label>
-          {BITRATES?.map((b, index: number) => (
+          {sorted.map((b) => (
             <DropdownMenu.Item
-              key={index.toString()}
+              key={b.key}
               onSelect={() => {
                 onChange(b);
               }}

components/Button.tsx

@@ -10,7 +10,7 @@ interface ButtonProps extends React.ComponentProps<typeof TouchableOpacity> {
   disabled?: boolean;
   children?: string | ReactNode;
   loading?: boolean;
-  color?: "purple" | "red" | "black";
+  color?: "purple" | "red" | "black" | "transparent";
   iconRight?: ReactNode;
   iconLeft?: ReactNode;
   justify?: "center" | "between";
@@ -37,6 +37,8 @@ export const Button: React.FC<PropsWithChildren<ButtonProps>> = ({
         return "bg-red-600";
       case "black":
         return "bg-neutral-900 border border-neutral-800";
+      case "transparent":
+        return "bg-transparent";
     }
   }, [color]);
 

components/Chromecast.tsx

@@ -1,25 +1,33 @@
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { Feather } from "@expo/vector-icons";
+import { BlurView } from "expo-blur";
 import React, { useEffect } from "react";
-import { View } from "react-native";
-import {
-  CastButton,
+import { Platform, TouchableOpacity, ViewProps } from "react-native";
+import GoogleCast, {
+  CastContext,
   useCastDevice,
   useDevices,
+  useMediaStatus,
   useRemoteMediaClient,
 } from "react-native-google-cast";
-import GoogleCast from "react-native-google-cast";
 
-type Props = {
+interface Props extends ViewProps {
   width?: number;
   height?: number;
-};
+  background?: "blur" | "transparent";
+}
 
-export const Chromecast: React.FC<Props> = ({ width = 48, height = 48 }) => {
+export const Chromecast: React.FC<Props> = ({
+  width = 48,
+  height = 48,
+  background = "transparent",
+  ...props
+}) => {
   const client = useRemoteMediaClient();
   const castDevice = useCastDevice();
   const devices = useDevices();
   const sessionManager = GoogleCast.getSessionManager();
   const discoveryManager = GoogleCast.getDiscoveryManager();
+  const mediaStatus = useMediaStatus();
 
   useEffect(() => {
     (async () => {
@@ -31,9 +39,49 @@ export const Chromecast: React.FC<Props> = ({ width = 48, height = 48 }) => {
     })();
   }, [client, devices, castDevice, sessionManager, discoveryManager]);
 
+  if (background === "transparent")
+    return (
+      <TouchableOpacity
+        onPress={() => {
+          if (mediaStatus?.currentItemId) CastContext.showExpandedControls();
+          else CastContext.showCastDialog();
+        }}
+        className="rounded-full h-10 w-10 flex items-center justify-center b"
+        {...props}
+      >
+        <Feather name="cast" size={22} color={"white"} />
+      </TouchableOpacity>
+    );
+
+  if (Platform.OS === "android")
+    return (
+      <TouchableOpacity
+        onPress={() => {
+          if (mediaStatus?.currentItemId) CastContext.showExpandedControls();
+          else CastContext.showCastDialog();
+        }}
+        className="rounded-full h-10 w-10 flex items-center justify-center bg-neutral-800/80"
+        {...props}
+      >
+        <Feather name="cast" size={22} color={"white"} />
+      </TouchableOpacity>
+    );
+
   return (
-    <View className="rounded h-10 aspect-square flex items-center justify-center">
-      <CastButton style={{ tintColor: "white", height, width }} />
-    </View>
+    <TouchableOpacity
+      onPress={() => {
+        if (mediaStatus?.currentItemId) CastContext.showExpandedControls();
+        else CastContext.showCastDialog();
+      }}
+      {...props}
+    >
+      <BlurView
+        intensity={100}
+        className="rounded-full overflow-hidden h-10 aspect-square flex items-center justify-center"
+        {...props}
+      >
+        <Feather name="cast" size={22} color={"white"} />
+      </BlurView>
+    </TouchableOpacity>
   );
 };

components/ContinueWatchingPoster.tsx

@@ -5,29 +5,41 @@ import { useAtom } from "jotai";
 import { useMemo, useState } from "react";
 import { View } from "react-native";
 import { WatchedIndicator } from "./WatchedIndicator";
-import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
 
 type ContinueWatchingPosterProps = {
   item: BaseItemDto;
   width?: number;
+  useEpisodePoster?: boolean;
 };
 
 const ContinueWatchingPoster: React.FC<ContinueWatchingPosterProps> = ({
   item,
   width = 176,
+  useEpisodePoster = false,
 }) => {
   const [api] = useAtom(apiAtom);
 
-  const url = useMemo(
-    () =>
-      getPrimaryImageUrl({
-        api,
-        item,
-        quality: 90,
-        width: 176 * 2,
-      }),
-    [item]
-  );
+  /**
+   * Get horrizontal poster for movie and episode, with failover to primary.
+   */
+  const url = useMemo(() => {
+    if (!api) return;
+    if (item.Type === "Episode" && useEpisodePoster) {
+      return `${api?.basePath}/Items/${item.Id}/Images/Primary?fillHeight=389&quality=80`;
+    }
+    if (item.Type === "Episode") {
+      if (item.ParentBackdropItemId && item.ParentThumbImageTag)
+        return `${api?.basePath}/Items/${item.ParentBackdropItemId}/Images/Thumb?fillHeight=389&quality=80&tag=${item.ParentThumbImageTag}`;
+      else
+        return `${api?.basePath}/Items/${item.Id}/Images/Primary?fillHeight=389&quality=80`;
+    }
+    if (item.Type === "Movie") {
+      if (item.ImageTags?.["Thumb"])
+        return `${api?.basePath}/Items/${item.Id}/Images/Thumb?fillHeight=389&quality=80&tag=${item.ImageTags?.["Thumb"]}`;
+      else
+        return `${api?.basePath}/Items/${item.Id}/Images/Primary?fillHeight=389&quality=80`;
+    }
+  }, [item]);
 
   const [progress, setProgress] = useState(
     item.UserData?.PlayedPercentage || 0

components/CurrentlyPlayingBar.tsx

@@ -24,16 +24,16 @@ export const CurrentlyPlayingBar: React.FC = () => {
     currentlyPlaying,
     pauseVideo,
     playVideo,
-    setCurrentlyPlayingState,
     stopPlayback,
+    setVolume,
     setIsPlaying,
     isPlaying,
     videoRef,
+    presentFullscreenPlayer,
     onProgress,
   } = usePlayback();
 
   const [api] = useAtom(apiAtom);
-  const [user] = useAtom(userAtom);
 
   const aBottom = useSharedValue(0);
   const aPadding = useSharedValue(0);
@@ -63,6 +63,8 @@ export const CurrentlyPlayingBar: React.FC = () => {
     };
   });
 
+  const from = useMemo(() => segments[2], [segments]);
+
   useEffect(() => {
     if (segments.find((s) => s.includes("tabs"))) {
       // Tab screen - i.e. home
@@ -91,16 +93,40 @@ export const CurrentlyPlayingBar: React.FC = () => {
     [currentlyPlaying?.item]
   );
 
-  const backdropUrl = useMemo(
-    () =>
-      getBackdropUrl({
+  const poster = useMemo(() => {
+    if (currentlyPlaying?.item.Type === "Audio")
+      return `${api?.basePath}/Items/${currentlyPlaying.item.AlbumId}/Images/Primary?tag=${currentlyPlaying.item.AlbumPrimaryImageTag}&quality=90&maxHeight=200&maxWidth=200`;
+    else
+      return getBackdropUrl({
         api,
         item: currentlyPlaying?.item,
         quality: 70,
         width: 200,
-      }),
-    [currentlyPlaying?.item, api]
-  );
+      });
+  }, [currentlyPlaying?.item.Id, api]);
+
+  const videoSource = useMemo(() => {
+    if (!api || !currentlyPlaying || !poster) return null;
+    return {
+      uri: currentlyPlaying.url,
+      isNetwork: true,
+      startPosition,
+      headers: getAuthHeaders(api),
+      metadata: {
+        artist: currentlyPlaying.item?.AlbumArtist
+          ? currentlyPlaying.item?.AlbumArtist
+          : undefined,
+        title: currentlyPlaying.item?.Name || "Unknown",
+        description: currentlyPlaying.item?.Overview
+          ? currentlyPlaying.item?.Overview
+          : undefined,
+        imageUri: poster,
+        subtitle: currentlyPlaying.item?.Album
+          ? currentlyPlaying.item?.Album
+          : undefined,
+      },
+    };
+  }, [currentlyPlaying, startPosition, api, poster]);
 
   if (!api || !currentlyPlaying) return null;
 
@@ -136,7 +162,7 @@ export const CurrentlyPlayingBar: React.FC = () => {
                 }
                 `}
             >
-              {currentlyPlaying?.url && (
+              {videoSource && (
                 <Video
                   ref={videoRef}
                   allowsExternalPlayback
@@ -148,40 +174,37 @@ export const CurrentlyPlayingBar: React.FC = () => {
                   controls={false}
                   pictureInPicture={true}
                   poster={
-                    backdropUrl && currentlyPlaying.item?.Type === "Audio"
-                      ? backdropUrl
+                    poster && currentlyPlaying.item?.Type === "Audio"
+                      ? poster
                       : undefined
                   }
                   debug={{
                     enable: true,
                     thread: true,
                   }}
-                  paused={!isPlaying}
                   onProgress={(e) => onProgress(e)}
                   subtitleStyle={{
                     fontSize: 16,
                   }}
-                  source={{
-                    uri: currentlyPlaying.url,
-                    isNetwork: true,
-                    startPosition,
-                    headers: getAuthHeaders(api),
+                  source={videoSource}
+                  onRestoreUserInterfaceForPictureInPictureStop={() => {
+                    setTimeout(() => {
+                      presentFullscreenPlayer();
+                    }, 300);
                   }}
-                  onBuffer={(e) =>
-                    e.isBuffering ? console.log("Buffering...") : null
-                  }
                   onFullscreenPlayerDidDismiss={() => {}}
                   onFullscreenPlayerDidPresent={() => {}}
                   onPlaybackStateChanged={(e) => {
-                    if (e.isPlaying) {
-                      setIsPlaying(true);
-                    } else if (e.isSeeking) {
-                      return;
-                    } else {
-                      setIsPlaying(false);
+                    if (e.isPlaying === true) {
+                      playVideo(false);
+                    } else if (e.isPlaying === false) {
+                      pauseVideo(false);
                     }
                   }}
-                  progressUpdateInterval={2000}
+                  onVolumeChange={(e) => {
+                    setVolume(e.volume);
+                  }}
+                  progressUpdateInterval={4000}
                   onError={(e) => {
                     console.log(e);
                     writeToLog(
@@ -205,9 +228,17 @@ export const CurrentlyPlayingBar: React.FC = () => {
             <View className="shrink text-xs">
               <TouchableOpacity
                 onPress={() => {
-                  if (currentlyPlaying.item?.Type === "Audio")
-                    router.push(`/albums/${currentlyPlaying.item?.AlbumId}`);
-                  else router.push(`/items/${currentlyPlaying.item?.Id}`);
+                  if (currentlyPlaying.item?.Type === "Audio") {
+                    router.push(
+                      // @ts-ignore
+                      `/(auth)/(tabs)/${from}/albums/${currentlyPlaying.item.AlbumId}`
+                    );
+                  } else {
+                    router.push(
+                      // @ts-ignore
+                      `/(auth)/(tabs)/${from}/items/page?id=${currentlyPlaying.item?.Id}`
+                    );
+                  }
                 }}
               >
                 <Text>{currentlyPlaying.item?.Name}</Text>
@@ -216,7 +247,8 @@ export const CurrentlyPlayingBar: React.FC = () => {
                 <TouchableOpacity
                   onPress={() => {
                     router.push(
-                      `/(auth)/series/${currentlyPlaying.item.SeriesId}`
+                      // @ts-ignore
+                      `/(auth)/(tabs)/${from}/series/${currentlyPlaying.item.SeriesId}`
                     );
                   }}
                   className="text-xs opacity-50"

components/DownloadItem.tsx

@@ -2,8 +2,17 @@ import { useRemuxHlsToMp4 } from "@/hooks/useRemuxHlsToMp4";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { runningProcesses } from "@/utils/atoms/downloads";
 import { queueActions, queueAtom } from "@/utils/atoms/queue";
-import { getPlaybackInfo } from "@/utils/jellyfin/media/getPlaybackInfo";
+import { useSettings } from "@/utils/atoms/settings";
+import ios from "@/utils/profiles/ios";
+import native from "@/utils/profiles/native";
+import old from "@/utils/profiles/old";
 import Ionicons from "@expo/vector-icons/Ionicons";
+import {
+  BottomSheetBackdrop,
+  BottomSheetBackdropProps,
+  BottomSheetModal,
+  BottomSheetView,
+} from "@gorhom/bottom-sheet";
 import {
   BaseItemDto,
   MediaSourceInfo,
@@ -12,21 +21,18 @@ import AsyncStorage from "@react-native-async-storage/async-storage";
 import { useQuery } from "@tanstack/react-query";
 import { router } from "expo-router";
 import { useAtom } from "jotai";
-import {
-  TouchableOpacity,
-  TouchableOpacityProps,
-  View,
-  ViewProps,
-} from "react-native";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { Alert, TouchableOpacity, View, ViewProps } from "react-native";
+import { AudioTrackSelector } from "./AudioTrackSelector";
+import { Bitrate, BitrateSelector } from "./BitrateSelector";
+import { Button } from "./Button";
+import { Text } from "./common/Text";
 import { Loader } from "./Loader";
+import { MediaSourceSelector } from "./MediaSourceSelector";
 import ProgressCircle from "./ProgressCircle";
-import { DownloadQuality, useSettings } from "@/utils/atoms/settings";
-import { useCallback } from "react";
-import ios from "@/utils/profiles/ios";
-import native from "@/utils/profiles/native";
-import old from "@/utils/profiles/old";
+import { SubtitleTrackSelector } from "./SubtitleTrackSelector";
 
-interface DownloadProps extends TouchableOpacityProps {
+interface DownloadProps extends ViewProps {
   item: BaseItemDto;
 }
 
@@ -35,100 +41,135 @@ export const DownloadItem: React.FC<DownloadProps> = ({ item, ...props }) => {
   const [user] = useAtom(userAtom);
   const [process] = useAtom(runningProcesses);
   const [queue, setQueue] = useAtom(queueAtom);
-
   const [settings] = useSettings();
-
   const { startRemuxing } = useRemuxHlsToMp4(item);
 
-  const initiateDownload = useCallback(
-    async (qualitySetting: DownloadQuality) => {
-      if (!api || !user?.Id || !item.Id) {
-        throw new Error(
-          "DownloadItem ~ initiateDownload: No api or user or item"
-        );
-      }
+  const [selectedMediaSource, setSelectedMediaSource] =
+    useState<MediaSourceInfo | null>(null);
+  const [selectedAudioStream, setSelectedAudioStream] = useState<number>(-1);
+  const [selectedSubtitleStream, setSelectedSubtitleStream] =
+    useState<number>(0);
+  const [maxBitrate, setMaxBitrate] = useState<Bitrate>({
+    key: "Max",
+    value: undefined,
+  });
 
-      let deviceProfile: any = ios;
+  const userCanDownload = useMemo(() => {
+    return user?.Policy?.EnableContentDownloading;
+  }, [user]);
 
-      if (settings?.deviceProfile === "Native") {
-        deviceProfile = native;
-      } else if (settings?.deviceProfile === "Old") {
-        deviceProfile = old;
-      }
+  /**
+   * Bottom sheet
+   */
+  const bottomSheetModalRef = useRef<BottomSheetModal>(null);
 
-      let maxStreamingBitrate: number | undefined = undefined;
+  const handlePresentModalPress = useCallback(() => {
+    bottomSheetModalRef.current?.present();
+  }, []);
 
-      if (qualitySetting === "high") {
-        maxStreamingBitrate = 8000000;
-      } else if (qualitySetting === "low") {
-        maxStreamingBitrate = 2000000;
-      }
+  const handleSheetChanges = useCallback((index: number) => {
+    console.log("handleSheetChanges", index);
+  }, []);
 
-      const response = await api.axiosInstance.post(
-        `${api.basePath}/Items/${item.Id}/PlaybackInfo`,
-        {
-          DeviceProfile: deviceProfile,
-          UserId: user.Id,
-          MaxStreamingBitrate: maxStreamingBitrate,
-          StartTimeTicks: 0,
-          EnableTranscoding: maxStreamingBitrate ? true : undefined,
-          AutoOpenLiveStream: true,
-          MediaSourceId: item.Id,
-          AllowVideoStreamCopy: maxStreamingBitrate ? false : true,
-        },
-        {
-          headers: {
-            Authorization: `MediaBrowser DeviceId="${api.deviceInfo.id}", Token="${api.accessToken}"`,
-          },
-        }
+  const closeModal = useCallback(() => {
+    bottomSheetModalRef.current?.dismiss();
+  }, []);
+
+  /**
+   * Start download
+   */
+  const initiateDownload = useCallback(async () => {
+    if (!api || !user?.Id || !item.Id || !selectedMediaSource?.Id) {
+      throw new Error(
+        "DownloadItem ~ initiateDownload: No api or user or item"
       );
+    }
 
-      let url: string | undefined = undefined;
+    let deviceProfile: any = ios;
 
-      const mediaSource = response.data.MediaSources?.[0] as MediaSourceInfo;
+    if (settings?.deviceProfile === "Native") {
+      deviceProfile = native;
+    } else if (settings?.deviceProfile === "Old") {
+      deviceProfile = old;
+    }
 
-      if (!mediaSource) {
-        throw new Error("No media source");
+    const response = await api.axiosInstance.post(
+      `${api.basePath}/Items/${item.Id}/PlaybackInfo`,
+      {
+        DeviceProfile: deviceProfile,
+        UserId: user.Id,
+        MaxStreamingBitrate: maxBitrate.value,
+        StartTimeTicks: 0,
+        EnableTranscoding: maxBitrate.value ? true : undefined,
+        AutoOpenLiveStream: true,
+        AllowVideoStreamCopy: maxBitrate.value ? false : true,
+        MediaSourceId: selectedMediaSource?.Id,
+        AudioStreamIndex: selectedAudioStream,
+        SubtitleStreamIndex: selectedSubtitleStream,
+      },
+      {
+        headers: {
+          Authorization: `MediaBrowser DeviceId="${api.deviceInfo.id}", Token="${api.accessToken}"`,
+        },
       }
+    );
 
-      if (mediaSource.SupportsDirectPlay) {
-        if (item.MediaType === "Video") {
-          console.log("Using direct stream for video!");
-          url = `${api.basePath}/Videos/${item.Id}/stream.mp4?mediaSourceId=${item.Id}&static=true`;
-        } else if (item.MediaType === "Audio") {
-          console.log("Using direct stream for audio!");
-          const searchParams = new URLSearchParams({
-            UserId: user.Id,
-            DeviceId: api.deviceInfo.id,
-            MaxStreamingBitrate: "140000000",
-            Container:
-              "opus,webm|opus,mp3,aac,m4a|aac,m4b|aac,flac,webma,webm|webma,wav,ogg",
-            TranscodingContainer: "mp4",
-            TranscodingProtocol: "hls",
-            AudioCodec: "aac",
-            api_key: api.accessToken,
-            StartTimeTicks: "0",
-            EnableRedirection: "true",
-            EnableRemoteMedia: "false",
-          });
-          url = `${api.basePath}/Audio/${
-            item.Id
-          }/universal?${searchParams.toString()}`;
-        }
+    let url: string | undefined = undefined;
+
+    const mediaSource: MediaSourceInfo = response.data.MediaSources.find(
+      (source: MediaSourceInfo) => source.Id === selectedMediaSource?.Id
+    );
+
+    if (!mediaSource) {
+      throw new Error("No media source");
+    }
+
+    if (mediaSource.SupportsDirectPlay) {
+      if (item.MediaType === "Video") {
+        console.log("Using direct stream for video!");
+        url = `${api.basePath}/Videos/${item.Id}/stream.mp4?mediaSourceId=${item.Id}&static=true&mediaSourceId=${mediaSource.Id}&deviceId=${api.deviceInfo.id}&api_key=${api.accessToken}`;
+      } else if (item.MediaType === "Audio") {
+        console.log("Using direct stream for audio!");
+        const searchParams = new URLSearchParams({
+          UserId: user.Id,
+          DeviceId: api.deviceInfo.id,
+          MaxStreamingBitrate: "140000000",
+          Container:
+            "opus,webm|opus,mp3,aac,m4a|aac,m4b|aac,flac,webma,webm|webma,wav,ogg",
+          TranscodingContainer: "mp4",
+          TranscodingProtocol: "hls",
+          AudioCodec: "aac",
+          api_key: api.accessToken,
+          StartTimeTicks: "0",
+          EnableRedirection: "true",
+          EnableRemoteMedia: "false",
+        });
+        url = `${api.basePath}/Audio/${
+          item.Id
+        }/universal?${searchParams.toString()}`;
       }
+    } else if (mediaSource.TranscodingUrl) {
+      console.log("Using transcoded stream!");
+      url = `${api.basePath}${mediaSource.TranscodingUrl}`;
+    }
 
-      if (mediaSource.TranscodingUrl) {
-        console.log("Using transcoded stream!");
-        url = `${api.basePath}${mediaSource.TranscodingUrl}`;
-      } else {
-        throw new Error("No transcoding url");
-      }
+    if (!url) throw new Error("No url");
 
-      return await startRemuxing(url);
-    },
-    [api, item, startRemuxing, user?.Id]
-  );
+    return await startRemuxing(url);
+  }, [
+    api,
+    item,
+    startRemuxing,
+    user?.Id,
+    selectedMediaSource,
+    selectedAudioStream,
+    selectedSubtitleStream,
+    maxBitrate,
+  ]);
 
+  /**
+   * Check if item is downloaded
+   */
   const { data: downloaded, isFetching } = useQuery({
     queryKey: ["downloaded", item.Id],
     queryFn: async () => {
@@ -143,23 +184,30 @@ export const DownloadItem: React.FC<DownloadProps> = ({ item, ...props }) => {
     enabled: !!item.Id,
   });
 
-  if (isFetching) {
-    return (
-      <View className="rounded h-10 aspect-square flex items-center justify-center">
-        <Loader />
-      </View>
-    );
-  }
-
-  if (process && process?.item.Id === item.Id) {
-    return (
-      <TouchableOpacity
-        onPress={() => {
-          router.push("/downloads");
-        }}
+  const renderBackdrop = useCallback(
+    (props: BottomSheetBackdropProps) => (
+      <BottomSheetBackdrop
         {...props}
-      >
-        <View className="rounded h-10 aspect-square flex items-center justify-center">
+        disappearsOnIndex={-1}
+        appearsOnIndex={0}
+      />
+    ),
+    []
+  );
+
+  return (
+    <View
+      className="bg-neutral-800/80 rounded-full h-10 w-10 flex items-center justify-center"
+      {...props}
+    >
+      {isFetching ? (
+        <Loader />
+      ) : process && process?.item.Id === item.Id ? (
+        <TouchableOpacity
+          onPress={() => {
+            router.push("/downloads");
+          }}
+        >
           {process.progress === 0 ? (
             <Loader />
           ) : (
@@ -173,61 +221,97 @@ export const DownloadItem: React.FC<DownloadProps> = ({ item, ...props }) => {
               />
             </View>
           )}
-        </View>
-      </TouchableOpacity>
-    );
-  }
-
-  if (queue.some((i) => i.id === item.Id)) {
-    return (
-      <TouchableOpacity
-        onPress={() => {
-          router.push("/downloads");
-        }}
-        {...props}
-      >
-        <View className="rounded h-10 aspect-square flex items-center justify-center opacity-50">
+        </TouchableOpacity>
+      ) : queue.some((i) => i.id === item.Id) ? (
+        <TouchableOpacity
+          onPress={() => {
+            router.push("/downloads");
+          }}
+        >
           <Ionicons name="hourglass" size={24} color="white" />
-        </View>
-      </TouchableOpacity>
-    );
-  }
-
-  if (downloaded) {
-    return (
-      <TouchableOpacity
-        onPress={() => {
-          router.push("/downloads");
-        }}
-        {...props}
-      >
-        <View className="rounded h-10 aspect-square flex items-center justify-center">
+        </TouchableOpacity>
+      ) : downloaded ? (
+        <TouchableOpacity
+          onPress={() => {
+            router.push("/downloads");
+          }}
+        >
           <Ionicons name="cloud-download" size={26} color="#9333ea" />
-        </View>
-      </TouchableOpacity>
-    );
-  } else {
-    return (
-      <TouchableOpacity
-        onPress={() => {
-          queueActions.enqueue(queue, setQueue, {
-            id: item.Id!,
-            execute: async () => {
-              // await startRemuxing(playbackUrl);
-              if (!settings?.downloadQuality?.value) {
-                throw new Error("No download quality selected");
-              }
-              await initiateDownload(settings?.downloadQuality?.value);
-            },
-            item,
-          });
+        </TouchableOpacity>
+      ) : (
+        <TouchableOpacity onPress={handlePresentModalPress}>
+          <Ionicons name="cloud-download-outline" size={24} color="white" />
+        </TouchableOpacity>
+      )}
+      <BottomSheetModal
+        ref={bottomSheetModalRef}
+        enableDynamicSizing
+        handleIndicatorStyle={{
+          backgroundColor: "white",
         }}
-        {...props}
+        backgroundStyle={{
+          backgroundColor: "#171717",
+        }}
+        onChange={handleSheetChanges}
+        backdropComponent={renderBackdrop}
       >
-        <View className="rounded h-10 aspect-square flex items-center justify-center">
-          <Ionicons name="cloud-download-outline" size={26} color="white" />
-        </View>
-      </TouchableOpacity>
-    );
-  }
+        <BottomSheetView>
+          <View className="flex flex-col space-y-4 px-4 pb-8 pt-2">
+            <Text className="font-bold text-2xl text-neutral-10">
+              Download options
+            </Text>
+            <View className="flex flex-col space-y-2 w-full items-start">
+              <BitrateSelector
+                inverted
+                onChange={(val) => setMaxBitrate(val)}
+                selected={maxBitrate}
+              />
+              <MediaSourceSelector
+                item={item}
+                onChange={setSelectedMediaSource}
+                selected={selectedMediaSource}
+              />
+              {selectedMediaSource && (
+                <View className="flex flex-col space-y-2">
+                  <AudioTrackSelector
+                    source={selectedMediaSource}
+                    onChange={setSelectedAudioStream}
+                    selected={selectedAudioStream}
+                  />
+                  <SubtitleTrackSelector
+                    source={selectedMediaSource}
+                    onChange={setSelectedSubtitleStream}
+                    selected={selectedSubtitleStream}
+                  />
+                </View>
+              )}
+            </View>
+            <Button
+              className="mt-auto"
+              onPress={() => {
+                if (userCanDownload === true) {
+                  closeModal();
+                  queueActions.enqueue(queue, setQueue, {
+                    id: item.Id!,
+                    execute: async () => {
+                      await initiateDownload();
+                    },
+                    item,
+                  });
+                } else {
+                  Alert.alert(
+                    "Disabled",
+                    "This user is not allowed to download files."
+                  );
+                }
+              }}
+              color="purple"
+            >
+              Download
+            </Button>
+          </View>
+        </BottomSheetView>
+      </BottomSheetModal>
+    </View>
+  );
 };

components/ItemContent.tsx

@@ -0,0 +1,373 @@
+import { AudioTrackSelector } from "@/components/AudioTrackSelector";
+import { Bitrate, BitrateSelector } from "@/components/BitrateSelector";
+import { DownloadItem } from "@/components/DownloadItem";
+import { OverviewText } from "@/components/OverviewText";
+import { ParallaxScrollView } from "@/components/ParallaxPage";
+import { PlayButton } from "@/components/PlayButton";
+import { PlayedStatus } from "@/components/PlayedStatus";
+import { SimilarItems } from "@/components/SimilarItems";
+import { SubtitleTrackSelector } from "@/components/SubtitleTrackSelector";
+import { ItemImage } from "@/components/common/ItemImage";
+import { CastAndCrew } from "@/components/series/CastAndCrew";
+import { CurrentSeries } from "@/components/series/CurrentSeries";
+import { SeasonEpisodesCarousel } from "@/components/series/SeasonEpisodesCarousel";
+import { useImageColors } from "@/hooks/useImageColors";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { useSettings } from "@/utils/atoms/settings";
+import { getItemImage } from "@/utils/getItemImage";
+import { getLogoImageUrlById } from "@/utils/jellyfin/image/getLogoImageUrlById";
+import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
+import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
+import { chromecastProfile } from "@/utils/profiles/chromecast";
+import ios from "@/utils/profiles/ios";
+import native from "@/utils/profiles/native";
+import old from "@/utils/profiles/old";
+import { MediaSourceInfo } from "@jellyfin/sdk/lib/generated-client/models";
+import { getMediaInfoApi } from "@jellyfin/sdk/lib/utils/api";
+import { useQuery } from "@tanstack/react-query";
+import { Image } from "expo-image";
+import { useNavigation } from "expo-router";
+import * as ScreenOrientation from "expo-screen-orientation";
+import { useAtom } from "jotai";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { View } from "react-native";
+import { useCastDevice } from "react-native-google-cast";
+import Animated, {
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Chromecast } from "./Chromecast";
+import { ItemHeader } from "./ItemHeader";
+import { Loader } from "./Loader";
+import { MediaSourceSelector } from "./MediaSourceSelector";
+
+export const ItemContent: React.FC<{ id: string }> = React.memo(({ id }) => {
+  const [api] = useAtom(apiAtom);
+  const [user] = useAtom(userAtom);
+
+  const opacity = useSharedValue(0);
+  const castDevice = useCastDevice();
+  const navigation = useNavigation();
+  const [settings] = useSettings();
+  const [selectedMediaSource, setSelectedMediaSource] =
+    useState<MediaSourceInfo | null>(null);
+  const [selectedAudioStream, setSelectedAudioStream] = useState<number>(-1);
+  const [selectedSubtitleStream, setSelectedSubtitleStream] =
+    useState<number>(0);
+  const [maxBitrate, setMaxBitrate] = useState<Bitrate>({
+    key: "Max",
+    value: undefined,
+  });
+
+  const [loadingLogo, setLoadingLogo] = useState(true);
+
+  const [orientation, setOrientation] = useState(
+    ScreenOrientation.Orientation.PORTRAIT_UP
+  );
+
+  useEffect(() => {
+    const subscription = ScreenOrientation.addOrientationChangeListener(
+      (event) => {
+        setOrientation(event.orientationInfo.orientation);
+      }
+    );
+
+    ScreenOrientation.getOrientationAsync().then((initialOrientation) => {
+      setOrientation(initialOrientation);
+    });
+
+    return () => {
+      ScreenOrientation.removeOrientationChangeListener(subscription);
+    };
+  }, []);
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      opacity: opacity.value,
+    };
+  });
+
+  const fadeIn = () => {
+    opacity.value = withTiming(1, { duration: 300 });
+  };
+
+  const fadeOut = (callback: any) => {
+    opacity.value = withTiming(0, { duration: 300 }, (finished) => {
+      if (finished) {
+        runOnJS(callback)();
+      }
+    });
+  };
+
+  const headerHeightRef = useRef(400);
+
+  const {
+    data: item,
+    isLoading,
+    isFetching,
+  } = useQuery({
+    queryKey: ["item", id],
+    queryFn: async () => {
+      const res = await getUserItemData({
+        api,
+        userId: user?.Id,
+        itemId: id,
+      });
+
+      return res;
+    },
+    enabled: !!id && !!api,
+    staleTime: 60 * 1000 * 5,
+  });
+
+  const [localItem, setLocalItem] = useState(item);
+
+  useEffect(() => {
+    if (item) {
+      if (localItem) {
+        // Fade out current item
+        fadeOut(() => {
+          // Update local item after fade out
+          setLocalItem(item);
+          // Then fade in
+          fadeIn();
+        });
+      } else {
+        // If there's no current item, just set and fade in
+        setLocalItem(item);
+        fadeIn();
+      }
+    } else {
+      // If item is null, fade out and clear local item
+      fadeOut(() => setLocalItem(null));
+    }
+  }, [item]);
+
+  useEffect(() => {
+    navigation.setOptions({
+      headerRight: () =>
+        item && (
+          <View className="flex flex-row items-center space-x-2">
+            <Chromecast background="blur" width={22} height={22} />
+            <DownloadItem item={item} />
+            <PlayedStatus item={item} />
+          </View>
+        ),
+    });
+  }, [item]);
+
+  useEffect(() => {
+    if (orientation !== ScreenOrientation.Orientation.PORTRAIT_UP) {
+      headerHeightRef.current = 230;
+      return;
+    }
+    if (item?.Type === "Episode") headerHeightRef.current = 400;
+    else if (item?.Type === "Movie") headerHeightRef.current = 500;
+    else headerHeightRef.current = 400;
+  }, [item]);
+
+  const { data: sessionData } = useQuery({
+    queryKey: ["sessionData", item?.Id],
+    queryFn: async () => {
+      if (!api || !user?.Id || !item?.Id) return null;
+      const playbackData = await getMediaInfoApi(api!).getPlaybackInfo({
+        itemId: item?.Id,
+        userId: user?.Id,
+      });
+
+      return playbackData.data;
+    },
+    enabled: !!item?.Id && !!api && !!user?.Id,
+    staleTime: 0,
+  });
+
+  const { data: playbackUrl } = useQuery({
+    queryKey: [
+      "playbackUrl",
+      item?.Id,
+      maxBitrate,
+      castDevice,
+      selectedMediaSource,
+      selectedAudioStream,
+      selectedSubtitleStream,
+      settings,
+    ],
+    queryFn: async () => {
+      if (!api || !user?.Id || !sessionData || !selectedMediaSource?.Id)
+        return null;
+
+      let deviceProfile: any = ios;
+
+      if (castDevice?.deviceId) {
+        deviceProfile = chromecastProfile;
+      } else if (settings?.deviceProfile === "Native") {
+        deviceProfile = native;
+      } else if (settings?.deviceProfile === "Old") {
+        deviceProfile = old;
+      }
+
+      const url = await getStreamUrl({
+        api,
+        userId: user.Id,
+        item,
+        startTimeTicks: item?.UserData?.PlaybackPositionTicks || 0,
+        maxStreamingBitrate: maxBitrate.value,
+        sessionData,
+        deviceProfile,
+        audioStreamIndex: selectedAudioStream,
+        subtitleStreamIndex: selectedSubtitleStream,
+        forceDirectPlay: settings?.forceDirectPlay,
+        height: maxBitrate.height,
+        mediaSourceId: selectedMediaSource.Id,
+      });
+
+      console.info("Stream URL:", url);
+
+      return url;
+    },
+    enabled: !!sessionData && !!api && !!user?.Id && !!item?.Id,
+    staleTime: 0,
+  });
+
+  const logoUrl = useMemo(() => getLogoImageUrlById({ api, item }), [item]);
+  const themeImageColorSource = useMemo(() => {
+    if (!api || !item) return;
+    return getItemImage({
+      item,
+      api,
+      variant: "Primary",
+      quality: 80,
+      width: 300,
+    });
+  }, [api, item]);
+
+  useImageColors(themeImageColorSource?.uri);
+
+  const loading = useMemo(() => {
+    return Boolean(isLoading || isFetching || (logoUrl && loadingLogo));
+  }, [isLoading, isFetching, loadingLogo, logoUrl]);
+
+  const insets = useSafeAreaInsets();
+
+  return (
+    <View
+      className="flex-1 relative"
+      style={{
+        paddingLeft: insets.left,
+        paddingRight: insets.right,
+      }}
+    >
+      {loading && (
+        <View className="absolute top-0 left-0 right-0 bottom-0 w-full h-full flex flex-col justify-center items-center z-50">
+          <Loader />
+        </View>
+      )}
+      <ParallaxScrollView
+        className={`flex-1 ${loading ? "opacity-0" : "opacity-100"}`}
+        headerHeight={headerHeightRef.current}
+        headerImage={
+          <>
+            <Animated.View style={[animatedStyle, { flex: 1 }]}>
+              {localItem && (
+                <ItemImage
+                  useThemeColor
+                  variant={
+                    localItem.Type === "Movie" && logoUrl
+                      ? "Backdrop"
+                      : "Primary"
+                  }
+                  item={localItem}
+                  style={{
+                    width: "100%",
+                    height: "100%",
+                  }}
+                />
+              )}
+            </Animated.View>
+          </>
+        }
+        logo={
+          <>
+            {logoUrl ? (
+              <Image
+                source={{
+                  uri: logoUrl,
+                }}
+                style={{
+                  height: 130,
+                  width: "100%",
+                  resizeMode: "contain",
+                }}
+                onLoad={() => setLoadingLogo(false)}
+                onError={() => setLoadingLogo(false)}
+              />
+            ) : null}
+          </>
+        }
+      >
+        <View className="flex flex-col bg-transparent shrink">
+          <View className="flex flex-col px-4 w-full space-y-2 pt-2 mb-2 shrink">
+            <Animated.View style={[animatedStyle, { flex: 1 }]}>
+              <ItemHeader item={localItem} className="mb-4" />
+              {localItem ? (
+                <View className="flex flex-row items-center justify-start w-full h-16">
+                  <BitrateSelector
+                    className="mr-1"
+                    onChange={(val) => setMaxBitrate(val)}
+                    selected={maxBitrate}
+                  />
+                  <MediaSourceSelector
+                    className="mr-1"
+                    item={localItem}
+                    onChange={setSelectedMediaSource}
+                    selected={selectedMediaSource}
+                  />
+                  {selectedMediaSource && (
+                    <>
+                      <AudioTrackSelector
+                        className="mr-1"
+                        source={selectedMediaSource}
+                        onChange={setSelectedAudioStream}
+                        selected={selectedAudioStream}
+                      />
+                      <SubtitleTrackSelector
+                        source={selectedMediaSource}
+                        onChange={setSelectedSubtitleStream}
+                        selected={selectedSubtitleStream}
+                      />
+                    </>
+                  )}
+                </View>
+              ) : (
+                <View className="h-16">
+                  <View className="bg-neutral-900 h-4 w-2/4 rounded-md mb-1"></View>
+                  <View className="bg-neutral-900 h-10 w-3/4 rounded-lg"></View>
+                </View>
+              )}
+            </Animated.View>
+
+            <PlayButton item={item} url={playbackUrl} className="grow" />
+          </View>
+
+          {item?.Type === "Episode" && (
+            <SeasonEpisodesCarousel item={item} loading={loading} />
+          )}
+
+          <OverviewText text={item?.Overview} className="px-4 mb-4" />
+
+          <CastAndCrew item={item} className="mb-4" loading={loading} />
+
+          {item?.Type === "Episode" && (
+            <CurrentSeries item={item} className="mb-4" />
+          )}
+          <SimilarItems itemId={item?.Id} />
+
+          <View className="h-16"></View>
+        </View>
+      </ParallaxScrollView>
+    </View>
+  );
+});

components/ItemHeader.tsx

@@ -0,0 +1,38 @@
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { View, ViewProps } from "react-native";
+import { MoviesTitleHeader } from "./movies/MoviesTitleHeader";
+import { Ratings } from "./Ratings";
+import { EpisodeTitleHeader } from "./series/EpisodeTitleHeader";
+
+interface Props extends ViewProps {
+  item?: BaseItemDto | null;
+}
+
+export const ItemHeader: React.FC<Props> = ({ item, ...props }) => {
+  if (!item)
+    return (
+      <View
+        className="flex flex-col space-y-1.5 w-full items-start h-24"
+        {...props}
+      >
+        <View className="w-1/3 h-6 bg-neutral-900 rounded" />
+        <View className="w-2/3 h-8 bg-neutral-900 rounded" />
+        <View className="w-2/3 h-4 bg-neutral-900 rounded" />
+        <View className="w-1/4 h-4 bg-neutral-900 rounded" />
+      </View>
+    );
+
+  return (
+    <View
+      style={{
+        minHeight: 96,
+      }}
+      className="flex flex-col"
+      {...props}
+    >
+      <Ratings item={item} className="mb-2" />
+      {item.Type === "Episode" && <EpisodeTitleHeader item={item} />}
+      {item.Type === "Movie" && <MoviesTitleHeader item={item} />}
+    </View>
+  );
+};

components/MediaSourceSelector.tsx

@@ -0,0 +1,89 @@
+import { tc } from "@/utils/textTools";
+import {
+  BaseItemDto,
+  MediaSourceInfo,
+} from "@jellyfin/sdk/lib/generated-client/models";
+import { useEffect, useMemo } from "react";
+import { TouchableOpacity, View } from "react-native";
+import * as DropdownMenu from "zeego/dropdown-menu";
+import { Text } from "./common/Text";
+
+interface Props extends React.ComponentProps<typeof View> {
+  item: BaseItemDto;
+  onChange: (value: MediaSourceInfo) => void;
+  selected: MediaSourceInfo | null;
+}
+
+export const MediaSourceSelector: React.FC<Props> = ({
+  item,
+  onChange,
+  selected,
+  ...props
+}) => {
+  const mediaSources = useMemo(() => {
+    return item.MediaSources;
+  }, [item]);
+
+  const selectedMediaSource = useMemo(
+    () =>
+      mediaSources
+        ?.find((x) => x.Id === selected?.Id)
+        ?.MediaStreams?.find((x) => x.Type === "Video")?.DisplayTitle || "",
+    [mediaSources, selected]
+  );
+
+  useEffect(() => {
+    if (mediaSources?.length) onChange(mediaSources[0]);
+  }, [mediaSources]);
+
+  const name = (name?: string | null) => {
+    if (name && name.length > 40)
+      return (
+        name.substring(0, 20) + " [...] " + name.substring(name.length - 20)
+      );
+    return name;
+  };
+
+  return (
+    <View
+      className="flex shrink"
+      style={{
+        minWidth: 50,
+      }}
+    >
+      <DropdownMenu.Root>
+        <DropdownMenu.Trigger>
+          <View className="flex flex-col" {...props}>
+            <Text className="opacity-50 mb-1 text-xs">Video</Text>
+            <TouchableOpacity className="bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center ">
+              <Text numberOfLines={1}>{selectedMediaSource}</Text>
+            </TouchableOpacity>
+          </View>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content
+          loop={true}
+          side="bottom"
+          align="start"
+          alignOffset={0}
+          avoidCollisions={true}
+          collisionPadding={8}
+          sideOffset={8}
+        >
+          <DropdownMenu.Label>Media sources</DropdownMenu.Label>
+          {mediaSources?.map((source, idx: number) => (
+            <DropdownMenu.Item
+              key={idx.toString()}
+              onSelect={() => {
+                onChange(source);
+              }}
+            >
+              <DropdownMenu.ItemTitle>
+                {name(source.Name)}
+              </DropdownMenu.ItemTitle>
+            </DropdownMenu.Item>
+          ))}
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
+    </View>
+  );
+};

components/OverviewText.tsx

@@ -5,34 +5,37 @@ import { useState } from "react";
 
 interface Props extends ViewProps {
   text?: string | null;
+  characterLimit?: number;
 }
 
-const LIMIT = 140;
-
-export const OverviewText: React.FC<Props> = ({ text, ...props }) => {
-  const [limit, setLimit] = useState(LIMIT);
+export const OverviewText: React.FC<Props> = ({
+  text,
+  characterLimit = 100,
+  ...props
+}) => {
+  const [limit, setLimit] = useState(characterLimit);
 
   if (!text) return null;
 
-  if (text.length > LIMIT)
-    return (
+  return (
+    <View className="flex flex-col" {...props}>
+      <Text className="text-xl font-bold mb-2">Overview</Text>
       <TouchableOpacity
         onPress={() =>
-          setLimit((prev) => (prev === LIMIT ? text.length : LIMIT))
+          setLimit((prev) =>
+            prev === characterLimit ? text.length : characterLimit
+          )
         }
       >
-        <View {...props} className="">
+        <View>
           <Text>{tc(text, limit)}</Text>
-          <Text className="text-purple-600 mt-1">
-            {limit === LIMIT ? "Show more" : "Show less"}
-          </Text>
+          {text.length > characterLimit && (
+            <Text className="text-purple-600 mt-1">
+              {limit === characterLimit ? "Show more" : "Show less"}
+            </Text>
+          )}
         </View>
       </TouchableOpacity>
-    );
-
-  return (
-    <View {...props}>
-      <Text>{text}</Text>
     </View>
   );
 };

components/ParallaxPage.tsx

@@ -1,27 +1,27 @@
-import { Ionicons } from "@expo/vector-icons";
-import { router } from "expo-router";
-import type { PropsWithChildren, ReactElement } from "react";
-import { TouchableOpacity, View } from "react-native";
+import { LinearGradient } from "expo-linear-gradient";
+import { type PropsWithChildren, type ReactElement } from "react";
+import { View, ViewProps } from "react-native";
 import Animated, {
   interpolate,
   useAnimatedRef,
   useAnimatedStyle,
   useScrollViewOffset,
 } from "react-native-reanimated";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { Chromecast } from "./Chromecast";
 
-const HEADER_HEIGHT = 400;
-
-type Props = PropsWithChildren<{
+interface Props extends ViewProps {
   headerImage: ReactElement;
   logo?: ReactElement;
-}>;
+  episodePoster?: ReactElement;
+  headerHeight?: number;
+}
 
-export const ParallaxScrollView: React.FC<Props> = ({
+export const ParallaxScrollView: React.FC<PropsWithChildren<Props>> = ({
   children,
   headerImage,
+  episodePoster,
+  headerHeight = 400,
   logo,
+  ...props
 }: Props) => {
   const scrollRef = useAnimatedRef<Animated.ScrollView>();
   const scrollOffset = useScrollViewOffset(scrollRef);
@@ -32,25 +32,23 @@ export const ParallaxScrollView: React.FC<Props> = ({
         {
           translateY: interpolate(
             scrollOffset.value,
-            [-HEADER_HEIGHT, 0, HEADER_HEIGHT],
-            [-HEADER_HEIGHT / 2, 0, HEADER_HEIGHT * 0.75],
+            [-headerHeight, 0, headerHeight],
+            [-headerHeight / 2, 0, headerHeight * 0.75]
           ),
         },
         {
           scale: interpolate(
             scrollOffset.value,
-            [-HEADER_HEIGHT, 0, HEADER_HEIGHT],
-            [2, 1, 1],
+            [-headerHeight, 0, headerHeight],
+            [2, 1, 1]
           ),
         },
       ],
     };
   });
 
-  const inset = useSafeAreaInsets();
-
   return (
-    <View className="flex-1">
+    <View className="flex-1" {...props}>
       <Animated.ScrollView
         style={{
           position: "relative",
@@ -58,32 +56,14 @@ export const ParallaxScrollView: React.FC<Props> = ({
         ref={scrollRef}
         scrollEventThrottle={16}
       >
-        <TouchableOpacity
-          onPress={() => router.back()}
-          className="absolute left-4 z-50 bg-black rounded-full p-2 border border-neutral-900"
-          style={{
-            top: inset.top + 17,
-          }}
-        >
-          <Ionicons
-            className="drop-shadow-2xl"
-            name="arrow-back"
-            size={24}
-            color="#077DF2"
-          />
-        </TouchableOpacity>
-
-        <View
-          className="absolute right-4 z-50 bg-black rounded-full p-0.5"
-          style={{
-            top: inset.top + 17,
-          }}
-        >
-          <Chromecast width={22} height={22} />
-        </View>
-
         {logo && (
-          <View className="absolute top-[250px] h-[130px] left-0 w-full z-40 px-4 flex justify-center items-center">
+          <View
+            style={{
+              top: headerHeight - 200,
+              height: 130,
+            }}
+            className="absolute left-0 w-full z-40 px-4 flex justify-center items-center"
+          >
             {logo}
           </View>
         )}
@@ -91,7 +71,7 @@ export const ParallaxScrollView: React.FC<Props> = ({
         <Animated.View
           style={[
             {
-              height: HEADER_HEIGHT,
+              height: headerHeight,
               backgroundColor: "black",
             },
             headerAnimatedStyle,
@@ -99,7 +79,35 @@ export const ParallaxScrollView: React.FC<Props> = ({
         >
           {headerImage}
         </Animated.View>
-        <View className="flex-1 overflow-hidden bg-black pb-24">
+
+        <View
+          style={{
+            top: -50,
+          }}
+          className="relative flex-1  bg-transparent pb-24"
+        >
+          <LinearGradient
+            // Background Linear Gradient
+            colors={["transparent", "rgba(0,0,0,1)"]}
+            style={{
+              position: "absolute",
+              left: 0,
+              right: 0,
+              top: -150,
+              height: 200,
+            }}
+          />
+          <View
+            // Background Linear Gradient
+            style={{
+              position: "absolute",
+              left: 0,
+              right: 0,
+              top: 50,
+              height: "100%",
+              backgroundColor: "black",
+            }}
+          />
           {children}
         </View>
       </Animated.ScrollView>

components/PlayButton.tsx

@@ -1,60 +1,156 @@
 import { usePlayback } from "@/providers/PlaybackProvider";
+import { itemThemeColorAtom } from "@/utils/atoms/primaryColor";
 import { runtimeTicksToMinutes } from "@/utils/time";
 import { useActionSheet } from "@expo/react-native-action-sheet";
 import { Feather, Ionicons } from "@expo/vector-icons";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { View } from "react-native";
+import { useAtom } from "jotai";
+import { useEffect, useMemo } from "react";
+import { TouchableOpacity, View } from "react-native";
 import CastContext, {
   PlayServicesState,
+  useMediaStatus,
   useRemoteMediaClient,
 } from "react-native-google-cast";
+import Animated, {
+  Easing,
+  interpolate,
+  interpolateColor,
+  useAnimatedReaction,
+  useAnimatedStyle,
+  useDerivedValue,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
 import { Button } from "./Button";
+import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
+import { apiAtom } from "@/providers/JellyfinProvider";
+import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
+import { getParentBackdropImageUrl } from "@/utils/jellyfin/image/getParentBackdropImageUrl";
 
 interface Props extends React.ComponentProps<typeof Button> {
   item?: BaseItemDto | null;
   url?: string | null;
 }
 
+const ANIMATION_DURATION = 500;
+const MIN_PLAYBACK_WIDTH = 15;
+
 export const PlayButton: React.FC<Props> = ({ item, url, ...props }) => {
   const { showActionSheetWithOptions } = useActionSheet();
   const client = useRemoteMediaClient();
   const { setCurrentlyPlayingState } = usePlayback();
+  const mediaStatus = useMediaStatus();
+
+  const [colorAtom] = useAtom(itemThemeColorAtom);
+  const [api] = useAtom(apiAtom);
+
+  const memoizedItem = useMemo(() => item, [item?.Id]); // Memoize the item
+  const memoizedColor = useMemo(() => colorAtom, [colorAtom]); // Memoize the color
+
+  const startWidth = useSharedValue(0);
+  const targetWidth = useSharedValue(0);
+  const endColor = useSharedValue(memoizedColor);
+  const startColor = useSharedValue(memoizedColor);
+  const widthProgress = useSharedValue(0);
+  const colorChangeProgress = useSharedValue(0);
 
   const onPress = async () => {
     if (!url || !item) return;
-
     if (!client) {
       setCurrentlyPlayingState({ item, url });
       return;
     }
-
     const options = ["Chromecast", "Device", "Cancel"];
     const cancelButtonIndex = 2;
-
     showActionSheetWithOptions(
       {
         options,
         cancelButtonIndex,
       },
       async (selectedIndex: number | undefined) => {
+        if (!api) return;
+        const currentTitle = mediaStatus?.mediaInfo?.metadata?.title;
+        const isOpeningCurrentlyPlayingMedia =
+          currentTitle && currentTitle === item?.Name;
+
         switch (selectedIndex) {
           case 0:
             await CastContext.getPlayServicesState().then((state) => {
               if (state && state !== PlayServicesState.SUCCESS)
                 CastContext.showPlayServicesErrorDialog(state);
               else {
-                client.loadMedia({
-                  mediaInfo: {
-                    contentUrl: url,
-                    contentType: "video/mp4",
-                    metadata: {
-                      type: item.Type === "Episode" ? "tvShow" : "movie",
-                      title: item.Name || "",
-                      subtitle: item.Overview || "",
+                // If we're opening a currently playing item, don't restart the media.
+                // Instead just open controls.
+                if (isOpeningCurrentlyPlayingMedia) {
+                  CastContext.showExpandedControls();
+                  return;
+                }
+                client
+                  .loadMedia({
+                    mediaInfo: {
+                      contentUrl: url,
+                      contentType: "video/mp4",
+                      metadata:
+                        item.Type === "Episode"
+                          ? {
+                              type: "tvShow",
+                              title: item.Name || "",
+                              episodeNumber: item.IndexNumber || 0,
+                              seasonNumber: item.ParentIndexNumber || 0,
+                              seriesTitle: item.SeriesName || "",
+                              images: [
+                                {
+                                  url: getParentBackdropImageUrl({
+                                    api,
+                                    item,
+                                    quality: 90,
+                                    width: 2000,
+                                  })!,
+                                },
+                              ],
+                            }
+                          : item.Type === "Movie"
+                          ? {
+                              type: "movie",
+                              title: item.Name || "",
+                              subtitle: item.Overview || "",
+                              images: [
+                                {
+                                  url: getPrimaryImageUrl({
+                                    api,
+                                    item,
+                                    quality: 90,
+                                    width: 2000,
+                                  })!,
+                                },
+                              ],
+                            }
+                          : {
+                              type: "generic",
+                              title: item.Name || "",
+                              subtitle: item.Overview || "",
+                              images: [
+                                {
+                                  url: getPrimaryImageUrl({
+                                    api,
+                                    item,
+                                    quality: 90,
+                                    width: 2000,
+                                  })!,
+                                },
+                              ],
+                            },
                     },
-                  },
-                  startTime: 0,
-                });
+                    startTime: 0,
+                  })
+                  .then(() => {
+                    // state is already set when reopening current media, so skip it here.
+                    if (isOpeningCurrentlyPlayingMedia) {
+                      return;
+                    }
+                    CastContext.showExpandedControls();
+                  });
               }
             });
             break;
@@ -68,18 +164,141 @@ export const PlayButton: React.FC<Props> = ({ item, url, ...props }) => {
     );
   };
 
+  const derivedTargetWidth = useDerivedValue(() => {
+    if (!memoizedItem || !memoizedItem.RunTimeTicks) return 0;
+    const userData = memoizedItem.UserData;
+    if (userData && userData.PlaybackPositionTicks) {
+      return userData.PlaybackPositionTicks > 0
+        ? Math.max(
+            (userData.PlaybackPositionTicks / memoizedItem.RunTimeTicks) * 100,
+            MIN_PLAYBACK_WIDTH
+          )
+        : 0;
+    }
+    return 0;
+  }, [memoizedItem]);
+
+  useAnimatedReaction(
+    () => derivedTargetWidth.value,
+    (newWidth) => {
+      targetWidth.value = newWidth;
+      widthProgress.value = 0;
+      widthProgress.value = withTiming(1, {
+        duration: ANIMATION_DURATION,
+        easing: Easing.bezier(0.7, 0, 0.3, 1.0),
+      });
+    },
+    [item]
+  );
+
+  useAnimatedReaction(
+    () => memoizedColor,
+    (newColor) => {
+      endColor.value = newColor;
+      colorChangeProgress.value = 0;
+      colorChangeProgress.value = withTiming(1, {
+        duration: ANIMATION_DURATION,
+        easing: Easing.bezier(0.9, 0, 0.31, 0.99),
+      });
+    },
+    [memoizedColor]
+  );
+
+  useEffect(() => {
+    const timeout_2 = setTimeout(() => {
+      startColor.value = memoizedColor;
+      startWidth.value = targetWidth.value;
+    }, ANIMATION_DURATION);
+
+    return () => {
+      clearTimeout(timeout_2);
+    };
+  }, [memoizedColor, memoizedItem]);
+
+  /**
+   * ANIMATED STYLES
+   */
+  const animatedAverageStyle = useAnimatedStyle(() => ({
+    backgroundColor: interpolateColor(
+      colorChangeProgress.value,
+      [0, 1],
+      [startColor.value.average, endColor.value.average]
+    ),
+  }));
+
+  const animatedPrimaryStyle = useAnimatedStyle(() => ({
+    backgroundColor: interpolateColor(
+      colorChangeProgress.value,
+      [0, 1],
+      [startColor.value.primary, endColor.value.primary]
+    ),
+  }));
+
+  const animatedWidthStyle = useAnimatedStyle(() => ({
+    width: `${interpolate(
+      widthProgress.value,
+      [0, 1],
+      [startWidth.value, targetWidth.value]
+    )}%`,
+  }));
+
+  const animatedTextStyle = useAnimatedStyle(() => ({
+    color: interpolateColor(
+      colorChangeProgress.value,
+      [0, 1],
+      [startColor.value.text, endColor.value.text]
+    ),
+  }));
+  /**
+   * *********************
+   */
+
   return (
-    <Button
+    <TouchableOpacity
+      accessibilityLabel="Play button"
+      accessibilityHint="Tap to play the media"
       onPress={onPress}
-      iconRight={
-        <View className="flex flex-row items-center space-x-2">
-          <Ionicons name="play-circle" size={24} color="white" />
-          {client && <Feather name="cast" size={22} color="white" />}
-        </View>
-      }
+      className="relative"
       {...props}
     >
-      {runtimeTicksToMinutes(item?.RunTimeTicks)}
-    </Button>
+      <View className="absolute w-full h-full top-0 left-0 rounded-xl z-10 overflow-hidden">
+        <Animated.View
+          style={[
+            animatedPrimaryStyle,
+            animatedWidthStyle,
+            {
+              height: "100%",
+            },
+          ]}
+        />
+      </View>
+
+      <Animated.View
+        style={[animatedAverageStyle]}
+        className="absolute w-full h-full top-0 left-0 rounded-xl"
+      />
+      <View
+        style={{
+          borderWidth: 1,
+          borderColor: colorAtom.primary,
+          borderStyle: "solid",
+        }}
+        className="flex flex-row items-center justify-center bg-transparent rounded-xl z-20 h-12 w-full "
+      >
+        <View className="flex flex-row items-center space-x-2">
+          <Animated.Text style={[animatedTextStyle, { fontWeight: "bold" }]}>
+            {runtimeTicksToMinutes(item?.RunTimeTicks)}
+          </Animated.Text>
+          <Animated.Text style={animatedTextStyle}>
+            <Ionicons name="play-circle" size={24} />
+          </Animated.Text>
+          {client && (
+            <Animated.Text style={animatedTextStyle}>
+              <Feather name="cast" size={22} />
+            </Animated.Text>
+          )}
+        </View>
+      </View>
+    </TouchableOpacity>
   );
 };

components/PlayedStatus.tsx

@@ -7,9 +7,13 @@ import { useQueryClient } from "@tanstack/react-query";
 import * as Haptics from "expo-haptics";
 import { useAtom } from "jotai";
 import React from "react";
-import { TouchableOpacity, View } from "react-native";
+import { TouchableOpacity, View, ViewProps } from "react-native";
 
-export const PlayedStatus: React.FC<{ item: BaseItemDto }> = ({ item }) => {
+interface Props extends ViewProps {
+  item: BaseItemDto;
+}
+
+export const PlayedStatus: React.FC<Props> = ({ item, ...props }) => {
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
 
@@ -37,7 +41,10 @@ export const PlayedStatus: React.FC<{ item: BaseItemDto }> = ({ item }) => {
   };
 
   return (
-    <View>
+    <View
+      className=" bg-neutral-800/80 rounded-full h-10 w-10 flex items-center justify-center"
+      {...props}
+    >
       {item.UserData?.Played ? (
         <TouchableOpacity
           onPress={async () => {
@@ -51,7 +58,7 @@ export const PlayedStatus: React.FC<{ item: BaseItemDto }> = ({ item }) => {
           }}
         >
           <View className="rounded h-10 aspect-square flex items-center justify-center">
-            <Ionicons name="checkmark-circle" size={30} color="white" />
+            <Ionicons name="checkmark-circle" size={24} color="white" />
           </View>
         </TouchableOpacity>
       ) : (
@@ -67,7 +74,7 @@ export const PlayedStatus: React.FC<{ item: BaseItemDto }> = ({ item }) => {
           }}
         >
           <View className="rounded h-10 aspect-square flex items-center justify-center">
-            <Ionicons name="checkmark-circle-outline" size={30} color="white" />
+            <Ionicons name="checkmark-circle-outline" size={24} color="white" />
           </View>
         </TouchableOpacity>
       )}

components/Ratings.tsx

@@ -5,12 +5,13 @@ import { Ionicons } from "@expo/vector-icons";
 import { Image } from "expo-image";
 
 interface Props extends ViewProps {
-  item: BaseItemDto;
+  item?: BaseItemDto | null;
 }
 
-export const Ratings: React.FC<Props> = ({ item }) => {
+export const Ratings: React.FC<Props> = ({ item, ...props }) => {
+  if (!item) return null;
   return (
-    <View className="flex flex-row items-center justify-center mt-2 space-x-2">
+    <View className="flex flex-row items-center mt-2 space-x-2" {...props}>
       {item.OfficialRating && (
         <Badge text={item.OfficialRating} variant="gray" />
       )}

components/SimilarItems.tsx

@@ -6,23 +6,26 @@ import { useQuery } from "@tanstack/react-query";
 import { router } from "expo-router";
 import { useAtom } from "jotai";
 import { useMemo } from "react";
-import { ScrollView, TouchableOpacity, View } from "react-native";
+import { ScrollView, TouchableOpacity, View, ViewProps } from "react-native";
 import { Text } from "./common/Text";
 import { ItemCardText } from "./ItemCardText";
 import { Loader } from "./Loader";
 
-type SimilarItemsProps = {
-  itemId: string;
-};
+interface SimilarItemsProps extends ViewProps {
+  itemId?: string | null;
+}
 
-export const SimilarItems: React.FC<SimilarItemsProps> = ({ itemId }) => {
+export const SimilarItems: React.FC<SimilarItemsProps> = ({
+  itemId,
+  ...props
+}) => {
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
 
   const { data: similarItems, isLoading } = useQuery<BaseItemDto[]>({
     queryKey: ["similarItems", itemId],
     queryFn: async () => {
-      if (!api || !user?.Id) return [];
+      if (!api || !user?.Id || !itemId) return [];
       const response = await getLibraryApi(api).getSimilarItems({
         itemId,
         userId: user.Id,
@@ -41,8 +44,8 @@ export const SimilarItems: React.FC<SimilarItemsProps> = ({ itemId }) => {
   );
 
   return (
-    <View>
-      <Text className="px-4 text-2xl font-bold mb-2">Similar items</Text>
+    <View {...props}>
+      <Text className="px-4 text-lg font-bold mb-2">Similar items</Text>
       {isLoading ? (
         <View className="my-12">
           <Loader />
@@ -53,7 +56,7 @@ export const SimilarItems: React.FC<SimilarItemsProps> = ({ itemId }) => {
             {movies.map((item) => (
               <TouchableOpacity
                 key={item.Id}
-                onPress={() => router.push(`/items/${item.Id}`)}
+                onPress={() => router.push(`/items/page?id=${item.Id}`)}
                 className="flex flex-col w-32"
               >
                 <MoviePoster item={item} />
@@ -63,7 +66,9 @@ export const SimilarItems: React.FC<SimilarItemsProps> = ({ itemId }) => {
           </View>
         </ScrollView>
       )}
-      {movies.length === 0 && <Text className="px-4">No similar items</Text>}
+      {movies.length === 0 && (
+        <Text className="px-4 text-neutral-500">No similar items</Text>
+      )}
     </View>
   );
 };

components/SubtitleTrackSelector.tsx

@@ -2,29 +2,29 @@ import { TouchableOpacity, View } from "react-native";
 import * as DropdownMenu from "zeego/dropdown-menu";
 import { Text } from "./common/Text";
 import { atom, useAtom } from "jotai";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import {
+  BaseItemDto,
+  MediaSourceInfo,
+} from "@jellyfin/sdk/lib/generated-client/models";
 import { useEffect, useMemo } from "react";
 import { MediaStream } from "@jellyfin/sdk/lib/generated-client/models";
 import { tc } from "@/utils/textTools";
 
 interface Props extends React.ComponentProps<typeof View> {
-  item: BaseItemDto;
+  source: MediaSourceInfo;
   onChange: (value: number) => void;
   selected: number;
 }
 
 export const SubtitleTrackSelector: React.FC<Props> = ({
-  item,
+  source,
   onChange,
   selected,
   ...props
 }) => {
   const subtitleStreams = useMemo(
-    () =>
-      item.MediaSources?.[0].MediaStreams?.filter(
-        (x) => x.Type === "Subtitle"
-      ) ?? [],
-    [item]
+    () => source.MediaStreams?.filter((x) => x.Type === "Subtitle") ?? [],
+    [source]
   );
 
   const selectedSubtitleSteam = useMemo(
@@ -33,7 +33,7 @@ export const SubtitleTrackSelector: React.FC<Props> = ({
   );
 
   useEffect(() => {
-    const index = item.MediaSources?.[0].DefaultSubtitleStreamIndex;
+    const index = source.DefaultSubtitleStreamIndex;
     if (index !== undefined && index !== null) {
       onChange(index);
     } else {
@@ -44,20 +44,24 @@ export const SubtitleTrackSelector: React.FC<Props> = ({
   if (subtitleStreams.length === 0) return null;
 
   return (
-    <View className="flex flex-row items-center justify-between" {...props}>
+    <View
+      className="flex col shrink justify-start place-self-start items-start"
+      style={{
+        minWidth: 60,
+        maxWidth: 200,
+      }}
+    >
       <DropdownMenu.Root>
         <DropdownMenu.Trigger>
-          <View className="flex flex-col mb-2">
-            <Text className="opacity-50 mb-1 text-xs">Subtitles</Text>
-            <View className="flex flex-row">
-              <TouchableOpacity className="bg-neutral-900 max-w-32 h-10 rounded-xl border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between">
-                <Text className="">
-                  {selectedSubtitleSteam
-                    ? tc(selectedSubtitleSteam?.DisplayTitle, 13)
-                    : "None"}
-                </Text>
-              </TouchableOpacity>
-            </View>
+          <View className="flex flex-col " {...props}>
+            <Text className="opacity-50 mb-1 text-xs">Subtitle</Text>
+            <TouchableOpacity className="bg-neutral-900  h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between">
+              <Text className=" ">
+                {selectedSubtitleSteam
+                  ? tc(selectedSubtitleSteam?.DisplayTitle, 7)
+                  : "None"}
+              </Text>
+            </TouchableOpacity>
           </View>
         </DropdownMenu.Trigger>
         <DropdownMenu.Content
@@ -69,7 +73,7 @@ export const SubtitleTrackSelector: React.FC<Props> = ({
           collisionPadding={8}
           sideOffset={8}
         >
-          <DropdownMenu.Label>Subtitles</DropdownMenu.Label>
+          <DropdownMenu.Label>Subtitle tracks</DropdownMenu.Label>
           <DropdownMenu.Item
             key={"-1"}
             onSelect={() => {

components/common/HeaderBackButton.tsx

@@ -0,0 +1,59 @@
+import {
+  TouchableOpacity,
+  TouchableOpacityProps,
+  View,
+  ViewProps,
+} from "react-native";
+import { Text } from "@/components/common/Text";
+import { useRouter } from "expo-router";
+import { Ionicons } from "@expo/vector-icons";
+import { BlurView, BlurViewProps } from "expo-blur";
+
+interface Props extends BlurViewProps {
+  background?: "blur" | "transparent";
+  touchableOpacityProps?: TouchableOpacityProps;
+}
+
+export const HeaderBackButton: React.FC<Props> = ({
+  background = "transparent",
+  touchableOpacityProps,
+  ...props
+}) => {
+  const router = useRouter();
+
+  if (background === "transparent")
+    return (
+      <BlurView
+        {...props}
+        intensity={100}
+        className="overflow-hidden rounded-full p-2"
+      >
+        <TouchableOpacity
+          onPress={() => router.back()}
+          {...touchableOpacityProps}
+        >
+          <Ionicons
+            className="drop-shadow-2xl"
+            name="arrow-back"
+            size={24}
+            color="white"
+          />
+        </TouchableOpacity>
+      </BlurView>
+    );
+
+  return (
+    <TouchableOpacity
+      onPress={() => router.back()}
+      className=" bg-neutral-800/80 rounded-full p-2"
+      {...touchableOpacityProps}
+    >
+      <Ionicons
+        className="drop-shadow-2xl"
+        name="arrow-back"
+        size={24}
+        color="#077DF2"
+      />
+    </TouchableOpacity>
+  );
+};

components/common/HorrizontalScroll.tsx

@@ -1,14 +1,19 @@
-import React, { useEffect } from "react";
-import { ScrollView, ScrollViewProps, View, ViewStyle } from "react-native";
-import Animated, {
-  useAnimatedStyle,
-  useSharedValue,
-  withTiming,
-} from "react-native-reanimated";
-import { Loader } from "../Loader";
+import { FlashList, FlashListProps } from "@shopify/flash-list";
+import React, { forwardRef, useImperativeHandle, useRef } from "react";
+import { View, ViewStyle } from "react-native";
 import { Text } from "./Text";
 
-interface HorizontalScrollProps<T> extends ScrollViewProps {
+type PartialExcept<T, K extends keyof T> = Partial<T> & Pick<T, K>;
+
+export interface HorizontalScrollRef {
+  scrollToIndex: (index: number, viewOffset: number) => void;
+}
+
+interface HorizontalScrollProps<T>
+  extends PartialExcept<
+    Omit<FlashListProps<T>, "renderItem">,
+    "estimatedItemSize"
+  > {
   data?: T[] | null;
   renderItem: (item: T, index: number) => React.ReactNode;
   containerStyle?: ViewStyle;
@@ -16,73 +21,81 @@ interface HorizontalScrollProps<T> extends ScrollViewProps {
   loadingContainerStyle?: ViewStyle;
   height?: number;
   loading?: boolean;
+  extraData?: any;
 }
 
-export function HorizontalScroll<T>({
-  data = [],
-  renderItem,
-  containerStyle,
-  contentContainerStyle,
-  loadingContainerStyle,
-  loading = false,
-  height = 164,
-  ...props
-}: HorizontalScrollProps<T>): React.ReactElement {
-  const animatedOpacity = useSharedValue(0);
-  const animatedStyle1 = useAnimatedStyle(() => {
-    return {
-      opacity: withTiming(animatedOpacity.value, { duration: 250 }),
-    };
-  });
+export const HorizontalScroll = forwardRef<
+  HorizontalScrollRef,
+  HorizontalScrollProps<any>
+>(
+  <T,>(
+    {
+      data = [],
+      renderItem,
+      containerStyle,
+      contentContainerStyle,
+      loadingContainerStyle,
+      loading = false,
+      height = 164,
+      extraData,
+      ...props
+    }: HorizontalScrollProps<T>,
+    ref: React.ForwardedRef<HorizontalScrollRef>
+  ) => {
+    const flashListRef = useRef<FlashList<T>>(null);
 
-  useEffect(() => {
-    if (data) {
-      animatedOpacity.value = 1;
-    }
-  }, [data]);
+    useImperativeHandle(ref!, () => ({
+      scrollToIndex: (index: number, viewOffset: number) => {
+        flashListRef.current?.scrollToIndex({
+          index,
+          animated: true,
+          viewPosition: 0,
+          viewOffset,
+        });
+      },
+    }));
 
-  if (data === undefined || data === null || loading) {
-    return (
-      <View
-        style={[
-          {
-            flex: 1,
-            justifyContent: "center",
-            alignItems: "center",
-          },
-          loadingContainerStyle,
-        ]}
-      >
-        <Loader />
+    const renderFlashListItem = ({
+      item,
+      index,
+    }: {
+      item: T;
+      index: number;
+    }) => (
+      <View className="mr-2">
+        <React.Fragment>{renderItem(item, index)}</React.Fragment>
       </View>
     );
-  }
 
-  return (
-    <ScrollView
-      horizontal
-      style={containerStyle}
-      contentContainerStyle={contentContainerStyle}
-      showsHorizontalScrollIndicator={false}
-      {...props}
-    >
-      <Animated.View
-        className={`
-        flex flex-row px-4
-      `}
-        style={[animatedStyle1]}
-      >
-        {data.map((item, index) => (
-          <View className="mr-2" key={index}>
-            <React.Fragment>{renderItem(item, index)}</React.Fragment>
-          </View>
-        ))}
-        {data.length === 0 && (
+    if (!data || loading) {
+      return (
+        <View className="px-4 mb-2">
+          <View className="bg-neutral-950 h-24 w-full rounded-md mb-2"></View>
+          <View className="bg-neutral-950 h-10 w-full rounded-md mb-1"></View>
+        </View>
+      );
+    }
+
+    return (
+      <FlashList<T>
+        ref={flashListRef}
+        data={data}
+        extraData={extraData}
+        renderItem={renderFlashListItem}
+        horizontal
+        estimatedItemSize={200}
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={{
+          paddingHorizontal: 16,
+          ...contentContainerStyle,
+        }}
+        ListEmptyComponent={() => (
           <View className="flex-1 justify-center items-center">
             <Text className="text-center text-gray-500">No data available</Text>
           </View>
         )}
-      </Animated.View>
-    </ScrollView>
-  );
-}
+        {...props}
+      />
+    );
+  }
+);

components/common/InfiniteHorrizontalScroll.tsx

@@ -1,11 +1,13 @@
-import React, { useEffect } from "react";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import {
-  NativeScrollEvent,
-  ScrollView,
-  ScrollViewProps,
-  View,
-  ViewStyle,
-} from "react-native";
+  BaseItemDto,
+  BaseItemDtoQueryResult,
+} from "@jellyfin/sdk/lib/generated-client/models";
+import { FlashList, FlashListProps } from "@shopify/flash-list";
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { useAtom } from "jotai";
+import React, { useEffect, useMemo } from "react";
+import { View, ViewStyle } from "react-native";
 import Animated, {
   useAnimatedStyle,
   useSharedValue,
@@ -13,16 +15,9 @@ import Animated, {
 } from "react-native-reanimated";
 import { Loader } from "../Loader";
 import { Text } from "./Text";
-import { useInfiniteQuery } from "@tanstack/react-query";
-import {
-  BaseItemDto,
-  BaseItemDtoQueryResult,
-} from "@jellyfin/sdk/lib/generated-client/models";
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { useNavigation } from "expo-router";
-import { useAtom } from "jotai";
 
-interface HorizontalScrollProps extends ScrollViewProps {
+interface HorizontalScrollProps
+  extends Omit<FlashListProps<BaseItemDto>, "renderItem" | "data" | "style"> {
   queryFn: ({
     pageParam,
   }: {
@@ -38,18 +33,6 @@ interface HorizontalScrollProps extends ScrollViewProps {
   loading?: boolean;
 }
 
-const isCloseToBottom = ({
-  layoutMeasurement,
-  contentOffset,
-  contentSize,
-}: NativeScrollEvent) => {
-  const paddingToBottom = 50;
-  return (
-    layoutMeasurement.height + contentOffset.y >=
-    contentSize.height - paddingToBottom
-  );
-};
-
 export function InfiniteHorizontalScroll({
   queryFn,
   queryKey,
@@ -64,7 +47,6 @@ export function InfiniteHorizontalScroll({
 }: HorizontalScrollProps): React.ReactElement {
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
-  const navigation = useNavigation();
 
   const animatedOpacity = useSharedValue(0);
   const animatedStyle1 = useAnimatedStyle(() => {
@@ -73,7 +55,7 @@ export function InfiniteHorizontalScroll({
     };
   });
 
-  const { data, isFetching, fetchNextPage } = useInfiniteQuery({
+  const { data, isFetching, fetchNextPage, hasNextPage } = useInfiniteQuery({
     queryKey,
     queryFn,
     getNextPageParam: (lastPage, pages) => {
@@ -100,6 +82,13 @@ export function InfiniteHorizontalScroll({
     enabled: !!api && !!user?.Id,
   });
 
+  const flatData = useMemo(() => {
+    return (
+      (data?.pages.flatMap((p) => p?.Items).filter(Boolean) as BaseItemDto[]) ||
+      []
+    );
+  }, [data]);
+
   useEffect(() => {
     if (data) {
       animatedOpacity.value = 1;
@@ -124,41 +113,34 @@ export function InfiniteHorizontalScroll({
   }
 
   return (
-    <ScrollView
-      horizontal
-      onScroll={({ nativeEvent }) => {
-        if (isCloseToBottom(nativeEvent)) {
-          fetchNextPage();
-        }
-      }}
-      scrollEventThrottle={400}
-      style={containerStyle}
-      contentContainerStyle={contentContainerStyle}
-      showsHorizontalScrollIndicator={false}
-      {...props}
-    >
-      <Animated.View
-        className={`
-        flex flex-row px-4
-      `}
-        style={[animatedStyle1]}
-      >
-        {data?.pages
-          .flatMap((page) => page?.Items)
-          .map(
-            (item, index) =>
-              item && (
-                <View className="mr-2" key={index}>
-                  <React.Fragment>{renderItem(item, index)}</React.Fragment>
-                </View>
-              )
-          )}
-        {data?.pages.flatMap((page) => page?.Items).length === 0 && (
+    <Animated.View style={[containerStyle, animatedStyle1]}>
+      <FlashList
+        data={flatData}
+        renderItem={({ item, index }) => (
+          <View className="mr-2">
+            <React.Fragment>{renderItem(item, index)}</React.Fragment>
+          </View>
+        )}
+        estimatedItemSize={height}
+        horizontal
+        onEndReached={() => {
+          if (hasNextPage) {
+            fetchNextPage();
+          }
+        }}
+        onEndReachedThreshold={0.5}
+        contentContainerStyle={{
+          paddingHorizontal: 16,
+          ...contentContainerStyle,
+        }}
+        showsHorizontalScrollIndicator={false}
+        ListEmptyComponent={
           <View className="flex-1 justify-center items-center">
             <Text className="text-center text-gray-500">No data available</Text>
           </View>
-        )}
-      </Animated.View>
-    </ScrollView>
+        }
+        {...props}
+      />
+    </Animated.View>
   );
 }

components/common/ItemImage.tsx

@@ -0,0 +1,87 @@
+import { useImageColors } from "@/hooks/useImageColors";
+import { apiAtom } from "@/providers/JellyfinProvider";
+import { getItemImage } from "@/utils/getItemImage";
+import { Ionicons } from "@expo/vector-icons";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { Image, ImageProps, ImageSource } from "expo-image";
+import { useAtom } from "jotai";
+import { useMemo } from "react";
+import { View } from "react-native";
+
+interface Props extends ImageProps {
+  item: BaseItemDto;
+  variant?:
+    | "Primary"
+    | "Backdrop"
+    | "ParentBackdrop"
+    | "ParentLogo"
+    | "Logo"
+    | "AlbumPrimary"
+    | "SeriesPrimary"
+    | "Screenshot"
+    | "Thumb";
+  quality?: number;
+  width?: number;
+  useThemeColor?: boolean;
+  onError?: () => void;
+}
+
+export const ItemImage: React.FC<Props> = ({
+  item,
+  variant = "Primary",
+  quality = 90,
+  width = 1000,
+  useThemeColor = false,
+  onError,
+  ...props
+}) => {
+  const [api] = useAtom(apiAtom);
+
+  const source = useMemo(() => {
+    if (!api) {
+      onError && onError();
+      return;
+    }
+    return getItemImage({
+      item,
+      api,
+      variant,
+      quality,
+      width,
+    });
+  }, [api, item, quality, variant, width]);
+
+  // return placeholder icon if no source
+  if (!source?.uri)
+    return (
+      <View
+        {...props}
+        className="flex flex-col items-center justify-center border border-neutral-800 bg-neutral-900"
+      >
+        <Ionicons
+          name="image-outline"
+          size={24}
+          color="white"
+          style={{ opacity: 0.4 }}
+        />
+      </View>
+    );
+
+  return (
+    <Image
+      cachePolicy={"memory-disk"}
+      transition={300}
+      placeholder={{
+        blurhash: source?.blurhash,
+      }}
+      style={{
+        width: "100%",
+        height: "100%",
+      }}
+      source={{
+        uri: source?.uri,
+      }}
+      {...props}
+    />
+  );
+};

components/common/TouchableItemRouter.tsx

@@ -1,14 +1,8 @@
-import {
-  TouchableOpacity,
-  TouchableOpacityProps,
-  View,
-  ViewProps,
-} from "react-native";
-import { Text } from "@/components/common/Text";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { PropsWithChildren } from "react";
-import { useRouter } from "expo-router";
 import * as Haptics from "expo-haptics";
+import { useRouter, useSegments } from "expo-router";
+import { PropsWithChildren } from "react";
+import { Alert, TouchableOpacity, TouchableOpacityProps } from "react-native";
 
 interface Props extends TouchableOpacityProps {
   item: BaseItemDto;
@@ -20,42 +14,67 @@ export const TouchableItemRouter: React.FC<PropsWithChildren<Props>> = ({
   ...props
 }) => {
   const router = useRouter();
-  return (
-    <TouchableOpacity
-      onPress={() => {
-        Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+  const segments = useSegments();
 
-        if (item.Type === "Series") {
-          router.push(`/series/${item.Id}`);
-          return;
-        }
-        if (item.Type === "Episode") {
-          router.push(`/items/${item.Id}`);
-          return;
-        }
-        if (item.Type === "MusicAlbum") {
-          router.push(`/albums/${item.Id}`);
-          return;
-        }
-        if (item.Type === "Audio") {
-          router.push(`/albums/${item.AlbumId}`);
-          return;
-        }
-        if (item.Type === "MusicArtist") {
-          router.push(`/artists/${item.Id}/page`);
-          return;
-        }
+  const from = segments[2];
 
-        if (item.Type === "BoxSet") {
-          router.push(`/collections/${item.Id}`);
-          return;
-        }
+  if (from === "(home)" || from === "(search)" || from === "(libraries)")
+    return (
+      <TouchableOpacity
+        onPress={() => {
+          Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
 
-        router.push(`/items/${item.Id}`);
-      }}
-      {...props}
-    >
-      {children}
-    </TouchableOpacity>
-  );
+          if (item.Type === "Series") {
+            router.push(`/(auth)/(tabs)/${from}/series/${item.Id}`);
+            return;
+          }
+
+          if (item.Type === "MusicAlbum") {
+            router.push(`/(auth)/(tabs)/${from}/albums/${item.Id}`);
+            return;
+          }
+
+          if (item.Type === "Audio") {
+            router.push(`/(auth)/(tabs)/${from}/albums/${item.AlbumId}`);
+            return;
+          }
+
+          if (item.Type === "MusicArtist") {
+            router.push(`/(auth)/(tabs)/${from}/artists/${item.Id}`);
+            return;
+          }
+
+          if (item.Type === "Person") {
+            router.push(`/(auth)/(tabs)/${from}/actors/${item.Id}`);
+            return;
+          }
+
+          if (item.Type === "BoxSet") {
+            router.push(`/(auth)/(tabs)/${from}/collections/${item.Id}`);
+            return;
+          }
+
+          if (item.Type === "UserView") {
+            router.push(`/(auth)/(tabs)/${from}/collections/${item.Id}`);
+            return;
+          }
+
+          if (item.Type === "CollectionFolder") {
+            router.push(`/(auth)/(tabs)/(libraries)/${item.Id}`);
+            return;
+          }
+
+          // Same as default
+          // if (item.Type === "Episode") {
+          //   router.push(`/items/${item.Id}`);
+          //   return;
+          // }
+
+          router.push(`/(auth)/(tabs)/${from}/items/page?id=${item.Id}`);
+        }}
+        {...props}
+      >
+        {children}
+      </TouchableOpacity>
+    );
 };

components/common/VerticalSkeleton.tsx

@@ -0,0 +1,29 @@
+import { View, ViewProps } from "react-native";
+import { Text } from "@/components/common/Text";
+
+interface Props extends ViewProps {
+  index: number;
+}
+
+export const VerticalSkeleton: React.FC<Props> = ({ index, ...props }) => {
+  return (
+    <View
+      key={index}
+      style={{
+        width: "32%",
+      }}
+      className="flex flex-col"
+      {...props}
+    >
+      <View
+        style={{
+          aspectRatio: "10/15",
+        }}
+        className="w-full bg-neutral-800 mb-2 rounded-lg"
+      ></View>
+      <View className="h-2 bg-neutral-800 rounded-full mb-1"></View>
+      <View className="h-2 bg-neutral-800 rounded-full mb-1"></View>
+      <View className="h-2 bg-neutral-800 rounded-full mb-2 w-1/2"></View>
+    </View>
+  );
+};

components/downloads/SeriesCard.tsx

@@ -25,7 +25,7 @@ export const SeriesCard: React.FC<{ items: BaseItemDto[] }> = ({ items }) => {
   return (
     <View>
       <View className="flex flex-row items-center justify-between">
-        <Text className="text-2xl font-bold">{items[0].SeriesName}</Text>
+        <Text className="text-2xl font-bold shrink">{items[0].SeriesName}</Text>
         <View className="bg-purple-600 rounded-full h-6 w-6 flex items-center justify-center">
           <Text className="text-xs font-bold">{items.length}</Text>
         </View>

components/filters/FilterButton.tsx

@@ -1,7 +1,7 @@
 import { Text } from "@/components/common/Text";
 import { FontAwesome, Ionicons } from "@expo/vector-icons";
 import { useQuery } from "@tanstack/react-query";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { TouchableOpacity, View, ViewProps } from "react-native";
 import { FilterSheet } from "./FilterSheet";
 
@@ -23,7 +23,7 @@ export const FilterButton = <T,>({
   queryFn,
   queryKey,
   set,
-  values,
+  values, // selected values
   title,
   renderItemLabel,
   searchFilter,
@@ -34,16 +34,19 @@ export const FilterButton = <T,>({
   const [open, setOpen] = useState(false);
 
   const { data: filters } = useQuery<T[]>({
-    queryKey: [queryKey, collectionId],
+    queryKey: ["filters", title, queryKey, collectionId],
     queryFn,
     staleTime: 0,
+    enabled: !!collectionId && !!queryFn && !!queryKey,
   });
 
-  if (filters?.length === 0) return null;
-
   return (
     <>
-      <TouchableOpacity onPress={() => setOpen(true)}>
+      <TouchableOpacity
+        onPress={() => {
+          filters?.length && setOpen(true);
+        }}
+      >
         <View
           className={`
             px-3 py-1.5 rounded-full flex flex-row items-center space-x-1
@@ -52,6 +55,7 @@ export const FilterButton = <T,>({
                 ? "bg-purple-600  border border-purple-700"
                 : "bg-neutral-900 border border-neutral-900"
             }
+          ${filters?.length === 0 && "opacity-50"}
             `}
           {...props}
         >

components/filters/FilterSheet.tsx

@@ -173,7 +173,7 @@ export const FilterSheet = <T,>({
             className="mb-4 flex flex-col rounded-xl overflow-hidden"
           >
             {renderData?.map((item, index) => (
-              <>
+              <View key={index}>
                 <TouchableOpacity
                   onPress={() => {
                     if (!values.includes(item)) {
@@ -183,11 +183,10 @@ export const FilterSheet = <T,>({
                       }, 250);
                     }
                   }}
-                  key={`${index}`}
                   className=" bg-neutral-800 px-4 py-3 flex flex-row items-center justify-between"
                 >
                   <Text>{renderItemLabel(item)}</Text>
-                  {values.includes(item) ? (
+                  {values.some((i) => i === item) ? (
                     <Ionicons name="radio-button-on" size={24} color="white" />
                   ) : (
                     <Ionicons name="radio-button-off" size={24} color="white" />
@@ -199,7 +198,7 @@ export const FilterSheet = <T,>({
                   }}
                   className="h-1 divide-neutral-700 "
                 ></View>
-              </>
+              </View>
             ))}
           </View>
           {data.length < (_data?.length || 0) && (

components/filters/ResetFiltersButton.tsx

@@ -29,7 +29,7 @@ export const ResetFiltersButton: React.FC<Props> = ({ ...props }) => {
         setSelectedTags([]);
         setSelectedYears([]);
       }}
-      className="bg-purple-600 rounded-full w-8 h-8 flex items-center justify-center"
+      className="bg-purple-600 rounded-full w-[30px] h-[30px] flex items-center justify-center mr-1"
       {...props}
     >
       <Ionicons name="close" size={20} color="white" />

components/filters/_SortButton.tsx

@@ -1,93 +0,0 @@
-import * as DropdownMenu from "zeego/dropdown-menu";
-import { Text } from "@/components/common/Text";
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { Ionicons } from "@expo/vector-icons";
-import { useQuery } from "@tanstack/react-query";
-import { useAtom } from "jotai";
-import { TouchableOpacity, View, ViewProps } from "react-native";
-import {
-  sortByAtom,
-  sortOptions,
-  sortOrderAtom,
-  sortOrderOptions,
-} from "@/utils/atoms/filters";
-
-interface Props extends ViewProps {
-  title: string;
-}
-
-export const SortButton: React.FC<Props> = ({ title, ...props }) => {
-  const [api] = useAtom(apiAtom);
-  const [user] = useAtom(userAtom);
-
-  const [sortBy, setSortBy] = useAtom(sortByAtom);
-  const [sortOrder, setSortOrder] = useAtom(sortOrderAtom);
-
-  return (
-    <DropdownMenu.Root>
-      <DropdownMenu.Trigger>
-        <TouchableOpacity>
-          <View
-            className={`
-            px-3 py-2 rounded-full flex flex-row items-center space-x-2 bg-neutral-900
-            `}
-            {...props}
-          >
-            <Text>Sort by</Text>
-            <Ionicons
-              name="filter"
-              size={16}
-              color="white"
-              style={{ opacity: 0.5 }}
-            />
-          </View>
-        </TouchableOpacity>
-      </DropdownMenu.Trigger>
-      <DropdownMenu.Content
-        loop={true}
-        side="bottom"
-        align="start"
-        alignOffset={0}
-        avoidCollisions={true}
-        collisionPadding={8}
-        sideOffset={8}
-      >
-        {sortOptions?.map((g) => (
-          <DropdownMenu.CheckboxItem
-            value={sortBy.key === g.key ? "on" : "off"}
-            onValueChange={(next, previous) => {
-              if (next === "on") {
-                setSortBy(g);
-              } else {
-                setSortBy(sortOptions[0]);
-              }
-            }}
-            key={g.key}
-            textValue={g.value}
-          >
-            <DropdownMenu.ItemIndicator />
-          </DropdownMenu.CheckboxItem>
-        ))}
-        <DropdownMenu.Separator />
-        <DropdownMenu.Group>
-          {sortOrderOptions.map((g) => (
-            <DropdownMenu.CheckboxItem
-              value={sortOrder.key === g.key ? "on" : "off"}
-              onValueChange={(next, previous) => {
-                if (next === "on") {
-                  setSortOrder(g);
-                } else {
-                  setSortOrder(sortOrderOptions[0]);
-                }
-              }}
-              key={g.key}
-              textValue={g.value}
-            >
-              <DropdownMenu.ItemIndicator />
-            </DropdownMenu.CheckboxItem>
-          ))}
-        </DropdownMenu.Group>
-      </DropdownMenu.Content>
-    </DropdownMenu.Root>
-  );
-};

components/home/LargeMovieCarousel.tsx

@@ -47,7 +47,7 @@ export const LargeMovieCarousel: React.FC<Props> = ({ ...props }) => {
       return response.data.Items?.[0].Id || null;
     },
     enabled: !!api && !!user?.Id && settings?.usePopularPlugin === true,
-    staleTime: 0,
+    staleTime: 60 * 1000,
   });
 
   const onPressPagination = (index: number) => {
@@ -75,7 +75,7 @@ export const LargeMovieCarousel: React.FC<Props> = ({ ...props }) => {
       return response.data.Items || [];
     },
     enabled: !!api && !!user?.Id && !!sf_carousel,
-    staleTime: 0,
+    staleTime: 60 * 1000,
   });
 
   const width = Dimensions.get("screen").width;
@@ -123,14 +123,16 @@ export const LargeMovieCarousel: React.FC<Props> = ({ ...props }) => {
 const RenderItem: React.FC<{ item: BaseItemDto }> = ({ item }) => {
   const [api] = useAtom(apiAtom);
 
+  const screenWidth = Dimensions.get("screen").width;
+
   const uri = useMemo(() => {
     if (!api) return null;
 
     return getBackdropUrl({
       api,
       item,
-      quality: 90,
-      width: 1000,
+      quality: 70,
+      width: Math.floor(screenWidth * 0.8 * 2),
     });
   }, [api, item]);
 

components/home/ScrollingCollectionList.tsx

@@ -6,50 +6,72 @@ import ContinueWatchingPoster from "../ContinueWatchingPoster";
 import { ItemCardText } from "../ItemCardText";
 import { HorizontalScroll } from "../common/HorrizontalScroll";
 import { TouchableItemRouter } from "../common/TouchableItemRouter";
+import {
+  type QueryKey,
+  useQuery,
+  type QueryFunction,
+} from "@tanstack/react-query";
+import SeriesPoster from "../posters/SeriesPoster";
+import { EpisodePoster } from "../posters/EpisodePoster";
 
 interface Props extends ViewProps {
-  title: string;
-  loading?: boolean;
+  title?: string | null;
   orientation?: "horizontal" | "vertical";
-  data?: BaseItemDto[] | null;
   height?: "small" | "large";
   disabled?: boolean;
+  queryKey: QueryKey;
+  queryFn: QueryFunction<BaseItemDto[]>;
 }
 
 export const ScrollingCollectionList: React.FC<Props> = ({
   title,
-  data,
   orientation = "vertical",
   height = "small",
-  loading = false,
   disabled = false,
+  queryFn,
+  queryKey,
   ...props
 }) => {
-  if (disabled) return null;
+  const { data, isLoading } = useQuery({
+    queryKey,
+    queryFn,
+    enabled: !disabled,
+    staleTime: 60 * 1000,
+  });
+
+  if (disabled || !title) return null;
 
   return (
     <View {...props}>
       <Text className="px-4 text-2xl font-bold mb-2 text-neutral-100">
         {title}
       </Text>
-      <HorizontalScroll<BaseItemDto>
+      <HorizontalScroll
         data={data}
         height={orientation === "vertical" ? 247 : 164}
-        loading={loading}
+        loading={isLoading}
         renderItem={(item, index) => (
           <TouchableItemRouter
             key={index}
             item={item}
             className={`flex flex-col
-              ${orientation === "vertical" ? "w-28" : "w-44"}
+              ${orientation === "horizontal" ? "w-44" : "w-28"}
             `}
           >
             <View>
-              {orientation === "vertical" ? (
-                <MoviePoster item={item} />
-              ) : (
+              {item.Type === "Episode" && orientation === "horizontal" && (
                 <ContinueWatchingPoster item={item} />
               )}
+              {item.Type === "Episode" && orientation === "vertical" && (
+                <SeriesPoster item={item} />
+              )}
+              {item.Type === "Movie" && orientation === "horizontal" && (
+                <ContinueWatchingPoster item={item} />
+              )}
+              {item.Type === "Movie" && orientation === "vertical" && (
+                <MoviePoster item={item} />
+              )}
+              {item.Type === "Series" && <SeriesPoster item={item} />}
               <ItemCardText item={item} />
             </View>
           </TouchableItemRouter>

components/library/LibraryItemCard.tsx

@@ -0,0 +1,209 @@
+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.error("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>
+          {settings?.libraryOptions?.showStats && (
+            <Text className="font-bold text-xs text-neutral-500 text-start px-4 ml-auto">
+              {itemsCount} items
+            </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 ">
+          <View
+            style={{
+              width: "100%",
+              height: "100%",
+              borderRadius: 8,
+              position: "absolute",
+              top: 0,
+              left: 0,
+              overflow: "hidden",
+            }}
+          >
+            <Image
+              source={{ uri: url }}
+              style={{
+                width: "100%",
+                height: "100%",
+              }}
+            />
+            <View
+              style={{
+                position: "absolute",
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                backgroundColor: "rgba(0, 0, 0, 0.3)", // Adjust the alpha value (0.3) to control darkness
+              }}
+            />
+          </View>
+          {settings?.libraryOptions?.showTitles && (
+            <Text className="font-bold text-lg text-start px-4">
+              {library.Name}
+            </Text>
+          )}
+          {settings?.libraryOptions?.showStats && (
+            <Text className="font-bold text-xs  text-start px-4">
+              {itemsCount} items
+            </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>
+          {settings?.libraryOptions?.showStats && (
+            <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>
+  );
+};

components/medialists/MediaListSection.tsx

@@ -4,43 +4,57 @@ import {
   BaseItemDtoQueryResult,
 } from "@jellyfin/sdk/lib/generated-client/models";
 import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
-import { useQuery } from "@tanstack/react-query";
 import { useAtom } from "jotai";
-import { View, ViewProps } from "react-native";
-import { ScrollingCollectionList } from "../home/ScrollingCollectionList";
-import { Text } from "../common/Text";
-import { InfiniteHorizontalScroll } from "../common/InfiniteHorrizontalScroll";
-import { TouchableItemRouter } from "../common/TouchableItemRouter";
-import MoviePoster from "../posters/MoviePoster";
 import { useCallback } from "react";
+import { View, ViewProps } from "react-native";
+import { InfiniteHorizontalScroll } from "../common/InfiniteHorrizontalScroll";
+import { Text } from "../common/Text";
+import { TouchableItemRouter } from "../common/TouchableItemRouter";
 import { ItemCardText } from "../ItemCardText";
+import MoviePoster from "../posters/MoviePoster";
+import {
+  type QueryKey,
+  type QueryFunction,
+  useQuery,
+} from "@tanstack/react-query";
 
 interface Props extends ViewProps {
-  collection: BaseItemDto;
+  queryKey: QueryKey;
+  queryFn: QueryFunction<BaseItemDto>;
 }
 
-export const MediaListSection: React.FC<Props> = ({ collection, ...props }) => {
+export const MediaListSection: React.FC<Props> = ({
+  queryFn,
+  queryKey,
+  ...props
+}) => {
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
 
+  const { data: collection, isLoading } = useQuery({
+    queryKey,
+    queryFn,
+    staleTime: 60 * 1000,
+  });
+
   const fetchItems = useCallback(
     async ({
       pageParam,
     }: {
       pageParam: number;
     }): Promise<BaseItemDtoQueryResult | null> => {
-      if (!api || !user?.Id) return null;
+      if (!api || !user?.Id || !collection) return null;
 
       const response = await getItemsApi(api).getItems({
         userId: user.Id,
         parentId: collection.Id,
         startIndex: pageParam,
-        limit: 10,
+        limit: 8,
       });
 
       return response.data;
     },
-    [api, user?.Id, collection.Id]
+    [api, user?.Id, collection?.Id]
   );
 
   if (!collection) return null;

components/movies/MoviesTitleHeader.tsx

@@ -1,21 +1,16 @@
-import { TouchableOpacity, View, ViewProps } from "react-native";
 import { Text } from "@/components/common/Text";
-import { useRouter } from "expo-router";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { View, ViewProps } from "react-native";
 
 interface Props extends ViewProps {
   item: BaseItemDto;
 }
 
 export const MoviesTitleHeader: React.FC<Props> = ({ item, ...props }) => {
-  const router = useRouter();
   return (
-    <>
-      <View className="flex flex-row items-center self-center px-4">
-        <Text className="text-center font-bold text-2xl mr-2">
-          {item?.Name}
-        </Text>
-      </View>
-    </>
+    <View {...props}>
+      <Text className=" font-bold text-2xl mb-1">{item?.Name}</Text>
+      <Text className=" opacity-50">{item?.ProductionYear}</Text>
+    </View>
   );
 };

components/music/SongsList.tsx

@@ -1,9 +1,6 @@
-import { TouchableOpacity, View, ViewProps } from "react-native";
-import { Text } from "@/components/common/Text";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import ArtistPoster from "../ArtistPoster";
-import { runtimeTicksToMinutes, runtimeTicksToSeconds } from "@/utils/time";
 import { useRouter } from "expo-router";
+import { View, ViewProps } from "react-native";
 import { SongsListItem } from "./SongsListItem";
 
 interface Props extends ViewProps {

components/music/SongsListItem.tsx

@@ -1,27 +1,20 @@
-import {
-  TouchableOpacity,
-  TouchableOpacityProps,
-  View,
-  ViewProps,
-} from "react-native";
 import { Text } from "@/components/common/Text";
-import index from "@/app/(auth)/(tabs)/home";
-import { runtimeTicksToSeconds } from "@/utils/time";
-import { router } from "expo-router";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
-import { useAtom } from "jotai";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { usePlayback } from "@/providers/PlaybackProvider";
+import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
 import { chromecastProfile } from "@/utils/profiles/chromecast";
+import ios from "@/utils/profiles/ios";
+import { runtimeTicksToSeconds } from "@/utils/time";
+import { useActionSheet } from "@expo/react-native-action-sheet";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { getMediaInfoApi } from "@jellyfin/sdk/lib/utils/api";
+import { useAtom } from "jotai";
+import { TouchableOpacity, TouchableOpacityProps, View } from "react-native";
 import CastContext, {
   PlayServicesState,
   useCastDevice,
   useRemoteMediaClient,
 } from "react-native-google-cast";
-import { currentlyPlayingItemAtom, playingAtom } from "../CurrentlyPlayingBar";
-import { useActionSheet } from "@expo/react-native-action-sheet";
-import ios from "@/utils/profiles/ios";
 
 interface Props extends TouchableOpacityProps {
   collectionId: string;
@@ -42,12 +35,12 @@ export const SongsListItem: React.FC<Props> = ({
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
   const castDevice = useCastDevice();
-  const [, setCp] = useAtom(currentlyPlayingItemAtom);
-  const [, setPlaying] = useAtom(playingAtom);
 
   const client = useRemoteMediaClient();
   const { showActionSheetWithOptions } = useActionSheet();
 
+  const { setCurrentlyPlayingState } = usePlayback();
+
   const openSelect = () => {
     if (!castDevice?.deviceId) {
       play("device");
@@ -73,12 +66,15 @@ export const SongsListItem: React.FC<Props> = ({
           case cancelButtonIndex:
             break;
         }
-      },
+      }
     );
   };
 
   const play = async (type: "device" | "cast") => {
-    if (!user?.Id || !api || !item.Id) return;
+    if (!user?.Id || !api || !item.Id) {
+      console.warn("No user, api or item", user, api, item.Id);
+      return;
+    }
 
     const response = await getMediaInfoApi(api!).getPlaybackInfo({
       itemId: item?.Id,
@@ -94,9 +90,13 @@ export const SongsListItem: React.FC<Props> = ({
       startTimeTicks: item?.UserData?.PlaybackPositionTicks || 0,
       sessionData,
       deviceProfile: castDevice?.deviceId ? chromecastProfile : ios,
+      mediaSourceId: item.Id,
     });
 
-    if (!url || !item) return;
+    if (!url || !item) {
+      console.warn("No url or item", url, item.Id);
+      return;
+    }
 
     if (type === "cast" && client) {
       await CastContext.getPlayServicesState().then((state) => {
@@ -118,11 +118,11 @@ export const SongsListItem: React.FC<Props> = ({
         }
       });
     } else {
-      setCp({
+      console.log("Playing on device", url, item.Id);
+      setCurrentlyPlayingState({
         item,
-        playbackUrl: url,
+        url,
       });
-      setPlaying(true);
     }
   };
 

components/posters/AlbumCover.tsx

@@ -36,7 +36,7 @@ const AlbumCover: React.FC<ArtistPosterProps> = ({ item, id }) => {
 
   if (!item && id)
     return (
-      <View className="relative rounded-md overflow-hidden border border-neutral-900">
+      <View className="relative rounded-lg overflow-hidden border border-neutral-900">
         <Image
           key={id}
           id={id}

components/posters/ArtistPoster.tsx

@@ -29,7 +29,7 @@ const ArtistPoster: React.FC<ArtistPosterProps> = ({
   if (!url)
     return (
       <View
-        className="rounded-md overflow-hidden border border-neutral-900"
+        className="rounded-lg overflow-hidden border border-neutral-900"
         style={{
           aspectRatio: "1/1",
         }}

components/posters/EpisodePoster.tsx

@@ -0,0 +1,64 @@
+import { apiAtom } from "@/providers/JellyfinProvider";
+import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { Image } from "expo-image";
+import { useAtom } from "jotai";
+import { useMemo, useState } from "react";
+import { View } from "react-native";
+import { WatchedIndicator } from "@/components/WatchedIndicator";
+
+type MoviePosterProps = {
+  item: BaseItemDto;
+  showProgress?: boolean;
+};
+
+export const EpisodePoster: React.FC<MoviePosterProps> = ({
+  item,
+  showProgress = false,
+}) => {
+  const [api] = useAtom(apiAtom);
+
+  const url = useMemo(() => {
+    if (item.Type === "Episode") {
+      return `${api?.basePath}/Items/${item.ParentBackdropItemId}/Images/Thumb?fillHeight=389&quality=80&tag=${item.ParentThumbImageTag}`;
+    }
+  }, [item]);
+
+  const [progress, setProgress] = useState(
+    item.UserData?.PlayedPercentage || 0
+  );
+
+  const blurhash = useMemo(() => {
+    const key = item.ImageTags?.["Primary"] as string;
+    return item.ImageBlurHashes?.["Primary"]?.[key];
+  }, [item]);
+
+  return (
+    <View className="relative rounded-lg overflow-hidden border border-neutral-900">
+      <Image
+        placeholder={{
+          blurhash,
+        }}
+        key={item.Id}
+        id={item.Id}
+        source={
+          url
+            ? {
+                uri: url,
+              }
+            : null
+        }
+        cachePolicy={"memory-disk"}
+        contentFit="cover"
+        style={{
+          aspectRatio: "10/15",
+          width: "100%",
+        }}
+      />
+      <WatchedIndicator item={item} />
+      {showProgress && progress > 0 && (
+        <View className="h-1 bg-red-600 w-full"></View>
+      )}
+    </View>
+  );
+};

components/posters/ItemPoster.tsx

@@ -0,0 +1,53 @@
+import { View, ViewProps } from "react-native";
+import { Text } from "@/components/common/Text";
+import {
+  BaseItemDto,
+  BaseItemKind,
+} from "@jellyfin/sdk/lib/generated-client/models";
+import { ItemImage } from "../common/ItemImage";
+import { WatchedIndicator } from "../WatchedIndicator";
+import { useState } from "react";
+
+interface Props extends ViewProps {
+  item: BaseItemDto;
+  showProgress?: boolean;
+}
+
+export const ItemPoster: React.FC<Props> = ({
+  item,
+  showProgress,
+  ...props
+}) => {
+  const [progress, setProgress] = useState(
+    item.UserData?.PlayedPercentage || 0
+  );
+
+  if (item.Type === "Movie" || item.Type === "Series" || item.Type === "BoxSet")
+    return (
+      <View
+        className="relative rounded-lg overflow-hidden border border-neutral-900"
+        {...props}
+      >
+        <ItemImage
+          style={{
+            aspectRatio: "10/15",
+            width: "100%",
+          }}
+          item={item}
+        />
+        <WatchedIndicator item={item} />
+        {showProgress && progress > 0 && (
+          <View className="h-1 bg-red-600 w-full"></View>
+        )}
+      </View>
+    );
+
+  return (
+    <View
+      className="rounded-lg w-full aspect-square overflow-hidden border border-neutral-900"
+      {...props}
+    >
+      <ItemImage className="w-full aspect-square" item={item} />
+    </View>
+  );
+};

components/posters/MoviePoster.tsx

@@ -1,3 +1,4 @@
+import { WatchedIndicator } from "@/components/WatchedIndicator";
 import { apiAtom } from "@/providers/JellyfinProvider";
 import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
@@ -5,7 +6,6 @@ import { Image } from "expo-image";
 import { useAtom } from "jotai";
 import { useMemo, useState } from "react";
 import { View } from "react-native";
-import { WatchedIndicator } from "@/components/WatchedIndicator";
 
 type MoviePosterProps = {
   item: BaseItemDto;
@@ -18,14 +18,13 @@ const MoviePoster: React.FC<MoviePosterProps> = ({
 }) => {
   const [api] = useAtom(apiAtom);
 
-  const url = useMemo(
-    () =>
-      getPrimaryImageUrl({
-        api,
-        item,
-      }),
-    [item]
-  );
+  const url = useMemo(() => {
+    return getPrimaryImageUrl({
+      api,
+      item,
+      width: 300,
+    });
+  }, [item]);
 
   const [progress, setProgress] = useState(
     item.UserData?.PlayedPercentage || 0
@@ -37,7 +36,7 @@ const MoviePoster: React.FC<MoviePosterProps> = ({
   }, [item]);
 
   return (
-    <View className="relative rounded-md overflow-hidden border border-neutral-900">
+    <View className="relative rounded-lg overflow-hidden border border-neutral-900">
       <Image
         placeholder={{
           blurhash,
@@ -58,6 +57,7 @@ const MoviePoster: React.FC<MoviePosterProps> = ({
           width: "100%",
         }}
       />
+
       <WatchedIndicator item={item} />
       {showProgress && progress > 0 && (
         <View className="h-1 bg-red-600 w-full"></View>

components/posters/ParentPoster.tsx

@@ -28,7 +28,7 @@ const ParentPoster: React.FC<PosterProps> = ({ id }) => {
     );
 
   return (
-    <View className="rounded-md overflow-hidden border border-neutral-900">
+    <View className="rounded-lg overflow-hidden border border-neutral-900">
       <Image
         key={id}
         id={id}

components/posters/Poster.tsx

@@ -24,7 +24,7 @@ const Poster: React.FC<PosterProps> = ({ item, url, blurhash }) => {
     );
 
   return (
-    <View className="rounded-md overflow-hidden border border-neutral-900">
+    <View className="rounded-lg overflow-hidden border border-neutral-900">
       <Image
         placeholder={
           blurhash

components/posters/SeriesPoster.tsx

@@ -15,14 +15,16 @@ type MoviePosterProps = {
 const SeriesPoster: React.FC<MoviePosterProps> = ({ item }) => {
   const [api] = useAtom(apiAtom);
 
-  const url = useMemo(
-    () =>
-      getPrimaryImageUrl({
-        api,
-        item,
-      }),
-    [item]
-  );
+  const url = useMemo(() => {
+    if (item.Type === "Episode") {
+      return `${api?.basePath}/Items/${item.SeriesId}/Images/Primary?fillHeight=389&quality=80&tag=${item.SeriesPrimaryImageTag}`;
+    }
+    return getPrimaryImageUrl({
+      api,
+      item,
+      width: 300,
+    });
+  }, [item]);
 
   const blurhash = useMemo(() => {
     const key = item.ImageTags?.["Primary"] as string;
@@ -30,7 +32,7 @@ const SeriesPoster: React.FC<MoviePosterProps> = ({ item }) => {
   }, [item]);
 
   return (
-    <View className="relative rounded-md overflow-hidden border border-neutral-900">
+    <View className="relative rounded-lg overflow-hidden border border-neutral-900">
       <Image
         placeholder={{
           blurhash,

components/series/CastAndCrew.tsx

@@ -1,37 +1,35 @@
+import { apiAtom } from "@/providers/JellyfinProvider";
+import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
 import {
   BaseItemDto,
   BaseItemPerson,
 } from "@jellyfin/sdk/lib/generated-client/models";
+import { router } from "expo-router";
+import { useAtom } from "jotai";
 import React from "react";
-import { Linking, TouchableOpacity, View } from "react-native";
+import { TouchableOpacity, View, ViewProps } from "react-native";
 import { HorizontalScroll } from "../common/HorrizontalScroll";
 import { Text } from "../common/Text";
 import Poster from "../posters/Poster";
-import { useAtom } from "jotai";
-import { apiAtom } from "@/providers/JellyfinProvider";
-import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
-import { router, usePathname } from "expo-router";
-import { useSettings } from "@/utils/atoms/settings";
 
-export const CastAndCrew = ({ item }: { item: BaseItemDto }) => {
+interface Props extends ViewProps {
+  item?: BaseItemDto | null;
+  loading?: boolean;
+}
+
+export const CastAndCrew: React.FC<Props> = ({ item, loading, ...props }) => {
   const [api] = useAtom(apiAtom);
 
-  const [settings] = useSettings();
-
-  const pathname = usePathname();
-
   return (
-    <View>
+    <View {...props} className="flex flex-col">
       <Text className="text-lg font-bold mb-2 px-4">Cast & Crew</Text>
-      <HorizontalScroll<NonNullable<BaseItemPerson>>
-        data={item.People}
+      <HorizontalScroll
+        loading={loading}
+        data={item?.People || []}
         renderItem={(item, index) => (
           <TouchableOpacity
             onPress={() => {
-              if (settings?.searchEngine === "Marlin")
-                router.push(`/search?q=${item.Name}&prev=${pathname}`);
-              else
-                Linking.openURL(`https://www.google.com/search?q=${item.Name}`);
+              router.push(`/actors/${item.Id}`);
             }}
             key={item.Id}
             className="flex flex-col w-32"

components/series/CurrentSeries.tsx

@@ -3,19 +3,23 @@ import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { router } from "expo-router";
 import { useAtom } from "jotai";
 import React from "react";
-import { TouchableOpacity, View } from "react-native";
+import { TouchableOpacity, View, ViewProps } from "react-native";
 import Poster from "../posters/Poster";
 import { HorizontalScroll } from "../common/HorrizontalScroll";
 import { Text } from "../common/Text";
 import { getPrimaryImageUrlById } from "@/utils/jellyfin/image/getPrimaryImageUrlById";
 
-export const CurrentSeries = ({ item }: { item: BaseItemDto }) => {
+interface Props extends ViewProps {
+  item?: BaseItemDto | null;
+}
+
+export const CurrentSeries: React.FC<Props> = ({ item, ...props }) => {
   const [api] = useAtom(apiAtom);
 
   return (
-    <View>
+    <View {...props}>
       <Text className="text-lg font-bold mb-2 px-4">Series</Text>
-      <HorizontalScroll<BaseItemDto>
+      <HorizontalScroll
         data={[item]}
         renderItem={(item, index) => (
           <TouchableOpacity

components/series/EpisodeTitleHeader.tsx

@@ -0,0 +1,34 @@
+import { Text } from "@/components/common/Text";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { useRouter } from "expo-router";
+import { TouchableOpacity, View, ViewProps } from "react-native";
+
+interface Props extends ViewProps {
+  item: BaseItemDto;
+}
+
+export const EpisodeTitleHeader: React.FC<Props> = ({ item, ...props }) => {
+  const router = useRouter();
+
+  return (
+    <View {...props}>
+      <Text className="font-bold text-2xl">{item?.Name}</Text>
+      <View className="flex flex-row items-center mb-1">
+        <TouchableOpacity
+          onPress={() => {
+            router.push(
+              // @ts-ignore
+              `/(auth)/series/${item.SeriesId}?seasonIndex=${item?.ParentIndexNumber}`
+            );
+          }}
+        >
+          <Text className="opacity-50">{item?.SeasonName}</Text>
+        </TouchableOpacity>
+
+        <Text className="opacity-50 mx-2">{"—"}</Text>
+        <Text className="opacity-50">{`Episode ${item.IndexNumber}`}</Text>
+      </View>
+      <Text className="opacity-50">{item?.ProductionYear}</Text>
+    </View>
+  );
+};

components/series/NextEpisodeButton.tsx

@@ -23,40 +23,6 @@ export const NextEpisodeButton: React.FC<Props> = ({
   const [user] = useAtom(userAtom);
   const [api] = useAtom(apiAtom);
 
-  // const { data: seasons } = useQuery({
-  //   queryKey: ["seasons", item.SeriesId],
-  //   queryFn: async () => {
-  //     if (
-  //       !api ||
-  //       !user?.Id ||
-  //       !item?.Id ||
-  //       !item?.SeriesId ||
-  //       !item?.IndexNumber
-  //     )
-  //       return [];
-
-  //     const response = await getItemsApi(api).getItems({
-  //       parentId: item?.SeriesId,
-  //     });
-
-  //     console.log("seasons ~", type, response.data);
-
-  //     return (response.data.Items as BaseItemDto[]) ?? [];
-  //   },
-  //   enabled: Boolean(api && user?.Id && item?.Id && item.SeasonId),
-  // });
-
-  // const nextSeason = useMemo(() => {
-  //   if (!seasons) return null;
-  //   const currentSeasonIndex = seasons.findIndex(
-  //     (season) => season.Id === item.SeasonId,
-  //   );
-
-  //   if (currentSeasonIndex === seasons.length - 1) return null;
-
-  //   return seasons[currentSeasonIndex + 1];
-  // }, [seasons]);
-
   const { data: nextEpisode } = useQuery({
     queryKey: ["nextEpisode", item.Id, item.ParentId, type],
     queryFn: async () => {
@@ -90,7 +56,7 @@ export const NextEpisodeButton: React.FC<Props> = ({
 
   return (
     <Button
-      onPress={() => router.replace(`/items/${nextEpisode?.Id}`)}
+      onPress={() => router.setParams({ id: nextEpisode?.Id })}
       className={`h-12 aspect-square`}
       disabled={disabled}
       {...props}

components/series/NextUp.tsx

@@ -1,17 +1,15 @@
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { getTvShowsApi } from "@jellyfin/sdk/lib/utils/api";
+import { useQuery } from "@tanstack/react-query";
+import { router } from "expo-router";
+import { useAtom } from "jotai";
 import React from "react";
 import { TouchableOpacity, View } from "react-native";
 import { HorizontalScroll } from "../common/HorrizontalScroll";
 import { Text } from "../common/Text";
-import Poster from "../posters/Poster";
 import ContinueWatchingPoster from "../ContinueWatchingPoster";
 import { ItemCardText } from "../ItemCardText";
-import { router } from "expo-router";
-import { useQuery } from "@tanstack/react-query";
-import { useAtom } from "jotai";
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { nextUp } from "@/utils/jellyfin/tvshows/nextUp";
-import { getTvShowsApi } from "@jellyfin/sdk/lib/utils/api";
 
 export const NextUp: React.FC<{ seriesId: string }> = ({ seriesId }) => {
   const [user] = useAtom(userAtom);
@@ -26,6 +24,7 @@ export const NextUp: React.FC<{ seriesId: string }> = ({ seriesId }) => {
           userId: user?.Id,
           seriesId,
           fields: ["MediaSourceCount"],
+          limit: 10,
         })
       ).data.Items;
     },
@@ -35,7 +34,7 @@ export const NextUp: React.FC<{ seriesId: string }> = ({ seriesId }) => {
 
   if (!items?.length)
     return (
-      <View>
+      <View className="px-4">
         <Text className="text-lg font-bold mb-2">Next up</Text>
         <Text className="opacity-50">No items to display</Text>
       </View>
@@ -44,17 +43,17 @@ export const NextUp: React.FC<{ seriesId: string }> = ({ seriesId }) => {
   return (
     <View>
       <Text className="text-lg font-bold mb-2 px-4">Next up</Text>
-      <HorizontalScroll<BaseItemDto>
+      <HorizontalScroll
         data={items}
         renderItem={(item, index) => (
           <TouchableOpacity
             onPress={() => {
-              router.push(`/(auth)/items/${item.Id}`);
+              router.push(`/(auth)/items/page?id=${item.Id}`);
             }}
             key={item.Id}
             className="flex flex-col w-44"
           >
-            <ContinueWatchingPoster item={item} />
+            <ContinueWatchingPoster item={item} useEpisodePoster />
             <ItemCardText item={item} />
           </TouchableOpacity>
         )}

components/series/SeasonEpisodesCarousel.tsx

@@ -0,0 +1,143 @@
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { router } from "expo-router";
+import { useAtom } from "jotai";
+import { useEffect, useMemo, useRef } from "react";
+import { TouchableOpacity, View, ViewProps } from "react-native";
+import {
+  HorizontalScroll,
+  HorizontalScrollRef,
+} from "../common/HorrizontalScroll";
+import ContinueWatchingPoster from "../ContinueWatchingPoster";
+import { ItemCardText } from "../ItemCardText";
+
+interface Props extends ViewProps {
+  item?: BaseItemDto | null;
+  loading?: boolean;
+}
+
+export const SeasonEpisodesCarousel: React.FC<Props> = ({
+  item,
+  loading,
+  ...props
+}) => {
+  const [api] = useAtom(apiAtom);
+  const [user] = useAtom(userAtom);
+
+  const scrollRef = useRef<HorizontalScrollRef>(null);
+
+  const scrollToIndex = (index: number) => {
+    scrollRef.current?.scrollToIndex(index, 16);
+  };
+
+  const seasonId = useMemo(() => {
+    return item?.SeasonId;
+  }, [item]);
+
+  const {
+    data: episodes,
+    isLoading,
+    isFetching,
+  } = useQuery({
+    queryKey: ["episodes", seasonId],
+    queryFn: async () => {
+      if (!api || !user?.Id) return [];
+      const response = await api.axiosInstance.get(
+        `${api.basePath}/Shows/${item?.Id}/Episodes`,
+        {
+          params: {
+            userId: user?.Id,
+            seasonId,
+            Fields:
+              "ItemCounts,PrimaryImageAspectRatio,CanDelete,MediaSourceCount,Overview",
+          },
+          headers: {
+            Authorization: `MediaBrowser DeviceId="${api.deviceInfo.id}", Token="${api.accessToken}"`,
+          },
+        }
+      );
+
+      return response.data.Items as BaseItemDto[];
+    },
+    enabled: !!api && !!user?.Id && !!seasonId,
+  });
+
+  /**
+   * Prefetch previous and next episode
+   */
+  const queryClient = useQueryClient();
+  useEffect(() => {
+    if (!item?.Id || !item.IndexNumber || !episodes || episodes.length === 0) {
+      return;
+    }
+
+    const previousId = episodes?.find(
+      (ep) => ep.IndexNumber === item.IndexNumber! - 1
+    )?.Id;
+    if (previousId) {
+      queryClient.prefetchQuery({
+        queryKey: ["item", previousId],
+        queryFn: async () =>
+          await getUserItemData({
+            api,
+            userId: user?.Id,
+            itemId: previousId,
+          }),
+        staleTime: 60 * 1000,
+      });
+    }
+
+    const nextId = episodes?.find(
+      (ep) => ep.IndexNumber === item.IndexNumber! + 1
+    )?.Id;
+    if (nextId) {
+      queryClient.prefetchQuery({
+        queryKey: ["item", nextId],
+        queryFn: async () =>
+          await getUserItemData({
+            api,
+            userId: user?.Id,
+            itemId: nextId,
+          }),
+        staleTime: 60 * 1000,
+      });
+    }
+  }, [episodes, api, user?.Id, item]);
+
+  useEffect(() => {
+    if (item?.Type === "Episode" && item.Id) {
+      const index = episodes?.findIndex((ep) => ep.Id === item.Id);
+      if (index !== undefined && index !== -1) {
+        setTimeout(() => {
+          scrollToIndex(index);
+        }, 400);
+      }
+    }
+  }, [episodes, item]);
+
+  return (
+    <HorizontalScroll
+      ref={scrollRef}
+      data={episodes}
+      extraData={item}
+      loading={loading || isLoading || isFetching}
+      renderItem={(_item, idx) => (
+        <TouchableOpacity
+          key={_item.Id}
+          onPress={() => {
+            router.setParams({ id: _item.Id });
+          }}
+          className={`flex flex-col w-44 
+                  ${item?.Id === _item.Id ? "" : "opacity-50"}
+                `}
+        >
+          <ContinueWatchingPoster item={_item} useEpisodePoster />
+          <ItemCardText item={_item} />
+        </TouchableOpacity>
+      )}
+      {...props}
+    />
+  );
+};

components/series/SeasonPicker.tsx

@@ -1,7 +1,7 @@
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { runtimeTicksToSeconds } from "@/utils/time";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { useQuery } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useRouter } from "expo-router";
 import { atom, useAtom } from "jotai";
 import { useEffect, useMemo, useState } from "react";
@@ -11,9 +11,14 @@ import ContinueWatchingPoster from "../ContinueWatchingPoster";
 import { DownloadItem } from "../DownloadItem";
 import { Loader } from "../Loader";
 import { Text } from "../common/Text";
+import { getTvShowsApi } from "@jellyfin/sdk/lib/utils/api";
+import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
+import { Image } from "expo-image";
+import { getLogoImageUrlById } from "@/utils/jellyfin/image/getLogoImageUrlById";
 
 type Props = {
   item: BaseItemDto;
+  initialSeasonIndex?: number;
 };
 
 type SeasonIndexState = {
@@ -22,7 +27,7 @@ type SeasonIndexState = {
 
 export const seasonIndexAtom = atom<SeasonIndexState>({});
 
-export const SeasonPicker: React.FC<Props> = ({ item }) => {
+export const SeasonPicker: React.FC<Props> = ({ item, initialSeasonIndex }) => {
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
   const [seasonIndexState, setSeasonIndexState] = useAtom(seasonIndexAtom);
@@ -57,15 +62,35 @@ export const SeasonPicker: React.FC<Props> = ({ item }) => {
 
   useEffect(() => {
     if (seasons && seasons.length > 0 && seasonIndex === undefined) {
-      const firstSeason = seasons[0];
-      if (firstSeason.IndexNumber !== undefined) {
+      let initialIndex: number | undefined;
+
+      if (initialSeasonIndex !== undefined) {
+        // Use the provided initialSeasonIndex if it exists in the seasons
+        const seasonExists = seasons.some(
+          (season: any) => season.IndexNumber === initialSeasonIndex
+        );
+        if (seasonExists) {
+          initialIndex = initialSeasonIndex;
+        }
+      }
+
+      if (initialIndex === undefined) {
+        // Fall back to the previous logic if initialIndex is not set
+        const season1 = seasons.find((season: any) => season.IndexNumber === 1);
+        const season0 = seasons.find((season: any) => season.IndexNumber === 0);
+        const firstSeason = season1 || season0 || seasons[0];
+        initialIndex = firstSeason.IndexNumber;
+      }
+
+      if (initialIndex !== undefined) {
         setSeasonIndexState((prev) => ({
           ...prev,
-          [item.Id ?? ""]: firstSeason.IndexNumber,
+          [item.Id ?? ""]: initialIndex,
         }));
       }
     }
-  }, [seasons, seasonIndex, setSeasonIndexState, item.Id]);
+  }, [seasons, seasonIndex, setSeasonIndexState, item.Id, initialSeasonIndex]);
+
   const selectedSeasonId: string | null = useMemo(
     () =>
       seasons?.find((season: any) => season.IndexNumber === seasonIndex)?.Id,
@@ -75,27 +100,39 @@ export const SeasonPicker: React.FC<Props> = ({ item }) => {
   const { data: episodes, isFetching } = useQuery({
     queryKey: ["episodes", item.Id, selectedSeasonId],
     queryFn: async () => {
-      if (!api || !user?.Id || !item.Id) return [];
-      const response = await api.axiosInstance.get(
-        `${api.basePath}/Shows/${item.Id}/Episodes`,
-        {
-          params: {
-            userId: user?.Id,
-            seasonId: selectedSeasonId,
-            Fields:
-              "ItemCounts,PrimaryImageAspectRatio,CanDelete,MediaSourceCount,Overview",
-          },
-          headers: {
-            Authorization: `MediaBrowser DeviceId="${api.deviceInfo.id}", Token="${api.accessToken}"`,
-          },
-        }
-      );
+      if (!api || !user?.Id || !item.Id || !selectedSeasonId) return [];
+      const res = await getTvShowsApi(api).getEpisodes({
+        seriesId: item.Id,
+        userId: user.Id,
+        seasonId: selectedSeasonId,
+        enableUserData: true,
+        fields: ["MediaSources", "MediaStreams", "Overview"],
+      });
 
-      return response.data.Items as BaseItemDto[];
+      return res.data.Items;
     },
     enabled: !!api && !!user?.Id && !!item.Id && !!selectedSeasonId,
   });
 
+  const queryClient = useQueryClient();
+  useEffect(() => {
+    for (let e of episodes || []) {
+      queryClient.prefetchQuery({
+        queryKey: ["item", e.Id],
+        queryFn: async () => {
+          if (!e.Id) return;
+          const res = await getUserItemData({
+            api,
+            userId: user?.Id,
+            itemId: e.Id,
+          });
+          return res;
+        },
+        staleTime: 60 * 5 * 1000,
+      });
+    }
+  }, [episodes]);
+
   // Used for height calculation
   const [nrOfEpisodes, setNrOfEpisodes] = useState(0);
   useEffect(() => {
@@ -143,26 +180,6 @@ export const SeasonPicker: React.FC<Props> = ({ item }) => {
           ))}
         </DropdownMenu.Content>
       </DropdownMenu.Root>
-      {/* Old View. Might have a setting later to manually select view. */}
-      {/* {episodes && (
-        <View className="mt-4">
-          <HorizontalScroll<BaseItemDto>
-            data={episodes}
-            renderItem={(item, index) => (
-              <TouchableOpacity
-                key={item.Id}
-                onPress={() => {
-                  router.push(`/(auth)/items/${item.Id}`);
-                }}
-                className="flex flex-col w-48"
-              >
-                <ContinueWatchingPoster item={item} />
-                <ItemCardText item={item} />
-              </TouchableOpacity>
-            )}
-          />
-        </View>
-      )} */}
       <View className="px-4 flex flex-col my-4">
         {isFetching ? (
           <View
@@ -178,13 +195,17 @@ export const SeasonPicker: React.FC<Props> = ({ item }) => {
             <TouchableOpacity
               key={e.Id}
               onPress={() => {
-                router.push(`/(auth)/items/${e.Id}`);
+                router.push(`/(auth)/items/page?id=${e.Id}`);
               }}
               className="flex flex-col mb-4"
             >
               <View className="flex flex-row items-center mb-2">
                 <View className="w-32 aspect-video overflow-hidden mr-2">
-                  <ContinueWatchingPoster item={e} width={128} />
+                  <ContinueWatchingPoster
+                    item={e}
+                    width={128}
+                    useEpisodePoster
+                  />
                 </View>
                 <View className="shrink">
                   <Text numberOfLines={2} className="">

components/series/SeriesTitleHeader.tsx

@@ -1,37 +0,0 @@
-import { TouchableOpacity, View, ViewProps } from "react-native";
-import { Text } from "@/components/common/Text";
-import { useRouter } from "expo-router";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-
-interface Props extends ViewProps {
-  item: BaseItemDto;
-}
-
-export const SeriesTitleHeader: React.FC<Props> = ({ item, ...props }) => {
-  const router = useRouter();
-  return (
-    <>
-      <TouchableOpacity
-        onPress={() => router.push(`/(auth)/series/${item.SeriesId}`)}
-      >
-        <Text className="text-center opacity-50">{item?.SeriesName}</Text>
-      </TouchableOpacity>
-      <View className="flex flex-row items-center self-center px-4">
-        <Text className="text-center font-bold text-2xl mr-2">
-          {item?.Name}
-        </Text>
-      </View>
-      <View>
-        <View className="flex flex-row items-center self-center">
-          <TouchableOpacity onPress={() => {}}>
-            <Text className="text-center opacity-50">{item?.SeasonName}</Text>
-          </TouchableOpacity>
-          <Text className="text-center opacity-50 mx-2">{"—"}</Text>
-          <Text className="text-center opacity-50">
-            {`Episode ${item.IndexNumber}`}
-          </Text>
-        </View>
-      </View>
-    </>
-  );
-};

components/settings/SettingToggles.tsx

@@ -58,7 +58,7 @@ export const SettingToggles: React.FC = () => {
           onValueChange={(value) => updateSettings({ autoRotate: value })}
         />
       </View>
-      <View
+      {/* <View
         className={`
             flex flex-row items-center space-x-2 justify-between bg-neutral-900 p-4
           `}
@@ -66,7 +66,7 @@ export const SettingToggles: React.FC = () => {
         <View className="flex flex-col shrink">
           <Text className="font-semibold">Download quality</Text>
           <Text className="text-xs opacity-50">
-            Choose the search engine you want to use.
+            Choose the download quality.
           </Text>
         </View>
         <DropdownMenu.Root>
@@ -97,7 +97,7 @@ export const SettingToggles: React.FC = () => {
             ))}
           </DropdownMenu.Content>
         </DropdownMenu.Root>
-      </View>
+      </View> */}
       <View className="flex flex-row items-center justify-between bg-neutral-900 p-4">
         <View className="shrink">
           <Text className="font-semibold">Start videos in fullscreen</Text>

components/stacks/NestedTabPageStack.tsx

@@ -0,0 +1,24 @@
+import { Stack } from "expo-router";
+import { Chromecast } from "../Chromecast";
+import { HeaderBackButton } from "../common/HeaderBackButton";
+
+const commonScreenOptions = {
+  title: "",
+  headerShown: true,
+  headerTransparent: true,
+  headerShadowVisible: false,
+  headerLeft: () => <HeaderBackButton />,
+};
+
+const routes = [
+  "actors/[actorId]",
+  "albums/[albumId]",
+  "artists/index",
+  "artists/[artistId]",
+  "collections/[collectionId]",
+  "items/page",
+  "series/[id]",
+];
+
+export const nestedTabPageScreenOptions: { [key: string]: any } =
+  Object.fromEntries(routes.map((route) => [route, commonScreenOptions]));

eas.json

@@ -21,13 +21,13 @@
       }
     },
     "production": {
-      "channel": "0.8.1",
+      "channel": "0.10.3",
       "android": {
         "image": "latest"
       }
     },
     "production-apk": {
-      "channel": "0.8.1",
+      "channel": "0.10.3",
       "android": {
         "buildType": "apk",
         "image": "latest"

hooks/useFiles.ts

@@ -26,11 +26,12 @@ export const useFiles = () => {
         fileNames.map((item) =>
           FileSystem.deleteAsync(`${directoryUri}/${item}`, {
             idempotent: true,
-          }),
-        ),
+          })
+        )
       );
       await AsyncStorage.removeItem("downloaded_files");
       queryClient.invalidateQueries({ queryKey: ["downloaded_files"] });
+      queryClient.invalidateQueries({ queryKey: ["downloaded"] });
     } catch (error) {
       console.error("Failed to delete all files:", error);
     }
@@ -49,7 +50,7 @@ export const useFiles = () => {
     try {
       await FileSystem.deleteAsync(
         `${FileSystem.documentDirectory}/${id}.mp4`,
-        { idempotent: true },
+        { idempotent: true }
       );
 
       const currentFiles = await getDownloadedFiles();
@@ -57,7 +58,7 @@ export const useFiles = () => {
 
       await AsyncStorage.setItem(
         "downloaded_files",
-        JSON.stringify(updatedFiles),
+        JSON.stringify(updatedFiles)
       );
 
       queryClient.invalidateQueries({ queryKey: ["downloaded_files"] });

hooks/useImageColors.ts

@@ -0,0 +1,46 @@
+import { itemThemeColorAtom } from "@/utils/atoms/primaryColor";
+import { useAtom } from "jotai";
+import { useEffect } from "react";
+import { getColors } from "react-native-image-colors";
+
+export const useImageColors = (
+  uri: string | undefined | null,
+  disabled = false
+) => {
+  const [, setPrimaryColor] = useAtom(itemThemeColorAtom);
+
+  useEffect(() => {
+    if (disabled) return;
+    if (uri) {
+      getColors(uri, {
+        fallback: "#fff",
+        cache: true,
+        key: uri,
+      })
+        .then((colors) => {
+          let primary: string = "#fff";
+          let average: string = "#fff";
+          let secondary: string = "#fff";
+
+          if (colors.platform === "android") {
+            primary = colors.dominant;
+            average = colors.average;
+            secondary = colors.muted;
+          } else if (colors.platform === "ios") {
+            primary = colors.primary;
+            secondary = colors.detail;
+            average = colors.background;
+          }
+
+          setPrimaryColor({
+            primary,
+            secondary,
+            average,
+          });
+        })
+        .catch((error) => {
+          console.error("Error getting colors", error);
+        });
+    }
+  }, [uri, setPrimaryColor, disabled]);
+};

hooks/useInterval.ts

@@ -0,0 +1,19 @@
+import { useEffect, useRef } from "react";
+
+export function useInterval(callback: () => void, delay: number | null) {
+  const savedCallback = useRef<() => void>();
+
+  useEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+
+  useEffect(() => {
+    function tick() {
+      savedCallback.current?.();
+    }
+    if (delay !== null) {
+      const id = setInterval(tick, delay);
+      return () => clearInterval(id);
+    }
+  }, [delay]);
+}

package.json

@@ -30,16 +30,17 @@
     "@types/lodash": "^4.17.7",
     "@types/uuid": "^10.0.0",
     "axios": "^1.7.3",
-    "expo": "~51.0.28",
+    "expo": "~51.0.31",
     "expo-blur": "~13.0.2",
     "expo-build-properties": "~0.12.5",
     "expo-constants": "~16.0.2",
-    "expo-dev-client": "~4.0.23",
+    "expo-dev-client": "~4.0.25",
     "expo-device": "~6.0.2",
     "expo-font": "~12.0.9",
     "expo-haptics": "~13.0.1",
-    "expo-image": "~1.12.14",
+    "expo-image": "~1.12.15",
     "expo-keep-awake": "~13.0.2",
+    "expo-linear-gradient": "~13.0.2",
     "expo-linking": "~6.3.1",
     "expo-navigation-bar": "~3.0.7",
     "expo-router": "~3.5.23",
@@ -48,7 +49,7 @@
     "expo-splash-screen": "~0.27.5",
     "expo-status-bar": "~1.12.1",
     "expo-system-ui": "~3.0.7",
-    "expo-updates": "~0.25.22",
+    "expo-updates": "~0.25.24",
     "expo-web-browser": "~13.0.3",
     "ffmpeg-kit-react-native": "^6.0.2",
     "jotai": "^2.9.1",
@@ -62,6 +63,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",
@@ -71,7 +73,7 @@
     "react-native-svg": "15.2.0",
     "react-native-url-polyfill": "^2.0.0",
     "react-native-uuid": "^2.0.2",
-    "react-native-video": "^6.4.3",
+    "react-native-video": "^6.4.5",
     "react-native-web": "~0.19.10",
     "tailwindcss": "3.3.2",
     "use-debounce": "^10.0.3",

plugins/withAndroidMainActivityAttributes.js

@@ -0,0 +1,42 @@
+const { withAndroidManifest } = require("@expo/config-plugins");
+
+function addAttributesToMainActivity(androidManifest, attributes) {
+  const { manifest } = androidManifest;
+
+  if (!Array.isArray(manifest["application"])) {
+    console.warn("withAndroidMainActivityAttributes: No application array in manifest?");
+    return androidManifest;
+  }
+
+  const application = manifest["application"].find(
+    (item) => item.$["android:name"] === ".MainApplication"
+  );
+  if (!application) {
+    console.warn("withAndroidMainActivityAttributes: No .MainApplication?");
+    return androidManifest;
+  }
+
+  if (!Array.isArray(application["activity"])) {
+    console.warn("withAndroidMainActivityAttributes: No activity array in .MainApplication?");
+    return androidManifest;
+  }
+
+  const activity = application["activity"].find(
+    (item) => item.$["android:name"] === ".MainActivity"
+  );
+  if (!activity) {
+    console.warn("withAndroidMainActivityAttributes: No .MainActivity?");
+    return androidManifest;
+  }
+
+  activity.$ = { ...activity.$, ...attributes };
+
+  return androidManifest;
+}
+
+module.exports = function withAndroidMainActivityAttributes(config, attributes) {
+  return withAndroidManifest(config, (config) => {
+    config.modResults = addAttributesToMainActivity(config.modResults, attributes);
+    return config;
+  });
+};

plugins/withExpandedController.js

@@ -0,0 +1,20 @@
+const { withAppDelegate } = require("@expo/config-plugins");
+
+const withExpandedController = (config) => {
+  return withAppDelegate(config, async (config) => {
+    const contents = config.modResults.contents;
+
+    // Looking for the initialProps string inside didFinishLaunchingWithOptions,
+    // and injecting expanded controller config.
+    // Should be updated once there is an expo config option - see https://github.com/react-native-google-cast/react-native-google-cast/discussions/537
+    const injectionIndex = contents.indexOf("self.initialProps = @{};");
+    config.modResults.contents =
+      contents.substring(0, injectionIndex) +
+      `\n [GCKCastContext sharedInstance].useDefaultExpandedMediaControls = true; \n` +
+      contents.substring(injectionIndex);
+
+    return config;
+  });
+};
+
+module.exports = withExpandedController;

providers/JellyfinProvider.tsx

@@ -1,20 +1,19 @@
-import {
-  currentlyPlayingItemAtom,
-  playingAtom,
-  showCurrentlyPlayingBarAtom,
-} from "@/utils/atoms/playState";
+import { useInterval } from "@/hooks/useInterval";
 import { Api, Jellyfin } from "@jellyfin/sdk";
 import { UserDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { getUserApi } from "@jellyfin/sdk/lib/utils/api";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import { useMutation, useQuery } from "@tanstack/react-query";
-import axios from "axios";
+import axios, { AxiosError } from "axios";
 import { router, useSegments } from "expo-router";
 import { atom, useAtom } from "jotai";
 import React, {
   createContext,
   ReactNode,
+  useCallback,
   useContext,
   useEffect,
+  useMemo,
   useState,
 } from "react";
 import { Platform } from "react-native";
@@ -34,6 +33,7 @@ interface JellyfinContextValue {
   removeServer: () => void;
   login: (username: string, password: string) => Promise<void>;
   logout: () => Promise<void>;
+  initiateQuickConnect: () => Promise<string | undefined>;
 }
 
 const JellyfinContext = createContext<JellyfinContextValue | undefined>(
@@ -56,7 +56,6 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
 }) => {
   const [jellyfin, setJellyfin] = useState<Jellyfin | undefined>(undefined);
   const [deviceId, setDeviceId] = useState<string | undefined>(undefined);
-  const [isConnected, setIsConnected] = useState<boolean>(false);
 
   useEffect(() => {
     (async () => {
@@ -64,7 +63,7 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
       setJellyfin(
         () =>
           new Jellyfin({
-            clientInfo: { name: "Streamyfin", version: "0.8.1" },
+            clientInfo: { name: "Streamyfin", version: "0.10.3" },
             deviceInfo: { name: Platform.OS === "ios" ? "iOS" : "Android", id },
           })
       );
@@ -74,6 +73,101 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
 
   const [api, setApi] = useAtom(apiAtom);
   const [user, setUser] = useAtom(userAtom);
+  const [isPolling, setIsPolling] = useState<boolean>(false);
+  const [secret, setSecret] = useState<string | null>(null);
+
+  useQuery({
+    queryKey: ["user", api],
+    queryFn: async () => {
+      if (!api) return null;
+      const response = await getUserApi(api).getCurrentUser();
+      if (response.data) setUser(response.data);
+      return user;
+    },
+    enabled: !!api,
+    refetchOnWindowFocus: true,
+    refetchInterval: 1000 * 60,
+    refetchIntervalInBackground: true,
+    refetchOnMount: true,
+    refetchOnReconnect: true,
+  });
+
+  const headers = useMemo(() => {
+    if (!deviceId) return {};
+    return {
+      authorization: `MediaBrowser Client="Streamyfin", Device=${
+        Platform.OS === "android" ? "Android" : "iOS"
+      }, DeviceId="${deviceId}", Version="0.10.3"`,
+    };
+  }, [deviceId]);
+
+  const initiateQuickConnect = useCallback(async () => {
+    if (!api || !deviceId) return;
+    try {
+      const response = await api.axiosInstance.post(
+        api.basePath + "/QuickConnect/Initiate",
+        null,
+        {
+          headers,
+        }
+      );
+      if (response?.status === 200) {
+        setSecret(response?.data?.Secret);
+        setIsPolling(true);
+        return response.data?.Code;
+      } else {
+        throw new Error("Failed to initiate quick connect");
+      }
+    } catch (error) {
+      console.error(error);
+      throw error;
+    }
+  }, [api, deviceId, headers]);
+
+  const pollQuickConnect = useCallback(async () => {
+    if (!api || !secret) return;
+
+    try {
+      const response = await api.axiosInstance.get(
+        `${api.basePath}/QuickConnect/Connect?Secret=${secret}`
+      );
+
+      if (response.status === 200) {
+        if (response.data.Authenticated) {
+          setIsPolling(false);
+
+          const authResponse = await api.axiosInstance.post(
+            api.basePath + "/Users/AuthenticateWithQuickConnect",
+            {
+              secret,
+            },
+            {
+              headers,
+            }
+          );
+
+          const { AccessToken, User } = authResponse.data;
+          api.accessToken = AccessToken;
+          setUser(User);
+          await AsyncStorage.setItem("token", AccessToken);
+          await AsyncStorage.setItem("user", JSON.stringify(User));
+          return true;
+        }
+      }
+      return false;
+    } catch (error) {
+      if (error instanceof AxiosError && error.response?.status === 400) {
+        setIsPolling(false);
+        setSecret(null);
+        throw new Error("The code has expired. Please try again.");
+      } else {
+        console.error("Error polling Quick Connect:", error);
+        throw error;
+      }
+    }
+  }, [api, secret, headers]);
+
+  useInterval(pollQuickConnect, isPolling ? 1000 : null);
 
   const discoverServers = async (url: string): Promise<Server[]> => {
     const servers = await jellyfin?.discovery.getRecommendedServerCandidates(
@@ -127,7 +221,6 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
         }
       } catch (error) {
         if (axios.isAxiosError(error)) {
-          console.log("Axios error", error.response?.status);
           switch (error.response?.status) {
             case 401:
               throw new Error("Invalid username or password");
@@ -204,6 +297,7 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
     login: (username, password) =>
       loginMutation.mutateAsync({ username, password }),
     logout: () => logoutMutation.mutateAsync(),
+    initiateQuickConnect,
   };
 
   useProtectedRoute(user, isLoading || isFetching);
@@ -233,7 +327,7 @@ function useProtectedRoute(user: UserDto | null, loading = false) {
     if (!user?.Id && inAuthGroup) {
       router.replace("/login");
     } else if (user?.Id && !inAuthGroup) {
-      router.replace("/home");
+      router.replace("/(auth)/(tabs)/(home)/");
     }
   }, [user, segments, loading]);
 }

providers/PlaybackProvider.tsx

@@ -10,19 +10,21 @@ import React, {
 } from "react";
 
 import { useSettings } from "@/utils/atoms/settings";
+import { getDeviceId } from "@/utils/device";
 import { reportPlaybackProgress } from "@/utils/jellyfin/playstate/reportPlaybackProgress";
 import { reportPlaybackStopped } from "@/utils/jellyfin/playstate/reportPlaybackStopped";
+import { postCapabilities } from "@/utils/jellyfin/session/capabilities";
 import {
   BaseItemDto,
   PlaybackInfoResponse,
 } from "@jellyfin/sdk/lib/generated-client/models";
 import { getMediaInfoApi } from "@jellyfin/sdk/lib/utils/api";
+import * as Linking from "expo-linking";
 import { useAtom } from "jotai";
+import { debounce } from "lodash";
+import { Alert, Platform } from "react-native";
 import { OnProgressData, type VideoRef } from "react-native-video";
 import { apiAtom, userAtom } from "./JellyfinProvider";
-import { getDeviceId } from "@/utils/device";
-import * as Linking from "expo-linking";
-import { Platform } from "react-native";
 
 type CurrentlyPlayingState = {
   url: string;
@@ -36,14 +38,15 @@ interface PlaybackContextType {
   isPlaying: boolean;
   isFullscreen: boolean;
   progressTicks: number | null;
-  playVideo: () => void;
-  pauseVideo: () => void;
+  playVideo: (triggerRef?: boolean) => void;
+  pauseVideo: (triggerRef?: boolean) => void;
   stopPlayback: () => void;
   presentFullscreenPlayer: () => void;
   dismissFullscreenPlayer: () => void;
   setIsFullscreen: (isFullscreen: boolean) => void;
   setIsPlaying: (isPlaying: boolean) => void;
   onProgress: (data: OnProgressData) => void;
+  setVolume: (volume: number) => void;
   setCurrentlyPlayingState: (
     currentlyPlaying: CurrentlyPlayingState | null
   ) => void;
@@ -61,9 +64,13 @@ export const PlaybackProvider: React.FC<{ children: ReactNode }> = ({
 
   const [settings] = useSettings();
 
-  const [isPlaying, setIsPlaying] = useState<boolean>(false);
+  const previousVolume = useRef<number | null>(null);
+
+  const [isPlaying, _setIsPlaying] = useState<boolean>(false);
   const [isFullscreen, setIsFullscreen] = useState<boolean>(false);
   const [progressTicks, setProgressTicks] = useState<number | null>(0);
+  const [volume, _setVolume] = useState<number | null>(null);
+  const [session, setSession] = useState<PlaybackInfoResponse | null>(null);
   const [currentlyPlaying, setCurrentlyPlaying] =
     useState<CurrentlyPlayingState | null>(null);
 
@@ -71,18 +78,14 @@ export const PlaybackProvider: React.FC<{ children: ReactNode }> = ({
   const [ws, setWs] = useState<WebSocket | null>(null);
   const [isConnected, setIsConnected] = useState(false);
 
-  const { data: sessionData } = useQuery({
-    queryKey: ["sessionData", currentlyPlaying?.item.Id, user?.Id, api],
-    queryFn: async () => {
-      if (!currentlyPlaying?.item.Id) return null;
-      const playbackData = await getMediaInfoApi(api!).getPlaybackInfo({
-        itemId: currentlyPlaying?.item.Id,
-        userId: user?.Id,
-      });
-      return playbackData.data;
+  const setVolume = useCallback(
+    (newVolume: number) => {
+      previousVolume.current = volume;
+      _setVolume(newVolume);
+      videoRef.current?.setVolume(newVolume);
     },
-    enabled: !!currentlyPlaying?.item.Id && !!api && !!user?.Id,
-  });
+    [_setVolume]
+  );
 
   const { data: deviceId } = useQuery({
     queryKey: ["deviceId", api],
@@ -90,82 +93,122 @@ export const PlaybackProvider: React.FC<{ children: ReactNode }> = ({
   });
 
   const setCurrentlyPlayingState = useCallback(
-    (state: CurrentlyPlayingState | null) => {
-      const vlcLink = "vlc://" + state?.url;
-      console.log(vlcLink, settings?.openInVLC, Platform.OS === "ios");
-      if (vlcLink && settings?.openInVLC) {
-        Linking.openURL("vlc://" + state?.url || "");
-        return;
-      }
+    async (state: CurrentlyPlayingState | null) => {
+      if (!api) return;
 
-      if (state) {
+      if (state && state.item.Id && user?.Id) {
+        const vlcLink = "vlc://" + state?.url;
+        if (vlcLink && settings?.openInVLC) {
+          Linking.openURL("vlc://" + state?.url || "");
+          return;
+        }
+
+        const res = await getMediaInfoApi(api).getPlaybackInfo({
+          itemId: state.item.Id,
+          userId: user.Id,
+        });
+
+        await postCapabilities({
+          api,
+          itemId: state.item.Id,
+          sessionId: res.data.PlaySessionId,
+        });
+
+        setSession(res.data);
         setCurrentlyPlaying(state);
         setIsPlaying(true);
 
-        if (settings?.openFullScreenVideoPlayerByDefault)
-          presentFullscreenPlayer();
+        if (settings?.openFullScreenVideoPlayerByDefault) {
+          setTimeout(() => {
+            presentFullscreenPlayer();
+          }, 300);
+        }
       } else {
         setCurrentlyPlaying(null);
         setIsFullscreen(false);
         setIsPlaying(false);
       }
     },
-    [settings]
+    [settings, user, api]
   );
 
-  // Define control methods
-  const playVideo = useCallback(() => {
-    videoRef.current?.resume();
-    setIsPlaying(true);
-    reportPlaybackProgress({
-      api,
-      itemId: currentlyPlaying?.item.Id,
-      positionTicks: progressTicks ? progressTicks : 0,
-      sessionId: sessionData?.PlaySessionId,
-      IsPaused: true,
-    });
-  }, [
-    api,
-    currentlyPlaying?.item.Id,
-    sessionData?.PlaySessionId,
-    progressTicks,
-  ]);
+  const playVideo = useCallback(
+    (triggerRef: boolean = true) => {
+      if (triggerRef === true) {
+        videoRef.current?.resume();
+      }
+      _setIsPlaying(true);
+      reportPlaybackProgress({
+        api,
+        itemId: currentlyPlaying?.item.Id,
+        positionTicks: progressTicks ? progressTicks : 0,
+        sessionId: session?.PlaySessionId,
+        IsPaused: false,
+      });
+    },
+    [api, currentlyPlaying?.item.Id, session?.PlaySessionId, progressTicks]
+  );
 
-  const pauseVideo = useCallback(() => {
-    videoRef.current?.pause();
-    setIsPlaying(false);
-    reportPlaybackProgress({
-      api,
-      itemId: currentlyPlaying?.item.Id,
-      positionTicks: progressTicks ? progressTicks : 0,
-      sessionId: sessionData?.PlaySessionId,
-      IsPaused: false,
-    });
-  }, [sessionData?.PlaySessionId, currentlyPlaying?.item.Id, progressTicks]);
+  const pauseVideo = useCallback(
+    (triggerRef: boolean = true) => {
+      if (triggerRef === true) {
+        videoRef.current?.pause();
+      }
+      _setIsPlaying(false);
+      reportPlaybackProgress({
+        api,
+        itemId: currentlyPlaying?.item.Id,
+        positionTicks: progressTicks ? progressTicks : 0,
+        sessionId: session?.PlaySessionId,
+        IsPaused: true,
+      });
+    },
+    [session?.PlaySessionId, currentlyPlaying?.item.Id, progressTicks]
+  );
 
   const stopPlayback = useCallback(async () => {
     await reportPlaybackStopped({
       api,
       itemId: currentlyPlaying?.item?.Id,
-      sessionId: sessionData?.PlaySessionId,
+      sessionId: session?.PlaySessionId,
       positionTicks: progressTicks ? progressTicks : 0,
     });
     setCurrentlyPlayingState(null);
-  }, [currentlyPlaying, sessionData, progressTicks]);
+  }, [currentlyPlaying?.item.Id, session?.PlaySessionId, progressTicks, api]);
 
-  const onProgress = useCallback(
+  const setIsPlaying = useCallback(
+    debounce((value: boolean) => {
+      _setIsPlaying(value);
+    }, 500),
+    []
+  );
+
+  const _onProgress = useCallback(
     ({ currentTime }: OnProgressData) => {
+      if (
+        !session?.PlaySessionId ||
+        !currentlyPlaying?.item.Id ||
+        currentTime === 0
+      )
+        return;
       const ticks = currentTime * 10000000;
       setProgressTicks(ticks);
       reportPlaybackProgress({
         api,
         itemId: currentlyPlaying?.item.Id,
         positionTicks: ticks,
-        sessionId: sessionData?.PlaySessionId,
+        sessionId: session?.PlaySessionId,
         IsPaused: !isPlaying,
       });
     },
-    [sessionData?.PlaySessionId, currentlyPlaying?.item.Id, isPlaying]
+    [session?.PlaySessionId, currentlyPlaying?.item.Id, isPlaying, api]
+  );
+
+  const onProgress = useCallback(
+    debounce((e: OnProgressData) => {
+      _onProgress(e);
+    }, 1000),
+    [_onProgress]
   );
 
   const presentFullscreenPlayer = useCallback(() => {
@@ -181,14 +224,14 @@ export const PlaybackProvider: React.FC<{ children: ReactNode }> = ({
   useEffect(() => {
     if (!deviceId || !api?.accessToken) return;
 
-    const url = `wss://${api?.basePath
+    const protocol = api?.basePath.includes("https") ? "wss" : "ws";
+
+    const url = `${protocol}://${api?.basePath
       .replace("https://", "")
       .replace("http://", "")}/socket?api_key=${
       api?.accessToken
     }&deviceId=${deviceId}`;
 
-    console.log("WS", url);
-
     const newWebSocket = new WebSocket(url);
 
     let keepAliveInterval: NodeJS.Timeout | null = null;
@@ -199,7 +242,6 @@ export const PlaybackProvider: React.FC<{ children: ReactNode }> = ({
       keepAliveInterval = setInterval(() => {
         if (newWebSocket.readyState === WebSocket.OPEN) {
           newWebSocket.send(JSON.stringify({ MessageType: "KeepAlive" }));
-          console.log("KeepAlive message sent");
         }
       }, 30000);
     };
@@ -210,7 +252,6 @@ export const PlaybackProvider: React.FC<{ children: ReactNode }> = ({
     };
 
     newWebSocket.onclose = (e) => {
-      console.log("WebSocket connection closed:", e.reason);
       if (keepAliveInterval) {
         clearInterval(keepAliveInterval);
       }
@@ -233,6 +274,8 @@ export const PlaybackProvider: React.FC<{ children: ReactNode }> = ({
       const json = JSON.parse(e.data);
       const command = json?.Data?.Command;
 
+      console.log("[WS] ~ ", json);
+
       // On PlayPause
       if (command === "PlayPause") {
         console.log("Command ~ PlayPause");
@@ -241,6 +284,19 @@ export const PlaybackProvider: React.FC<{ children: ReactNode }> = ({
       } else if (command === "Stop") {
         console.log("Command ~ Stop");
         stopPlayback();
+      } else if (command === "Mute") {
+        console.log("Command ~ Mute");
+        setVolume(0);
+      } else if (command === "Unmute") {
+        console.log("Command ~ Unmute");
+        setVolume(previousVolume.current || 20);
+      } else if (command === "SetVolume") {
+        console.log("Command ~ SetVolume");
+      } else if (json?.Data?.Name === "DisplayMessage") {
+        console.log("Command ~ DisplayMessage");
+        const title = json?.Data?.Arguments?.Header;
+        const body = json?.Data?.Arguments?.Text;
+        Alert.alert(title, body);
       }
     };
   }, [ws, stopPlayback, playVideo, pauseVideo]);
@@ -250,12 +306,13 @@ export const PlaybackProvider: React.FC<{ children: ReactNode }> = ({
       value={{
         onProgress,
         progressTicks,
+        setVolume,
         setIsPlaying,
         setIsFullscreen,
         isFullscreen,
         isPlaying,
         currentlyPlaying,
-        sessionData,
+        sessionData: session,
         videoRef,
         playVideo,
         setCurrentlyPlayingState,

utils/atoms/filters.ts

@@ -1,50 +1,67 @@
-import {
-  ItemFilter,
-  ItemSortBy,
-  NameGuidPair,
-  SortOrder,
-} from "@jellyfin/sdk/lib/generated-client/models";
-import { atom, useAtom } from "jotai";
+import { atom } from "jotai";
+
+export enum SortByOption {
+  Default = "Default",
+  SortName = "SortName",
+  CommunityRating = "CommunityRating",
+  CriticRating = "CriticRating",
+  DateCreated = "DateCreated",
+  DatePlayed = "DatePlayed",
+  PlayCount = "PlayCount",
+  ProductionYear = "ProductionYear",
+  Runtime = "Runtime",
+  OfficialRating = "OfficialRating",
+  PremiereDate = "PremiereDate",
+  StartDate = "StartDate",
+  IsUnplayed = "IsUnplayed",
+  IsPlayed = "IsPlayed",
+  AirTime = "AirTime",
+  Studio = "Studio",
+  IsFavoriteOrLiked = "IsFavoriteOrLiked",
+  Random = "Random",
+}
+
+export enum SortOrderOption {
+  Ascending = "Ascending",
+  Descending = "Descending",
+}
 
 export const sortOptions: {
-  key: ItemSortBy;
+  key: SortByOption;
   value: string;
 }[] = [
-  { key: "SortName", value: "Name" },
-  { key: "CommunityRating", value: "Community Rating" },
-  { key: "CriticRating", value: "Critics Rating" },
-  { key: "DateCreated", value: "Date Added" },
-  // Only works for shows (last episode added) keeping for future ref.
-  // { key: "DateLastContentAdded", value: "Content Added" },
-  { key: "DatePlayed", value: "Date Played" },
-  { key: "PlayCount", value: "Play Count" },
-  { key: "ProductionYear", value: "Production Year" },
-  { key: "Runtime", value: "Runtime" },
-  { key: "OfficialRating", value: "Official Rating" },
-  { key: "PremiereDate", value: "Premiere Date" },
-  { key: "StartDate", value: "Start Date" },
-  { key: "IsUnplayed", value: "Is Unplayed" },
-  { key: "IsPlayed", value: "Is Played" },
-  // Broken in JF
-  // { key: "VideoBitRate", value: "Video Bit Rate" },
-  { key: "AirTime", value: "Air Time" },
-  { key: "Studio", value: "Studio" },
-  { key: "IsFavoriteOrLiked", value: "Is Favorite Or Liked" },
-  { key: "Random", value: "Random" },
+  { key: SortByOption.Default, value: "Default" },
+  { key: SortByOption.SortName, value: "Name" },
+  { key: SortByOption.CommunityRating, value: "Community Rating" },
+  { key: SortByOption.CriticRating, value: "Critics Rating" },
+  { key: SortByOption.DateCreated, value: "Date Added" },
+  { key: SortByOption.DatePlayed, value: "Date Played" },
+  { key: SortByOption.PlayCount, value: "Play Count" },
+  { key: SortByOption.ProductionYear, value: "Production Year" },
+  { key: SortByOption.Runtime, value: "Runtime" },
+  { key: SortByOption.OfficialRating, value: "Official Rating" },
+  { key: SortByOption.PremiereDate, value: "Premiere Date" },
+  { key: SortByOption.StartDate, value: "Start Date" },
+  { key: SortByOption.IsUnplayed, value: "Is Unplayed" },
+  { key: SortByOption.IsPlayed, value: "Is Played" },
+  { key: SortByOption.AirTime, value: "Air Time" },
+  { key: SortByOption.Studio, value: "Studio" },
+  { key: SortByOption.IsFavoriteOrLiked, value: "Is Favorite Or Liked" },
+  { key: SortByOption.Random, value: "Random" },
 ];
 
 export const sortOrderOptions: {
-  key: SortOrder;
+  key: SortOrderOption;
   value: string;
 }[] = [
-  { key: "Ascending", value: "Ascending" },
-  { key: "Descending", value: "Descending" },
+  { key: SortOrderOption.Ascending, value: "Ascending" },
+  { key: SortOrderOption.Descending, value: "Descending" },
 ];
 
 export const genreFilterAtom = atom<string[]>([]);
 export const tagsFilterAtom = atom<string[]>([]);
 export const yearFilterAtom = atom<string[]>([]);
-export const sortByAtom = atom<[typeof sortOptions][number]>([sortOptions[0]]);
-export const sortOrderAtom = atom<[typeof sortOrderOptions][number]>([
-  sortOrderOptions[0],
+export const sortByAtom = atom<SortByOption[]>([SortByOption.Default]);
+export const sortOrderAtom = atom<SortOrderOption[]>([
+  SortOrderOption.Ascending,
 ]);

utils/atoms/orientation.ts

@@ -0,0 +1,7 @@
+import * as ScreenOrientation from "expo-screen-orientation";
+import { Orientation } from "expo-screen-orientation";
+import { atom } from "jotai";
+
+export const orientationAtom = atom<number>(
+  ScreenOrientation.OrientationLock.PORTRAIT_UP
+);

utils/atoms/primaryColor.ts

@@ -0,0 +1,73 @@
+import { atom, useAtom } from "jotai";
+
+interface ThemeColors {
+  primary: string;
+  secondary: string;
+  average: string;
+  text: string;
+}
+
+const calculateTextColor = (backgroundColor: string): string => {
+  // Convert hex to RGB
+  const r = parseInt(backgroundColor.slice(1, 3), 16);
+  const g = parseInt(backgroundColor.slice(3, 5), 16);
+  const b = parseInt(backgroundColor.slice(5, 7), 16);
+
+  // Calculate perceived brightness
+  // Using the formula: (R * 299 + G * 587 + B * 114) / 1000
+  const brightness = (r * 299 + g * 587 + b * 114) / 1000;
+
+  // Calculate contrast ratio with white and black
+  const contrastWithWhite = calculateContrastRatio([255, 255, 255], [r, g, b]);
+  const contrastWithBlack = calculateContrastRatio([0, 0, 0], [r, g, b]);
+
+  // Use black text if the background is bright and has good contrast with black
+  if (brightness > 180 && contrastWithBlack >= 4.5) {
+    return "#000000";
+  }
+
+  // Otherwise, use white text
+  return "#FFFFFF";
+};
+
+// Helper function to calculate contrast ratio
+const calculateContrastRatio = (rgb1: number[], rgb2: number[]): number => {
+  const l1 = calculateRelativeLuminance(rgb1);
+  const l2 = calculateRelativeLuminance(rgb2);
+  const lighter = Math.max(l1, l2);
+  const darker = Math.min(l1, l2);
+  return (lighter + 0.05) / (darker + 0.05);
+};
+
+// Helper function to calculate relative luminance
+const calculateRelativeLuminance = (rgb: number[]): number => {
+  const [r, g, b] = rgb.map((c) => {
+    c /= 255;
+    return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+  });
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+};
+
+const baseThemeColorAtom = atom<ThemeColors>({
+  primary: "#FFFFFF",
+  secondary: "#000000",
+  average: "#888888",
+  text: "#000000",
+});
+
+export const itemThemeColorAtom = atom(
+  (get) => get(baseThemeColorAtom),
+  (get, set, update: Partial<ThemeColors>) => {
+    const currentColors = get(baseThemeColorAtom);
+    const newColors = { ...currentColors, ...update };
+
+    // Recalculate text color if primary color changes
+    if (update.average) {
+      newColors.text = calculateTextColor(update.average);
+    }
+
+    set(baseThemeColorAtom, newColors);
+  }
+);
+
+export const useItemThemeColor = () => useAtom(itemThemeColorAtom);

utils/atoms/settings.ts

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

utils/getItemImage.ts

@@ -0,0 +1,87 @@
+import { Api } from "@jellyfin/sdk";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { ImageSource } from "expo-image";
+
+interface Props {
+  item: BaseItemDto;
+  api: Api;
+  quality?: number;
+  width?: number;
+  variant?:
+    | "Primary"
+    | "Backdrop"
+    | "ParentBackdrop"
+    | "ParentLogo"
+    | "Logo"
+    | "AlbumPrimary"
+    | "SeriesPrimary"
+    | "Screenshot"
+    | "Thumb";
+}
+
+export const getItemImage = ({
+  item,
+  api,
+  variant = "Primary",
+  quality = 90,
+  width = 1000,
+}: Props) => {
+  if (!api) return null;
+
+  let tag: string | null | undefined;
+  let blurhash: string | null | undefined;
+  let src: ImageSource | null = null;
+
+  switch (variant) {
+    case "Backdrop":
+      if (item.Type === "Episode") {
+        tag = item.ParentBackdropImageTags?.[0];
+        if (!tag) break;
+        blurhash = item.ImageBlurHashes?.Backdrop?.[tag];
+        src = {
+          uri: `${api.basePath}/Items/${item.ParentBackdropItemId}/Images/Backdrop/0?quality=${quality}&tag=${tag}&width=${width}`,
+          blurhash,
+        };
+        break;
+      }
+
+      tag = item.BackdropImageTags?.[0];
+      if (!tag) break;
+      blurhash = item.ImageBlurHashes?.Backdrop?.[tag];
+      src = {
+        uri: `${api.basePath}/Items/${item.Id}/Images/Backdrop/0?quality=${quality}&tag=${tag}&width=${width}`,
+        blurhash,
+      };
+      break;
+    case "Primary":
+      tag = item.ImageTags?.["Primary"];
+      if (!tag) break;
+      blurhash = item.ImageBlurHashes?.Primary?.[tag];
+
+      src = {
+        uri: `${api.basePath}/Items/${item.Id}/Images/Primary?quality=${quality}&tag=${tag}&width=${width}`,
+        blurhash,
+      };
+      break;
+    case "Thumb":
+      tag = item.ImageTags?.["Thumb"];
+      if (!tag) break;
+      blurhash = item.ImageBlurHashes?.Thumb?.[tag];
+
+      src = {
+        uri: `${api.basePath}/Items/${item.Id}/Images/Backdrop?quality=${quality}&tag=${tag}&width=${width}`,
+        blurhash,
+      };
+      break;
+    default:
+      tag = item.ImageTags?.["Primary"];
+      src = {
+        uri: `${api.basePath}/Items/${item.Id}/Images/Primary?quality=${quality}&tag=${tag}&width=${width}`,
+      };
+      break;
+  }
+
+  if (!src?.uri) return null;
+
+  return src;
+};

utils/jellyfin/image/getBackdropUrl.ts

@@ -36,6 +36,10 @@ export const getBackdropUrl = ({
     params.append("fillWidth", width.toString());
   }
 
+  if (item.Type === "Episode") {
+    return getPrimaryImageUrl({ api, item, quality, width });
+  }
+
   if (backdropImageTags) {
     params.append("tag", backdropImageTags);
     return `${api.basePath}/Items/${

utils/jellyfin/image/getLogoImageUrlById.ts

@@ -21,15 +21,29 @@ export const getLogoImageUrlById = ({
     return null;
   }
 
-  const imageTags = item.ImageTags?.["Logo"];
-
-  if (!imageTags) return null;
-
   const params = new URLSearchParams();
 
-  params.append("tag", imageTags);
   params.append("quality", "90");
   params.append("fillHeight", height.toString());
 
+  if (item.Type === "Episode") {
+    const imageTag = item.ParentLogoImageTag;
+    const parentId = item.ParentLogoItemId;
+
+    if (!parentId || !imageTag) {
+      return null;
+    }
+
+    params.append("tag", imageTag);
+
+    return `${api.basePath}/Items/${parentId}/Images/Logo?${params.toString()}`;
+  }
+
+  const imageTag = item.ImageTags?.["Logo"];
+
+  if (!imageTag) return null;
+
+  params.append("tag", imageTag);
+
   return `${api.basePath}/Items/${item.Id}/Images/Logo?${params.toString()}`;
 };

utils/jellyfin/image/getParentBackdropImageUrl.ts

@@ -0,0 +1,42 @@
+import { Api } from "@jellyfin/sdk";
+import {
+  BaseItemDto,
+  BaseItemPerson,
+} from "@jellyfin/sdk/lib/generated-client/models";
+import { isBaseItemDto } from "../jellyfin";
+
+/**
+ * Retrieves the primary image URL for a given item.
+ *
+ * @param api - The Jellyfin API instance.
+ * @param item - The media item to retrieve the backdrop image URL for.
+ * @param quality - The desired image quality (default: 90).
+ */
+export const getParentBackdropImageUrl = ({
+  api,
+  item,
+  quality = 80,
+  width = 400,
+}: {
+  api?: Api | null;
+  item?: BaseItemDto | null;
+  quality?: number | null;
+  width?: number | null;
+}) => {
+  if (!item || !api) {
+    return null;
+  }
+
+  const parentId = item.ParentBackdropItemId;
+  const tag = item.ParentBackdropImageTags?.[0] || "";
+
+  const params = new URLSearchParams({
+    fillWidth: width ? String(width) : "500",
+    quality: quality ? String(quality) : "80",
+    tag: tag,
+  });
+
+  return `${
+    api?.basePath
+  }/Items/${parentId}/Images/Backdrop/0?${params.toString()}`;
+};