fix: incorrect matrix

Changed default subtitle size depending platform

app/(auth)/(tabs)/(home)/downloads/[seriesId].tsx

@@ -1,37 +1,48 @@
-import {Text} from "@/components/common/Text";
-import {useDownload} from "@/providers/DownloadProvider";
-import {router, useLocalSearchParams, useNavigation} from "expo-router";
-import React, {useCallback, useEffect, useMemo, useState} from "react";
-import {ScrollView, TouchableOpacity, View} from "react-native";
-import {EpisodeCard} from "@/components/downloads/EpisodeCard";
-import {BaseItemDto} from "@jellyfin/sdk/lib/generated-client/models";
-import {SeasonDropdown, SeasonIndexState} from "@/components/series/SeasonDropdown";
-import {storage} from "@/utils/mmkv";
-import {Ionicons} from "@expo/vector-icons";
+import { Text } from "@/components/common/Text";
+import { useDownload } from "@/providers/DownloadProvider";
+import { router, useLocalSearchParams, useNavigation } from "expo-router";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { ScrollView, TouchableOpacity, View, Alert } from "react-native";
+import { EpisodeCard } from "@/components/downloads/EpisodeCard";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import {
+  SeasonDropdown,
+  SeasonIndexState,
+} from "@/components/series/SeasonDropdown";
+import { storage } from "@/utils/mmkv";
+import { Ionicons } from "@expo/vector-icons";
 
 export default function page() {
   const navigation = useNavigation();
   const local = useLocalSearchParams();
-  const {seriesId, episodeSeasonIndex} = local as {
-    seriesId: string,
-    episodeSeasonIndex: number | string | undefined
+  const { seriesId, episodeSeasonIndex } = local as {
+    seriesId: string;
+    episodeSeasonIndex: number | string | undefined;
   };
 
-  const [seasonIndexState, setSeasonIndexState] = useState<SeasonIndexState>({});
-  const {downloadedFiles, deleteItems} = useDownload();
+  const [seasonIndexState, setSeasonIndexState] = useState<SeasonIndexState>(
+    {}
+  );
+  const { downloadedFiles, deleteItems } = useDownload();
 
   const series = useMemo(() => {
     try {
-      return downloadedFiles
+      return (
+        downloadedFiles
           ?.filter((f) => f.item.SeriesId == seriesId)
-          ?.sort((a, b) => a?.item.ParentIndexNumber! - b.item.ParentIndexNumber!)
-          || [];
+          ?.sort(
+            (a, b) => a?.item.ParentIndexNumber! - b.item.ParentIndexNumber!
+          ) || []
+      );
     } catch {
       return [];
     }
   }, [downloadedFiles]);
 
-  const seasonIndex = seasonIndexState[series?.[0]?.item?.ParentId ?? ""] || episodeSeasonIndex || "";
+  const seasonIndex =
+    seasonIndexState[series?.[0]?.item?.ParentId ?? ""] ||
+    episodeSeasonIndex ||
+    "";
 
   const groupBySeason = useMemo<BaseItemDto[]>(() => {
     const seasons: Record<string, BaseItemDto[]> = {};
@@ -43,13 +54,16 @@ export default function page() {
 
       seasons[episode.item.ParentIndexNumber!].push(episode.item);
     });
-    return seasons[seasonIndex]
-      ?.sort((a, b) => a.IndexNumber! - b.IndexNumber!)
-      ?? []
+    return (
+      seasons[seasonIndex]?.sort((a, b) => a.IndexNumber! - b.IndexNumber!) ??
+      []
+    );
   }, [series, seasonIndex]);
 
-  const initialSeasonIndex = useMemo(() =>
-      Object.values(groupBySeason)?.[0]?.ParentIndexNumber ?? series?.[0]?.item?.ParentIndexNumber,
+  const initialSeasonIndex = useMemo(
+    () =>
+      Object.values(groupBySeason)?.[0]?.ParentIndexNumber ??
+      series?.[0]?.item?.ParentIndexNumber,
     [groupBySeason]
   );
 
@@ -58,49 +72,61 @@ export default function page() {
       navigation.setOptions({
         title: series[0].item.SeriesName,
       });
-    }
-    else {
+    } else {
       storage.delete(seriesId);
       router.back();
     }
   }, [series]);
 
-  const deleteSeries = useCallback(
-    async () => deleteItems(groupBySeason),
-    [groupBySeason]
-  );
+  const deleteSeries = useCallback(() => {
+    Alert.alert(
+      "Delete season",
+      "Are you sure you want to delete the entire season?",
+      [
+        {
+          text: "Cancel",
+          style: "cancel",
+        },
+        {
+          text: "Delete",
+          onPress: () => deleteItems(groupBySeason),
+          style: "destructive",
+        },
+      ]
+    );
+  }, [groupBySeason]);
+
   return (
-    <>
-      {series.length > 0 && <View className="my-4 flex flex-row items-center justify-start">
-        <SeasonDropdown
-          item={series[0].item}
-          seasons={series.map(s => s.item)}
-          state={seasonIndexState}
-          initialSeasonIndex={initialSeasonIndex!}
-          onSelect={(season) => {
-            setSeasonIndexState((prev) => ({
-              ...prev,
-              [series[0].item.ParentId ?? ""]: season.ParentIndexNumber,
-            }));
-          }}/>
-          <View className="flex flex-row items-center justify-between w-72">
-            <View className="bg-purple-600 rounded-full h-6 w-6 flex items-center justify-center">
-                <Text className="text-xs font-bold">{groupBySeason.length}</Text>
-            </View>
-            <View className="bg-neutral-800/80 rounded-full h-10 w-10 flex items-center justify-center">
-              <TouchableOpacity onPress={deleteSeries}>
-                <Ionicons name="trash" size={22} color="white"/>
-              </TouchableOpacity>
-            </View>
+    <View className="flex-1">
+      {series.length > 0 && (
+        <View className="flex flex-row items-center justify-start my-2 px-4">
+          <SeasonDropdown
+            item={series[0].item}
+            seasons={series.map((s) => s.item)}
+            state={seasonIndexState}
+            initialSeasonIndex={initialSeasonIndex!}
+            onSelect={(season) => {
+              setSeasonIndexState((prev) => ({
+                ...prev,
+                [series[0].item.ParentId ?? ""]: season.ParentIndexNumber,
+              }));
+            }}
+          />
+          <View className="bg-purple-600 rounded-full h-6 w-6 flex items-center justify-center ml-2">
+            <Text className="text-xs font-bold">{groupBySeason.length}</Text>
           </View>
-      </View>}
-      <ScrollView key={seasonIndex}>
+          <View className="bg-neutral-800/80 rounded-full h-9 w-9 flex items-center justify-center ml-auto">
+            <TouchableOpacity onPress={deleteSeries}>
+              <Ionicons name="trash" size={20} color="white" />
+            </TouchableOpacity>
+          </View>
+        </View>
+      )}
+      <ScrollView key={seasonIndex} className="px-4">
         {groupBySeason.map((episode, index) => (
-          <View className="px-4 flex flex-col my-4" key={index}>
-            <EpisodeCard item={episode}/>
-          </View>
+          <EpisodeCard key={index} item={episode} />
         ))}
       </ScrollView>
-    </>
+    </View>
   );
-}
+}

app/(auth)/(tabs)/(home)/downloads/index.tsx

@@ -71,7 +71,7 @@ export default function page() {
       writeToLog("ERROR", reason);
       toast.error("Failed to delete all movies");
     });
-  const deleteShows = () => deleteFileByType("Movie")
+  const deleteShows = () => deleteFileByType("Episode")
     .then(() => toast.success("Deleted all TV-Series successfully!"))
     .catch((reason) => {
       writeToLog("ERROR", reason);

app/(auth)/player/direct-player.tsx

@@ -342,22 +342,11 @@ export default function page() {
       : 0;
   }, [item]);
 
-  const backAction = () => {
-    videoRef.current?.stop();
-    return false;
-  };
-
   useFocusEffect(
     React.useCallback(() => {
-      const onBackPress = () => {
-        return backAction();
-      };
-
-      BackHandler.addEventListener("hardwareBackPress", onBackPress);
-
       return async () => {
-        videoRef.current?.stop();
-        BackHandler.removeEventListener("hardwareBackPress", onBackPress);
+        stop();
+        console.log("Unmounted");
       };
     }, [])
   );

app/(auth)/player/transcoding-player.tsx

@@ -362,23 +362,10 @@ const Player = () => {
     }));
   };
 
-  const backAction = () => {
-    videoRef.current?.pause();
-    return false;
-  };
-
   useFocusEffect(
     React.useCallback(() => {
-      const onBackPress = () => {
-        return backAction();
-      };
-
-      BackHandler.addEventListener("hardwareBackPress", onBackPress);
-      play();
-
       return async () => {
-        videoRef.current?.pause();
-        BackHandler.removeEventListener("hardwareBackPress", onBackPress);
+        stop();
       };
     }, [])
   );

components/ContinueWatchingPoster.tsx

@@ -1,27 +1,30 @@
 import { apiAtom } from "@/providers/JellyfinProvider";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { Image } from "expo-image";
-import { useAtom, useAtomValue } from "jotai";
-import { useMemo, useState } from "react";
+import { useAtomValue } from "jotai";
+import { useMemo } from "react";
 import { View } from "react-native";
 import { WatchedIndicator } from "./WatchedIndicator";
 import React from "react";
+import { Ionicons } from "@expo/vector-icons";
 
 type ContinueWatchingPosterProps = {
   item: BaseItemDto;
   useEpisodePoster?: boolean;
   size?: "small" | "normal";
+  showPlayButton?: boolean;
 };
 
 const ContinueWatchingPoster: React.FC<ContinueWatchingPosterProps> = ({
   item,
   useEpisodePoster = false,
   size = "normal",
+  showPlayButton = false,
 }) => {
   const api = useAtomValue(apiAtom);
 
   /**
-   * Get horrizontal poster for movie and episode, with failover to primary.
+   * Get horizontal poster for movie and episode, with failover to primary.
    */
   const url = useMemo(() => {
     if (!api) return;
@@ -73,16 +76,23 @@ const ContinueWatchingPoster: React.FC<ContinueWatchingPosterProps> = ({
       ${size === "small" ? "w-32" : "w-44"}
     `}
     >
-      <Image
-        key={item.Id}
-        id={item.Id}
-        source={{
-          uri: url,
-        }}
-        cachePolicy={"memory-disk"}
-        contentFit="cover"
-        className="w-full h-full"
-      />
+      <View className="w-full h-full flex items-center justify-center">
+        <Image
+          key={item.Id}
+          id={item.Id}
+          source={{
+            uri: url,
+          }}
+          cachePolicy={"memory-disk"}
+          contentFit="cover"
+          className="w-full h-full"
+        />
+        {showPlayButton && (
+          <View className="absolute inset-0 flex items-center justify-center">
+            <Ionicons name="play-circle" size={40} color="white" />
+          </View>
+        )}
+      </View>
       {!progress && <WatchedIndicator item={item} />}
       {progress > 0 && (
         <>

components/DownloadItem.tsx

@@ -18,7 +18,7 @@ import {
   BaseItemDto,
   MediaSourceInfo,
 } from "@jellyfin/sdk/lib/generated-client/models";
-import {Href, router, useFocusEffect} from "expo-router";
+import { Href, router, useFocusEffect } from "expo-router";
 import { useAtom } from "jotai";
 import React, { useCallback, useMemo, useRef, useState } from "react";
 import { Alert, TouchableOpacity, View, ViewProps } from "react-native";
@@ -34,8 +34,8 @@ import { SubtitleTrackSelector } from "./SubtitleTrackSelector";
 
 interface DownloadProps extends ViewProps {
   items: BaseItemDto[];
-  MissingDownloadIconComponent: () =>  React.ReactElement;
-  DownloadedIconComponent: () =>  React.ReactElement;
+  MissingDownloadIconComponent: () => React.ReactElement;
+  DownloadedIconComponent: () => React.ReactElement;
 }
 
 export const DownloadItems: React.FC<DownloadProps> = ({
@@ -51,16 +51,25 @@ export const DownloadItems: React.FC<DownloadProps> = ({
   const { processes, startBackgroundDownload, downloadedFiles } = useDownload();
   const { startRemuxing } = useRemuxHlsToMp4();
 
-  const [selectedMediaSource, setSelectedMediaSource] = useState<MediaSourceInfo | undefined | null>(undefined);
+  const [selectedMediaSource, setSelectedMediaSource] = useState<
+    MediaSourceInfo | undefined | null
+  >(undefined);
   const [selectedAudioStream, setSelectedAudioStream] = useState<number>(-1);
-  const [selectedSubtitleStream, setSelectedSubtitleStream] = useState<number>(0);
+  const [selectedSubtitleStream, setSelectedSubtitleStream] =
+    useState<number>(0);
   const [maxBitrate, setMaxBitrate] = useState<Bitrate>({
     key: "Max",
     value: undefined,
   });
 
-  const userCanDownload = useMemo(() => user?.Policy?.EnableContentDownloading, [user]);
-  const usingOptimizedServer = useMemo(() => settings?.downloadMethod === "optimized", [settings]);
+  const userCanDownload = useMemo(
+    () => user?.Policy?.EnableContentDownloading,
+    [user]
+  );
+  const usingOptimizedServer = useMemo(
+    () => settings?.downloadMethod === "optimized",
+    [settings]
+  );
 
   /**
    * Bottom sheet
@@ -78,73 +87,76 @@ export const DownloadItems: React.FC<DownloadProps> = ({
   }, []);
 
   // region computed
-  const itemIds = useMemo(() => items.map(i => i.Id), [items]);
-  const pendingItems = useMemo(() =>
-    items.filter(i => !downloadedFiles?.some(f => f.item.Id === i.Id)),
+  const itemIds = useMemo(() => items.map((i) => i.Id), [items]);
+  const pendingItems = useMemo(
+    () =>
+      items.filter((i) => !downloadedFiles?.some((f) => f.item.Id === i.Id)),
     [items, downloadedFiles]
   );
   const isDownloaded = useMemo(() => {
-    if (!downloadedFiles)
-      return false;
+    if (!downloadedFiles) return false;
     return pendingItems.length == 0;
   }, [downloadedFiles, pendingItems]);
 
-  const itemsProcesses = useMemo(() =>
-    processes?.filter(p => itemIds.includes(p.item.Id)),
+  const itemsProcesses = useMemo(
+    () => processes?.filter((p) => itemIds.includes(p.item.Id)),
     [processes, itemIds]
   );
 
   const progress = useMemo(() => {
-      if (itemIds.length == 1)
-        return itemsProcesses.reduce((acc, p) => acc + p.progress, 0)
-      return ((itemIds.length - queue.filter(q => itemIds.includes(q.item.Id)).length) / itemIds.length) * 100
-    },
-    [queue, itemsProcesses, itemIds]
-  );
+    if (itemIds.length == 1)
+      return itemsProcesses.reduce((acc, p) => acc + p.progress, 0);
+    return (
+      ((itemIds.length -
+        queue.filter((q) => itemIds.includes(q.item.Id)).length) /
+        itemIds.length) *
+      100
+    );
+  }, [queue, itemsProcesses, itemIds]);
 
   const itemsQueued = useMemo(() => {
-      return pendingItems.length > 0 && pendingItems.every(p => queue.some(q => p.Id == q.item.Id))
-    },
-    [queue, pendingItems]
-  );
+    return (
+      pendingItems.length > 0 &&
+      pendingItems.every((p) => queue.some((q) => p.Id == q.item.Id))
+    );
+  }, [queue, pendingItems]);
   // endregion computed
 
   // region helper functions
   const navigateToDownloads = () => router.push("/downloads");
 
   const onDownloadedPress = () => {
-    const firstItem = items?.[0]
+    const firstItem = items?.[0];
     router.push(
       firstItem.Type !== "Episode"
         ? "/downloads"
-        : {
-          pathname: `/downloads/${firstItem.SeriesId}`,
-          params: {
-            episodeSeasonIndex: firstItem.ParentIndexNumber
-          }
-        } as Href
+        : ({
+            pathname: `/downloads/${firstItem.SeriesId}`,
+            params: {
+              episodeSeasonIndex: firstItem.ParentIndexNumber,
+            },
+          } as Href)
     );
-  }
+  };
 
   const acceptDownloadOptions = useCallback(() => {
     if (userCanDownload === true) {
-      if (pendingItems.some(i => !i.Id)) {
+      if (pendingItems.some((i) => !i.Id)) {
         throw new Error("No item id");
       }
       closeModal();
 
-      if (usingOptimizedServer)
-        initiateDownload(...pendingItems);
+      if (usingOptimizedServer) initiateDownload(...pendingItems);
       else {
         queueActions.enqueue(
           queue,
           setQueue,
-          ...pendingItems.map(item => ({
+          ...pendingItems.map((item) => ({
             id: item.Id!,
             execute: async () => await initiateDownload(item),
             item,
           }))
-        )
+        );
       }
     } else {
       toast.error("You are not allowed to download files.");
@@ -160,70 +172,83 @@ export const DownloadItems: React.FC<DownloadProps> = ({
     maxBitrate,
     selectedMediaSource,
     selectedAudioStream,
-    selectedSubtitleStream
-  ])
+    selectedSubtitleStream,
+  ]);
 
   /**
    * Start download
    */
-  const initiateDownload = useCallback(async (...items: BaseItemDto[]) => {
-    if (!api || !user?.Id || items.some(p => !p.Id) || (pendingItems.length === 1 && !selectedMediaSource?.Id)) {
-      throw new Error("DownloadItem ~ initiateDownload: No api or user or item");
-    }
-    let mediaSource = selectedMediaSource
-    let audioIndex: number | undefined = selectedAudioStream
-    let subtitleIndex: number | undefined = selectedSubtitleStream
-
-    for (const item of items) {
-      if (pendingItems.length > 1) {
-        ({ mediaSource, audioIndex, subtitleIndex } = getDefaultPlaySettings(item, settings!));
-      }
-
-      const res = await getStreamUrl({
-        api,
-        item,
-        startTimeTicks: 0,
-        userId: user?.Id,
-        audioStreamIndex: audioIndex,
-        maxStreamingBitrate: maxBitrate.value,
-        mediaSourceId: mediaSource?.Id,
-        subtitleStreamIndex: subtitleIndex,
-        deviceProfile: download,
-      });
-
-      if (!res) {
-        Alert.alert(
-          "Something went wrong",
-          "Could not get stream url from Jellyfin"
+  const initiateDownload = useCallback(
+    async (...items: BaseItemDto[]) => {
+      if (
+        !api ||
+        !user?.Id ||
+        items.some((p) => !p.Id) ||
+        (pendingItems.length === 1 && !selectedMediaSource?.Id)
+      ) {
+        throw new Error(
+          "DownloadItem ~ initiateDownload: No api or user or item"
         );
-        continue;
       }
+      let mediaSource = selectedMediaSource;
+      let audioIndex: number | undefined = selectedAudioStream;
+      let subtitleIndex: number | undefined = selectedSubtitleStream;
 
-      const {mediaSource: source, url} = res;
+      for (const item of items) {
+        if (pendingItems.length > 1) {
+          ({ mediaSource, audioIndex, subtitleIndex } = getDefaultPlaySettings(
+            item,
+            settings!
+          ));
+        }
 
-      if (!url || !source) throw new Error("No url");
+        const res = await getStreamUrl({
+          api,
+          item,
+          startTimeTicks: 0,
+          userId: user?.Id,
+          audioStreamIndex: audioIndex,
+          maxStreamingBitrate: maxBitrate.value,
+          mediaSourceId: mediaSource?.Id,
+          subtitleStreamIndex: subtitleIndex,
+          deviceProfile: download,
+        });
 
-      saveDownloadItemInfoToDiskTmp(item, source, url);
+        if (!res) {
+          Alert.alert(
+            "Something went wrong",
+            "Could not get stream url from Jellyfin"
+          );
+          continue;
+        }
 
-      if (usingOptimizedServer) {
-        await startBackgroundDownload(url, item, source);
-      } else {
-        await startRemuxing(item, url, source);
+        const { mediaSource: source, url } = res;
+
+        if (!url || !source) throw new Error("No url");
+
+        saveDownloadItemInfoToDiskTmp(item, source, url);
+
+        if (usingOptimizedServer) {
+          await startBackgroundDownload(url, item, source);
+        } else {
+          await startRemuxing(item, url);
+        }
       }
-    }
-  }, [
-    api,
-    user?.Id,
-    pendingItems,
-    selectedMediaSource,
-    selectedAudioStream,
-    selectedSubtitleStream,
-    settings,
-    maxBitrate,
-    usingOptimizedServer,
-    startBackgroundDownload,
-    startRemuxing,
-  ]);
+    },
+    [
+      api,
+      user?.Id,
+      pendingItems,
+      selectedMediaSource,
+      selectedAudioStream,
+      selectedSubtitleStream,
+      settings,
+      maxBitrate,
+      usingOptimizedServer,
+      startBackgroundDownload,
+      startRemuxing,
+    ]
+  );
 
   const renderBackdrop = useCallback(
     (props: BottomSheetBackdropProps) => (
@@ -255,7 +280,7 @@ export const DownloadItems: React.FC<DownloadProps> = ({
 
   return (
     <View
-      className="bg-neutral-800/80 rounded-full h-10 w-10 flex items-center justify-center"
+      className="bg-neutral-800/80 rounded-full h-9 w-9 flex items-center justify-center"
       {...props}
     >
       {processes && itemsProcesses.length > 0 ? (
@@ -343,7 +368,9 @@ export const DownloadItems: React.FC<DownloadProps> = ({
             </Button>
             <View className="opacity-70 text-center w-full flex items-center">
               <Text className="text-xs">
-                {usingOptimizedServer ? "Using optimized server" : "Using default method"}
+                {usingOptimizedServer
+                  ? "Using optimized server"
+                  : "Using default method"}
               </Text>
             </View>
           </View>
@@ -353,7 +380,9 @@ export const DownloadItems: React.FC<DownloadProps> = ({
   );
 };
 
-export const DownloadSingleItem: React.FC<{ item: BaseItemDto }> = ({ item }) => {
+export const DownloadSingleItem: React.FC<{ item: BaseItemDto }> = ({
+  item,
+}) => {
   return (
     <DownloadItems
       items={[item]}
@@ -364,5 +393,5 @@ export const DownloadSingleItem: React.FC<{ item: BaseItemDto }> = ({ item }) =>
         <Ionicons name="cloud-download" size={26} color="#9333ea" />
       )}
     />
-  )
-}
+  );
+};

components/ItemContent.tsx

@@ -1,6 +1,6 @@
 import { AudioTrackSelector } from "@/components/AudioTrackSelector";
 import { Bitrate, BitrateSelector } from "@/components/BitrateSelector";
-import {DownloadSingleItem} from "@/components/DownloadItem";
+import { DownloadSingleItem } from "@/components/DownloadItem";
 import { OverviewText } from "@/components/OverviewText";
 import { ParallaxScrollView } from "@/components/ParallaxPage";
 import { PlayButton } from "@/components/PlayButton";
@@ -32,6 +32,16 @@ import { Chromecast } from "./Chromecast";
 import { ItemHeader } from "./ItemHeader";
 import { MediaSourceSelector } from "./MediaSourceSelector";
 import { MoreMoviesWithActor } from "./MoreMoviesWithActor";
+import {
+  brightness,
+  ColorMatrix,
+  colorTone,
+  concatColorMatrices,
+  contrast,
+  saturate,
+  sepia,
+  tint,
+} from "react-native-color-matrix-image-filters";
 
 export type SelectedOptions = {
   bitrate: Bitrate;
@@ -49,7 +59,7 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
     const insets = useSafeAreaInsets();
     useImageColors({ item });
 
-    const [loadingLogo, setLoadingLogo] = useState(true);
+    const [loadingLogo, setLoadingLogo] = useState(false);
     const [headerHeight, setHeaderHeight] = useState(350);
 
     const [selectedOptions, setSelectedOptions] = useState<
@@ -139,18 +149,45 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
           logo={
             <>
               {logoUrl ? (
-                <Image
-                  source={{
-                    uri: logoUrl,
-                  }}
+                <ColorMatrix
+                  matrix={[
+                    1,
+                    0,
+                    0,
+                    0,
+                    0, // Red channel remains unchanged
+                    0,
+                    1,
+                    0,
+                    0,
+                    0, // Green channel remains unchanged
+                    0,
+                    0,
+                    1,
+                    0,
+                    0, // Blue channel remains unchanged
+                    1,
+                    1,
+                    1,
+                    1,
+                    -1, // Make black (R=0, G=0, B=0) transparent
+                  ]}
                   style={{
                     height: 130,
                     width: "100%",
-                    resizeMode: "contain",
                   }}
-                  onLoad={() => setLoadingLogo(false)}
-                  onError={() => setLoadingLogo(false)}
-                />
+                >
+                  <Image
+                    source={{
+                      uri: logoUrl,
+                    }}
+                    style={{
+                      height: 130,
+                      width: "100%",
+                      resizeMode: "contain",
+                    }}
+                  />
+                </ColorMatrix>
               ) : null}
             </>
           }
@@ -228,6 +265,10 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
             <OverviewText text={item.Overview} className="px-4 my-4" />
             {item.Type !== "Program" && (
               <>
+                {item.Type === "Episode" && (
+                  <CurrentSeries item={item} className="mb-4" />
+                )}
+
                 <CastAndCrew item={item} className="mb-4" loading={loading} />
 
                 {item.People && item.People.length > 0 && (
@@ -243,10 +284,6 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
                   </View>
                 )}
 
-                {item.Type === "Episode" && (
-                  <CurrentSeries item={item} className="mb-4" />
-                )}
-
                 <SimilarItems itemId={item.Id} />
               </>
             )}

components/downloads/DownloadSize.tsx

@@ -1,62 +1,47 @@
+import { Text } from "@/components/common/Text";
+import { bytesToReadable, useDownload } from "@/providers/DownloadProvider";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import React, {useEffect, useMemo, useState} from "react";
-import {Text} from "@/components/common/Text";
-import useDownloadHelper from "@/utils/download";
-import {bytesToReadable, useDownload} from "@/providers/DownloadProvider";
-import {TextProps} from "react-native";
+import React, { useEffect, useMemo, useState } from "react";
+import { TextProps } from "react-native";
 
 interface DownloadSizeProps extends TextProps {
   items: BaseItemDto[];
 }
 
-interface DownloadSizes {
-  knownSize: number;
-  itemsNeedingSize: BaseItemDto[];
-}
-
-export const DownloadSize: React.FC<DownloadSizeProps> = ({ items, ...props }) => {
-  const { downloadedFiles, saveDownloadedItemInfo } = useDownload();
-  const { getDownloadSize } = useDownloadHelper();
+export const DownloadSize: React.FC<DownloadSizeProps> = ({
+  items,
+  ...props
+}) => {
+  const { downloadedFiles, getDownloadedItemSize } = useDownload();
   const [size, setSize] = useState<string | undefined>();
 
-  const itemIds = useMemo(() => items.map(i => i.Id), [items])
+  const itemIds = useMemo(() => items.map((i) => i.Id), [items]);
 
   useEffect(() => {
-    if (!downloadedFiles)
-      return
+    if (!downloadedFiles) return;
 
-    const {knownSize, itemsNeedingSize} = downloadedFiles
-      .filter(f => itemIds.includes(f.item.Id))
-      ?.reduce<DownloadSizes>((acc, file) => {
-        if (file?.size && file.size > 0)
-          acc.knownSize += file.size
-        else
-          acc.itemsNeedingSize.push(file.item)
-        return acc
-    }, {
-        knownSize: 0,
-        itemsNeedingSize: []
-    })
+    let s = 0;
 
-      getDownloadSize(
-        (item, size) => saveDownloadedItemInfo(item, size),
-        ...itemsNeedingSize
-      ).then(sizeSum => {
-        setSize(bytesToReadable((sizeSum + knownSize)))
-      })
-    },
-    [items, itemIds]
-  );
+    for (const item of items) {
+      if (!item.Id) continue;
+      const size = getDownloadedItemSize(item.Id);
+      if (size) {
+        s += size;
+      }
+    }
+    setSize(bytesToReadable(s));
+  }, [itemIds]);
 
   const sizeText = useMemo(() => {
-    if (!size)
-      return "reading size..."
-    return size
-  }, [size])
+    if (!size) return "...";
+    return size;
+  }, [size]);
 
   return (
     <>
-      <Text className="text-xs text-neutral-500" {...props}>{sizeText}</Text>
+      <Text className="text-xs text-neutral-500" {...props}>
+        {sizeText}
+      </Text>
     </>
   );
-};
+};

components/downloads/EpisodeCard.tsx

@@ -1,31 +1,28 @@
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import * as Haptics from "expo-haptics";
-import React, {useCallback, useMemo} from "react";
-import { TouchableOpacity, View } from "react-native";
+import React, { useCallback, useMemo } from "react";
+import { TouchableOpacity, TouchableOpacityProps, View } from "react-native";
 import {
   ActionSheetProvider,
   useActionSheet,
 } from "@expo/react-native-action-sheet";
 
 import { useDownloadedFileOpener } from "@/hooks/useDownloadedFileOpener";
-import {useDownload} from "@/providers/DownloadProvider";
+import { useDownload } from "@/providers/DownloadProvider";
 import { storage } from "@/utils/mmkv";
 import { Image } from "expo-image";
 import { Ionicons } from "@expo/vector-icons";
-import {Text} from "@/components/common/Text";
-import {runtimeTicksToSeconds} from "@/utils/time";
-import {DownloadSize} from "@/components/downloads/DownloadSize";
+import { Text } from "@/components/common/Text";
+import { runtimeTicksToSeconds } from "@/utils/time";
+import { DownloadSize } from "@/components/downloads/DownloadSize";
+import { TouchableItemRouter } from "../common/TouchableItemRouter";
+import ContinueWatchingPoster from "../ContinueWatchingPoster";
 
-interface EpisodeCardProps {
+interface EpisodeCardProps extends TouchableOpacityProps {
   item: BaseItemDto;
 }
 
-/**
- * EpisodeCard component displays an episode with action sheet options.
- * @param {EpisodeCardProps} props - The component props.
- * @returns {React.ReactElement} The rendered EpisodeCard component.
- */
-export const EpisodeCard: React.FC<EpisodeCardProps> = ({ item }) => {
+export const EpisodeCard: React.FC<EpisodeCardProps> = ({ item, ...props }) => {
   const { deleteFile } = useDownload();
   const { openFile } = useDownloadedFileOpener();
   const { showActionSheetWithOptions } = useActionSheet();
@@ -77,35 +74,14 @@ export const EpisodeCard: React.FC<EpisodeCardProps> = ({ item }) => {
     <TouchableOpacity
       onPress={handleOpenFile}
       onLongPress={showActionSheet}
-      className="flex flex-col mr-2"
+      key={item.Id}
+      className="flex flex-col mb-4"
     >
       <View className="flex flex-row items-start mb-2">
         <View className="mr-2">
-          {base64Image ? (
-            <View className="w-44 aspect-video rounded-lg overflow-hidden">
-                <Image
-                    source={{
-                      uri: `data:image/jpeg;base64,${base64Image}`,
-                    }}
-                    style={{
-                      width: "100%",
-                      height: "100%",
-                      resizeMode: "cover",
-                    }}
-                />
-              </View>
-          ) : (
-            <View className="w-44 aspect-video rounded-lg bg-neutral-900 flex items-center justify-center">
-                <Ionicons
-                    name="image-outline"
-                    size={24}
-                    color="gray"
-                    className="self-center mt-16"
-                />
-              </View>
-          )}
+          <ContinueWatchingPoster size="small" item={item} useEpisodePoster />
         </View>
-        <View className="w-56 flex flex-col">
+        <View className="shrink">
           <Text numberOfLines={2} className="">
             {item.Name}
           </Text>
@@ -115,10 +91,12 @@ export const EpisodeCard: React.FC<EpisodeCardProps> = ({ item }) => {
           <Text className="text-xs text-neutral-500">
             {runtimeTicksToSeconds(item.RunTimeTicks)}
           </Text>
-          <DownloadSize items={[item]} />
         </View>
       </View>
-      <Text numberOfLines={3} className="text-xs text-neutral-500 shrink">{item.Overview}</Text>
+
+      <Text numberOfLines={3} className="text-xs text-neutral-500 shrink">
+        {item.Overview}
+      </Text>
     </TouchableOpacity>
   );
 };

components/series/SeasonDropdown.tsx

@@ -1,22 +1,22 @@
-import {BaseItemDto} from "@jellyfin/sdk/lib/generated-client/models";
-import {useEffect, useMemo} from "react";
-import {TouchableOpacity, View} from "react-native";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { useEffect, useMemo } from "react";
+import { TouchableOpacity, View } from "react-native";
 import * as DropdownMenu from "zeego/dropdown-menu";
-import {Text} from "../common/Text";
+import { Text } from "../common/Text";
 
 type Props = {
   item: BaseItemDto;
   seasons: BaseItemDto[];
   initialSeasonIndex?: number;
   state: SeasonIndexState;
-  onSelect: (season: BaseItemDto) => void
+  onSelect: (season: BaseItemDto) => void;
 };
 
 type SeasonKeys = {
-  id: keyof BaseItemDto,
-  title: keyof BaseItemDto,
-  index: keyof BaseItemDto
-}
+  id: keyof BaseItemDto;
+  title: keyof BaseItemDto;
+  index: keyof BaseItemDto;
+};
 
 export type SeasonIndexState = {
   [seriesId: string]: number | null | undefined;
@@ -27,21 +27,28 @@ export const SeasonDropdown: React.FC<Props> = ({
   seasons,
   initialSeasonIndex,
   state,
-  onSelect
+  onSelect,
 }) => {
-  const keys = useMemo<SeasonKeys>(() =>
-    item.Type === "Episode" ? {
-        id: "ParentId",
-        title: "SeasonName",
-        index: "ParentIndexNumber"
-      }
-      : {
-        id: "Id",
-        title: "Name",
-        index: "IndexNumber"
-      }, [item]
+  const keys = useMemo<SeasonKeys>(
+    () =>
+      item.Type === "Episode"
+        ? {
+            id: "ParentId",
+            title: "SeasonName",
+            index: "ParentIndexNumber",
+          }
+        : {
+            id: "Id",
+            title: "Name",
+            index: "IndexNumber",
+          },
+    [item]
+  );
+
+  const seasonIndex = useMemo(
+    () => state[(item[keys.id] as string) ?? ""],
+    [state]
   );
-  const seasonIndex = useMemo(() => state[item[keys.id] ?? ""], [state]);
 
   useEffect(() => {
     if (seasons && seasons.length > 0 && seasonIndex === undefined) {
@@ -62,28 +69,28 @@ export const SeasonDropdown: React.FC<Props> = ({
         const season1 = seasons.find((season: any) => season[keys.index] === 1);
         const season0 = seasons.find((season: any) => season[keys.index] === 0);
         const firstSeason = season1 || season0 || seasons[0];
-        onSelect(firstSeason)
+        onSelect(firstSeason);
       }
 
       if (initialIndex !== undefined) {
-        const initialSeason = seasons.find((season: any) =>
-          season[keys.index] === initialIndex
-        )
+        const initialSeason = seasons.find(
+          (season: any) => season[keys.index] === initialIndex
+        );
 
-        if (initialSeason) onSelect(initialSeason!)
-        else throw Error("Initial index could not be found!")
+        if (initialSeason) onSelect(initialSeason!);
+        else throw Error("Initial index could not be found!");
       }
     }
   }, [seasons, seasonIndex, item[keys.id], initialSeasonIndex]);
 
-  const sortByIndex = (a: BaseItemDto, b: BaseItemDto) => a[keys.index] - b[keys.index];
+  const sortByIndex = (a: BaseItemDto, b: BaseItemDto) =>
+    Number(a[keys.index]) - Number(b[keys.index]);
 
   return (
     <DropdownMenu.Root>
       <DropdownMenu.Trigger>
-        <View className="flex flex-row px-4">
-          <TouchableOpacity
-            className="bg-neutral-900 rounded-2xl border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between">
+        <View className="flex flex-row">
+          <TouchableOpacity className="bg-neutral-900 rounded-2xl border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between">
             <Text>Season {seasonIndex}</Text>
           </TouchableOpacity>
         </View>
@@ -103,7 +110,9 @@ export const SeasonDropdown: React.FC<Props> = ({
             key={season[keys.title]}
             onSelect={() => onSelect(season)}
           >
-            <DropdownMenu.ItemTitle>{season[keys.title]}</DropdownMenu.ItemTitle>
+            <DropdownMenu.ItemTitle>
+              {season[keys.title]}
+            </DropdownMenu.ItemTitle>
           </DropdownMenu.Item>
         ))}
       </DropdownMenu.Content>

components/series/SeasonPicker.tsx

@@ -6,14 +6,17 @@ import { atom, useAtom } from "jotai";
 import { useEffect, useMemo, useState } from "react";
 import { View } from "react-native";
 import ContinueWatchingPoster from "../ContinueWatchingPoster";
-import {DownloadItems, DownloadSingleItem} from "../DownloadItem";
+import { DownloadItems, DownloadSingleItem } from "../DownloadItem";
 import { Loader } from "../Loader";
 import { Text } from "../common/Text";
 import { getTvShowsApi } from "@jellyfin/sdk/lib/utils/api";
 import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
 import { TouchableItemRouter } from "../common/TouchableItemRouter";
-import {SeasonDropdown, SeasonIndexState} from "@/components/series/SeasonDropdown";
-import {Ionicons, MaterialCommunityIcons} from "@expo/vector-icons";
+import {
+  SeasonDropdown,
+  SeasonIndexState,
+} from "@/components/series/SeasonDropdown";
+import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
 
 type Props = {
   item: BaseItemDto;
@@ -109,7 +112,7 @@ export const SeasonPicker: React.FC<Props> = ({ item, initialSeasonIndex }) => {
         minHeight: 144 * nrOfEpisodes,
       }}
     >
-      <View className="flex flex-row justify-start items-center">
+      <View className="flex flex-row justify-start items-center px-4">
         <SeasonDropdown
           item={item}
           seasons={seasons}
@@ -119,14 +122,24 @@ export const SeasonPicker: React.FC<Props> = ({ item, initialSeasonIndex }) => {
               ...prev,
               [item.Id ?? ""]: season.IndexNumber,
             }));
-          }} />
+          }}
+        />
         <DownloadItems
+          className="ml-2"
           items={episodes || []}
           MissingDownloadIconComponent={() => (
-            <MaterialCommunityIcons name="download-multiple" size={24} color="white"/>
+            <MaterialCommunityIcons
+              name="download-multiple"
+              size={20}
+              color="white"
+            />
           )}
           DownloadedIconComponent={() => (
-            <MaterialCommunityIcons name="check-all" size={24} color="#9333ea"/>
+            <MaterialCommunityIcons
+              name="check-all"
+              size={20}
+              color="#9333ea"
+            />
           )}
         />
       </View>

components/video-player/controls/Controls.tsx

@@ -53,6 +53,11 @@ 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";
 
 interface Props {
   item: BaseItemDto;
@@ -113,6 +118,7 @@ export const Controls: React.FC<Props> = ({
   const [settings] = useSettings();
   const router = useRouter();
   const insets = useSafeAreaInsets();
+  const [api] = useAtom(apiAtom);
 
   const { previousItem, nextItem } = useAdjacentItems({ item });
   const {
@@ -286,7 +292,7 @@ export const Controls: React.FC<Props> = ({
       const minutes = Math.floor((progressInSeconds % 3600) / 60);
       const seconds = progressInSeconds % 60;
       setTime({ hours, minutes, seconds });
-    }, 20), // 100ms debounce delay
+    }, 10),
     []
   );
 
@@ -397,292 +403,343 @@ export const Controls: React.FC<Props> = ({
     );
   }, [trickPlayUrl, trickplayInfo, time]);
 
+  const [EpisodeView, setEpisodeView] = useState(false);
+
+  const switchOnEpisodeMode = () => {
+    setEpisodeView(true);
+    if (isPlaying) togglePlay(progress.value);
+  };
+
+  const gotoEpisode = async (itemId: string) => {
+    const item = await getItemById(api, itemId);
+    console.log("Item", item);
+    if (!settings || !item) return;
+
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+
+    const { bitrate, mediaSource, audioIndex, subtitleIndex } =
+      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: bitrate.toString(),
+    }).toString();
+
+    if (!bitrate.value) {
+      // @ts-expect-error
+      router.replace(`player/direct-player?${queryParams}`);
+      return;
+    }
+    // @ts-expect-error
+    router.replace(`player/transcoding-player?${queryParams}`);
+  };
+
   return (
     <ControlProvider
       item={item}
       mediaSource={mediaSource}
       isVideoLoaded={isVideoLoaded}
     >
-      <VideoProvider
-        getAudioTracks={getAudioTracks}
-        getSubtitleTracks={getSubtitleTracks}
-        setAudioTrack={setAudioTrack}
-        setSubtitleTrack={setSubtitleTrack}
-        setSubtitleURL={setSubtitleURL}
-      >
-        {!mediaSource?.TranscodingUrl ? (
-          <DropdownViewDirect showControls={showControls} />
-        ) : (
-          <DropdownViewTranscoding showControls={showControls} />
-        )}
-      </VideoProvider>
-
-      <Pressable
-        onPressIn={() => {
-          toggleControls();
-        }}
-        style={{
-          position: "absolute",
-          width: Dimensions.get("window").width,
-          height: Dimensions.get("window").height,
-        }}
-      ></Pressable>
-
-      <View
-        style={[
-          {
-            position: "absolute",
-            top: 0,
-            right: 0,
-            opacity: showControls ? 1 : 0,
-          },
-        ]}
-        pointerEvents={showControls ? "auto" : "none"}
-        className={`flex flex-row items-center space-x-2 z-10 p-4 `}
-      >
-        {previousItem && (
-          <TouchableOpacity
-            onPress={goToPreviousItem}
-            className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"
+      {EpisodeView ? (
+        <EpisodeList item={item} close={() => setEpisodeView(false)} />
+      ) : (
+        <>
+          <VideoProvider
+            getAudioTracks={getAudioTracks}
+            getSubtitleTracks={getSubtitleTracks}
+            setAudioTrack={setAudioTrack}
+            setSubtitleTrack={setSubtitleTrack}
+            setSubtitleURL={setSubtitleURL}
           >
-            <Ionicons name="play-skip-back" size={24} color="white" />
-          </TouchableOpacity>
-        )}
+            {!mediaSource?.TranscodingUrl ? (
+              <DropdownViewDirect showControls={showControls} />
+            ) : (
+              <DropdownViewTranscoding showControls={showControls} />
+            )}
+          </VideoProvider>
 
-        {nextItem && (
-          <TouchableOpacity
-            onPress={goToNextItem}
-            className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"
-          >
-            <Ionicons name="play-skip-forward" size={24} color="white" />
-          </TouchableOpacity>
-        )}
-
-        {mediaSource?.TranscodingUrl && (
-          <TouchableOpacity
-            onPress={toggleIgnoreSafeAreas}
-            className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"
-          >
-            <Ionicons
-              name={ignoreSafeAreas ? "contract-outline" : "expand"}
-              size={24}
-              color="white"
-            />
-          </TouchableOpacity>
-        )}
-        <TouchableOpacity
-          onPress={async () => {
-            if (stop) await stop();
-            router.back();
-          }}
-          className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"
-        >
-          <Ionicons name="close" size={24} color="white" />
-        </TouchableOpacity>
-      </View>
-
-      <View
-        style={{
-          position: "absolute",
-          top: "50%", // Center vertically
-          left: 0,
-          right: 0,
-          flexDirection: "row",
-          justifyContent: "space-between",
-          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"}
-      >
-        <View
-          style={{
-            position: "absolute",
-            alignItems: "center",
-            transform: [{ rotate: "270deg" }], // Rotate the slider to make it vertical
-            bottom: 30,
-          }}
-        >
-          <BrightnessSlider />
-        </View>
-        <TouchableOpacity onPress={handleSkipBackward}>
-          <View
-            style={{
-              position: "relative",
-              justifyContent: "center",
-              alignItems: "center",
+          <Pressable
+            onPressIn={() => {
+              toggleControls();
             }}
-          >
-            <Ionicons
-              name="refresh-outline"
-              size={50}
-              color="white"
-              style={{
-                transform: [{ scaleY: -1 }, { rotate: "180deg" }],
-              }}
-            />
-            <Text
-              style={{
+            style={{
+              position: "absolute",
+              width: Dimensions.get("window").width,
+              height: Dimensions.get("window").height,
+            }}
+          ></Pressable>
+
+          <View
+            style={[
+              {
                 position: "absolute",
-                color: "white",
-                fontSize: 16,
-                fontWeight: "bold",
-                bottom: 10,
-              }}
-            >
-              {settings?.rewindSkipTime}
-            </Text>
-          </View>
-        </TouchableOpacity>
-
-        <TouchableOpacity
-          onPress={() => {
-            togglePlay();
-          }}
-        >
-          {!isBuffering ? (
-            <Ionicons
-              name={isPlaying ? "pause" : "play"}
-              size={50}
-              color="white"
-            />
-          ) : (
-            <Loader size={"large"} />
-          )}
-        </TouchableOpacity>
-
-        <TouchableOpacity onPress={handleSkipForward}>
-          <View
-            style={{
-              position: "relative",
-              justifyContent: "center",
-              alignItems: "center",
-            }}
+                top: 0,
+                right: 0,
+                opacity: showControls ? 1 : 0,
+              },
+            ]}
+            pointerEvents={showControls ? "auto" : "none"}
+            className={`flex flex-row items-center space-x-2 z-10 p-4 `}
           >
-            <Ionicons name="refresh-outline" size={50} color="white" />
-            <Text
-              style={{
-                position: "absolute",
-                color: "white",
-                fontSize: 16,
-                fontWeight: "bold",
-                bottom: 10,
-              }}
-            >
-              {settings?.forwardSkipTime}
-            </Text>
-          </View>
-        </TouchableOpacity>
-      </View>
-
-      <View
-        style={[
-          {
-            position: "absolute",
-            right: 0,
-            left: 0,
-            bottom: 0,
-            opacity: showControls ? 1 : 0,
-          },
-        ]}
-        pointerEvents={showControls ? "box-none" : "none"}
-        className={`flex flex-col p-4`}
-      >
-        <View
-          className="shrink flex flex-col justify-center h-full mb-2"
-          style={{
-            flexDirection: "row",
-            justifyContent: "space-between",
-          }}
-        >
-          <View
-            style={{
-              flexDirection: "column",
-              alignSelf: "flex-end", // Shrink height based on content
-            }}
-          >
-            <Text className="font-bold">{item?.Name}</Text>
             {item?.Type === "Episode" && (
-              <Text className="opacity-50">{item.SeriesName}</Text>
+              <TouchableOpacity
+                onPress={() => {
+                  switchOnEpisodeMode();
+                }}
+                className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"
+              >
+                <Ionicons name="list" size={24} color="white" />
+              </TouchableOpacity>
             )}
-            {item?.Type === "Movie" && (
-              <Text className="text-xs opacity-50">{item?.ProductionYear}</Text>
+            {previousItem && (
+              <TouchableOpacity
+                onPress={goToPreviousItem}
+                className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"
+              >
+                <Ionicons name="play-skip-back" size={24} color="white" />
+              </TouchableOpacity>
             )}
-            {item?.Type === "Audio" && (
-              <Text className="text-xs opacity-50">{item?.Album}</Text>
+
+            {nextItem && (
+              <TouchableOpacity
+                onPress={goToNextItem}
+                className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"
+              >
+                <Ionicons name="play-skip-forward" size={24} color="white" />
+              </TouchableOpacity>
             )}
+
+            {mediaSource?.TranscodingUrl && (
+              <TouchableOpacity
+                onPress={toggleIgnoreSafeAreas}
+                className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"
+              >
+                <Ionicons
+                  name={ignoreSafeAreas ? "contract-outline" : "expand"}
+                  size={24}
+                  color="white"
+                />
+              </TouchableOpacity>
+            )}
+            <TouchableOpacity
+              onPress={async () => {
+                router.back();
+              }}
+              className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"
+            >
+              <Ionicons name="close" size={24} color="white" />
+            </TouchableOpacity>
           </View>
+
           <View
             style={{
-              flexDirection: "column",
-              alignSelf: "flex-end",
-              marginRight: insets.right,
+              position: "absolute",
+              top: "50%", // Center vertically
+              left: 0,
+              right: 0,
+              flexDirection: "row",
+              justifyContent: "space-between",
+              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"}
           >
-            <SkipButton
-              showButton={showSkipButton}
-              onPress={skipIntro}
-              buttonText="Skip Intro"
-            />
-            <SkipButton
-              showButton={showSkipCreditButton}
-              onPress={skipCredit}
-              buttonText="Skip Credits"
-            />
-          </View>
-        </View>
-        <View
-          className={`flex flex-col-reverse py-4 pb-1 px-4 rounded-lg items-center  bg-neutral-800`}
-        >
-          <View className={`flex flex-col w-full shrink`}>
-            <Slider
-              theme={{
-                maximumTrackTintColor: "rgba(255,255,255,0.2)",
-                minimumTrackTintColor: "#fff",
-                cacheTrackTintColor: "rgba(255,255,255,0.3)",
-                bubbleBackgroundColor: "#fff",
-                bubbleTextColor: "#666",
-                heartbeatColor: "#999",
+            <View
+              style={{
+                position: "absolute",
+                alignItems: "center",
+                transform: [{ rotate: "270deg" }], // Rotate the slider to make it vertical
+                bottom: 30,
               }}
-              renderThumb={() => (
-                <View
+            >
+              <BrightnessSlider />
+            </View>
+            <TouchableOpacity onPress={handleSkipBackward}>
+              <View
+                style={{
+                  position: "relative",
+                  justifyContent: "center",
+                  alignItems: "center",
+                }}
+              >
+                <Ionicons
+                  name="refresh-outline"
+                  size={50}
+                  color="white"
                   style={{
-                    width: 18,
-                    height: 18,
-                    left: -2,
-                    borderRadius: 10,
-                    backgroundColor: "#fff",
-                    justifyContent: "center",
-                    alignItems: "center",
+                    transform: [{ scaleY: -1 }, { rotate: "180deg" }],
                   }}
                 />
-              )}
-              cache={cacheProgress}
-              onSlidingStart={handleSliderStart}
-              onSlidingComplete={handleSliderComplete}
-              onValueChange={handleSliderChange}
-              containerStyle={{
-                borderRadius: 100,
+                <Text
+                  style={{
+                    position: "absolute",
+                    color: "white",
+                    fontSize: 16,
+                    fontWeight: "bold",
+                    bottom: 10,
+                  }}
+                >
+                  {settings?.rewindSkipTime}
+                </Text>
+              </View>
+            </TouchableOpacity>
+
+            <TouchableOpacity
+              onPress={() => {
+                togglePlay();
               }}
-              renderBubble={() => isSliding && memoizedRenderBubble()}
-              sliderHeight={10}
-              thumbWidth={0}
-              progress={progress}
-              minimumValue={min}
-              maximumValue={max}
-            />
-            <View className="flex flex-row items-center justify-between mt-0.5">
-              <Text className="text-[12px] text-neutral-400">
-                {formatTimeString(currentTime, isVlc ? "ms" : "s")}
-              </Text>
-              <Text className="text-[12px] text-neutral-400">
-                -{formatTimeString(remainingTime, isVlc ? "ms" : "s")}
-              </Text>
+            >
+              {!isBuffering ? (
+                <Ionicons
+                  name={isPlaying ? "pause" : "play"}
+                  size={50}
+                  color="white"
+                />
+              ) : (
+                <Loader size={"large"} />
+              )}
+            </TouchableOpacity>
+
+            <TouchableOpacity onPress={handleSkipForward}>
+              <View
+                style={{
+                  position: "relative",
+                  justifyContent: "center",
+                  alignItems: "center",
+                }}
+              >
+                <Ionicons name="refresh-outline" size={50} color="white" />
+                <Text
+                  style={{
+                    position: "absolute",
+                    color: "white",
+                    fontSize: 16,
+                    fontWeight: "bold",
+                    bottom: 10,
+                  }}
+                >
+                  {settings?.forwardSkipTime}
+                </Text>
+              </View>
+            </TouchableOpacity>
+          </View>
+
+          <View
+            style={[
+              {
+                position: "absolute",
+                right: 0,
+                left: 0,
+                bottom: 0,
+                opacity: showControls ? 1 : 0,
+              },
+            ]}
+            pointerEvents={showControls ? "box-none" : "none"}
+            className={`flex flex-col p-4`}
+          >
+            <View
+              className="shrink flex flex-col justify-center h-full mb-2"
+              style={{
+                flexDirection: "row",
+                justifyContent: "space-between",
+              }}
+            >
+              <View
+                style={{
+                  flexDirection: "column",
+                  alignSelf: "flex-end", // Shrink height based on content
+                }}
+              >
+                <Text className="font-bold">{item?.Name}</Text>
+                {item?.Type === "Episode" && (
+                  <Text className="opacity-50">{item.SeriesName}</Text>
+                )}
+                {item?.Type === "Movie" && (
+                  <Text className="text-xs opacity-50">
+                    {item?.ProductionYear}
+                  </Text>
+                )}
+                {item?.Type === "Audio" && (
+                  <Text className="text-xs opacity-50">{item?.Album}</Text>
+                )}
+              </View>
+              <View
+                style={{
+                  flexDirection: "column",
+                  alignSelf: "flex-end",
+                  marginRight: insets.right,
+                }}
+              >
+                <SkipButton
+                  showButton={showSkipButton}
+                  onPress={skipIntro}
+                  buttonText="Skip Intro"
+                />
+                <SkipButton
+                  showButton={showSkipCreditButton}
+                  onPress={skipCredit}
+                  buttonText="Skip Credits"
+                />
+              </View>
+            </View>
+            <View
+              className={`flex flex-col-reverse py-4 pb-1 px-4 rounded-lg items-center  bg-neutral-800`}
+            >
+              <View className={`flex flex-col w-full shrink`}>
+                <Slider
+                  theme={{
+                    maximumTrackTintColor: "rgba(255,255,255,0.2)",
+                    minimumTrackTintColor: "#fff",
+                    cacheTrackTintColor: "rgba(255,255,255,0.3)",
+                    bubbleBackgroundColor: "#fff",
+                    bubbleTextColor: "#666",
+                    heartbeatColor: "#999",
+                  }}
+                  renderThumb={() => (
+                    <View
+                      style={{
+                        width: 18,
+                        height: 18,
+                        left: -2,
+                        borderRadius: 10,
+                        backgroundColor: "#fff",
+                        justifyContent: "center",
+                        alignItems: "center",
+                      }}
+                    />
+                  )}
+                  cache={cacheProgress}
+                  onSlidingStart={handleSliderStart}
+                  onSlidingComplete={handleSliderComplete}
+                  onValueChange={handleSliderChange}
+                  containerStyle={{
+                    borderRadius: 100,
+                  }}
+                  renderBubble={() => isSliding && memoizedRenderBubble()}
+                  sliderHeight={10}
+                  thumbWidth={0}
+                  progress={progress}
+                  minimumValue={min}
+                  maximumValue={max}
+                />
+                <View className="flex flex-row items-center justify-between mt-0.5">
+                  <Text className="text-[12px] text-neutral-400">
+                    {formatTimeString(currentTime, isVlc ? "ms" : "s")}
+                  </Text>
+                  <Text className="text-[12px] text-neutral-400">
+                    -{formatTimeString(remainingTime, isVlc ? "ms" : "s")}
+                  </Text>
+                </View>
+              </View>
             </View>
           </View>
-        </View>
-      </View>
+        </>
+      )}
     </ControlProvider>
   );
 };

components/video-player/controls/EpisodeList.tsx

@@ -0,0 +1,289 @@
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { runtimeTicksToSeconds } from "@/utils/time";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { atom, useAtom } from "jotai";
+import { useEffect, useMemo, useState, useRef } from "react";
+import { View, TouchableOpacity } from "react-native";
+import { getTvShowsApi } from "@jellyfin/sdk/lib/utils/api";
+import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
+import { Ionicons } from "@expo/vector-icons";
+import { Loader } from "@/components/Loader";
+import ContinueWatchingPoster from "@/components/ContinueWatchingPoster";
+import { Text } from "@/components/common/Text";
+import { DownloadSingleItem } from "@/components/DownloadItem";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+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;
+};
+
+export const seasonIndexAtom = atom<SeasonIndexState>({});
+
+export const EpisodeList: React.FC<Props> = ({ item, close }) => {
+  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) => {
+    scrollViewRef.current?.scrollToIndex(index, 100);
+  };
+
+  // Set the initial season index
+  useEffect(() => {
+    if (item.SeriesId) {
+      setSeasonIndexState((prev) => ({
+        ...prev,
+        [item.SeriesId ?? ""]: item.ParentIndexNumber ?? 0,
+      }));
+    }
+  }, []);
+
+  const seasonIndex = seasonIndexState[item.SeriesId ?? ""];
+  const [seriesItem, setSeriesItem] = useState<BaseItemDto | null>(null);
+
+  // This effect fetches the series item data/
+  useEffect(() => {
+    if (item.SeriesId) {
+      getUserItemData({ api, userId: user?.Id, itemId: item.SeriesId }).then(
+        (res) => {
+          setSeriesItem(res);
+        }
+      );
+    }
+  }, [item.SeriesId]);
+
+  const { data: seasons } = useQuery({
+    queryKey: ["seasons", item.SeriesId],
+    queryFn: async () => {
+      if (!api || !user?.Id || !item.SeriesId) return [];
+      const response = await api.axiosInstance.get(
+        `${api.basePath}/Shows/${item.SeriesId}/Seasons`,
+        {
+          params: {
+            userId: user?.Id,
+            itemId: item.SeriesId,
+            Fields:
+              "ItemCounts,PrimaryImageAspectRatio,CanDelete,MediaSourceCount",
+          },
+          headers: {
+            Authorization: `MediaBrowser DeviceId="${api.deviceInfo.id}", Token="${api.accessToken}"`,
+          },
+        }
+      );
+      return response.data.Items;
+    },
+    enabled: !!api && !!user?.Id && !!item.SeasonId,
+  });
+
+  const selectedSeasonId: string | null = useMemo(
+    () =>
+      seasons?.find((season: any) => season.IndexNumber === seasonIndex)?.Id,
+    [seasons, seasonIndex]
+  );
+
+  const { data: episodes, isFetching } = useQuery({
+    queryKey: ["episodes", item.SeriesId, selectedSeasonId],
+    queryFn: async () => {
+      if (!api || !user?.Id || !item.Id || !selectedSeasonId) return [];
+      const res = await getTvShowsApi(api).getEpisodes({
+        seriesId: item.SeriesId || "",
+        userId: user.Id,
+        seasonId: selectedSeasonId || undefined,
+        enableUserData: true,
+        fields: ["MediaSources", "MediaStreams", "Overview"],
+      });
+
+      return res.data.Items;
+    },
+    enabled: !!api && !!user?.Id && !!selectedSeasonId,
+  });
+
+  useEffect(() => {
+    if (item?.Type === "Episode" && item.Id) {
+      const index = episodes?.findIndex((ep) => ep.Id === item.Id);
+      if (index !== undefined && index !== -1) {
+        setTimeout(() => {
+          scrollToIndex(index);
+        }, 400);
+      }
+    }
+  }, [episodes, item]);
+
+  const queryClient = useQueryClient();
+  useEffect(() => {
+    for (let e of episodes || []) {
+      queryClient.prefetchQuery({
+        queryKey: ["item", e.Id],
+        queryFn: async () => {
+          if (!e.Id) return;
+          const res = await getUserItemData({
+            api,
+            userId: user?.Id,
+            itemId: e.Id,
+          });
+          return res;
+        },
+        staleTime: 60 * 5 * 1000,
+      });
+    }
+  }, [episodes]);
+
+  // Scroll to the current item when episodes are fetched
+  useEffect(() => {
+    if (episodes && scrollViewRef.current) {
+      const currentItemIndex = episodes.findIndex((e) => e.Id === item.Id);
+      if (currentItemIndex !== -1) {
+        scrollViewRef.current.scrollToIndex(currentItemIndex, 16); // Adjust the scroll position based on item width
+      }
+    }
+  }, [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 />;
+  }
+
+  return (
+    <View
+      style={{
+        position: "absolute",
+        backgroundColor: "black",
+        height: "100%",
+        width: "100%",
+      }}
+    >
+      <>
+        <View
+          style={{
+            justifyContent: "space-between",
+          }}
+          className={`flex flex-row items-center space-x-2 z-10 p-4`}
+        >
+          {seriesItem && (
+            <SeasonDropdown
+              item={seriesItem}
+              seasons={seasons}
+              state={seasonIndexState}
+              onSelect={(season) => {
+                setSeasonIndexState((prev) => ({
+                  ...prev,
+                  [item.SeriesId ?? ""]: season.IndexNumber,
+                }));
+              }}
+            />
+          )}
+          <TouchableOpacity
+            onPress={async () => {
+              close();
+            }}
+            className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"
+          >
+            <Ionicons name="close" size={24} color="white" />
+          </TouchableOpacity>
+        </View>
+
+        <HorizontalScroll
+          ref={scrollViewRef}
+          data={episodes}
+          extraData={item}
+          renderItem={(_item, idx) => (
+            <View
+              key={_item.Id}
+              style={{}}
+              className={`flex flex-col w-44 ${
+                item.Id !== _item.Id ? "opacity-75" : ""
+              }`}
+            >
+              <TouchableOpacity
+                onPress={() => {
+                  gotoEpisode(_item.Id);
+                }}
+              >
+                <ContinueWatchingPoster
+                  item={_item}
+                  useEpisodePoster
+                  showPlayButton={_item.Id !== item.Id}
+                />
+              </TouchableOpacity>
+              <View className="shrink">
+                <Text
+                  numberOfLines={2}
+                  style={{
+                    lineHeight: 18, // Adjust this value based on your text size
+                    height: 36, // lineHeight * 2 for consistent two-line space
+                  }}
+                >
+                  {_item.Name}
+                </Text>
+                <Text numberOfLines={1} className="text-xs text-neutral-475">
+                  {`S${_item.ParentIndexNumber?.toString()}:E${_item.IndexNumber?.toString()}`}
+                </Text>
+                <Text className="text-xs text-neutral-500">
+                  {runtimeTicksToSeconds(_item.RunTimeTicks)}
+                </Text>
+              </View>
+              <View className="self-start mt-2">
+                <DownloadSingleItem item={_item} />
+              </View>
+              <Text
+                numberOfLines={5}
+                className="text-xs text-neutral-500 shrink"
+              >
+                {_item.Overview}
+              </Text>
+            </View>
+          )}
+          keyExtractor={(e: BaseItemDto) => e.Id ?? ""}
+          estimatedItemSize={200}
+          showsHorizontalScrollIndicator={false}
+        />
+      </>
+    </View>
+  );
+};

hooks/useAdjacentEpisodes.ts

@@ -1,8 +1,8 @@
-import index from "@/app/(auth)/(tabs)/(home)";
 import { apiAtom } from "@/providers/JellyfinProvider";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
-import { getItemsApi } from "@jellyfin/sdk/lib/utils/api/items-api";
+import { getTvShowsApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery } from "@tanstack/react-query";
+import { useMemo } from "react";
 import { useAtomValue } from "jotai";
 
 interface AdjacentEpisodesProps {
@@ -12,81 +12,53 @@ interface AdjacentEpisodesProps {
 export const useAdjacentItems = ({ item }: AdjacentEpisodesProps) => {
   const api = useAtomValue(apiAtom);
 
-  const { data: previousItem } = useQuery({
-    queryKey: ["previousItem", item?.Id, item?.ParentId, item?.IndexNumber],
-    queryFn: async (): Promise<BaseItemDto | null> => {
-      const parentId = item?.AlbumId || item?.ParentId;
-      const indexNumber = item?.IndexNumber;
-
-      if (
-        !api ||
-        !parentId ||
-        indexNumber === undefined ||
-        indexNumber === null ||
-        indexNumber - 1 < 1
-      ) {
+  const { data: adjacentItems } = useQuery({
+    queryKey: ["adjacentItems", item?.Id, item?.SeriesId],
+    queryFn: async (): Promise<BaseItemDto[] | null> => {
+      if (!api || !item || !item.SeriesId) {
         return null;
       }
 
-      const newIndexNumber = indexNumber - 2;
-
-      const res = await getItemsApi(api).getItems({
-        parentId: parentId!,
-        startIndex: newIndexNumber,
-        limit: 1,
-        sortBy: ["IndexNumber"],
-        includeItemTypes: ["Episode", "Audio"],
+      const res = await getTvShowsApi(api).getEpisodes({
+        seriesId: item.SeriesId,
+        adjacentTo: item.Id,
+        limit: 3,
         fields: ["MediaSources", "MediaStreams", "ParentId"],
       });
 
-      if (res.data.Items?.[0]?.IndexNumber !== indexNumber - 1) {
-        throw new Error("Previous item is not correct");
-      }
-
-      return res.data.Items?.[0] || null;
+      return res.data.Items || null;
     },
-    enabled: item?.Type === "Episode" || item?.Type === "Audio",
+    enabled:
+      !!api &&
+      !!item?.Id &&
+      !!item?.SeriesId &&
+      (item?.Type === "Episode" || item?.Type === "Audio"),
     staleTime: 0,
   });
 
-  const { data: nextItem } = useQuery({
-    queryKey: ["nextItem", item?.Id, item?.ParentId, item?.IndexNumber],
-    queryFn: async (): Promise<BaseItemDto | null> => {
-      const parentId = item?.AlbumId || item?.ParentId;
-      const indexNumber = item?.IndexNumber;
+  const previousItem = useMemo(() => {
+    if (!adjacentItems || adjacentItems.length <= 1) {
+      return null;
+    }
 
-      if (
-        !api ||
-        !parentId ||
-        indexNumber === undefined ||
-        indexNumber === null
-      ) {
-        console.log("No next item", {
-          itemId: item?.Id,
-          parentId: parentId,
-          indexNumber: indexNumber,
-        });
-        return null;
-      }
+    if (adjacentItems.length === 2) {
+      return adjacentItems[0].Id === item?.Id ? null : adjacentItems[0];
+    }
 
-      const res = await getItemsApi(api).getItems({
-        parentId: parentId!,
-        startIndex: indexNumber,
-        sortBy: ["IndexNumber"],
-        limit: 1,
-        includeItemTypes: ["Episode", "Audio"],
-        fields: ["MediaSources", "MediaStreams", "ParentId"],
-      });
+    return adjacentItems[0];
+  }, [adjacentItems, item]);
 
-      if (res.data.Items?.[0]?.IndexNumber !== indexNumber + 1) {
-        throw new Error("Previous item is not correct");
-      }
+  const nextItem = useMemo(() => {
+    if (!adjacentItems || adjacentItems.length <= 1) {
+      return null;
+    }
 
-      return res.data.Items?.[0] || null;
-    },
-    enabled: item?.Type === "Episode" || item?.Type === "Audio",
-    staleTime: 0,
-  });
+    if (adjacentItems.length === 2) {
+      return adjacentItems[1].Id === item?.Id ? null : adjacentItems[1];
+    }
+
+    return adjacentItems[2];
+  }, [adjacentItems, item]);
 
   return { previousItem, nextItem };
 };

hooks/useDefaultPlaySettings.ts

@@ -17,16 +17,20 @@ const useDefaultPlaySettings = (
     // 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
+      (x) =>
+        x.Type === "Subtitle" &&
+        x.Language === settings?.defaultSubtitleLanguage?.value
     )?.Index;
+
     const defaultSubtitleIndex = mediaSource?.MediaStreams?.find(
       (stream) => stream.Type === "Subtitle" && stream.IsDefault
     )?.Index;
@@ -38,7 +42,9 @@ const useDefaultPlaySettings = (
       defaultAudioIndex:
         preferedAudioIndex || defaultAudioIndex || firstAudioIndex || undefined,
       defaultSubtitleIndex:
-        preferedSubtitleIndex || defaultSubtitleIndex || undefined,
+        preferedSubtitleIndex !== undefined
+          ? preferedSubtitleIndex
+          : defaultSubtitleIndex || undefined,
       defaultMediaSource: mediaSource || undefined,
       defaultBitrate: bitrate || undefined,
     };

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 } = useDownload();
 
   const onSaveAssets = async (api: Api, item: BaseItemDto) => {
     await saveSeriesPrimaryImage(item);
@@ -66,89 +66,100 @@ 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 {
+        let endTime;
+        const returnCode = await session.getReturnCode();
+        const startTime = new Date();
 
-      if (returnCode.isValueSuccess()) {
-        endTime = new Date();
-        const stat = await session.getLastReceivedStatistics();
-        await queryClient.invalidateQueries({queryKey: ["downloadedItems"]});
+        if (returnCode.isValueSuccess()) {
+          endTime = new Date();
+          const stat = await session.getLastReceivedStatistics();
+          await queryClient.invalidateQueries({
+            queryKey: ["downloadedItems"],
+          });
 
-        saveDownloadedItemInfo(item, stat.getSize());
-        writeInfoLog(
-          `useRemuxHlsToMp4 ~ remuxing completed successfully for item: ${item.Name}, 
+          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}, 
+          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}, 
+          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) {
-      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),
-          };
+          duration: ${
+            (endTime.getTime() - startTime.getTime()) / 1000
+          }s`.replace(/^ +/g, "")
+          );
         }
-        return process;
+
+        setProcesses((prev) => {
+          return prev.filter((process) => process.itemId !== item.Id);
+        });
+      } 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) => {
+    async (item: BaseItemDto, url: string) => {
       const output = `${FileSystem.documentDirectory}${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 +188,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);

package.json

@@ -71,8 +71,9 @@
     "react-dom": "18.2.0",
     "react-native": "0.74.5",
     "react-native-awesome-slider": "^2.5.6",
-    "react-native-bottom-tabs": "^0.7.1",
+    "react-native-bottom-tabs": "^0.7.3",
     "react-native-circular-progress": "^1.4.1",
+    "react-native-color-matrix-image-filters": "^7.0.1",
     "react-native-compressor": "^1.9.0",
     "react-native-device-info": "^14.0.1",
     "react-native-edge-to-edge": "^1.1.1",

providers/DownloadProvider.tsx

@@ -1,6 +1,6 @@
 import { useSettings } from "@/utils/atoms/settings";
 import { getOrSetDeviceId } from "@/utils/device";
-import {useLog, writeToLog} from "@/utils/log";
+import { useLog, writeToLog } from "@/utils/log";
 import {
   cancelAllJobs,
   cancelJobById,
@@ -30,7 +30,7 @@ import {
 import axios from "axios";
 import * as FileSystem from "expo-file-system";
 import { useRouter } from "expo-router";
-import {atom, useAtom} from "jotai";
+import { atom, useAtom } from "jotai";
 import React, {
   createContext,
   useCallback,
@@ -47,16 +47,15 @@ import { getItemImage } from "@/utils/getItemImage";
 import useImageStorage from "@/hooks/useImageStorage";
 import { storage } from "@/utils/mmkv";
 import useDownloadHelper from "@/utils/download";
-import {FileInfo} from "expo-file-system";
+import { FileInfo } from "expo-file-system";
 import * as Haptics from "expo-haptics";
 
 export type DownloadedItem = {
   item: Partial<BaseItemDto>;
   mediaSource: MediaSourceInfo;
-  size: number | undefined;
 };
 
-export const processesAtom = atom<JobStatus[]>([])
+export const processesAtom = atom<JobStatus[]>([]);
 
 function onAppStateChange(status: AppStateStatus) {
   focusManager.setFocused(status === "active");
@@ -73,7 +72,7 @@ function useDownloadProvider() {
   const [api] = useAtom(apiAtom);
   const { logs } = useLog();
 
-  const {saveSeriesPrimaryImage} = useDownloadHelper();
+  const { saveSeriesPrimaryImage } = useDownloadHelper();
   const { saveImage } = useImageStorage();
 
   const [processes, setProcesses] = useAtom<JobStatus[]>(processesAtom);
@@ -267,7 +266,10 @@ function useDownloadProvider() {
           );
         })
         .done(async (doneHandler) => {
-          await saveDownloadedItemInfo(process.item, doneHandler.bytesDownloaded);
+          await saveDownloadedItemInfo(
+            process.item,
+            doneHandler.bytesDownloaded
+          );
           toast.success(`Download completed for ${process.item.Name}`, {
             duration: 3000,
             action: {
@@ -397,16 +399,21 @@ function useDownloadProvider() {
       deleteLocalFiles(),
       removeDownloadedItemsFromStorage(),
       cancelAllServerJobs(),
-      queryClient.invalidateQueries({queryKey: ["downloadedItems"]}),
-    ]).then(() =>
-      toast.success("All files, folders, and jobs deleted successfully")
-    ).catch((reason) => {
-      console.error("Failed to delete all files, folders, and jobs:", reason);
-      toast.error("An error occurred while deleting files and jobs");
-    });
+      queryClient.invalidateQueries({ queryKey: ["downloadedItems"] }),
+    ])
+      .then(() =>
+        toast.success("All files, folders, and jobs deleted successfully")
+      )
+      .catch((reason) => {
+        console.error("Failed to delete all files, folders, and jobs:", reason);
+        toast.error("An error occurred while deleting files and jobs");
+      });
   };
 
-  const forEveryDirectoryFile = async (includeMMKV: boolean = true, callback: (file: FileInfo) => void) => {
+  const forEveryDirectoryFile = async (
+    includeMMKV: boolean = true,
+    callback: (file: FileInfo) => void
+  ) => {
     const baseDirectory = FileSystem.documentDirectory;
     if (!baseDirectory) {
       throw new Error("Base directory not found");
@@ -416,34 +423,29 @@ 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) continue;
       const itemInfo = await FileSystem.getInfoAsync(`${baseDirectory}${item}`);
       if (itemInfo.exists) {
-        callback(itemInfo)
+        callback(itemInfo);
       }
     }
-  }
+  };
 
   const deleteLocalFiles = async (): Promise<void> => {
     await forEveryDirectoryFile(false, (file) => {
-        console.warn("Deleting file", file.uri)
-        FileSystem.deleteAsync(file.uri, {idempotent: true})
-      }
-    )
+      console.warn("Deleting file", file.uri);
+      FileSystem.deleteAsync(file.uri, { idempotent: true });
+    });
   };
 
   const removeDownloadedItemsFromStorage = async () => {
     // delete any saved images first
-    Promise.all([
-      deleteFileByType("Movie"),
-      deleteFileByType("Episode"),
-    ]).then(() =>
-      storage.delete("downloadedItems")
-    ).catch((reason) => {
-      console.error("Failed to remove downloadedItems from storage:", reason);
-      throw reason
-    })
+    Promise.all([deleteFileByType("Movie"), deleteFileByType("Episode")])
+      .then(() => storage.delete("downloadedItems"))
+      .catch((reason) => {
+        console.error("Failed to remove downloadedItems from storage:", reason);
+        throw reason;
+      });
   };
 
   const cancelAllServerJobs = async (): Promise<void> => {
@@ -452,7 +454,7 @@ function useDownloadProvider() {
     }
     if (!settings?.optimizedVersionsServerUrl) {
       console.error("No server URL configured");
-      return
+      return;
     }
 
     const deviceId = await getOrSetDeviceId();
@@ -513,41 +515,38 @@ function useDownloadProvider() {
   };
 
   const deleteItems = async (items: BaseItemDto[]) => {
-    Promise.all(items.map(i => {
-      if (i.Id)
-        return deleteFile(i.Id)
-      return
-    })).then(() =>
+    Promise.all(
+      items.map((i) => {
+        if (i.Id) return deleteFile(i.Id);
+        return;
+      })
+    ).then(() =>
       Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success)
-    )
-  }
+    );
+  };
 
-  const deleteFileByType = async (type: BaseItemDto['Type']) => {
+  const deleteFileByType = async (type: BaseItemDto["Type"]) => {
     await Promise.all(
       downloadedFiles
-        ?.filter(file => file.item.Type == type)
-        ?.flatMap(file => {
+        ?.filter((file) => file.item.Type == type)
+        ?.flatMap((file) => {
           const promises = [];
           if (type == "Episode" && file.item.SeriesId)
-            promises.push(deleteFile(file.item.SeriesId))
-          promises.push(deleteFile(file.item.Id!))
+            promises.push(deleteFile(file.item.SeriesId));
+          promises.push(deleteFile(file.item.Id!));
           return promises;
-        })
-      || []
+        }) || []
     );
-  }
+  };
 
   const appSizeUsage = useMemo(async () => {
     const sizes: number[] = [];
-    await forEveryDirectoryFile(
-      true,
-      file => {
-        if (file.exists) sizes.push(file.size)
-      }
-    )
+    await forEveryDirectoryFile(true, (file) => {
+      if (file.exists) sizes.push(file.size);
+    });
 
     return sizes.reduce((sum, size) => sum + size, 0);
-  }, [logs, downloadedFiles])
+  }, [logs, downloadedFiles]);
 
   function getDownloadedItem(itemId: string): DownloadedItem | null {
     try {
@@ -594,7 +593,7 @@ function useDownloadProvider() {
           "Media source not found in tmp storage. Did you forget to save it before starting download?"
         );
 
-      const newItem = { item, size, mediaSource: data.mediaSource };
+      const newItem = { item, mediaSource: data.mediaSource };
 
       if (existingItemIndex !== -1) {
         items[existingItemIndex] = newItem;
@@ -605,6 +604,8 @@ function useDownloadProvider() {
       deleteDownloadItemInfoFromDiskTmp(item.Id!);
 
       storage.set("downloadedItems", JSON.stringify(items));
+      storage.set("downloadedItemSize-" + item.Id, size.toString());
+
       queryClient.invalidateQueries({ queryKey: ["downloadedItems"] });
       refetch();
     } catch (error) {
@@ -615,6 +616,11 @@ function useDownloadProvider() {
     }
   }
 
+  function getDownloadedItemSize(itemId: string): number {
+    const size = storage.getString("downloadedItemSize-" + itemId);
+    return size ? parseInt(size) : 0;
+  }
+
   return {
     processes,
     startBackgroundDownload,
@@ -628,7 +634,8 @@ function useDownloadProvider() {
     startDownload,
     getDownloadedItem,
     deleteFileByType,
-    appSizeUsage
+    appSizeUsage,
+    getDownloadedItemSize,
   };
 }
 
@@ -653,15 +660,12 @@ export function useDownload() {
 export function bytesToReadable(bytes: number): string {
   const gb = bytes / 1e9;
 
-  if (gb >= 1)
-    return `${gb.toFixed(2)} GB`
+  if (gb >= 1) return `${gb.toFixed(2)} GB`;
 
-  const mb = bytes / 1024 / 1024
-  if (mb >= 1)
-    return `${mb.toFixed(2)} MB`
+  const mb = bytes / 1024 / 1024;
+  if (mb >= 1) return `${mb.toFixed(2)} MB`;
 
-  const kb = bytes / 1024
-  if (kb >= 1)
-    return `${kb.toFixed(2)} KB`
-  return `${bytes.toFixed(2)} B`
-}
+  const kb = bytes / 1024;
+  if (kb >= 1) return `${kb.toFixed(2)} KB`;
+  return `${bytes.toFixed(2)} B`;
+}

utils/atoms/settings.ts

@@ -2,6 +2,7 @@ import { atom, useAtom } from "jotai";
 import { useEffect } from "react";
 import * as ScreenOrientation from "expo-screen-orientation";
 import { storage } from "../mmkv";
+import { Platform } from "react-native";
 
 export type DownloadQuality = "original" | "high" | "low";
 
@@ -107,7 +108,7 @@ const loadSettings = (): Settings => {
     downloadMethod: "remux",
     autoDownload: false,
     showCustomMenuLinks: false,
-    subtitleSize: 60,
+    subtitleSize: Platform.OS === "ios" ? 60 : 100,
     remuxConcurrentLimit: 1,
   };
 

utils/download.ts

@@ -1,49 +1,33 @@
-import {getPrimaryImageUrlById} from "@/utils/jellyfin/image/getPrimaryImageUrlById";
-import {BaseItemDto} from "@jellyfin/sdk/lib/generated-client";
 import useImageStorage from "@/hooks/useImageStorage";
-import {apiAtom} from "@/providers/JellyfinProvider";
-import {useAtom} from "jotai";
-import {storage} from "@/utils/mmkv";
-import {getDownloadedFileUrl} from "@/hooks/useDownloadedFileOpener";
-import * as FileSystem from 'expo-file-system';
-import {FileInfo} from "expo-file-system";
-
+import { apiAtom } from "@/providers/JellyfinProvider";
+import { getPrimaryImageUrlById } from "@/utils/jellyfin/image/getPrimaryImageUrlById";
+import { storage } from "@/utils/mmkv";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+import { useAtom } from "jotai";
 
 const useDownloadHelper = () => {
   const [api] = useAtom(apiAtom);
-  const {saveImage} = useImageStorage();
+  const { saveImage } = useImageStorage();
 
   const saveSeriesPrimaryImage = async (item: BaseItemDto) => {
-    if (item.Type === "Episode" && item.SeriesId && !storage.getString(item.SeriesId)) {
-      await saveImage(item.SeriesId, getPrimaryImageUrlById({ api, id: item.SeriesId }))
+    console.log(`Attempting to save primary image for item: ${item.Id}`);
+    if (
+      item.Type === "Episode" &&
+      item.SeriesId &&
+      !storage.getString(item.SeriesId)
+    ) {
+      console.log(`Saving primary image for series: ${item.SeriesId}`);
+      await saveImage(
+        item.SeriesId,
+        getPrimaryImageUrlById({ api, id: item.SeriesId })
+      );
+      console.log(`Primary image saved for series: ${item.SeriesId}`);
+    } else {
+      console.log(`Skipping primary image save for item: ${item.Id}`);
     }
-  }
+  };
 
-  const getDownloadSize = async (
-    onNewItemSizeFetched: (item: BaseItemDto, size: number) => void,
-    ...items: BaseItemDto[]
-  ) => {
-    const sizes: number[] = [];
+  return { saveSeriesPrimaryImage };
+};
 
-    await Promise.all(items.map(item => {
-      return new Promise(async (resolve, reject) => {
-        const url = await getDownloadedFileUrl(item.Id!);
-        if (url) {
-          const fileInfo: FileInfo = await FileSystem.getInfoAsync(url);
-          if (fileInfo.exists) {
-            onNewItemSizeFetched(item, fileInfo.size)
-            sizes.push(fileInfo.size);
-            resolve(sizes)
-          }
-        }
-        reject();
-      })
-    }));
-
-    return sizes.reduce((sum, size) => sum + size, 0);
-  }
-
-  return { saveSeriesPrimaryImage, getDownloadSize }
-}
-
-export default useDownloadHelper;
+export default useDownloadHelper;

utils/profiles/native.js

@@ -10,21 +10,12 @@ import MediaTypes from "../../constants/MediaTypes";
  */
 export default {
   Name: "1. Vlc Player",
-  MaxStaticBitrate: 9999_000_000,
-  MaxStreamingBitrate: 9999_000_000,
+  MaxStaticBitrate: 999_999_999,
+  MaxStreamingBitrate: 999_999_999,
   CodecProfiles: [
     {
       Type: MediaTypes.Video,
       Codec: "h264,h265,hevc,mpeg4,divx,xvid,wmv,vc1,vp8,vp9,av1",
-      // TODO: Fix dolby vision playback
-      // Conditions: [
-      //   {
-      //     Condition: "NotEquals",
-      //     Property: "VideoProfile",
-      //     Value: "dolby-vision|dvhe|dvh1|dvhe.05|dvhe.07",
-      //     IsRequired: false,
-      //   },
-      // ],
     },
     {
       Type: MediaTypes.Audio,