Merge branch 'pr/235'

https://stackoverflow.com/a/72230424

.gitignore

@@ -9,6 +9,7 @@ npm-debug.*
 *.mobileprovision
 *.orig.*
 web-build/
+modules/vlc-player/android/build
 
 # macOS
 .DS_Store
@@ -26,10 +27,11 @@ package-lock.json
 /ios
 /android
 
-modules/vlc-player/android
+modules/player/android
 
 pc-api-7079014811501811218-719-3b9f15aeccf8.json
 credentials.json
 *.apk
 *.ipa
 .continuerc.json
+

.idea/.gitignore

@@ -0,0 +1,3 @@
+# Default ignored files
+/shelf/
+/workspace.xml

.idea/caches/deviceStreaming.xml

@@ -0,0 +1,329 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="DeviceStreaming">
+    <option name="deviceSelectionList">
+      <list>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="27" />
+          <option name="brand" value="DOCOMO" />
+          <option name="codename" value="F01L" />
+          <option name="id" value="F01L" />
+          <option name="manufacturer" value="FUJITSU" />
+          <option name="name" value="F-01L" />
+          <option name="screenDensity" value="360" />
+          <option name="screenX" value="720" />
+          <option name="screenY" value="1280" />
+        </PersistentDeviceSelectionData>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="28" />
+          <option name="brand" value="DOCOMO" />
+          <option name="codename" value="SH-01L" />
+          <option name="id" value="SH-01L" />
+          <option name="manufacturer" value="SHARP" />
+          <option name="name" value="AQUOS sense2 SH-01L" />
+          <option name="screenDensity" value="480" />
+          <option name="screenX" value="1080" />
+          <option name="screenY" value="2160" />
+        </PersistentDeviceSelectionData>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="34" />
+          <option name="brand" value="Lenovo" />
+          <option name="codename" value="TB370FU" />
+          <option name="id" value="TB370FU" />
+          <option name="manufacturer" value="Lenovo" />
+          <option name="name" value="Tab P12" />
+          <option name="screenDensity" value="340" />
+          <option name="screenX" value="1840" />
+          <option name="screenY" value="2944" />
+        </PersistentDeviceSelectionData>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="31" />
+          <option name="brand" value="samsung" />
+          <option name="codename" value="a51" />
+          <option name="id" value="a51" />
+          <option name="manufacturer" value="Samsung" />
+          <option name="name" value="Galaxy A51" />
+          <option name="screenDensity" value="420" />
+          <option name="screenX" value="1080" />
+          <option name="screenY" value="2400" />
+        </PersistentDeviceSelectionData>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="34" />
+          <option name="brand" value="google" />
+          <option name="codename" value="akita" />
+          <option name="id" value="akita" />
+          <option name="manufacturer" value="Google" />
+          <option name="name" value="Pixel 8a" />
+          <option name="screenDensity" value="420" />
+          <option name="screenX" value="1080" />
+          <option name="screenY" value="2400" />
+        </PersistentDeviceSelectionData>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="33" />
+          <option name="brand" value="samsung" />
+          <option name="codename" value="b0q" />
+          <option name="id" value="b0q" />
+          <option name="manufacturer" value="Samsung" />
+          <option name="name" value="Galaxy S22 Ultra" />
+          <option name="screenDensity" value="600" />
+          <option name="screenX" value="1440" />
+          <option name="screenY" value="3088" />
+        </PersistentDeviceSelectionData>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="32" />
+          <option name="brand" value="google" />
+          <option name="codename" value="bluejay" />
+          <option name="id" value="bluejay" />
+          <option name="manufacturer" value="Google" />
+          <option name="name" value="Pixel 6a" />
+          <option name="screenDensity" value="420" />
+          <option name="screenX" value="1080" />
+          <option name="screenY" value="2400" />
+        </PersistentDeviceSelectionData>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="34" />
+          <option name="brand" value="google" />
+          <option name="codename" value="caiman" />
+          <option name="id" value="caiman" />
+          <option name="manufacturer" value="Google" />
+          <option name="name" value="Pixel 9 Pro" />
+          <option name="screenDensity" value="360" />
+          <option name="screenX" value="960" />
+          <option name="screenY" value="2142" />
+        </PersistentDeviceSelectionData>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="34" />
+          <option name="brand" value="google" />
+          <option name="codename" value="comet" />
+          <option name="id" value="comet" />
+          <option name="manufacturer" value="Google" />
+          <option name="name" value="Pixel 9 Pro Fold" />
+          <option name="screenDensity" value="390" />
+          <option name="screenX" value="2076" />
+          <option name="screenY" value="2152" />
+        </PersistentDeviceSelectionData>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="29" />
+          <option name="brand" value="samsung" />
+          <option name="codename" value="crownqlteue" />
+          <option name="id" value="crownqlteue" />
+          <option name="manufacturer" value="Samsung" />
+          <option name="name" value="Galaxy Note9" />
+          <option name="screenDensity" value="420" />
+          <option name="screenX" value="2220" />
+          <option name="screenY" value="1080" />
+        </PersistentDeviceSelectionData>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="34" />
+          <option name="brand" value="samsung" />
+          <option name="codename" value="dm3q" />
+          <option name="id" value="dm3q" />
+          <option name="manufacturer" value="Samsung" />
+          <option name="name" value="Galaxy S23 Ultra" />
+          <option name="screenDensity" value="600" />
+          <option name="screenX" value="1440" />
+          <option name="screenY" value="3088" />
+        </PersistentDeviceSelectionData>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="34" />
+          <option name="brand" value="samsung" />
+          <option name="codename" value="e1q" />
+          <option name="id" value="e1q" />
+          <option name="manufacturer" value="Samsung" />
+          <option name="name" value="Galaxy S24" />
+          <option name="screenDensity" value="480" />
+          <option name="screenX" value="1080" />
+          <option name="screenY" value="2340" />
+        </PersistentDeviceSelectionData>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="33" />
+          <option name="brand" value="google" />
+          <option name="codename" value="felix" />
+          <option name="id" value="felix" />
+          <option name="manufacturer" value="Google" />
+          <option name="name" value="Pixel Fold" />
+          <option name="screenDensity" value="420" />
+          <option name="screenX" value="2208" />
+          <option name="screenY" value="1840" />
+        </PersistentDeviceSelectionData>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="34" />
+          <option name="brand" value="google" />
+          <option name="codename" value="felix" />
+          <option name="id" value="felix" />
+          <option name="manufacturer" value="Google" />
+          <option name="name" value="Pixel Fold" />
+          <option name="screenDensity" value="420" />
+          <option name="screenX" value="2208" />
+          <option name="screenY" value="1840" />
+        </PersistentDeviceSelectionData>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="33" />
+          <option name="brand" value="google" />
+          <option name="codename" value="felix_camera" />
+          <option name="id" value="felix_camera" />
+          <option name="manufacturer" value="Google" />
+          <option name="name" value="Pixel Fold (Camera-enabled)" />
+          <option name="screenDensity" value="420" />
+          <option name="screenX" value="2208" />
+          <option name="screenY" value="1840" />
+        </PersistentDeviceSelectionData>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="33" />
+          <option name="brand" value="samsung" />
+          <option name="codename" value="gts8uwifi" />
+          <option name="id" value="gts8uwifi" />
+          <option name="manufacturer" value="Samsung" />
+          <option name="name" value="Galaxy Tab S8 Ultra" />
+          <option name="screenDensity" value="320" />
+          <option name="screenX" value="1848" />
+          <option name="screenY" value="2960" />
+        </PersistentDeviceSelectionData>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="34" />
+          <option name="brand" value="google" />
+          <option name="codename" value="husky" />
+          <option name="id" value="husky" />
+          <option name="manufacturer" value="Google" />
+          <option name="name" value="Pixel 8 Pro" />
+          <option name="screenDensity" value="390" />
+          <option name="screenX" value="1008" />
+          <option name="screenY" value="2244" />
+        </PersistentDeviceSelectionData>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="30" />
+          <option name="brand" value="motorola" />
+          <option name="codename" value="java" />
+          <option name="id" value="java" />
+          <option name="manufacturer" value="Motorola" />
+          <option name="name" value="G20" />
+          <option name="screenDensity" value="280" />
+          <option name="screenX" value="720" />
+          <option name="screenY" value="1600" />
+        </PersistentDeviceSelectionData>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="34" />
+          <option name="brand" value="google" />
+          <option name="codename" value="komodo" />
+          <option name="id" value="komodo" />
+          <option name="manufacturer" value="Google" />
+          <option name="name" value="Pixel 9 Pro XL" />
+          <option name="screenDensity" value="360" />
+          <option name="screenX" value="1008" />
+          <option name="screenY" value="2244" />
+        </PersistentDeviceSelectionData>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="33" />
+          <option name="brand" value="google" />
+          <option name="codename" value="lynx" />
+          <option name="id" value="lynx" />
+          <option name="manufacturer" value="Google" />
+          <option name="name" value="Pixel 7a" />
+          <option name="screenDensity" value="420" />
+          <option name="screenX" value="1080" />
+          <option name="screenY" value="2400" />
+        </PersistentDeviceSelectionData>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="31" />
+          <option name="brand" value="google" />
+          <option name="codename" value="oriole" />
+          <option name="id" value="oriole" />
+          <option name="manufacturer" value="Google" />
+          <option name="name" value="Pixel 6" />
+          <option name="screenDensity" value="420" />
+          <option name="screenX" value="1080" />
+          <option name="screenY" value="2400" />
+        </PersistentDeviceSelectionData>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="33" />
+          <option name="brand" value="google" />
+          <option name="codename" value="panther" />
+          <option name="id" value="panther" />
+          <option name="manufacturer" value="Google" />
+          <option name="name" value="Pixel 7" />
+          <option name="screenDensity" value="420" />
+          <option name="screenX" value="1080" />
+          <option name="screenY" value="2400" />
+        </PersistentDeviceSelectionData>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="34" />
+          <option name="brand" value="samsung" />
+          <option name="codename" value="q5q" />
+          <option name="id" value="q5q" />
+          <option name="manufacturer" value="Samsung" />
+          <option name="name" value="Galaxy Z Fold5" />
+          <option name="screenDensity" value="420" />
+          <option name="screenX" value="1812" />
+          <option name="screenY" value="2176" />
+        </PersistentDeviceSelectionData>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="34" />
+          <option name="brand" value="samsung" />
+          <option name="codename" value="q6q" />
+          <option name="id" value="q6q" />
+          <option name="manufacturer" value="Samsung" />
+          <option name="name" value="Galaxy Z Fold6" />
+          <option name="screenDensity" value="420" />
+          <option name="screenX" value="1856" />
+          <option name="screenY" value="2160" />
+        </PersistentDeviceSelectionData>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="30" />
+          <option name="brand" value="google" />
+          <option name="codename" value="r11" />
+          <option name="id" value="r11" />
+          <option name="manufacturer" value="Google" />
+          <option name="name" value="Pixel Watch" />
+          <option name="screenDensity" value="320" />
+          <option name="screenX" value="384" />
+          <option name="screenY" value="384" />
+          <option name="type" value="WEAR_OS" />
+        </PersistentDeviceSelectionData>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="30" />
+          <option name="brand" value="google" />
+          <option name="codename" value="redfin" />
+          <option name="id" value="redfin" />
+          <option name="manufacturer" value="Google" />
+          <option name="name" value="Pixel 5" />
+          <option name="screenDensity" value="440" />
+          <option name="screenX" value="1080" />
+          <option name="screenY" value="2340" />
+        </PersistentDeviceSelectionData>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="34" />
+          <option name="brand" value="google" />
+          <option name="codename" value="shiba" />
+          <option name="id" value="shiba" />
+          <option name="manufacturer" value="Google" />
+          <option name="name" value="Pixel 8" />
+          <option name="screenDensity" value="420" />
+          <option name="screenX" value="1080" />
+          <option name="screenY" value="2400" />
+        </PersistentDeviceSelectionData>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="33" />
+          <option name="brand" value="google" />
+          <option name="codename" value="tangorpro" />
+          <option name="id" value="tangorpro" />
+          <option name="manufacturer" value="Google" />
+          <option name="name" value="Pixel Tablet" />
+          <option name="screenDensity" value="320" />
+          <option name="screenX" value="1600" />
+          <option name="screenY" value="2560" />
+        </PersistentDeviceSelectionData>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="34" />
+          <option name="brand" value="google" />
+          <option name="codename" value="tokay" />
+          <option name="id" value="tokay" />
+          <option name="manufacturer" value="Google" />
+          <option name="name" value="Pixel 9" />
+          <option name="screenDensity" value="420" />
+          <option name="screenX" value="1080" />
+          <option name="screenY" value="2424" />
+        </PersistentDeviceSelectionData>
+      </list>
+    </option>
+  </component>
+</project>

.idea/misc.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectRootManager">
+    <output url="file://$PROJECT_DIR$/out" />
+  </component>
+</project>

.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/streamyfin.iml" filepath="$PROJECT_DIR$/.idea/streamyfin.iml" />
+    </modules>
+  </component>
+</project>

.idea/streamyfin.iml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="JAVA_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>

.vscode/settings.json

@@ -8,5 +8,10 @@
   "[typescriptreact]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.formatOnSave": true
-  }
+  },
+  "[swift]": {
+    "editor.defaultFormatter": "sswg.swift-lang"
+  },
+  "java.configuration.updateBuildConfiguration": "interactive",
+  "java.compile.nullAnalysis.mode": "automatic"
 }

app.json

@@ -2,7 +2,7 @@
   "expo": {
     "name": "Streamyfin",
     "slug": "streamyfin",
-    "version": "0.18.0",
+    "version": "0.21.0",
     "orientation": "default",
     "icon": "./assets/images/icon.png",
     "scheme": "streamyfin",
@@ -100,11 +100,13 @@
           "motionPermission": "Allow Streamyfin to access your device motion for landscape video watching."
         }
       ],
+      "expo-asset",
       [
         "react-native-edge-to-edge",
         { "android": { "parentTheme": "Material3" } }
       ],
-      ["react-native-bottom-tabs"]
+      ["react-native-bottom-tabs"],
+      ["./plugins/withChangeNativeAndroidTextToWhite.js"]
     ],
     "experiments": {
       "typedRoutes": true

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

@@ -27,7 +27,6 @@ export default function IndexLayout() {
                 onPress={() => {
                   router.push("/(auth)/settings");
                 }}
-                className="p-2 "
               >
                 <Feather name="settings" color={"white"} size={22} />
               </TouchableOpacity>

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

@@ -2,36 +2,46 @@ import { Text } from "@/components/common/Text";
 import { ActiveDownloads } from "@/components/downloads/ActiveDownloads";
 import { MovieCard } from "@/components/downloads/MovieCard";
 import { SeriesCard } from "@/components/downloads/SeriesCard";
-import { useDownload } from "@/providers/DownloadProvider";
+import { DownloadedItem, useDownload } from "@/providers/DownloadProvider";
 import { queueAtom } from "@/utils/atoms/queue";
 import { useSettings } from "@/utils/atoms/settings";
 import { Ionicons } from "@expo/vector-icons";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { router } from "expo-router";
+import { useRouter } from "expo-router";
 import { useAtom } from "jotai";
 import { useMemo } from "react";
-import { ScrollView, TouchableOpacity, View } from "react-native";
+import { Alert, ScrollView, TouchableOpacity, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
-const downloads: React.FC = () => {
+export default function page() {
   const [queue, setQueue] = useAtom(queueAtom);
   const { removeProcess, downloadedFiles } = useDownload();
-
+  const router = useRouter();
   const [settings] = useSettings();
 
-  const movies = useMemo(
-    () => downloadedFiles?.filter((f) => f.Type === "Movie") || [],
-    [downloadedFiles]
-  );
+  const movies = useMemo(() => {
+    try {
+      return downloadedFiles?.filter((f) => f.item.Type === "Movie") || [];
+    } catch {
+      migration_20241124();
+      return [];
+    }
+  }, [downloadedFiles]);
 
   const groupedBySeries = useMemo(() => {
-    const episodes = downloadedFiles?.filter((f) => f.Type === "Episode");
-    const series: { [key: string]: BaseItemDto[] } = {};
-    episodes?.forEach((e) => {
-      if (!series[e.SeriesName!]) series[e.SeriesName!] = [];
-      series[e.SeriesName!].push(e);
-    });
-    return Object.values(series);
+    try {
+      const episodes = downloadedFiles?.filter(
+        (f) => f.item.Type === "Episode"
+      );
+      const series: { [key: string]: DownloadedItem[] } = {};
+      episodes?.forEach((e) => {
+        if (!series[e.item.SeriesName!]) series[e.item.SeriesName!] = [];
+        series[e.item.SeriesName!].push(e);
+      });
+      return Object.values(series);
+    } catch {
+      migration_20241124();
+      return [];
+    }
   }, [downloadedFiles]);
 
   const insets = useSafeAreaInsets();
@@ -98,17 +108,20 @@ const downloads: React.FC = () => {
             </View>
             <ScrollView horizontal showsHorizontalScrollIndicator={false}>
               <View className="px-4 flex flex-row">
-                {movies?.map((item: BaseItemDto) => (
-                  <View className="mb-2 last:mb-0" key={item.Id}>
-                    <MovieCard item={item} />
+                {movies?.map((item) => (
+                  <View className="mb-2 last:mb-0" key={item.item.Id}>
+                    <MovieCard item={item.item} />
                   </View>
                 ))}
               </View>
             </ScrollView>
           </View>
         )}
-        {groupedBySeries?.map((items: BaseItemDto[], index: number) => (
-          <SeriesCard items={items} key={items[0].SeriesId} />
+        {groupedBySeries?.map((items, index) => (
+          <SeriesCard
+            items={items.map((i) => i.item)}
+            key={items[0].item.SeriesId}
+          />
         ))}
         {downloadedFiles?.length === 0 && (
           <View className="flex px-4">
@@ -118,6 +131,24 @@ const downloads: React.FC = () => {
       </View>
     </ScrollView>
   );
-};
+}
 
-export default downloads;
+function migration_20241124() {
+  const router = useRouter();
+  const { deleteAllFiles } = useDownload();
+  Alert.alert(
+    "New app version requires re-download",
+    "The new update reqires content to be downloaded again. Please remove all downloaded content and try again.",
+    [
+      {
+        text: "Back",
+        onPress: () => router.back(),
+      },
+      {
+        text: "Delete",
+        style: "destructive",
+        onPress: async () => await deleteAllFiles(),
+      },
+    ]
+  );
+}

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

@@ -5,6 +5,7 @@ import { ScrollingCollectionList } from "@/components/home/ScrollingCollectionLi
 import { Loader } from "@/components/Loader";
 import { MediaListSection } from "@/components/medialists/MediaListSection";
 import { Colors } from "@/constants/Colors";
+import { useInvalidatePlaybackProgressCache } from "@/hooks/useRevalidatePlaybackProgressCache";
 import { useDownload } from "@/providers/DownloadProvider";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
@@ -52,7 +53,6 @@ type MediaListSection = {
 type Section = ScrollingCollectionListSection | MediaListSection;
 
 export default function index() {
-  const queryClient = useQueryClient();
   const router = useRouter();
 
   const api = useAtomValue(apiAtom);
@@ -67,6 +67,8 @@ export default function index() {
   const { downloadedFiles } = useDownload();
   const navigation = useNavigation();
 
+  const insets = useSafeAreaInsets();
+
   useEffect(() => {
     const hasDownloads = downloadedFiles && downloadedFiles.length > 0;
     navigation.setOptions({
@@ -163,28 +165,13 @@ export default function index() {
     );
   }, [userViews]);
 
+  const invalidateCache = useInvalidatePlaybackProgressCache();
+
   const refetch = useCallback(async () => {
     setLoading(true);
-    await queryClient.invalidateQueries({
-      queryKey: ["home"],
-      refetchType: "all",
-      type: "all",
-      exact: false,
-    });
-    await queryClient.invalidateQueries({
-      queryKey: ["home"],
-      refetchType: "all",
-      type: "all",
-      exact: false,
-    });
-    await queryClient.invalidateQueries({
-      queryKey: ["item"],
-      refetchType: "all",
-      type: "all",
-      exact: false,
-    });
+    await invalidateCache();
     setLoading(false);
-  }, [queryClient]);
+  }, []);
 
   const createCollectionConfig = useCallback(
     (
@@ -240,7 +227,7 @@ export default function index() {
     const ss: Section[] = [
       {
         title: "Continue Watching",
-        queryKey: ["home", "resumeItems", user.Id],
+        queryKey: ["home", "resumeItems"],
         queryFn: async () =>
           (
             await getItemsApi(api).getResumeItems({
@@ -254,7 +241,7 @@ export default function index() {
       },
       {
         title: "Next Up",
-        queryKey: ["home", "nextUp-all", user?.Id],
+        queryKey: ["home", "nextUp-all"],
         queryFn: async () =>
           (
             await getTvShowsApi(api).getNextUp({
@@ -360,8 +347,6 @@ export default function index() {
     );
   }
 
-  const insets = useSafeAreaInsets();
-
   if (e1 || e2)
     return (
       <View className="flex flex-col items-center justify-center h-full -mt-6">
@@ -386,7 +371,6 @@ export default function index() {
       refreshControl={
         <RefreshControl refreshing={loading} onRefresh={refetch} />
       }
-      key={"home"}
       contentContainerStyle={{
         paddingLeft: insets.left,
         paddingRight: insets.right,

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

@@ -2,6 +2,10 @@ import { Text } from "@/components/common/Text";
 import { ItemContent } from "@/components/ItemContent";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
+import {
+  getMediaInfoApi,
+  getUserLibraryApi,
+} from "@jellyfin/sdk/lib/utils/api";
 import { useQuery } from "@tanstack/react-query";
 import { useLocalSearchParams } from "expo-router";
 import { useAtom } from "jotai";
@@ -22,16 +26,18 @@ const Page: React.FC = () => {
   const { data: item, isError } = useQuery({
     queryKey: ["item", id],
     queryFn: async () => {
-      const res = await getUserItemData({
-        api,
-        userId: user?.Id,
+      if (!api || !user || !id) return;
+      const res = await getUserLibraryApi(api).getItem({
         itemId: id,
+        userId: user?.Id,
       });
 
-      return res;
+      return res.data;
     },
-    enabled: !!id && !!api,
-    staleTime: 60 * 1000 * 5, // 5 minutes
+    staleTime: 0,
+    refetchOnMount: true,
+    refetchOnWindowFocus: true,
+    refetchOnReconnect: true,
   });
 
   const opacity = useSharedValue(1);

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

@@ -70,37 +70,43 @@ export default function search() {
       types: BaseItemKind[];
       query: string;
     }): Promise<BaseItemDto[]> => {
-      if (!api) return [];
+      if (!api || !query) return [];
 
-      if (searchEngine === "Jellyfin") {
-        const searchApi = await getSearchApi(api).getSearchHints({
-          searchTerm: query,
-          limit: 10,
-          includeItemTypes: types,
-        });
+      try {
+        if (searchEngine === "Jellyfin") {
+          const searchApi = await getSearchApi(api).getSearchHints({
+            searchTerm: query,
+            limit: 10,
+            includeItemTypes: types,
+          });
 
-        return searchApi.data.SearchHints as BaseItemDto[];
-      } else {
-        const url = `${settings?.marlinServerUrl}/search?q=${encodeURIComponent(
-          query
-        )}&includeItemTypes=${types
-          .map((type) => encodeURIComponent(type))
-          .join("&includeItemTypes=")}`;
+          return (searchApi.data.SearchHints as BaseItemDto[]) || [];
+        } else {
+          if (!settings?.marlinServerUrl) return [];
+          const url = `${
+            settings.marlinServerUrl
+          }/search?q=${encodeURIComponent(query)}&includeItemTypes=${types
+            .map((type) => encodeURIComponent(type))
+            .join("&includeItemTypes=")}`;
 
-        const response1 = await axios.get(url);
-        const ids = response1.data.ids;
+          const response1 = await axios.get(url);
+          const ids = response1.data.ids;
 
-        if (!ids || !ids.length) return [];
+          if (!ids || !ids.length) return [];
 
-        const response2 = await getItemsApi(api).getItems({
-          ids,
-          enableImageTypes: ["Primary", "Backdrop", "Thumb"],
-        });
+          const response2 = await getItemsApi(api).getItems({
+            ids,
+            enableImageTypes: ["Primary", "Backdrop", "Thumb"],
+          });
 
-        return response2.data.Items as BaseItemDto[];
+          return (response2.data.Items as BaseItemDto[]) || [];
+        }
+      } catch (error) {
+        console.error("Error during search:", error);
+        return []; // Ensure an empty array is returned in case of an error
       }
     },
-    [api, settings]
+    [api, searchEngine, settings]
   );
 
   const navigation = useNavigation();

app/(auth)/play-music.tsx

@@ -1,304 +0,0 @@
-import { Controls } from "@/components/video-player/Controls";
-import { useOrientation } from "@/hooks/useOrientation";
-import { useOrientationSettings } from "@/hooks/useOrientationSettings";
-import { useWebSocket } from "@/hooks/useWebsockets";
-import { apiAtom } from "@/providers/JellyfinProvider";
-import {
-  PlaybackType,
-  usePlaySettings,
-} from "@/providers/PlaySettingsProvider";
-import { useSettings } from "@/utils/atoms/settings";
-import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
-import { getAuthHeaders } from "@/utils/jellyfin/jellyfin";
-import { secondsToTicks } from "@/utils/secondsToTicks";
-import { Api } from "@jellyfin/sdk";
-import { getPlaystateApi } from "@jellyfin/sdk/lib/utils/api";
-import * as Haptics from "expo-haptics";
-import { Image } from "expo-image";
-import { useFocusEffect } from "expo-router";
-import { useAtomValue } from "jotai";
-import React, { useCallback, useMemo, useRef, useState } from "react";
-import { Dimensions, Pressable, View } from "react-native";
-import { SystemBars } from "react-native-edge-to-edge";
-import { useSharedValue } from "react-native-reanimated";
-import Video, { OnProgressData, VideoRef } from "react-native-video";
-
-export default function page() {
-  const { playSettings, playUrl, playSessionId } = usePlaySettings();
-  const api = useAtomValue(apiAtom);
-  const [settings] = useSettings();
-  const videoRef = useRef<VideoRef | null>(null);
-  const poster = usePoster(playSettings, api);
-  const videoSource = useVideoSource(playSettings, api, poster, playUrl);
-  const firstTime = useRef(true);
-
-  const screenDimensions = Dimensions.get("screen");
-
-  const [isPlaybackStopped, setIsPlaybackStopped] = useState(false);
-  const [showControls, setShowControls] = useState(true);
-  const [ignoreSafeAreas, setIgnoreSafeAreas] = useState(false);
-  const [isPlaying, setIsPlaying] = useState(false);
-  const [isBuffering, setIsBuffering] = useState(true);
-
-  const progress = useSharedValue(0);
-  const isSeeking = useSharedValue(false);
-  const cacheProgress = useSharedValue(0);
-
-  if (!playSettings || !playUrl || !api || !videoSource || !playSettings.item)
-    return null;
-
-  const togglePlay = useCallback(
-    async (ticks: number) => {
-      console.log("togglePlay");
-      Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
-      if (isPlaying) {
-        videoRef.current?.pause();
-        await getPlaystateApi(api).onPlaybackProgress({
-          itemId: playSettings.item?.Id!,
-          audioStreamIndex: playSettings.audioIndex
-            ? playSettings.audioIndex
-            : undefined,
-          subtitleStreamIndex: playSettings.subtitleIndex
-            ? playSettings.subtitleIndex
-            : undefined,
-          mediaSourceId: playSettings.mediaSource?.Id!,
-          positionTicks: Math.floor(ticks),
-          isPaused: true,
-          playMethod: playUrl.includes("m3u8") ? "Transcode" : "DirectStream",
-          playSessionId: playSessionId ? playSessionId : undefined,
-        });
-      } else {
-        videoRef.current?.resume();
-        await getPlaystateApi(api).onPlaybackProgress({
-          itemId: playSettings.item?.Id!,
-          audioStreamIndex: playSettings.audioIndex
-            ? playSettings.audioIndex
-            : undefined,
-          subtitleStreamIndex: playSettings.subtitleIndex
-            ? playSettings.subtitleIndex
-            : undefined,
-          mediaSourceId: playSettings.mediaSource?.Id!,
-          positionTicks: Math.floor(ticks),
-          isPaused: false,
-          playMethod: playUrl.includes("m3u8") ? "Transcode" : "DirectStream",
-          playSessionId: playSessionId ? playSessionId : undefined,
-        });
-      }
-    },
-    [isPlaying, api, playSettings?.item?.Id, videoRef, settings]
-  );
-
-  const play = useCallback(() => {
-    console.log("play");
-    videoRef.current?.resume();
-    reportPlaybackStart();
-  }, [videoRef]);
-
-  const pause = useCallback(() => {
-    console.log("play");
-    videoRef.current?.pause();
-  }, [videoRef]);
-
-  const stop = useCallback(() => {
-    console.log("stop");
-    setIsPlaybackStopped(true);
-    videoRef.current?.pause();
-    reportPlaybackStopped();
-  }, [videoRef]);
-
-  const reportPlaybackStopped = async () => {
-    await getPlaystateApi(api).onPlaybackStopped({
-      itemId: playSettings?.item?.Id!,
-      mediaSourceId: playSettings.mediaSource?.Id!,
-      positionTicks: Math.floor(progress.value),
-      playSessionId: playSessionId ? playSessionId : undefined,
-    });
-  };
-
-  const reportPlaybackStart = async () => {
-    await getPlaystateApi(api).onPlaybackStart({
-      itemId: playSettings?.item?.Id!,
-      audioStreamIndex: playSettings.audioIndex
-        ? playSettings.audioIndex
-        : undefined,
-      subtitleStreamIndex: playSettings.subtitleIndex
-        ? playSettings.subtitleIndex
-        : undefined,
-      mediaSourceId: playSettings.mediaSource?.Id!,
-      playMethod: playUrl.includes("m3u8") ? "Transcode" : "DirectStream",
-      playSessionId: playSessionId ? playSessionId : undefined,
-    });
-  };
-
-  const onProgress = useCallback(
-    async (data: OnProgressData) => {
-      if (isSeeking.value === true) return;
-      if (isPlaybackStopped === true) return;
-
-      const ticks = data.currentTime * 10000000;
-
-      progress.value = secondsToTicks(data.currentTime);
-      cacheProgress.value = secondsToTicks(data.playableDuration);
-      setIsBuffering(data.playableDuration === 0);
-
-      if (!playSettings?.item?.Id || data.currentTime === 0) return;
-
-      await getPlaystateApi(api).onPlaybackProgress({
-        itemId: playSettings.item.Id,
-        audioStreamIndex: playSettings.audioIndex
-          ? playSettings.audioIndex
-          : undefined,
-        subtitleStreamIndex: playSettings.subtitleIndex
-          ? playSettings.subtitleIndex
-          : undefined,
-        mediaSourceId: playSettings.mediaSource?.Id!,
-        positionTicks: Math.round(ticks),
-        isPaused: !isPlaying,
-        playMethod: playUrl.includes("m3u8") ? "Transcode" : "DirectStream",
-        playSessionId: playSessionId ? playSessionId : undefined,
-      });
-    },
-    [playSettings?.item.Id, isPlaying, api, isPlaybackStopped]
-  );
-
-  useFocusEffect(
-    useCallback(() => {
-      play();
-
-      return () => {
-        stop();
-      };
-    }, [play, stop])
-  );
-
-  const { orientation } = useOrientation();
-  useOrientationSettings();
-
-  useWebSocket({
-    isPlaying: isPlaying,
-    pauseVideo: pause,
-    playVideo: play,
-    stopPlayback: stop,
-  });
-
-  return (
-    <View
-      style={{
-        width: screenDimensions.width,
-        height: screenDimensions.height,
-        position: "relative",
-      }}
-      className="flex flex-col items-center justify-center"
-    >
-      <SystemBars hidden />
-
-      <View className="h-screen w-screen top-0 left-0 flex flex-col items-center justify-center p-4 absolute z-0">
-        <Image
-          source={poster}
-          style={{ width: "100%", height: "100%", resizeMode: "contain" }}
-        />
-      </View>
-
-      <Pressable
-        onPress={() => {
-          setShowControls(!showControls);
-        }}
-        className="absolute z-0 h-full w-full opacity-0"
-      >
-        <Video
-          ref={videoRef}
-          source={videoSource}
-          style={{ width: "100%", height: "100%" }}
-          resizeMode={ignoreSafeAreas ? "cover" : "contain"}
-          onProgress={onProgress}
-          onError={() => {}}
-          onLoad={() => {
-            if (firstTime.current === true) {
-              play();
-              firstTime.current = false;
-            }
-          }}
-          progressUpdateInterval={500}
-          playWhenInactive={true}
-          allowsExternalPlayback={true}
-          playInBackground={true}
-          pictureInPicture={true}
-          showNotificationControls={true}
-          ignoreSilentSwitch="ignore"
-          fullscreen={false}
-          onPlaybackStateChanged={(state) => {
-            setIsPlaying(state.isPlaying);
-          }}
-        />
-      </Pressable>
-
-      <Controls
-        item={playSettings.item}
-        videoRef={videoRef}
-        togglePlay={togglePlay}
-        isPlaying={isPlaying}
-        isSeeking={isSeeking}
-        progress={progress}
-        cacheProgress={cacheProgress}
-        isBuffering={isBuffering}
-        showControls={showControls}
-        setShowControls={setShowControls}
-        setIgnoreSafeAreas={setIgnoreSafeAreas}
-        ignoreSafeAreas={ignoreSafeAreas}
-        enableTrickplay={false}
-      />
-    </View>
-  );
-}
-
-export function usePoster(
-  playSettings: PlaybackType | null,
-  api: Api | null
-): string | undefined {
-  const poster = useMemo(() => {
-    if (!playSettings?.item || !api) return undefined;
-    return playSettings.item.Type === "Audio"
-      ? `${api.basePath}/Items/${playSettings.item.AlbumId}/Images/Primary?tag=${playSettings.item.AlbumPrimaryImageTag}&quality=90&maxHeight=200&maxWidth=200`
-      : getBackdropUrl({
-          api,
-          item: playSettings.item,
-          quality: 70,
-          width: 200,
-        });
-  }, [playSettings?.item, api]);
-
-  return poster ?? undefined;
-}
-
-export function useVideoSource(
-  playSettings: PlaybackType | null,
-  api: Api | null,
-  poster: string | undefined,
-  playUrl?: string | null
-) {
-  const videoSource = useMemo(() => {
-    if (!playSettings || !api || !playUrl) {
-      return null;
-    }
-
-    const startPosition = playSettings.item?.UserData?.PlaybackPositionTicks
-      ? Math.round(playSettings.item.UserData.PlaybackPositionTicks / 10000)
-      : 0;
-
-    return {
-      uri: playUrl,
-      isNetwork: true,
-      startPosition,
-      headers: getAuthHeaders(api),
-      metadata: {
-        artist: playSettings.item?.AlbumArtist ?? undefined,
-        title: playSettings.item?.Name || "Unknown",
-        description: playSettings.item?.Overview ?? undefined,
-        imageUri: poster,
-        subtitle: playSettings.item?.Album ?? undefined,
-      },
-    };
-  }, [playSettings, api, poster]);
-
-  return videoSource;
-}

app/(auth)/play-offline-video.tsx

@@ -1,165 +0,0 @@
-import { Controls } from "@/components/video-player/Controls";
-import { useOrientation } from "@/hooks/useOrientation";
-import { useOrientationSettings } from "@/hooks/useOrientationSettings";
-import { apiAtom } from "@/providers/JellyfinProvider";
-import {
-  PlaybackType,
-  usePlaySettings,
-} from "@/providers/PlaySettingsProvider";
-import { secondsToTicks } from "@/utils/secondsToTicks";
-import { Api } from "@jellyfin/sdk";
-import * as Haptics from "expo-haptics";
-import { useFocusEffect } from "expo-router";
-import { useAtomValue } from "jotai";
-import React, { useCallback, useMemo, useRef, useState } from "react";
-import { Pressable, useWindowDimensions, View } from "react-native";
-import { SystemBars } from "react-native-edge-to-edge";
-import { useSharedValue } from "react-native-reanimated";
-import Video, { OnProgressData, VideoRef } from "react-native-video";
-
-export default function page() {
-  const { playSettings, playUrl } = usePlaySettings();
-
-  const api = useAtomValue(apiAtom);
-  const videoRef = useRef<VideoRef | null>(null);
-  const videoSource = useVideoSource(playSettings, api, playUrl);
-  const firstTime = useRef(true);
-
-  const dimensions = useWindowDimensions();
-  useOrientation();
-  useOrientationSettings();
-
-  const [showControls, setShowControls] = useState(true);
-  const [ignoreSafeAreas, setIgnoreSafeAreas] = useState(false);
-  const [isPlaying, setIsPlaying] = useState(false);
-  const [isBuffering, setIsBuffering] = useState(true);
-
-  const progress = useSharedValue(0);
-  const isSeeking = useSharedValue(false);
-  const cacheProgress = useSharedValue(0);
-
-  const togglePlay = useCallback(async () => {
-    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
-    if (isPlaying) {
-      videoRef.current?.pause();
-    } else {
-      videoRef.current?.resume();
-    }
-  }, [isPlaying]);
-
-  const play = useCallback(() => {
-    setIsPlaying(true);
-    videoRef.current?.resume();
-  }, [videoRef]);
-
-  const stop = useCallback(() => {
-    setIsPlaying(false);
-    videoRef.current?.pause();
-  }, [videoRef]);
-
-  useFocusEffect(
-    useCallback(() => {
-      play();
-
-      return () => {
-        stop();
-      };
-    }, [play, stop])
-  );
-
-  const onProgress = useCallback(async (data: OnProgressData) => {
-    if (isSeeking.value === true) return;
-    progress.value = secondsToTicks(data.currentTime);
-    cacheProgress.value = secondsToTicks(data.playableDuration);
-    setIsBuffering(data.playableDuration === 0);
-  }, []);
-
-  if (!playSettings || !playUrl || !api || !videoSource || !playSettings.item)
-    return null;
-
-  return (
-    <View
-      style={{
-        width: dimensions.width,
-        height: dimensions.height,
-        position: "relative",
-      }}
-      className="flex flex-col items-center justify-center"
-    >
-      <SystemBars hidden />
-      <Pressable
-        onPress={() => {
-          setShowControls(!showControls);
-        }}
-        className="absolute z-0 h-full w-full"
-      >
-        <Video
-          ref={videoRef}
-          source={videoSource}
-          style={{ width: "100%", height: "100%" }}
-          resizeMode={ignoreSafeAreas ? "cover" : "contain"}
-          onProgress={onProgress}
-          onError={() => {}}
-          onLoad={() => {
-            if (firstTime.current === true) {
-              play();
-              firstTime.current = false;
-            }
-          }}
-          playWhenInactive={true}
-          allowsExternalPlayback={true}
-          playInBackground={true}
-          pictureInPicture={true}
-          showNotificationControls={true}
-          ignoreSilentSwitch="ignore"
-          fullscreen={false}
-          onPlaybackStateChanged={(state) => {
-            if (isSeeking.value === false) setIsPlaying(state.isPlaying);
-          }}
-        />
-      </Pressable>
-      <Controls
-        item={playSettings.item}
-        videoRef={videoRef}
-        togglePlay={togglePlay}
-        isPlaying={isPlaying}
-        isSeeking={isSeeking}
-        progress={progress}
-        cacheProgress={cacheProgress}
-        isBuffering={isBuffering}
-        showControls={showControls}
-        setShowControls={setShowControls}
-        setIgnoreSafeAreas={setIgnoreSafeAreas}
-        ignoreSafeAreas={ignoreSafeAreas}
-      />
-    </View>
-  );
-}
-
-export function useVideoSource(
-  playSettings: PlaybackType | null,
-  api: Api | null,
-  playUrl?: string | null
-) {
-  const videoSource = useMemo(() => {
-    if (!playSettings || !api || !playUrl) {
-      return null;
-    }
-
-    const startPosition = 0;
-
-    return {
-      uri: playUrl,
-      isNetwork: false,
-      startPosition,
-      metadata: {
-        artist: playSettings.item?.AlbumArtist ?? undefined,
-        title: playSettings.item?.Name || "Unknown",
-        description: playSettings.item?.Overview ?? undefined,
-        subtitle: playSettings.item?.Album ?? undefined,
-      },
-    };
-  }, [playSettings, api]);
-
-  return videoSource;
-}

app/(auth)/play-video.tsx

@@ -1,341 +0,0 @@
-import { Controls } from "@/components/video-player/Controls";
-import { useOrientation } from "@/hooks/useOrientation";
-import { useOrientationSettings } from "@/hooks/useOrientationSettings";
-import { useWebSocket } from "@/hooks/useWebsockets";
-import { apiAtom } from "@/providers/JellyfinProvider";
-import {
-  PlaybackType,
-  usePlaySettings,
-} from "@/providers/PlaySettingsProvider";
-import { useSettings } from "@/utils/atoms/settings";
-import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
-import { getAuthHeaders } from "@/utils/jellyfin/jellyfin";
-import { secondsToTicks } from "@/utils/secondsToTicks";
-import { Api } from "@jellyfin/sdk";
-import { getPlaystateApi } from "@jellyfin/sdk/lib/utils/api";
-import * as Haptics from "expo-haptics";
-import { useFocusEffect } from "expo-router";
-import { useAtomValue } from "jotai";
-import React, { useCallback, useMemo, useRef, useState } from "react";
-import { Pressable, useWindowDimensions, View } from "react-native";
-import { SystemBars } from "react-native-edge-to-edge";
-import { useSharedValue } from "react-native-reanimated";
-import Video, {
-  OnProgressData,
-  SelectedTrackType,
-  VideoRef,
-} from "react-native-video";
-
-export default function page() {
-  const { playSettings, playUrl, playSessionId } = usePlaySettings();
-  const api = useAtomValue(apiAtom);
-  const [settings] = useSettings();
-  const videoRef = useRef<VideoRef | null>(null);
-  const poster = usePoster(playSettings, api);
-  const videoSource = useVideoSource(playSettings, api, poster, playUrl);
-  const firstTime = useRef(true);
-  const dimensions = useWindowDimensions();
-
-  const [isPlaybackStopped, setIsPlaybackStopped] = useState(false);
-  const [showControls, setShowControls] = useState(true);
-  const [ignoreSafeAreas, setIgnoreSafeAreas] = useState(false);
-  const [isPlaying, setIsPlaying] = useState(false);
-  const [isBuffering, setIsBuffering] = useState(true);
-
-  const progress = useSharedValue(0);
-  const isSeeking = useSharedValue(false);
-  const cacheProgress = useSharedValue(0);
-
-  if (!playSettings || !playUrl || !api || !videoSource || !playSettings.item)
-    return null;
-
-  const togglePlay = useCallback(
-    async (ticks: number) => {
-      Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
-      if (isPlaying) {
-        videoRef.current?.pause();
-        await getPlaystateApi(api).onPlaybackProgress({
-          itemId: playSettings.item?.Id!,
-          audioStreamIndex: playSettings.audioIndex
-            ? playSettings.audioIndex
-            : undefined,
-          subtitleStreamIndex: playSettings.subtitleIndex
-            ? playSettings.subtitleIndex
-            : undefined,
-          mediaSourceId: playSettings.mediaSource?.Id!,
-          positionTicks: Math.floor(ticks),
-          isPaused: true,
-          playMethod: playUrl.includes("m3u8") ? "Transcode" : "DirectStream",
-          playSessionId: playSessionId ? playSessionId : undefined,
-        });
-      } else {
-        videoRef.current?.resume();
-        await getPlaystateApi(api).onPlaybackProgress({
-          itemId: playSettings.item?.Id!,
-          audioStreamIndex: playSettings.audioIndex
-            ? playSettings.audioIndex
-            : undefined,
-          subtitleStreamIndex: playSettings.subtitleIndex
-            ? playSettings.subtitleIndex
-            : undefined,
-          mediaSourceId: playSettings.mediaSource?.Id!,
-          positionTicks: Math.floor(ticks),
-          isPaused: false,
-          playMethod: playUrl.includes("m3u8") ? "Transcode" : "DirectStream",
-          playSessionId: playSessionId ? playSessionId : undefined,
-        });
-      }
-    },
-    [isPlaying, api, playSettings?.item?.Id, videoRef, settings]
-  );
-
-  const play = useCallback(() => {
-    videoRef.current?.resume();
-    reportPlaybackStart();
-  }, [videoRef]);
-
-  const pause = useCallback(() => {
-    videoRef.current?.pause();
-  }, [videoRef]);
-
-  const stop = useCallback(() => {
-    setIsPlaybackStopped(true);
-    videoRef.current?.pause();
-    reportPlaybackStopped();
-  }, [videoRef]);
-
-  const reportPlaybackStopped = async () => {
-    await getPlaystateApi(api).onPlaybackStopped({
-      itemId: playSettings?.item?.Id!,
-      mediaSourceId: playSettings.mediaSource?.Id!,
-      positionTicks: Math.floor(progress.value),
-      playSessionId: playSessionId ? playSessionId : undefined,
-    });
-  };
-
-  const reportPlaybackStart = async () => {
-    await getPlaystateApi(api).onPlaybackStart({
-      itemId: playSettings?.item?.Id!,
-      audioStreamIndex: playSettings.audioIndex
-        ? playSettings.audioIndex
-        : undefined,
-      subtitleStreamIndex: playSettings.subtitleIndex
-        ? playSettings.subtitleIndex
-        : undefined,
-      mediaSourceId: playSettings.mediaSource?.Id!,
-      playMethod: playUrl.includes("m3u8") ? "Transcode" : "DirectStream",
-      playSessionId: playSessionId ? playSessionId : undefined,
-    });
-  };
-
-  const onProgress = useCallback(
-    async (data: OnProgressData) => {
-      if (isSeeking.value === true) return;
-      if (isPlaybackStopped === true) return;
-
-      const ticks = data.currentTime * 10000000;
-
-      progress.value = secondsToTicks(data.currentTime);
-      cacheProgress.value = secondsToTicks(data.playableDuration);
-      setIsBuffering(data.playableDuration === 0);
-
-      if (!playSettings?.item?.Id || data.currentTime === 0) return;
-
-      await getPlaystateApi(api).onPlaybackProgress({
-        itemId: playSettings.item.Id,
-        audioStreamIndex: playSettings.audioIndex
-          ? playSettings.audioIndex
-          : undefined,
-        subtitleStreamIndex: playSettings.subtitleIndex
-          ? playSettings.subtitleIndex
-          : undefined,
-        mediaSourceId: playSettings.mediaSource?.Id!,
-        positionTicks: Math.round(ticks),
-        isPaused: !isPlaying,
-        playMethod: playUrl.includes("m3u8") ? "Transcode" : "DirectStream",
-        playSessionId: playSessionId ? playSessionId : undefined,
-      });
-    },
-    [playSettings?.item.Id, isPlaying, api, isPlaybackStopped]
-  );
-
-  useFocusEffect(
-    useCallback(() => {
-      play();
-
-      return () => {
-        stop();
-      };
-    }, [play, stop])
-  );
-
-  useOrientation();
-  useOrientationSettings();
-
-  useWebSocket({
-    isPlaying: isPlaying,
-    pauseVideo: pause,
-    playVideo: play,
-    stopPlayback: stop,
-  });
-
-  const selectedSubtitleTrack = useMemo(() => {
-    const a = playSettings?.mediaSource?.MediaStreams?.find(
-      (s) => s.Index === playSettings.subtitleIndex
-    );
-    console.log(a);
-    return a;
-  }, [playSettings]);
-
-  const [hlsSubTracks, setHlsSubTracks] = useState<
-    {
-      index: number;
-      language?: string | undefined;
-      selected?: boolean | undefined;
-      title?: string | undefined;
-      type: any;
-    }[]
-  >([]);
-
-  const selectedTextTrack = useMemo(() => {
-    for (let st of hlsSubTracks) {
-      if (st.title === selectedSubtitleTrack?.DisplayTitle) {
-        return {
-          type: SelectedTrackType.TITLE,
-          value: selectedSubtitleTrack?.DisplayTitle ?? "",
-        };
-      }
-    }
-    return undefined;
-  }, [hlsSubTracks]);
-
-  return (
-    <View
-      style={{
-        flex: 1,
-        flexDirection: "column",
-        justifyContent: "center",
-        alignItems: "center",
-        width: dimensions.width,
-        height: dimensions.height,
-        position: "relative",
-      }}
-    >
-      <SystemBars hidden />
-      <Pressable
-        onPress={() => {
-          setShowControls(!showControls);
-        }}
-        style={{
-          position: "absolute",
-          top: 0,
-          left: 0,
-          width: dimensions.width,
-          height: dimensions.height,
-          zIndex: 0,
-        }}
-      >
-        <Video
-          ref={videoRef}
-          source={videoSource}
-          style={{
-            width: dimensions.width,
-            height: dimensions.height,
-          }}
-          resizeMode={ignoreSafeAreas ? "cover" : "contain"}
-          onProgress={onProgress}
-          onError={() => {}}
-          onLoad={() => {
-            if (firstTime.current === true) {
-              play();
-              firstTime.current = false;
-            }
-          }}
-          progressUpdateInterval={500}
-          playWhenInactive={true}
-          allowsExternalPlayback={true}
-          playInBackground={true}
-          pictureInPicture={true}
-          showNotificationControls={true}
-          ignoreSilentSwitch="ignore"
-          fullscreen={false}
-          onPlaybackStateChanged={(state) => {
-            if (isSeeking.value === false) setIsPlaying(state.isPlaying);
-          }}
-          onTextTracks={(data) => {
-            console.log("onTextTracks ~", data);
-            setHlsSubTracks(data.textTracks as any);
-          }}
-          selectedTextTrack={selectedTextTrack}
-        />
-      </Pressable>
-
-      <Controls
-        item={playSettings.item}
-        videoRef={videoRef}
-        togglePlay={togglePlay}
-        isPlaying={isPlaying}
-        isSeeking={isSeeking}
-        progress={progress}
-        cacheProgress={cacheProgress}
-        isBuffering={isBuffering}
-        showControls={showControls}
-        setShowControls={setShowControls}
-        setIgnoreSafeAreas={setIgnoreSafeAreas}
-        ignoreSafeAreas={ignoreSafeAreas}
-      />
-    </View>
-  );
-}
-
-export function usePoster(
-  playSettings: PlaybackType | null,
-  api: Api | null
-): string | undefined {
-  const poster = useMemo(() => {
-    if (!playSettings?.item || !api) return undefined;
-    return playSettings.item.Type === "Audio"
-      ? `${api.basePath}/Items/${playSettings.item.AlbumId}/Images/Primary?tag=${playSettings.item.AlbumPrimaryImageTag}&quality=90&maxHeight=200&maxWidth=200`
-      : getBackdropUrl({
-          api,
-          item: playSettings.item,
-          quality: 70,
-          width: 200,
-        });
-  }, [playSettings?.item, api]);
-
-  return poster ?? undefined;
-}
-
-export function useVideoSource(
-  playSettings: PlaybackType | null,
-  api: Api | null,
-  poster: string | undefined,
-  playUrl?: string | null
-) {
-  const videoSource = useMemo(() => {
-    if (!playSettings || !api || !playUrl) {
-      return null;
-    }
-
-    const startPosition = playSettings.item?.UserData?.PlaybackPositionTicks
-      ? Math.round(playSettings.item.UserData.PlaybackPositionTicks / 10000)
-      : 0;
-
-    return {
-      uri: playUrl,
-      isNetwork: true,
-      startPosition,
-      headers: getAuthHeaders(api),
-      metadata: {
-        artist: playSettings.item?.AlbumArtist ?? undefined,
-        title: playSettings.item?.Name || "Unknown",
-        description: playSettings.item?.Overview ?? undefined,
-        imageUri: poster,
-        subtitle: playSettings.item?.Album ?? undefined,
-      },
-    };
-  }, [playSettings, api, poster]);
-
-  return videoSource;
-}

app/(auth)/player/_layout.tsx

@@ -0,0 +1,40 @@
+import { Stack } from "expo-router";
+import React from "react";
+import { SystemBars } from "react-native-edge-to-edge";
+
+export default function Layout() {
+  return (
+    <>
+      <SystemBars hidden />
+      <Stack>
+        <Stack.Screen
+          name="direct-player"
+          options={{
+            headerShown: false,
+            autoHideHomeIndicator: true,
+            title: "",
+            animation: "fade",
+          }}
+        />
+        <Stack.Screen
+          name="transcoding-player"
+          options={{
+            headerShown: false,
+            autoHideHomeIndicator: true,
+            title: "",
+            animation: "fade",
+          }}
+        />
+        <Stack.Screen
+          name="music-player"
+          options={{
+            headerShown: false,
+            autoHideHomeIndicator: true,
+            title: "",
+            animation: "fade",
+          }}
+        />
+      </Stack>
+    </>
+  );
+}

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

@@ -0,0 +1,525 @@
+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 { useOrientation } from "@/hooks/useOrientation";
+import { useOrientationSettings } from "@/hooks/useOrientationSettings";
+import { useInvalidatePlaybackProgressCache } from "@/hooks/useRevalidatePlaybackProgressCache";
+import { useWebSocket } from "@/hooks/useWebsockets";
+import { VlcPlayerView } from "@/modules/vlc-player";
+import {
+  PlaybackStatePayload,
+  ProgressUpdatePayload,
+  VlcPlayerViewRef,
+} from "@/modules/vlc-player/src/VlcPlayer.types";
+import { useDownload } from "@/providers/DownloadProvider";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
+import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
+import { writeToLog } from "@/utils/log";
+import native from "@/utils/profiles/native";
+import { msToTicks, ticksToSeconds } from "@/utils/time";
+import { Api } from "@jellyfin/sdk";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+import {
+  getPlaystateApi,
+  getUserLibraryApi,
+} from "@jellyfin/sdk/lib/utils/api";
+import { useQuery } from "@tanstack/react-query";
+import * as Haptics from "expo-haptics";
+import { useFocusEffect, useGlobalSearchParams } from "expo-router";
+import { useAtomValue } from "jotai";
+import React, { useCallback, useMemo, useRef, useState } from "react";
+import { Alert, BackHandler, View } from "react-native";
+import { useSharedValue } from "react-native-reanimated";
+
+export default function page() {
+  const videoRef = useRef<VlcPlayerViewRef>(null);
+  const user = useAtomValue(userAtom);
+  const api = useAtomValue(apiAtom);
+
+  const [isPlaybackStopped, setIsPlaybackStopped] = useState(false);
+  const [showControls, _setShowControls] = useState(true);
+  const [ignoreSafeAreas, setIgnoreSafeAreas] = useState(false);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [isBuffering, setIsBuffering] = useState(true);
+  const [isVideoLoaded, setIsVideoLoaded] = useState(false);
+
+  const progress = useSharedValue(0);
+  const isSeeking = useSharedValue(false);
+  const cacheProgress = useSharedValue(0);
+
+  const { getDownloadedItem } = useDownload();
+  const revalidateProgressCache = useInvalidatePlaybackProgressCache();
+
+  const setShowControls = useCallback((show: boolean) => {
+    _setShowControls(show);
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+  }, []);
+
+  const {
+    itemId,
+    audioIndex: audioIndexStr,
+    subtitleIndex: subtitleIndexStr,
+    mediaSourceId,
+    bitrateValue: bitrateValueStr,
+    offline: offlineStr,
+  } = useGlobalSearchParams<{
+    itemId: string;
+    audioIndex: string;
+    subtitleIndex: string;
+    mediaSourceId: string;
+    bitrateValue: string;
+    offline: string;
+  }>();
+
+  const offline = offlineStr === "true";
+
+  const audioIndex = audioIndexStr ? parseInt(audioIndexStr, 10) : undefined;
+  const subtitleIndex = subtitleIndexStr ? parseInt(subtitleIndexStr, 10) : -1;
+  const bitrateValue = bitrateValueStr
+    ? parseInt(bitrateValueStr, 10)
+    : BITRATES[0].value;
+
+  const {
+    data: item,
+    isLoading: isLoadingItem,
+    isError: isErrorItem,
+  } = useQuery({
+    queryKey: ["item", itemId],
+    queryFn: async () => {
+      console.log("Offline:", offline);
+      if (offline) {
+        const item = await getDownloadedItem(itemId);
+        if (item) return item.item;
+      }
+
+      const res = await getUserLibraryApi(api!).getItem({
+        itemId,
+        userId: user?.Id,
+      });
+
+      return res.data;
+    },
+    enabled: !!itemId,
+    staleTime: 0,
+  });
+
+  const {
+    data: stream,
+    isLoading: isLoadingStreamUrl,
+    isError: isErrorStreamUrl,
+  } = useQuery({
+    queryKey: [
+      "stream-url",
+      itemId,
+      audioIndex,
+      subtitleIndex,
+      mediaSourceId,
+      bitrateValue,
+    ],
+    queryFn: async () => {
+      console.log("Offline:", offline);
+      if (offline) {
+        const data = await getDownloadedItem(itemId);
+        if (!data?.mediaSource) return null;
+
+        const url = await getDownloadedFileUrl(data.item.Id!);
+
+        if (item)
+          return {
+            mediaSource: data.mediaSource,
+            url,
+            sessionId: undefined,
+          };
+      }
+
+      const res = await getStreamUrl({
+        api,
+        item,
+        startTimeTicks: item?.UserData?.PlaybackPositionTicks!,
+        userId: user?.Id,
+        audioStreamIndex: audioIndex,
+        maxStreamingBitrate: bitrateValue,
+        mediaSourceId: mediaSourceId,
+        subtitleStreamIndex: subtitleIndex,
+        deviceProfile: native,
+      });
+
+      if (!res) return null;
+
+      const { mediaSource, sessionId, url } = res;
+
+      if (!sessionId || !mediaSource || !url) {
+        Alert.alert("Error", "Failed to get stream url");
+        return null;
+      }
+
+      return {
+        mediaSource,
+        sessionId,
+        url,
+      };
+    },
+    enabled: !!itemId && !!item,
+    staleTime: 0,
+  });
+
+  const togglePlay = useCallback(
+    async (ms: number) => {
+      if (!api) return;
+
+      Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+      if (isPlaying) {
+        await videoRef.current?.pause();
+
+        if (!offline && stream) {
+          await getPlaystateApi(api).onPlaybackProgress({
+            itemId: item?.Id!,
+            audioStreamIndex: audioIndex ? audioIndex : undefined,
+            subtitleStreamIndex: subtitleIndex ? subtitleIndex : undefined,
+            mediaSourceId: mediaSourceId,
+            positionTicks: msToTicks(ms),
+            isPaused: true,
+            playMethod: stream.url?.includes("m3u8")
+              ? "Transcode"
+              : "DirectStream",
+            playSessionId: stream.sessionId,
+          });
+        }
+
+        console.log("Actually marked as paused");
+      } else {
+        videoRef.current?.play();
+        if (!offline && stream) {
+          await getPlaystateApi(api).onPlaybackProgress({
+            itemId: item?.Id!,
+            audioStreamIndex: audioIndex ? audioIndex : undefined,
+            subtitleStreamIndex: subtitleIndex ? subtitleIndex : undefined,
+            mediaSourceId: mediaSourceId,
+            positionTicks: msToTicks(ms),
+            isPaused: false,
+            playMethod: stream?.url.includes("m3u8")
+              ? "Transcode"
+              : "DirectStream",
+            playSessionId: stream.sessionId,
+          });
+        }
+      }
+    },
+    [
+      isPlaying,
+      api,
+      item,
+      stream,
+      videoRef,
+      audioIndex,
+      subtitleIndex,
+      mediaSourceId,
+      offline,
+    ]
+  );
+
+  const play = useCallback(() => {
+    videoRef.current?.play();
+    reportPlaybackStart();
+  }, [videoRef]);
+
+  const pause = useCallback(() => {
+    videoRef.current?.pause();
+  }, [videoRef]);
+
+  const reportPlaybackStopped = useCallback(async () => {
+    if (offline) return;
+
+    const currentTimeInTicks = msToTicks(progress.value);
+
+    await getPlaystateApi(api!).onPlaybackStopped({
+      itemId: item?.Id!,
+      mediaSourceId: mediaSourceId,
+      positionTicks: currentTimeInTicks,
+      playSessionId: stream?.sessionId!,
+    });
+
+    revalidateProgressCache();
+  }, [api, item, mediaSourceId, stream]);
+
+  const stop = useCallback(() => {
+    reportPlaybackStopped();
+    setIsPlaybackStopped(true);
+    videoRef.current?.stop();
+  }, [videoRef, reportPlaybackStopped]);
+
+  const reportPlaybackStart = useCallback(async () => {
+    if (offline) return;
+
+    if (!stream) return;
+    await getPlaystateApi(api!).onPlaybackStart({
+      itemId: item?.Id!,
+      audioStreamIndex: audioIndex ? audioIndex : undefined,
+      subtitleStreamIndex: subtitleIndex ? subtitleIndex : undefined,
+      mediaSourceId: mediaSourceId,
+      playMethod: stream.url?.includes("m3u8") ? "Transcode" : "DirectStream",
+      playSessionId: stream?.sessionId ? stream?.sessionId : undefined,
+    });
+  }, [api, item, mediaSourceId, stream]);
+
+  const onProgress = useCallback(
+    async (data: ProgressUpdatePayload) => {
+      if (isSeeking.value === true) return;
+      if (isPlaybackStopped === true) return;
+
+      const { currentTime } = data.nativeEvent;
+
+      if (isBuffering) {
+        setIsBuffering(false);
+      }
+
+      progress.value = currentTime;
+
+      if (offline) return;
+
+      const currentTimeInTicks = msToTicks(currentTime);
+
+      if (!item?.Id || !stream) return;
+
+      await getPlaystateApi(api!).onPlaybackProgress({
+        itemId: item.Id,
+        audioStreamIndex: audioIndex ? audioIndex : undefined,
+        subtitleStreamIndex: subtitleIndex ? subtitleIndex : undefined,
+        mediaSourceId: mediaSourceId,
+        positionTicks: Math.floor(currentTimeInTicks),
+        isPaused: !isPlaying,
+        playMethod: stream?.url.includes("m3u8") ? "Transcode" : "DirectStream",
+        playSessionId: stream.sessionId,
+      });
+    },
+    [item?.Id, isPlaying, api, isPlaybackStopped]
+  );
+
+  useOrientation();
+  useOrientationSettings();
+
+  useWebSocket({
+    isPlaying: isPlaying,
+    pauseVideo: pause,
+    playVideo: play,
+    stopPlayback: stop,
+    offline,
+  });
+
+  const onPlaybackStateChanged = useCallback((e: PlaybackStatePayload) => {
+    const { state, isBuffering, isPlaying } = e.nativeEvent;
+
+    if (state === "Playing") {
+      setIsPlaying(true);
+      return;
+    }
+
+    if (state === "Paused") {
+      setIsPlaying(false);
+      return;
+    }
+
+    if (isPlaying) {
+      setIsPlaying(true);
+      setIsBuffering(false);
+    } else if (isBuffering) {
+      setIsBuffering(true);
+    }
+  }, []);
+
+  const startPosition = useMemo(() => {
+    if (offline) return 0;
+
+    return item?.UserData?.PlaybackPositionTicks
+      ? ticksToSeconds(item.UserData.PlaybackPositionTicks)
+      : 0;
+  }, [item]);
+
+  const backAction = () => {
+    videoRef.current?.stop();
+    return false;
+  };
+
+  useFocusEffect(
+    React.useCallback(() => {
+      const onBackPress = () => {
+        return backAction();
+      };
+
+      BackHandler.addEventListener("hardwareBackPress", onBackPress);
+
+      return async () => {
+        videoRef.current?.stop();
+        BackHandler.removeEventListener("hardwareBackPress", onBackPress);
+      };
+    }, [])
+  );
+
+  // Preselection of audio and subtitle tracks.
+
+  let initOptions = ["--sub-text-scale=60"];
+  let externalTrack = { name: "", DeliveryUrl: "" };
+
+  const allSubs =
+    stream?.mediaSource.MediaStreams?.filter(
+      (sub) => sub.Type === "Subtitle"
+    ) || [];
+  const chosenSubtitleTrack = allSubs.find(
+    (sub) => sub.Index === subtitleIndex
+  );
+  const allAudio =
+    stream?.mediaSource.MediaStreams?.filter(
+      (audio) => audio.Type === "Audio"
+    ) || [];
+  const chosenAudioTrack = allAudio.find((audio) => audio.Index === audioIndex);
+
+  // Direct playback CASE
+  if (!bitrateValue) {
+    // If Subtitle is embedded we can use the position to select it straight away.
+    if (chosenSubtitleTrack && !chosenSubtitleTrack.DeliveryUrl) {
+      initOptions.push(`--sub-track=${allSubs.indexOf(chosenSubtitleTrack)}`);
+    } else if (chosenSubtitleTrack && chosenSubtitleTrack.DeliveryUrl) {
+      // If Subtitle is external we need to pass the URL to the player.
+      externalTrack = {
+        name: chosenSubtitleTrack.DisplayTitle || "",
+        DeliveryUrl: `${api?.basePath || ""}${chosenSubtitleTrack.DeliveryUrl}`,
+      };
+    }
+
+    if (chosenAudioTrack)
+      initOptions.push(`--audio-track=${allAudio.indexOf(chosenAudioTrack)}`);
+  } else {
+    // Transcoded playback CASE
+    if (chosenSubtitleTrack?.DeliveryMethod === "Hls") {
+      externalTrack = {
+        name: `subs ${chosenSubtitleTrack.DisplayTitle}`,
+        DeliveryUrl: "",
+      };
+    }
+  }
+
+  if (!item || isLoadingItem || isLoadingStreamUrl || !stream)
+    return (
+      <View className="w-screen h-screen flex flex-col items-center justify-center bg-black">
+        <Loader />
+      </View>
+    );
+
+  if (isErrorItem || isErrorStreamUrl)
+    return (
+      <View className="w-screen h-screen flex flex-col items-center justify-center bg-black">
+        <Text className="text-white">Error</Text>
+      </View>
+    );
+
+  return (
+    <View style={{ flex: 1, backgroundColor: "black" }}>
+      <View
+        style={{
+          display: "flex",
+          width: "100%",
+          height: "100%",
+          position: "relative",
+          flexDirection: "column",
+          justifyContent: "center",
+          opacity: showControls ? 0.5 : 1,
+        }}
+      >
+        <VlcPlayerView
+          ref={videoRef}
+          source={{
+            uri: stream.url,
+            autoplay: true,
+            isNetwork: true,
+            startPosition,
+            externalTrack,
+            initOptions,
+          }}
+          style={{ width: "100%", height: "100%" }}
+          onVideoProgress={onProgress}
+          progressUpdateInterval={1000}
+          onVideoStateChange={onPlaybackStateChanged}
+          onVideoLoadStart={() => {}}
+          onVideoLoadEnd={() => {
+            setIsVideoLoaded(true);
+          }}
+          onVideoError={(e) => {
+            console.error("Video Error:", e.nativeEvent);
+            Alert.alert(
+              "Error",
+              "An error occurred while playing the video. Check logs in settings."
+            );
+            writeToLog("ERROR", "Video Error", e.nativeEvent);
+          }}
+        />
+
+        <View
+          style={{
+            position: "absolute",
+            flexDirection: "column",
+            justifyContent: "center",
+            alignItems: "center",
+            opacity: isBuffering ? 1 : 0,
+            width: "100%",
+            height: "100%",
+          }}
+          pointerEvents="none"
+        >
+          <Loader />
+        </View>
+      </View>
+      {videoRef.current && (
+        <Controls
+          mediaSource={stream?.mediaSource}
+          item={item}
+          videoRef={videoRef}
+          togglePlay={togglePlay}
+          isPlaying={isPlaying}
+          isSeeking={isSeeking}
+          progress={progress}
+          cacheProgress={cacheProgress}
+          isBuffering={isBuffering}
+          showControls={showControls}
+          setShowControls={setShowControls}
+          setIgnoreSafeAreas={setIgnoreSafeAreas}
+          ignoreSafeAreas={ignoreSafeAreas}
+          isVideoLoaded={isVideoLoaded}
+          play={videoRef.current?.play}
+          pause={videoRef.current?.pause}
+          seek={videoRef.current?.seekTo}
+          enableTrickplay={true}
+          getAudioTracks={videoRef.current?.getAudioTracks}
+          getSubtitleTracks={videoRef.current?.getSubtitleTracks}
+          offline={false}
+          setSubtitleTrack={videoRef.current.setSubtitleTrack}
+          setSubtitleURL={videoRef.current.setSubtitleURL}
+          setAudioTrack={videoRef.current.setAudioTrack}
+          stop={stop}
+          isVlc
+        />
+      )}
+    </View>
+  );
+}
+
+export function usePoster(
+  item: BaseItemDto,
+  api: Api | null
+): string | undefined {
+  const poster = useMemo(() => {
+    if (!item || !api) return undefined;
+    return item.Type === "Audio"
+      ? `${api.basePath}/Items/${item.AlbumId}/Images/Primary?tag=${item.AlbumPrimaryImageTag}&quality=90&maxHeight=200&maxWidth=200`
+      : getBackdropUrl({
+          api,
+          item: item,
+          quality: 70,
+          width: 200,
+        });
+  }, [item, api]);
+
+  return poster ?? undefined;
+}

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

@@ -0,0 +1,420 @@
+import { Text } from "@/components/common/Text";
+import { Loader } from "@/components/Loader";
+import { Controls } from "@/components/video-player/controls/Controls";
+import { useOrientation } from "@/hooks/useOrientation";
+import { useOrientationSettings } from "@/hooks/useOrientationSettings";
+import { useWebSocket } from "@/hooks/useWebsockets";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { useSettings } from "@/utils/atoms/settings";
+import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
+import { getAuthHeaders } from "@/utils/jellyfin/jellyfin";
+import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
+import { secondsToTicks } from "@/utils/secondsToTicks";
+import { Api } from "@jellyfin/sdk";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+import {
+  getPlaystateApi,
+  getUserLibraryApi,
+} from "@jellyfin/sdk/lib/utils/api";
+import { useQuery } from "@tanstack/react-query";
+import * as Haptics from "expo-haptics";
+import { Image } from "expo-image";
+import { useFocusEffect, useLocalSearchParams } from "expo-router";
+import { useAtomValue } from "jotai";
+import React, { useCallback, useMemo, useRef, useState } from "react";
+import { Pressable, useWindowDimensions, View } from "react-native";
+import { useSharedValue } from "react-native-reanimated";
+import Video, { OnProgressData, VideoRef } from "react-native-video";
+
+export default function page() {
+  const api = useAtomValue(apiAtom);
+  const user = useAtomValue(userAtom);
+  const [settings] = useSettings();
+  const videoRef = useRef<VideoRef | null>(null);
+  const windowDimensions = useWindowDimensions();
+
+  const firstTime = useRef(true);
+
+  const [isPlaybackStopped, setIsPlaybackStopped] = useState(false);
+  const [showControls, setShowControls] = useState(true);
+  const [ignoreSafeAreas, setIgnoreSafeAreas] = useState(false);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [isBuffering, setIsBuffering] = useState(true);
+
+  const progress = useSharedValue(0);
+  const isSeeking = useSharedValue(false);
+  const cacheProgress = useSharedValue(0);
+
+  const {
+    itemId,
+    audioIndex: audioIndexStr,
+    subtitleIndex: subtitleIndexStr,
+    mediaSourceId,
+    bitrateValue: bitrateValueStr,
+  } = useLocalSearchParams<{
+    itemId: string;
+    audioIndex: string;
+    subtitleIndex: string;
+    mediaSourceId: string;
+    bitrateValue: string;
+  }>();
+
+  const audioIndex = audioIndexStr ? parseInt(audioIndexStr, 10) : undefined;
+  const subtitleIndex = subtitleIndexStr
+    ? parseInt(subtitleIndexStr, 10)
+    : undefined;
+  const bitrateValue = bitrateValueStr
+    ? parseInt(bitrateValueStr, 10)
+    : undefined;
+
+  const {
+    data: item,
+    isLoading: isLoadingItem,
+    isError: isErrorItem,
+  } = useQuery({
+    queryKey: ["item", itemId],
+    queryFn: async () => {
+      if (!api) return;
+      const res = await getUserLibraryApi(api).getItem({
+        itemId,
+        userId: user?.Id,
+      });
+
+      return res.data;
+    },
+    enabled: !!itemId && !!api,
+    staleTime: 0,
+  });
+
+  const {
+    data: stream,
+    isLoading: isLoadingStreamUrl,
+    isError: isErrorStreamUrl,
+  } = useQuery({
+    queryKey: ["stream-url"],
+    queryFn: async () => {
+      if (!api) return;
+      const res = await getStreamUrl({
+        api,
+        item,
+        startTimeTicks: item?.UserData?.PlaybackPositionTicks!,
+        userId: user?.Id,
+        audioStreamIndex: audioIndex,
+        maxStreamingBitrate: bitrateValue,
+        mediaSourceId: mediaSourceId,
+        subtitleStreamIndex: subtitleIndex,
+      });
+
+      if (!res) return null;
+
+      const { mediaSource, sessionId, url } = res;
+
+      if (!sessionId || !mediaSource || !url) return null;
+
+      return {
+        mediaSource,
+        sessionId,
+        url,
+      };
+    },
+  });
+
+  const poster = usePoster(item, api);
+  const videoSource = useVideoSource(item, api, poster, stream?.url);
+
+  const togglePlay = useCallback(
+    async (ticks: number) => {
+      Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+      if (isPlaying) {
+        videoRef.current?.pause();
+        await getPlaystateApi(api!).onPlaybackProgress({
+          itemId: item?.Id!,
+          audioStreamIndex: audioIndex ? audioIndex : undefined,
+          subtitleStreamIndex: subtitleIndex ? subtitleIndex : undefined,
+          mediaSourceId: mediaSourceId,
+          positionTicks: Math.floor(ticks),
+          isPaused: true,
+          playMethod: stream?.url.includes("m3u8")
+            ? "Transcode"
+            : "DirectStream",
+          playSessionId: stream?.sessionId,
+        });
+      } else {
+        videoRef.current?.resume();
+        await getPlaystateApi(api!).onPlaybackProgress({
+          itemId: item?.Id!,
+          audioStreamIndex: audioIndex ? audioIndex : undefined,
+          subtitleStreamIndex: subtitleIndex ? subtitleIndex : undefined,
+          mediaSourceId: mediaSourceId,
+          positionTicks: Math.floor(ticks),
+          isPaused: false,
+          playMethod: stream?.url.includes("m3u8")
+            ? "Transcode"
+            : "DirectStream",
+          playSessionId: stream?.sessionId,
+        });
+      }
+    },
+    [
+      isPlaying,
+      api,
+      item,
+      videoRef,
+      settings,
+      audioIndex,
+      subtitleIndex,
+      mediaSourceId,
+      stream,
+    ]
+  );
+
+  const play = useCallback(() => {
+    console.log("play");
+    videoRef.current?.resume();
+    reportPlaybackStart();
+  }, [videoRef]);
+
+  const pause = useCallback(() => {
+    console.log("play");
+    videoRef.current?.pause();
+  }, [videoRef]);
+
+  const stop = useCallback(() => {
+    console.log("stop");
+    setIsPlaybackStopped(true);
+    videoRef.current?.pause();
+    reportPlaybackStopped();
+  }, [videoRef]);
+
+  const seek = useCallback(
+    (seconds: number) => {
+      videoRef.current?.seek(seconds);
+    },
+    [videoRef]
+  );
+
+  const reportPlaybackStopped = async () => {
+    if (!item?.Id) return;
+    await getPlaystateApi(api!).onPlaybackStopped({
+      itemId: item.Id,
+      mediaSourceId: mediaSourceId,
+      positionTicks: Math.floor(progress.value),
+      playSessionId: stream?.sessionId,
+    });
+  };
+
+  const reportPlaybackStart = async () => {
+    if (!item?.Id) return;
+    await getPlaystateApi(api!).onPlaybackStart({
+      itemId: item?.Id,
+      audioStreamIndex: audioIndex ? audioIndex : undefined,
+      subtitleStreamIndex: subtitleIndex ? subtitleIndex : undefined,
+      mediaSourceId: mediaSourceId,
+      playMethod: stream?.url.includes("m3u8") ? "Transcode" : "DirectStream",
+      playSessionId: stream?.sessionId,
+    });
+  };
+
+  const onProgress = useCallback(
+    async (data: OnProgressData) => {
+      if (isSeeking.value === true) return;
+      if (isPlaybackStopped === true) return;
+
+      const ticks = data.currentTime * 10000000;
+
+      progress.value = secondsToTicks(data.currentTime);
+      cacheProgress.value = secondsToTicks(data.playableDuration);
+      setIsBuffering(data.playableDuration === 0);
+
+      if (!item?.Id || data.currentTime === 0) return;
+
+      await getPlaystateApi(api!).onPlaybackProgress({
+        itemId: item.Id!,
+        audioStreamIndex: audioIndex ? audioIndex : undefined,
+        subtitleStreamIndex: subtitleIndex ? subtitleIndex : undefined,
+        mediaSourceId: mediaSourceId,
+        positionTicks: Math.round(ticks),
+        isPaused: !isPlaying,
+        playMethod: stream?.url.includes("m3u8") ? "Transcode" : "DirectStream",
+        playSessionId: stream?.sessionId,
+      });
+    },
+    [
+      item,
+      isPlaying,
+      api,
+      isPlaybackStopped,
+      audioIndex,
+      subtitleIndex,
+      mediaSourceId,
+      stream,
+    ]
+  );
+
+  useFocusEffect(
+    useCallback(() => {
+      play();
+
+      return () => {
+        stop();
+      };
+    }, [play, stop])
+  );
+
+  useOrientation();
+  useOrientationSettings();
+
+  useWebSocket({
+    isPlaying: isPlaying,
+    pauseVideo: pause,
+    playVideo: play,
+    stopPlayback: stop,
+  });
+
+  if (isLoadingItem || isLoadingStreamUrl)
+    return (
+      <View className="w-screen h-screen flex flex-col items-center justify-center bg-black">
+        <Loader />
+      </View>
+    );
+
+  if (isErrorItem || isErrorStreamUrl)
+    return (
+      <View className="w-screen h-screen flex flex-col items-center justify-center bg-black">
+        <Text className="text-white">Error</Text>
+      </View>
+    );
+
+  if (!item || !stream)
+    return (
+      <View className="w-screen h-screen flex flex-col items-center justify-center bg-black">
+        <Text className="text-white">Error</Text>
+      </View>
+    );
+
+  return (
+    <View
+      style={{
+        width: windowDimensions.width,
+        height: windowDimensions.height,
+        position: "relative",
+      }}
+      className="flex flex-col items-center justify-center"
+    >
+      <View className="h-screen w-screen top-0 left-0 flex flex-col items-center justify-center p-4 absolute z-0">
+        <Image
+          source={poster}
+          style={{ width: "100%", height: "100%", resizeMode: "contain" }}
+        />
+      </View>
+
+      <Pressable
+        onPress={() => {
+          setShowControls(!showControls);
+        }}
+        className="absolute z-0 h-full w-full opacity-0"
+      >
+        {videoSource && (
+          <Video
+            ref={videoRef}
+            source={videoSource}
+            style={{ width: "100%", height: "100%" }}
+            resizeMode={ignoreSafeAreas ? "cover" : "contain"}
+            onProgress={onProgress}
+            onError={() => {}}
+            onLoad={() => {
+              if (firstTime.current === true) {
+                play();
+                firstTime.current = false;
+              }
+            }}
+            progressUpdateInterval={500}
+            playWhenInactive={true}
+            allowsExternalPlayback={true}
+            playInBackground={true}
+            pictureInPicture={true}
+            showNotificationControls={true}
+            ignoreSilentSwitch="ignore"
+            fullscreen={false}
+            onPlaybackStateChanged={(state) => {
+              setIsPlaying(state.isPlaying);
+            }}
+          />
+        )}
+      </Pressable>
+
+      <Controls
+        item={item}
+        videoRef={videoRef}
+        togglePlay={togglePlay}
+        isPlaying={isPlaying}
+        isSeeking={isSeeking}
+        progress={progress}
+        cacheProgress={cacheProgress}
+        isBuffering={isBuffering}
+        showControls={showControls}
+        setShowControls={setShowControls}
+        setIgnoreSafeAreas={setIgnoreSafeAreas}
+        ignoreSafeAreas={ignoreSafeAreas}
+        enableTrickplay={false}
+        pause={pause}
+        play={play}
+        seek={seek}
+        isVlc={false}
+        stop={stop}
+      />
+    </View>
+  );
+}
+
+export function usePoster(
+  item: BaseItemDto | null | undefined,
+  api: Api | null
+): string | undefined {
+  const poster = useMemo(() => {
+    if (!item || !api) return undefined;
+    return item.Type === "Audio"
+      ? `${api.basePath}/Items/${item.AlbumId}/Images/Primary?tag=${item.AlbumPrimaryImageTag}&quality=90&maxHeight=200&maxWidth=200`
+      : getBackdropUrl({
+          api,
+          item: item,
+          quality: 70,
+          width: 200,
+        });
+  }, [item, api]);
+
+  return poster ?? undefined;
+}
+
+export function useVideoSource(
+  item: BaseItemDto | null | undefined,
+  api: Api | null,
+  poster: string | undefined,
+  url?: string | null
+) {
+  const videoSource = useMemo(() => {
+    if (!item || !api || !url) {
+      return null;
+    }
+
+    const startPosition = item?.UserData?.PlaybackPositionTicks
+      ? Math.round(item.UserData.PlaybackPositionTicks / 10000)
+      : 0;
+
+    return {
+      uri: url,
+      isNetwork: true,
+      startPosition,
+      headers: getAuthHeaders(api),
+      metadata: {
+        artist: item?.AlbumArtist ?? undefined,
+        title: item?.Name || "Unknown",
+        description: item?.Overview ?? undefined,
+        imageUri: poster,
+        subtitle: item?.Album ?? undefined,
+      },
+    };
+  }, [item, api, poster]);
+
+  return videoSource;
+}

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

@@ -0,0 +1,590 @@
+import { Text } from "@/components/common/Text";
+import { Loader } from "@/components/Loader";
+import { Controls } from "@/components/video-player/controls/Controls";
+import { useOrientation } from "@/hooks/useOrientation";
+import { useOrientationSettings } from "@/hooks/useOrientationSettings";
+import { useInvalidatePlaybackProgressCache } from "@/hooks/useRevalidatePlaybackProgressCache";
+import { useWebSocket } from "@/hooks/useWebsockets";
+import { TrackInfo } from "@/modules/vlc-player";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { useSettings } from "@/utils/atoms/settings";
+import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
+import { getAuthHeaders } from "@/utils/jellyfin/jellyfin";
+import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
+import transcoding from "@/utils/profiles/transcoding";
+import { secondsToTicks } from "@/utils/secondsToTicks";
+import { Api } from "@jellyfin/sdk";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+import {
+  getPlaystateApi,
+  getUserLibraryApi,
+} from "@jellyfin/sdk/lib/utils/api";
+import { useQuery } from "@tanstack/react-query";
+import * as Haptics from "expo-haptics";
+import { useFocusEffect, useLocalSearchParams } from "expo-router";
+import { useAtomValue } from "jotai";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { BackHandler, View } from "react-native";
+import { useSharedValue } from "react-native-reanimated";
+import Video, {
+  OnProgressData,
+  SelectedTrack,
+  SelectedTrackType,
+  VideoRef,
+} from "react-native-video";
+
+const Player = () => {
+  const api = useAtomValue(apiAtom);
+  const user = useAtomValue(userAtom);
+  const [settings] = useSettings();
+  const videoRef = useRef<VideoRef | null>(null);
+
+  const firstTime = useRef(true);
+  const revalidateProgressCache = useInvalidatePlaybackProgressCache();
+
+  const [isPlaybackStopped, setIsPlaybackStopped] = useState(false);
+  const [showControls, _setShowControls] = useState(true);
+  const [ignoreSafeAreas, setIgnoreSafeAreas] = useState(false);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [isBuffering, setIsBuffering] = useState(true);
+
+  const setShowControls = useCallback((show: boolean) => {
+    _setShowControls(show);
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+  }, []);
+
+  const progress = useSharedValue(0);
+  const isSeeking = useSharedValue(false);
+  const cacheProgress = useSharedValue(0);
+
+  const {
+    itemId,
+    audioIndex: audioIndexStr,
+    subtitleIndex: subtitleIndexStr,
+    mediaSourceId,
+    bitrateValue: bitrateValueStr,
+  } = useLocalSearchParams<{
+    itemId: string;
+    audioIndex: string;
+    subtitleIndex: string;
+    mediaSourceId: string;
+    bitrateValue: string;
+  }>();
+
+  const audioIndex = audioIndexStr ? parseInt(audioIndexStr, 10) : undefined;
+  const subtitleIndex = subtitleIndexStr
+    ? parseInt(subtitleIndexStr, 10)
+    : undefined;
+  const bitrateValue = bitrateValueStr
+    ? parseInt(bitrateValueStr, 10)
+    : undefined;
+
+  const {
+    data: item,
+    isLoading: isLoadingItem,
+    isError: isErrorItem,
+  } = useQuery({
+    queryKey: ["item", itemId],
+    queryFn: async () => {
+      if (!api) {
+        throw new Error("No api");
+      }
+
+      if (!itemId) {
+        console.warn("No itemId");
+        return null;
+      }
+
+      const res = await getUserLibraryApi(api).getItem({
+        itemId,
+        userId: user?.Id,
+      });
+
+      return res.data;
+    },
+    staleTime: 0,
+  });
+
+  const {
+    data: stream,
+    isLoading: isLoadingStreamUrl,
+    isError: isErrorStreamUrl,
+  } = useQuery({
+    queryKey: [
+      "stream-url",
+      itemId,
+      audioIndex,
+      subtitleIndex,
+      bitrateValue,
+      mediaSourceId,
+    ],
+
+    queryFn: async () => {
+      if (!api) {
+        throw new Error("No api");
+      }
+
+      if (!item) {
+        console.warn("No item", itemId, item);
+        return null;
+      }
+
+      const res = await getStreamUrl({
+        api,
+        item,
+        startTimeTicks: item?.UserData?.PlaybackPositionTicks!,
+        userId: user?.Id,
+        audioStreamIndex: audioIndex,
+        maxStreamingBitrate: bitrateValue,
+        mediaSourceId: mediaSourceId,
+        subtitleStreamIndex: subtitleIndex,
+        deviceProfile: transcoding,
+      });
+
+      if (!res) return null;
+
+      const { mediaSource, sessionId, url } = res;
+
+      if (!sessionId || !mediaSource || !url) {
+        console.warn("No sessionId or mediaSource or url", url);
+        return null;
+      }
+
+      return {
+        mediaSource,
+        sessionId,
+        url,
+      };
+    },
+    enabled: !!item,
+    staleTime: 0,
+  });
+
+  const poster = usePoster(item, api);
+  const videoSource = useVideoSource(item, api, poster, stream?.url);
+
+  const togglePlay = useCallback(
+    async (ticks: number) => {
+      Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+      if (isPlaying) {
+        videoRef.current?.pause();
+        await getPlaystateApi(api!).onPlaybackProgress({
+          itemId: item?.Id!,
+          audioStreamIndex: audioIndex ? audioIndex : undefined,
+          subtitleStreamIndex: subtitleIndex ? subtitleIndex : undefined,
+          mediaSourceId: mediaSourceId,
+          positionTicks: Math.floor(ticks),
+          isPaused: true,
+          playMethod: stream?.url.includes("m3u8")
+            ? "Transcode"
+            : "DirectStream",
+          playSessionId: stream?.sessionId,
+        });
+      } else {
+        videoRef.current?.resume();
+        await getPlaystateApi(api!).onPlaybackProgress({
+          itemId: item?.Id!,
+          audioStreamIndex: audioIndex ? audioIndex : undefined,
+          subtitleStreamIndex: subtitleIndex ? subtitleIndex : undefined,
+          mediaSourceId: mediaSourceId,
+          positionTicks: Math.floor(ticks),
+          isPaused: false,
+          playMethod: stream?.url.includes("m3u8")
+            ? "Transcode"
+            : "DirectStream",
+          playSessionId: stream?.sessionId,
+        });
+      }
+    },
+    [
+      isPlaying,
+      api,
+      item,
+      videoRef,
+      settings,
+      stream,
+      audioIndex,
+      subtitleIndex,
+      mediaSourceId,
+    ]
+  );
+
+  const play = useCallback(() => {
+    videoRef.current?.resume();
+    reportPlaybackStart();
+  }, [videoRef]);
+
+  const pause = useCallback(() => {
+    videoRef.current?.pause();
+  }, [videoRef]);
+
+  const seek = useCallback(
+    (seconds: number) => {
+      videoRef.current?.seek(seconds);
+    },
+    [videoRef]
+  );
+
+  const reportPlaybackStopped = async () => {
+    if (!item?.Id) return;
+    await getPlaystateApi(api!).onPlaybackStopped({
+      itemId: item.Id,
+      mediaSourceId: mediaSourceId,
+      positionTicks: Math.floor(progress.value),
+      playSessionId: stream?.sessionId,
+    });
+    revalidateProgressCache();
+  };
+
+  const stop = useCallback(() => {
+    reportPlaybackStopped();
+    videoRef.current?.pause();
+    setIsPlaybackStopped(true);
+  }, [videoRef, reportPlaybackStopped]);
+
+  const reportPlaybackStart = async () => {
+    if (!item?.Id) return;
+    await getPlaystateApi(api!).onPlaybackStart({
+      itemId: item.Id,
+      audioStreamIndex: audioIndex ? audioIndex : undefined,
+      subtitleStreamIndex: subtitleIndex ? subtitleIndex : undefined,
+      mediaSourceId: mediaSourceId,
+      playMethod: stream?.url.includes("m3u8") ? "Transcode" : "DirectStream",
+      playSessionId: stream?.sessionId,
+    });
+  };
+
+  const onProgress = useCallback(
+    async (data: OnProgressData) => {
+      if (isSeeking.value === true) return;
+      if (isPlaybackStopped === true) return;
+
+      const ticks = secondsToTicks(data.currentTime);
+
+      progress.value = ticks;
+      cacheProgress.value = secondsToTicks(data.playableDuration);
+
+      // TODO: Use this when streaming with HLS url, but NOT when direct playing
+      // TODO: since playable duration is always 0 then.
+      setIsBuffering(data.playableDuration === 0);
+
+      if (!item?.Id || data.currentTime === 0) {
+        return;
+      }
+
+      await getPlaystateApi(api!).onPlaybackProgress({
+        itemId: item.Id,
+        audioStreamIndex: audioIndex ? audioIndex : undefined,
+        subtitleStreamIndex: subtitleIndex ? subtitleIndex : undefined,
+        mediaSourceId: mediaSourceId,
+        positionTicks: Math.round(ticks),
+        isPaused: !isPlaying,
+        playMethod: stream?.url.includes("m3u8") ? "Transcode" : "DirectStream",
+        playSessionId: stream?.sessionId,
+      });
+    },
+    [
+      item,
+      isPlaying,
+      api,
+      isPlaybackStopped,
+      isSeeking,
+      stream,
+      mediaSourceId,
+      audioIndex,
+      subtitleIndex,
+    ]
+  );
+
+  useOrientation();
+  useOrientationSettings();
+
+  useWebSocket({
+    isPlaying: isPlaying,
+    pauseVideo: pause,
+    playVideo: play,
+    stopPlayback: stop,
+  });
+
+  const [selectedTextTrack, setSelectedTextTrack] = useState<
+    SelectedTrack | undefined
+  >();
+
+  const [embededTextTracks, setEmbededTextTracks] = useState<
+    {
+      index: number;
+      language?: string | undefined;
+      selected?: boolean | undefined;
+      title?: string | undefined;
+      type: any;
+    }[]
+  >([]);
+
+  const [audioTracks, setAudioTracks] = useState<TrackInfo[]>([]);
+  const [selectedAudioTrack, setSelectedAudioTrack] = useState<
+    SelectedTrack | undefined
+  >(undefined);
+
+  // Set intial Subtitle Track.
+  // We will only select external tracks if they are are text based. Else it should be burned in already.
+  const textSubs =
+    stream?.mediaSource.MediaStreams?.filter(
+      (sub) => sub.Type === "Subtitle" && sub.IsTextSubtitleStream
+    ) || [];
+
+  const uniqueTextSubs = Array.from(
+    new Set(textSubs.map((sub) => sub.DisplayTitle))
+  ).map((title) => textSubs.find((sub) => sub.DisplayTitle === title));
+  const chosenSubtitleTrack = textSubs.find(
+    (sub) => sub.Index === subtitleIndex
+  );
+  useEffect(() => {
+    if (chosenSubtitleTrack && selectedTextTrack === undefined) {
+      console.log("Setting selected text track", chosenSubtitleTrack);
+      setSelectedTextTrack({
+        type: SelectedTrackType.INDEX,
+        value: uniqueTextSubs.indexOf(chosenSubtitleTrack),
+      });
+    }
+  }, [embededTextTracks]);
+
+  const getAudioTracks = (): TrackInfo[] => {
+    return audioTracks.map((t) => ({
+      name: t.name,
+      index: t.index,
+    }));
+  };
+
+  const getSubtitleTracks = (): TrackInfo[] => {
+    return embededTextTracks.map((t) => ({
+      name: t.title ?? "",
+      index: t.index,
+      language: t.language,
+    }));
+  };
+
+  const backAction = () => {
+    videoRef.current?.pause();
+    return false;
+  };
+
+  useFocusEffect(
+    React.useCallback(() => {
+      const onBackPress = () => {
+        return backAction();
+      };
+
+      BackHandler.addEventListener("hardwareBackPress", onBackPress);
+      play();
+
+      return async () => {
+        videoRef.current?.pause();
+        BackHandler.removeEventListener("hardwareBackPress", onBackPress);
+      };
+    }, [])
+  );
+
+  if (isLoadingItem || isLoadingStreamUrl)
+    return (
+      <View className="w-screen h-screen flex flex-col items-center justify-center bg-black">
+        <Loader />
+      </View>
+    );
+
+  if (isErrorItem || isErrorStreamUrl)
+    return (
+      <View className="w-screen h-screen flex flex-col items-center justify-center bg-black">
+        <Text className="text-white">Error</Text>
+      </View>
+    );
+
+  return (
+    <View style={{ flex: 1, backgroundColor: "black" }}>
+      <View
+        style={{
+          display: "flex",
+          width: "100%",
+          height: "100%",
+          position: "relative",
+          flexDirection: "column",
+          justifyContent: "center",
+          opacity: showControls ? 0.5 : 1,
+        }}
+      >
+        {videoSource ? (
+          <>
+            <Video
+              ref={videoRef}
+              source={videoSource}
+              style={{
+                height: "100%",
+                width: "100%",
+              }}
+              resizeMode={ignoreSafeAreas ? "cover" : "contain"}
+              onProgress={onProgress}
+              onError={(e) => {
+                console.error("Error playing video", e);
+              }}
+              onLoad={() => {
+                if (firstTime.current === true) {
+                  play();
+                  firstTime.current = false;
+                }
+              }}
+              progressUpdateInterval={500}
+              playWhenInactive={true}
+              allowsExternalPlayback={true}
+              playInBackground={true}
+              pictureInPicture={true}
+              showNotificationControls={true}
+              ignoreSilentSwitch="ignore"
+              fullscreen={false}
+              onPlaybackStateChanged={(state) => {
+                if (isSeeking.value === false) setIsPlaying(state.isPlaying);
+              }}
+              onTextTracks={(data) => {
+                setEmbededTextTracks(data.textTracks as any);
+              }}
+              onBuffer={(e) => {
+                setIsBuffering(e.isBuffering);
+              }}
+              onAudioTracks={(e) => {
+                console.log("onAudioTracks: ", e.audioTracks);
+                setAudioTracks(
+                  e.audioTracks.map((t) => ({
+                    index: t.index,
+                    name: t.title ?? "",
+                    language: t.language,
+                  }))
+                );
+              }}
+              selectedTextTrack={selectedTextTrack}
+              selectedAudioTrack={selectedAudioTrack}
+            />
+            <View
+              style={{
+                position: "absolute",
+                flexDirection: "column",
+                justifyContent: "center",
+                alignItems: "center",
+                opacity: isBuffering ? 1 : 0,
+                width: "100%",
+                height: "100%",
+              }}
+              pointerEvents="none"
+            >
+              <Loader />
+            </View>
+          </>
+        ) : (
+          <Text>No video source...</Text>
+        )}
+      </View>
+
+      {item && (
+        <Controls
+          mediaSource={stream?.mediaSource}
+          videoRef={videoRef}
+          enableTrickplay={true}
+          item={item}
+          togglePlay={togglePlay}
+          isPlaying={isPlaying}
+          isSeeking={isSeeking}
+          progress={progress}
+          cacheProgress={cacheProgress}
+          isBuffering={isBuffering}
+          showControls={showControls}
+          setShowControls={setShowControls}
+          setIgnoreSafeAreas={setIgnoreSafeAreas}
+          ignoreSafeAreas={ignoreSafeAreas}
+          seek={seek}
+          play={play}
+          pause={pause}
+          stop={stop}
+          getSubtitleTracks={getSubtitleTracks}
+          setSubtitleTrack={(i) => {
+            if (i === -1) {
+              setSelectedTextTrack({
+                type: SelectedTrackType.DISABLED,
+                value: undefined,
+              });
+              return;
+            }
+            setSelectedTextTrack({
+              type: SelectedTrackType.INDEX,
+              value: i,
+            });
+          }}
+          getAudioTracks={getAudioTracks}
+          setAudioTrack={(i) => {
+            console.log("setAudioTrack ~", i);
+            setSelectedAudioTrack({
+              type: SelectedTrackType.INDEX,
+              value: i,
+            });
+          }}
+        />
+      )}
+    </View>
+  );
+};
+
+export function usePoster(
+  item: BaseItemDto | null | undefined,
+  api: Api | null
+): string | undefined {
+  const poster = useMemo(() => {
+    if (!item || !api) return undefined;
+    return item.Type === "Audio"
+      ? `${api.basePath}/Items/${item.AlbumId}/Images/Primary?tag=${item.AlbumPrimaryImageTag}&quality=90&maxHeight=200&maxWidth=200`
+      : getBackdropUrl({
+          api,
+          item: item,
+          quality: 70,
+          width: 200,
+        });
+  }, [item, api]);
+
+  return poster ?? undefined;
+}
+
+export function useVideoSource(
+  item: BaseItemDto | null | undefined,
+  api: Api | null,
+  poster: string | undefined,
+  url?: string | null
+) {
+  const videoSource = useMemo(() => {
+    if (!item || !api || !url) {
+      return null;
+    }
+
+    const startPosition = item?.UserData?.PlaybackPositionTicks
+      ? Math.round(item.UserData.PlaybackPositionTicks / 10000)
+      : 0;
+
+    return {
+      uri: url,
+      isNetwork: true,
+      startPosition,
+      headers: getAuthHeaders(api),
+      metadata: {
+        artist: item?.AlbumArtist ?? undefined,
+        title: item?.Name || "Unknown",
+        description: item?.Overview ?? undefined,
+        imageUri: poster,
+        subtitle: item?.Album ?? undefined,
+      },
+    };
+  }, [item, api, poster, url]);
+
+  return videoSource;
+}
+
+export default Player;

app/_layout.tsx

@@ -1,7 +1,7 @@
 import { DownloadProvider } from "@/providers/DownloadProvider";
 import {
   getOrSetDeviceId,
-  getTokenFromStoraage,
+  getTokenFromStorage,
   JellyfinProvider,
 } from "@/providers/JellyfinProvider";
 import { JobQueueProvider } from "@/providers/JobQueueProvider";
@@ -10,6 +10,7 @@ import { orientationAtom } from "@/utils/atoms/orientation";
 import { Settings, useSettings } from "@/utils/atoms/settings";
 import { BACKGROUND_FETCH_TASK } from "@/utils/background-tasks";
 import { writeToLog } from "@/utils/log";
+import { storage } from "@/utils/mmkv";
 import { cancelJobById, getAllJobsByDeviceId } from "@/utils/optimize-server";
 import { ActionSheetProvider } from "@expo/react-native-action-sheet";
 import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
@@ -19,7 +20,6 @@ import {
   completeHandler,
   download,
 } from "@kesha-antonov/react-native-background-downloader";
-import AsyncStorage from "@react-native-async-storage/async-storage";
 import { DarkTheme, ThemeProvider } from "@react-navigation/native";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import * as BackgroundFetch from "expo-background-fetch";
@@ -34,11 +34,11 @@ import * as SplashScreen from "expo-splash-screen";
 import * as TaskManager from "expo-task-manager";
 import { Provider as JotaiProvider, useAtom } from "jotai";
 import { useEffect, useRef } from "react";
-import { AppState } from "react-native";
+import { Appearance, AppState } from "react-native";
+import { SystemBars } from "react-native-edge-to-edge";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import "react-native-reanimated";
 import { Toaster } from "sonner-native";
-import { SystemBars } from "react-native-edge-to-edge";
 
 SplashScreen.preventAutoHideAsync();
 
@@ -86,7 +86,7 @@ TaskManager.defineTask(BACKGROUND_FETCH_TASK, async () => {
 
   const now = Date.now();
 
-  const settingsData = await AsyncStorage.getItem("settings");
+  const settingsData = storage.getString("settings");
 
   if (!settingsData) return BackgroundFetch.BackgroundFetchResult.NoData;
 
@@ -96,19 +96,13 @@ TaskManager.defineTask(BACKGROUND_FETCH_TASK, async () => {
   if (!settings?.autoDownload || !url)
     return BackgroundFetch.BackgroundFetchResult.NoData;
 
-  const token = await getTokenFromStoraage();
-  const deviceId = await getOrSetDeviceId();
+  const token = getTokenFromStorage();
+  const deviceId = getOrSetDeviceId();
   const baseDirectory = FileSystem.documentDirectory;
 
   if (!token || !deviceId || !baseDirectory)
     return BackgroundFetch.BackgroundFetchResult.NoData;
 
-  console.log({
-    token,
-    url,
-    deviceId,
-  });
-
   const jobs = await getAllJobsByDeviceId({
     deviceId,
     authHeader: token,
@@ -120,14 +114,6 @@ TaskManager.defineTask(BACKGROUND_FETCH_TASK, async () => {
   for (let job of jobs) {
     if (job.status === "completed") {
       const downloadUrl = url + "download/" + job.id;
-      console.log({
-        token,
-        deviceId,
-        baseDirectory,
-        url,
-        downloadUrl,
-      });
-
       const tasks = await checkForExistingDownloads();
 
       if (tasks.find((task) => task.id === job.id)) {
@@ -137,7 +123,7 @@ TaskManager.defineTask(BACKGROUND_FETCH_TASK, async () => {
 
       download({
         id: job.id,
-        url: url + "download/" + job.id,
+        url: downloadUrl,
         destination: `${baseDirectory}${job.item.Id}.mp4`,
         headers: {
           Authorization: token,
@@ -191,7 +177,7 @@ TaskManager.defineTask(BACKGROUND_FETCH_TASK, async () => {
 
 const checkAndRequestPermissions = async () => {
   try {
-    const hasAskedBefore = await AsyncStorage.getItem(
+    const hasAskedBefore = storage.getString(
       "hasAskedForNotificationPermission"
     );
 
@@ -206,7 +192,7 @@ const checkAndRequestPermissions = async () => {
         console.log("Notification permissions denied.");
       }
 
-      await AsyncStorage.setItem("hasAskedForNotificationPermission", "true");
+      storage.set("hasAskedForNotificationPermission", "true");
     } else {
       console.log("Already asked for notification permissions before.");
     }
@@ -231,6 +217,8 @@ export default function RootLayout() {
     }
   }, [loaded]);
 
+  Appearance.setColorScheme("dark");
+
   if (!loaded) {
     return null;
   }
@@ -242,6 +230,18 @@ export default function RootLayout() {
   );
 }
 
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 0,
+      refetchOnMount: true,
+      refetchOnReconnect: true,
+      refetchOnWindowFocus: true,
+      retryOnMount: true,
+    },
+  },
+});
+
 function Layout() {
   const [settings, updateSettings] = useSettings();
   const [orientation, setOrientation] = useAtom(orientationAtom);
@@ -249,20 +249,6 @@ function Layout() {
   useKeepAwake();
   useNotificationObserver();
 
-  const queryClientRef = useRef<QueryClient>(
-    new QueryClient({
-      defaultOptions: {
-        queries: {
-          staleTime: 0,
-          refetchOnMount: true,
-          refetchOnReconnect: true,
-          refetchOnWindowFocus: true,
-          retryOnMount: true,
-        },
-      },
-    })
-  );
-
   useEffect(() => {
     checkAndRequestPermissions();
   }, []);
@@ -319,7 +305,7 @@ function Layout() {
 
   return (
     <GestureHandlerRootView style={{ flex: 1 }}>
-      <QueryClientProvider client={queryClientRef.current}>
+      <QueryClientProvider client={queryClient}>
         <ActionSheetProvider>
           <JobQueueProvider>
             <JellyfinProvider>
@@ -338,30 +324,11 @@ function Layout() {
                           }}
                         />
                         <Stack.Screen
-                          name="(auth)/play-video"
+                          name="(auth)/player"
                           options={{
                             headerShown: false,
-                            autoHideHomeIndicator: true,
                             title: "",
-                            animation: "fade",
-                          }}
-                        />
-                        <Stack.Screen
-                          name="(auth)/play-offline-video"
-                          options={{
-                            headerShown: false,
-                            autoHideHomeIndicator: true,
-                            title: "",
-                            animation: "fade",
-                          }}
-                        />
-                        <Stack.Screen
-                          name="(auth)/play-music"
-                          options={{
-                            headerShown: false,
-                            autoHideHomeIndicator: true,
-                            title: "",
-                            animation: "fade",
+                            header: () => null,
                           }}
                         />
                         <Stack.Screen
@@ -396,9 +363,9 @@ function Layout() {
   );
 }
 
-async function saveDownloadedItemInfo(item: BaseItemDto) {
+function saveDownloadedItemInfo(item: BaseItemDto) {
   try {
-    const downloadedItems = await AsyncStorage.getItem("downloadedItems");
+    const downloadedItems = storage.getString("downloadedItems");
     let items: BaseItemDto[] = downloadedItems
       ? JSON.parse(downloadedItems)
       : [];
@@ -410,7 +377,7 @@ async function saveDownloadedItemInfo(item: BaseItemDto) {
       items.push(item);
     }
 
-    await AsyncStorage.setItem("downloadedItems", JSON.stringify(items));
+    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);

app/login.tsx

@@ -128,9 +128,9 @@ const Login: React.FC = () => {
         } catch (e) {
           const error = e as Error;
           if (error.name === "AbortError") {
-            console.log(`Request to ${protocol}${url} timed out`);
+            console.error(`Request to ${protocol}${url} timed out`);
           } else {
-            console.log(`Error checking ${protocol}${url}:`, error);
+            console.error(`Error checking ${protocol}${url}:`, error);
           }
         }
       }
@@ -286,7 +286,7 @@ const Login: React.FC = () => {
     <SafeAreaView style={{ flex: 1 }}>
       <KeyboardAvoidingView
         behavior={Platform.OS === "ios" ? "padding" : "height"}
-        style={{ flex: 1 }}
+        style={{ flex: 1, height: "100%" }}
       >
         <View className="flex flex-col h-full relative items-center justify-center w-full">
           <View className="flex flex-col gap-y-2 px-4 w-full -mt-36">

components/AudioTrackSelector.tsx

@@ -5,9 +5,9 @@ import * as DropdownMenu from "zeego/dropdown-menu";
 import { Text } from "./common/Text";
 
 interface Props extends React.ComponentProps<typeof View> {
-  source: MediaSourceInfo;
+  source?: MediaSourceInfo;
   onChange: (value: number) => void;
-  selected?: number | null;
+  selected?: number | undefined;
 }
 
 export const AudioTrackSelector: React.FC<Props> = ({
@@ -17,7 +17,7 @@ export const AudioTrackSelector: React.FC<Props> = ({
   ...props
 }) => {
   const audioStreams = useMemo(
-    () => source.MediaStreams?.filter((x) => x.Type === "Audio"),
+    () => source?.MediaStreams?.filter((x) => x.Type === "Audio"),
     [source]
   );
 

components/BitrateSelector.tsx

@@ -6,7 +6,6 @@ import { useMemo } from "react";
 export type Bitrate = {
   key: string;
   value: number | undefined;
-  height?: number;
 };
 
 export const BITRATES: Bitrate[] = [
@@ -27,17 +26,14 @@ export const BITRATES: Bitrate[] = [
   {
     key: "2 Mb/s",
     value: 2000000,
-    height: 720,
   },
   {
     key: "500 Kb/s",
     value: 500000,
-    height: 480,
   },
   {
     key: "250 Kb/s",
     value: 250000,
-    height: 480,
   },
 ].sort((a, b) => (b.value || Infinity) - (a.value || Infinity));
 

components/DownloadItem.tsx

@@ -3,9 +3,11 @@ import { useDownload } from "@/providers/DownloadProvider";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { queueActions, queueAtom } from "@/utils/atoms/queue";
 import { useSettings } from "@/utils/atoms/settings";
-import ios from "@/utils/profiles/ios";
+import { getDefaultPlaySettings } from "@/utils/jellyfin/getDefaultPlaySettings";
+import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
+import { saveDownloadItemInfoToDiskTmp } from "@/utils/optimize-server";
 import native from "@/utils/profiles/native";
-import old from "@/utils/profiles/old";
+import download from "@/utils/profiles/download";
 import Ionicons from "@expo/vector-icons/Ionicons";
 import {
   BottomSheetBackdrop,
@@ -21,17 +23,15 @@ import { router, useFocusEffect } from "expo-router";
 import { useAtom } from "jotai";
 import { useCallback, useMemo, useRef, useState } from "react";
 import { Alert, TouchableOpacity, View, ViewProps } from "react-native";
+import { toast } from "sonner-native";
 import { AudioTrackSelector } from "./AudioTrackSelector";
-import { Bitrate, BITRATES, BitrateSelector } from "./BitrateSelector";
+import { Bitrate, BitrateSelector } from "./BitrateSelector";
 import { Button } from "./Button";
 import { Text } from "./common/Text";
 import { Loader } from "./Loader";
 import { MediaSourceSelector } from "./MediaSourceSelector";
 import ProgressCircle from "./ProgressCircle";
 import { SubtitleTrackSelector } from "./SubtitleTrackSelector";
-import { toast } from "sonner-native";
-import iosFmp4 from "@/utils/profiles/iosFmp4";
-import { getDefaultPlaySettings } from "@/utils/jellyfin/getDefaultPlaySettings";
 
 interface DownloadProps extends ViewProps {
   item: BaseItemDto;
@@ -43,10 +43,10 @@ export const DownloadItem: React.FC<DownloadProps> = ({ item, ...props }) => {
   const [queue, setQueue] = useAtom(queueAtom);
   const [settings] = useSettings();
   const { processes, startBackgroundDownload } = useDownload();
-  const { startRemuxing } = useRemuxHlsToMp4(item);
+  const { startRemuxing } = useRemuxHlsToMp4();
 
   const [selectedMediaSource, setSelectedMediaSource] = useState<
-    MediaSourceInfo | undefined
+    MediaSourceInfo | undefined | null
   >(undefined);
   const [selectedAudioStream, setSelectedAudioStream] = useState<number>(-1);
   const [selectedSubtitleStream, setSelectedSubtitleStream] =
@@ -99,81 +99,36 @@ export const DownloadItem: React.FC<DownloadProps> = ({ item, ...props }) => {
       );
     }
 
-    let deviceProfile: any = iosFmp4;
+    const res = await getStreamUrl({
+      api,
+      item,
+      startTimeTicks: 0,
+      userId: user?.Id,
+      audioStreamIndex: selectedAudioStream,
+      maxStreamingBitrate: maxBitrate.value,
+      mediaSourceId: selectedMediaSource.Id,
+      subtitleStreamIndex: selectedSubtitleStream,
+      deviceProfile: download,
+    });
 
-    if (settings?.deviceProfile === "Native") {
-      deviceProfile = native;
-    } else if (settings?.deviceProfile === "Old") {
-      deviceProfile = old;
+    if (!res) {
+      Alert.alert(
+        "Something went wrong",
+        "Could not get stream url from Jellyfin"
+      );
+      return;
     }
 
-    const response = await api.axiosInstance.post(
-      `${api.basePath}/Items/${item.Id}/PlaybackInfo`,
-      {
-        DeviceProfile: deviceProfile,
-        UserId: user.Id,
-        MaxStreamingBitrate: maxBitrate.value,
-        StartTimeTicks: 0,
-        EnableTranscoding: maxBitrate.value ? true : undefined,
-        AutoOpenLiveStream: true,
-        AllowVideoStreamCopy: maxBitrate.value ? false : true,
-        MediaSourceId: selectedMediaSource?.Id,
-        AudioStreamIndex: selectedAudioStream,
-        SubtitleStreamIndex: selectedSubtitleStream,
-      },
-      {
-        headers: {
-          Authorization: `MediaBrowser DeviceId="${api.deviceInfo.id}", Token="${api.accessToken}"`,
-        },
-      }
-    );
+    const { mediaSource, url } = res;
 
-    let url: string | undefined = undefined;
-    let fileExtension: string | undefined | null = "mp4";
+    if (!url || !mediaSource) throw new Error("No url");
 
-    const mediaSource: MediaSourceInfo = response.data.MediaSources.find(
-      (source: MediaSourceInfo) => source.Id === selectedMediaSource?.Id
-    );
-
-    if (!mediaSource) {
-      throw new Error("No media source");
-    }
-
-    if (mediaSource.SupportsDirectPlay) {
-      if (item.MediaType === "Video") {
-        url = `${api.basePath}/Videos/${item.Id}/stream.mp4?mediaSourceId=${item.Id}&static=true&mediaSourceId=${mediaSource.Id}&deviceId=${api.deviceInfo.id}&api_key=${api.accessToken}`;
-      } else if (item.MediaType === "Audio") {
-        console.log("Using direct stream for audio!");
-        const searchParams = new URLSearchParams({
-          UserId: user.Id,
-          DeviceId: api.deviceInfo.id,
-          MaxStreamingBitrate: "140000000",
-          Container:
-            "opus,webm|opus,mp3,aac,m4a|aac,m4b|aac,flac,webma,webm|webma,wav,ogg",
-          TranscodingContainer: "mp4",
-          TranscodingProtocol: "hls",
-          AudioCodec: "aac",
-          api_key: api.accessToken,
-          StartTimeTicks: "0",
-          EnableRedirection: "true",
-          EnableRemoteMedia: "false",
-        });
-        url = `${api.basePath}/Audio/${
-          item.Id
-        }/universal?${searchParams.toString()}`;
-      }
-    } else if (mediaSource.TranscodingUrl) {
-      url = `${api.basePath}${mediaSource.TranscodingUrl}`;
-      fileExtension = mediaSource.TranscodingContainer;
-    }
-
-    if (!url) throw new Error("No url");
-    if (!fileExtension) throw new Error("No file extension");
+    saveDownloadItemInfoToDiskTmp(item, mediaSource, url);
 
     if (settings?.downloadMethod === "optimized") {
-      return await startBackgroundDownload(url, item, fileExtension);
+      return await startBackgroundDownload(url, item, mediaSource);
     } else {
-      return await startRemuxing(url);
+      return await startRemuxing(item, url, mediaSource);
     }
   }, [
     api,
@@ -195,7 +150,7 @@ export const DownloadItem: React.FC<DownloadProps> = ({ item, ...props }) => {
   const isDownloaded = useMemo(() => {
     if (!downloadedFiles) return false;
 
-    return downloadedFiles.some((file) => file.Id === item.Id);
+    return downloadedFiles.some((file) => file.item.Id === item.Id);
   }, [downloadedFiles, item.Id]);
 
   const renderBackdrop = useCallback(

components/GenreTags.tsx

@@ -12,11 +12,8 @@ export const GenreTags: React.FC<GenreTagsProps> = ({ genres }) => {
 
   return (
     <View className="flex flex-row flex-wrap mt-2">
-      {genres.map((genre) => (
-        <View
-          key={genre}
-          className="bg-neutral-800 rounded-full px-2 py-1 mr-1"
-        >
+      {genres.map((genre, idx) => (
+        <View key={idx} className="bg-neutral-800 rounded-full px-2 py-1 mr-1">
           <Text className="text-xs">{genre}</Text>
         </View>
       ))}

components/ItemContent.tsx

@@ -11,126 +11,73 @@ import { ItemImage } from "@/components/common/ItemImage";
 import { CastAndCrew } from "@/components/series/CastAndCrew";
 import { CurrentSeries } from "@/components/series/CurrentSeries";
 import { SeasonEpisodesCarousel } from "@/components/series/SeasonEpisodesCarousel";
+import useDefaultPlaySettings from "@/hooks/useDefaultPlaySettings";
 import { useImageColors } from "@/hooks/useImageColors";
+import { useOrientation } from "@/hooks/useOrientation";
 import { apiAtom } from "@/providers/JellyfinProvider";
-import { usePlaySettings } from "@/providers/PlaySettingsProvider";
 import { useSettings } from "@/utils/atoms/settings";
-import { getDefaultPlaySettings } from "@/utils/jellyfin/getDefaultPlaySettings";
 import { getLogoImageUrlById } from "@/utils/jellyfin/image/getLogoImageUrlById";
 import {
   BaseItemDto,
   MediaSourceInfo,
 } from "@jellyfin/sdk/lib/generated-client/models";
 import { Image } from "expo-image";
-import { useFocusEffect, useNavigation } from "expo-router";
+import { useNavigation } from "expo-router";
 import * as ScreenOrientation from "expo-screen-orientation";
 import { useAtom } from "jotai";
-import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { Alert, View } from "react-native";
+import React, { useEffect, useMemo, useState } from "react";
+import { View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Chromecast } from "./Chromecast";
 import { ItemHeader } from "./ItemHeader";
 import { MediaSourceSelector } from "./MediaSourceSelector";
 import { MoreMoviesWithActor } from "./MoreMoviesWithActor";
 
+export type SelectedOptions = {
+  bitrate: Bitrate;
+  mediaSource: MediaSourceInfo | undefined;
+  audioIndex: number | undefined;
+  subtitleIndex: number;
+};
+
 export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
   ({ item }) => {
     const [api] = useAtom(apiAtom);
-    const { setPlaySettings, playUrl, playSettings } = usePlaySettings();
     const [settings] = useSettings();
+    const { orientation } = useOrientation();
     const navigation = useNavigation();
+    const insets = useSafeAreaInsets();
+    useImageColors({ item });
 
     const [loadingLogo, setLoadingLogo] = useState(true);
-
-    const [orientation, setOrientation] = useState(
-      ScreenOrientation.Orientation.PORTRAIT_UP
-    );
-
-    useFocusEffect(
-      useCallback(() => {
-        if (!settings) return;
-        const { bitrate, mediaSource, audioIndex, subtitleIndex } =
-          getDefaultPlaySettings(item, settings);
-
-        setPlaySettings({
-          item,
-          bitrate,
-          mediaSource,
-          audioIndex,
-          subtitleIndex,
-        });
-
-        if (!mediaSource) {
-          Alert.alert("Error", "No media source found for this item.");
-          navigation.goBack();
-        }
-      }, [item, settings])
-    );
-
-    const selectedMediaSource = useMemo(() => {
-      return playSettings?.mediaSource || undefined;
-    }, [playSettings?.mediaSource]);
-
-    const setSelectedMediaSource = (mediaSource: MediaSourceInfo) => {
-      setPlaySettings((prev) => ({
-        ...prev,
-        mediaSource,
-      }));
-    };
-
-    const selectedAudioStream = useMemo(() => {
-      return playSettings?.audioIndex;
-    }, [playSettings?.audioIndex]);
-
-    const setSelectedAudioStream = (audioIndex: number) => {
-      setPlaySettings((prev) => ({
-        ...prev,
-        audioIndex,
-      }));
-    };
-
-    const selectedSubtitleStream = useMemo(() => {
-      return playSettings?.subtitleIndex;
-    }, [playSettings?.subtitleIndex]);
-
-    const setSelectedSubtitleStream = (subtitleIndex: number) => {
-      setPlaySettings((prev) => ({
-        ...prev,
-        subtitleIndex,
-      }));
-    };
-
-    const maxBitrate = useMemo(() => {
-      return playSettings?.bitrate;
-    }, [playSettings?.bitrate]);
-
-    const setMaxBitrate = (bitrate: Bitrate | undefined) => {
-      console.log("setMaxBitrate", bitrate);
-      setPlaySettings((prev) => ({
-        ...prev,
-        bitrate,
-      }));
-    };
-
-    useEffect(() => {
-      const subscription = ScreenOrientation.addOrientationChangeListener(
-        (event) => {
-          setOrientation(event.orientationInfo.orientation);
-        }
-      );
-
-      ScreenOrientation.getOrientationAsync().then((initialOrientation) => {
-        setOrientation(initialOrientation);
-      });
-
-      return () => {
-        ScreenOrientation.removeOrientationChangeListener(subscription);
-      };
-    }, []);
-
     const [headerHeight, setHeaderHeight] = useState(350);
 
-    useImageColors({ item });
+    const [selectedOptions, setSelectedOptions] = useState<
+      SelectedOptions | undefined
+    >(undefined);
+
+    const {
+      defaultAudioIndex,
+      defaultBitrate,
+      defaultMediaSource,
+      defaultSubtitleIndex,
+    } = useDefaultPlaySettings(item, settings);
+
+    // Needs to automatically change the selected to the default values for default indexes.
+    useEffect(() => {
+      console.log(defaultAudioIndex, defaultSubtitleIndex);
+      setSelectedOptions(() => ({
+        bitrate: defaultBitrate,
+        mediaSource: defaultMediaSource,
+        subtitleIndex: defaultSubtitleIndex ?? -1,
+        audioIndex: defaultAudioIndex,
+      }));
+    }, [
+      defaultAudioIndex,
+      defaultBitrate,
+      defaultSubtitleIndex,
+      defaultMediaSource,
+    ]);
 
     useEffect(() => {
       navigation.setOptions({
@@ -150,13 +97,9 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
     }, [item]);
 
     useEffect(() => {
-      // If landscape
-      if (orientation !== ScreenOrientation.Orientation.PORTRAIT_UP) {
+      if (orientation !== ScreenOrientation.OrientationLock.PORTRAIT_UP)
         setHeaderHeight(230);
-        return;
-      }
-
-      if (item.Type === "Movie") setHeaderHeight(500);
+      else if (item.Type === "Movie") setHeaderHeight(500);
       else setHeaderHeight(350);
     }, [item.Type, orientation]);
 
@@ -166,7 +109,7 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
       return Boolean(logoUrl && loadingLogo);
     }, [loadingLogo, logoUrl]);
 
-    const insets = useSafeAreaInsets();
+    if (!selectedOptions) return null;
 
     return (
       <View
@@ -219,34 +162,63 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
                 <View className="flex flex-row items-center justify-start w-full h-16">
                   <BitrateSelector
                     className="mr-1"
-                    onChange={(val) => setMaxBitrate(val)}
-                    selected={maxBitrate}
+                    onChange={(val) =>
+                      setSelectedOptions(
+                        (prev) => prev && { ...prev, bitrate: val }
+                      )
+                    }
+                    selected={selectedOptions.bitrate}
                   />
                   <MediaSourceSelector
                     className="mr-1"
                     item={item}
-                    onChange={setSelectedMediaSource}
-                    selected={selectedMediaSource}
+                    onChange={(val) =>
+                      setSelectedOptions(
+                        (prev) =>
+                          prev && {
+                            ...prev,
+                            mediaSource: val,
+                          }
+                      )
+                    }
+                    selected={selectedOptions.mediaSource}
+                  />
+                  <AudioTrackSelector
+                    className="mr-1"
+                    source={selectedOptions.mediaSource}
+                    onChange={(val) => {
+                      console.log(val);
+                      setSelectedOptions(
+                        (prev) =>
+                          prev && {
+                            ...prev,
+                            audioIndex: val,
+                          }
+                      );
+                    }}
+                    selected={selectedOptions.audioIndex}
+                  />
+                  <SubtitleTrackSelector
+                    source={selectedOptions.mediaSource}
+                    onChange={(val) =>
+                      setSelectedOptions(
+                        (prev) =>
+                          prev && {
+                            ...prev,
+                            subtitleIndex: val,
+                          }
+                      )
+                    }
+                    selected={selectedOptions.subtitleIndex}
                   />
-                  {selectedMediaSource && (
-                    <>
-                      <AudioTrackSelector
-                        className="mr-1"
-                        source={selectedMediaSource}
-                        onChange={setSelectedAudioStream}
-                        selected={selectedAudioStream}
-                      />
-                      <SubtitleTrackSelector
-                        source={selectedMediaSource}
-                        onChange={setSelectedSubtitleStream}
-                        selected={selectedSubtitleStream}
-                      />
-                    </>
-                  )}
                 </View>
               )}
 
-              <PlayButton className="grow" />
+              <PlayButton
+                className="grow"
+                selectedOptions={selectedOptions}
+                item={item}
+              />
             </View>
 
             {item.Type === "Episode" && (
@@ -260,10 +232,10 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
 
                 {item.People && item.People.length > 0 && (
                   <View className="mb-4">
-                    {item.People.slice(0, 3).map((person) => (
+                    {item.People.slice(0, 3).map((person, idx) => (
                       <MoreMoviesWithActor
                         currentItem={item}
-                        key={person.Id}
+                        key={idx}
                         actorId={person.Id!}
                         className="mb-4"
                       />

components/MediaSourceSelector.tsx

@@ -26,23 +26,9 @@ export const MediaSourceSelector: React.FC<Props> = ({
       item.MediaSources?.find((x) => x.Id === selected?.Id)?.MediaStreams?.find(
         (x) => x.Type === "Video"
       )?.DisplayTitle || "",
-    [item.MediaSources, selected]
+    [item, selected]
   );
 
-  useEffect(() => {
-    if (!selected && item.MediaSources && item.MediaSources.length > 0) {
-      onChange(item.MediaSources[0]);
-    }
-  }, [item.MediaSources, selected]);
-
-  const name = (name?: string | null) => {
-    if (name && name.length > 40)
-      return (
-        name.substring(0, 20) + " [...] " + name.substring(name.length - 20)
-      );
-    return name;
-  };
-
   return (
     <View
       className="flex shrink"
@@ -88,3 +74,9 @@ export const MediaSourceSelector: React.FC<Props> = ({
     </View>
   );
 };
+
+const name = (name?: string | null) => {
+  if (name && name.length > 40)
+    return name.substring(0, 20) + " [...] " + name.substring(name.length - 20);
+  return name;
+};

components/PlayButton.tsx

@@ -1,14 +1,18 @@
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { itemThemeColorAtom } from "@/utils/atoms/primaryColor";
+import { useSettings } from "@/utils/atoms/settings";
 import { getParentBackdropImageUrl } from "@/utils/jellyfin/image/getParentBackdropImageUrl";
 import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
+import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
+import ios from "@/utils/profiles/ios";
 import { runtimeTicksToMinutes } from "@/utils/time";
 import { useActionSheet } from "@expo/react-native-action-sheet";
 import { Feather, Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+import { useRouter } from "expo-router";
 import { useAtom, useAtomValue } from "jotai";
-import { useCallback, useEffect, useMemo } from "react";
-import { Alert, Linking, TouchableOpacity, View } from "react-native";
+import { useCallback, useEffect } from "react";
+import { Alert, TouchableOpacity, View } from "react-native";
 import CastContext, {
   CastButton,
   PlayServicesState,
@@ -26,20 +30,21 @@ import Animated, {
   withTiming,
 } from "react-native-reanimated";
 import { Button } from "./Button";
-import { Text } from "./common/Text";
-import { useRouter } from "expo-router";
-import { useSettings } from "@/utils/atoms/settings";
-import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
-import { chromecastProfile } from "@/utils/profiles/chromecast";
-import { usePlaySettings } from "@/providers/PlaySettingsProvider";
+import { SelectedOptions } from "./ItemContent";
 
-interface Props extends React.ComponentProps<typeof Button> {}
+interface Props extends React.ComponentProps<typeof Button> {
+  item: BaseItemDto;
+  selectedOptions: SelectedOptions;
+}
 
 const ANIMATION_DURATION = 500;
 const MIN_PLAYBACK_WIDTH = 15;
 
-export const PlayButton: React.FC<Props> = ({ ...props }) => {
-  const { playSettings, playUrl: url } = usePlaySettings();
+export const PlayButton: React.FC<Props> = ({
+  item,
+  selectedOptions,
+  ...props
+}: Props) => {
   const { showActionSheetWithOptions } = useActionSheet();
   const client = useRemoteMediaClient();
   const mediaStatus = useMediaStatus();
@@ -58,32 +63,32 @@ export const PlayButton: React.FC<Props> = ({ ...props }) => {
   const colorChangeProgress = useSharedValue(0);
   const [settings] = useSettings();
 
-  const directStream = useMemo(() => {
-    return !url?.includes("m3u8");
-  }, [url]);
-
-  const item = useMemo(() => {
-    return playSettings?.item;
-  }, [playSettings?.item]);
-
-  const onPress = useCallback(async () => {
-    if (!url || !item) {
-      console.warn(
-        "No URL or item provided to PlayButton",
-        url?.slice(0, 100),
-        item?.Id
-      );
-      return;
-    }
-
-    if (!client) {
-      const vlcLink = "vlc://" + url;
-      if (vlcLink && settings?.openInVLC) {
-        Linking.openURL(vlcLink);
+  const goToPlayer = useCallback(
+    (q: string, bitrateValue: number | undefined) => {
+      if (!bitrateValue) {
+        router.push(`/player/direct-player?${q}`);
         return;
       }
+      router.push(`/player/transcoding-player?${q}`);
+    },
+    [router]
+  );
 
-      router.push("/play-video");
+  const onPress = useCallback(async () => {
+    if (!item) return;
+
+    const queryParams = new URLSearchParams({
+      itemId: item.Id!,
+      audioIndex: selectedOptions.audioIndex?.toString() ?? "",
+      subtitleIndex: selectedOptions.subtitleIndex?.toString() ?? "",
+      mediaSourceId: selectedOptions.mediaSource?.Id ?? "",
+      bitrateValue: selectedOptions.bitrate?.value?.toString() ?? "",
+    });
+
+    const queryString = queryParams.toString();
+
+    if (!client) {
+      goToPlayer(queryString, selectedOptions.bitrate?.value);
       return;
     }
 
@@ -116,15 +121,14 @@ export const PlayButton: React.FC<Props> = ({ ...props }) => {
                 // Get a new URL with the Chromecast device profile:
                 const data = await getStreamUrl({
                   api,
-                  deviceProfile: chromecastProfile,
                   item,
-                  mediaSourceId: playSettings?.mediaSource?.Id,
-                  startTimeTicks: 0,
-                  maxStreamingBitrate: playSettings?.bitrate?.value,
-                  audioStreamIndex: playSettings?.audioIndex ?? 0,
-                  subtitleStreamIndex: playSettings?.subtitleIndex ?? -1,
+                  deviceProfile: ios,
+                  startTimeTicks: item?.UserData?.PlaybackPositionTicks!,
                   userId: user?.Id,
-                  forceDirectPlay: settings?.forceDirectPlay,
+                  audioStreamIndex: selectedOptions.audioIndex,
+                  maxStreamingBitrate: selectedOptions.bitrate?.value,
+                  mediaSourceId: selectedOptions.mediaSource?.Id,
+                  subtitleStreamIndex: selectedOptions.subtitleIndex,
                 });
 
                 if (!data?.url) {
@@ -205,7 +209,7 @@ export const PlayButton: React.FC<Props> = ({ ...props }) => {
             });
             break;
           case 1:
-            router.push("/play-video");
+            goToPlayer(queryString, selectedOptions.bitrate?.value);
             break;
           case cancelButtonIndex:
             break;
@@ -213,16 +217,15 @@ export const PlayButton: React.FC<Props> = ({ ...props }) => {
       }
     );
   }, [
-    url,
     item,
     client,
     settings,
     api,
     user,
-    playSettings,
     router,
     showActionSheetWithOptions,
     mediaStatus,
+    selectedOptions,
   ]);
 
   const derivedTargetWidth = useDerivedValue(() => {
@@ -317,10 +320,11 @@ export const PlayButton: React.FC<Props> = ({ ...props }) => {
   return (
     <View>
       <TouchableOpacity
+        disabled={!item}
         accessibilityLabel="Play button"
         accessibilityHint="Tap to play the media"
         onPress={onPress}
-        className="relative"
+        className={`relative`}
         {...props}
       >
         <View className="absolute w-full h-full top-0 left-0 rounded-xl z-10 overflow-hidden">
@@ -372,7 +376,7 @@ export const PlayButton: React.FC<Props> = ({ ...props }) => {
           </View>
         </View>
       </TouchableOpacity>
-      <View className="mt-2 flex flex-row items-center">
+      {/* <View className="mt-2 flex flex-row items-center">
         <Ionicons
           name="information-circle"
           size={12}
@@ -382,7 +386,7 @@ export const PlayButton: React.FC<Props> = ({ ...props }) => {
         <Text className="text-neutral-500 ml-1">
           {directStream ? "Direct stream" : "Transcoded stream"}
         </Text>
-      </View>
+      </View> */}
     </View>
   );
 };

components/PlayedStatus.tsx

@@ -41,9 +41,6 @@ export const PlayedStatus: React.FC<Props> = ({ item, ...props }) => {
     queryClient.invalidateQueries({
       queryKey: ["seasons"],
     });
-    queryClient.invalidateQueries({
-      queryKey: ["nextUp-all"],
-    });
     queryClient.invalidateQueries({
       queryKey: ["home"],
     });

components/SubtitleTrackSelector.tsx

@@ -6,9 +6,9 @@ import * as DropdownMenu from "zeego/dropdown-menu";
 import { Text } from "./common/Text";
 
 interface Props extends React.ComponentProps<typeof View> {
-  source: MediaSourceInfo;
+  source?: MediaSourceInfo;
   onChange: (value: number) => void;
-  selected?: number | null;
+  selected?: number | undefined;
 }
 
 export const SubtitleTrackSelector: React.FC<Props> = ({
@@ -18,7 +18,7 @@ export const SubtitleTrackSelector: React.FC<Props> = ({
   ...props
 }) => {
   const subtitleStreams = useMemo(
-    () => source.MediaStreams?.filter((x) => x.Type === "Subtitle") ?? [],
+    () => source?.MediaStreams?.filter((x) => x.Type === "Subtitle") ?? [],
     [source]
   );
 

components/common/HorrizontalScroll.tsx

@@ -16,6 +16,7 @@ interface HorizontalScrollProps<T>
   > {
   data?: T[] | null;
   renderItem: (item: T, index: number) => React.ReactNode;
+  keyExtractor?: (item: T, index: number) => string;
   containerStyle?: ViewStyle;
   contentContainerStyle?: ViewStyle;
   loadingContainerStyle?: ViewStyle;
@@ -32,6 +33,7 @@ export const HorizontalScroll = forwardRef<
   <T,>(
     {
       data = [],
+      keyExtractor,
       renderItem,
       containerStyle,
       contentContainerStyle,
@@ -91,6 +93,7 @@ export const HorizontalScroll = forwardRef<
           paddingHorizontal: 16,
           ...contentContainerStyle,
         }}
+        keyExtractor={keyExtractor}
         ListEmptyComponent={() => (
           <View className="flex-1 justify-center items-center">
             <Text className="text-center text-gray-500">
@@ -98,6 +101,7 @@ export const HorizontalScroll = forwardRef<
             </Text>
           </View>
         )}
+        {...props}
       />
     );
   }

components/downloads/ActiveDownloads.tsx

@@ -26,7 +26,7 @@ import { storage } from "@/utils/mmkv";
 interface Props extends ViewProps {}
 
 export const ActiveDownloads: React.FC<Props> = ({ ...props }) => {
-  const { processes, startDownload } = useDownload();
+  const { processes } = useDownload();
   if (processes?.length === 0)
     return (
       <View {...props} className="bg-neutral-900 p-4 rounded-2xl">
@@ -85,7 +85,7 @@ const DownloadCard = ({ process, ...props }: DownloadCardProps) => {
       toast.success("Download canceled");
     },
     onError: (e) => {
-      console.log(e);
+      console.error(e);
       toast.error("Could not cancel download");
     },
   });
@@ -95,7 +95,7 @@ const DownloadCard = ({ process, ...props }: DownloadCardProps) => {
 
     const length = p?.item?.RunTimeTicks || 0;
     const timeLeft = (length - length * (p.progress / 100)) / p.speed;
-    return formatTimeString(timeLeft, true);
+    return formatTimeString(timeLeft, "tick");
   };
 
   const base64Image = useMemo(() => {

components/downloads/EpisodeCard.tsx

@@ -7,7 +7,7 @@ import {
   useActionSheet,
 } from "@expo/react-native-action-sheet";
 
-import { useFileOpener } from "@/hooks/useDownloadedFileOpener";
+import { useDownloadedFileOpener } from "@/hooks/useDownloadedFileOpener";
 import { Text } from "../common/Text";
 import { useDownload } from "@/providers/DownloadProvider";
 import { storage } from "@/utils/mmkv";
@@ -26,7 +26,7 @@ interface EpisodeCardProps {
  */
 export const EpisodeCard: React.FC<EpisodeCardProps> = ({ item }) => {
   const { deleteFile } = useDownload();
-  const { openFile } = useFileOpener();
+  const { openFile } = useDownloadedFileOpener();
   const { showActionSheetWithOptions } = useActionSheet();
 
   const base64Image = useMemo(() => {

components/downloads/MovieCard.tsx

@@ -1,20 +1,17 @@
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import * as Haptics from "expo-haptics";
-import React, { useCallback, useMemo } from "react";
-import { TouchableOpacity, View } from "react-native";
 import {
   ActionSheetProvider,
   useActionSheet,
 } from "@expo/react-native-action-sheet";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import * as Haptics from "expo-haptics";
+import React, { useCallback, useMemo } from "react";
+import { TouchableOpacity, View } from "react-native";
 
-import { runtimeTicksToMinutes } from "@/utils/time";
-import { Text } from "../common/Text";
-
-import { useFileOpener } from "@/hooks/useDownloadedFileOpener";
+import { useDownloadedFileOpener } from "@/hooks/useDownloadedFileOpener";
 import { useDownload } from "@/providers/DownloadProvider";
 import { storage } from "@/utils/mmkv";
-import { Image } from "expo-image";
 import { Ionicons } from "@expo/vector-icons";
+import { Image } from "expo-image";
 import { ItemCardText } from "../ItemCardText";
 
 interface MovieCardProps {
@@ -28,7 +25,7 @@ interface MovieCardProps {
  */
 export const MovieCard: React.FC<MovieCardProps> = ({ item }) => {
   const { deleteFile } = useDownload();
-  const { openFile } = useFileOpener();
+  const { openFile } = useDownloadedFileOpener();
   const { showActionSheetWithOptions } = useActionSheet();
 
   const handleOpenFile = useCallback(() => {

components/home/ScrollingCollectionList.tsx

@@ -28,11 +28,15 @@ export const ScrollingCollectionList: React.FC<Props> = ({
   queryKey,
   ...props
 }) => {
+  // console.log(queryKey);
+
   const { data, isLoading } = useQuery({
-    queryKey,
+    queryKey: queryKey,
     queryFn,
-    enabled: !disabled,
     staleTime: 0,
+    refetchOnMount: true,
+    refetchOnWindowFocus: true,
+    refetchOnReconnect: true,
   });
 
   if (disabled || !title) return null;

components/music/SongsListItem.tsx

@@ -103,7 +103,7 @@ export const SongsListItem: React.FC<Props> = ({
       });
     } else {
       console.log("Playing on device", data.url, item.Id);
-      router.push("/play-music");
+      router.push("/music-player");
     }
   }, []);
 

components/series/CastAndCrew.tsx

@@ -6,7 +6,7 @@ import {
 } from "@jellyfin/sdk/lib/generated-client/models";
 import { router } from "expo-router";
 import { useAtom } from "jotai";
-import React from "react";
+import React, { useMemo } from "react";
 import { TouchableOpacity, View, ViewProps } from "react-native";
 import { HorizontalScroll } from "../common/HorrizontalScroll";
 import { Text } from "../common/Text";
@@ -20,24 +20,37 @@ interface Props extends ViewProps {
 export const CastAndCrew: React.FC<Props> = ({ item, loading, ...props }) => {
   const [api] = useAtom(apiAtom);
 
+  const destinctPeople = useMemo(() => {
+    const people: BaseItemPerson[] = [];
+    item?.People?.forEach((person) => {
+      const existingPerson = people.find((p) => p.Id === person.Id);
+      if (existingPerson) {
+        existingPerson.Role = `${existingPerson.Role}, ${person.Role}`;
+      } else {
+        people.push(person);
+      }
+    });
+    return people;
+  }, [item?.People]);
+
   return (
     <View {...props} className="flex flex-col">
       <Text className="text-lg font-bold mb-2 px-4">Cast & Crew</Text>
       <HorizontalScroll
         loading={loading}
+        keyExtractor={(i, idx) => i.Id.toString()}
         height={247}
-        data={item?.People || []}
-        renderItem={(item, index) => (
+        data={destinctPeople}
+        renderItem={(i) => (
           <TouchableOpacity
             onPress={() => {
-              router.push(`/actors/${item.Id}`);
+              router.push(`/actors/${i.Id}`);
             }}
-            key={item.Id}
             className="flex flex-col w-28"
           >
-            <Poster item={item} url={getPrimaryImageUrl({ api, item })} />
-            <Text className="mt-2">{item.Name}</Text>
-            <Text className="text-xs opacity-50">{item.Role}</Text>
+            <Poster item={i} url={getPrimaryImageUrl({ api, item: i })} />
+            <Text className="mt-2">{i.Name}</Text>
+            <Text className="text-xs opacity-50">{i.Role}</Text>
           </TouchableOpacity>
         )}
       />

components/settings/SettingToggles.tsx

@@ -10,6 +10,7 @@ import {
   registerBackgroundFetchAsync,
   unregisterBackgroundFetchAsync,
 } from "@/utils/background-tasks";
+import { getStatistics } from "@/utils/optimize-server";
 import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import * as BackgroundFetch from "expo-background-fetch";
@@ -18,7 +19,6 @@ import * as TaskManager from "expo-task-manager";
 import { useAtom } from "jotai";
 import { useEffect, useState } from "react";
 import {
-  ActivityIndicator,
   Linking,
   Switch,
   TouchableOpacity,
@@ -32,8 +32,6 @@ import { Input } from "../common/Input";
 import { Text } from "../common/Text";
 import { Loader } from "../Loader";
 import { MediaToggles } from "./MediaToggles";
-import axios from "axios";
-import { getStatistics } from "@/utils/optimize-server";
 
 interface Props extends ViewProps {}
 
@@ -64,7 +62,7 @@ export const SettingToggles: React.FC<Props> = ({ ...props }) => {
 
       if (settings?.autoDownload === true && !registered) {
         registerBackgroundFetchAsync();
-        toast.success("Background downlodas enabled");
+        toast.success("Background downloads enabled");
       } else if (settings?.autoDownload === false && registered) {
         unregisterBackgroundFetchAsync();
         toast.info("Background downloads disabled");
@@ -248,22 +246,6 @@ export const SettingToggles: React.FC<Props> = ({ ...props }) => {
             </DropdownMenu.Root>
           </View>
 
-          <View className="flex flex-row space-x-2 items-center justify-between bg-neutral-900 p-4">
-            <View className="flex flex-col shrink">
-              <Text className="font-semibold">Use external player (VLC)</Text>
-              <Text className="text-xs opacity-50 shrink">
-                Open all videos in VLC instead of the default player. This
-                requries VLC to be installed on the phone.
-              </Text>
-            </View>
-            <Switch
-              value={settings.openInVLC}
-              onValueChange={(value) => {
-                updateSettings({ openInVLC: value, forceDirectPlay: value });
-              }}
-            />
-          </View>
-
           <View className="flex flex-col">
             <View className="flex flex-row items-center justify-between bg-neutral-900 p-4">
               <View className="flex flex-col">
@@ -334,79 +316,6 @@ export const SettingToggles: React.FC<Props> = ({ ...props }) => {
             )}
           </View>
 
-          <View className="flex flex-row space-x-2 items-center justify-between bg-neutral-900 p-4">
-            <View className="flex flex-col shrink">
-              <Text className="font-semibold">Force direct play</Text>
-              <Text className="text-xs opacity-50 shrink">
-                This will always request direct play. This is good if you want
-                to try to stream movies you think the device supports.
-              </Text>
-            </View>
-            <Switch
-              value={settings.forceDirectPlay}
-              onValueChange={(value) =>
-                updateSettings({ forceDirectPlay: value })
-              }
-            />
-          </View>
-
-          <View
-            className={`
-              flex flex-row items-center space-x-2 justify-between bg-neutral-900 p-4
-              ${settings.forceDirectPlay ? "opacity-50 select-none" : ""}
-            `}
-          >
-            <View className="flex flex-col shrink">
-              <Text className="font-semibold">Device profile</Text>
-              <Text className="text-xs opacity-50">
-                A profile used for deciding what audio and video codecs the
-                device supports.
-              </Text>
-            </View>
-            <DropdownMenu.Root>
-              <DropdownMenu.Trigger>
-                <TouchableOpacity className="bg-neutral-800 rounded-lg border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between">
-                  <Text>{settings.deviceProfile}</Text>
-                </TouchableOpacity>
-              </DropdownMenu.Trigger>
-              <DropdownMenu.Content
-                loop={true}
-                side="bottom"
-                align="start"
-                alignOffset={0}
-                avoidCollisions={true}
-                collisionPadding={8}
-                sideOffset={8}
-              >
-                <DropdownMenu.Label>Profiles</DropdownMenu.Label>
-                <DropdownMenu.Item
-                  key="1"
-                  onSelect={() => {
-                    updateSettings({ deviceProfile: "Expo" });
-                  }}
-                >
-                  <DropdownMenu.ItemTitle>Expo</DropdownMenu.ItemTitle>
-                </DropdownMenu.Item>
-                <DropdownMenu.Item
-                  key="2"
-                  onSelect={() => {
-                    updateSettings({ deviceProfile: "Native" });
-                  }}
-                >
-                  <DropdownMenu.ItemTitle>Native</DropdownMenu.ItemTitle>
-                </DropdownMenu.Item>
-                <DropdownMenu.Item
-                  key="3"
-                  onSelect={() => {
-                    updateSettings({ deviceProfile: "Old" });
-                  }}
-                >
-                  <DropdownMenu.ItemTitle>Old</DropdownMenu.ItemTitle>
-                </DropdownMenu.Item>
-              </DropdownMenu.Content>
-            </DropdownMenu.Root>
-          </View>
-
           <View className="flex flex-col">
             <View
               className={`

components/video-player/Controls.tsx

@@ -1,496 +0,0 @@
-import { useAdjacentItems } from "@/hooks/useAdjacentEpisodes";
-import { useCreditSkipper } from "@/hooks/useCreditSkipper";
-import { useIntroSkipper } from "@/hooks/useIntroSkipper";
-import { useTrickplay } from "@/hooks/useTrickplay";
-import { usePlaySettings } from "@/providers/PlaySettingsProvider";
-import { useSettings } from "@/utils/atoms/settings";
-import { getDefaultPlaySettings } from "@/utils/jellyfin/getDefaultPlaySettings";
-import { writeToLog } from "@/utils/log";
-import { formatTimeString, ticksToSeconds } from "@/utils/time";
-import { Ionicons } from "@expo/vector-icons";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
-import { Image } from "expo-image";
-import { useRouter } from "expo-router";
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import {
-  Dimensions,
-  Platform,
-  Pressable,
-  TouchableOpacity,
-  View,
-} from "react-native";
-import { Slider } from "react-native-awesome-slider";
-import Animated, {
-  runOnJS,
-  SharedValue,
-  useAnimatedReaction,
-  useAnimatedStyle,
-  useSharedValue,
-  withTiming,
-} from "react-native-reanimated";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { VideoRef } from "react-native-video";
-import { Text } from "../common/Text";
-import { Loader } from "../Loader";
-
-interface Props {
-  item: BaseItemDto;
-  videoRef: React.MutableRefObject<VideoRef | null>;
-  isPlaying: boolean;
-  isSeeking: SharedValue<boolean>;
-  cacheProgress: SharedValue<number>;
-  progress: SharedValue<number>;
-  isBuffering: boolean;
-  showControls: boolean;
-  ignoreSafeAreas?: boolean;
-  setIgnoreSafeAreas: React.Dispatch<React.SetStateAction<boolean>>;
-  enableTrickplay?: boolean;
-  togglePlay: (ticks: number) => void;
-  setShowControls: (shown: boolean) => void;
-}
-
-export const Controls: React.FC<Props> = ({
-  item,
-  videoRef,
-  togglePlay,
-  isPlaying,
-  isSeeking,
-  progress,
-  isBuffering,
-  cacheProgress,
-  showControls,
-  setShowControls,
-  ignoreSafeAreas,
-  setIgnoreSafeAreas,
-  enableTrickplay = true,
-}) => {
-  const [settings] = useSettings();
-  const router = useRouter();
-  const insets = useSafeAreaInsets();
-  const { setPlaySettings } = usePlaySettings();
-
-  const windowDimensions = Dimensions.get("window");
-
-  const { previousItem, nextItem } = useAdjacentItems({ item });
-  const { trickPlayUrl, calculateTrickplayUrl, trickplayInfo } = useTrickplay(
-    item,
-    enableTrickplay
-  );
-
-  const [currentTime, setCurrentTime] = useState(0); // Seconds
-  const [remainingTime, setRemainingTime] = useState(0); // Seconds
-
-  const min = useSharedValue(0);
-  const max = useSharedValue(item.RunTimeTicks || 0);
-
-  const wasPlayingRef = useRef(false);
-
-  const { showSkipButton, skipIntro } = useIntroSkipper(
-    item.Id,
-    currentTime,
-    videoRef
-  );
-
-  const { showSkipCreditButton, skipCredit } = useCreditSkipper(
-    item.Id,
-    currentTime,
-    videoRef
-  );
-
-  const goToPreviousItem = useCallback(() => {
-    if (!previousItem || !settings) return;
-
-    const { bitrate, mediaSource, audioIndex, subtitleIndex } =
-      getDefaultPlaySettings(previousItem, settings);
-
-    setPlaySettings({
-      item: previousItem,
-      bitrate,
-      mediaSource,
-      audioIndex,
-      subtitleIndex,
-    });
-
-    router.replace("/play-video");
-  }, [previousItem, settings]);
-
-  const goToNextItem = useCallback(() => {
-    if (!nextItem || !settings) return;
-
-    const { bitrate, mediaSource, audioIndex, subtitleIndex } =
-      getDefaultPlaySettings(nextItem, settings);
-
-    setPlaySettings({
-      item: nextItem,
-      bitrate,
-      mediaSource,
-      audioIndex,
-      subtitleIndex,
-    });
-
-    router.replace("/play-video");
-  }, [nextItem, settings]);
-
-  const updateTimes = useCallback(
-    (currentProgress: number, maxValue: number) => {
-      const current = ticksToSeconds(currentProgress);
-      const remaining = ticksToSeconds(maxValue - currentProgress);
-
-      setCurrentTime(current);
-      setRemainingTime(remaining);
-
-      if (currentProgress === maxValue) {
-        setShowControls(true);
-        // Automatically play the next item if it exists
-        goToNextItem();
-      }
-    },
-    [goToNextItem]
-  );
-
-  useAnimatedReaction(
-    () => ({
-      progress: progress.value,
-      max: max.value,
-      isSeeking: isSeeking.value,
-    }),
-    (result) => {
-      if (result.isSeeking === false) {
-        runOnJS(updateTimes)(result.progress, result.max);
-      }
-    },
-    [updateTimes]
-  );
-
-  useEffect(() => {
-    if (item) {
-      progress.value = item?.UserData?.PlaybackPositionTicks || 0;
-      max.value = item.RunTimeTicks || 0;
-    }
-  }, [item]);
-
-  const toggleControls = () => setShowControls(!showControls);
-
-  const handleSliderComplete = useCallback((value: number) => {
-    progress.value = value;
-    isSeeking.value = false;
-    videoRef.current?.seek(Math.max(0, Math.floor(value / 10000000)));
-    if (wasPlayingRef.current === true) videoRef.current?.resume();
-  }, []);
-
-  const handleSliderChange = (value: number) => {
-    calculateTrickplayUrl(value);
-  };
-
-  const handleSliderStart = useCallback(() => {
-    if (showControls === false) return;
-    wasPlayingRef.current = isPlaying;
-    videoRef.current?.pause();
-    isSeeking.value = true;
-  }, [showControls, isPlaying]);
-
-  const handleSkipBackward = useCallback(async () => {
-    console.log("handleSkipBackward");
-    if (!settings?.rewindSkipTime) return;
-    wasPlayingRef.current = isPlaying;
-    try {
-      const curr = await videoRef.current?.getCurrentPosition();
-      if (curr !== undefined) {
-        videoRef.current?.seek(Math.max(0, curr - settings.rewindSkipTime));
-        setTimeout(() => {
-          if (wasPlayingRef.current === true) videoRef.current?.resume();
-        }, 10);
-      }
-    } catch (error) {
-      writeToLog("ERROR", "Error seeking video backwards", error);
-    }
-  }, [settings, isPlaying]);
-
-  const handleSkipForward = useCallback(async () => {
-    console.log("handleSkipForward");
-    if (!settings?.forwardSkipTime) return;
-    wasPlayingRef.current = isPlaying;
-    try {
-      const curr = await videoRef.current?.getCurrentPosition();
-      if (curr !== undefined) {
-        videoRef.current?.seek(Math.max(0, curr + settings.forwardSkipTime));
-        setTimeout(() => {
-          if (wasPlayingRef.current === true) videoRef.current?.resume();
-        }, 10);
-      }
-    } catch (error) {
-      writeToLog("ERROR", "Error seeking video forwards", error);
-    }
-  }, [settings, isPlaying]);
-
-  const toggleIgnoreSafeAreas = useCallback(() => {
-    setIgnoreSafeAreas((prev) => !prev);
-  }, []);
-
-  return (
-    <View
-      style={[
-        {
-          position: "absolute",
-          top: 0,
-          left: 0,
-          width: windowDimensions.width,
-          height: windowDimensions.height,
-        },
-      ]}
-    >
-      <View
-        style={[
-          {
-            position: "absolute",
-            bottom: insets.bottom + 97,
-            right: insets.right,
-          },
-        ]}
-        className={`z-10 p-4
-          ${showSkipButton ? "opacity-100" : "opacity-0"}
-        `}
-      >
-        <TouchableOpacity
-          onPress={skipIntro}
-          className="bg-purple-600 rounded-full px-2.5 py-2 font-semibold"
-        >
-          <Text className="text-white">Skip Intro</Text>
-        </TouchableOpacity>
-      </View>
-
-      <View
-        style={{
-          position: "absolute",
-          bottom: insets.bottom + 94,
-          right: insets.right,
-          height: 70,
-        }}
-        pointerEvents={showSkipCreditButton ? "auto" : "none"}
-        className={`z-10 p-4 ${
-          showSkipCreditButton ? "opacity-100" : "opacity-0"
-        }`}
-      >
-        <TouchableOpacity
-          onPress={skipCredit}
-          className="bg-purple-600 rounded-full px-2.5 py-2 font-semibold"
-        >
-          <Text className="text-white">Skip Credits</Text>
-        </TouchableOpacity>
-      </View>
-
-      <Pressable
-        onPress={() => {
-          toggleControls();
-        }}
-      >
-        <View
-          style={[
-            {
-              position: "absolute",
-              top: 0,
-              left: 0,
-              width: windowDimensions.width + 100,
-              height: windowDimensions.height + 100,
-            },
-          ]}
-          className={`bg-black/50 z-0`}
-        ></View>
-      </Pressable>
-
-      <View
-        style={{
-          position: "absolute",
-          top: 0,
-          left: 0,
-          width: windowDimensions.width,
-          height: windowDimensions.height,
-        }}
-        pointerEvents="none"
-        className={`flex flex-col items-center justify-center
-            ${isBuffering ? "opacity-100" : "opacity-0"}
-          `}
-      >
-        <Loader />
-      </View>
-
-      <View
-        style={[
-          {
-            position: "absolute",
-            top: insets.top,
-            right: insets.right,
-            opacity: showControls ? 1 : 0,
-          },
-        ]}
-        pointerEvents={showControls ? "auto" : "none"}
-        className={`flex flex-row items-center space-x-2 z-10 p-4`}
-      >
-        <TouchableOpacity
-          onPress={toggleIgnoreSafeAreas}
-          className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"
-        >
-          <Ionicons
-            name={ignoreSafeAreas ? "contract-outline" : "expand"}
-            size={24}
-            color="white"
-          />
-        </TouchableOpacity>
-        <TouchableOpacity
-          onPress={() => {
-            router.back();
-          }}
-          className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"
-        >
-          <Ionicons name="close" size={24} color="white" />
-        </TouchableOpacity>
-      </View>
-
-      <View
-        style={[
-          {
-            position: "absolute",
-            width: windowDimensions.width - insets.left - insets.right,
-            maxHeight: windowDimensions.height,
-            left: insets.left,
-            bottom: Platform.OS === "ios" ? insets.bottom : insets.bottom,
-            opacity: showControls ? 1 : 0,
-          },
-        ]}
-        pointerEvents={showControls ? "auto" : "none"}
-        className={`flex flex-col p-4 `}
-      >
-        <View className="shrink flex flex-col justify-center h-full mb-2">
-          <Text className="font-bold">{item?.Name}</Text>
-          {item?.Type === "Episode" && (
-            <Text className="opacity-50">{item.SeriesName}</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-col-reverse py-4 px-4 rounded-2xl items-center  bg-neutral-800/90`}
-        >
-          <View className="flex flex-row items-center space-x-4">
-            <TouchableOpacity
-              style={{
-                opacity: !previousItem ? 0.5 : 1,
-              }}
-              onPress={goToPreviousItem}
-            >
-              <Ionicons name="play-skip-back" size={24} color="white" />
-            </TouchableOpacity>
-            <TouchableOpacity onPress={handleSkipBackward}>
-              <Ionicons
-                name="refresh-outline"
-                size={26}
-                color="white"
-                style={{
-                  transform: [{ scaleY: -1 }, { rotate: "180deg" }],
-                }}
-              />
-            </TouchableOpacity>
-            <TouchableOpacity
-              onPress={() => {
-                togglePlay(progress.value);
-              }}
-            >
-              <Ionicons
-                name={isPlaying ? "pause" : "play"}
-                size={30}
-                color="white"
-              />
-            </TouchableOpacity>
-            <TouchableOpacity onPress={handleSkipForward}>
-              <Ionicons name="refresh-outline" size={26} color="white" />
-            </TouchableOpacity>
-            <TouchableOpacity
-              style={{
-                opacity: !nextItem ? 0.5 : 1,
-              }}
-              onPress={goToNextItem}
-            >
-              <Ionicons name="play-skip-forward" size={24} color="white" />
-            </TouchableOpacity>
-          </View>
-          <View className={`flex flex-col w-full shrink`}>
-            <Slider
-              theme={{
-                maximumTrackTintColor: "rgba(255,255,255,0.2)",
-                minimumTrackTintColor: "#fff",
-                cacheTrackTintColor: "rgba(255,255,255,0.3)",
-                bubbleBackgroundColor: "#fff",
-                bubbleTextColor: "#000",
-                heartbeatColor: "#999",
-              }}
-              cache={cacheProgress}
-              onSlidingStart={handleSliderStart}
-              onSlidingComplete={handleSliderComplete}
-              onValueChange={handleSliderChange}
-              containerStyle={{
-                borderRadius: 100,
-              }}
-              renderBubble={() => {
-                if (!trickPlayUrl || !trickplayInfo) {
-                  return null;
-                }
-                const { x, y, url } = trickPlayUrl;
-
-                const tileWidth = 150;
-                const tileHeight = 150 / trickplayInfo.aspectRatio!;
-                return (
-                  <View
-                    style={{
-                      position: "absolute",
-                      bottom: 0,
-                      left: 0,
-                      width: tileWidth,
-                      height: tileHeight,
-                      marginLeft: -tileWidth / 4,
-                      marginTop: -tileHeight / 4 - 60,
-                      zIndex: 10,
-                    }}
-                    className=" bg-neutral-800 overflow-hidden"
-                  >
-                    <Image
-                      cachePolicy={"memory-disk"}
-                      style={{
-                        width: 150 * trickplayInfo?.data.TileWidth!,
-                        height:
-                          (150 / trickplayInfo.aspectRatio!) *
-                          trickplayInfo?.data.TileHeight!,
-                        transform: [
-                          { translateX: -x * tileWidth },
-                          { translateY: -y * tileHeight },
-                        ],
-                      }}
-                      source={{ uri: url }}
-                      contentFit="cover"
-                    />
-                  </View>
-                );
-              }}
-              sliderHeight={10}
-              thumbWidth={0}
-              progress={progress}
-              minimumValue={min}
-              maximumValue={max}
-            />
-            <View className="flex flex-row items-center justify-between mt-0.5">
-              <Text className="text-[12px] text-neutral-400">
-                {formatTimeString(currentTime)}
-              </Text>
-              <Text className="text-[12px] text-neutral-400">
-                -{formatTimeString(remainingTime)}
-              </Text>
-            </View>
-          </View>
-        </View>
-      </View>
-    </View>
-  );
-};

components/video-player/controls/Controls.tsx

@@ -0,0 +1,599 @@
+import { Text } from "@/components/common/Text";
+import { Loader } from "@/components/Loader";
+import { useAdjacentItems } from "@/hooks/useAdjacentEpisodes";
+import { useCreditSkipper } from "@/hooks/useCreditSkipper";
+import { useIntroSkipper } from "@/hooks/useIntroSkipper";
+import { useTrickplay } from "@/hooks/useTrickplay";
+import {
+  TrackInfo,
+  VlcPlayerViewRef,
+} from "@/modules/vlc-player/src/VlcPlayer.types";
+import { useSettings } from "@/utils/atoms/settings";
+import { getDefaultPlaySettings } from "@/utils/jellyfin/getDefaultPlaySettings";
+import { writeToLog } from "@/utils/log";
+import {
+  formatTimeString,
+  msToTicks,
+  secondsToMs,
+  ticksToMs,
+  ticksToSeconds,
+} from "@/utils/time";
+import { Ionicons } from "@expo/vector-icons";
+import {
+  BaseItemDto,
+  MediaSourceInfo,
+} from "@jellyfin/sdk/lib/generated-client";
+import { Image } from "expo-image";
+import { useRouter } from "expo-router";
+import { useCallback, useEffect, useRef, useState } from "react";
+import {
+  Dimensions,
+  Platform,
+  Pressable,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import { Slider } from "react-native-awesome-slider";
+import {
+  runOnJS,
+  SharedValue,
+  useAnimatedReaction,
+  useSharedValue,
+} from "react-native-reanimated";
+import {
+  SafeAreaView,
+  useSafeAreaInsets,
+} from "react-native-safe-area-context";
+import { VideoRef } from "react-native-video";
+import { ControlProvider } from "./contexts/ControlContext";
+import { VideoProvider } from "./contexts/VideoContext";
+import * as Haptics from "expo-haptics";
+import DropdownViewDirect from "./dropdown/DropdownViewDirect";
+import DropdownViewTranscoding from "./dropdown/DropdownViewTranscoding";
+
+interface Props {
+  item: BaseItemDto;
+  videoRef: React.MutableRefObject<VlcPlayerViewRef | VideoRef | null>;
+  isPlaying: boolean;
+  isSeeking: SharedValue<boolean>;
+  cacheProgress: SharedValue<number>;
+  progress: SharedValue<number>;
+  isBuffering: boolean;
+  showControls: boolean;
+  ignoreSafeAreas?: boolean;
+  setIgnoreSafeAreas: React.Dispatch<React.SetStateAction<boolean>>;
+  enableTrickplay?: boolean;
+  togglePlay: (ticks: number) => void;
+  setShowControls: (shown: boolean) => void;
+  offline?: boolean;
+  isVideoLoaded?: boolean;
+  mediaSource?: MediaSourceInfo | null;
+  seek: (ticks: number) => void;
+  play: (() => Promise<void>) | (() => void);
+  pause: () => void;
+  getAudioTracks?: (() => Promise<TrackInfo[] | null>) | (() => TrackInfo[]);
+  getSubtitleTracks?: (() => Promise<TrackInfo[] | null>) | (() => TrackInfo[]);
+  setSubtitleURL?: (url: string, customName: string) => void;
+  setSubtitleTrack?: (index: number) => void;
+  setAudioTrack?: (index: number) => void;
+  stop?: (() => Promise<void>) | (() => void);
+  isVlc?: boolean;
+}
+
+export const Controls: React.FC<Props> = ({
+  item,
+  seek,
+  play,
+  pause,
+  togglePlay,
+  isPlaying,
+  isSeeking,
+  progress,
+  isBuffering,
+  cacheProgress,
+  showControls,
+  setShowControls,
+  ignoreSafeAreas,
+  setIgnoreSafeAreas,
+  mediaSource,
+  isVideoLoaded,
+  getAudioTracks,
+  getSubtitleTracks,
+  setSubtitleURL,
+  setSubtitleTrack,
+  setAudioTrack,
+  stop,
+  offline = false,
+  enableTrickplay = true,
+  isVlc = false,
+}) => {
+  const [settings] = useSettings();
+  const router = useRouter();
+  const insets = useSafeAreaInsets();
+
+  const { previousItem, nextItem } = useAdjacentItems({ item });
+  const { trickPlayUrl, calculateTrickplayUrl, trickplayInfo } = useTrickplay(
+    item,
+    !offline && enableTrickplay
+  );
+
+  const [currentTime, setCurrentTime] = useState(0);
+  const [remainingTime, setRemainingTime] = useState(0);
+
+  const min = useSharedValue(0);
+  const max = useSharedValue(item.RunTimeTicks || 0);
+
+  const wasPlayingRef = useRef(false);
+  const lastProgressRef = useRef<number>(0);
+
+  const { showSkipButton, skipIntro } = useIntroSkipper(
+    offline ? undefined : item.Id,
+    currentTime,
+    seek,
+    play,
+    isVlc
+  );
+
+  const { showSkipCreditButton, skipCredit } = useCreditSkipper(
+    offline ? undefined : item.Id,
+    currentTime,
+    seek,
+    play,
+    isVlc
+  );
+
+  const goToPreviousItem = useCallback(() => {
+    if (!previousItem || !settings) return;
+
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+
+    const { bitrate, mediaSource, audioIndex, subtitleIndex } =
+      getDefaultPlaySettings(previousItem, settings);
+
+    const queryParams = new URLSearchParams({
+      itemId: previousItem.Id ?? "", // Ensure itemId is a string
+      audioIndex: audioIndex?.toString() ?? "",
+      subtitleIndex: subtitleIndex?.toString() ?? "",
+      mediaSourceId: mediaSource?.Id ?? "", // Ensure mediaSourceId is a string
+      bitrateValue: bitrate.toString(),
+    }).toString();
+
+    if (!bitrate.value) {
+      // @ts-expect-error
+      router.replace(`player/direct-player?${queryParams}`);
+      return;
+    }
+    // @ts-expect-error
+    router.replace(`player/transcoding-player?${queryParams}`);
+  }, [previousItem, settings]);
+
+  const goToNextItem = useCallback(() => {
+    if (!nextItem || !settings) return;
+
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+
+    const { bitrate, mediaSource, audioIndex, subtitleIndex } =
+      getDefaultPlaySettings(nextItem, settings);
+
+    const queryParams = new URLSearchParams({
+      itemId: nextItem.Id ?? "", // Ensure itemId is a string
+      audioIndex: audioIndex?.toString() ?? "",
+      subtitleIndex: subtitleIndex?.toString() ?? "",
+      mediaSourceId: mediaSource?.Id ?? "", // Ensure mediaSourceId is a string
+      bitrateValue: bitrate.toString(),
+    }).toString();
+
+    if (!bitrate.value) {
+      // @ts-expect-error
+      router.replace(`player/direct-player?${queryParams}`);
+      return;
+    }
+    // @ts-expect-error
+    router.replace(`player/transcoding-player?${queryParams}`);
+  }, [nextItem, settings]);
+
+  const updateTimes = useCallback(
+    (currentProgress: number, maxValue: number) => {
+      const current = isVlc ? currentProgress : ticksToSeconds(currentProgress);
+      const remaining = isVlc
+        ? maxValue - currentProgress
+        : ticksToSeconds(maxValue - currentProgress);
+
+      setCurrentTime(current);
+      setRemainingTime(remaining);
+
+      // Currently doesm't work in VLC because of some corrupted timestamps, will need to find a workaround.
+      if (currentProgress === maxValue) {
+        setShowControls(true);
+        // Automatically play the next item if it exists
+        goToNextItem();
+      }
+    },
+    [goToNextItem, isVlc]
+  );
+
+  useAnimatedReaction(
+    () => ({
+      progress: progress.value,
+      max: max.value,
+      isSeeking: isSeeking.value,
+    }),
+    (result) => {
+      // console.log("Progress changed", result);
+      if (result.isSeeking === false) {
+        runOnJS(updateTimes)(result.progress, result.max);
+      }
+    },
+    [updateTimes]
+  );
+
+  useEffect(() => {
+    if (item) {
+      progress.value = isVlc
+        ? ticksToMs(item?.UserData?.PlaybackPositionTicks)
+        : item?.UserData?.PlaybackPositionTicks || 0;
+      max.value = isVlc
+        ? ticksToMs(item.RunTimeTicks || 0)
+        : item.RunTimeTicks || 0;
+    }
+  }, [item, isVlc]);
+
+  const toggleControls = () => setShowControls(!showControls);
+
+  const handleSliderComplete = useCallback(
+    async (value: number) => {
+      isSeeking.value = false;
+      progress.value = value;
+
+      await seek(
+        Math.max(0, Math.floor(isVlc ? value : ticksToSeconds(value)))
+      );
+      if (wasPlayingRef.current === true) play();
+    },
+    [isVlc]
+  );
+
+  const [time, setTime] = useState({ hours: 0, minutes: 0, seconds: 0 });
+
+  const handleSliderChange = (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 });
+  };
+
+  const handleSliderStart = useCallback(() => {
+    if (showControls === false) return;
+
+    wasPlayingRef.current = isPlaying;
+    lastProgressRef.current = progress.value;
+
+    pause();
+    isSeeking.value = true;
+  }, [showControls, isPlaying]);
+
+  const handleSkipBackward = useCallback(async () => {
+    if (!settings?.rewindSkipTime) return;
+    wasPlayingRef.current = isPlaying;
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+    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);
+        await seek(newTime);
+        if (wasPlayingRef.current === true) play();
+      }
+    } catch (error) {
+      writeToLog("ERROR", "Error seeking video backwards", error);
+    }
+  }, [settings, isPlaying, isVlc]);
+
+  const handleSkipForward = useCallback(async () => {
+    if (!settings?.forwardSkipTime) return;
+    wasPlayingRef.current = isPlaying;
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+    try {
+      const curr = progress.value;
+      console.log(curr);
+      if (curr !== undefined) {
+        const newTime = isVlc
+          ? curr + secondsToMs(settings.forwardSkipTime)
+          : ticksToSeconds(curr) + settings.forwardSkipTime;
+        await seek(Math.max(0, newTime));
+        if (wasPlayingRef.current === true) play();
+      }
+    } catch (error) {
+      writeToLog("ERROR", "Error seeking video forwards", error);
+    }
+  }, [settings, isPlaying, isVlc]);
+
+  const toggleIgnoreSafeAreas = useCallback(() => {
+    setIgnoreSafeAreas((prev) => !prev);
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+  }, []);
+
+  return (
+    <ControlProvider
+      item={item}
+      mediaSource={mediaSource}
+      isVideoLoaded={isVideoLoaded}
+    >
+      <SafeAreaView
+        style={{
+          flex: 1,
+          position: "absolute",
+          top: insets.top,
+          left: insets.left,
+          right: insets.right,
+          bottom: insets.bottom,
+        }}
+      >
+        <VideoProvider
+          getAudioTracks={getAudioTracks}
+          getSubtitleTracks={getSubtitleTracks}
+          setAudioTrack={setAudioTrack}
+          setSubtitleTrack={setSubtitleTrack}
+          setSubtitleURL={setSubtitleURL}
+        >
+          {!mediaSource?.TranscodingUrl ? (
+            <DropdownViewDirect showControls={showControls} />
+          ) : (
+            <DropdownViewTranscoding showControls={showControls} />
+          )}
+        </VideoProvider>
+
+        <View
+          style={[
+            {
+              position: "absolute",
+              bottom: 97,
+            },
+          ]}
+          className={`z-10 p-4
+            ${showSkipButton ? "opacity-100" : "opacity-0"}
+          `}
+        >
+          <TouchableOpacity
+            onPress={skipIntro}
+            className="bg-purple-600 rounded-full px-2.5 py-2 font-semibold"
+          >
+            <Text className="text-white">Skip Intro</Text>
+          </TouchableOpacity>
+        </View>
+
+        <View
+          style={{
+            position: "absolute",
+            bottom: 94,
+            height: 70,
+          }}
+          pointerEvents={showSkipCreditButton ? "auto" : "none"}
+          className={`z-10 p-4 ${
+            showSkipCreditButton ? "opacity-100" : "opacity-0"
+          }`}
+        >
+          <TouchableOpacity
+            onPress={skipCredit}
+            className="bg-purple-600 rounded-full px-2.5 py-2 font-semibold"
+          >
+            <Text className="text-white">Skip Credits</Text>
+          </TouchableOpacity>
+        </View>
+
+        <Pressable
+          onPressIn={() => {
+            toggleControls();
+          }}
+          style={{
+            position: "absolute",
+            width: Dimensions.get("window").width,
+            height: Dimensions.get("window").height,
+          }}
+        ></Pressable>
+
+        <View
+          style={[
+            {
+              position: "absolute",
+              top: 0,
+              right: 0,
+              opacity: showControls ? 1 : 0,
+            },
+          ]}
+          pointerEvents={showControls ? "auto" : "none"}
+          className={`flex flex-row items-center space-x-2 z-10 p-4 `}
+        >
+          {Platform.OS !== "ios" && (
+            <TouchableOpacity
+              onPress={toggleIgnoreSafeAreas}
+              className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"
+            >
+              <Ionicons
+                name={ignoreSafeAreas ? "contract-outline" : "expand"}
+                size={24}
+                color="white"
+              />
+            </TouchableOpacity>
+          )}
+          <TouchableOpacity
+            onPress={async () => {
+              if (stop) await stop();
+              router.back();
+            }}
+            className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"
+          >
+            <Ionicons name="close" size={24} color="white" />
+          </TouchableOpacity>
+        </View>
+
+        <View
+          style={[
+            {
+              position: "absolute",
+              right: 0,
+              left: 0,
+              bottom: 0,
+              opacity: showControls ? 1 : 0,
+            },
+          ]}
+          pointerEvents={showControls ? "auto" : "none"}
+          className={`flex flex-col p-4`}
+        >
+          <View className="shrink flex flex-col justify-center h-full mb-2">
+            <Text className="font-bold">{item?.Name}</Text>
+            {item?.Type === "Episode" && (
+              <Text className="opacity-50">{item.SeriesName}</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-col-reverse py-4 px-4 rounded-2xl items-center  bg-neutral-800`}
+          >
+            <View className="flex flex-row items-center space-x-4">
+              <TouchableOpacity
+                style={{
+                  opacity: !previousItem ? 0.5 : 1,
+                }}
+                onPress={goToPreviousItem}
+              >
+                <Ionicons name="play-skip-back" size={24} color="white" />
+              </TouchableOpacity>
+              <TouchableOpacity onPress={handleSkipBackward}>
+                <Ionicons
+                  name="refresh-outline"
+                  size={26}
+                  color="white"
+                  style={{
+                    transform: [{ scaleY: -1 }, { rotate: "180deg" }],
+                  }}
+                />
+              </TouchableOpacity>
+              <TouchableOpacity
+                onPress={() => {
+                  togglePlay(progress.value);
+                }}
+              >
+                <Ionicons
+                  name={isPlaying ? "pause" : "play"}
+                  size={30}
+                  color="white"
+                />
+              </TouchableOpacity>
+              <TouchableOpacity onPress={handleSkipForward}>
+                <Ionicons name="refresh-outline" size={26} color="white" />
+              </TouchableOpacity>
+              <TouchableOpacity
+                style={{
+                  opacity: !nextItem ? 0.5 : 1,
+                }}
+                onPress={goToNextItem}
+              >
+                <Ionicons name="play-skip-forward" size={24} color="white" />
+              </TouchableOpacity>
+            </View>
+            <View className={`flex flex-col w-full shrink`}>
+              <Slider
+                theme={{
+                  maximumTrackTintColor: "rgba(255,255,255,0.2)",
+                  minimumTrackTintColor: "#fff",
+                  cacheTrackTintColor: "rgba(255,255,255,0.3)",
+                  bubbleBackgroundColor: "#fff",
+                  bubbleTextColor: "#000",
+                  heartbeatColor: "#999",
+                }}
+                cache={cacheProgress}
+                onSlidingStart={handleSliderStart}
+                onSlidingComplete={handleSliderComplete}
+                onValueChange={handleSliderChange}
+                containerStyle={{
+                  borderRadius: 100,
+                }}
+                renderBubble={() => {
+                  if (!trickPlayUrl || !trickplayInfo) {
+                    return null;
+                  }
+                  const { x, y, url } = trickPlayUrl;
+
+                  const tileWidth = 150;
+                  const tileHeight = 150 / trickplayInfo.aspectRatio!;
+                  return (
+                    <View
+                      style={{
+                        position: "absolute",
+                        bottom: 0,
+                        left: 0,
+                        width: tileWidth,
+                        height: tileHeight,
+                        marginLeft: -tileWidth / 4,
+                        marginTop: -tileHeight / 4 - 60,
+                        zIndex: 10,
+                      }}
+                      className=" bg-neutral-800 overflow-hidden"
+                    >
+                      <Image
+                        cachePolicy={"memory-disk"}
+                        style={{
+                          width: 150 * trickplayInfo?.data.TileWidth!,
+                          height:
+                            (150 / trickplayInfo.aspectRatio!) *
+                            trickplayInfo?.data.TileHeight!,
+                          transform: [
+                            { translateX: -x * tileWidth },
+                            { translateY: -y * tileHeight },
+                          ],
+                        }}
+                        source={{ uri: url }}
+                        contentFit="cover"
+                      />
+                      <Text
+                        style={{
+                          position: "absolute",
+                          bottom: 5,
+                          left: 5,
+                          color: "white",
+                          backgroundColor: "rgba(0, 0, 0, 0.5)",
+                          padding: 5,
+                          borderRadius: 5,
+                        }}
+                      >
+                        {`${time.hours > 0 ? `${time.hours}:` : ""}${
+                          time.minutes < 10 ? `0${time.minutes}` : time.minutes
+                        }:${
+                          time.seconds < 10 ? `0${time.seconds}` : time.seconds
+                        }`}
+                      </Text>
+                    </View>
+                  );
+                }}
+                sliderHeight={10}
+                thumbWidth={0}
+                progress={progress}
+                minimumValue={min}
+                maximumValue={max}
+              />
+              <View className="flex flex-row items-center justify-between mt-0.5">
+                <Text className="text-[12px] text-neutral-400">
+                  {formatTimeString(currentTime, isVlc ? "ms" : "s")}
+                </Text>
+                <Text className="text-[12px] text-neutral-400">
+                  -{formatTimeString(remainingTime, isVlc ? "ms" : "s")}
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+      </SafeAreaView>
+    </ControlProvider>
+  );
+};

components/video-player/controls/SliderScrubbter.tsx

@@ -0,0 +1,144 @@
+import { useTrickplay } from '@/hooks/useTrickplay';
+import { formatTimeString, msToTicks, ticksToSeconds } from '@/utils/time';
+import React, { useRef, useState } from 'react';
+import { View, Text } from 'react-native';
+import { Image } from "expo-image";
+import { Slider } from "react-native-awesome-slider";
+import { SharedValue, useSharedValue } from 'react-native-reanimated';
+import { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
+
+interface SliderScrubberProps {
+  cacheProgress: SharedValue<number>;
+  handleSliderStart: () => void;
+  handleSliderComplete: (value: number) => void;
+  progress: SharedValue<number>;
+  min: SharedValue<number>;
+  max: SharedValue<number>;
+  currentTime: number;
+  remainingTime: number;
+  item: BaseItemDto;
+}
+
+const SliderScrubber: React.FC<SliderScrubberProps> = ({
+  cacheProgress,
+  handleSliderStart,
+  handleSliderComplete,
+  progress,
+  min,
+  max,
+  currentTime,
+  remainingTime,
+  item,
+}) => {
+
+
+  const [time, setTime] = useState({ hours: 0, minutes: 0, seconds: 0 });
+  const { trickPlayUrl, calculateTrickplayUrl, trickplayInfo } = useTrickplay(
+    item,
+  );
+
+  const handleSliderChange = (value: number) => {
+    const progressInTicks = msToTicks(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 });
+  };
+
+  return (
+    <View className={`flex flex-col w-full shrink`}>
+      <Slider
+        theme={{
+          maximumTrackTintColor: "rgba(255,255,255,0.2)",
+          minimumTrackTintColor: "#fff",
+          cacheTrackTintColor: "rgba(255,255,255,0.3)",
+          bubbleBackgroundColor: "#fff",
+          bubbleTextColor: "#000",
+          heartbeatColor: "#999",
+        }}
+        cache={cacheProgress}
+        onSlidingStart={handleSliderStart}
+        onSlidingComplete={handleSliderComplete}
+        onValueChange={handleSliderChange}
+        containerStyle={{
+          borderRadius: 100,
+        }}
+        renderBubble={() => {
+          if (!trickPlayUrl || !trickplayInfo) {
+            return null;
+          }
+          const { x, y, url } = trickPlayUrl;
+
+          const tileWidth = 150;
+          const tileHeight = 150 / trickplayInfo.aspectRatio!;
+          return (
+            <View
+              style={{
+                position: "absolute",
+                bottom: 0,
+                left: 0,
+                width: tileWidth,
+                height: tileHeight,
+                marginLeft: -tileWidth / 4,
+                marginTop: -tileHeight / 4 - 60,
+                zIndex: 10,
+              }}
+              className=" bg-neutral-800 overflow-hidden"
+            >
+              <Image
+                cachePolicy={"memory-disk"}
+                style={{
+                  width: 150 * trickplayInfo?.data.TileWidth!,
+                  height:
+                    (150 / trickplayInfo.aspectRatio!) *
+                    trickplayInfo?.data.TileHeight!,
+                  transform: [
+                    { translateX: -x * tileWidth },
+                    { translateY: -y * tileHeight },
+                  ],
+                }}
+                source={{ uri: url }}
+                contentFit="cover"
+              />
+              <Text
+                style={{
+                  position: "absolute",
+                  bottom: 5,
+                  left: 5,
+                  color: "white",
+                  backgroundColor: "rgba(0, 0, 0, 0.5)",
+                  padding: 5,
+                  borderRadius: 5,
+                }}
+              >
+                {`${time.hours > 0 ? `${time.hours}:` : ""}${
+                  time.minutes < 10 ? `0${time.minutes}` : time.minutes
+                }:${
+                  time.seconds < 10 ? `0${time.seconds}` : time.seconds
+                }`}
+              </Text>
+            </View>
+          );
+        }}
+        sliderHeight={10}
+        thumbWidth={0}
+        progress={progress}
+        minimumValue={min}
+        maximumValue={max}
+      />
+      <View className="flex flex-row items-center justify-between mt-0.5">
+        <Text className="text-[12px] text-neutral-400">
+          {formatTimeString(currentTime, "ms")}
+        </Text>
+        <Text className="text-[12px] text-neutral-400">
+          -{formatTimeString(remainingTime, "ms")}
+        </Text>
+      </View>
+    </View>
+  );
+};
+
+export default SliderScrubber;

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

@@ -0,0 +1,34 @@
+import { TrackInfo } from '@/modules/vlc-player';
+import { BaseItemDto, MediaSourceInfo } from '@jellyfin/sdk/lib/generated-client';
+import React, { createContext, useContext, useState, ReactNode } from 'react';
+
+interface ControlContextProps {
+  item: BaseItemDto;
+  mediaSource: MediaSourceInfo | null | undefined;
+  isVideoLoaded: boolean | undefined;
+}
+
+const ControlContext = createContext<ControlContextProps | undefined>(undefined);
+
+interface ControlProviderProps {
+  children: ReactNode;
+  item: BaseItemDto;
+  mediaSource: MediaSourceInfo | null | undefined;
+  isVideoLoaded: boolean | undefined;
+}
+
+export const ControlProvider: React.FC<ControlProviderProps> = ({ children, item, mediaSource, isVideoLoaded }) => {
+  return (
+    <ControlContext.Provider value={{ item, mediaSource, isVideoLoaded }}>
+      {children}
+    </ControlContext.Provider>
+  );
+};
+
+export const useControlContext = () => {
+  const context = useContext(ControlContext);
+  if (context === undefined) {
+    throw new Error('useControlContext must be used within a ControlProvider');
+  }
+  return context;
+};

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

@@ -0,0 +1,98 @@
+import { TrackInfo } from "@/modules/vlc-player";
+import {
+  BaseItemDto,
+  MediaSourceInfo,
+} from "@jellyfin/sdk/lib/generated-client";
+import React, {
+  createContext,
+  useContext,
+  useState,
+  ReactNode,
+  useEffect,
+} from "react";
+import { useControlContext } from "./ControlContext";
+
+interface VideoContextProps {
+  audioTracks: TrackInfo[] | null;
+  subtitleTracks: TrackInfo[] | null;
+  setAudioTrack: ((index: number) => void) | undefined;
+  setSubtitleTrack: ((index: number) => void) | undefined;
+  setSubtitleURL: ((url: string, customName: string) => void) | undefined;
+}
+
+const VideoContext = createContext<VideoContextProps | undefined>(undefined);
+
+interface VideoProviderProps {
+  children: ReactNode;
+  getAudioTracks:
+    | (() => Promise<TrackInfo[] | null>)
+    | (() => TrackInfo[])
+    | undefined;
+  getSubtitleTracks:
+    | (() => Promise<TrackInfo[] | null>)
+    | (() => TrackInfo[])
+    | undefined;
+  setAudioTrack: ((index: number) => void) | undefined;
+  setSubtitleTrack: ((index: number) => void) | undefined;
+  setSubtitleURL: ((url: string, customName: string) => void) | undefined;
+}
+
+export const VideoProvider: React.FC<VideoProviderProps> = ({
+  children,
+  getSubtitleTracks,
+  getAudioTracks,
+  setSubtitleTrack,
+  setSubtitleURL,
+  setAudioTrack,
+}) => {
+  const [audioTracks, setAudioTracks] = useState<TrackInfo[] | null>(null);
+  const [subtitleTracks, setSubtitleTracks] = useState<TrackInfo[] | null>(
+    null
+  );
+
+  const ControlContext = useControlContext();
+  const isVideoLoaded = ControlContext?.isVideoLoaded;
+
+  useEffect(() => {
+    const fetchTracks = async () => {
+      if (
+        getSubtitleTracks &&
+        (subtitleTracks === null || subtitleTracks.length === 0)
+      ) {
+        const subtitles = await getSubtitleTracks();
+        console.log("Getting embeded subtitles...", subtitles);
+        setSubtitleTracks(subtitles);
+      }
+      if (
+        getAudioTracks &&
+        (audioTracks === null || audioTracks.length === 0)
+      ) {
+        const audio = await getAudioTracks();
+        setAudioTracks(audio);
+      }
+    };
+    fetchTracks();
+  }, [isVideoLoaded, getAudioTracks, getSubtitleTracks]);
+
+  return (
+    <VideoContext.Provider
+      value={{
+        audioTracks,
+        subtitleTracks,
+        setSubtitleTrack,
+        setSubtitleURL,
+        setAudioTrack,
+      }}
+    >
+      {children}
+    </VideoContext.Provider>
+  );
+};
+
+export const useVideoContext = () => {
+  const context = useContext(VideoContext);
+  if (context === undefined) {
+    throw new Error("useVideoContext must be used within a VideoProvider");
+  }
+  return context;
+};

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

@@ -0,0 +1,181 @@
+import React, { useMemo, useState } from "react";
+import { View, TouchableOpacity } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import * as DropdownMenu from "zeego/dropdown-menu";
+import { useControlContext } from "../contexts/ControlContext";
+import { useVideoContext } from "../contexts/VideoContext";
+import { EmbeddedSubtitle, ExternalSubtitle } from "../types";
+import { useAtomValue } from "jotai";
+import { apiAtom } from "@/providers/JellyfinProvider";
+import { useLocalSearchParams } from "expo-router";
+
+interface DropdownViewDirectProps {
+  showControls: boolean;
+  offline?: boolean; // used to disable external subs for downloads
+}
+
+const DropdownViewDirect: React.FC<DropdownViewDirectProps> = ({
+  showControls,
+  offline = false,
+}) => {
+  const api = useAtomValue(apiAtom);
+  const ControlContext = useControlContext();
+  const mediaSource = ControlContext?.mediaSource;
+  const item = ControlContext?.item;
+  const isVideoLoaded = ControlContext?.isVideoLoaded;
+
+  const videoContext = useVideoContext();
+  const {
+    subtitleTracks,
+    audioTracks,
+    setSubtitleURL,
+    setSubtitleTrack,
+    setAudioTrack,
+  } = videoContext;
+
+  const allSubtitleTracksForDirectPlay = useMemo(() => {
+    if (mediaSource?.TranscodingUrl) return null;
+    const embeddedSubs =
+      subtitleTracks
+        ?.map((s) => ({
+          name: s.name,
+          index: s.index,
+          deliveryUrl: undefined,
+        }))
+        .filter((sub) => !sub.name.endsWith("[External]")) || [];
+
+    const externalSubs =
+      mediaSource?.MediaStreams?.filter(
+        (stream) => stream.Type === "Subtitle" && !!stream.DeliveryUrl
+      ).map((s) => ({
+        name: s.DisplayTitle! + " [External]",
+        index: s.Index!,
+        deliveryUrl: s.DeliveryUrl,
+      })) || [];
+
+    // Combine embedded subs with external subs only if not offline
+    if (!offline) {
+      return [...embeddedSubs, ...externalSubs] as (
+        | EmbeddedSubtitle
+        | ExternalSubtitle
+      )[];
+    }
+    return embeddedSubs as EmbeddedSubtitle[];
+  }, [item, isVideoLoaded, subtitleTracks, mediaSource?.MediaStreams, offline]);
+
+  const { subtitleIndex, audioIndex } = useLocalSearchParams<{
+    itemId: string;
+    audioIndex: string;
+    subtitleIndex: string;
+    mediaSourceId: string;
+    bitrateValue: string;
+  }>();
+
+  const [selectedSubtitleIndex, setSelectedSubtitleIndex] = useState<Number>(
+    parseInt(subtitleIndex)
+  );
+  const [selectedAudioIndex, setSelectedAudioIndex] = useState<Number>(
+    parseInt(audioIndex)
+  );
+
+  return (
+    <View
+      style={{
+        position: "absolute",
+        zIndex: 1000,
+        opacity: showControls ? 1 : 0,
+      }}
+      className="p-4"
+    >
+      <DropdownMenu.Root>
+        <DropdownMenu.Trigger>
+          <TouchableOpacity className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2">
+            <Ionicons name="ellipsis-horizontal" size={24} color={"white"} />
+          </TouchableOpacity>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content
+          loop={true}
+          side="bottom"
+          align="start"
+          alignOffset={0}
+          avoidCollisions={true}
+          collisionPadding={8}
+          sideOffset={8}
+        >
+          <DropdownMenu.Sub>
+            <DropdownMenu.SubTrigger key="subtitle-trigger">
+              Subtitle
+            </DropdownMenu.SubTrigger>
+            <DropdownMenu.SubContent
+              alignOffset={-10}
+              avoidCollisions={true}
+              collisionPadding={0}
+              loop={true}
+              sideOffset={10}
+            >
+              {allSubtitleTracksForDirectPlay?.map((sub, idx: number) => (
+                <DropdownMenu.CheckboxItem
+                  key={`subtitle-item-${idx}`}
+                  value={selectedSubtitleIndex === sub.index}
+                  onValueChange={() => {
+                    if ("deliveryUrl" in sub && sub.deliveryUrl) {
+                      setSubtitleURL &&
+                        setSubtitleURL(
+                          api?.basePath + sub.deliveryUrl,
+                          sub.name
+                        );
+
+                      console.log(
+                        "Set external subtitle: ",
+                        api?.basePath + sub.deliveryUrl
+                      );
+                    } else {
+                      console.log("Set sub index: ", sub.index);
+                      setSubtitleTrack && setSubtitleTrack(sub.index);
+                    }
+
+                    setSelectedSubtitleIndex(sub.index);
+                    console.log("Subtitle: ", sub);
+                  }}
+                >
+                  <DropdownMenu.ItemTitle key={`subtitle-item-title-${idx}`}>
+                    {sub.name}
+                  </DropdownMenu.ItemTitle>
+                </DropdownMenu.CheckboxItem>
+              ))}
+            </DropdownMenu.SubContent>
+          </DropdownMenu.Sub>
+          <DropdownMenu.Sub>
+            <DropdownMenu.SubTrigger key="audio-trigger">
+              Audio
+            </DropdownMenu.SubTrigger>
+            <DropdownMenu.SubContent
+              alignOffset={-10}
+              avoidCollisions={true}
+              collisionPadding={0}
+              loop={true}
+              sideOffset={10}
+            >
+              {audioTracks?.map((track, idx: number) => (
+                <DropdownMenu.CheckboxItem
+                  key={`audio-item-${idx}`}
+                  value={selectedAudioIndex === track.index}
+                  onValueChange={() => {
+                    setSelectedAudioIndex(track.index);
+                    setAudioTrack && setAudioTrack(track.index);
+                  }}
+                >
+                  <DropdownMenu.ItemTitle key={`audio-item-title-${idx}`}>
+                    {track.name}
+                  </DropdownMenu.ItemTitle>
+                </DropdownMenu.CheckboxItem>
+              ))}
+            </DropdownMenu.SubContent>
+          </DropdownMenu.Sub>
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
+    </View>
+  );
+};
+
+export default DropdownViewDirect;

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

@@ -0,0 +1,272 @@
+import React, { useCallback, useMemo, useState } from "react";
+import { View, TouchableOpacity } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import * as DropdownMenu from "zeego/dropdown-menu";
+import { useControlContext } from "../contexts/ControlContext";
+import { useVideoContext } from "../contexts/VideoContext";
+import { TranscodedSubtitle } from "../types";
+import { useAtomValue } from "jotai";
+import { apiAtom } from "@/providers/JellyfinProvider";
+import { useLocalSearchParams, useRouter } from "expo-router";
+
+interface DropdownViewProps {
+  showControls: boolean;
+  offline?: boolean; // used to disable external subs for downloads
+}
+
+const DropdownView: React.FC<DropdownViewProps> = ({
+  showControls,
+  offline = false,
+}) => {
+  const router = useRouter();
+  const api = useAtomValue(apiAtom);
+  const ControlContext = useControlContext();
+  const mediaSource = ControlContext?.mediaSource;
+  const item = ControlContext?.item;
+  const isVideoLoaded = ControlContext?.isVideoLoaded;
+
+  const videoContext = useVideoContext();
+  const { subtitleTracks, setSubtitleTrack } = videoContext;
+
+  const { subtitleIndex, audioIndex, bitrateValue } = useLocalSearchParams<{
+    itemId: string;
+    audioIndex: string;
+    subtitleIndex: string;
+    mediaSourceId: string;
+    bitrateValue: string;
+  }>();
+
+  // Either its on a text subtitle or its on not on any subtitle therefore it should show all the embedded HLS subtitles.
+  const isOnTextSubtitle =
+    mediaSource?.MediaStreams?.find(
+      (x) => x.Index === parseInt(subtitleIndex) && x.IsTextSubtitleStream
+    ) || subtitleIndex === "-1";
+
+  const allSubs =
+    mediaSource?.MediaStreams?.filter((x) => x.Type === "Subtitle") ?? [];
+  const textBasedSubs = allSubs.filter((x) => x.IsTextSubtitleStream);
+
+  // This is used in the case where it is transcoding stream.
+  const chosenSubtitle = textBasedSubs.find(
+    (x) => x.Index === parseInt(subtitleIndex)
+  );
+
+  let initialSubtitleIndex = -1;
+  if (!isOnTextSubtitle) {
+    initialSubtitleIndex = parseInt(subtitleIndex);
+  } else if (chosenSubtitle) {
+    initialSubtitleIndex = textBasedSubs.indexOf(chosenSubtitle);
+  }
+
+  const [selectedSubtitleIndex, setSelectedSubtitleIndex] =
+    useState<number>(initialSubtitleIndex);
+  const [selectedAudioIndex, setSelectedAudioIndex] = useState<number>(
+    parseInt(audioIndex)
+  );
+
+  const allSubtitleTracksForTranscodingStream = useMemo(() => {
+    const disableSubtitle = {
+      name: "Disable",
+      index: -1,
+      IsTextSubtitleStream: true,
+    } as TranscodedSubtitle;
+    if (isOnTextSubtitle) {
+      const textSubtitles =
+        subtitleTracks?.map((s) => ({
+          name: s.name,
+          index: s.index,
+          IsTextSubtitleStream: true,
+        })) || [];
+
+      const imageSubtitles = allSubs
+        .filter((x) => !x.IsTextSubtitleStream)
+        .map(
+          (x) =>
+            ({
+              name: x.DisplayTitle!,
+              index: x.Index!,
+              IsTextSubtitleStream: x.IsTextSubtitleStream,
+            } as TranscodedSubtitle)
+        );
+
+      const textSubtitlesMap = new Map(textSubtitles.map((s) => [s.name, s]));
+      const imageSubtitlesMap = new Map(imageSubtitles.map((s) => [s.name, s]));
+
+      const sortedSubtitles = Array.from(
+        new Set(
+          allSubs
+            .map((sub) => {
+              const displayTitle = sub.DisplayTitle ?? "";
+              if (textSubtitlesMap.has(displayTitle)) {
+                return textSubtitlesMap.get(displayTitle);
+              }
+              if (imageSubtitlesMap.has(displayTitle)) {
+                return imageSubtitlesMap.get(displayTitle);
+              }
+              return null;
+            })
+            .filter(
+              (subtitle): subtitle is TranscodedSubtitle => subtitle !== null
+            )
+        )
+      );
+
+      return [disableSubtitle, ...sortedSubtitles];
+    }
+
+    const transcodedSubtitle: TranscodedSubtitle[] = allSubs.map((x) => ({
+      name: x.DisplayTitle!,
+      index: x.Index!,
+      IsTextSubtitleStream: x.IsTextSubtitleStream!,
+    }));
+
+    return [disableSubtitle, ...transcodedSubtitle];
+  }, [item, isVideoLoaded, subtitleTracks, mediaSource?.MediaStreams]);
+
+  const ChangeTranscodingSubtitle = useCallback(
+    (subtitleIndex: number) => {
+      const queryParams = new URLSearchParams({
+        itemId: item.Id ?? "", // Ensure itemId is a string
+        audioIndex: audioIndex?.toString() ?? "",
+        subtitleIndex: subtitleIndex?.toString() ?? "",
+        mediaSourceId: mediaSource?.Id ?? "", // Ensure mediaSourceId is a string
+        bitrateValue: bitrateValue,
+      }).toString();
+
+      // @ts-expect-error
+      router.replace(`player/transcoding-player?${queryParams}`);
+    },
+    [mediaSource]
+  );
+
+  // Audio tracks for transcoding streams.
+  const allAudio =
+    mediaSource?.MediaStreams?.filter((x) => x.Type === "Audio").map((x) => ({
+      name: x.DisplayTitle!,
+      index: x.Index!,
+    })) || [];
+  const ChangeTranscodingAudio = useCallback(
+    (audioIndex: number, currentSelectedSubtitleIndex: number) => {
+      let newSubtitleIndex: number;
+
+      if (!isOnTextSubtitle) {
+        newSubtitleIndex = parseInt(subtitleIndex);
+      } else if (
+        currentSelectedSubtitleIndex >= 0 &&
+        currentSelectedSubtitleIndex < textBasedSubs.length
+      ) {
+        console.log("setHere SubtitleIndex", currentSelectedSubtitleIndex);
+        newSubtitleIndex = textBasedSubs[currentSelectedSubtitleIndex].Index!;
+        console.log("newSubtitleIndex", newSubtitleIndex);
+      } else {
+        newSubtitleIndex = -1;
+      }
+      const queryParams = new URLSearchParams({
+        itemId: item.Id ?? "", // Ensure itemId is a string
+        audioIndex: audioIndex?.toString() ?? "",
+        subtitleIndex: newSubtitleIndex?.toString() ?? "",
+        mediaSourceId: mediaSource?.Id ?? "", // Ensure mediaSourceId is a string
+        bitrateValue: bitrateValue,
+      }).toString();
+
+      // @ts-expect-error
+      router.replace(`player/transcoding-player?${queryParams}`);
+    },
+    [mediaSource]
+  );
+
+  return (
+    <View
+      style={{
+        position: "absolute",
+        zIndex: 1000,
+        opacity: showControls ? 1 : 0,
+      }}
+      className="p-4"
+    >
+      <DropdownMenu.Root>
+        <DropdownMenu.Trigger>
+          <TouchableOpacity className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2">
+            <Ionicons name="ellipsis-horizontal" size={24} color={"white"} />
+          </TouchableOpacity>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content
+          loop={true}
+          side="bottom"
+          align="start"
+          alignOffset={0}
+          avoidCollisions={true}
+          collisionPadding={8}
+          sideOffset={8}
+        >
+          <DropdownMenu.Sub>
+            <DropdownMenu.SubTrigger key="subtitle-trigger">
+              Subtitle
+            </DropdownMenu.SubTrigger>
+            <DropdownMenu.SubContent
+              alignOffset={-10}
+              avoidCollisions={true}
+              collisionPadding={0}
+              loop={true}
+              sideOffset={10}
+            >
+              {allSubtitleTracksForTranscodingStream?.map(
+                (sub, idx: number) => (
+                  <DropdownMenu.CheckboxItem
+                    value={selectedSubtitleIndex === sub.index}
+                    key={`subtitle-item-${idx}`}
+                    onValueChange={() => {
+                      console.log("sub", sub);
+                      if (selectedSubtitleIndex === sub?.index) return;
+                      setSelectedSubtitleIndex(sub.index);
+                      if (sub.IsTextSubtitleStream && isOnTextSubtitle) {
+                        setSubtitleTrack && setSubtitleTrack(sub.index);
+                        return;
+                      }
+
+                      ChangeTranscodingSubtitle(sub.index);
+                    }}
+                  >
+                    <DropdownMenu.ItemTitle key={`subtitle-item-title-${idx}`}>
+                      {sub.name}
+                    </DropdownMenu.ItemTitle>
+                  </DropdownMenu.CheckboxItem>
+                )
+              )}
+            </DropdownMenu.SubContent>
+          </DropdownMenu.Sub>
+          <DropdownMenu.Sub>
+            <DropdownMenu.SubTrigger key="audio-trigger">
+              Audio
+            </DropdownMenu.SubTrigger>
+            <DropdownMenu.SubContent
+              alignOffset={-10}
+              avoidCollisions={true}
+              collisionPadding={0}
+              loop={true}
+              sideOffset={10}
+            >
+              {allAudio?.map((track, idx: number) => (
+                <DropdownMenu.CheckboxItem
+                  key={`audio-item-${idx}`}
+                  value={selectedAudioIndex === track.index}
+                  onValueChange={() => {
+                    if (selectedAudioIndex === track.index) return;
+                    setSelectedAudioIndex(track.index);
+                    ChangeTranscodingAudio(track.index, selectedSubtitleIndex);
+                  }}
+                >
+                  <DropdownMenu.ItemTitle key={`audio-item-title-${idx}`}>
+                    {track.name}
+                  </DropdownMenu.ItemTitle>
+                </DropdownMenu.CheckboxItem>
+              ))}
+            </DropdownMenu.SubContent>
+          </DropdownMenu.Sub>
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
+    </View>
+  );
+};
+
+export default DropdownView;

components/video-player/controls/types.ts

@@ -0,0 +1,19 @@
+type EmbeddedSubtitle = {
+  name: string;
+  index: number;
+};
+
+type ExternalSubtitle = {
+  name: string;
+  index: number;
+  isExternal: boolean;
+  deliveryUrl: string;
+};
+
+type TranscodedSubtitle = {
+  name: string;
+  index: number;
+  IsTextSubtitleStream: boolean;
+};
+
+export { EmbeddedSubtitle, ExternalSubtitle, TranscodedSubtitle };

components/vlc/VideoDebugInfo.tsx

@@ -0,0 +1,73 @@
+import {
+  TrackInfo,
+  VlcPlayerViewRef,
+} from "@/modules/vlc-player/src/VlcPlayer.types";
+import React, { useEffect, useState } from "react";
+import { TouchableOpacity, View, ViewProps } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Text } from "../common/Text";
+
+interface Props extends ViewProps {
+  playerRef: React.RefObject<VlcPlayerViewRef>;
+}
+
+export const VideoDebugInfo: React.FC<Props> = ({ playerRef, ...props }) => {
+  const [audioTracks, setAudioTracks] = useState<TrackInfo[] | null>(null);
+  const [subtitleTracks, setSubtitleTracks] = useState<TrackInfo[] | null>(
+    null
+  );
+
+  useEffect(() => {
+    const fetchTracks = async () => {
+      if (playerRef.current) {
+        const audio = await playerRef.current.getAudioTracks();
+        const subtitles = await playerRef.current.getSubtitleTracks();
+        setAudioTracks(audio);
+        setSubtitleTracks(subtitles);
+      }
+    };
+
+    fetchTracks();
+  }, [playerRef]);
+
+  const insets = useSafeAreaInsets();
+
+  return (
+    <View
+      style={{
+        position: "absolute",
+        top: insets.top,
+        left: insets.left + 8,
+        zIndex: 100,
+      }}
+      {...props}
+    >
+      <Text className="font-bold">Playback State:</Text>
+      <Text className="font-bold mt-2.5">Audio Tracks:</Text>
+      {audioTracks &&
+        audioTracks.map((track, index) => (
+          <Text key={index}>
+            {track.name} (Index: {track.index})
+          </Text>
+        ))}
+      <Text className="font-bold mt-2.5">Subtitle Tracks:</Text>
+      {subtitleTracks &&
+        subtitleTracks.map((track, index) => (
+          <Text key={index}>
+            {track.name} (Index: {track.index})
+          </Text>
+        ))}
+      <TouchableOpacity
+        className="mt-2.5 bg-blue-500 p-2 rounded"
+        onPress={() => {
+          if (playerRef.current) {
+            playerRef.current.getAudioTracks().then(setAudioTracks);
+            playerRef.current.getSubtitleTracks().then(setSubtitleTracks);
+          }
+        }}
+      >
+        <Text className="text-white text-center">Refresh Tracks</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};

eas.json

@@ -22,13 +22,13 @@
       }
     },
     "production": {
-      "channel": "0.18.0",
+      "channel": "0.21.0",
       "android": {
         "image": "latest"
       }
     },
     "production-apk": {
-      "channel": "0.18.0",
+      "channel": "0.21.0",
       "android": {
         "buildType": "apk",
         "image": "latest"

expo.js.original

@@ -1,56 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _configPlugins = require("@expo/config-plugins");
-const withAndroidEdgeToEdgeTheme = (config, props) => {
-  const themes = {
-    Material2: "Theme.EdgeToEdge.Material2",
-    Material3: "Theme.EdgeToEdge.Material3"
-  };
-  const ignoreList = new Set(["android:enforceNavigationBarContrast", "android:enforceStatusBarContrast", "android:fitsSystemWindows", "android:navigationBarColor", "android:statusBarColor", "android:windowDrawsSystemBarBackgrounds", "android:windowLayoutInDisplayCutoutMode", "android:windowLightNavigationBar", "android:windowLightStatusBar", "android:windowTranslucentNavigation", "android:windowTranslucentStatus"]);
-  return (0, _configPlugins.withAndroidStyles)(config, config => {
-    const {
-      androidStatusBar = {},
-      userInterfaceStyle = "light"
-    } = config;
-    const {
-      barStyle
-    } = androidStatusBar;
-    const {
-      android = {}
-    } = props;
-    const {
-      parentTheme = "Default"
-    } = android;
-    config.modResults.resources.style = config.modResults.resources.style?.map(style => {
-      if (style.$.name === "AppTheme") {
-        style.$.parent = themes[parentTheme] ?? "Theme.EdgeToEdge";
-        if (style.item != null) {
-          style.item = style.item.filter(item => !ignoreList.has(item.$.name));
-        }
-        if (barStyle != null) {
-          style.item.push({
-            $: {
-              name: "android:windowLightStatusBar"
-            },
-            _: String(barStyle === "dark-content")
-          });
-        } else if (userInterfaceStyle !== "automatic") {
-          style.item.push({
-            $: {
-              name: "android:windowLightStatusBar"
-            },
-            _: String(userInterfaceStyle === "light")
-          });
-        }
-      }
-      return style;
-    });
-    return config;
-  });
-};
-var _default = exports.default = (0, _configPlugins.createRunOncePlugin)(withAndroidEdgeToEdgeTheme, "react-native-edge-to-edge");
-//# sourceMappingURL=expo.js.map

hooks/useAdjacentEpisodes.ts

@@ -18,7 +18,6 @@ export const useAdjacentItems = ({ item }: AdjacentEpisodesProps) => {
       const parentId = item?.AlbumId || item?.ParentId;
       const indexNumber = item?.IndexNumber;
 
-      console.log("Getting previous item for " + indexNumber);
       if (
         !api ||
         !parentId ||
@@ -26,12 +25,6 @@ export const useAdjacentItems = ({ item }: AdjacentEpisodesProps) => {
         indexNumber === null ||
         indexNumber - 1 < 1
       ) {
-        console.log("No previous item", {
-          itemIndex: indexNumber,
-          itemId: item?.Id,
-          parentId: parentId,
-          indexNumber: indexNumber,
-        });
         return null;
       }
 

hooks/useCreditSkipper.ts

@@ -4,6 +4,7 @@ import { useAtom } from "jotai";
 import { apiAtom } from "@/providers/JellyfinProvider";
 import { getAuthHeaders } from "@/utils/jellyfin/jellyfin";
 import { writeToLog } from "@/utils/log";
+import { msToSeconds, secondsToMs } from "@/utils/time";
 
 interface CreditTimestamps {
   Introduction: {
@@ -21,16 +22,29 @@ interface CreditTimestamps {
 export const useCreditSkipper = (
   itemId: string | undefined,
   currentTime: number,
-  videoRef: React.RefObject<any>
+  seek: (time: number) => void,
+  play: () => void,
+  isVlc: boolean = false
 ) => {
   const [api] = useAtom(apiAtom);
   const [showSkipCreditButton, setShowSkipCreditButton] = useState(false);
 
+  if (isVlc) {
+    currentTime = msToSeconds(currentTime);
+  }
+
+  const wrappedSeek = (seconds: number) => {
+    if (isVlc) {
+      seek(secondsToMs(seconds));
+      return;
+    }
+    seek(seconds);
+  };
+
   const { data: creditTimestamps } = useQuery<CreditTimestamps | null>({
     queryKey: ["creditTimestamps", itemId],
     queryFn: async () => {
       if (!itemId) {
-        console.log("No item id");
         return null;
       }
 
@@ -61,17 +75,17 @@ export const useCreditSkipper = (
   }, [creditTimestamps, currentTime]);
 
   const skipCredit = useCallback(() => {
-    console.log("skipCredits");
-    if (!creditTimestamps || !videoRef.current) return;
+    if (!creditTimestamps) return;
+    console.log(`Skipping credits to ${creditTimestamps.Credits.End}`);
     try {
-      videoRef.current.seek(creditTimestamps.Credits.End);
+      wrappedSeek(creditTimestamps.Credits.End);
       setTimeout(() => {
-        videoRef.current?.resume();
+        play();
       }, 200);
     } catch (error) {
       writeToLog("ERROR", "Error skipping intro", error);
     }
-  }, [creditTimestamps, videoRef]);
+  }, [creditTimestamps]);
 
   return { showSkipCreditButton, skipCredit };
 };

hooks/useDefaultPlaySettings.ts

@@ -0,0 +1,54 @@
+import { Bitrate, BITRATES } from "@/components/BitrateSelector";
+import { Settings } from "@/utils/atoms/settings";
+import {
+  BaseItemDto,
+  MediaSourceInfo,
+} from "@jellyfin/sdk/lib/generated-client";
+import { useMemo } from "react";
+
+const useDefaultPlaySettings = (
+  item: BaseItemDto,
+  settings: Settings | null
+) => {
+  const playSettings = useMemo(() => {
+    // 1. Get first media source
+    const mediaSource = item.MediaSources?.[0];
+
+    // 2. Get default or preferred audio
+    const defaultAudioIndex = mediaSource?.DefaultAudioStreamIndex;
+    const preferedAudioIndex = mediaSource?.MediaStreams?.find(
+      (x) => x.Language === settings?.defaultAudioLanguage
+    )?.Index;
+    const firstAudioIndex = mediaSource?.MediaStreams?.find(
+      (x) => x.Type === "Audio"
+    )?.Index;
+
+    // 3. Get default or preferred subtitle
+    const preferedSubtitleIndex = mediaSource?.MediaStreams?.find(
+      (x) => x.Language === settings?.defaultSubtitleLanguage?.value
+    )?.Index;
+    const defaultSubtitleIndex = mediaSource?.MediaStreams?.find(
+      (stream) => stream.Type === "Subtitle" && stream.IsDefault
+    )?.Index;
+
+    // 4. Get default bitrate
+    const bitrate = BITRATES[0];
+
+    return {
+      defaultAudioIndex:
+        preferedAudioIndex || defaultAudioIndex || firstAudioIndex || undefined,
+      defaultSubtitleIndex:
+        preferedSubtitleIndex || defaultSubtitleIndex || undefined,
+      defaultMediaSource: mediaSource || undefined,
+      defaultBitrate: bitrate || undefined,
+    };
+  }, [
+    item.MediaSources,
+    settings?.defaultAudioLanguage,
+    settings?.defaultSubtitleLanguage,
+  ]);
+
+  return playSettings;
+};
+
+export default useDefaultPlaySettings;

hooks/useDownloadedFileOpener.ts

@@ -1,5 +1,3 @@
-// hooks/useFileOpener.ts
-
 import { usePlaySettings } from "@/providers/PlaySettingsProvider";
 import { writeToLog } from "@/utils/log";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
@@ -7,46 +5,44 @@ import * as FileSystem from "expo-file-system";
 import { useRouter } from "expo-router";
 import { useCallback } from "react";
 
-export const useFileOpener = () => {
+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) => {
-    const directory = FileSystem.documentDirectory;
-
-    if (!directory) {
-      throw new Error("Document directory is not available");
-    }
-
-    if (!item.Id) {
-      throw new Error("Item ID is not available");
-    }
-
-    try {
-      const files = await FileSystem.readDirectoryAsync(directory);
-      for (let f of files) {
-        console.log(f);
+  const openFile = useCallback(
+    async (item: BaseItemDto) => {
+      try {
+        // @ts-expect-error
+        router.push("/player/direct-player?offline=true&itemId=" + item.Id);
+      } catch (error) {
+        writeToLog("ERROR", "Error opening file", error);
+        console.error("Error opening file:", error);
       }
-      const path = item.Id!;
-      const matchingFile = files.find((file) => file.startsWith(path));
-
-      if (!matchingFile) {
-        throw new Error(`No file found for item ${path}`);
-      }
-
-      const url = `${directory}${matchingFile}`;
-
-      setOfflineSettings({
-        item,
-      });
-      setPlayUrl(url);
-
-      router.push("/play-offline-video");
-    } catch (error) {
-      writeToLog("ERROR", "Error opening file", error);
-      console.error("Error opening file:", error);
-    }
-  }, []);
+    },
+    [setOfflineSettings, setPlayUrl, router]
+  );
 
   return { openFile };
 };

hooks/useImageColors.ts

@@ -54,7 +54,6 @@ export const useImageColors = ({
 
       // If colors are cached, use them and exit
       if (_primary && _text) {
-        console.info("useImageColors ~ Using cached colors for performance.");
         setPrimaryColor({
           primary: _primary,
           text: _text,

hooks/useImageStorage.ts

@@ -1,14 +1,11 @@
-import { useState, useCallback } from "react";
-import AsyncStorage from "@react-native-async-storage/async-storage";
-import * as FileSystem from "expo-file-system";
 import { storage } from "@/utils/mmkv";
+import { useCallback } from "react";
 
 const useImageStorage = () => {
   const saveBase64Image = useCallback(async (base64: string, key: string) => {
     try {
-      // Save the base64 string to AsyncStorage
+      // Save the base64 string to storage
       storage.set(key, base64);
-      console.log("Image saved successfully");
     } catch (error) {
       console.error("Error saving image:", error);
       throw error;
@@ -70,7 +67,7 @@ const useImageStorage = () => {
 
   const loadImage = useCallback(async (key: string) => {
     try {
-      // Retrieve the base64 string from AsyncStorage
+      // Retrieve the base64 string from storage
       const base64Image = storage.getString(key);
       if (base64Image !== null) {
         // Set the loaded image state

hooks/useIntroSkipper.ts

@@ -4,6 +4,7 @@ import { useAtom } from "jotai";
 import { apiAtom } from "@/providers/JellyfinProvider";
 import { getAuthHeaders } from "@/utils/jellyfin/jellyfin";
 import { writeToLog } from "@/utils/log";
+import { msToSeconds, secondsToMs } from "@/utils/time";
 
 interface IntroTimestamps {
   EpisodeId: string;
@@ -14,19 +15,36 @@ interface IntroTimestamps {
   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,
   currentTime: number,
-  videoRef: React.RefObject<any>
+  seek: (ticks: number) => void,
+  play: () => void,
+  isVlc: boolean = false
 ) => {
   const [api] = useAtom(apiAtom);
   const [showSkipButton, setShowSkipButton] = useState(false);
+  if (isVlc) {
+    currentTime = msToSeconds(currentTime);
+  }
+
+  const wrappedSeek = (seconds: number) => {
+    if (isVlc) {
+      seek(secondsToMs(seconds));
+      return;
+    }
+    seek(seconds);
+  };
 
   const { data: introTimestamps } = useQuery<IntroTimestamps | null>({
     queryKey: ["introTimestamps", itemId],
     queryFn: async () => {
       if (!itemId) {
-        console.log("No item id");
         return null;
       }
 
@@ -58,16 +76,16 @@ export const useIntroSkipper = (
 
   const skipIntro = useCallback(() => {
     console.log("skipIntro");
-    if (!introTimestamps || !videoRef.current) return;
+    if (!introTimestamps) return;
     try {
-      videoRef.current.seek(introTimestamps.IntroEnd);
+      wrappedSeek(introTimestamps.IntroEnd);
       setTimeout(() => {
-        videoRef.current?.resume();
+        play();
       }, 200);
     } catch (error) {
       writeToLog("ERROR", "Error skipping intro", error);
     }
-  }, [introTimestamps, videoRef]);
+  }, [introTimestamps]);
 
   return { showSkipButton, skipIntro };
 };

hooks/useOrientation.ts

@@ -24,5 +24,5 @@ export const useOrientation = () => {
     };
   }, []);
 
-  return { orientation };
+  return { orientation, setOrientation };
 };

hooks/useRemuxHlsToMp4.ts

@@ -1,18 +1,19 @@
-import { useCallback } from "react";
-import { useAtom, useAtomValue } from "jotai";
-import AsyncStorage from "@react-native-async-storage/async-storage";
-import * as FileSystem from "expo-file-system";
-import { FFmpegKit, FFmpegKitConfig } from "ffmpeg-kit-react-native";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { writeToLog } from "@/utils/log";
-import { useQueryClient } from "@tanstack/react-query";
-import { toast } from "sonner-native";
 import { useDownload } from "@/providers/DownloadProvider";
-import { useRouter } from "expo-router";
-import { JobStatus } from "@/utils/optimize-server";
-import useImageStorage from "./useImageStorage";
-import { getItemImage } from "@/utils/getItemImage";
 import { apiAtom } from "@/providers/JellyfinProvider";
+import { getItemImage } from "@/utils/getItemImage";
+import { writeToLog } from "@/utils/log";
+import {
+  BaseItemDto,
+  MediaSourceInfo,
+} from "@jellyfin/sdk/lib/generated-client/models";
+import { useQueryClient } from "@tanstack/react-query";
+import * as FileSystem from "expo-file-system";
+import { useRouter } from "expo-router";
+import { FFmpegKit, FFmpegKitConfig } from "ffmpeg-kit-react-native";
+import { useAtomValue } from "jotai";
+import { useCallback } from "react";
+import { toast } from "sonner-native";
+import useImageStorage from "./useImageStorage";
 
 /**
  * Custom hook for remuxing HLS to MP4 using FFmpeg.
@@ -21,23 +22,16 @@ import { apiAtom } from "@/providers/JellyfinProvider";
  * @param item - The BaseItemDto object representing the media item
  * @returns An object with remuxing-related functions
  */
-export const useRemuxHlsToMp4 = (item: BaseItemDto) => {
+export const useRemuxHlsToMp4 = () => {
   const api = useAtomValue(apiAtom);
   const queryClient = useQueryClient();
   const { saveDownloadedItemInfo, setProcesses } = useDownload();
   const router = useRouter();
-  const { loadImage, saveImage, image2Base64, saveBase64Image } =
-    useImageStorage();
-
-  if (!item.Id || !item.Name) {
-    writeToLog("ERROR", "useRemuxHlsToMp4 ~ missing arguments");
-    throw new Error("Item must have an Id and Name");
-  }
-
-  const output = `${FileSystem.documentDirectory}${item.Id}.mp4`;
+  const { saveImage } = useImageStorage();
 
   const startRemuxing = useCallback(
-    async (url: string) => {
+    async (item: BaseItemDto, url: string, mediaSource: MediaSourceInfo) => {
+      const output = `${FileSystem.documentDirectory}${item.Id}.mp4`;
       if (!api) throw new Error("API is not defined");
       if (!item.Id) throw new Error("Item must have an Id");
 
@@ -61,7 +55,7 @@ export const useRemuxHlsToMp4 = (item: BaseItemDto) => {
         },
       });
 
-      const command = `-y -loglevel quiet -thread_queue_size 512 -protocol_whitelist file,http,https,tcp,tls,crypto -multiple_requests 1 -tcp_nodelay 1 -fflags +genpts -i ${url} -c copy -bufsize 50M -max_muxing_queue_size 4096 ${output}`;
+      const command = `-y -thread_queue_size 512 -protocol_whitelist file,http,https,tcp,tls,crypto -multiple_requests 1 -tcp_nodelay 1 -fflags +genpts -i ${url} -map 0:v -map 0:a -c copy -bufsize 50M -max_muxing_queue_size 4096 ${output}`;
 
       writeToLog(
         "INFO",
@@ -75,13 +69,13 @@ export const useRemuxHlsToMp4 = (item: BaseItemDto) => {
             id: "",
             deviceId: "",
             inputUrl: "",
-            item,
-            itemId: item.Id,
+            item: item,
+            itemId: item.Id!,
             outputPath: "",
             progress: 0,
             status: "downloading",
             timestamp: new Date(),
-          } as JobStatus,
+          },
         ]);
 
         FFmpegKitConfig.enableStatisticsCallback((statistics) => {
@@ -117,29 +111,47 @@ export const useRemuxHlsToMp4 = (item: BaseItemDto) => {
           FFmpegKit.executeAsync(command, async (session) => {
             try {
               const returnCode = await session.getReturnCode();
+              const startTime = new Date();
 
+              let endTime;
               if (returnCode.isValueSuccess()) {
+                endTime = new Date();
+                writeToLog(
+                  "INFO",
+                  `useRemuxHlsToMp4 ~ remuxing completed successfully for item: ${
+                    item.Name
+                  }, start time: ${startTime.toISOString()}, end time: ${endTime.toISOString()}, duration: ${
+                    (endTime.getTime() - startTime.getTime()) / 1000
+                  }s`
+                );
                 if (!item) throw new Error("Item is undefined");
                 await saveDownloadedItemInfo(item);
                 toast.success("Download completed");
-                writeToLog(
-                  "INFO",
-                  `useRemuxHlsToMp4 ~ remuxing completed successfully for item: ${item.Name}`
-                );
                 await queryClient.invalidateQueries({
                   queryKey: ["downloadedItems"],
                 });
                 resolve();
               } else if (returnCode.isValueError()) {
+                endTime = new Date();
+                const allLogs = session.getAllLogsAsString();
                 writeToLog(
                   "ERROR",
-                  `useRemuxHlsToMp4 ~ remuxing failed for item: ${item.Name}`
+                  `useRemuxHlsToMp4 ~ remuxing failed for item: ${
+                    item.Name
+                  }, start time: ${startTime.toISOString()}, end time: ${endTime.toISOString()}, duration: ${
+                    (endTime.getTime() - startTime.getTime()) / 1000
+                  }s. All logs: ${allLogs}`
                 );
-                reject(new Error("Remuxing failed")); // Reject the promise on error
+                reject(new Error("Remuxing failed"));
               } else if (returnCode.isValueCancel()) {
+                endTime = new Date();
                 writeToLog(
                   "INFO",
-                  `useRemuxHlsToMp4 ~ remuxing was canceled for item: ${item.Name}`
+                  `useRemuxHlsToMp4 ~ remuxing was canceled for item: ${
+                    item.Name
+                  }, start time: ${startTime.toISOString()}, end time: ${endTime.toISOString()}, duration: ${
+                    (endTime.getTime() - startTime.getTime()) / 1000
+                  }s`
                 );
                 resolve();
               }
@@ -147,16 +159,24 @@ export const useRemuxHlsToMp4 = (item: BaseItemDto) => {
               setProcesses((prev) => {
                 return prev.filter((process) => process.itemId !== item.Id);
               });
-            } catch (error) {
+            } catch (e) {
+              const error = e as Error;
+              const errorLog = `Error: ${error.message}, Stack: ${error.stack}`;
+              writeToLog(
+                "ERROR",
+                `useRemuxHlsToMp4 ~ Exception during remuxing for item: ${item.Name}, ${errorLog}`
+              );
               reject(error);
             }
           });
         });
-      } catch (error) {
+      } catch (e) {
+        const error = e as Error;
+        const errorLog = `Error: ${error.message}, Stack: ${error.stack}`;
         console.error("Failed to remux:", error);
         writeToLog(
           "ERROR",
-          `useRemuxHlsToMp4 ~ remuxing failed for item: ${item.Name}`
+          `useRemuxHlsToMp4 ~ remuxing failed for item: ${item.Name}, ${errorLog}`
         );
         setProcesses((prev) => {
           return prev.filter((process) => process.itemId !== item.Id);
@@ -164,15 +184,13 @@ export const useRemuxHlsToMp4 = (item: BaseItemDto) => {
         throw error; // Re-throw the error to propagate it to the caller
       }
     },
-    [output, item]
+    []
   );
 
   const cancelRemuxing = useCallback(() => {
     FFmpegKit.cancel();
-    setProcesses((prev) => {
-      return prev.filter((process) => process.itemId !== item.Id);
-    });
-  }, [item.Name]);
+    setProcesses([]);
+  }, []);
 
   return { startRemuxing, cancelRemuxing };
 };

hooks/useRevalidatePlaybackProgressCache.ts

@@ -0,0 +1,29 @@
+import { useQueryClient } from "@tanstack/react-query";
+
+/**
+ * useRevalidatePlaybackProgressCache invalidates queries related to playback progress.
+ */
+export function useInvalidatePlaybackProgressCache() {
+  const queryClient = useQueryClient();
+
+  const revalidate = async () => {
+    // List of all the queries to invalidate
+    const queriesToInvalidate = [
+      ["item"],
+      ["resumeItems"],
+      ["continueWatching"],
+      ["nextUp-all"],
+      ["nextUp"],
+      ["episodes"],
+      ["seasons"],
+      ["home"],
+    ];
+
+    // Invalidate each query
+    for (const queryKey of queriesToInvalidate) {
+      await queryClient.invalidateQueries({ queryKey });
+    }
+  };
+
+  return revalidate;
+}

hooks/useTrickplay.ts

@@ -1,6 +1,7 @@
 // hooks/useTrickplay.ts
 
 import { apiAtom } from "@/providers/JellyfinProvider";
+import { ticksToMs } from "@/utils/time";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
 import { useAtom } from "jotai";
 import { useCallback, useMemo, useRef, useState } from "react";
@@ -57,6 +58,7 @@ export const useTrickplay = (item: BaseItemDto, enabled = true) => {
       : null;
   }, [item, enabled]);
 
+  // Takes in ticks.
   const calculateTrickplayUrl = useCallback(
     (progress: number) => {
       if (!enabled) {
@@ -74,28 +76,33 @@ export const useTrickplay = (item: BaseItemDto, enabled = true) => {
       }
 
       const { data, resolution } = trickplayInfo;
-      const { Interval, TileWidth, TileHeight } = data;
+      const { Interval, TileWidth, TileHeight, Width, Height } = data;
 
-      if (!Interval || !TileWidth || !TileHeight || !resolution) {
+      if (
+        !Interval ||
+        !TileWidth ||
+        !TileHeight ||
+        !resolution ||
+        !Width ||
+        !Height
+      ) {
         throw new Error("Invalid trickplay data");
       }
 
-      const currentSecond = Math.max(0, Math.floor(progress / 10000000));
+      const currentTimeMs = Math.max(0, ticksToMs(progress));
+      const currentTile = Math.floor(currentTimeMs / Interval);
 
-      const cols = TileWidth;
-      const rows = TileHeight;
-      const imagesPerTile = cols * rows;
-      const imageIndex = Math.floor(currentSecond / (Interval / 1000));
-      const tileIndex = Math.floor(imageIndex / imagesPerTile);
+      const tileSize = TileWidth * TileHeight;
+      const tileOffset = currentTile % tileSize;
+      const index = Math.floor(currentTile / tileSize);
 
-      const positionInTile = imageIndex % imagesPerTile;
-      const rowInTile = Math.floor(positionInTile / cols);
-      const colInTile = positionInTile % cols;
+      const tileOffsetX = tileOffset % TileWidth;
+      const tileOffsetY = Math.floor(tileOffset / TileWidth);
 
       const newTrickPlayUrl = {
-        x: rowInTile,
-        y: colInTile,
-        url: `${api.basePath}/Videos/${item.Id}/Trickplay/${resolution}/${tileIndex}.jpg?api_key=${api.accessToken}`,
+        x: tileOffsetX,
+        y: tileOffsetY,
+        url: `${api.basePath}/Videos/${item.Id}/Trickplay/${resolution}/${index}.jpg?api_key=${api.accessToken}`,
       };
 
       setTrickPlayUrl(newTrickPlayUrl);

hooks/useWebsockets.ts

@@ -15,6 +15,7 @@ interface UseWebSocketProps {
   pauseVideo: () => void;
   playVideo: () => void;
   stopPlayback: () => void;
+  offline?: boolean;
 }
 
 export const useWebSocket = ({
@@ -22,6 +23,7 @@ export const useWebSocket = ({
   pauseVideo,
   playVideo,
   stopPlayback,
+  offline = false,
 }: UseWebSocketProps) => {
   const router = useRouter();
   const user = useAtomValue(userAtom);
@@ -38,7 +40,7 @@ export const useWebSocket = ({
   });
 
   useEffect(() => {
-    if (!deviceId || !api?.accessToken) return;
+    if (offline || !deviceId || !api?.accessToken) return;
 
     const protocol = api?.basePath.includes("https") ? "wss" : "ws";
 
@@ -80,10 +82,10 @@ export const useWebSocket = ({
       }
       newWebSocket.close();
     };
-  }, [api, deviceId, user]);
+  }, [api, deviceId, user, offline]);
 
   useEffect(() => {
-    if (!ws) return;
+    if (offline || !ws) return;
 
     ws.onmessage = (e) => {
       const json = JSON.parse(e.data);
@@ -106,7 +108,7 @@ export const useWebSocket = ({
         Alert.alert("Message from server: " + title, body);
       }
     };
-  }, [ws, stopPlayback, playVideo, pauseVideo, isPlaying, router]);
+  }, [ws, stopPlayback, playVideo, pauseVideo, isPlaying, router, offline]);
 
   return { isConnected };
 };

modules/vlc-player/android/.gradle/buildOutputCleanup/cache.properties

@@ -0,0 +1,2 @@
+#Sun Nov 17 18:25:45 AEDT 2024
+gradle.version=8.9

modules/vlc-player/android/build.gradle

@@ -0,0 +1,70 @@
+apply plugin: 'com.android.library'
+apply plugin: 'kotlin-android'
+apply plugin: 'kotlin-kapt'
+
+group = 'expo.modules.vlcplayer'
+version = '0.6.0'
+
+def expoModulesCorePlugin = new File(project(":expo-modules-core").projectDir.absolutePath, "ExpoModulesCorePlugin.gradle")
+apply from: expoModulesCorePlugin
+applyKotlinExpoModulesCorePlugin()
+useCoreDependencies()
+useExpoPublishing()
+
+// If you want to use the managed Android SDK versions from expo-modules-core, set this to true.
+// The Android SDK versions will be bumped from time to time in SDK releases and may introduce breaking changes in your module code.
+// Most of the time, you may like to manage the Android SDK versions yourself.
+def useManagedAndroidSdkVersions = false
+if (useManagedAndroidSdkVersions) {
+  useDefaultAndroidSdkVersions()
+} else {
+  buildscript {
+    repositories {
+      google()
+      mavenCentral()
+    }
+    dependencies {
+      classpath "com.android.tools.build:gradle:7.1.3"
+    }
+  }
+  project.android {
+    compileSdkVersion safeExtGet("compileSdkVersion", 34)
+    defaultConfig {
+      minSdkVersion safeExtGet("minSdkVersion", 21)
+      targetSdkVersion safeExtGet("targetSdkVersion", 34)
+    }
+  }
+}
+
+dependencies {
+  implementation 'org.videolan.android:libvlc-all:3.6.0-eap12'
+  implementation "org.jetbrains.kotlin:kotlin-stdlib:1.5.31"
+}
+
+android {
+  namespace "expo.modules.vlcplayer"
+  compileSdkVersion 34
+  defaultConfig {
+    minSdkVersion 21
+    targetSdkVersion 34
+    versionCode 1
+    versionName "0.6.0"
+  }
+  compileOptions {
+    sourceCompatibility JavaVersion.VERSION_17
+    targetCompatibility JavaVersion.VERSION_17
+  }
+  kotlinOptions {
+    jvmTarget = "17"
+  }
+  lintOptions {
+    abortOnError false
+  }
+}
+
+tasks.withType(org.jetbrains.kotlin.gradle.tasks.KotlinCompile).configureEach {
+  kotlinOptions {
+    freeCompilerArgs += ["-Xshow-kotlin-compiler-errors"]
+    jvmTarget = "17"
+  }
+}

modules/vlc-player/android/src/main/AndroidManifest.xml

@@ -0,0 +1,2 @@
+<manifest>
+</manifest>

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

@@ -0,0 +1,69 @@
+package expo.modules.vlcplayer
+
+import expo.modules.kotlin.modules.Module
+import expo.modules.kotlin.modules.ModuleDefinition
+
+class VlcPlayerModule : Module() {
+  override fun definition() = ModuleDefinition {
+    Name("VlcPlayer")
+
+    View(VlcPlayerView::class) {
+      Prop("source") { view: VlcPlayerView, source: Map<String, Any> ->
+        view.setSource(source)
+      }
+
+      Prop("paused") { view: VlcPlayerView, paused: Boolean ->
+        if (paused) {
+          view.pause()
+        } else {
+          view.play()
+        }
+      }
+
+      Events(
+        "onPlaybackStateChanged",
+        "onVideoStateChange",
+        "onVideoLoadStart",
+        "onVideoLoadEnd",
+        "onVideoProgress",
+        "onVideoError"
+      )
+
+      AsyncFunction("play") { view: VlcPlayerView ->
+        view.play()
+      }
+
+      AsyncFunction("pause") { view: VlcPlayerView ->
+        view.pause()
+      }
+
+      AsyncFunction("stop") { view: VlcPlayerView ->
+        view.stop()
+      }
+
+      AsyncFunction("seekTo") { view: VlcPlayerView, time: Int ->
+        view.seekTo(time)
+      }
+
+      AsyncFunction("setAudioTrack") { view: VlcPlayerView, trackIndex: Int ->
+        view.setAudioTrack(trackIndex)
+      }
+
+      AsyncFunction("getAudioTracks") { view: VlcPlayerView ->
+        view.getAudioTracks()
+      }
+
+      AsyncFunction("setSubtitleTrack") { view: VlcPlayerView, trackIndex: Int ->
+        view.setSubtitleTrack(trackIndex)
+      }
+
+      AsyncFunction("getSubtitleTracks") { view: VlcPlayerView ->
+        view.getSubtitleTracks()
+      }
+
+      AsyncFunction("setSubtitleURL") { view: VlcPlayerView, url: String, name: String ->
+        view.setSubtitleURL(url, name)
+      }
+    }
+  }
+}

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

@@ -0,0 +1,263 @@
+package expo.modules.vlcplayer
+
+import android.content.Context
+import android.util.Log
+import android.view.ViewGroup
+import android.widget.FrameLayout
+import androidx.lifecycle.LifecycleObserver
+import android.net.Uri
+import expo.modules.kotlin.AppContext
+import expo.modules.kotlin.views.ExpoView
+import expo.modules.kotlin.viewevent.EventDispatcher
+import org.videolan.libvlc.LibVLC
+import org.videolan.libvlc.Media
+import org.videolan.libvlc.interfaces.IMedia
+import org.videolan.libvlc.MediaPlayer
+import org.videolan.libvlc.util.VLCVideoLayout
+
+class VlcPlayerView(context: Context, appContext: AppContext) : ExpoView(context, appContext), LifecycleObserver, MediaPlayer.EventListener {
+
+    private var libVLC: LibVLC? = null
+    private var mediaPlayer: MediaPlayer? = null
+    private lateinit var videoLayout: VLCVideoLayout
+    private var isPaused: Boolean = false
+    private var lastReportedState: Int? = null
+    private var lastReportedIsPlaying: Boolean? = null
+    private var media : Media? = null
+
+    private val onVideoProgress by EventDispatcher()
+    private val onVideoStateChange by EventDispatcher()
+    private val onVideoLoadEnd by EventDispatcher()
+
+    private var startPosition: Int? = 0
+    private var isMediaReady: Boolean = false
+    private var externalTrack: Map<String, String>? = null
+
+    init {
+        setupView()
+    }
+
+    private fun setupView() {
+        Log.d("VlcPlayerView", "Setting up view")
+        setBackgroundColor(android.graphics.Color.WHITE)
+        videoLayout = VLCVideoLayout(context).apply {
+            layoutParams = LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT)
+        }
+        addView(videoLayout)
+        Log.d("VlcPlayerView", "View setup complete")
+    }
+
+    fun setSource(source: Map<String, Any>) {
+        val mediaOptions = source["mediaOptions"] as? Map<String, Any> ?: emptyMap()
+        val autoplay = source["autoplay"] as? Boolean ?: false
+        val isNetwork = source["isNetwork"] as? Boolean ?: false
+        externalTrack = source["externalTrack"] as? Map<String, String>
+        startPosition = (source["startPosition"] as? Double)?.toInt() ?: 0
+
+        val initOptions = source["initOptions"] as? MutableList<String> ?: mutableListOf()
+        initOptions.add("--start-time=$startPosition")
+
+
+        val uri = source["uri"] as? String
+
+        // Handle video load start event
+        // onVideoLoadStart?.invoke(mapOf("target" to reactTag ?: "null"))
+
+        libVLC = LibVLC(context, initOptions)
+        mediaPlayer = MediaPlayer(libVLC)
+        mediaPlayer?.attachViews(videoLayout, null, false, false)
+        mediaPlayer?.setEventListener(this)
+
+        Log.d("VlcPlayerView", "Loading network file: $uri")
+        media = Media(libVLC, Uri.parse(uri))
+        mediaPlayer?.media = media
+
+
+        Log.d("VlcPlayerView", "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")
+        // }
+
+
+        if (autoplay) {
+            Log.d("VlcPlayerView", "Playing...")
+            play()
+        }
+    }
+
+    fun play() {
+        mediaPlayer?.play()
+        isPaused = false
+    }
+
+    fun pause() {
+        mediaPlayer?.pause()
+        isPaused = true
+    }
+
+    fun stop() {
+        mediaPlayer?.stop()
+    }
+
+    fun seekTo(time: Int) {
+        mediaPlayer?.let { player ->
+            val wasPlaying = player.isPlaying
+            if (wasPlaying) {
+                player.pause()
+            }
+
+            val duration = player.length.toInt()
+            val seekTime = if (time > duration) duration - 1000 else time
+            player.time = seekTime.toLong()
+
+            if (wasPlaying) {
+                player.play()
+            }
+        }
+    }
+
+    fun setAudioTrack(trackIndex: Int) {
+        mediaPlayer?.setAudioTrack(trackIndex)
+    }
+
+    fun getAudioTracks(): List<Map<String, Any>>? {
+
+        println("getAudioTracks")
+        println(mediaPlayer?.getAudioTracks())
+        val trackDescriptions = mediaPlayer?.audioTracks ?: return null
+
+        return trackDescriptions.map { trackDescription ->
+            mapOf("name" to trackDescription.name, "index" to trackDescription.id)
+        }
+    }
+
+    fun setSubtitleTrack(trackIndex: Int) {
+        mediaPlayer?.setSpuTrack(trackIndex)
+    }
+
+    // fun getSubtitleTracks(): List<Map<String, Any>>? {
+    //     return mediaPlayer?.getSpuTracks()?.map { trackDescription ->
+    //         mapOf("name" to trackDescription.name, "index" to trackDescription.id)
+    //     }
+    // }
+
+    fun getSubtitleTracks(): List<Map<String, Any>>? {
+        val subtitleTracks = mediaPlayer?.spuTracks?.map { trackDescription ->
+            mapOf("name" to trackDescription.name, "index" to trackDescription.id)
+        }
+
+        // Debug statement to print the result
+        Log.d("VlcPlayerView", "Subtitle Tracks: $subtitleTracks")
+
+        return subtitleTracks
+    }
+
+    fun setSubtitleURL(subtitleURL: String, name: String) {
+        println("Setting subtitle URL: $subtitleURL, name: $name")
+        mediaPlayer?.addSlave(IMedia.Slave.Type.Subtitle, Uri.parse(subtitleURL), true)
+    }
+
+    override fun onDetachedFromWindow() {
+        println("onDetachedFromWindow")
+        super.onDetachedFromWindow()
+        mediaPlayer?.stop()
+
+        media?.release()
+        mediaPlayer?.release()
+        libVLC?.release()
+        mediaPlayer = null
+        media = null
+        libVLC = null
+    }
+
+    override fun onEvent(event: MediaPlayer.Event) {
+        when (event.type) {
+            MediaPlayer.Event.Playing,
+            MediaPlayer.Event.Paused,
+            MediaPlayer.Event.Stopped,
+            MediaPlayer.Event.Buffering,
+            MediaPlayer.Event.EndReached,
+            MediaPlayer.Event.EncounteredError -> updatePlayerState(event)
+            MediaPlayer.Event.TimeChanged -> updateVideoProgress()
+        }
+    }
+
+    private fun updatePlayerState(event: MediaPlayer.Event) {
+        val player = mediaPlayer ?: return
+        val currentState = event.type
+
+        val stateInfo = mutableMapOf<String, Any>(
+            "target" to "null", // Replace with actual target if needed
+            "currentTime" to player.time.toInt(),
+            "duration" to (player.media?.duration?.toInt() ?: 0),
+            "error" to false
+        )
+
+        when (currentState) {
+            MediaPlayer.Event.Playing -> {
+                stateInfo["isPlaying"] = true
+                stateInfo["isBuffering"] = false
+                stateInfo["state"] = "Playing"
+            }
+            MediaPlayer.Event.Paused -> {
+                stateInfo["isPlaying"] = false
+                stateInfo["state"] = "Paused"
+            }
+            MediaPlayer.Event.Buffering -> {
+                stateInfo["isBuffering"] = true
+                stateInfo["state"] = "Buffering"
+            }
+            MediaPlayer.Event.EncounteredError -> {
+                Log.e("VlcPlayerView", "player.state ~ error")
+                stateInfo["state"] = "Error"
+                onVideoLoadEnd(stateInfo);
+            }
+            MediaPlayer.Event.Opening -> {
+                Log.d("VlcPlayerView", "player.state ~ opening")
+                stateInfo["state"] = "Opening"
+            }
+        }
+
+
+        if (lastReportedState != currentState || lastReportedIsPlaying != player.isPlaying) {
+            lastReportedState = currentState
+            lastReportedIsPlaying = player.isPlaying
+            onVideoStateChange(stateInfo)
+        }
+    }
+
+
+    private fun updateVideoProgress() {
+        val player = mediaPlayer ?: return
+
+        val currentTimeMs = player.time.toInt()
+        val durationMs = player.media?.duration?.toInt() ?: 0
+
+        if (currentTimeMs >= 0 && currentTimeMs < durationMs) {
+            // Set subtitle URL if available
+            if (player.isPlaying && !isMediaReady) {
+                isMediaReady = true
+                externalTrack?.let {
+                    val name = it["name"]
+                    val deliveryUrl = it["DeliveryUrl"] ?: ""
+                    if (!name.isNullOrEmpty() && !deliveryUrl.isNullOrEmpty()) {
+                        setSubtitleURL(deliveryUrl, name)
+                    }
+                }
+            }
+            onVideoProgress(mapOf(
+                "currentTime" to currentTimeMs,
+                "duration" to durationMs
+            ));
+        }
+    }
+}

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

@@ -0,0 +1,9 @@
+{
+  "platforms": ["ios", "tvos", "android", "web"],
+  "ios": {
+    "modules": ["VlcPlayerModule"]
+  },
+  "android": {
+    "modules": ["expo.modules.vlcplayer.VlcPlayerModule"]
+  }
+}

modules/vlc-player/index.ts

@@ -0,0 +1,71 @@
+import {
+  NativeModulesProxy,
+  EventEmitter,
+  Subscription,
+} from "expo-modules-core";
+
+import VlcPlayerModule from "./src/VlcPlayerModule";
+import VlcPlayerView from "./src/VlcPlayerView";
+import {
+  PlaybackStatePayload,
+  ProgressUpdatePayload,
+  VideoLoadStartPayload,
+  VideoStateChangePayload,
+  VideoProgressPayload,
+  VlcPlayerSource,
+  TrackInfo,
+  ChapterInfo,
+  VlcPlayerViewProps,
+  VlcPlayerViewRef,
+} from "./src/VlcPlayer.types";
+
+const emitter = new EventEmitter(
+  VlcPlayerModule ?? NativeModulesProxy.VlcPlayer
+);
+
+export function addPlaybackStateListener(
+  listener: (event: PlaybackStatePayload) => void
+): Subscription {
+  return emitter.addListener<PlaybackStatePayload>(
+    "onPlaybackStateChanged",
+    listener
+  );
+}
+
+export function addVideoLoadStartListener(
+  listener: (event: VideoLoadStartPayload) => void
+): Subscription {
+  return emitter.addListener<VideoLoadStartPayload>(
+    "onVideoLoadStart",
+    listener
+  );
+}
+
+export function addVideoStateChangeListener(
+  listener: (event: VideoStateChangePayload) => void
+): Subscription {
+  return emitter.addListener<VideoStateChangePayload>(
+    "onVideoStateChange",
+    listener
+  );
+}
+
+export function addVideoProgressListener(
+  listener: (event: VideoProgressPayload) => void
+): Subscription {
+  return emitter.addListener<VideoProgressPayload>("onVideoProgress", listener);
+}
+
+export {
+  VlcPlayerView,
+  VlcPlayerViewProps,
+  VlcPlayerViewRef,
+  PlaybackStatePayload,
+  ProgressUpdatePayload,
+  VideoLoadStartPayload,
+  VideoStateChangePayload,
+  VideoProgressPayload,
+  VlcPlayerSource,
+  TrackInfo,
+  ChapterInfo,
+};

modules/vlc-player/ios/VlcPlayer.podspec

@@ -0,0 +1,22 @@
+Pod::Spec.new do |s|
+  s.name           = 'VlcPlayer'
+  s.version        = '1.0.0'
+  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.source         = { git: '' }
+  s.static_framework = true
+
+  s.dependency 'ExpoModulesCore'
+  s.dependency 'MobileVLCKit', '~> 3.6.1b1' 
+
+  # 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/ios/VlcPlayerModule.swift

@@ -0,0 +1,86 @@
+import ExpoModulesCore
+
+public class VlcPlayerModule: Module {
+    public func definition() -> ModuleDefinition {
+        Name("VlcPlayer")
+        View(VlcPlayerView.self) {
+            Prop("source") { (view: VlcPlayerView, source: [String: Any]) in
+                view.setSource(source)
+            }
+
+            Prop("paused") { (view: VlcPlayerView, paused: Bool) in
+                if paused {
+                    view.pause()
+                } else {
+                    view.play()
+                }
+            }
+
+            //            Prop("muted") { (view: VlcPlayerView, muted: Bool) in
+            //                view.setMuted(muted)
+            //            }
+
+            //            Prop("volume") { (view: VlcPlayerView, volume: Int) in
+            //                view.setVolume(volume)
+            //            }
+
+            //            Prop("videoAspectRatio") { (view: VlcPlayerView, ratio: String) in
+            //                view.setVideoAspectRatio(ratio)
+            //            }
+
+            Events(
+                "onPlaybackStateChanged",
+                "onVideoStateChange",
+                "onVideoLoadStart",
+                "onVideoLoadEnd",
+                "onVideoProgress",
+                "onVideoError"
+            )
+
+            AsyncFunction("play") { (view: VlcPlayerView) in
+                view.play()
+            }
+
+            AsyncFunction("pause") { (view: VlcPlayerView) in
+                view.pause()
+            }
+
+            AsyncFunction("stop") { (view: VlcPlayerView) in
+                view.stop()
+            }
+
+            AsyncFunction("seekTo") { (view: VlcPlayerView, time: Int32) in
+                view.seekTo(time)
+            }
+
+            AsyncFunction("setAudioTrack") { (view: VlcPlayerView, trackIndex: Int) in
+                view.setAudioTrack(trackIndex)
+            }
+
+            AsyncFunction("getAudioTracks") { (view: VlcPlayerView) -> [[String: Any]]? in
+                return view.getAudioTracks()
+            }
+
+            AsyncFunction("setSubtitleTrack") { (view: VlcPlayerView, trackIndex: Int) in
+                view.setSubtitleTrack(trackIndex)
+            }
+
+            AsyncFunction("getSubtitleTracks") { (view: VlcPlayerView) -> [[String: Any]]? in
+                return view.getSubtitleTracks()
+            }
+
+            //            AsyncFunction("setVideoCropGeometry") { (view: VlcPlayerView, geometry: String?) in
+            //                view.setVideoCropGeometry(geometry)
+            //            }
+
+            //            AsyncFunction("getVideoCropGeometry") { (view: VlcPlayerView) -> String? in
+            //                return view.getVideoCropGeometry()
+            //            }
+
+            AsyncFunction("setSubtitleURL") {
+                (view: VlcPlayerView, url: String, name: String) in
+                view.setSubtitleURL(url, name: name)
+            }
+        }
+    }
+}

modules/vlc-player/ios/VlcPlayerView.swift

@@ -0,0 +1,691 @@
+import ExpoModulesCore
+import MobileVLCKit
+import UIKit
+
+class VlcPlayerView: ExpoView {
+    private var mediaPlayer: VLCMediaPlayer?
+    private var videoView: UIView?
+    private var progressUpdateInterval: TimeInterval = 0.5
+    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 isMediaReady: Bool = false
+    private var externalTrack: [String: String]?
+
+    // 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(applicationWillEnterForeground),
+            name: UIApplication.willEnterForegroundNotification, object: nil)
+    }
+
+    // MARK: - Public Methods
+
+    @objc func play() {
+        DispatchQueue.main.async { [weak self] in
+            guard let self = self else { return }
+            self.mediaPlayer?.play()
+            self.isPaused = false
+            print("Play")
+        }
+    }
+
+    @objc func pause() {
+        DispatchQueue.main.async { [weak self] in
+            guard let self = self else { return }
+            self.mediaPlayer?.pause()
+            self.isPaused = true
+        }
+    }
+
+    @objc func seekTo(_ time: Int32) {
+        DispatchQueue.main.async { [weak self] in
+            guard let self = self, let player = self.mediaPlayer else { return }
+
+            let wasPlaying = player.isPlaying
+            if wasPlaying {
+                player.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)
+
+                // Wait for a short moment to ensure the seek has been processed
+                DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
+                    if wasPlaying {
+                        player.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 }
+
+            let mediaOptions = source["mediaOptions"] as? [String: Any] ?? [:]
+            self.externalTrack = source["externalTrack"] as? [String: String]
+            var initOptions = source["initOptions"] as? [Any] ?? []
+            startPosition = source["startPosition"] as? Int32 ?? 0
+            initOptions.append("--start-time=\(startPosition)")
+
+            let uri = source["uri"] as? String
+
+            let autoplay = source["autoplay"] as? Bool ?? false
+            let isNetwork = source["isNetwork"] as? Bool ?? false
+
+            guard let uri = uri, !uri.isEmpty else {
+                print("Error: Invalid or empty URI")
+                self.onVideoError?(["error": "Invalid or empty URI"])
+                return
+            }
+
+            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://") {
+                    if let url = URL(string: uri) {
+                        media = VLCMedia(url: url)
+                    } else {
+                        print("Error: Invalid local file URL")
+                        self.onVideoError?(["error": "Invalid local file URL"])
+                        return
+                    }
+                } else {
+                    media = VLCMedia(path: uri)
+                }
+            }
+
+            print("Debug: Media options: \(mediaOptions)")
+            media.addOptions(mediaOptions)
+
+            // Apply subtitle options
+            let subtitleTrackIndex = source["subtitleTrackIndex"] as? Int ?? -1
+            print("Debug: Subtitle track index from source: \(subtitleTrackIndex)")
+
+            if subtitleTrackIndex >= -1 {
+                self.setSubtitleTrack(subtitleTrackIndex)
+                print("Debug: Set subtitle track to index: \(subtitleTrackIndex)")
+            } else {
+                print("Debug: Subtitle track index is less than -1, not setting")
+            }
+
+            self.mediaPlayer?.media = media
+
+            if autoplay {
+                print("Playing...")
+                self.play()
+            }
+        }
+    }
+
+    // TODO
+    // @objc func setMuted(_ muted: Bool) {
+    //     DispatchQueue.main.async {
+    //         self.mediaPlayer?.audio?.isMuted = muted
+    //     }
+    // }
+
+    // TODO
+    // @objc func setVolume(_ volume: Int) {
+    //     DispatchQueue.main.async {
+    //         self.mediaPlayer?.audio?.volume = Int32(volume)
+    //     }
+    // }
+
+    // TODO
+    // @objc func setVideoAspectRatio(_ ratio: String) {
+    //     DispatchQueue.main.async {
+    //         ratio.withCString { cString in
+    //             self.mediaPlayer?.videoAspectRatio = UnsafeMutablePointer(mutating: cString)
+    //         }
+    //     }
+    // }
+
+    @objc func setAudioTrack(_ trackIndex: Int) {
+        DispatchQueue.main.async {
+            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 getAudioTracks(
+    //     _ resolve: @escaping RCTPromiseResolveBlock, reject: @escaping RCTPromiseRejectBlock
+    // ) {
+    //     DispatchQueue.global(qos: .userInitiated).async { [weak self] in
+    //         guard let self = self, let mediaPlayer = self.mediaPlayer else {
+    //             DispatchQueue.main.async {
+    //                 reject("ERROR", "Media player not available", nil)
+    //             }
+    //             return
+    //         }
+
+    //         guard let trackNames = mediaPlayer.audioTrackNames,
+    //             let trackIndexes = mediaPlayer.audioTrackIndexes
+    //         else {
+    //             DispatchQueue.main.async {
+    //                 reject("ERROR", "No audio tracks available", nil)
+    //             }
+    //             return
+    //         }
+
+    //         let tracks = zip(trackNames, trackIndexes).map { name, index in
+    //             return ["name": name, "index": index]
+    //         }
+
+    //         DispatchQueue.main.async {
+    //             resolve(tracks)
+    //         }
+    //     }
+    // }
+
+    @objc func setSubtitleTrack(_ trackIndex: Int) {
+        print("Debug: Attempting to set subtitle track to index: \(trackIndex)")
+        DispatchQueue.main.async {
+            if trackIndex == -1 {
+                print("Debug: Disabling subtitles")
+                // Disable subtitles
+                self.mediaPlayer?.currentVideoSubTitleIndex = -1
+            } else {
+                print("Debug: Setting subtitle track to index: \(trackIndex)")
+                // Set the subtitle track
+                self.mediaPlayer?.currentVideoSubTitleIndex = Int32(trackIndex)
+            }
+
+            // Print the result
+            if let currentIndex = self.mediaPlayer?.currentVideoSubTitleIndex {
+                print("Debug: Current subtitle track index after setting: \(currentIndex)")
+            } else {
+                print("Debug: Unable to retrieve current subtitle track index")
+            }
+        }
+    }
+
+    @objc func setSubtitleURL(_ subtitleURL: String, name: String) {
+        DispatchQueue.main.async { [weak self] in
+            guard let self = self, let url = URL(string: subtitleURL) else {
+                print("Error: Invalid subtitle URL")
+                return
+            }
+
+            let result = self.mediaPlayer?.addPlaybackSlave(url, type: .subtitle, enforce: true)
+            if let result = result {
+                let internalName = "Track \(self.customSubtitles.count + 1)"
+                print("Subtitle added with result: \(result) \(internalName)")
+                self.customSubtitles.append((internalName: internalName, originalName: name))
+            } else {
+                print("Failed to add subtitle")
+            }
+        }
+    }
+
+    @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
+    }
+
+    private func setSubtitleTrackByName(_ trackName: String) {
+        guard let mediaPlayer = self.mediaPlayer else { return }
+
+        // Get the subtitle tracks and their indexes
+        if let names = mediaPlayer.videoSubTitlesNames as? [String],
+            let indexes = mediaPlayer.videoSubTitlesIndexes as? [NSNumber]
+        {
+            for (index, name) in zip(indexes, names) {
+                if name.starts(with: trackName) {
+                    let trackIndex = index.intValue
+                    print("Track Index setting to: \(trackIndex)")
+                    setSubtitleTrack(trackIndex)
+                    return
+                }
+            }
+        }
+        print("Track not found for name: \(trackName)")
+    }
+
+    // @objc func getSubtitleTracks(
+    //     _ resolve: @escaping RCTPromiseResolveBlock, reject: @escaping RCTPromiseRejectBlock
+    // ) {
+    //     DispatchQueue.global(qos: .userInitiated).async { [weak self] in
+    //         guard let self = self, let mediaPlayer = self.mediaPlayer else {
+    //             DispatchQueue.main.async {
+    //                 reject("ERROR", "Media player not available", nil)
+    //             }
+    //             return
+    //         }
+
+    //         let count = mediaPlayer.numberOfSubtitlesTracks
+    //         guard count > 0 else {
+    //             DispatchQueue.main.async {
+    //                 reject("ERROR", "No subtitle tracks available", nil)
+    //             }
+    //             return
+    //         }
+
+    //         var tracks: [[String: Any]] = [["name": "Disabled", "index": -1]]
+
+    //         if let names = mediaPlayer.videoSubTitlesNames as? [String],
+    //             let indexes = mediaPlayer.videoSubTitlesIndexes as? [NSNumber]
+    //         {
+    //             for (index, name) in zip(indexes, names) {
+    //                 tracks.append(["name": name, "index": index.intValue])
+    //             }
+    //         }
+
+    //         DispatchQueue.main.async {
+    //             resolve(tracks)
+    //         }
+    //     }
+    // }
+
+    // TODO
+    // @objc func setSubtitleDelay(_ delay: Int) {
+    //     DispatchQueue.main.async {
+    //         self.mediaPlayer?.currentVideoSubTitleDelay = NSInteger(delay)
+    //     }
+    // }
+
+    // TODO
+    // @objc func setAudioDelay(_ delay: Int) {
+    //     DispatchQueue.main.async {
+    //         self.mediaPlayer?.currentAudioPlaybackDelay = NSInteger(delay)
+    //     }
+    // }
+
+    // TODO
+    // @objc func takeSnapshot(_ path: String, width: Int, height: Int) {
+    //     DispatchQueue.main.async { [weak self] in
+    //         guard let self = self else { return }
+    //         self.mediaPlayer?.saveVideoSnapshot(
+    //             at: path, withWidth: Int32(width), andHeight: Int32(height))
+    //     }
+    // }
+
+    // TODO
+    // @objc func setVideoCropGeometry(_ geometry: String?) {
+    //     DispatchQueue.main.async {
+    //         if let geometry = geometry, !geometry.isEmpty {
+    //             self.currentGeometryCString = geometry.cString(using: .utf8)
+    //             self.currentGeometryCString?.withUnsafeMutableBufferPointer { buffer in
+    //                 self.mediaPlayer?.videoCropGeometry = buffer.baseAddress
+    //             }
+    //         } else {
+    //             self.currentGeometryCString = nil
+    //             self.mediaPlayer?.videoCropGeometry = nil
+    //         }
+    //     }
+    // }
+
+    // TODO
+    // @objc func getVideoCropGeometry() -> String? {
+    //     guard let cString = mediaPlayer?.videoCropGeometry else {
+    //         return nil
+    //     }
+    //     return String(cString: cString)
+    // }
+
+    // TODO
+    // @objc func setRate(_ rate: Float) {
+    //     DispatchQueue.main.async {
+    //         self.mediaPlayer?.rate = rate
+    //     }
+    // }
+
+    // TODO
+    // @objc func nextChapter() {
+    //     DispatchQueue.main.async {
+    //         self.mediaPlayer?.nextChapter()
+    //     }
+    // }
+
+    // TODO
+    // @objc func previousChapter() {
+    //     DispatchQueue.main.async {
+    //         self.mediaPlayer?.previousChapter()
+    //     }
+    // }
+
+    // TODO
+    // @objc func getChapters() -> [[String: Any]]? {
+    //     guard let currentTitleIndex = mediaPlayer?.currentTitleIndex,
+    //         let chapters = mediaPlayer?.chapterDescriptions(ofTitle: currentTitleIndex)
+    //             as? [[String: Any]]
+    //     else {
+    //         return nil
+    //     }
+
+    //     return chapters.compactMap { chapter in
+    //         guard let name = chapter[VLCChapterDescriptionName] as? String,
+    //             let timeOffset = chapter[VLCChapterDescriptionTimeOffset] as? NSNumber,
+    //             let duration = chapter[VLCChapterDescriptionDuration] as? NSNumber
+    //         else {
+    //             return nil
+    //         }
+
+    //         return [
+    //             "name": name,
+    //             "timeOffset": timeOffset.doubleValue,
+    //             "duration": duration.doubleValue,
+    //         ]
+    //     }
+    // }
+
+    private var isStopping: Bool = false
+
+    @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() {
+        if !isPaused {
+            pause()
+        }
+    }
+
+    @objc private func applicationWillEnterForeground() {
+        if !isPaused {
+            play()
+        }
+    }
+
+    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 getSubtitleOptions() -> [String: Any] {
+        return [
+            // Text scaling (100 is default, increase for larger text)
+            "sub-text-scale": "105",
+
+            // Text color (RRGGBB format, 16777215 is white)
+            "freetype-color": "16777215",
+
+            // Outline thickness (reduced from 2 to 1 for less border)
+            "freetype-outline-thickness": "1",
+
+            // Outline color (RRGGBB format, 0 is black)
+            "freetype-outline-color": "0",
+
+            // Text opacity (0-255, 255 is fully opaque)
+            "freetype-opacity": "255",
+
+            // Shadow opacity (increased from 128 to 180 for more shadow)
+            "freetype-shadow-opacity": "180",
+
+            // Shadow offset (increased from 2 to 3 for more pronounced shadow)
+            "freetype-shadow-offset": "3",
+
+            // Text alignment (0: center, 1: left, 2: right)
+            "sub-text-alignment": "0",
+
+            // Vertical margin (from bottom of the screen, in pixels)
+            "sub-margin-bottom": "50",
+
+            // Background opacity (0-255, 0 for no background)
+            "freetype-background-opacity": "64",
+
+            // Background color (RRGGBB format)
+            "freetype-background-color": "0",
+        ]
+    }
+    // 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?
+
+    // MARK: - Deinitialization
+
+    deinit {
+        performStop()
+    }
+}
+
+extension VlcPlayerView: VLCMediaPlayerDelegate {
+    func mediaPlayerStateChanged(_ aNotification: Notification) {
+        DispatchQueue.main.async { [weak self] in
+            guard let self = self else { return }
+            self.updatePlayerState()
+        }
+    }
+
+    private func updatePlayerState() {
+        DispatchQueue.main.async { [weak self] in
+            guard let self = self, 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)
+            }
+        }
+    }
+
+    // func seekToStartTime() {
+    //     DispatchQueue.main.async { [weak self] in
+    //         guard let self = self, let player = self.mediaPlayer else { return }
+
+    //         if let startPosition = self.startPosition, startPosition > 0 {
+    //             print("Debug: Seeking to start position: \(startPosition)")
+    //             player.time = VLCTime(int: Int32(startPosition))
+
+    //             // Ensure the player continues playing after seeking
+    //             if !player.isPlaying {
+    //                 player.play()
+    //             }
+    //         }
+    //     }
+    // }
+
+    func mediaPlayerTimeChanged(_ aNotification: Notification) {
+        DispatchQueue.main.async { [weak self] in
+            self?.updateVideoProgress()
+        }
+    }
+
+    private func updateVideoProgress() {
+        DispatchQueue.main.async {
+            guard let player = self.mediaPlayer else { return }
+
+            let currentTimeMs = player.time.intValue
+            let durationMs = player.media?.length.intValue ?? 0
+
+            if currentTimeMs >= 0 && currentTimeMs < durationMs {
+                if player.isPlaying && !self.isMediaReady {
+                    self.isMediaReady = true
+                    // Set external track subtitle when starting.
+                    if let externalTrack = self.externalTrack {
+                        if let name = externalTrack["name"] as? String, !name.isEmpty {
+                            let deliveryUrl = externalTrack["DeliveryUrl"] as? String ?? ""
+                            self.setSubtitleURL(deliveryUrl, name: name)
+                        }
+                    }
+                }
+                self.onVideoProgress?([
+                    "currentTime": currentTimeMs,
+                    "duration": durationMs,
+                ])
+            }
+        }
+    }
+}
+
+extension VlcPlayerView: VLCMediaDelegate {
+    // func mediaMetaDataDidChange(_ aMedia: VLCMedia) {
+    //     // Implement if needed
+    // }
+
+    // func mediaDidFinishParsing(_ aMedia: VLCMedia) {
+    //     DispatchQueue.main.async {
+    //         let duration = aMedia.length.intValue
+    //         self.onVideoStateChange?(["type": "MediaParsed", "duration": duration])
+    //     }
+    // }
+}
+
+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/src/VlcPlayer.types.ts

@@ -0,0 +1,88 @@
+export type PlaybackStatePayload = {
+  nativeEvent: {
+    target: number;
+    state: "Opening" | "Buffering" | "Playing" | "Paused" | "Error";
+    currentTime: number;
+    duration: number;
+    isBuffering: boolean;
+    isPlaying: boolean;
+  };
+};
+
+export type ProgressUpdatePayload = {
+  nativeEvent: {
+    currentTime: number;
+    duration: number;
+    isPlaying: boolean;
+    isBuffering: boolean;
+  };
+};
+
+export type VideoLoadStartPayload = {
+  nativeEvent: {
+    target: number;
+  };
+};
+
+export type VideoStateChangePayload = PlaybackStatePayload;
+
+export type VideoProgressPayload = ProgressUpdatePayload;
+
+export type VlcPlayerSource = {
+  uri: string;
+  type?: string;
+  isNetwork?: boolean;
+  autoplay?: boolean;
+  externalTrack?: { name: string, DeliveryUrl: string };
+  initOptions?: any[];
+  mediaOptions?: { [key: string]: any };
+  startPosition?: number;
+};
+
+export type TrackInfo = {
+  name: string;
+  index: number;
+  language?: string;
+};
+
+export type ChapterInfo = {
+  name: string;
+  timeOffset: number;
+  duration: number;
+};
+
+export type VlcPlayerViewProps = {
+  source: VlcPlayerSource;
+  style?: Object;
+  progressUpdateInterval?: number;
+  paused?: boolean;
+  muted?: boolean;
+  volume?: number;
+  videoAspectRatio?: string;
+  onVideoProgress?: (event: ProgressUpdatePayload) => void;
+  onVideoStateChange?: (event: PlaybackStatePayload) => void;
+  onVideoLoadStart?: (event: VideoLoadStartPayload) => void;
+  onVideoLoadEnd?: (event: VideoLoadStartPayload) => void;
+  onVideoError?: (event: PlaybackStatePayload) => void;
+};
+
+export interface VlcPlayerViewRef {
+  play: () => Promise<void>;
+  pause: () => Promise<void>;
+  stop: () => Promise<void>;
+  seekTo: (time: number) => Promise<void>;
+  setAudioTrack: (trackIndex: number) => Promise<void>;
+  getAudioTracks: () => Promise<TrackInfo[] | null>;
+  setSubtitleTrack: (trackIndex: number) => Promise<void>;
+  getSubtitleTracks: () => Promise<TrackInfo[] | null>;
+  setSubtitleDelay: (delay: number) => Promise<void>;
+  setAudioDelay: (delay: number) => Promise<void>;
+  takeSnapshot: (path: string, width: number, height: number) => Promise<void>;
+  setRate: (rate: number) => Promise<void>;
+  nextChapter: () => Promise<void>;
+  previousChapter: () => Promise<void>;
+  getChapters: () => Promise<ChapterInfo[] | null>;
+  setVideoCropGeometry: (geometry: string | null) => Promise<void>;
+  getVideoCropGeometry: () => Promise<string | null>;
+  setSubtitleURL: (url: string, name: string) => Promise<void>;
+}

modules/vlc-player/src/VlcPlayerModule.ts

@@ -0,0 +1,5 @@
+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('VlcPlayer');

modules/vlc-player/src/VlcPlayerView.tsx

@@ -0,0 +1,130 @@
+import { requireNativeViewManager } from "expo-modules-core";
+import * as React from "react";
+
+import {
+  VlcPlayerViewProps,
+  VlcPlayerViewRef,
+  VlcPlayerSource,
+} from "./VlcPlayer.types";
+
+interface NativeViewRef extends VlcPlayerViewRef {
+  setNativeProps?: (props: Partial<VlcPlayerViewProps>) => void;
+}
+
+const NativeViewManager = requireNativeViewManager("VlcPlayer");
+
+// Create a forwarded ref version of the native view
+const NativeView = React.forwardRef<NativeViewRef, VlcPlayerViewProps>(
+  (props, ref) => <NativeViewManager {...props} ref={ref} />
+);
+
+const VlcPlayerView = React.forwardRef<VlcPlayerViewRef, VlcPlayerViewProps>(
+  (props, ref) => {
+    const nativeRef = React.useRef<NativeViewRef>(null);
+
+    React.useImperativeHandle(ref, () => ({
+      play: async () => {
+        await nativeRef.current?.play();
+      },
+      pause: async () => {
+        await nativeRef.current?.pause();
+      },
+      stop: async () => {
+        await nativeRef.current?.stop();
+      },
+      seekTo: async (time: number) => {
+        await nativeRef.current?.seekTo(time);
+      },
+      setAudioTrack: async (trackIndex: number) => {
+        await nativeRef.current?.setAudioTrack(trackIndex);
+      },
+      getAudioTracks: async () => {
+        const tracks = await nativeRef.current?.getAudioTracks();
+        return tracks ?? null;
+      },
+      setSubtitleTrack: async (trackIndex: number) => {
+        await nativeRef.current?.setSubtitleTrack(trackIndex);
+      },
+      getSubtitleTracks: async () => {
+        const tracks = await nativeRef.current?.getSubtitleTracks();
+        return tracks ?? null;
+      },
+      setSubtitleDelay: async (delay: number) => {
+        await nativeRef.current?.setSubtitleDelay(delay);
+      },
+      setAudioDelay: async (delay: number) => {
+        await nativeRef.current?.setAudioDelay(delay);
+      },
+      takeSnapshot: async (path: string, width: number, height: number) => {
+        await nativeRef.current?.takeSnapshot(path, width, height);
+      },
+      setRate: async (rate: number) => {
+        await nativeRef.current?.setRate(rate);
+      },
+      nextChapter: async () => {
+        await nativeRef.current?.nextChapter();
+      },
+      previousChapter: async () => {
+        await nativeRef.current?.previousChapter();
+      },
+      getChapters: async () => {
+        const chapters = await nativeRef.current?.getChapters();
+        return chapters ?? null;
+      },
+      setVideoCropGeometry: async (geometry: string | null) => {
+        await nativeRef.current?.setVideoCropGeometry(geometry);
+      },
+      getVideoCropGeometry: async () => {
+        const geometry = await nativeRef.current?.getVideoCropGeometry();
+        return geometry ?? null;
+      },
+      setSubtitleURL: async (url: string, name: string) => {
+        await nativeRef.current?.setSubtitleURL(url, name);
+      },
+    }));
+
+    const {
+      source,
+      style,
+      progressUpdateInterval = 500,
+      paused,
+      muted,
+      volume,
+      videoAspectRatio,
+      onVideoLoadStart,
+      onVideoStateChange,
+      onVideoProgress,
+      onVideoLoadEnd,
+      onVideoError,
+      ...otherProps
+    } = props;
+
+    const processedSource: VlcPlayerSource =
+      typeof source === "string" ? { uri: source } : source;
+
+    if (processedSource.startPosition !== undefined) {
+      processedSource.startPosition = Math.floor(processedSource.startPosition);
+    }
+
+    return (
+      <NativeView
+        {...otherProps}
+        ref={nativeRef}
+        source={processedSource}
+        style={[{ width: "100%", height: "100%" }, style]}
+        progressUpdateInterval={progressUpdateInterval}
+        paused={paused}
+        muted={muted}
+        volume={volume}
+        videoAspectRatio={videoAspectRatio}
+        onVideoLoadStart={onVideoLoadStart}
+        onVideoLoadEnd={onVideoLoadEnd}
+        onVideoStateChange={onVideoStateChange}
+        onVideoProgress={onVideoProgress}
+        onVideoError={onVideoError}
+      />
+    );
+  }
+);
+
+export default VlcPlayerView;

package.json

@@ -18,24 +18,25 @@
   "dependencies": {
     "@config-plugins/ffmpeg-kit-react-native": "^8.0.0",
     "@expo/react-native-action-sheet": "^4.1.0",
-    "@expo/vector-icons": "^14.0.3",
-    "@futurejj/react-native-visibility-sensor": "^1.3.4",
-    "@gorhom/bottom-sheet": "^4",
-    "@jellyfin/sdk": "^0.10.0",
+    "@expo/vector-icons": "^14.0.4",
+    "@futurejj/react-native-visibility-sensor": "^1.3.5",
+    "@gorhom/bottom-sheet": "^4.6.4",
+    "@jellyfin/sdk": "^0.11.0",
     "@kesha-antonov/react-native-background-downloader": "^3.2.1",
     "@react-native-async-storage/async-storage": "1.23.1",
     "@react-native-community/netinfo": "11.3.1",
-    "@react-native-menu/menu": "^1.1.3",
+    "@react-native-menu/menu": "^1.1.6",
     "@react-navigation/material-top-tabs": "^6.6.14",
-    "@react-navigation/native": "^6.0.2",
+    "@react-navigation/native": "^6.1.18",
     "@shopify/flash-list": "1.6.4",
-    "@tanstack/react-query": "^5.56.2",
-    "@types/lodash": "^4.17.9",
+    "@tanstack/react-query": "^5.59.20",
+    "@types/lodash": "^4.17.13",
     "@types/react-native-vector-icons": "^6.4.18",
     "@types/uuid": "^10.0.0",
     "add": "^2.0.6",
     "axios": "^1.7.7",
     "expo": "~51.0.39",
+    "expo-asset": "~10.0.10",
     "expo-background-fetch": "~12.0.1",
     "expo-blur": "~13.0.2",
     "expo-build-properties": "~0.12.5",
@@ -55,29 +56,30 @@
     "expo-sensors": "~13.0.9",
     "expo-splash-screen": "~0.27.7",
     "expo-status-bar": "~1.12.1",
-    "expo-system-ui": "~3.0.7",
+    "expo-system-ui": "^3.0.7",
     "expo-task-manager": "~11.8.2",
-    "expo-updates": "~0.25.26",
+    "expo-updates": "~0.25.27",
     "expo-web-browser": "~13.0.3",
     "ffmpeg-kit-react-native": "^6.0.2",
     "install": "^0.13.0",
-    "jotai": "^2.10.0",
+    "jotai": "^2.10.1",
     "lodash": "^4.17.21",
     "nativewind": "^2.0.11",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-native": "0.74.5",
-    "react-native-awesome-slider": "^2.5.3",
+    "react-native-awesome-slider": "^2.5.6",
     "react-native-bottom-tabs": "^0.4.0",
-    "react-native-circular-progress": "^1.4.0",
-    "react-native-compressor": "^1.8.25",
-    "react-native-edge-to-edge": "^1.1.0",
+    "react-native-circular-progress": "^1.4.1",
+    "react-native-compressor": "^1.9.0",
+    "react-native-device-info": "^14.0.1",
+    "react-native-edge-to-edge": "^1.1.1",
     "react-native-gesture-handler": "~2.16.1",
     "react-native-get-random-values": "^1.11.0",
     "react-native-google-cast": "^4.8.3",
     "react-native-image-colors": "^2.4.0",
-    "react-native-ios-context-menu": "^2.5.1",
-    "react-native-ios-utilities": "^4.4.5",
+    "react-native-ios-context-menu": "^2.5.2",
+    "react-native-ios-utilities": "^4.5.1",
     "react-native-mmkv": "^2.12.2",
     "react-native-pager-view": "6.3.0",
     "react-native-reanimated": "~3.10.1",
@@ -89,19 +91,19 @@
     "react-native-uitextview": "^1.4.0",
     "react-native-url-polyfill": "^2.0.0",
     "react-native-uuid": "^2.0.2",
-    "react-native-video": "^6.6.4",
-    "react-native-web": "~0.19.10",
+    "react-native-video": "^6.7.0",
+    "react-native-web": "~0.19.13",
     "sonner-native": "^0.14.2",
     "tailwindcss": "3.3.2",
-    "use-debounce": "^10.0.3",
+    "use-debounce": "^10.0.4",
     "uuid": "^10.0.0",
     "zeego": "^1.10.0",
     "zod": "^3.23.8"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.0",
-    "@types/jest": "^29.5.12",
-    "@types/react": "~18.2.45",
+    "@babel/core": "^7.26.0",
+    "@types/jest": "^29.5.14",
+    "@types/react": "~18.2.79",
     "@types/react-test-renderer": "^18.0.7",
     "jest": "^29.2.1",
     "jest-expo": "~51.0.4",

plugins/withChangeNativeAndroidTextToWhite.js

@@ -0,0 +1,30 @@
+const { readFileSync, writeFileSync } = require("fs");
+const { join } = require("path");
+const { withDangerousMod } = require("@expo/config-plugins");
+
+const withChangeNativeAndroidTextToWhite = (expoConfig) =>
+  withDangerousMod(expoConfig, [
+    "android",
+    (modConfig) => {
+      if (modConfig.modRequest.platform === "android") {
+        const stylesXmlPath = join(
+          modConfig.modRequest.platformProjectRoot,
+          "app",
+          "src",
+          "main",
+          "res",
+          "values",
+          "styles.xml"
+        );
+
+        let stylesXml = readFileSync(stylesXmlPath, "utf8");
+
+        stylesXml = stylesXml.replace(/@android:color\/black/g, "@android:color/white");
+
+        writeFileSync(stylesXmlPath, stylesXml, { encoding: "utf8" });
+      }
+      return modConfig;
+    },
+  ]);
+
+module.exports = withChangeNativeAndroidTextToWhite;

providers/DownloadProvider.tsx

@@ -4,17 +4,22 @@ import { writeToLog } from "@/utils/log";
 import {
   cancelAllJobs,
   cancelJobById,
+  deleteDownloadItemInfoFromDiskTmp,
   getAllJobsByDeviceId,
+  getDownloadItemInfoFromDiskTmp,
   JobStatus,
 } from "@/utils/optimize-server";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import {
+  BaseItemDto,
+  MediaSourceInfo,
+} from "@jellyfin/sdk/lib/generated-client/models";
 import {
   checkForExistingDownloads,
   completeHandler,
   download,
   setConfig,
 } from "@kesha-antonov/react-native-background-downloader";
-import AsyncStorage from "@react-native-async-storage/async-storage";
+import MMKV from "react-native-mmkv";
 import {
   focusManager,
   QueryClient,
@@ -40,6 +45,12 @@ import { apiAtom } from "./JellyfinProvider";
 import * as Notifications from "expo-notifications";
 import { getItemImage } from "@/utils/getItemImage";
 import useImageStorage from "@/hooks/useImageStorage";
+import { storage } from "@/utils/mmkv";
+
+export type DownloadedItem = {
+  item: Partial<BaseItemDto>;
+  mediaSource: MediaSourceInfo;
+};
 
 function onAppStateChange(status: AppStateStatus) {
   focusManager.setFocused(status === "active");
@@ -55,8 +66,7 @@ function useDownloadProvider() {
   const router = useRouter();
   const [api] = useAtom(apiAtom);
 
-  const { loadImage, saveImage, image2Base64, saveBase64Image } =
-    useImageStorage();
+  const { saveImage } = useImageStorage();
 
   const [processes, setProcesses] = useState<JobStatus[]>([]);
 
@@ -99,7 +109,6 @@ function useDownloadProvider() {
         url,
       });
 
-      // Local downloading processes that are still valid
       const downloadingProcesses = processes
         .filter((p) => p.status === "downloading")
         .filter((p) => jobs.some((j) => j.id === p.id));
@@ -110,8 +119,6 @@ function useDownloadProvider() {
 
       setProcesses([...updatedProcesses, ...downloadingProcesses]);
 
-      // Go though new jobs and compare them to old jobs
-      // if new job is now completed, start download.
       for (let job of jobs) {
         const process = processes.find((p) => p.id === job.id);
         if (
@@ -174,7 +181,7 @@ function useDownloadProvider() {
           url: settings?.optimizedVersionsServerUrl,
         });
       } catch (error) {
-        console.log(error);
+        console.error(error);
       }
     },
     [settings?.optimizedVersionsServerUrl, authHeader]
@@ -184,7 +191,6 @@ function useDownloadProvider() {
     async (process: JobStatus) => {
       if (!process?.item.Id || !authHeader) throw new Error("No item id");
 
-      console.log("[0] Setting process to downloading");
       setProcesses((prev) =>
         prev.map((p) =>
           p.id === process.id
@@ -239,7 +245,6 @@ function useDownloadProvider() {
         })
         .progress((data) => {
           const percent = (data.bytesDownloaded / data.bytesTotal) * 100;
-          console.log("Download progress:", percent);
           setProcesses((prev) =>
             prev.map((p) =>
               p.id === process.id
@@ -298,12 +303,14 @@ function useDownloadProvider() {
   );
 
   const startBackgroundDownload = useCallback(
-    async (url: string, item: BaseItemDto, fileExtension: string) => {
+    async (url: string, item: BaseItemDto, mediaSource: MediaSourceInfo) => {
       if (!api || !item.Id || !authHeader)
         throw new Error("startBackgroundDownload ~ Missing required params");
 
       try {
+        const fileExtension = mediaSource.TranscodingContainer;
         const deviceId = await getOrSetDeviceId();
+
         const itemImage = getItemImage({
           item,
           api,
@@ -311,7 +318,6 @@ function useDownloadProvider() {
           quality: 90,
           width: 500,
         });
-
         await saveImage(item.Id, itemImage?.uri);
 
         const response = await axios.post(
@@ -380,7 +386,7 @@ function useDownloadProvider() {
   const deleteAllFiles = async (): Promise<void> => {
     try {
       await deleteLocalFiles();
-      await removeDownloadedItemsFromStorage();
+      removeDownloadedItemsFromStorage();
       await cancelAllServerJobs();
       queryClient.invalidateQueries({ queryKey: ["downloadedItems"] });
       toast.success("All files, folders, and jobs deleted successfully");
@@ -410,14 +416,11 @@ function useDownloadProvider() {
     }
   };
 
-  const removeDownloadedItemsFromStorage = async (): Promise<void> => {
+  const removeDownloadedItemsFromStorage = (): void => {
     try {
-      await AsyncStorage.removeItem("downloadedItems");
+      storage.delete("downloadedItems");
     } catch (error) {
-      console.error(
-        "Failed to remove downloadedItems from AsyncStorage:",
-        error
-      );
+      console.error("Failed to remove downloadedItems from storage:", error);
       throw error;
     }
   };
@@ -467,36 +470,46 @@ function useDownloadProvider() {
         if (itemNameWithoutExtension === id) {
           const filePath = `${directory}${item}`;
           await FileSystem.deleteAsync(filePath, { idempotent: true });
-          console.log(`Successfully deleted file: ${item}`);
           break;
         }
       }
 
-      const downloadedItems = await AsyncStorage.getItem("downloadedItems");
+      const downloadedItems = storage.getString("downloadedItems");
       if (downloadedItems) {
-        let items = JSON.parse(downloadedItems);
-        items = items.filter((item: any) => item.Id !== id);
-        await AsyncStorage.setItem("downloadedItems", JSON.stringify(items));
+        let items = JSON.parse(downloadedItems) as DownloadedItem[];
+        items = items.filter((item) => item.item.Id !== id);
+        storage.set("downloadedItems", JSON.stringify(items));
       }
 
       queryClient.invalidateQueries({ queryKey: ["downloadedItems"] });
-
-      console.log(
-        `Successfully deleted file and AsyncStorage entry for ID ${id}`
-      );
     } catch (error) {
       console.error(
-        `Failed to delete file and AsyncStorage entry for ID ${id}:`,
+        `Failed to delete file and storage entry for ID ${id}:`,
         error
       );
     }
   };
 
-  async function getAllDownloadedItems(): Promise<BaseItemDto[]> {
+  function getDownloadedItem(itemId: string): DownloadedItem | null {
     try {
-      const downloadedItems = await AsyncStorage.getItem("downloadedItems");
+      const downloadedItems = storage.getString("downloadedItems");
       if (downloadedItems) {
-        return JSON.parse(downloadedItems) as BaseItemDto[];
+        const items: DownloadedItem[] = JSON.parse(downloadedItems);
+        const item = items.find((i) => i.item.Id === itemId);
+        return item || null;
+      }
+      return null;
+    } catch (error) {
+      console.error(`Failed to retrieve item with ID ${itemId}:`, error);
+      return null;
+    }
+  }
+
+  function getAllDownloadedItems(): DownloadedItem[] {
+    try {
+      const downloadedItems = storage.getString("downloadedItems");
+      if (downloadedItems) {
+        return JSON.parse(downloadedItems) as DownloadedItem[];
       } else {
         return [];
       }
@@ -506,25 +519,40 @@ function useDownloadProvider() {
     }
   }
 
-  async function saveDownloadedItemInfo(item: BaseItemDto) {
+  function saveDownloadedItemInfo(item: BaseItemDto) {
     try {
-      const downloadedItems = await AsyncStorage.getItem("downloadedItems");
-      let items: BaseItemDto[] = downloadedItems
+      const downloadedItems = storage.getString("downloadedItems");
+      let items: DownloadedItem[] = downloadedItems
         ? JSON.parse(downloadedItems)
         : [];
 
-      const existingItemIndex = items.findIndex((i) => i.Id === item.Id);
+      const existingItemIndex = items.findIndex((i) => i.item.Id === item.Id);
+
+      const data = getDownloadItemInfoFromDiskTmp(item.Id!);
+
+      if (!data?.mediaSource)
+        throw new Error(
+          "Media source not found in tmp storage. Did you forget to save it before starting download?"
+        );
+
+      const newItem = { item, mediaSource: data.mediaSource };
+
       if (existingItemIndex !== -1) {
-        items[existingItemIndex] = item;
+        items[existingItemIndex] = newItem;
       } else {
-        items.push(item);
+        items.push(newItem);
       }
 
-      await AsyncStorage.setItem("downloadedItems", JSON.stringify(items));
-      await queryClient.invalidateQueries({ queryKey: ["downloadedItems"] });
+      deleteDownloadItemInfoFromDiskTmp(item.Id!);
+
+      storage.set("downloadedItems", JSON.stringify(items));
+      queryClient.invalidateQueries({ queryKey: ["downloadedItems"] });
       refetch();
     } catch (error) {
-      console.error("Failed to save downloaded item information:", error);
+      console.error(
+        "Failed to save downloaded item information with media source:",
+        error
+      );
     }
   }
 
@@ -538,16 +566,16 @@ function useDownloadProvider() {
     removeProcess,
     setProcesses,
     startDownload,
+    getDownloadedItem,
   };
 }
 
 export function DownloadProvider({ children }: { children: React.ReactNode }) {
   const downloadProviderValue = useDownloadProvider();
-  const queryClient = new QueryClient();
 
   return (
     <DownloadContext.Provider value={downloadProviderValue}>
-      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+      {children}
     </DownloadContext.Provider>
   );
 }

providers/JellyfinProvider.tsx

@@ -1,8 +1,8 @@
 import { useInterval } from "@/hooks/useInterval";
+import { storage } from "@/utils/mmkv";
 import { Api, Jellyfin } from "@jellyfin/sdk";
 import { UserDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { getUserApi } from "@jellyfin/sdk/lib/utils/api";
-import AsyncStorage from "@react-native-async-storage/async-storage";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import axios, { AxiosError } from "axios";
 import { router, useSegments } from "expo-router";
@@ -18,6 +18,7 @@ import React, {
 } from "react";
 import { Platform } from "react-native";
 import uuid from "react-native-uuid";
+import { getDeviceName } from "react-native-device-info";
 
 interface Server {
   address: string;
@@ -48,12 +49,16 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
 
   useEffect(() => {
     (async () => {
-      const id = await getOrSetDeviceId();
+      const id = getOrSetDeviceId();
+      const deviceName = await getDeviceName();
       setJellyfin(
         () =>
           new Jellyfin({
-            clientInfo: { name: "Streamyfin", version: "0.18.0" },
-            deviceInfo: { name: Platform.OS === "ios" ? "iOS" : "Android", id },
+            clientInfo: { name: "Streamyfin", version: "0.21.0" },
+            deviceInfo: {
+              name: deviceName,
+              id,
+            },
           })
       );
       setDeviceId(id);
@@ -86,7 +91,7 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
     return {
       authorization: `MediaBrowser Client="Streamyfin", Device=${
         Platform.OS === "android" ? "Android" : "iOS"
-      }, DeviceId="${deviceId}", Version="0.18.0"`,
+      }, DeviceId="${deviceId}", Version="0.21.0"`,
     };
   }, [deviceId]);
 
@@ -138,8 +143,8 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
           const { AccessToken, User } = authResponse.data;
           api.accessToken = AccessToken;
           setUser(User);
-          await AsyncStorage.setItem("token", AccessToken);
-          await AsyncStorage.setItem("user", JSON.stringify(User));
+          storage.set("token", AccessToken);
+          storage.set("user", JSON.stringify(User));
           return true;
         }
       }
@@ -172,7 +177,7 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
       if (!apiInstance?.basePath) throw new Error("Failed to connect");
 
       setApi(apiInstance);
-      await AsyncStorage.setItem("serverUrl", server.address);
+      storage.set("serverUrl", server.address);
     },
     onError: (error) => {
       console.error("Failed to set server:", error);
@@ -181,7 +186,7 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
 
   const removeServerMutation = useMutation({
     mutationFn: async () => {
-      await AsyncStorage.removeItem("serverUrl");
+      storage.delete("serverUrl");
       setApi(null);
     },
     onError: (error) => {
@@ -204,9 +209,9 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
 
         if (auth.data.AccessToken && auth.data.User) {
           setUser(auth.data.User);
-          await AsyncStorage.setItem("user", JSON.stringify(auth.data.User));
+          storage.set("user", JSON.stringify(auth.data.User));
           setApi(jellyfin.createApi(api?.basePath, auth.data?.AccessToken));
-          await AsyncStorage.setItem("token", auth.data?.AccessToken);
+          storage.set("token", auth.data?.AccessToken);
         }
       } catch (error) {
         if (axios.isAxiosError(error)) {
@@ -241,7 +246,7 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
 
   const logoutMutation = useMutation({
     mutationFn: async () => {
-      await AsyncStorage.removeItem("token");
+      storage.delete("token");
       setUser(null);
     },
     onError: (error) => {
@@ -258,13 +263,10 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
     ],
     queryFn: async () => {
       try {
-        const token = await getTokenFromStoraage();
-        const serverUrl = await getServerUrlFromStorage();
-        const user = JSON.parse(
-          (await getUserFromStorage()) as string
-        ) as UserDto;
-
-        if (serverUrl && token && user.Id && jellyfin) {
+        const token = getTokenFromStorage();
+        const serverUrl = getServerUrlFromStorage();
+        const user = getUserFromStorage();
+        if (serverUrl && token && user?.Id && jellyfin) {
           const apiInstance = jellyfin.createApi(serverUrl, token);
           setApi(apiInstance);
           setUser(user);
@@ -273,6 +275,7 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
         return true;
       } catch (e) {
         console.error(e);
+        return false;
       }
     },
     staleTime: 0,
@@ -321,24 +324,32 @@ function useProtectedRoute(user: UserDto | null, loading = false) {
   }, [user, segments, loading]);
 }
 
-export async function getTokenFromStoraage() {
-  return await AsyncStorage.getItem("token");
+export function getTokenFromStorage(): string | null {
+  return storage.getString("token") || null;
 }
 
-export async function getUserFromStorage() {
-  return await AsyncStorage.getItem("user");
+export function getUserFromStorage(): UserDto | null {
+  const userStr = storage.getString("user");
+  if (userStr) {
+    try {
+      return JSON.parse(userStr) as UserDto;
+    } catch (e) {
+      console.error(e);
+    }
+  }
+  return null;
 }
 
-export async function getServerUrlFromStorage() {
-  return await AsyncStorage.getItem("serverUrl");
+export function getServerUrlFromStorage(): string | null {
+  return storage.getString("serverUrl") || null;
 }
 
-export async function getOrSetDeviceId() {
-  let deviceId = await AsyncStorage.getItem("deviceId");
+export function getOrSetDeviceId(): string {
+  let deviceId = storage.getString("deviceId");
 
   if (!deviceId) {
     deviceId = uuid.v4() as string;
-    await AsyncStorage.setItem("deviceId", deviceId);
+    storage.set("deviceId", deviceId);
   }
 
   return deviceId;

providers/PlaySettingsProvider.tsx

@@ -7,6 +7,7 @@ import old from "@/utils/profiles/old";
 import {
   BaseItemDto,
   MediaSourceInfo,
+  PlaybackInfoResponse,
 } from "@jellyfin/sdk/lib/generated-client";
 import { getSessionApi } from "@jellyfin/sdk/lib/utils/api";
 import { useAtomValue } from "jotai";
@@ -30,6 +31,7 @@ export type PlaybackType = {
 
 type PlaySettingsContextType = {
   playSettings: PlaybackType | null;
+  mediaSource: MediaSourceInfo | null;
   setPlaySettings: (
     dataOrUpdater:
       | PlaybackType
@@ -51,6 +53,7 @@ export const PlaySettingsProvider: React.FC<{ children: React.ReactNode }> = ({
   children,
 }) => {
   const [playSettings, _setPlaySettings] = useState<PlaybackType | null>(null);
+  const [mediaSource, setMediaSource] = useState<MediaSourceInfo | null>(null);
   const [playUrl, setPlayUrl] = useState<string | null>(null);
   const [playSessionId, setPlaySessionId] = useState<string | null>(null);
 
@@ -91,14 +94,10 @@ export const PlaySettingsProvider: React.FC<{ children: React.ReactNode }> = ({
         return null;
       }
 
-      let deviceProfile: any = iosFmp4;
-      if (settings?.deviceProfile === "Native") deviceProfile = native;
-      if (settings?.deviceProfile === "Old") deviceProfile = old;
-
       try {
         const data = await getStreamUrl({
           api,
-          deviceProfile,
+          deviceProfile: native,
           item: newSettings?.item,
           mediaSourceId: newSettings?.mediaSource?.Id,
           startTimeTicks: 0,
@@ -106,14 +105,15 @@ export const PlaySettingsProvider: React.FC<{ children: React.ReactNode }> = ({
           audioStreamIndex: newSettings?.audioIndex ?? 0,
           subtitleStreamIndex: newSettings?.subtitleIndex ?? -1,
           userId: user.Id,
-          forceDirectPlay: settings.forceDirectPlay,
         });
 
-        console.log("getStreamUrl ~ ", data?.url);
+        console.log("getStreamUrl ~");
+        console.log(`${data?.url?.slice(0, 100)}...${data?.url?.slice(-50)}`);
 
         _setPlaySettings(newSettings);
         setPlayUrl(data?.url!);
         setPlaySessionId(data?.sessionId!);
+        setMediaSource(data?.mediaSource!);
 
         return data;
       } catch (error) {
@@ -125,18 +125,14 @@ export const PlaySettingsProvider: React.FC<{ children: React.ReactNode }> = ({
   );
 
   useEffect(() => {
-    let deviceProfile: any = ios;
-    if (settings?.deviceProfile === "Native") deviceProfile = native;
-    if (settings?.deviceProfile === "Old") deviceProfile = old;
-
     const postCaps = async () => {
       if (!api) return;
       await getSessionApi(api).postFullCapabilities({
         clientCapabilitiesDto: {
           AppStoreUrl: "https://apps.apple.com/us/app/streamyfin/id6593660679",
-          DeviceProfile: deviceProfile,
+          DeviceProfile: native as any,
           IconUrl:
-            "https://raw.githubusercontent.com/retardgerman/streamyfinweb/refs/heads/redesign/public/assets/images/icon_new_withoutBackground.png",
+            "https://raw.githubusercontent.com/retardgerman/streamyfinweb/refs/heads/main/public/assets/images/icon_new_withoutBackground.png",
           PlayableMediaTypes: ["Audio", "Video"],
           SupportedCommands: ["Play"],
           SupportsMediaControl: true,
@@ -158,6 +154,7 @@ export const PlaySettingsProvider: React.FC<{ children: React.ReactNode }> = ({
         setMusicPlaySettings,
         setOfflineSettings,
         playSessionId,
+        mediaSource,
       }}
     >
       {children}

utils/atoms/filters.ts

@@ -1,6 +1,6 @@
-import AsyncStorage from "@react-native-async-storage/async-storage";
 import { atom } from "jotai";
-import { atomWithStorage, createJSONStorage } from "jotai/utils";
+import { atomWithStorage } from "jotai/utils";
+import { storage } from "../mmkv";
 
 export enum SortByOption {
   Default = "Default",
@@ -68,9 +68,6 @@ export const sortOrderAtom = atom<SortOrderOption[]>([
   SortOrderOption.Ascending,
 ]);
 
-/**
- * Sort preferences with persistence
- */
 export interface SortPreference {
   [libraryId: string]: SortByOption;
 }
@@ -86,15 +83,15 @@ export const sortByPreferenceAtom = atomWithStorage<SortPreference>(
   "sortByPreference",
   defaultSortPreference,
   {
-    getItem: async (key) => {
-      const value = await AsyncStorage.getItem(key);
+    getItem: (key) => {
+      const value = storage.getString(key);
       return value ? JSON.parse(value) : null;
     },
-    setItem: async (key, value) => {
-      await AsyncStorage.setItem(key, JSON.stringify(value));
+    setItem: (key, value) => {
+      storage.set(key, JSON.stringify(value));
     },
-    removeItem: async (key) => {
-      await AsyncStorage.removeItem(key);
+    removeItem: (key) => {
+      storage.delete(key);
     },
   }
 );
@@ -103,20 +100,19 @@ export const sortOrderPreferenceAtom = atomWithStorage<SortOrderPreference>(
   "sortOrderPreference",
   defaultSortOrderPreference,
   {
-    getItem: async (key) => {
-      const value = await AsyncStorage.getItem(key);
+    getItem: (key) => {
+      const value = storage.getString(key);
       return value ? JSON.parse(value) : null;
     },
-    setItem: async (key, value) => {
-      await AsyncStorage.setItem(key, JSON.stringify(value));
+    setItem: (key, value) => {
+      storage.set(key, JSON.stringify(value));
     },
-    removeItem: async (key) => {
-      await AsyncStorage.removeItem(key);
+    removeItem: (key) => {
+      storage.delete(key);
     },
   }
 );
 
-// Helper functions to get and set sort preferences
 export const getSortByPreference = (
   libraryId: string,
   preferences: SortPreference
@@ -130,4 +126,3 @@ export const getSortOrderPreference = (
 ) => {
   return preferences?.[libraryId] || null;
 };
-

utils/atoms/queue.ts

@@ -1,7 +1,5 @@
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import AsyncStorage from "@react-native-async-storage/async-storage";
 import { atom, useAtom } from "jotai";
-import { atomWithStorage } from "jotai/utils";
 import { useEffect } from "react";
 
 export interface Job {

utils/atoms/settings.ts

@@ -1,7 +1,7 @@
 import { atom, useAtom } from "jotai";
-import AsyncStorage from "@react-native-async-storage/async-storage";
 import { useEffect } from "react";
 import * as ScreenOrientation from "expo-screen-orientation";
+import { storage } from "../mmkv";
 
 export type DownloadQuality = "original" | "high" | "low";
 
@@ -59,7 +59,6 @@ export type Settings = {
   forceLandscapeInVideoPlayer?: boolean;
   usePopularPlugin?: boolean;
   deviceProfile?: "Expo" | "Native" | "Old";
-  forceDirectPlay?: boolean;
   mediaListCollectionIds?: string[];
   searchEngine: "Marlin" | "Jellyfin";
   marlinServerUrl?: string;
@@ -76,21 +75,13 @@ export type Settings = {
   downloadMethod: "optimized" | "remux";
   autoDownload: boolean;
 };
-/**
- *
- * The settings atom is a Jotai atom that stores the user's settings.
- * It is initialized with a default value of null, which indicates that the settings have not been loaded yet.
- * The settings are loaded from AsyncStorage when the atom is read for the first time.
- *
- */
 
-const loadSettings = async (): Promise<Settings> => {
+const loadSettings = (): Settings => {
   const defaultValues: Settings = {
     autoRotate: true,
     forceLandscapeInVideoPlayer: false,
     usePopularPlugin: false,
     deviceProfile: "Expo",
-    forceDirectPlay: false,
     mediaListCollectionIds: [],
     searchEngine: "Jellyfin",
     marlinServerUrl: "",
@@ -115,7 +106,7 @@ const loadSettings = async (): Promise<Settings> => {
   };
 
   try {
-    const jsonValue = await AsyncStorage.getItem("settings");
+    const jsonValue = storage.getString("settings");
     const loadedValues: Partial<Settings> =
       jsonValue != null ? JSON.parse(jsonValue) : {};
 
@@ -126,30 +117,28 @@ const loadSettings = async (): Promise<Settings> => {
   }
 };
 
-// Utility function to save settings to AsyncStorage
-const saveSettings = async (settings: Settings) => {
+const saveSettings = (settings: Settings) => {
   const jsonValue = JSON.stringify(settings);
-  await AsyncStorage.setItem("settings", jsonValue);
+  storage.set("settings", jsonValue);
 };
 
-// Create an atom to store the settings in memory
 export const settingsAtom = atom<Settings | null>(null);
 
-// A hook to manage settings, loading them on initial mount and providing a way to update them
 export const useSettings = () => {
   const [settings, setSettings] = useAtom(settingsAtom);
 
   useEffect(() => {
     if (settings === null) {
-      loadSettings().then(setSettings);
+      const loadedSettings = loadSettings();
+      setSettings(loadedSettings);
     }
   }, [settings, setSettings]);
 
-  const updateSettings = async (update: Partial<Settings>) => {
+  const updateSettings = (update: Partial<Settings>) => {
     if (settings) {
       const newSettings = { ...settings, ...update };
       setSettings(newSettings);
-      await saveSettings(newSettings);
+      saveSettings(newSettings);
     }
   };
 

utils/device.ts

@@ -1,19 +1,19 @@
-import AsyncStorage from "@react-native-async-storage/async-storage";
 import uuid from "react-native-uuid";
+import { storage } from "./mmkv";
 
-export const getOrSetDeviceId = async () => {
-  let deviceId = await AsyncStorage.getItem("deviceId");
+export const getOrSetDeviceId = () => {
+  let deviceId = storage.getString("deviceId");
 
   if (!deviceId) {
     deviceId = uuid.v4() as string;
-    await AsyncStorage.setItem("deviceId", deviceId);
+    storage.set("deviceId", deviceId);
   }
 
   return deviceId;
 };
 
-export const getDeviceId = async () => {
-  let deviceId = await AsyncStorage.getItem("deviceId");
+export const getDeviceId = () => {
+  let deviceId = storage.getString("deviceId");
 
   return deviceId || null;
 };

utils/jellyfin/getDefaultPlaySettings.ts

@@ -50,7 +50,9 @@ export function getDefaultPlaySettings(
   )?.Index;
 
   // 4. Get default bitrate
-  const bitrate = BITRATES[0];
+  const bitrate = BITRATES.sort(
+    (a, b) => (b.value || Infinity) - (a.value || Infinity)
+  )[0];
 
   return {
     item,

utils/jellyfin/media/getPlaybackInfo.ts

@@ -1,19 +0,0 @@
-import { Api } from "@jellyfin/sdk";
-import { getMediaInfoApi } from "@jellyfin/sdk/lib/utils/api";
-
-export const getPlaybackInfo = async (
-  api?: Api | null | undefined,
-  itemId?: string | null | undefined,
-  userId?: string | null | undefined,
-) => {
-  if (!api || !itemId || !userId) {
-    return null;
-  }
-
-  const a = await getMediaInfoApi(api).getPlaybackInfo({
-    itemId,
-    userId,
-  });
-
-  return a.data;
-};

utils/jellyfin/media/getStreamUrl.ts

@@ -1,4 +1,4 @@
-import iosFmp4 from "@/utils/profiles/iosFmp4";
+import native from "@/utils/profiles/native";
 import { Api } from "@jellyfin/sdk";
 import {
   BaseItemDto,
@@ -6,7 +6,6 @@ import {
   PlaybackInfoResponse,
 } from "@jellyfin/sdk/lib/generated-client/models";
 import { getMediaInfoApi } from "@jellyfin/sdk/lib/utils/api";
-import { getAuthHeaders } from "../jellyfin";
 
 export const getStreamUrl = async ({
   api,
@@ -15,10 +14,9 @@ export const getStreamUrl = async ({
   startTimeTicks = 0,
   maxStreamingBitrate,
   sessionData,
-  deviceProfile = iosFmp4,
+  deviceProfile = native,
   audioStreamIndex = 0,
   subtitleStreamIndex = undefined,
-  forceDirectPlay = false,
   mediaSourceId,
 }: {
   api: Api | null | undefined;
@@ -27,25 +25,25 @@ export const getStreamUrl = async ({
   startTimeTicks: number;
   maxStreamingBitrate?: number;
   sessionData?: PlaybackInfoResponse | null;
-  deviceProfile: any;
+  deviceProfile?: any;
   audioStreamIndex?: number;
   subtitleStreamIndex?: number;
-  forceDirectPlay?: boolean;
   height?: number;
   mediaSourceId?: string | null;
 }): Promise<{
   url: string | null;
   sessionId: string | null;
+  mediaSource: MediaSourceInfo | undefined;
 } | null> => {
   if (!api || !userId || !item?.Id) {
     return null;
   }
 
   let mediaSource: MediaSourceInfo | undefined;
-  let url: string | null | undefined;
   let sessionId: string | null | undefined;
 
   if (item.Type === "Program") {
+    console.log("Item is of type program...");
     const res0 = await getMediaInfoApi(api).getPlaybackInfo(
       {
         userId,
@@ -69,7 +67,11 @@ export const getStreamUrl = async ({
     sessionId = res0.data.PlaySessionId || null;
 
     if (transcodeUrl) {
-      return { url: `${api.basePath}${transcodeUrl}`, sessionId };
+      return {
+        url: `${api.basePath}${transcodeUrl}`,
+        sessionId,
+        mediaSource: res0.data.MediaSources?.[0],
+      };
     }
   }
 
@@ -87,50 +89,87 @@ export const getStreamUrl = async ({
         userId,
         maxStreamingBitrate,
         startTimeTicks,
-        enableTranscoding: maxStreamingBitrate ? true : undefined,
         autoOpenLiveStream: true,
         mediaSourceId,
-        allowVideoStreamCopy: maxStreamingBitrate ? false : true,
         audioStreamIndex,
         subtitleStreamIndex,
-        deInterlace: true,
-        breakOnNonKeyFrames: false,
-        copyTimestamps: false,
-        enableMpegtsM2TsMode: false,
-
       },
     }
   );
 
+  if (res2.status !== 200) {
+    console.error("Error getting playback info:", res2.status, res2.statusText);
+  }
+
   sessionId = res2.data.PlaySessionId || null;
 
   mediaSource = res2.data.MediaSources?.find(
     (source: MediaSourceInfo) => source.Id === mediaSourceId
   );
 
-  console.log("getStreamUrl ~ ", item.MediaType);
-
   if (item.MediaType === "Video") {
     if (mediaSource?.TranscodingUrl) {
+
+      const urlObj = new URL(api.basePath + mediaSource?.TranscodingUrl); // Create a URL object
+
+      // If there is no subtitle stream index, add it to the URL.
+      if (subtitleStreamIndex == -1) {
+        urlObj.searchParams.set("SubtitleMethod", "Hls");
+      }
+
+      // Add 'SubtitleMethod=Hls' if it doesn't exist
+      if (!urlObj.searchParams.has("SubtitleMethod")) {
+        urlObj.searchParams.append("SubtitleMethod", "Hls");
+      }
+      // Get the updated URL
+      const transcodeUrl = urlObj.toString();
+
+      console.log(
+        "Video has transcoding URL:",
+        `${transcodeUrl}`
+      );
       return {
-        url: `${api.basePath}${mediaSource.TranscodingUrl}`,
+        url: transcodeUrl,
         sessionId: sessionId,
+        mediaSource,
       };
     }
 
-    if (mediaSource?.SupportsDirectPlay || forceDirectPlay === true) {
+    if (mediaSource?.SupportsDirectPlay) {
+      const searchParams = new URLSearchParams({
+        playSessionId: sessionData?.PlaySessionId || "",
+        mediaSourceId: mediaSource?.Id || "",
+        static: "true",
+        subtitleStreamIndex: subtitleStreamIndex?.toString() || "",
+        audioStreamIndex: audioStreamIndex?.toString() || "",
+        deviceId: api.deviceInfo.id,
+        api_key: api.accessToken,
+        startTimeTicks: startTimeTicks.toString(),
+        maxStreamingBitrate: maxStreamingBitrate?.toString() || "",
+        userId: userId || "",
+      });
+
+      const directPlayUrl = `${
+        api.basePath
+      }/Videos/${itemId}/stream.mp4?${searchParams.toString()}`;
+
+      console.log("Video is being direct played:", directPlayUrl);
+
       return {
-        url: `${api.basePath}/Videos/${itemId}/stream.mp4?playSessionId=${sessionData?.PlaySessionId}&mediaSourceId=${mediaSource?.Id}&static=true&subtitleStreamIndex=${subtitleStreamIndex}&audioStreamIndex=${audioStreamIndex}&deviceId=${api.deviceInfo.id}&api_key=${api.accessToken}`,
+        url: directPlayUrl,
         sessionId: sessionId,
+        mediaSource,
       };
     }
   }
 
   if (item.MediaType === "Audio") {
-    console.log("getStreamUrl ~ Audio");
-
     if (mediaSource?.TranscodingUrl) {
-      return { url: `${api.basePath}${mediaSource.TranscodingUrl}`, sessionId };
+      return {
+        url: `${api.basePath}${mediaSource.TranscodingUrl}`,
+        sessionId,
+        mediaSource,
+      };
     }
 
     const searchParams = new URLSearchParams({
@@ -153,6 +192,7 @@ export const getStreamUrl = async ({
         api.basePath
       }/Audio/${itemId}/universal?${searchParams.toString()}`,
       sessionId,
+      mediaSource,
     };
   }
 

utils/jellyfin/session/capabilities.ts

@@ -31,15 +31,6 @@ export const postCapabilities = async ({
     throw new Error("Missing parameters for marking item as not played");
   }
 
-  let profile: any = iosFmp4;
-
-  if (deviceProfile === "Native") {
-    profile = native;
-  }
-  if (deviceProfile === "Old") {
-    profile = old;
-  }
-
   try {
     const d = api.axiosInstance.post(
       api.basePath + "/Sessions/Capabilities/Full",
@@ -57,7 +48,7 @@ export const postCapabilities = async ({
         ],
         supportsMediaControl: true,
         id: sessionId,
-        DeviceProfile: profile,
+        DeviceProfile: native,
       },
       {
         headers: getAuthHeaders(api),

utils/log.ts

@@ -1,5 +1,5 @@
-import AsyncStorage from "@react-native-async-storage/async-storage";
 import { atomWithStorage, createJSONStorage } from "jotai/utils";
+import { storage } from "./mmkv";
 
 type LogLevel = "INFO" | "WARN" | "ERROR";
 
@@ -10,14 +10,14 @@ interface LogEntry {
   data?: any;
 }
 
-const asyncStorage = createJSONStorage(() => AsyncStorage);
-const logsAtom = atomWithStorage("logs", [], asyncStorage);
+const mmkvStorage = createJSONStorage(() => ({
+  getItem: (key: string) => storage.getString(key) || null,
+  setItem: (key: string, value: string) => storage.set(key, value),
+  removeItem: (key: string) => storage.delete(key),
+}));
+const logsAtom = atomWithStorage("logs", [], mmkvStorage);
 
-export const writeToLog = async (
-  level: LogLevel,
-  message: string,
-  data?: any
-) => {
+export const writeToLog = (level: LogLevel, message: string, data?: any) => {
   const newEntry: LogEntry = {
     timestamp: new Date().toISOString(),
     level: level,
@@ -25,23 +25,23 @@ export const writeToLog = async (
     data: data,
   };
 
-  const currentLogs = await AsyncStorage.getItem("logs");
+  const currentLogs = storage.getString("logs");
   const logs: LogEntry[] = currentLogs ? JSON.parse(currentLogs) : [];
   logs.push(newEntry);
 
   const maxLogs = 100;
   const recentLogs = logs.slice(Math.max(logs.length - maxLogs, 0));
 
-  await AsyncStorage.setItem("logs", JSON.stringify(recentLogs));
+  storage.set("logs", JSON.stringify(recentLogs));
 };
 
-export const readFromLog = async (): Promise<LogEntry[]> => {
-  const logs = await AsyncStorage.getItem("logs");
+export const readFromLog = (): LogEntry[] => {
+  const logs = storage.getString("logs");
   return logs ? JSON.parse(logs) : [];
 };
 
-export const clearLogs = async () => {
-  await AsyncStorage.removeItem("logs");
+export const clearLogs = () => {
+  storage.delete("logs");
 };
 
 export default logsAtom;

utils/optimize-server.ts

@@ -1,7 +1,12 @@
 import { itemRouter } from "@/components/common/TouchableItemRouter";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+import {
+  BaseItemDto,
+  MediaSourceInfo,
+} from "@jellyfin/sdk/lib/generated-client";
 import axios from "axios";
 import { writeToLog } from "./log";
+import { DownloadedItem } from "@/providers/DownloadProvider";
+import { MMKV } from "react-native-mmkv";
 
 interface IJobInput {
   deviceId?: string | null;
@@ -23,7 +28,7 @@ export interface JobStatus {
   inputUrl: string;
   deviceId: string;
   itemId: string;
-  item: Partial<BaseItemDto>;
+  item: BaseItemDto;
   speed?: number;
   timestamp: Date;
   base64Image?: string;
@@ -154,3 +159,81 @@ export async function getStatistics({
     return null;
   }
 }
+
+/**
+ * Saves the download item info to disk - this data is used temporarily to fetch additional download information
+ * in combination with the optimize server. This is used to not have to send all item info to the optimize server.
+ *
+ * @param {BaseItemDto} item - The item to save.
+ * @param {MediaSourceInfo} mediaSource - The media source of the item.
+ * @param {string} url - The URL of the item.
+ * @return {boolean} A promise that resolves when the item info is saved.
+ */
+export function saveDownloadItemInfoToDiskTmp(
+  item: BaseItemDto,
+  mediaSource: MediaSourceInfo,
+  url: string
+): boolean {
+  try {
+    const storage = new MMKV();
+
+    const downloadInfo = JSON.stringify({
+      item,
+      mediaSource,
+      url,
+    });
+
+    storage.set(`tmp_download_info_${item.Id}`, downloadInfo);
+
+    return true;
+  } catch (error) {
+    console.error("Failed to save download item info to disk:", error);
+    throw error;
+  }
+}
+
+/**
+ * Retrieves the download item info from disk.
+ *
+ * @param {string} itemId - The ID of the item to retrieve.
+ * @return {{
+ *  item: BaseItemDto;
+ *  mediaSource: MediaSourceInfo;
+ *  url: string;
+ * } | null} The retrieved download item info or null if not found.
+ */
+export function getDownloadItemInfoFromDiskTmp(itemId: string): {
+  item: BaseItemDto;
+  mediaSource: MediaSourceInfo;
+  url: string;
+} | null {
+  try {
+    const storage = new MMKV();
+    const rawInfo = storage.getString(`tmp_download_info_${itemId}`);
+
+    if (rawInfo) {
+      return JSON.parse(rawInfo);
+    }
+    return null;
+  } catch (error) {
+    console.error("Failed to retrieve download item info from disk:", error);
+    return null;
+  }
+}
+
+/**
+ * Deletes the download item info from disk.
+ *
+ * @param {string} itemId - The ID of the item to delete.
+ * @return {boolean} True if the item info was successfully deleted, false otherwise.
+ */
+export function deleteDownloadItemInfoFromDiskTmp(itemId: string): boolean {
+  try {
+    const storage = new MMKV();
+    storage.delete(`tmp_download_info_${itemId}`);
+    return true;
+  } catch (error) {
+    console.error("Failed to delete download item info from disk:", error);
+    return false;
+  }
+}

utils/profiles/android.js

@@ -0,0 +1,143 @@
+/**
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+import MediaTypes from "../../constants/MediaTypes";
+
+/**
+ * Device profile for Native video player
+ */
+export default {
+  Name: "1. Native iOS Video Profile",
+  MaxStaticBitrate: 100000000,
+  MaxStreamingBitrate: 120000000,
+  MusicStreamingTranscodingBitrate: 384000,
+  CodecProfiles: [
+    {
+      Type: MediaTypes.Video,
+      Codec: "h264,h265,hevc,mpeg4,divx,xvid,wmv,vc1,vp8,vp9,av1",
+    },
+    {
+      Type: MediaTypes.Audio,
+      Codec: "aac,mp3,flac,alac,opus,vorbis,pcm,wma",
+    },
+  ],
+  DirectPlayProfiles: [
+    {
+      Type: MediaTypes.Video,
+      Container: "mp4,mkv,avi,mov,flv,ts,m2ts,webm,ogv,3gp",
+      VideoCodec: "h264,h265,hevc,mpeg4,divx,xvid,wmv,vc1,vp8,vp9,av1",
+      AudioCodec: "aac,mp3,flac,alac,opus,vorbis,wma",
+    },
+    {
+      Type: MediaTypes.Audio,
+      Container: "mp3,aac,flac,alac,wav,ogg,wma",
+      AudioCodec: "mp3,aac,flac,alac,opus,vorbis,wma,pcm",
+    },
+  ],
+  TranscodingProfiles: [
+    {
+      Type: MediaTypes.Video,
+      Context: "Streaming",
+      Protocol: "hls",
+      Container: "ts",
+      VideoCodec: "h264",
+      AudioCodec: "aac,mp3,ac3",
+      MaxAudioChannels: "8",
+      MinSegments: "2",
+      BreakOnNonKeyFrames: true,
+    },
+    {
+      Type: MediaTypes.Audio,
+      Context: "Streaming",
+      Protocol: "http",
+      Container: "mp3",
+      AudioCodec: "mp3",
+      MaxAudioChannels: "2",
+    },
+  ],
+  ResponseProfiles: [
+    {
+      Container: "mkv",
+      MimeType: "video/x-matroska",
+      Type: MediaTypes.Video,
+    },
+    {
+      Container: "mp4",
+      MimeType: "video/mp4",
+      Type: MediaTypes.Video,
+    },
+  ],
+  SubtitleProfiles: [
+    { Format: "srt", Method: "Embed" },
+    { Format: "srt", Method: "External" },
+    { Format: "srt", Method: "Encode" },
+    { Format: "ass", Method: "Embed" },
+    { Format: "ass", Method: "External" },
+    { Format: "ass", Method: "Encode" },
+    { Format: "ssa", Method: "Embed" },
+    { Format: "ssa", Method: "External" },
+    { Format: "ssa", Method: "Encode" },
+    { Format: "sub", Method: "Embed" },
+    { Format: "sub", Method: "External" },
+    { Format: "sub", Method: "Encode" },
+    { Format: "vtt", Method: "Embed" },
+    { Format: "vtt", Method: "External" },
+    { Format: "vtt", Method: "Encode" },
+    { Format: "ttml", Method: "Embed" },
+    { Format: "ttml", Method: "External" },
+    { Format: "ttml", Method: "Encode" },
+    { Format: "pgs", Method: "Embed" },
+    { Format: "pgs", Method: "External" },
+    { Format: "pgs", Method: "Encode" },
+    { Format: "dvdsub", Method: "Embed" },
+    { Format: "dvdsub", Method: "External" },
+    { Format: "dvdsub", Method: "Encode" },
+    { Format: "dvbsub", Method: "Embed" },
+    { Format: "dvbsub", Method: "External" },
+    { Format: "dvbsub", Method: "Encode" },
+    { Format: "xsub", Method: "Embed" },
+    { Format: "xsub", Method: "External" },
+    { Format: "xsub", Method: "Encode" },
+    { Format: "mov_text", Method: "Embed" },
+    { Format: "mov_text", Method: "External" },
+    { Format: "mov_text", Method: "Encode" },
+    { Format: "scc", Method: "Embed" },
+    { Format: "scc", Method: "External" },
+    { Format: "scc", Method: "Encode" },
+    { Format: "smi", Method: "Embed" },
+    { Format: "smi", Method: "External" },
+    { Format: "smi", Method: "Encode" },
+    { Format: "teletext", Method: "Embed" },
+    { Format: "teletext", Method: "External" },
+    { Format: "teletext", Method: "Encode" },
+    { Format: "microdvd", Method: "Embed" },
+    { Format: "microdvd", Method: "External" },
+    { Format: "microdvd", Method: "Encode" },
+    { Format: "mpl2", Method: "Embed" },
+    { Format: "mpl2", Method: "External" },
+    { Format: "mpl2", Method: "Encode" },
+    { Format: "pjs", Method: "Embed" },
+    { Format: "pjs", Method: "External" },
+    { Format: "pjs", Method: "Encode" },
+    { Format: "realtext", Method: "Embed" },
+    { Format: "realtext", Method: "External" },
+    { Format: "realtext", Method: "Encode" },
+    { Format: "stl", Method: "Embed" },
+    { Format: "stl", Method: "External" },
+    { Format: "stl", Method: "Encode" },
+    { Format: "subrip", Method: "Embed" },
+    { Format: "subrip", Method: "External" },
+    { Format: "subrip", Method: "Encode" },
+    { Format: "subviewer", Method: "Embed" },
+    { Format: "subviewer", Method: "External" },
+    { Format: "subviewer", Method: "Encode" },
+    { Format: "text", Method: "Embed" },
+    { Format: "text", Method: "External" },
+    { Format: "text", Method: "Encode" },
+    { Format: "vplayer", Method: "Embed" },
+    { Format: "vplayer", Method: "External" },
+    { Format: "vplayer", Method: "Encode" },
+  ],
+};