wip

app/(auth)/player.tsx

@@ -22,7 +22,7 @@ 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, useMemo, useRef, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Pressable, StatusBar, useWindowDimensions, View } from "react-native";
 import { SystemBars } from "react-native-edge-to-edge";
 import { useSharedValue } from "react-native-reanimated";
@@ -324,10 +324,23 @@ export default function page() {
     }[]
   >([]);
 
+  const [audioTracks, setAudioTracks] = useState<TrackInfo[]>([]);
+  const [selectedAudioTrack, setSelectedAudioTrack] = useState<
+    SelectedTrack | undefined
+  >(undefined);
+
+  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,
     }));
   };
 
@@ -405,7 +418,18 @@ export default function page() {
             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}
           />
         ) : (
           <Text>No video source...</Text>
@@ -437,6 +461,14 @@ export default function page() {
               value: i,
             })
           }
+          getAudioTracks={getAudioTracks}
+          setAudioTrack={(i) => {
+            console.log("setAudioTrack ~", i);
+            setSelectedAudioTrack({
+              type: SelectedTrackType.INDEX,
+              value: 10,
+            });
+          }}
         />
       )}
     </View>

app/_layout.tsx

@@ -34,7 +34,7 @@ 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 { GestureHandlerRootView } from "react-native-gesture-handler";
 import "react-native-reanimated";
 import { Toaster } from "sonner-native";
@@ -217,6 +217,8 @@ export default function RootLayout() {
     }
   }, [loaded]);
 
+  Appearance.setColorScheme("dark");
+
   if (!loaded) {
     return null;
   }

app/login.tsx

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

@@ -64,6 +64,7 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
     } = useDefaultPlaySettings(item, settings);
 
     useEffect(() => {
+      console.log(defaultAudioIndex, defaultSubtitleIndex);
       setSelectedOptions(() => ({
         bitrate: defaultBitrate,
         mediaSource: defaultMediaSource,
@@ -184,15 +185,16 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
                   <AudioTrackSelector
                     className="mr-1"
                     source={selectedOptions.mediaSource}
-                    onChange={(val) =>
+                    onChange={(val) => {
+                      console.log(val);
                       setSelectedOptions(
                         (prev) =>
                           prev && {
                             ...prev,
                             audioIndex: val,
                           }
-                      )
-                    }
+                      );
+                    }}
                     selected={selectedOptions.audioIndex}
                   />
                   <SubtitleTrackSelector

components/video-player/Controls.tsx

@@ -6,13 +6,13 @@ import {
   TrackInfo,
   VlcPlayerViewRef,
 } from "@/modules/vlc-player/src/VlcPlayer.types";
+import { apiAtom } from "@/providers/JellyfinProvider";
 import { usePlaySettings } from "@/providers/PlaySettingsProvider";
 import { useSettings } from "@/utils/atoms/settings";
 import { getDefaultPlaySettings } from "@/utils/jellyfin/getDefaultPlaySettings";
 import { writeToLog } from "@/utils/log";
 import {
   formatTimeString,
-  msToSeconds,
   msToTicks,
   secondsToMs,
   ticksToMs,
@@ -25,6 +25,7 @@ import {
 } from "@jellyfin/sdk/lib/generated-client";
 import { Image } from "expo-image";
 import { useRouter } from "expo-router";
+import { useAtomValue } from "jotai";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
   Dimensions,
@@ -42,11 +43,9 @@ import {
 } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { VideoRef } from "react-native-video";
+import * as DropdownMenu from "zeego/dropdown-menu";
 import { Text } from "../common/Text";
 import { Loader } from "../Loader";
-import { useAtomValue } from "jotai";
-import { apiAtom } from "@/providers/JellyfinProvider";
-import * as DropdownMenu from "zeego/dropdown-menu";
 
 interface Props {
   item: BaseItemDto;
@@ -68,7 +67,7 @@ interface Props {
   seek: (ticks: number) => void;
   play: (() => Promise<void>) | (() => void);
   pause: () => void;
-  getAudioTracks?: () => Promise<TrackInfo[] | null>;
+  getAudioTracks?: (() => Promise<TrackInfo[] | null>) | (() => TrackInfo[]);
   getSubtitleTracks?: (() => Promise<TrackInfo[] | null>) | (() => TrackInfo[]);
   setSubtitleURL?: (url: string, customName: string) => void;
   setSubtitleTrack?: (index: number) => void;
@@ -335,12 +334,14 @@ export const Controls: React.FC<Props> = ({
 
   useEffect(() => {
     const fetchTracks = async () => {
-      if (getAudioTracks && getSubtitleTracks) {
-        const audio = await getAudioTracks();
+      if (getSubtitleTracks) {
         const subtitles = await getSubtitleTracks();
-        setAudioTracks(audio);
         setSubtitleTracks(subtitles);
       }
+      if (getAudioTracks) {
+        const audio = await getAudioTracks();
+        setAudioTracks(audio);
+      }
     };
 
     fetchTracks();
@@ -395,11 +396,6 @@ export const Controls: React.FC<Props> = ({
     )[];
   }, [item, isVideoLoaded, subtitleTracks, mediaSource]);
 
-  // useEffect(() => {
-
-  // }, [allSubtitleTracks, setSubtitleTrack]);
-  const [subtitleTrackSet, setSubtitleTrackSet] = useState(false);
-
   return (
     <View
       style={[
@@ -413,114 +409,102 @@ export const Controls: React.FC<Props> = ({
       ]}
     >
       {/* <VideoDebugInfo playerRef={videoRef} /> */}
-
-      {setSubtitleURL && setSubtitleTrack && setAudioTrack && (
-        <View
-          style={{
-            position: "absolute",
-            top: insets.top,
-            left: insets.left,
-            zIndex: 1000,
-            opacity: showControls ? 1 : 0,
-          }}
-          className="p-4"
-          pointerEvents={showControls ? "auto" : "none"}
-        >
-          <DropdownMenu.Root>
-            <DropdownMenu.Trigger>
-              <View 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"}
-                />
-              </View>
-            </DropdownMenu.Trigger>
-            <DropdownMenu.Content
-              loop={true}
-              side="bottom"
-              align="start"
-              alignOffset={0}
-              avoidCollisions={true}
-              collisionPadding={8}
-              sideOffset={8}
+      <View
+        style={{
+          position: "absolute",
+          top: insets.top,
+          left: insets.left,
+          zIndex: 1000,
+          opacity: showControls ? 1 : 0,
+        }}
+        className="p-4"
+      >
+        <DropdownMenu.Root>
+          <DropdownMenu.Trigger>
+            <TouchableOpacity
+              onPress={() => console.log("open settings")}
+              className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"
             >
-              <DropdownMenu.Sub>
-                <DropdownMenu.SubTrigger key="subtitle-trigger">
-                  Subtitle
-                </DropdownMenu.SubTrigger>
-                <DropdownMenu.SubContent
-                  alignOffset={-10}
-                  avoidCollisions={true}
-                  collisionPadding={0}
-                  loop={true}
-                  sideOffset={10}
-                >
-                  {allSubtitleTracks.length > 0
-                    ? allSubtitleTracks?.map((sub, idx: number) => (
-                        <DropdownMenu.Item
-                          key={`subtitle-item-${idx}`}
-                          onSelect={() => {
-                            console.log("Trying to set subtitle...");
-                            if (sub.isExternal) {
-                              console.log("Setting external sub:", sub);
-                              setSubtitleURL(
-                                api?.basePath + sub.deliveryUrl,
-                                sub.name
-                              );
-                              return;
-                            }
+              <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}
+              >
+                {allSubtitleTracks?.map((sub, idx: number) => (
+                  <DropdownMenu.Item
+                    key={`subtitle-item-${idx}`}
+                    onSelect={() => {
+                      console.log("Trying to set subtitle...");
+                      if (sub.isExternal) {
+                        console.log("Setting external sub:", sub);
+                        setSubtitleURL &&
+                          setSubtitleURL(
+                            api?.basePath + sub.deliveryUrl,
+                            sub.name
+                          );
+                        return;
+                      }
 
-                            console.log("Setting sub with index:", sub.index);
-                            setSubtitleTrack(sub.index);
-                          }}
-                        >
-                          <DropdownMenu.ItemIndicator />
-                          <DropdownMenu.ItemTitle
-                            key={`subtitle-item-title-${idx}`}
-                          >
-                            {sub.name}
-                          </DropdownMenu.ItemTitle>
-                        </DropdownMenu.Item>
-                      ))
-                    : null}
-                </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?.length
-                    ? audioTracks?.map((a, idx: number) => (
-                        <DropdownMenu.CheckboxItem
-                          key={`audio-item-${idx}`}
-                          value="off"
-                          onValueChange={() => {
-                            setAudioTrack(a.index);
-                          }}
-                        >
-                          <DropdownMenu.ItemIndicator />
-                          <DropdownMenu.ItemTitle
-                            key={`audio-item-title-${idx}`}
-                          >
-                            {a.name}
-                          </DropdownMenu.ItemTitle>
-                        </DropdownMenu.CheckboxItem>
-                      ))
-                    : null}
-                </DropdownMenu.SubContent>
-              </DropdownMenu.Sub>
-            </DropdownMenu.Content>
-          </DropdownMenu.Root>
-        </View>
-      )}
+                      console.log("Setting sub with index:", sub.index);
+                      setSubtitleTrack && setSubtitleTrack(sub.index);
+                    }}
+                  >
+                    <DropdownMenu.ItemIndicator />
+                    <DropdownMenu.ItemTitle key={`subtitle-item-title-${idx}`}>
+                      {sub.name}
+                    </DropdownMenu.ItemTitle>
+                  </DropdownMenu.Item>
+                ))}
+              </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((a, idx: number) => (
+                  <DropdownMenu.CheckboxItem
+                    key={`audio-item-${idx}`}
+                    value="off"
+                    onValueChange={() => {
+                      setAudioTrack && setAudioTrack(a.index);
+                    }}
+                  >
+                    <DropdownMenu.ItemIndicator />
+                    <DropdownMenu.ItemTitle key={`audio-item-title-${idx}`}>
+                      {a.name}
+                    </DropdownMenu.ItemTitle>
+                  </DropdownMenu.CheckboxItem>
+                ))}
+              </DropdownMenu.SubContent>
+            </DropdownMenu.Sub>
+          </DropdownMenu.Content>
+        </DropdownMenu.Root>
+      </View>
 
       <View
         style={[

components/video-player/player.android.tsx

@@ -0,0 +1,534 @@
+import { Text } from "@/components/common/Text";
+import { Loader } from "@/components/Loader";
+import { Controls } from "@/components/video-player/Controls";
+import { useOrientation } from "@/hooks/useOrientation";
+import { useOrientationSettings } from "@/hooks/useOrientationSettings";
+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 native from "@/utils/profiles/native";
+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 { Pressable, StatusBar, useWindowDimensions, View } from "react-native";
+import { SystemBars } from "react-native-edge-to-edge";
+import { useSharedValue } from "react-native-reanimated";
+import Video, {
+  OnProgressData,
+  SelectedTrack,
+  SelectedTrackType,
+  VideoRef,
+} from "react-native-video";
+
+export const player = () => {
+  const api = useAtomValue(apiAtom);
+  const user = useAtomValue(userAtom);
+  const [settings] = useSettings();
+  const videoRef = useRef<VideoRef | null>(null);
+
+  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);
+
+  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,
+      user,
+      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: native,
+      });
+
+      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 stop = useCallback(() => {
+    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 = 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,
+    ]
+  );
+
+  useFocusEffect(
+    useCallback(() => {
+      play();
+
+      return () => {
+        stop();
+      };
+    }, [play, stop])
+  );
+
+  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);
+
+  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,
+    }));
+  };
+
+  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,
+        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,
+        }}
+      >
+        {videoSource ? (
+          <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) => {
+              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}
+          />
+        ) : (
+          <Text>No video source...</Text>
+        )}
+      </Pressable>
+
+      {item && (
+        <Controls
+          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}
+          getSubtitleTracks={getSubtitleTracks}
+          setSubtitleTrack={(i) =>
+            setSelectedTextTrack({
+              type: SelectedTrackType.INDEX,
+              value: i,
+            })
+          }
+          getAudioTracks={getAudioTracks}
+          setAudioTrack={(i) => {
+            console.log("setAudioTrack ~", i);
+            setSelectedAudioTrack({
+              type: SelectedTrackType.INDEX,
+              value: 10,
+            });
+          }}
+        />
+      )}
+    </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;
+}

components/video-player/player.ios.tsx

@@ -0,0 +1,411 @@
+import { BITRATES } from "@/components/BitrateSelector";
+import { Text } from "@/components/common/Text";
+import { Loader } from "@/components/Loader";
+import { Controls } from "@/components/video-player/Controls";
+import { useOrientation } from "@/hooks/useOrientation";
+import { useOrientationSettings } from "@/hooks/useOrientationSettings";
+import { useWebSocket } from "@/hooks/useWebsockets";
+import { VlcPlayerView } from "@/modules/vlc-player";
+import {
+  PlaybackStatePayload,
+  ProgressUpdatePayload,
+  VlcPlayerViewRef,
+} from "@/modules/vlc-player/src/VlcPlayer.types";
+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, ticksToMs } 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 { useLocalSearchParams } from "expo-router";
+import { useAtomValue } from "jotai";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import {
+  Alert,
+  Pressable,
+  StatusBar,
+  useWindowDimensions,
+  View,
+} from "react-native";
+import { SystemBars } from "react-native-edge-to-edge";
+import { useSharedValue } from "react-native-reanimated";
+
+export const player = () => {
+  const videoRef = useRef<VlcPlayerViewRef>(null);
+  const user = useAtomValue(userAtom);
+  const api = useAtomValue(apiAtom);
+
+  const windowDimensions = 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 [isVideoLoaded, setIsVideoLoaded] = useState(false);
+
+  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) : -1;
+  const bitrateValue = bitrateValueStr
+    ? parseInt(bitrateValueStr, 10)
+    : BITRATES[0].value;
+
+  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",
+      itemId,
+      audioIndex,
+      subtitleIndex,
+      mediaSourceId,
+      bitrateValue,
+    ],
+    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,
+        deviceProfile: native,
+      });
+
+      if (!res) return null;
+
+      const { mediaSource, sessionId, url } = res;
+
+      if (!sessionId || !mediaSource || !url) return null;
+
+      console.log(url);
+
+      return {
+        mediaSource,
+        sessionId,
+        url,
+      };
+    },
+    enabled: !!itemId && !!api && !!item,
+    staleTime: 0,
+  });
+
+  const togglePlay = useCallback(
+    async (ms: number) => {
+      if (!api || !stream) return;
+
+      Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+      if (isPlaying) {
+        await videoRef.current?.pause();
+
+        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();
+        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,
+    ]
+  );
+
+  const play = useCallback(() => {
+    videoRef.current?.play();
+    reportPlaybackStart();
+  }, [videoRef]);
+
+  const pause = useCallback(() => {
+    videoRef.current?.pause();
+  }, [videoRef]);
+
+  const stop = useCallback(() => {
+    setIsPlaybackStopped(true);
+    videoRef.current?.stop();
+    reportPlaybackStopped();
+  }, [videoRef]);
+
+  const reportPlaybackStopped = async () => {
+    const currentTimeInTicks = msToTicks(progress.value);
+
+    await getPlaystateApi(api!).onPlaybackStopped({
+      itemId: item?.Id!,
+      mediaSourceId: mediaSourceId,
+      positionTicks: currentTimeInTicks,
+      playSessionId: stream?.sessionId!,
+    });
+  };
+
+  const reportPlaybackStart = async () => {
+    if (!api || !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,
+    });
+  };
+
+  const onProgress = useCallback(
+    async (data: ProgressUpdatePayload) => {
+      if (isSeeking.value === true) return;
+      if (isPlaybackStopped === true) return;
+      if (!item?.Id || !api || !stream) return;
+
+      const { currentTime } = data.nativeEvent;
+
+      if (isBuffering) {
+        setIsBuffering(false);
+      }
+
+      progress.value = currentTime;
+      const currentTimeInTicks = msToTicks(currentTime);
+
+      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,
+  });
+
+  const onPlaybackStateChanged = (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);
+    }
+  };
+
+  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 (!stream || !item) return null;
+
+  const startPosition = item?.UserData?.PlaybackPositionTicks
+    ? ticksToMs(item.UserData.PlaybackPositionTicks)
+    : 0;
+
+  return (
+    <View
+      style={{
+        width: windowDimensions.width,
+        height: windowDimensions.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"
+      >
+        <VlcPlayerView
+          ref={videoRef}
+          source={{
+            uri: stream.url,
+            autoplay: true,
+            isNetwork: true,
+            startPosition,
+            initOptions: ["--sub-text-scale=60"],
+          }}
+          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);
+          }}
+        />
+      </Pressable>
+
+      {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;
+}

modules/vlc-player/src/VlcPlayer.types.ts

@@ -41,6 +41,7 @@ export type VlcPlayerSource = {
 export type TrackInfo = {
   name: string;
   index: number;
+  language?: string;
 };
 
 export type ChapterInfo = {

package.json

@@ -35,8 +35,8 @@
     "@types/uuid": "^10.0.0",
     "add": "^2.0.6",
     "axios": "^1.7.7",
-    "expo-asset": "~10.0.10",
     "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",
@@ -56,7 +56,7 @@
     "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.27",
     "expo-web-browser": "~13.0.3",

utils/jellyfin/media/getStreamUrl.ts

@@ -126,12 +126,27 @@ export const getStreamUrl = async ({
     }
 
     if (mediaSource?.SupportsDirectPlay) {
-      console.log(
-        "Video is being direct played:",
-        `${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}`
-      );
+      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,
       };