wip

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -43,7 +43,6 @@ body:
       label: Version
       description: What version of Streamyfin are you running?
       options:
-        - 0.27.0
         - 0.26.1
         - 0.26.0
         - 0.25.0

.github/workflows/main.yml

@@ -1,39 +0,0 @@
-name: Handle Stale Issues
-on:
-  schedule:
-    - cron: "30 1 * * *" # Runs at 1:30 UTC every day
-
-jobs:
-  stale:
-    runs-on: ubuntu-latest
-    permissions:
-      issues: write
-      pull-requests: write
-
-    steps:
-      - uses: actions/stale@v9
-        with:
-          # Issue specific settings
-          days-before-issue-stale: 90
-          days-before-issue-close: 7
-          stale-issue-label: "stale"
-          stale-issue-message: |
-            This issue has been automatically marked as stale because it has had no activity in the last 30 days.
-
-            If this issue is still relevant, please leave a comment to keep it open. 
-            Otherwise, it will be closed in 7 days if no further activity occurs.
-
-            Thank you for your contributions!
-          close-issue-message: |
-            This issue has been automatically closed because it has been inactive for 7 days since being marked as stale.
-
-            If you believe this issue is still relevant, please feel free to reopen it and add a comment explaining the current status.
-
-          # Pull request settings (disabled)
-          days-before-pr-stale: -1
-          days-before-pr-close: -1
-
-          # Other settings
-          repo-token: ${{ secrets.GITHUB_TOKEN }}
-          operations-per-run: 100
-          exempt-issue-labels: "Roadmap v1,help needed,enhancement"

.gitignore

@@ -10,7 +10,6 @@ npm-debug.*
 *.orig.*
 web-build/
 modules/vlc-player/android/build
-bun.lockb
 
 # macOS
 .DS_Store
@@ -43,4 +42,4 @@ credentials.json
 .vscode/
 .idea/
 .ruby-lsp
-modules/hls-downloader/android/build
+modules/hls-downloader/android/build

.vscode/settings.json

@@ -9,8 +9,7 @@
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.formatOnSave": true
   },
-  "prettier.printWidth": 120,
   "[swift]": {
-    "editor.defaultFormatter": "sswg.swift-lang"
+    "editor.defaultFormatter": "swiftlang.swift-vscode"
   }
 }

Makefile

@@ -1,6 +0,0 @@
-e2e:
-	maestro start-device --platform android
-	maestro test login.yaml
-
-e2e-setup:
-curl -fsSL "https://get.maestro.mobile.dev" | bash

README.md

@@ -85,9 +85,9 @@ We welcome any help to make Streamyfin better. If you'd like to contribute, plea
 
 1. Use node `>20`
 2. Install dependencies `bun i && bun run submodule-reload`
-3. Make sure you have xcode and/or android studio installed. (follow the guides for expo: https://docs.expo.dev/workflow/android-studio-emulator/)
+3. Make sure you have xcode and/or android studio installed.
 4. run `npm run prebuild`
-5. Create an expo dev build by running `npm run ios` or `npm run android`. This will open a simulator on your computer and run the app.
+5. Create an expo dev build by running `npm run ios` or `nom run android`. This will open a simulator on your computer and run the app.
 
 For the TV version suffix the npm commands with `:tv`.
 

app.json

@@ -2,7 +2,7 @@
   "expo": {
     "name": "Streamyfin",
     "slug": "streamyfin",
-    "version": "0.27.0",
+    "version": "0.26.1",
     "orientation": "default",
     "icon": "./assets/images/icon.png",
     "scheme": "streamyfin",
@@ -14,11 +14,14 @@
       "infoPlist": {
         "NSCameraUsageDescription": "The app needs access to your camera to scan barcodes.",
         "NSMicrophoneUsageDescription": "The app needs access to your microphone.",
-        "UIBackgroundModes": ["audio", "fetch"],
+        "UIBackgroundModes": ["audio", "fetch", "processing"],
         "NSLocalNetworkUsageDescription": "The app needs access to your local network to connect to your Jellyfin server.",
         "NSAppTransportSecurity": {
           "NSAllowsArbitraryLoads": true
         },
+        "BGTaskSchedulerPermittedIdentifiers": [
+          "com.example.hlsdownload"
+        ],
         "UISupportsTrueScreenSizeOnMac": true,
         "UIFileSharingEnabled": true,
         "LSSupportsOpeningDocumentsInPlace": true
@@ -33,9 +36,7 @@
       "jsEngine": "hermes",
       "versionCode": 53,
       "adaptiveIcon": {
-        "foregroundImage": "./assets/images/adaptive_icon.png",
-        "backgroundColor": "#464646"
-
+        "foregroundImage": "./assets/images/adaptive_icon.png"
       },
       "package": "com.fredrikburmester.streamyfin",
       "permissions": [

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

@@ -1,18 +1,13 @@
 import { nestedTabPageScreenOptions } from "@/components/stacks/NestedTabPageStack";
-import { Ionicons, Feather } from "@expo/vector-icons";
+import { Feather } from "@expo/vector-icons";
 import { Stack, useRouter } from "expo-router";
 import { Platform, TouchableOpacity, View } from "react-native";
 import { useTranslation } from "react-i18next";
 const Chromecast = !Platform.isTV ? require("@/components/Chromecast") : null;
-import { useAtom } from "jotai";
-import { userAtom } from "@/providers/JellyfinProvider";
-import { useSessions, useSessionsProps } from "@/hooks/useSessions";
 
 export default function IndexLayout() {
   const router = useRouter();
-  const [user] = useAtom(userAtom);
   const { t } = useTranslation();
-
   return (
     <Stack>
       <Stack.Screen
@@ -32,10 +27,13 @@ export default function IndexLayout() {
               {!Platform.isTV && (
                 <>
                   <Chromecast.Chromecast />
-                   {user && user.Policy?.IsAdministrator && (
-                    <SessionsButton />
-                   )}
-                  <SettingsButton />
+                  <TouchableOpacity
+                    onPress={() => {
+                      router.push("/(auth)/settings");
+                    }}
+                  >
+                    <Feather name="settings" color={"white"} size={22} />
+                  </TouchableOpacity>
                 </>
               )}
             </View>
@@ -48,42 +46,18 @@ export default function IndexLayout() {
           title: t("home.downloads.downloads_title"),
         }}
       />
-      <Stack.Screen
-        name="downloads/[seriesId]"
-        options={{
-          title: t("home.downloads.tvseries"),
-        }}
-      />
-      <Stack.Screen
-        name="sessions/index"
-        options={{
-          title: t("home.sessions.title"),
-        }}
-      />
       <Stack.Screen
         name="settings"
         options={{
           title: t("home.settings.settings_title"),
         }}
       />
-      <Stack.Screen
-        name="settings/optimized-server/page"
-        options={{
-          title: "",
-        }}
-      />
       <Stack.Screen
         name="settings/marlin-search/page"
         options={{
           title: "",
         }}
       />
-      <Stack.Screen
-        name="settings/dashboard/sessions"
-        options={{
-          title: t("home.settings.dashboard.sessions_title"),
-        }}
-      />
       <Stack.Screen
         name="settings/jellyseerr/page"
         options={{
@@ -126,38 +100,3 @@ export default function IndexLayout() {
     </Stack>
   );
 }
-
-const SettingsButton = () => {
-  const router = useRouter();
-
-  return (
-    <TouchableOpacity
-      onPress={() => {
-        router.push("/(auth)/settings");
-      }}
-    >
-      <Feather name="settings" color={"white"} size={22} />
-    </TouchableOpacity>
-  );
-};
-
-const SessionsButton = () => {
-  const router = useRouter();
-  const { sessions = [], _ } = useSessions({} as useSessionsProps);
-
-  return (
-    <TouchableOpacity
-      onPress={() => {
-        router.push("/(auth)/sessions");
-      }}
-    >
-      <View className="mr-4">
-        <Ionicons 
-          name="play-circle"
-          color={sessions.length === 0 ? "white" : "#9333ea"}
-          size={25}
-        />
-      </View>
-    </TouchableOpacity>
-  );
-};

app/(auth)/(tabs)/(home)/downloads/[seriesId].tsx

@@ -1,132 +0,0 @@
-import { Text } from "@/components/common/Text";
-import { useDownload } from "@/providers/DownloadProvider";
-import { router, useLocalSearchParams, useNavigation } from "expo-router";
-import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { ScrollView, TouchableOpacity, View, Alert } from "react-native";
-import { EpisodeCard } from "@/components/downloads/EpisodeCard";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import {
-  SeasonDropdown,
-  SeasonIndexState,
-} from "@/components/series/SeasonDropdown";
-import { storage } from "@/utils/mmkv";
-import { Ionicons } from "@expo/vector-icons";
-
-export default function page() {
-  const navigation = useNavigation();
-  const local = useLocalSearchParams();
-  const { seriesId, episodeSeasonIndex } = local as {
-    seriesId: string;
-    episodeSeasonIndex: number | string | undefined;
-  };
-
-  const [seasonIndexState, setSeasonIndexState] = useState<SeasonIndexState>(
-    {}
-  );
-  const { downloadedFiles, deleteItems } = useDownload();
-
-  const series = useMemo(() => {
-    try {
-      return (
-        downloadedFiles
-          ?.filter((f) => f.item.SeriesId == seriesId)
-          ?.sort(
-            (a, b) => a?.item.ParentIndexNumber! - b.item.ParentIndexNumber!
-          ) || []
-      );
-    } catch {
-      return [];
-    }
-  }, [downloadedFiles]);
-
-  const seasonIndex =
-    seasonIndexState[series?.[0]?.item?.ParentId ?? ""] ||
-    episodeSeasonIndex ||
-    "";
-
-  const groupBySeason = useMemo<BaseItemDto[]>(() => {
-    const seasons: Record<string, BaseItemDto[]> = {};
-
-    series?.forEach((episode) => {
-      if (!seasons[episode.item.ParentIndexNumber!]) {
-        seasons[episode.item.ParentIndexNumber!] = [];
-      }
-
-      seasons[episode.item.ParentIndexNumber!].push(episode.item);
-    });
-    return (
-      seasons[seasonIndex]?.sort((a, b) => a.IndexNumber! - b.IndexNumber!) ??
-      []
-    );
-  }, [series, seasonIndex]);
-
-  const initialSeasonIndex = useMemo(
-    () =>
-      Object.values(groupBySeason)?.[0]?.ParentIndexNumber ??
-      series?.[0]?.item?.ParentIndexNumber,
-    [groupBySeason]
-  );
-
-  useEffect(() => {
-    if (series.length > 0) {
-      navigation.setOptions({
-        title: series[0].item.SeriesName,
-      });
-    } else {
-      storage.delete(seriesId);
-      router.back();
-    }
-  }, [series]);
-
-  const deleteSeries = useCallback(() => {
-    Alert.alert(
-      "Delete season",
-      "Are you sure you want to delete the entire season?",
-      [
-        {
-          text: "Cancel",
-          style: "cancel",
-        },
-        {
-          text: "Delete",
-          onPress: () => deleteItems(groupBySeason),
-          style: "destructive",
-        },
-      ]
-    );
-  }, [groupBySeason]);
-
-  return (
-    <View className="flex-1">
-      {series.length > 0 && (
-        <View className="flex flex-row items-center justify-start my-2 px-4">
-          <SeasonDropdown
-            item={series[0].item}
-            seasons={series.map((s) => s.item)}
-            state={seasonIndexState}
-            initialSeasonIndex={initialSeasonIndex!}
-            onSelect={(season) => {
-              setSeasonIndexState((prev) => ({
-                ...prev,
-                [series[0].item.ParentId ?? ""]: season.ParentIndexNumber,
-              }));
-            }}
-          />
-          <View className="bg-purple-600 rounded-full h-6 w-6 flex items-center justify-center ml-2">
-            <Text className="text-xs font-bold">{groupBySeason.length}</Text>
-          </View>
-          <View className="bg-neutral-800/80 rounded-full h-9 w-9 flex items-center justify-center ml-auto">
-            <TouchableOpacity onPress={deleteSeries}>
-              <Ionicons name="trash" size={20} color="white" />
-            </TouchableOpacity>
-          </View>
-        </View>
-      )}
-      <ScrollView key={seasonIndex} className="px-4">
-        {groupBySeason.map((episode, index) => (
-          <EpisodeCard key={index} item={episode} />
-        ))}
-      </ScrollView>
-    </View>
-  );
-}

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

@@ -1,253 +1,361 @@
 import { Text } from "@/components/common/Text";
-import { ActiveDownloads } from "@/components/downloads/ActiveDownloads";
-import { MovieCard } from "@/components/downloads/MovieCard";
-import { SeriesCard } from "@/components/downloads/SeriesCard";
-import { DownloadedItem, useDownload } from "@/providers/DownloadProvider";
-import { queueAtom } from "@/utils/atoms/queue";
-import {DownloadMethod, useSettings} from "@/utils/atoms/settings";
+import ProgressCircle from "@/components/ProgressCircle";
+import { DownloadInfo } from "@/modules/hls-downloader/src/HlsDownloader.types";
+import { useNativeDownloads } from "@/providers/NativeDownloadProvider";
+import { storage } from "@/utils/mmkv";
+import { formatTimeString, ticksToSeconds } from "@/utils/time";
+import { useActionSheet } from "@expo/react-native-action-sheet";
 import { Ionicons } from "@expo/vector-icons";
-import { useNavigation, useRouter } from "expo-router";
-import { useAtom } from "jotai";
-import React, { useEffect, useMemo, useRef } from "react";
-import { Alert, ScrollView, TouchableOpacity, View } from "react-native";
-import { Button } from "@/components/Button";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { useTranslation } from "react-i18next";
-import { t } from 'i18next';
-import { DownloadSize } from "@/components/downloads/DownloadSize";
+import { useQueryClient } from "@tanstack/react-query";
+import * as FileSystem from "expo-file-system";
+import { Image } from "expo-image";
+import { useRouter } from "expo-router";
+import { useCallback, useMemo } from "react";
 import {
-  BottomSheetBackdrop,
-  BottomSheetBackdropProps,
-  BottomSheetModal,
-  BottomSheetView,
-} from "@gorhom/bottom-sheet";
-import { toast } from "sonner-native";
-import { writeToLog } from "@/utils/log";
+  ActivityIndicator,
+  Platform,
+  RefreshControl,
+  ScrollView,
+  TouchableOpacity,
+  View,
+} from "react-native";
 
-export default function page() {
-  const navigation = useNavigation();
-  const { t } = useTranslation();
-  const [queue, setQueue] = useAtom(queueAtom);
-  const { removeProcess, downloadedFiles, deleteFileByType } = useDownload();
+const getETA = (download: DownloadInfo): string | null => {
+  if (
+    !download.startTime ||
+    !download.secondsDownloaded ||
+    !download.secondsTotal
+  ) {
+    return null;
+  }
+  const elapsed = Date.now() / 1000 - download.startTime;
+  if (elapsed <= 0 || download.secondsDownloaded <= 0) return null;
+  const speed = download.secondsDownloaded / elapsed;
+  const remainingBytes = download.secondsTotal - download.secondsDownloaded;
+  if (speed <= 0) return null;
+  const secondsLeft = remainingBytes / speed;
+  return formatTimeString(secondsLeft, "s");
+};
+
+export default function Index() {
+  const { showActionSheetWithOptions } = useActionSheet();
+  const {
+    downloadedFiles,
+    activeDownloads,
+    cancelDownload,
+    refetchDownloadedFiles,
+  } = useNativeDownloads();
   const router = useRouter();
-  const [settings] = useSettings();
-  const bottomSheetModalRef = useRef<BottomSheetModal>(null);
+  const queryClient = useQueryClient();
 
-  const movies = useMemo(() => {
-    try {
-      return downloadedFiles?.filter((f) => f.item.Type === "Movie") || [];
-    } catch {
-      migration_20241124();
-      return [];
-    }
-  }, [downloadedFiles]);
+  const handleItemPress = (item: any) => {
+    showActionSheetWithOptions(
+      {
+        options: ["Play", "Delete", "Cancel"],
+        destructiveButtonIndex: 1,
+        cancelButtonIndex: 2,
+      },
+      async (selectedIndex) => {
+        if (selectedIndex === 0) {
+          goToVideo(item);
+        } else if (selectedIndex === 1) {
+          await deleteFile(item.id);
+        }
+      }
+    );
+  };
 
-  const groupedBySeries = useMemo(() => {
-    try {
-      const episodes = downloadedFiles?.filter(
-        (f) => f.item.Type === "Episode"
-      );
-      const series: { [key: string]: DownloadedItem[] } = {};
-      episodes?.forEach((e) => {
-        if (!series[e.item.SeriesName!]) series[e.item.SeriesName!] = [];
-        series[e.item.SeriesName!].push(e);
-      });
-      return Object.values(series);
-    } catch {
-      migration_20241124();
-      return [];
-    }
-  }, [downloadedFiles]);
+  const handleActiveItemPress = (id: string) => {
+    showActionSheetWithOptions(
+      {
+        options: ["Cancel Download", "Cancel"],
+        destructiveButtonIndex: 0,
+        cancelButtonIndex: 1,
+      },
+      async (selectedIndex) => {
+        if (selectedIndex === 0) {
+          await cancelDownload(id);
+        }
+      }
+    );
+  };
 
-  const insets = useSafeAreaInsets();
+  const goToVideo = (item: any) => {
+    // @ts-expect-error
+    router.push("/player/direct-player?offline=true&itemId=" + item.id);
+  };
 
-  useEffect(() => {
-    navigation.setOptions({
-      headerRight: () => (
-        <TouchableOpacity onPress={bottomSheetModalRef.current?.present}>
-          <DownloadSize items={downloadedFiles?.map((f) => f.item) || []} />
-        </TouchableOpacity>
-      ),
-    });
-  }, [downloadedFiles]);
+  const movies = useMemo(
+    () => downloadedFiles.filter((i) => i.metadata.item?.Type === "Movie"),
+    [downloadedFiles]
+  );
+  const episodes = useMemo(
+    () => downloadedFiles.filter((i) => i.metadata.item?.Type === "Episode"),
+    [downloadedFiles]
+  );
 
-  const deleteMovies = () =>
-    deleteFileByType("Movie")
-      .then(() => toast.success(t("home.downloads.toasts.deleted_all_movies_successfully")))
-      .catch((reason) => {
-        writeToLog("ERROR", reason);
-        toast.error(t("home.downloads.toasts.failed_to_delete_all_movies"));
-      });
-  const deleteShows = () =>
-    deleteFileByType("Episode")
-      .then(() => toast.success(t("home.downloads.toasts.deleted_all_tvseries_successfully")))
-      .catch((reason) => {
-        writeToLog("ERROR", reason);
-        toast.error(t("home.downloads.toasts.failed_to_delete_all_tvseries"));
-      });
-  const deleteAllMedia = async () =>
-    await Promise.all([deleteMovies(), deleteShows()]);
+  const base64Image = useCallback((id: string) => {
+    return storage.getString(id);
+  }, []);
+
+  const deleteFile = async (id: string) => {
+    const downloadsDir = FileSystem.documentDirectory + "downloads/";
+    await FileSystem.deleteAsync(downloadsDir + id + ".json");
+    await FileSystem.deleteAsync(downloadsDir + id);
+    refetchDownloadedFiles();
+  };
 
   return (
-    <>
-      <ScrollView
-        contentContainerStyle={{
-          paddingLeft: insets.left,
-          paddingRight: insets.right,
-          paddingBottom: 100,
-        }}
-      >
-        <View className="py-4">
-          <View className="mb-4 flex flex-col space-y-4 px-4">
-            {settings?.downloadMethod === DownloadMethod.Remux && (
-              <View className="bg-neutral-900 p-4 rounded-2xl">
-                <Text className="text-lg font-bold">{t("home.downloads.queue")}</Text>
-                <Text className="text-xs opacity-70 text-red-600">
-                  {t("home.downloads.queue_hint")}
-                </Text>
-                <View className="flex flex-col space-y-2 mt-2">
-                  {queue.map((q, index) => (
-                    <TouchableOpacity
-                      onPress={() =>
-                        router.push(`/(auth)/items/page?id=${q.item.Id}`)
-                      }
-                      className="relative bg-neutral-900 border border-neutral-800 p-4 rounded-2xl overflow-hidden flex flex-row items-center justify-between"
-                      key={index}
-                    >
+    <ScrollView
+      refreshControl={
+        <RefreshControl
+          refreshing={
+            queryClient.isFetching({ queryKey: ["downloadedFiles"] }) > 0
+          }
+          onRefresh={() => {
+            refetchDownloadedFiles();
+          }}
+        />
+      }
+      className="flex-1 "
+    >
+      <View className="flex p-4 space-y-2">
+        {!movies.length && !episodes.length && !activeDownloads.length ? (
+          <View className="flex flex-col items-center justify-center">
+            <Text className="text-neutral-500 text-xs">
+              No downloaded items
+            </Text>
+          </View>
+        ) : null}
+
+        {activeDownloads.length ? (
+          <View>
+            <Text className="text-neutral-500 ml-2 text-xs mb-1">
+              ACTIVE DOWNLOADS
+            </Text>
+            <View className="space-y-2">
+              {activeDownloads.map((i) => {
+                const progress =
+                  i.secondsTotal && i.secondsDownloaded
+                    ? i.secondsDownloaded / i.secondsTotal
+                    : 0;
+                const eta = getETA(i);
+                const item = i.metadata?.item;
+                return (
+                  <TouchableOpacity
+                    onPress={() => {
+                      if (!i.metadata.item.Id) throw new Error("No item id");
+                      handleActiveItemPress(i.metadata.item.Id);
+                    }}
+                    key={i.id}
+                    className="flex flex-row items-center p-2 pr-4 rounded-xl bg-neutral-900 space-x-4"
+                  >
+                    {i.metadata.item.Id && (
+                      <View
+                        className={`rounded-lg overflow-hidden ${
+                          i.metadata.item.Type === "Movie"
+                            ? "h-24 aspect-[10/15]"
+                            : "w-24 aspect-video"
+                        }`}
+                      >
+                        <Image
+                          source={{
+                            uri: `data:image/jpeg;base64,${base64Image(
+                              i.metadata.item.Id
+                            )}`,
+                          }}
+                          style={{
+                            width: "100%",
+                            height: "100%",
+                            resizeMode: "cover",
+                          }}
+                        />
+                      </View>
+                    )}
+                    <View className="space-y-0.5 flex-1">
+                      {item.Type === "Episode" ? (
+                        <>
+                          <Text className="text-xs">{item?.SeriesName}</Text>
+                        </>
+                      ) : (
+                        <>
+                          <Text className="text-xs text-neutral-500">
+                            {item?.ProductionYear}
+                          </Text>
+                        </>
+                      )}
+                      <Text className="font-semibold">{item?.Name}</Text>
+                      <View className="flex flex-row items-center">
+                        {i.metadata.item.Type === "Episode" && (
+                          <Text
+                            numberOfLines={1}
+                            className="text-xs text-neutral-500"
+                          >
+                            {`S${item.ParentIndexNumber?.toString()}:E${item.IndexNumber?.toString()}`}{" "}
+                            -{" "}
+                          </Text>
+                        )}
+                        {item?.RunTimeTicks ? (
+                          <Text className="text-xs text-neutral-500">
+                            {formatTimeString(
+                              ticksToSeconds(item?.RunTimeTicks),
+                              "s"
+                            )}
+                          </Text>
+                        ) : null}
+                      </View>
                       <View>
-                        <Text className="font-semibold">{q.item.Name}</Text>
-                        <Text className="text-xs opacity-50">
-                          {q.item.Type}
+                        <Text className="text-xs text-purple-600">
+                          {eta ? `~${eta} remaining` : "Calculating time..."}
                         </Text>
                       </View>
-                      <TouchableOpacity
-                        onPress={() => {
-                          removeProcess(q.id);
-                          setQueue((prev) => {
-                            if (!prev) return [];
-                            return [...prev.filter((i) => i.id !== q.id)];
-                          });
-                        }}
+                    </View>
+
+                    <View className="ml-auto relative">
+                      {i.state === "PENDING" ? (
+                        <ActivityIndicator />
+                      ) : (
+                        <View className="relative items-center justify-center">
+                          <ProgressCircle
+                            size={48}
+                            fill={progress * 100}
+                            width={6}
+                            tintColor="#9334E9"
+                            backgroundColor="#bdc3c7"
+                          />
+                          {Platform.OS === "ios" ? (
+                            <Text className="absolute text-[10px] text-[#bdc3c7] top-[18px] left-[14px]">
+                              {(progress * 100).toFixed(0)}%
+                            </Text>
+                          ) : (
+                            <Text className="absolute text-[12px] text-[#bdc3c7] top-[15px] left-[16px]">
+                              {(progress * 100).toFixed(0)}%
+                            </Text>
+                          )}
+                        </View>
+                      )}
+                    </View>
+                  </TouchableOpacity>
+                );
+              })}
+            </View>
+          </View>
+        ) : null}
+
+        <View className="space-y-2">
+          {movies && movies.length ? (
+            <View>
+              <Text className="text-neutral-500 ml-2 text-xs mb-1">MOVIES</Text>
+              <View className="space-y-2">
+                {movies.map((i) => (
+                  <TouchableOpacity
+                    key={i.id}
+                    onPress={() => handleItemPress(i)}
+                    className="flex flex-row items-center p-2 pr-4 rounded-xl bg-neutral-900 space-x-4"
+                  >
+                    {i.metadata.item.Id && (
+                      <View className="h-24 aspect-[10/15] rounded-lg overflow-hidden">
+                        <Image
+                          source={{
+                            uri: `data:image/jpeg;base64,${base64Image(
+                              i.metadata.item.Id
+                            )}`,
+                          }}
+                          style={{
+                            width: "100%",
+                            height: "100%",
+                            resizeMode: "cover",
+                          }}
+                        />
+                      </View>
+                    )}
+                    <View className="flex-1">
+                      <Text className="text-xs text-neutral-500">
+                        {i.metadata.item?.ProductionYear}
+                      </Text>
+                      <Text className="font-semibold">
+                        {i.metadata.item?.Name}
+                      </Text>
+                      {i.metadata.item?.RunTimeTicks ? (
+                        <Text className="text-xs text-neutral-500">
+                          {formatTimeString(
+                            ticksToSeconds(i.metadata.item?.RunTimeTicks),
+                            "s"
+                          )}
+                        </Text>
+                      ) : null}
+                    </View>
+                    <Ionicons
+                      name="play-circle"
+                      size={24}
+                      color="white"
+                      className="ml-auto"
+                    />
+                  </TouchableOpacity>
+                ))}
+              </View>
+            </View>
+          ) : null}
+          {episodes && episodes.length ? (
+            <View>
+              <Text className="text-neutral-500 ml-2 text-xs mb-1">
+                EPISODES
+              </Text>
+              <View className="space-y-2">
+                {episodes.map((i) => (
+                  <TouchableOpacity
+                    key={i.id}
+                    onPress={() => handleItemPress(i)}
+                    className="bg-neutral-900 p-2 pr-4 rounded-xl flex flex-row items-center space-x-4"
+                  >
+                    {i.metadata.item.Id && (
+                      <View className="w-24 aspect-video rounded-lg overflow-hidden">
+                        <Image
+                          source={{
+                            uri: `data:image/jpeg;base64,${base64Image(
+                              i.metadata.item.Id
+                            )}`,
+                          }}
+                          style={{
+                            width: "100%",
+                            height: "100%",
+                            resizeMode: "cover",
+                          }}
+                        />
+                      </View>
+                    )}
+                    <View className="flex-1">
+                      {i.metadata.item.Type === "Episode" ? (
+                        <Text className="text-[12px]">
+                          {i.metadata.item?.SeriesName}
+                        </Text>
+                      ) : null}
+                      <Text
+                        className="font-semibold text-[12px]"
+                        numberOfLines={2}
                       >
-                        <Ionicons name="close" size={24} color="red" />
-                      </TouchableOpacity>
-                    </TouchableOpacity>
-                  ))}
-                </View>
-
-                {queue.length === 0 && (
-                  <Text className="opacity-50">{t("home.downloads.no_items_in_queue")}</Text>
-                )}
-              </View>
-            )}
-
-            <ActiveDownloads />
-          </View>
-
-          {movies.length > 0 && (
-            <View className="mb-4">
-              <View className="flex flex-row items-center justify-between mb-2 px-4">
-                <Text className="text-lg font-bold">{t("home.downloads.movies")}</Text>
-                <View className="bg-purple-600 rounded-full h-6 w-6 flex items-center justify-center">
-                  <Text className="text-xs font-bold">{movies?.length}</Text>
-                </View>
-              </View>
-              <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-                <View className="px-4 flex flex-row">
-                  {movies?.map((item) => (
-                    <View className="mb-2 last:mb-0" key={item.item.Id}>
-                      <MovieCard item={item.item} />
+                        {i.metadata.item?.Name}
+                      </Text>
+                      <Text
+                        numberOfLines={1}
+                        className="text-xs text-neutral-500"
+                      >
+                        {`S${i.metadata.item.ParentIndexNumber?.toString()}:E${i.metadata.item.IndexNumber?.toString()}`}
+                      </Text>
                     </View>
-                  ))}
-                </View>
-              </ScrollView>
-            </View>
-          )}
-          {groupedBySeries.length > 0 && (
-            <View className="mb-4">
-              <View className="flex flex-row items-center justify-between mb-2 px-4">
-                <Text className="text-lg font-bold">{t("home.downloads.tvseries")}</Text>
-                <View className="bg-purple-600 rounded-full h-6 w-6 flex items-center justify-center">
-                  <Text className="text-xs font-bold">
-                    {groupedBySeries?.length}
-                  </Text>
-                </View>
+                    <Ionicons
+                      name="play-circle"
+                      size={24}
+                      color="white"
+                      className="ml-auto"
+                    />
+                  </TouchableOpacity>
+                ))}
               </View>
-              <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-                <View className="px-4 flex flex-row">
-                  {groupedBySeries?.map((items) => (
-                    <View
-                      className="mb-2 last:mb-0"
-                      key={items[0].item.SeriesId}
-                    >
-                      <SeriesCard
-                        items={items.map((i) => i.item)}
-                        key={items[0].item.SeriesId}
-                      />
-                    </View>
-                  ))}
-                </View>
-              </ScrollView>
             </View>
-          )}
-          {downloadedFiles?.length === 0 && (
-            <View className="flex px-4">
-              <Text className="opacity-50">{t("home.downloads.no_downloaded_items")}</Text>
-            </View>
-          )}
+          ) : null}
         </View>
-      </ScrollView>
-      <BottomSheetModal
-        ref={bottomSheetModalRef}
-        enableDynamicSizing
-        handleIndicatorStyle={{
-          backgroundColor: "white",
-        }}
-        backgroundStyle={{
-          backgroundColor: "#171717",
-        }}
-        backdropComponent={(props: BottomSheetBackdropProps) => (
-          <BottomSheetBackdrop
-            {...props}
-            disappearsOnIndex={-1}
-            appearsOnIndex={0}
-          />
-        )}
-      >
-        <BottomSheetView>
-          <View className="p-4 space-y-4 mb-4">
-            <Button color="purple" onPress={deleteMovies}>
-              {t("home.downloads.delete_all_movies_button")}
-            </Button>
-            <Button color="purple" onPress={deleteShows}>
-              {t("home.downloads.delete_all_tvseries_button")}
-            </Button>
-            <Button color="red" onPress={deleteAllMedia}>
-              {t("home.downloads.delete_all_button")}
-            </Button>
-          </View>
-        </BottomSheetView>
-      </BottomSheetModal>
-    </>
-  );
-}
-
-function migration_20241124() {
-  const router = useRouter();
-  const { deleteAllFiles } = useDownload();
-  Alert.alert(
-    t("home.downloads.new_app_version_requires_re_download"),
-    t("home.downloads.new_app_version_requires_re_download_description"),
-    [
-      {
-        text: t("home.downloads.back"),
-        onPress: () => router.back(),
-      },
-      {
-        text: t("home.downloads.delete"),
-        style: "destructive",
-        onPress: async () => await deleteAllFiles(),
-      },
-    ]
+      </View>
+    </ScrollView>
   );
 }

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

@@ -1,5 +1,486 @@
-import { HomeIndex } from "@/components/settings/HomeIndex";
+import { Button } from "@/components/Button";
+import { Text } from "@/components/common/Text";
+import { LargeMovieCarousel } from "@/components/home/LargeMovieCarousel";
+import { ScrollingCollectionList } from "@/components/home/ScrollingCollectionList";
+import { Loader } from "@/components/Loader";
+import { MediaListSection } from "@/components/medialists/MediaListSection";
+import { Colors } from "@/constants/Colors";
+import { useInvalidatePlaybackProgressCache } from "@/hooks/useRevalidatePlaybackProgressCache";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import {
+  useSplashScreenLoading,
+  useSplashScreenVisible,
+} from "@/providers/SplashScreenProvider";
+import { useSettings } from "@/utils/atoms/settings";
+import { Feather, Ionicons } from "@expo/vector-icons";
+import { Api } from "@jellyfin/sdk";
+import {
+  BaseItemDto,
+  BaseItemKind,
+} from "@jellyfin/sdk/lib/generated-client/models";
+import {
+  getItemsApi,
+  getSuggestionsApi,
+  getTvShowsApi,
+  getUserLibraryApi,
+  getUserViewsApi,
+} from "@jellyfin/sdk/lib/utils/api";
+import NetInfo from "@react-native-community/netinfo";
+import { QueryFunction, useQuery } from "@tanstack/react-query";
+import {
+  useNavigation,
+  useNavigationContainerRef,
+  useRouter,
+} from "expo-router";
+import { useAtomValue } from "jotai";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  ActivityIndicator,
+  RefreshControl,
+  ScrollView,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
-export default function page() {
-  return <HomeIndex />;
+type ScrollingCollectionListSection = {
+  type: "ScrollingCollectionList";
+  title?: string;
+  queryKey: (string | undefined | null)[];
+  queryFn: QueryFunction<BaseItemDto[]>;
+  orientation?: "horizontal" | "vertical";
+};
+
+type MediaListSection = {
+  type: "MediaListSection";
+  queryKey: (string | undefined)[];
+  queryFn: QueryFunction<BaseItemDto>;
+};
+
+type Section = ScrollingCollectionListSection | MediaListSection;
+
+export default function index() {
+  const router = useRouter();
+
+  const { t } = useTranslation();
+
+  const api = useAtomValue(apiAtom);
+  const user = useAtomValue(userAtom);
+
+  const [loading, setLoading] = useState(false);
+  const [
+    settings,
+    updateSettings,
+    pluginSettings,
+    setPluginSettings,
+    refreshStreamyfinPluginSettings,
+  ] = useSettings();
+
+  const [isConnected, setIsConnected] = useState<boolean | null>(null);
+  const [loadingRetry, setLoadingRetry] = useState(false);
+
+  const insets = useSafeAreaInsets();
+
+  const checkConnection = useCallback(async () => {
+    setLoadingRetry(true);
+    const state = await NetInfo.fetch();
+    setIsConnected(state.isConnected);
+    setLoadingRetry(false);
+  }, []);
+
+  const navigation = useNavigation();
+
+  useEffect(() => {
+    navigation.setOptions({
+      headerLeft: () => (
+        <TouchableOpacity
+          onPress={() => {
+            router.push("/(auth)/downloads");
+          }}
+          className="p-2"
+        >
+          <Feather name="download" color={Colors.primary} size={22} />
+        </TouchableOpacity>
+      ),
+    });
+  }, []);
+
+  useEffect(() => {
+    const unsubscribe = NetInfo.addEventListener((state) => {
+      if (state.isConnected == false || state.isInternetReachable === false)
+        setIsConnected(false);
+      else setIsConnected(true);
+    });
+
+    NetInfo.fetch().then((state) => {
+      setIsConnected(state.isConnected);
+    });
+
+    // cleanCacheDirectory().catch((e) =>
+    //   console.error("Something went wrong cleaning cache directory")
+    // );
+
+    return () => {
+      unsubscribe();
+    };
+  }, []);
+
+  const {
+    data,
+    isError: e1,
+    isLoading: l1,
+  } = useQuery({
+    queryKey: ["home", "userViews", user?.Id],
+    queryFn: async () => {
+      if (!api || !user?.Id) {
+        return null;
+      }
+
+      const response = await getUserViewsApi(api).getUserViews({
+        userId: user.Id,
+      });
+
+      return response.data.Items || null;
+    },
+    enabled: !!api && !!user?.Id,
+    staleTime: 60 * 1000,
+  });
+
+  // show splash screen until query loaded
+  useSplashScreenLoading(l1);
+  const splashScreenVisible = useSplashScreenVisible();
+
+  const userViews = useMemo(
+    () => data?.filter((l) => !settings?.hiddenLibraries?.includes(l.Id!)),
+    [data, settings?.hiddenLibraries]
+  );
+
+  const collections = useMemo(() => {
+    const allow = ["movies", "tvshows"];
+    return (
+      userViews?.filter(
+        (c) => c.CollectionType && allow.includes(c.CollectionType)
+      ) || []
+    );
+  }, [userViews]);
+
+  const invalidateCache = useInvalidatePlaybackProgressCache();
+
+  const refetch = useCallback(async () => {
+    setLoading(true);
+    await refreshStreamyfinPluginSettings();
+    await invalidateCache();
+    setLoading(false);
+  }, []);
+
+  const createCollectionConfig = useCallback(
+    (
+      title: string,
+      queryKey: string[],
+      includeItemTypes: BaseItemKind[],
+      parentId: string | undefined
+    ): ScrollingCollectionListSection => ({
+      title,
+      queryKey,
+      queryFn: async () => {
+        if (!api) return [];
+        return (
+          (
+            await getUserLibraryApi(api).getLatestMedia({
+              userId: user?.Id,
+              limit: 20,
+              fields: ["PrimaryImageAspectRatio", "Path"],
+              imageTypeLimit: 1,
+              enableImageTypes: ["Primary", "Backdrop", "Thumb"],
+              includeItemTypes,
+              parentId,
+            })
+          ).data || []
+        );
+      },
+      type: "ScrollingCollectionList",
+    }),
+    [api, user?.Id]
+  );
+
+  let sections: Section[] = [];
+  if (!settings?.home || !settings?.home?.sections) {
+    sections = useMemo(() => {
+      if (!api || !user?.Id) return [];
+
+      const latestMediaViews = collections.map((c) => {
+        const includeItemTypes: BaseItemKind[] =
+          c.CollectionType === "tvshows" ? ["Series"] : ["Movie"];
+        const title = t("home.recently_added_in", { libraryName: c.Name });
+        const queryKey = [
+          "home",
+          "recentlyAddedIn" + c.CollectionType,
+          user?.Id!,
+          c.Id!,
+        ];
+        return createCollectionConfig(
+          title || "",
+          queryKey,
+          includeItemTypes,
+          c.Id
+        );
+      });
+
+      const ss: Section[] = [
+        {
+          title: t("home.continue_watching"),
+          queryKey: ["home", "resumeItems"],
+          queryFn: async () =>
+            (
+              await getItemsApi(api).getResumeItems({
+                userId: user.Id,
+                enableImageTypes: ["Primary", "Backdrop", "Thumb"],
+                includeItemTypes: ["Movie", "Series", "Episode"],
+              })
+            ).data.Items || [],
+          type: "ScrollingCollectionList",
+          orientation: "horizontal",
+        },
+        {
+          title: t("home.next_up"),
+          queryKey: ["home", "nextUp-all"],
+          queryFn: async () =>
+            (
+              await getTvShowsApi(api).getNextUp({
+                userId: user?.Id,
+                fields: ["MediaSourceCount"],
+                limit: 20,
+                enableImageTypes: ["Primary", "Backdrop", "Thumb"],
+                enableResumable: false,
+              })
+            ).data.Items || [],
+          type: "ScrollingCollectionList",
+          orientation: "horizontal",
+        },
+        ...latestMediaViews,
+        // ...(mediaListCollections?.map(
+        //   (ml) =>
+        //     ({
+        //       title: ml.Name,
+        //       queryKey: ["home", "mediaList", ml.Id!],
+        //       queryFn: async () => ml,
+        //       type: "MediaListSection",
+        //       orientation: "vertical",
+        //     } as Section)
+        // ) || []),
+        {
+          title: t("home.suggested_movies"),
+          queryKey: ["home", "suggestedMovies", user?.Id],
+          queryFn: async () =>
+            (
+              await getSuggestionsApi(api).getSuggestions({
+                userId: user?.Id,
+                limit: 10,
+                mediaType: ["Video"],
+                type: ["Movie"],
+              })
+            ).data.Items || [],
+          type: "ScrollingCollectionList",
+          orientation: "vertical",
+        },
+        {
+          title: t("home.suggested_episodes"),
+          queryKey: ["home", "suggestedEpisodes", user?.Id],
+          queryFn: async () => {
+            try {
+              const suggestions = await getSuggestions(api, user.Id);
+              const nextUpPromises = suggestions.map((series) =>
+                getNextUp(api, user.Id, series.Id)
+              );
+              const nextUpResults = await Promise.all(nextUpPromises);
+
+              return nextUpResults.filter((item) => item !== null) || [];
+            } catch (error) {
+              console.error("Error fetching data:", error);
+              return [];
+            }
+          },
+          type: "ScrollingCollectionList",
+          orientation: "horizontal",
+        },
+      ];
+      return ss;
+    }, [api, user?.Id, collections]);
+  } else {
+    sections = useMemo(() => {
+      if (!api || !user?.Id) return [];
+      const ss: Section[] = [];
+
+      for (const key in settings.home?.sections) {
+        // @ts-expect-error
+        const section = settings.home?.sections[key];
+        const id = section.title || key;
+        ss.push({
+          title: id,
+          queryKey: ["home", id],
+          queryFn: async () => {
+            if (section.items) {
+              const response = await getItemsApi(api).getItems({
+                userId: user?.Id,
+                limit: section.items?.limit || 25,
+                recursive: true,
+                includeItemTypes: section.items?.includeItemTypes,
+                sortBy: section.items?.sortBy,
+                sortOrder: section.items?.sortOrder,
+                filters: section.items?.filters,
+                parentId: section.items?.parentId,
+              });
+              return response.data.Items || [];
+            } else if (section.nextUp) {
+              const response = await getTvShowsApi(api).getNextUp({
+                userId: user?.Id,
+                fields: ["MediaSourceCount"],
+                limit: section.items?.limit || 25,
+                enableImageTypes: ["Primary", "Backdrop", "Thumb"],
+                enableResumable: section.items?.enableResumable || false,
+                enableRewatching: section.items?.enableRewatching || false,
+              });
+              return response.data.Items || [];
+            }
+            return [];
+          },
+          type: "ScrollingCollectionList",
+          orientation: section?.orientation || "vertical",
+        });
+      }
+      return ss;
+    }, [api, user?.Id, settings.home?.sections]);
+  }
+
+  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">{t("home.no_internet")}</Text>
+        <Text className="text-center opacity-70">
+          {t("home.no_internet_message")}
+        </Text>
+        <View className="mt-4">
+          <Button
+            color="purple"
+            onPress={() => router.push("/(auth)/downloads")}
+            justify="center"
+            iconRight={
+              <Ionicons name="arrow-forward" size={20} color="white" />
+            }
+          >
+            {t("home.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>
+    );
+  }
+
+  if (e1)
+    return (
+      <View className="flex flex-col items-center justify-center h-full -mt-6">
+        <Text className="text-3xl font-bold mb-2">{t("home.oops")}</Text>
+        <Text className="text-center opacity-70">
+          {t("home.error_message")}
+        </Text>
+      </View>
+    );
+
+  // this spinner should only show up, when user navigates here
+  // on launch the splash screen is used for loading
+  if (l1 && !splashScreenVisible)
+    return (
+      <View className="justify-center items-center h-full">
+        <Loader />
+      </View>
+    );
+
+  return (
+    <ScrollView
+      nestedScrollEnabled
+      contentInsetAdjustmentBehavior="automatic"
+      refreshControl={
+        <RefreshControl refreshing={loading} onRefresh={refetch} />
+      }
+      contentContainerStyle={{
+        paddingLeft: insets.left,
+        paddingRight: insets.right,
+        paddingBottom: 16,
+      }}
+    >
+      <View className="flex flex-col space-y-4">
+        <LargeMovieCarousel />
+
+        {sections.map((section, index) => {
+          if (section.type === "ScrollingCollectionList") {
+            return (
+              <ScrollingCollectionList
+                key={index}
+                title={section.title}
+                queryKey={section.queryKey}
+                queryFn={section.queryFn}
+                orientation={section.orientation}
+                hideIfEmpty
+              />
+            );
+          } else if (section.type === "MediaListSection") {
+            return (
+              <MediaListSection
+                key={index}
+                queryKey={section.queryKey}
+                queryFn={section.queryFn}
+              />
+            );
+          }
+          return null;
+        })}
+      </View>
+    </ScrollView>
+  );
+}
+
+// Function to get suggestions
+async function getSuggestions(api: Api, userId: string | undefined) {
+  if (!userId) return [];
+  const response = await getSuggestionsApi(api).getSuggestions({
+    userId,
+    limit: 10,
+    mediaType: ["Unknown"],
+    type: ["Series"],
+  });
+  return response.data.Items ?? [];
+}
+
+// Function to get the next up TV show for a series
+async function getNextUp(
+  api: Api,
+  userId: string | undefined,
+  seriesId: string | undefined
+) {
+  if (!userId || !seriesId) return null;
+  const response = await getTvShowsApi(api).getNextUp({
+    userId,
+    seriesId,
+    limit: 1,
+  });
+  return response.data.Items?.[0] ?? null;
 }

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

@@ -1,365 +0,0 @@
-import { Text } from "@/components/common/Text";
-import { useSessions, useSessionsProps } from "@/hooks/useSessions";
-import { FlashList } from "@shopify/flash-list";
-import { useTranslation } from "react-i18next";
-import { View } from "react-native";
-import { Loader } from "@/components/Loader";
-import { HardwareAccelerationType, SessionInfoDto } from "@jellyfin/sdk/lib/generated-client";
-import { useAtomValue } from "jotai";
-import { apiAtom } from "@/providers/JellyfinProvider";
-import Poster from "@/components/posters/Poster";
-import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
-import { useInterval } from "@/hooks/useInterval";
-import React, { useEffect, useMemo, useState } from "react";
-import { formatTimeString } from "@/utils/time";
-import { formatBitrate } from "@/utils/bitrate";
-import {
-  Ionicons,
-  Entypo,
-  AntDesign,
-  MaterialCommunityIcons,
-} from "@expo/vector-icons";
-import { Badge } from "@/components/Badge";
-
-export default function page() {
-  const { sessions, isLoading } = useSessions({} as useSessionsProps);
-  const { t } = useTranslation();
-
-  if (isLoading)
-    return (
-      <View className="justify-center items-center h-full">
-        <Loader />
-      </View>
-    );
-
-  if (!sessions || sessions.length == 0)
-    return (
-      <View className="h-full w-full flex justify-center items-center">
-        <Text className="text-lg text-neutral-500">
-          {t("home.sessions.no_active_sessions")}
-        </Text>
-      </View>
-    );
-
-  return (
-    <FlashList
-      contentInsetAdjustmentBehavior="automatic"
-      contentContainerStyle={{
-        paddingTop: 17,
-        paddingHorizontal: 17,
-        paddingBottom: 150,
-      }}
-      data={sessions}
-      renderItem={({ item }) => <SessionCard session={item} />}
-      keyExtractor={(item) => item.Id || ""}
-      estimatedItemSize={200}
-    />
-  );
-}
-
-interface SessionCardProps {
-  session: SessionInfoDto;
-}
-
-const SessionCard = ({ session }: SessionCardProps) => {
-  const api = useAtomValue(apiAtom);
-  const [remainingTicks, setRemainingTicks] = useState<number>(0);
-
-  const tick = () => {
-    if (session.PlayState?.IsPaused) return;
-    setRemainingTicks(remainingTicks - 10000000);
-  };
-
-  const getProgressPercentage = () => {
-    if (!session.NowPlayingItem || !session.NowPlayingItem.RunTimeTicks) {
-      return 0;
-    }
-
-    return Math.round(
-      (100 / session.NowPlayingItem?.RunTimeTicks) *
-        (session.NowPlayingItem?.RunTimeTicks - remainingTicks)
-    );
-  };
-
-  useEffect(() => {
-    const currentTime = session.PlayState?.PositionTicks;
-    const duration = session.NowPlayingItem?.RunTimeTicks;
-    if (
-      duration !== null &&
-      duration !== undefined &&
-      currentTime !== null &&
-      currentTime !== undefined
-    ) {
-      const remainingTimeTicks = duration - currentTime;
-      setRemainingTicks(remainingTimeTicks);
-    }
-  }, [session]);
-
-  useInterval(tick, 1000);
-
-  return (
-    <View className="flex flex-col shadow-md bg-neutral-900 rounded-2xl mb-4">
-      <View className="flex flex-row p-4">
-        <View className="w-20 pr-4">
-          <Poster
-            id={session.NowPlayingItem?.Id}
-            url={getPrimaryImageUrl({ api, item: session.NowPlayingItem })}
-          />
-        </View>
-        <View className="w-full flex-1">
-          <View className="flex flex-row justify-between">
-            <View className="flex-1 pr-4">
-              {session.NowPlayingItem?.Type === "Episode" ? (
-                <>
-                  <Text className="font-bold">
-                    {session.NowPlayingItem?.Name}
-                  </Text>
-                  <Text numberOfLines={1} className="text-xs opacity-50">
-                    {`S${session.NowPlayingItem.ParentIndexNumber?.toString()}:E${session.NowPlayingItem.IndexNumber?.toString()}`}
-                    {" - "}
-                    {session.NowPlayingItem.SeriesName}
-                  </Text>
-                </>
-              ) : (
-                <>
-                  <Text className="font-bold">
-                    {session.NowPlayingItem?.Name}
-                  </Text>
-                  <Text className="text-xs opacity-50">
-                    {session.NowPlayingItem?.ProductionYear}
-                  </Text>
-                  <Text className="text-xs opacity-50">
-                    {session.NowPlayingItem?.SeriesName}
-                  </Text>
-                </>
-              )}
-            </View>
-            <Text className="text-xs opacity-50 align-right text-right">
-              {session.UserName}
-              {"\n"}
-              {session.Client}
-              {"\n"}
-              {session.DeviceName}
-            </Text>
-          </View>
-          <View className="flex-1" />
-          <View className="flex flex-col align-bottom">
-            <View className="flex flex-row justify-between align-bottom mb-1">
-              <Text className="-ml-0.5 text-xs opacity-50 align-left text-left">
-                {!session.PlayState?.IsPaused ? (
-                  <Ionicons name="play" size={14} color="white" />
-                ) : (
-                  <Ionicons name="pause" size={14} color="white" />
-                )}
-              </Text>
-              <Text className="text-xs opacity-50 align-right text-right">
-                {formatTimeString(remainingTicks, "tick")} left
-              </Text>
-            </View>
-            <View className="align-bottom bg-gray-800 h-1">
-              <View
-                className={`bg-purple-600 h-full`}
-                style={{
-                  width: `${getProgressPercentage()}%`,
-                }}
-              />
-            </View>
-          </View>
-        </View>
-      </View>
-      <TranscodingView session={session} />
-    </View>
-  );
-};
-
-interface TranscodingBadgesProps {
-  properties: StreamProps;
-}
-
-const TranscodingBadges = ({ properties }: TranscodingBadgesProps) => {
-  const iconMap = {
-    bitrate: <Ionicons name="speedometer-outline" size={12} color="white" />,
-    codec: <Ionicons name="layers-outline" size={12} color="white" />,
-    videoRange: (
-      <Ionicons name="color-palette-outline" size={12} color="white" />
-    ),
-    resolution: <Ionicons name="film-outline" size={12} color="white" />,
-    language: <Ionicons name="language-outline" size={12} color="white" />,
-    audioChannels: <Ionicons name="mic-outline" size={12} color="white" />,
-    hwType: <Ionicons name="hardware-chip-outline" size={12} color="white" />,
-  } as const;
-
-  const icon = (val: string) => {
-    return (
-      iconMap[val as keyof typeof iconMap] ?? (
-        <Ionicons name="layers-outline" size={12} color="white" />
-      )
-    );
-  };
-
-  const formatVal = (key: string, val: any) => {
-    switch (key) {
-      case "bitrate":
-        return formatBitrate(val);
-      case "hwType":
-        return val === HardwareAccelerationType.None ? "sw" : "hw";
-      default:
-        return val;
-    }
-  };
-
-  return Object.entries(properties)
-    .filter(([_, value]) => value !== undefined && value !== null)
-    .map(([key]) => (
-      <Badge
-        key={key}
-        variant="gray"
-        className="m-0 p-0 pt-0.5 mr-1"
-        text={formatVal(key, properties[key as keyof StreamProps])}
-        iconLeft={icon(key)}
-      />
-    ));
-};
-
-interface StreamProps {
-  hwType?: HardwareAccelerationType | null | undefined;
-  resolution?: string | null | undefined;
-  language?: string | null | undefined;
-  codec?: string | null | undefined;
-  bitrate?: number | null | undefined;
-  videoRange?: string | null | undefined;
-  audioChannels?: string | null | undefined;
-}
-
-interface TranscodingStreamViewProps {
-  title: string | undefined;
-  value?: string;
-  isTranscoding: Boolean;
-  transcodeValue?: string | undefined | null;
-  properties: StreamProps;
-  transcodeProperties?: StreamProps;
-}
-
-const TranscodingStreamView = ({
-  title,
-  isTranscoding,
-  properties,
-  transcodeProperties,
-  value,
-  transcodeValue,
-}: TranscodingStreamViewProps) => {
-  return (
-    <View className="flex flex-col pt-2 first:pt-0">
-      <View className="flex flex-row">
-        <Text className="text-xs opacity-50 w-20 font-bold text-right pr-4">
-          {title}
-        </Text>
-        <Text className="flex-1">
-          <TranscodingBadges properties={properties} />
-        </Text>
-      </View>
-      {isTranscoding && transcodeProperties ? (
-        <>
-          <View className="flex flex-row">
-            <Text className="-mt-0 text-xs opacity-50 w-20 font-bold text-right pr-4">
-              <MaterialCommunityIcons
-                name="arrow-right-bottom"
-                size={14}
-                color="white"
-              />
-            </Text>
-            <Text className="flex-1 text-sm mt-1">
-              <TranscodingBadges properties={transcodeProperties} />
-            </Text>
-          </View>
-        </>
-      ) : null}
-    </View>
-  );
-};
-
-const TranscodingView = ({ session }: SessionCardProps) => {
-  const videoStream = useMemo(() => {
-    return session.NowPlayingItem?.MediaStreams?.filter(
-      (s) => s.Type == "Video"
-    )[0];
-  }, [session]);
-
-  const audioStream = useMemo(() => {
-    const index = session.PlayState?.AudioStreamIndex;
-    return index !== null && index !== undefined
-      ? session.NowPlayingItem?.MediaStreams?.[index]
-      : undefined;
-  }, [session.PlayState?.AudioStreamIndex]);
-
-  const subtitleStream = useMemo(() => {
-    const index = session.PlayState?.SubtitleStreamIndex;
-    return index !== null && index !== undefined
-      ? session.NowPlayingItem?.MediaStreams?.[index]
-      : undefined;
-  }, [session.PlayState?.SubtitleStreamIndex]);
-
-  const isTranscoding = useMemo(() => {
-    return session.PlayState?.PlayMethod == "Transcode" && session.TranscodingInfo;
-  }, [session.PlayState?.PlayMethod, session.TranscodingInfo]);
-
-  const videoStreamTitle = () => {
-    return videoStream?.DisplayTitle?.split(" ")[0];
-  };
-
-  return (
-    <View className="flex flex-col bg-neutral-800 rounded-b-2xl p-4 pt-2">
-      <TranscodingStreamView
-        title="Video"
-        properties={{
-          resolution: videoStreamTitle(),
-          bitrate: videoStream?.BitRate,
-          codec: videoStream?.Codec,
-        }}
-        transcodeProperties={{
-          hwType: session.TranscodingInfo?.HardwareAccelerationType,
-          bitrate: session.TranscodingInfo?.Bitrate,
-          codec: session.TranscodingInfo?.VideoCodec,
-        }}
-        isTranscoding={
-          isTranscoding && !session.TranscodingInfo?.IsVideoDirect
-            ? true
-            : false
-        }
-      />
-
-      <TranscodingStreamView
-        title="Audio"
-        properties={{
-          language: audioStream?.Language,
-          bitrate: audioStream?.BitRate,
-          codec: audioStream?.Codec,
-          audioChannels: audioStream?.ChannelLayout,
-        }}
-        transcodeProperties={{
-          codec: session.TranscodingInfo?.AudioCodec,
-          audioChannels: session.TranscodingInfo?.AudioChannels?.toString(),
-        }}
-        isTranscoding={
-          isTranscoding && !session.TranscodingInfo?.IsVideoDirect
-            ? true
-            : false
-        }
-      />
-
-      {subtitleStream && (
-        <>
-          <TranscodingStreamView
-            title="Subtitle"
-            isTranscoding={false}
-            properties={{
-              language: subtitleStream?.Language,
-              codec: subtitleStream?.Codec,
-            }}
-            transcodeValue={null}
-          />
-        </>
-      )}
-    </View>
-  );
-};

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

@@ -1,9 +1,8 @@
+import { Platform } from "react-native";
 import { Text } from "@/components/common/Text";
 import { ListGroup } from "@/components/list/ListGroup";
 import { ListItem } from "@/components/list/ListItem";
-import { AppLanguageSelector } from "@/components/settings/AppLanguageSelector";
 import { AudioToggles } from "@/components/settings/AudioToggles";
-import DownloadSettings from "@/components/settings/DownloadSettings";
 import { MediaProvider } from "@/components/settings/MediaContext";
 import { MediaToggles } from "@/components/settings/MediaToggles";
 import { OtherSettings } from "@/components/settings/OtherSettings";
@@ -11,24 +10,21 @@ import { PluginSettings } from "@/components/settings/PluginSettings";
 import { QuickConnect } from "@/components/settings/QuickConnect";
 import { StorageSettings } from "@/components/settings/StorageSettings";
 import { SubtitleToggles } from "@/components/settings/SubtitleToggles";
+import { AppLanguageSelector } from "@/components/settings/AppLanguageSelector";
 import { UserInfo } from "@/components/settings/UserInfo";
-import { useHaptic } from "@/hooks/useHaptic";
 import { useJellyfin } from "@/providers/JellyfinProvider";
 import { clearLogs } from "@/utils/log";
-import { storage } from "@/utils/mmkv";
+import { useHaptic } from "@/hooks/useHaptic";
 import { useNavigation, useRouter } from "expo-router";
 import { t } from "i18next";
-import React, { useEffect } from "react";
-import { ScrollView, Switch, TouchableOpacity, View } from "react-native";
+import React, { lazy, useEffect } from "react";
+import { ScrollView, TouchableOpacity, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { useAtom } from "jotai";
-import { userAtom } from "@/providers/JellyfinProvider";
-import { ChromecastSettings } from "@/components/settings/ChromecastSettings";
+import { storage } from "@/utils/mmkv";
 
 export default function settings() {
   const router = useRouter();
   const insets = useSafeAreaInsets();
-  const [user] = useAtom(userAtom);
   const { logout } = useJellyfin();
   const successHapticFeedback = useHaptic("success");
 
@@ -63,7 +59,6 @@ export default function settings() {
     >
       <View className="p-4 flex flex-col gap-y-4">
         <UserInfo />
-
         <QuickConnect className="mb-4" />
 
         <MediaProvider>
@@ -74,14 +69,10 @@ export default function settings() {
 
         <OtherSettings />
 
-        <DownloadSettings />
-
         <PluginSettings />
 
         <AppLanguageSelector />
 
-        <ChromecastSettings />
-
         <ListGroup title={"Intro"}>
           <ListItem
             onPress={() => {

app/(auth)/(tabs)/(home)/settings/optimized-server/page.tsx

@@ -1,89 +0,0 @@
-import { Text } from "@/components/common/Text";
-import { OptimizedServerForm } from "@/components/settings/OptimizedServerForm";
-import { apiAtom } from "@/providers/JellyfinProvider";
-import { useSettings } from "@/utils/atoms/settings";
-import { getOrSetDeviceId } from "@/utils/device";
-import { getStatistics } from "@/utils/optimize-server";
-import { useMutation } from "@tanstack/react-query";
-import { useNavigation } from "expo-router";
-import { useAtom } from "jotai";
-import { useEffect, useState } from "react";
-import { ActivityIndicator, TouchableOpacity, View } from "react-native";
-import { toast } from "sonner-native";
-import { useTranslation } from "react-i18next";
-import DisabledSetting from "@/components/settings/DisabledSetting";
-
-export default function page() {
-  const navigation = useNavigation();
-
-  const { t } = useTranslation();
-
-  const [api] = useAtom(apiAtom);
-  const [settings, updateSettings, pluginSettings] = useSettings();
-
-  const [optimizedVersionsServerUrl, setOptimizedVersionsServerUrl] =
-    useState<string>(settings?.optimizedVersionsServerUrl || "");
-
-  const saveMutation = useMutation({
-    mutationFn: async (newVal: string) => {
-      if (newVal.length === 0 || !newVal.startsWith("http")) {
-        toast.error(t("home.settings.toasts.invalid_url"));
-        return;
-      }
-
-      const updatedUrl = newVal.endsWith("/") ? newVal : newVal + "/";
-
-      updateSettings({
-        optimizedVersionsServerUrl: updatedUrl,
-      });
-
-      return await getStatistics({
-        url: updatedUrl,
-        authHeader: api?.accessToken,
-        deviceId: getOrSetDeviceId(),
-      });
-    },
-    onSuccess: (data) => {
-      if (data) {
-        toast.success(t("home.settings.toasts.connected"));
-      } else {
-        toast.error(t("home.settings.toasts.could_not_connect"));
-      }
-    },
-    onError: () => {
-      toast.error(t("home.settings.toasts.could_not_connect"));
-    },
-  });
-
-  const onSave = (newVal: string) => {
-    saveMutation.mutate(newVal);
-  };
-
-  useEffect(() => {
-    if (!pluginSettings?.optimizedVersionsServerUrl?.locked) {
-      navigation.setOptions({
-        title: t("home.settings.downloads.optimized_server"),
-        headerRight: () =>
-          saveMutation.isPending ? (
-            <ActivityIndicator size={"small"} color={"white"} />
-          ) : (
-            <TouchableOpacity onPress={() => onSave(optimizedVersionsServerUrl)}>
-              <Text className="text-blue-500">{t("home.settings.downloads.save_button")}</Text>
-            </TouchableOpacity>
-          ),
-      });
-    }
-  }, [navigation, optimizedVersionsServerUrl, saveMutation.isPending]);
-
-  return (
-    <DisabledSetting
-      disabled={pluginSettings?.optimizedVersionsServerUrl?.locked === true}
-      className="p-4"
-    >
-      <OptimizedServerForm
-        value={optimizedVersionsServerUrl}
-        onChangeValue={setOptimizedVersionsServerUrl}
-      />
-    </DisabledSetting>
-  );
-}

app/(auth)/(tabs)/(home,libraries,search,favorites)/jellyseerr/person/[personId].tsx

@@ -19,7 +19,7 @@ export default function page() {
   const local = useLocalSearchParams();
   const { t } = useTranslation();
 
-  const { jellyseerrApi, jellyseerrUser, jellyseerrRegion: region, jellyseerrLocale: locale } = useJellyseerr();
+  const { jellyseerrApi, jellyseerrUser } = useJellyseerr();
 
   const { personId } = local as { personId: string };
 
@@ -32,6 +32,15 @@ export default function page() {
     enabled: !!jellyseerrApi && !!personId,
   });
 
+  const locale = useMemo(() => {
+    return jellyseerrUser?.settings?.locale || "en";
+  }, [jellyseerrUser]);
+
+  const region = useMemo(
+    () => jellyseerrUser?.settings?.region || "US",
+    [jellyseerrUser]
+  );
+
   const castedRoles: PersonCreditCast[] = useMemo(
     () =>
       uniqBy(orderBy(

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

@@ -1,5 +1,4 @@
 import { AddToFavorites } from "@/components/AddToFavorites";
-import { DownloadItems } from "@/components/DownloadItem";
 import { ParallaxScrollView } from "@/components/ParallaxPage";
 import { NextUp } from "@/components/series/NextUp";
 import { SeasonPicker } from "@/components/series/SeasonPicker";
@@ -15,7 +14,7 @@ import { Image } from "expo-image";
 import { useLocalSearchParams, useNavigation } from "expo-router";
 import { useAtom } from "jotai";
 import React, { useEffect, useMemo } from "react";
-import { Platform, View } from "react-native";
+import { View } from "react-native";
 import { useTranslation } from "react-i18next";
 
 const page: React.FC = () => {
@@ -84,26 +83,7 @@ const page: React.FC = () => {
         allEpisodes &&
         allEpisodes.length > 0 && (
           <View className="flex flex-row items-center space-x-2">
-            <AddToFavorites item={item} />
-            {!Platform.isTV && (
-              <>
-                <DownloadItems
-                  size="large"
-                  title={t("item_card.download.download_series")}
-                  items={allEpisodes || []}
-                  MissingDownloadIconComponent={() => (
-                    <Ionicons name="download" size={22} color="white" />
-                  )}
-                  DownloadedIconComponent={() => (
-                    <Ionicons
-                      name="checkmark-done-outline"
-                      size={24}
-                      color="#9333ea"
-                    />
-                  )}
-                />
-              </>
-            )}
+            <AddToFavorites item={item} type="series" />
           </View>
         ),
     });

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

@@ -26,14 +26,12 @@ import React, {
   useEffect,
   useLayoutEffect,
   useMemo,
-  useRef,
   useState,
 } from "react";
 import { Platform, ScrollView, TouchableOpacity, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useDebounce } from "use-debounce";
 import { useTranslation } from "react-i18next";
-import { eventBus } from "@/utils/eventBus";
 
 type SearchType = "Library" | "Discover";
 
@@ -122,44 +120,21 @@ export default function search() {
     [api, searchEngine, settings]
   );
 
-  type HeaderSearchBarRef = {
-    focus: () => void;
-    blur: () => void;
-    setText: (text: string) => void;
-    clearText: () => void;
-    cancelSearch: () => void;
-  };
-
-  const searchBarRef = useRef<HeaderSearchBarRef>(null);
   const navigation = useNavigation();
   useLayoutEffect(() => {
     navigation.setOptions({
       headerSearchBarOptions: {
-        ref: searchBarRef,
         placeholder: t("search.search"),
         onChangeText: (e: any) => {
           router.setParams({ q: "" });
           setSearch(e.nativeEvent.text);
         },
         hideWhenScrolling: false,
-        autoFocus: false,
+        autoFocus: true,
       },
     });
   }, [navigation]);
 
-  useEffect(() => {
-    const unsubscribe = eventBus.on("searchTabPressed", () => {
-      // Screen not actuve
-      if (!searchBarRef.current) return;
-      // Screen is active, focus search bar
-      searchBarRef.current?.focus();
-    });
-
-    return () => {
-      unsubscribe();
-    };
-  }, []);
-
   const { data: movies, isFetching: l1 } = useQuery({
     queryKey: ["search", "movies", debouncedSearch],
     queryFn: () =>
@@ -234,12 +209,7 @@ export default function search() {
           paddingRight: insets.right,
         }}
       >
-        <View
-          className="flex flex-col"
-          style={{
-            marginTop: Platform.OS === "android" ? 16 : 0,
-          }}
-        >
+        <View className="flex flex-col">
           {jellyseerrApi && (
             <View className="flex flex-row flex-wrap space-x-2 px-4 mb-2">
               <TouchableOpacity onPress={() => setSearchType("Library")}>

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

@@ -10,6 +10,7 @@ import {
 } from "@bottom-tabs/react-navigation";
 
 const { Navigator } = createNativeBottomTabNavigator();
+
 import { BottomTabNavigationOptions } from "@react-navigation/bottom-tabs";
 
 import { Colors } from "@/constants/Colors";
@@ -20,7 +21,6 @@ import type {
   TabNavigationState,
 } from "@react-navigation/native";
 import { SystemBars } from "react-native-edge-to-edge";
-import { eventBus } from "@/utils/eventBus";
 
 export const NativeTabs = withLayoutContext<
   BottomTabNavigationOptions,
@@ -55,19 +55,12 @@ export default function TabLayout() {
       <NativeTabs
         sidebarAdaptable={false}
         ignoresTopSafeArea
-        tabBarStyle={{
-          backgroundColor: "#121212",
-        }}
+        barTintColor={Platform.OS === "android" ? "#121212" : undefined}
         tabBarActiveTintColor={Colors.primary}
         scrollEdgeAppearance="default"
       >
         <NativeTabs.Screen redirect name="index" />
         <NativeTabs.Screen
-          listeners={({ navigation }) => ({
-            tabPress: (e) => {
-              eventBus.emit("scrollToTop");
-            },
-          })}
           name="(home)"
           options={{
             title: t("tabs.home"),
@@ -82,11 +75,6 @@ export default function TabLayout() {
           }}
         />
         <NativeTabs.Screen
-          listeners={({ navigation }) => ({
-            tabPress: (e) => {
-              eventBus.emit("searchTabPressed");
-            },
-          })}
           name="(search)"
           options={{
             title: t("tabs.search"),

app/(auth)/player/_layout.tsx

@@ -3,21 +3,16 @@ import React, { useEffect } from "react";
 import { SystemBars } from "react-native-edge-to-edge";
 import * as ScreenOrientation from "@/packages/expo-screen-orientation";
 import { useSettings } from "@/utils/atoms/settings";
-import { Platform } from "react-native";
 
 export default function Layout() {
   const [settings] = useSettings();
 
   useEffect(() => {
-    if (Platform.isTV) return;
-
     if (settings.defaultVideoOrientation) {
       ScreenOrientation.lockAsync(settings.defaultVideoOrientation);
     }
 
     return () => {
-      if (Platform.isTV) return;
-
       if (settings.autoRotate === true) {
         ScreenOrientation.unlockAsync();
       } else {
@@ -41,6 +36,15 @@ export default function Layout() {
             animation: "fade",
           }}
         />
+        <Stack.Screen
+          name="transcoding-player"
+          options={{
+            headerShown: false,
+            autoHideHomeIndicator: true,
+            title: "",
+            animation: "fade",
+          }}
+        />
       </Stack>
     </>
   );

app/(auth)/player/direct-player.tsx

@@ -2,7 +2,7 @@ import { BITRATES } from "@/components/BitrateSelector";
 import { Text } from "@/components/common/Text";
 import { Loader } from "@/components/Loader";
 import { Controls } from "@/components/video-player/controls/Controls";
-import { getDownloadedFileUrl } from "@/hooks/useDownloadedFileOpener";
+import { useHaptic } from "@/hooks/useHaptic";
 import { useInvalidatePlaybackProgressCache } from "@/hooks/useRevalidatePlaybackProgressCache";
 import { useWebSocket } from "@/hooks/useWebsockets";
 import { VlcPlayerView } from "@/modules/vlc-player";
@@ -12,38 +12,39 @@ import {
   ProgressUpdatePayload,
   VlcPlayerViewRef,
 } from "@/modules/vlc-player/src/VlcPlayer.types";
-const downloadProvider = !Platform.isTV ? require("@/providers/DownloadProvider") : null;
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { useNativeDownloads } from "@/providers/NativeDownloadProvider";
+import { useSettings } from "@/utils/atoms/settings";
 import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
 import { writeToLog } from "@/utils/log";
 import native from "@/utils/profiles/native";
 import { msToTicks, ticksToSeconds } from "@/utils/time";
-import { activateKeepAwakeAsync, deactivateKeepAwake } from "expo-keep-awake";
-import { getPlaystateApi, getUserLibraryApi } from "@jellyfin/sdk/lib/utils/api";
-import { useHaptic } from "@/hooks/useHaptic";
-import { useGlobalSearchParams, useNavigation } from "expo-router";
-import { useAtomValue } from "jotai";
-import React, { useCallback, useMemo, useRef, useState, useEffect } from "react";
-import { Alert, View, Platform } from "react-native";
-import { useSharedValue } from "react-native-reanimated";
-import { useSettings } from "@/utils/atoms/settings";
-import { useTranslation } from "react-i18next";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
 import {
-  BaseItemDto,
-  MediaSourceInfo,
-  PlaybackOrder,
-  PlaybackProgressInfo,
-  PlaybackStartInfo,
-  RepeatMode,
-} from "@jellyfin/sdk/lib/generated-client";
+  getPlaystateApi,
+  getUserLibraryApi,
+} from "@jellyfin/sdk/lib/utils/api";
+import { useQuery } from "@tanstack/react-query";
+import * as FileSystem from "expo-file-system";
+import { useGlobalSearchParams } from "expo-router";
+import { useAtomValue } from "jotai";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { useTranslation } from "react-i18next";
+import { Alert, AppState, AppStateStatus, Platform, View } from "react-native";
+import { useSharedValue } from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 export default function page() {
+  console.log("Direct Player");
   const videoRef = useRef<VlcPlayerViewRef>(null);
   const user = useAtomValue(userAtom);
   const api = useAtomValue(apiAtom);
   const { t } = useTranslation();
-  const navigation = useNavigation();
 
   const [isPlaybackStopped, setIsPlaybackStopped] = useState(false);
   const [showControls, _setShowControls] = useState(true);
@@ -56,10 +57,8 @@ export default function page() {
   const progress = useSharedValue(0);
   const isSeeking = useSharedValue(false);
   const cacheProgress = useSharedValue(0);
-  let getDownloadedItem = null;
-  if (!Platform.isTV) {
-    getDownloadedItem = downloadProvider.useDownload();
-  }
+
+  const { getDownloadedItem } = useNativeDownloads();
 
   const revalidateProgressCache = useInvalidatePlaybackProgressCache();
 
@@ -86,115 +85,152 @@ export default function page() {
     offline: string;
   }>();
   const [settings] = useSettings();
-  const insets = useSafeAreaInsets();
   const offline = offlineStr === "true";
 
   const audioIndex = audioIndexStr ? parseInt(audioIndexStr, 10) : undefined;
   const subtitleIndex = subtitleIndexStr ? parseInt(subtitleIndexStr, 10) : -1;
-  const bitrateValue = bitrateValueStr ? parseInt(bitrateValueStr, 10) : BITRATES[0].value;
+  const bitrateValue = bitrateValueStr
+    ? parseInt(bitrateValueStr, 10)
+    : BITRATES[0].value;
 
-  const [item, setItem] = useState<BaseItemDto | null>(null);
-  const [itemStatus, setItemStatus] = useState({
-    isLoading: true,
-    isError: false,
+  const {
+    data: item,
+    isLoading: isLoadingItem,
+    isError: isErrorItem,
+  } = useQuery({
+    queryKey: ["item", itemId],
+    queryFn: async () => {
+      if (offline && !Platform.isTV) {
+        const item = await getDownloadedItem(itemId);
+        if (item) return item.item;
+      }
+
+      const res = await getUserLibraryApi(api!).getItem({
+        itemId,
+        userId: user?.Id,
+      });
+
+      return res.data;
+    },
+    enabled: !!itemId,
+    staleTime: 0,
   });
 
-  useEffect(() => {
-    const fetchItemData = async () => {
-      setItemStatus({ isLoading: true, isError: false });
-      try {
-        let fetchedItem: BaseItemDto | null = null;
-        if (offline && !Platform.isTV) {
-          const data = await getDownloadedItem.getDownloadedItem(itemId);
-          if (data) fetchedItem = data.item as BaseItemDto;
-        } else {
-          const res = await getUserLibraryApi(api!).getItem({
-            itemId,
-            userId: user?.Id,
-          });
-          fetchedItem = res.data;
+  const {
+    data: stream,
+    isLoading: isLoadingStreamUrl,
+    isError: isErrorStreamUrl,
+  } = useQuery({
+    queryKey: ["stream-url", itemId, mediaSourceId, bitrateValue],
+    queryFn: async () => {
+      if (offline && !Platform.isTV) {
+        const data = await getDownloadedItem(itemId);
+        if (!data?.mediaSource) return null;
+
+        let m3u8Url = "";
+        if (Platform.OS === "ios") {
+          const path = `${FileSystem.documentDirectory}/downloads/${item?.Id}/Data`;
+          const files = await FileSystem.readDirectoryAsync(path);
+
+          for (const file of files) {
+            if (file.endsWith(".m3u8")) {
+              console.log(file);
+              m3u8Url = `${path}/${file}`;
+              break;
+            }
+          }
+        } else if (Platform.OS === "android") {
+          m3u8Url = `${FileSystem.documentDirectory}/downloads/${item?.Id}/playlist.m3u8`;
+          const fileContents = await FileSystem.readAsStringAsync(m3u8Url);
+          console.log(fileContents);
         }
-        setItem(fetchedItem);
-      } catch (error) {
-        console.error("Failed to fetch item:", error);
-        setItemStatus({ isLoading: false, isError: true });
-      } finally {
-        setItemStatus({ isLoading: false, isError: false });
+
+        if (!m3u8Url) throw new Error("No m3u8 file found");
+
+        console.log("stream ~", {
+          mediaSource: data.mediaSource.Id,
+          url: m3u8Url,
+        });
+
+        if (item)
+          return {
+            mediaSource: data.mediaSource,
+            url: m3u8Url,
+            sessionId: undefined,
+          };
       }
-    };
 
-    if (itemId) {
-      fetchItemData();
-    }
-  }, [itemId, offline, api, user?.Id]);
+      const res = await getStreamUrl({
+        api,
+        item,
+        startTimeTicks: item?.UserData?.PlaybackPositionTicks!,
+        userId: user?.Id,
+        audioStreamIndex: audioIndex,
+        maxStreamingBitrate: bitrateValue,
+        mediaSourceId: mediaSourceId,
+        subtitleStreamIndex: subtitleIndex,
+        deviceProfile: native,
+      });
 
-  interface Stream {
-    mediaSource: MediaSourceInfo;
-    sessionId: string;
-    url: string;
-  }
+      if (!res) return null;
 
-  const [stream, setStream] = useState<Stream | null>(null);
-  const [streamStatus, setStreamStatus] = useState({
-    isLoading: true,
-    isError: false,
+      const { mediaSource, sessionId, url } = res;
+
+      if (!sessionId || !mediaSource || !url) {
+        Alert.alert(t("player.error"), t("player.failed_to_get_stream_url"));
+        return null;
+      }
+
+      return {
+        mediaSource,
+        sessionId,
+        url,
+      };
+    },
+    enabled: !!itemId && !!item,
+    staleTime: 0,
   });
 
-  useEffect(() => {
-    const fetchStreamData = async () => {
-      try {
-        let result: Stream | null = null;
-        if (offline && !Platform.isTV) {
-          const data = await getDownloadedItem.getDownloadedItem(itemId);
-          if (!data?.mediaSource) return;
-          const url = await getDownloadedFileUrl(data.item.Id!);
-          if (item) {
-            result = { mediaSource: data.mediaSource, sessionId: "", url };
-          }
-        } else {
-          const res = await getStreamUrl({
-            api,
-            item,
-            startTimeTicks: item?.UserData?.PlaybackPositionTicks!,
-            userId: user?.Id,
-            audioStreamIndex: audioIndex,
-            maxStreamingBitrate: bitrateValue,
-            mediaSourceId: mediaSourceId,
-            subtitleStreamIndex: subtitleIndex,
-            deviceProfile: native,
-          });
-          if (!res) return;
-          const { mediaSource, sessionId, url } = res;
-          if (!sessionId || !mediaSource || !url) {
-            Alert.alert(t("player.error"), t("player.failed_to_get_stream_url"));
-            return;
-          }
-          result = { mediaSource, sessionId, url };
-        }
-        setStream(result);
-      } catch (error) {
-        console.error("Failed to fetch stream:", error);
-        setStreamStatus({ isLoading: false, isError: true });
-      } finally {
-        setStreamStatus({ isLoading: false, isError: false });
-      }
-    };
-    fetchStreamData();
-  }, [itemId, mediaSourceId, bitrateValue, api, item, user?.Id]);
+  const togglePlay = useCallback(async () => {
+    if (!api) return;
 
-  const togglePlay = async () => {
     lightHapticFeedback();
-    setIsPlaying(!isPlaying);
     if (isPlaying) {
       await videoRef.current?.pause();
     } else {
       videoRef.current?.play();
     }
-  };
+
+    if (!offline && stream) {
+      await getPlaystateApi(api).onPlaybackProgress({
+        itemId: item?.Id!,
+        audioStreamIndex: audioIndex ? audioIndex : undefined,
+        subtitleStreamIndex: subtitleIndex ? subtitleIndex : undefined,
+        mediaSourceId: mediaSourceId,
+        positionTicks: msToTicks(progress.get()),
+        isPaused: !isPlaying,
+        playMethod: stream?.url.includes("m3u8") ? "Transcode" : "DirectStream",
+        playSessionId: stream.sessionId,
+      });
+    }
+  }, [
+    isPlaying,
+    api,
+    item,
+    stream,
+    videoRef,
+    audioIndex,
+    subtitleIndex,
+    mediaSourceId,
+    offline,
+    progress,
+  ]);
 
   const reportPlaybackStopped = useCallback(async () => {
     if (offline) return;
+
     const currentTimeInTicks = msToTicks(progress.get());
+
     await getPlaystateApi(api!).onPlaybackStopped({
       itemId: item?.Id!,
       mediaSourceId: mediaSourceId,
@@ -211,35 +247,27 @@ export default function page() {
     videoRef.current?.stop();
   }, [videoRef, reportPlaybackStopped]);
 
-  useEffect(() => {
-    const beforeRemoveListener = navigation.addListener("beforeRemove", stop);
-    return () => {
-      beforeRemoveListener();
-    };
-  }, [navigation, stop]);
+  // TODO: unused should remove.
+  const reportPlaybackStart = useCallback(async () => {
+    if (offline) return;
 
-  const currentPlayStateInfo = () => {
-    return {
+    if (!stream) return;
+    await getPlaystateApi(api!).onPlaybackStart({
       itemId: item?.Id!,
       audioStreamIndex: audioIndex ? audioIndex : undefined,
       subtitleStreamIndex: subtitleIndex ? subtitleIndex : undefined,
       mediaSourceId: mediaSourceId,
-      positionTicks: msToTicks(progress.get()),
-      isPaused: !isPlaying,
-      playMethod: stream?.url.includes("m3u8") ? "Transcode" : "DirectStream",
-      playSessionId: stream.sessionId,
-      isMuted: false,
-      canSeek: true,
-      repeatMode: RepeatMode.RepeatNone,
-      playbackOrder: PlaybackOrder.Default,
-    };
-  };
+      playMethod: stream.url?.includes("m3u8") ? "Transcode" : "DirectStream",
+      playSessionId: stream?.sessionId ? stream?.sessionId : undefined,
+    });
+  }, [api, item, mediaSourceId, stream]);
 
   const onProgress = useCallback(
     async (data: ProgressUpdatePayload) => {
       if (isSeeking.get() || isPlaybackStopped) return;
 
       const { currentTime } = data.nativeEvent;
+
       if (isBuffering) {
         setIsBuffering(false);
       }
@@ -248,30 +276,24 @@ export default function page() {
 
       if (offline) return;
 
+      const currentTimeInTicks = msToTicks(currentTime);
+
       if (!item?.Id || !stream) return;
 
-      reportPlaybackProgress();
+      await getPlaystateApi(api!).onPlaybackProgress({
+        itemId: item.Id,
+        audioStreamIndex: audioIndex ? audioIndex : undefined,
+        subtitleStreamIndex: subtitleIndex ? subtitleIndex : undefined,
+        mediaSourceId: mediaSourceId,
+        positionTicks: Math.floor(currentTimeInTicks),
+        isPaused: !isPlaying,
+        playMethod: stream?.url.includes("m3u8") ? "Transcode" : "DirectStream",
+        playSessionId: stream.sessionId,
+      });
     },
-    [item?.Id, audioIndex, subtitleIndex, mediaSourceId, isPlaying, stream, isSeeking, isPlaybackStopped, isBuffering]
+    [item?.Id, isSeeking, api, isPlaybackStopped, audioIndex, subtitleIndex]
   );
 
-  const onPipStarted = useCallback((e: PipStartedPayload) => {
-    const { pipStarted } = e.nativeEvent;
-    setIsPipStarted(pipStarted);
-  }, []);
-
-  const reportPlaybackProgress = useCallback(async () => {
-    if (!api || offline || !stream) return;
-    await getPlaystateApi(api).reportPlaybackProgress({
-      playbackProgressInfo: currentPlayStateInfo() as PlaybackProgressInfo,
-    });
-  }, [api, isPlaying, offline, stream, item?.Id, audioIndex, subtitleIndex, mediaSourceId, progress]);
-
-  const startPosition = useMemo(() => {
-    if (offline) return 0;
-    return item?.UserData?.PlaybackPositionTicks ? ticksToSeconds(item.UserData.PlaybackPositionTicks) : 0;
-  }, [item]);
-
   useWebSocket({
     isPlaying: isPlaying,
     togglePlay: togglePlay,
@@ -279,81 +301,117 @@ export default function page() {
     offline,
   });
 
-  const onPlaybackStateChanged = useCallback(
-    async (e: PlaybackStatePayload) => {
-      const { state, isBuffering, isPlaying } = e.nativeEvent;
-      if (state === "Playing") {
-        setIsPlaying(true);
-        reportPlaybackProgress();
-        if (!Platform.isTV) await activateKeepAwakeAsync();
-        return;
-      }
-
-      if (state === "Paused") {
-        setIsPlaying(false);
-        reportPlaybackProgress();
-        if (!Platform.isTV) await deactivateKeepAwake();
-        return;
-      }
-
-      if (isPlaying) {
-        setIsPlaying(true);
-        setIsBuffering(false);
-      } else if (isBuffering) {
-        setIsBuffering(true);
-      }
-    },
-    [reportPlaybackProgress]
-  );
-
-  const allAudio = stream?.mediaSource.MediaStreams?.filter((audio) => audio.Type === "Audio") || [];
-
-  // Move all the external subtitles last, because vlc places them last.
-  const allSubs =
-    stream?.mediaSource.MediaStreams?.filter((sub) => sub.Type === "Subtitle").sort(
-      (a, b) => Number(a.IsExternal) - Number(b.IsExternal)
-    ) || [];
-
-  const externalSubtitles = allSubs
-    .filter((sub: any) => sub.DeliveryMethod === "External")
-    .map((sub: any) => ({
-      name: sub.DisplayTitle,
-      DeliveryUrl: api?.basePath + sub.DeliveryUrl,
-    }));
-
-  const textSubs = allSubs.filter((sub) => sub.IsTextSubtitleStream);
-
-  const chosenSubtitleTrack = allSubs.find((sub) => sub.Index === subtitleIndex);
-  const chosenAudioTrack = allAudio.find((audio) => audio.Index === audioIndex);
-
-  const notTranscoding = !stream?.mediaSource.TranscodingUrl;
-  let initOptions = [`--sub-text-scale=${settings.subtitleSize}`];
-  if (chosenSubtitleTrack && (notTranscoding || chosenSubtitleTrack.IsTextSubtitleStream)) {
-    const finalIndex = notTranscoding ? allSubs.indexOf(chosenSubtitleTrack) : textSubs.indexOf(chosenSubtitleTrack);
-    initOptions.push(`--sub-track=${finalIndex}`);
-  }
-
-  if (notTranscoding && chosenAudioTrack) {
-    initOptions.push(`--audio-track=${allAudio.indexOf(chosenAudioTrack)}`);
-  }
-
-  const [isMounted, setIsMounted] = useState(false);
-
-  // Add useEffect to handle mounting
-  useEffect(() => {
-    setIsMounted(true);
-    return () => setIsMounted(false);
+  const onPipStarted = useCallback((e: PipStartedPayload) => {
+    const { pipStarted } = e.nativeEvent;
+    setIsPipStarted(pipStarted);
   }, []);
 
-  if (itemStatus.isLoading || streamStatus.isLoading) {
+  const onPlaybackStateChanged = useCallback((e: PlaybackStatePayload) => {
+    const { state, isBuffering, isPlaying } = e.nativeEvent;
+
+    if (state === "Playing") {
+      setIsPlaying(true);
+      return;
+    }
+
+    if (state === "Paused") {
+      setIsPlaying(false);
+      return;
+    }
+
+    if (isPlaying) {
+      setIsPlaying(true);
+      setIsBuffering(false);
+    } else if (isBuffering) {
+      setIsBuffering(true);
+    }
+  }, []);
+
+  const startPosition = useMemo(() => {
+    if (offline) return 0;
+
+    return item?.UserData?.PlaybackPositionTicks
+      ? ticksToSeconds(item.UserData.PlaybackPositionTicks)
+      : 0;
+  }, [item]);
+
+  const [appState, setAppState] = useState(AppState.currentState);
+
+  useEffect(() => {
+    const handleAppStateChange = (nextAppState: AppStateStatus) => {
+      // Handle app going to the background
+      if (nextAppState.match(/inactive|background/)) {
+        _setShowControls(false);
+      }
+      setAppState(nextAppState);
+    };
+
+    // Use AppState.addEventListener and return a cleanup function
+    const subscription = AppState.addEventListener(
+      "change",
+      handleAppStateChange
+    );
+
+    return () => {
+      // Cleanup the event listener when the component is unmounted
+      subscription.remove();
+    };
+  }, [appState, isPipStarted, isPlaying]);
+
+  // Preselection of audio and subtitle tracks.
+  if (!settings) return null;
+
+  let initOptions = [`--sub-text-scale=${settings.subtitleSize}`];
+  let externalTrack = { name: "", DeliveryUrl: "" };
+
+  const allSubs =
+    stream?.mediaSource.MediaStreams?.filter(
+      (sub) => sub.Type === "Subtitle"
+    ) || [];
+  const chosenSubtitleTrack = allSubs.find(
+    (sub) => sub.Index === subtitleIndex
+  );
+  const allAudio =
+    stream?.mediaSource.MediaStreams?.filter(
+      (audio) => audio.Type === "Audio"
+    ) || [];
+  const chosenAudioTrack = allAudio.find((audio) => audio.Index === audioIndex);
+
+  // Direct playback CASE
+  if (!bitrateValue) {
+    // If Subtitle is embedded we can use the position to select it straight away.
+    if (chosenSubtitleTrack && !chosenSubtitleTrack.DeliveryUrl) {
+      initOptions.push(`--sub-track=${allSubs.indexOf(chosenSubtitleTrack)}`);
+    } else if (chosenSubtitleTrack && chosenSubtitleTrack.DeliveryUrl) {
+      // If Subtitle is external we need to pass the URL to the player.
+      externalTrack = {
+        name: chosenSubtitleTrack.DisplayTitle || "",
+        DeliveryUrl: `${api?.basePath || ""}${chosenSubtitleTrack.DeliveryUrl}`,
+      };
+    }
+
+    if (chosenAudioTrack)
+      initOptions.push(`--audio-track=${allAudio.indexOf(chosenAudioTrack)}`);
+  } else {
+    // Transcoded playback CASE
+    if (chosenSubtitleTrack?.DeliveryMethod === "Hls") {
+      externalTrack = {
+        name: `subs ${chosenSubtitleTrack.DisplayTitle}`,
+        DeliveryUrl: "",
+      };
+    }
+  }
+
+  const insets = useSafeAreaInsets();
+
+  if (!item || isLoadingItem || isLoadingStreamUrl || !stream)
     return (
       <View className="w-screen h-screen flex flex-col items-center justify-center bg-black">
         <Loader />
       </View>
     );
-  }
 
-  if (!item || !stream || itemStatus.isError || streamStatus.isError)
+  if (isErrorItem || isErrorStreamUrl)
     return (
       <View className="w-screen h-screen flex flex-col items-center justify-center bg-black">
         <Text className="text-white">{t("player.error")}</Text>
@@ -377,11 +435,11 @@ export default function page() {
         <VlcPlayerView
           ref={videoRef}
           source={{
-            uri: stream?.url || "",
+            uri: stream.url,
             autoplay: true,
             isNetwork: true,
             startPosition,
-            externalSubtitles,
+            externalTrack,
             initOptions,
           }}
           style={{ width: "100%", height: "100%" }}
@@ -389,17 +447,21 @@ export default function page() {
           progressUpdateInterval={1000}
           onVideoStateChange={onPlaybackStateChanged}
           onPipStarted={onPipStarted}
+          onVideoLoadStart={() => {}}
           onVideoLoadEnd={() => {
             setIsVideoLoaded(true);
           }}
           onVideoError={(e) => {
             console.error("Video Error:", e.nativeEvent);
-            Alert.alert(t("player.error"), t("player.an_error_occured_while_playing_the_video"));
+            Alert.alert(
+              t("player.error"),
+              t("player.an_error_occured_while_playing_the_video")
+            );
             writeToLog("ERROR", "Video Error", e.nativeEvent);
           }}
         />
       </View>
-      {videoRef.current && !isPipStarted && isMounted === true ? (
+      {videoRef.current && (
         <Controls
           mediaSource={stream?.mediaSource}
           item={item}
@@ -426,9 +488,10 @@ export default function page() {
           setSubtitleTrack={videoRef.current.setSubtitleTrack}
           setSubtitleURL={videoRef.current.setSubtitleURL}
           setAudioTrack={videoRef.current.setAudioTrack}
+          stop={stop}
           isVlc
         />
-      ) : null}
+      )}
     </View>
   );
 }

app/(auth)/player/transcoding-player.tsx

@@ -0,0 +1,546 @@
+import { Text } from "@/components/common/Text";
+import { Loader } from "@/components/Loader";
+import { Controls } from "@/components/video-player/controls/Controls";
+import { useOrientation } from "@/hooks/useOrientation";
+import { useOrientationSettings } from "@/hooks/useOrientationSettings";
+import { useInvalidatePlaybackProgressCache } from "@/hooks/useRevalidatePlaybackProgressCache";
+import { useWebSocket } from "@/hooks/useWebsockets";
+import { TrackInfo } from "@/modules/vlc-player";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { useSettings } from "@/utils/atoms/settings";
+import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
+import { getAuthHeaders } from "@/utils/jellyfin/jellyfin";
+import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
+import transcoding from "@/utils/profiles/transcoding";
+import { secondsToTicks } from "@/utils/secondsToTicks";
+import { Api } from "@jellyfin/sdk";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+import {
+  getPlaystateApi,
+  getUserLibraryApi,
+} from "@jellyfin/sdk/lib/utils/api";
+import { useQuery } from "@tanstack/react-query";
+import { useHaptic } from "@/hooks/useHaptic";
+import { useFocusEffect, useLocalSearchParams } from "expo-router";
+import { useAtomValue } from "jotai";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { View } from "react-native";
+import { useSharedValue } from "react-native-reanimated";
+import Video, {
+  OnProgressData,
+  SelectedTrack,
+  SelectedTrackType,
+  VideoRef,
+} from "react-native-video";
+import { SubtitleHelper } from "@/utils/SubtitleHelper";
+import { useTranslation } from "react-i18next";
+
+const Player = () => {
+  console.log("Transcoding Player");
+
+  const api = useAtomValue(apiAtom);
+  const user = useAtomValue(userAtom);
+  const [settings] = useSettings();
+  const videoRef = useRef<VideoRef | null>(null);
+  const { t } = useTranslation();
+
+  const firstTime = useRef(true);
+  const revalidateProgressCache = useInvalidatePlaybackProgressCache();
+  const lightHapticFeedback = useHaptic("light");
+
+  const [isPlaybackStopped, setIsPlaybackStopped] = useState(false);
+  const [showControls, _setShowControls] = useState(true);
+  const [ignoreSafeAreas, setIgnoreSafeAreas] = useState(false);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [isBuffering, setIsBuffering] = useState(true);
+  const [isVideoLoaded, setIsVideoLoaded] = useState(false);
+
+  const setShowControls = useCallback((show: boolean) => {
+    _setShowControls(show);
+    lightHapticFeedback();
+  }, []);
+
+  const progress = useSharedValue(0);
+  const isSeeking = useSharedValue(false);
+  const cacheProgress = useSharedValue(0);
+
+  const {
+    itemId,
+    audioIndex: audioIndexStr,
+    subtitleIndex: subtitleIndexStr,
+    mediaSourceId,
+    bitrateValue: bitrateValueStr,
+  } = useLocalSearchParams<{
+    itemId: string;
+    audioIndex: string;
+    subtitleIndex: string;
+    mediaSourceId: string;
+    bitrateValue: string;
+  }>();
+
+  const audioIndex = audioIndexStr ? parseInt(audioIndexStr, 10) : undefined;
+  const subtitleIndex = subtitleIndexStr
+    ? parseInt(subtitleIndexStr, 10)
+    : undefined;
+  const bitrateValue = bitrateValueStr
+    ? parseInt(bitrateValueStr, 10)
+    : undefined;
+
+  const {
+    data: item,
+    isLoading: isLoadingItem,
+    isError: isErrorItem,
+  } = useQuery({
+    queryKey: ["item", itemId],
+    queryFn: async () => {
+      if (!api) {
+        throw new Error("No api");
+      }
+
+      if (!itemId) {
+        console.warn("No itemId");
+        return null;
+      }
+
+      const res = await getUserLibraryApi(api).getItem({
+        itemId,
+        userId: user?.Id,
+      });
+
+      return res.data;
+    },
+    staleTime: 0,
+  });
+
+  // TODO: NEED TO FIND A WAY TO FROM SWITCHING TO IMAGE BASED TO TEXT BASED SUBTITLES, THERE IS A BUG.
+  // MOST LIKELY LIKELY NEED A MASSIVE REFACTOR.
+  const {
+    data: stream,
+    isLoading: isLoadingStreamUrl,
+    isError: isErrorStreamUrl,
+  } = useQuery({
+    queryKey: ["stream-url", itemId, bitrateValue, mediaSourceId, audioIndex],
+
+    queryFn: async () => {
+      if (!api) {
+        throw new Error("No api");
+      }
+
+      if (!item) {
+        console.warn("No item", itemId, item);
+        return null;
+      }
+
+      const res = await getStreamUrl({
+        api,
+        item,
+        startTimeTicks: item?.UserData?.PlaybackPositionTicks!,
+        userId: user?.Id,
+        audioStreamIndex: audioIndex,
+        maxStreamingBitrate: bitrateValue,
+        mediaSourceId: mediaSourceId,
+        subtitleStreamIndex: subtitleIndex,
+        deviceProfile: transcoding,
+      });
+
+      if (!res) return null;
+
+      const { mediaSource, sessionId, url } = res;
+
+      if (!sessionId || !mediaSource || !url) {
+        console.warn("No sessionId or mediaSource or url", url);
+        return null;
+      }
+
+      return {
+        mediaSource,
+        sessionId,
+        url,
+      };
+    },
+    enabled: !!item,
+    staleTime: 0,
+  });
+
+  const poster = usePoster(item, api);
+  const videoSource = useVideoSource(item, api, poster, stream?.url);
+
+  const togglePlay = useCallback(async () => {
+    lightHapticFeedback();
+    if (isPlaying) {
+      videoRef.current?.pause();
+      await getPlaystateApi(api!).onPlaybackProgress({
+        itemId: item?.Id!,
+        audioStreamIndex: audioIndex ? audioIndex : undefined,
+        subtitleStreamIndex: subtitleIndex ? subtitleIndex : undefined,
+        mediaSourceId: mediaSourceId,
+        positionTicks: Math.floor(progress.value),
+        isPaused: true,
+        playMethod: stream?.url.includes("m3u8") ? "Transcode" : "DirectStream",
+        playSessionId: stream?.sessionId,
+      });
+    } else {
+      videoRef.current?.resume();
+      await getPlaystateApi(api!).onPlaybackProgress({
+        itemId: item?.Id!,
+        audioStreamIndex: audioIndex ? audioIndex : undefined,
+        subtitleStreamIndex: subtitleIndex ? subtitleIndex : undefined,
+        mediaSourceId: mediaSourceId,
+        positionTicks: Math.floor(progress.value),
+        isPaused: false,
+        playMethod: stream?.url.includes("m3u8") ? "Transcode" : "DirectStream",
+        playSessionId: stream?.sessionId,
+      });
+    }
+  }, [
+    isPlaying,
+    api,
+    item,
+    videoRef,
+    settings,
+    stream,
+    audioIndex,
+    subtitleIndex,
+    mediaSourceId,
+  ]);
+
+  const play = useCallback(() => {
+    videoRef.current?.resume();
+    reportPlaybackStart();
+  }, [videoRef]);
+
+  const pause = useCallback(() => {
+    videoRef.current?.pause();
+  }, [videoRef]);
+
+  const seek = useCallback(
+    (seconds: number) => {
+      videoRef.current?.seek(seconds);
+    },
+    [videoRef]
+  );
+
+  const reportPlaybackStopped = async () => {
+    if (!item?.Id) return;
+    await getPlaystateApi(api!).onPlaybackStopped({
+      itemId: item.Id,
+      mediaSourceId: mediaSourceId,
+      positionTicks: Math.floor(progress.value),
+      playSessionId: stream?.sessionId,
+    });
+    revalidateProgressCache();
+  };
+
+  const stop = useCallback(() => {
+    reportPlaybackStopped();
+    videoRef.current?.pause();
+    setIsPlaybackStopped(true);
+  }, [videoRef, reportPlaybackStopped]);
+
+  const reportPlaybackStart = async () => {
+    if (!item?.Id) return;
+    await getPlaystateApi(api!).onPlaybackStart({
+      itemId: item.Id,
+      audioStreamIndex: audioIndex ? audioIndex : undefined,
+      subtitleStreamIndex: subtitleIndex ? subtitleIndex : undefined,
+      mediaSourceId: mediaSourceId,
+      playMethod: stream?.url.includes("m3u8") ? "Transcode" : "DirectStream",
+      playSessionId: stream?.sessionId,
+    });
+  };
+
+  const onProgress = useCallback(
+    async (data: OnProgressData) => {
+      if (isSeeking.value === true) return;
+      if (isPlaybackStopped === true) return;
+
+      const ticks = secondsToTicks(data.currentTime);
+
+      progress.value = ticks;
+      cacheProgress.value = secondsToTicks(data.playableDuration);
+
+      // TODO: Use this when streaming with HLS url, but NOT when direct playing
+      // TODO: since playable duration is always 0 then.
+      setIsBuffering(data.playableDuration === 0);
+
+      if (!item?.Id || data.currentTime === 0) {
+        return;
+      }
+
+      await getPlaystateApi(api!).onPlaybackProgress({
+        itemId: item.Id,
+        audioStreamIndex: audioIndex ? audioIndex : undefined,
+        subtitleStreamIndex: subtitleIndex ? subtitleIndex : undefined,
+        mediaSourceId: mediaSourceId,
+        positionTicks: Math.round(ticks),
+        isPaused: !isPlaying,
+        playMethod: stream?.url.includes("m3u8") ? "Transcode" : "DirectStream",
+        playSessionId: stream?.sessionId,
+      });
+    },
+    [
+      item,
+      isPlaying,
+      api,
+      isPlaybackStopped,
+      isSeeking,
+      stream,
+      mediaSourceId,
+      audioIndex,
+      subtitleIndex,
+    ]
+  );
+
+  useWebSocket({
+    isPlaying: isPlaying,
+    togglePlay: togglePlay,
+    stopPlayback: stop,
+    offline: false,
+  });
+
+  const [selectedTextTrack, setSelectedTextTrack] = useState<
+    SelectedTrack | undefined
+  >();
+
+  const [embededTextTracks, setEmbededTextTracks] = useState<
+    {
+      index: number;
+      language?: string | undefined;
+      selected?: boolean | undefined;
+      title?: string | undefined;
+      type: any;
+    }[]
+  >([]);
+
+  const [audioTracks, setAudioTracks] = useState<TrackInfo[]>([]);
+  const [selectedAudioTrack, setSelectedAudioTrack] = useState<
+    SelectedTrack | undefined
+  >(undefined);
+
+  useEffect(() => {
+    if (selectedTextTrack === undefined) {
+      const subtitleHelper = new SubtitleHelper(
+        stream?.mediaSource.MediaStreams ?? []
+      );
+      const embeddedTrackIndex = subtitleHelper.getEmbeddedTrackIndex(
+        subtitleIndex!
+      );
+
+      // Most likely the subtitle is burned in.
+      if (embeddedTrackIndex === -1) return;
+
+      setSelectedTextTrack({
+        type: SelectedTrackType.INDEX,
+        value: embeddedTrackIndex,
+      });
+    }
+  }, [embededTextTracks]);
+
+  const getAudioTracks = (): TrackInfo[] => {
+    return audioTracks.map((t) => ({
+      name: t.name,
+      index: t.index,
+    }));
+  };
+
+  const getSubtitleTracks = (): TrackInfo[] => {
+    return embededTextTracks.map((t) => ({
+      name: t.title ?? "",
+      index: t.index,
+      language: t.language,
+    }));
+  };
+
+  useFocusEffect(
+    React.useCallback(() => {
+      return async () => {
+        stop();
+      };
+    }, [])
+  );
+
+  if (isLoadingItem || isLoadingStreamUrl)
+    return (
+      <View className="w-screen h-screen flex flex-col items-center justify-center bg-black">
+        <Loader />
+      </View>
+    );
+
+  if (isErrorItem || isErrorStreamUrl)
+    return (
+      <View className="w-screen h-screen flex flex-col items-center justify-center bg-black">
+        <Text className="text-white">{t("player.error")}</Text>
+      </View>
+    );
+
+  return (
+    <View style={{ flex: 1, backgroundColor: "black" }}>
+      <View
+        style={{
+          display: "flex",
+          width: "100%",
+          height: "100%",
+          position: "relative",
+          flexDirection: "column",
+          justifyContent: "center",
+        }}
+      >
+        {videoSource ? (
+          <>
+            <Video
+              ref={videoRef}
+              source={videoSource}
+              style={{
+                height: "100%",
+                width: "100%",
+              }}
+              resizeMode={ignoreSafeAreas ? "cover" : "contain"}
+              onProgress={onProgress}
+              onError={(e) => {
+                console.error("Error playing video", e);
+              }}
+              onLoad={() => {
+                if (firstTime.current === true) {
+                  play();
+                  firstTime.current = false;
+                }
+              }}
+              progressUpdateInterval={500}
+              playWhenInactive={true}
+              allowsExternalPlayback={true}
+              playInBackground={true}
+              showNotificationControls={true}
+              ignoreSilentSwitch="ignore"
+              fullscreen={false}
+              onPlaybackStateChanged={(state) => {
+                if (isSeeking.value === false) setIsPlaying(state.isPlaying);
+              }}
+              onTextTracks={(data) => {
+                setEmbededTextTracks(data.textTracks as any);
+              }}
+              onBuffer={(e) => {
+                setIsBuffering(e.isBuffering);
+              }}
+              onAudioTracks={(e) => {
+                setAudioTracks(
+                  e.audioTracks.map((t) => ({
+                    index: t.index,
+                    name: t.title ?? "",
+                    language: t.language,
+                  }))
+                );
+              }}
+              selectedTextTrack={selectedTextTrack}
+              selectedAudioTrack={selectedAudioTrack}
+            />
+          </>
+        ) : (
+          <Text>{t("player.no_video_source")}</Text>
+        )}
+      </View>
+
+      {item && (
+        <Controls
+          mediaSource={stream?.mediaSource}
+          videoRef={videoRef}
+          enableTrickplay={true}
+          item={item}
+          togglePlay={togglePlay}
+          isPlaying={isPlaying}
+          isSeeking={isSeeking}
+          progress={progress}
+          cacheProgress={cacheProgress}
+          isBuffering={isBuffering}
+          showControls={showControls}
+          setShowControls={setShowControls}
+          setIgnoreSafeAreas={setIgnoreSafeAreas}
+          ignoreSafeAreas={ignoreSafeAreas}
+          seek={seek}
+          play={play}
+          pause={pause}
+          stop={stop}
+          getSubtitleTracks={getSubtitleTracks}
+          setSubtitleTrack={(i) => {
+            if (i === -1) {
+              setSelectedTextTrack({
+                type: SelectedTrackType.DISABLED,
+                value: undefined,
+              });
+              return;
+            }
+            setSelectedTextTrack({
+              type: SelectedTrackType.INDEX,
+              value: i,
+            });
+          }}
+          getAudioTracks={getAudioTracks}
+          setAudioTrack={(i) => {
+            setSelectedAudioTrack({
+              type: SelectedTrackType.INDEX,
+              value: i,
+            });
+          }}
+        />
+      )}
+    </View>
+  );
+};
+
+export function usePoster(
+  item: BaseItemDto | null | undefined,
+  api: Api | null
+): string | undefined {
+  const poster = useMemo(() => {
+    if (!item || !api) return undefined;
+    return item.Type === "Audio"
+      ? `${api.basePath}/Items/${item.AlbumId}/Images/Primary?tag=${item.AlbumPrimaryImageTag}&quality=90&maxHeight=200&maxWidth=200`
+      : getBackdropUrl({
+          api,
+          item: item,
+          quality: 70,
+          width: 200,
+        });
+  }, [item, api]);
+
+  return poster ?? undefined;
+}
+
+export function useVideoSource(
+  item: BaseItemDto | null | undefined,
+  api: Api | null,
+  poster: string | undefined,
+  url?: string | null
+) {
+  const videoSource = useMemo(() => {
+    if (!item || !api || !url) {
+      return null;
+    }
+
+    const startPosition = item?.UserData?.PlaybackPositionTicks
+      ? Math.round(item.UserData.PlaybackPositionTicks / 10000)
+      : 0;
+
+    return {
+      uri: url,
+      isNetwork: true,
+      startPosition,
+      headers: getAuthHeaders(api),
+      metadata: {
+        title: item?.Name || "Unknown",
+        description: item?.Overview ?? undefined,
+        imageUri: poster,
+        subtitle: item?.Album ?? undefined,
+      },
+    };
+  }, [item, api, poster, url]);
+
+  return videoSource;
+}
+
+export default Player;

app/_layout.tsx

@@ -1,46 +1,35 @@
 import "@/augmentations";
-import { Platform } from "react-native";
 import i18n from "@/i18n";
-import { DownloadProvider } from "@/providers/DownloadProvider";
-import { getOrSetDeviceId, getTokenFromStorage, JellyfinProvider, apiAtom } from "@/providers/JellyfinProvider";
-import { JobQueueProvider } from "@/providers/JobQueueProvider";
+import * as ScreenOrientation from "@/packages/expo-screen-orientation";
+import { JellyfinProvider } from "@/providers/JellyfinProvider";
+import { NativeDownloadProvider } from "@/providers/NativeDownloadProvider";
 import { PlaySettingsProvider } from "@/providers/PlaySettingsProvider";
-import { WebSocketProvider } from "@/providers/WebSocketProvider";
-import { Settings, useSettings } from "@/utils/atoms/settings";
 import {
-  BACKGROUND_FETCH_TASK,
-  BACKGROUND_FETCH_TASK_SESSIONS,
-  registerBackgroundFetchAsyncSessions,
-} from "@/utils/background-tasks";
+  SplashScreenProvider,
+  useSplashScreenLoading,
+} from "@/providers/SplashScreenProvider";
+import { WebSocketProvider } from "@/providers/WebSocketProvider";
+import { useSettings } from "@/utils/atoms/settings";
 import { LogProvider, writeToLog } from "@/utils/log";
 import { storage } from "@/utils/mmkv";
-import { cancelJobById, getAllJobsByDeviceId } from "@/utils/optimize-server";
 import { ActionSheetProvider } from "@expo/react-native-action-sheet";
 import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
-const BackGroundDownloader = !Platform.isTV ? require("@kesha-antonov/react-native-background-downloader") : null;
 import { DarkTheme, ThemeProvider } from "@react-navigation/native";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-const BackgroundFetch = !Platform.isTV ? require("expo-background-fetch") : null;
-import * as FileSystem from "expo-file-system";
-const Notifications = !Platform.isTV ? require("expo-notifications") : null;
-import { router, Stack } from "expo-router";
-import * as SplashScreen from "expo-splash-screen";
-import * as ScreenOrientation from "@/packages/expo-screen-orientation";
-const TaskManager = !Platform.isTV ? require("expo-task-manager") : null;
+import { useFonts } from "expo-font";
+import { useKeepAwake } from "expo-keep-awake";
 import { getLocales } from "expo-localization";
+import { router, Stack } from "expo-router";
 import { Provider as JotaiProvider } from "jotai";
 import { useEffect, useRef } from "react";
-import { I18nextProvider } from "react-i18next";
-import { Appearance, AppState } from "react-native";
+import { I18nextProvider, useTranslation } from "react-i18next";
+import { Appearance, AppState, Platform } from "react-native";
 import { SystemBars } from "react-native-edge-to-edge";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import "react-native-reanimated";
 import { Toaster } from "sonner-native";
-import { useAtom } from "jotai";
-import { userAtom } from "@/providers/JellyfinProvider";
-import { getSessionApi } from "@jellyfin/sdk/lib/utils/api/session-api";
-import { store } from "@/utils/store";
+const Notifications = !Platform.isTV ? require("expo-notifications") : null;
 
 if (!Platform.isTV) {
   Notifications.setNotificationHandler({
@@ -52,15 +41,6 @@ if (!Platform.isTV) {
   });
 }
 
-// Keep the splash screen visible while we fetch resources
-SplashScreen.preventAutoHideAsync();
-
-// Set the animation options. This is optional.
-SplashScreen.setOptions({
-  duration: 500,
-  fade: true,
-});
-
 function useNotificationObserver() {
   if (Platform.isTV) return;
 
@@ -74,16 +54,20 @@ function useNotificationObserver() {
       }
     }
 
-    Notifications.getLastNotificationResponseAsync().then((response: { notification: any }) => {
-      if (!isMounted || !response?.notification) {
-        return;
+    Notifications.getLastNotificationResponseAsync().then(
+      (response: { notification: any }) => {
+        if (!isMounted || !response?.notification) {
+          return;
+        }
+        redirect(response?.notification);
       }
-      redirect(response?.notification);
-    });
+    );
 
-    const subscription = Notifications.addNotificationResponseReceivedListener((response: { notification: any }) => {
-      redirect(response.notification);
-    });
+    const subscription = Notifications.addNotificationResponseReceivedListener(
+      (response: { notification: any }) => {
+        redirect(response.notification);
+      }
+    );
 
     return () => {
       isMounted = false;
@@ -92,119 +76,11 @@ function useNotificationObserver() {
   }, []);
 }
 
-if (!Platform.isTV) {
-  TaskManager.defineTask(BACKGROUND_FETCH_TASK_SESSIONS, async () => {
-    console.log("TaskManager ~ sessions trigger");
-
-    const api = store.get(apiAtom);
-    if (api === null || api === undefined) return;
-
-    const response = await getSessionApi(api).getSessions({
-      activeWithinSeconds: 360,
-    });
-
-    const result = response.data.filter((s) => s.NowPlayingItem);
-    Notifications.setBadgeCountAsync(result.length);
-  
-    return BackgroundFetch.BackgroundFetchResult.NewData;
-  });
-
-  TaskManager.defineTask(BACKGROUND_FETCH_TASK, async () => {
-    console.log("TaskManager ~ trigger");
-
-    const now = Date.now();
-
-    const settingsData = storage.getString("settings");
-
-    if (!settingsData) return BackgroundFetch.BackgroundFetchResult.NoData;
-
-    const settings: Partial<Settings> = JSON.parse(settingsData);
-    const url = settings?.optimizedVersionsServerUrl;
-
-    if (!settings?.autoDownload || !url) return BackgroundFetch.BackgroundFetchResult.NoData;
-
-    const token = getTokenFromStorage();
-    const deviceId = getOrSetDeviceId();
-    const baseDirectory = FileSystem.documentDirectory;
-
-    if (!token || !deviceId || !baseDirectory) return BackgroundFetch.BackgroundFetchResult.NoData;
-
-    const jobs = await getAllJobsByDeviceId({
-      deviceId,
-      authHeader: token,
-      url,
-    });
-
-    console.log("TaskManager ~ Active jobs: ", jobs.length);
-
-    for (let job of jobs) {
-      if (job.status === "completed") {
-        const downloadUrl = url + "download/" + job.id;
-        const tasks = await BackGroundDownloader.checkForExistingDownloads();
-
-        if (tasks.find((task: { id: string }) => task.id === job.id)) {
-          console.log("TaskManager ~ Download already in progress: ", job.id);
-          continue;
-        }
-
-        BackGroundDownloader.download({
-          id: job.id,
-          url: downloadUrl,
-          destination: `${baseDirectory}${job.item.Id}.mp4`,
-          headers: {
-            Authorization: token,
-          },
-        })
-          .begin(() => {
-            console.log("TaskManager ~ Download started: ", job.id);
-          })
-          .done(() => {
-            console.log("TaskManager ~ Download completed: ", job.id);
-            saveDownloadedItemInfo(job.item);
-            BackGroundDownloader.completeHandler(job.id);
-            cancelJobById({
-              authHeader: token,
-              id: job.id,
-              url: url,
-            });
-            Notifications.scheduleNotificationAsync({
-              content: {
-                title: job.item.Name,
-                body: "Download completed",
-                data: {
-                  url: `/downloads`,
-                },
-              },
-              trigger: null,
-            });
-          })
-          .error((error: any) => {
-            console.log("TaskManager ~ Download error: ", job.id, error);
-            BackGroundDownloader.completeHandler(job.id);
-            Notifications.scheduleNotificationAsync({
-              content: {
-                title: job.item.Name,
-                body: "Download failed",
-                data: {
-                  url: `/downloads`,
-                },
-              },
-              trigger: null,
-            });
-          });
-      }
-    }
-
-    console.log(`Auto download started: ${new Date(now).toISOString()}`);
-
-    // Be sure to return the successful result type!
-    return BackgroundFetch.BackgroundFetchResult.NewData;
-  });
-}
-
 const checkAndRequestPermissions = async () => {
   try {
-    const hasAskedBefore = storage.getString("hasAskedForNotificationPermission");
+    const hasAskedBefore = storage.getString(
+      "hasAskedForNotificationPermission"
+    );
 
     if (hasAskedBefore !== "true") {
       const { status } = await Notifications.requestPermissionsAsync();
@@ -222,7 +98,11 @@ const checkAndRequestPermissions = async () => {
       console.log("Already asked for notification permissions before.");
     }
   } catch (error) {
-    writeToLog("ERROR", "Error checking/requesting notification permissions:", error);
+    writeToLog(
+      "ERROR",
+      "Error checking/requesting notification permissions:",
+      error
+    );
     console.error("Error checking/requesting notification permissions:", error);
   }
 };
@@ -231,15 +111,17 @@ export default function RootLayout() {
   Appearance.setColorScheme("dark");
 
   return (
-    <GestureHandlerRootView style={{ flex: 1 }}>
-      <JotaiProvider>
-        <ActionSheetProvider>
-          <I18nextProvider i18n={i18n}>
-            <Layout />
-          </I18nextProvider>
-        </ActionSheetProvider>
-      </JotaiProvider>
-    </GestureHandlerRootView>
+    <SplashScreenProvider>
+      <GestureHandlerRootView style={{ flex: 1 }}>
+        <JotaiProvider>
+          <ActionSheetProvider>
+            <I18nextProvider i18n={i18n}>
+              <Layout />
+            </I18nextProvider>
+          </ActionSheetProvider>
+        </JotaiProvider>
+      </GestureHandlerRootView>
+    </SplashScreenProvider>
   );
 }
 
@@ -257,111 +139,105 @@ const queryClient = new QueryClient({
 
 function Layout() {
   const [settings] = useSettings();
-  const [user] = useAtom(userAtom);
   const appState = useRef(AppState.currentState);
 
   useEffect(() => {
-    i18n.changeLanguage(settings?.preferedLanguage ?? getLocales()[0].languageCode ?? "en");
+    i18n.changeLanguage(
+      settings?.preferedLanguage ?? getLocales()[0].languageCode ?? "en"
+    );
   }, [settings?.preferedLanguage, i18n]);
 
   if (!Platform.isTV) {
+    useKeepAwake();
     useNotificationObserver();
 
+    const { i18n } = useTranslation();
+
     useEffect(() => {
       checkAndRequestPermissions();
-      (async () => {
-        if (!Platform.isTV && user && user.Policy?.IsAdministrator) {
-          registerBackgroundFetchAsyncSessions();
-        }
-      })();
     }, []);
 
     useEffect(() => {
       // If the user has auto rotate enabled, unlock the orientation
-      if (Platform.isTV) return;
       if (settings.autoRotate === true) {
         ScreenOrientation.unlockAsync();
       } else {
         // If the user has auto rotate disabled, lock the orientation to portrait
-        ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT_UP);
+        ScreenOrientation.lockAsync(
+          ScreenOrientation.OrientationLock.PORTRAIT_UP
+        );
       }
     }, [settings]);
+  }
 
-    useEffect(() => {
-      const subscription = AppState.addEventListener("change", (nextAppState) => {
-        if (appState.current.match(/inactive|background/) && nextAppState === "active") {
-          BackGroundDownloader.checkForExistingDownloads();
-        }
-      });
+  const [loaded] = useFonts({
+    SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
+  });
 
-      BackGroundDownloader.checkForExistingDownloads();
+  useSplashScreenLoading(!loaded);
 
-      return () => {
-        subscription.remove();
-      };
-    }, []);
+  if (!loaded) {
+    return null;
   }
 
   return (
     <QueryClientProvider client={queryClient}>
-      <JobQueueProvider>
-        <JellyfinProvider>
-          <PlaySettingsProvider>
-            <LogProvider>
-              <WebSocketProvider>
-                <DownloadProvider>
-                  <BottomSheetModalProvider>
-                    <SystemBars style="light" hidden={false} />
-                    <ThemeProvider value={DarkTheme}>
-                      <Stack initialRouteName="(auth)/(tabs)">
-                        <Stack.Screen
-                          name="(auth)/(tabs)"
-                          options={{
-                            headerShown: false,
-                            title: "",
-                            header: () => null,
-                          }}
-                        />
-                        <Stack.Screen
-                          name="(auth)/player"
-                          options={{
-                            headerShown: false,
-                            title: "",
-                            header: () => null,
-                          }}
-                        />
-                        <Stack.Screen
-                          name="login"
-                          options={{
-                            headerShown: true,
-                            title: "",
-                            headerTransparent: true,
-                          }}
-                        />
-                        <Stack.Screen name="+not-found" />
-                      </Stack>
-                      <Toaster
-                        duration={4000}
-                        toastOptions={{
-                          style: {
-                            backgroundColor: "#262626",
-                            borderColor: "#363639",
-                            borderWidth: 1,
-                          },
-                          titleStyle: {
-                            color: "white",
-                          },
+      <JellyfinProvider>
+        <PlaySettingsProvider>
+          <LogProvider>
+            <WebSocketProvider>
+              <NativeDownloadProvider>
+                <BottomSheetModalProvider>
+                  <SystemBars style="light" hidden={false} />
+                  <ThemeProvider value={DarkTheme}>
+                    <Stack>
+                      <Stack.Screen
+                        name="(auth)/(tabs)"
+                        options={{
+                          headerShown: false,
+                          title: "",
+                          header: () => null,
                         }}
-                        closeButton
                       />
-                    </ThemeProvider>
-                  </BottomSheetModalProvider>
-                </DownloadProvider>
-              </WebSocketProvider>
-            </LogProvider>
-          </PlaySettingsProvider>
-        </JellyfinProvider>
-      </JobQueueProvider>
+                      <Stack.Screen
+                        name="(auth)/player"
+                        options={{
+                          headerShown: false,
+                          title: "",
+                          header: () => null,
+                        }}
+                      />
+                      <Stack.Screen
+                        name="login"
+                        options={{
+                          headerShown: true,
+                          title: "",
+                          headerTransparent: true,
+                        }}
+                      />
+                      <Stack.Screen name="+not-found" />
+                    </Stack>
+                    <Toaster
+                      duration={4000}
+                      toastOptions={{
+                        style: {
+                          backgroundColor: "#262626",
+                          borderColor: "#363639",
+                          borderWidth: 1,
+                        },
+                        titleStyle: {
+                          color: "white",
+                        },
+                      }}
+                      closeButton
+                    />
+                  </ThemeProvider>
+                </BottomSheetModalProvider>
+              </NativeDownloadProvider>
+            </WebSocketProvider>
+          </LogProvider>
+        </PlaySettingsProvider>
+      </JellyfinProvider>
     </QueryClientProvider>
   );
 }
@@ -369,7 +245,9 @@ function Layout() {
 function saveDownloadedItemInfo(item: BaseItemDto) {
   try {
     const downloadedItems = storage.getString("downloadedItems");
-    let items: BaseItemDto[] = downloadedItems ? JSON.parse(downloadedItems) : [];
+    let items: BaseItemDto[] = downloadedItems
+      ? JSON.parse(downloadedItems)
+      : [];
 
     const existingItemIndex = items.findIndex((i) => i.Id === item.Id);
     if (existingItemIndex !== -1) {

app/login.tsx

@@ -9,7 +9,7 @@ import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
 import { PublicSystemInfo } from "@jellyfin/sdk/lib/generated-client";
 import { Image } from "expo-image";
 import { useLocalSearchParams, useNavigation } from "expo-router";
-import { useAtom, useAtomValue } from "jotai";
+import { useAtom } from "jotai";
 import React, { useCallback, useEffect, useState } from "react";
 import {
   Alert,
@@ -19,20 +19,17 @@ import {
   TouchableOpacity,
   View,
 } from "react-native";
-import { Keyboard } from "react-native";
 
 import { z } from "zod";
-import { t } from "i18next";
+import { t } from 'i18next';
 const CredentialsSchema = z.object({
-  username: z.string().min(1, t("login.username_required")),
-});
+  username: z.string().min(1, t("login.username_required")),});
 
-const Login: React.FC = () => {
-  const api = useAtomValue(apiAtom);
-  const navigation = useNavigation();
-  const params = useLocalSearchParams();
+  const Login: React.FC = () => {
   const { setServer, login, removeServer, initiateQuickConnect } =
     useJellyfin();
+  const [api] = useAtom(apiAtom);
+  const params = useLocalSearchParams();
 
   const {
     apiUrl: _apiUrl,
@@ -40,8 +37,6 @@ const Login: React.FC = () => {
     password: _password,
   } = params as { apiUrl: string; username: string; password: string };
 
-  const [loadingServerCheck, setLoadingServerCheck] = useState<boolean>(false);
-  const [loading, setLoading] = useState<boolean>(false);
   const [serverURL, setServerURL] = useState<string>(_apiUrl);
   const [serverName, setServerName] = useState<string>("");
   const [credentials, setCredentials] = useState<{
@@ -52,11 +47,10 @@ const Login: React.FC = () => {
     password: _password,
   });
 
-  /**
-   * A way to auto login based on a link
-   */
   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,
@@ -72,6 +66,7 @@ const Login: React.FC = () => {
     })();
   }, [_apiUrl, _username, _password]);
 
+  const navigation = useNavigation();
   useEffect(() => {
     navigation.setOptions({
       headerTitle: serverName,
@@ -84,17 +79,15 @@ const Login: React.FC = () => {
             className="flex flex-row items-center"
           >
             <Ionicons name="chevron-back" size={18} color={Colors.primary} />
-            <Text className="ml-2 text-purple-600">
-              {t("login.change_server")}
-            </Text>
+            <Text className="ml-2 text-purple-600">{t("login.change_server")}</Text>
           </TouchableOpacity>
         ) : null,
     });
   }, [serverName, navigation, api?.basePath]);
 
-  const handleLogin = async () => {
-    Keyboard.dismiss();
+  const [loading, setLoading] = useState<boolean>(false);
 
+  const handleLogin = async () => {
     setLoading(true);
     try {
       const result = CredentialsSchema.safeParse(credentials);
@@ -105,16 +98,15 @@ const Login: React.FC = () => {
       if (error instanceof Error) {
         Alert.alert(t("login.connection_failed"), error.message);
       } else {
-        Alert.alert(
-          t("login.connection_failed"),
-          t("login.an_unexpected_error_occured")
-        );
+        Alert.alert(t("login.connection_failed"), t("login.an_unexpected_error_occured"));
       }
     } finally {
       setLoading(false);
     }
   };
 
+  const [loadingServerCheck, setLoadingServerCheck] = useState<boolean>(false);
+
   /**
    * Checks the availability and validity of a Jellyfin server URL.
    *
@@ -188,21 +180,14 @@ const Login: React.FC = () => {
     try {
       const code = await initiateQuickConnect();
       if (code) {
-        Alert.alert(
-          t("login.quick_connect"),
-          t("login.enter_code_to_login", { code: code }),
-          [
-            {
-              text: t("login.got_it"),
-            },
-          ]
-        );
+        Alert.alert(t("login.quick_connect"), t("login.enter_code_to_login", {code: code}), [
+          {
+            text: t("login.got_it"),
+          },
+        ]);
       }
     } catch (error) {
-      Alert.alert(
-        t("login.error_title"),
-        t("login.failed_to_initiate_quick_connect")
-      );
+      Alert.alert(t("login.error_title"), t("login.failed_to_initiate_quick_connect"));
     }
   };
 
@@ -216,18 +201,16 @@ const Login: React.FC = () => {
             <View className="flex flex-col h-full relative items-center justify-center">
               <View className="px-4 -mt-20 w-full">
                 <View className="flex flex-col space-y-2">
-                  <Text className="text-2xl font-bold -mb-2">
-                    <>
-                      {serverName ? (
-                        <>
-                          {t("login.login_to_title") + " "}
-                          <Text className="text-purple-600">{serverName}</Text>
-                        </>
-                      ) : (
-                        t("login.login_title")
-                      )}
-                    </>
-                  </Text>
+                <Text className="text-2xl font-bold -mb-2">
+                  <>
+                    {serverName ? (
+                      <>
+                        {t("login.login_to_title") + " "}
+                        <Text className="text-purple-600">{serverName}</Text>
+                      </>
+                    ) : t("login.login_title")}
+                  </>
+                </Text>
                   <Text className="text-xs text-neutral-400">
                     {api.basePath}
                   </Text>
@@ -237,6 +220,7 @@ const Login: React.FC = () => {
                       setCredentials({ ...credentials, username: text })
                     }
                     value={credentials.username}
+                    autoFocus
                     secureTextEntry={false}
                     keyboardType="default"
                     returnKeyType="done"
@@ -316,9 +300,7 @@ const Login: React.FC = () => {
                 <Button
                   loading={loadingServerCheck}
                   disabled={loadingServerCheck}
-                  onPress={async () => {
-                    await handleConnect(serverURL);
-                  }}
+                  onPress={async () => await handleConnect(serverURL)}
                   className="w-full grow"
                 >
                   {t("server.connect_button")}

bun.lock

@@ -13,6 +13,7 @@
         "@gorhom/bottom-sheet": "^5.1.0",
         "@jellyfin/sdk": "^0.11.0",
         "@kesha-antonov/react-native-background-downloader": "3.2.6",
+        "@react-native-async-storage/async-storage": "1.23.1",
         "@react-native-community/netinfo": "11.4.1",
         "@react-native-menu/menu": "^1.2.2",
         "@react-navigation/bottom-tabs": "^7.2.0",
@@ -20,6 +21,9 @@
         "@react-navigation/native": "^7.0.14",
         "@shopify/flash-list": "1.7.3",
         "@tanstack/react-query": "^5.66.0",
+        "@types/lodash": "^4.17.15",
+        "@types/react-native-vector-icons": "^6.4.18",
+        "@types/uuid": "^10.0.0",
         "add": "^2.0.6",
         "axios": "^1.7.9",
         "expo": "^52.0.31",
@@ -44,12 +48,13 @@
         "expo-router": "~4.0.17",
         "expo-screen-orientation": "~8.0.4",
         "expo-sensors": "~14.0.2",
-        "expo-splash-screen": "~0.29.22",
+        "expo-splash-screen": "~0.29.21",
         "expo-status-bar": "~2.0.1",
         "expo-system-ui": "~4.0.8",
         "expo-task-manager": "~12.0.5",
         "expo-updates": "~0.26.17",
         "expo-web-browser": "~14.0.2",
+        "fast-xml-parser": "^4.5.1",
         "ffmpeg-kit-react-native": "^6.0.2",
         "i18next": "^24.2.2",
         "jotai": "^2.11.3",
@@ -101,11 +106,8 @@
         "@react-native-community/cli": "15.1.3",
         "@react-native-tvos/config-tv": "^0.1.1",
         "@types/jest": "^29.5.14",
-        "@types/lodash": "^4.17.15",
         "@types/react": "~18.3.12",
-        "@types/react-native-vector-icons": "^6.4.18",
         "@types/react-test-renderer": "^19.0.0",
-        "@types/uuid": "^10.0.0",
         "patch-package": "^8.0.0",
         "postinstall-postinstall": "^2.1.0",
         "react-test-renderer": "19.0.0",
@@ -386,7 +388,7 @@
 
     "@expo/bunyan": ["@expo/bunyan@4.0.1", "", { "dependencies": { "uuid": "^8.0.0" } }, "sha512-+Lla7nYSiHZirgK+U/uYzsLv/X+HaJienbD5AKX1UQZHYfWaP+9uuQluRB4GrEVWF0GZ7vEVp/jzaOT9k/SQlg=="],
 
-    "@expo/cli": ["@expo/cli@0.22.18", "", { "dependencies": { "@0no-co/graphql.web": "^1.0.8", "@babel/runtime": "^7.20.0", "@expo/code-signing-certificates": "^0.0.5", "@expo/config": "~10.0.10", "@expo/config-plugins": "~9.0.15", "@expo/devcert": "^1.1.2", "@expo/env": "~0.4.2", "@expo/image-utils": "^0.6.5", "@expo/json-file": "^9.0.2", "@expo/metro-config": "~0.19.11", "@expo/osascript": "^2.1.6", "@expo/package-manager": "^1.7.2", "@expo/plist": "^0.2.2", "@expo/prebuild-config": "^8.0.28", "@expo/rudder-sdk-node": "^1.1.1", "@expo/spawn-async": "^1.7.2", "@expo/ws-tunnel": "^1.0.1", "@expo/xcpretty": "^4.3.0", "@react-native/dev-middleware": "0.76.7", "@urql/core": "^5.0.6", "@urql/exchange-retry": "^1.3.0", "accepts": "^1.3.8", "arg": "^5.0.2", "better-opn": "~3.0.2", "bplist-creator": "0.0.7", "bplist-parser": "^0.3.1", "cacache": "^18.0.2", "chalk": "^4.0.0", "ci-info": "^3.3.0", "compression": "^1.7.4", "connect": "^3.7.0", "debug": "^4.3.4", "env-editor": "^0.4.1", "fast-glob": "^3.3.2", "form-data": "^3.0.1", "freeport-async": "^2.0.0", "fs-extra": "~8.1.0", "getenv": "^1.0.0", "glob": "^10.4.2", "internal-ip": "^4.3.0", "is-docker": "^2.0.0", "is-wsl": "^2.1.1", "lodash.debounce": "^4.0.8", "minimatch": "^3.0.4", "node-forge": "^1.3.1", "npm-package-arg": "^11.0.0", "ora": "^3.4.0", "picomatch": "^3.0.1", "pretty-bytes": "^5.6.0", "pretty-format": "^29.7.0", "progress": "^2.0.3", "prompts": "^2.3.2", "qrcode-terminal": "0.11.0", "require-from-string": "^2.0.2", "requireg": "^0.2.2", "resolve": "^1.22.2", "resolve-from": "^5.0.0", "resolve.exports": "^2.0.3", "semver": "^7.6.0", "send": "^0.19.0", "slugify": "^1.3.4", "source-map-support": "~0.5.21", "stacktrace-parser": "^0.1.10", "structured-headers": "^0.4.1", "tar": "^6.2.1", "temp-dir": "^2.0.0", "tempy": "^0.7.1", "terminal-link": "^2.1.1", "undici": "^6.18.2", "unique-string": "~2.0.0", "wrap-ansi": "^7.0.0", "ws": "^8.12.1" }, "bin": { "expo-internal": "build/bin/cli" } }, "sha512-TWGKHWTYU9xE7YETPk2zQzLPl+bldpzZCa0Cqg0QeENpu03ZEnMxUqrgHwrbWGTf7ONTYC1tODBkFCFw/qgPGA=="],
+    "@expo/cli": ["@expo/cli@0.22.16", "", { "dependencies": { "@0no-co/graphql.web": "^1.0.8", "@babel/runtime": "^7.20.0", "@expo/code-signing-certificates": "^0.0.5", "@expo/config": "~10.0.10", "@expo/config-plugins": "~9.0.15", "@expo/devcert": "^1.1.2", "@expo/env": "~0.4.2", "@expo/image-utils": "^0.6.5", "@expo/json-file": "^9.0.2", "@expo/metro-config": "~0.19.10", "@expo/osascript": "^2.1.6", "@expo/package-manager": "^1.7.2", "@expo/plist": "^0.2.2", "@expo/prebuild-config": "^8.0.27", "@expo/rudder-sdk-node": "^1.1.1", "@expo/spawn-async": "^1.7.2", "@expo/ws-tunnel": "^1.0.1", "@expo/xcpretty": "^4.3.0", "@react-native/dev-middleware": "0.76.7", "@urql/core": "^5.0.6", "@urql/exchange-retry": "^1.3.0", "accepts": "^1.3.8", "arg": "^5.0.2", "better-opn": "~3.0.2", "bplist-creator": "0.0.7", "bplist-parser": "^0.3.1", "cacache": "^18.0.2", "chalk": "^4.0.0", "ci-info": "^3.3.0", "compression": "^1.7.4", "connect": "^3.7.0", "debug": "^4.3.4", "env-editor": "^0.4.1", "fast-glob": "^3.3.2", "form-data": "^3.0.1", "freeport-async": "^2.0.0", "fs-extra": "~8.1.0", "getenv": "^1.0.0", "glob": "^10.4.2", "internal-ip": "^4.3.0", "is-docker": "^2.0.0", "is-wsl": "^2.1.1", "lodash.debounce": "^4.0.8", "minimatch": "^3.0.4", "node-forge": "^1.3.1", "npm-package-arg": "^11.0.0", "ora": "^3.4.0", "picomatch": "^3.0.1", "pretty-bytes": "^5.6.0", "pretty-format": "^29.7.0", "progress": "^2.0.3", "prompts": "^2.3.2", "qrcode-terminal": "0.11.0", "require-from-string": "^2.0.2", "requireg": "^0.2.2", "resolve": "^1.22.2", "resolve-from": "^5.0.0", "resolve.exports": "^2.0.3", "semver": "^7.6.0", "send": "^0.19.0", "slugify": "^1.3.4", "source-map-support": "~0.5.21", "stacktrace-parser": "^0.1.10", "structured-headers": "^0.4.1", "tar": "^6.2.1", "temp-dir": "^2.0.0", "tempy": "^0.7.1", "terminal-link": "^2.1.1", "undici": "^6.18.2", "unique-string": "~2.0.0", "wrap-ansi": "^7.0.0", "ws": "^8.12.1" }, "bin": { "expo-internal": "build/bin/cli" } }, "sha512-a8Ulbnji9kFatnOtsWGCRs6nMUj9UNC0/WhE74HQdXGDGMn5Pl8eNe3cLMy9G54DdqAmEZmRZpgXmcudT78fEQ=="],
 
     "@expo/code-signing-certificates": ["@expo/code-signing-certificates@0.0.5", "", { "dependencies": { "node-forge": "^1.2.1", "nullthrows": "^1.1.1" } }, "sha512-BNhXkY1bblxKZpltzAx98G2Egj9g1Q+JRcvR7E99DOj862FTCX+ZPsAUtPTr7aHxwtrL7+fL3r0JSmM9kBm+Bw=="],
 
@@ -400,13 +402,13 @@
 
     "@expo/env": ["@expo/env@0.4.2", "", { "dependencies": { "chalk": "^4.0.0", "debug": "^4.3.4", "dotenv": "~16.4.5", "dotenv-expand": "~11.0.6", "getenv": "^1.0.0" } }, "sha512-TgbCgvSk0Kq0e2fLoqHwEBL4M0ztFjnBEz0YCDm5boc1nvkV1VMuIMteVdeBwnTh8Z0oPJTwHCD49vhMEt1I6A=="],
 
-    "@expo/fingerprint": ["@expo/fingerprint@0.11.11", "", { "dependencies": { "@expo/spawn-async": "^1.7.2", "arg": "^5.0.2", "chalk": "^4.1.2", "debug": "^4.3.4", "find-up": "^5.0.0", "getenv": "^1.0.0", "minimatch": "^3.0.4", "p-limit": "^3.1.0", "resolve-from": "^5.0.0", "semver": "^7.6.0" }, "bin": { "fingerprint": "bin/cli.js" } }, "sha512-gNyn1KnAOpEa8gSNsYqXMTcq0fSwqU/vit6fP5863vLSKxHm/dNt/gm/uZJxrRZxKq71KUJWF6I7d3z8qIfq5g=="],
+    "@expo/fingerprint": ["@expo/fingerprint@0.11.10", "", { "dependencies": { "@expo/spawn-async": "^1.7.2", "arg": "^5.0.2", "chalk": "^4.1.2", "debug": "^4.3.4", "find-up": "^5.0.0", "getenv": "^1.0.0", "minimatch": "^3.0.4", "p-limit": "^3.1.0", "resolve-from": "^5.0.0", "semver": "^7.6.0" }, "bin": { "fingerprint": "bin/cli.js" } }, "sha512-34ZwPjbnnD7KHSyceaxcLQbClCkYHbEp6wBDe+aqimvQw25m2LnliN1cMCVQnpOHkBFRTcbKlowby0fIxAm2bQ=="],
 
     "@expo/image-utils": ["@expo/image-utils@0.6.5", "", { "dependencies": { "@expo/spawn-async": "^1.7.2", "chalk": "^4.0.0", "fs-extra": "9.0.0", "getenv": "^1.0.0", "jimp-compact": "0.16.1", "parse-png": "^2.1.0", "resolve-from": "^5.0.0", "semver": "^7.6.0", "temp-dir": "~2.0.0", "unique-string": "~2.0.0" } }, "sha512-RsS/1CwJYzccvlprYktD42KjyfWZECH6PPIEowvoSmXfGLfdViwcUEI4RvBfKX5Jli6P67H+6YmHvPTbGOboew=="],
 
     "@expo/json-file": ["@expo/json-file@9.0.2", "", { "dependencies": { "@babel/code-frame": "~7.10.4", "json5": "^2.2.3", "write-file-atomic": "^2.3.0" } }, "sha512-yAznIUrybOIWp3Uax7yRflB0xsEpvIwIEqIjao9SGi2Gaa+N0OamWfe0fnXBSWF+2zzF4VvqwT4W5zwelchfgw=="],
 
-    "@expo/metro-config": ["@expo/metro-config@0.19.11", "", { "dependencies": { "@babel/core": "^7.20.0", "@babel/generator": "^7.20.5", "@babel/parser": "^7.20.0", "@babel/types": "^7.20.0", "@expo/config": "~10.0.10", "@expo/env": "~0.4.2", "@expo/json-file": "~9.0.2", "@expo/spawn-async": "^1.7.2", "chalk": "^4.1.0", "debug": "^4.3.2", "fs-extra": "^9.1.0", "getenv": "^1.0.0", "glob": "^10.4.2", "jsc-safe-url": "^0.2.4", "lightningcss": "~1.27.0", "minimatch": "^3.0.4", "postcss": "~8.4.32", "resolve-from": "^5.0.0" } }, "sha512-XaobHTcsoHQdKEH7PI/DIpr2QiugkQmPYolbfzkpSJMplNWfSh+cTRjrm4//mS2Sb78qohtu0u2CGJnFqFUGag=="],
+    "@expo/metro-config": ["@expo/metro-config@0.19.10", "", { "dependencies": { "@babel/core": "^7.20.0", "@babel/generator": "^7.20.5", "@babel/parser": "^7.20.0", "@babel/types": "^7.20.0", "@expo/config": "~10.0.9", "@expo/env": "~0.4.1", "@expo/json-file": "~9.0.1", "@expo/spawn-async": "^1.7.2", "chalk": "^4.1.0", "debug": "^4.3.2", "fs-extra": "^9.1.0", "getenv": "^1.0.0", "glob": "^10.4.2", "jsc-safe-url": "^0.2.4", "lightningcss": "~1.27.0", "minimatch": "^3.0.4", "postcss": "~8.4.32", "resolve-from": "^5.0.0" } }, "sha512-/CtsMLhELJRJjAllM4EUnlPUAixn8Q2YhorKBa4uXZ6FvTEZWHJjqsXnQD39gWSEuAIVwLfJ1qgJi8666+dW2w=="],
 
     "@expo/metro-runtime": ["@expo/metro-runtime@4.0.1", "", { "peerDependencies": { "react-native": "*" } }, "sha512-CRpbLvdJ1T42S+lrYa1iZp1KfDeBp4oeZOK3hdpiS5n0vR0nhD6sC1gGF0sTboCTp64tLteikz5Y3j53dvgOIw=="],
 
@@ -416,7 +418,7 @@
 
     "@expo/plist": ["@expo/plist@0.2.2", "", { "dependencies": { "@xmldom/xmldom": "~0.7.7", "base64-js": "^1.2.3", "xmlbuilder": "^14.0.0" } }, "sha512-ZZGvTO6vEWq02UAPs3LIdja+HRO18+LRI5QuDl6Hs3Ps7KX7xU6Y6kjahWKY37Rx2YjNpX07dGpBFzzC+vKa2g=="],
 
-    "@expo/prebuild-config": ["@expo/prebuild-config@8.0.28", "", { "dependencies": { "@expo/config": "~10.0.10", "@expo/config-plugins": "~9.0.15", "@expo/config-types": "^52.0.4", "@expo/image-utils": "^0.6.5", "@expo/json-file": "^9.0.2", "@react-native/normalize-colors": "0.76.7", "debug": "^4.3.1", "fs-extra": "^9.0.0", "resolve-from": "^5.0.0", "semver": "^7.6.0", "xml2js": "0.6.0" } }, "sha512-SDDgCKKS1wFNNm3de2vBP8Q5bnxcabuPDE9Mnk9p7Gb4qBavhwMbAtrLcAyZB+WRb4QM+yan3z3K95vvCfI/+A=="],
+    "@expo/prebuild-config": ["@expo/prebuild-config@8.0.27", "", { "dependencies": { "@expo/config": "~10.0.9", "@expo/config-plugins": "~9.0.15", "@expo/config-types": "^52.0.4", "@expo/image-utils": "^0.6.4", "@expo/json-file": "^9.0.1", "@react-native/normalize-colors": "0.76.7", "debug": "^4.3.1", "fs-extra": "^9.0.0", "resolve-from": "^5.0.0", "semver": "^7.6.0", "xml2js": "0.6.0" } }, "sha512-UFGOx4TfiT2gOde8RylwmXctp/WvqBQ4TN7z1YL0WWXfG9TWfO7HdsUnqQhGMW+CDDc7FOJMEo8q1a6xiikfYA=="],
 
     "@expo/react-native-action-sheet": ["@expo/react-native-action-sheet@4.1.0", "", { "dependencies": { "@types/hoist-non-react-statics": "^3.3.1", "hoist-non-react-statics": "^3.3.0" }, "peerDependencies": { "react": ">=18.0.0" } }, "sha512-RILoWhREgjMdr1NUSmZa/cHg8onV2YPDAMOy0iIP1c3H7nT9QQZf5dQNHK8ehcLM82sarVxriBJyYSSHAx7j6w=="],
 
@@ -430,7 +432,7 @@
 
     "@expo/vector-icons": ["@expo/vector-icons@14.0.4", "", { "dependencies": { "prop-types": "^15.8.1" } }, "sha512-+yKshcbpDfbV4zoXOgHxCwh7lkE9VVTT5T03OUlBsqfze1PLy6Hi4jp1vSb1GVbY6eskvMIivGVc9SKzIv0oEQ=="],
 
-    "@expo/ws-tunnel": ["@expo/ws-tunnel@1.0.5", "", {}, "sha512-Ta9KzslHAIbw2ZoyZ7Ud7/QImucy+K4YvOqo9AhGfUfH76hQzaffQreOySzYusDfW8Y+EXh0ZNWE68dfCumFFw=="],
+    "@expo/ws-tunnel": ["@expo/ws-tunnel@1.0.4", "", {}, "sha512-spXCVXxbeKOe8YZ9igd+MDfXZe6LeDvFAdILijeTSG+XcxGrZLmqMWWkFKR0nV8lTWZ+NugUT3CoiXmEuKKQ7w=="],
 
     "@expo/xcpretty": ["@expo/xcpretty@4.3.2", "", { "dependencies": { "@babel/code-frame": "7.10.4", "chalk": "^4.1.0", "find-up": "^5.0.0", "js-yaml": "^4.1.0" }, "bin": { "excpretty": "build/cli.js" } }, "sha512-ReZxZ8pdnoI3tP/dNnJdnmAk7uLT4FjsKDGW7YeDdvdOMz2XCQSmSCM9IWlrXuWtMF9zeSB6WJtEhCQ41gQOfw=="],
 
@@ -574,6 +576,8 @@
 
     "@radix-ui/rect": ["@radix-ui/rect@1.1.0", "", {}, "sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg=="],
 
+    "@react-native-async-storage/async-storage": ["@react-native-async-storage/async-storage@1.23.1", "", { "dependencies": { "merge-options": "^3.0.4" }, "peerDependencies": { "react-native": "^0.0.0-0 || >=0.60 <1.0" } }, "sha512-Qd2kQ3yi6Y3+AcUlrHxSLlnBvpdCEMVGFlVBneVOjaFaPU61g1huc38g339ysXspwY1QZA2aNhrk/KlHGO+ewA=="],
+
     "@react-native-community/cli": ["@react-native-community/cli@15.1.3", "", { "dependencies": { "@react-native-community/cli-clean": "15.1.3", "@react-native-community/cli-config": "15.1.3", "@react-native-community/cli-debugger-ui": "15.1.3", "@react-native-community/cli-doctor": "15.1.3", "@react-native-community/cli-server-api": "15.1.3", "@react-native-community/cli-tools": "15.1.3", "@react-native-community/cli-types": "15.1.3", "chalk": "^4.1.2", "commander": "^9.4.1", "deepmerge": "^4.3.0", "execa": "^5.0.0", "find-up": "^5.0.0", "fs-extra": "^8.1.0", "graceful-fs": "^4.1.3", "prompts": "^2.4.2", "semver": "^7.5.2" }, "bin": { "rnc-cli": "build/bin.js" } }, "sha512-+ih/WYUkJsEV2CMAnOHvVoSIz/Ahg5UJk+sqSIOmY79mWAglQzfLP71o7b0neJCnJWLmWiO6G6/S+kmULefD5g=="],
 
     "@react-native-community/cli-clean": ["@react-native-community/cli-clean@15.1.3", "", { "dependencies": { "@react-native-community/cli-tools": "15.1.3", "chalk": "^4.1.2", "execa": "^5.0.0", "fast-glob": "^3.3.2" } }, "sha512-3s9NGapIkONFoCUN2s77NYI987GPSCdr74rTf0TWyGIDf4vTYgKoWKKR+Ml3VTa1BCj51r4cYuHEKE1pjUSc0w=="],
@@ -676,9 +680,9 @@
 
     "@sinonjs/fake-timers": ["@sinonjs/fake-timers@10.3.0", "", { "dependencies": { "@sinonjs/commons": "^3.0.0" } }, "sha512-V4BG07kuYSUkTCSBHG8G8TNhM+F19jXFWnQtzj+we8DrkpSBCee9Z3Ms8yiGer/dlmhe35/Xdgyo3/0rQKg7YA=="],
 
-    "@tanstack/query-core": ["@tanstack/query-core@5.66.4", "", {}, "sha512-skM/gzNX4shPkqmdTCSoHtJAPMTtmIJNS0hE+xwTTUVYwezArCT34NMermABmBVUg5Ls5aiUXEDXfqwR1oVkcA=="],
+    "@tanstack/query-core": ["@tanstack/query-core@5.66.0", "", {}, "sha512-J+JeBtthiKxrpzUu7rfIPDzhscXF2p5zE/hVdrqkACBP8Yu0M96mwJ5m/8cPPYQE9aRNvXztXHlNwIh4FEeMZw=="],
 
-    "@tanstack/react-query": ["@tanstack/react-query@5.66.9", "", { "dependencies": { "@tanstack/query-core": "5.66.4" }, "peerDependencies": { "react": "^18 || ^19" } }, "sha512-NRI02PHJsP5y2gAuWKP+awamTIBFBSKMnO6UVzi03GTclmHHHInH5UzVgzi5tpu4+FmGfsdT7Umqegobtsp23A=="],
+    "@tanstack/react-query": ["@tanstack/react-query@5.66.0", "", { "dependencies": { "@tanstack/query-core": "5.66.0" }, "peerDependencies": { "react": "^18 || ^19" } }, "sha512-z3sYixFQJe8hndFnXgWu7C79ctL+pI0KAelYyW+khaNJ1m22lWrhJU2QrsTcRKMuVPtoZvfBYrTStIdKo+x0Xw=="],
 
     "@tokenizer/token": ["@tokenizer/token@0.3.0", "", {}, "sha512-OvjF+z51L3ov0OyAU0duzsYuvO01PH7x4t6DJx+guahgTnBHkhJdG7soQeTSFLWN3efnHyibZ4Z8l2EuWwJN3A=="],
 
@@ -828,7 +832,7 @@
 
     "babel-preset-current-node-syntax": ["babel-preset-current-node-syntax@1.1.0", "", { "dependencies": { "@babel/plugin-syntax-async-generators": "^7.8.4", "@babel/plugin-syntax-bigint": "^7.8.3", "@babel/plugin-syntax-class-properties": "^7.12.13", "@babel/plugin-syntax-class-static-block": "^7.14.5", "@babel/plugin-syntax-import-attributes": "^7.24.7", "@babel/plugin-syntax-import-meta": "^7.10.4", "@babel/plugin-syntax-json-strings": "^7.8.3", "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4", "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3", "@babel/plugin-syntax-numeric-separator": "^7.10.4", "@babel/plugin-syntax-object-rest-spread": "^7.8.3", "@babel/plugin-syntax-optional-catch-binding": "^7.8.3", "@babel/plugin-syntax-optional-chaining": "^7.8.3", "@babel/plugin-syntax-private-property-in-object": "^7.14.5", "@babel/plugin-syntax-top-level-await": "^7.14.5" }, "peerDependencies": { "@babel/core": "^7.0.0" } }, "sha512-ldYss8SbBlWva1bs28q78Ju5Zq1F+8BrqBZZ0VFhLBvhh6lCpC2o3gDJi/5DRLs9FgYZCnmPYIVFU4lRXCkyUw=="],
 
-    "babel-preset-expo": ["babel-preset-expo@12.0.9", "", { "dependencies": { "@babel/plugin-proposal-decorators": "^7.12.9", "@babel/plugin-transform-export-namespace-from": "^7.22.11", "@babel/plugin-transform-object-rest-spread": "^7.12.13", "@babel/plugin-transform-parameters": "^7.22.15", "@babel/preset-react": "^7.22.15", "@babel/preset-typescript": "^7.23.0", "@react-native/babel-preset": "0.76.7", "babel-plugin-react-native-web": "~0.19.13", "react-refresh": "^0.14.2" }, "peerDependencies": { "babel-plugin-react-compiler": "^19.0.0-beta-9ee70a1-20241017", "react-compiler-runtime": "^19.0.0-beta-8a03594-20241020" }, "optionalPeers": ["babel-plugin-react-compiler", "react-compiler-runtime"] }, "sha512-1c+ysrTavT49WgVAj0OX/TEzt1kU2mfPhDaDajstshNHXFKPenMPWSViA/DHrJKVIMwaqr+z3GbUOD9GtKgpdg=="],
+    "babel-preset-expo": ["babel-preset-expo@12.0.8", "", { "dependencies": { "@babel/plugin-proposal-decorators": "^7.12.9", "@babel/plugin-transform-export-namespace-from": "^7.22.11", "@babel/plugin-transform-object-rest-spread": "^7.12.13", "@babel/plugin-transform-parameters": "^7.22.15", "@babel/preset-react": "^7.22.15", "@babel/preset-typescript": "^7.23.0", "@react-native/babel-preset": "0.76.7", "babel-plugin-react-native-web": "~0.19.13", "react-refresh": "^0.14.2" }, "peerDependencies": { "babel-plugin-react-compiler": "^19.0.0-beta-9ee70a1-20241017", "react-compiler-runtime": "^19.0.0-beta-8a03594-20241020" }, "optionalPeers": ["babel-plugin-react-compiler", "react-compiler-runtime"] }, "sha512-bojAddWZJusLs3NVdF+jN3WweTYVEZXBKIeO0sOhqOg7UPh5w1bnMkx7SDua0FgQMGBxb13qM31Y46yeZnmXjw=="],
 
     "babel-preset-jest": ["babel-preset-jest@29.6.3", "", { "dependencies": { "babel-plugin-jest-hoist": "^29.6.3", "babel-preset-current-node-syntax": "^1.0.0" }, "peerDependencies": { "@babel/core": "^7.0.0" } }, "sha512-0B3bhxR6snWXJZtR/RliHTDPRgn1sNHOR0yVtq/IiQFyuOVjFS+wuio/R4gSNkyYmKmJB4wGZv2NZanmKmTnNA=="],
 
@@ -896,7 +900,7 @@
 
     "camelize": ["camelize@1.0.1", "", {}, "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ=="],
 
-    "caniuse-lite": ["caniuse-lite@1.0.30001700", "", {}, "sha512-2S6XIXwaE7K7erT8dY+kLQcpa5ms63XlRkMkReXjle+kf6c5g38vyMl+Z5y8dSxOFDhcFe+nxnn261PLxBSQsQ=="],
+    "caniuse-lite": ["caniuse-lite@1.0.30001699", "", {}, "sha512-b+uH5BakXZ9Do9iK+CkDmctUSEqZl+SP056vc5usa0PL+ev5OHw003rZXcnjNDv3L8P5j6rwT6C0BPKSikW08w=="],
 
     "centra": ["centra@2.7.0", "", { "dependencies": { "follow-redirects": "^1.15.6" } }, "sha512-PbFMgMSrmgx6uxCdm57RUos9Tc3fclMvhLSATYN39XsDV29B89zZ3KA89jmY0vwSGazyU+uerqwa6t+KaodPcg=="],
 
@@ -1056,7 +1060,7 @@
 
     "ee-first": ["ee-first@1.1.1", "", {}, "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="],
 
-    "electron-to-chromium": ["electron-to-chromium@1.5.103", "", {}, "sha512-P6+XzIkfndgsrjROJWfSvVEgNHtPgbhVyTkwLjUM2HU/h7pZRORgaTlHqfAikqxKmdJMLW8fftrdGWbd/Ds0FA=="],
+    "electron-to-chromium": ["electron-to-chromium@1.5.100", "", {}, "sha512-u1z9VuzDXV86X2r3vAns0/5ojfXBue9o0+JDUDBKYqGLjxLkSqsSUoPU/6kW0gx76V44frHaf6Zo+QF74TQCMg=="],
 
     "emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="],
 
@@ -1086,8 +1090,6 @@
 
     "es-object-atoms": ["es-object-atoms@1.1.1", "", { "dependencies": { "es-errors": "^1.3.0" } }, "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA=="],
 
-    "es-set-tostringtag": ["es-set-tostringtag@2.1.0", "", { "dependencies": { "es-errors": "^1.3.0", "get-intrinsic": "^1.2.6", "has-tostringtag": "^1.0.2", "hasown": "^2.0.2" } }, "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA=="],
-
     "escalade": ["escalade@3.2.0", "", {}, "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA=="],
 
     "escape-html": ["escape-html@1.0.3", "", {}, "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="],
@@ -1112,11 +1114,11 @@
 
     "expect": ["expect@29.7.0", "", { "dependencies": { "@jest/expect-utils": "^29.7.0", "jest-get-type": "^29.6.3", "jest-matcher-utils": "^29.7.0", "jest-message-util": "^29.7.0", "jest-util": "^29.7.0" } }, "sha512-2Zks0hf1VLFYI1kbh0I5jP3KHHyCHpkfyHBzsSXRFgl/Bg9mWYfMW8oD+PdMPlEwy5HNsR9JutYy6pMeOh61nw=="],
 
-    "expo": ["expo@52.0.37", "", { "dependencies": { "@babel/runtime": "^7.20.0", "@expo/cli": "0.22.18", "@expo/config": "~10.0.10", "@expo/config-plugins": "~9.0.15", "@expo/fingerprint": "0.11.11", "@expo/metro-config": "0.19.11", "@expo/vector-icons": "^14.0.0", "babel-preset-expo": "~12.0.9", "expo-asset": "~11.0.4", "expo-constants": "~17.0.7", "expo-file-system": "~18.0.11", "expo-font": "~13.0.4", "expo-keep-awake": "~14.0.3", "expo-modules-autolinking": "2.0.8", "expo-modules-core": "2.2.2", "fbemitter": "^3.0.0", "web-streams-polyfill": "^3.3.2", "whatwg-url-without-unicode": "8.0.0-3" }, "peerDependencies": { "@expo/dom-webview": "*", "@expo/metro-runtime": "*", "react": "*", "react-native": "*", "react-native-webview": "*" }, "optionalPeers": ["@expo/dom-webview", "@expo/metro-runtime", "react-native-webview"], "bin": { "expo": "bin/cli" } }, "sha512-fo37ClqjNLOVInerm7BU27H8lfPfeTC7Pmu72roPzq46DnJfs+KzTxTzE34GcJ0b6hMUx9FRSSGyTQqxzo2TVQ=="],
+    "expo": ["expo@52.0.35", "", { "dependencies": { "@babel/runtime": "^7.20.0", "@expo/cli": "0.22.16", "@expo/config": "~10.0.10", "@expo/config-plugins": "~9.0.15", "@expo/fingerprint": "0.11.10", "@expo/metro-config": "0.19.10", "@expo/vector-icons": "^14.0.0", "babel-preset-expo": "~12.0.8", "expo-asset": "~11.0.3", "expo-constants": "~17.0.6", "expo-file-system": "~18.0.10", "expo-font": "~13.0.3", "expo-keep-awake": "~14.0.2", "expo-modules-autolinking": "2.0.7", "expo-modules-core": "2.2.2", "fbemitter": "^3.0.0", "web-streams-polyfill": "^3.3.2", "whatwg-url-without-unicode": "8.0.0-3" }, "peerDependencies": { "@expo/dom-webview": "*", "@expo/metro-runtime": "*", "react": "*", "react-native": "*", "react-native-webview": "*" }, "optionalPeers": ["@expo/dom-webview", "@expo/metro-runtime", "react-native-webview"], "bin": { "expo": "bin/cli" } }, "sha512-VagwS6MJbU0Eky18i4amkkSy7FTi0v31B0W+qoEcsU4x5OurA381rxw4qGsQE+8pmSD/Gf3DGb8ygJw+HoAsXw=="],
 
     "expo-application": ["expo-application@6.0.2", "", { "peerDependencies": { "expo": "*" } }, "sha512-qcj6kGq3mc7x5yIb5KxESurFTJCoEKwNEL34RdPEvTB/xhl7SeVZlu05sZBqxB1V4Ryzq/LsCb7NHNfBbb3L7A=="],
 
-    "expo-asset": ["expo-asset@11.0.4", "", { "dependencies": { "@expo/image-utils": "^0.6.5", "expo-constants": "~17.0.7", "invariant": "^2.2.4", "md5-file": "^3.2.3" }, "peerDependencies": { "expo": "*", "react": "*", "react-native": "*" } }, "sha512-CdIywU0HrR3wsW5c3n0cT3jW9hccZdnqGsRqY+EY/RWzJbDXtDfAQVEiFHO3mDK7oveUwrP2jK/6ZRNek41/sg=="],
+    "expo-asset": ["expo-asset@11.0.3", "", { "dependencies": { "@expo/image-utils": "^0.6.4", "expo-constants": "~17.0.5", "invariant": "^2.2.4", "md5-file": "^3.2.3" }, "peerDependencies": { "expo": "*", "react": "*", "react-native": "*" } }, "sha512-vgJnC82IooAVMy5PxbdFIMNJhW4hKAUyxc5VIiAPPf10vFYw6CqHm+hrehu4ST1I4bvg5PV4uKdPxliebcbgLg=="],
 
     "expo-background-fetch": ["expo-background-fetch@13.0.5", "", { "dependencies": { "expo-task-manager": "~12.0.5" }, "peerDependencies": { "expo": "*" } }, "sha512-rLRM+rYDRT0fA0Oaet5ibJK3nKVRkfdjXjISHxjUvIE4ktD9pE+UjAPPdjTXZ5CkNb3JyNNhQGJEGpdJC2HLKw=="],
 
@@ -1126,7 +1128,7 @@
 
     "expo-build-properties": ["expo-build-properties@0.13.2", "", { "dependencies": { "ajv": "^8.11.0", "semver": "^7.6.0" }, "peerDependencies": { "expo": "*" } }, "sha512-ML2GwBgn0Bo4yPgnSGb7h3XVxCigS/KFdid3xPC2HldEioTP3UewB/2Qa4WBsam9Fb7lAuRyVHAfRoA3swpDzg=="],
 
-    "expo-constants": ["expo-constants@17.0.7", "", { "dependencies": { "@expo/config": "~10.0.10", "@expo/env": "~0.4.2" }, "peerDependencies": { "expo": "*", "react-native": "*" } }, "sha512-sp5NUiV17I3JblVPIBDgoxgt7JIZS30vcyydCYHxsEoo+aKaeRYXxGYilCvb9lgI6BBwSL24sQ6ZjWsCWoF1VA=="],
+    "expo-constants": ["expo-constants@17.0.6", "", { "dependencies": { "@expo/config": "~10.0.9", "@expo/env": "~0.4.1" }, "peerDependencies": { "expo": "*", "react-native": "*" } }, "sha512-rl3/hBIIkh4XDkCEMzGpmY6kWj2G1TA4Mq2joeyzoFBepJuGjqnGl7phf/71sTTgamQ1hmhKCLRNXMpRqzzqxw=="],
 
     "expo-crypto": ["expo-crypto@14.0.2", "", { "dependencies": { "base64-js": "^1.3.0" }, "peerDependencies": { "expo": "*" } }, "sha512-WRc9PBpJraJN29VD5Ef7nCecxJmZNyRKcGkNiDQC1nhY5agppzwhqh7zEzNFarE/GqDgSiaDHS8yd5EgFhP9AQ=="],
 
@@ -1142,17 +1144,17 @@
 
     "expo-eas-client": ["expo-eas-client@0.13.2", "", {}, "sha512-2RAAGtkO9vseoJZuW4mhJkiNQ6+FfLrX66OTMq4Qj9mRKZV2Uq/ZquxUGIeJyYqBy4vNYeKbuPd2oJtsV9LBGQ=="],
 
-    "expo-file-system": ["expo-file-system@18.0.11", "", { "dependencies": { "web-streams-polyfill": "^3.3.2" }, "peerDependencies": { "expo": "*", "react-native": "*" } }, "sha512-yDwYfEzWgPXsBZHJW2RJ8Q66ceiFN9Wa5D20pp3fjXVkzPBDwxnYwiPWk4pVmCa5g4X5KYMoMne1pUrsL4OEpg=="],
+    "expo-file-system": ["expo-file-system@18.0.10", "", { "dependencies": { "web-streams-polyfill": "^3.3.2" }, "peerDependencies": { "expo": "*", "react-native": "*" } }, "sha512-+GnxkI+J9tOzUQMx+uIOLBEBsO2meyoYHxd87m9oT9M//BpepYqI1AvYBH8YM4dgr9HaeaeLr7z5XFVqfL8tWg=="],
 
-    "expo-font": ["expo-font@13.0.4", "", { "dependencies": { "fontfaceobserver": "^2.1.0" }, "peerDependencies": { "expo": "*", "react": "*" } }, "sha512-eAP5hyBgC8gafFtprsz0HMaB795qZfgJWqTmU0NfbSin1wUuVySFMEPMOrTkTgmazU73v4Cb4x7p86jY1XXYUw=="],
+    "expo-font": ["expo-font@13.0.3", "", { "dependencies": { "fontfaceobserver": "^2.1.0" }, "peerDependencies": { "expo": "*", "react": "*" } }, "sha512-9IdYz+A+b3KvuCYP7DUUXF4VMZjPU+IsvAnLSVJ2TfP6zUD2JjZFx3jeo/cxWRkYk/aLj5+53Te7elTAScNl4Q=="],
 
     "expo-haptics": ["expo-haptics@14.0.1", "", { "peerDependencies": { "expo": "*" } }, "sha512-V81FZ7xRUfqM6uSI6FA1KnZ+QpEKnISqafob/xEfcx1ymwhm4V3snuLWWFjmAz+XaZQTqlYa8z3QbqEXz7G63w=="],
 
-    "expo-image": ["expo-image@2.0.6", "", { "peerDependencies": { "expo": "*", "react": "*", "react-native": "*", "react-native-web": "*" }, "optionalPeers": ["react-native-web"] }, "sha512-NHpIZmGnrPbyDadil6eK+sUgyFMQfapEVb7YaGgxSFWBUQ1rSpjqdIQrCD24IZTO9uSH8V+hMh2ROxrAjAixzQ=="],
+    "expo-image": ["expo-image@2.0.5", "", { "peerDependencies": { "expo": "*", "react": "*", "react-native": "*", "react-native-web": "*" }, "optionalPeers": ["react-native-web"] }, "sha512-FAq7uyaTAfLWER3lN+KVAtep7IfGPZN9ygnVKW4GvgnvR4hKhTtZ5WNxiJ18KKLVb4nUKuHOpQeJNnljy3dtmA=="],
 
     "expo-json-utils": ["expo-json-utils@0.14.0", "", {}, "sha512-xjGfK9dL0B1wLnOqNkX0jM9p48Y0I5xEPzHude28LY67UmamUyAACkqhZGaPClyPNfdzczk7Ej6WaRMT3HfXvw=="],
 
-    "expo-keep-awake": ["expo-keep-awake@14.0.3", "", { "peerDependencies": { "expo": "*", "react": "*" } }, "sha512-6Jh94G6NvTZfuLnm2vwIpKe3GdOiVBuISl7FI8GqN0/9UOg9E0WXXp5cDcfAG8bn80RfgLJS8P7EPUGTZyOvhg=="],
+    "expo-keep-awake": ["expo-keep-awake@14.0.2", "", { "peerDependencies": { "expo": "*", "react": "*" } }, "sha512-71XAMnoWjKZrN8J7Q3+u0l9Ytp4OfhNAYz8BCWF1/9aFUw09J3I7Z5DuI3MUsVMa/KWi+XhG+eDUFP8cVA19Uw=="],
 
     "expo-linear-gradient": ["expo-linear-gradient@14.0.2", "", { "peerDependencies": { "expo": "*", "react": "*", "react-native": "*" } }, "sha512-nvac1sPUfFFJ4mY25UkvubpUV/olrBH+uQw5k+beqSvQaVQiUfFtYzfRr+6HhYBNb4AEsOtpsCRkpDww3M2iGQ=="],
 
@@ -1162,7 +1164,7 @@
 
     "expo-manifests": ["expo-manifests@0.15.6", "", { "dependencies": { "@expo/config": "~10.0.9", "expo-json-utils": "~0.14.0" }, "peerDependencies": { "expo": "*" } }, "sha512-z+TFICrijMaqBvcJkVx8WzgmOsV6ZJGvaPNQKZr4DA6uqugFMtvAQVikDjIq7SEc3n7IgPk0GR4ZN3/KnnkeVA=="],
 
-    "expo-modules-autolinking": ["expo-modules-autolinking@2.0.8", "", { "dependencies": { "@expo/spawn-async": "^1.7.2", "chalk": "^4.1.0", "commander": "^7.2.0", "fast-glob": "^3.2.5", "find-up": "^5.0.0", "fs-extra": "^9.1.0", "require-from-string": "^2.0.2", "resolve-from": "^5.0.0" }, "bin": { "expo-modules-autolinking": "bin/expo-modules-autolinking.js" } }, "sha512-DezgnEYFQYic8hKGhkbztBA3QUmSftjaNDIKNAtS2iGJmzCcNIkatjN2slFDSWjSTNo8gOvPQyMKfyHWFvLpOQ=="],
+    "expo-modules-autolinking": ["expo-modules-autolinking@2.0.7", "", { "dependencies": { "@expo/spawn-async": "^1.7.2", "chalk": "^4.1.0", "commander": "^7.2.0", "fast-glob": "^3.2.5", "find-up": "^5.0.0", "fs-extra": "^9.1.0", "require-from-string": "^2.0.2", "resolve-from": "^5.0.0" }, "bin": { "expo-modules-autolinking": "bin/expo-modules-autolinking.js" } }, "sha512-rkGc6a/90AC3q8wSy4V+iIpq6Fd0KXmQICKrvfmSWwrMgJmLfwP4QTrvLYPYOOMjFwNJcTaohcH8vzW/wYKrMg=="],
 
     "expo-modules-core": ["expo-modules-core@2.2.2", "", { "dependencies": { "invariant": "^2.2.4" } }, "sha512-SgjK86UD89gKAscRK3bdpn6Ojfs/KU4GujtuFx1wm4JaBjmXH4aakWkItkPlAV2pjIiHJHWQbENL9xjbw/Qr/g=="],
 
@@ -1186,7 +1188,7 @@
 
     "expo-task-manager": ["expo-task-manager@12.0.5", "", { "dependencies": { "unimodules-app-loader": "~5.0.1" }, "peerDependencies": { "expo": "*", "react-native": "*" } }, "sha512-tDHOBYORA6wuO32NWwz/Egrvn+N6aANHAa0DFs+01VK/IJZfU9D05ZN6M5XYIlZv5ll4GSX1wJZyTCY0HZGapw=="],
 
-    "expo-updates": ["expo-updates@0.26.19", "", { "dependencies": { "@expo/code-signing-certificates": "0.0.5", "@expo/config": "~10.0.10", "@expo/config-plugins": "~9.0.15", "@expo/spawn-async": "^1.7.2", "arg": "4.1.0", "chalk": "^4.1.2", "expo-eas-client": "~0.13.2", "expo-manifests": "~0.15.6", "expo-structured-headers": "~4.0.0", "expo-updates-interface": "~1.0.0", "fast-glob": "^3.3.2", "fbemitter": "^3.0.0", "ignore": "^5.3.1", "resolve-from": "^5.0.0" }, "peerDependencies": { "expo": "*", "react": "*" }, "bin": { "expo-updates": "bin/cli.js" } }, "sha512-h40UrG0n1nCb2na1ffz+mNQtsnr7/BxxK+EtXJSqCaD9PIGaTGe20tasmo1oVskv3s37zfv0x93+6uTjanieQg=="],
+    "expo-updates": ["expo-updates@0.26.18", "", { "dependencies": { "@expo/code-signing-certificates": "0.0.5", "@expo/config": "~10.0.9", "@expo/config-plugins": "~9.0.15", "@expo/spawn-async": "^1.7.2", "arg": "4.1.0", "chalk": "^4.1.2", "expo-eas-client": "~0.13.2", "expo-manifests": "~0.15.5", "expo-structured-headers": "~4.0.0", "expo-updates-interface": "~1.0.0", "fast-glob": "^3.3.2", "fbemitter": "^3.0.0", "ignore": "^5.3.1", "resolve-from": "^5.0.0" }, "peerDependencies": { "expo": "*", "react": "*" }, "bin": { "expo-updates": "bin/cli.js" } }, "sha512-i9on8jMLrDxtr3Jwpmqj14oa4PWxSKYrHhJYK40xATV6qrauTija9R7BkN0hQjD4LpElt5UJW2/YUP30UsTFqA=="],
 
     "expo-updates-interface": ["expo-updates-interface@1.0.0", "", { "peerDependencies": { "expo": "*" } }, "sha512-93oWtvULJOj+Pp+N/lpTcFfuREX1wNeHtp7Lwn8EbzYYmdn37MvZU3TPW2tYYCZuhzmKEXnUblYcruYoDu7IrQ=="],
 
@@ -1208,7 +1210,7 @@
 
     "fast-uri": ["fast-uri@3.0.6", "", {}, "sha512-Atfo14OibSv5wAp4VWNsFYE1AchQRTv9cBGWET4pZWHzYshFSS9NQI6I57rdKn9croWVMbYFbLhJ+yJvmZIIHw=="],
 
-    "fast-xml-parser": ["fast-xml-parser@4.5.3", "", { "dependencies": { "strnum": "^1.1.1" }, "bin": { "fxparser": "src/cli/cli.js" } }, "sha512-RKihhV+SHsIUGXObeVy9AXiBbFwkVk7Syp8XgwN5U3JV416+Gwp/GO9i0JYKmikykgz/UHRrrV4ROuZEo/T0ig=="],
+    "fast-xml-parser": ["fast-xml-parser@4.5.1", "", { "dependencies": { "strnum": "^1.0.5" }, "bin": { "fxparser": "src/cli/cli.js" } }, "sha512-y655CeyUQ+jj7KBbYMc4FG01V8ZQqjN+gDYGJ50RtfsUB8iG9AmwmwoAgeKLJdmueKKMrH1RJ7yXHTSoczdv5w=="],
 
     "fastq": ["fastq@1.19.0", "", { "dependencies": { "reusify": "^1.0.4" } }, "sha512-7SFSRCNjBQIZH/xZR3iy5iQYR8aGBE0h3VG6/cwlbrpdciNYBMotQav8c1XI3HjHH+NikUpP53nPdlZSdWmFzA=="],
 
@@ -1240,7 +1242,7 @@
 
     "flow-enums-runtime": ["flow-enums-runtime@0.0.6", "", {}, "sha512-3PYnM29RFXwvAN6Pc/scUfkI7RwhQ/xqyLUyPNlXUp9S40zI8nup9tUSrTLSVnWGBN38FNiGWbwZOB6uR4OGdw=="],
 
-    "flow-parser": ["flow-parser@0.261.2", "", {}, "sha512-RtunoakA3YjtpAxPSOBVW6lmP5NYmETwkpAfNkdr8Ovf86ENkbD3mtPWnswFTIUtRvjwv0i8ZSkHK+AzsUg1JA=="],
+    "flow-parser": ["flow-parser@0.261.1", "", {}, "sha512-2l5bBKeVtT+d+1CYSsTLJ+iP2FuoR7zjbDQI/v6dDRiBpx3Lb20Z/tLS37ReX/lcodyGSHC2eA/Nk63hB+mkYg=="],
 
     "follow-redirects": ["follow-redirects@1.15.9", "", {}, "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ=="],
 
@@ -1250,7 +1252,7 @@
 
     "foreground-child": ["foreground-child@3.3.0", "", { "dependencies": { "cross-spawn": "^7.0.0", "signal-exit": "^4.0.1" } }, "sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg=="],
 
-    "form-data": ["form-data@4.0.2", "", { "dependencies": { "asynckit": "^0.4.0", "combined-stream": "^1.0.8", "es-set-tostringtag": "^2.1.0", "mime-types": "^2.1.12" } }, "sha512-hGfm/slu0ZabnNt4oaRZ6uREyfCj6P4fT/n6A1rGV+Z0VdGXjfOhVUpkn6qVQONHGIFwmveGXyDs75+nr6FM8w=="],
+    "form-data": ["form-data@4.0.1", "", { "dependencies": { "asynckit": "^0.4.0", "combined-stream": "^1.0.8", "mime-types": "^2.1.12" } }, "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw=="],
 
     "freeport-async": ["freeport-async@2.0.0", "", {}, "sha512-K7od3Uw45AJg00XUmy15+Hae2hOcgKcmN3/EF6Y7i01O0gaqiRx8sUSpsb9+BRNL8RPBrhzPsVfy8q9ADlJuWQ=="],
 
@@ -1394,6 +1396,8 @@
 
     "is-path-inside": ["is-path-inside@3.0.3", "", {}, "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ=="],
 
+    "is-plain-obj": ["is-plain-obj@2.1.0", "", {}, "sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA=="],
+
     "is-plain-object": ["is-plain-object@2.0.4", "", { "dependencies": { "isobject": "^3.0.1" } }, "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og=="],
 
     "is-regex": ["is-regex@1.2.1", "", { "dependencies": { "call-bound": "^1.0.2", "gopd": "^1.2.0", "has-tostringtag": "^1.0.2", "hasown": "^2.0.2" } }, "sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g=="],
@@ -1448,7 +1452,7 @@
 
     "join-component": ["join-component@1.1.0", "", {}, "sha512-bF7vcQxbODoGK1imE2P9GS9aw4zD0Sd+Hni68IMZLj7zRnquH7dXUmMw9hDI5S/Jzt7q+IyTXN0rSg2GI0IKhQ=="],
 
-    "jotai": ["jotai@2.12.1", "", { "peerDependencies": { "@types/react": ">=17.0.0", "react": ">=17.0.0" }, "optionalPeers": ["@types/react", "react"] }, "sha512-VUW0nMPYIru5g89tdxwr9ftiVdc/nGV9jvHISN8Ucx+m1vI9dBeHemfqYzEuw5XSkmYjD/MEyApN9k6yrATsZQ=="],
+    "jotai": ["jotai@2.12.0", "", { "peerDependencies": { "@types/react": ">=17.0.0", "react": ">=17.0.0" }, "optionalPeers": ["@types/react", "react"] }, "sha512-j5B4NmUw8gbuN7AG4NufWw00rfpm6hexL2CVhKD7juoP2YyD9FEUV5ar921JMvadyrxQhU1NpuKUL3QfsAlVpA=="],
 
     "jpeg-js": ["jpeg-js@0.4.4", "", {}, "sha512-WZzeDOEtTOBK4Mdsar0IqEU5sMr3vSV2RqkAIzUEV2BHnUfKGyswWFPFwK5EeDo93K3FohSHbLAjj0s1Wzd+dg=="],
 
@@ -1548,6 +1552,8 @@
 
     "memoize-one": ["memoize-one@5.2.1", "", {}, "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="],
 
+    "merge-options": ["merge-options@3.0.4", "", { "dependencies": { "is-plain-obj": "^2.1.0" } }, "sha512-2Sug1+knBjkaMsMgf1ctR1Ujx+Ayku4EdJN4Z+C2+JzoeF7A3OZ9KM2GY0CpQS51NR61LTurMJrRKPhSs3ZRTQ=="],
+
     "merge-stream": ["merge-stream@2.0.0", "", {}, "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w=="],
 
     "merge2": ["merge2@1.4.1", "", {}, "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg=="],
@@ -1750,7 +1756,7 @@
 
     "possible-typed-array-names": ["possible-typed-array-names@1.1.0", "", {}, "sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg=="],
 
-    "postcss": ["postcss@8.5.3", "", { "dependencies": { "nanoid": "^3.3.8", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A=="],
+    "postcss": ["postcss@8.5.2", "", { "dependencies": { "nanoid": "^3.3.8", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-MjOadfU3Ys9KYoX0AdkBlFEF1Vx37uCCeN4ZHnmwm9FfpbsGWMZeBLMmmpY+6Ocqod7mkdZ0DT31OlbsFrLlkA=="],
 
     "postcss-calc": ["postcss-calc@8.2.4", "", { "dependencies": { "postcss-selector-parser": "^6.0.9", "postcss-value-parser": "^4.2.0" }, "peerDependencies": { "postcss": "^8.2.2" } }, "sha512-SmWMSJmB8MRnnULldx0lQIyhSNvuDl9HfrZkaqqE/WHAhToYsAvDq+yAsA/kIyINDszOp3Rh0GFoNuH5Ypsm3Q=="],
 
@@ -1820,7 +1826,7 @@
 
     "react-helmet-async": ["react-helmet-async@1.3.0", "", { "dependencies": { "@babel/runtime": "^7.12.5", "invariant": "^2.2.4", "prop-types": "^15.7.2", "react-fast-compare": "^3.2.0", "shallowequal": "^1.1.0" }, "peerDependencies": { "react": "^16.6.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.6.0 || ^17.0.0 || ^18.0.0" } }, "sha512-9jZ57/dAn9t3q6hneQS0wukqC2ENOBgMNVEhb/ZG9ZSxUetzVIw4iAmEU38IaVg3QGYauQPhSeUTuIUtFglWpg=="],
 
-    "react-i18next": ["react-i18next@15.4.1", "", { "dependencies": { "@babel/runtime": "^7.25.0", "html-parse-stringify": "^3.0.1" }, "peerDependencies": { "i18next": ">= 23.2.3", "react": ">= 16.8.0" } }, "sha512-ahGab+IaSgZmNPYXdV1n+OYky95TGpFwnKRflX/16dY04DsYYKHtVLjeny7sBSCREEcoMbAgSkFiGLF5g5Oofw=="],
+    "react-i18next": ["react-i18next@15.4.0", "", { "dependencies": { "@babel/runtime": "^7.25.0", "html-parse-stringify": "^3.0.1" }, "peerDependencies": { "i18next": ">= 23.2.3", "react": ">= 16.8.0" } }, "sha512-Py6UkX3zV08RTvL6ZANRoBh9sL/ne6rQq79XlkHEdd82cZr2H9usbWpUNVadJntIZP2pu3M2rL1CN+5rQYfYFw=="],
 
     "react-is": ["react-is@19.0.0", "", {}, "sha512-H91OHcwjZsbq3ClIDHMzBShc1rotbfACdWENsmEf0IFvZ3FgGPtdHMcsv45bQ1hAbgdfiA8SnxTKfDS+x/8m2g=="],
 
@@ -1832,7 +1838,7 @@
 
     "react-native-circular-progress": ["react-native-circular-progress@1.4.1", "", { "dependencies": { "prop-types": "^15.8.1" }, "peerDependencies": { "react": ">=16.0.0", "react-native": ">=0.50.0", "react-native-svg": ">=7.0.0" } }, "sha512-HEzvI0WPuWvsCgWE3Ff2HBTMgAEQB2GvTFw0KHyD/t1STAlDDRiolu0mEGhVvihKR3jJu3v3V4qzvSklY/7XzQ=="],
 
-    "react-native-compressor": ["react-native-compressor@1.10.4", "", { "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-58gbmJ+8IvsKP8JKK1E8XW5trfQY3dNuH7S0hYw0tSRQc6l0GZ3k8TYtoUbySOc1xcQSrUo51o0Chwe8x7mUTg=="],
+    "react-native-compressor": ["react-native-compressor@1.10.3", "", { "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-i51DfTwfLcKorWbTXtnPOcQC4SQDuC+DqKkSl9wF9qAUmNS9PtipYZCXOvWShYFnX0mmcWw5vwEp2b2V73PaDQ=="],
 
     "react-native-country-flag": ["react-native-country-flag@2.0.2", "", {}, "sha512-5LMWxS79ZQ0Q9ntYgDYzWp794+HcQGXQmzzZNBR1AT7z5HcJHtX7rlk8RHi7RVzfp5gW6plWSZ4dKjRpu/OafQ=="],
 
@@ -1906,7 +1912,7 @@
 
     "readable-stream": ["readable-stream@3.6.2", "", { "dependencies": { "inherits": "^2.0.3", "string_decoder": "^1.1.1", "util-deprecate": "^1.0.1" } }, "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA=="],
 
-    "readable-web-to-node-stream": ["readable-web-to-node-stream@3.0.4", "", { "dependencies": { "readable-stream": "^4.7.0" } }, "sha512-9nX56alTf5bwXQ3ZDipHJhusu9NTQJ/CVPtb/XHAJCXihZeitfJvIRS4GqQ/mfIoOE3IelHMrpayVrosdHBuLw=="],
+    "readable-web-to-node-stream": ["readable-web-to-node-stream@3.0.3", "", { "dependencies": { "process": "^0.11.10", "readable-stream": "^4.7.0" } }, "sha512-In3boYjBnbGVrLuuRu/Ath/H6h1jgk30nAsk/71tCare1dTVoe1oMBGRn5LGf0n3c1BcHwwAqpraxX4AUAP5KA=="],
 
     "readdirp": ["readdirp@3.6.0", "", { "dependencies": { "picomatch": "^2.2.1" } }, "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA=="],
 
@@ -2044,7 +2050,7 @@
 
     "stackframe": ["stackframe@1.3.4", "", {}, "sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw=="],
 
-    "stacktrace-parser": ["stacktrace-parser@0.1.11", "", { "dependencies": { "type-fest": "^0.7.1" } }, "sha512-WjlahMgHmCJpqzU8bIBy4qtsZdU9lRlcZE3Lvyej6t4tuOuv1vk57OW3MBrj6hXBFx/nNoC9MPMTcr5YA7NQbg=="],
+    "stacktrace-parser": ["stacktrace-parser@0.1.10", "", { "dependencies": { "type-fest": "^0.7.1" } }, "sha512-KJP1OCML99+8fhOHxwwzyWrlUuVX5GQ0ZpJTd1DFXhdkrvg1szxfHhawXUZ3g9TkXORQd4/WG68jMlQZ2p8wlg=="],
 
     "statuses": ["statuses@2.0.1", "", {}, "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ=="],
 
@@ -2070,7 +2076,7 @@
 
     "strip-json-comments": ["strip-json-comments@2.0.1", "", {}, "sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ=="],
 
-    "strnum": ["strnum@1.1.1", "", {}, "sha512-O7aCHfYCamLCctjAiaucmE+fHf2DYHkus2OKCn4Wv03sykfFtgeECn505X6K4mPl8CRNd/qurC9guq+ynoN4pw=="],
+    "strnum": ["strnum@1.0.5", "", {}, "sha512-J8bbNyKKXl5qYcR36TIO8W3mVGVHrmmxsd5PAItGkmyzwJvybiw2IVq5nqd0i4LSNSkB/sx9VHllbfFdr9k1JA=="],
 
     "strtok3": ["strtok3@6.3.0", "", { "dependencies": { "@tokenizer/token": "^0.3.0", "peek-readable": "^4.1.0" } }, "sha512-fZtbhtvI9I48xDSywd/somNqgUHl2L2cstmXCCif0itOf96jeW18MBSyrLuNicYQVkvpOxkZtkzujiTJ9LW5Jw=="],
 
@@ -2194,7 +2200,7 @@
 
     "utils-merge": ["utils-merge@1.0.1", "", {}, "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA=="],
 
-    "uuid": ["uuid@11.1.0", "", { "bin": { "uuid": "dist/esm/bin/uuid" } }, "sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A=="],
+    "uuid": ["uuid@11.0.5", "", { "bin": { "uuid": "dist/esm/bin/uuid" } }, "sha512-508e6IcKLrhxKdBbcA2b4KQZlLVp2+J5UwQ6F7Drckkc5N9ZJwFa4TgWtsww9UG8fGHbm6gbV19TdM5pQ4GaIA=="],
 
     "validate-npm-package-name": ["validate-npm-package-name@5.0.1", "", {}, "sha512-OljLrQ9SQdOUqTaQxqL5dEfZWrXExyyWsozYlAWFawPVNuD83igl7uJD2RTkNMbniIYgt8l81eCJGIdQF7avLQ=="],
 
@@ -2288,7 +2294,7 @@
 
     "@expo/cli/arg": ["arg@5.0.2", "", {}, "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg=="],
 
-    "@expo/cli/form-data": ["form-data@3.0.3", "", { "dependencies": { "asynckit": "^0.4.0", "combined-stream": "^1.0.8", "es-set-tostringtag": "^2.1.0", "mime-types": "^2.1.35" } }, "sha512-q5YBMeWy6E2Un0nMGWMgI65MAKtaylxfNJGJxpGh45YDciZB4epbWpaAfImil6CPAPTYB4sh0URQNDRIZG5F2w=="],
+    "@expo/cli/form-data": ["form-data@3.0.2", "", { "dependencies": { "asynckit": "^0.4.0", "combined-stream": "^1.0.8", "mime-types": "^2.1.12" } }, "sha512-sJe+TQb2vIaIyO783qN6BlMYWMw3WBOHA1Ay2qxsnjuafEOQFJ2JakedOQirT6D5XPRxDvS7AHYyem9fTpb4LQ=="],
 
     "@expo/cli/minimatch": ["minimatch@3.1.2", "", { "dependencies": { "brace-expansion": "^1.1.7" } }, "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw=="],
 
@@ -2296,7 +2302,7 @@
 
     "@expo/cli/semver": ["semver@7.7.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA=="],
 
-    "@expo/cli/ws": ["ws@8.18.1", "", { "peerDependencies": { "bufferutil": "^4.0.1", "utf-8-validate": ">=5.0.2" }, "optionalPeers": ["bufferutil", "utf-8-validate"] }, "sha512-RKW2aJZMXeMxVpnZ6bck+RswznaxmzdULiBr6KY7XkTnW8uvt0iT9H5DkHUChXrc+uurzwa0rVI16n/Xzjdz1w=="],
+    "@expo/cli/ws": ["ws@8.18.0", "", { "peerDependencies": { "bufferutil": "^4.0.1", "utf-8-validate": ">=5.0.2" }, "optionalPeers": ["bufferutil", "utf-8-validate"] }, "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw=="],
 
     "@expo/config/@babel/code-frame": ["@babel/code-frame@7.10.4", "", { "dependencies": { "@babel/highlight": "^7.10.4" } }, "sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg=="],
 

components/AddToFavorites.tsx

@@ -1,23 +1,113 @@
-
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
-import { useFavorite } from "@/hooks/useFavorite";
-import { View } from "react-native";
-import { RoundButton } from "@/components/RoundButton";
+import { getUserLibraryApi } from "@jellyfin/sdk/lib/utils/api";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useAtom } from "jotai";
+import { useMemo } from "react";
+import { TouchableOpacityProps, View, ViewProps } from "react-native";
+import { RoundButton } from "./RoundButton";
 
 interface Props extends ViewProps {
   item: BaseItemDto;
+  type: "item" | "series";
 }
 
-export const AddToFavorites = ({ item, ...props }) => {
-  const { isFavorite, toggleFavorite, _} = useFavorite(item);
-  
+export const AddToFavorites: React.FC<Props> = ({ item, type, ...props }) => {
+  const queryClient = useQueryClient();
+  const [api] = useAtom(apiAtom);
+  const [user] = useAtom(userAtom);
+
+  const isFavorite = useMemo(() => {
+    return item.UserData?.IsFavorite;
+  }, [item.UserData?.IsFavorite]);
+
+  const updateItemInQueries = (newData: Partial<BaseItemDto>) => {
+    queryClient.setQueryData<BaseItemDto | undefined>(
+      [type, item.Id],
+      (old) => {
+        if (!old) return old;
+        return {
+          ...old,
+          ...newData,
+          UserData: { ...old.UserData, ...newData.UserData },
+        };
+      }
+    );
+  };
+
+  const markFavoriteMutation = useMutation({
+    mutationFn: async () => {
+      if (api && user) {
+        await getUserLibraryApi(api).markFavoriteItem({
+          userId: user.Id,
+          itemId: item.Id!,
+        });
+      }
+    },
+    onMutate: async () => {
+      await queryClient.cancelQueries({ queryKey: [type, item.Id] });
+      const previousItem = queryClient.getQueryData<BaseItemDto>([
+        type,
+        item.Id,
+      ]);
+      updateItemInQueries({ UserData: { IsFavorite: true } });
+
+      return { previousItem };
+    },
+    onError: (err, variables, context) => {
+      if (context?.previousItem) {
+        queryClient.setQueryData([type, item.Id], context.previousItem);
+      }
+    },
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: [type, item.Id] });
+      queryClient.invalidateQueries({ queryKey: ["home", "favorites"] });
+    },
+  });
+
+  const unmarkFavoriteMutation = useMutation({
+    mutationFn: async () => {
+      if (api && user) {
+        await getUserLibraryApi(api).unmarkFavoriteItem({
+          userId: user.Id,
+          itemId: item.Id!,
+        });
+      }
+    },
+    onMutate: async () => {
+      await queryClient.cancelQueries({ queryKey: [type, item.Id] });
+      const previousItem = queryClient.getQueryData<BaseItemDto>([
+        type,
+        item.Id,
+      ]);
+      updateItemInQueries({ UserData: { IsFavorite: false } });
+
+      return { previousItem };
+    },
+    onError: (err, variables, context) => {
+      if (context?.previousItem) {
+        queryClient.setQueryData([type, item.Id], context.previousItem);
+      }
+    },
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: [type, item.Id] });
+      queryClient.invalidateQueries({ queryKey: ["home", "favorites"] });
+    },
+  });
+
   return (
     <View {...props}>
       <RoundButton
         size="large"
         icon={isFavorite ? "heart" : "heart-outline"}
         fillColor={isFavorite ? "primary" : undefined}
-        onPress={toggleFavorite}
+        onPress={() => {
+          if (isFavorite) {
+            unmarkFavoriteMutation.mutate();
+          } else {
+            markFavoriteMutation.mutate();
+          }
+        }}
       />
     </View>
   );

components/DownloadItem.tsx

@@ -1,421 +0,0 @@
-import { useRemuxHlsToMp4 } from "@/hooks/useRemuxHlsToMp4";
-import { useDownload } from "@/providers/DownloadProvider";
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { queueActions, queueAtom } from "@/utils/atoms/queue";
-import { DownloadMethod, useSettings } from "@/utils/atoms/settings";
-import { getDefaultPlaySettings } from "@/utils/jellyfin/getDefaultPlaySettings";
-import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
-import { saveDownloadItemInfoToDiskTmp } from "@/utils/optimize-server";
-import download from "@/utils/profiles/download";
-import Ionicons from "@expo/vector-icons/Ionicons";
-import {
-  BottomSheetBackdrop,
-  BottomSheetBackdropProps,
-  BottomSheetModal,
-  BottomSheetView,
-} from "@gorhom/bottom-sheet";
-import {
-  BaseItemDto,
-  MediaSourceInfo,
-} from "@jellyfin/sdk/lib/generated-client/models";
-import { Href, router, useFocusEffect } from "expo-router";
-import { useAtom } from "jotai";
-import React, { useCallback, useMemo, useRef, useState } from "react";
-import { Alert, Platform, View, ViewProps } from "react-native";
-import { toast } from "sonner-native";
-import { AudioTrackSelector } from "./AudioTrackSelector";
-import { Bitrate, BitrateSelector } from "./BitrateSelector";
-import { Button } from "./Button";
-import { Text } from "./common/Text";
-import { Loader } from "./Loader";
-import { MediaSourceSelector } from "./MediaSourceSelector";
-import ProgressCircle from "./ProgressCircle";
-import { RoundButton } from "./RoundButton";
-import { SubtitleTrackSelector } from "./SubtitleTrackSelector";
-import { t } from "i18next";
-
-interface DownloadProps extends ViewProps {
-  items: BaseItemDto[];
-  MissingDownloadIconComponent: () => React.ReactElement;
-  DownloadedIconComponent: () => React.ReactElement;
-  title?: string;
-  subtitle?: string;
-  size?: "default" | "large";
-}
-
-export const DownloadItems: React.FC<DownloadProps> = ({
-  items,
-  MissingDownloadIconComponent,
-  DownloadedIconComponent,
-  title = "Download",
-  subtitle = "",
-  size = "default",
-  ...props
-}) => {
-  const [api] = useAtom(apiAtom);
-  const [user] = useAtom(userAtom);
-  const [queue, setQueue] = useAtom(queueAtom);
-  const [settings] = useSettings();
-
-  const { processes, startBackgroundDownload, downloadedFiles } = useDownload();
-  const { startRemuxing } = useRemuxHlsToMp4();
-
-  const [selectedMediaSource, setSelectedMediaSource] = useState<
-    MediaSourceInfo | undefined | null
-  >(undefined);
-  const [selectedAudioStream, setSelectedAudioStream] = useState<number>(-1);
-  const [selectedSubtitleStream, setSelectedSubtitleStream] =
-    useState<number>(0);
-  const [maxBitrate, setMaxBitrate] = useState<Bitrate>(
-    settings?.defaultBitrate ?? {
-      key: "Max",
-      value: undefined,
-    }
-  );
-
-  const userCanDownload = useMemo(
-    () => user?.Policy?.EnableContentDownloading,
-    [user]
-  );
-  const usingOptimizedServer = useMemo(
-    () => settings?.downloadMethod === DownloadMethod.Optimized,
-    [settings]
-  );
-
-  const bottomSheetModalRef = useRef<BottomSheetModal>(null);
-
-  const handlePresentModalPress = useCallback(() => {
-    bottomSheetModalRef.current?.present();
-  }, []);
-
-  const handleSheetChanges = useCallback((index: number) => {}, []);
-
-  const closeModal = useCallback(() => {
-    bottomSheetModalRef.current?.dismiss();
-  }, []);
-
-  const itemIds = useMemo(() => items.map((i) => i.Id), [items]);
-
-  const itemsNotDownloaded = useMemo(
-    () =>
-      items.filter((i) => !downloadedFiles?.some((f) => f.item.Id === i.Id)),
-    [items, downloadedFiles]
-  );
-
-  const allItemsDownloaded = useMemo(() => {
-    if (items.length === 0) return false;
-    return itemsNotDownloaded.length === 0;
-  }, [items, itemsNotDownloaded]);
-  const itemsProcesses = useMemo(
-    () => processes?.filter((p) => itemIds.includes(p.item.Id)),
-    [processes, itemIds]
-  );
-
-  const progress = useMemo(() => {
-    if (itemIds.length == 1)
-      return itemsProcesses.reduce((acc, p) => acc + p.progress, 0);
-    return (
-      ((itemIds.length -
-        queue.filter((q) => itemIds.includes(q.item.Id)).length) /
-        itemIds.length) *
-      100
-    );
-  }, [queue, itemsProcesses, itemIds]);
-
-  const itemsQueued = useMemo(() => {
-    return (
-      itemsNotDownloaded.length > 0 &&
-      itemsNotDownloaded.every((p) => queue.some((q) => p.Id == q.item.Id))
-    );
-  }, [queue, itemsNotDownloaded]);
-  const navigateToDownloads = () => router.push("/downloads");
-
-  const onDownloadedPress = () => {
-    const firstItem = items?.[0];
-    router.push(
-      firstItem.Type !== "Episode"
-        ? "/downloads"
-        : ({
-            pathname: `/downloads/${firstItem.SeriesId}`,
-            params: {
-              episodeSeasonIndex: firstItem.ParentIndexNumber,
-            },
-          } as Href)
-    );
-  };
-
-  const acceptDownloadOptions = useCallback(() => {
-    if (userCanDownload === true) {
-      if (itemsNotDownloaded.some((i) => !i.Id)) {
-        throw new Error("No item id");
-      }
-      closeModal();
-
-      if (usingOptimizedServer) initiateDownload(...itemsNotDownloaded);
-      else {
-        queueActions.enqueue(
-          queue,
-          setQueue,
-          ...itemsNotDownloaded.map((item) => ({
-            id: item.Id!,
-            execute: async () => await initiateDownload(item),
-            item,
-          }))
-        );
-      }
-    } else {
-      toast.error(
-        t("home.downloads.toasts.you_are_not_allowed_to_download_files")
-      );
-    }
-  }, [
-    queue,
-    setQueue,
-    itemsNotDownloaded,
-    usingOptimizedServer,
-    userCanDownload,
-    maxBitrate,
-    selectedMediaSource,
-    selectedAudioStream,
-    selectedSubtitleStream,
-  ]);
-
-  const initiateDownload = useCallback(
-    async (...items: BaseItemDto[]) => {
-      if (
-        !api ||
-        !user?.Id ||
-        items.some((p) => !p.Id) ||
-        (itemsNotDownloaded.length === 1 && !selectedMediaSource?.Id)
-      ) {
-        throw new Error(
-          "DownloadItem ~ initiateDownload: No api or user or item"
-        );
-      }
-      let mediaSource = selectedMediaSource;
-      let audioIndex: number | undefined = selectedAudioStream;
-      let subtitleIndex: number | undefined = selectedSubtitleStream;
-
-      for (const item of items) {
-        if (itemsNotDownloaded.length > 1) {
-          const defaults = getDefaultPlaySettings(item, settings!);
-          mediaSource = defaults.mediaSource;
-          audioIndex = defaults.audioIndex;
-          subtitleIndex = defaults.subtitleIndex;
-          // Keep using the selected bitrate for consistency across all downloads
-        }
-
-        const res = await getStreamUrl({
-          api,
-          item,
-          startTimeTicks: 0,
-          userId: user?.Id,
-          audioStreamIndex: audioIndex,
-          maxStreamingBitrate: maxBitrate.value,
-          mediaSourceId: mediaSource?.Id,
-          subtitleStreamIndex: subtitleIndex,
-          deviceProfile: download,
-        });
-
-        if (!res) {
-          Alert.alert(
-            t("home.downloads.something_went_wrong"),
-            t("home.downloads.could_not_get_stream_url_from_jellyfin")
-          );
-          continue;
-        }
-
-        const { mediaSource: source, url } = res;
-
-        if (!url || !source) throw new Error("No url");
-
-        saveDownloadItemInfoToDiskTmp(item, source, url);
-
-        if (usingOptimizedServer) {
-          await startBackgroundDownload(url, item, source);
-        } else {
-          await startRemuxing(item, url, source);
-        }
-      }
-    },
-    [
-      api,
-      user?.Id,
-      itemsNotDownloaded,
-      selectedMediaSource,
-      selectedAudioStream,
-      selectedSubtitleStream,
-      settings,
-      maxBitrate,
-      usingOptimizedServer,
-      startBackgroundDownload,
-      startRemuxing,
-    ]
-  );
-
-  const renderBackdrop = useCallback(
-    (props: BottomSheetBackdropProps) => (
-      <BottomSheetBackdrop
-        {...props}
-        disappearsOnIndex={-1}
-        appearsOnIndex={0}
-      />
-    ),
-    []
-  );
-  useFocusEffect(
-    useCallback(() => {
-      if (!settings) return;
-      if (itemsNotDownloaded.length !== 1) return;
-      const { bitrate, mediaSource, audioIndex, subtitleIndex } =
-        getDefaultPlaySettings(items[0], settings);
-
-      setSelectedMediaSource(mediaSource ?? undefined);
-      setSelectedAudioStream(audioIndex ?? 0);
-      setSelectedSubtitleStream(subtitleIndex ?? -1);
-      setMaxBitrate(bitrate);
-    }, [items, itemsNotDownloaded, settings])
-  );
-
-  const renderButtonContent = () => {
-    if (processes && itemsProcesses.length > 0) {
-      return progress === 0 ? (
-        <Loader />
-      ) : (
-        <View className="-rotate-45">
-          <ProgressCircle
-            size={24}
-            fill={progress}
-            width={4}
-            tintColor="#9334E9"
-            backgroundColor="#bdc3c7"
-          />
-        </View>
-      );
-    } else if (itemsQueued) {
-      return <Ionicons name="hourglass" size={24} color="white" />;
-    } else if (allItemsDownloaded) {
-      return <DownloadedIconComponent />;
-    } else {
-      return <MissingDownloadIconComponent />;
-    }
-  };
-
-  const onButtonPress = () => {
-    if (processes && itemsProcesses.length > 0) {
-      navigateToDownloads();
-    } else if (itemsQueued) {
-      navigateToDownloads();
-    } else if (allItemsDownloaded) {
-      onDownloadedPress();
-    } else {
-      handlePresentModalPress();
-    }
-  };
-
-  return (
-    <View {...props}>
-      <RoundButton size={size} onPress={onButtonPress}>
-        {renderButtonContent()}
-      </RoundButton>
-      <BottomSheetModal
-        ref={bottomSheetModalRef}
-        enableDynamicSizing
-        handleIndicatorStyle={{
-          backgroundColor: "white",
-        }}
-        backgroundStyle={{
-          backgroundColor: "#171717",
-        }}
-        onChange={handleSheetChanges}
-        backdropComponent={renderBackdrop}
-      >
-        <BottomSheetView>
-          <View className="flex flex-col space-y-4 px-4 pb-8 pt-2">
-            <View>
-              <Text className="font-bold text-2xl text-neutral-100">
-                {title}
-              </Text>
-              <Text className="text-neutral-300">
-                {subtitle ||
-                  t("item_card.download.download_x_item", {
-                    item_count: itemsNotDownloaded.length,
-                  })}
-              </Text>
-            </View>
-            <View className="flex flex-col space-y-2 w-full items-start">
-              <BitrateSelector
-                inverted
-                onChange={setMaxBitrate}
-                selected={maxBitrate}
-              />
-              {itemsNotDownloaded.length === 1 && (
-                <>
-                  <MediaSourceSelector
-                    item={items[0]}
-                    onChange={setSelectedMediaSource}
-                    selected={selectedMediaSource}
-                  />
-                  {selectedMediaSource && (
-                    <View className="flex flex-col space-y-2">
-                      <AudioTrackSelector
-                        source={selectedMediaSource}
-                        onChange={setSelectedAudioStream}
-                        selected={selectedAudioStream}
-                      />
-                      <SubtitleTrackSelector
-                        source={selectedMediaSource}
-                        onChange={setSelectedSubtitleStream}
-                        selected={selectedSubtitleStream}
-                      />
-                    </View>
-                  )}
-                </>
-              )}
-            </View>
-            <Button
-              className="mt-auto"
-              onPress={acceptDownloadOptions}
-              color="purple"
-            >
-              {t("item_card.download.download_button")}
-            </Button>
-            <View className="opacity-70 text-center w-full flex items-center">
-              <Text className="text-xs">
-                {usingOptimizedServer
-                  ? t("item_card.download.using_optimized_server")
-                  : t("item_card.download.using_default_method")}
-              </Text>
-            </View>
-          </View>
-        </BottomSheetView>
-      </BottomSheetModal>
-    </View>
-  );
-};
-
-export const DownloadSingleItem: React.FC<{
-  size?: "default" | "large";
-  item: BaseItemDto;
-}> = ({ item, size = "default" }) => {
-  if (Platform.isTV) return;
-
-  return (
-    <DownloadItems
-      size={size}
-      title={
-        item.Type == "Episode"
-          ? t("item_card.download.download_episode")
-          : t("item_card.download.download_movie")
-      }
-      subtitle={item.Name!}
-      items={[item]}
-      MissingDownloadIconComponent={() => (
-        <Ionicons name="cloud-download-outline" size={24} color="white" />
-      )}
-      DownloadedIconComponent={() => (
-        <Ionicons name="cloud-download" size={26} color="#9333ea" />
-      )}
-    />
-  );
-};

components/ItemContent.tsx

@@ -1,9 +1,7 @@
 import { AudioTrackSelector } from "@/components/AudioTrackSelector";
 import { Bitrate, BitrateSelector } from "@/components/BitrateSelector";
-import { DownloadSingleItem } from "@/components/DownloadItem";
 import { OverviewText } from "@/components/OverviewText";
 import { ParallaxScrollView } from "@/components/ParallaxPage";
-// const PlayButton = !Platform.isTV ? require("@/components/PlayButton") : null;
 import { PlayButton } from "@/components/PlayButton";
 import { PlayedStatus } from "@/components/PlayedStatus";
 import { SimilarItems } from "@/components/SimilarItems";
@@ -17,6 +15,7 @@ import { useImageColors } from "@/hooks/useImageColors";
 import { useOrientation } from "@/hooks/useOrientation";
 import * as ScreenOrientation from "@/packages/expo-screen-orientation";
 import { apiAtom } from "@/providers/JellyfinProvider";
+import { SubtitleHelper } from "@/utils/SubtitleHelper";
 import { useSettings } from "@/utils/atoms/settings";
 import { getLogoImageUrlById } from "@/utils/jellyfin/image/getLogoImageUrlById";
 import {
@@ -34,6 +33,7 @@ import { ItemHeader } from "./ItemHeader";
 import { ItemTechnicalDetails } from "./ItemTechnicalDetails";
 import { MediaSourceSelector } from "./MediaSourceSelector";
 import { MoreMoviesWithActor } from "./MoreMoviesWithActor";
+import { NativeDownloadButton } from "./downloads/NativeDownloadButton";
 const Chromecast = !Platform.isTV ? require("./Chromecast") : null;
 
 export type SelectedOptions = {
@@ -94,11 +94,15 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
                 />
                 {item.Type !== "Program" && (
                   <View className="flex flex-row items-center space-x-2">
-                    {!Platform.isTV && (
-                      <DownloadSingleItem item={item} size="large" />
-                    )}
+                    {/* <DownloadSingleItem item={item} size="large" /> */}
+                    <NativeDownloadButton
+                      size={"large"}
+                      title={"Download"}
+                      subtitle={item.Name!}
+                      item={item}
+                    />
                     <PlayedStatus items={[item]} size="large" />
-                    <AddToFavorites item={item} />
+                    <AddToFavorites item={item} type="item" />
                   </View>
                 )}
               </View>
@@ -119,6 +123,37 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
     const loading = useMemo(() => {
       return Boolean(logoUrl && loadingLogo);
     }, [loadingLogo, logoUrl]);
+
+    const [isTranscoding, setIsTranscoding] = useState(false);
+    const [previouslyChosenSubtitleIndex, setPreviouslyChosenSubtitleIndex] =
+      useState<number | undefined>(selectedOptions?.subtitleIndex);
+
+    useEffect(() => {
+      const isTranscoding = Boolean(selectedOptions?.bitrate.value);
+      if (isTranscoding) {
+        setPreviouslyChosenSubtitleIndex(selectedOptions?.subtitleIndex);
+        const subHelper = new SubtitleHelper(
+          selectedOptions?.mediaSource?.MediaStreams ?? []
+        );
+
+        const newSubtitleIndex = subHelper.getMostCommonSubtitleByName(
+          selectedOptions?.subtitleIndex
+        );
+
+        setSelectedOptions((prev) => ({
+          ...prev!,
+          subtitleIndex: newSubtitleIndex ?? -1,
+        }));
+      }
+      if (!isTranscoding && previouslyChosenSubtitleIndex !== undefined) {
+        setSelectedOptions((prev) => ({
+          ...prev!,
+          subtitleIndex: previouslyChosenSubtitleIndex,
+        }));
+      }
+      setIsTranscoding(isTranscoding);
+    }, [selectedOptions?.bitrate]);
+
     if (!selectedOptions) return null;
 
     return (
@@ -166,6 +201,7 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
           }
         >
           <View className="flex flex-col bg-transparent shrink">
+            {/* {!Platform.isTV && ( */}
             <View className="flex flex-col px-4 w-full space-y-2 pt-2 mb-2 shrink">
               <ItemHeader item={item} className="mb-4" />
               {item.Type !== "Program" && !Platform.isTV && (
@@ -208,6 +244,7 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
                     selected={selectedOptions.audioIndex}
                   />
                   <SubtitleTrackSelector
+                    isTranscoding={isTranscoding}
                     source={selectedOptions.mediaSource}
                     onChange={(val) =>
                       setSelectedOptions(
@@ -223,11 +260,13 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
                 </View>
               )}
 
+              {/* {!Platform.isTV && ( */}
               <PlayButton
                 className="grow"
                 selectedOptions={selectedOptions}
                 item={item}
               />
+              {/* )} */}
             </View>
 
             {item.Type === "Episode" && (

components/ItemTechnicalDetails.tsx

@@ -16,7 +16,6 @@ import {
 } from "@gorhom/bottom-sheet";
 import { Button } from "./Button";
 import { useTranslation } from "react-i18next";
-import { formatBitrate } from "@/utils/bitrate";
 
 interface Props {
   source?: MediaSourceInfo;
@@ -55,18 +54,14 @@ export const ItemTechnicalDetails: React.FC<Props> = ({ source, ...props }) => {
         <BottomSheetScrollView>
           <View className="flex flex-col space-y-2 p-4 mb-4">
             <View className="">
-              <Text className="text-lg font-bold mb-4">
-                {t("item_card.video")}
-              </Text>
+              <Text className="text-lg font-bold mb-4">{t("item_card.video")}</Text>
               <View className="flex flex-row space-x-2">
                 <VideoStreamInfo source={source} />
               </View>
             </View>
 
             <View className="">
-              <Text className="text-lg font-bold mb-2">
-                {t("item_card.audio")}
-              </Text>
+              <Text className="text-lg font-bold mb-2">{t("item_card.audio")}</Text>
               <AudioStreamInfo
                 audioStreams={
                   source?.MediaStreams?.filter(
@@ -77,9 +72,7 @@ export const ItemTechnicalDetails: React.FC<Props> = ({ source, ...props }) => {
             </View>
 
             <View className="">
-              <Text className="text-lg font-bold mb-2">
-                {t("item_card.subtitles")}
-              </Text>
+              <Text className="text-lg font-bold mb-2">{t("item_card.subtitles")}</Text>
               <SubtitleStreamInfo
                 subtitleStreams={
                   source?.MediaStreams?.filter(
@@ -236,3 +229,12 @@ const formatFileSize = (bytes?: number | null) => {
   const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)).toString());
   return Math.round((bytes / Math.pow(1024, i)) * 100) / 100 + " " + sizes[i];
 };
+
+const formatBitrate = (bitrate?: number | null) => {
+  if (!bitrate) return "N/A";
+
+  const sizes = ["bps", "Kbps", "Mbps", "Gbps", "Tbps"];
+  if (bitrate === 0) return "0 bps";
+  const i = parseInt(Math.floor(Math.log(bitrate) / Math.log(1000)).toString());
+  return Math.round((bitrate / Math.pow(1000, i)) * 100) / 100 + " " + sizes[i];
+};

components/PlayButton.tsx

@@ -1,4 +1,4 @@
-import { Platform, Pressable } from "react-native";
+import { Platform } from "react-native";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { itemThemeColorAtom } from "@/utils/atoms/primaryColor";
 import { useSettings } from "@/utils/atoms/settings";
@@ -32,8 +32,9 @@ import Animated, {
 } from "react-native-reanimated";
 import { Button } from "./Button";
 import { SelectedOptions } from "./ItemContent";
-import { chromecast } from "@/utils/profiles/chromecast";
-import { chromecasth265 } from "@/utils/profiles/chromecasth265";
+const chromecastProfile = !Platform.isTV
+  ? require("@/utils/profiles/chromecast")
+  : null;
 import { useTranslation } from "react-i18next";
 import { useHaptic } from "@/hooks/useHaptic";
 
@@ -71,14 +72,17 @@ export const PlayButton: React.FC<Props> = ({
   const lightHapticFeedback = useHaptic("light");
 
   const goToPlayer = useCallback(
-    (q: string) => {
-      router.push(`/player/direct-player?${q}`);
+    (q: string, bitrateValue: number | undefined) => {
+      if (!bitrateValue) {
+        router.push(`/player/direct-player?${q}`);
+        return;
+      }
+      router.push(`/player/transcoding-player?${q}`);
     },
     [router]
   );
 
   const onPress = useCallback(async () => {
-    console.log("onPress");
     if (!item) return;
 
     lightHapticFeedback();
@@ -94,7 +98,7 @@ export const PlayButton: React.FC<Props> = ({
     const queryString = queryParams.toString();
 
     if (!client) {
-      goToPlayer(queryString);
+      goToPlayer(queryString, selectedOptions.bitrate?.value);
       return;
     }
 
@@ -113,19 +117,16 @@ export const PlayButton: React.FC<Props> = ({
 
         switch (selectedIndex) {
           case 0:
-            await CastContext.getPlayServicesState().then(async (state) => {
-              if (state && state !== PlayServicesState.SUCCESS) {
-                CastContext.showPlayServicesErrorDialog(state);
-              } else {
-                // Check if user wants H265 for Chromecast
-                const enableH265 = settings.enableH265ForChromecast;
-
-                // Get a new URL with the Chromecast device profile
-                try {
+            if (!Platform.isTV) {
+              await CastContext.getPlayServicesState().then(async (state) => {
+                if (state && state !== PlayServicesState.SUCCESS)
+                  CastContext.showPlayServicesErrorDialog(state);
+                else {
+                  // Get a new URL with the Chromecast device profile:
                   const data = await getStreamUrl({
                     api,
                     item,
-                    deviceProfile: enableH265 ? chromecasth265 : chromecast,
+                    deviceProfile: chromecastProfile,
                     startTimeTicks: item?.UserData?.PlaybackPositionTicks!,
                     userId: user?.Id,
                     audioStreamIndex: selectedOptions.audioIndex,
@@ -134,8 +135,6 @@ export const PlayButton: React.FC<Props> = ({
                     subtitleStreamIndex: selectedOptions.subtitleIndex,
                   });
 
-                  console.log("URL: ", data?.url, enableH265);
-
                   if (!data?.url) {
                     console.warn("No URL returned from getStreamUrl", data);
                     Alert.alert(
@@ -210,14 +209,12 @@ export const PlayButton: React.FC<Props> = ({
                       }
                       CastContext.showExpandedControls();
                     });
-                } catch (e) {
-                  console.log(e);
                 }
-              }
-            });
+              });
+            }
             break;
           case 1:
-            goToPlayer(queryString);
+            goToPlayer(queryString, selectedOptions.bitrate?.value);
             break;
           case cancelButtonIndex:
             break;
@@ -326,62 +323,75 @@ export const PlayButton: React.FC<Props> = ({
    */
 
   return (
-    <TouchableOpacity
-      disabled={!item}
-      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, { 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>
+      <TouchableOpacity
+        disabled={!item}
+        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} />
-              <CastButton tintColor="transparent" />
-            </Animated.Text>
-          )}
-          {!client && settings?.openInVLC && (
-            <Animated.Text style={animatedTextStyle}>
-              <MaterialCommunityIcons
-                name="vlc"
-                size={18}
-                color={animatedTextStyle.color}
-              />
-            </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>
-      </View>
-    </TouchableOpacity>
+
+        <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} />
+                <CastButton tintColor="transparent" />
+              </Animated.Text>
+            )}
+            {!client && settings?.openInVLC && (
+              <Animated.Text style={animatedTextStyle}>
+                <MaterialCommunityIcons
+                  name="vlc"
+                  size={18}
+                  color={animatedTextStyle.color}
+                />
+              </Animated.Text>
+            )}
+          </View>
+        </View>
+      </TouchableOpacity>
+      {/* <View className="mt-2 flex flex-row items-center">
+        <Ionicons
+          name="information-circle"
+          size={12}
+          className=""
+          color={"#9BA1A6"}
+        />
+        <Text className="text-neutral-500 ml-1">
+          {directStream ? "Direct stream" : "Transcoded stream"}
+        </Text>
+      </View> */}
+    </View>
   );
 };

components/PlayButton.tv.tsx

@@ -34,10 +34,10 @@ const ANIMATION_DURATION = 500;
 const MIN_PLAYBACK_WIDTH = 15;
 
 export const PlayButton: React.FC<Props> = ({
-                                              item,
-                                              selectedOptions,
-                                              ...props
-                                            }: Props) => {
+  item,
+  selectedOptions,
+  ...props
+}: Props) => {
   const { showActionSheetWithOptions } = useActionSheet();
   const { t } = useTranslation();
 
@@ -57,14 +57,17 @@ export const PlayButton: React.FC<Props> = ({
   const lightHapticFeedback = useHaptic("light");
 
   const goToPlayer = useCallback(
-    (q: string) => {
-      router.push(`/player/direct-player?${q}`);
+    (q: string, bitrateValue: number | undefined) => {
+      if (!bitrateValue) {
+        router.push(`/player/direct-player?${q}`);
+        return;
+      }
+      router.push(`/player/transcoding-player?${q}`);
     },
     [router]
   );
 
-  const onPress = () => {
-    console.log("onpress");
+  const onPress = useCallback(async () => {
     if (!item) return;
 
     lightHapticFeedback();
@@ -78,9 +81,17 @@ export const PlayButton: React.FC<Props> = ({
     });
 
     const queryString = queryParams.toString();
-    goToPlayer(queryString);
+    goToPlayer(queryString, selectedOptions.bitrate?.value);
     return;
-  };
+  }, [
+    item,
+    settings,
+    api,
+    user,
+    router,
+    showActionSheetWithOptions,
+    selectedOptions,
+  ]);
 
   const derivedTargetWidth = useDerivedValue(() => {
     if (!item || !item.RunTimeTicks) return 0;
@@ -88,9 +99,9 @@ export const PlayButton: React.FC<Props> = ({
     if (userData && userData.PlaybackPositionTicks) {
       return userData.PlaybackPositionTicks > 0
         ? Math.max(
-          (userData.PlaybackPositionTicks / item.RunTimeTicks) * 100,
-          MIN_PLAYBACK_WIDTH
-        )
+            (userData.PlaybackPositionTicks / item.RunTimeTicks) * 100,
+            MIN_PLAYBACK_WIDTH
+          )
         : 0;
     }
     return 0;
@@ -172,55 +183,69 @@ export const PlayButton: React.FC<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, { 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>
+      <TouchableOpacity
+        disabled={!item}
+        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>
-          {settings?.openInVLC && (
-            <Animated.Text style={animatedTextStyle}>
-              <MaterialCommunityIcons
-                name="vlc"
-                size={18}
-                color={animatedTextStyle.color}
-              />
-            </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>
-      </View>
-    </TouchableOpacity>
+
+        <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>
+            {settings?.openInVLC && (
+              <Animated.Text style={animatedTextStyle}>
+                <MaterialCommunityIcons
+                  name="vlc"
+                  size={18}
+                  color={animatedTextStyle.color}
+                />
+              </Animated.Text>
+            )}
+          </View>
+        </View>
+      </TouchableOpacity>
+      {/* <View className="mt-2 flex flex-row items-center">
+        <Ionicons
+          name="information-circle"
+          size={12}
+          className=""
+          color={"#9BA1A6"}
+        />
+        <Text className="text-neutral-500 ml-1">
+          {directStream ? "Direct stream" : "Transcoded stream"}
+        </Text>
+      </View> */}
+    </View>
   );
 };

components/ProgressCircle.tsx

@@ -24,7 +24,7 @@ const ProgressCircle: React.FC<ProgressCircleProps> = ({
       fill={fill}
       tintColor={tintColor}
       backgroundColor={backgroundColor}
-      rotation={45}
+      rotation={0}
     />
   );
 };

components/SubtitleTrackSelector.tsx

@@ -4,31 +4,40 @@ import { useMemo } from "react";
 import { Platform, TouchableOpacity, View } from "react-native";
 const DropdownMenu = !Platform.isTV ? require("zeego/dropdown-menu") : null;
 import { Text } from "./common/Text";
+import { SubtitleHelper } from "@/utils/SubtitleHelper";
 import { useTranslation } from "react-i18next";
 
 interface Props extends React.ComponentProps<typeof View> {
   source?: MediaSourceInfo;
   onChange: (value: number) => void;
   selected?: number | undefined;
+  isTranscoding?: boolean;
 }
 
 export const SubtitleTrackSelector: React.FC<Props> = ({
   source,
   onChange,
   selected,
+  isTranscoding,
   ...props
 }) => {
   if (Platform.isTV) return null;
   const subtitleStreams = useMemo(() => {
-    return source?.MediaStreams?.filter((x) => x.Type === "Subtitle");
-  }, [source]);
+    const subtitleHelper = new SubtitleHelper(source?.MediaStreams ?? []);
+
+    if (isTranscoding && Platform.OS === "ios") {
+      return subtitleHelper.getUniqueSubtitles();
+    }
+
+    return subtitleHelper.getSubtitles();
+  }, [source, isTranscoding]);
 
   const selectedSubtitleSteam = useMemo(
-    () => subtitleStreams?.find((x) => x.Index === selected),
+    () => subtitleStreams.find((x) => x.Index === selected),
     [subtitleStreams, selected]
   );
 
-  if (subtitleStreams?.length === 0) return null;
+  if (subtitleStreams.length === 0) return null;
 
   const { t } = useTranslation();
 
@@ -43,7 +52,7 @@ export const SubtitleTrackSelector: React.FC<Props> = ({
       <DropdownMenu.Root>
         <DropdownMenu.Trigger>
           <View className="flex flex-col " {...props}>
-            <Text numberOfLines={1} className="opacity-50 mb-1 text-xs">
+            <Text className="opacity-50 mb-1 text-xs">
               {t("item_card.subtitles")}
             </Text>
             <TouchableOpacity className="bg-neutral-900  h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between">

components/common/Text.tsx

@@ -1,27 +1,19 @@
 import React from "react";
-import { Platform, TextProps } from "react-native";
+import { TextProps } from "react-native";
 import { UITextView } from "react-native-uitextview";
-import { Text as RNText } from "react-native";
+
 export function Text(
   props: TextProps & {
     uiTextView?: boolean;
   }
 ) {
   const { style, ...otherProps } = props;
-  if (Platform.isTV)
-    return (
-      <RNText
-        allowFontScaling={false}
-        style={[{ color: "white" }, style]}
-        {...otherProps}
-      />
-    );
-  else
-    return (
-      <UITextView
-        allowFontScaling={false}
-        style={[{ color: "white" }, style]}
-        {...otherProps}
-      />
-    );
+
+  return (
+    <UITextView
+      allowFontScaling={false}
+      style={[{ color: "white" }, style]}
+      {...otherProps}
+    />
+  );
 }

components/common/TouchableItemRouter.tsx

@@ -1,5 +1,4 @@
 import { useMarkAsPlayed } from "@/hooks/useMarkAsPlayed";
-import { useFavorite } from "@/hooks/useFavorite";
 import {
   BaseItemDto,
   BaseItemPerson,
@@ -8,6 +7,7 @@ import { useRouter, useSegments } from "expo-router";
 import { PropsWithChildren, useCallback } from "react";
 import { TouchableOpacity, TouchableOpacityProps } from "react-native";
 import { useActionSheet } from "@expo/react-native-action-sheet";
+import { useHaptic } from "@/hooks/useHaptic";
 
 interface Props extends TouchableOpacityProps {
   item: BaseItemDto;
@@ -57,14 +57,14 @@ export const TouchableItemRouter: React.FC<PropsWithChildren<Props>> = ({
   const segments = useSegments();
   const { showActionSheetWithOptions } = useActionSheet();
   const markAsPlayedStatus = useMarkAsPlayed([item]);
-  const { isFavorite, toggleFavorite } = useFavorite(item);
-  
+
   const from = segments[2];
 
   const showActionSheet = useCallback(() => {
-    if (!(item.Type === "Movie" || item.Type === "Episode" || item.Type === "Series")) return;
-    const options = ["Mark as Played", "Mark as Not Played", isFavorite ? "Unmark as Favorite" : "Mark as Favorite", "Cancel"];
-    const cancelButtonIndex = 3;
+    if (!(item.Type === "Movie" || item.Type === "Episode")) return;
+
+    const options = ["Mark as Played", "Mark as Not Played", "Cancel"];
+    const cancelButtonIndex = 2;
 
     showActionSheetWithOptions(
       {
@@ -74,14 +74,14 @@ export const TouchableItemRouter: React.FC<PropsWithChildren<Props>> = ({
       async (selectedIndex) => {
         if (selectedIndex === 0) {
           await markAsPlayedStatus(true);
+          // Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
         } else if (selectedIndex === 1) {
           await markAsPlayedStatus(false);
-        } else if (selectedIndex === 2) {
-          toggleFavorite()
+          // Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
         }
       }
     );
-  }, [showActionSheetWithOptions, isFavorite, markAsPlayedStatus]);
+  }, [showActionSheetWithOptions, markAsPlayedStatus]);
 
   if (
     from === "(home)" ||

components/downloads/ActiveDownloads.tsx

@@ -1,205 +0,0 @@
-import { Text } from "@/components/common/Text";
-import { useDownload } from "@/providers/DownloadProvider";
-import { DownloadMethod, useSettings } from "@/utils/atoms/settings";
-import { storage } from "@/utils/mmkv";
-import { JobStatus } from "@/utils/optimize-server";
-import { formatTimeString } from "@/utils/time";
-import { Ionicons } from "@expo/vector-icons";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { Image } from "expo-image";
-import { useRouter } from "expo-router";
-import { t } from "i18next";
-import { useMemo } from "react";
-import {
-  ActivityIndicator,
-  Platform,
-  TouchableOpacity,
-  TouchableOpacityProps,
-  View,
-  ViewProps,
-} from "react-native";
-import { toast } from "sonner-native";
-import { Button } from "../Button";
-const BackGroundDownloader = !Platform.isTV
-  ? require("@kesha-antonov/react-native-background-downloader")
-  : null;
-const FFmpegKitProvider = !Platform.isTV
-  ? require("ffmpeg-kit-react-native")
-  : null;
-
-interface Props extends ViewProps {}
-
-export const ActiveDownloads: React.FC<Props> = ({ ...props }) => {
-  const { processes } = useDownload();
-  if (processes?.length === 0)
-    return (
-      <View {...props} className="bg-neutral-900 p-4 rounded-2xl">
-        <Text className="text-lg font-bold">
-          {t("home.downloads.active_download")}
-        </Text>
-        <Text className="opacity-50">
-          {t("home.downloads.no_active_downloads")}
-        </Text>
-      </View>
-    );
-
-  return (
-    <View {...props} className="bg-neutral-900 p-4 rounded-2xl">
-      <Text className="text-lg font-bold mb-2">
-        {t("home.downloads.active_downloads")}
-      </Text>
-      <View className="space-y-2">
-        {processes?.map((p: JobStatus) => (
-          <DownloadCard key={p.item.Id} process={p} />
-        ))}
-      </View>
-    </View>
-  );
-};
-
-interface DownloadCardProps extends TouchableOpacityProps {
-  process: JobStatus;
-}
-
-const DownloadCard = ({ process, ...props }: DownloadCardProps) => {
-  const { processes, startDownload } = useDownload();
-  const router = useRouter();
-  const { removeProcess, setProcesses } = useDownload();
-  const [settings] = useSettings();
-  const queryClient = useQueryClient();
-
-  const cancelJobMutation = useMutation({
-    mutationFn: async (id: string) => {
-      if (!process) throw new Error("No active download");
-
-      if (settings?.downloadMethod === DownloadMethod.Optimized) {
-        try {
-          const tasks = await BackGroundDownloader.checkForExistingDownloads();
-          for (const task of tasks) {
-            if (task.id === id) {
-              task.stop();
-            }
-          }
-        } catch (e) {
-          throw e;
-        } finally {
-          await removeProcess(id);
-          await queryClient.refetchQueries({ queryKey: ["jobs"] });
-        }
-      } else {
-        FFmpegKitProvider.FFmpegKit.cancel(Number(id));
-        setProcesses((prev: any[]) =>
-          prev.filter((p: { id: string }) => p.id !== id)
-        );
-      }
-    },
-    onSuccess: () => {
-      toast.success(t("home.downloads.toasts.download_cancelled"));
-    },
-    onError: (e) => {
-      console.error(e);
-      toast.error(t("home.downloads.toasts.could_not_cancel_download"));
-    },
-  });
-
-  const eta = (p: JobStatus) => {
-    if (!p.speed || !p.progress) return null;
-
-    const length = p?.item?.RunTimeTicks || 0;
-    const timeLeft = (length - length * (p.progress / 100)) / p.speed;
-    return formatTimeString(timeLeft, "tick");
-  };
-
-  const base64Image = useMemo(() => {
-    return storage.getString(process.item.Id!);
-  }, []);
-
-  return (
-    <TouchableOpacity
-      onPress={() => router.push(`/(auth)/items/page?id=${process.item.Id}`)}
-      className="relative bg-neutral-900 border border-neutral-800 rounded-2xl overflow-hidden"
-      {...props}
-    >
-      {(process.status === "optimizing" ||
-        process.status === "downloading") && (
-        <View
-          className={`
-        bg-purple-600 h-1 absolute bottom-0 left-0
-        `}
-          style={{
-            width: process.progress
-              ? `${Math.max(5, process.progress)}%`
-              : "5%",
-          }}
-        ></View>
-      )}
-      <View className="px-3 py-1.5 flex flex-col w-full">
-        <View className="flex flex-row items-center w-full">
-          {base64Image && (
-            <View className="w-14 aspect-[10/15] rounded-lg overflow-hidden mr-4">
-              <Image
-                source={{
-                  uri: `data:image/jpeg;base64,${base64Image}`,
-                }}
-                style={{
-                  width: "100%",
-                  height: "100%",
-                  resizeMode: "cover",
-                }}
-              />
-            </View>
-          )}
-          <View className="shrink mb-1">
-            <Text className="text-xs opacity-50">{process.item.Type}</Text>
-            <Text className="font-semibold shrink">{process.item.Name}</Text>
-            <Text className="text-xs opacity-50">
-              {process.item.ProductionYear}
-            </Text>
-            <View className="flex flex-row items-center space-x-2 mt-1 text-purple-600">
-              {process.progress === 0 ? (
-                <ActivityIndicator size={"small"} color={"white"} />
-              ) : (
-                <Text className="text-xs">{process.progress.toFixed(0)}%</Text>
-              )}
-              {process.speed && (
-                <Text className="text-xs">{process.speed?.toFixed(2)}x</Text>
-              )}
-              {eta(process) && (
-                <Text className="text-xs">
-                  {t("home.downloads.eta", { eta: eta(process) })}
-                </Text>
-              )}
-            </View>
-
-            <View className="flex flex-row items-center space-x-2 mt-1 text-purple-600">
-              <Text className="text-xs capitalize">{process.status}</Text>
-            </View>
-          </View>
-          <TouchableOpacity
-            disabled={cancelJobMutation.isPending}
-            onPress={() => cancelJobMutation.mutate(process.id)}
-            className="ml-auto"
-          >
-            {cancelJobMutation.isPending ? (
-              <ActivityIndicator size="small" color="white" />
-            ) : (
-              <Ionicons name="close" size={24} color="red" />
-            )}
-          </TouchableOpacity>
-        </View>
-        {process.status === "completed" && (
-          <View className="flex flex-row mt-4 space-x-4">
-            <Button
-              onPress={() => {
-                startDownload(process);
-              }}
-              className="w-full"
-            >
-              Download now
-            </Button>
-          </View>
-        )}
-      </View>
-    </TouchableOpacity>
-  );
-};

components/downloads/DownloadSize.tsx

@@ -1,47 +0,0 @@
-import { Text } from "@/components/common/Text";
-import { useDownload } from "@/providers/DownloadProvider";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import React, { useEffect, useMemo, useState } from "react";
-import { TextProps } from "react-native";
-
-interface DownloadSizeProps extends TextProps {
-  items: BaseItemDto[];
-}
-
-export const DownloadSize: React.FC<DownloadSizeProps> = ({
-  items,
-  ...props
-}) => {
-  const { downloadedFiles, getDownloadedItemSize } = useDownload();
-  const [size, setSize] = useState<string | undefined>();
-
-  const itemIds = useMemo(() => items.map((i) => i.Id), [items]);
-
-  useEffect(() => {
-    if (!downloadedFiles) return;
-
-    let s = 0;
-
-    for (const item of items) {
-      if (!item.Id) continue;
-      const size = getDownloadedItemSize(item.Id);
-      if (size) {
-        s += size;
-      }
-    }
-    setSize(s.bytesToReadable());
-  }, [itemIds]);
-
-  const sizeText = useMemo(() => {
-    if (!size) return "...";
-    return size;
-  }, [size]);
-
-  return (
-    <>
-      <Text className="text-xs text-neutral-500" {...props}>
-        {sizeText}
-      </Text>
-    </>
-  );
-};

components/downloads/EpisodeCard.tsx

@@ -1,113 +0,0 @@
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { useHaptic } from "@/hooks/useHaptic";
-import React, { useCallback, useMemo } from "react";
-import { TouchableOpacity, TouchableOpacityProps, View } from "react-native";
-import {
-  ActionSheetProvider,
-  useActionSheet,
-} from "@expo/react-native-action-sheet";
-
-import { useDownloadedFileOpener } from "@/hooks/useDownloadedFileOpener";
-import { useDownload } from "@/providers/DownloadProvider";
-import { storage } from "@/utils/mmkv";
-import { Image } from "expo-image";
-import { Ionicons } from "@expo/vector-icons";
-import { Text } from "@/components/common/Text";
-import { runtimeTicksToSeconds } from "@/utils/time";
-import { DownloadSize } from "@/components/downloads/DownloadSize";
-import { TouchableItemRouter } from "../common/TouchableItemRouter";
-import ContinueWatchingPoster from "../ContinueWatchingPoster";
-
-interface EpisodeCardProps extends TouchableOpacityProps {
-  item: BaseItemDto;
-}
-
-export const EpisodeCard: React.FC<EpisodeCardProps> = ({ item, ...props }) => {
-  const { deleteFile } = useDownload();
-  const { openFile } = useDownloadedFileOpener();
-  const { showActionSheetWithOptions } = useActionSheet();
-  const successHapticFeedback = useHaptic("success");
-
-  const base64Image = useMemo(() => {
-    return storage.getString(item.Id!);
-  }, [item]);
-
-  const handleOpenFile = useCallback(() => {
-    openFile(item);
-  }, [item, openFile]);
-
-  /**
-   * Handles deleting the file with haptic feedback.
-   */
-  const handleDeleteFile = useCallback(() => {
-    if (item.Id) {
-      deleteFile(item.Id);
-      successHapticFeedback();
-    }
-  }, [deleteFile, item.Id]);
-
-  const showActionSheet = useCallback(() => {
-    const options = ["Delete", "Cancel"];
-    const destructiveButtonIndex = 0;
-    const cancelButtonIndex = 1;
-
-    showActionSheetWithOptions(
-      {
-        options,
-        cancelButtonIndex,
-        destructiveButtonIndex,
-      },
-      (selectedIndex) => {
-        switch (selectedIndex) {
-          case destructiveButtonIndex:
-            // Delete
-            handleDeleteFile();
-            break;
-          case cancelButtonIndex:
-            // Cancelled
-            break;
-        }
-      }
-    );
-  }, [showActionSheetWithOptions, handleDeleteFile]);
-
-  return (
-    <TouchableOpacity
-      onPress={handleOpenFile}
-      onLongPress={showActionSheet}
-      key={item.Id}
-      className="flex flex-col mb-4"
-    >
-      <View className="flex flex-row items-start mb-2">
-        <View className="mr-2">
-          <ContinueWatchingPoster size="small" item={item} useEpisodePoster />
-        </View>
-        <View className="shrink">
-          <Text numberOfLines={2} className="">
-            {item.Name}
-          </Text>
-          <Text numberOfLines={1} className="text-xs text-neutral-500">
-            {`S${item.ParentIndexNumber?.toString()}:E${item.IndexNumber?.toString()}`}
-          </Text>
-          <Text className="text-xs text-neutral-500">
-            {runtimeTicksToSeconds(item.RunTimeTicks)}
-          </Text>
-          <DownloadSize items={[item]} />
-        </View>
-      </View>
-
-      <Text numberOfLines={3} className="text-xs text-neutral-500 shrink">
-        {item.Overview}
-      </Text>
-    </TouchableOpacity>
-  );
-};
-
-// Wrap the parent component with ActionSheetProvider
-export const EpisodeCardWithActionSheet: React.FC<EpisodeCardProps> = (
-  props
-) => (
-  <ActionSheetProvider>
-    <EpisodeCard {...props} />
-  </ActionSheetProvider>
-);

components/downloads/MovieCard.tsx

@@ -1,114 +0,0 @@
-import {
-  ActionSheetProvider,
-  useActionSheet,
-} from "@expo/react-native-action-sheet";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { useHaptic } from "@/hooks/useHaptic";
-import React, { useCallback, useMemo } from "react";
-import { TouchableOpacity, View } from "react-native";
-
-import { DownloadSize } from "@/components/downloads/DownloadSize";
-import { useDownloadedFileOpener } from "@/hooks/useDownloadedFileOpener";
-import { useDownload } from "@/providers/DownloadProvider";
-import { storage } from "@/utils/mmkv";
-import { Ionicons } from "@expo/vector-icons";
-import { Image } from "expo-image";
-import { ItemCardText } from "../ItemCardText";
-
-interface MovieCardProps {
-  item: BaseItemDto;
-}
-
-/**
- * MovieCard component displays a movie with action sheet options.
- * @param {MovieCardProps} props - The component props.
- * @returns {React.ReactElement} The rendered MovieCard component.
- */
-export const MovieCard: React.FC<MovieCardProps> = ({ item }) => {
-  const { deleteFile } = useDownload();
-  const { openFile } = useDownloadedFileOpener();
-  const { showActionSheetWithOptions } = useActionSheet();
-  const successHapticFeedback = useHaptic("success");
-
-  const handleOpenFile = useCallback(() => {
-    openFile(item);
-  }, [item, openFile]);
-
-  const base64Image = useMemo(() => {
-    return storage.getString(item.Id!);
-  }, []);
-
-  /**
-   * Handles deleting the file with haptic feedback.
-   */
-  const handleDeleteFile = useCallback(() => {
-    if (item.Id) {
-      deleteFile(item.Id);
-      successHapticFeedback();
-    }
-  }, [deleteFile, item.Id]);
-
-  const showActionSheet = useCallback(() => {
-    const options = ["Delete", "Cancel"];
-    const destructiveButtonIndex = 0;
-    const cancelButtonIndex = 1;
-
-    showActionSheetWithOptions(
-      {
-        options,
-        cancelButtonIndex,
-        destructiveButtonIndex,
-      },
-      (selectedIndex) => {
-        switch (selectedIndex) {
-          case destructiveButtonIndex:
-            // Delete
-            handleDeleteFile();
-            break;
-          case cancelButtonIndex:
-            // Cancelled
-            break;
-        }
-      }
-    );
-  }, [showActionSheetWithOptions, handleDeleteFile]);
-
-  return (
-    <TouchableOpacity onPress={handleOpenFile} onLongPress={showActionSheet}>
-      {base64Image ? (
-        <View className="w-28 aspect-[10/15] rounded-lg overflow-hidden mr-2 border border-neutral-900">
-          <Image
-            source={{
-              uri: `data:image/jpeg;base64,${base64Image}`,
-            }}
-            style={{
-              width: "100%",
-              height: "100%",
-              resizeMode: "cover",
-            }}
-          />
-        </View>
-      ) : (
-        <View className="w-28 aspect-[10/15] rounded-lg bg-neutral-900 mr-2 flex items-center justify-center">
-          <Ionicons
-            name="image-outline"
-            size={24}
-            color="gray"
-            className="self-center mt-16"
-          />
-        </View>
-      )}
-      <View className="w-28">
-        <ItemCardText item={item} />
-      </View>
-      <DownloadSize items={[item]} />
-    </TouchableOpacity>
-  );
-};
-
-// Wrap the parent component with ActionSheetProvider
-export const MovieCardWithActionSheet: React.FC<MovieCardProps> = (props) => (
-  <ActionSheetProvider>
-    <MovieCard {...props} />
-  </ActionSheetProvider>
-);

components/downloads/NativeDownloadButton.tsx

@@ -0,0 +1,287 @@
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { useNativeDownloads } from "@/providers/NativeDownloadProvider";
+import { DownloadMethod, useSettings } from "@/utils/atoms/settings";
+import { getDefaultPlaySettings } from "@/utils/jellyfin/getDefaultPlaySettings";
+import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
+import download from "@/utils/profiles/download";
+import Ionicons from "@expo/vector-icons/Ionicons";
+import {
+  BottomSheetBackdrop,
+  BottomSheetBackdropProps,
+  BottomSheetModal,
+  BottomSheetView,
+} from "@gorhom/bottom-sheet";
+import {
+  BaseItemDto,
+  MediaSourceInfo,
+} from "@jellyfin/sdk/lib/generated-client/models";
+import { useFocusEffect, useRouter } from "expo-router";
+import { t } from "i18next";
+import { useAtom } from "jotai";
+import React, { useCallback, useMemo, useRef, useState } from "react";
+import {
+  ActivityIndicator,
+  TouchableOpacity,
+  View,
+  ViewProps,
+} from "react-native";
+import { toast } from "sonner-native";
+import { AudioTrackSelector } from "../AudioTrackSelector";
+import { Bitrate, BitrateSelector } from "../BitrateSelector";
+import { Button } from "../Button";
+import { Text } from "../common/Text";
+import { MediaSourceSelector } from "../MediaSourceSelector";
+import ProgressCircle from "../ProgressCircle";
+import { RoundButton } from "../RoundButton";
+import { SubtitleTrackSelector } from "../SubtitleTrackSelector";
+
+interface NativeDownloadButton extends ViewProps {
+  item: BaseItemDto;
+  title?: string;
+  subtitle?: string;
+  size?: "default" | "large";
+}
+
+export const NativeDownloadButton: React.FC<NativeDownloadButton> = ({
+  item,
+  title = "Download",
+  subtitle = "",
+  size = "default",
+  ...props
+}) => {
+  const [api] = useAtom(apiAtom);
+  const [user] = useAtom(userAtom);
+  const [settings] = useSettings();
+  const { downloads, startDownload } = useNativeDownloads();
+
+  const [selectedMediaSource, setSelectedMediaSource] = useState<
+    MediaSourceInfo | undefined | null
+  >(undefined);
+  const [selectedAudioStream, setSelectedAudioStream] = useState<number>(-1);
+  const [selectedSubtitleStream, setSelectedSubtitleStream] =
+    useState<number>(0);
+  const [maxBitrate, setMaxBitrate] = useState<Bitrate>(
+    settings?.defaultBitrate ?? {
+      key: "Max",
+      value: undefined,
+    }
+  );
+
+  const userCanDownload = useMemo(
+    () => user?.Policy?.EnableContentDownloading,
+    [user]
+  );
+  const usingOptimizedServer = useMemo(
+    () => settings?.downloadMethod === DownloadMethod.Optimized,
+    [settings]
+  );
+
+  const bottomSheetModalRef = useRef<BottomSheetModal>(null);
+
+  const handlePresentModalPress = useCallback(() => {
+    bottomSheetModalRef.current?.present();
+  }, []);
+
+  const handleSheetChanges = useCallback((index: number) => {}, []);
+
+  const closeModal = useCallback(() => {
+    bottomSheetModalRef.current?.dismiss();
+  }, []);
+
+  const acceptDownloadOptions = useCallback(async () => {
+    if (userCanDownload === true) {
+      closeModal();
+
+      try {
+        const res = await getStreamUrl({
+          api,
+          item,
+          startTimeTicks: 0,
+          userId: user?.Id,
+          audioStreamIndex: selectedAudioStream,
+          maxStreamingBitrate: maxBitrate.value,
+          mediaSourceId: selectedMediaSource?.Id,
+          subtitleStreamIndex: selectedSubtitleStream,
+          deviceProfile: download,
+        });
+
+        if (!res?.url) throw new Error("No url found");
+        if (!item.Id || !item.Name) throw new Error("No item id found");
+        if (!selectedMediaSource) throw new Error("No media source found");
+        if (!selectedAudioStream) throw new Error("No audio stream found");
+
+        await startDownload(item, res.url, {
+          maxBitrate: maxBitrate.value,
+          selectedAudioStream,
+          selectedSubtitleStream,
+          selectedMediaSource,
+        });
+        toast.success(
+          t("home.downloads.toasts.download_started_for", { item: item.Name }),
+          {
+            action: {
+              label: "Go to download",
+              onClick: () => {
+                router.push("/downloads");
+                toast.dismiss();
+              },
+            },
+          }
+        );
+      } catch (error) {
+        console.error("Download error:", error);
+        toast.error("Failed to start download");
+      }
+    } else {
+      toast.error(
+        t("home.downloads.toasts.you_are_not_allowed_to_download_files")
+      );
+    }
+
+    closeModal();
+  }, [
+    userCanDownload,
+    maxBitrate,
+    selectedMediaSource,
+    selectedAudioStream,
+    selectedSubtitleStream,
+    item,
+    user,
+    api,
+  ]);
+
+  useFocusEffect(
+    useCallback(() => {
+      if (!settings) return;
+      const { bitrate, mediaSource, audioIndex, subtitleIndex } =
+        getDefaultPlaySettings(item, settings);
+
+      setSelectedMediaSource(mediaSource ?? undefined);
+      setSelectedAudioStream(audioIndex ?? 0);
+      setSelectedSubtitleStream(subtitleIndex ?? -1);
+      setMaxBitrate(bitrate);
+    }, [item, settings])
+  );
+
+  const renderBackdrop = useCallback(
+    (props: BottomSheetBackdropProps) => (
+      <BottomSheetBackdrop
+        {...props}
+        disappearsOnIndex={-1}
+        appearsOnIndex={0}
+      />
+    ),
+    []
+  );
+
+  const router = useRouter();
+
+  const activeDownload = item.Id ? downloads[item.Id] : undefined;
+
+  return (
+    <View {...props}>
+      <RoundButton
+        disabled={userCanDownload === false || activeDownload !== undefined}
+        size={size}
+        onPress={handlePresentModalPress}
+      >
+        {activeDownload ? (
+          <TouchableOpacity
+            onPress={() => {
+              router.push(`/downloads`);
+            }}
+          >
+            {activeDownload.state === "PENDING" && (
+              <ActivityIndicator size="small" color="white" />
+            )}
+            {activeDownload.state === "DOWNLOADING" && (
+              <ProgressCircle
+                size={24}
+                fill={activeDownload.progress * 100}
+                width={4}
+                tintColor="#9334E9"
+                backgroundColor="#bdc3c7"
+              />
+            )}
+            {activeDownload.state === "FAILED" && (
+              <Ionicons name="close" size={24} color="white" />
+            )}
+            {activeDownload.state === "PAUSED" && (
+              <Ionicons name="pause" size={24} color="white" />
+            )}
+            {activeDownload.state === "STOPPED" && (
+              <Ionicons name="stop" size={24} color="white" />
+            )}
+            {activeDownload.state === "DONE" && (
+              <Ionicons name="cloud-done-outline" size={24} color={"white"} />
+            )}
+          </TouchableOpacity>
+        ) : (
+          <Ionicons name="cloud-download-outline" size={24} color="white" />
+        )}
+      </RoundButton>
+      <BottomSheetModal
+        ref={bottomSheetModalRef}
+        enableDynamicSizing
+        handleIndicatorStyle={{
+          backgroundColor: "white",
+        }}
+        backgroundStyle={{
+          backgroundColor: "#171717",
+        }}
+        onChange={handleSheetChanges}
+        backdropComponent={renderBackdrop}
+      >
+        <BottomSheetView>
+          <View className="flex flex-col space-y-4 px-4 pb-8 pt-2">
+            <View>
+              <Text className="font-bold text-2xl text-neutral-100">
+                {title}
+              </Text>
+            </View>
+            <View className="flex flex-col space-y-2 w-full items-start">
+              <BitrateSelector
+                inverted
+                onChange={setMaxBitrate}
+                selected={maxBitrate}
+              />
+              <MediaSourceSelector
+                item={item}
+                onChange={setSelectedMediaSource}
+                selected={selectedMediaSource}
+              />
+              {selectedMediaSource && (
+                <View className="flex flex-col space-y-2">
+                  <AudioTrackSelector
+                    source={selectedMediaSource}
+                    onChange={setSelectedAudioStream}
+                    selected={selectedAudioStream}
+                  />
+                  <SubtitleTrackSelector
+                    source={selectedMediaSource}
+                    onChange={setSelectedSubtitleStream}
+                    selected={selectedSubtitleStream}
+                  />
+                </View>
+              )}
+            </View>
+            <Button
+              className="mt-auto"
+              onPress={acceptDownloadOptions}
+              color="purple"
+            >
+              {t("item_card.download.download_button")}
+            </Button>
+            <View className="opacity-70 text-center w-full flex items-center">
+              <Text className="text-xs">
+                {usingOptimizedServer
+                  ? t("item_card.download.using_optimized_server")
+                  : t("item_card.download.using_default_method")}
+              </Text>
+            </View>
+          </View>
+        </BottomSheetView>
+      </BottomSheetModal>
+    </View>
+  );
+};

components/downloads/SeriesCard.tsx

@@ -1,82 +0,0 @@
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import {TouchableOpacity, View} from "react-native";
-import { Text } from "../common/Text";
-import React, {useCallback, useMemo} from "react";
-import {storage} from "@/utils/mmkv";
-import {Image} from "expo-image";
-import {Ionicons} from "@expo/vector-icons";
-import {router} from "expo-router";
-import {DownloadSize} from "@/components/downloads/DownloadSize";
-import {useDownload} from "@/providers/DownloadProvider";
-import {useActionSheet} from "@expo/react-native-action-sheet";
-
-export const SeriesCard: React.FC<{ items: BaseItemDto[] }> = ({items}) => {
-  const { deleteItems } = useDownload();
-  const { showActionSheetWithOptions } = useActionSheet();
-
-  const base64Image = useMemo(() => {
-    return storage.getString(items[0].SeriesId!);
-  }, []);
-
-  const deleteSeries = useCallback(
-    async () => deleteItems(items),
-    [items]
-  );
-
-  const showActionSheet = useCallback(() => {
-    const options = ["Delete", "Cancel"];
-    const destructiveButtonIndex = 0;
-
-    showActionSheetWithOptions({
-        options,
-        destructiveButtonIndex,
-      },
-      (selectedIndex) => {
-        if (selectedIndex == destructiveButtonIndex) {
-          deleteSeries();
-        }
-      }
-    );
-  }, [showActionSheetWithOptions, deleteSeries]);
-
-  return (
-    <TouchableOpacity
-      onPress={() => router.push(`/downloads/${items[0].SeriesId}`)}
-      onLongPress={showActionSheet}
-    >
-      {base64Image ? (
-        <View className="w-28 aspect-[10/15] rounded-lg overflow-hidden mr-2 border border-neutral-900">
-          <Image
-            source={{
-              uri: `data:image/jpeg;base64,${base64Image}`,
-            }}
-            style={{
-              width: "100%",
-              height: "100%",
-              resizeMode: "cover",
-            }}
-          />
-          <View
-            className="bg-purple-600 rounded-full h-6 w-6 flex items-center justify-center absolute bottom-1 right-1">
-            <Text className="text-xs font-bold">{items.length}</Text>
-          </View>
-        </View>
-      ) : (
-        <View className="w-28 aspect-[10/15] rounded-lg bg-neutral-900 mr-2 flex items-center justify-center">
-          <Ionicons
-            name="image-outline"
-            size={24}
-            color="gray"
-            className="self-center mt-16"
-          />
-        </View>
-      )}
-
-      <View className="w-28 mt-2 flex flex-col">
-        <Text numberOfLines={2} className="">{items[0].SeriesName}</Text>
-        <Text className="text-xs opacity-50">{items[0].ProductionYear}</Text>
-        <DownloadSize items={items} />
-      </View>
-    </TouchableOpacity>
-  );
-};

components/jellyseerr/DetailFacts.tsx

@@ -19,7 +19,7 @@ interface Release {
   type: number;
 }
 
-export const dateOpts: Intl.DateTimeFormatOptions = {
+const dateOpts: Intl.DateTimeFormatOptions = {
   year: "numeric",
   month: "long",
   day: "numeric",
@@ -50,9 +50,18 @@ const Fact: React.FC<{ title: string; fact?: string | null } & ViewProps> = ({
 const DetailFacts: React.FC<
   { details?: MovieDetails | TvDetails } & ViewProps
 > = ({ details, className, ...props }) => {
-  const { jellyseerrUser, jellyseerrRegion: region, jellyseerrLocale: locale } = useJellyseerr();
+  const { jellyseerrUser } = useJellyseerr();
   const { t } = useTranslation();
 
+  const locale = useMemo(() => {
+    return jellyseerrUser?.settings?.locale || "en";
+  }, [jellyseerrUser]);
+
+  const region = useMemo(
+    () => jellyseerrUser?.settings?.region || "US",
+    [jellyseerrUser]
+  );
+
   const releases = useMemo(
     () =>
       (details as MovieDetails)?.releases?.results.find(

components/list/ListGroup.tsx

@@ -29,7 +29,7 @@ export const ListGroup: React.FC<PropsWithChildren<Props>> = ({
       </Text>
       <View
         style={[]}
-        className="flex flex-col rounded-xl overflow-hidden pl-0 bg-neutral-900"
+        className="flex flex-col rounded-xl overflow-hidden pl-4 bg-neutral-900"
       >
         {Children.map(childrenArray, (child, index) => {
           if (isValidElement<{ style?: ViewStyle }>(child)) {

components/list/ListItem.tsx

@@ -36,7 +36,7 @@ export const ListItem: React.FC<PropsWithChildren<Props>> = ({
       <TouchableOpacity
         disabled={disabled}
         onPress={onPress}
-        className={`flex flex-row items-center justify-between bg-neutral-900 h-11 pr-4 pl-4 ${
+        className={`flex flex-row items-center justify-between bg-neutral-900 h-11 pr-4 ${
           disabled ? "opacity-50" : ""
         }`}
         {...props}
@@ -55,7 +55,7 @@ export const ListItem: React.FC<PropsWithChildren<Props>> = ({
     );
   return (
     <View
-      className={`flex flex-row items-center justify-between bg-neutral-900 h-11 pr-4 pl-4 ${
+      className={`flex flex-row items-center justify-between bg-neutral-900 h-11 pr-4 ${
         disabled ? "opacity-50" : ""
       }`}
       {...props}

components/series/JellyseerrSeasons.tsx

@@ -23,8 +23,6 @@ import { Loader } from "../Loader";
 import { t } from "i18next";
 import {MovieDetails} from "@/utils/jellyseerr/server/models/Movie";
 import {MediaRequestBody} from "@/utils/jellyseerr/server/interfaces/api/requestInterfaces";
-import {textShadowStyle} from "@/components/jellyseerr/discover/GenericSlideCard";
-import {dateOpts} from "@/components/jellyseerr/DetailFacts";
 
 const JellyseerrSeasonEpisodes: React.FC<{
   details: TvDetails;
@@ -54,51 +52,26 @@ const JellyseerrSeasonEpisodes: React.FC<{
 };
 
 const RenderItem = ({ item, index }: any) => {
-  const { jellyseerrApi, jellyseerrRegion: region, jellyseerrLocale: locale } = useJellyseerr();
+  const { jellyseerrApi } = useJellyseerr();
   const [imageError, setImageError] = useState(false);
 
-  const upcomingAirDate = useMemo(() => {
-    const airDate = item.airDate;
-    if (airDate) {
-      let airDateObj = new Date(airDate);
-
-      if (new Date() < airDateObj) {
-        return airDateObj.toLocaleDateString(
-          `${locale}-${region}`,
-          dateOpts
-        );
-      }
-    }
-  }, [item]);
-
   return (
     <View className="flex flex-col w-44 mt-2">
       <View className="relative aspect-video rounded-lg overflow-hidden border border-neutral-800">
         {!imageError ? (
-          <>
-            <Image
-              key={item.id}
-              id={item.id}
-              source={{
-                uri: jellyseerrApi?.imageProxy(item.stillPath),
-              }}
-              cachePolicy={"memory-disk"}
-              contentFit="cover"
-              className="w-full h-full"
-              onError={(e) => {
-                setImageError(true);
-              }}
-            />
-            {upcomingAirDate && (
-              <View className="absolute justify-center bottom-0 right-0.5 items-center">
-                <View className="rounded-full bg-purple-600/30 p-1">
-                  <Text className="text-center text-xs" style={textShadowStyle.shadow}>
-                    {upcomingAirDate}
-                  </Text>
-                </View>
-              </View>
-            )}
-          </>
+          <Image
+            key={item.id}
+            id={item.id}
+            source={{
+              uri: jellyseerrApi?.imageProxy(item.stillPath),
+            }}
+            cachePolicy={"memory-disk"}
+            contentFit="cover"
+            className="w-full h-full"
+            onError={(e) => {
+              setImageError(true);
+            }}
+          />
         ) : (
           <View className="flex flex-col w-full h-full items-center justify-center border border-neutral-800 bg-neutral-900">
             <Ionicons

components/series/SeasonPicker.tsx

@@ -6,7 +6,6 @@ import { atom, useAtom } from "jotai";
 import { useEffect, useMemo, useState } from "react";
 import { View } from "react-native";
 import ContinueWatchingPoster from "../ContinueWatchingPoster";
-import { DownloadItems, DownloadSingleItem } from "../DownloadItem";
 import { Loader } from "../Loader";
 import { Text } from "../common/Text";
 import { getTvShowsApi } from "@jellyfin/sdk/lib/utils/api";
@@ -148,17 +147,6 @@ export const SeasonPicker: React.FC<Props> = ({ item, initialSeasonIndex }) => {
         />
         {episodes?.length || 0 > 0 ? (
           <View className="flex flex-row items-center space-x-2">
-            <DownloadItems
-              title={t("item_card.download.download_season")}
-              className="ml-2"
-              items={episodes || []}
-              MissingDownloadIconComponent={() => (
-                <Ionicons name="download" size={20} color="white" />
-              )}
-              DownloadedIconComponent={() => (
-                <Ionicons name="download" size={20} color="#9333ea" />
-              )}
-            />
             <PlayedStatus items={episodes || []} />
           </View>
         ) : null}
@@ -199,9 +187,6 @@ export const SeasonPicker: React.FC<Props> = ({ item, initialSeasonIndex }) => {
                     {runtimeTicksToSeconds(e.RunTimeTicks)}
                   </Text>
                 </View>
-                <View className="self-start ml-auto -mt-0.5">
-                  <DownloadSingleItem item={e} />
-                </View>
               </View>
 
               <Text

components/settings/ChromecastSettings.tsx

@@ -1,22 +0,0 @@
-import { Switch, View } from "react-native";
-import { ListGroup } from "../list/ListGroup";
-import { useSettings } from "@/utils/atoms/settings";
-import { ListItem } from "../list/ListItem";
-
-export const ChromecastSettings: React.FC = ({ ...props }) => {
-  const [settings, updateSettings] = useSettings();
-  return (
-    <View {...props}>
-      <ListGroup title={"Chromecast"}>
-        <ListItem title={"Enable H265 for Chromecast"}>
-          <Switch
-            value={settings.enableH265ForChromecast}
-            onValueChange={(enableH265ForChromecast) =>
-              updateSettings({ enableH265ForChromecast })
-            }
-          />
-        </ListItem>
-      </ListGroup>
-    </View>
-  );
-};

components/settings/Dashboard.tsx

@@ -1,30 +0,0 @@
-import { useSettings } from "@/utils/atoms/settings";
-import { useRouter } from "expo-router";
-import React from "react";
-import { View } from "react-native";
-import { ListGroup } from "../list/ListGroup";
-import { ListItem } from "../list/ListItem";
-import { useTranslation } from "react-i18next";
-import { useSessions, useSessionsProps } from "@/hooks/useSessions";
-
-export const Dashboard = () => {
-  const [settings, updateSettings] = useSettings();
-  const { sessions = [], isLoading } = useSessions({} as useSessionsProps);
-  const router = useRouter();
-
-  const { t } = useTranslation();
-
-  if (!settings) return null;
-  return (
-    <View>
-      <ListGroup title={t("home.settings.dashboard.title")} className="mt-4">
-        <ListItem
-          className={sessions.length != 0 ? "bg-purple-900" : ""}
-          onPress={() => router.push("/settings/dashboard/sessions")}
-          title={t("home.settings.dashboard.sessions_title")}
-          showArrow
-        />
-      </ListGroup>
-    </View>
-  );
-};

components/settings/DownloadSettings.tsx

@@ -1,143 +0,0 @@
-import { Stepper } from "@/components/inputs/Stepper";
-import { useDownload } from "@/providers/DownloadProvider";
-import { DownloadMethod, Settings, useSettings } from "@/utils/atoms/settings";
-import { Ionicons } from "@expo/vector-icons";
-import { useQueryClient } from "@tanstack/react-query";
-import { useRouter } from "expo-router";
-import React, { useMemo } from "react";
-import { Platform, Switch, TouchableOpacity } from "react-native";
-const DropdownMenu = !Platform.isTV ? require("zeego/dropdown-menu") : null;
-import { Text } from "../common/Text";
-import { ListGroup } from "../list/ListGroup";
-import { ListItem } from "../list/ListItem";
-import { useTranslation } from "react-i18next";
-import DisabledSetting from "@/components/settings/DisabledSetting";
-
-export default function DownloadSettings({ ...props }) {
-  const [settings, updateSettings, pluginSettings] = useSettings();
-  const { setProcesses } = useDownload();
-  const router = useRouter();
-  const queryClient = useQueryClient();
-  const { t } = useTranslation();
-
-  const allDisabled = useMemo(
-    () =>
-      pluginSettings?.downloadMethod?.locked === true &&
-      pluginSettings?.remuxConcurrentLimit?.locked === true &&
-      pluginSettings?.autoDownload.locked === true,
-    [pluginSettings]
-  );
-
-  if (!settings) return null;
-
-  return (
-    <DisabledSetting disabled={allDisabled} {...props} className="mb-4">
-      <ListGroup title={t("home.settings.downloads.downloads_title")}>
-        <ListItem
-          title={t("home.settings.downloads.download_method")}
-          disabled={pluginSettings?.downloadMethod?.locked}
-        >
-          <DropdownMenu.Root>
-            <DropdownMenu.Trigger>
-              <TouchableOpacity className="flex flex-row items-center justify-between py-3 pl-3">
-                <Text className="mr-1 text-[#8E8D91]">
-                  {settings.downloadMethod === DownloadMethod.Remux
-                    ? t("home.settings.downloads.default")
-                    : t("home.settings.downloads.optimized")}
-                </Text>
-                <Ionicons
-                  name="chevron-expand-sharp"
-                  size={18}
-                  color="#5A5960"
-                />
-              </TouchableOpacity>
-            </DropdownMenu.Trigger>
-            <DropdownMenu.Content
-              loop={true}
-              side="bottom"
-              align="start"
-              alignOffset={0}
-              avoidCollisions={true}
-              collisionPadding={8}
-              sideOffset={8}
-            >
-              <DropdownMenu.Label>
-                {t("home.settings.downloads.download_method")}
-              </DropdownMenu.Label>
-              <DropdownMenu.Item
-                key="1"
-                onSelect={() => {
-                  updateSettings({ downloadMethod: DownloadMethod.Remux });
-                  setProcesses([]);
-                }}
-              >
-                <DropdownMenu.ItemTitle>
-                  {t("home.settings.downloads.default")}
-                </DropdownMenu.ItemTitle>
-              </DropdownMenu.Item>
-              <DropdownMenu.Item
-                key="2"
-                onSelect={() => {
-                  updateSettings({ downloadMethod: DownloadMethod.Optimized });
-                  setProcesses([]);
-                  queryClient.invalidateQueries({ queryKey: ["search"] });
-                }}
-              >
-                <DropdownMenu.ItemTitle>
-                  {t("home.settings.downloads.optimized")}
-                </DropdownMenu.ItemTitle>
-              </DropdownMenu.Item>
-            </DropdownMenu.Content>
-          </DropdownMenu.Root>
-        </ListItem>
-
-        <ListItem
-          title={t("home.settings.downloads.remux_max_download")}
-          disabled={
-            pluginSettings?.remuxConcurrentLimit?.locked ||
-            settings.downloadMethod !== DownloadMethod.Remux
-          }
-        >
-          <Stepper
-            value={settings.remuxConcurrentLimit}
-            step={1}
-            min={1}
-            max={4}
-            onUpdate={(value) =>
-              updateSettings({
-                remuxConcurrentLimit: value as Settings["remuxConcurrentLimit"],
-              })
-            }
-          />
-        </ListItem>
-
-        <ListItem
-          title={t("home.settings.downloads.auto_download")}
-          disabled={
-            pluginSettings?.autoDownload?.locked ||
-            settings.downloadMethod !== DownloadMethod.Optimized
-          }
-        >
-          <Switch
-            disabled={
-              pluginSettings?.autoDownload?.locked ||
-              settings.downloadMethod !== DownloadMethod.Optimized
-            }
-            value={settings.autoDownload}
-            onValueChange={(value) => updateSettings({ autoDownload: value })}
-          />
-        </ListItem>
-
-        <ListItem
-          disabled={
-            pluginSettings?.optimizedVersionsServerUrl?.locked ||
-            settings.downloadMethod !== DownloadMethod.Optimized
-          }
-          onPress={() => router.push("/settings/optimized-server/page")}
-          showArrow
-          title={t("home.settings.downloads.optimized_versions_server")}
-        ></ListItem>
-      </ListGroup>
-    </DisabledSetting>
-  );
-}

components/settings/DownloadSettings.tv.tsx

@@ -1,5 +0,0 @@
-import React from "react";
-
-export default function DownloadSettings({ ...props }) {
-  return <></>;
-}

components/settings/HomeIndex.tsx

@@ -1,507 +0,0 @@
-import { Button } from "@/components/Button";
-import { Text } from "@/components/common/Text";
-import { LargeMovieCarousel } from "@/components/home/LargeMovieCarousel";
-import { ScrollingCollectionList } from "@/components/home/ScrollingCollectionList";
-import { Loader } from "@/components/Loader";
-import { MediaListSection } from "@/components/medialists/MediaListSection";
-import { Colors } from "@/constants/Colors";
-import { useInvalidatePlaybackProgressCache } from "@/hooks/useRevalidatePlaybackProgressCache";
-import { useDownload } from "@/providers/DownloadProvider";
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { useSettings } from "@/utils/atoms/settings";
-import { eventBus } from "@/utils/eventBus";
-import { Feather, Ionicons } from "@expo/vector-icons";
-import { Api } from "@jellyfin/sdk";
-import {
-  BaseItemDto,
-  BaseItemKind,
-} from "@jellyfin/sdk/lib/generated-client/models";
-import {
-  getItemsApi,
-  getSuggestionsApi,
-  getTvShowsApi,
-  getUserLibraryApi,
-  getUserViewsApi,
-} from "@jellyfin/sdk/lib/utils/api";
-import NetInfo from "@react-native-community/netinfo";
-import { QueryFunction, useQuery } from "@tanstack/react-query";
-import {
-  useNavigation,
-  usePathname,
-  useRouter,
-  useSegments,
-} from "expo-router";
-import { useAtomValue } from "jotai";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
-import {
-  ActivityIndicator,
-  RefreshControl,
-  ScrollView,
-  TouchableOpacity,
-  View,
-} from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-
-type ScrollingCollectionListSection = {
-  type: "ScrollingCollectionList";
-  title?: string;
-  queryKey: (string | undefined | null)[];
-  queryFn: QueryFunction<BaseItemDto[]>;
-  orientation?: "horizontal" | "vertical";
-};
-
-type MediaListSection = {
-  type: "MediaListSection";
-  queryKey: (string | undefined)[];
-  queryFn: QueryFunction<BaseItemDto>;
-};
-
-type Section = ScrollingCollectionListSection | MediaListSection;
-
-export const HomeIndex = () => {
-  const router = useRouter();
-
-  const { t } = useTranslation();
-
-  const api = useAtomValue(apiAtom);
-  const user = useAtomValue(userAtom);
-
-  const [loading, setLoading] = useState(false);
-  const [
-    settings,
-    updateSettings,
-    pluginSettings,
-    setPluginSettings,
-    refreshStreamyfinPluginSettings,
-  ] = useSettings();
-
-  const [isConnected, setIsConnected] = useState<boolean | null>(null);
-  const [loadingRetry, setLoadingRetry] = useState(false);
-
-  const navigation = useNavigation();
-
-  const insets = useSafeAreaInsets();
-
-  const scrollViewRef = useRef<ScrollView>(null);
-
-  const { downloadedFiles, cleanCacheDirectory } = useDownload();
-  useEffect(() => {
-    const hasDownloads = downloadedFiles && downloadedFiles.length > 0;
-    navigation.setOptions({
-      headerLeft: () => (
-        <TouchableOpacity
-          onPress={() => {
-            router.push("/(auth)/downloads");
-          }}
-          className="p-2"
-        >
-          <Feather
-            name="download"
-            color={hasDownloads ? Colors.primary : "white"}
-            size={22}
-          />
-        </TouchableOpacity>
-      ),
-    });
-  }, [downloadedFiles, navigation, router]);
-
-  useEffect(() => {
-    cleanCacheDirectory().catch((e) =>
-      console.error("Something went wrong cleaning cache directory")
-    );
-  }, []);
-
-  const segments = useSegments();
-  useEffect(() => {
-    const unsubscribe = eventBus.on("scrollToTop", () => {
-      if (segments[2] === "(home)")
-        scrollViewRef.current?.scrollTo({ y: -152, animated: true });
-    });
-
-    return () => {
-      unsubscribe();
-    };
-  }, [segments]);
-
-  const checkConnection = useCallback(async () => {
-    setLoadingRetry(true);
-    const state = await NetInfo.fetch();
-    setIsConnected(state.isConnected);
-    setLoadingRetry(false);
-  }, []);
-
-  useEffect(() => {
-    const unsubscribe = NetInfo.addEventListener((state) => {
-      if (state.isConnected == false || state.isInternetReachable === false)
-        setIsConnected(false);
-      else setIsConnected(true);
-    });
-
-    NetInfo.fetch().then((state) => {
-      setIsConnected(state.isConnected);
-    });
-
-    // cleanCacheDirectory().catch((e) =>
-    //   console.error("Something went wrong cleaning cache directory")
-    // );
-
-    return () => {
-      unsubscribe();
-    };
-  }, []);
-
-  const {
-    data,
-    isError: e1,
-    isLoading: l1,
-  } = useQuery({
-    queryKey: ["home", "userViews", user?.Id],
-    queryFn: async () => {
-      if (!api || !user?.Id) {
-        return null;
-      }
-
-      const response = await getUserViewsApi(api).getUserViews({
-        userId: user.Id,
-      });
-
-      return response.data.Items || null;
-    },
-    enabled: !!api && !!user?.Id,
-    staleTime: 60 * 1000,
-  });
-
-  const userViews = useMemo(
-    () => data?.filter((l) => !settings?.hiddenLibraries?.includes(l.Id!)),
-    [data, settings?.hiddenLibraries]
-  );
-
-  const collections = useMemo(() => {
-    const allow = ["movies", "tvshows"];
-    return (
-      userViews?.filter(
-        (c) => c.CollectionType && allow.includes(c.CollectionType)
-      ) || []
-    );
-  }, [userViews]);
-
-  const invalidateCache = useInvalidatePlaybackProgressCache();
-
-  const refetch = useCallback(async () => {
-    setLoading(true);
-    await refreshStreamyfinPluginSettings();
-    await invalidateCache();
-    setLoading(false);
-  }, []);
-
-  const createCollectionConfig = useCallback(
-    (
-      title: string,
-      queryKey: string[],
-      includeItemTypes: BaseItemKind[],
-      parentId: string | undefined
-    ): ScrollingCollectionListSection => ({
-      title,
-      queryKey,
-      queryFn: async () => {
-        if (!api) return [];
-        return (
-          (
-            await getUserLibraryApi(api).getLatestMedia({
-              userId: user?.Id,
-              limit: 20,
-              fields: ["PrimaryImageAspectRatio", "Path"],
-              imageTypeLimit: 1,
-              enableImageTypes: ["Primary", "Backdrop", "Thumb"],
-              includeItemTypes,
-              parentId,
-            })
-          ).data || []
-        );
-      },
-      type: "ScrollingCollectionList",
-    }),
-    [api, user?.Id]
-  );
-
-  let sections: Section[] = [];
-  if (!settings?.home || !settings?.home?.sections) {
-    sections = useMemo(() => {
-      if (!api || !user?.Id) return [];
-
-      const latestMediaViews = collections.map((c) => {
-        const includeItemTypes: BaseItemKind[] =
-          c.CollectionType === "tvshows" ? ["Series"] : ["Movie"];
-        const title = t("home.recently_added_in", { libraryName: c.Name });
-        const queryKey = [
-          "home",
-          "recentlyAddedIn" + c.CollectionType,
-          user?.Id!,
-          c.Id!,
-        ];
-        return createCollectionConfig(
-          title || "",
-          queryKey,
-          includeItemTypes,
-          c.Id
-        );
-      });
-
-      const ss: Section[] = [
-        {
-          title: t("home.continue_watching"),
-          queryKey: ["home", "resumeItems"],
-          queryFn: async () =>
-            (
-              await getItemsApi(api).getResumeItems({
-                userId: user.Id,
-                enableImageTypes: ["Primary", "Backdrop", "Thumb"],
-                includeItemTypes: ["Movie", "Series", "Episode"],
-              })
-            ).data.Items || [],
-          type: "ScrollingCollectionList",
-          orientation: "horizontal",
-        },
-        {
-          title: t("home.next_up"),
-          queryKey: ["home", "nextUp-all"],
-          queryFn: async () =>
-            (
-              await getTvShowsApi(api).getNextUp({
-                userId: user?.Id,
-                fields: ["MediaSourceCount"],
-                limit: 20,
-                enableImageTypes: ["Primary", "Backdrop", "Thumb"],
-                enableResumable: false,
-              })
-            ).data.Items || [],
-          type: "ScrollingCollectionList",
-          orientation: "horizontal",
-        },
-        ...latestMediaViews,
-        // ...(mediaListCollections?.map(
-        //   (ml) =>
-        //     ({
-        //       title: ml.Name,
-        //       queryKey: ["home", "mediaList", ml.Id!],
-        //       queryFn: async () => ml,
-        //       type: "MediaListSection",
-        //       orientation: "vertical",
-        //     } as Section)
-        // ) || []),
-        {
-          title: t("home.suggested_movies"),
-          queryKey: ["home", "suggestedMovies", user?.Id],
-          queryFn: async () =>
-            (
-              await getSuggestionsApi(api).getSuggestions({
-                userId: user?.Id,
-                limit: 10,
-                mediaType: ["Video"],
-                type: ["Movie"],
-              })
-            ).data.Items || [],
-          type: "ScrollingCollectionList",
-          orientation: "vertical",
-        },
-        {
-          title: t("home.suggested_episodes"),
-          queryKey: ["home", "suggestedEpisodes", user?.Id],
-          queryFn: async () => {
-            try {
-              const suggestions = await getSuggestions(api, user.Id);
-              const nextUpPromises = suggestions.map((series) =>
-                getNextUp(api, user.Id, series.Id)
-              );
-              const nextUpResults = await Promise.all(nextUpPromises);
-
-              return nextUpResults.filter((item) => item !== null) || [];
-            } catch (error) {
-              console.error("Error fetching data:", error);
-              return [];
-            }
-          },
-          type: "ScrollingCollectionList",
-          orientation: "horizontal",
-        },
-      ];
-      return ss;
-    }, [api, user?.Id, collections]);
-  } else {
-    sections = useMemo(() => {
-      if (!api || !user?.Id) return [];
-      const ss: Section[] = [];
-
-      for (const key in settings.home?.sections) {
-        // @ts-expect-error
-        const section = settings.home?.sections[key];
-        const id = section.title || key;
-        ss.push({
-          title: id,
-          queryKey: ["home", id],
-          queryFn: async () => {
-            if (section.items) {
-              const response = await getItemsApi(api).getItems({
-                userId: user?.Id,
-                limit: section.items?.limit || 25,
-                recursive: true,
-                includeItemTypes: section.items?.includeItemTypes,
-                sortBy: section.items?.sortBy,
-                sortOrder: section.items?.sortOrder,
-                filters: section.items?.filters,
-                parentId: section.items?.parentId,
-              });
-              return response.data.Items || [];
-            } else if (section.nextUp) {
-              const response = await getTvShowsApi(api).getNextUp({
-                userId: user?.Id,
-                fields: ["MediaSourceCount"],
-                limit: section.items?.limit || 25,
-                enableImageTypes: ["Primary", "Backdrop", "Thumb"],
-                enableResumable: section.items?.enableResumable || false,
-                enableRewatching: section.items?.enableRewatching || false,
-              });
-              return response.data.Items || [];
-            }
-            return [];
-          },
-          type: "ScrollingCollectionList",
-          orientation: section?.orientation || "vertical",
-        });
-      }
-      return ss;
-    }, [api, user?.Id, settings.home?.sections]);
-  }
-
-  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">{t("home.no_internet")}</Text>
-        <Text className="text-center opacity-70">
-          {t("home.no_internet_message")}
-        </Text>
-        <View className="mt-4">
-          <Button
-            color="purple"
-            onPress={() => router.push("/(auth)/downloads")}
-            justify="center"
-            iconRight={
-              <Ionicons name="arrow-forward" size={20} color="white" />
-            }
-          >
-            {t("home.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>
-    );
-  }
-
-  if (e1)
-    return (
-      <View className="flex flex-col items-center justify-center h-full -mt-6">
-        <Text className="text-3xl font-bold mb-2">{t("home.oops")}</Text>
-        <Text className="text-center opacity-70">
-          {t("home.error_message")}
-        </Text>
-      </View>
-    );
-
-  if (l1)
-    return (
-      <View className="justify-center items-center h-full">
-        <Loader />
-      </View>
-    );
-
-  return (
-    <ScrollView
-      scrollToOverflowEnabled={true}
-      ref={scrollViewRef}
-      nestedScrollEnabled
-      contentInsetAdjustmentBehavior="automatic"
-      refreshControl={
-        <RefreshControl refreshing={loading} onRefresh={refetch} />
-      }
-      contentContainerStyle={{
-        paddingLeft: insets.left,
-        paddingRight: insets.right,
-        paddingBottom: 16,
-      }}
-    >
-      <View className="flex flex-col space-y-4">
-        <LargeMovieCarousel />
-
-        {sections.map((section, index) => {
-          if (section.type === "ScrollingCollectionList") {
-            return (
-              <ScrollingCollectionList
-                key={index}
-                title={section.title}
-                queryKey={section.queryKey}
-                queryFn={section.queryFn}
-                orientation={section.orientation}
-                hideIfEmpty
-              />
-            );
-          } else if (section.type === "MediaListSection") {
-            return (
-              <MediaListSection
-                key={index}
-                queryKey={section.queryKey}
-                queryFn={section.queryFn}
-              />
-            );
-          }
-          return null;
-        })}
-      </View>
-    </ScrollView>
-  );
-};
-
-// Function to get suggestions
-async function getSuggestions(api: Api, userId: string | undefined) {
-  if (!userId) return [];
-  const response = await getSuggestionsApi(api).getSuggestions({
-    userId,
-    limit: 10,
-    mediaType: ["Unknown"],
-    type: ["Series"],
-  });
-  return response.data.Items ?? [];
-}
-
-// Function to get the next up TV show for a series
-async function getNextUp(
-  api: Api,
-  userId: string | undefined,
-  seriesId: string | undefined
-) {
-  if (!userId || !seriesId) return null;
-  const response = await getTvShowsApi(api).getNextUp({
-    userId,
-    seriesId,
-    limit: 1,
-  });
-  return response.data.Items?.[0] ?? null;
-}

components/settings/HomeIndex.tv.tsx

@@ -1,453 +0,0 @@
-import { Button } from "@/components/Button";
-import { Text } from "@/components/common/Text";
-import { LargeMovieCarousel } from "@/components/home/LargeMovieCarousel";
-import { ScrollingCollectionList } from "@/components/home/ScrollingCollectionList";
-import { Loader } from "@/components/Loader";
-import { MediaListSection } from "@/components/medialists/MediaListSection";
-import { useInvalidatePlaybackProgressCache } from "@/hooks/useRevalidatePlaybackProgressCache";
-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,
-  BaseItemKind,
-} from "@jellyfin/sdk/lib/generated-client/models";
-import {
-  getItemsApi,
-  getSuggestionsApi,
-  getTvShowsApi,
-  getUserLibraryApi,
-  getUserViewsApi,
-} from "@jellyfin/sdk/lib/utils/api";
-import NetInfo from "@react-native-community/netinfo";
-import { QueryFunction, useQuery } from "@tanstack/react-query";
-import { useRouter } from "expo-router";
-import { useAtomValue } from "jotai";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { useTranslation } from "react-i18next";
-import {
-  ActivityIndicator,
-  RefreshControl,
-  ScrollView,
-  View,
-} from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-
-type ScrollingCollectionListSection = {
-  type: "ScrollingCollectionList";
-  title?: string;
-  queryKey: (string | undefined | null)[];
-  queryFn: QueryFunction<BaseItemDto[]>;
-  orientation?: "horizontal" | "vertical";
-};
-
-type MediaListSection = {
-  type: "MediaListSection";
-  queryKey: (string | undefined)[];
-  queryFn: QueryFunction<BaseItemDto>;
-};
-
-type Section = ScrollingCollectionListSection | MediaListSection;
-
-export const HomeIndex = () => {
-  const router = useRouter();
-
-  const { t } = useTranslation();
-
-  const api = useAtomValue(apiAtom);
-  const user = useAtomValue(userAtom);
-
-  const [loading, setLoading] = useState(false);
-  const [
-    settings,
-    updateSettings,
-    pluginSettings,
-    setPluginSettings,
-    refreshStreamyfinPluginSettings,
-  ] = useSettings();
-
-  const [isConnected, setIsConnected] = useState<boolean | null>(null);
-  const [loadingRetry, setLoadingRetry] = useState(false);
-
-  const insets = useSafeAreaInsets();
-
-  const checkConnection = useCallback(async () => {
-    setLoadingRetry(true);
-    const state = await NetInfo.fetch();
-    setIsConnected(state.isConnected);
-    setLoadingRetry(false);
-  }, []);
-
-  useEffect(() => {
-    const unsubscribe = NetInfo.addEventListener((state) => {
-      if (state.isConnected == false || state.isInternetReachable === false)
-        setIsConnected(false);
-      else setIsConnected(true);
-    });
-
-    NetInfo.fetch().then((state) => {
-      setIsConnected(state.isConnected);
-    });
-
-    // cleanCacheDirectory().catch((e) =>
-    //   console.error("Something went wrong cleaning cache directory")
-    // );
-
-    return () => {
-      unsubscribe();
-    };
-  }, []);
-
-  const {
-    data,
-    isError: e1,
-    isLoading: l1,
-  } = useQuery({
-    queryKey: ["home", "userViews", user?.Id],
-    queryFn: async () => {
-      if (!api || !user?.Id) {
-        return null;
-      }
-
-      const response = await getUserViewsApi(api).getUserViews({
-        userId: user.Id,
-      });
-
-      return response.data.Items || null;
-    },
-    enabled: !!api && !!user?.Id,
-    staleTime: 60 * 1000,
-  });
-
-  const userViews = useMemo(
-    () => data?.filter((l) => !settings?.hiddenLibraries?.includes(l.Id!)),
-    [data, settings?.hiddenLibraries]
-  );
-
-  const collections = useMemo(() => {
-    const allow = ["movies", "tvshows"];
-    return (
-      userViews?.filter(
-        (c) => c.CollectionType && allow.includes(c.CollectionType)
-      ) || []
-    );
-  }, [userViews]);
-
-  const invalidateCache = useInvalidatePlaybackProgressCache();
-
-  const refetch = useCallback(async () => {
-    setLoading(true);
-    await refreshStreamyfinPluginSettings();
-    await invalidateCache();
-    setLoading(false);
-  }, []);
-
-  const createCollectionConfig = useCallback(
-    (
-      title: string,
-      queryKey: string[],
-      includeItemTypes: BaseItemKind[],
-      parentId: string | undefined
-    ): ScrollingCollectionListSection => ({
-      title,
-      queryKey,
-      queryFn: async () => {
-        if (!api) return [];
-        return (
-          (
-            await getUserLibraryApi(api).getLatestMedia({
-              userId: user?.Id,
-              limit: 20,
-              fields: ["PrimaryImageAspectRatio", "Path"],
-              imageTypeLimit: 1,
-              enableImageTypes: ["Primary", "Backdrop", "Thumb"],
-              includeItemTypes,
-              parentId,
-            })
-          ).data || []
-        );
-      },
-      type: "ScrollingCollectionList",
-    }),
-    [api, user?.Id]
-  );
-
-  let sections: Section[] = [];
-  if (!settings?.home || !settings?.home?.sections) {
-    sections = useMemo(() => {
-      if (!api || !user?.Id) return [];
-
-      const latestMediaViews = collections.map((c) => {
-        const includeItemTypes: BaseItemKind[] =
-          c.CollectionType === "tvshows" ? ["Series"] : ["Movie"];
-        const title = t("home.recently_added_in", { libraryName: c.Name });
-        const queryKey = [
-          "home",
-          "recentlyAddedIn" + c.CollectionType,
-          user?.Id!,
-          c.Id!,
-        ];
-        return createCollectionConfig(
-          title || "",
-          queryKey,
-          includeItemTypes,
-          c.Id
-        );
-      });
-
-      const ss: Section[] = [
-        {
-          title: t("home.continue_watching"),
-          queryKey: ["home", "resumeItems"],
-          queryFn: async () =>
-            (
-              await getItemsApi(api).getResumeItems({
-                userId: user.Id,
-                enableImageTypes: ["Primary", "Backdrop", "Thumb"],
-                includeItemTypes: ["Movie", "Series", "Episode"],
-              })
-            ).data.Items || [],
-          type: "ScrollingCollectionList",
-          orientation: "horizontal",
-        },
-        {
-          title: t("home.next_up"),
-          queryKey: ["home", "nextUp-all"],
-          queryFn: async () =>
-            (
-              await getTvShowsApi(api).getNextUp({
-                userId: user?.Id,
-                fields: ["MediaSourceCount"],
-                limit: 20,
-                enableImageTypes: ["Primary", "Backdrop", "Thumb"],
-                enableResumable: false,
-              })
-            ).data.Items || [],
-          type: "ScrollingCollectionList",
-          orientation: "horizontal",
-        },
-        ...latestMediaViews,
-        // ...(mediaListCollections?.map(
-        //   (ml) =>
-        //     ({
-        //       title: ml.Name,
-        //       queryKey: ["home", "mediaList", ml.Id!],
-        //       queryFn: async () => ml,
-        //       type: "MediaListSection",
-        //       orientation: "vertical",
-        //     } as Section)
-        // ) || []),
-        {
-          title: t("home.suggested_movies"),
-          queryKey: ["home", "suggestedMovies", user?.Id],
-          queryFn: async () =>
-            (
-              await getSuggestionsApi(api).getSuggestions({
-                userId: user?.Id,
-                limit: 10,
-                mediaType: ["Video"],
-                type: ["Movie"],
-              })
-            ).data.Items || [],
-          type: "ScrollingCollectionList",
-          orientation: "vertical",
-        },
-        {
-          title: t("home.suggested_episodes"),
-          queryKey: ["home", "suggestedEpisodes", user?.Id],
-          queryFn: async () => {
-            try {
-              const suggestions = await getSuggestions(api, user.Id);
-              const nextUpPromises = suggestions.map((series) =>
-                getNextUp(api, user.Id, series.Id)
-              );
-              const nextUpResults = await Promise.all(nextUpPromises);
-
-              return nextUpResults.filter((item) => item !== null) || [];
-            } catch (error) {
-              console.error("Error fetching data:", error);
-              return [];
-            }
-          },
-          type: "ScrollingCollectionList",
-          orientation: "horizontal",
-        },
-      ];
-      return ss;
-    }, [api, user?.Id, collections]);
-  } else {
-    sections = useMemo(() => {
-      if (!api || !user?.Id) return [];
-      const ss: Section[] = [];
-
-      for (const key in settings.home?.sections) {
-        // @ts-expect-error
-        const section = settings.home?.sections[key];
-        const id = section.title || key;
-        ss.push({
-          title: id,
-          queryKey: ["home", id],
-          queryFn: async () => {
-            if (section.items) {
-              const response = await getItemsApi(api).getItems({
-                userId: user?.Id,
-                limit: section.items?.limit || 25,
-                recursive: true,
-                includeItemTypes: section.items?.includeItemTypes,
-                sortBy: section.items?.sortBy,
-                sortOrder: section.items?.sortOrder,
-                filters: section.items?.filters,
-                parentId: section.items?.parentId,
-              });
-              return response.data.Items || [];
-            } else if (section.nextUp) {
-              const response = await getTvShowsApi(api).getNextUp({
-                userId: user?.Id,
-                fields: ["MediaSourceCount"],
-                limit: section.items?.limit || 25,
-                enableImageTypes: ["Primary", "Backdrop", "Thumb"],
-                enableResumable: section.items?.enableResumable || false,
-                enableRewatching: section.items?.enableRewatching || false,
-              });
-              return response.data.Items || [];
-            }
-            return [];
-          },
-          type: "ScrollingCollectionList",
-          orientation: section?.orientation || "vertical",
-        });
-      }
-      return ss;
-    }, [api, user?.Id, settings.home?.sections]);
-  }
-
-  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">{t("home.no_internet")}</Text>
-        <Text className="text-center opacity-70">
-          {t("home.no_internet_message")}
-        </Text>
-        <View className="mt-4">
-          <Button
-            color="purple"
-            onPress={() => router.push("/(auth)/downloads")}
-            justify="center"
-            iconRight={
-              <Ionicons name="arrow-forward" size={20} color="white" />
-            }
-          >
-            {t("home.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>
-    );
-  }
-
-  if (e1)
-    return (
-      <View className="flex flex-col items-center justify-center h-full -mt-6">
-        <Text className="text-3xl font-bold mb-2">{t("home.oops")}</Text>
-        <Text className="text-center opacity-70">
-          {t("home.error_message")}
-        </Text>
-      </View>
-    );
-
-  if (l1)
-    return (
-      <View className="justify-center items-center h-full">
-        <Loader />
-      </View>
-    );
-
-  return (
-    <ScrollView
-      nestedScrollEnabled
-      contentInsetAdjustmentBehavior="automatic"
-      refreshControl={
-        <RefreshControl refreshing={loading} onRefresh={refetch} />
-      }
-      contentContainerStyle={{
-        paddingLeft: insets.left,
-        paddingRight: insets.right,
-        paddingBottom: 16,
-      }}
-    >
-      <View className="flex flex-col space-y-4">
-        <LargeMovieCarousel />
-
-        {sections.map((section, index) => {
-          if (section.type === "ScrollingCollectionList") {
-            return (
-              <ScrollingCollectionList
-                key={index}
-                title={section.title}
-                queryKey={section.queryKey}
-                queryFn={section.queryFn}
-                orientation={section.orientation}
-                hideIfEmpty
-              />
-            );
-          } else if (section.type === "MediaListSection") {
-            return (
-              <MediaListSection
-                key={index}
-                queryKey={section.queryKey}
-                queryFn={section.queryFn}
-              />
-            );
-          }
-          return null;
-        })}
-      </View>
-    </ScrollView>
-  );
-};
-
-// Function to get suggestions
-async function getSuggestions(api: Api, userId: string | undefined) {
-  if (!userId) return [];
-  const response = await getSuggestionsApi(api).getSuggestions({
-    userId,
-    limit: 10,
-    mediaType: ["Unknown"],
-    type: ["Series"],
-  });
-  return response.data.Items ?? [];
-}
-
-// Function to get the next up TV show for a series
-async function getNextUp(
-  api: Api,
-  userId: string | undefined,
-  seriesId: string | undefined
-) {
-  if (!userId || !seriesId) return null;
-  const response = await getTvShowsApi(api).getNextUp({
-    userId,
-    seriesId,
-    limit: 1,
-  });
-  return response.data.Items?.[0] ?? null;
-}

components/settings/Jellyseerr.tsx

@@ -26,6 +26,9 @@ export const JellyseerrSettings = () => {
   const [user] = useAtom(userAtom);
   const [settings, updateSettings, pluginSettings] = useSettings();
 
+  const [promptForJellyseerrPass, setPromptForJellyseerrPass] =
+    useState<boolean>(false);
+
   const [jellyseerrPassword, setJellyseerrPassword] = useState<
     string | undefined
   >(undefined);
@@ -36,16 +39,11 @@ export const JellyseerrSettings = () => {
 
   const loginToJellyseerrMutation = useMutation({
     mutationFn: async () => {
-      if (!jellyseerrServerUrl && !settings?.jellyseerrServerUrl)
-        throw new Error("Missing server url");
-      if (!user?.Name)
+      if (!jellyseerrServerUrl || !user?.Name || !jellyseerrPassword) {
         throw new Error("Missing required information for login");
-      const jellyseerrTempApi = new JellyseerrApi(
-        jellyseerrServerUrl || settings.jellyseerrServerUrl || ""
-      );
-      const testResult = await jellyseerrTempApi.test();
-      if (!testResult.isValid) throw new Error("Invalid server url");
-      return jellyseerrTempApi.login(user.Name, jellyseerrPassword || "");
+      }
+      const jellyseerrTempApi = new JellyseerrApi(jellyseerrServerUrl);
+      return jellyseerrTempApi.login(user.Name, jellyseerrPassword);
     },
     onSuccess: (user) => {
       setJellyseerrUser(user);
@@ -59,11 +57,31 @@ export const JellyseerrSettings = () => {
     },
   });
 
+  const testJellyseerrServerUrlMutation = useMutation({
+    mutationFn: async () => {
+      if (!jellyseerrServerUrl || jellyseerrApi) return null;
+      const jellyseerrTempApi = new JellyseerrApi(jellyseerrServerUrl);
+      return jellyseerrTempApi.test();
+    },
+    onSuccess: (result) => {
+      if (result && result.isValid) {
+        if (result.requiresPass) {
+          setPromptForJellyseerrPass(true);
+        } else {
+          updateSettings({ jellyseerrServerUrl });
+        }
+      } else {
+        setPromptForJellyseerrPass(false);
+        setjellyseerrServerUrl(undefined);
+        clearAllJellyseerData();
+      }
+    },
+  });
+
   const clearData = () => {
     clearAllJellyseerData().finally(() => {
-      setJellyseerrUser(undefined);
-      setJellyseerrPassword(undefined);
       setjellyseerrServerUrl(undefined);
+      setPromptForJellyseerrPass(false);
     });
   };
 
@@ -74,46 +92,34 @@ export const JellyseerrSettings = () => {
           <>
             <ListGroup title={"Jellyseerr"}>
               <ListItem
-                title={t(
-                  "home.settings.plugins.jellyseerr.total_media_requests"
-                )}
+                title={t("home.settings.plugins.jellyseerr.total_media_requests")}
                 value={jellyseerrUser?.requestCount?.toString()}
               />
               <ListItem
                 title={t("home.settings.plugins.jellyseerr.movie_quota_limit")}
                 value={
-                  jellyseerrUser?.movieQuotaLimit?.toString() ??
-                  t("home.settings.plugins.jellyseerr.unlimited")
+                  jellyseerrUser?.movieQuotaLimit?.toString() ?? t("home.settings.plugins.jellyseerr.unlimited")
                 }
               />
               <ListItem
                 title={t("home.settings.plugins.jellyseerr.movie_quota_days")}
                 value={
-                  jellyseerrUser?.movieQuotaDays?.toString() ??
-                  t("home.settings.plugins.jellyseerr.unlimited")
+                  jellyseerrUser?.movieQuotaDays?.toString() ?? t("home.settings.plugins.jellyseerr.unlimited")
                 }
               />
               <ListItem
                 title={t("home.settings.plugins.jellyseerr.tv_quota_limit")}
-                value={
-                  jellyseerrUser?.tvQuotaLimit?.toString() ??
-                  t("home.settings.plugins.jellyseerr.unlimited")
-                }
+                value={jellyseerrUser?.tvQuotaLimit?.toString() ?? t("home.settings.plugins.jellyseerr.unlimited")}
               />
               <ListItem
                 title={t("home.settings.plugins.jellyseerr.tv_quota_days")}
-                value={
-                  jellyseerrUser?.tvQuotaDays?.toString() ??
-                  t("home.settings.plugins.jellyseerr.unlimited")
-                }
+                value={jellyseerrUser?.tvQuotaDays?.toString() ?? t("home.settings.plugins.jellyseerr.unlimited")}
               />
             </ListGroup>
 
             <View className="p-4">
               <Button color="red" onPress={clearData}>
-                {t(
-                  "home.settings.plugins.jellyseerr.reset_jellyseerr_config_button"
-                )}
+                {t("home.settings.plugins.jellyseerr.reset_jellyseerr_config_button")}
               </Button>
             </View>
           </>
@@ -122,20 +128,15 @@ export const JellyseerrSettings = () => {
             <Text className="text-xs text-red-600 mb-2">
               {t("home.settings.plugins.jellyseerr.jellyseerr_warning")}
             </Text>
-            <Text className="font-bold mb-1">
-              {t("home.settings.plugins.jellyseerr.server_url")}
-            </Text>
+            <Text className="font-bold mb-1">{t("home.settings.plugins.jellyseerr.server_url")}</Text>
             <View className="flex flex-col shrink mb-2">
               <Text className="text-xs text-gray-600">
                 {t("home.settings.plugins.jellyseerr.server_url_hint")}
               </Text>
             </View>
             <Input
-              className="border border-neutral-800 mb-2"
-              placeholder={t(
-                "home.settings.plugins.jellyseerr.server_url_placeholder"
-              )}
-              value={jellyseerrServerUrl ?? settings?.jellyseerrServerUrl}
+              placeholder={t("home.settings.plugins.jellyseerr.server_url_placeholder")}
+              value={settings?.jellyseerrServerUrl ?? jellyseerrServerUrl}
               defaultValue={
                 settings?.jellyseerrServerUrl ?? jellyseerrServerUrl
               }
@@ -144,20 +145,40 @@ export const JellyseerrSettings = () => {
               autoCapitalize="none"
               textContentType="URL"
               onChangeText={setjellyseerrServerUrl}
-              editable={!loginToJellyseerrMutation.isPending}
+              editable={!testJellyseerrServerUrlMutation.isPending}
             />
-            <View>
-              <Text className="font-bold mb-2">
-                {t("home.settings.plugins.jellyseerr.password")}
-              </Text>
+
+            <Button
+              loading={testJellyseerrServerUrlMutation.isPending}
+              disabled={testJellyseerrServerUrlMutation.isPending}
+              color={promptForJellyseerrPass ? "red" : "purple"}
+              className="h-12 mt-2"
+              onPress={() => {
+                if (promptForJellyseerrPass) {
+                  clearData();
+                  return;
+                }
+
+                testJellyseerrServerUrlMutation.mutate();
+              }}
+              style={{
+                marginBottom: 8,
+              }}
+            >
+              {promptForJellyseerrPass ? t("home.settings.plugins.jellyseerr.clear_button") : t("home.settings.plugins.jellyseerr.save_button")}
+            </Button>
+
+            <View
+              pointerEvents={promptForJellyseerrPass ? "auto" : "none"}
+              style={{
+                opacity: promptForJellyseerrPass ? 1 : 0.5,
+              }}
+            >
+              <Text className="font-bold mb-2">{t("home.settings.plugins.jellyseerr.password")}</Text>
               <Input
-                className="border border-neutral-800"
                 autoFocus={true}
                 focusable={true}
-                placeholder={t(
-                  "home.settings.plugins.jellyseerr.password_placeholder",
-                  { username: user?.Name }
-                )}
+                placeholder={t("home.settings.plugins.jellyseerr.password_placeholder", {username: user?.Name})}
                 value={jellyseerrPassword}
                 keyboardType="default"
                 secureTextEntry={true}
@@ -165,7 +186,10 @@ export const JellyseerrSettings = () => {
                 autoCapitalize="none"
                 textContentType="password"
                 onChangeText={setJellyseerrPassword}
-                editable={!loginToJellyseerrMutation.isPending}
+                editable={
+                  !loginToJellyseerrMutation.isPending &&
+                  promptForJellyseerrPass
+                }
               />
               <Button
                 loading={loginToJellyseerrMutation.isPending}

components/settings/OptimizedServerForm.tsx

@@ -1,45 +0,0 @@
-import { TextInput, View, Linking } from "react-native";
-import { Text } from "../common/Text";
-import { useTranslation } from "react-i18next";
-
-interface Props {
-  value: string;
-  onChangeValue: (value: string) => void;
-}
-
-export const OptimizedServerForm: React.FC<Props> = ({
-  value,
-  onChangeValue,
-}) => {
-  const handleOpenLink = () => {
-    Linking.openURL("https://github.com/streamyfin/optimized-versions-server");
-  };
-
-  const { t } = useTranslation();
-
-  return (
-    <View>
-      <View className="flex flex-col rounded-xl overflow-hidden pl-4 bg-neutral-900 px-4">
-        <View className={`flex flex-row items-center bg-neutral-900 h-11 pr-4`}>
-          <Text className="mr-4">{t("home.settings.downloads.url")}</Text>
-          <TextInput
-            className="text-white"
-            placeholder={t("home.settings.downloads.server_url_placeholder")}
-            value={value}
-            keyboardType="url"
-            returnKeyType="done"
-            autoCapitalize="none"
-            textContentType="URL"
-            onChangeText={(text) => onChangeValue(text)}
-          />
-        </View>
-      </View>
-      <Text className="px-4 text-xs text-neutral-500 mt-1">
-        {t("home.settings.downloads.optimized_version_hint")}{" "}
-        <Text className="text-blue-500" onPress={handleOpenLink}>
-          {t("home.settings.downloads.read_more_about_optimized_server")}
-        </Text>
-      </Text>
-    </View>
-  );
-};

components/settings/OtherSettings.tsx

@@ -165,7 +165,7 @@ export const OtherSettings: React.FC = () => {
           showArrow
         />
         <ListItem
-          title={t("home.settings.other.default_quality")}
+          title="Default quality"
           disabled={pluginSettings?.defaultBitrate?.locked}
         >
           <Dropdown
@@ -186,7 +186,7 @@ export const OtherSettings: React.FC = () => {
                 />
               </TouchableOpacity>
             }
-            label={t("home.settings.other.default_quality")}
+            label={t("home.settings.other.quality")}
             onSelected={(defaultBitrate) => updateSettings({ defaultBitrate })}
           />
         </ListItem>

components/settings/StorageSettings.tsx

@@ -1,49 +1,15 @@
-import { Text } from "@/components/common/Text";
 import { useHaptic } from "@/hooks/useHaptic";
-import { useDownload } from "@/providers/DownloadProvider";
-import { useQuery } from "@tanstack/react-query";
-import * as FileSystem from "expo-file-system";
-import { View } from "react-native";
-import { toast } from "sonner-native";
-import { ListGroup } from "../list/ListGroup";
-import { ListItem } from "../list/ListItem";
 import { useTranslation } from "react-i18next";
+import { View } from "react-native";
 
 export const StorageSettings = () => {
-  const { deleteAllFiles, appSizeUsage } = useDownload();
   const { t } = useTranslation();
   const successHapticFeedback = useHaptic("success");
   const errorHapticFeedback = useHaptic("error");
 
-  const { data: size, isLoading: appSizeLoading } = useQuery({
-    queryKey: ["appSize", appSizeUsage],
-    queryFn: async () => {
-      const app = await appSizeUsage;
-
-      const remaining = await FileSystem.getFreeDiskStorageAsync();
-      const total = await FileSystem.getTotalDiskCapacityAsync();
-
-      return { app, remaining, total, used: (total - remaining) / total };
-    },
-  });
-
-  const onDeleteClicked = async () => {
-    try {
-      await deleteAllFiles();
-      successHapticFeedback();
-    } catch (e) {
-      errorHapticFeedback();
-      toast.error(t("home.settings.toasts.error_deleting_files"));
-    }
-  };
-
-  const calculatePercentage = (value: number, total: number) => {
-    return ((value / total) * 100).toFixed(2);
-  };
-
   return (
     <View>
-      <View className="flex flex-col gap-y-1">
+      {/* <View className="flex flex-col gap-y-1">
         <View className="flex flex-row items-center justify-between">
           <Text className="">{t("home.settings.storage.storage_title")}</Text>
           {size && (
@@ -108,7 +74,7 @@ export const StorageSettings = () => {
           onPress={onDeleteClicked}
           title={t("home.settings.storage.delete_all_downloaded_files")}
         />
-      </ListGroup>
+      </ListGroup> */}
     </View>
   );
 };

components/video-player/controls/Controls.tsx

@@ -24,7 +24,7 @@ import {
   ticksToMs,
   ticksToSeconds,
 } from "@/utils/time";
-import { Ionicons, MaterialIcons } from "@expo/vector-icons";
+import {Ionicons, MaterialIcons} from "@expo/vector-icons";
 import {
   BaseItemDto,
   MediaSourceInfo,
@@ -35,12 +35,7 @@ import * as ScreenOrientation from "@/packages/expo-screen-orientation";
 import { useAtom } from "jotai";
 import { debounce } from "lodash";
 import React, { useCallback, useEffect, useRef, useState } from "react";
-import {
-  Platform,
-  TouchableOpacity,
-  useWindowDimensions,
-  View,
-} from "react-native";
+import {Platform, TouchableOpacity, useWindowDimensions, View} from "react-native";
 import { Slider } from "react-native-awesome-slider";
 import {
   runOnJS,
@@ -54,7 +49,8 @@ import AudioSlider from "./AudioSlider";
 import BrightnessSlider from "./BrightnessSlider";
 import { ControlProvider } from "./contexts/ControlContext";
 import { VideoProvider } from "./contexts/VideoContext";
-import DropdownView from "./dropdown/DropdownView";
+import DropdownViewDirect from "./dropdown/DropdownViewDirect";
+import DropdownViewTranscoding from "./dropdown/DropdownViewTranscoding";
 import { EpisodeList } from "./EpisodeList";
 import NextEpisodeCountDownButton from "./NextEpisodeCountDownButton";
 import SkipButton from "./SkipButton";
@@ -87,38 +83,40 @@ interface Props {
   setSubtitleURL?: (url: string, customName: string) => void;
   setSubtitleTrack?: (index: number) => void;
   setAudioTrack?: (index: number) => void;
+  stop: (() => Promise<void>) | (() => void);
   isVlc?: boolean;
 }
 
 const CONTROLS_TIMEOUT = 4000;
 
 export const Controls: React.FC<Props> = ({
-                                            item,
-                                            seek,
-                                            startPictureInPicture,
-                                            play,
-                                            pause,
-                                            togglePlay,
-                                            isPlaying,
-                                            isSeeking,
-                                            progress,
-                                            isBuffering,
-                                            cacheProgress,
-                                            showControls,
-                                            setShowControls,
-                                            ignoreSafeAreas,
-                                            setIgnoreSafeAreas,
-                                            mediaSource,
-                                            isVideoLoaded,
-                                            getAudioTracks,
-                                            getSubtitleTracks,
-                                            setSubtitleURL,
-                                            setSubtitleTrack,
-                                            setAudioTrack,
-                                            offline = false,
-                                            enableTrickplay = true,
-                                            isVlc = false,
-                                          }) => {
+  item,
+  seek,
+  startPictureInPicture,
+  play,
+  pause,
+  togglePlay,
+  isPlaying,
+  isSeeking,
+  progress,
+  isBuffering,
+  cacheProgress,
+  showControls,
+  setShowControls,
+  ignoreSafeAreas,
+  setIgnoreSafeAreas,
+  mediaSource,
+  isVideoLoaded,
+  getAudioTracks,
+  getSubtitleTracks,
+  setSubtitleURL,
+  setSubtitleTrack,
+  setAudioTrack,
+  stop,
+  offline = false,
+  enableTrickplay = true,
+  isVlc = false,
+}) => {
   const [settings] = useSettings();
   const router = useRouter();
   const insets = useSafeAreaInsets();
@@ -187,60 +185,85 @@ export const Controls: React.FC<Props> = ({
     isVlc
   );
 
-  const goToItemCommon = useCallback(
-    (item: BaseItemDto) => {
-      if (!item || !settings) return;
+  const goToPreviousItem = useCallback(() => {
+    if (!previousItem || !settings) return;
 
-      lightHapticFeedback();
+    lightHapticFeedback();
 
-      const previousIndexes = {
-        subtitleIndex: subtitleIndex ? parseInt(subtitleIndex) : undefined,
-        audioIndex: audioIndex ? parseInt(audioIndex) : undefined,
-      };
+    const previousIndexes: previousIndexes = {
+      subtitleIndex: subtitleIndex ? parseInt(subtitleIndex) : undefined,
+      audioIndex: audioIndex ? parseInt(audioIndex) : undefined,
+    };
 
-      const {
-        mediaSource: newMediaSource,
-        audioIndex: defaultAudioIndex,
-        subtitleIndex: defaultSubtitleIndex,
-      } = getDefaultPlaySettings(
-        item,
-        settings,
-        previousIndexes,
-        mediaSource ?? undefined
-      );
+    const {
+      mediaSource: newMediaSource,
+      audioIndex: defaultAudioIndex,
+      subtitleIndex: defaultSubtitleIndex,
+    } = getDefaultPlaySettings(
+      previousItem,
+      settings,
+      previousIndexes,
+      mediaSource ?? undefined
+    );
 
-      const queryParams = new URLSearchParams({
-        itemId: item.Id ?? "",
-        audioIndex: defaultAudioIndex?.toString() ?? "",
-        subtitleIndex: defaultSubtitleIndex?.toString() ?? "",
-        mediaSourceId: newMediaSource?.Id ?? "",
-        bitrateValue: bitrateValue.toString(),
-      }).toString();
+    const queryParams = new URLSearchParams({
+      itemId: previousItem.Id ?? "", // Ensure itemId is a string
+      audioIndex: defaultAudioIndex?.toString() ?? "",
+      subtitleIndex: defaultSubtitleIndex?.toString() ?? "",
+      mediaSourceId: newMediaSource?.Id ?? "", // Ensure mediaSourceId is a string
+      bitrateValue: bitrateValue.toString(),
+    }).toString();
 
+    stop()
+
+    if (!bitrateValue) {
       // @ts-expect-error
       router.replace(`player/direct-player?${queryParams}`);
-    },
-    [settings, subtitleIndex, audioIndex, mediaSource, bitrateValue, router]
-  );
-
-  const goToPreviousItem = useCallback(() => {
-    if (!previousItem) return;
-    goToItemCommon(previousItem);
-  }, [previousItem, goToItemCommon]);
+      return;
+    }
+    // @ts-expect-error
+    router.replace(`player/transcoding-player?${queryParams}`);
+  }, [previousItem, settings, subtitleIndex, audioIndex]);
 
   const goToNextItem = useCallback(() => {
-    if (!nextItem) return;
-    goToItemCommon(nextItem);
-  }, [nextItem, goToItemCommon]);
+    if (!nextItem || !settings) return;
 
-  const goToItem = useCallback(
-    async (itemId: string) => {
-      const gotoItem = await getItemById(api, itemId);
-      if (!gotoItem) return;
-      goToItemCommon(gotoItem);
-    },
-    [goToItemCommon, api]
-  );
+    lightHapticFeedback();
+
+    const previousIndexes: previousIndexes = {
+      subtitleIndex: subtitleIndex ? parseInt(subtitleIndex) : undefined,
+      audioIndex: audioIndex ? parseInt(audioIndex) : undefined,
+    };
+
+    const {
+      mediaSource: newMediaSource,
+      audioIndex: defaultAudioIndex,
+      subtitleIndex: defaultSubtitleIndex,
+    } = getDefaultPlaySettings(
+      nextItem,
+      settings,
+      previousIndexes,
+      mediaSource ?? undefined
+    );
+
+    const queryParams = new URLSearchParams({
+      itemId: nextItem.Id ?? "", // Ensure itemId is a string
+      audioIndex: defaultAudioIndex?.toString() ?? "",
+      subtitleIndex: defaultSubtitleIndex?.toString() ?? "",
+      mediaSourceId: newMediaSource?.Id ?? "", // Ensure mediaSourceId is a string
+      bitrateValue: bitrateValue.toString(),
+    }).toString();
+
+    stop()
+
+    if (!bitrateValue) {
+      // @ts-expect-error
+      router.replace(`player/direct-player?${queryParams}`);
+      return;
+    }
+    // @ts-expect-error
+    router.replace(`player/transcoding-player?${queryParams}`);
+  }, [nextItem, settings, subtitleIndex, audioIndex]);
 
   const updateTimes = useCallback(
     (currentProgress: number, maxValue: number) => {
@@ -364,6 +387,54 @@ export const Controls: React.FC<Props> = ({
     }
   }, [settings, isPlaying, isVlc]);
 
+  const goToItem = useCallback(
+    async (itemId: string) => {
+      try {
+        const gotoItem = await getItemById(api, itemId);
+        if (!settings || !gotoItem) return;
+
+        lightHapticFeedback();
+
+        const previousIndexes: previousIndexes = {
+          subtitleIndex: subtitleIndex ? parseInt(subtitleIndex) : undefined,
+          audioIndex: audioIndex ? parseInt(audioIndex) : undefined,
+        };
+
+        const {
+          mediaSource: newMediaSource,
+          audioIndex: defaultAudioIndex,
+          subtitleIndex: defaultSubtitleIndex,
+        } = getDefaultPlaySettings(
+          gotoItem,
+          settings,
+          previousIndexes,
+          mediaSource ?? undefined
+        );
+
+        const queryParams = new URLSearchParams({
+          itemId: gotoItem.Id ?? "", // Ensure itemId is a string
+          audioIndex: defaultAudioIndex?.toString() ?? "",
+          subtitleIndex: defaultSubtitleIndex?.toString() ?? "",
+          mediaSourceId: newMediaSource?.Id ?? "", // Ensure mediaSourceId is a string
+          bitrateValue: bitrateValue.toString(),
+        }).toString();
+
+        stop()
+
+        if (!bitrateValue) {
+          // @ts-expect-error
+          router.replace(`player/direct-player?${queryParams}`);
+          return;
+        }
+        // @ts-expect-error
+        router.replace(`player/transcoding-player?${queryParams}`);
+      } catch (error) {
+        console.error("Error in gotoEpisode:", error);
+      }
+    },
+    [settings, subtitleIndex, audioIndex]
+  );
+
   const toggleIgnoreSafeAreas = useCallback(() => {
     setIgnoreSafeAreas((prev) => !prev);
     lightHapticFeedback();
@@ -437,6 +508,7 @@ export const Controls: React.FC<Props> = ({
   }, [trickPlayUrl, trickplayInfo, time]);
 
   const onClose = async () => {
+    stop()
     lightHapticFeedback();
     await ScreenOrientation.lockAsync(
       ScreenOrientation.OrientationLock.PORTRAIT_UP
@@ -479,25 +551,26 @@ export const Controls: React.FC<Props> = ({
             pointerEvents={showControls ? "auto" : "none"}
             className={`flex flex-row w-full pt-2`}
           >
-            {!Platform.isTV && (
-              <View className="mr-auto">
-                <VideoProvider
-                  getAudioTracks={getAudioTracks}
-                  getSubtitleTracks={getSubtitleTracks}
-                  setAudioTrack={setAudioTrack}
-                  setSubtitleTrack={setSubtitleTrack}
-                  setSubtitleURL={setSubtitleURL}
-                >
-                  <DropdownView />
-                </VideoProvider>
-              </View>
-            )}
+            <View className="mr-auto">
+              <VideoProvider
+                getAudioTracks={getAudioTracks}
+                getSubtitleTracks={getSubtitleTracks}
+                setAudioTrack={setAudioTrack}
+                setSubtitleTrack={setSubtitleTrack}
+                setSubtitleURL={setSubtitleURL}
+              >
+                {!mediaSource?.TranscodingUrl ? (
+                  <DropdownViewDirect showControls={showControls} />
+                ) : (
+                  <DropdownViewTranscoding showControls={showControls} />
+                )}
+              </VideoProvider>
+            </View>
 
             <View className="flex flex-row items-center space-x-2 ">
               {!Platform.isTV && (
                 <TouchableOpacity
                   onPress={startPictureInPicture}
-                  className="aspect-square flex flex-col rounded-xl items-center justify-center p-2"
                 >
                   <MaterialIcons
                     name="picture-in-picture"
@@ -729,8 +802,8 @@ export const Controls: React.FC<Props> = ({
                     !nextItem
                       ? false
                       : isVlc
-                        ? remainingTime < 10000
-                        : remainingTime < 10
+                      ? remainingTime < 10000
+                      : remainingTime < 10
                   }
                   onFinish={goToNextItem}
                   onPress={goToNextItem}

components/video-player/controls/EpisodeList.tsx

@@ -4,7 +4,6 @@ import {
 } from "@/components/common/HorrizontalScroll";
 import { Text } from "@/components/common/Text";
 import ContinueWatchingPoster from "@/components/ContinueWatchingPoster";
-import { DownloadSingleItem } from "@/components/DownloadItem";
 import { Loader } from "@/components/Loader";
 import {
   SeasonDropdown,
@@ -233,9 +232,6 @@ export const EpisodeList: React.FC<Props> = ({ item, close, goToItem }) => {
                   {runtimeTicksToSeconds(_item.RunTimeTicks)}
                 </Text>
               </View>
-              <View className="self-start mt-2">
-                <DownloadSingleItem item={_item} />
-              </View>
               <Text
                 numberOfLines={5}
                 className="text-xs text-neutral-500 shrink"

components/video-player/controls/contexts/VideoContext.tsx

@@ -1,12 +1,20 @@
 import { TrackInfo } from "@/modules/vlc-player";
-import React, { createContext, useContext, useState, ReactNode, useEffect, useMemo } from "react";
+import {
+  BaseItemDto,
+  MediaSourceInfo,
+} from "@jellyfin/sdk/lib/generated-client";
+import React, {
+  createContext,
+  useContext,
+  useState,
+  ReactNode,
+  useEffect,
+} from "react";
 import { useControlContext } from "./ControlContext";
-import { Track } from "../types";
-import { router, useLocalSearchParams } from "expo-router";
 
 interface VideoContextProps {
-  audioTracks: Track[] | null;
-  subtitleTracks: Track[] | null;
+  audioTracks: TrackInfo[] | null;
+  subtitleTracks: TrackInfo[] | null;
   setAudioTrack: ((index: number) => void) | undefined;
   setSubtitleTrack: ((index: number) => void) | undefined;
   setSubtitleURL: ((url: string, customName: string) => void) | undefined;
@@ -16,8 +24,14 @@ const VideoContext = createContext<VideoContextProps | undefined>(undefined);
 
 interface VideoProviderProps {
   children: ReactNode;
-  getAudioTracks: (() => Promise<TrackInfo[] | null>) | (() => TrackInfo[]) | undefined;
-  getSubtitleTracks: (() => Promise<TrackInfo[] | null>) | (() => TrackInfo[]) | undefined;
+  getAudioTracks:
+    | (() => Promise<TrackInfo[] | null>)
+    | (() => TrackInfo[])
+    | undefined;
+  getSubtitleTracks:
+    | (() => Promise<TrackInfo[] | null>)
+    | (() => TrackInfo[])
+    | undefined;
   setAudioTrack: ((index: number) => void) | undefined;
   setSubtitleTrack: ((index: number) => void) | undefined;
   setSubtitleURL: ((url: string, customName: string) => void) | undefined;
@@ -31,135 +45,30 @@ export const VideoProvider: React.FC<VideoProviderProps> = ({
   setSubtitleURL,
   setAudioTrack,
 }) => {
-  const [audioTracks, setAudioTracks] = useState<Track[] | null>(null);
-  const [subtitleTracks, setSubtitleTracks] = useState<Track[] | null>(null);
+  const [audioTracks, setAudioTracks] = useState<TrackInfo[] | null>(null);
+  const [subtitleTracks, setSubtitleTracks] = useState<TrackInfo[] | null>(
+    null
+  );
 
   const ControlContext = useControlContext();
   const isVideoLoaded = ControlContext?.isVideoLoaded;
-  const mediaSource = ControlContext?.mediaSource;
-
-  const allSubs = mediaSource?.MediaStreams?.filter((s) => s.Type === "Subtitle") || [];
-
-  const { itemId, audioIndex, bitrateValue, subtitleIndex } = useLocalSearchParams<{
-    itemId: string;
-    audioIndex: string;
-    subtitleIndex: string;
-    mediaSourceId: string;
-    bitrateValue: string;
-  }>();
-
-  const onTextBasedSubtitle = useMemo(
-    () =>
-      allSubs.find((s) => s.Index?.toString() === subtitleIndex && s.IsTextSubtitleStream) || subtitleIndex === "-1",
-    [allSubs, subtitleIndex]
-  );
-
-  const setPlayerParams = ({
-    chosenAudioIndex = audioIndex,
-    chosenSubtitleIndex = subtitleIndex,
-  }: {
-    chosenAudioIndex?: string;
-    chosenSubtitleIndex?: string;
-  }) => {
-    console.log("chosenSubtitleIndex", chosenSubtitleIndex);
-    const queryParams = new URLSearchParams({
-      itemId: itemId ?? "",
-      audioIndex: chosenAudioIndex,
-      subtitleIndex: chosenSubtitleIndex,
-      mediaSourceId: mediaSource?.Id ?? "",
-      bitrateValue: bitrateValue,
-    }).toString();
-
-    //@ts-ignore
-    router.replace(`player/direct-player?${queryParams}`);
-  };
-
-  const setTrackParams = (type: "audio" | "subtitle", index: number, serverIndex: number) => {
-    const setTrack = type === "audio" ? setAudioTrack : setSubtitleTrack;
-    const paramKey = type === "audio" ? "audioIndex" : "subtitleIndex";
-
-    // If we're transcoding and we're going from a image based subtitle
-    // to a text based subtitle, we need to change the player params.
-
-    const shouldChangePlayerParams = type === "subtitle" && mediaSource?.TranscodingUrl && !onTextBasedSubtitle;
-
-    console.log("Set player params", index, serverIndex);
-    if (shouldChangePlayerParams) {
-      setPlayerParams({
-        chosenSubtitleIndex: serverIndex.toString(),
-      });
-      return;
-    }
-    setTrack && setTrack(index);
-    router.setParams({
-      [paramKey]: serverIndex.toString(),
-    });
-  };
 
   useEffect(() => {
     const fetchTracks = async () => {
-      if (getSubtitleTracks) {
-        const subtitleData = await getSubtitleTracks();
-
-        // Step 1: Move external subs to the end, because VLC puts external subs at the end
-        const sortedSubs = allSubs.sort((a, b) => Number(a.IsExternal) - Number(b.IsExternal));
-
-        // Step 2: Apply VLC indexing logic
-        let textSubIndex = 0;
-        const processedSubs: Track[] = sortedSubs?.map((sub) => {
-          // Always increment for non-transcoding subtitles
-          // Only increment for text-based subtitles when transcoding
-          const shouldIncrement = !mediaSource?.TranscodingUrl || sub.IsTextSubtitleStream;
-          const vlcIndex = subtitleData?.at(textSubIndex)?.index ?? -1;
-          const finalIndex = shouldIncrement ? vlcIndex : sub.Index ?? -1;
-
-          if (shouldIncrement) textSubIndex++;
-          return {
-            name: sub.DisplayTitle || "Undefined Subtitle",
-            index: sub.Index ?? -1,
-            setTrack: () =>
-              shouldIncrement
-                ? setTrackParams("subtitle", finalIndex, sub.Index ?? -1)
-                : setPlayerParams({
-                    chosenSubtitleIndex: sub.Index?.toString(),
-                  }),
-          };
-        });
-
-        // Step 3: Restore the original order
-        const subtitles: Track[] = processedSubs.sort((a, b) => a.index - b.index);
-
-        // Add a "Disable Subtitles" option
-        subtitles.unshift({
-          name: "Disable",
-          index: -1,
-          setTrack: () =>
-            !mediaSource?.TranscodingUrl || onTextBasedSubtitle
-              ? setTrackParams("subtitle", -1, -1)
-              : setPlayerParams({ chosenSubtitleIndex: "-1" }),
-        });
+      if (
+        getSubtitleTracks &&
+        (subtitleTracks === null || subtitleTracks.length === 0)
+      ) {
+        const subtitles = await getSubtitleTracks();
+        console.log("Getting embeded subtitles...", subtitles);
         setSubtitleTracks(subtitles);
       }
-      if (getAudioTracks) {
-        const audioData = await getAudioTracks();
-
-        const allAudio = mediaSource?.MediaStreams?.filter((s) => s.Type === "Audio") || [];
-        const audioTracks: Track[] = allAudio?.map((audio, idx) => {
-          if (!mediaSource?.TranscodingUrl) {
-            const vlcIndex = audioData?.at(idx)?.index ?? -1;
-            return {
-              name: audio.DisplayTitle ?? "Undefined Audio",
-              index: audio.Index ?? -1,
-              setTrack: () => setTrackParams("audio", vlcIndex, audio.Index ?? -1),
-            };
-          }
-          return {
-            name: audio.DisplayTitle ?? "Undefined Audio",
-            index: audio.Index ?? -1,
-            setTrack: () => setPlayerParams({ chosenAudioIndex: audio.Index?.toString() }),
-          };
-        });
-        setAudioTracks(audioTracks);
+      if (
+        getAudioTracks &&
+        (audioTracks === null || audioTracks.length === 0)
+      ) {
+        const audio = await getAudioTracks();
+        setAudioTracks(audio);
       }
     };
     fetchTracks();

components/video-player/controls/dropdown/DropdownView.tsx

@@ -1,121 +0,0 @@
-import React, { useCallback } from "react";
-import { TouchableOpacity, Platform } from "react-native";
-import { Ionicons } from "@expo/vector-icons";
-const DropdownMenu = !Platform.isTV ? require("zeego/dropdown-menu") : null;
-import { useVideoContext } from "../contexts/VideoContext";
-import { useLocalSearchParams, useRouter } from "expo-router";
-import { BITRATES } from "@/components/BitrateSelector";
-import { useControlContext } from "../contexts/ControlContext";
-
-const DropdownView = () => {
-  const videoContext = useVideoContext();
-  const { subtitleTracks, audioTracks } = videoContext;
-  const ControlContext = useControlContext();
-  const [item, mediaSource] = [ControlContext?.item, ControlContext?.mediaSource];
-  const router = useRouter();
-
-  const { subtitleIndex, audioIndex, bitrateValue } = useLocalSearchParams<{
-    itemId: string;
-    audioIndex: string;
-    subtitleIndex: string;
-    mediaSourceId: string;
-    bitrateValue: string;
-  }>();
-
-  const changeBitrate = useCallback(
-    (bitrate: string) => {
-      const queryParams = new URLSearchParams({
-        itemId: item.Id ?? "",
-        audioIndex: audioIndex?.toString() ?? "",
-        subtitleIndex: subtitleIndex.toString() ?? "",
-        mediaSourceId: mediaSource?.Id ?? "",
-        bitrateValue: bitrate.toString(),
-      }).toString();
-      // @ts-expect-error
-      router.replace(`player/direct-player?${queryParams}`);
-    },
-    [item, mediaSource, subtitleIndex, audioIndex]
-  );
-
-  return (
-    <DropdownMenu.Root>
-      <DropdownMenu.Trigger>
-        <TouchableOpacity className="aspect-square flex flex-col rounded-xl items-center justify-center p-2">
-          <Ionicons name="ellipsis-horizontal" size={24} color={"white"} />
-        </TouchableOpacity>
-      </DropdownMenu.Trigger>
-      <DropdownMenu.Content
-        loop={true}
-        side="bottom"
-        align="start"
-        alignOffset={0}
-        avoidCollisions={true}
-        collisionPadding={8}
-        sideOffset={8}
-      >
-        <DropdownMenu.Sub>
-          <DropdownMenu.SubTrigger key="qualitytrigger">Quality</DropdownMenu.SubTrigger>
-          <DropdownMenu.SubContent
-            alignOffset={-10}
-            avoidCollisions={true}
-            collisionPadding={0}
-            loop={true}
-            sideOffset={10}
-          >
-            {BITRATES?.map((bitrate, idx: number) => (
-              <DropdownMenu.CheckboxItem
-                key={`quality-item-${idx}`}
-                value={bitrateValue === (bitrate.value?.toString() ?? "")}
-                onValueChange={() => changeBitrate(bitrate.value?.toString() ?? "")}
-              >
-                <DropdownMenu.ItemTitle key={`audio-item-title-${idx}`}>{bitrate.key}</DropdownMenu.ItemTitle>
-              </DropdownMenu.CheckboxItem>
-            ))}
-          </DropdownMenu.SubContent>
-        </DropdownMenu.Sub>
-        <DropdownMenu.Sub>
-          <DropdownMenu.SubTrigger key="subtitle-trigger">Subtitle</DropdownMenu.SubTrigger>
-          <DropdownMenu.SubContent
-            alignOffset={-10}
-            avoidCollisions={true}
-            collisionPadding={0}
-            loop={true}
-            sideOffset={10}
-          >
-            {subtitleTracks?.map((sub, idx: number) => (
-              <DropdownMenu.CheckboxItem
-                key={`subtitle-item-${idx}`}
-                value={subtitleIndex === sub.index.toString()}
-                onValueChange={() => sub.setTrack()}
-              >
-                <DropdownMenu.ItemTitle key={`subtitle-item-title-${idx}`}>{sub.name}</DropdownMenu.ItemTitle>
-              </DropdownMenu.CheckboxItem>
-            ))}
-          </DropdownMenu.SubContent>
-        </DropdownMenu.Sub>
-        <DropdownMenu.Sub>
-          <DropdownMenu.SubTrigger key="audio-trigger">Audio</DropdownMenu.SubTrigger>
-          <DropdownMenu.SubContent
-            alignOffset={-10}
-            avoidCollisions={true}
-            collisionPadding={0}
-            loop={true}
-            sideOffset={10}
-          >
-            {audioTracks?.map((track, idx: number) => (
-              <DropdownMenu.CheckboxItem
-                key={`audio-item-${idx}`}
-                value={audioIndex === track.index.toString()}
-                onValueChange={() => track.setTrack()}
-              >
-                <DropdownMenu.ItemTitle key={`audio-item-title-${idx}`}>{track.name}</DropdownMenu.ItemTitle>
-              </DropdownMenu.CheckboxItem>
-            ))}
-          </DropdownMenu.SubContent>
-        </DropdownMenu.Sub>
-      </DropdownMenu.Content>
-    </DropdownMenu.Root>
-  );
-};
-
-export default DropdownView;

components/video-player/controls/dropdown/DropdownViewDirect.tsx

@@ -0,0 +1,158 @@
+import React, { useMemo, useState } from "react";
+import { View, TouchableOpacity, Platform } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+const DropdownMenu = !Platform.isTV ? require("zeego/dropdown-menu") : null;
+import { useControlContext } from "../contexts/ControlContext";
+import { useVideoContext } from "../contexts/VideoContext";
+import { EmbeddedSubtitle, ExternalSubtitle } from "../types";
+import { useAtomValue } from "jotai";
+import { apiAtom } from "@/providers/JellyfinProvider";
+import { router, useLocalSearchParams } from "expo-router";
+
+interface DropdownViewDirectProps {
+  showControls: boolean;
+  offline?: boolean; // used to disable external subs for downloads
+}
+
+const DropdownViewDirect: React.FC<DropdownViewDirectProps> = ({
+  showControls,
+  offline = false,
+}) => {
+  const api = useAtomValue(apiAtom);
+  const ControlContext = useControlContext();
+  const mediaSource = ControlContext?.mediaSource;
+  const item = ControlContext?.item;
+  const isVideoLoaded = ControlContext?.isVideoLoaded;
+
+  const videoContext = useVideoContext();
+  const {
+    subtitleTracks,
+    audioTracks,
+    setSubtitleURL,
+    setSubtitleTrack,
+    setAudioTrack,
+  } = videoContext;
+
+  const allSubtitleTracksForDirectPlay = useMemo(() => {
+    if (mediaSource?.TranscodingUrl) return null;
+    const embeddedSubs =
+      subtitleTracks
+        ?.map((s) => ({
+          name: s.name,
+          index: s.index,
+          deliveryUrl: undefined,
+        }))
+        .filter((sub) => !sub.name.endsWith("[External]")) || [];
+
+    const externalSubs =
+      mediaSource?.MediaStreams?.filter(
+        (stream) => stream.Type === "Subtitle" && !!stream.DeliveryUrl
+      ).map((s) => ({
+        name: s.DisplayTitle! + " [External]",
+        index: s.Index!,
+        deliveryUrl: s.DeliveryUrl,
+      })) || [];
+
+    // Combine embedded subs with external subs only if not offline
+    if (!offline) {
+      return [...embeddedSubs, ...externalSubs] as (
+        | EmbeddedSubtitle
+        | ExternalSubtitle
+      )[];
+    }
+    return embeddedSubs as EmbeddedSubtitle[];
+  }, [item, isVideoLoaded, subtitleTracks, mediaSource?.MediaStreams, offline]);
+
+  const { subtitleIndex, audioIndex } = useLocalSearchParams<{
+    itemId: string;
+    audioIndex: string;
+    subtitleIndex: string;
+    mediaSourceId: string;
+    bitrateValue: string;
+  }>();
+
+  return (
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger>
+        <TouchableOpacity className="aspect-square flex flex-col rounded-xl items-center justify-center p-2">
+          <Ionicons name="ellipsis-horizontal" size={24} color={"white"} />
+        </TouchableOpacity>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content
+        loop={true}
+        side="bottom"
+        align="start"
+        alignOffset={0}
+        avoidCollisions={true}
+        collisionPadding={8}
+        sideOffset={8}
+      >
+        <DropdownMenu.Sub>
+          <DropdownMenu.SubTrigger key="subtitle-trigger">
+            Subtitle
+          </DropdownMenu.SubTrigger>
+          <DropdownMenu.SubContent
+            alignOffset={-10}
+            avoidCollisions={true}
+            collisionPadding={0}
+            loop={true}
+            sideOffset={10}
+          >
+            {allSubtitleTracksForDirectPlay?.map((sub, idx: number) => (
+              <DropdownMenu.CheckboxItem
+                key={`subtitle-item-${idx}`}
+                value={subtitleIndex === sub.index.toString()}
+                onValueChange={() => {
+                  if ("deliveryUrl" in sub && sub.deliveryUrl) {
+                    setSubtitleURL &&
+                      setSubtitleURL(api?.basePath + sub.deliveryUrl, sub.name);
+                  } else {
+                    setSubtitleTrack && setSubtitleTrack(sub.index);
+                  }
+                  router.setParams({
+                    subtitleIndex: sub.index.toString(),
+                  });
+                }}
+              >
+                <DropdownMenu.ItemTitle key={`subtitle-item-title-${idx}`}>
+                  {sub.name}
+                </DropdownMenu.ItemTitle>
+              </DropdownMenu.CheckboxItem>
+            ))}
+          </DropdownMenu.SubContent>
+        </DropdownMenu.Sub>
+        <DropdownMenu.Sub>
+          <DropdownMenu.SubTrigger key="audio-trigger">
+            Audio
+          </DropdownMenu.SubTrigger>
+          <DropdownMenu.SubContent
+            alignOffset={-10}
+            avoidCollisions={true}
+            collisionPadding={0}
+            loop={true}
+            sideOffset={10}
+          >
+            {audioTracks?.map((track, idx: number) => (
+              <DropdownMenu.CheckboxItem
+                key={`audio-item-${idx}`}
+                value={audioIndex === track.index.toString()}
+                onValueChange={() => {
+                  setAudioTrack && setAudioTrack(track.index);
+                  router.setParams({
+                    audioIndex: track.index.toString(),
+                  });
+                }}
+              >
+                <DropdownMenu.ItemTitle key={`audio-item-title-${idx}`}>
+                  {track.name}
+                </DropdownMenu.ItemTitle>
+              </DropdownMenu.CheckboxItem>
+            ))}
+          </DropdownMenu.SubContent>
+        </DropdownMenu.Sub>
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
+  );
+};
+
+export default DropdownViewDirect;

components/video-player/controls/dropdown/DropdownViewTranscoding.tsx

@@ -0,0 +1,228 @@
+import React, { useCallback, useMemo, useState } from "react";
+import { View, TouchableOpacity, Platform } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+const DropdownMenu = !Platform.isTV ? require("zeego/dropdown-menu") : null;
+import { useControlContext } from "../contexts/ControlContext";
+import { useVideoContext } from "../contexts/VideoContext";
+import { TranscodedSubtitle } from "../types";
+import { useAtomValue } from "jotai";
+import { apiAtom } from "@/providers/JellyfinProvider";
+import { useLocalSearchParams, useRouter } from "expo-router";
+import { SubtitleHelper } from "@/utils/SubtitleHelper";
+
+interface DropdownViewProps {
+  showControls: boolean;
+  offline?: boolean; // used to disable external subs for downloads
+}
+
+const DropdownView: React.FC<DropdownViewProps> = ({ showControls }) => {
+  const router = useRouter();
+  const api = useAtomValue(apiAtom);
+  const ControlContext = useControlContext();
+  const mediaSource = ControlContext?.mediaSource;
+  const item = ControlContext?.item;
+  const isVideoLoaded = ControlContext?.isVideoLoaded;
+
+  const videoContext = useVideoContext();
+  const { subtitleTracks, setSubtitleTrack } = videoContext;
+
+  const { subtitleIndex, audioIndex, bitrateValue } = useLocalSearchParams<{
+    itemId: string;
+    audioIndex: string;
+    subtitleIndex: string;
+    mediaSourceId: string;
+    bitrateValue: string;
+  }>();
+
+  // Either its on a text subtitle or its on not on any subtitle therefore it should show all the embedded HLS subtitles.
+
+  const isOnTextSubtitle = useMemo(() => {
+    const res = Boolean(
+      mediaSource?.MediaStreams?.find(
+        (x) => x.Index === parseInt(subtitleIndex) && x.IsTextSubtitleStream
+      ) || subtitleIndex === "-1"
+    );
+    return res;
+  }, []);
+
+  const allSubs =
+    mediaSource?.MediaStreams?.filter((x) => x.Type === "Subtitle") ?? [];
+
+  const subtitleHelper = new SubtitleHelper(mediaSource?.MediaStreams ?? []);
+
+  const allSubtitleTracksForTranscodingStream = useMemo(() => {
+    const disableSubtitle = {
+      name: "Disable",
+      index: -1,
+      IsTextSubtitleStream: true,
+    } as TranscodedSubtitle;
+    if (isOnTextSubtitle) {
+      const textSubtitles =
+        subtitleTracks?.map((s) => ({
+          name: s.name,
+          index: s.index,
+          IsTextSubtitleStream: true,
+        })) || [];
+
+      const sortedSubtitles = subtitleHelper.getSortedSubtitles(textSubtitles);
+
+      return [disableSubtitle, ...sortedSubtitles];
+    }
+
+    const transcodedSubtitle: TranscodedSubtitle[] = allSubs.map((x) => ({
+      name: x.DisplayTitle!,
+      index: x.Index!,
+      IsTextSubtitleStream: x.IsTextSubtitleStream!,
+    }));
+
+    return [disableSubtitle, ...transcodedSubtitle];
+  }, [item, isVideoLoaded, subtitleTracks, mediaSource?.MediaStreams]);
+
+  const changeToImageBasedSub = useCallback(
+    (subtitleIndex: number) => {
+      const queryParams = new URLSearchParams({
+        itemId: item.Id ?? "", // Ensure itemId is a string
+        audioIndex: audioIndex?.toString() ?? "",
+        subtitleIndex: subtitleIndex?.toString() ?? "",
+        mediaSourceId: mediaSource?.Id ?? "", // Ensure mediaSourceId is a string
+        bitrateValue: bitrateValue,
+      }).toString();
+
+      // @ts-expect-error
+      router.replace(`player/transcoding-player?${queryParams}`);
+    },
+    [mediaSource]
+  );
+
+  // Audio tracks for transcoding streams.
+  const allAudio =
+    mediaSource?.MediaStreams?.filter((x) => x.Type === "Audio").map((x) => ({
+      name: x.DisplayTitle!,
+      index: x.Index!,
+    })) || [];
+
+  const ChangeTranscodingAudio = useCallback(
+    (audioIndex: number) => {
+      const queryParams = new URLSearchParams({
+        itemId: item.Id ?? "", // Ensure itemId is a string
+        audioIndex: audioIndex?.toString() ?? "",
+        subtitleIndex: subtitleIndex?.toString() ?? "",
+        mediaSourceId: mediaSource?.Id ?? "", // Ensure mediaSourceId is a string
+        bitrateValue: bitrateValue,
+      }).toString();
+
+      // @ts-expect-error
+      router.replace(`player/transcoding-player?${queryParams}`);
+    },
+    [mediaSource, subtitleIndex, audioIndex]
+  );
+
+  return (
+    <View>
+      <DropdownMenu.Root>
+        <DropdownMenu.Trigger>
+          <TouchableOpacity className="aspect-square flex flex-col rounded-xl items-center justify-center p-2">
+            <Ionicons name="ellipsis-horizontal" size={24} color={"white"} />
+          </TouchableOpacity>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content
+          loop={true}
+          side="bottom"
+          align="start"
+          alignOffset={0}
+          avoidCollisions={true}
+          collisionPadding={8}
+          sideOffset={8}
+        >
+          <DropdownMenu.Sub>
+            <DropdownMenu.SubTrigger key="subtitle-trigger">
+              Subtitle
+            </DropdownMenu.SubTrigger>
+            <DropdownMenu.SubContent
+              alignOffset={-10}
+              avoidCollisions={true}
+              collisionPadding={0}
+              loop={true}
+              sideOffset={10}
+            >
+              {allSubtitleTracksForTranscodingStream?.map(
+                (sub, idx: number) => (
+                  <DropdownMenu.CheckboxItem
+                    value={
+                      subtitleIndex ===
+                      (isOnTextSubtitle && sub.IsTextSubtitleStream
+                        ? subtitleHelper
+                            .getSourceSubtitleIndex(sub.index)
+                            .toString()
+                        : sub?.index.toString())
+                    }
+                    key={`subtitle-item-${idx}`}
+                    onValueChange={() => {
+                      if (
+                        subtitleIndex ===
+                        (isOnTextSubtitle && sub.IsTextSubtitleStream
+                          ? subtitleHelper
+                              .getSourceSubtitleIndex(sub.index)
+                              .toString()
+                          : sub?.index.toString())
+                      )
+                        return;
+
+                      router.setParams({
+                        subtitleIndex: subtitleHelper
+                          .getSourceSubtitleIndex(sub.index)
+                          .toString(),
+                      });
+
+                      if (sub.IsTextSubtitleStream && isOnTextSubtitle) {
+                        setSubtitleTrack && setSubtitleTrack(sub.index);
+                        return;
+                      }
+                      changeToImageBasedSub(sub.index);
+                    }}
+                  >
+                    <DropdownMenu.ItemTitle key={`subtitle-item-title-${idx}`}>
+                      {sub.name}
+                    </DropdownMenu.ItemTitle>
+                  </DropdownMenu.CheckboxItem>
+                )
+              )}
+            </DropdownMenu.SubContent>
+          </DropdownMenu.Sub>
+          <DropdownMenu.Sub>
+            <DropdownMenu.SubTrigger key="audio-trigger">
+              Audio
+            </DropdownMenu.SubTrigger>
+            <DropdownMenu.SubContent
+              alignOffset={-10}
+              avoidCollisions={true}
+              collisionPadding={0}
+              loop={true}
+              sideOffset={10}
+            >
+              {allAudio?.map((track, idx: number) => (
+                <DropdownMenu.CheckboxItem
+                  key={`audio-item-${idx}`}
+                  value={audioIndex === track.index.toString()}
+                  onValueChange={() => {
+                    if (audioIndex === track.index.toString()) return;
+                    router.setParams({
+                      audioIndex: track.index.toString(),
+                    });
+                    ChangeTranscodingAudio(track.index);
+                  }}
+                >
+                  <DropdownMenu.ItemTitle key={`audio-item-title-${idx}`}>
+                    {track.name}
+                  </DropdownMenu.ItemTitle>
+                </DropdownMenu.CheckboxItem>
+              ))}
+            </DropdownMenu.SubContent>
+          </DropdownMenu.Sub>
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
+    </View>
+  );
+};
+
+export default DropdownView;

components/video-player/controls/types.ts

@@ -13,14 +13,7 @@ type ExternalSubtitle = {
 type TranscodedSubtitle = {
   name: string;
   index: number;
-  deliveryUrl: string;
   IsTextSubtitleStream: boolean;
 };
 
-type Track = {
-  name: string;
-  index: number;
-  setTrack: () => void;
-};
-
-export { EmbeddedSubtitle, ExternalSubtitle, TranscodedSubtitle, Track };
+export { EmbeddedSubtitle, ExternalSubtitle, TranscodedSubtitle };

eas.json

@@ -32,20 +32,20 @@
       }
     },
     "production": {
-      "channel": "0.27.0",
+      "channel": "0.26.1",
       "android": {
         "image": "latest"
       }
     },
     "production-apk": {
-      "channel": "0.27.0",
+      "channel": "0.26.1",
       "android": {
         "buildType": "apk",
         "image": "latest"
       }
     },
     "production-apk-tv": {
-      "channel": "0.27.0",
+      "channel": "0.26.1",
       "android": {
         "buildType": "apk",
         "image": "latest"

hooks/useDownloadedFileOpener.ts

@@ -1,48 +0,0 @@
-import { usePlaySettings } from "@/providers/PlaySettingsProvider";
-import { writeToLog } from "@/utils/log";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
-import * as FileSystem from "expo-file-system";
-import { useRouter } from "expo-router";
-import { useCallback } from "react";
-
-export const getDownloadedFileUrl = async (itemId: string): Promise<string> => {
-  const directory = FileSystem.documentDirectory;
-
-  if (!directory) {
-    throw new Error("Document directory is not available");
-  }
-
-  if (!itemId) {
-    throw new Error("Item ID is not available");
-  }
-
-  const files = await FileSystem.readDirectoryAsync(directory);
-  const path = itemId!;
-  const matchingFile = files.find((file) => file.startsWith(path));
-
-  if (!matchingFile) {
-    throw new Error(`No file found for item ${path}`);
-  }
-
-  return `${directory}${matchingFile}`;
-};
-
-export const useDownloadedFileOpener = () => {
-  const router = useRouter();
-  const { setPlayUrl, setOfflineSettings } = usePlaySettings();
-
-  const openFile = useCallback(
-    async (item: BaseItemDto) => {
-      try {
-        // @ts-expect-error
-        router.push("/player/direct-player?offline=true&itemId=" + item.Id);
-      } catch (error) {
-        writeToLog("ERROR", "Error opening file", error);
-        console.error("Error opening file:", error);
-      }
-    },
-    [setOfflineSettings, setPlayUrl, router]
-  );
-
-  return { openFile };
-};

hooks/useFavorite.ts

@@ -1,109 +0,0 @@
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
-import { getUserLibraryApi } from "@jellyfin/sdk/lib/utils/api";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { useAtom } from "jotai";
-import { useEffect, useState, useMemo } from "react";
-
-export const useFavorite = (item: BaseItemDto) => {
-  const queryClient = useQueryClient();
-  const [api] = useAtom(apiAtom);
-  const [user] = useAtom(userAtom);
-  const type = "item";
-  const [isFavorite, setIsFavorite] = useState(item.UserData?.IsFavorite);
-
-  useEffect(() => {
-    setIsFavorite(item.UserData?.IsFavorite);
-  }, [item.UserData?.IsFavorite]);
-
-  const updateItemInQueries = (newData: Partial<BaseItemDto>) => {
-    queryClient.setQueryData<BaseItemDto | undefined>(
-      [type, item.Id],
-      (old) => {
-        if (!old) return old;
-        return {
-          ...old,
-          ...newData,
-          UserData: { ...old.UserData, ...newData.UserData },
-        };
-      }
-    );
-  };
-
-  const markFavoriteMutation = useMutation({
-    mutationFn: async () => {
-      if (api && user) {
-        await getUserLibraryApi(api).markFavoriteItem({
-          userId: user.Id,
-          itemId: item.Id!,
-        });
-      }
-    },
-    onMutate: async () => {
-      await queryClient.cancelQueries({ queryKey: [type, item.Id] });
-      const previousItem = queryClient.getQueryData<BaseItemDto>([
-        type,
-        item.Id,
-      ]);
-      updateItemInQueries({ UserData: { IsFavorite: true } });
-
-      return { previousItem };
-    },
-    onError: (err, variables, context) => {
-      if (context?.previousItem) {
-        queryClient.setQueryData([type, item.Id], context.previousItem);
-      }
-    },
-    onSettled: () => {
-      queryClient.invalidateQueries({ queryKey: [type, item.Id] });
-      queryClient.invalidateQueries({ queryKey: ["home", "favorites"] });
-      setIsFavorite(true);
-    },
-  });
-
-  const unmarkFavoriteMutation = useMutation({
-    mutationFn: async () => {
-      if (api && user) {
-        await getUserLibraryApi(api).unmarkFavoriteItem({
-          userId: user.Id,
-          itemId: item.Id!,
-        });
-      }
-    },
-    onMutate: async () => {
-      await queryClient.cancelQueries({ queryKey: [type, item.Id] });
-      const previousItem = queryClient.getQueryData<BaseItemDto>([
-        type,
-        item.Id,
-      ]);
-      updateItemInQueries({ UserData: { IsFavorite: false } });
-
-      return { previousItem };
-    },
-    onError: (err, variables, context) => {
-      if (context?.previousItem) {
-        queryClient.setQueryData([type, item.Id], context.previousItem);
-      }
-    },
-    onSettled: () => {
-      queryClient.invalidateQueries({ queryKey: [type, item.Id] });
-      queryClient.invalidateQueries({ queryKey: ["home", "favorites"] });
-      setIsFavorite(false);
-    },
-  });
-
-  const toggleFavorite = () => {
-    if (isFavorite) {
-      unmarkFavoriteMutation.mutate();
-    } else {
-      markFavoriteMutation.mutate();
-    }
-  };
-
-  return {
-    isFavorite,
-    toggleFavorite,
-    markFavoriteMutation,
-    unmarkFavoriteMutation,
-  };
-};

hooks/useJellyseerr.ts

@@ -449,23 +449,12 @@ export const useJellyseerr = () => {
     );
   };
 
-  const jellyseerrRegion = useMemo(
-    () => jellyseerrUser?.settings?.region || "US",
-    [jellyseerrUser]
-  );
-
-  const jellyseerrLocale = useMemo(() => {
-    return jellyseerrUser?.settings?.locale || "en";
-  }, [jellyseerrUser]);
-
   return {
     jellyseerrApi,
     jellyseerrUser,
     setJellyseerrUser,
     clearAllJellyseerData,
     isJellyseerrResult,
-    jellyseerrRegion,
-    jellyseerrLocale,
     requestMedia,
   };
 };

hooks/useRemuxHlsToMp4.ts

@@ -1,231 +0,0 @@
-import { useDownload } from "@/providers/DownloadProvider";
-import { apiAtom } from "@/providers/JellyfinProvider";
-import { getItemImage } from "@/utils/getItemImage";
-import { writeErrorLog, writeInfoLog, writeToLog } from "@/utils/log";
-import {
-  BaseItemDto,
-  MediaSourceInfo,
-} from "@jellyfin/sdk/lib/generated-client/models";
-import { useQueryClient } from "@tanstack/react-query";
-import * as FileSystem from "expo-file-system";
-import { useRouter } from "expo-router";
-
-// import { FFmpegKit, FFmpegSession, Statistics } from "ffmpeg-kit-react-native";
-const FFMPEGKitReactNative = !Platform.isTV
-  ? require("ffmpeg-kit-react-native")
-  : null;
-import { useAtomValue } from "jotai";
-import { useCallback } from "react";
-import { toast } from "sonner-native";
-import useImageStorage from "./useImageStorage";
-import useDownloadHelper from "@/utils/download";
-import { Api } from "@jellyfin/sdk";
-import { useSettings } from "@/utils/atoms/settings";
-import { JobStatus } from "@/utils/optimize-server";
-import { Platform } from "react-native";
-import { useTranslation } from "react-i18next";
-
-type FFmpegSession = typeof FFMPEGKitReactNative.FFmpegSession;
-type Statistics = typeof FFMPEGKitReactNative.Statistics;
-const FFmpegKit = Platform.isTV
-  ? null
-  : (FFMPEGKitReactNative.FFmpegKit as typeof FFMPEGKitReactNative.FFmpegKit);
-const createFFmpegCommand = (url: string, output: string) => [
-  "-y", // overwrite output files without asking
-  "-thread_queue_size 512", // https://ffmpeg.org/ffmpeg.html#toc-Advanced-options
-
-  // region ffmpeg protocol commands                    // https://ffmpeg.org/ffmpeg-protocols.html
-  "-protocol_whitelist file,http,https,tcp,tls,crypto", // whitelist
-  "-multiple_requests 1", // http
-  "-tcp_nodelay 1", // http
-  // endregion ffmpeg protocol commands
-
-  "-fflags +genpts", // format flags
-  `-i ${url}`, // infile
-  "-map 0:v -map 0:a", // select all streams for video & audio
-  "-c copy", // streamcopy, preventing transcoding
-  "-bufsize 25M", // amount of data processed before calculating current bitrate
-  "-max_muxing_queue_size 4096", // sets the size of stream buffer in packets for output
-  output,
-];
-
-/**
- * Custom hook for remuxing HLS to MP4 using FFmpeg.
- *
- * @param url - The URL of the HLS stream
- * @param item - The BaseItemDto object representing the media item
- * @returns An object with remuxing-related functions
- */
-export const useRemuxHlsToMp4 = () => {
-  const api = useAtomValue(apiAtom);
-  const router = useRouter();
-  const queryClient = useQueryClient();
-  const { t } = useTranslation();
-
-  const [settings] = useSettings();
-  const { saveImage } = useImageStorage();
-  const { saveSeriesPrimaryImage } = useDownloadHelper();
-  const {
-    saveDownloadedItemInfo,
-    setProcesses,
-    processes,
-    APP_CACHE_DOWNLOAD_DIRECTORY,
-  } = useDownload();
-
-  const onSaveAssets = async (api: Api, item: BaseItemDto) => {
-    await saveSeriesPrimaryImage(item);
-    const itemImage = getItemImage({
-      item,
-      api,
-      variant: "Primary",
-      quality: 90,
-      width: 500,
-    });
-
-    await saveImage(item.Id, itemImage?.uri);
-  };
-
-  const completeCallback = useCallback(
-    async (session: FFmpegSession, item: BaseItemDto) => {
-      try {
-        console.log("completeCallback");
-        const returnCode = await session.getReturnCode();
-
-        if (returnCode.isValueSuccess()) {
-          const stat = await session.getLastReceivedStatistics();
-          await FileSystem.moveAsync({
-            from: `${APP_CACHE_DOWNLOAD_DIRECTORY}${item.Id}.mp4`,
-            to: `${FileSystem.documentDirectory}${item.Id}.mp4`,
-          });
-          await queryClient.invalidateQueries({
-            queryKey: ["downloadedItems"],
-          });
-          saveDownloadedItemInfo(item, stat.getSize());
-          toast.success(t("home.downloads.toasts.download_completed"));
-        }
-
-        setProcesses((prev: any[]) => {
-          return prev.filter(
-            (process: { itemId: string | undefined }) =>
-              process.itemId !== item.Id
-          );
-        });
-      } catch (e) {
-        console.error(e);
-      }
-
-      console.log("completeCallback ~ end");
-    },
-    [processes, setProcesses]
-  );
-
-  const statisticsCallback = useCallback(
-    (statistics: Statistics, item: BaseItemDto) => {
-      const videoLength =
-        (item.MediaSources?.[0]?.RunTimeTicks || 0) / 10000000; // In seconds
-      const fps = item.MediaStreams?.[0]?.RealFrameRate || 25;
-      const totalFrames = videoLength * fps;
-      const processedFrames = statistics.getVideoFrameNumber();
-      const speed = statistics.getSpeed();
-
-      const percentage =
-        totalFrames > 0 ? Math.floor((processedFrames / totalFrames) * 100) : 0;
-
-      if (!item.Id) throw new Error("Item is undefined");
-      setProcesses((prev: any[]) => {
-        return prev.map((process: { itemId: string | undefined }) => {
-          if (process.itemId === item.Id) {
-            return {
-              ...process,
-              id: statistics.getSessionId().toString(),
-              progress: percentage,
-              speed: Math.max(speed, 0),
-            };
-          }
-          return process;
-        });
-      });
-    },
-    [setProcesses, completeCallback]
-  );
-
-  const startRemuxing = useCallback(
-    async (item: BaseItemDto, url: string, mediaSource: MediaSourceInfo) => {
-      const cacheDir = await FileSystem.getInfoAsync(
-        APP_CACHE_DOWNLOAD_DIRECTORY
-      );
-      if (!cacheDir.exists) {
-        await FileSystem.makeDirectoryAsync(APP_CACHE_DOWNLOAD_DIRECTORY, {
-          intermediates: true,
-        });
-      }
-
-      const output = APP_CACHE_DOWNLOAD_DIRECTORY + `${item.Id}.mp4`;
-
-      if (!api) throw new Error("API is not defined");
-      if (!item.Id) throw new Error("Item must have an Id");
-
-      // First lets save any important assets we want to present to the user offline
-      await onSaveAssets(api, item);
-
-      toast.success(
-        t("home.downloads.toasts.download_started_for", { item: item.Name }),
-        {
-          action: {
-            label: "Go to download",
-            onClick: () => {
-              router.push("/downloads");
-              toast.dismiss();
-            },
-          },
-        }
-      );
-
-      try {
-        const job: JobStatus = {
-          id: "",
-          deviceId: "",
-          inputUrl: url,
-          item: item,
-          itemId: item.Id!,
-          outputPath: output,
-          progress: 0,
-          status: "downloading",
-          timestamp: new Date(),
-        };
-
-        writeInfoLog(`useRemuxHlsToMp4 ~ startRemuxing for item ${item.Name}`);
-        setProcesses((prev: any) => [...prev, job]);
-
-        await FFmpegKit.executeAsync(
-          createFFmpegCommand(url, output).join(" "),
-          (session: any) => completeCallback(session, item),
-          undefined,
-          (s: any) => statisticsCallback(s, item)
-        );
-      } catch (e) {
-        const error = e as Error;
-        console.error("Failed to remux:", error);
-        writeErrorLog(
-          `useRemuxHlsToMp4 ~ remuxing failed for item: ${item.Name}, 
-          Error: ${error.message}, Stack: ${error.stack}`
-        );
-        setProcesses((prev: any[]) => {
-          return prev.filter(
-            (process: { itemId: string | undefined }) =>
-              process.itemId !== item.Id
-          );
-        });
-        throw error; // Re-throw the error to propagate it to the caller
-      }
-    },
-    [settings, processes, setProcesses, completeCallback, statisticsCallback]
-  );
-
-  const cancelRemuxing = useCallback(() => {
-    FFmpegKit.cancel();
-    setProcesses([]);
-  }, []);
-
-  return { startRemuxing, cancelRemuxing };
-};

hooks/useSessions.ts

@@ -1,39 +0,0 @@
-import { useQuery } from "@tanstack/react-query";
-import { apiAtom } from "@/providers/JellyfinProvider";
-import { useAtom } from "jotai";
-import { getSessionApi } from "@jellyfin/sdk/lib/utils/api/session-api";
-import { userAtom } from "@/providers/JellyfinProvider";
-import { Platform } from "react-native";
-const Notifications = !Platform.isTV ? require("expo-notifications") : null;
-
-export interface useSessionsProps {
-  refetchInterval: number;
-  activeWithinSeconds: number;
-}
-
-export const useSessions = ({ refetchInterval = 5 * 1000, activeWithinSeconds = 360 }: useSessionsProps) => {
-  const [api] = useAtom(apiAtom);
-  const [user] = useAtom(userAtom);
-
-  const { data, isLoading } = useQuery({
-    queryKey: ["sessions"],
-    queryFn: async () => {
-      if (!api || !user || !user.Policy?.IsAdministrator) {
-        return [];
-      }
-      const response = await getSessionApi(api).getSessions({
-        activeWithinSeconds: activeWithinSeconds,
-      });
-      
-      const result = response.data
-        .filter((s) => s.NowPlayingItem)
-        .sort((a, b) => (b.NowPlayingItem?.Name ?? "").localeCompare(a.NowPlayingItem?.Name ?? ""));
-      
-      Notifications.setBadgeCountAsync(result.length);
-      return result
-    },
-    refetchInterval: refetchInterval,
-  });
-
-  return { sessions: data, isLoading };
-};

i18n.ts

@@ -5,12 +5,7 @@ import de from "./translations/de.json";
 import en from "./translations/en.json";
 import es from "./translations/es.json";
 import fr from "./translations/fr.json";
-import it from "./translations/it.json";
-import ja from "./translations/ja.json";
-import nl from "./translations/nl.json";
 import sv from "./translations/sv.json";
-import zhCN from './translations/zh-CN.json';
-import zhTW from './translations/zh-TW.json';
 import { getLocales } from "expo-localization";
 
 export const APP_LANGUAGES = [
@@ -18,12 +13,7 @@ export const APP_LANGUAGES = [
   { label: "English", value: "en" },
   { label: "Español", value: "es" },
   { label: "Français", value: "fr" },
-  { label: "Italiano", value: "it" },
-  { label: "日本語", value: "ja" },
-  { label: "Nederlands", value: "nl" },
   { label: "Svenska", value: "sv" },
-  { label: "简体中文", value: "zh-CN" },
-  { label: "繁體中文", value: "zh-TW" },
 ];
 
 i18n.use(initReactI18next).init({
@@ -33,12 +23,7 @@ i18n.use(initReactI18next).init({
     en: { translation: en },
     es: { translation: es },
     fr: { translation: fr },
-    it: { translation: it },
-    ja: { translation: ja },
-    nl: { translation: nl },
     sv: { translation: sv },
-    "zh-CN": { translation: zhCN },
-    "zh-TW": { translation: zhTW },
   },
 
   lng: getLocales()[0].languageCode || "en",

login.yaml

@@ -1,6 +0,0 @@
-# login.yaml
-
-appId: your.app.id
----
-- launchApp
-- tapOn: "Text on the screen"

modules/hls-downloader/android/build.gradle

@@ -0,0 +1,87 @@
+plugins {
+    id 'com.android.library'
+    id 'kotlin-android'
+    id 'kotlin-kapt'
+}
+
+group = 'expo.modules.hlsdownloader'
+version = '0.1.0'
+
+def expoModulesCorePlugin = new File(project(":expo-modules-core").projectDir.absolutePath, "ExpoModulesCorePlugin.gradle")
+def kotlinVersion = findProperty('android.kotlinVersion') ?: '1.9.25'
+
+apply from: expoModulesCorePlugin
+applyKotlinExpoModulesCorePlugin()
+useCoreDependencies()
+useExpoPublishing()
+
+def useManagedAndroidSdkVersions = false
+
+if (useManagedAndroidSdkVersions) {
+    useDefaultAndroidSdkVersions()
+} else {
+    buildscript {
+        repositories {
+            google()
+            mavenCentral()
+        }
+        dependencies {
+            classpath "com.android.tools.build:gradle:7.1.3"
+        }
+    }
+
+    project.android {
+        compileSdkVersion safeExtGet("compileSdkVersion", 34)
+        defaultConfig {
+            minSdkVersion safeExtGet("minSdkVersion", 21)
+            targetSdkVersion safeExtGet("targetSdkVersion", 34)
+        }
+    }
+}
+
+dependencies {
+    implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlinVersion"
+    
+    // Media3 dependencies
+    def media3_version = "1.2.1"
+    implementation "androidx.media3:media3-exoplayer:$media3_version"
+    implementation "androidx.media3:media3-exoplayer-hls:$media3_version"
+    implementation "androidx.media3:media3-exoplayer-dash:$media3_version"
+    implementation "androidx.media3:media3-database:$media3_version"
+    implementation "androidx.media3:media3-datasource:$media3_version"
+}
+
+android {
+    namespace "expo.modules.hlsdownloader"
+    compileSdkVersion 34
+    
+    defaultConfig {
+        minSdkVersion 21
+        targetSdkVersion 34
+        versionCode 1
+        versionName "0.1.0"
+    }
+
+    compileOptions {
+        sourceCompatibility JavaVersion.VERSION_17
+        targetCompatibility JavaVersion.VERSION_17
+    }
+
+    kotlinOptions {
+        jvmTarget = "17"
+    }
+
+    lintOptions {
+        abortOnError false
+    }
+}
+
+kotlin {
+    jvmToolchain(17)
+}
+
+tasks.withType(org.jetbrains.kotlin.gradle.tasks.KotlinCompile).configureEach {
+    kotlinOptions {
+        jvmTarget = "17"
+    }
+}

modules/hls-downloader/android/build/.transforms/2e41d3fd159f6e89c238fe930efb8a95/results.bin

@@ -0,0 +1 @@
+o/classes

modules/hls-downloader/android/build/.transforms/3896d27c4ed35188d4e0623116595983/results.bin

@@ -0,0 +1 @@
+o/classes

modules/hls-downloader/android/build/.transforms/420100c8100a6b5d3c3531350a94e3e2/results.bin

@@ -0,0 +1 @@
+o/classes

modules/hls-downloader/android/build/.transforms/6934de89e0a9daf77be3abbdca2abe51/results.bin

@@ -0,0 +1 @@
+o/classes

modules/hls-downloader/android/build/.transforms/6f015433373b2992da32515eadf4443f/results.bin

@@ -0,0 +1 @@
+o/classes

modules/hls-downloader/android/build/.transforms/724eca190d8af75ae0783ab82a1c8138/results.bin

@@ -0,0 +1 @@
+o/classes

modules/hls-downloader/android/build/.transforms/72884e7f1fc4d4d3d21d192f72accc4d/results.bin

@@ -0,0 +1 @@
+o/classes

modules/hls-downloader/android/build/.transforms/75dc5a618592a818a365f00ac935aae4/results.bin

@@ -0,0 +1 @@
+o/classes

modules/hls-downloader/android/build/.transforms/9b62e90f89bb930167df4abad84f7517/results.bin

@@ -0,0 +1 @@
+o/classes

modules/hls-downloader/android/build/.transforms/acbc341a3fec256278702366015ed94f/results.bin

@@ -0,0 +1 @@
+o/classes

modules/hls-downloader/android/build/.transforms/ae5ef218c41de4a6ffa8e38074ee1c07/results.bin

@@ -0,0 +1 @@
+o/classes

modules/hls-downloader/android/build/.transforms/f8fa1529c56fcb097722ebda7533e5eb/results.bin

@@ -0,0 +1 @@
+o/classes

modules/hls-downloader/android/build/generated/source/buildConfig/debug/expo/modules/hlsdownloader/BuildConfig.java

@@ -0,0 +1,10 @@
+/**
+ * Automatically generated file. DO NOT MODIFY
+ */
+package expo.modules.hlsdownloader;
+
+public final class BuildConfig {
+  public static final boolean DEBUG = Boolean.parseBoolean("true");
+  public static final String LIBRARY_PACKAGE_NAME = "expo.modules.hlsdownloader";
+  public static final String BUILD_TYPE = "debug";
+}

modules/hls-downloader/android/build/intermediates/aapt_friendly_merged_manifests/debug/processDebugManifest/aapt/AndroidManifest.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    package="expo.modules.hlsdownloader" >
+
+    <uses-sdk android:minSdkVersion="21" />
+
+</manifest>

modules/hls-downloader/android/build/intermediates/aapt_friendly_merged_manifests/debug/processDebugManifest/aapt/output-metadata.json

@@ -0,0 +1,18 @@
+{
+  "version": 3,
+  "artifactType": {
+    "type": "AAPT_FRIENDLY_MERGED_MANIFESTS",
+    "kind": "Directory"
+  },
+  "applicationId": "expo.modules.hlsdownloader",
+  "variantName": "debug",
+  "elements": [
+    {
+      "type": "SINGLE",
+      "filters": [],
+      "attributes": [],
+      "outputFile": "AndroidManifest.xml"
+    }
+  ],
+  "elementType": "File"
+}

modules/hls-downloader/android/build/intermediates/aar_metadata/debug/writeDebugAarMetadata/aar-metadata.properties

@@ -0,0 +1,6 @@
+aarFormatVersion=1.0
+aarMetadataVersion=1.0
+minCompileSdk=1
+minCompileSdkExtension=0
+minAndroidGradlePluginVersion=1.0.0
+coreLibraryDesugaringEnabled=false