General refactoring (#559)

2025-08-20 18:37:18 +02:00 · 2025-02-24 01:40:10 +11:00
parent e651b975b7
commit b581a077e1
15 changed files with 814 additions and 909 deletions
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -9,6 +9,7 @@
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
+  "prettier.printWidth": 120,
  "[swift]": {
    "editor.defaultFormatter": "sswg.swift-lang"
  }
--- a/app/(auth)/player/direct-player.tsx
+++ b/app/(auth)/player/direct-player.tsx
@@ -12,40 +12,26 @@ import {
  ProgressUpdatePayload,
  VlcPlayerViewRef,
 } from "@/modules/vlc-player/src/VlcPlayer.types";
-// import { useDownload } from "@/providers/DownloadProvider";
-const downloadProvider = !Platform.isTV
-  ? require("@/providers/DownloadProvider")
-  : null;
+const downloadProvider = !Platform.isTV ? require("@/providers/DownloadProvider") : null;
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 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 { activateKeepAwakeAsync, deactivateKeepAwake } from "expo-keep-awake";
-import {
-  getPlaystateApi,
-  getUserLibraryApi,
-} from "@jellyfin/sdk/lib/utils/api";
-import { useQuery } from "@tanstack/react-query";
+import { getPlaystateApi, getUserLibraryApi } from "@jellyfin/sdk/lib/utils/api";
 import { useHaptic } from "@/hooks/useHaptic";
 import { useGlobalSearchParams, useNavigation } from "expo-router";
 import { useAtomValue } from "jotai";
-import React, {
-  useCallback,
-  useMemo,
-  useRef,
-  useState,
-  useEffect,
-} from "react";
-import { Alert, View, AppState, AppStateStatus, Platform } from "react-native";
+import React, { useCallback, useMemo, useRef, useState, useEffect } from "react";
+import { Alert, View, Platform } from "react-native";
 import { useSharedValue } from "react-native-reanimated";
 import { useSettings } from "@/utils/atoms/settings";
 import { useTranslation } from "react-i18next";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { MediaSourceInfo } from "@jellyfin/sdk/lib/generated-client";
+import { BaseItemDto, MediaSourceInfo } from "@jellyfin/sdk/lib/generated-client";

 export default function page() {
-  console.log("Direct Player");
  const videoRef = useRef<VlcPlayerViewRef>(null);
  const user = useAtomValue(userAtom);
  const api = useAtomValue(apiAtom);
@@ -93,70 +79,72 @@ export default function page() {
    offline: string;
  }>();
  const [settings] = useSettings();
+  const insets = useSafeAreaInsets();
  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 bitrateValue = bitrateValueStr ? parseInt(bitrateValueStr, 10) : BITRATES[0].value;

-  const {
-    data: item,
-    isLoading: isLoadingItem,
-    isError: isErrorItem,
-  } = useQuery({
-    queryKey: ["item", itemId],
-    queryFn: async () => {
+  const [item, setItem] = useState<BaseItemDto | null>(null);
+  const [itemStatus, setItemStatus] = useState({
+    isLoading: true,
+    isError: false,
+  });
+
+  useEffect(() => {
+    const fetchItemData = async () => {
+      setItemStatus({ isLoading: true, isError: false });
+      try {
+        let fetchedItem: BaseItemDto | null = null;
        if (offline && !Platform.isTV) {
-        const item = await getDownloadedItem.getDownloadedItem(itemId);
-        if (item) return item.item;
-      }
-
+          const data = await getDownloadedItem.getDownloadedItem(itemId);
+          if (data) fetchedItem = data.item as BaseItemDto;
+        } else {
          const res = await getUserLibraryApi(api!).getItem({
            itemId,
            userId: user?.Id,
          });
+          fetchedItem = res.data;
+        }
+        setItem(fetchedItem);
+      } catch (error) {
+        console.error("Failed to fetch item:", error);
+        setItemStatus({ isLoading: false, isError: true });
+      } finally {
+        setItemStatus({ isLoading: false, isError: false });
+      }
+    };

-      return res.data;
-    },
-    enabled: !!itemId,
-    staleTime: 0,
-  });
+    if (itemId) {
+      fetchItemData();
+    }
+  }, [itemId, offline, api, user?.Id]);

-  const [stream, setStream] = useState<{
+  interface Stream {
    mediaSource: MediaSourceInfo;
+    sessionId: string;
    url: string;
-    sessionId: string | undefined;
-  } | null>(null);
-  const [isLoadingStream, setIsLoadingStream] = useState(true);
-  const [isErrorStream, setIsErrorStream] = useState(false);
+  }
+
+  const [stream, setStream] = useState<Stream | null>(null);
+  const [streamStatus, setStreamStatus] = useState({
+    isLoading: true,
+    isError: false,
+  });

  useEffect(() => {
-    const fetchStream = async () => {
-      setIsLoadingStream(true);
-      setIsErrorStream(false);
-
+    const fetchStreamData = async () => {
      try {
+        let result: Stream | null = null;
        if (offline && !Platform.isTV) {
          const data = await getDownloadedItem.getDownloadedItem(itemId);
-          if (!data?.mediaSource) {
-            setStream(null);
-            return;
-          }
-
+          if (!data?.mediaSource) return;
          const url = await getDownloadedFileUrl(data.item.Id!);
-
          if (item) {
-            setStream({
-              mediaSource: data.mediaSource as MediaSourceInfo,
-              url,
-              sessionId: undefined,
-            });
-            return;
+            result = { mediaSource: data.mediaSource, sessionId: "", url };
          }
-        }
-
+        } else {
          const res = await getStreamUrl({
            api,
            item,
@@ -168,36 +156,24 @@ export default function page() {
            subtitleStreamIndex: subtitleIndex,
            deviceProfile: native,
          });
-
-        if (!res) {
-          setStream(null);
-          return;
-        }
-
+          if (!res) return;
          const { mediaSource, sessionId, url } = res;
-
          if (!sessionId || !mediaSource || !url) {
            Alert.alert(t("player.error"), t("player.failed_to_get_stream_url"));
-          setStream(null);
            return;
          }
-
-        setStream({
-          mediaSource,
-          sessionId,
-          url,
-        });
+          result = { mediaSource, sessionId, url };
+        }
+        setStream(result);
      } catch (error) {
-        console.error("Error fetching stream:", error);
-        setIsErrorStream(true);
-        setStream(null);
+        console.error("Failed to fetch stream:", error);
+        setStreamStatus({ isLoading: false, isError: true });
      } finally {
-        setIsLoadingStream(false);
+        setStreamStatus({ isLoading: false, isError: false });
      }
    };
-
-    fetchStream();
-  }, [itemId, mediaSourceId]);
+    fetchStreamData();
+  }, [itemId, mediaSourceId, bitrateValue, api, item, user?.Id]);

  const togglePlay = useCallback(async () => {
    if (!api) return;
@@ -208,37 +184,11 @@ export default function page() {
    } 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(progress.get()),
-        isPaused: !isPlaying,
-        playMethod: stream?.url.includes("m3u8") ? "Transcode" : "DirectStream",
-        playSessionId: stream.sessionId,
-      });
-    }
-  }, [
-    isPlaying,
-    api,
-    item,
-    stream,
-    videoRef,
-    audioIndex,
-    subtitleIndex,
-    mediaSourceId,
-    offline,
-    progress,
-  ]);
+  }, [isPlaying, api, item, stream, videoRef, audioIndex, subtitleIndex, mediaSourceId, offline, progress]);

  const reportPlaybackStopped = useCallback(async () => {
    if (offline) return;
-
    const currentTimeInTicks = msToTicks(progress.get());
-
    await getPlaystateApi(api!).onPlaybackStopped({
      itemId: item?.Id!,
      mediaSourceId: mediaSourceId,
@@ -255,12 +205,18 @@ export default function page() {
    videoRef.current?.stop();
  }, [videoRef, reportPlaybackStopped]);

+  useEffect(() => {
+    const beforeRemoveListener = navigation.addListener("beforeRemove", stop);
+    return () => {
+      beforeRemoveListener();
+    };
+  }, [navigation, stop]);
+
  const onProgress = useCallback(
    async (data: ProgressUpdatePayload) => {
      if (isSeeking.get() || isPlaybackStopped) return;

      const { currentTime } = data.nativeEvent;
-
      if (isBuffering) {
        setIsBuffering(false);
      }
@@ -284,9 +240,57 @@ export default function page() {
        playSessionId: stream.sessionId,
      });
    },
-    [item?.Id, isSeeking, api, isPlaybackStopped, audioIndex, subtitleIndex]
+    [item?.Id, audioIndex, subtitleIndex, mediaSourceId, isPlaying, stream, isSeeking, isPlaybackStopped, isBuffering]
  );

+  const onPipStarted = useCallback((e: PipStartedPayload) => {
+    const { pipStarted } = e.nativeEvent;
+    setIsPipStarted(pipStarted);
+  }, []);
+
+  const changePlaybackState = useCallback(
+    async (isPlaying: boolean) => {
+      if (!api || offline || !stream) return;
+      await getPlaystateApi(api).onPlaybackProgress({
+        itemId: item?.Id!,
+        audioStreamIndex: audioIndex ? audioIndex : undefined,
+        subtitleStreamIndex: subtitleIndex ? subtitleIndex : undefined,
+        mediaSourceId: mediaSourceId,
+        positionTicks: msToTicks(progress.get()),
+        isPaused: !isPlaying,
+        playMethod: stream?.url.includes("m3u8") ? "Transcode" : "DirectStream",
+        playSessionId: stream.sessionId,
+      });
+    },
+    [api, offline, stream, item?.Id, audioIndex, subtitleIndex, mediaSourceId, progress]
+  );
+
+  const startPosition = useMemo(() => {
+    if (offline) return 0;
+    return item?.UserData?.PlaybackPositionTicks ? ticksToSeconds(item.UserData.PlaybackPositionTicks) : 0;
+  }, [item]);
+
+  const reportPlaybackStart = useCallback(async () => {
+    if (offline || !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,
+    });
+    hasReportedRef.current = true;
+  }, [api, item, stream]);
+
+  const hasReportedRef = useRef(false);
+  useEffect(() => {
+    if (stream && !hasReportedRef.current) {
+      reportPlaybackStart();
+      hasReportedRef.current = true; // Mark as reported
+    }
+  }, [stream]);
+
  useWebSocket({
    isPlaying: isPlaying,
    togglePlay: togglePlay,
@@ -294,22 +298,20 @@ export default function page() {
    offline,
  });

-  const onPipStarted = useCallback((e: PipStartedPayload) => {
-    const { pipStarted } = e.nativeEvent;
-    setIsPipStarted(pipStarted);
-  }, []);
-
-  const onPlaybackStateChanged = useCallback(async (e: PlaybackStatePayload) => {
+  const onPlaybackStateChanged = useCallback(
+    async (e: PlaybackStatePayload) => {
      const { state, isBuffering, isPlaying } = e.nativeEvent;

      if (state === "Playing") {
        setIsPlaying(true);
-      if (!Platform.isTV) await activateKeepAwakeAsync()
+        await changePlaybackState(true);
+        if (!Platform.isTV) await activateKeepAwakeAsync();
        return;
      }

      if (state === "Paused") {
        setIsPlaying(false);
+        await changePlaybackState(false);
        if (!Platform.isTV) await deactivateKeepAwake();
        return;
      }
@@ -320,49 +322,17 @@ export default function page() {
      } else if (isBuffering) {
        setIsBuffering(true);
      }
-  }, []);
-
-  const startPosition = useMemo(() => {
-    if (offline) return 0;
-
-    return item?.UserData?.PlaybackPositionTicks
-      ? ticksToSeconds(item.UserData.PlaybackPositionTicks)
-      : 0;
-  }, [item]);
-
-  // Preselection of audio and subtitle tracks.
-  if (!settings) return null;
-  let initOptions = [`--sub-text-scale=${settings.subtitleSize}`];
-
-  const allAudio =
-    stream?.mediaSource.MediaStreams?.filter(
-      (audio) => audio.Type === "Audio"
-    ) || [];
-  const allSubs =
-    stream?.mediaSource.MediaStreams?.filter(
-      (sub) => sub.Type === "Subtitle"
-    ) || [];
-  const textSubs = allSubs.filter((sub) => sub.IsTextSubtitleStream);
-
-  const chosenSubtitleTrack = allSubs.find(
-    (sub) => sub.Index === subtitleIndex
+    },
+    [changePlaybackState]
  );
-  const chosenAudioTrack = allAudio.find((audio) => audio.Index === audioIndex);

-  const notTranscoding = !stream?.mediaSource.TranscodingUrl;
-  if (
-    chosenSubtitleTrack &&
-    (notTranscoding || chosenSubtitleTrack.IsTextSubtitleStream)
-  ) {
-    const finalIndex = notTranscoding
-      ? allSubs.indexOf(chosenSubtitleTrack)
-      : textSubs.indexOf(chosenSubtitleTrack);
-    initOptions.push(`--sub-track=${finalIndex}`);
-  }
+  const allAudio = stream?.mediaSource.MediaStreams?.filter((audio) => audio.Type === "Audio") || [];

-  if (notTranscoding && chosenAudioTrack) {
-    initOptions.push(`--audio-track=${allAudio.indexOf(chosenAudioTrack)}`);
-  }
+  // Move all the external subtitles last, because vlc places them last.
+  const allSubs =
+    stream?.mediaSource.MediaStreams?.filter((sub) => sub.Type === "Subtitle").sort(
+      (a, b) => Number(a.IsExternal) - Number(b.IsExternal)
+    ) || [];

  const externalSubtitles = allSubs
    .filter((sub: any) => sub.DeliveryMethod === "External")
@@ -371,6 +341,22 @@ export default function page() {
      DeliveryUrl: api?.basePath + sub.DeliveryUrl,
    }));

+  const textSubs = allSubs.filter((sub) => sub.IsTextSubtitleStream);
+
+  const chosenSubtitleTrack = allSubs.find((sub) => sub.Index === subtitleIndex);
+  const chosenAudioTrack = allAudio.find((audio) => audio.Index === audioIndex);
+
+  const notTranscoding = !stream?.mediaSource.TranscodingUrl;
+  let initOptions = [`--sub-text-scale=${settings.subtitleSize}`];
+  if (chosenSubtitleTrack && (notTranscoding || chosenSubtitleTrack.IsTextSubtitleStream)) {
+    const finalIndex = notTranscoding ? allSubs.indexOf(chosenSubtitleTrack) : textSubs.indexOf(chosenSubtitleTrack);
+    initOptions.push(`--sub-track=${finalIndex}`);
+  }
+
+  if (notTranscoding && chosenAudioTrack) {
+    initOptions.push(`--audio-track=${allAudio.indexOf(chosenAudioTrack)}`);
+  }
+
  const [isMounted, setIsMounted] = useState(false);

  // Add useEffect to handle mounting
@@ -379,22 +365,15 @@ export default function page() {
    return () => setIsMounted(false);
  }, []);

-  const insets = useSafeAreaInsets();
-  useEffect(() => {
-    const beforeRemoveListener = navigation.addListener("beforeRemove", stop);
-    return () => {
-      beforeRemoveListener();
-    };
-  }, [navigation]);
-
-  if (!item || isLoadingItem || !stream)
+  if (itemStatus.isLoading || streamStatus.isLoading) {
    return (
      <View className="w-screen h-screen flex flex-col items-center justify-center bg-black">
        <Loader />
      </View>
    );
+  }

-  if (isErrorItem || isErrorStream)
+  if (!item || !stream || itemStatus.isError || streamStatus.isError)
    return (
      <View className="w-screen h-screen flex flex-col items-center justify-center bg-black">
        <Text className="text-white">{t("player.error")}</Text>
@@ -435,10 +414,7 @@ export default function page() {
          }}
          onVideoError={(e) => {
            console.error("Video Error:", e.nativeEvent);
-            Alert.alert(
-              t("player.error"),
-              t("player.an_error_occured_while_playing_the_video")
-            );
+            Alert.alert(t("player.error"), t("player.an_error_occured_while_playing_the_video"));
            writeToLog("ERROR", "Video Error", e.nativeEvent);
          }}
        />
@@ -470,7 +446,6 @@ export default function page() {
          setSubtitleTrack={videoRef.current.setSubtitleTrack}
          setSubtitleURL={videoRef.current.setSubtitleURL}
          setAudioTrack={videoRef.current.setAudioTrack}
-          stop={stop}
          isVlc
        />
      ) : null}
--- a/components/PlayButton.tsx
+++ b/components/PlayButton.tsx
@@ -71,7 +71,7 @@ export const PlayButton: React.FC<Props> = ({
  const lightHapticFeedback = useHaptic("light");

  const goToPlayer = useCallback(
-    (q: string, bitrateValue: number | undefined) => {
+    (q: string) => {
      router.push(`/player/direct-player?${q}`);
    },
    [router]
@@ -94,7 +94,7 @@ export const PlayButton: React.FC<Props> = ({
    const queryString = queryParams.toString();

    if (!client) {
-      goToPlayer(queryString, selectedOptions.bitrate?.value);
+      goToPlayer(queryString);
      return;
    }

@@ -217,7 +217,7 @@ export const PlayButton: React.FC<Props> = ({
            });
            break;
          case 1:
-            goToPlayer(queryString, selectedOptions.bitrate?.value);
+            goToPlayer(queryString);
            break;
          case cancelButtonIndex:
            break;
--- a/components/PlayButton.tv.tsx
+++ b/components/PlayButton.tv.tsx
@@ -57,7 +57,7 @@ export const PlayButton: React.FC<Props> = ({
  const lightHapticFeedback = useHaptic("light");

  const goToPlayer = useCallback(
-    (q: string, bitrateValue: number | undefined) => {
+    (q: string) => {
      router.push(`/player/direct-player?${q}`);
    },
    [router]
@@ -78,7 +78,7 @@ export const PlayButton: React.FC<Props> = ({
    });

    const queryString = queryParams.toString();
-    goToPlayer(queryString, selectedOptions.bitrate?.value);
+    goToPlayer(queryString);
    return;
  };

--- a/components/video-player/controls/Controls.tsx
+++ b/components/video-player/controls/Controls.tsx
@@ -87,7 +87,6 @@ interface Props {
  setSubtitleURL?: (url: string, customName: string) => void;
  setSubtitleTrack?: (index: number) => void;
  setAudioTrack?: (index: number) => void;
-  stop: (() => Promise<void>) | (() => void);
  isVlc?: boolean;
 }

@@ -116,7 +115,6 @@ export const Controls: React.FC<Props> = ({
                                            setSubtitleURL,
                                            setSubtitleTrack,
                                            setAudioTrack,
-  stop,
                                            offline = false,
                                            enableTrickplay = true,
                                            isVlc = false,
@@ -189,12 +187,13 @@ export const Controls: React.FC<Props> = ({
    isVlc
  );

-  const goToPreviousItem = useCallback(() => {
-    if (!previousItem || !settings) return;
+  const goToItemCommon = useCallback(
+    (item: BaseItemDto) => {
+      if (!item || !settings) return;

      lightHapticFeedback();

-    const previousIndexes: previousIndexes = {
+      const previousIndexes = {
        subtitleIndex: subtitleIndex ? parseInt(subtitleIndex) : undefined,
        audioIndex: audioIndex ? parseInt(audioIndex) : undefined,
      };
@@ -204,61 +203,45 @@ export const Controls: React.FC<Props> = ({
        audioIndex: defaultAudioIndex,
        subtitleIndex: defaultSubtitleIndex,
      } = getDefaultPlaySettings(
-      previousItem,
+        item,
        settings,
        previousIndexes,
        mediaSource ?? undefined
      );

      const queryParams = new URLSearchParams({
-      itemId: previousItem.Id ?? "", // Ensure itemId is a string
+        itemId: item.Id ?? "",
        audioIndex: defaultAudioIndex?.toString() ?? "",
        subtitleIndex: defaultSubtitleIndex?.toString() ?? "",
-      mediaSourceId: newMediaSource?.Id ?? "", // Ensure mediaSourceId is a string
+        mediaSourceId: newMediaSource?.Id ?? "",
        bitrateValue: bitrateValue.toString(),
      }).toString();

-    stop();
-
      // @ts-expect-error
      router.replace(`player/direct-player?${queryParams}`);
-  }, [previousItem, settings, subtitleIndex, audioIndex]);
+    },
+    [settings, subtitleIndex, audioIndex, mediaSource, bitrateValue, router]
+  );
+
+  const goToPreviousItem = useCallback(() => {
+    if (!previousItem) return;
+    goToItemCommon(previousItem);
+  }, [previousItem, goToItemCommon]);

  const goToNextItem = useCallback(() => {
-    if (!nextItem || !settings) return;
+    if (!nextItem) return;
+    goToItemCommon(nextItem);
+  }, [nextItem, goToItemCommon]);

-    lightHapticFeedback();
-
-    const previousIndexes: previousIndexes = {
-      subtitleIndex: subtitleIndex ? parseInt(subtitleIndex) : undefined,
-      audioIndex: audioIndex ? parseInt(audioIndex) : undefined,
-    };
-
-    const {
-      mediaSource: newMediaSource,
-      audioIndex: defaultAudioIndex,
-      subtitleIndex: defaultSubtitleIndex,
-    } = getDefaultPlaySettings(
-      nextItem,
-      settings,
-      previousIndexes,
-      mediaSource ?? undefined
+  const goToItem = useCallback(
+    async (itemId: string) => {
+      const gotoItem = await getItemById(api, itemId);
+      if (!gotoItem) return;
+      goToItemCommon(gotoItem);
+    },
+    [goToItemCommon, api]
  );

-    const queryParams = new URLSearchParams({
-      itemId: nextItem.Id ?? "", // Ensure itemId is a string
-      audioIndex: defaultAudioIndex?.toString() ?? "",
-      subtitleIndex: defaultSubtitleIndex?.toString() ?? "",
-      mediaSourceId: newMediaSource?.Id ?? "", // Ensure mediaSourceId is a string
-      bitrateValue: bitrateValue.toString(),
-    }).toString();
-
-    stop();
-
-    // @ts-expect-error
-    router.replace(`player/direct-player?${queryParams}`);
-  }, [nextItem, settings, subtitleIndex, audioIndex]);
-
  const updateTimes = useCallback(
    (currentProgress: number, maxValue: number) => {
      const current = isVlc ? currentProgress : ticksToSeconds(currentProgress);
@@ -381,49 +364,6 @@ export const Controls: React.FC<Props> = ({
    }
  }, [settings, isPlaying, isVlc]);

-  const goToItem = useCallback(
-    async (itemId: string) => {
-      try {
-        const gotoItem = await getItemById(api, itemId);
-        if (!settings || !gotoItem) return;
-
-        lightHapticFeedback();
-
-        const previousIndexes: previousIndexes = {
-          subtitleIndex: subtitleIndex ? parseInt(subtitleIndex) : undefined,
-          audioIndex: audioIndex ? parseInt(audioIndex) : undefined,
-        };
-
-        const {
-          mediaSource: newMediaSource,
-          audioIndex: defaultAudioIndex,
-          subtitleIndex: defaultSubtitleIndex,
-        } = getDefaultPlaySettings(
-          gotoItem,
-          settings,
-          previousIndexes,
-          mediaSource ?? undefined
-        );
-
-        const queryParams = new URLSearchParams({
-          itemId: gotoItem.Id ?? "", // Ensure itemId is a string
-          audioIndex: defaultAudioIndex?.toString() ?? "",
-          subtitleIndex: defaultSubtitleIndex?.toString() ?? "",
-          mediaSourceId: newMediaSource?.Id ?? "", // Ensure mediaSourceId is a string
-          bitrateValue: bitrateValue.toString(),
-        }).toString();
-
-        stop();
-
-        // @ts-expect-error
-        router.replace(`player/direct-player?${queryParams}`);
-      } catch (error) {
-        console.error("Error in gotoEpisode:", error);
-      }
-    },
-    [settings, subtitleIndex, audioIndex]
-  );
-
  const toggleIgnoreSafeAreas = useCallback(() => {
    setIgnoreSafeAreas((prev) => !prev);
    lightHapticFeedback();
@@ -497,7 +437,6 @@ export const Controls: React.FC<Props> = ({
  }, [trickPlayUrl, trickplayInfo, time]);

  const onClose = async () => {
-    stop();
    lightHapticFeedback();
    await ScreenOrientation.lockAsync(
      ScreenOrientation.OrientationLock.PORTRAIT_UP
@@ -549,7 +488,7 @@ export const Controls: React.FC<Props> = ({
                  setSubtitleTrack={setSubtitleTrack}
                  setSubtitleURL={setSubtitleURL}
                >
-                  <DropdownView showControls={showControls} />
+                  <DropdownView />
                </VideoProvider>
              </View>
            )}
--- a/components/video-player/controls/contexts/VideoContext.tsx
+++ b/components/video-player/controls/contexts/VideoContext.tsx
@@ -1,16 +1,5 @@
 import { TrackInfo } from "@/modules/vlc-player";
-import {
-  BaseItemDto,
-  MediaSourceInfo,
-} from "@jellyfin/sdk/lib/generated-client";
-import React, {
-  createContext,
-  useContext,
-  useState,
-  ReactNode,
-  useEffect,
-  useMemo,
-} from "react";
+import React, { createContext, useContext, useState, ReactNode, useEffect, useMemo } from "react";
 import { useControlContext } from "./ControlContext";
 import { Track } from "../types";
 import { router, useLocalSearchParams } from "expo-router";
@@ -27,14 +16,8 @@ const VideoContext = createContext<VideoContextProps | undefined>(undefined);

 interface VideoProviderProps {
  children: ReactNode;
-  getAudioTracks:
-    | (() => Promise<TrackInfo[] | null>)
-    | (() => TrackInfo[])
-    | undefined;
-  getSubtitleTracks:
-    | (() => Promise<TrackInfo[] | null>)
-    | (() => TrackInfo[])
-    | undefined;
+  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;
@@ -55,11 +38,9 @@ export const VideoProvider: React.FC<VideoProviderProps> = ({
  const isVideoLoaded = ControlContext?.isVideoLoaded;
  const mediaSource = ControlContext?.mediaSource;

-  const allSubs =
-    mediaSource?.MediaStreams?.filter((s) => s.Type === "Subtitle") || [];
+  const allSubs = mediaSource?.MediaStreams?.filter((s) => s.Type === "Subtitle") || [];

-  const { itemId, audioIndex, bitrateValue, subtitleIndex } =
-    useLocalSearchParams<{
+  const { itemId, audioIndex, bitrateValue, subtitleIndex } = useLocalSearchParams<{
    itemId: string;
    audioIndex: string;
    subtitleIndex: string;
@@ -69,9 +50,7 @@ export const VideoProvider: React.FC<VideoProviderProps> = ({

  const onTextBasedSubtitle = useMemo(
    () =>
-      allSubs.find(
-        (s) => s.Index?.toString() === subtitleIndex && s.IsTextSubtitleStream
-      ) || subtitleIndex === "-1",
+      allSubs.find((s) => s.Index?.toString() === subtitleIndex && s.IsTextSubtitleStream) || subtitleIndex === "-1",
    [allSubs, subtitleIndex]
  );

@@ -95,21 +74,14 @@ export const VideoProvider: React.FC<VideoProviderProps> = ({
    router.replace(`player/direct-player?${queryParams}`);
  };

-  const setTrackParams = (
-    type: "audio" | "subtitle",
-    index: number,
-    serverIndex: number
-  ) => {
+  const setTrackParams = (type: "audio" | "subtitle", index: number, serverIndex: number) => {
    const setTrack = type === "audio" ? setAudioTrack : setSubtitleTrack;
    const paramKey = type === "audio" ? "audioIndex" : "subtitleIndex";

    // If we're transcoding and we're going from a image based subtitle
    // to a text based subtitle, we need to change the player params.

-    const shouldChangePlayerParams =
-      type === "subtitle" &&
-      mediaSource?.TranscodingUrl &&
-      !onTextBasedSubtitle;
+    const shouldChangePlayerParams = type === "subtitle" && mediaSource?.TranscodingUrl && !onTextBasedSubtitle;

    console.log("Set player params", index, serverIndex);
    if (shouldChangePlayerParams) {
@@ -129,23 +101,22 @@ export const VideoProvider: React.FC<VideoProviderProps> = ({
      if (getSubtitleTracks) {
        const subtitleData = await getSubtitleTracks();

+        // Step 1: Move external subs to the end, because VLC puts external subs at the end
+        const sortedSubs = allSubs.sort((a, b) => Number(a.IsExternal) - Number(b.IsExternal));
+
+        // Step 2: Apply VLC indexing logic
        let textSubIndex = 0;
-        const subtitles: Track[] = allSubs?.map((sub) => {
+        const processedSubs: Track[] = sortedSubs?.map((sub) => {
          // Always increment for non-transcoding subtitles
          // Only increment for text-based subtitles when transcoding
-          const shouldIncrement =
-            !mediaSource?.TranscodingUrl || sub.IsTextSubtitleStream;
-
-          const displayTitle = sub.DisplayTitle || "Undefined Subtitle";
+          const shouldIncrement = !mediaSource?.TranscodingUrl || sub.IsTextSubtitleStream;
          const vlcIndex = subtitleData?.at(textSubIndex)?.index ?? -1;
-
          const finalIndex = shouldIncrement ? vlcIndex : sub.Index ?? -1;

          if (shouldIncrement) textSubIndex++;
          return {
-            name: displayTitle,
+            name: sub.DisplayTitle || "Undefined Subtitle",
            index: sub.Index ?? -1,
-            originalIndex: finalIndex,
            setTrack: () =>
              shouldIncrement
                ? setTrackParams("subtitle", finalIndex, sub.Index ?? -1)
@@ -155,6 +126,9 @@ export const VideoProvider: React.FC<VideoProviderProps> = ({
          };
        });

+        // Step 3: Restore the original order
+        const subtitles: Track[] = processedSubs.sort((a, b) => a.index - b.index);
+
        // Add a "Disable Subtitles" option
        subtitles.unshift({
          name: "Disable",
@@ -164,36 +138,25 @@ export const VideoProvider: React.FC<VideoProviderProps> = ({
              ? setTrackParams("subtitle", -1, -1)
              : setPlayerParams({ chosenSubtitleIndex: "-1" }),
        });
-
        setSubtitleTracks(subtitles);
      }
-      if (
-        getAudioTracks &&
-        (audioTracks === null || audioTracks.length === 0)
-      ) {
+      if (getAudioTracks) {
        const audioData = await getAudioTracks();
-        if (!audioData) return;
-
-        console.log("audioData", audioData);
-
-        const allAudio =
-          mediaSource?.MediaStreams?.filter((s) => s.Type === "Audio") || [];

+        const allAudio = mediaSource?.MediaStreams?.filter((s) => s.Type === "Audio") || [];
        const audioTracks: Track[] = allAudio?.map((audio, idx) => {
          if (!mediaSource?.TranscodingUrl) {
            const vlcIndex = audioData?.at(idx)?.index ?? -1;
            return {
              name: audio.DisplayTitle ?? "Undefined Audio",
              index: audio.Index ?? -1,
-              setTrack: () =>
-                setTrackParams("audio", vlcIndex, audio.Index ?? -1),
+              setTrack: () => setTrackParams("audio", vlcIndex, audio.Index ?? -1),
            };
          }
          return {
            name: audio.DisplayTitle ?? "Undefined Audio",
            index: audio.Index ?? -1,
-            setTrack: () =>
-              setPlayerParams({ chosenAudioIndex: audio.Index?.toString() }),
+            setTrack: () => setPlayerParams({ chosenAudioIndex: audio.Index?.toString() }),
          };
        });
        setAudioTracks(audioTracks);
--- a/components/video-player/controls/dropdown/DropdownView.tsx
+++ b/components/video-player/controls/dropdown/DropdownView.tsx
@@ -1,23 +1,20 @@
-import React from "react";
+import React, { useCallback } from "react";
 import { TouchableOpacity, Platform } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
 const DropdownMenu = !Platform.isTV ? require("zeego/dropdown-menu") : null;
 import { useVideoContext } from "../contexts/VideoContext";
-import { useLocalSearchParams } from "expo-router";
+import { useLocalSearchParams, useRouter } from "expo-router";
+import { BITRATES } from "@/components/BitrateSelector";
+import { useControlContext } from "../contexts/ControlContext";

-interface DropdownViewProps {
-  showControls: boolean;
-  offline?: boolean; // used to disable external subs for downloads
-}
-
-const DropdownView: React.FC<DropdownViewProps> = ({
-  showControls,
-  offline = false,
-}) => {
+const DropdownView = () => {
  const videoContext = useVideoContext();
  const { subtitleTracks, audioTracks } = videoContext;
+  const ControlContext = useControlContext();
+  const [item, mediaSource] = [ControlContext?.item, ControlContext?.mediaSource];
+  const router = useRouter();

-  const { subtitleIndex, audioIndex } = useLocalSearchParams<{
+  const { subtitleIndex, audioIndex, bitrateValue } = useLocalSearchParams<{
    itemId: string;
    audioIndex: string;
    subtitleIndex: string;
@@ -25,6 +22,21 @@ const DropdownView: React.FC<DropdownViewProps> = ({
    bitrateValue: string;
  }>();

+  const changeBitrate = useCallback(
+    (bitrate: string) => {
+      const queryParams = new URLSearchParams({
+        itemId: item.Id ?? "",
+        audioIndex: audioIndex?.toString() ?? "",
+        subtitleIndex: subtitleIndex.toString() ?? "",
+        mediaSourceId: mediaSource?.Id ?? "",
+        bitrateValue: bitrate.toString(),
+      }).toString();
+      // @ts-expect-error
+      router.replace(`player/direct-player?${queryParams}`);
+    },
+    [item, mediaSource, subtitleIndex, audioIndex]
+  );
+
  return (
    <DropdownMenu.Root>
      <DropdownMenu.Trigger>
@@ -42,9 +54,27 @@ const DropdownView: React.FC<DropdownViewProps> = ({
        sideOffset={8}
      >
        <DropdownMenu.Sub>
-          <DropdownMenu.SubTrigger key="subtitle-trigger">
-            Subtitle
-          </DropdownMenu.SubTrigger>
+          <DropdownMenu.SubTrigger key="qualitytrigger">Quality</DropdownMenu.SubTrigger>
+          <DropdownMenu.SubContent
+            alignOffset={-10}
+            avoidCollisions={true}
+            collisionPadding={0}
+            loop={true}
+            sideOffset={10}
+          >
+            {BITRATES?.map((bitrate, idx: number) => (
+              <DropdownMenu.CheckboxItem
+                key={`quality-item-${idx}`}
+                value={bitrateValue === (bitrate.value?.toString() ?? "")}
+                onValueChange={() => changeBitrate(bitrate.value?.toString() ?? "")}
+              >
+                <DropdownMenu.ItemTitle key={`audio-item-title-${idx}`}>{bitrate.key}</DropdownMenu.ItemTitle>
+              </DropdownMenu.CheckboxItem>
+            ))}
+          </DropdownMenu.SubContent>
+        </DropdownMenu.Sub>
+        <DropdownMenu.Sub>
+          <DropdownMenu.SubTrigger key="subtitle-trigger">Subtitle</DropdownMenu.SubTrigger>
          <DropdownMenu.SubContent
            alignOffset={-10}
            avoidCollisions={true}
@@ -58,17 +88,13 @@ const DropdownView: React.FC<DropdownViewProps> = ({
                value={subtitleIndex === sub.index.toString()}
                onValueChange={() => sub.setTrack()}
              >
-                <DropdownMenu.ItemTitle key={`subtitle-item-title-${idx}`}>
-                  {sub.name}
-                </DropdownMenu.ItemTitle>
+                <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.SubTrigger key="audio-trigger">Audio</DropdownMenu.SubTrigger>
          <DropdownMenu.SubContent
            alignOffset={-10}
            avoidCollisions={true}
@@ -82,9 +108,7 @@ const DropdownView: React.FC<DropdownViewProps> = ({
                value={audioIndex === track.index.toString()}
                onValueChange={() => track.setTrack()}
              >
-                <DropdownMenu.ItemTitle key={`audio-item-title-${idx}`}>
-                  {track.name}
-                </DropdownMenu.ItemTitle>
+                <DropdownMenu.ItemTitle key={`audio-item-title-${idx}`}>{track.name}</DropdownMenu.ItemTitle>
              </DropdownMenu.CheckboxItem>
            ))}
          </DropdownMenu.SubContent>
--- a/modules/vlc-player/ios/VlcPlayer.podspec
+++ b/modules/vlc-player/ios/VlcPlayer.podspec
@@ -12,6 +12,7 @@ Pod::Spec.new do |s|
  s.dependency 'ExpoModulesCore'
  s.ios.dependency 'VLCKit', s.version
  s.tvos.dependency 'VLCKit', s.version
+  s.dependency 'Alamofire', '~> 5.10'

  # Swift/Objective-C compatibility
  s.pod_target_xcconfig = {
--- a/modules/vlc-player/ios/VlcPlayerView.swift
+++ b/modules/vlc-player/ios/VlcPlayerView.swift
@@ -459,7 +459,9 @@ extension VlcPlayerView: SimpleAppLifecycleListener {
        }

        // Current solution to fixing black screen when re-entering application
-        if let videoTrack = self.vlc.player.videoTracks.first { $0.isSelected == true }, !self.vlc.isMediaPlaying() {
+        if let videoTrack = self.vlc.player.videoTracks.first { $0.isSelected == true },
+            !self.vlc.isMediaPlaying()
+        {
            videoTrack.isSelected = false
            videoTrack.isSelectedExclusively = true
            self.vlc.player.play()
--- a/translations/it.json
+++ b/translations/it.json
@@ -343,7 +343,7 @@
    "an_error_occured_while_playing_the_video": "Si è verificato un errore durante la riproduzione del video. Controllare i log nelle impostazioni.",
    "client_error": "Errore del client",
    "could_not_create_stream_for_chromecast": "Impossibile creare uno stream per Chromecast",
-      "message_from_server": "Messaggio dal server: {{messagge}}",
+    "message_from_server": "Messaggio dal server",
    "video_has_finished_playing": "La riproduzione del video è terminata!",
    "no_video_source": "Nessuna sorgente video...",
    "next_episode": "Prossimo Episodio",
--- a/translations/ja.json
+++ b/translations/ja.json
@@ -342,7 +342,7 @@
    "an_error_occured_while_playing_the_video": "動画の再生中にエラーが発生しました。設定でログを確認してください。",
    "client_error": "クライアントエラー",
    "could_not_create_stream_for_chromecast": "Chromecastのストリームを作成できませんでした",
-    "message_from_server": "サーバーからのメッセージ： {{message}}",
+    "message_from_server": "サーバーからのメッセージ",
    "video_has_finished_playing": "ビデオの再生が終了しました！",
    "no_video_source": "動画ソースがありません...",
    "next_episode": "次のエピソード",
--- a/translations/nl.json
+++ b/translations/nl.json
@@ -343,7 +343,7 @@
    "an_error_occured_while_playing_the_video": "Er is een fout opgetreden tijdens het afspelen van de video. Controleer de logs in de instellingen.",
    "client_error": "Fout van de client",
    "could_not_create_stream_for_chromecast": "Kon geen stream maken voor Chromecast",
-    "message_from_server": "Bericht van de server: {{message}}",
+    "message_from_server": "Bericht van de server",
    "video_has_finished_playing": "Video is gedaan met spelen!",
    "no_video_source": "Geen video bron...",
    "next_episode": "Volgende Aflevering",
--- a/translations/zh-CN.json
+++ b/translations/zh-CN.json
@@ -342,7 +342,7 @@
    "an_error_occured_while_playing_the_video": "播放视频时发生错误。请检查设置中的日志。",
    "client_error": "客户端错误",
    "could_not_create_stream_for_chromecast": "无法为 Chromecast 建立串流",
-    "message_from_server": "来自服务器的消息：{{message}}",
+    "message_from_server": "来自服务器的消息",
    "video_has_finished_playing": "视频播放完成！",
    "no_video_source": "无视频来源...",
    "next_episode": "下一集",
--- a/translations/zh-TW.json
+++ b/translations/zh-TW.json
@@ -342,7 +342,7 @@
    "an_error_occured_while_playing_the_video": "播放影片時發生錯誤。請檢查設置中的日誌。",
    "client_error": "客戶端錯誤",
    "could_not_create_stream_for_chromecast": "無法為 Chromecast 建立串流",
-    "message_from_server": "來自伺服器的消息：{{message}}",
+    "message_from_server": "來自伺服器的消息",
    "video_has_finished_playing": "影片播放完畢！",
    "no_video_source": "無影片來源...",
    "next_episode": "下一集",
--- a/utils/profiles/native.js
+++ b/utils/profiles/native.js
@@ -28,7 +28,7 @@ export default {
      Container: "mp4,mkv,avi,mov,flv,ts,m2ts,webm,ogv,3gp,hls",
      VideoCodec:
        "h264,hevc,mpeg4,divx,xvid,wmv,vc1,vp8,vp9,av1,avi,mpeg,mpeg2video",
-      AudioCodec: "aac,ac3,eac3,mp3,flac,alac,opus,vorbis,wma",
+      AudioCodec: "aac,ac3,eac3,mp3,flac,alac,opus,vorbis,wma,dts",
    },
    {
      Type: MediaTypes.Audio,