chore: refactor controls

This reverts commit 8389404975.

.github/workflows/build-android.yml

@@ -25,12 +25,12 @@ jobs:
 
     steps:
       - name: 📥 Checkout code
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
         with:
           ref: ${{ github.event.pull_request.head.sha || github.sha }}
-          show-progress: false
-          submodules: recursive
           fetch-depth: 0
+          submodules: recursive
+          show-progress: false
 
       - name: 🍞 Setup Bun
         uses: oven-sh/setup-bun@735343b667d3e6f658f44d0eca948eb6282f2b76 # v2.0.2
@@ -41,22 +41,34 @@ jobs:
         uses: actions/cache@0400d5f644dc74513175e3cd8d07132dd4860809 # v4.2.4
         with:
           path: ~/.bun/install/cache
-          key: ${{ runner.os }}-bun-cache-${{ hashFiles('bun.lock') }}
+          key: ${{ runner.os }}-${{ runner.arch }}-bun-develop-${{ hashFiles('bun.lock') }}
           restore-keys: |
-            ${{ runner.os }}-bun-cache-
+            ${{ runner.os }}-${{ runner.arch }}-bun-develop
+            ${{ runner.os }}-bun-develop
+
+      - name: 💾 Cache node_modules
+        uses: actions/cache@0400d5f644dc74513175e3cd8d07132dd4860809 # v4.2.4
+        with:
+          path: node_modules
+          key: ${{ runner.os }}-${{ runner.arch }}-modules-latest-develop-${{ hashFiles('bun.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-${{ runner.arch }}-modules-latest-develop
+            ${{ runner.os }}-${{ runner.arch }}-modules-develop
+            ${{ runner.os }}-modules-develop
 
       - name: 📦 Install dependencies and reload submodules
         run: |
           bun install --frozen-lockfile
           bun run submodule-reload
 
-      - name: 💾 Cache Android dependencies
+      - name: 💾 Cache Gradle global
         uses: actions/cache@0400d5f644dc74513175e3cd8d07132dd4860809 # v4.2.4
         with:
-          path: android/.gradle
-          key: ${{ runner.os }}-android-deps-${{ hashFiles('android/**/build.gradle', 'android/gradle/wrapper/gradle-wrapper.properties') }}
-          restore-keys: |
-            ${{ runner.os }}-android-deps-
+          path: |
+            ~/.gradle/caches
+            ~/.gradle/wrapper
+          key: ${{ runner.os }}-gradle-develop-${{ hashFiles('android/**/build.gradle', 'android/gradle/wrapper/gradle-wrapper.properties') }}
+          restore-keys: ${{ runner.os }}-gradle-develop
 
       - name: 🛠️ Generate project files
         run: |
@@ -66,6 +78,13 @@ jobs:
             bun run prebuild
           fi
 
+      - name: 💾 Cache project Gradle (.gradle)
+        uses: actions/cache@0400d5f644dc74513175e3cd8d07132dd4860809 # v4.2.4
+        with:
+          path: android/.gradle
+          key: ${{ runner.os }}-android-gradle-develop-${{ hashFiles('android/**/build.gradle', 'android/gradle/wrapper/gradle-wrapper.properties') }}
+          restore-keys: ${{ runner.os }}-android-gradle-develop
+
       - name: 🚀 Build APK
         env:
           EXPO_TV: ${{ matrix.target == 'tv' && 1 || 0 }}
@@ -80,6 +99,4 @@ jobs:
           name: streamyfin-android-${{ matrix.target }}-apk-${{ env.DATE_TAG }}
           path: |
             android/app/build/outputs/apk/release/*.apk
-            android/app/build/outputs/bundle/release/*.aab
           retention-days: 7
-

.github/workflows/build-ios.yml

@@ -26,12 +26,12 @@ jobs:
 
     steps:
       - name: 📥 Checkout code
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
         with:
           ref: ${{ github.event.pull_request.head.sha || github.sha }}
-          show-progress: false
-          submodules: recursive
           fetch-depth: 0
+          submodules: recursive
+          show-progress: false
 
       - name: 🍞 Setup Bun
         uses: oven-sh/setup-bun@735343b667d3e6f658f44d0eca948eb6282f2b76 # v2.0.2
@@ -44,7 +44,7 @@ jobs:
           path: ~/.bun/install/cache
           key: ${{ runner.os }}-bun-cache-${{ hashFiles('bun.lock') }}
           restore-keys: |
-            ${{ runner.os }}-bun-cache-
+            ${{ runner.os }}-bun-cache
 
       - name: 📦 Install dependencies and reload submodules
         run: |
@@ -59,13 +59,21 @@ jobs:
             bun run prebuild
           fi
 
-      - name: 🏗 Setup EAS
+      - name: 🏗️ Setup EAS
         uses: expo/expo-github-action@main
         with:
-          eas-version: 16.17.4
+          eas-version: latest
           token: ${{ secrets.EXPO_TOKEN }}
 
-      - name: 🏗️ Build iOS app
+      - name: ⚙️ Ensure iOS/tvOS SDKs installed
+        run: |
+          if [ "${{ matrix.target }}" = "tv" ]; then
+            xcodebuild -downloadPlatform tvOS
+          else
+            xcodebuild -downloadPlatform iOS
+          fi
+
+      - name: 🚀 Build iOS app
         env:
           EXPO_TV: ${{ matrix.target == 'tv' && 1 || 0 }}
         run: eas build -p ios --local --non-interactive
@@ -79,4 +87,3 @@ jobs:
           name: streamyfin-ios-${{ matrix.target }}-ipa-${{ env.DATE_TAG }}
           path: build-*.ipa
           retention-days: 7
-

.github/workflows/check-lockfile.yml

@@ -19,7 +19,7 @@ jobs:
 
     steps:
       - name: 📥 Checkout repository
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
         with:
           ref: ${{ github.event.pull_request.head.sha || github.sha }}
           show-progress: false

.github/workflows/ci-codeql.yml

@@ -20,24 +20,24 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        language: [ 'javascript-typescript' ]
+        language: [ 'javascript-typescript', 'actions' ]
 
     steps:
       - name: 📥 Checkout repository
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
         with:
           ref: ${{ github.event.pull_request.head.sha || github.sha }}
           show-progress: false
           fetch-depth: 0
 
       - name: 🏁 Initialize CodeQL
-        uses: github/codeql-action/init@76621b61decf072c1cee8dd1ce2d2a82d33c17ed # v3.29.8
+        uses: github/codeql-action/init@96f518a34f7a870018057716cc4d7a5c014bd61c # v3.29.10
         with:
           languages: ${{ matrix.language }}
           queries: +security-extended,security-and-quality
 
       - name: 🛠️ Autobuild
-        uses: github/codeql-action/autobuild@76621b61decf072c1cee8dd1ce2d2a82d33c17ed # v3.29.8
+        uses: github/codeql-action/autobuild@96f518a34f7a870018057716cc4d7a5c014bd61c # v3.29.10
 
       - name: 🧪 Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@76621b61decf072c1cee8dd1ce2d2a82d33c17ed # v3.29.8
+        uses: github/codeql-action/analyze@96f518a34f7a870018057716cc4d7a5c014bd61c # v3.29.10

.github/workflows/linting.yml

@@ -20,7 +20,7 @@ jobs:
       pull-requests: write
       contents: read
     steps:
-      - uses: amannn/action-semantic-pull-request@0723387faaf9b38adef4775cd42cfd5155ed6017 # v5.5.3
+      - uses: amannn/action-semantic-pull-request@7f33ba792281b034f64e96f4c0b5496782dd3b37 # v6.1.0
         id: lint_pr_title
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
@@ -51,13 +51,13 @@ jobs:
       contents: read
     steps:
       - name: Checkout Repository
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
         with:
           ref: ${{ github.event.pull_request.head.sha }}
           fetch-depth: 0
 
       - name: Dependency Review
-        uses: actions/dependency-review-action@da24556b548a50705dd671f47852072ea4c105d9 # v4.7.1
+        uses: actions/dependency-review-action@bc41886e18ea39df68b1b1245f4184881938e050 # v4.7.2
         with:
           fail-on-severity: high
           deny-licenses: GPL-3.0, AGPL-3.0
@@ -69,7 +69,7 @@ jobs:
     runs-on: ubuntu-24.04
     steps:
       - name: 🛒 Checkout repository
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
         with:
           ref: ${{ github.event.pull_request.head.sha }}
           submodules: recursive
@@ -98,7 +98,7 @@ jobs:
           - "format"
     steps:
       - name: "📥 Checkout PR code"
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
         with:
           ref: ${{ github.event.pull_request.head.sha }}
           submodules: recursive
@@ -107,7 +107,7 @@ jobs:
       - name: "🟢 Setup Node.js"
         uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
         with:
-          node-version: '22.x'
+          node-version: '24.x'
 
       - name: "🍞 Setup Bun"
         uses: oven-sh/setup-bun@735343b667d3e6f658f44d0eca948eb6282f2b76 # v2.0.2

README.md

@@ -120,7 +120,7 @@ Key points of the MPL-2.0:
 
 ## 🌐 Connect with Us
 
-Join our Discord: [https://discord.gg/aJvAYeycyY](https://discord.gg/aJvAYeycyY)
+Join our Discord: [![](https://dcbadge.limes.pink/api/server/https://discord.gg/BuGG9ZNhaE)](https://discord.gg/BuGG9ZNhaE)
 
 Need support or have questions:
 
@@ -181,6 +181,12 @@ Thanks to the following contributors for their significant contributions:
         <br /><sub><b>@topiga</b></sub>
       </a>
     </td>
+    <td align="center">
+      <a href="https://github.com/lancechant">
+        <img src="https://github.com/lancechant.png?size=55" width="55" style="border-radius: 50%;" />
+        <br /><sub><b>@lancechant</b></sub>
+      </a>
+    </td>
   </tr>
   <tr>
     <td align="center">
@@ -213,6 +219,12 @@ Thanks to the following contributors for their significant contributions:
         <br /><sub><b>@whoopsi-daisy</b></sub>
       </a>
     </td>
+    <td align="center">
+      <a href="https://github.com/Gauvino">
+        <img src="https://github.com/Gauvino.png?size=55" width="55" style="border-radius: 50%;" />
+        <br /><sub><b>@Gauvino</b></sub>
+      </a>
+    </td>
   </tr>
 </table>
 </div>

app.json

@@ -2,7 +2,7 @@
   "expo": {
     "name": "Streamyfin",
     "slug": "streamyfin",
-    "version": "0.29.13",
+    "version": "0.32.1",
     "orientation": "default",
     "icon": "./assets/images/icon.png",
     "scheme": "streamyfin",
@@ -37,7 +37,7 @@
     },
     "android": {
       "jsEngine": "hermes",
-      "versionCode": 57,
+      "versionCode": 62,
       "adaptiveIcon": {
         "foregroundImage": "./assets/images/icon-android-plain.png",
         "monochromeImage": "./assets/images/icon-android-themed.png",

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

@@ -66,12 +66,6 @@ export default function IndexLayout() {
           title: t("home.settings.settings_title"),
         }}
       />
-      <Stack.Screen
-        name='settings/optimized-server/page'
-        options={{
-          title: "",
-        }}
-      />
       <Stack.Screen
         name='settings/marlin-search/page'
         options={{

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

@@ -23,12 +23,12 @@ export default function page() {
   const [seasonIndexState, setSeasonIndexState] = useState<SeasonIndexState>(
     {},
   );
-  const { downloadedFiles, deleteItems } = useDownload();
+  const { getDownloadedItems, deleteItems } = useDownload();
 
   const series = useMemo(() => {
     try {
       return (
-        downloadedFiles
+        getDownloadedItems()
           ?.filter((f) => f.item.SeriesId === seriesId)
           ?.sort(
             (a, b) => a?.item.ParentIndexNumber! - b.item.ParentIndexNumber!,
@@ -37,7 +37,37 @@ export default function page() {
     } catch {
       return [];
     }
-  }, [downloadedFiles]);
+  }, [getDownloadedItems]);
+
+  // Group episodes by season in a single pass
+  const seasonGroups = useMemo(() => {
+    const groups: Record<number, BaseItemDto[]> = {};
+
+    series.forEach((episode) => {
+      const seasonNumber = episode.item.ParentIndexNumber;
+      if (seasonNumber !== undefined && seasonNumber !== null) {
+        if (!groups[seasonNumber]) {
+          groups[seasonNumber] = [];
+        }
+        groups[seasonNumber].push(episode.item);
+      }
+    });
+
+    // Sort episodes within each season
+    Object.values(groups).forEach((episodes) => {
+      episodes.sort((a, b) => (a.IndexNumber || 0) - (b.IndexNumber || 0));
+    });
+
+    return groups;
+  }, [series]);
+
+  // Get unique seasons (just the season numbers, sorted)
+  const uniqueSeasons = useMemo(() => {
+    const seasonNumbers = Object.keys(seasonGroups)
+      .map(Number)
+      .sort((a, b) => a - b);
+    return seasonNumbers.map((seasonNum) => seasonGroups[seasonNum][0]); // First episode of each season
+  }, [seasonGroups]);
 
   const seasonIndex =
     seasonIndexState[series?.[0]?.item?.ParentId ?? ""] ||
@@ -45,20 +75,8 @@ export default function page() {
     "";
 
   const groupBySeason = useMemo<BaseItemDto[]>(() => {
-    const seasons: Record<string, BaseItemDto[]> = {};
-
-    series?.forEach((episode) => {
-      if (!seasons[episode.item.ParentIndexNumber!]) {
-        seasons[episode.item.ParentIndexNumber!] = [];
-      }
-
-      seasons[episode.item.ParentIndexNumber!].push(episode.item);
-    });
-    return (
-      seasons[seasonIndex]?.sort((a, b) => a.IndexNumber! - b.IndexNumber!) ??
-      []
-    );
-  }, [series, seasonIndex]);
+    return seasonGroups[Number(seasonIndex)] ?? [];
+  }, [seasonGroups, seasonIndex]);
 
   const initialSeasonIndex = useMemo(
     () =>
@@ -102,7 +120,7 @@ export default function page() {
         <View className='flex flex-row items-center justify-start my-2 px-4'>
           <SeasonDropdown
             item={series[0].item}
-            seasons={series.map((s) => s.item)}
+            seasons={uniqueSeasons}
             state={seasonIndexState}
             initialSeasonIndex={initialSeasonIndex!}
             onSelect={(season) => {

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

@@ -10,33 +10,34 @@ import { useAtom } from "jotai";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Alert, ScrollView, TouchableOpacity, View } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { toast } from "sonner-native";
 import { Button } from "@/components/Button";
 import { Text } from "@/components/common/Text";
+import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
 import { ActiveDownloads } from "@/components/downloads/ActiveDownloads";
 import { DownloadSize } from "@/components/downloads/DownloadSize";
 import { MovieCard } from "@/components/downloads/MovieCard";
 import { SeriesCard } from "@/components/downloads/SeriesCard";
-import { type DownloadedItem, useDownload } from "@/providers/DownloadProvider";
+import { useDownload } from "@/providers/DownloadProvider";
+import { type DownloadedItem } from "@/providers/Downloads/types";
 import { queueAtom } from "@/utils/atoms/queue";
-import { DownloadMethod, useSettings } from "@/utils/atoms/settings";
 import { writeToLog } from "@/utils/log";
 
 export default function page() {
   const navigation = useNavigation();
   const { t } = useTranslation();
   const [queue, setQueue] = useAtom(queueAtom);
-  const { removeProcess, downloadedFiles, deleteFileByType, deleteAllFiles } =
-    useDownload();
+  const {
+    removeProcess,
+    getDownloadedItems,
+    deleteFileByType,
+    deleteAllFiles,
+  } = useDownload();
   const router = useRouter();
-  const [settings] = useSettings();
   const bottomSheetModalRef = useRef<BottomSheetModal>(null);
 
   const [showMigration, setShowMigration] = useState(false);
 
-  const insets = useSafeAreaInsets();
-
   const migration_20241124 = () => {
     Alert.alert(
       t("home.downloads.new_app_version_requires_re_download"),
@@ -44,7 +45,10 @@ export default function page() {
       [
         {
           text: t("home.downloads.back"),
-          onPress: () => setShowMigration(false) || router.back(),
+          onPress: () => {
+            setShowMigration(false);
+            router.back();
+          },
         },
         {
           text: t("home.downloads.delete"),
@@ -58,6 +62,8 @@ export default function page() {
     );
   };
 
+  const downloadedFiles = getDownloadedItems();
+
   const movies = useMemo(() => {
     try {
       return downloadedFiles?.filter((f) => f.item.Type === "Movie") || [];
@@ -127,16 +133,10 @@ export default function page() {
 
   return (
     <>
-      <ScrollView
-        contentContainerStyle={{
-          paddingLeft: insets.left,
-          paddingRight: insets.right,
-          paddingBottom: 100,
-        }}
-      >
-        <View className='py-4'>
-          <View className='mb-4 flex flex-col space-y-4 px-4'>
-            {settings?.downloadMethod === DownloadMethod.Remux && (
+      <View style={{ flex: 1 }}>
+        <ScrollView showsVerticalScrollIndicator={false} className='flex-1'>
+          <View className='py-4'>
+            <View className='mb-4 flex flex-col space-y-4 px-4'>
               <View className='bg-neutral-900 p-4 rounded-2xl'>
                 <Text className='text-lg font-bold'>
                   {t("home.downloads.queue")}
@@ -180,70 +180,74 @@ export default function page() {
                   </Text>
                 )}
               </View>
-            )}
 
-            <ActiveDownloads />
-          </View>
-
-          {movies.length > 0 && (
-            <View className='mb-4'>
-              <View className='flex flex-row items-center justify-between mb-2 px-4'>
-                <Text className='text-lg font-bold'>
-                  {t("home.downloads.movies")}
-                </Text>
-                <View className='bg-purple-600 rounded-full h-6 w-6 flex items-center justify-center'>
-                  <Text className='text-xs font-bold'>{movies?.length}</Text>
-                </View>
-              </View>
-              <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-                <View className='px-4 flex flex-row'>
-                  {movies?.map((item) => (
-                    <View className='mb-2 last:mb-0' key={item.item.Id}>
-                      <MovieCard item={item.item} />
-                    </View>
-                  ))}
-                </View>
-              </ScrollView>
+              <ActiveDownloads />
             </View>
-          )}
-          {groupedBySeries.length > 0 && (
-            <View className='mb-4'>
-              <View className='flex flex-row items-center justify-between mb-2 px-4'>
-                <Text className='text-lg font-bold'>
-                  {t("home.downloads.tvseries")}
-                </Text>
-                <View className='bg-purple-600 rounded-full h-6 w-6 flex items-center justify-center'>
-                  <Text className='text-xs font-bold'>
-                    {groupedBySeries?.length}
+
+            {movies.length > 0 && (
+              <View className='mb-4'>
+                <View className='flex flex-row items-center justify-between mb-2 px-4'>
+                  <Text className='text-lg font-bold'>
+                    {t("home.downloads.movies")}
                   </Text>
+                  <View className='bg-purple-600 rounded-full h-6 w-6 flex items-center justify-center'>
+                    <Text className='text-xs font-bold'>{movies?.length}</Text>
+                  </View>
                 </View>
+                <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+                  <View className='px-4 flex flex-row'>
+                    {movies?.map((item) => (
+                      <TouchableItemRouter
+                        item={item.item}
+                        isOffline
+                        key={item.item.Id}
+                      >
+                        <MovieCard item={item.item} />
+                      </TouchableItemRouter>
+                    ))}
+                  </View>
+                </ScrollView>
               </View>
-              <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-                <View className='px-4 flex flex-row'>
-                  {groupedBySeries?.map((items) => (
-                    <View
-                      className='mb-2 last:mb-0'
-                      key={items[0].item.SeriesId}
-                    >
-                      <SeriesCard
-                        items={items.map((i) => i.item)}
-                        key={items[0].item.SeriesId}
-                      />
-                    </View>
-                  ))}
+            )}
+            {groupedBySeries.length > 0 && (
+              <View className='mb-4'>
+                <View className='flex flex-row items-center justify-between mb-2 px-4'>
+                  <Text className='text-lg font-bold'>
+                    {t("home.downloads.tvseries")}
+                  </Text>
+                  <View className='bg-purple-600 rounded-full h-6 w-6 flex items-center justify-center'>
+                    <Text className='text-xs font-bold'>
+                      {groupedBySeries?.length}
+                    </Text>
+                  </View>
                 </View>
-              </ScrollView>
-            </View>
-          )}
-          {downloadedFiles?.length === 0 && (
-            <View className='flex px-4'>
-              <Text className='opacity-50'>
-                {t("home.downloads.no_downloaded_items")}
-              </Text>
-            </View>
-          )}
-        </View>
-      </ScrollView>
+                <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+                  <View className='px-4 flex flex-row'>
+                    {groupedBySeries?.map((items) => (
+                      <View
+                        className='mb-2 last:mb-0'
+                        key={items[0].item.SeriesId}
+                      >
+                        <SeriesCard
+                          items={items.map((i) => i.item)}
+                          key={items[0].item.SeriesId}
+                        />
+                      </View>
+                    ))}
+                  </View>
+                </ScrollView>
+              </View>
+            )}
+            {downloadedFiles?.length === 0 && (
+              <View className='flex px-4'>
+                <Text className='opacity-50'>
+                  {t("home.downloads.no_downloaded_items")}
+                </Text>
+              </View>
+            )}
+          </View>
+        </ScrollView>
+      </View>
       <BottomSheetModal
         ref={bottomSheetModalRef}
         enableDynamicSizing

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

@@ -2,7 +2,7 @@ import { useNavigation, useRouter } from "expo-router";
 import { t } from "i18next";
 import { useAtom } from "jotai";
 import { useEffect } from "react";
-import { ScrollView, TouchableOpacity, View } from "react-native";
+import { Platform, ScrollView, TouchableOpacity, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Text } from "@/components/common/Text";
 import { ListGroup } from "@/components/list/ListGroup";
@@ -73,13 +73,13 @@ export default function settings() {
 
         <OtherSettings />
 
-        <DownloadSettings />
+        {!Platform.isTV && <DownloadSettings />}
 
         <PluginSettings />
 
         <AppLanguageSelector />
 
-        <ChromecastSettings />
+        {!Platform.isTV && <ChromecastSettings />}
 
         <ListGroup title={"Intro"}>
           <ListItem
@@ -112,7 +112,7 @@ export default function settings() {
           </ListGroup>
         </View>
 
-        <StorageSettings />
+        {!Platform.isTV && <StorageSettings />}
       </View>
     </ScrollView>
   );

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

@@ -1,7 +1,7 @@
 import * as FileSystem from "expo-file-system";
 import { useNavigation } from "expo-router";
 import * as Sharing from "expo-sharing";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useId, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { ScrollView, TouchableOpacity, View } from "react-native";
 import Collapsible from "react-native-collapsible";
@@ -10,11 +10,14 @@ import { FilterButton } from "@/components/filters/FilterButton";
 import { Loader } from "@/components/Loader";
 import { LogLevel, useLog, writeErrorLog } from "@/utils/log";
 
-export default function page() {
+export default function Page() {
   const navigation = useNavigation();
   const { logs } = useLog();
   const { t } = useTranslation();
 
+  const orderFilterId = useId();
+  const levelsFilterId = useId();
+
   const defaultLevels: LogLevel[] = ["INFO", "ERROR", "DEBUG", "WARN"];
   const codeBlockStyle = {
     backgroundColor: "#000",
@@ -25,10 +28,12 @@ export default function page() {
 
   const [loading, setLoading] = useState<boolean>(false);
   const [state, setState] = useState<Record<string, boolean>>({});
-
   const [order, setOrder] = useState<"asc" | "desc">("desc");
   const [levels, setLevels] = useState<LogLevel[]>(defaultLevels);
 
+  const _orderId = useId();
+  const _levelsId = useId();
+
   const filteredLogs = useMemo(
     () =>
       logs
@@ -73,7 +78,7 @@ export default function page() {
     <>
       <View className='flex flex-row justify-end py-2 px-4 space-x-2'>
         <FilterButton
-          id='order'
+          id={orderFilterId}
           queryKey='log'
           queryFn={async () => ["asc", "desc"]}
           set={(values) => setOrder(values[0])}
@@ -83,7 +88,7 @@ export default function page() {
           showSearch={false}
         />
         <FilterButton
-          id='levels'
+          id={levelsFilterId}
           queryKey='log'
           queryFn={async () => defaultLevels}
           set={setLevels}

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

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

app/(auth)/(tabs)/(home,libraries,search,favorites)/collections/[collectionId].tsx

@@ -112,7 +112,7 @@ const page: React.FC = () => {
         recursive: true,
         genres: selectedGenres,
         tags: selectedTags,
-        years: selectedYears.map((year) => Number.parseInt(year)),
+        years: selectedYears.map((year) => Number.parseInt(year, 10)),
         includeItemTypes: ["Movie", "Series"],
       });
 

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

@@ -1,7 +1,4 @@
-import { getUserLibraryApi } from "@jellyfin/sdk/lib/utils/api";
-import { useQuery } from "@tanstack/react-query";
 import { useLocalSearchParams } from "expo-router";
-import { useAtom } from "jotai";
 import type React from "react";
 import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
@@ -14,30 +11,16 @@ import Animated, {
 } from "react-native-reanimated";
 import { Text } from "@/components/common/Text";
 import { ItemContent } from "@/components/ItemContent";
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { useItemQuery } from "@/hooks/useItemQuery";
 
 const Page: React.FC = () => {
-  const [api] = useAtom(apiAtom);
-  const [user] = useAtom(userAtom);
   const { id } = useLocalSearchParams() as { id: string };
   const { t } = useTranslation();
 
-  const { data: item, isError } = useQuery({
-    queryKey: ["item", id],
-    queryFn: async () => {
-      if (!api || !user || !id) return;
-      const res = await getUserLibraryApi(api).getItem({
-        itemId: id,
-        userId: user?.Id,
-      });
+  const { offline } = useLocalSearchParams() as { offline?: string };
+  const isOffline = offline === "true";
 
-      return res.data;
-    },
-    staleTime: 0,
-    refetchOnMount: true,
-    refetchOnWindowFocus: true,
-    refetchOnReconnect: true,
-  });
+  const { data: item, isError } = useItemQuery(id, isOffline);
 
   const opacity = useSharedValue(1);
   const animatedStyle = useAnimatedStyle(() => {
@@ -107,7 +90,7 @@ const Page: React.FC = () => {
         <View className='h-12 bg-neutral-900 rounded-lg w-full mb-2' />
         <View className='h-24 bg-neutral-900 rounded-lg mb-1 w-full' />
       </Animated.View>
-      {item && <ItemContent item={item} />}
+      {item && <ItemContent item={item} isOffline={isOffline} />}
     </View>
   );
 };

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

@@ -69,10 +69,18 @@ const page: React.FC = () => {
         seriesId: item?.Id!,
         userId: user?.Id!,
         enableUserData: true,
-        fields: ["MediaSources", "MediaStreams", "Overview"],
+        // Note: Including trick play is necessary to enable trick play downloads
+        fields: ["MediaSources", "MediaStreams", "Overview", "Trickplay"],
       });
       return res?.data.Items || [];
     },
+    select: (data) =>
+      // This needs to be sorted by parent index number and then index number, that way we can download the episodes in the correct order.
+      [...(data || [])].sort(
+        (a, b) =>
+          (a.ParentIndexNumber ?? 0) - (b.ParentIndexNumber ?? 0) ||
+          (a.IndexNumber ?? 0) - (b.IndexNumber ?? 0),
+      ),
     staleTime: 60,
     enabled: !!api && !!user?.Id && !!item?.Id,
   });
@@ -136,7 +144,7 @@ const page: React.FC = () => {
               resizeMode: "contain",
             }}
           />
-        ) : null
+        ) : undefined
       }
     >
       <View className='flex flex-col pt-4'>

app/(auth)/(tabs)/(libraries)/[libraryId].tsx

@@ -168,7 +168,7 @@ const Page = () => {
         fields: ["PrimaryImageAspectRatio", "SortName"],
         genres: selectedGenres,
         tags: selectedTags,
-        years: selectedYears.map((year) => Number.parseInt(year)),
+        years: selectedYears.map((year) => Number.parseInt(year, 10)),
         includeItemTypes: itemType ? [itemType] : undefined,
       });
 

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

@@ -10,6 +10,7 @@ import { useAtom } from "jotai";
 import {
   useCallback,
   useEffect,
+  useId,
   useLayoutEffect,
   useMemo,
   useRef,
@@ -58,6 +59,9 @@ export default function search() {
 
   const { t } = useTranslation();
 
+  const searchFilterId = useId();
+  const orderFilterId = useId();
+
   const { q } = params as { q: string };
 
   const [searchType, setSearchType] = useState<SearchType>("Library");
@@ -313,7 +317,7 @@ export default function search() {
               debouncedSearch.length > 0 && (
                 <View className='flex flex-row justify-end items-center space-x-1'>
                   <FilterButton
-                    id='search'
+                    id={searchFilterId}
                     queryKey='jellyseerr_search'
                     queryFn={async () =>
                       Object.keys(JellyseerrSearchSort).filter((v) =>
@@ -329,7 +333,7 @@ export default function search() {
                     showSearch={false}
                   />
                   <FilterButton
-                    id='order'
+                    id={orderFilterId}
                     queryKey='jellysearr_search'
                     queryFn={async () => ["asc", "desc"]}
                     set={(value) => setJellyseerrSortOrder(value[0])}

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

@@ -2,7 +2,6 @@ import {
   type BaseItemDto,
   type MediaSourceInfo,
   PlaybackOrder,
-  type PlaybackProgressInfo,
   PlaybackStartInfo,
   RepeatMode,
 } from "@jellyfin/sdk/lib/generated-client";
@@ -16,14 +15,14 @@ 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 { useAnimatedReaction, useSharedValue } from "react-native-reanimated";
+
 import { BITRATES } from "@/components/BitrateSelector";
 import { Text } from "@/components/common/Text";
 import { Loader } from "@/components/Loader";
 import { Controls } from "@/components/video-player/controls/Controls";
-import { getDownloadedFileUrl } from "@/hooks/useDownloadedFileOpener";
 import { useHaptic } from "@/hooks/useHaptic";
+import { usePlaybackManager } from "@/hooks/usePlaybackManager";
 import { useInvalidatePlaybackProgressCache } from "@/hooks/useRevalidatePlaybackProgressCache";
 import { useWebSocket } from "@/hooks/useWebsockets";
 import { VlcPlayerView } from "@/modules";
@@ -33,20 +32,15 @@ import type {
   ProgressUpdatePayload,
   VlcPlayerViewRef,
 } from "@/modules/VlcPlayer.types";
+import { useDownload } from "@/providers/DownloadProvider";
+import { DownloadedItem } from "@/providers/Downloads/types";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
 import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
 import { writeToLog } from "@/utils/log";
-import { storage } from "@/utils/mmkv";
-import generateDeviceProfile from "@/utils/profiles/native";
+import { generateDeviceProfile } from "@/utils/profiles/native";
 import { msToTicks, ticksToSeconds } from "@/utils/time";
 
-const downloadProvider = !Platform.isTV
-  ? require("@/providers/DownloadProvider")
-  : { useDownload: () => null };
-
-const IGNORE_SAFE_AREAS_KEY = "video_player_ignore_safe_areas";
-
 export default function page() {
   const videoRef = useRef<VlcPlayerViewRef>(null);
   const user = useAtomValue(userAtom);
@@ -56,11 +50,12 @@ export default function page() {
 
   const [isPlaybackStopped, setIsPlaybackStopped] = useState(false);
   const [showControls, _setShowControls] = useState(true);
-  const [ignoreSafeAreas, setIgnoreSafeAreas] = useState(() => {
-    // Load persisted state from storage
-    const saved = storage.getBoolean(IGNORE_SAFE_AREAS_KEY);
-    return saved ?? false;
-  });
+  const [aspectRatio, setAspectRatio] = useState<
+    "default" | "16:9" | "4:3" | "1:1" | "21:9"
+  >("default");
+  const [scaleFactor, setScaleFactor] = useState<
+    1.0 | 1.1 | 1.2 | 1.3 | 1.4 | 1.5 | 1.6 | 1.7 | 1.8 | 1.9 | 2.0
+  >(1.0);
   const [isPlaying, setIsPlaying] = useState(false);
   const [isMuted, setIsMuted] = useState(false);
   const [isBuffering, setIsBuffering] = useState(true);
@@ -74,7 +69,7 @@ export default function page() {
     ? null
     : require("react-native-volume-manager");
 
-  const getDownloadedItem = downloadProvider.useDownload();
+  const downloadUtils = useDownload();
 
   const revalidateProgressCache = useInvalidatePlaybackProgressCache();
 
@@ -85,11 +80,6 @@ export default function page() {
     lightHapticFeedback();
   }, []);
 
-  // Persist ignoreSafeAreas state whenever it changes
-  useEffect(() => {
-    storage.set(IGNORE_SAFE_AREAS_KEY, ignoreSafeAreas);
-  }, [ignoreSafeAreas]);
-
   const {
     itemId,
     audioIndex: audioIndexStr,
@@ -108,9 +98,10 @@ export default function page() {
     /** Playback position in ticks. */
     playbackPosition?: string;
   }>();
-  const [settings] = useSettings();
-  const insets = useSafeAreaInsets();
+  const [_settings] = useSettings();
+
   const offline = offlineStr === "true";
+  const playbackManager = usePlaybackManager();
 
   const audioIndex = audioIndexStr
     ? Number.parseInt(audioIndexStr, 10)
@@ -123,18 +114,21 @@ export default function page() {
     : BITRATES[0].value;
 
   const [item, setItem] = useState<BaseItemDto | null>(null);
+  const [downloadedItem, setDownloadedItem] = useState<DownloadedItem | null>(
+    null,
+  );
   const [itemStatus, setItemStatus] = useState({
     isLoading: true,
     isError: false,
   });
 
-  /** Gets the initial playback position from the URL or the item's user data. */
+  /** Gets the initial playback position from the URL. */
   const getInitialPlaybackTicks = useCallback((): number => {
     if (playbackPositionFromUrl) {
       return Number.parseInt(playbackPositionFromUrl, 10);
     }
     return item?.UserData?.PlaybackPositionTicks ?? 0;
-  }, [playbackPositionFromUrl, item]);
+  }, [playbackPositionFromUrl]);
 
   useEffect(() => {
     const fetchItemData = async () => {
@@ -142,8 +136,11 @@ export default function page() {
       try {
         let fetchedItem: BaseItemDto | null = null;
         if (offline && !Platform.isTV) {
-          const data = await getDownloadedItem.getDownloadedItem(itemId);
-          if (data) fetchedItem = data.item as BaseItemDto;
+          const data = downloadUtils.getDownloadedItemById(itemId);
+          if (data) {
+            fetchedItem = data.item as BaseItemDto;
+            setDownloadedItem(data);
+          }
         } else {
           const res = await getUserLibraryApi(api!).getItem({
             itemId,
@@ -179,18 +176,20 @@ export default function page() {
   useEffect(() => {
     const fetchStreamData = async () => {
       setStreamStatus({ isLoading: true, isError: false });
-      const native = await generateDeviceProfile();
       try {
         let result: Stream | null = null;
-        if (offline && !Platform.isTV) {
-          const data = await getDownloadedItem.getDownloadedItem(itemId);
-          if (!data?.mediaSource) return;
-          const url = await getDownloadedFileUrl(data.item.Id!);
+        if (offline && downloadedItem && downloadedItem.mediaSource) {
+          const url = downloadedItem.videoFilePath;
           if (item) {
-            result = { mediaSource: data.mediaSource, sessionId: "", url };
+            result = {
+              mediaSource: downloadedItem.mediaSource,
+              sessionId: "",
+              url: url,
+            };
           }
         } else {
-          if (!item) return;
+          const native = generateDeviceProfile();
+          const transcoding = generateDeviceProfile({ transcode: true });
           const res = await getStreamUrl({
             api,
             item,
@@ -200,7 +199,7 @@ export default function page() {
             maxStreamingBitrate: bitrateValue,
             mediaSourceId: mediaSourceId,
             subtitleStreamIndex: subtitleIndex,
-            deviceProfile: native,
+            deviceProfile: bitrateValue ? transcoding : native,
           });
           if (!res) return;
           const { mediaSource, sessionId, url } = res;
@@ -221,26 +220,39 @@ export default function page() {
       }
     };
     fetchStreamData();
-  }, [itemId, mediaSourceId, bitrateValue, api, item, user?.Id]);
+  }, [
+    itemId,
+    mediaSourceId,
+    bitrateValue,
+    api,
+    item,
+    user?.Id,
+    downloadedItem,
+  ]);
 
   useEffect(() => {
-    if (!stream) return;
-
+    if (!stream || !api) return;
     const reportPlaybackStart = async () => {
-      await getPlaystateApi(api!).reportPlaybackStart({
+      await getPlaystateApi(api).reportPlaybackStart({
         playbackStartInfo: currentPlayStateInfo() as PlaybackStartInfo,
       });
     };
-
     reportPlaybackStart();
-  }, [stream]);
+  }, [stream, api]);
 
   const togglePlay = async () => {
     lightHapticFeedback();
     setIsPlaying(!isPlaying);
     if (isPlaying) {
       await videoRef.current?.pause();
-      reportPlaybackProgress();
+      playbackManager.reportPlaybackProgress(
+        item?.Id!,
+        msToTicks(progress.get()),
+        {
+          AudioStreamIndex: audioIndex ?? -1,
+          SubtitleStreamIndex: subtitleIndex ?? -1,
+        },
+      );
     } else {
       videoRef.current?.play();
       await getPlaystateApi(api!).reportPlaybackStart({
@@ -250,7 +262,6 @@ export default function page() {
   };
 
   const reportPlaybackStopped = useCallback(async () => {
-    if (offline) return;
     const currentTimeInTicks = msToTicks(progress.get());
     await getPlaystateApi(api!).onPlaybackStopped({
       itemId: item?.Id!,
@@ -258,8 +269,6 @@ export default function page() {
       positionTicks: currentTimeInTicks,
       playSessionId: stream?.sessionId!,
     });
-
-    revalidateProgressCache();
   }, [
     api,
     item,
@@ -271,10 +280,15 @@ export default function page() {
   ]);
 
   const stop = useCallback(() => {
+    // Update URL with final playback position before stopping
+    router.setParams({
+      playbackPosition: msToTicks(progress.get()).toString(),
+    });
     reportPlaybackStopped();
     setIsPlaybackStopped(true);
     videoRef.current?.stop();
-  }, [videoRef, reportPlaybackStopped]);
+    revalidateProgressCache();
+  }, [videoRef, reportPlaybackStopped, progress]);
 
   useEffect(() => {
     const beforeRemoveListener = navigation.addListener("beforeRemove", stop);
@@ -283,7 +297,7 @@ export default function page() {
     };
   }, [navigation, stop]);
 
-  const currentPlayStateInfo = () => {
+  const currentPlayStateInfo = useCallback(() => {
     if (!stream) return;
     return {
       itemId: item?.Id!,
@@ -299,7 +313,32 @@ export default function page() {
       repeatMode: RepeatMode.RepeatNone,
       playbackOrder: PlaybackOrder.Default,
     };
-  };
+  }, [
+    stream,
+    item?.Id,
+    audioIndex,
+    subtitleIndex,
+    mediaSourceId,
+    progress,
+    isPlaying,
+    isMuted,
+  ]);
+
+  const lastUrlUpdateTime = useSharedValue(0);
+  const wasJustSeeking = useSharedValue(false);
+  const URL_UPDATE_INTERVAL = 30000; // Update URL every 30 seconds instead of every second
+
+  // Track when seeking ends to update URL immediately
+  useAnimatedReaction(
+    () => isSeeking.get(),
+    (currentSeeking, previousSeeking) => {
+      if (previousSeeking && !currentSeeking) {
+        // Seeking just ended
+        wasJustSeeking.value = true;
+      }
+    },
+    [],
+  );
 
   const onProgress = useCallback(
     async (data: ProgressUpdatePayload) => {
@@ -312,15 +351,31 @@ export default function page() {
 
       progress.set(currentTime);
 
-      // Update the playback position in the URL.
-      router.setParams({
-        playbackPosition: msToTicks(currentTime).toString(),
-      });
+      // Update URL immediately after seeking, or every 30 seconds during normal playback
+      const now = Date.now();
+      const shouldUpdateUrl = wasJustSeeking.get();
+      wasJustSeeking.value = false;
 
-      if (offline) return;
-      if (!item?.Id || !stream) return;
+      if (
+        shouldUpdateUrl ||
+        now - lastUrlUpdateTime.get() > URL_UPDATE_INTERVAL
+      ) {
+        router.setParams({
+          playbackPosition: msToTicks(currentTime).toString(),
+        });
+        lastUrlUpdateTime.value = now;
+      }
 
-      reportPlaybackProgress();
+      if (!item?.Id) return;
+
+      playbackManager.reportPlaybackProgress(
+        item.Id,
+        msToTicks(progress.get()),
+        {
+          AudioStreamIndex: audioIndex ?? -1,
+          SubtitleStreamIndex: subtitleIndex ?? -1,
+        },
+      );
     },
     [
       item?.Id,
@@ -340,28 +395,10 @@ export default function page() {
     setIsPipStarted(pipStarted);
   }, []);
 
-  const reportPlaybackProgress = useCallback(async () => {
-    if (!api || offline || !stream) return;
-    await getPlaystateApi(api).reportPlaybackProgress({
-      playbackProgressInfo: currentPlayStateInfo() as PlaybackProgressInfo,
-    });
-  }, [
-    api,
-    isPlaying,
-    offline,
-    stream,
-    item?.Id,
-    audioIndex,
-    subtitleIndex,
-    mediaSourceId,
-    progress,
-  ]);
-
   /** Gets the initial playback position in seconds. */
   const startPosition = useMemo(() => {
-    if (offline) return 0;
     return ticksToSeconds(getInitialPlaybackTicks());
-  }, [offline, getInitialPlaybackTicks]);
+  }, [getInitialPlaybackTicks]);
 
   const volumeUpCb = useCallback(async () => {
     if (Platform.isTV) return;
@@ -400,6 +437,7 @@ export default function page() {
       console.error("Error toggling mute:", error);
     }
   }, [previousVolume]);
+
   const volumeDownCb = useCallback(async () => {
     if (Platform.isTV) return;
 
@@ -446,14 +484,32 @@ export default function page() {
       const { state, isBuffering, isPlaying } = e.nativeEvent;
       if (state === "Playing") {
         setIsPlaying(true);
-        reportPlaybackProgress();
+        if (item?.Id) {
+          playbackManager.reportPlaybackProgress(
+            item.Id,
+            msToTicks(progress.get()),
+            {
+              AudioStreamIndex: audioIndex ?? -1,
+              SubtitleStreamIndex: subtitleIndex ?? -1,
+            },
+          );
+        }
         if (!Platform.isTV) await activateKeepAwakeAsync();
         return;
       }
 
       if (state === "Paused") {
         setIsPlaying(false);
-        reportPlaybackProgress();
+        if (item?.Id) {
+          playbackManager.reportPlaybackProgress(
+            item.Id,
+            msToTicks(progress.get()),
+            {
+              AudioStreamIndex: audioIndex ?? -1,
+              SubtitleStreamIndex: subtitleIndex ?? -1,
+            },
+          );
+        }
         if (!Platform.isTV) await deactivateKeepAwake();
         return;
       }
@@ -465,7 +521,7 @@ export default function page() {
         setIsBuffering(true);
       }
     },
-    [reportPlaybackProgress],
+    [playbackManager, item?.Id, progress],
   );
 
   const allAudio =
@@ -483,25 +539,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;
-  const initOptions = [`--sub-text-scale=${settings.subtitleSize}`];
+  /** The initial options to pass to the VLC Player */
+  const initOptions = [``];
   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}`);
   }
 
@@ -517,6 +577,60 @@ export default function page() {
     return () => setIsMounted(false);
   }, []);
 
+  // Memoize video ref functions to prevent unnecessary re-renders
+  const startPictureInPicture = useCallback(async () => {
+    return videoRef.current?.startPictureInPicture?.();
+  }, []);
+  const play = useCallback(() => {
+    videoRef.current?.play?.();
+  }, []);
+
+  const pause = useCallback(() => {
+    videoRef.current?.pause?.();
+  }, []);
+
+  const seek = useCallback((position: number) => {
+    videoRef.current?.seekTo?.(position);
+  }, []);
+  const getAudioTracks = useCallback(async () => {
+    return videoRef.current?.getAudioTracks?.() || null;
+  }, []);
+
+  const getSubtitleTracks = useCallback(async () => {
+    return videoRef.current?.getSubtitleTracks?.() || null;
+  }, []);
+
+  const setSubtitleTrack = useCallback((index: number) => {
+    videoRef.current?.setSubtitleTrack?.(index);
+  }, []);
+
+  const setSubtitleURL = useCallback((url: string, _customName?: string) => {
+    // Note: VlcPlayer type only expects url parameter
+    videoRef.current?.setSubtitleURL?.(url);
+  }, []);
+
+  const setAudioTrack = useCallback((index: number) => {
+    videoRef.current?.setAudioTrack?.(index);
+  }, []);
+
+  const setVideoAspectRatio = useCallback(
+    async (aspectRatio: string | null) => {
+      return (
+        videoRef.current?.setVideoAspectRatio?.(aspectRatio) ||
+        Promise.resolve()
+      );
+    },
+    [],
+  );
+
+  const setVideoScaleFactor = useCallback(async (scaleFactor: number) => {
+    return (
+      videoRef.current?.setVideoScaleFactor?.(scaleFactor) || Promise.resolve()
+    );
+  }, []);
+
+  console.log("Debug: component render"); // Uncomment to debug re-renders
+
   // Show error UI first, before checking loading/missing‐data
   if (itemStatus.isError || streamStatus.isError) {
     return (
@@ -544,7 +658,14 @@ export default function page() {
     );
 
   return (
-    <View style={{ flex: 1, backgroundColor: "black" }}>
+    <View
+      style={{
+        flex: 1,
+        backgroundColor: "black",
+        height: "100%",
+        width: "100%",
+      }}
+    >
       <View
         style={{
           display: "flex",
@@ -553,8 +674,6 @@ export default function page() {
           position: "relative",
           flexDirection: "column",
           justifyContent: "center",
-          paddingLeft: ignoreSafeAreas ? 0 : insets.left,
-          paddingRight: ignoreSafeAreas ? 0 : insets.right,
         }}
       >
         <VlcPlayerView
@@ -562,7 +681,7 @@ export default function page() {
           source={{
             uri: stream?.url || "",
             autoplay: true,
-            isNetwork: true,
+            isNetwork: !offline,
             startPosition,
             externalSubtitles,
             initOptions,
@@ -598,20 +717,24 @@ export default function page() {
           isBuffering={isBuffering}
           showControls={showControls}
           setShowControls={setShowControls}
-          setIgnoreSafeAreas={setIgnoreSafeAreas}
-          ignoreSafeAreas={ignoreSafeAreas}
           isVideoLoaded={isVideoLoaded}
-          startPictureInPicture={videoRef.current?.startPictureInPicture}
-          play={videoRef.current?.play}
-          pause={videoRef.current?.pause}
-          seek={videoRef.current?.seekTo}
+          startPictureInPicture={startPictureInPicture}
+          play={play}
+          pause={pause}
+          seek={seek}
           enableTrickplay={true}
-          getAudioTracks={videoRef.current?.getAudioTracks}
-          getSubtitleTracks={videoRef.current?.getSubtitleTracks}
+          getAudioTracks={getAudioTracks}
+          getSubtitleTracks={getSubtitleTracks}
           offline={offline}
-          setSubtitleTrack={videoRef.current?.setSubtitleTrack}
-          setSubtitleURL={videoRef.current?.setSubtitleURL}
-          setAudioTrack={videoRef.current?.setAudioTrack}
+          setSubtitleTrack={setSubtitleTrack}
+          setSubtitleURL={setSubtitleURL}
+          setAudioTrack={setAudioTrack}
+          setVideoAspectRatio={setVideoAspectRatio}
+          setVideoScaleFactor={setVideoScaleFactor}
+          aspectRatio={aspectRatio}
+          scaleFactor={scaleFactor}
+          setAspectRatio={setAspectRatio}
+          setScaleFactor={setScaleFactor}
           isVlc
         />
       )}

app/_layout.tsx

@@ -1,7 +1,6 @@
 import "@/augmentations";
 import { ActionSheetProvider } from "@expo/react-native-action-sheet";
 import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
-import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
 import { Platform } from "react-native";
 import i18n from "@/i18n";
 import { DownloadProvider } from "@/providers/DownloadProvider";
@@ -11,7 +10,6 @@ import {
   getTokenFromStorage,
   JellyfinProvider,
 } from "@/providers/JellyfinProvider";
-import { JobQueueProvider } from "@/providers/JobQueueProvider";
 import { PlaySettingsProvider } from "@/providers/PlaySettingsProvider";
 import { WebSocketProvider } from "@/providers/WebSocketProvider";
 import { type Settings, useSettings } from "@/utils/atoms/settings";
@@ -27,7 +25,6 @@ import {
   writeToLog,
 } from "@/utils/log";
 import { storage } from "@/utils/mmkv";
-import { cancelJobById, getAllJobsByDeviceId } from "@/utils/optimize-server";
 
 const BackGroundDownloader = !Platform.isTV
   ? require("@kesha-antonov/react-native-background-downloader")
@@ -145,100 +142,24 @@ if (!Platform.isTV) {
   TaskManager.defineTask(BACKGROUND_FETCH_TASK, async () => {
     console.log("TaskManager ~ trigger");
 
-    const now = Date.now();
+    const settingsData = storage.getString("settings");
 
-    try {
-      const settingsData = storage.getString("settings");
+    if (!settingsData) return BackgroundFetch.BackgroundFetchResult.NoData;
 
-      if (!settingsData) return BackgroundFetch.BackgroundFetchResult.NoData;
+    const settings: Partial<Settings> = JSON.parse(settingsData);
 
-      const settings: Partial<Settings> = JSON.parse(settingsData);
-      const url = settings?.optimizedVersionsServerUrl;
+    if (!settings?.autoDownload)
+      return BackgroundFetch.BackgroundFetchResult.NoData;
 
-      if (!settings?.autoDownload || !url)
-        return BackgroundFetch.BackgroundFetchResult.NoData;
+    const token = getTokenFromStorage();
+    const deviceId = getOrSetDeviceId();
+    const baseDirectory = FileSystem.documentDirectory;
 
-      const token = getTokenFromStorage();
-      const deviceId = getOrSetDeviceId();
-      const baseDirectory = FileSystem.documentDirectory;
+    if (!token || !deviceId || !baseDirectory)
+      return BackgroundFetch.BackgroundFetchResult.NoData;
 
-      if (!token || !deviceId || !baseDirectory)
-        return BackgroundFetch.BackgroundFetchResult.NoData;
-
-      const jobs = await getAllJobsByDeviceId({
-        deviceId,
-        authHeader: token,
-        url,
-      });
-
-      console.log("TaskManager ~ Active jobs: ", jobs.length);
-
-      for (const job of jobs) {
-        if (job.status === "completed") {
-          const downloadUrl = `${url}download/${job.id}`;
-          const tasks = await BackGroundDownloader.checkForExistingDownloads();
-
-          if (tasks.find((task: { id: string }) => task.id === job.id)) {
-            console.log("TaskManager ~ Download already in progress: ", job.id);
-            continue;
-          }
-
-          BackGroundDownloader.download({
-            id: job.id,
-            url: downloadUrl,
-            destination: `${baseDirectory}${job.item.Id}.mp4`,
-            headers: {
-              Authorization: token,
-            },
-          })
-            .begin(() => {
-              console.log("TaskManager ~ Download started: ", job.id);
-            })
-            .done(() => {
-              console.log("TaskManager ~ Download completed: ", job.id);
-              saveDownloadedItemInfo(job.item);
-              BackGroundDownloader.completeHandler(job.id);
-              cancelJobById({
-                authHeader: token,
-                id: job.id,
-                url: url,
-              });
-              Notifications.scheduleNotificationAsync({
-                content: {
-                  title: job.item.Name,
-                  body: "Download completed",
-                  data: {
-                    url: "/downloads",
-                  },
-                },
-                trigger: null,
-              });
-            })
-            .error((error: any) => {
-              console.log("TaskManager ~ Download error: ", job.id, error);
-              BackGroundDownloader.completeHandler(job.id);
-              Notifications.scheduleNotificationAsync({
-                content: {
-                  title: job.item.Name,
-                  body: "Download failed",
-                  data: {
-                    url: "/downloads",
-                  },
-                },
-                trigger: null,
-              });
-            });
-        }
-      }
-
-      console.log(`Auto download started: ${new Date(now).toISOString()}`);
-
-      // Be sure to return the successful result type!
-      return BackgroundFetch.BackgroundFetchResult.NewData;
-    } catch (error) {
-      console.error("Background task error:", error);
-      return BackgroundFetch.BackgroundFetchResult.Failed;
-    }
+    // Be sure to return the successful result type!
+    return BackgroundFetch.BackgroundFetchResult.NewData;
   });
 }
 
@@ -474,85 +395,62 @@ function Layout() {
 
   return (
     <QueryClientProvider client={queryClient}>
-      <JobQueueProvider>
-        <JellyfinProvider>
-          <PlaySettingsProvider>
-            <LogProvider>
-              <WebSocketProvider>
-                <DownloadProvider>
-                  <BottomSheetModalProvider>
-                    <SystemBars style='light' hidden={false} />
-                    <ThemeProvider value={DarkTheme}>
-                      <Stack initialRouteName='(auth)/(tabs)'>
-                        <Stack.Screen
-                          name='(auth)/(tabs)'
-                          options={{
-                            headerShown: false,
-                            title: "",
-                            header: () => null,
-                          }}
-                        />
-                        <Stack.Screen
-                          name='(auth)/player'
-                          options={{
-                            headerShown: false,
-                            title: "",
-                            header: () => null,
-                          }}
-                        />
-                        <Stack.Screen
-                          name='login'
-                          options={{
-                            headerShown: true,
-                            title: "",
-                            headerTransparent: true,
-                          }}
-                        />
-                        <Stack.Screen name='+not-found' />
-                      </Stack>
-                      <Toaster
-                        duration={4000}
-                        toastOptions={{
-                          style: {
-                            backgroundColor: "#262626",
-                            borderColor: "#363639",
-                            borderWidth: 1,
-                          },
-                          titleStyle: {
-                            color: "white",
-                          },
+      <JellyfinProvider>
+        <PlaySettingsProvider>
+          <LogProvider>
+            <WebSocketProvider>
+              <DownloadProvider>
+                <BottomSheetModalProvider>
+                  <SystemBars style='light' hidden={false} />
+                  <ThemeProvider value={DarkTheme}>
+                    <Stack initialRouteName='(auth)/(tabs)'>
+                      <Stack.Screen
+                        name='(auth)/(tabs)'
+                        options={{
+                          headerShown: false,
+                          title: "",
+                          header: () => null,
                         }}
-                        closeButton
                       />
-                    </ThemeProvider>
-                  </BottomSheetModalProvider>
-                </DownloadProvider>
-              </WebSocketProvider>
-            </LogProvider>
-          </PlaySettingsProvider>
-        </JellyfinProvider>
-      </JobQueueProvider>
+                      <Stack.Screen
+                        name='(auth)/player'
+                        options={{
+                          headerShown: false,
+                          title: "",
+                          header: () => null,
+                        }}
+                      />
+                      <Stack.Screen
+                        name='login'
+                        options={{
+                          headerShown: true,
+                          title: "",
+                          headerTransparent: true,
+                        }}
+                      />
+                      <Stack.Screen name='+not-found' />
+                    </Stack>
+                    <Toaster
+                      duration={4000}
+                      toastOptions={{
+                        style: {
+                          backgroundColor: "#262626",
+                          borderColor: "#363639",
+                          borderWidth: 1,
+                        },
+                        titleStyle: {
+                          color: "white",
+                        },
+                      }}
+                      closeButton
+                    />
+                  </ThemeProvider>
+                </BottomSheetModalProvider>
+              </DownloadProvider>
+            </WebSocketProvider>
+          </LogProvider>
+        </PlaySettingsProvider>
+      </JellyfinProvider>
     </QueryClientProvider>
   );
 }
-
-function saveDownloadedItemInfo(item: BaseItemDto) {
-  try {
-    const downloadedItems = storage.getString("downloadedItems");
-    const items: BaseItemDto[] = downloadedItems
-      ? JSON.parse(downloadedItems)
-      : [];
-
-    const existingItemIndex = items.findIndex((i) => i.Id === item.Id);
-    if (existingItemIndex !== -1) {
-      items[existingItemIndex] = item;
-    } else {
-      items.push(item);
-    }
-
-    storage.set("downloadedItems", JSON.stringify(items));
-  } catch (error) {
-    writeToLog("ERROR", "Failed to save downloaded item information:", error);
-    console.error("Failed to save downloaded item information:", error);
-  }
-}

biome.json

@@ -1,14 +1,14 @@
 {
-  "$schema": "https://biomejs.dev/schemas/2.1.3/schema.json",
+  "$schema": "https://biomejs.dev/schemas/2.2.0/schema.json",
   "files": {
     "includes": [
       "**/*",
-      "!node_modules/**",
-      "!ios/**",
-      "!android/**",
-      "!Streamyfin.app/**",
-      "!utils/jellyseerr/**",
-      "!.expo/**"
+      "!node_modules",
+      "!ios",
+      "!android",
+      "!Streamyfin.app",
+      "!utils/jellyseerr",
+      "!.expo"
     ]
   },
   "linter": {
@@ -24,7 +24,9 @@
         "noForEach": "off"
       },
       "recommended": true,
-      "correctness": { "useExhaustiveDependencies": "off" },
+      "correctness": {
+        "useExhaustiveDependencies": "off"
+      },
       "suspicious": {
         "noExplicitAny": "off",
         "noArrayIndexKey": "off"

bun.lock

@@ -66,6 +66,7 @@
         "react-native-ios-context-menu": "^3.1.0",
         "react-native-ios-utilities": "5.1.8",
         "react-native-mmkv": "2.12.2",
+        "react-native-pager-view": "^6.9.1",
         "react-native-reanimated": "~3.16.7",
         "react-native-reanimated-carousel": "4.0.2",
         "react-native-safe-area-context": "5.4.0",
@@ -85,8 +86,8 @@
       },
       "devDependencies": {
         "@babel/core": "^7.20.0",
-        "@biomejs/biome": "^2.1.3",
-        "@react-native-community/cli": "^19",
+        "@biomejs/biome": "^2.2.0",
+        "@react-native-community/cli": "^20.0.0",
         "@react-native-tvos/config-tv": "^0.1.1",
         "@types/jest": "^29.5.12",
         "@types/lodash": "^4.17.15",
@@ -94,7 +95,7 @@
         "@types/react-test-renderer": "^19.0.0",
         "cross-env": "^10.0.0",
         "husky": "^9.1.7",
-        "lint-staged": "^16.1.2",
+        "lint-staged": "^16.1.5",
         "postinstall-postinstall": "^2.1.0",
         "react-test-renderer": "19.1.1",
         "typescript": "~5.8.3",
@@ -115,15 +116,15 @@
 
     "@babel/compat-data": ["@babel/compat-data@7.28.0", "", {}, "sha512-60X7qkglvrap8mn1lh2ebxXdZYtUcpd7gsmy9kLaBJ4i/WdY8PqTSdxyA8qraikqKQK5C1KRBKXqznrVapyNaw=="],
 
-    "@babel/core": ["@babel/core@7.28.0", "", { "dependencies": { "@ampproject/remapping": "^2.2.0", "@babel/code-frame": "^7.27.1", "@babel/generator": "^7.28.0", "@babel/helper-compilation-targets": "^7.27.2", "@babel/helper-module-transforms": "^7.27.3", "@babel/helpers": "^7.27.6", "@babel/parser": "^7.28.0", "@babel/template": "^7.27.2", "@babel/traverse": "^7.28.0", "@babel/types": "^7.28.0", "convert-source-map": "^2.0.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.2", "json5": "^2.2.3", "semver": "^6.3.1" } }, "sha512-UlLAnTPrFdNGoFtbSXwcGFQBtQZJCNjaN6hQNP3UPvuNXT1i82N26KL3dZeIpNalWywr9IuQuncaAfUaS1g6sQ=="],
+    "@babel/core": ["@babel/core@7.28.3", "", { "dependencies": { "@ampproject/remapping": "^2.2.0", "@babel/code-frame": "^7.27.1", "@babel/generator": "^7.28.3", "@babel/helper-compilation-targets": "^7.27.2", "@babel/helper-module-transforms": "^7.28.3", "@babel/helpers": "^7.28.3", "@babel/parser": "^7.28.3", "@babel/template": "^7.27.2", "@babel/traverse": "^7.28.3", "@babel/types": "^7.28.2", "convert-source-map": "^2.0.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.2", "json5": "^2.2.3", "semver": "^6.3.1" } }, "sha512-yDBHV9kQNcr2/sUr9jghVyz9C3Y5G2zUM2H2lo+9mKv4sFgbA8s8Z9t8D1jiTkGoO/NoIfKMyKWr4s6CN23ZwQ=="],
 
-    "@babel/generator": ["@babel/generator@7.28.0", "", { "dependencies": { "@babel/parser": "^7.28.0", "@babel/types": "^7.28.0", "@jridgewell/gen-mapping": "^0.3.12", "@jridgewell/trace-mapping": "^0.3.28", "jsesc": "^3.0.2" } }, "sha512-lJjzvrbEeWrhB4P3QBsH7tey117PjLZnDbLiQEKjQ/fNJTjuq4HSqgFA+UNSwZT8D7dxxbnuSBMsa1lrWzKlQg=="],
+    "@babel/generator": ["@babel/generator@7.28.3", "", { "dependencies": { "@babel/parser": "^7.28.3", "@babel/types": "^7.28.2", "@jridgewell/gen-mapping": "^0.3.12", "@jridgewell/trace-mapping": "^0.3.28", "jsesc": "^3.0.2" } }, "sha512-3lSpxGgvnmZznmBkCRnVREPUFJv2wrv9iAoFDvADJc0ypmdOxdUtcLeBgBJ6zE0PMeTKnxeQzyk0xTBq4Ep7zw=="],
 
     "@babel/helper-annotate-as-pure": ["@babel/helper-annotate-as-pure@7.27.3", "", { "dependencies": { "@babel/types": "^7.27.3" } }, "sha512-fXSwMQqitTGeHLBC08Eq5yXz2m37E4pJX1qAU1+2cNedz/ifv/bVXft90VeSav5nFO61EcNgwr0aJxbyPaWBPg=="],
 
     "@babel/helper-compilation-targets": ["@babel/helper-compilation-targets@7.27.2", "", { "dependencies": { "@babel/compat-data": "^7.27.2", "@babel/helper-validator-option": "^7.27.1", "browserslist": "^4.24.0", "lru-cache": "^5.1.1", "semver": "^6.3.1" } }, "sha512-2+1thGUUWWjLTYTHZWK1n8Yga0ijBz1XAhUXcKy81rd5g6yh7hGqMp45v7cadSbEHc9G3OTv45SyneRN3ps4DQ=="],
 
-    "@babel/helper-create-class-features-plugin": ["@babel/helper-create-class-features-plugin@7.27.1", "", { "dependencies": { "@babel/helper-annotate-as-pure": "^7.27.1", "@babel/helper-member-expression-to-functions": "^7.27.1", "@babel/helper-optimise-call-expression": "^7.27.1", "@babel/helper-replace-supers": "^7.27.1", "@babel/helper-skip-transparent-expression-wrappers": "^7.27.1", "@babel/traverse": "^7.27.1", "semver": "^6.3.1" }, "peerDependencies": { "@babel/core": "^7.0.0" } }, "sha512-QwGAmuvM17btKU5VqXfb+Giw4JcN0hjuufz3DYnpeVDvZLAObloM77bhMXiqry3Iio+Ai4phVRDwl6WU10+r5A=="],
+    "@babel/helper-create-class-features-plugin": ["@babel/helper-create-class-features-plugin@7.28.3", "", { "dependencies": { "@babel/helper-annotate-as-pure": "^7.27.3", "@babel/helper-member-expression-to-functions": "^7.27.1", "@babel/helper-optimise-call-expression": "^7.27.1", "@babel/helper-replace-supers": "^7.27.1", "@babel/helper-skip-transparent-expression-wrappers": "^7.27.1", "@babel/traverse": "^7.28.3", "semver": "^6.3.1" }, "peerDependencies": { "@babel/core": "^7.0.0" } }, "sha512-V9f6ZFIYSLNEbuGA/92uOvYsGCJNsuA8ESZ4ldc09bWk/j8H8TKiPw8Mk1eG6olpnO0ALHJmYfZvF4MEE4gajg=="],
 
     "@babel/helper-create-regexp-features-plugin": ["@babel/helper-create-regexp-features-plugin@7.27.1", "", { "dependencies": { "@babel/helper-annotate-as-pure": "^7.27.1", "regexpu-core": "^6.2.0", "semver": "^6.3.1" }, "peerDependencies": { "@babel/core": "^7.0.0" } }, "sha512-uVDC72XVf8UbrH5qQTc18Agb8emwjTiZrQE11Nv3CuBEZmVvTwwE9CBUEvHku06gQCAyYf8Nv6ja1IN+6LMbxQ=="],
 
@@ -135,7 +136,7 @@
 
     "@babel/helper-module-imports": ["@babel/helper-module-imports@7.18.6", "", { "dependencies": { "@babel/types": "^7.18.6" } }, "sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA=="],
 
-    "@babel/helper-module-transforms": ["@babel/helper-module-transforms@7.27.3", "", { "dependencies": { "@babel/helper-module-imports": "^7.27.1", "@babel/helper-validator-identifier": "^7.27.1", "@babel/traverse": "^7.27.3" }, "peerDependencies": { "@babel/core": "^7.0.0" } }, "sha512-dSOvYwvyLsWBeIRyOeHXp5vPj5l1I011r52FM1+r1jCERv+aFXYk4whgQccYEGYxK2H3ZAIA8nuPkQ0HaUo3qg=="],
+    "@babel/helper-module-transforms": ["@babel/helper-module-transforms@7.28.3", "", { "dependencies": { "@babel/helper-module-imports": "^7.27.1", "@babel/helper-validator-identifier": "^7.27.1", "@babel/traverse": "^7.28.3" }, "peerDependencies": { "@babel/core": "^7.0.0" } }, "sha512-gytXUbs8k2sXS9PnQptz5o0QnpLL51SwASIORY6XaBKF88nsOT0Zw9szLqlSGQDP/4TljBAD5y98p2U1fqkdsw=="],
 
     "@babel/helper-optimise-call-expression": ["@babel/helper-optimise-call-expression@7.27.1", "", { "dependencies": { "@babel/types": "^7.27.1" } }, "sha512-URMGH08NzYFhubNSGJrpUEphGKQwMQYBySzat5cAByY1/YgIRkULnIy3tAMeszlL/so2HbeilYloUmSpd7GdVw=="],
 
@@ -153,13 +154,13 @@
 
     "@babel/helper-validator-option": ["@babel/helper-validator-option@7.27.1", "", {}, "sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg=="],
 
-    "@babel/helper-wrap-function": ["@babel/helper-wrap-function@7.27.1", "", { "dependencies": { "@babel/template": "^7.27.1", "@babel/traverse": "^7.27.1", "@babel/types": "^7.27.1" } }, "sha512-NFJK2sHUvrjo8wAU/nQTWU890/zB2jj0qBcCbZbbf+005cAsv6tMjXz31fBign6M5ov1o0Bllu+9nbqkfsjjJQ=="],
+    "@babel/helper-wrap-function": ["@babel/helper-wrap-function@7.28.3", "", { "dependencies": { "@babel/template": "^7.27.2", "@babel/traverse": "^7.28.3", "@babel/types": "^7.28.2" } }, "sha512-zdf983tNfLZFletc0RRXYrHrucBEg95NIFMkn6K9dbeMYnsgHaSBGcQqdsCSStG2PYwRre0Qc2NNSCXbG+xc6g=="],
 
-    "@babel/helpers": ["@babel/helpers@7.28.2", "", { "dependencies": { "@babel/template": "^7.27.2", "@babel/types": "^7.28.2" } }, "sha512-/V9771t+EgXz62aCcyofnQhGM8DQACbRhvzKFsXKC9QM+5MadF8ZmIm0crDMaz3+o0h0zXfJnd4EhbYbxsrcFw=="],
+    "@babel/helpers": ["@babel/helpers@7.28.3", "", { "dependencies": { "@babel/template": "^7.27.2", "@babel/types": "^7.28.2" } }, "sha512-PTNtvUQihsAsDHMOP5pfobP8C6CM4JWXmP8DrEIt46c3r2bf87Ua1zoqevsMo9g+tWDwgWrFP5EIxuBx5RudAw=="],
 
     "@babel/highlight": ["@babel/highlight@7.25.9", "", { "dependencies": { "@babel/helper-validator-identifier": "^7.25.9", "chalk": "^2.4.2", "js-tokens": "^4.0.0", "picocolors": "^1.0.0" } }, "sha512-llL88JShoCsth8fF8R4SJnIn+WLvR6ccFxu1H3FlMhDontdcmZWf2HgIZ7AIqV3Xcck1idlohrN4EUBQz6klbw=="],
 
-    "@babel/parser": ["@babel/parser@7.28.0", "", { "dependencies": { "@babel/types": "^7.28.0" }, "bin": "./bin/babel-parser.js" }, "sha512-jVZGvOxOuNSsuQuLRTh13nU0AogFlw32w/MT+LV6D3sP5WdbW61E77RnkbaO2dUvmPAYrBDJXGn5gGS6tH4j8g=="],
+    "@babel/parser": ["@babel/parser@7.28.3", "", { "dependencies": { "@babel/types": "^7.28.2" }, "bin": "./bin/babel-parser.js" }, "sha512-7+Ey1mAgYqFAx2h0RuoxcQT5+MlG3GTV0TQrgr7/ZliKsm/MNDxVVutlWaziMq7wJNAz8MTqz55XLpWvva6StA=="],
 
     "@babel/plugin-proposal-decorators": ["@babel/plugin-proposal-decorators@7.28.0", "", { "dependencies": { "@babel/helper-create-class-features-plugin": "^7.27.1", "@babel/helper-plugin-utils": "^7.27.1", "@babel/plugin-syntax-decorators": "^7.27.1" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-zOiZqvANjWDUaUS9xMxbMcK/Zccztbe/6ikvUXaG9nsPH3w6qh5UaPGAnirI/WhIbZ8m3OHU0ReyPrknG+ZKeg=="],
 
@@ -217,7 +218,7 @@
 
     "@babel/plugin-transform-class-properties": ["@babel/plugin-transform-class-properties@7.27.1", "", { "dependencies": { "@babel/helper-create-class-features-plugin": "^7.27.1", "@babel/helper-plugin-utils": "^7.27.1" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-D0VcalChDMtuRvJIu3U/fwWjf8ZMykz5iZsg77Nuj821vCKI3zCyRLwRdWbsuJ/uRwZhZ002QtCqIkwC/ZkvbA=="],
 
-    "@babel/plugin-transform-classes": ["@babel/plugin-transform-classes@7.28.0", "", { "dependencies": { "@babel/helper-annotate-as-pure": "^7.27.3", "@babel/helper-compilation-targets": "^7.27.2", "@babel/helper-globals": "^7.28.0", "@babel/helper-plugin-utils": "^7.27.1", "@babel/helper-replace-supers": "^7.27.1", "@babel/traverse": "^7.28.0" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-IjM1IoJNw72AZFlj33Cu8X0q2XK/6AaVC3jQu+cgQ5lThWD5ajnuUAml80dqRmOhmPkTH8uAwnpMu9Rvj0LTRA=="],
+    "@babel/plugin-transform-classes": ["@babel/plugin-transform-classes@7.28.3", "", { "dependencies": { "@babel/helper-annotate-as-pure": "^7.27.3", "@babel/helper-compilation-targets": "^7.27.2", "@babel/helper-globals": "^7.28.0", "@babel/helper-plugin-utils": "^7.27.1", "@babel/helper-replace-supers": "^7.27.1", "@babel/traverse": "^7.28.3" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-DoEWC5SuxuARF2KdKmGUq3ghfPMO6ZzR12Dnp5gubwbeWJo4dbNWXJPVlwvh4Zlq6Z7YVvL8VFxeSOJgjsx4Sg=="],
 
     "@babel/plugin-transform-computed-properties": ["@babel/plugin-transform-computed-properties@7.27.1", "", { "dependencies": { "@babel/helper-plugin-utils": "^7.27.1", "@babel/template": "^7.27.1" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-lj9PGWvMTVksbWiDT2tW68zGS/cyo4AkZ/QTp0sQT0mjPopCmrSkzxeXkznjqBxzDI6TclZhOJbBmbBLjuOZUw=="],
 
@@ -267,9 +268,9 @@
 
     "@babel/plugin-transform-react-pure-annotations": ["@babel/plugin-transform-react-pure-annotations@7.27.1", "", { "dependencies": { "@babel/helper-annotate-as-pure": "^7.27.1", "@babel/helper-plugin-utils": "^7.27.1" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-JfuinvDOsD9FVMTHpzA/pBLisxpv1aSf+OIV8lgH3MuWrks19R27e6a6DipIg4aX1Zm9Wpb04p8wljfKrVSnPA=="],
 
-    "@babel/plugin-transform-regenerator": ["@babel/plugin-transform-regenerator@7.28.1", "", { "dependencies": { "@babel/helper-plugin-utils": "^7.27.1" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-P0QiV/taaa3kXpLY+sXla5zec4E+4t4Aqc9ggHlfZ7a2cp8/x/Gv08jfwEtn9gnnYIMvHx6aoOZ8XJL8eU71Dg=="],
+    "@babel/plugin-transform-regenerator": ["@babel/plugin-transform-regenerator@7.28.3", "", { "dependencies": { "@babel/helper-plugin-utils": "^7.27.1" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-K3/M/a4+ESb5LEldjQb+XSrpY0nF+ZBFlTCbSnKaYAMfD8v33O6PMs4uYnOk19HlcsI8WMu3McdFPTiQHF/1/A=="],
 
-    "@babel/plugin-transform-runtime": ["@babel/plugin-transform-runtime@7.28.0", "", { "dependencies": { "@babel/helper-module-imports": "^7.27.1", "@babel/helper-plugin-utils": "^7.27.1", "babel-plugin-polyfill-corejs2": "^0.4.14", "babel-plugin-polyfill-corejs3": "^0.13.0", "babel-plugin-polyfill-regenerator": "^0.6.5", "semver": "^6.3.1" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-dGopk9nZrtCs2+nfIem25UuHyt5moSJamArzIoh9/vezUQPmYDOzjaHDCkAzuGJibCIkPup8rMT2+wYB6S73cA=="],
+    "@babel/plugin-transform-runtime": ["@babel/plugin-transform-runtime@7.28.3", "", { "dependencies": { "@babel/helper-module-imports": "^7.27.1", "@babel/helper-plugin-utils": "^7.27.1", "babel-plugin-polyfill-corejs2": "^0.4.14", "babel-plugin-polyfill-corejs3": "^0.13.0", "babel-plugin-polyfill-regenerator": "^0.6.5", "semver": "^6.3.1" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-Y6ab1kGqZ0u42Zv/4a7l0l72n9DKP/MKoKWaUSBylrhNZO2prYuqFOLbn5aW5SIFXwSH93yfjbgllL8lxuGKLg=="],
 
     "@babel/plugin-transform-shorthand-properties": ["@babel/plugin-transform-shorthand-properties@7.27.1", "", { "dependencies": { "@babel/helper-plugin-utils": "^7.27.1" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-N/wH1vcn4oYawbJ13Y/FxcQrWk63jhfNa7jef0ih7PHSIHX2LB7GWE1rkPrOnka9kwMxb6hMl19p7lidA+EHmQ=="],
 
@@ -287,33 +288,33 @@
 
     "@babel/preset-typescript": ["@babel/preset-typescript@7.27.1", "", { "dependencies": { "@babel/helper-plugin-utils": "^7.27.1", "@babel/helper-validator-option": "^7.27.1", "@babel/plugin-syntax-jsx": "^7.27.1", "@babel/plugin-transform-modules-commonjs": "^7.27.1", "@babel/plugin-transform-typescript": "^7.27.1" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-l7WfQfX0WK4M0v2RudjuQK4u99BS6yLHYEmdtVPP7lKV013zr9DygFuWNlnbvQ9LR+LS0Egz/XAvGx5U9MX0fQ=="],
 
-    "@babel/runtime": ["@babel/runtime@7.28.2", "", {}, "sha512-KHp2IflsnGywDjBWDkR9iEqiWSpc8GIi0lgTT3mOElT0PP1tG26P4tmFI2YvAdzgq9RGyoHZQEIEdZy6Ec5xCA=="],
+    "@babel/runtime": ["@babel/runtime@7.28.3", "", {}, "sha512-9uIQ10o0WGdpP6GDhXcdOJPJuDgFtIDtN/9+ArJQ2NAfAmiuhTQdzkaTGR33v43GYS2UrSA0eX2pPPHoFVvpxA=="],
 
     "@babel/template": ["@babel/template@7.27.2", "", { "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/parser": "^7.27.2", "@babel/types": "^7.27.1" } }, "sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw=="],
 
-    "@babel/traverse": ["@babel/traverse@7.28.0", "", { "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/generator": "^7.28.0", "@babel/helper-globals": "^7.28.0", "@babel/parser": "^7.28.0", "@babel/template": "^7.27.2", "@babel/types": "^7.28.0", "debug": "^4.3.1" } }, "sha512-mGe7UK5wWyh0bKRfupsUchrQGqvDbZDbKJw+kcRGSmdHVYrv+ltd0pnpDTVpiTqnaBru9iEvA8pz8W46v0Amwg=="],
+    "@babel/traverse": ["@babel/traverse@7.28.3", "", { "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/generator": "^7.28.3", "@babel/helper-globals": "^7.28.0", "@babel/parser": "^7.28.3", "@babel/template": "^7.27.2", "@babel/types": "^7.28.2", "debug": "^4.3.1" } }, "sha512-7w4kZYHneL3A6NP2nxzHvT3HCZ7puDZZjFMqDpBPECub79sTtSO5CGXDkKrTQq8ksAwfD/XI2MRFX23njdDaIQ=="],
 
-    "@babel/traverse--for-generate-function-map": ["@babel/traverse@7.28.0", "", { "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/generator": "^7.28.0", "@babel/helper-globals": "^7.28.0", "@babel/parser": "^7.28.0", "@babel/template": "^7.27.2", "@babel/types": "^7.28.0", "debug": "^4.3.1" } }, "sha512-mGe7UK5wWyh0bKRfupsUchrQGqvDbZDbKJw+kcRGSmdHVYrv+ltd0pnpDTVpiTqnaBru9iEvA8pz8W46v0Amwg=="],
+    "@babel/traverse--for-generate-function-map": ["@babel/traverse@7.28.3", "", { "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/generator": "^7.28.3", "@babel/helper-globals": "^7.28.0", "@babel/parser": "^7.28.3", "@babel/template": "^7.27.2", "@babel/types": "^7.28.2", "debug": "^4.3.1" } }, "sha512-7w4kZYHneL3A6NP2nxzHvT3HCZ7puDZZjFMqDpBPECub79sTtSO5CGXDkKrTQq8ksAwfD/XI2MRFX23njdDaIQ=="],
 
     "@babel/types": ["@babel/types@7.28.2", "", { "dependencies": { "@babel/helper-string-parser": "^7.27.1", "@babel/helper-validator-identifier": "^7.27.1" } }, "sha512-ruv7Ae4J5dUYULmeXw1gmb7rYRz57OWCPM57pHojnLq/3Z1CK2lNSLTCVjxVk1F/TZHwOZZrOWi0ur95BbLxNQ=="],
 
-    "@biomejs/biome": ["@biomejs/biome@2.1.3", "", { "optionalDependencies": { "@biomejs/cli-darwin-arm64": "2.1.3", "@biomejs/cli-darwin-x64": "2.1.3", "@biomejs/cli-linux-arm64": "2.1.3", "@biomejs/cli-linux-arm64-musl": "2.1.3", "@biomejs/cli-linux-x64": "2.1.3", "@biomejs/cli-linux-x64-musl": "2.1.3", "@biomejs/cli-win32-arm64": "2.1.3", "@biomejs/cli-win32-x64": "2.1.3" }, "bin": { "biome": "bin/biome" } }, "sha512-KE/tegvJIxTkl7gJbGWSgun7G6X/n2M6C35COT6ctYrAy7SiPyNvi6JtoQERVK/VRbttZfgGq96j2bFmhmnH4w=="],
+    "@biomejs/biome": ["@biomejs/biome@2.2.0", "", { "optionalDependencies": { "@biomejs/cli-darwin-arm64": "2.2.0", "@biomejs/cli-darwin-x64": "2.2.0", "@biomejs/cli-linux-arm64": "2.2.0", "@biomejs/cli-linux-arm64-musl": "2.2.0", "@biomejs/cli-linux-x64": "2.2.0", "@biomejs/cli-linux-x64-musl": "2.2.0", "@biomejs/cli-win32-arm64": "2.2.0", "@biomejs/cli-win32-x64": "2.2.0" }, "bin": { "biome": "bin/biome" } }, "sha512-3On3RSYLsX+n9KnoSgfoYlckYBoU6VRM22cw1gB4Y0OuUVSYd/O/2saOJMrA4HFfA1Ff0eacOvMN1yAAvHtzIw=="],
 
-    "@biomejs/cli-darwin-arm64": ["@biomejs/cli-darwin-arm64@2.1.3", "", { "os": "darwin", "cpu": "arm64" }, "sha512-LFLkSWRoSGS1wVUD/BE6Nlt2dSn0ulH3XImzg2O/36BoToJHKXjSxzPEMAqT9QvwVtk7/9AQhZpTneERU9qaXA=="],
+    "@biomejs/cli-darwin-arm64": ["@biomejs/cli-darwin-arm64@2.2.0", "", { "os": "darwin", "cpu": "arm64" }, "sha512-zKbwUUh+9uFmWfS8IFxmVD6XwqFcENjZvEyfOxHs1epjdH3wyyMQG80FGDsmauPwS2r5kXdEM0v/+dTIA9FXAg=="],
 
-    "@biomejs/cli-darwin-x64": ["@biomejs/cli-darwin-x64@2.1.3", "", { "os": "darwin", "cpu": "x64" }, "sha512-Q/4OTw8P9No9QeowyxswcWdm0n2MsdCwWcc5NcKQQvzwPjwuPdf8dpPPf4r+x0RWKBtl1FLiAUtJvBlri6DnYw=="],
+    "@biomejs/cli-darwin-x64": ["@biomejs/cli-darwin-x64@2.2.0", "", { "os": "darwin", "cpu": "x64" }, "sha512-+OmT4dsX2eTfhD5crUOPw3RPhaR+SKVspvGVmSdZ9y9O/AgL8pla6T4hOn1q+VAFBHuHhsdxDRJgFCSC7RaMOw=="],
 
-    "@biomejs/cli-linux-arm64": ["@biomejs/cli-linux-arm64@2.1.3", "", { "os": "linux", "cpu": "arm64" }, "sha512-2hS6LgylRqMFmAZCOFwYrf77QMdUwJp49oe8PX/O8+P2yKZMSpyQTf3Eo5ewnsMFUEmYbPOskafdV1ds1MZMJA=="],
+    "@biomejs/cli-linux-arm64": ["@biomejs/cli-linux-arm64@2.2.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-6eoRdF2yW5FnW9Lpeivh7Mayhq0KDdaDMYOJnH9aT02KuSIX5V1HmWJCQQPwIQbhDh68Zrcpl8inRlTEan0SXw=="],
 
-    "@biomejs/cli-linux-arm64-musl": ["@biomejs/cli-linux-arm64-musl@2.1.3", "", { "os": "linux", "cpu": "arm64" }, "sha512-KXouFSBnoxAWZYDQrnNRzZBbt5s9UJkIm40hdvSL9mBxSSoxRFQJbtg1hP3aa8A2SnXyQHxQfpiVeJlczZt76w=="],
+    "@biomejs/cli-linux-arm64-musl": ["@biomejs/cli-linux-arm64-musl@2.2.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-egKpOa+4FL9YO+SMUMLUvf543cprjevNc3CAgDNFLcjknuNMcZ0GLJYa3EGTCR2xIkIUJDVneBV3O9OcIlCEZQ=="],
 
-    "@biomejs/cli-linux-x64": ["@biomejs/cli-linux-x64@2.1.3", "", { "os": "linux", "cpu": "x64" }, "sha512-NxlSCBhLvQtWGagEztfAZ4WcE1AkMTntZV65ZvR+J9jp06+EtOYEBPQndA70ZGhHbEDG57bR6uNvqkd1WrEYVA=="],
+    "@biomejs/cli-linux-x64": ["@biomejs/cli-linux-x64@2.2.0", "", { "os": "linux", "cpu": "x64" }, "sha512-5UmQx/OZAfJfi25zAnAGHUMuOd+LOsliIt119x2soA2gLggQYrVPA+2kMUxR6Mw5M1deUF/AWWP2qpxgH7Nyfw=="],
 
-    "@biomejs/cli-linux-x64-musl": ["@biomejs/cli-linux-x64-musl@2.1.3", "", { "os": "linux", "cpu": "x64" }, "sha512-KaLAxnROouzIWtl6a0Y88r/4hW5oDUJTIqQorOTVQITaKQsKjZX4XCUmHIhdEk8zMnaiLZzRTAwk1yIAl+mIew=="],
+    "@biomejs/cli-linux-x64-musl": ["@biomejs/cli-linux-x64-musl@2.2.0", "", { "os": "linux", "cpu": "x64" }, "sha512-I5J85yWwUWpgJyC1CcytNSGusu2p9HjDnOPAFG4Y515hwRD0jpR9sT9/T1cKHtuCvEQ/sBvx+6zhz9l9wEJGAg=="],
 
-    "@biomejs/cli-win32-arm64": ["@biomejs/cli-win32-arm64@2.1.3", "", { "os": "win32", "cpu": "arm64" }, "sha512-V9CUZCtWH4u0YwyCYbQ3W5F4ZGPWp2C2TYcsiWFNNyRfmOW1j/TY/jAurl33SaRjgZPO5UUhGyr9m6BN9t84NQ=="],
+    "@biomejs/cli-win32-arm64": ["@biomejs/cli-win32-arm64@2.2.0", "", { "os": "win32", "cpu": "arm64" }, "sha512-n9a1/f2CwIDmNMNkFs+JI0ZjFnMO0jdOyGNtihgUNFnlmd84yIYY2KMTBmMV58ZlVHjgmY5Y6E1hVTnSRieggA=="],
 
-    "@biomejs/cli-win32-x64": ["@biomejs/cli-win32-x64@2.1.3", "", { "os": "win32", "cpu": "x64" }, "sha512-dxy599q6lgp8ANPpR8sDMscwdp9oOumEsVXuVCVT9N2vAho8uYXlCz53JhxX6LtJOXaE73qzgkGQ7QqvFlMC0g=="],
+    "@biomejs/cli-win32-x64": ["@biomejs/cli-win32-x64@2.2.0", "", { "os": "win32", "cpu": "x64" }, "sha512-Nawu5nHjP/zPKTIryh2AavzTc/KEg4um/MxWdXW0A6P/RZOyIpa7+QSjeXwAwX/utJGaCoXRPWtF3m5U/bB3Ww=="],
 
     "@bottom-tabs/react-navigation": ["@bottom-tabs/react-navigation@0.9.2", "", { "dependencies": { "color": "^4.2.3" }, "peerDependencies": { "@react-navigation/native": ">=7", "react": "*", "react-native": "*", "react-native-bottom-tabs": "*" } }, "sha512-IZZKllcaqCGsKIgeXmYFGU95IXxbBpXtwKws4Lg2GJw/qqAYYsPFEl0JBvnymSD7G1zkHYEilg5UHuTd0NmX7A=="],
 
@@ -435,15 +436,15 @@
 
     "@jimp/utils": ["@jimp/utils@0.22.12", "", { "dependencies": { "regenerator-runtime": "^0.13.3" } }, "sha512-yJ5cWUknGnilBq97ZXOyOS0HhsHOyAyjHwYfHxGbSyMTohgQI6sVyE8KPgDwH8HHW/nMKXk8TrSwAE71zt716Q=="],
 
-    "@jridgewell/gen-mapping": ["@jridgewell/gen-mapping@0.3.12", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-OuLGC46TjB5BbN1dH8JULVVZY4WTdkF7tV9Ys6wLL1rubZnCMstOhNHueU5bLCrnRuDhKPDM4g6sw4Bel5Gzqg=="],
+    "@jridgewell/gen-mapping": ["@jridgewell/gen-mapping@0.3.13", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA=="],
 
     "@jridgewell/resolve-uri": ["@jridgewell/resolve-uri@3.1.2", "", {}, "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw=="],
 
-    "@jridgewell/source-map": ["@jridgewell/source-map@0.3.10", "", { "dependencies": { "@jridgewell/gen-mapping": "^0.3.5", "@jridgewell/trace-mapping": "^0.3.25" } }, "sha512-0pPkgz9dY+bijgistcTTJ5mR+ocqRXLuhXHYdzoMmmoJ2C9S46RCm2GMUbatPEUK9Yjy26IrAy8D/M00lLkv+Q=="],
+    "@jridgewell/source-map": ["@jridgewell/source-map@0.3.11", "", { "dependencies": { "@jridgewell/gen-mapping": "^0.3.5", "@jridgewell/trace-mapping": "^0.3.25" } }, "sha512-ZMp1V8ZFcPG5dIWnQLr3NSI1MiCU7UETdS/A0G8V/XWHvJv3ZsFqutJn1Y5RPmAPX6F3BiE397OqveU/9NCuIA=="],
 
-    "@jridgewell/sourcemap-codec": ["@jridgewell/sourcemap-codec@1.5.4", "", {}, "sha512-VT2+G1VQs/9oz078bLrYbecdZKs912zQlkelYpuf+SXF+QvZDYJlbx/LSx+meSAwdDFnF8FVXW92AVjjkVmgFw=="],
+    "@jridgewell/sourcemap-codec": ["@jridgewell/sourcemap-codec@1.5.5", "", {}, "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og=="],
 
-    "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.29", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-uw6guiW/gcAGPDhLmd77/6lW8QLeiV5RUTsAX46Db6oLhGaVj4lhnPwb184s1bkc8kdVg/+h988dro8GRDpmYQ=="],
+    "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.30", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-GQ7Nw5G2lTu/BtHTKfXhKHok2WGetd4XYcVKGx00SjAk8GMwgJM3zr6zORiPGuOE+/vkc90KtTosSSvaCjKb2Q=="],
 
     "@kesha-antonov/react-native-background-downloader": ["@kesha-antonov/react-native-background-downloader@3.2.6", "", { "peerDependencies": { "react-native": ">=0.57.0" } }, "sha512-J87PHzBh4knWTQNkCNM4LTMZ85RpMW/QSV+0LGdTxz4JmfLXoeg8R6ratbFU0DP/l8K1eL7r4S1Rc8bmqNJ3Ug=="],
 
@@ -455,7 +456,7 @@
 
     "@pkgjs/parseargs": ["@pkgjs/parseargs@0.11.0", "", {}, "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg=="],
 
-    "@radix-ui/primitive": ["@radix-ui/primitive@1.1.2", "", {}, "sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA=="],
+    "@radix-ui/primitive": ["@radix-ui/primitive@1.1.3", "", {}, "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg=="],
 
     "@radix-ui/react-arrow": ["@radix-ui/react-arrow@1.1.7", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w=="],
 
@@ -465,31 +466,31 @@
 
     "@radix-ui/react-context": ["@radix-ui/react-context@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA=="],
 
-    "@radix-ui/react-context-menu": ["@radix-ui/react-context-menu@2.2.15", "", { "dependencies": { "@radix-ui/primitive": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-menu": "2.1.15", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-UsQUMjcYTsBjTSXw0P3GO0werEQvUY2plgRQuKoCTtkNr45q1DiL51j4m7gxhABzZ0BadoXNsIbg7F3KwiUBbw=="],
+    "@radix-ui/react-context-menu": ["@radix-ui/react-context-menu@2.2.16", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-menu": "2.1.16", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-O8morBEW+HsVG28gYDZPTrT9UUovQUlJue5YO836tiTJhuIWBm/zQHc7j388sHWtdH/xUZurK9olD2+pcqx5ww=="],
 
     "@radix-ui/react-direction": ["@radix-ui/react-direction@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw=="],
 
-    "@radix-ui/react-dismissable-layer": ["@radix-ui/react-dismissable-layer@1.1.10", "", { "dependencies": { "@radix-ui/primitive": "1.1.2", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-escape-keydown": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-IM1zzRV4W3HtVgftdQiiOmA0AdJlCtMLe00FXaHwgt3rAnNsIyDqshvkIW3hj/iu5hu8ERP7KIYki6NkqDxAwQ=="],
+    "@radix-ui/react-dismissable-layer": ["@radix-ui/react-dismissable-layer@1.1.11", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-escape-keydown": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg=="],
 
-    "@radix-ui/react-dropdown-menu": ["@radix-ui/react-dropdown-menu@2.1.15", "", { "dependencies": { "@radix-ui/primitive": "1.1.2", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-menu": "2.1.15", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-mIBnOjgwo9AH3FyKaSWoSu/dYj6VdhJ7frEPiGTeXCdUFHjl9h3mFh2wwhEtINOmYXWhdpf1rY2minFsmaNgVQ=="],
+    "@radix-ui/react-dropdown-menu": ["@radix-ui/react-dropdown-menu@2.1.16", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-menu": "2.1.16", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-1PLGQEynI/3OX/ftV54COn+3Sud/Mn8vALg2rWnBLnRaGtJDduNW/22XjlGgPdpcIbiQxjKtb7BkcjP00nqfJw=="],
 
-    "@radix-ui/react-focus-guards": ["@radix-ui/react-focus-guards@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-fyjAACV62oPV925xFCrH8DR5xWhg9KYtJT4s3u54jxp+L/hbpTY2kIeEFFbFe+a/HCE94zGQMZLIpVTPVZDhaA=="],
+    "@radix-ui/react-focus-guards": ["@radix-ui/react-focus-guards@1.1.3", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw=="],
 
     "@radix-ui/react-focus-scope": ["@radix-ui/react-focus-scope@1.1.7", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw=="],
 
     "@radix-ui/react-id": ["@radix-ui/react-id@1.1.1", "", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg=="],
 
-    "@radix-ui/react-menu": ["@radix-ui/react-menu@2.1.15", "", { "dependencies": { "@radix-ui/primitive": "1.1.2", "@radix-ui/react-collection": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-dismissable-layer": "1.1.10", "@radix-ui/react-focus-guards": "1.1.2", "@radix-ui/react-focus-scope": "1.1.7", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-popper": "1.2.7", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-presence": "1.1.4", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-roving-focus": "1.1.10", "@radix-ui/react-slot": "1.2.3", "@radix-ui/react-use-callback-ref": "1.1.1", "aria-hidden": "^1.2.4", "react-remove-scroll": "^2.6.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-tVlmA3Vb9n8SZSd+YSbuFR66l87Wiy4du+YE+0hzKQEANA+7cWKH1WgqcEX4pXqxUFQKrWQGHdvEfw00TjFiew=="],
+    "@radix-ui/react-menu": ["@radix-ui/react-menu@2.1.16", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-collection": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-dismissable-layer": "1.1.11", "@radix-ui/react-focus-guards": "1.1.3", "@radix-ui/react-focus-scope": "1.1.7", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-popper": "1.2.8", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-roving-focus": "1.1.11", "@radix-ui/react-slot": "1.2.3", "@radix-ui/react-use-callback-ref": "1.1.1", "aria-hidden": "^1.2.4", "react-remove-scroll": "^2.6.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-72F2T+PLlphrqLcAotYPp0uJMr5SjP5SL01wfEspJbru5Zs5vQaSHb4VB3ZMJPimgHHCHG7gMOeOB9H3Hdmtxg=="],
 
-    "@radix-ui/react-popper": ["@radix-ui/react-popper@1.2.7", "", { "dependencies": { "@floating-ui/react-dom": "^2.0.0", "@radix-ui/react-arrow": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-layout-effect": "1.1.1", "@radix-ui/react-use-rect": "1.1.1", "@radix-ui/react-use-size": "1.1.1", "@radix-ui/rect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-IUFAccz1JyKcf/RjB552PlWwxjeCJB8/4KxT7EhBHOJM+mN7LdW+B3kacJXILm32xawcMMjb2i0cIZpo+f9kiQ=="],
+    "@radix-ui/react-popper": ["@radix-ui/react-popper@1.2.8", "", { "dependencies": { "@floating-ui/react-dom": "^2.0.0", "@radix-ui/react-arrow": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-layout-effect": "1.1.1", "@radix-ui/react-use-rect": "1.1.1", "@radix-ui/react-use-size": "1.1.1", "@radix-ui/rect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw=="],
 
     "@radix-ui/react-portal": ["@radix-ui/react-portal@1.1.9", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ=="],
 
-    "@radix-ui/react-presence": ["@radix-ui/react-presence@1.1.4", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-ueDqRbdc4/bkaQT3GIpLQssRlFgWaL/U2z/S31qRwwLWoxHLgry3SIfCwhxeQNbirEUXFa+lq3RL3oBYXtcmIA=="],
+    "@radix-ui/react-presence": ["@radix-ui/react-presence@1.1.5", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ=="],
 
     "@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
 
-    "@radix-ui/react-roving-focus": ["@radix-ui/react-roving-focus@1.1.10", "", { "dependencies": { "@radix-ui/primitive": "1.1.2", "@radix-ui/react-collection": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-dT9aOXUen9JSsxnMPv/0VqySQf5eDQ6LCk5Sw28kamz8wSOW2bJdlX2Bg5VUIIcV+6XlHpWTIuTPCf/UNIyq8Q=="],
+    "@radix-ui/react-roving-focus": ["@radix-ui/react-roving-focus@1.1.11", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-collection": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA=="],
 
     "@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.0", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-ujc+V6r0HNDviYqIK3rW4ffgYiZ8g5DEHrGJVk4x7kTlLXRDILnKX9vAUYeIsLOoDpDJ0ujpqMkjH4w2ofuo6w=="],
 
@@ -509,29 +510,29 @@
 
     "@radix-ui/rect": ["@radix-ui/rect@1.1.1", "", {}, "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw=="],
 
-    "@react-native-community/cli": ["@react-native-community/cli@19.1.1", "", { "dependencies": { "@react-native-community/cli-clean": "19.1.1", "@react-native-community/cli-config": "19.1.1", "@react-native-community/cli-doctor": "19.1.1", "@react-native-community/cli-server-api": "19.1.1", "@react-native-community/cli-tools": "19.1.1", "@react-native-community/cli-types": "19.1.1", "chalk": "^4.1.2", "commander": "^9.4.1", "deepmerge": "^4.3.0", "execa": "^5.0.0", "find-up": "^5.0.0", "fs-extra": "^8.1.0", "graceful-fs": "^4.1.3", "prompts": "^2.4.2", "semver": "^7.5.2" }, "bin": { "rnc-cli": "build/bin.js" } }, "sha512-H17sV83KPg2H2GCNuUSMM1ZM2sy6msVSmxrhJSycH8ua3i9Iixja8DeYtGIcJUzjdU/4U2eSDs6PjOSZUVn8CQ=="],
+    "@react-native-community/cli": ["@react-native-community/cli@20.0.0", "", { "dependencies": { "@react-native-community/cli-clean": "20.0.0", "@react-native-community/cli-config": "20.0.0", "@react-native-community/cli-doctor": "20.0.0", "@react-native-community/cli-server-api": "20.0.0", "@react-native-community/cli-tools": "20.0.0", "@react-native-community/cli-types": "20.0.0", "chalk": "^4.1.2", "commander": "^9.4.1", "deepmerge": "^4.3.0", "execa": "^5.0.0", "find-up": "^5.0.0", "fs-extra": "^8.1.0", "graceful-fs": "^4.1.3", "prompts": "^2.4.2", "semver": "^7.5.2" }, "bin": { "rnc-cli": "build/bin.js" } }, "sha512-/cMnGl5V1rqnbElY1Fvga1vfw0d3bnqiJLx2+2oh7l9ulnXfVRWb5tU2kgBqiMxuDOKA+DQoifC9q/tvkj5K2w=="],
 
-    "@react-native-community/cli-clean": ["@react-native-community/cli-clean@19.1.1", "", { "dependencies": { "@react-native-community/cli-tools": "19.1.1", "chalk": "^4.1.2", "execa": "^5.0.0", "fast-glob": "^3.3.2" } }, "sha512-pP7SmK+PNw5B1Aa2c6y06FBNc9iGah/leFFM2uewpyZRJQ4zycX6Zz1UANpq9YZfp65n7NZKV9Gct2uaVRuP/Q=="],
+    "@react-native-community/cli-clean": ["@react-native-community/cli-clean@20.0.0", "", { "dependencies": { "@react-native-community/cli-tools": "20.0.0", "chalk": "^4.1.2", "execa": "^5.0.0", "fast-glob": "^3.3.2" } }, "sha512-YmdNRcT+Dp8lC7CfxSDIfPMbVPEXVFzBH62VZNbYGxjyakqAvoQUFTYPgM2AyFusAr4wDFbDOsEv88gCDwR3ig=="],
 
-    "@react-native-community/cli-config": ["@react-native-community/cli-config@19.1.1", "", { "dependencies": { "@react-native-community/cli-tools": "19.1.1", "chalk": "^4.1.2", "cosmiconfig": "^9.0.0", "deepmerge": "^4.3.0", "fast-glob": "^3.3.2", "joi": "^17.2.1" } }, "sha512-qGLYCFf3whCa/we3iKd5BY4RlcAUhSykwGpnJpjseXLaI5iJzIn/IMd70EBG8QvhV/KQxM7VFMQj6KgGcoNKYg=="],
+    "@react-native-community/cli-config": ["@react-native-community/cli-config@20.0.0", "", { "dependencies": { "@react-native-community/cli-tools": "20.0.0", "chalk": "^4.1.2", "cosmiconfig": "^9.0.0", "deepmerge": "^4.3.0", "fast-glob": "^3.3.2", "joi": "^17.2.1" } }, "sha512-5Ky9ceYuDqG62VIIpbOmkg8Lybj2fUjf/5wK4UO107uRqejBgNgKsbGnIZgEhREcaSEOkujWrroJ9gweueLfBg=="],
 
-    "@react-native-community/cli-config-android": ["@react-native-community/cli-config-android@19.1.1", "", { "dependencies": { "@react-native-community/cli-tools": "19.1.1", "chalk": "^4.1.2", "fast-glob": "^3.3.2", "fast-xml-parser": "^4.4.1" } }, "sha512-uAUXU/BPuasBy7For5lvVEpxiwA29X5BWKjM4fgxWmsQhaZHW//6PNRep94w3WVnAp+CUbW6+o3SzFqMX0PdIw=="],
+    "@react-native-community/cli-config-android": ["@react-native-community/cli-config-android@20.0.0", "", { "dependencies": { "@react-native-community/cli-tools": "20.0.0", "chalk": "^4.1.2", "fast-glob": "^3.3.2", "fast-xml-parser": "^4.4.1" } }, "sha512-asv60qYCnL1v0QFWcG9r1zckeFlKG+14GGNyPXY72Eea7RX5Cxdx8Pb6fIPKroWH1HEWjYH9KKHksMSnf9FMKw=="],
 
-    "@react-native-community/cli-config-apple": ["@react-native-community/cli-config-apple@19.1.1", "", { "dependencies": { "@react-native-community/cli-tools": "19.1.1", "chalk": "^4.1.2", "execa": "^5.0.0", "fast-glob": "^3.3.2" } }, "sha512-dKS7pg5eAEgRB8sOWYpr6XCR/3xUcttHNsuYYbuMXfY9d0M3d0oGquuMOW/p3Ri9sJI16bRAs/YIXDF2m4gYIA=="],
+    "@react-native-community/cli-config-apple": ["@react-native-community/cli-config-apple@20.0.0", "", { "dependencies": { "@react-native-community/cli-tools": "20.0.0", "chalk": "^4.1.2", "execa": "^5.0.0", "fast-glob": "^3.3.2" } }, "sha512-PS1gNOdpeQ6w7dVu1zi++E+ix2D0ZkGC2SQP6Y/Qp002wG4se56esLXItYiiLrJkhH21P28fXdmYvTEkjSm9/Q=="],
 
-    "@react-native-community/cli-doctor": ["@react-native-community/cli-doctor@19.1.1", "", { "dependencies": { "@react-native-community/cli-config": "19.1.1", "@react-native-community/cli-platform-android": "19.1.1", "@react-native-community/cli-platform-apple": "19.1.1", "@react-native-community/cli-platform-ios": "19.1.1", "@react-native-community/cli-tools": "19.1.1", "chalk": "^4.1.2", "command-exists": "^1.2.8", "deepmerge": "^4.3.0", "envinfo": "^7.13.0", "execa": "^5.0.0", "node-stream-zip": "^1.9.1", "ora": "^5.4.1", "semver": "^7.5.2", "wcwidth": "^1.0.1", "yaml": "^2.2.1" } }, "sha512-P6JgTpa8fn6SfGiotyRhiCqBlRlKx8MUUdMESPGyPzvMb8omz+Jv0ibdNg9CVT11/0x5oRsoGv07os/o+Eg0zQ=="],
+    "@react-native-community/cli-doctor": ["@react-native-community/cli-doctor@20.0.0", "", { "dependencies": { "@react-native-community/cli-config": "20.0.0", "@react-native-community/cli-platform-android": "20.0.0", "@react-native-community/cli-platform-apple": "20.0.0", "@react-native-community/cli-platform-ios": "20.0.0", "@react-native-community/cli-tools": "20.0.0", "chalk": "^4.1.2", "command-exists": "^1.2.8", "deepmerge": "^4.3.0", "envinfo": "^7.13.0", "execa": "^5.0.0", "node-stream-zip": "^1.9.1", "ora": "^5.4.1", "semver": "^7.5.2", "wcwidth": "^1.0.1", "yaml": "^2.2.1" } }, "sha512-cPHspi59+Fy41FDVxt62ZWoicCZ1o34k8LAl64NVSY0lwPl+CEi78jipXJhtfkVqSTetloA8zexa/vSAcJy57Q=="],
 
-    "@react-native-community/cli-platform-android": ["@react-native-community/cli-platform-android@19.1.1", "", { "dependencies": { "@react-native-community/cli-config-android": "19.1.1", "@react-native-community/cli-tools": "19.1.1", "chalk": "^4.1.2", "execa": "^5.0.0", "logkitty": "^0.7.1" } }, "sha512-omEAcIYz22Lxi/WjYHkNaUMEKV+o60PL3DJE6Wz3c4bkuDfxICJ8JcPawT4fDMsBX7DYwnYf6/Lk/leqQmHzOw=="],
+    "@react-native-community/cli-platform-android": ["@react-native-community/cli-platform-android@20.0.0", "", { "dependencies": { "@react-native-community/cli-config-android": "20.0.0", "@react-native-community/cli-tools": "20.0.0", "chalk": "^4.1.2", "execa": "^5.0.0", "logkitty": "^0.7.1" } }, "sha512-th3ji1GRcV6ACelgC0wJtt9daDZ+63/52KTwL39xXGoqczFjml4qERK90/ppcXU0Ilgq55ANF8Pr+UotQ2AB/A=="],
 
-    "@react-native-community/cli-platform-apple": ["@react-native-community/cli-platform-apple@19.1.1", "", { "dependencies": { "@react-native-community/cli-config-apple": "19.1.1", "@react-native-community/cli-tools": "19.1.1", "chalk": "^4.1.2", "execa": "^5.0.0", "fast-xml-parser": "^4.4.1" } }, "sha512-nsJ/TlQ97Lcmz5dVZVSwYYQzJmK6q/9X31VTAFhUf94ShugF3zXjaNnOJieKYDJlXy4G0EnrEulX1gTt29ebyw=="],
+    "@react-native-community/cli-platform-apple": ["@react-native-community/cli-platform-apple@20.0.0", "", { "dependencies": { "@react-native-community/cli-config-apple": "20.0.0", "@react-native-community/cli-tools": "20.0.0", "chalk": "^4.1.2", "execa": "^5.0.0", "fast-xml-parser": "^4.4.1" } }, "sha512-rZZCnAjUHN1XBgiWTAMwEKpbVTO4IHBSecdd1VxJFeTZ7WjmstqA6L/HXcnueBgxrzTCRqvkRIyEQXxC1OfhGw=="],
 
-    "@react-native-community/cli-platform-ios": ["@react-native-community/cli-platform-ios@19.1.1", "", { "dependencies": { "@react-native-community/cli-platform-apple": "19.1.1" } }, "sha512-QHw/eBszq+62xUBorVqjgDYsVrZ5JAYJZkc6UKO327LnVn10OUB/bPGA/FzDWZdGB77pt0IalNP8nxyGOytMfg=="],
+    "@react-native-community/cli-platform-ios": ["@react-native-community/cli-platform-ios@20.0.0", "", { "dependencies": { "@react-native-community/cli-platform-apple": "20.0.0" } }, "sha512-Z35M+4gUJgtS4WqgpKU9/XYur70nmj3Q65c9USyTq6v/7YJ4VmBkmhC9BticPs6wuQ9Jcv0NyVCY0Wmh6kMMYw=="],
 
-    "@react-native-community/cli-server-api": ["@react-native-community/cli-server-api@19.1.1", "", { "dependencies": { "@react-native-community/cli-tools": "19.1.1", "body-parser": "^1.20.3", "compression": "^1.7.1", "connect": "^3.6.5", "errorhandler": "^1.5.1", "nocache": "^3.0.1", "open": "^6.2.0", "pretty-format": "^26.6.2", "serve-static": "^1.13.1", "ws": "^6.2.3" } }, "sha512-p0FFm82uPrtLZBWTD3bZ43mMBIV5mXwvGFYMcsfGiuMoS9SNbw4ImEFTG2IutVpr7Qb6NMjx6SbgYYMnTdZXmw=="],
+    "@react-native-community/cli-server-api": ["@react-native-community/cli-server-api@20.0.0", "", { "dependencies": { "@react-native-community/cli-tools": "20.0.0", "body-parser": "^1.20.3", "compression": "^1.7.1", "connect": "^3.6.5", "errorhandler": "^1.5.1", "nocache": "^3.0.1", "open": "^6.2.0", "pretty-format": "^29.7.0", "serve-static": "^1.13.1", "ws": "^6.2.3" } }, "sha512-Ves21bXtjUK3tQbtqw/NdzpMW1vR2HvYCkUQ/MXKrJcPjgJnXQpSnTqHXz6ZdBlMbbwLJXOhSPiYzxb5/v4CDg=="],
 
-    "@react-native-community/cli-tools": ["@react-native-community/cli-tools@19.1.1", "", { "dependencies": { "@vscode/sudo-prompt": "^9.0.0", "appdirsjs": "^1.2.4", "chalk": "^4.1.2", "execa": "^5.0.0", "find-up": "^5.0.0", "launch-editor": "^2.9.1", "mime": "^2.4.1", "ora": "^5.4.1", "prompts": "^2.4.2", "semver": "^7.5.2" } }, "sha512-0yWOdrfgO7jVtYzhNcm9hTA1hqrD6haqDaesFq4d3YCmh8lkkTb61Q/kNIKQCUfaCTR/Qcc4mdwy6ObdXRoTIQ=="],
+    "@react-native-community/cli-tools": ["@react-native-community/cli-tools@20.0.0", "", { "dependencies": { "@vscode/sudo-prompt": "^9.0.0", "appdirsjs": "^1.2.4", "chalk": "^4.1.2", "execa": "^5.0.0", "find-up": "^5.0.0", "launch-editor": "^2.9.1", "mime": "^2.4.1", "ora": "^5.4.1", "prompts": "^2.4.2", "semver": "^7.5.2" } }, "sha512-akSZGxr1IajJ8n0YCwQoA3DI0HttJ0WB7M3nVpb0lOM+rJpsBN7WG5Ft+8ozb6HyIPX+O+lLeYazxn5VNG/Xhw=="],
 
-    "@react-native-community/cli-types": ["@react-native-community/cli-types@19.1.1", "", { "dependencies": { "joi": "^17.2.1" } }, "sha512-rOGiYjeDM9tkYBEuK6TJrnxpMhmaId1Un8pjQJswz7W9w2Vb6+nnLfWja7X7VmDIvqIK5GhVobRHsmKCKIdDEA=="],
+    "@react-native-community/cli-types": ["@react-native-community/cli-types@20.0.0", "", { "dependencies": { "joi": "^17.2.1" } }, "sha512-7J4hzGWOPTBV1d30Pf2NidV+bfCWpjfCOiGO3HUhz1fH4MvBM0FbbBmE9LE5NnMz7M8XSRSi68ZGYQXgLBB2Qw=="],
 
     "@react-native-community/netinfo": ["@react-native-community/netinfo@11.4.1", "", { "peerDependencies": { "react-native": ">=0.59" } }, "sha512-B0BYAkghz3Q2V09BF88RA601XursIEA111tnc2JOaN7axJWmNefmfjZqw/KdSxKZp7CZUuPpjBmz/WCR9uaHYg=="],
 
@@ -561,17 +562,17 @@
 
     "@react-native/normalize-colors": ["@react-native/normalize-colors@0.79.5", "", {}, "sha512-nGXMNMclZgzLUxijQQ38Dm3IAEhgxuySAWQHnljFtfB0JdaMwpe0Ox9H7Tp2OgrEA+EMEv+Od9ElKlHwGKmmvQ=="],
 
-    "@react-navigation/bottom-tabs": ["@react-navigation/bottom-tabs@7.4.4", "", { "dependencies": { "@react-navigation/elements": "^2.6.1", "color": "^4.2.3" }, "peerDependencies": { "@react-navigation/native": "^7.1.16", "react": ">= 18.2.0", "react-native": "*", "react-native-safe-area-context": ">= 4.0.0", "react-native-screens": ">= 4.0.0" } }, "sha512-/YEBu/cZUgYAaNoSfUnqoRjpbt8NOsb5YvDiKVyTcOOAF1GTbUw6kRi+AGW1Sm16CqzabO/TF2RvN1RmPS9VHg=="],
+    "@react-navigation/bottom-tabs": ["@react-navigation/bottom-tabs@7.4.6", "", { "dependencies": { "@react-navigation/elements": "^2.6.3", "color": "^4.2.3" }, "peerDependencies": { "@react-navigation/native": "^7.1.17", "react": ">= 18.2.0", "react-native": "*", "react-native-safe-area-context": ">= 4.0.0", "react-native-screens": ">= 4.0.0" } }, "sha512-f4khxwcL70O5aKfZFbxyBo5RnzPFnBNSXmrrT7q9CRmvN4mHov9KFKGQ3H4xD5sLonsTBtyjvyvPfyEC4G7f+g=="],
 
-    "@react-navigation/core": ["@react-navigation/core@7.12.3", "", { "dependencies": { "@react-navigation/routers": "^7.5.1", "escape-string-regexp": "^4.0.0", "nanoid": "^3.3.11", "query-string": "^7.1.3", "react-is": "^19.1.0", "use-latest-callback": "^0.2.4", "use-sync-external-store": "^1.5.0" }, "peerDependencies": { "react": ">= 18.2.0" } }, "sha512-oEz5sL8KTYmCv8SQX1A4k75A7VzYadOCudp/ewOBqRXOmZdxDQA9JuN7baE9IVyaRW0QTVDy+N/Wnqx9F4aW6A=="],
+    "@react-navigation/core": ["@react-navigation/core@7.12.4", "", { "dependencies": { "@react-navigation/routers": "^7.5.1", "escape-string-regexp": "^4.0.0", "nanoid": "^3.3.11", "query-string": "^7.1.3", "react-is": "^19.1.0", "use-latest-callback": "^0.2.4", "use-sync-external-store": "^1.5.0" }, "peerDependencies": { "react": ">= 18.2.0" } }, "sha512-xLFho76FA7v500XID5z/8YfGTvjQPw7/fXsq4BIrVSqetNe/o/v+KAocEw4ots6kyv3XvSTyiWKh2g3pN6xZ9Q=="],
 
-    "@react-navigation/elements": ["@react-navigation/elements@2.6.1", "", { "dependencies": { "color": "^4.2.3", "use-latest-callback": "^0.2.4", "use-sync-external-store": "^1.5.0" }, "peerDependencies": { "@react-native-masked-view/masked-view": ">= 0.2.0", "@react-navigation/native": "^7.1.16", "react": ">= 18.2.0", "react-native": "*", "react-native-safe-area-context": ">= 4.0.0" }, "optionalPeers": ["@react-native-masked-view/masked-view"] }, "sha512-kVbIo+5FaqJv6MiYUR6nQHiw+10dmmH/P10C29wrH9S6fr7k69fImHGeiOI/h7SMDJ2vjWhftyEjqYO+c2LG/w=="],
+    "@react-navigation/elements": ["@react-navigation/elements@2.6.3", "", { "dependencies": { "color": "^4.2.3", "use-latest-callback": "^0.2.4", "use-sync-external-store": "^1.5.0" }, "peerDependencies": { "@react-native-masked-view/masked-view": ">= 0.2.0", "@react-navigation/native": "^7.1.17", "react": ">= 18.2.0", "react-native": "*", "react-native-safe-area-context": ">= 4.0.0" }, "optionalPeers": ["@react-native-masked-view/masked-view"] }, "sha512-hcPXssZg5bFD5oKX7FP0D9ZXinRgPUHkUJbTegpenSEUJcPooH1qzWJkEP22GrtO+OPDLYrCVZxEX8FcMrn4pA=="],
 
-    "@react-navigation/material-top-tabs": ["@react-navigation/material-top-tabs@7.3.4", "", { "dependencies": { "@react-navigation/elements": "^2.6.1", "color": "^4.2.3", "react-native-tab-view": "^4.1.2" }, "peerDependencies": { "@react-navigation/native": "^7.1.16", "react": ">= 18.2.0", "react-native": "*", "react-native-pager-view": ">= 6.0.0", "react-native-safe-area-context": ">= 4.0.0" } }, "sha512-sHBiIszq6FumBu8TboN+nVyWxgwbAER6UYULllbN87dDgnUtf+BucUYRAa+2pWeZBA2Q1esYl6VFj6pEFk2how=="],
+    "@react-navigation/material-top-tabs": ["@react-navigation/material-top-tabs@7.3.6", "", { "dependencies": { "@react-navigation/elements": "^2.6.3", "color": "^4.2.3", "react-native-tab-view": "^4.1.3" }, "peerDependencies": { "@react-navigation/native": "^7.1.17", "react": ">= 18.2.0", "react-native": "*", "react-native-pager-view": ">= 6.0.0", "react-native-safe-area-context": ">= 4.0.0" } }, "sha512-94r6euJ0VFnJ6Ixp4BWO9sTQjuh7dq6nEBirMRLqVZXMVZS6nsB2olw7cA8vWjQCXIM3nLNIa2t/hIzRH2yR6Q=="],
 
-    "@react-navigation/native": ["@react-navigation/native@7.1.16", "", { "dependencies": { "@react-navigation/core": "^7.12.3", "escape-string-regexp": "^4.0.0", "fast-deep-equal": "^3.1.3", "nanoid": "^3.3.11", "use-latest-callback": "^0.2.4" }, "peerDependencies": { "react": ">= 18.2.0", "react-native": "*" } }, "sha512-JnnK81JYJ6PiMsuBEshPGHwfagRnH8W7SYdWNrPxQdNtakkHtG4u0O9FmrOnKiPl45DaftCcH1g+OVTFFgWa0Q=="],
+    "@react-navigation/native": ["@react-navigation/native@7.1.17", "", { "dependencies": { "@react-navigation/core": "^7.12.4", "escape-string-regexp": "^4.0.0", "fast-deep-equal": "^3.1.3", "nanoid": "^3.3.11", "use-latest-callback": "^0.2.4" }, "peerDependencies": { "react": ">= 18.2.0", "react-native": "*" } }, "sha512-uEcYWi1NV+2Qe1oELfp9b5hTYekqWATv2cuwcOAg5EvsIsUPtzFrKIasgUXLBRGb9P7yR5ifoJ+ug4u6jdqSTQ=="],
 
-    "@react-navigation/native-stack": ["@react-navigation/native-stack@7.3.23", "", { "dependencies": { "@react-navigation/elements": "^2.6.1", "warn-once": "^0.1.1" }, "peerDependencies": { "@react-navigation/native": "^7.1.16", "react": ">= 18.2.0", "react-native": "*", "react-native-safe-area-context": ">= 4.0.0", "react-native-screens": ">= 4.0.0" } }, "sha512-WQBBnPrlM0vXj5YAFnJTyrkiCyANl2KnBV8ZmUG61HkqXFwuBbnHij6eoggXH1VZkEVRxW8k0E3qqfPtEZfUjQ=="],
+    "@react-navigation/native-stack": ["@react-navigation/native-stack@7.3.25", "", { "dependencies": { "@react-navigation/elements": "^2.6.3", "warn-once": "^0.1.1" }, "peerDependencies": { "@react-navigation/native": "^7.1.17", "react": ">= 18.2.0", "react-native": "*", "react-native-safe-area-context": ">= 4.0.0", "react-native-screens": ">= 4.0.0" } }, "sha512-jGcgUpif0dDGwuqag6rKTdS78MiAVAy8vmQppyaAgjS05VbCfDX+xjhc8dUxSClO5CoWlDoby1c8Hw4kBfL2UA=="],
 
     "@react-navigation/routers": ["@react-navigation/routers@7.5.1", "", { "dependencies": { "nanoid": "^3.3.11" } }, "sha512-pxipMW/iEBSUrjxz2cDD7fNwkqR4xoi0E/PcfTQGCcdJwLoaxzab5kSadBLj1MTJyT0YRrOXL9umHpXtp+Dv4w=="],
 
@@ -589,9 +590,9 @@
 
     "@sinonjs/fake-timers": ["@sinonjs/fake-timers@10.3.0", "", { "dependencies": { "@sinonjs/commons": "^3.0.0" } }, "sha512-V4BG07kuYSUkTCSBHG8G8TNhM+F19jXFWnQtzj+we8DrkpSBCee9Z3Ms8yiGer/dlmhe35/Xdgyo3/0rQKg7YA=="],
 
-    "@tanstack/query-core": ["@tanstack/query-core@5.83.1", "", {}, "sha512-OG69LQgT7jSp+5pPuCfzltq/+7l2xoweggjme9vlbCPa/d7D7zaqv5vN/S82SzSYZ4EDLTxNO1PWrv49RAS64Q=="],
+    "@tanstack/query-core": ["@tanstack/query-core@5.85.3", "", {}, "sha512-9Ne4USX83nHmRuEYs78LW+3lFEEO2hBDHu7mrdIgAFx5Zcrs7ker3n/i8p4kf6OgKExmaDN5oR0efRD7i2J0DQ=="],
 
-    "@tanstack/react-query": ["@tanstack/react-query@5.84.0", "", { "dependencies": { "@tanstack/query-core": "5.83.1" }, "peerDependencies": { "react": "^18 || ^19" } }, "sha512-iPycFGLq5lltDE16Jf13Nx7SOvtfoopfOH/+Ahbdd+z4QqOfYu/SOkY86AVYVcKjneuqPxTm8e85lSGhwe0cog=="],
+    "@tanstack/react-query": ["@tanstack/react-query@5.85.3", "", { "dependencies": { "@tanstack/query-core": "5.85.3" }, "peerDependencies": { "react": "^18 || ^19" } }, "sha512-AqU8TvNh5GVIE8I+TUU0noryBRy7gOY0XhSayVXmOPll4UkZeLWKDwi0rtWOZbwLRCbyxorfJ5DIjDqE7GXpcQ=="],
 
     "@tokenizer/token": ["@tokenizer/token@0.3.0", "", {}, "sha512-OvjF+z51L3ov0OyAU0duzsYuvO01PH7x4t6DJx+guahgTnBHkhJdG7soQeTSFLWN3efnHyibZ4Z8l2EuWwJN3A=="],
 
@@ -621,7 +622,7 @@
 
     "@types/lodash": ["@types/lodash@4.17.20", "", {}, "sha512-H3MHACvFUEiujabxhaI/ImO6gUrd8oOurg7LQtS7mbwIXA/cUqWrvBsaeJ23aZEPk1TAYkurjfMbSELfoCXlGA=="],
 
-    "@types/node": ["@types/node@24.1.0", "", { "dependencies": { "undici-types": "~7.8.0" } }, "sha512-ut5FthK5moxFKH2T1CUOC6ctR67rQRvvHdFLCD2Ql6KXmMuCrjsSsRI9UsLCm9M18BMwClv4pn327UvB7eeO1w=="],
+    "@types/node": ["@types/node@24.2.1", "", { "dependencies": { "undici-types": "~7.10.0" } }, "sha512-DRh5K+ka5eJic8CjH7td8QpYEV6Zo10gfRkjHCO3weqZHWDtAaSTFtl4+VMqOJ4N5jcuhZ9/l+yy8rVgw7BQeQ=="],
 
     "@types/react": ["@types/react@19.0.14", "", { "dependencies": { "csstype": "^3.0.2" } }, "sha512-ixLZ7zG7j1fM0DijL9hDArwhwcCb4vqmePgwtV0GfnkHRSCUEv4LvzarcTdhoqgyMznUx/EhoTUv31CKZzkQlw=="],
 
@@ -767,7 +768,7 @@
 
     "braces": ["braces@3.0.3", "", { "dependencies": { "fill-range": "^7.1.1" } }, "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA=="],
 
-    "browserslist": ["browserslist@4.25.1", "", { "dependencies": { "caniuse-lite": "^1.0.30001726", "electron-to-chromium": "^1.5.173", "node-releases": "^2.0.19", "update-browserslist-db": "^1.1.3" }, "bin": { "browserslist": "cli.js" } }, "sha512-KGj0KoOMXLpSNkkEI6Z6mShmQy0bc1I+T7K9N81k4WWMrfz+6fQ6es80B/YLAeRoKvjYE1YSHHOW1qe9xIVzHw=="],
+    "browserslist": ["browserslist@4.25.2", "", { "dependencies": { "caniuse-lite": "^1.0.30001733", "electron-to-chromium": "^1.5.199", "node-releases": "^2.0.19", "update-browserslist-db": "^1.1.3" }, "bin": { "browserslist": "cli.js" } }, "sha512-0si2SJK3ooGzIawRu61ZdPCO1IncZwS8IzuX73sPZsXW6EQ/w/DAfPyKI8l1ETTCr2MnvqWitmlCUxgdul45jA=="],
 
     "bser": ["bser@2.1.1", "", { "dependencies": { "node-int64": "^0.4.0" } }, "sha512-gQxTNE/GAfIIrmHLUE3oJyp5FO6HRBfhjnw4/wMmA63ZGDJnWBmgY/lyQBpnDUkGmAhbSe39tx2d/iTOAfglwQ=="],
 
@@ -795,7 +796,7 @@
 
     "camelize": ["camelize@1.0.1", "", {}, "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ=="],
 
-    "caniuse-lite": ["caniuse-lite@1.0.30001731", "", {}, "sha512-lDdp2/wrOmTRWuoB5DpfNkC0rJDU8DqRa6nYL6HK6sytw70QMopt/NIc/9SM7ylItlBWfACXk0tEn37UWM/+mg=="],
+    "caniuse-lite": ["caniuse-lite@1.0.30001735", "", {}, "sha512-EV/laoX7Wq2J9TQlyIXRxTJqIw4sxfXS4OYgudGxBYRuTv0q7AM6yMEpU/Vo1I94thg9U6EZ2NfZx9GJq83u7w=="],
 
     "chalk": ["chalk@4.1.2", "", { "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" } }, "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA=="],
 
@@ -849,7 +850,7 @@
 
     "convert-source-map": ["convert-source-map@2.0.0", "", {}, "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg=="],
 
-    "core-js-compat": ["core-js-compat@3.44.0", "", { "dependencies": { "browserslist": "^4.25.1" } }, "sha512-JepmAj2zfl6ogy34qfWtcE7nHKAJnKsQFRn++scjVS2bZFllwptzw61BZcZFYBPpUznLfAvh0LGhxKppk04ClA=="],
+    "core-js-compat": ["core-js-compat@3.45.0", "", { "dependencies": { "browserslist": "^4.25.1" } }, "sha512-gRoVMBawZg0OnxaVv3zpqLLxaHmsubEGyTnqdpI/CEBvX4JadI1dMSHxagThprYRtSVbuQxvi6iUatdPxohHpA=="],
 
     "cosmiconfig": ["cosmiconfig@9.0.0", "", { "dependencies": { "env-paths": "^2.2.1", "import-fresh": "^3.3.0", "js-yaml": "^4.1.0", "parse-json": "^5.2.0" }, "peerDependencies": { "typescript": ">=4.9.5" }, "optionalPeers": ["typescript"] }, "sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg=="],
 
@@ -933,7 +934,7 @@
 
     "ee-first": ["ee-first@1.1.1", "", {}, "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="],
 
-    "electron-to-chromium": ["electron-to-chromium@1.5.194", "", {}, "sha512-SdnWJwSUot04UR51I2oPD8kuP2VI37/CADR1OHsFOUzZIvfWJBO6q11k5P/uKNyTT3cdOsnyjkrZ+DDShqYqJA=="],
+    "electron-to-chromium": ["electron-to-chromium@1.5.200", "", {}, "sha512-rFCxROw7aOe4uPTfIAx+rXv9cEcGx+buAF4npnhtTqCJk5KDFRnh3+KYj7rdVh6lsFt5/aPs+Irj9rZ33WMA7w=="],
 
     "emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="],
 
@@ -1175,7 +1176,7 @@
 
     "hyphenate-style-name": ["hyphenate-style-name@1.1.0", "", {}, "sha512-WDC/ui2VVRrz3jOVi+XtjqkDjiVjTtFaAGiW37k6b+ohyQ5wYDOGkvCZa8+H0nx3gyvv0+BST9xuOgIyGQ00gw=="],
 
-    "i18next": ["i18next@25.3.2", "", { "dependencies": { "@babel/runtime": "^7.27.6" }, "peerDependencies": { "typescript": "^5" }, "optionalPeers": ["typescript"] }, "sha512-JSnbZDxRVbphc5jiptxr3o2zocy5dEqpVm9qCGdJwRNO+9saUJS0/u4LnM/13C23fUEWxAylPqKU/NpMV/IjqA=="],
+    "i18next": ["i18next@25.3.6", "", { "dependencies": { "@babel/runtime": "^7.27.6" }, "peerDependencies": { "typescript": "^5" }, "optionalPeers": ["typescript"] }, "sha512-dThZ0CTCM3sUG/qS0ZtQYZQcUI6DtBN8yBHK+SKEqihPcEYmjVWh/YJ4luic73Iq6Uxhp6q7LJJntRK5+1t7jQ=="],
 
     "iconv-lite": ["iconv-lite@0.4.24", "", { "dependencies": { "safer-buffer": ">= 2.1.2 < 3" } }, "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA=="],
 
@@ -1277,7 +1278,7 @@
 
     "joi": ["joi@17.13.3", "", { "dependencies": { "@hapi/hoek": "^9.3.0", "@hapi/topo": "^5.1.0", "@sideway/address": "^4.1.5", "@sideway/formula": "^3.0.1", "@sideway/pinpoint": "^2.0.0" } }, "sha512-otDA4ldcIx+ZXsKHWmp0YizCweVRZG96J10b0FevjfuncLO1oX59THoAmHkNubYJ+9gWsYsp5k8v4ib6oDv1fA=="],
 
-    "jotai": ["jotai@2.12.5", "", { "peerDependencies": { "@types/react": ">=17.0.0", "react": ">=17.0.0" }, "optionalPeers": ["@types/react", "react"] }, "sha512-G8m32HW3lSmcz/4mbqx0hgJIQ0ekndKWiYP7kWVKi0p6saLXdSoye+FZiOFyonnd7Q482LCzm8sMDl7Ar1NWDw=="],
+    "jotai": ["jotai@2.13.1", "", { "peerDependencies": { "@babel/core": ">=7.0.0", "@babel/template": ">=7.0.0", "@types/react": ">=17.0.0", "react": ">=17.0.0" }, "optionalPeers": ["@babel/core", "@babel/template", "@types/react", "react"] }, "sha512-cRsw6kFeGC9Z/D3egVKrTXRweycZ4z/k7i2MrfCzPYsL9SIWcPXTyqv258/+Ay8VUEcihNiE/coBLE6Kic6b8A=="],
 
     "jpeg-js": ["jpeg-js@0.4.4", "", {}, "sha512-WZzeDOEtTOBK4Mdsar0IqEU5sMr3vSV2RqkAIzUEV2BHnUfKGyswWFPFwK5EeDo93K3FohSHbLAjj0s1Wzd+dg=="],
 
@@ -1303,7 +1304,7 @@
 
     "lan-network": ["lan-network@0.1.7", "", { "bin": { "lan-network": "dist/lan-network-cli.js" } }, "sha512-mnIlAEMu4OyEvUNdzco9xpuB9YVcPkQec+QsgycBCtPZvEqWPCDPfbAE4OJMdBBWpZWtpCn1xw9jJYlwjWI5zQ=="],
 
-    "launch-editor": ["launch-editor@2.11.0", "", { "dependencies": { "picocolors": "^1.1.1", "shell-quote": "^1.8.3" } }, "sha512-R/PIF14L6e2eHkhvQPu7jDRCr0msfCYCxbYiLgkkAGi0dVPWuM+RrsPu0a5dpuNe0KWGL3jpAkOlv53xGfPheQ=="],
+    "launch-editor": ["launch-editor@2.11.1", "", { "dependencies": { "picocolors": "^1.1.1", "shell-quote": "^1.8.3" } }, "sha512-SEET7oNfgSaB6Ym0jufAdCeo3meJVeCaaDyzRygy0xsp2BFKCprcfHljTq4QkzTLUxEKkFK6OK4811YM2oSrRg=="],
 
     "leven": ["leven@3.1.0", "", {}, "sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A=="],
 
@@ -1335,9 +1336,9 @@
 
     "lines-and-columns": ["lines-and-columns@1.2.4", "", {}, "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="],
 
-    "lint-staged": ["lint-staged@16.1.2", "", { "dependencies": { "chalk": "^5.4.1", "commander": "^14.0.0", "debug": "^4.4.1", "lilconfig": "^3.1.3", "listr2": "^8.3.3", "micromatch": "^4.0.8", "nano-spawn": "^1.0.2", "pidtree": "^0.6.0", "string-argv": "^0.3.2", "yaml": "^2.8.0" }, "bin": { "lint-staged": "bin/lint-staged.js" } }, "sha512-sQKw2Si2g9KUZNY3XNvRuDq4UJqpHwF0/FQzZR2M7I5MvtpWvibikCjUVJzZdGE0ByurEl3KQNvsGetd1ty1/Q=="],
+    "lint-staged": ["lint-staged@16.1.5", "", { "dependencies": { "chalk": "^5.5.0", "commander": "^14.0.0", "debug": "^4.4.1", "lilconfig": "^3.1.3", "listr2": "^9.0.1", "micromatch": "^4.0.8", "nano-spawn": "^1.0.2", "pidtree": "^0.6.0", "string-argv": "^0.3.2", "yaml": "^2.8.1" }, "bin": { "lint-staged": "bin/lint-staged.js" } }, "sha512-uAeQQwByI6dfV7wpt/gVqg+jAPaSp8WwOA8kKC/dv1qw14oGpnpAisY65ibGHUGDUv0rYaZ8CAJZ/1U8hUvC2A=="],
 
-    "listr2": ["listr2@8.3.3", "", { "dependencies": { "cli-truncate": "^4.0.0", "colorette": "^2.0.20", "eventemitter3": "^5.0.1", "log-update": "^6.1.0", "rfdc": "^1.4.1", "wrap-ansi": "^9.0.0" } }, "sha512-LWzX2KsqcB1wqQ4AHgYb4RsDXauQiqhjLk+6hjbaeHG4zpjjVAB6wC/gz6X0l+Du1cN3pUB5ZlrvTbhGSNnUQQ=="],
+    "listr2": ["listr2@9.0.1", "", { "dependencies": { "cli-truncate": "^4.0.0", "colorette": "^2.0.20", "eventemitter3": "^5.0.1", "log-update": "^6.1.0", "rfdc": "^1.4.1", "wrap-ansi": "^9.0.0" } }, "sha512-SL0JY3DaxylDuo/MecFeiC+7pedM0zia33zl0vcjgwcq1q1FWWF1To9EIauPbl8GbMCU0R2e0uJ8bZunhYKD2g=="],
 
     "locate-path": ["locate-path@6.0.0", "", { "dependencies": { "p-locate": "^5.0.0" } }, "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw=="],
 
@@ -1631,7 +1632,7 @@
 
     "react-native-image-colors": ["react-native-image-colors@2.5.0", "", { "dependencies": { "node-vibrant": "^4.0.3" }, "peerDependencies": { "expo": "*", "react": "*", "react-native": "*" } }, "sha512-3zSDgNj5HaZ0PDWaXkc4BpWpZRM5N4gBsoPC7DBfM/+op69Yvwbc0S1T7CnxBWbvShtOvRE+b2BUBadVn+6z/g=="],
 
-    "react-native-ios-context-menu": ["react-native-ios-context-menu@3.1.2", "", { "dependencies": { "@dominicstop/ts-event-emitter": "^1.1.0" }, "peerDependencies": { "react": "*", "react-native": "*", "react-native-ios-utilities": "*" } }, "sha512-xmwdygAlmEofBzQvIhJd5qa+2DzPznmWuwkkqkI9NJbe+cfOmIzbvLdVD5RkiayewnCX9Mp8v/muf3BRWq/T1A=="],
+    "react-native-ios-context-menu": ["react-native-ios-context-menu@3.1.3", "", { "dependencies": { "@dominicstop/ts-event-emitter": "^1.1.0" }, "peerDependencies": { "react": "*", "react-native": "*", "react-native-ios-utilities": "*" } }, "sha512-p65JTOxL0D8TOgTgq3A7nVhr/hQuRTtlmsH/aQ7vaOgxY4Na/QVcEF9s4wHc7y+Rcmv84bi6V6DhqxGkFFLPmA=="],
 
     "react-native-ios-utilities": ["react-native-ios-utilities@5.1.8", "", { "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-2lWerAkd0Kn18kUAc/RaBzHnOGG1VjbKVfTR4eEXvwYFYqCS709gOg0tGUaVLsm6CAyMe7/jA+AvKMMztzHf4g=="],
 
@@ -1639,7 +1640,7 @@
 
     "react-native-mmkv": ["react-native-mmkv@2.12.2", "", { "peerDependencies": { "react": "*", "react-native": ">=0.71.0" } }, "sha512-6058Aq0p57chPrUutLGe9fYoiDVDNMU2PKV+lLFUJ3GhoHvUrLdsS1PDSCLr00yqzL4WJQ7TTzH+V8cpyrNcfg=="],
 
-    "react-native-pager-view": ["react-native-pager-view@6.8.1", "", { "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-XIyVEMhwq7sZqM7GobOJZXxFCfdFgVNq/CFB2rZIRNRSVPJqE1k1fsc8xfQKfdzsp6Rpt6I7VOIvhmP7/YHdVg=="],
+    "react-native-pager-view": ["react-native-pager-view@6.9.1", "", { "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-uUT0MMMbNtoSbxe9pRvdJJKEi9snjuJ3fXlZhG8F2vVMOBJVt/AFtqMPUHu9yMflmqOr08PewKzj9EPl/Yj+Gw=="],
 
     "react-native-reanimated": ["react-native-reanimated@3.16.7", "", { "dependencies": { "@babel/plugin-transform-arrow-functions": "^7.0.0-0", "@babel/plugin-transform-class-properties": "^7.0.0-0", "@babel/plugin-transform-classes": "^7.0.0-0", "@babel/plugin-transform-nullish-coalescing-operator": "^7.0.0-0", "@babel/plugin-transform-optional-chaining": "^7.0.0-0", "@babel/plugin-transform-shorthand-properties": "^7.0.0-0", "@babel/plugin-transform-template-literals": "^7.0.0-0", "@babel/plugin-transform-unicode-regex": "^7.0.0-0", "@babel/preset-typescript": "^7.16.7", "convert-source-map": "^2.0.0", "invariant": "^2.2.4" }, "peerDependencies": { "@babel/core": "^7.0.0-0", "react": "*", "react-native": "*" } }, "sha512-qoUUQOwE1pHlmQ9cXTJ2MX9FQ9eHllopCLiWOkDkp6CER95ZWeXhJCP4cSm6AD4jigL5jHcZf/SkWrg8ttZUsw=="],
 
@@ -1651,7 +1652,7 @@
 
     "react-native-svg": ["react-native-svg@15.11.2", "", { "dependencies": { "css-select": "^5.1.0", "css-tree": "^1.1.3", "warn-once": "0.1.1" }, "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-+YfF72IbWQUKzCIydlijV1fLuBsQNGMT6Da2kFlo1sh+LE3BIm/2Q7AR1zAAR6L0BFLi1WaQPLfFUC9bNZpOmw=="],
 
-    "react-native-tab-view": ["react-native-tab-view@4.1.2", "", { "dependencies": { "use-latest-callback": "^0.2.4" }, "peerDependencies": { "react": ">= 18.2.0", "react-native": "*", "react-native-pager-view": ">= 6.0.0" } }, "sha512-uzC1hxZGNXeQay8rSjCc7egnoYGHRpB/Y1tAwK5/nnZwrziKry7T6+gNscZgoq88+7Aag/JeNOifdWMZyRclOA=="],
+    "react-native-tab-view": ["react-native-tab-view@4.1.3", "", { "dependencies": { "use-latest-callback": "^0.2.4" }, "peerDependencies": { "react": ">= 18.2.0", "react-native": "*", "react-native-pager-view": ">= 6.0.0" } }, "sha512-COj2HBeM4IqKCAadUdZAUWrFyO8++wlgObsgOt6xrwqdEnu9HX/74uesC0MGlgwIalFffXqTh5F3CC3pUjFPug=="],
 
     "react-native-udp": ["react-native-udp@4.1.7", "", { "dependencies": { "buffer": "^5.6.0", "events": "^3.1.0" } }, "sha512-NUE3zewu61NCdSsLlj+l0ad6qojcVEZPT4hVG/x6DU9U4iCzwtfZSASh9vm7teAcVzLkdD+cO3411LHshAi/wA=="],
 
@@ -1895,7 +1896,7 @@
 
     "undici": ["undici@6.21.3", "", {}, "sha512-gBLkYIlEnSp8pFbT64yFgGE6UIB9tAkhukC23PmMDCe5Nd+cRqKxSjw5y54MK2AZMgZfJWMaNE4nYUHgi1XEOw=="],
 
-    "undici-types": ["undici-types@7.8.0", "", {}, "sha512-9UJ2xGDvQ43tYyVMpuHlsgApydB8ZKfVYTsLDhXkFL/6gfkp+U8xTGdh8pMJv1SpZna0zxG1DwsKZsreLbXBxw=="],
+    "undici-types": ["undici-types@7.10.0", "", {}, "sha512-t5Fy/nfn+14LuOc2KNYg75vZqClpAiqscVvMygNnlsHBFpSXdJaYtXMcdNLpl/Qvc3P2cB3s6lOV51nqsFq4ag=="],
 
     "unicode-canonical-property-names-ecmascript": ["unicode-canonical-property-names-ecmascript@2.0.1", "", {}, "sha512-dA8WbNeb2a6oQzAQ55YlT5vQAWGV9WXOsi3SskE3bcCdM0P4SDd+24zS/OCacdRq5BkdsRj9q3Pg6YyQoxIGqg=="],
 
@@ -1987,7 +1988,7 @@
 
     "yallist": ["yallist@3.1.1", "", {}, "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="],
 
-    "yaml": ["yaml@2.8.0", "", { "bin": { "yaml": "bin.mjs" } }, "sha512-4lLa/EcQCB0cJkyts+FpIRx5G/llPxfP6VQU5KByHEhLxY3IJCH0f0Hy1MHI8sClTvsIb8qwRJ6R/ZdlDJ/leQ=="],
+    "yaml": ["yaml@2.8.1", "", { "bin": { "yaml": "bin.mjs" } }, "sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw=="],
 
     "yargs": ["yargs@17.7.2", "", { "dependencies": { "cliui": "^8.0.1", "escalade": "^3.1.1", "get-caller-file": "^2.0.5", "require-directory": "^2.1.1", "string-width": "^4.2.3", "y18n": "^5.0.5", "yargs-parser": "^21.1.1" } }, "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w=="],
 
@@ -1999,8 +2000,6 @@
 
     "zod": ["zod@3.25.76", "", {}, "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ=="],
 
-    "@babel/helper-module-imports/@babel/types": ["@babel/types@7.19.0", "", { "dependencies": { "@babel/helper-string-parser": "^7.18.10", "@babel/helper-validator-identifier": "^7.18.6", "to-fast-properties": "^2.0.0" } }, "sha512-YuGopBq3ke25BVSiS6fgF49Ul9gH1x70Bcr6bqRLjWCkcX8Hre1/5+z+IiWOIerRMSSEfGZVB9z9kyq7wVs9YA=="],
-
     "@babel/helper-module-transforms/@babel/helper-module-imports": ["@babel/helper-module-imports@7.27.1", "", { "dependencies": { "@babel/traverse": "^7.27.1", "@babel/types": "^7.27.1" } }, "sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w=="],
 
     "@babel/highlight/chalk": ["chalk@2.4.2", "", { "dependencies": { "ansi-styles": "^3.2.1", "escape-string-regexp": "^1.0.5", "supports-color": "^5.3.0" } }, "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ=="],
@@ -2081,8 +2080,6 @@
 
     "@react-native-community/cli-doctor/semver": ["semver@7.7.2", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA=="],
 
-    "@react-native-community/cli-server-api/pretty-format": ["pretty-format@26.6.2", "", { "dependencies": { "@jest/types": "^26.6.2", "ansi-regex": "^5.0.0", "ansi-styles": "^4.0.0", "react-is": "^17.0.1" } }, "sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg=="],
-
     "@react-native-community/cli-tools/semver": ["semver@7.7.2", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA=="],
 
     "@react-native/codegen/glob": ["glob@7.2.3", "", { "dependencies": { "fs.realpath": "^1.0.0", "inflight": "^1.0.4", "inherits": "2", "minimatch": "^3.1.1", "once": "^1.3.0", "path-is-absolute": "^1.0.0" } }, "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q=="],
@@ -2167,7 +2164,7 @@
 
     "lighthouse-logger/debug": ["debug@2.6.9", "", { "dependencies": { "ms": "2.0.0" } }, "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA=="],
 
-    "lint-staged/chalk": ["chalk@5.4.1", "", {}, "sha512-zgVZuo2WcZgfUEmsn6eO3kINexW8RAE4maiQ8QNs8CtpPCSyMiYsULR3HQYkm3w8FIA3SberyMJMSldGsW+U3w=="],
+    "lint-staged/chalk": ["chalk@5.5.0", "", {}, "sha512-1tm8DTaJhPBG3bIkVeZt1iZM9GfSX2lzOeDVZH9R9ffRHpmHvxZ/QhgQH/aDTkswQVt+YHdXAdS/In/30OjCbg=="],
 
     "lint-staged/commander": ["commander@14.0.0", "", {}, "sha512-2uM9rYjPvyq39NwLRqaiLtWHyDC1FvryJDa2ATTVims5YAS4PupsEQsDvP14FqhFr0P49CYDugi59xaxJlTXRA=="],
 
@@ -2193,7 +2190,7 @@
 
     "nativewind/react-is": ["react-is@18.3.1", "", {}, "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="],
 
-    "node-vibrant/@types/node": ["@types/node@18.19.121", "", { "dependencies": { "undici-types": "~5.26.4" } }, "sha512-bHOrbyztmyYIi4f1R0s17QsPs1uyyYnGcXeZoGEd227oZjry0q6XQBQxd82X1I57zEfwO8h9Xo+Kl5gX1d9MwQ=="],
+    "node-vibrant/@types/node": ["@types/node@18.19.122", "", { "dependencies": { "undici-types": "~5.26.4" } }, "sha512-yzegtT82dwTNEe/9y+CM8cgb42WrUfMMCg2QqSddzO1J6uPmBD7qKCZ7dOHZP2Yrpm/kb0eqdNMn2MUyEiqBmA=="],
 
     "npm-package-arg/semver": ["semver@7.7.2", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA=="],
 
@@ -2305,10 +2302,6 @@
 
     "@istanbuljs/load-nyc-config/js-yaml/argparse": ["argparse@1.0.10", "", { "dependencies": { "sprintf-js": "~1.0.2" } }, "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg=="],
 
-    "@react-native-community/cli-server-api/pretty-format/@jest/types": ["@jest/types@26.6.2", "", { "dependencies": { "@types/istanbul-lib-coverage": "^2.0.0", "@types/istanbul-reports": "^3.0.0", "@types/node": "*", "@types/yargs": "^15.0.0", "chalk": "^4.0.0" } }, "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ=="],
-
-    "@react-native-community/cli-server-api/pretty-format/react-is": ["react-is@17.0.2", "", {}, "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="],
-
     "@react-native/codegen/glob/minimatch": ["minimatch@3.1.2", "", { "dependencies": { "brace-expansion": "^1.1.7" } }, "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw=="],
 
     "@react-native/community-cli-plugin/debug/ms": ["ms@2.0.0", "", {}, "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="],
@@ -2415,8 +2408,6 @@
 
     "@istanbuljs/load-nyc-config/find-up/locate-path/p-locate": ["p-locate@4.1.0", "", { "dependencies": { "p-limit": "^2.2.0" } }, "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A=="],
 
-    "@react-native-community/cli-server-api/pretty-format/@jest/types/@types/yargs": ["@types/yargs@15.0.19", "", { "dependencies": { "@types/yargs-parser": "*" } }, "sha512-2XUaGVmyQjgyAZldf0D0c14vvo/yv0MhQBSTJcejMMaitsn3nxCB6TmH4G0ZQf+uxROOa9mpanoSm8h6SG/1ZA=="],
-
     "@react-native/codegen/glob/minimatch/brace-expansion": ["brace-expansion@1.1.12", "", { "dependencies": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" } }, "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg=="],
 
     "ansi-fragments/slice-ansi/ansi-styles/color-convert": ["color-convert@1.9.3", "", { "dependencies": { "color-name": "1.1.3" } }, "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg=="],

components/ContinueWatchingPoster.tsx

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

@@ -9,21 +9,20 @@ import type {
   BaseItemDto,
   MediaSourceInfo,
 } from "@jellyfin/sdk/lib/generated-client/models";
-import { type Href, router, useFocusEffect } from "expo-router";
+import { type Href, router } from "expo-router";
 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 { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Alert, Platform, Switch, View, type ViewProps } from "react-native";
 import { toast } from "sonner-native";
+import useDefaultPlaySettings from "@/hooks/useDefaultPlaySettings";
 import { useDownload } from "@/providers/DownloadProvider";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { queueAtom } from "@/utils/atoms/queue";
-import { DownloadMethod, useSettings } from "@/utils/atoms/settings";
+import { 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 { getDownloadUrl } from "@/utils/jellyfin/media/getDownloadUrl";
 import { AudioTrackSelector } from "./AudioTrackSelector";
 import { type Bitrate, BitrateSelector } from "./BitrateSelector";
 import { Button } from "./Button";
@@ -34,6 +33,13 @@ import ProgressCircle from "./ProgressCircle";
 import { RoundButton } from "./RoundButton";
 import { SubtitleTrackSelector } from "./SubtitleTrackSelector";
 
+export type SelectedOptions = {
+  bitrate: Bitrate;
+  mediaSource: MediaSourceInfo | undefined;
+  audioIndex: number | undefined;
+  subtitleIndex: number;
+};
+
 interface DownloadProps extends ViewProps {
   items: BaseItemDto[];
   MissingDownloadIconComponent: () => React.ReactElement;
@@ -54,33 +60,29 @@ 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 { processes, startBackgroundDownload, getDownloadedItems } =
+    useDownload();
+  const downloadedFiles = getDownloadedItems();
 
-  const [selectedMediaSource, setSelectedMediaSource] = useState<
-    MediaSourceInfo | undefined | null
+  const [selectedOptions, setSelectedOptions] = useState<
+    SelectedOptions | undefined
   >(undefined);
-  const [selectedAudioStream, setSelectedAudioStream] = useState<number>(-1);
-  const [selectedSubtitleStream, setSelectedSubtitleStream] =
-    useState<number>(0);
-  const [maxBitrate, setMaxBitrate] = useState<Bitrate>(
-    settings?.defaultBitrate ?? {
-      key: "Max",
-      value: undefined,
-    },
-  );
+
+  const {
+    defaultAudioIndex,
+    defaultBitrate,
+    defaultMediaSource,
+    defaultSubtitleIndex,
+  } = useDefaultPlaySettings(items[0], settings);
 
   const userCanDownload = useMemo(
     () => user?.Policy?.EnableContentDownloading,
     [user],
   );
-  const usingOptimizedServer = useMemo(
-    () => settings?.downloadMethod === DownloadMethod.Optimized,
-    [settings],
-  );
 
   const bottomSheetModalRef = useRef<BottomSheetModal>(null);
 
@@ -102,6 +104,28 @@ export const DownloadItems: React.FC<DownloadProps> = ({
     [items, downloadedFiles],
   );
 
+  // Initialize selectedOptions with default values
+  useEffect(() => {
+    setSelectedOptions(() => ({
+      bitrate: defaultBitrate,
+      mediaSource: defaultMediaSource,
+      subtitleIndex: defaultSubtitleIndex ?? -1,
+      audioIndex: defaultAudioIndex,
+    }));
+  }, [
+    defaultAudioIndex,
+    defaultBitrate,
+    defaultSubtitleIndex,
+    defaultMediaSource,
+  ]);
+
+  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;
@@ -144,99 +168,98 @@ export const DownloadItems: React.FC<DownloadProps> = ({
     );
   };
 
-  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 (
         !api ||
         !user?.Id ||
         items.some((p) => !p.Id) ||
-        (itemsNotDownloaded.length === 1 && !selectedMediaSource?.Id)
+        (itemsNotDownloaded.length === 1 && !selectedOptions?.mediaSource?.Id)
       ) {
         throw new Error(
           "DownloadItem ~ initiateDownload: No api or user or item",
         );
       }
-      let mediaSource = selectedMediaSource;
-      let audioIndex: number | undefined = selectedAudioStream;
-      let subtitleIndex: number | undefined = selectedSubtitleStream;
+      const downloadDetailsPromises = items.map(async (item) => {
+        const { mediaSource, audioIndex, subtitleIndex } =
+          itemsNotDownloaded.length > 1
+            ? getDefaultPlaySettings(item, settings!)
+            : {
+                mediaSource: selectedOptions?.mediaSource,
+                audioIndex: selectedOptions?.audioIndex,
+                subtitleIndex: selectedOptions?.subtitleIndex,
+              };
 
-      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: selectedOptions?.bitrate || defaultBitrate,
+          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,
+          selectedOptions?.bitrate || defaultBitrate,
+        );
       }
     },
     [
       api,
       user?.Id,
       itemsNotDownloaded,
-      selectedMediaSource,
-      selectedAudioStream,
-      selectedSubtitleStream,
+      selectedOptions,
       settings,
-      maxBitrate,
-      usingOptimizedServer,
+      defaultBitrate,
       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
@@ -247,19 +270,6 @@ export const DownloadItems: React.FC<DownloadProps> = ({
     ),
     [],
   );
-  useFocusEffect(
-    useCallback(() => {
-      if (!settings) return;
-      if (itemsNotDownloaded.length !== 1) return;
-      const { bitrate, mediaSource, audioIndex, subtitleIndex } =
-        getDefaultPlaySettings(items[0], settings);
-
-      setSelectedMediaSource(mediaSource ?? undefined);
-      setSelectedAudioStream(audioIndex ?? 0);
-      setSelectedSubtitleStream(subtitleIndex ?? -1);
-      setMaxBitrate(bitrate);
-    }, [items, itemsNotDownloaded, settings]),
-  );
 
   const renderButtonContent = () => {
     if (processes.length > 0 && itemsProcesses.length > 0) {
@@ -327,40 +337,78 @@ 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>
             <View className='flex flex-col space-y-2 w-full items-start'>
               <BitrateSelector
                 inverted
-                onChange={setMaxBitrate}
-                selected={maxBitrate}
+                onChange={(val) =>
+                  setSelectedOptions(
+                    (prev) => prev && { ...prev, bitrate: val },
+                  )
+                }
+                selected={selectedOptions?.bitrate}
               />
+              {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 && (
-                <>
+                <View>
                   <MediaSourceSelector
                     item={items[0]}
-                    onChange={setSelectedMediaSource}
-                    selected={selectedMediaSource}
+                    onChange={(val) =>
+                      setSelectedOptions(
+                        (prev) =>
+                          prev && {
+                            ...prev,
+                            mediaSource: val,
+                          },
+                      )
+                    }
+                    selected={selectedOptions?.mediaSource}
                   />
-                  {selectedMediaSource && (
+                  {selectedOptions?.mediaSource && (
                     <View className='flex flex-col space-y-2'>
                       <AudioTrackSelector
-                        source={selectedMediaSource}
-                        onChange={setSelectedAudioStream}
-                        selected={selectedAudioStream}
+                        source={selectedOptions.mediaSource}
+                        onChange={(val) => {
+                          setSelectedOptions(
+                            (prev) =>
+                              prev && {
+                                ...prev,
+                                audioIndex: val,
+                              },
+                          );
+                        }}
+                        selected={selectedOptions.audioIndex}
                       />
                       <SubtitleTrackSelector
-                        source={selectedMediaSource}
-                        onChange={setSelectedSubtitleStream}
-                        selected={selectedSubtitleStream}
+                        source={selectedOptions.mediaSource}
+                        onChange={(val) => {
+                          setSelectedOptions(
+                            (prev) =>
+                              prev && {
+                                ...prev,
+                                subtitleIndex: val,
+                              },
+                          );
+                        }}
+                        selected={selectedOptions.subtitleIndex}
                       />
                     </View>
                   )}
-                </>
+                </View>
               )}
             </View>
+
             <Button
               className='mt-auto'
               onPress={acceptDownloadOptions}
@@ -368,13 +416,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

@@ -45,8 +45,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,7 +73,16 @@ 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(() => {
@@ -116,22 +130,15 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
     }, [item, navigation, 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 }),
-      [api, item],
-    );
-
-    const loading = useMemo(() => {
-      return Boolean(logoUrl && loadingLogo);
-    }, [loadingLogo, logoUrl]);
-
-    if (!selectedOptions) return <View />;
+    if (!item || !selectedOptions) return null;
 
     return (
       <View
@@ -179,8 +186,8 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
         >
           <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 && (
+              <ItemHeader item={item} className='mb-2' />
+              {item.Type !== "Program" && !Platform.isTV && !isOffline && (
                 <View className='flex flex-row items-center justify-start w-full h-16'>
                   <BitrateSelector
                     className='mr-1'
@@ -239,25 +246,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
@@ -270,7 +286,7 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
                   </View>
                 )}
 
-                <SimilarItems itemId={item.Id} />
+                {!isOffline && <SimilarItems itemId={item.Id} />}
               </>
             )}
           </View>

components/ItemHeader.tsx

@@ -33,16 +33,16 @@ export const ItemHeader: React.FC<Props> = ({ item, ...props }) => {
           <ItemActions item={item} />
         </View>
         {item.Type === "Episode" && (
-          <>
+          <View>
             <EpisodeTitleHeader item={item} />
             <GenreTags genres={item.Genres!} />
-          </>
+          </View>
         )}
         {item.Type === "Movie" && (
-          <>
+          <View>
             <MoviesTitleHeader item={item} />
             <GenreTags genres={item.Genres!} />
-          </>
+          </View>
         )}
       </View>
     </View>

components/ItemTechnicalDetails.tsx

@@ -236,6 +236,7 @@ const formatFileSize = (bytes?: number | null) => {
   if (bytes === 0) return "0 Byte";
   const i = Number.parseInt(
     Math.floor(Math.log(bytes) / Math.log(1024)).toString(),
+    10,
   );
   return `${Math.round((bytes / 1024 ** i) * 100) / 100} ${sizes[i]}`;
 };

components/MediaSourceSelector.tsx

@@ -2,7 +2,7 @@ import type {
   BaseItemDto,
   MediaSourceInfo,
 } from "@jellyfin/sdk/lib/generated-client/models";
-import { useMemo } from "react";
+import { useCallback, useMemo } from "react";
 import { Platform, TouchableOpacity, View } from "react-native";
 
 const DropdownMenu = !Platform.isTV ? require("zeego/dropdown-menu") : null;
@@ -24,36 +24,27 @@ export const MediaSourceSelector: React.FC<Props> = ({
 }) => {
   const isTv = Platform.isTV;
 
-  const selectedName = useMemo(
-    () =>
-      item.MediaSources?.find((x) => x.Id === selected?.Id)?.MediaStreams?.find(
-        (x) => x.Type === "Video",
-      )?.DisplayTitle || "",
-    [item, selected],
-  );
-
   const { t } = useTranslation();
 
-  const commonPrefix = useMemo(() => {
-    const mediaSources = item.MediaSources || [];
-    if (!mediaSources.length) return "";
-
-    let commonPrefix = "";
-    for (let i = 0; i < mediaSources[0].Name!.length; i++) {
-      const char = mediaSources[0].Name![i];
-      if (mediaSources.every((source) => source.Name![i] === char)) {
-        commonPrefix += char;
-      } else {
-        commonPrefix = commonPrefix.slice(0, -1);
-        break;
-      }
+  const getDisplayName = useCallback((source: MediaSourceInfo) => {
+    const videoStream = source.MediaStreams?.find((x) => x.Type === "Video");
+    if (videoStream?.DisplayTitle) {
+      return videoStream.DisplayTitle;
     }
-    return commonPrefix;
-  }, [item.MediaSources]);
 
-  const name = (name?: string | null) => {
-    return name?.replace(commonPrefix, "").toLowerCase();
-  };
+    // Fallback to source name
+    if (source.Name) {
+      return source.Name;
+    }
+
+    // Last resort fallback
+    return `Source ${source.Id}`;
+  }, []);
+
+  const selectedName = useMemo(() => {
+    if (!selected) return "";
+    return getDisplayName(selected);
+  }, [selected, getDisplayName]);
 
   if (isTv) return null;
 
@@ -93,7 +84,7 @@ export const MediaSourceSelector: React.FC<Props> = ({
               }}
             >
               <DropdownMenu.ItemTitle>
-                {`${name(source.Name)}`}
+                {getDisplayName(source)}
               </DropdownMenu.ItemTitle>
             </DropdownMenu.Item>
           ))}

components/PlayButton.tsx

@@ -38,6 +38,7 @@ import type { SelectedOptions } from "./ItemContent";
 interface Props extends React.ComponentProps<typeof Button> {
   item: BaseItemDto;
   selectedOptions: SelectedOptions;
+  isOffline?: boolean;
 }
 
 const ANIMATION_DURATION = 500;
@@ -46,6 +47,7 @@ const MIN_PLAYBACK_WIDTH = 15;
 export const PlayButton: React.FC<Props> = ({
   item,
   selectedOptions,
+  isOffline,
   ...props
 }: Props) => {
   const { showActionSheetWithOptions } = useActionSheet();
@@ -75,7 +77,7 @@ export const PlayButton: React.FC<Props> = ({
       }
       router.push(`/player/direct-player?${q}`);
     },
-    [router],
+    [router, isOffline],
   );
 
   const onPress = useCallback(async () => {
@@ -90,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,5 +1,4 @@
 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";
@@ -7,44 +6,13 @@ 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"],
-    });
-  };
-
   const allPlayed = items.every((item) => item.UserData?.Played);
-
-  const markAsPlayedStatus = useMarkAsPlayed(items);
+  const toggle = useMarkAsPlayed(items);
 
   return (
     <View {...props}>
@@ -52,8 +20,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

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

components/common/HorrizontalScroll.tsx

@@ -1,5 +1,5 @@
 import { FlashList, type FlashListProps } from "@shopify/flash-list";
-import React, { forwardRef, useImperativeHandle, useRef } from "react";
+import React, { useImperativeHandle, useRef } from "react";
 import { View, type ViewStyle } from "react-native";
 import { Text } from "./Text";
 
@@ -19,64 +19,59 @@ interface HorizontalScrollProps<T>
   keyExtractor?: (item: T, index: number) => string;
   containerStyle?: ViewStyle;
   contentContainerStyle?: ViewStyle;
-  loadingContainerStyle?: ViewStyle;
   height?: number;
   loading?: boolean;
   extraData?: any;
   noItemsText?: string;
 }
 
-export const HorizontalScroll = forwardRef<
-  HorizontalScrollRef,
-  HorizontalScrollProps<any>
->(
-  <T,>(
-    {
-      data = [],
-      keyExtractor,
-      renderItem,
-      containerStyle,
-      contentContainerStyle,
-      loadingContainerStyle,
-      loading = false,
-      height = 164,
-      extraData,
-      noItemsText,
-      ...props
-    }: HorizontalScrollProps<T>,
-    ref: React.ForwardedRef<HorizontalScrollRef>,
-  ) => {
-    const flashListRef = useRef<FlashList<T>>(null);
+export const HorizontalScroll = <T,>(
+  props: HorizontalScrollProps<T> & {
+    ref?: React.ForwardedRef<HorizontalScrollRef>;
+  },
+) => {
+  const {
+    data = [],
+    keyExtractor,
+    renderItem,
+    containerStyle,
+    contentContainerStyle,
+    loading = false,
+    height = 164,
+    extraData,
+    noItemsText,
+    ref,
+    ...restProps
+  } = props;
 
-    useImperativeHandle(ref!, () => ({
-      scrollToIndex: (index: number, viewOffset: number) => {
-        flashListRef.current?.scrollToIndex({
-          index,
-          animated: true,
-          viewPosition: 0,
-          viewOffset,
-        });
-      },
-    }));
+  const flashListRef = useRef<FlashList<T>>(null);
 
-    const renderFlashListItem = ({
-      item,
-      index,
-    }: {
-      item: T;
-      index: number;
-    }) => <View className='mr-2'>{renderItem(item, index)}</View>;
+  useImperativeHandle(ref!, () => ({
+    scrollToIndex: (index: number, viewOffset: number) => {
+      flashListRef.current?.scrollToIndex({
+        index,
+        animated: true,
+        viewPosition: 0,
+        viewOffset,
+      });
+    },
+  }));
 
-    if (!data || loading) {
-      return (
-        <View className='px-4 mb-2'>
-          <View className='bg-neutral-950 h-24 w-full rounded-md mb-2' />
-          <View className='bg-neutral-950 h-10 w-full rounded-md mb-1' />
-        </View>
-      );
-    }
+  const renderFlashListItem = ({ item, index }: { item: T; index: number }) => (
+    <View className='mr-2'>{renderItem(item, index)}</View>
+  );
 
+  if (!data || loading) {
     return (
+      <View className='px-4 mb-2'>
+        <View className='bg-neutral-950 h-24 w-full rounded-md mb-2' />
+        <View className='bg-neutral-950 h-10 w-full rounded-md mb-1' />
+      </View>
+    );
+  }
+
+  return (
+    <View style={[{ height }, containerStyle]}>
       <FlashList<T>
         ref={flashListRef}
         data={data}
@@ -97,8 +92,8 @@ export const HorizontalScroll = forwardRef<
             </Text>
           </View>
         )}
-        {...props}
+        {...restProps}
       />
-    );
-  },
-);
+    </View>
+  );
+};

components/common/JellyseerrItemRouter.tsx

@@ -66,7 +66,7 @@ export const TouchableJellyseerrRouter: React.FC<PropsWithChildren<Props>> = ({
             onPress={() => {
               if (!result) return;
 
-              // @ts-ignore
+              // @ts-expect-error
               router.push({
                 pathname: `/(auth)/(tabs)/${from}/jellyseerr/page`,
                 params: {

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

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

@@ -6,7 +6,6 @@ import { t } from "i18next";
 import { useMemo } from "react";
 import {
   ActivityIndicator,
-  Platform,
   TouchableOpacity,
   type TouchableOpacityProps,
   View,
@@ -15,18 +14,17 @@ import {
 import { toast } from "sonner-native";
 import { Text } from "@/components/common/Text";
 import { useDownload } from "@/providers/DownloadProvider";
-import { DownloadMethod, useSettings } from "@/utils/atoms/settings";
+import { JobStatus } from "@/providers/Downloads/types";
 import { storage } from "@/utils/mmkv";
-import type { JobStatus } from "@/utils/optimize-server";
 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 {}
 
+const bytesToMB = (bytes: number) => {
+  return bytes / 1024 / 1024;
+};
+
 export const ActiveDownloads: React.FC<Props> = ({ ...props }) => {
   const { processes } = useDownload();
   if (processes?.length === 0)
@@ -60,32 +58,18 @@ interface DownloadCardProps extends TouchableOpacityProps {
 }
 
 const DownloadCard = ({ process, ...props }: DownloadCardProps) => {
-  const { startDownload } = useDownload();
+  const { startDownload, removeProcess } = useDownload();
   const router = useRouter();
-  const { removeProcess } = 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);
@@ -94,11 +78,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(() => {
@@ -111,8 +98,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
@@ -152,8 +138,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'>
@@ -169,7 +157,7 @@ const DownloadCard = ({ process, ...props }: DownloadCardProps) => {
           <TouchableOpacity
             disabled={cancelJobMutation.isPending}
             onPress={() => cancelJobMutation.mutate(process.id)}
-            className='ml-auto'
+            className='ml-auto p-2 rounded-full'
           >
             {cancelJobMutation.isPending ? (
               <ActivityIndicator size='small' color='white' />

components/downloads/DownloadSize.tsx

@@ -13,7 +13,8 @@ export const DownloadSize: React.FC<DownloadSizeProps> = ({
   items,
   ...props
 }) => {
-  const { downloadedFiles, getDownloadedItemSize } = useDownload();
+  const { getDownloadedItemSize, getDownloadedItems } = useDownload();
+  const downloadedFiles = getDownloadedItems();
   const [size, setSize] = useState<string | undefined>();
 
   const itemIds = useMemo(() => items.map((i) => i.Id), [items]);

components/downloads/EpisodeCard.tsx

@@ -4,18 +4,13 @@ import {
 } from "@expo/react-native-action-sheet";
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 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 { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
 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 ContinueWatchingPoster from "../ContinueWatchingPoster";
 
@@ -25,24 +20,15 @@ interface EpisodeCardProps extends TouchableOpacityProps {
 
 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]);
@@ -73,10 +59,10 @@ export const EpisodeCard: React.FC<EpisodeCardProps> = ({ item }) => {
   }, [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'>
@@ -100,7 +86,7 @@ export const EpisodeCard: React.FC<EpisodeCardProps> = ({ item }) => {
       <Text numberOfLines={3} className='text-xs text-neutral-500 shrink'>
         {item.Overview}
       </Text>
-    </TouchableOpacity>
+    </TouchableItemRouter>
   );
 };
 

components/downloads/MovieCard.tsx

@@ -7,12 +7,12 @@ 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 { useHaptic } from "@/hooks/useHaptic";
 import { useDownload } from "@/providers/DownloadProvider";
 import { storage } from "@/utils/mmkv";
+import { ProgressBar } from "../common/ProgressBar";
+import { TouchableItemRouter } from "../common/TouchableItemRouter";
 import { ItemCardText } from "../ItemCardText";
 
 interface MovieCardProps {
@@ -26,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!);
   }, []);
 
   /**
@@ -43,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]);
 
@@ -74,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}`,
@@ -87,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/Favorites.tsx

@@ -9,7 +9,7 @@ import { Image, Text, View } from "react-native";
 import heart from "@/assets/icons/heart.fill.png";
 import { Colors } from "@/constants/Colors";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { ScrollingCollectionList } from "./ScrollingCollectionList";
+import { InfiniteScrollingCollectionList } from "./InfiniteScrollingCollectionList";
 
 type FavoriteTypes =
   | "Series"
@@ -33,7 +33,11 @@ export const Favorites = () => {
   });
 
   const fetchFavoritesByType = useCallback(
-    async (itemType: BaseItemKind) => {
+    async (
+      itemType: BaseItemKind,
+      startIndex: number = 0,
+      limit: number = 20,
+    ) => {
       const response = await getItemsApi(api as Api).getItems({
         userId: user?.Id,
         sortBy: ["SeriesSortName", "SortName"],
@@ -44,16 +48,19 @@ export const Favorites = () => {
         collapseBoxSetItems: false,
         excludeLocationTypes: ["Virtual"],
         enableTotalRecordCount: false,
-        limit: 20,
+        startIndex: startIndex,
+        limit: limit,
         includeItemTypes: [itemType],
       });
       const items = response.data.Items || [];
 
-      // Update empty state for this specific type
-      setEmptyState((prev) => ({
-        ...prev,
-        [itemType as FavoriteTypes]: items.length === 0,
-      }));
+      // Update empty state for this specific type only for the first page
+      if (startIndex === 0) {
+        setEmptyState((prev) => ({
+          ...prev,
+          [itemType as FavoriteTypes]: items.length === 0,
+        }));
+      }
 
       return items;
     },
@@ -82,27 +89,33 @@ export const Favorites = () => {
   };
 
   const fetchFavoriteSeries = useCallback(
-    () => fetchFavoritesByType("Series"),
+    ({ pageParam }: { pageParam: number }) =>
+      fetchFavoritesByType("Series", pageParam),
     [fetchFavoritesByType],
   );
   const fetchFavoriteMovies = useCallback(
-    () => fetchFavoritesByType("Movie"),
+    ({ pageParam }: { pageParam: number }) =>
+      fetchFavoritesByType("Movie", pageParam),
     [fetchFavoritesByType],
   );
   const fetchFavoriteEpisodes = useCallback(
-    () => fetchFavoritesByType("Episode"),
+    ({ pageParam }: { pageParam: number }) =>
+      fetchFavoritesByType("Episode", pageParam),
     [fetchFavoritesByType],
   );
   const fetchFavoriteVideos = useCallback(
-    () => fetchFavoritesByType("Video"),
+    ({ pageParam }: { pageParam: number }) =>
+      fetchFavoritesByType("Video", pageParam),
     [fetchFavoritesByType],
   );
   const fetchFavoriteBoxsets = useCallback(
-    () => fetchFavoritesByType("BoxSet"),
+    ({ pageParam }: { pageParam: number }) =>
+      fetchFavoritesByType("BoxSet", pageParam),
     [fetchFavoritesByType],
   );
   const fetchFavoritePlaylists = useCallback(
-    () => fetchFavoritesByType("Playlist"),
+    ({ pageParam }: { pageParam: number }) =>
+      fetchFavoritesByType("Playlist", pageParam),
     [fetchFavoritesByType],
   );
 
@@ -123,38 +136,38 @@ export const Favorites = () => {
           </Text>
         </View>
       )}
-      <ScrollingCollectionList
+      <InfiniteScrollingCollectionList
         queryFn={fetchFavoriteSeries}
         queryKey={["home", "favorites", "series"]}
         title={t("favorites.series")}
         hideIfEmpty
       />
-      <ScrollingCollectionList
+      <InfiniteScrollingCollectionList
         queryFn={fetchFavoriteMovies}
         queryKey={["home", "favorites", "movies"]}
         title={t("favorites.movies")}
         hideIfEmpty
         orientation='vertical'
       />
-      <ScrollingCollectionList
+      <InfiniteScrollingCollectionList
         queryFn={fetchFavoriteEpisodes}
         queryKey={["home", "favorites", "episodes"]}
         title={t("favorites.episodes")}
         hideIfEmpty
       />
-      <ScrollingCollectionList
+      <InfiniteScrollingCollectionList
         queryFn={fetchFavoriteVideos}
         queryKey={["home", "favorites", "videos"]}
         title={t("favorites.videos")}
         hideIfEmpty
       />
-      <ScrollingCollectionList
+      <InfiniteScrollingCollectionList
         queryFn={fetchFavoriteBoxsets}
         queryKey={["home", "favorites", "boxsets"]}
         title={t("favorites.boxsets")}
         hideIfEmpty
       />
-      <ScrollingCollectionList
+      <InfiniteScrollingCollectionList
         queryFn={fetchFavoritePlaylists}
         queryKey={["home", "favorites", "playlists"]}
         title={t("favorites.playlists")}

components/home/InfiniteScrollingCollectionList.tsx

@@ -0,0 +1,191 @@
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import {
+  type QueryFunction,
+  type QueryKey,
+  useInfiniteQuery,
+} from "@tanstack/react-query";
+import { useTranslation } from "react-i18next";
+import {
+  ActivityIndicator,
+  ScrollView,
+  View,
+  type ViewProps,
+} from "react-native";
+import { Text } from "@/components/common/Text";
+import MoviePoster from "@/components/posters/MoviePoster";
+import ContinueWatchingPoster from "../ContinueWatchingPoster";
+import { TouchableItemRouter } from "../common/TouchableItemRouter";
+import { ItemCardText } from "../ItemCardText";
+import SeriesPoster from "../posters/SeriesPoster";
+
+interface Props extends ViewProps {
+  title?: string | null;
+  orientation?: "horizontal" | "vertical";
+  disabled?: boolean;
+  queryKey: QueryKey;
+  queryFn: QueryFunction<BaseItemDto[], QueryKey, number>;
+  hideIfEmpty?: boolean;
+  pageSize?: number;
+}
+
+export const InfiniteScrollingCollectionList: React.FC<Props> = ({
+  title,
+  orientation = "vertical",
+  disabled = false,
+  queryFn,
+  queryKey,
+  hideIfEmpty = false,
+  pageSize = 20,
+  ...props
+}) => {
+  const { data, isLoading, isFetchingNextPage, hasNextPage, fetchNextPage } =
+    useInfiniteQuery({
+      queryKey: queryKey,
+      queryFn: ({ pageParam = 0, ...context }) =>
+        queryFn({ ...context, queryKey, pageParam }),
+      getNextPageParam: (lastPage, allPages) => {
+        // If the last page has fewer items than pageSize, we've reached the end
+        if (lastPage.length < pageSize) {
+          return undefined;
+        }
+        // Otherwise, return the next start index
+        return allPages.length * pageSize;
+      },
+      initialPageParam: 0,
+      staleTime: 0,
+      refetchOnMount: true,
+      refetchOnWindowFocus: true,
+      refetchOnReconnect: true,
+    });
+
+  const { t } = useTranslation();
+
+  // Flatten all pages into a single array
+  const allItems = data?.pages.flat() || [];
+
+  if (hideIfEmpty === true && allItems.length === 0 && !isLoading) return null;
+  if (disabled || !title) return null;
+
+  const handleScroll = (event: any) => {
+    const { layoutMeasurement, contentOffset, contentSize } = event.nativeEvent;
+    const paddingToBottom = 20;
+
+    // Check if we're near the end of the scroll
+    if (
+      layoutMeasurement.width + contentOffset.x >=
+      contentSize.width - paddingToBottom
+    ) {
+      if (hasNextPage && !isFetchingNextPage) {
+        fetchNextPage();
+      }
+    }
+  };
+
+  return (
+    <View {...props}>
+      <Text className='px-4 text-lg font-bold mb-2 text-neutral-100'>
+        {title}
+      </Text>
+      {isLoading === false && allItems.length === 0 && (
+        <View className='px-4'>
+          <Text className='text-neutral-500'>{t("home.no_items")}</Text>
+        </View>
+      )}
+      {isLoading ? (
+        <View
+          className={`
+            flex flex-row gap-2 px-4
+        `}
+        >
+          {[1, 2, 3].map((i) => (
+            <View className='w-44' key={i}>
+              <View className='bg-neutral-900 h-24 w-full rounded-md mb-1' />
+              <View className='rounded-md overflow-hidden mb-1 self-start'>
+                <Text
+                  className='text-neutral-900 bg-neutral-900 rounded-md'
+                  numberOfLines={1}
+                >
+                  Nisi mollit voluptate amet.
+                </Text>
+              </View>
+              <View className='rounded-md overflow-hidden self-start mb-1'>
+                <Text
+                  className='text-neutral-900 bg-neutral-900 text-xs rounded-md '
+                  numberOfLines={1}
+                >
+                  Lorem ipsum
+                </Text>
+              </View>
+            </View>
+          ))}
+        </View>
+      ) : (
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          onScroll={handleScroll}
+          scrollEventThrottle={16}
+        >
+          <View className='px-4 flex flex-row'>
+            {allItems.map((item) => (
+              <TouchableItemRouter
+                item={item}
+                key={item.Id}
+                className={`mr-2 
+                  ${orientation === "horizontal" ? "w-44" : "w-28"}
+                `}
+              >
+                {item.Type === "Episode" && orientation === "horizontal" && (
+                  <ContinueWatchingPoster item={item} />
+                )}
+                {item.Type === "Episode" && orientation === "vertical" && (
+                  <SeriesPoster item={item} />
+                )}
+                {item.Type === "Movie" && orientation === "horizontal" && (
+                  <ContinueWatchingPoster item={item} />
+                )}
+                {item.Type === "Movie" && orientation === "vertical" && (
+                  <MoviePoster item={item} />
+                )}
+                {item.Type === "Series" && orientation === "vertical" && (
+                  <SeriesPoster item={item} />
+                )}
+                {item.Type === "Series" && orientation === "horizontal" && (
+                  <ContinueWatchingPoster item={item} />
+                )}
+                {item.Type === "Program" && (
+                  <ContinueWatchingPoster item={item} />
+                )}
+                {item.Type === "BoxSet" && orientation === "vertical" && (
+                  <MoviePoster item={item} />
+                )}
+                {item.Type === "BoxSet" && orientation === "horizontal" && (
+                  <ContinueWatchingPoster item={item} />
+                )}
+                {item.Type === "Playlist" && orientation === "vertical" && (
+                  <MoviePoster item={item} />
+                )}
+                {item.Type === "Playlist" && orientation === "horizontal" && (
+                  <ContinueWatchingPoster item={item} />
+                )}
+                {item.Type === "Video" && orientation === "vertical" && (
+                  <MoviePoster item={item} />
+                )}
+                {item.Type === "Video" && orientation === "horizontal" && (
+                  <ContinueWatchingPoster item={item} />
+                )}
+                <ItemCardText item={item} />
+              </TouchableItemRouter>
+            ))}
+            {/* Loading indicator for next page */}
+            {isFetchingNextPage && (
+              <View className='justify-center items-center w-16'>
+                <ActivityIndicator size='small' color='#6366f1' />
+              </View>
+            )}
+          </View>
+        </ScrollView>
+      )}
+    </View>
+  );
+};

components/home/LargeMovieCarousel.tsx

@@ -154,7 +154,7 @@ const RenderItem: React.FC<{ item: BaseItemDto }> = ({ item }) => {
     if (!from) return;
     const url = itemRouter(item, from);
     lightHapticFeedback();
-    // @ts-ignore
+    // @ts-expect-error
     if (url) router.push(url);
   }, [item, from]);
 

components/home/ScrollingCollectionList.tsx

@@ -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/jellyseerr/ParallaxSlideShow.tsx

@@ -139,7 +139,7 @@ const ParallaxSlideShow = <T,>({
               }
               nestedScrollEnabled
               showsVerticalScrollIndicator={false}
-              //@ts-ignore
+              //@ts-expect-error
               renderItem={({ item, index }) => renderItem(item, index)}
               keyExtractor={keyExtractor}
               numColumns={3}

components/jellyseerr/discover/Slide.tsx

@@ -49,7 +49,7 @@ const Slide = <T,>({
         data={data}
         onEndReachedThreshold={1}
         onEndReached={onEndReached}
-        //@ts-ignore
+        //@ts-expect-error
         renderItem={({ item, index }) =>
           item ? renderItem(item, index) : null
         }

components/search/SearchItemWrapper.tsx

@@ -35,11 +35,11 @@ export const SearchItemWrapper = <T,>({
         showsHorizontalScrollIndicator={false}
         keyExtractor={(_, index) => index.toString()}
         estimatedItemSize={250}
-        /*@ts-ignore */
+        /*@ts-expect-error */
         data={items}
         onEndReachedThreshold={1}
         onEndReached={onEndReached}
-        //@ts-ignore
+        //@ts-expect-error
         renderItem={({ item }) => (item ? renderItem(item) : null)}
       />
     </>

components/series/CastAndCrew.tsx

@@ -55,7 +55,7 @@ export const CastAndCrew: React.FC<Props> = ({ item, loading, ...props }) => {
           <TouchableOpacity
             onPress={() => {
               const url = itemRouter(i, from);
-              // @ts-ignore
+              // @ts-expect-error
               router.push(url);
             }}
             className='flex flex-col w-28'

components/series/EpisodeTitleHeader.tsx

@@ -19,7 +19,7 @@ export const EpisodeTitleHeader: React.FC<Props> = ({ item, ...props }) => {
         <TouchableOpacity
           onPress={() => {
             router.push(
-              // @ts-ignore
+              // @ts-expect-error
               `/(auth)/series/${item.SeriesId}?seasonIndex=${item?.ParentIndexNumber}`,
             );
           }}

components/series/SeasonDropdown.tsx

@@ -94,7 +94,6 @@ export const SeasonDropdown: React.FC<Props> = ({
     item[keys.id],
     initialSeasonIndex,
     keys,
-    onSelect,
   ]);
 
   const sortByIndex = (a: BaseItemDto, b: BaseItemDto) =>
@@ -123,16 +122,18 @@ export const SeasonDropdown: React.FC<Props> = ({
         sideOffset={8}
       >
         <DropdownMenu.Label>{t("item_card.seasons")}</DropdownMenu.Label>
-        {seasons?.sort(sortByIndex).map((season: any) => (
-          <DropdownMenu.Item
-            key={season[keys.title]}
-            onSelect={() => onSelect(season)}
-          >
-            <DropdownMenu.ItemTitle>
-              {season[keys.title]}
-            </DropdownMenu.ItemTitle>
-          </DropdownMenu.Item>
-        ))}
+        {seasons?.sort(sortByIndex).map((season: any) => {
+          const title =
+            season[keys.title] || season.Name || `Season ${season.IndexNumber}`;
+          return (
+            <DropdownMenu.Item
+              key={season.Id || season.IndexNumber}
+              onSelect={() => onSelect(season)}
+            >
+              <DropdownMenu.ItemTitle>{title}</DropdownMenu.ItemTitle>
+            </DropdownMenu.Item>
+          );
+        })}
       </DropdownMenu.Content>
     </DropdownMenu.Root>
   );

components/series/SeasonEpisodesCarousel.tsx

@@ -1,9 +1,11 @@
 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, 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";
@@ -16,15 +18,19 @@ 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 { getDownloadedItems } = useDownload();
+  const downloadedFiles = getDownloadedItems();
 
   const scrollRef = useRef<HorizontalScrollRef>(null);
 
@@ -41,24 +47,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,

components/series/SeasonPicker.tsx

@@ -86,7 +86,8 @@ export const SeasonPicker: React.FC<Props> = ({ item }) => {
         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 }) => {
 
       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,34 +1,17 @@
-import { Ionicons } from "@expo/vector-icons";
-import { useQueryClient } from "@tanstack/react-query";
-import { useRouter } from "expo-router";
 import { useMemo } from "react";
-import { Platform, Switch, TouchableOpacity } from "react-native";
-import { Stepper } from "@/components/inputs/Stepper";
-import { useDownload } from "@/providers/DownloadProvider";
-import {
-  DownloadMethod,
-  type Settings,
-  useSettings,
-} from "@/utils/atoms/settings";
-
-const DropdownMenu = !Platform.isTV ? require("zeego/dropdown-menu") : null;
-
 import { useTranslation } from "react-i18next";
+import { Stepper } from "@/components/inputs/Stepper";
 import DisabledSetting from "@/components/settings/DisabledSetting";
-import { Text } from "../common/Text";
+import { type Settings, useSettings } from "@/utils/atoms/settings";
 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],
@@ -39,70 +22,9 @@ 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
-          }
+          disabled={pluginSettings?.remuxConcurrentLimit?.locked}
         >
           <Stepper
             value={settings.remuxConcurrentLimit}
@@ -116,33 +38,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

@@ -82,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({
@@ -144,10 +155,6 @@ export const HomeIndex = () => {
       setIsConnected(state.isConnected);
     });
 
-    // cleanCacheDirectory().catch((e) =>
-    //   console.error("Something went wrong cleaning cache directory")
-    // );
-
     return () => {
       unsubscribe();
     };
@@ -188,8 +195,6 @@ export const HomeIndex = () => {
     );
   }, [userViews]);
 
-  const invalidateCache = useInvalidatePlaybackProgressCache();
-
   const refetch = async () => {
     setLoading(true);
     await refreshStreamyfinPluginSettings();

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,7 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
-import * as FileSystem from "expo-file-system";
 import { useTranslation } from "react-i18next";
-import { View } from "react-native";
+import { Platform, View } from "react-native";
 import { toast } from "sonner-native";
 import { Text } from "@/components/common/Text";
 import { Colors } from "@/constants/Colors";
@@ -17,14 +16,16 @@ export const StorageSettings = () => {
   const errorHapticFeedback = useHaptic("error");
 
   const { data: size } = useQuery({
-    queryKey: ["appSize", appSizeUsage],
+    queryKey: ["appSize"],
     queryFn: async () => {
-      const app = await appSizeUsage;
+      const app = await appSizeUsage();
 
-      const remaining = await FileSystem.getFreeDiskStorageAsync();
-      const total = await FileSystem.getTotalDiskCapacityAsync();
-
-      return { app, remaining, total, used: (total - remaining) / total };
+      return {
+        appSize: app.appSize,
+        total: app.total,
+        remaining: app.remaining,
+        used: (app.total - app.remaining) / app.total,
+      };
     },
   });
 
@@ -39,6 +40,7 @@ export const StorageSettings = () => {
   };
 
   const calculatePercentage = (value: number, total: number) => {
+    console.log("usage", value, total);
     return ((value / total) * 100).toFixed(2);
   };
 
@@ -58,33 +60,30 @@ export const StorageSettings = () => {
         </View>
         <View className='h-3 w-full bg-gray-100/10 rounded-md overflow-hidden flex flex-row'>
           {size && (
-            <>
+            <View className='flex flex-row'>
               <View
                 style={{
-                  width: `${(size.app / size.total) * 100}%`,
+                  width: `${(size.appSize / size.total) * 100}%`,
                   backgroundColor: Colors.primaryRGB,
                 }}
               />
               <View
                 style={{
-                  width: `${
-                    ((size.total - size.remaining - size.app) / size.total) *
-                    100
-                  }%`,
+                  width: `${((size.total - size.remaining - size.appSize) / size.total) * 100}%`,
                   backgroundColor: Colors.primaryLightRGB,
                 }}
               />
-            </>
+            </View>
           )}
         </View>
         <View className='flex flex-row gap-x-2'>
           {size && (
-            <>
+            <View className='flex flex-row gap-x-2'>
               <View className='flex flex-row items-center'>
                 <View className='w-3 h-3 rounded-full bg-purple-600 mr-1' />
                 <Text className='text-white text-xs'>
                   {t("home.settings.storage.app_usage", {
-                    usedSpace: calculatePercentage(size.app, size.total),
+                    usedSpace: calculatePercentage(size.appSize, size.total),
                   })}
                 </Text>
               </View>
@@ -93,23 +92,25 @@ export const StorageSettings = () => {
                 <Text className='text-white text-xs'>
                   {t("home.settings.storage.device_usage", {
                     availableSpace: calculatePercentage(
-                      size.total - size.remaining - size.app,
+                      size.total - size.remaining - size.appSize,
                       size.total,
                     ),
                   })}
                 </Text>
               </View>
-            </>
+            </View>
           )}
         </View>
       </View>
-      <ListGroup>
-        <ListItem
-          textColor='red'
-          onPress={onDeleteClicked}
-          title={t("home.settings.storage.delete_all_downloaded_files")}
-        />
-      </ListGroup>
+      {!Platform.isTV && (
+        <ListGroup>
+          <ListItem
+            textColor='red'
+            onPress={onDeleteClicked}
+            title={t("home.settings.storage.delete_all_downloaded_files")}
+          />
+        </ListGroup>
+      )}
     </View>
   );
 };

components/video-player/controls/AudioSlider.tsx

@@ -113,7 +113,7 @@ const AudioSlider: React.FC<AudioSliderProps> = ({ setVisibility }) => {
 
 const styles = StyleSheet.create({
   sliderContainer: {
-    width: 150,
+    width: 130,
     display: "flex",
     flexDirection: "row",
     justifyContent: "center",

components/video-player/controls/BottomControls.tsx

@@ -0,0 +1,224 @@
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+import type { FC } from "react";
+import { View } from "react-native";
+import { Slider } from "react-native-awesome-slider";
+import { type SharedValue } from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Text } from "@/components/common/Text";
+import { useSettings } from "@/utils/atoms/settings";
+import NextEpisodeCountDownButton from "./NextEpisodeCountDownButton";
+import SkipButton from "./SkipButton";
+import { TimeDisplay } from "./TimeDisplay";
+import { TrickplayBubble } from "./TrickplayBubble";
+
+interface BottomControlsProps {
+  item: BaseItemDto;
+  showControls: boolean;
+  isSliding: boolean;
+  showRemoteBubble: boolean;
+  currentTime: number;
+  remainingTime: number;
+  isVlc: boolean;
+  showSkipButton: boolean;
+  showSkipCreditButton: boolean;
+  skipIntro: () => void;
+  skipCredit: () => void;
+  nextItem?: BaseItemDto | null;
+  handleNextEpisodeAutoPlay: () => void;
+  handleNextEpisodeManual: () => void;
+  handleControlsInteraction: () => void;
+
+  // Slider props
+  min: SharedValue<number>;
+  max: SharedValue<number>;
+  effectiveProgress: SharedValue<number>;
+  cacheProgress: SharedValue<number>;
+  handleSliderStart: () => void;
+  handleSliderComplete: (value: number) => void;
+  handleSliderChange: (value: number) => void;
+  handleTouchStart: () => void;
+  handleTouchEnd: () => void;
+
+  // Trickplay props
+  trickPlayUrl: {
+    x: number;
+    y: number;
+    url: string;
+  } | null;
+  trickplayInfo: {
+    aspectRatio?: number;
+    data: {
+      TileWidth?: number;
+      TileHeight?: number;
+    };
+  } | null;
+  time: {
+    hours: number;
+    minutes: number;
+    seconds: number;
+  };
+}
+
+export const BottomControls: FC<BottomControlsProps> = ({
+  item,
+  showControls,
+  isSliding,
+  showRemoteBubble,
+  currentTime,
+  remainingTime,
+  isVlc,
+  showSkipButton,
+  showSkipCreditButton,
+  skipIntro,
+  skipCredit,
+  nextItem,
+  handleNextEpisodeAutoPlay,
+  handleNextEpisodeManual,
+  handleControlsInteraction,
+  min,
+  max,
+  effectiveProgress,
+  cacheProgress,
+  handleSliderStart,
+  handleSliderComplete,
+  handleSliderChange,
+  handleTouchStart,
+  handleTouchEnd,
+  trickPlayUrl,
+  trickplayInfo,
+  time,
+}) => {
+  const [settings] = useSettings();
+  const insets = useSafeAreaInsets();
+
+  return (
+    <View
+      style={[
+        {
+          position: "absolute",
+          right: settings?.safeAreaInControlsEnabled ? insets.right : 0,
+          left: settings?.safeAreaInControlsEnabled ? insets.left : 0,
+          bottom: settings?.safeAreaInControlsEnabled
+            ? Math.max(insets.bottom - 17, 0)
+            : 0,
+        },
+      ]}
+      className={"flex flex-col px-2"}
+      onTouchStart={handleControlsInteraction}
+    >
+      <View
+        className='shrink flex flex-col justify-center h-full'
+        style={{
+          flexDirection: "row",
+          justifyContent: "space-between",
+        }}
+      >
+        <View
+          style={{
+            flexDirection: "column",
+            alignSelf: "flex-end",
+            opacity: showControls ? 1 : 0,
+          }}
+          pointerEvents={showControls ? "box-none" : "none"}
+        >
+          {item?.Type === "Episode" && (
+            <Text className='opacity-50'>
+              {`${item.SeriesName} - ${item.SeasonName} Episode ${item.IndexNumber}`}
+            </Text>
+          )}
+          <Text className='font-bold text-xl'>{item?.Name}</Text>
+          {item?.Type === "Movie" && (
+            <Text className='text-xs opacity-50'>{item?.ProductionYear}</Text>
+          )}
+          {item?.Type === "Audio" && (
+            <Text className='text-xs opacity-50'>{item?.Album}</Text>
+          )}
+        </View>
+        <View className='flex flex-row space-x-2'>
+          <SkipButton
+            showButton={showSkipButton}
+            onPress={skipIntro}
+            buttonText='Skip Intro'
+          />
+          <SkipButton
+            showButton={showSkipCreditButton}
+            onPress={skipCredit}
+            buttonText='Skip Credits'
+          />
+          {(settings.maxAutoPlayEpisodeCount.value === -1 ||
+            settings.autoPlayEpisodeCount <
+              settings.maxAutoPlayEpisodeCount.value) && (
+            <NextEpisodeCountDownButton
+              show={
+                !nextItem
+                  ? false
+                  : isVlc
+                    ? remainingTime < 10000
+                    : remainingTime < 10
+              }
+              onFinish={handleNextEpisodeAutoPlay}
+              onPress={handleNextEpisodeManual}
+            />
+          )}
+        </View>
+      </View>
+      <View
+        className={"flex flex-col-reverse rounded-lg items-center my-2"}
+        style={{
+          opacity: showControls ? 1 : 0,
+        }}
+        pointerEvents={showControls ? "box-none" : "none"}
+      >
+        <View className={"flex flex-col w-full shrink"}>
+          <View
+            style={{
+              height: 10,
+              justifyContent: "center",
+              alignItems: "stretch",
+            }}
+            onTouchStart={handleTouchStart}
+            onTouchEnd={handleTouchEnd}
+          >
+            <Slider
+              theme={{
+                maximumTrackTintColor: "rgba(255,255,255,0.2)",
+                minimumTrackTintColor: "#fff",
+                cacheTrackTintColor: "rgba(255,255,255,0.3)",
+                bubbleBackgroundColor: "#fff",
+                bubbleTextColor: "#666",
+                heartbeatColor: "#999",
+              }}
+              renderThumb={() => null}
+              cache={cacheProgress}
+              onSlidingStart={handleSliderStart}
+              onSlidingComplete={handleSliderComplete}
+              onValueChange={handleSliderChange}
+              containerStyle={{
+                borderRadius: 100,
+              }}
+              renderBubble={() =>
+                (isSliding || showRemoteBubble) && (
+                  <TrickplayBubble
+                    trickPlayUrl={trickPlayUrl}
+                    trickplayInfo={trickplayInfo}
+                    time={time}
+                  />
+                )
+              }
+              sliderHeight={10}
+              thumbWidth={0}
+              progress={effectiveProgress}
+              minimumValue={min}
+              maximumValue={max}
+            />
+          </View>
+          <TimeDisplay
+            currentTime={currentTime}
+            remainingTime={remainingTime}
+            isVlc={isVlc}
+          />
+        </View>
+      </View>
+    </View>
+  );
+};

components/video-player/controls/BrightnessSlider.tsx

@@ -63,7 +63,7 @@ const BrightnessSlider = () => {
 
 const styles = StyleSheet.create({
   sliderContainer: {
-    width: 150,
+    width: 130,
     display: "flex",
     flexDirection: "row",
     justifyContent: "center",

components/video-player/controls/CenterControls.tsx

@@ -0,0 +1,158 @@
+import { Ionicons } from "@expo/vector-icons";
+import type { FC } from "react";
+import { Platform, TouchableOpacity, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Text } from "@/components/common/Text";
+import { Loader } from "@/components/Loader";
+import { useSettings } from "@/utils/atoms/settings";
+import AudioSlider from "./AudioSlider";
+import BrightnessSlider from "./BrightnessSlider";
+import { ICON_SIZES } from "./constants";
+
+interface CenterControlsProps {
+  showControls: boolean;
+  isPlaying: boolean;
+  isBuffering: boolean;
+  showAudioSlider: boolean;
+  setShowAudioSlider: (show: boolean) => void;
+  togglePlay: () => void;
+  handleSkipBackward: () => void;
+  handleSkipForward: () => void;
+}
+
+export const CenterControls: FC<CenterControlsProps> = ({
+  showControls,
+  isPlaying,
+  isBuffering,
+  showAudioSlider,
+  setShowAudioSlider,
+  togglePlay,
+  handleSkipBackward,
+  handleSkipForward,
+}) => {
+  const [settings] = useSettings();
+  const insets = useSafeAreaInsets();
+
+  return (
+    <View
+      style={{
+        position: "absolute",
+        top: "50%",
+        left: settings?.safeAreaInControlsEnabled ? insets.left : 0,
+        right: settings?.safeAreaInControlsEnabled ? insets.right : 0,
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        transform: [{ translateY: -22.5 }],
+        paddingHorizontal: "28%",
+      }}
+      pointerEvents={showControls ? "box-none" : "none"}
+    >
+      <View
+        style={{
+          position: "absolute",
+          alignItems: "center",
+          transform: [{ rotate: "270deg" }],
+          left: 0,
+          bottom: 30,
+          opacity: showControls ? 1 : 0,
+        }}
+      >
+        <BrightnessSlider />
+      </View>
+
+      {!Platform.isTV && (
+        <TouchableOpacity onPress={handleSkipBackward}>
+          <View
+            style={{
+              position: "relative",
+              justifyContent: "center",
+              alignItems: "center",
+              opacity: showControls ? 1 : 0,
+            }}
+          >
+            <Ionicons
+              name='refresh-outline'
+              size={ICON_SIZES.CENTER}
+              color='white'
+              style={{
+                transform: [{ scaleY: -1 }, { rotate: "180deg" }],
+              }}
+            />
+            <Text
+              style={{
+                position: "absolute",
+                color: "white",
+                fontSize: 16,
+                fontWeight: "bold",
+                bottom: 10,
+              }}
+            >
+              {settings?.rewindSkipTime}
+            </Text>
+          </View>
+        </TouchableOpacity>
+      )}
+
+      <View style={Platform.isTV ? { flex: 1, alignItems: "center" } : {}}>
+        <TouchableOpacity onPress={togglePlay}>
+          {!isBuffering ? (
+            <Ionicons
+              name={isPlaying ? "pause" : "play"}
+              size={ICON_SIZES.CENTER}
+              color='white'
+              style={{
+                opacity: showControls ? 1 : 0,
+              }}
+            />
+          ) : (
+            <Loader size={"large"} />
+          )}
+        </TouchableOpacity>
+      </View>
+
+      {!Platform.isTV && (
+        <TouchableOpacity onPress={handleSkipForward}>
+          <View
+            style={{
+              position: "relative",
+              justifyContent: "center",
+              alignItems: "center",
+              opacity: showControls ? 1 : 0,
+            }}
+          >
+            <Ionicons
+              name='refresh-outline'
+              size={ICON_SIZES.CENTER}
+              color='white'
+            />
+            <Text
+              style={{
+                position: "absolute",
+                color: "white",
+                fontSize: 16,
+                fontWeight: "bold",
+                bottom: 10,
+              }}
+            >
+              {settings?.forwardSkipTime}
+            </Text>
+          </View>
+        </TouchableOpacity>
+      )}
+
+      <View
+        style={{
+          position: "absolute",
+          alignItems: "center",
+          transform: [{ rotate: "270deg" }],
+          bottom: 30,
+          right: 0,
+          opacity: showAudioSlider || showControls ? 1 : 0,
+        }}
+      >
+        <AudioSlider setVisibility={setShowAudioSlider} />
+      </View>
+    </View>
+  );
+};

components/video-player/controls/EpisodeList.tsx

@@ -2,22 +2,24 @@ 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, useState } from "react";
+import { useEffect, useMemo, useRef } from "react";
 import { TouchableOpacity, View } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { SafeAreaView } from "react-native-safe-area-context";
 import ContinueWatchingPoster from "@/components/ContinueWatchingPoster";
 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 { 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";
@@ -25,7 +27,7 @@ import { runtimeTicksToSeconds } from "@/utils/time";
 type Props = {
   item: BaseItemDto;
   close: () => void;
-  goToItem: (itemId: string) => Promise<void>;
+  goToItem: (item: BaseItemDto) => void;
 };
 
 export const seasonIndexAtom = atom<SeasonIndexState>({});
@@ -33,69 +35,94 @@ 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(() => {
     if (item.SeriesId) {
       setSeasonIndexState((prev) => ({
         ...prev,
-        [item.SeriesId ?? ""]: item.ParentIndexNumber ?? 0,
+        [item.ParentId ?? ""]: item.ParentIndexNumber ?? 0,
       }));
     }
   }, []);
 
-  const seasonIndex = seasonIndexState[item.SeriesId ?? ""];
-  const [seriesItem, setSeriesItem] = useState<BaseItemDto | null>(null);
+  const { getDownloadedItems } = useDownload();
+  const downloadedFiles = getDownloadedItems();
 
-  // 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.ParentId ?? ""];
 
   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?.toString(),
+          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`,
-        {
-          params: {
-            userId: user?.Id,
-            itemId: item.SeriesId,
-            Fields:
-              "ItemCounts,PrimaryImageAspectRatio,CanDelete,MediaSourceCount",
-          },
-          headers: {
-            Authorization: `MediaBrowser DeviceId="${api.deviceInfo.id}", Token="${api.accessToken}"`,
-          },
-        },
-      );
+      const response = await getTvShowsApi(api).getSeasons({
+        seriesId: item.SeriesId,
+        userId: user.Id,
+        fields: [
+          "ItemCounts",
+          "PrimaryImageAspectRatio",
+          "CanDelete",
+          "MediaSourceCount",
+        ],
+      });
       return response.data.Items;
     },
-    enabled: !!api && !!user?.Id && !!item.SeasonId,
+    enabled: isOffline
+      ? !!item.SeriesId
+      : !!api && !!user?.Id && !!item.SeasonId,
   });
 
   const selectedSeasonId: string | null = useMemo(
     () =>
-      seasons?.find((season: any) => season.IndexNumber === seasonIndex)?.Id,
+      seasons
+        ?.find((season: any) => season.IndexNumber === seasonIndex)
+        ?.Id?.toString() || null,
     [seasons, seasonIndex],
   );
 
-  const { data: episodes } = useQuery({
+  const { data: episodes, isLoading: episodesLoading } = 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 +139,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);
@@ -150,12 +177,8 @@ export const EpisodeList: React.FC<Props> = ({ item, close, goToItem }) => {
     }
   }, [episodes, item.Id]);
 
-  if (!episodes) {
-    return <Loader />;
-  }
-
   return (
-    <View
+    <SafeAreaView
       style={{
         position: "absolute",
         backgroundColor: "black",
@@ -163,21 +186,16 @@ 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 && (
+      <View className='flex-row items-center p-4 z-10'>
+        {seasons && seasons.length > 0 && !episodesLoading && episodes && (
           <SeasonDropdown
-            item={seriesItem}
+            item={item}
             seasons={seasons}
             state={seasonIndexState}
             onSelect={(season) => {
               setSeasonIndexState((prev) => ({
                 ...prev,
-                [item.SeriesId ?? ""]: season.IndexNumber,
+                [item.ParentId ?? ""]: season.IndexNumber,
               }));
             }}
           />
@@ -186,64 +204,73 @@ export const EpisodeList: React.FC<Props> = ({ item, close, goToItem }) => {
           onPress={async () => {
             close();
           }}
-          className='aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2'
+          className='aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2 ml-auto'
         >
           <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" : ""
-            }`}
-          >
-            <TouchableOpacity
-              onPress={() => {
-                goToItem(_item.Id);
-              }}
+      {!episodes || episodesLoading ? (
+        <View
+          style={{ flex: 1, justifyContent: "center", alignItems: "center" }}
+        >
+          <Loader />
+        </View>
+      ) : (
+        <HorizontalScroll
+          ref={scrollViewRef}
+          data={episodes}
+          extraData={item}
+          // Note otherItem is the item that is being rendered, not the item that is currently selected
+          renderItem={(otherItem, _idx) => (
+            <View
+              key={otherItem.Id}
+              style={{}}
+              className={`flex flex-col w-44 ${
+                item.Id !== otherItem.Id ? "opacity-75" : ""
+              }`}
             >
-              <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
+              <TouchableOpacity
+                onPress={() => {
+                  goToItem(otherItem);
                 }}
               >
-                {_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)}
+                <ContinueWatchingPoster
+                  item={otherItem}
+                  useEpisodePoster
+                  showPlayButton={otherItem.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
+                  }}
+                >
+                  {otherItem.Name}
+                </Text>
+                <Text numberOfLines={1} className='text-xs text-neutral-475'>
+                  {`S${otherItem.ParentIndexNumber?.toString()}:E${otherItem.IndexNumber?.toString()}`}
+                </Text>
+                <Text className='text-xs text-neutral-500'>
+                  {runtimeTicksToSeconds(otherItem.RunTimeTicks)}
+                </Text>
+              </View>
+              <Text
+                numberOfLines={7}
+                className='text-xs text-neutral-500 shrink'
+              >
+                {otherItem.Overview}
               </Text>
             </View>
-            <View className='self-start mt-2'>
-              <DownloadSingleItem item={_item} />
-            </View>
-            <Text numberOfLines={5} className='text-xs text-neutral-500 shrink'>
-              {_item.Overview}
-            </Text>
-          </View>
-        )}
-        keyExtractor={(e: BaseItemDto) => e.Id ?? ""}
-        estimatedItemSize={200}
-        showsHorizontalScrollIndicator={false}
-      />
-    </View>
+          )}
+          keyExtractor={(e: BaseItemDto) => e.Id ?? ""}
+          estimatedItemSize={200}
+          showsHorizontalScrollIndicator={false}
+        />
+      )}
+    </SafeAreaView>
   );
 };

components/video-player/controls/HeaderControls.tsx

@@ -0,0 +1,196 @@
+import { Ionicons, MaterialIcons } from "@expo/vector-icons";
+import type {
+  BaseItemDto,
+  MediaSourceInfo,
+} from "@jellyfin/sdk/lib/generated-client";
+import { useRouter } from "expo-router";
+import { type Dispatch, type FC, type SetStateAction } from "react";
+import {
+  Platform,
+  TouchableOpacity,
+  useWindowDimensions,
+  View,
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useHaptic } from "@/hooks/useHaptic";
+import { useSettings, VideoPlayer } from "@/utils/atoms/settings";
+import { ICON_SIZES } from "./constants";
+import { VideoProvider } from "./contexts/VideoContext";
+import DropdownView from "./dropdown/DropdownView";
+import { type ScaleFactor, ScaleFactorSelector } from "./ScaleFactorSelector";
+import {
+  type AspectRatio,
+  AspectRatioSelector,
+} from "./VideoScalingModeSelector";
+
+interface HeaderControlsProps {
+  item: BaseItemDto;
+  showControls: boolean;
+  offline: boolean;
+  mediaSource?: MediaSourceInfo | null;
+  startPictureInPicture?: () => Promise<void>;
+  switchOnEpisodeMode: () => void;
+  goToPreviousItem: () => void;
+  goToNextItem: (options: { isAutoPlay?: boolean }) => void;
+  previousItem?: BaseItemDto | null;
+  nextItem?: BaseItemDto | null;
+  getAudioTracks?: (() => Promise<any[] | null>) | (() => any[]);
+  getSubtitleTracks?: (() => Promise<any[] | null>) | (() => any[]);
+  setAudioTrack?: (index: number) => void;
+  setSubtitleTrack?: (index: number) => void;
+  setSubtitleURL?: (url: string, customName: string) => void;
+  aspectRatio?: AspectRatio;
+  scaleFactor?: ScaleFactor;
+  setAspectRatio?: Dispatch<SetStateAction<AspectRatio>>;
+  setScaleFactor?: Dispatch<SetStateAction<ScaleFactor>>;
+  setVideoAspectRatio?: (aspectRatio: string | null) => Promise<void>;
+  setVideoScaleFactor?: (scaleFactor: number) => Promise<void>;
+}
+
+export const HeaderControls: FC<HeaderControlsProps> = ({
+  item,
+  showControls,
+  offline,
+  mediaSource,
+  startPictureInPicture,
+  switchOnEpisodeMode,
+  goToPreviousItem,
+  goToNextItem,
+  previousItem,
+  nextItem,
+  getAudioTracks,
+  getSubtitleTracks,
+  setAudioTrack,
+  setSubtitleTrack,
+  setSubtitleURL,
+  aspectRatio = "default",
+  scaleFactor = 1.0,
+  setAspectRatio,
+  setScaleFactor,
+  setVideoAspectRatio,
+  setVideoScaleFactor,
+}) => {
+  const [settings] = useSettings();
+  const router = useRouter();
+  const insets = useSafeAreaInsets();
+  const { width: screenWidth } = useWindowDimensions();
+  const lightHapticFeedback = useHaptic("light");
+
+  const handleAspectRatioChange = async (newRatio: AspectRatio) => {
+    if (!setAspectRatio || !setVideoAspectRatio) return;
+
+    setAspectRatio(newRatio);
+    const aspectRatioString = newRatio === "default" ? null : newRatio;
+    await setVideoAspectRatio(aspectRatioString);
+  };
+
+  const handleScaleFactorChange = async (newScale: ScaleFactor) => {
+    if (!setScaleFactor || !setVideoScaleFactor) return;
+
+    setScaleFactor(newScale);
+    await setVideoScaleFactor(newScale);
+  };
+
+  const onClose = async () => {
+    lightHapticFeedback();
+    router.back();
+  };
+
+  return (
+    <View
+      style={[
+        {
+          position: "absolute",
+          top: settings?.safeAreaInControlsEnabled ? insets.top : 0,
+          right: settings?.safeAreaInControlsEnabled ? insets.right : 0,
+          width: settings?.safeAreaInControlsEnabled
+            ? screenWidth - insets.left - insets.right
+            : screenWidth,
+          opacity: showControls ? 1 : 0,
+        },
+      ]}
+      pointerEvents={showControls ? "auto" : "none"}
+      className={"flex flex-row w-full pt-2"}
+    >
+      <View className='mr-auto'>
+        {!Platform.isTV && (!offline || !mediaSource?.TranscodingUrl) && (
+          <VideoProvider
+            getAudioTracks={getAudioTracks}
+            getSubtitleTracks={getSubtitleTracks}
+            setAudioTrack={setAudioTrack}
+            setSubtitleTrack={setSubtitleTrack}
+            setSubtitleURL={setSubtitleURL}
+          >
+            <DropdownView />
+          </VideoProvider>
+        )}
+      </View>
+
+      <View className='flex flex-row items-center space-x-2'>
+        {!Platform.isTV &&
+          (settings.defaultPlayer === VideoPlayer.VLC_4 ||
+            Platform.OS === "android") && (
+            <TouchableOpacity
+              onPress={startPictureInPicture}
+              className='aspect-square flex flex-col rounded-xl items-center justify-center p-2'
+            >
+              <MaterialIcons
+                name='picture-in-picture'
+                size={ICON_SIZES.HEADER}
+                color='white'
+                style={{ opacity: showControls ? 1 : 0 }}
+              />
+            </TouchableOpacity>
+          )}
+        {item?.Type === "Episode" && (
+          <TouchableOpacity
+            onPress={switchOnEpisodeMode}
+            className='aspect-square flex flex-col rounded-xl items-center justify-center p-2'
+          >
+            <Ionicons name='list' size={ICON_SIZES.HEADER} color='white' />
+          </TouchableOpacity>
+        )}
+        {previousItem && (
+          <TouchableOpacity
+            onPress={goToPreviousItem}
+            className='aspect-square flex flex-col rounded-xl items-center justify-center p-2'
+          >
+            <Ionicons
+              name='play-skip-back'
+              size={ICON_SIZES.HEADER}
+              color='white'
+            />
+          </TouchableOpacity>
+        )}
+        {nextItem && (
+          <TouchableOpacity
+            onPress={() => goToNextItem({ isAutoPlay: false })}
+            className='aspect-square flex flex-col rounded-xl items-center justify-center p-2'
+          >
+            <Ionicons
+              name='play-skip-forward'
+              size={ICON_SIZES.HEADER}
+              color='white'
+            />
+          </TouchableOpacity>
+        )}
+        <AspectRatioSelector
+          currentRatio={aspectRatio}
+          onRatioChange={handleAspectRatioChange}
+          disabled={!setVideoAspectRatio}
+        />
+        <ScaleFactorSelector
+          currentScale={scaleFactor}
+          onScaleChange={handleScaleFactorChange}
+          disabled={!setVideoScaleFactor}
+        />
+        <TouchableOpacity
+          onPress={onClose}
+          className='aspect-square flex flex-col rounded-xl items-center justify-center p-2'
+        >
+          <Ionicons name='close' size={ICON_SIZES.HEADER} color='white' />
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};

components/video-player/controls/ScaleFactorSelector.tsx

@@ -0,0 +1,135 @@
+import { Ionicons } from "@expo/vector-icons";
+import React from "react";
+import { Platform, TouchableOpacity } from "react-native";
+import { useHaptic } from "@/hooks/useHaptic";
+
+const DropdownMenu = !Platform.isTV ? require("zeego/dropdown-menu") : null;
+
+export type ScaleFactor =
+  | 1.0
+  | 1.1
+  | 1.2
+  | 1.3
+  | 1.4
+  | 1.5
+  | 1.6
+  | 1.7
+  | 1.8
+  | 1.9
+  | 2.0;
+
+interface ScaleFactorSelectorProps {
+  currentScale: ScaleFactor;
+  onScaleChange: (scale: ScaleFactor) => void;
+  disabled?: boolean;
+}
+
+interface ScaleFactorOption {
+  id: ScaleFactor;
+  label: string;
+  description: string;
+}
+
+const SCALE_FACTOR_OPTIONS: ScaleFactorOption[] = [
+  {
+    id: 1.0,
+    label: "1.0x",
+    description: "Original size",
+  },
+  {
+    id: 1.1,
+    label: "1.1x",
+    description: "10% larger",
+  },
+  {
+    id: 1.2,
+    label: "1.2x",
+    description: "20% larger",
+  },
+  {
+    id: 1.3,
+    label: "1.3x",
+    description: "30% larger",
+  },
+  {
+    id: 1.4,
+    label: "1.4x",
+    description: "40% larger",
+  },
+  {
+    id: 1.5,
+    label: "1.5x",
+    description: "50% larger",
+  },
+  {
+    id: 1.6,
+    label: "1.6x",
+    description: "60% larger",
+  },
+  {
+    id: 1.7,
+    label: "1.7x",
+    description: "70% larger",
+  },
+  {
+    id: 1.8,
+    label: "1.8x",
+    description: "80% larger",
+  },
+  {
+    id: 1.9,
+    label: "1.9x",
+    description: "90% larger",
+  },
+  {
+    id: 2.0,
+    label: "2.0x",
+    description: "Double size",
+  },
+];
+
+export const ScaleFactorSelector: React.FC<ScaleFactorSelectorProps> = ({
+  currentScale,
+  onScaleChange,
+  disabled = false,
+}) => {
+  const lightHapticFeedback = useHaptic("light");
+
+  // Hide on TV platforms since zeego doesn't support TV
+  if (Platform.isTV || !DropdownMenu) return null;
+
+  const handleScaleSelect = (scale: ScaleFactor) => {
+    onScaleChange(scale);
+    lightHapticFeedback();
+  };
+
+  return (
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger asChild>
+        <TouchableOpacity
+          disabled={disabled}
+          className='aspect-square flex flex-col rounded-xl items-center justify-center p-2'
+          style={{ opacity: disabled ? 0.5 : 1 }}
+        >
+          <Ionicons name='search-outline' size={24} color='white' />
+        </TouchableOpacity>
+      </DropdownMenu.Trigger>
+
+      <DropdownMenu.Content>
+        <DropdownMenu.Label>Scale Factor</DropdownMenu.Label>
+        <DropdownMenu.Separator />
+
+        {SCALE_FACTOR_OPTIONS.map((option) => (
+          <DropdownMenu.CheckboxItem
+            key={option.id}
+            value={currentScale === option.id ? "on" : "off"}
+            onValueChange={() => handleScaleSelect(option.id)}
+          >
+            <DropdownMenu.ItemTitle>{option.label}</DropdownMenu.ItemTitle>
+            <DropdownMenu.ItemIndicator />
+          </DropdownMenu.CheckboxItem>
+        ))}
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
+  );
+};

components/video-player/controls/TimeDisplay.tsx

@@ -0,0 +1,43 @@
+import type { FC } from "react";
+import { View } from "react-native";
+import { Text } from "@/components/common/Text";
+import { formatTimeString } from "@/utils/time";
+
+interface TimeDisplayProps {
+  currentTime: number;
+  remainingTime: number;
+  isVlc: boolean;
+}
+
+export const TimeDisplay: FC<TimeDisplayProps> = ({
+  currentTime,
+  remainingTime,
+  isVlc,
+}) => {
+  const getFinishTime = () => {
+    const now = new Date();
+    const remainingMs = isVlc ? remainingTime : remainingTime * 1000;
+    const finishTime = new Date(now.getTime() + remainingMs);
+    return finishTime.toLocaleTimeString([], {
+      hour: "2-digit",
+      minute: "2-digit",
+      hour12: false,
+    });
+  };
+
+  return (
+    <View className='flex flex-row items-center justify-between mt-2'>
+      <Text className='text-[12px] text-neutral-400'>
+        {formatTimeString(currentTime, isVlc ? "ms" : "s")}
+      </Text>
+      <View className='flex flex-col items-end'>
+        <Text className='text-[12px] text-neutral-400'>
+          -{formatTimeString(remainingTime, isVlc ? "ms" : "s")}
+        </Text>
+        <Text className='text-[10px] text-neutral-500 opacity-70'>
+          ends at {getFinishTime()}
+        </Text>
+      </View>
+    </View>
+  );
+};

components/video-player/controls/TrickplayBubble.tsx

@@ -0,0 +1,92 @@
+import { Image } from "expo-image";
+import type { FC } from "react";
+import { View } from "react-native";
+import { Text } from "@/components/common/Text";
+import { CONTROLS_CONSTANTS } from "./constants";
+
+interface TrickplayBubbleProps {
+  trickPlayUrl: {
+    x: number;
+    y: number;
+    url: string;
+  } | null;
+  trickplayInfo: {
+    aspectRatio?: number;
+    data: {
+      TileWidth?: number;
+      TileHeight?: number;
+    };
+  } | null;
+  time: {
+    hours: number;
+    minutes: number;
+    seconds: number;
+  };
+}
+
+export const TrickplayBubble: FC<TrickplayBubbleProps> = ({
+  trickPlayUrl,
+  trickplayInfo,
+  time,
+}) => {
+  if (!trickPlayUrl || !trickplayInfo) {
+    return null;
+  }
+
+  const { x, y, url } = trickPlayUrl;
+  const tileWidth = CONTROLS_CONSTANTS.TILE_WIDTH;
+  const tileHeight = tileWidth / trickplayInfo.aspectRatio!;
+
+  return (
+    <View
+      style={{
+        position: "absolute",
+        left: -62,
+        bottom: 0,
+        paddingTop: 30,
+        paddingBottom: 5,
+        width: tileWidth * 1.5,
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      <View
+        style={{
+          width: tileWidth,
+          height: tileHeight,
+          alignSelf: "center",
+          transform: [{ scale: 1.4 }],
+          borderRadius: 5,
+        }}
+        className='bg-neutral-800 overflow-hidden'
+      >
+        <Image
+          cachePolicy={"memory-disk"}
+          style={{
+            width: tileWidth * trickplayInfo?.data.TileWidth!,
+            height:
+              (tileWidth / trickplayInfo.aspectRatio!) *
+              trickplayInfo?.data.TileHeight!,
+            transform: [
+              { translateX: -x * tileWidth },
+              { translateY: -y * tileHeight },
+            ],
+            resizeMode: "cover",
+          }}
+          source={{ uri: url }}
+          contentFit='cover'
+        />
+      </View>
+      <Text
+        style={{
+          marginTop: 30,
+          fontSize: 16,
+        }}
+      >
+        {`${time.hours > 0 ? `${time.hours}:` : ""}${
+          time.minutes < 10 ? `0${time.minutes}` : time.minutes
+        }:${time.seconds < 10 ? `0${time.seconds}` : time.seconds}`}
+      </Text>
+    </View>
+  );
+};

components/video-player/controls/VideoScalingModeSelector.tsx

@@ -0,0 +1,97 @@
+import { Ionicons } from "@expo/vector-icons";
+import React from "react";
+import { Platform, TouchableOpacity } from "react-native";
+import { useHaptic } from "@/hooks/useHaptic";
+
+const DropdownMenu = !Platform.isTV ? require("zeego/dropdown-menu") : null;
+
+export type AspectRatio = "default" | "16:9" | "4:3" | "1:1" | "21:9";
+
+interface AspectRatioSelectorProps {
+  currentRatio: AspectRatio;
+  onRatioChange: (ratio: AspectRatio) => void;
+  disabled?: boolean;
+}
+
+interface AspectRatioOption {
+  id: AspectRatio;
+  label: string;
+  description: string;
+}
+
+const ASPECT_RATIO_OPTIONS: AspectRatioOption[] = [
+  {
+    id: "default",
+    label: "Original",
+    description: "Use video's original aspect ratio",
+  },
+  {
+    id: "16:9",
+    label: "16:9",
+    description: "Widescreen (most common)",
+  },
+  {
+    id: "4:3",
+    label: "4:3",
+    description: "Traditional TV format",
+  },
+  {
+    id: "1:1",
+    label: "1:1",
+    description: "Square format",
+  },
+  {
+    id: "21:9",
+    label: "21:9",
+    description: "Ultra-wide cinematic",
+  },
+];
+
+export const AspectRatioSelector: React.FC<AspectRatioSelectorProps> = ({
+  currentRatio,
+  onRatioChange,
+  disabled = false,
+}) => {
+  const lightHapticFeedback = useHaptic("light");
+
+  // Hide on TV platforms since zeego doesn't support TV
+  if (Platform.isTV || !DropdownMenu) return null;
+
+  const handleRatioSelect = (ratio: AspectRatio) => {
+    onRatioChange(ratio);
+    lightHapticFeedback();
+  };
+
+  return (
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger asChild>
+        <TouchableOpacity
+          disabled={disabled}
+          className='aspect-square flex flex-col rounded-xl items-center justify-center p-2'
+          style={{ opacity: disabled ? 0.5 : 1 }}
+        >
+          <Ionicons name='crop-outline' size={24} color='white' />
+        </TouchableOpacity>
+      </DropdownMenu.Trigger>
+
+      <DropdownMenu.Content>
+        <DropdownMenu.Label>Aspect Ratio</DropdownMenu.Label>
+        <DropdownMenu.Separator />
+
+        {ASPECT_RATIO_OPTIONS.map((option) => (
+          <DropdownMenu.CheckboxItem
+            key={option.id}
+            value={currentRatio === option.id ? "on" : "off"}
+            onValueChange={() => handleRatioSelect(option.id)}
+          >
+            <DropdownMenu.ItemTitle>{option.label}</DropdownMenu.ItemTitle>
+            <DropdownMenu.ItemSubtitle>
+              {option.description}
+            </DropdownMenu.ItemSubtitle>
+            <DropdownMenu.ItemIndicator />
+          </DropdownMenu.CheckboxItem>
+        ))}
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
+  );
+};

components/video-player/controls/constants.ts

@@ -0,0 +1,17 @@
+export const CONTROLS_CONSTANTS = {
+  TIMEOUT: 4000,
+  SCRUB_INTERVAL_MS: 10 * 1000, // 10 seconds in ms
+  SCRUB_INTERVAL_TICKS: 10 * 10000000, // 10 seconds in ticks
+  TILE_WIDTH: 150,
+  PROGRESS_UNIT_MS: 1000, // 1 second in ms
+  PROGRESS_UNIT_TICKS: 10000000, // 1 second in ticks
+  LONG_PRESS_INITIAL_SEEK: 10,
+  LONG_PRESS_ACCELERATION: 1.1,
+  LONG_PRESS_INTERVAL: 300,
+  SLIDER_DEBOUNCE_MS: 3,
+} as const;
+
+export const ICON_SIZES = {
+  HEADER: 24,
+  CENTER: 50,
+} as const;

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

@@ -1,3 +1,4 @@
+import { SubtitleDeliveryMethod } from "@jellyfin/sdk/lib/generated-client";
 import { router, useLocalSearchParams } from "expo-router";
 import type React from "react";
 import {
@@ -9,7 +10,6 @@ import {
   useState,
 } from "react";
 import type { TrackInfo } from "@/modules/VlcPlayer.types";
-import { useSettings, VideoPlayer } from "@/utils/atoms/settings";
 import type { Track } from "../types";
 import { useControlContext } from "./ControlContext";
 
@@ -48,7 +48,6 @@ export const VideoProvider: React.FC<VideoProviderProps> = ({
 }) => {
   const [audioTracks, setAudioTracks] = useState<Track[] | null>(null);
   const [subtitleTracks, setSubtitleTracks] = useState<Track[] | null>(null);
-  const [settings] = useSettings();
 
   const ControlContext = useControlContext();
   const isVideoLoaded = ControlContext?.isVideoLoaded;
@@ -67,13 +66,17 @@ export const VideoProvider: React.FC<VideoProviderProps> = ({
       playbackPosition: string;
     }>();
 
-  const onTextBasedSubtitle = useMemo(
-    () =>
+  const onTextBasedSubtitle = useMemo(() => {
+    return (
       allSubs.find(
-        (s) => s.Index?.toString() === subtitleIndex && s.IsTextSubtitleStream,
-      ) || subtitleIndex === "-1",
-    [allSubs, subtitleIndex],
-  );
+        (s) =>
+          s.Index?.toString() === subtitleIndex &&
+          (s.DeliveryMethod === SubtitleDeliveryMethod.Embed ||
+            s.DeliveryMethod === SubtitleDeliveryMethod.Hls ||
+            s.DeliveryMethod === SubtitleDeliveryMethod.External),
+      ) || subtitleIndex === "-1"
+    );
+  }, [allSubs, subtitleIndex]);
 
   const setPlayerParams = ({
     chosenAudioIndex = audioIndex,
@@ -92,7 +95,7 @@ export const VideoProvider: React.FC<VideoProviderProps> = ({
       playbackPosition: playbackPosition,
     }).toString();
 
-    //@ts-ignore
+    //@ts-expect-error
     router.replace(`player/direct-player?${queryParams}`);
   };
 
@@ -128,30 +131,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(),
                   }),
@@ -176,12 +181,11 @@ export const VideoProvider: React.FC<VideoProviderProps> = ({
       }
       if (getAudioTracks) {
         const audioData = await getAudioTracks();
-
         const allAudio =
           mediaSource?.MediaStreams?.filter((s) => s.Type === "Audio") || [];
         const audioTracks: Track[] = allAudio?.map((audio, idx) => {
           if (!mediaSource?.TranscodingUrl) {
-            const vlcIndex = audioData?.at(idx)?.index ?? -1;
+            const vlcIndex = audioData?.at(idx + 1)?.index ?? -1;
             return {
               name: audio.DisplayTitle ?? "Undefined Audio",
               index: audio.Index ?? -1,
@@ -196,6 +200,15 @@ export const VideoProvider: React.FC<VideoProviderProps> = ({
               setPlayerParams({ chosenAudioIndex: audio.Index?.toString() }),
           };
         });
+
+        // Add a "Disable Audio" option if its not transcoding.
+        if (!mediaSource?.TranscodingUrl) {
+          audioTracks.unshift({
+            name: "Disable",
+            index: -1,
+            setTrack: () => setTrackParams("audio", -1, -1),
+          });
+        }
         setAudioTracks(audioTracks);
       }
     };

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

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

components/video-player/controls/hooks/index.ts

@@ -0,0 +1,4 @@
+export { useRemoteControl } from "./useRemoteControl";
+export { useVideoNavigation } from "./useVideoNavigation";
+export { useVideoSlider } from "./useVideoSlider";
+export { useVideoTime } from "./useVideoTime";

components/video-player/controls/hooks/useRemoteControl.ts

@@ -0,0 +1,170 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useTVEventHandler } from "react-native";
+import { type SharedValue, useSharedValue } from "react-native-reanimated";
+import { msToTicks, ticksToSeconds } from "@/utils/time";
+import { CONTROLS_CONSTANTS } from "../constants";
+
+interface UseRemoteControlProps {
+  progress: SharedValue<number>;
+  min: SharedValue<number>;
+  max: SharedValue<number>;
+  isVlc: boolean;
+  showControls: boolean;
+  isPlaying: boolean;
+  seek: (value: number) => void;
+  play: () => void;
+  togglePlay: () => void;
+  toggleControls: () => void;
+  calculateTrickplayUrl: (progressInTicks: number) => void;
+  handleSeekForward: (seconds: number) => void;
+  handleSeekBackward: (seconds: number) => void;
+}
+
+export function useRemoteControl({
+  progress,
+  min,
+  max,
+  isVlc,
+  showControls,
+  isPlaying,
+  seek,
+  play,
+  togglePlay,
+  toggleControls,
+  calculateTrickplayUrl,
+  handleSeekForward,
+  handleSeekBackward,
+}: UseRemoteControlProps) {
+  const remoteScrubProgress = useSharedValue<number | null>(null);
+  const isRemoteScrubbing = useSharedValue(false);
+  const [showRemoteBubble, setShowRemoteBubble] = useState(false);
+  const [longPressScrubMode, setLongPressScrubMode] = useState<
+    "FF" | "RW" | null
+  >(null);
+  const [isSliding, setIsSliding] = useState(false);
+  const [time, setTime] = useState({ hours: 0, minutes: 0, seconds: 0 });
+
+  const longPressTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(
+    null,
+  );
+  const SCRUB_INTERVAL = isVlc
+    ? CONTROLS_CONSTANTS.SCRUB_INTERVAL_MS
+    : CONTROLS_CONSTANTS.SCRUB_INTERVAL_TICKS;
+
+  const updateTime = useCallback(
+    (progressValue: number) => {
+      const progressInTicks = isVlc ? msToTicks(progressValue) : progressValue;
+      const progressInSeconds = Math.floor(ticksToSeconds(progressInTicks));
+      const hours = Math.floor(progressInSeconds / 3600);
+      const minutes = Math.floor((progressInSeconds % 3600) / 60);
+      const seconds = progressInSeconds % 60;
+      setTime({ hours, minutes, seconds });
+    },
+    [isVlc],
+  );
+
+  useTVEventHandler((evt) => {
+    if (!evt) return;
+
+    switch (evt.eventType) {
+      case "longLeft": {
+        setLongPressScrubMode((prev) => (!prev ? "RW" : null));
+        break;
+      }
+      case "longRight": {
+        setLongPressScrubMode((prev) => (!prev ? "FF" : null));
+        break;
+      }
+      case "left":
+      case "right": {
+        isRemoteScrubbing.value = true;
+        setShowRemoteBubble(true);
+
+        const direction = evt.eventType === "left" ? -1 : 1;
+        const base = remoteScrubProgress.value ?? progress.value;
+        const updated = Math.max(
+          min.value,
+          Math.min(max.value, base + direction * SCRUB_INTERVAL),
+        );
+        remoteScrubProgress.value = updated;
+        const progressInTicks = isVlc ? msToTicks(updated) : updated;
+        calculateTrickplayUrl(progressInTicks);
+        updateTime(updated);
+        break;
+      }
+      case "select": {
+        if (isRemoteScrubbing.value && remoteScrubProgress.value != null) {
+          progress.value = remoteScrubProgress.value;
+
+          const seekTarget = isVlc
+            ? Math.max(0, remoteScrubProgress.value)
+            : Math.max(0, ticksToSeconds(remoteScrubProgress.value));
+
+          seek(seekTarget);
+          if (isPlaying) play();
+
+          isRemoteScrubbing.value = false;
+          remoteScrubProgress.value = null;
+          setShowRemoteBubble(false);
+        } else {
+          togglePlay();
+        }
+        break;
+      }
+      case "down":
+      case "up":
+        // cancel scrubbing on other directions
+        isRemoteScrubbing.value = false;
+        remoteScrubProgress.value = null;
+        setShowRemoteBubble(false);
+        break;
+      default:
+        break;
+    }
+
+    if (!showControls) toggleControls();
+  });
+
+  useEffect(() => {
+    let isActive = true;
+    let seekTime = CONTROLS_CONSTANTS.LONG_PRESS_INITIAL_SEEK;
+
+    const scrubWithLongPress = () => {
+      if (!isActive || !longPressScrubMode) return;
+
+      setIsSliding(true);
+      const scrubFn =
+        longPressScrubMode === "FF" ? handleSeekForward : handleSeekBackward;
+      scrubFn(seekTime);
+      seekTime *= CONTROLS_CONSTANTS.LONG_PRESS_ACCELERATION;
+
+      longPressTimeoutRef.current = setTimeout(
+        scrubWithLongPress,
+        CONTROLS_CONSTANTS.LONG_PRESS_INTERVAL,
+      );
+    };
+
+    if (longPressScrubMode) {
+      isActive = true;
+      scrubWithLongPress();
+    }
+
+    return () => {
+      isActive = false;
+      setIsSliding(false);
+      if (longPressTimeoutRef.current) {
+        clearTimeout(longPressTimeoutRef.current);
+        longPressTimeoutRef.current = null;
+      }
+    };
+  }, [longPressScrubMode, handleSeekForward, handleSeekBackward]);
+
+  return {
+    remoteScrubProgress,
+    isRemoteScrubbing,
+    showRemoteBubble,
+    longPressScrubMode,
+    isSliding,
+    time,
+  };
+}

components/video-player/controls/hooks/useVideoNavigation.ts

@@ -0,0 +1,114 @@
+import { useCallback, useRef } from "react";
+import type { SharedValue } from "react-native-reanimated";
+import { useHaptic } from "@/hooks/useHaptic";
+import { useSettings } from "@/utils/atoms/settings";
+import { writeToLog } from "@/utils/log";
+import { secondsToMs, ticksToSeconds } from "@/utils/time";
+
+interface UseVideoNavigationProps {
+  progress: SharedValue<number>;
+  isPlaying: boolean;
+  isVlc: boolean;
+  seek: (value: number) => void;
+  play: () => void;
+}
+
+export function useVideoNavigation({
+  progress,
+  isPlaying,
+  isVlc,
+  seek,
+  play,
+}: UseVideoNavigationProps) {
+  const [settings] = useSettings();
+  const lightHapticFeedback = useHaptic("light");
+  const wasPlayingRef = useRef(false);
+
+  const handleSeekBackward = useCallback(
+    async (seconds: number) => {
+      wasPlayingRef.current = isPlaying;
+      try {
+        const curr = progress.value;
+        if (curr !== undefined) {
+          const newTime = isVlc
+            ? Math.max(0, curr - secondsToMs(seconds))
+            : Math.max(0, ticksToSeconds(curr) - seconds);
+          seek(newTime);
+        }
+      } catch (error) {
+        writeToLog("ERROR", "Error seeking video backwards", error);
+      }
+    },
+    [isPlaying, isVlc, seek, progress],
+  );
+
+  const handleSeekForward = useCallback(
+    async (seconds: number) => {
+      wasPlayingRef.current = isPlaying;
+      try {
+        const curr = progress.value;
+        if (curr !== undefined) {
+          const newTime = isVlc
+            ? curr + secondsToMs(seconds)
+            : ticksToSeconds(curr) + seconds;
+          seek(Math.max(0, newTime));
+        }
+      } catch (error) {
+        writeToLog("ERROR", "Error seeking video forwards", error);
+      }
+    },
+    [isPlaying, isVlc, seek, progress],
+  );
+
+  const handleSkipBackward = useCallback(async () => {
+    if (!settings?.rewindSkipTime) {
+      return;
+    }
+    wasPlayingRef.current = isPlaying;
+    lightHapticFeedback();
+    try {
+      const curr = progress.value;
+      if (curr !== undefined) {
+        const newTime = isVlc
+          ? Math.max(0, curr - secondsToMs(settings.rewindSkipTime))
+          : Math.max(0, ticksToSeconds(curr) - settings.rewindSkipTime);
+        seek(newTime);
+        if (wasPlayingRef.current) {
+          play();
+        }
+      }
+    } catch (error) {
+      writeToLog("ERROR", "Error seeking video backwards", error);
+    }
+  }, [settings, isPlaying, isVlc, play, seek, progress, lightHapticFeedback]);
+
+  const handleSkipForward = useCallback(async () => {
+    if (!settings?.forwardSkipTime) {
+      return;
+    }
+    wasPlayingRef.current = isPlaying;
+    lightHapticFeedback();
+    try {
+      const curr = progress.value;
+      if (curr !== undefined) {
+        const newTime = isVlc
+          ? curr + secondsToMs(settings.forwardSkipTime)
+          : ticksToSeconds(curr) + settings.forwardSkipTime;
+        seek(Math.max(0, newTime));
+        if (wasPlayingRef.current) {
+          play();
+        }
+      }
+    } catch (error) {
+      writeToLog("ERROR", "Error seeking video forwards", error);
+    }
+  }, [settings, isPlaying, isVlc, play, seek, progress, lightHapticFeedback]);
+
+  return {
+    handleSeekBackward,
+    handleSeekForward,
+    handleSkipBackward,
+    handleSkipForward,
+    wasPlayingRef,
+  };
+}

components/video-player/controls/hooks/useVideoSlider.ts

@@ -0,0 +1,99 @@
+import { debounce } from "lodash";
+import { useCallback, useRef, useState } from "react";
+import type { SharedValue } from "react-native-reanimated";
+import { msToTicks, ticksToSeconds } from "@/utils/time";
+import { CONTROLS_CONSTANTS } from "../constants";
+
+interface UseVideoSliderProps {
+  progress: SharedValue<number>;
+  isSeeking: SharedValue<boolean>;
+  isPlaying: boolean;
+  isVlc: boolean;
+  seek: (value: number) => void;
+  play: () => void;
+  pause: () => void;
+  calculateTrickplayUrl: (progressInTicks: number) => void;
+  showControls: boolean;
+}
+
+export function useVideoSlider({
+  progress,
+  isSeeking,
+  isPlaying,
+  isVlc,
+  seek,
+  play,
+  pause,
+  calculateTrickplayUrl,
+  showControls,
+}: UseVideoSliderProps) {
+  const [isSliding, setIsSliding] = useState(false);
+  const [time, setTime] = useState({ hours: 0, minutes: 0, seconds: 0 });
+  const wasPlayingRef = useRef(false);
+  const lastProgressRef = useRef<number>(0);
+
+  const handleSliderStart = useCallback(() => {
+    if (!showControls) {
+      return;
+    }
+
+    setIsSliding(true);
+    wasPlayingRef.current = isPlaying;
+    lastProgressRef.current = progress.value;
+
+    pause();
+    isSeeking.value = true;
+  }, [showControls, isPlaying, pause, progress, isSeeking]);
+
+  const handleTouchStart = useCallback(() => {
+    if (!showControls) {
+      return;
+    }
+  }, [showControls]);
+
+  const handleTouchEnd = useCallback(() => {
+    if (!showControls) {
+      return;
+    }
+  }, [showControls]);
+
+  const handleSliderComplete = useCallback(
+    async (value: number) => {
+      setIsSliding(false);
+      isSeeking.value = false;
+      progress.value = value;
+      const seekValue = Math.max(
+        0,
+        Math.floor(isVlc ? value : ticksToSeconds(value)),
+      );
+      seek(seekValue);
+      if (wasPlayingRef.current) {
+        play();
+      }
+    },
+    [isVlc, seek, play, progress, isSeeking],
+  );
+
+  const handleSliderChange = useCallback(
+    debounce((value: number) => {
+      const progressInTicks = isVlc ? msToTicks(value) : value;
+      calculateTrickplayUrl(progressInTicks);
+      const progressInSeconds = Math.floor(ticksToSeconds(progressInTicks));
+      const hours = Math.floor(progressInSeconds / 3600);
+      const minutes = Math.floor((progressInSeconds % 3600) / 60);
+      const seconds = progressInSeconds % 60;
+      setTime({ hours, minutes, seconds });
+    }, CONTROLS_CONSTANTS.SLIDER_DEBOUNCE_MS),
+    [isVlc, calculateTrickplayUrl],
+  );
+
+  return {
+    isSliding,
+    time,
+    handleSliderStart,
+    handleTouchStart,
+    handleTouchEnd,
+    handleSliderComplete,
+    handleSliderChange,
+  };
+}

components/video-player/controls/hooks/useVideoTime.ts

@@ -0,0 +1,76 @@
+import { useCallback, useRef, useState } from "react";
+import {
+  runOnJS,
+  type SharedValue,
+  useAnimatedReaction,
+} from "react-native-reanimated";
+import { ticksToSeconds } from "@/utils/time";
+
+interface UseVideoTimeProps {
+  progress: SharedValue<number>;
+  max: SharedValue<number>;
+  isSeeking: SharedValue<boolean>;
+  isVlc: boolean;
+}
+
+export function useVideoTime({
+  progress,
+  max,
+  isSeeking,
+  isVlc,
+}: UseVideoTimeProps) {
+  const [currentTime, setCurrentTime] = useState(0);
+  const [remainingTime, setRemainingTime] = useState(Number.POSITIVE_INFINITY);
+
+  const lastCurrentTimeRef = useRef(0);
+  const lastRemainingTimeRef = useRef(0);
+
+  const updateTimes = useCallback(
+    (currentProgress: number, maxValue: number) => {
+      const current = isVlc ? currentProgress : ticksToSeconds(currentProgress);
+      const remaining = isVlc
+        ? maxValue - currentProgress
+        : ticksToSeconds(maxValue - currentProgress);
+
+      // Only update state if the displayed time actually changed (avoid sub-second updates)
+      const currentSeconds = Math.floor(current / (isVlc ? 1000 : 1));
+      const remainingSeconds = Math.floor(remaining / (isVlc ? 1000 : 1));
+      const lastCurrentSeconds = Math.floor(
+        lastCurrentTimeRef.current / (isVlc ? 1000 : 1),
+      );
+      const lastRemainingSeconds = Math.floor(
+        lastRemainingTimeRef.current / (isVlc ? 1000 : 1),
+      );
+
+      if (
+        currentSeconds !== lastCurrentSeconds ||
+        remainingSeconds !== lastRemainingSeconds
+      ) {
+        setCurrentTime(current);
+        setRemainingTime(remaining);
+        lastCurrentTimeRef.current = current;
+        lastRemainingTimeRef.current = remaining;
+      }
+    },
+    [isVlc],
+  );
+
+  useAnimatedReaction(
+    () => ({
+      progress: progress.value,
+      max: max.value,
+      isSeeking: isSeeking.value,
+    }),
+    (result) => {
+      if (!result.isSeeking) {
+        runOnJS(updateTimes)(result.progress, result.max);
+      }
+    },
+    [updateTimes],
+  );
+
+  return {
+    currentTime,
+    remainingTime,
+  };
+}

eas.json

@@ -46,14 +46,14 @@
     },
     "production": {
       "environment": "production",
-      "channel": "0.29.13",
+      "channel": "0.32.1",
       "android": {
         "image": "latest"
       }
     },
     "production-apk": {
       "environment": "production",
-      "channel": "0.29.13",
+      "channel": "0.32.1",
       "android": {
         "buildType": "apk",
         "image": "latest"
@@ -61,7 +61,7 @@
     },
     "production-apk-tv": {
       "environment": "production",
-      "channel": "0.29.13",
+      "channel": "0.32.1",
       "android": {
         "buildType": "apk",
         "image": "latest"

hooks/useAdjacentEpisodes.ts

@@ -1,64 +0,0 @@
-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 { apiAtom } from "@/providers/JellyfinProvider";
-
-interface AdjacentEpisodesProps {
-  item?: BaseItemDto | null;
-}
-
-export const useAdjacentItems = ({ item }: AdjacentEpisodesProps) => {
-  const api = useAtomValue(apiAtom);
-
-  const { data: adjacentItems } = useQuery({
-    queryKey: ["adjacentItems", item?.Id, item?.SeriesId],
-    queryFn: async (): Promise<BaseItemDto[] | null> => {
-      if (!api || !item || !item.SeriesId) {
-        return null;
-      }
-
-      const res = await getTvShowsApi(api).getEpisodes({
-        seriesId: item.SeriesId,
-        adjacentTo: item.Id,
-        limit: 3,
-        fields: ["MediaSources", "MediaStreams", "ParentId"],
-      });
-
-      return res.data.Items || null;
-    },
-    enabled:
-      !!api &&
-      !!item?.Id &&
-      !!item?.SeriesId &&
-      (item?.Type === "Episode" || item?.Type === "Audio"),
-    staleTime: 0,
-  });
-
-  const previousItem = useMemo(() => {
-    if (!adjacentItems || adjacentItems.length <= 1) {
-      return null;
-    }
-
-    if (adjacentItems.length === 2) {
-      return adjacentItems[0].Id === item?.Id ? null : adjacentItems[0];
-    }
-
-    return adjacentItems[0];
-  }, [adjacentItems, item]);
-
-  const nextItem = useMemo(() => {
-    if (!adjacentItems || adjacentItems.length <= 1) {
-      return null;
-    }
-
-    if (adjacentItems.length === 2) {
-      return adjacentItems[1].Id === item?.Id ? null : adjacentItems[1];
-    }
-
-    return adjacentItems[2];
-  }, [adjacentItems, item]);
-
-  return { previousItem, nextItem };
-};

hooks/useCreditSkipper.ts

@@ -1,33 +1,16 @@
-import { useQuery } from "@tanstack/react-query";
-import { useAtom } from "jotai";
 import { useCallback, useEffect, useState } from "react";
-import { apiAtom } from "@/providers/JellyfinProvider";
-import { getAuthHeaders } from "@/utils/jellyfin/jellyfin";
-import { writeToLog } from "@/utils/log";
+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,52 +26,30 @@ 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]);
+  }, [creditTimestamps, lightHapticFeedback, wrappedSeek, play]);
 
   return { showSkipCreditButton, skipCredit };
 };

hooks/useDownloadedFileOpener.ts

@@ -1,41 +1,28 @@
 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";
 import { usePlaySettings } from "@/providers/PlaySettingsProvider";
 import { writeToLog } from "@/utils/log";
 
-export const getDownloadedFileUrl = async (itemId: string): Promise<string> => {
-  const directory = FileSystem.documentDirectory;
-
-  if (!directory) {
-    throw new Error("Document directory is not available");
-  }
-
-  if (!itemId) {
-    throw new Error("Item ID is not available");
-  }
-
-  const files = await FileSystem.readDirectoryAsync(directory);
-  const path = itemId!;
-  const matchingFile = files.find((file) => file.startsWith(path));
-
-  if (!matchingFile) {
-    throw new Error(`No file found for item ${path}`);
-  }
-
-  return `${directory}${matchingFile}`;
-};
-
 export const useDownloadedFileOpener = () => {
   const router = useRouter();
   const { setPlayUrl, setOfflineSettings } = usePlaySettings();
 
   const openFile = useCallback(
     async (item: BaseItemDto) => {
+      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 { useQuery } from "@tanstack/react-query";
-import { useAtom } from "jotai";
 import { useCallback, useEffect, useState } from "react";
-import { apiAtom } from "@/providers/JellyfinProvider";
-import { getAuthHeaders } from "@/utils/jellyfin/jellyfin";
-import { writeToLog } from "@/utils/log";
+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,14 +46,14 @@ 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]);
+  }, [introTimestamps, lightHapticFeedback, wrappedSeek, play]);
 
   return { showSkipButton, skipIntro };
 };

hooks/useItemQuery.ts

@@ -0,0 +1,31 @@
+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 { getDownloadedItemById } = useDownload();
+
+  return useQuery({
+    queryKey: ["item", itemId],
+    queryFn: async () => {
+      if (isOffline) {
+        return getDownloadedItemById(itemId)?.item;
+      }
+      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,25 @@
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { useQueryClient } from "@tanstack/react-query";
-import { useAtom } from "jotai";
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { markAsNotPlayed } from "@/utils/jellyfin/playstate/markAsNotPlayed";
-import { markAsPlayed } from "@/utils/jellyfin/playstate/markAsPlayed";
 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 { markItemPlayed, markItemUnplayed } = usePlaybackManager();
+  const invalidatePlaybackProgressCache = useInvalidatePlaybackProgressCache();
 
-  const invalidateQueries = () => {
-    const queriesToInvalidate = [
-      ["resumeItems"],
-      ["continueWatching"],
-      ["nextUp-all"],
-      ["nextUp"],
-      ["episodes"],
-      ["seasons"],
-      ["home"],
-    ];
-
-    items.forEach((item) => {
-      if (!item.Id) return;
-      queriesToInvalidate.push(["item", item.Id]);
-    });
-
-    queriesToInvalidate.forEach((queryKey) => {
-      queryClient.invalidateQueries({ queryKey });
-    });
-  };
-
-  const markAsPlayedStatus = async (played: boolean) => {
+  const toggle = async (played: boolean) => {
     lightHapticFeedback();
+    // Process all items
+    await Promise.all(
+      items.map((item) => {
+        if (!item.Id) return Promise.resolve();
+        return played ? markItemPlayed(item.Id) : markItemUnplayed(item.Id);
+      }),
+    );
 
-    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);
-    }
-
-    invalidateQueries();
+    await invalidatePlaybackProgressCache();
   };
 
-  return markAsPlayedStatus;
+  return toggle;
 };

hooks/usePlaybackManager.ts

@@ -0,0 +1,299 @@
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+import { getPlaystateApi, getTvShowsApi } from "@jellyfin/sdk/lib/utils/api";
+import { useNetInfo } from "@react-native-community/netinfo";
+import { useQuery } from "@tanstack/react-query";
+import { useAtomValue } from "jotai";
+import { useMemo } from "react";
+import { useDownload } from "@/providers/DownloadProvider";
+import { DownloadedItem } from "@/providers/Downloads/types";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+
+interface PlaybackManagerProps {
+  item?: BaseItemDto | null;
+  isOffline?: boolean;
+}
+
+/**
+ * Gets adjacent items (previous/current/next) for offline mode from downloaded files
+ */
+const getOfflineAdjacentItems = (
+  item: BaseItemDto,
+  downloadedFiles: DownloadedItem[],
+): BaseItemDto[] | null => {
+  if (!item.SeriesId || !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;
+};
+
+/**
+ * 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 = ({
+  item,
+  isOffline = false,
+}: PlaybackManagerProps = {}) => {
+  const api = useAtomValue(apiAtom);
+  const user = useAtomValue(userAtom);
+  const netInfo = useNetInfo();
+  const { getDownloadedItemById, updateDownloadedItem, getDownloadedItems } =
+    useDownload();
+
+  /** Whether the device is online. actually it's connected to the internet. */
+  const isOnline = useMemo(() => netInfo.isConnected, [netInfo.isConnected]);
+
+  // Adjacent episodes logic
+  const { data: adjacentItems } = useQuery({
+    queryKey: ["adjacentItems", item?.Id, item?.SeriesId, isOffline],
+    queryFn: async (): Promise<BaseItemDto[] | null> => {
+      if (!item || !item.SeriesId) {
+        return null;
+      }
+
+      if (isOffline) {
+        return getOfflineAdjacentItems(item, getDownloadedItems() || []);
+      }
+
+      if (!api) {
+        return null;
+      }
+
+      const res = await getTvShowsApi(api).getEpisodes({
+        seriesId: item.SeriesId,
+        adjacentTo: item.Id,
+        limit: 3,
+        fields: ["MediaSources", "MediaStreams", "ParentId"],
+      });
+
+      return res.data.Items || null;
+    },
+    enabled:
+      (isOffline || !!api) &&
+      !!item?.Id &&
+      !!item?.SeriesId &&
+      (item?.Type === "Episode" || item?.Type === "Audio"),
+    staleTime: 0,
+  });
+
+  const previousItem = useMemo(() => {
+    if (!adjacentItems || adjacentItems.length <= 1) {
+      return null;
+    }
+
+    if (adjacentItems.length === 2) {
+      return adjacentItems[0].Id === item?.Id ? null : adjacentItems[0];
+    }
+
+    return adjacentItems[0];
+  }, [adjacentItems, item]);
+
+  /** The next item in the series */
+  const nextItem = useMemo(() => {
+    if (!adjacentItems || adjacentItems.length <= 1) {
+      return null;
+    }
+
+    if (adjacentItems.length === 2) {
+      return adjacentItems[1].Id === item?.Id ? null : adjacentItems[1];
+    }
+
+    return adjacentItems[2];
+  }, [adjacentItems, item]);
+
+  /**
+   * 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 runTimeTicks = localItem.item.RunTimeTicks ?? 0;
+      const playedPercentage =
+        runTimeTicks > 0 ? (positionTicks / runTimeTicks) * 100 : 0;
+
+      // Jellyfin thresholds
+      const MINIMUM_PERCENTAGE = 5; // 5% minimum to save progress
+      const PLAYED_THRESHOLD_PERCENTAGE = 90; // 90% to mark as played
+
+      const isItemConsideredPlayed =
+        playedPercentage > PLAYED_THRESHOLD_PERCENTAGE;
+      const meetsMinimumPercentage = playedPercentage >= MINIMUM_PERCENTAGE;
+
+      const shouldSaveProgress =
+        meetsMinimumPercentage && !isItemConsideredPlayed;
+
+      updateDownloadedItem(itemId, {
+        ...localItem,
+        item: {
+          ...localItem.item,
+          UserData: {
+            ...localItem.item.UserData,
+            PlaybackPositionTicks:
+              isItemConsideredPlayed || !shouldSaveProgress
+                ? 0
+                : Math.floor(positionTicks),
+            Played: isItemConsideredPlayed,
+            LastPlayedDate: new Date().toISOString(),
+            PlayedPercentage:
+              isItemConsideredPlayed || !shouldSaveProgress
+                ? 0
+                : playedPercentage,
+          },
+        },
+      });
+    }
+
+    // Handle remote state update if online
+    if (isOnline && api) {
+      try {
+        await getPlaystateApi(api).reportPlaybackProgress({
+          playbackProgressInfo: {
+            ItemId: itemId,
+            PositionTicks: Math.floor(positionTicks),
+            ...(metadata && { AudioStreamIndex: metadata.AudioStreamIndex }),
+            ...(metadata && {
+              SubtitleStreamIndex: metadata.SubtitleStreamIndex,
+            }),
+          },
+        });
+      } catch (error) {
+        console.error("Failed to report playback progress", error);
+      }
+    }
+  };
+
+  /**
+   * 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,
+        });
+      } 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,
+        });
+      } catch (error) {
+        console.error("Failed to mark item as unplayed on server", error);
+      }
+    }
+  };
+
+  return {
+    reportPlaybackProgress,
+    markItemPlayed,
+    markItemUnplayed,
+    previousItem,
+    nextItem,
+  };
+};

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 { getDownloadedItems } = useDownload();
+  const { syncPlaybackState } = useTwoWaySync();
 
   const revalidate = async () => {
     // List of all the queries to invalidate
@@ -17,11 +21,34 @@ 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 }),
+      ),
+    );
+
+    const downloadedFiles = getDownloadedItems();
+    // 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,80 @@
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
 import { Image } from "expo-image";
-import { useAtom } from "jotai";
+import { useGlobalSearchParams } from "expo-router";
 import { useCallback, useMemo, useRef, useState } from "react";
+import { useDownload } from "@/providers/DownloadProvider";
 import { apiAtom } from "@/providers/JellyfinProvider";
+import { store } from "@/utils/store";
 import { ticksToMs } from "@/utils/time";
 
-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,136 +83,93 @@ interface TrickplayData {
   ThumbnailCount?: number;
 }
 
-interface TrickplayUrl {
-  x: number;
-  y: number;
-  url: string;
+export interface TrickplayInfo {
+  resolution: string;
+  aspectRatio: number;
+  data: TrickplayData;
+  totalImageSheets: number;
 }
 
-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
+/** 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}`;
+};
 
-  const trickplayInfo = useMemo(() => {
-    if (!enabled || !item.Id || !item.Trickplay) {
-      return null;
-    }
+/**
+ * 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 mediaSourceId = item.Id;
-    const trickplayData: Record<string, TrickplayData> | undefined =
-      item.Trickplay[mediaSourceId];
+  const mediaSourceId = item.Id;
+  const trickplayDataForSource = item.Trickplay[mediaSourceId];
 
-    if (!trickplayData) {
-      return null;
-    }
+  if (!trickplayDataForSource) {
+    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 firstResolution = Object.keys(trickplayDataForSource)[0];
+  if (!firstResolution) {
+    return null;
+  }
 
-  // Takes in ticks.
-  const calculateTrickplayUrl = useCallback(
-    (progress: number) => {
-      if (!enabled) {
-        return null;
-      }
+  const data = trickplayDataForSource[firstResolution];
+  const { Interval, TileWidth, TileHeight, Width, Height } = data;
 
-      const now = Date.now();
-      if (now - lastCalculationTime.current < throttleDelay) {
-        return null;
-      }
-      lastCalculationTime.current = now;
+  if (
+    !Interval ||
+    !TileWidth ||
+    !TileHeight ||
+    !Width ||
+    !Height ||
+    !item.RunTimeTicks
+  ) {
+    return null;
+  }
 
-      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,86 @@
+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";
+
+/**
+ * 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();
+
+  /**
+   * 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.
+      try {
+        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,
+          },
+        });
+      } catch (error) {
+        console.error(
+          "Failed to update item user data during syncPlaybackState:",
+          error,
+        );
+      }
+      return true;
+    }
+    return false;
+  };
+
+  return { syncPlaybackState };
+};

modules/VlcPlayer.types.ts

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

modules/VlcPlayerView.tsx

@@ -1,7 +1,6 @@
 import { requireNativeViewManager } from "expo-modules-core";
 import * as React from "react";
-import { Platform, ViewStyle } from "react-native";
-import { useSettings, VideoPlayer } from "@/utils/atoms/settings";
+import { ViewStyle } from "react-native";
 import type {
   VlcPlayerSource,
   VlcPlayerViewProps,
@@ -13,20 +12,10 @@ interface NativeViewRef extends VlcPlayerViewRef {
 }
 
 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} />;
   },
 );
@@ -94,8 +83,14 @@ 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);
+      },
+      setVideoAspectRatio: async (aspectRatio: string | null) => {
+        await nativeRef.current?.setVideoAspectRatio(aspectRatio);
+      },
+      setVideoScaleFactor: async (scaleFactor: number) => {
+        await nativeRef.current?.setVideoScaleFactor(scaleFactor);
       },
     }));
 

modules/vlc-player-3/expo-module.config.json

@@ -1,6 +0,0 @@
-{
-  "platforms": ["ios", "tvos"],
-  "ios": {
-    "modules": ["VlcPlayer3Module"]
-  }
-}

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

@@ -1,392 +0,0 @@
-import ExpoModulesCore
-
-#if os(tvOS)
-    import TVVLCKit
-#else
-    import MobileVLCKit
-#endif
-
-class VlcPlayer3View: ExpoView {
-    private var mediaPlayer: VLCMediaPlayer?
-    private var videoView: UIView?
-    private var progressUpdateInterval: TimeInterval = 1.0  // Update interval set to 1 second
-    private var isPaused: Bool = false
-    private var currentGeometryCString: [CChar]?
-    private var lastReportedState: VLCMediaPlayerState?
-    private var lastReportedIsPlaying: Bool?
-    private var customSubtitles: [(internalName: String, originalName: String)] = []
-    private var startPosition: Int32 = 0
-    private var externalSubtitles: [[String: String]]?
-    private var externalTrack: [String: String]?
-    private var progressTimer: DispatchSourceTimer?
-    private var isStopping: Bool = false  // Define isStopping here
-    private var lastProgressCall = Date().timeIntervalSince1970
-    var hasSource = false
-
-    // MARK: - Initialization
-
-    required init(appContext: AppContext? = nil) {
-        super.init(appContext: appContext)
-        setupView()
-        setupNotifications()
-    }
-
-    // MARK: - Setup
-
-    private func setupView() {
-        DispatchQueue.main.async {
-            self.backgroundColor = .black
-            self.videoView = UIView()
-            self.videoView?.translatesAutoresizingMaskIntoConstraints = false
-
-            if let videoView = self.videoView {
-                self.addSubview(videoView)
-                NSLayoutConstraint.activate([
-                    videoView.leadingAnchor.constraint(equalTo: self.leadingAnchor),
-                    videoView.trailingAnchor.constraint(equalTo: self.trailingAnchor),
-                    videoView.topAnchor.constraint(equalTo: self.topAnchor),
-                    videoView.bottomAnchor.constraint(equalTo: self.bottomAnchor),
-                ])
-            }
-        }
-    }
-
-    private func setupNotifications() {
-        NotificationCenter.default.addObserver(
-            self, selector: #selector(applicationWillResignActive),
-            name: UIApplication.willResignActiveNotification, object: nil)
-        NotificationCenter.default.addObserver(
-            self, selector: #selector(applicationDidBecomeActive),
-            name: UIApplication.didBecomeActiveNotification, object: nil)
-    }
-
-    // MARK: - Public Methods
-    func startPictureInPicture() {}
-
-    @objc func play() {
-        self.mediaPlayer?.play()
-        self.isPaused = false
-        print("Play")
-    }
-
-    @objc func pause() {
-        self.mediaPlayer?.pause()
-        self.isPaused = true
-    }
-
-    @objc func seekTo(_ time: Int32) {
-        guard let player = self.mediaPlayer else { return }
-
-        let wasPlaying = player.isPlaying
-        if wasPlaying {
-            self.pause()
-        }
-
-        if let duration = player.media?.length.intValue {
-            print("Seeking to time: \(time) Video Duration \(duration)")
-
-            // 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()
-            }
-            self.updatePlayerState()
-        } else {
-            print("Error: Unable to retrieve video duration")
-        }
-    }
-
-    @objc func setSource(_ source: [String: Any]) {
-        DispatchQueue.main.async { [weak self] in
-            guard let self = self else { return }
-            if self.hasSource {
-                return
-            }
-
-            let mediaOptions = source["mediaOptions"] as? [String: Any] ?? [:]
-            self.externalTrack = source["externalTrack"] as? [String: String]
-            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
-            }
-
-            let autoplay = source["autoplay"] as? Bool ?? false
-            let isNetwork = source["isNetwork"] as? Bool ?? false
-
-            self.onVideoLoadStart?(["target": self.reactTag ?? NSNull()])
-            self.mediaPlayer = VLCMediaPlayer(options: initOptions)
-            self.mediaPlayer?.delegate = self
-            self.mediaPlayer?.drawable = self.videoView
-            self.mediaPlayer?.scaleFactor = 0
-
-            let media: VLCMedia
-            if isNetwork {
-                print("Loading network file: \(uri)")
-                media = VLCMedia(url: URL(string: uri)!)
-            } else {
-                print("Loading local file: \(uri)")
-                if uri.starts(with: "file://"), let url = URL(string: uri) {
-                    media = VLCMedia(url: url)
-                } else {
-                    media = VLCMedia(path: uri)
-                }
-            }
-
-            print("Debug: Media options: \(mediaOptions)")
-            media.addOptions(mediaOptions)
-
-            self.mediaPlayer?.media = media
-            self.setInitialExternalSubtitles()
-            self.hasSource = true
-            if autoplay {
-                print("Playing...")
-                self.play()
-            }
-        }
-    }
-
-    @objc func setAudioTrack(_ trackIndex: Int) {
-        self.mediaPlayer?.currentAudioTrackIndex = Int32(trackIndex)
-    }
-
-    @objc func getAudioTracks() -> [[String: Any]]? {
-        guard let trackNames = mediaPlayer?.audioTrackNames,
-            let trackIndexes = mediaPlayer?.audioTrackIndexes
-        else {
-            return nil
-        }
-
-        return zip(trackNames, trackIndexes).map { name, index in
-            return ["name": name, "index": index]
-        }
-    }
-
-    @objc func setSubtitleTrack(_ trackIndex: Int) {
-        print("Debug: Attempting to set subtitle track to index: \(trackIndex)")
-        self.mediaPlayer?.currentVideoSubTitleIndex = Int32(trackIndex)
-        print(
-            "Debug: Current subtitle track index after setting: \(self.mediaPlayer?.currentVideoSubTitleIndex ?? -1)"
-        )
-    }
-
-    @objc func setSubtitleURL(_ subtitleURL: String, name: String) {
-        guard let url = URL(string: subtitleURL) else {
-            print("Error: Invalid subtitle URL")
-            return
-        }
-
-        let result = self.mediaPlayer?.addPlaybackSlave(url, type: .subtitle, enforce: false)
-        if let result = result {
-            let internalName = "Track \(self.customSubtitles.count)"
-            print("Subtitle added with result: \(result) \(internalName)")
-            self.customSubtitles.append((internalName: internalName, originalName: name))
-        } else {
-            print("Failed to add subtitle")
-        }
-    }
-
-    private func setInitialExternalSubtitles() {
-        if let externalSubtitles = self.externalSubtitles {
-            for subtitle in externalSubtitles {
-                if let subtitleName = subtitle["name"],
-                    let subtitleURL = subtitle["DeliveryUrl"]
-                {
-                    print("Setting external subtitle: \(subtitleName) \(subtitleURL)")
-                    self.setSubtitleURL(subtitleURL, name: subtitleName)
-                }
-            }
-        }
-    }
-
-    @objc func getSubtitleTracks() -> [[String: Any]]? {
-        guard let mediaPlayer = self.mediaPlayer else {
-            return nil
-        }
-
-        let count = mediaPlayer.numberOfSubtitlesTracks
-        print("Debug: Number of subtitle tracks: \(count)")
-
-        guard count > 0 else {
-            return nil
-        }
-
-        var tracks: [[String: Any]] = []
-
-        if let names = mediaPlayer.videoSubTitlesNames as? [String],
-            let indexes = mediaPlayer.videoSubTitlesIndexes as? [NSNumber]
-        {
-            for (index, name) in zip(indexes, names) {
-                if let customSubtitle = customSubtitles.first(where: { $0.internalName == name }) {
-                    tracks.append(["name": customSubtitle.originalName, "index": index.intValue])
-                } else {
-                    tracks.append(["name": name, "index": index.intValue])
-                }
-            }
-        }
-
-        print("Debug: Subtitle tracks: \(tracks)")
-        return tracks
-    }
-
-    @objc func stop(completion: (() -> Void)? = nil) {
-        guard !isStopping else {
-            completion?()
-            return
-        }
-        isStopping = true
-
-        // If we're not on the main thread, dispatch to main thread
-        if !Thread.isMainThread {
-            DispatchQueue.main.async { [weak self] in
-                self?.performStop(completion: completion)
-            }
-        } else {
-            performStop(completion: completion)
-        }
-    }
-
-    // MARK: - Private Methods
-
-    @objc private func applicationWillResignActive() {
-
-    }
-
-    @objc private func applicationDidBecomeActive() {
-
-    }
-
-    private func performStop(completion: (() -> Void)? = nil) {
-        // Stop the media player
-        mediaPlayer?.stop()
-
-        // Remove observer
-        NotificationCenter.default.removeObserver(self)
-
-        // Clear the video view
-        videoView?.removeFromSuperview()
-        videoView = nil
-
-        // Release the media player
-        mediaPlayer?.delegate = nil
-        mediaPlayer = nil
-
-        isStopping = false
-        completion?()
-    }
-
-    private func updateVideoProgress() {
-        guard let player = self.mediaPlayer else { return }
-
-        let currentTimeMs = player.time.intValue
-        let durationMs = player.media?.length.intValue ?? 0
-
-        print("Debug: Current time: \(currentTimeMs)")
-        if currentTimeMs >= 0 && currentTimeMs < durationMs {
-            self.onVideoProgress?([
-                "currentTime": currentTimeMs,
-                "duration": durationMs,
-            ])
-        }
-    }
-
-    // MARK: - Expo Events
-
-    @objc var onPlaybackStateChanged: RCTDirectEventBlock?
-    @objc var onVideoLoadStart: RCTDirectEventBlock?
-    @objc var onVideoStateChange: RCTDirectEventBlock?
-    @objc var onVideoProgress: RCTDirectEventBlock?
-    @objc var onVideoLoadEnd: RCTDirectEventBlock?
-    @objc var onVideoError: RCTDirectEventBlock?
-    @objc var onPipStarted: RCTDirectEventBlock?
-
-    // MARK: - Deinitialization
-
-    deinit {
-        performStop()
-    }
-}
-
-extension VlcPlayer3View: VLCMediaPlayerDelegate {
-    func mediaPlayerTimeChanged(_ aNotification: Notification) {
-        // self?.updateVideoProgress()
-        let timeNow = Date().timeIntervalSince1970
-        if timeNow - lastProgressCall >= 1 {
-            lastProgressCall = timeNow
-            updateVideoProgress()
-        }
-    }
-
-    func mediaPlayerStateChanged(_ aNotification: Notification) {
-        self.updatePlayerState()
-    }
-
-    private func updatePlayerState() {
-        guard let player = self.mediaPlayer else { return }
-        let currentState = player.state
-
-        var stateInfo: [String: Any] = [
-            "target": self.reactTag ?? NSNull(),
-            "currentTime": player.time.intValue,
-            "duration": player.media?.length.intValue ?? 0,
-            "error": false,
-        ]
-
-        if player.isPlaying {
-            stateInfo["isPlaying"] = true
-            stateInfo["isBuffering"] = false
-            stateInfo["state"] = "Playing"
-        } else {
-            stateInfo["isPlaying"] = false
-            stateInfo["state"] = "Paused"
-        }
-
-        if player.state == VLCMediaPlayerState.buffering {
-            stateInfo["isBuffering"] = true
-            stateInfo["state"] = "Buffering"
-        } else if player.state == VLCMediaPlayerState.error {
-            print("player.state ~ error")
-            stateInfo["state"] = "Error"
-            self.onVideoLoadEnd?(stateInfo)
-        } else if player.state == VLCMediaPlayerState.opening {
-            print("player.state ~ opening")
-            stateInfo["state"] = "Opening"
-        }
-
-        if self.lastReportedState != currentState
-            || self.lastReportedIsPlaying != player.isPlaying
-        {
-            self.lastReportedState = currentState
-            self.lastReportedIsPlaying = player.isPlaying
-            self.onVideoStateChange?(stateInfo)
-        }
-
-    }
-}
-
-extension VlcPlayer3View: VLCMediaDelegate {
-    // Implement VLCMediaDelegate methods if needed
-}
-
-extension VLCMediaPlayerState {
-    var description: String {
-        switch self {
-        case .opening: return "Opening"
-        case .buffering: return "Buffering"
-        case .playing: return "Playing"
-        case .paused: return "Paused"
-        case .stopped: return "Stopped"
-        case .ended: return "Ended"
-        case .error: return "Error"
-        case .esAdded: return "ESAdded"
-        @unknown default: return "Unknown"
-        }
-    }
-}

modules/vlc-player-4/expo-module.config.json

@@ -0,0 +1,7 @@
+{
+  "platforms": ["ios", "tvos"],
+  "ios": {
+    "modules": ["VlcPlayer4Module"],
+    "appDelegateSubscribers": ["AppLifecycleDelegate"]
+  }
+}

modules/vlc-player-4/ios/AppLifecycleDelegate.swift

@@ -29,4 +29,4 @@ public class AppLifecycleDelegate: ExpoAppDelegateSubscriber {
   public func applicationWillTerminate(_ application: UIApplication) {
     // The app is about to terminate.
   }
-}
+}

modules/vlc-player-4/ios/VlcPlayer4.podspec

@@ -1,23 +1,22 @@
 Pod::Spec.new do |s|
-  s.name           = 'VlcPlayer3'
-  s.version        = '3.6.1b1'
+  s.name           = 'VlcPlayer4'
+  s.version        = '4.0.0a10'
   s.summary        = 'A sample project summary'
   s.description    = 'A sample project description'
   s.author         = ''
   s.homepage       = 'https://docs.expo.dev/modules/'
-  s.platforms      = { :ios => '13.4', :tvos => '13.4' }
+  s.platforms      = { :ios => '13.4', :tvos => '16' }
   s.source         = { git: '' }
   s.static_framework = true
 
   s.dependency 'ExpoModulesCore'
-  s.ios.dependency 'MobileVLCKit', s.version
-  s.tvos.dependency 'TVVLCKit', s.version
+  s.ios.dependency 'VLCKit', s.version
+  s.tvos.dependency 'VLCKit', s.version
 
   # Swift/Objective-C compatibility
   s.pod_target_xcconfig = {
     'DEFINES_MODULE' => 'YES',
     'SWIFT_COMPILATION_MODE' => 'wholemodule'
   }
-
   s.source_files = "*.{h,m,mm,swift,hpp,cpp}"
 end

modules/vlc-player-4/ios/VlcPlayer4Module.swift

@@ -1,14 +1,14 @@
 import ExpoModulesCore
 
-public class VlcPlayer3Module: Module {
+public class VlcPlayer4Module: Module {
     public func definition() -> ModuleDefinition {
-        Name("VlcPlayer3")
-        View(VlcPlayer3View.self) {
-            Prop("source") { (view: VlcPlayer3View, source: [String: Any]) in
+        Name("VlcPlayer4")
+        View(VlcPlayer4View.self) {
+            Prop("source") { (view: VlcPlayer4View, source: [String: Any]) in
                 view.setSource(source)
             }
 
-            Prop("paused") { (view: VlcPlayer3View, paused: Bool) in
+            Prop("paused") { (view: VlcPlayer4View, paused: Bool) in
                 if paused {
                     view.pause()
                 } else {
@@ -26,44 +26,44 @@ public class VlcPlayer3Module: Module {
                 "onPipStarted"
             )
 
-            AsyncFunction("startPictureInPicture") { (view: VlcPlayer3View) in
+            AsyncFunction("startPictureInPicture") { (view: VlcPlayer4View) in
                 view.startPictureInPicture()
             }
 
-            AsyncFunction("play") { (view: VlcPlayer3View) in
+            AsyncFunction("play") { (view: VlcPlayer4View) in
                 view.play()
             }
 
-            AsyncFunction("pause") { (view: VlcPlayer3View) in
+            AsyncFunction("pause") { (view: VlcPlayer4View) in
                 view.pause()
             }
 
-            AsyncFunction("stop") { (view: VlcPlayer3View) in
+            AsyncFunction("stop") { (view: VlcPlayer4View) in
                 view.stop()
             }
 
-            AsyncFunction("seekTo") { (view: VlcPlayer3View, time: Int32) in
+            AsyncFunction("seekTo") { (view: VlcPlayer4View, time: Int32) in
                 view.seekTo(time)
             }
 
-            AsyncFunction("setAudioTrack") { (view: VlcPlayer3View, trackIndex: Int) in
+            AsyncFunction("setAudioTrack") { (view: VlcPlayer4View, trackIndex: Int) in
                 view.setAudioTrack(trackIndex)
             }
 
-            AsyncFunction("getAudioTracks") { (view: VlcPlayer3View) -> [[String: Any]]? in
+            AsyncFunction("getAudioTracks") { (view: VlcPlayer4View) -> [[String: Any]]? in
                 return view.getAudioTracks()
             }
 
-            AsyncFunction("setSubtitleTrack") { (view: VlcPlayer3View, trackIndex: Int) in
+            AsyncFunction("setSubtitleTrack") { (view: VlcPlayer4View, trackIndex: Int) in
                 view.setSubtitleTrack(trackIndex)
             }
 
-            AsyncFunction("getSubtitleTracks") { (view: VlcPlayer3View) -> [[String: Any]]? in
+            AsyncFunction("getSubtitleTracks") { (view: VlcPlayer4View) -> [[String: Any]]? in
                 return view.getSubtitleTracks()
             }
 
             AsyncFunction("setSubtitleURL") {
-                (view: VlcPlayer3View, url: String, name: String) in
+                (view: VlcPlayer4View, url: String, name: String) in
                 view.setSubtitleURL(url, name: name)
             }
         }

modules/vlc-player-4/ios/VlcPlayer4View.swift

@@ -0,0 +1,507 @@
+import ExpoModulesCore
+import UIKit
+import VLCKit
+import os
+
+public class VLCPlayerView: UIView {
+    func setupView(parent: UIView) {
+        self.backgroundColor = .black
+        self.translatesAutoresizingMaskIntoConstraints = false
+        NSLayoutConstraint.activate([
+            self.leadingAnchor.constraint(equalTo: parent.leadingAnchor),
+            self.trailingAnchor.constraint(equalTo: parent.trailingAnchor),
+            self.topAnchor.constraint(equalTo: parent.topAnchor),
+            self.bottomAnchor.constraint(equalTo: parent.bottomAnchor),
+        ])
+    }
+
+    public override func layoutSubviews() {
+        super.layoutSubviews()
+
+        for subview in subviews {
+            subview.frame = bounds
+        }
+    }
+}
+
+class VLCPlayerWrapper: NSObject {
+    private var lastProgressCall = Date().timeIntervalSince1970
+    public var player: VLCMediaPlayer = VLCMediaPlayer()
+    private var updatePlayerState: (() -> Void)?
+    private var updateVideoProgress: (() -> Void)?
+    private var playerView: VLCPlayerView = VLCPlayerView()
+    public weak var pipController: VLCPictureInPictureWindowControlling?
+
+    override public init() {
+        super.init()
+        player.delegate = self
+        player.drawable = self
+        player.scaleFactor = 0
+    }
+
+    public func setup(
+        parent: UIView,
+        updatePlayerState: (() -> Void)?,
+        updateVideoProgress: (() -> Void)?
+    ) {
+        self.updatePlayerState = updatePlayerState
+        self.updateVideoProgress = updateVideoProgress
+
+        player.delegate = self
+        parent.addSubview(playerView)
+        playerView.setupView(parent: parent)
+    }
+
+    public func getPlayerView() -> UIView {
+        return playerView
+    }
+}
+
+// MARK: - VLCPictureInPictureDrawable
+extension VLCPlayerWrapper: VLCPictureInPictureDrawable {
+    public func mediaController() -> (any VLCPictureInPictureMediaControlling)! {
+        return self
+    }
+
+    public func pictureInPictureReady() -> (((any VLCPictureInPictureWindowControlling)?) -> Void)!
+    {
+        return { [weak self] controller in
+            self?.pipController = controller
+        }
+    }
+}
+
+// MARK: - VLCPictureInPictureMediaControlling
+extension VLCPlayerWrapper: VLCPictureInPictureMediaControlling {
+    func mediaTime() -> Int64 {
+        return player.time.value?.int64Value ?? 0
+    }
+
+    func mediaLength() -> Int64 {
+        return player.media?.length.value?.int64Value ?? 0
+    }
+
+    func play() {
+        player.play()
+    }
+
+    func pause() {
+        player.pause()
+    }
+
+    func seek(by offset: Int64, completion: @escaping () -> Void) {
+        player.jump(withOffset: Int32(offset), completion: completion)
+    }
+
+    func isMediaSeekable() -> Bool {
+        return player.isSeekable
+    }
+
+    func isMediaPlaying() -> Bool {
+        return player.isPlaying
+    }
+}
+
+// MARK: - VLCDrawable
+extension VLCPlayerWrapper: VLCDrawable {
+    public func addSubview(_ view: UIView) {
+        playerView.addSubview(view)
+    }
+
+    public func bounds() -> CGRect {
+        return playerView.bounds
+    }
+}
+
+// MARK: - VLCMediaPlayerDelegate
+extension VLCPlayerWrapper: VLCMediaPlayerDelegate {
+    func mediaPlayerTimeChanged(_ aNotification: Notification) {
+        DispatchQueue.main.async { [weak self] in
+            guard let self = self else { return }
+            let timeNow = Date().timeIntervalSince1970
+            if timeNow - self.lastProgressCall >= 1 {
+                self.lastProgressCall = timeNow
+                self.updateVideoProgress?()
+            }
+        }
+    }
+
+    func mediaPlayerStateChanged(_ state: VLCMediaPlayerState) {
+        DispatchQueue.main.async { [weak self] in
+            guard let self = self else { return }
+            self.updatePlayerState?()
+
+            guard let pipController = self.pipController else { return }
+            pipController.invalidatePlaybackState()
+        }
+    }
+}
+
+
+
+class VlcPlayer4View: ExpoView {
+    let logger = Logger(subsystem: Bundle.main.bundleIdentifier!, category: "VlcPlayer4View")
+
+    private var vlc: VLCPlayerWrapper = VLCPlayerWrapper()
+    private var progressUpdateInterval: TimeInterval = 1.0  // Update interval set to 1 second
+    private var isPaused: Bool = false
+    private var customSubtitles: [(internalName: String, originalName: String)] = []
+    private var startPosition: Int32 = 0
+    private var externalTrack: [String: String]?
+    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) {
+        super.init(appContext: appContext)
+        setupVLC()
+        setupNotifications()
+        VLCManager.shared.listeners.append(self)
+    }
+
+    // MARK: - Setup
+    private func setupVLC() {
+        vlc.setup(
+            parent: self,
+            updatePlayerState: updatePlayerState,
+            updateVideoProgress: updateVideoProgress
+        )
+    }
+
+    // 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),
+            name: UIApplication.willResignActiveNotification, object: nil)
+        NotificationCenter.default.addObserver(
+            self, selector: #selector(applicationDidBecomeActive),
+            name: UIApplication.didBecomeActiveNotification, object: nil)
+    }
+
+    // MARK: - Public Methods
+    func startPictureInPicture() {
+        self.vlc.pipController?.stateChangeEventHandler = { (isStarted: Bool) in
+            self.onPipStarted?(["pipStarted": isStarted])
+        }
+        self.vlc.pipController?.startPictureInPicture()
+    }
+
+    @objc func play() {
+        self.vlc.player.play()
+        self.isPaused = false
+        logger.debug("Play")
+    }
+
+    @objc func pause() {
+        self.vlc.player.pause()
+        self.isPaused = true
+    }
+
+    @objc func seekTo(_ time: Int32) {
+        let wasPlaying = vlc.player.isPlaying
+        if wasPlaying {
+            self.pause()
+        }
+
+        if let duration = vlc.player.media?.length.intValue {
+            logger.debug("Seeking to time: \(time) Video Duration \(duration)")
+
+            // If the specified time is greater than the duration, seek to the end
+            let seekTime = time > duration ? duration - 1000 : time
+            vlc.player.time = VLCTime(int: seekTime)
+            self.updatePlayerState()
+
+            // Let mediaPlayerStateChanged handle play state change
+            DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
+                if wasPlaying {
+                    self.play()
+                }
+            }
+        } else {
+            logger.error("Unable to retrieve video duration")
+        }
+    }
+
+    @objc func setSource(_ source: [String: Any]) {
+        logger.debug("Setting source...")
+        DispatchQueue.main.async { [weak self] in
+            guard let self = self else { return }
+            if self.hasSource {
+                return
+            }
+
+            var mediaOptions = source["mediaOptions"] as? [String: Any] ?? [:]
+            self.externalTrack = source["externalTrack"] as? [String: String]
+            let initOptions: [String] = source["initOptions"] as? [String] ?? []
+            self.startPosition = source["startPosition"] as? Int32 ?? 0
+            self.externalSubtitles = source["externalSubtitles"] as? [[String: String]]
+
+            for item in initOptions {
+                let option = item.components(separatedBy: "=")
+                mediaOptions.updateValue(
+                    option[1], forKey: option[0].replacingOccurrences(of: "--", with: ""))
+            }
+
+            guard let uri = source["uri"] as? String, !uri.isEmpty else {
+                logger.error("Invalid or empty URI")
+                self.onVideoError?(["error": "Invalid or empty URI"])
+                return
+            }
+
+            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!
+            if isNetwork {
+                logger.debug("Loading network file: \(uri)")
+                media = VLCMedia(url: URL(string: uri)!)
+            } else {
+                logger.debug("Loading local file: \(uri)")
+                if uri.starts(with: "file://"), let url = URL(string: uri) {
+                    media = VLCMedia(url: url)
+                } else {
+                    media = VLCMedia(path: uri)
+                }
+            }
+
+            logger.debug("Media options: \(mediaOptions)")
+            media.addOptions(mediaOptions)
+
+            self.vlc.player.media = media
+            self.setInitialExternalSubtitles()
+            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()
+            }
+        }
+    }
+
+    @objc func setAudioTrack(_ trackIndex: Int) {
+        print("Setting audio track: \(trackIndex)")
+        let track = self.vlc.player.audioTracks[trackIndex]
+        track.isSelectedExclusively = true
+    }
+
+    @objc func getAudioTracks() -> [[String: Any]]? {
+        return vlc.player.audioTracks.enumerated().map {
+            return ["name": $1.trackName, "index": $0]
+        }
+    }
+
+    @objc func setSubtitleTrack(_ trackIndex: Int) {
+        logger.debug("Attempting to set subtitle track to index: \(trackIndex)")
+        if trackIndex == -1 {
+            logger.debug("Disabling all subtitles")
+            for track in self.vlc.player.textTracks {
+                track.isSelected = false
+            }
+            return
+        }
+        let track = self.vlc.player.textTracks[trackIndex]
+        track.isSelectedExclusively = true;
+        logger.debug("Current subtitle track index after setting: \(track.trackName)")
+    }
+
+    @objc func setSubtitleURL(_ subtitleURL: String, name: String) {
+        guard let url = URL(string: subtitleURL) else {
+            logger.error("Invalid subtitle URL")
+            return
+        }
+        let result = self.vlc.player.addPlaybackSlave(url, type: .subtitle, enforce: false)
+        if result == 0 {
+            let internalName = "Track \(self.customSubtitles.count)"
+            self.customSubtitles.append((internalName: internalName, originalName: name))
+            logger.debug("Subtitle added with result: \(result) \(internalName)")
+        } else {
+            logger.debug("Failed to add subtitle")
+        }
+    }
+
+    @objc func getSubtitleTracks() -> [[String: Any]]? {
+        if self.vlc.player.textTracks.count == 0 {
+            return nil
+        }
+
+        logger.debug("Number of subtitle tracks: \(self.vlc.player.textTracks.count)")
+
+        let tracks = self.vlc.player.textTracks.enumerated().map { (index, track) in
+            if let customSubtitle = customSubtitles.first(where: {
+                $0.internalName == track.trackName
+            }) {
+                return ["name": customSubtitle.originalName, "index": index]
+            } else {
+                return ["name": track.trackName, "index": index]
+            }
+        }
+
+       logger.debug("Subtitle tracks: \(tracks)")
+       return tracks
+    }
+
+    @objc func stop(completion: (() -> Void)? = nil) {
+        logger.debug("Stopping media...")
+        guard !isStopping else {
+            completion?()
+            return
+        }
+        isStopping = true
+
+        // If we're not on the main thread, dispatch to main thread
+        if !Thread.isMainThread {
+            DispatchQueue.main.async { [weak self] in
+                self?.performStop(completion: completion)
+            }
+        } else {
+            performStop(completion: completion)
+        }
+    }
+
+    // MARK: - Private Methods
+
+    @objc private func applicationWillResignActive() {
+
+    }
+
+    @objc private func applicationDidBecomeActive() {
+
+    }
+
+    private func setInitialExternalSubtitles() {
+        if let externalSubtitles = self.externalSubtitles {
+            for subtitle in externalSubtitles {
+                if let subtitleName = subtitle["name"],
+                    let subtitleURL = subtitle["DeliveryUrl"]
+                {
+                    print("Setting external subtitle: \(subtitleName) \(subtitleURL)")
+                    self.setSubtitleURL(subtitleURL, name: subtitleName)
+                }
+            }
+        }
+    }
+
+    private func performStop(completion: (() -> Void)? = nil) {
+        // Stop the media player
+        vlc.player.stop()
+
+        // Remove observer
+        NotificationCenter.default.removeObserver(self)
+
+        // Clear the video view
+        vlc.getPlayerView().removeFromSuperview()
+
+        isStopping = false
+        completion?()
+    }
+
+    private func updateVideoProgress() {
+        guard self.vlc.player.media != nil else { return }
+
+        let currentTimeMs = self.vlc.player.time.intValue
+        let durationMs = self.vlc.player.media?.length.intValue ?? 0
+
+        logger.debug("Current time: \(currentTimeMs)")
+        self.onVideoProgress?([
+            "currentTime": currentTimeMs,
+            "duration": durationMs,
+        ])
+    }
+
+    private func updatePlayerState() {
+        let player = self.vlc.player
+        if player.isPlaying {
+            performInitialSeek()
+        }
+        self.onVideoStateChange?([
+            "target": self.reactTag ?? NSNull(),
+            "currentTime": player.time.intValue,
+            "duration": player.media?.length.intValue ?? 0,
+            "error": false,
+            "isPlaying": player.isPlaying,
+            "isBuffering": !player.isPlaying && player.state == VLCMediaPlayerState.buffering,
+            "state": player.state.description,
+        ])
+    }
+
+    // MARK: - Expo Events
+    @objc var onPlaybackStateChanged: RCTDirectEventBlock?
+    @objc var onVideoLoadStart: RCTDirectEventBlock?
+    @objc var onVideoStateChange: RCTDirectEventBlock?
+    @objc var onVideoProgress: RCTDirectEventBlock?
+    @objc var onVideoLoadEnd: RCTDirectEventBlock?
+    @objc var onVideoError: RCTDirectEventBlock?
+    @objc var onPipStarted: RCTDirectEventBlock?
+
+    // MARK: - Deinitialization
+
+    deinit {
+        logger.debug("Deinitialization")
+        performStop()
+        VLCManager.shared.listeners.removeAll()
+    }
+}
+
+// MARK: - SimpleAppLifecycleListener
+extension VlcPlayer4View: SimpleAppLifecycleListener {
+    func applicationDidEnterBackground() {
+        logger.debug("Entering background")
+    }
+
+    func applicationDidEnterForeground() {
+        logger.debug("Entering foreground, is player visible? \(self.vlc.getPlayerView().superview != nil)")
+        if !self.vlc.getPlayerView().isDescendant(of: self) {
+            logger.debug("Player view is missing. Adding back as subview")
+            self.addSubview(self.vlc.getPlayerView())
+        }
+
+        // Current solution to fixing black screen when re-entering application
+        if let videoTrack = self.vlc.player.videoTracks.first(where: { $0.isSelected == true }),
+            !self.vlc.isMediaPlaying()
+        {
+            videoTrack.isSelected = false
+            videoTrack.isSelectedExclusively = true
+            self.vlc.player.play()
+            self.vlc.player.pause()
+        }
+    }
+}
+
+extension VLCMediaPlayerState {
+    var description: String {
+        switch self {
+        case .opening: return "Opening"
+        case .buffering: return "Buffering"
+        case .playing: return "Playing"
+        case .paused: return "Paused"
+        case .stopped: return "Stopped"
+        case .error: return "Error"
+        case .stopping: return "Stopping"
+        @unknown default: return "Unknown"
+        }
+    }
+}

modules/vlc-player-4/src/VlcPlayer4Module.ts

@@ -2,4 +2,4 @@ import { requireNativeModule } from "expo-modules-core";
 
 // It loads the native module object from the JSI or falls back to
 // the bridge module (from NativeModulesProxy) if the remote debugger is on.
-export default requireNativeModule("VlcPlayer3");
+export default requireNativeModule("VlcPlayer4");

modules/vlc-player/android/src/main/java/expo/modules/vlcplayer/VlcPlayerModule.kt

@@ -82,6 +82,14 @@ class VlcPlayerModule : Module() {
       AsyncFunction("setSubtitleURL") { view: VlcPlayerView, url: String, name: String ->
         view.setSubtitleURL(url, name)
       }
+
+      AsyncFunction("setVideoAspectRatio") { view: VlcPlayerView, aspectRatio: String? ->
+        view.setVideoAspectRatio(aspectRatio)
+      }
+
+      AsyncFunction("setVideoScaleFactor") { view: VlcPlayerView, scaleFactor: Float ->
+        view.setVideoScaleFactor(scaleFactor)
+      }
     }
   }
 }

modules/vlc-player/android/src/main/java/expo/modules/vlcplayer/VlcPlayerView.kt

@@ -62,6 +62,7 @@ class VlcPlayerView(context: Context, appContext: AppContext) : ExpoView(context
     private var startPosition: Int? = 0
     private var isMediaReady: Boolean = false
     private var externalTrack: Map<String, String>? = null
+    private var externalSubtitles: List<Map<String, String>>? = null
     var hasSource: Boolean = false
 
     private val handler = Handler(Looper.getMainLooper())
@@ -220,6 +221,7 @@ class VlcPlayerView(context: Context, appContext: AppContext) : ExpoView(context
         val autoplay = source["autoplay"] as? Boolean ?: false
         val isNetwork = source["isNetwork"] as? Boolean ?: false
         externalTrack = source["externalTrack"] as? Map<String, String>
+        externalSubtitles = source["externalSubtitles"] as? List<Map<String, String>>
         startPosition = (source["startPosition"] as? Double)?.toInt() ?: 0
 
         val initOptions = source["initOptions"] as? MutableList<String> ?: mutableListOf()
@@ -240,20 +242,11 @@ class VlcPlayerView(context: Context, appContext: AppContext) : ExpoView(context
         media = Media(libVLC, Uri.parse(uri))
         mediaPlayer?.media = media
 
-
         log.debug("Debug: Media options: $mediaOptions")
         // media.addOptions(mediaOptions)
 
-        // Apply subtitle options
-        // val subtitleTrackIndex = source["subtitleTrackIndex"] as? Int ?: -1
-        // Log.d("VlcPlayerView", "Debug: Subtitle track index from source: $subtitleTrackIndex")
-
-        // if (subtitleTrackIndex >= -1) {
-        //     setSubtitleTrack(subtitleTrackIndex)
-        //     Log.d("VlcPlayerView", "Debug: Set subtitle track to index: $subtitleTrackIndex")
-        // } else {
-        //     Log.d("VlcPlayerView", "Debug: Subtitle track index is less than -1, not setting")
-        // }
+        // Set initial external subtitles immediately like iOS
+        setInitialExternalSubtitles()
 
         hasSource = true
 
@@ -342,6 +335,29 @@ class VlcPlayerView(context: Context, appContext: AppContext) : ExpoView(context
         mediaPlayer?.addSlave(IMedia.Slave.Type.Subtitle, Uri.parse(subtitleURL), true)
     }
 
+    fun setVideoAspectRatio(aspectRatio: String?) {
+        log.debug("Setting video aspect ratio: $aspectRatio")
+        mediaPlayer?.aspectRatio = aspectRatio
+    }
+
+    fun setVideoScaleFactor(scaleFactor: Float) {
+        log.debug("Setting video scale factor: $scaleFactor")
+        mediaPlayer?.scale = scaleFactor
+    }
+
+    private fun setInitialExternalSubtitles() {
+        externalSubtitles?.let { subtitles ->
+            for (subtitle in subtitles) {
+                val subtitleName = subtitle["name"]
+                val subtitleURL = subtitle["DeliveryUrl"]
+                if (!subtitleName.isNullOrEmpty() && !subtitleURL.isNullOrEmpty()) {
+                    log.debug("Setting external subtitle: $subtitleName $subtitleURL")
+                    setSubtitleURL(subtitleURL, subtitleName)
+                }
+            }
+        }
+    }
+
     override fun onDetachedFromWindow() {
         log.debug("onDetachedFromWindow")
         super.onDetachedFromWindow()

modules/vlc-player/expo-module.config.json

@@ -1,8 +1,7 @@
 {
   "platforms": ["ios", "tvos", "android", "web"],
   "ios": {
-    "modules": ["VlcPlayerModule"],
-    "appDelegateSubscribers": ["AppLifecycleDelegate"]
+    "modules": ["VlcPlayerModule"]
   },
   "android": {
     "modules": ["expo.modules.vlcplayer.VlcPlayerModule"]

modules/vlc-player/ios/VlcPlayer.podspec

@@ -1,22 +1,23 @@
 Pod::Spec.new do |s|
   s.name           = 'VlcPlayer'
-  s.version        = '4.0.0a10'
+  s.version        = '3.6.1b1'
   s.summary        = 'A sample project summary'
   s.description    = 'A sample project description'
   s.author         = ''
   s.homepage       = 'https://docs.expo.dev/modules/'
-  s.platforms      = { :ios => '13.4', :tvos => '16' }
+  s.platforms      = { :ios => '13.4', :tvos => '13.4' }
   s.source         = { git: '' }
   s.static_framework = true
 
   s.dependency 'ExpoModulesCore'
-  s.ios.dependency 'VLCKit', s.version
-  s.tvos.dependency 'VLCKit', s.version
+  s.ios.dependency 'MobileVLCKit', s.version
+  s.tvos.dependency 'TVVLCKit', s.version
 
   # Swift/Objective-C compatibility
   s.pod_target_xcconfig = {
     'DEFINES_MODULE' => 'YES',
     'SWIFT_COMPILATION_MODE' => 'wholemodule'
   }
+
   s.source_files = "*.{h,m,mm,swift,hpp,cpp}"
 end