wip

Included timeout, check url even if http is included, doc strings

.github/ISSUE_TEMPLATE/bug_report.md

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

.github/ISSUE_TEMPLATE/feature_request.md

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

README.md

@@ -4,12 +4,11 @@
 
 Welcome to Streamyfin, a simple and user-friendly Jellyfin client built with Expo. If you're looking for an alternative to other Jellyfin clients, we hope you'll find Streamyfin to be a useful addition to your media streaming toolbox.
 
-<div style="display: flex; flex-direction: row; gap: 5px">
-  <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 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>
 
 ## 🌟 Features
@@ -26,7 +25,7 @@ Streamyfin includes some exciting experimental features like media downloading a
 
 ### Downloading
 
-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.
+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.
 
 ### Chromecast
 
@@ -34,19 +33,19 @@ Chromecast support is still in development, and we're working on improving it. C
 
 ## Plugins
 
-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.
+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.
 
 ### Collection rows
 
 Jellyfin collections can be shown as rows or carousel on the home screen.
-The following tags can be added to an collection to provide this functionality.
+The following tags can be added to a collection to provide this functionality.
 
-Avaiable tags:
+Available tags:
 
-- sf_promoted: Wil make the collection an row on home
-- sf_carousel: Wil make the collection an carousel on home.
+- sf_promoted: will make the collection a row at home
+- sf_carousel: will make the collection a carousel on home.
 
-A plugin exists to create collections based on external sources like mdblist. This makes managing collections like trending, most watched etc an automatic process.
+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.
 See [Collection Import Plugin](https://github.com/lostb1t/jellyfin-plugin-collection-import) for more info.
 
 ### Jellysearch
@@ -90,8 +89,8 @@ We welcome any help to make Streamyfin better. If you'd like to contribute, plea
 ### Development info
 
 1. Use node `20`
-2. Install deps `bun i`
-3. `Create an expo dev build by running `npx expo run:ios` or `npx expo run:android`.
+2. Install dependencies `bun i`
+3. Create an expo dev build by running `npx expo run:ios` or `npx expo run:android`.
 
 ## Extended chromecast controls
 

app.json

@@ -2,7 +2,7 @@
   "expo": {
     "name": "Streamyfin",
     "slug": "streamyfin",
-    "version": "0.10.3",
+    "version": "0.14.0",
     "orientation": "default",
     "icon": "./assets/images/icon.png",
     "scheme": "streamyfin",
@@ -33,7 +33,7 @@
     },
     "android": {
       "jsEngine": "hermes",
-      "versionCode": 32,
+      "versionCode": 40,
       "adaptiveIcon": {
         "foregroundImage": "./assets/images/icon.png"
       },
@@ -82,9 +82,11 @@
         "expo-build-properties",
         {
           "ios": {
+            "newArchEnabled": true,
             "deploymentTarget": "14.0"
           },
           "android": {
+            "newArchEnabled": true,
             "android": {
               "compileSdkVersion": 34,
               "targetSdkVersion": 34,
@@ -111,7 +113,8 @@
         {
           "motionPermission": "Allow Streamyfin to access your device motion for landscape video watching."
         }
-      ]
+      ],
+      "expo-video"
     ],
     "experiments": {
       "typedRoutes": true

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

@@ -61,6 +61,16 @@ export default function IndexLayout() {
       {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

@@ -1,3 +1,4 @@
+import { Button } from "@/components/Button";
 import { Text } from "@/components/common/Text";
 import { LargeMovieCarousel } from "@/components/home/LargeMovieCarousel";
 import { ScrollingCollectionList } from "@/components/home/ScrollingCollectionList";
@@ -5,6 +6,8 @@ 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,
@@ -18,7 +21,13 @@ import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useRouter } from "expo-router";
 import { useAtom } from "jotai";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { RefreshControl, SafeAreaView, ScrollView, View } from "react-native";
+import {
+  ActivityIndicator,
+  RefreshControl,
+  SafeAreaView,
+  ScrollView,
+  View,
+} from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 type BaseSection = {
@@ -41,6 +50,7 @@ type Section = ScrollingCollectionListSection | MediaListSection;
 
 export default function index() {
   const queryClient = useQueryClient();
+  const router = useRouter();
 
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
@@ -49,6 +59,14 @@ export default function index() {
   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) => {
@@ -187,6 +205,7 @@ export default function index() {
               fields: ["PrimaryImageAspectRatio", "Path"],
               imageTypeLimit: 1,
               enableImageTypes: ["Primary", "Backdrop", "Thumb"],
+              includeItemTypes: ["Movie"],
               parentId: movieCollectionId,
             })
           ).data || [],
@@ -203,6 +222,7 @@ export default function index() {
               fields: ["PrimaryImageAspectRatio", "Path"],
               imageTypeLimit: 1,
               enableImageTypes: ["Primary", "Backdrop", "Thumb"],
+              includeItemTypes: ["Series"],
               parentId: tvShowCollectionId,
             })
           ).data || [],
@@ -226,15 +246,20 @@ export default function index() {
       {
         title: "Suggested Episodes",
         queryKey: ["suggestedEpisodes", user?.Id],
-        queryFn: async () =>
-          (
-            await getSuggestionsApi(api).getSuggestions({
-              userId: user?.Id,
-              limit: 10,
-              mediaType: ["Video"],
-              type: ["Episode"],
-            })
-          ).data.Items || [],
+        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",
       },
@@ -248,28 +273,47 @@ export default function index() {
     mediaListCollections,
   ]);
 
-  // if (isConnected === false) {
-  //   return (
-  //     <View className="flex flex-col items-center justify-center h-full -mt-6 px-8">
-  //       <Text className="text-3xl font-bold mb-2">No Internet</Text>
-  //       <Text className="text-center opacity-70">
-  //         No worries, you can still watch{"\n"}downloaded content.
-  //       </Text>
-  //       <View className="mt-4">
-  //         <Button
-  //           color="purple"
-  //           onPress={() => router.push("/(auth)/downloads")}
-  //           justify="center"
-  //           iconRight={
-  //             <Ionicons name="arrow-forward" size={20} color="white" />
-  //           }
-  //         >
-  //           Go to downloads
-  //         </Button>
-  //       </View>
-  //     </View>
-  //   );
-  // }
+  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();
 
@@ -303,7 +347,7 @@ export default function index() {
           paddingLeft: insets.left,
           paddingRight: insets.right,
         }}
-        className="flex flex-col pt-4 pb-24 gap-y-4"
+        className="flex flex-col pt-4 pb-24 gap-y-2"
       >
         <LargeMovieCarousel />
 
@@ -333,3 +377,30 @@ export default function index() {
     </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

@@ -5,11 +5,15 @@ 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 { ScrollView, View } from "react-native";
+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();
@@ -26,6 +30,36 @@ export default function settings() {
 
   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={{
@@ -35,62 +69,89 @@ export default function settings() {
       }}
     >
       <View className="p-4 flex flex-col gap-y-4">
-        <Text className="font-bold text-2xl">Information</Text>
+        <View>
+          <Text className="font-bold text-lg mb-2">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 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 className="flex flex-col space-y-2">
-          <Button color="black" onPress={logout}>
-            Log out
-          </Button>
+        <View>
+          <Text className="font-bold text-lg mb-2">Tests</Text>
           <Button
-            color="red"
-            onPress={async () => {
-              await deleteAllFiles();
-              Haptics.notificationAsync(
-                Haptics.NotificationFeedbackType.Success
-              );
+            onPress={() => {
+              toast.success("Download started", {
+                invert: true,
+              });
             }}
+            color="black"
           >
-            Delete all downloaded files
-          </Button>
-          <Button
-            color="red"
-            onPress={async () => {
-              await clearLogs();
-              Haptics.notificationAsync(
-                Haptics.NotificationFeedbackType.Success
-              );
-            }}
-          >
-            Delete all logs
+            Test toast
           </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={`
+        <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>
-          )}
+                >
+                  {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)/collections/[collectionId].tsx

@@ -1,11 +1,9 @@
-import { ItemImage } from "@/components/common/ItemImage";
 import { Text } from "@/components/common/Text";
 import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
 import { FilterButton } from "@/components/filters/FilterButton";
 import { ResetFiltersButton } from "@/components/filters/ResetFiltersButton";
 import { ItemCardText } from "@/components/ItemCardText";
 import { ItemPoster } from "@/components/posters/ItemPoster";
-import MoviePoster from "@/components/posters/MoviePoster";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import {
   genreFilterAtom,
@@ -33,17 +31,9 @@ import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
 import { useLocalSearchParams, useNavigation } from "expo-router";
 import * as ScreenOrientation from "expo-screen-orientation";
 import { useAtom } from "jotai";
-import React, {
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useState,
-} from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { FlatList, View } from "react-native";
 
-const MemoizedTouchableItemRouter = React.memo(TouchableItemRouter);
-
 const page: React.FC = () => {
   const searchParams = useLocalSearchParams();
   const { collectionId } = searchParams as { collectionId: string };
@@ -177,7 +167,7 @@ const page: React.FC = () => {
 
   const renderItem = useCallback(
     ({ item, index }: { item: BaseItemDto; index: number }) => (
-      <MemoizedTouchableItemRouter
+      <TouchableItemRouter
         key={item.Id}
         style={{
           width: "100%",
@@ -201,7 +191,7 @@ const page: React.FC = () => {
           {/* <MoviePoster item={item} /> */}
           <ItemCardText item={item} />
         </View>
-      </MemoizedTouchableItemRouter>
+      </TouchableItemRouter>
     ),
     [orientation]
   );

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

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

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

@@ -1,14 +1,12 @@
 import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
-import { useLocalSearchParams, useNavigation } from "expo-router";
+import {
+  useFocusEffect,
+  useLocalSearchParams,
+  useNavigation,
+} from "expo-router";
 import * as ScreenOrientation from "expo-screen-orientation";
 import { useAtom } from "jotai";
-import React, {
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useState,
-} from "react";
+import React, { useCallback, useEffect, useLayoutEffect, useMemo } from "react";
 import { FlatList, useWindowDimensions, View } from "react-native";
 
 import { Text } from "@/components/common/Text";
@@ -17,19 +15,24 @@ import { FilterButton } from "@/components/filters/FilterButton";
 import { ResetFiltersButton } from "@/components/filters/ResetFiltersButton";
 import { ItemCardText } from "@/components/ItemCardText";
 import { Loader } from "@/components/Loader";
-import MoviePoster from "@/components/posters/MoviePoster";
+import { ItemPoster } from "@/components/posters/ItemPoster";
 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,
@@ -41,8 +44,6 @@ import {
 } from "@jellyfin/sdk/lib/utils/api";
 import { FlashList } from "@shopify/flash-list";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { orientationAtom } from "@/utils/atoms/orientation";
-import { ItemPoster } from "@/components/posters/ItemPoster";
 
 const MemoizedTouchableItemRouter = React.memo(TouchableItemRouter);
 
@@ -57,10 +58,57 @@ const Page = () => {
   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 [sortBy, _setSortBy] = useAtom(sortByAtom);
+  const [sortOrder, _setSortOrder] = useAtom(sortOrderAtom);
+  const [orientation] = useAtom(orientationAtom);
+  const [sortByPreference, setSortByPreference] = useAtom(sortByPreferenceAtom);
+  const [sortOrderPreference, setOderByPreference] = useAtom(
+    sortOrderPreferenceAtom
+  );
 
-  const [orientation, setOrientation] = useAtom(orientationAtom);
+  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]);
+    }
+  }, []);
+
+  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] });
+      }
+      _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]
+  );
 
   const getNumberOfColumns = useCallback(() => {
     if (orientation === ScreenOrientation.Orientation.PORTRAIT_UP) return 3;
@@ -70,11 +118,6 @@ const Page = () => {
     return 6;
   }, [screenWidth, orientation]);
 
-  useLayoutEffect(() => {
-    setSortBy([SortByOption.SortName]);
-    setSortOrder([SortOrderOption.Ascending]);
-  }, []);
-
   const { data: library, isLoading: isLibraryLoading } = useQuery({
     queryKey: ["library", libraryId],
     queryFn: async () => {
@@ -89,6 +132,13 @@ const Page = () => {
     staleTime: 60 * 1000,
   });
 
+  const navigation = useNavigation();
+  useEffect(() => {
+    navigation.setOptions({
+      title: library?.Name || "",
+    });
+  }, [library]);
+
   const fetchItems = useCallback(
     async ({
       pageParam,

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

@@ -195,6 +195,16 @@ export default function IndexLayout() {
       {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

@@ -9,7 +9,6 @@ import {
 } from "@jellyfin/sdk/lib/utils/api";
 import { FlashList } from "@shopify/flash-list";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { useNavigation } from "expo-router";
 import { useAtom } from "jotai";
 import { useEffect } from "react";
 import { StyleSheet, View } from "react-native";

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

@@ -19,6 +19,16 @@ export default function SearchLayout() {
       {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)/(search)/index.tsx

@@ -278,9 +278,9 @@ export default function search() {
               <HorizontalScroll
                 data={data}
                 renderItem={(item) => (
-                  <TouchableOpacity
+                  <TouchableItemRouter
                     key={item.Id}
-                    onPress={() => router.push(`/series/${item.Id}`)}
+                    item={item}
                     className="flex flex-col w-28"
                   >
                     <SeriesPoster item={item} key={item.Id} />
@@ -290,7 +290,7 @@ export default function search() {
                     <Text className="opacity-50 text-xs">
                       {item.ProductionYear}
                     </Text>
-                  </TouchableOpacity>
+                  </TouchableItemRouter>
                 )}
               />
             )}
@@ -302,14 +302,14 @@ export default function search() {
               <HorizontalScroll
                 data={data}
                 renderItem={(item) => (
-                  <TouchableOpacity
+                  <TouchableItemRouter
+                    item={item}
                     key={item.Id}
-                    onPress={() => router.push(`/items/page?id=${item.Id}`)}
                     className="flex flex-col w-44"
                   >
                     <ContinueWatchingPoster item={item} />
                     <ItemCardText item={item} />
-                  </TouchableOpacity>
+                  </TouchableItemRouter>
                 )}
               />
             )}
@@ -321,16 +321,16 @@ export default function search() {
               <HorizontalScroll
                 data={data}
                 renderItem={(item) => (
-                  <TouchableOpacity
+                  <TouchableItemRouter
                     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>
-                  </TouchableOpacity>
+                  </TouchableItemRouter>
                 )}
               />
             )}

app/_layout.tsx

@@ -1,4 +1,4 @@
-import { CurrentlyPlayingBar } from "@/components/CurrentlyPlayingBar";
+import { FullScreenVideoPlayer } from "@/components/FullScreenVideoPlayer";
 import { JellyfinProvider } from "@/providers/JellyfinProvider";
 import { JobQueueProvider } from "@/providers/JobQueueProvider";
 import { PlaybackProvider } from "@/providers/PlaybackProvider";
@@ -19,6 +19,7 @@ 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";
 
 SplashScreen.preventAutoHideAsync();
 
@@ -106,7 +107,12 @@ function Layout() {
                 <PlaybackProvider>
                   <StatusBar style="light" backgroundColor="#000" />
                   <ThemeProvider value={DarkTheme}>
-                    <Stack initialRouteName="/home">
+                    <Stack
+                      initialRouteName="/home"
+                      screenOptions={{
+                        autoHideHomeIndicator: true,
+                      }}
+                    >
                       <Stack.Screen
                         name="(auth)/(tabs)"
                         options={{
@@ -120,7 +126,8 @@ function Layout() {
                       />
                       <Stack.Screen name="+not-found" />
                     </Stack>
-                    <CurrentlyPlayingBar />
+                    <FullScreenVideoPlayer />
+                    <Toaster />
                   </ThemeProvider>
                 </PlaybackProvider>
               </JellyfinProvider>

app/login.tsx

@@ -3,6 +3,8 @@ 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 { useAtom } from "jotai";
 import React, { useEffect, useState } from "react";
@@ -33,6 +35,7 @@ const Login: React.FC = () => {
   } = params as { apiUrl: string; username: string; password: string };
 
   const [serverURL, setServerURL] = useState<string>(_apiUrl);
+  const [serverName, setServerName] = useState<string>("");
   const [error, setError] = useState<string>("");
   const [credentials, setCredentials] = useState<{
     username: string;
@@ -44,6 +47,8 @@ const Login: React.FC = () => {
 
   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,
@@ -79,12 +84,93 @@ const Login: React.FC = () => {
     }
   };
 
-  const handleConnect = (url: string) => {
-    if (!url.startsWith("http")) {
-      Alert.alert("Error", "URL needs to start with http or https.");
+  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."
+      );
       return;
     }
-    setServer({ address: url.trim() });
+
+    setServer({ address: result });
   };
 
   const handleQuickConnect = async () => {
@@ -113,7 +199,9 @@ const Login: React.FC = () => {
             <View></View>
             <View>
               <View className="mb-4">
-                <Text className="text-3xl font-bold mb-2">Streamyfin</Text>
+                <Text className="text-3xl font-bold mb-1">
+                  {serverName || "Streamyfin"}
+                </Text>
                 <Text className="text-neutral-500 mb-2">
                   Server: {api.basePath}
                 </Text>
@@ -121,7 +209,6 @@ const Login: React.FC = () => {
                   color="black"
                   onPress={() => {
                     removeServer();
-                    setServerURL("");
                   }}
                   justify="between"
                   iconLeft={
@@ -138,9 +225,6 @@ 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) =>
@@ -218,11 +302,13 @@ const Login: React.FC = () => {
               textContentType="URL"
               maxLength={500}
             />
-            <Text className="opacity-30">
-              Server URL requires http or https
-            </Text>
           </View>
-          <Button onPress={() => handleConnect(serverURL)} className="mb-2">
+          <Button
+            loading={loadingServerCheck}
+            disabled={loadingServerCheck}
+            onPress={async () => await handleConnect(serverURL)}
+            className="mb-2"
+          >
             Connect
           </Button>
         </View>

components/AudioTrackSelector.tsx

@@ -9,6 +9,7 @@ import {
 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;
@@ -22,6 +23,8 @@ export const AudioTrackSelector: React.FC<Props> = ({
   selected,
   ...props
 }) => {
+  const [settings] = useSettings();
+
   const audioStreams = useMemo(
     () => source.MediaStreams?.filter((x) => x.Type === "Audio"),
     [source]
@@ -33,9 +36,21 @@ 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);
-  }, []);
+    if (index !== undefined && index !== null) {
+      onChange(index);
+      return;
+    }
+
+    onChange(0);
+  }, [audioStreams, settings]);
 
   return (
     <View

components/CurrentlyPlayingBar.tsx

@@ -1,306 +0,0 @@
-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 } 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";
-
-export const CurrentlyPlayingBar: React.FC = () => {
-  const segments = useSegments();
-  const {
-    currentlyPlaying,
-    pauseVideo,
-    playVideo,
-    stopPlayback,
-    setVolume,
-    setIsPlaying,
-    isPlaying,
-    videoRef,
-    presentFullscreenPlayer,
-    onProgress,
-  } = usePlayback();
-
-  const [api] = useAtom(apiAtom);
-
-  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 from = useMemo(() => segments[2], [segments]);
-
-  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 poster = useMemo(() => {
-    if (currentlyPlaying?.item.Type === "Audio")
-      return `${api?.basePath}/Items/${currentlyPlaying.item.AlbumId}/Images/Primary?tag=${currentlyPlaying.item.AlbumPrimaryImageTag}&quality=90&maxHeight=200&maxWidth=200`;
-    else
-      return getBackdropUrl({
-        api,
-        item: currentlyPlaying?.item,
-        quality: 70,
-        width: 200,
-      });
-  }, [currentlyPlaying?.item.Id, api]);
-
-  const videoSource = useMemo(() => {
-    if (!api || !currentlyPlaying || !poster) return null;
-    return {
-      uri: currentlyPlaying.url,
-      isNetwork: true,
-      startPosition,
-      headers: getAuthHeaders(api),
-      metadata: {
-        artist: currentlyPlaying.item?.AlbumArtist
-          ? currentlyPlaying.item?.AlbumArtist
-          : undefined,
-        title: currentlyPlaying.item?.Name || "Unknown",
-        description: currentlyPlaying.item?.Overview
-          ? currentlyPlaying.item?.Overview
-          : undefined,
-        imageUri: poster,
-        subtitle: currentlyPlaying.item?.Album
-          ? currentlyPlaying.item?.Album
-          : undefined,
-      },
-    };
-  }, [currentlyPlaying, startPosition, api, poster]);
-
-  if (!api || !currentlyPlaying) return null;
-
-  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"
-                }
-                `}
-            >
-              {videoSource && (
-                <Video
-                  ref={videoRef}
-                  allowsExternalPlayback
-                  style={{ width: "100%", height: "100%" }}
-                  playWhenInactive={true}
-                  playInBackground={true}
-                  showNotificationControls={true}
-                  ignoreSilentSwitch="ignore"
-                  controls={false}
-                  pictureInPicture={true}
-                  poster={
-                    poster && currentlyPlaying.item?.Type === "Audio"
-                      ? poster
-                      : undefined
-                  }
-                  debug={{
-                    enable: true,
-                    thread: true,
-                  }}
-                  onProgress={(e) => onProgress(e)}
-                  subtitleStyle={{
-                    fontSize: 16,
-                  }}
-                  source={videoSource}
-                  onRestoreUserInterfaceForPictureInPictureStop={() => {
-                    setTimeout(() => {
-                      presentFullscreenPlayer();
-                    }, 300);
-                  }}
-                  onFullscreenPlayerDidDismiss={() => {}}
-                  onFullscreenPlayerDidPresent={() => {}}
-                  onPlaybackStateChanged={(e) => {
-                    if (e.isPlaying === true) {
-                      playVideo(false);
-                    } else if (e.isPlaying === false) {
-                      pauseVideo(false);
-                    }
-                  }}
-                  onVolumeChange={(e) => {
-                    setVolume(e.volume);
-                  }}
-                  progressUpdateInterval={4000}
-                  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(
-                      // @ts-ignore
-                      `/(auth)/(tabs)/${from}/albums/${currentlyPlaying.item.AlbumId}`
-                    );
-                  } else {
-                    router.push(
-                      // @ts-ignore
-                      `/(auth)/(tabs)/${from}/items/page?id=${currentlyPlaying.item?.Id}`
-                    );
-                  }
-                }}
-              >
-                <Text>{currentlyPlaying.item?.Name}</Text>
-              </TouchableOpacity>
-              {currentlyPlaying.item?.Type === "Episode" && (
-                <TouchableOpacity
-                  onPress={() => {
-                    router.push(
-                      // @ts-ignore
-                      `/(auth)/(tabs)/${from}/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

@@ -126,7 +126,6 @@ export const DownloadItem: React.FC<DownloadProps> = ({ item, ...props }) => {
 
     if (mediaSource.SupportsDirectPlay) {
       if (item.MediaType === "Video") {
-        console.log("Using direct stream for video!");
         url = `${api.basePath}/Videos/${item.Id}/stream.mp4?mediaSourceId=${item.Id}&static=true&mediaSourceId=${mediaSource.Id}&deviceId=${api.deviceInfo.id}&api_key=${api.accessToken}`;
       } else if (item.MediaType === "Audio") {
         console.log("Using direct stream for audio!");
@@ -149,7 +148,6 @@ export const DownloadItem: React.FC<DownloadProps> = ({ item, ...props }) => {
         }/universal?${searchParams.toString()}`;
       }
     } else if (mediaSource.TranscodingUrl) {
-      console.log("Using transcoded stream!");
       url = `${api.basePath}${mediaSource.TranscodingUrl}`;
     }
 

components/FullScreenVideoPlayer.tsx

@@ -0,0 +1,806 @@
+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

@@ -26,7 +26,7 @@ import { MediaSourceInfo } from "@jellyfin/sdk/lib/generated-client/models";
 import { getMediaInfoApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery } from "@tanstack/react-query";
 import { Image } from "expo-image";
-import { useNavigation } from "expo-router";
+import { Stack, useNavigation } from "expo-router";
 import * as ScreenOrientation from "expo-screen-orientation";
 import { useAtom } from "jotai";
 import React, { useEffect, useMemo, useRef, useState } from "react";
@@ -56,7 +56,7 @@ export const ItemContent: React.FC<{ id: string }> = React.memo(({ id }) => {
     useState<MediaSourceInfo | null>(null);
   const [selectedAudioStream, setSelectedAudioStream] = useState<number>(-1);
   const [selectedSubtitleStream, setSelectedSubtitleStream] =
-    useState<number>(0);
+    useState<number>(-1);
   const [maxBitrate, setMaxBitrate] = useState<Bitrate>({
     key: "Max",
     value: undefined,
@@ -117,6 +117,8 @@ export const ItemContent: React.FC<{ id: string }> = React.memo(({ id }) => {
         itemId: id,
       });
 
+      console.log("itemID", res?.Id);
+
       return res;
     },
     enabled: !!id && !!api,

components/OverviewText.tsx

@@ -19,7 +19,7 @@ export const OverviewText: React.FC<Props> = ({
 
   return (
     <View className="flex flex-col" {...props}>
-      <Text className="text-xl font-bold mb-2">Overview</Text>
+      <Text className="text-lg font-bold mb-2">Overview</Text>
       <TouchableOpacity
         onPress={() =>
           setLimit((prev) =>

components/PlatformBlurView.tsx

@@ -0,0 +1,35 @@
+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,5 +1,8 @@
+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";
@@ -23,10 +26,7 @@ import Animated, {
   withTiming,
 } from "react-native-reanimated";
 import { Button } from "./Button";
-import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
-import { apiAtom } from "@/providers/JellyfinProvider";
-import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
-import { getParentBackdropImageUrl } from "@/utils/jellyfin/image/getParentBackdropImageUrl";
+import { Text } from "./common/Text";
 
 interface Props extends React.ComponentProps<typeof Button> {
   item?: BaseItemDto | null;
@@ -55,6 +55,10 @@ export const PlayButton: React.FC<Props> = ({ item, url, ...props }) => {
   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) {
@@ -222,7 +226,7 @@ export const PlayButton: React.FC<Props> = ({ item, url, ...props }) => {
     backgroundColor: interpolateColor(
       colorChangeProgress.value,
       [0, 1],
-      [startColor.value.average, endColor.value.average]
+      [startColor.value.primary, endColor.value.primary]
     ),
   }));
 
@@ -254,51 +258,64 @@ export const PlayButton: React.FC<Props> = ({ item, url, ...props }) => {
    */
 
   return (
-    <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%",
-            },
-          ]}
-        />
-      </View>
-
-      <Animated.View
-        style={[animatedAverageStyle]}
-        className="absolute w-full h-full top-0 left-0 rounded-xl"
-      />
-      <View
-        style={{
-          borderWidth: 1,
-          borderColor: colorAtom.primary,
-          borderStyle: "solid",
-        }}
-        className="flex flex-row items-center justify-center bg-transparent rounded-xl z-20 h-12 w-full "
+    <View>
+      <TouchableOpacity
+        accessibilityLabel="Play button"
+        accessibilityHint="Tap to play the media"
+        onPress={onPress}
+        className="relative"
+        {...props}
       >
-        <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 className="absolute w-full h-full top-0 left-0 rounded-xl z-10 overflow-hidden">
+          <Animated.View
+            style={[
+              animatedPrimaryStyle,
+              animatedWidthStyle,
+              {
+                height: "100%",
+              },
+            ]}
+          />
         </View>
+
+        <Animated.View
+          style={[animatedAverageStyle, { 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>
-    </TouchableOpacity>
+    </View>
   );
 };

components/SubtitleTrackSelector.tsx

@@ -9,6 +9,7 @@ import {
 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;
@@ -22,6 +23,8 @@ export const SubtitleTrackSelector: React.FC<Props> = ({
   selected,
   ...props
 }) => {
+  const [settings] = useSettings();
+
   const subtitleStreams = useMemo(
     () => source.MediaStreams?.filter((x) => x.Type === "Subtitle") ?? [],
     [source]
@@ -33,13 +36,21 @@ export const SubtitleTrackSelector: React.FC<Props> = ({
   );
 
   useEffect(() => {
-    const index = source.DefaultSubtitleStreamIndex;
-    if (index !== undefined && index !== null) {
-      onChange(index);
-    } else {
-      onChange(-1);
+    // 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;
     }
-  }, []);
+
+    onChange(-1);
+  }, [subtitleStreams, settings]);
 
   if (subtitleStreams.length === 0) return null;
 

components/common/HeaderBackButton.tsx

@@ -1,4 +1,5 @@
 import {
+  Platform,
   TouchableOpacity,
   TouchableOpacityProps,
   View,
@@ -21,7 +22,7 @@ export const HeaderBackButton: React.FC<Props> = ({
 }) => {
   const router = useRouter();
 
-  if (background === "transparent")
+  if (background === "transparent" && Platform.OS !== "android")
     return (
       <BlurView
         {...props}
@@ -52,7 +53,7 @@ export const HeaderBackButton: React.FC<Props> = ({
         className="drop-shadow-2xl"
         name="arrow-back"
         size={24}
-        color="#077DF2"
+        color="white"
       />
     </TouchableOpacity>
   );

components/common/TouchableItemRouter.tsx

@@ -2,12 +2,48 @@ 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 { Alert, TouchableOpacity, TouchableOpacityProps } from "react-native";
+import { TouchableOpacity, TouchableOpacityProps } from "react-native";
 
 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,
@@ -23,54 +59,9 @@ export const TouchableItemRouter: React.FC<PropsWithChildren<Props>> = ({
       <TouchableOpacity
         onPress={() => {
           Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
-
-          if (item.Type === "Series") {
-            router.push(`/(auth)/(tabs)/${from}/series/${item.Id}`);
-            return;
-          }
-
-          if (item.Type === "MusicAlbum") {
-            router.push(`/(auth)/(tabs)/${from}/albums/${item.Id}`);
-            return;
-          }
-
-          if (item.Type === "Audio") {
-            router.push(`/(auth)/(tabs)/${from}/albums/${item.AlbumId}`);
-            return;
-          }
-
-          if (item.Type === "MusicArtist") {
-            router.push(`/(auth)/(tabs)/${from}/artists/${item.Id}`);
-            return;
-          }
-
-          if (item.Type === "Person") {
-            router.push(`/(auth)/(tabs)/${from}/actors/${item.Id}`);
-            return;
-          }
-
-          if (item.Type === "BoxSet") {
-            router.push(`/(auth)/(tabs)/${from}/collections/${item.Id}`);
-            return;
-          }
-
-          if (item.Type === "UserView") {
-            router.push(`/(auth)/(tabs)/${from}/collections/${item.Id}`);
-            return;
-          }
-
-          if (item.Type === "CollectionFolder") {
-            router.push(`/(auth)/(tabs)/(libraries)/${item.Id}`);
-            return;
-          }
-
-          // Same as default
-          // if (item.Type === "Episode") {
-          //   router.push(`/items/${item.Id}`);
-          //   return;
-          // }
-
-          router.push(`/(auth)/(tabs)/${from}/items/page?id=${item.Id}`);
+          const url = itemRouter(item, from);
+          // @ts-ignore
+          router.push(url);
         }}
         {...props}
       >

components/downloads/EpisodeCard.tsx

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

components/home/LargeMovieCarousel.tsx

@@ -4,25 +4,29 @@ import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
 import { getLogoImageUrlById } from "@/utils/jellyfin/image/getLogoImageUrlById";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 import { Image } from "expo-image";
-import { useRouter } from "expo-router";
 import { useAtom } from "jotai";
-import React, { useMemo } from "react";
-import { Dimensions, View, ViewProps } from "react-native";
-import { useSharedValue } from "react-native-reanimated";
+import React, { useCallback, useMemo } from "react";
+import { Dimensions, TouchableOpacity, View, ViewProps } from "react-native";
+import Animated, {
+  runOnJS,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
 import Carousel, {
   ICarouselInstance,
   Pagination,
 } from "react-native-reanimated-carousel";
-import { TouchableItemRouter } from "../common/TouchableItemRouter";
+import { itemRouter, 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);
@@ -122,7 +126,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(() => {
@@ -141,11 +145,41 @@ 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 (
-    <TouchableItemRouter item={item}>
-      <View className="px-4">
+    <GestureDetector gesture={tap}>
+      <Animated.View
+        style={{
+          opacity: opacity,
+        }}
+        className="px-4"
+      >
         <View className="relative flex justify-center rounded-2xl overflow-hidden border border-neutral-800">
           <Image
             source={{
@@ -171,7 +205,7 @@ const RenderItem: React.FC<{ item: BaseItemDto }> = ({ item }) => {
             />
           </View>
         </View>
-      </View>
-    </TouchableItemRouter>
+      </Animated.View>
+    </GestureDetector>
   );
 };

components/home/ScrollingCollectionList.tsx

@@ -1,18 +1,18 @@
 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 {
-  type QueryKey,
-  useQuery,
-  type QueryFunction,
-} from "@tanstack/react-query";
 import SeriesPoster from "../posters/SeriesPoster";
-import { EpisodePoster } from "../posters/EpisodePoster";
 
 interface Props extends ViewProps {
   title?: string | null;
@@ -32,6 +32,7 @@ export const ScrollingCollectionList: React.FC<Props> = ({
   queryKey,
   ...props
 }) => {
+  const [settings] = useSettings();
   const { data, isLoading } = useQuery({
     queryKey,
     queryFn,
@@ -43,7 +44,7 @@ export const ScrollingCollectionList: React.FC<Props> = ({
 
   return (
     <View {...props}>
-      <Text className="px-4 text-2xl font-bold mb-2 text-neutral-100">
+      <Text className="px-4 text-lg font-bold mb-2 text-neutral-100">
         {title}
       </Text>
       <HorizontalScroll

components/library/LibraryItemCard.tsx

@@ -1,22 +1,20 @@
-import { TouchableOpacityProps, View, ViewProps } from "react-native";
 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 { useAtom } from "jotai";
-import { useEffect, useMemo, useState } from "react";
-import { TouchableItemRouter } from "../common/TouchableItemRouter";
+import { Ionicons } from "@expo/vector-icons";
 import {
   BaseItemDto,
-  BaseItemKind,
   CollectionType,
 } from "@jellyfin/sdk/lib/generated-client/models";
-import { Image } from "expo-image";
-import { getColors, ImageColorsResult } from "react-native-image-colors";
-import { useQuery } from "@tanstack/react-query";
 import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
-import { sortBy } from "lodash";
-import { useSettings } from "@/utils/atoms/settings";
-import { Ionicons } from "@expo/vector-icons";
+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;
@@ -127,7 +125,7 @@ export const LibraryItemCard: React.FC<Props> = ({ library, ...props }) => {
             {library.Name}
           </Text>
           {settings?.libraryOptions?.showStats && (
-            <Text className="font-bold text-xs text-neutral-500 text-start px-4 ml-auto">
+            <Text className="font-bold text-xs text-neutral-500 text-start ml-auto">
               {itemsCount} items
             </Text>
           )}

components/series/NextUp.tsx

@@ -10,6 +10,7 @@ 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);
@@ -46,16 +47,14 @@ export const NextUp: React.FC<{ seriesId: string }> = ({ seriesId }) => {
       <HorizontalScroll
         data={items}
         renderItem={(item, index) => (
-          <TouchableOpacity
-            onPress={() => {
-              router.push(`/(auth)/items/page?id=${item.Id}`);
-            }}
+          <TouchableItemRouter
+            item={item}
             key={item.Id}
             className="flex flex-col w-44"
           >
             <ContinueWatchingPoster item={item} useEpisodePoster />
             <ItemCardText item={item} />
-          </TouchableOpacity>
+          </TouchableItemRouter>
         )}
       />
     </View>

components/series/SeasonPicker.tsx

@@ -15,6 +15,7 @@ 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;
@@ -192,11 +193,9 @@ export const SeasonPicker: React.FC<Props> = ({ item, initialSeasonIndex }) => {
           </View>
         ) : (
           episodes?.map((e: BaseItemDto) => (
-            <TouchableOpacity
+            <TouchableItemRouter
+              item={e}
               key={e.Id}
-              onPress={() => {
-                router.push(`/(auth)/items/page?id=${e.Id}`);
-              }}
               className="flex flex-col mb-4"
             >
               <View className="flex flex-row items-center mb-2">
@@ -229,7 +228,7 @@ export const SeasonPicker: React.FC<Props> = ({ item, initialSeasonIndex }) => {
               >
                 {e.Overview}
               </Text>
-            </TouchableOpacity>
+            </TouchableItemRouter>
           ))
         )}
       </View>

components/settings/MediaToggles.tsx

@@ -0,0 +1,125 @@
+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,17 +1,32 @@
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { DownloadOptions, useSettings } from "@/utils/atoms/settings";
+import {
+  DefaultLanguageOption,
+  DownloadOptions,
+  ScreenOrientationEnum,
+  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 } from "react-native";
+import {
+  Linking,
+  Switch,
+  TouchableOpacity,
+  View,
+  ViewProps,
+} 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";
 
-export const SettingToggles: React.FC = () => {
+interface Props extends ViewProps {}
+
+export const SettingToggles: React.FC<Props> = ({ ...props }) => {
   const [settings, updateSettings] = useSettings();
 
   const [api] = useAtom(apiAtom);
@@ -43,315 +58,387 @@ export const SettingToggles: React.FC = () => {
     staleTime: 0,
   });
 
+  if (!settings) return null;
+
   return (
-    <View className="flex flex-col rounded-xl mb-4 overflow-hidden border-neutral-800 divide-y-2 divide-solid divide-neutral-800 ">
-      <View className="flex flex-row items-center justify-between bg-neutral-900 p-4">
-        <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 {...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>
-        <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 download quality.
-          </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}
-          >
-            <DropdownMenu.Label>Quality</DropdownMenu.Label>
-            {DownloadOptions.map((option) => (
-              <DropdownMenu.Item
-                key={option.value}
-                onSelect={() => {
-                  updateSettings({ downloadQuality: option });
-                }}
-              >
-                <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>
 
-      <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>
+      <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" : ""}
-      `}
-      >
-        <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"
+            <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={() => {
-                    updateSettings({ marlinServerUrl: marlinUrl });
+                    Linking.openURL(
+                      "https://github.com/lostb1t/jellyfin-plugin-media-lists"
+                    );
                   }}
                 >
-                  Save
-                </Button>
+                  <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;
+                        }
 
-              <Text className="text-neutral-500 mt-2">
-                {settings?.marlinServerUrl}
-              </Text>
-            </>
+                        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">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>
+
+                  <Text className="text-neutral-500 mt-2">
+                    {settings.marlinServerUrl}
+                  </Text>
+                </>
+              </View>
+            )}
+          </View>
+        </View>
       </View>
     </View>
   );

components/stacks/NestedTabPageStack.tsx

@@ -15,7 +15,6 @@ const routes = [
   "albums/[albumId]",
   "artists/index",
   "artists/[artistId]",
-  "collections/[collectionId]",
   "items/page",
   "series/[id]",
 ];

constants/Languages.ts

@@ -0,0 +1,39 @@
+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.10.3",
+      "channel": "0.14.0",
       "android": {
         "image": "latest"
       }
     },
     "production-apk": {
-      "channel": "0.10.3",
+      "channel": "0.14.0",
       "android": {
         "buildType": "apk",
         "image": "latest"

hooks/useAdjacentEpisodes.ts

@@ -0,0 +1,76 @@
+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

@@ -0,0 +1,41 @@
+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

@@ -28,7 +28,7 @@ export const useImageColors = (
             secondary = colors.muted;
           } else if (colors.platform === "ios") {
             primary = colors.primary;
-            secondary = colors.detail;
+            secondary = colors.secondary;
             average = colors.background;
           }
 

hooks/useNavigationBarVisibility.ts

@@ -0,0 +1,27 @@
+// 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,6 +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";
 
 /**
  * Custom hook for remuxing HLS to MP4 using FFmpeg.
@@ -28,6 +29,10 @@ 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}`;
 
       writeToLog(

hooks/useTrickplay.ts

@@ -0,0 +1,108 @@
+// 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,29 +20,29 @@
     "@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.51.16",
+    "@tanstack/react-query": "^5.56.2",
     "@types/lodash": "^4.17.7",
     "@types/uuid": "^10.0.0",
-    "axios": "^1.7.3",
-    "expo": "~51.0.31",
+    "axios": "^1.7.7",
+    "expo": "^51.0.32",
     "expo-blur": "~13.0.2",
     "expo-build-properties": "~0.12.5",
     "expo-constants": "~16.0.2",
-    "expo-dev-client": "~4.0.25",
+    "expo-dev-client": "~4.0.26",
     "expo-device": "~6.0.2",
-    "expo-font": "~12.0.9",
+    "expo-font": "~12.0.10",
     "expo-haptics": "~13.0.1",
     "expo-image": "~1.12.15",
     "expo-keep-awake": "~13.0.2",
     "expo-linear-gradient": "~13.0.2",
     "expo-linking": "~6.3.1",
     "expo-navigation-bar": "~3.0.7",
+    "expo-network": "~6.0.1",
     "expo-router": "~3.5.23",
     "expo-screen-orientation": "~7.0.5",
     "expo-sensors": "~13.0.9",
@@ -50,31 +50,34 @@
     "expo-status-bar": "~1.12.1",
     "expo-system-ui": "~3.0.7",
     "expo-updates": "~0.25.24",
+    "expo-video": "^1.2.6",
     "expo-web-browser": "~13.0.3",
     "ffmpeg-kit-react-native": "^6.0.2",
-    "jotai": "^2.9.1",
+    "jotai": "^2.9.3",
     "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.2",
+    "react-native-google-cast": "^4.8.3",
     "react-native-image-colors": "^2.4.0",
     "react-native-ios-context-menu": "^2.5.1",
     "react-native-ios-utilities": "^4.4.5",
     "react-native-reanimated": "~3.10.1",
-    "react-native-reanimated-carousel": "4.0.0-alpha.12",
+    "react-native-reanimated-carousel": "4.0.0-canary.15",
     "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.4.5",
+    "react-native-video": "^6.5.0",
     "react-native-web": "~0.19.10",
+    "sonner-native": "^0.9.2",
     "tailwindcss": "3.3.2",
     "use-debounce": "^10.0.3",
     "uuid": "^10.0.0",
@@ -91,5 +94,12 @@
     "react-test-renderer": "18.2.0",
     "typescript": "~5.3.3"
   },
-  "private": true
+  "private": true,
+  "expo": {
+    "doctor": {
+      "reactNativeDirectoryCheck": {
+        "enabled": true
+      }
+    }
+  }
 }

providers/JellyfinProvider.tsx

@@ -63,7 +63,7 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
       setJellyfin(
         () =>
           new Jellyfin({
-            clientInfo: { name: "Streamyfin", version: "0.10.3" },
+            clientInfo: { name: "Streamyfin", version: "0.14.0" },
             deviceInfo: { name: Platform.OS === "ios" ? "iOS" : "Android", id },
           })
       );
@@ -97,7 +97,7 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
     return {
       authorization: `MediaBrowser Client="Streamyfin", Device=${
         Platform.OS === "android" ? "Android" : "iOS"
-      }, DeviceId="${deviceId}", Version="0.10.3"`,
+      }, DeviceId="${deviceId}", Version="0.14.0"`,
     };
   }, [deviceId]);
 

providers/PlaybackProvider.tsx

@@ -22,11 +22,16 @@ import { getMediaInfoApi } from "@jellyfin/sdk/lib/utils/api";
 import * as Linking from "expo-linking";
 import { useAtom } from "jotai";
 import { debounce } from "lodash";
-import { Alert, Platform } from "react-native";
+import { 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";
 
-type CurrentlyPlayingState = {
+export type CurrentlyPlayingState = {
   url: string;
   item: BaseItemDto;
 };
@@ -36,20 +41,23 @@ 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;
   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);
@@ -61,16 +69,17 @@ 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 previousVolume = useRef<number | null>(null);
-
   const [isPlaying, _setIsPlaying] = useState<boolean>(false);
+  const [isBuffering, setIsBuffering] = useState<boolean>(true);
   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,46 +96,78 @@ export const PlaybackProvider: React.FC<{ children: ReactNode }> = ({
     [_setVolume]
   );
 
+  const player = useVideoPlayer(currentlyPlaying?.url || null, () => {
+    if (player) player.play();
+  });
+
   const { data: deviceId } = useQuery({
     queryKey: ["deviceId", api],
     queryFn: getDeviceId,
   });
 
+  const startDownloadedFilePlayback = useCallback(
+    async (state: CurrentlyPlayingState | null) => {
+      if (!state) {
+        setCurrentlyPlaying(null);
+        setIsPlaying(false);
+        return;
+      }
+
+      setCurrentlyPlaying(state);
+      setIsPlaying(true);
+    },
+    []
+  );
+
   const setCurrentlyPlayingState = useCallback(
     async (state: CurrentlyPlayingState | null) => {
-      if (!api) return;
+      try {
+        if (state?.item.Id && user?.Id) {
+          const vlcLink = "vlc://" + state?.url;
+          if (vlcLink && settings?.openInVLC) {
+            Linking.openURL("vlc://" + state?.url || "");
+            return;
+          }
 
-      if (state && state.item.Id && user?.Id) {
-        const vlcLink = "vlc://" + state?.url;
-        if (vlcLink && settings?.openInVLC) {
-          Linking.openURL("vlc://" + state?.url || "");
-          return;
+          const res = await getMediaInfoApi(api!).getPlaybackInfo({
+            itemId: state.item.Id,
+            userId: user.Id,
+          });
+
+          await postCapabilities({
+            api,
+            itemId: state.item.Id,
+            sessionId: res.data.PlaySessionId,
+          });
+
+          setSession(res.data);
+          setCurrentlyPlaying(state);
+          setIsPlaying(true);
+        } else {
+          setCurrentlyPlaying(null);
+          setIsFullscreen(false);
+          setIsPlaying(false);
         }
-
-        const res = await getMediaInfoApi(api).getPlaybackInfo({
-          itemId: state.item.Id,
-          userId: user.Id,
-        });
-
-        await postCapabilities({
-          api,
-          itemId: state.item.Id,
-          sessionId: res.data.PlaySessionId,
-        });
-
-        setSession(res.data);
-        setCurrentlyPlaying(state);
-        setIsPlaying(true);
-
-        if (settings?.openFullScreenVideoPlayerByDefault) {
-          setTimeout(() => {
-            presentFullscreenPlayer();
-          }, 300);
-        }
-      } 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",
+            },
+          ]
+        );
       }
     },
     [settings, user, api]
@@ -135,7 +176,7 @@ export const PlaybackProvider: React.FC<{ children: ReactNode }> = ({
   const playVideo = useCallback(
     (triggerRef: boolean = true) => {
       if (triggerRef === true) {
-        videoRef.current?.resume();
+        player.play();
       }
       _setIsPlaying(true);
       reportPlaybackProgress({
@@ -152,7 +193,7 @@ export const PlaybackProvider: React.FC<{ children: ReactNode }> = ({
   const pauseVideo = useCallback(
     (triggerRef: boolean = true) => {
       if (triggerRef === true) {
-        videoRef.current?.pause();
+        player.pause();
       }
       _setIsPlaying(false);
       reportPlaybackProgress({
@@ -167,13 +208,15 @@ export const PlaybackProvider: React.FC<{ children: ReactNode }> = ({
   );
 
   const stopPlayback = useCallback(async () => {
+    const id = currentlyPlaying?.item?.Id;
+    setCurrentlyPlayingState(null);
+
     await reportPlaybackStopped({
       api,
-      itemId: currentlyPlaying?.item?.Id,
+      itemId: id,
       sessionId: session?.PlaySessionId,
       positionTicks: progressTicks ? progressTicks : 0,
     });
-    setCurrentlyPlayingState(null);
   }, [currentlyPlaying?.item.Id, session?.PlaySessionId, progressTicks, api]);
 
   const setIsPlaying = useCallback(
@@ -207,20 +250,10 @@ export const PlaybackProvider: React.FC<{ children: ReactNode }> = ({
   const onProgress = useCallback(
     debounce((e: OnProgressData) => {
       _onProgress(e);
-    }, 1000),
+    }, 500),
     [_onProgress]
   );
 
-  const presentFullscreenPlayer = useCallback(() => {
-    videoRef.current?.presentFullscreenPlayer();
-    setIsFullscreen(true);
-  }, []);
-
-  const dismissFullscreenPlayer = useCallback(() => {
-    videoRef.current?.dismissFullscreenPlayer();
-    setIsFullscreen(false);
-  }, []);
-
   useEffect(() => {
     if (!deviceId || !api?.accessToken) return;
 
@@ -304,12 +337,13 @@ export const PlaybackProvider: React.FC<{ children: ReactNode }> = ({
   return (
     <PlaybackContext.Provider
       value={{
+        player,
         onProgress,
+        isBuffering,
+        setIsBuffering,
         progressTicks,
         setVolume,
         setIsPlaying,
-        setIsFullscreen,
-        isFullscreen,
         isPlaying,
         currentlyPlaying,
         sessionData: session,
@@ -318,8 +352,8 @@ export const PlaybackProvider: React.FC<{ children: ReactNode }> = ({
         setCurrentlyPlayingState,
         pauseVideo,
         stopPlayback,
-        presentFullscreenPlayer,
-        dismissFullscreenPlayer,
+        startDownloadedFilePlayback,
+        subtitles,
       }}
     >
       {children}

utils/OrientationLockConverter.ts

@@ -0,0 +1,21 @@
+import { Orientation, OrientationLock } from "expo-screen-orientation";
+
+function orientationToOrientationLock(
+  orientation: Orientation
+): OrientationLock {
+  switch (orientation) {
+    case Orientation.PORTRAIT_UP:
+      return OrientationLock.PORTRAIT_UP;
+    case Orientation.PORTRAIT_DOWN:
+      return OrientationLock.PORTRAIT_DOWN;
+    case Orientation.LANDSCAPE_LEFT:
+      return OrientationLock.LANDSCAPE_LEFT;
+    case Orientation.LANDSCAPE_RIGHT:
+      return OrientationLock.LANDSCAPE_RIGHT;
+    case Orientation.UNKNOWN:
+    default:
+      return OrientationLock.DEFAULT;
+  }
+}
+
+export default orientationToOrientationLock;

utils/atoms/filters.ts

@@ -1,4 +1,6 @@
+import AsyncStorage from "@react-native-async-storage/async-storage";
 import { atom } from "jotai";
+import { atomWithStorage, createJSONStorage } from "jotai/utils";
 
 export enum SortByOption {
   Default = "Default",
@@ -65,3 +67,67 @@ export const sortByAtom = atom<SortByOption[]>([SortByOption.Default]);
 export const sortOrderAtom = atom<SortOrderOption[]>([
   SortOrderOption.Ascending,
 ]);
+
+/**
+ * Sort preferences with persistence
+ */
+export interface SortPreference {
+  [libraryId: string]: SortByOption;
+}
+
+export interface SortOrderPreference {
+  [libraryId: string]: SortOrderOption;
+}
+
+const defaultSortPreference: SortPreference = {};
+const defaultSortOrderPreference: SortOrderPreference = {};
+
+export const sortByPreferenceAtom = atomWithStorage<SortPreference>(
+  "sortByPreference",
+  defaultSortPreference,
+  {
+    getItem: async (key) => {
+      const value = await AsyncStorage.getItem(key);
+      return value ? JSON.parse(value) : null;
+    },
+    setItem: async (key, value) => {
+      await AsyncStorage.setItem(key, JSON.stringify(value));
+    },
+    removeItem: async (key) => {
+      await AsyncStorage.removeItem(key);
+    },
+  }
+);
+
+export const sortOrderPreferenceAtom = atomWithStorage<SortOrderPreference>(
+  "sortOrderPreference",
+  defaultSortOrderPreference,
+  {
+    getItem: async (key) => {
+      const value = await AsyncStorage.getItem(key);
+      return value ? JSON.parse(value) : null;
+    },
+    setItem: async (key, value) => {
+      await AsyncStorage.setItem(key, JSON.stringify(value));
+    },
+    removeItem: async (key) => {
+      await AsyncStorage.removeItem(key);
+    },
+  }
+);
+
+// Helper functions to get and set sort preferences
+export const getSortByPreference = (
+  libraryId: string,
+  preferences: SortPreference
+) => {
+  return preferences?.[libraryId] || null;
+};
+
+export const getSortOrderPreference = (
+  libraryId: string,
+  preferences: SortOrderPreference
+) => {
+  return preferences?.[libraryId] || null;
+};
+

utils/atoms/orientation.ts

@@ -1,5 +1,4 @@
 import * as ScreenOrientation from "expo-screen-orientation";
-import { Orientation } from "expo-screen-orientation";
 import { atom } from "jotai";
 
 export const orientationAtom = atom<number>(

utils/atoms/primaryColor.ts

@@ -48,6 +48,19 @@ const calculateRelativeLuminance = (rgb: number[]): number => {
   return 0.2126 * r + 0.7152 * g + 0.0722 * b;
 };
 
+const isCloseToBlack = (color: string): boolean => {
+  const r = parseInt(color.slice(1, 3), 16);
+  const g = parseInt(color.slice(3, 5), 16);
+  const b = parseInt(color.slice(5, 7), 16);
+
+  // Check if the color is very dark (close to black)
+  return r < 20 && g < 20 && b < 20;
+};
+
+const adjustToNearBlack = (color: string): string => {
+  return "#212121"; // A very dark gray, almost black
+};
+
 const baseThemeColorAtom = atom<ThemeColors>({
   primary: "#FFFFFF",
   secondary: "#000000",
@@ -59,12 +72,15 @@ export const itemThemeColorAtom = atom(
   (get) => get(baseThemeColorAtom),
   (get, set, update: Partial<ThemeColors>) => {
     const currentColors = get(baseThemeColorAtom);
-    const newColors = { ...currentColors, ...update };
+    let newColors = { ...currentColors, ...update };
+
+    // Adjust primary color if it's too close to black
+    if (newColors.primary && isCloseToBlack(newColors.primary)) {
+      newColors.primary = adjustToNearBlack(newColors.primary);
+    }
 
     // Recalculate text color if primary color changes
-    if (update.average) {
-      newColors.text = calculateTextColor(update.average);
-    }
+    if (update.primary) newColors.text = calculateTextColor(newColors.primary);
 
     set(baseThemeColorAtom, newColors);
   }

utils/atoms/settings.ts

@@ -1,6 +1,7 @@
 import { atom, useAtom } from "jotai";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import { useEffect } from "react";
+import * as ScreenOrientation from "expo-screen-orientation";
 
 export type DownloadQuality = "original" | "high" | "low";
 
@@ -9,6 +10,22 @@ export type DownloadOption = {
   value: DownloadQuality;
 };
 
+export const ScreenOrientationEnum: Record<
+  ScreenOrientation.OrientationLock,
+  string
+> = {
+  [ScreenOrientation.OrientationLock.DEFAULT]: "Default",
+  [ScreenOrientation.OrientationLock.ALL]: "All",
+  [ScreenOrientation.OrientationLock.PORTRAIT]: "Portrait",
+  [ScreenOrientation.OrientationLock.PORTRAIT_UP]: "Portrait Up",
+  [ScreenOrientation.OrientationLock.PORTRAIT_DOWN]: "Portrait Down",
+  [ScreenOrientation.OrientationLock.LANDSCAPE]: "Landscape",
+  [ScreenOrientation.OrientationLock.LANDSCAPE_LEFT]: "Landscape Left",
+  [ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT]: "Landscape Right",
+  [ScreenOrientation.OrientationLock.OTHER]: "Other",
+  [ScreenOrientation.OrientationLock.UNKNOWN]: "Unknown",
+};
+
 export const DownloadOptions: DownloadOption[] = [
   {
     label: "Original quality",
@@ -32,10 +49,14 @@ export type LibraryOptions = {
   showStats: boolean;
 };
 
+export type DefaultLanguageOption = {
+  value: string;
+  label: string;
+};
+
 type Settings = {
   autoRotate?: boolean;
   forceLandscapeInVideoPlayer?: boolean;
-  openFullScreenVideoPlayerByDefault?: boolean;
   usePopularPlugin?: boolean;
   deviceProfile?: "Expo" | "Native" | "Old";
   forceDirectPlay?: boolean;
@@ -45,6 +66,10 @@ type Settings = {
   openInVLC?: boolean;
   downloadQuality?: DownloadOption;
   libraryOptions: LibraryOptions;
+  defaultSubtitleLanguage: DefaultLanguageOption | null;
+  defaultAudioLanguage: DefaultLanguageOption | null;
+  showHomeTitles: boolean;
+  defaultVideoOrientation: ScreenOrientation.OrientationLock;
 };
 
 /**
@@ -59,7 +84,6 @@ const loadSettings = async (): Promise<Settings> => {
   const defaultValues: Settings = {
     autoRotate: true,
     forceLandscapeInVideoPlayer: false,
-    openFullScreenVideoPlayerByDefault: false,
     usePopularPlugin: false,
     deviceProfile: "Expo",
     forceDirectPlay: false,
@@ -75,6 +99,10 @@ const loadSettings = async (): Promise<Settings> => {
       showTitles: true,
       showStats: true,
     },
+    defaultAudioLanguage: null,
+    defaultSubtitleLanguage: null,
+    showHomeTitles: true,
+    defaultVideoOrientation: ScreenOrientation.OrientationLock.DEFAULT,
   };
 
   try {

utils/hls/parseM3U8ForSubtitles.ts

@@ -0,0 +1,55 @@
+import axios from "axios";
+
+export interface SubtitleTrack {
+  index: number;
+  name: string;
+  uri: string;
+  language: string;
+  default: boolean;
+  forced: boolean;
+  autoSelect: boolean;
+}
+
+export async function parseM3U8ForSubtitles(
+  url: string
+): Promise<SubtitleTrack[]> {
+  try {
+    const response = await axios.get(url, { responseType: "text" });
+    const lines = response.data.split(/\r?\n/);
+    const subtitleTracks: SubtitleTrack[] = [];
+    let index = 0;
+
+    lines.forEach((line: string) => {
+      if (line.startsWith("#EXT-X-MEDIA:TYPE=SUBTITLES")) {
+        const attributes = parseAttributes(line);
+        const track: SubtitleTrack = {
+          index: index++,
+          name: attributes["NAME"] || "",
+          uri: attributes["URI"] || "",
+          language: attributes["LANGUAGE"] || "",
+          default: attributes["DEFAULT"] === "YES",
+          forced: attributes["FORCED"] === "YES",
+          autoSelect: attributes["AUTOSELECT"] === "YES",
+        };
+        subtitleTracks.push(track);
+      }
+    });
+
+    return subtitleTracks;
+  } catch (error) {
+    console.error("Failed to fetch or parse the M3U8 file:", error);
+    throw error;
+  }
+}
+
+function parseAttributes(line: string): { [key: string]: string } {
+  const attributes: { [key: string]: string } = {};
+  const parts = line.split(",");
+  parts.forEach((part) => {
+    const [key, value] = part.split("=");
+    if (key && value) {
+      attributes[key.trim()] = value.replace(/"/g, "").trim();
+    }
+  });
+  return attributes;
+}

utils/jellyfin/media/getStreamUrl.ts

@@ -5,6 +5,7 @@ import {
   MediaSourceInfo,
   PlaybackInfoResponse,
 } from "@jellyfin/sdk/lib/generated-client/models";
+import { getAuthHeaders } from "../jellyfin";
 
 export const getStreamUrl = async ({
   api,
@@ -15,7 +16,7 @@ export const getStreamUrl = async ({
   sessionData,
   deviceProfile = ios,
   audioStreamIndex = 0,
-  subtitleStreamIndex = 0,
+  subtitleStreamIndex = undefined,
   forceDirectPlay = false,
   height,
   mediaSourceId,
@@ -39,6 +40,9 @@ export const getStreamUrl = async ({
 
   const itemId = item.Id;
 
+  /**
+   * Build the stream URL for videos
+   */
   const response = await api.axiosInstance.post(
     `${api.basePath}/Items/${itemId}/PlaybackInfo`,
     {
@@ -58,9 +62,7 @@ export const getStreamUrl = async ({
       EnableMpegtsM2TsMode: false,
     },
     {
-      headers: {
-        Authorization: `MediaBrowser DeviceId="${api.deviceInfo.id}", Token="${api.accessToken}"`,
-      },
+      headers: getAuthHeaders(api),
     }
   );
 
@@ -80,10 +82,8 @@ export const getStreamUrl = async ({
 
   if (mediaSource.SupportsDirectPlay || forceDirectPlay === true) {
     if (item.MediaType === "Video") {
-      console.log("Using direct stream for video!");
       url = `${api.basePath}/Videos/${itemId}/stream.mp4?playSessionId=${sessionData.PlaySessionId}&mediaSourceId=${mediaSource.Id}&static=true&subtitleStreamIndex=${subtitleStreamIndex}&audioStreamIndex=${audioStreamIndex}&deviceId=${api.deviceInfo.id}&api_key=${api.accessToken}`;
     } else if (item.MediaType === "Audio") {
-      console.log("Using direct stream for audio!");
       const searchParams = new URLSearchParams({
         UserId: userId,
         DeviceId: api.deviceInfo.id,
@@ -104,7 +104,6 @@ export const getStreamUrl = async ({
       }/Audio/${itemId}/universal?${searchParams.toString()}`;
     }
   } else if (mediaSource.TranscodingUrl) {
-    console.log("Using transcoded stream!");
     url = `${api.basePath}${mediaSource.TranscodingUrl}`;
   }
 

utils/secondsToTicks.ts

@@ -0,0 +1,6 @@
+// seconds to ticks util
+
+export function secondsToTicks(seconds: number): number {
+  "worklet";
+  return seconds * 10000000;
+}