wip

.github/ISSUE_TEMPLATE/bug_report.md

@@ -2,7 +2,7 @@
 name: Bug report
 about: Create a report to help us improve
 title: ''
-labels: '❌ bug'
+labels: ''
 assignees: ''
 
 ---

.github/ISSUE_TEMPLATE/feature_request.md

@@ -2,7 +2,7 @@
 name: Feature request
 about: Suggest an idea for this project
 title: ''
-labels: '✨ enhancement'
+labels: ''
 assignees: ''
 
 ---

.gitignore

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

README.md

@@ -1,14 +1,13 @@
 # 📺 Streamyfin
 
-<a href="https://www.buymeacoffee.com/fredrikbur3" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Buy Me A Coffee" style="height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;" ></a>
-
 Welcome to Streamyfin, a simple and user-friendly Jellyfin client built with Expo. If you're looking for an alternative to other Jellyfin clients, we hope you'll find Streamyfin to be a useful addition to your media streaming toolbox.
 
-<div style="display: flex; flex-direction: row; gap: 8px">
-  <img width=150 src="./assets/images/screenshots/screenshot1.png" />
-  <img width=150 src="./assets/images/screenshots/screenshot3.png" />
-  <img width=150 src="./assets/images/screenshots/screenshot2.png" />
-  
+<div style="display: flex; flex-direction: row; gap: 5px">
+  <img width=100 src="./assets/images/screenshots/1.jpg" />
+  <img width=100 src="./assets/images/screenshots/3.jpg" />
+  <img width=100 src="./assets/images/screenshots/4.jpg" />
+  <img width=100 src="./assets/images/screenshots/5.jpg" />
+  <img width=100 src="./assets/images/screenshots/7.jpg" />
 </div>
 
 ## 🌟 Features
@@ -25,7 +24,7 @@ Streamyfin includes some exciting experimental features like media downloading a
 
 ### Downloading
 
-Downloading works by using ffmpeg to convert an HLS stream into a video file on the device. This means that you can download and view any file you can stream! The file is converted by Jellyfin on the server in real time as it is downloaded. This means a **bit longer download times** but supports any file that your server can transcode.
+Downloading works by using ffmpeg to convert a HLS stream into a video file on the device. This means that you can download and view any file you can stream! The file is converted by Jellyfin on the server in real time as it is downloaded. This means a **bit longer download times** but supports any file that your server can transcode.
 
 ### Chromecast
 
@@ -33,19 +32,19 @@ Chromecast support is still in development, and we're working on improving it. C
 
 ## Plugins
 
-In Streamyfin we have built-in support for a few plugins. These plugins are not required to use Streamyfin, but they add some extra functionality.
+In Streamyfin we have build in support for a few plugins. These plugins are not required to use Streamyfin, but they add some extra functionality.
 
 ### Collection rows
 
 Jellyfin collections can be shown as rows or carousel on the home screen.
-The following tags can be added to a collection to provide this functionality.
+The following tags can be added to an collection to provide this functionality.
 
-Available tags:
+Avaiable tags:
 
-- sf_promoted: will make the collection a row at home
-- sf_carousel: will make the collection a carousel on home.
+- sf_promoted: Wil make the collection an row on home
+- sf_carousel: Wil make the collection an carousel on home.
 
-A plugin exists to create collections based on external sources like mdblist. This make the automatic process of managing collections such as trending, most watched, etc.
+A plugin exists to create collections based on external sources like mdblist. This makes managing collections like trending, most watched etc an automatic process.
 See [Collection Import Plugin](https://github.com/lostb1t/jellyfin-plugin-collection-import) for more info.
 
 ### Jellysearch
@@ -89,8 +88,8 @@ We welcome any help to make Streamyfin better. If you'd like to contribute, plea
 ### Development info
 
 1. Use node `20`
-2. Install dependencies `bun i`
-3. Create an expo dev build by running `npx expo run:ios` or `npx expo run:android`.
+2. Install deps `bun i`
+3. `Create an expo dev build by running `npx expo run:ios` or `npx expo run:android`.
 
 ## Extended chromecast controls
 
@@ -142,6 +141,10 @@ If you have questions or need support, feel free to reach out:
 - GitHub Issues: Report bugs or request features here.
 - Email: [fredrik.burmester@gmail.com](mailto:fredrik.burmester@gmail.com)
 
+## Support
+
+<a href="https://www.buymeacoffee.com/fredrikbur3" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Buy Me A Coffee" style="height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;" ></a>
+
 ## 📝 Credits
 
 Streamyfin is developed by Fredrik Burmester and is not affiliated with Jellyfin. The app is built with Expo, React Native, and other open-source libraries.

app.json

@@ -2,7 +2,7 @@
   "expo": {
     "name": "Streamyfin",
     "slug": "streamyfin",
-    "version": "0.14.0",
+    "version": "0.8.2",
     "orientation": "default",
     "icon": "./assets/images/icon.png",
     "scheme": "streamyfin",
@@ -25,15 +25,12 @@
           "NSAllowsArbitraryLoads": true
         }
       },
-      "config": {
-        "usesNonExemptEncryption": false
-      },
       "supportsTablet": true,
       "bundleIdentifier": "com.fredrikburmester.streamyfin"
     },
     "android": {
       "jsEngine": "hermes",
-      "versionCode": 40,
+      "versionCode": 23,
       "adaptiveIcon": {
         "foregroundImage": "./assets/images/icon.png"
       },
@@ -71,27 +68,13 @@
           }
         }
       ],
-      [
-        "./plugins/withAndroidMainActivityAttributes",
-        {
-          "com.reactnative.googlecast.RNGCExpandedControllerActivity": true
-        }
-      ],
-      ["./plugins/withExpandedController.js"],
       [
         "expo-build-properties",
         {
           "ios": {
-            "newArchEnabled": true,
             "deploymentTarget": "14.0"
           },
           "android": {
-            "newArchEnabled": true,
-            "android": {
-              "compileSdkVersion": 34,
-              "targetSdkVersion": 34,
-              "buildToolsVersion": "34.0.0"
-            },
             "minSdkVersion": 24,
             "usesCleartextTraffic": true,
             "packagingOptions": {
@@ -113,8 +96,7 @@
         {
           "motionPermission": "Allow Streamyfin to access your device motion for landscape video watching."
         }
-      ],
-      "expo-video"
+      ]
     ],
     "experiments": {
       "typedRoutes": true

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

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

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

@@ -1,159 +0,0 @@
-import { Button } from "@/components/Button";
-import { Text } from "@/components/common/Text";
-import { ListItem } from "@/components/ListItem";
-import { SettingToggles } from "@/components/settings/SettingToggles";
-import { useFiles } from "@/hooks/useFiles";
-import { apiAtom, useJellyfin, userAtom } from "@/providers/JellyfinProvider";
-import { clearLogs, readFromLog } from "@/utils/log";
-import { Ionicons } from "@expo/vector-icons";
-import { getQuickConnectApi } from "@jellyfin/sdk/lib/utils/api";
-import { useQuery } from "@tanstack/react-query";
-import * as Haptics from "expo-haptics";
-import { useAtom } from "jotai";
-import { Alert, ScrollView, View } from "react-native";
-import { red } from "react-native-reanimated/lib/typescript/reanimated2/Colors";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { toast } from "sonner-native";
-
-export default function settings() {
-  const { logout } = useJellyfin();
-  const { deleteAllFiles } = useFiles();
-
-  const [api] = useAtom(apiAtom);
-  const [user] = useAtom(userAtom);
-
-  const { data: logs } = useQuery({
-    queryKey: ["logs"],
-    queryFn: async () => readFromLog(),
-    refetchInterval: 1000,
-  });
-
-  const insets = useSafeAreaInsets();
-
-  const openQuickConnectAuthCodeInput = () => {
-    Alert.prompt(
-      "Quick connect",
-      "Enter the quick connect code",
-      async (text) => {
-        if (text) {
-          try {
-            const res = await getQuickConnectApi(api!).authorizeQuickConnect({
-              code: text,
-              userId: user?.Id,
-            });
-            console.log(res.status, res.statusText, res.data);
-            if (res.status === 200) {
-              Haptics.notificationAsync(
-                Haptics.NotificationFeedbackType.Success
-              );
-              Alert.alert("Success", "Quick connect authorized");
-            } else {
-              Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
-              Alert.alert("Error", "Invalid code");
-            }
-          } catch (e) {
-            Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
-            Alert.alert("Error", "Invalid code");
-          }
-        }
-      }
-    );
-  };
-
-  return (
-    <ScrollView
-      contentContainerStyle={{
-        paddingLeft: insets.left,
-        paddingRight: insets.right,
-        paddingBottom: 100,
-      }}
-    >
-      <View className="p-4 flex flex-col gap-y-4">
-        <View>
-          <Text className="font-bold text-lg mb-2">Information</Text>
-
-          <View className="flex flex-col rounded-xl overflow-hidden border-neutral-800 divide-y-2 divide-solid divide-neutral-800 ">
-            <ListItem title="User" subTitle={user?.Name} />
-            <ListItem title="Server" subTitle={api?.basePath} />
-          </View>
-        </View>
-
-        <View>
-          <Text className="font-bold text-lg mb-2">Quick connect</Text>
-          <Button onPress={openQuickConnectAuthCodeInput} color="black">
-            Authorize
-          </Button>
-        </View>
-
-        <SettingToggles />
-
-        <View>
-          <Text className="font-bold text-lg mb-2">Tests</Text>
-          <Button
-            onPress={() => {
-              toast.success("Download started", {
-                invert: true,
-              });
-            }}
-            color="black"
-          >
-            Test toast
-          </Button>
-        </View>
-
-        <View>
-          <Text className="font-bold text-lg mb-2">Account and storage</Text>
-          <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
-            </Button>
-          </View>
-        </View>
-        <View>
-          <Text className="font-bold text-lg mb-2">Logs</Text>
-          <View className="flex flex-col space-y-2">
-            {logs?.map((log, index) => (
-              <View key={index} className="bg-neutral-900 rounded-xl p-3">
-                <Text
-                  className={`
-                  mb-1
-              ${log.level === "INFO" && "text-blue-500"}
-              ${log.level === "ERROR" && "text-red-500"}
-                `}
-                >
-                  {log.level}
-                </Text>
-                <Text className="text-xs">{log.message}</Text>
-              </View>
-            ))}
-            {logs?.length === 0 && (
-              <Text className="opacity-50">No logs available</Text>
-            )}
-          </View>
-        </View>
-      </View>
-    </ScrollView>
-  );
-}

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

@@ -1,16 +0,0 @@
-import { ItemContent } from "@/components/ItemContent";
-import { Stack, useLocalSearchParams } from "expo-router";
-import React from "react";
-
-const Page: React.FC = () => {
-  const { id } = useLocalSearchParams() as { id: string };
-
-  return (
-    <>
-      <Stack.Screen options={{ autoHideHomeIndicator: true }} />
-      <ItemContent id={id} />
-    </>
-  );
-};
-
-export default Page;

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

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

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

@@ -1,102 +0,0 @@
-import { Text } from "@/components/common/Text";
-import { LibraryItemCard } from "@/components/library/LibraryItemCard";
-import { Loader } from "@/components/Loader";
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { useSettings } from "@/utils/atoms/settings";
-import {
-  getUserLibraryApi,
-  getUserViewsApi,
-} from "@jellyfin/sdk/lib/utils/api";
-import { FlashList } from "@shopify/flash-list";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { useAtom } from "jotai";
-import { useEffect } from "react";
-import { StyleSheet, View } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-
-export default function index() {
-  const [api] = useAtom(apiAtom);
-  const [user] = useAtom(userAtom);
-  const queryClient = useQueryClient();
-  const [settings] = useSettings();
-
-  const { data, isLoading: isLoading } = useQuery({
-    queryKey: ["user-views", user?.Id],
-    queryFn: async () => {
-      if (!api || !user?.Id) {
-        return null;
-      }
-
-      const response = await getUserViewsApi(api).getUserViews({
-        userId: user.Id,
-      });
-
-      return response.data.Items || null;
-    },
-    enabled: !!api && !!user?.Id,
-    staleTime: 60 * 1000 * 60,
-  });
-
-  useEffect(() => {
-    for (const item of data || []) {
-      queryClient.prefetchQuery({
-        queryKey: ["library", item.Id],
-        queryFn: async () => {
-          if (!item.Id || !user?.Id || !api) return null;
-          const response = await getUserLibraryApi(api).getItem({
-            itemId: item.Id,
-            userId: user?.Id,
-          });
-          return response.data;
-        },
-        staleTime: 60 * 1000,
-      });
-    }
-  }, [data]);
-
-  const insets = useSafeAreaInsets();
-
-  if (isLoading)
-    return (
-      <View className="justify-center items-center h-full">
-        <Loader />
-      </View>
-    );
-
-  if (!data)
-    return (
-      <View className="h-full w-full flex justify-center items-center">
-        <Text className="text-lg text-neutral-500">No libraries found</Text>
-      </View>
-    );
-
-  return (
-    <FlashList
-      extraData={settings}
-      contentInsetAdjustmentBehavior="automatic"
-      contentContainerStyle={{
-        paddingTop: 17,
-        paddingHorizontal: settings?.libraryOptions?.display === "row" ? 0 : 17,
-        paddingBottom: 150,
-        paddingLeft: insets.left,
-        paddingRight: insets.right,
-      }}
-      data={data}
-      renderItem={({ item }) => <LibraryItemCard library={item} />}
-      keyExtractor={(item) => item.Id || ""}
-      ItemSeparatorComponent={() =>
-        settings?.libraryOptions?.display === "row" ? (
-          <View
-            style={{
-              height: StyleSheet.hairlineWidth,
-            }}
-            className="bg-neutral-800 mx-2 my-4"
-          ></View>
-        ) : (
-          <View className="h-4" />
-        )
-      }
-      estimatedItemSize={200}
-    />
-  );
-}

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

@@ -1,10 +1,13 @@
+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";
+import { StyleSheet } from "react-native";
 
 export default function TabLayout() {
   useEffect(() => {
@@ -47,7 +50,7 @@ export default function TabLayout() {
     >
       <Tabs.Screen redirect name="index" />
       <Tabs.Screen
-        name="(home)"
+        name="home"
         options={{
           headerShown: false,
           title: "Home",
@@ -60,7 +63,7 @@ export default function TabLayout() {
         }}
       />
       <Tabs.Screen
-        name="(search)"
+        name="search"
         options={{
           headerShown: false,
           title: "Search",
@@ -70,7 +73,7 @@ export default function TabLayout() {
         }}
       />
       <Tabs.Screen
-        name="(libraries)"
+        name="libraries"
         options={{
           headerShown: false,
           title: "Library",

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

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

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

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

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

@@ -1,41 +1,36 @@
 import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
-import {
-  useFocusEffect,
-  useLocalSearchParams,
-  useNavigation,
-} from "expo-router";
+import { useLocalSearchParams, useNavigation } from "expo-router";
 import * as ScreenOrientation from "expo-screen-orientation";
 import { useAtom } from "jotai";
-import React, { useCallback, useEffect, useLayoutEffect, useMemo } from "react";
-import { FlatList, useWindowDimensions, View } from "react-native";
+import React, {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useState,
+} from "react";
+import { FlatList, View } from "react-native";
 
 import { Text } from "@/components/common/Text";
 import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
 import { FilterButton } from "@/components/filters/FilterButton";
 import { ResetFiltersButton } from "@/components/filters/ResetFiltersButton";
 import { ItemCardText } from "@/components/ItemCardText";
-import { Loader } from "@/components/Loader";
-import { ItemPoster } from "@/components/posters/ItemPoster";
+import MoviePoster from "@/components/posters/MoviePoster";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import {
   genreFilterAtom,
-  getSortByPreference,
-  getSortOrderPreference,
   sortByAtom,
-  SortByOption,
-  sortByPreferenceAtom,
   sortOptions,
   sortOrderAtom,
-  SortOrderOption,
   sortOrderOptions,
-  sortOrderPreferenceAtom,
   tagsFilterAtom,
   yearFilterAtom,
 } from "@/utils/atoms/filters";
-import { orientationAtom } from "@/utils/atoms/orientation";
 import {
   BaseItemDto,
   BaseItemDtoQueryResult,
+  BaseItemKind,
 } from "@jellyfin/sdk/lib/generated-client/models";
 import {
   getFilterApi,
@@ -43,7 +38,6 @@ import {
   getUserLibraryApi,
 } from "@jellyfin/sdk/lib/utils/api";
 import { FlashList } from "@shopify/flash-list";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 const MemoizedTouchableItemRouter = React.memo(TouchableItemRouter);
 
@@ -53,72 +47,50 @@ const Page = () => {
 
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
-  const { width: screenWidth } = useWindowDimensions();
+  const navigation = useNavigation();
 
   const [selectedGenres, setSelectedGenres] = useAtom(genreFilterAtom);
   const [selectedYears, setSelectedYears] = useAtom(yearFilterAtom);
   const [selectedTags, setSelectedTags] = useAtom(tagsFilterAtom);
-  const [sortBy, _setSortBy] = useAtom(sortByAtom);
-  const [sortOrder, _setSortOrder] = useAtom(sortOrderAtom);
-  const [orientation] = useAtom(orientationAtom);
-  const [sortByPreference, setSortByPreference] = useAtom(sortByPreferenceAtom);
-  const [sortOrderPreference, setOderByPreference] = useAtom(
-    sortOrderPreferenceAtom
+  const [sortBy, setSortBy] = useAtom(sortByAtom);
+  const [sortOrder, setSortOrder] = useAtom(sortOrderAtom);
+
+  const [orientation, setOrientation] = useState(
+    ScreenOrientation.Orientation.PORTRAIT_UP
   );
 
-  useEffect(() => {
-    const sop = getSortOrderPreference(libraryId, sortOrderPreference);
-    if (sop) {
-      console.log("getSortOrderPreference ~", sop, libraryId);
-      _setSortOrder([sop]);
-    } else {
-      _setSortOrder([SortOrderOption.Ascending]);
-    }
-    const obp = getSortByPreference(libraryId, sortByPreference);
-    console.log("getSortByPreference ~", obp, libraryId);
-    if (obp) {
-      _setSortBy([obp]);
-    } else {
-      _setSortBy([SortByOption.SortName]);
-    }
+  useLayoutEffect(() => {
+    setSortBy([
+      {
+        key: "SortName",
+        value: "Name",
+      },
+    ]);
+    setSortOrder([
+      {
+        key: "Ascending",
+        value: "Ascending",
+      },
+    ]);
   }, []);
 
-  const setSortBy = useCallback(
-    (sortBy: SortByOption[]) => {
-      const sop = getSortByPreference(libraryId, sortByPreference);
-      if (sortBy[0] !== sop) {
-        console.log("setSortByPreference ~", sortBy[0], libraryId);
-        setSortByPreference({ ...sortByPreference, [libraryId]: sortBy[0] });
+  useEffect(() => {
+    const subscription = ScreenOrientation.addOrientationChangeListener(
+      (event) => {
+        setOrientation(event.orientationInfo.orientation);
       }
-      _setSortBy(sortBy);
-    },
-    [libraryId, sortByPreference]
-  );
+    );
 
-  const setSortOrder = useCallback(
-    (sortOrder: SortOrderOption[]) => {
-      const sop = getSortOrderPreference(libraryId, sortOrderPreference);
-      if (sortOrder[0] !== sop) {
-        console.log("setSortOrderPreference ~", sortOrder[0], libraryId);
-        setOderByPreference({
-          ...sortOrderPreference,
-          [libraryId]: sortOrder[0],
-        });
-      }
-      _setSortOrder(sortOrder);
-    },
-    [libraryId, sortOrderPreference]
-  );
+    ScreenOrientation.getOrientationAsync().then((initialOrientation) => {
+      setOrientation(initialOrientation);
+    });
 
-  const getNumberOfColumns = useCallback(() => {
-    if (orientation === ScreenOrientation.Orientation.PORTRAIT_UP) return 3;
-    if (screenWidth < 600) return 5;
-    if (screenWidth < 960) return 6;
-    if (screenWidth < 1280) return 7;
-    return 6;
-  }, [screenWidth, orientation]);
+    return () => {
+      ScreenOrientation.removeOrientationChangeListener(subscription);
+    };
+  }, []);
 
-  const { data: library, isLoading: isLibraryLoading } = useQuery({
+  const { data: library } = useQuery({
     queryKey: ["library", libraryId],
     queryFn: async () => {
       if (!api) return null;
@@ -129,16 +101,9 @@ const Page = () => {
       return response.data;
     },
     enabled: !!api && !!user?.Id && !!libraryId,
-    staleTime: 60 * 1000,
+    staleTime: 0,
   });
 
-  const navigation = useNavigation();
-  useEffect(() => {
-    navigation.setOptions({
-      title: library?.Name || "",
-    });
-  }, [library]);
-
   const fetchItems = useCallback(
     async ({
       pageParam,
@@ -147,15 +112,36 @@ const Page = () => {
     }): Promise<BaseItemDtoQueryResult | null> => {
       if (!api || !library) return null;
 
+      let includeItemTypes: BaseItemKind[] | undefined = [];
+
+      switch (library?.CollectionType) {
+        case "movies":
+          includeItemTypes.push("Movie");
+          break;
+        case "boxsets":
+          includeItemTypes.push("BoxSet");
+          break;
+        case "tvshows":
+          includeItemTypes.push("Series");
+          break;
+        case "music":
+          includeItemTypes.push("MusicAlbum");
+          break;
+        default:
+          includeItemTypes = undefined;
+          break;
+      }
+
       const response = await getItemsApi(api).getItems({
         userId: user?.Id,
         parentId: libraryId,
-        limit: 36,
+        limit: 20,
         startIndex: pageParam,
-        sortBy: [sortBy[0], "SortName", "ProductionYear"],
-        sortOrder: [sortOrder[0]],
+        sortBy: [sortBy[0].key, "SortName", "ProductionYear"],
+        sortOrder: [sortOrder[0].key],
+        includeItemTypes,
         enableImageTypes: ["Primary", "Backdrop", "Banner", "Thumb"],
-        recursive: false,
+        recursive: true,
         imageTypeLimit: 1,
         fields: ["PrimaryImageAspectRatio", "SortName"],
         genres: selectedGenres,
@@ -178,41 +164,40 @@ const Page = () => {
     ]
   );
 
-  const { data, isFetching, fetchNextPage, hasNextPage, isLoading } =
-    useInfiniteQuery({
-      queryKey: [
-        "library-items",
-        libraryId,
-        selectedGenres,
-        selectedYears,
-        selectedTags,
-        sortBy,
-        sortOrder,
-      ],
-      queryFn: fetchItems,
-      getNextPageParam: (lastPage, pages) => {
-        if (
-          !lastPage?.Items ||
-          !lastPage?.TotalRecordCount ||
-          lastPage?.TotalRecordCount === 0
-        )
-          return undefined;
+  const { data, isFetching, fetchNextPage, hasNextPage } = useInfiniteQuery({
+    queryKey: [
+      "library-items",
+      libraryId,
+      selectedGenres,
+      selectedYears,
+      selectedTags,
+      sortBy,
+      sortOrder,
+    ],
+    queryFn: fetchItems,
+    getNextPageParam: (lastPage, pages) => {
+      if (
+        !lastPage?.Items ||
+        !lastPage?.TotalRecordCount ||
+        lastPage?.TotalRecordCount === 0
+      )
+        return undefined;
 
-        const totalItems = lastPage.TotalRecordCount;
-        const accumulatedItems = pages.reduce(
-          (acc, curr) => acc + (curr?.Items?.length || 0),
-          0
-        );
+      const totalItems = lastPage.TotalRecordCount;
+      const accumulatedItems = pages.reduce(
+        (acc, curr) => acc + (curr?.Items?.length || 0),
+        0
+      );
 
-        if (accumulatedItems < totalItems) {
-          return lastPage?.Items?.length * pages.length;
-        } else {
-          return undefined;
-        }
-      },
-      initialPageParam: 0,
-      enabled: !!api && !!user?.Id && !!library,
-    });
+      if (accumulatedItems < totalItems) {
+        return lastPage?.Items?.length * pages.length;
+      } else {
+        return undefined;
+      }
+    },
+    initialPageParam: 0,
+    enabled: !!api && !!user?.Id && !!library,
+  });
 
   const flatData = useMemo(() => {
     return (
@@ -227,25 +212,23 @@ const Page = () => {
         key={item.Id}
         style={{
           width: "100%",
-          marginBottom: 4,
+          marginBottom:
+            orientation === ScreenOrientation.Orientation.PORTRAIT_UP ? 4 : 16,
         }}
         item={item}
       >
         <View
           style={{
             alignSelf:
-              orientation === ScreenOrientation.Orientation.PORTRAIT_UP
-                ? index % 3 === 0
-                  ? "flex-end"
-                  : (index + 1) % 3 === 0
-                  ? "flex-start"
-                  : "center"
+              index % 3 === 0
+                ? "flex-end"
+                : (index + 1) % 3 === 0
+                ? "flex-start"
                 : "center",
             width: "89%",
           }}
         >
-          {/* <MoviePoster item={item} /> */}
-          <ItemPoster item={item} />
+          <MoviePoster item={item} />
           <ItemCardText item={item} />
         </View>
       </MemoizedTouchableItemRouter>
@@ -358,15 +341,13 @@ const Page = () => {
                   className="mr-1"
                   collectionId={libraryId}
                   queryKey="sortBy"
-                  queryFn={async () => sortOptions.map((s) => s.key)}
+                  queryFn={async () => sortOptions}
                   set={setSortBy}
                   values={sortBy}
                   title="Sort By"
-                  renderItemLabel={(item) =>
-                    sortOptions.find((i) => i.key === item)?.value || ""
-                  }
+                  renderItemLabel={(item) => item.value}
                   searchFilter={(item, search) =>
-                    item.toLowerCase().includes(search.toLowerCase())
+                    item.value.toLowerCase().includes(search.toLowerCase())
                   }
                 />
               ),
@@ -378,15 +359,13 @@ const Page = () => {
                   className="mr-1"
                   collectionId={libraryId}
                   queryKey="sortOrder"
-                  queryFn={async () => sortOrderOptions.map((s) => s.key)}
+                  queryFn={async () => sortOrderOptions}
                   set={setSortOrder}
                   values={sortOrder}
                   title="Sort Order"
-                  renderItemLabel={(item) =>
-                    sortOrderOptions.find((i) => i.key === item)?.value || ""
-                  }
+                  renderItemLabel={(item) => item.value}
                   searchFilter={(item, search) =>
-                    item.toLowerCase().includes(search.toLowerCase())
+                    item.value.toLowerCase().includes(search.toLowerCase())
                   }
                 />
               ),
@@ -415,21 +394,7 @@ const Page = () => {
     ]
   );
 
-  const insets = useSafeAreaInsets();
-
-  if (isLoading || isLibraryLoading)
-    return (
-      <View className="w-full h-full flex items-center justify-center">
-        <Loader />
-      </View>
-    );
-
-  if (flatData.length === 0)
-    return (
-      <View className="h-full w-full flex justify-center items-center">
-        <Text className="text-lg text-neutral-500">No items found</Text>
-      </View>
-    );
+  if (!library) return null;
 
   return (
     <FlashList
@@ -441,22 +406,19 @@ const Page = () => {
       contentInsetAdjustmentBehavior="automatic"
       data={flatData}
       renderItem={renderItem}
-      extraData={orientation}
       keyExtractor={keyExtractor}
-      estimatedItemSize={244}
-      numColumns={getNumberOfColumns()}
+      estimatedItemSize={255}
+      numColumns={
+        orientation === ScreenOrientation.Orientation.PORTRAIT_UP ? 3 : 5
+      }
       onEndReached={() => {
         if (hasNextPage) {
           fetchNextPage();
         }
       }}
-      onEndReachedThreshold={1}
+      onEndReachedThreshold={0.5}
       ListHeaderComponent={ListHeaderComponent}
-      contentContainerStyle={{
-        paddingBottom: 24,
-        paddingLeft: insets.left,
-        paddingRight: insets.right,
-      }}
+      contentContainerStyle={{ paddingBottom: 24 }}
       ItemSeparatorComponent={() => (
         <View
           style={{

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

@@ -1,8 +1,7 @@
-import { nestedTabPageScreenOptions } from "@/components/stacks/NestedTabPageStack";
-import { Stack } from "expo-router";
+import { Stack, useRouter } from "expo-router";
 import { Platform } from "react-native";
 
-export default function SearchLayout() {
+export default function IndexLayout() {
   return (
     <Stack>
       <Stack.Screen
@@ -10,17 +9,14 @@ export default function SearchLayout() {
         options={{
           headerShown: true,
           headerLargeTitle: true,
-          headerTitle: "Search",
+          headerTitle: "Library",
           headerBlurEffect: "prominent",
           headerTransparent: Platform.OS === "ios" ? true : false,
           headerShadowVisible: false,
         }}
       />
-      {Object.entries(nestedTabPageScreenOptions).map(([name, options]) => (
-        <Stack.Screen key={name} name={name} options={options} />
-      ))}
       <Stack.Screen
-        name="collections/[collectionId]"
+        name="[libraryId]"
         options={{
           title: "",
           headerShown: true,

app/(auth)/(tabs)/libraries/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 }) => <LibraryItemCard library={item} />}
+      keyExtractor={(item) => item.Id || ""}
+      ItemSeparatorComponent={() => <View className="h-4" />}
+      estimatedItemSize={200}
+    />
+  );
+}
+
+interface Props {
+  library: BaseItemDto;
+}
+
+const LibraryItemCard: React.FC<Props> = ({ library }) => {
+  const router = useRouter();
+
+  const [api] = useAtom(apiAtom);
+
+  const url = useMemo(
+    () =>
+      getPrimaryImageUrl({
+        api,
+        item: library,
+      }),
+    [library]
+  );
+
+  if (!url) return null;
+
+  return (
+    <TouchableOpacity
+      onPress={() => {
+        router.push(`/libraries/${library.Id}`);
+      }}
+    >
+      <View className="flex justify-center rounded-xl w-full relative border border-neutral-900 h-20 ">
+        <Image
+          source={{ uri: url }}
+          style={{
+            width: "100%",
+            height: "100%",
+            borderRadius: 8,
+            position: "absolute",
+            top: 0,
+            left: 0,
+          }}
+        />
+        <Text className="font-bold text-xl text-start px-4">
+          {library.Name}
+        </Text>
+      </View>
+    </TouchableOpacity>
+  );
+};

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

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

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

@@ -1,3 +1,4 @@
+import { Button } from "@/components/Button";
 import { HorizontalScroll } from "@/components/common/HorrizontalScroll";
 import { Input } from "@/components/common/Input";
 import { Text } from "@/components/common/Text";
@@ -11,6 +12,8 @@ import SeriesPoster from "@/components/posters/SeriesPoster";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
 import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
+import { Ionicons } from "@expo/vector-icons";
+import { Api } from "@jellyfin/sdk";
 import {
   BaseItemDto,
   BaseItemKind,
@@ -18,7 +21,13 @@ import {
 import { getItemsApi, getSearchApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery } from "@tanstack/react-query";
 import axios from "axios";
-import { Href, router, useLocalSearchParams, useNavigation } from "expo-router";
+import {
+  Href,
+  router,
+  useLocalSearchParams,
+  useNavigation,
+  usePathname,
+} from "expo-router";
 import { useAtom } from "jotai";
 import React, {
   useCallback,
@@ -28,7 +37,6 @@ import React, {
   useState,
 } from "react";
 import { Platform, ScrollView, TouchableOpacity, View } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useDebounce } from "use-debounce";
 
 const exampleSearches = [
@@ -42,7 +50,6 @@ const exampleSearches = [
 
 export default function search() {
   const params = useLocalSearchParams();
-  const insets = useSafeAreaInsets();
 
   const { q, prev } = params as { q: string; prev: Href<string> };
 
@@ -222,10 +229,6 @@ export default function search() {
       <ScrollView
         keyboardDismissMode="on-drag"
         contentInsetAdjustmentBehavior="automatic"
-        contentContainerStyle={{
-          paddingLeft: insets.left,
-          paddingRight: insets.right,
-        }}
       >
         <View className="flex flex-col pt-4 pb-32">
           {Platform.OS === "android" && (
@@ -251,13 +254,13 @@ export default function search() {
             header="Movies"
             ids={movies?.map((m) => m.Id!)}
             renderItem={(data) => (
-              <HorizontalScroll
+              <HorizontalScroll<BaseItemDto>
                 data={data}
                 renderItem={(item) => (
-                  <TouchableItemRouter
+                  <TouchableOpacity
                     key={item.Id}
                     className="flex flex-col w-28"
-                    item={item}
+                    onPress={() => router.push(`/items/${item.Id}`)}
                   >
                     <MoviePoster item={item} key={item.Id} />
                     <Text numberOfLines={2} className="mt-2">
@@ -266,7 +269,7 @@ export default function search() {
                     <Text className="opacity-50 text-xs">
                       {item.ProductionYear}
                     </Text>
-                  </TouchableItemRouter>
+                  </TouchableOpacity>
                 )}
               />
             )}
@@ -275,12 +278,12 @@ export default function search() {
             ids={series?.map((m) => m.Id!)}
             header="Series"
             renderItem={(data) => (
-              <HorizontalScroll
+              <HorizontalScroll<BaseItemDto>
                 data={data}
                 renderItem={(item) => (
-                  <TouchableItemRouter
+                  <TouchableOpacity
                     key={item.Id}
-                    item={item}
+                    onPress={() => router.push(`/series/${item.Id}`)}
                     className="flex flex-col w-28"
                   >
                     <SeriesPoster item={item} key={item.Id} />
@@ -290,7 +293,7 @@ export default function search() {
                     <Text className="opacity-50 text-xs">
                       {item.ProductionYear}
                     </Text>
-                  </TouchableItemRouter>
+                  </TouchableOpacity>
                 )}
               />
             )}
@@ -299,17 +302,17 @@ export default function search() {
             ids={episodes?.map((m) => m.Id!)}
             header="Episodes"
             renderItem={(data) => (
-              <HorizontalScroll
+              <HorizontalScroll<BaseItemDto>
                 data={data}
                 renderItem={(item) => (
-                  <TouchableItemRouter
-                    item={item}
+                  <TouchableOpacity
                     key={item.Id}
+                    onPress={() => router.push(`/items/${item.Id}`)}
                     className="flex flex-col w-44"
                   >
                     <ContinueWatchingPoster item={item} />
                     <ItemCardText item={item} />
-                  </TouchableItemRouter>
+                  </TouchableOpacity>
                 )}
               />
             )}
@@ -318,19 +321,19 @@ export default function search() {
             ids={collections?.map((m) => m.Id!)}
             header="Collections"
             renderItem={(data) => (
-              <HorizontalScroll
+              <HorizontalScroll<BaseItemDto>
                 data={data}
                 renderItem={(item) => (
-                  <TouchableItemRouter
+                  <TouchableOpacity
                     key={item.Id}
-                    item={item}
                     className="flex flex-col w-28"
+                    onPress={() => router.push(`/collections/${item.Id}`)}
                   >
                     <MoviePoster item={item} key={item.Id} />
                     <Text numberOfLines={2} className="mt-2">
                       {item.Name}
                     </Text>
-                  </TouchableItemRouter>
+                  </TouchableOpacity>
                 )}
               />
             )}
@@ -339,7 +342,7 @@ export default function search() {
             ids={actors?.map((m) => m.Id!)}
             header="Actors"
             renderItem={(data) => (
-              <HorizontalScroll
+              <HorizontalScroll<BaseItemDto>
                 data={data}
                 renderItem={(item) => (
                   <TouchableItemRouter
@@ -358,7 +361,7 @@ export default function search() {
             ids={artists?.map((m) => m.Id!)}
             header="Artists"
             renderItem={(data) => (
-              <HorizontalScroll
+              <HorizontalScroll<BaseItemDto>
                 data={data}
                 renderItem={(item) => (
                   <TouchableItemRouter
@@ -377,7 +380,7 @@ export default function search() {
             ids={albums?.map((m) => m.Id!)}
             header="Albums"
             renderItem={(data) => (
-              <HorizontalScroll
+              <HorizontalScroll<BaseItemDto>
                 data={data}
                 renderItem={(item) => (
                   <TouchableItemRouter
@@ -396,7 +399,7 @@ export default function search() {
             ids={songs?.map((m) => m.Id!)}
             header="Songs"
             renderItem={(data) => (
-              <HorizontalScroll
+              <HorizontalScroll<BaseItemDto>
                 data={data}
                 renderItem={(item) => (
                   <TouchableItemRouter

app/(auth)/actors/[actorId].tsx

@@ -1,23 +1,34 @@
-import { ItemCardText } from "@/components/ItemCardText";
+import { Bitrate } from "@/components/BitrateSelector";
 import { Loader } from "@/components/Loader";
 import { OverviewText } from "@/components/OverviewText";
-import { ParallaxScrollView } from "@/components/ParallaxPage";
-import { InfiniteHorizontalScroll } from "@/components/common/InfiniteHorrizontalScroll";
+import { Ratings } from "@/components/Ratings";
 import { Text } from "@/components/common/Text";
-import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
 import { MoviesTitleHeader } from "@/components/movies/MoviesTitleHeader";
-import MoviePoster from "@/components/posters/MoviePoster";
+import { 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 { BaseItemDtoQueryResult } from "@jellyfin/sdk/lib/generated-client/models";
-import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
+import { chromecastProfile } from "@/utils/profiles/chromecast";
+import ios from "@/utils/profiles/ios";
+import native from "@/utils/profiles/native";
+import old from "@/utils/profiles/old";
+import { getItemsApi, 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 } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { View } from "react-native";
+import { useCastDevice } from "react-native-google-cast";
+import { ParallaxScrollView } from "../../../components/ParallaxPage";
+import { InfiniteHorizontalScroll } from "@/components/common/InfiniteHorrizontalScroll";
+import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
+import MoviePoster from "@/components/posters/MoviePoster";
+import { ItemCardText } from "@/components/ItemCardText";
+import { BaseItemDtoQueryResult } from "@jellyfin/sdk/lib/generated-client/models";
 
 const page: React.FC = () => {
   const local = useLocalSearchParams();

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

@@ -1,9 +1,6 @@
 import { Chromecast } from "@/components/Chromecast";
-import { ItemImage } from "@/components/common/ItemImage";
 import { Text } from "@/components/common/Text";
-import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
 import { SongsList } from "@/components/music/SongsList";
-import { ParallaxScrollView } from "@/components/ParallaxPage";
 import ArtistPoster from "@/components/posters/ArtistPoster";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
@@ -13,7 +10,6 @@ import { router, useLocalSearchParams, useNavigation } from "expo-router";
 import { useAtom } from "jotai";
 import { useEffect, useState } from "react";
 import { ScrollView, TouchableOpacity, View } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 export default function page() {
   const searchParams = useLocalSearchParams();
@@ -91,31 +87,35 @@ export default function page() {
     enabled: !!api && !!user?.Id,
   });
 
-  const insets = useSafeAreaInsets();
-
   if (!album) return null;
 
   return (
-    <ParallaxScrollView
-      headerHeight={400}
-      headerImage={
-        <ItemImage
-          variant={"Primary"}
-          item={album}
-          style={{
-            width: "100%",
-            height: "100%",
-          }}
-        />
-      }
-    >
-      <View className="px-4 mb-8">
-        <Text className="font-bold text-2xl mb-2">{album?.Name}</Text>
-        <Text className="text-neutral-500">
-          {songs?.TotalRecordCount} songs
-        </Text>
-      </View>
-      <View className="px-4">
+    <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}
@@ -123,6 +123,6 @@ export default function page() {
           artistId={artistId}
         />
       </View>
-    </ParallaxScrollView>
+    </ScrollView>
   );
 }

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

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

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

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

@@ -3,15 +3,14 @@ import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
 import { FilterButton } from "@/components/filters/FilterButton";
 import { ResetFiltersButton } from "@/components/filters/ResetFiltersButton";
 import { ItemCardText } from "@/components/ItemCardText";
-import { ItemPoster } from "@/components/posters/ItemPoster";
+import { Loader } from "@/components/Loader";
+import MoviePoster from "@/components/posters/MoviePoster";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import {
   genreFilterAtom,
   sortByAtom,
-  SortByOption,
   sortOptions,
   sortOrderAtom,
-  SortOrderOption,
   sortOrderOptions,
   tagsFilterAtom,
   yearFilterAtom,
@@ -19,7 +18,7 @@ import {
 import {
   BaseItemDto,
   BaseItemDtoQueryResult,
-  ItemSortBy,
+  BaseItemKind,
 } from "@jellyfin/sdk/lib/generated-client/models";
 import {
   getFilterApi,
@@ -28,11 +27,19 @@ import {
 } from "@jellyfin/sdk/lib/utils/api";
 import { FlashList } from "@shopify/flash-list";
 import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
-import { useLocalSearchParams, useNavigation } from "expo-router";
-import * as ScreenOrientation from "expo-screen-orientation";
+import { Stack, useLocalSearchParams, useNavigation } from "expo-router";
 import { useAtom } from "jotai";
-import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { FlatList, View } from "react-native";
+import React, {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useState,
+} from "react";
+import { FlatList, NativeScrollEvent, ScrollView, View } from "react-native";
+import * as ScreenOrientation from "expo-screen-orientation";
+
+const MemoizedTouchableItemRouter = React.memo(TouchableItemRouter);
 
 const page: React.FC = () => {
   const searchParams = useLocalSearchParams();
@@ -51,6 +58,21 @@ const page: React.FC = () => {
   const [sortBy, setSortBy] = useAtom(sortByAtom);
   const [sortOrder, setSortOrder] = useAtom(sortOrderAtom);
 
+  useLayoutEffect(() => {
+    setSortBy([
+      {
+        key: "PremiereDate",
+        value: "Premiere Date",
+      },
+    ]);
+    setSortOrder([
+      {
+        key: "Ascending",
+        value: "Ascending",
+      },
+    ]);
+  }, []);
+
   const { data: collection } = useQuery({
     queryKey: ["collection", collectionId],
     queryFn: async () => {
@@ -68,18 +90,6 @@ const page: React.FC = () => {
 
   useEffect(() => {
     navigation.setOptions({ title: collection?.Name || "" });
-    setSortOrder([SortOrderOption.Ascending]);
-
-    if (!collection) return;
-
-    // Convert the DisplayOrder to SortByOption
-    const displayOrder = collection.DisplayOrder as ItemSortBy;
-    const sortByOption = displayOrder
-      ? SortByOption[displayOrder as keyof typeof SortByOption] ||
-        SortByOption.PremiereDate
-      : SortByOption.PremiereDate;
-
-    setSortBy([sortByOption]);
   }, [navigation, collection]);
 
   const fetchItems = useCallback(
@@ -95,9 +105,8 @@ const page: React.FC = () => {
         parentId: collectionId,
         limit: 18,
         startIndex: pageParam,
-        // Set one ordering at a time. As collections do not work with correctly with multiple.
-        sortBy: [sortBy[0]],
-        sortOrder: [sortOrder[0]],
+        sortBy: [sortBy[0].key, "SortName", "ProductionYear"],
+        sortOrder: [sortOrder[0].key],
         fields: [
           "ItemCounts",
           "PrimaryImageAspectRatio",
@@ -167,7 +176,7 @@ const page: React.FC = () => {
 
   const renderItem = useCallback(
     ({ item, index }: { item: BaseItemDto; index: number }) => (
-      <TouchableItemRouter
+      <MemoizedTouchableItemRouter
         key={item.Id}
         style={{
           width: "100%",
@@ -187,11 +196,10 @@ const page: React.FC = () => {
             width: "89%",
           }}
         >
-          <ItemPoster item={item} />
-          {/* <MoviePoster item={item} /> */}
+          <MoviePoster item={item} />
           <ItemCardText item={item} />
         </View>
-      </TouchableItemRouter>
+      </MemoizedTouchableItemRouter>
     ),
     [orientation]
   );
@@ -210,13 +218,6 @@ const page: React.FC = () => {
             paddingVertical: 16,
             flexDirection: "row",
           }}
-          extraData={[
-            selectedGenres,
-            selectedYears,
-            selectedTags,
-            sortBy,
-            sortOrder,
-          ]}
           data={[
             {
               key: "reset",
@@ -308,15 +309,13 @@ const page: React.FC = () => {
                   className="mr-1"
                   collectionId={collectionId}
                   queryKey="sortBy"
-                  queryFn={async () => sortOptions.map((s) => s.key)}
+                  queryFn={async () => sortOptions}
                   set={setSortBy}
                   values={sortBy}
                   title="Sort By"
-                  renderItemLabel={(item) =>
-                    sortOptions.find((i) => i.key === item)?.value || ""
-                  }
+                  renderItemLabel={(item) => item.value}
                   searchFilter={(item, search) =>
-                    item.toLowerCase().includes(search.toLowerCase())
+                    item.value.toLowerCase().includes(search.toLowerCase())
                   }
                 />
               ),
@@ -328,15 +327,13 @@ const page: React.FC = () => {
                   className="mr-1"
                   collectionId={collectionId}
                   queryKey="sortOrder"
-                  queryFn={async () => sortOrderOptions.map((s) => s.key)}
+                  queryFn={async () => sortOrderOptions}
                   set={setSortOrder}
                   values={sortOrder}
                   title="Sort Order"
-                  renderItemLabel={(item) =>
-                    sortOrderOptions.find((i) => i.key === item)?.value || ""
-                  }
+                  renderItemLabel={(item) => item.value}
                   searchFilter={(item, search) =>
-                    item.toLowerCase().includes(search.toLowerCase())
+                    item.value.toLowerCase().includes(search.toLowerCase())
                   }
                 />
               ),
@@ -374,13 +371,6 @@ const page: React.FC = () => {
           <Text className="font-bold text-xl text-neutral-500">No results</Text>
         </View>
       }
-      extraData={[
-        selectedGenres,
-        selectedYears,
-        selectedTags,
-        sortBy,
-        sortOrder,
-      ]}
       contentInsetAdjustmentBehavior="automatic"
       data={flatData}
       renderItem={renderItem}

app/(auth)/downloads.tsx

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

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

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

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

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

app/(auth)/settings.tsx

@@ -0,0 +1,90 @@
+import { Button } from "@/components/Button";
+import { Text } from "@/components/common/Text";
+import { ListItem } from "@/components/ListItem";
+import { apiAtom, useJellyfin, userAtom } from "@/providers/JellyfinProvider";
+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";
+import { WebSocketsTest } from "@/components/settings/WebsocketsText";
+
+export default function settings() {
+  const { logout } = useJellyfin();
+  const { deleteAllFiles } = useFiles();
+
+  const [api] = useAtom(apiAtom);
+  const [user] = useAtom(userAtom);
+
+  const { data: logs } = useQuery({
+    queryKey: ["logs"],
+    queryFn: async () => readFromLog(),
+    refetchInterval: 1000,
+  });
+
+  return (
+    <ScrollView>
+      <View className="p-4 flex flex-col gap-y-4 pb-12">
+        <Text className="font-bold text-2xl">Information</Text>
+
+        <View className="flex flex-col rounded-xl mb-4 overflow-hidden border-neutral-800 divide-y-2 divide-solid divide-neutral-800 ">
+          <ListItem title="User" subTitle={user?.Name} />
+          <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
+          </Button>
+        </View>
+
+        <Text className="font-bold text-2xl">Logs</Text>
+        <View className="flex flex-col space-y-2">
+          {logs?.map((log, index) => (
+            <View key={index} className="bg-neutral-900 rounded-xl p-3">
+              <Text
+                className={`
+                  mb-1
+              ${log.level === "INFO" && "text-blue-500"}
+              ${log.level === "ERROR" && "text-red-500"}
+                `}
+              >
+                {log.level}
+              </Text>
+              <Text className="text-xs">{log.message}</Text>
+            </View>
+          ))}
+          {logs?.length === 0 && (
+            <Text className="opacity-50">No logs available</Text>
+          )}
+        </View>
+      </View>
+    </ScrollView>
+  );
+}

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

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

app/_layout.tsx

@@ -1,4 +1,4 @@
-import { FullScreenVideoPlayer } from "@/components/FullScreenVideoPlayer";
+import { CurrentlyPlayingBar } from "@/components/CurrentlyPlayingBar";
 import { JellyfinProvider } from "@/providers/JellyfinProvider";
 import { JobQueueProvider } from "@/providers/JobQueueProvider";
 import { PlaybackProvider } from "@/providers/PlaybackProvider";
@@ -9,20 +9,22 @@ 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, useRouter } from "expo-router";
+import { Stack } from "expo-router";
 import * as ScreenOrientation from "expo-screen-orientation";
 import * as SplashScreen from "expo-splash-screen";
 import { StatusBar } from "expo-status-bar";
-import { Provider as JotaiProvider, useAtom } from "jotai";
+import { Provider as JotaiProvider } from "jotai";
 import { useEffect, useRef } from "react";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import "react-native-reanimated";
-import * as Linking from "expo-linking";
-import { orientationAtom } from "@/utils/atoms/orientation";
-import { Toaster } from "sonner-native";
 
+// Prevent the splash screen from auto-hiding before asset loading is complete.
 SplashScreen.preventAutoHideAsync();
 
+export const unstable_settings = {
+  initialRouteName: "/index",
+};
+
 export default function RootLayout() {
   const [loaded] = useFonts({
     SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
@@ -47,7 +49,6 @@ export default function RootLayout() {
 
 function Layout() {
   const [settings, updateSettings] = useSettings();
-  const [orientation, setOrientation] = useAtom(orientationAtom);
 
   useKeepAwake();
 
@@ -74,29 +75,6 @@ function Layout() {
       );
   }, [settings]);
 
-  useEffect(() => {
-    const subscription = ScreenOrientation.addOrientationChangeListener(
-      (event) => {
-        console.log(event.orientationInfo.orientation);
-        setOrientation(event.orientationInfo.orientation);
-      }
-    );
-
-    ScreenOrientation.getOrientationAsync().then((initialOrientation) => {
-      setOrientation(initialOrientation);
-    });
-
-    return () => {
-      ScreenOrientation.removeOrientationChangeListener(subscription);
-    };
-  }, []);
-
-  const url = Linking.useURL();
-
-  if (url) {
-    const { hostname, path, queryParams } = Linking.parse(url);
-  }
-
   return (
     <GestureHandlerRootView style={{ flex: 1 }}>
       <QueryClientProvider client={queryClientRef.current}>
@@ -107,12 +85,7 @@ function Layout() {
                 <PlaybackProvider>
                   <StatusBar style="light" backgroundColor="#000" />
                   <ThemeProvider value={DarkTheme}>
-                    <Stack
-                      initialRouteName="/home"
-                      screenOptions={{
-                        autoHideHomeIndicator: true,
-                      }}
-                    >
+                    <Stack initialRouteName="/home">
                       <Stack.Screen
                         name="(auth)/(tabs)"
                         options={{
@@ -120,14 +93,95 @@ function Layout() {
                           title: "",
                         }}
                       />
+                      <Stack.Screen
+                        name="(auth)/settings"
+                        options={{
+                          headerShown: true,
+                          title: "Settings",
+                          headerStyle: { backgroundColor: "black" },
+                          headerShadowVisible: false,
+                        }}
+                      />
+                      <Stack.Screen
+                        name="(auth)/downloads"
+                        options={{
+                          headerShown: true,
+                          title: "Downloads",
+                          headerStyle: { backgroundColor: "black" },
+                          headerShadowVisible: false,
+                        }}
+                      />
+                      <Stack.Screen
+                        name="(auth)/items/[id]"
+                        options={{
+                          title: "",
+                          headerShown: false,
+                        }}
+                      />
+                      <Stack.Screen
+                        name="(auth)/actors/[actorId]"
+                        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>
-                    <FullScreenVideoPlayer />
-                    <Toaster />
+                    <CurrentlyPlayingBar />
                   </ThemeProvider>
                 </PlaybackProvider>
               </JellyfinProvider>

app/login.tsx

@@ -3,11 +3,9 @@ import { Input } from "@/components/common/Input";
 import { Text } from "@/components/common/Text";
 import { apiAtom, useJellyfin } from "@/providers/JellyfinProvider";
 import { Ionicons } from "@expo/vector-icons";
-import { PublicSystemInfo } from "@jellyfin/sdk/lib/generated-client";
-import { getSystemApi } from "@jellyfin/sdk/lib/utils/api";
-import { useLocalSearchParams } from "expo-router";
+import { AxiosError } from "axios";
 import { useAtom } from "jotai";
-import React, { useEffect, useState } from "react";
+import React, { useMemo, useState } from "react";
 import {
   Alert,
   KeyboardAvoidingView,
@@ -23,47 +21,19 @@ const CredentialsSchema = z.object({
 });
 
 const Login: React.FC = () => {
-  const { setServer, login, removeServer, initiateQuickConnect } =
-    useJellyfin();
+  const { setServer, login, removeServer } = useJellyfin();
   const [api] = useAtom(apiAtom);
-  const params = useLocalSearchParams();
 
-  const {
-    apiUrl: _apiUrl,
-    username: _username,
-    password: _password,
-  } = params as { apiUrl: string; username: string; password: string };
-
-  const [serverURL, setServerURL] = useState<string>(_apiUrl);
-  const [serverName, setServerName] = useState<string>("");
+  const [serverURL, setServerURL] = useState<string>("");
   const [error, setError] = useState<string>("");
   const [credentials, setCredentials] = useState<{
     username: string;
     password: string;
   }>({
-    username: _username,
-    password: _password,
+    username: "",
+    password: "",
   });
 
-  useEffect(() => {
-    (async () => {
-      // we might re-use the checkUrl function here to check the url as well
-      // however, I don't think it should be necessary for now
-      if (_apiUrl) {
-        setServer({
-          address: _apiUrl,
-        });
-
-        setTimeout(() => {
-          if (_username && _password) {
-            setCredentials({ username: _username, password: _password });
-            login(_username, _password);
-          }
-        }, 300);
-      }
-    })();
-  }, [_apiUrl, _username, _password]);
-
   const [loading, setLoading] = useState<boolean>(false);
 
   const handleLogin = async () => {
@@ -84,108 +54,12 @@ const Login: React.FC = () => {
     }
   };
 
-  const [loadingServerCheck, setLoadingServerCheck] = useState<boolean>(false);
-
-  /**
-   * Checks the availability and validity of a Jellyfin server URL.
-   *
-   * This function attempts to connect to a Jellyfin server using the provided URL.
-   * It tries both HTTPS and HTTP protocols, with a timeout to handle long 404 responses.
-   *
-   * @param {string} url - The base URL of the Jellyfin server to check.
-   * @returns {Promise<string | undefined>} A Promise that resolves to:
-   *   - The full URL (including protocol) if a valid Jellyfin server is found.
-   *   - undefined if no valid server is found at the given URL.
-   *
-   * Side effects:
-   * - Sets loadingServerCheck state to true at the beginning and false at the end.
-   * - Logs errors and timeout information to the console.
-   */
-  async function checkUrl(url: string) {
-    url = url.endsWith("/") ? url.slice(0, -1) : url;
-    setLoadingServerCheck(true);
-
-    const protocols = ["https://", "http://"];
-    const timeout = 2000; // 2 seconds timeout for long 404 responses
-
-    try {
-      for (const protocol of protocols) {
-        const controller = new AbortController();
-        const timeoutId = setTimeout(() => controller.abort(), timeout);
-
-        try {
-          const response = await fetch(`${protocol}${url}/System/Info/Public`, {
-            mode: "cors",
-            signal: controller.signal,
-          });
-          clearTimeout(timeoutId);
-          if (response.ok) {
-            const data = (await response.json()) as PublicSystemInfo;
-            setServerName(data.ServerName || "");
-            return `${protocol}${url}`;
-          }
-        } catch (e) {
-          const error = e as Error;
-          if (error.name === "AbortError") {
-            console.log(`Request to ${protocol}${url} timed out`);
-          } else {
-            console.error(`Error checking ${protocol}${url}:`, error);
-          }
-        }
-      }
-      return undefined;
-    } finally {
-      setLoadingServerCheck(false);
-    }
-  }
-
-  /**
-   * Handles the connection attempt to a Jellyfin server.
-   *
-   * This function trims the input URL, checks its validity using the `checkUrl` function,
-   * and sets the server address if a valid connection is established.
-   *
-   * @param {string} url - The URL of the Jellyfin server to connect to.
-   *
-   * @returns {Promise<void>}
-   *
-   * Side effects:
-   * - Calls `checkUrl` to validate the server URL.
-   * - Shows an alert if the connection fails.
-   * - Sets the server address using `setServer` if the connection is successful.
-   *
-   */
-  const handleConnect = async (url: string) => {
-    url = url.trim();
-
-    const result = await checkUrl(
-      url.startsWith("http") ? new URL(url).host : url
-    );
-
-    if (result === undefined) {
-      Alert.alert(
-        "Connection failed",
-        "Could not connect to the server. Please check the URL and your network connection."
-      );
+  const handleConnect = (url: string) => {
+    if (!url.startsWith("http")) {
+      Alert.alert("Error", "URL needs to start with http or https.");
       return;
     }
-
-    setServer({ address: result });
-  };
-
-  const handleQuickConnect = async () => {
-    try {
-      const code = await initiateQuickConnect();
-      if (code) {
-        Alert.alert("Quick Connect", `Enter code ${code} to login`, [
-          {
-            text: "Got It",
-          },
-        ]);
-      }
-    } catch (error) {
-      Alert.alert("Error", "Failed to initiate Quick Connect");
-    }
+    setServer({ address: url.trim() });
   };
 
   if (api?.basePath) {
@@ -199,9 +73,7 @@ const Login: React.FC = () => {
             <View></View>
             <View>
               <View className="mb-4">
-                <Text className="text-3xl font-bold mb-1">
-                  {serverName || "Streamyfin"}
-                </Text>
+                <Text className="text-3xl font-bold mb-2">Streamyfin</Text>
                 <Text className="text-neutral-500 mb-2">
                   Server: {api.basePath}
                 </Text>
@@ -209,6 +81,7 @@ const Login: React.FC = () => {
                   color="black"
                   onPress={() => {
                     removeServer();
+                    setServerURL("");
                   }}
                   justify="between"
                   iconLeft={
@@ -225,6 +98,9 @@ const Login: React.FC = () => {
 
               <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) =>
@@ -261,18 +137,13 @@ const Login: React.FC = () => {
               <Text className="text-red-600 mb-2">{error}</Text>
             </View>
 
-            <View className="mt-auto mb-2">
-              <Button
-                color="black"
-                onPress={handleQuickConnect}
-                className="mb-2"
-              >
-                Use Quick Connect
-              </Button>
-              <Button onPress={handleLogin} loading={loading}>
-                Log in
-              </Button>
-            </View>
+            <Button
+              onPress={handleLogin}
+              loading={loading}
+              className="mt-auto mb-2"
+            >
+              Log in
+            </Button>
           </View>
         </KeyboardAvoidingView>
       </SafeAreaView>
@@ -302,13 +173,11 @@ const Login: React.FC = () => {
               textContentType="URL"
               maxLength={500}
             />
+            <Text className="opacity-30">
+              Server URL requires http or https
+            </Text>
           </View>
-          <Button
-            loading={loadingServerCheck}
-            disabled={loadingServerCheck}
-            onPress={async () => await handleConnect(serverURL)}
-            className="mb-2"
-          >
+          <Button onPress={() => handleConnect(serverURL)} className="mb-2">
             Connect
           </Button>
         </View>

components/AudioTrackSelector.tsx

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

components/BitrateSelector.tsx

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

components/Button.tsx

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

components/Chromecast.tsx

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

components/ContinueWatchingPoster.tsx

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

components/CurrentlyPlayingBar.tsx

@@ -0,0 +1,382 @@
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { usePlayback } from "@/providers/PlaybackProvider";
+import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
+import { getAuthHeaders } from "@/utils/jellyfin/jellyfin";
+import { writeToLog } from "@/utils/log";
+import { Ionicons } from "@expo/vector-icons";
+import { BlurView } from "expo-blur";
+import { useRouter, useSegments } from "expo-router";
+import { useAtom } from "jotai";
+import { useEffect, useMemo, useState } from "react";
+import { Alert, Platform, TouchableOpacity, View } from "react-native";
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
+import Video from "react-native-video";
+import { Text } from "./common/Text";
+import { Loader } from "./Loader";
+import * as FileSystem from "expo-file-system";
+import {
+  FFmpegKit,
+  FFmpegKitConfig,
+  FFmpegSession,
+  ReturnCode,
+} from "ffmpeg-kit-react-native";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+
+export const CurrentlyPlayingBar: React.FC = () => {
+  const segments = useSegments();
+  const {
+    currentlyPlaying,
+    pauseVideo,
+    playVideo,
+    setCurrentlyPlayingState,
+    stopPlayback,
+    setIsPlaying,
+    isPlaying,
+    videoRef,
+    onProgress,
+  } = usePlayback();
+
+  const [api] = useAtom(apiAtom);
+  const [user] = useAtom(userAtom);
+
+  const aBottom = useSharedValue(0);
+  const aPadding = useSharedValue(0);
+  const aHeight = useSharedValue(100);
+  const router = useRouter();
+  const animatedOuterStyle = useAnimatedStyle(() => {
+    return {
+      bottom: withTiming(aBottom.value, { duration: 500 }),
+      height: withTiming(aHeight.value, { duration: 500 }),
+      padding: withTiming(aPadding.value, { duration: 500 }),
+    };
+  });
+
+  const aPaddingBottom = useSharedValue(30);
+  const aPaddingInner = useSharedValue(12);
+  const aBorderRadiusBottom = useSharedValue(12);
+  const animatedInnerStyle = useAnimatedStyle(() => {
+    return {
+      padding: withTiming(aPaddingInner.value, { duration: 500 }),
+      paddingBottom: withTiming(aPaddingBottom.value, { duration: 500 }),
+      borderBottomLeftRadius: withTiming(aBorderRadiusBottom.value, {
+        duration: 500,
+      }),
+      borderBottomRightRadius: withTiming(aBorderRadiusBottom.value, {
+        duration: 500,
+      }),
+    };
+  });
+
+  const [streamUrl, setStreamUrl] = useState<string | null>(null);
+  const [ffmpegSession, setFfmpegSession] = useState<FFmpegSession | null>(
+    null
+  );
+
+  const startStreamingTranscode = async (inputUrl: string) => {
+    const outputDir = `${FileSystem.cacheDirectory}stream_${Date.now()}`;
+    const manifestPath = `${outputDir}/stream.m3u8`;
+
+    // Ensure the output directory exists
+    await FileSystem.makeDirectoryAsync(outputDir, { intermediates: true });
+
+    // Base FFmpeg command
+    let ffmpegCommand = `-i "${inputUrl}" `;
+
+    // Add hardware acceleration based on platform
+    if (Platform.OS === "android") {
+      ffmpegCommand += "-c:v h264_mediacodec "; // Hardware acceleration for Android
+    } else if (Platform.OS === "ios") {
+      ffmpegCommand += "-c:v h264_videotoolbox "; // Hardware acceleration for iOS
+    } else {
+      ffmpegCommand += "-c:v libx264 "; // Fallback to software encoding
+    }
+
+    // Complete the command
+    ffmpegCommand += `-c:a aac -f hls -hls_time 4 -hls_list_size 5 -hls_flags delete_segments "${manifestPath}"`;
+
+    console.log("FFmpeg command:", ffmpegCommand);
+
+    // Start FFmpeg process and return the session
+    return FFmpegKit.executeAsync(ffmpegCommand);
+  };
+
+  useEffect(() => {
+    const prepareStream = async () => {
+      if (currentlyPlaying?.url) {
+        try {
+          // Check if we already have a stream for this URL
+          const existingStream = await AsyncStorage.getItem(
+            currentlyPlaying.url
+          );
+          if (existingStream) {
+            setStreamUrl(existingStream);
+          } else {
+            const session = await startStreamingTranscode(currentlyPlaying.url);
+            setFfmpegSession(session);
+
+            const returnCode = await session.getReturnCode();
+
+            if (ReturnCode.isSuccess(returnCode)) {
+              console.log("Transcoding completed successfully");
+              const outputDir = `${
+                FileSystem.cacheDirectory
+              }stream_${Date.now()}`;
+              const manifestPath = `${outputDir}/stream.m3u8`;
+              setStreamUrl(manifestPath);
+              // Store the stream URL
+              await AsyncStorage.setItem(currentlyPlaying.url, manifestPath);
+            } else {
+              console.error("Transcoding failed");
+              // Handle failure (e.g., retry or show error message)
+            }
+          }
+        } catch (error) {
+          console.error("Error preparing stream:", error);
+        }
+      }
+    };
+
+    prepareStream();
+
+    return () => {
+      // Cleanup: cancel FFmpeg session when component unmounts
+      if (ffmpegSession) {
+        ffmpegSession.cancel();
+      }
+    };
+  }, [currentlyPlaying?.url]);
+
+  // Cleanup function
+  useEffect(() => {
+    return () => {
+      const cleanup = async () => {
+        if (streamUrl) {
+          try {
+            // Remove the stream URL from AsyncStorage
+            await AsyncStorage.removeItem(currentlyPlaying?.url || "");
+            // Delete the stream files
+            await FileSystem.deleteAsync(streamUrl.replace("file://", ""), {
+              idempotent: true,
+            });
+          } catch (error) {
+            console.error("Error cleaning up stream:", error);
+          }
+        }
+      };
+      cleanup();
+    };
+  }, [streamUrl, currentlyPlaying?.url]);
+
+  useEffect(() => {
+    if (segments.find((s) => s.includes("tabs"))) {
+      // Tab screen - i.e. home
+      aBottom.value = Platform.OS === "ios" ? 78 : 50;
+      aHeight.value = 80;
+      aPadding.value = 8;
+      aPaddingBottom.value = 8;
+      aPaddingInner.value = 8;
+    } else {
+      // Inside a normal screen
+      aBottom.value = Platform.OS === "ios" ? 0 : 0;
+      aHeight.value = Platform.OS === "ios" ? 110 : 80;
+      aPadding.value = Platform.OS === "ios" ? 0 : 8;
+      aPaddingInner.value = Platform.OS === "ios" ? 12 : 8;
+      aPaddingBottom.value = Platform.OS === "ios" ? 40 : 12;
+    }
+  }, [segments]);
+
+  const startPosition = useMemo(
+    () =>
+      currentlyPlaying?.item?.UserData?.PlaybackPositionTicks
+        ? Math.round(
+            currentlyPlaying?.item.UserData.PlaybackPositionTicks / 10000
+          )
+        : 0,
+    [currentlyPlaying?.item]
+  );
+
+  const backdropUrl = useMemo(
+    () =>
+      getBackdropUrl({
+        api,
+        item: currentlyPlaying?.item,
+        quality: 70,
+        width: 200,
+      }),
+    [currentlyPlaying?.item, api]
+  );
+
+  if (!api || !currentlyPlaying) return null;
+
+  return (
+    <Animated.View
+      style={[animatedOuterStyle]}
+      className="absolute left-0 w-screen"
+    >
+      <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"
+        }`}
+      >
+        <Animated.View
+          style={[
+            { padding: 8, borderTopLeftRadius: 12, borderTopEndRadius: 12 },
+            animatedInnerStyle,
+          ]}
+          className="h-full w-full  flex flex-row items-center justify-between overflow-hidden"
+        >
+          <View className="flex flex-row items-center space-x-4 shrink">
+            <TouchableOpacity
+              onPress={() => {
+                videoRef.current?.presentFullscreenPlayer();
+              }}
+              className={`relative h-full bg-neutral-800 rounded-md overflow-hidden
+                ${
+                  currentlyPlaying.item?.Type === "Audio"
+                    ? "aspect-square"
+                    : "aspect-video"
+                }
+                `}
+            >
+              {streamUrl && (
+                <Video
+                  ref={videoRef}
+                  allowsExternalPlayback
+                  style={{ width: "100%", height: "100%" }}
+                  playWhenInactive={true}
+                  playInBackground={true}
+                  showNotificationControls={true}
+                  ignoreSilentSwitch="ignore"
+                  controls={false}
+                  pictureInPicture={true}
+                  poster={
+                    backdropUrl && currentlyPlaying.item?.Type === "Audio"
+                      ? backdropUrl
+                      : undefined
+                  }
+                  debug={{
+                    enable: true,
+                    thread: true,
+                  }}
+                  paused={!isPlaying}
+                  onProgress={(e) => onProgress(e)}
+                  subtitleStyle={{
+                    fontSize: 16,
+                  }}
+                  source={{
+                    uri: streamUrl,
+                    isNetwork: true,
+                    startPosition,
+                    headers: getAuthHeaders(api),
+                  }}
+                  onBuffer={(e) =>
+                    e.isBuffering ? console.log("Buffering...") : null
+                  }
+                  onFullscreenPlayerDidDismiss={() => {}}
+                  onFullscreenPlayerDidPresent={() => {}}
+                  onPlaybackStateChanged={(e) => {
+                    if (e.isPlaying) {
+                      setIsPlaying(true);
+                    } else if (e.isSeeking) {
+                      return;
+                    } else {
+                      setIsPlaying(false);
+                    }
+                  }}
+                  progressUpdateInterval={2000}
+                  onError={(e) => {
+                    console.log(e);
+                    writeToLog(
+                      "ERROR",
+                      "Video playback error: " + JSON.stringify(e)
+                    );
+                    Alert.alert("Error", "Cannot play this video file.");
+                    setIsPlaying(false);
+                    // setCurrentlyPlaying(null);
+                  }}
+                  renderLoader={
+                    currentlyPlaying.item?.Type !== "Audio" && (
+                      <View className="flex flex-col items-center justify-center h-full">
+                        <Loader />
+                      </View>
+                    )
+                  }
+                />
+              )}
+            </TouchableOpacity>
+            <View className="shrink text-xs">
+              <TouchableOpacity
+                onPress={() => {
+                  if (currentlyPlaying.item?.Type === "Audio")
+                    router.push(`/albums/${currentlyPlaying.item?.AlbumId}`);
+                  else router.push(`/items/${currentlyPlaying.item?.Id}`);
+                }}
+              >
+                <Text>{currentlyPlaying.item?.Name}</Text>
+              </TouchableOpacity>
+              {currentlyPlaying.item?.Type === "Episode" && (
+                <TouchableOpacity
+                  onPress={() => {
+                    router.push(
+                      `/(auth)/series/${currentlyPlaying.item.SeriesId}`
+                    );
+                  }}
+                  className="text-xs opacity-50"
+                >
+                  <Text>{currentlyPlaying.item.SeriesName}</Text>
+                </TouchableOpacity>
+              )}
+              {currentlyPlaying.item?.Type === "Movie" && (
+                <View>
+                  <Text className="text-xs opacity-50">
+                    {currentlyPlaying.item?.ProductionYear}
+                  </Text>
+                </View>
+              )}
+              {currentlyPlaying.item?.Type === "Audio" && (
+                <TouchableOpacity
+                  onPress={() => {
+                    router.push(`/albums/${currentlyPlaying.item?.AlbumId}`);
+                  }}
+                >
+                  <Text className="text-xs opacity-50">
+                    {currentlyPlaying.item?.Album}
+                  </Text>
+                </TouchableOpacity>
+              )}
+            </View>
+          </View>
+          <View className="flex flex-row items-center space-x-2">
+            <TouchableOpacity
+              onPress={() => {
+                if (isPlaying) pauseVideo();
+                else playVideo();
+              }}
+              className="aspect-square rounded flex flex-col items-center justify-center p-2"
+            >
+              {isPlaying ? (
+                <Ionicons name="pause" size={24} color="white" />
+              ) : (
+                <Ionicons name="play" size={24} color="white" />
+              )}
+            </TouchableOpacity>
+            <TouchableOpacity
+              onPress={() => {
+                stopPlayback();
+              }}
+              className="aspect-square rounded flex flex-col items-center justify-center p-2"
+            >
+              <Ionicons name="close" size={24} color="white" />
+            </TouchableOpacity>
+          </View>
+        </Animated.View>
+      </BlurView>
+    </Animated.View>
+  );
+};

components/DownloadItem.tsx

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

components/FullScreenVideoPlayer.tsx

@@ -1,806 +0,0 @@
-import { useAdjacentEpisodes } from "@/hooks/useAdjacentEpisodes";
-import { useControlsVisibility } from "@/hooks/useControlsVisibility";
-import { useTrickplay } from "@/hooks/useTrickplay";
-import { apiAtom } from "@/providers/JellyfinProvider";
-import { usePlayback } from "@/providers/PlaybackProvider";
-import { useSettings } from "@/utils/atoms/settings";
-import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
-import { getAuthHeaders, isBaseItemDto } from "@/utils/jellyfin/jellyfin";
-import { writeToLog } from "@/utils/log";
-import orientationToOrientationLock from "@/utils/OrientationLockConverter";
-import { secondsToTicks } from "@/utils/secondsToTicks";
-import { runtimeTicksToSeconds } from "@/utils/time";
-import { Ionicons } from "@expo/vector-icons";
-import { useQuery } from "@tanstack/react-query";
-import { Image } from "expo-image";
-import { useRouter, useSegments } from "expo-router";
-import * as ScreenOrientation from "expo-screen-orientation";
-import { setStatusBarHidden, StatusBar } from "expo-status-bar";
-import { useAtom } from "jotai";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import {
-  Alert,
-  AppState,
-  AppStateStatus,
-  BackHandler,
-  Dimensions,
-  TouchableOpacity,
-  View,
-} from "react-native";
-import { Slider } from "react-native-awesome-slider";
-import "react-native-gesture-handler";
-import { Gesture, GestureDetector } from "react-native-gesture-handler";
-import Animated, {
-  runOnJS,
-  useAnimatedReaction,
-  useAnimatedStyle,
-  useSharedValue,
-  withTiming,
-} from "react-native-reanimated";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import Video, { OnProgressData } from "react-native-video";
-import { Text } from "./common/Text";
-import { itemRouter } from "./common/TouchableItemRouter";
-import { Loader } from "./Loader";
-import { useVideoPlayer, VideoView } from "expo-video";
-
-async function lockOrientation(orientation: ScreenOrientation.OrientationLock) {
-  await ScreenOrientation.lockAsync(orientation);
-}
-
-async function resetOrientation() {
-  await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.DEFAULT);
-}
-
-export const FullScreenVideoPlayer: React.FC = () => {
-  const {
-    currentlyPlaying,
-    pauseVideo,
-    playVideo,
-    stopPlayback,
-    setVolume,
-    setIsPlaying,
-    isPlaying,
-    onProgress,
-    isBuffering,
-    setIsBuffering,
-    player,
-  } = usePlayback();
-
-  const [settings] = useSettings();
-  const [api] = useAtom(apiAtom);
-  const insets = useSafeAreaInsets();
-  const segments = useSegments();
-  const router = useRouter();
-
-  const firstLoad = useRef(true);
-
-  const { trickPlayUrl, calculateTrickplayUrl, trickplayInfo } =
-    useTrickplay(currentlyPlaying);
-  const { previousItem, nextItem } = useAdjacentEpisodes({ currentlyPlaying });
-  const [orientation, setOrientation] = useState(
-    ScreenOrientation.OrientationLock.UNKNOWN
-  );
-
-  const opacity = useSharedValue(1);
-
-  const [ignoreSafeArea, setIgnoreSafeArea] = useState(false);
-  const from = useMemo(() => segments[2], [segments]);
-
-  const progress = useSharedValue(0);
-  const min = useSharedValue(0);
-  const max = useSharedValue(currentlyPlaying?.item.RunTimeTicks || 0);
-  const sliding = useRef(false);
-  const localIsBuffering = useSharedValue(true);
-  const cacheProgress = useSharedValue(0);
-  const [isStatusBarHidden, setIsStatusBarHidden] = useState(false);
-  const [progressState, _setProgressState] = useState(0);
-
-  const setProgressState = useCallback(
-    (value: number) => {
-      if (sliding.current === true) return;
-      _setProgressState(value);
-    },
-    [sliding.current]
-  );
-
-  useAnimatedReaction(
-    () => {
-      return progress.value;
-    },
-    (progress) => {
-      runOnJS(setProgressState)(progress);
-    }
-  );
-
-  const hideControls = useCallback(() => {
-    "worklet";
-    opacity.value = 0;
-  }, [opacity]);
-
-  const showControls = useCallback(() => {
-    "worklet";
-    opacity.value = 1;
-  }, [opacity]);
-
-  useEffect(() => {
-    const backAction = () => {
-      if (currentlyPlaying) {
-        Alert.alert("Hold on!", "Are you sure you want to exit?", [
-          {
-            text: "Cancel",
-            onPress: () => null,
-            style: "cancel",
-          },
-          { text: "Yes", onPress: () => stopPlayback() },
-        ]);
-
-        return true;
-      }
-      return false;
-    };
-
-    const backHandler = BackHandler.addEventListener(
-      "hardwareBackPress",
-      backAction
-    );
-
-    return () => backHandler.remove();
-  }, [currentlyPlaying]);
-
-  const { width: screenWidth, height: screenHeight } = Dimensions.get("window");
-
-  const poster = useMemo(() => {
-    if (!currentlyPlaying?.item || !api) return "";
-    return currentlyPlaying.item.Type === "Audio"
-      ? `${api.basePath}/Items/${currentlyPlaying.item.AlbumId}/Images/Primary?tag=${currentlyPlaying.item.AlbumPrimaryImageTag}&quality=90&maxHeight=200&maxWidth=200`
-      : getBackdropUrl({
-          api,
-          item: currentlyPlaying.item,
-          quality: 70,
-          width: 200,
-        });
-  }, [currentlyPlaying?.item, api]);
-
-  const videoSource = useMemo(() => {
-    if (!api || !currentlyPlaying || !poster) return null;
-    const startPosition = currentlyPlaying.item?.UserData?.PlaybackPositionTicks
-      ? Math.round(currentlyPlaying.item.UserData.PlaybackPositionTicks / 10000)
-      : 0;
-    return {
-      uri: currentlyPlaying.url,
-      isNetwork: true,
-      startPosition,
-      headers: getAuthHeaders(api),
-      metadata: {
-        artist: currentlyPlaying.item?.AlbumArtist ?? undefined,
-        title: currentlyPlaying.item?.Name || "Unknown",
-        description: currentlyPlaying.item?.Overview ?? undefined,
-        imageUri: poster,
-        subtitle: currentlyPlaying.item?.Album ?? undefined, // Change here
-      },
-    };
-  }, [currentlyPlaying, api, poster]);
-
-  useEffect(() => {
-    const subscription = player.addListener("playingChange", (isPlaying) => {
-      setIsPlaying(isPlaying);
-    });
-
-    const subscription2 = player.addListener("statusChange", (status) => {
-      if (status === "error") {
-        console.log("player.addListener ~ error");
-        Alert.alert("Error", "An error occurred while playing the video.");
-      }
-      if (status === "readyToPlay") {
-        console.log("player.addListener ~ readyToPlay");
-        localIsBuffering.value = false;
-        setIsBuffering(false);
-        if (firstLoad.current === true) {
-          playVideo();
-          firstLoad.current = false;
-        }
-      }
-      if (status === "loading") {
-        localIsBuffering.value = true;
-        setIsBuffering(true);
-      }
-      if (status === "idle") {
-        console.log("player.addListener ~ idle");
-      }
-    });
-
-    return () => {
-      subscription.remove();
-      subscription2.remove();
-    };
-  }, [player, setIsBuffering]);
-
-  useEffect(() => {
-    max.value = currentlyPlaying?.item.RunTimeTicks || 0;
-  }, [currentlyPlaying?.item.RunTimeTicks]);
-
-  useEffect(() => {
-    if (!player) return;
-
-    const interval = setInterval(async () => {
-      try {
-        if (sliding.current === true) return;
-        if (player.playing === true) {
-          const time = secondsToTicks(player.currentTime);
-          progress.value = time;
-        }
-      } catch (error) {
-        console.error("Error getting current time:", error);
-      }
-    }, 500);
-
-    return () => clearInterval(interval);
-  }, [player, sliding.current]);
-
-  useEffect(() => {
-    if (!currentlyPlaying) {
-      resetOrientation();
-      progress.value = 0;
-      min.value = 0;
-      max.value = 0;
-      cacheProgress.value = 0;
-      sliding.current = false;
-      hideControls();
-      setStatusBarHidden(false);
-    } else {
-      setStatusBarHidden(true);
-      lockOrientation(
-        settings?.defaultVideoOrientation ||
-          ScreenOrientation.OrientationLock.DEFAULT
-      );
-      progress.value =
-        currentlyPlaying.item?.UserData?.PlaybackPositionTicks || 0;
-      max.value = currentlyPlaying.item.RunTimeTicks || 0;
-      showControls();
-    }
-  }, [currentlyPlaying, settings]);
-
-  /**
-   * Event listener for orientation
-   */
-  useEffect(() => {
-    const subscription = ScreenOrientation.addOrientationChangeListener(
-      (event) => {
-        setOrientation(
-          orientationToOrientationLock(event.orientationInfo.orientation)
-        );
-      }
-    );
-
-    return () => {
-      subscription.remove();
-    };
-  }, []);
-
-  const isLandscape = useMemo(() => {
-    return orientation === ScreenOrientation.OrientationLock.LANDSCAPE_LEFT ||
-      orientation === ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT
-      ? true
-      : false;
-  }, [orientation]);
-
-  const animatedStyles = {
-    controls: useAnimatedStyle(() => ({
-      opacity: withTiming(opacity.value, { duration: 300 }),
-    })),
-    videoContainer: useAnimatedStyle(() => ({
-      opacity: withTiming(
-        opacity.value === 1 || localIsBuffering.value ? 0.5 : 1,
-        {
-          duration: 300,
-        }
-      ),
-    })),
-    loader: useAnimatedStyle(() => ({
-      opacity: withTiming(localIsBuffering.value === true ? 1 : 0, {
-        duration: 300,
-      }),
-    })),
-  };
-
-  const { data: introTimestamps } = useQuery({
-    queryKey: ["introTimestamps", currentlyPlaying?.item.Id],
-    queryFn: async () => {
-      if (!currentlyPlaying?.item.Id) {
-        console.log("No item id");
-        return null;
-      }
-
-      const res = await api?.axiosInstance.get(
-        `${api.basePath}/Episode/${currentlyPlaying.item.Id}/IntroTimestamps`,
-        {
-          headers: getAuthHeaders(api),
-        }
-      );
-
-      if (res?.status !== 200) {
-        return null;
-      }
-
-      return res?.data as {
-        EpisodeId: string;
-        HideSkipPromptAt: number;
-        IntroEnd: number;
-        IntroStart: number;
-        ShowSkipPromptAt: number;
-        Valid: boolean;
-      };
-    },
-    enabled: !!currentlyPlaying?.item.Id,
-  });
-
-  const animatedIntroSkipperStyle = useAnimatedStyle(() => {
-    const showButtonAt = secondsToTicks(introTimestamps?.ShowSkipPromptAt || 0);
-    const hideButtonAt = secondsToTicks(introTimestamps?.HideSkipPromptAt || 0);
-    const showButton =
-      progress.value > showButtonAt && progress.value < hideButtonAt;
-    return {
-      opacity: withTiming(
-        localIsBuffering.value === false && showButton && progress.value !== 0
-          ? 1
-          : 0,
-        {
-          duration: 300,
-        }
-      ),
-      bottom: withTiming(
-        opacity.value === 0 ? insets.bottom + 8 : isLandscape ? 85 : 140,
-        {
-          duration: 300,
-        }
-      ),
-    };
-  });
-
-  const toggleIgnoreSafeArea = useCallback(() => {
-    setIgnoreSafeArea((prev) => !prev);
-  }, []);
-
-  const handleToggleControlsPress = useCallback(() => {
-    if (opacity.value === 1) {
-      hideControls();
-    } else {
-      showControls();
-    }
-  }, [opacity.value, hideControls, showControls]);
-
-  const skipIntro = useCallback(async () => {
-    if (!introTimestamps || !player) return;
-    try {
-      player.currentTime = introTimestamps.IntroEnd;
-    } catch (error) {
-      writeToLog("ERROR", "Error skipping intro", error);
-    }
-  }, [introTimestamps]);
-
-  const handleVideoError = useCallback(
-    (e: any) => {
-      console.log(e);
-      writeToLog("ERROR", "Video playback error: " + JSON.stringify(e));
-      Alert.alert("Error", "Cannot play this video file.");
-      setIsPlaying(false);
-    },
-    [setIsPlaying]
-  );
-
-  const handleSkipBackward = useCallback(async () => {
-    try {
-      const curr = player.currentTime;
-      if (curr !== undefined) {
-        player.currentTime = Math.max(0, curr - 15);
-        showControls();
-      }
-    } catch (error) {
-      writeToLog("ERROR", "Error seeking video backwards", error);
-    }
-  }, [player, showControls]);
-
-  const handleSkipForward = useCallback(async () => {
-    try {
-      const curr = player.currentTime;
-      if (curr !== undefined) {
-        player.currentTime = Math.max(0, curr + 15);
-        showControls();
-      }
-    } catch (error) {
-      writeToLog("ERROR", "Error seeking video forwards", error);
-    }
-  }, [player, showControls]);
-
-  const handlePlayPause = useCallback(() => {
-    console.log("handlePlayPause");
-    if (isPlaying) pauseVideo();
-    else playVideo();
-    showControls();
-  }, [isPlaying, pauseVideo, playVideo, showControls]);
-
-  const handleSliderStart = useCallback(() => {
-    if (opacity.value === 0) return;
-    sliding.current = true;
-  }, []);
-
-  const handleSliderComplete = useCallback(
-    (val: number) => {
-      if (opacity.value === 0) return;
-      const tick = Math.floor(val);
-      player.currentTime = tick / 10000000;
-      sliding.current = false;
-    },
-    [player]
-  );
-
-  const handleSliderChange = useCallback(
-    (val: number) => {
-      if (opacity.value === 0) return;
-      sliding.current = true;
-      const tick = Math.floor(val);
-      progress.value = tick;
-      calculateTrickplayUrl(progress);
-    },
-    [progress, calculateTrickplayUrl, showControls]
-  );
-
-  const handleGoToPreviousItem = useCallback(() => {
-    if (!previousItem || !from) return;
-    const url = itemRouter(previousItem, from);
-    stopPlayback();
-    // @ts-ignore
-    router.push(url);
-  }, [previousItem, from, stopPlayback, router]);
-
-  const handleGoToNextItem = useCallback(() => {
-    if (!nextItem || !from) return;
-    const url = itemRouter(nextItem, from);
-    stopPlayback();
-    // @ts-ignore
-    router.push(url);
-  }, [nextItem, from, stopPlayback, router]);
-
-  const videoTap = Gesture.Tap().onBegin(() => {
-    runOnJS(handleToggleControlsPress)();
-  });
-
-  const toggleIgnoreSafeAreaGesture = Gesture.Tap()
-    .enabled(opacity.value !== 0)
-    .onStart(() => {
-      runOnJS(toggleIgnoreSafeArea)();
-    });
-
-  const playPauseGesture = Gesture.Tap()
-    .onBegin(() => {
-      console.log("playPauseGesture ~", opacity.value);
-    })
-    .onStart(() => {
-      runOnJS(handlePlayPause)();
-    })
-    .onFinalize(() => {
-      if (opacity.value === 0) opacity.value = 1;
-    });
-
-  const goToPreviouItemGesture = Gesture.Tap()
-    .enabled(opacity.value !== 0)
-    .onStart(() => {
-      runOnJS(handleGoToPreviousItem)();
-    });
-
-  const goToNextItemGesture = Gesture.Tap()
-    .enabled(opacity.value !== 0)
-    .onStart(() => {
-      runOnJS(handleGoToNextItem)();
-    });
-
-  const skipBackwardGesture = Gesture.Tap()
-    .enabled(opacity.value !== 0)
-    .onStart(() => {
-      runOnJS(handleSkipBackward)();
-    });
-
-  const skipForwardGesture = Gesture.Tap()
-    .enabled(opacity.value !== 0)
-    .onStart(() => {
-      runOnJS(handleSkipForward)();
-    });
-
-  const skipIntroGesture = Gesture.Tap().onStart(() => {
-    runOnJS(skipIntro)();
-  });
-
-  if (!api || !currentlyPlaying) return null;
-
-  return (
-    <View
-      style={{
-        width: screenWidth,
-        height: screenHeight,
-        backgroundColor: "black",
-      }}
-    >
-      <StatusBar hidden={isStatusBarHidden} />
-      <GestureDetector gesture={videoTap}>
-        <Animated.View
-          style={[
-            {
-              position: "absolute",
-              top: 0,
-              bottom: 0,
-              left: ignoreSafeArea ? 0 : insets.left,
-              right: ignoreSafeArea ? 0 : insets.right,
-              width: ignoreSafeArea
-                ? screenWidth
-                : screenWidth - (insets.left + insets.right),
-            },
-            animatedStyles.videoContainer,
-          ]}
-        >
-          <View
-            style={{
-              width: "100%",
-              height: "100%",
-            }}
-          >
-            {videoSource && (
-              <VideoView
-                style={{
-                  width: "100%",
-                  height: "100%",
-                }}
-                player={player}
-                allowsFullscreen
-                nativeControls={false}
-                allowsPictureInPicture
-                contentFit={ignoreSafeArea ? "cover" : "contain"}
-              />
-            )}
-          </View>
-        </Animated.View>
-      </GestureDetector>
-
-      <Animated.View
-        pointerEvents="none"
-        style={[
-          {
-            position: "absolute" as const,
-            top: 0,
-            bottom: 0,
-            left: ignoreSafeArea ? 0 : insets.left,
-            right: ignoreSafeArea ? 0 : insets.right,
-            width: ignoreSafeArea
-              ? screenWidth
-              : screenWidth - (insets.left + insets.right),
-            justifyContent: "center",
-            alignItems: "center",
-          },
-          animatedStyles.loader,
-        ]}
-      >
-        <Loader />
-      </Animated.View>
-
-      <Animated.View
-        style={[
-          {
-            position: "absolute",
-            bottom: insets.bottom + 8 * 8,
-            right: isLandscape ? insets.right + 32 : insets.right + 16,
-            zIndex: 10,
-          },
-          animatedIntroSkipperStyle,
-        ]}
-      >
-        <View className="flex flex-row items-center h-full">
-          <TouchableOpacity className="flex flex-col items-center justify-center px-3 py-2 bg-purple-600 rounded-full">
-            <GestureDetector gesture={skipIntroGesture}>
-              <Text className="font-semibold">Skip intro</Text>
-            </GestureDetector>
-          </TouchableOpacity>
-        </View>
-      </Animated.View>
-
-      <Animated.View
-        pointerEvents={opacity.value === 0 ? "none" : "auto"}
-        style={[
-          {
-            position: "absolute",
-            top: insets.top,
-            right: isLandscape ? insets.right + 32 : insets.right + 8,
-            height: 70,
-          },
-          animatedStyles.controls,
-        ]}
-      >
-        <View className="flex flex-row items-center h-full space-x-2 z-10">
-          <GestureDetector gesture={toggleIgnoreSafeAreaGesture}>
-            <TouchableOpacity className="aspect-square flex flex-col bg-neutral-800 rounded-xl items-center justify-center p-2">
-              <Ionicons
-                name={ignoreSafeArea ? "contract-outline" : "expand"}
-                size={24}
-                color="white"
-              />
-            </TouchableOpacity>
-          </GestureDetector>
-          <TouchableOpacity
-            onPress={() => {
-              stopPlayback();
-            }}
-            className="aspect-square bg-neutral-800 rounded-xl flex flex-col items-center justify-center p-2"
-          >
-            <Ionicons name="close" size={24} color="white" />
-          </TouchableOpacity>
-        </View>
-      </Animated.View>
-
-      <Animated.View
-        style={[
-          {
-            position: "absolute",
-            bottom: insets.bottom + 8,
-            left: isLandscape ? insets.left + 32 : insets.left + 16,
-            width: isLandscape
-              ? screenWidth - insets.left - insets.right - 64
-              : screenWidth - insets.left - insets.right - 32,
-          },
-          animatedStyles.controls,
-        ]}
-      >
-        <View className="shrink flex flex-col justify-center h-full mb-2">
-          <Text className="font-bold">{currentlyPlaying.item?.Name}</Text>
-          {currentlyPlaying.item?.Type === "Episode" && (
-            <Text className="opacity-50">
-              {currentlyPlaying.item.SeriesName}
-            </Text>
-          )}
-          {currentlyPlaying.item?.Type === "Movie" && (
-            <Text className="text-xs opacity-50">
-              {currentlyPlaying.item?.ProductionYear}
-            </Text>
-          )}
-          {currentlyPlaying.item?.Type === "Audio" && (
-            <Text className="text-xs opacity-50">
-              {currentlyPlaying.item?.Album}
-            </Text>
-          )}
-        </View>
-        <View
-          className={`flex ${
-            isLandscape
-              ? "flex-row space-x-6 py-2 px-4 rounded-full"
-              : "flex-col-reverse py-4 px-4 rounded-2xl"
-          } 
-          items-center  bg-neutral-800`}
-        >
-          <View className="flex flex-row items-center space-x-4">
-            <TouchableOpacity
-              style={{
-                opacity: !previousItem ? 0.5 : 1,
-              }}
-            >
-              <GestureDetector gesture={goToPreviouItemGesture}>
-                <Ionicons name="play-skip-back" size={24} color="white" />
-              </GestureDetector>
-            </TouchableOpacity>
-            <TouchableOpacity>
-              <GestureDetector gesture={skipBackwardGesture}>
-                <Ionicons
-                  name="refresh-outline"
-                  size={26}
-                  color="white"
-                  style={{
-                    transform: [{ scaleY: -1 }, { rotate: "180deg" }],
-                  }}
-                />
-              </GestureDetector>
-            </TouchableOpacity>
-            <TouchableOpacity>
-              <GestureDetector gesture={playPauseGesture}>
-                <Ionicons
-                  name={isPlaying ? "pause" : "play"}
-                  size={30}
-                  color="white"
-                />
-              </GestureDetector>
-            </TouchableOpacity>
-            <TouchableOpacity>
-              <GestureDetector gesture={skipForwardGesture}>
-                <Ionicons name="refresh-outline" size={26} color="white" />
-              </GestureDetector>
-            </TouchableOpacity>
-            <TouchableOpacity
-              style={{
-                opacity: !nextItem ? 0.5 : 1,
-              }}
-            >
-              <GestureDetector gesture={goToNextItemGesture}>
-                <Ionicons name="play-skip-forward" size={24} color="white" />
-              </GestureDetector>
-            </TouchableOpacity>
-          </View>
-          <View
-            className={`flex flex-col w-full shrink
-              ${""}
-            `}
-          >
-            <Slider
-              theme={{
-                maximumTrackTintColor: "rgba(255,255,255,0.2)",
-                minimumTrackTintColor: "#fff",
-                cacheTrackTintColor: "rgba(255,255,255,0.3)",
-                bubbleBackgroundColor: "#fff",
-                bubbleTextColor: "#000",
-                heartbeatColor: "#999",
-              }}
-              cache={cacheProgress}
-              onSlidingStart={handleSliderStart}
-              onSlidingComplete={handleSliderComplete}
-              onValueChange={handleSliderChange}
-              containerStyle={{
-                borderRadius: 100,
-              }}
-              renderBubble={() => {
-                if (!trickPlayUrl || !trickplayInfo) {
-                  return null;
-                }
-                const { x, y, url } = trickPlayUrl;
-
-                const tileWidth = 150;
-                const tileHeight = 150 / trickplayInfo.aspectRatio!;
-                return (
-                  <View
-                    style={{
-                      position: "absolute",
-                      bottom: 0,
-                      left: 0,
-                      width: tileWidth,
-                      height: tileHeight,
-                      marginLeft: -tileWidth / 4,
-                      marginTop: -tileHeight / 4 - 60,
-                      zIndex: 10,
-                    }}
-                    className=" bg-neutral-800 overflow-hidden"
-                  >
-                    <Image
-                      cachePolicy={"memory-disk"}
-                      style={{
-                        width: 150 * trickplayInfo?.data.TileWidth!,
-                        height:
-                          (150 / trickplayInfo.aspectRatio!) *
-                          trickplayInfo?.data.TileHeight!,
-                        transform: [
-                          { translateX: -x * tileWidth },
-                          { translateY: -y * tileHeight },
-                        ],
-                      }}
-                      source={{ uri: url }}
-                      contentFit="cover"
-                    />
-                  </View>
-                );
-              }}
-              sliderHeight={10}
-              thumbWidth={0}
-              progress={progress}
-              minimumValue={min}
-              maximumValue={max}
-            />
-            <View className="flex flex-row items-center justify-between mt-0.5">
-              <Text className="text-[12px] text-neutral-400">
-                {runtimeTicksToSeconds(progressState)}
-              </Text>
-              <Text className="text-[12px] text-neutral-400">
-                -
-                {runtimeTicksToSeconds(
-                  (currentlyPlaying?.item.RunTimeTicks || 0) - progressState
-                )}
-              </Text>
-            </View>
-          </View>
-        </View>
-      </Animated.View>
-    </View>
-  );
-};

components/ItemContent.tsx

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

components/ItemHeader.tsx

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

components/MediaSourceSelector.tsx

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

components/OverviewText.tsx

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

components/ParallaxPage.tsx

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

components/PlatformBlurView.tsx

@@ -1,35 +0,0 @@
-import { BlurView } from "expo-blur";
-import React from "react";
-import { Platform, View, ViewProps } from "react-native";
-interface Props extends ViewProps {
-  blurAmount?: number;
-  blurType?: "light" | "dark" | "xlight";
-}
-
-/**
- * BlurView for iOS and simple View for Android
- */
-export const PlatformBlurView: React.FC<Props> = ({
-  blurAmount = 100,
-  blurType = "light",
-  style,
-  children,
-  ...props
-}) => {
-  if (Platform.OS === "ios") {
-    return (
-      <BlurView style={style} intensity={blurAmount} {...props}>
-        {children}
-      </BlurView>
-    );
-  }
-
-  return (
-    <View
-      style={[{ backgroundColor: "rgba(50, 50, 50, 0.9)" }, style]}
-      {...props}
-    >
-      {children}
-    </View>
-  );
-};

components/PlayButton.tsx

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

components/PlayedStatus.tsx

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

components/Ratings.tsx

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

components/SimilarItems.tsx

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

components/SubtitleTrackSelector.tsx

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

components/common/HeaderBackButton.tsx

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

components/common/HorrizontalScroll.tsx

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

components/common/ItemImage.tsx

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

components/common/TouchableItemRouter.tsx

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

components/downloads/EpisodeCard.tsx

@@ -23,14 +23,14 @@ interface EpisodeCardProps {
 export const EpisodeCard: React.FC<EpisodeCardProps> = ({ item }) => {
   const { deleteFile } = useFiles();
 
-  const { startDownloadedFilePlayback } = usePlayback();
+  const { setCurrentlyPlayingState } = usePlayback();
 
   const handleOpenFile = useCallback(async () => {
-    startDownloadedFilePlayback({
+    setCurrentlyPlayingState({
       item,
       url: `${FileSystem.documentDirectory}/${item.Id}.mp4`,
     });
-  }, [item, startDownloadedFilePlayback]);
+  }, [item, setCurrentlyPlayingState]);
 
   /**
    * Handles deleting the file with haptic feedback.

components/downloads/MovieCard.tsx

@@ -26,14 +26,14 @@ export const MovieCard: React.FC<MovieCardProps> = ({ item }) => {
   const { deleteFile } = useFiles();
   const [settings] = useSettings();
 
-  const { startDownloadedFilePlayback } = usePlayback();
+  const { setCurrentlyPlayingState } = usePlayback();
 
   const handleOpenFile = useCallback(() => {
-    startDownloadedFilePlayback({
+    setCurrentlyPlayingState({
       item,
       url: `${FileSystem.documentDirectory}/${item.Id}.mp4`,
     });
-  }, [item, startDownloadedFilePlayback]);
+  }, [item, setCurrentlyPlayingState]);
 
   /**
    * Handles deleting the file with haptic feedback.

components/downloads/SeriesCard.tsx

@@ -25,7 +25,7 @@ export const SeriesCard: React.FC<{ items: BaseItemDto[] }> = ({ items }) => {
   return (
     <View>
       <View className="flex flex-row items-center justify-between">
-        <Text className="text-2xl font-bold shrink">{items[0].SeriesName}</Text>
+        <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>

components/filters/FilterButton.tsx

@@ -23,7 +23,7 @@ export const FilterButton = <T,>({
   queryFn,
   queryKey,
   set,
-  values, // selected values
+  values,
   title,
   renderItemLabel,
   searchFilter,

components/filters/FilterSheet.tsx

@@ -186,7 +186,7 @@ export const FilterSheet = <T,>({
                   className=" bg-neutral-800 px-4 py-3 flex flex-row items-center justify-between"
                 >
                   <Text>{renderItemLabel(item)}</Text>
-                  {values.some((i) => i === item) ? (
+                  {values.includes(item) ? (
                     <Ionicons name="radio-button-on" size={24} color="white" />
                   ) : (
                     <Ionicons name="radio-button-off" size={24} color="white" />

components/filters/_SortButton.tsx

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

components/home/LargeMovieCarousel.tsx

@@ -4,29 +4,25 @@ 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 } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { Image } from "expo-image";
+import { useRouter } from "expo-router";
 import { useAtom } from "jotai";
-import React, { useCallback, useMemo } from "react";
-import { Dimensions, TouchableOpacity, View, ViewProps } from "react-native";
-import Animated, {
-  runOnJS,
-  useSharedValue,
-  withTiming,
-} from "react-native-reanimated";
+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 { itemRouter, TouchableItemRouter } from "../common/TouchableItemRouter";
+import { TouchableItemRouter } from "../common/TouchableItemRouter";
 import { Loader } from "../Loader";
-import { Gesture, GestureDetector } from "react-native-gesture-handler";
-import { useRouter, useSegments } from "expo-router";
-import * as Haptics from "expo-haptics";
 
 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);
@@ -51,7 +47,7 @@ export const LargeMovieCarousel: React.FC<Props> = ({ ...props }) => {
       return response.data.Items?.[0].Id || null;
     },
     enabled: !!api && !!user?.Id && settings?.usePopularPlugin === true,
-    staleTime: 60 * 1000,
+    staleTime: 0,
   });
 
   const onPressPagination = (index: number) => {
@@ -79,7 +75,7 @@ export const LargeMovieCarousel: React.FC<Props> = ({ ...props }) => {
       return response.data.Items || [];
     },
     enabled: !!api && !!user?.Id && !!sf_carousel,
-    staleTime: 60 * 1000,
+    staleTime: 0,
   });
 
   const width = Dimensions.get("screen").width;
@@ -126,7 +122,7 @@ export const LargeMovieCarousel: React.FC<Props> = ({ ...props }) => {
 
 const RenderItem: React.FC<{ item: BaseItemDto }> = ({ item }) => {
   const [api] = useAtom(apiAtom);
-  const router = useRouter();
+
   const screenWidth = Dimensions.get("screen").width;
 
   const uri = useMemo(() => {
@@ -145,41 +141,11 @@ const RenderItem: React.FC<{ item: BaseItemDto }> = ({ item }) => {
     return getLogoImageUrlById({ api, item, height: 100 });
   }, [item]);
 
-  const segments = useSegments();
-  const from = segments[2];
-
-  const opacity = useSharedValue(1);
-
-  const handleRoute = useCallback(() => {
-    if (!from) return;
-    const url = itemRouter(item, from);
-    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
-    // @ts-ignore
-    if (url) router.push(url);
-  }, [item, from]);
-
-  const tap = Gesture.Tap()
-    .maxDuration(2000)
-    .onBegin(() => {
-      opacity.value = withTiming(0.5, { duration: 100 });
-    })
-    .onEnd(() => {
-      runOnJS(handleRoute)();
-    })
-    .onFinalize(() => {
-      opacity.value = withTiming(1, { duration: 100 });
-    });
-
   if (!uri || !logoUri) return null;
 
   return (
-    <GestureDetector gesture={tap}>
-      <Animated.View
-        style={{
-          opacity: opacity,
-        }}
-        className="px-4"
-      >
+    <TouchableItemRouter item={item}>
+      <View className="px-4">
         <View className="relative flex justify-center rounded-2xl overflow-hidden border border-neutral-800">
           <Image
             source={{
@@ -205,7 +171,7 @@ const RenderItem: React.FC<{ item: BaseItemDto }> = ({ item }) => {
             />
           </View>
         </View>
-      </Animated.View>
-    </GestureDetector>
+      </View>
+    </TouchableItemRouter>
   );
 };

components/home/ScrollingCollectionList.tsx

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

components/library/LibraryItemCard.tsx

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

components/medialists/MediaListSection.tsx

@@ -12,38 +12,22 @@ import { Text } from "../common/Text";
 import { TouchableItemRouter } from "../common/TouchableItemRouter";
 import { ItemCardText } from "../ItemCardText";
 import MoviePoster from "../posters/MoviePoster";
-import {
-  type QueryKey,
-  type QueryFunction,
-  useQuery,
-} from "@tanstack/react-query";
 
 interface Props extends ViewProps {
-  queryKey: QueryKey;
-  queryFn: QueryFunction<BaseItemDto>;
+  collection: BaseItemDto;
 }
 
-export const MediaListSection: React.FC<Props> = ({
-  queryFn,
-  queryKey,
-  ...props
-}) => {
+export const MediaListSection: React.FC<Props> = ({ collection, ...props }) => {
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
 
-  const { data: collection, isLoading } = useQuery({
-    queryKey,
-    queryFn,
-    staleTime: 60 * 1000,
-  });
-
   const fetchItems = useCallback(
     async ({
       pageParam,
     }: {
       pageParam: number;
     }): Promise<BaseItemDtoQueryResult | null> => {
-      if (!api || !user?.Id || !collection) return null;
+      if (!api || !user?.Id) return null;
 
       const response = await getItemsApi(api).getItems({
         userId: user.Id,
@@ -54,7 +38,7 @@ export const MediaListSection: React.FC<Props> = ({
 
       return response.data;
     },
-    [api, user?.Id, collection?.Id]
+    [api, user?.Id, collection.Id]
   );
 
   if (!collection) return null;

components/movies/MoviesTitleHeader.tsx

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

components/music/SongsListItem.tsx

@@ -71,10 +71,7 @@ export const SongsListItem: React.FC<Props> = ({
   };
 
   const play = async (type: "device" | "cast") => {
-    if (!user?.Id || !api || !item.Id) {
-      console.warn("No user, api or item", user, api, item.Id);
-      return;
-    }
+    if (!user?.Id || !api || !item.Id) return;
 
     const response = await getMediaInfoApi(api!).getPlaybackInfo({
       itemId: item?.Id,
@@ -90,13 +87,9 @@ export const SongsListItem: React.FC<Props> = ({
       startTimeTicks: item?.UserData?.PlaybackPositionTicks || 0,
       sessionData,
       deviceProfile: castDevice?.deviceId ? chromecastProfile : ios,
-      mediaSourceId: item.Id,
     });
 
-    if (!url || !item) {
-      console.warn("No url or item", url, item.Id);
-      return;
-    }
+    if (!url || !item) return;
 
     if (type === "cast" && client) {
       await CastContext.getPlayServicesState().then((state) => {
@@ -118,7 +111,6 @@ export const SongsListItem: React.FC<Props> = ({
         }
       });
     } else {
-      console.log("Playing on device", url, item.Id);
       setCurrentlyPlayingState({
         item,
         url,

components/posters/EpisodePoster.tsx

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

components/posters/ItemPoster.tsx

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

components/posters/MoviePoster.tsx

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

components/posters/SeriesPoster.tsx

@@ -15,16 +15,14 @@ type MoviePosterProps = {
 const SeriesPoster: React.FC<MoviePosterProps> = ({ item }) => {
   const [api] = useAtom(apiAtom);
 
-  const url = useMemo(() => {
-    if (item.Type === "Episode") {
-      return `${api?.basePath}/Items/${item.SeriesId}/Images/Primary?fillHeight=389&quality=80&tag=${item.SeriesPrimaryImageTag}`;
-    }
-    return getPrimaryImageUrl({
-      api,
-      item,
-      width: 300,
-    });
-  }, [item]);
+  const url = useMemo(
+    () =>
+      getPrimaryImageUrl({
+        api,
+        item,
+      }),
+    [item]
+  );
 
   const blurhash = useMemo(() => {
     const key = item.ImageTags?.["Primary"] as string;

components/series/CastAndCrew.tsx

@@ -1,31 +1,30 @@
-import { apiAtom } from "@/providers/JellyfinProvider";
-import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
 import {
   BaseItemDto,
   BaseItemPerson,
 } from "@jellyfin/sdk/lib/generated-client/models";
-import { router } from "expo-router";
-import { useAtom } from "jotai";
 import React from "react";
-import { TouchableOpacity, View, ViewProps } from "react-native";
+import { Linking, TouchableOpacity, View } from "react-native";
 import { HorizontalScroll } from "../common/HorrizontalScroll";
 import { Text } from "../common/Text";
 import Poster from "../posters/Poster";
+import { useAtom } from "jotai";
+import { apiAtom } from "@/providers/JellyfinProvider";
+import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
+import { router, usePathname } from "expo-router";
+import { useSettings } from "@/utils/atoms/settings";
 
-interface Props extends ViewProps {
-  item?: BaseItemDto | null;
-  loading?: boolean;
-}
-
-export const CastAndCrew: React.FC<Props> = ({ item, loading, ...props }) => {
+export const CastAndCrew = ({ item }: { item: BaseItemDto }) => {
   const [api] = useAtom(apiAtom);
 
+  const [settings] = useSettings();
+
+  const pathname = usePathname();
+
   return (
-    <View {...props} className="flex flex-col">
+    <View>
       <Text className="text-lg font-bold mb-2 px-4">Cast & Crew</Text>
-      <HorizontalScroll
-        loading={loading}
-        data={item?.People || []}
+      <HorizontalScroll<NonNullable<BaseItemPerson>>
+        data={item.People}
         renderItem={(item, index) => (
           <TouchableOpacity
             onPress={() => {

components/series/CurrentSeries.tsx

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

components/series/EpisodeTitleHeader.tsx

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

components/series/NextEpisodeButton.tsx

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

components/series/NextUp.tsx

@@ -10,7 +10,6 @@ import { HorizontalScroll } from "../common/HorrizontalScroll";
 import { Text } from "../common/Text";
 import ContinueWatchingPoster from "../ContinueWatchingPoster";
 import { ItemCardText } from "../ItemCardText";
-import { TouchableItemRouter } from "../common/TouchableItemRouter";
 
 export const NextUp: React.FC<{ seriesId: string }> = ({ seriesId }) => {
   const [user] = useAtom(userAtom);
@@ -35,7 +34,7 @@ export const NextUp: React.FC<{ seriesId: string }> = ({ seriesId }) => {
 
   if (!items?.length)
     return (
-      <View className="px-4">
+      <View>
         <Text className="text-lg font-bold mb-2">Next up</Text>
         <Text className="opacity-50">No items to display</Text>
       </View>
@@ -44,17 +43,19 @@ export const NextUp: React.FC<{ seriesId: string }> = ({ seriesId }) => {
   return (
     <View>
       <Text className="text-lg font-bold mb-2 px-4">Next up</Text>
-      <HorizontalScroll
+      <HorizontalScroll<BaseItemDto>
         data={items}
         renderItem={(item, index) => (
-          <TouchableItemRouter
-            item={item}
+          <TouchableOpacity
+            onPress={() => {
+              router.push(`/(auth)/items/${item.Id}`);
+            }}
             key={item.Id}
             className="flex flex-col w-44"
           >
-            <ContinueWatchingPoster item={item} useEpisodePoster />
+            <ContinueWatchingPoster item={item} />
             <ItemCardText item={item} />
-          </TouchableItemRouter>
+          </TouchableOpacity>
         )}
       />
     </View>

components/series/SeasonEpisodesCarousel.tsx

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

components/series/SeasonPicker.tsx

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

components/series/SeriesTitleHeader.tsx

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

components/settings/MediaToggles.tsx

@@ -1,125 +0,0 @@
-import { useSettings } from "@/utils/atoms/settings";
-import { TouchableOpacity, View, ViewProps } from "react-native";
-import * as DropdownMenu from "zeego/dropdown-menu";
-import { Text } from "../common/Text";
-import { LANGUAGES } from "@/constants/Languages";
-
-interface Props extends ViewProps {}
-
-export const MediaToggles: React.FC<Props> = ({ ...props }) => {
-  const [settings, updateSettings] = useSettings();
-
-  return (
-    <View>
-      <Text className="text-lg font-bold mb-2">Media</Text>
-      <View className="flex flex-col rounded-xl mb-4 overflow-hidden  divide-y-2 divide-solid divide-neutral-800">
-        <View
-          className={`
-              flex flex-row items-center space-x-2 justify-between bg-neutral-900 p-4
-            `}
-        >
-          <View className="flex flex-col shrink">
-            <Text className="font-semibold">Audio language</Text>
-            <Text className="text-xs opacity-50">
-              Choose a default audio language.
-            </Text>
-          </View>
-          <DropdownMenu.Root>
-            <DropdownMenu.Trigger>
-              <TouchableOpacity className="bg-neutral-800 rounded-lg border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between">
-                <Text>{settings?.defaultAudioLanguage?.label || "None"}</Text>
-              </TouchableOpacity>
-            </DropdownMenu.Trigger>
-            <DropdownMenu.Content
-              loop={true}
-              side="bottom"
-              align="start"
-              alignOffset={0}
-              avoidCollisions={true}
-              collisionPadding={8}
-              sideOffset={8}
-            >
-              <DropdownMenu.Label>Languages</DropdownMenu.Label>
-              <DropdownMenu.Item
-                key={"none-audio"}
-                onSelect={() => {
-                  updateSettings({
-                    defaultAudioLanguage: null,
-                  });
-                }}
-              >
-                <DropdownMenu.ItemTitle>None</DropdownMenu.ItemTitle>
-              </DropdownMenu.Item>
-              {LANGUAGES.map((l) => (
-                <DropdownMenu.Item
-                  key={l.value}
-                  onSelect={() => {
-                    updateSettings({
-                      defaultAudioLanguage: l,
-                    });
-                  }}
-                >
-                  <DropdownMenu.ItemTitle>{l.label}</DropdownMenu.ItemTitle>
-                </DropdownMenu.Item>
-              ))}
-            </DropdownMenu.Content>
-          </DropdownMenu.Root>
-        </View>
-        <View
-          className={`
-              flex flex-row items-center space-x-2 justify-between bg-neutral-900 p-4
-            `}
-        >
-          <View className="flex flex-col shrink">
-            <Text className="font-semibold">Subtitle language</Text>
-            <Text className="text-xs opacity-50">
-              Choose a default subtitle language.
-            </Text>
-          </View>
-          <DropdownMenu.Root>
-            <DropdownMenu.Trigger>
-              <TouchableOpacity className="bg-neutral-800 rounded-lg border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between">
-                <Text>
-                  {settings?.defaultSubtitleLanguage?.label || "None"}
-                </Text>
-              </TouchableOpacity>
-            </DropdownMenu.Trigger>
-            <DropdownMenu.Content
-              loop={true}
-              side="bottom"
-              align="start"
-              alignOffset={0}
-              avoidCollisions={true}
-              collisionPadding={8}
-              sideOffset={8}
-            >
-              <DropdownMenu.Label>Languages</DropdownMenu.Label>
-              <DropdownMenu.Item
-                key={"none-subs"}
-                onSelect={() => {
-                  updateSettings({
-                    defaultSubtitleLanguage: null,
-                  });
-                }}
-              >
-                <DropdownMenu.ItemTitle>None</DropdownMenu.ItemTitle>
-              </DropdownMenu.Item>
-              {LANGUAGES.map((l) => (
-                <DropdownMenu.Item
-                  key={l.value}
-                  onSelect={() => {
-                    updateSettings({
-                      defaultSubtitleLanguage: l,
-                    });
-                  }}
-                >
-                  <DropdownMenu.ItemTitle>{l.label}</DropdownMenu.ItemTitle>
-                </DropdownMenu.Item>
-              ))}
-            </DropdownMenu.Content>
-          </DropdownMenu.Root>
-        </View>
-      </View>
-    </View>
-  );
-};

components/settings/SettingToggles.tsx

@@ -1,32 +1,17 @@
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import {
-  DefaultLanguageOption,
-  DownloadOptions,
-  ScreenOrientationEnum,
-  useSettings,
-} from "@/utils/atoms/settings";
+import { DownloadOptions, useSettings } from "@/utils/atoms/settings";
 import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useAtom } from "jotai";
-import {
-  Linking,
-  Switch,
-  TouchableOpacity,
-  View,
-  ViewProps,
-} from "react-native";
+import { Linking, Switch, TouchableOpacity, View } from "react-native";
 import * as DropdownMenu from "zeego/dropdown-menu";
 import { Text } from "../common/Text";
 import { Loader } from "../Loader";
 import { Input } from "../common/Input";
 import { useState } from "react";
 import { Button } from "../Button";
-import { MediaToggles } from "./MediaToggles";
-import * as ScreenOrientation from "expo-screen-orientation";
 
-interface Props extends ViewProps {}
-
-export const SettingToggles: React.FC<Props> = ({ ...props }) => {
+export const SettingToggles: React.FC = () => {
   const [settings, updateSettings] = useSettings();
 
   const [api] = useAtom(apiAtom);
@@ -58,387 +43,315 @@ export const SettingToggles: React.FC<Props> = ({ ...props }) => {
     staleTime: 0,
   });
 
-  if (!settings) return null;
-
   return (
-    <View {...props}>
-      {/* <View>
-        <Text className="text-lg font-bold mb-2">Look and feel</Text>
-        <View className="flex flex-col rounded-xl mb-4 overflow-hidden divide-y-2 divide-solid divide-neutral-800 opacity-50">
-          <View className="flex flex-row items-center justify-between bg-neutral-900 p-4">
-            <View className="shrink">
-              <Text className="font-semibold">Coming soon</Text>
-              <Text className="text-xs opacity-50 max-w-[90%]">
-                Options for changing the look and feel of the app.
-              </Text>
-            </View>
-            <Switch disabled />
-          </View>
+    <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">
+        <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>
-      </View> */}
-
-      <MediaToggles />
-
-      <View>
-        <Text className="text-lg font-bold mb-2">Other</Text>
-
-        <View className="flex flex-col rounded-xl overflow-hidden  divide-y-2 divide-solid divide-neutral-800">
-          <View className="flex flex-row items-center justify-between bg-neutral-900 p-4">
-            <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 space-x-2 items-center justify-between bg-neutral-900 p-4">
-            <View className="flex flex-col shrink">
-              <Text className="font-semibold">Use external player (VLC)</Text>
-              <Text className="text-xs opacity-50 shrink">
-                Open all videos in VLC instead of the default player. This
-                requries VLC to be installed on the phone.
-              </Text>
-            </View>
-            <Switch
-              value={settings.openInVLC}
-              onValueChange={(value) => {
-                updateSettings({ openInVLC: value, forceDirectPlay: value });
-              }}
-            />
-          </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" : ""}
-      `}
+        <Switch
+          value={settings?.autoRotate}
+          onValueChange={(value) => updateSettings({ autoRotate: value })}
+        />
+      </View>
+      <View
+        className={`
+            flex flex-row items-center space-x-2 justify-between bg-neutral-900 p-4
+          `}
+      >
+        <View className="flex flex-col shrink">
+          <Text className="font-semibold">Download quality</Text>
+          <Text className="text-xs opacity-50">
+            Choose the search engine you want to use.
+          </Text>
+        </View>
+        <DropdownMenu.Root>
+          <DropdownMenu.Trigger>
+            <TouchableOpacity className="bg-neutral-800 rounded-lg border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between">
+              <Text>{settings?.downloadQuality?.label}</Text>
+            </TouchableOpacity>
+          </DropdownMenu.Trigger>
+          <DropdownMenu.Content
+            loop={true}
+            side="bottom"
+            align="start"
+            alignOffset={0}
+            avoidCollisions={true}
+            collisionPadding={8}
+            sideOffset={8}
           >
-            <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>
-            <DropdownMenu.Root>
-              <DropdownMenu.Trigger>
-                <TouchableOpacity className="bg-neutral-800 rounded-lg border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between">
-                  <Text>{settings.deviceProfile}</Text>
-                </TouchableOpacity>
-              </DropdownMenu.Trigger>
-              <DropdownMenu.Content
-                loop={true}
-                side="bottom"
-                align="start"
-                alignOffset={0}
-                avoidCollisions={true}
-                collisionPadding={8}
-                sideOffset={8}
+            <DropdownMenu.Label>Quality</DropdownMenu.Label>
+            {DownloadOptions.map((option) => (
+              <DropdownMenu.Item
+                key={option.value}
+                onSelect={() => {
+                  updateSettings({ downloadQuality: option });
+                }}
               >
-                <DropdownMenu.Label>Profiles</DropdownMenu.Label>
-                <DropdownMenu.Item
-                  key="1"
-                  onSelect={() => {
-                    updateSettings({ deviceProfile: "Expo" });
-                  }}
-                >
-                  <DropdownMenu.ItemTitle>Expo</DropdownMenu.ItemTitle>
-                </DropdownMenu.Item>
-                <DropdownMenu.Item
-                  key="2"
-                  onSelect={() => {
-                    updateSettings({ deviceProfile: "Native" });
-                  }}
-                >
-                  <DropdownMenu.ItemTitle>Native</DropdownMenu.ItemTitle>
-                </DropdownMenu.Item>
-                <DropdownMenu.Item
-                  key="3"
-                  onSelect={() => {
-                    updateSettings({ deviceProfile: "Old" });
-                  }}
-                >
-                  <DropdownMenu.ItemTitle>Old</DropdownMenu.ItemTitle>
-                </DropdownMenu.Item>
-              </DropdownMenu.Content>
-            </DropdownMenu.Root>
-          </View>
-          <View className="flex flex-col">
-            <View
-              className={`
-                flex flex-row items-center space-x-2 justify-between bg-neutral-900 p-4
-              `}
-            >
-              <View className="flex flex-col shrink">
-                <Text className="font-semibold">Video orientation</Text>
-                <Text className="text-xs opacity-50">
-                  Set the full screen video player orientation.
-                </Text>
-              </View>
-              <DropdownMenu.Root>
-                <DropdownMenu.Trigger>
-                  <TouchableOpacity className="bg-neutral-800 rounded-lg border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between">
-                    <Text>
-                      {ScreenOrientationEnum[settings.defaultVideoOrientation]}
-                    </Text>
-                  </TouchableOpacity>
-                </DropdownMenu.Trigger>
-                <DropdownMenu.Content
-                  loop={true}
-                  side="bottom"
-                  align="start"
-                  alignOffset={0}
-                  avoidCollisions={true}
-                  collisionPadding={8}
-                  sideOffset={8}
-                >
-                  <DropdownMenu.Label>Orientation</DropdownMenu.Label>
-                  <DropdownMenu.Item
-                    key="1"
-                    onSelect={() => {
-                      updateSettings({
-                        defaultVideoOrientation:
-                          ScreenOrientation.OrientationLock.DEFAULT,
-                      });
-                    }}
-                  >
-                    <DropdownMenu.ItemTitle>
-                      {
-                        ScreenOrientationEnum[
-                          ScreenOrientation.OrientationLock.DEFAULT
-                        ]
-                      }
-                    </DropdownMenu.ItemTitle>
-                  </DropdownMenu.Item>
-                  <DropdownMenu.Item
-                    key="2"
-                    onSelect={() => {
-                      updateSettings({
-                        defaultVideoOrientation:
-                          ScreenOrientation.OrientationLock.PORTRAIT_UP,
-                      });
-                    }}
-                  >
-                    <DropdownMenu.ItemTitle>
-                      {
-                        ScreenOrientationEnum[
-                          ScreenOrientation.OrientationLock.PORTRAIT_UP
-                        ]
-                      }
-                    </DropdownMenu.ItemTitle>
-                  </DropdownMenu.Item>
-                  <DropdownMenu.Item
-                    key="3"
-                    onSelect={() => {
-                      updateSettings({
-                        defaultVideoOrientation:
-                          ScreenOrientation.OrientationLock.LANDSCAPE_LEFT,
-                      });
-                    }}
-                  >
-                    <DropdownMenu.ItemTitle>
-                      {
-                        ScreenOrientationEnum[
-                          ScreenOrientation.OrientationLock.LANDSCAPE_LEFT
-                        ]
-                      }
-                    </DropdownMenu.ItemTitle>
-                  </DropdownMenu.Item>
-                  <DropdownMenu.Item
-                    key="4"
-                    onSelect={() => {
-                      updateSettings({
-                        defaultVideoOrientation:
-                          ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT,
-                      });
-                    }}
-                  >
-                    <DropdownMenu.ItemTitle>
-                      {
-                        ScreenOrientationEnum[
-                          ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT
-                        ]
-                      }
-                    </DropdownMenu.ItemTitle>
-                  </DropdownMenu.Item>
-                </DropdownMenu.Content>
-              </DropdownMenu.Root>
-            </View>
-            <View
-              className={`
-                flex flex-row items-center space-x-2 justify-between bg-neutral-900 p-4
-              `}
-            >
-              <View className="flex flex-col shrink">
-                <Text className="font-semibold">Search engine</Text>
-                <Text className="text-xs opacity-50">
-                  Choose the search engine you want to use.
-                </Text>
-              </View>
-              <DropdownMenu.Root>
-                <DropdownMenu.Trigger>
-                  <TouchableOpacity className="bg-neutral-800 rounded-lg border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between">
-                    <Text>{settings.searchEngine}</Text>
-                  </TouchableOpacity>
-                </DropdownMenu.Trigger>
-                <DropdownMenu.Content
-                  loop={true}
-                  side="bottom"
-                  align="start"
-                  alignOffset={0}
-                  avoidCollisions={true}
-                  collisionPadding={8}
-                  sideOffset={8}
-                >
-                  <DropdownMenu.Label>Profiles</DropdownMenu.Label>
-                  <DropdownMenu.Item
-                    key="1"
-                    onSelect={() => {
-                      updateSettings({ searchEngine: "Jellyfin" });
-                      queryClient.invalidateQueries({ queryKey: ["search"] });
-                    }}
-                  >
-                    <DropdownMenu.ItemTitle>Jellyfin</DropdownMenu.ItemTitle>
-                  </DropdownMenu.Item>
-                  <DropdownMenu.Item
-                    key="2"
-                    onSelect={() => {
-                      updateSettings({ searchEngine: "Marlin" });
-                      queryClient.invalidateQueries({ queryKey: ["search"] });
-                    }}
-                  >
-                    <DropdownMenu.ItemTitle>Marlin</DropdownMenu.ItemTitle>
-                  </DropdownMenu.Item>
-                </DropdownMenu.Content>
-              </DropdownMenu.Root>
-            </View>
-            {settings.searchEngine === "Marlin" && (
-              <View className="flex flex-col bg-neutral-900 px-4 pb-4">
-                <>
-                  <View className="flex flex-row items-center space-x-2">
-                    <View className="grow">
-                      <Input
-                        placeholder="Marlin Server URL..."
-                        defaultValue={settings.marlinServerUrl}
-                        value={marlinUrl}
-                        keyboardType="url"
-                        returnKeyType="done"
-                        autoCapitalize="none"
-                        textContentType="URL"
-                        onChangeText={(text) => setMarlinUrl(text)}
-                      />
-                    </View>
-                    <Button
-                      color="purple"
-                      className="shrink w-16 h-12"
-                      onPress={() => {
-                        updateSettings({ marlinServerUrl: marlinUrl });
-                      }}
-                    >
-                      Save
-                    </Button>
-                  </View>
+                <DropdownMenu.ItemTitle>{option.label}</DropdownMenu.ItemTitle>
+              </DropdownMenu.Item>
+            ))}
+          </DropdownMenu.Content>
+        </DropdownMenu.Root>
+      </View>
+      <View className="flex flex-row items-center justify-between bg-neutral-900 p-4">
+        <View className="shrink">
+          <Text className="font-semibold">Start videos in fullscreen</Text>
+          <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) =>
+            updateSettings({ openFullScreenVideoPlayerByDefault: value })
+          }
+        />
+      </View>
 
-                  <Text className="text-neutral-500 mt-2">
-                    {settings.marlinServerUrl}
-                  </Text>
-                </>
+      <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">Use external player (VLC)</Text>
+          <Text className="text-xs opacity-50 shrink">
+            Open all videos in VLC instead of the default player. This requries
+            VLC to be installed on the phone.
+          </Text>
+        </View>
+        <Switch
+          value={settings?.openInVLC}
+          onValueChange={(value) => {
+            updateSettings({ openInVLC: value, forceDirectPlay: value });
+          }}
+        />
+      </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>
+        <DropdownMenu.Root>
+          <DropdownMenu.Trigger>
+            <TouchableOpacity className="bg-neutral-800 rounded-lg border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between">
+              <Text>{settings?.deviceProfile}</Text>
+            </TouchableOpacity>
+          </DropdownMenu.Trigger>
+          <DropdownMenu.Content
+            loop={true}
+            side="bottom"
+            align="start"
+            alignOffset={0}
+            avoidCollisions={true}
+            collisionPadding={8}
+            sideOffset={8}
+          >
+            <DropdownMenu.Label>Profiles</DropdownMenu.Label>
+            <DropdownMenu.Item
+              key="1"
+              onSelect={() => {
+                updateSettings({ deviceProfile: "Expo" });
+              }}
+            >
+              <DropdownMenu.ItemTitle>Expo</DropdownMenu.ItemTitle>
+            </DropdownMenu.Item>
+            <DropdownMenu.Item
+              key="2"
+              onSelect={() => {
+                updateSettings({ deviceProfile: "Native" });
+              }}
+            >
+              <DropdownMenu.ItemTitle>Native</DropdownMenu.ItemTitle>
+            </DropdownMenu.Item>
+            <DropdownMenu.Item
+              key="3"
+              onSelect={() => {
+                updateSettings({ deviceProfile: "Old" });
+              }}
+            >
+              <DropdownMenu.ItemTitle>Old</DropdownMenu.ItemTitle>
+            </DropdownMenu.Item>
+          </DropdownMenu.Content>
+        </DropdownMenu.Root>
+      </View>
+      <View className="flex flex-col">
+        <View
+          className={`
+            flex flex-row items-center space-x-2 justify-between bg-neutral-900 p-4
+          `}
+        >
+          <View className="flex flex-col shrink">
+            <Text className="font-semibold">Search engine</Text>
+            <Text className="text-xs opacity-50">
+              Choose the search engine you want to use.
+            </Text>
+          </View>
+          <DropdownMenu.Root>
+            <DropdownMenu.Trigger>
+              <TouchableOpacity className="bg-neutral-800 rounded-lg border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between">
+                <Text>{settings?.searchEngine}</Text>
+              </TouchableOpacity>
+            </DropdownMenu.Trigger>
+            <DropdownMenu.Content
+              loop={true}
+              side="bottom"
+              align="start"
+              alignOffset={0}
+              avoidCollisions={true}
+              collisionPadding={8}
+              sideOffset={8}
+            >
+              <DropdownMenu.Label>Profiles</DropdownMenu.Label>
+              <DropdownMenu.Item
+                key="1"
+                onSelect={() => {
+                  updateSettings({ searchEngine: "Jellyfin" });
+                  queryClient.invalidateQueries({ queryKey: ["search"] });
+                }}
+              >
+                <DropdownMenu.ItemTitle>Jellyfin</DropdownMenu.ItemTitle>
+              </DropdownMenu.Item>
+              <DropdownMenu.Item
+                key="2"
+                onSelect={() => {
+                  updateSettings({ searchEngine: "Marlin" });
+                  queryClient.invalidateQueries({ queryKey: ["search"] });
+                }}
+              >
+                <DropdownMenu.ItemTitle>Marlin</DropdownMenu.ItemTitle>
+              </DropdownMenu.Item>
+            </DropdownMenu.Content>
+          </DropdownMenu.Root>
+        </View>
+        {settings?.searchEngine === "Marlin" && (
+          <View className="flex flex-col bg-neutral-900 px-4 pb-4">
+            <>
+              <View className="flex flex-row items-center space-x-2">
+                <View className="grow">
+                  <Input
+                    placeholder="Marlin Server URL..."
+                    defaultValue={settings.marlinServerUrl}
+                    value={marlinUrl}
+                    keyboardType="url"
+                    returnKeyType="done"
+                    autoCapitalize="none"
+                    textContentType="URL"
+                    onChangeText={(text) => setMarlinUrl(text)}
+                  />
+                </View>
+                <Button
+                  color="purple"
+                  className="shrink w-16 h-12"
+                  onPress={() => {
+                    updateSettings({ marlinServerUrl: marlinUrl });
+                  }}
+                >
+                  Save
+                </Button>
+              </View>
+
+              <Text className="text-neutral-500 mt-2">
+                {settings?.marlinServerUrl}
+              </Text>
+            </>
+          </View>
+        )}
       </View>
     </View>
   );

components/stacks/NestedTabPageStack.tsx

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

constants/Languages.ts

@@ -1,39 +0,0 @@
-import { DefaultLanguageOption } from "@/utils/atoms/settings";
-
-export const LANGUAGES: DefaultLanguageOption[] = [
-  { label: "English", value: "eng" },
-  { label: "Spanish", value: "es" },
-  { label: "Chinese (Mandarin)", value: "zh" },
-  { label: "Hindi", value: "hi" },
-  { label: "Arabic", value: "ar" },
-  { label: "French", value: "fr" },
-  { label: "Russian", value: "ru" },
-  { label: "Portuguese", value: "pt" },
-  { label: "Japanese", value: "ja" },
-  { label: "German", value: "de" },
-  { label: "Italian", value: "it" },
-  { label: "Korean", value: "ko" },
-  { label: "Turkish", value: "tr" },
-  { label: "Dutch", value: "nl" },
-  { label: "Polish", value: "pl" },
-  { label: "Vietnamese", value: "vi" },
-  { label: "Thai", value: "th" },
-  { label: "Indonesian", value: "id" },
-  { label: "Greek", value: "el" },
-  { label: "Swedish", value: "sv" },
-  { label: "Danish", value: "da" },
-  { label: "Norwegian", value: "no" },
-  { label: "Finnish", value: "fi" },
-  { label: "Czech", value: "cs" },
-  { label: "Hungarian", value: "hu" },
-  { label: "Romanian", value: "ro" },
-  { label: "Ukrainian", value: "uk" },
-  { label: "Hebrew", value: "he" },
-  { label: "Bengali", value: "bn" },
-  { label: "Punjabi", value: "pa" },
-  { label: "Tagalog", value: "tl" },
-  { label: "Swahili", value: "sw" },
-  { label: "Malay", value: "ms" },
-  { label: "Persian", value: "fa" },
-  { label: "Urdu", value: "ur" },
-];

eas.json

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

hooks/useAdjacentEpisodes.ts

@@ -1,76 +0,0 @@
-import { Api } from "@jellyfin/sdk";
-import { getItemsApi } from "@jellyfin/sdk/lib/utils/api/items-api";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
-import { useQuery } from "@tanstack/react-query";
-import { CurrentlyPlayingState } from "@/providers/PlaybackProvider";
-import { useAtom } from "jotai";
-import { apiAtom } from "@/providers/JellyfinProvider";
-
-interface AdjacentEpisodesProps {
-  currentlyPlaying?: CurrentlyPlayingState | null;
-}
-
-export const useAdjacentEpisodes = ({
-  currentlyPlaying,
-}: AdjacentEpisodesProps) => {
-  const [api] = useAtom(apiAtom);
-
-  const { data: previousItem } = useQuery({
-    queryKey: [
-      "previousItem",
-      currentlyPlaying?.item.ParentId,
-      currentlyPlaying?.item.IndexNumber,
-    ],
-    queryFn: async (): Promise<BaseItemDto | null> => {
-      if (
-        !api ||
-        !currentlyPlaying?.item.ParentId ||
-        currentlyPlaying?.item.IndexNumber === undefined ||
-        currentlyPlaying?.item.IndexNumber === null ||
-        currentlyPlaying.item.IndexNumber - 2 < 0
-      ) {
-        console.log("No previous item");
-        return null;
-      }
-
-      const res = await getItemsApi(api).getItems({
-        parentId: currentlyPlaying.item.ParentId!,
-        startIndex: currentlyPlaying.item.IndexNumber! - 2,
-        limit: 1,
-      });
-
-      return res.data.Items?.[0] || null;
-    },
-    enabled: currentlyPlaying?.item.Type === "Episode",
-  });
-
-  const { data: nextItem } = useQuery({
-    queryKey: [
-      "nextItem",
-      currentlyPlaying?.item.ParentId,
-      currentlyPlaying?.item.IndexNumber,
-    ],
-    queryFn: async (): Promise<BaseItemDto | null> => {
-      if (
-        !api ||
-        !currentlyPlaying?.item.ParentId ||
-        currentlyPlaying?.item.IndexNumber === undefined ||
-        currentlyPlaying?.item.IndexNumber === null
-      ) {
-        console.log("No next item");
-        return null;
-      }
-
-      const res = await getItemsApi(api).getItems({
-        parentId: currentlyPlaying.item.ParentId!,
-        startIndex: currentlyPlaying.item.IndexNumber!,
-        limit: 1,
-      });
-
-      return res.data.Items?.[0] || null;
-    },
-    enabled: currentlyPlaying?.item.Type === "Episode",
-  });
-
-  return { previousItem, nextItem };
-};

hooks/useControlsVisibility.ts

@@ -1,41 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-import {
-  runOnJS,
-  useAnimatedReaction,
-  useSharedValue,
-} from "react-native-reanimated";
-
-export const useControlsVisibility = (timeout: number = 3000) => {
-  const opacity = useSharedValue(1);
-
-  const hideControlsTimerRef = useRef<ReturnType<typeof setTimeout> | null>(
-    null
-  );
-
-  const showControls = useCallback(() => {
-    opacity.value = 1;
-    if (hideControlsTimerRef.current) {
-      clearTimeout(hideControlsTimerRef.current);
-    }
-    hideControlsTimerRef.current = setTimeout(() => {
-      opacity.value = 0;
-    }, timeout);
-  }, [timeout]);
-
-  const hideControls = useCallback(() => {
-    opacity.value = 0;
-    if (hideControlsTimerRef.current) {
-      clearTimeout(hideControlsTimerRef.current);
-    }
-  }, []);
-
-  useEffect(() => {
-    return () => {
-      if (hideControlsTimerRef.current) {
-        clearTimeout(hideControlsTimerRef.current);
-      }
-    };
-  }, []);
-
-  return { opacity, showControls, hideControls };
-};

hooks/useImageColors.ts

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

hooks/useInterval.ts

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

hooks/useNavigationBarVisibility.ts

@@ -1,27 +0,0 @@
-// hooks/useNavigationBarVisibility.ts
-
-import { useEffect } from "react";
-import { Platform } from "react-native";
-import * as NavigationBar from "expo-navigation-bar";
-
-export const useNavigationBarVisibility = (isPlaying: boolean | null) => {
-  useEffect(() => {
-    const handleVisibility = async () => {
-      if (Platform.OS === "android") {
-        if (isPlaying) {
-          await NavigationBar.setVisibilityAsync("hidden");
-        } else {
-          await NavigationBar.setVisibilityAsync("visible");
-        }
-      }
-    };
-
-    handleVisibility();
-
-    return () => {
-      if (Platform.OS === "android") {
-        NavigationBar.setVisibilityAsync("visible");
-      }
-    };
-  }, [isPlaying]);
-};

hooks/useRemuxHlsToMp4.ts

@@ -7,7 +7,7 @@ import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { runningProcesses } from "@/utils/atoms/downloads";
 import { writeToLog } from "@/utils/log";
 import { useQueryClient } from "@tanstack/react-query";
-import { toast } from "sonner-native";
+import { Platform } from "react-native";
 
 /**
  * Custom hook for remuxing HLS to MP4 using FFmpeg.
@@ -29,12 +29,18 @@ export const useRemuxHlsToMp4 = (item: BaseItemDto) => {
 
   const startRemuxing = useCallback(
     async (url: string) => {
-      toast.success("Download started", {
-        invert: true,
-      });
-
       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}`;
 
+      // let command: string | null = null;
+
+      // if (Platform.OS === "android") {
+      //   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:v h264_mediacodec -c:a copy -bufsize 50M -max_muxing_queue_size 4096 ${output}`;
+      // } else if (Platform.OS === "ios") {
+      //   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:v h264_videotoolbox -c:a copy -bufsize 50M -max_muxing_queue_size 4096 ${output}`;
+      // } else {
+      //   throw new Error("Unsupported platform");
+      // }
+
       writeToLog(
         "INFO",
         `useRemuxHlsToMp4 ~ startRemuxing for item ${item.Name}`

hooks/useTrickplay.ts

@@ -1,108 +0,0 @@
-// hooks/useTrickplay.ts
-
-import { useState, useCallback, useMemo, useRef } from "react";
-import { Api } from "@jellyfin/sdk";
-import { SharedValue } from "react-native-reanimated";
-import { CurrentlyPlayingState } from "@/providers/PlaybackProvider";
-import { useAtom } from "jotai";
-import { apiAtom } from "@/providers/JellyfinProvider";
-
-interface TrickplayData {
-  Interval?: number;
-  TileWidth?: number;
-  TileHeight?: number;
-  Height?: number;
-  Width?: number;
-  ThumbnailCount?: number;
-}
-
-interface TrickplayInfo {
-  resolution: string;
-  aspectRatio: number;
-  data: TrickplayData;
-}
-
-interface TrickplayUrl {
-  x: number;
-  y: number;
-  url: string;
-}
-
-export const useTrickplay = (
-  currentlyPlaying?: CurrentlyPlayingState | null
-) => {
-  const [api] = useAtom(apiAtom);
-  const [trickPlayUrl, setTrickPlayUrl] = useState<TrickplayUrl | null>(null);
-  const lastCalculationTime = useRef(0);
-  const throttleDelay = 100; // 200ms throttle
-
-  const trickplayInfo = useMemo(() => {
-    if (!currentlyPlaying?.item.Id || !currentlyPlaying?.item.Trickplay) {
-      return null;
-    }
-
-    const mediaSourceId = currentlyPlaying.item.Id;
-    const trickplayData = currentlyPlaying.item.Trickplay[mediaSourceId];
-
-    if (!trickplayData) {
-      return null;
-    }
-
-    // Get the first available resolution
-    const firstResolution = Object.keys(trickplayData)[0];
-    return firstResolution
-      ? {
-          resolution: firstResolution,
-          aspectRatio:
-            trickplayData[firstResolution].Width! /
-            trickplayData[firstResolution].Height!,
-          data: trickplayData[firstResolution],
-        }
-      : null;
-  }, [currentlyPlaying]);
-
-  const calculateTrickplayUrl = useCallback(
-    (progress: SharedValue<number>) => {
-      const now = Date.now();
-      if (now - lastCalculationTime.current < throttleDelay) {
-        return null;
-      }
-      lastCalculationTime.current = now;
-
-      if (!trickplayInfo || !api || !currentlyPlaying?.item.Id) {
-        return null;
-      }
-
-      const { data, resolution } = trickplayInfo;
-      const { Interval, TileWidth, TileHeight } = data;
-
-      if (!Interval || !TileWidth || !TileHeight || !resolution) {
-        throw new Error("Invalid trickplay data");
-      }
-
-      const currentSecond = Math.max(0, Math.floor(progress.value / 10000000));
-
-      const cols = TileWidth;
-      const rows = TileHeight;
-      const imagesPerTile = cols * rows;
-      const imageIndex = Math.floor(currentSecond / (Interval / 1000));
-      const tileIndex = Math.floor(imageIndex / imagesPerTile);
-
-      const positionInTile = imageIndex % imagesPerTile;
-      const rowInTile = Math.floor(positionInTile / cols);
-      const colInTile = positionInTile % cols;
-
-      const newTrickPlayUrl = {
-        x: rowInTile,
-        y: colInTile,
-        url: `${api.basePath}/Videos/${currentlyPlaying.item.Id}/Trickplay/${resolution}/${tileIndex}.jpg?api_key=${api.accessToken}`,
-      };
-
-      setTrickPlayUrl(newTrickPlayUrl);
-      return newTrickPlayUrl;
-    },
-    [trickplayInfo, currentlyPlaying, api]
-  );
-
-  return { trickPlayUrl, calculateTrickplayUrl, trickplayInfo };
-};

package.json

@@ -20,64 +20,59 @@
     "@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-navigation/native": "^6.0.2",
     "@shopify/flash-list": "1.6.4",
-    "@tanstack/react-query": "^5.56.2",
+    "@tanstack/react-query": "^5.51.16",
     "@types/lodash": "^4.17.7",
     "@types/uuid": "^10.0.0",
-    "axios": "^1.7.7",
-    "expo": "^51.0.32",
+    "axios": "^1.7.3",
+    "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.26",
+    "expo-dev-client": "~4.0.23",
     "expo-device": "~6.0.2",
-    "expo-font": "~12.0.10",
+    "expo-font": "~12.0.9",
     "expo-haptics": "~13.0.1",
-    "expo-image": "~1.12.15",
+    "expo-image": "~1.12.14",
     "expo-keep-awake": "~13.0.2",
-    "expo-linear-gradient": "~13.0.2",
     "expo-linking": "~6.3.1",
     "expo-navigation-bar": "~3.0.7",
-    "expo-network": "~6.0.1",
     "expo-router": "~3.5.23",
     "expo-screen-orientation": "~7.0.5",
     "expo-sensors": "~13.0.9",
     "expo-splash-screen": "~0.27.5",
     "expo-status-bar": "~1.12.1",
     "expo-system-ui": "~3.0.7",
-    "expo-updates": "~0.25.24",
-    "expo-video": "^1.2.6",
+    "expo-updates": "~0.25.22",
     "expo-web-browser": "~13.0.3",
     "ffmpeg-kit-react-native": "^6.0.2",
-    "jotai": "^2.9.3",
+    "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-awesome-slider": "^2.5.3",
     "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.3",
-    "react-native-image-colors": "^2.4.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-reanimated": "~3.10.1",
-    "react-native-reanimated-carousel": "4.0.0-canary.15",
+    "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",
     "react-native-url-polyfill": "^2.0.0",
     "react-native-uuid": "^2.0.2",
-    "react-native-video": "^6.5.0",
+    "react-native-video": "^6.4.3",
     "react-native-web": "~0.19.10",
-    "sonner-native": "^0.9.2",
     "tailwindcss": "3.3.2",
     "use-debounce": "^10.0.3",
     "uuid": "^10.0.0",
@@ -94,12 +89,5 @@
     "react-test-renderer": "18.2.0",
     "typescript": "~5.3.3"
   },
-  "private": true,
-  "expo": {
-    "doctor": {
-      "reactNativeDirectoryCheck": {
-        "enabled": true
-      }
-    }
-  }
+  "private": true
 }

plugins/withAndroidMainActivityAttributes.js

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

plugins/withExpandedController.js

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

providers/JellyfinProvider.tsx

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

providers/PlaybackProvider.tsx

@@ -10,28 +10,21 @@ import React, {
 } from "react";
 
 import { useSettings } from "@/utils/atoms/settings";
-import { getDeviceId } from "@/utils/device";
 import { reportPlaybackProgress } from "@/utils/jellyfin/playstate/reportPlaybackProgress";
 import { reportPlaybackStopped } from "@/utils/jellyfin/playstate/reportPlaybackStopped";
-import { postCapabilities } from "@/utils/jellyfin/session/capabilities";
 import {
   BaseItemDto,
   PlaybackInfoResponse,
 } from "@jellyfin/sdk/lib/generated-client/models";
 import { getMediaInfoApi } from "@jellyfin/sdk/lib/utils/api";
-import * as Linking from "expo-linking";
 import { useAtom } from "jotai";
-import { debounce } from "lodash";
-import { Alert } from "react-native";
 import { OnProgressData, type VideoRef } from "react-native-video";
 import { apiAtom, userAtom } from "./JellyfinProvider";
-import {
-  parseM3U8ForSubtitles,
-  SubtitleTrack,
-} from "@/utils/hls/parseM3U8ForSubtitles";
-import { useVideoPlayer, VideoPlayer } from "expo-video";
+import { getDeviceId } from "@/utils/device";
+import * as Linking from "expo-linking";
+import { Platform } from "react-native";
 
-export type CurrentlyPlayingState = {
+type CurrentlyPlayingState = {
   url: string;
   item: BaseItemDto;
 };
@@ -41,23 +34,19 @@ interface PlaybackContextType {
   currentlyPlaying: CurrentlyPlayingState | null;
   videoRef: React.MutableRefObject<VideoRef | null>;
   isPlaying: boolean;
+  isFullscreen: boolean;
   progressTicks: number | null;
-  playVideo: (triggerRef?: boolean) => void;
-  pauseVideo: (triggerRef?: boolean) => void;
+  playVideo: () => void;
+  pauseVideo: () => void;
   stopPlayback: () => void;
+  presentFullscreenPlayer: () => void;
+  dismissFullscreenPlayer: () => void;
+  setIsFullscreen: (isFullscreen: boolean) => void;
   setIsPlaying: (isPlaying: boolean) => void;
-  isBuffering: boolean;
-  setIsBuffering: (val: boolean) => void;
   onProgress: (data: OnProgressData) => void;
-  setVolume: (volume: number) => void;
   setCurrentlyPlayingState: (
     currentlyPlaying: CurrentlyPlayingState | null
   ) => void;
-  startDownloadedFilePlayback: (
-    currentlyPlaying: CurrentlyPlayingState | null
-  ) => void;
-  subtitles: SubtitleTrack[];
-  player: VideoPlayer;
 }
 
 const PlaybackContext = createContext<PlaybackContextType | null>(null);
@@ -69,17 +58,12 @@ export const PlaybackProvider: React.FC<{ children: ReactNode }> = ({
   const [user] = useAtom(userAtom);
 
   const videoRef = useRef<VideoRef | null>(null);
-  const previousVolume = useRef<number | null>(null);
 
   const [settings] = useSettings();
 
-  const [isPlaying, _setIsPlaying] = useState<boolean>(false);
-  const [isBuffering, setIsBuffering] = useState<boolean>(true);
+  const [isPlaying, setIsPlaying] = useState<boolean>(false);
   const [isFullscreen, setIsFullscreen] = useState<boolean>(false);
   const [progressTicks, setProgressTicks] = useState<number | null>(0);
-  const [volume, _setVolume] = useState<number | null>(null);
-  const [session, setSession] = useState<PlaybackInfoResponse | null>(null);
-  const [subtitles, setSubtitles] = useState<SubtitleTrack[]>([]);
   const [currentlyPlaying, setCurrentlyPlaying] =
     useState<CurrentlyPlayingState | null>(null);
 
@@ -87,17 +71,17 @@ export const PlaybackProvider: React.FC<{ children: ReactNode }> = ({
   const [ws, setWs] = useState<WebSocket | null>(null);
   const [isConnected, setIsConnected] = useState(false);
 
-  const setVolume = useCallback(
-    (newVolume: number) => {
-      previousVolume.current = volume;
-      _setVolume(newVolume);
-      videoRef.current?.setVolume(newVolume);
+  const { data: sessionData } = useQuery({
+    queryKey: ["sessionData", currentlyPlaying?.item.Id, user?.Id, api],
+    queryFn: async () => {
+      if (!currentlyPlaying?.item.Id) return null;
+      const playbackData = await getMediaInfoApi(api!).getPlaybackInfo({
+        itemId: currentlyPlaying?.item.Id,
+        userId: user?.Id,
+      });
+      return playbackData.data;
     },
-    [_setVolume]
-  );
-
-  const player = useVideoPlayer(currentlyPlaying?.url || null, () => {
-    if (player) player.play();
+    enabled: !!currentlyPlaying?.item.Id && !!api && !!user?.Id,
   });
 
   const { data: deviceId } = useQuery({
@@ -105,166 +89,106 @@ export const PlaybackProvider: React.FC<{ children: ReactNode }> = ({
     queryFn: getDeviceId,
   });
 
-  const startDownloadedFilePlayback = useCallback(
-    async (state: CurrentlyPlayingState | null) => {
-      if (!state) {
-        setCurrentlyPlaying(null);
-        setIsPlaying(false);
+  const setCurrentlyPlayingState = useCallback(
+    (state: CurrentlyPlayingState | null) => {
+      const vlcLink = "vlc://" + state?.url;
+      console.log(vlcLink, settings?.openInVLC, Platform.OS === "ios");
+      if (vlcLink && settings?.openInVLC) {
+        Linking.openURL("vlc://" + state?.url || "");
         return;
       }
 
-      setCurrentlyPlaying(state);
-      setIsPlaying(true);
-    },
-    []
-  );
+      if (state) {
+        setCurrentlyPlaying(state);
+        setIsPlaying(true);
 
-  const setCurrentlyPlayingState = useCallback(
-    async (state: CurrentlyPlayingState | null) => {
-      try {
-        if (state?.item.Id && user?.Id) {
-          const vlcLink = "vlc://" + state?.url;
-          if (vlcLink && settings?.openInVLC) {
-            Linking.openURL("vlc://" + state?.url || "");
-            return;
-          }
-
-          const res = await getMediaInfoApi(api!).getPlaybackInfo({
-            itemId: state.item.Id,
-            userId: user.Id,
-          });
-
-          await postCapabilities({
-            api,
-            itemId: state.item.Id,
-            sessionId: res.data.PlaySessionId,
-          });
-
-          setSession(res.data);
-          setCurrentlyPlaying(state);
-          setIsPlaying(true);
-        } else {
-          setCurrentlyPlaying(null);
-          setIsFullscreen(false);
-          setIsPlaying(false);
-        }
-      } catch (e) {
-        console.error(e);
-        Alert.alert(
-          "Something went wrong",
-          "The item could not be played. Maybe there is no internet connection?",
-          [
-            {
-              style: "destructive",
-              text: "Try force play",
-              onPress: () => {
-                setCurrentlyPlaying(state);
-                setIsPlaying(true);
-              },
-            },
-            {
-              text: "Ok",
-              style: "default",
-            },
-          ]
-        );
+        if (settings?.openFullScreenVideoPlayerByDefault)
+          presentFullscreenPlayer();
+      } else {
+        setCurrentlyPlaying(null);
+        setIsFullscreen(false);
+        setIsPlaying(false);
       }
     },
-    [settings, user, api]
+    [settings]
   );
 
-  const playVideo = useCallback(
-    (triggerRef: boolean = true) => {
-      if (triggerRef === true) {
-        player.play();
-      }
-      _setIsPlaying(true);
-      reportPlaybackProgress({
-        api,
-        itemId: currentlyPlaying?.item.Id,
-        positionTicks: progressTicks ? progressTicks : 0,
-        sessionId: session?.PlaySessionId,
-        IsPaused: false,
-      });
-    },
-    [api, currentlyPlaying?.item.Id, session?.PlaySessionId, progressTicks]
-  );
+  // Define control methods
+  const playVideo = useCallback(() => {
+    videoRef.current?.resume();
+    setIsPlaying(true);
+    reportPlaybackProgress({
+      api,
+      itemId: currentlyPlaying?.item.Id,
+      positionTicks: progressTicks ? progressTicks : 0,
+      sessionId: sessionData?.PlaySessionId,
+      IsPaused: true,
+    });
+  }, [
+    api,
+    currentlyPlaying?.item.Id,
+    sessionData?.PlaySessionId,
+    progressTicks,
+  ]);
 
-  const pauseVideo = useCallback(
-    (triggerRef: boolean = true) => {
-      if (triggerRef === true) {
-        player.pause();
-      }
-      _setIsPlaying(false);
-      reportPlaybackProgress({
-        api,
-        itemId: currentlyPlaying?.item.Id,
-        positionTicks: progressTicks ? progressTicks : 0,
-        sessionId: session?.PlaySessionId,
-        IsPaused: true,
-      });
-    },
-    [session?.PlaySessionId, currentlyPlaying?.item.Id, progressTicks]
-  );
+  const pauseVideo = useCallback(() => {
+    videoRef.current?.pause();
+    setIsPlaying(false);
+    reportPlaybackProgress({
+      api,
+      itemId: currentlyPlaying?.item.Id,
+      positionTicks: progressTicks ? progressTicks : 0,
+      sessionId: sessionData?.PlaySessionId,
+      IsPaused: false,
+    });
+  }, [sessionData?.PlaySessionId, currentlyPlaying?.item.Id, progressTicks]);
 
   const stopPlayback = useCallback(async () => {
-    const id = currentlyPlaying?.item?.Id;
-    setCurrentlyPlayingState(null);
-
     await reportPlaybackStopped({
       api,
-      itemId: id,
-      sessionId: session?.PlaySessionId,
+      itemId: currentlyPlaying?.item?.Id,
+      sessionId: sessionData?.PlaySessionId,
       positionTicks: progressTicks ? progressTicks : 0,
     });
-  }, [currentlyPlaying?.item.Id, session?.PlaySessionId, progressTicks, api]);
+    setCurrentlyPlayingState(null);
+  }, [currentlyPlaying, sessionData, progressTicks]);
 
-  const setIsPlaying = useCallback(
-    debounce((value: boolean) => {
-      _setIsPlaying(value);
-    }, 500),
-    []
-  );
-
-  const _onProgress = useCallback(
+  const onProgress = useCallback(
     ({ currentTime }: OnProgressData) => {
-      if (
-        !session?.PlaySessionId ||
-        !currentlyPlaying?.item.Id ||
-        currentTime === 0
-      )
-        return;
       const ticks = currentTime * 10000000;
       setProgressTicks(ticks);
       reportPlaybackProgress({
         api,
         itemId: currentlyPlaying?.item.Id,
         positionTicks: ticks,
-        sessionId: session?.PlaySessionId,
+        sessionId: sessionData?.PlaySessionId,
         IsPaused: !isPlaying,
       });
     },
-    [session?.PlaySessionId, currentlyPlaying?.item.Id, isPlaying, api]
+    [sessionData?.PlaySessionId, currentlyPlaying?.item.Id, isPlaying]
   );
 
-  const onProgress = useCallback(
-    debounce((e: OnProgressData) => {
-      _onProgress(e);
-    }, 500),
-    [_onProgress]
-  );
+  const presentFullscreenPlayer = useCallback(() => {
+    videoRef.current?.presentFullscreenPlayer();
+    setIsFullscreen(true);
+  }, []);
+
+  const dismissFullscreenPlayer = useCallback(() => {
+    videoRef.current?.dismissFullscreenPlayer();
+    setIsFullscreen(false);
+  }, []);
 
   useEffect(() => {
     if (!deviceId || !api?.accessToken) return;
 
-    const protocol = api?.basePath.includes("https") ? "wss" : "ws";
-
-    const url = `${protocol}://${api?.basePath
+    const url = `wss://${api?.basePath
       .replace("https://", "")
       .replace("http://", "")}/socket?api_key=${
       api?.accessToken
     }&deviceId=${deviceId}`;
 
+    console.log("WS", url);
+
     const newWebSocket = new WebSocket(url);
 
     let keepAliveInterval: NodeJS.Timeout | null = null;
@@ -275,6 +199,7 @@ export const PlaybackProvider: React.FC<{ children: ReactNode }> = ({
       keepAliveInterval = setInterval(() => {
         if (newWebSocket.readyState === WebSocket.OPEN) {
           newWebSocket.send(JSON.stringify({ MessageType: "KeepAlive" }));
+          console.log("KeepAlive message sent");
         }
       }, 30000);
     };
@@ -285,6 +210,7 @@ export const PlaybackProvider: React.FC<{ children: ReactNode }> = ({
     };
 
     newWebSocket.onclose = (e) => {
+      console.log("WebSocket connection closed:", e.reason);
       if (keepAliveInterval) {
         clearInterval(keepAliveInterval);
       }
@@ -307,8 +233,6 @@ export const PlaybackProvider: React.FC<{ children: ReactNode }> = ({
       const json = JSON.parse(e.data);
       const command = json?.Data?.Command;
 
-      console.log("[WS] ~ ", json);
-
       // On PlayPause
       if (command === "PlayPause") {
         console.log("Command ~ PlayPause");
@@ -317,19 +241,6 @@ export const PlaybackProvider: React.FC<{ children: ReactNode }> = ({
       } else if (command === "Stop") {
         console.log("Command ~ Stop");
         stopPlayback();
-      } else if (command === "Mute") {
-        console.log("Command ~ Mute");
-        setVolume(0);
-      } else if (command === "Unmute") {
-        console.log("Command ~ Unmute");
-        setVolume(previousVolume.current || 20);
-      } else if (command === "SetVolume") {
-        console.log("Command ~ SetVolume");
-      } else if (json?.Data?.Name === "DisplayMessage") {
-        console.log("Command ~ DisplayMessage");
-        const title = json?.Data?.Arguments?.Header;
-        const body = json?.Data?.Arguments?.Text;
-        Alert.alert(title, body);
       }
     };
   }, [ws, stopPlayback, playVideo, pauseVideo]);
@@ -337,23 +248,21 @@ export const PlaybackProvider: React.FC<{ children: ReactNode }> = ({
   return (
     <PlaybackContext.Provider
       value={{
-        player,
         onProgress,
-        isBuffering,
-        setIsBuffering,
         progressTicks,
-        setVolume,
         setIsPlaying,
+        setIsFullscreen,
+        isFullscreen,
         isPlaying,
         currentlyPlaying,
-        sessionData: session,
+        sessionData,
         videoRef,
         playVideo,
         setCurrentlyPlayingState,
         pauseVideo,
         stopPlayback,
-        startDownloadedFilePlayback,
-        subtitles,
+        presentFullscreenPlayer,
+        dismissFullscreenPlayer,
       }}
     >
       {children}