wip

2025-08-20 18:37:18 +02:00 · 2024-10-18 22:27:26 +02:00
parent 6e669b2aa9
commit 39c49d4cdb
15 changed files with 381 additions and 159 deletions
--- a/app/(auth)/player.tsx
+++ b/app/(auth)/player.tsx
@@ -3,6 +3,7 @@ import { useAndroidNavigationBar } from "@/hooks/useAndroidNavigationBar";
 import { useOrientation } from "@/hooks/useOrientation";
 import { useOrientationSettings } from "@/hooks/useOrientationSettings";
 import { useWebSocket } from "@/hooks/useWebsockets";
+import { TrackInfo } from "@/modules/vlc-player";
 import { apiAtom } from "@/providers/JellyfinProvider";
 import {
  PlaybackType,
@@ -12,6 +13,7 @@ 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 { ticksToSeconds } from "@/utils/time";
 import { Api } from "@jellyfin/sdk";
 import { getPlaystateApi } from "@jellyfin/sdk/lib/utils/api";
 import * as Haptics from "expo-haptics";
@@ -22,6 +24,7 @@ import { Pressable, StatusBar, useWindowDimensions, View } from "react-native";
 import { useSharedValue } from "react-native-reanimated";
 import Video, {
  OnProgressData,
+  SelectedTrack,
  SelectedTrackType,
  VideoRef,
 } from "react-native-video";
@@ -112,6 +115,13 @@ export default function page() {
    reportPlaybackStopped();
  }, [videoRef]);

+  const seek = useCallback(
+    (ticks: number) => {
+      videoRef.current?.seek(ticksToSeconds(ticks));
+    },
+    [videoRef]
+  );
+
  const reportPlaybackStopped = async () => {
    await getPlaystateApi(api).onPlaybackStopped({
      itemId: playSettings?.item?.Id!,
@@ -141,12 +151,20 @@ export default function page() {
      if (isSeeking.value === true) return;
      if (isPlaybackStopped === true) return;

-      const ticks = data.currentTime * 10000000;
+      console.log({
+        data,
+        isSeeking: isSeeking.value,
+        isPlaybackStopped,
+      });

-      progress.value = secondsToTicks(data.currentTime);
+      const ticks = secondsToTicks(data.currentTime);
+
+      progress.value = ticks;
      cacheProgress.value = secondsToTicks(data.playableDuration);
      setIsBuffering(data.playableDuration === 0);

+      console.log("progress.value", progress.value);
+
      if (!playSettings?.item?.Id || data.currentTime === 0) return;

      await getPlaystateApi(api).onPlaybackProgress({
@@ -188,15 +206,11 @@ export default function page() {
    stopPlayback: stop,
  });

-  const selectedSubtitleTrack = useMemo(() => {
-    const a = playSettings?.mediaSource?.MediaStreams?.find(
-      (s) => s.Index === playSettings.subtitleIndex
-    );
-    console.log(a);
-    return a;
-  }, [playSettings]);
+  const [selectedTextTrack, setSelectedTextTrack] = useState<
+    SelectedTrack | undefined
+  >();

-  const [hlsSubTracks, setHlsSubTracks] = useState<
+  const [embededTextTracks, setEmbededTextTracks] = useState<
    {
      index: number;
      language?: string | undefined;
@@ -206,17 +220,12 @@ export default function page() {
    }[]
  >([]);

-  const selectedTextTrack = useMemo(() => {
-    for (let st of hlsSubTracks) {
-      if (st.title === selectedSubtitleTrack?.DisplayTitle) {
-        return {
-          type: SelectedTrackType.TITLE,
-          value: selectedSubtitleTrack?.DisplayTitle ?? "",
-        };
-      }
-    }
-    return undefined;
-  }, [hlsSubTracks]);
+  const getSubtitleTracks = (): TrackInfo[] => {
+    return embededTextTracks.map((t) => ({
+      name: t.title ?? "",
+      index: t.index,
+    }));
+  };

  return (
    <View
@@ -273,7 +282,7 @@ export default function page() {
          }}
          onTextTracks={(data) => {
            console.log("onTextTracks ~", data);
-            setHlsSubTracks(data.textTracks as any);
+            setEmbededTextTracks(data.textTracks as any);
          }}
          selectedTextTrack={selectedTextTrack}
        />
@@ -293,6 +302,16 @@ export default function page() {
        setShowControls={setShowControls}
        setIgnoreSafeAreas={setIgnoreSafeAreas}
        ignoreSafeAreas={ignoreSafeAreas}
+        seek={seek}
+        play={play}
+        pause={pause}
+        getSubtitleTracks={getSubtitleTracks}
+        setSubtitleTrack={(i) =>
+          setSelectedTextTrack({
+            type: SelectedTrackType.INDEX,
+            value: i,
+          })
+        }
      />
    </View>
  );
@@ -334,6 +353,9 @@ export function useVideoSource(

    return {
      uri: playUrl,
+      textTracks: {
+        
+      },
      isNetwork: true,
      startPosition,
      headers: getAuthHeaders(api),
--- a/app/(auth)/vlc-player.tsx
+++ b/app/(auth)/vlc-player.tsx
@@ -1,3 +1,4 @@
+import { Controls } from "@/components/video-player/Controls";
 import { VlcControls } from "@/components/video-player/VlcControls";
 import { useAndroidNavigationBar } from "@/hooks/useAndroidNavigationBar";
 import { useOrientation } from "@/hooks/useOrientation";
@@ -264,7 +265,7 @@ export default function page() {
      </Pressable>

      {videoRef.current && (
-        <VlcControls
+        <Controls
          mediaSource={mediaSource}
          item={playSettings.item}
          videoRef={videoRef}
@@ -290,6 +291,7 @@ export default function page() {
          setSubtitleURL={videoRef.current.setSubtitleURL}
          setAudioTrack={videoRef.current.setAudioTrack}
          stop={videoRef.current.stop}
+          isVlc
        />
      )}
    </View>
--- a/components/PlayButton.tsx
+++ b/components/PlayButton.tsx
@@ -84,7 +84,7 @@ export const PlayButton: React.FC<Props> = ({ ...props }) => {
      }

      if (Platform.OS === "ios") router.push("/vlc-player");
-      else router.push("/play-video");
+      else router.push("/player");
      return;
    }

@@ -125,7 +125,6 @@ export const PlayButton: React.FC<Props> = ({ ...props }) => {
                  audioStreamIndex: playSettings?.audioIndex ?? 0,
                  subtitleStreamIndex: playSettings?.subtitleIndex ?? -1,
                  userId: user?.Id,
-                  forceDirectPlay: settings?.forceDirectPlay,
                });

                if (!data?.url) {
@@ -206,7 +205,8 @@ export const PlayButton: React.FC<Props> = ({ ...props }) => {
            });
            break;
          case 1:
-            router.push("/vlc-player");
+            if (Platform.OS === "ios") router.push("/vlc-player");
+            else router.push("/player");
            break;
          case cancelButtonIndex:
            break;
--- a/components/music/SongsListItem.tsx
+++ b/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");
    }
  }, []);

--- a/components/settings/SettingToggles.tsx
+++ b/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 {}

@@ -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,22 +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-col">
            <View
              className={`
--- a/components/video-player/Controls.tsx
+++ b/components/video-player/Controls.tsx
@@ -2,16 +2,28 @@ 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 { 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 {
+  formatTimeString,
+  secondsToMs,
+  ticksToMs,
+  ticksToSeconds,
+} from "@/utils/time";
 import { Ionicons } from "@expo/vector-icons";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+import {
+  BaseItemDto,
+  MediaSourceInfo,
+} 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 { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
  Dimensions,
  Platform,
@@ -20,22 +32,23 @@ import {
  View,
 } from "react-native";
 import { Slider } from "react-native-awesome-slider";
-import Animated, {
+import {
  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";
+import { useAtomValue } from "jotai";
+import { apiAtom } from "@/providers/JellyfinProvider";
+import * as DropdownMenu from "zeego/dropdown-menu";

 interface Props {
  item: BaseItemDto;
-  videoRef: React.MutableRefObject<VideoRef | null>;
+  videoRef: React.MutableRefObject<VlcPlayerViewRef | VideoRef | null>;
  isPlaying: boolean;
  isSeeking: SharedValue<boolean>;
  cacheProgress: SharedValue<number>;
@@ -47,11 +60,27 @@ interface Props {
  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>;
+  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,
  videoRef,
+  seek,
+  play,
+  pause,
  togglePlay,
  isPlaying,
  isSeeking,
@@ -62,19 +91,29 @@ export const Controls: React.FC<Props> = ({
  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 { setPlaySettings } = usePlaySettings();
-
+  const { setPlaySettings, playSettings } = usePlaySettings();
+  const api = useAtomValue(apiAtom);
  const windowDimensions = Dimensions.get("window");

  const { previousItem, nextItem } = useAdjacentItems({ item });
  const { trickPlayUrl, calculateTrickplayUrl, trickplayInfo } = useTrickplay(
    item,
-    enableTrickplay
+    !offline && enableTrickplay
  );

  const [currentTime, setCurrentTime] = useState(0); // Seconds
@@ -84,23 +123,20 @@ export const Controls: React.FC<Props> = ({
  const max = useSharedValue(item.RunTimeTicks || 0);

  const wasPlayingRef = useRef(false);
-
-  const seek = (ticks: number) => {
-    videoRef.current?.seek(ticks);
-  };
+  const lastProgressRef = useRef<number>(0);

  const { showSkipButton, skipIntro } = useIntroSkipper(
-    item.Id,
+    offline ? undefined : item.Id,
    currentTime,
    seek,
-    () => videoRef.current?.resume()
+    play
  );

  const { showSkipCreditButton, skipCredit } = useCreditSkipper(
-    item.Id,
+    offline ? undefined : item.Id,
    currentTime,
    seek,
-    () => videoRef.current?.resume()
+    play
  );

  const goToPreviousItem = useCallback(() => {
@@ -117,7 +153,8 @@ export const Controls: React.FC<Props> = ({
      subtitleIndex,
    });

-    router.replace("/play-video");
+    if (Platform.OS === "ios") router.replace("/vlc-player");
+    else router.replace("/player");
  }, [previousItem, settings]);

  const goToNextItem = useCallback(() => {
@@ -134,13 +171,16 @@ export const Controls: React.FC<Props> = ({
      subtitleIndex,
    });

-    router.replace("/play-video");
+    if (Platform.OS === "ios") router.replace("/vlc-player");
+    else router.replace("/player");
  }, [nextItem, settings]);

  const updateTimes = useCallback(
    (currentProgress: number, maxValue: number) => {
-      const current = ticksToSeconds(currentProgress);
-      const remaining = ticksToSeconds(maxValue - currentProgress);
+      const current = isVlc ? currentProgress : ticksToSeconds(currentProgress);
+      const remaining = isVlc
+        ? maxValue - currentProgress
+        : ticksToSeconds(maxValue - currentProgress);

      setCurrentTime(current);
      setRemainingTime(remaining);
@@ -151,7 +191,7 @@ export const Controls: React.FC<Props> = ({
        goToNextItem();
      }
    },
-    [goToNextItem]
+    [goToNextItem, isVlc]
  );

  useAnimatedReaction(
@@ -170,19 +210,27 @@ export const Controls: React.FC<Props> = ({

  useEffect(() => {
    if (item) {
-      progress.value = item?.UserData?.PlaybackPositionTicks || 0;
-      max.value = item.RunTimeTicks || 0;
+      progress.value = isVlc
+        ? ticksToMs(item?.UserData?.PlaybackPositionTicks)
+        : item?.UserData?.PlaybackPositionTicks || 0;
+      max.value = isVlc
+        ? ticksToMs(item.RunTimeTicks || 0)
+        : item.RunTimeTicks || 0;
    }
-  }, [item]);
+  }, [item, isVlc]);

  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 handleSliderComplete = useCallback(
+    async (value: number) => {
+      isSeeking.value = false;
+      progress.value = value;
+
+      await seek(Math.max(0, Math.floor(isVlc ? value : value / 10000000)));
+      if (wasPlayingRef.current === true) play();
+    },
+    [isVlc]
+  );

  const handleSliderChange = (value: number) => {
    calculateTrickplayUrl(value);
@@ -190,49 +238,124 @@ export const Controls: React.FC<Props> = ({

  const handleSliderStart = useCallback(() => {
    if (showControls === false) return;
+
    wasPlayingRef.current = isPlaying;
-    videoRef.current?.pause();
+    lastProgressRef.current = progress.value;
+
+    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();
+      const curr = progress.value;
      if (curr !== undefined) {
-        videoRef.current?.seek(Math.max(0, curr - settings.rewindSkipTime));
-        setTimeout(() => {
-          if (wasPlayingRef.current === true) videoRef.current?.resume();
-        }, 10);
+        const newTime = isVlc
+          ? Math.max(0, curr - secondsToMs(settings.rewindSkipTime))
+          : Math.max(0, curr - settings.rewindSkipTime * 10000000);
+        await seek(newTime);
+        if (wasPlayingRef.current === true) play();
      }
    } catch (error) {
      writeToLog("ERROR", "Error seeking video backwards", error);
    }
-  }, [settings, isPlaying]);
+  }, [settings, isPlaying, isVlc]);

  const handleSkipForward = useCallback(async () => {
-    console.log("handleSkipForward");
    if (!settings?.forwardSkipTime) return;
    wasPlayingRef.current = isPlaying;
    try {
-      const curr = await videoRef.current?.getCurrentPosition();
+      const curr = progress.value;
      if (curr !== undefined) {
-        videoRef.current?.seek(Math.max(0, curr + settings.forwardSkipTime));
-        setTimeout(() => {
-          if (wasPlayingRef.current === true) videoRef.current?.resume();
-        }, 10);
+        const newTime = isVlc
+          ? curr + secondsToMs(settings.forwardSkipTime)
+          : curr + settings.forwardSkipTime * 10000000;
+        await seek(Math.max(0, newTime));
+        if (wasPlayingRef.current === true) play();
      }
    } catch (error) {
      writeToLog("ERROR", "Error seeking video forwards", error);
    }
-  }, [settings, isPlaying]);
+  }, [settings, isPlaying, isVlc]);

  const toggleIgnoreSafeAreas = useCallback(() => {
    setIgnoreSafeAreas((prev) => !prev);
  }, []);

+  const [selectedSubtitleTrack, setSelectedSubtitleTrack] = useState<
+    MediaStream | undefined
+  >(undefined);
+
+  const [audioTracks, setAudioTracks] = useState<TrackInfo[] | null>(null);
+  const [subtitleTracks, setSubtitleTracks] = useState<TrackInfo[] | null>(
+    null
+  );
+
+  useEffect(() => {
+    const fetchTracks = async () => {
+      if (getAudioTracks && getSubtitleTracks) {
+        const audio = await getAudioTracks();
+        const subtitles = await getSubtitleTracks();
+        setAudioTracks(audio);
+        setSubtitleTracks(subtitles);
+      }
+    };
+
+    fetchTracks();
+  }, [isVideoLoaded, getAudioTracks, getSubtitleTracks]);
+
+  type EmbeddedSubtitle = {
+    name: string;
+    index: number;
+    isExternal: false;
+  };
+
+  type ExternalSubtitle = {
+    name: string;
+    index: number;
+    isExternal: true;
+    deliveryUrl: string;
+  };
+
+  const allSubtitleTracks = useMemo(() => {
+    const embeddedSubs =
+      subtitleTracks?.map((s) => ({
+        name: s.name,
+        index: s.index,
+        isExternal: false,
+        deliveryUrl: undefined,
+      })) || [];
+
+    const externalSubs =
+      mediaSource?.MediaStreams?.filter(
+        (stream) =>
+          stream.Type === "Subtitle" &&
+          stream.IsExternal &&
+          !!stream.DeliveryUrl
+      ).map((s) => ({
+        name: s.DisplayTitle!,
+        index: s.Index!,
+        isExternal: true,
+        deliveryUrl: s.DeliveryUrl,
+      })) || [];
+
+    // Create a Set of embedded subtitle names for quick lookup
+    const embeddedSubNames = new Set(embeddedSubs.map((sub) => sub.name));
+
+    // Filter out external subs that have the same name as embedded subs
+    const uniqueExternalSubs = externalSubs.filter(
+      (sub) => !embeddedSubNames.has(sub.name)
+    );
+
+    // Combine embedded and unique external subs
+    return [...embeddedSubs, ...uniqueExternalSubs] as (
+      | EmbeddedSubtitle
+      | ExternalSubtitle
+    )[];
+  }, [item, isVideoLoaded, subtitleTracks, mediaSource]);
+
  return (
    <View
      style={[
@@ -245,6 +368,116 @@ 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}
+            >
+              <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;
+                            }
+
+                            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>
+      )}
+
      <View
        style={[
          {
@@ -331,7 +564,7 @@ export const Controls: React.FC<Props> = ({
          },
        ]}
        pointerEvents={showControls ? "auto" : "none"}
-        className={`flex flex-row items-center space-x-2 z-10 p-4`}
+        className={`flex flex-row items-center space-x-2 z-10 p-4 `}
      >
        <TouchableOpacity
          onPress={toggleIgnoreSafeAreas}
@@ -344,7 +577,8 @@ export const Controls: React.FC<Props> = ({
          />
        </TouchableOpacity>
        <TouchableOpacity
-          onPress={() => {
+          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"
@@ -489,10 +723,10 @@ export const Controls: React.FC<Props> = ({
            />
            <View className="flex flex-row items-center justify-between mt-0.5">
              <Text className="text-[12px] text-neutral-400">
-                {formatTimeString(currentTime)}
+                {formatTimeString(currentTime, isVlc ? "ms" : "s")}
              </Text>
              <Text className="text-[12px] text-neutral-400">
-                -{formatTimeString(remainingTime)}
+                -{formatTimeString(remainingTime, isVlc ? "ms" : "s")}
              </Text>
            </View>
          </View>
--- a/components/video-player/VlcControls.tsx
+++ b/components/video-player/VlcControls.tsx
@@ -151,7 +151,8 @@ export const VlcControls: React.FC<Props> = ({
      subtitleIndex,
    });

-    router.replace("/play-video");
+    if (Platform.OS === "ios") router.replace("/vlc-player");
+    else router.replace("/player");
  }, [previousItem, settings]);

  const goToNextItem = useCallback(() => {
@@ -168,7 +169,8 @@ export const VlcControls: React.FC<Props> = ({
      subtitleIndex,
    });

-    router.replace("/play-video");
+    if (Platform.OS === "ios") router.replace("/vlc-player");
+    else router.replace("/player");
  }, [nextItem, settings]);

  const updateTimes = useCallback(
@@ -266,10 +268,6 @@ export const VlcControls: React.FC<Props> = ({
    setIgnoreSafeAreas((prev) => !prev);
  }, []);

-  const [selectedSubtitleTrack, setSelectedSubtitleTrack] = useState<
-    MediaStream | undefined
-  >(undefined);
-
  const [audioTracks, setAudioTracks] = useState<TrackInfo[] | null>(null);
  const [subtitleTracks, setSubtitleTracks] = useState<TrackInfo[] | null>(
    null
--- a/components/vlc/VideoDebugInfo.tsx
+++ b/components/vlc/VideoDebugInfo.tsx
@@ -1,14 +1,11 @@
 import {
-  PlaybackStatePayload,
-  ProgressUpdatePayload,
-  VlcPlayerViewRef,
  TrackInfo,
+  VlcPlayerViewRef,
 } from "@/modules/vlc-player/src/VlcPlayer.types";
-import { useState, useEffect } from "react";
-import { View, TouchableOpacity, ViewProps } from "react-native";
-import { Text } from "../common/Text";
-import React from "react";
+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>;
--- a/modules/vlc-player/ios/VlcPlayerModule.swift
+++ b/modules/vlc-player/ios/VlcPlayerModule.swift
@@ -77,10 +77,10 @@ public class VlcPlayerModule: Module {
                return view.getVideoCropGeometry()
            }

-            AsyncFunction("setSubtitleURL") { (view: VlcPlayerView, url: String) in
-                view.setSubtitleURL(url)
+            AsyncFunction("setSubtitleURL") {
+                (view: VlcPlayerView, url: String, name: String) in
+                view.setSubtitleURL(url, name: name)
            }
-
        }
    }
 }
--- a/modules/vlc-player/ios/VlcPlayerView.swift
+++ b/modules/vlc-player/ios/VlcPlayerView.swift
@@ -11,6 +11,7 @@ class VlcPlayerView: ExpoView {
    private var lastReportedState: VLCMediaPlayerState?
    private var lastReportedIsPlaying: Bool?
    private var isMediaReady: Bool = false
+    private var customSubtitles: [(internalName: String, originalName: String)] = []

    // MARK: - Initialization

@@ -198,14 +199,6 @@ class VlcPlayerView: ExpoView {
        }
    }

-    @objc func loadExternalSubtitle(_ subtitlePath: String) {
-        DispatchQueue.main.async { [weak self] in
-            guard let self = self else { return }
-            self.mediaPlayer?.addPlaybackSlave(
-                URL(fileURLWithPath: subtitlePath), type: .subtitle, enforce: true)
-        }
-    }
-
    @objc func setMuted(_ muted: Bool) {
        DispatchQueue.main.async {
            self.mediaPlayer?.audio?.isMuted = muted
@@ -296,7 +289,7 @@ class VlcPlayerView: ExpoView {
        }
    }

-    @objc func setSubtitleURL(_ subtitleURL: String) {
+    @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")
@@ -305,7 +298,9 @@ class VlcPlayerView: ExpoView {

            let result = self.mediaPlayer?.addPlaybackSlave(url, type: .subtitle, enforce: true)
            if let result = result {
-                print("Subtitle added with 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")
            }
@@ -318,10 +313,7 @@ class VlcPlayerView: ExpoView {
        }

        let count = mediaPlayer.numberOfSubtitlesTracks
-
-        print(
-            "Debug: Number of subtitle tracks: \(count)"
-        )
+        print("Debug: Number of subtitle tracks: \(count)")

        guard count > 0 else {
            return nil
@@ -333,10 +325,15 @@ class VlcPlayerView: ExpoView {
            let indexes = mediaPlayer.videoSubTitlesIndexes as? [NSNumber]
        {
            for (index, name) in zip(indexes, names) {
-                tracks.append(["name": name, "index": index.intValue])
+                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
    }

--- a/modules/vlc-player/src/VlcPlayer.types.ts
+++ b/modules/vlc-player/src/VlcPlayer.types.ts
@@ -82,5 +82,5 @@ export interface VlcPlayerViewRef {
  getChapters: () => Promise<ChapterInfo[] | null>;
  setVideoCropGeometry: (geometry: string | null) => Promise<void>;
  getVideoCropGeometry: () => Promise<string | null>;
-  setSubtitleURL: (url: string) => Promise<void>;
+  setSubtitleURL: (url: string, name: string) => Promise<void>;
 }
--- a/modules/vlc-player/src/VlcPlayerView.tsx
+++ b/modules/vlc-player/src/VlcPlayerView.tsx
@@ -78,8 +78,8 @@ const VlcPlayerView = React.forwardRef<VlcPlayerViewRef, VlcPlayerViewProps>(
        const geometry = await nativeRef.current?.getVideoCropGeometry();
        return geometry ?? null;
      },
-      setSubtitleURL: async (url: string) => {
-        await nativeRef.current?.setSubtitleURL(url);
+      setSubtitleURL: async (url: string, name: string) => {
+        await nativeRef.current?.setSubtitleURL(url, name);
      },
    }));

--- a/utils/atoms/settings.ts
+++ b/utils/atoms/settings.ts
@@ -59,7 +59,6 @@ export type Settings = {
  forceLandscapeInVideoPlayer?: boolean;
  usePopularPlugin?: boolean;
  deviceProfile?: "Expo" | "Native" | "Old";
-  forceDirectPlay?: boolean;
  mediaListCollectionIds?: string[];
  searchEngine: "Marlin" | "Jellyfin";
  marlinServerUrl?: string;
@@ -90,7 +89,6 @@ const loadSettings = async (): Promise<Settings> => {
    forceLandscapeInVideoPlayer: false,
    usePopularPlugin: false,
    deviceProfile: "Expo",
-    forceDirectPlay: false,
    mediaListCollectionIds: [],
    searchEngine: "Jellyfin",
    marlinServerUrl: "",
--- a/utils/jellyfin/media/getStreamUrl.ts
+++ b/utils/jellyfin/media/getStreamUrl.ts
@@ -19,7 +19,6 @@ export const getStreamUrl = async ({
  deviceProfile = native,
  audioStreamIndex = 0,
  subtitleStreamIndex = undefined,
-  forceDirectPlay = false,
  mediaSourceId,
 }: {
  api: Api | null | undefined;
@@ -31,7 +30,6 @@ export const getStreamUrl = async ({
  deviceProfile: any;
  audioStreamIndex?: number;
  subtitleStreamIndex?: number;
-  forceDirectPlay?: boolean;
  height?: number;
  mediaSourceId?: string | null;
 }): Promise<{
@@ -114,17 +112,17 @@ export const getStreamUrl = async ({
  );

  if (item.MediaType === "Video") {
-    if (mediaSource?.SupportsDirectPlay || forceDirectPlay === true) {
+    if (mediaSource?.TranscodingUrl) {
      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: `${api.basePath}${mediaSource.TranscodingUrl}`,
        sessionId: sessionId,
        mediaSource,
      };
    }

-    if (mediaSource?.TranscodingUrl) {
+    if (mediaSource?.SupportsDirectPlay) {
      return {
-        url: `${api.basePath}${mediaSource.TranscodingUrl}`,
+        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}`,
        sessionId: sessionId,
        mediaSource,
      };
--- a/utils/time.ts
+++ b/utils/time.ts
@@ -39,13 +39,23 @@ export const runtimeTicksToSeconds = (
 // t: ms
 export const formatTimeString = (
  t: number | null | undefined,
-  tick = false
+  unit: "s" | "ms" | "tick" = "ms"
 ): string => {
  if (t === null || t === undefined) return "0:00";

-  let seconds = t / 1000;
-  if (tick) {
-    seconds = Math.floor(t / 10000000); // Convert ticks to seconds
+  let seconds: number;
+  switch (unit) {
+    case "s":
+      seconds = Math.floor(t);
+      break;
+    case "ms":
+      seconds = Math.floor(t / 1000);
+      break;
+    case "tick":
+      seconds = Math.floor(t / 10000000);
+      break;
+    default:
+      seconds = Math.floor(t / 1000); // Default to ms if an invalid type is provided
  }

  if (seconds < 0) return "0:00";