Merge branch 'master' into develop

feat: haptic feedback settings and custom hook

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -4,9 +4,7 @@ title: "[Bug]: "
 labels:
   - ["❌ bug"]
 projects:
-  - ["fredrikburmester/5"]
+  - ["streamyfin/3"]
-assignees:
-  - fredrikburmester
 
 body:
   - type: textarea
@@ -45,7 +43,7 @@ body:
       label: Version
       description: What version of Streamyfin are you running?
       options:
-        - 0.23.0
+        - 0.24.0
         - 0.22.0
         - 0.21.0
         - older

.github/ISSUE_TEMPLATE/feature_request.md

@@ -4,7 +4,8 @@ about: Suggest an idea for this project
 title: ''
 labels: '✨ enhancement'
 assignees: ''
-
+projects:
+ - streamyfin/3
 ---
 
 **Describe the solution you'd like**

.github/workflows/build-ios.yaml

@@ -0,0 +1,49 @@
+name: Automatic Build and Deploy
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: macos-15
+    name: Build IOS
+    steps:
+      - uses: actions/checkout@v2
+        name: Check out repository
+      - uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: latest
+      - run: |
+          bun i && bun run submodule-reload
+          npx expo prebuild
+      - uses: sparkfabrik/ios-build-action@v2.3.0
+        with:
+          upload-to-testflight: false
+          increment-build-number: false
+          build-pods: true
+          pods-path: "ios/Podfile"
+          configuration: Release
+          # Change later to app-store if wanted
+          export-method: appstore
+          #export-method: ad-hoc
+          workspace-path: "ios/Streamyfin.xcodeproj/project.xcworkspace/"
+          project-path: "ios/Streamyfin.xcodeproj"
+          scheme: Streamyfin
+          apple-key-id: ${{ secrets.APPLE_KEY_ID }}
+          apple-key-issuer-id: ${{ secrets.APPLE_KEY_ISSUER_ID }}
+          apple-key-content: ${{ secrets.APPLE_KEY_CONTENT }}
+          team-id: ${{ secrets.TEAM_ID }}
+          team-name: ${{ secrets.TEAM_NAME }}
+          #match-password: ${{ secrets.MATCH_PASSWORD }}
+          #match-git-url: ${{ secrets.MATCH_GIT_URL }}
+          #match-git-basic-authorization: ${{ secrets.MATCH_GIT_BASIC_AUTHORIZATION }}
+          #match-build-type: "appstore"
+          #browserstack-upload: true
+          #browserstack-username: ${{ secrets.BROWSERSTACK_USERNAME }}
+          #browserstack-access-key: ${{ secrets.BROWSERSTACK_ACCESS_KEY }}
+          #fastlane-env: stage
+          ios-app-id: com.stetsed.teststreamyfin
+          output-path: build-${{ github.sha }}.ipa

.github/workflows/notification.yaml

@@ -0,0 +1,18 @@
+name: Discord Pull Request Notification
+
+on:
+  pull_request:
+    types: [opened, reopened]
+
+jobs:
+  notify:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: joelwmale/webhook-action@master
+        with:
+          url: ${{ secrets.DISCORD_WEBHOOK_URL }}
+          body: |
+            {
+              "content": "New Pull Request: ${{ github.event.pull_request.title }}\nBy: ${{ github.event.pull_request.user.login }}\n\n${{ github.event.pull_request.html_url }}",
+              "avatar_url": "https://avatars.githubusercontent.com/u/193271640"
+            }

README.md

@@ -8,12 +8,12 @@ Welcome to Streamyfin, a simple and user-friendly Jellyfin client built with Exp
   <img width=150 src="./assets/images/screenshots/screenshot1.png" />
   <img width=150 src="./assets/images/screenshots/screenshot3.png" />
   <img width=150 src="./assets/images/screenshots/screenshot2.png" />
-  
+  <img width=150 src="./assets/images/jellyseerr.PNG"/>
 </div>
 
 ## 🌟 Features
 
-- 🚀 **Skp intro / credits support**
+- 🚀 **Skip Intro / Credits Support**
 - 🖼️ **Trickplay images**: The new golden standard for chapter previews when seeking.
 - 🔊 **Background audio**: Stream music in the background, even when locking the phone.
 - 📥 **Download media** (Experimental): Save your media locally and watch it offline.
@@ -66,7 +66,7 @@ Check out our [Roadmap](https://github.com/users/fredrikburmester/projects/5) to
   <a href="https://play.google.com/store/apps/details?id=com.fredrikburmester.streamyfin"><img height=50 alt="Get the beta on Google Play" src="./assets/Google_Play_Store_badge_EN.svg"/></a>
 </div>
 
-Or download the APKs [here on GitHub](https://github.com/fredrikburmester/streamyfin/releases) for Android.
+Or download the APKs [here on GitHub](https://github.com/streamyfin/streamyfin/releases) for Android.
 
 ### Beta testing
 
@@ -108,7 +108,7 @@ Key points of the MPL-2.0:
 
 ## 🌐 Connect with Us
 
-Join our Discord: [https://discord.gg/BuGG9ZNhaE](https://discord.gg/BuGG9ZNhaE)
+Join our Discord: [https://discord.gg/aJvAYeycyY](https://discord.gg/aJvAYeycyY)
 
 If you have questions or need support, feel free to reach out:
 
@@ -117,7 +117,7 @@ If you have questions or need support, feel free to reach out:
 
 ## 📝 Credits
 
-Streamyfin is developed by Fredrik Burmester and is not affiliated with Jellyfin. The app is built with Expo, React Native, and other open-source libraries.
+Streamyfin is developed by [Fredrik Burmester](https://github.com/fredrikburmester) and is not affiliated with Jellyfin. The app is built with Expo, React Native, and other open-source libraries.
 
 ## ✨ Acknowledgements
 
@@ -130,4 +130,4 @@ I'd like to thank the following people and projects for their contributions to S
 
 ## Star History
 
-[![Star History Chart](https://api.star-history.com/svg?repos=fredrikburmester/streamyfin&type=Date)](https://star-history.com/#fredrikburmester/streamyfin&Date)
+[![Star History Chart](https://api.star-history.com/svg?repos=streamyfin/streamyfin&type=Date)](https://star-history.com/#streamyfin/streamyfin&Date)

app.json

@@ -2,7 +2,7 @@
   "expo": {
     "name": "Streamyfin",
     "slug": "streamyfin",
-    "version": "0.23.0",
+    "version": "0.24.0",
     "orientation": "default",
     "icon": "./assets/images/icon.png",
     "scheme": "streamyfin",
@@ -36,22 +36,38 @@
     },
     "android": {
       "jsEngine": "hermes",
-      "versionCode": 49,
+      "versionCode": 50,
       "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,13 @@
         }
       ],
       "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"],
+      ["./plugins/withGoogleCastActivity.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,75 @@
+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/list/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)/(favorites)/_layout.tsx

@@ -0,0 +1,27 @@
+import { nestedTabPageScreenOptions } from "@/components/stacks/NestedTabPageStack";
+import { Stack } from "expo-router";
+import { Platform } from "react-native";
+
+export default function SearchLayout() {
+  return (
+    <Stack>
+      <Stack.Screen
+        name="index"
+        options={{
+          headerShown: true,
+          headerLargeTitle: true,
+          headerTitle: "Favorites",
+          headerLargeStyle: {
+            backgroundColor: "black",
+          },
+          headerBlurEffect: "prominent",
+          headerTransparent: Platform.OS === "ios" ? true : false,
+          headerShadowVisible: false,
+        }}
+      />
+      {Object.entries(nestedTabPageScreenOptions).map(([name, options]) => (
+        <Stack.Screen key={name} name={name} options={options} />
+      ))}
+    </Stack>
+  );
+}

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

@@ -0,0 +1,36 @@
+import { Favorites } from "@/components/home/Favorites";
+import { useInvalidatePlaybackProgressCache } from "@/hooks/useRevalidatePlaybackProgressCache";
+import React, { useCallback, useState } from "react";
+import { RefreshControl, ScrollView, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+export default function favorites() {
+  const invalidateCache = useInvalidatePlaybackProgressCache();
+
+  const [loading, setLoading] = useState(false);
+  const refetch = useCallback(async () => {
+    setLoading(true);
+    await invalidateCache();
+    setLoading(false);
+  }, []);
+  const insets = useSafeAreaInsets();
+
+  return (
+    <ScrollView
+      nestedScrollEnabled
+      contentInsetAdjustmentBehavior="automatic"
+      refreshControl={
+        <RefreshControl refreshing={loading} onRefresh={refetch} />
+      }
+      contentContainerStyle={{
+        paddingLeft: insets.left,
+        paddingRight: insets.right,
+        paddingBottom: 16,
+      }}
+    >
+      <View className="my-4">
+        <Favorites />
+      </View>
+    </ScrollView>
+  );
+}

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

@@ -1,3 +1,5 @@
+import { Chromecast } from "@/components/Chromecast";
+import { Text } from "@/components/common/Text";
 import { nestedTabPageScreenOptions } from "@/components/stacks/NestedTabPageStack";
 import { Feather } from "@expo/vector-icons";
 import { Stack, useRouter } from "expo-router";
@@ -14,10 +16,14 @@ export default function IndexLayout() {
           headerLargeTitle: true,
           headerTitle: "Home",
           headerBlurEffect: "prominent",
+          headerLargeStyle: {
+            backgroundColor: "black",
+          },
           headerTransparent: Platform.OS === "ios" ? true : false,
           headerShadowVisible: false,
           headerRight: () => (
             <View className="flex flex-row items-center space-x-2">
+              <Chromecast />
               <TouchableOpacity
                 onPress={() => {
                   router.push("/(auth)/settings");
@@ -29,12 +35,62 @@ 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={{
           title: "Settings",
         }}
       />
+      <Stack.Screen
+        name="settings/optimized-server/page"
+        options={{
+          title: "",
+        }}
+      />
+      <Stack.Screen
+        name="settings/marlin-search/page"
+        options={{
+          title: "",
+        }}
+      />
+      <Stack.Screen
+        name="settings/jellyseerr/page"
+        options={{
+          title: "",
+        }}
+      />
+      <Stack.Screen
+        name="settings/popular-lists/page"
+        options={{
+          title: "",
+        }}
+      />
+      <Stack.Screen
+        name="settings/hide-libraries/page"
+        options={{
+          title: "",
+        }}
+      />
+      <Stack.Screen
+        name="intro/page"
+        options={{
+          headerShown: false,
+          title: "",
+          presentation: "modal",
+        }}
+      />
       {Object.entries(nestedTabPageScreenOptions).map(([name, options]) => (
         <Stack.Screen key={name} name={name} options={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,250 @@
+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 active 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";
@@ -22,7 +23,7 @@ import {
   getUserViewsApi,
 } from "@jellyfin/sdk/lib/utils/api";
 import NetInfo from "@react-native-community/netinfo";
-import { QueryFunction, useQuery, useQueryClient } from "@tanstack/react-query";
+import { QueryFunction, useQuery } from "@tanstack/react-query";
 import { useNavigation, useRouter } from "expo-router";
 import { useAtomValue } from "jotai";
 import { useCallback, useEffect, useMemo, useState } from "react";
@@ -63,10 +64,31 @@ export default function index() {
   const [isConnected, setIsConnected] = useState<boolean | null>(null);
   const [loadingRetry, setLoadingRetry] = useState(false);
 
+  const { downloadedFiles, cleanCacheDirectory } = 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();
@@ -85,13 +107,16 @@ export default function index() {
       setIsConnected(state.isConnected);
     });
 
+    cleanCacheDirectory().catch((e) =>
+      console.error("Something went wrong cleaning cache directory")
+    );
     return () => {
       unsubscribe();
     };
   }, []);
 
   const {
-    data: userViews,
+    data,
     isError: e1,
     isLoading: l1,
   } = useQuery({
@@ -111,6 +136,11 @@ export default function index() {
     staleTime: 60 * 1000,
   });
 
+  const userViews = useMemo(
+    () => data?.filter((l) => !settings?.hiddenLibraries?.includes(l.Id!)),
+    [data, settings?.hiddenLibraries]
+  );
+
   const {
     data: mediaListCollections,
     isError: e2,
@@ -283,6 +313,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)/intro/page.tsx

@@ -0,0 +1,109 @@
+import { Button } from "@/components/Button";
+import { Text } from "@/components/common/Text";
+import { storage } from "@/utils/mmkv";
+import { Feather, Ionicons } from "@expo/vector-icons";
+import { Image } from "expo-image";
+import { useFocusEffect, useRouter } from "expo-router";
+import { useCallback } from "react";
+import { TouchableOpacity, View } from "react-native";
+
+export default function page() {
+  const router = useRouter();
+
+  useFocusEffect(
+    useCallback(() => {
+      storage.set("hasShownIntro", true);
+    }, [])
+  );
+
+  return (
+    <View className="bg-neutral-900 h-full py-32 px-4 space-y-4">
+      <View>
+        <Text className="text-3xl font-bold text-center mb-2">
+          Welcome to Streamyfin
+        </Text>
+        <Text className="text-center">
+          A free and open source client for Jellyfin.
+        </Text>
+      </View>
+
+      <View>
+        <Text className="text-lg font-bold">Features</Text>
+        <Text className="text-xs">
+          Streamyfin has a bunch of features and integrates with a wide array of
+          software which you can find in the settings menu, these include:
+        </Text>
+        <View className="flex flex-row items-center mt-4">
+          <Image
+            source={require("@/assets/icons/jellyseerr-logo.svg")}
+            style={{
+              width: 50,
+              height: 50,
+            }}
+          />
+          <View className="shrink ml-2">
+            <Text className="font-bold mb-1">Jellyseerr</Text>
+            <Text className="shrink text-xs">
+              Connect to your Jellyseerr instance and request movies directly in
+              the app.
+            </Text>
+          </View>
+        </View>
+        <View className="flex flex-row items-center mt-4">
+          <View
+            style={{
+              width: 50,
+              height: 50,
+            }}
+            className="flex items-center justify-center"
+          >
+            <Ionicons name="cloud-download-outline" size={32} color="white" />
+          </View>
+          <View className="shrink ml-2">
+            <Text className="font-bold mb-1">Downloads</Text>
+            <Text className="shrink text-xs">
+              Download movies and tv-shows to view offline. Use either the
+              default method or install the optimize server to download files in
+              the background.
+            </Text>
+          </View>
+        </View>
+        <View className="flex flex-row items-center mt-4">
+          <View
+            style={{
+              width: 50,
+              height: 50,
+            }}
+            className="flex items-center justify-center"
+          >
+            <Feather name="cast" size={28} color={"white"} />
+          </View>
+          <View className="shrink ml-2">
+            <Text className="font-bold mb-1">Chromecast</Text>
+            <Text className="shrink text-xs">
+              Cast movies and tv-shows to your Chromecast devices.
+            </Text>
+          </View>
+        </View>
+      </View>
+
+      <Button
+        onPress={() => {
+          router.back();
+        }}
+        className="mt-4"
+      >
+        Done
+      </Button>
+      <TouchableOpacity
+        onPress={() => {
+          router.back();
+          router.push("/settings");
+        }}
+        className="mt-4"
+      >
+        <Text className="text-purple-600 text-center">Go to settings</Text>
+      </TouchableOpacity>
+    </View>
+  );
+}

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

@@ -1,106 +1,105 @@
-import { Button } from "@/components/Button";
 import { Text } from "@/components/common/Text";
-import { ListItem } from "@/components/ListItem";
+import { ListGroup } from "@/components/list/ListGroup";
-import { SettingToggles } from "@/components/settings/SettingToggles";
+import { ListItem } from "@/components/list/ListItem";
-import { apiAtom, useJellyfin, userAtom } from "@/providers/JellyfinProvider";
+import { AudioToggles } from "@/components/settings/AudioToggles";
-import { clearLogs, useLog } from "@/utils/log";
+import { DownloadSettings } from "@/components/settings/DownloadSettings";
-import { getQuickConnectApi } from "@jellyfin/sdk/lib/utils/api";
+import { MediaProvider } from "@/components/settings/MediaContext";
-import { useQuery } from "@tanstack/react-query";
+import { MediaToggles } from "@/components/settings/MediaToggles";
-import * as FileSystem from "expo-file-system";
+import { OtherSettings } from "@/components/settings/OtherSettings";
-import { useAtom } from "jotai";
+import { PluginSettings } from "@/components/settings/PluginSettings";
-import { Alert, ScrollView, View } from "react-native";
+import { QuickConnect } from "@/components/settings/QuickConnect";
-import * as Progress from "react-native-progress";
+import { StorageSettings } from "@/components/settings/StorageSettings";
+import { SubtitleToggles } from "@/components/settings/SubtitleToggles";
+import { UserInfo } from "@/components/settings/UserInfo";
+import { useJellyfin } from "@/providers/JellyfinProvider";
+import { clearLogs } from "@/utils/log";
+import { useHaptic } from "@/hooks/useHaptic";
+import { useNavigation, useRouter } from "expo-router";
+import { useEffect } from "react";
+import { ScrollView, TouchableOpacity, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { toast } from "sonner-native";
+import { storage } from "@/utils/mmkv";
 
 export default function settings() {
-  const { logout } = useJellyfin();
+  const router = useRouter();
-  const { logs } = useLog();
-
-  const [api] = useAtom(apiAtom);
-  const [user] = useAtom(userAtom);
-
   const insets = useSafeAreaInsets();
+  const { logout } = useJellyfin();
+  const successHapticFeedback = useHaptic("success");
 
-  const openQuickConnectAuthCodeInput = () => {
+  const onClearLogsClicked = async () => {
-    Alert.prompt(
+    clearLogs();
-      "Quick connect",
+    successHapticFeedback();
-      "Enter the quick connect code",
-      async (text) => {
-        if (text) {
-          try {
-            const res = await getQuickConnectApi(api!).authorizeQuickConnect({
-              code: text,
-              userId: user?.Id,
-            });
-            if (res.status === 200) {
-              Alert.alert("Success", "Quick connect authorized");
-            } else {
-              Alert.alert("Error", "Invalid code");
-            }
-          } catch (e) {
-            Alert.alert("Error", "Invalid code");
-          }
-        }
-      }
-    );
   };
 
+  const navigation = useNavigation();
+  useEffect(() => {
+    navigation.setOptions({
+      headerRight: () => (
+        <TouchableOpacity
+          onPress={() => {
+            logout();
+          }}
+        >
+          <Text className="text-red-600">Log out</Text>
+        </TouchableOpacity>
+      ),
+    });
+  }, []);
+
   return (
     <ScrollView
       contentContainerStyle={{
         paddingLeft: insets.left,
         paddingRight: insets.right,
-        paddingBottom: 100,
       }}
     >
       <View className="p-4 flex flex-col gap-y-4">
-        <View>
+        <UserInfo />
-          <Text className="font-bold text-lg mb-2">User Info</Text>
+        <QuickConnect className="mb-4" />
 
-          <View className="flex flex-col rounded-xl overflow-hidden border-neutral-800 divide-y-2 divide-solid divide-neutral-800 ">
+        <MediaProvider>
-            <ListItem title="User" subTitle={user?.Name} />
+          <MediaToggles className="mb-4" />
-            <ListItem title="Server" subTitle={api?.basePath} />
+          <AudioToggles className="mb-4" />
-            <ListItem title="Token" subTitle={api?.accessToken} />
+          <SubtitleToggles className="mb-4" />
-          </View>
+        </MediaProvider>
-          <Button className="my-2.5" color="black" onPress={logout}>
+
-            Log out
+        <OtherSettings />
-          </Button>
+        <DownloadSettings />
+
+        <PluginSettings />
+
+        <ListGroup title={"Intro"}>
+          <ListItem
+            onPress={() => {
+              router.push("/intro/page");
+            }}
+            title={"Show intro"}
+          />
+          <ListItem
+            textColor="red"
+            onPress={() => {
+              storage.set("hasShownIntro", false);
+            }}
+            title={"Reset intro"}
+          />
+        </ListGroup>
+
+        <View className="mb-4">
+          <ListGroup title={"Logs"}>
+            <ListItem
+              onPress={() => router.push("/settings/logs/page")}
+              showArrow
+              title={"Logs"}
+            />
+            <ListItem
+              textColor="red"
+              onPress={onClearLogsClicked}
+              title={"Delete All Logs"}
+            />
+          </ListGroup>
         </View>
 
-        <View>
+        <StorageSettings />
-          <Text className="font-bold text-lg mb-2">Quick connect</Text>
-          <Button onPress={openQuickConnectAuthCodeInput} color="black">
-            Authorize
-          </Button>
-        </View>
-
-        <SettingToggles />
-
-        <View>
-          <Text className="font-bold text-lg mb-2">Logs</Text>
-          <View className="flex flex-col space-y-2">
-            {logs?.map((log, index) => (
-              <View key={index} className="bg-neutral-900 rounded-xl p-3">
-                <Text
-                  className={`
-                  mb-1
-              ${log.level === "INFO" && "text-blue-500"}
-              ${log.level === "ERROR" && "text-red-500"}
-                `}
-                >
-                  {log.level}
-                </Text>
-                <Text uiTextView selectable className="text-xs">
-                  {log.message}
-                </Text>
-              </View>
-            ))}
-            {logs?.length === 0 && (
-              <Text className="opacity-50">No logs available</Text>
-            )}
-          </View>
-        </View>
       </View>
     </ScrollView>
   );

app/(auth)/(tabs)/(home)/settings/hide-libraries/page.tsx

@@ -0,0 +1,61 @@
+import { Text } from "@/components/common/Text";
+import { ListGroup } from "@/components/list/ListGroup";
+import { ListItem } from "@/components/list/ListItem";
+import { Loader } from "@/components/Loader";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { useSettings } from "@/utils/atoms/settings";
+import { getUserViewsApi } from "@jellyfin/sdk/lib/utils/api";
+import { useQuery } from "@tanstack/react-query";
+import { useAtomValue } from "jotai";
+import { Switch, View } from "react-native";
+
+export default function page() {
+  const [settings, updateSettings] = useSettings();
+  const user = useAtomValue(userAtom);
+  const api = useAtomValue(apiAtom);
+
+  const { data, isLoading: isLoading } = useQuery({
+    queryKey: ["user-views", user?.Id],
+    queryFn: async () => {
+      const response = await getUserViewsApi(api!).getUserViews({
+        userId: user?.Id,
+      });
+
+      return response.data.Items || null;
+    },
+  });
+
+  if (!settings) return null;
+
+  if (isLoading)
+    return (
+      <View className="mt-4">
+        <Loader />
+      </View>
+    );
+
+  return (
+    <View className="px-4">
+      <ListGroup>
+        {data?.map((view) => (
+          <ListItem key={view.Id} title={view.Name} onPress={() => {}}>
+            <Switch
+              value={settings.hiddenLibraries?.includes(view.Id!) || false}
+              onValueChange={(value) => {
+                updateSettings({
+                  hiddenLibraries: value
+                    ? [...(settings.hiddenLibraries || []), view.Id!]
+                    : settings.hiddenLibraries?.filter((id) => id !== view.Id),
+                });
+              }}
+            />
+          </ListItem>
+        ))}
+      </ListGroup>
+      <Text className="px-4 text-xs text-neutral-500 mt-1">
+        Select the libraries you want to hide from the Library tab and home page
+        sections.
+      </Text>
+    </View>
+  );
+}

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

@@ -0,0 +1,78 @@
+import { Text } from "@/components/common/Text";
+import { JellyseerrSettings } from "@/components/settings/Jellyseerr";
+import { OptimizedServerForm } from "@/components/settings/OptimizedServerForm";
+import { apiAtom } from "@/providers/JellyfinProvider";
+import { useSettings } from "@/utils/atoms/settings";
+import { getOrSetDeviceId } from "@/utils/device";
+import { getStatistics } from "@/utils/optimize-server";
+import { useMutation } from "@tanstack/react-query";
+import { useNavigation } from "expo-router";
+import { useAtom } from "jotai";
+import { useEffect, useState } from "react";
+import { ActivityIndicator, TouchableOpacity, View } from "react-native";
+import { toast } from "sonner-native";
+
+export default function page() {
+  const navigation = useNavigation();
+
+  const [api] = useAtom(apiAtom);
+  const [settings, updateSettings] = useSettings();
+
+  const [optimizedVersionsServerUrl, setOptimizedVersionsServerUrl] =
+    useState<string>(settings?.optimizedVersionsServerUrl || "");
+
+  const saveMutation = useMutation({
+    mutationFn: async (newVal: string) => {
+      if (newVal.length === 0 || !newVal.startsWith("http")) {
+        toast.error("Invalid URL");
+        return;
+      }
+
+      const updatedUrl = newVal.endsWith("/") ? newVal : newVal + "/";
+
+      updateSettings({
+        optimizedVersionsServerUrl: updatedUrl,
+      });
+
+      return await getStatistics({
+        url: settings?.optimizedVersionsServerUrl,
+        authHeader: api?.accessToken,
+        deviceId: getOrSetDeviceId(),
+      });
+    },
+    onSuccess: (data) => {
+      if (data) {
+        toast.success("Connected");
+      } else {
+        toast.error("Could not connect");
+      }
+    },
+    onError: () => {
+      toast.error("Could not connect");
+    },
+  });
+
+  const onSave = (newVal: string) => {
+    saveMutation.mutate(newVal);
+  };
+
+  // useEffect(() => {
+  //   navigation.setOptions({
+  //     title: "Optimized Server",
+  //     headerRight: () =>
+  //       saveMutation.isPending ? (
+  //         <ActivityIndicator size={"small"} color={"white"} />
+  //       ) : (
+  //         <TouchableOpacity onPress={() => onSave(optimizedVersionsServerUrl)}>
+  //           <Text className="text-blue-500">Save</Text>
+  //         </TouchableOpacity>
+  //       ),
+  //   });
+  // }, [navigation, optimizedVersionsServerUrl, saveMutation.isPending]);
+
+  return (
+    <View className="p-4">
+      <JellyseerrSettings />
+    </View>
+  );
+}

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

@@ -0,0 +1,33 @@
+import { Text } from "@/components/common/Text";
+import { useLog } from "@/utils/log";
+import { ScrollView, View } from "react-native";
+
+export default function page() {
+  const { logs } = useLog();
+
+  return (
+    <ScrollView className="p-4">
+      <View className="flex flex-col space-y-2">
+        {logs?.map((log, index) => (
+          <View key={index} className="bg-neutral-900 rounded-xl p-3">
+            <Text
+              className={`
+                  mb-1
+              ${log.level === "INFO" && "text-blue-500"}
+              ${log.level === "ERROR" && "text-red-500"}
+                `}
+            >
+              {log.level}
+            </Text>
+            <Text uiTextView selectable className="text-xs">
+              {log.message}
+            </Text>
+          </View>
+        ))}
+        {logs?.length === 0 && (
+          <Text className="opacity-50">No logs available</Text>
+        )}
+      </View>
+    </ScrollView>
+  );
+}

app/(auth)/(tabs)/(home)/settings/marlin-search/page.tsx

@@ -0,0 +1,103 @@
+import { Text } from "@/components/common/Text";
+import { ListGroup } from "@/components/list/ListGroup";
+import { ListItem } from "@/components/list/ListItem";
+import { apiAtom } from "@/providers/JellyfinProvider";
+import { useSettings } from "@/utils/atoms/settings";
+import { useQueryClient } from "@tanstack/react-query";
+import { useNavigation } from "expo-router";
+import { useAtom } from "jotai";
+import { useEffect, useState } from "react";
+import {
+  Linking,
+  Switch,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import { toast } from "sonner-native";
+
+export default function page() {
+  const navigation = useNavigation();
+
+  const [settings, updateSettings] = useSettings();
+  const queryClient = useQueryClient();
+
+  const [value, setValue] = useState<string>(settings?.marlinServerUrl || "");
+
+  const onSave = (val: string) => {
+    updateSettings({
+      marlinServerUrl: !val.endsWith("/") ? val : val.slice(0, -1),
+    });
+    toast.success("Saved");
+  };
+
+  const handleOpenLink = () => {
+    Linking.openURL("https://github.com/fredrikburmester/marlin-search");
+  };
+
+  useEffect(() => {
+    navigation.setOptions({
+      headerRight: () => (
+        <TouchableOpacity onPress={() => onSave(value)}>
+          <Text className="text-blue-500">Save</Text>
+        </TouchableOpacity>
+      ),
+    });
+  }, [navigation, value]);
+
+  if (!settings) return null;
+
+  return (
+    <View className="px-4">
+      <ListGroup>
+        <ListItem
+          title={"Enable Marlin Search"}
+          onPress={() => {
+            updateSettings({ searchEngine: "Jellyfin" });
+            queryClient.invalidateQueries({ queryKey: ["search"] });
+          }}
+        >
+          <Switch
+            value={settings.searchEngine === "Marlin"}
+            onValueChange={(value) => {
+              updateSettings({ searchEngine: value ? "Marlin" : "Jellyfin" });
+              queryClient.invalidateQueries({ queryKey: ["search"] });
+            }}
+          />
+        </ListItem>
+      </ListGroup>
+
+      <View
+        className={`mt-2 ${
+          settings.searchEngine === "Marlin" ? "" : "opacity-50"
+        }`}
+      >
+        <View className="flex flex-col rounded-xl overflow-hidden pl-4 bg-neutral-900 px-4">
+          <View
+            className={`flex flex-row items-center bg-neutral-900 h-11 pr-4`}
+          >
+            <Text className="mr-4">URL</Text>
+            <TextInput
+              editable={settings.searchEngine === "Marlin"}
+              className="text-white"
+              placeholder="http(s)://domain.org:port"
+              value={value}
+              keyboardType="url"
+              returnKeyType="done"
+              autoCapitalize="none"
+              textContentType="URL"
+              onChangeText={(text) => setValue(text)}
+            />
+          </View>
+        </View>
+        <Text className="px-4 text-xs text-neutral-500 mt-1">
+          Enter the URL for the Marlin server. The URL should include http or
+          https and optionally the port.{" "}
+          <Text className="text-blue-500" onPress={handleOpenLink}>
+            Read more about Marlin.
+          </Text>
+        </Text>
+      </View>
+    </View>
+  );
+}

app/(auth)/(tabs)/(home)/settings/optimized-server/page.tsx

@@ -0,0 +1,80 @@
+import { Text } from "@/components/common/Text";
+import { OptimizedServerForm } from "@/components/settings/OptimizedServerForm";
+import { apiAtom } from "@/providers/JellyfinProvider";
+import { useSettings } from "@/utils/atoms/settings";
+import { getOrSetDeviceId } from "@/utils/device";
+import { getStatistics } from "@/utils/optimize-server";
+import { useMutation } from "@tanstack/react-query";
+import { useNavigation } from "expo-router";
+import { useAtom } from "jotai";
+import { useEffect, useState } from "react";
+import { ActivityIndicator, TouchableOpacity, View } from "react-native";
+import { toast } from "sonner-native";
+
+export default function page() {
+  const navigation = useNavigation();
+
+  const [api] = useAtom(apiAtom);
+  const [settings, updateSettings] = useSettings();
+
+  const [optimizedVersionsServerUrl, setOptimizedVersionsServerUrl] =
+    useState<string>(settings?.optimizedVersionsServerUrl || "");
+
+  const saveMutation = useMutation({
+    mutationFn: async (newVal: string) => {
+      if (newVal.length === 0 || !newVal.startsWith("http")) {
+        toast.error("Invalid URL");
+        return;
+      }
+
+      const updatedUrl = newVal.endsWith("/") ? newVal : newVal + "/";
+
+      updateSettings({
+        optimizedVersionsServerUrl: updatedUrl,
+      });
+
+      return await getStatistics({
+        url: settings?.optimizedVersionsServerUrl,
+        authHeader: api?.accessToken,
+        deviceId: getOrSetDeviceId(),
+      });
+    },
+    onSuccess: (data) => {
+      if (data) {
+        toast.success("Connected");
+      } else {
+        toast.error("Could not connect");
+      }
+    },
+    onError: () => {
+      toast.error("Could not connect");
+    },
+  });
+
+  const onSave = (newVal: string) => {
+    saveMutation.mutate(newVal);
+  };
+
+  useEffect(() => {
+    navigation.setOptions({
+      title: "Optimized Server",
+      headerRight: () =>
+        saveMutation.isPending ? (
+          <ActivityIndicator size={"small"} color={"white"} />
+        ) : (
+          <TouchableOpacity onPress={() => onSave(optimizedVersionsServerUrl)}>
+            <Text className="text-blue-500">Save</Text>
+          </TouchableOpacity>
+        ),
+    });
+  }, [navigation, optimizedVersionsServerUrl, saveMutation.isPending]);
+
+  return (
+    <View className="p-4">
+      <OptimizedServerForm
+        value={optimizedVersionsServerUrl}
+        onChangeValue={setOptimizedVersionsServerUrl}
+      />
+    </View>
+  );
+}

app/(auth)/(tabs)/(home)/settings/popular-lists/page.tsx

@@ -0,0 +1,135 @@
+import { Text } from "@/components/common/Text";
+import { ListGroup } from "@/components/list/ListGroup";
+import { ListItem } from "@/components/list/ListItem";
+import { Loader } from "@/components/Loader";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { useSettings } from "@/utils/atoms/settings";
+import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useNavigation } from "expo-router";
+import { useAtom } from "jotai";
+import { Linking, Switch, View } from "react-native";
+
+export default function page() {
+  const navigation = useNavigation();
+
+  const [api] = useAtom(apiAtom);
+  const [user] = useAtom(userAtom);
+
+  const [settings, updateSettings] = useSettings();
+
+  const handleOpenLink = () => {
+    Linking.openURL(
+      "https://github.com/lostb1t/jellyfin-plugin-collection-import"
+    );
+  };
+
+  const queryClient = useQueryClient();
+
+  const {
+    data: mediaListCollections,
+    isLoading: isLoadingMediaListCollections,
+  } = useQuery({
+    queryKey: ["sf_promoted", user?.Id, settings?.usePopularPlugin],
+    queryFn: async () => {
+      if (!api || !user?.Id) return [];
+
+      const response = await getItemsApi(api).getItems({
+        userId: user.Id,
+        tags: ["sf_promoted"],
+        recursive: true,
+        fields: ["Tags"],
+        includeItemTypes: ["BoxSet"],
+      });
+
+      return response.data.Items ?? [];
+    },
+    enabled: !!api && !!user?.Id && settings?.usePopularPlugin === true,
+    staleTime: 0,
+  });
+
+  if (!settings) return null;
+
+  return (
+    <View className="px-4 pt-4">
+      <ListGroup title={"Enable plugin"} className="">
+        <ListItem
+          title={"Enable Popular Lists"}
+          onPress={() => {
+            updateSettings({ usePopularPlugin: true });
+            queryClient.invalidateQueries({ queryKey: ["search"] });
+          }}
+        >
+          <Switch
+            value={settings.usePopularPlugin}
+            onValueChange={(value) => {
+              updateSettings({ usePopularPlugin: value });
+            }}
+          />
+        </ListItem>
+      </ListGroup>
+      <Text className="px-4 text-xs text-neutral-500 mt-1">
+        Popular Lists is a plugin that enables you to show custom Jellyfin lists
+        on the Streamyfin home page.{" "}
+        <Text className="text-blue-500" onPress={handleOpenLink}>
+          Read more about Popular Lists.
+        </Text>
+      </Text>
+
+      {settings.usePopularPlugin && (
+        <>
+          {!isLoadingMediaListCollections ? (
+            <>
+              {mediaListCollections?.length === 0 ? (
+                <Text className="text-xs opacity-50 p-4">
+                  No collections found. Add some in Jellyfin.
+                </Text>
+              ) : (
+                <>
+                  <ListGroup title="Media List Collections" className="mt-4">
+                    {mediaListCollections?.map((mlc) => (
+                      <ListItem key={mlc.Id} title={mlc.Name}>
+                        <Switch
+                          value={settings.mediaListCollectionIds?.includes(
+                            mlc.Id!
+                          )}
+                          onValueChange={(value) => {
+                            if (!settings.mediaListCollectionIds) {
+                              updateSettings({
+                                mediaListCollectionIds: [mlc.Id!],
+                              });
+                              return;
+                            }
+
+                            updateSettings({
+                              mediaListCollectionIds:
+                                settings.mediaListCollectionIds.includes(
+                                  mlc.Id!
+                                )
+                                  ? settings.mediaListCollectionIds.filter(
+                                      (id) => id !== mlc.Id
+                                    )
+                                  : [
+                                      ...settings.mediaListCollectionIds,
+                                      mlc.Id!,
+                                    ],
+                            });
+                          }}
+                        />
+                      </ListItem>
+                    ))}
+                  </ListGroup>
+                  <Text className="px-4 text-xs text-neutral-500 mt-1">
+                    Select the lists you want displayed on the home screen.
+                  </Text>
+                </>
+              )}
+            </>
+          ) : (
+            <Loader />
+          )}
+        </>
+      )}
+    </View>
+  );
+}

app/(auth)/(tabs)/(home,libraries,search,favorites)/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,favorites)/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);
@@ -169,7 +174,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 +389,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,favorites)/jellyseerr/[personId].tsx

@@ -0,0 +1,247 @@
+import {
+  router,
+  useLocalSearchParams,
+  useNavigation,
+  useSegments,
+} from "expo-router";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { TouchableOpacity, View } from "react-native";
+import { useQuery } from "@tanstack/react-query";
+import { useJellyseerr } from "@/hooks/useJellyseerr";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { ParallaxScrollView } from "@/components/ParallaxPage";
+import { Text } from "@/components/common/Text";
+import { Animated } from "react-native";
+import { Image } from "expo-image";
+import { OverviewText } from "@/components/OverviewText";
+import { orderBy } from "lodash";
+import { FlashList } from "@shopify/flash-list";
+import { PersonCreditCast } from "@/utils/jellyseerr/server/models/Person";
+import Poster from "@/components/posters/Poster";
+import JellyseerrMediaIcon from "@/components/jellyseerr/JellyseerrMediaIcon";
+
+const ANIMATION_ENTER = 250;
+const ANIMATION_EXIT = 250;
+const BACKDROP_DURATION = 5000;
+
+export default function page() {
+  const insets = useSafeAreaInsets();
+  const local = useLocalSearchParams();
+  const segments = useSegments();
+  const { jellyseerrApi, jellyseerrUser } = useJellyseerr();
+
+  const { personId } = local as { personId: string };
+  const from = segments[2];
+
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const fadeAnim = useRef(new Animated.Value(0)).current;
+
+  const { data, isLoading, isFetching } = useQuery({
+    queryKey: ["jellyseerr", "person", personId],
+    queryFn: async () => ({
+      details: await jellyseerrApi?.personDetails(personId),
+      combinedCredits: await jellyseerrApi?.personCombinedCredits(personId),
+    }),
+    enabled: !!jellyseerrApi && !!personId,
+  });
+
+  const locale = useMemo(() => {
+    return jellyseerrUser?.settings?.locale || "en";
+  }, [jellyseerrUser]);
+
+  const region = useMemo(
+    () => jellyseerrUser?.settings?.region || "US",
+    [jellyseerrUser]
+  );
+
+  const castedRoles: PersonCreditCast[] = useMemo(
+    () =>
+      orderBy(
+        data?.combinedCredits?.cast,
+        ["voteCount", "voteAverage"],
+        "desc"
+      ),
+    [data?.combinedCredits]
+  );
+
+  const backdrops = useMemo(
+    () => castedRoles.map((c) => c.backdropPath),
+    [data?.combinedCredits]
+  );
+
+  const enterAnimation = useCallback(
+    () =>
+      Animated.timing(fadeAnim, {
+        toValue: 1,
+        duration: ANIMATION_ENTER,
+        useNativeDriver: true,
+      }),
+    [fadeAnim]
+  );
+
+  const exitAnimation = useCallback(
+    () =>
+      Animated.timing(fadeAnim, {
+        toValue: 0,
+        duration: ANIMATION_EXIT,
+        useNativeDriver: true,
+      }),
+    [fadeAnim]
+  );
+
+  useEffect(() => {
+    if (backdrops?.length) {
+      enterAnimation().start();
+      const intervalId = setInterval(() => {
+        exitAnimation().start((end) => {
+          if (end.finished)
+            setCurrentIndex((prevIndex) => (prevIndex + 1) % backdrops?.length);
+        });
+      }, BACKDROP_DURATION);
+
+      return () => clearInterval(intervalId);
+    }
+  }, [backdrops, enterAnimation, exitAnimation, setCurrentIndex, currentIndex]);
+
+  const viewDetails = (credit: PersonCreditCast) => {
+    router.push({
+      //@ts-ignore
+      pathname: `/(auth)/(tabs)/${from}/jellyseerr/page`,
+      //@ts-ignore
+      params: {
+        ...credit,
+        mediaTitle: credit.title,
+        releaseYear: new Date(credit.releaseDate).getFullYear(),
+        canRequest: "false",
+        posterSrc: jellyseerrApi?.imageProxy(
+          credit.posterPath,
+          "w300_and_h450_face"
+        ),
+      },
+    });
+  };
+
+  return (
+    <View
+      className="flex-1 relative"
+      style={{
+        paddingLeft: insets.left,
+        paddingRight: insets.right,
+      }}
+    >
+      <ParallaxScrollView
+        className="flex-1 opacity-100"
+        headerHeight={300}
+        headerImage={
+          <Animated.Image
+            source={{
+              uri: jellyseerrApi?.imageProxy(
+                backdrops?.[currentIndex],
+                "w1920_and_h800_multi_faces"
+              ),
+            }}
+            style={{
+              width: "100%",
+              height: "100%",
+              opacity: fadeAnim,
+            }}
+          />
+        }
+        logo={
+          <Image
+            key={data?.details?.id}
+            id={data?.details?.id.toString()}
+            className="rounded-full bottom-1"
+            source={{
+              uri: jellyseerrApi?.imageProxy(
+                data?.details?.profilePath,
+                "w600_and_h600_bestv2"
+              ),
+            }}
+            cachePolicy={"memory-disk"}
+            contentFit="cover"
+            style={{
+              width: 125,
+              height: 125,
+            }}
+          />
+        }
+      >
+        <View className="flex flex-col space-y-4 px-4">
+          <View className="flex flex-row justify-between w-full">
+            <View className="flex flex-col w-full">
+              <Text className="font-bold text-2xl mb-1">
+                {data?.details?.name}
+              </Text>
+              <Text className="opacity-50">
+                Born{" "}
+                {new Date(data?.details?.birthday!!).toLocaleDateString(
+                  `${locale}-${region}`,
+                  {
+                    year: "numeric",
+                    month: "long",
+                    day: "numeric",
+                  }
+                )}{" "}
+                | {data?.details?.placeOfBirth}
+              </Text>
+            </View>
+          </View>
+          <OverviewText text={data?.details?.biography} className="mt-4" />
+
+          <View>
+            <FlashList
+              data={castedRoles}
+              ListEmptyComponent={
+                <View className="flex flex-col items-center justify-center h-full">
+                  <Text className="font-bold text-xl text-neutral-500">
+                    No results
+                  </Text>
+                </View>
+              }
+              contentInsetAdjustmentBehavior="automatic"
+              ListHeaderComponent={
+                <Text className="text-lg font-bold my-2">Appearances</Text>
+              }
+              renderItem={({ item }) => (
+                <TouchableOpacity
+                  className="w-full flex flex-col pr-2"
+                  onPress={() => viewDetails(item)}
+                >
+                  <Poster
+                    id={item.id.toString()}
+                    url={jellyseerrApi?.imageProxy(item.posterPath)}
+                  />
+                  <JellyseerrMediaIcon
+                    className="absolute top-1 left-1"
+                    mediaType={item.mediaType as "movie" | "tv"}
+                  />
+                  {/*<Text numberOfLines={1}>{item.title}</Text>*/}
+                  {item.character && (
+                    <Text
+                      className="text-xs opacity-50 align-bottom mt-1"
+                      numberOfLines={1}
+                    >
+                      as {item.character}
+                    </Text>
+                  )}
+                </TouchableOpacity>
+              )}
+              keyExtractor={(item) => item.id.toString()}
+              estimatedItemSize={255}
+              numColumns={3}
+              contentContainerStyle={{ paddingBottom: 24 }}
+              ItemSeparatorComponent={() => <View className="h-2 w-2" />}
+            />
+          </View>
+        </View>
+      </ParallaxScrollView>
+    </View>
+  );
+}

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

@@ -1,61 +1,72 @@
-import { Button } from "@/components/Button";
+import React, {
-import { Input } from "@/components/common/Input";
+  useCallback,
-import { Text } from "@/components/common/Text";
+  useEffect,
-import { GenreTags } from "@/components/GenreTags";
+  useMemo,
-import { OverviewText } from "@/components/OverviewText";
+  useRef,
-import { ParallaxScrollView } from "@/components/ParallaxPage";
+  useState,
-import { JellyserrRatings } from "@/components/Ratings";
+} from "react";
-import JellyseerrSeasons from "@/components/series/JellyseerrSeasons";
+import { useLocalSearchParams, useNavigation } from "expo-router";
-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 { Text } from "@/components/common/Text";
+import { ParallaxScrollView } from "@/components/ParallaxPage";
+import { Image } from "expo-image";
+import { TouchableOpacity, View } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { OverviewText } from "@/components/OverviewText";
+import { GenreTags } from "@/components/GenreTags";
+import {
+  MediaRequestStatus,
+  MediaStatus,
+  MediaType,
+} from "@/utils/jellyseerr/server/constants/media";
+import { useQuery } from "@tanstack/react-query";
+import { useJellyseerr } from "@/hooks/useJellyseerr";
+import { Button } from "@/components/Button";
 import {
   BottomSheetBackdrop,
   BottomSheetBackdropProps,
   BottomSheetModal,
+  BottomSheetTextInput,
   BottomSheetView,
 } from "@gorhom/bottom-sheet";
-import { useQuery } from "@tanstack/react-query";
+import {
-import { Image } from "expo-image";
+  IssueType,
-import { useLocalSearchParams } from "expo-router";
+  IssueTypeName,
-import React, { useCallback, useRef, useState } from "react";
+} from "@/utils/jellyseerr/server/constants/issue";
-import { Modal, TouchableOpacity, View } from "react-native";
+import * as DropdownMenu from "zeego/dropdown-menu";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { TvDetails } from "@/utils/jellyseerr/server/models/Tv";
+import JellyseerrSeasons from "@/components/series/JellyseerrSeasons";
+import { JellyserrRatings } from "@/components/Ratings";
+import MediaRequest from "@/utils/jellyseerr/server/entity/MediaRequest";
+import DetailFacts from "@/components/jellyseerr/DetailFacts";
+import { ItemActions } from "@/components/series/SeriesActions";
+import Cast from "@/components/jellyseerr/Cast";
+import { useJellyseerrCanRequest } from "@/utils/_jellyseerr/useJellyseerrCanRequest";
 
 const Page: React.FC = () => {
   const insets = useSafeAreaInsets();
   const params = useLocalSearchParams();
-  const {
+  const { mediaTitle, releaseYear, posterSrc, ...result } =
-    mediaTitle,
+    params as unknown as {
-    releaseYear,
+      mediaTitle: string;
-    canRequest: canRequestString,
+      releaseYear: number;
-    posterSrc,
+      canRequest: string;
-    ...result
+      posterSrc: string;
-  } = params as unknown as {
+    } & Partial<MovieResult | TvResult>;
-    mediaTitle: string;
-    releaseYear: number;
-    canRequest: string;
-    posterSrc: string;
-  } & Partial<MovieResult | TvResult>;
 
-  const canRequest = canRequestString === "true";
+  const navigation = useNavigation();
   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,
+    refetch,
   } = useQuery({
     enabled: !!jellyseerrApi && !!result && !!result.id,
     queryKey: ["jellyseerr", "detail", result.mediaType, result.id],
@@ -64,6 +75,7 @@ const Page: React.FC = () => {
     refetchOnReconnect: true,
     refetchOnWindowFocus: true,
     retryOnMount: true,
+    refetchInterval: 0,
     queryFn: async () => {
       return result.mediaType === MediaType.MOVIE
         ? jellyseerrApi?.movieDetails(result.id!!)
@@ -71,6 +83,8 @@ const Page: React.FC = () => {
     },
   });
 
+  const canRequest = useJellyseerrCanRequest(details);
+
   const renderBackdrop = useCallback(
     (props: BottomSheetBackdropProps) => (
       <BottomSheetBackdrop
@@ -94,18 +108,32 @@ const Page: React.FC = () => {
     }
   }, [jellyseerrApi, details, result, issueType, issueMessage]);
 
-  const request = useCallback(
+  const request = useCallback(async () => {
-    () =>
+    requestMedia(
-      requestMedia(mediaTitle, {
+      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]
+      refetch
-  );
+    );
+  }, [details, result, requestMedia]);
+
+  useEffect(() => {
+    if (details) {
+      navigation.setOptions({
+        headerRight: () => (
+          <TouchableOpacity className="rounded-full p-2 bg-neutral-800/80">
+            <ItemActions item={details} />
+          </TouchableOpacity>
+        ),
+      });
+    }
+  }, [details]);
 
   return (
     <View
@@ -129,7 +157,10 @@ const Page: React.FC = () => {
                   height: "100%",
                 }}
                 source={{
-                  uri: `https://image.tmdb.org/t/p/w1920_and_h800_multi_faces/${result.backdropPath}`,
+                  uri: jellyseerrApi?.imageProxy(
+                    result.backdropPath,
+                    "w1920_and_h800_multi_faces"
+                  ),
                 }}
               />
             ) : (
@@ -178,7 +209,9 @@ const Page: React.FC = () => {
               <View className="mb-4">
                 <GenreTags genres={details?.genres?.map((g) => g.name) || []} />
               </View>
-              {canRequest ? (
+              {isLoading || isFetching ? (
+                <Button loading={true} disabled={true} color="purple"></Button>
+              ) : canRequest ? (
                 <Button color="purple" onPress={request}>
                   Request
                 </Button>
@@ -206,8 +239,14 @@ const Page: React.FC = () => {
                 isLoading={isLoading || isFetching}
                 result={result as TvResult}
                 details={details as TvDetails}
+                refetch={refetch}
               />
             )}
+            <DetailFacts
+              className="p-2 border border-neutral-800 bg-neutral-900 rounded-xl"
+              details={details}
+            />
+            <Cast details={details} />
           </View>
         </View>
       </ParallaxScrollView>
@@ -231,81 +270,63 @@ const Page: React.FC = () => {
             </View>
             <View className="flex flex-col space-y-2 items-start">
               <View className="flex flex-col">
-                <View className="flex flex-col">
+                <DropdownMenu.Root>
-                  <Text className="opacity-50 mb-1 text-xs">Issue Type</Text>
+                  <DropdownMenu.Trigger>
-                  <TouchableOpacity
+                    <View className="flex flex-col">
-                    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="opacity-50 mb-1 text-xs">
-                    onPress={() => setIsIssueTypeModalVisible(true)}
+                        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">
+                        <Text style={{}} className="" numberOfLines={1}>
+                          {issueType
+                            ? IssueTypeName[issueType]
+                            : "Select an issue"}
+                        </Text>
+                      </TouchableOpacity>
+                    </View>
+                  </DropdownMenu.Trigger>
+                  <DropdownMenu.Content
+                    loop={false}
+                    side="bottom"
+                    align="center"
+                    alignOffset={0}
+                    avoidCollisions={true}
+                    collisionPadding={0}
+                    sideOffset={0}
                   >
-                    <Text className="" numberOfLines={1}>
+                    <DropdownMenu.Label>Types</DropdownMenu.Label>
-                      {issueType ? IssueTypeName[issueType] : "Select an issue"}
+                    {Object.entries(IssueTypeName)
-                    </Text>
+                      .reverse()
-                    <Ionicons
+                      .map(([key, value], idx) => (
-                      name="chevron-down"
+                        <DropdownMenu.Item
-                      size={16}
+                          key={value}
-                      color="white"
+                          onSelect={() =>
-                      style={{ opacity: 0.5 }}
+                            setIssueType(key as unknown as IssueType)
-                    />
+                          }
-                  </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">
+                          <DropdownMenu.ItemTitle>
-                            Cancel
+                            {value}
-                          </Text>
+                          </DropdownMenu.ItemTitle>
-                        </TouchableOpacity>
+                        </DropdownMenu.Item>
-                      </View>
+                      ))}
-                    </TouchableOpacity>
+                  </DropdownMenu.Content>
-                  </Modal>
+                </DropdownMenu.Root>
-                </View>
               </View>
 
-              <Input
+              <View className="p-4 border border-neutral-800 rounded-xl bg-neutral-900 w-full">
-                className="w-full"
+                <BottomSheetTextInput
-                placeholder="(optional) Describe the issue..."
+                  multiline
-                value={issueMessage}
+                  maxLength={254}
-                keyboardType="default"
+                  style={{ color: "white" }}
-                returnKeyType="done"
+                  clearButtonMode="always"
-                autoCapitalize="none"
+                  placeholder="(optional) Describe the issue..."
-                textContentType="none"
+                  placeholderTextColor="#9CA3AF"
-                maxLength={254}
+                  // Issue with multiline + Textinput inside a portal
-                onChangeText={setIssueMessage}
+                  // https://github.com/callstack/react-native-paper/issues/1668
-              />
+                  defaultValue={issueMessage}
+                  onChangeText={setIssueMessage}
+                />
+              </View>
             </View>
             <Button className="mt-auto" onPress={submitIssue} color="purple">
               Submit

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

@@ -1,3 +1,5 @@
+import { AddToFavorites } from "@/components/AddToFavorites";
+import { DownloadItems } from "@/components/DownloadItem";
 import { ParallaxScrollView } from "@/components/ParallaxPage";
 import { NextUp } from "@/components/series/NextUp";
 import { SeasonPicker } from "@/components/series/SeasonPicker";
@@ -34,7 +36,6 @@ const page: React.FC = () => {
         userId: user?.Id,
         itemId: seriesId,
       }),
-    enabled: !!seriesId && !!api,
     staleTime: 60 * 1000,
   });
 
@@ -73,6 +74,35 @@ const page: React.FC = () => {
     enabled: !!api && !!user?.Id && !!item?.Id,
   });
 
+  useEffect(() => {
+    navigation.setOptions({
+      headerRight: () =>
+        !isLoading &&
+        item &&
+        allEpisodes &&
+        allEpisodes.length > 0 && (
+          <View className="flex flex-row items-center space-x-2">
+            <AddToFavorites item={item} type="series" />
+            <DownloadItems
+              size="large"
+              title="Download Series"
+              items={allEpisodes || []}
+              MissingDownloadIconComponent={() => (
+                <Ionicons name="download" size={22} color="white" />
+              )}
+              DownloadedIconComponent={() => (
+                <Ionicons
+                  name="checkmark-done-outline"
+                  size={24}
+                  color="#9333ea"
+                />
+              )}
+            />
+          </View>
+        ),
+    });
+  }, [allEpisodes, isLoading, item]);
+
   if (!item || !backdropUrl) return null;
 
   return (

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,
@@ -39,7 +41,6 @@ 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 Page = () => {
   const searchParams = useLocalSearchParams();
@@ -59,6 +60,8 @@ const Page = () => {
     sortOrderPreferenceAtom
   );
 
+  const { orientation } = useOrientation();
+
   useEffect(() => {
     const sop = getSortOrderPreference(libraryId, sortOrderPreference);
     if (sop) {
@@ -147,6 +150,8 @@ const Page = () => {
         itemType = "Series";
       } else if (library.CollectionType === "boxsets") {
         itemType = "BoxSet";
+      } else if (library.CollectionType === "music") {
+        itemType = "MusicAlbum";
       }
 
       const response = await getItemsApi(api).getItems({
@@ -237,7 +242,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 { Platform } from "react-native";
-import { Modal, Platform, TouchableOpacity, View } 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;
 
@@ -51,170 +19,169 @@ export default function IndexLayout() {
           headerLargeTitle: true,
           headerTitle: "Library",
           headerBlurEffect: "prominent",
+          headerLargeStyle: {
+            backgroundColor: "black",
+          },
           headerTransparent: Platform.OS === "ios" ? true : false,
           headerShadowVisible: false,
           headerRight: () => (
-            <Modal
+            <DropdownMenu.Root>
-              visible={isMenuVisible}
+              <DropdownMenu.Trigger>
-              transparent
+                <Ionicons
-              animationType="slide"
+                  name="ellipsis-horizontal-outline"
-              onRequestClose={() => {
+                  size={24}
-                setIsMenuVisible(false);
+                  color="white"
-                setActiveSubmenu(null);
+                />
-              }}
+              </DropdownMenu.Trigger>
-            >
+              <DropdownMenu.Content
-              <TouchableOpacity
+                align={"end"}
-                className="flex-1 bg-black/50"
+                alignOffset={-10}
-                activeOpacity={1}
+                avoidCollisions={false}
-                onPress={() => {
+                collisionPadding={0}
-                  setIsMenuVisible(false);
+                loop={false}
-                  setActiveSubmenu(null);
+                side={"bottom"}
-                }}
+                sideOffset={10}
               >
-                <View className="mt-auto bg-neutral-900 rounded-t-xl">
+                <DropdownMenu.Label>Display</DropdownMenu.Label>
-                  {!activeSubmenu ? (
+                <DropdownMenu.Group key="display-group">
-                    <>
+                  <DropdownMenu.Sub>
-                      <MenuSection title="Display" />
+                    <DropdownMenu.SubTrigger key="image-style-trigger">
-                      <MenuItem
+                      Display
-                        label="Display"
+                    </DropdownMenu.SubTrigger>
-                        onPress={() => setActiveSubmenu("display")}
+                    <DropdownMenu.SubContent
-                      />
+                      alignOffset={-10}
-                      <MenuItem
+                      avoidCollisions={true}
-                        label="Image style"
+                      collisionPadding={0}
-                        onPress={() => setActiveSubmenu("imageStyle")}
+                      loop={true}
-                      />
+                      sideOffset={10}
-                      <MenuItem
+                    >
-                        label="Show titles"
+                      <DropdownMenu.CheckboxItem
-                        selected={settings.libraryOptions.showTitles}
+                        key="display-option-1"
-                        disabled={
+                        value={settings.libraryOptions.display === "row"}
-                          settings.libraryOptions.imageStyle === "poster"
+                        onValueChange={() =>
-                        }
-                        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={() => {
                           updateSettings({
                             libraryOptions: {
                               ...settings.libraryOptions,
                               display: "row",
                             },
-                          });
+                          })
-                          setActiveSubmenu(null);
+                        }
-                        }}
+                      >
-                      />
+                        <DropdownMenu.ItemIndicator />
-                      <MenuItem
+                        <DropdownMenu.ItemTitle key="display-title-1">
-                        label="List"
+                          Row
-                        selected={settings.libraryOptions.display === "list"}
+                        </DropdownMenu.ItemTitle>
-                        onPress={() => {
+                      </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);
+                        }
-                        }}
+                      >
-                      />
+                        <DropdownMenu.ItemIndicator />
-                    </>
+                        <DropdownMenu.ItemTitle key="cover-title">
-                  ) : null}
+                          Cover
-
+                        </DropdownMenu.ItemTitle>
-                  <TouchableOpacity
+                      </DropdownMenu.CheckboxItem>
-                    className="p-4 border-t border-neutral-800"
+                    </DropdownMenu.SubContent>
-                    onPress={() => {
+                  </DropdownMenu.Sub>
-                      setIsMenuVisible(false);
+                </DropdownMenu.Group>
-                      setActiveSubmenu(null);
+                <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>
+                    <DropdownMenu.ItemIndicator />
-                  </TouchableOpacity>
+                    <DropdownMenu.ItemTitle key="show-titles-title">
-                </View>
+                      Show titles
-              </TouchableOpacity>
+                    </DropdownMenu.ItemTitle>
-            </Modal>
+                  </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)/(libraries)/index.tsx

@@ -10,7 +10,7 @@ import {
 import { FlashList } from "@shopify/flash-list";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useAtom } from "jotai";
-import { useEffect } from "react";
+import { useEffect, useMemo } from "react";
 import { StyleSheet, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
@@ -23,20 +23,20 @@ export default function index() {
   const { data, isLoading: isLoading } = useQuery({
     queryKey: ["user-views", user?.Id],
     queryFn: async () => {
-      if (!api || !user?.Id) {
+      const response = await getUserViewsApi(api!).getUserViews({
-        return null;
+        userId: user?.Id,
-      }
-
-      const response = await getUserViewsApi(api).getUserViews({
-        userId: user.Id,
       });
 
       return response.data.Items || null;
     },
-    enabled: !!api && !!user?.Id,
+    staleTime: 60,
-    staleTime: 60 * 1000 * 60,
   });
 
+  const libraries = useMemo(
+    () => data?.filter((l) => !settings?.hiddenLibraries?.includes(l.Id!)),
+    [data, settings?.hiddenLibraries]
+  );
+
   useEffect(() => {
     for (const item of data || []) {
       queryClient.prefetchQuery({
@@ -63,7 +63,7 @@ export default function index() {
       </View>
     );
 
-  if (!data)
+  if (!libraries)
     return (
       <View className="h-full w-full flex justify-center items-center">
         <Text className="text-lg text-neutral-500">No libraries found</Text>
@@ -81,7 +81,7 @@ export default function index() {
         paddingLeft: insets.left,
         paddingRight: insets.right,
       }}
-      data={data}
+      data={libraries}
       renderItem={({ item }) => <LibraryItemCard library={item} />}
       keyExtractor={(item) => item.Id || ""}
       ItemSeparatorComponent={() =>

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

@@ -1,4 +1,7 @@
-import {commonScreenOptions, nestedTabPageScreenOptions} from "@/components/stacks/NestedTabPageStack";
+import {
+  commonScreenOptions,
+  nestedTabPageScreenOptions,
+} from "@/components/stacks/NestedTabPageStack";
 import { Stack } from "expo-router";
 import { Platform } from "react-native";
 
@@ -11,6 +14,9 @@ export default function SearchLayout() {
           headerShown: true,
           headerLargeTitle: true,
           headerTitle: "Search",
+          headerLargeStyle: {
+            backgroundColor: "black",
+          },
           headerBlurEffect: "prominent",
           headerTransparent: Platform.OS === "ios" ? true : false,
           headerShadowVisible: false,
@@ -29,10 +35,8 @@ export default function SearchLayout() {
           headerShadowVisible: false,
         }}
       />
-      <Stack.Screen
+      <Stack.Screen name="jellyseerr/page" options={commonScreenOptions} />
-        name="jellyseerr/page"
+      <Stack.Screen name="jellyseerr/[personId]" options={commonScreenOptions} />
-        options={commonScreenOptions}
-      />
     </Stack>
   );
 }

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

@@ -31,12 +31,18 @@ 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 {
+  MovieResult,
+  PersonResult,
+  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";
+import PersonPoster from "@/components/jellyseerr/PersonPoster";
+import { useReactNavigationQuery } from "@/utils/useReactNavigationQuery";
 
 type SearchType = "Library" | "Discover";
 
@@ -95,6 +101,7 @@ export default function search() {
           return (searchApi.data.SearchHints as BaseItemDto[]) || [];
         } else {
           if (!settings?.marlinServerUrl) return [];
+
           const url = `${
             settings.marlinServerUrl
           }/search?q=${encodeURIComponent(query)}&includeItemTypes=${types
@@ -102,6 +109,7 @@ export default function search() {
             .join("&includeItemTypes=")}`;
 
           const response1 = await axios.get(url);
+
           const ids = response1.data.ids;
 
           if (!ids || !ids.length) return [];
@@ -147,8 +155,8 @@ export default function search() {
     enabled: searchType === "Library" && debouncedSearch.length > 0,
   });
 
-  const { data: jellyseerrResults, isFetching: j1 } = useQuery({
+  const { data: jellyseerrResults, isFetching: j1 } = useReactNavigationQuery({
-    queryKey: ["search", "jellyseerrResults", debouncedSearch],
+    queryKey: ["search", "jellyseerr", "results", debouncedSearch],
     queryFn: async () => {
       const response = await jellyseerrApi?.search({
         query: new URLSearchParams(debouncedSearch).toString(),
@@ -164,14 +172,15 @@ export default function search() {
       debouncedSearch.length > 0,
   });
 
-  const { data: jellyseerrDiscoverSettings, isFetching: j2 } = useQuery({
+  const { data: jellyseerrDiscoverSettings, isFetching: j2 } =
-    queryKey: ["search", "jellyseerrDiscoverSettings", debouncedSearch],
+    useReactNavigationQuery({
-    queryFn: async () => jellyseerrApi?.discoverSettings(),
+      queryKey: ["search", "jellyseerr", "discoverSettings", debouncedSearch],
-    enabled:
+      queryFn: async () => jellyseerrApi?.discoverSettings(),
-      !!jellyseerrApi &&
+      enabled:
-      searchType === "Discover" &&
+        !!jellyseerrApi &&
-      debouncedSearch.length == 0,
+        searchType === "Discover" &&
-  });
+        debouncedSearch.length == 0,
+    });
 
   const jellyseerrMovieResults: MovieResult[] | undefined = useMemo(
     () =>
@@ -189,6 +198,14 @@ export default function search() {
     [jellyseerrResults]
   );
 
+  const jellyseerrPersonResults: PersonResult[] | undefined = useMemo(
+    () =>
+      jellyseerrResults?.filter(
+        (r) => r.mediaType === "person"
+      ) as PersonResult[],
+    [jellyseerrResults]
+  );
+
   const { data: series, isFetching: l2 } = useQuery({
     queryKey: ["search", "series", debouncedSearch],
     queryFn: () =>
@@ -298,7 +315,7 @@ export default function search() {
           paddingRight: insets.right,
         }}
       >
-        <View className="flex flex-col pt-2">
+        <View className="flex flex-col">
           {Platform.OS === "android" && (
             <View className="mb-4 px-4">
               <Input
@@ -318,7 +335,7 @@ export default function search() {
                   text="Library"
                   textClass="p-1"
                   className={
-                    searchType === "Library" ? "bg-neutral-600" : undefined
+                    searchType === "Library" ? "bg-purple-600" : undefined
                   }
                 />
               </TouchableOpacity>
@@ -327,7 +344,7 @@ export default function search() {
                   text="Discover"
                   textClass="p-1"
                   className={
-                    searchType === "Discover" ? "bg-neutral-600" : undefined
+                    searchType === "Discover" ? "bg-purple-600" : undefined
                   }
                 />
               </TouchableOpacity>
@@ -484,6 +501,19 @@ export default function search() {
                   <JellyseerrPoster item={item} key={item.id} />
                 )}
               />
+              <SearchItemWrapper
+                header="Actors"
+                items={jellyseerrPersonResults}
+                renderItem={(item: PersonResult) => (
+                  <PersonPoster
+                    className="mr-2"
+                    key={item.id}
+                    id={item.id.toString()}
+                    name={item.name}
+                    posterPath={item.profilePath}
+                  />
+                )}
+              />
             </>
           )}
 
@@ -513,7 +543,7 @@ export default function search() {
               ))}
             </View>
           ) : debouncedSearch.length === 0 && searchType === "Discover" ? (
-            <View className="flex flex-col px-4">
+            <View className="flex flex-col">
               {sortBy?.(
                 jellyseerrDiscoverSettings?.filter((s) => s.enabled),
                 "order"

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

@@ -1,7 +1,7 @@
-import React from "react";
+import React, { useCallback, useRef } from "react";
 import { Platform } from "react-native";
 
-import { withLayoutContext } from "expo-router";
+import { useFocusEffect, useRouter, withLayoutContext } from "expo-router";
 
 import {
   createNativeBottomTabNavigator,
@@ -13,12 +13,13 @@ const { Navigator } = createNativeBottomTabNavigator();
 import { BottomTabNavigationOptions } from "@react-navigation/bottom-tabs";
 
 import { Colors } from "@/constants/Colors";
+import { useSettings } from "@/utils/atoms/settings";
+import { storage } from "@/utils/mmkv";
 import type {
   ParamListBase,
   TabNavigationState,
 } from "@react-navigation/native";
 import { SystemBars } from "react-native-edge-to-edge";
-import { useSettings } from "@/utils/atoms/settings";
 
 export const NativeTabs = withLayoutContext<
   BottomTabNavigationOptions,
@@ -29,6 +30,23 @@ export const NativeTabs = withLayoutContext<
 
 export default function TabLayout() {
   const [settings] = useSettings();
+  const router = useRouter();
+
+  useFocusEffect(
+    useCallback(() => {
+      const hasShownIntro = storage.getBoolean("hasShownIntro");
+      if (!hasShownIntro) {
+        const timer = setTimeout(() => {
+          router.push("/intro/page");
+        }, 1000);
+
+        return () => {
+          clearTimeout(timer);
+        };
+      }
+    }, [])
+  );
+
   return (
     <>
       <SystemBars hidden={false} style="light" />
@@ -48,7 +66,10 @@ export default function TabLayout() {
               Platform.OS == "android"
                 ? ({ color, focused, size }) =>
                     require("@/assets/icons/house.fill.png")
-                : () => ({ sfSymbol: "house" }),
+                : ({ focused }) =>
+                    focused
+                      ? { sfSymbol: "house.fill" }
+                      : { sfSymbol: "house" },
           }}
         />
         <NativeTabs.Screen
@@ -59,7 +80,26 @@ export default function TabLayout() {
               Platform.OS == "android"
                 ? ({ color, focused, size }) =>
                     require("@/assets/icons/magnifyingglass.png")
-                : () => ({ sfSymbol: "magnifyingglass" }),
+                : ({ focused }) =>
+                    focused
+                      ? { sfSymbol: "magnifyingglass" }
+                      : { sfSymbol: "magnifyingglass" },
+          }}
+        />
+        <NativeTabs.Screen
+          name="(favorites)"
+          options={{
+            title: "Favorites",
+            tabBarIcon:
+              Platform.OS == "android"
+                ? ({ color, focused, size }) =>
+                    focused
+                      ? require("@/assets/icons/heart.fill.png")
+                      : require("@/assets/icons/heart.png")
+                : ({ focused }) =>
+                    focused
+                      ? { sfSymbol: "heart.fill" }
+                      : { sfSymbol: "heart" },
           }}
         />
         <NativeTabs.Screen
@@ -70,7 +110,25 @@ export default function TabLayout() {
               Platform.OS == "android"
                 ? ({ color, focused, size }) =>
                     require("@/assets/icons/server.rack.png")
-                : () => ({ sfSymbol: "rectangle.stack" }),
+                : ({ focused }) =>
+                    focused
+                      ? { sfSymbol: "rectangle.stack.fill" }
+                      : { sfSymbol: "rectangle.stack" },
+          }}
+        />
+        <NativeTabs.Screen
+          name="(custom-links)"
+          options={{
+            title: "Custom Links",
+            // @ts-expect-error
+            tabBarItemHidden: settings?.showCustomMenuLinks ? false : true,
+            tabBarIcon:
+              Platform.OS == "android"
+                ? ({ focused }) => require("@/assets/icons/list.png")
+                : ({ focused }) =>
+                    focused
+                      ? { sfSymbol: "list.dash.fill" }
+                      : { 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,27 @@ import {
   getUserLibraryApi,
 } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery } from "@tanstack/react-query";
+import { useHaptic } from "@/hooks/useHaptic";
 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,
+  Platform,
+} 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 +65,14 @@ export default function page() {
   const isSeeking = useSharedValue(false);
   const cacheProgress = useSharedValue(0);
 
+  const { getDownloadedItem } = useDownload();
   const revalidateProgressCache = useInvalidatePlaybackProgressCache();
 
+  const lightHapticFeedback = useHaptic("light");
+
   const setShowControls = useCallback((show: boolean) => {
     _setShowControls(show);
+    lightHapticFeedback();
   }, []);
 
   const {
@@ -64,14 +81,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 +106,11 @@ export default function page() {
   } = useQuery({
     queryKey: ["item", itemId],
     queryFn: async () => {
+      if (offline) {
+        const item = await getDownloadedItem(itemId);
+        if (item) return item.item;
+      }
+
       const res = await getUserLibraryApi(api!).getItem({
         itemId,
         userId: user?.Id,
@@ -104,6 +129,20 @@ export default function page() {
   } = useQuery({
     queryKey: ["stream-url", itemId, mediaSourceId, bitrateValue],
     queryFn: async () => {
+      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 +177,11 @@ export default function page() {
   const togglePlay = useCallback(async () => {
     if (!api) return;
 
+    lightHapticFeedback();
     if (isPlaying) {
       await videoRef.current?.pause();
 
-      if (stream) {
+      if (!offline && stream) {
         await getPlaystateApi(api).onPlaybackProgress({
           itemId: item?.Id!,
           audioStreamIndex: audioIndex ? audioIndex : undefined,
@@ -155,11 +195,9 @@ export default function page() {
           playSessionId: stream.sessionId,
         });
       }
-
-      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 +221,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({
@@ -207,6 +248,8 @@ export default function page() {
 
   // TODO: unused should remove.
   const reportPlaybackStart = useCallback(async () => {
+    if (offline) return;
+
     if (!stream) return;
     await getPlaystateApi(api!).onPlaybackStart({
       itemId: item?.Id!,
@@ -231,6 +274,8 @@ export default function page() {
 
       progress.value = currentTime;
 
+      if (offline) return;
+
       const currentTimeInTicks = msToTicks(currentTime);
 
       if (!item?.Id || !stream) return;
@@ -249,10 +294,14 @@ export default function page() {
     [item?.Id, isPlaying, api, isPlaybackStopped, audioIndex, subtitleIndex]
   );
 
+  useOrientation();
+  useOrientationSettings();
+
   useWebSocket({
     isPlaying: isPlaying,
     togglePlay: togglePlay,
     stopPlayback: stop,
+    offline,
   });
 
   const onPlaybackStateChanged = useCallback((e: PlaybackStatePayload) => {
@@ -277,6 +326,8 @@ export default function page() {
   }, []);
 
   const startPosition = useMemo(() => {
+    if (offline) return 0;
+
     return item?.UserData?.PlaybackPositionTicks
       ? ticksToSeconds(item.UserData.PlaybackPositionTicks)
       : 0;
@@ -286,11 +337,39 @@ export default function page() {
     React.useCallback(() => {
       return async () => {
         stop();
-        console.log("Unmounted");
       };
     }, [])
   );
 
+  const [appState, setAppState] = useState(AppState.currentState);
+
+  useEffect(() => {
+    const handleAppStateChange = (nextAppState: AppStateStatus) => {
+      if (appState.match(/inactive|background/) && nextAppState === "active") {
+        // Handle app coming to the foreground
+      } else if (nextAppState.match(/inactive|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 +437,6 @@ export default function page() {
           position: "relative",
           flexDirection: "column",
           justifyContent: "center",
-          opacity: showControls ? (Platform.OS === "android" ? 0.7 : 0.5) : 1,
         }}
       >
         <VlcPlayerView
@@ -411,6 +489,7 @@ export default function page() {
           enableTrickplay={true}
           getAudioTracks={videoRef.current?.getAudioTracks}
           getSubtitleTracks={videoRef.current?.getSubtitleTracks}
+          offline={offline}
           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 { useHaptic } from "@/hooks/useHaptic";
 import { Image } from "expo-image";
 import { useFocusEffect, useLocalSearchParams } from "expo-router";
 import { useAtomValue } from "jotai";
@@ -42,6 +45,8 @@ export default function page() {
   const isSeeking = useSharedValue(false);
   const cacheProgress = useSharedValue(0);
 
+  const lightHapticFeedback = useHaptic("light");
+
   const {
     itemId,
     audioIndex: audioIndexStr,
@@ -121,6 +126,7 @@ export default function page() {
 
   const togglePlay = useCallback(
     async (ticks: number) => {
+      lightHapticFeedback();
       if (isPlaying) {
         videoRef.current?.pause();
         await getPlaystateApi(api!).onPlaybackProgress({
@@ -165,18 +171,15 @@ export default function page() {
   );
 
   const play = useCallback(() => {
-    console.log("play");
     videoRef.current?.resume();
     reportPlaybackStart();
   }, [videoRef]);
 
   const pause = useCallback(() => {
-    console.log("play");
     videoRef.current?.pause();
   }, [videoRef]);
 
   const stop = useCallback(() => {
-    console.log("stop");
     setIsPlaybackStopped(true);
     videoRef.current?.pause();
     reportPlaybackStopped();
@@ -257,6 +260,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 { useHaptic } from "@/hooks/useHaptic";
 import { useFocusEffect, useLocalSearchParams } from "expo-router";
 import { useAtomValue } from "jotai";
 import React, {
@@ -45,6 +48,7 @@ const Player = () => {
 
   const firstTime = useRef(true);
   const revalidateProgressCache = useInvalidatePlaybackProgressCache();
+  const lightHapticFeedback = useHaptic("light");
 
   const [isPlaybackStopped, setIsPlaybackStopped] = useState(false);
   const [showControls, _setShowControls] = useState(true);
@@ -55,6 +59,7 @@ const Player = () => {
 
   const setShowControls = useCallback((show: boolean) => {
     _setShowControls(show);
+    lightHapticFeedback();
   }, []);
 
   const progress = useSharedValue(0);
@@ -163,6 +168,7 @@ const Player = () => {
   const videoSource = useVideoSource(item, api, poster, stream?.url);
 
   const togglePlay = useCallback(async () => {
+    lightHapticFeedback();
     if (isPlaying) {
       videoRef.current?.pause();
       await getPlaystateApi(api!).onPlaybackProgress({
@@ -255,13 +261,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 +293,14 @@ const Player = () => {
     ]
   );
 
+  useOrientation();
+  useOrientationSettings();
+
   useWebSocket({
     isPlaying: isPlaying,
     togglePlay: togglePlay,
     stopPlayback: stop,
+    offline: false,
   });
 
   const [selectedTextTrack, setSelectedTextTrack] = useState<
@@ -330,11 +333,7 @@ const Player = () => {
 
       // Most likely the subtitle is burned in.
       if (embeddedTrackIndex === -1) return;
-      console.log(
+
-        "Setting selected text track",
-        subtitleIndex,
-        embeddedTrackIndex
-      );
       setSelectedTextTrack({
         type: SelectedTrackType.INDEX,
         value: embeddedTrackIndex,
@@ -389,7 +388,6 @@ const Player = () => {
           position: "relative",
           flexDirection: "column",
           justifyContent: "center",
-          opacity: showControls ? 0.5 : 1,
         }}
       >
         {videoSource ? (
@@ -430,7 +428,6 @@ const Player = () => {
                 setIsBuffering(e.isBuffering);
               }}
               onAudioTracks={(e) => {
-                console.log("onAudioTracks: ", e.audioTracks);
                 setAudioTracks(
                   e.audioTracks.map((t) => ({
                     index: t.index,
@@ -484,7 +481,6 @@ const Player = () => {
           }}
           getAudioTracks={getAudioTracks}
           setAudioTrack={(i) => {
-            console.log("setAudioTrack ~", i);
             setSelectedAudioTrack({
               type: SelectedTrackType.INDEX,
               value: i,

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,43 @@
 import "@/augmentations";
-import { JellyfinProvider } from "@/providers/JellyfinProvider";
+import { Text } from "@/components/common/Text";
+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 * as TaskManager from "expo-task-manager";
-import { useEffect } from "react";
+import { Provider as JotaiProvider, useAtom } from "jotai";
-import { Appearance } from "react-native";
+import { useEffect, useRef } from "react";
+import { Appearance, AppState, TouchableOpacity } from "react-native";
 import { SystemBars } from "react-native-edge-to-edge";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import "react-native-reanimated";
@@ -21,6 +45,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 +246,151 @@ 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>
+          <JobQueueProvider>
-            <PlaySettingsProvider>
+            <JellyfinProvider>
-              <LogProvider>
+              <PlaySettingsProvider>
-                <WebSocketProvider>
+                <LogProvider>
-                  <BottomSheetModalProvider>
+                  <WebSocketProvider>
-                    <SystemBars style="light" hidden={false} />
+                    <DownloadProvider>
-                    <ThemeProvider value={DarkTheme}>
+                      <BottomSheetModalProvider>
-                      <Stack initialRouteName="/home">
+                        <SystemBars style="light" hidden={false} />
-                        <Stack.Screen
+                        <ThemeProvider value={DarkTheme}>
-                          name="(auth)/(tabs)"
+                          <Stack initialRouteName="/home">
-                          options={{
+                            <Stack.Screen
-                            headerShown: false,
+                              name="(auth)/(tabs)"
-                            title: "",
+                              options={{
-                            header: () => null,
+                                headerShown: false,
-                          }}
+                                title: "",
-                        />
+                                header: () => null,
-                        <Stack.Screen
+                              }}
-                          name="(auth)/player"
+                            />
-                          options={{
+                            <Stack.Screen
-                            headerShown: false,
+                              name="(auth)/player"
-                            title: "",
+                              options={{
-                            header: () => null,
+                                headerShown: false,
-                          }}
+                                title: "",
-                        />
+                                header: () => null,
-                        <Stack.Screen
+                              }}
-                          name="(auth)/trailer/page"
+                            />
-                          options={{
+                            <Stack.Screen
-                            headerShown: false,
+                              name="login"
-                            presentation: "modal",
+                              options={{
-                            title: "",
+                                headerShown: true,
-                          }}
+                                title: "",
-                        />
+                                headerTransparent: true,
-                        <Stack.Screen
+                              }}
-                          name="login"
+                            />
-                          options={{
+                            <Stack.Screen name="+not-found" />
-                            headerShown: true,
+                          </Stack>
-                            title: "",
+                          <Toaster
-                            headerTransparent: true,
+                            duration={4000}
-                          }}
+                            toastOptions={{
-                        />
+                              style: {
-                        <Stack.Screen name="+not-found" />
+                                backgroundColor: "#262626",
-                      </Stack>
+                                borderColor: "#363639",
-                      <Toaster
+                                borderWidth: 1,
-                        duration={4000}
+                              },
-                        toastOptions={{
+                              titleStyle: {
-                          style: {
+                                color: "white",
-                            backgroundColor: "#262626",
+                              },
-                            borderColor: "#363639",
+                            }}
-                            borderWidth: 1,
+                            closeButton
-                          },
+                          />
-                          titleStyle: {
+                        </ThemeProvider>
-                            color: "white",
+                      </BottomSheetModalProvider>
-                          },
+                    </DownloadProvider>
-                        }}
+                  </WebSocketProvider>
-                        closeButton
+                </LogProvider>
-                      />
+              </PlaySettingsProvider>
-                    </ThemeProvider>
+            </JellyfinProvider>
-                  </BottomSheetModalProvider>
+          </JobQueueProvider>
-                </WebSocketProvider>
-              </LogProvider>
-            </PlaySettingsProvider>
-          </JellyfinProvider>
         </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

@@ -1,13 +1,20 @@
 import { Button } from "@/components/Button";
 import { Input } from "@/components/common/Input";
 import { Text } from "@/components/common/Text";
+import { PreviousServersList } from "@/components/PreviousServersList";
+import { Colors } from "@/constants/Colors";
 import { apiAtom, useJellyfin } from "@/providers/JellyfinProvider";
-import { Ionicons } from "@expo/vector-icons";
+import {
+  Ionicons,
+  MaterialCommunityIcons,
+  MaterialIcons,
+} 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 { useAtom } from "jotai";
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import {
   Alert,
   KeyboardAvoidingView,
@@ -37,7 +44,6 @@ const Login: React.FC = () => {
 
   const [serverURL, setServerURL] = useState<string>(_apiUrl);
   const [serverName, setServerName] = useState<string>("");
-  const [error, setError] = useState<string>("");
   const [credentials, setCredentials] = useState<{
     username: string;
     password: string;
@@ -75,8 +81,10 @@ const Login: React.FC = () => {
             onPress={() => {
               removeServer();
             }}
+            className="flex flex-row items-center"
           >
-            <Ionicons name="chevron-back" size={24} color="white" />
+            <Ionicons name="chevron-back" size={18} color={Colors.primary} />
+            <Text className="ml-2 text-purple-600">Change server</Text>
           </TouchableOpacity>
         ) : null,
     });
@@ -93,9 +101,9 @@ const Login: React.FC = () => {
       }
     } catch (error) {
       if (error instanceof Error) {
-        setError(error.message);
+        Alert.alert("Connection failed", error.message);
       } else {
-        setError("An unexpected error occurred");
+        Alert.alert("Connection failed", "An unexpected error occurred");
       }
     } finally {
       setLoading(false);
@@ -119,7 +127,7 @@ const Login: React.FC = () => {
    * - Sets loadingServerCheck state to true at the beginning and false at the end.
    * - Logs errors and timeout information to the console.
    */
-  async function checkUrl(url: string) {
+  const checkUrl = useCallback(async (url: string) => {
     setLoadingServerCheck(true);
 
     try {
@@ -129,15 +137,18 @@ const Login: React.FC = () => {
 
       if (response.ok) {
         const data = (await response.json()) as PublicSystemInfo;
+
         setServerName(data.ServerName || "");
         return url;
       }
 
+      return undefined;
+    } catch {
       return undefined;
     } finally {
       setLoadingServerCheck(false);
     }
-  }
+  }, []);
 
   /**
    * Handles the connection attempt to a Jellyfin server.
@@ -155,7 +166,7 @@ const Login: React.FC = () => {
    * - Sets the server address using `setServer` if the connection is successful.
    *
    */
-  const handleConnect = async (url: string) => {
+  const handleConnect = useCallback(async (url: string) => {
     url = url.trim();
 
     const result = await checkUrl(url);
@@ -169,7 +180,7 @@ const Login: React.FC = () => {
     }
 
     setServer({ address: url });
-  };
+  }, []);
 
   const handleQuickConnect = async () => {
     try {
@@ -186,128 +197,131 @@ const Login: React.FC = () => {
     }
   };
 
-  if (api?.basePath) {
-    return (
-      <SafeAreaView style={{ flex: 1 }}>
-        <KeyboardAvoidingView
-          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}
-                  </>
-                </Text>
-                <Text className="text-xs text-neutral-400">{serverURL}</Text>
-                <Input
-                  placeholder="Username"
-                  onChangeText={(text) =>
-                    setCredentials({ ...credentials, username: text })
-                  }
-                  value={credentials.username}
-                  autoFocus
-                  secureTextEntry={false}
-                  keyboardType="default"
-                  returnKeyType="done"
-                  autoCapitalize="none"
-                  textContentType="username"
-                  clearButtonMode="while-editing"
-                  maxLength={500}
-                />
-
-                <Input
-                  className="mb-2"
-                  placeholder="Password"
-                  onChangeText={(text) =>
-                    setCredentials({ ...credentials, password: text })
-                  }
-                  value={credentials.password}
-                  secureTextEntry
-                  keyboardType="default"
-                  returnKeyType="done"
-                  autoCapitalize="none"
-                  textContentType="password"
-                  clearButtonMode="while-editing"
-                  maxLength={500}
-                />
-              </View>
-
-              <Text className="text-red-600 mb-2">{error}</Text>
-            </View>
-
-            <View className="absolute bottom-0 left-0 w-full px-4 mb-2">
-              <Button
-                color="black"
-                onPress={handleQuickConnect}
-                className="w-full mb-2"
-              >
-                Use Quick Connect
-              </Button>
-              <Button onPress={handleLogin} loading={loading}>
-                Log in
-              </Button>
-            </View>
-          </View>
-        </KeyboardAvoidingView>
-      </SafeAreaView>
-    );
-  }
-
   return (
-    <SafeAreaView style={{ flex: 1 }}>
+    <SafeAreaView style={{ flex: 1, paddingBottom: 16 }}>
       <KeyboardAvoidingView
         behavior={Platform.OS === "ios" ? "padding" : "height"}
-        style={{ flex: 1, height: "100%" }}
       >
-        <View className="flex flex-col h-full relative items-center justify-center w-full">
+        {api?.basePath ? (
-          <View className="flex flex-col gap-y-2 px-4 w-full -mt-36">
+          <>
-            <Image
+            <View className="flex flex-col h-full relative items-center justify-center">
-              style={{
+              <View className="px-4 -mt-20 w-full">
-                width: 100,
+                <View className="flex flex-col space-y-2">
-                height: 100,
+                  <Text className="text-2xl font-bold -mb-2">
-                marginLeft: -23,
+                    Log in
-                marginBottom: -20,
+                    <>
-              }}
+                      {serverName ? (
-              source={require("@/assets/images/StreamyFinFinal.png")}
+                        <>
-            />
+                          {" to "}
-            <Text className="text-3xl font-bold">Streamyfin</Text>
+                          <Text className="text-purple-600">{serverName}</Text>
-            <Text className="text-neutral-500">
+                        </>
-              Enter the URL to your Jellyfin server
+                      ) : null}
-            </Text>
+                    </>
-            <Input
+                  </Text>
-              placeholder="Server URL"
+                  <Text className="text-xs text-neutral-400">
-              onChangeText={setServerURL}
+                    {api.basePath}
-              value={serverURL}
+                  </Text>
-              keyboardType="url"
+                  <Input
-              returnKeyType="done"
+                    placeholder="Username"
-              autoCapitalize="none"
+                    onChangeText={(text) =>
-              textContentType="URL"
+                      setCredentials({ ...credentials, username: text })
-              maxLength={500}
+                    }
-            />
+                    value={credentials.username}
-            <Text className="text-xs text-neutral-500">
+                    autoFocus
-              Make sure to include http or https
+                    secureTextEntry={false}
-            </Text>
+                    keyboardType="default"
-          </View>
+                    returnKeyType="done"
-          <View className="mb-2 absolute bottom-0 left-0 w-full px-4">
+                    autoCapitalize="none"
-            <Button
+                    textContentType="username"
-              loading={loadingServerCheck}
+                    clearButtonMode="while-editing"
-              disabled={loadingServerCheck}
+                    maxLength={500}
-              onPress={async () => await handleConnect(serverURL)}
+                  />
-              className="w-full grow"
+
-            >
+                  <Input
-              Connect
+                    placeholder="Password"
-            </Button>
+                    onChangeText={(text) =>
-          </View>
+                      setCredentials({ ...credentials, password: text })
-        </View>
+                    }
+                    value={credentials.password}
+                    secureTextEntry
+                    keyboardType="default"
+                    returnKeyType="done"
+                    autoCapitalize="none"
+                    textContentType="password"
+                    clearButtonMode="while-editing"
+                    maxLength={500}
+                  />
+                  <View className="flex flex-row items-center justify-between">
+                    <Button
+                      onPress={handleLogin}
+                      loading={loading}
+                      className="flex-1 mr-2"
+                    >
+                      Log in
+                    </Button>
+                    <TouchableOpacity
+                      onPress={handleQuickConnect}
+                      className="p-2 bg-neutral-900 rounded-xl h-12 w-12 flex items-center justify-center"
+                    >
+                      <MaterialCommunityIcons
+                        name="cellphone-lock"
+                        size={24}
+                        color="white"
+                      />
+                    </TouchableOpacity>
+                  </View>
+                </View>
+              </View>
+
+              <View className="absolute bottom-0 left-0 w-full px-4 mb-2"></View>
+            </View>
+          </>
+        ) : (
+          <>
+            <View className="flex flex-col h-full items-center justify-center w-full">
+              <View className="flex flex-col gap-y-2 px-4 w-full -mt-36">
+                <Image
+                  style={{
+                    width: 100,
+                    height: 100,
+                    marginLeft: -23,
+                    marginBottom: -20,
+                  }}
+                  source={require("@/assets/images/StreamyFinFinal.png")}
+                />
+                <Text className="text-3xl font-bold">Streamyfin</Text>
+                <Text className="text-neutral-500">
+                  Enter the URL to your Jellyfin server
+                </Text>
+                <Input
+                  aria-label="Server URL"
+                  placeholder="http(s)://your-server.com"
+                  onChangeText={setServerURL}
+                  value={serverURL}
+                  keyboardType="url"
+                  returnKeyType="done"
+                  autoCapitalize="none"
+                  textContentType="URL"
+                  maxLength={500}
+                />
+
+                <Button
+                  loading={loadingServerCheck}
+                  disabled={loadingServerCheck}
+                  onPress={async () => await handleConnect(serverURL)}
+                  className="w-full grow"
+                >
+                  Connect
+                </Button>
+                <PreviousServersList
+                  onServerSelect={(s) => {
+                    handleConnect(s.address);
+                  }}
+                />
+              </View>
+            </View>
+          </>
+        )}
       </KeyboardAvoidingView>
     </SafeAreaView>
   );

augmentations/number.ts

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

components/AddToFavorites.tsx

@@ -0,0 +1,114 @@
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+import { getUserLibraryApi } from "@jellyfin/sdk/lib/utils/api";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useAtom } from "jotai";
+import { useMemo } from "react";
+import { TouchableOpacityProps, View, ViewProps } from "react-native";
+import { RoundButton } from "./RoundButton";
+
+interface Props extends ViewProps {
+  item: BaseItemDto;
+  type: "item" | "series";
+}
+
+export const AddToFavorites: React.FC<Props> = ({ item, type, ...props }) => {
+  const queryClient = useQueryClient();
+  const [api] = useAtom(apiAtom);
+  const [user] = useAtom(userAtom);
+
+  const isFavorite = useMemo(() => {
+    return item.UserData?.IsFavorite;
+  }, [item.UserData?.IsFavorite]);
+
+  const updateItemInQueries = (newData: Partial<BaseItemDto>) => {
+    queryClient.setQueryData<BaseItemDto | undefined>(
+      [type, item.Id],
+      (old) => {
+        if (!old) return old;
+        return {
+          ...old,
+          ...newData,
+          UserData: { ...old.UserData, ...newData.UserData },
+        };
+      }
+    );
+  };
+
+  const markFavoriteMutation = useMutation({
+    mutationFn: async () => {
+      if (api && user) {
+        await getUserLibraryApi(api).markFavoriteItem({
+          userId: user.Id,
+          itemId: item.Id!,
+        });
+      }
+    },
+    onMutate: async () => {
+      await queryClient.cancelQueries({ queryKey: [type, item.Id] });
+      const previousItem = queryClient.getQueryData<BaseItemDto>([
+        type,
+        item.Id,
+      ]);
+      updateItemInQueries({ UserData: { IsFavorite: true } });
+
+      return { previousItem };
+    },
+    onError: (err, variables, context) => {
+      if (context?.previousItem) {
+        queryClient.setQueryData([type, item.Id], context.previousItem);
+      }
+    },
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: [type, item.Id] });
+      queryClient.invalidateQueries({ queryKey: ["home", "favorites"] });
+    },
+  });
+
+  const unmarkFavoriteMutation = useMutation({
+    mutationFn: async () => {
+      if (api && user) {
+        await getUserLibraryApi(api).unmarkFavoriteItem({
+          userId: user.Id,
+          itemId: item.Id!,
+        });
+      }
+    },
+    onMutate: async () => {
+      await queryClient.cancelQueries({ queryKey: [type, item.Id] });
+      const previousItem = queryClient.getQueryData<BaseItemDto>([
+        type,
+        item.Id,
+      ]);
+      updateItemInQueries({ UserData: { IsFavorite: false } });
+
+      return { previousItem };
+    },
+    onError: (err, variables, context) => {
+      if (context?.previousItem) {
+        queryClient.setQueryData([type, item.Id], context.previousItem);
+      }
+    },
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: [type, item.Id] });
+      queryClient.invalidateQueries({ queryKey: ["home", "favorites"] });
+    },
+  });
+
+  return (
+    <View {...props}>
+      <RoundButton
+        size="large"
+        icon={isFavorite ? "heart" : "heart-outline"}
+        fillColor={isFavorite ? "primary" : undefined}
+        onPress={() => {
+          if (isFavorite) {
+            unmarkFavoriteMutation.mutate();
+          } else {
+            markFavoriteMutation.mutate();
+          }
+        }}
+      />
+    </View>
+  );
+};

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 { useMemo } from "react";
-import { Modal, TouchableOpacity, View } from "react-native";
+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
-      <View
+      className="flex shrink"
-        className="flex shrink"
+      style={{
-        style={{
+        minWidth: 50,
-          minWidth: 50,
+      }}
-        }}
+    >
-      >
+      <DropdownMenu.Root>
-        <View className="flex flex-col" {...props}>
+        <DropdownMenu.Trigger>
-          <Text className="opacity-50 mb-1 text-xs">Audio</Text>
+          <View className="flex flex-col" {...props}>
-          <TouchableOpacity
+            <Text className="opacity-50 mb-1 text-xs">Audio</Text>
-            className="bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between"
+            <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 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
               </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>
+        </DropdownMenu.Trigger>
-      </Modal>
+        <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 { useMemo } from "react";
-import { Ionicons } from "@expo/vector-icons";
 
 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
-      <View
+      className="flex shrink"
-        className="flex shrink"
+      style={{
-        style={{
+        minWidth: 60,
-          minWidth: 60,
+        maxWidth: 200,
-          maxWidth: 200,
+      }}
-        }}
+    >
-      >
+      <DropdownMenu.Root>
-        <View className="flex flex-col" {...props}>
+        <DropdownMenu.Trigger>
-          <Text className="opacity-50 mb-1 text-xs">Quality</Text>
+          <View className="flex flex-col" {...props}>
-          <TouchableOpacity
+            <Text className="opacity-50 mb-1 text-xs">Quality</Text>
-            className="bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between"
+            <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 style={{}} className="" numberOfLines={1}>
-          >
+                {BITRATES.find((b) => b.value === selected?.value)?.key}
-            <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
               </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>
+        </DropdownMenu.Trigger>
-      </Modal>
+        <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,3 +1,4 @@
+import { useHaptic } from "@/hooks/useHaptic";
 import React, { PropsWithChildren, ReactNode, useMemo } from "react";
 import { Text, TouchableOpacity, View } from "react-native";
 import { Loader } from "./Loader";
@@ -36,12 +37,14 @@ export const Button: React.FC<PropsWithChildren<ButtonProps>> = ({
       case "red":
         return "bg-red-600";
       case "black":
-        return "bg-neutral-900 border border-neutral-800";
+        return "bg-neutral-900";
       case "transparent":
         return "bg-transparent";
     }
   }, [color]);
 
+  const lightHapticFeedback = useHaptic("light");
+
   return (
     <TouchableOpacity
       className={`
@@ -53,13 +56,16 @@ export const Button: React.FC<PropsWithChildren<ButtonProps>> = ({
       onPress={() => {
         if (!loading && !disabled && onPress) {
           onPress();
+          lightHapticFeedback();
         }
       }}
       disabled={disabled || loading}
       {...props}
     >
       {loading ? (
-        <Loader />
+        <View className="p-0.5">
+          <Loader />
+        </View>
       ) : (
         <View
           className={`

components/Chromecast.tsx

@@ -0,0 +1,86 @@
+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";
+import { RoundButton } from "./RoundButton";
+
+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) {
+        console.warn("DiscoveryManager is not initialized");
+        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 (
+      <RoundButton
+        size="large"
+        className="mr-2"
+        background={false}
+        onPress={() => {
+          if (mediaStatus?.currentItemId) CastContext.showExpandedControls();
+          else CastContext.showCastDialog();
+        }}
+        {...props}
+      >
+        <AndroidCastButton />
+        <Feather name="cast" size={22} color={"white"} />
+      </RoundButton>
+    );
+
+  return (
+    <RoundButton
+      size="large"
+      onPress={() => {
+        if (mediaStatus?.currentItemId) CastContext.showExpandedControls();
+        else CastContext.showCastDialog();
+      }}
+      {...props}
+    >
+      <AndroidCastButton />
+      <Feather name="cast" size={22} color={"white"} />
+    </RoundButton>
+  );
+};

components/DownloadItem.tsx

@@ -0,0 +1,405 @@
+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, 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 { RoundButton } from "./RoundButton";
+import { SubtitleTrackSelector } from "./SubtitleTrackSelector";
+
+interface DownloadProps extends ViewProps {
+  items: BaseItemDto[];
+  MissingDownloadIconComponent: () => React.ReactElement;
+  DownloadedIconComponent: () => React.ReactElement;
+  title?: string;
+  subtitle?: string;
+  size?: "default" | "large";
+}
+
+export const DownloadItems: React.FC<DownloadProps> = ({
+  items,
+  MissingDownloadIconComponent,
+  DownloadedIconComponent,
+  title = "Download",
+  subtitle = "",
+  size = "default",
+  ...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]
+  );
+
+  const bottomSheetModalRef = useRef<BottomSheetModal>(null);
+
+  const handlePresentModalPress = useCallback(() => {
+    bottomSheetModalRef.current?.present();
+  }, []);
+
+  const handleSheetChanges = useCallback((index: number) => {}, []);
+
+  const closeModal = useCallback(() => {
+    bottomSheetModalRef.current?.dismiss();
+  }, []);
+
+  const itemIds = useMemo(() => items.map((i) => i.Id), [items]);
+
+  const itemsNotDownloaded = useMemo(
+    () =>
+      items.filter((i) => !downloadedFiles?.some((f) => f.item.Id === i.Id)),
+    [items, downloadedFiles]
+  );
+
+  const allItemsDownloaded = useMemo(() => {
+    if (items.length === 0) return false;
+    return itemsNotDownloaded.length === 0;
+  }, [items, itemsNotDownloaded]);
+  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 (
+      itemsNotDownloaded.length > 0 &&
+      itemsNotDownloaded.every((p) => queue.some((q) => p.Id == q.item.Id))
+    );
+  }, [queue, itemsNotDownloaded]);
+  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 (itemsNotDownloaded.some((i) => !i.Id)) {
+        throw new Error("No item id");
+      }
+      closeModal();
+
+      if (usingOptimizedServer) initiateDownload(...itemsNotDownloaded);
+      else {
+        queueActions.enqueue(
+          queue,
+          setQueue,
+          ...itemsNotDownloaded.map((item) => ({
+            id: item.Id!,
+            execute: async () => await initiateDownload(item),
+            item,
+          }))
+        );
+      }
+    } else {
+      toast.error("You are not allowed to download files.");
+    }
+  }, [
+    queue,
+    setQueue,
+    itemsNotDownloaded,
+    usingOptimizedServer,
+    userCanDownload,
+    maxBitrate,
+    selectedMediaSource,
+    selectedAudioStream,
+    selectedSubtitleStream,
+  ]);
+
+  const initiateDownload = useCallback(
+    async (...items: BaseItemDto[]) => {
+      if (
+        !api ||
+        !user?.Id ||
+        items.some((p) => !p.Id) ||
+        (itemsNotDownloaded.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 (itemsNotDownloaded.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, source);
+        }
+      }
+    },
+    [
+      api,
+      user?.Id,
+      itemsNotDownloaded,
+      selectedMediaSource,
+      selectedAudioStream,
+      selectedSubtitleStream,
+      settings,
+      maxBitrate,
+      usingOptimizedServer,
+      startBackgroundDownload,
+      startRemuxing,
+    ]
+  );
+
+  const renderBackdrop = useCallback(
+    (props: BottomSheetBackdropProps) => (
+      <BottomSheetBackdrop
+        {...props}
+        disappearsOnIndex={-1}
+        appearsOnIndex={0}
+      />
+    ),
+    []
+  );
+  useFocusEffect(
+    useCallback(() => {
+      if (!settings) return;
+      if (itemsNotDownloaded.length !== 1) return;
+      const { bitrate, mediaSource, audioIndex, subtitleIndex } =
+        getDefaultPlaySettings(items[0], settings);
+
+      setSelectedMediaSource(mediaSource ?? undefined);
+      setSelectedAudioStream(audioIndex ?? 0);
+      setSelectedSubtitleStream(subtitleIndex ?? -1);
+      setMaxBitrate(bitrate);
+    }, [items, itemsNotDownloaded, settings])
+  );
+
+  const renderButtonContent = () => {
+    if (processes && itemsProcesses.length > 0) {
+      return progress === 0 ? (
+        <Loader />
+      ) : (
+        <View className="-rotate-45">
+          <ProgressCircle
+            size={24}
+            fill={progress}
+            width={4}
+            tintColor="#9334E9"
+            backgroundColor="#bdc3c7"
+          />
+        </View>
+      );
+    } else if (itemsQueued) {
+      return <Ionicons name="hourglass" size={24} color="white" />;
+    } else if (allItemsDownloaded) {
+      return <DownloadedIconComponent />;
+    } else {
+      return <MissingDownloadIconComponent />;
+    }
+  };
+
+  const onButtonPress = () => {
+    if (processes && itemsProcesses.length > 0) {
+      navigateToDownloads();
+    } else if (itemsQueued) {
+      navigateToDownloads();
+    } else if (allItemsDownloaded) {
+      onDownloadedPress();
+    } else {
+      handlePresentModalPress();
+    }
+  };
+
+  return (
+    <View {...props}>
+      <RoundButton size={size} onPress={onButtonPress}>
+        {renderButtonContent()}
+      </RoundButton>
+      <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">
+            <View>
+              <Text className="font-bold text-2xl text-neutral-100">
+                {title}
+              </Text>
+              <Text className="text-neutral-300">
+                {subtitle || `Download ${itemsNotDownloaded.length} items`}
+              </Text>
+            </View>
+            <View className="flex flex-col space-y-2 w-full items-start">
+              <BitrateSelector
+                inverted
+                onChange={setMaxBitrate}
+                selected={maxBitrate}
+              />
+              {itemsNotDownloaded.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<{
+  size?: "default" | "large";
+  item: BaseItemDto;
+}> = ({ item, size = "default" }) => {
+  return (
+    <DownloadItems
+      size={size}
+      title="Download Episode"
+      subtitle={item.Name!}
+      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,6 +1,6 @@
 // GenreTags.tsx
 import React from "react";
-import {View, ViewProps} from "react-native";
+import {StyleProp, TextStyle, View, ViewProps} from "react-native";
 import { Text } from "./common/Text";
 
 interface TagProps {
@@ -8,14 +8,15 @@ interface TagProps {
   textClass?: ViewProps["className"]
 }
 
-export const Tag: React.FC<{ text: string, textClass?: ViewProps["className"]} & ViewProps> = ({
+export const Tag: React.FC<{ text: string, textClass?: ViewProps["className"], textStyle?: StyleProp<TextStyle>} & ViewProps> = ({
   text,
   textClass,
+  textStyle,
   ...props
 }) => {
   return (
     <View className="bg-neutral-800 rounded-full px-2 py-1" {...props}>
-      <Text className={textClass}>{text}</Text>
+      <Text className={textClass} style={textStyle}>{text}</Text>
     </View>
   );
 };
@@ -26,7 +27,7 @@ export const Tags: React.FC<TagProps & ViewProps> = ({ tags, textClass = "text-x
   return (
     <View className={`flex flex-row flex-wrap gap-1 ${props.className}`} {...props}>
       {tags.map((tag, idx) => (
-        <View>
+        <View key={idx}>
           <Tag key={idx} textClass={textClass} text={tag}/>
         </View>
       ))}

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,6 +12,8 @@ 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";
@@ -21,14 +24,17 @@ 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 { AddToFavorites } from "./AddToFavorites";
 
 export type SelectedOptions = {
   bitrate: Bitrate;
@@ -41,8 +47,10 @@ 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 [headerHeight, setHeaderHeight] = useState(350);
@@ -78,9 +86,12 @@ 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} size="large" />
                   <PlayedStatus item={item} />
+                  <AddToFavorites item={item} type="item" />
                 </View>
               )}
             </View>
@@ -89,9 +100,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]);
 

components/ItemTechnicalDetails.tsx

@@ -175,6 +175,8 @@ const VideoStreamInfo = ({ source }: { source?: MediaSourceInfo }) => {
     ) as MediaStream;
   }, [source.MediaStreams]);
 
+  if (!videoStream) return null;
+
   return (
     <View className="flex-row flex-wrap gap-2">
       <Badge

components/ListItem.tsx

@@ -1,35 +0,0 @@
-import { PropsWithChildren, ReactNode } from "react";
-import { View, ViewProps } from "react-native";
-import { Text } from "./common/Text";
-
-interface Props extends ViewProps {
-  title?: string | null | undefined;
-  subTitle?: string | null | undefined;
-  children?: ReactNode;
-  iconAfter?: ReactNode;
-}
-
-export const ListItem: React.FC<PropsWithChildren<Props>> = ({
-  title,
-  subTitle,
-  iconAfter,
-  children,
-  ...props
-}) => {
-  return (
-    <View
-      className="flex flex-row items-center justify-between bg-neutral-900 p-4"
-      {...props}
-    >
-      <View className="flex flex-col overflow-visible">
-        <Text className="font-bold ">{title}</Text>
-        {subTitle && (
-          <Text uiTextView selectable className="text-xs text-neutral-400">
-            {subTitle}
-          </Text>
-        )}
-      </View>
-      {iconAfter}
-    </View>
-  );
-};

components/MediaSourceSelector.tsx

@@ -1,12 +1,13 @@
-import { convertBitsToMegabitsOrGigabits } from "@/utils/bToMb";
+import { tc } from "@/utils/textTools";
-import { Ionicons } from "@expo/vector-icons";
 import {
   BaseItemDto,
   MediaSourceInfo,
 } from "@jellyfin/sdk/lib/generated-client/models";
-import { useMemo, useState } from "react";
+import { useEffect, useMemo } from "react";
-import { Modal, TouchableOpacity, View } from "react-native";
+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
-      <View
+      className="flex shrink"
-        className="flex shrink"
+      style={{
-        style={{
+        minWidth: 50,
-          minWidth: 50,
+      }}
-        }}
+    >
-      >
+      <DropdownMenu.Root>
-        <View className="flex flex-col" {...props}>
+        <DropdownMenu.Trigger>
-          <Text className="opacity-50 mb-1 text-xs">Video</Text>
+          <View className="flex flex-col" {...props}>
-          <TouchableOpacity
+            <Text className="opacity-50 mb-1 text-xs">Video</Text>
-            className="bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between"
+            <TouchableOpacity className="bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center">
-            onPress={() => setIsModalVisible(true)}
+              <Text numberOfLines={1}>{selectedName}</Text>
-          >
-            <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>
             </TouchableOpacity>
           </View>
-        </TouchableOpacity>
+        </DropdownMenu.Trigger>
-      </Modal>
+        <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,8 @@ import Animated, {
 } from "react-native-reanimated";
 import { Button } from "./Button";
 import { SelectedOptions } from "./ItemContent";
+import { chromecastProfile } from "@/utils/profiles/chromecast";
+import { useHaptic } from "@/hooks/useHaptic";
 
 interface Props extends React.ComponentProps<typeof Button> {
   item: BaseItemDto;
@@ -36,6 +48,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);
@@ -50,6 +64,7 @@ export const PlayButton: React.FC<Props> = ({
   const widthProgress = useSharedValue(0);
   const colorChangeProgress = useSharedValue(0);
   const [settings] = useSettings();
+  const lightHapticFeedback = useHaptic("light");
 
   const goToPlayer = useCallback(
     (q: string, bitrateValue: number | undefined) => {
@@ -65,6 +80,8 @@ export const PlayButton: React.FC<Props> = ({
   const onPress = useCallback(async () => {
     if (!item) return;
 
+    lightHapticFeedback();
+
     const queryParams = new URLSearchParams({
       itemId: item.Id!,
       audioIndex: selectedOptions.audioIndex?.toString() ?? "",
@@ -75,16 +92,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 +356,21 @@ export const PlayButton: React.FC<Props> = ({
             <Animated.Text style={animatedTextStyle}>
               <Ionicons name="play-circle" size={24} />
             </Animated.Text>
-            <Animated.Text style={animatedTextStyle}>
+            {client && (
-              <MaterialCommunityIcons
+              <Animated.Text style={animatedTextStyle}>
-                name="vlc"
+                <Feather name="cast" size={22} />
-                size={18}
+                <CastButton tintColor="transparent" />
-                color={animatedTextStyle.color}
+              </Animated.Text>
-              />
+            )}
-            </Animated.Text>
+            {!client && settings?.openInVLC && (
+              <Animated.Text style={animatedTextStyle}>
+                <MaterialCommunityIcons
+                  name="vlc"
+                  size={18}
+                  color={animatedTextStyle.color}
+                />
+              </Animated.Text>
+            )}
           </View>
         </View>
       </TouchableOpacity>

components/PreviousServersList.tsx

@@ -0,0 +1,48 @@
+import React, { useMemo } from "react";
+import { View } from "react-native";
+import { useMMKVString } from "react-native-mmkv";
+import { ListGroup } from "./list/ListGroup";
+import { ListItem } from "./list/ListItem";
+
+interface Server {
+  address: string;
+}
+
+interface PreviousServersListProps {
+  onServerSelect: (server: Server) => void;
+}
+
+export const PreviousServersList: React.FC<PreviousServersListProps> = ({
+  onServerSelect,
+}) => {
+  const [_previousServers, setPreviousServers] =
+    useMMKVString("previousServers");
+
+  const previousServers = useMemo(() => {
+    return JSON.parse(_previousServers || "[]") as Server[];
+  }, [_previousServers]);
+
+  if (!previousServers.length) return null;
+
+  return (
+    <View>
+      <ListGroup title="previous servers" className="mt-4">
+        {previousServers.map((s) => (
+          <ListItem
+            key={s.address}
+            onPress={() => onServerSelect(s)}
+            title={s.address}
+            showArrow
+          />
+        ))}
+        <ListItem
+          onPress={() => {
+            setPreviousServers("[]");
+          }}
+          title={"Clear"}
+          textColor="red"
+        />
+      </ListGroup>
+    </View>
+  );
+};

components/RoundButton.tsx

@@ -6,6 +6,7 @@ import {
   TouchableOpacity,
   TouchableOpacityProps,
 } from "react-native";
+import { useHaptic } from "@/hooks/useHaptic";
 
 interface Props extends TouchableOpacityProps {
   onPress?: () => void;
@@ -28,9 +29,11 @@ export const RoundButton: React.FC<PropsWithChildren<Props>> = ({
 }) => {
   const buttonSize = size === "large" ? "h-10 w-10" : "h-9 w-9";
   const fillColorClass = fillColor === "primary" ? "bg-purple-600" : "";
+  const lightHapticFeedback = useHaptic("light");
 
   const handlePress = () => {
     if (hapticFeedback) {
+      lightHapticFeedback();
     }
     onPress?.();
   };
@@ -96,6 +99,7 @@ export const RoundButton: React.FC<PropsWithChildren<Props>> = ({
       <BlurView
         intensity={90}
         className={`rounded-full overflow-hidden ${buttonSize} flex items-center justify-center ${fillColorClass}`}
+        {...props}
       >
         {icon ? (
           <Ionicons

components/SubtitleTrackSelector.tsx

@@ -1,10 +1,10 @@
 import { tc } from "@/utils/textTools";
 import { MediaSourceInfo } from "@jellyfin/sdk/lib/generated-client/models";
-import { useMemo, useState } from "react";
+import { useMemo } from "react";
-import { Platform, TouchableOpacity, View, Modal } from "react-native";
+import { Platform, TouchableOpacity, View } from "react-native";
+import * as DropdownMenu from "zeego/dropdown-menu";
 import { Text } from "./common/Text";
 import { SubtitleHelper } from "@/utils/SubtitleHelper";
-import { Ionicons } from "@expo/vector-icons";
 
 interface Props extends React.ComponentProps<typeof View> {
   source?: MediaSourceInfo;
@@ -20,8 +20,6 @@ export const SubtitleTrackSelector: React.FC<Props> = ({
   isTranscoding,
   ...props
 }) => {
-  const [isModalVisible, setIsModalVisible] = useState(false);
-
   const subtitleStreams = useMemo(() => {
     const subtitleHelper = new SubtitleHelper(source?.MediaStreams ?? []);
 
@@ -40,98 +38,59 @@ export const SubtitleTrackSelector: React.FC<Props> = ({
   if (subtitleStreams.length === 0) return null;
 
   return (
-    <>
+    <View
-      <View
+      className="flex col shrink justify-start place-self-start items-start"
-        className="flex col shrink justify-start place-self-start items-start"
+      style={{
-        style={{
+        minWidth: 60,
-          minWidth: 60,
+        maxWidth: 200,
-          maxWidth: 200,
+      }}
-        }}
+    >
-      >
+      <DropdownMenu.Root>
-        <View className="flex flex-col" {...props}>
+        <DropdownMenu.Trigger>
-          <Text className="opacity-50 mb-1 text-xs">Subtitle</Text>
+          <View className="flex flex-col " {...props}>
-          <TouchableOpacity
+            <Text className="opacity-50 mb-1 text-xs">Subtitle</Text>
-            className="bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between"
+            <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=" ">
-          >
+                {selectedSubtitleSteam
-            <Text>
+                  ? tc(selectedSubtitleSteam?.DisplayTitle, 7)
-              {selectedSubtitleSteam
+                  : "None"}
-                ? 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
               </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>
+        </DropdownMenu.Trigger>
-      </Modal>
+        <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/Input.tsx

@@ -7,7 +7,7 @@ export function Input(props: TextInputProps) {
   return (
     <TextInput
       ref={inputRef}
-      className="p-4 border border-neutral-800 rounded-xl bg-neutral-900"
+      className="p-4  rounded-xl bg-neutral-900"
       allowFontScaling={false}
       style={[{ color: "white" }, style]}
       placeholderTextColor={"#9CA3AF"}

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,13 +1,11 @@
-import { useRouter, useSegments } from "expo-router";
+import {useRouter, useSegments} from "expo-router";
-import React, { PropsWithChildren, useCallback, useMemo } from "react";
+import React, {PropsWithChildren, useCallback, useMemo} from "react";
-import { TouchableOpacity, TouchableOpacityProps } from "react-native";
+import {TouchableOpacity, TouchableOpacityProps} from "react-native";
-import { MovieResult, TvResult } from "@/utils/jellyseerr/server/models/Search";
+import * as ContextMenu from "zeego/context-menu";
-import { useJellyseerr } from "@/hooks/useJellyseerr";
+import {MovieResult, TvResult} from "@/utils/jellyseerr/server/models/Search";
-import {
+import {useJellyseerr} from "@/hooks/useJellyseerr";
-  hasPermission,
+import {hasPermission, Permission} from "@/utils/jellyseerr/server/lib/permissions";
-  Permission,
+import {MediaType} from "@/utils/jellyseerr/server/constants/media";
-} from "@/utils/jellyseerr/server/lib/permissions";
-import { MediaType } from "@/utils/jellyseerr/server/constants/media";
 
 interface Props extends TouchableOpacityProps {
   result: MovieResult | TvResult;
@@ -28,49 +26,78 @@ export const TouchableJellyseerrRouter: React.FC<PropsWithChildren<Props>> = ({
 }) => {
   const router = useRouter();
   const segments = useSegments();
-  const { jellyseerrApi, jellyseerrUser, requestMedia } = useJellyseerr();
+  const {jellyseerrApi, jellyseerrUser, requestMedia} = useJellyseerr()
 
   const from = segments[2];
 
   const autoApprove = useMemo(() => {
-    return (
+    return jellyseerrUser && hasPermission(
-      jellyseerrUser &&
+      Permission.AUTO_APPROVE,
-      hasPermission(Permission.AUTO_APPROVE, jellyseerrUser.permissions, {
+      jellyseerrUser.permissions,
-        type: "or",
+      {type: 'or'}
-      })
+    )
-    );
+  }, [jellyseerrApi, jellyseerrUser])
-  }, [jellyseerrApi, jellyseerrUser]);
 
-  const request = useCallback(
+  const request = useCallback(() =>
-    () =>
       requestMedia(mediaTitle, {
         mediaId: result.id,
-        mediaType: result.mediaType,
+        mediaType: result.mediaType
-      }),
+      }
+    ),
     [jellyseerrApi, result]
-  );
+  )
 
   if (from === "(home)" || from === "(search)" || from === "(libraries)")
     return (
       <>
-        <TouchableOpacity
+        <ContextMenu.Root>
-          onPress={() => {
+          <ContextMenu.Trigger>
-            // @ts-ignore
+            <TouchableOpacity
-            router.push({
+              onPress={() => {
-              pathname: `/(auth)/(tabs)/${from}/jellyseerr/page`,
+                // @ts-ignore
-              params: {
+                router.push({pathname: `/(auth)/(tabs)/${from}/jellyseerr/page`, params: {...result, mediaTitle, releaseYear, canRequest, posterSrc}});
-                ...result,
+              }}
-                mediaTitle,
+              {...props}
-                releaseYear,
+            >
-                canRequest,
+              {children}
-                posterSrc,
+            </TouchableOpacity>
-              },
+          </ContextMenu.Trigger>
-            });
+          <ContextMenu.Content
-          }}
+            avoidCollisions
-          {...props}
+            alignOffset={0}
-        >
+            collisionPadding={0}
-          {children}
+            loop={false}
-        </TouchableOpacity>
+            key={"content"}
+          >
+            <ContextMenu.Label key="label-1">Actions</ContextMenu.Label>
+            {canRequest && result.mediaType === MediaType.MOVIE && (
+                <ContextMenu.Item
+                  key="item-1"
+                  onSelect={() => {
+                    if (autoApprove) {
+                      request()
+                    }
+                  }}
+                  shouldDismissMenuOnSelect
+                >
+                  <ContextMenu.ItemTitle key="item-1-title">Request</ContextMenu.ItemTitle>
+                  <ContextMenu.ItemIcon
+                    ios={{
+                      name: "arrow.down.to.line",
+                      pointSize: 18,
+                      weight: "semibold",
+                      scale: "medium",
+                      hierarchicalColor: {
+                        dark: "purple",
+                        light: "purple",
+                      },
+                    }}
+                    androidIconName="download"
+                  />
+                </ContextMenu.Item>
+              )}
+          </ContextMenu.Content>
+        </ContextMenu.Root>
       </>
     );
 };

components/common/TouchableItemRouter.tsx

@@ -1,16 +1,24 @@
 import { useMarkAsPlayed } from "@/hooks/useMarkAsPlayed";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import {
+  BaseItemDto,
+  BaseItemPerson,
+} from "@jellyfin/sdk/lib/generated-client/models";
 import { useRouter, useSegments } from "expo-router";
-import { PropsWithChildren } from "react";
+import { PropsWithChildren, useCallback } from "react";
 import { TouchableOpacity, TouchableOpacityProps } from "react-native";
 import * as ContextMenu from "zeego/context-menu";
+import { useActionSheet } from "@expo/react-native-action-sheet";
+import * as Haptics from "expo-haptics";
 
 interface Props extends TouchableOpacityProps {
   item: BaseItemDto;
 }
 
-export const itemRouter = (item: BaseItemDto, from: string) => {
+export const itemRouter = (
-  if (item.CollectionType === "livetv") {
+  item: BaseItemDto | BaseItemPerson,
+  from: string
+) => {
+  if ("CollectionType" in item && item.CollectionType === "livetv") {
     return `/(auth)/(tabs)/${from}/livetv`;
   }
 
@@ -30,7 +38,7 @@ export const itemRouter = (item: BaseItemDto, from: string) => {
     return `/(auth)/(tabs)/${from}/artists/${item.Id}`;
   }
 
-  if (item.Type === "Person") {
+  if (item.Type === "Person" || item.Type === "Actor") {
     return `/(auth)/(tabs)/${from}/actors/${item.Id}`;
   }
 
@@ -60,17 +68,46 @@ export const TouchableItemRouter: React.FC<PropsWithChildren<Props>> = ({
 }) => {
   const router = useRouter();
   const segments = useSegments();
+  const { showActionSheetWithOptions } = useActionSheet();
+  const markAsPlayedStatus = useMarkAsPlayed(item);
 
   const from = segments[2];
 
-  const markAsPlayedStatus = useMarkAsPlayed(item);
+  const showActionSheet = useCallback(() => {
+    if (!(item.Type === "Movie" || item.Type === "Episode")) return;
 
-  if (from === "(home)" || from === "(search)" || from === "(libraries)")
+    const options = ["Mark as Played", "Mark as Not Played", "Cancel"];
+    const cancelButtonIndex = 2;
+
+    showActionSheetWithOptions(
+      {
+        options,
+        cancelButtonIndex,
+      },
+      async (selectedIndex) => {
+        if (selectedIndex === 0) {
+          await markAsPlayedStatus(true);
+          Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+        } else if (selectedIndex === 1) {
+          await markAsPlayedStatus(false);
+          Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+        }
+      }
+    );
+  }, [showActionSheetWithOptions, markAsPlayedStatus]);
+
+  if (
+    from === "(home)" ||
+    from === "(search)" ||
+    from === "(libraries)" ||
+    from === "(favorites)"
+  )
     return (
       <TouchableOpacity
+        onLongPress={showActionSheet}
         onPress={() => {
           const url = itemRouter(item, from);
-          // @ts-ignore
+          // @ts-expect-error
           router.push(url);
         }}
         {...props}

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 { 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(s.bytesToReadable());
+  }, [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,113 @@
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { useHaptic } from "@/hooks/useHaptic";
+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 successHapticFeedback = useHaptic("success");
+
+  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);
+      successHapticFeedback();
+    }
+  }, [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>
+          <DownloadSize items={[item]} />
+        </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,114 @@
+import {
+  ActionSheetProvider,
+  useActionSheet,
+} from "@expo/react-native-action-sheet";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { useHaptic } from "@/hooks/useHaptic";
+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 successHapticFeedback = useHaptic("success");
+
+  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);
+      successHapticFeedback();
+    }
+  }, [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>
+      )}
+      <View className="w-28">
+        <ItemCardText item={item} />
+      </View>
+      <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/Favorites.tsx

@@ -0,0 +1,119 @@
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
+import { useAtom } from "jotai";
+import { View } from "react-native";
+import { ScrollingCollectionList } from "./ScrollingCollectionList";
+import { useCallback } from "react";
+import { BaseItemKind } from "@jellyfin/sdk/lib/generated-client";
+
+export const Favorites = () => {
+  const [api] = useAtom(apiAtom);
+  const [user] = useAtom(userAtom);
+
+  const fetchFavoritesByType = useCallback(
+    async (itemType: BaseItemKind) => {
+      const response = await getItemsApi(api!).getItems({
+        userId: user?.Id!,
+        sortBy: ["SeriesSortName", "SortName"],
+        sortOrder: ["Ascending"],
+        filters: ["IsFavorite"],
+        recursive: true,
+        fields: ["PrimaryImageAspectRatio"],
+        collapseBoxSetItems: false,
+        excludeLocationTypes: ["Virtual"],
+        enableTotalRecordCount: false,
+        limit: 20,
+        includeItemTypes: [itemType],
+      });
+      return response.data.Items || [];
+    },
+    [api, user]
+  );
+
+  const fetchFavoriteSeries = useCallback(
+    () => fetchFavoritesByType("Series"),
+    [fetchFavoritesByType]
+  );
+  const fetchFavoriteMovies = useCallback(
+    () => fetchFavoritesByType("Movie"),
+    [fetchFavoritesByType]
+  );
+  const fetchFavoriteEpisodes = useCallback(
+    () => fetchFavoritesByType("Episode"),
+    [fetchFavoritesByType]
+  );
+  const fetchFavoriteVideos = useCallback(
+    () => fetchFavoritesByType("Video"),
+    [fetchFavoritesByType]
+  );
+  const fetchFavoriteBoxsets = useCallback(
+    () => fetchFavoritesByType("BoxSet"),
+    [fetchFavoritesByType]
+  );
+  const fetchFavoritePlaylists = useCallback(
+    () => fetchFavoritesByType("Playlist"),
+    [fetchFavoritesByType]
+  );
+  const fetchFavoriteMusicAlbum = useCallback(
+    () => fetchFavoritesByType("MusicAlbum"),
+    [fetchFavoritesByType]
+  );
+  const fetchFavoriteAudio = useCallback(
+    () => fetchFavoritesByType("Audio"),
+    [fetchFavoritesByType]
+  );
+
+  return (
+    <View className="flex flex-co gap-y-4">
+      <ScrollingCollectionList
+        queryFn={fetchFavoriteSeries}
+        queryKey={["home", "favorites", "series"]}
+        title="Series"
+        hideIfEmpty
+      />
+      <ScrollingCollectionList
+        queryFn={fetchFavoriteMovies}
+        queryKey={["home", "favorites", "movies"]}
+        title="Movies"
+        hideIfEmpty
+        orientation="vertical"
+      />
+      <ScrollingCollectionList
+        queryFn={fetchFavoriteEpisodes}
+        queryKey={["home", "favorites", "episodes"]}
+        title="Episodes"
+        hideIfEmpty
+      />
+      <ScrollingCollectionList
+        queryFn={fetchFavoriteVideos}
+        queryKey={["home", "favorites", "videos"]}
+        title="Videos"
+        hideIfEmpty
+      />
+      <ScrollingCollectionList
+        queryFn={fetchFavoriteBoxsets}
+        queryKey={["home", "favorites", "boxsets"]}
+        title="Boxsets"
+        hideIfEmpty
+      />
+      <ScrollingCollectionList
+        queryFn={fetchFavoritePlaylists}
+        queryKey={["home", "favorites", "playlists"]}
+        title="Playlists"
+        hideIfEmpty
+      />
+      <ScrollingCollectionList
+        queryFn={fetchFavoriteMusicAlbum}
+        queryKey={["home", "favorites", "musicAlbums"]}
+        title="Music Albums"
+        hideIfEmpty
+      />
+      <ScrollingCollectionList
+        queryFn={fetchFavoriteAudio}
+        queryKey={["home", "favorites", "audio"]}
+        title="Audio"
+        hideIfEmpty
+      />
+    </View>
+  );
+};

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 { useHaptic } from "@/hooks/useHaptic";
 
 interface Props extends ViewProps {}
 
@@ -83,21 +84,27 @@ export const LargeMovieCarousel: React.FC<Props> = ({ ...props }) => {
 
   const width = Dimensions.get("screen").width;
 
+  if (settings?.usePopularPlugin === false) return null;
   if (l1 || l2) return null;
   if (!popularItems) return null;
 
   return (
-    <View className="flex flex-col items-center" {...props}>
+    <View className="flex flex-col items-center mt-2" {...props}>
       <Carousel
-        autoPlay={true}
-        autoPlayInterval={3000}
-        loop={true}
         ref={ref}
+        autoPlay={false}
+        loop={true}
+        snapEnabled={true}
+        mode="parallax"
+        modeConfig={{
+          parallaxScrollingScale: 0.86,
+          parallaxScrollingOffset: 100,
+        }}
         width={width}
         height={204}
         data={popularItems}
         onProgressChange={progress}
-        renderItem={({ item, index }) => <RenderItem item={item} />}
+        renderItem={({ item, index }) => <RenderItem key={index} item={item} />}
       />
       <Pagination.Basic
         progress={progress}
@@ -121,6 +128,7 @@ const RenderItem: React.FC<{ item: BaseItemDto }> = ({ item }) => {
   const [api] = useAtom(apiAtom);
   const router = useRouter();
   const screenWidth = Dimensions.get("screen").width;
+  const lightHapticFeedback = useHaptic("light");
 
   const uri = useMemo(() => {
     if (!api) return null;
@@ -146,6 +154,7 @@ const RenderItem: React.FC<{ item: BaseItemDto }> = ({ item }) => {
   const handleRoute = useCallback(() => {
     if (!from) return;
     const url = itemRouter(item, from);
+    lightHapticFeedback();
     // @ts-ignore
     if (url) router.push(url);
   }, [item, from]);

components/home/ScrollingCollectionList.tsx

@@ -18,6 +18,7 @@ interface Props extends ViewProps {
   disabled?: boolean;
   queryKey: QueryKey;
   queryFn: QueryFunction<BaseItemDto[]>;
+  hideIfEmpty?: boolean;
 }
 
 export const ScrollingCollectionList: React.FC<Props> = ({
@@ -26,10 +27,9 @@ export const ScrollingCollectionList: React.FC<Props> = ({
   disabled = false,
   queryFn,
   queryKey,
+  hideIfEmpty = false,
   ...props
 }) => {
-  // console.log(queryKey);
-
   const { data, isLoading } = useQuery({
     queryKey: queryKey,
     queryFn,
@@ -41,8 +41,10 @@ export const ScrollingCollectionList: React.FC<Props> = ({
 
   if (disabled || !title) return null;
 
+  if (hideIfEmpty === true && data?.length === 0) return null;
+
   return (
-    <View {...props} className="">
+    <View {...props}>
       <Text className="px-4 text-lg font-bold mb-2 text-neutral-100">
         {title}
       </Text>
@@ -82,15 +84,13 @@ export const ScrollingCollectionList: React.FC<Props> = ({
       ) : (
         <ScrollView horizontal showsHorizontalScrollIndicator={false}>
           <View className="px-4 flex flex-row">
-            {data?.map((item, index) => (
+            {data?.map((item) => (
               <TouchableItemRouter
                 item={item}
-                key={index}
+                key={item.Id}
-                className={`
+                className={`mr-2 
-              mr-2 
+                  ${orientation === "horizontal" ? "w-44" : "w-28"}
-
+                `}
-              ${orientation === "horizontal" ? "w-44" : "w-28"}
-            `}
               >
                 {item.Type === "Episode" && orientation === "horizontal" && (
                   <ContinueWatchingPoster item={item} />

components/jellyseerr/Cast.tsx

@@ -0,0 +1,39 @@
+import { View, ViewProps } from "react-native";
+import { MovieDetails } from "@/utils/jellyseerr/server/models/Movie";
+import { TvDetails } from "@/utils/jellyseerr/server/models/Tv";
+import React from "react";
+import { FlashList } from "@shopify/flash-list";
+import { Text } from "@/components/common/Text";
+import PersonPoster from "@/components/jellyseerr/PersonPoster";
+
+const CastSlide: React.FC<
+  { details?: MovieDetails | TvDetails } & ViewProps
+> = ({ details, ...props }) => {
+  return (
+    details?.credits?.cast?.length &&
+    details?.credits?.cast?.length > 0 && (
+      <View {...props}>
+        <Text className="text-lg font-bold mb-2 px-4">Cast</Text>
+        <FlashList
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          data={details?.credits.cast}
+          ItemSeparatorComponent={() => <View className="w-2" />}
+          estimatedItemSize={15}
+          keyExtractor={(item) => item?.id?.toString()}
+          contentContainerStyle={{ paddingHorizontal: 16 }}
+          renderItem={({ item }) => (
+            <PersonPoster
+              id={item.id.toString()}
+              posterPath={item.profilePath}
+              name={item.name}
+              subName={item.character}
+            />
+          )}
+        />
+      </View>
+    )
+  );
+};
+
+export default CastSlide;

components/jellyseerr/DetailFacts.tsx

@@ -0,0 +1,218 @@
+import { View, ViewProps } from "react-native";
+import { MovieDetails } from "@/utils/jellyseerr/server/models/Movie";
+import { TvDetails } from "@/utils/jellyseerr/server/models/Tv";
+import { Text } from "@/components/common/Text";
+import { useMemo } from "react";
+import { useJellyseerr } from "@/hooks/useJellyseerr";
+import { uniqBy } from "lodash";
+import { TmdbRelease } from "@/utils/jellyseerr/server/api/themoviedb/interfaces";
+import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
+import CountryFlag from "react-native-country-flag";
+import { ANIME_KEYWORD_ID } from "@/utils/jellyseerr/server/api/themoviedb/constants";
+
+interface Release {
+  certification: string;
+  iso_639_1?: string;
+  note?: string;
+  release_date: string;
+  type: number;
+}
+
+const dateOpts: Intl.DateTimeFormatOptions = {
+  year: "numeric",
+  month: "long",
+  day: "numeric",
+};
+
+const Facts: React.FC<
+  { title: string; facts?: string[] | React.ReactNode[] } & ViewProps
+> = ({ title, facts, ...props }) =>
+  facts &&
+  facts?.length > 0 && (
+    <View className="flex flex-row justify-between py-2" {...props}>
+      <Text className="font-bold">{title}</Text>
+
+      <View className="flex flex-col items-end">
+        {facts.map((f, idx) =>
+          typeof f === "string" ? <Text key={idx}>{f}</Text> : f
+        )}
+      </View>
+    </View>
+  );
+
+const Fact: React.FC<{ title: string; fact?: string | null } & ViewProps> = ({
+  title,
+  fact,
+  ...props
+}) => fact && <Facts title={title} facts={[fact]} {...props} />;
+
+const DetailFacts: React.FC<
+  { details?: MovieDetails | TvDetails } & ViewProps
+> = ({ details, className, ...props }) => {
+  const { jellyseerrUser } = useJellyseerr();
+
+  const locale = useMemo(() => {
+    return jellyseerrUser?.settings?.locale || "en";
+  }, [jellyseerrUser]);
+
+  const region = useMemo(
+    () => jellyseerrUser?.settings?.region || "US",
+    [jellyseerrUser]
+  );
+
+  const releases = useMemo(
+    () =>
+      (details as MovieDetails)?.releases?.results.find(
+        (r: TmdbRelease) => r.iso_3166_1 === region
+      )?.release_dates as TmdbRelease["release_dates"],
+    [details]
+  );
+
+  // Release date types:
+  // 1. Premiere
+  // 2. Theatrical (limited)
+  // 3. Theatrical
+  // 4. Digital
+  // 5. Physical
+  // 6. TV
+  const filteredReleases = useMemo(
+    () =>
+      uniqBy(
+        releases?.filter((r: Release) => r.type > 2 && r.type < 6),
+        "type"
+      ),
+    [releases]
+  );
+
+  const firstAirDate = useMemo(() => {
+    const firstAirDate = (details as TvDetails)?.firstAirDate;
+    if (firstAirDate) {
+      return new Date(firstAirDate).toLocaleDateString(
+        `${locale}-${region}`,
+        dateOpts
+      );
+    }
+  }, [details]);
+
+  const nextAirDate = useMemo(() => {
+    const firstAirDate = (details as TvDetails)?.firstAirDate;
+    const nextAirDate = (details as TvDetails)?.nextEpisodeToAir?.airDate;
+    if (nextAirDate && firstAirDate !== nextAirDate) {
+      return new Date(nextAirDate).toLocaleDateString(
+        `${locale}-${region}`,
+        dateOpts
+      );
+    }
+  }, [details]);
+
+  const revenue = useMemo(
+    () =>
+      (details as MovieDetails)?.revenue?.toLocaleString?.(
+        `${locale}-${region}`,
+        { style: "currency", currency: "USD" }
+      ),
+    [details]
+  );
+
+  const budget = useMemo(
+    () =>
+      (details as MovieDetails)?.budget?.toLocaleString?.(
+        `${locale}-${region}`,
+        { style: "currency", currency: "USD" }
+      ),
+    [details]
+  );
+
+  const streamingProviders = useMemo(
+    () =>
+      details?.watchProviders?.find(
+        (provider) => provider.iso_3166_1 === region
+      )?.flatrate,
+    [details]
+  );
+
+  const networks = useMemo(() => (details as TvDetails)?.networks, [details]);
+
+  const spokenLanguage = useMemo(
+    () =>
+      details?.spokenLanguages.find(
+        (lng) => lng.iso_639_1 === details.originalLanguage
+      )?.name,
+    [details]
+  );
+
+  return (
+    details && (
+      <View className="p-4">
+        <Text className="text-lg font-bold">Details</Text>
+        <View
+          className={`${className} flex flex-col justify-center divide-y-2 divide-neutral-800`}
+          {...props}
+        >
+          <Fact title="Status" fact={details?.status} />
+          <Fact
+            title="Original Title"
+            fact={(details as TvDetails)?.originalName}
+          />
+          {details.keywords.some(
+            (keyword) => keyword.id === ANIME_KEYWORD_ID
+          ) && <Fact title="Series Type" fact="Anime" />}
+          <Facts
+            title="Release Dates"
+            facts={filteredReleases?.map?.((r: Release, idx) => (
+              <View key={idx} className="flex flex-row space-x-2 items-center">
+                {r.type === 3 ? (
+                  // Theatrical
+                  <Ionicons name="ticket" size={16} color="white" />
+                ) : r.type === 4 ? (
+                  // Digital
+                  <Ionicons name="cloud" size={16} color="white" />
+                ) : (
+                  // Physical
+                  <MaterialCommunityIcons
+                    name="record-circle-outline"
+                    size={16}
+                    color="white"
+                  />
+                )}
+                <Text>
+                  {new Date(r.release_date).toLocaleDateString(
+                    `${locale}-${region}`,
+                    dateOpts
+                  )}
+                </Text>
+              </View>
+            ))}
+          />
+          <Fact title="First Air Date" fact={firstAirDate} />
+          <Fact title="Next Air Date" fact={nextAirDate} />
+          <Fact title="Revenue" fact={revenue} />
+          <Fact title="Budget" fact={budget} />
+          <Fact title="Original Language" fact={spokenLanguage} />
+          <Facts
+            title="Production Country"
+            facts={details?.productionCountries?.map((n, idx) => (
+              <View key={idx} className="flex flex-row items-center space-x-2">
+                <CountryFlag isoCode={n.iso_3166_1} size={10} />
+                <Text>{n.name}</Text>
+              </View>
+            ))}
+          />
+          <Facts
+            title="Studios"
+            facts={uniqBy(details?.productionCompanies, "name")?.map(
+              (n) => n.name
+            )}
+          />
+          <Facts title="Network" facts={networks?.map((n) => n.name)} />
+          <Facts
+            title="Currently Streaming on"
+            facts={streamingProviders?.map((s) => s.name)}
+          />
+        </View>
+      </View>
+    )
+  );
+};
+
+export default DetailFacts;

components/jellyseerr/DiscoverSlide.tsx

@@ -71,11 +71,14 @@ const DiscoverSlide: React.FC<Props> = ({ slide }) => {
     flatData &&
     flatData?.length > 0 && (
       <View className="mb-4">
-        <Text className="font-bold text-lg mb-2">
+        <Text className="font-bold text-lg mb-2 px-4">
           {DiscoverSliderType[slide.type].toString().toTitle()}
         </Text>
         <FlashList
           horizontal
+          contentContainerStyle={{
+            paddingLeft: 16,
+          }}
           showsHorizontalScrollIndicator={false}
           keyExtractor={(item) => item!!.id.toString()}
           estimatedItemSize={250}

components/jellyseerr/JellyseerrMediaIcon.tsx

@@ -0,0 +1,37 @@
+import {useMemo} from "react";
+import {MediaType} from "@/utils/jellyseerr/server/constants/media";
+import {Feather, MaterialCommunityIcons} from "@expo/vector-icons";
+import {View, ViewProps} from "react-native";
+
+const JellyseerrMediaIcon: React.FC<{ mediaType: "tv" | "movie" } & ViewProps> = ({
+  mediaType,
+  className,
+  ...props
+}) => {
+  const style = useMemo(
+    () => mediaType === MediaType.MOVIE
+      ? 'bg-blue-600/90 border-blue-400/40'
+      : 'bg-purple-600/90 border-purple-400/40',
+    [mediaType]
+  );
+  return (
+    mediaType &&
+    <View className={`${className} border ${style} rounded-full p-1`} {...props}>
+      {mediaType === MediaType.MOVIE ? (
+        <MaterialCommunityIcons
+          name="movie-open"
+          size={16}
+          color="white"
+        />
+      ) : (
+        <Feather
+          size={16}
+          name="tv"
+          color="white"
+        />
+      )}
+    </View>
+  )
+}
+
+export default JellyseerrMediaIcon;

components/jellyseerr/JellyseerrStatusIcon.tsx

@@ -2,7 +2,6 @@ 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;
@@ -10,7 +9,7 @@ interface Props {
   onPress?: () => void;
 }
 
-const JellyseerrIconStatus: React.FC<Props & ViewProps> = ({
+const JellyseerrStatusIcon: React.FC<Props & ViewProps> = ({
   mediaStatus,
   showRequestIcon,
   onPress,
@@ -69,4 +68,4 @@ const JellyseerrIconStatus: React.FC<Props & ViewProps> = ({
   )
 }
 
-export default JellyseerrIconStatus;
+export default JellyseerrStatusIcon;

components/jellyseerr/PersonPoster.tsx

@@ -0,0 +1,42 @@
+import {TouchableOpacity, View, ViewProps} from "react-native";
+import React from "react";
+import {Text} from "@/components/common/Text";
+import Poster from "@/components/posters/Poster";
+import {useRouter, useSegments} from "expo-router";
+import {useJellyseerr} from "@/hooks/useJellyseerr";
+
+interface Props {
+  id: string
+  posterPath?: string
+  name: string
+  subName?: string
+}
+
+const PersonPoster: React.FC<Props & ViewProps> = ({
+  id,
+  posterPath,
+  name,
+  subName,
+  ...props
+}) => {
+  const {jellyseerrApi} = useJellyseerr();
+  const router = useRouter();
+  const segments = useSegments();
+  const from = segments[2];
+
+  if (from === "(home)" || from === "(search)" || from === "(libraries)")
+    return (
+      <TouchableOpacity onPress={() => router.push(`/(auth)/(tabs)/${from}/jellyseerr/${id}`)}>
+        <View className="flex flex-col w-28" {...props}>
+          <Poster
+            id={id}
+            url={jellyseerrApi?.imageProxy(posterPath, 'w600_and_h900_bestv2')}
+          />
+          <Text className="mt-2">{name}</Text>
+          {subName && <Text className="text-xs opacity-50">{subName}</Text>}
+        </View>
+      </TouchableOpacity>
+    )
+}
+
+export default PersonPoster;

components/library/LibraryItemCard.tsx

@@ -5,6 +5,7 @@ import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
 import { Ionicons } from "@expo/vector-icons";
 import {
   BaseItemDto,
+  BaseItemKind,
   CollectionType,
 } from "@jellyfin/sdk/lib/generated-client/models";
 import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
@@ -50,18 +51,52 @@ export const LibraryItemCard: React.FC<Props> = ({ library, ...props }) => {
     [library]
   );
 
+  const itemType = useMemo(() => {
+    let _itemType: BaseItemKind | undefined;
+
+    if (library.CollectionType === "movies") {
+      _itemType = "Movie";
+    } else if (library.CollectionType === "tvshows") {
+      _itemType = "Series";
+    } else if (library.CollectionType === "boxsets") {
+      _itemType = "BoxSet";
+    } else if (library.CollectionType === "music") {
+      _itemType = "MusicAlbum";
+    }
+
+    return _itemType;
+  }, [library.CollectionType]);
+
+  const itemTypeName = useMemo(() => {
+    let nameStr: string;
+
+    if (library.CollectionType === "movies") {
+      nameStr = "movies";
+    } else if (library.CollectionType === "tvshows") {
+      nameStr = "series";
+    } else if (library.CollectionType === "boxsets") {
+      nameStr = "box sets";
+    } else if (library.CollectionType === "music") {
+      nameStr = "albums";
+    } else {
+      nameStr = "items";
+    }
+
+    return nameStr;
+  }, [library.CollectionType]);
+
   const { data: itemsCount } = useQuery({
     queryKey: ["library-count", library.Id],
     queryFn: async () => {
-      if (!api) return null;
+      const response = await getItemsApi(api!).getItems({
-      const response = await getItemsApi(api).getItems({
         userId: user?.Id,
         parentId: library.Id,
+        recursive: true,
         limit: 0,
+        includeItemTypes: itemType ? [itemType] : undefined,
       });
       return response.data.TotalRecordCount;
     },
-    staleTime: 1000 * 60 * 60,
   });
 
   if (!url) return null;
@@ -80,7 +115,7 @@ export const LibraryItemCard: React.FC<Props> = ({ library, ...props }) => {
           </Text>
           {settings?.libraryOptions?.showStats && (
             <Text className="font-bold text-xs text-neutral-500 text-start ml-auto">
-              {itemsCount} items
+              {itemsCount} {itemTypeName}
             </Text>
           )}
         </View>
@@ -109,6 +144,7 @@ export const LibraryItemCard: React.FC<Props> = ({ library, ...props }) => {
                 width: "100%",
                 height: "100%",
               }}
+              cachePolicy={"memory-disk"}
             />
             <View
               style={{
@@ -128,7 +164,7 @@ export const LibraryItemCard: React.FC<Props> = ({ library, ...props }) => {
           )}
           {settings?.libraryOptions?.showStats && (
             <Text className="font-bold text-xs  text-start px-4">
-              {itemsCount} items
+              {itemsCount} {itemTypeName}
             </Text>
           )}
         </View>
@@ -145,7 +181,7 @@ export const LibraryItemCard: React.FC<Props> = ({ library, ...props }) => {
           </Text>
           {settings?.libraryOptions?.showStats && (
             <Text className="font-bold text-xs text-neutral-500 text-start px-4">
-              {itemsCount} items
+              {itemsCount} {itemTypeName}
             </Text>
           )}
         </View>

components/list/ListGroup.tsx

@@ -0,0 +1,58 @@
+import {
+  PropsWithChildren,
+  Children,
+  isValidElement,
+  cloneElement,
+  ReactElement,
+} from "react";
+import { StyleSheet, View, ViewProps, ViewStyle } from "react-native";
+import { ListItem } from "./ListItem";
+import { Text } from "../common/Text";
+
+interface Props extends ViewProps {
+  title?: string | null | undefined;
+  description?: ReactElement;
+}
+
+export const ListGroup: React.FC<PropsWithChildren<Props>> = ({
+  title,
+  children,
+  description,
+  ...props
+}) => {
+  const childrenArray = Children.toArray(children);
+
+  return (
+    <View {...props}>
+      <Text className="ml-4 mb-1 uppercase text-[#8E8D91] text-xs">
+        {title}
+      </Text>
+      <View
+        style={[]}
+        className="flex flex-col rounded-xl overflow-hidden pl-4 bg-neutral-900"
+      >
+        {Children.map(childrenArray, (child, index) => {
+          if (isValidElement<{ style?: ViewStyle }>(child)) {
+            return cloneElement(child as any, {
+              style: StyleSheet.compose(
+                child.props.style,
+                index < childrenArray.length - 1
+                  ? styles.borderBottom
+                  : undefined
+              ),
+            });
+          }
+          return child;
+        })}
+      </View>
+      {description && <View className="pl-4 mt-1">{description}</View>}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  borderBottom: {
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: "#3D3C40",
+  },
+});

components/list/ListItem.tsx

@@ -0,0 +1,124 @@
+import { PropsWithChildren, ReactNode } from "react";
+import {
+  TouchableOpacity,
+  TouchableOpacityProps,
+  View,
+  ViewProps,
+} from "react-native";
+import { Text } from "../common/Text";
+import { Ionicons } from "@expo/vector-icons";
+
+interface Props extends TouchableOpacityProps, ViewProps {
+  title?: string | null | undefined;
+  value?: string | null | undefined;
+  children?: ReactNode;
+  iconAfter?: ReactNode;
+  icon?: keyof typeof Ionicons.glyphMap;
+  showArrow?: boolean;
+  textColor?: "default" | "blue" | "red";
+  onPress?: () => void;
+}
+
+export const ListItem: React.FC<PropsWithChildren<Props>> = ({
+  title,
+  value,
+  iconAfter,
+  children,
+  showArrow = false,
+  icon,
+  textColor = "default",
+  onPress,
+  disabled = false,
+  ...props
+}) => {
+  if (onPress)
+    return (
+      <TouchableOpacity
+        disabled={disabled}
+        onPress={onPress}
+        className={`flex flex-row items-center justify-between bg-neutral-900 h-11 pr-4 ${
+          disabled ? "opacity-50" : ""
+        }`}
+        {...props}
+      >
+        <ListItemContent
+          title={title}
+          value={value}
+          icon={icon}
+          textColor={textColor}
+          showArrow={showArrow}
+          iconAfter={iconAfter}
+        >
+          {children}
+        </ListItemContent>
+      </TouchableOpacity>
+    );
+  return (
+    <View
+      className={`flex flex-row items-center justify-between bg-neutral-900 h-11 pr-4 ${
+        disabled ? "opacity-50" : ""
+      }`}
+      {...props}
+    >
+      <ListItemContent
+        title={title}
+        value={value}
+        icon={icon}
+        textColor={textColor}
+        showArrow={showArrow}
+        iconAfter={iconAfter}
+      >
+        {children}
+      </ListItemContent>
+    </View>
+  );
+};
+
+const ListItemContent = ({
+  title,
+  textColor,
+  icon,
+  value,
+  showArrow,
+  iconAfter,
+  children,
+  ...props
+}: Props) => {
+  return (
+    <>
+      <View className="flex flex-row items-center w-full">
+        {icon && (
+          <View className="border border-neutral-800 rounded-md h-8 w-8 flex items-center justify-center mr-2">
+            <Ionicons name="person-circle-outline" size={18} color="white" />
+          </View>
+        )}
+        <Text
+          className={
+            textColor === "blue"
+              ? "text-[#0584FE]"
+              : textColor === "red"
+              ? "text-red-600"
+              : "text-white"
+          }
+          numberOfLines={1}
+        >
+          {title}
+        </Text>
+        {value && (
+          <View className="ml-auto items-end">
+            <Text selectable className=" text-[#9899A1]" numberOfLines={1}>
+              {value}
+            </Text>
+          </View>
+        )}
+        {children && <View className="ml-auto">{children}</View>}
+        {showArrow && (
+          <View className={children ? "ml-1" : "ml-auto"}>
+            <Ionicons name="chevron-forward" size={18} color="#5A5960" />
+          </View>
+        )}
+      </View>
+      {iconAfter}
+    </>
+  );
+};

components/medialists/MediaListSection.tsx

@@ -61,7 +61,7 @@ export const MediaListSection: React.FC<Props> = ({
 
   return (
     <View {...props}>
-      <Text className="px-4 text-2xl font-bold mb-2 text-neutral-100">
+      <Text className="px-4 text-lg font-bold mb-2 text-neutral-100">
         {collection.Name}
       </Text>
       <InfiniteHorizontalScroll

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");
+    if (!castDevice?.deviceId) {
-    return;
+      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,55 +1,47 @@
-import {View, ViewProps} from "react-native";
+import { View, ViewProps } from "react-native";
-import {Image} from "expo-image";
+import { Image } from "expo-image";
-import {MaterialCommunityIcons} from "@expo/vector-icons";
+import { Text } from "@/components/common/Text";
-import {Text} from "@/components/common/Text";
+import { useMemo } from "react";
-import {useEffect, useMemo, useState} from "react";
+import { MovieResult, TvResult } from "@/utils/jellyseerr/server/models/Search";
-import {MovieResult, Results, TvResult} from "@/utils/jellyseerr/server/models/Search";
+import {
-import {MediaStatus, MediaType} from "@/utils/jellyseerr/server/constants/media";
+  MediaStatus,
-import {useJellyseerr} from "@/hooks/useJellyseerr";
+  MediaType,
-import {hasPermission, Permission} from "@/utils/jellyseerr/server/lib/permissions";
+} from "@/utils/jellyseerr/server/constants/media";
-import {TouchableJellyseerrRouter} from "@/components/common/JellyseerrItemRouter";
+import { useJellyseerr } from "@/hooks/useJellyseerr";
-import JellyseerrIconStatus from "@/components/icons/JellyseerrIconStatus";
+import {
+  hasPermission,
+  Permission,
+} from "@/utils/jellyseerr/server/lib/permissions";
+import { TouchableJellyseerrRouter } from "@/components/common/JellyseerrItemRouter";
+import JellyseerrStatusIcon from "@/components/jellyseerr/JellyseerrStatusIcon";
+import JellyseerrMediaIcon from "@/components/jellyseerr/JellyseerrMediaIcon";
+import { useJellyseerrCanRequest } from "@/utils/_jellyseerr/useJellyseerrCanRequest";
 interface Props extends ViewProps {
   item: MovieResult | TvResult;
 }
 
-const JellyseerrPoster: React.FC<Props> = ({
+const JellyseerrPoster: React.FC<Props> = ({ item, ...props }) => {
-  item,
+  const { jellyseerrApi } = useJellyseerr();
-  ...props
-}) => {
-  const {jellyseerrUser, jellyseerrApi} = useJellyseerr();
-  // const imageSource =
 
-  const imageSrc = useMemo(() =>
+  const imageSrc = useMemo(
-      item.posterPath ?
+    () => jellyseerrApi?.imageProxy(item.posterPath, "w300_and_h450_face"),
-        `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 title = useMemo(
-  const releaseYear = useMemo(() =>
+    () => (item.mediaType === MediaType.MOVIE ? item.title : item.name),
-    new Date(item.mediaType === MediaType.MOVIE ? item.releaseDate : item.firstAirDate).getFullYear(),
     [item]
-  )
+  );
+  const releaseYear = useMemo(
+    () =>
+      new Date(
+        item.mediaType === MediaType.MOVIE
+          ? item.releaseDate
+          : item.firstAirDate
+      ).getFullYear(),
+    [item]
+  );
 
-  const showRequestButton = useMemo(() =>
+  const canRequest = useJellyseerrCanRequest(item);
-    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
@@ -57,14 +49,14 @@ const JellyseerrPoster: React.FC<Props> = ({
       mediaTitle={title}
       releaseYear={releaseYear}
       canRequest={canRequest}
-      posterSrc={imageSrc}
+      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}}
+            source={{ uri: imageSrc }}
             cachePolicy={"memory-disk"}
             contentFit="cover"
             style={{
@@ -72,21 +64,24 @@ const JellyseerrPoster: React.FC<Props> = ({
               width: "100%",
             }}
           />
-          <JellyseerrIconStatus
+          <JellyseerrStatusIcon
             className="absolute bottom-1 right-1"
             showRequestIcon={canRequest}
             mediaStatus={item?.mediaInfo?.status}
           />
 
+          <JellyseerrMediaIcon
+            className="absolute top-1 left-1"
+            mediaType={item?.mediaType}
+          />
         </View>
         <View className="mt-2 flex flex-col">
           <Text numberOfLines={2}>{title}</Text>
-          <Text className="text-xs opacity-50">{releaseYear}</Text>
+          <Text className="text-xs opacity-50 align-bottom">{releaseYear}</Text>
         </View>
       </View>
     </TouchableJellyseerrRouter>
-  )
+  );
-}
+};
 
-
+export default JellyseerrPoster;
-export default JellyseerrPoster;

components/posters/Poster.tsx

@@ -1,19 +1,15 @@
-import {
-  BaseItemDto,
-  BaseItemPerson,
-} from "@jellyfin/sdk/lib/generated-client/models";
 import { Image } from "expo-image";
 import { View } from "react-native";
 
 type PosterProps = {
-  item?: BaseItemDto | BaseItemPerson | null;
+  id?: string | null;
   url?: string | null;
   showProgress?: boolean;
   blurhash?: string | null;
 };
 
-const Poster: React.FC<PosterProps> = ({ item, url, blurhash }) => {
+const Poster: React.FC<PosterProps> = ({ id, url, blurhash }) => {
-  if (!item)
+  if (!id && !url)
     return (
       <View
         className="border border-neutral-900"
@@ -33,8 +29,8 @@ const Poster: React.FC<PosterProps> = ({ item, url, blurhash }) => {
               }
             : null
         }
-        key={item.Id}
+        key={id}
-        id={item.Id}
+        id={id!!}
         source={
           url
             ? {

components/series/CastAndCrew.tsx

@@ -4,13 +4,14 @@ import {
   BaseItemDto,
   BaseItemPerson,
 } from "@jellyfin/sdk/lib/generated-client/models";
-import { router } from "expo-router";
+import { router, useSegments } from "expo-router";
 import { useAtom } from "jotai";
 import React, { useMemo } from "react";
 import { TouchableOpacity, View, ViewProps } from "react-native";
 import { HorizontalScroll } from "../common/HorrizontalScroll";
 import { Text } from "../common/Text";
 import Poster from "../posters/Poster";
+import { itemRouter } from "../common/TouchableItemRouter";
 
 interface Props extends ViewProps {
   item?: BaseItemDto | null;
@@ -19,6 +20,8 @@ interface Props extends ViewProps {
 
 export const CastAndCrew: React.FC<Props> = ({ item, loading, ...props }) => {
   const [api] = useAtom(apiAtom);
+  const segments = useSegments();
+  const from = segments[2];
 
   const destinctPeople = useMemo(() => {
     const people: BaseItemPerson[] = [];
@@ -33,6 +36,8 @@ export const CastAndCrew: React.FC<Props> = ({ item, loading, ...props }) => {
     return people;
   }, [item?.People]);
 
+  if (!from) return null;
+
   return (
     <View {...props} className="flex flex-col">
       <Text className="text-lg font-bold mb-2 px-4">Cast & Crew</Text>
@@ -44,11 +49,13 @@ export const CastAndCrew: React.FC<Props> = ({ item, loading, ...props }) => {
         renderItem={(i) => (
           <TouchableOpacity
             onPress={() => {
-              router.push(`/actors/${i.Id}`);
+              const url = itemRouter(i, from);
+              // @ts-ignore
+              router.push(url);
             }}
             className="flex flex-col w-28"
           >
-            <Poster item={i} url={getPrimaryImageUrl({ api, item: i })} />
+            <Poster id={i.id} url={getPrimaryImageUrl({ api, item: i })} />
             <Text className="mt-2">{i.Name}</Text>
             <Text className="text-xs opacity-50">{i.Role}</Text>
           </TouchableOpacity>

components/series/CurrentSeries.tsx

@@ -29,7 +29,7 @@ export const CurrentSeries: React.FC<Props> = ({ item, ...props }) => {
             className="flex flex-col space-y-2 w-28"
           >
             <Poster
-              item={item}
+              id={item.id}
               url={getPrimaryImageUrlById({ api, id: item.ParentId })}
             />
             <Text>{item.SeriesName}</Text>

components/series/JellyseerrSeasons.tsx

@@ -5,7 +5,7 @@ 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 JellyseerrStatusIcon from "@/components/jellyseerr/JellyseerrStatusIcon";
 import Season from "@/utils/jellyseerr/server/entity/Season";
 import {
   MediaStatus,
@@ -15,11 +15,12 @@ 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 {QueryObserverResult, RefetchOptions, 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";
+import {MovieDetails} from "@/utils/jellyseerr/server/models/Movie";
 
 const JellyseerrSeasonEpisodes: React.FC<{
   details: TvDetails;
@@ -60,7 +61,7 @@ const RenderItem = ({ item, index }: any) => {
             key={item.id}
             id={item.id}
             source={{
-              uri: jellyseerrApi?.tvStillImageProxy(item.stillPath),
+              uri: jellyseerrApi?.imageProxy(item.stillPath),
             }}
             cachePolicy={"memory-disk"}
             contentFit="cover"
@@ -100,7 +101,8 @@ const JellyseerrSeasons: React.FC<{
   isLoading: boolean;
   result?: TvResult;
   details?: TvDetails;
-}> = ({ isLoading, result, details }) => {
+  refetch:  (options?: (RefetchOptions | undefined)) => Promise<QueryObserverResult<TvDetails | MovieDetails | undefined, Error>>;
+}> = ({ isLoading, result, details, refetch }) => {
   if (!details) return null;
 
   const { jellyseerrApi, requestMedia } = useJellyseerr();
@@ -168,6 +170,21 @@ const JellyseerrSeasons: React.FC<{
     [requestAll]
   );
 
+  const requestSeason = useCallback(async (canRequest: Boolean, seasonNumber: number) => {
+    if (canRequest) {
+      requestMedia(
+        `${result?.name!!}, Season ${seasonNumber}`,
+        {
+          mediaId: details.id,
+          mediaType: MediaType.TV,
+          tvdbId: details.externalIds?.tvdbId,
+          seasons: [seasonNumber],
+        },
+        refetch
+      )
+    }
+  }, [requestMedia]);
+
   if (isLoading)
     return (
       <View>
@@ -229,24 +246,9 @@ const JellyseerrSeasons: React.FC<{
                   seasons?.find((s) => s.seasonNumber === season.seasonNumber)
                     ?.status === MediaStatus.UNKNOWN;
                 return (
-                  <JellyseerrIconStatus
+                  <JellyseerrStatusIcon
                     key={0}
-                    onPress={
+                    onPress={() => requestSeason(canRequest, season.seasonNumber)}
-                      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(

components/series/SeasonDropdown.tsx

@@ -1,8 +1,8 @@
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo } from "react";
-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 { Ionicons } from "@expo/vector-icons";
 
 type Props = {
   item: BaseItemDto;
@@ -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 (
-    <>
+    <DropdownMenu.Root>
-      <TouchableOpacity
+      <DropdownMenu.Trigger>
-        className="bg-neutral-900 rounded-2xl border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between"
+        <View className="flex flex-row">
-        onPress={() => setIsModalVisible(true)}
+          <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>
+        <DropdownMenu.Label>Seasons</DropdownMenu.Label>
-        <Ionicons
+        {seasons?.sort(sortByIndex).map((season: any) => (
-          name="chevron-down"
+          <DropdownMenu.Item
-          size={16}
+            key={season[keys.title]}
-          color="white"
+            onSelect={() => onSelect(season)}
-          style={{ opacity: 0.5, marginLeft: 8 }}
+          >
-        />
+            <DropdownMenu.ItemTitle>
-      </TouchableOpacity>
+              {season[keys.title]}
-
+            </DropdownMenu.ItemTitle>
-      <Modal
+          </DropdownMenu.Item>
-        visible={isModalVisible}
+        ))}
-        transparent
+      </DropdownMenu.Content>
-        animationType="slide"
+    </DropdownMenu.Root>
-        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>
-    </>
   );
 };

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;
@@ -141,6 +143,19 @@ export const SeasonPicker: React.FC<Props> = ({ item, initialSeasonIndex }) => {
             }));
           }}
         />
+        {episodes?.length || 0 > 0 ? (
+          <DownloadItems
+            title="Download Season"
+            className="ml-2"
+            items={episodes || []}
+            MissingDownloadIconComponent={() => (
+              <Ionicons name="download" size={20} color="white" />
+            )}
+            DownloadedIconComponent={() => (
+              <Ionicons name="download" size={20} color="#9333ea" />
+            )}
+          />
+        ) : null}
       </View>
       <View className="px-4 flex flex-col mt-4">
         {isFetching ? (
@@ -178,6 +193,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