wip

content layout shift

README.md

@@ -108,7 +108,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
 

app.json

@@ -2,7 +2,7 @@
   "expo": {
     "name": "Streamyfin",
     "slug": "streamyfin",
-    "version": "0.5.1",
+    "version": "0.6.1",
     "orientation": "default",
     "icon": "./assets/images/icon.png",
     "scheme": "streamyfin",
@@ -22,12 +22,7 @@
         "UIBackgroundModes": ["audio"],
         "NSLocalNetworkUsageDescription": "The app needs access to your local network to connect to your Jellyfin server.",
         "NSAppTransportSecurity": {
-          "NSAllowsArbitraryLoads": true,
-          "NSExceptionDomains": {
-            "*": {
-              "NSExceptionAllowsInsecureHTTPLoads": true
-            }
-          }
+          "NSAllowsArbitraryLoads": true
         }
       },
       "supportsTablet": true,
@@ -35,7 +30,7 @@
     },
     "android": {
       "jsEngine": "hermes",
-      "versionCode": 16,
+      "versionCode": 17,
       "adaptiveIcon": {
         "foregroundImage": "./assets/images/icon.png"
       },
@@ -51,15 +46,9 @@
       "favicon": "./assets/images/favicon.png"
     },
     "plugins": [
+      "@react-native-tvos/config-tv",
       "expo-router",
       "expo-font",
-      "@config-plugins/ffmpeg-kit-react-native",
-      [
-        "react-native-google-cast",
-        {
-          "useDefaultExpandedMediaControls": true
-        }
-      ],
       [
         "react-native-video",
         {
@@ -72,35 +61,6 @@
             "useExoplayerDash": false
           }
         }
-      ],
-      [
-        "expo-build-properties",
-        {
-          "ios": {
-            "deploymentTarget": "14.0"
-          },
-          "android": {
-            "minSdkVersion": 24,
-            "usesCleartextTraffic": true,
-            "packagingOptions": {
-              "jniLibs": {
-                "useLegacyPackaging": true
-              }
-            }
-          }
-        }
-      ],
-      [
-        "expo-screen-orientation",
-        {
-          "initialOrientation": "DEFAULT"
-        }
-      ],
-      [
-        "expo-sensors",
-        {
-          "motionPermission": "Allow Streamyfin to access your device motion for landscape video watching."
-        }
       ]
     ],
     "experiments": {

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

@@ -1,11 +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 * 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(() => {
@@ -17,13 +16,38 @@ export default function TabLayout() {
 
   return (
     <Tabs
+      initialRouteName="home"
       screenOptions={{
         tabBarActiveTintColor: Colors.tabIconSelected,
         headerShown: false,
+        tabBarStyle: {
+          position: "absolute",
+          borderTopLeftRadius: 0,
+          borderTopRightRadius: 0,
+          borderTopWidth: 0,
+          paddingTop: 8,
+          paddingBottom: Platform.OS === "android" ? 8 : 26,
+          height: Platform.OS === "android" ? 58 : 74,
+        },
+        tabBarBackground: () =>
+          Platform.OS === "ios" ? (
+            <BlurView
+              experimentalBlurMethod="dimezisBlurView"
+              intensity={95}
+              style={{
+                ...StyleSheet.absoluteFillObject,
+                overflow: "hidden",
+                borderTopLeftRadius: 0,
+                borderTopRightRadius: 0,
+                backgroundColor: "black",
+              }}
+            />
+          ) : undefined,
       }}
     >
+      <Tabs.Screen redirect name="index" />
       <Tabs.Screen
-        name="index"
+        name="home"
         options={{
           headerShown: false,
           title: "Home",
@@ -45,6 +69,19 @@ export default function TabLayout() {
           ),
         }}
       />
+      <Tabs.Screen
+        name="library"
+        options={{
+          headerShown: false,
+          title: "Library",
+          tabBarIcon: ({ color, focused }) => (
+            <TabBarIcon
+              name={focused ? "apps" : "apps-outline"}
+              color={color}
+            />
+          ),
+        }}
+      />
     </Tabs>
   );
 }

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

@@ -1,4 +1,3 @@
-import { Chromecast } from "@/components/Chromecast";
 import { Feather } from "@expo/vector-icons";
 import { Stack, useRouter } from "expo-router";
 import { Platform, View } from "react-native";
@@ -14,22 +13,11 @@ export default function IndexLayout() {
           headerShown: true,
           headerLargeTitle: true,
           headerTitle: "Home",
-          headerStyle: { backgroundColor: "black" },
-          headerLeft: () => (
-            <TouchableOpacity
-              style={{
-                marginRight: Platform.OS === "android" ? 17 : 0,
-              }}
-              onPress={() => {
-                router.push("/(auth)/downloads");
-              }}
-            >
-              <Feather name="download" color={"white"} size={22} />
-            </TouchableOpacity>
-          ),
+          headerBlurEffect: "prominent",
+          headerTransparent: Platform.OS === "ios" ? true : false,
+          headerShadowVisible: false,
           headerRight: () => (
             <View className="flex flex-row items-center space-x-2">
-              <Chromecast />
               <TouchableOpacity
                 onPress={() => {
                   router.push("/(auth)/settings");

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

@@ -0,0 +1,274 @@
+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 { 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 [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: ["mediaListCollections-home", user?.Id],
+    queryFn: async () => {
+      if (!api || !user?.Id) return [];
+
+      const response = await getItemsApi(api).getItems({
+        userId: user.Id,
+        tags: ["medialist", "promoted"],
+        recursive: true,
+        fields: ["Tags"],
+        includeItemTypes: ["BoxSet"],
+      });
+
+      return [];
+    },
+    enabled: !!api && !!user?.Id && false,
+    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: ["mediaListCollections-home"],
+    });
+    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>
+      </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"
+        />
+
+        <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)/index.tsx

@@ -0,0 +1,5 @@
+const Index = () => {
+  return null;
+};
+
+export default Index;

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

@@ -1,366 +0,0 @@
-import { HorizontalScroll } from "@/components/common/HorrizontalScroll";
-import { Text } from "@/components/common/Text";
-import ContinueWatchingPoster from "@/components/ContinueWatchingPoster";
-import { ItemCardText } from "@/components/ItemCardText";
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import {
-  BaseItemDto,
-  ItemFields,
-  ItemFilter,
-} from "@jellyfin/sdk/lib/generated-client/models";
-import {
-  getChannelsApi,
-  getItemsApi,
-  getSuggestionsApi,
-  getTvShowsApi,
-  getUserApi,
-  getUserLibraryApi,
-} from "@jellyfin/sdk/lib/utils/api";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { useRouter } from "expo-router";
-import { useAtom } from "jotai";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import {
-  ActivityIndicator,
-  RefreshControl,
-  ScrollView,
-  TouchableOpacity,
-  View,
-} from "react-native";
-import NetInfo, { NetInfoState } from "@react-native-community/netinfo";
-import { Button } from "@/components/Button";
-import { Ionicons } from "@expo/vector-icons";
-import MoviePoster from "@/components/MoviePoster";
-
-export default function index() {
-  const router = useRouter();
-  const queryClient = useQueryClient();
-
-  const [api] = useAtom(apiAtom);
-  const [user] = useAtom(userAtom);
-
-  const [loading, setLoading] = useState(false);
-
-  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,
-  });
-
-  const { data: _nextUpData } = 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: ["collections", user?.Id],
-    queryFn: async () => {
-      if (!api || !user?.Id) {
-        return [];
-      }
-
-      const data = (
-        await getItemsApi(api).getItems({
-          userId: user.Id,
-        })
-      ).data;
-
-      const order = ["boxsets", "tvshows", "movies"];
-
-      const cs = data.Items?.sort((a, b) => {
-        if (
-          order.indexOf(a.CollectionType!) < order.indexOf(b.CollectionType!)
-        ) {
-          return 1;
-        }
-
-        return -1;
-      });
-
-      return data.Items || [];
-    },
-    enabled: !!api && !!user?.Id,
-    staleTime: 0,
-  });
-
-  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 } = 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,
-  });
-
-  const { data: recentlyAddedInTVShows } = 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,
-  });
-
-  const { data: suggestions } = 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,
-  });
-
-  const refetch = useCallback(async () => {
-    setLoading(true);
-    await queryClient.refetchQueries({ queryKey: ["resumeItems", user?.Id] });
-    await queryClient.refetchQueries({ queryKey: ["items", user?.Id] });
-    await queryClient.refetchQueries({ queryKey: ["suggestions", user?.Id] });
-    await queryClient.refetchQueries({ queryKey: ["recentlyAddedInMovies"] });
-    setLoading(false);
-  }, [queryClient, user?.Id]);
-
-  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();
-    };
-  }, []);
-
-  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">
-        <ActivityIndicator />
-      </View>
-    );
-
-  return (
-    <ScrollView
-      nestedScrollEnabled
-      contentInsetAdjustmentBehavior="automatic"
-      refreshControl={
-        <RefreshControl refreshing={loading} onRefresh={refetch} />
-      }
-    >
-      <View className="flex flex-col pt-4 pb-24 gap-y-4">
-        <View>
-          <Text className="px-4 text-2xl font-bold mb-2">
-            Continue Watching
-          </Text>
-          <HorizontalScroll<BaseItemDto>
-            data={data}
-            renderItem={(item, index) => (
-              <TouchableOpacity
-                key={index}
-                onPress={() => router.push(`/items/${item.Id}/page`)}
-                className="flex flex-col w-48"
-              >
-                <View>
-                  <ContinueWatchingPoster item={item} />
-                  <ItemCardText item={item} />
-                </View>
-              </TouchableOpacity>
-            )}
-          />
-        </View>
-
-        <View>
-          <Text className="px-4 text-2xl font-bold mb-2">Next Up</Text>
-          <HorizontalScroll<BaseItemDto>
-            data={nextUpData}
-            renderItem={(item, index) => (
-              <TouchableOpacity
-                key={index}
-                onPress={() => router.push(`/items/${item.Id}/page`)}
-                className="flex flex-col w-48"
-              >
-                <View>
-                  <ContinueWatchingPoster item={item} />
-                  <ItemCardText item={item} />
-                </View>
-              </TouchableOpacity>
-            )}
-          />
-        </View>
-
-        <View>
-          <Text className="px-4 text-2xl font-bold mb-2">
-            Recently Added in Movies
-          </Text>
-          <HorizontalScroll<BaseItemDto>
-            data={recentlyAddedInMovies}
-            renderItem={(item, index) => (
-              <TouchableOpacity
-                key={index}
-                onPress={() => router.push(`/items/${item.Id}/page`)}
-                className="flex flex-col w-32"
-              >
-                <View>
-                  <MoviePoster item={item} />
-                  <ItemCardText item={item} />
-                </View>
-              </TouchableOpacity>
-            )}
-          />
-        </View>
-
-        <View>
-          <Text className="px-4 text-2xl font-bold mb-2">
-            Recently Added in TV-Shows
-          </Text>
-          <HorizontalScroll<BaseItemDto>
-            data={recentlyAddedInTVShows}
-            renderItem={(item, index) => (
-              <TouchableOpacity
-                key={index}
-                onPress={() => router.push(`/series/${item.Id}/page`)}
-                className="flex flex-col w-32"
-              >
-                <View>
-                  <MoviePoster item={item} />
-                  <ItemCardText item={item} />
-                </View>
-              </TouchableOpacity>
-            )}
-          />
-        </View>
-
-        <View>
-          <Text className="px-4 text-2xl font-bold mb-2">Collections</Text>
-          <HorizontalScroll<BaseItemDto>
-            data={collections}
-            renderItem={(item, index) => (
-              <TouchableOpacity
-                key={index}
-                onPress={() => router.push(`/collections/${item.Id}/page`)}
-                className="flex flex-col w-48"
-              >
-                <View>
-                  <ContinueWatchingPoster item={item} />
-                  <ItemCardText item={item} />
-                </View>
-              </TouchableOpacity>
-            )}
-          />
-        </View>
-
-        <View>
-          <Text className="px-4 text-2xl font-bold mb-2">Suggestions</Text>
-          <HorizontalScroll<BaseItemDto>
-            data={suggestions}
-            renderItem={(item, index) => (
-              <TouchableOpacity
-                key={index}
-                onPress={() => router.push(`/items/${item.Id}/page`)}
-                className="flex flex-col w-48"
-              >
-                <ContinueWatchingPoster item={item} />
-                <ItemCardText item={item} />
-              </TouchableOpacity>
-            )}
-          />
-        </View>
-      </View>
-    </ScrollView>
-  );
-}

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

@@ -0,0 +1,30 @@
+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="collections/[collectionId]"
+        options={{
+          title: "",
+          headerShown: true,
+          headerBlurEffect: "prominent",
+          headerTransparent: Platform.OS === "ios" ? true : false,
+          headerShadowVisible: false,
+        }}
+      />
+    </Stack>
+  );
+}

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

@@ -0,0 +1,335 @@
+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 } 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);
+
+  const { data: collection } = useQuery({
+    queryKey: ["collection", collectionId],
+    queryFn: async () => {
+      if (!api) return null;
+      const response = await getItemsApi(api).getItems({
+        userId: user?.Id,
+        ids: [collectionId],
+      });
+      const data = response.data.Items?.[0];
+      return data;
+    },
+    enabled: !!api && !!user?.Id && !!collectionId,
+    staleTime: 0,
+  });
+
+  const fetchItems = useCallback(
+    async ({
+      pageParam,
+    }: {
+      pageParam: number;
+    }): Promise<BaseItemDtoQueryResult | null> => {
+      if (!api || !collection) return null;
+
+      const includeItemTypes: BaseItemKind[] = [];
+
+      switch (collection?.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: collectionId,
+        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,
+      collectionId,
+      collection?.CollectionType,
+      selectedGenres,
+      selectedYears,
+      selectedTags,
+      sortBy,
+      sortOrder,
+    ]
+  );
+
+  const { data, isFetching, fetchNextPage } = useInfiniteQuery({
+    queryKey: [
+      "library-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 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 || !collection.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={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)/(tabs)/library/index.tsx

@@ -0,0 +1,104 @@
+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 }) => <CollectionCard collection={item} />}
+      keyExtractor={(item) => item.Id || ""}
+      ItemSeparatorComponent={() => <View className="h-4" />}
+      estimatedItemSize={200}
+    />
+  );
+}
+
+interface Props {
+  collection: BaseItemDto;
+}
+
+const CollectionCard: React.FC<Props> = ({ collection }) => {
+  const router = useRouter();
+
+  const [api] = useAtom(apiAtom);
+
+  const url = useMemo(
+    () =>
+      getPrimaryImageUrl({
+        api,
+        item: collection,
+      }),
+    [collection]
+  );
+
+  if (!url) return null;
+
+  return (
+    <TouchableOpacity
+      onPress={() => {
+        router.push(`/library/collections/${collection.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">
+          {collection.Name}
+        </Text>
+      </View>
+    </TouchableOpacity>
+  );
+};

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

@@ -1,15 +1,18 @@
 import { Stack } from "expo-router";
+import { Platform } from "react-native";
 
 export default function SearchLayout() {
   return (
     <Stack>
       <Stack.Screen
-        name="search"
+        name="index"
         options={{
           headerShown: true,
           headerLargeTitle: true,
           headerTitle: "Search",
-          headerStyle: { backgroundColor: "black" },
+          headerBlurEffect: "prominent",
+          headerTransparent: Platform.OS === "ios" ? true : false,
+          headerShadowVisible: false,
         }}
       />
     </Stack>

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

@@ -0,0 +1,376 @@
+import { HorizontalScroll } from "@/components/common/HorrizontalScroll";
+import { Input } from "@/components/common/Input";
+import { Text } from "@/components/common/Text";
+import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
+import ContinueWatchingPoster from "@/components/ContinueWatchingPoster";
+import { ItemCardText } from "@/components/ItemCardText";
+import { Loader } from "@/components/Loader";
+import AlbumCover from "@/components/posters/AlbumCover";
+import MoviePoster from "@/components/posters/MoviePoster";
+import SeriesPoster from "@/components/posters/SeriesPoster";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { getSearchApi } from "@jellyfin/sdk/lib/utils/api";
+import { useQuery } from "@tanstack/react-query";
+import { router, useNavigation } from "expo-router";
+import { useAtom } from "jotai";
+import React, { useLayoutEffect, useMemo, useState } from "react";
+import { Platform, ScrollView, TouchableOpacity, View } from "react-native";
+import { useDebounce } from "use-debounce";
+
+const exampleSearches = [
+  "Lord of the rings",
+  "Avengers",
+  "Game of Thrones",
+  "Breaking Bad",
+  "Stranger Things",
+  "The Mandalorian",
+];
+
+export default function search() {
+  const [search, setSearch] = useState<string>("");
+
+  const [debouncedSearch] = useDebounce(search, 500);
+
+  const [api] = useAtom(apiAtom);
+  const [user] = useAtom(userAtom);
+
+  const navigation = useNavigation();
+  useLayoutEffect(() => {
+    if (Platform.OS === "ios")
+      navigation.setOptions({
+        headerSearchBarOptions: {
+          placeholder: "Search...",
+          onChangeText: (e: any) => setSearch(e.nativeEvent.text),
+          hideWhenScrolling: false,
+          autoFocus: true,
+        },
+      });
+  }, [navigation]);
+
+  const { data: movies, isLoading: l1 } = useQuery({
+    queryKey: ["search-movies", debouncedSearch],
+    queryFn: async () => {
+      if (!api || !user || debouncedSearch.length === 0) return [];
+
+      const searchApi = await getSearchApi(api).getSearchHints({
+        searchTerm: debouncedSearch,
+        limit: 10,
+        includeItemTypes: ["Movie"],
+      });
+
+      return searchApi.data.SearchHints;
+    },
+  });
+
+  const { data: series, isLoading: l2 } = useQuery({
+    queryKey: ["search-series", debouncedSearch],
+    queryFn: async () => {
+      if (!api || !user || debouncedSearch.length === 0) return [];
+
+      const searchApi = await getSearchApi(api).getSearchHints({
+        searchTerm: debouncedSearch,
+        limit: 10,
+        includeItemTypes: ["Series"],
+      });
+
+      return searchApi.data.SearchHints;
+    },
+  });
+
+  const { data: episodes, isLoading: l3 } = useQuery({
+    queryKey: ["search-episodes", debouncedSearch],
+    queryFn: async () => {
+      if (!api || !user || debouncedSearch.length === 0) return [];
+
+      const searchApi = await getSearchApi(api).getSearchHints({
+        searchTerm: debouncedSearch,
+        limit: 10,
+        includeItemTypes: ["Episode"],
+      });
+
+      return searchApi.data.SearchHints;
+    },
+  });
+
+  const { data: artists, isLoading: l4 } = useQuery({
+    queryKey: ["search-artists", debouncedSearch],
+    queryFn: async () => {
+      if (!api || !user || debouncedSearch.length === 0) return [];
+
+      const searchApi = await getSearchApi(api).getSearchHints({
+        searchTerm: debouncedSearch,
+        limit: 10,
+        includeItemTypes: ["MusicArtist"],
+      });
+
+      return searchApi.data.SearchHints;
+    },
+  });
+
+  const { data: albums, isLoading: l5 } = useQuery({
+    queryKey: ["search-albums", debouncedSearch],
+    queryFn: async () => {
+      if (!api || !user || debouncedSearch.length === 0) return [];
+
+      const searchApi = await getSearchApi(api).getSearchHints({
+        searchTerm: debouncedSearch,
+        limit: 10,
+        includeItemTypes: ["MusicAlbum"],
+      });
+
+      return searchApi.data.SearchHints;
+    },
+  });
+
+  const { data: songs, isLoading: l6 } = useQuery({
+    queryKey: ["search-songs", debouncedSearch],
+    queryFn: async () => {
+      if (!api || !user || debouncedSearch.length === 0) return [];
+
+      const searchApi = await getSearchApi(api).getSearchHints({
+        searchTerm: debouncedSearch,
+        limit: 10,
+        includeItemTypes: ["Audio"],
+      });
+
+      return searchApi.data.SearchHints;
+    },
+  });
+
+  const noResults = useMemo(() => {
+    return !(
+      artists?.length ||
+      albums?.length ||
+      songs?.length ||
+      movies?.length ||
+      episodes?.length ||
+      series?.length
+    );
+  }, [artists, episodes, albums, songs, movies, series]);
+
+  const loading = useMemo(() => {
+    return l1 || l2 || l3 || l4 || l5 || l6;
+  }, [l1, l2, l3, l4, l5, l6]);
+
+  return (
+    <>
+      <ScrollView
+        keyboardDismissMode="on-drag"
+        contentInsetAdjustmentBehavior="automatic"
+      >
+        <View className="flex flex-col pt-4 pb-32">
+          {Platform.OS === "android" && (
+            <View className="mb-4 px-4">
+              <Input
+                autoCorrect={false}
+                returnKeyType="done"
+                keyboardType="web-search"
+                placeholder="Search here..."
+                value={search}
+                onChangeText={(text) => setSearch(text)}
+              />
+            </View>
+          )}
+          <SearchItemWrapper
+            header="Movies"
+            ids={movies?.map((m) => m.Id!)}
+            renderItem={(data) => (
+              <HorizontalScroll<BaseItemDto>
+                data={data}
+                renderItem={(item) => (
+                  <TouchableOpacity
+                    key={item.Id}
+                    className="flex flex-col w-32"
+                    onPress={() => router.push(`/items/${item.Id}`)}
+                  >
+                    <MoviePoster item={item} key={item.Id} />
+                    <Text numberOfLines={2} className="mt-2">
+                      {item.Name}
+                    </Text>
+                    <Text className="opacity-50 text-xs">
+                      {item.ProductionYear}
+                    </Text>
+                  </TouchableOpacity>
+                )}
+              />
+            )}
+          />
+          <SearchItemWrapper
+            ids={series?.map((m) => m.Id!)}
+            header="Series"
+            renderItem={(data) => (
+              <HorizontalScroll<BaseItemDto>
+                data={data}
+                renderItem={(item) => (
+                  <TouchableOpacity
+                    key={item.Id}
+                    onPress={() => router.push(`/series/${item.Id}`)}
+                    className="flex flex-col w-32"
+                  >
+                    <SeriesPoster item={item} key={item.Id} />
+                    <Text numberOfLines={2} className="mt-2">
+                      {item.Name}
+                    </Text>
+                    <Text className="opacity-50 text-xs">
+                      {item.ProductionYear}
+                    </Text>
+                  </TouchableOpacity>
+                )}
+              />
+            )}
+          />
+          <SearchItemWrapper
+            ids={episodes?.map((m) => m.Id!)}
+            header="Episodes"
+            renderItem={(data) => (
+              <HorizontalScroll<BaseItemDto>
+                data={data}
+                renderItem={(item) => (
+                  <TouchableOpacity
+                    key={item.Id}
+                    onPress={() => router.push(`/items/${item.Id}`)}
+                    className="flex flex-col w-48"
+                  >
+                    <ContinueWatchingPoster item={item} />
+                    <ItemCardText item={item} />
+                  </TouchableOpacity>
+                )}
+              />
+            )}
+          />
+          <SearchItemWrapper
+            ids={artists?.map((m) => m.Id!)}
+            header="Artists"
+            renderItem={(data) => (
+              <HorizontalScroll<BaseItemDto>
+                data={data}
+                renderItem={(item) => (
+                  <TouchableItemRouter
+                    item={item}
+                    key={item.Id}
+                    className="flex flex-col w-32"
+                  >
+                    <AlbumCover id={item.Id} />
+                    <ItemCardText item={item} />
+                  </TouchableItemRouter>
+                )}
+              />
+            )}
+          />
+          <SearchItemWrapper
+            ids={albums?.map((m) => m.Id!)}
+            header="Albums"
+            renderItem={(data) => (
+              <HorizontalScroll<BaseItemDto>
+                data={data}
+                renderItem={(item) => (
+                  <TouchableItemRouter
+                    item={item}
+                    key={item.Id}
+                    className="flex flex-col w-32"
+                  >
+                    <AlbumCover id={item.Id} />
+                    <ItemCardText item={item} />
+                  </TouchableItemRouter>
+                )}
+              />
+            )}
+          />
+          <SearchItemWrapper
+            ids={songs?.map((m) => m.Id!)}
+            header="Songs"
+            renderItem={(data) => (
+              <HorizontalScroll<BaseItemDto>
+                data={data}
+                renderItem={(item) => (
+                  <TouchableItemRouter
+                    item={item}
+                    key={item.Id}
+                    className="flex flex-col w-32"
+                  >
+                    <AlbumCover id={item.AlbumId} />
+                    <ItemCardText item={item} />
+                  </TouchableItemRouter>
+                )}
+              />
+            )}
+          />
+          {loading ? (
+            <View className="mt-4 flex justify-center items-center">
+              <Loader />
+            </View>
+          ) : noResults && debouncedSearch.length > 0 ? (
+            <View>
+              <Text className="text-center text-lg font-bold mt-4">
+                No results found for
+              </Text>
+              <Text className="text-xs text-purple-600 text-center">
+                "{debouncedSearch}"
+              </Text>
+            </View>
+          ) : debouncedSearch.length === 0 ? (
+            <View className="mt-4 flex flex-col items-center space-y-2">
+              {exampleSearches.map((e) => (
+                <TouchableOpacity
+                  onPress={() => setSearch(e)}
+                  key={e}
+                  className="mb-2"
+                >
+                  <Text className="text-purple-600">{e}</Text>
+                </TouchableOpacity>
+              ))}
+            </View>
+          ) : null}
+        </View>
+      </ScrollView>
+    </>
+  );
+}
+
+type Props = {
+  ids?: string[] | null;
+  renderItem: (data: BaseItemDto[]) => React.ReactNode;
+  header?: string;
+};
+
+const SearchItemWrapper: React.FC<Props> = ({ ids, renderItem, header }) => {
+  const [api] = useAtom(apiAtom);
+  const [user] = useAtom(userAtom);
+
+  const { data, isLoading: l1 } = useQuery({
+    queryKey: ["items", ids],
+    queryFn: async () => {
+      if (!user?.Id || !api || !ids || ids.length === 0) {
+        return [];
+      }
+
+      const itemPromises = ids.map((id) =>
+        getUserItemData({
+          api,
+          userId: user.Id,
+          itemId: id,
+        })
+      );
+
+      const results = await Promise.all(itemPromises);
+
+      // Filter out null items
+      return results.filter(
+        (item) => item !== null
+      ) as unknown as BaseItemDto[];
+    },
+    enabled: !!ids && ids.length > 0 && !!api && !!user?.Id,
+    staleTime: Infinity,
+  });
+
+  if (!data) return null;
+
+  return (
+    <>
+      <Text className="font-bold text-2xl px-4 my-2">{header}</Text>
+      {renderItem(data)}
+    </>
+  );
+};

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

@@ -1,209 +0,0 @@
-import { HorizontalScroll } from "@/components/common/HorrizontalScroll";
-import { Input } from "@/components/common/Input";
-import { Text } from "@/components/common/Text";
-import ContinueWatchingPoster from "@/components/ContinueWatchingPoster";
-import { ItemCardText } from "@/components/ItemCardText";
-import MoviePoster from "@/components/MoviePoster";
-import Poster from "@/components/Poster";
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
-import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { getSearchApi } from "@jellyfin/sdk/lib/utils/api";
-import { useQuery } from "@tanstack/react-query";
-import { router, useNavigation } from "expo-router";
-import { useAtom } from "jotai";
-import React, { useLayoutEffect, useState } from "react";
-import { Platform, ScrollView, TouchableOpacity, View } from "react-native";
-
-export default function search() {
-  const [search, setSearch] = useState<string>("");
-
-  const [api] = useAtom(apiAtom);
-  const [user] = useAtom(userAtom);
-
-  const navigation = useNavigation();
-  useLayoutEffect(() => {
-    if (Platform.OS === "ios")
-      navigation.setOptions({
-        headerSearchBarOptions: {
-          placeholder: "Search...",
-          onChangeText: (e: any) => setSearch(e.nativeEvent.text),
-          hideWhenScrolling: false,
-        },
-      });
-  }, [navigation]);
-
-  const { data: movies } = useQuery({
-    queryKey: ["search-movies", search],
-    queryFn: async () => {
-      if (!api || !user || search.length === 0) return [];
-
-      const searchApi = await getSearchApi(api).getSearchHints({
-        searchTerm: search,
-        limit: 10,
-        includeItemTypes: ["Movie"],
-      });
-
-      return searchApi.data.SearchHints;
-    },
-  });
-
-  const { data: series } = useQuery({
-    queryKey: ["search-series", search],
-    queryFn: async () => {
-      if (!api || !user || search.length === 0) return [];
-
-      const searchApi = await getSearchApi(api).getSearchHints({
-        searchTerm: search,
-        limit: 10,
-        includeItemTypes: ["Series"],
-      });
-
-      return searchApi.data.SearchHints;
-    },
-  });
-  const { data: episodes } = useQuery({
-    queryKey: ["search-episodes", search],
-    queryFn: async () => {
-      if (!api || !user || search.length === 0) return [];
-
-      const searchApi = await getSearchApi(api).getSearchHints({
-        searchTerm: search,
-        limit: 10,
-        includeItemTypes: ["Episode"],
-      });
-
-      return searchApi.data.SearchHints;
-    },
-  });
-
-  return (
-    <ScrollView
-      keyboardDismissMode="on-drag"
-      contentInsetAdjustmentBehavior="automatic"
-    >
-      <View className="flex flex-col pt-2 pb-20">
-        {Platform.OS === "android" && (
-          <View className="mb-4 px-4">
-            <Input
-              autoCorrect={false}
-              returnKeyType="done"
-              keyboardType="web-search"
-              placeholder="Search here..."
-              value={search}
-              onChangeText={(text) => setSearch(text)}
-            />
-          </View>
-        )}
-        <Text className="font-bold text-2xl px-4 mb-2">Movies</Text>
-        <SearchItemWrapper
-          ids={movies?.map((m) => m.Id!)}
-          renderItem={(data) => (
-            <HorizontalScroll<BaseItemDto>
-              data={data}
-              renderItem={(item) => (
-                <TouchableOpacity
-                  key={item.Id}
-                  className="flex flex-col w-32"
-                  onPress={() => router.push(`/items/${item.Id}/page`)}
-                >
-                  <MoviePoster item={item} key={item.Id} />
-                  <Text className="mt-2">{item.Name}</Text>
-                  <Text className="opacity-50 text-xs">
-                    {item.ProductionYear}
-                  </Text>
-                </TouchableOpacity>
-              )}
-            />
-          )}
-        />
-        <Text className="font-bold text-2xl px-4 my-2">Series</Text>
-        <SearchItemWrapper
-          ids={series?.map((m) => m.Id!)}
-          renderItem={(data) => (
-            <HorizontalScroll<BaseItemDto>
-              data={data}
-              renderItem={(item) => (
-                <TouchableOpacity
-                  key={item.Id}
-                  onPress={() => router.push(`/series/${item.Id}/page`)}
-                  className="flex flex-col w-32"
-                >
-                  <Poster
-                    item={item}
-                    key={item.Id}
-                    url={getPrimaryImageUrl({ api, item })}
-                  />
-                  <Text className="mt-2">{item.Name}</Text>
-                  <Text className="opacity-50 text-xs">
-                    {item.ProductionYear}
-                  </Text>
-                </TouchableOpacity>
-              )}
-            />
-          )}
-        />
-        <Text className="font-bold text-2xl px-4 my-2">Episodes</Text>
-        <SearchItemWrapper
-          ids={episodes?.map((m) => m.Id!)}
-          renderItem={(data) => (
-            <HorizontalScroll<BaseItemDto>
-              data={data}
-              renderItem={(item) => (
-                <TouchableOpacity
-                  key={item.Id}
-                  onPress={() => router.push(`/items/${item.Id}/page`)}
-                  className="flex flex-col w-48"
-                >
-                  <ContinueWatchingPoster item={item} />
-                  <ItemCardText item={item} />
-                </TouchableOpacity>
-              )}
-            />
-          )}
-        />
-      </View>
-    </ScrollView>
-  );
-}
-
-type Props = {
-  ids?: string[] | null;
-  renderItem: (data: BaseItemDto[]) => React.ReactNode;
-};
-
-const SearchItemWrapper: React.FC<Props> = ({ ids, renderItem }) => {
-  const [api] = useAtom(apiAtom);
-  const [user] = useAtom(userAtom);
-
-  const { data, isLoading: l1 } = useQuery({
-    queryKey: ["items", ids],
-    queryFn: async () => {
-      if (!user?.Id || !api || !ids || ids.length === 0) {
-        return [];
-      }
-
-      const itemPromises = ids.map((id) =>
-        getUserItemData({
-          api,
-          userId: user.Id,
-          itemId: id,
-        }),
-      );
-
-      const results = await Promise.all(itemPromises);
-
-      // Filter out null items
-      return results.filter(
-        (item) => item !== null,
-      ) as unknown as BaseItemDto[];
-    },
-    enabled: !!ids && ids.length > 0 && !!api && !!user?.Id,
-    staleTime: Infinity,
-  });
-
-  if (!data) return <Text className="opacity-50 text-xs px-4">No results</Text>;
-
-  return renderItem(data);
-};

app/(auth)/albums/[albumId].tsx

@@ -0,0 +1,117 @@
+import { Text } from "@/components/common/Text";
+import { SongsList } from "@/components/music/SongsList";
+import ArtistPoster from "@/components/posters/ArtistPoster";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
+import { useQuery } from "@tanstack/react-query";
+import { router, useLocalSearchParams, useNavigation } from "expo-router";
+import { useAtom } from "jotai";
+import { useEffect, useState } from "react";
+import { ScrollView, TouchableOpacity, View } from "react-native";
+
+export default function page() {
+  const searchParams = useLocalSearchParams();
+  const { collectionId, artistId, albumId } = searchParams as {
+    collectionId: string;
+    artistId: string;
+    albumId: string;
+  };
+
+  const [api] = useAtom(apiAtom);
+  const [user] = useAtom(userAtom);
+
+  const navigation = useNavigation();
+
+  const { data: album } = useQuery({
+    queryKey: ["album", albumId, artistId],
+    queryFn: async () => {
+      if (!api) return null;
+      const response = await getItemsApi(api).getItems({
+        userId: user?.Id,
+        ids: [albumId],
+      });
+      const data = response.data.Items?.[0];
+      return data;
+    },
+    enabled: !!api && !!user?.Id && !!albumId,
+    staleTime: 0,
+  });
+
+  const {
+    data: songs,
+    isLoading,
+    isError,
+  } = useQuery<{
+    Items: BaseItemDto[];
+    TotalRecordCount: number;
+  }>({
+    queryKey: ["songs", artistId, albumId],
+    queryFn: async () => {
+      if (!api)
+        return {
+          Items: [],
+          TotalRecordCount: 0,
+        };
+
+      const response = await getItemsApi(api).getItems({
+        userId: user?.Id,
+        parentId: albumId,
+        fields: [
+          "ItemCounts",
+          "PrimaryImageAspectRatio",
+          "CanDelete",
+          "MediaSourceCount",
+        ],
+        sortBy: ["ParentIndexNumber", "IndexNumber", "SortName"],
+      });
+
+      const data = response.data.Items;
+
+      return {
+        Items: data || [],
+        TotalRecordCount: response.data.TotalRecordCount || 0,
+      };
+    },
+    enabled: !!api && !!user?.Id,
+  });
+
+  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>
+        <SongsList
+          albumId={albumId}
+          songs={songs?.Items}
+          collectionId={collectionId}
+          artistId={artistId}
+        />
+      </View>
+    </ScrollView>
+  );
+}

app/(auth)/artists/[artistId]/page.tsx

@@ -0,0 +1,131 @@
+import ArtistPoster from "@/components/posters/ArtistPoster";
+import { Text } from "@/components/common/Text";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
+import { useQuery } from "@tanstack/react-query";
+import { router, useLocalSearchParams, useNavigation } from "expo-router";
+import { useAtom } from "jotai";
+import { useEffect, useState } from "react";
+import { FlatList, ScrollView, TouchableOpacity, View } from "react-native";
+
+export default function page() {
+  const searchParams = useLocalSearchParams();
+  const { artistId } = searchParams as {
+    artistId: string;
+  };
+
+  const [api] = useAtom(apiAtom);
+  const [user] = useAtom(userAtom);
+
+  const navigation = useNavigation();
+
+  const [startIndex, setStartIndex] = useState<number>(0);
+
+  const { data: artist } = useQuery({
+    queryKey: ["album", artistId],
+    queryFn: async () => {
+      if (!api) return null;
+      const response = await getItemsApi(api).getItems({
+        userId: user?.Id,
+        ids: [artistId],
+      });
+      const data = response.data.Items?.[0];
+      return data;
+    },
+    enabled: !!api && !!user?.Id && !!artistId,
+    staleTime: 0,
+  });
+
+  const {
+    data: albums,
+    isLoading,
+    isError,
+  } = useQuery<{
+    Items: BaseItemDto[];
+    TotalRecordCount: number;
+  }>({
+    queryKey: ["albums", artistId, startIndex],
+    queryFn: async () => {
+      if (!api)
+        return {
+          Items: [],
+          TotalRecordCount: 0,
+        };
+
+      const response = await getItemsApi(api).getItems({
+        userId: user?.Id,
+        parentId: artistId,
+        sortOrder: ["Descending", "Descending", "Ascending"],
+        includeItemTypes: ["MusicAlbum"],
+        recursive: true,
+        fields: [
+          "ParentId",
+          "PrimaryImageAspectRatio",
+          "ParentId",
+          "PrimaryImageAspectRatio",
+        ],
+        collapseBoxSetItems: false,
+        albumArtistIds: [artistId],
+        startIndex,
+        limit: 100,
+        sortBy: ["PremiereDate", "ProductionYear", "SortName"],
+      });
+
+      const data = response.data.Items;
+
+      return {
+        Items: data || [],
+        TotalRecordCount: response.data.TotalRecordCount || 0,
+      };
+    },
+    enabled: !!api && !!user?.Id,
+  });
+
+  useEffect(() => {
+    navigation.setOptions({
+      title: albums?.Items?.[0].AlbumArtist,
+    });
+  }, [albums]);
+
+  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}`);
+          }}
+        >
+          <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 || ""}
+    />
+  );
+}

app/(auth)/artists/page.tsx

@@ -0,0 +1,118 @@
+import { Text } from "@/components/common/Text";
+import ArtistPoster from "@/components/posters/ArtistPoster";
+import MoviePoster from "@/components/posters/MoviePoster";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { getArtistsApi, getItemsApi } from "@jellyfin/sdk/lib/utils/api";
+import { useQuery } from "@tanstack/react-query";
+import { router, useLocalSearchParams } from "expo-router";
+import { useAtom } from "jotai";
+import { useMemo, useState } from "react";
+import { FlatList, TouchableOpacity, View } from "react-native";
+
+export default function page() {
+  const searchParams = useLocalSearchParams();
+  const { collectionId } = searchParams as { collectionId: string };
+
+  const [api] = useAtom(apiAtom);
+  const [user] = useAtom(userAtom);
+
+  const { data: collection } = useQuery({
+    queryKey: ["collection", collectionId],
+    queryFn: async () => {
+      if (!api) return null;
+      const response = await getItemsApi(api).getItems({
+        userId: user?.Id,
+        ids: [collectionId],
+      });
+      const data = response.data.Items?.[0];
+      return data;
+    },
+    enabled: !!api && !!user?.Id && !!collectionId,
+    staleTime: 0,
+  });
+
+  const [startIndex, setStartIndex] = useState<number>(0);
+
+  const { data, isLoading, isError } = useQuery<{
+    Items: BaseItemDto[];
+    TotalRecordCount: number;
+  }>({
+    queryKey: ["collection-items", collection?.Id, startIndex],
+    queryFn: async () => {
+      if (!api || !collectionId)
+        return {
+          Items: [],
+          TotalRecordCount: 0,
+        };
+
+      const response = await getArtistsApi(api).getArtists({
+        sortBy: ["SortName"],
+        sortOrder: ["Ascending"],
+        fields: ["PrimaryImageAspectRatio", "SortName"],
+        imageTypeLimit: 1,
+        enableImageTypes: ["Primary", "Backdrop", "Banner", "Thumb"],
+        parentId: collectionId,
+        userId: user?.Id,
+      });
+
+      const data = response.data.Items;
+
+      return {
+        Items: data || [],
+        TotalRecordCount: response.data.TotalRecordCount || 0,
+      };
+    },
+    enabled: !!collection?.Id && !!api && !!user?.Id,
+  });
+
+  const totalItems = useMemo(() => {
+    return data?.TotalRecordCount;
+  }, [data]);
+
+  if (!data) return null;
+
+  return (
+    <FlatList
+      contentContainerStyle={{
+        padding: 16,
+        paddingBottom: 140,
+      }}
+      ListHeaderComponent={
+        <View className="mb-4">
+          <Text className="font-bold text-3xl mb-2">Artists</Text>
+        </View>
+      }
+      nestedScrollEnabled
+      data={data.Items}
+      numColumns={3}
+      columnWrapperStyle={{
+        justifyContent: "space-between",
+      }}
+      renderItem={({ item, index }) => (
+        <TouchableOpacity
+          style={{
+            maxWidth: "30%",
+            width: "100%",
+          }}
+          key={index}
+          onPress={() => {
+            router.push(`/artists/${item.Id}/page`);
+          }}
+        >
+          <View className="flex flex-col gap-y-2">
+            {collection?.CollectionType === "movies" && (
+              <MoviePoster item={item} />
+            )}
+            {collection?.CollectionType === "music" && (
+              <ArtistPoster item={item} />
+            )}
+            <Text>{item.Name}</Text>
+            <Text className="opacity-50 text-xs">{item.ProductionYear}</Text>
+          </View>
+        </TouchableOpacity>
+      )}
+      keyExtractor={(item) => item.Id || ""}
+    />
+  );
+}

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

@@ -1,35 +1,28 @@
 import { Text } from "@/components/common/Text";
-import { Loading } from "@/components/Loading";
-import MoviePoster from "@/components/MoviePoster";
+import { Loader } from "@/components/Loader";
+import ArtistPoster from "@/components/posters/ArtistPoster";
+import MoviePoster from "@/components/posters/MoviePoster";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { Ionicons } from "@expo/vector-icons";
 import {
   BaseItemDto,
+  BaseItemKind,
   ItemSortBy,
 } from "@jellyfin/sdk/lib/generated-client/models";
 import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery } from "@tanstack/react-query";
 import { router, useLocalSearchParams } from "expo-router";
 import { useAtom } from "jotai";
-import { useEffect, useMemo, useState } from "react";
-import {
-  ActivityIndicator,
-  ScrollView,
-  TouchableOpacity,
-  View,
-} from "react-native";
+import { useMemo, useState } from "react";
+import { ScrollView, TouchableOpacity, View } from "react-native";
 
 const page: React.FC = () => {
   const searchParams = useLocalSearchParams();
-  const { collection: collectionId } = searchParams as { collection: string };
+  const { collectionId } = searchParams as { collectionId: string };
 
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
 
-  useEffect(() => {
-    console.log("CollectionId", collectionId);
-  }, [collectionId]);
-
   const { data: collection } = useQuery({
     queryKey: ["collection", collectionId],
     queryFn: async () => {
@@ -41,7 +34,7 @@ const page: React.FC = () => {
       const data = response.data.Items?.[0];
       return data;
     },
-    enabled: !!api && !!user?.Id,
+    enabled: !!api && !!user?.Id && !!collectionId,
     staleTime: 0,
   });
 
@@ -51,7 +44,7 @@ const page: React.FC = () => {
     Items: BaseItemDto[];
     TotalRecordCount: number;
   }>({
-    queryKey: ["collection-items", collectionId, startIndex],
+    queryKey: ["collection-items", collection?.Id, startIndex],
     queryFn: async () => {
       if (!api || !collectionId)
         return {
@@ -60,6 +53,7 @@ const page: React.FC = () => {
         };
 
       const sortBy: ItemSortBy[] = [];
+      const includeItemTypes: BaseItemKind[] = [];
 
       switch (collection?.CollectionType) {
         case "movies":
@@ -73,6 +67,23 @@ const page: React.FC = () => {
           break;
       }
 
+      switch (collection?.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: collectionId,
@@ -80,6 +91,11 @@ const page: React.FC = () => {
         startIndex,
         sortBy,
         sortOrder: ["Ascending"],
+        includeItemTypes,
+        enableImageTypes: ["Primary", "Backdrop", "Banner", "Thumb"],
+        recursive: true,
+        imageTypeLimit: 1,
+        fields: ["PrimaryImageAspectRatio", "SortName"],
       });
 
       const data = response.data.Items;
@@ -89,48 +105,8 @@ const page: React.FC = () => {
         TotalRecordCount: response.data.TotalRecordCount || 0,
       };
     },
-    enabled: !!collectionId && !!api,
+    enabled: !!collection?.Id && !!api && !!user?.Id,
   });
-  // const { data, isLoading, isError } = useQuery<{
-  //   Items: BaseItemDto[];
-  //   TotalRecordCount: number;
-  // }>({
-  //   queryKey: ["collection-items", collectionId, startIndex],
-  //   queryFn: async () => {
-  //     if (!api) return [];
-
-  //     const response = await api.axiosInstance.get(
-  //       `${api.basePath}/Users/${user?.Id}/Items`,
-  //       {
-  //         params: {
-  //           SortBy:
-  //             collection?.CollectionType === "movies"
-  //               ? "SortName,ProductionYear"
-  //               : "SortName",
-  //           SortOrder: "Ascending",
-  //           IncludeItemTypes:
-  //             collection?.CollectionType === "movies" ? "Movie" : "Series",
-  //           Recursive: true,
-  //           Fields:
-  //             collection?.CollectionType === "movies"
-  //               ? "PrimaryImageAspectRatio,MediaSourceCount"
-  //               : "PrimaryImageAspectRatio",
-  //           ImageTypeLimit: 1,
-  //           EnableImageTypes: "Primary,Backdrop,Banner,Thumb",
-  //           ParentId: collectionId,
-  //           Limit: 100,
-  //           StartIndex: startIndex,
-  //         },
-  //         headers: {
-  //           Authorization: `MediaBrowser DeviceId="${api.deviceInfo.id}", Token="${api.accessToken}"`,
-  //         },
-  //       },
-  //     );
-
-  //     return response.data || [];
-  //   },
-  //   enabled: !!collection && !!api,
-  // });
 
   const totalItems = useMemo(() => {
     return data?.TotalRecordCount;
@@ -174,7 +150,7 @@ const page: React.FC = () => {
         </View>
         {isLoading ? (
           <View className="my-12">
-            <ActivityIndicator color={"white"} />
+            <Loader />
           </View>
         ) : (
           <View className="flex flex-row flex-wrap">
@@ -188,16 +164,22 @@ const page: React.FC = () => {
                 key={index}
                 onPress={() => {
                   if (item?.Type === "Series") {
-                    router.push(`/series/${item.Id}/page`);
+                    router.push(`/series/${item.Id}`);
                   } else if (item.IsFolder) {
-                    router.push(`/collections/${item?.Id}/page`);
+                    router.push(`/collections/${item?.Id}`);
                   } else {
-                    router.push(`/items/${item.Id}/page`);
+                    router.push(`/items/${item.Id}`);
                   }
                 }}
               >
                 <View className="flex flex-col gap-y-2">
-                  <MoviePoster item={item} />
+                  {collection?.CollectionType === "movies" ? (
+                    <MoviePoster item={item} />
+                  ) : collection?.CollectionType === "music" ? (
+                    <ArtistPoster item={item} />
+                  ) : (
+                    <MoviePoster item={item} />
+                  )}
                   <Text>{item.Name}</Text>
                   <Text className="opacity-50 text-xs">
                     {item.ProductionYear}

app/(auth)/downloads.tsx

@@ -1,186 +0,0 @@
-import { Text } from "@/components/common/Text";
-import { MovieCard } from "@/components/downloads/MovieCard";
-import { SeriesCard } from "@/components/downloads/SeriesCard";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import AsyncStorage from "@react-native-async-storage/async-storage";
-import { useQuery } from "@tanstack/react-query";
-import { useEffect, useMemo } from "react";
-import {
-  ActivityIndicator,
-  ScrollView,
-  TouchableOpacity,
-  View,
-} from "react-native";
-import { useAtom } from "jotai";
-import { runningProcesses } from "@/utils/atoms/downloads";
-import { router } from "expo-router";
-import { Ionicons } from "@expo/vector-icons";
-import { FFmpegKit } from "ffmpeg-kit-react-native";
-import * as FileSystem from "expo-file-system";
-import { queueAtom } from "@/utils/atoms/queue";
-
-const downloads: React.FC = () => {
-  const [process, setProcess] = useAtom(runningProcesses);
-  const [queue, setQueue] = useAtom(queueAtom);
-
-  const { data: downloadedFiles, isLoading } = useQuery({
-    queryKey: ["downloaded_files", process?.item.Id],
-    queryFn: async () =>
-      JSON.parse(
-        (await AsyncStorage.getItem("downloaded_files")) || "[]",
-      ) as BaseItemDto[],
-    staleTime: 0,
-  });
-
-  const movies = useMemo(
-    () => downloadedFiles?.filter((f) => f.Type === "Movie") || [],
-    [downloadedFiles],
-  );
-
-  const groupedBySeries = useMemo(() => {
-    const episodes = downloadedFiles?.filter((f) => f.Type === "Episode");
-    const series: { [key: string]: BaseItemDto[] } = {};
-    episodes?.forEach((e) => {
-      if (!series[e.SeriesName!]) series[e.SeriesName!] = [];
-      series[e.SeriesName!].push(e);
-    });
-    return Object.values(series);
-  }, [downloadedFiles]);
-
-  const eta = useMemo(() => {
-    const length = process?.item?.RunTimeTicks || 0;
-
-    if (!process?.speed || !process?.progress) return "";
-
-    const timeLeft =
-      (length - length * (process.progress / 100)) / process.speed;
-
-    return formatNumber(timeLeft / 10000);
-  }, [process]);
-
-  if (isLoading) {
-    return (
-      <View className="h-full flex flex-col items-center justify-center -mt-6">
-        <ActivityIndicator size="small" color="white" />
-      </View>
-    );
-  }
-
-  return (
-    <ScrollView>
-      <View className="px-4 py-4">
-        <View className="mb-4 flex flex-col space-y-4">
-          <View>
-            <Text className="text-2xl font-bold mb-2">Queue</Text>
-            <View className="flex flex-col space-y-2">
-              {queue.map((q) => (
-                <TouchableOpacity
-                  onPress={() => router.push(`/(auth)/items/${q.item.Id}/page`)}
-                  className="relative bg-neutral-900 border border-neutral-800 p-4 rounded-2xl overflow-hidden flex flex-row items-center justify-between"
-                >
-                  <View>
-                    <Text className="font-semibold">{q.item.Name}</Text>
-                    <Text className="text-xs opacity-50">{q.item.Type}</Text>
-                  </View>
-                  <TouchableOpacity
-                    onPress={() => {
-                      setQueue((prev) => prev.filter((i) => i.id !== q.id));
-                    }}
-                  >
-                    <Ionicons name="close" size={24} color="red" />
-                  </TouchableOpacity>
-                </TouchableOpacity>
-              ))}
-            </View>
-
-            {queue.length === 0 && (
-              <Text className="opacity-50">No items in queue</Text>
-            )}
-          </View>
-
-          <View>
-            <Text className="text-2xl font-bold mb-2">Active download</Text>
-            {process?.item ? (
-              <TouchableOpacity
-                onPress={() =>
-                  router.push(`/(auth)/items/${process.item.Id}/page`)
-                }
-                className="relative bg-neutral-900 border border-neutral-800 p-4 rounded-2xl overflow-hidden flex flex-row items-center justify-between"
-              >
-                <View>
-                  <Text className="font-semibold">{process.item.Name}</Text>
-                  <Text className="text-xs opacity-50">
-                    {process.item.Type}
-                  </Text>
-                  <View className="flex flex-row items-center space-x-2 mt-1 text-purple-600">
-                    <Text className="text-xs">
-                      {process.progress.toFixed(0)}%
-                    </Text>
-                    <Text className="text-xs">
-                      {process.speed?.toFixed(2)}x
-                    </Text>
-                    <View>
-                      <Text className="text-xs">ETA {eta}</Text>
-                    </View>
-                  </View>
-                </View>
-                <TouchableOpacity
-                  onPress={() => {
-                    FFmpegKit.cancel();
-                    setProcess(null);
-                  }}
-                >
-                  <Ionicons name="close" size={24} color="red" />
-                </TouchableOpacity>
-                <View
-                  className={`
-                  absolute bottom-0 left-0 h-1 bg-purple-600
-                `}
-                  style={{
-                    width: process.progress
-                      ? `${Math.max(5, process.progress)}%`
-                      : "5%",
-                  }}
-                ></View>
-              </TouchableOpacity>
-            ) : (
-              <Text className="opacity-50">No active downloads</Text>
-            )}
-          </View>
-        </View>
-        {movies.length > 0 && (
-          <View className="mb-4">
-            <View className="flex flex-row items-center justify-between mb-2">
-              <Text className="text-2xl font-bold">Movies</Text>
-              <View className="bg-purple-600 rounded-full h-6 w-6 flex items-center justify-center">
-                <Text className="text-xs font-bold">{movies?.length}</Text>
-              </View>
-            </View>
-            {movies?.map((item: BaseItemDto) => (
-              <View className="mb-2 last:mb-0" key={item.Id}>
-                <MovieCard item={item} />
-              </View>
-            ))}
-          </View>
-        )}
-        {groupedBySeries?.map((items: BaseItemDto[], index: number) => (
-          <SeriesCard items={items} key={items[0].SeriesId} />
-        ))}
-      </View>
-    </ScrollView>
-  );
-};
-
-export default downloads;
-
-/*
- * Format a number (Date.getTime) to a human readable string ex. 2m 34s
- * @param {number} num - The number to format
- *
- * @returns {string} - The formatted string
- */
-const formatNumber = (num: number) => {
-  const minutes = Math.floor(num / 60000);
-  const seconds = ((num % 60000) / 1000).toFixed(0);
-  return `${minutes}m ${seconds}s`;
-};

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

@@ -1,42 +1,40 @@
-import { Text } from "@/components/common/Text";
-import { DownloadItem } from "@/components/DownloadItem";
+import { AudioTrackSelector } from "@/components/AudioTrackSelector";
+import { Bitrate, BitrateSelector } from "@/components/BitrateSelector";
+import {
+  currentlyPlayingItemAtom,
+  fullScreenAtom,
+  playingAtom,
+} from "@/components/CurrentlyPlayingBar";
+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 { SimilarItems } from "@/components/SimilarItems";
+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 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 { useCallback, useMemo, useState } from "react";
-import { ActivityIndicator, ScrollView, View } from "react-native";
-import { ParallaxScrollView } from "../../../../components/ParallaxPage";
-import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
-import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
-import { getLogoImageUrlById } from "@/utils/jellyfin/image/getLogoImageUrlById";
-import { PlayButton } from "@/components/PlayButton";
-import { Bitrate, BitrateSelector } from "@/components/BitrateSelector";
-import { getMediaInfoApi } from "@jellyfin/sdk/lib/utils/api";
-import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
-import CastContext, {
-  PlayServicesState,
-  useCastDevice,
-  useRemoteMediaClient,
-} from "react-native-google-cast";
-import { chromecastProfile } from "@/utils/profiles/chromecast";
-import ios12 from "@/utils/profiles/ios12";
-import {
-  currentlyPlayingItemAtom,
-  triggerPlayAtom,
-} from "@/components/CurrentlyPlayingBar";
-import { AudioTrackSelector } from "@/components/AudioTrackSelector";
-import { SubtitleTrackSelector } from "@/components/SubtitleTrackSelector";
-import { NextEpisodeButton } from "@/components/series/NextEpisodeButton";
-import { Ratings } from "@/components/Ratings";
-import { SeriesTitleHeader } from "@/components/series/SeriesTitleHeader";
-import { MoviesTitleHeader } from "@/components/movies/MoviesTitleHeader";
-import { OverviewText } from "@/components/OverviewText";
+import { View } from "react-native";
+import { ParallaxScrollView } from "../../../components/ParallaxPage";
 
 const page: React.FC = () => {
   const local = useLocalSearchParams();
@@ -45,9 +43,12 @@ const page: React.FC = () => {
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
 
-  const castDevice = useCastDevice();
+  const [settings] = useSettings();
+
+  const [, setCurrentlyPlying] = useAtom(currentlyPlayingItemAtom);
+  const [, setPlaying] = useAtom(playingAtom);
+  const [, setFullscreen] = useAtom(fullScreenAtom);
 
-  const chromecastReady = useMemo(() => !!castDevice?.deviceId, [castDevice]);
   const [selectedAudioStream, setSelectedAudioStream] = useState<number>(-1);
   const [selectedSubtitleStream, setSelectedSubtitleStream] =
     useState<number>(0);
@@ -68,22 +69,6 @@ const page: React.FC = () => {
     staleTime: 60,
   });
 
-  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 () => {
@@ -104,13 +89,21 @@ const page: React.FC = () => {
       "playbackUrl",
       item?.Id,
       maxBitrate,
-      castDevice,
       selectedAudioStream,
       selectedSubtitleStream,
+      settings,
     ],
     queryFn: async () => {
       if (!api || !user?.Id || !sessionData) return null;
 
+      let deviceProfile: any = ios;
+
+      if (settings?.deviceProfile === "Native") {
+        deviceProfile = native;
+      } else if (settings?.deviceProfile === "Old") {
+        deviceProfile = old;
+      }
+
       const url = await getStreamUrl({
         api,
         userId: user.Id,
@@ -118,63 +111,56 @@ const page: React.FC = () => {
         startTimeTicks: item?.UserData?.PlaybackPositionTicks || 0,
         maxStreamingBitrate: maxBitrate.value,
         sessionData,
-        deviceProfile: castDevice?.deviceId ? chromecastProfile : ios12,
+        deviceProfile,
         audioStreamIndex: selectedAudioStream,
         subtitleStreamIndex: selectedSubtitleStream,
+        forceDirectPlay: settings?.forceDirectPlay,
       });
 
       console.log("Transcode URL: ", url);
 
       return url;
     },
-    enabled: !!sessionData,
+    enabled: !!sessionData && !!api && !!user?.Id && !!item?.Id,
     staleTime: 0,
   });
 
-  const [, setCp] = useAtom(currentlyPlayingItemAtom);
-  const client = useRemoteMediaClient();
-  const [, setPlayTrigger] = useAtom(triggerPlayAtom);
-
   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 {
-        setCp({
-          item,
-          playbackUrl,
-        });
-
-        // Use this trigger to initiate playback in another component (CurrentlyPlayingBar)
-        setPlayTrigger((prev) => prev + 1);
+      setCurrentlyPlying({
+        item,
+        playbackUrl,
+      });
+      setPlaying(true);
+      if (settings?.openFullScreenVideoPlayerByDefault === true) {
+        setFullscreen(true);
       }
     },
-    [playbackUrl, item],
+    [playbackUrl, item, settings]
+  );
+
+  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">
-        <ActivityIndicator />
+        <Loader />
       </View>
     );
 
@@ -223,12 +209,7 @@ const page: React.FC = () => {
           <Ratings item={item} />
         </View>
 
-        <View className="flex flex-row justify-between items-center w-full my-4">
-          {playbackUrl ? (
-            <DownloadItem item={item} playbackUrl={playbackUrl} />
-          ) : (
-            <View className="h-12 aspect-square flex items-center justify-center"></View>
-          )}
+        <View className="flex flex-row justify-between items-center mb-2">
           <PlayedStatus item={item} />
         </View>
 
@@ -255,36 +236,13 @@ const page: React.FC = () => {
           <NextEpisodeButton item={item} type="previous" className="mr-2" />
           <PlayButton
             item={item}
-            chromecastReady={chromecastReady}
+            chromecastReady={false}
             onPress={onPressPlay}
             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">Video</Text>
-            <Text className="text-sm opacity-70">Audio</Text>
-            <Text className="text-sm opacity-70">Subtitles</Text>
-          </View>
-          <View className="flex flex-col">
-            <Text className="text-sm opacity-70">
-              {item.MediaStreams?.find((i) => i.Type === "Video")?.DisplayTitle}
-            </Text>
-            <Text className="text-sm opacity-70">
-              {item.MediaStreams?.find((i) => i.Type === "Audio")?.DisplayTitle}
-            </Text>
-            <Text className="text-sm opacity-70">
-              {
-                item.MediaStreams?.find((i) => i.Type === "Subtitle")
-                  ?.DisplayTitle
-              }
-            </Text>
-          </View>
-        </View>
-      </ScrollView>
 
       <CastAndCrew item={item} />
 

app/(auth)/player/offline/page.tsx

@@ -1,23 +0,0 @@
-import { OfflineVideoPlayer } from "@/components/OfflineVideoPlayer";
-import * as FileSystem from "expo-file-system";
-import { useLocalSearchParams } from "expo-router";
-import { useMemo } from "react";
-import { View } from "react-native";
-
-export default function page() {
-  const searchParams = useLocalSearchParams();
-  const { itemId, url } = searchParams as { itemId: string; url: string };
-
-  const fileUrl = useMemo(() => {
-    const u = FileSystem.documentDirectory + url;
-    return u;
-  }, [url]);
-
-  if (!fileUrl) return null;
-
-  return (
-    <View className="h-screen w-screen items-center justify-center">
-      {url && <OfflineVideoPlayer url={fileUrl} />}
-    </View>
-  );
-}

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

@@ -20,12 +20,6 @@ const page: React.FC = () => {
     seasonIndex: string;
   };
 
-  useEffect(() => {
-    if (seriesId) {
-      console.log("seasonIndex", seasonIndex);
-    }
-  }, [seriesId]);
-
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
 
@@ -38,7 +32,7 @@ const page: React.FC = () => {
         itemId: seriesId,
       }),
     enabled: !!seriesId && !!api,
-    staleTime: 60,
+    staleTime: 60 * 1000,
   });
 
   const backdropUrl = useMemo(

app/(auth)/settings.tsx

@@ -6,13 +6,9 @@ import { clearLogs, readFromLog } from "@/utils/log";
 import { useQuery } from "@tanstack/react-query";
 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";
 
 export default function settings() {
   const { logout } = useJellyfin();
-  const { deleteAllFiles } = useFiles();
 
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
@@ -33,30 +29,14 @@ export default function settings() {
           <ListItem title="Server" subTitle={api?.basePath} />
         </View>
 
-        <SettingToggles />
-
         <View className="flex flex-col space-y-2">
           <Button color="black" onPress={logout}>
             Log out
           </Button>
-          <Button
-            color="red"
-            onPress={async () => {
-              await deleteAllFiles();
-              Haptics.notificationAsync(
-                Haptics.NotificationFeedbackType.Success,
-              );
-            }}
-          >
-            Delete all downloaded files
-          </Button>
           <Button
             color="red"
             onPress={async () => {
               await clearLogs();
-              Haptics.notificationAsync(
-                Haptics.NotificationFeedbackType.Success,
-              );
             }}
           >
             Delete all logs

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

@@ -0,0 +1,230 @@
+import { AudioTrackSelector } from "@/components/AudioTrackSelector";
+import { Bitrate, BitrateSelector } from "@/components/BitrateSelector";
+import { Text } from "@/components/common/Text";
+import {
+  currentlyPlayingItemAtom,
+  playingAtom,
+} from "@/components/CurrentlyPlayingBar";
+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 { 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 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, useMemo, useState } from "react";
+import { ScrollView, View } from "react-native";
+
+const page: React.FC = () => {
+  const local = useLocalSearchParams();
+  const { songId: id } = local as { songId: string };
+
+  const [api] = useAtom(apiAtom);
+  const [user] = useAtom(userAtom);
+
+  const [, setPlaying] = useAtom(playingAtom);
+
+  const navigation = useNavigation();
+
+  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,
+      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: ios,
+        audioStreamIndex: selectedAudioStream,
+        subtitleStreamIndex: selectedSubtitleStream,
+      });
+
+      console.log("Transcode URL: ", url);
+
+      return url;
+    },
+    enabled: !!sessionData,
+    staleTime: 0,
+  });
+
+  const [, setCp] = useAtom(currentlyPlayingItemAtom);
+
+  const onPressPlay = useCallback(
+    async (type: "device" | "cast" = "device") => {
+      if (!playbackUrl || !item) return;
+
+      setCp({
+        item,
+        playbackUrl,
+      });
+      setPlaying(true);
+    },
+    [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>
+      <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}
+            chromecastReady={false}
+            onPress={onPressPlay}
+            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/+not-found.tsx

@@ -1,16 +1,19 @@
-import { Link, Stack } from "expo-router";
+import { Link, Stack, usePathname } from "expo-router";
 import { StyleSheet } from "react-native";
 
 import { ThemedText } from "@/components/ThemedText";
 import { ThemedView } from "@/components/ThemedView";
+import { useEffect } from "react";
 
 export default function NotFoundScreen() {
+  const pathname = usePathname();
+
   return (
     <>
       <Stack.Screen options={{ title: "Oops!" }} />
       <ThemedView style={styles.container}>
         <ThemedText type="title">This screen doesn't exist.</ThemedText>
-        <Link href={"/"} style={styles.link}>
+        <Link href={"/home"} style={styles.link}>
           <ThemedText type="link">Go to home screen!</ThemedText>
         </Link>
       </ThemedView>

app/_layout.tsx

@@ -1,26 +1,25 @@
+import { CurrentlyPlayingBar } from "@/components/CurrentlyPlayingBar";
 import { JellyfinProvider } from "@/providers/JellyfinProvider";
+import { useSettings } from "@/utils/atoms/settings";
+import { ActionSheetProvider } from "@expo/react-native-action-sheet";
+import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
 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 * as SplashScreen from "expo-splash-screen";
-import { Provider as JotaiProvider } from "jotai";
-import { useEffect, useRef, useState } from "react";
-import "react-native-reanimated";
-import * as ScreenOrientation from "expo-screen-orientation";
 import { StatusBar } from "expo-status-bar";
-import { CurrentlyPlayingBar } from "@/components/CurrentlyPlayingBar";
-import { ActionSheetProvider } from "@expo/react-native-action-sheet";
-import { useJobProcessor } from "@/utils/atoms/queue";
-import { JobQueueProvider } from "@/providers/JobQueueProvider";
-import { useKeepAwake } from "expo-keep-awake";
-import { useSettings } from "@/utils/atoms/settings";
+import { Provider as JotaiProvider } from "jotai";
+import { useEffect, useRef } from "react";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
+import "react-native-reanimated";
 
 // Prevent the splash screen from auto-hiding before asset loading is complete.
 SplashScreen.preventAutoHideAsync();
 
 export const unstable_settings = {
-  initialRouteName: "(auth)/(tabs)/",
+  initialRouteName: "/index",
 };
 
 export default function RootLayout() {
@@ -46,100 +45,116 @@ export default function RootLayout() {
 }
 
 function Layout() {
-  const [settings, updateSettings] = useSettings();
-
   useKeepAwake();
 
   const queryClientRef = useRef<QueryClient>(
     new QueryClient({
       defaultOptions: {
         queries: {
-          staleTime: 60,
+          staleTime: 60 * 1000,
           refetchOnMount: true,
           refetchOnReconnect: true,
           refetchOnWindowFocus: true,
           retryOnMount: true,
         },
       },
-    }),
+    })
   );
 
-  useEffect(() => {
-    if (settings?.autoRotate === true)
-      ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.DEFAULT);
-    else
-      ScreenOrientation.lockAsync(
-        ScreenOrientation.OrientationLock.PORTRAIT_UP,
-      );
-  }, [settings]);
-
   return (
-    <QueryClientProvider client={queryClientRef.current}>
-      <JobQueueProvider>
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <QueryClientProvider client={queryClientRef.current}>
         <ActionSheetProvider>
-          <JellyfinProvider>
-            <StatusBar style="light" backgroundColor="#000" />
-            <ThemeProvider value={DarkTheme}>
-              <Stack>
-                <Stack.Screen
-                  name="(auth)/(tabs)"
-                  options={{
-                    headerShown: false,
-                    title: "Home",
-                  }}
-                />
-                <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]/page"
-                  options={{
-                    title: "",
-                    headerShown: false,
-                  }}
-                />
-                <Stack.Screen
-                  name="(auth)/collections/[collection]/page"
-                  options={{
-                    title: "",
-                    headerShown: true,
-                    headerStyle: { backgroundColor: "black" },
-                    headerShadowVisible: false,
-                  }}
-                />
-                <Stack.Screen
-                  name="(auth)/series/[id]/page"
-                  options={{
-                    title: "",
-                    headerShown: false,
-                  }}
-                />
-                <Stack.Screen
-                  name="login"
-                  options={{ headerShown: false, title: "Login" }}
-                />
-                <Stack.Screen name="+not-found" />
-              </Stack>
-              <CurrentlyPlayingBar />
-            </ThemeProvider>
-          </JellyfinProvider>
+          <BottomSheetModalProvider>
+            <JellyfinProvider>
+              <StatusBar style="light" backgroundColor="#000" />
+              <ThemeProvider value={DarkTheme}>
+                <Stack initialRouteName="/home">
+                  <Stack.Screen
+                    name="(auth)/(tabs)"
+                    options={{
+                      headerShown: false,
+                      title: "",
+                    }}
+                  />
+                  <Stack.Screen
+                    name="(auth)/settings"
+                    options={{
+                      headerShown: true,
+                      title: "Settings",
+                      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" }}
+                  />
+                  <Stack.Screen name="+not-found" />
+                </Stack>
+                <CurrentlyPlayingBar />
+              </ThemeProvider>
+            </JellyfinProvider>
+          </BottomSheetModalProvider>
         </ActionSheetProvider>
-      </JobQueueProvider>
-    </QueryClientProvider>
+      </QueryClientProvider>
+    </GestureHandlerRootView>
   );
 }

app/login.tsx

@@ -6,7 +6,13 @@ import { Ionicons } from "@expo/vector-icons";
 import { AxiosError } from "axios";
 import { useAtom } from "jotai";
 import React, { useMemo, useState } from "react";
-import { KeyboardAvoidingView, Platform, View } from "react-native";
+import {
+  Alert,
+  KeyboardAvoidingView,
+  Platform,
+  SafeAreaView,
+  View,
+} from "react-native";
 
 import { z } from "zod";
 
@@ -46,102 +52,134 @@ const Login: React.FC = () => {
   };
 
   const handleConnect = (url: string) => {
+    if (!url.startsWith("http")) {
+      Alert.alert("Error", "URL needs to start with http or https.");
+      return;
+    }
     setServer({ address: url.trim() });
   };
 
   if (api?.basePath) {
     return (
-      <KeyboardAvoidingView
-        behavior={Platform.OS === "ios" ? "padding" : "height"}
-        style={{ flex: 1 }}
-      >
-        <View className="flex flex-col px-4 justify-center h-full gap-y-2">
-          <View>
-            <Text className="text-3xl font-bold">Streamyfin</Text>
-            <Text className="opacity-50 mb-2">Server: {api.basePath}</Text>
+      <SafeAreaView style={{ flex: 1 }}>
+        <KeyboardAvoidingView
+          behavior={Platform.OS === "ios" ? "padding" : "height"}
+          style={{ flex: 1, height: "100%" }}
+        >
+          <View className="flex flex-col justify-between px-4 h-full gap-y-2">
+            <View></View>
+            <View>
+              <View className="mb-4">
+                <Text className="text-3xl font-bold mb-2">Streamyfin</Text>
+                <Text className="text-neutral-500 mb-2">
+                  Server: {api.basePath}
+                </Text>
+                <Button
+                  color="black"
+                  onPress={() => {
+                    removeServer();
+                    setServerURL("");
+                  }}
+                  justify="between"
+                  iconLeft={
+                    <Ionicons
+                      name="arrow-back-outline"
+                      size={18}
+                      color={"white"}
+                    />
+                  }
+                >
+                  Change server
+                </Button>
+              </View>
+
+              <View className="flex flex-col space-y-2">
+                <Text className="text-2xl font-bold">Log in</Text>
+                <Text className="text-neutral-500">
+                  Log in to any user account
+                </Text>
+                <Input
+                  placeholder="Username"
+                  onChangeText={(text) =>
+                    setCredentials({ ...credentials, username: text })
+                  }
+                  value={credentials.username}
+                  autoFocus
+                  secureTextEntry={false}
+                  keyboardType="default"
+                  returnKeyType="done"
+                  autoCapitalize="none"
+                  textContentType="username"
+                  clearButtonMode="while-editing"
+                  maxLength={500}
+                />
+
+                <Input
+                  className="mb-2"
+                  placeholder="Password"
+                  onChangeText={(text) =>
+                    setCredentials({ ...credentials, password: text })
+                  }
+                  value={credentials.password}
+                  secureTextEntry
+                  keyboardType="default"
+                  returnKeyType="done"
+                  autoCapitalize="none"
+                  textContentType="password"
+                  clearButtonMode="while-editing"
+                  maxLength={500}
+                />
+              </View>
+
+              <Text className="text-red-600 mb-2">{error}</Text>
+            </View>
+
             <Button
-              color="black"
-              onPress={() => {
-                removeServer();
-                setServerURL("");
-              }}
-              justify="between"
-              iconLeft={
-                <Ionicons name="arrow-back-outline" size={18} color={"white"} />
-              }
+              onPress={handleLogin}
+              loading={loading}
+              className="mt-auto mb-2"
             >
-              Change server
+              Log in
             </Button>
           </View>
-          <View className="flex flex-col space-y-2">
-            <Text className="text-2xl font-bold">Log in</Text>
-            <Input
-              placeholder="Username"
-              onChangeText={(text) =>
-                setCredentials({ ...credentials, username: text })
-              }
-              value={credentials.username}
-              autoFocus
-              secureTextEntry={false}
-              keyboardType="default"
-              returnKeyType="done"
-              autoCapitalize="none"
-              textContentType="username"
-              clearButtonMode="while-editing"
-              maxLength={500}
-            />
-
-            <Input
-              className="mb-2"
-              placeholder="Password"
-              onChangeText={(text) =>
-                setCredentials({ ...credentials, password: text })
-              }
-              value={credentials.password}
-              secureTextEntry
-              keyboardType="default"
-              returnKeyType="done"
-              autoCapitalize="none"
-              textContentType="password"
-              clearButtonMode="while-editing"
-              maxLength={500}
-            />
-          </View>
-
-          <Text className="text-red-600 mb-2">{error}</Text>
-
-          <Button onPress={handleLogin} loading={loading}>
-            Log in
-          </Button>
-        </View>
-      </KeyboardAvoidingView>
+        </KeyboardAvoidingView>
+      </SafeAreaView>
     );
   }
 
   return (
-    <KeyboardAvoidingView
-      behavior={Platform.OS === "ios" ? "padding" : "height"}
-      style={{ flex: 1 }}
-    >
-      <View className="flex flex-col px-4 justify-center h-full">
-        <View className="flex flex-col gap-y-2">
-          <Text className="text-3xl font-bold">Streamyfin</Text>
-          <Text className="opacity-50">Enter a server adress</Text>
-          <Input
-            className="mb-2"
-            placeholder="http(s)://..."
-            onChangeText={setServerURL}
-            value={serverURL}
-            keyboardType="url"
-            returnKeyType="done"
-            autoCapitalize="none"
-            textContentType="URL"
-            maxLength={500}
-          />
-          <Button onPress={() => handleConnect(serverURL)}>Connect</Button>
+    <SafeAreaView style={{ flex: 1 }}>
+      <KeyboardAvoidingView
+        behavior={Platform.OS === "ios" ? "padding" : "height"}
+        style={{ flex: 1 }}
+      >
+        <View className="flex flex-col px-4 justify-between h-full">
+          <View></View>
+          <View className="flex flex-col gap-y-2">
+            <Text className="text-3xl font-bold">Streamyfin</Text>
+            <Text className="text-neutral-500">
+              Connect to your Jellyfin server
+            </Text>
+            <Input
+              placeholder="Server URL"
+              onChangeText={setServerURL}
+              value={serverURL}
+              keyboardType="url"
+              returnKeyType="done"
+              autoCapitalize="none"
+              textContentType="URL"
+              maxLength={500}
+            />
+            <Text className="opacity-30">
+              Server URL requires http or https
+            </Text>
+          </View>
+          <Button onPress={() => handleConnect(serverURL)} className="mb-2">
+            Connect
+          </Button>
         </View>
-      </View>
-    </KeyboardAvoidingView>
+      </KeyboardAvoidingView>
+    </SafeAreaView>
   );
 };
 

babel.config.js

@@ -1,7 +1,7 @@
 module.exports = function (api) {
   api.cache(true);
   return {
-    presets: ['babel-preset-expo'],
-    plugins: ["nativewind/babel"],
+    presets: ["babel-preset-expo"],
+    plugins: ["nativewind/babel", "react-native-reanimated/plugin"],
   };
 };

components/AudioTrackSelector.tsx

@@ -1,5 +1,4 @@
 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";
@@ -22,12 +21,12 @@ export const AudioTrackSelector: React.FC<Props> = ({
   const audioStreams = useMemo(
     () =>
       item.MediaSources?.[0].MediaStreams?.filter((x) => x.Type === "Audio"),
-    [item],
+    [item]
   );
 
   const selectedAudioSteam = useMemo(
     () => audioStreams?.find((x) => x.Index === selected),
-    [audioStreams, selected],
+    [audioStreams, selected]
   );
 
   useEffect(() => {
@@ -36,45 +35,9 @@ export const AudioTrackSelector: React.FC<Props> = ({
   }, []);
 
   return (
-    <View className="flex flex-row items-center justify-between" {...props}>
-      <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-12 rounded-2xl 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>
-        </DropdownMenu.Trigger>
-        <DropdownMenu.Content
-          loop={true}
-          side="bottom"
-          align="start"
-          alignOffset={0}
-          avoidCollisions={true}
-          collisionPadding={8}
-          sideOffset={8}
-        >
-          <DropdownMenu.Label>Audio streams</DropdownMenu.Label>
-          {audioStreams?.map((audio, idx: number) => (
-            <DropdownMenu.Item
-              key={idx.toString()}
-              onSelect={() => {
-                if (audio.Index !== null && audio.Index !== undefined)
-                  onChange(audio.Index);
-              }}
-            >
-              <DropdownMenu.ItemTitle>
-                {audio.DisplayTitle}
-              </DropdownMenu.ItemTitle>
-            </DropdownMenu.Item>
-          ))}
-        </DropdownMenu.Content>
-      </DropdownMenu.Root>
-    </View>
+    <View
+      className="flex flex-row items-center justify-between"
+      {...props}
+    ></View>
   );
 };

components/BitrateSelector.tsx

@@ -1,5 +1,4 @@
 import { TouchableOpacity, View } from "react-native";
-import * as DropdownMenu from "zeego/dropdown-menu";
 import { Text } from "./common/Text";
 import { atom, useAtom } from "jotai";
 
@@ -46,42 +45,9 @@ export const BitrateSelector: React.FC<Props> = ({
   ...props
 }) => {
   return (
-    <View className="flex flex-row items-center justify-between" {...props}>
-      <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-12 rounded-2xl 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>
-        </DropdownMenu.Trigger>
-        <DropdownMenu.Content
-          loop={true}
-          side="bottom"
-          align="start"
-          alignOffset={0}
-          avoidCollisions={true}
-          collisionPadding={8}
-          sideOffset={8}
-        >
-          <DropdownMenu.Label>Bitrates</DropdownMenu.Label>
-          {BITRATES?.map((b, index: number) => (
-            <DropdownMenu.Item
-              key={index.toString()}
-              onSelect={() => {
-                onChange(b);
-              }}
-            >
-              <DropdownMenu.ItemTitle>{b.key}</DropdownMenu.ItemTitle>
-            </DropdownMenu.Item>
-          ))}
-        </DropdownMenu.Content>
-      </DropdownMenu.Root>
-    </View>
+    <View
+      className="flex flex-row items-center justify-between"
+      {...props}
+    ></View>
   );
 };

components/Button.tsx

@@ -1,6 +1,6 @@
 import React, { PropsWithChildren, ReactNode, useMemo } from "react";
-import { TouchableOpacity, Text, ActivityIndicator, View } from "react-native";
-import * as Haptics from "expo-haptics";
+import { Text, TouchableOpacity, View } from "react-native";
+import { Loader } from "./Loader";
 
 interface ButtonProps extends React.ComponentProps<typeof TouchableOpacity> {
   onPress?: () => void;
@@ -50,14 +50,13 @@ export const Button: React.FC<PropsWithChildren<ButtonProps>> = ({
       onPress={() => {
         if (!loading && !disabled && onPress) {
           onPress();
-          Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
         }
       }}
       disabled={disabled || loading}
       {...props}
     >
       {loading ? (
-        <ActivityIndicator color={"white"} size={24} />
+        <Loader />
       ) : (
         <View
           className={`

components/CurrentlyPlayingBar.tsx

@@ -1,62 +1,50 @@
-import {
-  ActivityIndicator,
-  Platform,
-  TouchableOpacity,
-  View,
-} from "react-native";
-import { Text } from "./common/Text";
-import { Ionicons } from "@expo/vector-icons";
-import {
-  Ref,
-  RefObject,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import Video, { OnProgressData, VideoRef } from "react-native-video";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { atom, useAtom } from "jotai";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
-import { getMediaInfoApi } from "@jellyfin/sdk/lib/utils/api";
+import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
+import { getAuthHeaders } from "@/utils/jellyfin/jellyfin";
 import { reportPlaybackProgress } from "@/utils/jellyfin/playstate/reportPlaybackProgress";
 import { reportPlaybackStopped } from "@/utils/jellyfin/playstate/reportPlaybackStopped";
+import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
+import { writeToLog } from "@/utils/log";
+import { Ionicons } from "@expo/vector-icons";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { getMediaInfoApi } from "@jellyfin/sdk/lib/utils/api";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { BlurView } from "expo-blur";
+import { useRouter, useSegments } from "expo-router";
+import { atom, useAtom } from "jotai";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Alert, Platform, TouchableOpacity, View } from "react-native";
 import Animated, {
   useAnimatedStyle,
   useSharedValue,
   withTiming,
 } from "react-native-reanimated";
-import { useRouter, useSegments } from "expo-router";
-import { BlurView } from "expo-blur";
-import { writeToLog } from "@/utils/log";
-import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
-import { getAuthHeaders } from "@/utils/jellyfin/jellyfin";
-import { useSettings } from "@/utils/atoms/settings";
-import * as ScreenOrientation from "expo-screen-orientation";
+import Video, { OnProgressData, VideoRef } from "react-native-video";
+import { Text } from "./common/Text";
+import { Loader } from "./Loader";
 
 export const currentlyPlayingItemAtom = atom<{
   item: BaseItemDto;
   playbackUrl: string;
 } | null>(null);
 
-export const triggerPlayAtom = atom(0);
+export const playingAtom = atom(false);
+export const fullScreenAtom = atom(false);
 
 export const CurrentlyPlayingBar: React.FC = () => {
-  const [api] = useAtom(apiAtom);
-  const [user] = useAtom(userAtom);
-  const [cp, setCp] = useAtom(currentlyPlayingItemAtom);
-
   const queryClient = useQueryClient();
   const segments = useSegments();
-  const [settings] = useSettings();
+
+  const [api] = useAtom(apiAtom);
+  const [user] = useAtom(userAtom);
+  const [playing, setPlaying] = useAtom(playingAtom);
+  const [currentlyPlaying, setCurrentlyPlaying] = useAtom(
+    currentlyPlayingItemAtom
+  );
+  const [fullScreen, setFullScreen] = useAtom(fullScreenAtom);
 
   const videoRef = useRef<VideoRef | null>(null);
-  const [paused, setPaused] = useState(true);
   const [progress, setProgress] = useState(0);
-  const [fullScreen, setFullScreen] = useState(false);
 
   const aBottom = useSharedValue(0);
   const aPadding = useSharedValue(0);
@@ -104,90 +92,94 @@ export const CurrentlyPlayingBar: React.FC = () => {
     }
   }, [segments]);
 
-  // TODO: Fix this
-  // useEffect(() => {
-  //   if (settings?.forceLandscapeInVideoPlayer === true && fullScreen)
-  //     ScreenOrientation.lockAsync(
-  //       ScreenOrientation.OrientationLock.LANDSCAPE_LEFT,
-  //     );
-  // }, [settings, fullScreen]);
-
   const { data: item } = useQuery({
-    queryKey: ["item", cp?.item.Id],
+    queryKey: ["item", currentlyPlaying?.item.Id],
     queryFn: async () =>
       await getUserItemData({
         api,
         userId: user?.Id,
-        itemId: cp?.item.Id,
+        itemId: currentlyPlaying?.item.Id,
       }),
-    enabled: !!cp?.item.Id && !!api,
+    enabled: !!currentlyPlaying?.item.Id && !!api,
     staleTime: 60,
   });
 
   const { data: sessionData } = useQuery({
-    queryKey: ["sessionData", cp?.item.Id],
+    queryKey: ["sessionData", currentlyPlaying?.item.Id],
     queryFn: async () => {
-      if (!cp?.item.Id) return null;
+      if (!currentlyPlaying?.item.Id) return null;
       const playbackData = await getMediaInfoApi(api!).getPlaybackInfo({
-        itemId: cp?.item.Id,
+        itemId: currentlyPlaying?.item.Id,
         userId: user?.Id,
       });
       return playbackData.data;
     },
-    enabled: !!cp?.item.Id && !!api && !!user?.Id,
+    enabled: !!currentlyPlaying?.item.Id && !!api && !!user?.Id,
     staleTime: 0,
   });
 
   const onProgress = useCallback(
     ({ currentTime }: OnProgressData) => {
-      if (!currentTime || !sessionData?.PlaySessionId || paused) return;
+      if (
+        !currentTime ||
+        !sessionData?.PlaySessionId ||
+        !playing ||
+        !api ||
+        !currentlyPlaying?.item.Id
+      )
+        return;
       const newProgress = currentTime * 10000000;
       setProgress(newProgress);
       reportPlaybackProgress({
         api,
-        itemId: cp?.item.Id,
+        itemId: currentlyPlaying?.item.Id,
         positionTicks: newProgress,
         sessionId: sessionData.PlaySessionId,
       });
     },
-    [sessionData?.PlaySessionId, item, api, paused],
+    [sessionData?.PlaySessionId, api, playing, currentlyPlaying?.item.Id]
   );
 
-  const play = () => {
-    if (videoRef.current) {
-      videoRef.current.resume();
-      setPaused(false);
-    }
-  };
+  useEffect(() => {
+    if (!item || !api) return;
 
-  const pause = useCallback(() => {
-    videoRef.current?.pause();
-    setPaused(true);
+    if (playing) {
+      videoRef.current?.resume();
+    } else {
+      videoRef.current?.pause();
+      if (progress > 0 && sessionData?.PlaySessionId)
+        reportPlaybackStopped({
+          api,
+          itemId: item?.Id,
+          positionTicks: progress,
+          sessionId: sessionData?.PlaySessionId,
+        });
 
-    if (progress > 0)
-      reportPlaybackStopped({
-        api,
-        itemId: item?.Id,
-        positionTicks: progress,
-        sessionId: sessionData?.PlaySessionId,
+      queryClient.invalidateQueries({
+        queryKey: ["nextUp", item?.SeriesId],
+        refetchType: "all",
       });
+      queryClient.invalidateQueries({
+        queryKey: ["episodes"],
+        refetchType: "all",
+      });
+    }
+  }, [playing, progress, item, sessionData]);
 
-    queryClient.invalidateQueries({
-      queryKey: ["nextUp", item?.SeriesId],
-      refetchType: "all",
-    });
-    queryClient.invalidateQueries({
-      queryKey: ["episodes"],
-      refetchType: "all",
-    });
-  }, [api, item, progress, sessionData, queryClient]);
+  useEffect(() => {
+    if (fullScreen === true) {
+      videoRef.current?.presentFullscreenPlayer();
+    } else {
+      videoRef.current?.dismissFullscreenPlayer();
+    }
+  }, [fullScreen]);
 
   const startPosition = useMemo(
     () =>
       item?.UserData?.PlaybackPositionTicks
         ? Math.round(item.UserData.PlaybackPositionTicks / 10000)
         : 0,
-    [item],
+    [item]
   );
 
   const backdropUrl = useMemo(
@@ -198,33 +190,10 @@ export const CurrentlyPlayingBar: React.FC = () => {
         quality: 70,
         width: 200,
       }),
-    [item],
+    [item]
   );
 
-  /**
-   * These two useEffects are used to start playing the
-   * video when the playbackUrl is available.
-   *
-   * The trigger playback is triggered from the button component.
-   */
-  useEffect(() => {
-    if (cp?.playbackUrl) {
-      play();
-      if (settings?.openFullScreenVideoPlayerByDefault) {
-        videoRef.current?.presentFullscreenPlayer();
-      }
-    }
-  }, [cp?.playbackUrl]);
-
-  const [triggerPlay] = useAtom(triggerPlayAtom);
-  useEffect(() => {
-    play();
-    if (settings?.openFullScreenVideoPlayerByDefault) {
-      videoRef.current?.presentFullscreenPlayer();
-    }
-  }, [triggerPlay]);
-
-  if (!cp || !api) return null;
+  if (!currentlyPlaying || !api) return null;
 
   return (
     <Animated.View
@@ -234,7 +203,9 @@ export const CurrentlyPlayingBar: React.FC = () => {
       <BlurView
         intensity={Platform.OS === "android" ? 60 : 100}
         experimentalBlurMethod={Platform.OS === "android" ? "none" : undefined}
-        className={`h-full w-full rounded-xl overflow-hidden ${Platform.OS === "android" && "bg-black"}`}
+        className={`h-full w-full rounded-xl overflow-hidden ${
+          Platform.OS === "android" && "bg-black"
+        }`}
       >
         <Animated.View
           style={[
@@ -252,7 +223,7 @@ export const CurrentlyPlayingBar: React.FC = () => {
                 ${item?.Type === "Audio" ? "aspect-square" : "aspect-video"}
                 `}
             >
-              {cp.playbackUrl && (
+              {currentlyPlaying.playbackUrl && (
                 <Video
                   ref={videoRef}
                   allowsExternalPlayback
@@ -272,13 +243,13 @@ export const CurrentlyPlayingBar: React.FC = () => {
                     enable: true,
                     thread: true,
                   }}
-                  paused={paused}
+                  paused={!playing}
                   onProgress={(e) => onProgress(e)}
                   subtitleStyle={{
                     fontSize: 16,
                   }}
                   source={{
-                    uri: cp.playbackUrl,
+                    uri: currentlyPlaying.playbackUrl,
                     isNetwork: true,
                     startPosition,
                     headers: getAuthHeaders(api),
@@ -294,11 +265,11 @@ export const CurrentlyPlayingBar: React.FC = () => {
                   }}
                   onPlaybackStateChanged={(e) => {
                     if (e.isPlaying) {
-                      setPaused(false);
+                      setPlaying(true);
                     } else if (e.isSeeking) {
                       return;
                     } else {
-                      pause();
+                      setPlaying(false);
                     }
                   }}
                   progressUpdateInterval={1000}
@@ -306,13 +277,16 @@ export const CurrentlyPlayingBar: React.FC = () => {
                     console.log(e);
                     writeToLog(
                       "ERROR",
-                      "Video playback error: " + JSON.stringify(e),
+                      "Video playback error: " + JSON.stringify(e)
                     );
+                    Alert.alert("Error", "Cannot play this video file.");
+                    setPlaying(false);
+                    setCurrentlyPlaying(null);
                   }}
                   renderLoader={
                     item?.Type !== "Audio" && (
                       <View className="flex flex-col items-center justify-center h-full">
-                        <ActivityIndicator size={"small"} color={"white"} />
+                        <Loader />
                       </View>
                     )
                   }
@@ -322,46 +296,58 @@ export const CurrentlyPlayingBar: React.FC = () => {
             <View className="shrink text-xs">
               <TouchableOpacity
                 onPress={() => {
-                  router.push(`/(auth)/items/${item?.Id}/page`);
+                  if (item?.Type === "Audio")
+                    router.push(`/albums/${item?.AlbumId}`);
+                  else router.push(`/items/${item?.Id}`);
                 }}
               >
                 <Text>{item?.Name}</Text>
               </TouchableOpacity>
-              {item?.SeriesName ? (
+              {item?.Type === "Episode" && (
                 <TouchableOpacity
                   onPress={() => {
-                    router.push(`/(auth)/series/${item.SeriesId}/page`);
+                    router.push(`/(auth)/series/${item.SeriesId}`);
                   }}
                   className="text-xs opacity-50"
                 >
                   <Text>{item.SeriesName}</Text>
                 </TouchableOpacity>
-              ) : (
+              )}
+              {item?.Type === "Movie" && (
                 <View>
                   <Text className="text-xs opacity-50">
                     {item?.ProductionYear}
                   </Text>
                 </View>
               )}
+              {item?.Type === "Audio" && (
+                <TouchableOpacity
+                  onPress={() => {
+                    router.push(`/albums/${item?.AlbumId}`);
+                  }}
+                >
+                  <Text className="text-xs opacity-50">{item?.Album}</Text>
+                </TouchableOpacity>
+              )}
             </View>
           </View>
           <View className="flex flex-row items-center space-x-2">
             <TouchableOpacity
               onPress={() => {
-                if (paused) play();
-                else pause();
+                if (playing) setPlaying(false);
+                else setPlaying(true);
               }}
               className="aspect-square rounded flex flex-col items-center justify-center p-2"
             >
-              {paused ? (
-                <Ionicons name="play" size={24} color="white" />
-              ) : (
+              {playing ? (
                 <Ionicons name="pause" size={24} color="white" />
+              ) : (
+                <Ionicons name="play" size={24} color="white" />
               )}
             </TouchableOpacity>
             <TouchableOpacity
               onPress={() => {
-                setCp(null);
+                setCurrentlyPlaying(null);
               }}
               className="aspect-square rounded flex flex-col items-center justify-center p-2"
             >

components/DownloadItem.tsx

@@ -1,137 +0,0 @@
-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 Ionicons from "@expo/vector-icons/Ionicons";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-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 { ActivityIndicator, TouchableOpacity, View } from "react-native";
-import ProgressCircle from "./ProgressCircle";
-
-type DownloadProps = {
-  item: BaseItemDto;
-  playbackUrl: string;
-};
-
-export const DownloadItem: React.FC<DownloadProps> = ({
-  item,
-  playbackUrl,
-}) => {
-  const [api] = useAtom(apiAtom);
-  const [user] = useAtom(userAtom);
-  const [process] = useAtom(runningProcesses);
-  const [queue, setQueue] = useAtom(queueAtom);
-
-  const { startRemuxing } = useRemuxHlsToMp4(playbackUrl, item);
-
-  const { data: playbackInfo, isLoading } = useQuery({
-    queryKey: ["playbackInfo", item.Id],
-    queryFn: async () => getPlaybackInfo(api, item.Id, user?.Id),
-  });
-
-  const { data: downloaded, isLoading: isLoadingDownloaded } = useQuery({
-    queryKey: ["downloaded", item.Id],
-    queryFn: async () => {
-      if (!item.Id) return false;
-
-      const data: BaseItemDto[] = JSON.parse(
-        (await AsyncStorage.getItem("downloaded_files")) || "[]",
-      );
-
-      return data.some((d) => d.Id === item.Id);
-    },
-    enabled: !!item.Id,
-  });
-
-  if (isLoading || isLoadingDownloaded) {
-    return (
-      <View className="rounded h-10 aspect-square flex items-center justify-center">
-        <ActivityIndicator size={"small"} color={"white"} />
-      </View>
-    );
-  }
-
-  if (playbackInfo?.MediaSources?.[0].SupportsDirectPlay === false) {
-    return (
-      <View className="rounded h-10 aspect-square flex items-center justify-center opacity-50">
-        <Ionicons name="cloud-download-outline" size={24} color="white" />
-      </View>
-    );
-  }
-
-  if (process && process?.item.Id === item.Id) {
-    return (
-      <TouchableOpacity
-        onPress={() => {
-          router.push("/downloads");
-        }}
-      >
-        <View className="rounded h-10 aspect-square flex items-center justify-center">
-          {process.progress === 0 ? (
-            <ActivityIndicator size={"small"} color={"white"} />
-          ) : (
-            <View className="-rotate-45">
-              <ProgressCircle
-                size={24}
-                fill={process.progress}
-                width={4}
-                tintColor="#9334E9"
-                backgroundColor="#bdc3c7"
-              />
-            </View>
-          )}
-        </View>
-      </TouchableOpacity>
-    );
-  }
-
-  if (queue.some((i) => i.id === item.Id)) {
-    return (
-      <TouchableOpacity
-        onPress={() => {
-          router.push("/downloads");
-        }}
-      >
-        <View className="rounded h-10 aspect-square flex items-center justify-center opacity-50">
-          <Ionicons name="hourglass" size={24} color="white" />
-        </View>
-      </TouchableOpacity>
-    );
-  }
-
-  if (downloaded) {
-    return (
-      <TouchableOpacity
-        onPress={() => {
-          router.push("/downloads");
-        }}
-      >
-        <View className="rounded h-10 aspect-square flex items-center justify-center">
-          <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();
-            },
-            item,
-          });
-        }}
-      >
-        <View className="rounded h-10 aspect-square flex items-center justify-center">
-          <Ionicons name="cloud-download-outline" size={26} color="white" />
-        </View>
-      </TouchableOpacity>
-    );
-  }
-};

components/ItemCardText.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { View } from "react-native";
 import { Text } from "./common/Text";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { tc } from "@/utils/textTools";
 
 type ItemCardProps = {
   item: BaseItemDto;
@@ -20,14 +21,13 @@ function seasonNameToIndex(seasonName: string | null | undefined) {
 
 export const ItemCardText: React.FC<ItemCardProps> = ({ item }) => {
   return (
-    <View className="mt-2 flex flex-col grow-0">
+    <View className="mt-2 flex flex-col h-12">
       {item.Type === "Episode" ? (
         <>
-          <Text className="">{item.SeriesName}</Text>
-          <Text
-            style={{ flexWrap: "wrap" }}
-            className="flex text-xs opacity-50 break-all"
-          >
+          <Text numberOfLines={2} className="">
+            {item.SeriesName}
+          </Text>
+          <Text numberOfLines={1} className="text-xs opacity-50">
             {`S${seasonNameToIndex(
               item?.SeasonName,
             )}:E${item.IndexNumber?.toString()}`}{" "}
@@ -36,7 +36,7 @@ export const ItemCardText: React.FC<ItemCardProps> = ({ item }) => {
         </>
       ) : (
         <>
-          <Text>{item.Name}</Text>
+          <Text numberOfLines={2}>{item.Name}</Text>
           <Text className="text-xs opacity-50">{item.ProductionYear}</Text>
         </>
       )}

components/Loader.tsx

@@ -0,0 +1,18 @@
+import {
+  ActivityIndicator,
+  ActivityIndicatorProps,
+  Platform,
+  View,
+} from "react-native";
+
+interface Props extends ActivityIndicatorProps {}
+
+export const Loader: React.FC<Props> = ({ ...props }) => {
+  return (
+    <ActivityIndicator
+      size={"small"}
+      color={Platform.OS === "ios" ? "white" : "#9333ea"}
+      {...props}
+    />
+  );
+};

components/Loading.tsx

@@ -1,9 +0,0 @@
-import { ActivityIndicator, View } from "react-native";
-
-export const Loading: React.FC = () => {
-  return (
-    <View>
-      <ActivityIndicator />
-    </View>
-  );
-};

components/NewVideoPlayer.tsx

@@ -1,56 +0,0 @@
-import { useVideoPlayer, VideoView } from "expo-video";
-import { useEffect, useRef, useState } from "react";
-import {
-  PixelRatio,
-  StyleSheet,
-  View,
-  Button,
-  TouchableOpacity,
-} from "react-native";
-
-const videoSource =
-  "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4";
-
-interface Props {
-  videoSource: string;
-}
-
-export const NewVideoPlayer: React.FC<Props> = ({ videoSource }) => {
-  const ref = useRef<VideoView | null>(null);
-  const [isPlaying, setIsPlaying] = useState(true);
-  const player = useVideoPlayer(videoSource, (player) => {
-    player.loop = true;
-    player.play();
-  });
-
-  useEffect(() => {
-    const subscription = player.addListener("playingChange", (isPlaying) => {
-      setIsPlaying(isPlaying);
-    });
-
-    return () => {
-      subscription.remove();
-    };
-  }, [player]);
-
-  return (
-    <TouchableOpacity
-      onPress={() => {
-        ref.current?.enterFullscreen();
-      }}
-      className={`relative h-full bg-neutral-800 rounded-md overflow-hidden
-      `}
-    >
-      <VideoView
-        ref={ref}
-        style={{
-          width: "100%",
-          height: "100%",
-        }}
-        player={player}
-        allowsFullscreen
-        allowsPictureInPicture
-      />
-    </TouchableOpacity>
-  );
-};

components/OldVideoPlayer.tsx

@@ -1,273 +0,0 @@
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { runtimeTicksToMinutes } from "@/utils/time";
-import { Feather, Ionicons } from "@expo/vector-icons";
-import { getMediaInfoApi } from "@jellyfin/sdk/lib/utils/api";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { useAtom } from "jotai";
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import { TouchableOpacity, View } from "react-native";
-import { useCastDevice, useRemoteMediaClient } from "react-native-google-cast";
-import Video, { OnProgressData, VideoRef } from "react-native-video";
-import * as DropdownMenu from "zeego/dropdown-menu";
-import { Button } from "./Button";
-import { Text } from "./common/Text";
-import ios12 from "../utils/profiles/ios12";
-import { reportPlaybackProgress } from "@/utils/jellyfin/playstate/reportPlaybackProgress";
-import { chromecastProfile } from "@/utils/profiles/chromecast";
-import { reportPlaybackStopped } from "@/utils/jellyfin/playstate/reportPlaybackStopped";
-import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
-import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
-import { currentlyPlayingItemAtom } from "./CurrentlyPlayingBar";
-
-type VideoPlayerProps = {
-  itemId: string;
-  onChangePlaybackURL: (url: string | null) => void;
-};
-
-export const OldVideoPlayer: React.FC<VideoPlayerProps> = ({
-  itemId,
-  onChangePlaybackURL,
-}) => {
-  const videoRef = useRef<VideoRef | null>(null);
-  const [maxBitrate, setMaxbitrate] = useState<number | undefined>(undefined);
-  const [paused, setPaused] = useState(true);
-  const [progress, setProgress] = useState(0);
-
-  const [api] = useAtom(apiAtom);
-  const [user] = useAtom(userAtom);
-
-  const castDevice = useCastDevice();
-  const client = useRemoteMediaClient();
-  const queryClient = useQueryClient();
-
-  const { data: item } = useQuery({
-    queryKey: ["item", itemId],
-    queryFn: async () =>
-      await getUserItemData({
-        api,
-        userId: user?.Id,
-        itemId,
-      }),
-    enabled: !!itemId && !!api,
-    staleTime: 60,
-  });
-
-  const { data: sessionData } = useQuery({
-    queryKey: ["sessionData", itemId],
-    queryFn: async () => {
-      const playbackData = await getMediaInfoApi(api!).getPlaybackInfo({
-        itemId,
-        userId: user?.Id,
-      });
-
-      return playbackData.data;
-    },
-    enabled: !!itemId && !!api && !!user?.Id,
-    staleTime: 0,
-  });
-
-  const { data: playbackURL } = useQuery({
-    queryKey: ["playbackUrl", itemId, maxBitrate, castDevice],
-    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,
-        sessionData,
-        deviceProfile: castDevice?.deviceId ? chromecastProfile : ios12,
-      });
-
-      onChangePlaybackURL(url);
-
-      return url;
-    },
-    enabled: !!sessionData,
-    staleTime: 0,
-  });
-
-  const onProgress = useCallback(
-    ({ currentTime }: OnProgressData) => {
-      if (!currentTime || !sessionData?.PlaySessionId || paused) return;
-      const newProgress = currentTime * 10000000;
-      setProgress(newProgress);
-      reportPlaybackProgress({
-        api,
-        itemId,
-        positionTicks: newProgress,
-        sessionId: sessionData.PlaySessionId,
-      });
-    },
-    [sessionData?.PlaySessionId, item, api, paused],
-  );
-
-  const play = () => {
-    if (videoRef.current) {
-      videoRef.current.resume();
-      setPaused(false);
-    }
-  };
-
-  const pause = useCallback(() => {
-    videoRef.current?.pause();
-    setPaused(true);
-
-    if (progress > 0)
-      reportPlaybackStopped({
-        api,
-        itemId: item?.Id,
-        positionTicks: progress,
-        sessionId: sessionData?.PlaySessionId,
-      });
-
-    queryClient.invalidateQueries({
-      queryKey: ["nextUp", item?.SeriesId],
-      refetchType: "all",
-    });
-    queryClient.invalidateQueries({
-      queryKey: ["episodes"],
-      refetchType: "all",
-    });
-  }, [api, item, progress, sessionData, queryClient]);
-
-  const startPosition = useMemo(
-    () =>
-      item?.UserData?.PlaybackPositionTicks
-        ? Math.round(item.UserData.PlaybackPositionTicks / 10000)
-        : 0,
-    [item],
-  );
-
-  const enableVideo = useMemo(
-    () => !!(playbackURL && item && startPosition !== null && sessionData),
-    [playbackURL, item, startPosition, sessionData],
-  );
-
-  const chromecastReady = useMemo(
-    () => !!(castDevice?.deviceId && item),
-    [castDevice, item],
-  );
-
-  const cast = useCallback(() => {
-    if (!client || !playbackURL || !item) return;
-    client.loadMedia({
-      mediaInfo: {
-        contentUrl: playbackURL,
-        contentType: "video/mp4",
-        metadata: {
-          type: item.Type === "Episode" ? "tvShow" : "movie",
-          title: item.Name || "",
-          subtitle: item.Overview || "",
-        },
-        streamDuration: Math.floor((item.RunTimeTicks || 0) / 10000),
-      },
-      startTime: Math.floor(
-        (item.UserData?.PlaybackPositionTicks || 0) / 10000,
-      ),
-    });
-  }, [item, client, playbackURL]);
-
-  const [cp, setCp] = useAtom(currentlyPlayingItemAtom);
-
-  useEffect(() => {
-    videoRef.current?.pause();
-  }, []);
-
-  return (
-    <View>
-      {enableVideo === true && startPosition !== null && !!playbackURL ? (
-        <Video
-          style={{ width: 0, height: 0 }}
-          source={{
-            uri: playbackURL,
-            isNetwork: true,
-            startPosition,
-          }}
-          ref={videoRef}
-          onBuffer={(e) => (e.isBuffering ? console.log("Buffering...") : null)}
-          onProgress={(e) => onProgress(e)}
-          onFullscreenPlayerDidDismiss={() => {
-            pause();
-          }}
-          onFullscreenPlayerDidPresent={() => {
-            play();
-          }}
-          paused={paused}
-          ignoreSilentSwitch="ignore"
-        />
-      ) : null}
-      <View className="flex flex-row items-center justify-between">
-        <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 rounded-2xl border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between">
-                  <Text>
-                    {BITRATES.find((b) => b.value === maxBitrate)?.key}
-                  </Text>
-                </TouchableOpacity>
-              </View>
-            </View>
-          </DropdownMenu.Trigger>
-          <DropdownMenu.Content
-            loop={true}
-            side="bottom"
-            align="start"
-            alignOffset={0}
-            avoidCollisions={true}
-            collisionPadding={8}
-            sideOffset={8}
-          >
-            <DropdownMenu.Label>Bitrates</DropdownMenu.Label>
-            {BITRATES?.map((b: any, index: number) => (
-              <DropdownMenu.Item
-                key={index.toString()}
-                onSelect={() => {
-                  setMaxbitrate(b.value);
-                }}
-              >
-                <DropdownMenu.ItemTitle>{b.key}</DropdownMenu.ItemTitle>
-              </DropdownMenu.Item>
-            ))}
-          </DropdownMenu.Content>
-        </DropdownMenu.Root>
-      </View>
-
-      <View className="flex flex-col w-full">
-        <Button
-          disabled={!enableVideo}
-          onPress={() => {
-            // if (chromecastReady) {
-            //   cast();
-            // } else {
-            //   setTimeout(() => {
-            //     if (!videoRef.current) return;
-            //     videoRef.current.presentFullscreenPlayer();
-            //   }, 1000);
-            // }
-            if (item) setCp(item);
-          }}
-          iconRight={
-            chromecastReady ? (
-              <Feather name="cast" size={20} color="white" />
-            ) : (
-              <Ionicons name="play-circle" size={24} color="white" />
-            )
-          }
-        >
-          {runtimeTicksToMinutes(item?.RunTimeTicks)}
-        </Button>
-      </View>
-    </View>
-  );
-};

components/ParallaxPage.tsx

@@ -9,7 +9,6 @@ import Animated, {
   useScrollViewOffset,
 } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { Chromecast } from "./Chromecast";
 
 const HEADER_HEIGHT = 400;
 
@@ -33,14 +32,14 @@ export const ParallaxScrollView: React.FC<Props> = ({
           translateY: interpolate(
             scrollOffset.value,
             [-HEADER_HEIGHT, 0, HEADER_HEIGHT],
-            [-HEADER_HEIGHT / 2, 0, HEADER_HEIGHT * 0.75],
+            [-HEADER_HEIGHT / 2, 0, HEADER_HEIGHT * 0.75]
           ),
         },
         {
           scale: interpolate(
             scrollOffset.value,
             [-HEADER_HEIGHT, 0, HEADER_HEIGHT],
-            [2, 1, 1],
+            [2, 1, 1]
           ),
         },
       ],
@@ -73,15 +72,6 @@ export const ParallaxScrollView: React.FC<Props> = ({
           />
         </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">
             {logo}

components/PlayButton.tsx

@@ -1,9 +1,9 @@
-import { Button } from "./Button";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { Feather, Ionicons } from "@expo/vector-icons";
 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 { Button } from "./Button";
 
 interface Props extends React.ComponentProps<typeof Button> {
   item: BaseItemDto;
@@ -42,7 +42,7 @@ export const PlayButton: React.FC<Props> = ({
             onPress("device");
             break;
           case cancelButtonIndex:
-            console.log("calcel");
+            break;
         }
       },
     );

components/PlayedStatus.tsx

@@ -4,9 +4,8 @@ import { markAsPlayed } from "@/utils/jellyfin/playstate/markAsPlayed";
 import { Ionicons } from "@expo/vector-icons";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { useQueryClient } from "@tanstack/react-query";
-import * as Haptics from "expo-haptics";
 import { useAtom } from "jotai";
-import React, { useCallback } from "react";
+import React from "react";
 import { TouchableOpacity, View } from "react-native";
 
 export const PlayedStatus: React.FC<{ item: BaseItemDto }> = ({ item }) => {
@@ -15,15 +14,15 @@ export const PlayedStatus: React.FC<{ item: BaseItemDto }> = ({ item }) => {
 
   const queryClient = useQueryClient();
 
-  const invalidateQueries = useCallback(() => {
+  const invalidateQueries = () => {
     queryClient.invalidateQueries({
-      queryKey: ["item", item.Id],
+      queryKey: ["item"],
     });
     queryClient.invalidateQueries({
-      queryKey: ["resumeItems", user?.Id],
+      queryKey: ["resumeItems"],
     });
     queryClient.invalidateQueries({
-      queryKey: ["nextUp", item.SeriesId],
+      queryKey: ["nextUp"],
     });
     queryClient.invalidateQueries({
       queryKey: ["episodes"],
@@ -31,14 +30,16 @@ export const PlayedStatus: React.FC<{ item: BaseItemDto }> = ({ item }) => {
     queryClient.invalidateQueries({
       queryKey: ["seasons"],
     });
-  }, [api, item.Id, queryClient, user?.Id]);
+    queryClient.invalidateQueries({
+      queryKey: ["nextUp-all"],
+    });
+  };
 
   return (
     <View>
       {item.UserData?.Played ? (
         <TouchableOpacity
           onPress={async () => {
-            Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
             await markAsNotPlayed({
               api: api,
               itemId: item?.Id,
@@ -54,7 +55,6 @@ export const PlayedStatus: React.FC<{ item: BaseItemDto }> = ({ item }) => {
       ) : (
         <TouchableOpacity
           onPress={async () => {
-            Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
             await markAsPlayed({
               api: api,
               item: item,

components/SimilarItems.tsx

@@ -1,20 +1,15 @@
+import MoviePoster from "@/components/posters/MoviePoster";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { getLibraryApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery } from "@tanstack/react-query";
 import { router } from "expo-router";
 import { useAtom } from "jotai";
-import {
-  ActivityIndicator,
-  ScrollView,
-  TouchableOpacity,
-  View,
-} from "react-native";
-import ContinueWatchingPoster from "./ContinueWatchingPoster";
-import { ItemCardText } from "./ItemCardText";
-import { Text } from "./common/Text";
-import MoviePoster from "./MoviePoster";
 import { useMemo } from "react";
+import { ScrollView, TouchableOpacity, View } from "react-native";
+import { Text } from "./common/Text";
+import { ItemCardText } from "./ItemCardText";
+import { Loader } from "./Loader";
 
 type SimilarItemsProps = {
   itemId: string;
@@ -50,7 +45,7 @@ export const SimilarItems: React.FC<SimilarItemsProps> = ({ itemId }) => {
       <Text className="px-4 text-2xl font-bold mb-2">Similar items</Text>
       {isLoading ? (
         <View className="my-12">
-          <ActivityIndicator />
+          <Loader />
         </View>
       ) : (
         <ScrollView horizontal>
@@ -58,7 +53,7 @@ export const SimilarItems: React.FC<SimilarItemsProps> = ({ itemId }) => {
             {movies.map((item) => (
               <TouchableOpacity
                 key={item.Id}
-                onPress={() => router.push(`/items/${item.Id}/page`)}
+                onPress={() => router.push(`/items/${item.Id}`)}
                 className="flex flex-col w-32"
               >
                 <MoviePoster item={item} />

components/SubtitleTrackSelector.tsx

@@ -1,5 +1,4 @@
 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";
@@ -22,14 +21,14 @@ export const SubtitleTrackSelector: React.FC<Props> = ({
   const subtitleStreams = useMemo(
     () =>
       item.MediaSources?.[0].MediaStreams?.filter(
-        (x) => x.Type === "Subtitle",
+        (x) => x.Type === "Subtitle"
       ) ?? [],
-    [item],
+    [item]
   );
 
   const selectedSubtitleSteam = useMemo(
     () => subtitleStreams.find((x) => x.Index === selected),
-    [subtitleStreams, selected],
+    [subtitleStreams, selected]
   );
 
   useEffect(() => {
@@ -37,56 +36,16 @@ export const SubtitleTrackSelector: React.FC<Props> = ({
     if (index !== undefined && index !== null) {
       onChange(index);
     } else {
-      // Get first subtitle stream
-      const firstSubtitle = subtitleStreams.find((x) => x.Index !== undefined);
-      if (firstSubtitle?.Index !== undefined) {
-        onChange(firstSubtitle.Index);
-      }
+      onChange(-1);
     }
   }, []);
 
   if (subtitleStreams.length === 0) return null;
 
   return (
-    <View className="flex flex-row items-center justify-between" {...props}>
-      <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-12 rounded-2xl border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between">
-                <Text className="">
-                  {tc(selectedSubtitleSteam?.DisplayTitle, 13)}
-                </Text>
-              </TouchableOpacity>
-            </View>
-          </View>
-        </DropdownMenu.Trigger>
-        <DropdownMenu.Content
-          loop={true}
-          side="bottom"
-          align="start"
-          alignOffset={0}
-          avoidCollisions={true}
-          collisionPadding={8}
-          sideOffset={8}
-        >
-          <DropdownMenu.Label>Subtitles</DropdownMenu.Label>
-          {subtitleStreams?.map((subtitle, idx: number) => (
-            <DropdownMenu.Item
-              key={idx.toString()}
-              onSelect={() => {
-                if (subtitle.Index !== undefined && subtitle.Index !== null)
-                  onChange(subtitle.Index);
-              }}
-            >
-              <DropdownMenu.ItemTitle>
-                {subtitle.DisplayTitle}
-              </DropdownMenu.ItemTitle>
-            </DropdownMenu.Item>
-          ))}
-        </DropdownMenu.Content>
-      </DropdownMenu.Root>
-    </View>
+    <View
+      className="flex flex-row items-center justify-between"
+      {...props}
+    ></View>
   );
 };

components/common/ColumnItem.tsx

@@ -0,0 +1,42 @@
+import { useMemo } from "react";
+import { StyleSheet, View, ViewProps } from "react-native";
+
+const getItemStyle = (index: number, numColumns: number) => {
+  const alignItems = (() => {
+    if (numColumns < 2 || index % numColumns === 0) return "flex-start";
+    if ((index + 1) % numColumns === 0) return "flex-end";
+
+    return "center";
+  })();
+
+  return {
+    padding: 20,
+    alignItems,
+    width: "100%",
+  } as const;
+};
+
+type ColumnItemProps = ViewProps & {
+  children: React.ReactNode;
+  index: number;
+  numColumns: number;
+};
+
+export const ColumnItem = ({
+  children,
+  index,
+  numColumns,
+  ...rest
+}: ColumnItemProps) => {
+  return (
+    <View className="flex flex-col mb-2 p-4" style={{ width: "33.3%" }}>
+      <View
+        className={`
+        `}
+        {...rest}
+      >
+        {children}
+      </View>
+    </View>
+  );
+};

components/common/HorrizontalScroll.tsx

@@ -1,11 +1,12 @@
-import React from "react";
-import {
-  ScrollView,
-  View,
-  ViewStyle,
-  ActivityIndicator,
-  ScrollViewProps,
-} from "react-native";
+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 { Text } from "./Text";
 
 interface HorizontalScrollProps<T> extends ScrollViewProps {
   data?: T[] | null;
@@ -13,25 +14,46 @@ interface HorizontalScrollProps<T> extends ScrollViewProps {
   containerStyle?: ViewStyle;
   contentContainerStyle?: ViewStyle;
   loadingContainerStyle?: ViewStyle;
+  height?: number;
+  loading?: boolean;
 }
 
 export function HorizontalScroll<T>({
-  data,
+  data = [],
   renderItem,
   containerStyle,
   contentContainerStyle,
   loadingContainerStyle,
+  loading = false,
+  height = 164,
   ...props
 }: HorizontalScrollProps<T>): React.ReactElement {
-  if (!data) {
+  const animatedOpacity = useSharedValue(0);
+  const animatedStyle1 = useAnimatedStyle(() => {
+    return {
+      opacity: withTiming(animatedOpacity.value, { duration: 250 }),
+    };
+  });
+
+  useEffect(() => {
+    if (data) {
+      animatedOpacity.value = 1;
+    }
+  }, [data]);
+
+  if (data === undefined || data === null || loading) {
     return (
       <View
         style={[
-          { flex: 1, justifyContent: "center", alignItems: "center" },
+          {
+            flex: 1,
+            justifyContent: "center",
+            alignItems: "center",
+          },
           loadingContainerStyle,
         ]}
       >
-        <ActivityIndicator size="small" />
+        <Loader />
       </View>
     );
   }
@@ -44,13 +66,23 @@ export function HorizontalScroll<T>({
       showsHorizontalScrollIndicator={false}
       {...props}
     >
-      <View className="flex flex-row px-4">
+      <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>
         ))}
-      </View>
+        {data.length === 0 && (
+          <View className="flex-1 justify-center items-center">
+            <Text className="text-center text-gray-500">No data available</Text>
+          </View>
+        )}
+      </Animated.View>
     </ScrollView>
   );
 }

components/common/InfiniteHorrizontalScroll.tsx

@@ -0,0 +1,164 @@
+import React, { useEffect } from "react";
+import {
+  NativeScrollEvent,
+  ScrollView,
+  ScrollViewProps,
+  View,
+  ViewStyle,
+} from "react-native";
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} 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 {
+  queryFn: ({
+    pageParam,
+  }: {
+    pageParam: number;
+  }) => Promise<BaseItemDtoQueryResult | null>;
+  queryKey: string[];
+  initialData?: BaseItemDto[];
+  renderItem: (item: BaseItemDto, index: number) => React.ReactNode;
+  containerStyle?: ViewStyle;
+  contentContainerStyle?: ViewStyle;
+  loadingContainerStyle?: ViewStyle;
+  height?: number;
+  loading?: boolean;
+}
+
+const isCloseToBottom = ({
+  layoutMeasurement,
+  contentOffset,
+  contentSize,
+}: NativeScrollEvent) => {
+  const paddingToBottom = 50;
+  return (
+    layoutMeasurement.height + contentOffset.y >=
+    contentSize.height - paddingToBottom
+  );
+};
+
+export function InfiniteHorizontalScroll({
+  queryFn,
+  queryKey,
+  initialData = [],
+  renderItem,
+  containerStyle,
+  contentContainerStyle,
+  loadingContainerStyle,
+  loading = false,
+  height = 164,
+  ...props
+}: HorizontalScrollProps): React.ReactElement {
+  const [api] = useAtom(apiAtom);
+  const [user] = useAtom(userAtom);
+  const navigation = useNavigation();
+
+  const animatedOpacity = useSharedValue(0);
+  const animatedStyle1 = useAnimatedStyle(() => {
+    return {
+      opacity: withTiming(animatedOpacity.value, { duration: 250 }),
+    };
+  });
+
+  const { data, isFetching, fetchNextPage } = useInfiniteQuery({
+    queryKey,
+    queryFn,
+    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,
+  });
+
+  useEffect(() => {
+    if (data) {
+      animatedOpacity.value = 1;
+    }
+  }, [data]);
+
+  if (data === undefined || data === null || loading) {
+    return (
+      <View
+        style={[
+          {
+            flex: 1,
+            justifyContent: "center",
+            alignItems: "center",
+          },
+          loadingContainerStyle,
+        ]}
+      >
+        <Loader />
+      </View>
+    );
+  }
+
+  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 && (
+          <View className="flex-1 justify-center items-center">
+            <Text className="text-center text-gray-500">No data available</Text>
+          </View>
+        )}
+      </Animated.View>
+    </ScrollView>
+  );
+}

components/common/Input.tsx

@@ -1,14 +1,9 @@
-import React, { useEffect } from "react";
-import { TextInputProps, TextProps } from "react-native";
-import { TextInput } from "react-native";
+import React from "react";
+import { TextInput, TextInputProps } from "react-native";
 export function Input(props: TextInputProps) {
   const { style, ...otherProps } = props;
   const inputRef = React.useRef<TextInput>(null);
 
-  useEffect(() => {
-    inputRef.current?.focus();
-  }, []);
-
   return (
     <TextInput
       ref={inputRef}
@@ -17,6 +12,7 @@ export function Input(props: TextInputProps) {
       style={[{ color: "white" }, style]}
       {...otherProps}
       placeholderTextColor={"#9CA3AF"}
+      clearButtonMode="while-editing"
     />
   );
 }

components/common/TouchableItemRouter.tsx

@@ -0,0 +1,59 @@
+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";
+
+interface Props extends TouchableOpacityProps {
+  item: BaseItemDto;
+}
+
+export const TouchableItemRouter: React.FC<PropsWithChildren<Props>> = ({
+  item,
+  children,
+  ...props
+}) => {
+  const router = useRouter();
+  return (
+    <TouchableOpacity
+      onPress={() => {
+        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;
+        }
+
+        // Movies and all other cases
+        if (item.Type === "BoxSet") {
+          router.push(`/collections/${item.Id}`);
+          return;
+        }
+
+        router.push(`/items/${item.Id}`);
+      }}
+      {...props}
+    >
+      {children}
+    </TouchableOpacity>
+  );
+};

components/downloads/EpisodeCard.tsx

@@ -1,97 +0,0 @@
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { TouchableOpacity } from "react-native";
-import * as ContextMenu from "zeego/context-menu";
-import { Text } from "../common/Text";
-import { useFiles } from "@/hooks/useFiles";
-import * as Haptics from "expo-haptics";
-import { useCallback } from "react";
-import * as FileSystem from "expo-file-system";
-import { useAtom } from "jotai";
-import { currentlyPlayingItemAtom } from "../CurrentlyPlayingBar";
-
-export const EpisodeCard: React.FC<{ item: BaseItemDto }> = ({ item }) => {
-  const { deleteFile } = useFiles();
-  const [_, setCp] = useAtom(currentlyPlayingItemAtom);
-
-  // const fetchFileSize = async () => {
-  //   try {
-  //     const filePath = `${FileSystem.documentDirectory}/${item.Id}.mp4`;
-  //     const info = await FileSystem.getInfoAsync(filePath);
-  //     return info.exists ? info.size : null;
-  //   } catch (e) {
-  //     console.log(e);
-  //     return null;
-  //   }
-  // };
-
-  // const { data: fileSize } = useQuery({
-  //   queryKey: ["fileSize", item?.Id],
-  //   queryFn: fetchFileSize,
-  // });
-
-  const openFile = useCallback(() => {
-    setCp({
-      item,
-      playbackUrl: `${FileSystem.documentDirectory}/${item.Id}.mp4`,
-    });
-  }, [item]);
-
-  const options = [
-    {
-      label: "Delete",
-      onSelect: (id: string) => {
-        deleteFile(id);
-        Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
-      },
-      destructive: true,
-    },
-  ];
-
-  return (
-    <>
-      <ContextMenu.Root>
-        <ContextMenu.Trigger>
-          <TouchableOpacity
-            onPress={openFile}
-            className="bg-neutral-900 border border-neutral-800 rounded-2xl p-4"
-          >
-            <Text className=" font-bold">{item.Name}</Text>
-            <Text className=" text-xs opacity-50">
-              Episode {item.IndexNumber}
-            </Text>
-            {/* <Text className=" text-xs opacity-50">
-              Size:{" "}
-              {fileSize
-                ? `${(fileSize / 1000000).toFixed(0)} MB`
-                : "Calculating..."}{" "}
-                </Text> */}
-          </TouchableOpacity>
-        </ContextMenu.Trigger>
-        <ContextMenu.Content
-          alignOffset={0}
-          avoidCollisions
-          collisionPadding={10}
-          loop={false}
-        >
-          {options.map((i) => (
-            <ContextMenu.Item
-              onSelect={() => {
-                i.onSelect(item.Id!);
-              }}
-              key={i.label}
-              destructive={i.destructive}
-            >
-              <ContextMenu.ItemTitle
-                style={{
-                  color: "red",
-                }}
-              >
-                {i.label}
-              </ContextMenu.ItemTitle>
-            </ContextMenu.Item>
-          ))}
-        </ContextMenu.Content>
-      </ContextMenu.Root>
-    </>
-  );
-};

components/downloads/MovieCard.tsx

@@ -1,97 +0,0 @@
-import { TouchableOpacity, View } from "react-native";
-import { Text } from "../common/Text";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { runtimeTicksToMinutes } from "@/utils/time";
-import * as ContextMenu from "zeego/context-menu";
-import { useFiles } from "@/hooks/useFiles";
-import * as FileSystem from "expo-file-system";
-import { useCallback } from "react";
-import * as Haptics from "expo-haptics";
-import { useAtom } from "jotai";
-import { currentlyPlayingItemAtom } from "../CurrentlyPlayingBar";
-import { useQuery } from "@tanstack/react-query";
-
-export const MovieCard: React.FC<{ item: BaseItemDto }> = ({ item }) => {
-  const { deleteFile } = useFiles();
-  const [_, setCp] = useAtom(currentlyPlayingItemAtom);
-
-  // const fetchFileSize = async () => {
-  //   const filePath = `${FileSystem.documentDirectory}/${item.Id}.mp4`;
-  //   const info = await FileSystem.getInfoAsync(filePath);
-  //   return info.exists ? info.size : null;
-  // };
-
-  // const { data: fileSize } = useQuery({
-  //   queryKey: ["fileSize", item?.Id],
-  //   queryFn: fetchFileSize,
-  // });
-
-  const openFile = useCallback(() => {
-    setCp({
-      item,
-      playbackUrl: `${FileSystem.documentDirectory}/${item.Id}.mp4`,
-    });
-  }, [item]);
-
-  const options = [
-    {
-      label: "Delete",
-      onSelect: (id: string) => {
-        deleteFile(id);
-        Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
-      },
-      destructive: true,
-    },
-  ];
-
-  return (
-    <>
-      <ContextMenu.Root>
-        <ContextMenu.Trigger>
-          <TouchableOpacity
-            onPress={openFile}
-            className="bg-neutral-900 border border-neutral-800 rounded-2xl p-4"
-          >
-            <Text className=" font-bold">{item.Name}</Text>
-            <View className="flex flex-col">
-              <Text className=" text-xs opacity-50">{item.ProductionYear}</Text>
-              <Text className=" text-xs opacity-50">
-                {runtimeTicksToMinutes(item.RunTimeTicks)}
-              </Text>
-              {/* <Text className=" text-xs opacity-50">
-                Size:{" "}
-                {fileSize
-                  ? `${(fileSize / 1000000).toFixed(0)} MB`
-                  : "Calculating..."}{" "}
-                  </Text>*/}
-            </View>
-          </TouchableOpacity>
-        </ContextMenu.Trigger>
-        <ContextMenu.Content
-          alignOffset={0}
-          avoidCollisions={false}
-          collisionPadding={0}
-          loop={false}
-        >
-          {options.map((i) => (
-            <ContextMenu.Item
-              onSelect={() => {
-                i.onSelect(item.Id!);
-              }}
-              key={i.label}
-              destructive={i.destructive}
-            >
-              <ContextMenu.ItemTitle
-                style={{
-                  color: "red",
-                }}
-              >
-                {i.label}
-              </ContextMenu.ItemTitle>
-            </ContextMenu.Item>
-          ))}
-        </ContextMenu.Content>
-      </ContextMenu.Root>
-    </>
-  );
-};

components/downloads/SeriesCard.tsx

@@ -1,49 +0,0 @@
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { View } from "react-native";
-import { EpisodeCard } from "./EpisodeCard";
-import { Text } from "../common/Text";
-import { useMemo } from "react";
-import { SeasonPicker } from "../series/SeasonPicker";
-
-export const SeriesCard: React.FC<{ items: BaseItemDto[] }> = ({ items }) => {
-  const groupBySeason = useMemo(() => {
-    const seasons: Record<string, BaseItemDto[]> = {};
-
-    items.forEach((item) => {
-      if (!seasons[item.SeasonName!]) {
-        seasons[item.SeasonName!] = [];
-      }
-
-      seasons[item.SeasonName!].push(item);
-    });
-
-    return Object.values(seasons).sort(
-      (a, b) => a[0].IndexNumber! - b[0].IndexNumber!
-    );
-  }, [items]);
-
-  return (
-    <View>
-      <View className="flex flex-row items-center justify-between">
-        <Text className="text-2xl font-bold">{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>
-      </View>
-
-      <Text className="opacity-50 mb-2">TV-Series</Text>
-      {groupBySeason.map((seasonItems, seasonIndex) => (
-        <View key={seasonIndex}>
-          <Text className="mb-2 font-semibold">
-            {seasonItems[0].SeasonName}
-          </Text>
-          {seasonItems.map((item, index) => (
-            <View className="mb-2" key={index}>
-              <EpisodeCard item={item} />
-            </View>
-          ))}
-        </View>
-      ))}
-    </View>
-  );
-};

components/filters/FilterButton.tsx

@@ -0,0 +1,97 @@
+import { Text } from "@/components/common/Text";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { FontAwesome, Ionicons } from "@expo/vector-icons";
+import { useQuery } from "@tanstack/react-query";
+import { useAtom } from "jotai";
+import { useState } from "react";
+import { TouchableOpacity, View, ViewProps } from "react-native";
+import { FilterSheet } from "./FilterSheet";
+
+interface FilterButtonProps<T> extends ViewProps {
+  collectionId: string;
+  showSearch?: boolean;
+  queryKey: string;
+  values: T[];
+  title: string;
+  set: (value: T[]) => void;
+  queryFn: (params: any) => Promise<any>;
+  searchFilter: (item: T, query: string) => boolean;
+  renderItemLabel: (item: T) => React.ReactNode;
+  icon?: "filter" | "sort";
+}
+
+export const FilterButton = <T,>({
+  collectionId,
+  queryFn,
+  queryKey,
+  set,
+  values,
+  title,
+  renderItemLabel,
+  searchFilter,
+  showSearch = true,
+  icon = "filter",
+  ...props
+}: FilterButtonProps<T>) => {
+  const [open, setOpen] = useState(false);
+
+  const { data: filters } = useQuery<T[]>({
+    queryKey: [queryKey, collectionId],
+    queryFn,
+    staleTime: 0,
+  });
+
+  if (filters?.length === 0) return null;
+
+  return (
+    <>
+      <TouchableOpacity onPress={() => setOpen(true)}>
+        <View
+          className={`
+            px-3 py-1.5 rounded-full flex flex-row items-center space-x-1
+            ${
+              values.length > 0
+                ? "bg-purple-600  border border-purple-700"
+                : "bg-neutral-900 border border-neutral-900"
+            }
+            `}
+          {...props}
+        >
+          <Text
+            className={`
+             ${values.length > 0 ? "text-purple-100" : "text-neutral-100"}
+            text-xs font-semibold`}
+          >
+            {title}
+          </Text>
+          {icon === "filter" ? (
+            <Ionicons
+              name="filter"
+              size={14}
+              color="white"
+              style={{ opacity: 0.5 }}
+            />
+          ) : (
+            <FontAwesome
+              name="sort"
+              size={14}
+              color="white"
+              style={{ opacity: 0.5 }}
+            />
+          )}
+        </View>
+      </TouchableOpacity>
+      <FilterSheet<T>
+        title={title}
+        open={open}
+        setOpen={setOpen}
+        data={filters}
+        values={values}
+        set={set}
+        renderItemLabel={renderItemLabel}
+        searchFilter={searchFilter}
+        showSearch={showSearch}
+      />
+    </>
+  );
+};

components/filters/FilterSheet.tsx

@@ -0,0 +1,190 @@
+import {
+  BottomSheetBackdrop,
+  BottomSheetBackdropProps,
+  BottomSheetFlatList,
+  BottomSheetModal,
+  BottomSheetScrollView,
+  BottomSheetView,
+} from "@gorhom/bottom-sheet";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+
+import { Text } from "@/components/common/Text";
+import { StyleSheet, TouchableOpacity, View, ViewProps } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import { Button } from "../Button";
+import { Input } from "../common/Input";
+
+interface Props<T> extends ViewProps {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  data?: T[] | null;
+  values: T[];
+  set: (value: T[]) => void;
+  title: string;
+  searchFilter: (item: T, query: string) => boolean;
+  renderItemLabel: (item: T) => React.ReactNode;
+  showSearch?: boolean;
+}
+
+const LIMIT = 100;
+
+export const FilterSheet = <T,>({
+  values,
+  data: _data,
+  open,
+  set,
+  setOpen,
+  title,
+  searchFilter,
+  renderItemLabel,
+  showSearch = true,
+  ...props
+}: Props<T>) => {
+  const bottomSheetModalRef = useRef<BottomSheetModal>(null);
+  const snapPoints = useMemo(() => ["80%"], []);
+
+  const [data, setData] = useState<T[]>([]);
+  const [offset, setOffset] = useState<number>(0);
+
+  const [search, setSearch] = useState<string>("");
+
+  const filteredData = useMemo(() => {
+    if (!search) return _data;
+    const results = [];
+    for (let i = 0; i < (_data?.length || 0); i++) {
+      if (_data && searchFilter(_data[i], search)) {
+        results.push(_data[i]);
+      }
+    }
+    return results.slice(0, 100);
+  }, [search, _data, searchFilter]);
+
+  useEffect(() => {
+    if (!_data || _data.length === 0) return;
+    const tmp = new Set(data);
+    for (let i = offset; i < Math.min(_data.length, offset + LIMIT); i++) {
+      tmp.add(_data[i]);
+    }
+    setData(Array.from(tmp));
+  }, [offset, _data]);
+
+  useEffect(() => {
+    if (open) bottomSheetModalRef.current?.present();
+    else bottomSheetModalRef.current?.dismiss();
+  }, [open]);
+
+  const handleSheetChanges = useCallback((index: number) => {
+    if (index === -1) {
+      setOpen(false);
+    }
+  }, []);
+
+  const renderData = useMemo(() => {
+    if (search.length > 0 && showSearch) return filteredData;
+    return data;
+  }, [search, filteredData, data]);
+
+  const renderBackdrop = useCallback(
+    (props: BottomSheetBackdropProps) => (
+      <BottomSheetBackdrop
+        {...props}
+        disappearsOnIndex={-1}
+        appearsOnIndex={0}
+      />
+    ),
+    []
+  );
+
+  return (
+    <BottomSheetModal
+      ref={bottomSheetModalRef}
+      index={0}
+      snapPoints={snapPoints}
+      onChange={handleSheetChanges}
+      backdropComponent={renderBackdrop}
+      handleIndicatorStyle={{
+        backgroundColor: "white",
+      }}
+      backgroundStyle={{
+        backgroundColor: "#171717",
+      }}
+      style={{}}
+    >
+      <BottomSheetScrollView
+        style={{
+          flex: 1,
+        }}
+      >
+        <View className="px-4 mt-2 mb-8">
+          <Text className="font-bold text-2xl">{title}</Text>
+          <Text className="mb-2 text-neutral-500">{_data?.length} items</Text>
+          {showSearch && (
+            <Input
+              placeholder="Search..."
+              className="my-2"
+              value={search}
+              onChangeText={(text) => {
+                setSearch(text);
+              }}
+              returnKeyType="done"
+            />
+          )}
+          <View
+            style={{
+              borderRadius: 20,
+              overflow: "hidden",
+            }}
+            className="mb-4 flex flex-col rounded-xl overflow-hidden"
+          >
+            {renderData?.map((item, index) => (
+              <>
+                <TouchableOpacity
+                  onPress={() => {
+                    set(
+                      values.includes(item)
+                        ? values.filter((i) => i !== item)
+                        : [item]
+                    );
+                    setTimeout(() => {
+                      setOpen(false);
+                    }, 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) ? (
+                    <Ionicons name="radio-button-on" size={24} color="white" />
+                  ) : (
+                    <Ionicons name="radio-button-off" size={24} color="white" />
+                  )}
+                </TouchableOpacity>
+                <View
+                  style={{
+                    height: StyleSheet.hairlineWidth,
+                  }}
+                  className="h-1 divide-neutral-700 "
+                ></View>
+              </>
+            ))}
+          </View>
+          {data.length < (_data?.length || 0) && (
+            <Button
+              onPress={() => {
+                setOffset(offset + 100);
+              }}
+            >
+              Load more
+            </Button>
+          )}
+        </View>
+      </BottomSheetScrollView>
+    </BottomSheetModal>
+  );
+};

components/filters/ResetFiltersButton.tsx

@@ -0,0 +1,38 @@
+import {
+  genreFilterAtom,
+  tagsFilterAtom,
+  yearFilterAtom,
+} from "@/utils/atoms/filters";
+import { Ionicons } from "@expo/vector-icons";
+import { useAtom } from "jotai";
+import { TouchableOpacity, TouchableOpacityProps } from "react-native";
+
+interface Props extends TouchableOpacityProps {}
+
+export const ResetFiltersButton: React.FC<Props> = ({ ...props }) => {
+  const [selectedGenres, setSelectedGenres] = useAtom(genreFilterAtom);
+  const [selectedTags, setSelectedTags] = useAtom(tagsFilterAtom);
+  const [selectedYears, setSelectedYears] = useAtom(yearFilterAtom);
+
+  if (
+    selectedGenres.length === 0 &&
+    selectedTags.length === 0 &&
+    selectedYears.length === 0
+  ) {
+    return null;
+  }
+
+  return (
+    <TouchableOpacity
+      onPress={() => {
+        setSelectedGenres([]);
+        setSelectedTags([]);
+        setSelectedYears([]);
+      }}
+      className="bg-purple-600 rounded-full w-8 h-8 flex items-center justify-center"
+      {...props}
+    >
+      <Ionicons name="close" size={20} color="white" />
+    </TouchableOpacity>
+  );
+};

components/home/LargeMovieCarousel.tsx

@@ -0,0 +1,176 @@
+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 { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { Image } from "expo-image";
+import { useRouter } from "expo-router";
+import { useAtom } from "jotai";
+import React, { useMemo } from "react";
+import { Dimensions, View, ViewProps } from "react-native";
+import { useSharedValue } from "react-native-reanimated";
+import Carousel, {
+  ICarouselInstance,
+  Pagination,
+} from "react-native-reanimated-carousel";
+import { TouchableItemRouter } from "../common/TouchableItemRouter";
+import { Loader } from "../Loader";
+
+interface Props extends ViewProps {}
+
+export const LargeMovieCarousel: React.FC<Props> = ({ ...props }) => {
+  const router = useRouter();
+  const queryClient = useQueryClient();
+  const [settings] = useSettings();
+
+  const ref = React.useRef<ICarouselInstance>(null);
+  const progress = useSharedValue<number>(0);
+
+  const [api] = useAtom(apiAtom);
+  const [user] = useAtom(userAtom);
+
+  const onPressPagination = (index: number) => {
+    ref.current?.scrollTo({
+      /**
+       * Calculate the difference between the current index and the target index
+       * to ensure that the carousel scrolls to the nearest index
+       */
+      count: index - progress.value,
+      animated: true,
+    });
+  };
+
+  const { data: mediaListCollection, isLoading: l1 } = useQuery<string | null>({
+    queryKey: ["mediaListCollection", user?.Id],
+    queryFn: async () => {
+      if (!api || !user?.Id) return null;
+
+      const response = await getItemsApi(api).getItems({
+        userId: user.Id,
+        tags: ["medialist", "promoted"],
+        recursive: true,
+        fields: ["Tags"],
+        includeItemTypes: ["BoxSet"],
+      });
+
+      const id = response.data.Items?.find((c) => c.Name === "sf_carousel")?.Id;
+      return id || null;
+    },
+    enabled: !!api && !!user?.Id && settings?.usePopularPlugin === true,
+    staleTime: 0,
+  });
+
+  const { data: popularItems, isLoading: l2 } = useQuery<BaseItemDto[]>({
+    queryKey: ["popular", user?.Id],
+    queryFn: async () => {
+      if (!api || !user?.Id || !mediaListCollection) return [];
+
+      const response = await getItemsApi(api).getItems({
+        userId: user.Id,
+        parentId: mediaListCollection,
+        limit: 10,
+      });
+
+      return response.data.Items || [];
+    },
+    enabled: !!api && !!user?.Id && !!mediaListCollection,
+    staleTime: 0,
+  });
+
+  const width = Dimensions.get("screen").width;
+
+  if (l1 || l2)
+    return (
+      <View className="h-[242px] flex items-center justify-center">
+        <Loader />
+      </View>
+    );
+
+  if (!popularItems) return null;
+
+  return (
+    <View className="flex flex-col items-center" {...props}>
+      <Carousel
+        autoPlay={true}
+        autoPlayInterval={2000}
+        loop={true}
+        ref={ref}
+        width={width}
+        height={204}
+        data={popularItems}
+        onProgressChange={progress}
+        renderItem={({ item, index }) => <RenderItem item={item} />}
+      />
+      <Pagination.Basic
+        progress={progress}
+        data={popularItems}
+        dotStyle={{
+          backgroundColor: "rgba(255,255,255,0.2)",
+          borderRadius: 50,
+        }}
+        activeDotStyle={{
+          backgroundColor: "rgba(255,255,255,0.8)",
+          borderRadius: 50,
+        }}
+        containerStyle={{ gap: 5, marginTop: 12 }}
+        onPress={onPressPagination}
+      />
+    </View>
+  );
+};
+
+const RenderItem: React.FC<{ item: BaseItemDto }> = ({ item }) => {
+  const [api] = useAtom(apiAtom);
+
+  const uri = useMemo(() => {
+    if (!api) return null;
+
+    return getBackdropUrl({
+      api,
+      item,
+      quality: 90,
+      width: 1000,
+    });
+  }, [api, item]);
+
+  const logoUri = useMemo(() => {
+    if (!api) return null;
+    return getLogoImageUrlById({ api, item, height: 100 });
+  }, [item]);
+
+  if (!uri || !logoUri) return null;
+
+  return (
+    <TouchableItemRouter item={item}>
+      <View className="px-4">
+        <View className="relative flex justify-center rounded-2xl overflow-hidden border border-neutral-800">
+          <Image
+            source={{
+              uri,
+            }}
+            style={{
+              width: "100%",
+              height: 200,
+              borderRadius: 16,
+              overflow: "hidden",
+            }}
+          />
+          <View className="absolute bottom-0 left-0 w-full h-24 p-4 flex items-center">
+            <Image
+              source={{
+                uri: logoUri,
+              }}
+              style={{
+                width: "100%",
+                height: "100%",
+                resizeMode: "contain",
+              }}
+            />
+          </View>
+        </View>
+      </View>
+    </TouchableItemRouter>
+  );
+};

components/home/ScrollingCollectionList.tsx

@@ -0,0 +1,60 @@
+import { Text } from "@/components/common/Text";
+import MoviePoster from "@/components/posters/MoviePoster";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { View, ViewProps } from "react-native";
+import ContinueWatchingPoster from "../ContinueWatchingPoster";
+import { ItemCardText } from "../ItemCardText";
+import { HorizontalScroll } from "../common/HorrizontalScroll";
+import { TouchableItemRouter } from "../common/TouchableItemRouter";
+
+interface Props extends ViewProps {
+  title: string;
+  loading?: boolean;
+  orientation?: "horizontal" | "vertical";
+  data?: BaseItemDto[] | null;
+  height?: "small" | "large";
+  disabled?: boolean;
+}
+
+export const ScrollingCollectionList: React.FC<Props> = ({
+  title,
+  data,
+  orientation = "vertical",
+  height = "small",
+  loading = false,
+  disabled = false,
+  ...props
+}) => {
+  if (disabled) return null;
+
+  return (
+    <View {...props}>
+      <Text className="px-4 text-2xl font-bold mb-2 text-neutral-100">
+        {title}
+      </Text>
+      <HorizontalScroll<BaseItemDto>
+        data={data}
+        height={orientation === "vertical" ? 247 : 164}
+        loading={loading}
+        renderItem={(item, index) => (
+          <TouchableItemRouter
+            key={index}
+            item={item}
+            className={`flex flex-col
+              ${orientation === "vertical" ? "w-32" : "w-48"}
+            `}
+          >
+            <View>
+              {orientation === "vertical" ? (
+                <MoviePoster item={item} />
+              ) : (
+                <ContinueWatchingPoster item={item} />
+              )}
+              <ItemCardText item={item} />
+            </View>
+          </TouchableItemRouter>
+        )}
+      />
+    </View>
+  );
+};

components/medialists/MediaListSection.tsx

@@ -0,0 +1,72 @@
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import {
+  BaseItemDto,
+  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";
+
+interface Props extends ViewProps {
+  collection: BaseItemDto;
+}
+
+export const MediaListSection: React.FC<Props> = ({ collection, ...props }) => {
+  const [api] = useAtom(apiAtom);
+  const [user] = useAtom(userAtom);
+
+  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,
+        parentId: collection.Id,
+        startIndex: pageParam,
+        limit: 10,
+      });
+
+      return response.data;
+    },
+    [api, user?.Id, collection.Id]
+  );
+
+  if (!collection) return null;
+
+  return (
+    <View {...props}>
+      <Text className="px-4 text-2xl font-bold mb-2 text-neutral-100">
+        {collection.Name}
+      </Text>
+      <InfiniteHorizontalScroll
+        height={247}
+        renderItem={(item, index) => (
+          <TouchableItemRouter
+            key={index}
+            item={item}
+            className={`flex flex-col
+              ${"w-32"}
+            `}
+          >
+            <View>
+              <MoviePoster item={item} />
+            </View>
+          </TouchableItemRouter>
+        )}
+        queryFn={fetchItems}
+        queryKey={["media-list", collection.Id!]}
+      />
+    </View>
+  );
+};

components/music/SongsList.tsx

@@ -0,0 +1,38 @@
+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 { SongsListItem } from "./SongsListItem";
+
+interface Props extends ViewProps {
+  songs?: BaseItemDto[] | null;
+  collectionId: string;
+  artistId: string;
+  albumId: string;
+}
+
+export const SongsList: React.FC<Props> = ({
+  collectionId,
+  artistId,
+  albumId,
+  songs = [],
+  ...props
+}) => {
+  const router = useRouter();
+  return (
+    <View className="flex flex-col space-y-2" {...props}>
+      {songs?.map((item: BaseItemDto, index: number) => (
+        <SongsListItem
+          key={item.Id}
+          item={item}
+          index={index}
+          collectionId={collectionId}
+          artistId={artistId}
+          albumId={albumId}
+        />
+      ))}
+    </View>
+  );
+};

components/music/SongsListItem.tsx

@@ -0,0 +1,94 @@
+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 { getMediaInfoApi } from "@jellyfin/sdk/lib/utils/api";
+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;
+  artistId: string;
+  albumId: string;
+  item: BaseItemDto;
+  index: number;
+}
+
+export const SongsListItem: React.FC<Props> = ({
+  collectionId,
+  artistId,
+  albumId,
+  item,
+  index,
+  ...props
+}) => {
+  const [api] = useAtom(apiAtom);
+  const [user] = useAtom(userAtom);
+  const [, setCp] = useAtom(currentlyPlayingItemAtom);
+  const [, setPlaying] = useAtom(playingAtom);
+
+  const { showActionSheetWithOptions } = useActionSheet();
+
+  const openSelect = () => {
+    play("device");
+    return;
+  };
+
+  const play = async (type: "device" | "cast") => {
+    if (!user?.Id || !api || !item.Id) return;
+
+    const response = await getMediaInfoApi(api!).getPlaybackInfo({
+      itemId: item?.Id,
+      userId: user?.Id,
+    });
+
+    const sessionData = response.data;
+
+    const url = await getStreamUrl({
+      api,
+      userId: user.Id,
+      item,
+      startTimeTicks: item?.UserData?.PlaybackPositionTicks || 0,
+      sessionData,
+      deviceProfile: ios,
+    });
+
+    if (!url || !item) return;
+
+    setCp({
+      item,
+      playbackUrl: url,
+    });
+    setPlaying(true);
+  };
+
+  return (
+    <TouchableOpacity
+      onPress={() => {
+        openSelect();
+      }}
+      {...props}
+    >
+      <View className="flex flex-row items-center space-x-4 bg-neutral-900 border-neutral-800 px-4 py-4 rounded-xl">
+        <Text className="opacity-50">{index + 1}</Text>
+        <View>
+          <Text className="mb-0.5 font-semibold">{item.Name}</Text>
+          <Text className="opacity-50 text-xs">
+            {runtimeTicksToSeconds(item.RunTimeTicks)}
+          </Text>
+        </View>
+      </View>
+    </TouchableOpacity>
+  );
+};

components/navigation/TabBarIcon.tsx

@@ -1,9 +1,12 @@
 // You can explore the built-in icon families and icons on the web at https://icons.expo.fyi/
 
-import Ionicons from '@expo/vector-icons/Ionicons';
-import { type IconProps } from '@expo/vector-icons/build/createIconSet';
-import { type ComponentProps } from 'react';
+import Ionicons from "@expo/vector-icons/Ionicons";
+import { type IconProps } from "@expo/vector-icons/build/createIconSet";
+import { type ComponentProps } from "react";
 
-export function TabBarIcon({ style, ...rest }: IconProps<ComponentProps<typeof Ionicons>['name']>) {
-  return <Ionicons size={28} style={[{ marginBottom: -3 }, style]} {...rest} />;
+export function TabBarIcon({
+  style,
+  ...rest
+}: IconProps<ComponentProps<typeof Ionicons>["name"]>) {
+  return <Ionicons size={26} style={[{ marginBottom: -3 }, style]} {...rest} />;
 }

components/posters/AlbumCover.tsx

@@ -0,0 +1,82 @@
+import { apiAtom } from "@/providers/JellyfinProvider";
+import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
+import { getPrimaryImageUrlById } from "@/utils/jellyfin/image/getPrimaryImageUrlById";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { Image } from "expo-image";
+import { useAtom } from "jotai";
+import { useMemo } from "react";
+import { View } from "react-native";
+
+type ArtistPosterProps = {
+  item?: BaseItemDto | null;
+  id?: string | null;
+  showProgress?: boolean;
+};
+
+const AlbumCover: React.FC<ArtistPosterProps> = ({ item, id }) => {
+  const [api] = useAtom(apiAtom);
+
+  const url = useMemo(() => {
+    const u = getPrimaryImageUrl({
+      api,
+      item,
+    });
+    return u;
+  }, [item]);
+
+  const url2 = useMemo(() => {
+    const u = getPrimaryImageUrlById({
+      api,
+      id,
+      quality: 85,
+      width: 300,
+    });
+    return u;
+  }, [item]);
+
+  if (!item && id)
+    return (
+      <View className="relative rounded-md overflow-hidden border border-neutral-900">
+        <Image
+          key={id}
+          id={id}
+          source={
+            url2
+              ? {
+                  uri: url2,
+                }
+              : null
+          }
+          cachePolicy={"memory-disk"}
+          contentFit="cover"
+          style={{
+            aspectRatio: "1/1",
+          }}
+        />
+      </View>
+    );
+
+  if (item)
+    return (
+      <View className="relative rounded-md overflow-hidden border border-neutral-900">
+        <Image
+          key={item.Id}
+          id={item.Id}
+          source={
+            url
+              ? {
+                  uri: url,
+                }
+              : null
+          }
+          cachePolicy={"memory-disk"}
+          contentFit="cover"
+          style={{
+            aspectRatio: "1/1",
+          }}
+        />
+      </View>
+    );
+};
+
+export default AlbumCover;

components/posters/ArtistPoster.tsx

@@ -0,0 +1,57 @@
+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 } from "react";
+import { View } from "react-native";
+
+type ArtistPosterProps = {
+  item: BaseItemDto;
+  showProgress?: boolean;
+};
+
+const ArtistPoster: React.FC<ArtistPosterProps> = ({
+  item,
+  showProgress = false,
+}) => {
+  const [api] = useAtom(apiAtom);
+
+  const url = useMemo(
+    () =>
+      getPrimaryImageUrl({
+        api,
+        item,
+      }),
+    [item]
+  );
+
+  if (!url)
+    return (
+      <View
+        className="rounded-md overflow-hidden border border-neutral-900"
+        style={{
+          aspectRatio: "1/1",
+        }}
+      ></View>
+    );
+
+  return (
+    <View className="relative rounded-md overflow-hidden border border-neutral-900">
+      <Image
+        key={item.Id}
+        id={item.Id}
+        source={{
+          uri: url,
+        }}
+        cachePolicy={"memory-disk"}
+        contentFit="cover"
+        style={{
+          aspectRatio: "1/1",
+        }}
+      />
+    </View>
+  );
+};
+
+export default ArtistPoster;

components/posters/MoviePoster.tsx

@@ -1,11 +1,11 @@
 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 "./WatchedIndicator";
-import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
+import { WatchedIndicator } from "@/components/WatchedIndicator";
 
 type MoviePosterProps = {
   item: BaseItemDto;
@@ -24,35 +24,38 @@ const MoviePoster: React.FC<MoviePosterProps> = ({
         api,
         item,
       }),
-    [item],
+    [item]
   );
 
   const [progress, setProgress] = useState(
-    item.UserData?.PlayedPercentage || 0,
+    item.UserData?.PlayedPercentage || 0
   );
 
-  if (!url)
-    return (
-      <View
-        className="rounded-md overflow-hidden border border-neutral-900"
-        style={{
-          aspectRatio: "10/15",
-        }}
-      ></View>
-    );
+  const blurhash = useMemo(() => {
+    const key = item.ImageTags?.["Primary"] as string;
+    return item.ImageBlurHashes?.["Primary"]?.[key];
+  }, [item]);
 
   return (
     <View className="relative rounded-md overflow-hidden border border-neutral-900">
       <Image
+        placeholder={{
+          blurhash,
+        }}
         key={item.Id}
         id={item.Id}
-        source={{
-          uri: url,
-        }}
+        source={
+          url
+            ? {
+                uri: url,
+              }
+            : null
+        }
         cachePolicy={"memory-disk"}
         contentFit="cover"
         style={{
           aspectRatio: "10/15",
+          width: "100%",
         }}
       />
       <WatchedIndicator item={item} />

components/posters/ParentPoster.tsx

@@ -1,5 +1,4 @@
 import { apiAtom } from "@/providers/JellyfinProvider";
-import { useQuery } from "@tanstack/react-query";
 import { Image } from "expo-image";
 import { useAtom } from "jotai";
 import { useMemo } from "react";

components/posters/Poster.tsx

@@ -9,10 +9,11 @@ type PosterProps = {
   item?: BaseItemDto | BaseItemPerson | null;
   url?: string | null;
   showProgress?: boolean;
+  blurhash?: string | null;
 };
 
-const Poster: React.FC<PosterProps> = ({ item, url }) => {
-  if (!url || !item)
+const Poster: React.FC<PosterProps> = ({ item, url, blurhash }) => {
+  if (!item)
     return (
       <View
         className="border border-neutral-900"
@@ -25,11 +26,22 @@ const Poster: React.FC<PosterProps> = ({ item, url }) => {
   return (
     <View className="rounded-md overflow-hidden border border-neutral-900">
       <Image
+        placeholder={
+          blurhash
+            ? {
+                blurhash,
+              }
+            : null
+        }
         key={item.Id}
         id={item.Id}
-        source={{
-          uri: url,
-        }}
+        source={
+          url
+            ? {
+                uri: url,
+              }
+            : null
+        }
         cachePolicy={"memory-disk"}
         contentFit="cover"
         style={{

components/posters/SeriesPoster.tsx

@@ -0,0 +1,58 @@
+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;
+};
+
+const SeriesPoster: React.FC<MoviePosterProps> = ({ item }) => {
+  const [api] = useAtom(apiAtom);
+
+  const url = useMemo(
+    () =>
+      getPrimaryImageUrl({
+        api,
+        item,
+      }),
+    [item]
+  );
+
+  const blurhash = useMemo(() => {
+    const key = item.ImageTags?.["Primary"] as string;
+    return item.ImageBlurHashes?.["Primary"]?.[key];
+  }, [item]);
+
+  return (
+    <View className="relative rounded-md 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%",
+        }}
+      />
+    </View>
+  );
+};
+
+export default SeriesPoster;

components/series/CastAndCrew.tsx

@@ -6,7 +6,7 @@ import React from "react";
 import { Linking, TouchableOpacity, View } from "react-native";
 import { HorizontalScroll } from "../common/HorrizontalScroll";
 import { Text } from "../common/Text";
-import Poster from "../Poster";
+import Poster from "../posters/Poster";
 import { useAtom } from "jotai";
 import { apiAtom } from "@/providers/JellyfinProvider";
 import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";

components/series/CurrentSeries.tsx

@@ -4,7 +4,7 @@ import { router } from "expo-router";
 import { useAtom } from "jotai";
 import React from "react";
 import { TouchableOpacity, View } from "react-native";
-import Poster from "../Poster";
+import Poster from "../posters/Poster";
 import { HorizontalScroll } from "../common/HorrizontalScroll";
 import { Text } from "../common/Text";
 import { getPrimaryImageUrlById } from "@/utils/jellyfin/image/getPrimaryImageUrlById";
@@ -20,7 +20,7 @@ export const CurrentSeries = ({ item }: { item: BaseItemDto }) => {
         renderItem={(item, index) => (
           <TouchableOpacity
             key={item.Id}
-            onPress={() => router.push(`/series/${item.SeriesId}/page`)}
+            onPress={() => router.push(`/series/${item.SeriesId}`)}
             className="flex flex-col space-y-2 w-32"
           >
             <Poster

components/series/NextEpisodeButton.tsx

@@ -75,8 +75,6 @@ export const NextEpisodeButton: React.FC<Props> = ({
         startIndex: type === "next" ? item.IndexNumber : item.IndexNumber - 2,
       });
 
-      console.log("NextEpisode ~", type, response.data);
-
       return (response.data.Items?.[0] as BaseItemDto) || null;
     },
     enabled: Boolean(api && user?.Id && item?.Id && item.SeasonId),
@@ -92,7 +90,7 @@ export const NextEpisodeButton: React.FC<Props> = ({
 
   return (
     <Button
-      onPress={() => router.replace(`/items/${nextEpisode?.Id}/page`)}
+      onPress={() => router.replace(`/items/${nextEpisode?.Id}`)}
       className={`h-12 aspect-square`}
       disabled={disabled}
       {...props}

components/series/NextUp.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { TouchableOpacity, View } from "react-native";
 import { HorizontalScroll } from "../common/HorrizontalScroll";
 import { Text } from "../common/Text";
-import Poster from "../Poster";
+import Poster from "../posters/Poster";
 import ContinueWatchingPoster from "../ContinueWatchingPoster";
 import { ItemCardText } from "../ItemCardText";
 import { router } from "expo-router";
@@ -49,7 +49,7 @@ export const NextUp: React.FC<{ seriesId: string }> = ({ seriesId }) => {
         renderItem={(item, index) => (
           <TouchableOpacity
             onPress={() => {
-              router.push(`/(auth)/items/${item.Id}/page`);
+              router.push(`/(auth)/items/${item.Id}`);
             }}
             key={item.Id}
             className="flex flex-col w-32"

components/series/SeasonPicker.tsx

@@ -5,7 +5,6 @@ import { useRouter } from "expo-router";
 import { atom, useAtom } from "jotai";
 import { useMemo } from "react";
 import { TouchableOpacity, View } from "react-native";
-import * as DropdownMenu from "zeego/dropdown-menu";
 import ContinueWatchingPoster from "../ContinueWatchingPoster";
 import { ItemCardText } from "../ItemCardText";
 import { HorizontalScroll } from "../common/HorrizontalScroll";
@@ -40,7 +39,7 @@ export const SeasonPicker: React.FC<Props> = ({ item }) => {
           headers: {
             Authorization: `MediaBrowser DeviceId="${api.deviceInfo.id}", Token="${api.accessToken}"`,
           },
-        },
+        }
       );
 
       return response.data.Items;
@@ -51,7 +50,7 @@ export const SeasonPicker: React.FC<Props> = ({ item }) => {
   const selectedSeasonId: string | null = useMemo(
     () =>
       seasons?.find((season: any) => season.IndexNumber === seasonIndex)?.Id,
-    [seasons, seasonIndex],
+    [seasons, seasonIndex]
   );
 
   const { data: episodes } = useQuery({
@@ -70,7 +69,7 @@ export const SeasonPicker: React.FC<Props> = ({ item }) => {
           headers: {
             Authorization: `MediaBrowser DeviceId="${api.deviceInfo.id}", Token="${api.accessToken}"`,
           },
-        },
+        }
       );
 
       return response.data.Items as BaseItemDto[];
@@ -80,36 +79,6 @@ export const SeasonPicker: React.FC<Props> = ({ item }) => {
 
   return (
     <View className="mb-2">
-      <DropdownMenu.Root>
-        <DropdownMenu.Trigger>
-          <View className="flex flex-row px-4">
-            <TouchableOpacity className="bg-neutral-900 rounded-2xl border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between">
-              <Text>Season {seasonIndex}</Text>
-            </TouchableOpacity>
-          </View>
-        </DropdownMenu.Trigger>
-        <DropdownMenu.Content
-          loop={true}
-          side="bottom"
-          align="start"
-          alignOffset={0}
-          avoidCollisions={true}
-          collisionPadding={8}
-          sideOffset={8}
-        >
-          <DropdownMenu.Label>Seasons</DropdownMenu.Label>
-          {seasons?.map((season: any) => (
-            <DropdownMenu.Item
-              key={season.Name}
-              onSelect={() => {
-                setSeasonIndex(season.IndexNumber);
-              }}
-            >
-              <DropdownMenu.ItemTitle>{season.Name}</DropdownMenu.ItemTitle>
-            </DropdownMenu.Item>
-          ))}
-        </DropdownMenu.Content>
-      </DropdownMenu.Root>
       {episodes && (
         <View className="mt-4">
           <HorizontalScroll<BaseItemDto>
@@ -118,7 +87,7 @@ export const SeasonPicker: React.FC<Props> = ({ item }) => {
               <TouchableOpacity
                 key={item.Id}
                 onPress={() => {
-                  router.push(`/(auth)/items/${item.Id}/page`);
+                  router.push(`/(auth)/items/${item.Id}`);
                 }}
                 className="flex flex-col w-48"
               >

components/series/SeriesTitleHeader.tsx

@@ -12,7 +12,7 @@ export const SeriesTitleHeader: React.FC<Props> = ({ item, ...props }) => {
   return (
     <>
       <TouchableOpacity
-        onPress={() => router.push(`/(auth)/series/${item.SeriesId}/page`)}
+        onPress={() => router.push(`/(auth)/series/${item.SeriesId}`)}
       >
         <Text className="text-center opacity-50">{item?.SeriesName}</Text>
       </TouchableOpacity>

components/settings/SettingToggles.tsx

@@ -1,22 +1,66 @@
-import { Switch, View } from "react-native";
-import { Text } from "../common/Text";
-import { useAtom } from "jotai";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
+import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
+import { useQuery } from "@tanstack/react-query";
+import { useAtom } from "jotai";
+import { Linking, Switch, TouchableOpacity, View } from "react-native";
+import { Text } from "../common/Text";
+import { Loader } from "../Loader";
 
 export const SettingToggles: React.FC = () => {
   const [settings, updateSettings] = useSettings();
 
+  const [api] = useAtom(apiAtom);
+  const [user] = useAtom(userAtom);
+
+  const {
+    data: mediaListCollections,
+    isLoading: isLoadingMediaListCollections,
+  } = useQuery({
+    queryKey: ["mediaListCollections", user?.Id],
+    queryFn: async () => {
+      if (!api || !user?.Id) return [];
+
+      const response = await getItemsApi(api).getItems({
+        userId: user.Id,
+        tags: ["medialist", "promoted"],
+        recursive: true,
+        fields: ["Tags"],
+        includeItemTypes: ["BoxSet"],
+      });
+
+      const ids =
+        response.data.Items?.filter((c) => c.Name !== "sf_carousel") ?? [];
+
+      return ids;
+    },
+    enabled: !!api && !!user?.Id && settings?.usePopularPlugin === true,
+    staleTime: 0,
+  });
+
   return (
     <View className="flex flex-col rounded-xl mb-4 overflow-hidden border-neutral-800 divide-y-2 divide-solid divide-neutral-800 ">
       <View className="flex flex-row items-center justify-between bg-neutral-900 p-4">
-        <Text>Auto rotate</Text>
+        <View className="shrink">
+          <Text className="font-semibold">Auto rotate</Text>
+          <Text className="text-xs opacity-50">
+            Important on android since the video player orientation is locked to
+            the app orientation.
+          </Text>
+        </View>
         <Switch
           value={settings?.autoRotate}
           onValueChange={(value) => updateSettings({ autoRotate: value })}
         />
       </View>
       <View className="flex flex-row items-center justify-between bg-neutral-900 p-4">
-        <Text>Start videos in fullscreen</Text>
+        <View className="shrink">
+          <Text className="font-semibold">Start videos in fullscreen</Text>
+          <Text className="text-xs opacity-50">
+            Clicking a video will start it in fullscreen mode, instead of
+            inline.
+          </Text>
+        </View>
         <Switch
           value={settings?.openFullScreenVideoPlayerByDefault}
           onValueChange={(value) =>
@@ -24,6 +68,103 @@ export const SettingToggles: React.FC = () => {
           }
         />
       </View>
+      <View className="flex flex-col">
+        <View className="flex flex-row items-center justify-between bg-neutral-900 p-4">
+          <View className="flex flex-col">
+            <Text className="font-semibold">Use popular lists plugin</Text>
+            <Text className="text-xs opacity-50">Made by: lostb1t</Text>
+            <TouchableOpacity
+              onPress={() => {
+                Linking.openURL(
+                  "https://github.com/lostb1t/jellyfin-plugin-media-lists"
+                );
+              }}
+            >
+              <Text className="text-xs text-purple-600">More info</Text>
+            </TouchableOpacity>
+          </View>
+          <Switch
+            value={settings?.usePopularPlugin}
+            onValueChange={(value) =>
+              updateSettings({ usePopularPlugin: value })
+            }
+          />
+        </View>
+        {settings?.usePopularPlugin && (
+          <View className="flex flex-col py-2 bg-neutral-900">
+            {mediaListCollections?.map((mlc) => (
+              <View
+                key={mlc.Id}
+                className="flex flex-row items-center justify-between bg-neutral-900 px-4 py-2"
+              >
+                <View className="flex flex-col">
+                  <Text className="font-semibold">{mlc.Name}</Text>
+                </View>
+                <Switch
+                  value={settings?.mediaListCollectionIds?.includes(mlc.Id!)}
+                  onValueChange={(value) => {
+                    if (!settings.mediaListCollectionIds) {
+                      updateSettings({
+                        mediaListCollectionIds: [mlc.Id!],
+                      });
+                      return;
+                    }
+
+                    updateSettings({
+                      mediaListCollectionIds:
+                        settings?.mediaListCollectionIds.includes(mlc.Id!)
+                          ? settings?.mediaListCollectionIds.filter(
+                              (id) => id !== mlc.Id
+                            )
+                          : [...settings?.mediaListCollectionIds, mlc.Id!],
+                    });
+                  }}
+                />
+              </View>
+            ))}
+            {isLoadingMediaListCollections && (
+              <View className="flex flex-row items-center justify-center bg-neutral-900 p-4">
+                <Loader />
+              </View>
+            )}
+            {mediaListCollections?.length === 0 && (
+              <View className="flex flex-row items-center justify-between bg-neutral-900 p-4">
+                <Text className="text-xs opacity-50">
+                  No collections found. Add some in Jellyfin.
+                </Text>
+              </View>
+            )}
+          </View>
+        )}
+      </View>
+
+      <View className="flex flex-row space-x-2 items-center justify-between bg-neutral-900 p-4">
+        <View className="flex flex-col shrink">
+          <Text className="font-semibold">Force direct play</Text>
+          <Text className="text-xs opacity-50 shrink">
+            This will always request direct play. This is good if you want to
+            try to stream movies you think the device supports.
+          </Text>
+        </View>
+        <Switch
+          value={settings?.forceDirectPlay}
+          onValueChange={(value) => updateSettings({ forceDirectPlay: value })}
+        />
+      </View>
+      <View
+        className={`
+        flex flex-row items-center space-x-2 justify-between bg-neutral-900 p-4
+        ${settings?.forceDirectPlay ? "opacity-50 select-none" : ""}
+      `}
+      >
+        <View className="flex flex-col shrink">
+          <Text className="font-semibold">Device profile</Text>
+          <Text className="text-xs opacity-50">
+            A profile used for deciding what audio and video codecs the device
+            supports.
+          </Text>
+        </View>
+      </View>
     </View>
   );
 };

eas.json

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

hooks/useDownloadMedia.ts

@@ -1,117 +0,0 @@
-import { useCallback, useRef, useState } from "react";
-import { useAtom } from "jotai";
-import AsyncStorage from "@react-native-async-storage/async-storage";
-import * as FileSystem from "expo-file-system";
-import { Api } from "@jellyfin/sdk";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { runningProcesses } from "@/utils/atoms/downloads";
-
-/**
- * Custom hook for downloading media using the Jellyfin API.
- *
- * @param api - The Jellyfin API instance
- * @param userId - The user ID
- * @returns An object with download-related functions and state
- */
-export const useDownloadMedia = (api: Api | null, userId?: string | null) => {
-  const [isDownloading, setIsDownloading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [_, setProgress] = useAtom(runningProcesses);
-  const downloadResumableRef = useRef<FileSystem.DownloadResumable | null>(
-    null,
-  );
-
-  const downloadMedia = useCallback(
-    async (item: BaseItemDto | null): Promise<boolean> => {
-      if (!item?.Id || !api || !userId) {
-        setError("Invalid item or API");
-        return false;
-      }
-
-      setIsDownloading(true);
-      setError(null);
-      setProgress({ item, progress: 0 });
-
-      try {
-        const filename = item.Id;
-        const fileUri = `${FileSystem.documentDirectory}${filename}`;
-        const url = `${api.basePath}/Items/${item.Id}/File`;
-
-        downloadResumableRef.current = FileSystem.createDownloadResumable(
-          url,
-          fileUri,
-          {
-            headers: {
-              Authorization: `MediaBrowser DeviceId="${api.deviceInfo.id}", Token="${api.accessToken}"`,
-            },
-          },
-          (downloadProgress) => {
-            const currentProgress =
-              downloadProgress.totalBytesWritten /
-              downloadProgress.totalBytesExpectedToWrite;
-            setProgress({ item, progress: currentProgress * 100 });
-          },
-        );
-
-        const res = await downloadResumableRef.current.downloadAsync();
-
-        if (!res?.uri) {
-          throw new Error("Download failed: No URI returned");
-        }
-
-        await updateDownloadedFiles(item);
-
-        setIsDownloading(false);
-        setProgress(null);
-        return true;
-      } catch (error) {
-        console.error("Error downloading media:", error);
-        setError("Failed to download media");
-        setIsDownloading(false);
-        setProgress(null);
-        return false;
-      }
-    },
-    [api, userId, setProgress],
-  );
-
-  const cancelDownload = useCallback(async (): Promise<void> => {
-    if (!downloadResumableRef.current) return;
-
-    try {
-      await downloadResumableRef.current.pauseAsync();
-      setIsDownloading(false);
-      setError("Download cancelled");
-      setProgress(null);
-      downloadResumableRef.current = null;
-    } catch (error) {
-      console.error("Error cancelling download:", error);
-      setError("Failed to cancel download");
-    }
-  }, [setProgress]);
-
-  return { downloadMedia, isDownloading, error, cancelDownload };
-};
-
-/**
- * Updates the list of downloaded files in AsyncStorage.
- *
- * @param item - The item to add to the downloaded files list
- */
-async function updateDownloadedFiles(item: BaseItemDto): Promise<void> {
-  try {
-    const currentFiles: BaseItemDto[] = JSON.parse(
-      (await AsyncStorage.getItem("downloaded_files")) ?? "[]",
-    );
-    const updatedFiles = [
-      ...currentFiles.filter((file) => file.Id !== item.Id),
-      item,
-    ];
-    await AsyncStorage.setItem(
-      "downloaded_files",
-      JSON.stringify(updatedFiles),
-    );
-  } catch (error) {
-    console.error("Error updating downloaded files:", error);
-  }
-}

hooks/useFiles.ts

@@ -1,84 +0,0 @@
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import AsyncStorage from "@react-native-async-storage/async-storage";
-import { useQueryClient } from "@tanstack/react-query";
-import * as FileSystem from "expo-file-system";
-
-/**
- * Custom hook for managing downloaded files.
- * @returns An object with functions to delete individual files and all files.
- */
-export const useFiles = () => {
-  const queryClient = useQueryClient();
-
-  /**
-   * Deletes all downloaded files and clears the download record.
-   */
-  const deleteAllFiles = async (): Promise<void> => {
-    const directoryUri = FileSystem.documentDirectory;
-    if (!directoryUri) {
-      console.error("Document directory is undefined");
-      return;
-    }
-
-    try {
-      const fileNames = await FileSystem.readDirectoryAsync(directoryUri);
-      await Promise.all(
-        fileNames.map((item) =>
-          FileSystem.deleteAsync(`${directoryUri}/${item}`, {
-            idempotent: true,
-          }),
-        ),
-      );
-      await AsyncStorage.removeItem("downloaded_files");
-      queryClient.invalidateQueries({ queryKey: ["downloaded_files"] });
-    } catch (error) {
-      console.error("Failed to delete all files:", error);
-    }
-  };
-
-  /**
-   * Deletes a specific file and updates the download record.
-   * @param id - The ID of the file to delete.
-   */
-  const deleteFile = async (id: string): Promise<void> => {
-    if (!id) {
-      console.error("Invalid file ID");
-      return;
-    }
-
-    try {
-      await FileSystem.deleteAsync(
-        `${FileSystem.documentDirectory}/${id}.mp4`,
-        { idempotent: true },
-      );
-
-      const currentFiles = await getDownloadedFiles();
-      const updatedFiles = currentFiles.filter((f) => f.Id !== id);
-
-      await AsyncStorage.setItem(
-        "downloaded_files",
-        JSON.stringify(updatedFiles),
-      );
-
-      queryClient.invalidateQueries({ queryKey: ["downloaded_files"] });
-    } catch (error) {
-      console.error(`Failed to delete file with ID ${id}:`, error);
-    }
-  };
-
-  return { deleteFile, deleteAllFiles };
-};
-
-/**
- * Retrieves the list of downloaded files from AsyncStorage.
- * @returns An array of BaseItemDto objects representing downloaded files.
- */
-async function getDownloadedFiles(): Promise<BaseItemDto[]> {
-  try {
-    const filesJson = await AsyncStorage.getItem("downloaded_files");
-    return filesJson ? JSON.parse(filesJson) : [];
-  } catch (error) {
-    console.error("Failed to retrieve downloaded files:", error);
-    return [];
-  }
-}

hooks/useRemuxHlsToMp4.ts

@@ -1,138 +0,0 @@
-import { useCallback } from "react";
-import { useAtom } from "jotai";
-import AsyncStorage from "@react-native-async-storage/async-storage";
-import * as FileSystem from "expo-file-system";
-import { FFmpegKit, FFmpegKitConfig } from "ffmpeg-kit-react-native";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { runningProcesses } from "@/utils/atoms/downloads";
-import { writeToLog } from "@/utils/log";
-
-/**
- * Custom hook for remuxing HLS to MP4 using FFmpeg.
- *
- * @param url - The URL of the HLS stream
- * @param item - The BaseItemDto object representing the media item
- * @returns An object with remuxing-related functions
- */
-export const useRemuxHlsToMp4 = (url: string, item: BaseItemDto) => {
-  const [_, setProgress] = useAtom(runningProcesses);
-
-  if (!item.Id || !item.Name) {
-    writeToLog("ERROR", "useRemuxHlsToMp4 ~ missing arguments");
-    throw new Error("Item must have an Id and Name");
-  }
-
-  const output = `${FileSystem.documentDirectory}${item.Id}.mp4`;
-  const command = `-y -loglevel quiet -thread_queue_size 512 -protocol_whitelist file,http,https,tcp,tls,crypto -multiple_requests 1 -tcp_nodelay 1 -fflags +genpts -i ${url} -c copy -bufsize 50M -max_muxing_queue_size 4096 ${output}`;
-
-  const startRemuxing = useCallback(async () => {
-    writeToLog(
-      "INFO",
-      `useRemuxHlsToMp4 ~ startRemuxing for item ${item.Name}`,
-    );
-
-    try {
-      setProgress({ item, progress: 0, startTime: new Date(), speed: 0 });
-
-      FFmpegKitConfig.enableStatisticsCallback((statistics) => {
-        const videoLength =
-          (item.MediaSources?.[0]?.RunTimeTicks || 0) / 10000000; // In seconds
-        const fps = item.MediaStreams?.[0]?.RealFrameRate || 25;
-        const totalFrames = videoLength * fps;
-        const processedFrames = statistics.getVideoFrameNumber();
-        const speed = statistics.getSpeed();
-
-        const percentage =
-          totalFrames > 0
-            ? Math.floor((processedFrames / totalFrames) * 100)
-            : 0;
-
-        setProgress((prev) =>
-          prev?.item.Id === item.Id!
-            ? { ...prev, progress: percentage, speed }
-            : prev,
-        );
-      });
-
-      // Await the execution of the FFmpeg command and ensure that the callback is awaited properly.
-      await new Promise<void>((resolve, reject) => {
-        FFmpegKit.executeAsync(command, async (session) => {
-          try {
-            const returnCode = await session.getReturnCode();
-
-            if (returnCode.isValueSuccess()) {
-              await updateDownloadedFiles(item);
-              writeToLog(
-                "INFO",
-                `useRemuxHlsToMp4 ~ remuxing completed successfully for item: ${item.Name}`,
-              );
-              resolve();
-            } else if (returnCode.isValueError()) {
-              writeToLog(
-                "ERROR",
-                `useRemuxHlsToMp4 ~ remuxing failed for item: ${item.Name}`,
-              );
-              reject(new Error("Remuxing failed")); // Reject the promise on error
-            } else if (returnCode.isValueCancel()) {
-              writeToLog(
-                "INFO",
-                `useRemuxHlsToMp4 ~ remuxing was canceled for item: ${item.Name}`,
-              );
-              resolve();
-            }
-
-            setProgress(null);
-          } catch (error) {
-            reject(error);
-          }
-        });
-      });
-    } catch (error) {
-      console.error("Failed to remux:", error);
-      writeToLog(
-        "ERROR",
-        `useRemuxHlsToMp4 ~ remuxing failed for item: ${item.Name}`,
-      );
-      setProgress(null);
-      throw error; // Re-throw the error to propagate it to the caller
-    }
-  }, [output, item, command, setProgress]);
-
-  const cancelRemuxing = useCallback(() => {
-    FFmpegKit.cancel();
-    setProgress(null);
-    writeToLog(
-      "INFO",
-      `useRemuxHlsToMp4 ~ remuxing cancelled for item: ${item.Name}`,
-    );
-  }, [item.Name, setProgress]);
-
-  return { startRemuxing, cancelRemuxing };
-};
-
-/**
- * Updates the list of downloaded files in AsyncStorage.
- *
- * @param item - The item to add to the downloaded files list
- */
-async function updateDownloadedFiles(item: BaseItemDto): Promise<void> {
-  try {
-    const currentFiles: BaseItemDto[] = JSON.parse(
-      (await AsyncStorage.getItem("downloaded_files")) || "[]",
-    );
-    const updatedFiles = [
-      ...currentFiles.filter((i) => i.Id !== item.Id),
-      item,
-    ];
-    await AsyncStorage.setItem(
-      "downloaded_files",
-      JSON.stringify(updatedFiles),
-    );
-  } catch (error) {
-    console.error("Error updating downloaded files:", error);
-    writeToLog(
-      "ERROR",
-      `Failed to update downloaded files for item: ${item.Name}`,
-    );
-  }
-}

package.json

@@ -15,52 +15,50 @@
     "preset": "jest-expo"
   },
   "dependencies": {
-    "@config-plugins/ffmpeg-kit-react-native": "^8.0.0",
     "@expo/react-native-action-sheet": "^4.1.0",
     "@expo/vector-icons": "^14.0.2",
+    "@gorhom/bottom-sheet": "^4",
     "@jellyfin/sdk": "^0.10.0",
     "@kesha-antonov/react-native-background-downloader": "^3.2.0",
-    "@react-native-async-storage/async-storage": "1.23.1",
     "@react-native-community/netinfo": "11.3.1",
     "@react-native-menu/menu": "^1.1.2",
+    "@react-native-tvos/config-tv": "^0.0.10",
     "@react-navigation/native": "^6.0.2",
+    "@shopify/flash-list": "1.6.4",
     "@tanstack/react-query": "^5.51.16",
+    "@types/lodash": "^4.17.7",
     "@types/uuid": "^10.0.0",
     "axios": "^1.7.3",
-    "expo": "~51.0.27",
+    "expo": "~51.0.28",
     "expo-blur": "~13.0.2",
     "expo-build-properties": "~0.12.5",
     "expo-constants": "~16.0.2",
-    "expo-dev-client": "~4.0.22",
+    "expo-dev-client": "~4.0.23",
     "expo-device": "~6.0.2",
     "expo-font": "~12.0.9",
-    "expo-haptics": "~13.0.1",
     "expo-image": "~1.12.13",
     "expo-keep-awake": "~13.0.2",
     "expo-linking": "~6.3.1",
     "expo-navigation-bar": "~3.0.7",
-    "expo-router": "~3.5.21",
-    "expo-screen-orientation": "~7.0.5",
-    "expo-sensors": "~13.0.9",
+    "expo-router": "~3.5.23",
     "expo-splash-screen": "~0.27.5",
     "expo-status-bar": "~1.12.1",
     "expo-system-ui": "~3.0.7",
     "expo-updates": "~0.25.22",
     "expo-web-browser": "~13.0.3",
-    "ffmpeg-kit-react-native": "^6.0.2",
     "jotai": "^2.9.1",
+    "lodash": "^4.17.21",
     "nativewind": "^2.0.11",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "0.74.5",
+    "react-native": "npm:react-native-tvos@latest",
     "react-native-circular-progress": "^1.4.0",
     "react-native-compressor": "^1.8.25",
     "react-native-gesture-handler": "~2.16.1",
     "react-native-get-random-values": "^1.11.0",
-    "react-native-google-cast": "^4.8.2",
-    "react-native-ios-context-menu": "^2.5.1",
-    "react-native-ios-utilities": "^4.4.5",
+    "react-native-ios-utilities": "^4.5.0",
     "react-native-reanimated": "~3.10.1",
+    "react-native-reanimated-carousel": "4.0.0-alpha.12",
     "react-native-safe-area-context": "4.10.5",
     "react-native-screens": "3.31.1",
     "react-native-svg": "15.2.0",
@@ -69,8 +67,8 @@
     "react-native-video": "^6.4.3",
     "react-native-web": "~0.19.10",
     "tailwindcss": "3.3.2",
+    "use-debounce": "^10.0.3",
     "uuid": "^10.0.0",
-    "zeego": "^1.10.0",
     "zod": "^3.23.8"
   },
   "devDependencies": {
@@ -83,5 +81,12 @@
     "react-test-renderer": "18.2.0",
     "typescript": "~5.3.3"
   },
+  "expo": {
+    "install": {
+      "exclude": [
+        "react-native"
+      ]
+    }
+  },
   "private": true
 }

providers/JellyfinProvider.tsx

@@ -1,8 +1,6 @@
 import { Api, Jellyfin } from "@jellyfin/sdk";
 import { UserDto } from "@jellyfin/sdk/lib/generated-client/models";
-import AsyncStorage from "@react-native-async-storage/async-storage";
-import { useMutation, useQuery } from "@tanstack/react-query";
-import { isLoaded } from "expo-font";
+import { useMutation } from "@tanstack/react-query";
 import { router, useSegments } from "expo-router";
 import { atom, useAtom } from "jotai";
 import React, {
@@ -31,15 +29,14 @@ interface JellyfinContextValue {
 }
 
 const JellyfinContext = createContext<JellyfinContextValue | undefined>(
-  undefined,
+  undefined
 );
 
 const getOrSetDeviceId = async () => {
-  let deviceId = await AsyncStorage.getItem("deviceId");
+  let deviceId = null;
 
   if (!deviceId) {
     deviceId = uuid.v4() as string;
-    await AsyncStorage.setItem("deviceId", deviceId);
   }
 
   return deviceId;
@@ -56,9 +53,9 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
       setJellyfin(
         () =>
           new Jellyfin({
-            clientInfo: { name: "Streamyfin", version: "0.4.2" },
+            clientInfo: { name: "Streamyfin", version: "0.6.1" },
             deviceInfo: { name: Platform.OS === "ios" ? "iOS" : "Android", id },
-          }),
+          })
       );
     })();
   }, []);
@@ -67,8 +64,9 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
   const [user, setUser] = useAtom(userAtom);
 
   const discoverServers = async (url: string): Promise<Server[]> => {
-    const servers =
-      await jellyfin?.discovery.getRecommendedServerCandidates(url);
+    const servers = await jellyfin?.discovery.getRecommendedServerCandidates(
+      url
+    );
     return servers?.map((server) => ({ address: server.address })) || [];
   };
 
@@ -79,7 +77,6 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
       if (!apiInstance?.basePath) throw new Error("Failed to connect");
 
       setApi(apiInstance);
-      await AsyncStorage.setItem("serverUrl", server.address);
     },
     onError: (error) => {
       console.error("Failed to set server:", error);
@@ -88,7 +85,6 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
 
   const removeServerMutation = useMutation({
     mutationFn: async () => {
-      await AsyncStorage.removeItem("serverUrl");
       setApi(null);
     },
     onError: (error) => {
@@ -110,9 +106,7 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
 
       if (auth.data.AccessToken && auth.data.User) {
         setUser(auth.data.User);
-        await AsyncStorage.setItem("user", JSON.stringify(auth.data.User));
         setApi(jellyfin.createApi(api?.basePath, auth.data?.AccessToken));
-        await AsyncStorage.setItem("token", auth.data?.AccessToken);
       } else {
         throw new Error("Invalid username or password");
       }
@@ -124,7 +118,6 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
 
   const logoutMutation = useMutation({
     mutationFn: async () => {
-      await AsyncStorage.removeItem("token");
       setUser(null);
     },
     onError: (error) => {
@@ -132,36 +125,6 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
     },
   });
 
-  const { isLoading, isFetching } = useQuery({
-    queryKey: [
-      "initializeJellyfin",
-      user?.Id,
-      api?.basePath,
-      jellyfin?.clientInfo,
-    ],
-    queryFn: async () => {
-      try {
-        const token = await AsyncStorage.getItem("token");
-        const serverUrl = await AsyncStorage.getItem("serverUrl");
-        const user = JSON.parse(
-          (await AsyncStorage.getItem("user")) as string,
-        ) as UserDto;
-
-        if (serverUrl && token && user.Id && jellyfin) {
-          const apiInstance = jellyfin.createApi(serverUrl, token);
-          setApi(apiInstance);
-          setUser(user);
-        }
-
-        return true;
-      } catch (e) {
-        console.error(e);
-      }
-    },
-    staleTime: 0,
-    enabled: !user?.Id || !api || !jellyfin,
-  });
-
   const contextValue: JellyfinContextValue = {
     discoverServers,
     setServer: (server) => setServerMutation.mutateAsync(server),
@@ -171,7 +134,7 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
     logout: () => logoutMutation.mutateAsync(),
   };
 
-  useProtectedRoute(user, isLoading || isFetching);
+  useProtectedRoute(user);
 
   return (
     <JellyfinContext.Provider value={contextValue}>
@@ -198,7 +161,7 @@ function useProtectedRoute(user: UserDto | null, loading = false) {
     if (!user?.Id && inAuthGroup) {
       router.replace("/login");
     } else if (user?.Id && !inAuthGroup) {
-      router.replace("/");
+      router.replace("/home");
     }
   }, [user, segments, loading]);
 }

providers/JobQueueProvider.tsx

@@ -1,14 +0,0 @@
-import React, { createContext } from "react";
-import { useJobProcessor } from "@/utils/atoms/queue";
-
-const JobQueueContext = createContext(null);
-
-export const JobQueueProvider: React.FC<{ children: React.ReactNode }> = ({
-  children,
-}) => {
-  useJobProcessor();
-
-  return (
-    <JobQueueContext.Provider value={null}>{children}</JobQueueContext.Provider>
-  );
-};

utils/atoms/filters.ts

@@ -0,0 +1,47 @@
+import {
+  ItemFilter,
+  ItemSortBy,
+  NameGuidPair,
+  SortOrder,
+} from "@jellyfin/sdk/lib/generated-client/models";
+import { atom, useAtom } from "jotai";
+
+export const sortOptions: {
+  key: ItemSortBy;
+  value: string;
+}[] = [
+  { key: "SortName", value: "Name" },
+  { key: "CommunityRating", value: "Community Rating" },
+  { key: "CriticRating", value: "Critics Rating" },
+  { 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" },
+  { 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" },
+];
+
+export const sortOrderOptions: {
+  key: SortOrder;
+  value: string;
+}[] = [
+  { key: "Ascending", value: "Ascending" },
+  { key: "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],
+]);

utils/atoms/queue.ts

@@ -46,7 +46,6 @@ export const useJobProcessor = () => {
   const [isProcessing, setProcessing] = useAtom(isProcessingAtom);
 
   useEffect(() => {
-    console.info("Queue changed", queue, isProcessing);
     if (queue.length > 0 && !isProcessing) {
       console.info("Processing queue", queue);
       queueActions.processJob(queue, setQueue, setProcessing);

utils/atoms/settings.ts

@@ -1,54 +1,36 @@
 import { atom, useAtom } from "jotai";
-import AsyncStorage from "@react-native-async-storage/async-storage";
-import { useEffect } from "react";
 
 type Settings = {
   autoRotate?: boolean;
   forceLandscapeInVideoPlayer?: boolean;
   openFullScreenVideoPlayerByDefault?: boolean;
+  usePopularPlugin?: boolean;
+  deviceProfile?: "Expo" | "Native" | "Old";
+  forceDirectPlay?: boolean;
+  mediaListCollectionIds?: string[];
 };
 
-/**
- *
- * The settings atom is a Jotai atom that stores the user's settings.
- * It is initialized with a default value of null, which indicates that the settings have not been loaded yet.
- * The settings are loaded from AsyncStorage when the atom is read for the first time.
- *
- */
-
-// Utility function to load settings from AsyncStorage
-const loadSettings = async (): Promise<Settings> => {
-  const jsonValue = await AsyncStorage.getItem("settings");
-  return jsonValue != null
-    ? JSON.parse(jsonValue)
-    : { theme: "light", notificationsEnabled: true, language: "en" };
+// Default settings
+const defaultSettings: Settings = {
+  autoRotate: true,
+  forceLandscapeInVideoPlayer: false,
+  openFullScreenVideoPlayerByDefault: true,
+  usePopularPlugin: false,
+  deviceProfile: "Expo",
+  forceDirectPlay: false,
+  mediaListCollectionIds: [],
 };
 
-// Utility function to save settings to AsyncStorage
-const saveSettings = async (settings: Settings) => {
-  const jsonValue = JSON.stringify(settings);
-  await AsyncStorage.setItem("settings", jsonValue);
-};
+// Create an atom to store the settings in memory, initialized with default settings
+const settingsAtom = atom<Settings>(defaultSettings);
 
-// Create an atom to store the settings in memory
-const settingsAtom = atom<Settings | null>(null);
-
-// A hook to manage settings, loading them on initial mount and providing a way to update them
+// A hook to manage settings, providing a way to update them
 export const useSettings = () => {
   const [settings, setSettings] = useAtom(settingsAtom);
 
-  useEffect(() => {
-    if (settings === null) {
-      loadSettings().then(setSettings);
-    }
-  }, [settings, setSettings]);
-
-  const updateSettings = async (update: Partial<Settings>) => {
-    if (settings) {
-      const newSettings = { ...settings, ...update };
-      setSettings(newSettings);
-      await saveSettings(newSettings);
-    }
+  const updateSettings = (update: Partial<Settings>) => {
+    const newSettings = { ...settings, ...update };
+    setSettings(newSettings);
   };
 
   return [settings, updateSettings] as const;

utils/jellyfin/image/getLogoImageUrlById.ts

@@ -11,9 +11,11 @@ import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 export const getLogoImageUrlById = ({
   api,
   item,
+  height = 130,
 }: {
   api?: Api | null;
   item?: BaseItemDto | null;
+  height?: number;
 }) => {
   if (!api || !item) {
     return null;
@@ -27,7 +29,7 @@ export const getLogoImageUrlById = ({
 
   params.append("tag", imageTags);
   params.append("quality", "90");
-  params.append("fillHeight", "130");
+  params.append("fillHeight", height.toString());
 
   return `${api.basePath}/Items/${item.Id}/Images/Logo?${params.toString()}`;
 };

utils/jellyfin/image/getPrimaryImageUrl.ts

@@ -31,18 +31,21 @@ export const getPrimaryImageUrl = ({
     return `${api?.basePath}/Items/${item?.Id}/Images/Primary`;
   }
 
-  const backdropTag = item.BackdropImageTags?.[0];
   const primaryTag = item.ImageTags?.["Primary"];
+  const backdropTag = item.BackdropImageTags?.[0];
+  const parentBackdropTag = item.ParentBackdropImageTags?.[0];
 
   const params = new URLSearchParams({
     fillWidth: width ? String(width) : "500",
-    quality: quality ? String(quality) : "90",
+    quality: quality ? String(quality) : "80",
   });
 
   if (primaryTag) {
     params.set("tag", primaryTag);
   } else if (backdropTag) {
     params.set("tag", backdropTag);
+  } else if (parentBackdropTag) {
+    params.set("tag", parentBackdropTag);
   }
 
   return `${api?.basePath}/Items/${

utils/jellyfin/media/getStreamUrl.ts

@@ -1,9 +1,9 @@
-import ios12 from "@/utils/profiles/ios12";
+import ios from "@/utils/profiles/ios";
 import { Api } from "@jellyfin/sdk";
 import {
   BaseItemDto,
-  PlaybackInfoResponse,
   MediaSourceInfo,
+  PlaybackInfoResponse,
 } from "@jellyfin/sdk/lib/generated-client/models";
 
 export const getStreamUrl = async ({
@@ -13,9 +13,10 @@ export const getStreamUrl = async ({
   startTimeTicks = 0,
   maxStreamingBitrate,
   sessionData,
-  deviceProfile = ios12,
+  deviceProfile = ios,
   audioStreamIndex = 0,
   subtitleStreamIndex = 0,
+  forceDirectPlay = false,
 }: {
   api: Api | null | undefined;
   item: BaseItemDto | null | undefined;
@@ -26,6 +27,7 @@ export const getStreamUrl = async ({
   deviceProfile: any;
   audioStreamIndex?: number;
   subtitleStreamIndex?: number;
+  forceDirectPlay?: boolean;
 }) => {
   if (!api || !userId || !item?.Id) {
     return null;
@@ -59,11 +61,12 @@ export const getStreamUrl = async ({
   if (!mediaSource) {
     throw new Error("No media source");
   }
+
   if (!sessionData.PlaySessionId) {
     throw new Error("no PlaySessionId");
   }
 
-  if (mediaSource.SupportsDirectPlay) {
+  if (mediaSource.SupportsDirectPlay || forceDirectPlay === true) {
     if (item.MediaType === "Video") {
       console.log("Using direct stream for video!");
       return `${api.basePath}/Videos/${itemId}/stream.mp4?playSessionId=${sessionData.PlaySessionId}&mediaSourceId=${itemId}&static=true`;
@@ -88,6 +91,10 @@ export const getStreamUrl = async ({
     }
   }
 
-  console.log("Using transcoded stream!");
-  return `${api.basePath}${mediaSource.TranscodingUrl}`;
+  if (mediaSource.TranscodingUrl) {
+    console.log("Using transcoded stream!");
+    return `${api.basePath}${mediaSource.TranscodingUrl}`;
+  } else {
+    throw new Error("No transcoding url");
+  }
 };

utils/jellyfin/playstate/reportPlaybackProgress.ts

@@ -3,10 +3,10 @@ import { AxiosError } from "axios";
 import { getAuthHeaders } from "../jellyfin";
 
 interface ReportPlaybackProgressParams {
-  api: Api | null | undefined;
-  sessionId: string | null | undefined;
-  itemId: string | null | undefined;
-  positionTicks: number | null | undefined;
+  api: Api;
+  sessionId: string;
+  itemId: string;
+  positionTicks: number;
 }
 
 /**
@@ -21,10 +21,12 @@ export const reportPlaybackProgress = async ({
   itemId,
   positionTicks,
 }: ReportPlaybackProgressParams): Promise<void> => {
-  if (!api || !sessionId || !itemId || positionTicks == null) {
-    throw new Error("Missing required parameters for reportPlaybackProgress");
-  }
-
+  console.info(
+    "Reporting playback progress:",
+    sessionId,
+    itemId,
+    positionTicks,
+  );
   try {
     await api.axiosInstance.post(
       `${api.basePath}/Sessions/Playing/Progress`,

utils/jellyfin/playstate/reportPlaybackStopped.ts

@@ -24,14 +24,20 @@ export const reportPlaybackStopped = async ({
   itemId,
   positionTicks,
 }: PlaybackStoppedParams): Promise<void> => {
-  // Validate input parameters
-  if (!api || !sessionId || !itemId || !positionTicks) {
-    console.error("Missing required parameters", {
-      api,
-      sessionId,
-      itemId,
-      positionTicks,
-    });
+  if (!positionTicks || positionTicks === 0) return;
+
+  if (!api) {
+    console.error("Missing api");
+    return;
+  }
+
+  if (!sessionId) {
+    console.error("Missing sessionId", sessionId);
+    return;
+  }
+
+  if (!itemId) {
+    console.error("Missing itemId");
     return;
   }
 

utils/log.ts

@@ -1,4 +1,4 @@
-import AsyncStorage from "@react-native-async-storage/async-storage";
+import { atom } from "jotai";
 import { atomWithStorage, createJSONStorage } from "jotai/utils";
 
 type LogLevel = "INFO" | "WARN" | "ERROR";
@@ -10,8 +10,7 @@ interface LogEntry {
   data?: any;
 }
 
-const asyncStorage = createJSONStorage(() => AsyncStorage);
-const logsAtom = atomWithStorage("logs", [], asyncStorage);
+const logsAtom = atom([]);
 
 export const writeToLog = async (
   level: LogLevel,
@@ -25,23 +24,16 @@ export const writeToLog = async (
     data: data,
   };
 
-  const currentLogs = await AsyncStorage.getItem("logs");
-  const logs: LogEntry[] = currentLogs ? JSON.parse(currentLogs) : [];
+  const logs: LogEntry[] = [];
   logs.push(newEntry);
 
   const maxLogs = 100;
-  const recentLogs = logs.slice(Math.max(logs.length - maxLogs, 0));
-
-  await AsyncStorage.setItem("logs", JSON.stringify(recentLogs));
 };
 
 export const readFromLog = async (): Promise<LogEntry[]> => {
-  const logs = await AsyncStorage.getItem("logs");
-  return logs ? JSON.parse(logs) : [];
+  return [];
 };
 
-export const clearLogs = async () => {
-  await AsyncStorage.removeItem("logs");
-};
+export const clearLogs = async () => {};
 
 export default logsAtom;

utils/profiles/base.js

@@ -1,86 +1,86 @@
-import MediaTypes from '../../constants/MediaTypes';
+import MediaTypes from "../../constants/MediaTypes";
 
 export default {
-	Name: 'Expo Base Video Profile',
-	MaxStaticBitrate: 100000000,
-	MaxStreamingBitrate: 120000000,
-	MusicStreamingTranscodingBitrate: 384000,
-	CodecProfiles: [
-		{
-			Codec: 'h264',
-			Conditions: [
-				{
-					Condition: 'NotEquals',
-					IsRequired: false,
-					Property: 'IsAnamorphic',
-					Value: 'true'
-				},
-				{
-					Condition: 'EqualsAny',
-					IsRequired: false,
-					Property: 'VideoProfile',
-					Value: 'high|main|baseline|constrained baseline'
-				},
-				{
-					Condition: 'LessThanEqual',
-					IsRequired: false,
-					Property: 'VideoLevel',
-					Value: '51'
-				},
-				{
-					Condition: 'NotEquals',
-					IsRequired: false,
-					Property: 'IsInterlaced',
-					Value: 'true'
-				}
-			],
-			Type: MediaTypes.Video
-		},
-		{
-			Codec: 'hevc',
-			Conditions: [
-				{
-					Condition: 'NotEquals',
-					IsRequired: false,
-					Property: 'IsAnamorphic',
-					Value: 'true'
-				},
-				{
-					Condition: 'EqualsAny',
-					IsRequired: false,
-					Property: 'VideoProfile',
-					Value: 'main|main 10'
-				},
-				{
-					Condition: 'LessThanEqual',
-					IsRequired: false,
-					Property: 'VideoLevel',
-					Value: '183'
-				},
-				{
-					Condition: 'NotEquals',
-					IsRequired: false,
-					Property: 'IsInterlaced',
-					Value: 'true'
-				}
-			],
-			Type: MediaTypes.Video
-		}
-	],
-	ContainerProfiles: [],
-	DirectPlayProfiles: [],
-	ResponseProfiles: [
-		{
-			Container: 'm4v',
-			MimeType: 'video/mp4',
-			Type: MediaTypes.Video
-		}
-	],
-	SubtitleProfiles: [
-		{
-			Format: 'vtt',
-			Method: 'Hls'
-		}
-	],
-	TranscodingProfiles: []
+  Name: "Expo Base Video Profile",
+  MaxStaticBitrate: 100000000,
+  MaxStreamingBitrate: 120000000,
+  MusicStreamingTranscodingBitrate: 384000,
+  CodecProfiles: [
+    {
+      Codec: "h264",
+      Conditions: [
+        {
+          Condition: "NotEquals",
+          IsRequired: false,
+          Property: "IsAnamorphic",
+          Value: "true",
+        },
+        {
+          Condition: "EqualsAny",
+          IsRequired: false,
+          Property: "VideoProfile",
+          Value: "high|main|baseline|constrained baseline",
+        },
+        {
+          Condition: "LessThanEqual",
+          IsRequired: false,
+          Property: "VideoLevel",
+          Value: "51",
+        },
+        {
+          Condition: "NotEquals",
+          IsRequired: false,
+          Property: "IsInterlaced",
+          Value: "true",
+        },
+      ],
+      Type: MediaTypes.Video,
+    },
+    {
+      Codec: "hevc",
+      Conditions: [
+        {
+          Condition: "NotEquals",
+          IsRequired: false,
+          Property: "IsAnamorphic",
+          Value: "true",
+        },
+        {
+          Condition: "EqualsAny",
+          IsRequired: false,
+          Property: "VideoProfile",
+          Value: "main|main 10",
+        },
+        {
+          Condition: "LessThanEqual",
+          IsRequired: false,
+          Property: "VideoLevel",
+          Value: "183",
+        },
+        {
+          Condition: "NotEquals",
+          IsRequired: false,
+          Property: "IsInterlaced",
+          Value: "true",
+        },
+      ],
+      Type: MediaTypes.Video,
+    },
+  ],
+  ContainerProfiles: [],
+  DirectPlayProfiles: [],
+  ResponseProfiles: [
+    {
+      Container: "m4v",
+      MimeType: "video/mp4",
+      Type: MediaTypes.Video,
+    },
+  ],
+  SubtitleProfiles: [
+    {
+      Format: "vtt",
+      Method: "Hls",
+    },
+  ],
+  TranscodingProfiles: [],
 };

utils/profiles/chromecast.ts

@@ -11,7 +11,7 @@ const MediaTypes = {
 };
 
 export const chromecastProfile: DeviceProfile = {
-  Name: "Chromecast",
+  Name: "Chromecast Video Profile",
   Id: "chromecast-001",
   MaxStreamingBitrate: 4000000, // 4 Mbps
   MaxStaticBitrate: 4000000, // 4 Mbps

utils/profiles/ios.js

@@ -3,147 +3,147 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
-import MediaTypes from '../../constants/MediaTypes';
+import MediaTypes from "../../constants/MediaTypes";
 
-import BaseProfile from './base';
+import BaseProfile from "./base";
 
 /**
  * Device profile for Expo Video player on iOS 13+
  */
 export default {
-	...BaseProfile,
-	Name: 'Expo iOS Video Profile',
-	DirectPlayProfiles: [
-		{
-			AudioCodec: 'aac,mp3,ac3,eac3,flac,alac',
-			Container: 'mp4,m4v',
-			Type: MediaTypes.Video,
-			VideoCodec: 'hevc,h264'
-		},
-		{
-			AudioCodec: 'aac,mp3,ac3,eac3,flac,alac',
-			Container: 'mov',
-			Type: MediaTypes.Video,
-			VideoCodec: 'hevc,h264'
-		},
-		{
-			Container: 'mp3',
-			Type: MediaTypes.Audio
-		},
-		{
-			Container: 'aac',
-			Type: MediaTypes.Audio
-		},
-		{
-			AudioCodec: 'aac',
-			Container: 'm4a',
-			Type: MediaTypes.Audio
-		},
-		{
-			AudioCodec: 'aac',
-			Container: 'm4b',
-			Type: MediaTypes.Audio
-		},
-		{
-			Container: 'flac',
-			Type: MediaTypes.Audio
-		},
-		{
-			Container: 'alac',
-			Type: MediaTypes.Audio
-		},
-		{
-			AudioCodec: 'alac',
-			Container: 'm4a',
-			Type: MediaTypes.Audio
-		},
-		{
-			AudioCodec: 'alac',
-			Container: 'm4b',
-			Type: MediaTypes.Audio
-		},
-		{
-			Container: 'wav',
-			Type: MediaTypes.Audio
-		}
-	],
-	TranscodingProfiles: [
-		{
-			AudioCodec: 'aac',
-			BreakOnNonKeyFrames: true,
-			Container: 'aac',
-			Context: 'Streaming',
-			MaxAudioChannels: '6',
-			MinSegments: '2',
-			Protocol: 'hls',
-			Type: MediaTypes.Audio
-		},
-		{
-			AudioCodec: 'aac',
-			Container: 'aac',
-			Context: 'Streaming',
-			MaxAudioChannels: '6',
-			Protocol: 'http',
-			Type: MediaTypes.Audio
-		},
-		{
-			AudioCodec: 'mp3',
-			Container: 'mp3',
-			Context: 'Streaming',
-			MaxAudioChannels: '6',
-			Protocol: 'http',
-			Type: MediaTypes.Audio
-		},
-		{
-			AudioCodec: 'wav',
-			Container: 'wav',
-			Context: 'Streaming',
-			MaxAudioChannels: '6',
-			Protocol: 'http',
-			Type: MediaTypes.Audio
-		},
-		{
-			AudioCodec: 'mp3',
-			Container: 'mp3',
-			Context: 'Static',
-			MaxAudioChannels: '6',
-			Protocol: 'http',
-			Type: MediaTypes.Audio
-		},
-		{
-			AudioCodec: 'aac',
-			Container: 'aac',
-			Context: 'Static',
-			MaxAudioChannels: '6',
-			Protocol: 'http',
-			Type: MediaTypes.Audio
-		},
-		{
-			AudioCodec: 'wav',
-			Container: 'wav',
-			Context: 'Static',
-			MaxAudioChannels: '6',
-			Protocol: 'http',
-			Type: MediaTypes.Audio
-		},
-		{
-			AudioCodec: 'aac,mp3',
-			BreakOnNonKeyFrames: true,
-			Container: 'ts',
-			Context: 'Streaming',
-			MaxAudioChannels: '6',
-			MinSegments: '2',
-			Protocol: 'hls',
-			Type: MediaTypes.Video,
-			VideoCodec: 'h264'
-		},
-		{
-			AudioCodec: 'aac,mp3,ac3,eac3,flac,alac',
-			Container: 'mp4',
-			Context: 'Static',
-			Protocol: 'http',
-			Type: MediaTypes.Video,
-			VideoCodec: 'h264'
-		}
-	]
+  ...BaseProfile,
+  Name: "Expo iOS Video Profile",
+  DirectPlayProfiles: [
+    {
+      AudioCodec: "aac,mp3,ac3,eac3,flac,alac",
+      Container: "mp4,m4v",
+      Type: MediaTypes.Video,
+      VideoCodec: "hevc,h264",
+    },
+    {
+      AudioCodec: "aac,mp3,ac3,eac3,flac,alac",
+      Container: "mov",
+      Type: MediaTypes.Video,
+      VideoCodec: "hevc,h264",
+    },
+    {
+      Container: "mp3",
+      Type: MediaTypes.Audio,
+    },
+    {
+      Container: "aac",
+      Type: MediaTypes.Audio,
+    },
+    {
+      AudioCodec: "aac",
+      Container: "m4a",
+      Type: MediaTypes.Audio,
+    },
+    {
+      AudioCodec: "aac",
+      Container: "m4b",
+      Type: MediaTypes.Audio,
+    },
+    {
+      Container: "flac",
+      Type: MediaTypes.Audio,
+    },
+    {
+      Container: "alac",
+      Type: MediaTypes.Audio,
+    },
+    {
+      AudioCodec: "alac",
+      Container: "m4a",
+      Type: MediaTypes.Audio,
+    },
+    {
+      AudioCodec: "alac",
+      Container: "m4b",
+      Type: MediaTypes.Audio,
+    },
+    {
+      Container: "wav",
+      Type: MediaTypes.Audio,
+    },
+  ],
+  TranscodingProfiles: [
+    {
+      AudioCodec: "aac",
+      BreakOnNonKeyFrames: true,
+      Container: "aac",
+      Context: "Streaming",
+      MaxAudioChannels: "6",
+      MinSegments: "2",
+      Protocol: "hls",
+      Type: MediaTypes.Audio,
+    },
+    {
+      AudioCodec: "aac",
+      Container: "aac",
+      Context: "Streaming",
+      MaxAudioChannels: "6",
+      Protocol: "http",
+      Type: MediaTypes.Audio,
+    },
+    {
+      AudioCodec: "mp3",
+      Container: "mp3",
+      Context: "Streaming",
+      MaxAudioChannels: "6",
+      Protocol: "http",
+      Type: MediaTypes.Audio,
+    },
+    {
+      AudioCodec: "wav",
+      Container: "wav",
+      Context: "Streaming",
+      MaxAudioChannels: "6",
+      Protocol: "http",
+      Type: MediaTypes.Audio,
+    },
+    {
+      AudioCodec: "mp3",
+      Container: "mp3",
+      Context: "Static",
+      MaxAudioChannels: "6",
+      Protocol: "http",
+      Type: MediaTypes.Audio,
+    },
+    {
+      AudioCodec: "aac",
+      Container: "aac",
+      Context: "Static",
+      MaxAudioChannels: "6",
+      Protocol: "http",
+      Type: MediaTypes.Audio,
+    },
+    {
+      AudioCodec: "wav",
+      Container: "wav",
+      Context: "Static",
+      MaxAudioChannels: "6",
+      Protocol: "http",
+      Type: MediaTypes.Audio,
+    },
+    {
+      AudioCodec: "aac,mp3",
+      BreakOnNonKeyFrames: true,
+      Container: "ts",
+      Context: "Streaming",
+      MaxAudioChannels: "6",
+      MinSegments: "2",
+      Protocol: "hls",
+      Type: MediaTypes.Video,
+      VideoCodec: "h264",
+    },
+    {
+      AudioCodec: "aac,mp3,ac3,eac3,flac,alac",
+      Container: "mp4",
+      Context: "Static",
+      Protocol: "http",
+      Type: MediaTypes.Video,
+      VideoCodec: "h264",
+    },
+  ],
 };

utils/profiles/native.js

@@ -0,0 +1,284 @@
+/**
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+import MediaTypes from "../../constants/MediaTypes";
+
+/**
+ * Device profile for Native video player
+ */
+export default {
+  Name: "1. Native iOS Video Profile",
+  MaxStaticBitrate: 100000000,
+  MaxStreamingBitrate: 120000000,
+  MusicStreamingTranscodingBitrate: 384000,
+  CodecProfiles: [
+    {
+      Codec: "h264",
+      Conditions: [
+        {
+          Condition: "NotEquals",
+          IsRequired: false,
+          Property: "IsAnamorphic",
+          Value: "true",
+        },
+        {
+          Condition: "EqualsAny",
+          IsRequired: false,
+          Property: "VideoProfile",
+          Value: "high|main|baseline|constrained baseline",
+        },
+        {
+          Condition: "LessThanEqual",
+          IsRequired: false,
+          Property: "VideoLevel",
+          Value: "80",
+        },
+        {
+          Condition: "NotEquals",
+          IsRequired: false,
+          Property: "IsInterlaced",
+          Value: "true",
+        },
+      ],
+      Type: MediaTypes.Video,
+    },
+    {
+      Codec: "hevc",
+      Conditions: [
+        {
+          Condition: "NotEquals",
+          IsRequired: false,
+          Property: "IsAnamorphic",
+          Value: "true",
+        },
+        {
+          Condition: "EqualsAny",
+          IsRequired: false,
+          Property: "VideoProfile",
+          Value: "high|main|main 10",
+        },
+        {
+          Condition: "LessThanEqual",
+          IsRequired: false,
+          Property: "VideoLevel",
+          Value: "175",
+        },
+        {
+          Condition: "NotEquals",
+          IsRequired: false,
+          Property: "IsInterlaced",
+          Value: "true",
+        },
+      ],
+      Type: MediaTypes.Video,
+    },
+  ],
+  DirectPlayProfiles: [
+    {
+      AudioCodec: "flac,alac,aac,eac3,ac3,opus",
+      Container: "mp4",
+      Type: MediaTypes.Video,
+      VideoCodec: "hevc,h264,mpeg4",
+    },
+    {
+      AudioCodec: "alac,aac,ac3",
+      Container: "m4v",
+      Type: MediaTypes.Video,
+      VideoCodec: "h264,mpeg4",
+    },
+    {
+      AudioCodec:
+        "alac,aac,eac3,ac3,mp3,pcm_s24be,pcm_s24le,pcm_s16be,pcm_s16le",
+      Container: "mov",
+      Type: MediaTypes.Video,
+      VideoCodec: "hevc,h264,mpeg4,mjpeg",
+    },
+    {
+      AttrudioCodec: "aac,eac3,ac3,mp3",
+      Container: "mpegts",
+      Type: MediaTypes.Video,
+      VideoCodec: "h264",
+    },
+    {
+      AttrudioCodec: "aac,amr_nb",
+      Container: "3gp,3g2",
+      Type: MediaTypes.Video,
+      VideoCodec: "h264,mpeg4",
+    },
+    {
+      AttrudioCodec: "pcm_s16le,pcm_mulaw",
+      Container: "avi",
+      Type: MediaTypes.Video,
+      VideoCodec: "mjpeg",
+    },
+    {
+      Container: "mp3",
+      Type: MediaTypes.Audio,
+    },
+    {
+      Container: "aac",
+      Type: MediaTypes.Audio,
+    },
+    {
+      AudioCodec: "aac",
+      Container: "m4a",
+      Type: MediaTypes.Audio,
+    },
+    {
+      AudioCodec: "aac",
+      Container: "m4b",
+      Type: MediaTypes.Audio,
+    },
+    {
+      Container: "flac",
+      Type: MediaTypes.Audio,
+    },
+    {
+      Container: "alac",
+      Type: MediaTypes.Audio,
+    },
+    {
+      AudioCodec: "alac",
+      Container: "m4a",
+      Type: MediaTypes.Audio,
+    },
+    {
+      AudioCodec: "alac",
+      Container: "m4b",
+      Type: MediaTypes.Audio,
+    },
+    {
+      Container: "wav",
+      Type: MediaTypes.Audio,
+    },
+  ],
+  TranscodingProfiles: [
+    {
+      AudioCodec: "flac,alac,aac,eac3,ac3,opus",
+      BreakOnNonKeyFrames: true,
+      Container: "mp4",
+      Context: "streaming",
+      MaxAudioChannels: "8",
+      MinSegments: 2,
+      Protocol: "hls",
+      Type: "video",
+      VideoCodec: "hevc,h264,mpeg4",
+    },
+    {
+      AudioCodec: "aac",
+      BreakOnNonKeyFrames: true,
+      Container: "aac",
+      Context: "Streaming",
+      MaxAudioChannels: "6",
+      MinSegments: "2",
+      Protocol: "hls",
+      Type: MediaTypes.Audio,
+    },
+    {
+      AudioCodec: "aac",
+      Container: "aac",
+      Context: "Streaming",
+      MaxAudioChannels: "6",
+      Protocol: "http",
+      Type: MediaTypes.Audio,
+    },
+    {
+      AudioCodec: "mp3",
+      Container: "mp3",
+      Context: "Streaming",
+      MaxAudioChannels: "6",
+      Protocol: "http",
+      Type: MediaTypes.Audio,
+    },
+    {
+      AudioCodec: "wav",
+      Container: "wav",
+      Context: "Streaming",
+      MaxAudioChannels: "6",
+      Protocol: "http",
+      Type: MediaTypes.Audio,
+    },
+    {
+      AudioCodec: "mp3",
+      Container: "mp3",
+      Context: "Static",
+      MaxAudioChannels: "6",
+      Protocol: "http",
+      Type: MediaTypes.Audio,
+    },
+    {
+      AudioCodec: "aac",
+      Container: "aac",
+      Context: "Static",
+      MaxAudioChannels: "6",
+      Protocol: "http",
+      Type: MediaTypes.Audio,
+    },
+    {
+      AudioCodec: "wav",
+      Container: "wav",
+      Context: "Static",
+      MaxAudioChannels: "6",
+      Protocol: "http",
+      Type: MediaTypes.Audio,
+    },
+    {
+      AudioCodec: "aac,mp3",
+      BreakOnNonKeyFrames: true,
+      Container: "ts",
+      Context: "Streaming",
+      MaxAudioChannels: "6",
+      MinSegments: "2",
+      Protocol: "hls",
+      Type: MediaTypes.Video,
+      VideoCodec: "h264",
+    },
+    {
+      AudioCodec: "aac,mp3,ac3,eac3,flac,alac",
+      Container: "mp4",
+      Context: "Static",
+      Protocol: "http",
+      Type: MediaTypes.Video,
+      VideoCodec: "h264",
+    },
+  ],
+  ResponseProfiles: [
+    {
+      Container: "m4v",
+      MimeType: "video/mp4",
+      Type: MediaTypes.Video,
+    },
+  ],
+  SubtitleProfiles: [
+    {
+      Format: "pgssub",
+      Method: "encode",
+    },
+    {
+      Format: "dvdsub",
+      Method: "encode",
+    },
+    {
+      Format: "dvbsub",
+      Method: "encode",
+    },
+    {
+      Format: "xsub",
+      Method: "encode",
+    },
+    {
+      Format: "vtt",
+      Method: "hls",
+    },
+    {
+      Format: "ttml",
+      Method: "embed",
+    },
+    {
+      Format: "cc_dec",
+      Method: "embed",
+    },
+  ],
+};

utils/profiles/old.js

@@ -0,0 +1,259 @@
+/**
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+import MediaTypes from "../../constants/MediaTypes";
+
+/**
+ * Device profile for old phones (aka does not support HEVC)
+ *
+ * This file is a modified version of the original file.
+ *
+ * Link to original: https://github.com/jellyfin/jellyfin-expo/blob/e7b7e736a8602c94612917ef02de22f87c7c28f2/utils/profiles/ios.js#L4
+ */
+export default {
+  MaxStreamingBitrate: 3000000,
+  MaxStaticBitrate: 3000000,
+  MusicStreamingTranscodingBitrate: 256000,
+  DirectPlayProfiles: [
+    {
+      Container: "mp4,m4v",
+      Type: "Video",
+      VideoCodec: "h264",
+      AudioCodec: "aac,mp3,mp2",
+    },
+    {
+      Container: "mkv",
+      Type: "Video",
+      VideoCodec: "h264",
+      AudioCodec: "aac,mp3,mp2",
+    },
+    {
+      Container: "mov",
+      Type: "Video",
+      VideoCodec: "h264",
+      AudioCodec: "aac,mp3,mp2",
+    },
+    {
+      Container: "mp3",
+      Type: "Audio",
+    },
+    {
+      Container: "aac",
+      Type: "Audio",
+    },
+    {
+      Container: "m4a",
+      AudioCodec: "aac",
+      Type: "Audio",
+    },
+    {
+      Container: "m4b",
+      AudioCodec: "aac",
+      Type: "Audio",
+    },
+    {
+      Container: "hls",
+      Type: "Video",
+      VideoCodec: "h264",
+      AudioCodec: "aac,mp3,mp2",
+    },
+  ],
+  TranscodingProfiles: [
+    {
+      Container: "mp4",
+      Type: "Audio",
+      AudioCodec: "aac",
+      Context: "Streaming",
+      Protocol: "hls",
+      MaxAudioChannels: "2",
+      MinSegments: "1",
+      BreakOnNonKeyFrames: true,
+    },
+    {
+      Container: "aac",
+      Type: "Audio",
+      AudioCodec: "aac",
+      Context: "Streaming",
+      Protocol: "http",
+      MaxAudioChannels: "2",
+    },
+    {
+      Container: "mp3",
+      Type: "Audio",
+      AudioCodec: "mp3",
+      Context: "Streaming",
+      Protocol: "http",
+      MaxAudioChannels: "2",
+    },
+    {
+      Container: "mp3",
+      Type: "Audio",
+      AudioCodec: "mp3",
+      Context: "Static",
+      Protocol: "http",
+      MaxAudioChannels: "2",
+    },
+    {
+      Container: "aac",
+      Type: "Audio",
+      AudioCodec: "aac",
+      Context: "Static",
+      Protocol: "http",
+      MaxAudioChannels: "2",
+    },
+    {
+      Container: "mp4",
+      Type: "Video",
+      AudioCodec: "aac,mp2",
+      VideoCodec: "h264",
+      Context: "Streaming",
+      Protocol: "hls",
+      MaxAudioChannels: "2",
+      MinSegments: "1",
+      BreakOnNonKeyFrames: true,
+      Conditions: [
+        {
+          Condition: "LessThanEqual",
+          Property: "Width",
+          Value: "960",
+          IsRequired: false,
+        },
+        {
+          Condition: "LessThanEqual",
+          Property: "Height",
+          Value: "960",
+          IsRequired: false,
+        },
+        {
+          Condition: "LessThanEqual",
+          Property: "VideoFramerate",
+          Value: "60",
+          IsRequired: false,
+        },
+      ],
+    },
+    {
+      Container: "ts",
+      Type: "Video",
+      AudioCodec: "aac,mp3,mp2",
+      VideoCodec: "h264",
+      Context: "Streaming",
+      Protocol: "hls",
+      MaxAudioChannels: "2",
+      MinSegments: "1",
+      BreakOnNonKeyFrames: true,
+      Conditions: [
+        {
+          Condition: "LessThanEqual",
+          Property: "Width",
+          Value: "960",
+          IsRequired: false,
+        },
+        {
+          Condition: "LessThanEqual",
+          Property: "Height",
+          Value: "960",
+          IsRequired: false,
+        },
+        {
+          Condition: "LessThanEqual",
+          Property: "VideoFramerate",
+          Value: "60",
+          IsRequired: false,
+        },
+      ],
+    },
+  ],
+  ContainerProfiles: [],
+  CodecProfiles: [
+    {
+      Type: "VideoAudio",
+      Codec: "aac",
+      Conditions: [
+        {
+          Condition: "Equals",
+          Property: "IsSecondaryAudio",
+          Value: "false",
+          IsRequired: false,
+        },
+      ],
+    },
+    {
+      Type: "VideoAudio",
+      Conditions: [
+        {
+          Condition: "Equals",
+          Property: "IsSecondaryAudio",
+          Value: "false",
+          IsRequired: false,
+        },
+      ],
+    },
+    {
+      Type: "Video",
+      Codec: "h264",
+      Conditions: [
+        {
+          Condition: "NotEquals",
+          Property: "IsAnamorphic",
+          Value: "true",
+          IsRequired: false,
+        },
+        {
+          Condition: "EqualsAny",
+          Property: "VideoProfile",
+          Value: "high|main|baseline|constrained baseline",
+          IsRequired: false,
+        },
+        {
+          Condition: "EqualsAny",
+          Property: "VideoRangeType",
+          Value: "SDR",
+          IsRequired: false,
+        },
+        {
+          Condition: "LessThanEqual",
+          Property: "VideoLevel",
+          Value: "52",
+          IsRequired: false,
+        },
+        {
+          Condition: "NotEquals",
+          Property: "IsInterlaced",
+          Value: "true",
+          IsRequired: false,
+        },
+      ],
+    },
+    {
+      Type: "Video",
+      Conditions: [
+        {
+          Condition: "LessThanEqual",
+          Property: "Width",
+          Value: "960",
+          IsRequired: false,
+        },
+        {
+          Condition: "LessThanEqual",
+          Property: "Height",
+          Value: "960",
+          IsRequired: false,
+        },
+        {
+          Condition: "LessThanEqual",
+          Property: "VideoFramerate",
+          Value: "65",
+          IsRequired: false,
+        },
+      ],
+    },
+  ],
+  SubtitleProfiles: [
+    {
+      Method: "Encode",
+    },
+  ],
+};

utils/time.ts

@@ -6,7 +6,7 @@
  * @returns A string formatted as "Xh Ym" where X is hours and Y is minutes.
  */
 export const runtimeTicksToMinutes = (
-  ticks: number | null | undefined
+  ticks: number | null | undefined,
 ): string => {
   if (!ticks) return "0h 0m";
 
@@ -18,3 +18,19 @@ export const runtimeTicksToMinutes = (
 
   return `${hours}h ${minutes}m`;
 };
+
+export const runtimeTicksToSeconds = (
+  ticks: number | null | undefined,
+): string => {
+  if (!ticks) return "0h 0m";
+
+  const ticksPerMinute = 600000000;
+  const ticksPerHour = 36000000000;
+
+  const hours = Math.floor(ticks / ticksPerHour);
+  const minutes = Math.floor((ticks % ticksPerHour) / ticksPerMinute);
+  const seconds = Math.floor((ticks % ticksPerMinute) / 10000000);
+
+  if (hours > 0) return `${hours}h ${minutes}m ${seconds}s`;
+  else return `${minutes}m ${seconds}s`;
+};