refactor: Feature/offline mode rework (#859)

Co-authored-by: lostb1t <coding-mosses0z@icloud.com> Co-authored-by: Fredrik Burmester <fredrik.burmester@gmail.com> Co-authored-by: Gauvain <68083474+Gauvino@users.noreply.github.com> Co-authored-by: Gauvino <uruknarb20@gmail.com> Co-authored-by: storm1er <le.storm1er@gmail.com> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Chris <182387676+whoopsi-daisy@users.noreply.github.com> Co-authored-by: arch-fan <55891793+arch-fan@users.noreply.github.com> Co-authored-by: Alex Kim <alexkim@Alexs-MacBook-Pro.local>
2026-03-20 00:06:32 +00:00 · 2025-08-16 05:34:22 +10:00
parent 4fba558c33
commit ca92f61900
94 changed files with 3325 additions and 3523 deletions
--- a/app/(auth)/(tabs)/(home)/_layout.tsx
+++ b/app/(auth)/(tabs)/(home)/_layout.tsx
@@ -66,12 +66,6 @@ export default function IndexLayout() {
          title: t("home.settings.settings_title"),
        }}
      />
-      <Stack.Screen
-        name='settings/optimized-server/page'
-        options={{
-          title: "",
-        }}
-      />
      <Stack.Screen
        name='settings/marlin-search/page'
        options={{
--- a/app/(auth)/(tabs)/(home)/downloads/[seriesId].tsx
+++ b/app/(auth)/(tabs)/(home)/downloads/[seriesId].tsx
@@ -23,12 +23,12 @@ export default function page() {
  const [seasonIndexState, setSeasonIndexState] = useState<SeasonIndexState>(
    {},
  );
-  const { downloadedFiles, deleteItems } = useDownload();
+  const { getDownloadedItems, deleteItems } = useDownload();

  const series = useMemo(() => {
    try {
      return (
-        downloadedFiles
+        getDownloadedItems()
          ?.filter((f) => f.item.SeriesId === seriesId)
          ?.sort(
            (a, b) => a?.item.ParentIndexNumber! - b.item.ParentIndexNumber!,
@@ -37,7 +37,7 @@ export default function page() {
    } catch {
      return [];
    }
-  }, [downloadedFiles]);
+  }, [getDownloadedItems]);

  const seasonIndex =
    seasonIndexState[series?.[0]?.item?.ParentId ?? ""] ||
--- a/app/(auth)/(tabs)/(home)/downloads/index.tsx
+++ b/app/(auth)/(tabs)/(home)/downloads/index.tsx
@@ -10,33 +10,34 @@ import { useAtom } from "jotai";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Alert, ScrollView, TouchableOpacity, View } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { toast } from "sonner-native";
 import { Button } from "@/components/Button";
 import { Text } from "@/components/common/Text";
+import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
 import { ActiveDownloads } from "@/components/downloads/ActiveDownloads";
 import { DownloadSize } from "@/components/downloads/DownloadSize";
 import { MovieCard } from "@/components/downloads/MovieCard";
 import { SeriesCard } from "@/components/downloads/SeriesCard";
-import { type DownloadedItem, useDownload } from "@/providers/DownloadProvider";
+import { useDownload } from "@/providers/DownloadProvider";
+import { type DownloadedItem } from "@/providers/Downloads/types";
 import { queueAtom } from "@/utils/atoms/queue";
-import { DownloadMethod, useSettings } from "@/utils/atoms/settings";
 import { writeToLog } from "@/utils/log";

 export default function page() {
  const navigation = useNavigation();
  const { t } = useTranslation();
  const [queue, setQueue] = useAtom(queueAtom);
-  const { removeProcess, downloadedFiles, deleteFileByType, deleteAllFiles } =
-    useDownload();
+  const {
+    removeProcess,
+    getDownloadedItems,
+    deleteFileByType,
+    deleteAllFiles,
+  } = useDownload();
  const router = useRouter();
-  const [settings] = useSettings();
  const bottomSheetModalRef = useRef<BottomSheetModal>(null);

  const [showMigration, setShowMigration] = useState(false);

-  const insets = useSafeAreaInsets();
-
  const migration_20241124 = () => {
    Alert.alert(
      t("home.downloads.new_app_version_requires_re_download"),
@@ -44,7 +45,10 @@ export default function page() {
      [
        {
          text: t("home.downloads.back"),
-          onPress: () => setShowMigration(false) || router.back(),
+          onPress: () => {
+            setShowMigration(false);
+            router.back();
+          },
        },
        {
          text: t("home.downloads.delete"),
@@ -58,6 +62,8 @@ export default function page() {
    );
  };

+  const downloadedFiles = getDownloadedItems();
+
  const movies = useMemo(() => {
    try {
      return downloadedFiles?.filter((f) => f.item.Type === "Movie") || [];
@@ -127,16 +133,10 @@ export default function page() {

  return (
    <>
-      <ScrollView
-        contentContainerStyle={{
-          paddingLeft: insets.left,
-          paddingRight: insets.right,
-          paddingBottom: 100,
-        }}
-      >
-        <View className='py-4'>
-          <View className='mb-4 flex flex-col space-y-4 px-4'>
-            {settings?.downloadMethod === DownloadMethod.Remux && (
+      <View style={{ flex: 1 }}>
+        <ScrollView showsVerticalScrollIndicator={false} className='flex-1'>
+          <View className='py-4'>
+            <View className='mb-4 flex flex-col space-y-4 px-4'>
              <View className='bg-neutral-900 p-4 rounded-2xl'>
                <Text className='text-lg font-bold'>
                  {t("home.downloads.queue")}
@@ -180,70 +180,74 @@ export default function page() {
                  </Text>
                )}
              </View>
-            )}

-            <ActiveDownloads />
-          </View>
-
-          {movies.length > 0 && (
-            <View className='mb-4'>
-              <View className='flex flex-row items-center justify-between mb-2 px-4'>
-                <Text className='text-lg font-bold'>
-                  {t("home.downloads.movies")}
-                </Text>
-                <View className='bg-purple-600 rounded-full h-6 w-6 flex items-center justify-center'>
-                  <Text className='text-xs font-bold'>{movies?.length}</Text>
-                </View>
-              </View>
-              <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-                <View className='px-4 flex flex-row'>
-                  {movies?.map((item) => (
-                    <View className='mb-2 last:mb-0' key={item.item.Id}>
-                      <MovieCard item={item.item} />
-                    </View>
-                  ))}
-                </View>
-              </ScrollView>
+              <ActiveDownloads />
            </View>
-          )}
-          {groupedBySeries.length > 0 && (
-            <View className='mb-4'>
-              <View className='flex flex-row items-center justify-between mb-2 px-4'>
-                <Text className='text-lg font-bold'>
-                  {t("home.downloads.tvseries")}
-                </Text>
-                <View className='bg-purple-600 rounded-full h-6 w-6 flex items-center justify-center'>
-                  <Text className='text-xs font-bold'>
-                    {groupedBySeries?.length}
+
+            {movies.length > 0 && (
+              <View className='mb-4'>
+                <View className='flex flex-row items-center justify-between mb-2 px-4'>
+                  <Text className='text-lg font-bold'>
+                    {t("home.downloads.movies")}
                  </Text>
+                  <View className='bg-purple-600 rounded-full h-6 w-6 flex items-center justify-center'>
+                    <Text className='text-xs font-bold'>{movies?.length}</Text>
+                  </View>
                </View>
+                <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+                  <View className='px-4 flex flex-row'>
+                    {movies?.map((item) => (
+                      <TouchableItemRouter
+                        item={item.item}
+                        isOffline
+                        key={item.item.Id}
+                      >
+                        <MovieCard item={item.item} />
+                      </TouchableItemRouter>
+                    ))}
+                  </View>
+                </ScrollView>
              </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>
-                  ))}
+            )}
+            {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>
-            </View>
-          )}
-          {downloadedFiles?.length === 0 && (
-            <View className='flex px-4'>
-              <Text className='opacity-50'>
-                {t("home.downloads.no_downloaded_items")}
-              </Text>
-            </View>
-          )}
-        </View>
-      </ScrollView>
+                <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>
+        </ScrollView>
+      </View>
      <BottomSheetModal
        ref={bottomSheetModalRef}
        enableDynamicSizing
--- a/app/(auth)/(tabs)/(home)/settings/logs/page.tsx
+++ b/app/(auth)/(tabs)/(home)/settings/logs/page.tsx
@@ -1,7 +1,7 @@
 import * as FileSystem from "expo-file-system";
 import { useNavigation } from "expo-router";
 import * as Sharing from "expo-sharing";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useId, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { ScrollView, TouchableOpacity, View } from "react-native";
 import Collapsible from "react-native-collapsible";
@@ -15,6 +15,9 @@ export default function page() {
  const { logs } = useLog();
  const { t } = useTranslation();

+  const orderFilterId = useId();
+  const levelsFilterId = useId();
+
  const defaultLevels: LogLevel[] = ["INFO", "ERROR", "DEBUG", "WARN"];
  const codeBlockStyle = {
    backgroundColor: "#000",
@@ -73,7 +76,7 @@ export default function page() {
    <>
      <View className='flex flex-row justify-end py-2 px-4 space-x-2'>
        <FilterButton
-          id='order'
+          id={orderFilterId}
          queryKey='log'
          queryFn={async () => ["asc", "desc"]}
          set={(values) => setOrder(values[0])}
@@ -83,7 +86,7 @@ export default function page() {
          showSearch={false}
        />
        <FilterButton
-          id='levels'
+          id={levelsFilterId}
          queryKey='log'
          queryFn={async () => defaultLevels}
          set={setLevels}
--- a/app/(auth)/(tabs)/(home)/settings/optimized-server/page.tsx
+++ b/app/(auth)/(tabs)/(home)/settings/optimized-server/page.tsx
@@ -1,93 +0,0 @@
-import { useMutation } from "@tanstack/react-query";
-import { useNavigation } from "expo-router";
-import { useAtom } from "jotai";
-import { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { ActivityIndicator, TouchableOpacity } from "react-native";
-import { toast } from "sonner-native";
-import { Text } from "@/components/common/Text";
-import DisabledSetting from "@/components/settings/DisabledSetting";
-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";
-
-export default function page() {
-  const navigation = useNavigation();
-
-  const { t } = useTranslation();
-
-  const [api] = useAtom(apiAtom);
-  const [settings, updateSettings, pluginSettings] = useSettings();
-
-  const [optimizedVersionsServerUrl, setOptimizedVersionsServerUrl] =
-    useState<string>(settings?.optimizedVersionsServerUrl || "");
-
-  const saveMutation = useMutation({
-    mutationFn: async (newVal: string) => {
-      if (newVal.length === 0 || !newVal.startsWith("http")) {
-        toast.error(t("home.settings.toasts.invalid_url"));
-        return;
-      }
-
-      const updatedUrl = newVal.endsWith("/") ? newVal : `${newVal}/`;
-
-      updateSettings({
-        optimizedVersionsServerUrl: updatedUrl,
-      });
-
-      return await getStatistics({
-        url: updatedUrl,
-        authHeader: api?.accessToken,
-        deviceId: getOrSetDeviceId(),
-      });
-    },
-    onSuccess: (data) => {
-      if (data) {
-        toast.success(t("home.settings.toasts.connected"));
-      } else {
-        toast.error(t("home.settings.toasts.could_not_connect"));
-      }
-    },
-    onError: () => {
-      toast.error(t("home.settings.toasts.could_not_connect"));
-    },
-  });
-
-  const onSave = (newVal: string) => {
-    saveMutation.mutate(newVal);
-  };
-
-  useEffect(() => {
-    if (!pluginSettings?.optimizedVersionsServerUrl?.locked) {
-      navigation.setOptions({
-        title: t("home.settings.downloads.optimized_server"),
-        headerRight: () =>
-          saveMutation.isPending ? (
-            <ActivityIndicator size={"small"} color={"white"} />
-          ) : (
-            <TouchableOpacity
-              onPress={() => onSave(optimizedVersionsServerUrl)}
-            >
-              <Text className='text-blue-500'>
-                {t("home.settings.downloads.save_button")}
-              </Text>
-            </TouchableOpacity>
-          ),
-      });
-    }
-  }, [navigation, optimizedVersionsServerUrl, saveMutation.isPending]);
-
-  return (
-    <DisabledSetting
-      disabled={pluginSettings?.optimizedVersionsServerUrl?.locked === true}
-      className='p-4'
-    >
-      <OptimizedServerForm
-        value={optimizedVersionsServerUrl}
-        onChangeValue={setOptimizedVersionsServerUrl}
-      />
-    </DisabledSetting>
-  );
-}
--- a/app/(auth)/(tabs)/(home,libraries,search,favorites)/collections/[collectionId].tsx
+++ b/app/(auth)/(tabs)/(home,libraries,search,favorites)/collections/[collectionId].tsx
@@ -112,7 +112,7 @@ const page: React.FC = () => {
        recursive: true,
        genres: selectedGenres,
        tags: selectedTags,
-        years: selectedYears.map((year) => Number.parseInt(year)),
+        years: selectedYears.map((year) => Number.parseInt(year, 10)),
        includeItemTypes: ["Movie", "Series"],
      });

--- a/app/(auth)/(tabs)/(home,libraries,search,favorites)/items/page.tsx
+++ b/app/(auth)/(tabs)/(home,libraries,search,favorites)/items/page.tsx
@@ -1,7 +1,4 @@
-import { getUserLibraryApi } from "@jellyfin/sdk/lib/utils/api";
-import { useQuery } from "@tanstack/react-query";
 import { useLocalSearchParams } from "expo-router";
-import { useAtom } from "jotai";
 import type React from "react";
 import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
@@ -14,30 +11,16 @@ import Animated, {
 } from "react-native-reanimated";
 import { Text } from "@/components/common/Text";
 import { ItemContent } from "@/components/ItemContent";
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { useItemQuery } from "@/hooks/useItemQuery";

 const Page: React.FC = () => {
-  const [api] = useAtom(apiAtom);
-  const [user] = useAtom(userAtom);
  const { id } = useLocalSearchParams() as { id: string };
  const { t } = useTranslation();

-  const { data: item, isError } = useQuery({
-    queryKey: ["item", id],
-    queryFn: async () => {
-      if (!api || !user || !id) return;
-      const res = await getUserLibraryApi(api).getItem({
-        itemId: id,
-        userId: user?.Id,
-      });
+  const { offline } = useLocalSearchParams() as { offline?: string };
+  const isOffline = offline === "true";

-      return res.data;
-    },
-    staleTime: 0,
-    refetchOnMount: true,
-    refetchOnWindowFocus: true,
-    refetchOnReconnect: true,
-  });
+  const { data: item, isError } = useItemQuery(id, isOffline);

  const opacity = useSharedValue(1);
  const animatedStyle = useAnimatedStyle(() => {
@@ -107,7 +90,7 @@ const Page: React.FC = () => {
        <View className='h-12 bg-neutral-900 rounded-lg w-full mb-2' />
        <View className='h-24 bg-neutral-900 rounded-lg mb-1 w-full' />
      </Animated.View>
-      {item && <ItemContent item={item} />}
+      {item && <ItemContent item={item} isOffline={isOffline} />}
    </View>
  );
 };
--- a/app/(auth)/(tabs)/(home,libraries,search,favorites)/series/[id].tsx
+++ b/app/(auth)/(tabs)/(home,libraries,search,favorites)/series/[id].tsx
@@ -69,10 +69,18 @@ const page: React.FC = () => {
        seriesId: item?.Id!,
        userId: user?.Id!,
        enableUserData: true,
-        fields: ["MediaSources", "MediaStreams", "Overview"],
+        // Note: Including trick play is necessary to enable trick play downloads
+        fields: ["MediaSources", "MediaStreams", "Overview", "Trickplay"],
      });
      return res?.data.Items || [];
    },
+    select: (data) =>
+      // This needs to be sorted by parent index number and then index number, that way we can download the episodes in the correct order.
+      [...(data || [])].sort(
+        (a, b) =>
+          (a.ParentIndexNumber ?? 0) - (b.ParentIndexNumber ?? 0) ||
+          (a.IndexNumber ?? 0) - (b.IndexNumber ?? 0),
+      ),
    staleTime: 60,
    enabled: !!api && !!user?.Id && !!item?.Id,
  });
@@ -136,7 +144,7 @@ const page: React.FC = () => {
              resizeMode: "contain",
            }}
          />
-        ) : null
+        ) : undefined
      }
    >
      <View className='flex flex-col pt-4'>
--- a/app/(auth)/(tabs)/(libraries)/[libraryId].tsx
+++ b/app/(auth)/(tabs)/(libraries)/[libraryId].tsx
@@ -168,7 +168,7 @@ const Page = () => {
        fields: ["PrimaryImageAspectRatio", "SortName"],
        genres: selectedGenres,
        tags: selectedTags,
-        years: selectedYears.map((year) => Number.parseInt(year)),
+        years: selectedYears.map((year) => Number.parseInt(year, 10)),
        includeItemTypes: itemType ? [itemType] : undefined,
      });

--- a/app/(auth)/(tabs)/(search)/index.tsx
+++ b/app/(auth)/(tabs)/(search)/index.tsx
@@ -10,6 +10,7 @@ import { useAtom } from "jotai";
 import {
  useCallback,
  useEffect,
+  useId,
  useLayoutEffect,
  useMemo,
  useRef,
@@ -58,6 +59,9 @@ export default function search() {

  const { t } = useTranslation();

+  const searchFilterId = useId();
+  const orderFilterId = useId();
+
  const { q } = params as { q: string };

  const [searchType, setSearchType] = useState<SearchType>("Library");
@@ -313,7 +317,7 @@ export default function search() {
              debouncedSearch.length > 0 && (
                <View className='flex flex-row justify-end items-center space-x-1'>
                  <FilterButton
-                    id='search'
+                    id={searchFilterId}
                    queryKey='jellyseerr_search'
                    queryFn={async () =>
                      Object.keys(JellyseerrSearchSort).filter((v) =>
@@ -329,7 +333,7 @@ export default function search() {
                    showSearch={false}
                  />
                  <FilterButton
-                    id='order'
+                    id={orderFilterId}
                    queryKey='jellysearr_search'
                    queryFn={async () => ["asc", "desc"]}
                    set={(value) => setJellyseerrSortOrder(value[0])}
--- a/app/(auth)/player/direct-player.tsx
+++ b/app/(auth)/player/direct-player.tsx
@@ -2,7 +2,6 @@ import {
  type BaseItemDto,
  type MediaSourceInfo,
  PlaybackOrder,
-  type PlaybackProgressInfo,
  PlaybackStartInfo,
  RepeatMode,
 } from "@jellyfin/sdk/lib/generated-client";
@@ -22,8 +21,8 @@ import { BITRATES } from "@/components/BitrateSelector";
 import { Text } from "@/components/common/Text";
 import { Loader } from "@/components/Loader";
 import { Controls } from "@/components/video-player/controls/Controls";
-import { getDownloadedFileUrl } from "@/hooks/useDownloadedFileOpener";
 import { useHaptic } from "@/hooks/useHaptic";
+import { usePlaybackManager } from "@/hooks/usePlaybackManager";
 import { useInvalidatePlaybackProgressCache } from "@/hooks/useRevalidatePlaybackProgressCache";
 import { useWebSocket } from "@/hooks/useWebsockets";
 import { VlcPlayerView } from "@/modules";
@@ -33,18 +32,16 @@ import type {
  ProgressUpdatePayload,
  VlcPlayerViewRef,
 } from "@/modules/VlcPlayer.types";
+import { useDownload } from "@/providers/DownloadProvider";
+import { DownloadedItem } from "@/providers/Downloads/types";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
 import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
 import { writeToLog } from "@/utils/log";
 import { storage } from "@/utils/mmkv";
-import generateDeviceProfile from "@/utils/profiles/native";
+import { generateDeviceProfile } from "@/utils/profiles/native";
 import { msToTicks, ticksToSeconds } from "@/utils/time";

-const downloadProvider = !Platform.isTV
-  ? require("@/providers/DownloadProvider")
-  : { useDownload: () => null };
-
 const IGNORE_SAFE_AREAS_KEY = "video_player_ignore_safe_areas";

 export default function page() {
@@ -74,7 +71,7 @@ export default function page() {
    ? null
    : require("react-native-volume-manager");

-  const getDownloadedItem = downloadProvider.useDownload();
+  const downloadUtils = useDownload();

  const revalidateProgressCache = useInvalidatePlaybackProgressCache();

@@ -111,6 +108,7 @@ export default function page() {
  const [settings] = useSettings();
  const insets = useSafeAreaInsets();
  const offline = offlineStr === "true";
+  const playbackManager = usePlaybackManager();

  const audioIndex = audioIndexStr
    ? Number.parseInt(audioIndexStr, 10)
@@ -123,18 +121,21 @@ export default function page() {
    : BITRATES[0].value;

  const [item, setItem] = useState<BaseItemDto | null>(null);
+  const [downloadedItem, setDownloadedItem] = useState<DownloadedItem | null>(
+    null,
+  );
  const [itemStatus, setItemStatus] = useState({
    isLoading: true,
    isError: false,
  });

-  /** Gets the initial playback position from the URL or the item's user data. */
+  /** Gets the initial playback position from the URL. */
  const getInitialPlaybackTicks = useCallback((): number => {
    if (playbackPositionFromUrl) {
      return Number.parseInt(playbackPositionFromUrl, 10);
    }
    return item?.UserData?.PlaybackPositionTicks ?? 0;
-  }, [playbackPositionFromUrl, item]);
+  }, [playbackPositionFromUrl]);

  useEffect(() => {
    const fetchItemData = async () => {
@@ -142,8 +143,11 @@ export default function page() {
      try {
        let fetchedItem: BaseItemDto | null = null;
        if (offline && !Platform.isTV) {
-          const data = await getDownloadedItem.getDownloadedItem(itemId);
-          if (data) fetchedItem = data.item as BaseItemDto;
+          const data = downloadUtils.getDownloadedItemById(itemId);
+          if (data) {
+            fetchedItem = data.item as BaseItemDto;
+            setDownloadedItem(data);
+          }
        } else {
          const res = await getUserLibraryApi(api!).getItem({
            itemId,
@@ -179,18 +183,20 @@ export default function page() {
  useEffect(() => {
    const fetchStreamData = async () => {
      setStreamStatus({ isLoading: true, isError: false });
-      const native = await generateDeviceProfile();
      try {
        let result: Stream | null = null;
-        if (offline && !Platform.isTV) {
-          const data = await getDownloadedItem.getDownloadedItem(itemId);
-          if (!data?.mediaSource) return;
-          const url = await getDownloadedFileUrl(data.item.Id!);
+        if (offline && downloadedItem && downloadedItem.mediaSource) {
+          const url = downloadedItem.videoFilePath;
          if (item) {
-            result = { mediaSource: data.mediaSource, sessionId: "", url };
+            result = {
+              mediaSource: downloadedItem.mediaSource,
+              sessionId: "",
+              url: url,
+            };
          }
        } else {
-          if (!item) return;
+          const native = generateDeviceProfile();
+          const transcoding = generateDeviceProfile({ transcode: true });
          const res = await getStreamUrl({
            api,
            item,
@@ -200,7 +206,7 @@ export default function page() {
            maxStreamingBitrate: bitrateValue,
            mediaSourceId: mediaSourceId,
            subtitleStreamIndex: subtitleIndex,
-            deviceProfile: native,
+            deviceProfile: bitrateValue ? transcoding : native,
          });
          if (!res) return;
          const { mediaSource, sessionId, url } = res;
@@ -221,26 +227,39 @@ export default function page() {
      }
    };
    fetchStreamData();
-  }, [itemId, mediaSourceId, bitrateValue, api, item, user?.Id]);
+  }, [
+    itemId,
+    mediaSourceId,
+    bitrateValue,
+    api,
+    item,
+    user?.Id,
+    downloadedItem,
+  ]);

  useEffect(() => {
-    if (!stream) return;
-
+    if (!stream || !api) return;
    const reportPlaybackStart = async () => {
-      await getPlaystateApi(api!).reportPlaybackStart({
+      await getPlaystateApi(api).reportPlaybackStart({
        playbackStartInfo: currentPlayStateInfo() as PlaybackStartInfo,
      });
    };
-
    reportPlaybackStart();
-  }, [stream]);
+  }, [stream, api]);

  const togglePlay = async () => {
    lightHapticFeedback();
    setIsPlaying(!isPlaying);
    if (isPlaying) {
      await videoRef.current?.pause();
-      reportPlaybackProgress();
+      playbackManager.reportPlaybackProgress(
+        item?.Id!,
+        msToTicks(progress.get()),
+        {
+          AudioStreamIndex: audioIndex ?? -1,
+          SubtitleStreamIndex: subtitleIndex ?? -1,
+        },
+      );
    } else {
      videoRef.current?.play();
      await getPlaystateApi(api!).reportPlaybackStart({
@@ -250,7 +269,6 @@ export default function page() {
  };

  const reportPlaybackStopped = useCallback(async () => {
-    if (offline) return;
    const currentTimeInTicks = msToTicks(progress.get());
    await getPlaystateApi(api!).onPlaybackStopped({
      itemId: item?.Id!,
@@ -258,8 +276,6 @@ export default function page() {
      positionTicks: currentTimeInTicks,
      playSessionId: stream?.sessionId!,
    });
-
-    revalidateProgressCache();
  }, [
    api,
    item,
@@ -274,6 +290,7 @@ export default function page() {
    reportPlaybackStopped();
    setIsPlaybackStopped(true);
    videoRef.current?.stop();
+    revalidateProgressCache();
  }, [videoRef, reportPlaybackStopped]);

  useEffect(() => {
@@ -317,10 +334,16 @@ export default function page() {
        playbackPosition: msToTicks(currentTime).toString(),
      });

-      if (offline) return;
-      if (!item?.Id || !stream) return;
+      if (!item?.Id) return;

-      reportPlaybackProgress();
+      playbackManager.reportPlaybackProgress(
+        item.Id,
+        msToTicks(progress.get()),
+        {
+          AudioStreamIndex: audioIndex ?? -1,
+          SubtitleStreamIndex: subtitleIndex ?? -1,
+        },
+      );
    },
    [
      item?.Id,
@@ -340,28 +363,10 @@ export default function page() {
    setIsPipStarted(pipStarted);
  }, []);

-  const reportPlaybackProgress = useCallback(async () => {
-    if (!api || offline || !stream) return;
-    await getPlaystateApi(api).reportPlaybackProgress({
-      playbackProgressInfo: currentPlayStateInfo() as PlaybackProgressInfo,
-    });
-  }, [
-    api,
-    isPlaying,
-    offline,
-    stream,
-    item?.Id,
-    audioIndex,
-    subtitleIndex,
-    mediaSourceId,
-    progress,
-  ]);
-
  /** Gets the initial playback position in seconds. */
  const startPosition = useMemo(() => {
-    if (offline) return 0;
    return ticksToSeconds(getInitialPlaybackTicks());
-  }, [offline, getInitialPlaybackTicks]);
+  }, [getInitialPlaybackTicks]);

  const volumeUpCb = useCallback(async () => {
    if (Platform.isTV) return;
@@ -446,14 +451,28 @@ export default function page() {
      const { state, isBuffering, isPlaying } = e.nativeEvent;
      if (state === "Playing") {
        setIsPlaying(true);
-        reportPlaybackProgress();
+        if (item?.Id) {
+          playbackManager.reportPlaybackProgress(
+            item.Id,
+            msToTicks(progress.get()),
+            {
+              AudioStreamIndex: audioIndex ?? -1,
+              SubtitleStreamIndex: subtitleIndex ?? -1,
+            },
+          );
+        }
        if (!Platform.isTV) await activateKeepAwakeAsync();
        return;
      }

      if (state === "Paused") {
        setIsPlaying(false);
-        reportPlaybackProgress();
+        if (item?.Id) {
+          playbackManager.reportPlaybackProgress(
+            item.Id,
+            msToTicks(progress.get()),
+          );
+        }
        if (!Platform.isTV) await deactivateKeepAwake();
        return;
      }
@@ -465,7 +484,7 @@ export default function page() {
        setIsBuffering(true);
      }
    },
-    [reportPlaybackProgress],
+    [playbackManager, item?.Id, progress],
  );

  const allAudio =
@@ -483,25 +502,29 @@ export default function page() {
    .filter((sub: any) => sub.DeliveryMethod === "External")
    .map((sub: any) => ({
      name: sub.DisplayTitle,
-      DeliveryUrl: api?.basePath + sub.DeliveryUrl,
+      DeliveryUrl: offline ? sub.DeliveryUrl : api?.basePath + sub.DeliveryUrl,
    }));
-
+  /** The text based subtitle tracks */
  const textSubs = allSubs.filter((sub) => sub.IsTextSubtitleStream);
-
+  /** The user chosen subtitle track from the server */
  const chosenSubtitleTrack = allSubs.find(
    (sub) => sub.Index === subtitleIndex,
  );
+  /** The user chosen audio track from the server */
  const chosenAudioTrack = allAudio.find((audio) => audio.Index === audioIndex);
-
+  /** Whether the stream we're playing is not transcoding*/
  const notTranscoding = !stream?.mediaSource.TranscodingUrl;
+  /** The initial options to pass to the VLC Player */
  const initOptions = [`--sub-text-scale=${settings.subtitleSize}`];
  if (
    chosenSubtitleTrack &&
    (notTranscoding || chosenSubtitleTrack.IsTextSubtitleStream)
  ) {
+    // If not transcoding, we can the index as normal.
+    // If transcoding, we need to reverse the text based subtitles, because VLC reverses the HLS subtitles.
    const finalIndex = notTranscoding
      ? allSubs.indexOf(chosenSubtitleTrack)
-      : textSubs.indexOf(chosenSubtitleTrack);
+      : [...textSubs].reverse().indexOf(chosenSubtitleTrack);
    initOptions.push(`--sub-track=${finalIndex}`);
  }

@@ -562,7 +585,7 @@ export default function page() {
          source={{
            uri: stream?.url || "",
            autoplay: true,
-            isNetwork: true,
+            isNetwork: !offline,
            startPosition,
            externalSubtitles,
            initOptions,
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -1,7 +1,6 @@
 import "@/augmentations";
 import { ActionSheetProvider } from "@expo/react-native-action-sheet";
 import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
-import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
 import { Platform } from "react-native";
 import i18n from "@/i18n";
 import { DownloadProvider } from "@/providers/DownloadProvider";
@@ -11,7 +10,6 @@ import {
  getTokenFromStorage,
  JellyfinProvider,
 } from "@/providers/JellyfinProvider";
-import { JobQueueProvider } from "@/providers/JobQueueProvider";
 import { PlaySettingsProvider } from "@/providers/PlaySettingsProvider";
 import { WebSocketProvider } from "@/providers/WebSocketProvider";
 import { type Settings, useSettings } from "@/utils/atoms/settings";
@@ -27,7 +25,6 @@ import {
  writeToLog,
 } from "@/utils/log";
 import { storage } from "@/utils/mmkv";
-import { cancelJobById, getAllJobsByDeviceId } from "@/utils/optimize-server";

 const BackGroundDownloader = !Platform.isTV
  ? require("@kesha-antonov/react-native-background-downloader")
@@ -145,100 +142,24 @@ if (!Platform.isTV) {
  TaskManager.defineTask(BACKGROUND_FETCH_TASK, async () => {
    console.log("TaskManager ~ trigger");

-    const now = Date.now();
+    const settingsData = storage.getString("settings");

-    try {
-      const settingsData = storage.getString("settings");
+    if (!settingsData) return BackgroundFetch.BackgroundFetchResult.NoData;

-      if (!settingsData) return BackgroundFetch.BackgroundFetchResult.NoData;
+    const settings: Partial<Settings> = JSON.parse(settingsData);

-      const settings: Partial<Settings> = JSON.parse(settingsData);
-      const url = settings?.optimizedVersionsServerUrl;
+    if (!settings?.autoDownload)
+      return BackgroundFetch.BackgroundFetchResult.NoData;

-      if (!settings?.autoDownload || !url)
-        return BackgroundFetch.BackgroundFetchResult.NoData;
+    const token = getTokenFromStorage();
+    const deviceId = getOrSetDeviceId();
+    const baseDirectory = FileSystem.documentDirectory;

-      const token = getTokenFromStorage();
-      const deviceId = getOrSetDeviceId();
-      const baseDirectory = FileSystem.documentDirectory;
+    if (!token || !deviceId || !baseDirectory)
+      return BackgroundFetch.BackgroundFetchResult.NoData;

-      if (!token || !deviceId || !baseDirectory)
-        return BackgroundFetch.BackgroundFetchResult.NoData;
-
-      const jobs = await getAllJobsByDeviceId({
-        deviceId,
-        authHeader: token,
-        url,
-      });
-
-      console.log("TaskManager ~ Active jobs: ", jobs.length);
-
-      for (const 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;
-    } catch (error) {
-      console.error("Background task error:", error);
-      return BackgroundFetch.BackgroundFetchResult.Failed;
-    }
+    // Be sure to return the successful result type!
+    return BackgroundFetch.BackgroundFetchResult.NewData;
  });
 }

@@ -474,85 +395,62 @@ function Layout() {

  return (
    <QueryClientProvider client={queryClient}>
-      <JobQueueProvider>
-        <JellyfinProvider>
-          <PlaySettingsProvider>
-            <LogProvider>
-              <WebSocketProvider>
-                <DownloadProvider>
-                  <BottomSheetModalProvider>
-                    <SystemBars style='light' hidden={false} />
-                    <ThemeProvider value={DarkTheme}>
-                      <Stack initialRouteName='(auth)/(tabs)'>
-                        <Stack.Screen
-                          name='(auth)/(tabs)'
-                          options={{
-                            headerShown: false,
-                            title: "",
-                            header: () => null,
-                          }}
-                        />
-                        <Stack.Screen
-                          name='(auth)/player'
-                          options={{
-                            headerShown: false,
-                            title: "",
-                            header: () => null,
-                          }}
-                        />
-                        <Stack.Screen
-                          name='login'
-                          options={{
-                            headerShown: true,
-                            title: "",
-                            headerTransparent: true,
-                          }}
-                        />
-                        <Stack.Screen name='+not-found' />
-                      </Stack>
-                      <Toaster
-                        duration={4000}
-                        toastOptions={{
-                          style: {
-                            backgroundColor: "#262626",
-                            borderColor: "#363639",
-                            borderWidth: 1,
-                          },
-                          titleStyle: {
-                            color: "white",
-                          },
+      <JellyfinProvider>
+        <PlaySettingsProvider>
+          <LogProvider>
+            <WebSocketProvider>
+              <DownloadProvider>
+                <BottomSheetModalProvider>
+                  <SystemBars style='light' hidden={false} />
+                  <ThemeProvider value={DarkTheme}>
+                    <Stack initialRouteName='(auth)/(tabs)'>
+                      <Stack.Screen
+                        name='(auth)/(tabs)'
+                        options={{
+                          headerShown: false,
+                          title: "",
+                          header: () => null,
                        }}
-                        closeButton
                      />
-                    </ThemeProvider>
-                  </BottomSheetModalProvider>
-                </DownloadProvider>
-              </WebSocketProvider>
-            </LogProvider>
-          </PlaySettingsProvider>
-        </JellyfinProvider>
-      </JobQueueProvider>
+                      <Stack.Screen
+                        name='(auth)/player'
+                        options={{
+                          headerShown: false,
+                          title: "",
+                          header: () => null,
+                        }}
+                      />
+                      <Stack.Screen
+                        name='login'
+                        options={{
+                          headerShown: true,
+                          title: "",
+                          headerTransparent: true,
+                        }}
+                      />
+                      <Stack.Screen name='+not-found' />
+                    </Stack>
+                    <Toaster
+                      duration={4000}
+                      toastOptions={{
+                        style: {
+                          backgroundColor: "#262626",
+                          borderColor: "#363639",
+                          borderWidth: 1,
+                        },
+                        titleStyle: {
+                          color: "white",
+                        },
+                      }}
+                      closeButton
+                    />
+                  </ThemeProvider>
+                </BottomSheetModalProvider>
+              </DownloadProvider>
+            </WebSocketProvider>
+          </LogProvider>
+        </PlaySettingsProvider>
+      </JellyfinProvider>
    </QueryClientProvider>
  );
 }
-
-function saveDownloadedItemInfo(item: BaseItemDto) {
-  try {
-    const downloadedItems = storage.getString("downloadedItems");
-    const items: BaseItemDto[] = downloadedItems
-      ? JSON.parse(downloadedItems)
-      : [];
-
-    const existingItemIndex = items.findIndex((i) => i.Id === item.Id);
-    if (existingItemIndex !== -1) {
-      items[existingItemIndex] = item;
-    } else {
-      items.push(item);
-    }
-
-    storage.set("downloadedItems", JSON.stringify(items));
-  } catch (error) {
-    writeToLog("ERROR", "Failed to save downloaded item information:", error);
-    console.error("Failed to save downloaded item information:", error);
-  }
-}