WIP

only use vlc player

.gitignore

@@ -41,5 +41,4 @@ credentials.json
 
 .vscode/
 .idea/
-.ruby-lsp
-modules/hls-downloader/android/build
+.ruby-lsp

.vscode/settings.json

@@ -10,6 +10,6 @@
     "editor.formatOnSave": true
   },
   "[swift]": {
-    "editor.defaultFormatter": "swiftlang.swift-vscode"
+    "editor.defaultFormatter": "sswg.swift-lang"
   }
 }

app.json

@@ -14,14 +14,11 @@
       "infoPlist": {
         "NSCameraUsageDescription": "The app needs access to your camera to scan barcodes.",
         "NSMicrophoneUsageDescription": "The app needs access to your microphone.",
-        "UIBackgroundModes": ["audio", "fetch", "processing"],
+        "UIBackgroundModes": ["audio", "fetch"],
         "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

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

@@ -46,12 +46,24 @@ export default function IndexLayout() {
           title: t("home.downloads.downloads_title"),
         }}
       />
+      <Stack.Screen
+        name="downloads/[seriesId]"
+        options={{
+          title: t("home.downloads.tvseries"),
+        }}
+      />
       <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={{

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

@@ -0,0 +1,132 @@
+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,361 +1,253 @@
 import { Text } from "@/components/common/Text";
-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 { 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 { Ionicons } from "@expo/vector-icons";
-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 { 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 {
-  ActivityIndicator,
-  Platform,
-  RefreshControl,
-  ScrollView,
-  TouchableOpacity,
-  View,
-} from "react-native";
+  BottomSheetBackdrop,
+  BottomSheetBackdropProps,
+  BottomSheetModal,
+  BottomSheetView,
+} from "@gorhom/bottom-sheet";
+import { toast } from "sonner-native";
+import { writeToLog } from "@/utils/log";
 
-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();
+export default function page() {
+  const navigation = useNavigation();
+  const { t } = useTranslation();
+  const [queue, setQueue] = useAtom(queueAtom);
+  const { removeProcess, downloadedFiles, deleteFileByType } = useDownload();
   const router = useRouter();
-  const queryClient = useQueryClient();
+  const [settings] = useSettings();
+  const bottomSheetModalRef = useRef<BottomSheetModal>(null);
 
-  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 movies = useMemo(() => {
+    try {
+      return downloadedFiles?.filter((f) => f.item.Type === "Movie") || [];
+    } 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 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 goToVideo = (item: any) => {
-    // @ts-expect-error
-    router.push("/player/direct-player?offline=true&itemId=" + item.id);
-  };
+  const insets = useSafeAreaInsets();
 
-  const movies = useMemo(
-    () => downloadedFiles.filter((i) => i.metadata.item?.Type === "Movie"),
-    [downloadedFiles]
-  );
-  const episodes = useMemo(
-    () => downloadedFiles.filter((i) => i.metadata.item?.Type === "Episode"),
-    [downloadedFiles]
-  );
+  useEffect(() => {
+    navigation.setOptions({
+      headerRight: () => (
+        <TouchableOpacity onPress={bottomSheetModalRef.current?.present}>
+          <DownloadSize items={downloadedFiles?.map((f) => f.item) || []} />
+        </TouchableOpacity>
+      ),
+    });
+  }, [downloadedFiles]);
 
-  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();
-  };
+  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()]);
 
   return (
-    <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>
+    <>
+      <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}
+                    >
                       <View>
-                        <Text className="text-xs text-purple-600">
-                          {eta ? `~${eta} remaining` : "Calculating time..."}
+                        <Text className="font-semibold">{q.item.Name}</Text>
+                        <Text className="text-xs opacity-50">
+                          {q.item.Type}
                         </Text>
                       </View>
-                    </View>
+                      <TouchableOpacity
+                        onPress={() => {
+                          removeProcess(q.id);
+                          setQueue((prev) => {
+                            if (!prev) return [];
+                            return [...prev.filter((i) => i.id !== q.id)];
+                          });
+                        }}
+                      >
+                        <Ionicons name="close" size={24} color="red" />
+                      </TouchableOpacity>
+                    </TouchableOpacity>
+                  ))}
+                </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>
+                {queue.length === 0 && (
+                  <Text className="opacity-50">{t("home.downloads.no_items_in_queue")}</Text>
+                )}
+              </View>
+            )}
+
+            <ActiveDownloads />
           </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>
-                ))}
+          {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>
-            </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}
-                      >
-                        {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>
+              <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} />
                     </View>
-                    <Ionicons
-                      name="play-circle"
-                      size={24}
-                      color="white"
-                      className="ml-auto"
-                    />
-                  </TouchableOpacity>
-                ))}
-              </View>
+                  ))}
+                </View>
+              </ScrollView>
             </View>
-          ) : null}
+          )}
+          {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>
+              </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>
+          )}
         </View>
-      </View>
-    </ScrollView>
+      </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(),
+      },
+    ]
   );
 }

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

@@ -6,11 +6,8 @@ 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 {
-  useSplashScreenLoading,
-  useSplashScreenVisible,
-} from "@/providers/SplashScreenProvider";
 import { useSettings } from "@/utils/atoms/settings";
 import { Feather, Ionicons } from "@expo/vector-icons";
 import { Api } from "@jellyfin/sdk";
@@ -27,13 +24,10 @@ import {
 } 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 { useNavigation, useRouter } from "expo-router";
 import { useAtomValue } from "jotai";
 import { useCallback, useEffect, useMemo, useState } from "react";
+import { Platform } from "react-native";
 import { useTranslation } from "react-i18next";
 import {
   ActivityIndicator,
@@ -43,6 +37,10 @@ import {
   View,
 } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import {
+  useSplashScreenLoading,
+  useSplashScreenVisible,
+} from "@/providers/SplashScreenProvider";
 
 type ScrollingCollectionListSection = {
   type: "ScrollingCollectionList";
@@ -80,8 +78,39 @@ export default function index() {
   const [isConnected, setIsConnected] = useState<boolean | null>(null);
   const [loadingRetry, setLoadingRetry] = useState(false);
 
+  const navigation = useNavigation();
+
   const insets = useSafeAreaInsets();
 
+  if (!Platform.isTV) {
+    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 checkConnection = useCallback(async () => {
     setLoadingRetry(true);
     const state = await NetInfo.fetch();
@@ -89,23 +118,6 @@ export default function index() {
     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)

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

@@ -21,6 +21,9 @@ import React, { lazy, useEffect } from "react";
 import { ScrollView, TouchableOpacity, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { storage } from "@/utils/mmkv";
+const DownloadSettings = lazy(
+  () => import("@/components/settings/DownloadSettings")
+);
 
 export default function settings() {
   const router = useRouter();
@@ -69,6 +72,8 @@ export default function settings() {
 
         <OtherSettings />
 
+        {!Platform.isTV && <DownloadSettings />}
+
         <PluginSettings />
 
         <AppLanguageSelector />

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

@@ -0,0 +1,89 @@
+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: settings?.optimizedVersionsServerUrl,
+        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)/series/[id].tsx

@@ -1,4 +1,5 @@
 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";
@@ -84,6 +85,21 @@ const page: React.FC = () => {
         allEpisodes.length > 0 && (
           <View className="flex flex-row items-center space-x-2">
             <AddToFavorites item={item} type="series" />
+            <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"
+                />
+              )}
+            />
           </View>
         ),
     });

app/(auth)/player/_layout.tsx

@@ -36,15 +36,6 @@ 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 { useHaptic } from "@/hooks/useHaptic";
+import { getDownloadedFileUrl } from "@/hooks/useDownloadedFileOpener";
 import { useInvalidatePlaybackProgressCache } from "@/hooks/useRevalidatePlaybackProgressCache";
 import { useWebSocket } from "@/hooks/useWebsockets";
 import { VlcPlayerView } from "@/modules/vlc-player";
@@ -12,9 +12,11 @@ import {
   ProgressUpdatePayload,
   VlcPlayerViewRef,
 } from "@/modules/vlc-player/src/VlcPlayer.types";
+// import { useDownload } from "@/providers/DownloadProvider";
+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";
@@ -24,20 +26,22 @@ import {
   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 { useHaptic } from "@/hooks/useHaptic";
+import { useGlobalSearchParams, useNavigation } from "expo-router";
 import { useAtomValue } from "jotai";
 import React, {
   useCallback,
-  useEffect,
   useMemo,
   useRef,
   useState,
+  useEffect,
 } from "react";
-import { useTranslation } from "react-i18next";
-import { Alert, AppState, AppStateStatus, Platform, View } from "react-native";
+import { Alert, View, AppState, AppStateStatus, 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 { MediaSourceInfo } from "@jellyfin/sdk/lib/generated-client";
 
 export default function page() {
   console.log("Direct Player");
@@ -45,6 +49,7 @@ export default function page() {
   const user = useAtomValue(userAtom);
   const api = useAtomValue(apiAtom);
   const { t } = useTranslation();
+  const navigation = useNavigation();
 
   const [isPlaybackStopped, setIsPlaybackStopped] = useState(false);
   const [showControls, _setShowControls] = useState(true);
@@ -57,8 +62,10 @@ export default function page() {
   const progress = useSharedValue(0);
   const isSeeking = useSharedValue(false);
   const cacheProgress = useSharedValue(0);
-
-  const { getDownloadedItem } = useNativeDownloads();
+  let getDownloadedItem = null;
+  if (!Platform.isTV) {
+    getDownloadedItem = downloadProvider.useDownload();
+  }
 
   const revalidateProgressCache = useInvalidatePlaybackProgressCache();
 
@@ -101,7 +108,7 @@ export default function page() {
     queryKey: ["item", itemId],
     queryFn: async () => {
       if (offline && !Platform.isTV) {
-        const item = await getDownloadedItem(itemId);
+        const item = await getDownloadedItem.getDownloadedItem(itemId);
         if (item) return item.item;
       }
 
@@ -116,80 +123,80 @@ export default function page() {
     staleTime: 0,
   });
 
-  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;
+  const [stream, setStream] = useState<{
+    mediaSource: MediaSourceInfo;
+    url: string;
+    sessionId: string | undefined;
+  } | null>(null);
+  const [isLoadingStream, setIsLoadingStream] = useState(true);
+  const [isErrorStream, setIsErrorStream] = useState(false);
 
-        let m3u8Url = "";
-        if (Platform.OS === "ios") {
-          const path = `${FileSystem.documentDirectory}/downloads/${item?.Id}/Data`;
-          const files = await FileSystem.readDirectoryAsync(path);
+  useEffect(() => {
+    const fetchStream = async () => {
+      setIsLoadingStream(true);
+      setIsErrorStream(false);
 
-          for (const file of files) {
-            if (file.endsWith(".m3u8")) {
-              console.log(file);
-              m3u8Url = `${path}/${file}`;
-              break;
-            }
+      try {
+        if (offline && !Platform.isTV) {
+          const data = await getDownloadedItem.getDownloadedItem(itemId);
+          if (!data?.mediaSource) {
+            setStream(null);
+            return;
+          }
+
+          const url = await getDownloadedFileUrl(data.item.Id!);
+
+          if (item) {
+            setStream({
+              mediaSource: data.mediaSource as MediaSourceInfo,
+              url,
+              sessionId: undefined,
+            });
+            return;
           }
-        } else if (Platform.OS === "android") {
-          m3u8Url = `${FileSystem.documentDirectory}/downloads/${item?.Id}/playlist.m3u8`;
-          const fileContents = await FileSystem.readAsStringAsync(m3u8Url);
-          console.log(fileContents);
         }
 
-        if (!m3u8Url) throw new Error("No m3u8 file found");
-
-        console.log("stream ~", {
-          mediaSource: data.mediaSource.Id,
-          url: m3u8Url,
+        const res = await getStreamUrl({
+          api,
+          item,
+          startTimeTicks: item?.UserData?.PlaybackPositionTicks!,
+          userId: user?.Id,
+          audioStreamIndex: audioIndex,
+          maxStreamingBitrate: bitrateValue,
+          mediaSourceId: mediaSourceId,
+          subtitleStreamIndex: subtitleIndex,
+          deviceProfile: native,
         });
 
-        if (item)
-          return {
-            mediaSource: data.mediaSource,
-            url: m3u8Url,
-            sessionId: undefined,
-          };
+        if (!res) {
+          setStream(null);
+          return;
+        }
+
+        const { mediaSource, sessionId, url } = res;
+
+        if (!sessionId || !mediaSource || !url) {
+          Alert.alert(t("player.error"), t("player.failed_to_get_stream_url"));
+          setStream(null);
+          return;
+        }
+
+        setStream({
+          mediaSource,
+          sessionId,
+          url,
+        });
+      } catch (error) {
+        console.error("Error fetching stream:", error);
+        setIsErrorStream(true);
+        setStream(null);
+      } finally {
+        setIsLoadingStream(false);
       }
+    };
 
-      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 null;
-
-      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,
-  });
+    fetchStream();
+  }, [itemId, mediaSourceId]);
 
   const togglePlay = useCallback(async () => {
     if (!api) return;
@@ -247,21 +254,6 @@ export default function page() {
     videoRef.current?.stop();
   }, [videoRef, reportPlaybackStopped]);
 
-  // TODO: unused should remove.
-  const reportPlaybackStart = useCallback(async () => {
-    if (offline) return;
-
-    if (!stream) 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 ? stream?.sessionId : undefined,
-    });
-  }, [api, item, mediaSourceId, stream]);
-
   const onProgress = useCallback(
     async (data: ProgressUpdatePayload) => {
       if (isSeeking.get() || isPlaybackStopped) return;
@@ -360,64 +352,67 @@ export default function page() {
 
   // 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 allSubs =
+    stream?.mediaSource.MediaStreams?.filter(
+      (sub) => sub.Type === "Subtitle"
+    ) || [];
+  const textSubs = allSubs.filter((sub) => sub.IsTextSubtitleStream);
+
+  const chosenSubtitleTrack = allSubs.find(
+    (sub) => sub.Index === subtitleIndex
+  );
   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}`,
-      };
-    }
+  const notTranscoding = !stream?.mediaSource.TranscodingUrl;
+  if (
+    chosenSubtitleTrack &&
+    (notTranscoding || chosenSubtitleTrack.IsTextSubtitleStream)
+  ) {
+    const finalIndex = notTranscoding
+      ? allSubs.indexOf(chosenSubtitleTrack)
+      : textSubs.indexOf(chosenSubtitleTrack);
+    initOptions.push(`--sub-track=${finalIndex}`);
+  }
 
-    if (chosenAudioTrack)
-      initOptions.push(`--audio-track=${allAudio.indexOf(chosenAudioTrack)}`);
-  } else {
-    // Transcoded playback CASE
-    if (chosenSubtitleTrack?.DeliveryMethod === "Hls") {
-      externalTrack = {
-        name: `subs ${chosenSubtitleTrack.DisplayTitle}`,
-        DeliveryUrl: "",
-      };
-    }
+  if (notTranscoding && chosenAudioTrack) {
+    initOptions.push(`--audio-track=${allAudio.indexOf(chosenAudioTrack)}`);
   }
 
   const insets = useSafeAreaInsets();
+  useEffect(() => {
+    const beforeRemoveListener = navigation.addListener("beforeRemove", stop);
+    return () => {
+      beforeRemoveListener();
+    };
+  }, [navigation]);
 
-  if (!item || isLoadingItem || isLoadingStreamUrl || !stream)
+  if (!item || isLoadingItem || !stream)
     return (
       <View className="w-screen h-screen flex flex-col items-center justify-center bg-black">
         <Loader />
       </View>
     );
 
-  if (isErrorItem || isErrorStreamUrl)
+  if (isErrorItem || isErrorStream)
     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>
     );
 
+  const externalSubtitles = allSubs
+    .filter((sub: any) => sub.DeliveryMethod === "External")
+    .map((sub: any) => ({
+      name: sub.DisplayTitle,
+      DeliveryUrl: api?.basePath + sub.DeliveryUrl,
+    }));
+
   return (
     <View style={{ flex: 1, backgroundColor: "black" }}>
       <View
@@ -435,11 +430,11 @@ export default function page() {
         <VlcPlayerView
           ref={videoRef}
           source={{
-            uri: stream.url,
+            uri: stream?.url || "",
             autoplay: true,
             isNetwork: true,
             startPosition,
-            externalTrack,
+            externalSubtitles,
             initOptions,
           }}
           style={{ width: "100%", height: "100%" }}

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

@@ -1,546 +0,0 @@
-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,35 +1,52 @@
 import "@/augmentations";
+import { Platform } from "react-native";
+import { Text } from "@/components/common/Text";
 import i18n from "@/i18n";
-import * as ScreenOrientation from "@/packages/expo-screen-orientation";
-import { JellyfinProvider } from "@/providers/JellyfinProvider";
-import { NativeDownloadProvider } from "@/providers/NativeDownloadProvider";
+import { DownloadProvider } from "@/providers/DownloadProvider";
+import {
+  getOrSetDeviceId,
+  getTokenFromStorage,
+  JellyfinProvider,
+} from "@/providers/JellyfinProvider";
+import { JobQueueProvider } from "@/providers/JobQueueProvider";
 import { PlaySettingsProvider } from "@/providers/PlaySettingsProvider";
 import {
   SplashScreenProvider,
   useSplashScreenLoading,
 } from "@/providers/SplashScreenProvider";
 import { WebSocketProvider } from "@/providers/WebSocketProvider";
-import { useSettings } from "@/utils/atoms/settings";
+import { Settings, useSettings } from "@/utils/atoms/settings";
+import { BACKGROUND_FETCH_TASK } from "@/utils/background-tasks";
 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";
 import { useFonts } from "expo-font";
 import { useKeepAwake } from "expo-keep-awake";
-import { getLocales } from "expo-localization";
+const Notifications = !Platform.isTV ? require("expo-notifications") : null;
 import { router, Stack } from "expo-router";
+import * as ScreenOrientation from "@/packages/expo-screen-orientation";
+const TaskManager = !Platform.isTV ? require("expo-task-manager") : null;
+import { getLocales } from "expo-localization";
 import { Provider as JotaiProvider } from "jotai";
 import { useEffect, useRef } from "react";
 import { I18nextProvider, useTranslation } from "react-i18next";
-import { Appearance, AppState, Platform } from "react-native";
+import { Appearance, AppState } 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";
-const Notifications = !Platform.isTV ? require("expo-notifications") : null;
 
 if (!Platform.isTV) {
   Notifications.setNotificationHandler({
@@ -76,6 +93,102 @@ function useNotificationObserver() {
   }, []);
 }
 
+if (!Platform.isTV) {
+  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(
@@ -168,6 +281,26 @@ function Layout() {
         );
       }
     }, [settings]);
+
+    useEffect(() => {
+      const subscription = AppState.addEventListener(
+        "change",
+        (nextAppState) => {
+          if (
+            appState.current.match(/inactive|background/) &&
+            nextAppState === "active"
+          ) {
+            BackGroundDownloader.checkForExistingDownloads();
+          }
+        }
+      );
+
+      BackGroundDownloader.checkForExistingDownloads();
+
+      return () => {
+        subscription.remove();
+      };
+    }, []);
   }
 
   const [loaded] = useFonts({
@@ -182,62 +315,64 @@ function Layout() {
 
   return (
     <QueryClientProvider client={queryClient}>
-      <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,
+      <JobQueueProvider>
+        <JellyfinProvider>
+          <PlaySettingsProvider>
+            <LogProvider>
+              <WebSocketProvider>
+                <DownloadProvider>
+                  <BottomSheetModalProvider>
+                    <SystemBars style="light" hidden={false} />
+                    <ThemeProvider value={DarkTheme}>
+                      <Stack>
+                        <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",
+                          },
                         }}
+                        closeButton
                       />
-                      <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>
+                    </ThemeProvider>
+                  </BottomSheetModalProvider>
+                </DownloadProvider>
+              </WebSocketProvider>
+            </LogProvider>
+          </PlaySettingsProvider>
+        </JellyfinProvider>
+      </JobQueueProvider>
     </QueryClientProvider>
   );
 }

bun.lock

@@ -54,7 +54,6 @@
         "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",

components/DownloadItem.tsx

@@ -0,0 +1,410 @@
+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, 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" }) => {
+  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,7 +1,9 @@
 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";
@@ -13,9 +15,7 @@ import { SeasonEpisodesCarousel } from "@/components/series/SeasonEpisodesCarous
 import useDefaultPlaySettings from "@/hooks/useDefaultPlaySettings";
 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 {
@@ -24,17 +24,17 @@ import {
 } from "@jellyfin/sdk/lib/generated-client/models";
 import { Image } from "expo-image";
 import { useNavigation } from "expo-router";
+import * as ScreenOrientation from "@/packages/expo-screen-orientation";
 import { useAtom } from "jotai";
 import React, { useEffect, useMemo, useState } from "react";
 import { Platform, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { AddToFavorites } from "./AddToFavorites";
+const Chromecast = !Platform.isTV ? require("./Chromecast") : null;
 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;
+import { AddToFavorites } from "./AddToFavorites";
 
 export type SelectedOptions = {
   bitrate: Bitrate;
@@ -94,13 +94,7 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
                 />
                 {item.Type !== "Program" && (
                   <View className="flex flex-row items-center space-x-2">
-                    {/* <DownloadSingleItem item={item} size="large" /> */}
-                    <NativeDownloadButton
-                      size={"large"}
-                      title={"Download"}
-                      subtitle={item.Name!}
-                      item={item}
-                    />
+                    <DownloadSingleItem item={item} size="large" />
                     <PlayedStatus items={[item]} size="large" />
                     <AddToFavorites item={item} type="item" />
                   </View>
@@ -123,37 +117,6 @@ 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 (
@@ -244,7 +207,6 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
                     selected={selectedOptions.audioIndex}
                   />
                   <SubtitleTrackSelector
-                    isTranscoding={isTranscoding}
                     source={selectedOptions.mediaSource}
                     onChange={(val) =>
                       setSelectedOptions(

components/PlayButton.tsx

@@ -73,11 +73,7 @@ export const PlayButton: React.FC<Props> = ({
 
   const goToPlayer = useCallback(
     (q: string, bitrateValue: number | undefined) => {
-      if (!bitrateValue) {
-        router.push(`/player/direct-player?${q}`);
-        return;
-      }
-      router.push(`/player/transcoding-player?${q}`);
+      router.push(`/player/direct-player?${q}`);
     },
     [router]
   );

components/PlayButton.tv.tsx

@@ -58,11 +58,7 @@ export const PlayButton: React.FC<Props> = ({
 
   const goToPlayer = useCallback(
     (q: string, bitrateValue: number | undefined) => {
-      if (!bitrateValue) {
-        router.push(`/player/direct-player?${q}`);
-        return;
-      }
-      router.push(`/player/transcoding-player?${q}`);
+      router.push(`/player/direct-player?${q}`);
     },
     [router]
   );

components/ProgressCircle.tsx

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

components/SubtitleTrackSelector.tsx

@@ -4,40 +4,31 @@ 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(() => {
-    const subtitleHelper = new SubtitleHelper(source?.MediaStreams ?? []);
-
-    if (isTranscoding && Platform.OS === "ios") {
-      return subtitleHelper.getUniqueSubtitles();
-    }
-
-    return subtitleHelper.getSubtitles();
-  }, [source, isTranscoding]);
+    return source?.MediaStreams?.filter((x) => x.Type === "Subtitle");
+  }, [source]);
 
   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();
 

components/downloads/ActiveDownloads.tsx

@@ -0,0 +1,194 @@
+import { Text } from "@/components/common/Text";
+import { useDownload } from "@/providers/DownloadProvider";
+import {DownloadMethod, useSettings} from "@/utils/atoms/settings";
+import { JobStatus } from "@/utils/optimize-server";
+import { formatTimeString } from "@/utils/time";
+import { Ionicons } from "@expo/vector-icons";
+const BackGroundDownloader = !Platform.isTV
+  ? require("@kesha-antonov/react-native-background-downloader")
+  : null;
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useRouter } from "expo-router";
+const FFmpegKitProvider = !Platform.isTV ? require("ffmpeg-kit-react-native") : null;
+import { useAtom } from "jotai";
+import {
+  ActivityIndicator,
+  Platform,
+  TouchableOpacity,
+  TouchableOpacityProps,
+  View,
+  ViewProps,
+} from "react-native";
+import { toast } from "sonner-native";
+import { Button } from "../Button";
+import { Image } from "expo-image";
+import { useMemo } from "react";
+import { storage } from "@/utils/mmkv";
+import { t } from "i18next";
+
+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

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

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

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

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

@@ -0,0 +1,82 @@
+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/series/SeasonPicker.tsx

@@ -6,6 +6,7 @@ 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";
@@ -147,6 +148,17 @@ 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}
@@ -187,6 +199,9 @@ 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/DownloadSettings.tsx

@@ -0,0 +1,143 @@
+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.methods")}
+              </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/OptimizedServerForm.tsx

@@ -0,0 +1,45 @@
+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/StorageSettings.tsx

@@ -1,15 +1,49 @@
+import { Text } from "@/components/common/Text";
 import { useHaptic } from "@/hooks/useHaptic";
-import { useTranslation } from "react-i18next";
+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";
 
 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 && (
@@ -74,7 +108,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,7 +35,12 @@ 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,
@@ -49,8 +54,7 @@ import AudioSlider from "./AudioSlider";
 import BrightnessSlider from "./BrightnessSlider";
 import { ControlProvider } from "./contexts/ControlContext";
 import { VideoProvider } from "./contexts/VideoContext";
-import DropdownViewDirect from "./dropdown/DropdownViewDirect";
-import DropdownViewTranscoding from "./dropdown/DropdownViewTranscoding";
+import DropdownView from "./dropdown/DropdownView";
 import { EpisodeList } from "./EpisodeList";
 import NextEpisodeCountDownButton from "./NextEpisodeCountDownButton";
 import SkipButton from "./SkipButton";
@@ -214,15 +218,10 @@ export const Controls: React.FC<Props> = ({
       bitrateValue: bitrateValue.toString(),
     }).toString();
 
-    stop()
+    stop();
 
-    if (!bitrateValue) {
-      // @ts-expect-error
-      router.replace(`player/direct-player?${queryParams}`);
-      return;
-    }
     // @ts-expect-error
-    router.replace(`player/transcoding-player?${queryParams}`);
+    router.replace(`player/direct-player?${queryParams}`);
   }, [previousItem, settings, subtitleIndex, audioIndex]);
 
   const goToNextItem = useCallback(() => {
@@ -254,15 +253,10 @@ export const Controls: React.FC<Props> = ({
       bitrateValue: bitrateValue.toString(),
     }).toString();
 
-    stop()
+    stop();
 
-    if (!bitrateValue) {
-      // @ts-expect-error
-      router.replace(`player/direct-player?${queryParams}`);
-      return;
-    }
     // @ts-expect-error
-    router.replace(`player/transcoding-player?${queryParams}`);
+    router.replace(`player/direct-player?${queryParams}`);
   }, [nextItem, settings, subtitleIndex, audioIndex]);
 
   const updateTimes = useCallback(
@@ -419,15 +413,10 @@ export const Controls: React.FC<Props> = ({
           bitrateValue: bitrateValue.toString(),
         }).toString();
 
-        stop()
+        stop();
 
-        if (!bitrateValue) {
-          // @ts-expect-error
-          router.replace(`player/direct-player?${queryParams}`);
-          return;
-        }
         // @ts-expect-error
-        router.replace(`player/transcoding-player?${queryParams}`);
+        router.replace(`player/direct-player?${queryParams}`);
       } catch (error) {
         console.error("Error in gotoEpisode:", error);
       }
@@ -508,7 +497,7 @@ export const Controls: React.FC<Props> = ({
   }, [trickPlayUrl, trickplayInfo, time]);
 
   const onClose = async () => {
-    stop()
+    stop();
     lightHapticFeedback();
     await ScreenOrientation.lockAsync(
       ScreenOrientation.OrientationLock.PORTRAIT_UP
@@ -559,19 +548,13 @@ export const Controls: React.FC<Props> = ({
                 setSubtitleTrack={setSubtitleTrack}
                 setSubtitleURL={setSubtitleURL}
               >
-                {!mediaSource?.TranscodingUrl ? (
-                  <DropdownViewDirect showControls={showControls} />
-                ) : (
-                  <DropdownViewTranscoding showControls={showControls} />
-                )}
+                <DropdownView showControls={showControls} />
               </VideoProvider>
             </View>
 
             <View className="flex flex-row items-center space-x-2 ">
               {!Platform.isTV && (
-                <TouchableOpacity
-                  onPress={startPictureInPicture}
-                >
+                <TouchableOpacity onPress={startPictureInPicture}>
                   <MaterialIcons
                     name="picture-in-picture"
                     size={24}

components/video-player/controls/EpisodeList.tsx

@@ -4,6 +4,7 @@ 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,
@@ -232,6 +233,9 @@ 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

@@ -9,12 +9,15 @@ import React, {
   useState,
   ReactNode,
   useEffect,
+  useMemo,
 } from "react";
 import { useControlContext } from "./ControlContext";
+import { Track } from "../types";
+import { router, useLocalSearchParams } from "expo-router";
 
 interface VideoContextProps {
-  audioTracks: TrackInfo[] | null;
-  subtitleTracks: TrackInfo[] | null;
+  audioTracks: Track[] | null;
+  subtitleTracks: Track[] | null;
   setAudioTrack: ((index: number) => void) | undefined;
   setSubtitleTrack: ((index: number) => void) | undefined;
   setSubtitleURL: ((url: string, customName: string) => void) | undefined;
@@ -45,30 +48,155 @@ export const VideoProvider: React.FC<VideoProviderProps> = ({
   setSubtitleURL,
   setAudioTrack,
 }) => {
-  const [audioTracks, setAudioTracks] = useState<TrackInfo[] | null>(null);
-  const [subtitleTracks, setSubtitleTracks] = useState<TrackInfo[] | null>(
-    null
-  );
+  const [audioTracks, setAudioTracks] = useState<Track[] | null>(null);
+  const [subtitleTracks, setSubtitleTracks] = useState<Track[] | 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 &&
-        (subtitleTracks === null || subtitleTracks.length === 0)
-      ) {
-        const subtitles = await getSubtitleTracks();
-        console.log("Getting embeded subtitles...", subtitles);
+      if (getSubtitleTracks) {
+        const subtitleData = await getSubtitleTracks();
+
+        let textSubIndex = 0;
+        const subtitles: Track[] = allSubs?.map((sub) => {
+          // Always increment for non-transcoding subtitles
+          // Only increment for text-based subtitles when transcoding
+          const shouldIncrement =
+            !mediaSource?.TranscodingUrl || sub.IsTextSubtitleStream;
+
+          const displayTitle = sub.DisplayTitle || "Undefined Subtitle";
+          const vlcIndex = subtitleData?.at(textSubIndex)?.index ?? -1;
+
+          const finalIndex = shouldIncrement ? vlcIndex : sub.Index ?? -1;
+
+          if (shouldIncrement) textSubIndex++;
+          return {
+            name: displayTitle,
+            index: sub.Index ?? -1,
+            originalIndex: finalIndex,
+            setTrack: () =>
+              shouldIncrement
+                ? setTrackParams("subtitle", finalIndex, sub.Index ?? -1)
+                : setPlayerParams({
+                    chosenSubtitleIndex: sub.Index?.toString(),
+                  }),
+          };
+        });
+
+        // Add a "Disable Subtitles" option
+        subtitles.unshift({
+          name: "Disable",
+          index: -1,
+          setTrack: () =>
+            !mediaSource?.TranscodingUrl || onTextBasedSubtitle
+              ? setTrackParams("subtitle", -1, -1)
+              : setPlayerParams({ chosenSubtitleIndex: "-1" }),
+        });
+
         setSubtitleTracks(subtitles);
       }
       if (
         getAudioTracks &&
         (audioTracks === null || audioTracks.length === 0)
       ) {
-        const audio = await getAudioTracks();
-        setAudioTracks(audio);
+        const audioData = await getAudioTracks();
+        if (!audioData) return;
+
+        console.log("audioData", audioData);
+
+        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);
       }
     };
     fetchTracks();

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

@@ -1,67 +1,21 @@
-import React, { useMemo, useState } from "react";
-import { View, TouchableOpacity, Platform } from "react-native";
+import React from "react";
+import { 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";
+import { useLocalSearchParams } from "expo-router";
 
-interface DropdownViewDirectProps {
+interface DropdownViewProps {
   showControls: boolean;
   offline?: boolean; // used to disable external subs for downloads
 }
 
-const DropdownViewDirect: React.FC<DropdownViewDirectProps> = ({
+const DropdownView: React.FC<DropdownViewProps> = ({
   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 { subtitleTracks, audioTracks } = videoContext;
 
   const { subtitleIndex, audioIndex } = useLocalSearchParams<{
     itemId: string;
@@ -98,21 +52,11 @@ const DropdownViewDirect: React.FC<DropdownViewDirectProps> = ({
             loop={true}
             sideOffset={10}
           >
-            {allSubtitleTracksForDirectPlay?.map((sub, idx: number) => (
+            {subtitleTracks?.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(),
-                  });
-                }}
+                onValueChange={() => sub.setTrack()}
               >
                 <DropdownMenu.ItemTitle key={`subtitle-item-title-${idx}`}>
                   {sub.name}
@@ -136,12 +80,7 @@ const DropdownViewDirect: React.FC<DropdownViewDirectProps> = ({
               <DropdownMenu.CheckboxItem
                 key={`audio-item-${idx}`}
                 value={audioIndex === track.index.toString()}
-                onValueChange={() => {
-                  setAudioTrack && setAudioTrack(track.index);
-                  router.setParams({
-                    audioIndex: track.index.toString(),
-                  });
-                }}
+                onValueChange={() => track.setTrack()}
               >
                 <DropdownMenu.ItemTitle key={`audio-item-title-${idx}`}>
                   {track.name}
@@ -155,4 +94,4 @@ const DropdownViewDirect: React.FC<DropdownViewDirectProps> = ({
   );
 };
 
-export default DropdownViewDirect;
+export default DropdownView;

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

@@ -1,228 +0,0 @@
-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,7 +13,14 @@ type ExternalSubtitle = {
 type TranscodedSubtitle = {
   name: string;
   index: number;
+  deliveryUrl: string;
   IsTextSubtitleStream: boolean;
 };
 
-export { EmbeddedSubtitle, ExternalSubtitle, TranscodedSubtitle };
+type Track = {
+  name: string;
+  index: number;
+  setTrack: () => void;
+};
+
+export { EmbeddedSubtitle, ExternalSubtitle, TranscodedSubtitle, Track };

hooks/useDownloadedFileOpener.ts

@@ -0,0 +1,48 @@
+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/useRemuxHlsToMp4.ts

@@ -0,0 +1,218 @@
+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 = 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 };
+};

modules/hls-downloader/android/build.gradle

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,10 +0,0 @@
-/**
- * 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

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

@@ -1,18 +0,0 @@
-{
-  "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

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

modules/hls-downloader/android/build/intermediates/annotation_processor_list/debug/javaPreCompileDebug/annotationProcessors.json

@@ -1 +0,0 @@
-{}

modules/hls-downloader/android/build/intermediates/incremental/debug/packageDebugResources/compile-file-map.properties

@@ -1 +0,0 @@
-#Sat Feb 22 14:00:04 CET 2025

modules/hls-downloader/android/build/intermediates/incremental/debug/packageDebugResources/merger.xml

@@ -1,2 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<merger version="3"><dataSet aapt-namespace="http://schemas.android.com/apk/res-auto" config="main$Generated" generated="true" ignore_pattern="!.svn:!.git:!.ds_store:!*.scc:.*:&lt;dir>_*:!CVS:!thumbs.db:!picasa.ini:!*~"><source path="/Users/fredrikburmester/Documents/GitHub/streamyfin/modules/hls-downloader/android/src/main/res"/></dataSet><dataSet aapt-namespace="http://schemas.android.com/apk/res-auto" config="main" generated-set="main$Generated" ignore_pattern="!.svn:!.git:!.ds_store:!*.scc:.*:&lt;dir>_*:!CVS:!thumbs.db:!picasa.ini:!*~"><source path="/Users/fredrikburmester/Documents/GitHub/streamyfin/modules/hls-downloader/android/src/main/res"/></dataSet><dataSet aapt-namespace="http://schemas.android.com/apk/res-auto" config="debug$Generated" generated="true" ignore_pattern="!.svn:!.git:!.ds_store:!*.scc:.*:&lt;dir>_*:!CVS:!thumbs.db:!picasa.ini:!*~"><source path="/Users/fredrikburmester/Documents/GitHub/streamyfin/modules/hls-downloader/android/src/debug/res"/></dataSet><dataSet aapt-namespace="http://schemas.android.com/apk/res-auto" config="debug" generated-set="debug$Generated" ignore_pattern="!.svn:!.git:!.ds_store:!*.scc:.*:&lt;dir>_*:!CVS:!thumbs.db:!picasa.ini:!*~"><source path="/Users/fredrikburmester/Documents/GitHub/streamyfin/modules/hls-downloader/android/src/debug/res"/></dataSet><dataSet aapt-namespace="http://schemas.android.com/apk/res-auto" config="generated$Generated" generated="true" ignore_pattern="!.svn:!.git:!.ds_store:!*.scc:.*:&lt;dir>_*:!CVS:!thumbs.db:!picasa.ini:!*~"><source path="/Users/fredrikburmester/Documents/GitHub/streamyfin/modules/hls-downloader/android/build/generated/res/resValues/debug"/></dataSet><dataSet aapt-namespace="http://schemas.android.com/apk/res-auto" config="generated" generated-set="generated$Generated" ignore_pattern="!.svn:!.git:!.ds_store:!*.scc:.*:&lt;dir>_*:!CVS:!thumbs.db:!picasa.ini:!*~"><source path="/Users/fredrikburmester/Documents/GitHub/streamyfin/modules/hls-downloader/android/build/generated/res/resValues/debug"/></dataSet><mergedItems/></merger>

modules/hls-downloader/android/build/intermediates/incremental/mergeDebugJniLibFolders/merger.xml

@@ -1,2 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<merger version="3"><dataSet config="main" ignore_pattern="!.svn:!.git:!.ds_store:!*.scc:.*:&lt;dir>_*:!CVS:!thumbs.db:!picasa.ini:!*~"><source path="/Users/fredrikburmester/Documents/GitHub/streamyfin/modules/hls-downloader/android/src/main/jniLibs"/></dataSet><dataSet config="debug" ignore_pattern="!.svn:!.git:!.ds_store:!*.scc:.*:&lt;dir>_*:!CVS:!thumbs.db:!picasa.ini:!*~"><source path="/Users/fredrikburmester/Documents/GitHub/streamyfin/modules/hls-downloader/android/src/debug/jniLibs"/></dataSet></merger>

modules/hls-downloader/android/build/intermediates/incremental/mergeDebugShaders/merger.xml

@@ -1,2 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<merger version="3"><dataSet config="main" ignore_pattern="!.svn:!.git:!.ds_store:!*.scc:.*:&lt;dir>_*:!CVS:!thumbs.db:!picasa.ini:!*~"><source path="/Users/fredrikburmester/Documents/GitHub/streamyfin/modules/hls-downloader/android/src/main/shaders"/></dataSet><dataSet config="debug" ignore_pattern="!.svn:!.git:!.ds_store:!*.scc:.*:&lt;dir>_*:!CVS:!thumbs.db:!picasa.ini:!*~"><source path="/Users/fredrikburmester/Documents/GitHub/streamyfin/modules/hls-downloader/android/src/debug/shaders"/></dataSet></merger>

modules/hls-downloader/android/build/intermediates/incremental/packageDebugAssets/merger.xml

@@ -1,2 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<merger version="3"><dataSet config="main" ignore_pattern="!.svn:!.git:!.ds_store:!*.scc:.*:&lt;dir>_*:!CVS:!thumbs.db:!picasa.ini:!*~"><source path="/Users/fredrikburmester/Documents/GitHub/streamyfin/modules/hls-downloader/android/src/main/assets"/></dataSet><dataSet config="debug" ignore_pattern="!.svn:!.git:!.ds_store:!*.scc:.*:&lt;dir>_*:!CVS:!thumbs.db:!picasa.ini:!*~"><source path="/Users/fredrikburmester/Documents/GitHub/streamyfin/modules/hls-downloader/android/src/debug/assets"/></dataSet><dataSet config="generated" ignore_pattern="!.svn:!.git:!.ds_store:!*.scc:.*:&lt;dir>_*:!CVS:!thumbs.db:!picasa.ini:!*~"><source path="/Users/fredrikburmester/Documents/GitHub/streamyfin/modules/hls-downloader/android/build/intermediates/shader_assets/debug/compileDebugShaders/out"/></dataSet></merger>

modules/hls-downloader/android/build/intermediates/local_only_symbol_list/debug/parseDebugLocalResources/R-def.txt

@@ -1,2 +0,0 @@
-R_DEF: Internal format may change without notice
-local

modules/hls-downloader/android/build/intermediates/manifest_merge_blame_file/debug/processDebugManifest/manifest-merger-blame-debug-report.txt

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

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

@@ -1,7 +0,0 @@
-<?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/navigation_json/debug/extractDeepLinksDebug/navigation.json

@@ -1 +0,0 @@
-[]

modules/hls-downloader/android/build/intermediates/nested_resources_validation_report/debug/generateDebugResources/nestedResourcesValidationReport.txt

@@ -1 +0,0 @@
-0 Warning/Error

modules/hls-downloader/android/build/intermediates/symbol_list_with_package_name/debug/generateDebugRFile/package-aware-r.txt

@@ -1 +0,0 @@
-expo.modules.hlsdownloader