merge upstream

We might need to revert this later. this were the required deps updates to make build on android work

.github/workflows/build-android_Miron.yml

@@ -7,9 +7,9 @@ concurrency:
 on:
   workflow_dispatch:
   pull_request:
-    branches: [develop, master]
+    branches: [develop, master,ninjalama-patch-1]
   push:
-    branches: [develop, master]
+    branches: [develop, master, ninjalama-patch-1]
 
 jobs:
   build:
@@ -20,7 +20,7 @@ jobs:
 
     steps:
       - name: 📥 Checkout code
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+        uses: actions/checkout@v4 # v4.2.2
         with:
           ref: ${{ github.event.pull_request.head.sha || github.sha }}
           show-progress: false
@@ -38,6 +38,9 @@ jobs:
           distribution: 'zulu'
           java-version: '17'
 
+      - name: Set up Android SDK
+        uses: android-actions/setup-android@v2
+
       - name: 💾 Cache Bun dependencies
         uses: actions/cache@5a3ec84eff668545956fd18022155c47e93e2684 # v4
         with:
@@ -70,7 +73,7 @@ jobs:
         run: echo "DATE_TAG=$(date +%d-%m-%Y_%H-%M-%S)" >> $GITHUB_ENV
 
       - name: 📤 Upload APK artifact
-        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
+        uses: actions/upload-artifact@v3
         with:
           name: streamyfin-apk-${{ env.DATE_TAG }}
           path: |

.vscode/settings.json

@@ -4,7 +4,7 @@
     "editor.formatOnSave": true
   },
   "[typescriptreact]": {
-    "editor.defaultFormatter": "biomejs.biome",
+    "editor.defaultFormatter": "vscode.typescript-language-features",
     "editor.formatOnSave": true
   },
   "prettier.printWidth": 120,

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

@@ -64,12 +64,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={{

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

@@ -1,13 +1,3 @@
-import { Button } from "@/components/Button";
-import { Text } from "@/components/common/Text";
-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 { queueAtom } from "@/utils/atoms/queue";
-import { DownloadMethod, useSettings } from "@/utils/atoms/settings";
-import { writeToLog } from "@/utils/log";
 import { Ionicons } from "@expo/vector-icons";
 import {
   BottomSheetBackdrop,
@@ -16,30 +6,58 @@ import {
   BottomSheetView,
 } from "@gorhom/bottom-sheet";
 import { useNavigation, useRouter } from "expo-router";
-import { t } from "i18next";
 import { useAtom } from "jotai";
-import React, { useEffect, useMemo, useRef } from "react";
+import { useEffect, useMemo, useRef } 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 { useDownload } from "@/providers/DownloadProvider";
+import { type DownloadedItem } from "@/providers/Downloads/types";
+import { queueAtom } from "@/utils/atoms/queue";
+import { useSettings } from "@/utils/atoms/settings";
+import { writeToLog } from "@/utils/log";
+
+function migration_20241124(
+  deleteAllFiles: () => Promise<void>,
+  router: any,
+  t: any,
+) {
+  Alert.alert(
+    t("home.downloads.new_app_version_requires_re_download"),
+    undefined,
+    [
+      {
+        text: t("common.cancel"),
+        onPress: () => router.back(),
+        style: "cancel",
+      },
+      {
+        text: t("common.continue"),
+        onPress: () => deleteAllFiles(),
+      },
+    ],
+  );
+}
 
 export default function page() {
   const navigation = useNavigation();
   const { t } = useTranslation();
   const [queue, setQueue] = useAtom(queueAtom);
-  const { removeProcess, downloadedFiles, deleteFileByType } = useDownload();
+  const { deleteFileByType, downloadedFiles, removeProcess, deleteAllFiles } = useDownload();
   const router = useRouter();
   const [settings] = useSettings();
   const bottomSheetModalRef = useRef<BottomSheetModal>(null);
 
   const movies = useMemo(() => {
-    try {
-      return downloadedFiles?.filter((f) => f.item.Type === "Movie") || [];
-    } catch {
-      migration_20241124();
-      return [];
-    }
+    return downloadedFiles?.filter((f) => f.item.Type === "Movie") || [];
   }, [downloadedFiles]);
 
   const groupedBySeries = useMemo(() => {
@@ -54,12 +72,12 @@ export default function page() {
       });
       return Object.values(series);
     } catch {
-      migration_20241124();
+      migration_20241124(deleteAllFiles, router, t);
       return [];
     }
-  }, [downloadedFiles]);
+  }, [downloadedFiles, deleteAllFiles, router, t]);
 
-  const insets = useSafeAreaInsets();
+  const _insets = useSafeAreaInsets();
 
   useEffect(() => {
     navigation.setOptions({
@@ -98,16 +116,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")}
@@ -151,70 +163,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
@@ -249,23 +265,3 @@ export default function page() {
     </>
   );
 }
-
-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)/settings/optimized-server/page.tsx

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

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

@@ -1,10 +1,4 @@
-import { ItemContent } from "@/components/ItemContent";
-import { Text } from "@/components/common/Text";
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-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";
@@ -15,29 +9,18 @@ import Animated, {
   useSharedValue,
   withTiming,
 } from "react-native-reanimated";
+import { Text } from "@/components/common/Text";
+import { ItemContent } from "@/components/ItemContent";
+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>
   );
 };

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

@@ -69,10 +69,16 @@ 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 +142,7 @@ const page: React.FC = () => {
               resizeMode: "contain",
             }}
           />
-        ) : null
+        ) : undefined
       }
     >
       <View className='flex flex-col pt-4'>

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]);
+    return 0;
+  }, [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,17 +183,21 @@ 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) {
+          if (!downloadedItem?.mediaSource) return;
+          const url = downloadedItem.videoFilePath;
           if (item) {
-            result = { mediaSource: data.mediaSource, sessionId: "", url };
+            result = {
+              mediaSource: downloadedItem.mediaSource,
+              sessionId: "",
+              url: url,
+            };
           }
         } else {
+          const native = await generateDeviceProfile();
+          const transcoding = await generateDeviceProfile({ transcode: true });
           const res = await getStreamUrl({
             api,
             item,
@@ -199,7 +207,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;
@@ -220,26 +228,36 @@ 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({
+      console.log("reporting playback start", currentPlayStateInfo());
+      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()),
+      );
     } else {
       videoRef.current?.play();
       await getPlaystateApi(api!).reportPlaybackStart({
@@ -249,7 +267,6 @@ export default function page() {
   };
 
   const reportPlaybackStopped = useCallback(async () => {
-    if (offline) return;
     const currentTimeInTicks = msToTicks(progress.get());
     await getPlaystateApi(api!).onPlaybackStopped({
       itemId: item?.Id!,
@@ -257,8 +274,6 @@ export default function page() {
       positionTicks: currentTimeInTicks,
       playSessionId: stream?.sessionId!,
     });
-
-    revalidateProgressCache();
   }, [
     api,
     item,
@@ -273,6 +288,7 @@ export default function page() {
     reportPlaybackStopped();
     setIsPlaybackStopped(true);
     videoRef.current?.stop();
+    revalidateProgressCache();
   }, [videoRef, reportPlaybackStopped]);
 
   useEffect(() => {
@@ -316,10 +332,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,
@@ -339,28 +361,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;
@@ -445,14 +449,24 @@ 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()),
+          );
+        }
         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;
       }
@@ -464,7 +478,7 @@ export default function page() {
         setIsBuffering(true);
       }
     },
-    [reportPlaybackProgress],
+    [playbackManager, item?.Id, progress],
   );
 
   const allAudio =
@@ -482,25 +496,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}`);
   }
 
@@ -516,7 +534,7 @@ export default function page() {
     return () => setIsMounted(false);
   }, []);
 
-  if (itemStatus.isLoading || streamStatus.isLoading) {
+  if (itemStatus.isLoading || streamStatus.isLoading || !item || !stream) {
     return (
       <View className='w-screen h-screen flex flex-col items-center justify-center bg-black'>
         <Loader />
@@ -550,7 +568,7 @@ export default function page() {
           source={{
             uri: stream?.url || "",
             autoplay: true,
-            isNetwork: true,
+            isNetwork: !offline,
             startPosition,
             externalSubtitles,
             initOptions,

app/_layout.tsx

@@ -7,7 +7,6 @@ import {
   getOrSetDeviceId,
   getTokenFromStorage,
 } 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";
@@ -23,7 +22,6 @@ import {
   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 type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
@@ -137,16 +135,13 @@ 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)
+    if (!settings?.autoDownload)
       return BackgroundFetch.BackgroundFetchResult.NoData;
 
     const token = getTokenFromStorage();
@@ -156,74 +151,6 @@ if (!Platform.isTV) {
     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;
   });
@@ -464,64 +391,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>
   );
 }

bun.lock

@@ -4,7 +4,7 @@
     "": {
       "name": "streamyfin",
       "dependencies": {
-        "@bottom-tabs/react-navigation": "0.8.6",
+        "@bottom-tabs/react-navigation": "0.9.2",
         "@expo/config-plugins": "~9.0.15",
         "@expo/react-native-action-sheet": "^4.1.1",
         "@expo/vector-icons": "^14.0.4",
@@ -59,27 +59,27 @@
         "react-i18next": "^15.4.0",
         "react-native": "npm:react-native-tvos@~0.77.2-0",
         "react-native-awesome-slider": "^2.9.0",
-        "react-native-bottom-tabs": "0.8.6",
+        "react-native-bottom-tabs": "0.9.2",
         "react-native-circular-progress": "^1.4.1",
         "react-native-collapsible": "^1.6.2",
         "react-native-compressor": "^1.10.3",
         "react-native-country-flag": "^2.0.2",
         "react-native-device-info": "^14.0.4",
         "react-native-edge-to-edge": "^1.4.3",
-        "react-native-gesture-handler": "~2.20.2",
+        "react-native-gesture-handler": "~2.24.0",
         "react-native-get-random-values": "^1.11.0",
         "react-native-google-cast": "^4.8.3",
         "react-native-image-colors": "^2.4.0",
         "react-native-ios-context-menu": "^3.1.0",
         "react-native-ios-utilities": "5.1.1",
         "react-native-mmkv": "^2.12.2",
-        "react-native-pager-view": "6.5.1",
+        "react-native-pager-view": "6.6.0",
         "react-native-progress": "^5.0.1",
         "react-native-reanimated": "~3.16.7",
         "react-native-reanimated-carousel": "3.5.1",
-        "react-native-safe-area-context": "4.12.0",
-        "react-native-screens": "~4.4.0",
-        "react-native-svg": "15.8.0",
+        "react-native-safe-area-context": "5.2.0",
+        "react-native-screens": "4.10.0",
+        "react-native-svg": "15.11.2",
         "react-native-tab-view": "^4.0.5",
         "react-native-udp": "^4.1.7",
         "react-native-uitextview": "^1.4.0",
@@ -88,7 +88,7 @@
         "react-native-video": "6.10.0",
         "react-native-volume-manager": "^2.0.8",
         "react-native-web": "~0.19.13",
-        "react-native-webview": "13.12.5",
+        "react-native-webview": "13.13.0",
         "sonner-native": "^0.17.0",
         "tailwindcss": "3.3.2",
         "use-debounce": "^10.0.4",
@@ -397,7 +397,7 @@
 
     "@biomejs/cli-win32-x64": ["@biomejs/cli-win32-x64@2.0.5", "", { "os": "win32", "cpu": "x64" }, "sha512-Sw3rz2m6bBADeQpr3+MD7Ch4E1l15DTt/+dfqKnwkm3cn4BrYwnArmvKeZdVsFRDjMyjlKIP88bw1r7o+9aqzw=="],
 
-    "@bottom-tabs/react-navigation": ["@bottom-tabs/react-navigation@0.8.6", "", { "dependencies": { "color": "^4.2.3" }, "peerDependencies": { "@react-navigation/native": ">=7", "react": "*", "react-native": "*", "react-native-bottom-tabs": "*" } }, "sha512-hLlyBAUz4ahaVK2Op2VcJeAkCSpm3KKho4IojkPyXsos4WEHtO44EYWC71TDbVGeOP5HQ9k7FSwAW3IiZs0wHw=="],
+    "@bottom-tabs/react-navigation": ["@bottom-tabs/react-navigation@0.9.2", "", { "dependencies": { "color": "^4.2.3" }, "peerDependencies": { "@react-navigation/native": ">=7", "react": "*", "react-native": "*", "react-native-bottom-tabs": "*" } }, "sha512-IZZKllcaqCGsKIgeXmYFGU95IXxbBpXtwKws4Lg2GJw/qqAYYsPFEl0JBvnymSD7G1zkHYEilg5UHuTd0NmX7A=="],
 
     "@dominicstop/ts-event-emitter": ["@dominicstop/ts-event-emitter@1.1.0", "", {}, "sha512-CcxmJIvUb1vsFheuGGVSQf4KdPZC44XolpUT34+vlal+LyQoBUOn31pjFET5M9ctOxEpt8xa0M3/2M7uUiAoJw=="],
 
@@ -1843,7 +1843,7 @@
 
     "react-native-awesome-slider": ["react-native-awesome-slider@2.9.0", "", { "peerDependencies": { "react": "*", "react-native": "*", "react-native-gesture-handler": ">=2.0.0", "react-native-reanimated": ">=3.0.0" } }, "sha512-sc5qgX4YtM6IxjtosjgQLdsal120MvU+YWs0F2MdgQWijps22AXLDCUoBnZZ8vxVhVyJ2WnnIPrmtVBvVJjSuQ=="],
 
-    "react-native-bottom-tabs": ["react-native-bottom-tabs@0.8.6", "", { "dependencies": { "sf-symbols-typescript": "^2.0.0", "use-latest-callback": "^0.2.1" }, "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-N5b3MoSfsEqlmvFyIyL0X0bd+QAtB+cXH1rl/+R2Kr0BefBTC7ZldGcPhgK3FhBbt0vJDpd3kLb/dvmqZd+Eag=="],
+    "react-native-bottom-tabs": ["react-native-bottom-tabs@0.9.2", "", { "dependencies": { "react-freeze": "^1.0.0", "sf-symbols-typescript": "^2.0.0", "use-latest-callback": "^0.2.1" }, "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-kwLx9OM6v5P10TdmNhlEgb8nmwBOpwy3ULIxEv1v6cYjzuRkeYtA2dqYeFhJAn1rmWMrl3MnL3xzW5Q3IQyfAg=="],
 
     "react-native-circular-progress": ["react-native-circular-progress@1.4.1", "", { "dependencies": { "prop-types": "^15.8.1" }, "peerDependencies": { "react": ">=16.0.0", "react-native": ">=0.50.0", "react-native-svg": ">=7.0.0" } }, "sha512-HEzvI0WPuWvsCgWE3Ff2HBTMgAEQB2GvTFw0KHyD/t1STAlDDRiolu0mEGhVvihKR3jJu3v3V4qzvSklY/7XzQ=="],
 
@@ -1857,7 +1857,7 @@
 
     "react-native-edge-to-edge": ["react-native-edge-to-edge@1.4.3", "", { "peerDependencies": { "react": ">=18.2.0", "react-native": ">=0.74.0" } }, "sha512-fYchwiQ2D/8NzcvJK1sD9Cm25GFQfsLgYmGpohoSpRxwBwR5UCL0wUf4scoQgYncRh9Hmc2t8ml/sikTwMM3ng=="],
 
-    "react-native-gesture-handler": ["react-native-gesture-handler@2.20.2", "", { "dependencies": { "@egjs/hammerjs": "^2.0.17", "hoist-non-react-statics": "^3.3.0", "invariant": "^2.2.4", "prop-types": "^15.7.2" }, "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-HqzFpFczV4qCnwKlvSAvpzEXisL+Z9fsR08YV5LfJDkzuArMhBu2sOoSPUF/K62PCoAb+ObGlTC83TKHfUd0vg=="],
+    "react-native-gesture-handler": ["react-native-gesture-handler@2.24.0", "", { "dependencies": { "@egjs/hammerjs": "^2.0.17", "hoist-non-react-statics": "^3.3.0", "invariant": "^2.2.4" }, "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-ZdWyOd1C8axKJHIfYxjJKCcxjWEpUtUWgTOVY2wynbiveSQDm8X/PDyAKXSer/GOtIpjudUbACOndZXCN3vHsw=="],
 
     "react-native-get-random-values": ["react-native-get-random-values@1.11.0", "", { "dependencies": { "fast-base64-decode": "^1.0.0" }, "peerDependencies": { "react-native": ">=0.56" } }, "sha512-4BTbDbRmS7iPdhYLRcz3PGFIpFJBwNZg9g42iwa2P6FOv9vZj/xJc678RZXnLNZzd0qd7Q3CCF6Yd+CU2eoXKQ=="],
 
@@ -1875,7 +1875,7 @@
 
     "react-native-mmkv": ["react-native-mmkv@2.12.2", "", { "peerDependencies": { "react": "*", "react-native": ">=0.71.0" } }, "sha512-6058Aq0p57chPrUutLGe9fYoiDVDNMU2PKV+lLFUJ3GhoHvUrLdsS1PDSCLr00yqzL4WJQ7TTzH+V8cpyrNcfg=="],
 
-    "react-native-pager-view": ["react-native-pager-view@6.5.1", "", { "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-YdX7bP+rPYvATMU7HzlMq9JaG3ui/+cVRbFZFGW+QshDULANFg9ECR1BA7H7JTIcO/ZgWCwF+1aVmYG5yBA9Og=="],
+    "react-native-pager-view": ["react-native-pager-view@6.6.0", "", { "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-LmgZs9ihypMEot82u22n98nKGP4E3ixg6Q/VwS7lbrpVZw7pmC9cdplh10PqlyGMBwPHYt875y5n+3sIzQvUkg=="],
 
     "react-native-progress": ["react-native-progress@5.0.1", "", { "dependencies": { "prop-types": "^15.7.2" }, "peerDependencies": { "react-native-svg": "*" } }, "sha512-TYfJ4auAe5vubDma2yfFvt7ktSI+UCfysqJnkdHEcLXqAitRFOozgF/cLgN5VNi/iLdaf3ga1ETi2RF4jVZ/+g=="],
 
@@ -1883,11 +1883,11 @@
 
     "react-native-reanimated-carousel": ["react-native-reanimated-carousel@3.5.1", "", { "peerDependencies": { "react": ">=16.8.0", "react-native": ">=0.6.0", "react-native-gesture-handler": ">=2.0.0", "react-native-reanimated": ">=3.0.0" } }, "sha512-9BBQV6JAYSQm2lV7MFtT4mzapXmW4IZO6s38gfiJL84Jg23ivGB1UykcNQauKgtHyhtW2NuZJzItb1s42lM+hA=="],
 
-    "react-native-safe-area-context": ["react-native-safe-area-context@4.12.0", "", { "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-ukk5PxcF4p3yu6qMZcmeiZgowhb5AsKRnil54YFUUAXVIS7PJcMHGGC+q44fCiBg44/1AJk5njGMez1m9H0BVQ=="],
+    "react-native-safe-area-context": ["react-native-safe-area-context@5.2.0", "", { "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-QpcGA6MRKe8Zbpf1hirCBudNQYGsMv0n/CTTROMOFcXbqRUoEXLCsYxUmYKi7JJb3ziL2DbyzWXyH2/gw4Tkfw=="],
 
-    "react-native-screens": ["react-native-screens@4.4.0", "", { "dependencies": { "react-freeze": "^1.0.0", "warn-once": "^0.1.0" }, "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-c7zc7Zwjty6/pGyuuvh9gK3YBYqHPOxrhXfG1lF4gHlojQSmIx2piNbNaV+Uykj+RDTmFXK0e/hA+fucw/Qozg=="],
+    "react-native-screens": ["react-native-screens@4.10.0", "", { "dependencies": { "react-freeze": "^1.0.0", "warn-once": "^0.1.0" }, "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-Tw21NGuXm3PbiUGtZd0AnXirUixaAbPXDjNR0baBH7/WJDaDTTELLcQ7QRXuqAWbmr/EVCrKj1348ei1KFIr8A=="],
 
-    "react-native-svg": ["react-native-svg@15.8.0", "", { "dependencies": { "css-select": "^5.1.0", "css-tree": "^1.1.3", "warn-once": "0.1.1" }, "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-KHJzKpgOjwj1qeZzsBjxNdoIgv2zNCO9fVcoq2TEhTRsVV5DGTZ9JzUZwybd7q4giT/H3RdtqC3u44dWdO0Ffw=="],
+    "react-native-svg": ["react-native-svg@15.11.2", "", { "dependencies": { "css-select": "^5.1.0", "css-tree": "^1.1.3", "warn-once": "0.1.1" }, "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-+YfF72IbWQUKzCIydlijV1fLuBsQNGMT6Da2kFlo1sh+LE3BIm/2Q7AR1zAAR6L0BFLi1WaQPLfFUC9bNZpOmw=="],
 
     "react-native-tab-view": ["react-native-tab-view@4.0.5", "", { "dependencies": { "use-latest-callback": "^0.2.1" }, "peerDependencies": { "react": ">= 18.2.0", "react-native": "*", "react-native-pager-view": ">= 6.0.0" } }, "sha512-Xn3TpYo4yvKRC/f4+cOcvsXlitdnSaYkacshckrEI3JiDmFKNFIRVNxtZFggm4MwbJafq2RzuzR6xrgKoxgkTw=="],
 
@@ -1905,7 +1905,7 @@
 
     "react-native-web": ["react-native-web@0.19.13", "", { "dependencies": { "@babel/runtime": "^7.18.6", "@react-native/normalize-colors": "^0.74.1", "fbjs": "^3.0.4", "inline-style-prefixer": "^6.0.1", "memoize-one": "^6.0.0", "nullthrows": "^1.1.1", "postcss-value-parser": "^4.2.0", "styleq": "^0.1.3" }, "peerDependencies": { "react": "^18.0.0", "react-dom": "^18.0.0" } }, "sha512-etv3bN8rJglrRCp/uL4p7l8QvUNUC++QwDbdZ8CB7BvZiMvsxfFIRM1j04vxNldG3uo2puRd6OSWR3ibtmc29A=="],
 
-    "react-native-webview": ["react-native-webview@13.12.5", "", { "dependencies": { "escape-string-regexp": "^4.0.0", "invariant": "2.2.4" }, "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-INOKPom4dFyzkbxbkuQNfeRG9/iYnyRDzrDkJeyvSWgJAW2IDdJkWFJBS2v0RxIL4gqLgHkiIZDOfiLaNnw83Q=="],
+    "react-native-webview": ["react-native-webview@13.13.0", "", { "dependencies": { "escape-string-regexp": "^4.0.0", "invariant": "2.2.4" }, "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-lSbFuEZ0uGN/yCIt4+nulbH7WuZlClGlqJ16E6KVl4hOZMGCPoikbNReNs5OsVb6LIGYeQnYxKwPkMwYmJpBqg=="],
 
     "react-refresh": ["react-refresh@0.14.2", "", {}, "sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA=="],
 

components/ContinueWatchingPoster.tsx

@@ -1,11 +1,12 @@
-import { apiAtom } from "@/providers/JellyfinProvider";
 import { Ionicons } from "@expo/vector-icons";
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { Image } from "expo-image";
 import { useAtomValue } from "jotai";
-import { useMemo } from "react";
 import type React from "react";
+import { useMemo } from "react";
 import { View } from "react-native";
+import { apiAtom } from "@/providers/JellyfinProvider";
+import { ProgressBar } from "./common/ProgressBar";
 import { WatchedIndicator } from "./WatchedIndicator";
 
 type ContinueWatchingPosterProps = {
@@ -62,18 +63,6 @@ const ContinueWatchingPoster: React.FC<ContinueWatchingPosterProps> = ({
     return `${api?.basePath}/Items/${item.Id}/Images/Primary?fillHeight=389&quality=80`;
   }, [item]);
 
-  const progress = useMemo(() => {
-    if (item.Type === "Program") {
-      const startDate = new Date(item.StartDate || "");
-      const endDate = new Date(item.EndDate || "");
-      const now = new Date();
-      const total = endDate.getTime() - startDate.getTime();
-      const elapsed = now.getTime() - startDate.getTime();
-      return (elapsed / total) * 100;
-    }
-    return item.UserData?.PlayedPercentage || 0;
-  }, [item]);
-
   if (!url)
     return <View className='aspect-video border border-neutral-800 w-44' />;
 
@@ -101,22 +90,8 @@ const ContinueWatchingPoster: React.FC<ContinueWatchingPosterProps> = ({
           </View>
         )}
       </View>
-      {!progress && <WatchedIndicator item={item} />}
-      {progress > 0 && (
-        <>
-          <View
-            className={
-              "absolute w-100 bottom-0 left-0 h-1 bg-neutral-700 opacity-80 w-full"
-            }
-          />
-          <View
-            style={{
-              width: `${progress}%`,
-            }}
-            className={"absolute bottom-0 left-0 h-1 bg-purple-600 w-full"}
-          />
-        </>
-      )}
+      {!item.UserData?.Played && <WatchedIndicator item={item} />}
+      <ProgressBar item={item} />
     </View>
   );
 };

components/DownloadItem.tsx

@@ -1,11 +1,3 @@
-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,
@@ -22,17 +14,23 @@ import { t } from "i18next";
 import { useAtom } from "jotai";
 import type React from "react";
 import { useCallback, useMemo, useRef, useState } from "react";
-import { Alert, Platform, View, type ViewProps } from "react-native";
+import { Alert, Platform, Switch, View, type ViewProps } from "react-native";
 import { toast } from "sonner-native";
+import { useDownload } from "@/providers/DownloadProvider";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { queueAtom } from "@/utils/atoms/queue";
+import { useSettings } from "@/utils/atoms/settings";
+import { getDefaultPlaySettings } from "@/utils/jellyfin/getDefaultPlaySettings";
+import { getDownloadUrl } from "@/utils/jellyfin/media/getDownloadUrl";
 import { AudioTrackSelector } from "./AudioTrackSelector";
 import { type 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 { Text } from "./common/Text";
 
 interface DownloadProps extends ViewProps {
   items: BaseItemDto[];
@@ -54,11 +52,11 @@ export const DownloadItems: React.FC<DownloadProps> = ({
 }) => {
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
-  const [queue, setQueue] = useAtom(queueAtom);
+  const [queue, _setQueue] = useAtom(queueAtom);
   const [settings] = useSettings();
+  const [downloadUnwatchedOnly, setDownloadUnwatchedOnly] = useState(false);
 
   const { processes, startBackgroundDownload, downloadedFiles } = useDownload();
-  //const { startRemuxing } = useRemuxHlsToMp4();
 
   const [selectedMediaSource, setSelectedMediaSource] = useState<
     MediaSourceInfo | undefined | null
@@ -77,10 +75,6 @@ export const DownloadItems: React.FC<DownloadProps> = ({
     () => user?.Policy?.EnableContentDownloading,
     [user],
   );
-  const usingOptimizedServer = useMemo(
-    () => settings?.downloadMethod === DownloadMethod.Optimized,
-    [settings],
-  );
 
   const bottomSheetModalRef = useRef<BottomSheetModal>(null);
 
@@ -88,7 +82,7 @@ export const DownloadItems: React.FC<DownloadProps> = ({
     bottomSheetModalRef.current?.present();
   }, []);
 
-  const handleSheetChanges = useCallback((index: number) => {}, []);
+  const handleSheetChanges = useCallback((_index: number) => { }, []);
 
   const closeModal = useCallback(() => {
     bottomSheetModalRef.current?.dismiss();
@@ -102,6 +96,13 @@ export const DownloadItems: React.FC<DownloadProps> = ({
     [items, downloadedFiles],
   );
 
+  const itemsToDownload = useMemo(() => {
+    if (downloadUnwatchedOnly) {
+      return itemsNotDownloaded.filter((item) => !item.UserData?.Played);
+    }
+    return itemsNotDownloaded;
+  }, [itemsNotDownloaded, downloadUnwatchedOnly]);
+
   const allItemsDownloaded = useMemo(() => {
     if (items.length === 0) return false;
     return itemsNotDownloaded.length === 0;
@@ -136,39 +137,14 @@ export const DownloadItems: React.FC<DownloadProps> = ({
       firstItem.Type !== "Episode"
         ? "/downloads"
         : ({
-            pathname: `/downloads/${firstItem.SeriesId}`,
-            params: {
-              episodeSeasonIndex: firstItem.ParentIndexNumber,
-            },
-          } as Href),
+          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();
-
-      initiateDownload(...itemsNotDownloaded);
-    } 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 (
@@ -181,46 +157,53 @@ export const DownloadItems: React.FC<DownloadProps> = ({
           "DownloadItem ~ initiateDownload: No api or user or item",
         );
       }
-      let mediaSource = selectedMediaSource;
-      let audioIndex: number | undefined = selectedAudioStream;
-      let subtitleIndex: number | undefined = selectedSubtitleStream;
+      const downloadDetailsPromises = items.map(async (item) => {
+        const { mediaSource, audioIndex, subtitleIndex } =
+          itemsNotDownloaded.length > 1
+            ? getDefaultPlaySettings(item, settings!)
+            : {
+              mediaSource: selectedMediaSource,
+              audioIndex: selectedAudioStream,
+              subtitleIndex: selectedSubtitleStream,
+            };
 
-      for (const item of items) {
-        if (itemsNotDownloaded.length > 1) {
-          const defaults = getDefaultPlaySettings(item, settings!);
-          mediaSource = defaults.mediaSource;
-          audioIndex = defaults.audioIndex;
-          subtitleIndex = defaults.subtitleIndex;
-        }
-
-        const res = await getStreamUrl({
+        const downloadDetails = await getDownloadUrl({
           api,
           item,
-          startTimeTicks: 0,
-          userId: user?.Id,
-          audioStreamIndex: audioIndex,
-          maxStreamingBitrate: maxBitrate.value,
-          mediaSourceId: mediaSource?.Id,
-          subtitleStreamIndex: subtitleIndex,
-          deviceProfile: download,
-          download: true,
-          // deviceId: mediaSource?.Id,
+          userId: user.Id!,
+          mediaSource: mediaSource!,
+          audioStreamIndex: audioIndex ?? -1,
+          subtitleStreamIndex: subtitleIndex ?? -1,
+          maxBitrate,
+          deviceId: api.deviceInfo.id,
         });
 
-        if (!res) {
+        return {
+          url: downloadDetails?.url,
+          item,
+          mediaSource: downloadDetails?.mediaSource,
+        };
+      });
+
+      const downloadDetails = await Promise.all(downloadDetailsPromises);
+      for (const { url, item, mediaSource } of downloadDetails) {
+        if (!url) {
           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);
-        await startBackgroundDownload(url, item, source, maxBitrate);
+        if (!mediaSource) {
+          console.error(`Could not get download URL for ${item.Name}`);
+          toast.error(
+            t("Could not get download URL for {{itemName}}", {
+              itemName: item.Name,
+            }),
+          );
+          continue;
+        }
+        await startBackgroundDownload(url, item, mediaSource, maxBitrate);
       }
     },
     [
@@ -232,11 +215,25 @@ export const DownloadItems: React.FC<DownloadProps> = ({
       selectedSubtitleStream,
       settings,
       maxBitrate,
-      usingOptimizedServer,
       startBackgroundDownload,
     ],
   );
 
+  const acceptDownloadOptions = useCallback(() => {
+    if (userCanDownload === true) {
+      if (itemsToDownload.some((i) => !i.Id)) {
+        throw new Error("No item id");
+      }
+      closeModal();
+
+      initiateDownload(...itemsToDownload);
+    } else {
+      toast.error(
+        t("home.downloads.toasts.you_are_not_allowed_to_download_files"),
+      );
+    }
+  }, [closeModal, initiateDownload, itemsToDownload, userCanDownload]);
+
   const renderBackdrop = useCallback(
     (props: BottomSheetBackdropProps) => (
       <BottomSheetBackdrop
@@ -253,7 +250,6 @@ export const DownloadItems: React.FC<DownloadProps> = ({
       if (itemsNotDownloaded.length !== 1) return;
       const { bitrate, mediaSource, audioIndex, subtitleIndex } =
         getDefaultPlaySettings(items[0], settings);
-
       setSelectedMediaSource(mediaSource ?? undefined);
       setSelectedAudioStream(audioIndex ?? 0);
       setSelectedSubtitleStream(subtitleIndex ?? -1);
@@ -327,7 +323,7 @@ export const DownloadItems: React.FC<DownloadProps> = ({
               <Text className='text-neutral-300'>
                 {subtitle ||
                   t("item_card.download.download_x_item", {
-                    item_count: itemsNotDownloaded.length,
+                    item_count: itemsToDownload.length,
                   })}
               </Text>
             </View>
@@ -337,6 +333,15 @@ export const DownloadItems: React.FC<DownloadProps> = ({
                 onChange={setMaxBitrate}
                 selected={maxBitrate}
               />
+              {itemsNotDownloaded.length > 1 && (
+                <View className='flex flex-row items-center justify-between w-full py-2'>
+                  <Text>{t("item_card.download.download_unwatched_only")}</Text>
+                  <Switch
+                    onValueChange={setDownloadUnwatchedOnly}
+                    value={downloadUnwatchedOnly}
+                  />
+                </View>
+              )}
               {itemsNotDownloaded.length === 1 && (
                 <>
                   <MediaSourceSelector
@@ -361,6 +366,7 @@ export const DownloadItems: React.FC<DownloadProps> = ({
                 </>
               )}
             </View>
+
             <Button
               className='mt-auto'
               onPress={acceptDownloadOptions}
@@ -368,13 +374,6 @@ export const DownloadItems: React.FC<DownloadProps> = ({
             >
               {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>

components/ItemContent.tsx

@@ -1,25 +1,3 @@
-import { AudioTrackSelector } from "@/components/AudioTrackSelector";
-import { type 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";
-import { SubtitleTrackSelector } from "@/components/SubtitleTrackSelector";
-import { ItemImage } from "@/components/common/ItemImage";
-import { CastAndCrew } from "@/components/series/CastAndCrew";
-import { CurrentSeries } from "@/components/series/CurrentSeries";
-import { SeasonEpisodesCarousel } from "@/components/series/SeasonEpisodesCarousel";
-import 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 { userAtom } from "@/providers/JellyfinProvider";
-import { useSettings } from "@/utils/atoms/settings";
-import { getLogoImageUrlById } from "@/utils/jellyfin/image/getLogoImageUrlById";
 import type {
   BaseItemDto,
   MediaSourceInfo,
@@ -30,12 +8,35 @@ 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 { AudioTrackSelector } from "@/components/AudioTrackSelector";
+import { type Bitrate, BitrateSelector } from "@/components/BitrateSelector";
+import { ItemImage } from "@/components/common/ItemImage";
+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";
+import { SubtitleTrackSelector } from "@/components/SubtitleTrackSelector";
+import { CastAndCrew } from "@/components/series/CastAndCrew";
+import { CurrentSeries } from "@/components/series/CurrentSeries";
+import { SeasonEpisodesCarousel } from "@/components/series/SeasonEpisodesCarousel";
+import useDefaultPlaySettings from "@/hooks/useDefaultPlaySettings";
+import { useImageColors } from "@/hooks/useImageColors";
+import { useItemQuery } from "@/hooks/useItemQuery";
+import { useOrientation } from "@/hooks/useOrientation";
+import * as ScreenOrientation from "@/packages/expo-screen-orientation";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { useSettings } from "@/utils/atoms/settings";
+import { getLogoImageUrlById } from "@/utils/jellyfin/image/getLogoImageUrlById";
 import { AddToFavorites } from "./AddToFavorites";
 import { ItemHeader } from "./ItemHeader";
 import { ItemTechnicalDetails } from "./ItemTechnicalDetails";
 import { MediaSourceSelector } from "./MediaSourceSelector";
 import { MoreMoviesWithActor } from "./MoreMoviesWithActor";
 import { PlayInRemoteSessionButton } from "./PlayInRemoteSession";
+
 const Chromecast = !Platform.isTV ? require("./Chromecast") : null;
 
 export type SelectedOptions = {
@@ -45,8 +46,13 @@ export type SelectedOptions = {
   subtitleIndex: number;
 };
 
-export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
-  ({ item }) => {
+interface ItemContentProps {
+  item: BaseItemDto;
+  isOffline: boolean;
+}
+
+export const ItemContent: React.FC<ItemContentProps> = React.memo(
+  ({ item, isOffline }) => {
     const [api] = useAtom(apiAtom);
     const [settings] = useSettings();
     const { orientation } = useOrientation();
@@ -68,66 +74,75 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
       defaultBitrate,
       defaultMediaSource,
       defaultSubtitleIndex,
-    } = useDefaultPlaySettings(item, settings);
+    } = useDefaultPlaySettings(item!, settings);
+
+    const logoUrl = useMemo(
+      () => (item ? getLogoImageUrlById({ api, item }) : null),
+      [api, item],
+    );
+
+    const loading = useMemo(() => {
+      return Boolean(logoUrl && loadingLogo);
+    }, [loadingLogo, logoUrl]);
 
     // Needs to automatically change the selected to the default values for default indexes.
     useEffect(() => {
-      setSelectedOptions(() => ({
-        bitrate: defaultBitrate,
-        mediaSource: defaultMediaSource,
-        subtitleIndex: defaultSubtitleIndex ?? -1,
-        audioIndex: defaultAudioIndex,
-      }));
+      if (item) {
+        setSelectedOptions(() => ({
+          bitrate: defaultBitrate,
+          mediaSource: defaultMediaSource,
+          subtitleIndex: defaultSubtitleIndex ?? -1,
+          audioIndex: defaultAudioIndex,
+        }));
+      }
     }, [
       defaultAudioIndex,
       defaultBitrate,
       defaultSubtitleIndex,
       defaultMediaSource,
+      item,
     ]);
 
-    if (!Platform.isTV) {
-      useEffect(() => {
-        navigation.setOptions({
-          headerRight: () =>
-            item && (
-              <View className='flex flex-row items-center space-x-2'>
-                <Chromecast.Chromecast
-                  background='blur'
-                  width={22}
-                  height={22}
-                />
-                {item.Type !== "Program" && (
-                  <View className='flex flex-row items-center space-x-2'>
-                    {!Platform.isTV && (
-                      <DownloadSingleItem item={item} size='large' />
-                    )}
-                    {user?.Policy?.IsAdministrator && (
-                      <PlayInRemoteSessionButton item={item} size='large' />
-                    )}
-
-                    <PlayedStatus items={[item]} size='large' />
-                    <AddToFavorites item={item} />
-                  </View>
-                )}
-              </View>
-            ),
-        });
-      }, [item]);
-    }
+    useEffect(() => {
+      if (Platform.isTV) {
+        return;
+      }
+      navigation.setOptions({
+        headerRight: () =>
+          item && (
+            <View className='flex flex-row items-center space-x-2'>
+              <Chromecast.Chromecast background='blur' width={22} height={22} />
+              {item.Type !== "Program" && (
+                <View className='flex flex-row items-center space-x-2'>
+                  {!Platform.isTV && !isOffline && (
+                    <DownloadSingleItem item={item} size='large' />
+                  )}
+                  {user?.Policy?.IsAdministrator && !isOffline && (
+                    <PlayInRemoteSessionButton item={item} size='large' />
+                  )}
+                  <PlayedStatus
+                    items={[item]}
+                    size='large'
+                    isOffline={isOffline}
+                  />
+                  {!isOffline && <AddToFavorites item={item} />}
+                </View>
+              )}
+            </View>
+          ),
+      });
+    }, [item, navigation, isOffline, user]);
 
     useEffect(() => {
-      if (orientation !== ScreenOrientation.OrientationLock.PORTRAIT_UP)
-        setHeaderHeight(230);
-      else if (item.Type === "Movie") setHeaderHeight(500);
-      else setHeaderHeight(350);
-    }, [item.Type, orientation]);
+      if (item) {
+        if (orientation !== ScreenOrientation.OrientationLock.PORTRAIT_UP)
+          setHeaderHeight(230);
+        else if (item.Type === "Movie") setHeaderHeight(500);
+        else setHeaderHeight(350);
+      }
+    }, [item, orientation]);
 
-    const logoUrl = useMemo(() => getLogoImageUrlById({ api, item }), [item]);
-
-    const loading = useMemo(() => {
-      return Boolean(logoUrl && loadingLogo);
-    }, [loadingLogo, logoUrl]);
-    if (!selectedOptions) return null;
+    if (!item || !selectedOptions) return null;
 
     return (
       <View
@@ -168,13 +183,13 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
                 onLoad={() => setLoadingLogo(false)}
                 onError={() => setLoadingLogo(false)}
               />
-            ) : null
+            ) : undefined
           }
         >
           <View className='flex flex-col bg-transparent shrink'>
             <View className='flex flex-col px-4 w-full space-y-2 pt-2 mb-2 shrink'>
               <ItemHeader item={item} className='mb-4' />
-              {item.Type !== "Program" && !Platform.isTV && (
+              {item.Type !== "Program" && !Platform.isTV && !isOffline && (
                 <View className='flex flex-row items-center justify-start w-full h-16'>
                   <BitrateSelector
                     className='mr-1'
@@ -233,25 +248,34 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
                 className='grow'
                 selectedOptions={selectedOptions}
                 item={item}
+                isOffline={isOffline}
               />
             </View>
 
             {item.Type === "Episode" && (
-              <SeasonEpisodesCarousel item={item} loading={loading} />
+              <SeasonEpisodesCarousel
+                item={item}
+                loading={loading}
+                isOffline={isOffline}
+              />
             )}
 
-            <ItemTechnicalDetails source={selectedOptions.mediaSource} />
+            {!isOffline && (
+              <ItemTechnicalDetails source={selectedOptions.mediaSource} />
+            )}
             <OverviewText text={item.Overview} className='px-4 mb-4' />
 
             {item.Type !== "Program" && (
               <>
-                {item.Type === "Episode" && (
+                {item.Type === "Episode" && !isOffline && (
                   <CurrentSeries item={item} className='mb-4' />
                 )}
 
-                <CastAndCrew item={item} className='mb-4' loading={loading} />
+                {!isOffline && (
+                  <CastAndCrew item={item} className='mb-4' loading={loading} />
+                )}
 
-                {item.People && item.People.length > 0 && (
+                {item.People && item.People.length > 0 && !isOffline && (
                   <View className='mb-4'>
                     {item.People.slice(0, 3).map((person, idx) => (
                       <MoreMoviesWithActor
@@ -264,7 +288,7 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
                   </View>
                 )}
 
-                <SimilarItems itemId={item.Id} />
+                {!isOffline && <SimilarItems itemId={item.Id} />}
               </>
             )}
           </View>

components/PlayButton.tsx

@@ -1,13 +1,3 @@
-import { useHaptic } from "@/hooks/useHaptic";
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { itemThemeColorAtom } from "@/utils/atoms/primaryColor";
-import { useSettings } from "@/utils/atoms/settings";
-import { getParentBackdropImageUrl } from "@/utils/jellyfin/image/getParentBackdropImageUrl";
-import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
-import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
-import { chromecast } from "@/utils/profiles/chromecast";
-import { chromecasth265 } from "@/utils/profiles/chromecasth265";
-import { runtimeTicksToMinutes } from "@/utils/time";
 import { useActionSheet } from "@expo/react-native-action-sheet";
 import { Feather, Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
@@ -15,7 +5,6 @@ import { useRouter } from "expo-router";
 import { useAtom, useAtomValue } from "jotai";
 import { useCallback, useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import { Platform, Pressable } from "react-native";
 import { Alert, TouchableOpacity, View } from "react-native";
 import CastContext, {
   CastButton,
@@ -33,12 +22,23 @@ import Animated, {
   useSharedValue,
   withTiming,
 } from "react-native-reanimated";
+import { useHaptic } from "@/hooks/useHaptic";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { itemThemeColorAtom } from "@/utils/atoms/primaryColor";
+import { useSettings } from "@/utils/atoms/settings";
+import { getParentBackdropImageUrl } from "@/utils/jellyfin/image/getParentBackdropImageUrl";
+import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
+import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
+import { chromecast } from "@/utils/profiles/chromecast";
+import { chromecasth265 } from "@/utils/profiles/chromecasth265";
+import { runtimeTicksToMinutes } from "@/utils/time";
 import type { Button } from "./Button";
 import type { SelectedOptions } from "./ItemContent";
 
 interface Props extends React.ComponentProps<typeof Button> {
   item: BaseItemDto;
   selectedOptions: SelectedOptions;
+  isOffline?: boolean;
 }
 
 const ANIMATION_DURATION = 500;
@@ -47,6 +47,7 @@ const MIN_PLAYBACK_WIDTH = 15;
 export const PlayButton: React.FC<Props> = ({
   item,
   selectedOptions,
+  isOffline,
   ...props
 }: Props) => {
   const { showActionSheetWithOptions } = useActionSheet();
@@ -76,7 +77,7 @@ export const PlayButton: React.FC<Props> = ({
       }
       router.push(`/player/direct-player?${q}`);
     },
-    [router],
+    [router, isOffline],
   );
 
   const onPress = useCallback(async () => {
@@ -91,6 +92,8 @@ export const PlayButton: React.FC<Props> = ({
       subtitleIndex: selectedOptions.subtitleIndex?.toString() ?? "",
       mediaSourceId: selectedOptions.mediaSource?.Id ?? "",
       bitrateValue: selectedOptions.bitrate?.value?.toString() ?? "",
+      playbackPosition: item.UserData?.PlaybackPositionTicks?.toString() ?? "0",
+      offline: isOffline ? "true" : "false",
     });
 
     const queryString = queryParams.toString();

components/PlayedStatus.tsx

@@ -1,50 +1,22 @@
-import { useMarkAsPlayed } from "@/hooks/useMarkAsPlayed";
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { useQueryClient } from "@tanstack/react-query";
 import type React from "react";
 import { View, type ViewProps } from "react-native";
+import { useMarkAsPlayed } from "@/hooks/useMarkAsPlayed";
 import { RoundButton } from "./RoundButton";
 
 interface Props extends ViewProps {
   items: BaseItemDto[];
+  isOffline?: boolean;
   size?: "default" | "large";
 }
 
-export const PlayedStatus: React.FC<Props> = ({ items, ...props }) => {
-  const queryClient = useQueryClient();
-
-  const invalidateQueries = () => {
-    items.forEach((item) => {
-      queryClient.invalidateQueries({
-        queryKey: ["item", item.Id],
-      });
-    });
-    queryClient.invalidateQueries({
-      queryKey: ["resumeItems"],
-    });
-    queryClient.invalidateQueries({
-      queryKey: ["continueWatching"],
-    });
-    queryClient.invalidateQueries({
-      queryKey: ["nextUp-all"],
-    });
-    queryClient.invalidateQueries({
-      queryKey: ["nextUp"],
-    });
-    queryClient.invalidateQueries({
-      queryKey: ["episodes"],
-    });
-    queryClient.invalidateQueries({
-      queryKey: ["seasons"],
-    });
-    queryClient.invalidateQueries({
-      queryKey: ["home"],
-    });
-  };
-
+export const PlayedStatus: React.FC<Props> = ({
+  items,
+  isOffline = false,
+  ...props
+}) => {
   const allPlayed = items.every((item) => item.UserData?.Played);
-
-  const markAsPlayedStatus = useMarkAsPlayed(items);
+  const toggle = useMarkAsPlayed(items, isOffline);
 
   return (
     <View {...props}>
@@ -52,8 +24,7 @@ export const PlayedStatus: React.FC<Props> = ({ items, ...props }) => {
         fillColor={allPlayed ? "primary" : undefined}
         icon={allPlayed ? "checkmark" : "checkmark"}
         onPress={async () => {
-          console.log(allPlayed);
-          await markAsPlayedStatus(!allPlayed);
+          await toggle(!allPlayed);
         }}
         size={props.size}
       />

components/SubtitleTrackSelector.tsx

@@ -18,7 +18,7 @@ export const SubtitleTrackSelector: React.FC<Props> = ({
   selected,
   ...props
 }) => {
-  if (Platform.isTV) return null;
+  const { t } = useTranslation();
   const subtitleStreams = useMemo(() => {
     return source?.MediaStreams?.filter((x) => x.Type === "Subtitle");
   }, [source]);
@@ -28,9 +28,7 @@ export const SubtitleTrackSelector: React.FC<Props> = ({
     [subtitleStreams, selected],
   );
 
-  if (subtitleStreams?.length === 0) return null;
-
-  const { t } = useTranslation();
+  if (Platform.isTV || subtitleStreams?.length === 0) return null;
 
   return (
     <View

components/common/ProgressBar.tsx

@@ -0,0 +1,47 @@
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import React, { useMemo } from "react";
+import { View } from "react-native";
+
+interface ProgressBarProps {
+  item: BaseItemDto;
+}
+
+export const ProgressBar: React.FC<ProgressBarProps> = ({ item }) => {
+  const progress = useMemo(() => {
+    if (item.Type === "Program") {
+      if (!item.StartDate || !item.EndDate) {
+        return 0;
+      }
+      const startDate = new Date(item.StartDate);
+      const endDate = new Date(item.EndDate);
+      const now = new Date();
+      const total = endDate.getTime() - startDate.getTime();
+      if (total <= 0) {
+        return 0;
+      }
+      const elapsed = now.getTime() - startDate.getTime();
+      return (elapsed / total) * 100;
+    }
+    return item.UserData?.PlayedPercentage || 0;
+  }, [item]);
+
+  if (progress <= 0) {
+    return null;
+  }
+
+  return (
+    <>
+      <View
+        className={
+          "absolute w-100 bottom-0 left-0 h-1 bg-neutral-700 opacity-80 w-full"
+        }
+      />
+      <View
+        style={{
+          width: `${progress}%`,
+        }}
+        className={"absolute bottom-0 left-0 h-1 bg-purple-600 w-full"}
+      />
+    </>
+  );
+};

components/common/TouchableItemRouter.tsx

@@ -1,5 +1,3 @@
-import { useFavorite } from "@/hooks/useFavorite";
-import { useMarkAsPlayed } from "@/hooks/useMarkAsPlayed";
 import { useActionSheet } from "@expo/react-native-action-sheet";
 import type {
   BaseItemDto,
@@ -8,9 +6,12 @@ import type {
 import { useRouter, useSegments } from "expo-router";
 import { type PropsWithChildren, useCallback } from "react";
 import { TouchableOpacity, type TouchableOpacityProps } from "react-native";
+import { useFavorite } from "@/hooks/useFavorite";
+import { useMarkAsPlayed } from "@/hooks/useMarkAsPlayed";
 
 interface Props extends TouchableOpacityProps {
   item: BaseItemDto;
+  isOffline?: boolean;
 }
 
 export const itemRouter = (
@@ -50,6 +51,7 @@ export const itemRouter = (
 
 export const TouchableItemRouter: React.FC<PropsWithChildren<Props>> = ({
   item,
+  isOffline = false,
   children,
   ...props
 }) => {
@@ -105,7 +107,10 @@ export const TouchableItemRouter: React.FC<PropsWithChildren<Props>> = ({
       <TouchableOpacity
         onLongPress={showActionSheet}
         onPress={() => {
-          const url = itemRouter(item, from);
+          let url = itemRouter(item, from);
+          if (isOffline) {
+            url += `&offline=true`;
+          }
           // @ts-expect-error
           router.push(url);
         }}
@@ -114,4 +119,6 @@ export const TouchableItemRouter: React.FC<PropsWithChildren<Props>> = ({
         {children}
       </TouchableOpacity>
     );
+
+  return null;
 };

components/downloads/ActiveDownloads.tsx

@@ -1,9 +1,3 @@
-import { Text } from "@/components/common/Text";
-import { useDownload } from "@/providers/DownloadProvider";
-import { DownloadMethod, useSettings } from "@/utils/atoms/settings";
-import { storage } from "@/utils/mmkv";
-import type { JobStatus } from "@/utils/optimize-server";
-import { formatTimeString } from "@/utils/time";
 import { Ionicons } from "@expo/vector-icons";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { Image } from "expo-image";
@@ -19,12 +13,22 @@ import {
   type ViewProps,
 } from "react-native";
 import { toast } from "sonner-native";
+import { Text } from "@/components/common/Text";
+import { useDownload } from "@/providers/DownloadProvider";
+import { JobStatus } from "@/providers/Downloads/types";
+import { storage } from "@/utils/mmkv";
+import { formatTimeString } from "@/utils/time";
 import { Button } from "../Button";
+
 const BackGroundDownloader = !Platform.isTV
   ? require("@kesha-antonov/react-native-background-downloader")
   : null;
 
-interface Props extends ViewProps {}
+interface Props extends ViewProps { }
+
+const bytesToMB = (bytes: number) => {
+  return bytes / 1024 / 1024;
+};
 
 export const ActiveDownloads: React.FC<Props> = ({ ...props }) => {
   const { processes } = useDownload();
@@ -59,32 +63,18 @@ interface DownloadCardProps extends TouchableOpacityProps {
 }
 
 const DownloadCard = ({ process, ...props }: DownloadCardProps) => {
-  const { processes, startDownload } = useDownload();
+  const { startDownload, removeProcess } = 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");
-
-      try {
-        const tasks = await BackGroundDownloader.checkForExistingDownloads();
-        for (const task of tasks) {
-          if (task.id === id) {
-            task.stop();
-          }
-        }
-      } finally {
-        await removeProcess(id);
-        if (settings?.downloadMethod === DownloadMethod.Optimized) {
-          await queryClient.refetchQueries({ queryKey: ["jobs"] });
-        }
-      }
+      removeProcess(id);
     },
     onSuccess: () => {
       toast.success(t("home.downloads.toasts.download_cancelled"));
+      queryClient.invalidateQueries({ queryKey: ["downloads"] });
     },
     onError: (e) => {
       console.error(e);
@@ -93,11 +83,14 @@ const DownloadCard = ({ process, ...props }: DownloadCardProps) => {
   });
 
   const eta = (p: JobStatus) => {
-    if (!p.speed || !p.progress) return null;
+    if (!p.speed || p.speed <= 0 || !p.estimatedTotalSizeBytes) return null;
 
-    const length = p?.item?.RunTimeTicks || 0;
-    const timeLeft = (length - length * (p.progress / 100)) / p.speed;
-    return formatTimeString(timeLeft, "tick");
+    const bytesRemaining = p.estimatedTotalSizeBytes - (p.bytesDownloaded || 0);
+    if (bytesRemaining <= 0) return null;
+
+    const secondsRemaining = bytesRemaining / p.speed;
+
+    return formatTimeString(secondsRemaining, "s");
   };
 
   const base64Image = useMemo(() => {
@@ -110,8 +103,7 @@ const DownloadCard = ({ process, ...props }: DownloadCardProps) => {
       className='relative bg-neutral-900 border border-neutral-800 rounded-2xl overflow-hidden'
       {...props}
     >
-      {(process.status === "optimizing" ||
-        process.status === "downloading") && (
+      {process.status === "downloading" && (
         <View
           className={`
         bg-purple-600 h-1 absolute bottom-0 left-0
@@ -151,8 +143,10 @@ const DownloadCard = ({ process, ...props }: DownloadCardProps) => {
               ) : (
                 <Text className='text-xs'>{process.progress.toFixed(0)}%</Text>
               )}
-              {process.speed && (
-                <Text className='text-xs'>{process.speed?.toFixed(2)}x</Text>
+              {process.speed && process.speed > 0 && (
+                <Text className='text-xs'>
+                  {bytesToMB(process.speed).toFixed(2)} MB/s
+                </Text>
               )}
               {eta(process) && (
                 <Text className='text-xs'>

components/downloads/EpisodeCard.tsx

@@ -1,25 +1,16 @@
-import { useHaptic } from "@/hooks/useHaptic";
 import {
   ActionSheetProvider,
   useActionSheet,
 } from "@expo/react-native-action-sheet";
-import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models/base-item-dto";
 import type React from "react";
-import { useCallback, useMemo } from "react";
-import {
-  TouchableOpacity,
-  type TouchableOpacityProps,
-  View,
-} from "react-native";
-
+import { useCallback } from "react";
+import { type TouchableOpacityProps, View } from "react-native";
 import { Text } from "@/components/common/Text";
 import { DownloadSize } from "@/components/downloads/DownloadSize";
-import { useDownloadedFileOpener } from "@/hooks/useDownloadedFileOpener";
+import { useHaptic } from "@/hooks/useHaptic";
 import { useDownload } from "@/providers/DownloadProvider";
-import { storage } from "@/utils/mmkv";
 import { runtimeTicksToSeconds } from "@/utils/time";
-import { Ionicons } from "@expo/vector-icons";
-import { Image } from "expo-image";
 import ContinueWatchingPoster from "../ContinueWatchingPoster";
 import { TouchableItemRouter } from "../common/TouchableItemRouter";
 
@@ -27,26 +18,17 @@ interface EpisodeCardProps extends TouchableOpacityProps {
   item: BaseItemDto;
 }
 
-export const EpisodeCard: React.FC<EpisodeCardProps> = ({ item, ...props }) => {
+export const EpisodeCard: React.FC<EpisodeCardProps> = ({ item }) => {
   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);
+      deleteFile(item.Id, "Episode");
       successHapticFeedback();
     }
   }, [deleteFile, item.Id]);
@@ -77,10 +59,10 @@ export const EpisodeCard: React.FC<EpisodeCardProps> = ({ item, ...props }) => {
   }, [showActionSheetWithOptions, handleDeleteFile]);
 
   return (
-    <TouchableOpacity
-      onPress={handleOpenFile}
+    <TouchableItemRouter
+      item={item}
+      isOffline={true}
       onLongPress={showActionSheet}
-      key={item.Id}
       className='flex flex-col mb-4'
     >
       <View className='flex flex-row items-start mb-2'>
@@ -104,7 +86,7 @@ export const EpisodeCard: React.FC<EpisodeCardProps> = ({ item, ...props }) => {
       <Text numberOfLines={3} className='text-xs text-neutral-500 shrink'>
         {item.Overview}
       </Text>
-    </TouchableOpacity>
+    </TouchableItemRouter>
   );
 };
 

components/downloads/MovieCard.tsx

@@ -1,19 +1,18 @@
-import { useHaptic } from "@/hooks/useHaptic";
 import {
   ActionSheetProvider,
   useActionSheet,
 } from "@expo/react-native-action-sheet";
+import { Ionicons } from "@expo/vector-icons";
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { Image } from "expo-image";
 import type React from "react";
 import { useCallback, useMemo } from "react";
-import { TouchableOpacity, View } from "react-native";
-
+import { 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 { ProgressBar } from "../common/ProgressBar";
+import { TouchableItemRouter } from "../common/TouchableItemRouter";
 import { ItemCardText } from "../ItemCardText";
 
 interface MovieCardProps {
@@ -27,16 +26,10 @@ interface MovieCardProps {
  */
 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!);
+    return storage.getString(item?.Id!);
   }, []);
 
   /**
@@ -44,8 +37,7 @@ export const MovieCard: React.FC<MovieCardProps> = ({ item }) => {
    */
   const handleDeleteFile = useCallback(() => {
     if (item.Id) {
-      deleteFile(item.Id);
-      successHapticFeedback();
+      deleteFile(item.Id, "Movie");
     }
   }, [deleteFile, item.Id]);
 
@@ -75,9 +67,9 @@ export const MovieCard: React.FC<MovieCardProps> = ({ item }) => {
   }, [showActionSheetWithOptions, handleDeleteFile]);
 
   return (
-    <TouchableOpacity onPress={handleOpenFile} onLongPress={showActionSheet}>
+    <TouchableItemRouter onLongPress={showActionSheet} item={item} isOffline>
       {base64Image ? (
-        <View className='w-28 aspect-[10/15] rounded-lg overflow-hidden mr-2 border border-neutral-900'>
+        <View className='relative w-28 aspect-[10/15] rounded-lg overflow-hidden mr-2 border border-neutral-900'>
           <Image
             source={{
               uri: `data:image/jpeg;base64,${base64Image}`,
@@ -88,22 +80,24 @@ export const MovieCard: React.FC<MovieCardProps> = ({ item }) => {
               resizeMode: "cover",
             }}
           />
+          <ProgressBar item={item} />
         </View>
       ) : (
-        <View className='w-28 aspect-[10/15] rounded-lg bg-neutral-900 mr-2 flex items-center justify-center'>
+        <View className='relative 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'
           />
+          <ProgressBar item={item} />
         </View>
       )}
       <View className='w-28'>
         <ItemCardText item={item} />
       </View>
       <DownloadSize items={[item]} />
-    </TouchableOpacity>
+    </TouchableItemRouter>
   );
 };
 

components/home/ScrollingCollectionList.tsx

@@ -1,5 +1,3 @@
-import { Text } from "@/components/common/Text";
-import MoviePoster from "@/components/posters/MoviePoster";
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import {
   type QueryFunction,
@@ -8,9 +6,11 @@ import {
 } from "@tanstack/react-query";
 import { useTranslation } from "react-i18next";
 import { ScrollView, View, type ViewProps } from "react-native";
+import { Text } from "@/components/common/Text";
+import MoviePoster from "@/components/posters/MoviePoster";
 import ContinueWatchingPoster from "../ContinueWatchingPoster";
-import { ItemCardText } from "../ItemCardText";
 import { TouchableItemRouter } from "../common/TouchableItemRouter";
+import { ItemCardText } from "../ItemCardText";
 import SeriesPoster from "../posters/SeriesPoster";
 
 interface Props extends ViewProps {
@@ -20,6 +20,7 @@ interface Props extends ViewProps {
   queryKey: QueryKey;
   queryFn: QueryFunction<BaseItemDto[]>;
   hideIfEmpty?: boolean;
+  isOffline?: boolean;
 }
 
 export const ScrollingCollectionList: React.FC<Props> = ({
@@ -29,6 +30,7 @@ export const ScrollingCollectionList: React.FC<Props> = ({
   queryFn,
   queryKey,
   hideIfEmpty = false,
+  isOffline = false,
   ...props
 }) => {
   const { data, isLoading } = useQuery({
@@ -90,6 +92,7 @@ export const ScrollingCollectionList: React.FC<Props> = ({
               <TouchableItemRouter
                 item={item}
                 key={item.Id}
+                isOffline={isOffline}
                 className={`mr-2 
                   ${orientation === "horizontal" ? "w-44" : "w-28"}
                 `}

components/series/SeasonEpisodesCarousel.tsx

@@ -1,30 +1,35 @@
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { getTvShowsApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { router } from "expo-router";
 import { useAtom } from "jotai";
 import { useEffect, useMemo, useRef } from "react";
-import { TouchableOpacity, View, type ViewProps } from "react-native";
+import { TouchableOpacity, type ViewProps } from "react-native";
+import { useDownload } from "@/providers/DownloadProvider";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
 import ContinueWatchingPoster from "../ContinueWatchingPoster";
-import { ItemCardText } from "../ItemCardText";
 import {
   HorizontalScroll,
   type HorizontalScrollRef,
 } from "../common/HorrizontalScroll";
+import { ItemCardText } from "../ItemCardText";
 
 interface Props extends ViewProps {
   item?: BaseItemDto | null;
   loading?: boolean;
+  isOffline?: boolean;
 }
 
 export const SeasonEpisodesCarousel: React.FC<Props> = ({
   item,
   loading,
+  isOffline,
   ...props
 }) => {
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
+  const { downloadedFiles } = useDownload();
 
   const scrollRef = useRef<HorizontalScrollRef>(null);
 
@@ -41,24 +46,28 @@ export const SeasonEpisodesCarousel: React.FC<Props> = ({
     isLoading,
     isFetching,
   } = useQuery({
-    queryKey: ["episodes", seasonId],
+    queryKey: ["episodes", seasonId, isOffline],
     queryFn: async () => {
-      if (!api || !user?.Id) return [];
-      const response = await api.axiosInstance.get(
-        `${api.basePath}/Shows/${item?.Id}/Episodes`,
-        {
-          params: {
-            userId: user?.Id,
-            seasonId,
-            Fields:
-              "ItemCounts,PrimaryImageAspectRatio,CanDelete,MediaSourceCount,Overview",
-          },
-          headers: {
-            Authorization: `MediaBrowser DeviceId="${api.deviceInfo.id}", Token="${api.accessToken}"`,
-          },
-        },
-      );
-
+      if (isOffline) {
+        return downloadedFiles
+          ?.filter(
+            (f) => f.item.Type === "Episode" && f.item.SeasonId === seasonId,
+          )
+          .map((f) => f.item);
+      }
+      if (!api || !user?.Id || !item?.SeriesId) return [];
+      const response = await getTvShowsApi(api).getEpisodes({
+        userId: user.Id,
+        seasonId: seasonId || undefined,
+        seriesId: item.SeriesId,
+        fields: [
+          "ItemCounts",
+          "PrimaryImageAspectRatio",
+          "CanDelete",
+          "MediaSourceCount",
+          "Overview",
+        ],
+      });
       return response.data.Items as BaseItemDto[];
     },
     enabled: !!api && !!user?.Id && !!seasonId,
@@ -123,7 +132,7 @@ export const SeasonEpisodesCarousel: React.FC<Props> = ({
       data={episodes}
       extraData={item}
       loading={loading || isLoading || isFetching}
-      renderItem={(_item, idx) => (
+      renderItem={(_item, _idx) => (
         <TouchableOpacity
           key={_item.Id}
           onPress={() => {

components/series/SeasonPicker.tsx

@@ -86,7 +86,8 @@ export const SeasonPicker: React.FC<Props> = ({ item, initialSeasonIndex }) => {
         userId: user.Id,
         seasonId: selectedSeasonId,
         enableUserData: true,
-        fields: ["MediaSources", "MediaStreams", "Overview"],
+        // Note: Including trick play is necessary to enable trick play downloads
+        fields: ["MediaSources", "MediaStreams", "Overview", "Trickplay"],
       });
 
       if (res.data.TotalRecordCount === 0)
@@ -97,6 +98,10 @@ export const SeasonPicker: React.FC<Props> = ({ item, initialSeasonIndex }) => {
 
       return res.data.Items;
     },
+    select: (data) =>
+      [...(data || [])].sort(
+        (a, b) => (a.IndexNumber ?? 0) - (b.IndexNumber ?? 0),
+      ),
     enabled: !!api && !!user?.Id && !!item.Id && !!selectedSeasonId,
   });
 

components/settings/DownloadSettings.tsx

@@ -1,32 +1,20 @@
 import { Stepper } from "@/components/inputs/Stepper";
-import { useDownload } from "@/providers/DownloadProvider";
 import {
-  DownloadMethod,
   type 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 DisabledSetting from "@/components/settings/DisabledSetting";
 import { useTranslation } from "react-i18next";
-import { Text } from "../common/Text";
 import { ListGroup } from "../list/ListGroup";
 import { ListItem } from "../list/ListItem";
 
 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],
@@ -37,69 +25,10 @@ export default function DownloadSettings({ ...props }) {
   return (
     <DisabledSetting disabled={allDisabled} {...props} className='mb-4'>
       <ListGroup title={t("home.settings.downloads.downloads_title")}>
-        <ListItem
-          title={t("home.settings.downloads.download_method")}
-          disabled={pluginSettings?.downloadMethod?.locked}
-        >
-          <DropdownMenu.Root>
-            <DropdownMenu.Trigger>
-              <TouchableOpacity className='flex flex-row items-center justify-between py-3 pl-3'>
-                <Text className='mr-1 text-[#8E8D91]'>
-                  {settings.downloadMethod === DownloadMethod.Remux
-                    ? t("home.settings.downloads.default")
-                    : t("home.settings.downloads.optimized")}
-                </Text>
-                <Ionicons
-                  name='chevron-expand-sharp'
-                  size={18}
-                  color='#5A5960'
-                />
-              </TouchableOpacity>
-            </DropdownMenu.Trigger>
-            <DropdownMenu.Content
-              loop={true}
-              side='bottom'
-              align='start'
-              alignOffset={0}
-              avoidCollisions={true}
-              collisionPadding={8}
-              sideOffset={8}
-            >
-              <DropdownMenu.Label>
-                {t("home.settings.downloads.download_method")}
-              </DropdownMenu.Label>
-              <DropdownMenu.Item
-                key='1'
-                onSelect={() => {
-                  updateSettings({ downloadMethod: DownloadMethod.Remux });
-                  setProcesses([]);
-                }}
-              >
-                <DropdownMenu.ItemTitle>
-                  {t("home.settings.downloads.default")}
-                </DropdownMenu.ItemTitle>
-              </DropdownMenu.Item>
-              <DropdownMenu.Item
-                key='2'
-                onSelect={() => {
-                  updateSettings({ downloadMethod: DownloadMethod.Optimized });
-                  setProcesses([]);
-                  queryClient.invalidateQueries({ queryKey: ["search"] });
-                }}
-              >
-                <DropdownMenu.ItemTitle>
-                  {t("home.settings.downloads.optimized")}
-                </DropdownMenu.ItemTitle>
-              </DropdownMenu.Item>
-            </DropdownMenu.Content>
-          </DropdownMenu.Root>
-        </ListItem>
-
         <ListItem
           title={t("home.settings.downloads.remux_max_download")}
           disabled={
-            pluginSettings?.remuxConcurrentLimit?.locked ||
-            settings.downloadMethod !== DownloadMethod.Remux
+            pluginSettings?.remuxConcurrentLimit?.locked
           }
         >
           <Stepper
@@ -114,33 +43,6 @@ export default function DownloadSettings({ ...props }) {
             }
           />
         </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")}
-        />
       </ListGroup>
     </DisabledSetting>
   );

components/settings/HomeIndex.tsx

@@ -1,15 +1,3 @@
-import { Button } from "@/components/Button";
-import { Loader } from "@/components/Loader";
-import { Text } from "@/components/common/Text";
-import { LargeMovieCarousel } from "@/components/home/LargeMovieCarousel";
-import { ScrollingCollectionList } from "@/components/home/ScrollingCollectionList";
-import { MediaListSection } from "@/components/medialists/MediaListSection";
-import { Colors } from "@/constants/Colors";
-import { useInvalidatePlaybackProgressCache } from "@/hooks/useRevalidatePlaybackProgressCache";
-import { useDownload } from "@/providers/DownloadProvider";
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { useSettings } from "@/utils/atoms/settings";
-import { eventBus } from "@/utils/eventBus";
 import { Feather, Ionicons } from "@expo/vector-icons";
 import type { Api } from "@jellyfin/sdk";
 import type {
@@ -25,12 +13,7 @@ import {
 } from "@jellyfin/sdk/lib/utils/api";
 import NetInfo from "@react-native-community/netinfo";
 import { type QueryFunction, useQuery } from "@tanstack/react-query";
-import {
-  useNavigation,
-  usePathname,
-  useRouter,
-  useSegments,
-} from "expo-router";
+import { useNavigation, useRouter, useSegments } from "expo-router";
 import { useAtomValue } from "jotai";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -43,6 +26,18 @@ import {
   View,
 } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Button } from "@/components/Button";
+import { Text } from "@/components/common/Text";
+import { LargeMovieCarousel } from "@/components/home/LargeMovieCarousel";
+import { ScrollingCollectionList } from "@/components/home/ScrollingCollectionList";
+import { Loader } from "@/components/Loader";
+import { MediaListSection } from "@/components/medialists/MediaListSection";
+import { Colors } from "@/constants/Colors";
+import { useInvalidatePlaybackProgressCache } from "@/hooks/useRevalidatePlaybackProgressCache";
+import { useDownload } from "@/providers/DownloadProvider";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { useSettings } from "@/utils/atoms/settings";
+import { eventBus } from "@/utils/eventBus";
 
 type ScrollingCollectionListSection = {
   type: "ScrollingCollectionList";
@@ -71,9 +66,9 @@ export const HomeIndex = () => {
   const [loading, setLoading] = useState(false);
   const [
     settings,
-    updateSettings,
-    pluginSettings,
-    setPluginSettings,
+    _updateSettings,
+    _pluginSettings,
+    _setPluginSettings,
     refreshStreamyfinPluginSettings,
   ] = useSettings();
 
@@ -87,6 +82,17 @@ export const HomeIndex = () => {
   const scrollViewRef = useRef<ScrollView>(null);
 
   const { downloadedFiles, cleanCacheDirectory } = useDownload();
+  const prevIsConnected = useRef<boolean | null>(false);
+  const invalidateCache = useInvalidatePlaybackProgressCache();
+  useEffect(() => {
+    // Only invalidate cache when transitioning from offline to online
+    if (isConnected && !prevIsConnected.current) {
+      invalidateCache();
+    }
+    // Update the ref to the current state for the next render
+    prevIsConnected.current = isConnected;
+  }, [isConnected, invalidateCache]);
+
   useEffect(() => {
     if (Platform.isTV) {
       navigation.setOptions({
@@ -114,7 +120,7 @@ export const HomeIndex = () => {
   }, [downloadedFiles, navigation, router]);
 
   useEffect(() => {
-    cleanCacheDirectory().catch((e) =>
+    cleanCacheDirectory().catch((_e) =>
       console.error("Something went wrong cleaning cache directory"),
     );
   }, []);
@@ -149,10 +155,6 @@ export const HomeIndex = () => {
       setIsConnected(state.isConnected);
     });
 
-    // cleanCacheDirectory().catch((e) =>
-    //   console.error("Something went wrong cleaning cache directory")
-    // );
-
     return () => {
       unsubscribe();
     };
@@ -193,8 +195,6 @@ export const HomeIndex = () => {
     );
   }, [userViews]);
 
-  const invalidateCache = useInvalidatePlaybackProgressCache();
-
   const refetch = async () => {
     setLoading(true);
     await refreshStreamyfinPluginSettings();
@@ -232,166 +232,168 @@ export const HomeIndex = () => {
     [api, user?.Id],
   );
 
-  let sections: Section[] = [];
-  if (!settings?.home || !settings?.home?.sections) {
-    sections = useMemo(() => {
-      if (!api || !user?.Id) return [];
+  const defaultSections = useMemo(() => {
+    if (!api || !user?.Id) return [];
 
-      const latestMediaViews = collections.map((c) => {
-        const includeItemTypes: BaseItemKind[] =
-          c.CollectionType === "tvshows" ? ["Series"] : ["Movie"];
-        const title = t("home.recently_added_in", { libraryName: c.Name });
-        const queryKey = [
-          "home",
-          `recentlyAddedIn${c.CollectionType}`,
-          user?.Id!,
-          c.Id!,
-        ];
-        return createCollectionConfig(
-          title || "",
-          queryKey,
-          includeItemTypes,
-          c.Id,
-        );
-      });
-
-      const ss: Section[] = [
-        {
-          title: t("home.continue_watching"),
-          queryKey: ["home", "resumeItems"],
-          queryFn: async () =>
-            (
-              await getItemsApi(api).getResumeItems({
-                userId: user.Id,
-                enableImageTypes: ["Primary", "Backdrop", "Thumb"],
-                includeItemTypes: ["Movie", "Series", "Episode"],
-              })
-            ).data.Items || [],
-          type: "ScrollingCollectionList",
-          orientation: "horizontal",
-        },
-        {
-          title: t("home.next_up"),
-          queryKey: ["home", "nextUp-all"],
-          queryFn: async () =>
-            (
-              await getTvShowsApi(api).getNextUp({
-                userId: user?.Id,
-                fields: ["MediaSourceCount"],
-                limit: 20,
-                enableImageTypes: ["Primary", "Backdrop", "Thumb"],
-                enableResumable: false,
-              })
-            ).data.Items || [],
-          type: "ScrollingCollectionList",
-          orientation: "horizontal",
-        },
-        ...latestMediaViews,
-        // ...(mediaListCollections?.map(
-        //   (ml) =>
-        //     ({
-        //       title: ml.Name,
-        //       queryKey: ["home", "mediaList", ml.Id!],
-        //       queryFn: async () => ml,
-        //       type: "MediaListSection",
-        //       orientation: "vertical",
-        //     } as Section)
-        // ) || []),
-        {
-          title: t("home.suggested_movies"),
-          queryKey: ["home", "suggestedMovies", user?.Id],
-          queryFn: async () =>
-            (
-              await getSuggestionsApi(api).getSuggestions({
-                userId: user?.Id,
-                limit: 10,
-                mediaType: ["Video"],
-                type: ["Movie"],
-              })
-            ).data.Items || [],
-          type: "ScrollingCollectionList",
-          orientation: "vertical",
-        },
-        {
-          title: t("home.suggested_episodes"),
-          queryKey: ["home", "suggestedEpisodes", user?.Id],
-          queryFn: async () => {
-            try {
-              const suggestions = await getSuggestions(api, user.Id);
-              const nextUpPromises = suggestions.map((series) =>
-                getNextUp(api, user.Id, series.Id),
-              );
-              const nextUpResults = await Promise.all(nextUpPromises);
-
-              return nextUpResults.filter((item) => item !== null) || [];
-            } catch (error) {
-              console.error("Error fetching data:", error);
-              return [];
-            }
-          },
-          type: "ScrollingCollectionList",
-          orientation: "horizontal",
-        },
+    const latestMediaViews = collections.map((c) => {
+      const includeItemTypes: BaseItemKind[] =
+        c.CollectionType === "tvshows" ? ["Series"] : ["Movie"];
+      const title = t("home.recently_added_in", { libraryName: c.Name });
+      const queryKey = [
+        "home",
+        `recentlyAddedIn${c.CollectionType}`,
+        user?.Id!,
+        c.Id!,
       ];
-      return ss;
-    }, [api, user?.Id, collections]);
-  } else {
-    sections = useMemo(() => {
-      if (!api || !user?.Id) return [];
-      const ss: Section[] = [];
+      return createCollectionConfig(
+        title || "",
+        queryKey,
+        includeItemTypes,
+        c.Id,
+      );
+    });
 
-      for (const key in settings.home?.sections) {
-        // @ts-expect-error
-        const section = settings.home?.sections[key];
-        const id = section.title || key;
-        ss.push({
-          title: id,
-          queryKey: ["home", id],
-          queryFn: async () => {
-            if (section.items) {
-              const response = await getItemsApi(api).getItems({
-                userId: user?.Id,
-                limit: section.items?.limit || 25,
-                recursive: true,
-                includeItemTypes: section.items?.includeItemTypes,
-                sortBy: section.items?.sortBy,
-                sortOrder: section.items?.sortOrder,
-                filters: section.items?.filters,
-                parentId: section.items?.parentId,
-              });
-              return response.data.Items || [];
-            }
-            if (section.nextUp) {
-              const response = await getTvShowsApi(api).getNextUp({
-                userId: user?.Id,
-                fields: ["MediaSourceCount"],
-                limit: section.items?.limit || 25,
-                enableImageTypes: ["Primary", "Backdrop", "Thumb"],
-                enableResumable: section.items?.enableResumable,
-                enableRewatching: section.items?.enableRewatching,
-              });
-              return response.data.Items || [];
-            }
+    const ss: Section[] = [
+      {
+        title: t("home.continue_watching"),
+        queryKey: ["home", "resumeItems"],
+        queryFn: async () =>
+          (
+            await getItemsApi(api).getResumeItems({
+              userId: user.Id,
+              enableImageTypes: ["Primary", "Backdrop", "Thumb"],
+              includeItemTypes: ["Movie", "Series", "Episode"],
+            })
+          ).data.Items || [],
+        type: "ScrollingCollectionList",
+        orientation: "horizontal",
+      },
+      {
+        title: t("home.next_up"),
+        queryKey: ["home", "nextUp-all"],
+        queryFn: async () =>
+          (
+            await getTvShowsApi(api).getNextUp({
+              userId: user?.Id,
+              fields: ["MediaSourceCount"],
+              limit: 20,
+              enableImageTypes: ["Primary", "Backdrop", "Thumb"],
+              enableResumable: false,
+            })
+          ).data.Items || [],
+        type: "ScrollingCollectionList",
+        orientation: "horizontal",
+      },
+      ...latestMediaViews,
+      // ...(mediaListCollections?.map(
+      //   (ml) =>
+      //     ({
+      //       title: ml.Name,
+      //       queryKey: ["home", "mediaList", ml.Id!],
+      //       queryFn: async () => ml,
+      //       type: "MediaListSection",
+      //       orientation: "vertical",
+      //     } as Section)
+      // ) || []),
+      {
+        title: t("home.suggested_movies"),
+        queryKey: ["home", "suggestedMovies", user?.Id],
+        queryFn: async () =>
+          (
+            await getSuggestionsApi(api).getSuggestions({
+              userId: user?.Id,
+              limit: 10,
+              mediaType: ["Video"],
+              type: ["Movie"],
+            })
+          ).data.Items || [],
+        type: "ScrollingCollectionList",
+        orientation: "vertical",
+      },
+      {
+        title: t("home.suggested_episodes"),
+        queryKey: ["home", "suggestedEpisodes", user?.Id],
+        queryFn: async () => {
+          try {
+            const suggestions = await getSuggestions(api, user.Id);
+            const nextUpPromises = suggestions.map((series) =>
+              getNextUp(api, user.Id, series.Id),
+            );
+            const nextUpResults = await Promise.all(nextUpPromises);
 
-            if (section.latest) {
-              const response = await getUserLibraryApi(api).getLatestMedia({
-                userId: user?.Id,
-                includeItemTypes: section.latest?.includeItemTypes,
-                limit: section.latest?.limit || 25,
-                isPlayed: section.latest?.isPlayed,
-                groupItems: section.latest?.groupItems,
-              });
-              return response.data || [];
-            }
+            return nextUpResults.filter((item) => item !== null) || [];
+          } catch (error) {
+            console.error("Error fetching data:", error);
             return [];
-          },
-          type: "ScrollingCollectionList",
-          orientation: section?.orientation || "vertical",
-        });
-      }
-      return ss;
-    }, [api, user?.Id, settings.home?.sections]);
-  }
+          }
+        },
+        type: "ScrollingCollectionList",
+        orientation: "horizontal",
+      },
+    ];
+    return ss;
+  }, [api, user?.Id, collections, createCollectionConfig, t]);
+
+  const customSections = useMemo(() => {
+    if (!api || !user?.Id) return [];
+    const ss: Section[] = [];
+
+    for (const key in settings.home?.sections) {
+      // @ts-expect-error
+      const section = settings.home?.sections[key];
+      const id = section.title || key;
+      ss.push({
+        title: id,
+        queryKey: ["home", id],
+        queryFn: async () => {
+          if (section.items) {
+            const response = await getItemsApi(api).getItems({
+              userId: user?.Id,
+              limit: section.items?.limit || 25,
+              recursive: true,
+              includeItemTypes: section.items?.includeItemTypes,
+              sortBy: section.items?.sortBy,
+              sortOrder: section.items?.sortOrder,
+              filters: section.items?.filters,
+              parentId: section.items?.parentId,
+            });
+            return response.data.Items || [];
+          }
+          if (section.nextUp) {
+            const response = await getTvShowsApi(api).getNextUp({
+              userId: user?.Id,
+              fields: ["MediaSourceCount"],
+              limit: section.items?.limit || 25,
+              enableImageTypes: ["Primary", "Backdrop", "Thumb"],
+              enableResumable: section.items?.enableResumable,
+              enableRewatching: section.items?.enableRewatching,
+            });
+            return response.data.Items || [];
+          }
+
+          if (section.latest) {
+            const response = await getUserLibraryApi(api).getLatestMedia({
+              userId: user?.Id,
+              includeItemTypes: section.latest?.includeItemTypes,
+              limit: section.latest?.limit || 25,
+              isPlayed: section.latest?.isPlayed,
+              groupItems: section.latest?.groupItems,
+            });
+            return response.data || [];
+          }
+          return [];
+        },
+        type: "ScrollingCollectionList",
+        orientation: section?.orientation || "vertical",
+      });
+    }
+    return ss;
+  }, [api, user?.Id, settings.home?.sections]);
+
+  const sections: Section[] =
+    !settings?.home || !settings?.home?.sections
+      ? defaultSections
+      : customSections;
 
   if (isConnected === false) {
     return (

components/settings/OptimizedServerForm.tsx

@@ -1,45 +0,0 @@
-import { useTranslation } from "react-i18next";
-import { Linking, TextInput, View } from "react-native";
-import { Text } from "../common/Text";
-
-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,12 +1,11 @@
+import { useQuery } from "@tanstack/react-query";
+import { useTranslation } from "react-i18next";
+import { View } from "react-native";
+import { toast } from "sonner-native";
 import { Text } from "@/components/common/Text";
 import { Colors } from "@/constants/Colors";
 import { useHaptic } from "@/hooks/useHaptic";
 import { useDownload } from "@/providers/DownloadProvider";
-import { useQuery } from "@tanstack/react-query";
-import * as FileSystem from "expo-file-system";
-import { useTranslation } from "react-i18next";
-import { View } from "react-native";
-import { toast } from "sonner-native";
 import { ListGroup } from "../list/ListGroup";
 import { ListItem } from "../list/ListItem";
 
@@ -17,22 +16,15 @@ export const StorageSettings = () => {
   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 };
-    },
+    queryKey: ["appSize"],
+    queryFn: appSizeUsage,
   });
 
   const onDeleteClicked = async () => {
     try {
       await deleteAllFiles();
       successHapticFeedback();
-    } catch (e) {
+    } catch (_e) {
       errorHapticFeedback();
       toast.error(t("home.settings.toasts.error_deleting_files"));
     }
@@ -67,10 +59,7 @@ export const StorageSettings = () => {
               />
               <View
                 style={{
-                  width: `${
-                    ((size.total - size.remaining - size.app) / size.total) *
-                    100
-                  }%`,
+                  width: `${((size.total - size.remaining - size.app) / size.total) * 100}%`,
                   backgroundColor: Colors.primaryLightRGB,
                 }}
               />

components/video-player/controls/Controls.tsx

@@ -1,25 +1,3 @@
-import { Loader } from "@/components/Loader";
-import { Text } from "@/components/common/Text";
-import ContinueWatchingOverlay from "@/components/video-player/controls/ContinueWatchingOverlay";
-import { useAdjacentItems } from "@/hooks/useAdjacentEpisodes";
-import { useCreditSkipper } from "@/hooks/useCreditSkipper";
-import { useHaptic } from "@/hooks/useHaptic";
-import { useIntroSkipper } from "@/hooks/useIntroSkipper";
-import { useTrickplay } from "@/hooks/useTrickplay";
-import type { TrackInfo, VlcPlayerViewRef } from "@/modules/VlcPlayer.types";
-import * as ScreenOrientation from "@/packages/expo-screen-orientation";
-import { apiAtom } from "@/providers/JellyfinProvider";
-import { VideoPlayer, useSettings } from "@/utils/atoms/settings";
-import { getDefaultPlaySettings } from "@/utils/jellyfin/getDefaultPlaySettings";
-import { getItemById } from "@/utils/jellyfin/user-library/getItemById";
-import { writeToLog } from "@/utils/log";
-import {
-  formatTimeString,
-  msToTicks,
-  secondsToMs,
-  ticksToMs,
-  ticksToSeconds,
-} from "@/utils/time";
 import { Ionicons, MaterialIcons } from "@expo/vector-icons";
 import type {
   BaseItemDto,
@@ -29,7 +7,7 @@ import { Image } from "expo-image";
 import { useLocalSearchParams, useRouter } from "expo-router";
 import { useAtom } from "jotai";
 import { debounce } from "lodash";
-import React, {
+import {
   type Dispatch,
   type FC,
   type MutableRefObject,
@@ -42,27 +20,48 @@ import React, {
 import {
   Platform,
   TouchableOpacity,
-  View,
   useWindowDimensions,
+  View,
 } from "react-native";
 import { Slider } from "react-native-awesome-slider";
 import {
-  type SharedValue,
   runOnJS,
+  type SharedValue,
   useAnimatedReaction,
   useSharedValue,
 } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Text } from "@/components/common/Text";
+import { Loader } from "@/components/Loader";
+import ContinueWatchingOverlay from "@/components/video-player/controls/ContinueWatchingOverlay";
+import { useAdjacentItems } from "@/hooks/useAdjacentEpisodes";
+import { useCreditSkipper } from "@/hooks/useCreditSkipper";
+import { useHaptic } from "@/hooks/useHaptic";
+import { useIntroSkipper } from "@/hooks/useIntroSkipper";
+import { useTrickplay } from "@/hooks/useTrickplay";
+import type { TrackInfo, VlcPlayerViewRef } from "@/modules/VlcPlayer.types";
+import { apiAtom } from "@/providers/JellyfinProvider";
+import { useSettings } from "@/utils/atoms/settings";
+import { getDefaultPlaySettings } from "@/utils/jellyfin/getDefaultPlaySettings";
+import { getItemById } from "@/utils/jellyfin/user-library/getItemById";
+import { writeToLog } from "@/utils/log";
+import {
+  formatTimeString,
+  msToTicks,
+  secondsToMs,
+  ticksToMs,
+  ticksToSeconds,
+} from "@/utils/time";
 import AudioSlider from "./AudioSlider";
 import BrightnessSlider from "./BrightnessSlider";
-import { EpisodeList } from "./EpisodeList";
-import NextEpisodeCountDownButton from "./NextEpisodeCountDownButton";
-import SkipButton from "./SkipButton";
-import { VideoTouchOverlay } from "./VideoTouchOverlay";
 import { ControlProvider } from "./contexts/ControlContext";
 import { VideoProvider } from "./contexts/VideoContext";
 import DropdownView from "./dropdown/DropdownView";
+import { EpisodeList } from "./EpisodeList";
+import NextEpisodeCountDownButton from "./NextEpisodeCountDownButton";
+import SkipButton from "./SkipButton";
 import { useControlsTimeout } from "./useControlsTimeout";
+import { VideoTouchOverlay } from "./VideoTouchOverlay";
 
 interface Props {
   item: BaseItemDto;
@@ -119,7 +118,6 @@ export const Controls: FC<Props> = ({
   setSubtitleTrack,
   setAudioTrack,
   offline = false,
-  enableTrickplay = true,
   isVlc = false,
 }) => {
   const [settings, updateSettings] = useSettings();
@@ -134,13 +132,16 @@ export const Controls: FC<Props> = ({
   const [showAudioSlider, setShowAudioSlider] = useState(false);
 
   const { height: screenHeight, width: screenWidth } = useWindowDimensions();
-  const { previousItem, nextItem } = useAdjacentItems({ item });
+  const { previousItem, nextItem } = useAdjacentItems({
+    item,
+    isOffline: offline,
+  });
   const {
     trickPlayUrl,
     calculateTrickplayUrl,
     trickplayInfo,
     prefetchAllTrickplayImages,
-  } = useTrickplay(item, !offline && enableTrickplay);
+  } = useTrickplay(item);
 
   const [currentTime, setCurrentTime] = useState(0);
   const [remainingTime, setRemainingTime] = useState(Number.POSITIVE_INFINITY);
@@ -175,19 +176,21 @@ export const Controls: FC<Props> = ({
   }>();
 
   const { showSkipButton, skipIntro } = useIntroSkipper(
-    offline ? undefined : item.Id,
+    item?.Id!,
     currentTime,
     seek,
     play,
     isVlc,
+    offline,
   );
 
   const { showSkipCreditButton, skipCredit } = useCreditSkipper(
-    offline ? undefined : item.Id,
+    item?.Id!,
     currentTime,
     seek,
     play,
     isVlc,
+    offline,
   );
 
   const goToItemCommon = useCallback(
@@ -195,9 +198,7 @@ export const Controls: FC<Props> = ({
       if (!item || !settings) {
         return;
       }
-
       lightHapticFeedback();
-
       const previousIndexes = {
         subtitleIndex: subtitleIndex
           ? Number.parseInt(subtitleIndex)
@@ -215,15 +216,18 @@ export const Controls: FC<Props> = ({
         previousIndexes,
         mediaSource ?? undefined,
       );
-
       const queryParams = new URLSearchParams({
         itemId: item.Id ?? "",
         audioIndex: defaultAudioIndex?.toString() ?? "",
         subtitleIndex: defaultSubtitleIndex?.toString() ?? "",
         mediaSourceId: newMediaSource?.Id ?? "",
         bitrateValue: bitrateValue?.toString(),
+        playbackPosition:
+          item.UserData?.PlaybackPositionTicks?.toString() ?? "",
       }).toString();
 
+      console.log("queryParams", queryParams);
+
       // @ts-expect-error
       router.replace(`player/direct-player?${queryParams}`);
     },
@@ -241,7 +245,10 @@ export const Controls: FC<Props> = ({
     ({
       isAutoPlay,
       resetWatchCount,
-    }: { isAutoPlay?: boolean; resetWatchCount?: boolean }) => {
+    }: {
+      isAutoPlay?: boolean;
+      resetWatchCount?: boolean;
+    }) => {
       if (!nextItem) {
         return;
       }
@@ -303,10 +310,18 @@ export const Controls: FC<Props> = ({
 
   const goToItem = useCallback(
     async (itemId: string) => {
-      const gotoItem = await getItemById(api, itemId);
-      if (!gotoItem) {
+      if (offline) {
+        const queryParams = new URLSearchParams({
+          itemId: itemId,
+          playbackPosition:
+            item.UserData?.PlaybackPositionTicks?.toString() ?? "",
+        }).toString();
+        // @ts-expect-error
+        router.replace(`player/direct-player?${queryParams}`);
         return;
       }
+      const gotoItem = await getItemById(api, itemId);
+      if (!gotoItem) return;
       goToItemCommon(gotoItem);
     },
     [goToItemCommon, api],
@@ -560,8 +575,8 @@ export const Controls: FC<Props> = ({
             pointerEvents={showControls ? "auto" : "none"}
             className={"flex flex-row w-full pt-2"}
           >
-            {!Platform.isTV && (
-              <View className='mr-auto'>
+            <View className='mr-auto'>
+              {!Platform.isTV && (!offline || !mediaSource?.TranscodingUrl) && (
                 <VideoProvider
                   getAudioTracks={getAudioTracks}
                   getSubtitleTracks={getSubtitleTracks}
@@ -571,26 +586,25 @@ export const Controls: FC<Props> = ({
                 >
                   <DropdownView />
                 </VideoProvider>
-              </View>
-            )}
+              )}
+            </View>
 
             <View className='flex flex-row items-center space-x-2 '>
-              {!Platform.isTV &&
-                settings.defaultPlayer === VideoPlayer.VLC_4 && (
-                  <TouchableOpacity
-                    onPress={startPictureInPicture}
-                    className='aspect-square flex flex-col rounded-xl items-center justify-center p-2'
-                  >
-                    <MaterialIcons
-                      name='picture-in-picture'
-                      size={24}
-                      color='white'
-                      style={{ opacity: showControls ? 1 : 0 }}
-                    />
-                  </TouchableOpacity>
-                )}
+              {false && (
+                <TouchableOpacity
+                  onPress={startPictureInPicture}
+                  className='aspect-square flex flex-col rounded-xl items-center justify-center p-2'
+                >
+                  <MaterialIcons
+                    name='picture-in-picture'
+                    size={24}
+                    color='white'
+                    style={{ opacity: showControls ? 1 : 0 }}
+                  />
+                </TouchableOpacity>
+              )}
 
-              {item?.Type === "Episode" && !offline && (
+              {item?.Type === "Episode" && (
                 <TouchableOpacity
                   onPress={() => {
                     switchOnEpisodeMode();
@@ -629,16 +643,14 @@ export const Controls: FC<Props> = ({
                   color='white'
                 />
               </TouchableOpacity>
-              {/* )} */}
               <TouchableOpacity
                 onPress={onClose}
-                className='aspect-square flex flex-col rounded-xl items-center justify-center p-2'
+                className='aspect-square flex flex-col l items-center justify-center p-2'
               >
                 <Ionicons name='close' size={24} color='white' />
               </TouchableOpacity>
             </View>
           </View>
-
           <View
             style={{
               position: "absolute",

components/video-player/controls/EpisodeList.tsx

@@ -1,26 +1,30 @@
+import { Ionicons } from "@expo/vector-icons";
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { getTvShowsApi } from "@jellyfin/sdk/lib/utils/api";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useGlobalSearchParams } from "expo-router";
+import { atom, useAtom } from "jotai";
+import { useEffect, useMemo, useRef } from "react";
+import { TouchableOpacity, View } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
 import ContinueWatchingPoster from "@/components/ContinueWatchingPoster";
-import { DownloadSingleItem } from "@/components/DownloadItem";
-import { Loader } from "@/components/Loader";
 import {
   HorizontalScroll,
   type HorizontalScrollRef,
 } from "@/components/common/HorrizontalScroll";
 import { Text } from "@/components/common/Text";
+import { DownloadSingleItem } from "@/components/DownloadItem";
+import { Loader } from "@/components/Loader";
 import {
   SeasonDropdown,
   type SeasonIndexState,
 } from "@/components/series/SeasonDropdown";
+import { useItemQuery } from "@/hooks/useItemQuery";
+import { useDownload } from "@/providers/DownloadProvider";
+import type { DownloadedItem } from "@/providers/Downloads/types";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
 import { runtimeTicksToSeconds } from "@/utils/time";
-import { Ionicons } from "@expo/vector-icons";
-import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { getTvShowsApi } from "@jellyfin/sdk/lib/utils/api";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { atom, useAtom } from "jotai";
-import { useEffect, useMemo, useRef, useState } from "react";
-import { TouchableOpacity, View } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 type Props = {
   item: BaseItemDto;
@@ -33,12 +37,15 @@ export const seasonIndexAtom = atom<SeasonIndexState>({});
 export const EpisodeList: React.FC<Props> = ({ item, close, goToItem }) => {
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
-  const insets = useSafeAreaInsets(); // Get safe area insets
   const [seasonIndexState, setSeasonIndexState] = useAtom(seasonIndexAtom);
   const scrollViewRef = useRef<HorizontalScrollRef>(null); // Reference to the HorizontalScroll
   const scrollToIndex = (index: number) => {
     scrollViewRef.current?.scrollToIndex(index, 100);
   };
+  const { offline } = useGlobalSearchParams<{
+    offline: string;
+  }>();
+  const isOffline = offline === "true";
 
   // Set the initial season index
   useEffect(() => {
@@ -50,23 +57,35 @@ export const EpisodeList: React.FC<Props> = ({ item, close, goToItem }) => {
     }
   }, []);
 
-  const seasonIndex = seasonIndexState[item.SeriesId ?? ""];
-  const [seriesItem, setSeriesItem] = useState<BaseItemDto | null>(null);
+  const { downloadedFiles } = useDownload();
 
-  // This effect fetches the series item data/
-  useEffect(() => {
-    if (item.SeriesId) {
-      getUserItemData({ api, userId: user?.Id, itemId: item.SeriesId }).then(
-        (res) => {
-          setSeriesItem(res);
-        },
-      );
-    }
-  }, [item.SeriesId]);
+  const seasonIndex = seasonIndexState[item.SeriesId ?? ""];
+  const { data: seriesItem } = useItemQuery(item.SeriesId!, isOffline);
 
   const { data: seasons } = useQuery({
     queryKey: ["seasons", item.SeriesId],
     queryFn: async () => {
+      if (isOffline) {
+        if (!item.SeriesId) return [];
+        const seriesEpisodes = downloadedFiles?.filter(
+          (f: DownloadedItem) => f.item.SeriesId === item.SeriesId,
+        );
+        const seasonNumbers = [
+          ...new Set(
+            seriesEpisodes
+              ?.map((f: DownloadedItem) => f.item.ParentIndexNumber)
+              .filter(Boolean),
+          ),
+        ];
+        // Create fake season objects
+        return seasonNumbers.map((seasonNumber) => ({
+          Id: seasonNumber,
+          IndexNumber: seasonNumber,
+          Name: `Season ${seasonNumber}`,
+          SeriesId: item.SeriesId,
+        }));
+      }
+
       if (!api || !user?.Id || !item.SeriesId) return [];
       const response = await api.axiosInstance.get(
         `${api.basePath}/Shows/${item.SeriesId}/Seasons`,
@@ -93,9 +112,19 @@ export const EpisodeList: React.FC<Props> = ({ item, close, goToItem }) => {
     [seasons, seasonIndex],
   );
 
-  const { data: episodes, isFetching } = useQuery({
+  const { data: episodes } = useQuery({
     queryKey: ["episodes", item.SeriesId, selectedSeasonId],
     queryFn: async () => {
+      if (isOffline) {
+        if (!item.SeriesId) return [];
+        return downloadedFiles
+          ?.filter(
+            (f: DownloadedItem) =>
+              f.item.SeriesId === item.SeriesId &&
+              f.item.ParentIndexNumber === seasonIndex,
+          )
+          .map((f: DownloadedItem) => f.item);
+      }
       if (!api || !user?.Id || !item.Id || !selectedSeasonId) return [];
       const res = await getTvShowsApi(api).getEpisodes({
         seriesId: item.SeriesId || "",
@@ -112,7 +141,7 @@ export const EpisodeList: React.FC<Props> = ({ item, close, goToItem }) => {
 
   useEffect(() => {
     if (item?.Type === "Episode" && item.Id) {
-      const index = episodes?.findIndex((ep) => ep.Id === item.Id);
+      const index = episodes?.findIndex((ep: BaseItemDto) => ep.Id === item.Id);
       if (index !== undefined && index !== -1) {
         setTimeout(() => {
           scrollToIndex(index);
@@ -155,7 +184,7 @@ export const EpisodeList: React.FC<Props> = ({ item, close, goToItem }) => {
   }
 
   return (
-    <View
+    <SafeAreaView
       style={{
         position: "absolute",
         backgroundColor: "black",
@@ -163,92 +192,81 @@ export const EpisodeList: React.FC<Props> = ({ item, close, goToItem }) => {
         width: "100%",
       }}
     >
-      <>
-        <View
-          style={{
-            justifyContent: "space-between",
-          }}
-          className={"flex flex-row items-center space-x-2 z-10 p-4"}
-        >
-          {seriesItem && (
-            <SeasonDropdown
-              item={seriesItem}
-              seasons={seasons}
-              state={seasonIndexState}
-              onSelect={(season) => {
-                setSeasonIndexState((prev) => ({
-                  ...prev,
-                  [item.SeriesId ?? ""]: season.IndexNumber,
-                }));
-              }}
-            />
-          )}
-          <TouchableOpacity
-            onPress={async () => {
-              close();
+      <View
+        style={{
+          justifyContent: "space-between",
+        }}
+        className={"flex flex-row items-center space-x-2 z-10 p-4"}
+      >
+        {seriesItem && (
+          <SeasonDropdown
+            item={seriesItem}
+            seasons={seasons}
+            state={seasonIndexState}
+            onSelect={(season) => {
+              setSeasonIndexState((prev) => ({
+                ...prev,
+                [item.SeriesId ?? ""]: season.IndexNumber,
+              }));
             }}
-            className='aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2'
-          >
-            <Ionicons name='close' size={24} color='white' />
-          </TouchableOpacity>
-        </View>
+          />
+        )}
+        <TouchableOpacity
+          onPress={close}
+          className='aspect-square flex flex-col l items-center justify-center p-2'
+        >
+          <Ionicons name='close' size={24} color='white' />
+        </TouchableOpacity>
+      </View>
 
-        <HorizontalScroll
-          ref={scrollViewRef}
-          data={episodes}
-          extraData={item}
-          renderItem={(_item, idx) => (
-            <View
-              key={_item.Id}
-              style={{}}
-              className={`flex flex-col w-44 ${
-                item.Id !== _item.Id ? "opacity-75" : ""
+      <HorizontalScroll
+        ref={scrollViewRef}
+        data={episodes}
+        extraData={item}
+        renderItem={(_item, _idx) => (
+          <View
+            key={_item.Id}
+            style={{}}
+            className={`flex flex-col w-44 ${item.Id !== _item.Id ? "opacity-75" : ""
               }`}
+          >
+            <TouchableOpacity
+              onPress={() => {
+                goToItem(_item.Id);
+              }}
             >
-              <TouchableOpacity
-                onPress={() => {
-                  goToItem(_item.Id);
+              <ContinueWatchingPoster
+                item={_item}
+                useEpisodePoster
+                showPlayButton={_item.Id !== item.Id}
+              />
+            </TouchableOpacity>
+            <View className='shrink'>
+              <Text
+                numberOfLines={2}
+                style={{
+                  lineHeight: 18, // Adjust this value based on your text size
+                  height: 36, // lineHeight * 2 for consistent two-line space
                 }}
               >
-                <ContinueWatchingPoster
-                  item={_item}
-                  useEpisodePoster
-                  showPlayButton={_item.Id !== item.Id}
-                />
-              </TouchableOpacity>
-              <View className='shrink'>
-                <Text
-                  numberOfLines={2}
-                  style={{
-                    lineHeight: 18, // Adjust this value based on your text size
-                    height: 36, // lineHeight * 2 for consistent two-line space
-                  }}
-                >
-                  {_item.Name}
-                </Text>
-                <Text numberOfLines={1} className='text-xs text-neutral-475'>
-                  {`S${_item.ParentIndexNumber?.toString()}:E${_item.IndexNumber?.toString()}`}
-                </Text>
-                <Text className='text-xs text-neutral-500'>
-                  {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'
-              >
-                {_item.Overview}
+                {_item.Name}
+              </Text>
+              <Text numberOfLines={1} className='text-xs text-neutral-475'>
+                {`S${_item.ParentIndexNumber?.toString()}:E${_item.IndexNumber?.toString()}`}
+              </Text>
+              <Text className='text-xs text-neutral-500'>
+                {runtimeTicksToSeconds(_item.RunTimeTicks)}
               </Text>
             </View>
-          )}
-          keyExtractor={(e: BaseItemDto) => e.Id ?? ""}
-          estimatedItemSize={200}
-          showsHorizontalScrollIndicator={false}
-        />
-      </>
-    </View>
+            <Text numberOfLines={5} className='text-xs text-neutral-500 shrink'>
+              {_item.Overview}
+            </Text>
+          </View>
+        )}
+        keyExtractor={(e: BaseItemDto) => e.Id ?? ""}
+        estimatedItemSize={200}
+        showsHorizontalScrollIndicator={false}
+      />
+    </SafeAreaView>
   );
 };

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

@@ -1,3 +1,4 @@
+import { SubtitleDeliveryMethod } from "@jellyfin/sdk/lib/generated-client";
 import { router, useLocalSearchParams } from "expo-router";
 import type React from "react";
 import {
@@ -9,7 +10,7 @@ import {
   useState,
 } from "react";
 import type { TrackInfo } from "@/modules/VlcPlayer.types";
-import { useSettings, VideoPlayer } from "@/utils/atoms/settings";
+import { useSettings } from "@/utils/atoms/settings";
 import type { Track } from "../types";
 import { useControlContext } from "./ControlContext";
 
@@ -48,7 +49,7 @@ export const VideoProvider: React.FC<VideoProviderProps> = ({
 }) => {
   const [audioTracks, setAudioTracks] = useState<Track[] | null>(null);
   const [subtitleTracks, setSubtitleTracks] = useState<Track[] | null>(null);
-  const [settings] = useSettings();
+  const [_settings] = useSettings();
 
   const ControlContext = useControlContext();
   const isVideoLoaded = ControlContext?.isVideoLoaded;
@@ -67,13 +68,17 @@ export const VideoProvider: React.FC<VideoProviderProps> = ({
       playbackPosition: string;
     }>();
 
-  const onTextBasedSubtitle = useMemo(
-    () =>
+  const onTextBasedSubtitle = useMemo(() => {
+    return (
       allSubs.find(
-        (s) => s.Index?.toString() === subtitleIndex && s.IsTextSubtitleStream,
-      ) || subtitleIndex === "-1",
-    [allSubs, subtitleIndex],
-  );
+        (s) =>
+          s.Index?.toString() === subtitleIndex &&
+          (s.DeliveryMethod === SubtitleDeliveryMethod.Embed ||
+            s.DeliveryMethod === SubtitleDeliveryMethod.Hls ||
+            s.DeliveryMethod === SubtitleDeliveryMethod.External),
+      ) || subtitleIndex === "-1"
+    );
+  }, [allSubs, subtitleIndex]);
 
   const setPlayerParams = ({
     chosenAudioIndex = audioIndex,
@@ -128,30 +133,32 @@ export const VideoProvider: React.FC<VideoProviderProps> = ({
   useEffect(() => {
     const fetchTracks = async () => {
       if (getSubtitleTracks) {
-        const subtitleData = await getSubtitleTracks();
+        let subtitleData = await getSubtitleTracks();
+        // Only FOR VLC 3, If we're transcoding, we need to reverse the subtitle data, because VLC reverses the HLS subtitles.
+        if (
+          mediaSource?.TranscodingUrl &&
+          subtitleData &&
+          subtitleData.length > 1
+        ) {
+          subtitleData = [subtitleData[0], ...subtitleData.slice(1).reverse()];
+        }
 
-        // Step 1: Move external subs to the end, because VLC puts external subs at the end
-        const sortedSubs = allSubs.sort(
-          (a, b) => Number(a.IsExternal) - Number(b.IsExternal),
-        );
-
-        // Step 2: Apply VLC indexing logic
-        let textSubIndex = settings.defaultPlayer === VideoPlayer.VLC_4 ? 0 : 1;
-        const processedSubs: Track[] = sortedSubs?.map((sub) => {
-          // Always increment for non-transcoding subtitles
-          // Only increment for text-based subtitles when transcoding
+        let embedSubIndex = 1;
+        const processedSubs: Track[] = allSubs?.map((sub) => {
+          /** A boolean value determining if we should increment the embedSubIndex, currently only Embed and Hls subtitles are automatically added into VLC Player */
           const shouldIncrement =
-            !mediaSource?.TranscodingUrl || sub.IsTextSubtitleStream;
-          const vlcIndex = subtitleData?.at(textSubIndex)?.index ?? -1;
-          const finalIndex = shouldIncrement ? vlcIndex : (sub.Index ?? -1);
-
-          if (shouldIncrement) textSubIndex++;
+            sub.DeliveryMethod === SubtitleDeliveryMethod.Embed ||
+            sub.DeliveryMethod === SubtitleDeliveryMethod.Hls ||
+            sub.DeliveryMethod === SubtitleDeliveryMethod.External;
+          /** The index of subtitle inside VLC Player Itself */
+          const vlcIndex = subtitleData?.at(embedSubIndex)?.index ?? -1;
+          if (shouldIncrement) embedSubIndex++;
           return {
             name: sub.DisplayTitle || "Undefined Subtitle",
             index: sub.Index ?? -1,
             setTrack: () =>
               shouldIncrement
-                ? setTrackParams("subtitle", finalIndex, sub.Index ?? -1)
+                ? setTrackParams("subtitle", vlcIndex, sub.Index ?? -1)
                 : setPlayerParams({
                     chosenSubtitleIndex: sub.Index?.toString(),
                   }),

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

@@ -19,7 +19,7 @@ const DropdownView = () => {
   ];
   const router = useRouter();
 
-  const { subtitleIndex, audioIndex, bitrateValue, playbackPosition } =
+  const { subtitleIndex, audioIndex, bitrateValue, playbackPosition, offline } =
     useLocalSearchParams<{
       itemId: string;
       audioIndex: string;
@@ -27,8 +27,11 @@ const DropdownView = () => {
       mediaSourceId: string;
       bitrateValue: string;
       playbackPosition: string;
+      offline: string;
     }>();
 
+  const isOffline = offline === "true";
+
   const changeBitrate = useCallback(
     (bitrate: string) => {
       const queryParams = new URLSearchParams({
@@ -61,32 +64,34 @@ const DropdownView = () => {
         collisionPadding={8}
         sideOffset={8}
       >
-        <DropdownMenu.Sub>
-          <DropdownMenu.SubTrigger key='qualitytrigger'>
-            Quality
-          </DropdownMenu.SubTrigger>
-          <DropdownMenu.SubContent
-            alignOffset={-10}
-            avoidCollisions={true}
-            collisionPadding={0}
-            loop={true}
-            sideOffset={10}
-          >
-            {BITRATES?.map((bitrate, idx: number) => (
-              <DropdownMenu.CheckboxItem
-                key={`quality-item-${idx}`}
-                value={bitrateValue === (bitrate.value?.toString() ?? "")}
-                onValueChange={() =>
-                  changeBitrate(bitrate.value?.toString() ?? "")
-                }
-              >
-                <DropdownMenu.ItemTitle key={`audio-item-title-${idx}`}>
-                  {bitrate.key}
-                </DropdownMenu.ItemTitle>
-              </DropdownMenu.CheckboxItem>
-            ))}
-          </DropdownMenu.SubContent>
-        </DropdownMenu.Sub>
+        {!isOffline && (
+          <DropdownMenu.Sub>
+            <DropdownMenu.SubTrigger key='qualitytrigger'>
+              Quality
+            </DropdownMenu.SubTrigger>
+            <DropdownMenu.SubContent
+              alignOffset={-10}
+              avoidCollisions={true}
+              collisionPadding={0}
+              loop={true}
+              sideOffset={10}
+            >
+              {BITRATES?.map((bitrate, idx: number) => (
+                <DropdownMenu.CheckboxItem
+                  key={`quality-item-${idx}`}
+                  value={bitrateValue === (bitrate.value?.toString() ?? "")}
+                  onValueChange={() =>
+                    changeBitrate(bitrate.value?.toString() ?? "")
+                  }
+                >
+                  <DropdownMenu.ItemTitle key={`audio-item-title-${idx}`}>
+                    {bitrate.key}
+                  </DropdownMenu.ItemTitle>
+                </DropdownMenu.CheckboxItem>
+              ))}
+            </DropdownMenu.SubContent>
+          </DropdownMenu.Sub>
+        )}
         <DropdownMenu.Sub>
           <DropdownMenu.SubTrigger key='subtitle-trigger'>
             Subtitle

hooks/useAdjacentEpisodes.ts

@@ -1,21 +1,63 @@
-import { apiAtom } from "@/providers/JellyfinProvider";
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
 import { getTvShowsApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery } from "@tanstack/react-query";
 import { useAtomValue } from "jotai";
 import { useMemo } from "react";
+import { useDownload } from "@/providers/DownloadProvider";
+import { apiAtom } from "@/providers/JellyfinProvider";
 
 interface AdjacentEpisodesProps {
   item?: BaseItemDto | null;
+  isOffline?: boolean;
 }
 
-export const useAdjacentItems = ({ item }: AdjacentEpisodesProps) => {
+export const useAdjacentItems = ({
+  item,
+  isOffline = false,
+}: AdjacentEpisodesProps) => {
   const api = useAtomValue(apiAtom);
+  const { downloadedFiles } = useDownload();
 
   const { data: adjacentItems } = useQuery({
-    queryKey: ["adjacentItems", item?.Id, item?.SeriesId],
+    queryKey: ["adjacentItems", item?.Id, item?.SeriesId, isOffline],
     queryFn: async (): Promise<BaseItemDto[] | null> => {
-      if (!api || !item || !item.SeriesId) {
+      if (!item || !item.SeriesId) {
+        return null;
+      }
+
+      if (isOffline) {
+        if (!downloadedFiles) return null;
+        const seriesEpisodes = downloadedFiles
+          .filter((f) => f.item.SeriesId === item.SeriesId)
+          .map((f) => f.item);
+
+        seriesEpisodes.sort((a, b) => {
+          if (a.ParentIndexNumber !== b.ParentIndexNumber) {
+            return (a.ParentIndexNumber ?? 0) - (b.ParentIndexNumber ?? 0);
+          }
+          return (a.IndexNumber ?? 0) - (b.IndexNumber ?? 0);
+        });
+
+        const currentIndex = seriesEpisodes.findIndex(
+          (ep) => ep.Id === item.Id,
+        );
+
+        if (currentIndex === -1) {
+          return null;
+        }
+
+        const result: BaseItemDto[] = [];
+        if (currentIndex > 0) {
+          result.push(seriesEpisodes[currentIndex - 1]);
+        }
+        result.push(seriesEpisodes[currentIndex]);
+        if (currentIndex < seriesEpisodes.length - 1) {
+          result.push(seriesEpisodes[currentIndex + 1]);
+        }
+        return result;
+      }
+
+      if (!api) {
         return null;
       }
 
@@ -29,7 +71,7 @@ export const useAdjacentItems = ({ item }: AdjacentEpisodesProps) => {
       return res.data.Items || null;
     },
     enabled:
-      !!api &&
+      (isOffline || !!api) &&
       !!item?.Id &&
       !!item?.SeriesId &&
       (item?.Type === "Episode" || item?.Type === "Audio"),

hooks/useCreditSkipper.ts

@@ -1,33 +1,16 @@
-import { apiAtom } from "@/providers/JellyfinProvider";
-import { getAuthHeaders } from "@/utils/jellyfin/jellyfin";
-import { writeToLog } from "@/utils/log";
-import { msToSeconds, secondsToMs } from "@/utils/time";
-import { useQuery } from "@tanstack/react-query";
-import { useAtom } from "jotai";
 import { useCallback, useEffect, useState } from "react";
+import { useSegments } from "@/utils/segments";
+import { msToSeconds, secondsToMs } from "@/utils/time";
 import { useHaptic } from "./useHaptic";
 
-interface CreditTimestamps {
-  Introduction: {
-    Start: number;
-    End: number;
-    Valid: boolean;
-  };
-  Credits: {
-    Start: number;
-    End: number;
-    Valid: boolean;
-  };
-}
-
 export const useCreditSkipper = (
-  itemId: string | undefined,
+  itemId: string,
   currentTime: number,
   seek: (time: number) => void,
   play: () => void,
   isVlc = false,
+  isOffline = false,
 ) => {
-  const [api] = useAtom(apiAtom);
   const [showSkipCreditButton, setShowSkipCreditButton] = useState(false);
   const lightHapticFeedback = useHaptic("light");
 
@@ -43,50 +26,28 @@ export const useCreditSkipper = (
     seek(seconds);
   };
 
-  const { data: creditTimestamps } = useQuery<CreditTimestamps | null>({
-    queryKey: ["creditTimestamps", itemId],
-    queryFn: async () => {
-      if (!itemId) {
-        return null;
-      }
-
-      const res = await api?.axiosInstance.get(
-        `${api.basePath}/Episode/${itemId}/Timestamps`,
-        {
-          headers: getAuthHeaders(api),
-        },
-      );
-
-      if (res?.status !== 200) {
-        return null;
-      }
-
-      return res?.data;
-    },
-    enabled: !!itemId,
-    retry: false,
-  });
+  const { data: segments } = useSegments(itemId, isOffline);
+  const creditTimestamps = segments?.creditSegments?.[0];
 
   useEffect(() => {
     if (creditTimestamps) {
       setShowSkipCreditButton(
-        currentTime > creditTimestamps.Credits.Start &&
-          currentTime < creditTimestamps.Credits.End,
+        currentTime > creditTimestamps.startTime &&
+          currentTime < creditTimestamps.endTime,
       );
     }
   }, [creditTimestamps, currentTime]);
 
   const skipCredit = useCallback(() => {
     if (!creditTimestamps) return;
-    console.log(`Skipping credits to ${creditTimestamps.Credits.End}`);
     try {
       lightHapticFeedback();
-      wrappedSeek(creditTimestamps.Credits.End);
+      wrappedSeek(creditTimestamps.endTime);
       setTimeout(() => {
         play();
       }, 200);
     } catch (error) {
-      writeToLog("ERROR", "Error skipping intro", error);
+      console.error("Error skipping credit", error);
     }
   }, [creditTimestamps]);
 

hooks/useDownloadedFileOpener.ts

@@ -1,31 +1,8 @@
-import { usePlaySettings } from "@/providers/PlaySettingsProvider";
-import { writeToLog } from "@/utils/log";
 import type { 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}`;
-};
+import { usePlaySettings } from "@/providers/PlaySettingsProvider";
+import { writeToLog } from "@/utils/log";
 
 export const useDownloadedFileOpener = () => {
   const router = useRouter();
@@ -33,9 +10,19 @@ export const useDownloadedFileOpener = () => {
 
   const openFile = useCallback(
     async (item: BaseItemDto) => {
+      if (!item.Id) {
+        writeToLog("ERROR", "Attempted to open a file without an ID.");
+        console.error("Attempted to open a file without an ID.");
+        return;
+      }
+      const queryParams = new URLSearchParams({
+        itemId: item.Id,
+        offline: "true",
+        playbackPosition:
+          item.UserData?.PlaybackPositionTicks?.toString() ?? "0",
+      });
       try {
-        // @ts-expect-error
-        router.push(`/player/direct-player?offline=true&itemId=${item.Id}`);
+        router.push(`/player/direct-player?${queryParams.toString()}`);
       } catch (error) {
         writeToLog("ERROR", "Error opening file", error);
         console.error("Error opening file:", error);

hooks/useIntroSkipper.ts

@@ -1,34 +1,21 @@
-import { apiAtom } from "@/providers/JellyfinProvider";
-import { getAuthHeaders } from "@/utils/jellyfin/jellyfin";
-import { writeToLog } from "@/utils/log";
-import { msToSeconds, secondsToMs } from "@/utils/time";
-import { useQuery } from "@tanstack/react-query";
-import { useAtom } from "jotai";
 import { useCallback, useEffect, useState } from "react";
+import { useSegments } from "@/utils/segments";
+import { msToSeconds, secondsToMs } from "@/utils/time";
 import { useHaptic } from "./useHaptic";
 
-interface IntroTimestamps {
-  EpisodeId: string;
-  HideSkipPromptAt: number;
-  IntroEnd: number;
-  IntroStart: number;
-  ShowSkipPromptAt: number;
-  Valid: boolean;
-}
-
 /**
  * Custom hook to handle skipping intros in a media player.
  *
  * @param {number} currentTime - The current playback time in seconds.
  */
 export const useIntroSkipper = (
-  itemId: string | undefined,
+  itemId: string,
   currentTime: number,
   seek: (ticks: number) => void,
   play: () => void,
   isVlc = false,
+  isOffline = false,
 ) => {
-  const [api] = useAtom(apiAtom);
   const [showSkipButton, setShowSkipButton] = useState(false);
   if (isVlc) {
     currentTime = msToSeconds(currentTime);
@@ -43,35 +30,14 @@ export const useIntroSkipper = (
     seek(seconds);
   };
 
-  const { data: introTimestamps } = useQuery<IntroTimestamps | null>({
-    queryKey: ["introTimestamps", itemId],
-    queryFn: async () => {
-      if (!itemId) {
-        return null;
-      }
-
-      const res = await api?.axiosInstance.get(
-        `${api.basePath}/Episode/${itemId}/IntroTimestamps`,
-        {
-          headers: getAuthHeaders(api),
-        },
-      );
-
-      if (res?.status !== 200) {
-        return null;
-      }
-
-      return res?.data;
-    },
-    enabled: !!itemId,
-    retry: false,
-  });
+  const { data: segments } = useSegments(itemId, isOffline);
+  const introTimestamps = segments?.introSegments?.[0];
 
   useEffect(() => {
     if (introTimestamps) {
       setShowSkipButton(
-        currentTime > introTimestamps.ShowSkipPromptAt &&
-          currentTime < introTimestamps.HideSkipPromptAt,
+        currentTime > introTimestamps.startTime &&
+          currentTime < introTimestamps.endTime,
       );
     }
   }, [introTimestamps, currentTime]);
@@ -80,12 +46,12 @@ export const useIntroSkipper = (
     if (!introTimestamps) return;
     try {
       lightHapticFeedback();
-      wrappedSeek(introTimestamps.IntroEnd);
+      wrappedSeek(introTimestamps.endTime);
       setTimeout(() => {
         play();
       }, 200);
     } catch (error) {
-      writeToLog("ERROR", "Error skipping intro", error);
+      console.error("Error skipping intro", error);
     }
   }, [introTimestamps]);
 

hooks/useItemQuery.ts

@@ -0,0 +1,30 @@
+import { getUserLibraryApi } from "@jellyfin/sdk/lib/utils/api";
+import { useQuery } from "@tanstack/react-query";
+import { useAtom } from "jotai";
+import { useDownload } from "@/providers/DownloadProvider";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+
+export const useItemQuery = (itemId: string, isOffline: boolean) => {
+  const [api] = useAtom(apiAtom);
+  const [user] = useAtom(userAtom);
+  const { downloadedFiles } = useDownload();
+
+  return useQuery({
+    queryKey: ["item", itemId],
+    queryFn: async () => {
+      if (isOffline) {
+        const downloadedItem = downloadedFiles?.find((item) => item.item.Id === itemId);
+        if (downloadedItem) return downloadedItem.item;
+        return null;
+      }
+      if (!api || !user || !itemId) return null;
+      const res = await getUserLibraryApi(api).getItem({ itemId: itemId, userId: user?.Id });
+      return res.data;
+    },
+    staleTime: 0,
+    refetchOnMount: true,
+    refetchOnWindowFocus: true,
+    refetchOnReconnect: true,
+    networkMode: "always",
+  });
+};

hooks/useMarkAsPlayed.ts

@@ -1,102 +1,39 @@
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { markAsNotPlayed } from "@/utils/jellyfin/playstate/markAsNotPlayed";
-import { markAsPlayed } from "@/utils/jellyfin/playstate/markAsPlayed";
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { useQueryClient } from "@tanstack/react-query";
-import { useAtom } from "jotai";
+import { QueryKey, useQueryClient } from "@tanstack/react-query";
 import { useHaptic } from "./useHaptic";
+import { usePlaybackManager } from "./usePlaybackManager";
+import { useInvalidatePlaybackProgressCache } from "./useRevalidatePlaybackProgressCache";
 
 export const useMarkAsPlayed = (items: BaseItemDto[]) => {
-  const [api] = useAtom(apiAtom);
-  const [user] = useAtom(userAtom);
   const queryClient = useQueryClient();
   const lightHapticFeedback = useHaptic("light");
-
-  const invalidateQueries = () => {
-    const queriesToInvalidate = [
-      ["resumeItems"],
-      ["continueWatching"],
-      ["nextUp-all"],
-      ["nextUp"],
-      ["episodes"],
-      ["seasons"],
-      ["home"],
-    ];
-
+  const { markItemPlayed, markItemUnplayed } = usePlaybackManager();
+  const invalidatePlaybackProgressCache = useInvalidatePlaybackProgressCache();
+  const invalidateQueries = async () => {
+    const queriesToInvalidate: QueryKey[] = [];
     items.forEach((item) => {
       if (!item.Id) return;
       queriesToInvalidate.push(["item", item.Id]);
     });
-
-    queriesToInvalidate.forEach((queryKey) => {
-      queryClient.invalidateQueries({ queryKey });
-    });
+    await Promise.all(
+      queriesToInvalidate.map((queryKey) =>
+        queryClient.invalidateQueries({ queryKey }),
+      ),
+    );
   };
 
-  const markAsPlayedStatus = async (played: boolean) => {
+  const toggle = async (played: boolean) => {
     lightHapticFeedback();
-
-    items.forEach((item) => {
-      // Optimistic update
-      queryClient.setQueryData(
-        ["item", item.Id],
-        (oldData: BaseItemDto | undefined) => {
-          if (oldData) {
-            return {
-              ...oldData,
-              UserData: {
-                ...oldData.UserData,
-                Played: played,
-              },
-            };
-          }
-          return oldData;
-        },
-      );
-    });
-
-    try {
-      // Process all items
-      await Promise.all(
-        items.map((item) =>
-          played
-            ? markAsPlayed({ api, item, userId: user?.Id })
-            : markAsNotPlayed({ api, itemId: item?.Id, userId: user?.Id }),
-        ),
-      );
-
-      // Bulk invalidate
-      queryClient.invalidateQueries({
-        queryKey: [
-          "resumeItems",
-          "continueWatching",
-          "nextUp-all",
-          "nextUp",
-          "episodes",
-          "seasons",
-          "home",
-          ...items.map((item) => ["item", item.Id]),
-        ].flat(),
-      });
-    } catch (error) {
-      // Revert all optimistic updates on any failure
-      items.forEach((item) => {
-        queryClient.setQueryData(
-          ["item", item.Id],
-          (oldData: BaseItemDto | undefined) =>
-            oldData
-              ? {
-                  ...oldData,
-                  UserData: { ...oldData.UserData, Played: played },
-                }
-              : oldData,
-        );
-      });
-      console.error("Error updating played status:", error);
-    }
-
+    // Process all items
+    await Promise.all(
+      items.map((item) => {
+        if (!item.Id) return Promise.resolve();
+        return played ? markItemPlayed(item.Id) : markItemUnplayed(item.Id);
+      }),
+    );
+    invalidatePlaybackProgressCache();
     invalidateQueries();
   };
 
-  return markAsPlayedStatus;
+  return toggle;
 };

hooks/usePlaybackManager.ts

@@ -0,0 +1,213 @@
+import { getPlaystateApi } from "@jellyfin/sdk/lib/utils/api";
+import { getUserLibraryApi } from "@jellyfin/sdk/lib/utils/api/user-library-api";
+import { useNetInfo } from "@react-native-community/netinfo";
+import { useAtomValue } from "jotai";
+import { useDownload } from "@/providers/DownloadProvider";
+import { DownloadedItem } from "@/providers/Downloads/types";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+
+/**
+ * A hook to manage playback state, abstracting away the complexities of
+ * online/offline and local/remote state management.
+ *
+ * This provides a simple facade for player components to report playback
+ * without needing to know the underlying details of data syncing.
+ */
+export const usePlaybackManager = () => {
+  const api = useAtomValue(apiAtom);
+  const user = useAtomValue(userAtom);
+  const netInfo = useNetInfo();
+  const { getDownloadedItemById, updateDownloadedItem } = useDownload();
+
+  /** Whether the device is online. actually it's connected to the internet. */
+  const isOnline = netInfo.isConnected;
+
+  /**
+   * Fetches the latest state of an item from the server and updates the local
+   * downloaded version to match. This ensures the local item has the
+   * canonical state from the server.
+   */
+  const _syncRemoteToLocal = async (localItem: DownloadedItem) => {
+    if (!isOnline || !api || !user) return;
+
+    try {
+      const remoteItem = (
+        await getUserLibraryApi(api).getItem({
+          itemId: localItem.item.Id!,
+          userId: user.Id,
+        })
+      ).data;
+      if (remoteItem) {
+        updateDownloadedItem(localItem.item.Id!, {
+          ...localItem,
+          item: {
+            ...localItem.item,
+            UserData: { ...remoteItem.UserData },
+          },
+        });
+      }
+    } catch (error) {
+      console.error("Failed to sync remote item state to local", error);
+    }
+  };
+
+  /**
+   * Reports playback progress.
+   *
+   * - If offline and the item is downloaded, updates are saved locally.
+   * - If online and the item is downloaded, it updates locally and syncs with the server.
+   * - If online and streaming, it reports directly to the server.
+   *
+   * @param itemId The ID of the item.
+   * @param positionTicks The current playback position in ticks.
+   */
+  const reportPlaybackProgress = async (
+    itemId: string,
+    positionTicks: number,
+    metadata?: {
+      AudioStreamIndex: number;
+      SubtitleStreamIndex: number;
+    },
+  ) => {
+    const localItem = getDownloadedItemById(itemId);
+
+    // Handle local state update for downloaded items
+    if (localItem) {
+      const isItemConsideredPlayed =
+        (localItem.item.UserData?.PlayedPercentage ?? 0) > 90;
+      updateDownloadedItem(itemId, {
+        ...localItem,
+        item: {
+          ...localItem.item,
+          UserData: {
+            ...localItem.item.UserData,
+            PlaybackPositionTicks: isItemConsideredPlayed ? 0 : positionTicks,
+            Played: isItemConsideredPlayed,
+            LastPlayedDate: new Date().toISOString(),
+            PlayedPercentage: isItemConsideredPlayed
+              ? 0
+              : (positionTicks / localItem.item.RunTimeTicks!) * 100,
+          },
+        },
+      });
+    }
+
+    // Handle remote state update if online
+    if (isOnline && api) {
+      try {
+        await getPlaystateApi(api).reportPlaybackProgress({
+          playbackProgressInfo: {
+            ItemId: itemId,
+            PositionTicks: positionTicks,
+            ...(metadata && { AudioStreamIndex: metadata.AudioStreamIndex }),
+            ...(metadata && {
+              SubtitleStreamIndex: metadata.SubtitleStreamIndex,
+            }),
+          },
+        });
+      } catch (error) {
+        console.error("Failed to report playback progress on server", error);
+      }
+      // If it was a downloaded item, re-sync with the server for the latest state.
+      // This is crucial because the server might have marked the item as "Played"
+      // based on its own rules (e.g., >95% progress).
+      if (localItem) {
+        await _syncRemoteToLocal(localItem);
+      }
+    }
+  };
+
+  /**
+   * Marks an item as played.
+   *
+   * - If offline and downloaded, it marks as played locally.
+   * - If online, it marks as played on the server and syncs the state back to the local item if it exists.
+   *
+   * @param itemId The ID of the item.
+   */
+  const markItemPlayed = async (itemId: string) => {
+    const localItem = getDownloadedItemById(itemId);
+
+    // Handle local state update for downloaded items
+    if (localItem) {
+      updateDownloadedItem(itemId, {
+        ...localItem,
+        item: {
+          ...localItem.item,
+          UserData: {
+            ...localItem.item.UserData,
+            Played: true,
+            PlaybackPositionTicks: 0,
+            PlayedPercentage: 0,
+            LastPlayedDate: new Date().toISOString(),
+          },
+        },
+      });
+    }
+
+    // Handle remote state update if online
+    if (isOnline && api && user) {
+      try {
+        await getPlaystateApi(api).markPlayedItem({
+          itemId,
+          userId: user.Id,
+        });
+
+        // If it was a downloaded item, re-sync with server for the latest state
+        if (localItem) {
+          await _syncRemoteToLocal(localItem);
+        }
+      } catch (error) {
+        console.error("Failed to mark item as played on server", error);
+      }
+    }
+  };
+
+  /**
+   * Marks an item as unplayed.
+   *
+   * - If offline and downloaded, it marks as unplayed locally.
+   * - If online, it marks as unplayed on the server and syncs the state back to the local item if it exists.
+   *
+   * @param itemId The ID of the item.
+   */
+  const markItemUnplayed = async (itemId: string) => {
+    const localItem = getDownloadedItemById(itemId);
+
+    // Handle local state update for downloaded items
+    if (localItem) {
+      updateDownloadedItem(itemId, {
+        ...localItem,
+        item: {
+          ...localItem.item,
+          UserData: {
+            ...localItem.item.UserData,
+            Played: false,
+            PlaybackPositionTicks: 0,
+            PlayedPercentage: 0,
+            LastPlayedDate: new Date().toISOString(), // Keep track of when it was marked unplayed
+          },
+        },
+      });
+    }
+
+    // Handle remote state update if online
+    if (isOnline && api && user) {
+      try {
+        await getPlaystateApi(api).markUnplayedItem({
+          itemId,
+          userId: user.Id,
+        });
+
+        // If it was a downloaded item, re-sync with server for the latest state
+        if (localItem) {
+          await _syncRemoteToLocal(localItem);
+        }
+      } catch (error) {
+        console.error("Failed to mark item as unplayed on server", error);
+      }
+    }
+  };
+
+  return { reportPlaybackProgress, markItemPlayed, markItemUnplayed };
+};

hooks/useRevalidatePlaybackProgressCache.ts

@@ -1,10 +1,14 @@
 import { useQueryClient } from "@tanstack/react-query";
+import { useDownload } from "@/providers/DownloadProvider";
+import { useTwoWaySync } from "./useTwoWaySync";
 
 /**
  * useRevalidatePlaybackProgressCache invalidates queries related to playback progress.
  */
 export function useInvalidatePlaybackProgressCache() {
   const queryClient = useQueryClient();
+  const { downloadedFiles } = useDownload();
+  const { syncPlaybackState } = useTwoWaySync();
 
   const revalidate = async () => {
     // List of all the queries to invalidate
@@ -17,11 +21,33 @@ export function useInvalidatePlaybackProgressCache() {
       ["episodes"],
       ["seasons"],
       ["home"],
+      ["downloadedItems"],
     ];
 
-    // Invalidate each query
-    for (const queryKey of queriesToInvalidate) {
-      await queryClient.invalidateQueries({ queryKey });
+    // We Invalidate all the queries to the latest server versions
+    await Promise.all(
+      queriesToInvalidate.map((queryKey) =>
+        queryClient.invalidateQueries({ queryKey }),
+      ),
+    );
+
+    // Sync playback state for downloaded items
+    if (downloadedFiles) {
+      // We sync the playback state for the downloaded items
+      const syncResults = await Promise.all(
+        downloadedFiles.map((downloadedItem) =>
+          syncPlaybackState(downloadedItem.item.Id!),
+        ),
+      );
+      // We invalidate the queries again in case we have updated a server's playback progress.
+      const shouldInvalidate = syncResults.some((result) => result);
+
+      console.log("shouldInvalidate", shouldInvalidate);
+      if (shouldInvalidate) {
+        queriesToInvalidate.map((queryKey) =>
+          queryClient.invalidateQueries({ queryKey }),
+        );
+      }
     }
   };
 

hooks/useTrickplay.ts

@@ -1,11 +1,69 @@
-import { apiAtom } from "@/providers/JellyfinProvider";
-import { ticksToMs } from "@/utils/time";
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
 import { Image } from "expo-image";
-import { useAtom } from "jotai";
 import { useCallback, useMemo, useRef, useState } from "react";
+import { apiAtom } from "@/providers/JellyfinProvider";
+import { store } from "@/utils/store";
+import { ticksToMs } from "@/utils/time";
+import { useDownload } from "@/providers/DownloadProvider";
+import { useGlobalSearchParams } from "expo-router";
 
-interface TrickplayData {
+interface TrickplayUrl {
+  x: number;
+  y: number;
+  url: string;
+}
+
+/** Hook to handle trickplay logic for a given item. */
+export const useTrickplay = (item: BaseItemDto) => {
+  const [trickPlayUrl, setTrickPlayUrl] = useState<TrickplayUrl | null>(null);
+  const { getDownloadedItemById } = useDownload();
+  const lastCalculationTime = useRef(0);
+  const throttleDelay = 200;
+  const isOffline = useGlobalSearchParams().offline === "true";
+  const trickplayInfo = useMemo(() => getTrickplayInfo(item), [item]);
+  
+  /** Generates the trickplay URL for the given item and sheet index. 
+   * We change between offline and online trickplay URLs depending on the state of the app. */
+  const getTrickplayUrl = useCallback((item: BaseItemDto, sheetIndex: number) => {
+    // If we are offline, we can use the downloaded item's trickplay data path
+    const downloadedItem = getDownloadedItemById(item.Id!);
+    if (isOffline && downloadedItem?.trickPlayData?.path) {
+      return `${downloadedItem.trickPlayData.path}${sheetIndex}.jpg`;
+    }
+    return generateTrickplayUrl(item, sheetIndex);
+  }, [trickplayInfo]);
+
+  /** Calculates the trickplay URL for the current progress. */
+  const calculateTrickplayUrl = useCallback(
+    (progress: number) => {
+      const now = Date.now();
+      if (!trickplayInfo || !item.Id || now - lastCalculationTime.current < throttleDelay) return;
+      lastCalculationTime.current = now;
+      const { sheetIndex, x, y } = calculateTrickplayTile(progress, trickplayInfo);
+      const url = getTrickplayUrl(item, sheetIndex);
+      if (url) setTrickPlayUrl({ x, y, url });
+    },
+    [trickplayInfo, item, throttleDelay, getTrickplayUrl],
+  );
+  
+  /** Prefetches all the trickplay images for the item. */
+  const prefetchAllTrickplayImages = useCallback(() => {
+    if (!trickplayInfo || !item.Id) return;
+    for (let index = 0; index < trickplayInfo.totalImageSheets; index++) {
+      const url = getTrickplayUrl(item, index);
+      if (url) Image.prefetch(url);
+    }
+  }, [trickplayInfo, item, getTrickplayUrl]);
+
+  return {
+    trickPlayUrl,
+    calculateTrickplayUrl,
+    prefetchAllTrickplayImages,
+    trickplayInfo,
+  };
+};
+
+export interface TrickplayData {
   Interval?: number;
   TileWidth?: number;
   TileHeight?: number;
@@ -14,141 +72,93 @@ interface TrickplayData {
   ThumbnailCount?: number;
 }
 
-interface TrickplayInfo {
+export interface TrickplayInfo {
   resolution: string;
   aspectRatio: number;
   data: TrickplayData;
+  totalImageSheets: number;
 }
 
-interface TrickplayUrl {
-  x: number;
-  y: number;
-  url: string;
-}
+/** Generates a trickplay URL based on the item, resolution, and sheet index. */
+export const generateTrickplayUrl = (item: BaseItemDto, sheetIndex: number) => {
+  const api = store.get(apiAtom);
+  const resolution = getTrickplayInfo(item)?.resolution;
+  if (!resolution || !api) return null;
+  return `${api.basePath}/Videos/${item.Id}/Trickplay/${resolution}/${sheetIndex}.jpg?api_key=${api.accessToken}`;
+};
 
-export const useTrickplay = (item: BaseItemDto, enabled = true) => {
-  const [api] = useAtom(apiAtom);
-  const [trickPlayUrl, setTrickPlayUrl] = useState<TrickplayUrl | null>(null);
-  const lastCalculationTime = useRef(0);
-  const throttleDelay = 200; // 200ms throttle
+/**
+ * Parses the trickplay metadata from a BaseItemDto.
+ * @param item The Jellyfin media item.
+ * @returns Parsed trickplay information or null if not available.
+ */
+export const getTrickplayInfo = (item: BaseItemDto): TrickplayInfo | null => {
+  if (!item.Id || !item.Trickplay) return null;
 
-  const trickplayInfo = useMemo(() => {
-    if (!enabled || !item.Id || !item.Trickplay) {
-      return null;
-    }
+  const mediaSourceId = item.Id;
+  const trickplayDataForSource = item.Trickplay[mediaSourceId];
 
-    const mediaSourceId = item.Id;
-    const trickplayData = item.Trickplay[mediaSourceId];
+  if (!trickplayDataForSource) {
+    return null;
+  }
 
-    if (!trickplayData) {
-      return null;
-    }
+  const firstResolution = Object.keys(trickplayDataForSource)[0];
+  if (!firstResolution) {
+    return null;
+  }
 
-    // Get the first available resolution
-    const firstResolution = Object.keys(trickplayData)[0];
-    return firstResolution
-      ? {
-          resolution: firstResolution,
-          aspectRatio:
-            trickplayData[firstResolution].Width! /
-            trickplayData[firstResolution].Height!,
-          data: trickplayData[firstResolution],
-        }
-      : null;
-  }, [item, enabled]);
+  const data = trickplayDataForSource[firstResolution];
+  const { Interval, TileWidth, TileHeight, Width, Height } = data;
 
-  // Takes in ticks.
-  const calculateTrickplayUrl = useCallback(
-    (progress: number) => {
-      if (!enabled) {
-        return null;
-      }
+  if (
+    !Interval ||
+    !TileWidth ||
+    !TileHeight ||
+    !Width ||
+    !Height ||
+    !item.RunTimeTicks
+  ) {
+    return null;
+  }
 
-      const now = Date.now();
-      if (now - lastCalculationTime.current < throttleDelay) {
-        return null;
-      }
-      lastCalculationTime.current = now;
-
-      if (!trickplayInfo || !api || !item.Id) {
-        return null;
-      }
-
-      const { data, resolution } = trickplayInfo;
-      const { Interval, TileWidth, TileHeight, Width, Height } = data;
-
-      if (
-        !Interval ||
-        !TileWidth ||
-        !TileHeight ||
-        !resolution ||
-        !Width ||
-        !Height
-      ) {
-        throw new Error("Invalid trickplay data");
-      }
-
-      const currentTimeMs = Math.max(0, ticksToMs(progress));
-      const currentTile = Math.floor(currentTimeMs / Interval);
-
-      const tileSize = TileWidth * TileHeight;
-      const tileOffset = currentTile % tileSize;
-      const index = Math.floor(currentTile / tileSize);
-
-      const tileOffsetX = tileOffset % TileWidth;
-      const tileOffsetY = Math.floor(tileOffset / TileWidth);
-
-      const newTrickPlayUrl = {
-        x: tileOffsetX,
-        y: tileOffsetY,
-        url: `${api.basePath}/Videos/${item.Id}/Trickplay/${resolution}/${index}.jpg?api_key=${api.accessToken}`,
-      };
-
-      setTrickPlayUrl(newTrickPlayUrl);
-      return newTrickPlayUrl;
-    },
-    [trickplayInfo, item, api, enabled],
-  );
-
-  const prefetchAllTrickplayImages = useCallback(() => {
-    if (!api || !enabled || !trickplayInfo || !item.Id || !item.RunTimeTicks) {
-      return;
-    }
-
-    const { data, resolution } = trickplayInfo;
-    const { Interval, TileWidth, TileHeight, Width, Height } = data;
-
-    if (
-      !Interval ||
-      !TileWidth ||
-      !TileHeight ||
-      !resolution ||
-      !Width ||
-      !Height
-    ) {
-      throw new Error("Invalid trickplay data");
-    }
-
-    // Calculate tiles per sheet
-    const tilesPerRow = TileWidth;
-    const tilesPerColumn = TileHeight;
-    const tilesPerSheet = tilesPerRow * tilesPerColumn;
-    const totalTiles = Math.ceil(ticksToMs(item.RunTimeTicks) / Interval);
-    const totalIndexes = Math.ceil(totalTiles / tilesPerSheet);
-
-    // Prefetch all trickplay images
-    for (let index = 0; index < totalIndexes; index++) {
-      const url = `${api.basePath}/Videos/${item.Id}/Trickplay/${resolution}/${index}.jpg?api_key=${api.accessToken}`;
-      Image.prefetch(url);
-    }
-  }, [trickplayInfo, item, api, enabled]);
+  const tilesPerSheet = TileWidth * TileHeight;
+  const totalTiles = Math.ceil(ticksToMs(item.RunTimeTicks) / Interval);
+  const totalImageSheets = Math.ceil(totalTiles / tilesPerSheet);
 
   return {
-    trickPlayUrl: enabled ? trickPlayUrl : null,
-    calculateTrickplayUrl: enabled ? calculateTrickplayUrl : () => null,
-    prefetchAllTrickplayImages: enabled
-      ? prefetchAllTrickplayImages
-      : () => null,
-    trickplayInfo: enabled ? trickplayInfo : null,
+    resolution: firstResolution,
+    aspectRatio: Width / Height,
+    data,
+    totalImageSheets,
   };
 };
+
+/**
+ * Calculates the specific image sheet and tile offset for a given time.
+ * @param progressTicks The current playback time in ticks.
+ * @param trickplayInfo The parsed trickplay information object.
+ * @returns An object with the image sheet index, and the X/Y coordinates for the tile.
+ */
+const calculateTrickplayTile = (
+  progressTicks: number,
+  trickplayInfo: TrickplayInfo,
+) => {
+  const { data } = trickplayInfo;
+  const { Interval, TileWidth, TileHeight } = data;
+
+  if (!Interval || !TileWidth || !TileHeight) {
+    throw new Error("Invalid trickplay data provided to calculateTile");
+  }
+
+  const currentTimeMs = Math.max(0, ticksToMs(progressTicks));
+  const currentTile = Math.floor(currentTimeMs / Interval);
+
+  const tilesPerSheet = TileWidth * TileHeight;
+  const sheetIndex = Math.floor(currentTile / tilesPerSheet);
+  const tileIndexInSheet = currentTile % tilesPerSheet;
+
+  const x = tileIndexInSheet % TileWidth;
+  const y = Math.floor(tileIndexInSheet / TileWidth);
+
+  return { sheetIndex, x, y };
+};

hooks/useTwoWaySync.ts

@@ -0,0 +1,81 @@
+import { getItemsApi, getUserLibraryApi } from "@jellyfin/sdk/lib/utils/api";
+import { useNetInfo } from "@react-native-community/netinfo";
+import { useAtomValue } from "jotai";
+import { useDownload } from "@/providers/DownloadProvider";
+import { apiAtom, userAtom } from "../providers/JellyfinProvider";
+import { usePlaybackManager } from "./usePlaybackManager";
+
+/**
+ * This hook is used to sync the playback state of a downloaded item with the server
+ * when the application comes back online after being used offline.
+ */
+export const useTwoWaySync = () => {
+  const api = useAtomValue(apiAtom);
+  const user = useAtomValue(userAtom);
+  const netInfo = useNetInfo();
+  const { getDownloadedItemById, updateDownloadedItem } = useDownload();
+  const { reportPlaybackProgress, markItemUnplayed, markItemPlayed } =
+    usePlaybackManager();
+
+  /**
+   * Syncs the playback state of an offline item with the server.
+   * It determines if the local or remote state is more recent and applies the necessary update.
+   *
+   * @returns A Promise<boolean> indicating whether a server update was made (true) or not (false).
+   */
+  const syncPlaybackState = async (itemId: string): Promise<boolean> => {
+    if (!api || !user || !netInfo.isConnected) {
+      // Cannot sync if offline or not logged in
+      return false;
+    }
+
+    const localItem = getDownloadedItemById(itemId);
+    if (!localItem) return false;
+
+    const remoteItem = (
+      await getUserLibraryApi(api).getItem({ itemId, userId: user.Id })
+    ).data;
+    if (!remoteItem) return false;
+
+    const localLastPlayed = localItem.item.UserData?.LastPlayedDate
+      ? new Date(localItem.item.UserData.LastPlayedDate)
+      : new Date(0);
+    const remoteLastPlayed = remoteItem.UserData?.LastPlayedDate
+      ? new Date(remoteItem.UserData.LastPlayedDate)
+      : new Date(0);
+
+    // If the remote item has been played more recently, we take the server's version as the source of truth.
+    if (remoteLastPlayed > localLastPlayed) {
+      updateDownloadedItem(itemId, {
+        ...localItem,
+        item: {
+          ...localItem.item,
+          UserData: {
+            ...localItem.item.UserData,
+            LastPlayedDate: remoteItem.UserData?.LastPlayedDate,
+            PlaybackPositionTicks: remoteItem.UserData?.PlaybackPositionTicks,
+            Played: remoteItem.UserData?.Played,
+            PlayedPercentage: remoteItem.UserData?.PlayedPercentage,
+          },
+        },
+      });
+      return false;
+    } else if (remoteLastPlayed < localLastPlayed) {
+      // Since we're this is the source of truth, essentially need to make sure the played status matches the local item.
+      await getItemsApi(api).updateItemUserData({
+        itemId: localItem.item.Id!,
+        userId: user.Id,
+        updateUserItemDataDto: {
+          Played: localItem.item.UserData?.Played,
+          PlaybackPositionTicks: localItem.item.UserData?.PlaybackPositionTicks,
+          PlayedPercentage: localItem.item.UserData?.PlayedPercentage,
+          LastPlayedDate: localItem.item.UserData?.LastPlayedDate,
+        },
+      });
+      return true;
+    }
+    return false;
+  };
+
+  return { syncPlaybackState };
+};

modules/VlcPlayer.types.ts

@@ -41,10 +41,10 @@ export type VlcPlayerSource = {
   type?: string;
   isNetwork?: boolean;
   autoplay?: boolean;
-  externalSubtitles: { name: string; DeliveryUrl: string }[];
+  startPosition?: number;
+  externalSubtitles?: { name: string; DeliveryUrl: string }[];
   initOptions?: any[];
   mediaOptions?: { [key: string]: any };
-  startPosition?: number;
 };
 
 export type TrackInfo = {
@@ -94,5 +94,5 @@ export interface VlcPlayerViewRef {
   getChapters: () => Promise<ChapterInfo[] | null>;
   setVideoCropGeometry: (geometry: string | null) => Promise<void>;
   getVideoCropGeometry: () => Promise<string | null>;
-  setSubtitleURL: (url: string, name: string) => Promise<void>;
+  setSubtitleURL: (url: string) => Promise<void>;
 }

modules/VlcPlayerView.tsx

@@ -1,8 +1,6 @@
 import { requireNativeViewManager } from "expo-modules-core";
 import * as React from "react";
-
-import { VideoPlayer, useSettings } from "@/utils/atoms/settings";
-import { Platform, ViewStyle } from "react-native";
+import { ViewStyle } from "react-native";
 import type {
   VlcPlayerSource,
   VlcPlayerViewProps,
@@ -13,22 +11,12 @@ interface NativeViewRef extends VlcPlayerViewRef {
   setNativeProps?: (props: Partial<VlcPlayerViewProps>) => void;
 }
 
-const VLCViewManager = requireNativeViewManager("VlcPlayer");
 const VLC3ViewManager = requireNativeViewManager("VlcPlayer3");
 
 // Create a forwarded ref version of the native view
 const NativeView = React.forwardRef<NativeViewRef, VlcPlayerViewProps>(
   (props, ref) => {
-    const [settings] = useSettings();
-
-    if (Platform.OS === "ios" || Platform.isTVOS) {
-      if (settings.defaultPlayer === VideoPlayer.VLC_3) {
-        console.log("[Apple] Using Vlc Player 3");
-        return <VLC3ViewManager {...props} ref={ref} />;
-      }
-    }
-    console.log("Using default Vlc Player");
-    return <VLCViewManager {...props} ref={ref} />;
+    return <VLC3ViewManager {...props} ref={ref} />;
   },
 );
 
@@ -95,8 +83,8 @@ const VlcPlayerView = React.forwardRef<VlcPlayerViewRef, VlcPlayerViewProps>(
         const geometry = await nativeRef.current?.getVideoCropGeometry();
         return geometry ?? null;
       },
-      setSubtitleURL: async (url: string, name: string) => {
-        await nativeRef.current?.setSubtitleURL(url, name);
+      setSubtitleURL: async (url: string) => {
+        await nativeRef.current?.setSubtitleURL(url);
       },
     }));
 

modules/vlc-player-3/ios/VlcPlayer3Module.swift

@@ -54,6 +54,10 @@ public class VlcPlayer3Module: Module {
                 return view.getAudioTracks()
             }
 
+            AsyncFunction("setSubtitleURL") { (view: VlcPlayer3View, url: String, name: String) in
+                view.setSubtitleURL(url, name: name)
+            }
+
             AsyncFunction("setSubtitleTrack") { (view: VlcPlayer3View, trackIndex: Int) in
                 view.setSubtitleTrack(trackIndex)
             }
@@ -61,11 +65,6 @@ public class VlcPlayer3Module: Module {
             AsyncFunction("getSubtitleTracks") { (view: VlcPlayer3View) -> [[String: Any]]? in
                 return view.getSubtitleTracks()
             }
-
-            AsyncFunction("setSubtitleURL") {
-                (view: VlcPlayer3View, url: String, name: String) in
-                view.setSubtitleURL(url, name: name)
-            }
         }
     }
 }

modules/vlc-player-3/ios/VlcPlayer3View.swift

@@ -22,6 +22,8 @@ class VlcPlayer3View: ExpoView {
     private var isStopping: Bool = false  // Define isStopping here
     private var lastProgressCall = Date().timeIntervalSince1970
     var hasSource = false
+    var isTranscoding = false
+    private var initialSeekPerformed: Bool = false
 
     // MARK: - Initialization
 
@@ -88,7 +90,6 @@ class VlcPlayer3View: ExpoView {
             // If the specified time is greater than the duration, seek to the end
             let seekTime = time > duration ? duration - 1000 : time
             player.time = VLCTime(int: seekTime)
-
             if wasPlaying {
                 self.play()
             }
@@ -110,13 +111,18 @@ class VlcPlayer3View: ExpoView {
             var initOptions = source["initOptions"] as? [Any] ?? []
             self.startPosition = source["startPosition"] as? Int32 ?? 0
             self.externalSubtitles = source["externalSubtitles"] as? [[String: String]]
-            initOptions.append("--start-time=\(self.startPosition)")
 
             guard let uri = source["uri"] as? String, !uri.isEmpty else {
                 print("Error: Invalid or empty URI")
                 self.onVideoError?(["error": "Invalid or empty URI"])
                 return
             }
+            
+            self.isTranscoding = uri.contains("m3u8")
+
+            if !self.isTranscoding, self.startPosition > 0 {
+                initOptions.append("--start-time=\(self.startPosition)")
+            }
 
             let autoplay = source["autoplay"] as? Bool ?? false
             let isNetwork = source["isNetwork"] as? Bool ?? false
@@ -126,6 +132,7 @@ class VlcPlayer3View: ExpoView {
             self.mediaPlayer?.delegate = self
             self.mediaPlayer?.drawable = self.videoView
             self.mediaPlayer?.scaleFactor = 0
+            self.initialSeekPerformed = false
 
             let media: VLCMedia
             if isNetwork {
@@ -287,9 +294,14 @@ class VlcPlayer3View: ExpoView {
 
         let currentTimeMs = player.time.intValue
         let durationMs = player.media?.length.intValue ?? 0
+        
 
         print("Debug: Current time: \(currentTimeMs)")
         if currentTimeMs >= 0 && currentTimeMs < durationMs {
+            if self.isTranscoding, !self.initialSeekPerformed, self.startPosition > 0 {
+                player.time = VLCTime(int: self.startPosition * 1000)
+                self.initialSeekPerformed = true
+            }
             self.onVideoProgress?([
                 "currentTime": currentTimeMs,
                 "duration": durationMs,

modules/vlc-player/ios/VlcPlayerView.swift

@@ -137,10 +137,7 @@ extension VLCPlayerWrapper: VLCMediaPlayerDelegate {
     }
 }
 
-// MARK: - VLCMediaDelegate
-extension VLCPlayerWrapper: VLCMediaDelegate {
-    // Implement VLCMediaDelegate methods if needed
-}
+
 
 class VlcPlayerView: ExpoView {
     let logger = Logger(subsystem: Bundle.main.bundleIdentifier!, category: "VlcPlayerView")
@@ -154,6 +151,10 @@ class VlcPlayerView: ExpoView {
     private var isStopping: Bool = false  // Define isStopping here
     private var externalSubtitles: [[String: String]]?
     var hasSource = false
+    var initialSeekPerformed = false
+    // A flag variable determinging if we should perform the initial seek. Its either transcoding or offline playback. that makes
+    var shouldPerformInitialSeek: Bool = false
+    
 
     // MARK: - Initialization
     required init(appContext: AppContext? = nil) {
@@ -172,6 +173,19 @@ class VlcPlayerView: ExpoView {
         )
     }
 
+    // Workaround: When playing an HLS video for the first time, seeking to a specific time immediately can cause a crash.
+    // To avoid this, we wait until the video has started playing before performing the initial seek.
+    func performInitialSeek() {
+        guard !initialSeekPerformed,
+              startPosition > 0,
+              shouldPerformInitialSeek,
+              vlc.player.isSeekable else { return }
+
+        initialSeekPerformed = true
+        logger.debug("First time update, performing initial seek to \(self.startPosition) seconds")
+        vlc.player.time = VLCTime(int: startPosition * 1000)
+    }
+
     private func setupNotifications() {
         NotificationCenter.default.addObserver(
             self, selector: #selector(applicationWillResignActive),
@@ -254,6 +268,8 @@ class VlcPlayerView: ExpoView {
             let autoplay = source["autoplay"] as? Bool ?? false
             let isNetwork = source["isNetwork"] as? Bool ?? false
 
+            // Set shouldPeformIntial based on isTranscoding and is not a network stream
+            self.shouldPerformInitialSeek = uri.contains("m3u8") || !isNetwork
             self.onVideoLoadStart?(["target": self.reactTag ?? NSNull()])
 
             let media: VLCMedia!
@@ -277,8 +293,11 @@ class VlcPlayerView: ExpoView {
             self.hasSource = true
             if autoplay {
                 logger.info("Playing...")
+                // The Video is not transcoding so it its safe to seek to the start position.
+                if !self.shouldPerformInitialSeek {
+                    self.vlc.player.time = VLCTime(number: NSNumber(value: self.startPosition * 1000))
+                }
                 self.play()
-                self.vlc.player.time = VLCTime(number: NSNumber(value: self.startPosition * 1000))
             }
         }
     }
@@ -415,6 +434,9 @@ class VlcPlayerView: ExpoView {
 
     private func updatePlayerState() {
         let player = self.vlc.player
+        if player.isPlaying {
+            performInitialSeek()
+        }
         self.onVideoStateChange?([
             "target": self.reactTag ?? NSNull(),
             "currentTime": player.time.intValue,

package.json

@@ -18,7 +18,7 @@
     "lint": "biome check --write --unsafe"
   },
   "dependencies": {
-    "@bottom-tabs/react-navigation": "0.8.6",
+    "@bottom-tabs/react-navigation": "0.9.2",
     "@expo/config-plugins": "~9.0.15",
     "@expo/react-native-action-sheet": "^4.1.1",
     "@expo/vector-icons": "^14.0.4",
@@ -73,27 +73,27 @@
     "react-i18next": "^15.4.0",
     "react-native": "npm:react-native-tvos@~0.77.2-0",
     "react-native-awesome-slider": "^2.9.0",
-    "react-native-bottom-tabs": "0.8.6",
+    "react-native-bottom-tabs": "0.9.2",
     "react-native-circular-progress": "^1.4.1",
     "react-native-collapsible": "^1.6.2",
     "react-native-compressor": "^1.10.3",
     "react-native-country-flag": "^2.0.2",
     "react-native-device-info": "^14.0.4",
     "react-native-edge-to-edge": "^1.4.3",
-    "react-native-gesture-handler": "~2.20.2",
+    "react-native-gesture-handler": "~2.24.0",
     "react-native-get-random-values": "^1.11.0",
     "react-native-google-cast": "^4.8.3",
     "react-native-image-colors": "^2.4.0",
     "react-native-ios-context-menu": "^3.1.0",
     "react-native-ios-utilities": "5.1.1",
     "react-native-mmkv": "^2.12.2",
-    "react-native-pager-view": "6.5.1",
+    "react-native-pager-view": "6.6.0",
     "react-native-progress": "^5.0.1",
     "react-native-reanimated": "~3.16.7",
     "react-native-reanimated-carousel": "3.5.1",
-    "react-native-safe-area-context": "4.12.0",
-    "react-native-screens": "~4.4.0",
-    "react-native-svg": "15.8.0",
+    "react-native-safe-area-context": "5.2.0",
+    "react-native-screens": "4.10.0",
+    "react-native-svg": "15.11.2",
     "react-native-tab-view": "^4.0.5",
     "react-native-udp": "^4.1.7",
     "react-native-uitextview": "^1.4.0",
@@ -102,7 +102,7 @@
     "react-native-video": "6.10.0",
     "react-native-volume-manager": "^2.0.8",
     "react-native-web": "~0.19.13",
-    "react-native-webview": "13.12.5",
+    "react-native-webview": "13.13.0",
     "sonner-native": "^0.17.0",
     "tailwindcss": "3.3.2",
     "use-debounce": "^10.0.4",

providers/Downloads/types.ts

@@ -0,0 +1,117 @@
+import type {
+  BaseItemDto,
+  MediaSourceInfo,
+} from "@jellyfin/sdk/lib/generated-client/models";
+import { Bitrate } from "@/components/BitrateSelector";
+
+/**
+ * Represents the data for downloaded trickplay files.
+ */
+export interface TrickPlayData {
+  /** The local directory path where trickplay image sheets are stored. */
+  path: string;
+  /** The total size of all trickplay images in bytes. */
+  size: number;
+}
+
+/**
+ * Represents the user data for a downloaded item.
+ */
+interface UserData {
+  subtitleStreamIndex: number;
+  /** The last known audio stream index. */
+  audioStreamIndex: number;
+}
+
+/** Represents a segment of time in a media item, used for intro/credit skipping. */
+export interface MediaTimeSegment {
+  startTime: number;
+  endTime: number;
+  text: string;
+}
+
+export interface Segment {
+  startTime: number;
+  endTime: number;
+  text: string;
+}
+
+/** Represents a single downloaded media item with all necessary metadata for offline playback. */
+export interface DownloadedItem {
+  /** The Jellyfin item DTO. */
+  item: BaseItemDto;
+  /** The media source information. */
+  mediaSource: MediaSourceInfo;
+  /** The local file path of the downloaded video. */
+  videoFilePath: string;
+  /** The size of the video file in bytes. */
+  videoFileSize: number;
+  /** The local file path of the downloaded trickplay images. */
+  trickPlayData?: TrickPlayData;
+  /** The intro segments for the item. */
+  introSegments?: MediaTimeSegment[];
+  /** The credit segments for the item. */
+  creditSegments?: MediaTimeSegment[];
+  /** The user data for the item. */
+  userData: UserData;
+}
+/**
+ * Represents a downloaded Season, containing a map of its episodes.
+ */
+export interface DownloadedSeason {
+  /** A map of episode numbers to their downloaded item data. */
+  episodes: Record<number, DownloadedItem>;
+}
+
+/**
+ * Represents a downloaded series, containing seasons and their episodes.
+ */
+export interface DownloadedSeries {
+  /** The Jellyfin item DTO for the series. */
+  seriesInfo: BaseItemDto;
+  /** A map of season numbers to their downloaded season data. */
+  seasons: Record<
+    number,
+    {
+      /** A map of episode numbers to their downloaded episode data. */
+      episodes: Record<number, DownloadedItem>;
+    }
+  >;
+}
+
+/**
+ * The main structure for all downloaded content stored locally.
+ * This object is what will be saved to your local storage.
+ */
+export interface DownloadsDatabase {
+  /** A map of movie IDs to their downloaded movie data. */
+  movies: Record<string, DownloadedItem>;
+  /** A map of series IDs to their downloaded series data. */
+  series: Record<string, DownloadedSeries>;
+}
+
+/**
+ * Represents the status of a download job.
+ */
+export type JobStatus = {
+  id: string;
+  inputUrl: string;
+  item: BaseItemDto;
+  itemId: string;
+  deviceId: string;
+  progress: number;
+  status:
+    | "downloading"
+    | "paused"
+    | "error"
+    | "pending"
+    | "completed"
+    | "queued";
+  timestamp: Date;
+  mediaSource: MediaSourceInfo;
+  maxBitrate: Bitrate;
+  bytesDownloaded?: number;
+  lastProgressUpdateTime?: Date;
+  speed?: number;
+  estimatedTotalSizeBytes?: number;
+};

providers/JellyfinProvider.tsx

@@ -91,9 +91,8 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
   const headers = useMemo(() => {
     if (!deviceId) return {};
     return {
-      authorization: `MediaBrowser Client="Streamyfin", Device=${
-        Platform.OS === "android" ? "Android" : "iOS"
-      }, DeviceId="${deviceId}", Version="0.28.1"`,
+      authorization: `MediaBrowser Client="Streamyfin", Device=${Platform.OS === "android" ? "Android" : "iOS"
+        }, DeviceId="${deviceId}", Version="0.28.1"`,
     };
   }, [deviceId]);
 
@@ -380,8 +379,6 @@ function useProtectedRoute(user: UserDto | null, loaded = false) {
   useEffect(() => {
     if (loaded === false) return;
 
-    console.log("Loaded", user);
-
     const inAuthGroup = segments[0] === "(auth)";
 
     if (!user?.Id && inAuthGroup) {

providers/JobQueueProvider.tsx

@@ -1,15 +0,0 @@
-import { useJobProcessor } from "@/utils/atoms/queue";
-import type React from "react";
-import { createContext } from "react";
-
-const JobQueueContext = createContext(null);
-
-export const JobQueueProvider: React.FC<{ children: React.ReactNode }> = ({
-  children,
-}) => {
-  useJobProcessor();
-
-  return (
-    <JobQueueContext.Provider value={null}>{children}</JobQueueContext.Provider>
-  );
-};

providers/PlaySettingsProvider.tsx

@@ -1,21 +1,14 @@
-import type { Bitrate } from "@/components/BitrateSelector";
-import { settingsAtom } from "@/utils/atoms/settings";
-import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
-import generateDeviceProfile from "@/utils/profiles/native";
 import type {
   BaseItemDto,
   MediaSourceInfo,
 } from "@jellyfin/sdk/lib/generated-client";
-import { getSessionApi } from "@jellyfin/sdk/lib/utils/api";
 import { useAtomValue } from "jotai";
 import type React from "react";
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useState,
-} from "react";
+import { createContext, useCallback, useContext, useState } from "react";
+import type { Bitrate } from "@/components/BitrateSelector";
+import { settingsAtom } from "@/utils/atoms/settings";
+import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
+import { generateDeviceProfile } from "@/utils/profiles/native";
 import { apiAtom, userAtom } from "./JellyfinProvider";
 
 export type PlaybackType = {

translations/en.json

@@ -408,6 +408,7 @@
       "download_episode": "Download Episode",
       "download_movie": "Download Movie",
       "download_x_item": "Download {{item_count}} items",
+      "download_unwatched_only": "Unwatched Only",
       "download_button": "Download",
       "using_optimized_server": "Using optimized server",
       "using_default_method": "Using default method"

utils/atoms/queue.ts

@@ -1,9 +1,9 @@
-import { processesAtom } from "@/providers/DownloadProvider";
-import { useSettings } from "@/utils/atoms/settings";
-import type { JobStatus } from "@/utils/optimize-server";
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { atom, useAtom } from "jotai";
 import { useEffect } from "react";
+import { processesAtom } from "@/providers/DownloadProvider";
+import { useSettings } from "@/utils/atoms/settings";
+import { JobStatus } from "@/providers/Downloads/types";
 
 export interface Job {
   id: string;
@@ -68,5 +68,5 @@ export const useJobProcessor = () => {
       console.info("Processing queue", queue);
       queueActions.processJob(queue, setQueue, setRunning);
     }
-  }, [processes, queue, running, setQueue, setRunning]);
+  }, [processes, queue, running, setQueue, setRunning, settings]);
 };

utils/atoms/settings.ts

@@ -1,8 +1,3 @@
-import { BITRATES, type Bitrate } from "@/components/BitrateSelector";
-import * as ScreenOrientation from "@/packages/expo-screen-orientation";
-import { apiAtom } from "@/providers/JellyfinProvider";
-import { Video } from "@/utils/jellyseerr/server/models/Movie";
-import { writeInfoLog } from "@/utils/log";
 import {
   type BaseItemKind,
   type CultureDto,
@@ -14,9 +9,13 @@ import {
 import { atom, useAtom, useAtomValue } from "jotai";
 import { useCallback, useEffect, useMemo } from "react";
 import { Platform } from "react-native";
+import { BITRATES, type Bitrate } from "@/components/BitrateSelector";
+import * as ScreenOrientation from "@/packages/expo-screen-orientation";
+import { apiAtom } from "@/providers/JellyfinProvider";
+import { writeInfoLog } from "@/utils/log";
 import { storage } from "../mmkv";
 
-const STREAMYFIN_PLUGIN_ID = "1e9e5d386e6746158719e98a5c34f004";
+const _STREAMYFIN_PLUGIN_ID = "1e9e5d386e6746158719e98a5c34f004";
 const STREAMYFIN_PLUGIN_SETTINGS = "STREAMYFIN_PLUGIN_SETTINGS";
 
 export type DownloadQuality = "original" | "high" | "low";
@@ -82,7 +81,6 @@ export type DefaultLanguageOption = {
 
 export enum DownloadMethod {
   Remux = "remux",
-  Optimized = "optimized",
 }
 
 export type Home = {
@@ -156,7 +154,6 @@ export type Settings = {
   defaultVideoOrientation: ScreenOrientation.OrientationLock;
   forwardSkipTime: number;
   rewindSkipTime: number;
-  optimizedVersionsServerUrl?: string | null;
   downloadMethod: DownloadMethod;
   autoDownload: boolean;
   showCustomMenuLinks: boolean;
@@ -213,7 +210,6 @@ const defaultValues: Settings = {
   defaultVideoOrientation: ScreenOrientation.OrientationLock.DEFAULT,
   forwardSkipTime: 30,
   rewindSkipTime: 10,
-  optimizedVersionsServerUrl: null,
   downloadMethod: DownloadMethod.Remux,
   autoDownload: false,
   showCustomMenuLinks: false,
@@ -224,7 +220,7 @@ const defaultValues: Settings = {
   jellyseerrServerUrl: undefined,
   hiddenLibraries: [],
   enableH265ForChromecast: false,
-  defaultPlayer: VideoPlayer.VLC_3, // ios-only setting. does not matter what this is for android
+  defaultPlayer: VideoPlayer.VLC_4, // ios-only setting. does not matter what this is for android
   maxAutoPlayEpisodeCount: { key: "3", value: 3 },
   autoPlayEpisodeCount: 0,
 };
@@ -288,7 +284,7 @@ export const useSettings = () => {
         writeInfoLog("Got plugin settings", data?.settings);
         return data?.settings;
       },
-      (err) => undefined,
+      (_err) => undefined,
     );
     setPluginSettings(settings);
     return settings;

utils/jellyfin/getDefaultPlaySettings.ts

@@ -1,10 +1,11 @@
 // utils/getDefaultPlaySettings.ts
-import { BITRATES } from "@/components/BitrateSelector";
+
 import type {
   BaseItemDto,
   MediaSourceInfo,
 } from "@jellyfin/sdk/lib/generated-client";
-import { type Settings, useSettings } from "../atoms/settings";
+import { BITRATES } from "@/components/BitrateSelector";
+import { type Settings } from "../atoms/settings";
 import {
   AudioStreamRanker,
   StreamRanker,
@@ -50,18 +51,9 @@ export function getDefaultPlaySettings(
 
   const mediaSource = item.MediaSources?.[0];
 
-  // 2. Get default or preferred audio
-  const defaultAudioIndex = mediaSource?.DefaultAudioStreamIndex;
-  const preferedAudioIndex = mediaSource?.MediaStreams?.find(
-    (x) => x.Type === "Audio" && x.Language === settings?.defaultAudioLanguage,
-  )?.Index;
-  const firstAudioIndex = mediaSource?.MediaStreams?.find(
-    (x) => x.Type === "Audio",
-  )?.Index;
-
   // We prefer the previous track over the default track.
   const trackOptions: TrackOptions = {
-    DefaultAudioStreamIndex: defaultAudioIndex ?? -1,
+    DefaultAudioStreamIndex: mediaSource?.DefaultAudioStreamIndex ?? -1,
     DefaultSubtitleStreamIndex: mediaSource?.DefaultSubtitleStreamIndex ?? -1,
   };
 

utils/jellyfin/media/getDownloadUrl.ts

@@ -0,0 +1,68 @@
+import type { Api } from "@jellyfin/sdk";
+import type {
+  BaseItemDto,
+  MediaSourceInfo,
+} from "@jellyfin/sdk/lib/generated-client/models";
+import { Bitrate } from "@/components/BitrateSelector";
+import { generateDeviceProfile } from "@/utils/profiles/native";
+import { getDownloadStreamUrl, getStreamUrl } from "./getStreamUrl";
+
+export const getDownloadUrl = async ({
+  api,
+  item,
+  userId,
+  mediaSource,
+  maxBitrate,
+  audioStreamIndex,
+  subtitleStreamIndex,
+  deviceId,
+}: {
+  api: Api;
+  item: BaseItemDto;
+  userId: string;
+  mediaSource: MediaSourceInfo;
+  maxBitrate: Bitrate;
+  audioStreamIndex: number;
+  subtitleStreamIndex: number;
+  deviceId: string;
+}): Promise<{
+  url: string | null;
+  mediaSource: MediaSourceInfo | null;
+} | null> => {
+  const streamDetails = await getStreamUrl({
+    api,
+    item,
+    userId,
+    startTimeTicks: 0,
+    mediaSourceId: mediaSource.Id,
+    maxStreamingBitrate: maxBitrate.value,
+    audioStreamIndex,
+    subtitleStreamIndex,
+    deviceId,
+    deviceProfile: await generateDeviceProfile(),
+  });
+
+  if (maxBitrate.key === "Max" && !streamDetails?.mediaSource?.TranscodingUrl) {
+    console.log("Downloading item directly");
+    return {
+      url: `${api.basePath}/Items/${item.Id}/Download?api_key=${api.accessToken}`,
+      mediaSource: streamDetails?.mediaSource ?? null,
+    };
+  }
+
+  const downloadStreamDetails = await getDownloadStreamUrl({
+    api,
+    item,
+    userId,
+    mediaSourceId: mediaSource.Id,
+    deviceId,
+    maxStreamingBitrate: maxBitrate.value,
+    audioStreamIndex,
+    subtitleStreamIndex,
+  });
+
+  return {
+    url: downloadStreamDetails?.url ?? null,
+    mediaSource: downloadStreamDetails?.mediaSource ?? null,
+  };
+};

utils/jellyfin/media/getStreamUrl.ts

@@ -1,12 +1,10 @@
-import generateDeviceProfile from "@/utils/profiles/native";
 import type { Api } from "@jellyfin/sdk";
 import type {
   BaseItemDto,
   MediaSourceInfo,
-  PlaybackInfoResponse,
 } from "@jellyfin/sdk/lib/generated-client/models";
 import { getMediaInfoApi } from "@jellyfin/sdk/lib/utils/api";
-import { Alert } from "react-native";
+import download from "@/utils/profiles/download";
 
 export const getStreamUrl = async ({
   api,
@@ -15,11 +13,10 @@ export const getStreamUrl = async ({
   startTimeTicks = 0,
   maxStreamingBitrate,
   playSessionId,
-  deviceProfile = generateDeviceProfile(),
+  deviceProfile,
   audioStreamIndex = 0,
   subtitleStreamIndex = undefined,
   mediaSourceId,
-  download = false,
   deviceId,
 }: {
   api: Api | null | undefined;
@@ -28,12 +25,11 @@ export const getStreamUrl = async ({
   startTimeTicks: number;
   maxStreamingBitrate?: number;
   playSessionId?: string | null;
-  deviceProfile?: any;
+  deviceProfile: any;
   audioStreamIndex?: number;
   subtitleStreamIndex?: number;
   height?: number;
   mediaSourceId?: string | null;
-  download?: bool;
   deviceId?: string | null;
 }): Promise<{
   url: string | null;
@@ -73,12 +69,16 @@ export const getStreamUrl = async ({
   }
 
   sessionId = res.data.PlaySessionId || null;
-  mediaSource = res.data.MediaSources[0];
-  let transcodeUrl = mediaSource.TranscodingUrl;
+  mediaSource = res.data.MediaSources?.[0];
+  let transcodeUrl = mediaSource?.TranscodingUrl;
 
   if (transcodeUrl) {
-    if (download) {
-      transcodeUrl = transcodeUrl.replace("master.m3u8", "stream");
+    // We need to change the subtitle method to hls for the transcoded url.
+    if (subtitleStreamIndex === -1) {
+      transcodeUrl = transcodeUrl.replace(
+        "SubtitleMethod=Encode",
+        "SubtitleMethod=Hls",
+      );
     }
     console.log("Video is being transcoded:", transcodeUrl);
     return {
@@ -88,21 +88,6 @@ export const getStreamUrl = async ({
     };
   }
 
-  let downloadParams = {};
-
-  if (download) {
-    // We need to disable static so we can have a remux with subtitle.
-    downloadParams = {
-      subtitleMethod: "Embed",
-      enableSubtitlesInManifest: true,
-      static: "false",
-      allowVideoStreamCopy: true,
-      allowAudioStreamCopy: true,
-      playSessionId: sessionId || "",
-      container: "ts",
-    };
-  }
-
   const streamParams = new URLSearchParams({
     static: "true",
     container: "mp4",
@@ -114,7 +99,6 @@ export const getStreamUrl = async ({
     startTimeTicks: startTimeTicks.toString(),
     maxStreamingBitrate: maxStreamingBitrate?.toString() || "",
     userId: userId || "",
-    ...downloadParams,
   });
 
   const directPlayUrl = `${
@@ -125,7 +109,113 @@ export const getStreamUrl = async ({
 
   return {
     url: directPlayUrl,
-    sessionId: sessionId || playSessionId,
+    sessionId: sessionId || playSessionId || null,
+    mediaSource,
+  };
+};
+
+export const getDownloadStreamUrl = async ({
+  api,
+  item,
+  userId,
+  maxStreamingBitrate,
+  audioStreamIndex = 0,
+  subtitleStreamIndex = undefined,
+  mediaSourceId,
+  deviceId,
+}: {
+  api: Api | null | undefined;
+  item: BaseItemDto | null | undefined;
+  userId: string | null | undefined;
+  maxStreamingBitrate?: number;
+  audioStreamIndex?: number;
+  subtitleStreamIndex?: number;
+  mediaSourceId?: string | null;
+  deviceId?: string | null;
+}): Promise<{
+  url: string | null;
+  sessionId: string | null;
+  mediaSource: MediaSourceInfo | undefined;
+} | null> => {
+  if (!api || !userId || !item?.Id) {
+    console.warn("Missing required parameters for getStreamUrl");
+    return null;
+  }
+
+  let mediaSource: MediaSourceInfo | undefined;
+  let sessionId: string | null | undefined;
+
+  const res = await getMediaInfoApi(api).getPlaybackInfo(
+    {
+      itemId: item.Id!,
+    },
+    {
+      method: "POST",
+      data: {
+        userId,
+        deviceProfile: download,
+        subtitleStreamIndex,
+        startTimeTicks: 0,
+        isPlayback: true,
+        autoOpenLiveStream: true,
+        maxStreamingBitrate,
+        audioStreamIndex,
+        mediaSourceId,
+      },
+    },
+  );
+
+  if (res.status !== 200) {
+    console.error("Error getting playback info:", res.status, res.statusText);
+  }
+
+  sessionId = res.data.PlaySessionId || null;
+  mediaSource = res.data.MediaSources?.[0];
+  let transcodeUrl = mediaSource?.TranscodingUrl;
+
+  if (transcodeUrl) {
+    transcodeUrl = transcodeUrl.replace("master.m3u8", "stream");
+    console.log("Video is being transcoded:", transcodeUrl);
+    return {
+      url: `${api.basePath}${transcodeUrl}`,
+      sessionId,
+      mediaSource,
+    };
+  }
+
+  const downloadParams = {
+    // We need to disable static so we can have a remux with subtitle.
+    subtitleMethod: "Embed",
+    enableSubtitlesInManifest: true,
+    allowVideoStreamCopy: true,
+    allowAudioStreamCopy: true,
+    playSessionId: sessionId || "",
+  };
+
+  const streamParams = new URLSearchParams({
+    static: "false",
+    container: "ts",
+    mediaSourceId: mediaSource?.Id || "",
+    subtitleStreamIndex: subtitleStreamIndex?.toString() || "",
+    audioStreamIndex: audioStreamIndex?.toString() || "",
+    deviceId: deviceId || api.deviceInfo.id,
+    api_key: api.accessToken,
+    startTimeTicks: "0",
+    maxStreamingBitrate: maxStreamingBitrate?.toString() || "",
+    userId: userId || "",
+  });
+
+  Object.entries(downloadParams).forEach(([key, value]) => {
+    streamParams.append(key, value.toString());
+  });
+
+  const directPlayUrl = `${
+    api.basePath
+  }/Videos/${item.Id}/stream?${streamParams.toString()}`;
+
+  return {
+    url: directPlayUrl,
+    sessionId: sessionId || null,
     mediaSource,
   };
 };

utils/jellyfin/playstate/markAsNotPlayed.ts

@@ -1,45 +0,0 @@
-import type { Api } from "@jellyfin/sdk";
-import type { AxiosError } from "axios";
-
-interface MarkAsNotPlayedParams {
-  api: Api | null | undefined;
-  itemId: string | null | undefined;
-  userId: string | null | undefined;
-}
-
-/**
- * Marks a media item as not played for a specific user.
- *
- * @param params - The parameters for marking an item as not played
- * @returns A promise that resolves to true if the operation was successful, false otherwise
- */
-export const markAsNotPlayed = async ({
-  api,
-  itemId,
-  userId,
-}: MarkAsNotPlayedParams): Promise<void> => {
-  if (!api || !itemId || !userId) {
-    console.error("Invalid parameters for markAsNotPlayed");
-    return;
-  }
-
-  try {
-    await api.axiosInstance.delete(
-      `${api.basePath}/UserPlayedItems/${itemId}`,
-      {
-        params: { userId },
-        headers: {
-          Authorization: `MediaBrowser DeviceId="${api.deviceInfo.id}", Token="${api.accessToken}"`,
-        },
-      },
-    );
-  } catch (error) {
-    const axiosError = error as AxiosError;
-    console.error(
-      "Failed to mark item as not played:",
-      axiosError.message,
-      axiosError.response?.status,
-    );
-    return;
-  }
-};

utils/jellyfin/playstate/markAsPlayed.ts

@@ -1,37 +0,0 @@
-import type { Api } from "@jellyfin/sdk";
-import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { getPlaystateApi } from "@jellyfin/sdk/lib/utils/api";
-
-interface MarkAsPlayedParams {
-  api: Api | null | undefined;
-  item: BaseItemDto | null | undefined;
-  userId: string | null | undefined;
-}
-
-/**
- * Marks a media item as played and updates its progress to completion.
- *
- * @param params - The parameters for marking an item as played∏
- * @returns A promise that resolves to true if the operation was successful, false otherwise
- */
-export const markAsPlayed = async ({
-  api,
-  item,
-  userId,
-}: MarkAsPlayedParams): Promise<boolean> => {
-  if (!api || !item?.Id || !userId || !item.RunTimeTicks) {
-    console.error("Invalid parameters for markAsPlayed");
-    return false;
-  }
-
-  try {
-    const response = await getPlaystateApi(api).markPlayedItem({
-      itemId: item.Id,
-      datePlayed: new Date().toISOString(),
-    });
-
-    return response.status === 200;
-  } catch (error) {
-    return false;
-  }
-};

utils/jellyfin/playstate/reportPlaybackProgress.ts

@@ -1,70 +0,0 @@
-import { getOrSetDeviceId } from "@/providers/JellyfinProvider";
-import type { Settings } from "@/utils/atoms/settings";
-import old from "@/utils/profiles/old";
-import type { Api } from "@jellyfin/sdk";
-import { DeviceProfile } from "@jellyfin/sdk/lib/generated-client";
-import {
-  getMediaInfoApi,
-  getPlaystateApi,
-  getSessionApi,
-} from "@jellyfin/sdk/lib/utils/api";
-import { getAuthHeaders } from "../jellyfin";
-import { postCapabilities } from "../session/capabilities";
-
-interface ReportPlaybackProgressParams {
-  api?: Api | null;
-  sessionId?: string | null;
-  itemId?: string | null;
-  positionTicks?: number | null;
-  IsPaused?: boolean;
-  deviceProfile?: Settings["deviceProfile"];
-}
-
-/**
- * Reports playback progress to the Jellyfin server.
- *
- * @param params - The parameters for reporting playback progress
- * @throws {Error} If any required parameter is missing
- */
-export const reportPlaybackProgress = async ({
-  api,
-  sessionId,
-  itemId,
-  positionTicks,
-  IsPaused = false,
-  deviceProfile,
-}: ReportPlaybackProgressParams): Promise<void> => {
-  if (!api || !sessionId || !itemId || !positionTicks) {
-    return;
-  }
-
-  console.info("reportPlaybackProgress ~ IsPaused", IsPaused);
-
-  try {
-    await getPlaystateApi(api).onPlaybackProgress({
-      itemId,
-      audioStreamIndex: 0,
-      subtitleStreamIndex: 0,
-      mediaSourceId: itemId,
-      positionTicks: Math.round(positionTicks),
-      isPaused: IsPaused,
-      isMuted: false,
-      playMethod: "Transcode",
-    });
-    // await api.axiosInstance.post(
-    //   `${api.basePath}/Sessions/Playing/Progress`,
-    //   {
-    //     ItemId: itemId,
-    //     PlaySessionId: sessionId,
-    //     IsPaused,
-    //     PositionTicks: Math.round(positionTicks),
-    //     CanSeek: true,
-    //     MediaSourceId: itemId,
-    //     EventName: "timeupdate",
-    //   },
-    //   { headers: getAuthHeaders(api) }
-    // );
-  } catch (error) {
-    console.error(error);
-  }
-};

utils/jellyfin/session/capabilities.ts

@@ -1,7 +1,7 @@
-import type { Settings } from "@/utils/atoms/settings";
-import generateDeviceProfile from "@/utils/profiles/native";
 import type { Api } from "@jellyfin/sdk";
 import type { AxiosResponse } from "axios";
+import type { Settings } from "@/utils/atoms/settings";
+import { generateDeviceProfile } from "@/utils/profiles/native";
 import { getAuthHeaders } from "../jellyfin";
 
 interface PostCapabilitiesParams {
@@ -43,14 +43,14 @@ export const postCapabilities = async ({
         ],
         supportsMediaControl: true,
         id: sessionId,
-        DeviceProfile: generateDeviceProfile(),
+        DeviceProfile: await generateDeviceProfile(),
       },
       {
         headers: getAuthHeaders(api),
       },
     );
     return d;
-  } catch (error) {
+  } catch (_error) {
     throw new Error("Failed to mark as not played");
   }
 };

utils/optimize-server.ts

@@ -1,239 +0,0 @@
-import { itemRouter } from "@/components/common/TouchableItemRouter";
-import { DownloadedItem } from "@/providers/DownloadProvider";
-import type {
-  BaseItemDto,
-  MediaSourceInfo,
-} from "@jellyfin/sdk/lib/generated-client";
-import axios from "axios";
-import { MMKV } from "react-native-mmkv";
-import { writeToLog } from "./log";
-
-interface IJobInput {
-  deviceId?: string | null;
-  authHeader?: string | null;
-  url?: string | null;
-}
-
-export interface JobStatus {
-  id: string;
-  status:
-    | "queued"
-    | "optimizing"
-    | "completed"
-    | "failed"
-    | "cancelled"
-    | "downloading";
-  progress: number;
-  outputPath: string;
-  inputUrl: string;
-  deviceId: string;
-  itemId: string;
-  item: BaseItemDto;
-  speed?: number;
-  timestamp: Date;
-  base64Image?: string;
-}
-
-/**
- * Fetches all jobs for a specific device.
- *
- * @param {IGetAllDeviceJobs} params - The parameters for the API request.
- * @param {string} params.deviceId - The ID of the device to fetch jobs for.
- * @param {string} params.authHeader - The authorization header for the API request.
- * @param {string} params.url - The base URL for the API endpoint.
- *
- * @returns {Promise<JobStatus[]>} A promise that resolves to an array of job statuses.
- *
- * @throws {Error} Throws an error if the API request fails or returns a non-200 status code.
- */
-export async function getAllJobsByDeviceId({
-  deviceId,
-  authHeader,
-  url,
-}: IJobInput): Promise<JobStatus[]> {
-  const statusResponse = await axios.get(`${url}all-jobs`, {
-    headers: {
-      Authorization: authHeader,
-    },
-    params: {
-      deviceId,
-    },
-  });
-  if (statusResponse.status !== 200) {
-    console.error(
-      statusResponse.status,
-      statusResponse.data,
-      statusResponse.statusText,
-    );
-    throw new Error("Failed to fetch job status");
-  }
-
-  return statusResponse.data;
-}
-
-interface ICancelJob {
-  authHeader: string;
-  url: string;
-  id: string;
-}
-
-export async function cancelJobById({
-  authHeader,
-  url,
-  id,
-}: ICancelJob): Promise<boolean> {
-  const statusResponse = await axios.delete(`${url}cancel-job/${id}`, {
-    headers: {
-      Authorization: authHeader,
-    },
-  });
-  if (statusResponse.status !== 200) {
-    throw new Error("Failed to cancel process");
-  }
-
-  return true;
-}
-
-export async function cancelAllJobs({ authHeader, url, deviceId }: IJobInput) {
-  if (!deviceId) return false;
-  if (!authHeader) return false;
-  if (!url) return false;
-
-  try {
-    await getAllJobsByDeviceId({
-      deviceId,
-      authHeader,
-      url,
-    }).then((jobs) => {
-      for (const job of jobs) {
-        cancelJobById({
-          authHeader,
-          url,
-          id: job.id,
-        });
-      }
-    });
-  } catch (error) {
-    writeToLog("ERROR", "Failed to cancel all jobs", error);
-    console.error(error);
-    return false;
-  }
-
-  return true;
-}
-
-/**
- * Fetches statistics for a specific device.
- *
- * @param {IJobInput} params - The parameters for the API request.
- * @param {string} params.deviceId - The ID of the device to fetch statistics for.
- * @param {string} params.authHeader - The authorization header for the API request.
- * @param {string} params.url - The base URL for the API endpoint.
- *
- * @returns {Promise<any | null>} A promise that resolves to the statistics data or null if the request fails.
- *
- * @throws {Error} Throws an error if any required parameter is missing.
- */
-export async function getStatistics({
-  authHeader,
-  url,
-  deviceId,
-}: IJobInput): Promise<any | null> {
-  if (!deviceId || !authHeader || !url) {
-    return null;
-  }
-
-  try {
-    const statusResponse = await axios.get(`${url}statistics`, {
-      headers: {
-        Authorization: authHeader,
-      },
-      params: {
-        deviceId,
-      },
-    });
-
-    return statusResponse.data;
-  } catch (error) {
-    console.error("Failed to fetch statistics:", error);
-    return null;
-  }
-}
-
-/**
- * Saves the download item info to disk - this data is used temporarily to fetch additional download information
- * in combination with the optimize server. This is used to not have to send all item info to the optimize server.
- *
- * @param {BaseItemDto} item - The item to save.
- * @param {MediaSourceInfo} mediaSource - The media source of the item.
- * @param {string} url - The URL of the item.
- * @return {boolean} A promise that resolves when the item info is saved.
- */
-export function saveDownloadItemInfoToDiskTmp(
-  item: BaseItemDto,
-  mediaSource: MediaSourceInfo,
-  url: string,
-): boolean {
-  try {
-    const storage = new MMKV();
-
-    const downloadInfo = JSON.stringify({
-      item,
-      mediaSource,
-      url,
-    });
-
-    storage.set(`tmp_download_info_${item.Id}`, downloadInfo);
-
-    return true;
-  } catch (error) {
-    console.error("Failed to save download item info to disk:", error);
-    throw error;
-  }
-}
-
-/**
- * Retrieves the download item info from disk.
- *
- * @param {string} itemId - The ID of the item to retrieve.
- * @return {{
- *  item: BaseItemDto;
- *  mediaSource: MediaSourceInfo;
- *  url: string;
- * } | null} The retrieved download item info or null if not found.
- */
-export function getDownloadItemInfoFromDiskTmp(itemId: string): {
-  item: BaseItemDto;
-  mediaSource: MediaSourceInfo;
-  url: string;
-} | null {
-  try {
-    const storage = new MMKV();
-    const rawInfo = storage.getString(`tmp_download_info_${itemId}`);
-
-    if (rawInfo) {
-      return JSON.parse(rawInfo);
-    }
-    return null;
-  } catch (error) {
-    console.error("Failed to retrieve download item info from disk:", error);
-    return null;
-  }
-}
-
-/**
- * Deletes the download item info from disk.
- *
- * @param {string} itemId - The ID of the item to delete.
- * @return {boolean} True if the item info was successfully deleted, false otherwise.
- */
-export function deleteDownloadItemInfoFromDiskTmp(itemId: string): boolean {
-  try {
-    const storage = new MMKV();
-    storage.delete(`tmp_download_info_${itemId}`);
-    return true;
-  } catch (error) {
-    console.error("Failed to delete download item info from disk:", error);
-    return false;
-  }
-}

utils/profiles/download.js

@@ -59,80 +59,55 @@ export default {
   ],
   SubtitleProfiles: [
     // Official foramts
-    { Format: "vtt", Method: "Embed" },
     { Format: "vtt", Method: "Encode" },
 
-    { Format: "webvtt", Method: "Embed" },
     { Format: "webvtt", Method: "Encode" },
 
-    { Format: "srt", Method: "Embed" },
     { Format: "srt", Method: "Encode" },
 
-    { Format: "subrip", Method: "Embed" },
     { Format: "subrip", Method: "Encode" },
 
-    { Format: "ttml", Method: "Embed" },
     { Format: "ttml", Method: "Encode" },
 
-    { Format: "dvbsub", Method: "Embed" },
     { Format: "dvdsub", Method: "Encode" },
 
-    { Format: "ass", Method: "Embed" },
     { Format: "ass", Method: "Encode" },
 
-    { Format: "idx", Method: "Embed" },
     { Format: "idx", Method: "Encode" },
 
-    { Format: "pgs", Method: "Embed" },
     { Format: "pgs", Method: "Encode" },
 
-    { Format: "pgssub", Method: "Embed" },
     { Format: "pgssub", Method: "Encode" },
 
-    { Format: "ssa", Method: "Embed" },
     { Format: "ssa", Method: "Encode" },
 
     // Other formats
-    { Format: "microdvd", Method: "Embed" },
     { Format: "microdvd", Method: "Encode" },
 
-    { Format: "mov_text", Method: "Embed" },
     { Format: "mov_text", Method: "Encode" },
 
-    { Format: "mpl2", Method: "Embed" },
     { Format: "mpl2", Method: "Encode" },
 
-    { Format: "pjs", Method: "Embed" },
     { Format: "pjs", Method: "Encode" },
 
-    { Format: "realtext", Method: "Embed" },
     { Format: "realtext", Method: "Encode" },
 
-    { Format: "scc", Method: "Embed" },
     { Format: "scc", Method: "Encode" },
 
-    { Format: "smi", Method: "Embed" },
     { Format: "smi", Method: "Encode" },
 
-    { Format: "stl", Method: "Embed" },
     { Format: "stl", Method: "Encode" },
 
-    { Format: "sub", Method: "Embed" },
     { Format: "sub", Method: "Encode" },
 
-    { Format: "subviewer", Method: "Embed" },
     { Format: "subviewer", Method: "Encode" },
 
-    { Format: "teletext", Method: "Embed" },
     { Format: "teletext", Method: "Encode" },
 
-    { Format: "text", Method: "Embed" },
     { Format: "text", Method: "Encode" },
 
-    { Format: "vplayer", Method: "Embed" },
     { Format: "vplayer", Method: "Encode" },
 
-    { Format: "xsub", Method: "Embed" },
     { Format: "xsub", Method: "Encode" },
   ],
 };

utils/profiles/native.js

@@ -6,6 +6,7 @@ import DeviceInfo from "react-native-device-info";
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 import MediaTypes from "../../constants/MediaTypes";
+import { getSubtitleProfiles } from "./subtitles";
 
 // Helper function to detect Dolby Vision support
 const supportsDolbyVision = async () => {
@@ -27,13 +28,14 @@ const supportsDolbyVision = async () => {
   return false;
 };
 
-export const generateDeviceProfile = async () => {
+export const generateDeviceProfile = async ({ transcode = false } = {}) => {
+  console.log("generating device profile", { transcode });
   const dolbyVisionSupported = await supportsDolbyVision();
   /**
    * Device profile for Native video player
    */
   const profile = {
-    Name: "1. Vlc Player",
+    Name: `1. Vlc Player${transcode ? " (Transcoding)" : ""}`,
     MaxStaticBitrate: 999_999_999,
     MaxStreamingBitrate: 999_999_999,
     CodecProfiles: [
@@ -62,7 +64,7 @@ export const generateDeviceProfile = async () => {
     DirectPlayProfiles: [
       {
         Type: MediaTypes.Video,
-        Container: "mp4,mkv,avi,mov,flv,ts,m2ts,webm,ogv,3gp,hls",
+        Container: "mkv,avi,mov,flv,ts,m2ts,webm,ogv,3gp,hls",
         VideoCodec:
           "h264,hevc,mpeg4,divx,xvid,wmv,vc1,vp8,vp9,av1,avi,mpeg,mpeg2video",
         AudioCodec: "aac,ac3,eac3,mp3,flac,alac,opus,vorbis,wma,dts",
@@ -79,7 +81,7 @@ export const generateDeviceProfile = async () => {
         Type: MediaTypes.Video,
         Context: "Streaming",
         Protocol: "hls",
-        Container: "ts",
+        Container: transcode ? "fmp4" : "ts",
         VideoCodec: "h264, hevc",
         AudioCodec: "aac,mp3,ac3,dts",
       },
@@ -92,84 +94,7 @@ export const generateDeviceProfile = async () => {
         MaxAudioChannels: "2",
       },
     ],
-    SubtitleProfiles: [
-      // Official formats
-      { Format: "vtt", Method: "Embed" },
-      { Format: "vtt", Method: "External" },
-
-      { Format: "webvtt", Method: "Embed" },
-      { Format: "webvtt", Method: "External" },
-
-      { Format: "srt", Method: "Embed" },
-      { Format: "srt", Method: "External" },
-
-      { Format: "subrip", Method: "Embed" },
-      { Format: "subrip", Method: "External" },
-
-      { Format: "ttml", Method: "Embed" },
-      { Format: "ttml", Method: "External" },
-
-      { Format: "dvbsub", Method: "Embed" },
-      { Format: "dvdsub", Method: "Encode" },
-
-      { Format: "ass", Method: "Embed" },
-      { Format: "ass", Method: "External" },
-
-      { Format: "idx", Method: "Embed" },
-      { Format: "idx", Method: "Encode" },
-
-      { Format: "pgs", Method: "Embed" },
-      { Format: "pgs", Method: "Encode" },
-
-      { Format: "pgssub", Method: "Embed" },
-      { Format: "pgssub", Method: "Encode" },
-
-      { Format: "ssa", Method: "Embed" },
-      { Format: "ssa", Method: "External" },
-
-      // Other formats
-      { Format: "microdvd", Method: "Embed" },
-      { Format: "microdvd", Method: "External" },
-
-      { Format: "mov_text", Method: "Embed" },
-      { Format: "mov_text", Method: "External" },
-
-      { Format: "mpl2", Method: "Embed" },
-      { Format: "mpl2", Method: "External" },
-
-      { Format: "pjs", Method: "Embed" },
-      { Format: "pjs", Method: "External" },
-
-      { Format: "realtext", Method: "Embed" },
-      { Format: "realtext", Method: "External" },
-
-      { Format: "scc", Method: "Embed" },
-      { Format: "scc", Method: "External" },
-
-      { Format: "smi", Method: "Embed" },
-      { Format: "smi", Method: "External" },
-
-      { Format: "stl", Method: "Embed" },
-      { Format: "stl", Method: "External" },
-
-      { Format: "sub", Method: "Embed" },
-      { Format: "sub", Method: "External" },
-
-      { Format: "subviewer", Method: "Embed" },
-      { Format: "subviewer", Method: "External" },
-
-      { Format: "teletext", Method: "Embed" },
-      { Format: "teletext", Method: "Encode" },
-
-      { Format: "text", Method: "Embed" },
-      { Format: "text", Method: "External" },
-
-      { Format: "vplayer", Method: "Embed" },
-      { Format: "vplayer", Method: "External" },
-
-      { Format: "xsub", Method: "Embed" },
-      { Format: "xsub", Method: "External" },
-    ],
+    SubtitleProfiles: getSubtitleProfiles(transcode ? "hls" : "External"),
   };
 
   // Add Dolby Vision restriction if not supported
@@ -192,5 +117,5 @@ export const generateDeviceProfile = async () => {
 };
 
 export default async () => {
-  return await generateDeviceProfile();
+  return await generateDeviceProfile({ transcode: false });
 };

utils/profiles/subtitles.js

@@ -0,0 +1,56 @@
+/**
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+const COMMON_SUBTITLE_PROFILES = [
+  // Official formats
+
+  { Format: "dvdsub", Method: "Embed" },
+  { Format: "dvdsub", Method: "Encode" },
+
+  { Format: "idx", Method: "Embed" },
+  { Format: "idx", Method: "Encode" },
+
+  { Format: "pgs", Method: "Embed" },
+  { Format: "pgs", Method: "Encode" },
+
+  { Format: "pgssub", Method: "Embed" },
+  { Format: "pgssub", Method: "Encode" },
+
+  { Format: "teletext", Method: "Embed" },
+  { Format: "teletext", Method: "Encode" },
+];
+
+const VARYING_SUBTITLE_FORMATS = [
+  "webvtt",
+  "vtt",
+  "srt",
+  "subrip",
+  "ttml",
+  "ass",
+  "ssa",
+  "microdvd",
+  "mov_text",
+  "mpl2",
+  "pjs",
+  "realtext",
+  "scc",
+  "smi",
+  "stl",
+  "sub",
+  "subviewer",
+  "text",
+  "vplayer",
+  "xsub",
+];
+
+export const getSubtitleProfiles = (secondaryMethod) => {
+  const profiles = [...COMMON_SUBTITLE_PROFILES];
+  for (const format of VARYING_SUBTITLE_FORMATS) {
+    profiles.push({ Format: format, Method: "Embed" });
+    profiles.push({ Format: format, Method: secondaryMethod });
+  }
+  return profiles;
+};

utils/segments.ts

@@ -0,0 +1,114 @@
+import { Api } from "@jellyfin/sdk";
+import { useQuery } from "@tanstack/react-query";
+import { useAtom } from "jotai";
+import { useDownload } from "@/providers/DownloadProvider";
+import { DownloadedItem, MediaTimeSegment } from "@/providers/Downloads/types";
+import { apiAtom } from "@/providers/JellyfinProvider";
+import { getAuthHeaders } from "./jellyfin/jellyfin";
+
+interface IntroTimestamps {
+  EpisodeId: string;
+  HideSkipPromptAt: number;
+  IntroEnd: number;
+  IntroStart: number;
+  ShowSkipPromptAt: number;
+  Valid: boolean;
+}
+
+interface CreditTimestamps {
+  Introduction: {
+    Start: number;
+    End: number;
+    Valid: boolean;
+  };
+  Credits: {
+    Start: number;
+    End: number;
+    Valid: boolean;
+  };
+}
+
+export const useSegments = (itemId: string, isOffline: boolean) => {
+  const [api] = useAtom(apiAtom);
+  const { downloadedFiles } = useDownload();
+  const downloadedItem = downloadedFiles?.find(
+    (d: DownloadedItem) => d.item.Id === itemId,
+  );
+
+  return useQuery({
+    queryKey: ["segments", itemId, isOffline],
+    queryFn: async () => {
+      if (isOffline && downloadedItem) {
+        return getSegmentsForItem(downloadedItem);
+      }
+      if (!api) {
+        throw new Error("API client is not available");
+      }
+      return fetchAndParseSegments(itemId, api);
+    },
+    enabled: !!api,
+  });
+};
+
+export const getSegmentsForItem = (
+  item: DownloadedItem,
+): {
+  introSegments: MediaTimeSegment[];
+  creditSegments: MediaTimeSegment[];
+} => {
+  return {
+    introSegments: item.introSegments || [],
+    creditSegments: item.creditSegments || [],
+  };
+};
+
+export const fetchAndParseSegments = async (
+  itemId: string,
+  api: Api,
+): Promise<{
+  introSegments: MediaTimeSegment[];
+  creditSegments: MediaTimeSegment[];
+}> => {
+  const introSegments: MediaTimeSegment[] = [];
+  const creditSegments: MediaTimeSegment[] = [];
+
+  try {
+    const [introRes, creditRes] = await Promise.allSettled([
+      api.axiosInstance.get<IntroTimestamps>(
+        `${api.basePath}/Episode/${itemId}/IntroTimestamps`,
+        {
+          headers: getAuthHeaders(api),
+        },
+      ),
+      api.axiosInstance.get<CreditTimestamps>(
+        `${api.basePath}/Episode/${itemId}/Timestamps`,
+        {
+          headers: getAuthHeaders(api),
+        },
+      ),
+    ]);
+
+    if (introRes.status === "fulfilled" && introRes.value.data.Valid) {
+      introSegments.push({
+        startTime: introRes.value.data.IntroStart,
+        endTime: introRes.value.data.IntroEnd,
+        text: "Intro",
+      });
+    }
+
+    if (
+      creditRes.status === "fulfilled" &&
+      creditRes.value.data.Credits.Valid
+    ) {
+      creditSegments.push({
+        startTime: creditRes.value.data.Credits.Start,
+        endTime: creditRes.value.data.Credits.End,
+        text: "Credits",
+      });
+    }
+  } catch (error) {
+    console.error("Failed to fetch segments", error);
+  }
+
+  return { introSegments, creditSegments };
+};