feat: add technical details to item

Merge pull request #294 from jakequade/master
fix: restore streaming codecs
2024-12-19 12:05:57 +01:00 · 2024-12-19 10:11:04 +01:00 · 2024-12-17 20:41:07 +11:00 · 2024-12-14 22:49:15 +01:00 · 2024-12-14 12:19:44 -05:00 · 2024-12-13 07:48:54 +01:00
37 changed files with 1825 additions and 651 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -35,3 +35,4 @@ credentials.json
 *.ipa
 .continuerc.json

+.vscode/
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -11,7 +11,5 @@
  },
  "[swift]": {
    "editor.defaultFormatter": "sswg.swift-lang"
-  },
-  "java.configuration.updateBuildConfiguration": "interactive",
-  "java.compile.nullAnalysis.mode": "automatic"
+  }
 }
--- a/app/(auth)/(tabs)/(home)/index.tsx
+++ b/app/(auth)/(tabs)/(home)/index.tsx
@@ -64,7 +64,7 @@ export default function index() {
  const [isConnected, setIsConnected] = useState<boolean | null>(null);
  const [loadingRetry, setLoadingRetry] = useState(false);

-  const { downloadedFiles } = useDownload();
+  const { downloadedFiles, cleanCacheDirectory } = useDownload();
  const navigation = useNavigation();

  const insets = useSafeAreaInsets();
@@ -107,6 +107,9 @@ export default function index() {
      setIsConnected(state.isConnected);
    });

+    cleanCacheDirectory()
+      .then(r => console.log("Cache directory cleaned"))
+      .catch(e => console.error("Something went wrong cleaning cache directory"))
    return () => {
      unsubscribe();
    };
--- a/app/(auth)/player/direct-player.tsx
+++ b/app/(auth)/player/direct-player.tsx
@@ -125,14 +125,7 @@ export default function page() {
    isLoading: isLoadingStreamUrl,
    isError: isErrorStreamUrl,
  } = useQuery({
-    queryKey: [
-      "stream-url",
-      itemId,
-      audioIndex,
-      subtitleIndex,
-      mediaSourceId,
-      bitrateValue,
-    ],
+    queryKey: ["stream-url", itemId, mediaSourceId, bitrateValue],
    queryFn: async () => {
      console.log("Offline:", offline);
      if (offline) {
@@ -254,6 +247,7 @@ export default function page() {
    videoRef.current?.stop();
  }, [videoRef, reportPlaybackStopped]);

+  // TODO: unused should remove.
  const reportPlaybackStart = useCallback(async () => {
    if (offline) return;

@@ -287,7 +281,12 @@ export default function page() {

      if (!item?.Id || !stream) return;

-      console.log("onProgress ~", currentTimeInTicks, isPlaying);
+      console.log(
+        "onProgress ~",
+        currentTimeInTicks,
+        isPlaying,
+        `AUDIO index: ${audioIndex} SUB index" ${subtitleIndex}`
+      );

      await getPlaystateApi(api!).onPlaybackProgress({
        itemId: item.Id,
@@ -300,7 +299,7 @@ export default function page() {
        playSessionId: stream.sessionId,
      });
    },
-    [item?.Id, isPlaying, api, isPlaybackStopped]
+    [item?.Id, isPlaying, api, isPlaybackStopped, audioIndex, subtitleIndex]
  );

  useOrientation();
--- a/app/(auth)/player/transcoding-player.tsx
+++ b/app/(auth)/player/transcoding-player.tsx
@@ -30,7 +30,7 @@ import React, {
  useRef,
  useState,
 } from "react";
-import { BackHandler, View } from "react-native";
+import { View } from "react-native";
 import { useSharedValue } from "react-native-reanimated";
 import Video, {
  OnProgressData,
@@ -38,6 +38,7 @@ import Video, {
  SelectedTrackType,
  VideoRef,
 } from "react-native-video";
+import { SubtitleHelper } from "@/utils/SubtitleHelper";

 const Player = () => {
  const api = useAtomValue(apiAtom);
@@ -53,6 +54,7 @@ const Player = () => {
  const [ignoreSafeAreas, setIgnoreSafeAreas] = useState(false);
  const [isPlaying, setIsPlaying] = useState(false);
  const [isBuffering, setIsBuffering] = useState(true);
+  const [isVideoLoaded, setIsVideoLoaded] = useState(false);

  const setShowControls = useCallback((show: boolean) => {
    _setShowControls(show);
@@ -111,19 +113,14 @@ const Player = () => {
    staleTime: 0,
  });

+  // TODO: NEED TO FIND A WAY TO FROM SWITCHING TO IMAGE BASED TO TEXT BASED SUBTITLES, THERE IS A BUG.
+  // MOST LIKELY LIKELY NEED A MASSIVE REFACTOR.
  const {
    data: stream,
    isLoading: isLoadingStreamUrl,
    isError: isErrorStreamUrl,
  } = useQuery({
-    queryKey: [
-      "stream-url",
-      itemId,
-      audioIndex,
-      subtitleIndex,
-      bitrateValue,
-      mediaSourceId,
-    ],
+    queryKey: ["stream-url", itemId, bitrateValue, mediaSourceId, audioIndex],

    queryFn: async () => {
      if (!api) {
@@ -263,6 +260,13 @@ const Player = () => {
      progress.value = ticks;
      cacheProgress.value = secondsToTicks(data.playableDuration);

+      console.log(
+        "onProgress ~",
+        ticks,
+        isPlaying,
+        `AUDIO index: ${audioIndex} SUB index" ${subtitleIndex}`
+      );
+
      // TODO: Use this when streaming with HLS url, but NOT when direct playing
      // TODO: since playable duration is always 0 then.
      setIsBuffering(data.playableDuration === 0);
@@ -324,25 +328,25 @@ const Player = () => {
    SelectedTrack | undefined
  >(undefined);

-  // Set intial Subtitle Track.
-  // We will only select external tracks if they are are text based. Else it should be burned in already.
-  const textSubs =
-    stream?.mediaSource.MediaStreams?.filter(
-      (sub) => sub.Type === "Subtitle" && sub.IsTextSubtitleStream
-    ) || [];
-
-  const uniqueTextSubs = Array.from(
-    new Set(textSubs.map((sub) => sub.DisplayTitle))
-  ).map((title) => textSubs.find((sub) => sub.DisplayTitle === title));
-  const chosenSubtitleTrack = textSubs.find(
-    (sub) => sub.Index === subtitleIndex
-  );
  useEffect(() => {
-    if (chosenSubtitleTrack && selectedTextTrack === undefined) {
-      console.log("Setting selected text track", chosenSubtitleTrack);
+    if (selectedTextTrack === undefined) {
+      const subtitleHelper = new SubtitleHelper(
+        stream?.mediaSource.MediaStreams ?? []
+      );
+      const embeddedTrackIndex = subtitleHelper.getEmbeddedTrackIndex(
+        subtitleIndex!
+      );
+
+      // Most likely the subtitle is burned in.
+      if (embeddedTrackIndex === -1) return;
+      console.log(
+        "Setting selected text track",
+        subtitleIndex,
+        embeddedTrackIndex
+      );
      setSelectedTextTrack({
        type: SelectedTrackType.INDEX,
-        value: uniqueTextSubs.indexOf(chosenSubtitleTrack),
+        value: embeddedTrackIndex,
      });
    }
  }, [embededTextTracks]);
--- a/app/login.tsx
+++ b/app/login.tsx
@@ -103,37 +103,19 @@ const Login: React.FC = () => {
   * - Logs errors and timeout information to the console.
   */
  async function checkUrl(url: string) {
-    url = url.endsWith("/") ? url.slice(0, -1) : url;
    setLoadingServerCheck(true);

-    const protocols = ["https://", "http://"];
-    const timeout = 2000; // 2 seconds timeout for long 404 responses
-
    try {
-      for (const protocol of protocols) {
-        const controller = new AbortController();
-        const timeoutId = setTimeout(() => controller.abort(), timeout);
+      const response = await fetch(`${url}/System/Info/Public`, {
+        mode: "cors",
+      });

-        try {
-          const response = await fetch(`${protocol}${url}/System/Info/Public`, {
-            mode: "cors",
-            signal: controller.signal,
-          });
-          clearTimeout(timeoutId);
-          if (response.ok) {
-            const data = (await response.json()) as PublicSystemInfo;
-            setServerName(data.ServerName || "");
-            return `${protocol}${url}`;
-          }
-        } catch (e) {
-          const error = e as Error;
-          if (error.name === "AbortError") {
-            console.error(`Request to ${protocol}${url} timed out`);
-          } else {
-            console.error(`Error checking ${protocol}${url}:`, error);
-          }
-        }
+      if (response.ok) {
+        const data = (await response.json()) as PublicSystemInfo;
+        setServerName(data.ServerName || "");
+        return url;
      }
+
      return undefined;
    } finally {
      setLoadingServerCheck(false);
@@ -159,9 +141,7 @@ const Login: React.FC = () => {
  const handleConnect = async (url: string) => {
    url = url.trim();

-    const result = await checkUrl(
-      url.startsWith("http") ? new URL(url).host : url
-    );
+    const result = await checkUrl(url);

    if (result === undefined) {
      Alert.alert(
@@ -171,7 +151,7 @@ const Login: React.FC = () => {
      return;
    }

-    setServer({ address: result });
+    setServer({ address: url });
  };

  const handleQuickConnect = async () => {
--- a/bun.lockb
+++ b/bun.lockb
--- a/components/Button.tsx
+++ b/components/Button.tsx
@@ -3,7 +3,8 @@ import React, { PropsWithChildren, ReactNode, useMemo } from "react";
 import { Text, TouchableOpacity, View } from "react-native";
 import { Loader } from "./Loader";

-interface ButtonProps extends React.ComponentProps<typeof TouchableOpacity> {
+export interface ButtonProps
+  extends React.ComponentProps<typeof TouchableOpacity> {
  onPress?: () => void;
  className?: string;
  textClassName?: string;
--- a/components/ItemContent.tsx
+++ b/components/ItemContent.tsx
@@ -20,6 +20,7 @@ import { getLogoImageUrlById } from "@/utils/jellyfin/image/getLogoImageUrlById"
 import {
  BaseItemDto,
  MediaSourceInfo,
+  MediaStream,
 } from "@jellyfin/sdk/lib/generated-client/models";
 import { Image } from "expo-image";
 import { useNavigation } from "expo-router";
@@ -32,6 +33,8 @@ import { Chromecast } from "./Chromecast";
 import { ItemHeader } from "./ItemHeader";
 import { MediaSourceSelector } from "./MediaSourceSelector";
 import { MoreMoviesWithActor } from "./MoreMoviesWithActor";
+import { SubtitleHelper } from "@/utils/SubtitleHelper";
+import { ItemTechnicalDetails } from "./ItemTechnicalDetails";

 export type SelectedOptions = {
  bitrate: Bitrate;
@@ -109,6 +112,36 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
      return Boolean(logoUrl && loadingLogo);
    }, [loadingLogo, logoUrl]);

+    const [isTranscoding, setIsTranscoding] = useState(false);
+    const [previouslyChosenSubtitleIndex, setPreviouslyChosenSubtitleIndex] =
+      useState<number | undefined>(selectedOptions?.subtitleIndex);
+
+    useEffect(() => {
+      const isTranscoding = Boolean(selectedOptions?.bitrate.value);
+      if (isTranscoding) {
+        setPreviouslyChosenSubtitleIndex(selectedOptions?.subtitleIndex);
+        const subHelper = new SubtitleHelper(
+          selectedOptions?.mediaSource?.MediaStreams ?? []
+        );
+
+        const newSubtitleIndex = subHelper.getMostCommonSubtitleByName(
+          selectedOptions?.subtitleIndex
+        );
+
+        setSelectedOptions((prev) => ({
+          ...prev!,
+          subtitleIndex: newSubtitleIndex ?? -1,
+        }));
+      }
+      if (!isTranscoding && previouslyChosenSubtitleIndex !== undefined) {
+        setSelectedOptions((prev) => ({
+          ...prev!,
+          subtitleIndex: previouslyChosenSubtitleIndex,
+        }));
+      }
+      setIsTranscoding(isTranscoding);
+    }, [selectedOptions?.bitrate]);
+
    if (!selectedOptions) return null;

    return (
@@ -199,6 +232,7 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
                    selected={selectedOptions.audioIndex}
                  />
                  <SubtitleTrackSelector
+                    isTranscoding={isTranscoding}
                    source={selectedOptions.mediaSource}
                    onChange={(val) =>
                      setSelectedOptions(
@@ -225,7 +259,9 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
              <SeasonEpisodesCarousel item={item} loading={loading} />
            )}

-            <OverviewText text={item.Overview} className="px-4 my-4" />
+            <ItemTechnicalDetails source={selectedOptions.mediaSource} />
+            <OverviewText text={item.Overview} className="px-4 mb-4" />
+
            {item.Type !== "Program" && (
              <>
                {item.Type === "Episode" && (
--- a/components/ItemTechnicalDetails.tsx
+++ b/components/ItemTechnicalDetails.tsx
@@ -0,0 +1,236 @@
+import { Ionicons } from "@expo/vector-icons";
+import {
+  MediaSourceInfo,
+  type MediaStream,
+} from "@jellyfin/sdk/lib/generated-client";
+import React, { useMemo, useRef } from "react";
+import { TouchableOpacity, View } from "react-native";
+import { Badge } from "./Badge";
+import { Text } from "./common/Text";
+import {
+  BottomSheetModal,
+  BottomSheetBackdropProps,
+  BottomSheetBackdrop,
+  BottomSheetView,
+  BottomSheetScrollView,
+} from "@gorhom/bottom-sheet";
+import { Button } from "./Button";
+
+interface Props {
+  source?: MediaSourceInfo;
+}
+
+export const ItemTechnicalDetails: React.FC<Props> = ({ source, ...props }) => {
+  const bottomSheetModalRef = useRef<BottomSheetModal>(null);
+
+  return (
+    <View className="px-4 mt-2 mb-4">
+      <Text className="text-lg font-bold mb-4">Video</Text>
+      <TouchableOpacity onPress={() => bottomSheetModalRef.current?.present()}>
+        <View className="flex flex-row space-x-2">
+          <VideoStreamInfo source={source} />
+        </View>
+        <Text className="text-purple-600">More details</Text>
+      </TouchableOpacity>
+      <BottomSheetModal
+        ref={bottomSheetModalRef}
+        snapPoints={["80%"]}
+        handleIndicatorStyle={{
+          backgroundColor: "white",
+        }}
+        backgroundStyle={{
+          backgroundColor: "#171717",
+        }}
+        backdropComponent={(props: BottomSheetBackdropProps) => (
+          <BottomSheetBackdrop
+            {...props}
+            disappearsOnIndex={-1}
+            appearsOnIndex={0}
+          />
+        )}
+      >
+        <BottomSheetScrollView>
+          <View className="flex flex-col space-y-2 p-4 mb-4">
+            <View className="">
+              <Text className="text-lg font-bold mb-4">Video</Text>
+              <View className="flex flex-row space-x-2">
+                <VideoStreamInfo source={source} />
+              </View>
+            </View>
+
+            <View className="">
+              <Text className="text-lg font-bold mb-2">Audio</Text>
+              <AudioStreamInfo
+                audioStreams={
+                  source?.MediaStreams?.filter(
+                    (stream) => stream.Type === "Audio"
+                  ) || []
+                }
+              />
+            </View>
+
+            <View className="">
+              <Text className="text-lg font-bold mb-2">Subtitles</Text>
+              <SubtitleStreamInfo
+                subtitleStreams={
+                  source?.MediaStreams?.filter(
+                    (stream) => stream.Type === "Subtitle"
+                  ) || []
+                }
+              />
+            </View>
+          </View>
+        </BottomSheetScrollView>
+      </BottomSheetModal>
+    </View>
+  );
+};
+
+const SubtitleStreamInfo = ({
+  subtitleStreams,
+}: {
+  subtitleStreams: MediaStream[];
+}) => {
+  return (
+    <View className="flex flex-col">
+      {subtitleStreams.map((stream, index) => (
+        <View key={stream.Index} className="flex flex-col">
+          <Text className="text-xs mb-3 text-neutral-400">
+            {stream.DisplayTitle}
+          </Text>
+          <View className="flex flex-row flex-wrap gap-2">
+            <Badge
+              variant="gray"
+              iconLeft={
+                <Ionicons name="language-outline" size={16} color="white" />
+              }
+              text={stream.Language}
+            />
+            <Badge
+              variant="gray"
+              text={stream.Codec}
+              iconLeft={
+                <Ionicons name="layers-outline" size={16} color="white" />
+              }
+            />
+          </View>
+        </View>
+      ))}
+    </View>
+  );
+};
+
+const AudioStreamInfo = ({ audioStreams }: { audioStreams: MediaStream[] }) => {
+  return (
+    <View className="flex flex-col">
+      {audioStreams.map((audioStreams, index) => (
+        <View className="flex flex-col">
+          <Text className="mb-3 text-neutral-400 text-xs">
+            {audioStreams.DisplayTitle}
+          </Text>
+          <View key={index} className="flex-row flex-wrap gap-2">
+            <Badge
+              variant="gray"
+              iconLeft={
+                <Ionicons name="language-outline" size={16} color="white" />
+              }
+              text={audioStreams.Language}
+            />
+            <Badge
+              variant="gray"
+              iconLeft={
+                <Ionicons
+                  name="musical-notes-outline"
+                  size={16}
+                  color="white"
+                />
+              }
+              text={audioStreams.Codec}
+            />
+            <Badge
+              variant="gray"
+              iconLeft={<Ionicons name="mic-outline" size={16} color="white" />}
+              text={audioStreams.ChannelLayout}
+            />
+            <Badge
+              variant="gray"
+              iconLeft={
+                <Ionicons name="speedometer-outline" size={16} color="white" />
+              }
+              text={formatBitrate(audioStreams.BitRate)}
+            />
+          </View>
+        </View>
+      ))}
+    </View>
+  );
+};
+
+const VideoStreamInfo = ({ source }: { source?: MediaSourceInfo }) => {
+  if (!source) return null;
+
+  const videoStream = useMemo(() => {
+    return source.MediaStreams?.find(
+      (stream) => stream.Type === "Video"
+    ) as MediaStream;
+  }, [source.MediaStreams]);
+
+  return (
+    <View className="flex-row flex-wrap gap-2">
+      <Badge
+        variant="gray"
+        iconLeft={<Ionicons name="film-outline" size={16} color="white" />}
+        text={formatFileSize(source.Size)}
+      />
+      <Badge
+        variant="gray"
+        iconLeft={<Ionicons name="film-outline" size={16} color="white" />}
+        text={`${videoStream.Width}x${videoStream.Height}`}
+      />
+      <Badge
+        variant="gray"
+        iconLeft={
+          <Ionicons name="color-palette-outline" size={16} color="white" />
+        }
+        text={videoStream.VideoRange}
+      />
+      <Badge
+        variant="gray"
+        iconLeft={
+          <Ionicons name="code-working-outline" size={16} color="white" />
+        }
+        text={videoStream.Codec}
+      />
+      <Badge
+        variant="gray"
+        iconLeft={
+          <Ionicons name="speedometer-outline" size={16} color="white" />
+        }
+        text={formatBitrate(videoStream.BitRate)}
+      />
+      <Badge
+        variant="gray"
+        iconLeft={<Ionicons name="play-outline" size={16} color="white" />}
+        text={`${videoStream.AverageFrameRate?.toFixed(0)} fps`}
+      />
+    </View>
+  );
+};
+
+const formatFileSize = (bytes?: number | null) => {
+  if (!bytes) return "N/A";
+
+  const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
+  if (bytes === 0) return "0 Byte";
+  const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)).toString());
+  return Math.round((bytes / Math.pow(1024, i)) * 100) / 100 + " " + sizes[i];
+};
+
+const formatBitrate = (bitrate?: number | null) => {
+  if (!bitrate) return "N/A";
+
+  const sizes = ["bps", "Kbps", "Mbps", "Gbps", "Tbps"];
+  if (bitrate === 0) return "0 bps";
+  const i = parseInt(Math.floor(Math.log(bitrate) / Math.log(1000)).toString());
+  return Math.round((bitrate / Math.pow(1000, i)) * 100) / 100 + " " + sizes[i];
+};
--- a/components/SubtitleTrackSelector.tsx
+++ b/components/SubtitleTrackSelector.tsx
@@ -1,26 +1,34 @@
 import { tc } from "@/utils/textTools";
 import { MediaSourceInfo } from "@jellyfin/sdk/lib/generated-client/models";
 import { useMemo } from "react";
-import { TouchableOpacity, View } from "react-native";
+import { Platform, TouchableOpacity, View } from "react-native";
 import * as DropdownMenu from "zeego/dropdown-menu";
 import { Text } from "./common/Text";
+import { SubtitleHelper } from "@/utils/SubtitleHelper";

 interface Props extends React.ComponentProps<typeof View> {
  source?: MediaSourceInfo;
  onChange: (value: number) => void;
  selected?: number | undefined;
+  isTranscoding?: boolean;
 }

 export const SubtitleTrackSelector: React.FC<Props> = ({
  source,
  onChange,
  selected,
+  isTranscoding,
  ...props
 }) => {
-  const subtitleStreams = useMemo(
-    () => source?.MediaStreams?.filter((x) => x.Type === "Subtitle") ?? [],
-    [source]
-  );
+  const subtitleStreams = useMemo(() => {
+    const subtitleHelper = new SubtitleHelper(source?.MediaStreams ?? []);
+
+    if (isTranscoding && Platform.OS === "ios") {
+      return subtitleHelper.getUniqueSubtitles();
+    }
+
+    return subtitleHelper.getSubtitles();
+  }, [source, isTranscoding]);

  const selectedSubtitleSteam = useMemo(
    () => subtitleStreams.find((x) => x.Index === selected),
--- a/components/common/TouchableItemRouter.tsx
+++ b/components/common/TouchableItemRouter.tsx
@@ -45,6 +45,10 @@ export const itemRouter = (item: BaseItemDto, from: string) => {
    return `/(auth)/(tabs)/(libraries)/${item.Id}`;
  }

+  if (item.Type === "Playlist") {
+    return `/(auth)/(tabs)/(libraries)/${item.Id}`;
+  }
+
  return `/(auth)/(tabs)/${from}/items/page?id=${item.Id}`;
 };

--- a/components/downloads/EpisodeCard.tsx
+++ b/components/downloads/EpisodeCard.tsx
@@ -91,6 +91,7 @@ export const EpisodeCard: React.FC<EpisodeCardProps> = ({ item, ...props }) => {
          <Text className="text-xs text-neutral-500">
            {runtimeTicksToSeconds(item.RunTimeTicks)}
          </Text>
+          <DownloadSize items={[item]} />
        </View>
      </View>

--- a/components/settings/AudioToggles.tsx
+++ b/components/settings/AudioToggles.tsx
@@ -0,0 +1,114 @@
+import { TouchableOpacity, View, ViewProps } from "react-native";
+import * as DropdownMenu from "zeego/dropdown-menu";
+import { Text } from "../common/Text";
+import { useMedia } from "./MediaContext";
+import { Switch } from "react-native-gesture-handler";
+
+interface Props extends ViewProps {}
+
+export const AudioToggles: React.FC<Props> = ({ ...props }) => {
+  const media = useMedia();
+  const { settings, updateSettings } = media;
+  const cultures = media.cultures;
+
+  if (!settings) return null;
+
+  return (
+    <View>
+      <Text className="text-lg font-bold mb-2">Audio</Text>
+      <View className="flex flex-col rounded-xl mb-4 overflow-hidden  divide-y-2 divide-solid divide-neutral-800">
+        <View
+          className={`
+              flex flex-row items-center space-x-2 justify-between bg-neutral-900 p-4
+            `}
+        >
+          <View className="flex flex-col shrink">
+            <Text className="font-semibold">Audio language</Text>
+            <Text className="text-xs opacity-50">
+              Choose a default audio language.
+            </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?.defaultAudioLanguage?.DisplayName || "None"}
+                </Text>
+              </TouchableOpacity>
+            </DropdownMenu.Trigger>
+            <DropdownMenu.Content
+              loop={true}
+              side="bottom"
+              align="start"
+              alignOffset={0}
+              avoidCollisions={true}
+              collisionPadding={8}
+              sideOffset={8}
+            >
+              <DropdownMenu.Label>Languages</DropdownMenu.Label>
+              <DropdownMenu.Item
+                key={"none-audio"}
+                onSelect={() => {
+                  updateSettings({
+                    defaultAudioLanguage: null,
+                  });
+                }}
+              >
+                <DropdownMenu.ItemTitle>None</DropdownMenu.ItemTitle>
+              </DropdownMenu.Item>
+              {cultures?.map((l) => (
+                <DropdownMenu.Item
+                  key={l?.ThreeLetterISOLanguageName ?? "unknown"}
+                  onSelect={() => {
+                    updateSettings({
+                      defaultAudioLanguage: l,
+                    });
+                  }}
+                >
+                  <DropdownMenu.ItemTitle>
+                    {l.DisplayName}
+                  </DropdownMenu.ItemTitle>
+                </DropdownMenu.Item>
+              ))}
+            </DropdownMenu.Content>
+          </DropdownMenu.Root>
+        </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">
+              <Text className="font-semibold">Use Default Audio</Text>
+              <Text className="text-xs opacity-50">
+                Play default audio track regardless of language.
+              </Text>
+            </View>
+            <Switch
+              value={settings.playDefaultAudioTrack}
+              onValueChange={(value) =>
+                updateSettings({ playDefaultAudioTrack: value })
+              }
+            />
+          </View>
+        </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">
+              <Text className="font-semibold">
+                Set Audio Track From Previous Item
+              </Text>
+              <Text className="text-xs opacity-50 min max-w-[85%]">
+                Try to set the audio track to the closest match to the last
+                video.
+              </Text>
+            </View>
+            <Switch
+              value={settings.rememberAudioSelections}
+              onValueChange={(value) =>
+                updateSettings({ rememberAudioSelections: value })
+              }
+            />
+          </View>
+        </View>
+      </View>
+    </View>
+  );
+};
--- a/components/settings/MediaContext.tsx
+++ b/components/settings/MediaContext.tsx
@@ -0,0 +1,154 @@
+import { Settings, useSettings } from "@/utils/atoms/settings";
+import { useAtomValue } from "jotai";
+import React, {
+  createContext,
+  useContext,
+  ReactNode,
+  useEffect,
+  useState,
+} from "react";
+import { apiAtom } from "@/providers/JellyfinProvider";
+import { getLocalizationApi, getUserApi } from "@jellyfin/sdk/lib/utils/api";
+import {
+  CultureDto,
+  UserDto,
+  UserConfiguration,
+} from "@jellyfin/sdk/lib/generated-client/models";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+
+interface MediaContextType {
+  settings: Settings | null;
+  updateSettings: (update: Partial<Settings>) => void;
+  user: UserDto | undefined;
+  cultures: CultureDto[];
+}
+
+const MediaContext = createContext<MediaContextType | undefined>(undefined);
+
+export const useMedia = () => {
+  const context = useContext(MediaContext);
+  if (!context) {
+    throw new Error("useMedia must be used within a MediaProvider");
+  }
+  return context;
+};
+
+export const MediaProvider = ({ children }: { children: ReactNode }) => {
+  const [settings, updateSettings] = useSettings();
+  const api = useAtomValue(apiAtom);
+  const queryClient = useQueryClient();
+
+  const updateSetingsWrapper = (update: Partial<Settings>) => {
+    const updateUserConfiguration = async (
+      update: Partial<UserConfiguration>
+    ) => {
+      if (api && user) {
+        try {
+          await getUserApi(api).updateUserConfiguration({
+            userConfiguration: {
+              ...user.Configuration,
+              ...update,
+            },
+          });
+          queryClient.invalidateQueries({ queryKey: ["authUser"] });
+        } catch (error) {}
+      }
+    };
+
+    updateSettings(update);
+
+    console.log("update", update);
+
+    let updatePayload = {
+      SubtitleMode: update?.subtitleMode ?? settings?.subtitleMode,
+      PlayDefaultAudioTrack:
+        update?.playDefaultAudioTrack ?? settings?.playDefaultAudioTrack,
+      RememberAudioSelections:
+        update?.rememberAudioSelections ?? settings?.rememberAudioSelections,
+      RememberSubtitleSelections:
+        update?.rememberSubtitleSelections ??
+        settings?.rememberSubtitleSelections,
+    } as Partial<UserConfiguration>;
+
+    updatePayload.AudioLanguagePreference =
+      update?.defaultAudioLanguage === null
+        ? ""
+        : update?.defaultAudioLanguage?.ThreeLetterISOLanguageName ||
+          settings?.defaultAudioLanguage?.ThreeLetterISOLanguageName ||
+          "";
+
+    updatePayload.SubtitleLanguagePreference =
+      update?.defaultSubtitleLanguage === null
+        ? ""
+        : update?.defaultSubtitleLanguage?.ThreeLetterISOLanguageName ||
+          settings?.defaultSubtitleLanguage?.ThreeLetterISOLanguageName ||
+          "";
+
+    console.log("updatePayload", updatePayload);
+
+    updateUserConfiguration(updatePayload);
+  };
+
+  const { data: user } = useQuery({
+    queryKey: ["authUser"],
+    queryFn: async () => {
+      if (!api) return;
+      const userApi = await getUserApi(api).getCurrentUser();
+      return userApi.data;
+    },
+    enabled: !!api,
+    staleTime: 0,
+  });
+
+  const { data: cultures = [], isFetched: isCulturesFetched } = useQuery({
+    queryKey: ["cultures"],
+    queryFn: async () => {
+      if (!api) return [];
+      const localizationApi = await getLocalizationApi(api).getCultures();
+      const cultures = localizationApi.data;
+      return cultures;
+    },
+    enabled: !!api,
+    staleTime: 43200000, // 12 hours
+  });
+
+  // Set default settings from user configuration.s
+  useEffect(() => {
+    if (!user || cultures.length === 0) return;
+    const userSubtitlePreference =
+      user?.Configuration?.SubtitleLanguagePreference;
+    const userAudioPreference = user?.Configuration?.AudioLanguagePreference;
+
+    const subtitlePreference = cultures.find(
+      (x) => x.ThreeLetterISOLanguageName === userSubtitlePreference
+    );
+    const audioPreference = cultures.find(
+      (x) => x.ThreeLetterISOLanguageName === userAudioPreference
+    );
+
+    updateSettings({
+      defaultSubtitleLanguage: subtitlePreference,
+      defaultAudioLanguage: audioPreference,
+      subtitleMode: user?.Configuration?.SubtitleMode,
+      playDefaultAudioTrack: user?.Configuration?.PlayDefaultAudioTrack,
+      rememberAudioSelections: user?.Configuration?.RememberAudioSelections,
+      rememberSubtitleSelections:
+        user?.Configuration?.RememberSubtitleSelections,
+    });
+  }, [user, isCulturesFetched]);
+
+  if (!api) return null;
+
+  return (
+    <MediaContext.Provider
+      value={{
+        settings,
+        updateSettings: updateSetingsWrapper,
+        user,
+        cultures,
+      }}
+    >
+      {children}
+    </MediaContext.Provider>
+  );
+};
--- a/components/settings/MediaToggles.tsx
+++ b/components/settings/MediaToggles.tsx
@@ -1,9 +1,6 @@
 import { useSettings } from "@/utils/atoms/settings";
 import { TouchableOpacity, View, ViewProps } from "react-native";
-import * as DropdownMenu from "zeego/dropdown-menu";
 import { Text } from "../common/Text";
-import { LANGUAGES } from "@/constants/Languages";
-import { TextInput } from "react-native-gesture-handler";

 interface Props extends ViewProps {}

@@ -16,152 +13,6 @@ export const MediaToggles: React.FC<Props> = ({ ...props }) => {
    <View>
      <Text className="text-lg font-bold mb-2">Media</Text>
      <View className="flex flex-col rounded-xl mb-4 overflow-hidden  divide-y-2 divide-solid divide-neutral-800">
-        <View
-          className={`
-              flex flex-row items-center space-x-2 justify-between bg-neutral-900 p-4
-            `}
-        >
-          <View className="flex flex-col shrink">
-            <Text className="font-semibold">Audio language</Text>
-            <Text className="text-xs opacity-50">
-              Choose a default audio language.
-            </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?.defaultAudioLanguage?.label || "None"}</Text>
-              </TouchableOpacity>
-            </DropdownMenu.Trigger>
-            <DropdownMenu.Content
-              loop={true}
-              side="bottom"
-              align="start"
-              alignOffset={0}
-              avoidCollisions={true}
-              collisionPadding={8}
-              sideOffset={8}
-            >
-              <DropdownMenu.Label>Languages</DropdownMenu.Label>
-              <DropdownMenu.Item
-                key={"none-audio"}
-                onSelect={() => {
-                  updateSettings({
-                    defaultAudioLanguage: null,
-                  });
-                }}
-              >
-                <DropdownMenu.ItemTitle>None</DropdownMenu.ItemTitle>
-              </DropdownMenu.Item>
-              {LANGUAGES.map((l) => (
-                <DropdownMenu.Item
-                  key={l.value}
-                  onSelect={() => {
-                    updateSettings({
-                      defaultAudioLanguage: l,
-                    });
-                  }}
-                >
-                  <DropdownMenu.ItemTitle>{l.label}</DropdownMenu.ItemTitle>
-                </DropdownMenu.Item>
-              ))}
-            </DropdownMenu.Content>
-          </DropdownMenu.Root>
-        </View>
-        <View
-          className={`
-              flex flex-row items-center space-x-2 justify-between bg-neutral-900 p-4
-            `}
-        >
-          <View className="flex flex-col shrink">
-            <Text className="font-semibold">Subtitle language</Text>
-            <Text className="text-xs opacity-50">
-              Choose a default subtitle language.
-            </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?.defaultSubtitleLanguage?.label || "None"}
-                </Text>
-              </TouchableOpacity>
-            </DropdownMenu.Trigger>
-            <DropdownMenu.Content
-              loop={true}
-              side="bottom"
-              align="start"
-              alignOffset={0}
-              avoidCollisions={true}
-              collisionPadding={8}
-              sideOffset={8}
-            >
-              <DropdownMenu.Label>Languages</DropdownMenu.Label>
-              <DropdownMenu.Item
-                key={"none-subs"}
-                onSelect={() => {
-                  updateSettings({
-                    defaultSubtitleLanguage: null,
-                  });
-                }}
-              >
-                <DropdownMenu.ItemTitle>None</DropdownMenu.ItemTitle>
-              </DropdownMenu.Item>
-              {LANGUAGES.map((l) => (
-                <DropdownMenu.Item
-                  key={l.value}
-                  onSelect={() => {
-                    updateSettings({
-                      defaultSubtitleLanguage: l,
-                    });
-                  }}
-                >
-                  <DropdownMenu.ItemTitle>{l.label}</DropdownMenu.ItemTitle>
-                </DropdownMenu.Item>
-              ))}
-            </DropdownMenu.Content>
-          </DropdownMenu.Root>
-        </View>
-
-        <View
-          className={`
-              flex flex-row items-center space-x-2 justify-between bg-neutral-900 p-4
-            `}
-        >
-          <View className="flex flex-col shrink">
-            <Text className="font-semibold">Subtitle Size</Text>
-            <Text className="text-xs opacity-50">
-              Choose a default subtitle size for direct play (only works for
-              some subtitle formats).
-            </Text>
-          </View>
-          <View className="flex flex-row items-center">
-            <TouchableOpacity
-              onPress={() =>
-                updateSettings({
-                  subtitleSize: Math.max(0, settings.subtitleSize - 5),
-                })
-              }
-              className="w-8 h-8 bg-neutral-800 rounded-l-lg flex items-center justify-center"
-            >
-              <Text>-</Text>
-            </TouchableOpacity>
-            <Text className="w-12 h-8 bg-neutral-800 first-letter:px-3 py-2 flex items-center justify-center">
-              {settings.subtitleSize}
-            </Text>
-            <TouchableOpacity
-              className="w-8 h-8 bg-neutral-800 rounded-r-lg flex items-center justify-center"
-              onPress={() =>
-                updateSettings({
-                  subtitleSize: Math.min(120, settings.subtitleSize + 5),
-                })
-              }
-            >
-              <Text>+</Text>
-            </TouchableOpacity>
-          </View>
-        </View>
-
        <View
          className={`
              flex flex-row items-center space-x-2 justify-between bg-neutral-900 p-4
--- a/components/settings/SettingToggles.tsx
+++ b/components/settings/SettingToggles.tsx
@@ -4,7 +4,11 @@ import {
  getOrSetDeviceId,
  userAtom,
 } from "@/providers/JellyfinProvider";
-import {ScreenOrientationEnum, Settings, useSettings} from "@/utils/atoms/settings";
+import {
+  ScreenOrientationEnum,
+  Settings,
+  useSettings,
+} from "@/utils/atoms/settings";
 import {
  BACKGROUND_FETCH_TASK,
  registerBackgroundFetchAsync,
@@ -17,7 +21,7 @@ import * as BackgroundFetch from "expo-background-fetch";
 import * as ScreenOrientation from "expo-screen-orientation";
 import * as TaskManager from "expo-task-manager";
 import { useAtom } from "jotai";
-import {useEffect, useState} from "react";
+import { useEffect, useState } from "react";
 import {
  Linking,
  Switch,
@@ -32,7 +36,10 @@ import { Input } from "../common/Input";
 import { Text } from "../common/Text";
 import { Loader } from "../Loader";
 import { MediaToggles } from "./MediaToggles";
-import {Stepper} from "@/components/inputs/Stepper";
+import { Stepper } from "@/components/inputs/Stepper";
+import { MediaProvider } from "./MediaContext";
+import { SubtitleToggles } from "./SubtitleToggles";
+import { AudioToggles } from "./AudioToggles";

 interface Props extends ViewProps {}

@@ -120,7 +127,11 @@ export const SettingToggles: React.FC<Props> = ({ ...props }) => {
        </View>
      </View> */}

-      <MediaToggles />
+      <MediaProvider>
+        <MediaToggles />
+        <AudioToggles />
+        <SubtitleToggles />
+      </MediaProvider>

      <View>
        <Text className="text-lg font-bold mb-2">Other</Text>
@@ -409,19 +420,24 @@ export const SettingToggles: React.FC<Props> = ({ ...props }) => {
            <View className="shrink">
              <Text className="font-semibold">Show Custom Menu Links</Text>
              <Text className="text-xs opacity-50">
-                Show custom menu links defined inside your Jellyfin web config.json file
+                Show custom menu links defined inside your Jellyfin web
+                config.json file
              </Text>
              <TouchableOpacity
-                  onPress={() =>
-                    Linking.openURL("https://jellyfin.org/docs/general/clients/web-config/#custom-menu-links")
+                onPress={() =>
+                  Linking.openURL(
+                    "https://jellyfin.org/docs/general/clients/web-config/#custom-menu-links"
+                  )
                }
              >
                <Text className="text-xs text-purple-600">More info</Text>
              </TouchableOpacity>
            </View>
            <Switch
-                value={settings.showCustomMenuLinks}
-                onValueChange={(value) => updateSettings({ showCustomMenuLinks: value })}
+              value={settings.showCustomMenuLinks}
+              onValueChange={(value) =>
+                updateSettings({ showCustomMenuLinks: value })
+              }
            />
          </View>
        </View>
@@ -491,15 +507,16 @@ export const SettingToggles: React.FC<Props> = ({ ...props }) => {
            className={`
              flex flex-row space-x-2 items-center justify-between bg-neutral-900 p-4
              ${
-              settings.downloadMethod === "remux"
-                ? "opacity-100"
-                : "opacity-50"
-            }`}
+                settings.downloadMethod === "remux"
+                  ? "opacity-100"
+                  : "opacity-50"
+              }`}
          >
            <View className="flex flex-col shrink">
              <Text className="font-semibold">Remux max download</Text>
              <Text className="text-xs opacity-50 shrink">
-                This is the total media you want to be able to download at the same time.
+                This is the total media you want to be able to download at the
+                same time.
              </Text>
            </View>
            <Stepper
@@ -507,7 +524,12 @@ export const SettingToggles: React.FC<Props> = ({ ...props }) => {
              step={1}
              min={1}
              max={4}
-              onUpdate={(value) => updateSettings({remuxConcurrentLimit: value as Settings["remuxConcurrentLimit"]})}
+              onUpdate={(value) =>
+                updateSettings({
+                  remuxConcurrentLimit:
+                    value as Settings["remuxConcurrentLimit"],
+                })
+              }
            />
          </View>
          <View
@@ -517,10 +539,10 @@ export const SettingToggles: React.FC<Props> = ({ ...props }) => {
            className={`
              flex flex-row space-x-2 items-center justify-between bg-neutral-900 p-4
              ${
-              settings.downloadMethod === "optimized"
-                ? "opacity-100"
-                : "opacity-50"
-            }`}
+                settings.downloadMethod === "optimized"
+                  ? "opacity-100"
+                  : "opacity-50"
+              }`}
          >
            <View className="flex flex-col shrink">
              <Text className="font-semibold">Auto download</Text>
--- a/components/settings/SubtitleToggles.tsx
+++ b/components/settings/SubtitleToggles.tsx
@@ -0,0 +1,191 @@
+import { TouchableOpacity, View, ViewProps } from "react-native";
+import * as DropdownMenu from "zeego/dropdown-menu";
+import { Text } from "../common/Text";
+import { useMedia } from "./MediaContext";
+import { Switch } from "react-native-gesture-handler";
+import { SubtitlePlaybackMode } from "@jellyfin/sdk/lib/generated-client";
+
+interface Props extends ViewProps {}
+
+export const SubtitleToggles: React.FC<Props> = ({ ...props }) => {
+  const media = useMedia();
+  const { settings, updateSettings } = media;
+  const cultures = media.cultures;
+  if (!settings) return null;
+
+  const subtitleModes = [
+    SubtitlePlaybackMode.Default,
+    SubtitlePlaybackMode.Smart,
+    SubtitlePlaybackMode.OnlyForced,
+    SubtitlePlaybackMode.Always,
+    SubtitlePlaybackMode.None,
+  ];
+
+  return (
+    <View>
+      <Text className="text-lg font-bold mb-2">Subtitle</Text>
+      <View className="flex flex-col rounded-xl mb-4 overflow-hidden  divide-y-2 divide-solid divide-neutral-800">
+        <View
+          className={`
+              flex flex-row items-center space-x-2 justify-between bg-neutral-900 p-4
+            `}
+        >
+          <View className="flex flex-col shrink">
+            <Text className="font-semibold">Subtitle language</Text>
+            <Text className="text-xs opacity-50">
+              Choose a default subtitle language.
+            </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?.defaultSubtitleLanguage?.DisplayName || "None"}
+                </Text>
+              </TouchableOpacity>
+            </DropdownMenu.Trigger>
+            <DropdownMenu.Content
+              loop={true}
+              side="bottom"
+              align="start"
+              alignOffset={0}
+              avoidCollisions={true}
+              collisionPadding={8}
+              sideOffset={8}
+            >
+              <DropdownMenu.Label>Languages</DropdownMenu.Label>
+              <DropdownMenu.Item
+                key={"none-subs"}
+                onSelect={() => {
+                  updateSettings({
+                    defaultSubtitleLanguage: null,
+                  });
+                }}
+              >
+                <DropdownMenu.ItemTitle>None</DropdownMenu.ItemTitle>
+              </DropdownMenu.Item>
+              {cultures?.map((l) => (
+                <DropdownMenu.Item
+                  key={l?.ThreeLetterISOLanguageName ?? "unknown"}
+                  onSelect={() => {
+                    updateSettings({
+                      defaultSubtitleLanguage: l,
+                    });
+                  }}
+                >
+                  <DropdownMenu.ItemTitle>
+                    {l.DisplayName}
+                  </DropdownMenu.ItemTitle>
+                </DropdownMenu.Item>
+              ))}
+            </DropdownMenu.Content>
+          </DropdownMenu.Root>
+        </View>
+
+        <View
+          className={`
+              flex flex-row items-center space-x-2 justify-between bg-neutral-900 p-4
+            `}
+        >
+          <View className="flex flex-col shrink">
+            <Text className="font-semibold">Subtitle Mode</Text>
+            <Text className="text-xs opacity-50 mr-2">
+              Subtitles are loaded based on the default and forced flags in the
+              embedded metadata. Language preferences are considered when
+              multiple options are available.
+            </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?.subtitleMode || "Loading"}</Text>
+              </TouchableOpacity>
+            </DropdownMenu.Trigger>
+            <DropdownMenu.Content
+              loop={true}
+              side="bottom"
+              align="start"
+              alignOffset={0}
+              avoidCollisions={true}
+              collisionPadding={8}
+              sideOffset={8}
+            >
+              <DropdownMenu.Label>Subtitle Mode</DropdownMenu.Label>
+              {subtitleModes?.map((l) => (
+                <DropdownMenu.Item
+                  key={l}
+                  onSelect={() => {
+                    updateSettings({
+                      subtitleMode: l,
+                    });
+                  }}
+                >
+                  <DropdownMenu.ItemTitle>{l}</DropdownMenu.ItemTitle>
+                </DropdownMenu.Item>
+              ))}
+            </DropdownMenu.Content>
+          </DropdownMenu.Root>
+        </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">
+              <Text className="font-semibold">
+                Set Subtitle Track From Previous Item
+              </Text>
+              <Text className="text-xs opacity-50 min max-w-[85%]">
+                Try to set the subtitle track to the closest match to the last
+                video.
+              </Text>
+            </View>
+            <Switch
+              value={settings.rememberSubtitleSelections}
+              onValueChange={(value) =>
+                updateSettings({ rememberSubtitleSelections: value })
+              }
+            />
+          </View>
+        </View>
+
+        <View
+          className={`
+              flex flex-row items-center space-x-2 justify-between bg-neutral-900 p-4
+            `}
+        >
+          <View className="flex flex-col shrink">
+            <Text className="font-semibold">Subtitle Size</Text>
+            <Text className="text-xs opacity-50">
+              Choose a default subtitle size for direct play (only works for
+              some subtitle formats).
+            </Text>
+          </View>
+          <View className="flex flex-row items-center">
+            <TouchableOpacity
+              onPress={() =>
+                updateSettings({
+                  subtitleSize: Math.max(0, settings.subtitleSize - 5),
+                })
+              }
+              className="w-8 h-8 bg-neutral-800 rounded-l-lg flex items-center justify-center"
+            >
+              <Text>-</Text>
+            </TouchableOpacity>
+            <Text className="w-12 h-8 bg-neutral-800 first-letter:px-3 py-2 flex items-center justify-center">
+              {settings.subtitleSize}
+            </Text>
+            <TouchableOpacity
+              className="w-8 h-8 bg-neutral-800 rounded-r-lg flex items-center justify-center"
+              onPress={() =>
+                updateSettings({
+                  subtitleSize: Math.min(120, settings.subtitleSize + 5),
+                })
+              }
+            >
+              <Text>+</Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </View>
+    </View>
+  );
+};
--- a/components/video-player/controls/AudioSlider.tsx
+++ b/components/video-player/controls/AudioSlider.tsx
@@ -0,0 +1,114 @@
+import React, { useEffect, useRef } from "react";
+import { View, StyleSheet } from "react-native";
+import { useSharedValue } from "react-native-reanimated";
+import { Slider } from "react-native-awesome-slider";
+import { VolumeManager } from "react-native-volume-manager";
+import { Ionicons } from "@expo/vector-icons";
+
+interface AudioSliderProps {
+  setVisibility: (show: boolean) => void;
+}
+
+const AudioSlider: React.FC<AudioSliderProps> = ({ setVisibility }) => {
+  const volume = useSharedValue<number>(50); // Explicitly type as number
+  const min = useSharedValue<number>(0); // Explicitly type as number
+  const max = useSharedValue<number>(100); // Explicitly type as number
+
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null); // Use a ref to store the timeout ID
+
+  useEffect(() => {
+    const fetchInitialVolume = async () => {
+      try {
+        const { volume: initialVolume } = await VolumeManager.getVolume();
+        console.log("initialVolume", initialVolume);
+        volume.value = initialVolume * 100;
+      } catch (error) {
+        console.error("Error fetching initial volume:", error);
+      }
+    };
+    fetchInitialVolume();
+
+    // Disable the native volume UI when the component mounts
+    VolumeManager.showNativeVolumeUI({ enabled: false });
+
+    return () => {
+      // Re-enable the native volume UI when the component unmounts
+      VolumeManager.showNativeVolumeUI({ enabled: true });
+    };
+  }, []);
+
+  const handleValueChange = async (value: number) => {
+    volume.value = value;
+    console.log("volume through slider", value);
+    await VolumeManager.setVolume(value / 100);
+
+    // Re-call showNativeVolumeUI to ensure the setting is applied on iOS
+    VolumeManager.showNativeVolumeUI({ enabled: false });
+  };
+
+  useEffect(() => {
+    const volumeListener = VolumeManager.addVolumeListener((result) => {
+      console.log("Volume through device", result.volume);
+      volume.value = result.volume * 100;
+      setVisibility(true);
+
+      // Clear any existing timeout
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+
+      // Set a new timeout to hide the visibility after 2 seconds
+      timeoutRef.current = setTimeout(() => {
+        setVisibility(false);
+      }, 1000);
+    });
+
+    return () => {
+      volumeListener.remove();
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, [volume]);
+
+  return (
+    <View style={styles.sliderContainer}>
+      <Slider
+        progress={volume}
+        minimumValue={min}
+        maximumValue={max}
+        thumbWidth={0}
+        onValueChange={handleValueChange}
+        containerStyle={{
+          borderRadius: 50,
+        }}
+        theme={{
+          minimumTrackTintColor: "#FDFDFD",
+          maximumTrackTintColor: "#5A5A5A",
+          bubbleBackgroundColor: "transparent", // Hide the value bubble
+          bubbleTextColor: "transparent", // Hide the value text
+        }}
+      />
+      <Ionicons
+        name="volume-high"
+        size={20}
+        color="#FDFDFD"
+        style={{
+          marginLeft: 8,
+        }}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  sliderContainer: {
+    width: 150,
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+});
+
+export default AudioSlider;
--- a/components/video-player/controls/Controls.tsx
+++ b/components/video-player/controls/Controls.tsx
@@ -8,8 +8,13 @@ import {
  TrackInfo,
  VlcPlayerViewRef,
 } from "@/modules/vlc-player/src/VlcPlayer.types";
+import { apiAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
-import { getDefaultPlaySettings } from "@/utils/jellyfin/getDefaultPlaySettings";
+import {
+  getDefaultPlaySettings,
+  previousIndexes,
+} from "@/utils/jellyfin/getDefaultPlaySettings";
+import { getItemById } from "@/utils/jellyfin/user-library/getItemById";
 import { writeToLog } from "@/utils/log";
 import {
  formatTimeString,
@@ -23,16 +28,13 @@ import {
  BaseItemDto,
  MediaSourceInfo,
 } from "@jellyfin/sdk/lib/generated-client";
+import * as Haptics from "expo-haptics";
 import { Image } from "expo-image";
-import { useRouter } from "expo-router";
+import { useLocalSearchParams, useRouter } from "expo-router";
+import { useAtom } from "jotai";
+import { debounce } from "lodash";
 import { useCallback, useEffect, useRef, useState } from "react";
-import {
-  Dimensions,
-  Platform,
-  Pressable,
-  TouchableOpacity,
-  View,
-} from "react-native";
+import { Dimensions, Pressable, TouchableOpacity, View } from "react-native";
 import { Slider } from "react-native-awesome-slider";
 import {
  runOnJS,
@@ -40,24 +42,17 @@ import {
  useAnimatedReaction,
  useSharedValue,
 } from "react-native-reanimated";
-import {
-  SafeAreaView,
-  useSafeAreaInsets,
-} from "react-native-safe-area-context";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { VideoRef } from "react-native-video";
+import AudioSlider from "./AudioSlider";
+import BrightnessSlider from "./BrightnessSlider";
 import { ControlProvider } from "./contexts/ControlContext";
 import { VideoProvider } from "./contexts/VideoContext";
-import * as Haptics from "expo-haptics";
 import DropdownViewDirect from "./dropdown/DropdownViewDirect";
 import DropdownViewTranscoding from "./dropdown/DropdownViewTranscoding";
-import BrightnessSlider from "./BrightnessSlider";
-import SkipButton from "./SkipButton";
-import { debounce } from "lodash";
 import { EpisodeList } from "./EpisodeList";
-import { BlurView } from "expo-blur";
-import { getItemById } from "@/utils/jellyfin/user-library/getItemById";
-import { useAtom } from "jotai";
-import { apiAtom } from "@/providers/JellyfinProvider";
+import NextEpisodeCountDownButton from "./NextEpisodeCountDownButton";
+import SkipButton from "./SkipButton";

 interface Props {
  item: BaseItemDto;
@@ -129,7 +124,7 @@ export const Controls: React.FC<Props> = ({
  } = useTrickplay(item, !offline && enableTrickplay);

  const [currentTime, setCurrentTime] = useState(0);
-  const [remainingTime, setRemainingTime] = useState(0);
+  const [remainingTime, setRemainingTime] = useState(Infinity);

  const min = useSharedValue(0);
  const max = useSharedValue(item.RunTimeTicks || 0);
@@ -137,6 +132,12 @@ export const Controls: React.FC<Props> = ({
  const wasPlayingRef = useRef(false);
  const lastProgressRef = useRef<number>(0);

+  const { bitrateValue, subtitleIndex, audioIndex } = useLocalSearchParams<{
+    bitrateValue: string;
+    audioIndex: string;
+    subtitleIndex: string;
+  }>();
+
  const { showSkipButton, skipIntro } = useIntroSkipper(
    offline ? undefined : item.Id,
    currentTime,
@@ -158,50 +159,76 @@ export const Controls: React.FC<Props> = ({

    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);

-    const { bitrate, mediaSource, audioIndex, subtitleIndex } =
-      getDefaultPlaySettings(previousItem, settings);
+    const previousIndexes: previousIndexes = {
+      subtitleIndex: subtitleIndex ? parseInt(subtitleIndex) : undefined,
+      audioIndex: audioIndex ? parseInt(audioIndex) : undefined,
+    };
+
+    const {
+      mediaSource: newMediaSource,
+      audioIndex: defaultAudioIndex,
+      subtitleIndex: defaultSubtitleIndex,
+    } = getDefaultPlaySettings(
+      previousItem,
+      settings,
+      previousIndexes,
+      mediaSource ?? undefined
+    );

    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(),
+      audioIndex: defaultAudioIndex?.toString() ?? "",
+      subtitleIndex: defaultSubtitleIndex?.toString() ?? "",
+      mediaSourceId: newMediaSource?.Id ?? "", // Ensure mediaSourceId is a string
+      bitrateValue: bitrateValue.toString(),
    }).toString();

-    if (!bitrate.value) {
+    if (!bitrateValue) {
      // @ts-expect-error
      router.replace(`player/direct-player?${queryParams}`);
      return;
    }
    // @ts-expect-error
    router.replace(`player/transcoding-player?${queryParams}`);
-  }, [previousItem, settings]);
+  }, [previousItem, settings, subtitleIndex, audioIndex]);

  const goToNextItem = useCallback(() => {
    if (!nextItem || !settings) return;

    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);

-    const { bitrate, mediaSource, audioIndex, subtitleIndex } =
-      getDefaultPlaySettings(nextItem, settings);
+    const previousIndexes: previousIndexes = {
+      subtitleIndex: subtitleIndex ? parseInt(subtitleIndex) : undefined,
+      audioIndex: audioIndex ? parseInt(audioIndex) : undefined,
+    };
+
+    const {
+      mediaSource: newMediaSource,
+      audioIndex: defaultAudioIndex,
+      subtitleIndex: defaultSubtitleIndex,
+    } = getDefaultPlaySettings(
+      nextItem,
+      settings,
+      previousIndexes,
+      mediaSource ?? undefined
+    );

    const 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(),
+      audioIndex: defaultAudioIndex?.toString() ?? "",
+      subtitleIndex: defaultSubtitleIndex?.toString() ?? "",
+      mediaSourceId: newMediaSource?.Id ?? "", // Ensure mediaSourceId is a string
+      bitrateValue: bitrateValue.toString(),
    }).toString();

-    if (!bitrate.value) {
+    if (!bitrateValue) {
      // @ts-expect-error
      router.replace(`player/direct-player?${queryParams}`);
      return;
    }
    // @ts-expect-error
    router.replace(`player/transcoding-player?${queryParams}`);
-  }, [nextItem, settings]);
+  }, [nextItem, settings, subtitleIndex, audioIndex]);

  const updateTimes = useCallback(
    (currentProgress: number, maxValue: number) => {
@@ -210,15 +237,10 @@ export const Controls: React.FC<Props> = ({
        ? maxValue - currentProgress
        : ticksToSeconds(maxValue - currentProgress);

+      console.log("remaining: ", remaining);
+
      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]
  );
@@ -230,7 +252,6 @@ export const Controls: React.FC<Props> = ({
      isSeeking: isSeeking.value,
    }),
    (result) => {
-      // console.log("Progress changed", result);
      if (result.isSeeking === false) {
        runOnJS(updateTimes)(result.progress, result.max);
      }
@@ -252,7 +273,14 @@ export const Controls: React.FC<Props> = ({
  useEffect(() => {
    prefetchAllTrickplayImages();
  }, []);
-  const toggleControls = () => setShowControls(!showControls);
+  const toggleControls = () => {
+    if (showControls) {
+      setShowAudioSlider(false);
+      setShowControls(false);
+    } else {
+      setShowControls(true);
+    }
+  };

  const handleSliderStart = useCallback(() => {
    if (showControls === false) return;
@@ -283,16 +311,14 @@ export const Controls: React.FC<Props> = ({
  const [time, setTime] = useState({ hours: 0, minutes: 0, seconds: 0 });
  const handleSliderChange = useCallback(
    debounce((value: number) => {
-      const progressInTicks = msToTicks(value);
-      console.log("Progress in ticks", progressInTicks);
+      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 });
-    }, 10),
+    }, 3),
    []
  );

@@ -407,35 +433,57 @@ export const Controls: React.FC<Props> = ({

  const switchOnEpisodeMode = () => {
    setEpisodeView(true);
-    if (isPlaying) togglePlay(progress.value);
+    if (isPlaying) togglePlay();
  };

-  const gotoEpisode = async (itemId: string) => {
-    const item = await getItemById(api, itemId);
-    console.log("Item", item);
-    if (!settings || !item) return;
+  const goToItem = useCallback(
+    async (itemId: string) => {
+      try {
+        const gotoItem = await getItemById(api, itemId);
+        if (!settings || !gotoItem) return;

-    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+        Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);

-    const { bitrate, mediaSource, audioIndex, subtitleIndex } =
-      getDefaultPlaySettings(item, settings);
+        const previousIndexes: previousIndexes = {
+          subtitleIndex: subtitleIndex ? parseInt(subtitleIndex) : undefined,
+          audioIndex: audioIndex ? parseInt(audioIndex) : undefined,
+        };

-    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: bitrate.toString(),
-    }).toString();
+        const {
+          mediaSource: newMediaSource,
+          audioIndex: defaultAudioIndex,
+          subtitleIndex: defaultSubtitleIndex,
+        } = getDefaultPlaySettings(
+          gotoItem,
+          settings,
+          previousIndexes,
+          mediaSource ?? undefined
+        );

-    if (!bitrate.value) {
-      // @ts-expect-error
-      router.replace(`player/direct-player?${queryParams}`);
-      return;
-    }
-    // @ts-expect-error
-    router.replace(`player/transcoding-player?${queryParams}`);
-  };
+        const queryParams = new URLSearchParams({
+          itemId: gotoItem.Id ?? "", // Ensure itemId is a string
+          audioIndex: defaultAudioIndex?.toString() ?? "",
+          subtitleIndex: defaultSubtitleIndex?.toString() ?? "",
+          mediaSourceId: newMediaSource?.Id ?? "", // Ensure mediaSourceId is a string
+          bitrateValue: bitrateValue.toString(),
+        }).toString();
+
+        if (!bitrateValue) {
+          // @ts-expect-error
+          router.replace(`player/direct-player?${queryParams}`);
+          return;
+        }
+        // @ts-expect-error
+        router.replace(`player/transcoding-player?${queryParams}`);
+      } catch (error) {
+        console.error("Error in gotoEpisode:", error);
+      }
+    },
+    [settings, subtitleIndex, audioIndex]
+  );
+
+  // Used when user changes audio through audio button on device.
+  const [showAudioSlider, setShowAudioSlider] = useState(false);

  return (
    <ControlProvider
@@ -444,7 +492,11 @@ export const Controls: React.FC<Props> = ({
      isVideoLoaded={isVideoLoaded}
    >
      {EpisodeView ? (
-        <EpisodeList item={item} close={() => setEpisodeView(false)} />
+        <EpisodeList
+          item={item}
+          close={() => setEpisodeView(false)}
+          goToItem={goToItem}
+        />
      ) : (
        <>
          <VideoProvider
@@ -545,7 +597,6 @@ export const Controls: React.FC<Props> = ({
              alignItems: "center",
              transform: [{ translateY: -22.5 }], // Adjust for the button's height (half of 45)
              paddingHorizontal: "28%", // Add some padding to the left and right
-              opacity: showControls ? 1 : 0,
            }}
            pointerEvents={showControls ? "box-none" : "none"}
          >
@@ -554,7 +605,9 @@ export const Controls: React.FC<Props> = ({
                position: "absolute",
                alignItems: "center",
                transform: [{ rotate: "270deg" }], // Rotate the slider to make it vertical
+                left: 0,
                bottom: 30,
+                opacity: showControls ? 1 : 0,
              }}
            >
              <BrightnessSlider />
@@ -565,6 +618,7 @@ export const Controls: React.FC<Props> = ({
                  position: "relative",
                  justifyContent: "center",
                  alignItems: "center",
+                  opacity: showControls ? 1 : 0,
                }}
              >
                <Ionicons
@@ -599,6 +653,9 @@ export const Controls: React.FC<Props> = ({
                  name={isPlaying ? "pause" : "play"}
                  size={50}
                  color="white"
+                  style={{
+                    opacity: showControls ? 1 : 0,
+                  }}
                />
              ) : (
                <Loader size={"large"} />
@@ -611,6 +668,7 @@ export const Controls: React.FC<Props> = ({
                  position: "relative",
                  justifyContent: "center",
                  alignItems: "center",
+                  opacity: showControls ? 1 : 0,
                }}
              >
                <Ionicons name="refresh-outline" size={50} color="white" />
@@ -627,6 +685,19 @@ export const Controls: React.FC<Props> = ({
                </Text>
              </View>
            </TouchableOpacity>
+
+            <View
+              style={{
+                position: "absolute",
+                alignItems: "center",
+                transform: [{ rotate: "270deg" }], // Rotate the slider to make it vertical
+                bottom: 30,
+                right: 0,
+                opacity: showAudioSlider || showControls ? 1 : 0,
+              }}
+            >
+              <AudioSlider setVisibility={setShowAudioSlider} />
+            </View>
          </View>

          <View
@@ -636,10 +707,8 @@ export const Controls: React.FC<Props> = ({
                right: 0,
                left: 0,
                bottom: 0,
-                opacity: showControls ? 1 : 0,
              },
            ]}
-            pointerEvents={showControls ? "box-none" : "none"}
            className={`flex flex-col p-4`}
          >
            <View
@@ -653,7 +722,9 @@ export const Controls: React.FC<Props> = ({
                style={{
                  flexDirection: "column",
                  alignSelf: "flex-end", // Shrink height based on content
+                  opacity: showControls ? 1 : 0,
                }}
+                pointerEvents={showControls ? "box-none" : "none"}
              >
                <Text className="font-bold">{item?.Name}</Text>
                {item?.Type === "Episode" && (
@@ -668,13 +739,7 @@ export const Controls: React.FC<Props> = ({
                  <Text className="text-xs opacity-50">{item?.Album}</Text>
                )}
              </View>
-              <View
-                style={{
-                  flexDirection: "column",
-                  alignSelf: "flex-end",
-                  marginRight: insets.right,
-                }}
-              >
+              <View className="flex flex-row space-x-2">
                <SkipButton
                  showButton={showSkipButton}
                  onPress={skipIntro}
@@ -685,10 +750,25 @@ export const Controls: React.FC<Props> = ({
                  onPress={skipCredit}
                  buttonText="Skip Credits"
                />
+                <NextEpisodeCountDownButton
+                  show={
+                    !nextItem
+                      ? false
+                      : isVlc
+                      ? remainingTime < 10000
+                      : remainingTime < 10
+                  }
+                  onFinish={goToNextItem}
+                  onPress={goToNextItem}
+                />
              </View>
            </View>
            <View
              className={`flex flex-col-reverse py-4 pb-1 px-4 rounded-lg items-center  bg-neutral-800`}
+              style={{
+                opacity: showControls ? 1 : 0,
+              }}
+              pointerEvents={showControls ? "box-none" : "none"}
            >
              <View className={`flex flex-col w-full shrink`}>
                <Slider
--- a/components/video-player/controls/EpisodeList.tsx
+++ b/components/video-player/controls/EpisodeList.tsx
@@ -17,28 +17,23 @@ import {
  HorizontalScroll,
  HorizontalScrollRef,
 } from "@/components/common/HorrizontalScroll";
-import { router, useLocalSearchParams } from "expo-router";
-import { getDefaultPlaySettings } from "@/utils/jellyfin/getDefaultPlaySettings";
-import { getItemById } from "@/utils/jellyfin/user-library/getItemById";
-import { useSettings } from "@/utils/atoms/settings";
 import {
  SeasonDropdown,
  SeasonIndexState,
 } from "@/components/series/SeasonDropdown";
-import { Item } from "zeego/dropdown-menu";

 type Props = {
  item: BaseItemDto;
  close: () => void;
+  goToItem: (itemId: string) => Promise<void>;
 };

 export const seasonIndexAtom = atom<SeasonIndexState>({});

-export const EpisodeList: React.FC<Props> = ({ item, close }) => {
+export const EpisodeList: React.FC<Props> = ({ item, close, goToItem }) => {
  const [api] = useAtom(apiAtom);
  const [user] = useAtom(userAtom);
  const insets = useSafeAreaInsets(); // Get safe area insets
-  const [settings] = useSettings();
  const [seasonIndexState, setSeasonIndexState] = useAtom(seasonIndexAtom);
  const scrollViewRef = useRef<HorizontalScrollRef>(null); // Reference to the HorizontalScroll
  const scrollToIndex = (index: number) => {
@@ -155,36 +150,6 @@ export const EpisodeList: React.FC<Props> = ({ item, close }) => {
    }
  }, [episodes, item.Id]);

-  const { audioIndex, subtitleIndex, bitrateValue } = useLocalSearchParams<{
-    audioIndex: string;
-    subtitleIndex: string;
-    mediaSourceId: string;
-    bitrateValue: string;
-  }>();
-
-  const gotoEpisode = async (itemId: string) => {
-    const item = await getItemById(api, itemId);
-    if (!settings || !item) return;
-
-    const { mediaSource } = getDefaultPlaySettings(item, settings);
-
-    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();
-
-    if (!bitrateValue) {
-      // @ts-expect-error
-      router.replace(`player/direct-player?${queryParams}`);
-      return;
-    }
-    // @ts-expect-error
-    router.replace(`player/transcoding-player?${queryParams}`);
-  };
-
  if (!episodes) {
    return <Loader />;
  }
@@ -242,7 +207,7 @@ export const EpisodeList: React.FC<Props> = ({ item, close }) => {
            >
              <TouchableOpacity
                onPress={() => {
-                  gotoEpisode(_item.Id);
+                  goToItem(_item.Id);
                }}
              >
                <ContinueWatchingPoster
--- a/components/video-player/controls/NextEpisodeCountDownButton.tsx
+++ b/components/video-player/controls/NextEpisodeCountDownButton.tsx
@@ -0,0 +1,81 @@
+import React, { useEffect } from "react";
+import { TouchableOpacity, TouchableOpacityProps, View } from "react-native";
+import { Text } from "@/components/common/Text";
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+  Easing,
+  runOnJS,
+} from "react-native-reanimated";
+import { Colors } from "@/constants/Colors";
+
+interface NextEpisodeCountDownButtonProps extends TouchableOpacityProps {
+  onFinish?: () => void;
+  onPress?: () => void;
+  show: boolean;
+}
+
+const NextEpisodeCountDownButton: React.FC<NextEpisodeCountDownButtonProps> = ({
+  onFinish,
+  onPress,
+  show,
+  ...props
+}) => {
+  const progress = useSharedValue(0);
+
+  useEffect(() => {
+    if (show) {
+      progress.value = 0;
+      progress.value = withTiming(
+        1,
+        {
+          duration: 10000, // 10 seconds
+          easing: Easing.linear,
+        },
+        (finished) => {
+          if (finished && onFinish) {
+            console.log("finish");
+            runOnJS(onFinish)();
+          }
+        }
+      );
+    }
+  }, [show, onFinish]);
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      position: "absolute",
+      left: 0,
+      top: 0,
+      bottom: 0,
+      width: `${progress.value * 100}%`,
+      backgroundColor: Colors.primary,
+    };
+  });
+
+  const handlePress = () => {
+    if (onPress) {
+      onPress();
+    }
+  };
+
+  if (!show) {
+    return null;
+  }
+
+  return (
+    <TouchableOpacity
+      className="w-32 overflow-hidden rounded-md bg-black/60 border border-neutral-900"
+      {...props}
+      onPress={handlePress}
+    >
+      <Animated.View style={animatedStyle} />
+      <View className="px-3 py-3">
+        <Text className="text-center font-bold">Next Episode</Text>
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+export default NextEpisodeCountDownButton;
--- a/components/video-player/controls/SkipButton.tsx
+++ b/components/video-player/controls/SkipButton.tsx
@@ -1,7 +1,7 @@
 import React from "react";
-import { View, TouchableOpacity, Text, StyleSheet } from "react-native";
+import { View, TouchableOpacity, Text, ViewProps } from "react-native";

-interface SkipButtonProps {
+interface SkipButtonProps extends ViewProps {
  onPress: () => void;
  showButton: boolean;
  buttonText: string;
@@ -11,29 +11,18 @@ const SkipButton: React.FC<SkipButtonProps> = ({
  onPress,
  showButton,
  buttonText,
+  ...props
 }) => {
  return (
-    <View style={{ display: showButton ? "flex" : "none" }}>
-      <TouchableOpacity onPress={onPress} style={styles.button}>
-        <Text style={styles.text}>{buttonText}</Text>
+    <View className={showButton ? "flex" : "hidden"} {...props}>
+      <TouchableOpacity
+        onPress={onPress}
+        className="bg-black/60 rounded-md px-3 py-3 border border-neutral-900"
+      >
+        <Text className="text-white font-bold">{buttonText}</Text>
      </TouchableOpacity>
    </View>
  );
 };

-const styles = StyleSheet.create({
-  button: {
-    backgroundColor: "rgba(0, 0, 0, 0.75)",
-    borderRadius: 5,
-    paddingHorizontal: 10,
-    paddingVertical: 15,
-    borderWidth: 2,
-    borderColor: "#5A5454",
-  },
-  text: {
-    color: "white",
-    fontWeight: "bold",
-  },
-});
-
 export default SkipButton;
--- a/components/video-player/controls/contexts/ControlContext.tsx
+++ b/components/video-player/controls/contexts/ControlContext.tsx
@@ -1,6 +1,9 @@
-import { TrackInfo } from '@/modules/vlc-player';
-import { BaseItemDto, MediaSourceInfo } from '@jellyfin/sdk/lib/generated-client';
-import React, { createContext, useContext, useState, ReactNode } from 'react';
+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;
@@ -8,7 +11,9 @@ interface ControlContextProps {
  isVideoLoaded: boolean | undefined;
 }

-const ControlContext = createContext<ControlContextProps | undefined>(undefined);
+const ControlContext = createContext<ControlContextProps | undefined>(
+  undefined
+);

 interface ControlProviderProps {
  children: ReactNode;
@@ -17,7 +22,12 @@ interface ControlProviderProps {
  isVideoLoaded: boolean | undefined;
 }

-export const ControlProvider: React.FC<ControlProviderProps> = ({ children, item, mediaSource, isVideoLoaded }) => {
+export const ControlProvider: React.FC<ControlProviderProps> = ({
+  children,
+  item,
+  mediaSource,
+  isVideoLoaded,
+}) => {
  return (
    <ControlContext.Provider value={{ item, mediaSource, isVideoLoaded }}>
      {children}
@@ -28,7 +38,7 @@ export const ControlProvider: React.FC<ControlProviderProps> = ({ children, item
 export const useControlContext = () => {
  const context = useContext(ControlContext);
  if (context === undefined) {
-    throw new Error('useControlContext must be used within a ControlProvider');
+    throw new Error("useControlContext must be used within a ControlProvider");
  }
  return context;
-};
+};
--- a/components/video-player/controls/dropdown/DropdownViewDirect.tsx
+++ b/components/video-player/controls/dropdown/DropdownViewDirect.tsx
@@ -7,7 +7,7 @@ import { useVideoContext } from "../contexts/VideoContext";
 import { EmbeddedSubtitle, ExternalSubtitle } from "../types";
 import { useAtomValue } from "jotai";
 import { apiAtom } from "@/providers/JellyfinProvider";
-import { useLocalSearchParams } from "expo-router";
+import { router, useLocalSearchParams } from "expo-router";

 interface DropdownViewDirectProps {
  showControls: boolean;
@@ -71,13 +71,6 @@ const DropdownViewDirect: React.FC<DropdownViewDirectProps> = ({
    bitrateValue: string;
  }>();

-  const [selectedSubtitleIndex, setSelectedSubtitleIndex] = useState<Number>(
-    parseInt(subtitleIndex)
-  );
-  const [selectedAudioIndex, setSelectedAudioIndex] = useState<Number>(
-    parseInt(audioIndex)
-  );
-
  return (
    <View
      style={{
@@ -116,7 +109,7 @@ const DropdownViewDirect: React.FC<DropdownViewDirectProps> = ({
              {allSubtitleTracksForDirectPlay?.map((sub, idx: number) => (
                <DropdownMenu.CheckboxItem
                  key={`subtitle-item-${idx}`}
-                  value={selectedSubtitleIndex === sub.index}
+                  value={subtitleIndex === sub.index.toString()}
                  onValueChange={() => {
                    if ("deliveryUrl" in sub && sub.deliveryUrl) {
                      setSubtitleURL &&
@@ -133,8 +126,9 @@ const DropdownViewDirect: React.FC<DropdownViewDirectProps> = ({
                      console.log("Set sub index: ", sub.index);
                      setSubtitleTrack && setSubtitleTrack(sub.index);
                    }
-
-                    setSelectedSubtitleIndex(sub.index);
+                    router.setParams({
+                      subtitleIndex: sub.index.toString(),
+                    });
                    console.log("Subtitle: ", sub);
                  }}
                >
@@ -159,10 +153,12 @@ const DropdownViewDirect: React.FC<DropdownViewDirectProps> = ({
              {audioTracks?.map((track, idx: number) => (
                <DropdownMenu.CheckboxItem
                  key={`audio-item-${idx}`}
-                  value={selectedAudioIndex === track.index}
+                  value={audioIndex === track.index.toString()}
                  onValueChange={() => {
-                    setSelectedAudioIndex(track.index);
                    setAudioTrack && setAudioTrack(track.index);
+                    router.setParams({
+                      audioIndex: track.index.toString(),
+                    });
                  }}
                >
                  <DropdownMenu.ItemTitle key={`audio-item-title-${idx}`}>
--- a/components/video-player/controls/dropdown/DropdownViewTranscoding.tsx
+++ b/components/video-player/controls/dropdown/DropdownViewTranscoding.tsx
@@ -8,16 +8,14 @@ import { TranscodedSubtitle } from "../types";
 import { useAtomValue } from "jotai";
 import { apiAtom } from "@/providers/JellyfinProvider";
 import { useLocalSearchParams, useRouter } from "expo-router";
+import { SubtitleHelper } from "@/utils/SubtitleHelper";

 interface DropdownViewProps {
  showControls: boolean;
  offline?: boolean; // used to disable external subs for downloads
 }

-const DropdownView: React.FC<DropdownViewProps> = ({
-  showControls,
-  offline = false,
-}) => {
+const DropdownView: React.FC<DropdownViewProps> = ({ showControls }) => {
  const router = useRouter();
  const api = useAtomValue(apiAtom);
  const ControlContext = useControlContext();
@@ -37,32 +35,20 @@ const DropdownView: React.FC<DropdownViewProps> = ({
  }>();

  // 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 isOnTextSubtitle = useMemo(() => {
+    const res = Boolean(
+      mediaSource?.MediaStreams?.find(
+        (x) => x.Index === parseInt(subtitleIndex) && x.IsTextSubtitleStream
+      ) || subtitleIndex === "-1"
+    );
+    return res;
+  }, []);

  const allSubs =
    mediaSource?.MediaStreams?.filter((x) => x.Type === "Subtitle") ?? [];
-  const 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)
-  );
-
-  let initialSubtitleIndex = -1;
-  if (!isOnTextSubtitle) {
-    initialSubtitleIndex = parseInt(subtitleIndex);
-  } else if (chosenSubtitle) {
-    initialSubtitleIndex = textBasedSubs.indexOf(chosenSubtitle);
-  }
-
-  const [selectedSubtitleIndex, setSelectedSubtitleIndex] =
-    useState<number>(initialSubtitleIndex);
-  const [selectedAudioIndex, setSelectedAudioIndex] = useState<number>(
-    parseInt(audioIndex)
-  );
+  const subtitleHelper = new SubtitleHelper(mediaSource?.MediaStreams ?? []);

  const allSubtitleTracksForTranscodingStream = useMemo(() => {
    const disableSubtitle = {
@@ -78,39 +64,9 @@ const DropdownView: React.FC<DropdownViewProps> = ({
          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
-            )
-        )
-      );
+      const sortedSubtitles = subtitleHelper.getSortedSubtitles(textSubtitles);

+      console.log("sortedSubtitles", sortedSubtitles);
      return [disableSubtitle, ...sortedSubtitles];
    }

@@ -123,7 +79,7 @@ const DropdownView: React.FC<DropdownViewProps> = ({
    return [disableSubtitle, ...transcodedSubtitle];
  }, [item, isVideoLoaded, subtitleTracks, mediaSource?.MediaStreams]);

-  const ChangeTranscodingSubtitle = useCallback(
+  const changeToImageBasedSub = useCallback(
    (subtitleIndex: number) => {
      const queryParams = new URLSearchParams({
        itemId: item.Id ?? "", // Ensure itemId is a string
@@ -145,26 +101,14 @@ const DropdownView: React.FC<DropdownViewProps> = ({
      name: x.DisplayTitle!,
      index: x.Index!,
    })) || [];
-  const ChangeTranscodingAudio = useCallback(
-    (audioIndex: number, currentSelectedSubtitleIndex: number) => {
-      let newSubtitleIndex: number;

-      if (!isOnTextSubtitle) {
-        newSubtitleIndex = parseInt(subtitleIndex);
-      } else if (
-        currentSelectedSubtitleIndex >= 0 &&
-        currentSelectedSubtitleIndex < textBasedSubs.length
-      ) {
-        console.log("setHere SubtitleIndex", currentSelectedSubtitleIndex);
-        newSubtitleIndex = textBasedSubs[currentSelectedSubtitleIndex].Index!;
-        console.log("newSubtitleIndex", newSubtitleIndex);
-      } else {
-        newSubtitleIndex = -1;
-      }
+  const ChangeTranscodingAudio = useCallback(
+    (audioIndex: number) => {
+      console.log("ChangeTranscodingAudio", subtitleIndex, audioIndex);
      const queryParams = new URLSearchParams({
        itemId: item.Id ?? "", // Ensure itemId is a string
        audioIndex: audioIndex?.toString() ?? "",
-        subtitleIndex: newSubtitleIndex?.toString() ?? "",
+        subtitleIndex: subtitleIndex?.toString() ?? "",
        mediaSourceId: mediaSource?.Id ?? "", // Ensure mediaSourceId is a string
        bitrateValue: bitrateValue,
      }).toString();
@@ -172,7 +116,7 @@ const DropdownView: React.FC<DropdownViewProps> = ({
      // @ts-expect-error
      router.replace(`player/transcoding-player?${queryParams}`);
    },
-    [mediaSource]
+    [mediaSource, subtitleIndex, audioIndex]
  );

  return (
@@ -213,18 +157,38 @@ const DropdownView: React.FC<DropdownViewProps> = ({
              {allSubtitleTracksForTranscodingStream?.map(
                (sub, idx: number) => (
                  <DropdownMenu.CheckboxItem
-                    value={selectedSubtitleIndex === sub.index}
+                    value={
+                      subtitleIndex ===
+                      (isOnTextSubtitle && sub.IsTextSubtitleStream
+                        ? subtitleHelper
+                            .getSourceSubtitleIndex(sub.index)
+                            .toString()
+                        : sub?.index.toString())
+                    }
                    key={`subtitle-item-${idx}`}
                    onValueChange={() => {
                      console.log("sub", sub);
-                      if (selectedSubtitleIndex === sub?.index) return;
-                      setSelectedSubtitleIndex(sub.index);
+                      if (
+                        subtitleIndex ===
+                        (isOnTextSubtitle && sub.IsTextSubtitleStream
+                          ? subtitleHelper
+                              .getSourceSubtitleIndex(sub.index)
+                              .toString()
+                          : sub?.index.toString())
+                      )
+                        return;
+
+                      router.setParams({
+                        subtitleIndex: subtitleHelper
+                          .getSourceSubtitleIndex(sub.index)
+                          .toString(),
+                      });
+
                      if (sub.IsTextSubtitleStream && isOnTextSubtitle) {
                        setSubtitleTrack && setSubtitleTrack(sub.index);
                        return;
                      }
-
-                      ChangeTranscodingSubtitle(sub.index);
+                      changeToImageBasedSub(sub.index);
                    }}
                  >
                    <DropdownMenu.ItemTitle key={`subtitle-item-title-${idx}`}>
@@ -249,11 +213,14 @@ const DropdownView: React.FC<DropdownViewProps> = ({
              {allAudio?.map((track, idx: number) => (
                <DropdownMenu.CheckboxItem
                  key={`audio-item-${idx}`}
-                  value={selectedAudioIndex === track.index}
+                  value={audioIndex === track.index.toString()}
                  onValueChange={() => {
-                    if (selectedAudioIndex === track.index) return;
-                    setSelectedAudioIndex(track.index);
-                    ChangeTranscodingAudio(track.index, selectedSubtitleIndex);
+                    if (audioIndex === track.index.toString()) return;
+                    console.log("Setting audio track to: ", track.index);
+                    router.setParams({
+                      audioIndex: track.index.toString(),
+                    });
+                    ChangeTranscodingAudio(track.index);
                  }}
                >
                  <DropdownMenu.ItemTitle key={`audio-item-title-${idx}`}>
--- a/hooks/useDefaultPlaySettings.ts
+++ b/hooks/useDefaultPlaySettings.ts
@@ -6,6 +6,7 @@ import {
 } from "@jellyfin/sdk/lib/generated-client";
 import { useMemo } from "react";

+// Used only for intial play settings.
 const useDefaultPlaySettings = (
  item: BaseItemDto,
  settings: Settings | null
@@ -17,34 +18,23 @@ const useDefaultPlaySettings = (
    // 2. Get default or preferred audio
    const defaultAudioIndex = mediaSource?.DefaultAudioStreamIndex;
    const preferedAudioIndex = mediaSource?.MediaStreams?.find(
-      (x) => x.Type === "Audio" && x.Language === settings?.defaultAudioLanguage
+      (x) =>
+        x.Type === "Audio" &&
+        x.Language ===
+          settings?.defaultAudioLanguage?.ThreeLetterISOLanguageName
    )?.Index;

    const firstAudioIndex = mediaSource?.MediaStreams?.find(
      (x) => x.Type === "Audio"
    )?.Index;

-    // 3. Get default or preferred subtitle
-    const preferedSubtitleIndex = mediaSource?.MediaStreams?.find(
-      (x) =>
-        x.Type === "Subtitle" &&
-        x.Language === settings?.defaultSubtitleLanguage?.value
-    )?.Index;
-
-    const defaultSubtitleIndex = mediaSource?.MediaStreams?.find(
-      (stream) => stream.Type === "Subtitle" && stream.IsDefault
-    )?.Index;
-
    // 4. Get default bitrate
    const bitrate = BITRATES[0];

    return {
      defaultAudioIndex:
        preferedAudioIndex || defaultAudioIndex || firstAudioIndex || undefined,
-      defaultSubtitleIndex:
-        preferedSubtitleIndex !== undefined
-          ? preferedSubtitleIndex
-          : defaultSubtitleIndex || undefined,
+      defaultSubtitleIndex: mediaSource?.DefaultSubtitleStreamIndex || -1,
      defaultMediaSource: mediaSource || undefined,
      defaultBitrate: bitrate || undefined,
    };
--- a/hooks/useRemuxHlsToMp4.ts
+++ b/hooks/useRemuxHlsToMp4.ts
@@ -1,7 +1,7 @@
 import { useDownload } from "@/providers/DownloadProvider";
 import { apiAtom } from "@/providers/JellyfinProvider";
 import { getItemImage } from "@/utils/getItemImage";
-import {writeErrorLog, writeInfoLog, writeToLog} from "@/utils/log";
+import { writeErrorLog, writeInfoLog, writeToLog } from "@/utils/log";
 import {
  BaseItemDto,
  MediaSourceInfo,
@@ -9,34 +9,34 @@ import {
 import { useQueryClient } from "@tanstack/react-query";
 import * as FileSystem from "expo-file-system";
 import { useRouter } from "expo-router";
-import {FFmpegKit, FFmpegSession, Statistics} from "ffmpeg-kit-react-native";
-import {useAtomValue} from "jotai";
-import {useCallback} from "react";
+import { FFmpegKit, FFmpegSession, Statistics } from "ffmpeg-kit-react-native";
+import { useAtomValue } from "jotai";
+import { useCallback } from "react";
 import { toast } from "sonner-native";
 import useImageStorage from "./useImageStorage";
 import useDownloadHelper from "@/utils/download";
-import {Api} from "@jellyfin/sdk";
-import {useSettings} from "@/utils/atoms/settings";
-import {JobStatus} from "@/utils/optimize-server";
+import { Api } from "@jellyfin/sdk";
+import { useSettings } from "@/utils/atoms/settings";
+import { JobStatus } from "@/utils/optimize-server";

 const createFFmpegCommand = (url: string, output: string) => [
-  "-y",                                                 // overwrite output files without asking
-  "-thread_queue_size 512",                             // https://ffmpeg.org/ffmpeg.html#toc-Advanced-options
+  "-y", // overwrite output files without asking
+  "-thread_queue_size 512", // https://ffmpeg.org/ffmpeg.html#toc-Advanced-options

  // region ffmpeg protocol commands                    // https://ffmpeg.org/ffmpeg-protocols.html
  "-protocol_whitelist file,http,https,tcp,tls,crypto", // whitelist
-  "-multiple_requests 1",                               // http
-  "-tcp_nodelay 1",                                     // http
+  "-multiple_requests 1", // http
+  "-tcp_nodelay 1", // http
  // endregion ffmpeg protocol commands

-  "-fflags +genpts",                                    // format flags
-  `-i ${url}`,                                          // infile
-  "-map 0:v -map 0:a",                                  // select all streams for video & audio
-  "-c copy",                                            // streamcopy, preventing transcoding
-  "-bufsize 25M",                                       // amount of data processed before calculating current bitrate
-  "-max_muxing_queue_size 4096",                        // sets the size of stream buffer in packets for output
-  output
-]
+  "-fflags +genpts", // format flags
+  `-i ${url}`, // infile
+  "-map 0:v -map 0:a", // select all streams for video & audio
+  "-c copy", // streamcopy, preventing transcoding
+  "-bufsize 25M", // amount of data processed before calculating current bitrate
+  "-max_muxing_queue_size 4096", // sets the size of stream buffer in packets for output
+  output,
+];

 /**
 * Custom hook for remuxing HLS to MP4 using FFmpeg.
@@ -51,9 +51,9 @@ export const useRemuxHlsToMp4 = () => {
  const queryClient = useQueryClient();

  const [settings] = useSettings();
-  const {saveImage} = useImageStorage();
-  const {saveSeriesPrimaryImage} = useDownloadHelper();
-  const {saveDownloadedItemInfo, setProcesses, processes} = useDownload();
+  const { saveImage } = useImageStorage();
+  const { saveSeriesPrimaryImage } = useDownloadHelper();
+  const { saveDownloadedItemInfo, setProcesses, processes, APP_CACHE_DOWNLOAD_DIRECTORY } = useDownload();

  const onSaveAssets = async (api: Api, item: BaseItemDto) => {
    await saveSeriesPrimaryImage(item);
@@ -66,90 +66,78 @@ export const useRemuxHlsToMp4 = () => {
    });

    await saveImage(item.Id, itemImage?.uri);
-  }
+  };

-  const completeCallback = useCallback(async (session: FFmpegSession, item: BaseItemDto) => {
-    try {
-      let endTime;
-      const returnCode = await session.getReturnCode();
-      const startTime = new Date();
+  const completeCallback = useCallback(
+    async (session: FFmpegSession, item: BaseItemDto) => {
+      try {
+        console.log("completeCallback");
+        const returnCode = await session.getReturnCode();

-      if (returnCode.isValueSuccess()) {
-        endTime = new Date();
-        const stat = await session.getLastReceivedStatistics();
-        await queryClient.invalidateQueries({queryKey: ["downloadedItems"]});
+        if (returnCode.isValueSuccess()) {
+          const stat = await session.getLastReceivedStatistics();
+          await FileSystem.moveAsync({
+              from: `${APP_CACHE_DOWNLOAD_DIRECTORY}${item.Id}.mp4`,
+              to: `${FileSystem.documentDirectory}${item.Id}.mp4`
+          })
+          await queryClient.invalidateQueries({
+            queryKey: ["downloadedItems"],
+          });
+          saveDownloadedItemInfo(item, stat.getSize());
+          toast.success("Download completed");
+        }

-        saveDownloadedItemInfo(item, stat.getSize());
-        writeInfoLog(
-          `useRemuxHlsToMp4 ~ remuxing completed successfully for item: ${item.Name}, 
-          start time: ${startTime.toISOString()}, end time: ${endTime.toISOString()}, 
-          duration: ${(endTime.getTime() - startTime.getTime()) / 1000}s`
-          .replace(/^ +/g, '')
-        )
-        toast.success("Download completed");
-      } else if (returnCode.isValueError()) {
-        endTime = new Date();
-        const allLogs = session.getAllLogsAsString();
-        writeErrorLog(
-          `useRemuxHlsToMp4 ~ remuxing failed for item: ${item.Name}, 
-          start time: ${startTime.toISOString()}, end time: ${endTime.toISOString()}, 
-          duration: ${(endTime.getTime() - startTime.getTime()) / 1000}s. All logs: ${allLogs}`
-          .replace(/^ +/g, '')
-        )
-      } else if (returnCode.isValueCancel()) {
-        endTime = new Date();
-        writeInfoLog(
-          `useRemuxHlsToMp4 ~ remuxing was canceled for item: ${item.Name}, 
-          start time: ${startTime.toISOString()}, end time: ${endTime.toISOString()}, 
-          duration: ${(endTime.getTime() - startTime.getTime()) / 1000}s`
-          .replace(/^ +/g, '')
-        )
+        setProcesses((prev) => {
+          return prev.filter((process) => process.itemId !== item.Id);
+        });
+      } catch (e) {
+        console.error(e);
      }

+      console.log("completeCallback ~ end");
+    },
+    [processes, setProcesses]
+  );
+
+  const statisticsCallback = useCallback(
+    (statistics: Statistics, item: BaseItemDto) => {
+      const videoLength =
+        (item.MediaSources?.[0]?.RunTimeTicks || 0) / 10000000; // In seconds
+      const fps = item.MediaStreams?.[0]?.RealFrameRate || 25;
+      const totalFrames = videoLength * fps;
+      const processedFrames = statistics.getVideoFrameNumber();
+      const speed = statistics.getSpeed();
+
+      const percentage =
+        totalFrames > 0 ? Math.floor((processedFrames / totalFrames) * 100) : 0;
+
+      if (!item.Id) throw new Error("Item is undefined");
      setProcesses((prev) => {
-        return prev.filter((process) => process.itemId !== item.Id);
+        return prev.map((process) => {
+          if (process.itemId === item.Id) {
+            return {
+              ...process,
+              id: statistics.getSessionId().toString(),
+              progress: percentage,
+              speed: Math.max(speed, 0),
+            };
+          }
+          return process;
+        });
      });
-    } catch (e) {
-      const error = e as Error;
-      writeErrorLog(
-        `useRemuxHlsToMp4 ~ Exception during remuxing for item: ${item.Name}, 
-        Error: ${error.message}, Stack: ${error.stack}`
-        .replace(/^ +/g, '')
-      );
-    }
-  }, [processes, setProcesses]);
-
-  const statisticsCallback = useCallback((statistics: Statistics, item: BaseItemDto) => {
-    const videoLength = (item.MediaSources?.[0]?.RunTimeTicks || 0) / 10000000; // In seconds
-    const fps = item.MediaStreams?.[0]?.RealFrameRate || 25;
-    const totalFrames = videoLength * fps;
-    const processedFrames = statistics.getVideoFrameNumber();
-    const speed = statistics.getSpeed();
-
-    const percentage =
-      totalFrames > 0
-        ? Math.floor((processedFrames / totalFrames) * 100)
-        : 0;
-
-    if (!item.Id) throw new Error("Item is undefined");
-    setProcesses((prev) => {
-      return prev.map((process) => {
-        if (process.itemId === item.Id) {
-          return {
-            ...process,
-            id: statistics.getSessionId().toString(),
-            progress: percentage,
-            speed: Math.max(speed, 0),
-          };
-        }
-        return process;
-      });
-    });
-  }, [setProcesses, completeCallback]);
+    },
+    [setProcesses, completeCallback]
+  );

  const startRemuxing = useCallback(
    async (item: BaseItemDto, url: string, mediaSource: MediaSourceInfo) => {
-      const output = `${FileSystem.documentDirectory}${item.Id}.mp4`;
+      const cacheDir = await FileSystem.getInfoAsync(APP_CACHE_DOWNLOAD_DIRECTORY);
+      if (!cacheDir.exists) {
+        await FileSystem.makeDirectoryAsync(APP_CACHE_DOWNLOAD_DIRECTORY, {intermediates: true})
+      }
+
+      const output = APP_CACHE_DOWNLOAD_DIRECTORY + `${item.Id}.mp4`
+
      if (!api) throw new Error("API is not defined");
      if (!item.Id) throw new Error("Item must have an Id");

@@ -177,17 +165,17 @@ export const useRemuxHlsToMp4 = () => {
          progress: 0,
          status: "downloading",
          timestamp: new Date(),
-        }
+        };

        writeInfoLog(`useRemuxHlsToMp4 ~ startRemuxing for item ${item.Name}`);
        setProcesses((prev) => [...prev, job]);

        await FFmpegKit.executeAsync(
          createFFmpegCommand(url, output).join(" "),
-          session => completeCallback(session, item),
+          (session) => completeCallback(session, item),
          undefined,
-          s => statisticsCallback(s, item)
-        )
+          (s) => statisticsCallback(s, item)
+        );
      } catch (e) {
        const error = e as Error;
        console.error("Failed to remux:", error);
--- a/package.json
+++ b/package.json
@@ -71,7 +71,7 @@
    "react-dom": "18.2.0",
    "react-native": "0.74.5",
    "react-native-awesome-slider": "^2.5.6",
-    "react-native-bottom-tabs": "^0.7.3",
+    "react-native-bottom-tabs": "0.7.1",
    "react-native-circular-progress": "^1.4.1",
    "react-native-compressor": "^1.9.0",
    "react-native-device-info": "^14.0.1",
@@ -95,6 +95,7 @@
    "react-native-url-polyfill": "^2.0.0",
    "react-native-uuid": "^2.0.2",
    "react-native-video": "^6.7.0",
+    "react-native-volume-manager": "^1.10.0",
    "react-native-web": "~0.19.13",
    "sonner-native": "^0.14.2",
    "tailwindcss": "3.3.2",
--- a/providers/DownloadProvider.tsx
+++ b/providers/DownloadProvider.tsx
@@ -39,7 +39,7 @@ import React, {
  useMemo,
  useState,
 } from "react";
-import { AppState, AppStateStatus } from "react-native";
+import {AppState, AppStateStatus, Platform} from "react-native";
 import { toast } from "sonner-native";
 import { apiAtom } from "./JellyfinProvider";
 import * as Notifications from "expo-notifications";
@@ -49,6 +49,7 @@ import { storage } from "@/utils/mmkv";
 import useDownloadHelper from "@/utils/download";
 import { FileInfo } from "expo-file-system";
 import * as Haptics from "expo-haptics";
+import * as Application from "expo-application";

 export type DownloadedItem = {
  item: Partial<BaseItemDto>;
@@ -194,6 +195,8 @@ function useDownloadProvider() {
    [settings?.optimizedVersionsServerUrl, authHeader]
  );

+  const APP_CACHE_DOWNLOAD_DIRECTORY = `${FileSystem.cacheDirectory}${Application.applicationId}/Downloads/`
+
  const startDownload = useCallback(
    async (process: JobStatus) => {
      if (!process?.item.Id || !authHeader) throw new Error("No item id");
@@ -410,8 +413,9 @@ function useDownloadProvider() {
      });
  };

-  const forEveryDirectoryFile = async (
+  const forEveryDocumentDirFile = async (
    includeMMKV: boolean = true,
+    ignoreList: string[] = [],
    callback: (file: FileInfo) => void
  ) => {
    const baseDirectory = FileSystem.documentDirectory;
@@ -423,16 +427,19 @@ function useDownloadProvider() {
    for (const item of dirContents) {
      // Exclude mmkv directory.
      // Deleting this deletes all user information as well. Logout should handle this.
-      if (item == "mmkv" && !includeMMKV) continue;
+      if ((item == "mmkv" && !includeMMKV) || ignoreList.some(i => item.includes(i))) {
+        console.log("Skipping read for item", item)
+        continue;
+      }
      const itemInfo = await FileSystem.getInfoAsync(`${baseDirectory}${item}`);
-      if (itemInfo.exists) {
+      if (!itemInfo.isDirectory && itemInfo.exists) {
        callback(itemInfo);
      }
    }
  };

  const deleteLocalFiles = async (): Promise<void> => {
-    await forEveryDirectoryFile(false, (file) => {
+    await forEveryDocumentDirFile(false, [], (file) => {
      console.warn("Deleting file", file.uri);
      FileSystem.deleteAsync(file.uri, { idempotent: true });
    });
@@ -525,6 +532,30 @@ function useDownloadProvider() {
    );
  };

+  const cleanCacheDirectory = async () => {
+    const cacheDir = await FileSystem.getInfoAsync(APP_CACHE_DOWNLOAD_DIRECTORY);
+    if (cacheDir.exists) {
+      const cachedFiles = await FileSystem.readDirectoryAsync(APP_CACHE_DOWNLOAD_DIRECTORY)
+      let position = 0
+      const batchSize = 3
+
+      // batching promise.all to avoid OOM
+      while (position < cachedFiles.length) {
+        const itemsForBatch = cachedFiles.slice(position, position + batchSize)
+        await Promise.all(itemsForBatch.map(async file => {
+          const info = await FileSystem.getInfoAsync(`${APP_CACHE_DOWNLOAD_DIRECTORY}${file}`)
+          if (info.exists) {
+            await FileSystem.deleteAsync(info.uri, { idempotent: true })
+            return Promise.resolve(file)
+          }
+          return Promise.reject()
+        }))
+
+        position += batchSize
+      }
+    }
+  }
+
  const deleteFileByType = async (type: BaseItemDto["Type"]) => {
    await Promise.all(
      downloadedFiles
@@ -540,9 +571,17 @@ function useDownloadProvider() {
  };

  const appSizeUsage = useMemo(async () => {
-    const sizes: number[] = [];
-    await forEveryDirectoryFile(true, (file) => {
-      if (file.exists) sizes.push(file.size);
+    const ignore: string[] = [];
+    const sizes: number[] = downloadedFiles?.map(d => {
+      ignore.push(d.item.Id!!)
+      return getDownloadedItemSize(d.item.Id!!)
+    }) || [];
+
+    await forEveryDocumentDirFile(true, ignore, (file) => {
+      // Skip reading downloaded files since these are saved in storage
+      if (!downloadedFiles?.some(d => file.uri.includes(d.item.Id!!)) && file.exists) {
+        sizes.push(file.size);
+      }
    });

    return sizes.reduce((sum, size) => sum + size, 0);
@@ -636,6 +675,8 @@ function useDownloadProvider() {
    deleteFileByType,
    appSizeUsage,
    getDownloadedItemSize,
+    APP_CACHE_DOWNLOAD_DIRECTORY,
+    cleanCacheDirectory
  };
 }

@@ -662,10 +703,10 @@ export function bytesToReadable(bytes: number): string {

  if (gb >= 1) return `${gb.toFixed(2)} GB`;

-  const mb = bytes / 1024 / 1024;
+  const mb = bytes / 1024.0 / 1024.0;
  if (mb >= 1) return `${mb.toFixed(2)} MB`;

-  const kb = bytes / 1024;
+  const kb = bytes / 1024.0;
  if (kb >= 1) return `${kb.toFixed(2)} KB`;
  return `${bytes.toFixed(2)} B`;
 }
--- a/utils/SubtitleHelper.ts
+++ b/utils/SubtitleHelper.ts
@@ -0,0 +1,134 @@
+import { TranscodedSubtitle } from "@/components/video-player/controls/types";
+import { TrackInfo } from "@/modules/vlc-player";
+import { MediaStream } from "@jellyfin/sdk/lib/generated-client";
+import { Platform } from "react-native";
+
+const disableSubtitle = {
+  name: "Disable",
+  index: -1,
+  IsTextSubtitleStream: true,
+} as TranscodedSubtitle;
+
+export class SubtitleHelper {
+  private mediaStreams: MediaStream[];
+
+  constructor(mediaStreams: MediaStream[]) {
+    this.mediaStreams = mediaStreams.filter((x) => x.Type === "Subtitle");
+  }
+
+  getSubtitles(): MediaStream[] {
+    return this.mediaStreams;
+  }
+
+  getUniqueSubtitles(): MediaStream[] {
+    const uniqueSubs: MediaStream[] = [];
+    const seen = new Set<string>();
+
+    this.mediaStreams.forEach((x) => {
+      if (!seen.has(x.DisplayTitle!)) {
+        seen.add(x.DisplayTitle!);
+        uniqueSubs.push(x);
+      }
+    });
+
+    return uniqueSubs;
+  }
+
+  getCurrentSubtitle(subtitleIndex?: number): MediaStream | undefined {
+    return this.mediaStreams.find((x) => x.Index === subtitleIndex);
+  }
+
+  getMostCommonSubtitleByName(
+    subtitleIndex: number | undefined
+  ): number | undefined {
+    if (subtitleIndex === undefined) -1;
+    const uniqueSubs = this.getUniqueSubtitles();
+    const currentSub = this.getCurrentSubtitle(subtitleIndex);
+
+    return uniqueSubs.find((x) => x.DisplayTitle === currentSub?.DisplayTitle)
+      ?.Index;
+  }
+
+  getTextSubtitles(): MediaStream[] {
+    return this.mediaStreams.filter((x) => x.IsTextSubtitleStream);
+  }
+
+  getImageSubtitles(): MediaStream[] {
+    return this.mediaStreams.filter((x) => !x.IsTextSubtitleStream);
+  }
+
+  getEmbeddedTrackIndex(sourceSubtitleIndex: number): number {
+    if (Platform.OS === "android") {
+      const textSubs = this.getTextSubtitles();
+      const matchingSubtitle = textSubs.find(
+        (sub) => sub.Index === sourceSubtitleIndex
+      );
+
+      if (!matchingSubtitle) return -1;
+      return textSubs.indexOf(matchingSubtitle);
+    }
+
+    // Get unique text-based subtitles because react-native-video removes hls text tracks duplicates. (iOS)
+    const uniqueTextSubs = this.getUniqueTextBasedSubtitles();
+    const matchingSubtitle = uniqueTextSubs.find(
+      (sub) => sub.Index === sourceSubtitleIndex
+    );
+
+    if (!matchingSubtitle) return -1;
+    return uniqueTextSubs.indexOf(matchingSubtitle);
+  }
+
+  sortSubtitles(
+    textSubs: TranscodedSubtitle[],
+    allSubs: MediaStream[]
+  ): TranscodedSubtitle[] {
+    let textIndex = 0; // To track position in textSubtitles
+    // Merge text and image subtitles in the order of allSubs
+    const sortedSubtitles = allSubs.map((sub) => {
+      if (sub.IsTextSubtitleStream) {
+        if (textSubs.length === 0) return disableSubtitle;
+        const textSubtitle = textSubs[textIndex];
+        if (!textSubtitle) return disableSubtitle;
+        textIndex++;
+        return textSubtitle;
+      } else {
+        return {
+          name: sub.DisplayTitle!,
+          index: sub.Index!,
+          IsTextSubtitleStream: sub.IsTextSubtitleStream,
+        } as TranscodedSubtitle;
+      }
+    });
+
+    return sortedSubtitles;
+  }
+
+  getSortedSubtitles(subtitleTracks: TrackInfo[]): TranscodedSubtitle[] {
+    const textSubtitles =
+      subtitleTracks.map((s) => ({
+        name: s.name,
+        index: s.index,
+        IsTextSubtitleStream: true,
+      })) || [];
+
+    const sortedSubs =
+      Platform.OS === "android"
+        ? this.sortSubtitles(textSubtitles, this.mediaStreams)
+        : this.sortSubtitles(textSubtitles, this.getUniqueSubtitles());
+
+    return sortedSubs;
+  }
+
+  getUniqueTextBasedSubtitles(): MediaStream[] {
+    return this.getUniqueSubtitles().filter((x) => x.IsTextSubtitleStream);
+  }
+
+  // HLS stream indexes are not the same as the actual source indexes.
+  // This function aims to get the source subtitle index from the embedded track index.
+  getSourceSubtitleIndex = (embeddedTrackIndex: number): number => {
+    if (Platform.OS === "android") {
+      return this.getTextSubtitles()[embeddedTrackIndex]?.Index ?? -1;
+    }
+    return this.getUniqueTextBasedSubtitles()[embeddedTrackIndex]?.Index ?? -1;
+  };
+}
--- a/utils/atoms/settings.ts
+++ b/utils/atoms/settings.ts
@@ -3,6 +3,10 @@ import { useEffect } from "react";
 import * as ScreenOrientation from "expo-screen-orientation";
 import { storage } from "../mmkv";
 import { Platform } from "react-native";
+import {
+  CultureDto,
+  SubtitlePlaybackMode,
+} from "@jellyfin/sdk/lib/generated-client";

 export type DownloadQuality = "original" | "high" | "low";

@@ -66,8 +70,12 @@ export type Settings = {
  openInVLC?: boolean;
  downloadQuality?: DownloadOption;
  libraryOptions: LibraryOptions;
-  defaultSubtitleLanguage: DefaultLanguageOption | null;
-  defaultAudioLanguage: DefaultLanguageOption | null;
+  defaultAudioLanguage: CultureDto | null;
+  playDefaultAudioTrack: boolean;
+  rememberAudioSelections: boolean;
+  defaultSubtitleLanguage: CultureDto | null;
+  subtitleMode: SubtitlePlaybackMode;
+  rememberSubtitleSelections: boolean;
  showHomeTitles: boolean;
  defaultVideoOrientation: ScreenOrientation.OrientationLock;
  forwardSkipTime: number;
@@ -99,7 +107,11 @@ const loadSettings = (): Settings => {
      showStats: true,
    },
    defaultAudioLanguage: null,
+    playDefaultAudioTrack: true,
+    rememberAudioSelections: true,
    defaultSubtitleLanguage: null,
+    subtitleMode: SubtitlePlaybackMode.Default,
+    rememberSubtitleSelections: true,
    showHomeTitles: true,
    defaultVideoOrientation: ScreenOrientation.OrientationLock.DEFAULT,
    forwardSkipTime: 30,
@@ -144,6 +156,7 @@ export const useSettings = () => {
  const updateSettings = (update: Partial<Settings>) => {
    if (settings) {
      const newSettings = { ...settings, ...update };
+
      setSettings(newSettings);
      saveSettings(newSettings);
    }
--- a/utils/jellyfin/getDefaultPlaySettings.ts
+++ b/utils/jellyfin/getDefaultPlaySettings.ts
@@ -4,7 +4,12 @@ import {
  BaseItemDto,
  MediaSourceInfo,
 } from "@jellyfin/sdk/lib/generated-client";
-import { Settings } from "../atoms/settings";
+import { Settings, useSettings } from "../atoms/settings";
+import {
+  AudioStreamRanker,
+  StreamRanker,
+  SubtitleStreamRanker,
+} from "../streamRanker";

 interface PlaySettings {
  item: BaseItemDto;
@@ -14,9 +19,22 @@ interface PlaySettings {
  subtitleIndex?: number | undefined;
 }

+export interface previousIndexes {
+  audioIndex?: number;
+  subtitleIndex?: number;
+}
+
+interface TrackOptions {
+  DefaultAudioStreamIndex: number | undefined;
+  DefaultSubtitleStreamIndex: number | undefined;
+}
+
+// Used getting default values for the next player.
 export function getDefaultPlaySettings(
  item: BaseItemDto,
-  settings: Settings
+  settings: Settings,
+  previousIndexes?: previousIndexes,
+  previousSource?: MediaSourceInfo
 ): PlaySettings {
  if (item.Type === "Program") {
    return {
@@ -35,19 +53,44 @@ export function getDefaultPlaySettings(
  // 2. Get default or preferred audio
  const defaultAudioIndex = mediaSource?.DefaultAudioStreamIndex;
  const preferedAudioIndex = mediaSource?.MediaStreams?.find(
-    (x) => x.Language === settings?.defaultAudioLanguage
+    (x) => x.Type === "Audio" && x.Language === settings?.defaultAudioLanguage
  )?.Index;
  const firstAudioIndex = mediaSource?.MediaStreams?.find(
    (x) => x.Type === "Audio"
  )?.Index;

-  // 3. Get default or preferred subtitle
-  const preferedSubtitleIndex = mediaSource?.MediaStreams?.find(
-    (x) => x.Language === settings?.defaultSubtitleLanguage?.value
-  )?.Index;
-  const defaultSubtitleIndex = mediaSource?.MediaStreams?.find(
-    (stream) => stream.Type === "Subtitle" && stream.IsDefault
-  )?.Index;
+  // We prefer the previous track over the default track.
+  let trackOptions: TrackOptions = {
+    DefaultAudioStreamIndex: defaultAudioIndex ?? -1,
+    DefaultSubtitleStreamIndex: mediaSource?.DefaultSubtitleStreamIndex ?? -1,
+  };
+
+  const mediaStreams = mediaSource?.MediaStreams ?? [];
+  if (settings?.rememberSubtitleSelections && previousIndexes) {
+    if (previousIndexes.subtitleIndex !== undefined && previousSource) {
+      const subtitleRanker = new SubtitleStreamRanker();
+      const ranker = new StreamRanker(subtitleRanker);
+      ranker.rankStream(
+        previousIndexes.subtitleIndex,
+        previousSource,
+        mediaStreams,
+        trackOptions
+      );
+    }
+  }
+
+  if (settings?.rememberAudioSelections && previousIndexes) {
+    if (previousIndexes.audioIndex !== undefined && previousSource) {
+      const audioRanker = new AudioStreamRanker();
+      const ranker = new StreamRanker(audioRanker);
+      ranker.rankStream(
+        previousIndexes.audioIndex,
+        previousSource,
+        mediaStreams,
+        trackOptions
+      );
+    }
+  }

  // 4. Get default bitrate
  const bitrate = BITRATES.sort(
@@ -58,7 +101,7 @@ export function getDefaultPlaySettings(
    item,
    bitrate,
    mediaSource,
-    audioIndex: preferedAudioIndex ?? defaultAudioIndex ?? firstAudioIndex,
-    subtitleIndex: preferedSubtitleIndex ?? defaultSubtitleIndex ?? -1,
+    audioIndex: trackOptions.DefaultAudioStreamIndex,
+    subtitleIndex: trackOptions.DefaultSubtitleStreamIndex,
  };
 }
--- a/utils/jellyfin/media/getStreamUrl.ts
+++ b/utils/jellyfin/media/getStreamUrl.ts
@@ -109,7 +109,6 @@ export const getStreamUrl = async ({

  if (item.MediaType === "Video") {
    if (mediaSource?.TranscodingUrl) {
-
      const urlObj = new URL(api.basePath + mediaSource?.TranscodingUrl); // Create a URL object

      // If there is no subtitle stream index, add it to the URL.
@@ -124,10 +123,7 @@ export const getStreamUrl = async ({
      // Get the updated URL
      const transcodeUrl = urlObj.toString();

-      console.log(
-        "Video has transcoding URL:",
-        `${transcodeUrl}`
-      );
+      console.log("Video has transcoding URL:", `${transcodeUrl}`);
      return {
        url: transcodeUrl,
        sessionId: sessionId,
--- a/utils/profiles/chromecast.ts
+++ b/utils/profiles/chromecast.ts
@@ -41,21 +41,39 @@ export const chromecastProfile: DeviceProfile = {
  ],
  TranscodingProfiles: [
    {
-      Type: "Video",
-      Context: "Streaming",
-      Protocol: "hls",
      Container: "ts",
-      VideoCodec: "h264, hevc",
-      AudioCodec: "aac,mp3,ac3",
-      CopyTimestamps: false,
-      EnableSubtitlesInManifest: true,
+      Type: "Video",
+      VideoCodec: "h264",
+      AudioCodec: "aac,mp3",
+      Protocol: "hls",
+      Context: "Streaming",
+      MaxAudioChannels: "2",
+      MinSegments: 2,
+      BreakOnNonKeyFrames: true,
    },
    {
-      Type: "Audio",
-      Context: "Streaming",
+      Container: "mp4",
+      Type: "Video",
+      VideoCodec: "h264",
+      AudioCodec: "aac",
      Protocol: "http",
+      Context: "Streaming",
+      MaxAudioChannels: "2",
+    },
+    {
      Container: "mp3",
+      Type: "Audio",
      AudioCodec: "mp3",
+      Protocol: "http",
+      Context: "Streaming",
+      MaxAudioChannels: "2",
+    },
+    {
+      Container: "aac",
+      Type: "Audio",
+      AudioCodec: "aac",
+      Protocol: "http",
+      Context: "Streaming",
      MaxAudioChannels: "2",
    },
  ],
--- a/utils/profiles/transcoding.js
+++ b/utils/profiles/transcoding.js
@@ -5,7 +5,6 @@
 */
 import MediaTypes from "../../constants/MediaTypes";

-
 export default {
  Name: "Vlc Player for HLS streams.",
  MaxStaticBitrate: 20_000_000,
@@ -40,7 +39,7 @@ export default {
      Type: MediaTypes.Video,
      Context: "Streaming",
      Protocol: "hls",
-      Container: "ts",
+      Container: "fmp4",
      VideoCodec: "h264, hevc",
      AudioCodec: "aac,mp3,ac3",
      CopyTimestamps: false,
@@ -78,11 +77,10 @@ export default {
    { Format: "vtt", Method: "Hls" },
    { Format: "webvtt", Method: "Hls" },

-
    // Image based subs use encode.
    { Format: "dvdsub", Method: "Encode" },
    { Format: "pgs", Method: "Encode" },
    { Format: "pgssub", Method: "Encode" },
    { Format: "xsub", Method: "Encode" },
  ],
-};
+};
--- a/utils/streamRanker.ts
+++ b/utils/streamRanker.ts
@@ -0,0 +1,147 @@
+import {
+  MediaSourceInfo,
+  MediaStream,
+} from "@jellyfin/sdk/lib/generated-client";
+
+abstract class StreamRankerStrategy {
+  abstract streamType: string;
+
+  abstract rankStream(
+    prevIndex: number,
+    prevSource: MediaSourceInfo,
+    mediaStreams: MediaStream[],
+    trackOptions: any
+  ): void;
+
+  protected rank(
+    prevIndex: number,
+    prevSource: MediaSourceInfo,
+    mediaStreams: MediaStream[],
+    trackOptions: any
+  ): void {
+    if (prevIndex == -1) {
+      console.debug(`AutoSet Subtitle - No Stream Set`);
+      trackOptions[`Default${this.streamType}StreamIndex`] = -1;
+      return;
+    }
+
+    if (!prevSource.MediaStreams || !mediaStreams) {
+      console.debug(`AutoSet ${this.streamType} - No MediaStreams`);
+      return;
+    }
+
+    let bestStreamIndex = null;
+    let bestStreamScore = 0;
+
+    const prevStream = prevSource.MediaStreams[prevIndex];
+
+    if (!prevStream) {
+      console.debug(`AutoSet ${this.streamType} - No prevStream`);
+      return;
+    }
+
+    console.debug(
+      `AutoSet ${this.streamType} - Previous was ${prevStream.Index} - ${prevStream.DisplayTitle}`
+    );
+
+    let prevRelIndex = 0;
+    for (const stream of prevSource.MediaStreams) {
+      if (stream.Type != this.streamType) continue;
+
+      if (stream.Index == prevIndex) break;
+
+      prevRelIndex += 1;
+    }
+
+    let newRelIndex = 0;
+    for (const stream of mediaStreams) {
+      if (stream.Type != this.streamType) continue;
+
+      let score = 0;
+
+      if (prevStream.Codec == stream.Codec) score += 1;
+      if (prevRelIndex == newRelIndex) score += 1;
+      if (
+        prevStream.DisplayTitle &&
+        prevStream.DisplayTitle == stream.DisplayTitle
+      )
+        score += 2;
+      if (
+        prevStream.Language &&
+        prevStream.Language != "und" &&
+        prevStream.Language == stream.Language
+      )
+        score += 2;
+
+      console.debug(
+        `AutoSet ${this.streamType} - Score ${score} for ${stream.Index} - ${stream.DisplayTitle}`
+      );
+      if (score > bestStreamScore && score >= 3) {
+        bestStreamScore = score;
+        bestStreamIndex = stream.Index;
+      }
+
+      newRelIndex += 1;
+    }
+
+    if (bestStreamIndex != null) {
+      console.debug(
+        `AutoSet ${this.streamType} - Using ${bestStreamIndex} score ${bestStreamScore}.`
+      );
+      trackOptions[`Default${this.streamType}StreamIndex`] = bestStreamIndex;
+    } else {
+      console.debug(
+        `AutoSet ${this.streamType} - Threshold not met. Using default.`
+      );
+    }
+  }
+}
+
+class SubtitleStreamRanker extends StreamRankerStrategy {
+  streamType = "Subtitle";
+
+  rankStream(
+    prevIndex: number,
+    prevSource: MediaSourceInfo,
+    mediaStreams: MediaStream[],
+    trackOptions: any
+  ): void {
+    super.rank(prevIndex, prevSource, mediaStreams, trackOptions);
+  }
+}
+
+class AudioStreamRanker extends StreamRankerStrategy {
+  streamType = "Audio";
+
+  rankStream(
+    prevIndex: number,
+    prevSource: MediaSourceInfo,
+    mediaStreams: MediaStream[],
+    trackOptions: any
+  ): void {
+    super.rank(prevIndex, prevSource, mediaStreams, trackOptions);
+  }
+}
+
+class StreamRanker {
+  private strategy: StreamRankerStrategy;
+
+  constructor(strategy: StreamRankerStrategy) {
+    this.strategy = strategy;
+  }
+
+  setStrategy(strategy: StreamRankerStrategy) {
+    this.strategy = strategy;
+  }
+
+  rankStream(
+    prevIndex: number,
+    prevSource: MediaSourceInfo,
+    mediaStreams: MediaStream[],
+    trackOptions: any
+  ) {
+    this.strategy.rankStream(prevIndex, prevSource, mediaStreams, trackOptions);
+  }
+}
+
+export { StreamRanker, SubtitleStreamRanker, AudioStreamRanker };
Author	SHA1	Message	Date
Fredrik Burmester	6190f2e602	feat: add technical details to item	2024-12-19 12:05:57 +01:00
Fredrik Burmester	24fdd071af	Merge pull request #294 from jakequade/master fix: restore streaming codecs	2024-12-19 10:11:04 +01:00
jakequade	be3122caac	add in proper codecs for chromecast	2024-12-17 20:41:07 +11:00
Fredrik Burmester	39a220bbed	Merge pull request #289 from herrrta/fix/delete-type Move downloads to a cache directory	2024-12-14 22:49:15 +01:00
herrrta	e3bdbb5cbd	Move downloads to a cache directory - cleanup cache during apps first cold start - Downloads now saved in cacheDirectory and moved to documents when verified complete - Bring back download size to episode card - Improve reading a files size if its a known downloaded file - Added decimal to divisor in bytesToReadable for more accurate file size conversions	2024-12-14 12:19:44 -05:00
Fredrik Burmester	b6ad05d980	Merge pull request #284 from Alexk2309/hotfix/transcoded-streams Hotfix/transcoded streams	2024-12-13 07:48:54 +01:00
Alex Kim	0360b5cbd5	Merged changes from main	2024-12-13 16:39:58 +11:00
Alex Kim	a9b1d9fb0a	Added bandaid fix	2024-12-13 05:03:16 +11:00
Alex Kim	4291ef55b9	Added tmp fix	2024-12-13 01:04:55 +11:00
Fredrik Burmester	655060fb40	Merge pull request #282 from Alexk2309/hotfix/for-settings Hotfix/for settings	2024-12-12 12:20:35 +01:00
Alex Kim	0e29b8b671	Added temporary fix	2024-12-12 21:41:22 +11:00
Alex Kim	72f64c71dd	Added .vscode to git ignore	2024-12-12 16:37:06 +11:00
Alex Kim	ddfd9f6ce3	Added vscode styling for pretier extension	2024-12-12 16:36:17 +11:00
Alex Kim	67fb339d40	Added fix that fully stops the UseEffect hook from been calling indefinetly	2024-12-12 16:33:30 +11:00
Alex Kim	9e0a7f047c	Added new pulled state, to stop infinite callback for useEffect hookt in MediaContext	2024-12-12 15:44:53 +11:00
Fredrik Burmester	aab806bbf4	Merge pull request #281 from Alexk2309/hotfix/fix-options-after-subtitle-audio-revamp Added fix	2024-12-11 19:39:37 +01:00
Alex Kim	4a53b20618	Added fix	2024-12-12 05:38:14 +11:00
Fredrik Burmester	45299a5c5d	Merge pull request #279 from Alexk2309/revamp/audio-subtitle-selection Revamp/audio subtitle selection	2024-12-11 18:59:24 +01:00
Alex Kim	65ad4effca	Merged main into branch	2024-12-12 04:25:37 +11:00
Alex Kim	35fcb5ca0c	Completed subtitle feature	2024-12-12 04:23:09 +11:00
Fredrik Burmester	5dc0066370	fix: remove auto http/s and allow for more flexible urls	2024-12-11 18:02:27 +01:00
Alex Kim	3fb20a8ca2	Revamped transcoding subtitles	2024-12-12 02:41:30 +11:00
Fredrik Burmester	180ed54fed	fix: initial support playlists	2024-12-11 15:49:20 +01:00
Fredrik Burmester	72859b4ae3	fix: make the next episode button work with skip credits button	2024-12-11 08:28:11 +01:00
Fredrik Burmester	bfe96edb29	fix: don't show if no next episode	2024-12-10 21:52:46 +01:00
Fredrik Burmester	46f4acdad0	Merge pull request #276 from fredrikburmester/feat/go-to-next-episode-countdown feat: go to next episode countdown	2024-12-10 21:11:51 +01:00
Fredrik Burmester	da1aa9f48c	feat: go to next episode countdown	2024-12-10 20:37:58 +01:00
Alex Kim	1d0d99c79b	Added stream ranker class	2024-12-11 06:02:13 +11:00
Alex Kim	33a6295b20	Added more selection options	2024-12-11 05:22:56 +11:00
Alex Kim	72cc381087	Added use default audio	2024-12-11 04:59:33 +11:00
Alex Kim	c4bfaf2d56	Made subtitle mode fetch from server	2024-12-11 04:52:12 +11:00
Alex Kim	487ac398e5	Added subtitle mode in options	2024-12-11 04:48:53 +11:00
Alex Kim	84fd0edc49	WIP	2024-12-11 04:01:30 +11:00
Fredrik Burmester	0e1583c440	Merge pull request #275 from Alexk2309/fix/select-same-bitrate-when-changing-episode-in-player Fix for the selecting the same bitrate when changing the same episode…	2024-12-10 10:51:30 +01:00
Alex Kim	6459e5f323	Fix for the selecting the same bitrate when changing the same episode in the player	2024-12-10 20:48:15 +11:00
Fredrik Burmester	319e1fd53f	Merge pull request #274 from Alexk2309/fix/trick-play-invalid-for-transcoded-player Fix/trick play invalid for transcoded player	2024-12-10 10:24:39 +01:00
Alex Kim	93bd817eaf	Removed old function argumement	2024-12-10 20:22:41 +11:00
Alex Kim	d9f21e6824	Removed Unused imports for controls	2024-12-10 20:21:53 +11:00
Alex Kim	d287f5d082	Added fix for invalid trickplay, for transcoded player	2024-12-10 20:21:00 +11:00
Fredrik Burmester	ecd2fa386e	chore	2024-12-09 21:33:10 +01:00
Fredrik Burmester	7c022bbaff	Merge pull request #273 from Alexk2309/hotfix/show-audio-slider-when-changing-audio-through-device Added feature to show audio slider when changing audio through device	2024-12-09 21:32:42 +01:00
Alex Kim	5d79ee34cf	Added feature to show audio slider when changing audio through device	2024-12-10 05:20:49 +11:00
Fredrik Burmester	b0adad8dc4	Merge pull request #272 from Alexk2309/feature/audio-slider-in-controls Feature/audio slider in controls	2024-12-09 17:22:14 +01:00
Alex Kim	c3d3f538d7	Finished changes for audio selection	2024-12-10 03:21:02 +11:00
Alex Kim	6b6dedf303	WIP	2024-12-10 02:50:03 +11:00
Alex Kim	8d22e4c075	Added audioSlider.tsx	2024-12-10 02:20:52 +11:00