Merge branch 'pr/226'

components/AudioTrackSelector.tsx

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

components/BitrateSelector.tsx

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

components/DownloadItem.tsx

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

components/GenreTags.tsx

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

components/ItemContent.tsx

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

components/MediaSourceSelector.tsx

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

components/PlayButton.tsx

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

components/PlayedStatus.tsx

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

components/SubtitleTrackSelector.tsx

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

components/common/HorrizontalScroll.tsx

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

components/downloads/ActiveDownloads.tsx

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

components/downloads/EpisodeCard.tsx

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

components/downloads/MovieCard.tsx

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

components/home/ScrollingCollectionList.tsx

@@ -31,8 +31,10 @@ export const ScrollingCollectionList: React.FC<Props> = ({
   const { data, isLoading } = useQuery({
     queryKey,
     queryFn,
-    enabled: !disabled,
     staleTime: 0,
+    refetchOnMount: true,
+    refetchOnWindowFocus: true,
+    refetchOnReconnect: true,
   });
 
   if (disabled || !title) return null;

components/music/SongsListItem.tsx

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

components/series/CastAndCrew.tsx

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

components/settings/SettingToggles.tsx

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

components/video-player/Controls.tsx

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

components/video-player/controls/Controls.tsx

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

components/video-player/controls/DropdownView.tsx

@@ -0,0 +1,346 @@
+import React, { useCallback, useMemo, useState } from "react";
+import { View, TouchableOpacity } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import * as DropdownMenu from "zeego/dropdown-menu";
+import { useControlContext } from "./contexts/ControlContext";
+import { useVideoContext } from "./contexts/VideoContext";
+import {
+  EmbeddedSubtitle,
+  ExternalSubtitle,
+  TranscodedSubtitle,
+} from "./types";
+import { useAtomValue } from "jotai";
+import { apiAtom } from "@/providers/JellyfinProvider";
+import { useLocalSearchParams, useRouter } from "expo-router";
+
+interface DropdownViewProps {
+  showControls: boolean;
+}
+
+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,
+    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 and unique external subs
+    return [...embeddedSubs, ...externalSubs] as (
+      | EmbeddedSubtitle
+      | ExternalSubtitle
+    )[];
+  }, [item, isVideoLoaded, subtitleTracks, mediaSource?.MediaStreams]);
+
+  const { subtitleIndex, audioIndex, bitrateValue } = useLocalSearchParams<{
+    itemId: string;
+    audioIndex: string;
+    subtitleIndex: string;
+    mediaSourceId: string;
+    bitrateValue: string;
+  }>();
+
+  // Either its on a text subtitle or its on not on any subtitle therefore it should show all the embedded HLS subtitles.
+  const isOnTextSubtitle =
+    mediaSource?.MediaStreams?.find(
+      (x) => x.Index === parseInt(subtitleIndex) && x.IsTextSubtitleStream
+    ) || subtitleIndex === "-1";
+
+  const allSubs =
+    mediaSource?.MediaStreams?.filter((x) => x.Type === "Subtitle") ?? [];
+  const textBasedSubs = allSubs.filter((x) => x.IsTextSubtitleStream);
+
+  // This is used in the case where it is transcoding stream.
+  const chosenSubtitle = textBasedSubs.find(
+    (x) => x.Index === parseInt(subtitleIndex)
+  );
+
+  const intialSubtitleIndex =
+    !bitrateValue || !isOnTextSubtitle
+      ? parseInt(subtitleIndex)
+      : chosenSubtitle && isOnTextSubtitle
+      ? textBasedSubs.indexOf(chosenSubtitle)
+      : -1;
+
+  const [selectedSubtitleIndex, setSelectedSubtitleIndex] =
+    useState<Number>(intialSubtitleIndex);
+  const [selectedAudioIndex, setSelectedAudioIndex] = useState<Number>(
+    parseInt(audioIndex)
+  );
+
+  // TODO: Need to account for the fact when user is on text-based subtitle at start.
+  // Then the user swaps to another text based subtitle.
+  // Then changes audio track.
+  // The user will have the first text based subtitle selected still but it should be the second text based subtitle.
+  const allSubtitleTracksForTranscodingStream = useMemo(() => {
+    const disableSubtitle = {
+      name: "Disable",
+      index: -1,
+      IsTextSubtitleStream: true,
+    } as TranscodedSubtitle;
+    if (isOnTextSubtitle) {
+      const textSubtitles =
+        subtitleTracks?.map((s) => ({
+          name: s.name,
+          index: s.index,
+          IsTextSubtitleStream: true,
+        })) || [];
+
+      const imageSubtitles = allSubs
+        .filter((x) => !x.IsTextSubtitleStream)
+        .map(
+          (x) =>
+            ({
+              name: x.DisplayTitle!,
+              index: x.Index!,
+              IsTextSubtitleStream: x.IsTextSubtitleStream,
+            } as TranscodedSubtitle)
+        );
+
+      const textSubtitlesMap = new Map(textSubtitles.map((s) => [s.name, s]));
+      const imageSubtitlesMap = new Map(imageSubtitles.map((s) => [s.name, s]));
+
+      const sortedSubtitles = Array.from(
+        new Set(
+          allSubs
+            .map((sub) => {
+              const displayTitle = sub.DisplayTitle ?? "";
+              if (textSubtitlesMap.has(displayTitle)) {
+                return textSubtitlesMap.get(displayTitle);
+              }
+              if (imageSubtitlesMap.has(displayTitle)) {
+                return imageSubtitlesMap.get(displayTitle);
+              }
+              return null;
+            })
+            .filter(
+              (subtitle): subtitle is TranscodedSubtitle => subtitle !== null
+            )
+        )
+      );
+
+      return [disableSubtitle, ...sortedSubtitles];
+    }
+
+    const transcodedSubtitle: TranscodedSubtitle[] = allSubs.map((x) => ({
+      name: x.DisplayTitle!,
+      index: x.Index!,
+      IsTextSubtitleStream: x.IsTextSubtitleStream!,
+    }));
+
+    return [disableSubtitle, ...transcodedSubtitle];
+  }, [item, isVideoLoaded, subtitleTracks, mediaSource?.MediaStreams]);
+
+  const ChangeTranscodingSubtitle = useCallback(
+    (subtitleIndex: number) => {
+      const queryParams = new URLSearchParams({
+        itemId: item.Id ?? "", // Ensure itemId is a string
+        audioIndex: audioIndex?.toString() ?? "",
+        subtitleIndex: subtitleIndex?.toString() ?? "",
+        mediaSourceId: mediaSource?.Id ?? "", // Ensure mediaSourceId is a string
+        bitrateValue: bitrateValue,
+      }).toString();
+
+      // @ts-expect-error
+      router.replace(`player/transcoding-player?${queryParams}`);
+    },
+    [mediaSource]
+  );
+
+  // Audio tracks for transcoding streams.
+  const allAudio =
+    mediaSource?.MediaStreams?.filter((x) => x.Type === "Audio").map((x) => ({
+      name: x.DisplayTitle!,
+      index: x.Index!,
+    })) || [];
+  const ChangeTranscodingAudio = useCallback(
+    (audioIndex: number) => {
+      const queryParams = new URLSearchParams({
+        itemId: item.Id ?? "", // Ensure itemId is a string
+        audioIndex: audioIndex?.toString() ?? "",
+        subtitleIndex: subtitleIndex,
+        mediaSourceId: mediaSource?.Id ?? "", // Ensure mediaSourceId is a string
+        bitrateValue: bitrateValue,
+      }).toString();
+
+      // @ts-expect-error
+      router.replace(`player/transcoding-player?${queryParams}`);
+    },
+    [mediaSource]
+  );
+
+  return (
+    <View
+      style={{
+        position: "absolute",
+        zIndex: 1000,
+        opacity: showControls ? 1 : 0,
+      }}
+      className="p-4"
+    >
+      <DropdownMenu.Root>
+        <DropdownMenu.Trigger>
+          <TouchableOpacity className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2">
+            <Ionicons name="ellipsis-horizontal" size={24} color={"white"} />
+          </TouchableOpacity>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content
+          loop={true}
+          side="bottom"
+          align="start"
+          alignOffset={0}
+          avoidCollisions={true}
+          collisionPadding={8}
+          sideOffset={8}
+        >
+          <DropdownMenu.Sub>
+            <DropdownMenu.SubTrigger key="subtitle-trigger">
+              Subtitle
+            </DropdownMenu.SubTrigger>
+            <DropdownMenu.SubContent
+              alignOffset={-10}
+              avoidCollisions={true}
+              collisionPadding={0}
+              loop={true}
+              sideOffset={10}
+            >
+              {!mediaSource?.TranscodingUrl &&
+                allSubtitleTracksForDirectPlay?.map((sub, idx: number) => (
+                  <DropdownMenu.CheckboxItem
+                    key={`subtitle-item-${idx}`}
+                    value={selectedSubtitleIndex === sub.index}
+                    onValueChange={() => {
+                      if ("deliveryUrl" in sub && sub.deliveryUrl) {
+                        setSubtitleURL &&
+                          setSubtitleURL(
+                            api?.basePath + sub.deliveryUrl,
+                            sub.name
+                          );
+
+                        console.log(
+                          "Set external subtitle: ",
+                          api?.basePath + sub.deliveryUrl
+                        );
+                      } else {
+                        console.log("Set sub index: ", sub.index);
+                        setSubtitleTrack && setSubtitleTrack(sub.index);
+                      }
+
+                      setSelectedSubtitleIndex(sub.index);
+                      console.log("Subtitle: ", sub);
+                    }}
+                  >
+                    <DropdownMenu.ItemTitle key={`subtitle-item-title-${idx}`}>
+                      {sub.name}
+                    </DropdownMenu.ItemTitle>
+                  </DropdownMenu.CheckboxItem>
+                ))}
+              {mediaSource?.TranscodingUrl &&
+                allSubtitleTracksForTranscodingStream?.map(
+                  (sub, idx: number) => (
+                    <DropdownMenu.CheckboxItem
+                      value={selectedSubtitleIndex === sub.index}
+                      key={`subtitle-item-${idx}`}
+                      onValueChange={() => {
+                        console.log("Set sub index: ", sub.index);
+                        if (selectedSubtitleIndex === sub?.index.toString())
+                          return;
+                        setSelectedSubtitleIndex(sub.index);
+                        if (sub.IsTextSubtitleStream && isOnTextSubtitle) {
+                          setSubtitleTrack && setSubtitleTrack(sub.index);
+                          return;
+                        }
+
+                        ChangeTranscodingSubtitle(sub.index);
+                      }}
+                    >
+                      <DropdownMenu.ItemTitle
+                        key={`subtitle-item-title-${idx}`}
+                      >
+                        {sub.name}
+                      </DropdownMenu.ItemTitle>
+                    </DropdownMenu.CheckboxItem>
+                  )
+                )}
+            </DropdownMenu.SubContent>
+          </DropdownMenu.Sub>
+          <DropdownMenu.Sub>
+            <DropdownMenu.SubTrigger key="audio-trigger">
+              Audio
+            </DropdownMenu.SubTrigger>
+            <DropdownMenu.SubContent
+              alignOffset={-10}
+              avoidCollisions={true}
+              collisionPadding={0}
+              loop={true}
+              sideOffset={10}
+            >
+              {!mediaSource?.TranscodingUrl &&
+                audioTracks?.map((track, idx: number) => (
+                  <DropdownMenu.CheckboxItem
+                    key={`audio-item-${idx}`}
+                    value={selectedAudioIndex === track.index}
+                    onValueChange={() => {
+                      setSelectedAudioIndex(track.index);
+                      setAudioTrack && setAudioTrack(track.index);
+                    }}
+                  >
+                    <DropdownMenu.ItemTitle key={`audio-item-title-${idx}`}>
+                      {track.name}
+                    </DropdownMenu.ItemTitle>
+                  </DropdownMenu.CheckboxItem>
+                ))}
+              {mediaSource?.TranscodingUrl &&
+                allAudio?.map((track, idx: number) => (
+                  <DropdownMenu.CheckboxItem
+                    key={`audio-item-${idx}`}
+                    value={selectedAudioIndex === track.index}
+                    onValueChange={() => {
+                      if (selectedAudioIndex === track.index.toString()) return;
+                      setSelectedAudioIndex(track.index);
+                      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/SliderScrubbter.tsx

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

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

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

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

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

components/video-player/controls/types.ts

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

components/vlc/VideoDebugInfo.tsx

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