fix: incorrect matrix

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,13 +1,13 @@
 name: Bug report
 description: Create a report to help us improve
-title: "[Bug]: "
+title: '[Bug]: '
 labels:
-  - ["❌ bug"]
-projects:
-  - ["fredrikburmester/5"]
+  - ['❌ bug']
+projects: 
+  - ['fredrikburmester/5']
 assignees:
   - fredrikburmester
-
+  
 body:
   - type: textarea
     id: what-happened
@@ -43,9 +43,8 @@ body:
     id: version
     attributes:
       label: Version
-      description: What version of Streamyfin are you running?
+      description:  What version of Streamyfin are you running?
       options:
-        - 0.23.0
         - 0.22.0
         - 0.21.0
         - older
@@ -55,5 +54,6 @@ body:
   - type: textarea
     id: screenshots
     attributes:
-      label: If applicable, please add screenshots to help explain your problem.
+      label: 
+        If applicable, please add screenshots to help explain your problem.  
         You can drag and drop images here or paste them directly into the comment box.

.gitignore

@@ -35,4 +35,3 @@ credentials.json
 *.ipa
 .continuerc.json
 
-.vscode/

.gitmodules

@@ -1,4 +0,0 @@
-[submodule "utils/jellyseerr"]
-	path = utils/jellyseerr
-	url = https://github.com/herrrta/jellyseerr
-	branch = models

.vscode/settings.json

@@ -11,5 +11,7 @@
   },
   "[swift]": {
     "editor.defaultFormatter": "sswg.swift-lang"
-  }
+  },
+  "java.configuration.updateBuildConfiguration": "interactive",
+  "java.compile.nullAnalysis.mode": "automatic"
 }

README.md

@@ -15,10 +15,10 @@ Welcome to Streamyfin, a simple and user-friendly Jellyfin client built with Exp
 
 - 🚀 **Skp intro / credits support**
 - 🖼️ **Trickplay images**: The new golden standard for chapter previews when seeking.
+- 📺 **Picture in Picture** (iPhone only): Watch movies in PiP mode on your iPhone.
 - 🔊 **Background audio**: Stream music in the background, even when locking the phone.
 - 📥 **Download media** (Experimental): Save your media locally and watch it offline.
 - 📡 **Chromecast** (Experimental): Cast your media to any Chromecast-enabled device.
-- 🤖 **Jellyseerr integration**: Request media directly in the app.
 
 ## 🧪 Experimental Features
 
@@ -70,9 +70,11 @@ Or download the APKs [here on GitHub](https://github.com/fredrikburmester/stream
 
 ### Beta testing
 
-To access the Streamyfin beta, you need to subscribe to the Member tier (or higher) on [Patreon](https://www.patreon.com/streamyfin). This will give you immediate access to the ⁠🧪-public-beta channel on Discord and i'll know that you have subscribed. This is where i'll post APKs and IPAs. This won't give automatic access to the TestFlight however, so you need to send me a DM with the email you use for Apple so that i can manually add you.
+Get the latest updates by using the TestFlight version of the app.
 
- **Note**: Everyone who is actively contributing to the source code of Streamyfin will have automatic access to the betas.
+<a href="https://testflight.apple.com/join/CWBaAAK2">
+  <img height=75 alt="Get the beta on TestFlight" src="./assets/Get_the_beta_on_Testflight.svg"/>
+</a>
 
 ## 🚀 Getting Started
 
@@ -87,10 +89,36 @@ We welcome any help to make Streamyfin better. If you'd like to contribute, plea
 
 ### Development info
 
-1. Use node `>20`
-2. Install dependencies `bun i && bun run submodule-reload`
-3. Make sure you have xcode and/or android studio installed.
-4. Create an expo dev build by running `npx expo run:ios` or `npx expo run:android`. This will open a simulator on you computer and run the app.
+1. Use node `20`
+2. Install dependencies `bun i`
+3. Create an expo dev build by running `npx expo run:ios` or `npx expo run:android`.
+
+## Extended chromecast controls
+
+Add this to AppDelegate.mm:
+
+```
+- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
+{
+// @generated begin react-native-google-cast-didFinishLaunchingWithOptions - expo prebuild (DO NOT MODIFY) sync-8901be60b982d2ae9c658b1e8c50634d61bb5091
+#if __has_include(<GoogleCast/GoogleCast.h>)
+...
+
+[GCKCastContext sharedInstance].useDefaultExpandedMediaControls = true;`
+#endif
+```
+
+Add this to Info.plist:
+
+```
+<key>NSBonjourServices</key>
+<array>
+  <string>_googlecast._tcp</string>
+  <string>_CC1AD845._googlecast._tcp</string>
+</array>
+<key>NSLocalNetworkUsageDescription</key>
+<string>${PRODUCT_NAME} uses the local network to discover Cast-enabled devices on your WiFi network.</string>
+```
 
 ## 📄 License
 
@@ -125,7 +153,6 @@ I'd like to thank the following people and projects for their contributions to S
 
 - [Reiverr](https://github.com/aleksilassila/reiverr) for great help with understanding the Jellyfin API.
 - [Jellyfin TS SDK](https://github.com/jellyfin/jellyfin-sdk-typescript) for the TypeScript SDK.
-- [Jellyseerr](https://github.com/Fallenbagel/jellyseerr) for enabling API integration with their project.
 - The Jellyfin devs for always being helpful in the Discord.
 
 ## Star History

app.json

@@ -2,7 +2,7 @@
   "expo": {
     "name": "Streamyfin",
     "slug": "streamyfin",
-    "version": "0.23.0",
+    "version": "0.22.0",
     "orientation": "default",
     "icon": "./assets/images/icon.png",
     "scheme": "streamyfin",
@@ -36,22 +36,38 @@
     },
     "android": {
       "jsEngine": "hermes",
-      "versionCode": 49,
+      "versionCode": 47,
       "adaptiveIcon": {
         "foregroundImage": "./assets/images/adaptive_icon.png"
       },
       "package": "com.fredrikburmester.streamyfin",
-      "permissions": []
+      "permissions": [
+        "android.permission.FOREGROUND_SERVICE",
+        "android.permission.FOREGROUND_SERVICE_MEDIA_PLAYBACK",
+        "android.permission.WRITE_SETTINGS"
+      ]
     },
     "plugins": [
       "expo-router",
       "expo-font",
       "@config-plugins/ffmpeg-kit-react-native",
+      [
+        "react-native-google-cast",
+        {
+          "useDefaultExpandedMediaControls": true
+        }
+      ],
       [
         "react-native-video",
         {
           "enableNotificationControls": true,
-          "enableBackgroundAudio": true
+          "enableBackgroundAudio": true,
+          "androidExtensions": {
+            "useExoplayerRtsp": false,
+            "useExoplayerSmoothStreaming": false,
+            "useExoplayerHls": true,
+            "useExoplayerDash": false
+          }
         }
       ],
       [
@@ -60,9 +76,29 @@
           "ios": {
             "deploymentTarget": "15.6",
             "useFrameworks": "static"
+          },
+          "android": {
+            "android": {
+              "compileSdkVersion": 34,
+              "targetSdkVersion": 34,
+              "buildToolsVersion": "34.0.0"
+            },
+            "minSdkVersion": 24,
+            "usesCleartextTraffic": true,
+            "packagingOptions": {
+              "jniLibs": {
+                "useLegacyPackaging": true
+              }
+            }
           }
         }
       ],
+      [
+        "expo-screen-orientation",
+        {
+          "initialOrientation": "DEFAULT"
+        }
+      ],
       [
         "expo-sensors",
         {
@@ -70,9 +106,12 @@
         }
       ],
       "expo-asset",
-      ["react-native-edge-to-edge"],
+      [
+        "react-native-edge-to-edge",
+        { "android": { "parentTheme": "Material3" } }
+      ],
       ["react-native-bottom-tabs"],
-      ["@react-native-tvos/config-tv"]
+      ["./plugins/withChangeNativeAndroidTextToWhite.js"]
     ],
     "experiments": {
       "typedRoutes": true

app/(auth)/(tabs)/(custom-links)/_layout.tsx

@@ -0,0 +1,20 @@
+import {Stack} from "expo-router";
+import { Platform } from "react-native";
+
+export default function CustomMenuLayout() {
+  return (
+    <Stack>
+      <Stack.Screen
+        name="index"
+        options={{
+          headerShown: true,
+          headerLargeTitle: true,
+          headerTitle: "Custom Links",
+          headerBlurEffect: "prominent",
+          headerTransparent: Platform.OS === "ios",
+          headerShadowVisible: false,
+        }}
+      />
+    </Stack>
+  );
+}

app/(auth)/(tabs)/(custom-links)/index.tsx

@@ -0,0 +1,73 @@
+import {FlatList, TouchableOpacity, View} from "react-native";
+import {useSafeAreaInsets} from "react-native-safe-area-context";
+import React, {useCallback, useEffect, useState} from "react";
+import {useAtom} from "jotai/index";
+import {apiAtom} from "@/providers/JellyfinProvider";
+import {ListItem} from "@/components/ListItem";
+import * as WebBrowser from 'expo-web-browser';
+import Ionicons from '@expo/vector-icons/Ionicons';
+import {Text} from "@/components/common/Text";
+
+export interface MenuLink {
+    name: string,
+    url: string,
+    icon: string
+}
+
+export default function menuLinks() {
+  const [api] = useAtom(apiAtom);
+  const insets = useSafeAreaInsets()
+  const [menuLinks, setMenuLinks] = useState<MenuLink[]>([])
+
+  const getMenuLinks = useCallback(async () => {
+    try {
+      const response = await api?.axiosInstance.get(api?.basePath + "/web/config.json")
+      const config = response?.data;
+
+      if (!config && !config.hasOwnProperty("menuLinks")) {
+        console.error("Menu links not found");
+        return;
+      }
+
+      setMenuLinks(config?.menuLinks as MenuLink[])
+      } catch (error) {
+        console.error("Failed to retrieve config:", error);
+      }
+  },
+    [api]
+  )
+
+  useEffect(() => { getMenuLinks() }, []);
+  return (
+    <FlatList
+      contentInsetAdjustmentBehavior="automatic"
+      contentContainerStyle={{
+        paddingTop: 10,
+        paddingLeft: insets.left,
+        paddingRight: insets.right,
+      }}
+      data={menuLinks}
+      renderItem={({item}) => (
+        <TouchableOpacity onPress={() => WebBrowser.openBrowserAsync(item.url) }>
+          <ListItem
+              title={item.name}
+              iconAfter={<Ionicons name="link" size={24} color="white"/>}
+          />
+        </TouchableOpacity>
+        )
+      }
+      ItemSeparatorComponent={() => (
+        <View
+          style={{
+            width: 10,
+            height: 10,
+          }}/>
+        )}
+      ListEmptyComponent={
+          <View className="flex flex-col items-center justify-center h-full">
+              <Text className="font-bold text-xl text-neutral-500">No links</Text>
+          </View>
+      }
+      />
+  );
+}

app/(auth)/(tabs)/(home)/_layout.tsx

@@ -1,3 +1,4 @@
+import { Chromecast } from "@/components/Chromecast";
 import { nestedTabPageScreenOptions } from "@/components/stacks/NestedTabPageStack";
 import { Feather } from "@expo/vector-icons";
 import { Stack, useRouter } from "expo-router";
@@ -18,6 +19,7 @@ export default function IndexLayout() {
           headerShadowVisible: false,
           headerRight: () => (
             <View className="flex flex-row items-center space-x-2">
+              <Chromecast />
               <TouchableOpacity
                 onPress={() => {
                   router.push("/(auth)/settings");
@@ -29,6 +31,18 @@ export default function IndexLayout() {
           ),
         }}
       />
+      <Stack.Screen
+        name="downloads/index"
+        options={{
+          title: "Downloads",
+        }}
+      />
+      <Stack.Screen
+        name="downloads/[seriesId]"
+        options={{
+          title: "TV-Series",
+        }}
+      />
       <Stack.Screen
         name="settings"
         options={{

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

@@ -0,0 +1,132 @@
+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 [seasonIndexState, setSeasonIndexState] = useState<SeasonIndexState>(
+    {}
+  );
+  const { downloadedFiles, deleteItems } = useDownload();
+
+  const series = useMemo(() => {
+    try {
+      return (
+        downloadedFiles
+          ?.filter((f) => f.item.SeriesId == seriesId)
+          ?.sort(
+            (a, b) => a?.item.ParentIndexNumber! - b.item.ParentIndexNumber!
+          ) || []
+      );
+    } catch {
+      return [];
+    }
+  }, [downloadedFiles]);
+
+  const seasonIndex =
+    seasonIndexState[series?.[0]?.item?.ParentId ?? ""] ||
+    episodeSeasonIndex ||
+    "";
+
+  const groupBySeason = useMemo<BaseItemDto[]>(() => {
+    const seasons: Record<string, BaseItemDto[]> = {};
+
+    series?.forEach((episode) => {
+      if (!seasons[episode.item.ParentIndexNumber!]) {
+        seasons[episode.item.ParentIndexNumber!] = [];
+      }
+
+      seasons[episode.item.ParentIndexNumber!].push(episode.item);
+    });
+    return (
+      seasons[seasonIndex]?.sort((a, b) => a.IndexNumber! - b.IndexNumber!) ??
+      []
+    );
+  }, [series, seasonIndex]);
+
+  const initialSeasonIndex = useMemo(
+    () =>
+      Object.values(groupBySeason)?.[0]?.ParentIndexNumber ??
+      series?.[0]?.item?.ParentIndexNumber,
+    [groupBySeason]
+  );
+
+  useEffect(() => {
+    if (series.length > 0) {
+      navigation.setOptions({
+        title: series[0].item.SeriesName,
+      });
+    } else {
+      storage.delete(seriesId);
+      router.back();
+    }
+  }, [series]);
+
+  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 (
+    <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 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) => (
+          <EpisodeCard key={index} item={episode} />
+        ))}
+      </ScrollView>
+    </View>
+  );
+}

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

@@ -0,0 +1,231 @@
+import { Text } from "@/components/common/Text";
+import { ActiveDownloads } from "@/components/downloads/ActiveDownloads";
+import { MovieCard } from "@/components/downloads/MovieCard";
+import { SeriesCard } from "@/components/downloads/SeriesCard";
+import { DownloadedItem, useDownload } from "@/providers/DownloadProvider";
+import { queueAtom } from "@/utils/atoms/queue";
+import { useSettings } from "@/utils/atoms/settings";
+import { Ionicons } from "@expo/vector-icons";
+import {useNavigation, useRouter} from "expo-router";
+import { useAtom } from "jotai";
+import React, {useEffect, useMemo, useRef} from "react";
+import {Alert, ScrollView, TouchableOpacity, View} from "react-native";
+import { Button } from "@/components/Button";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import {DownloadSize} from "@/components/downloads/DownloadSize";
+import {BottomSheetBackdrop, BottomSheetBackdropProps, BottomSheetModal, BottomSheetView} from "@gorhom/bottom-sheet";
+import {toast} from "sonner-native";
+import {writeToLog} from "@/utils/log";
+
+export default function page() {
+  const navigation = useNavigation();
+  const [queue, setQueue] = useAtom(queueAtom);
+  const { removeProcess, downloadedFiles, deleteFileByType } = useDownload();
+  const router = useRouter();
+  const [settings] = useSettings();
+  const bottomSheetModalRef = useRef<BottomSheetModal>(null);
+
+  const movies = useMemo(() => {
+    try {
+      return downloadedFiles?.filter((f) => f.item.Type === "Movie") || [];
+    } catch {
+      migration_20241124();
+      return [];
+    }
+  }, [downloadedFiles]);
+
+  const groupedBySeries = useMemo(() => {
+    try {
+      const episodes = downloadedFiles?.filter(
+        (f) => f.item.Type === "Episode"
+      );
+      const series: { [key: string]: DownloadedItem[] } = {};
+      episodes?.forEach((e) => {
+        if (!series[e.item.SeriesName!]) series[e.item.SeriesName!] = [];
+        series[e.item.SeriesName!].push(e);
+      });
+      return Object.values(series);
+    } catch {
+      migration_20241124();
+      return [];
+    }
+  }, [downloadedFiles]);
+
+  const insets = useSafeAreaInsets();
+
+  useEffect(() => {
+    navigation.setOptions({
+      headerRight: () => (
+        <TouchableOpacity
+          onPress={bottomSheetModalRef.current?.present}
+        >
+          <DownloadSize items={downloadedFiles?.map(f => f.item) || []}/>
+        </TouchableOpacity>
+      )
+    })
+  }, [downloadedFiles]);
+
+  const deleteMovies = () => deleteFileByType("Movie")
+    .then(() => toast.success("Deleted all movies successfully!"))
+    .catch((reason) => {
+      writeToLog("ERROR", reason);
+      toast.error("Failed to delete all movies");
+    });
+  const deleteShows = () => deleteFileByType("Episode")
+    .then(() => toast.success("Deleted all TV-Series successfully!"))
+    .catch((reason) => {
+      writeToLog("ERROR", reason);
+      toast.error("Failed to delete all TV-Series");
+    });
+  const deleteAllMedia = async () => await Promise.all([deleteMovies(), deleteShows()])
+
+  return (
+    <>
+      <ScrollView
+        contentContainerStyle={{
+          paddingLeft: insets.left,
+          paddingRight: insets.right,
+          paddingBottom: 100,
+        }}
+      >
+        <View className="py-4">
+          <View className="mb-4 flex flex-col space-y-4 px-4">
+            {settings?.downloadMethod === "remux" && (
+              <View className="bg-neutral-900 p-4 rounded-2xl">
+                <Text className="text-lg font-bold">Queue</Text>
+                <Text className="text-xs opacity-70 text-red-600">
+                  Queue and downloads will be lost on app restart
+                </Text>
+                <View className="flex flex-col space-y-2 mt-2">
+                  {queue.map((q, index) => (
+                    <TouchableOpacity
+                      onPress={() =>
+                        router.push(`/(auth)/items/page?id=${q.item.Id}`)
+                      }
+                      className="relative bg-neutral-900 border border-neutral-800 p-4 rounded-2xl overflow-hidden flex flex-row items-center justify-between"
+                      key={index}
+                    >
+                      <View>
+                        <Text className="font-semibold">{q.item.Name}</Text>
+                        <Text className="text-xs opacity-50">{q.item.Type}</Text>
+                      </View>
+                      <TouchableOpacity
+                        onPress={() => {
+                          removeProcess(q.id);
+                          setQueue((prev) => {
+                            if (!prev) return [];
+                            return [...prev.filter((i) => i.id !== q.id)];
+                          });
+                        }}
+                      >
+                        <Ionicons name="close" size={24} color="red"/>
+                      </TouchableOpacity>
+                    </TouchableOpacity>
+                  ))}
+                </View>
+
+                {queue.length === 0 && (
+                  <Text className="opacity-50">No items in queue</Text>
+                )}
+              </View>
+            )}
+
+            <ActiveDownloads/>
+          </View>
+
+          {movies.length > 0 && (
+            <View className="mb-4">
+              <View className="flex flex-row items-center justify-between mb-2 px-4">
+                <Text className="text-lg font-bold">Movies</Text>
+                <View className="bg-purple-600 rounded-full h-6 w-6 flex items-center justify-center">
+                  <Text className="text-xs font-bold">{movies?.length}</Text>
+                </View>
+              </View>
+              <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+                <View className="px-4 flex flex-row">
+                  {movies?.map((item) => (
+                    <View className="mb-2 last:mb-0" key={item.item.Id}>
+                      <MovieCard item={item.item}/>
+                    </View>
+                  ))}
+                </View>
+              </ScrollView>
+            </View>
+          )}
+          {groupedBySeries.length > 0 && (
+            <View className="mb-4">
+              <View className="flex flex-row items-center justify-between mb-2 px-4">
+                <Text className="text-lg font-bold">TV-Series</Text>
+                <View className="bg-purple-600 rounded-full h-6 w-6 flex items-center justify-center">
+                  <Text className="text-xs font-bold">{groupedBySeries?.length}</Text>
+                </View>
+              </View>
+              <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+                <View className="px-4 flex flex-row">
+                  {groupedBySeries?.map((items) => (
+                    <View className="mb-2 last:mb-0" key={items[0].item.SeriesId}>
+                      <SeriesCard
+                        items={items.map((i) => i.item)}
+                        key={items[0].item.SeriesId}
+                      />
+                    </View>
+                  ))}
+                </View>
+              </ScrollView>
+            </View>
+          )}
+          {downloadedFiles?.length === 0 && (
+            <View className="flex px-4">
+              <Text className="opacity-50">No downloaded items</Text>
+            </View>
+          )}
+        </View>
+      </ScrollView>
+      <BottomSheetModal
+        ref={bottomSheetModalRef}
+        enableDynamicSizing
+        handleIndicatorStyle={{
+          backgroundColor: "white",
+        }}
+        backgroundStyle={{
+          backgroundColor: "#171717",
+        }}
+        backdropComponent={(props: BottomSheetBackdropProps) => (
+          <BottomSheetBackdrop
+            {...props}
+            disappearsOnIndex={-1}
+            appearsOnIndex={0}
+          />
+        )}
+      >
+        <BottomSheetView>
+          <View className="p-4 space-y-4 mb-4">
+            <Button color="purple" onPress={deleteMovies}>Delete all Movies</Button>
+            <Button color="purple" onPress={deleteShows}>Delete all TV-Series</Button>
+            <Button color="red" onPress={deleteAllMedia}>Delete all</Button>
+          </View>
+        </BottomSheetView>
+      </BottomSheetModal>
+    </>
+  );
+}
+
+function migration_20241124() {
+  const router = useRouter();
+  const { deleteAllFiles } = useDownload();
+  Alert.alert(
+    "New app version requires re-download",
+    "The new update reqires content to be downloaded again. Please remove all downloaded content and try again.",
+    [
+      {
+        text: "Back",
+        onPress: () => router.back(),
+      },
+      {
+        text: "Delete",
+        style: "destructive",
+        onPress: async () => await deleteAllFiles(),
+      },
+    ]
+  );
+}

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

@@ -6,6 +6,7 @@ import { Loader } from "@/components/Loader";
 import { MediaListSection } from "@/components/medialists/MediaListSection";
 import { Colors } from "@/constants/Colors";
 import { useInvalidatePlaybackProgressCache } from "@/hooks/useRevalidatePlaybackProgressCache";
+import { useDownload } from "@/providers/DownloadProvider";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
 import { Feather, Ionicons } from "@expo/vector-icons";
@@ -63,10 +64,31 @@ export default function index() {
   const [isConnected, setIsConnected] = useState<boolean | null>(null);
   const [loadingRetry, setLoadingRetry] = useState(false);
 
+  const { downloadedFiles } = useDownload();
   const navigation = useNavigation();
 
   const insets = useSafeAreaInsets();
 
+  useEffect(() => {
+    const hasDownloads = downloadedFiles && downloadedFiles.length > 0;
+    navigation.setOptions({
+      headerLeft: () => (
+        <TouchableOpacity
+          onPress={() => {
+            router.push("/(auth)/downloads");
+          }}
+          className="p-2"
+        >
+          <Feather
+            name="download"
+            color={hasDownloads ? Colors.primary : "white"}
+            size={22}
+          />
+        </TouchableOpacity>
+      ),
+    });
+  }, [downloadedFiles, navigation, router]);
+
   const checkConnection = useCallback(async () => {
     setLoadingRetry(true);
     const state = await NetInfo.fetch();
@@ -283,6 +305,48 @@ export default function index() {
     return ss;
   }, [api, user?.Id, collections, mediaListCollections]);
 
+  if (isConnected === false) {
+    return (
+      <View className="flex flex-col items-center justify-center h-full -mt-6 px-8">
+        <Text className="text-3xl font-bold mb-2">No Internet</Text>
+        <Text className="text-center opacity-70">
+          No worries, you can still watch{"\n"}downloaded content.
+        </Text>
+        <View className="mt-4">
+          <Button
+            color="purple"
+            onPress={() => router.push("/(auth)/downloads")}
+            justify="center"
+            iconRight={
+              <Ionicons name="arrow-forward" size={20} color="white" />
+            }
+          >
+            Go to downloads
+          </Button>
+          <Button
+            color="black"
+            onPress={() => {
+              checkConnection();
+            }}
+            justify="center"
+            className="mt-2"
+            iconRight={
+              loadingRetry ? null : (
+                <Ionicons name="refresh" size={20} color="white" />
+              )
+            }
+          >
+            {loadingRetry ? (
+              <ActivityIndicator size={"small"} color={"white"} />
+            ) : (
+              "Retry"
+            )}
+          </Button>
+        </View>
+      </View>
+    );
+  }
+
   if (e1 || e2)
     return (
       <View className="flex flex-col items-center justify-center h-full -mt-6">

app/(auth)/(tabs)/(home)/settings.tsx

@@ -2,19 +2,22 @@ import { Button } from "@/components/Button";
 import { Text } from "@/components/common/Text";
 import { ListItem } from "@/components/ListItem";
 import { SettingToggles } from "@/components/settings/SettingToggles";
+import {bytesToReadable, useDownload} from "@/providers/DownloadProvider";
 import { apiAtom, useJellyfin, userAtom } from "@/providers/JellyfinProvider";
-import { clearLogs, useLog } from "@/utils/log";
+import {clearLogs, useLog} from "@/utils/log";
 import { getQuickConnectApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery } from "@tanstack/react-query";
-import * as FileSystem from "expo-file-system";
+import * as Haptics from "expo-haptics";
 import { useAtom } from "jotai";
-import { Alert, ScrollView, View } from "react-native";
-import * as Progress from "react-native-progress";
+import {Alert, ScrollView, View} from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { toast } from "sonner-native";
+import * as Progress from 'react-native-progress';
+import * as FileSystem from "expo-file-system";
 
 export default function settings() {
   const { logout } = useJellyfin();
+  const { deleteAllFiles, appSizeUsage } = useDownload();
   const { logs } = useLog();
 
   const [api] = useAtom(apiAtom);
@@ -22,6 +25,18 @@ export default function settings() {
 
   const insets = useSafeAreaInsets();
 
+  const {data: size , isLoading: appSizeLoading } = useQuery({
+    queryKey: ["appSize", appSizeUsage],
+    queryFn: async () => {
+      const app = await appSizeUsage
+
+      const remaining = await FileSystem.getFreeDiskStorageAsync()
+      const total = await FileSystem.getTotalDiskCapacityAsync()
+
+      return {app, remaining, total, used: (total - remaining) / total}
+    }
+  })
+
   const openQuickConnectAuthCodeInput = () => {
     Alert.prompt(
       "Quick connect",
@@ -34,11 +49,16 @@ export default function settings() {
               userId: user?.Id,
             });
             if (res.status === 200) {
+              Haptics.notificationAsync(
+                Haptics.NotificationFeedbackType.Success
+              );
               Alert.alert("Success", "Quick connect authorized");
             } else {
+              Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
               Alert.alert("Error", "Invalid code");
             }
           } catch (e) {
+            Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
             Alert.alert("Error", "Invalid code");
           }
         }
@@ -46,6 +66,27 @@ export default function settings() {
     );
   };
 
+  const onDeleteClicked = async () => {
+    try {
+      await deleteAllFiles();
+      Haptics.notificationAsync(
+        Haptics.NotificationFeedbackType.Success
+      );
+    } catch (e) {
+      Haptics.notificationAsync(
+        Haptics.NotificationFeedbackType.Error
+      );
+      toast.error("Error deleting files");
+    }
+  }
+
+  const onClearLogsClicked = async () => {
+    clearLogs();
+    Haptics.notificationAsync(
+      Haptics.NotificationFeedbackType.Success
+    );
+  };
+
   return (
     <ScrollView
       contentContainerStyle={{
@@ -55,6 +96,13 @@ export default function settings() {
       }}
     >
       <View className="p-4 flex flex-col gap-y-4">
+        {/* <Button
+          onPress={() => {
+            registerBackgroundFetchAsync();
+          }}
+        >
+          registerBackgroundFetchAsync
+        </Button> */}
         <View>
           <Text className="font-bold text-lg mb-2">User Info</Text>
 
@@ -77,6 +125,37 @@ export default function settings() {
 
         <SettingToggles />
 
+        <View className="flex flex-col space-y-2">
+          <Text className="font-bold text-lg mb-2">Storage</Text>
+          <View className="mb-4 space-y-2">
+            {size && <Text>App usage: {bytesToReadable(size.app)}</Text>}
+            <Progress.Bar
+              className="bg-gray-100/10"
+              indeterminate={appSizeLoading}
+              color="#9333ea"
+              width={null}
+              height={10}
+              borderRadius={6}
+              borderWidth={0}
+              progress={size?.used}
+            />
+            {size && (
+              <Text>Available: {bytesToReadable(size.remaining)}, Total: {bytesToReadable(size.total)}</Text>
+            )}
+          </View>
+          <Button
+            color="red"
+            onPress={onDeleteClicked}
+          >
+            Delete all downloaded files
+          </Button>
+          <Button
+            color="red"
+            onPress={onClearLogsClicked}
+          >
+            Delete all logs
+          </Button>
+        </View>
         <View>
           <Text className="font-bold text-lg mb-2">Logs</Text>
           <View className="flex flex-col space-y-2">

app/(auth)/(tabs)/(home,libraries,search)/albums/[albumId].tsx

@@ -1,3 +1,4 @@
+import { Chromecast } from "@/components/Chromecast";
 import { ItemImage } from "@/components/common/ItemImage";
 import { Text } from "@/components/common/Text";
 import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
@@ -27,6 +28,16 @@ export default function page() {
 
   const navigation = useNavigation();
 
+  useEffect(() => {
+    navigation.setOptions({
+      headerRight: () => (
+        <View className="">
+          <Chromecast />
+        </View>
+      ),
+    });
+  });
+
   const { data: album } = useQuery({
     queryKey: ["album", albumId, artistId],
     queryFn: async () => {

app/(auth)/(tabs)/(home,libraries,search)/collections/[collectionId].tsx

@@ -29,6 +29,7 @@ import {
 import { FlashList } from "@shopify/flash-list";
 import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
 import { useLocalSearchParams, useNavigation } from "expo-router";
+import * as ScreenOrientation from "expo-screen-orientation";
 import { useAtom } from "jotai";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { FlatList, View } from "react-native";
@@ -40,6 +41,10 @@ const page: React.FC = () => {
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
   const navigation = useNavigation();
+  const [orientation, setOrientation] = useState(
+    ScreenOrientation.Orientation.PORTRAIT_UP
+  );
+
   const [selectedGenres, setSelectedGenres] = useAtom(genreFilterAtom);
   const [selectedYears, setSelectedYears] = useAtom(yearFilterAtom);
   const [selectedTags, setSelectedTags] = useAtom(tagsFilterAtom);
@@ -99,12 +104,9 @@ const page: React.FC = () => {
           "CanDelete",
           "MediaSourceCount",
         ],
-        // true is needed for merged versions
-        recursive: true,
         genres: selectedGenres,
         tags: selectedTags,
         years: selectedYears.map((year) => parseInt(year)),
-        includeItemTypes: ["Movie", "Series", "MusicAlbum"],
       });
 
       return response.data || null;
@@ -169,7 +171,8 @@ const page: React.FC = () => {
         key={item.Id}
         style={{
           width: "100%",
-          marginBottom: 16,
+          marginBottom:
+            orientation === ScreenOrientation.Orientation.PORTRAIT_UP ? 4 : 16,
         }}
         item={item}
       >
@@ -383,7 +386,9 @@ const page: React.FC = () => {
       renderItem={renderItem}
       keyExtractor={keyExtractor}
       estimatedItemSize={255}
-      numColumns={5}
+      numColumns={
+        orientation === ScreenOrientation.Orientation.PORTRAIT_UP ? 3 : 5
+      }
       onEndReached={() => {
         if (hasNextPage) {
           fetchNextPage();

app/(auth)/(tabs)/(home,libraries,search)/items/page.tsx

@@ -1,7 +1,11 @@
 import { Text } from "@/components/common/Text";
 import { ItemContent } from "@/components/ItemContent";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { getUserLibraryApi } from "@jellyfin/sdk/lib/utils/api";
+import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
+import {
+  getMediaInfoApi,
+  getUserLibraryApi,
+} from "@jellyfin/sdk/lib/utils/api";
 import { useQuery } from "@tanstack/react-query";
 import { useLocalSearchParams } from "expo-router";
 import { useAtom } from "jotai";
@@ -44,25 +48,20 @@ const Page: React.FC = () => {
   });
 
   const fadeOut = (callback: any) => {
-    setTimeout(() => {
-      opacity.value = withTiming(0, { duration: 500 }, (finished) => {
-        if (finished) {
-          runOnJS(callback)();
-        }
-      });
-    }, 100);
+    opacity.value = withTiming(0, { duration: 300 }, (finished) => {
+      if (finished) {
+        runOnJS(callback)();
+      }
+    });
   };
 
   const fadeIn = (callback: any) => {
-    setTimeout(() => {
-      opacity.value = withTiming(1, { duration: 500 }, (finished) => {
-        if (finished) {
-          runOnJS(callback)();
-        }
-      });
-    }, 100);
+    opacity.value = withTiming(1, { duration: 300 }, (finished) => {
+      if (finished) {
+        runOnJS(callback)();
+      }
+    });
   };
-
   useEffect(() => {
     if (item) {
       fadeOut(() => {});
@@ -85,24 +84,14 @@ const Page: React.FC = () => {
         style={[animatedStyle]}
         className="absolute top-0 left-0 flex flex-col items-start h-screen w-screen px-4 z-50 bg-black"
       >
-        <View
-          style={{
-            height: item?.Type === "Episode" ? 300 : 450,
-          }}
-          className="bg-transparent rounded-lg mb-4 w-full"
-        ></View>
-        <View className="h-6 bg-neutral-900 rounded mb-4 w-14"></View>
-        <View className="h-10 bg-neutral-900 rounded-lg mb-2 w-1/2"></View>
-        <View className="h-3 bg-neutral-900 rounded mb-3 w-8"></View>
-        <View className="flex flex-row space-x-1 mb-8">
-          <View className="h-6 bg-neutral-900 rounded mb-3 w-14"></View>
-          <View className="h-6 bg-neutral-900 rounded mb-3 w-14"></View>
-          <View className="h-6 bg-neutral-900 rounded mb-3 w-14"></View>
-        </View>
-        <View className="h-3 bg-neutral-900 rounded w-2/3 mb-1"></View>
-        <View className="h-10 bg-neutral-900 rounded-lg w-full mb-2"></View>
-        <View className="h-12 bg-neutral-900 rounded-lg w-full mb-2"></View>
-        <View className="h-24 bg-neutral-900 rounded-lg mb-1 w-full"></View>
+        <View className="h-[350px] bg-transparent rounded-lg mb-4 w-full"></View>
+        <View className="h-6 bg-neutral-900 rounded mb-1 w-12"></View>
+        <View className="h-12 bg-neutral-900 rounded-lg mb-1 w-1/2"></View>
+        <View className="h-12 bg-neutral-900 rounded-lg w-2/3 mb-10"></View>
+        <View className="h-4 bg-neutral-900 rounded-lg mb-1 w-full"></View>
+        <View className="h-12 bg-neutral-900 rounded-lg mb-1 w-full"></View>
+        <View className="h-12 bg-neutral-900 rounded-lg mb-1 w-full"></View>
+        <View className="h-4 bg-neutral-900 rounded-lg mb-1 w-1/4"></View>
       </Animated.View>
       {item && <ItemContent item={item} />}
     </View>

app/(auth)/(tabs)/(home,libraries,search)/jellyseerr/page.tsx

@@ -1,320 +0,0 @@
-import { Button } from "@/components/Button";
-import { Input } from "@/components/common/Input";
-import { Text } from "@/components/common/Text";
-import { GenreTags } from "@/components/GenreTags";
-import { OverviewText } from "@/components/OverviewText";
-import { ParallaxScrollView } from "@/components/ParallaxPage";
-import { JellyserrRatings } from "@/components/Ratings";
-import JellyseerrSeasons from "@/components/series/JellyseerrSeasons";
-import { useJellyseerr } from "@/hooks/useJellyseerr";
-import {
-  IssueType,
-  IssueTypeName,
-} from "@/utils/jellyseerr/server/constants/issue";
-import { MediaType } from "@/utils/jellyseerr/server/constants/media";
-import { MovieResult, TvResult } from "@/utils/jellyseerr/server/models/Search";
-import { TvDetails } from "@/utils/jellyseerr/server/models/Tv";
-import { Ionicons } from "@expo/vector-icons";
-import {
-  BottomSheetBackdrop,
-  BottomSheetBackdropProps,
-  BottomSheetModal,
-  BottomSheetView,
-} from "@gorhom/bottom-sheet";
-import { useQuery } from "@tanstack/react-query";
-import { Image } from "expo-image";
-import { useLocalSearchParams } from "expo-router";
-import React, { useCallback, useRef, useState } from "react";
-import { Modal, TouchableOpacity, View } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-
-const Page: React.FC = () => {
-  const insets = useSafeAreaInsets();
-  const params = useLocalSearchParams();
-  const {
-    mediaTitle,
-    releaseYear,
-    canRequest: canRequestString,
-    posterSrc,
-    ...result
-  } = params as unknown as {
-    mediaTitle: string;
-    releaseYear: number;
-    canRequest: string;
-    posterSrc: string;
-  } & Partial<MovieResult | TvResult>;
-
-  const canRequest = canRequestString === "true";
-  const { jellyseerrApi, requestMedia } = useJellyseerr();
-
-  const [issueType, setIssueType] = useState<IssueType>();
-  const [issueMessage, setIssueMessage] = useState<string>();
-  const bottomSheetModalRef = useRef<BottomSheetModal>(null);
-  const [isIssueTypeModalVisible, setIsIssueTypeModalVisible] = useState(false);
-
-  const {
-    data: details,
-    isFetching,
-    isLoading,
-  } = useQuery({
-    enabled: !!jellyseerrApi && !!result && !!result.id,
-    queryKey: ["jellyseerr", "detail", result.mediaType, result.id],
-    staleTime: 0,
-    refetchOnMount: true,
-    refetchOnReconnect: true,
-    refetchOnWindowFocus: true,
-    retryOnMount: true,
-    queryFn: async () => {
-      return result.mediaType === MediaType.MOVIE
-        ? jellyseerrApi?.movieDetails(result.id!!)
-        : jellyseerrApi?.tvDetails(result.id!!);
-    },
-  });
-
-  const renderBackdrop = useCallback(
-    (props: BottomSheetBackdropProps) => (
-      <BottomSheetBackdrop
-        {...props}
-        disappearsOnIndex={-1}
-        appearsOnIndex={0}
-      />
-    ),
-    []
-  );
-
-  const submitIssue = useCallback(() => {
-    if (result.id && issueType && issueMessage && details) {
-      jellyseerrApi
-        ?.submitIssue(details.mediaInfo.id, Number(issueType), issueMessage)
-        .then(() => {
-          setIssueType(undefined);
-          setIssueMessage(undefined);
-          bottomSheetModalRef?.current?.close();
-        });
-    }
-  }, [jellyseerrApi, details, result, issueType, issueMessage]);
-
-  const request = useCallback(
-    () =>
-      requestMedia(mediaTitle, {
-        mediaId: Number(result.id!!),
-        mediaType: result.mediaType!!,
-        tvdbId: details?.externalIds?.tvdbId,
-        seasons: (details as TvDetails)?.seasons
-          ?.filter?.((s) => s.seasonNumber !== 0)
-          ?.map?.((s) => s.seasonNumber),
-      }),
-    [details, result, requestMedia]
-  );
-
-  return (
-    <View
-      className="flex-1 relative"
-      style={{
-        paddingLeft: insets.left,
-        paddingRight: insets.right,
-      }}
-    >
-      <ParallaxScrollView
-        className="flex-1 opacity-100"
-        headerHeight={300}
-        headerImage={
-          <View>
-            {result.backdropPath ? (
-              <Image
-                cachePolicy={"memory-disk"}
-                transition={300}
-                style={{
-                  width: "100%",
-                  height: "100%",
-                }}
-                source={{
-                  uri: `https://image.tmdb.org/t/p/w1920_and_h800_multi_faces/${result.backdropPath}`,
-                }}
-              />
-            ) : (
-              <View
-                style={{
-                  width: "100%",
-                  height: "100%",
-                }}
-                className="flex flex-col items-center justify-center border border-neutral-800 bg-neutral-900"
-              >
-                <Ionicons
-                  name="image-outline"
-                  size={24}
-                  color="white"
-                  style={{ opacity: 0.4 }}
-                />
-              </View>
-            )}
-          </View>
-        }
-      >
-        <View className="flex flex-col">
-          <View className="space-y-4">
-            <View className="px-4">
-              <View className="flex flex-row justify-between w-full">
-                <View className="flex flex-col w-56">
-                  <JellyserrRatings result={result as MovieResult | TvResult} />
-                  <Text
-                    uiTextView
-                    selectable
-                    className="font-bold text-2xl mb-1"
-                  >
-                    {mediaTitle}
-                  </Text>
-                  <Text className="opacity-50">{releaseYear}</Text>
-                </View>
-                <Image
-                  className="absolute bottom-1 right-1 rounded-lg w-28 aspect-[10/15] border-2 border-neutral-800/50 drop-shadow-2xl"
-                  cachePolicy={"memory-disk"}
-                  transition={300}
-                  source={{
-                    uri: posterSrc,
-                  }}
-                />
-              </View>
-              <View className="mb-4">
-                <GenreTags genres={details?.genres?.map((g) => g.name) || []} />
-              </View>
-              {canRequest ? (
-                <Button color="purple" onPress={request}>
-                  Request
-                </Button>
-              ) : (
-                <Button
-                  className="bg-yellow-500/50 border-yellow-400 ring-yellow-400 text-yellow-100"
-                  color="transparent"
-                  onPress={() => bottomSheetModalRef?.current?.present()}
-                  iconLeft={
-                    <Ionicons name="warning-outline" size={24} color="white" />
-                  }
-                  style={{
-                    borderWidth: 1,
-                    borderStyle: "solid",
-                  }}
-                >
-                  Report issue
-                </Button>
-              )}
-              <OverviewText text={result.overview} className="mt-4" />
-            </View>
-
-            {result.mediaType === MediaType.TV && (
-              <JellyseerrSeasons
-                isLoading={isLoading || isFetching}
-                result={result as TvResult}
-                details={details as TvDetails}
-              />
-            )}
-          </View>
-        </View>
-      </ParallaxScrollView>
-      <BottomSheetModal
-        ref={bottomSheetModalRef}
-        enableDynamicSizing
-        handleIndicatorStyle={{
-          backgroundColor: "white",
-        }}
-        backgroundStyle={{
-          backgroundColor: "#171717",
-        }}
-        backdropComponent={renderBackdrop}
-      >
-        <BottomSheetView>
-          <View className="flex flex-col space-y-4 px-4 pb-8 pt-2">
-            <View>
-              <Text className="font-bold text-2xl text-neutral-100">
-                Whats wrong?
-              </Text>
-            </View>
-            <View className="flex flex-col space-y-2 items-start">
-              <View className="flex flex-col">
-                <View className="flex flex-col">
-                  <Text className="opacity-50 mb-1 text-xs">Issue Type</Text>
-                  <TouchableOpacity
-                    className="bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between"
-                    onPress={() => setIsIssueTypeModalVisible(true)}
-                  >
-                    <Text className="" numberOfLines={1}>
-                      {issueType ? IssueTypeName[issueType] : "Select an issue"}
-                    </Text>
-                    <Ionicons
-                      name="chevron-down"
-                      size={16}
-                      color="white"
-                      style={{ opacity: 0.5 }}
-                    />
-                  </TouchableOpacity>
-
-                  <Modal
-                    visible={isIssueTypeModalVisible}
-                    transparent
-                    animationType="slide"
-                    onRequestClose={() => setIsIssueTypeModalVisible(false)}
-                  >
-                    <TouchableOpacity
-                      className="flex-1 bg-black/50"
-                      activeOpacity={1}
-                      onPress={() => setIsIssueTypeModalVisible(false)}
-                    >
-                      <View className="mt-auto bg-neutral-900 rounded-t-xl">
-                        <View className="p-4 border-b border-neutral-800">
-                          <Text className="text-lg font-bold text-center">
-                            Select Issue Type
-                          </Text>
-                        </View>
-                        <View className="max-h-[50%]">
-                          {Object.entries(IssueTypeName)
-                            .reverse()
-                            .map(([key, value]) => (
-                              <TouchableOpacity
-                                key={key}
-                                className="p-4 border-b border-neutral-800"
-                                onPress={() => {
-                                  setIssueType(key as unknown as IssueType);
-                                  setIsIssueTypeModalVisible(false);
-                                }}
-                              >
-                                <Text className="text-center">{value}</Text>
-                              </TouchableOpacity>
-                            ))}
-                        </View>
-                        <TouchableOpacity
-                          className="p-4 border-t border-neutral-800"
-                          onPress={() => setIsIssueTypeModalVisible(false)}
-                        >
-                          <Text className="text-center text-purple-400">
-                            Cancel
-                          </Text>
-                        </TouchableOpacity>
-                      </View>
-                    </TouchableOpacity>
-                  </Modal>
-                </View>
-              </View>
-
-              <Input
-                className="w-full"
-                placeholder="(optional) Describe the issue..."
-                value={issueMessage}
-                keyboardType="default"
-                returnKeyType="done"
-                autoCapitalize="none"
-                textContentType="none"
-                maxLength={254}
-                onChangeText={setIssueMessage}
-              />
-            </View>
-            <Button className="mt-auto" onPress={submitIssue} color="purple">
-              Submit
-            </Button>
-          </View>
-        </BottomSheetView>
-      </BottomSheetModal>
-    </View>
-  );
-};
-
-export default Page;

app/(auth)/(tabs)/(home,libraries,search)/livetv/guide.tsx

@@ -1,21 +1,13 @@
 import { ItemImage } from "@/components/common/ItemImage";
-import { Text } from "@/components/common/Text";
 import { HourHeader } from "@/components/livetv/HourHeader";
 import { LiveTVGuideRow } from "@/components/livetv/LiveTVGuideRow";
 import { TAB_HEIGHT } from "@/constants/Values";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { Ionicons } from "@expo/vector-icons";
 import { getLiveTvApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery } from "@tanstack/react-query";
 import { useAtom } from "jotai";
 import React, { useCallback, useMemo, useState } from "react";
-import {
-  Button,
-  Dimensions,
-  ScrollView,
-  TouchableOpacity,
-  View,
-} from "react-native";
+import { Button, Dimensions, ScrollView, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 const HOUR_HEIGHT = 30;
@@ -86,6 +78,8 @@ export default function page() {
 
   const screenWidth = Dimensions.get("window").width;
 
+  const memoizedChannels = useMemo(() => channels?.Items || [], [channels]);
+
   const [scrollX, setScrollX] = useState(0);
 
   const handleNextPage = useCallback(() => {
@@ -106,15 +100,24 @@ export default function page() {
         paddingRight: insets.right,
         paddingBottom: 16,
       }}
+      style={{
+        marginBottom: TAB_HEIGHT,
+      }}
     >
-      <PageButtons
-        currentPage={currentPage}
-        onPrevPage={handlePrevPage}
-        onNextPage={handleNextPage}
-        isNextDisabled={
-          !channels || (channels?.Items?.length || 0) < ITEMS_PER_PAGE
-        }
-      />
+      <View className="flex flex-row  bg-neutral-800 w-full items-end">
+        <Button
+          title="Previous"
+          onPress={handlePrevPage}
+          disabled={currentPage === 1}
+        />
+        <Button
+          title="Next"
+          onPress={handleNextPage}
+          disabled={
+            !channels || (channels?.Items?.length || 0) < ITEMS_PER_PAGE
+          }
+        />
+      </View>
 
       <View className="flex flex-row">
         <View className="flex flex-col w-[64px]">
@@ -163,57 +166,3 @@ export default function page() {
     </ScrollView>
   );
 }
-
-interface PageButtonsProps {
-  currentPage: number;
-  onPrevPage: () => void;
-  onNextPage: () => void;
-  isNextDisabled: boolean;
-}
-
-const PageButtons: React.FC<PageButtonsProps> = ({
-  currentPage,
-  onPrevPage,
-  onNextPage,
-  isNextDisabled,
-}) => {
-  return (
-    <View className="flex flex-row justify-between items-center bg-neutral-800 w-full px-4 py-2">
-      <TouchableOpacity
-        onPress={onPrevPage}
-        disabled={currentPage === 1}
-        className="flex flex-row items-center"
-      >
-        <Ionicons
-          name="chevron-back"
-          size={24}
-          color={currentPage === 1 ? "gray" : "white"}
-        />
-        <Text
-          className={`ml-1 ${
-            currentPage === 1 ? "text-gray-500" : "text-white"
-          }`}
-        >
-          Previous
-        </Text>
-      </TouchableOpacity>
-      <Text className="text-white">Page {currentPage}</Text>
-      <TouchableOpacity
-        onPress={onNextPage}
-        disabled={isNextDisabled}
-        className="flex flex-row items-center"
-      >
-        <Text
-          className={`mr-1 ${isNextDisabled ? "text-gray-500" : "text-white"}`}
-        >
-          Next
-        </Text>
-        <Ionicons
-          name="chevron-forward"
-          size={24}
-          color={isNextDisabled ? "gray" : "white"}
-        />
-      </TouchableOpacity>
-    </View>
-  );
-};

app/(auth)/(tabs)/(home,libraries,search)/livetv/programs.tsx

@@ -5,7 +5,10 @@ import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
 import { getLiveTvApi } from "@jellyfin/sdk/lib/utils/api";
 import { useAtom } from "jotai";
 import React from "react";
-import { ScrollView, View } from "react-native";
+import {
+  ScrollView,
+  View
+} from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 export default function page() {
@@ -24,6 +27,9 @@ export default function page() {
         paddingBottom: 16,
         paddingTop: 8,
       }}
+      style={{
+        marginBottom: TAB_HEIGHT,
+      }}
     >
       <View className="flex flex-col space-y-2">
         <ScrollingCollectionList

app/(auth)/(tabs)/(home,libraries,search)/series/[id].tsx

@@ -1,19 +1,21 @@
+import { Text } from "@/components/common/Text";
 import { ParallaxScrollView } from "@/components/ParallaxPage";
 import { NextUp } from "@/components/series/NextUp";
 import { SeasonPicker } from "@/components/series/SeasonPicker";
-import { SeriesHeader } from "@/components/series/SeriesHeader";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
 import { getLogoImageUrlById } from "@/utils/jellyfin/image/getLogoImageUrlById";
 import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
-import { Ionicons } from "@expo/vector-icons";
-import { getTvShowsApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery } from "@tanstack/react-query";
 import { Image } from "expo-image";
-import { useLocalSearchParams, useNavigation } from "expo-router";
+import {useLocalSearchParams, useNavigation} from "expo-router";
 import { useAtom } from "jotai";
-import React, { useEffect, useMemo } from "react";
+import React, {useEffect} from "react";
+import { useMemo } from "react";
 import { View } from "react-native";
+import {DownloadItems} from "@/components/DownloadItem";
+import {MaterialCommunityIcons} from "@expo/vector-icons";
+import {getTvShowsApi} from "@jellyfin/sdk/lib/utils/api";
 
 const page: React.FC = () => {
   const navigation = useNavigation();
@@ -58,7 +60,7 @@ const page: React.FC = () => {
     [item]
   );
 
-  const { data: allEpisodes, isLoading } = useQuery({
+  const {data: allEpisodes, isLoading} = useQuery({
     queryKey: ["AllEpisodes", item?.Id],
     queryFn: async () => {
       const res = await getTvShowsApi(api!).getEpisodes({
@@ -67,13 +69,34 @@ const page: React.FC = () => {
         enableUserData: true,
         fields: ["MediaSources", "MediaStreams", "Overview"],
       });
-      return res?.data.Items || [];
+      return res?.data.Items || []
     },
-    staleTime: 60,
-    enabled: !!api && !!user?.Id && !!item?.Id,
+    enabled: !!api && !!user?.Id && !!item?.Id
   });
 
-  if (!item || !backdropUrl) return null;
+  useEffect(() => {
+    navigation.setOptions({
+      headerRight: () => (
+        (!isLoading && allEpisodes && allEpisodes.length > 0) && (
+          <View className="flex flex-row items-center space-x-2">
+            <DownloadItems
+              items={allEpisodes || []}
+              MissingDownloadIconComponent={() => (
+                <MaterialCommunityIcons name="folder-download" size={24} color="white"/>
+              )}
+              DownloadedIconComponent={() => (
+                <MaterialCommunityIcons name="folder-check" size={26} color="#9333ea"/>
+              )}
+            />
+          </View>
+        )
+      )
+    })
+  }, [allEpisodes, isLoading]);
+
+  if (!item || !backdropUrl)
+    return null;
+
 
   return (
     <ParallaxScrollView
@@ -107,7 +130,10 @@ const page: React.FC = () => {
       }
     >
       <View className="flex flex-col pt-4">
-        <SeriesHeader item={item} />
+        <View className="px-4 py-4">
+          <Text className="text-3xl font-bold">{item?.Name}</Text>
+          <Text className="">{item?.Overview}</Text>
+        </View>
         <View className="mb-4">
           <NextUp seriesId={seriesId} />
         </View>

app/(auth)/(tabs)/(libraries)/[libraryId].tsx

@@ -1,5 +1,6 @@
 import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
 import { useLocalSearchParams, useNavigation } from "expo-router";
+import * as ScreenOrientation from "expo-screen-orientation";
 import { useAtom } from "jotai";
 import React, { useCallback, useEffect, useMemo } from "react";
 import { FlatList, useWindowDimensions, View } from "react-native";
@@ -11,6 +12,7 @@ import { ResetFiltersButton } from "@/components/filters/ResetFiltersButton";
 import { ItemCardText } from "@/components/ItemCardText";
 import { Loader } from "@/components/Loader";
 import { ItemPoster } from "@/components/posters/ItemPoster";
+import { useOrientation } from "@/hooks/useOrientation";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import {
   genreFilterAtom,
@@ -30,7 +32,6 @@ import {
 import {
   BaseItemDto,
   BaseItemDtoQueryResult,
-  BaseItemKind,
 } from "@jellyfin/sdk/lib/generated-client/models";
 import {
   getFilterApi,
@@ -39,7 +40,8 @@ import {
 } from "@jellyfin/sdk/lib/utils/api";
 import { FlashList } from "@shopify/flash-list";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { colletionTypeToItemType } from "@/utils/collectionTypeToItemType";
+
+const MemoizedTouchableItemRouter = React.memo(TouchableItemRouter);
 
 const Page = () => {
   const searchParams = useLocalSearchParams();
@@ -59,6 +61,8 @@ const Page = () => {
     sortOrderPreferenceAtom
   );
 
+  const { orientation } = useOrientation();
+
   useEffect(() => {
     const sop = getSortOrderPreference(libraryId, sortOrderPreference);
     if (sop) {
@@ -137,18 +141,6 @@ const Page = () => {
     }): Promise<BaseItemDtoQueryResult | null> => {
       if (!api || !library) return null;
 
-      let itemType: BaseItemKind | undefined;
-
-      // This fix makes sure to only return 1 type of items, if defined.
-      // This is because the underlying directory some times contains other types, and we don't want to show them.
-      if (library.CollectionType === "movies") {
-        itemType = "Movie";
-      } else if (library.CollectionType === "tvshows") {
-        itemType = "Series";
-      } else if (library.CollectionType === "boxsets") {
-        itemType = "BoxSet";
-      }
-
       const response = await getItemsApi(api).getItems({
         userId: user?.Id,
         parentId: libraryId,
@@ -157,14 +149,12 @@ const Page = () => {
         sortBy: [sortBy[0], "SortName", "ProductionYear"],
         sortOrder: [sortOrder[0]],
         enableImageTypes: ["Primary", "Backdrop", "Banner", "Thumb"],
-        // true is needed for merged versions
-        recursive: true,
+        recursive: false,
         imageTypeLimit: 1,
         fields: ["PrimaryImageAspectRatio", "SortName"],
         genres: selectedGenres,
         tags: selectedTags,
         years: selectedYears.map((year) => parseInt(year)),
-        includeItemTypes: itemType ? [itemType] : undefined,
       });
 
       return response.data || null;
@@ -237,7 +227,14 @@ const Page = () => {
       >
         <View
           style={{
-            alignSelf: "center",
+            alignSelf:
+              orientation === ScreenOrientation.OrientationLock.PORTRAIT_UP
+                ? index % nrOfCols === 0
+                  ? "flex-end"
+                  : (index + 1) % nrOfCols === 0
+                  ? "flex-start"
+                  : "center"
+                : "center",
             width: "89%",
           }}
         >

app/(auth)/(tabs)/(libraries)/_layout.tsx

@@ -1,44 +1,12 @@
-import { Text } from "@/components/common/Text";
 import { nestedTabPageScreenOptions } from "@/components/stacks/NestedTabPageStack";
 import { useSettings } from "@/utils/atoms/settings";
 import { Ionicons } from "@expo/vector-icons";
 import { Stack } from "expo-router";
-import { useState } from "react";
-import { Modal, Platform, TouchableOpacity, View } from "react-native";
+import { Platform } from "react-native";
+import * as DropdownMenu from "zeego/dropdown-menu";
 
 export default function IndexLayout() {
   const [settings, updateSettings] = useSettings();
-  const [isMenuVisible, setIsMenuVisible] = useState(false);
-  const [activeSubmenu, setActiveSubmenu] = useState<string | null>(null);
-
-  const MenuItem = ({
-    label,
-    selected,
-    onPress,
-    disabled = false,
-  }: {
-    label: string;
-    selected?: boolean;
-    onPress: () => void;
-    disabled?: boolean;
-  }) => (
-    <TouchableOpacity
-      className={`p-4 border-b border-neutral-800 flex-row items-center justify-between ${
-        disabled ? "opacity-50" : ""
-      }`}
-      onPress={onPress}
-      disabled={disabled}
-    >
-      <Text className="text-base">{label}</Text>
-      {selected && <Ionicons name="checkmark" size={24} color="white" />}
-    </TouchableOpacity>
-  );
-
-  const MenuSection = ({ title }: { title: string }) => (
-    <View className="p-4 border-b border-neutral-800 bg-neutral-800/30">
-      <Text className="text-sm opacity-50 font-medium">{title}</Text>
-    </View>
-  );
 
   if (!settings?.libraryOptions) return null;
 
@@ -54,167 +22,163 @@ export default function IndexLayout() {
           headerTransparent: Platform.OS === "ios" ? true : false,
           headerShadowVisible: false,
           headerRight: () => (
-            <Modal
-              visible={isMenuVisible}
-              transparent
-              animationType="slide"
-              onRequestClose={() => {
-                setIsMenuVisible(false);
-                setActiveSubmenu(null);
-              }}
-            >
-              <TouchableOpacity
-                className="flex-1 bg-black/50"
-                activeOpacity={1}
-                onPress={() => {
-                  setIsMenuVisible(false);
-                  setActiveSubmenu(null);
-                }}
+            <DropdownMenu.Root>
+              <DropdownMenu.Trigger>
+                <Ionicons
+                  name="ellipsis-horizontal-outline"
+                  size={24}
+                  color="white"
+                />
+              </DropdownMenu.Trigger>
+              <DropdownMenu.Content
+                align={"end"}
+                alignOffset={-10}
+                avoidCollisions={false}
+                collisionPadding={0}
+                loop={false}
+                side={"bottom"}
+                sideOffset={10}
               >
-                <View className="mt-auto bg-neutral-900 rounded-t-xl">
-                  {!activeSubmenu ? (
-                    <>
-                      <MenuSection title="Display" />
-                      <MenuItem
-                        label="Display"
-                        onPress={() => setActiveSubmenu("display")}
-                      />
-                      <MenuItem
-                        label="Image style"
-                        onPress={() => setActiveSubmenu("imageStyle")}
-                      />
-                      <MenuItem
-                        label="Show titles"
-                        selected={settings.libraryOptions.showTitles}
-                        disabled={
-                          settings.libraryOptions.imageStyle === "poster"
-                        }
-                        onPress={() => {
-                          if (settings.libraryOptions.imageStyle === "poster")
-                            return;
-                          updateSettings({
-                            libraryOptions: {
-                              ...settings.libraryOptions,
-                              showTitles: !settings.libraryOptions.showTitles,
-                            },
-                          });
-                        }}
-                      />
-                      <MenuItem
-                        label="Show stats"
-                        selected={settings.libraryOptions.showStats}
-                        onPress={() => {
-                          updateSettings({
-                            libraryOptions: {
-                              ...settings.libraryOptions,
-                              showStats: !settings.libraryOptions.showStats,
-                            },
-                          });
-                        }}
-                      />
-                    </>
-                  ) : activeSubmenu === "display" ? (
-                    <>
-                      <View className="p-4 border-b border-neutral-800 flex-row items-center">
-                        <TouchableOpacity
-                          onPress={() => setActiveSubmenu(null)}
-                        >
-                          <Ionicons
-                            name="chevron-back"
-                            size={24}
-                            color="white"
-                          />
-                        </TouchableOpacity>
-                        <Text className="text-lg font-bold ml-2">Display</Text>
-                      </View>
-                      <MenuItem
-                        label="Row"
-                        selected={settings.libraryOptions.display === "row"}
-                        onPress={() => {
+                <DropdownMenu.Label>Display</DropdownMenu.Label>
+                <DropdownMenu.Group key="display-group">
+                  <DropdownMenu.Sub>
+                    <DropdownMenu.SubTrigger key="image-style-trigger">
+                      Display
+                    </DropdownMenu.SubTrigger>
+                    <DropdownMenu.SubContent
+                      alignOffset={-10}
+                      avoidCollisions={true}
+                      collisionPadding={0}
+                      loop={true}
+                      sideOffset={10}
+                    >
+                      <DropdownMenu.CheckboxItem
+                        key="display-option-1"
+                        value={settings.libraryOptions.display === "row"}
+                        onValueChange={() =>
                           updateSettings({
                             libraryOptions: {
                               ...settings.libraryOptions,
                               display: "row",
                             },
-                          });
-                          setActiveSubmenu(null);
-                        }}
-                      />
-                      <MenuItem
-                        label="List"
-                        selected={settings.libraryOptions.display === "list"}
-                        onPress={() => {
+                          })
+                        }
+                      >
+                        <DropdownMenu.ItemIndicator />
+                        <DropdownMenu.ItemTitle key="display-title-1">
+                          Row
+                        </DropdownMenu.ItemTitle>
+                      </DropdownMenu.CheckboxItem>
+                      <DropdownMenu.CheckboxItem
+                        key="display-option-2"
+                        value={settings.libraryOptions.display === "list"}
+                        onValueChange={() =>
                           updateSettings({
                             libraryOptions: {
                               ...settings.libraryOptions,
                               display: "list",
                             },
-                          });
-                          setActiveSubmenu(null);
-                        }}
-                      />
-                    </>
-                  ) : activeSubmenu === "imageStyle" ? (
-                    <>
-                      <View className="p-4 border-b border-neutral-800 flex-row items-center">
-                        <TouchableOpacity
-                          onPress={() => setActiveSubmenu(null)}
-                        >
-                          <Ionicons
-                            name="chevron-back"
-                            size={24}
-                            color="white"
-                          />
-                        </TouchableOpacity>
-                        <Text className="text-lg font-bold ml-2">
-                          Image Style
-                        </Text>
-                      </View>
-                      <MenuItem
-                        label="Poster"
-                        selected={
-                          settings.libraryOptions.imageStyle === "poster"
+                          })
                         }
-                        onPress={() => {
+                      >
+                        <DropdownMenu.ItemIndicator />
+                        <DropdownMenu.ItemTitle key="display-title-2">
+                          List
+                        </DropdownMenu.ItemTitle>
+                      </DropdownMenu.CheckboxItem>
+                    </DropdownMenu.SubContent>
+                  </DropdownMenu.Sub>
+                  <DropdownMenu.Sub>
+                    <DropdownMenu.SubTrigger key="image-style-trigger">
+                      Image style
+                    </DropdownMenu.SubTrigger>
+                    <DropdownMenu.SubContent
+                      alignOffset={-10}
+                      avoidCollisions={true}
+                      collisionPadding={0}
+                      loop={true}
+                      sideOffset={10}
+                    >
+                      <DropdownMenu.CheckboxItem
+                        key="poster-option"
+                        value={settings.libraryOptions.imageStyle === "poster"}
+                        onValueChange={() =>
                           updateSettings({
                             libraryOptions: {
                               ...settings.libraryOptions,
                               imageStyle: "poster",
                             },
-                          });
-                          setActiveSubmenu(null);
-                        }}
-                      />
-                      <MenuItem
-                        label="Cover"
-                        selected={
-                          settings.libraryOptions.imageStyle === "cover"
+                          })
                         }
-                        onPress={() => {
+                      >
+                        <DropdownMenu.ItemIndicator />
+                        <DropdownMenu.ItemTitle key="poster-title">
+                          Poster
+                        </DropdownMenu.ItemTitle>
+                      </DropdownMenu.CheckboxItem>
+                      <DropdownMenu.CheckboxItem
+                        key="cover-option"
+                        value={settings.libraryOptions.imageStyle === "cover"}
+                        onValueChange={() =>
                           updateSettings({
                             libraryOptions: {
                               ...settings.libraryOptions,
                               imageStyle: "cover",
                             },
-                          });
-                          setActiveSubmenu(null);
-                        }}
-                      />
-                    </>
-                  ) : null}
-
-                  <TouchableOpacity
-                    className="p-4 border-t border-neutral-800"
-                    onPress={() => {
-                      setIsMenuVisible(false);
-                      setActiveSubmenu(null);
+                          })
+                        }
+                      >
+                        <DropdownMenu.ItemIndicator />
+                        <DropdownMenu.ItemTitle key="cover-title">
+                          Cover
+                        </DropdownMenu.ItemTitle>
+                      </DropdownMenu.CheckboxItem>
+                    </DropdownMenu.SubContent>
+                  </DropdownMenu.Sub>
+                </DropdownMenu.Group>
+                <DropdownMenu.Group key="show-titles-group">
+                  <DropdownMenu.CheckboxItem
+                    disabled={settings.libraryOptions.imageStyle === "poster"}
+                    key="show-titles-option"
+                    value={settings.libraryOptions.showTitles}
+                    onValueChange={(newValue) => {
+                      if (settings.libraryOptions.imageStyle === "poster")
+                        return;
+                      updateSettings({
+                        libraryOptions: {
+                          ...settings.libraryOptions,
+                          showTitles: newValue === "on" ? true : false,
+                        },
+                      });
                     }}
                   >
-                    <Text className="text-center text-purple-400">Done</Text>
-                  </TouchableOpacity>
-                </View>
-              </TouchableOpacity>
-            </Modal>
+                    <DropdownMenu.ItemIndicator />
+                    <DropdownMenu.ItemTitle key="show-titles-title">
+                      Show titles
+                    </DropdownMenu.ItemTitle>
+                  </DropdownMenu.CheckboxItem>
+                  <DropdownMenu.CheckboxItem
+                    key="show-stats-option"
+                    value={settings.libraryOptions.showStats}
+                    onValueChange={(newValue) => {
+                      updateSettings({
+                        libraryOptions: {
+                          ...settings.libraryOptions,
+                          showStats: newValue === "on" ? true : false,
+                        },
+                      });
+                    }}
+                  >
+                    <DropdownMenu.ItemIndicator />
+                    <DropdownMenu.ItemTitle key="show-stats-title">
+                      Show stats
+                    </DropdownMenu.ItemTitle>
+                  </DropdownMenu.CheckboxItem>
+                </DropdownMenu.Group>
+
+                <DropdownMenu.Separator />
+              </DropdownMenu.Content>
+            </DropdownMenu.Root>
           ),
         }}
       />

app/(auth)/(tabs)/(search)/_layout.tsx

@@ -1,4 +1,4 @@
-import {commonScreenOptions, nestedTabPageScreenOptions} from "@/components/stacks/NestedTabPageStack";
+import { nestedTabPageScreenOptions } from "@/components/stacks/NestedTabPageStack";
 import { Stack } from "expo-router";
 import { Platform } from "react-native";
 
@@ -29,10 +29,6 @@ export default function SearchLayout() {
           headerShadowVisible: false,
         }}
       />
-      <Stack.Screen
-        name="jellyseerr/page"
-        options={commonScreenOptions}
-      />
     </Stack>
   );
 }

app/(auth)/(tabs)/(search)/index.tsx

@@ -20,7 +20,6 @@ import axios from "axios";
 import { Href, router, useLocalSearchParams, useNavigation } from "expo-router";
 import { useAtom } from "jotai";
 import React, {
-  PropsWithChildren,
   useCallback,
   useEffect,
   useLayoutEffect,
@@ -30,15 +29,6 @@ import React, {
 import { Platform, ScrollView, TouchableOpacity, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useDebounce } from "use-debounce";
-import { useJellyseerr } from "@/hooks/useJellyseerr";
-import { MovieResult, TvResult } from "@/utils/jellyseerr/server/models/Search";
-import { MediaType } from "@/utils/jellyseerr/server/constants/media";
-import JellyseerrPoster from "@/components/posters/JellyseerrPoster";
-import { Tag } from "@/components/GenreTags";
-import DiscoverSlide from "@/components/jellyseerr/DiscoverSlide";
-import { sortBy } from "lodash";
-
-type SearchType = "Library" | "Discover";
 
 const exampleSearches = [
   "Lord of the rings",
@@ -55,7 +45,6 @@ export default function search() {
 
   const { q, prev } = params as { q: string; prev: Href<string> };
 
-  const [searchType, setSearchType] = useState<SearchType>("Library");
   const [search, setSearch] = useState<string>("");
 
   const [debouncedSearch] = useDebounce(search, 500);
@@ -64,7 +53,6 @@ export default function search() {
   const [user] = useAtom(userAtom);
 
   const [settings] = useSettings();
-  const { jellyseerrApi } = useJellyseerr();
 
   const searchEngine = useMemo(() => {
     return settings?.searchEngine || "Jellyfin";
@@ -144,51 +132,9 @@ export default function search() {
         query: debouncedSearch,
         types: ["Movie"],
       }),
-    enabled: searchType === "Library" && debouncedSearch.length > 0,
+    enabled: debouncedSearch.length > 0,
   });
 
-  const { data: jellyseerrResults, isFetching: j1 } = useQuery({
-    queryKey: ["search", "jellyseerrResults", debouncedSearch],
-    queryFn: async () => {
-      const response = await jellyseerrApi?.search({
-        query: new URLSearchParams(debouncedSearch).toString(),
-        page: 1, // todo: maybe rework page & page-size if first results are not enough...
-        language: "en",
-      });
-
-      return response?.results;
-    },
-    enabled:
-      !!jellyseerrApi &&
-      searchType === "Discover" &&
-      debouncedSearch.length > 0,
-  });
-
-  const { data: jellyseerrDiscoverSettings, isFetching: j2 } = useQuery({
-    queryKey: ["search", "jellyseerrDiscoverSettings", debouncedSearch],
-    queryFn: async () => jellyseerrApi?.discoverSettings(),
-    enabled:
-      !!jellyseerrApi &&
-      searchType === "Discover" &&
-      debouncedSearch.length == 0,
-  });
-
-  const jellyseerrMovieResults: MovieResult[] | undefined = useMemo(
-    () =>
-      jellyseerrResults?.filter(
-        (r) => r.mediaType === MediaType.MOVIE
-      ) as MovieResult[],
-    [jellyseerrResults]
-  );
-
-  const jellyseerrTvResults: TvResult[] | undefined = useMemo(
-    () =>
-      jellyseerrResults?.filter(
-        (r) => r.mediaType === MediaType.TV
-      ) as TvResult[],
-    [jellyseerrResults]
-  );
-
   const { data: series, isFetching: l2 } = useQuery({
     queryKey: ["search", "series", debouncedSearch],
     queryFn: () =>
@@ -196,7 +142,7 @@ export default function search() {
         query: debouncedSearch,
         types: ["Series"],
       }),
-    enabled: searchType === "Library" && debouncedSearch.length > 0,
+    enabled: debouncedSearch.length > 0,
   });
 
   const { data: episodes, isFetching: l3 } = useQuery({
@@ -206,7 +152,7 @@ export default function search() {
         query: debouncedSearch,
         types: ["Episode"],
       }),
-    enabled: searchType === "Library" && debouncedSearch.length > 0,
+    enabled: debouncedSearch.length > 0,
   });
 
   const { data: collections, isFetching: l7 } = useQuery({
@@ -216,7 +162,7 @@ export default function search() {
         query: debouncedSearch,
         types: ["BoxSet"],
       }),
-    enabled: searchType === "Library" && debouncedSearch.length > 0,
+    enabled: debouncedSearch.length > 0,
   });
 
   const { data: actors, isFetching: l8 } = useQuery({
@@ -226,7 +172,7 @@ export default function search() {
         query: debouncedSearch,
         types: ["Person"],
       }),
-    enabled: searchType === "Library" && debouncedSearch.length > 0,
+    enabled: debouncedSearch.length > 0,
   });
 
   const { data: artists, isFetching: l4 } = useQuery({
@@ -236,7 +182,7 @@ export default function search() {
         query: debouncedSearch,
         types: ["MusicArtist"],
       }),
-    enabled: searchType === "Library" && debouncedSearch.length > 0,
+    enabled: debouncedSearch.length > 0,
   });
 
   const { data: albums, isFetching: l5 } = useQuery({
@@ -246,7 +192,7 @@ export default function search() {
         query: debouncedSearch,
         types: ["MusicAlbum"],
       }),
-    enabled: searchType === "Library" && debouncedSearch.length > 0,
+    enabled: debouncedSearch.length > 0,
   });
 
   const { data: songs, isFetching: l6 } = useQuery({
@@ -256,7 +202,7 @@ export default function search() {
         query: debouncedSearch,
         types: ["Audio"],
       }),
-    enabled: searchType === "Library" && debouncedSearch.length > 0,
+    enabled: debouncedSearch.length > 0,
   });
 
   const noResults = useMemo(() => {
@@ -268,25 +214,13 @@ export default function search() {
       episodes?.length ||
       series?.length ||
       collections?.length ||
-      actors?.length ||
-      jellyseerrMovieResults?.length ||
-      jellyseerrTvResults?.length
+      actors?.length
     );
-  }, [
-    artists,
-    episodes,
-    albums,
-    songs,
-    movies,
-    series,
-    collections,
-    actors,
-    jellyseerrResults,
-  ]);
+  }, [artists, episodes, albums, songs, movies, series, collections, actors]);
 
   const loading = useMemo(() => {
-    return l1 || l2 || l3 || l4 || l5 || l6 || l7 || l8 || j1 || j2;
-  }, [l1, l2, l3, l4, l5, l6, l7, l8, j1, j2]);
+    return l1 || l2 || l3 || l4 || l5 || l6 || l7 || l8;
+  }, [l1, l2, l3, l4, l5, l6, l7, l8]);
 
   return (
     <>
@@ -311,28 +245,6 @@ export default function search() {
               />
             </View>
           )}
-          {jellyseerrApi && (
-            <View className="flex flex-row flex-wrap space-x-2 px-4 mb-2">
-              <TouchableOpacity onPress={() => setSearchType("Library")}>
-                <Tag
-                  text="Library"
-                  textClass="p-1"
-                  className={
-                    searchType === "Library" ? "bg-neutral-600" : undefined
-                  }
-                />
-              </TouchableOpacity>
-              <TouchableOpacity onPress={() => setSearchType("Discover")}>
-                <Tag
-                  text="Discover"
-                  textClass="p-1"
-                  className={
-                    searchType === "Discover" ? "bg-neutral-600" : undefined
-                  }
-                />
-              </TouchableOpacity>
-            </View>
-          )}
           {!!q && (
             <View className="px-4 flex flex-col space-y-2">
               <Text className="text-neutral-500 ">
@@ -340,153 +252,130 @@ export default function search() {
               </Text>
             </View>
           )}
-          {searchType === "Library" && (
-            <>
-              <SearchItemWrapper
-                header="Movies"
-                ids={movies?.map((m) => m.Id!)}
-                renderItem={(item: BaseItemDto) => (
-                  <TouchableItemRouter
-                    key={item.Id}
-                    className="flex flex-col w-28 mr-2"
-                    item={item}
-                  >
-                    <MoviePoster item={item} key={item.Id} />
-                    <Text numberOfLines={2} className="mt-2">
-                      {item.Name}
-                    </Text>
-                    <Text className="opacity-50 text-xs">
-                      {item.ProductionYear}
-                    </Text>
-                  </TouchableItemRouter>
-                )}
-              />
-              <SearchItemWrapper
-                ids={series?.map((m) => m.Id!)}
-                header="Series"
-                renderItem={(item: BaseItemDto) => (
-                  <TouchableItemRouter
-                    key={item.Id}
-                    item={item}
-                    className="flex flex-col w-28 mr-2"
-                  >
-                    <SeriesPoster item={item} key={item.Id} />
-                    <Text numberOfLines={2} className="mt-2">
-                      {item.Name}
-                    </Text>
-                    <Text className="opacity-50 text-xs">
-                      {item.ProductionYear}
-                    </Text>
-                  </TouchableItemRouter>
-                )}
-              />
-              <SearchItemWrapper
-                ids={episodes?.map((m) => m.Id!)}
-                header="Episodes"
-                renderItem={(item: BaseItemDto) => (
-                  <TouchableItemRouter
-                    item={item}
-                    key={item.Id}
-                    className="flex flex-col w-44 mr-2"
-                  >
-                    <ContinueWatchingPoster item={item} />
-                    <ItemCardText item={item} />
-                  </TouchableItemRouter>
-                )}
-              />
-              <SearchItemWrapper
-                ids={collections?.map((m) => m.Id!)}
-                header="Collections"
-                renderItem={(item: BaseItemDto) => (
-                  <TouchableItemRouter
-                    key={item.Id}
-                    item={item}
-                    className="flex flex-col w-28 mr-2"
-                  >
-                    <MoviePoster item={item} key={item.Id} />
-                    <Text numberOfLines={2} className="mt-2">
-                      {item.Name}
-                    </Text>
-                  </TouchableItemRouter>
-                )}
-              />
-              <SearchItemWrapper
-                ids={actors?.map((m) => m.Id!)}
-                header="Actors"
-                renderItem={(item: BaseItemDto) => (
-                  <TouchableItemRouter
-                    item={item}
-                    key={item.Id}
-                    className="flex flex-col w-28 mr-2"
-                  >
-                    <MoviePoster item={item} />
-                    <ItemCardText item={item} />
-                  </TouchableItemRouter>
-                )}
-              />
-              <SearchItemWrapper
-                ids={artists?.map((m) => m.Id!)}
-                header="Artists"
-                renderItem={(item: BaseItemDto) => (
-                  <TouchableItemRouter
-                    item={item}
-                    key={item.Id}
-                    className="flex flex-col w-28 mr-2"
-                  >
-                    <AlbumCover id={item.Id} />
-                    <ItemCardText item={item} />
-                  </TouchableItemRouter>
-                )}
-              />
-              <SearchItemWrapper
-                ids={albums?.map((m) => m.Id!)}
-                header="Albums"
-                renderItem={(item: BaseItemDto) => (
-                  <TouchableItemRouter
-                    item={item}
-                    key={item.Id}
-                    className="flex flex-col w-28 mr-2"
-                  >
-                    <AlbumCover id={item.Id} />
-                    <ItemCardText item={item} />
-                  </TouchableItemRouter>
-                )}
-              />
-              <SearchItemWrapper
-                ids={songs?.map((m) => m.Id!)}
-                header="Songs"
-                renderItem={(item: BaseItemDto) => (
-                  <TouchableItemRouter
-                    item={item}
-                    key={item.Id}
-                    className="flex flex-col w-28 mr-2"
-                  >
-                    <AlbumCover id={item.AlbumId} />
-                    <ItemCardText item={item} />
-                  </TouchableItemRouter>
-                )}
-              />
-            </>
-          )}
-          {searchType === "Discover" && (
-            <>
-              <SearchItemWrapper
-                header="Request Movies"
-                items={jellyseerrMovieResults}
-                renderItem={(item: MovieResult) => (
-                  <JellyseerrPoster item={item} key={item.id} />
-                )}
-              />
-              <SearchItemWrapper
-                header="Request Series"
-                items={jellyseerrTvResults}
-                renderItem={(item: TvResult) => (
-                  <JellyseerrPoster item={item} key={item.id} />
-                )}
-              />
-            </>
-          )}
-
+          <SearchItemWrapper
+            header="Movies"
+            ids={movies?.map((m) => m.Id!)}
+            renderItem={(item) => (
+              <TouchableItemRouter
+                key={item.Id}
+                className="flex flex-col w-28 mr-2"
+                item={item}
+              >
+                <MoviePoster item={item} key={item.Id} />
+                <Text numberOfLines={2} className="mt-2">
+                  {item.Name}
+                </Text>
+                <Text className="opacity-50 text-xs">
+                  {item.ProductionYear}
+                </Text>
+              </TouchableItemRouter>
+            )}
+          />
+          <SearchItemWrapper
+            ids={series?.map((m) => m.Id!)}
+            header="Series"
+            renderItem={(item) => (
+              <TouchableItemRouter
+                key={item.Id}
+                item={item}
+                className="flex flex-col w-28 mr-2"
+              >
+                <SeriesPoster item={item} key={item.Id} />
+                <Text numberOfLines={2} className="mt-2">
+                  {item.Name}
+                </Text>
+                <Text className="opacity-50 text-xs">
+                  {item.ProductionYear}
+                </Text>
+              </TouchableItemRouter>
+            )}
+          />
+          <SearchItemWrapper
+            ids={episodes?.map((m) => m.Id!)}
+            header="Episodes"
+            renderItem={(item) => (
+              <TouchableItemRouter
+                item={item}
+                key={item.Id}
+                className="flex flex-col w-44 mr-2"
+              >
+                <ContinueWatchingPoster item={item} />
+                <ItemCardText item={item} />
+              </TouchableItemRouter>
+            )}
+          />
+          <SearchItemWrapper
+            ids={collections?.map((m) => m.Id!)}
+            header="Collections"
+            renderItem={(item) => (
+              <TouchableItemRouter
+                key={item.Id}
+                item={item}
+                className="flex flex-col w-28 mr-2"
+              >
+                <MoviePoster item={item} key={item.Id} />
+                <Text numberOfLines={2} className="mt-2">
+                  {item.Name}
+                </Text>
+              </TouchableItemRouter>
+            )}
+          />
+          <SearchItemWrapper
+            ids={actors?.map((m) => m.Id!)}
+            header="Actors"
+            renderItem={(item) => (
+              <TouchableItemRouter
+                item={item}
+                key={item.Id}
+                className="flex flex-col w-28 mr-2"
+              >
+                <MoviePoster item={item} />
+                <ItemCardText item={item} />
+              </TouchableItemRouter>
+            )}
+          />
+          <SearchItemWrapper
+            ids={artists?.map((m) => m.Id!)}
+            header="Artists"
+            renderItem={(item) => (
+              <TouchableItemRouter
+                item={item}
+                key={item.Id}
+                className="flex flex-col w-28 mr-2"
+              >
+                <AlbumCover id={item.Id} />
+                <ItemCardText item={item} />
+              </TouchableItemRouter>
+            )}
+          />
+          <SearchItemWrapper
+            ids={albums?.map((m) => m.Id!)}
+            header="Albums"
+            renderItem={(item) => (
+              <TouchableItemRouter
+                item={item}
+                key={item.Id}
+                className="flex flex-col w-28 mr-2"
+              >
+                <AlbumCover id={item.Id} />
+                <ItemCardText item={item} />
+              </TouchableItemRouter>
+            )}
+          />
+          <SearchItemWrapper
+            ids={songs?.map((m) => m.Id!)}
+            header="Songs"
+            renderItem={(item) => (
+              <TouchableItemRouter
+                item={item}
+                key={item.Id}
+                className="flex flex-col w-28 mr-2"
+              >
+                <AlbumCover id={item.AlbumId} />
+                <ItemCardText item={item} />
+              </TouchableItemRouter>
+            )}
+          />
           {loading ? (
             <View className="mt-4 flex justify-center items-center">
               <Loader />
@@ -500,7 +389,7 @@ export default function search() {
                 "{debouncedSearch}"
               </Text>
             </View>
-          ) : debouncedSearch.length === 0 && searchType === "Library" ? (
+          ) : debouncedSearch.length === 0 ? (
             <View className="mt-4 flex flex-col items-center space-y-2">
               {exampleSearches.map((e) => (
                 <TouchableOpacity
@@ -512,15 +401,6 @@ export default function search() {
                 </TouchableOpacity>
               ))}
             </View>
-          ) : debouncedSearch.length === 0 && searchType === "Discover" ? (
-            <View className="flex flex-col px-4">
-              {sortBy?.(
-                jellyseerrDiscoverSettings?.filter((s) => s.enabled),
-                "order"
-              ).map((slide) => (
-                <DiscoverSlide key={slide.id} slide={slide} />
-              ))}
-            </View>
           ) : null}
         </View>
       </ScrollView>
@@ -528,19 +408,13 @@ export default function search() {
   );
 }
 
-type Props<T> = {
+type Props = {
   ids?: string[] | null;
-  items?: T[];
-  renderItem: (item: any) => React.ReactNode;
+  renderItem: (item: BaseItemDto) => React.ReactNode;
   header?: string;
 };
 
-const SearchItemWrapper = <T extends unknown>({
-  ids,
-  items,
-  renderItem,
-  header,
-}: PropsWithChildren<Props<T>>) => {
+const SearchItemWrapper: React.FC<Props> = ({ ids, renderItem, header }) => {
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
 
@@ -570,7 +444,7 @@ const SearchItemWrapper = <T extends unknown>({
     staleTime: Infinity,
   });
 
-  if (!data && (!items || items.length === 0)) return null;
+  if (!data) return null;
 
   return (
     <>
@@ -580,11 +454,7 @@ const SearchItemWrapper = <T extends unknown>({
         className="px-4 mb-2"
         showsHorizontalScrollIndicator={false}
       >
-        {data && data?.length > 0
-          ? data.map((item) => renderItem(item))
-          : items && items?.length > 0
-          ? items.map((i) => renderItem(i))
-          : undefined}
+        {data.map((item) => renderItem(item))}
       </ScrollView>
     </>
   );

app/(auth)/(tabs)/_layout.tsx

@@ -73,6 +73,18 @@ export default function TabLayout() {
                 : () => ({ sfSymbol: "rectangle.stack" }),
           }}
         />
+        <NativeTabs.Screen
+          name="(custom-links)"
+          options={{
+            title: "Custom Links",
+            // @ts-expect-error
+            tabBarItemHidden: settings?.showCustomMenuLinks ? false : true,
+            tabBarIcon:
+              Platform.OS == "android"
+                ? () => require("@/assets/icons/list.png")
+                : () => ({ sfSymbol: "list.dash" }),
+          }}
+        />
       </NativeTabs>
     </>
   );

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

@@ -2,6 +2,9 @@ import { BITRATES } from "@/components/BitrateSelector";
 import { Text } from "@/components/common/Text";
 import { Loader } from "@/components/Loader";
 import { Controls } from "@/components/video-player/controls/Controls";
+import { getDownloadedFileUrl } from "@/hooks/useDownloadedFileOpener";
+import { useOrientation } from "@/hooks/useOrientation";
+import { useOrientationSettings } from "@/hooks/useOrientationSettings";
 import { useInvalidatePlaybackProgressCache } from "@/hooks/useRevalidatePlaybackProgressCache";
 import { useWebSocket } from "@/hooks/useWebsockets";
 import { VlcPlayerView } from "@/modules/vlc-player";
@@ -10,8 +13,8 @@ import {
   ProgressUpdatePayload,
   VlcPlayerViewRef,
 } from "@/modules/vlc-player/src/VlcPlayer.types";
+import { useDownload } from "@/providers/DownloadProvider";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { useSettings } from "@/utils/atoms/settings";
 import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
 import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
 import { writeToLog } from "@/utils/log";
@@ -24,17 +27,26 @@ import {
   getUserLibraryApi,
 } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery } from "@tanstack/react-query";
+import * as Haptics from "expo-haptics";
 import { useFocusEffect, useGlobalSearchParams } from "expo-router";
 import { useAtomValue } from "jotai";
 import React, {
   useCallback,
-  useEffect,
   useMemo,
   useRef,
   useState,
+  useEffect,
 } from "react";
-import { Alert, Platform, View } from "react-native";
+import {
+  Alert,
+  BackHandler,
+  View,
+  AppState,
+  AppStateStatus,
+} from "react-native";
 import { useSharedValue } from "react-native-reanimated";
+import settings from "../(tabs)/(home)/settings";
+import { useSettings } from "@/utils/atoms/settings";
 
 export default function page() {
   const videoRef = useRef<VlcPlayerViewRef>(null);
@@ -52,10 +64,12 @@ export default function page() {
   const isSeeking = useSharedValue(false);
   const cacheProgress = useSharedValue(0);
 
+  const { getDownloadedItem } = useDownload();
   const revalidateProgressCache = useInvalidatePlaybackProgressCache();
 
   const setShowControls = useCallback((show: boolean) => {
     _setShowControls(show);
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
   }, []);
 
   const {
@@ -64,14 +78,17 @@ export default function page() {
     subtitleIndex: subtitleIndexStr,
     mediaSourceId,
     bitrateValue: bitrateValueStr,
+    offline: offlineStr,
   } = useGlobalSearchParams<{
     itemId: string;
     audioIndex: string;
     subtitleIndex: string;
     mediaSourceId: string;
     bitrateValue: string;
+    offline: string;
   }>();
   const [settings] = useSettings();
+  const offline = offlineStr === "true";
 
   const audioIndex = audioIndexStr ? parseInt(audioIndexStr, 10) : undefined;
   const subtitleIndex = subtitleIndexStr ? parseInt(subtitleIndexStr, 10) : -1;
@@ -86,6 +103,12 @@ export default function page() {
   } = useQuery({
     queryKey: ["item", itemId],
     queryFn: async () => {
+      console.log("Offline:", offline);
+      if (offline) {
+        const item = await getDownloadedItem(itemId);
+        if (item) return item.item;
+      }
+
       const res = await getUserLibraryApi(api!).getItem({
         itemId,
         userId: user?.Id,
@@ -102,8 +125,30 @@ export default function page() {
     isLoading: isLoadingStreamUrl,
     isError: isErrorStreamUrl,
   } = useQuery({
-    queryKey: ["stream-url", itemId, mediaSourceId, bitrateValue],
+    queryKey: [
+      "stream-url",
+      itemId,
+      audioIndex,
+      subtitleIndex,
+      mediaSourceId,
+      bitrateValue,
+    ],
     queryFn: async () => {
+      console.log("Offline:", offline);
+      if (offline) {
+        const data = await getDownloadedItem(itemId);
+        if (!data?.mediaSource) return null;
+
+        const url = await getDownloadedFileUrl(data.item.Id!);
+
+        if (item)
+          return {
+            mediaSource: data.mediaSource,
+            url,
+            sessionId: undefined,
+          };
+      }
+
       const res = await getStreamUrl({
         api,
         item,
@@ -138,10 +183,11 @@ export default function page() {
   const togglePlay = useCallback(async () => {
     if (!api) return;
 
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
     if (isPlaying) {
       await videoRef.current?.pause();
 
-      if (stream) {
+      if (!offline && stream) {
         await getPlaystateApi(api).onPlaybackProgress({
           itemId: item?.Id!,
           audioStreamIndex: audioIndex ? audioIndex : undefined,
@@ -159,7 +205,7 @@ export default function page() {
       console.log("Actually marked as paused");
     } else {
       videoRef.current?.play();
-      if (stream) {
+      if (!offline && stream) {
         await getPlaystateApi(api).onPlaybackProgress({
           itemId: item?.Id!,
           audioStreamIndex: audioIndex ? audioIndex : undefined,
@@ -183,10 +229,13 @@ export default function page() {
     audioIndex,
     subtitleIndex,
     mediaSourceId,
+    offline,
     progress.value,
   ]);
 
   const reportPlaybackStopped = useCallback(async () => {
+    if (offline) return;
+
     const currentTimeInTicks = msToTicks(progress.value);
 
     await getPlaystateApi(api!).onPlaybackStopped({
@@ -205,8 +254,9 @@ export default function page() {
     videoRef.current?.stop();
   }, [videoRef, reportPlaybackStopped]);
 
-  // TODO: unused should remove.
   const reportPlaybackStart = useCallback(async () => {
+    if (offline) return;
+
     if (!stream) return;
     await getPlaystateApi(api!).onPlaybackStart({
       itemId: item?.Id!,
@@ -231,10 +281,14 @@ export default function page() {
 
       progress.value = currentTime;
 
+      if (offline) return;
+
       const currentTimeInTicks = msToTicks(currentTime);
 
       if (!item?.Id || !stream) return;
 
+      console.log("onProgress ~", currentTimeInTicks, isPlaying);
+
       await getPlaystateApi(api!).onPlaybackProgress({
         itemId: item.Id,
         audioStreamIndex: audioIndex ? audioIndex : undefined,
@@ -246,13 +300,17 @@ export default function page() {
         playSessionId: stream.sessionId,
       });
     },
-    [item?.Id, isPlaying, api, isPlaybackStopped, audioIndex, subtitleIndex]
+    [item?.Id, isPlaying, api, isPlaybackStopped]
   );
 
+  useOrientation();
+  useOrientationSettings();
+
   useWebSocket({
     isPlaying: isPlaying,
     togglePlay: togglePlay,
     stopPlayback: stop,
+    offline,
   });
 
   const onPlaybackStateChanged = useCallback((e: PlaybackStatePayload) => {
@@ -277,6 +335,8 @@ export default function page() {
   }, []);
 
   const startPosition = useMemo(() => {
+    if (offline) return 0;
+
     return item?.UserData?.PlaybackPositionTicks
       ? ticksToSeconds(item.UserData.PlaybackPositionTicks)
       : 0;
@@ -291,6 +351,37 @@ export default function page() {
     }, [])
   );
 
+  const [appState, setAppState] = useState(AppState.currentState);
+
+  useEffect(() => {
+    const handleAppStateChange = (nextAppState: AppStateStatus) => {
+      if (appState.match(/inactive|background/) && nextAppState === "active") {
+        console.log("App has come to the foreground!");
+        // Handle app coming to the foreground
+      } else if (nextAppState.match(/inactive|background/)) {
+        console.log("App has gone to the background!");
+        // Handle app going to the background
+        if (videoRef.current && videoRef.current.pause) {
+          videoRef.current.pause();
+        }
+      }
+      setAppState(nextAppState);
+    };
+
+    // Use AppState.addEventListener and return a cleanup function
+    const subscription = AppState.addEventListener(
+      "change",
+      handleAppStateChange
+    );
+
+    return () => {
+      // Cleanup the event listener when the component is unmounted
+      subscription.remove();
+    };
+  }, [appState]);
+
+  // Preselection of audio and subtitle tracks.
+
   if (!settings) return null;
 
   let initOptions = [`--sub-text-scale=${settings.subtitleSize}`];
@@ -358,7 +449,7 @@ export default function page() {
           position: "relative",
           flexDirection: "column",
           justifyContent: "center",
-          opacity: showControls ? (Platform.OS === "android" ? 0.7 : 0.5) : 1,
+          opacity: showControls ? 0.5 : 1,
         }}
       >
         <VlcPlayerView
@@ -411,6 +502,7 @@ export default function page() {
           enableTrickplay={true}
           getAudioTracks={videoRef.current?.getAudioTracks}
           getSubtitleTracks={videoRef.current?.getSubtitleTracks}
+          offline={false}
           setSubtitleTrack={videoRef.current.setSubtitleTrack}
           setSubtitleURL={videoRef.current.setSubtitleURL}
           setAudioTrack={videoRef.current.setAudioTrack}

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

@@ -1,6 +1,8 @@
 import { Text } from "@/components/common/Text";
 import { Loader } from "@/components/Loader";
 import { Controls } from "@/components/video-player/controls/Controls";
+import { useOrientation } from "@/hooks/useOrientation";
+import { useOrientationSettings } from "@/hooks/useOrientationSettings";
 import { useWebSocket } from "@/hooks/useWebsockets";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
@@ -15,6 +17,7 @@ import {
   getUserLibraryApi,
 } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery } from "@tanstack/react-query";
+import * as Haptics from "expo-haptics";
 import { Image } from "expo-image";
 import { useFocusEffect, useLocalSearchParams } from "expo-router";
 import { useAtomValue } from "jotai";
@@ -121,6 +124,7 @@ export default function page() {
 
   const togglePlay = useCallback(
     async (ticks: number) => {
+      Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
       if (isPlaying) {
         videoRef.current?.pause();
         await getPlaystateApi(api!).onPlaybackProgress({
@@ -257,6 +261,9 @@ export default function page() {
     }, [play, stop])
   );
 
+  useOrientation();
+  useOrientationSettings();
+
   useWebSocket({
     isPlaying: isPlaying,
     pauseVideo: pause,

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

@@ -1,6 +1,8 @@
 import { Text } from "@/components/common/Text";
 import { Loader } from "@/components/Loader";
 import { Controls } from "@/components/video-player/controls/Controls";
+import { useOrientation } from "@/hooks/useOrientation";
+import { useOrientationSettings } from "@/hooks/useOrientationSettings";
 import { useInvalidatePlaybackProgressCache } from "@/hooks/useRevalidatePlaybackProgressCache";
 import { useWebSocket } from "@/hooks/useWebsockets";
 import { TrackInfo } from "@/modules/vlc-player";
@@ -18,6 +20,7 @@ import {
   getUserLibraryApi,
 } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery } from "@tanstack/react-query";
+import * as Haptics from "expo-haptics";
 import { useFocusEffect, useLocalSearchParams } from "expo-router";
 import { useAtomValue } from "jotai";
 import React, {
@@ -27,7 +30,7 @@ import React, {
   useRef,
   useState,
 } from "react";
-import { View } from "react-native";
+import { BackHandler, View } from "react-native";
 import { useSharedValue } from "react-native-reanimated";
 import Video, {
   OnProgressData,
@@ -35,7 +38,6 @@ import Video, {
   SelectedTrackType,
   VideoRef,
 } from "react-native-video";
-import { SubtitleHelper } from "@/utils/SubtitleHelper";
 
 const Player = () => {
   const api = useAtomValue(apiAtom);
@@ -51,10 +53,10 @@ const Player = () => {
   const [ignoreSafeAreas, setIgnoreSafeAreas] = useState(false);
   const [isPlaying, setIsPlaying] = useState(false);
   const [isBuffering, setIsBuffering] = useState(true);
-  const [isVideoLoaded, setIsVideoLoaded] = useState(false);
 
   const setShowControls = useCallback((show: boolean) => {
     _setShowControls(show);
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
   }, []);
 
   const progress = useSharedValue(0);
@@ -109,14 +111,19 @@ const Player = () => {
     staleTime: 0,
   });
 
-  // TODO: NEED TO FIND A WAY TO FROM SWITCHING TO IMAGE BASED TO TEXT BASED SUBTITLES, THERE IS A BUG.
-  // MOST LIKELY LIKELY NEED A MASSIVE REFACTOR.
   const {
     data: stream,
     isLoading: isLoadingStreamUrl,
     isError: isErrorStreamUrl,
   } = useQuery({
-    queryKey: ["stream-url", itemId, bitrateValue, mediaSourceId, audioIndex],
+    queryKey: [
+      "stream-url",
+      itemId,
+      audioIndex,
+      subtitleIndex,
+      bitrateValue,
+      mediaSourceId,
+    ],
 
     queryFn: async () => {
       if (!api) {
@@ -163,6 +170,7 @@ const Player = () => {
   const videoSource = useVideoSource(item, api, poster, stream?.url);
 
   const togglePlay = useCallback(async () => {
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
     if (isPlaying) {
       videoRef.current?.pause();
       await getPlaystateApi(api!).onPlaybackProgress({
@@ -255,13 +263,6 @@ const Player = () => {
       progress.value = ticks;
       cacheProgress.value = secondsToTicks(data.playableDuration);
 
-      console.log(
-        "onProgress ~",
-        ticks,
-        isPlaying,
-        `AUDIO index: ${audioIndex} SUB index" ${subtitleIndex}`
-      );
-
       // TODO: Use this when streaming with HLS url, but NOT when direct playing
       // TODO: since playable duration is always 0 then.
       setIsBuffering(data.playableDuration === 0);
@@ -294,10 +295,14 @@ const Player = () => {
     ]
   );
 
+  useOrientation();
+  useOrientationSettings();
+
   useWebSocket({
     isPlaying: isPlaying,
     togglePlay: togglePlay,
     stopPlayback: stop,
+    offline: false,
   });
 
   const [selectedTextTrack, setSelectedTextTrack] = useState<
@@ -319,25 +324,25 @@ const Player = () => {
     SelectedTrack | undefined
   >(undefined);
 
-  useEffect(() => {
-    if (selectedTextTrack === undefined) {
-      const subtitleHelper = new SubtitleHelper(
-        stream?.mediaSource.MediaStreams ?? []
-      );
-      const embeddedTrackIndex = subtitleHelper.getEmbeddedTrackIndex(
-        subtitleIndex!
-      );
+  // Set intial Subtitle Track.
+  // We will only select external tracks if they are are text based. Else it should be burned in already.
+  const textSubs =
+    stream?.mediaSource.MediaStreams?.filter(
+      (sub) => sub.Type === "Subtitle" && sub.IsTextSubtitleStream
+    ) || [];
 
-      // Most likely the subtitle is burned in.
-      if (embeddedTrackIndex === -1) return;
-      console.log(
-        "Setting selected text track",
-        subtitleIndex,
-        embeddedTrackIndex
-      );
+  const uniqueTextSubs = Array.from(
+    new Set(textSubs.map((sub) => sub.DisplayTitle))
+  ).map((title) => textSubs.find((sub) => sub.DisplayTitle === title));
+  const chosenSubtitleTrack = textSubs.find(
+    (sub) => sub.Index === subtitleIndex
+  );
+  useEffect(() => {
+    if (chosenSubtitleTrack && selectedTextTrack === undefined) {
+      console.log("Setting selected text track", chosenSubtitleTrack);
       setSelectedTextTrack({
         type: SelectedTrackType.INDEX,
-        value: embeddedTrackIndex,
+        value: uniqueTextSubs.indexOf(chosenSubtitleTrack),
       });
     }
   }, [embededTextTracks]);

app/(auth)/trailer/page.tsx

@@ -1,46 +0,0 @@
-import { useGlobalSearchParams } from "expo-router";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { Alert, Dimensions, View } from "react-native";
-import YoutubePlayer, { PLAYER_STATES } from "react-native-youtube-iframe";
-
-export default function page() {
-  const searchParams = useGlobalSearchParams();
-  console.log(searchParams);
-
-  const { url } = searchParams as { url: string };
-
-  const videoId = useMemo(() => {
-    return url.split("v=")[1];
-  }, [url]);
-
-  const [playing, setPlaying] = useState(false);
-
-  const onStateChange = useCallback((state: PLAYER_STATES) => {
-    if (state === "ended") {
-      setPlaying(false);
-      Alert.alert("video has finished playing!");
-    }
-  }, []);
-
-  const togglePlaying = useCallback(() => {
-    setPlaying((prev) => !prev);
-  }, []);
-
-  useEffect(() => {
-    togglePlaying();
-  }, []);
-
-  const screenWidth = Dimensions.get("screen").width;
-
-  return (
-    <View className="flex flex-col bg-black items-center justify-center h-full">
-      <YoutubePlayer
-        height={300}
-        play={playing}
-        videoId={videoId}
-        onChangeState={onStateChange}
-        width={screenWidth}
-      />
-    </View>
-  );
-}

app/_layout.tsx

@@ -1,19 +1,41 @@
-import "@/augmentations";
-import { JellyfinProvider } from "@/providers/JellyfinProvider";
+import { DownloadProvider } from "@/providers/DownloadProvider";
+import {
+  getOrSetDeviceId,
+  getTokenFromStorage,
+  JellyfinProvider,
+} from "@/providers/JellyfinProvider";
+import { JobQueueProvider } from "@/providers/JobQueueProvider";
 import { PlaySettingsProvider } from "@/providers/PlaySettingsProvider";
 import { WebSocketProvider } from "@/providers/WebSocketProvider";
-import { LogProvider } from "@/utils/log";
+import { orientationAtom } from "@/utils/atoms/orientation";
+import { Settings, useSettings } from "@/utils/atoms/settings";
+import { BACKGROUND_FETCH_TASK } from "@/utils/background-tasks";
+import { LogProvider, writeToLog } from "@/utils/log";
+import { storage } from "@/utils/mmkv";
+import { cancelJobById, getAllJobsByDeviceId } from "@/utils/optimize-server";
 import { ActionSheetProvider } from "@expo/react-native-action-sheet";
 import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+import {
+  checkForExistingDownloads,
+  completeHandler,
+  download,
+} from "@kesha-antonov/react-native-background-downloader";
 import { DarkTheme, ThemeProvider } from "@react-navigation/native";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import * as BackgroundFetch from "expo-background-fetch";
+import * as FileSystem from "expo-file-system";
 import { useFonts } from "expo-font";
 import { useKeepAwake } from "expo-keep-awake";
-import { Stack } from "expo-router";
+import * as Linking from "expo-linking";
+import * as Notifications from "expo-notifications";
+import { router, Stack } from "expo-router";
+import * as ScreenOrientation from "expo-screen-orientation";
 import * as SplashScreen from "expo-splash-screen";
-import { Provider as JotaiProvider } from "jotai";
-import { useEffect } from "react";
-import { Appearance } from "react-native";
+import * as TaskManager from "expo-task-manager";
+import { Provider as JotaiProvider, useAtom } from "jotai";
+import { useEffect, useRef } from "react";
+import { Appearance, AppState } from "react-native";
 import { SystemBars } from "react-native-edge-to-edge";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import "react-native-reanimated";
@@ -21,6 +43,170 @@ import { Toaster } from "sonner-native";
 
 SplashScreen.preventAutoHideAsync();
 
+Notifications.setNotificationHandler({
+  handleNotification: async () => ({
+    shouldShowAlert: true,
+    shouldPlaySound: true,
+    shouldSetBadge: false,
+  }),
+});
+
+function useNotificationObserver() {
+  useEffect(() => {
+    let isMounted = true;
+
+    function redirect(notification: Notifications.Notification) {
+      const url = notification.request.content.data?.url;
+      if (url) {
+        router.push(url);
+      }
+    }
+
+    Notifications.getLastNotificationResponseAsync().then((response) => {
+      if (!isMounted || !response?.notification) {
+        return;
+      }
+      redirect(response?.notification);
+    });
+
+    const subscription = Notifications.addNotificationResponseReceivedListener(
+      (response) => {
+        redirect(response.notification);
+      }
+    );
+
+    return () => {
+      isMounted = false;
+      subscription.remove();
+    };
+  }, []);
+}
+
+TaskManager.defineTask(BACKGROUND_FETCH_TASK, async () => {
+  console.log("TaskManager ~ trigger");
+
+  const now = Date.now();
+
+  const settingsData = storage.getString("settings");
+
+  if (!settingsData) return BackgroundFetch.BackgroundFetchResult.NoData;
+
+  const settings: Partial<Settings> = JSON.parse(settingsData);
+  const url = settings?.optimizedVersionsServerUrl;
+
+  if (!settings?.autoDownload || !url)
+    return BackgroundFetch.BackgroundFetchResult.NoData;
+
+  const token = getTokenFromStorage();
+  const deviceId = getOrSetDeviceId();
+  const baseDirectory = FileSystem.documentDirectory;
+
+  if (!token || !deviceId || !baseDirectory)
+    return BackgroundFetch.BackgroundFetchResult.NoData;
+
+  const jobs = await getAllJobsByDeviceId({
+    deviceId,
+    authHeader: token,
+    url,
+  });
+
+  console.log("TaskManager ~ Active jobs: ", jobs.length);
+
+  for (let job of jobs) {
+    if (job.status === "completed") {
+      const downloadUrl = url + "download/" + job.id;
+      const tasks = await checkForExistingDownloads();
+
+      if (tasks.find((task) => task.id === job.id)) {
+        console.log("TaskManager ~ Download already in progress: ", job.id);
+        continue;
+      }
+
+      download({
+        id: job.id,
+        url: downloadUrl,
+        destination: `${baseDirectory}${job.item.Id}.mp4`,
+        headers: {
+          Authorization: token,
+        },
+      })
+        .begin(() => {
+          console.log("TaskManager ~ Download started: ", job.id);
+        })
+        .done(() => {
+          console.log("TaskManager ~ Download completed: ", job.id);
+          saveDownloadedItemInfo(job.item);
+          completeHandler(job.id);
+          cancelJobById({
+            authHeader: token,
+            id: job.id,
+            url: url,
+          });
+          Notifications.scheduleNotificationAsync({
+            content: {
+              title: job.item.Name,
+              body: "Download completed",
+              data: {
+                url: `/downloads`,
+              },
+            },
+            trigger: null,
+          });
+        })
+        .error((error) => {
+          console.log("TaskManager ~ Download error: ", job.id, error);
+          completeHandler(job.id);
+          Notifications.scheduleNotificationAsync({
+            content: {
+              title: job.item.Name,
+              body: "Download failed",
+              data: {
+                url: `/downloads`,
+              },
+            },
+            trigger: null,
+          });
+        });
+    }
+  }
+
+  console.log(`Auto download started: ${new Date(now).toISOString()}`);
+
+  // Be sure to return the successful result type!
+  return BackgroundFetch.BackgroundFetchResult.NewData;
+});
+
+const checkAndRequestPermissions = async () => {
+  try {
+    const hasAskedBefore = storage.getString(
+      "hasAskedForNotificationPermission"
+    );
+
+    if (hasAskedBefore !== "true") {
+      const { status } = await Notifications.requestPermissionsAsync();
+
+      if (status === "granted") {
+        writeToLog("INFO", "Notification permissions granted.");
+        console.log("Notification permissions granted.");
+      } else {
+        writeToLog("ERROR", "Notification permissions denied.");
+        console.log("Notification permissions denied.");
+      }
+
+      storage.set("hasAskedForNotificationPermission", "true");
+    } else {
+      console.log("Already asked for notification permissions before.");
+    }
+  } catch (error) {
+    writeToLog(
+      "ERROR",
+      "Error checking/requesting notification permissions:",
+      error
+    );
+    console.error("Error checking/requesting notification permissions:", error);
+  }
+};
+
 export default function RootLayout() {
   const [loaded] = useFonts({
     SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
@@ -58,75 +244,147 @@ const queryClient = new QueryClient({
 });
 
 function Layout() {
+  const [settings, updateSettings] = useSettings();
+  const [orientation, setOrientation] = useAtom(orientationAtom);
+
   useKeepAwake();
+  useNotificationObserver();
+
+  useEffect(() => {
+    checkAndRequestPermissions();
+  }, []);
+
+  useEffect(() => {
+    if (settings?.autoRotate === true)
+      ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.DEFAULT);
+    else
+      ScreenOrientation.lockAsync(
+        ScreenOrientation.OrientationLock.PORTRAIT_UP
+      );
+  }, [settings]);
+
+  const appState = useRef(AppState.currentState);
+
+  useEffect(() => {
+    const subscription = AppState.addEventListener("change", (nextAppState) => {
+      if (
+        appState.current.match(/inactive|background/) &&
+        nextAppState === "active"
+      ) {
+        checkForExistingDownloads();
+      }
+    });
+
+    checkForExistingDownloads();
+
+    return () => {
+      subscription.remove();
+    };
+  }, []);
+
+  useEffect(() => {
+    const subscription = ScreenOrientation.addOrientationChangeListener(
+      (event) => {
+        setOrientation(event.orientationInfo.orientation);
+      }
+    );
+
+    ScreenOrientation.getOrientationAsync().then((initialOrientation) => {
+      setOrientation(initialOrientation);
+    });
+
+    return () => {
+      ScreenOrientation.removeOrientationChangeListener(subscription);
+    };
+  }, []);
+
+  const url = Linking.useURL();
+
+  if (url) {
+    const { hostname, path, queryParams } = Linking.parse(url);
+  }
+
   return (
     <GestureHandlerRootView style={{ flex: 1 }}>
       <QueryClientProvider client={queryClient}>
         <ActionSheetProvider>
-          <JellyfinProvider>
-            <PlaySettingsProvider>
-              <LogProvider>
-                <WebSocketProvider>
-                  <BottomSheetModalProvider>
-                    <SystemBars style="light" hidden={false} />
-                    <ThemeProvider value={DarkTheme}>
-                      <Stack initialRouteName="/home">
-                        <Stack.Screen
-                          name="(auth)/(tabs)"
-                          options={{
-                            headerShown: false,
-                            title: "",
-                            header: () => null,
-                          }}
-                        />
-                        <Stack.Screen
-                          name="(auth)/player"
-                          options={{
-                            headerShown: false,
-                            title: "",
-                            header: () => null,
-                          }}
-                        />
-                        <Stack.Screen
-                          name="(auth)/trailer/page"
-                          options={{
-                            headerShown: false,
-                            presentation: "modal",
-                            title: "",
-                          }}
-                        />
-                        <Stack.Screen
-                          name="login"
-                          options={{
-                            headerShown: true,
-                            title: "",
-                            headerTransparent: true,
-                          }}
-                        />
-                        <Stack.Screen name="+not-found" />
-                      </Stack>
-                      <Toaster
-                        duration={4000}
-                        toastOptions={{
-                          style: {
-                            backgroundColor: "#262626",
-                            borderColor: "#363639",
-                            borderWidth: 1,
-                          },
-                          titleStyle: {
-                            color: "white",
-                          },
-                        }}
-                        closeButton
-                      />
-                    </ThemeProvider>
-                  </BottomSheetModalProvider>
-                </WebSocketProvider>
-              </LogProvider>
-            </PlaySettingsProvider>
-          </JellyfinProvider>
+          <JobQueueProvider>
+            <JellyfinProvider>
+              <PlaySettingsProvider>
+                <LogProvider>
+                  <WebSocketProvider>
+                    <DownloadProvider>
+                      <BottomSheetModalProvider>
+                        <SystemBars style="light" hidden={false} />
+                        <ThemeProvider value={DarkTheme}>
+                          <Stack initialRouteName="/home">
+                            <Stack.Screen
+                              name="(auth)/(tabs)"
+                              options={{
+                                headerShown: false,
+                                title: "",
+                                header: () => null,
+                              }}
+                            />
+                            <Stack.Screen
+                              name="(auth)/player"
+                              options={{
+                                headerShown: false,
+                                title: "",
+                                header: () => null,
+                              }}
+                            />
+                            <Stack.Screen
+                              name="login"
+                              options={{ headerShown: false, title: "Login" }}
+                            />
+                            <Stack.Screen name="+not-found" />
+                          </Stack>
+                          <Toaster
+                            duration={4000}
+                            toastOptions={{
+                              style: {
+                                backgroundColor: "#262626",
+                                borderColor: "#363639",
+                                borderWidth: 1,
+                              },
+                              titleStyle: {
+                                color: "white",
+                              },
+                            }}
+                            closeButton
+                          />
+                        </ThemeProvider>
+                      </BottomSheetModalProvider>
+                    </DownloadProvider>
+                  </WebSocketProvider>
+                </LogProvider>
+              </PlaySettingsProvider>
+            </JellyfinProvider>
+          </JobQueueProvider>
         </ActionSheetProvider>
       </QueryClientProvider>
     </GestureHandlerRootView>
   );
 }
+
+function saveDownloadedItemInfo(item: BaseItemDto) {
+  try {
+    const downloadedItems = storage.getString("downloadedItems");
+    let items: BaseItemDto[] = downloadedItems
+      ? JSON.parse(downloadedItems)
+      : [];
+
+    const existingItemIndex = items.findIndex((i) => i.Id === item.Id);
+    if (existingItemIndex !== -1) {
+      items[existingItemIndex] = item;
+    } else {
+      items.push(item);
+    }
+
+    storage.set("downloadedItems", JSON.stringify(items));
+  } catch (error) {
+    writeToLog("ERROR", "Failed to save downloaded item information:", error);
+    console.error("Failed to save downloaded item information:", error);
+  }
+}

app/login.tsx

@@ -4,8 +4,9 @@ import { Text } from "@/components/common/Text";
 import { apiAtom, useJellyfin } from "@/providers/JellyfinProvider";
 import { Ionicons } from "@expo/vector-icons";
 import { PublicSystemInfo } from "@jellyfin/sdk/lib/generated-client";
+import { getSystemApi } from "@jellyfin/sdk/lib/utils/api";
 import { Image } from "expo-image";
-import { useLocalSearchParams, useNavigation } from "expo-router";
+import { useLocalSearchParams } from "expo-router";
 import { useAtom } from "jotai";
 import React, { useEffect, useState } from "react";
 import {
@@ -13,7 +14,6 @@ import {
   KeyboardAvoidingView,
   Platform,
   SafeAreaView,
-  TouchableOpacity,
   View,
 } from "react-native";
 
@@ -65,23 +65,6 @@ const Login: React.FC = () => {
     })();
   }, [_apiUrl, _username, _password]);
 
-  const navigation = useNavigation();
-  useEffect(() => {
-    navigation.setOptions({
-      headerTitle: serverName,
-      headerLeft: () =>
-        api?.basePath ? (
-          <TouchableOpacity
-            onPress={() => {
-              removeServer();
-            }}
-          >
-            <Ionicons name="chevron-back" size={24} color="white" />
-          </TouchableOpacity>
-        ) : null,
-    });
-  }, [serverName, navigation, api?.basePath]);
-
   const [loading, setLoading] = useState<boolean>(false);
 
   const handleLogin = async () => {
@@ -120,19 +103,37 @@ const Login: React.FC = () => {
    * - Logs errors and timeout information to the console.
    */
   async function checkUrl(url: string) {
+    url = url.endsWith("/") ? url.slice(0, -1) : url;
     setLoadingServerCheck(true);
 
+    const protocols = ["https://", "http://"];
+    const timeout = 2000; // 2 seconds timeout for long 404 responses
+
     try {
-      const response = await fetch(`${url}/System/Info/Public`, {
-        mode: "cors",
-      });
+      for (const protocol of protocols) {
+        const controller = new AbortController();
+        const timeoutId = setTimeout(() => controller.abort(), timeout);
 
-      if (response.ok) {
-        const data = (await response.json()) as PublicSystemInfo;
-        setServerName(data.ServerName || "");
-        return url;
+        try {
+          const response = await fetch(`${protocol}${url}/System/Info/Public`, {
+            mode: "cors",
+            signal: controller.signal,
+          });
+          clearTimeout(timeoutId);
+          if (response.ok) {
+            const data = (await response.json()) as PublicSystemInfo;
+            setServerName(data.ServerName || "");
+            return `${protocol}${url}`;
+          }
+        } catch (e) {
+          const error = e as Error;
+          if (error.name === "AbortError") {
+            console.error(`Request to ${protocol}${url} timed out`);
+          } else {
+            console.error(`Error checking ${protocol}${url}:`, error);
+          }
+        }
       }
-
       return undefined;
     } finally {
       setLoadingServerCheck(false);
@@ -158,7 +159,9 @@ const Login: React.FC = () => {
   const handleConnect = async (url: string) => {
     url = url.trim();
 
-    const result = await checkUrl(url);
+    const result = await checkUrl(
+      url.startsWith("http") ? new URL(url).host : url
+    );
 
     if (result === undefined) {
       Alert.alert(
@@ -168,7 +171,7 @@ const Login: React.FC = () => {
       return;
     }
 
-    setServer({ address: url });
+    setServer({ address: result });
   };
 
   const handleQuickConnect = async () => {
@@ -193,21 +196,38 @@ const Login: React.FC = () => {
           behavior={Platform.OS === "ios" ? "padding" : "height"}
           style={{ flex: 1, height: "100%" }}
         >
-          <View className="flex flex-col h-full relative items-center justify-center">
-            <View className="px-4 -mt-20 w-full">
-              <View className="flex flex-col space-y-2">
-                <Text className="text-2xl font-bold -mb-2">
-                  Log in
-                  <>
-                    {serverName ? (
-                      <>
-                        {" to "}
-                        <Text className="text-purple-600">{serverName}</Text>
-                      </>
-                    ) : null}
-                  </>
+          <View className="flex flex-col w-full h-full relative items-center justify-center">
+            <View className="px-4 -mt-20">
+              <View className="mb-4">
+                <Text className="text-3xl font-bold mb-1">
+                  {serverName || "Streamyfin"}
                 </Text>
-                <Text className="text-xs text-neutral-400">{serverURL}</Text>
+                <View className="bg-neutral-900 rounded-xl p-4 mb-2 flex flex-row items-center justify-between">
+                  <Text className="">URL</Text>
+                  <Text numberOfLines={1} className="shrink">
+                    {api.basePath}
+                  </Text>
+                </View>
+                <Button
+                  color="black"
+                  onPress={() => {
+                    removeServer();
+                  }}
+                  justify="between"
+                  iconLeft={
+                    <Ionicons
+                      name="arrow-back-outline"
+                      size={18}
+                      color={"white"}
+                    />
+                  }
+                >
+                  Change server
+                </Button>
+              </View>
+
+              <View className="flex flex-col space-y-2">
+                <Text className="text-2xl font-bold">Log in</Text>
                 <Input
                   placeholder="Username"
                   onChangeText={(text) =>
@@ -281,7 +301,7 @@ const Login: React.FC = () => {
             />
             <Text className="text-3xl font-bold">Streamyfin</Text>
             <Text className="text-neutral-500">
-              Enter the URL to your Jellyfin server
+              Connect to your Jellyfin server
             </Text>
             <Input
               placeholder="Server URL"
@@ -293,9 +313,6 @@ const Login: React.FC = () => {
               textContentType="URL"
               maxLength={500}
             />
-            <Text className="text-xs text-neutral-500">
-              Make sure to include http or https
-            </Text>
           </View>
           <View className="mb-2 absolute bottom-0 left-0 w-full px-4">
             <Button

assets/images/not-rotten-tomatoes.svg

@@ -1,65 +0,0 @@
-<svg
-  type="certified"
-  viewBox="0 0 80 80"
-  preserveAspectRatio="xMidYMid"
-  version="1.1"
-  xmlns="http://www.w3.org/2000/svg"
-  xmlns:xlink="http://www.w3.org/1999/xlink"
->
-  <g transform="translate(2.29, 0)">
-    <path
-      d="M42.1942857,18.8022857 C44.3794286,18.608 49.1565714,18.7177143 51.4902857,21.0057143 C51.6297143,21.1451429 51.5085714,21.4605714 51.3097143,21.408 C47.8902857,20.4868571 42.5577143,25.0217143 39.1017143,22.0891429 C39.008,22.9485714 38.2331429,27.0857143 32.3314286,26.4731429 C32.192,26.4594286 32.1371429,26.304 32.24,26.2171429 C33.1542857,25.44 34.2765714,23.2891429 33.3142857,21.9154286 C30.3108571,23.9085714 28.7565714,23.9954286 23.2182857,21.5954286 C23.0377143,21.5177143 23.1451429,21.2228571 23.3577143,21.1748571 C24.5074286,20.9165714 27.2434286,19.9222857 29.696,19.4582857 C30.1645714,19.3691429 30.624,19.3165714 31.0674286,19.312 C28.528,18.7062857 27.4217143,18.1805714 25.7485714,18.1874286 C25.5657143,18.1897143 25.4742857,17.9611429 25.6068571,17.8354286 C28.224,15.3188571 32.9691429,15.1885714 35.2548571,17.0628571 L33.2068571,12.7862857 L35.696,12.4114286 C35.696,12.4114286 36.3451429,14.6925714 36.9257143,16.7428571 C39.5177143,13.904 43.5268571,14.192 44.8777143,16.672 C44.9577143,16.8182857 44.8251429,16.992 44.6605714,16.9622857 C43.3005714,16.7314286 42.3702857,17.8628571 42.1737143,18.7977143 L42.1942857,18.8022857"
-      id="Fill-2"
-      fill="#00912D"
-    ></path>
-    <mask id="mask-2" fill="white">
-      <polygon
-        points="0.137142857 0.921142857 75.0534777 0.921142857 75.0534777 79.8628571 0.137142857 79.8628571"
-      ></polygon>
-    </mask>
-    <path
-      d="M13.0491429,59.1817143 C9.90628571,55.3554286 7.86971429,50.576 7.51771429,44.9622857 C6.912,35.2342857 10.2354286,26.0845714 23.1794286,21.4834286 C23.1908571,21.5245714 23.1725714,21.5748571 23.2182857,21.5954286 C23.0377143,21.5177143 23.1451429,21.2228571 23.3577143,21.1748571 C24.5074286,20.9165714 27.2434286,19.92 29.696,19.4582857 C30.1645714,19.3691429 30.624,19.3165714 31.0674286,19.3097143 C28.528,18.7062857 27.4217143,18.1805714 25.7485714,18.1874286 C25.5657143,18.1897143 25.4742857,17.9611429 25.6068571,17.8331429 C28.224,15.3165714 32.9691429,15.1885714 35.2548571,17.0628571 L33.2068571,12.784 L35.696,12.4114286 C35.696,12.4114286 36.3451429,14.6902857 36.9257143,16.7428571 C39.5177143,13.904 43.5268571,14.192 44.8777143,16.672 C44.9577143,16.8182857 44.8251429,16.992 44.6605714,16.9622857 C43.3005714,16.7314286 42.3702857,17.8628571 42.1737143,18.7977143 L42.1942857,18.8022857 C44.3794286,18.608 49.1565714,18.7177143 51.4902857,21.0057143 C51.328,20.8502857 51.1337143,20.7245714 50.9508571,20.5874286 C60.2765714,23.504 66.7474286,30.1531429 67.44,41.2251429 C67.8811429,48.2948571 65.5702857,54.3885714 61.568,59.1154286 C62.784,59.2891429 63.9931429,59.4925714 65.2045714,59.6937143 C70.304,53.4537143 73.2502857,45.5428571 73.2502857,37.056 C73.2502857,17.7165714 57.5337143,2.56685714 37.472,2.56685714 C17.4102857,2.56685714 1.69371429,17.7165714 1.69371429,37.056 C1.69371429,45.5565714 4.64,53.472 9.744,59.7097143 C10.8434286,59.5268571 11.9451429,59.3462857 13.0491429,59.1817143"
-      fill="#FFD700"
-      mask="url(#mask-2)"
-    ></path>
-    <path
-      d="M9.744,59.7097143 C4.64,53.472 1.69371429,45.5565714 1.69371429,37.056 C1.69371429,17.7165714 17.4102857,2.56685714 37.472,2.56685714 C57.5337143,2.56685714 73.2502857,17.7165714 73.2502857,37.056 C73.2502857,45.5428571 70.304,53.4537143 65.2045714,59.6937143 C65.8125714,59.7942857 66.4205714,59.8742857 67.0285714,59.984 C71.9497143,53.6457143 74.8937143,45.6982857 74.8937143,37.056 C74.8937143,16.3862857 58.1394286,0.921142857 37.472,0.921142857 C16.8022857,0.921142857 0.048,16.3862857 0.048,37.056 C0.048,45.7074286 2.99885714,53.6594286 7.92914286,59.9977143 C8.53257143,59.8902857 9.13828571,59.8102857 9.744,59.7097143"
-      fill="#FA6E0F"
-      mask="url(#mask-2)"
-    ></path>
-    <path
-      d="M58.2857143,74.9394286 C62.3748571,75.1954286 65.7874286,77.2137143 67.8468571,79.9474286 C67.9131429,80.0182857 68.0114286,80.016 68.0411429,79.9382857 C68.7451429,77.0971429 68.9394286,74.0662857 68.5851429,71.0125714 C68.5874286,70.9805714 68.6125714,70.9577143 68.6537143,70.9485714 C70.576,70.3428571 72.7017143,70.0137143 74.9645714,70.0457143 C75.0857143,70.0594286 75.0834286,69.9405714 74.9554286,69.8194286 C72.5577143,67.4994286 69.6297143,65.6914286 66.416,64.5417143 C65.3051429,67.68 64.2217143,70.816 63.1565714,73.9634286 C63.136,74.0228571 63.0514286,74.0594286 62.9645714,74.0434286 L58.2857143,74.9394286"
-      fill="#0AC855"
-      mask="url(#mask-2)"
-    ></path>
-    <path
-      d="M62.9645714,74.0434286 L58.2857143,74.9394286 C58.2857143,74.9394286 58.3451429,74.512 58.528,73.3325714 C60.9417143,73.6754286 62.9645714,74.0434286 62.9645714,74.0434286"
-      fill="#0B4902"
-    ></path>
-    <g transform="translate(0, 20.57)">
-      <mask id="mask-4" fill="white">
-        <polygon
-          points="0.137142857 0.016 67.4935952 0.016 67.4935952 59.2914286 0.137142857 59.2914286"
-        ></polygon>
-      </mask>
-      <path
-        d="M13.0765714,38.6057143 C29.1177143,36.2605714 45.5222857,36.2354286 61.568,38.544 C65.5702857,33.8171429 67.8811429,27.7234286 67.44,20.6537143 C66.7474286,9.58171429 60.2765714,2.93257143 50.9508571,0.016 C51.1337143,0.153142857 51.328,0.278857143 51.4902857,0.434285714 C51.6297143,0.573714286 51.5085714,0.889142857 51.3097143,0.836571429 C47.8902857,-0.0845714286 42.5577143,4.45028571 39.1017143,1.51771429 C39.008,2.37485714 38.2331429,6.51428571 32.3314286,5.90171429 C32.192,5.888 32.1371429,5.73257143 32.24,5.64571429 C33.1542857,4.86857143 34.2765714,2.71542857 33.3142857,1.344 C30.3108571,3.33714286 28.7565714,3.424 23.2182857,1.024 C23.1725714,1.00342857 23.1908571,0.953142857 23.1794286,0.912 C10.2354286,5.51314286 6.912,14.6628571 7.51771429,24.3908571 C7.86971429,30.0091429 9.93142857,34.7748571 13.0765714,38.6057143"
-        fill="#FA3200"
-        mask="url(#mask-4)"
-      ></path>
-      <path
-        d="M12.0868571,53.472 C12,53.488 11.9154286,53.4514286 11.8948571,53.392 C10.8274286,50.2445714 9.73485714,47.0971429 8.62171429,43.9611429 C5.41028571,45.1108571 2.49371429,46.9302857 0.0982857143,49.248 C-0.0297142857,49.3691429 -0.032,49.488 0.0891428571,49.4742857 C2.352,49.4422857 4.47771429,49.7714286 6.4,50.3771429 C6.44114286,50.3862857 6.46628571,50.4091429 6.46857143,50.4411429 C6.11428571,53.4948571 6.30857143,56.5257143 7.01257143,59.3668571 C7.04228571,59.4445714 7.14057143,59.4468571 7.20685714,59.376 C9.26628571,56.6422857 12.6742857,54.624 16.7657143,54.368 L12.0868571,53.472"
-        fill="#0AC855"
-        mask="url(#mask-4)"
-      ></path>
-    </g>
-    <path
-      d="M62.9645714,74.0434286 C46.192,71.104 28.8571429,71.104 12.0868571,74.0434286 C12,74.0594286 11.9154286,74.0228571 11.8948571,73.9634286 C10.3428571,69.3851429 8.74285714,64.8182857 7.09257143,60.2628571 C7.06971429,60.1988571 7.14057143,60.1257143 7.248,60.1074286 C27.1885714,56.464 47.8605714,56.464 67.8034286,60.1074286 C67.9108571,60.1257143 67.9817143,60.1988571 67.9565714,60.2628571 C66.3085714,64.8182857 64.7085714,69.3851429 63.1565714,73.9634286 C63.136,74.0228571 63.0514286,74.0594286 62.9645714,74.0434286"
-      fill="#00912D"
-    ></path>
-    <path
-      d="M12.0868571,74.0434286 L16.7657143,74.9394286 C16.7657143,74.9394286 16.704,74.512 16.5211429,73.3325714 C14.1074286,73.6754286 12.0868571,74.0434286 12.0868571,74.0434286"
-      fill="#0B4902"
-    ></path>
-  </g>
-</svg>

augmentations/index.ts

@@ -1,3 +0,0 @@
-export * from "./mmkv";
-export * from "./number";
-export * from "./string";

augmentations/mmkv.ts

@@ -1,17 +0,0 @@
-import {MMKV} from "react-native-mmkv";
-
-declare module "react-native-mmkv" {
-  interface MMKV {
-    get<T>(key: string): T | undefined
-    setAny(key: string, value: any | undefined): void
-  }
-}
-
-MMKV.prototype.get = function <T> (key: string): T | undefined {
-  const serializedItem = this.getString(key);
-  return serializedItem ? JSON.parse(serializedItem) : undefined;
-}
-
-MMKV.prototype.setAny = function (key: string, value: any | undefined): void {
-  this.set(key, JSON.stringify(value));
-}

augmentations/number.ts

@@ -1,37 +0,0 @@
-declare global {
-  interface Number {
-    bytesToReadable(): string;
-    secondsToMilliseconds(): number
-    minutesToMilliseconds(): number
-    hoursToMilliseconds(): number
-  }
-}
-
-Number.prototype.bytesToReadable = function () {
-  const bytes = this.valueOf();
-  const gb = bytes / 1e9;
-
-  if (gb >= 1) return `${gb.toFixed(2)} GB`;
-
-  const mb = bytes / 1024.0 / 1024.0;
-  if (mb >= 1) return `${mb.toFixed(2)} MB`;
-
-  const kb = bytes / 1024.0;
-  if (kb >= 1) return `${kb.toFixed(2)} KB`;
-
-  return `${bytes.toFixed(2)} B`;
-}
-
-Number.prototype.secondsToMilliseconds = function () {
-  return this.valueOf() * 1000
-}
-
-Number.prototype.minutesToMilliseconds = function () {
-  return this.valueOf() * (60).secondsToMilliseconds()
-}
-
-Number.prototype.hoursToMilliseconds = function () {
-  return this.valueOf() * (60).minutesToMilliseconds()
-}
-
-export {};

augmentations/string.ts

@@ -1,16 +0,0 @@
-declare global {
-  interface String {
-    toTitle(): string;
-  }
-}
-
-String.prototype.toTitle = function () {
-  return this
-    .replaceAll("_", " ")
-    .replace(
-      /\w\S*/g,
-      text => text.charAt(0).toUpperCase() + text.substring(1).toLowerCase()
-    );
-}
-
-export {};

components/AudioTrackSelector.tsx

@@ -1,7 +1,7 @@
-import { Ionicons } from "@expo/vector-icons";
 import { MediaSourceInfo } from "@jellyfin/sdk/lib/generated-client/models";
-import { useMemo, useState } from "react";
-import { Modal, TouchableOpacity, View } from "react-native";
+import { useMemo } from "react";
+import { TouchableOpacity, View } from "react-native";
+import * as DropdownMenu from "zeego/dropdown-menu";
 import { Text } from "./common/Text";
 
 interface Props extends React.ComponentProps<typeof View> {
@@ -16,8 +16,6 @@ export const AudioTrackSelector: React.FC<Props> = ({
   selected,
   ...props
 }) => {
-  const [isModalVisible, setIsModalVisible] = useState(false);
-
   const audioStreams = useMemo(
     () => source?.MediaStreams?.filter((x) => x.Type === "Audio"),
     [source]
@@ -27,80 +25,50 @@ export const AudioTrackSelector: React.FC<Props> = ({
     () => audioStreams?.find((x) => x.Index === selected),
     [audioStreams, selected]
   );
+
   return (
-    <>
-      <View
-        className="flex shrink"
-        style={{
-          minWidth: 50,
-        }}
-      >
-        <View className="flex flex-col" {...props}>
-          <Text className="opacity-50 mb-1 text-xs">Audio</Text>
-          <TouchableOpacity
-            className="bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between"
-            onPress={() => setIsModalVisible(true)}
-          >
-            <Text className="" numberOfLines={1}>
-              {selectedAudioSteam?.DisplayTitle}
-            </Text>
-            <Ionicons
-              name="chevron-down"
-              size={16}
-              color="white"
-              style={{ opacity: 0.5 }}
-            />
-          </TouchableOpacity>
-        </View>
-      </View>
-
-      <Modal
-        visible={isModalVisible}
-        transparent
-        animationType="slide"
-        onRequestClose={() => setIsModalVisible(false)}
-      >
-        <TouchableOpacity
-          className="flex-1 bg-black/50"
-          activeOpacity={1}
-          onPress={() => setIsModalVisible(false)}
-        >
-          <View className="mt-auto bg-neutral-900 rounded-t-xl">
-            <View className="p-4 border-b border-neutral-800">
-              <Text className="text-lg font-bold text-center">
-                Audio Streams
+    <View
+      className="flex shrink"
+      style={{
+        minWidth: 50,
+      }}
+    >
+      <DropdownMenu.Root>
+        <DropdownMenu.Trigger>
+          <View className="flex flex-col" {...props}>
+            <Text className="opacity-50 mb-1 text-xs">Audio</Text>
+            <TouchableOpacity className="bg-neutral-900  h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between">
+              <Text className="" numberOfLines={1}>
+                {selectedAudioSteam?.DisplayTitle}
               </Text>
-            </View>
-
-            <View className="max-h-[50%]">
-              {audioStreams?.map((audio, idx: number) => (
-                <TouchableOpacity
-                  key={idx.toString()}
-                  className={`p-4 border-b border-neutral-800 flex-row items-center justify-between`}
-                  onPress={() => {
-                    if (audio.Index !== null && audio.Index !== undefined) {
-                      onChange(audio.Index);
-                      setIsModalVisible(false);
-                    }
-                  }}
-                >
-                  <Text>{audio.DisplayTitle}</Text>
-                  {audio.Index === selected && (
-                    <Ionicons name="checkmark" size={24} color="white" />
-                  )}
-                </TouchableOpacity>
-              ))}
-            </View>
-
-            <TouchableOpacity
-              className="p-4 border-t border-neutral-800"
-              onPress={() => setIsModalVisible(false)}
-            >
-              <Text className="text-center text-purple-400">Cancel</Text>
             </TouchableOpacity>
           </View>
-        </TouchableOpacity>
-      </Modal>
-    </>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content
+          loop={true}
+          side="bottom"
+          align="start"
+          alignOffset={0}
+          avoidCollisions={true}
+          collisionPadding={8}
+          sideOffset={8}
+        >
+          <DropdownMenu.Label>Audio streams</DropdownMenu.Label>
+          {audioStreams?.map((audio, idx: number) => (
+            <DropdownMenu.Item
+              key={idx.toString()}
+              onSelect={() => {
+                if (audio.Index !== null && audio.Index !== undefined)
+                  onChange(audio.Index);
+              }}
+            >
+              <DropdownMenu.ItemTitle>
+                {audio.DisplayTitle}
+              </DropdownMenu.ItemTitle>
+            </DropdownMenu.Item>
+          ))}
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
+    </View>
   );
 };

components/BitrateSelector.tsx

@@ -1,7 +1,7 @@
-import { TouchableOpacity, View, Modal } from "react-native";
+import { TouchableOpacity, View } from "react-native";
+import * as DropdownMenu from "zeego/dropdown-menu";
 import { Text } from "./common/Text";
-import { useMemo, useState } from "react";
-import { Ionicons } from "@expo/vector-icons";
+import { useMemo } from "react";
 
 export type Bitrate = {
   key: string;
@@ -49,8 +49,6 @@ export const BitrateSelector: React.FC<Props> = ({
   inverted,
   ...props
 }) => {
-  const [isModalVisible, setIsModalVisible] = useState(false);
-
   const sorted = useMemo(() => {
     if (inverted)
       return BITRATES.sort(
@@ -59,81 +57,49 @@ export const BitrateSelector: React.FC<Props> = ({
     return BITRATES.sort(
       (a, b) => (b.value || Infinity) - (a.value || Infinity)
     );
-  }, [inverted]);
+  }, []);
 
   return (
-    <>
-      <View
-        className="flex shrink"
-        style={{
-          minWidth: 60,
-          maxWidth: 200,
-        }}
-      >
-        <View className="flex flex-col" {...props}>
-          <Text className="opacity-50 mb-1 text-xs">Quality</Text>
-          <TouchableOpacity
-            className="bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between"
-            onPress={() => setIsModalVisible(true)}
-          >
-            <Text className="" numberOfLines={1}>
-              {BITRATES.find((b) => b.value === selected?.value)?.key}
-            </Text>
-            <Ionicons
-              name="chevron-down"
-              size={16}
-              color="white"
-              style={{ opacity: 0.5 }}
-            />
-          </TouchableOpacity>
-        </View>
-      </View>
-
-      <Modal
-        visible={isModalVisible}
-        transparent
-        animationType="slide"
-        onRequestClose={() => setIsModalVisible(false)}
-      >
-        <TouchableOpacity
-          className="flex-1 bg-black/50"
-          activeOpacity={1}
-          onPress={() => setIsModalVisible(false)}
-        >
-          <View className="mt-auto bg-neutral-900 rounded-t-xl">
-            <View className="p-4 border-b border-neutral-800">
-              <Text className="text-lg font-bold text-center">
-                Select Quality
+    <View
+      className="flex shrink"
+      style={{
+        minWidth: 60,
+        maxWidth: 200,
+      }}
+    >
+      <DropdownMenu.Root>
+        <DropdownMenu.Trigger>
+          <View className="flex flex-col" {...props}>
+            <Text className="opacity-50 mb-1 text-xs">Quality</Text>
+            <TouchableOpacity className="bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between">
+              <Text style={{}} className="" numberOfLines={1}>
+                {BITRATES.find((b) => b.value === selected?.value)?.key}
               </Text>
-            </View>
-
-            <View className="max-h-[50%]">
-              {sorted.map((bitrate) => (
-                <TouchableOpacity
-                  key={bitrate.key}
-                  className="p-4 border-b border-neutral-800 flex-row items-center justify-between"
-                  onPress={() => {
-                    onChange(bitrate);
-                    setIsModalVisible(false);
-                  }}
-                >
-                  <Text>{bitrate.key}</Text>
-                  {bitrate.value === selected?.value && (
-                    <Ionicons name="checkmark" size={24} color="white" />
-                  )}
-                </TouchableOpacity>
-              ))}
-            </View>
-
-            <TouchableOpacity
-              className="p-4 border-t border-neutral-800"
-              onPress={() => setIsModalVisible(false)}
-            >
-              <Text className="text-center text-purple-400">Cancel</Text>
             </TouchableOpacity>
           </View>
-        </TouchableOpacity>
-      </Modal>
-    </>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content
+          loop={false}
+          side="bottom"
+          align="center"
+          alignOffset={0}
+          avoidCollisions={true}
+          collisionPadding={0}
+          sideOffset={0}
+        >
+          <DropdownMenu.Label>Bitrates</DropdownMenu.Label>
+          {sorted.map((b) => (
+            <DropdownMenu.Item
+              key={b.key}
+              onSelect={() => {
+                onChange(b);
+              }}
+            >
+              <DropdownMenu.ItemTitle>{b.key}</DropdownMenu.ItemTitle>
+            </DropdownMenu.Item>
+          ))}
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
+    </View>
   );
 };

components/Button.tsx

@@ -1,9 +1,9 @@
+import * as Haptics from "expo-haptics";
 import React, { PropsWithChildren, ReactNode, useMemo } from "react";
 import { Text, TouchableOpacity, View } from "react-native";
 import { Loader } from "./Loader";
 
-export interface ButtonProps
-  extends React.ComponentProps<typeof TouchableOpacity> {
+interface ButtonProps extends React.ComponentProps<typeof TouchableOpacity> {
   onPress?: () => void;
   className?: string;
   textClassName?: string;
@@ -46,13 +46,14 @@ export const Button: React.FC<PropsWithChildren<ButtonProps>> = ({
     <TouchableOpacity
       className={`
         p-3 rounded-xl items-center justify-center
-        ${(loading || disabled) && "opacity-50"}
+        ${loading || (disabled && "opacity-50")}
         ${colorClasses}
         ${className}
       `}
       onPress={() => {
         if (!loading && !disabled && onPress) {
           onPress();
+          Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
         }
       }}
       disabled={disabled || loading}

components/Chromecast.tsx

@@ -0,0 +1,103 @@
+import { Feather } from "@expo/vector-icons";
+import { BlurView } from "expo-blur";
+import React, { useCallback, useEffect } from "react";
+import { Platform, TouchableOpacity, ViewProps } from "react-native";
+import GoogleCast, {
+  CastButton,
+  CastContext,
+  useCastDevice,
+  useDevices,
+  useMediaStatus,
+  useRemoteMediaClient,
+} from "react-native-google-cast";
+
+interface Props extends ViewProps {
+  width?: number;
+  height?: number;
+  background?: "blur" | "transparent";
+}
+
+export const Chromecast: React.FC<Props> = ({
+  width = 48,
+  height = 48,
+  background = "transparent",
+  ...props
+}) => {
+  const client = useRemoteMediaClient();
+  const castDevice = useCastDevice();
+  const devices = useDevices();
+  const sessionManager = GoogleCast.getSessionManager();
+  const discoveryManager = GoogleCast.getDiscoveryManager();
+  const mediaStatus = useMediaStatus();
+
+  useEffect(() => {
+    (async () => {
+      if (!discoveryManager) {
+        return;
+      }
+
+      await discoveryManager.startDiscovery();
+    })();
+  }, [client, devices, castDevice, sessionManager, discoveryManager]);
+
+  // Android requires the cast button to be present for startDiscovery to work
+  const AndroidCastButton = useCallback(
+    () =>
+      Platform.OS === "android" ? (
+        <CastButton tintColor="transparent" />
+      ) : (
+        <></>
+      ),
+    [Platform.OS]
+  );
+
+  if (background === "transparent")
+    return (
+      <>
+        <TouchableOpacity
+          onPress={() => {
+            if (mediaStatus?.currentItemId) CastContext.showExpandedControls();
+            else CastContext.showCastDialog();
+          }}
+          className="rounded-full h-10 w-10 flex items-center justify-center b"
+          {...props}
+        >
+          <Feather name="cast" size={22} color={"white"} />
+        </TouchableOpacity>
+        <AndroidCastButton />
+      </>
+    );
+
+  if (Platform.OS === "android")
+    return (
+      <TouchableOpacity
+        onPress={() => {
+          if (mediaStatus?.currentItemId) CastContext.showExpandedControls();
+          else CastContext.showCastDialog();
+        }}
+        className="rounded-full h-10 w-10 flex items-center justify-center bg-neutral-800/80"
+        {...props}
+      >
+        <Feather name="cast" size={22} color={"white"} />
+      </TouchableOpacity>
+    );
+
+  return (
+    <TouchableOpacity
+      onPress={() => {
+        if (mediaStatus?.currentItemId) CastContext.showExpandedControls();
+        else CastContext.showCastDialog();
+      }}
+      {...props}
+    >
+      <BlurView
+        intensity={100}
+        className="rounded-full overflow-hidden h-10 aspect-square flex items-center justify-center"
+        {...props}
+      >
+        <Feather name="cast" size={22} color={"white"} />
+      </BlurView>
+      <AndroidCastButton />
+    </TouchableOpacity>
+  );
+};

components/DownloadItem.tsx

@@ -0,0 +1,397 @@
+import { useRemuxHlsToMp4 } from "@/hooks/useRemuxHlsToMp4";
+import { useDownload } from "@/providers/DownloadProvider";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { queueActions, queueAtom } from "@/utils/atoms/queue";
+import { useSettings } from "@/utils/atoms/settings";
+import { getDefaultPlaySettings } from "@/utils/jellyfin/getDefaultPlaySettings";
+import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
+import { saveDownloadItemInfoToDiskTmp } from "@/utils/optimize-server";
+import download from "@/utils/profiles/download";
+import Ionicons from "@expo/vector-icons/Ionicons";
+import {
+  BottomSheetBackdrop,
+  BottomSheetBackdropProps,
+  BottomSheetModal,
+  BottomSheetView,
+} from "@gorhom/bottom-sheet";
+import {
+  BaseItemDto,
+  MediaSourceInfo,
+} from "@jellyfin/sdk/lib/generated-client/models";
+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";
+import { toast } from "sonner-native";
+import { AudioTrackSelector } from "./AudioTrackSelector";
+import { Bitrate, BitrateSelector } from "./BitrateSelector";
+import { Button } from "./Button";
+import { Text } from "./common/Text";
+import { Loader } from "./Loader";
+import { MediaSourceSelector } from "./MediaSourceSelector";
+import ProgressCircle from "./ProgressCircle";
+import { SubtitleTrackSelector } from "./SubtitleTrackSelector";
+
+interface DownloadProps extends ViewProps {
+  items: BaseItemDto[];
+  MissingDownloadIconComponent: () => React.ReactElement;
+  DownloadedIconComponent: () => React.ReactElement;
+}
+
+export const DownloadItems: React.FC<DownloadProps> = ({
+  items,
+  MissingDownloadIconComponent,
+  DownloadedIconComponent,
+  ...props
+}) => {
+  const [api] = useAtom(apiAtom);
+  const [user] = useAtom(userAtom);
+  const [queue, setQueue] = useAtom(queueAtom);
+  const [settings] = useSettings();
+  const { processes, startBackgroundDownload, downloadedFiles } = useDownload();
+  const { startRemuxing } = useRemuxHlsToMp4();
+
+  const [selectedMediaSource, setSelectedMediaSource] = useState<
+    MediaSourceInfo | undefined | null
+  >(undefined);
+  const [selectedAudioStream, setSelectedAudioStream] = useState<number>(-1);
+  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]
+  );
+
+  /**
+   * Bottom sheet
+   */
+  const bottomSheetModalRef = useRef<BottomSheetModal>(null);
+
+  const handlePresentModalPress = useCallback(() => {
+    bottomSheetModalRef.current?.present();
+  }, []);
+
+  const handleSheetChanges = useCallback((index: number) => {}, []);
+
+  const closeModal = useCallback(() => {
+    bottomSheetModalRef.current?.dismiss();
+  }, []);
+
+  // 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)),
+    [items, downloadedFiles]
+  );
+  const isDownloaded = useMemo(() => {
+    if (!downloadedFiles) return false;
+    return pendingItems.length == 0;
+  }, [downloadedFiles, pendingItems]);
+
+  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]);
+
+  const itemsQueued = useMemo(() => {
+    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];
+    router.push(
+      firstItem.Type !== "Episode"
+        ? "/downloads"
+        : ({
+            pathname: `/downloads/${firstItem.SeriesId}`,
+            params: {
+              episodeSeasonIndex: firstItem.ParentIndexNumber,
+            },
+          } as Href)
+    );
+  };
+
+  const acceptDownloadOptions = useCallback(() => {
+    if (userCanDownload === true) {
+      if (pendingItems.some((i) => !i.Id)) {
+        throw new Error("No item id");
+      }
+      closeModal();
+
+      if (usingOptimizedServer) initiateDownload(...pendingItems);
+      else {
+        queueActions.enqueue(
+          queue,
+          setQueue,
+          ...pendingItems.map((item) => ({
+            id: item.Id!,
+            execute: async () => await initiateDownload(item),
+            item,
+          }))
+        );
+      }
+    } else {
+      toast.error("You are not allowed to download files.");
+    }
+  }, [
+    queue,
+    setQueue,
+    pendingItems,
+    usingOptimizedServer,
+    userCanDownload,
+
+    // Need to be reference at the time async lambda is created for initiateDownload
+    maxBitrate,
+    selectedMediaSource,
+    selectedAudioStream,
+    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"
+          );
+          continue;
+        }
+
+        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,
+    ]
+  );
+
+  const renderBackdrop = useCallback(
+    (props: BottomSheetBackdropProps) => (
+      <BottomSheetBackdrop
+        {...props}
+        disappearsOnIndex={-1}
+        appearsOnIndex={0}
+      />
+    ),
+    []
+  );
+  // endregion helper functions
+
+  // Allow to select & set settings for single download
+  useFocusEffect(
+    useCallback(() => {
+      if (!settings) return;
+      if (pendingItems.length !== 1) return;
+      const { bitrate, mediaSource, audioIndex, subtitleIndex } =
+        getDefaultPlaySettings(items[0], settings);
+
+      // 4. Set states
+      setSelectedMediaSource(mediaSource ?? undefined);
+      setSelectedAudioStream(audioIndex ?? 0);
+      setSelectedSubtitleStream(subtitleIndex ?? -1);
+      setMaxBitrate(bitrate);
+    }, [items, pendingItems, settings])
+  );
+
+  return (
+    <View
+      className="bg-neutral-800/80 rounded-full h-9 w-9 flex items-center justify-center"
+      {...props}
+    >
+      {processes && itemsProcesses.length > 0 ? (
+        <TouchableOpacity onPress={navigateToDownloads}>
+          {progress === 0 ? (
+            <Loader />
+          ) : (
+            <View className="-rotate-45">
+              <ProgressCircle
+                size={24}
+                fill={progress}
+                width={4}
+                tintColor="#9334E9"
+                backgroundColor="#bdc3c7"
+              />
+            </View>
+          )}
+        </TouchableOpacity>
+      ) : itemsQueued ? (
+        <TouchableOpacity onPress={navigateToDownloads}>
+          <Ionicons name="hourglass" size={24} color="white" />
+        </TouchableOpacity>
+      ) : isDownloaded ? (
+        <TouchableOpacity onPress={onDownloadedPress}>
+          {DownloadedIconComponent()}
+        </TouchableOpacity>
+      ) : (
+        <TouchableOpacity onPress={handlePresentModalPress}>
+          {MissingDownloadIconComponent()}
+        </TouchableOpacity>
+      )}
+      <BottomSheetModal
+        ref={bottomSheetModalRef}
+        enableDynamicSizing
+        handleIndicatorStyle={{
+          backgroundColor: "white",
+        }}
+        backgroundStyle={{
+          backgroundColor: "#171717",
+        }}
+        onChange={handleSheetChanges}
+        backdropComponent={renderBackdrop}
+      >
+        <BottomSheetView>
+          <View className="flex flex-col space-y-4 px-4 pb-8 pt-2">
+            <Text className="font-bold text-2xl text-neutral-10">
+              Download options
+            </Text>
+            <View className="flex flex-col space-y-2 w-full items-start">
+              <BitrateSelector
+                inverted
+                onChange={setMaxBitrate}
+                selected={maxBitrate}
+              />
+              {pendingItems.length === 1 && (
+                <>
+                  <MediaSourceSelector
+                    item={items[0]}
+                    onChange={setSelectedMediaSource}
+                    selected={selectedMediaSource}
+                  />
+                  {selectedMediaSource && (
+                    <View className="flex flex-col space-y-2">
+                      <AudioTrackSelector
+                        source={selectedMediaSource}
+                        onChange={setSelectedAudioStream}
+                        selected={selectedAudioStream}
+                      />
+                      <SubtitleTrackSelector
+                        source={selectedMediaSource}
+                        onChange={setSelectedSubtitleStream}
+                        selected={selectedSubtitleStream}
+                      />
+                    </View>
+                  )}
+                </>
+              )}
+            </View>
+            <Button
+              className="mt-auto"
+              onPress={acceptDownloadOptions}
+              color="purple"
+            >
+              Download
+            </Button>
+            <View className="opacity-70 text-center w-full flex items-center">
+              <Text className="text-xs">
+                {usingOptimizedServer
+                  ? "Using optimized server"
+                  : "Using default method"}
+              </Text>
+            </View>
+          </View>
+        </BottomSheetView>
+      </BottomSheetModal>
+    </View>
+  );
+};
+
+export const DownloadSingleItem: React.FC<{ item: BaseItemDto }> = ({
+  item,
+}) => {
+  return (
+    <DownloadItems
+      items={[item]}
+      MissingDownloadIconComponent={() => (
+        <Ionicons name="cloud-download-outline" size={24} color="white" />
+      )}
+      DownloadedIconComponent={() => (
+        <Ionicons name="cloud-download" size={26} color="#9333ea" />
+      )}
+    />
+  );
+};

components/GenreTags.tsx

@@ -1,43 +1,22 @@
 // GenreTags.tsx
 import React from "react";
-import {View, ViewProps} from "react-native";
+import { View } from "react-native";
 import { Text } from "./common/Text";
 
-interface TagProps {
-  tags?: string[];
-  textClass?: ViewProps["className"]
+interface GenreTagsProps {
+  genres?: string[];
 }
 
-export const Tag: React.FC<{ text: string, textClass?: ViewProps["className"]} & ViewProps> = ({
-  text,
-  textClass,
-  ...props
-}) => {
-  return (
-    <View className="bg-neutral-800 rounded-full px-2 py-1" {...props}>
-      <Text className={textClass}>{text}</Text>
-    </View>
-  );
-};
-
-export const Tags: React.FC<TagProps & ViewProps> = ({ tags, textClass = "text-xs", ...props }) => {
-  if (!tags || tags.length === 0) return null;
+export const GenreTags: React.FC<GenreTagsProps> = ({ genres }) => {
+  if (!genres || genres.length === 0) return null;
 
   return (
-    <View className={`flex flex-row flex-wrap gap-1 ${props.className}`} {...props}>
-      {tags.map((tag, idx) => (
-        <View>
-          <Tag key={idx} textClass={textClass} text={tag}/>
+    <View className="flex flex-row flex-wrap mt-2">
+      {genres.map((genre, idx) => (
+        <View key={idx} className="bg-neutral-800 rounded-full px-2 py-1 mr-1">
+          <Text className="text-xs">{genre}</Text>
         </View>
       ))}
     </View>
   );
 };
-
-export const GenreTags: React.FC<{ genres?: string[]}> = ({ genres }) => {
-  return (
-    <View className="mt-2">
-      <Tags tags={genres}/>
-    </View>
-  );
-};

components/ItemCardText.tsx

@@ -13,13 +13,12 @@ export const ItemCardText: React.FC<ItemCardProps> = ({ item }) => {
     <View className="mt-2 flex flex-col">
       {item.Type === "Episode" ? (
         <>
-          <Text numberOfLines={1} className="">
-            {item.Name}
+          <Text numberOfLines={2} className="">
+            {item.SeriesName}
           </Text>
           <Text numberOfLines={1} className="text-xs opacity-50">
-            {`S${item.ParentIndexNumber?.toString()}:E${item.IndexNumber?.toString()}`}
-            {" - "}
-            {item.SeriesName}
+            {`S${item.ParentIndexNumber?.toString()}:E${item.IndexNumber?.toString()}`}{" "}
+            {item.Name}
           </Text>
         </>
       ) : (

components/ItemContent.tsx

@@ -1,5 +1,6 @@
 import { AudioTrackSelector } from "@/components/AudioTrackSelector";
 import { Bitrate, BitrateSelector } from "@/components/BitrateSelector";
+import { DownloadSingleItem } from "@/components/DownloadItem";
 import { OverviewText } from "@/components/OverviewText";
 import { ParallaxScrollView } from "@/components/ParallaxPage";
 import { PlayButton } from "@/components/PlayButton";
@@ -11,8 +12,9 @@ import { CastAndCrew } from "@/components/series/CastAndCrew";
 import { CurrentSeries } from "@/components/series/CurrentSeries";
 import { SeasonEpisodesCarousel } from "@/components/series/SeasonEpisodesCarousel";
 import useDefaultPlaySettings from "@/hooks/useDefaultPlaySettings";
+import { useImageColors } from "@/hooks/useImageColors";
+import { useOrientation } from "@/hooks/useOrientation";
 import { apiAtom } from "@/providers/JellyfinProvider";
-import { SubtitleHelper } from "@/utils/SubtitleHelper";
 import { useSettings } from "@/utils/atoms/settings";
 import { getLogoImageUrlById } from "@/utils/jellyfin/image/getLogoImageUrlById";
 import {
@@ -21,14 +23,25 @@ import {
 } from "@jellyfin/sdk/lib/generated-client/models";
 import { Image } from "expo-image";
 import { useNavigation } from "expo-router";
+import * as ScreenOrientation from "expo-screen-orientation";
 import { useAtom } from "jotai";
 import React, { useEffect, useMemo, useState } from "react";
 import { View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Chromecast } from "./Chromecast";
 import { ItemHeader } from "./ItemHeader";
-import { ItemTechnicalDetails } from "./ItemTechnicalDetails";
 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;
@@ -41,10 +54,12 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
   ({ item }) => {
     const [api] = useAtom(apiAtom);
     const [settings] = useSettings();
+    const { orientation } = useOrientation();
     const navigation = useNavigation();
     const insets = useSafeAreaInsets();
+    useImageColors({ item });
 
-    const [loadingLogo, setLoadingLogo] = useState(true);
+    const [loadingLogo, setLoadingLogo] = useState(false);
     const [headerHeight, setHeaderHeight] = useState(350);
 
     const [selectedOptions, setSelectedOptions] = useState<
@@ -60,6 +75,7 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
 
     // Needs to automatically change the selected to the default values for default indexes.
     useEffect(() => {
+      console.log(defaultAudioIndex, defaultSubtitleIndex);
       setSelectedOptions(() => ({
         bitrate: defaultBitrate,
         mediaSource: defaultMediaSource,
@@ -78,8 +94,10 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
         headerRight: () =>
           item && (
             <View className="flex flex-row items-center space-x-2">
+              <Chromecast background="blur" width={22} height={22} />
               {item.Type !== "Program" && (
                 <View className="flex flex-row items-center space-x-2">
+                  <DownloadSingleItem item={item} />
                   <PlayedStatus item={item} />
                 </View>
               )}
@@ -89,9 +107,11 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
     }, [item]);
 
     useEffect(() => {
-      if (item.Type === "Movie") setHeaderHeight(500);
+      if (orientation !== ScreenOrientation.OrientationLock.PORTRAIT_UP)
+        setHeaderHeight(230);
+      else if (item.Type === "Movie") setHeaderHeight(500);
       else setHeaderHeight(350);
-    }, [item.Type]);
+    }, [item.Type, orientation]);
 
     const logoUrl = useMemo(() => getLogoImageUrlById({ api, item }), [item]);
 
@@ -99,36 +119,6 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
       return Boolean(logoUrl && loadingLogo);
     }, [loadingLogo, logoUrl]);
 
-    const [isTranscoding, setIsTranscoding] = useState(false);
-    const [previouslyChosenSubtitleIndex, setPreviouslyChosenSubtitleIndex] =
-      useState<number | undefined>(selectedOptions?.subtitleIndex);
-
-    useEffect(() => {
-      const isTranscoding = Boolean(selectedOptions?.bitrate.value);
-      if (isTranscoding) {
-        setPreviouslyChosenSubtitleIndex(selectedOptions?.subtitleIndex);
-        const subHelper = new SubtitleHelper(
-          selectedOptions?.mediaSource?.MediaStreams ?? []
-        );
-
-        const newSubtitleIndex = subHelper.getMostCommonSubtitleByName(
-          selectedOptions?.subtitleIndex
-        );
-
-        setSelectedOptions((prev) => ({
-          ...prev!,
-          subtitleIndex: newSubtitleIndex ?? -1,
-        }));
-      }
-      if (!isTranscoding && previouslyChosenSubtitleIndex !== undefined) {
-        setSelectedOptions((prev) => ({
-          ...prev!,
-          subtitleIndex: previouslyChosenSubtitleIndex,
-        }));
-      }
-      setIsTranscoding(isTranscoding);
-    }, [selectedOptions?.bitrate]);
-
     if (!selectedOptions) return null;
 
     return (
@@ -159,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}
             </>
           }
@@ -207,6 +224,7 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
                     className="mr-1"
                     source={selectedOptions.mediaSource}
                     onChange={(val) => {
+                      console.log(val);
                       setSelectedOptions(
                         (prev) =>
                           prev && {
@@ -218,7 +236,6 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
                     selected={selectedOptions.audioIndex}
                   />
                   <SubtitleTrackSelector
-                    isTranscoding={isTranscoding}
                     source={selectedOptions.mediaSource}
                     onChange={(val) =>
                       setSelectedOptions(
@@ -245,9 +262,7 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
               <SeasonEpisodesCarousel item={item} loading={loading} />
             )}
 
-            <ItemTechnicalDetails source={selectedOptions.mediaSource} />
-            <OverviewText text={item.Overview} className="px-4 mb-4" />
-
+            <OverviewText text={item.Overview} className="px-4 my-4" />
             {item.Type !== "Program" && (
               <>
                 {item.Type === "Episode" && (
@@ -272,6 +287,8 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
                 <SimilarItems itemId={item.Id} />
               </>
             )}
+
+            <View className="h-16"></View>
           </View>
         </ParallaxScrollView>
       </View>

components/ItemHeader.tsx

@@ -1,11 +1,10 @@
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import React from "react";
 import { View, ViewProps } from "react-native";
-import { GenreTags } from "./GenreTags";
 import { MoviesTitleHeader } from "./movies/MoviesTitleHeader";
 import { Ratings } from "./Ratings";
 import { EpisodeTitleHeader } from "./series/EpisodeTitleHeader";
-import { ItemActions } from "./series/SeriesActions";
+import { GenreTags } from "./GenreTags";
+import React from "react";
 
 interface Props extends ViewProps {
   item?: BaseItemDto | null;
@@ -28,10 +27,7 @@ export const ItemHeader: React.FC<Props> = ({ item, ...props }) => {
   return (
     <View className="flex flex-col" {...props}>
       <View className="flex flex-col" {...props}>
-        <View className="flex flex-row items-center justify-between">
-          <Ratings item={item} className="mb-2" />
-          <ItemActions item={item} />
-        </View>
+        <Ratings item={item} className="mb-2" />
         {item.Type === "Episode" && (
           <>
             <EpisodeTitleHeader item={item} />

components/ItemTechnicalDetails.tsx

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

components/ListItem.tsx

@@ -24,7 +24,7 @@ export const ListItem: React.FC<PropsWithChildren<Props>> = ({
       <View className="flex flex-col overflow-visible">
         <Text className="font-bold ">{title}</Text>
         {subTitle && (
-          <Text uiTextView selectable className="text-xs text-neutral-400">
+          <Text uiTextView selectable className="text-xs">
             {subTitle}
           </Text>
         )}

components/MediaSourceSelector.tsx

@@ -1,12 +1,13 @@
-import { convertBitsToMegabitsOrGigabits } from "@/utils/bToMb";
-import { Ionicons } from "@expo/vector-icons";
+import { tc } from "@/utils/textTools";
 import {
   BaseItemDto,
   MediaSourceInfo,
 } from "@jellyfin/sdk/lib/generated-client/models";
-import { useMemo, useState } from "react";
-import { Modal, TouchableOpacity, View } from "react-native";
+import { useEffect, useMemo } from "react";
+import { TouchableOpacity, View } from "react-native";
+import * as DropdownMenu from "zeego/dropdown-menu";
 import { Text } from "./common/Text";
+import { convertBitsToMegabitsOrGigabits } from "@/utils/bToMb";
 
 interface Props extends React.ComponentProps<typeof View> {
   item: BaseItemDto;
@@ -20,8 +21,6 @@ export const MediaSourceSelector: React.FC<Props> = ({
   selected,
   ...props
 }) => {
-  const [isModalVisible, setIsModalVisible] = useState(false);
-
   const selectedName = useMemo(
     () =>
       item.MediaSources?.find((x) => x.Id === selected?.Id)?.MediaStreams?.find(
@@ -31,80 +30,48 @@ export const MediaSourceSelector: React.FC<Props> = ({
   );
 
   return (
-    <>
-      <View
-        className="flex shrink"
-        style={{
-          minWidth: 50,
-        }}
-      >
-        <View className="flex flex-col" {...props}>
-          <Text className="opacity-50 mb-1 text-xs">Video</Text>
-          <TouchableOpacity
-            className="bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between"
-            onPress={() => setIsModalVisible(true)}
-          >
-            <Text numberOfLines={1}>{selectedName}</Text>
-            <Ionicons
-              name="chevron-down"
-              size={16}
-              color="white"
-              style={{ opacity: 0.5 }}
-            />
-          </TouchableOpacity>
-        </View>
-      </View>
-
-      <Modal
-        visible={isModalVisible}
-        transparent
-        animationType="slide"
-        onRequestClose={() => setIsModalVisible(false)}
-      >
-        <TouchableOpacity
-          className="flex-1 bg-black/50"
-          activeOpacity={1}
-          onPress={() => setIsModalVisible(false)}
-        >
-          <View className="mt-auto bg-neutral-900 rounded-t-xl">
-            <View className="p-4 border-b border-neutral-800">
-              <Text className="text-lg font-bold text-center">
-                Media Sources
-              </Text>
-            </View>
-
-            <View className="max-h-[50%]">
-              {item.MediaSources?.map((source, idx: number) => (
-                <TouchableOpacity
-                  key={idx.toString()}
-                  className="p-4 border-b border-neutral-800 flex-row items-center justify-between"
-                  onPress={() => {
-                    onChange(source);
-                    setIsModalVisible(false);
-                  }}
-                >
-                  <Text>
-                    {`${name(source.Name)} - ${convertBitsToMegabitsOrGigabits(
-                      source.Size
-                    )}`}
-                  </Text>
-                  {source.Id === selected?.Id && (
-                    <Ionicons name="checkmark" size={24} color="white" />
-                  )}
-                </TouchableOpacity>
-              ))}
-            </View>
-
-            <TouchableOpacity
-              className="p-4 border-t border-neutral-800"
-              onPress={() => setIsModalVisible(false)}
-            >
-              <Text className="text-center text-purple-400">Cancel</Text>
+    <View
+      className="flex shrink"
+      style={{
+        minWidth: 50,
+      }}
+    >
+      <DropdownMenu.Root>
+        <DropdownMenu.Trigger>
+          <View className="flex flex-col" {...props}>
+            <Text className="opacity-50 mb-1 text-xs">Video</Text>
+            <TouchableOpacity className="bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center">
+              <Text numberOfLines={1}>{selectedName}</Text>
             </TouchableOpacity>
           </View>
-        </TouchableOpacity>
-      </Modal>
-    </>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content
+          loop={true}
+          side="bottom"
+          align="start"
+          alignOffset={0}
+          avoidCollisions={true}
+          collisionPadding={8}
+          sideOffset={8}
+        >
+          <DropdownMenu.Label>Media sources</DropdownMenu.Label>
+          {item.MediaSources?.map((source, idx: number) => (
+            <DropdownMenu.Item
+              key={idx.toString()}
+              onSelect={() => {
+                onChange(source);
+              }}
+            >
+              <DropdownMenu.ItemTitle>
+                {`${name(source.Name)} - ${convertBitsToMegabitsOrGigabits(
+                  source.Size
+                )}`}
+              </DropdownMenu.ItemTitle>
+            </DropdownMenu.Item>
+          ))}
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
+    </View>
   );
 };
 

components/PlayButton.tsx

@@ -1,14 +1,24 @@
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { itemThemeColorAtom } from "@/utils/atoms/primaryColor";
 import { useSettings } from "@/utils/atoms/settings";
+import { getParentBackdropImageUrl } from "@/utils/jellyfin/image/getParentBackdropImageUrl";
+import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
+import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
+import ios from "@/utils/profiles/ios";
 import { runtimeTicksToMinutes } from "@/utils/time";
 import { useActionSheet } from "@expo/react-native-action-sheet";
-import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
+import { Feather, Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
 import { useRouter } from "expo-router";
 import { useAtom, useAtomValue } from "jotai";
 import { useCallback, useEffect } from "react";
-import { TouchableOpacity, View } from "react-native";
+import { Alert, TouchableOpacity, View } from "react-native";
+import CastContext, {
+  CastButton,
+  PlayServicesState,
+  useMediaStatus,
+  useRemoteMediaClient,
+} from "react-native-google-cast";
 import Animated, {
   Easing,
   interpolate,
@@ -21,6 +31,7 @@ import Animated, {
 } from "react-native-reanimated";
 import { Button } from "./Button";
 import { SelectedOptions } from "./ItemContent";
+import { chromecastProfile } from "@/utils/profiles/chromecast";
 
 interface Props extends React.ComponentProps<typeof Button> {
   item: BaseItemDto;
@@ -36,6 +47,8 @@ export const PlayButton: React.FC<Props> = ({
   ...props
 }: Props) => {
   const { showActionSheetWithOptions } = useActionSheet();
+  const client = useRemoteMediaClient();
+  const mediaStatus = useMediaStatus();
 
   const [colorAtom] = useAtom(itemThemeColorAtom);
   const api = useAtomValue(apiAtom);
@@ -75,16 +88,137 @@ export const PlayButton: React.FC<Props> = ({
 
     const queryString = queryParams.toString();
 
-    goToPlayer(queryString, selectedOptions.bitrate?.value);
+    if (!client) {
+      goToPlayer(queryString, selectedOptions.bitrate?.value);
+      return;
+    }
 
-    return;
+    const options = ["Chromecast", "Device", "Cancel"];
+    const cancelButtonIndex = 2;
+    showActionSheetWithOptions(
+      {
+        options,
+        cancelButtonIndex,
+      },
+      async (selectedIndex: number | undefined) => {
+        if (!api) return;
+        const currentTitle = mediaStatus?.mediaInfo?.metadata?.title;
+        const isOpeningCurrentlyPlayingMedia =
+          currentTitle && currentTitle === item?.Name;
+
+        switch (selectedIndex) {
+          case 0:
+            await CastContext.getPlayServicesState().then(async (state) => {
+              if (state && state !== PlayServicesState.SUCCESS)
+                CastContext.showPlayServicesErrorDialog(state);
+              else {
+                // Get a new URL with the Chromecast device profile:
+                const data = await getStreamUrl({
+                  api,
+                  item,
+                  deviceProfile: chromecastProfile,
+                  startTimeTicks: item?.UserData?.PlaybackPositionTicks!,
+                  userId: user?.Id,
+                  audioStreamIndex: selectedOptions.audioIndex,
+                  maxStreamingBitrate: selectedOptions.bitrate?.value,
+                  mediaSourceId: selectedOptions.mediaSource?.Id,
+                  subtitleStreamIndex: selectedOptions.subtitleIndex,
+                });
+
+                if (!data?.url) {
+                  console.warn("No URL returned from getStreamUrl", data);
+                  Alert.alert(
+                    "Client error",
+                    "Could not create stream for Chromecast"
+                  );
+                  return;
+                }
+
+                client
+                  .loadMedia({
+                    mediaInfo: {
+                      contentUrl: data?.url,
+                      contentType: "video/mp4",
+                      metadata:
+                        item.Type === "Episode"
+                          ? {
+                              type: "tvShow",
+                              title: item.Name || "",
+                              episodeNumber: item.IndexNumber || 0,
+                              seasonNumber: item.ParentIndexNumber || 0,
+                              seriesTitle: item.SeriesName || "",
+                              images: [
+                                {
+                                  url: getParentBackdropImageUrl({
+                                    api,
+                                    item,
+                                    quality: 90,
+                                    width: 2000,
+                                  })!,
+                                },
+                              ],
+                            }
+                          : item.Type === "Movie"
+                          ? {
+                              type: "movie",
+                              title: item.Name || "",
+                              subtitle: item.Overview || "",
+                              images: [
+                                {
+                                  url: getPrimaryImageUrl({
+                                    api,
+                                    item,
+                                    quality: 90,
+                                    width: 2000,
+                                  })!,
+                                },
+                              ],
+                            }
+                          : {
+                              type: "generic",
+                              title: item.Name || "",
+                              subtitle: item.Overview || "",
+                              images: [
+                                {
+                                  url: getPrimaryImageUrl({
+                                    api,
+                                    item,
+                                    quality: 90,
+                                    width: 2000,
+                                  })!,
+                                },
+                              ],
+                            },
+                    },
+                    startTime: 0,
+                  })
+                  .then(() => {
+                    // state is already set when reopening current media, so skip it here.
+                    if (isOpeningCurrentlyPlayingMedia) {
+                      return;
+                    }
+                    CastContext.showExpandedControls();
+                  });
+              }
+            });
+            break;
+          case 1:
+            goToPlayer(queryString, selectedOptions.bitrate?.value);
+            break;
+          case cancelButtonIndex:
+            break;
+        }
+      }
+    );
   }, [
     item,
+    client,
     settings,
     api,
     user,
     router,
     showActionSheetWithOptions,
+    mediaStatus,
     selectedOptions,
   ]);
 
@@ -218,13 +352,21 @@ export const PlayButton: React.FC<Props> = ({
             <Animated.Text style={animatedTextStyle}>
               <Ionicons name="play-circle" size={24} />
             </Animated.Text>
-            <Animated.Text style={animatedTextStyle}>
-              <MaterialCommunityIcons
-                name="vlc"
-                size={18}
-                color={animatedTextStyle.color}
-              />
-            </Animated.Text>
+            {client && (
+              <Animated.Text style={animatedTextStyle}>
+                <Feather name="cast" size={22} />
+                <CastButton tintColor="transparent" />
+              </Animated.Text>
+            )}
+            {!client && settings?.openInVLC && (
+              <Animated.Text style={animatedTextStyle}>
+                <MaterialCommunityIcons
+                  name="vlc"
+                  size={18}
+                  color={animatedTextStyle.color}
+                />
+              </Animated.Text>
+            )}
           </View>
         </View>
       </TouchableOpacity>

components/PlayedStatus.tsx

@@ -1,15 +1,22 @@
-import { useMarkAsPlayed } from "@/hooks/useMarkAsPlayed";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { markAsNotPlayed } from "@/utils/jellyfin/playstate/markAsNotPlayed";
+import { markAsPlayed } from "@/utils/jellyfin/playstate/markAsPlayed";
+import { Ionicons } from "@expo/vector-icons";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { useQueryClient } from "@tanstack/react-query";
+import * as Haptics from "expo-haptics";
+import { useAtom } from "jotai";
 import React from "react";
-import { View, ViewProps } from "react-native";
-import { RoundButton } from "./RoundButton";
+import { TouchableOpacity, View, ViewProps } from "react-native";
 
 interface Props extends ViewProps {
   item: BaseItemDto;
 }
 
 export const PlayedStatus: React.FC<Props> = ({ item, ...props }) => {
+  const [api] = useAtom(apiAtom);
+  const [user] = useAtom(userAtom);
+
   const queryClient = useQueryClient();
 
   const invalidateQueries = () => {
@@ -39,16 +46,44 @@ export const PlayedStatus: React.FC<Props> = ({ item, ...props }) => {
     });
   };
 
-  const markAsPlayedStatus = useMarkAsPlayed(item);
-
   return (
-    <View {...props}>
-      <RoundButton
-        fillColor={item.UserData?.Played ? "primary" : undefined}
-        icon={item.UserData?.Played ? "checkmark" : "checkmark"}
-        onPress={() => markAsPlayedStatus(item.UserData?.Played || false)}
-        size="large"
-      />
+    <View
+      className=" bg-neutral-800/80 rounded-full h-10 w-10 flex items-center justify-center"
+      {...props}
+    >
+      {item.UserData?.Played ? (
+        <TouchableOpacity
+          onPress={async () => {
+            Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+            await markAsNotPlayed({
+              api: api,
+              itemId: item?.Id,
+              userId: user?.Id,
+            });
+            invalidateQueries();
+          }}
+        >
+          <View className="rounded h-10 aspect-square flex items-center justify-center">
+            <Ionicons name="checkmark-circle" size={24} color="white" />
+          </View>
+        </TouchableOpacity>
+      ) : (
+        <TouchableOpacity
+          onPress={async () => {
+            Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+            await markAsPlayed({
+              api: api,
+              item: item,
+              userId: user?.Id,
+            });
+            invalidateQueries();
+          }}
+        >
+          <View className="rounded h-10 aspect-square flex items-center justify-center">
+            <Ionicons name="checkmark-circle-outline" size={24} color="white" />
+          </View>
+        </TouchableOpacity>
+      )}
     </View>
   );
 };

components/Ratings.tsx

@@ -3,10 +3,6 @@ import { View, ViewProps } from "react-native";
 import { Badge } from "./Badge";
 import { Ionicons } from "@expo/vector-icons";
 import { Image } from "expo-image";
-import { MovieResult, TvResult } from "@/utils/jellyseerr/server/models/Search";
-import { useJellyseerr } from "@/hooks/useJellyseerr";
-import { useQuery } from "@tanstack/react-query";
-import { MediaType } from "@/utils/jellyseerr/server/constants/media";
 
 interface Props extends ViewProps {
   item?: BaseItemDto | null;
@@ -21,7 +17,7 @@ export const Ratings: React.FC<Props> = ({ item, ...props }) => {
       )}
       {item.CommunityRating && (
         <Badge
-          text={item.CommunityRating.toFixed(1)}
+          text={item.CommunityRating}
           variant="gray"
           iconLeft={<Ionicons name="star" size={14} color="gold" />}
         />
@@ -32,11 +28,7 @@ export const Ratings: React.FC<Props> = ({ item, ...props }) => {
           variant="gray"
           iconLeft={
             <Image
-              source={
-                item.CriticRating < 60
-                  ? require("@/assets/images/rotten-tomatoes.png")
-                  : require("@/assets/images/not-rotten-tomatoes.svg")
-              }
+              source={require("@/assets/images/rotten-tomatoes.png")}
               style={{
                 width: 14,
                 height: 14,
@@ -48,86 +40,3 @@ export const Ratings: React.FC<Props> = ({ item, ...props }) => {
     </View>
   );
 };
-
-export const JellyserrRatings: React.FC<{ result: MovieResult | TvResult }> = ({
-  result,
-}) => {
-  const { jellyseerrApi } = useJellyseerr();
-  const { data, isLoading } = useQuery({
-    queryKey: ["jellyseerr", result.id, result.mediaType, "ratings"],
-    queryFn: async () => {
-      return result.mediaType === MediaType.MOVIE
-        ? jellyseerrApi?.movieRatings(result.id)
-        : jellyseerrApi?.tvRatings(result.id);
-    },
-    staleTime: (5).minutesToMilliseconds(),
-    retry: false,
-    enabled: !!jellyseerrApi,
-  });
-
-  return (
-    (isLoading ||
-      !!result.voteCount ||
-      (data?.criticsRating && !!data?.criticsScore) ||
-      (data?.audienceRating && !!data?.audienceScore)) && (
-      <View className="flex flex-row flex-wrap space-x-1">
-        {data?.criticsRating && !!data?.criticsScore && (
-          <Badge
-            text={`${data.criticsScore}%`}
-            variant="gray"
-            iconLeft={
-              <Image
-                className="mr-1"
-                source={
-                  data?.criticsRating === "Rotten"
-                    ? require("@/utils/jellyseerr/src/assets/rt_rotten.svg")
-                    : require("@/utils/jellyseerr/src/assets/rt_fresh.svg")
-                }
-                style={{
-                  width: 14,
-                  height: 14,
-                }}
-              />
-            }
-          />
-        )}
-        {data?.audienceRating && !!data?.audienceScore && (
-          <Badge
-            text={`${data.audienceScore}%`}
-            variant="gray"
-            iconLeft={
-              <Image
-                className="mr-1"
-                source={
-                  data?.audienceRating === "Spilled"
-                    ? require("@/utils/jellyseerr/src/assets/rt_aud_rotten.svg")
-                    : require("@/utils/jellyseerr/src/assets/rt_aud_fresh.svg")
-                }
-                style={{
-                  width: 14,
-                  height: 14,
-                }}
-              />
-            }
-          />
-        )}
-        {!!result.voteCount && (
-          <Badge
-            text={`${Math.round(result.voteAverage * 10)}%`}
-            variant="gray"
-            iconLeft={
-              <Image
-                className="mr-1"
-                source={require("@/utils/jellyseerr/src/assets/tmdb_logo.svg")}
-                style={{
-                  width: 14,
-                  height: 14,
-                }}
-              />
-            }
-          />
-        )}
-      </View>
-    )
-  );
-};

components/RoundButton.tsx

@@ -1,111 +0,0 @@
-import { Ionicons } from "@expo/vector-icons";
-import { BlurView } from "expo-blur";
-import { PropsWithChildren } from "react";
-import {
-  Platform,
-  TouchableOpacity,
-  TouchableOpacityProps,
-} from "react-native";
-
-interface Props extends TouchableOpacityProps {
-  onPress?: () => void;
-  icon?: keyof typeof Ionicons.glyphMap;
-  background?: boolean;
-  size?: "default" | "large";
-  fillColor?: "primary";
-  hapticFeedback?: boolean;
-}
-
-export const RoundButton: React.FC<PropsWithChildren<Props>> = ({
-  background = true,
-  icon,
-  onPress,
-  children,
-  size = "default",
-  fillColor,
-  hapticFeedback = true,
-  ...props
-}) => {
-  const buttonSize = size === "large" ? "h-10 w-10" : "h-9 w-9";
-  const fillColorClass = fillColor === "primary" ? "bg-purple-600" : "";
-
-  const handlePress = () => {
-    if (hapticFeedback) {
-    }
-    onPress?.();
-  };
-
-  if (fillColor)
-    return (
-      <TouchableOpacity
-        onPress={handlePress}
-        className={`rounded-full ${buttonSize} flex items-center justify-center ${fillColorClass}`}
-        {...props}
-      >
-        {icon ? (
-          <Ionicons
-            name={icon}
-            size={size === "large" ? 22 : 18}
-            color={"white"}
-          />
-        ) : null}
-        {children ? children : null}
-      </TouchableOpacity>
-    );
-
-  if (background === false)
-    return (
-      <TouchableOpacity
-        onPress={handlePress}
-        className={`rounded-full ${buttonSize} flex items-center justify-center ${fillColorClass}`}
-        {...props}
-      >
-        {icon ? (
-          <Ionicons
-            name={icon}
-            size={size === "large" ? 22 : 18}
-            color={"white"}
-          />
-        ) : null}
-        {children ? children : null}
-      </TouchableOpacity>
-    );
-
-  if (Platform.OS === "android")
-    return (
-      <TouchableOpacity
-        onPress={handlePress}
-        className={`rounded-full ${buttonSize} flex items-center justify-center ${
-          fillColor ? fillColorClass : "bg-neutral-800/80"
-        }`}
-        {...props}
-      >
-        {icon ? (
-          <Ionicons
-            name={icon}
-            size={size === "large" ? 22 : 18}
-            color={"white"}
-          />
-        ) : null}
-        {children ? children : null}
-      </TouchableOpacity>
-    );
-
-  return (
-    <TouchableOpacity onPress={handlePress} {...props}>
-      <BlurView
-        intensity={90}
-        className={`rounded-full overflow-hidden ${buttonSize} flex items-center justify-center ${fillColorClass}`}
-      >
-        {icon ? (
-          <Ionicons
-            name={icon}
-            size={size === "large" ? 22 : 18}
-            color={"white"}
-          />
-        ) : null}
-        {children ? children : null}
-      </BlurView>
-    </TouchableOpacity>
-  );
-};

components/SubtitleTrackSelector.tsx

@@ -1,36 +1,26 @@
 import { tc } from "@/utils/textTools";
 import { MediaSourceInfo } from "@jellyfin/sdk/lib/generated-client/models";
-import { useMemo, useState } from "react";
-import { Platform, TouchableOpacity, View, Modal } from "react-native";
+import { useMemo } from "react";
+import { TouchableOpacity, View } from "react-native";
+import * as DropdownMenu from "zeego/dropdown-menu";
 import { Text } from "./common/Text";
-import { SubtitleHelper } from "@/utils/SubtitleHelper";
-import { Ionicons } from "@expo/vector-icons";
 
 interface Props extends React.ComponentProps<typeof View> {
   source?: MediaSourceInfo;
   onChange: (value: number) => void;
   selected?: number | undefined;
-  isTranscoding?: boolean;
 }
 
 export const SubtitleTrackSelector: React.FC<Props> = ({
   source,
   onChange,
   selected,
-  isTranscoding,
   ...props
 }) => {
-  const [isModalVisible, setIsModalVisible] = useState(false);
-
-  const subtitleStreams = useMemo(() => {
-    const subtitleHelper = new SubtitleHelper(source?.MediaStreams ?? []);
-
-    if (isTranscoding && Platform.OS === "ios") {
-      return subtitleHelper.getUniqueSubtitles();
-    }
-
-    return subtitleHelper.getSubtitles();
-  }, [source, isTranscoding]);
+  const subtitleStreams = useMemo(
+    () => source?.MediaStreams?.filter((x) => x.Type === "Subtitle") ?? [],
+    [source]
+  );
 
   const selectedSubtitleSteam = useMemo(
     () => subtitleStreams.find((x) => x.Index === selected),
@@ -40,98 +30,59 @@ export const SubtitleTrackSelector: React.FC<Props> = ({
   if (subtitleStreams.length === 0) return null;
 
   return (
-    <>
-      <View
-        className="flex col shrink justify-start place-self-start items-start"
-        style={{
-          minWidth: 60,
-          maxWidth: 200,
-        }}
-      >
-        <View className="flex flex-col" {...props}>
-          <Text className="opacity-50 mb-1 text-xs">Subtitle</Text>
-          <TouchableOpacity
-            className="bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between"
-            onPress={() => setIsModalVisible(true)}
-          >
-            <Text>
-              {selectedSubtitleSteam
-                ? tc(selectedSubtitleSteam?.DisplayTitle, 7)
-                : "None"}
-            </Text>
-            <Ionicons
-              name="chevron-down"
-              size={16}
-              color="white"
-              style={{ opacity: 0.5 }}
-            />
-          </TouchableOpacity>
-        </View>
-      </View>
-
-      <Modal
-        visible={isModalVisible}
-        transparent
-        animationType="slide"
-        onRequestClose={() => setIsModalVisible(false)}
-      >
-        <TouchableOpacity
-          className="flex-1 bg-black/50"
-          activeOpacity={1}
-          onPress={() => setIsModalVisible(false)}
-        >
-          <View className="mt-auto bg-neutral-900 rounded-t-xl">
-            <View className="p-4 border-b border-neutral-800">
-              <Text className="text-lg font-bold text-center">
-                Subtitle Tracks
+    <View
+      className="flex col shrink justify-start place-self-start items-start"
+      style={{
+        minWidth: 60,
+        maxWidth: 200,
+      }}
+    >
+      <DropdownMenu.Root>
+        <DropdownMenu.Trigger>
+          <View className="flex flex-col " {...props}>
+            <Text className="opacity-50 mb-1 text-xs">Subtitle</Text>
+            <TouchableOpacity className="bg-neutral-900  h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between">
+              <Text className=" ">
+                {selectedSubtitleSteam
+                  ? tc(selectedSubtitleSteam?.DisplayTitle, 7)
+                  : "None"}
               </Text>
-            </View>
-
-            <View className="max-h-[50%]">
-              <TouchableOpacity
-                className="p-4 border-b border-neutral-800 flex-row items-center justify-between"
-                onPress={() => {
-                  onChange(-1);
-                  setIsModalVisible(false);
-                }}
-              >
-                <Text>None</Text>
-                {selected === -1 && (
-                  <Ionicons name="checkmark" size={24} color="white" />
-                )}
-              </TouchableOpacity>
-
-              {subtitleStreams?.map((subtitle, idx: number) => (
-                <TouchableOpacity
-                  key={idx.toString()}
-                  className="p-4 border-b border-neutral-800 flex-row items-center justify-between"
-                  onPress={() => {
-                    if (
-                      subtitle.Index !== undefined &&
-                      subtitle.Index !== null
-                    ) {
-                      onChange(subtitle.Index);
-                      setIsModalVisible(false);
-                    }
-                  }}
-                >
-                  <Text>{subtitle.DisplayTitle}</Text>
-                  {subtitle.Index === selected && (
-                    <Ionicons name="checkmark" size={24} color="white" />
-                  )}
-                </TouchableOpacity>
-              ))}
-            </View>
-
-            <TouchableOpacity
-              className="p-4 border-t border-neutral-800"
-              onPress={() => setIsModalVisible(false)}
-            >
-              <Text className="text-center text-purple-400">Cancel</Text>
             </TouchableOpacity>
           </View>
-        </TouchableOpacity>
-      </Modal>
-    </>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content
+          loop={true}
+          side="bottom"
+          align="start"
+          alignOffset={0}
+          avoidCollisions={true}
+          collisionPadding={8}
+          sideOffset={8}
+        >
+          <DropdownMenu.Label>Subtitle tracks</DropdownMenu.Label>
+          <DropdownMenu.Item
+            key={"-1"}
+            onSelect={() => {
+              onChange(-1);
+            }}
+          >
+            <DropdownMenu.ItemTitle>None</DropdownMenu.ItemTitle>
+          </DropdownMenu.Item>
+          {subtitleStreams?.map((subtitle, idx: number) => (
+            <DropdownMenu.Item
+              key={idx.toString()}
+              onSelect={() => {
+                if (subtitle.Index !== undefined && subtitle.Index !== null)
+                  onChange(subtitle.Index);
+              }}
+            >
+              <DropdownMenu.ItemTitle>
+                {subtitle.DisplayTitle}
+              </DropdownMenu.ItemTitle>
+            </DropdownMenu.Item>
+          ))}
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
+    </View>
   );
 };

components/common/ItemImage.tsx

@@ -1,3 +1,4 @@
+import { useImageColors } from "@/hooks/useImageColors";
 import { apiAtom } from "@/providers/JellyfinProvider";
 import { getItemImage } from "@/utils/getItemImage";
 import { Ionicons } from "@expo/vector-icons";

components/common/JellyseerrItemRouter.tsx

@@ -1,76 +0,0 @@
-import { useRouter, useSegments } from "expo-router";
-import React, { PropsWithChildren, useCallback, useMemo } from "react";
-import { TouchableOpacity, TouchableOpacityProps } from "react-native";
-import { MovieResult, TvResult } from "@/utils/jellyseerr/server/models/Search";
-import { useJellyseerr } from "@/hooks/useJellyseerr";
-import {
-  hasPermission,
-  Permission,
-} from "@/utils/jellyseerr/server/lib/permissions";
-import { MediaType } from "@/utils/jellyseerr/server/constants/media";
-
-interface Props extends TouchableOpacityProps {
-  result: MovieResult | TvResult;
-  mediaTitle: string;
-  releaseYear: number;
-  canRequest: boolean;
-  posterSrc: string;
-}
-
-export const TouchableJellyseerrRouter: React.FC<PropsWithChildren<Props>> = ({
-  result,
-  mediaTitle,
-  releaseYear,
-  canRequest,
-  posterSrc,
-  children,
-  ...props
-}) => {
-  const router = useRouter();
-  const segments = useSegments();
-  const { jellyseerrApi, jellyseerrUser, requestMedia } = useJellyseerr();
-
-  const from = segments[2];
-
-  const autoApprove = useMemo(() => {
-    return (
-      jellyseerrUser &&
-      hasPermission(Permission.AUTO_APPROVE, jellyseerrUser.permissions, {
-        type: "or",
-      })
-    );
-  }, [jellyseerrApi, jellyseerrUser]);
-
-  const request = useCallback(
-    () =>
-      requestMedia(mediaTitle, {
-        mediaId: result.id,
-        mediaType: result.mediaType,
-      }),
-    [jellyseerrApi, result]
-  );
-
-  if (from === "(home)" || from === "(search)" || from === "(libraries)")
-    return (
-      <>
-        <TouchableOpacity
-          onPress={() => {
-            // @ts-ignore
-            router.push({
-              pathname: `/(auth)/(tabs)/${from}/jellyseerr/page`,
-              params: {
-                ...result,
-                mediaTitle,
-                releaseYear,
-                canRequest,
-                posterSrc,
-              },
-            });
-          }}
-          {...props}
-        >
-          {children}
-        </TouchableOpacity>
-      </>
-    );
-};

components/common/TouchableItemRouter.tsx

@@ -1,9 +1,8 @@
-import { useMarkAsPlayed } from "@/hooks/useMarkAsPlayed";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import * as Haptics from "expo-haptics";
 import { useRouter, useSegments } from "expo-router";
 import { PropsWithChildren } from "react";
 import { TouchableOpacity, TouchableOpacityProps } from "react-native";
-import * as ContextMenu from "zeego/context-menu";
 
 interface Props extends TouchableOpacityProps {
   item: BaseItemDto;
@@ -46,10 +45,6 @@ export const itemRouter = (item: BaseItemDto, from: string) => {
     return `/(auth)/(tabs)/(libraries)/${item.Id}`;
   }
 
-  if (item.Type === "Playlist") {
-    return `/(auth)/(tabs)/(libraries)/${item.Id}`;
-  }
-
   return `/(auth)/(tabs)/${from}/items/page?id=${item.Id}`;
 };
 
@@ -63,12 +58,11 @@ export const TouchableItemRouter: React.FC<PropsWithChildren<Props>> = ({
 
   const from = segments[2];
 
-  const markAsPlayedStatus = useMarkAsPlayed(item);
-
   if (from === "(home)" || from === "(search)" || from === "(libraries)")
     return (
       <TouchableOpacity
         onPress={() => {
+          Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
           const url = itemRouter(item, from);
           // @ts-ignore
           router.push(url);

components/downloads/ActiveDownloads.tsx

@@ -0,0 +1,191 @@
+import { Text } from "@/components/common/Text";
+import { useDownload } from "@/providers/DownloadProvider";
+import { apiAtom } from "@/providers/JellyfinProvider";
+import { useSettings } from "@/utils/atoms/settings";
+import { JobStatus } from "@/utils/optimize-server";
+import { formatTimeString } from "@/utils/time";
+import { Ionicons } from "@expo/vector-icons";
+import { checkForExistingDownloads } from "@kesha-antonov/react-native-background-downloader";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useRouter } from "expo-router";
+import { FFmpegKit } from "ffmpeg-kit-react-native";
+import { useAtom } from "jotai";
+import {
+  ActivityIndicator,
+  TouchableOpacity,
+  TouchableOpacityProps,
+  View,
+  ViewProps,
+} from "react-native";
+import { toast } from "sonner-native";
+import { Button } from "../Button";
+import { Image } from "expo-image";
+import { useMemo } from "react";
+import { storage } from "@/utils/mmkv";
+
+interface Props extends ViewProps {}
+
+export const ActiveDownloads: React.FC<Props> = ({ ...props }) => {
+  const { processes } = useDownload();
+  if (processes?.length === 0)
+    return (
+      <View {...props} className="bg-neutral-900 p-4 rounded-2xl">
+        <Text className="text-lg font-bold">Active download</Text>
+        <Text className="opacity-50">No active downloads</Text>
+      </View>
+    );
+
+  return (
+    <View {...props} className="bg-neutral-900 p-4 rounded-2xl">
+      <Text className="text-lg font-bold mb-2">Active downloads</Text>
+      <View className="space-y-2">
+        {processes?.map((p) => (
+          <DownloadCard key={p.item.Id} process={p} />
+        ))}
+      </View>
+    </View>
+  );
+};
+
+interface DownloadCardProps extends TouchableOpacityProps {
+  process: JobStatus;
+}
+
+const DownloadCard = ({ process, ...props }: DownloadCardProps) => {
+  const { processes, startDownload } = useDownload();
+  const router = useRouter();
+  const { removeProcess, setProcesses } = useDownload();
+  const [settings] = useSettings();
+  const queryClient = useQueryClient();
+
+  const cancelJobMutation = useMutation({
+    mutationFn: async (id: string) => {
+      if (!process) throw new Error("No active download");
+
+      if (settings?.downloadMethod === "optimized") {
+        try {
+          const tasks = await checkForExistingDownloads();
+          for (const task of tasks) {
+            if (task.id === id) {
+              task.stop();
+            }
+          }
+        } catch (e) {
+          throw e;
+        } finally {
+          await removeProcess(id);
+          await queryClient.refetchQueries({ queryKey: ["jobs"] });
+        }
+      } else {
+        FFmpegKit.cancel(Number(id));
+        setProcesses((prev) => prev.filter((p) => p.id !== id));
+      }
+    },
+    onSuccess: () => {
+      toast.success("Download canceled");
+    },
+    onError: (e) => {
+      console.error(e);
+      toast.error("Could not cancel download");
+    },
+  });
+
+  const eta = (p: JobStatus) => {
+    if (!p.speed || !p.progress) return null;
+
+    const length = p?.item?.RunTimeTicks || 0;
+    const timeLeft = (length - length * (p.progress / 100)) / p.speed;
+    return formatTimeString(timeLeft, "tick");
+  };
+
+  const base64Image = useMemo(() => {
+    return storage.getString(process.item.Id!);
+  }, []);
+
+  return (
+    <TouchableOpacity
+      onPress={() => router.push(`/(auth)/items/page?id=${process.item.Id}`)}
+      className="relative bg-neutral-900 border border-neutral-800 rounded-2xl overflow-hidden"
+      {...props}
+    >
+      {(process.status === "optimizing" ||
+        process.status === "downloading") && (
+        <View
+          className={`
+        bg-purple-600 h-1 absolute bottom-0 left-0
+        `}
+          style={{
+            width: process.progress
+              ? `${Math.max(5, process.progress)}%`
+              : "5%",
+          }}
+        ></View>
+      )}
+      <View className="px-3 py-1.5 flex flex-col w-full">
+        <View className="flex flex-row items-center w-full">
+          {base64Image && (
+            <View className="w-14 aspect-[10/15] rounded-lg overflow-hidden mr-4">
+              <Image
+                source={{
+                  uri: `data:image/jpeg;base64,${base64Image}`,
+                }}
+                style={{
+                  width: "100%",
+                  height: "100%",
+                  resizeMode: "cover",
+                }}
+              />
+            </View>
+          )}
+          <View className="shrink mb-1">
+            <Text className="text-xs opacity-50">{process.item.Type}</Text>
+            <Text className="font-semibold shrink">{process.item.Name}</Text>
+            <Text className="text-xs opacity-50">
+              {process.item.ProductionYear}
+            </Text>
+            <View className="flex flex-row items-center space-x-2 mt-1 text-purple-600">
+              {process.progress === 0 ? (
+                <ActivityIndicator size={"small"} color={"white"} />
+              ) : (
+                <Text className="text-xs">{process.progress.toFixed(0)}%</Text>
+              )}
+              {process.speed && (
+                <Text className="text-xs">{process.speed?.toFixed(2)}x</Text>
+              )}
+              {eta(process) && (
+                <Text className="text-xs">ETA {eta(process)}</Text>
+              )}
+            </View>
+
+            <View className="flex flex-row items-center space-x-2 mt-1 text-purple-600">
+              <Text className="text-xs capitalize">{process.status}</Text>
+            </View>
+          </View>
+          <TouchableOpacity
+            disabled={cancelJobMutation.isPending}
+            onPress={() => cancelJobMutation.mutate(process.id)}
+            className="ml-auto"
+          >
+            {cancelJobMutation.isPending ? (
+              <ActivityIndicator size="small" color="white" />
+            ) : (
+              <Ionicons name="close" size={24} color="red" />
+            )}
+          </TouchableOpacity>
+        </View>
+        {process.status === "completed" && (
+          <View className="flex flex-row mt-4 space-x-4">
+            <Button
+              onPress={() => {
+                startDownload(process);
+              }}
+              className="w-full"
+            >
+              Download now
+            </Button>
+          </View>
+        )}
+      </View>
+    </TouchableOpacity>
+  );
+};

components/downloads/DownloadSize.tsx

@@ -0,0 +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 { TextProps } from "react-native";
+
+interface DownloadSizeProps extends TextProps {
+  items: BaseItemDto[];
+}
+
+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]);
+
+  useEffect(() => {
+    if (!downloadedFiles) return;
+
+    let s = 0;
+
+    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 "...";
+    return size;
+  }, [size]);
+
+  return (
+    <>
+      <Text className="text-xs text-neutral-500" {...props}>
+        {sizeText}
+      </Text>
+    </>
+  );
+};

components/downloads/EpisodeCard.tsx

@@ -0,0 +1,111 @@
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import * as Haptics from "expo-haptics";
+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 { 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 { TouchableItemRouter } from "../common/TouchableItemRouter";
+import ContinueWatchingPoster from "../ContinueWatchingPoster";
+
+interface EpisodeCardProps extends TouchableOpacityProps {
+  item: BaseItemDto;
+}
+
+export const EpisodeCard: React.FC<EpisodeCardProps> = ({ item, ...props }) => {
+  const { deleteFile } = useDownload();
+  const { openFile } = useDownloadedFileOpener();
+  const { showActionSheetWithOptions } = useActionSheet();
+
+  const base64Image = useMemo(() => {
+    return storage.getString(item.Id!);
+  }, [item]);
+
+  const handleOpenFile = useCallback(() => {
+    openFile(item);
+  }, [item, openFile]);
+
+  /**
+   * Handles deleting the file with haptic feedback.
+   */
+  const handleDeleteFile = useCallback(() => {
+    if (item.Id) {
+      deleteFile(item.Id);
+      Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+    }
+  }, [deleteFile, item.Id]);
+
+  const showActionSheet = useCallback(() => {
+    const options = ["Delete", "Cancel"];
+    const destructiveButtonIndex = 0;
+    const cancelButtonIndex = 1;
+
+    showActionSheetWithOptions(
+      {
+        options,
+        cancelButtonIndex,
+        destructiveButtonIndex,
+      },
+      (selectedIndex) => {
+        switch (selectedIndex) {
+          case destructiveButtonIndex:
+            // Delete
+            handleDeleteFile();
+            break;
+          case cancelButtonIndex:
+            // Cancelled
+            break;
+        }
+      }
+    );
+  }, [showActionSheetWithOptions, handleDeleteFile]);
+
+  return (
+    <TouchableOpacity
+      onPress={handleOpenFile}
+      onLongPress={showActionSheet}
+      key={item.Id}
+      className="flex flex-col mb-4"
+    >
+      <View className="flex flex-row items-start mb-2">
+        <View className="mr-2">
+          <ContinueWatchingPoster size="small" item={item} useEpisodePoster />
+        </View>
+        <View className="shrink">
+          <Text numberOfLines={2} className="">
+            {item.Name}
+          </Text>
+          <Text numberOfLines={1} className="text-xs text-neutral-500">
+            {`S${item.ParentIndexNumber?.toString()}:E${item.IndexNumber?.toString()}`}
+          </Text>
+          <Text className="text-xs text-neutral-500">
+            {runtimeTicksToSeconds(item.RunTimeTicks)}
+          </Text>
+        </View>
+      </View>
+
+      <Text numberOfLines={3} className="text-xs text-neutral-500 shrink">
+        {item.Overview}
+      </Text>
+    </TouchableOpacity>
+  );
+};
+
+// Wrap the parent component with ActionSheetProvider
+export const EpisodeCardWithActionSheet: React.FC<EpisodeCardProps> = (
+  props
+) => (
+  <ActionSheetProvider>
+    <EpisodeCard {...props} />
+  </ActionSheetProvider>
+);

components/downloads/MovieCard.tsx

@@ -0,0 +1,111 @@
+import {
+  ActionSheetProvider,
+  useActionSheet,
+} from "@expo/react-native-action-sheet";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import * as Haptics from "expo-haptics";
+import React, { useCallback, useMemo } from "react";
+import { TouchableOpacity, View } from "react-native";
+
+import { DownloadSize } from "@/components/downloads/DownloadSize";
+import { useDownloadedFileOpener } from "@/hooks/useDownloadedFileOpener";
+import { useDownload } from "@/providers/DownloadProvider";
+import { storage } from "@/utils/mmkv";
+import { Ionicons } from "@expo/vector-icons";
+import { Image } from "expo-image";
+import { ItemCardText } from "../ItemCardText";
+
+interface MovieCardProps {
+  item: BaseItemDto;
+}
+
+/**
+ * MovieCard component displays a movie with action sheet options.
+ * @param {MovieCardProps} props - The component props.
+ * @returns {React.ReactElement} The rendered MovieCard component.
+ */
+export const MovieCard: React.FC<MovieCardProps> = ({ item }) => {
+  const { deleteFile } = useDownload();
+  const { openFile } = useDownloadedFileOpener();
+  const { showActionSheetWithOptions } = useActionSheet();
+
+  const handleOpenFile = useCallback(() => {
+    openFile(item);
+  }, [item, openFile]);
+
+  const base64Image = useMemo(() => {
+    return storage.getString(item.Id!);
+  }, []);
+
+  /**
+   * Handles deleting the file with haptic feedback.
+   */
+  const handleDeleteFile = useCallback(() => {
+    if (item.Id) {
+      deleteFile(item.Id);
+      Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+    }
+  }, [deleteFile, item.Id]);
+
+  const showActionSheet = useCallback(() => {
+    const options = ["Delete", "Cancel"];
+    const destructiveButtonIndex = 0;
+    const cancelButtonIndex = 1;
+
+    showActionSheetWithOptions(
+      {
+        options,
+        cancelButtonIndex,
+        destructiveButtonIndex,
+      },
+      (selectedIndex) => {
+        switch (selectedIndex) {
+          case destructiveButtonIndex:
+            // Delete
+            handleDeleteFile();
+            break;
+          case cancelButtonIndex:
+            // Cancelled
+            break;
+        }
+      }
+    );
+  }, [showActionSheetWithOptions, handleDeleteFile]);
+
+  return (
+    <TouchableOpacity onPress={handleOpenFile} onLongPress={showActionSheet}>
+      {base64Image ? (
+        <View className="w-28 aspect-[10/15] rounded-lg overflow-hidden mr-2 border border-neutral-900">
+          <Image
+            source={{
+              uri: `data:image/jpeg;base64,${base64Image}`,
+            }}
+            style={{
+              width: "100%",
+              height: "100%",
+              resizeMode: "cover",
+            }}
+          />
+        </View>
+      ) : (
+        <View className="w-28 aspect-[10/15] rounded-lg bg-neutral-900 mr-2 flex items-center justify-center">
+          <Ionicons
+            name="image-outline"
+            size={24}
+            color="gray"
+            className="self-center mt-16"
+          />
+        </View>
+      )}
+      <ItemCardText item={item} />
+      <DownloadSize items={[item]} />
+    </TouchableOpacity>
+  );
+};
+
+// Wrap the parent component with ActionSheetProvider
+export const MovieCardWithActionSheet: React.FC<MovieCardProps> = (props) => (
+  <ActionSheetProvider>
+    <MovieCard {...props} />
+  </ActionSheetProvider>
+);

components/downloads/SeriesCard.tsx

@@ -0,0 +1,82 @@
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import {TouchableOpacity, View} from "react-native";
+import { Text } from "../common/Text";
+import React, {useCallback, useMemo} from "react";
+import {storage} from "@/utils/mmkv";
+import {Image} from "expo-image";
+import {Ionicons} from "@expo/vector-icons";
+import {router} from "expo-router";
+import {DownloadSize} from "@/components/downloads/DownloadSize";
+import {useDownload} from "@/providers/DownloadProvider";
+import {useActionSheet} from "@expo/react-native-action-sheet";
+
+export const SeriesCard: React.FC<{ items: BaseItemDto[] }> = ({items}) => {
+  const { deleteItems } = useDownload();
+  const { showActionSheetWithOptions } = useActionSheet();
+
+  const base64Image = useMemo(() => {
+    return storage.getString(items[0].SeriesId!);
+  }, []);
+
+  const deleteSeries = useCallback(
+    async () => deleteItems(items),
+    [items]
+  );
+
+  const showActionSheet = useCallback(() => {
+    const options = ["Delete", "Cancel"];
+    const destructiveButtonIndex = 0;
+
+    showActionSheetWithOptions({
+        options,
+        destructiveButtonIndex,
+      },
+      (selectedIndex) => {
+        if (selectedIndex == destructiveButtonIndex) {
+          deleteSeries();
+        }
+      }
+    );
+  }, [showActionSheetWithOptions, deleteSeries]);
+
+  return (
+    <TouchableOpacity
+      onPress={() => router.push(`/downloads/${items[0].SeriesId}`)}
+      onLongPress={showActionSheet}
+    >
+      {base64Image ? (
+        <View className="w-28 aspect-[10/15] rounded-lg overflow-hidden mr-2 border border-neutral-900">
+          <Image
+            source={{
+              uri: `data:image/jpeg;base64,${base64Image}`,
+            }}
+            style={{
+              width: "100%",
+              height: "100%",
+              resizeMode: "cover",
+            }}
+          />
+          <View
+            className="bg-purple-600 rounded-full h-6 w-6 flex items-center justify-center absolute bottom-1 right-1">
+            <Text className="text-xs font-bold">{items.length}</Text>
+          </View>
+        </View>
+      ) : (
+        <View className="w-28 aspect-[10/15] rounded-lg bg-neutral-900 mr-2 flex items-center justify-center">
+          <Ionicons
+            name="image-outline"
+            size={24}
+            color="gray"
+            className="self-center mt-16"
+          />
+        </View>
+      )}
+
+      <View className="w-28 mt-2 flex flex-col">
+        <Text numberOfLines={2} className="">{items[0].SeriesName}</Text>
+        <Text className="text-xs opacity-50">{items[0].ProductionYear}</Text>
+        <DownloadSize items={items} />
+      </View>
+    </TouchableOpacity>
+  );
+};

components/filters/FilterButton.tsx

@@ -1,7 +1,7 @@
 import { Text } from "@/components/common/Text";
 import { FontAwesome, Ionicons } from "@expo/vector-icons";
 import { useQuery } from "@tanstack/react-query";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { TouchableOpacity, View, ViewProps } from "react-native";
 import { FilterSheet } from "./FilterSheet";
 

components/home/LargeMovieCarousel.tsx

@@ -22,6 +22,7 @@ import { itemRouter, TouchableItemRouter } from "../common/TouchableItemRouter";
 import { Loader } from "../Loader";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
 import { useRouter, useSegments } from "expo-router";
+import * as Haptics from "expo-haptics";
 
 interface Props extends ViewProps {}
 
@@ -146,6 +147,7 @@ const RenderItem: React.FC<{ item: BaseItemDto }> = ({ item }) => {
   const handleRoute = useCallback(() => {
     if (!from) return;
     const url = itemRouter(item, from);
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
     // @ts-ignore
     if (url) router.push(url);
   }, [item, from]);

components/icons/JellyseerrIconStatus.tsx

@@ -1,72 +0,0 @@
-import {useEffect, useState} from "react";
-import {MediaStatus} from "@/utils/jellyseerr/server/constants/media";
-import {MaterialCommunityIcons} from "@expo/vector-icons";
-import {TouchableOpacity, View, ViewProps} from "react-native";
-import {MovieResult, TvResult} from "@/utils/jellyseerr/server/models/Search";
-
-interface Props {
-  mediaStatus?: MediaStatus;
-  showRequestIcon: boolean;
-  onPress?: () => void;
-}
-
-const JellyseerrIconStatus: React.FC<Props & ViewProps> = ({
-  mediaStatus,
-  showRequestIcon,
-  onPress,
-  ...props
-}) => {
-  const [badgeIcon, setBadgeIcon] = useState<keyof typeof MaterialCommunityIcons.glyphMap>();
-  const [badgeStyle, setBadgeStyle] = useState<string>();
-
-  // Match similar to what Jellyseerr is currently using
-  // https://github.com/Fallenbagel/jellyseerr/blob/8a097d5195749c8d1dca9b473b8afa96a50e2fe2/src/components/Common/StatusBadgeMini/index.tsx#L33C1-L62C4
-  useEffect(() => {
-    switch (mediaStatus) {
-      case MediaStatus.PROCESSING:
-        setBadgeStyle('bg-indigo-500 border-indigo-400 ring-indigo-400 text-indigo-100');
-        setBadgeIcon('clock');
-        break;
-      case MediaStatus.AVAILABLE:
-        setBadgeStyle('bg-purple-500 border-green-400 ring-green-400 text-green-100');
-        setBadgeIcon('check')
-        break;
-      case MediaStatus.PENDING:
-        setBadgeStyle('bg-yellow-500 border-yellow-400 ring-yellow-400 text-yellow-100');
-        setBadgeIcon('bell')
-        break;
-      case MediaStatus.BLACKLISTED:
-        setBadgeStyle('bg-red-500 border-white-400 ring-white-400 text-white');
-        setBadgeIcon('eye-off')
-        break;
-      case MediaStatus.PARTIALLY_AVAILABLE:
-        setBadgeStyle('bg-green-500 border-green-400 ring-green-400 text-green-100');
-        setBadgeIcon("minus");
-        break;
-      default:
-        if (showRequestIcon) {
-          setBadgeStyle('bg-green-600');
-          setBadgeIcon("plus")
-        }
-        break;
-    }
-  }, [mediaStatus, showRequestIcon, setBadgeStyle, setBadgeIcon])
-
-  return (
-    badgeIcon &&
-    <TouchableOpacity onPress={onPress} disabled={onPress == undefined}>
-        <View
-            className={`${badgeStyle ?? 'bg-purple-600'} rounded-full h-6 w-6 flex items-center justify-center ${props.className}`}
-            {...props}
-        >
-            <MaterialCommunityIcons
-                name={badgeIcon}
-                size={18}
-                color="white"
-            />
-        </View>
-    </TouchableOpacity>
-  )
-}
-
-export default JellyseerrIconStatus;

components/jellyseerr/DiscoverSlide.tsx

@@ -1,100 +0,0 @@
-import React, { useMemo } from "react";
-import DiscoverSlider from "@/utils/jellyseerr/server/entity/DiscoverSlider";
-import { DiscoverSliderType } from "@/utils/jellyseerr/server/constants/discover";
-import {
-  DiscoverEndpoint,
-  Endpoints,
-  useJellyseerr,
-} from "@/hooks/useJellyseerr";
-import { useInfiniteQuery } from "@tanstack/react-query";
-import { MovieResult, TvResult } from "@/utils/jellyseerr/server/models/Search";
-import JellyseerrPoster from "@/components/posters/JellyseerrPoster";
-import { Text } from "@/components/common/Text";
-import { FlashList } from "@shopify/flash-list";
-import { View } from "react-native";
-
-interface Props {
-  slide: DiscoverSlider;
-}
-const DiscoverSlide: React.FC<Props> = ({ slide }) => {
-  const { jellyseerrApi } = useJellyseerr();
-
-  const { data, isFetching, fetchNextPage, hasNextPage } = useInfiniteQuery({
-    queryKey: ["jellyseerr", "discover", slide.id],
-    queryFn: async ({ pageParam }) => {
-      let endpoint: DiscoverEndpoint | undefined = undefined;
-      let params: any = {
-        page: Number(pageParam),
-      };
-
-      switch (slide.type) {
-        case DiscoverSliderType.TRENDING:
-          endpoint = Endpoints.DISCOVER_TRENDING;
-          break;
-        case DiscoverSliderType.POPULAR_MOVIES:
-        case DiscoverSliderType.UPCOMING_MOVIES:
-          endpoint = Endpoints.DISCOVER_MOVIES;
-          if (slide.type === DiscoverSliderType.UPCOMING_MOVIES)
-            params = {
-              ...params,
-              primaryReleaseDateGte: new Date().toISOString().split("T")[0],
-            };
-          break;
-        case DiscoverSliderType.POPULAR_TV:
-        case DiscoverSliderType.UPCOMING_TV:
-          endpoint = Endpoints.DISCOVER_TV;
-          if (slide.type === DiscoverSliderType.UPCOMING_TV)
-            params = {
-              ...params,
-              firstAirDateGte: new Date().toISOString().split("T")[0],
-            };
-          break;
-      }
-
-      return endpoint ? jellyseerrApi?.discover(endpoint, params) : null;
-    },
-    initialPageParam: 1,
-    getNextPageParam: (lastPage, pages) =>
-      (lastPage?.page || pages?.findLast((p) => p?.results.length)?.page || 1) +
-      1,
-    enabled: !!jellyseerrApi,
-    staleTime: 0,
-  });
-
-  const flatData = useMemo(
-    () =>
-      data?.pages?.filter((p) => p?.results.length).flatMap((p) => p?.results),
-    [data]
-  );
-
-  return (
-    flatData &&
-    flatData?.length > 0 && (
-      <View className="mb-4">
-        <Text className="font-bold text-lg mb-2">
-          {DiscoverSliderType[slide.type].toString().toTitle()}
-        </Text>
-        <FlashList
-          horizontal
-          showsHorizontalScrollIndicator={false}
-          keyExtractor={(item) => item!!.id.toString()}
-          estimatedItemSize={250}
-          data={flatData}
-          onEndReachedThreshold={1}
-          onEndReached={() => {
-            if (hasNextPage) fetchNextPage();
-          }}
-          renderItem={({ item }) =>
-            item ? (
-              <JellyseerrPoster item={item as MovieResult | TvResult} />
-            ) : (
-              <></>
-            )
-          }
-        />
-      </View>
-    )
-  );
-};
-
-export default DiscoverSlide;

components/music/SongsListItem.tsx

@@ -8,6 +8,11 @@ import { useRouter } from "expo-router";
 import { useAtom } from "jotai";
 import { useCallback } from "react";
 import { TouchableOpacity, TouchableOpacityProps, View } from "react-native";
+import CastContext, {
+  PlayServicesState,
+  useCastDevice,
+  useRemoteMediaClient,
+} from "react-native-google-cast";
 
 interface Props extends TouchableOpacityProps {
   collectionId: string;
@@ -27,14 +32,40 @@ export const SongsListItem: React.FC<Props> = ({
 }) => {
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
+  const castDevice = useCastDevice();
   const router = useRouter();
+  const client = useRemoteMediaClient();
   const { showActionSheetWithOptions } = useActionSheet();
 
   const { setPlaySettings } = usePlaySettings();
 
   const openSelect = () => {
-    play("device");
-    return;
+    if (!castDevice?.deviceId) {
+      play("device");
+      return;
+    }
+
+    const options = ["Chromecast", "Device", "Cancel"];
+    const cancelButtonIndex = 2;
+
+    showActionSheetWithOptions(
+      {
+        options,
+        cancelButtonIndex,
+      },
+      (selectedIndex: number | undefined) => {
+        switch (selectedIndex) {
+          case 0:
+            play("cast");
+            break;
+          case 1:
+            play("device");
+            break;
+          case cancelButtonIndex:
+            break;
+        }
+      }
+    );
   };
 
   const play = useCallback(async (type: "device" | "cast") => {

components/posters/JellyseerrPoster.tsx

@@ -1,92 +0,0 @@
-import {View, ViewProps} from "react-native";
-import {Image} from "expo-image";
-import {MaterialCommunityIcons} from "@expo/vector-icons";
-import {Text} from "@/components/common/Text";
-import {useEffect, useMemo, useState} from "react";
-import {MovieResult, Results, TvResult} from "@/utils/jellyseerr/server/models/Search";
-import {MediaStatus, MediaType} from "@/utils/jellyseerr/server/constants/media";
-import {useJellyseerr} from "@/hooks/useJellyseerr";
-import {hasPermission, Permission} from "@/utils/jellyseerr/server/lib/permissions";
-import {TouchableJellyseerrRouter} from "@/components/common/JellyseerrItemRouter";
-import JellyseerrIconStatus from "@/components/icons/JellyseerrIconStatus";
-interface Props extends ViewProps {
-  item: MovieResult | TvResult;
-}
-
-const JellyseerrPoster: React.FC<Props> = ({
-  item,
-  ...props
-}) => {
-  const {jellyseerrUser, jellyseerrApi} = useJellyseerr();
-  // const imageSource =
-
-  const imageSrc = useMemo(() =>
-      item.posterPath ?
-        `https://image.tmdb.org/t/p/w300_and_h450_face${item.posterPath}`
-        : jellyseerrApi?.axios?.defaults.baseURL + `/images/overseerr_poster_not_found_logo_top.png`,
-    [item, jellyseerrApi]
-  )
-  const title = useMemo(() => item.mediaType === MediaType.MOVIE ? item.title : item.name, [item])
-  const releaseYear = useMemo(() =>
-    new Date(item.mediaType === MediaType.MOVIE ? item.releaseDate : item.firstAirDate).getFullYear(),
-    [item]
-  )
-
-  const showRequestButton = useMemo(() =>
-    jellyseerrUser && hasPermission(
-      [
-        Permission.REQUEST,
-        item.mediaType === 'movie'
-          ? Permission.REQUEST_MOVIE
-          : Permission.REQUEST_TV,
-      ],
-      jellyseerrUser.permissions,
-      {type: 'or'}
-    ),
-    [item, jellyseerrUser]
-  )
-
-  const canRequest = useMemo(() => {
-    const status = item?.mediaInfo?.status
-    return showRequestButton && !status || status === MediaStatus.UNKNOWN
-  }, [item])
-
-  return (
-    <TouchableJellyseerrRouter
-      result={item}
-      mediaTitle={title}
-      releaseYear={releaseYear}
-      canRequest={canRequest}
-      posterSrc={imageSrc}
-    >
-      <View className="flex flex-col w-28 mr-2">
-        <View className="relative rounded-lg overflow-hidden border border-neutral-900 w-28 aspect-[10/15]">
-          <Image
-            key={item.id}
-            id={item.id.toString()}
-            source={{uri: imageSrc}}
-            cachePolicy={"memory-disk"}
-            contentFit="cover"
-            style={{
-              aspectRatio: "10/15",
-              width: "100%",
-            }}
-          />
-          <JellyseerrIconStatus
-            className="absolute bottom-1 right-1"
-            showRequestIcon={canRequest}
-            mediaStatus={item?.mediaInfo?.status}
-          />
-
-        </View>
-        <View className="mt-2 flex flex-col">
-          <Text numberOfLines={2}>{title}</Text>
-          <Text className="text-xs opacity-50">{releaseYear}</Text>
-        </View>
-      </View>
-    </TouchableJellyseerrRouter>
-  )
-}
-
-
-export default JellyseerrPoster;

components/series/JellyseerrSeasons.tsx

@@ -1,275 +0,0 @@
-import { Text } from "@/components/common/Text";
-import React, { useCallback, useMemo, useState } from "react";
-import { Alert, TouchableOpacity, View } from "react-native";
-import { TvDetails } from "@/utils/jellyseerr/server/models/Tv";
-import { FlashList } from "@shopify/flash-list";
-import { orderBy } from "lodash";
-import { Tags } from "@/components/GenreTags";
-import JellyseerrIconStatus from "@/components/icons/JellyseerrIconStatus";
-import Season from "@/utils/jellyseerr/server/entity/Season";
-import {
-  MediaStatus,
-  MediaType,
-} from "@/utils/jellyseerr/server/constants/media";
-import { Ionicons } from "@expo/vector-icons";
-import { RoundButton } from "@/components/RoundButton";
-import { useJellyseerr } from "@/hooks/useJellyseerr";
-import { TvResult } from "@/utils/jellyseerr/server/models/Search";
-import { useQuery } from "@tanstack/react-query";
-import { HorizontalScroll } from "@/components/common/HorrizontalScroll";
-import { Image } from "expo-image";
-import MediaRequest from "@/utils/jellyseerr/server/entity/MediaRequest";
-import { Loader } from "../Loader";
-
-const JellyseerrSeasonEpisodes: React.FC<{
-  details: TvDetails;
-  seasonNumber: number;
-}> = ({ details, seasonNumber }) => {
-  const { jellyseerrApi } = useJellyseerr();
-
-  const { data: seasonWithEpisodes, isLoading } = useQuery({
-    queryKey: ["jellyseerr", details.id, "season", seasonNumber],
-    queryFn: async () => jellyseerrApi?.tvSeason(details.id, seasonNumber),
-    enabled: details.seasons.filter((s) => s.seasonNumber !== 0).length > 0,
-  });
-
-  return (
-    <HorizontalScroll
-      horizontal
-      loading={isLoading}
-      showsHorizontalScrollIndicator={false}
-      estimatedItemSize={50}
-      data={seasonWithEpisodes?.episodes}
-      keyExtractor={(item) => item.id}
-      renderItem={(item, index) => (
-        <RenderItem key={index} item={item} index={index} />
-      )}
-    />
-  );
-};
-
-const RenderItem = ({ item, index }: any) => {
-  const { jellyseerrApi } = useJellyseerr();
-  const [imageError, setImageError] = useState(false);
-
-  return (
-    <View className="flex flex-col w-44 mt-2">
-      <View className="relative aspect-video rounded-lg overflow-hidden border border-neutral-800">
-        {!imageError ? (
-          <Image
-            key={item.id}
-            id={item.id}
-            source={{
-              uri: jellyseerrApi?.tvStillImageProxy(item.stillPath),
-            }}
-            cachePolicy={"memory-disk"}
-            contentFit="cover"
-            className="w-full h-full"
-            onError={(e) => {
-              setImageError(true);
-            }}
-          />
-        ) : (
-          <View className="flex flex-col w-full h-full items-center justify-center border border-neutral-800 bg-neutral-900">
-            <Ionicons
-              name="image-outline"
-              size={24}
-              color="white"
-              style={{ opacity: 0.4 }}
-            />
-          </View>
-        )}
-      </View>
-      <View className="shrink mt-1">
-        <Text numberOfLines={2} className="">
-          {item.name}
-        </Text>
-        <Text numberOfLines={1} className="text-xs text-neutral-500">
-          {`S${item.seasonNumber}:E${item.episodeNumber}`}
-        </Text>
-      </View>
-
-      <Text numberOfLines={3} className="text-xs text-neutral-500 shrink">
-        {item.overview}
-      </Text>
-    </View>
-  );
-};
-
-const JellyseerrSeasons: React.FC<{
-  isLoading: boolean;
-  result?: TvResult;
-  details?: TvDetails;
-}> = ({ isLoading, result, details }) => {
-  if (!details) return null;
-
-  const { jellyseerrApi, requestMedia } = useJellyseerr();
-  const [seasonStates, setSeasonStates] = useState<{
-    [key: number]: boolean;
-  }>();
-  const seasons = useMemo(() => {
-    const mediaInfoSeasons = details?.mediaInfo?.seasons?.filter(
-      (s: Season) => s.seasonNumber !== 0
-    );
-    const requestedSeasons = details?.mediaInfo?.requests?.flatMap(
-      (r: MediaRequest) => r.seasons
-    );
-    return details.seasons?.map((season) => {
-      return {
-        ...season,
-        status:
-          // What our library status is
-          mediaInfoSeasons?.find(
-            (mediaSeason: Season) =>
-              mediaSeason.seasonNumber === season.seasonNumber
-          )?.status ??
-          // What our request status is
-          requestedSeasons?.find(
-            (s: Season) => s.seasonNumber === season.seasonNumber
-          )?.status ??
-          // Otherwise set it as unknown
-          MediaStatus.UNKNOWN,
-      };
-    });
-  }, [details]);
-
-  const allSeasonsAvailable = useMemo(
-    () => seasons?.every((season) => season.status === MediaStatus.AVAILABLE),
-    [seasons]
-  );
-
-  const requestAll = useCallback(() => {
-    if (details && jellyseerrApi) {
-      requestMedia(result?.name!!, {
-        mediaId: details.id,
-        mediaType: MediaType.TV,
-        tvdbId: details.externalIds?.tvdbId,
-        seasons: seasons
-          .filter(
-            (s) => s.status === MediaStatus.UNKNOWN && s.seasonNumber !== 0
-          )
-          .map((s) => s.seasonNumber),
-      });
-    }
-  }, [jellyseerrApi, seasons, details]);
-
-  const promptRequestAll = useCallback(
-    () =>
-      Alert.alert("Confirm", "Are you sure you want to request all seasons?", [
-        {
-          text: "Cancel",
-          style: "cancel",
-        },
-        {
-          text: "Yes",
-          onPress: requestAll,
-        },
-      ]),
-    [requestAll]
-  );
-
-  if (isLoading)
-    return (
-      <View>
-        <View className="flex flex-row justify-between items-end px-4">
-          <Text className="text-lg font-bold mb-2">Seasons</Text>
-          {!allSeasonsAvailable && (
-            <RoundButton className="mb-2 pa-2" onPress={promptRequestAll}>
-              <Ionicons name="bag-add" color="white" size={26} />
-            </RoundButton>
-          )}
-        </View>
-        <Loader />
-      </View>
-    );
-
-  return (
-    <FlashList
-      data={orderBy(
-        details.seasons.filter((s) => s.seasonNumber !== 0),
-        "seasonNumber",
-        "desc"
-      )}
-      ListHeaderComponent={() => (
-        <View className="flex flex-row justify-between items-end px-4">
-          <Text className="text-lg font-bold mb-2">Seasons</Text>
-          {!allSeasonsAvailable && (
-            <RoundButton className="mb-2 pa-2" onPress={promptRequestAll}>
-              <Ionicons name="bag-add" color="white" size={26} />
-            </RoundButton>
-          )}
-        </View>
-      )}
-      ItemSeparatorComponent={() => <View className="h-2" />}
-      estimatedItemSize={250}
-      renderItem={({ item: season }) => (
-        <>
-          <TouchableOpacity
-            onPress={() =>
-              setSeasonStates((prevState) => ({
-                ...prevState,
-                [season.seasonNumber]: !prevState?.[season.seasonNumber],
-              }))
-            }
-            className="px-4"
-          >
-            <View
-              className="flex flex-row justify-between items-center bg-gray-100/10 rounded-xl z-20 h-12 w-full px-4"
-              key={season.id}
-            >
-              <Tags
-                textClass=""
-                tags={[
-                  `Season ${season.seasonNumber}`,
-                  `${season.episodeCount} Episodes`,
-                ]}
-              />
-              {[0].map(() => {
-                const canRequest =
-                  seasons?.find((s) => s.seasonNumber === season.seasonNumber)
-                    ?.status === MediaStatus.UNKNOWN;
-                return (
-                  <JellyseerrIconStatus
-                    key={0}
-                    onPress={
-                      canRequest
-                        ? () =>
-                            requestMedia(
-                              `${result?.name!!}, Season ${
-                                season.seasonNumber
-                              }`,
-                              {
-                                mediaId: details.id,
-                                mediaType: MediaType.TV,
-                                tvdbId: details.externalIds?.tvdbId,
-                                seasons: [season.seasonNumber],
-                              }
-                            )
-                        : undefined
-                    }
-                    className={canRequest ? "bg-gray-700/40" : undefined}
-                    mediaStatus={
-                      seasons?.find(
-                        (s) => s.seasonNumber === season.seasonNumber
-                      )?.status
-                    }
-                    showRequestIcon={canRequest}
-                  />
-                );
-              })}
-            </View>
-          </TouchableOpacity>
-          {seasonStates?.[season.seasonNumber] && (
-            <JellyseerrSeasonEpisodes
-              key={season.seasonNumber}
-              details={details}
-              seasonNumber={season.seasonNumber}
-            />
-          )}
-        </>
-      )}
-    />
-  );
-};
-
-export default JellyseerrSeasons;

components/series/NextUp.tsx

@@ -11,7 +11,6 @@ import { Text } from "../common/Text";
 import ContinueWatchingPoster from "../ContinueWatchingPoster";
 import { ItemCardText } from "../ItemCardText";
 import { TouchableItemRouter } from "../common/TouchableItemRouter";
-import { FlashList } from "@shopify/flash-list";
 
 export const NextUp: React.FC<{ seriesId: string }> = ({ seriesId }) => {
   const [user] = useAtom(userAtom);
@@ -44,14 +43,10 @@ export const NextUp: React.FC<{ seriesId: string }> = ({ seriesId }) => {
 
   return (
     <View>
-      <Text className="text-lg font-bold px-4 mb-2">Next up</Text>
-      <FlashList
-        contentContainerStyle={{ paddingLeft: 16 }}
-        horizontal
-        estimatedItemSize={172}
-        showsHorizontalScrollIndicator={false}
+      <Text className="text-lg font-bold mb-2 px-4">Next up</Text>
+      <HorizontalScroll
         data={items}
-        renderItem={({ item, index }) => (
+        renderItem={(item, index) => (
           <TouchableItemRouter
             item={item}
             key={index}

components/series/SeasonDropdown.tsx

@@ -1,8 +1,8 @@
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { useEffect, useMemo, useState } from "react";
-import { TouchableOpacity, View, Modal } from "react-native";
+import { useEffect, useMemo } from "react";
+import { TouchableOpacity, View } from "react-native";
+import * as DropdownMenu from "zeego/dropdown-menu";
 import { Text } from "../common/Text";
-import { Ionicons } from "@expo/vector-icons";
 
 type Props = {
   item: BaseItemDto;
@@ -19,7 +19,7 @@ type SeasonKeys = {
 };
 
 export type SeasonIndexState = {
-  [seriesId: string]: number | string | null | undefined;
+  [seriesId: string]: number | null | undefined;
 };
 
 export const SeasonDropdown: React.FC<Props> = ({
@@ -29,8 +29,6 @@ export const SeasonDropdown: React.FC<Props> = ({
   state,
   onSelect,
 }) => {
-  const [isModalVisible, setIsModalVisible] = useState(false);
-
   const keys = useMemo<SeasonKeys>(
     () =>
       item.Type === "Episode"
@@ -57,6 +55,7 @@ export const SeasonDropdown: React.FC<Props> = ({
       let initialIndex: number | undefined;
 
       if (initialSeasonIndex !== undefined) {
+        // Use the provided initialSeasonIndex if it exists in the seasons
         const seasonExists = seasons.some(
           (season: any) => season[keys.index] === initialSeasonIndex
         );
@@ -66,6 +65,7 @@ export const SeasonDropdown: React.FC<Props> = ({
       }
 
       if (initialIndex === undefined) {
+        // Fall back to the previous logic if initialIndex is not set
         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];
@@ -87,65 +87,35 @@ export const SeasonDropdown: React.FC<Props> = ({
     Number(a[keys.index]) - Number(b[keys.index]);
 
   return (
-    <>
-      <TouchableOpacity
-        className="bg-neutral-900 rounded-2xl border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between"
-        onPress={() => setIsModalVisible(true)}
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger>
+        <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>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content
+        loop={true}
+        side="bottom"
+        align="start"
+        alignOffset={0}
+        avoidCollisions={true}
+        collisionPadding={8}
+        sideOffset={8}
       >
-        <Text>Season {seasonIndex}</Text>
-        <Ionicons
-          name="chevron-down"
-          size={16}
-          color="white"
-          style={{ opacity: 0.5, marginLeft: 8 }}
-        />
-      </TouchableOpacity>
-
-      <Modal
-        visible={isModalVisible}
-        transparent
-        animationType="slide"
-        onRequestClose={() => setIsModalVisible(false)}
-      >
-        <TouchableOpacity
-          className="flex-1 bg-black/50"
-          activeOpacity={1}
-          onPress={() => setIsModalVisible(false)}
-        >
-          <View className="mt-auto bg-neutral-900 rounded-t-xl">
-            <View className="p-4 border-b border-neutral-800">
-              <Text className="text-lg font-bold text-center">
-                Select Season
-              </Text>
-            </View>
-
-            <View className="max-h-[50%]">
-              {seasons?.sort(sortByIndex).map((season: any) => (
-                <TouchableOpacity
-                  key={season[keys.title]}
-                  className="p-4 border-b border-neutral-800 flex-row items-center justify-between"
-                  onPress={() => {
-                    onSelect(season);
-                    setIsModalVisible(false);
-                  }}
-                >
-                  <Text>{season[keys.title]}</Text>
-                  {Number(season[keys.index]) === Number(seasonIndex) && (
-                    <Ionicons name="checkmark" size={24} color="white" />
-                  )}
-                </TouchableOpacity>
-              ))}
-            </View>
-
-            <TouchableOpacity
-              className="p-4 border-t border-neutral-800"
-              onPress={() => setIsModalVisible(false)}
-            >
-              <Text className="text-center text-purple-400">Cancel</Text>
-            </TouchableOpacity>
-          </View>
-        </TouchableOpacity>
-      </Modal>
-    </>
+        <DropdownMenu.Label>Seasons</DropdownMenu.Label>
+        {seasons?.sort(sortByIndex).map((season: any) => (
+          <DropdownMenu.Item
+            key={season[keys.title]}
+            onSelect={() => onSelect(season)}
+          >
+            <DropdownMenu.ItemTitle>
+              {season[keys.title]}
+            </DropdownMenu.ItemTitle>
+          </DropdownMenu.Item>
+        ))}
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
   );
 };

components/series/SeasonPicker.tsx

@@ -1,20 +1,22 @@
-import {
-  SeasonDropdown,
-  SeasonIndexState,
-} from "@/components/series/SeasonDropdown";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
 import { runtimeTicksToSeconds } from "@/utils/time";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { getTvShowsApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 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 { 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";
 
 type Props = {
   item: BaseItemDto;
@@ -28,10 +30,7 @@ export const SeasonPicker: React.FC<Props> = ({ item, initialSeasonIndex }) => {
   const [user] = useAtom(userAtom);
   const [seasonIndexState, setSeasonIndexState] = useAtom(seasonIndexAtom);
 
-  const seasonIndex = useMemo(
-    () => seasonIndexState[item.Id ?? ""],
-    [item, seasonIndexState]
-  );
+  const seasonIndex = seasonIndexState[item.Id ?? ""];
 
   const { data: seasons } = useQuery({
     queryKey: ["seasons", item.Id],
@@ -54,28 +53,19 @@ export const SeasonPicker: React.FC<Props> = ({ item, initialSeasonIndex }) => {
 
       return response.data.Items;
     },
-    staleTime: 60,
     enabled: !!api && !!user?.Id && !!item.Id,
   });
 
-  const selectedSeasonId: string | null = useMemo(() => {
-    const season: BaseItemDto = seasons?.find(
-      (s: BaseItemDto) =>
-        s.IndexNumber === seasonIndex || s.Name === seasonIndex
-    );
-
-    if (!season?.Id) return null;
-
-    return season.Id!;
-  }, [seasons, seasonIndex]);
+  const selectedSeasonId: string | null = useMemo(
+    () =>
+      seasons?.find((season: any) => season.IndexNumber === seasonIndex)?.Id,
+    [seasons, seasonIndex]
+  );
 
   const { data: episodes, isFetching } = useQuery({
     queryKey: ["episodes", item.Id, selectedSeasonId],
     queryFn: async () => {
-      if (!api || !user?.Id || !item.Id || !selectedSeasonId) {
-        return [];
-      }
-
+      if (!api || !user?.Id || !item.Id || !selectedSeasonId) return [];
       const res = await getTvShowsApi(api).getEpisodes({
         seriesId: item.Id,
         userId: user.Id,
@@ -84,12 +74,6 @@ export const SeasonPicker: React.FC<Props> = ({ item, initialSeasonIndex }) => {
         fields: ["MediaSources", "MediaStreams", "Overview"],
       });
 
-      if (res.data.TotalRecordCount === 0)
-        console.warn(
-          "No episodes found for season with ID ~",
-          selectedSeasonId
-        );
-
       return res.data.Items;
     },
     enabled: !!api && !!user?.Id && !!item.Id && !!selectedSeasonId,
@@ -134,15 +118,32 @@ export const SeasonPicker: React.FC<Props> = ({ item, initialSeasonIndex }) => {
           seasons={seasons}
           state={seasonIndexState}
           onSelect={(season) => {
-            if (!item.Id) return;
             setSeasonIndexState((prev) => ({
               ...prev,
-              [item.Id!]: season.IndexNumber ?? season.Name,
+              [item.Id ?? ""]: season.IndexNumber,
             }));
           }}
         />
+        <DownloadItems
+          className="ml-2"
+          items={episodes || []}
+          MissingDownloadIconComponent={() => (
+            <MaterialCommunityIcons
+              name="download-multiple"
+              size={20}
+              color="white"
+            />
+          )}
+          DownloadedIconComponent={() => (
+            <MaterialCommunityIcons
+              name="check-all"
+              size={20}
+              color="#9333ea"
+            />
+          )}
+        />
       </View>
-      <View className="px-4 flex flex-col mt-4">
+      <View className="px-4 flex flex-col my-4">
         {isFetching ? (
           <View
             style={{
@@ -178,6 +179,9 @@ export const SeasonPicker: React.FC<Props> = ({ item, initialSeasonIndex }) => {
                     {runtimeTicksToSeconds(e.RunTimeTicks)}
                   </Text>
                 </View>
+                <View className="self-start ml-auto -mt-0.5">
+                  <DownloadSingleItem item={e} />
+                </View>
               </View>
 
               <Text
@@ -189,13 +193,6 @@ export const SeasonPicker: React.FC<Props> = ({ item, initialSeasonIndex }) => {
             </TouchableItemRouter>
           ))
         )}
-        {(episodes?.length || 0) === 0 ? (
-          <View className="flex flex-col">
-            <Text className="text-neutral-500">
-              No episodes for this season
-            </Text>
-          </View>
-        ) : null}
       </View>
     </View>
   );

components/series/SeriesActions.tsx

@@ -1,32 +0,0 @@
-import { Ionicons } from "@expo/vector-icons";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
-import { useRouter } from "expo-router";
-import { useCallback, useMemo } from "react";
-import { TouchableOpacity, View, ViewProps } from "react-native";
-
-interface Props extends ViewProps {
-  item: BaseItemDto;
-}
-
-export const ItemActions = ({ item, ...props }: Props) => {
-  const router = useRouter();
-
-  const trailerLink = useMemo(() => item.RemoteTrailers?.[0]?.Url, [item]);
-
-  const openTrailer = useCallback(async () => {
-    if (!trailerLink) return;
-
-    const encodedTrailerLink = encodeURIComponent(trailerLink);
-    router.push(`/trailer/page?url=${encodedTrailerLink}`);
-  }, [router, trailerLink]);
-
-  return (
-    <View className="" {...props}>
-      {trailerLink && (
-        <TouchableOpacity onPress={openTrailer}>
-          <Ionicons name="film-outline" size={24} color="white" />
-        </TouchableOpacity>
-      )}
-    </View>
-  );
-};

components/series/SeriesHeader.tsx

@@ -1,64 +0,0 @@
-import { View } from "react-native";
-import { Text } from "../common/Text";
-import { Ratings } from "../Ratings";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
-import { useMemo } from "react";
-import { ItemActions } from "./SeriesActions";
-
-interface Props {
-  item: BaseItemDto;
-}
-
-export const SeriesHeader = ({ item }: Props) => {
-  const startYear = useMemo(() => {
-    if (item?.StartDate) {
-      return new Date(item.StartDate)
-        .toLocaleDateString("sv-SE", {
-          calendar: "gregory",
-          year: "numeric",
-        })
-        .toString()
-        .trim();
-    }
-    return item.ProductionYear?.toString().trim();
-  }, [item]);
-
-  const endYear = useMemo(() => {
-    if (item.EndDate) {
-      return new Date(item.EndDate)
-        .toLocaleDateString("sv-SE", {
-          calendar: "gregory",
-          year: "numeric",
-        })
-        .toString()
-        .trim();
-    }
-    return "";
-  }, [item]);
-
-  const yearString = useMemo(() => {
-    if (startYear && endYear) {
-      if (startYear === endYear) return startYear;
-      return `${startYear} - ${endYear}`;
-    }
-    if (startYear) {
-      return startYear;
-    }
-    if (endYear) {
-      return endYear;
-    }
-    return "";
-  }, [startYear, endYear]);
-
-  return (
-    <View className="px-4 py-4">
-      <Text className="text-3xl font-bold">{item?.Name}</Text>
-      <Text className="">{yearString}</Text>
-      <View className="flex flex-row items-center justify-between">
-        <Ratings item={item} className="mb-2" />
-        <ItemActions item={item} />
-      </View>
-      <Text className="">{item?.Overview}</Text>
-    </View>
-  );
-};

components/settings/AudioToggles.tsx

@@ -1,147 +0,0 @@
-import { TouchableOpacity, View, ViewProps, Modal } from "react-native";
-import { Text } from "../common/Text";
-import { useMedia } from "./MediaContext";
-import { Switch } from "react-native-gesture-handler";
-import { Ionicons } from "@expo/vector-icons";
-import { useState } from "react";
-
-interface Props extends ViewProps {}
-
-export const AudioToggles: React.FC<Props> = ({ ...props }) => {
-  const media = useMedia();
-  const { settings, updateSettings } = media;
-  const cultures = media.cultures;
-  const [isModalVisible, setIsModalVisible] = useState(false);
-
-  if (!settings) return null;
-
-  return (
-    <View>
-      <Text className="text-lg font-bold mb-2">Audio</Text>
-      <View className="flex flex-col rounded-xl mb-4 overflow-hidden divide-y-2 divide-solid divide-neutral-800">
-        <View className="flex flex-row items-center space-x-2 justify-between bg-neutral-900 p-4">
-          <View className="flex flex-col shrink">
-            <Text className="font-semibold">Audio language</Text>
-            <Text className="text-xs opacity-50">
-              Choose a default audio language.
-            </Text>
-          </View>
-          <TouchableOpacity
-            className="bg-neutral-800 rounded-lg border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between"
-            onPress={() => setIsModalVisible(true)}
-          >
-            <Text>{settings?.defaultAudioLanguage?.DisplayName || "None"}</Text>
-            <Ionicons
-              name="chevron-down"
-              size={16}
-              color="white"
-              style={{ opacity: 0.5, marginLeft: 8 }}
-            />
-          </TouchableOpacity>
-        </View>
-
-        <View className="flex flex-col">
-          <View className="flex flex-row items-center justify-between bg-neutral-900 p-4">
-            <View className="flex flex-col">
-              <Text className="font-semibold">Use Default Audio</Text>
-              <Text className="text-xs opacity-50">
-                Play default audio track regardless of language.
-              </Text>
-            </View>
-            <Switch
-              value={settings.playDefaultAudioTrack}
-              onValueChange={(value) =>
-                updateSettings({ playDefaultAudioTrack: value })
-              }
-            />
-          </View>
-        </View>
-
-        <View className="flex flex-col">
-          <View className="flex flex-row items-center justify-between bg-neutral-900 p-4">
-            <View className="flex flex-col">
-              <Text className="font-semibold">
-                Set Audio Track From Previous Item
-              </Text>
-              <Text className="text-xs opacity-50 min max-w-[85%]">
-                Try to set the audio track to the closest match to the last
-                video.
-              </Text>
-            </View>
-            <Switch
-              value={settings.rememberAudioSelections}
-              onValueChange={(value) =>
-                updateSettings({ rememberAudioSelections: value })
-              }
-            />
-          </View>
-        </View>
-      </View>
-
-      <Modal
-        visible={isModalVisible}
-        transparent
-        animationType="slide"
-        onRequestClose={() => setIsModalVisible(false)}
-      >
-        <TouchableOpacity
-          className="flex-1 bg-black/50"
-          activeOpacity={1}
-          onPress={() => setIsModalVisible(false)}
-        >
-          <View className="mt-auto bg-neutral-900 rounded-t-xl">
-            <View className="p-4 border-b border-neutral-800">
-              <Text className="text-lg font-bold text-center">
-                Select Language
-              </Text>
-            </View>
-
-            <View className="max-h-[50%]">
-              <TouchableOpacity
-                className="p-4 border-b border-neutral-800 flex-row items-center justify-between"
-                onPress={() => {
-                  updateSettings({
-                    defaultAudioLanguage: null,
-                  });
-                  setIsModalVisible(false);
-                }}
-              >
-                <Text>None</Text>
-                {!settings?.defaultAudioLanguage && (
-                  <Ionicons name="checkmark" size={24} color="white" />
-                )}
-              </TouchableOpacity>
-
-              {cultures?.map((l) => (
-                <TouchableOpacity
-                  key={l?.ThreeLetterISOLanguageName ?? "unknown"}
-                  className="p-4 border-b border-neutral-800 flex-row items-center justify-between"
-                  onPress={() => {
-                    updateSettings({
-                      defaultAudioLanguage: l,
-                    });
-                    setIsModalVisible(false);
-                  }}
-                >
-                  <Text>{l.DisplayName}</Text>
-                  {settings?.defaultAudioLanguage
-                    ?.ThreeLetterISOLanguageName ===
-                    l.ThreeLetterISOLanguageName && (
-                    <Ionicons name="checkmark" size={24} color="white" />
-                  )}
-                </TouchableOpacity>
-              ))}
-            </View>
-
-            <TouchableOpacity
-              className="p-4 border-t border-neutral-800"
-              onPress={() => setIsModalVisible(false)}
-            >
-              <Text className="text-center text-purple-400">Cancel</Text>
-            </TouchableOpacity>
-          </View>
-        </TouchableOpacity>
-      </Modal>
-    </View>
-  );
-};

components/settings/Jellyseerr.tsx

@@ -1,207 +0,0 @@
-import { JellyseerrApi, useJellyseerr } from "@/hooks/useJellyseerr";
-import { View } from "react-native";
-import { Text } from "../common/Text";
-import { useCallback, useRef, useState } from "react";
-import { Input } from "../common/Input";
-import { ListItem } from "../ListItem";
-import { Loader } from "../Loader";
-import { useSettings } from "@/utils/atoms/settings";
-import { Button } from "../Button";
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { useAtom } from "jotai";
-import { toast } from "sonner-native";
-import { useMutation } from "@tanstack/react-query";
-
-export const JellyseerrSettings = () => {
-  const {
-    jellyseerrApi,
-    jellyseerrUser,
-    setJellyseerrUser,
-    clearAllJellyseerData,
-  } = useJellyseerr();
-
-  const [user] = useAtom(userAtom);
-  const [settings, updateSettings] = useSettings();
-
-  const [promptForJellyseerrPass, setPromptForJellyseerrPass] =
-    useState<boolean>(false);
-
-  const [jellyseerrPassword, setJellyseerrPassword] = useState<
-    string | undefined
-  >(undefined);
-
-  const [jellyseerrServerUrl, setjellyseerrServerUrl] = useState<
-    string | undefined
-  >(settings?.jellyseerrServerUrl || undefined);
-
-  const loginToJellyseerrMutation = useMutation({
-    mutationFn: async () => {
-      if (!jellyseerrServerUrl || !user?.Name || !jellyseerrPassword) {
-        throw new Error("Missing required information for login");
-      }
-      const jellyseerrTempApi = new JellyseerrApi(jellyseerrServerUrl);
-      return jellyseerrTempApi.login(user.Name, jellyseerrPassword);
-    },
-    onSuccess: (user) => {
-      setJellyseerrUser(user);
-      updateSettings({ jellyseerrServerUrl });
-    },
-    onError: () => {
-      toast.error("Failed to login");
-    },
-    onSettled: () => {
-      setJellyseerrPassword(undefined);
-    },
-  });
-
-  const testJellyseerrServerUrlMutation = useMutation({
-    mutationFn: async () => {
-      if (!jellyseerrServerUrl || jellyseerrApi) return null;
-      const jellyseerrTempApi = new JellyseerrApi(jellyseerrServerUrl);
-      return jellyseerrTempApi.test();
-    },
-    onSuccess: (result) => {
-      if (result && result.isValid) {
-        if (result.requiresPass) {
-          setPromptForJellyseerrPass(true);
-        } else {
-          updateSettings({ jellyseerrServerUrl });
-        }
-      } else {
-        setPromptForJellyseerrPass(false);
-        setjellyseerrServerUrl(undefined);
-        clearAllJellyseerData();
-      }
-    },
-  });
-
-  const clearData = () => {
-    clearAllJellyseerData().finally(() => {
-      setjellyseerrServerUrl(undefined);
-      setPromptForJellyseerrPass(false);
-    });
-  };
-
-  return (
-    <View className="mt-4">
-      <Text className="text-lg font-bold mb-2">Jellyseerr</Text>
-      <View>
-        {jellyseerrUser ? (
-          <View className="flex flex-col rounded-xl overflow-hidden bg-neutral-900 pt-0 divide-y divide-neutral-800">
-            <ListItem
-              title="Total media requests"
-              subTitle={jellyseerrUser?.requestCount?.toString()}
-            />
-            <ListItem
-              title="Movie quota limit"
-              subTitle={
-                jellyseerrUser?.movieQuotaLimit?.toString() ?? "Unlimited"
-              }
-            />
-            <ListItem
-              title="Movie quota days"
-              subTitle={
-                jellyseerrUser?.movieQuotaDays?.toString() ?? "Unlimited"
-              }
-            />
-            <ListItem
-              title="TV quota limit"
-              subTitle={jellyseerrUser?.tvQuotaLimit?.toString() ?? "Unlimited"}
-            />
-            <ListItem
-              title="TV quota days"
-              subTitle={jellyseerrUser?.tvQuotaDays?.toString() ?? "Unlimited"}
-            />
-            <View className="p-4">
-              <Button color="red" onPress={clearData}>
-                Reset Jellyseerr config
-              </Button>
-            </View>
-          </View>
-        ) : (
-          <View className="flex flex-col rounded-xl overflow-hidden p-4 bg-neutral-900">
-            <Text className="text-xs text-red-600 mb-2">
-              This integration is in its early stages. Expect things to change.
-            </Text>
-            <Text className="font-bold mb-1">Server URL</Text>
-            <View className="flex flex-col shrink mb-2">
-              <Text className="text-xs text-gray-600">
-                Example: http(s)://your-host.url
-              </Text>
-              <Text className="text-xs text-gray-600">
-                (add port if required)
-              </Text>
-            </View>
-            <Input
-              placeholder="Jellyseerr URL..."
-              value={settings?.jellyseerrServerUrl ?? jellyseerrServerUrl}
-              defaultValue={
-                settings?.jellyseerrServerUrl ?? jellyseerrServerUrl
-              }
-              keyboardType="url"
-              returnKeyType="done"
-              autoCapitalize="none"
-              textContentType="URL"
-              onChangeText={setjellyseerrServerUrl}
-              editable={!testJellyseerrServerUrlMutation.isPending}
-            />
-
-            <Button
-              loading={testJellyseerrServerUrlMutation.isPending}
-              disabled={testJellyseerrServerUrlMutation.isPending}
-              color={promptForJellyseerrPass ? "red" : "purple"}
-              className="h-12 mt-2"
-              onPress={() => {
-                if (promptForJellyseerrPass) {
-                  clearData();
-                  return;
-                }
-
-                testJellyseerrServerUrlMutation.mutate();
-              }}
-              style={{
-                marginBottom: 8,
-              }}
-            >
-              {promptForJellyseerrPass ? "Clear" : "Save"}
-            </Button>
-
-            <View
-              pointerEvents={promptForJellyseerrPass ? "auto" : "none"}
-              style={{
-                opacity: promptForJellyseerrPass ? 1 : 0.5,
-              }}
-            >
-              <Text className="font-bold mb-2">Password</Text>
-              <Input
-                autoFocus={true}
-                focusable={true}
-                placeholder={`Enter password for Jellyfin user ${user?.Name}`}
-                value={jellyseerrPassword}
-                keyboardType="default"
-                secureTextEntry={true}
-                returnKeyType="done"
-                autoCapitalize="none"
-                textContentType="password"
-                onChangeText={setJellyseerrPassword}
-                editable={
-                  !loginToJellyseerrMutation.isPending &&
-                  promptForJellyseerrPass
-                }
-              />
-              <Button
-                loading={loginToJellyseerrMutation.isPending}
-                disabled={loginToJellyseerrMutation.isPending}
-                color="purple"
-                className="h-12 mt-2"
-                onPress={() => loginToJellyseerrMutation.mutate()}
-              >
-                Login
-              </Button>
-            </View>
-          </View>
-        )}
-      </View>
-    </View>
-  );
-};

components/settings/MediaContext.tsx

@@ -1,150 +0,0 @@
-import { Settings, useSettings } from "@/utils/atoms/settings";
-import { useAtomValue } from "jotai";
-import React, {
-  createContext,
-  useContext,
-  ReactNode,
-  useEffect,
-  useState,
-} from "react";
-import { apiAtom } from "@/providers/JellyfinProvider";
-import { getLocalizationApi, getUserApi } from "@jellyfin/sdk/lib/utils/api";
-import {
-  CultureDto,
-  UserDto,
-  UserConfiguration,
-} from "@jellyfin/sdk/lib/generated-client/models";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
-
-interface MediaContextType {
-  settings: Settings | null;
-  updateSettings: (update: Partial<Settings>) => void;
-  user: UserDto | undefined;
-  cultures: CultureDto[];
-}
-
-const MediaContext = createContext<MediaContextType | undefined>(undefined);
-
-export const useMedia = () => {
-  const context = useContext(MediaContext);
-  if (!context) {
-    throw new Error("useMedia must be used within a MediaProvider");
-  }
-  return context;
-};
-
-export const MediaProvider = ({ children }: { children: ReactNode }) => {
-  const [settings, updateSettings] = useSettings();
-  const api = useAtomValue(apiAtom);
-  const queryClient = useQueryClient();
-
-  const updateSetingsWrapper = (update: Partial<Settings>) => {
-    const updateUserConfiguration = async (
-      update: Partial<UserConfiguration>
-    ) => {
-      if (api && user) {
-        try {
-          await getUserApi(api).updateUserConfiguration({
-            userConfiguration: {
-              ...user.Configuration,
-              ...update,
-            },
-          });
-          queryClient.invalidateQueries({ queryKey: ["authUser"] });
-        } catch (error) {}
-      }
-    };
-
-    updateSettings(update);
-
-    let updatePayload = {
-      SubtitleMode: update?.subtitleMode ?? settings?.subtitleMode,
-      PlayDefaultAudioTrack:
-        update?.playDefaultAudioTrack ?? settings?.playDefaultAudioTrack,
-      RememberAudioSelections:
-        update?.rememberAudioSelections ?? settings?.rememberAudioSelections,
-      RememberSubtitleSelections:
-        update?.rememberSubtitleSelections ??
-        settings?.rememberSubtitleSelections,
-    } as Partial<UserConfiguration>;
-
-    updatePayload.AudioLanguagePreference =
-      update?.defaultAudioLanguage === null
-        ? ""
-        : update?.defaultAudioLanguage?.ThreeLetterISOLanguageName ||
-          settings?.defaultAudioLanguage?.ThreeLetterISOLanguageName ||
-          "";
-
-    updatePayload.SubtitleLanguagePreference =
-      update?.defaultSubtitleLanguage === null
-        ? ""
-        : update?.defaultSubtitleLanguage?.ThreeLetterISOLanguageName ||
-          settings?.defaultSubtitleLanguage?.ThreeLetterISOLanguageName ||
-          "";
-
-    updateUserConfiguration(updatePayload);
-  };
-
-  const { data: user } = useQuery({
-    queryKey: ["authUser"],
-    queryFn: async () => {
-      if (!api) return;
-      const userApi = await getUserApi(api).getCurrentUser();
-      return userApi.data;
-    },
-    enabled: !!api,
-    staleTime: 0,
-  });
-
-  const { data: cultures = [], isFetched: isCulturesFetched } = useQuery({
-    queryKey: ["cultures"],
-    queryFn: async () => {
-      if (!api) return [];
-      const localizationApi = await getLocalizationApi(api).getCultures();
-      const cultures = localizationApi.data;
-      return cultures;
-    },
-    enabled: !!api,
-    staleTime: 43200000, // 12 hours
-  });
-
-  // Set default settings from user configuration.s
-  useEffect(() => {
-    if (!user || cultures.length === 0) return;
-    const userSubtitlePreference =
-      user?.Configuration?.SubtitleLanguagePreference;
-    const userAudioPreference = user?.Configuration?.AudioLanguagePreference;
-
-    const subtitlePreference = cultures.find(
-      (x) => x.ThreeLetterISOLanguageName === userSubtitlePreference
-    );
-    const audioPreference = cultures.find(
-      (x) => x.ThreeLetterISOLanguageName === userAudioPreference
-    );
-
-    updateSettings({
-      defaultSubtitleLanguage: subtitlePreference,
-      defaultAudioLanguage: audioPreference,
-      subtitleMode: user?.Configuration?.SubtitleMode,
-      playDefaultAudioTrack: user?.Configuration?.PlayDefaultAudioTrack,
-      rememberAudioSelections: user?.Configuration?.RememberAudioSelections,
-      rememberSubtitleSelections:
-        user?.Configuration?.RememberSubtitleSelections,
-    });
-  }, [user, isCulturesFetched]);
-
-  if (!api) return null;
-
-  return (
-    <MediaContext.Provider
-      value={{
-        settings,
-        updateSettings: updateSetingsWrapper,
-        user,
-        cultures,
-      }}
-    >
-      {children}
-    </MediaContext.Provider>
-  );
-};

components/settings/MediaToggles.tsx

@@ -1,6 +1,9 @@
 import { useSettings } from "@/utils/atoms/settings";
 import { TouchableOpacity, View, ViewProps } from "react-native";
+import * as DropdownMenu from "zeego/dropdown-menu";
 import { Text } from "../common/Text";
+import { LANGUAGES } from "@/constants/Languages";
+import { TextInput } from "react-native-gesture-handler";
 
 interface Props extends ViewProps {}
 
@@ -13,6 +16,152 @@ export const MediaToggles: React.FC<Props> = ({ ...props }) => {
     <View>
       <Text className="text-lg font-bold mb-2">Media</Text>
       <View className="flex flex-col rounded-xl mb-4 overflow-hidden  divide-y-2 divide-solid divide-neutral-800">
+        <View
+          className={`
+              flex flex-row items-center space-x-2 justify-between bg-neutral-900 p-4
+            `}
+        >
+          <View className="flex flex-col shrink">
+            <Text className="font-semibold">Audio language</Text>
+            <Text className="text-xs opacity-50">
+              Choose a default audio language.
+            </Text>
+          </View>
+          <DropdownMenu.Root>
+            <DropdownMenu.Trigger>
+              <TouchableOpacity className="bg-neutral-800 rounded-lg border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between">
+                <Text>{settings?.defaultAudioLanguage?.label || "None"}</Text>
+              </TouchableOpacity>
+            </DropdownMenu.Trigger>
+            <DropdownMenu.Content
+              loop={true}
+              side="bottom"
+              align="start"
+              alignOffset={0}
+              avoidCollisions={true}
+              collisionPadding={8}
+              sideOffset={8}
+            >
+              <DropdownMenu.Label>Languages</DropdownMenu.Label>
+              <DropdownMenu.Item
+                key={"none-audio"}
+                onSelect={() => {
+                  updateSettings({
+                    defaultAudioLanguage: null,
+                  });
+                }}
+              >
+                <DropdownMenu.ItemTitle>None</DropdownMenu.ItemTitle>
+              </DropdownMenu.Item>
+              {LANGUAGES.map((l) => (
+                <DropdownMenu.Item
+                  key={l.value}
+                  onSelect={() => {
+                    updateSettings({
+                      defaultAudioLanguage: l,
+                    });
+                  }}
+                >
+                  <DropdownMenu.ItemTitle>{l.label}</DropdownMenu.ItemTitle>
+                </DropdownMenu.Item>
+              ))}
+            </DropdownMenu.Content>
+          </DropdownMenu.Root>
+        </View>
+        <View
+          className={`
+              flex flex-row items-center space-x-2 justify-between bg-neutral-900 p-4
+            `}
+        >
+          <View className="flex flex-col shrink">
+            <Text className="font-semibold">Subtitle language</Text>
+            <Text className="text-xs opacity-50">
+              Choose a default subtitle language.
+            </Text>
+          </View>
+          <DropdownMenu.Root>
+            <DropdownMenu.Trigger>
+              <TouchableOpacity className="bg-neutral-800 rounded-lg border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between">
+                <Text>
+                  {settings?.defaultSubtitleLanguage?.label || "None"}
+                </Text>
+              </TouchableOpacity>
+            </DropdownMenu.Trigger>
+            <DropdownMenu.Content
+              loop={true}
+              side="bottom"
+              align="start"
+              alignOffset={0}
+              avoidCollisions={true}
+              collisionPadding={8}
+              sideOffset={8}
+            >
+              <DropdownMenu.Label>Languages</DropdownMenu.Label>
+              <DropdownMenu.Item
+                key={"none-subs"}
+                onSelect={() => {
+                  updateSettings({
+                    defaultSubtitleLanguage: null,
+                  });
+                }}
+              >
+                <DropdownMenu.ItemTitle>None</DropdownMenu.ItemTitle>
+              </DropdownMenu.Item>
+              {LANGUAGES.map((l) => (
+                <DropdownMenu.Item
+                  key={l.value}
+                  onSelect={() => {
+                    updateSettings({
+                      defaultSubtitleLanguage: l,
+                    });
+                  }}
+                >
+                  <DropdownMenu.ItemTitle>{l.label}</DropdownMenu.ItemTitle>
+                </DropdownMenu.Item>
+              ))}
+            </DropdownMenu.Content>
+          </DropdownMenu.Root>
+        </View>
+
+        <View
+          className={`
+              flex flex-row items-center space-x-2 justify-between bg-neutral-900 p-4
+            `}
+        >
+          <View className="flex flex-col shrink">
+            <Text className="font-semibold">Subtitle Size</Text>
+            <Text className="text-xs opacity-50">
+              Choose a default subtitle size for direct play (only works for
+              some subtitle formats).
+            </Text>
+          </View>
+          <View className="flex flex-row items-center">
+            <TouchableOpacity
+              onPress={() =>
+                updateSettings({
+                  subtitleSize: Math.max(0, settings.subtitleSize - 5),
+                })
+              }
+              className="w-8 h-8 bg-neutral-800 rounded-l-lg flex items-center justify-center"
+            >
+              <Text>-</Text>
+            </TouchableOpacity>
+            <Text className="w-12 h-8 bg-neutral-800 first-letter:px-3 py-2 flex items-center justify-center">
+              {settings.subtitleSize}
+            </Text>
+            <TouchableOpacity
+              className="w-8 h-8 bg-neutral-800 rounded-r-lg flex items-center justify-center"
+              onPress={() =>
+                updateSettings({
+                  subtitleSize: Math.min(120, settings.subtitleSize + 5),
+                })
+              }
+            >
+              <Text>+</Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+
         <View
           className={`
               flex flex-row items-center space-x-2 justify-between bg-neutral-900 p-4

components/settings/SettingToggles.tsx

@@ -1,38 +1,83 @@
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { useSettings } from "@/utils/atoms/settings";
-import { Ionicons } from "@expo/vector-icons";
+import { useDownload } from "@/providers/DownloadProvider";
+import {
+  apiAtom,
+  getOrSetDeviceId,
+  userAtom,
+} from "@/providers/JellyfinProvider";
+import {ScreenOrientationEnum, Settings, useSettings} from "@/utils/atoms/settings";
+import {
+  BACKGROUND_FETCH_TASK,
+  registerBackgroundFetchAsync,
+  unregisterBackgroundFetchAsync,
+} from "@/utils/background-tasks";
+import { getStatistics } from "@/utils/optimize-server";
 import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
+import * as BackgroundFetch from "expo-background-fetch";
+import * as ScreenOrientation from "expo-screen-orientation";
+import * as TaskManager from "expo-task-manager";
 import { useAtom } from "jotai";
-import React, { useState } from "react";
+import {useEffect, useState} from "react";
 import {
   Linking,
-  Modal,
   Switch,
   TouchableOpacity,
   View,
   ViewProps,
 } from "react-native";
+import { toast } from "sonner-native";
+import * as DropdownMenu from "zeego/dropdown-menu";
 import { Button } from "../Button";
 import { Input } from "../common/Input";
 import { Text } from "../common/Text";
 import { Loader } from "../Loader";
-import { AudioToggles } from "./AudioToggles";
-import { JellyseerrSettings } from "./Jellyseerr";
-import { MediaProvider } from "./MediaContext";
 import { MediaToggles } from "./MediaToggles";
-import { SubtitleToggles } from "./SubtitleToggles";
+import {Stepper} from "@/components/inputs/Stepper";
+
 interface Props extends ViewProps {}
 
 export const SettingToggles: React.FC<Props> = ({ ...props }) => {
   const [settings, updateSettings] = useSettings();
+  const { setProcesses } = useDownload();
 
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
+
   const [marlinUrl, setMarlinUrl] = useState<string>("");
+  const [optimizedVersionsServerUrl, setOptimizedVersionsServerUrl] =
+    useState<string>(settings?.optimizedVersionsServerUrl || "");
+
   const queryClient = useQueryClient();
-  const [isSearchEngineModalVisible, setIsSearchEngineModalVisible] =
-    useState(false);
+
+  /********************
+   * Background task
+   *******************/
+  const checkStatusAsync = async () => {
+    await BackgroundFetch.getStatusAsync();
+    return await TaskManager.isTaskRegisteredAsync(BACKGROUND_FETCH_TASK);
+  };
+
+  useEffect(() => {
+    (async () => {
+      const registered = await checkStatusAsync();
+
+      if (settings?.autoDownload === true && !registered) {
+        registerBackgroundFetchAsync();
+        toast.success("Background downloads enabled");
+      } else if (settings?.autoDownload === false && registered) {
+        unregisterBackgroundFetchAsync();
+        toast.info("Background downloads disabled");
+      } else if (settings?.autoDownload === true && registered) {
+        // Don't to anything
+      } else if (settings?.autoDownload === false && !registered) {
+        // Don't to anything
+      } else {
+        updateSettings({ autoDownload: false });
+      }
+    })();
+  }, [settings?.autoDownload]);
+  /**********************
+   *********************/
 
   const {
     data: mediaListCollections,
@@ -56,13 +101,6 @@ export const SettingToggles: React.FC<Props> = ({ ...props }) => {
     staleTime: 0,
   });
 
-  type SearchEngine = "Jellyfin" | "Marlin";
-
-  const searchEngines: Array<{ id: SearchEngine; name: string }> = [
-    { id: "Jellyfin", name: "Jellyfin" },
-    { id: "Marlin", name: "Marlin" },
-  ];
-
   if (!settings) return null;
 
   return (
@@ -82,11 +120,7 @@ export const SettingToggles: React.FC<Props> = ({ ...props }) => {
         </View>
       </View> */}
 
-      <MediaProvider>
-        <MediaToggles />
-        <AudioToggles />
-        <SubtitleToggles />
-      </MediaProvider>
+      <MediaToggles />
 
       <View>
         <Text className="text-lg font-bold mb-2">Other</Text>
@@ -106,19 +140,111 @@ export const SettingToggles: React.FC<Props> = ({ ...props }) => {
             />
           </View>
 
-          <View className="flex flex-row items-center justify-between bg-neutral-900 p-4">
-            <View className="shrink">
-              <Text className="font-semibold">Safe area in controls</Text>
+          <View
+            pointerEvents={settings.autoRotate ? "none" : "auto"}
+            className={`
+            ${
+              settings.autoRotate
+                ? "opacity-50 pointer-events-none"
+                : "opacity-100"
+            }
+                flex flex-row items-center space-x-2 justify-between bg-neutral-900 p-4
+              `}
+          >
+            <View className="flex flex-col shrink">
+              <Text className="font-semibold">Video orientation</Text>
               <Text className="text-xs opacity-50">
-                Enable safe area in video player controls
+                Set the full screen video player orientation.
               </Text>
             </View>
-            <Switch
-              value={settings.safeAreaInControlsEnabled}
-              onValueChange={(value) =>
-                updateSettings({ safeAreaInControlsEnabled: value })
-              }
-            />
+            <DropdownMenu.Root>
+              <DropdownMenu.Trigger>
+                <TouchableOpacity className="bg-neutral-800 rounded-lg border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between">
+                  <Text>
+                    {ScreenOrientationEnum[settings.defaultVideoOrientation]}
+                  </Text>
+                </TouchableOpacity>
+              </DropdownMenu.Trigger>
+              <DropdownMenu.Content
+                loop={true}
+                side="bottom"
+                align="start"
+                alignOffset={0}
+                avoidCollisions={true}
+                collisionPadding={8}
+                sideOffset={8}
+              >
+                <DropdownMenu.Label>Orientation</DropdownMenu.Label>
+                <DropdownMenu.Item
+                  key="1"
+                  onSelect={() => {
+                    updateSettings({
+                      defaultVideoOrientation:
+                        ScreenOrientation.OrientationLock.DEFAULT,
+                    });
+                  }}
+                >
+                  <DropdownMenu.ItemTitle>
+                    {
+                      ScreenOrientationEnum[
+                        ScreenOrientation.OrientationLock.DEFAULT
+                      ]
+                    }
+                  </DropdownMenu.ItemTitle>
+                </DropdownMenu.Item>
+                <DropdownMenu.Item
+                  key="2"
+                  onSelect={() => {
+                    updateSettings({
+                      defaultVideoOrientation:
+                        ScreenOrientation.OrientationLock.PORTRAIT_UP,
+                    });
+                  }}
+                >
+                  <DropdownMenu.ItemTitle>
+                    {
+                      ScreenOrientationEnum[
+                        ScreenOrientation.OrientationLock.PORTRAIT_UP
+                      ]
+                    }
+                  </DropdownMenu.ItemTitle>
+                </DropdownMenu.Item>
+                <DropdownMenu.Item
+                  key="3"
+                  onSelect={() => {
+                    updateSettings({
+                      defaultVideoOrientation:
+                        ScreenOrientation.OrientationLock.LANDSCAPE_LEFT,
+                    });
+                  }}
+                >
+                  <DropdownMenu.ItemTitle>
+                    {
+                      ScreenOrientationEnum[
+                        ScreenOrientation.OrientationLock.LANDSCAPE_LEFT
+                      ]
+                    }
+                  </DropdownMenu.ItemTitle>
+                </DropdownMenu.Item>
+                <DropdownMenu.Item
+                  key="4"
+                  onSelect={() => {
+                    updateSettings({
+                      defaultVideoOrientation:
+                        ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT,
+                    });
+                  }}
+                >
+                  <DropdownMenu.ItemTitle>
+                    {
+                      ScreenOrientationEnum[
+                        ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT
+                      ]
+                    }
+                  </DropdownMenu.ItemTitle>
+                </DropdownMenu.Item>
+              </DropdownMenu.Content>
+            </DropdownMenu.Root>
           </View>
 
           <View className="flex flex-col">
@@ -192,27 +318,54 @@ export const SettingToggles: React.FC<Props> = ({ ...props }) => {
           </View>
 
           <View className="flex flex-col">
-            <View className="flex flex-row items-center space-x-2 justify-between bg-neutral-900 p-4">
+            <View
+              className={`
+                flex flex-row items-center space-x-2 justify-between bg-neutral-900 p-4
+              `}
+            >
               <View className="flex flex-col shrink">
                 <Text className="font-semibold">Search engine</Text>
                 <Text className="text-xs opacity-50">
                   Choose the search engine you want to use.
                 </Text>
               </View>
-              <TouchableOpacity
-                className="bg-neutral-800 rounded-lg border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between"
-                onPress={() => setIsSearchEngineModalVisible(true)}
-              >
-                <Text>{settings.searchEngine}</Text>
-                <Ionicons
-                  name="chevron-down"
-                  size={16}
-                  color="white"
-                  style={{ opacity: 0.5, marginLeft: 8 }}
-                />
-              </TouchableOpacity>
+              <DropdownMenu.Root>
+                <DropdownMenu.Trigger>
+                  <TouchableOpacity className="bg-neutral-800 rounded-lg border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between">
+                    <Text>{settings.searchEngine}</Text>
+                  </TouchableOpacity>
+                </DropdownMenu.Trigger>
+                <DropdownMenu.Content
+                  loop={true}
+                  side="bottom"
+                  align="start"
+                  alignOffset={0}
+                  avoidCollisions={true}
+                  collisionPadding={8}
+                  sideOffset={8}
+                >
+                  <DropdownMenu.Label>Profiles</DropdownMenu.Label>
+                  <DropdownMenu.Item
+                    key="1"
+                    onSelect={() => {
+                      updateSettings({ searchEngine: "Jellyfin" });
+                      queryClient.invalidateQueries({ queryKey: ["search"] });
+                    }}
+                  >
+                    <DropdownMenu.ItemTitle>Jellyfin</DropdownMenu.ItemTitle>
+                  </DropdownMenu.Item>
+                  <DropdownMenu.Item
+                    key="2"
+                    onSelect={() => {
+                      updateSettings({ searchEngine: "Marlin" });
+                      queryClient.invalidateQueries({ queryKey: ["search"] });
+                    }}
+                  >
+                    <DropdownMenu.ItemTitle>Marlin</DropdownMenu.ItemTitle>
+                  </DropdownMenu.Item>
+                </DropdownMenu.Content>
+              </DropdownMenu.Root>
             </View>
-
             {settings.searchEngine === "Marlin" && (
               <View className="flex flex-col bg-neutral-900 px-4 pb-4">
                 <View className="flex flex-row items-center space-x-2">
@@ -252,57 +405,197 @@ export const SettingToggles: React.FC<Props> = ({ ...props }) => {
             )}
           </View>
 
-          <Modal
-            visible={isSearchEngineModalVisible}
-            transparent
-            animationType="slide"
-            onRequestClose={() => setIsSearchEngineModalVisible(false)}
-          >
-            <TouchableOpacity
-              className="flex-1 bg-black/50"
-              activeOpacity={1}
-              onPress={() => setIsSearchEngineModalVisible(false)}
-            >
-              <View className="mt-auto bg-neutral-900 rounded-t-xl">
-                <View className="p-4 border-b border-neutral-800">
-                  <Text className="text-lg font-bold text-center">
-                    Select Search Engine
-                  </Text>
-                </View>
-
-                <View className="max-h-[50%]">
-                  {searchEngines.map((engine) => (
-                    <TouchableOpacity
-                      key={engine.id}
-                      className="p-4 border-b border-neutral-800 flex-row items-center justify-between"
-                      onPress={() => {
-                        updateSettings({
-                          searchEngine: engine.id,
-                        });
-                        queryClient.invalidateQueries({ queryKey: ["search"] });
-                        setIsSearchEngineModalVisible(false);
-                      }}
-                    >
-                      <Text>{engine.name}</Text>
-                      {settings.searchEngine === engine.id && (
-                        <Ionicons name="checkmark" size={24} color="white" />
-                      )}
-                    </TouchableOpacity>
-                  ))}
-                </View>
-
-                <TouchableOpacity
-                  className="p-4 border-t border-neutral-800"
-                  onPress={() => setIsSearchEngineModalVisible(false)}
-                >
-                  <Text className="text-center text-purple-400">Cancel</Text>
-                </TouchableOpacity>
-              </View>
-            </TouchableOpacity>
-          </Modal>
+          <View className="flex flex-row items-center justify-between bg-neutral-900 p-4">
+            <View className="shrink">
+              <Text className="font-semibold">Show Custom Menu Links</Text>
+              <Text className="text-xs opacity-50">
+                Show custom menu links defined inside your Jellyfin web config.json file
+              </Text>
+              <TouchableOpacity
+                  onPress={() =>
+                    Linking.openURL("https://jellyfin.org/docs/general/clients/web-config/#custom-menu-links")
+                }
+              >
+                <Text className="text-xs text-purple-600">More info</Text>
+              </TouchableOpacity>
+            </View>
+            <Switch
+                value={settings.showCustomMenuLinks}
+                onValueChange={(value) => updateSettings({ showCustomMenuLinks: value })}
+            />
+          </View>
+        </View>
+      </View>
+
+      <View className="mt-4">
+        <Text className="text-lg font-bold mb-2">Downloads</Text>
+        <View className="flex flex-col rounded-xl overflow-hidden  divide-y-2 divide-solid divide-neutral-800">
+          <View
+            className={`
+                flex flex-row items-center space-x-2 justify-between bg-neutral-900 p-4
+              `}
+          >
+            <View className="flex flex-col shrink">
+              <Text className="font-semibold">Download method</Text>
+              <Text className="text-xs opacity-50">
+                Choose the download method to use. Optimized requires the
+                optimized server.
+              </Text>
+            </View>
+            <DropdownMenu.Root>
+              <DropdownMenu.Trigger>
+                <TouchableOpacity className="bg-neutral-800 rounded-lg border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between">
+                  <Text>
+                    {settings.downloadMethod === "remux"
+                      ? "Default"
+                      : "Optimized"}
+                  </Text>
+                </TouchableOpacity>
+              </DropdownMenu.Trigger>
+              <DropdownMenu.Content
+                loop={true}
+                side="bottom"
+                align="start"
+                alignOffset={0}
+                avoidCollisions={true}
+                collisionPadding={8}
+                sideOffset={8}
+              >
+                <DropdownMenu.Label>Methods</DropdownMenu.Label>
+                <DropdownMenu.Item
+                  key="1"
+                  onSelect={() => {
+                    updateSettings({ downloadMethod: "remux" });
+                    setProcesses([]);
+                  }}
+                >
+                  <DropdownMenu.ItemTitle>Default</DropdownMenu.ItemTitle>
+                </DropdownMenu.Item>
+                <DropdownMenu.Item
+                  key="2"
+                  onSelect={() => {
+                    updateSettings({ downloadMethod: "optimized" });
+                    setProcesses([]);
+                    queryClient.invalidateQueries({ queryKey: ["search"] });
+                  }}
+                >
+                  <DropdownMenu.ItemTitle>Optimized</DropdownMenu.ItemTitle>
+                </DropdownMenu.Item>
+              </DropdownMenu.Content>
+            </DropdownMenu.Root>
+          </View>
+          <View
+            pointerEvents={
+              settings.downloadMethod === "remux" ? "auto" : "none"
+            }
+            className={`
+              flex flex-row space-x-2 items-center justify-between bg-neutral-900 p-4
+              ${
+              settings.downloadMethod === "remux"
+                ? "opacity-100"
+                : "opacity-50"
+            }`}
+          >
+            <View className="flex flex-col shrink">
+              <Text className="font-semibold">Remux max download</Text>
+              <Text className="text-xs opacity-50 shrink">
+                This is the total media you want to be able to download at the same time.
+              </Text>
+            </View>
+            <Stepper
+              value={settings.remuxConcurrentLimit}
+              step={1}
+              min={1}
+              max={4}
+              onUpdate={(value) => updateSettings({remuxConcurrentLimit: value as Settings["remuxConcurrentLimit"]})}
+            />
+          </View>
+          <View
+            pointerEvents={
+              settings.downloadMethod === "optimized" ? "auto" : "none"
+            }
+            className={`
+              flex flex-row space-x-2 items-center justify-between bg-neutral-900 p-4
+              ${
+              settings.downloadMethod === "optimized"
+                ? "opacity-100"
+                : "opacity-50"
+            }`}
+          >
+            <View className="flex flex-col shrink">
+              <Text className="font-semibold">Auto download</Text>
+              <Text className="text-xs opacity-50 shrink">
+                This will automatically download the media file when it's
+                finished optimizing on the server.
+              </Text>
+            </View>
+            <Switch
+              value={settings.autoDownload}
+              onValueChange={(value) => updateSettings({ autoDownload: value })}
+            />
+          </View>
+          <View
+            pointerEvents={
+              settings.downloadMethod === "optimized" ? "auto" : "none"
+            }
+            className={`
+              ${
+                settings.downloadMethod === "optimized"
+                  ? "opacity-100"
+                  : "opacity-50"
+              }`}
+          >
+            <View className="flex flex-col bg-neutral-900 px-4 py-4">
+              <View className="flex flex-col shrink mb-2">
+                <View className="flex flex-row justify-between items-center">
+                  <Text className="font-semibold">
+                    Optimized versions server
+                  </Text>
+                </View>
+                <Text className="text-xs opacity-50">
+                  Set the URL for the optimized versions server for downloads.
+                </Text>
+              </View>
+              <View></View>
+              <View className="flex flex-col">
+                <Input
+                  placeholder="Optimized versions server URL..."
+                  value={optimizedVersionsServerUrl}
+                  keyboardType="url"
+                  returnKeyType="done"
+                  autoCapitalize="none"
+                  textContentType="URL"
+                  onChangeText={(text) => setOptimizedVersionsServerUrl(text)}
+                />
+                <Button
+                  color="purple"
+                  className="h-12 mt-2"
+                  onPress={async () => {
+                    updateSettings({
+                      optimizedVersionsServerUrl:
+                        optimizedVersionsServerUrl.length === 0
+                          ? null
+                          : optimizedVersionsServerUrl.endsWith("/")
+                          ? optimizedVersionsServerUrl
+                          : optimizedVersionsServerUrl + "/",
+                    });
+                    const res = await getStatistics({
+                      url: settings?.optimizedVersionsServerUrl,
+                      authHeader: api?.accessToken,
+                      deviceId: await getOrSetDeviceId(),
+                    });
+                    if (res) {
+                      toast.success("Connected");
+                    } else toast.error("Could not connect");
+                  }}
+                >
+                  Save
+                </Button>
+              </View>
+            </View>
+          </View>
         </View>
       </View>
-      <JellyseerrSettings />
     </View>
   );
 };

components/settings/SubtitleToggles.tsx

@@ -1,252 +0,0 @@
-import { Ionicons } from "@expo/vector-icons";
-import { SubtitlePlaybackMode } from "@jellyfin/sdk/lib/generated-client";
-import { useState } from "react";
-import { Modal, TouchableOpacity, View, ViewProps } from "react-native";
-import { Switch } from "react-native-gesture-handler";
-import { Text } from "../common/Text";
-import { useMedia } from "./MediaContext";
-
-interface Props extends ViewProps {}
-
-export const SubtitleToggles: React.FC<Props> = ({ ...props }) => {
-  const media = useMedia();
-  const { settings, updateSettings } = media;
-  const cultures = media.cultures;
-  const [isLanguageModalVisible, setIsLanguageModalVisible] = useState(false);
-  const [isModeModalVisible, setIsModeModalVisible] = useState(false);
-
-  if (!settings) return null;
-
-  const subtitleModes = [
-    SubtitlePlaybackMode.Default,
-    SubtitlePlaybackMode.Smart,
-    SubtitlePlaybackMode.OnlyForced,
-    SubtitlePlaybackMode.Always,
-    SubtitlePlaybackMode.None,
-  ];
-
-  return (
-    <View>
-      <Text className="text-lg font-bold mb-2">Subtitle</Text>
-      <View className="flex flex-col rounded-xl mb-4 overflow-hidden divide-y-2 divide-solid divide-neutral-800">
-        <View className="flex flex-row items-center space-x-2 justify-between bg-neutral-900 p-4">
-          <View className="flex flex-col shrink">
-            <Text className="font-semibold">Subtitle language</Text>
-            <Text className="text-xs opacity-50">
-              Choose a default subtitle language.
-            </Text>
-          </View>
-          <TouchableOpacity
-            className="bg-neutral-800 rounded-lg border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between"
-            onPress={() => setIsLanguageModalVisible(true)}
-          >
-            <Text>
-              {settings?.defaultSubtitleLanguage?.DisplayName || "None"}
-            </Text>
-            <Ionicons
-              name="chevron-down"
-              size={16}
-              color="white"
-              style={{ opacity: 0.5, marginLeft: 8 }}
-            />
-          </TouchableOpacity>
-        </View>
-
-        <View className="flex flex-row items-center space-x-2 justify-between bg-neutral-900 p-4">
-          <View className="flex flex-col shrink">
-            <Text className="font-semibold">Subtitle Mode</Text>
-            <Text className="text-xs opacity-50 mr-2">
-              Subtitles are loaded based on the default and forced flags in the
-              embedded metadata. Language preferences are considered when
-              multiple options are available.
-            </Text>
-          </View>
-          <TouchableOpacity
-            className="bg-neutral-800 rounded-lg border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between"
-            onPress={() => setIsModeModalVisible(true)}
-          >
-            <Text>{settings?.subtitleMode || "Loading"}</Text>
-            <Ionicons
-              name="chevron-down"
-              size={16}
-              color="white"
-              style={{ opacity: 0.5, marginLeft: 8 }}
-            />
-          </TouchableOpacity>
-        </View>
-
-        <View className="flex flex-col">
-          <View className="flex flex-row items-center justify-between bg-neutral-900 p-4">
-            <View className="flex flex-col">
-              <Text className="font-semibold">
-                Set Subtitle Track From Previous Item
-              </Text>
-              <Text className="text-xs opacity-50 min max-w-[85%]">
-                Try to set the subtitle track to the closest match to the last
-                video.
-              </Text>
-            </View>
-            <Switch
-              value={settings.rememberSubtitleSelections}
-              onValueChange={(value) =>
-                updateSettings({ rememberSubtitleSelections: value })
-              }
-            />
-          </View>
-        </View>
-
-        <View
-          className={`
-              flex flex-row items-center space-x-2 justify-between bg-neutral-900 p-4
-            `}
-        >
-          <View className="flex flex-col shrink">
-            <Text className="font-semibold">Subtitle Size</Text>
-            <Text className="text-xs opacity-50">
-              Choose a default subtitle size for direct play (only works for
-              some subtitle formats).
-            </Text>
-          </View>
-          <View className="flex flex-row items-center">
-            <TouchableOpacity
-              onPress={() =>
-                updateSettings({
-                  subtitleSize: Math.max(0, settings.subtitleSize - 5),
-                })
-              }
-              className="w-8 h-8 bg-neutral-800 rounded-l-lg flex items-center justify-center"
-            >
-              <Text>-</Text>
-            </TouchableOpacity>
-            <Text className="w-12 h-8 bg-neutral-800 first-letter:px-3 py-2 flex items-center justify-center">
-              {settings.subtitleSize}
-            </Text>
-            <TouchableOpacity
-              className="w-8 h-8 bg-neutral-800 rounded-r-lg flex items-center justify-center"
-              onPress={() =>
-                updateSettings({
-                  subtitleSize: Math.min(120, settings.subtitleSize + 5),
-                })
-              }
-            >
-              <Text>+</Text>
-            </TouchableOpacity>
-          </View>
-        </View>
-      </View>
-      <Modal
-        visible={isLanguageModalVisible}
-        transparent
-        animationType="slide"
-        onRequestClose={() => setIsLanguageModalVisible(false)}
-      >
-        <TouchableOpacity
-          className="flex-1 bg-black/50"
-          activeOpacity={1}
-          onPress={() => setIsLanguageModalVisible(false)}
-        >
-          <View className="mt-auto bg-neutral-900 rounded-t-xl">
-            <View className="p-4 border-b border-neutral-800">
-              <Text className="text-lg font-bold text-center">
-                Select Language
-              </Text>
-            </View>
-
-            <View className="max-h-[50%]">
-              <TouchableOpacity
-                className="p-4 border-b border-neutral-800 flex-row items-center justify-between"
-                onPress={() => {
-                  updateSettings({
-                    defaultSubtitleLanguage: null,
-                  });
-                  setIsLanguageModalVisible(false);
-                }}
-              >
-                <Text>None</Text>
-                {!settings?.defaultSubtitleLanguage && (
-                  <Ionicons name="checkmark" size={24} color="white" />
-                )}
-              </TouchableOpacity>
-
-              {cultures?.map((l) => (
-                <TouchableOpacity
-                  key={l?.ThreeLetterISOLanguageName ?? "unknown"}
-                  className="p-4 border-b border-neutral-800 flex-row items-center justify-between"
-                  onPress={() => {
-                    updateSettings({
-                      defaultSubtitleLanguage: l,
-                    });
-                    setIsLanguageModalVisible(false);
-                  }}
-                >
-                  <Text>{l.DisplayName}</Text>
-                  {settings?.defaultSubtitleLanguage
-                    ?.ThreeLetterISOLanguageName ===
-                    l.ThreeLetterISOLanguageName && (
-                    <Ionicons name="checkmark" size={24} color="white" />
-                  )}
-                </TouchableOpacity>
-              ))}
-            </View>
-
-            <TouchableOpacity
-              className="p-4 border-t border-neutral-800"
-              onPress={() => setIsLanguageModalVisible(false)}
-            >
-              <Text className="text-center text-purple-400">Cancel</Text>
-            </TouchableOpacity>
-          </View>
-        </TouchableOpacity>
-      </Modal>
-
-      {/* Subtitle Mode Selection Modal */}
-      <Modal
-        visible={isModeModalVisible}
-        transparent
-        animationType="slide"
-        onRequestClose={() => setIsModeModalVisible(false)}
-      >
-        <TouchableOpacity
-          className="flex-1 bg-black/50"
-          activeOpacity={1}
-          onPress={() => setIsModeModalVisible(false)}
-        >
-          <View className="mt-auto bg-neutral-900 rounded-t-xl">
-            <View className="p-4 border-b border-neutral-800">
-              <Text className="text-lg font-bold text-center">
-                Select Subtitle Mode
-              </Text>
-            </View>
-
-            <View className="max-h-[50%]">
-              {subtitleModes?.map((mode) => (
-                <TouchableOpacity
-                  key={mode}
-                  className="p-4 border-b border-neutral-800 flex-row items-center justify-between"
-                  onPress={() => {
-                    updateSettings({
-                      subtitleMode: mode,
-                    });
-                    setIsModeModalVisible(false);
-                  }}
-                >
-                  <Text>{mode}</Text>
-                  {settings?.subtitleMode === mode && (
-                    <Ionicons name="checkmark" size={24} color="white" />
-                  )}
-                </TouchableOpacity>
-              ))}
-            </View>
-
-            <TouchableOpacity
-              className="p-4 border-t border-neutral-800"
-              onPress={() => setIsModeModalVisible(false)}
-            >
-              <Text className="text-center text-purple-400">Cancel</Text>
-            </TouchableOpacity>
-          </View>
-        </TouchableOpacity>
-      </Modal>
-    </View>
-  );
-};

components/stacks/NestedTabPageStack.tsx

@@ -1,15 +1,6 @@
-import { NativeStackNavigationOptions } from "@react-navigation/native-stack";
 import { HeaderBackButton } from "../common/HeaderBackButton";
-import { ParamListBase, RouteProp } from "@react-navigation/native";
 
-type ICommonScreenOptions =
-  | NativeStackNavigationOptions
-  | ((prop: {
-      route: RouteProp<ParamListBase, string>;
-      navigation: any;
-    }) => NativeStackNavigationOptions);
-
-export const commonScreenOptions: ICommonScreenOptions = {
+const commonScreenOptions = {
   title: "",
   headerShown: true,
   headerTransparent: true,
@@ -26,5 +17,5 @@ const routes = [
   "series/[id]",
 ];
 
-export const nestedTabPageScreenOptions: Record<string, ICommonScreenOptions> =
+export const nestedTabPageScreenOptions: { [key: string]: any } =
   Object.fromEntries(routes.map((route) => [route, commonScreenOptions]));

components/video-player/controls/AudioSlider.tsx

@@ -1,111 +0,0 @@
-import React, { useEffect, useRef } from "react";
-import { View, StyleSheet } from "react-native";
-import { useSharedValue } from "react-native-reanimated";
-import { Slider } from "react-native-awesome-slider";
-import { VolumeManager } from "react-native-volume-manager";
-import { Ionicons } from "@expo/vector-icons";
-
-interface AudioSliderProps {
-  setVisibility: (show: boolean) => void;
-}
-
-const AudioSlider: React.FC<AudioSliderProps> = ({ setVisibility }) => {
-  const volume = useSharedValue<number>(50); // Explicitly type as number
-  const min = useSharedValue<number>(0); // Explicitly type as number
-  const max = useSharedValue<number>(100); // Explicitly type as number
-
-  const timeoutRef = useRef<NodeJS.Timeout | null>(null); // Use a ref to store the timeout ID
-
-  useEffect(() => {
-    const fetchInitialVolume = async () => {
-      try {
-        const { volume: initialVolume } = await VolumeManager.getVolume();
-        volume.value = initialVolume * 100;
-      } catch (error) {
-        console.error("Error fetching initial volume:", error);
-      }
-    };
-    fetchInitialVolume();
-
-    // Disable the native volume UI when the component mounts
-    VolumeManager.showNativeVolumeUI({ enabled: false });
-
-    return () => {
-      // Re-enable the native volume UI when the component unmounts
-      VolumeManager.showNativeVolumeUI({ enabled: true });
-    };
-  }, []);
-
-  const handleValueChange = async (value: number) => {
-    volume.value = value;
-    await VolumeManager.setVolume(value / 100);
-
-    // Re-call showNativeVolumeUI to ensure the setting is applied on iOS
-    VolumeManager.showNativeVolumeUI({ enabled: false });
-  };
-
-  useEffect(() => {
-    const volumeListener = VolumeManager.addVolumeListener((result) => {
-      volume.value = result.volume * 100;
-      setVisibility(true);
-
-      // Clear any existing timeout
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-      }
-
-      // Set a new timeout to hide the visibility after 2 seconds
-      timeoutRef.current = setTimeout(() => {
-        setVisibility(false);
-      }, 1000);
-    });
-
-    return () => {
-      volumeListener.remove();
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-      }
-    };
-  }, [volume]);
-
-  return (
-    <View style={styles.sliderContainer}>
-      <Slider
-        progress={volume}
-        minimumValue={min}
-        maximumValue={max}
-        thumbWidth={0}
-        onValueChange={handleValueChange}
-        containerStyle={{
-          borderRadius: 50,
-        }}
-        theme={{
-          minimumTrackTintColor: "#FDFDFD",
-          maximumTrackTintColor: "#5A5A5A",
-          bubbleBackgroundColor: "transparent", // Hide the value bubble
-          bubbleTextColor: "transparent", // Hide the value text
-        }}
-      />
-      <Ionicons
-        name="volume-high"
-        size={20}
-        color="#FDFDFD"
-        style={{
-          marginLeft: 8,
-        }}
-      />
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  sliderContainer: {
-    width: 150,
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: "center",
-    alignItems: "center",
-  },
-});
-
-export default AudioSlider;

components/video-player/controls/BrightnessSlider.tsx

@@ -14,6 +14,7 @@ const BrightnessSlider = () => {
   useEffect(() => {
     const fetchInitialBrightness = async () => {
       const initialBrightness = await Brightness.getBrightnessAsync();
+      console.log("initialBrightness", initialBrightness);
       brightness.value = initialBrightness * 100;
     };
     fetchInitialBrightness();

components/video-player/controls/Controls.tsx

@@ -1,4 +1,3 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
 import { Text } from "@/components/common/Text";
 import { Loader } from "@/components/Loader";
 import { useAdjacentItems } from "@/hooks/useAdjacentEpisodes";
@@ -9,13 +8,8 @@ import {
   TrackInfo,
   VlcPlayerViewRef,
 } from "@/modules/vlc-player/src/VlcPlayer.types";
-import { apiAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
-import {
-  getDefaultPlaySettings,
-  previousIndexes,
-} from "@/utils/jellyfin/getDefaultPlaySettings";
-import { getItemById } from "@/utils/jellyfin/user-library/getItemById";
+import { getDefaultPlaySettings } from "@/utils/jellyfin/getDefaultPlaySettings";
 import { writeToLog } from "@/utils/log";
 import {
   formatTimeString,
@@ -30,10 +24,15 @@ import {
   MediaSourceInfo,
 } from "@jellyfin/sdk/lib/generated-client";
 import { Image } from "expo-image";
-import { useLocalSearchParams, useRouter } from "expo-router";
-import { useAtom } from "jotai";
-import { debounce } from "lodash";
-import { Dimensions, Pressable, TouchableOpacity, View } from "react-native";
+import { useRouter } from "expo-router";
+import { useCallback, useEffect, useRef, useState } from "react";
+import {
+  Dimensions,
+  Platform,
+  Pressable,
+  TouchableOpacity,
+  View,
+} from "react-native";
 import { Slider } from "react-native-awesome-slider";
 import {
   runOnJS,
@@ -46,15 +45,19 @@ import {
   useSafeAreaInsets,
 } from "react-native-safe-area-context";
 import { VideoRef } from "react-native-video";
-import AudioSlider from "./AudioSlider";
-import BrightnessSlider from "./BrightnessSlider";
 import { ControlProvider } from "./contexts/ControlContext";
 import { VideoProvider } from "./contexts/VideoContext";
+import * as Haptics from "expo-haptics";
 import DropdownViewDirect from "./dropdown/DropdownViewDirect";
 import DropdownViewTranscoding from "./dropdown/DropdownViewTranscoding";
-import { EpisodeList } from "./EpisodeList";
-import NextEpisodeCountDownButton from "./NextEpisodeCountDownButton";
+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;
@@ -81,7 +84,7 @@ interface Props {
   setSubtitleURL?: (url: string, customName: string) => void;
   setSubtitleTrack?: (index: number) => void;
   setAudioTrack?: (index: number) => void;
-  stop: (() => Promise<void>) | (() => void);
+  stop?: (() => Promise<void>) | (() => void);
   isVlc?: boolean;
 }
 
@@ -108,6 +111,7 @@ export const Controls: React.FC<Props> = ({
   setSubtitleTrack,
   setAudioTrack,
   stop,
+  offline = false,
   enableTrickplay = true,
   isVlc = false,
 }) => {
@@ -122,10 +126,10 @@ export const Controls: React.FC<Props> = ({
     calculateTrickplayUrl,
     trickplayInfo,
     prefetchAllTrickplayImages,
-  } = useTrickplay(item, enableTrickplay);
+  } = useTrickplay(item, !offline && enableTrickplay);
 
   const [currentTime, setCurrentTime] = useState(0);
-  const [remainingTime, setRemainingTime] = useState(Infinity);
+  const [remainingTime, setRemainingTime] = useState(0);
 
   const min = useSharedValue(0);
   const max = useSharedValue(item.RunTimeTicks || 0);
@@ -133,14 +137,8 @@ export const Controls: React.FC<Props> = ({
   const wasPlayingRef = useRef(false);
   const lastProgressRef = useRef<number>(0);
 
-  const { bitrateValue, subtitleIndex, audioIndex } = useLocalSearchParams<{
-    bitrateValue: string;
-    audioIndex: string;
-    subtitleIndex: string;
-  }>();
-
   const { showSkipButton, skipIntro } = useIntroSkipper(
-    item.Id,
+    offline ? undefined : item.Id,
     currentTime,
     seek,
     play,
@@ -148,7 +146,7 @@ export const Controls: React.FC<Props> = ({
   );
 
   const { showSkipCreditButton, skipCredit } = useCreditSkipper(
-    item.Id,
+    offline ? undefined : item.Id,
     currentTime,
     seek,
     play,
@@ -158,74 +156,52 @@ export const Controls: React.FC<Props> = ({
   const goToPreviousItem = useCallback(() => {
     if (!previousItem || !settings) return;
 
-    const previousIndexes: previousIndexes = {
-      subtitleIndex: subtitleIndex ? parseInt(subtitleIndex) : undefined,
-      audioIndex: audioIndex ? parseInt(audioIndex) : undefined,
-    };
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
 
-    const {
-      mediaSource: newMediaSource,
-      audioIndex: defaultAudioIndex,
-      subtitleIndex: defaultSubtitleIndex,
-    } = getDefaultPlaySettings(
-      previousItem,
-      settings,
-      previousIndexes,
-      mediaSource ?? undefined
-    );
+    const { bitrate, mediaSource, audioIndex, subtitleIndex } =
+      getDefaultPlaySettings(previousItem, settings);
 
     const queryParams = new URLSearchParams({
       itemId: previousItem.Id ?? "", // Ensure itemId is a string
-      audioIndex: defaultAudioIndex?.toString() ?? "",
-      subtitleIndex: defaultSubtitleIndex?.toString() ?? "",
-      mediaSourceId: newMediaSource?.Id ?? "", // Ensure mediaSourceId is a string
-      bitrateValue: bitrateValue.toString(),
+      audioIndex: audioIndex?.toString() ?? "",
+      subtitleIndex: subtitleIndex?.toString() ?? "",
+      mediaSourceId: mediaSource?.Id ?? "", // Ensure mediaSourceId is a string
+      bitrateValue: bitrate.toString(),
     }).toString();
 
-    if (!bitrateValue) {
+    if (!bitrate.value) {
       // @ts-expect-error
       router.replace(`player/direct-player?${queryParams}`);
       return;
     }
     // @ts-expect-error
     router.replace(`player/transcoding-player?${queryParams}`);
-  }, [previousItem, settings, subtitleIndex, audioIndex]);
+  }, [previousItem, settings]);
 
   const goToNextItem = useCallback(() => {
     if (!nextItem || !settings) return;
 
-    const previousIndexes: previousIndexes = {
-      subtitleIndex: subtitleIndex ? parseInt(subtitleIndex) : undefined,
-      audioIndex: audioIndex ? parseInt(audioIndex) : undefined,
-    };
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
 
-    const {
-      mediaSource: newMediaSource,
-      audioIndex: defaultAudioIndex,
-      subtitleIndex: defaultSubtitleIndex,
-    } = getDefaultPlaySettings(
-      nextItem,
-      settings,
-      previousIndexes,
-      mediaSource ?? undefined
-    );
+    const { bitrate, mediaSource, audioIndex, subtitleIndex } =
+      getDefaultPlaySettings(nextItem, settings);
 
     const queryParams = new URLSearchParams({
       itemId: nextItem.Id ?? "", // Ensure itemId is a string
-      audioIndex: defaultAudioIndex?.toString() ?? "",
-      subtitleIndex: defaultSubtitleIndex?.toString() ?? "",
-      mediaSourceId: newMediaSource?.Id ?? "", // Ensure mediaSourceId is a string
-      bitrateValue: bitrateValue.toString(),
+      audioIndex: audioIndex?.toString() ?? "",
+      subtitleIndex: subtitleIndex?.toString() ?? "",
+      mediaSourceId: mediaSource?.Id ?? "", // Ensure mediaSourceId is a string
+      bitrateValue: bitrate.toString(),
     }).toString();
 
-    if (!bitrateValue) {
+    if (!bitrate.value) {
       // @ts-expect-error
       router.replace(`player/direct-player?${queryParams}`);
       return;
     }
     // @ts-expect-error
     router.replace(`player/transcoding-player?${queryParams}`);
-  }, [nextItem, settings, subtitleIndex, audioIndex]);
+  }, [nextItem, settings]);
 
   const updateTimes = useCallback(
     (currentProgress: number, maxValue: number) => {
@@ -236,6 +212,13 @@ export const Controls: React.FC<Props> = ({
 
       setCurrentTime(current);
       setRemainingTime(remaining);
+
+      // Currently doesm't work in VLC because of some corrupted timestamps, will need to find a workaround.
+      if (currentProgress === maxValue) {
+        setShowControls(true);
+        // Automatically play the next item if it exists
+        goToNextItem();
+      }
     },
     [goToNextItem, isVlc]
   );
@@ -247,6 +230,7 @@ export const Controls: React.FC<Props> = ({
       isSeeking: isSeeking.value,
     }),
     (result) => {
+      // console.log("Progress changed", result);
       if (result.isSeeking === false) {
         runOnJS(updateTimes)(result.progress, result.max);
       }
@@ -268,14 +252,7 @@ export const Controls: React.FC<Props> = ({
   useEffect(() => {
     prefetchAllTrickplayImages();
   }, []);
-  const toggleControls = () => {
-    if (showControls) {
-      setShowAudioSlider(false);
-      setShowControls(false);
-    } else {
-      setShowControls(true);
-    }
-  };
+  const toggleControls = () => setShowControls(!showControls);
 
   const handleSliderStart = useCallback(() => {
     if (showControls === false) return;
@@ -306,21 +283,23 @@ export const Controls: React.FC<Props> = ({
   const [time, setTime] = useState({ hours: 0, minutes: 0, seconds: 0 });
   const handleSliderChange = useCallback(
     debounce((value: number) => {
-      const progressInTicks = isVlc ? msToTicks(value) : value;
+      const progressInTicks = msToTicks(value);
+      console.log("Progress in ticks", progressInTicks);
       calculateTrickplayUrl(progressInTicks);
+
       const progressInSeconds = Math.floor(ticksToSeconds(progressInTicks));
       const hours = Math.floor(progressInSeconds / 3600);
       const minutes = Math.floor((progressInSeconds % 3600) / 60);
       const seconds = progressInSeconds % 60;
       setTime({ hours, minutes, seconds });
-    }, 3),
+    }, 10),
     []
   );
 
   const handleSkipBackward = useCallback(async () => {
     if (!settings?.rewindSkipTime) return;
     wasPlayingRef.current = isPlaying;
-
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
     try {
       const curr = progress.value;
       if (curr !== undefined) {
@@ -338,9 +317,10 @@ export const Controls: React.FC<Props> = ({
   const handleSkipForward = useCallback(async () => {
     if (!settings?.forwardSkipTime) return;
     wasPlayingRef.current = isPlaying;
-
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
     try {
       const curr = progress.value;
+      console.log(curr);
       if (curr !== undefined) {
         const newTime = isVlc
           ? curr + secondsToMs(settings.forwardSkipTime)
@@ -355,6 +335,7 @@ export const Controls: React.FC<Props> = ({
 
   const toggleIgnoreSafeAreas = useCallback(() => {
     setIgnoreSafeAreas((prev) => !prev);
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
   }, []);
 
   const memoizedRenderBubble = useCallback(() => {
@@ -365,6 +346,8 @@ export const Controls: React.FC<Props> = ({
     const tileWidth = 150;
     const tileHeight = 150 / trickplayInfo.aspectRatio!;
 
+    console.log("time, ", time);
+
     return (
       <View
         style={{
@@ -424,55 +407,35 @@ export const Controls: React.FC<Props> = ({
 
   const switchOnEpisodeMode = () => {
     setEpisodeView(true);
-    if (isPlaying) togglePlay();
+    if (isPlaying) togglePlay(progress.value);
   };
 
-  const goToItem = useCallback(
-    async (itemId: string) => {
-      try {
-        const gotoItem = await getItemById(api, itemId);
-        if (!settings || !gotoItem) return;
+  const gotoEpisode = async (itemId: string) => {
+    const item = await getItemById(api, itemId);
+    console.log("Item", item);
+    if (!settings || !item) return;
 
-        const previousIndexes: previousIndexes = {
-          subtitleIndex: subtitleIndex ? parseInt(subtitleIndex) : undefined,
-          audioIndex: audioIndex ? parseInt(audioIndex) : undefined,
-        };
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
 
-        const {
-          mediaSource: newMediaSource,
-          audioIndex: defaultAudioIndex,
-          subtitleIndex: defaultSubtitleIndex,
-        } = getDefaultPlaySettings(
-          gotoItem,
-          settings,
-          previousIndexes,
-          mediaSource ?? undefined
-        );
+    const { bitrate, mediaSource, audioIndex, subtitleIndex } =
+      getDefaultPlaySettings(item, settings);
 
-        const queryParams = new URLSearchParams({
-          itemId: gotoItem.Id ?? "", // Ensure itemId is a string
-          audioIndex: defaultAudioIndex?.toString() ?? "",
-          subtitleIndex: defaultSubtitleIndex?.toString() ?? "",
-          mediaSourceId: newMediaSource?.Id ?? "", // Ensure mediaSourceId is a string
-          bitrateValue: bitrateValue.toString(),
-        }).toString();
+    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 (!bitrateValue) {
-          // @ts-expect-error
-          router.replace(`player/direct-player?${queryParams}`);
-          return;
-        }
-        // @ts-expect-error
-        router.replace(`player/transcoding-player?${queryParams}`);
-      } catch (error) {
-        console.error("Error in gotoEpisode:", error);
-      }
-    },
-    [settings, subtitleIndex, audioIndex]
-  );
-
-  // Used when user changes audio through audio button on device.
-  const [showAudioSlider, setShowAudioSlider] = useState(false);
+    if (!bitrate.value) {
+      // @ts-expect-error
+      router.replace(`player/direct-player?${queryParams}`);
+      return;
+    }
+    // @ts-expect-error
+    router.replace(`player/transcoding-player?${queryParams}`);
+  };
 
   return (
     <ControlProvider
@@ -481,11 +444,7 @@ export const Controls: React.FC<Props> = ({
       isVideoLoaded={isVideoLoaded}
     >
       {EpisodeView ? (
-        <EpisodeList
-          item={item}
-          close={() => setEpisodeView(false)}
-          goToItem={goToItem}
-        />
+        <EpisodeList item={item} close={() => setEpisodeView(false)} />
       ) : (
         <>
           <VideoProvider
@@ -495,24 +454,11 @@ export const Controls: React.FC<Props> = ({
             setSubtitleTrack={setSubtitleTrack}
             setSubtitleURL={setSubtitleURL}
           >
-            <View
-              style={[
-                {
-                  position: "absolute",
-                  top: settings?.safeAreaInControlsEnabled ? insets.top : 0,
-                  left: settings?.safeAreaInControlsEnabled ? insets.left : 0,
-                  opacity: showControls ? 1 : 0,
-                  zIndex: 1000,
-                },
-              ]}
-              className={`flex flex-row items-center space-x-2 z-10 p-4 `}
-            >
-              {!mediaSource?.TranscodingUrl ? (
-                <DropdownViewDirect showControls={showControls} />
-              ) : (
-                <DropdownViewTranscoding showControls={showControls} />
-              )}
-            </View>
+            {!mediaSource?.TranscodingUrl ? (
+              <DropdownViewDirect showControls={showControls} />
+            ) : (
+              <DropdownViewTranscoding showControls={showControls} />
+            )}
           </VideoProvider>
 
           <Pressable
@@ -530,8 +476,8 @@ export const Controls: React.FC<Props> = ({
             style={[
               {
                 position: "absolute",
-                top: settings?.safeAreaInControlsEnabled ? insets.top : 0,
-                right: settings?.safeAreaInControlsEnabled ? insets.right : 0,
+                top: 0,
+                right: 0,
                 opacity: showControls ? 1 : 0,
               },
             ]}
@@ -592,13 +538,14 @@ export const Controls: React.FC<Props> = ({
             style={{
               position: "absolute",
               top: "50%", // Center vertically
-              left: settings?.safeAreaInControlsEnabled ? insets.left : 0,
-              right: settings?.safeAreaInControlsEnabled ? insets.right : 0,
+              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"}
           >
@@ -607,9 +554,7 @@ export const Controls: React.FC<Props> = ({
                 position: "absolute",
                 alignItems: "center",
                 transform: [{ rotate: "270deg" }], // Rotate the slider to make it vertical
-                left: 0,
                 bottom: 30,
-                opacity: showControls ? 1 : 0,
               }}
             >
               <BrightnessSlider />
@@ -620,7 +565,6 @@ export const Controls: React.FC<Props> = ({
                   position: "relative",
                   justifyContent: "center",
                   alignItems: "center",
-                  opacity: showControls ? 1 : 0,
                 }}
               >
                 <Ionicons
@@ -655,9 +599,6 @@ export const Controls: React.FC<Props> = ({
                   name={isPlaying ? "pause" : "play"}
                   size={50}
                   color="white"
-                  style={{
-                    opacity: showControls ? 1 : 0,
-                  }}
                 />
               ) : (
                 <Loader size={"large"} />
@@ -670,7 +611,6 @@ export const Controls: React.FC<Props> = ({
                   position: "relative",
                   justifyContent: "center",
                   alignItems: "center",
-                  opacity: showControls ? 1 : 0,
                 }}
               >
                 <Ionicons name="refresh-outline" size={50} color="white" />
@@ -687,30 +627,19 @@ export const Controls: React.FC<Props> = ({
                 </Text>
               </View>
             </TouchableOpacity>
-
-            <View
-              style={{
-                position: "absolute",
-                alignItems: "center",
-                transform: [{ rotate: "270deg" }], // Rotate the slider to make it vertical
-                bottom: 30,
-                right: 0,
-                opacity: showAudioSlider || showControls ? 1 : 0,
-              }}
-            >
-              <AudioSlider setVisibility={setShowAudioSlider} />
-            </View>
           </View>
 
           <View
             style={[
               {
                 position: "absolute",
-                right: settings?.safeAreaInControlsEnabled ? insets.right : 0,
-                left: settings?.safeAreaInControlsEnabled ? insets.left : 0,
-                bottom: settings?.safeAreaInControlsEnabled ? insets.bottom : 0,
+                right: 0,
+                left: 0,
+                bottom: 0,
+                opacity: showControls ? 1 : 0,
               },
             ]}
+            pointerEvents={showControls ? "box-none" : "none"}
             className={`flex flex-col p-4`}
           >
             <View
@@ -724,9 +653,7 @@ export const Controls: React.FC<Props> = ({
                 style={{
                   flexDirection: "column",
                   alignSelf: "flex-end", // Shrink height based on content
-                  opacity: showControls ? 1 : 0,
                 }}
-                pointerEvents={showControls ? "box-none" : "none"}
               >
                 <Text className="font-bold">{item?.Name}</Text>
                 {item?.Type === "Episode" && (
@@ -741,7 +668,13 @@ export const Controls: React.FC<Props> = ({
                   <Text className="text-xs opacity-50">{item?.Album}</Text>
                 )}
               </View>
-              <View className="flex flex-row space-x-2">
+              <View
+                style={{
+                  flexDirection: "column",
+                  alignSelf: "flex-end",
+                  marginRight: insets.right,
+                }}
+              >
                 <SkipButton
                   showButton={showSkipButton}
                   onPress={skipIntro}
@@ -752,25 +685,10 @@ export const Controls: React.FC<Props> = ({
                   onPress={skipCredit}
                   buttonText="Skip Credits"
                 />
-                <NextEpisodeCountDownButton
-                  show={
-                    !nextItem
-                      ? false
-                      : isVlc
-                      ? remainingTime < 10000
-                      : remainingTime < 10
-                  }
-                  onFinish={goToNextItem}
-                  onPress={goToNextItem}
-                />
               </View>
             </View>
             <View
               className={`flex flex-col-reverse py-4 pb-1 px-4 rounded-lg items-center  bg-neutral-800`}
-              style={{
-                opacity: showControls ? 1 : 0,
-              }}
-              pointerEvents={showControls ? "box-none" : "none"}
             >
               <View className={`flex flex-col w-full shrink`}>
                 <Slider

components/video-player/controls/EpisodeList.tsx

@@ -1,36 +1,44 @@
-import ContinueWatchingPoster from "@/components/ContinueWatchingPoster";
+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 { Text } from "@/components/common/Text";
+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 { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
-import { runtimeTicksToSeconds } from "@/utils/time";
-import { Ionicons } from "@expo/vector-icons";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { getTvShowsApi } from "@jellyfin/sdk/lib/utils/api";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { atom, useAtom } from "jotai";
-import { useEffect, useMemo, useRef, useState } from "react";
-import { TouchableOpacity, View } from "react-native";
+import { Item } from "zeego/dropdown-menu";
 
 type Props = {
   item: BaseItemDto;
   close: () => void;
-  goToItem: (itemId: string) => Promise<void>;
 };
 
 export const seasonIndexAtom = atom<SeasonIndexState>({});
 
-export const EpisodeList: React.FC<Props> = ({ item, close, goToItem }) => {
+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) => {
@@ -147,6 +155,36 @@ export const EpisodeList: React.FC<Props> = ({ item, close, goToItem }) => {
     }
   }, [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 />;
   }
@@ -204,7 +242,7 @@ export const EpisodeList: React.FC<Props> = ({ item, close, goToItem }) => {
             >
               <TouchableOpacity
                 onPress={() => {
-                  goToItem(_item.Id);
+                  gotoEpisode(_item.Id);
                 }}
               >
                 <ContinueWatchingPoster
@@ -230,6 +268,9 @@ export const EpisodeList: React.FC<Props> = ({ item, close, goToItem }) => {
                   {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"

components/video-player/controls/NextEpisodeCountDownButton.tsx

@@ -1,80 +0,0 @@
-import React, { useEffect } from "react";
-import { TouchableOpacity, TouchableOpacityProps, View } from "react-native";
-import { Text } from "@/components/common/Text";
-import Animated, {
-  useAnimatedStyle,
-  useSharedValue,
-  withTiming,
-  Easing,
-  runOnJS,
-} from "react-native-reanimated";
-import { Colors } from "@/constants/Colors";
-
-interface NextEpisodeCountDownButtonProps extends TouchableOpacityProps {
-  onFinish?: () => void;
-  onPress?: () => void;
-  show: boolean;
-}
-
-const NextEpisodeCountDownButton: React.FC<NextEpisodeCountDownButtonProps> = ({
-  onFinish,
-  onPress,
-  show,
-  ...props
-}) => {
-  const progress = useSharedValue(0);
-
-  useEffect(() => {
-    if (show) {
-      progress.value = 0;
-      progress.value = withTiming(
-        1,
-        {
-          duration: 10000, // 10 seconds
-          easing: Easing.linear,
-        },
-        (finished) => {
-          if (finished && onFinish) {
-            runOnJS(onFinish)();
-          }
-        }
-      );
-    }
-  }, [show, onFinish]);
-
-  const animatedStyle = useAnimatedStyle(() => {
-    return {
-      position: "absolute",
-      left: 0,
-      top: 0,
-      bottom: 0,
-      width: `${progress.value * 100}%`,
-      backgroundColor: Colors.primary,
-    };
-  });
-
-  const handlePress = () => {
-    if (onPress) {
-      onPress();
-    }
-  };
-
-  if (!show) {
-    return null;
-  }
-
-  return (
-    <TouchableOpacity
-      className="w-32 overflow-hidden rounded-md bg-black/60 border border-neutral-900"
-      {...props}
-      onPress={handlePress}
-    >
-      <Animated.View style={animatedStyle} />
-      <View className="px-3 py-3">
-        <Text className="text-center font-bold">Next Episode</Text>
-      </View>
-    </TouchableOpacity>
-  );
-};
-
-export default NextEpisodeCountDownButton;

components/video-player/controls/SkipButton.tsx

@@ -1,7 +1,7 @@
 import React from "react";
-import { View, TouchableOpacity, Text, ViewProps } from "react-native";
+import { View, TouchableOpacity, Text, StyleSheet } from "react-native";
 
-interface SkipButtonProps extends ViewProps {
+interface SkipButtonProps {
   onPress: () => void;
   showButton: boolean;
   buttonText: string;
@@ -11,18 +11,29 @@ const SkipButton: React.FC<SkipButtonProps> = ({
   onPress,
   showButton,
   buttonText,
-  ...props
 }) => {
   return (
-    <View className={showButton ? "flex" : "hidden"} {...props}>
-      <TouchableOpacity
-        onPress={onPress}
-        className="bg-black/60 rounded-md px-3 py-3 border border-neutral-900"
-      >
-        <Text className="text-white font-bold">{buttonText}</Text>
+    <View style={{ display: showButton ? "flex" : "none" }}>
+      <TouchableOpacity onPress={onPress} style={styles.button}>
+        <Text style={styles.text}>{buttonText}</Text>
       </TouchableOpacity>
     </View>
   );
 };
 
+const styles = StyleSheet.create({
+  button: {
+    backgroundColor: "rgba(0, 0, 0, 0.75)",
+    borderRadius: 5,
+    paddingHorizontal: 10,
+    paddingVertical: 15,
+    borderWidth: 2,
+    borderColor: "#5A5454",
+  },
+  text: {
+    color: "white",
+    fontWeight: "bold",
+  },
+});
+
 export default SkipButton;

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

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

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

@@ -1,26 +1,23 @@
 import React, { useMemo, useState } from "react";
-import { View, TouchableOpacity, Modal } from "react-native";
+import { View, TouchableOpacity } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
+import * as DropdownMenu from "zeego/dropdown-menu";
 import { useControlContext } from "../contexts/ControlContext";
 import { useVideoContext } from "../contexts/VideoContext";
 import { EmbeddedSubtitle, ExternalSubtitle } from "../types";
 import { useAtomValue } from "jotai";
 import { apiAtom } from "@/providers/JellyfinProvider";
-import { router, useLocalSearchParams } from "expo-router";
-import { Text } from "@/components/common/Text";
+import { useLocalSearchParams } from "expo-router";
 
 interface DropdownViewDirectProps {
   showControls: boolean;
+  offline?: boolean; // used to disable external subs for downloads
 }
 
 const DropdownViewDirect: React.FC<DropdownViewDirectProps> = ({
   showControls,
+  offline = false,
 }) => {
-  const [isMainModalVisible, setIsMainModalVisible] = useState(false);
-  const [activeSubMenu, setActiveSubMenu] = useState<
-    "subtitle" | "audio" | null
-  >(null);
-
   const api = useAtomValue(apiAtom);
   const ControlContext = useControlContext();
   const mediaSource = ControlContext?.mediaSource;
@@ -56,11 +53,15 @@ const DropdownViewDirect: React.FC<DropdownViewDirectProps> = ({
         deliveryUrl: s.DeliveryUrl,
       })) || [];
 
-    return [...embeddedSubs, ...externalSubs] as (
-      | EmbeddedSubtitle
-      | ExternalSubtitle
-    )[];
-  }, [item, isVideoLoaded, subtitleTracks, mediaSource?.MediaStreams]);
+    // Combine embedded subs with external subs only if not offline
+    if (!offline) {
+      return [...embeddedSubs, ...externalSubs] as (
+        | EmbeddedSubtitle
+        | ExternalSubtitle
+      )[];
+    }
+    return embeddedSubs as EmbeddedSubtitle[];
+  }, [item, isVideoLoaded, subtitleTracks, mediaSource?.MediaStreams, offline]);
 
   const { subtitleIndex, audioIndex } = useLocalSearchParams<{
     itemId: string;
@@ -70,143 +71,110 @@ const DropdownViewDirect: React.FC<DropdownViewDirectProps> = ({
     bitrateValue: string;
   }>();
 
-  const closeAllModals = () => {
-    setIsMainModalVisible(false);
-    setActiveSubMenu(null);
-  };
-
-  const MenuOption = ({
-    label,
-    onPress,
-  }: {
-    label: string;
-    onPress: () => void;
-  }) => (
-    <TouchableOpacity
-      className="p-4 border-b border-neutral-800 flex-row items-center justify-between"
-      onPress={onPress}
-    >
-      <Text>{label}</Text>
-      <Ionicons name="chevron-forward" size={20} color="white" />
-    </TouchableOpacity>
+  const [selectedSubtitleIndex, setSelectedSubtitleIndex] = useState<Number>(
+    parseInt(subtitleIndex)
+  );
+  const [selectedAudioIndex, setSelectedAudioIndex] = useState<Number>(
+    parseInt(audioIndex)
   );
 
   return (
-    <>
-      <TouchableOpacity
-        className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"
-        onPress={() => setIsMainModalVisible(true)}
-      >
-        <Ionicons name="ellipsis-horizontal" size={24} color="white" />
-      </TouchableOpacity>
-
-      <Modal
-        visible={isMainModalVisible}
-        transparent
-        animationType="slide"
-        onRequestClose={closeAllModals}
-      >
-        <TouchableOpacity
-          className="flex-1 bg-black/50"
-          activeOpacity={1}
-          onPress={closeAllModals}
+    <View
+      style={{
+        position: "absolute",
+        zIndex: 1000,
+        opacity: showControls ? 1 : 0,
+      }}
+      className="p-4"
+    >
+      <DropdownMenu.Root>
+        <DropdownMenu.Trigger>
+          <TouchableOpacity className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2">
+            <Ionicons name="ellipsis-horizontal" size={24} color={"white"} />
+          </TouchableOpacity>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content
+          loop={true}
+          side="bottom"
+          align="start"
+          alignOffset={0}
+          avoidCollisions={true}
+          collisionPadding={8}
+          sideOffset={8}
         >
-          <View className="mt-auto bg-neutral-900 rounded-t-xl">
-            {!activeSubMenu ? (
-              <>
-                <View className="p-4 border-b border-neutral-800">
-                  <Text className="text-lg font-bold text-center">
-                    Settings
-                  </Text>
-                </View>
-                <View>
-                  <MenuOption
-                    label="Subtitle"
-                    onPress={() => setActiveSubMenu("subtitle")}
-                  />
-                  <MenuOption
-                    label="Audio"
-                    onPress={() => setActiveSubMenu("audio")}
-                  />
-                </View>
-              </>
-            ) : activeSubMenu === "subtitle" ? (
-              <>
-                <View className="p-4 border-b border-neutral-800 flex-row items-center">
-                  <TouchableOpacity onPress={() => setActiveSubMenu(null)}>
-                    <Ionicons name="chevron-back" size={24} color="white" />
-                  </TouchableOpacity>
-                  <Text className="text-lg font-bold ml-2">Subtitle</Text>
-                </View>
-                <View className="max-h-[50%]">
-                  {allSubtitleTracksForDirectPlay?.map((sub, idx) => (
-                    <TouchableOpacity
-                      key={`subtitle-${idx}`}
-                      className="p-4 border-b border-neutral-800 flex-row items-center justify-between"
-                      onPress={() => {
-                        if ("deliveryUrl" in sub && sub.deliveryUrl) {
-                          setSubtitleURL?.(
-                            api?.basePath + sub.deliveryUrl,
-                            sub.name
-                          );
-                        } else {
-                          setSubtitleTrack?.(sub.index);
-                        }
-                        router.setParams({
-                          subtitleIndex: sub.index.toString(),
-                        });
-                        closeAllModals();
-                      }}
-                    >
-                      <Text>{sub.name}</Text>
-                      {subtitleIndex === sub.index.toString() && (
-                        <Ionicons name="checkmark" size={24} color="white" />
-                      )}
-                    </TouchableOpacity>
-                  ))}
-                </View>
-              </>
-            ) : (
-              <>
-                <View className="p-4 border-b border-neutral-800 flex-row items-center">
-                  <TouchableOpacity onPress={() => setActiveSubMenu(null)}>
-                    <Ionicons name="chevron-back" size={24} color="white" />
-                  </TouchableOpacity>
-                  <Text className="text-lg font-bold ml-2">Audio</Text>
-                </View>
-                <View className="max-h-[50%]">
-                  {audioTracks?.map((track, idx) => (
-                    <TouchableOpacity
-                      key={`audio-${idx}`}
-                      className="p-4 border-b border-neutral-800 flex-row items-center justify-between"
-                      onPress={() => {
-                        setAudioTrack?.(track.index);
-                        router.setParams({
-                          audioIndex: track.index.toString(),
-                        });
-                        closeAllModals();
-                      }}
-                    >
-                      <Text>{track.name}</Text>
-                      {audioIndex === track.index.toString() && (
-                        <Ionicons name="checkmark" size={24} color="white" />
-                      )}
-                    </TouchableOpacity>
-                  ))}
-                </View>
-              </>
-            )}
-
-            <TouchableOpacity
-              className="p-4 border-t border-neutral-800"
-              onPress={closeAllModals}
+          <DropdownMenu.Sub>
+            <DropdownMenu.SubTrigger key="subtitle-trigger">
+              Subtitle
+            </DropdownMenu.SubTrigger>
+            <DropdownMenu.SubContent
+              alignOffset={-10}
+              avoidCollisions={true}
+              collisionPadding={0}
+              loop={true}
+              sideOffset={10}
             >
-              <Text className="text-center text-purple-400">Cancel</Text>
-            </TouchableOpacity>
-          </View>
-        </TouchableOpacity>
-      </Modal>
-    </>
+              {allSubtitleTracksForDirectPlay?.map((sub, idx: number) => (
+                <DropdownMenu.CheckboxItem
+                  key={`subtitle-item-${idx}`}
+                  value={selectedSubtitleIndex === sub.index}
+                  onValueChange={() => {
+                    if ("deliveryUrl" in sub && sub.deliveryUrl) {
+                      setSubtitleURL &&
+                        setSubtitleURL(
+                          api?.basePath + sub.deliveryUrl,
+                          sub.name
+                        );
+
+                      console.log(
+                        "Set external subtitle: ",
+                        api?.basePath + sub.deliveryUrl
+                      );
+                    } else {
+                      console.log("Set sub index: ", sub.index);
+                      setSubtitleTrack && setSubtitleTrack(sub.index);
+                    }
+
+                    setSelectedSubtitleIndex(sub.index);
+                    console.log("Subtitle: ", sub);
+                  }}
+                >
+                  <DropdownMenu.ItemTitle key={`subtitle-item-title-${idx}`}>
+                    {sub.name}
+                  </DropdownMenu.ItemTitle>
+                </DropdownMenu.CheckboxItem>
+              ))}
+            </DropdownMenu.SubContent>
+          </DropdownMenu.Sub>
+          <DropdownMenu.Sub>
+            <DropdownMenu.SubTrigger key="audio-trigger">
+              Audio
+            </DropdownMenu.SubTrigger>
+            <DropdownMenu.SubContent
+              alignOffset={-10}
+              avoidCollisions={true}
+              collisionPadding={0}
+              loop={true}
+              sideOffset={10}
+            >
+              {audioTracks?.map((track, idx: number) => (
+                <DropdownMenu.CheckboxItem
+                  key={`audio-item-${idx}`}
+                  value={selectedAudioIndex === track.index}
+                  onValueChange={() => {
+                    setSelectedAudioIndex(track.index);
+                    setAudioTrack && setAudioTrack(track.index);
+                  }}
+                >
+                  <DropdownMenu.ItemTitle key={`audio-item-title-${idx}`}>
+                    {track.name}
+                  </DropdownMenu.ItemTitle>
+                </DropdownMenu.CheckboxItem>
+              ))}
+            </DropdownMenu.SubContent>
+          </DropdownMenu.Sub>
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
+    </View>
   );
 };
 

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

@@ -1,25 +1,23 @@
-import { Text } from "@/components/common/Text";
-import { apiAtom } from "@/providers/JellyfinProvider";
-import { SubtitleHelper } from "@/utils/SubtitleHelper";
-import { Ionicons } from "@expo/vector-icons";
-import { useLocalSearchParams, useRouter } from "expo-router";
-import { useAtomValue } from "jotai";
 import React, { useCallback, useMemo, useState } from "react";
-import { Modal, TouchableOpacity, View } from "react-native";
+import { View, TouchableOpacity } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import * as DropdownMenu from "zeego/dropdown-menu";
 import { useControlContext } from "../contexts/ControlContext";
 import { useVideoContext } from "../contexts/VideoContext";
 import { TranscodedSubtitle } from "../types";
+import { useAtomValue } from "jotai";
+import { apiAtom } from "@/providers/JellyfinProvider";
+import { useLocalSearchParams, useRouter } from "expo-router";
 
 interface DropdownViewProps {
   showControls: boolean;
+  offline?: boolean; // used to disable external subs for downloads
 }
 
-const DropdownView: React.FC<DropdownViewProps> = ({ showControls }) => {
-  const [isMainModalVisible, setIsMainModalVisible] = useState(false);
-  const [activeSubMenu, setActiveSubMenu] = useState<
-    "subtitle" | "audio" | null
-  >(null);
-
+const DropdownView: React.FC<DropdownViewProps> = ({
+  showControls,
+  offline = false,
+}) => {
   const router = useRouter();
   const api = useAtomValue(apiAtom);
   const ControlContext = useControlContext();
@@ -39,20 +37,32 @@ const DropdownView: React.FC<DropdownViewProps> = ({ showControls }) => {
   }>();
 
   // Either its on a text subtitle or its on not on any subtitle therefore it should show all the embedded HLS subtitles.
-
-  const isOnTextSubtitle = useMemo(() => {
-    const res = Boolean(
-      mediaSource?.MediaStreams?.find(
-        (x) => x.Index === parseInt(subtitleIndex) && x.IsTextSubtitleStream
-      ) || subtitleIndex === "-1"
-    );
-    return res;
-  }, []);
+  const isOnTextSubtitle =
+    mediaSource?.MediaStreams?.find(
+      (x) => x.Index === parseInt(subtitleIndex) && x.IsTextSubtitleStream
+    ) || subtitleIndex === "-1";
 
   const allSubs =
     mediaSource?.MediaStreams?.filter((x) => x.Type === "Subtitle") ?? [];
+  const textBasedSubs = allSubs.filter((x) => x.IsTextSubtitleStream);
 
-  const subtitleHelper = new SubtitleHelper(mediaSource?.MediaStreams ?? []);
+  // This is used in the case where it is transcoding stream.
+  const chosenSubtitle = textBasedSubs.find(
+    (x) => x.Index === parseInt(subtitleIndex)
+  );
+
+  let initialSubtitleIndex = -1;
+  if (!isOnTextSubtitle) {
+    initialSubtitleIndex = parseInt(subtitleIndex);
+  } else if (chosenSubtitle) {
+    initialSubtitleIndex = textBasedSubs.indexOf(chosenSubtitle);
+  }
+
+  const [selectedSubtitleIndex, setSelectedSubtitleIndex] =
+    useState<number>(initialSubtitleIndex);
+  const [selectedAudioIndex, setSelectedAudioIndex] = useState<number>(
+    parseInt(audioIndex)
+  );
 
   const allSubtitleTracksForTranscodingStream = useMemo(() => {
     const disableSubtitle = {
@@ -68,7 +78,38 @@ const DropdownView: React.FC<DropdownViewProps> = ({ showControls }) => {
           IsTextSubtitleStream: true,
         })) || [];
 
-      const sortedSubtitles = subtitleHelper.getSortedSubtitles(textSubtitles);
+      const imageSubtitles = allSubs
+        .filter((x) => !x.IsTextSubtitleStream)
+        .map(
+          (x) =>
+            ({
+              name: x.DisplayTitle!,
+              index: x.Index!,
+              IsTextSubtitleStream: x.IsTextSubtitleStream,
+            } as TranscodedSubtitle)
+        );
+
+      const textSubtitlesMap = new Map(textSubtitles.map((s) => [s.name, s]));
+      const imageSubtitlesMap = new Map(imageSubtitles.map((s) => [s.name, s]));
+
+      const sortedSubtitles = Array.from(
+        new Set(
+          allSubs
+            .map((sub) => {
+              const displayTitle = sub.DisplayTitle ?? "";
+              if (textSubtitlesMap.has(displayTitle)) {
+                return textSubtitlesMap.get(displayTitle);
+              }
+              if (imageSubtitlesMap.has(displayTitle)) {
+                return imageSubtitlesMap.get(displayTitle);
+              }
+              return null;
+            })
+            .filter(
+              (subtitle): subtitle is TranscodedSubtitle => subtitle !== null
+            )
+        )
+      );
 
       return [disableSubtitle, ...sortedSubtitles];
     }
@@ -82,7 +123,7 @@ const DropdownView: React.FC<DropdownViewProps> = ({ showControls }) => {
     return [disableSubtitle, ...transcodedSubtitle];
   }, [item, isVideoLoaded, subtitleTracks, mediaSource?.MediaStreams]);
 
-  const changeToImageBasedSub = useCallback(
+  const ChangeTranscodingSubtitle = useCallback(
     (subtitleIndex: number) => {
       const queryParams = new URLSearchParams({
         itemId: item.Id ?? "", // Ensure itemId is a string
@@ -104,13 +145,26 @@ const DropdownView: React.FC<DropdownViewProps> = ({ showControls }) => {
       name: x.DisplayTitle!,
       index: x.Index!,
     })) || [];
-
   const ChangeTranscodingAudio = useCallback(
-    (audioIndex: number) => {
+    (audioIndex: number, currentSelectedSubtitleIndex: number) => {
+      let newSubtitleIndex: number;
+
+      if (!isOnTextSubtitle) {
+        newSubtitleIndex = parseInt(subtitleIndex);
+      } else if (
+        currentSelectedSubtitleIndex >= 0 &&
+        currentSelectedSubtitleIndex < textBasedSubs.length
+      ) {
+        console.log("setHere SubtitleIndex", currentSelectedSubtitleIndex);
+        newSubtitleIndex = textBasedSubs[currentSelectedSubtitleIndex].Index!;
+        console.log("newSubtitleIndex", newSubtitleIndex);
+      } else {
+        newSubtitleIndex = -1;
+      }
       const queryParams = new URLSearchParams({
         itemId: item.Id ?? "", // Ensure itemId is a string
         audioIndex: audioIndex?.toString() ?? "",
-        subtitleIndex: subtitleIndex?.toString() ?? "",
+        subtitleIndex: newSubtitleIndex?.toString() ?? "",
         mediaSourceId: mediaSource?.Id ?? "", // Ensure mediaSourceId is a string
         bitrateValue: bitrateValue,
       }).toString();
@@ -118,28 +172,7 @@ const DropdownView: React.FC<DropdownViewProps> = ({ showControls }) => {
       // @ts-expect-error
       router.replace(`player/transcoding-player?${queryParams}`);
     },
-    [mediaSource, subtitleIndex, audioIndex]
-  );
-
-  const closeAllModals = () => {
-    setIsMainModalVisible(false);
-    setActiveSubMenu(null);
-  };
-
-  const MenuOption = ({
-    label,
-    onPress,
-  }: {
-    label: string;
-    onPress: () => void;
-  }) => (
-    <TouchableOpacity
-      className="p-4 border-b border-neutral-800 flex-row items-center justify-between"
-      onPress={onPress}
-    >
-      <Text>{label}</Text>
-      <Ionicons name="chevron-forward" size={20} color="white" />
-    </TouchableOpacity>
+    [mediaSource]
   );
 
   return (
@@ -151,135 +184,87 @@ const DropdownView: React.FC<DropdownViewProps> = ({ showControls }) => {
       }}
       className="p-4"
     >
-      <TouchableOpacity
-        className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"
-        onPress={() => setIsMainModalVisible(true)}
-      >
-        <Ionicons name="ellipsis-horizontal" size={24} color="white" />
-      </TouchableOpacity>
-
-      <Modal
-        visible={isMainModalVisible}
-        transparent
-        animationType="slide"
-        onRequestClose={closeAllModals}
-      >
-        <TouchableOpacity
-          className="flex-1 bg-black/50"
-          activeOpacity={1}
-          onPress={closeAllModals}
+      <DropdownMenu.Root>
+        <DropdownMenu.Trigger>
+          <TouchableOpacity className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2">
+            <Ionicons name="ellipsis-horizontal" size={24} color={"white"} />
+          </TouchableOpacity>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content
+          loop={true}
+          side="bottom"
+          align="start"
+          alignOffset={0}
+          avoidCollisions={true}
+          collisionPadding={8}
+          sideOffset={8}
         >
-          <View className="mt-auto bg-neutral-900 rounded-t-xl">
-            {!activeSubMenu ? (
-              <>
-                <View className="p-4 border-b border-neutral-800">
-                  <Text className="text-lg font-bold text-center">
-                    Settings
-                  </Text>
-                </View>
-                <View>
-                  <MenuOption
-                    label="Subtitle"
-                    onPress={() => setActiveSubMenu("subtitle")}
-                  />
-                  <MenuOption
-                    label="Audio"
-                    onPress={() => setActiveSubMenu("audio")}
-                  />
-                </View>
-              </>
-            ) : activeSubMenu === "subtitle" ? (
-              <>
-                <View className="p-4 border-b border-neutral-800 flex-row items-center">
-                  <TouchableOpacity onPress={() => setActiveSubMenu(null)}>
-                    <Ionicons name="chevron-back" size={24} color="white" />
-                  </TouchableOpacity>
-                  <Text className="text-lg font-bold ml-2">Subtitle</Text>
-                </View>
-                <View className="max-h-[50%]">
-                  {allSubtitleTracksForTranscodingStream?.map((sub, idx) => (
-                    <TouchableOpacity
-                      key={`subtitle-${idx}`}
-                      className="p-4 border-b border-neutral-800 flex-row items-center justify-between"
-                      onPress={() => {
-                        if (
-                          subtitleIndex ===
-                          (isOnTextSubtitle && sub.IsTextSubtitleStream
-                            ? subtitleHelper
-                                .getSourceSubtitleIndex(sub.index)
-                                .toString()
-                            : sub?.index.toString())
-                        )
-                          return;
-
-                        router.setParams({
-                          subtitleIndex: subtitleHelper
-                            .getSourceSubtitleIndex(sub.index)
-                            .toString(),
-                        });
-
-                        if (sub.IsTextSubtitleStream && isOnTextSubtitle) {
-                          setSubtitleTrack && setSubtitleTrack(sub.index);
-                        } else {
-                          changeToImageBasedSub(sub.index);
-                        }
-                        closeAllModals();
-                      }}
-                    >
-                      <Text>{sub.name}</Text>
-                      {subtitleIndex ===
-                        (isOnTextSubtitle && sub.IsTextSubtitleStream
-                          ? subtitleHelper
-                              .getSourceSubtitleIndex(sub.index)
-                              .toString()
-                          : sub?.index.toString()) && (
-                        <Ionicons name="checkmark" size={24} color="white" />
-                      )}
-                    </TouchableOpacity>
-                  ))}
-                </View>
-              </>
-            ) : (
-              <>
-                <View className="p-4 border-b border-neutral-800 flex-row items-center">
-                  <TouchableOpacity onPress={() => setActiveSubMenu(null)}>
-                    <Ionicons name="chevron-back" size={24} color="white" />
-                  </TouchableOpacity>
-                  <Text className="text-lg font-bold ml-2">Audio</Text>
-                </View>
-                <View className="max-h-[50%]">
-                  {allAudio?.map((track, idx) => (
-                    <TouchableOpacity
-                      key={`audio-${idx}`}
-                      className="p-4 border-b border-neutral-800 flex-row items-center justify-between"
-                      onPress={() => {
-                        if (audioIndex === track.index.toString()) return;
-                        router.setParams({
-                          audioIndex: track.index.toString(),
-                        });
-                        ChangeTranscodingAudio(track.index);
-                        closeAllModals();
-                      }}
-                    >
-                      <Text>{track.name}</Text>
-                      {audioIndex === track.index.toString() && (
-                        <Ionicons name="checkmark" size={24} color="white" />
-                      )}
-                    </TouchableOpacity>
-                  ))}
-                </View>
-              </>
-            )}
-
-            <TouchableOpacity
-              className="p-4 border-t border-neutral-800"
-              onPress={closeAllModals}
+          <DropdownMenu.Sub>
+            <DropdownMenu.SubTrigger key="subtitle-trigger">
+              Subtitle
+            </DropdownMenu.SubTrigger>
+            <DropdownMenu.SubContent
+              alignOffset={-10}
+              avoidCollisions={true}
+              collisionPadding={0}
+              loop={true}
+              sideOffset={10}
             >
-              <Text className="text-center text-purple-400">Cancel</Text>
-            </TouchableOpacity>
-          </View>
-        </TouchableOpacity>
-      </Modal>
+              {allSubtitleTracksForTranscodingStream?.map(
+                (sub, idx: number) => (
+                  <DropdownMenu.CheckboxItem
+                    value={selectedSubtitleIndex === sub.index}
+                    key={`subtitle-item-${idx}`}
+                    onValueChange={() => {
+                      console.log("sub", sub);
+                      if (selectedSubtitleIndex === sub?.index) return;
+                      setSelectedSubtitleIndex(sub.index);
+                      if (sub.IsTextSubtitleStream && isOnTextSubtitle) {
+                        setSubtitleTrack && setSubtitleTrack(sub.index);
+                        return;
+                      }
+
+                      ChangeTranscodingSubtitle(sub.index);
+                    }}
+                  >
+                    <DropdownMenu.ItemTitle key={`subtitle-item-title-${idx}`}>
+                      {sub.name}
+                    </DropdownMenu.ItemTitle>
+                  </DropdownMenu.CheckboxItem>
+                )
+              )}
+            </DropdownMenu.SubContent>
+          </DropdownMenu.Sub>
+          <DropdownMenu.Sub>
+            <DropdownMenu.SubTrigger key="audio-trigger">
+              Audio
+            </DropdownMenu.SubTrigger>
+            <DropdownMenu.SubContent
+              alignOffset={-10}
+              avoidCollisions={true}
+              collisionPadding={0}
+              loop={true}
+              sideOffset={10}
+            >
+              {allAudio?.map((track, idx: number) => (
+                <DropdownMenu.CheckboxItem
+                  key={`audio-item-${idx}`}
+                  value={selectedAudioIndex === track.index}
+                  onValueChange={() => {
+                    if (selectedAudioIndex === track.index) return;
+                    setSelectedAudioIndex(track.index);
+                    ChangeTranscodingAudio(track.index, selectedSubtitleIndex);
+                  }}
+                >
+                  <DropdownMenu.ItemTitle key={`audio-item-title-${idx}`}>
+                    {track.name}
+                  </DropdownMenu.ItemTitle>
+                </DropdownMenu.CheckboxItem>
+              ))}
+            </DropdownMenu.SubContent>
+          </DropdownMenu.Sub>
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
     </View>
   );
 };

eas.json

@@ -22,13 +22,13 @@
       }
     },
     "production": {
-      "channel": "0.23.0",
+      "channel": "0.22.0",
       "android": {
         "image": "latest"
       }
     },
     "production-apk": {
-      "channel": "0.23.0",
+      "channel": "0.22.0",
       "android": {
         "buildType": "apk",
         "image": "latest"

hooks/useDefaultPlaySettings.ts

@@ -6,7 +6,6 @@ import {
 } from "@jellyfin/sdk/lib/generated-client";
 import { useMemo } from "react";
 
-// Used only for intial play settings.
 const useDefaultPlaySettings = (
   item: BaseItemDto,
   settings: Settings | null
@@ -18,23 +17,34 @@ const useDefaultPlaySettings = (
     // 2. Get default or preferred audio
     const defaultAudioIndex = mediaSource?.DefaultAudioStreamIndex;
     const preferedAudioIndex = mediaSource?.MediaStreams?.find(
-      (x) =>
-        x.Type === "Audio" &&
-        x.Language ===
-          settings?.defaultAudioLanguage?.ThreeLetterISOLanguageName
+      (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.Type === "Subtitle" &&
+        x.Language === settings?.defaultSubtitleLanguage?.value
+    )?.Index;
+
+    const defaultSubtitleIndex = mediaSource?.MediaStreams?.find(
+      (stream) => stream.Type === "Subtitle" && stream.IsDefault
+    )?.Index;
+
     // 4. Get default bitrate
     const bitrate = BITRATES[0];
 
     return {
       defaultAudioIndex:
         preferedAudioIndex || defaultAudioIndex || firstAudioIndex || undefined,
-      defaultSubtitleIndex: mediaSource?.DefaultSubtitleStreamIndex || -1,
+      defaultSubtitleIndex:
+        preferedSubtitleIndex !== undefined
+          ? preferedSubtitleIndex
+          : defaultSubtitleIndex || undefined,
       defaultMediaSource: mediaSource || undefined,
       defaultBitrate: bitrate || undefined,
     };

hooks/useDownloadedFileOpener.ts

@@ -0,0 +1,48 @@
+import { usePlaySettings } from "@/providers/PlaySettingsProvider";
+import { writeToLog } from "@/utils/log";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+import * as FileSystem from "expo-file-system";
+import { useRouter } from "expo-router";
+import { useCallback } from "react";
+
+export const getDownloadedFileUrl = async (itemId: string): Promise<string> => {
+  const directory = FileSystem.documentDirectory;
+
+  if (!directory) {
+    throw new Error("Document directory is not available");
+  }
+
+  if (!itemId) {
+    throw new Error("Item ID is not available");
+  }
+
+  const files = await FileSystem.readDirectoryAsync(directory);
+  const path = itemId!;
+  const matchingFile = files.find((file) => file.startsWith(path));
+
+  if (!matchingFile) {
+    throw new Error(`No file found for item ${path}`);
+  }
+
+  return `${directory}${matchingFile}`;
+};
+
+export const useDownloadedFileOpener = () => {
+  const router = useRouter();
+  const { setPlayUrl, setOfflineSettings } = usePlaySettings();
+
+  const openFile = useCallback(
+    async (item: BaseItemDto) => {
+      try {
+        // @ts-expect-error
+        router.push("/player/direct-player?offline=true&itemId=" + item.Id);
+      } catch (error) {
+        writeToLog("ERROR", "Error opening file", error);
+        console.error("Error opening file:", error);
+      }
+    },
+    [setOfflineSettings, setPlayUrl, router]
+  );
+
+  return { openFile };
+};

hooks/useImageColors.ts

@@ -0,0 +1,108 @@
+import { apiAtom } from "@/providers/JellyfinProvider";
+import {
+  adjustToNearBlack,
+  calculateTextColor,
+  isCloseToBlack,
+  itemThemeColorAtom,
+} from "@/utils/atoms/primaryColor";
+import { getItemImage } from "@/utils/getItemImage";
+import { storage } from "@/utils/mmkv";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+import { useAtom, useAtomValue } from "jotai";
+import { useEffect, useMemo } from "react";
+import { getColors } from "react-native-image-colors";
+
+/**
+ * Custom hook to extract and manage image colors for a given item.
+ *
+ * @param item - The BaseItemDto object representing the item.
+ * @param disabled - A boolean flag to disable color extraction.
+ *
+ */
+export const useImageColors = ({
+  item,
+  url,
+  disabled,
+}: {
+  item?: BaseItemDto | null;
+  url?: string | null;
+  disabled?: boolean;
+}) => {
+  const api = useAtomValue(apiAtom);
+  const [, setPrimaryColor] = useAtom(itemThemeColorAtom);
+
+  const source = useMemo(() => {
+    if (!api) return;
+    if (url) return { uri: url };
+    else if (item)
+      return getItemImage({
+        item,
+        api,
+        variant: "Primary",
+        quality: 80,
+        width: 300,
+      });
+    else return null;
+  }, [api, item]);
+
+  useEffect(() => {
+    if (disabled) return;
+    if (source?.uri) {
+      // Check if colors are already cached in storage
+      const _primary = storage.getString(`${source.uri}-primary`);
+      const _text = storage.getString(`${source.uri}-text`);
+
+      // If colors are cached, use them and exit
+      if (_primary && _text) {
+        setPrimaryColor({
+          primary: _primary,
+          text: _text,
+        });
+        return;
+      }
+
+      // Extract colors from the image
+      getColors(source.uri, {
+        fallback: "#fff",
+        cache: false,
+      })
+        .then((colors) => {
+          let primary: string = "#fff";
+          let text: string = "#000";
+          let backup: string = "#fff";
+
+          // Select the appropriate color based on the platform
+          if (colors.platform === "android") {
+            primary = colors.dominant;
+            backup = colors.vibrant;
+          } else if (colors.platform === "ios") {
+            primary = colors.detail;
+            backup = colors.primary;
+          }
+
+          // Adjust the primary color if it's too close to black
+          if (primary && isCloseToBlack(primary)) {
+            if (backup && !isCloseToBlack(backup)) primary = backup;
+            primary = adjustToNearBlack(primary);
+          }
+
+          // Calculate the text color based on the primary color
+          if (primary) text = calculateTextColor(primary);
+
+          setPrimaryColor({
+            primary,
+            text,
+          });
+
+          // Cache the colors in storage
+          if (source.uri && primary) {
+            storage.set(`${source.uri}-primary`, primary);
+            storage.set(`${source.uri}-text`, text);
+          }
+        })
+        .catch((error) => {
+          console.error("Error getting colors", error);
+        });
+    }
+  }, [source?.uri, setPrimaryColor, disabled]);
+};

hooks/useIntroSkipper.ts

@@ -75,6 +75,7 @@ export const useIntroSkipper = (
   }, [introTimestamps, currentTime]);
 
   const skipIntro = useCallback(() => {
+    console.log("skipIntro");
     if (!introTimestamps) return;
     try {
       wrappedSeek(introTimestamps.IntroEnd);

hooks/useJellyseerr.ts

@@ -1,378 +0,0 @@
-import axios, { AxiosError, AxiosInstance } from "axios";
-import { Results } from "@/utils/jellyseerr/server/models/Search";
-import { storage } from "@/utils/mmkv";
-import { inRange } from "lodash";
-import { User as JellyseerrUser } from "@/utils/jellyseerr/server/entity/User";
-import { atom } from "jotai";
-import { useAtom } from "jotai/index";
-import "@/augmentations";
-import { useCallback, useMemo } from "react";
-import { useSettings } from "@/utils/atoms/settings";
-import { toast } from "sonner-native";
-import {
-  MediaRequestStatus,
-  MediaType,
-} from "@/utils/jellyseerr/server/constants/media";
-import MediaRequest from "@/utils/jellyseerr/server/entity/MediaRequest";
-import { MediaRequestBody } from "@/utils/jellyseerr/server/interfaces/api/requestInterfaces";
-import { MovieDetails } from "@/utils/jellyseerr/server/models/Movie";
-import {
-  SeasonWithEpisodes,
-  TvDetails,
-} from "@/utils/jellyseerr/server/models/Tv";
-import {
-  IssueStatus,
-  IssueType,
-} from "@/utils/jellyseerr/server/constants/issue";
-import Issue from "@/utils/jellyseerr/server/entity/Issue";
-import { RTRating } from "@/utils/jellyseerr/server/api/rating/rottentomatoes";
-import { writeErrorLog } from "@/utils/log";
-import DiscoverSlider from "@/utils/jellyseerr/server/entity/DiscoverSlider";
-
-interface SearchParams {
-  query: string;
-  page: number;
-  language: string;
-}
-
-interface SearchResults {
-  page: number;
-  totalPages: number;
-  totalResults: number;
-  results: Results[];
-}
-
-const JELLYSEERR_USER = "JELLYSEERR_USER";
-const JELLYSEERR_COOKIES = "JELLYSEERR_COOKIES";
-
-export const clearJellyseerrStorageData = () => {
-  storage.delete(JELLYSEERR_USER);
-  storage.delete(JELLYSEERR_COOKIES);
-};
-
-export enum Endpoints {
-  STATUS = "/status",
-  API_V1 = "/api/v1",
-  SEARCH = "/search",
-  REQUEST = "/request",
-  MOVIE = "/movie",
-  RATINGS = "/ratings",
-  ISSUE = "/issue",
-  TV = "/tv",
-  SETTINGS = "/settings",
-  DISCOVER = "/discover",
-  DISCOVER_TRENDING = DISCOVER + "/trending",
-  DISCOVER_MOVIES = DISCOVER + "/movies",
-  DISCOVER_TV = DISCOVER + TV,
-  AUTH_JELLYFIN = "/auth/jellyfin",
-}
-
-export type DiscoverEndpoint =
-  | Endpoints.DISCOVER_TRENDING
-  | Endpoints.DISCOVER_MOVIES
-  | Endpoints.DISCOVER_TV;
-
-export type TestResult =
-  | {
-      isValid: true;
-      requiresPass: boolean;
-    }
-  | {
-      isValid: false;
-    };
-
-export class JellyseerrApi {
-  axios: AxiosInstance;
-
-  constructor(baseUrl: string) {
-    this.axios = axios.create({
-      baseURL: baseUrl,
-      withCredentials: true,
-      withXSRFToken: true,
-      xsrfHeaderName: "XSRF-TOKEN",
-    });
-
-    this.setInterceptors();
-  }
-
-  async test(): Promise<TestResult> {
-    const user = storage.get<JellyseerrUser>(JELLYSEERR_USER);
-    const cookies = storage.get<string[]>(JELLYSEERR_COOKIES);
-
-    if (user && cookies) {
-      return Promise.resolve({
-        isValid: true,
-        requiresPass: false,
-      });
-    }
-
-    return await this.axios
-      .get(Endpoints.API_V1 + Endpoints.STATUS)
-      .then((response) => {
-        const { status, headers, data } = response;
-        if (inRange(status, 200, 299)) {
-          if (data.version < "2.0.0") {
-            const error =
-              "Jellyseerr server does not meet minimum version requirements! Please update to at least 2.0.0";
-            toast.error(error);
-            throw Error(error);
-          }
-
-          storage.setAny(
-            JELLYSEERR_COOKIES,
-            headers["set-cookie"]?.flatMap((c) => c.split("; ")) ?? []
-          );
-          return {
-            isValid: true,
-            requiresPass: true,
-          };
-        }
-        toast.error(`Jellyseerr test failed. Please try again.`);
-        writeErrorLog(
-          `Jellyseerr returned a ${status} for url:\n` +
-            response.config.url +
-            "\n" +
-            JSON.stringify(response.data)
-        );
-        return {
-          isValid: false,
-          requiresPass: false,
-        };
-      })
-      .catch((e) => {
-        const msg = "Failed to test jellyseerr server url";
-        toast.error(msg);
-        console.error(msg, e);
-        return {
-          isValid: false,
-          requiresPass: false,
-        };
-      });
-  }
-
-  async login(username: string, password: string): Promise<JellyseerrUser> {
-    return this.axios
-      ?.post<JellyseerrUser>(Endpoints.API_V1 + Endpoints.AUTH_JELLYFIN, {
-        username,
-        password,
-        email: username,
-      })
-      .then((response) => {
-        const user = response?.data;
-        if (!user) throw Error("Login failed");
-        storage.setAny(JELLYSEERR_USER, user);
-        return user;
-      });
-  }
-
-  async discoverSettings(): Promise<DiscoverSlider[]> {
-    return this.axios
-      ?.get<DiscoverSlider[]>(
-        Endpoints.API_V1 + Endpoints.SETTINGS + Endpoints.DISCOVER
-      )
-      .then(({ data }) => data);
-  }
-
-  async discover(
-    endpoint: DiscoverEndpoint,
-    params: any
-  ): Promise<SearchResults> {
-    return this.axios
-      ?.get<SearchResults>(Endpoints.API_V1 + endpoint, { params })
-      .then(({ data }) => data);
-  }
-
-  async search(params: SearchParams): Promise<SearchResults> {
-    const response = await this.axios?.get<SearchResults>(
-      Endpoints.API_V1 + Endpoints.SEARCH,
-      { params }
-    );
-    return response?.data;
-  }
-
-  async request(request: MediaRequestBody): Promise<MediaRequest> {
-    return this.axios
-      ?.post<MediaRequest>(Endpoints.API_V1 + Endpoints.REQUEST, request)
-      .then(({ data }) => data);
-  }
-
-  async movieDetails(id: number) {
-    return this.axios
-      ?.get<MovieDetails>(Endpoints.API_V1 + Endpoints.MOVIE + `/${id}`)
-      .then((response) => {
-        return response?.data;
-      });
-  }
-
-  async movieRatings(id: number) {
-    return this.axios
-      ?.get<RTRating>(
-        `${Endpoints.API_V1}${Endpoints.MOVIE}/${id}${Endpoints.RATINGS}`
-      )
-      .then(({ data }) => data);
-  }
-
-  async tvDetails(id: number) {
-    return this.axios
-      ?.get<TvDetails>(`${Endpoints.API_V1}${Endpoints.TV}/${id}`)
-      .then((response) => {
-        return response?.data;
-      });
-  }
-
-  async tvRatings(id: number) {
-    return this.axios
-      ?.get<RTRating>(
-        `${Endpoints.API_V1}${Endpoints.TV}/${id}${Endpoints.RATINGS}`
-      )
-      .then(({ data }) => data);
-  }
-
-  async tvSeason(id: number, seasonId: number) {
-    return this.axios
-      ?.get<SeasonWithEpisodes>(
-        `${Endpoints.API_V1}${Endpoints.TV}/${id}/season/${seasonId}`
-      )
-      .then((response) => {
-        return response?.data;
-      });
-  }
-
-  tvStillImageProxy(path: string, width: number = 1920, quality: number = 75) {
-    return (
-      this.axios.defaults.baseURL +
-      `/_next/image?` +
-      new URLSearchParams(
-        `url=https://image.tmdb.org/t/p/original/${path}&w=${width}&q=${quality}`
-      ).toString()
-    );
-  }
-
-  async submitIssue(mediaId: number, issueType: IssueType, message: string) {
-    return this.axios
-      ?.post<Issue>(Endpoints.API_V1 + Endpoints.ISSUE, {
-        mediaId,
-        issueType,
-        message,
-      })
-      .then((response) => {
-        const issue = response.data;
-
-        if (issue.status === IssueStatus.OPEN) {
-          toast.success("Issue submitted!");
-        }
-        return issue;
-      });
-  }
-
-  private setInterceptors() {
-    this.axios.interceptors.response.use(
-      async (response) => {
-        const cookies = response.headers["set-cookie"];
-        if (cookies) {
-          storage.setAny(
-            JELLYSEERR_COOKIES,
-            response.headers["set-cookie"]?.flatMap((c) => c.split("; "))
-          );
-        }
-        return response;
-      },
-      (error: AxiosError) => {
-        const errorMsg = "Jellyseerr response error";
-        console.error(errorMsg, error, error.response?.data);
-        writeErrorLog(
-          errorMsg +
-            `\n` +
-            `error: ${error.toString()}\n` +
-            `url: ${error?.config?.url}\n` +
-            `data:\n` +
-            JSON.stringify(error.response?.data)
-        );
-        if (error.status === 403) {
-          clearJellyseerrStorageData();
-        }
-        return Promise.reject(error);
-      }
-    );
-
-    this.axios.interceptors.request.use(
-      async (config) => {
-        const cookies = storage.get<string[]>(JELLYSEERR_COOKIES);
-        if (cookies) {
-          const headerName = this.axios.defaults.xsrfHeaderName!!;
-          const xsrfToken = cookies
-            .find((c) => c.includes(headerName))
-            ?.split(headerName + "=")?.[1];
-          if (xsrfToken) {
-            config.headers[headerName] = xsrfToken;
-          }
-        }
-        return config;
-      },
-      (error) => {
-        console.error("Jellyseerr request error", error);
-      }
-    );
-  }
-}
-
-const jellyseerrUserAtom = atom(storage.get<JellyseerrUser>(JELLYSEERR_USER));
-
-export const useJellyseerr = () => {
-  const [jellyseerrUser, setJellyseerrUser] = useAtom(jellyseerrUserAtom);
-  const [settings, updateSettings] = useSettings();
-
-  const jellyseerrApi = useMemo(() => {
-    const cookies = storage.get<string[]>(JELLYSEERR_COOKIES);
-    if (settings?.jellyseerrServerUrl && cookies && jellyseerrUser) {
-      return new JellyseerrApi(settings?.jellyseerrServerUrl);
-    }
-    return undefined;
-  }, [settings?.jellyseerrServerUrl, jellyseerrUser]);
-
-  const clearAllJellyseerData = useCallback(async () => {
-    clearJellyseerrStorageData();
-    setJellyseerrUser(undefined);
-    updateSettings({ jellyseerrServerUrl: undefined });
-  }, []);
-
-  const requestMedia = useCallback(
-    (title: string, request: MediaRequestBody) => {
-      jellyseerrApi?.request?.(request)?.then((mediaRequest) => {
-        switch (mediaRequest.status) {
-          case MediaRequestStatus.PENDING:
-          case MediaRequestStatus.APPROVED:
-            toast.success(`Requested ${title}!`);
-            break;
-          case MediaRequestStatus.DECLINED:
-            toast.error(`You don't have permission to request!`);
-            break;
-          case MediaRequestStatus.FAILED:
-            toast.error(`Something went wrong requesting media!`);
-            break;
-        }
-      });
-    },
-    [jellyseerrApi]
-  );
-
-  const isJellyseerrResult = (
-    items: any[] | null | undefined
-  ): items is Results[] => {
-    return (
-      !items ||
-      (items.length >= 0 &&
-        Object.hasOwn(items[0], "mediaType") &&
-        Object.values(MediaType).includes(items[0]["mediaType"]))
-    );
-  };
-
-  return {
-    jellyseerrApi,
-    jellyseerrUser,
-    setJellyseerrUser,
-    clearAllJellyseerData,
-    isJellyseerrResult,
-    requestMedia,
-  };
-};

hooks/useMarkAsPlayed.ts

@@ -1,85 +0,0 @@
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { markAsNotPlayed } from "@/utils/jellyfin/playstate/markAsNotPlayed";
-import { markAsPlayed } from "@/utils/jellyfin/playstate/markAsPlayed";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { useQueryClient } from "@tanstack/react-query";
-import { useAtom } from "jotai";
-
-export const useMarkAsPlayed = (item: BaseItemDto) => {
-  const [api] = useAtom(apiAtom);
-  const [user] = useAtom(userAtom);
-  const queryClient = useQueryClient();
-
-  const invalidateQueries = () => {
-    const queriesToInvalidate = [
-      ["item", item.Id],
-      ["resumeItems"],
-      ["continueWatching"],
-      ["nextUp-all"],
-      ["nextUp"],
-      ["episodes"],
-      ["seasons"],
-      ["home"],
-    ];
-
-    queriesToInvalidate.forEach((queryKey) => {
-      queryClient.invalidateQueries({ queryKey });
-    });
-  };
-
-  const markAsPlayedStatus = async (played: boolean) => {
-    // Optimistic update
-    queryClient.setQueryData(
-      ["item", item.Id],
-      (oldData: BaseItemDto | undefined) => {
-        if (oldData) {
-          return {
-            ...oldData,
-            UserData: {
-              ...oldData.UserData,
-              Played: !played,
-            },
-          };
-        }
-        return oldData;
-      }
-    );
-
-    try {
-      if (played) {
-        await markAsNotPlayed({
-          api: api,
-          itemId: item?.Id,
-          userId: user?.Id,
-        });
-      } else {
-        await markAsPlayed({
-          api: api,
-          item: item,
-          userId: user?.Id,
-        });
-      }
-      invalidateQueries();
-    } catch (error) {
-      // Revert optimistic update on error
-      queryClient.setQueryData(
-        ["item", item.Id],
-        (oldData: BaseItemDto | undefined) => {
-          if (oldData) {
-            return {
-              ...oldData,
-              UserData: {
-                ...oldData.UserData,
-                Played: played,
-              },
-            };
-          }
-          return oldData;
-        }
-      );
-      console.error("Error updating played status:", error);
-    }
-  };
-
-  return markAsPlayedStatus;
-};

hooks/useOrientation.ts

@@ -0,0 +1,28 @@
+import orientationToOrientationLock from "@/utils/OrientationLockConverter";
+import * as ScreenOrientation from "expo-screen-orientation";
+import { useEffect, useState } from "react";
+
+export const useOrientation = () => {
+  const [orientation, setOrientation] = useState(
+    ScreenOrientation.OrientationLock.UNKNOWN
+  );
+
+  useEffect(() => {
+    const orientationSubscription =
+      ScreenOrientation.addOrientationChangeListener((event) => {
+        setOrientation(
+          orientationToOrientationLock(event.orientationInfo.orientation)
+        );
+      });
+
+    ScreenOrientation.getOrientationAsync().then((orientation) => {
+      setOrientation(orientationToOrientationLock(orientation));
+    });
+
+    return () => {
+      orientationSubscription.remove();
+    };
+  }, []);
+
+  return { orientation, setOrientation };
+};

hooks/useOrientationSettings.ts

@@ -0,0 +1,25 @@
+import { useSettings } from "@/utils/atoms/settings";
+import * as ScreenOrientation from "expo-screen-orientation";
+import { useEffect } from "react";
+
+export const useOrientationSettings = () => {
+  const [settings] = useSettings();
+
+  useEffect(() => {
+    if (settings?.autoRotate) {
+      // Don't need to do anything
+    } else if (settings?.defaultVideoOrientation) {
+      ScreenOrientation.lockAsync(settings.defaultVideoOrientation);
+    }
+
+    return () => {
+      if (settings?.autoRotate) {
+        ScreenOrientation.unlockAsync();
+      } else {
+        ScreenOrientation.lockAsync(
+          ScreenOrientation.OrientationLock.PORTRAIT_UP
+        );
+      }
+    };
+  }, [settings]);
+};

hooks/useRemuxHlsToMp4.ts

@@ -0,0 +1,224 @@
+import { useDownload } from "@/providers/DownloadProvider";
+import { apiAtom } from "@/providers/JellyfinProvider";
+import { getItemImage } from "@/utils/getItemImage";
+import { writeErrorLog, writeInfoLog, writeToLog } from "@/utils/log";
+import {
+  BaseItemDto,
+  MediaSourceInfo,
+} from "@jellyfin/sdk/lib/generated-client/models";
+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 { 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";
+
+const createFFmpegCommand = (url: string, output: string) => [
+  "-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
+  // 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,
+];
+
+/**
+ * Custom hook for remuxing HLS to MP4 using FFmpeg.
+ *
+ * @param url - The URL of the HLS stream
+ * @param item - The BaseItemDto object representing the media item
+ * @returns An object with remuxing-related functions
+ */
+export const useRemuxHlsToMp4 = () => {
+  const api = useAtomValue(apiAtom);
+  const router = useRouter();
+  const queryClient = useQueryClient();
+
+  const [settings] = useSettings();
+  const { saveImage } = useImageStorage();
+  const { saveSeriesPrimaryImage } = useDownloadHelper();
+  const { saveDownloadedItemInfo, setProcesses, processes } = useDownload();
+
+  const onSaveAssets = async (api: Api, item: BaseItemDto) => {
+    await saveSeriesPrimaryImage(item);
+    const itemImage = getItemImage({
+      item,
+      api,
+      variant: "Primary",
+      quality: 90,
+      width: 500,
+    });
+
+    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();
+
+        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
+            }, 
+          start time: ${startTime.toISOString()}, end time: ${endTime.toISOString()}, 
+          duration: ${
+            (endTime.getTime() - startTime.getTime()) / 1000
+          }s`.replace(/^ +/g, "")
+          );
+          toast.success("Download completed");
+        } else if (returnCode.isValueError()) {
+          endTime = new Date();
+          const allLogs = session.getAllLogsAsString();
+          writeErrorLog(
+            `useRemuxHlsToMp4 ~ remuxing failed for item: ${item.Name}, 
+          start time: ${startTime.toISOString()}, end time: ${endTime.toISOString()}, 
+          duration: ${
+            (endTime.getTime() - startTime.getTime()) / 1000
+          }s. All logs: ${allLogs}`.replace(/^ +/g, "")
+          );
+        } else if (returnCode.isValueCancel()) {
+          endTime = new Date();
+          writeInfoLog(
+            `useRemuxHlsToMp4 ~ remuxing was canceled for item: ${item.Name}, 
+          start time: ${startTime.toISOString()}, end time: ${endTime.toISOString()}, 
+          duration: ${
+            (endTime.getTime() - startTime.getTime()) / 1000
+          }s`.replace(/^ +/g, "")
+          );
+        }
+
+        setProcesses((prev) => {
+          return prev.filter((process) => process.itemId !== item.Id);
+        });
+      } catch (e) {
+        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]
+  );
+
+  const startRemuxing = useCallback(
+    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");
+
+      // First lets save any important assets we want to present to the user offline
+      await onSaveAssets(api, item);
+
+      toast.success(`Download started for ${item.Name}`, {
+        action: {
+          label: "Go to download",
+          onClick: () => {
+            router.push("/downloads");
+            toast.dismiss();
+          },
+        },
+      });
+
+      try {
+        const job: JobStatus = {
+          id: "",
+          deviceId: "",
+          inputUrl: url,
+          item: item,
+          itemId: item.Id!,
+          outputPath: output,
+          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),
+          undefined,
+          (s) => statisticsCallback(s, item)
+        );
+      } catch (e) {
+        const error = e as Error;
+        console.error("Failed to remux:", error);
+        writeErrorLog(
+          `useRemuxHlsToMp4 ~ remuxing failed for item: ${item.Name}, 
+          Error: ${error.message}, Stack: ${error.stack}`
+        );
+        setProcesses((prev) => {
+          return prev.filter((process) => process.itemId !== item.Id);
+        });
+        throw error; // Re-throw the error to propagate it to the caller
+      }
+    },
+    [settings, processes, setProcesses, completeCallback, statisticsCallback]
+  );
+
+  const cancelRemuxing = useCallback(() => {
+    FFmpegKit.cancel();
+    setProcesses([]);
+  }, []);
+
+  return { startRemuxing, cancelRemuxing };
+};