merge upstream

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

.github/ISSUE_TEMPLATE/bug_report.yml

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

.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
@@ -30,7 +30,7 @@ jobs:
       - name: 🍞 Setup Bun
         uses: oven-sh/setup-bun@735343b667d3e6f658f44d0eca948eb6282f2b76 # v2.0.2
         with:
-          bun-version: '1.2.15'
+          bun-version: '1.2.17'
 
       - name: ☕ Setup JDK
         uses: actions/setup-java@c5195efecf7bdfc987ee8bae7a71cb8b11521c00 # v4.7.1
@@ -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,9 +73,9 @@ 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-${{ github.sha }}-${{ env.DATE_TAG }}
+          name: streamyfin-apk-${{ env.DATE_TAG }}
           path: |
             android/app/build/outputs/apk/release/*.apk
             android/app/build/outputs/bundle/release/*.aab

.github/workflows/build-ios.yml

@@ -30,7 +30,7 @@ jobs:
       - name: 🍞 Setup Bun
         uses: oven-sh/setup-bun@735343b667d3e6f658f44d0eca948eb6282f2b76 # v2.0.2
         with:
-          bun-version: '1.2.15'
+          bun-version: '1.2.17'
 
       - name: 💾 Cache Bun dependencies
         uses: actions/cache@5a3ec84eff668545956fd18022155c47e93e2684 # v4
@@ -64,7 +64,7 @@ jobs:
       - name: 📤 Upload IPA artifact
         uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
         with:
-          name: streamyfin-ipa-${{ github.sha }}-${{ env.DATE_TAG }}
+          name: streamyfin-ipa-${{ env.DATE_TAG }}
           path: |
             build-*.ipa
           retention-days: 7

.github/workflows/check-lockfile.yml

@@ -29,7 +29,7 @@ jobs:
       - name: 🍞 Setup Bun
         uses: oven-sh/setup-bun@735343b667d3e6f658f44d0eca948eb6282f2b76 # v2.0.2
         with:
-          bun-version: '1.2.15'
+          bun-version: '1.2.17'
 
       - name: 💾 Cache Bun dependencies
         uses: actions/cache@5a3ec84eff668545956fd18022155c47e93e2684 # v4.2.3

.github/workflows/ci-codeql.yml

@@ -31,13 +31,13 @@ jobs:
           fetch-depth: 0
 
       - name: 🏁 Initialize CodeQL
-        uses: github/codeql-action/init@ff0a06e83cb2de871e5a09832bc6a81e7276941f # v3.28.18
+        uses: github/codeql-action/init@181d5eefc20863364f96762470ba6f862bdef56b # v3.29.2
         with:
           languages: ${{ matrix.language }}
           queries: +security-extended,security-and-quality
 
       - name: 🛠️ Autobuild
-        uses: github/codeql-action/autobuild@ff0a06e83cb2de871e5a09832bc6a81e7276941f # v3.28.18
+        uses: github/codeql-action/autobuild@181d5eefc20863364f96762470ba6f862bdef56b # v3.29.2
 
       - name: 🧪 Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@ff0a06e83cb2de871e5a09832bc6a81e7276941f # v3.28.18
+        uses: github/codeql-action/analyze@181d5eefc20863364f96762470ba6f862bdef56b # v3.29.2

.github/workflows/linting.yml

@@ -22,7 +22,7 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
-      - uses: marocchino/sticky-pull-request-comment@67d0dec7b07ed060a405f9b2a64b8ab319fdd7db # v2.9.2
+      - uses: marocchino/sticky-pull-request-comment@d2ad0de260ae8b0235ce059e63f2949ba9e05943 # v2.9.3
         if: always() && (steps.lint_pr_title.outputs.error_message != null)
         with:
           header: pr-title-lint-error
@@ -36,7 +36,7 @@ jobs:
             ```
 
       - if: ${{ steps.lint_pr_title.outputs.error_message == null }}
-        uses: marocchino/sticky-pull-request-comment@67d0dec7b07ed060a405f9b2a64b8ab319fdd7db # v2.9.2
+        uses: marocchino/sticky-pull-request-comment@d2ad0de260ae8b0235ce059e63f2949ba9e05943 # v2.9.3
         with:
           header: pr-title-lint-error
           delete: true
@@ -81,12 +81,12 @@ jobs:
       - name: "🟢 Setup Node.js"
         uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
         with:
-          node-version: '20.x'
+          node-version: '22.x'
 
       - name: "🍞 Setup Bun"
         uses: oven-sh/setup-bun@735343b667d3e6f658f44d0eca948eb6282f2b76 # v2.0.2
         with:
-          bun-version: '1.2.15'
+          bun-version: '1.2.17'
 
       - name: "📦 Install dependencies"
         run: bun install --frozen-lockfile

.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,

README.md

@@ -2,7 +2,7 @@
 
 <a href="https://www.buymeacoffee.com/fredrikbur3" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Buy Me A Coffee" style="height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;" ></a>
 
-Welcome to Streamyfin, a simple and user-friendly Jellyfin video streaming client built with Expo. If you're looking for an alternative to other Jellyfin clients, we hope you'll find Streamyfin to be a useful addition to your media streaming toolbox.
+A simple and user-friendly Jellyfin video streaming client built with Expo. If you are looking for an alternative to other Jellyfin clients, we hope you find Streamyfin a useful addition to your media streaming toolbox.
 
 <div style="display: flex; flex-direction: row; gap: 8px">
   <img width=150 src="./assets/images/screenshots/screenshot1.png" />
@@ -23,17 +23,17 @@ Welcome to Streamyfin, a simple and user-friendly Jellyfin video streaming clien
 
 ## 🧪 Experimental Features
 
-Streamyfin includes some exciting experimental features like media downloading and Chromecast support. These are still in development, and we appreciate your patience and feedback as we work to improve them.
+Streamyfin includes some exciting experimental features like media downloading and Chromecast support. These features are still in development, and your patience and feedback are much appreciated as we work to improve them.
 
-### Downloading
+### 📥 Downloading
 
 Downloading works by using ffmpeg to convert an HLS stream into a video file on the device. This means that you can download and view any file you can stream! The file is converted by Jellyfin on the server in real time as it is downloaded. This means a **bit longer download times** but supports any file that your server can transcode.
 
-### Chromecast
+### 🎥 Chromecast
 
 Chromecast support is still in development, and we're working on improving it. Currently, it supports casting videos, but we're working on adding support for subtitles and other features.
 
-### Streamyfin Plugin
+### 🧩 Streamyfin Plugin
 
 The Jellyfin Plugin for Streamyfin is a plugin you install into Jellyfin that holds all settings for the client Streamyfin. This allows you to synchronize settings across all your users, like for example:
 
@@ -41,21 +41,21 @@ The Jellyfin Plugin for Streamyfin is a plugin you install into Jellyfin that ho
 - Choose the default languages
 - Set download method and search provider
 - Customize home screen
-- And more...
+- And much more...
 
 [Streamyfin Plugin](https://github.com/streamyfin/jellyfin-plugin-streamyfin)
 
-### Jellysearch
+### 🔍 Jellysearch
 
 [Jellysearch](https://gitlab.com/DomiStyle/jellysearch) now works with Streamyfin! 🚀
 
 > A fast full-text search proxy for Jellyfin. Integrates seamlessly with most Jellyfin clients.
 
-## Roadmap for V1
+## 🛣️ Roadmap for V1
 
-Check out our [Roadmap](https://github.com/users/fredrikburmester/projects/5) to see what we're working on next. We are always open for feedback and suggestions, so please let us know if you have any ideas or feature requests.
+Check out our [Roadmap](https://github.com/users/fredrikburmester/projects/5) To see what we're working on next, we are always open to feedback and suggestions. Please let us know if you have any ideas or feature requests.
 
-## Get it now
+## 📥 Get it now
 
 <div style="display: flex; gap: 5px;">
   <a href="https://apps.apple.com/app/streamyfin/id6593660679?l=en-GB"><img height=50 alt="Get Streamyfin on App Store" src="./assets/Download_on_the_App_Store_Badge.png"/></a>
@@ -64,7 +64,7 @@ Check out our [Roadmap](https://github.com/users/fredrikburmester/projects/5) to
 
 Or download the APKs [here on GitHub](https://github.com/streamyfin/streamyfin/releases) for Android.
 
-### Beta testing
+### 🧪 Beta testing
 
 To access the Streamyfin beta, you need to subscribe to the Member tier (or higher) on [Patreon](https://www.patreon.com/streamyfin). This will give you immediate access to the ⁠🧪-public-beta channel on Discord and I'll know that you have subscribed. This is where I post APKs and IPAs. This won't give automatic access to the TestFlight, however, so you need to send me a DM with the email you use for Apple so that I can manually add you.
 
@@ -81,7 +81,7 @@ To access the Streamyfin beta, you need to subscribe to the Member tier (or high
 
 We welcome any help to make Streamyfin better. If you'd like to contribute, please fork the repository and submit a pull request. For major changes, it's best to open an issue first to discuss your ideas.
 
-### Development info
+### 👨‍💻 Development info
 
 1. Use node `>20`
 2. Install dependencies `bun i && bun run submodule-reload`
@@ -118,7 +118,7 @@ If you have questions or need support, feel free to reach out:
 - GitHub Issues: Report bugs or request features here.
 - Email: [fredrik.burmester@gmail.com](mailto:fredrik.burmester@gmail.com)
 
-## FAQ
+## ❓ FAQ
 
 1. Q: Why can't I see my libraries in Streamyfin?   
    A: Make sure your server is running one of the latest versions and that you have at least one library that isn't audio only.
@@ -135,7 +135,7 @@ We would like to thank the Jellyfin team for their great software and awesome su
 
 Special shoutout to the JF official clients for being an inspiration to ours.
 
-### Core Developers
+### 🏆 Core Developers
 
 Thanks to the following contributors for their significant contributions:
 
@@ -220,6 +220,12 @@ I'd also like to thank the following people and projects for their contributions
 - [Jellyseerr](https://github.com/Fallenbagel/jellyseerr) for enabling API integration with their project.
 - The Jellyfin devs for always being helpful in the Discord.
 
-## Star History
+## ⭐ Star History
 
 [![Star History Chart](https://api.star-history.com/svg?repos=streamyfin/streamyfin&type=Date)](https://star-history.com/#streamyfin/streamyfin&Date)
+
+## ⚠️ Disclaimer
+Streamyfin does not promote, support, or condone piracy in any form. The app is intended solely for streaming media that you personally own and control. It does not provide or include any media content. Any discussions or support requests related to piracy are strictly prohibited across all our channels.
+
+## 🤝 Sponsorship
+VPS hosting generously provided by [Hexabyte](https://hexabyte.se/en/vps/?currency=eur)

app.json

@@ -2,7 +2,7 @@
   "expo": {
     "name": "Streamyfin",
     "slug": "streamyfin",
-    "version": "0.28.0",
+    "version": "0.28.1",
     "orientation": "default",
     "icon": "./assets/images/icon.png",
     "scheme": "streamyfin",

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)/(tabs)/(libraries)/[libraryId].tsx

@@ -367,15 +367,7 @@ const Page = () => {
                   className='mr-1'
                   id={libraryId}
                   queryKey='sortBy'
-                  queryFn={async () =>
-                    sortOptions
-                      .filter(
-                        (s) =>
-                          library?.CollectionType !== "movies" ||
-                          s.key !== SortByOption.DateLastContentAdded,
-                      )
-                      .map((s) => s.key)
-                  }
+                  queryFn={async () => sortOptions.map((s) => s.key)}
                   set={setSortBy}
                   values={sortBy}
                   title={t("library.filters.sort_by")}

app/(auth)/player/_layout.tsx

@@ -1,33 +1,8 @@
-import * as ScreenOrientation from "@/packages/expo-screen-orientation";
-import { useSettings } from "@/utils/atoms/settings";
 import { Stack } from "expo-router";
-import React, { useLayoutEffect } from "react";
-import { Platform } from "react-native";
+import React from "react";
 import { SystemBars } from "react-native-edge-to-edge";
 
 export default function Layout() {
-  const [settings] = useSettings();
-
-  useLayoutEffect(() => {
-    if (Platform.isTV) return;
-
-    if (!settings.followDeviceOrientation && settings.defaultVideoOrientation) {
-      ScreenOrientation.lockAsync(settings.defaultVideoOrientation);
-    }
-
-    return () => {
-      if (Platform.isTV) return;
-
-      if (settings.followDeviceOrientation === true) {
-        ScreenOrientation.unlockAsync();
-      } else {
-        ScreenOrientation.lockAsync(
-          ScreenOrientation.OrientationLock.PORTRAIT_UP,
-        );
-      }
-    };
-  });
-
   return (
     <>
       <SystemBars hidden />

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

@@ -1,9 +1,28 @@
+import {
+  type BaseItemDto,
+  type MediaSourceInfo,
+  PlaybackOrder,
+  PlaybackStartInfo,
+  RepeatMode,
+} from "@jellyfin/sdk/lib/generated-client";
+import {
+  getPlaystateApi,
+  getUserLibraryApi,
+} from "@jellyfin/sdk/lib/utils/api";
+import { activateKeepAwakeAsync, deactivateKeepAwake } from "expo-keep-awake";
+import { router, useGlobalSearchParams, useNavigation } from "expo-router";
+import { useAtomValue } from "jotai";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Alert, Platform, View } from "react-native";
+import { useSharedValue } from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { BITRATES } from "@/components/BitrateSelector";
-import { Loader } from "@/components/Loader";
 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";
@@ -13,41 +32,17 @@ 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 generateDeviceProfile from "@/utils/profiles/native";
+import { storage } from "@/utils/mmkv";
+import { generateDeviceProfile } from "@/utils/profiles/native";
 import { msToTicks, ticksToSeconds } from "@/utils/time";
-import {
-  type BaseItemDto,
-  type MediaSourceInfo,
-  PlaybackOrder,
-  type PlaybackProgressInfo,
-  PlaybackStartInfo,
-  RepeatMode,
-} from "@jellyfin/sdk/lib/generated-client";
-import {
-  getPlaystateApi,
-  getUserLibraryApi,
-} from "@jellyfin/sdk/lib/utils/api";
-import { activateKeepAwakeAsync, deactivateKeepAwake } from "expo-keep-awake";
-import { useGlobalSearchParams, useNavigation } from "expo-router";
-import { useAtomValue } from "jotai";
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import { useTranslation } from "react-i18next";
-import { Alert, Platform, View } from "react-native";
-import { useSharedValue } from "react-native-reanimated";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-const downloadProvider = !Platform.isTV
-  ? require("@/providers/DownloadProvider")
-  : null;
+
+const IGNORE_SAFE_AREAS_KEY = "video_player_ignore_safe_areas";
 
 export default function page() {
   const videoRef = useRef<VlcPlayerViewRef>(null);
@@ -58,7 +53,11 @@ export default function page() {
 
   const [isPlaybackStopped, setIsPlaybackStopped] = useState(false);
   const [showControls, _setShowControls] = useState(true);
-  const [ignoreSafeAreas, setIgnoreSafeAreas] = useState(false);
+  const [ignoreSafeAreas, setIgnoreSafeAreas] = useState(() => {
+    // Load persisted state from storage
+    const saved = storage.getBoolean(IGNORE_SAFE_AREAS_KEY);
+    return saved ?? false;
+  });
   const [isPlaying, setIsPlaying] = useState(false);
   const [isMuted, setIsMuted] = useState(false);
   const [isBuffering, setIsBuffering] = useState(true);
@@ -72,10 +71,7 @@ export default function page() {
     ? null
     : require("react-native-volume-manager");
 
-  let getDownloadedItem = null;
-  if (!Platform.isTV) {
-    getDownloadedItem = downloadProvider.useDownload();
-  }
+  const downloadUtils = useDownload();
 
   const revalidateProgressCache = useInvalidatePlaybackProgressCache();
 
@@ -86,6 +82,11 @@ export default function page() {
     lightHapticFeedback();
   }, []);
 
+  // Persist ignoreSafeAreas state whenever it changes
+  useEffect(() => {
+    storage.set(IGNORE_SAFE_AREAS_KEY, ignoreSafeAreas);
+  }, [ignoreSafeAreas]);
+
   const {
     itemId,
     audioIndex: audioIndexStr,
@@ -93,6 +94,7 @@ export default function page() {
     mediaSourceId,
     bitrateValue: bitrateValueStr,
     offline: offlineStr,
+    playbackPosition: playbackPositionFromUrl,
   } = useGlobalSearchParams<{
     itemId: string;
     audioIndex: string;
@@ -100,10 +102,13 @@ export default function page() {
     mediaSourceId: string;
     bitrateValue: string;
     offline: string;
+    /** Playback position in ticks. */
+    playbackPosition?: string;
   }>();
   const [settings] = useSettings();
   const insets = useSafeAreaInsets();
   const offline = offlineStr === "true";
+  const playbackManager = usePlaybackManager();
 
   const audioIndex = audioIndexStr
     ? Number.parseInt(audioIndexStr, 10)
@@ -116,19 +121,33 @@ 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. */
+  const getInitialPlaybackTicks = useCallback((): number => {
+    if (playbackPositionFromUrl) {
+      return Number.parseInt(playbackPositionFromUrl, 10);
+    }
+    return 0;
+  }, [playbackPositionFromUrl]);
+
   useEffect(() => {
     const fetchItemData = async () => {
       setItemStatus({ isLoading: true, isError: false });
       try {
         let fetchedItem: BaseItemDto | null = null;
         if (offline && !Platform.isTV) {
-          const data = await getDownloadedItem.getDownloadedItem(itemId);
-          if (data) fetchedItem = data.item as BaseItemDto;
+          const data = downloadUtils.getDownloadedItemById(itemId);
+          if (data) {
+            fetchedItem = data.item as BaseItemDto;
+            setDownloadedItem(data);
+          }
         } else {
           const res = await getUserLibraryApi(api!).getItem({
             itemId,
@@ -164,27 +183,31 @@ 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,
-            startTimeTicks: item?.UserData?.PlaybackPositionTicks!,
+            startTimeTicks: getInitialPlaybackTicks(),
             userId: user?.Id,
             audioStreamIndex: audioIndex,
             maxStreamingBitrate: bitrateValue,
             mediaSourceId: mediaSourceId,
             subtitleStreamIndex: subtitleIndex,
-            deviceProfile: native,
+            deviceProfile: bitrateValue ? transcoding : native,
           });
           if (!res) return;
           const { mediaSource, sessionId, url } = res;
@@ -205,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({
@@ -234,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!,
@@ -242,8 +274,6 @@ export default function page() {
       positionTicks: currentTimeInTicks,
       playSessionId: stream?.sessionId!,
     });
-
-    revalidateProgressCache();
   }, [
     api,
     item,
@@ -258,6 +288,7 @@ export default function page() {
     reportPlaybackStopped();
     setIsPlaybackStopped(true);
     videoRef.current?.stop();
+    revalidateProgressCache();
   }, [videoRef, reportPlaybackStopped]);
 
   useEffect(() => {
@@ -296,11 +327,21 @@ export default function page() {
 
       progress.set(currentTime);
 
-      if (offline) return;
+      // Update the playback position in the URL.
+      router.setParams({
+        playbackPosition: msToTicks(currentTime).toString(),
+      });
 
-      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,
@@ -320,29 +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 item?.UserData?.PlaybackPositionTicks
-      ? ticksToSeconds(item.UserData.PlaybackPositionTicks)
-      : 0;
-  }, [item, offline]);
+    return ticksToSeconds(getInitialPlaybackTicks());
+  }, [getInitialPlaybackTicks]);
 
   const volumeUpCb = useCallback(async () => {
     if (Platform.isTV) return;
@@ -427,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;
       }
@@ -446,7 +478,7 @@ export default function page() {
         setIsBuffering(true);
       }
     },
-    [reportPlaybackProgress],
+    [playbackManager, item?.Id, progress],
   );
 
   const allAudio =
@@ -464,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}`);
   }
 
@@ -498,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 />
@@ -532,7 +568,7 @@ export default function page() {
           source={{
             uri: stream?.url || "",
             autoplay: true,
-            isNetwork: true,
+            isNetwork: !offline,
             startPosition,
             externalSubtitles,
             initOptions,
@@ -555,7 +591,7 @@ export default function page() {
           }}
         />
       </View>
-      {videoRef.current && !isPipStarted && isMounted === true ? (
+      {videoRef.current && !isPipStarted && isMounted === true && item ? (
         <Controls
           mediaSource={stream?.mediaSource}
           item={item}

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;
   });
@@ -414,21 +341,32 @@ function Layout() {
     }, []);
 
     useEffect(() => {
-      if (Platform.isTV) return;
-      if (segments.includes("direct-player" as never)) {
+      if (Platform.isTV) {
+        return;
+      }
+
+      if (segments.includes("direct-player" as never)) {
+        if (
+          !settings.followDeviceOrientation &&
+          settings.defaultVideoOrientation
+        ) {
+          ScreenOrientation.lockAsync(settings.defaultVideoOrientation);
+        }
         return;
       }
 
-      // If the user has auto rotate enabled, unlock the orientation
       if (settings.followDeviceOrientation === true) {
         ScreenOrientation.unlockAsync();
       } else {
-        // If the user has auto rotate disabled, lock the orientation to portrait
         ScreenOrientation.lockAsync(
           ScreenOrientation.OrientationLock.PORTRAIT_UP,
         );
       }
-    }, [settings.followDeviceOrientation, segments]);
+    }, [
+      settings.followDeviceOrientation,
+      settings.defaultVideoOrientation,
+      segments,
+    ]);
 
     useEffect(() => {
       const subscription = AppState.addEventListener(
@@ -453,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>
   );
 }

biome.json

@@ -1,16 +1,14 @@
 {
-  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
-  "organizeImports": {
-    "enabled": true
-  },
+  "$schema": "https://biomejs.dev/schemas/2.0.5/schema.json",
   "files": {
-    "ignore": [
-      "node_modules",
-      "ios",
-      "android",
-      "Streamyfin.app",
-      "utils/jellyseerr",
-      ".expo"
+    "includes": [
+      "**/*",
+      "!node_modules/**",
+      "!ios/**",
+      "!android/**",
+      "!Streamyfin.app/**",
+      "!utils/jellyseerr/**",
+      "!.expo/**"
     ]
   },
   "linter": {

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/posters/SeriesPoster.tsx

@@ -53,7 +53,6 @@ const SeriesPoster: React.FC<MoviePosterProps> = ({ item }) => {
           width: "100%",
         }}
       />
-      {<WatchedIndicator item={item} />}
     </View>
   );
 };

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();
@@ -213,209 +213,187 @@ export const HomeIndex = () => {
       queryKey,
       queryFn: async () => {
         if (!api) return [];
-
-        const response = await getItemsApi(api).getItems({
-          userId: user?.Id,
-          limit: 40,
-          recursive: true,
-          includeItemTypes,
-          sortBy: ["DateCreated"],
-          sortOrder: ["Descending"],
-          fields: ["PrimaryImageAspectRatio", "Path"],
-          parentId,
-          enableImageTypes: ["Primary", "Backdrop", "Thumb"],
-        });
-
-        let items = response.data.Items || [];
-
-        if (includeItemTypes.includes("Episode")) {
-          // Removes individual episodes from the list if they are part of a series
-          //    and only keeps the series item
-          // Note: The 'Latest' API endpoint does not work well with combining batch episode imports
-          //    and will either only show the series or the episodes, not both.
-          //    This is a workaround to filter out the episodes from the list
-          const seriesIds = new Set(
-            items.filter((i) => i.Type === "Series").map((i) => i.Id),
-          );
-
-          items = items.filter(
-            (i) =>
-              i.Type === "Series" ||
-              (i.Type === "Episode" && !seriesIds.has(i.SeriesId!)),
-          );
-        }
-
-        if (items.length > 20) {
-          items = items.slice(0, 20);
-        }
-
-        return items;
+        return (
+          (
+            await getUserLibraryApi(api).getLatestMedia({
+              userId: user?.Id,
+              limit: 20,
+              fields: ["PrimaryImageAspectRatio", "Path"],
+              imageTypeLimit: 1,
+              enableImageTypes: ["Primary", "Backdrop", "Thumb"],
+              includeItemTypes,
+              parentId,
+            })
+          ).data || []
+        );
       },
       type: "ScrollingCollectionList",
     }),
     [api, user?.Id],
   );
 
-  let sections: Section[] = [];
-  if (!settings?.home || !settings?.home?.sections) {
-    sections = useMemo(() => {
-      if (!api || !user?.Id) return [];
+  const defaultSections = useMemo(() => {
+    if (!api || !user?.Id) return [];
 
-      const latestMediaViews = collections.map((c) => {
-        const includeItemTypes: BaseItemKind[] =
-          c.CollectionType === "tvshows" ? ["Episode", "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.nextUp?.limit || 25,
-                enableImageTypes: ["Primary", "Backdrop", "Thumb"],
-                enableResumable: section.nextUp?.enableResumable,
-                enableRewatching: section.nextUp?.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],
@@ -522,9 +537,6 @@ export const Controls: FC<Props> = ({
 
   const onClose = async () => {
     lightHapticFeedback();
-    await ScreenOrientation.lockAsync(
-      ScreenOrientation.OrientationLock.PORTRAIT_UP,
-    );
     router.back();
   };
 
@@ -563,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}
@@ -574,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();
@@ -632,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,15 +1,16 @@
-import type { TrackInfo } from "@/modules/VlcPlayer.types";
-import { VideoPlayer, useSettings } from "@/utils/atoms/settings";
+import { SubtitleDeliveryMethod } from "@jellyfin/sdk/lib/generated-client";
 import { router, useLocalSearchParams } from "expo-router";
 import type React from "react";
 import {
-  type ReactNode,
   createContext,
+  type ReactNode,
   useContext,
   useEffect,
   useMemo,
   useState,
 } from "react";
+import type { TrackInfo } from "@/modules/VlcPlayer.types";
+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;
@@ -57,22 +58,27 @@ export const VideoProvider: React.FC<VideoProviderProps> = ({
   const allSubs =
     mediaSource?.MediaStreams?.filter((s) => s.Type === "Subtitle") || [];
 
-  const { itemId, audioIndex, bitrateValue, subtitleIndex } =
+  const { itemId, audioIndex, bitrateValue, subtitleIndex, playbackPosition } =
     useLocalSearchParams<{
       itemId: string;
       audioIndex: string;
       subtitleIndex: string;
       mediaSourceId: string;
       bitrateValue: string;
+      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,
@@ -88,6 +94,7 @@ export const VideoProvider: React.FC<VideoProviderProps> = ({
       subtitleIndex: chosenSubtitleIndex,
       mediaSourceId: mediaSource?.Id ?? "",
       bitrateValue: bitrateValue,
+      playbackPosition: playbackPosition,
     }).toString();
 
     //@ts-ignore
@@ -126,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

@@ -1,9 +1,11 @@
 import { Ionicons } from "@expo/vector-icons";
-import React, { useCallback } from "react";
+import { useCallback } from "react";
 import { Platform, TouchableOpacity } from "react-native";
+
 const DropdownMenu = !Platform.isTV ? require("zeego/dropdown-menu") : null;
-import { BITRATES } from "@/components/BitrateSelector";
+
 import { useLocalSearchParams, useRouter } from "expo-router";
+import { BITRATES } from "@/components/BitrateSelector";
 import { useControlContext } from "../contexts/ControlContext";
 import { useVideoContext } from "../contexts/VideoContext";
 
@@ -17,13 +19,18 @@ const DropdownView = () => {
   ];
   const router = useRouter();
 
-  const { subtitleIndex, audioIndex, bitrateValue } = useLocalSearchParams<{
-    itemId: string;
-    audioIndex: string;
-    subtitleIndex: string;
-    mediaSourceId: string;
-    bitrateValue: string;
-  }>();
+  const { subtitleIndex, audioIndex, bitrateValue, playbackPosition, offline } =
+    useLocalSearchParams<{
+      itemId: string;
+      audioIndex: string;
+      subtitleIndex: string;
+      mediaSourceId: string;
+      bitrateValue: string;
+      playbackPosition: string;
+      offline: string;
+    }>();
+
+  const isOffline = offline === "true";
 
   const changeBitrate = useCallback(
     (bitrate: string) => {
@@ -33,11 +40,12 @@ const DropdownView = () => {
         subtitleIndex: subtitleIndex.toString() ?? "",
         mediaSourceId: mediaSource?.Id ?? "",
         bitrateValue: bitrate.toString(),
+        playbackPosition: playbackPosition,
       }).toString();
       // @ts-expect-error
       router.replace(`player/direct-player?${queryParams}`);
     },
-    [item, mediaSource, subtitleIndex, audioIndex],
+    [item, mediaSource, subtitleIndex, audioIndex, playbackPosition],
   );
 
   return (
@@ -56,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

eas.json

@@ -47,14 +47,14 @@
     },
     "production": {
       "environment": "production",
-      "channel": "0.28.0",
+      "channel": "0.28.1",
       "android": {
         "image": "latest"
       }
     },
     "production-apk": {
       "environment": "production",
-      "channel": "0.28.0",
+      "channel": "0.28.1",
       "android": {
         "buildType": "apk",
         "image": "latest"
@@ -62,7 +62,7 @@
     },
     "production-apk-tv": {
       "environment": "production",
-      "channel": "0.28.0",
+      "channel": "0.28.1",
       "android": {
         "buildType": "apk",
         "image": "latest"

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/useDefaultPlaySettings.ts

@@ -1,10 +1,7 @@
-import { BITRATES, Bitrate } from "@/components/BitrateSelector";
-import type { Settings } from "@/utils/atoms/settings";
-import {
-  type BaseItemDto,
-  MediaSourceInfo,
-} from "@jellyfin/sdk/lib/generated-client";
+import { type BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
 import { useMemo } from "react";
+import { BITRATES } from "@/components/BitrateSelector";
+import type { Settings } from "@/utils/atoms/settings";
 
 // Used only for initial play settings.
 const useDefaultPlaySettings = (
@@ -33,10 +30,10 @@ const useDefaultPlaySettings = (
 
     return {
       defaultAudioIndex:
-        preferedAudioIndex || defaultAudioIndex || firstAudioIndex || undefined,
-      defaultSubtitleIndex: mediaSource?.DefaultSubtitleStreamIndex || -1,
-      defaultMediaSource: mediaSource || undefined,
-      defaultBitrate: bitrate || undefined,
+        preferedAudioIndex ?? defaultAudioIndex ?? firstAudioIndex ?? undefined,
+      defaultSubtitleIndex: mediaSource?.DefaultSubtitleStreamIndex ?? -1,
+      defaultMediaSource: mediaSource ?? undefined,
+      defaultBitrate: bitrate ?? undefined,
     };
   }, [
     item.MediaSources,

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 };
+};

i18n.ts

@@ -1,7 +1,6 @@
+import { getLocales } from "expo-localization";
 import i18n from "i18next";
 import { initReactI18next } from "react-i18next";
-
-import { getLocales } from "expo-localization";
 import de from "./translations/de.json";
 import en from "./translations/en.json";
 import eo from "./translations/eo.json";

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/android/build.gradle

@@ -29,7 +29,7 @@ if (useManagedAndroidSdkVersions) {
       mavenCentral()
     }
     dependencies {
-      classpath "com.android.tools.build:gradle:7.1.3"
+      classpath "com.android.tools.build:gradle:8.11.0"
     }
   }
   project.android {

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",
@@ -35,36 +35,36 @@
     "@tanstack/react-query": "^5.66.0",
     "add": "^2.0.6",
     "axios": "^1.7.9",
-    "expo": "^52.0.31",
-    "expo-asset": "~11.0.3",
-    "expo-background-fetch": "~13.0.5",
+    "expo": "~52.0.47",
+    "expo-asset": "~11.0.5",
+    "expo-background-fetch": "~13.0.6",
     "expo-blur": "~14.0.3",
     "expo-brightness": "~13.0.3",
-    "expo-build-properties": "~0.13.2",
-    "expo-constants": "~17.0.5",
+    "expo-build-properties": "~0.13.3",
+    "expo-constants": "~17.0.8",
     "expo-crypto": "~14.0.2",
-    "expo-dev-client": "~5.0.11",
-    "expo-device": "~7.0.2",
+    "expo-dev-client": "~5.0.20",
+    "expo-device": "~7.0.3",
     "expo-font": "~13.0.3",
     "expo-haptics": "~14.0.1",
-    "expo-image": "~2.0.4",
+    "expo-image": "~2.0.7",
     "expo-keep-awake": "~14.0.2",
     "expo-linear-gradient": "~14.0.2",
     "expo-linking": "~7.0.5",
     "expo-localization": "~16.0.1",
     "expo-network": "~7.0.5",
-    "expo-notifications": "~0.29.13",
-    "expo-router": "~4.0.17",
+    "expo-notifications": "~0.29.14",
+    "expo-router": "~4.0.21",
     "expo-screen-orientation": "~8.0.4",
     "expo-sensors": "~14.0.2",
     "expo-sharing": "~13.0.1",
-    "expo-splash-screen": "~0.29.22",
+    "expo-splash-screen": "~0.29.24",
     "expo-status-bar": "~2.0.1",
-    "expo-system-ui": "~4.0.8",
-    "expo-task-manager": "~12.0.5",
-    "expo-updates": "~0.26.17",
+    "expo-system-ui": "~4.0.9",
+    "expo-task-manager": "~12.0.6",
+    "expo-updates": "~0.27.4",
     "expo-web-browser": "~14.0.2",
-    "i18next": "^24.2.2",
+    "i18next": "^25.0.0",
     "jotai": "^2.11.3",
     "lodash": "^4.17.21",
     "nativewind": "^2.0.11",
@@ -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.22.0",
+    "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": "5.1.0",
-    "react-native-screens": "~4.5.0",
-    "react-native-svg": "15.11.1",
+    "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.13.2",
+    "react-native-webview": "13.13.0",
     "sonner-native": "^0.17.0",
     "tailwindcss": "3.3.2",
     "use-debounce": "^10.0.4",
@@ -112,10 +112,10 @@
   },
   "devDependencies": {
     "@babel/core": "^7.26.8",
-    "@biomejs/biome": "^1.9.4",
-    "@react-native-community/cli": "15.1.3",
+    "@biomejs/biome": "^2.0.0",
+    "@react-native-community/cli": "18.0.0",
     "@react-native-tvos/config-tv": "^0.1.1",
-    "@types/jest": "^29.5.14",
+    "@types/jest": "^30.0.0",
     "@types/lodash": "^4.17.15",
     "@types/react": "~18.3.12",
     "@types/react-native-vector-icons": "^6.4.18",
@@ -123,7 +123,7 @@
     "@types/uuid": "^10.0.0",
     "cross-env": "^7.0.3",
     "husky": "^9.1.7",
-    "lint-staged": "^15.5.0",
+    "lint-staged": "^16.1.2",
     "postinstall-postinstall": "^2.1.0",
     "react-test-renderer": "19.0.0",
     "typescript": "~5.7.3"
@@ -131,11 +131,17 @@
   "private": true,
   "expo": {
     "install": {
-      "exclude": ["react-native"]
+      "exclude": [
+        "react-native"
+      ]
     }
   },
   "lint-staged": {
-    "*.{js,jsx,ts,tsx}": ["biome check --write --unsafe"],
-    "*.{json}": ["biome format --write"]
+    "*.{js,jsx,ts,tsx}": [
+      "biome check --write --unsafe --no-errors-on-unmatched"
+    ],
+    "*.json": [
+      "biome format --write"
+    ]
   }
 }

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

@@ -1,22 +1,16 @@
 import "@/augmentations";
-import { useInterval } from "@/hooks/useInterval";
-import { JellyseerrApi, useJellyseerr } from "@/hooks/useJellyseerr";
-import { useSettings } from "@/utils/atoms/settings";
-import { writeErrorLog, writeInfoLog } from "@/utils/log";
-import { storage } from "@/utils/mmkv";
-import { store } from "@/utils/store";
 import { type Api, Jellyfin } from "@jellyfin/sdk";
 import type { UserDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { getUserApi } from "@jellyfin/sdk/lib/utils/api";
-import { useMutation, useQuery } from "@tanstack/react-query";
+import { useMutation } from "@tanstack/react-query";
 import axios, { AxiosError } from "axios";
 import { router, useSegments } from "expo-router";
 import * as SplashScreen from "expo-splash-screen";
 import { atom, useAtom } from "jotai";
 import type React from "react";
 import {
-  type ReactNode,
   createContext,
+  type ReactNode,
   useCallback,
   useContext,
   useEffect,
@@ -27,6 +21,12 @@ import { useTranslation } from "react-i18next";
 import { Platform } from "react-native";
 import { getDeviceName } from "react-native-device-info";
 import uuid from "react-native-uuid";
+import { useInterval } from "@/hooks/useInterval";
+import { JellyseerrApi, useJellyseerr } from "@/hooks/useJellyseerr";
+import { useSettings } from "@/utils/atoms/settings";
+import { writeErrorLog, writeInfoLog } from "@/utils/log";
+import { storage } from "@/utils/mmkv";
+import { store } from "@/utils/store";
 
 interface Server {
   address: string;
@@ -64,7 +64,7 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
       setJellyfin(
         () =>
           new Jellyfin({
-            clientInfo: { name: "Streamyfin", version: "0.28.0" },
+            clientInfo: { name: "Streamyfin", version: "0.28.1" },
             deviceInfo: {
               name: deviceName,
               id,
@@ -80,9 +80,9 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
   const [isPolling, setIsPolling] = useState<boolean>(false);
   const [secret, setSecret] = useState<string | null>(null);
   const [
-    settings,
-    updateSettings,
-    pluginSettings,
+    _settings,
+    _updateSettings,
+    _pluginSettings,
     setPluginSettings,
     refreshStreamyfinPluginSettings,
   ] = useSettings();
@@ -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.0"`,
+      authorization: `MediaBrowser Client="Streamyfin", Device=${Platform.OS === "android" ? "Android" : "iOS"
+        }, DeviceId="${deviceId}", Version="0.28.1"`,
     };
   }, [deviceId]);
 
@@ -287,8 +286,8 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
     mutationFn: async () => {
       api
         ?.delete(`/Streamyfin/device/${deviceId}`)
-        .then((r) => writeInfoLog("Deleted expo push token for device"))
-        .catch((e) =>
+        .then((_r) => writeInfoLog("Deleted expo push token for device"))
+        .catch((_e) =>
           writeErrorLog("Failed to delete expo push token for device"),
         );
 
@@ -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 = {

renovate.json

@@ -3,7 +3,7 @@
   "description": "Default Renovate preset for Streamyfin repositories",
   "extends": [
     "config:base",
-    ":disableDependencyDashboard",
+    ":dependencyDashboard",
     ":enableVulnerabilityAlertsWithLabel(security)",
     ":semanticCommits",
     ":timezone(Etc/UTC)",

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/filters.ts

@@ -8,7 +8,6 @@ export enum SortByOption {
   CommunityRating = "CommunityRating",
   CriticRating = "CriticRating",
   DateCreated = "DateCreated",
-  DateLastContentAdded = "DateLastContentAdded",
   DatePlayed = "DatePlayed",
   PlayCount = "PlayCount",
   ProductionYear = "ProductionYear",
@@ -38,7 +37,6 @@ export const sortOptions: {
   { key: SortByOption.CommunityRating, value: "Community Rating" },
   { key: SortByOption.CriticRating, value: "Critics Rating" },
   { key: SortByOption.DateCreated, value: "Date Added" },
-  { key: SortByOption.DateLastContentAdded, value: "Date Episode Added" },
   { key: SortByOption.DatePlayed, value: "Date Played" },
   { key: SortByOption.PlayCount, value: "Play Count" },
   { key: SortByOption.ProductionYear, value: "Production Year" },

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: "mp4",
+        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 };
+};