fix: move from react-native-video -> VLC for transcoded streams (#529)

Co-authored-by: Alex Kim <alexkim5682@gmail.com>

components/ItemContent.tsx

@@ -16,7 +16,6 @@ import useDefaultPlaySettings from "@/hooks/useDefaultPlaySettings";
 import { useImageColors } from "@/hooks/useImageColors";
 import { useOrientation } from "@/hooks/useOrientation";
 import { apiAtom } from "@/providers/JellyfinProvider";
-import { SubtitleHelper } from "@/utils/SubtitleHelper";
 import { useSettings } from "@/utils/atoms/settings";
 import { getLogoImageUrlById } from "@/utils/jellyfin/image/getLogoImageUrlById";
 import {
@@ -118,37 +117,6 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
     const loading = useMemo(() => {
       return Boolean(logoUrl && loadingLogo);
     }, [loadingLogo, logoUrl]);
-
-    const [isTranscoding, setIsTranscoding] = useState(false);
-    const [previouslyChosenSubtitleIndex, setPreviouslyChosenSubtitleIndex] =
-      useState<number | undefined>(selectedOptions?.subtitleIndex);
-
-    useEffect(() => {
-      const isTranscoding = Boolean(selectedOptions?.bitrate.value);
-      if (isTranscoding) {
-        setPreviouslyChosenSubtitleIndex(selectedOptions?.subtitleIndex);
-        const subHelper = new SubtitleHelper(
-          selectedOptions?.mediaSource?.MediaStreams ?? []
-        );
-
-        const newSubtitleIndex = subHelper.getMostCommonSubtitleByName(
-          selectedOptions?.subtitleIndex
-        );
-
-        setSelectedOptions((prev) => ({
-          ...prev!,
-          subtitleIndex: newSubtitleIndex ?? -1,
-        }));
-      }
-      if (!isTranscoding && previouslyChosenSubtitleIndex !== undefined) {
-        setSelectedOptions((prev) => ({
-          ...prev!,
-          subtitleIndex: previouslyChosenSubtitleIndex,
-        }));
-      }
-      setIsTranscoding(isTranscoding);
-    }, [selectedOptions?.bitrate]);
-
     if (!selectedOptions) return null;
 
     return (
@@ -239,7 +207,6 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
                     selected={selectedOptions.audioIndex}
                   />
                   <SubtitleTrackSelector
-                    isTranscoding={isTranscoding}
                     source={selectedOptions.mediaSource}
                     onChange={(val) =>
                       setSelectedOptions(

components/PlayButton.tsx

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

components/PlayButton.tv.tsx

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

components/SubtitleTrackSelector.tsx

@@ -4,40 +4,31 @@ import { useMemo } from "react";
 import { Platform, TouchableOpacity, View } from "react-native";
 const DropdownMenu = !Platform.isTV ? require("zeego/dropdown-menu") : null;
 import { Text } from "./common/Text";
-import { SubtitleHelper } from "@/utils/SubtitleHelper";
 import { useTranslation } from "react-i18next";
 
 interface Props extends React.ComponentProps<typeof View> {
   source?: MediaSourceInfo;
   onChange: (value: number) => void;
   selected?: number | undefined;
-  isTranscoding?: boolean;
 }
 
 export const SubtitleTrackSelector: React.FC<Props> = ({
   source,
   onChange,
   selected,
-  isTranscoding,
   ...props
 }) => {
   if (Platform.isTV) return null;
   const subtitleStreams = useMemo(() => {
-    const subtitleHelper = new SubtitleHelper(source?.MediaStreams ?? []);
-
-    if (isTranscoding && Platform.OS === "ios") {
-      return subtitleHelper.getUniqueSubtitles();
-    }
-
-    return subtitleHelper.getSubtitles();
-  }, [source, isTranscoding]);
+    return source?.MediaStreams?.filter((x) => x.Type === "Subtitle");
+  }, [source]);
 
   const selectedSubtitleSteam = useMemo(
-    () => subtitleStreams.find((x) => x.Index === selected),
+    () => subtitleStreams?.find((x) => x.Index === selected),
     [subtitleStreams, selected]
   );
 
-  if (subtitleStreams.length === 0) return null;
+  if (subtitleStreams?.length === 0) return null;
 
   const { t } = useTranslation();
 

components/video-player/controls/Controls.tsx

@@ -24,7 +24,7 @@ import {
   ticksToMs,
   ticksToSeconds,
 } from "@/utils/time";
-import {Ionicons, MaterialIcons} from "@expo/vector-icons";
+import { Ionicons, MaterialIcons } from "@expo/vector-icons";
 import {
   BaseItemDto,
   MediaSourceInfo,
@@ -35,7 +35,12 @@ import * as ScreenOrientation from "@/packages/expo-screen-orientation";
 import { useAtom } from "jotai";
 import { debounce } from "lodash";
 import React, { useCallback, useEffect, useRef, useState } from "react";
-import {Platform, TouchableOpacity, useWindowDimensions, View} from "react-native";
+import {
+  Platform,
+  TouchableOpacity,
+  useWindowDimensions,
+  View,
+} from "react-native";
 import { Slider } from "react-native-awesome-slider";
 import {
   runOnJS,
@@ -49,8 +54,7 @@ import AudioSlider from "./AudioSlider";
 import BrightnessSlider from "./BrightnessSlider";
 import { ControlProvider } from "./contexts/ControlContext";
 import { VideoProvider } from "./contexts/VideoContext";
-import DropdownViewDirect from "./dropdown/DropdownViewDirect";
-import DropdownViewTranscoding from "./dropdown/DropdownViewTranscoding";
+import DropdownView from "./dropdown/DropdownView";
 import { EpisodeList } from "./EpisodeList";
 import NextEpisodeCountDownButton from "./NextEpisodeCountDownButton";
 import SkipButton from "./SkipButton";
@@ -214,15 +218,10 @@ export const Controls: React.FC<Props> = ({
       bitrateValue: bitrateValue.toString(),
     }).toString();
 
-    stop()
+    stop();
 
-    if (!bitrateValue) {
-      // @ts-expect-error
-      router.replace(`player/direct-player?${queryParams}`);
-      return;
-    }
     // @ts-expect-error
-    router.replace(`player/transcoding-player?${queryParams}`);
+    router.replace(`player/direct-player?${queryParams}`);
   }, [previousItem, settings, subtitleIndex, audioIndex]);
 
   const goToNextItem = useCallback(() => {
@@ -254,15 +253,10 @@ export const Controls: React.FC<Props> = ({
       bitrateValue: bitrateValue.toString(),
     }).toString();
 
-    stop()
+    stop();
 
-    if (!bitrateValue) {
-      // @ts-expect-error
-      router.replace(`player/direct-player?${queryParams}`);
-      return;
-    }
     // @ts-expect-error
-    router.replace(`player/transcoding-player?${queryParams}`);
+    router.replace(`player/direct-player?${queryParams}`);
   }, [nextItem, settings, subtitleIndex, audioIndex]);
 
   const updateTimes = useCallback(
@@ -419,15 +413,10 @@ export const Controls: React.FC<Props> = ({
           bitrateValue: bitrateValue.toString(),
         }).toString();
 
-        stop()
+        stop();
 
-        if (!bitrateValue) {
-          // @ts-expect-error
-          router.replace(`player/direct-player?${queryParams}`);
-          return;
-        }
         // @ts-expect-error
-        router.replace(`player/transcoding-player?${queryParams}`);
+        router.replace(`player/direct-player?${queryParams}`);
       } catch (error) {
         console.error("Error in gotoEpisode:", error);
       }
@@ -508,7 +497,7 @@ export const Controls: React.FC<Props> = ({
   }, [trickPlayUrl, trickplayInfo, time]);
 
   const onClose = async () => {
-    stop()
+    stop();
     lightHapticFeedback();
     await ScreenOrientation.lockAsync(
       ScreenOrientation.OrientationLock.PORTRAIT_UP
@@ -559,19 +548,13 @@ export const Controls: React.FC<Props> = ({
                 setSubtitleTrack={setSubtitleTrack}
                 setSubtitleURL={setSubtitleURL}
               >
-                {!mediaSource?.TranscodingUrl ? (
-                  <DropdownViewDirect showControls={showControls} />
-                ) : (
-                  <DropdownViewTranscoding showControls={showControls} />
-                )}
+                <DropdownView showControls={showControls} />
               </VideoProvider>
             </View>
 
             <View className="flex flex-row items-center space-x-2 ">
               {!Platform.isTV && (
-                <TouchableOpacity
-                  onPress={startPictureInPicture}
-                >
+                <TouchableOpacity onPress={startPictureInPicture}>
                   <MaterialIcons
                     name="picture-in-picture"
                     size={24}

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

@@ -9,12 +9,15 @@ import React, {
   useState,
   ReactNode,
   useEffect,
+  useMemo,
 } from "react";
 import { useControlContext } from "./ControlContext";
+import { Track } from "../types";
+import { router, useLocalSearchParams } from "expo-router";
 
 interface VideoContextProps {
-  audioTracks: TrackInfo[] | null;
-  subtitleTracks: TrackInfo[] | null;
+  audioTracks: Track[] | null;
+  subtitleTracks: Track[] | null;
   setAudioTrack: ((index: number) => void) | undefined;
   setSubtitleTrack: ((index: number) => void) | undefined;
   setSubtitleURL: ((url: string, customName: string) => void) | undefined;
@@ -45,30 +48,155 @@ export const VideoProvider: React.FC<VideoProviderProps> = ({
   setSubtitleURL,
   setAudioTrack,
 }) => {
-  const [audioTracks, setAudioTracks] = useState<TrackInfo[] | null>(null);
-  const [subtitleTracks, setSubtitleTracks] = useState<TrackInfo[] | null>(
-    null
-  );
+  const [audioTracks, setAudioTracks] = useState<Track[] | null>(null);
+  const [subtitleTracks, setSubtitleTracks] = useState<Track[] | null>(null);
 
   const ControlContext = useControlContext();
   const isVideoLoaded = ControlContext?.isVideoLoaded;
+  const mediaSource = ControlContext?.mediaSource;
+
+  const allSubs =
+    mediaSource?.MediaStreams?.filter((s) => s.Type === "Subtitle") || [];
+
+  const { itemId, audioIndex, bitrateValue, subtitleIndex } =
+    useLocalSearchParams<{
+      itemId: string;
+      audioIndex: string;
+      subtitleIndex: string;
+      mediaSourceId: string;
+      bitrateValue: string;
+    }>();
+
+  const onTextBasedSubtitle = useMemo(
+    () =>
+      allSubs.find(
+        (s) => s.Index?.toString() === subtitleIndex && s.IsTextSubtitleStream
+      ) || subtitleIndex === "-1",
+    [allSubs, subtitleIndex]
+  );
+
+  const setPlayerParams = ({
+    chosenAudioIndex = audioIndex,
+    chosenSubtitleIndex = subtitleIndex,
+  }: {
+    chosenAudioIndex?: string;
+    chosenSubtitleIndex?: string;
+  }) => {
+    console.log("chosenSubtitleIndex", chosenSubtitleIndex);
+    const queryParams = new URLSearchParams({
+      itemId: itemId ?? "",
+      audioIndex: chosenAudioIndex,
+      subtitleIndex: chosenSubtitleIndex,
+      mediaSourceId: mediaSource?.Id ?? "",
+      bitrateValue: bitrateValue,
+    }).toString();
+
+    //@ts-ignore
+    router.replace(`player/direct-player?${queryParams}`);
+  };
+
+  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;
+
+    console.log("Set player params", index, serverIndex);
+    if (shouldChangePlayerParams) {
+      setPlayerParams({
+        chosenSubtitleIndex: serverIndex.toString(),
+      });
+      return;
+    }
+    setTrack && setTrack(index);
+    router.setParams({
+      [paramKey]: serverIndex.toString(),
+    });
+  };
 
   useEffect(() => {
     const fetchTracks = async () => {
-      if (
-        getSubtitleTracks &&
-        (subtitleTracks === null || subtitleTracks.length === 0)
-      ) {
-        const subtitles = await getSubtitleTracks();
-        console.log("Getting embeded subtitles...", subtitles);
+      if (getSubtitleTracks) {
+        const subtitleData = await getSubtitleTracks();
+
+        let textSubIndex = 0;
+        const subtitles: Track[] = allSubs?.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 vlcIndex = subtitleData?.at(textSubIndex)?.index ?? -1;
+
+          const finalIndex = shouldIncrement ? vlcIndex : sub.Index ?? -1;
+
+          if (shouldIncrement) textSubIndex++;
+          return {
+            name: displayTitle,
+            index: sub.Index ?? -1,
+            originalIndex: finalIndex,
+            setTrack: () =>
+              shouldIncrement
+                ? setTrackParams("subtitle", finalIndex, sub.Index ?? -1)
+                : setPlayerParams({
+                    chosenSubtitleIndex: sub.Index?.toString(),
+                  }),
+          };
+        });
+
+        // Add a "Disable Subtitles" option
+        subtitles.unshift({
+          name: "Disable",
+          index: -1,
+          setTrack: () =>
+            !mediaSource?.TranscodingUrl || onTextBasedSubtitle
+              ? setTrackParams("subtitle", -1, -1)
+              : setPlayerParams({ chosenSubtitleIndex: "-1" }),
+        });
+
         setSubtitleTracks(subtitles);
       }
       if (
         getAudioTracks &&
         (audioTracks === null || audioTracks.length === 0)
       ) {
-        const audio = await getAudioTracks();
-        setAudioTracks(audio);
+        const audioData = await getAudioTracks();
+        if (!audioData) return;
+
+        console.log("audioData", audioData);
+
+        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),
+            };
+          }
+          return {
+            name: audio.DisplayTitle ?? "Undefined Audio",
+            index: audio.Index ?? -1,
+            setTrack: () =>
+              setPlayerParams({ chosenAudioIndex: audio.Index?.toString() }),
+          };
+        });
+        setAudioTracks(audioTracks);
       }
     };
     fetchTracks();

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

@@ -1,67 +1,21 @@
-import React, { useMemo, useState } from "react";
-import { View, TouchableOpacity, Platform } from "react-native";
+import React from "react";
+import { TouchableOpacity, Platform } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
 const DropdownMenu = !Platform.isTV ? require("zeego/dropdown-menu") : null;
-import { useControlContext } from "../contexts/ControlContext";
 import { useVideoContext } from "../contexts/VideoContext";
-import { EmbeddedSubtitle, ExternalSubtitle } from "../types";
-import { useAtomValue } from "jotai";
-import { apiAtom } from "@/providers/JellyfinProvider";
-import { router, useLocalSearchParams } from "expo-router";
+import { useLocalSearchParams } from "expo-router";
 
-interface DropdownViewDirectProps {
+interface DropdownViewProps {
   showControls: boolean;
   offline?: boolean; // used to disable external subs for downloads
 }
 
-const DropdownViewDirect: React.FC<DropdownViewDirectProps> = ({
+const DropdownView: React.FC<DropdownViewProps> = ({
   showControls,
   offline = false,
 }) => {
-  const api = useAtomValue(apiAtom);
-  const ControlContext = useControlContext();
-  const mediaSource = ControlContext?.mediaSource;
-  const item = ControlContext?.item;
-  const isVideoLoaded = ControlContext?.isVideoLoaded;
-
   const videoContext = useVideoContext();
-  const {
-    subtitleTracks,
-    audioTracks,
-    setSubtitleURL,
-    setSubtitleTrack,
-    setAudioTrack,
-  } = videoContext;
-
-  const allSubtitleTracksForDirectPlay = useMemo(() => {
-    if (mediaSource?.TranscodingUrl) return null;
-    const embeddedSubs =
-      subtitleTracks
-        ?.map((s) => ({
-          name: s.name,
-          index: s.index,
-          deliveryUrl: undefined,
-        }))
-        .filter((sub) => !sub.name.endsWith("[External]")) || [];
-
-    const externalSubs =
-      mediaSource?.MediaStreams?.filter(
-        (stream) => stream.Type === "Subtitle" && !!stream.DeliveryUrl
-      ).map((s) => ({
-        name: s.DisplayTitle! + " [External]",
-        index: s.Index!,
-        deliveryUrl: s.DeliveryUrl,
-      })) || [];
-
-    // Combine embedded subs with external subs only if not offline
-    if (!offline) {
-      return [...embeddedSubs, ...externalSubs] as (
-        | EmbeddedSubtitle
-        | ExternalSubtitle
-      )[];
-    }
-    return embeddedSubs as EmbeddedSubtitle[];
-  }, [item, isVideoLoaded, subtitleTracks, mediaSource?.MediaStreams, offline]);
+  const { subtitleTracks, audioTracks } = videoContext;
 
   const { subtitleIndex, audioIndex } = useLocalSearchParams<{
     itemId: string;
@@ -98,21 +52,11 @@ const DropdownViewDirect: React.FC<DropdownViewDirectProps> = ({
             loop={true}
             sideOffset={10}
           >
-            {allSubtitleTracksForDirectPlay?.map((sub, idx: number) => (
+            {subtitleTracks?.map((sub, idx: number) => (
               <DropdownMenu.CheckboxItem
                 key={`subtitle-item-${idx}`}
                 value={subtitleIndex === sub.index.toString()}
-                onValueChange={() => {
-                  if ("deliveryUrl" in sub && sub.deliveryUrl) {
-                    setSubtitleURL &&
-                      setSubtitleURL(api?.basePath + sub.deliveryUrl, sub.name);
-                  } else {
-                    setSubtitleTrack && setSubtitleTrack(sub.index);
-                  }
-                  router.setParams({
-                    subtitleIndex: sub.index.toString(),
-                  });
-                }}
+                onValueChange={() => sub.setTrack()}
               >
                 <DropdownMenu.ItemTitle key={`subtitle-item-title-${idx}`}>
                   {sub.name}
@@ -136,12 +80,7 @@ const DropdownViewDirect: React.FC<DropdownViewDirectProps> = ({
               <DropdownMenu.CheckboxItem
                 key={`audio-item-${idx}`}
                 value={audioIndex === track.index.toString()}
-                onValueChange={() => {
-                  setAudioTrack && setAudioTrack(track.index);
-                  router.setParams({
-                    audioIndex: track.index.toString(),
-                  });
-                }}
+                onValueChange={() => track.setTrack()}
               >
                 <DropdownMenu.ItemTitle key={`audio-item-title-${idx}`}>
                   {track.name}
@@ -155,4 +94,4 @@ const DropdownViewDirect: React.FC<DropdownViewDirectProps> = ({
   );
 };
 
-export default DropdownViewDirect;
+export default DropdownView;

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

@@ -1,228 +0,0 @@
-import React, { useCallback, useMemo, useState } from "react";
-import { View, TouchableOpacity, Platform } from "react-native";
-import { Ionicons } from "@expo/vector-icons";
-const DropdownMenu = !Platform.isTV ? require("zeego/dropdown-menu") : null;
-import { useControlContext } from "../contexts/ControlContext";
-import { useVideoContext } from "../contexts/VideoContext";
-import { TranscodedSubtitle } from "../types";
-import { useAtomValue } from "jotai";
-import { apiAtom } from "@/providers/JellyfinProvider";
-import { useLocalSearchParams, useRouter } from "expo-router";
-import { SubtitleHelper } from "@/utils/SubtitleHelper";
-
-interface DropdownViewProps {
-  showControls: boolean;
-  offline?: boolean; // used to disable external subs for downloads
-}
-
-const DropdownView: React.FC<DropdownViewProps> = ({ showControls }) => {
-  const router = useRouter();
-  const api = useAtomValue(apiAtom);
-  const ControlContext = useControlContext();
-  const mediaSource = ControlContext?.mediaSource;
-  const item = ControlContext?.item;
-  const isVideoLoaded = ControlContext?.isVideoLoaded;
-
-  const videoContext = useVideoContext();
-  const { subtitleTracks, setSubtitleTrack } = videoContext;
-
-  const { subtitleIndex, audioIndex, bitrateValue } = useLocalSearchParams<{
-    itemId: string;
-    audioIndex: string;
-    subtitleIndex: string;
-    mediaSourceId: string;
-    bitrateValue: string;
-  }>();
-
-  // Either its on a text subtitle or its on not on any subtitle therefore it should show all the embedded HLS subtitles.
-
-  const isOnTextSubtitle = useMemo(() => {
-    const res = Boolean(
-      mediaSource?.MediaStreams?.find(
-        (x) => x.Index === parseInt(subtitleIndex) && x.IsTextSubtitleStream
-      ) || subtitleIndex === "-1"
-    );
-    return res;
-  }, []);
-
-  const allSubs =
-    mediaSource?.MediaStreams?.filter((x) => x.Type === "Subtitle") ?? [];
-
-  const subtitleHelper = new SubtitleHelper(mediaSource?.MediaStreams ?? []);
-
-  const allSubtitleTracksForTranscodingStream = useMemo(() => {
-    const disableSubtitle = {
-      name: "Disable",
-      index: -1,
-      IsTextSubtitleStream: true,
-    } as TranscodedSubtitle;
-    if (isOnTextSubtitle) {
-      const textSubtitles =
-        subtitleTracks?.map((s) => ({
-          name: s.name,
-          index: s.index,
-          IsTextSubtitleStream: true,
-        })) || [];
-
-      const sortedSubtitles = subtitleHelper.getSortedSubtitles(textSubtitles);
-
-      return [disableSubtitle, ...sortedSubtitles];
-    }
-
-    const transcodedSubtitle: TranscodedSubtitle[] = allSubs.map((x) => ({
-      name: x.DisplayTitle!,
-      index: x.Index!,
-      IsTextSubtitleStream: x.IsTextSubtitleStream!,
-    }));
-
-    return [disableSubtitle, ...transcodedSubtitle];
-  }, [item, isVideoLoaded, subtitleTracks, mediaSource?.MediaStreams]);
-
-  const changeToImageBasedSub = useCallback(
-    (subtitleIndex: number) => {
-      const queryParams = new URLSearchParams({
-        itemId: item.Id ?? "", // Ensure itemId is a string
-        audioIndex: audioIndex?.toString() ?? "",
-        subtitleIndex: subtitleIndex?.toString() ?? "",
-        mediaSourceId: mediaSource?.Id ?? "", // Ensure mediaSourceId is a string
-        bitrateValue: bitrateValue,
-      }).toString();
-
-      // @ts-expect-error
-      router.replace(`player/transcoding-player?${queryParams}`);
-    },
-    [mediaSource]
-  );
-
-  // Audio tracks for transcoding streams.
-  const allAudio =
-    mediaSource?.MediaStreams?.filter((x) => x.Type === "Audio").map((x) => ({
-      name: x.DisplayTitle!,
-      index: x.Index!,
-    })) || [];
-
-  const ChangeTranscodingAudio = useCallback(
-    (audioIndex: number) => {
-      const queryParams = new URLSearchParams({
-        itemId: item.Id ?? "", // Ensure itemId is a string
-        audioIndex: audioIndex?.toString() ?? "",
-        subtitleIndex: subtitleIndex?.toString() ?? "",
-        mediaSourceId: mediaSource?.Id ?? "", // Ensure mediaSourceId is a string
-        bitrateValue: bitrateValue,
-      }).toString();
-
-      // @ts-expect-error
-      router.replace(`player/transcoding-player?${queryParams}`);
-    },
-    [mediaSource, subtitleIndex, audioIndex]
-  );
-
-  return (
-    <View>
-      <DropdownMenu.Root>
-        <DropdownMenu.Trigger>
-          <TouchableOpacity className="aspect-square flex flex-col rounded-xl items-center justify-center p-2">
-            <Ionicons name="ellipsis-horizontal" size={24} color={"white"} />
-          </TouchableOpacity>
-        </DropdownMenu.Trigger>
-        <DropdownMenu.Content
-          loop={true}
-          side="bottom"
-          align="start"
-          alignOffset={0}
-          avoidCollisions={true}
-          collisionPadding={8}
-          sideOffset={8}
-        >
-          <DropdownMenu.Sub>
-            <DropdownMenu.SubTrigger key="subtitle-trigger">
-              Subtitle
-            </DropdownMenu.SubTrigger>
-            <DropdownMenu.SubContent
-              alignOffset={-10}
-              avoidCollisions={true}
-              collisionPadding={0}
-              loop={true}
-              sideOffset={10}
-            >
-              {allSubtitleTracksForTranscodingStream?.map(
-                (sub, idx: number) => (
-                  <DropdownMenu.CheckboxItem
-                    value={
-                      subtitleIndex ===
-                      (isOnTextSubtitle && sub.IsTextSubtitleStream
-                        ? subtitleHelper
-                            .getSourceSubtitleIndex(sub.index)
-                            .toString()
-                        : sub?.index.toString())
-                    }
-                    key={`subtitle-item-${idx}`}
-                    onValueChange={() => {
-                      if (
-                        subtitleIndex ===
-                        (isOnTextSubtitle && sub.IsTextSubtitleStream
-                          ? subtitleHelper
-                              .getSourceSubtitleIndex(sub.index)
-                              .toString()
-                          : sub?.index.toString())
-                      )
-                        return;
-
-                      router.setParams({
-                        subtitleIndex: subtitleHelper
-                          .getSourceSubtitleIndex(sub.index)
-                          .toString(),
-                      });
-
-                      if (sub.IsTextSubtitleStream && isOnTextSubtitle) {
-                        setSubtitleTrack && setSubtitleTrack(sub.index);
-                        return;
-                      }
-                      changeToImageBasedSub(sub.index);
-                    }}
-                  >
-                    <DropdownMenu.ItemTitle key={`subtitle-item-title-${idx}`}>
-                      {sub.name}
-                    </DropdownMenu.ItemTitle>
-                  </DropdownMenu.CheckboxItem>
-                )
-              )}
-            </DropdownMenu.SubContent>
-          </DropdownMenu.Sub>
-          <DropdownMenu.Sub>
-            <DropdownMenu.SubTrigger key="audio-trigger">
-              Audio
-            </DropdownMenu.SubTrigger>
-            <DropdownMenu.SubContent
-              alignOffset={-10}
-              avoidCollisions={true}
-              collisionPadding={0}
-              loop={true}
-              sideOffset={10}
-            >
-              {allAudio?.map((track, idx: number) => (
-                <DropdownMenu.CheckboxItem
-                  key={`audio-item-${idx}`}
-                  value={audioIndex === track.index.toString()}
-                  onValueChange={() => {
-                    if (audioIndex === track.index.toString()) return;
-                    router.setParams({
-                      audioIndex: track.index.toString(),
-                    });
-                    ChangeTranscodingAudio(track.index);
-                  }}
-                >
-                  <DropdownMenu.ItemTitle key={`audio-item-title-${idx}`}>
-                    {track.name}
-                  </DropdownMenu.ItemTitle>
-                </DropdownMenu.CheckboxItem>
-              ))}
-            </DropdownMenu.SubContent>
-          </DropdownMenu.Sub>
-        </DropdownMenu.Content>
-      </DropdownMenu.Root>
-    </View>
-  );
-};
-
-export default DropdownView;

components/video-player/controls/types.ts

@@ -13,7 +13,14 @@ type ExternalSubtitle = {
 type TranscodedSubtitle = {
   name: string;
   index: number;
+  deliveryUrl: string;
   IsTextSubtitleStream: boolean;
 };
 
-export { EmbeddedSubtitle, ExternalSubtitle, TranscodedSubtitle };
+type Track = {
+  name: string;
+  index: number;
+  setTrack: () => void;
+};
+
+export { EmbeddedSubtitle, ExternalSubtitle, TranscodedSubtitle, Track };