wip

.github/ISSUE_TEMPLATE/bug_report.md

@@ -2,7 +2,7 @@
 name: Bug report
 about: Create a report to help us improve
 title: ''
-labels: '❌ bug'
+labels: ''
 assignees: ''
 
 ---

.github/ISSUE_TEMPLATE/feature_request.md

@@ -2,7 +2,7 @@
 name: Feature request
 about: Suggest an idea for this project
 title: ''
-labels: '✨ enhancement'
+labels: ''
 assignees: ''
 
 ---

README.md

@@ -13,8 +13,7 @@ Welcome to Streamyfin, a simple and user-friendly Jellyfin client built with Exp
 
 ## 🌟 Features
 
-- 🚀 **Skp intro / credits support**
-- 🖼️ **Trickplay images**: The new golden standard for chapter previews when seeking.
+- 📱 **Native video player**: Playback with the platform native video player. With support for subtitles, playback speed control, and more.
 - 📺 **Picture in Picture** (iPhone only): Watch movies in PiP mode on your iPhone.
 - 🔊 **Background audio**: Stream music in the background, even when locking the phone.
 - 📥 **Download media** (Experimental): Save your media locally and watch it offline.
@@ -136,7 +135,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/zyGKHJZvv4](https://discord.gg/aJvAYeycyY)
 
 If you have questions or need support, feel free to reach out:
 
@@ -154,7 +153,3 @@ I'd like to thank the following people and projects for their contributions to S
 - [Reiverr](https://github.com/aleksilassila/reiverr) for great help with understanding the Jellyfin API.
 - [Jellyfin TS SDK](https://github.com/jellyfin/jellyfin-sdk-typescript) for the TypeScript SDK.
 - The Jellyfin devs for always being helpful in the Discord.
-
-## Star History
-
-[![Star History Chart](https://api.star-history.com/svg?repos=fredrikburmester/streamyfin&type=Date)](https://star-history.com/#fredrikburmester/streamyfin&Date)

app.json

@@ -2,7 +2,7 @@
   "expo": {
     "name": "Streamyfin",
     "slug": "streamyfin",
-    "version": "0.17.0",
+    "version": "0.12.0",
     "orientation": "default",
     "icon": "./assets/images/icon.png",
     "scheme": "streamyfin",
@@ -19,7 +19,7 @@
       "infoPlist": {
         "NSCameraUsageDescription": "The app needs access to your camera to scan barcodes.",
         "NSMicrophoneUsageDescription": "The app needs access to your microphone.",
-        "UIBackgroundModes": ["audio", "fetch"],
+        "UIBackgroundModes": ["audio"],
         "NSLocalNetworkUsageDescription": "The app needs access to your local network to connect to your Jellyfin server.",
         "NSAppTransportSecurity": {
           "NSAllowsArbitraryLoads": true
@@ -33,7 +33,7 @@
     },
     "android": {
       "jsEngine": "hermes",
-      "versionCode": 42,
+      "versionCode": 36,
       "adaptiveIcon": {
         "foregroundImage": "./assets/images/icon.png"
       },
@@ -43,6 +43,11 @@
         "android.permission.FOREGROUND_SERVICE_MEDIA_PLAYBACK"
       ]
     },
+    "web": {
+      "bundler": "metro",
+      "output": "static",
+      "favicon": "./assets/images/favicon.png"
+    },
     "plugins": [
       "expo-router",
       "expo-font",
@@ -77,7 +82,7 @@
         "expo-build-properties",
         {
           "ios": {
-            "deploymentTarget": "15.6"
+            "deploymentTarget": "14.0"
           },
           "android": {
             "android": {

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

@@ -1,14 +1,12 @@
 import { Chromecast } from "@/components/Chromecast";
 import { HeaderBackButton } from "@/components/common/HeaderBackButton";
 import { nestedTabPageScreenOptions } from "@/components/stacks/NestedTabPageStack";
-import { useDownload } from "@/providers/DownloadProvider";
-import { Feather } from "@expo/vector-icons";
+import { Feather, Ionicons } from "@expo/vector-icons";
 import { Stack, useRouter } from "expo-router";
 import { Platform, TouchableOpacity, View } from "react-native";
 
 export default function IndexLayout() {
   const router = useRouter();
-
   return (
     <Stack>
       <Stack.Screen
@@ -20,16 +18,39 @@ export default function IndexLayout() {
           headerBlurEffect: "prominent",
           headerTransparent: Platform.OS === "ios" ? true : false,
           headerShadowVisible: false,
+          headerLeft: () => (
+            <TouchableOpacity
+              style={{
+                marginRight: Platform.OS === "android" ? 17 : 0,
+              }}
+              onPress={() => {
+                router.push("/(auth)/downloads");
+              }}
+            >
+              <Feather name="download" color={"white"} size={22} />
+            </TouchableOpacity>
+          ),
           headerRight: () => (
             <View className="flex flex-row items-center space-x-2">
+              <TouchableOpacity
+                onPress={() => {
+                  router.push("/(auth)/syncplay");
+                }}
+                style={{
+                  marginRight: 8,
+                }}
+              >
+                <Ionicons name="people" color={"white"} size={22} />
+              </TouchableOpacity>
               <Chromecast />
               <TouchableOpacity
                 onPress={() => {
                   router.push("/(auth)/settings");
                 }}
-                className="p-2 "
               >
-                <Feather name="settings" color={"white"} size={22} />
+                <View className="h-10 aspect-square flex items-center justify-center rounded">
+                  <Feather name="settings" color={"white"} size={22} />
+                </View>
               </TouchableOpacity>
             </View>
           ),
@@ -47,19 +68,16 @@ export default function IndexLayout() {
           title: "Settings",
         }}
       />
+      <Stack.Screen
+        name="syncplay"
+        options={{
+          title: "Syncplay",
+          presentation: "modal",
+        }}
+      />
       {Object.entries(nestedTabPageScreenOptions).map(([name, options]) => (
         <Stack.Screen key={name} name={name} options={options} />
       ))}
-      <Stack.Screen
-        name="collections/[collectionId]"
-        options={{
-          title: "",
-          headerShown: true,
-          headerBlurEffect: "prominent",
-          headerTransparent: Platform.OS === "ios" ? true : false,
-          headerShadowVisible: false,
-        }}
-      />
     </Stack>
   );
 }

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

@@ -1,23 +1,32 @@
 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 { useDownload } from "@/providers/DownloadProvider";
+import { Loader } from "@/components/Loader";
+import { runningProcesses } from "@/utils/atoms/downloads";
 import { queueAtom } from "@/utils/atoms/queue";
-import { useSettings } from "@/utils/atoms/settings";
 import { Ionicons } from "@expo/vector-icons";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { useQuery } from "@tanstack/react-query";
 import { router } from "expo-router";
+import { FFmpegKit } from "ffmpeg-kit-react-native";
 import { useAtom } from "jotai";
 import { useMemo } from "react";
 import { ScrollView, TouchableOpacity, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 const downloads: React.FC = () => {
+  const [process, setProcess] = useAtom(runningProcesses);
   const [queue, setQueue] = useAtom(queueAtom);
-  const { removeProcess, downloadedFiles } = useDownload();
 
-  const [settings] = useSettings();
+  const { data: downloadedFiles, isLoading } = useQuery({
+    queryKey: ["downloaded_files", process?.item.Id],
+    queryFn: async () =>
+      JSON.parse(
+        (await AsyncStorage.getItem("downloaded_files")) || "[]"
+      ) as BaseItemDto[],
+    staleTime: 0,
+  });
 
   const movies = useMemo(
     () => downloadedFiles?.filter((f) => f.Type === "Movie") || [],
@@ -34,8 +43,27 @@ const downloads: React.FC = () => {
     return Object.values(series);
   }, [downloadedFiles]);
 
+  const eta = useMemo(() => {
+    const length = process?.item?.RunTimeTicks || 0;
+
+    if (!process?.speed || !process?.progress) return "";
+
+    const timeLeft =
+      (length - length * (process.progress / 100)) / process.speed;
+
+    return formatNumber(timeLeft / 10000);
+  }, [process]);
+
   const insets = useSafeAreaInsets();
 
+  if (isLoading) {
+    return (
+      <View className="h-full flex flex-col items-center justify-center -mt-6">
+        <Loader />
+      </View>
+    );
+  }
+
   return (
     <ScrollView
       contentContainerStyle={{
@@ -44,80 +72,121 @@ const downloads: React.FC = () => {
         paddingBottom: 100,
       }}
     >
-      <View className="py-4">
-        <View className="mb-4 flex flex-col space-y-4 px-4">
-          {settings?.downloadMethod === "remux" && (
-            <View className="bg-neutral-900 p-4 rounded-2xl">
-              <Text className="text-lg font-bold">Queue</Text>
-              <Text className="text-xs opacity-70 text-red-600">
-                Queue and downloads will be lost on app restart
-              </Text>
-              <View className="flex flex-col space-y-2 mt-2">
-                {queue.map((q) => (
+      <View className="px-4 py-4">
+        <View className="mb-4 flex flex-col space-y-4">
+          <View>
+            <Text className="text-2xl font-bold mb-2">Queue</Text>
+            <View className="flex flex-col space-y-2">
+              {queue.map((q) => (
+                <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"
+                >
+                  <View>
+                    <Text className="font-semibold">{q.item.Name}</Text>
+                    <Text className="text-xs opacity-50">{q.item.Type}</Text>
+                  </View>
                   <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"
+                    onPress={() => {
+                      setQueue((prev) => prev.filter((i) => i.id !== q.id));
+                    }}
                   >
-                    <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>
+                    <Ionicons name="close" size={24} color="red" />
                   </TouchableOpacity>
-                ))}
-              </View>
-
-              {queue.length === 0 && (
-                <Text className="opacity-50">No items in queue</Text>
-              )}
+                </TouchableOpacity>
+              ))}
             </View>
-          )}
 
-          <ActiveDownloads />
+            {queue.length === 0 && (
+              <Text className="opacity-50">No items in queue</Text>
+            )}
+          </View>
+
+          <View>
+            <Text className="text-2xl font-bold mb-2">Active download</Text>
+            {process?.item ? (
+              <TouchableOpacity
+                onPress={() =>
+                  router.push(`/(auth)/items/page?id=${process.item.Id}`)
+                }
+                className="relative bg-neutral-900 border border-neutral-800 p-4 rounded-2xl overflow-hidden flex flex-row items-center justify-between"
+              >
+                <View>
+                  <Text className="font-semibold">{process.item.Name}</Text>
+                  <Text className="text-xs opacity-50">
+                    {process.item.Type}
+                  </Text>
+                  <View className="flex flex-row items-center space-x-2 mt-1 text-purple-600">
+                    <Text className="text-xs">
+                      {process.progress.toFixed(0)}%
+                    </Text>
+                    <Text className="text-xs">
+                      {process.speed?.toFixed(2)}x
+                    </Text>
+                    <View>
+                      <Text className="text-xs">ETA {eta}</Text>
+                    </View>
+                  </View>
+                </View>
+                <TouchableOpacity
+                  onPress={() => {
+                    FFmpegKit.cancel();
+                    setProcess(null);
+                  }}
+                >
+                  <Ionicons name="close" size={24} color="red" />
+                </TouchableOpacity>
+                <View
+                  className={`
+                  absolute bottom-0 left-0 h-1 bg-purple-600
+                `}
+                  style={{
+                    width: process.progress
+                      ? `${Math.max(5, process.progress)}%`
+                      : "5%",
+                  }}
+                ></View>
+              </TouchableOpacity>
+            ) : (
+              <Text className="opacity-50">No active downloads</Text>
+            )}
+          </View>
         </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="flex flex-row items-center justify-between mb-2">
+              <Text className="text-2xl 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: BaseItemDto) => (
-                  <View className="mb-2 last:mb-0" key={item.Id}>
-                    <MovieCard item={item} />
-                  </View>
-                ))}
+            {movies?.map((item: BaseItemDto) => (
+              <View className="mb-2 last:mb-0" key={item.Id}>
+                <MovieCard item={item} />
               </View>
-            </ScrollView>
+            ))}
           </View>
         )}
         {groupedBySeries?.map((items: BaseItemDto[], index: number) => (
           <SeriesCard items={items} key={items[0].SeriesId} />
         ))}
-        {downloadedFiles?.length === 0 && (
-          <View className="flex px-4">
-            <Text className="opacity-50">No downloaded items</Text>
-          </View>
-        )}
       </View>
     </ScrollView>
   );
 };
 
 export default downloads;
+
+/*
+ * Format a number (Date.getTime) to a human readable string ex. 2m 34s
+ * @param {number} num - The number to format
+ *
+ * @returns {string} - The formatted string
+ */
+const formatNumber = (num: number) => {
+  const minutes = Math.floor(num / 60000);
+  const seconds = ((num % 60000) / 1000).toFixed(0);
+  return `${minutes}m ${seconds}s`;
+};

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

@@ -4,17 +4,11 @@ import { LargeMovieCarousel } from "@/components/home/LargeMovieCarousel";
 import { ScrollingCollectionList } from "@/components/home/ScrollingCollectionList";
 import { Loader } from "@/components/Loader";
 import { MediaListSection } from "@/components/medialists/MediaListSection";
-import { Colors } from "@/constants/Colors";
-import { TAB_HEIGHT } from "@/constants/Values";
-import { useDownload } from "@/providers/DownloadProvider";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
-import { Feather, Ionicons } from "@expo/vector-icons";
+import { Ionicons } from "@expo/vector-icons";
 import { Api } from "@jellyfin/sdk";
-import {
-  BaseItemDto,
-  BaseItemKind,
-} from "@jellyfin/sdk/lib/generated-client/models";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import {
   getItemsApi,
   getSuggestionsApi,
@@ -23,32 +17,33 @@ import {
   getUserViewsApi,
 } from "@jellyfin/sdk/lib/utils/api";
 import NetInfo from "@react-native-community/netinfo";
-import { QueryFunction, useQuery, useQueryClient } from "@tanstack/react-query";
-import { useNavigation, useRouter } from "expo-router";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useRouter } from "expo-router";
 import { useAtom } from "jotai";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import {
   ActivityIndicator,
-  Platform,
   RefreshControl,
+  SafeAreaView,
   ScrollView,
-  TouchableOpacity,
   View,
 } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
-type ScrollingCollectionListSection = {
+type BaseSection = {
+  title: string;
+  queryKey: (string | undefined)[];
+};
+
+type ScrollingCollectionListSection = BaseSection & {
   type: "ScrollingCollectionList";
-  title?: string;
-  queryKey: (string | undefined | null)[];
-  queryFn: QueryFunction<BaseItemDto[]>;
+  queryFn: () => Promise<BaseItemDto[]>;
   orientation?: "horizontal" | "vertical";
 };
 
-type MediaListSection = {
+type MediaListSection = BaseSection & {
   type: "MediaListSection";
-  queryKey: (string | undefined)[];
-  queryFn: QueryFunction<BaseItemDto>;
+  queryFn: () => Promise<BaseItemDto>;
 };
 
 type Section = ScrollingCollectionListSection | MediaListSection;
@@ -66,29 +61,6 @@ export default function index() {
   const [isConnected, setIsConnected] = useState<boolean | null>(null);
   const [loadingRetry, setLoadingRetry] = useState(false);
 
-  const { downloadedFiles } = useDownload();
-  const navigation = useNavigation();
-
-  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();
@@ -156,67 +128,34 @@ export default function index() {
     staleTime: 60 * 1000,
   });
 
-  const collections = useMemo(() => {
-    const allow = ["movies", "tvshows"];
-    return (
-      userViews?.filter(
-        (c) => c.CollectionType && allow.includes(c.CollectionType)
-      ) || []
-    );
+  const movieCollectionId = useMemo(() => {
+    return userViews?.find((c) => c.CollectionType === "movies")?.Id;
+  }, [userViews]);
+
+  const tvShowCollectionId = useMemo(() => {
+    return userViews?.find((c) => c.CollectionType === "tvshows")?.Id;
   }, [userViews]);
 
   const refetch = useCallback(async () => {
     setLoading(true);
-    await queryClient.invalidateQueries();
+    await queryClient.refetchQueries({ queryKey: ["userViews"] });
+    await queryClient.refetchQueries({ queryKey: ["resumeItems"] });
+    await queryClient.refetchQueries({ queryKey: ["nextUp-all"] });
+    await queryClient.refetchQueries({ queryKey: ["recentlyAddedInMovies"] });
+    await queryClient.refetchQueries({ queryKey: ["recentlyAddedInTVShows"] });
+    await queryClient.refetchQueries({ queryKey: ["suggestions"] });
+    await queryClient.refetchQueries({
+      queryKey: ["sf_promoted"],
+    });
+    await queryClient.refetchQueries({
+      queryKey: ["sf_carousel"],
+    });
     setLoading(false);
-  }, []);
-
-  const createCollectionConfig = useCallback(
-    (
-      title: string,
-      queryKey: string[],
-      includeItemTypes: BaseItemKind[],
-      parentId: string | undefined
-    ): ScrollingCollectionListSection => ({
-      title,
-      queryKey,
-      queryFn: async () => {
-        if (!api) return [];
-        return (
-          (
-            await getUserLibraryApi(api).getLatestMedia({
-              userId: user?.Id,
-              limit: 50,
-              fields: ["PrimaryImageAspectRatio", "Path"],
-              imageTypeLimit: 1,
-              enableImageTypes: ["Primary", "Backdrop", "Thumb"],
-              includeItemTypes,
-              parentId,
-            })
-          ).data || []
-        );
-      },
-      type: "ScrollingCollectionList",
-    }),
-    [api, user?.Id]
-  );
+  }, [queryClient, user?.Id]);
 
   const sections = useMemo(() => {
     if (!api || !user?.Id) return [];
 
-    const latestMediaViews = collections.map((c) => {
-      const includeItemTypes: BaseItemKind[] =
-        c.CollectionType === "tvshows" ? ["Series"] : ["Movie"];
-      const title = "Recently Added in " + c.Name;
-      const queryKey = ["recentlyAddedIn" + c.CollectionType, user?.Id!, c.Id!];
-      return createCollectionConfig(
-        title || "",
-        queryKey,
-        includeItemTypes,
-        c.Id
-      );
-    });
-
     const ss: Section[] = [
       {
         title: "Continue Watching",
@@ -246,17 +185,49 @@ export default function index() {
         type: "ScrollingCollectionList",
         orientation: "horizontal",
       },
-      ...latestMediaViews,
       ...(mediaListCollections?.map(
         (ml) =>
           ({
-            title: ml.Name,
-            queryKey: ["mediaList", ml.Id!],
+            title: ml.Name || "",
+            queryKey: ["mediaList", ml.Id],
             queryFn: async () => ml,
             type: "MediaListSection",
-            orientation: "vertical",
-          } as Section)
+          } as MediaListSection)
       ) || []),
+      {
+        title: "Recently Added in Movies",
+        queryKey: ["recentlyAddedInMovies", user?.Id, movieCollectionId],
+        queryFn: async () =>
+          (
+            await getUserLibraryApi(api).getLatestMedia({
+              userId: user?.Id,
+              limit: 50,
+              fields: ["PrimaryImageAspectRatio", "Path"],
+              imageTypeLimit: 1,
+              enableImageTypes: ["Primary", "Backdrop", "Thumb"],
+              includeItemTypes: ["Movie"],
+              parentId: movieCollectionId,
+            })
+          ).data || [],
+        type: "ScrollingCollectionList",
+      },
+      {
+        title: "Recently Added in TV-Shows",
+        queryKey: ["recentlyAddedInTVShows", user?.Id, tvShowCollectionId],
+        queryFn: async () =>
+          (
+            await getUserLibraryApi(api).getLatestMedia({
+              userId: user?.Id,
+              limit: 50,
+              fields: ["PrimaryImageAspectRatio", "Path"],
+              imageTypeLimit: 1,
+              enableImageTypes: ["Primary", "Backdrop", "Thumb"],
+              includeItemTypes: ["Series"],
+              parentId: tvShowCollectionId,
+            })
+          ).data || [],
+        type: "ScrollingCollectionList",
+      },
       {
         title: "Suggested Movies",
         queryKey: ["suggestedMovies", user?.Id],
@@ -294,7 +265,13 @@ export default function index() {
       },
     ];
     return ss;
-  }, [api, user?.Id, collections, mediaListCollections]);
+  }, [
+    api,
+    user?.Id,
+    movieCollectionId,
+    tvShowCollectionId,
+    mediaListCollections,
+  ]);
 
   if (isConnected === false) {
     return (
@@ -340,7 +317,7 @@ export default function index() {
 
   const insets = useSafeAreaInsets();
 
-  if (e1 || e2 || !api)
+  if (e1 || e2)
     return (
       <View className="flex flex-col items-center justify-center h-full -mt-6">
         <Text className="text-3xl font-bold mb-2">Oops!</Text>
@@ -364,17 +341,14 @@ export default function index() {
       refreshControl={
         <RefreshControl refreshing={loading} onRefresh={refetch} />
       }
-      key={"home"}
-      contentContainerStyle={{
-        paddingLeft: insets.left,
-        paddingRight: insets.right,
-        paddingBottom: 16,
-      }}
-      style={{
-        marginBottom: TAB_HEIGHT,
-      }}
     >
-      <View className="flex flex-col space-y-4">
+      <View
+        style={{
+          paddingLeft: insets.left,
+          paddingRight: insets.right,
+        }}
+        className="flex flex-col pt-4 pb-24 gap-y-4"
+      >
         <LargeMovieCarousel />
 
         {sections.map((section, index) => {

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

@@ -2,20 +2,18 @@ import { Button } from "@/components/Button";
 import { Text } from "@/components/common/Text";
 import { ListItem } from "@/components/ListItem";
 import { SettingToggles } from "@/components/settings/SettingToggles";
-import { useDownload } from "@/providers/DownloadProvider";
+import { useFiles } from "@/hooks/useFiles";
 import { apiAtom, useJellyfin, userAtom } from "@/providers/JellyfinProvider";
 import { clearLogs, readFromLog } from "@/utils/log";
-import { getQuickConnectApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery } from "@tanstack/react-query";
 import * as Haptics from "expo-haptics";
 import { useAtom } from "jotai";
-import { Alert, ScrollView, View } from "react-native";
+import { ScrollView, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { toast } from "sonner-native";
 
 export default function settings() {
   const { logout } = useJellyfin();
-  const { deleteAllFiles } = useDownload();
+  const { deleteAllFiles } = useFiles();
 
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
@@ -28,35 +26,6 @@ export default function settings() {
 
   const insets = useSafeAreaInsets();
 
-  const openQuickConnectAuthCodeInput = () => {
-    Alert.prompt(
-      "Quick connect",
-      "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) {
-              Haptics.notificationAsync(
-                Haptics.NotificationFeedbackType.Success
-              );
-              Alert.alert("Success", "Quick connect authorized");
-            } else {
-              Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
-              Alert.alert("Error", "Invalid code");
-            }
-          } catch (e) {
-            Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
-            Alert.alert("Error", "Invalid code");
-          }
-        }
-      }
-    );
-  };
-
   return (
     <ScrollView
       contentContainerStyle={{
@@ -66,68 +35,43 @@ export default function settings() {
       }}
     >
       <View className="p-4 flex flex-col gap-y-4">
-        {/* <Button
-          onPress={() => {
-            registerBackgroundFetchAsync();
-          }}
-        >
-          registerBackgroundFetchAsync
-        </Button> */}
         <View>
           <Text className="font-bold text-lg mb-2">Information</Text>
 
-          <View className="flex flex-col rounded-xl overflow-hidden border-neutral-800 divide-y-2 divide-solid divide-neutral-800 ">
+          <View className="flex flex-col rounded-xl mb-4 overflow-hidden border-neutral-800 divide-y-2 divide-solid divide-neutral-800 ">
             <ListItem title="User" subTitle={user?.Name} />
             <ListItem title="Server" subTitle={api?.basePath} />
-            <ListItem title="Token" subTitle={api?.accessToken} />
           </View>
         </View>
 
-        <View>
-          <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">Account and storage</Text>
-          <View className="flex flex-col space-y-2">
-            <Button color="black" onPress={logout}>
-              Log out
-            </Button>
-            <Button
-              color="red"
-              onPress={async () => {
-                try {
-                  await deleteAllFiles();
-                  Haptics.notificationAsync(
-                    Haptics.NotificationFeedbackType.Success
-                  );
-                } catch (e) {
-                  Haptics.notificationAsync(
-                    Haptics.NotificationFeedbackType.Error
-                  );
-                  toast.error("Error deleting files");
-                }
-              }}
-            >
-              Delete all downloaded files
-            </Button>
-            <Button
-              color="red"
-              onPress={async () => {
-                await clearLogs();
-                Haptics.notificationAsync(
-                  Haptics.NotificationFeedbackType.Success
-                );
-              }}
-            >
-              Delete all logs
-            </Button>
-          </View>
+        <View className="flex flex-col space-y-2">
+          <Button color="black" onPress={logout}>
+            Log out
+          </Button>
+          <Button
+            color="red"
+            onPress={async () => {
+              await deleteAllFiles();
+              Haptics.notificationAsync(
+                Haptics.NotificationFeedbackType.Success
+              );
+            }}
+          >
+            Delete all downloaded files
+          </Button>
+          <Button
+            color="red"
+            onPress={async () => {
+              await clearLogs();
+              Haptics.notificationAsync(
+                Haptics.NotificationFeedbackType.Success
+              );
+            }}
+          >
+            Delete all logs
+          </Button>
         </View>
         <View>
           <Text className="font-bold text-lg mb-2">Logs</Text>

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

@@ -0,0 +1,145 @@
+import { Text } from "@/components/common/Text";
+import { List } from "@/components/List";
+import { ListItem } from "@/components/ListItem";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { Ionicons } from "@expo/vector-icons";
+import { getSyncPlayApi } from "@jellyfin/sdk/lib/utils/api";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useAtom } from "jotai";
+import { useMemo } from "react";
+import { ActivityIndicator, Alert, ScrollView, View } from "react-native";
+
+export default function page() {
+  const [api] = useAtom(apiAtom);
+  const [user] = useAtom(userAtom);
+
+  const queryClient = useQueryClient();
+
+  const name = useMemo(() => user?.Name || "", [user]);
+
+  const { data: activeGroups } = useQuery({
+    queryKey: ["syncplay", "activeGroups"],
+    queryFn: async () => {
+      if (!api) return [];
+      const res = await getSyncPlayApi(api).syncPlayGetGroups();
+      return res.data;
+    },
+    refetchInterval: 1000,
+    refetchIntervalInBackground: true,
+    refetchOnWindowFocus: true,
+    refetchOnReconnect: true,
+    refetchOnMount: true,
+  });
+
+  const createGroupMutation = useMutation({
+    mutationFn: async (GroupName: string) => {
+      if (!api) return;
+      const res = await getSyncPlayApi(api).syncPlayCreateGroup({
+        newGroupRequestDto: {
+          GroupName,
+        },
+      });
+      if (res.status !== 204) {
+        Alert.alert("Error", "Failed to create group");
+        return false;
+      }
+      return true;
+    },
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: ["syncplay", "activeGroups"] });
+    },
+  });
+
+  const createGroup = () => {
+    Alert.prompt("Create Group", "Enter a name for the group", (text) => {
+      if (text) {
+        createGroupMutation.mutate(text);
+      }
+    });
+  };
+
+  const joinGroupMutation = useMutation({
+    mutationFn: async (groupId: string) => {
+      if (!api) return;
+      const res = await getSyncPlayApi(api).syncPlayJoinGroup({
+        joinGroupRequestDto: {
+          GroupId: groupId,
+        },
+      });
+      if (res.status !== 204) {
+        Alert.alert("Error", "Failed to join group");
+        return false;
+      }
+      return true;
+    },
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: ["syncplay", "activeGroups"] });
+    },
+  });
+
+  const leaveGroupMutation = useMutation({
+    mutationFn: async () => {
+      if (!api) return;
+      const res = await getSyncPlayApi(api).syncPlayLeaveGroup();
+      if (res.status !== 204) {
+        Alert.alert("Error", "Failed to exit group");
+        return false;
+      }
+      return true;
+    },
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: ["syncplay", "activeGroups"] });
+    },
+  });
+
+  return (
+    <ScrollView>
+      <View className="px-4 py-4">
+        <View>
+          <Text className="text-lg font-bold mb-4">Join group</Text>
+          {!activeGroups?.length && (
+            <Text className="text-neutral-500 mb-4">No active groups</Text>
+          )}
+          <List>
+            {activeGroups?.map((group) => (
+              <ListItem
+                key={group.GroupId}
+                title={group.GroupName}
+                onPress={async () => {
+                  if (!group.GroupId) {
+                    return;
+                  }
+                  if (group.Participants?.includes(name)) {
+                    leaveGroupMutation.mutate();
+                  } else {
+                    joinGroupMutation.mutate(group.GroupId);
+                  }
+                }}
+                iconAfter={
+                  group.Participants?.includes(name) ? (
+                    <Ionicons name="exit-outline" size={20} color="white" />
+                  ) : (
+                    <Ionicons name="add" size={20} color="white" />
+                  )
+                }
+                subTitle={group.Participants?.join(", ")}
+              />
+            ))}
+            <ListItem
+              onPress={() => createGroup()}
+              key={"create"}
+              title={"Create group"}
+              iconAfter={
+                createGroupMutation.isPending ? (
+                  <ActivityIndicator size={20} color={"white"} />
+                ) : (
+                  <Ionicons name="add" size={20} color="white" />
+                )
+              }
+            />
+          </List>
+        </View>
+      </View>
+    </ScrollView>
+  );
+}

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

@@ -34,6 +34,8 @@ import { useAtom } from "jotai";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { FlatList, View } from "react-native";
 
+const MemoizedTouchableItemRouter = React.memo(TouchableItemRouter);
+
 const page: React.FC = () => {
   const searchParams = useLocalSearchParams();
   const { collectionId } = searchParams as { collectionId: string };
@@ -167,7 +169,7 @@ const page: React.FC = () => {
 
   const renderItem = useCallback(
     ({ item, index }: { item: BaseItemDto; index: number }) => (
-      <TouchableItemRouter
+      <MemoizedTouchableItemRouter
         key={item.Id}
         style={{
           width: "100%",
@@ -191,7 +193,7 @@ const page: React.FC = () => {
           {/* <MoviePoster item={item} /> */}
           <ItemCardText item={item} />
         </View>
-      </TouchableItemRouter>
+      </MemoizedTouchableItemRouter>
     ),
     [orientation]
   );

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

@@ -1,95 +1,13 @@
-import { Text } from "@/components/common/Text";
 import { ItemContent } from "@/components/ItemContent";
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
-import { useQuery } from "@tanstack/react-query";
 import { useLocalSearchParams } from "expo-router";
-import { useAtom } from "jotai";
-import React, { useEffect } from "react";
-import { View } from "react-native";
-import Animated, {
-  runOnJS,
-  useAnimatedStyle,
-  useSharedValue,
-  withTiming,
-} from "react-native-reanimated";
+import React, { useMemo } from "react";
 
 const Page: React.FC = () => {
-  const [api] = useAtom(apiAtom);
-  const [user] = useAtom(userAtom);
   const { id } = useLocalSearchParams() as { id: string };
 
-  const { data: item, isError } = useQuery({
-    queryKey: ["item", id],
-    queryFn: async () => {
-      const res = await getUserItemData({
-        api,
-        userId: user?.Id,
-        itemId: id,
-      });
+  const memoizedContent = useMemo(() => <ItemContent id={id} />, [id]);
 
-      return res;
-    },
-    enabled: !!id && !!api,
-    staleTime: 60 * 1000 * 5, // 5 minutes
-  });
-
-  const opacity = useSharedValue(1);
-  const animatedStyle = useAnimatedStyle(() => {
-    return {
-      opacity: opacity.value,
-    };
-  });
-
-  const fadeOut = (callback: any) => {
-    opacity.value = withTiming(0, { duration: 300 }, (finished) => {
-      if (finished) {
-        runOnJS(callback)();
-      }
-    });
-  };
-
-  const fadeIn = (callback: any) => {
-    opacity.value = withTiming(1, { duration: 300 }, (finished) => {
-      if (finished) {
-        runOnJS(callback)();
-      }
-    });
-  };
-  useEffect(() => {
-    if (item) {
-      fadeOut(() => {});
-    } else {
-      fadeIn(() => {});
-    }
-  }, [item]);
-
-  if (isError)
-    return (
-      <View className="flex flex-col items-center justify-center h-screen w-screen">
-        <Text>Could not load item</Text>
-      </View>
-    );
-
-  return (
-    <View className="flex flex-1 relative">
-      <Animated.View
-        pointerEvents={"none"}
-        style={[animatedStyle]}
-        className="absolute top-0 left-0 flex flex-col items-start h-screen w-screen px-4 z-50 bg-black"
-      >
-        <View className="h-[350px] bg-transparent rounded-lg mb-4 w-full"></View>
-        <View className="h-6 bg-neutral-900 rounded mb-1 w-12"></View>
-        <View className="h-12 bg-neutral-900 rounded-lg mb-1 w-1/2"></View>
-        <View className="h-12 bg-neutral-900 rounded-lg w-2/3 mb-10"></View>
-        <View className="h-4 bg-neutral-900 rounded-lg mb-1 w-full"></View>
-        <View className="h-12 bg-neutral-900 rounded-lg mb-1 w-full"></View>
-        <View className="h-12 bg-neutral-900 rounded-lg mb-1 w-full"></View>
-        <View className="h-4 bg-neutral-900 rounded-lg mb-1 w-1/4"></View>
-      </Animated.View>
-      {item && <ItemContent item={item} />}
-    </View>
-  );
+  return memoizedContent;
 };
 
-export default Page;
+export default React.memo(Page);

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

@@ -1,49 +0,0 @@
-import type {
-  MaterialTopTabNavigationEventMap,
-  MaterialTopTabNavigationOptions,
-} from "@react-navigation/material-top-tabs";
-import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";
-import { ParamListBase, TabNavigationState } from "@react-navigation/native";
-import { Stack, withLayoutContext } from "expo-router";
-import React from "react";
-
-const { Navigator } = createMaterialTopTabNavigator();
-
-export const Tab = withLayoutContext<
-  MaterialTopTabNavigationOptions,
-  typeof Navigator,
-  TabNavigationState<ParamListBase>,
-  MaterialTopTabNavigationEventMap
->(Navigator);
-
-const Layout = () => {
-  return (
-    <>
-      <Stack.Screen options={{ title: "Live TV" }} />
-      <Tab
-        initialRouteName="programs"
-        keyboardDismissMode="none"
-        screenOptions={{
-          tabBarBounces: true,
-          tabBarLabelStyle: { fontSize: 10 },
-          tabBarItemStyle: {
-            width: 100,
-          },
-          tabBarStyle: { backgroundColor: "black" },
-          animationEnabled: true,
-          lazy: true,
-          swipeEnabled: true,
-          tabBarIndicatorStyle: { backgroundColor: "#9334E9" },
-          tabBarScrollEnabled: true,
-        }}
-      >
-        <Tab.Screen name="programs" />
-        <Tab.Screen name="guide" />
-        <Tab.Screen name="channels" />
-        <Tab.Screen name="recordings" />
-      </Tab>
-    </>
-  );
-};
-
-export default Layout;

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

@@ -1,56 +0,0 @@
-import { ItemImage } from "@/components/common/ItemImage";
-import { Text } from "@/components/common/Text";
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { getLiveTvApi } from "@jellyfin/sdk/lib/utils/api";
-import { FlashList } from "@shopify/flash-list";
-import { useQuery } from "@tanstack/react-query";
-import { useAtom } from "jotai";
-import React from "react";
-import { View } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-
-export default function page() {
-  const [api] = useAtom(apiAtom);
-  const [user] = useAtom(userAtom);
-  const insets = useSafeAreaInsets();
-
-  const { data: channels } = useQuery({
-    queryKey: ["livetv", "channels"],
-    queryFn: async () => {
-      const res = await getLiveTvApi(api!).getLiveTvChannels({
-        startIndex: 0,
-        limit: 500,
-        enableFavoriteSorting: true,
-        userId: user?.Id,
-        addCurrentProgram: false,
-        enableUserData: false,
-        enableImageTypes: ["Primary"],
-      });
-      return res.data;
-    },
-  });
-
-  return (
-    <View className="flex flex-1">
-      <FlashList
-        data={channels?.Items}
-        estimatedItemSize={76}
-        renderItem={({ item }) => (
-          <View className="flex flex-row items-center px-4 mb-2">
-            <View className="w-22 mr-4 rounded-lg overflow-hidden">
-              <ItemImage
-                style={{
-                  aspectRatio: "1/1",
-                  width: 60,
-                  borderRadius: 8,
-                }}
-                item={item}
-              />
-            </View>
-            <Text className="font-bold">{item.Name}</Text>
-          </View>
-        )}
-      />
-    </View>
-  );
-}

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

@@ -1,168 +0,0 @@
-import { ItemImage } from "@/components/common/ItemImage";
-import { HourHeader } from "@/components/livetv/HourHeader";
-import { LiveTVGuideRow } from "@/components/livetv/LiveTVGuideRow";
-import { TAB_HEIGHT } from "@/constants/Values";
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { getLiveTvApi } from "@jellyfin/sdk/lib/utils/api";
-import { useQuery } from "@tanstack/react-query";
-import { useAtom } from "jotai";
-import React, { useCallback, useMemo, useState } from "react";
-import { Button, Dimensions, ScrollView, View } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-
-const HOUR_HEIGHT = 30;
-const ITEMS_PER_PAGE = 20;
-
-const MemoizedLiveTVGuideRow = React.memo(LiveTVGuideRow);
-
-export default function page() {
-  const [api] = useAtom(apiAtom);
-  const [user] = useAtom(userAtom);
-  const insets = useSafeAreaInsets();
-  const [date, setDate] = useState<Date>(new Date());
-  const [currentPage, setCurrentPage] = useState(1);
-
-  const { data: guideInfo } = useQuery({
-    queryKey: ["livetv", "guideInfo"],
-    queryFn: async () => {
-      const res = await getLiveTvApi(api!).getGuideInfo();
-      return res.data;
-    },
-  });
-
-  const { data: channels } = useQuery({
-    queryKey: ["livetv", "channels", currentPage],
-    queryFn: async () => {
-      const res = await getLiveTvApi(api!).getLiveTvChannels({
-        startIndex: (currentPage - 1) * ITEMS_PER_PAGE,
-        limit: ITEMS_PER_PAGE,
-        enableFavoriteSorting: true,
-        userId: user?.Id,
-        addCurrentProgram: false,
-        enableUserData: false,
-        enableImageTypes: ["Primary"],
-      });
-      return res.data;
-    },
-  });
-
-  const { data: programs } = useQuery({
-    queryKey: ["livetv", "programs", date, currentPage],
-    queryFn: async () => {
-      const startOfDay = new Date(date);
-      startOfDay.setHours(0, 0, 0, 0);
-      const endOfDay = new Date(date);
-      endOfDay.setHours(23, 59, 59, 999);
-
-      const now = new Date();
-      const isToday = startOfDay.toDateString() === now.toDateString();
-
-      const res = await getLiveTvApi(api!).getPrograms({
-        getProgramsDto: {
-          MaxStartDate: endOfDay.toISOString(),
-          MinEndDate: isToday ? now.toISOString() : startOfDay.toISOString(),
-          ChannelIds: channels?.Items?.map((c) => c.Id).filter(
-            Boolean
-          ) as string[],
-          ImageTypeLimit: 1,
-          EnableImages: false,
-          SortBy: ["StartDate"],
-          EnableTotalRecordCount: false,
-          EnableUserData: false,
-        },
-      });
-      return res.data;
-    },
-    enabled: !!channels,
-  });
-
-  const screenWidth = Dimensions.get("window").width;
-
-  const memoizedChannels = useMemo(() => channels?.Items || [], [channels]);
-
-  const [scrollX, setScrollX] = useState(0);
-
-  const handleNextPage = useCallback(() => {
-    setCurrentPage((prev) => prev + 1);
-  }, []);
-
-  const handlePrevPage = useCallback(() => {
-    setCurrentPage((prev) => Math.max(1, prev - 1));
-  }, []);
-
-  return (
-    <ScrollView
-      nestedScrollEnabled
-      contentInsetAdjustmentBehavior="automatic"
-      key={"home"}
-      contentContainerStyle={{
-        paddingLeft: insets.left,
-        paddingRight: insets.right,
-        paddingBottom: 16,
-      }}
-      style={{
-        marginBottom: TAB_HEIGHT,
-      }}
-    >
-      <View className="flex flex-row  bg-neutral-800 w-full items-end">
-        <Button
-          title="Previous"
-          onPress={handlePrevPage}
-          disabled={currentPage === 1}
-        />
-        <Button
-          title="Next"
-          onPress={handleNextPage}
-          disabled={
-            !channels || (channels?.Items?.length || 0) < ITEMS_PER_PAGE
-          }
-        />
-      </View>
-
-      <View className="flex flex-row">
-        <View className="flex flex-col w-[64px]">
-          <View
-            style={{
-              height: HOUR_HEIGHT,
-            }}
-            className="bg-neutral-800"
-          ></View>
-          {channels?.Items?.map((c, i) => (
-            <View className="h-16 w-16 mr-4 rounded-lg overflow-hidden" key={i}>
-              <ItemImage
-                style={{
-                  width: "100%",
-                  height: "100%",
-                  resizeMode: "contain",
-                }}
-                item={c}
-              />
-            </View>
-          ))}
-        </View>
-        <ScrollView
-          style={{
-            width: screenWidth - 64,
-          }}
-          horizontal
-          scrollEnabled
-          onScroll={(e) => {
-            setScrollX(e.nativeEvent.contentOffset.x);
-          }}
-        >
-          <View className="flex flex-col">
-            <HourHeader height={HOUR_HEIGHT} />
-            {channels?.Items?.map((c, i) => (
-              <MemoizedLiveTVGuideRow
-                channel={c}
-                programs={programs?.Items}
-                key={c.Id}
-                scrollX={scrollX}
-              />
-            ))}
-          </View>
-        </ScrollView>
-      </View>
-    </ScrollView>
-  );
-}

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

@@ -1,150 +0,0 @@
-import { ScrollingCollectionList } from "@/components/home/ScrollingCollectionList";
-import { TAB_HEIGHT } from "@/constants/Values";
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
-import { getLiveTvApi } from "@jellyfin/sdk/lib/utils/api";
-import { useAtom } from "jotai";
-import React from "react";
-import {
-  ScrollView,
-  View
-} from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-
-export default function page() {
-  const [api] = useAtom(apiAtom);
-  const [user] = useAtom(userAtom);
-  const insets = useSafeAreaInsets();
-
-  return (
-    <ScrollView
-      nestedScrollEnabled
-      contentInsetAdjustmentBehavior="automatic"
-      key={"home"}
-      contentContainerStyle={{
-        paddingLeft: insets.left,
-        paddingRight: insets.right,
-        paddingBottom: 16,
-        paddingTop: 8,
-      }}
-      style={{
-        marginBottom: TAB_HEIGHT,
-      }}
-    >
-      <View className="flex flex-col space-y-2">
-        <ScrollingCollectionList
-          queryKey={["livetv", "recommended"]}
-          title={"On now"}
-          queryFn={async () => {
-            if (!api) return [] as BaseItemDto[];
-            const res = await getLiveTvApi(api).getRecommendedPrograms({
-              userId: user?.Id,
-              isAiring: true,
-              limit: 24,
-              imageTypeLimit: 1,
-              enableImageTypes: ["Primary", "Thumb", "Backdrop"],
-              enableTotalRecordCount: false,
-              fields: ["ChannelInfo", "PrimaryImageAspectRatio"],
-            });
-            return res.data.Items || [];
-          }}
-          orientation="horizontal"
-        />
-        <ScrollingCollectionList
-          queryKey={["livetv", "shows"]}
-          title={"Shows"}
-          queryFn={async () => {
-            if (!api) return [] as BaseItemDto[];
-            const res = await getLiveTvApi(api).getLiveTvPrograms({
-              userId: user?.Id,
-              hasAired: false,
-              limit: 9,
-              isMovie: false,
-              isSeries: true,
-              isSports: false,
-              isNews: false,
-              isKids: false,
-              enableTotalRecordCount: false,
-              fields: ["ChannelInfo", "PrimaryImageAspectRatio"],
-              enableImageTypes: ["Primary", "Thumb", "Backdrop"],
-            });
-            return res.data.Items || [];
-          }}
-          orientation="horizontal"
-        />
-        <ScrollingCollectionList
-          queryKey={["livetv", "movies"]}
-          title={"Movies"}
-          queryFn={async () => {
-            if (!api) return [] as BaseItemDto[];
-            const res = await getLiveTvApi(api).getLiveTvPrograms({
-              userId: user?.Id,
-              hasAired: false,
-              limit: 9,
-              isMovie: true,
-              enableTotalRecordCount: false,
-              fields: ["ChannelInfo"],
-              enableImageTypes: ["Primary", "Thumb", "Backdrop"],
-            });
-            return res.data.Items || [];
-          }}
-          orientation="horizontal"
-        />
-        <ScrollingCollectionList
-          queryKey={["livetv", "sports"]}
-          title={"Sports"}
-          queryFn={async () => {
-            if (!api) return [] as BaseItemDto[];
-            const res = await getLiveTvApi(api).getLiveTvPrograms({
-              userId: user?.Id,
-              hasAired: false,
-              limit: 9,
-              isSports: true,
-              enableTotalRecordCount: false,
-              fields: ["ChannelInfo"],
-              enableImageTypes: ["Primary", "Thumb", "Backdrop"],
-            });
-            return res.data.Items || [];
-          }}
-          orientation="horizontal"
-        />
-        <ScrollingCollectionList
-          queryKey={["livetv", "kids"]}
-          title={"For Kids"}
-          queryFn={async () => {
-            if (!api) return [] as BaseItemDto[];
-            const res = await getLiveTvApi(api).getLiveTvPrograms({
-              userId: user?.Id,
-              hasAired: false,
-              limit: 9,
-              isKids: true,
-              enableTotalRecordCount: false,
-              fields: ["ChannelInfo"],
-              enableImageTypes: ["Primary", "Thumb", "Backdrop"],
-            });
-            return res.data.Items || [];
-          }}
-          orientation="horizontal"
-        />
-        <ScrollingCollectionList
-          queryKey={["livetv", "news"]}
-          title={"News"}
-          queryFn={async () => {
-            if (!api) return [] as BaseItemDto[];
-            const res = await getLiveTvApi(api).getLiveTvPrograms({
-              userId: user?.Id,
-              hasAired: false,
-              limit: 9,
-              isNews: true,
-              enableTotalRecordCount: false,
-              fields: ["ChannelInfo"],
-              enableImageTypes: ["Primary", "Thumb", "Backdrop"],
-            });
-            return res.data.Items || [];
-          }}
-          orientation="horizontal"
-        />
-      </View>
-    </ScrollView>
-  );
-}

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

@@ -1,11 +0,0 @@
-import { Text } from "@/components/common/Text";
-import React from "react";
-import { View } from "react-native";
-
-export default function page() {
-  return (
-    <View className="flex items-center justify-center h-full -mt-12">
-      <Text>Coming soon</Text>
-    </View>
-  );
-}

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

@@ -10,7 +10,6 @@ import { useQuery } from "@tanstack/react-query";
 import { Image } from "expo-image";
 import { useLocalSearchParams } from "expo-router";
 import { useAtom } from "jotai";
-import React from "react";
 import { useEffect, useMemo } from "react";
 import { View } from "react-native";
 
@@ -21,6 +20,8 @@ const page: React.FC = () => {
     seasonIndex: string;
   };
 
+  console.log("seasonIndex", seasonIndex);
+
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
 

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

@@ -1,9 +1,5 @@
 import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
-import {
-  useFocusEffect,
-  useLocalSearchParams,
-  useNavigation,
-} from "expo-router";
+import { useFocusEffect, useLocalSearchParams } from "expo-router";
 import * as ScreenOrientation from "expo-screen-orientation";
 import { useAtom } from "jotai";
 import React, { useCallback, useEffect, useLayoutEffect, useMemo } from "react";
@@ -69,11 +65,13 @@ const Page = () => {
   useEffect(() => {
     const sop = getSortOrderPreference(libraryId, sortOrderPreference);
     if (sop) {
+      console.log("getSortOrderPreference ~", sop, libraryId);
       _setSortOrder([sop]);
     } else {
       _setSortOrder([SortOrderOption.Ascending]);
     }
     const obp = getSortByPreference(libraryId, sortByPreference);
+    console.log("getSortByPreference ~", obp, libraryId);
     if (obp) {
       _setSortBy([obp]);
     } else {
@@ -85,6 +83,7 @@ const Page = () => {
     (sortBy: SortByOption[]) => {
       const sop = getSortByPreference(libraryId, sortByPreference);
       if (sortBy[0] !== sop) {
+        console.log("setSortByPreference ~", sortBy[0], libraryId);
         setSortByPreference({ ...sortByPreference, [libraryId]: sortBy[0] });
       }
       _setSortBy(sortBy);
@@ -96,6 +95,7 @@ const Page = () => {
     (sortOrder: SortOrderOption[]) => {
       const sop = getSortOrderPreference(libraryId, sortOrderPreference);
       if (sortOrder[0] !== sop) {
+        console.log("setSortOrderPreference ~", sortOrder[0], libraryId);
         setOderByPreference({
           ...sortOrderPreference,
           [libraryId]: sortOrder[0],
@@ -128,13 +128,6 @@ const Page = () => {
     staleTime: 60 * 1000,
   });
 
-  const navigation = useNavigation();
-  useEffect(() => {
-    navigation.setOptions({
-      title: library?.Name || "",
-    });
-  }, [library]);
-
   const fetchItems = useCallback(
     async ({
       pageParam,

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

@@ -195,16 +195,6 @@ export default function IndexLayout() {
       {Object.entries(nestedTabPageScreenOptions).map(([name, options]) => (
         <Stack.Screen key={name} name={name} options={options} />
       ))}
-      <Stack.Screen
-        name="collections/[collectionId]"
-        options={{
-          title: "",
-          headerShown: true,
-          headerBlurEffect: "prominent",
-          headerTransparent: Platform.OS === "ios" ? true : false,
-          headerShadowVisible: false,
-        }}
-      />
     </Stack>
   );
 }

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

@@ -19,16 +19,6 @@ export default function SearchLayout() {
       {Object.entries(nestedTabPageScreenOptions).map(([name, options]) => (
         <Stack.Screen key={name} name={name} options={options} />
       ))}
-      <Stack.Screen
-        name="collections/[collectionId]"
-        options={{
-          title: "",
-          headerShown: true,
-          headerBlurEffect: "prominent",
-          headerTransparent: Platform.OS === "ios" ? true : false,
-          headerShadowVisible: false,
-        }}
-      />
     </Stack>
   );
 }

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

@@ -8,7 +8,6 @@ import { Loader } from "@/components/Loader";
 import AlbumCover from "@/components/posters/AlbumCover";
 import MoviePoster from "@/components/posters/MoviePoster";
 import SeriesPoster from "@/components/posters/SeriesPoster";
-import { TAB_HEIGHT } from "@/constants/Values";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
 import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
@@ -226,13 +225,9 @@ export default function search() {
         contentContainerStyle={{
           paddingLeft: insets.left,
           paddingRight: insets.right,
-          paddingBottom: 16,
-        }}
-        style={{
-          marginBottom: TAB_HEIGHT,
         }}
       >
-        <View className="flex flex-col pt-2">
+        <View className="flex flex-col pt-4 pb-32">
           {Platform.OS === "android" && (
             <View className="mb-4 px-4">
               <Input
@@ -255,125 +250,165 @@ export default function search() {
           <SearchItemWrapper
             header="Movies"
             ids={movies?.map((m) => m.Id!)}
-            renderItem={(item) => (
-              <TouchableItemRouter
-                key={item.Id}
-                className="flex flex-col w-28 mr-2"
-                item={item}
-              >
-                <MoviePoster item={item} key={item.Id} />
-                <Text numberOfLines={2} className="mt-2">
-                  {item.Name}
-                </Text>
-                <Text className="opacity-50 text-xs">
-                  {item.ProductionYear}
-                </Text>
-              </TouchableItemRouter>
+            renderItem={(data) => (
+              <HorizontalScroll
+                data={data}
+                renderItem={(item) => (
+                  <TouchableItemRouter
+                    key={item.Id}
+                    className="flex flex-col w-28"
+                    item={item}
+                  >
+                    <MoviePoster item={item} key={item.Id} />
+                    <Text numberOfLines={2} className="mt-2">
+                      {item.Name}
+                    </Text>
+                    <Text className="opacity-50 text-xs">
+                      {item.ProductionYear}
+                    </Text>
+                  </TouchableItemRouter>
+                )}
+              />
             )}
           />
           <SearchItemWrapper
             ids={series?.map((m) => m.Id!)}
             header="Series"
-            renderItem={(item) => (
-              <TouchableItemRouter
-                key={item.Id}
-                item={item}
-                className="flex flex-col w-28"
-              >
-                <SeriesPoster item={item} key={item.Id} />
-                <Text numberOfLines={2} className="mt-2">
-                  {item.Name}
-                </Text>
-                <Text className="opacity-50 text-xs">
-                  {item.ProductionYear}
-                </Text>
-              </TouchableItemRouter>
+            renderItem={(data) => (
+              <HorizontalScroll
+                data={data}
+                renderItem={(item) => (
+                  <TouchableOpacity
+                    key={item.Id}
+                    onPress={() => router.push(`/series/${item.Id}`)}
+                    className="flex flex-col w-28"
+                  >
+                    <SeriesPoster item={item} key={item.Id} />
+                    <Text numberOfLines={2} className="mt-2">
+                      {item.Name}
+                    </Text>
+                    <Text className="opacity-50 text-xs">
+                      {item.ProductionYear}
+                    </Text>
+                  </TouchableOpacity>
+                )}
+              />
             )}
           />
           <SearchItemWrapper
             ids={episodes?.map((m) => m.Id!)}
             header="Episodes"
-            renderItem={(item) => (
-              <TouchableItemRouter
-                item={item}
-                key={item.Id}
-                className="flex flex-col w-44"
-              >
-                <ContinueWatchingPoster item={item} />
-                <ItemCardText item={item} />
-              </TouchableItemRouter>
+            renderItem={(data) => (
+              <HorizontalScroll
+                data={data}
+                renderItem={(item) => (
+                  <TouchableOpacity
+                    key={item.Id}
+                    onPress={() => router.push(`/items/page?id=${item.Id}`)}
+                    className="flex flex-col w-44"
+                  >
+                    <ContinueWatchingPoster item={item} />
+                    <ItemCardText item={item} />
+                  </TouchableOpacity>
+                )}
+              />
             )}
           />
           <SearchItemWrapper
             ids={collections?.map((m) => m.Id!)}
             header="Collections"
-            renderItem={(item) => (
-              <TouchableItemRouter
-                key={item.Id}
-                item={item}
-                className="flex flex-col w-28"
-              >
-                <MoviePoster item={item} key={item.Id} />
-                <Text numberOfLines={2} className="mt-2">
-                  {item.Name}
-                </Text>
-              </TouchableItemRouter>
+            renderItem={(data) => (
+              <HorizontalScroll
+                data={data}
+                renderItem={(item) => (
+                  <TouchableOpacity
+                    key={item.Id}
+                    className="flex flex-col w-28"
+                    onPress={() => router.push(`/collections/${item.Id}`)}
+                  >
+                    <MoviePoster item={item} key={item.Id} />
+                    <Text numberOfLines={2} className="mt-2">
+                      {item.Name}
+                    </Text>
+                  </TouchableOpacity>
+                )}
+              />
             )}
           />
           <SearchItemWrapper
             ids={actors?.map((m) => m.Id!)}
             header="Actors"
-            renderItem={(item) => (
-              <TouchableItemRouter
-                item={item}
-                key={item.Id}
-                className="flex flex-col w-28"
-              >
-                <MoviePoster item={item} />
-                <ItemCardText item={item} />
-              </TouchableItemRouter>
+            renderItem={(data) => (
+              <HorizontalScroll
+                data={data}
+                renderItem={(item) => (
+                  <TouchableItemRouter
+                    item={item}
+                    key={item.Id}
+                    className="flex flex-col w-28"
+                  >
+                    <MoviePoster item={item} />
+                    <ItemCardText item={item} />
+                  </TouchableItemRouter>
+                )}
+              />
             )}
           />
           <SearchItemWrapper
             ids={artists?.map((m) => m.Id!)}
             header="Artists"
-            renderItem={(item) => (
-              <TouchableItemRouter
-                item={item}
-                key={item.Id}
-                className="flex flex-col w-28"
-              >
-                <AlbumCover id={item.Id} />
-                <ItemCardText item={item} />
-              </TouchableItemRouter>
+            renderItem={(data) => (
+              <HorizontalScroll
+                data={data}
+                renderItem={(item) => (
+                  <TouchableItemRouter
+                    item={item}
+                    key={item.Id}
+                    className="flex flex-col w-28"
+                  >
+                    <AlbumCover id={item.Id} />
+                    <ItemCardText item={item} />
+                  </TouchableItemRouter>
+                )}
+              />
             )}
           />
           <SearchItemWrapper
             ids={albums?.map((m) => m.Id!)}
             header="Albums"
-            renderItem={(item) => (
-              <TouchableItemRouter
-                item={item}
-                key={item.Id}
-                className="flex flex-col w-28"
-              >
-                <AlbumCover id={item.Id} />
-                <ItemCardText item={item} />
-              </TouchableItemRouter>
+            renderItem={(data) => (
+              <HorizontalScroll
+                data={data}
+                renderItem={(item) => (
+                  <TouchableItemRouter
+                    item={item}
+                    key={item.Id}
+                    className="flex flex-col w-28"
+                  >
+                    <AlbumCover id={item.Id} />
+                    <ItemCardText item={item} />
+                  </TouchableItemRouter>
+                )}
+              />
             )}
           />
           <SearchItemWrapper
             ids={songs?.map((m) => m.Id!)}
             header="Songs"
-            renderItem={(item) => (
-              <TouchableItemRouter
-                item={item}
-                key={item.Id}
-                className="flex flex-col w-28"
-              >
-                <AlbumCover id={item.AlbumId} />
-                <ItemCardText item={item} />
-              </TouchableItemRouter>
+            renderItem={(data) => (
+              <HorizontalScroll
+                data={data}
+                renderItem={(item) => (
+                  <TouchableItemRouter
+                    item={item}
+                    key={item.Id}
+                    className="flex flex-col w-28"
+                  >
+                    <AlbumCover id={item.AlbumId} />
+                    <ItemCardText item={item} />
+                  </TouchableItemRouter>
+                )}
+              />
             )}
           />
           {loading ? (
@@ -410,7 +445,7 @@ export default function search() {
 
 type Props = {
   ids?: string[] | null;
-  renderItem: (item: BaseItemDto) => React.ReactNode;
+  renderItem: (data: BaseItemDto[]) => React.ReactNode;
   header?: string;
 };
 
@@ -448,14 +483,8 @@ const SearchItemWrapper: React.FC<Props> = ({ ids, renderItem, header }) => {
 
   return (
     <>
-      <Text className="font-bold text-lg px-4 mb-2">{header}</Text>
-      <ScrollView
-        horizontal
-        className="px-4 mb-2"
-        showsHorizontalScrollIndicator={false}
-      >
-        {data.map((item) => renderItem(item))}
-      </ScrollView>
+      <Text className="font-bold text-2xl px-4 my-2">{header}</Text>
+      {renderItem(data)}
     </>
   );
 };

app/(auth)/play-music.tsx

@@ -1,14 +0,0 @@
-import { FullScreenMusicPlayer } from "@/components/FullScreenMusicPlayer";
-import { StatusBar } from "expo-status-bar";
-import { View, ViewProps } from "react-native";
-
-interface Props extends ViewProps {}
-
-export default function page() {
-  return (
-    <View className="">
-      <StatusBar hidden={false} />
-      <FullScreenMusicPlayer />
-    </View>
-  );
-}

app/(auth)/play.tsx

@@ -1,48 +0,0 @@
-import { FullScreenVideoPlayer } from "@/components/FullScreenVideoPlayer";
-import { useSettings } from "@/utils/atoms/settings";
-import * as NavigationBar from "expo-navigation-bar";
-import * as ScreenOrientation from "expo-screen-orientation";
-import { StatusBar } from "expo-status-bar";
-import { useEffect } from "react";
-import { Platform, View, ViewProps } from "react-native";
-
-interface Props extends ViewProps {}
-
-export default function page() {
-  const [settings] = useSettings();
-
-  useEffect(() => {
-    if (settings?.autoRotate) {
-      // Don't need to do anything
-    } else if (settings?.defaultVideoOrientation) {
-      ScreenOrientation.lockAsync(settings.defaultVideoOrientation);
-    }
-
-    if (Platform.OS === "android") {
-      NavigationBar.setVisibilityAsync("hidden");
-      NavigationBar.setBehaviorAsync("overlay-swipe");
-    }
-
-    return () => {
-      if (settings?.autoRotate) {
-        ScreenOrientation.unlockAsync();
-      } else {
-        ScreenOrientation.lockAsync(
-          ScreenOrientation.OrientationLock.PORTRAIT_UP
-        );
-      }
-
-      if (Platform.OS === "android") {
-        NavigationBar.setVisibilityAsync("visible");
-        NavigationBar.setBehaviorAsync("inset-swipe");
-      }
-    };
-  }, [settings]);
-
-  return (
-    <View className="">
-      <StatusBar hidden />
-      <FullScreenVideoPlayer />
-    </View>
-  );
-}

app/_layout.tsx

@@ -1,217 +1,27 @@
-import { DownloadProvider } from "@/providers/DownloadProvider";
-import {
-  getOrSetDeviceId,
-  getTokenFromStoraage,
-  JellyfinProvider,
-} from "@/providers/JellyfinProvider";
+import { CurrentlyPlayingBar } from "@/components/CurrentlyPlayingBar";
+import { JellyfinProvider } from "@/providers/JellyfinProvider";
 import { JobQueueProvider } from "@/providers/JobQueueProvider";
 import { PlaybackProvider } from "@/providers/PlaybackProvider";
-import { orientationAtom } from "@/utils/atoms/orientation";
-import { Settings, useSettings } from "@/utils/atoms/settings";
-import { BACKGROUND_FETCH_TASK } from "@/utils/background-tasks";
-import { cancelJobById, getAllJobsByDeviceId } from "@/utils/optimize-server";
+import { useSettings } from "@/utils/atoms/settings";
 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 AsyncStorage from "@react-native-async-storage/async-storage";
 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 * as Linking from "expo-linking";
-import * as Notifications from "expo-notifications";
-import { router, Stack } from "expo-router";
+import { Stack, useRouter } from "expo-router";
 import * as ScreenOrientation from "expo-screen-orientation";
 import * as SplashScreen from "expo-splash-screen";
 import { StatusBar } from "expo-status-bar";
-import * as TaskManager from "expo-task-manager";
 import { Provider as JotaiProvider, useAtom } from "jotai";
 import { useEffect, useRef } from "react";
-import { AppState } from "react-native";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import "react-native-reanimated";
-import { Toaster } from "sonner-native";
+import * as Linking from "expo-linking";
+import { orientationAtom } from "@/utils/atoms/orientation";
 
 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 = await AsyncStorage.getItem("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 = await getTokenFromStoraage();
-  const deviceId = await getOrSetDeviceId();
-  const baseDirectory = FileSystem.documentDirectory;
-
-  if (!token || !deviceId || !baseDirectory)
-    return BackgroundFetch.BackgroundFetchResult.NoData;
-
-  console.log({
-    token,
-    url,
-    deviceId,
-  });
-
-  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;
-      console.log({
-        token,
-        deviceId,
-        baseDirectory,
-        url,
-        downloadUrl,
-      });
-
-      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: url + "download/" + job.id,
-        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 = await AsyncStorage.getItem(
-      "hasAskedForNotificationPermission"
-    );
-
-    if (hasAskedBefore !== "true") {
-      const { status } = await Notifications.requestPermissionsAsync();
-
-      if (status === "granted") {
-        console.log("Notification permissions granted.");
-      } else {
-        console.log("Notification permissions denied.");
-      }
-
-      await AsyncStorage.setItem("hasAskedForNotificationPermission", "true");
-    } else {
-      console.log("Already asked for notification permissions before.");
-    }
-  } catch (error) {
-    console.error("Error checking/requesting notification permissions:", error);
-  }
-};
-
 export default function RootLayout() {
   const [loaded] = useFonts({
     SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
@@ -239,13 +49,12 @@ function Layout() {
   const [orientation, setOrientation] = useAtom(orientationAtom);
 
   useKeepAwake();
-  useNotificationObserver();
 
   const queryClientRef = useRef<QueryClient>(
     new QueryClient({
       defaultOptions: {
         queries: {
-          staleTime: 0,
+          staleTime: 60 * 1000,
           refetchOnMount: true,
           refetchOnReconnect: true,
           refetchOnWindowFocus: true,
@@ -255,10 +64,6 @@ function Layout() {
     })
   );
 
-  useEffect(() => {
-    checkAndRequestPermissions();
-  }, []);
-
   useEffect(() => {
     if (settings?.autoRotate === true)
       ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.DEFAULT);
@@ -268,28 +73,10 @@ function Layout() {
       );
   }, [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) => {
+        console.log(event.orientationInfo.orientation);
         setOrientation(event.orientationInfo.orientation);
       }
     );
@@ -313,92 +100,34 @@ function Layout() {
     <GestureHandlerRootView style={{ flex: 1 }}>
       <QueryClientProvider client={queryClientRef.current}>
         <JobQueueProvider>
-          <DownloadProvider>
-            <ActionSheetProvider>
-              <BottomSheetModalProvider>
-                <JellyfinProvider>
-                  <PlaybackProvider>
-                    <StatusBar style="light" backgroundColor="#000" />
-                    <ThemeProvider value={DarkTheme}>
-                      <Stack
-                        initialRouteName="/home"
-                        screenOptions={{
-                          autoHideHomeIndicator: true,
+          <ActionSheetProvider>
+            <BottomSheetModalProvider>
+              <JellyfinProvider>
+                <PlaybackProvider>
+                  <StatusBar style="light" backgroundColor="#000" />
+                  <ThemeProvider value={DarkTheme}>
+                    <Stack initialRouteName="/home">
+                      <Stack.Screen
+                        name="(auth)/(tabs)"
+                        options={{
+                          headerShown: false,
+                          title: "",
                         }}
-                      >
-                        <Stack.Screen
-                          name="(auth)/(tabs)"
-                          options={{
-                            headerShown: false,
-                            title: "",
-                          }}
-                        />
-                        <Stack.Screen
-                          name="(auth)/play"
-                          options={{
-                            headerShown: false,
-                            autoHideHomeIndicator: true,
-                            title: "",
-                            animation: "fade",
-                          }}
-                        />
-                        <Stack.Screen
-                          name="(auth)/play-music"
-                          options={{
-                            headerShown: false,
-                            autoHideHomeIndicator: true,
-                            title: "",
-                            animation: "fade",
-                          }}
-                        />
-                        <Stack.Screen
-                          name="login"
-                          options={{ headerShown: false, title: "Login" }}
-                        />
-                        <Stack.Screen name="+not-found" />
-                      </Stack>
-                      <Toaster
-                        duration={4000}
-                        toastOptions={{
-                          style: {
-                            backgroundColor: "#262626",
-                            borderColor: "#363639",
-                            borderWidth: 1,
-                          },
-                          titleStyle: {
-                            color: "white",
-                          },
-                        }}
-                        closeButton
                       />
-                    </ThemeProvider>
-                  </PlaybackProvider>
-                </JellyfinProvider>
-              </BottomSheetModalProvider>
-            </ActionSheetProvider>
-          </DownloadProvider>
+                      <Stack.Screen
+                        name="login"
+                        options={{ headerShown: false, title: "Login" }}
+                      />
+                      <Stack.Screen name="+not-found" />
+                    </Stack>
+                    <CurrentlyPlayingBar />
+                  </ThemeProvider>
+                </PlaybackProvider>
+              </JellyfinProvider>
+            </BottomSheetModalProvider>
+          </ActionSheetProvider>
         </JobQueueProvider>
       </QueryClientProvider>
     </GestureHandlerRootView>
   );
 }
-
-async function saveDownloadedItemInfo(item: BaseItemDto) {
-  try {
-    const downloadedItems = await AsyncStorage.getItem("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);
-    }
-
-    await AsyncStorage.setItem("downloadedItems", JSON.stringify(items));
-  } catch (error) {
-    console.error("Failed to save downloaded item information:", error);
-  }
-}

app/login.tsx

@@ -3,8 +3,6 @@ import { Input } from "@/components/common/Input";
 import { Text } from "@/components/common/Text";
 import { apiAtom, useJellyfin } from "@/providers/JellyfinProvider";
 import { Ionicons } from "@expo/vector-icons";
-import { PublicSystemInfo } from "@jellyfin/sdk/lib/generated-client";
-import { getSystemApi } from "@jellyfin/sdk/lib/utils/api";
 import { useLocalSearchParams } from "expo-router";
 import { useAtom } from "jotai";
 import React, { useEffect, useState } from "react";
@@ -35,7 +33,6 @@ const Login: React.FC = () => {
   } = params as { apiUrl: string; username: string; password: string };
 
   const [serverURL, setServerURL] = useState<string>(_apiUrl);
-  const [serverName, setServerName] = useState<string>("");
   const [error, setError] = useState<string>("");
   const [credentials, setCredentials] = useState<{
     username: string;
@@ -47,8 +44,6 @@ const Login: React.FC = () => {
 
   useEffect(() => {
     (async () => {
-      // we might re-use the checkUrl function here to check the url as well
-      // however, I don't think it should be necessary for now
       if (_apiUrl) {
         setServer({
           address: _apiUrl,
@@ -84,93 +79,12 @@ const Login: React.FC = () => {
     }
   };
 
-  const [loadingServerCheck, setLoadingServerCheck] = useState<boolean>(false);
-
-  /**
-   * Checks the availability and validity of a Jellyfin server URL.
-   *
-   * This function attempts to connect to a Jellyfin server using the provided URL.
-   * It tries both HTTPS and HTTP protocols, with a timeout to handle long 404 responses.
-   *
-   * @param {string} url - The base URL of the Jellyfin server to check.
-   * @returns {Promise<string | undefined>} A Promise that resolves to:
-   *   - The full URL (including protocol) if a valid Jellyfin server is found.
-   *   - undefined if no valid server is found at the given URL.
-   *
-   * Side effects:
-   * - 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) {
-    url = url.endsWith("/") ? url.slice(0, -1) : url;
-    setLoadingServerCheck(true);
-
-    const protocols = ["https://", "http://"];
-    const timeout = 2000; // 2 seconds timeout for long 404 responses
-
-    try {
-      for (const protocol of protocols) {
-        const controller = new AbortController();
-        const timeoutId = setTimeout(() => controller.abort(), timeout);
-
-        try {
-          const response = await fetch(`${protocol}${url}/System/Info/Public`, {
-            mode: "cors",
-            signal: controller.signal,
-          });
-          clearTimeout(timeoutId);
-          if (response.ok) {
-            const data = (await response.json()) as PublicSystemInfo;
-            setServerName(data.ServerName || "");
-            return `${protocol}${url}`;
-          }
-        } catch (e) {
-          const error = e as Error;
-          if (error.name === "AbortError") {
-            console.log(`Request to ${protocol}${url} timed out`);
-          } else {
-            console.error(`Error checking ${protocol}${url}:`, error);
-          }
-        }
-      }
-      return undefined;
-    } finally {
-      setLoadingServerCheck(false);
-    }
-  }
-
-  /**
-   * Handles the connection attempt to a Jellyfin server.
-   *
-   * This function trims the input URL, checks its validity using the `checkUrl` function,
-   * and sets the server address if a valid connection is established.
-   *
-   * @param {string} url - The URL of the Jellyfin server to connect to.
-   *
-   * @returns {Promise<void>}
-   *
-   * Side effects:
-   * - Calls `checkUrl` to validate the server URL.
-   * - Shows an alert if the connection fails.
-   * - Sets the server address using `setServer` if the connection is successful.
-   *
-   */
-  const handleConnect = async (url: string) => {
-    url = url.trim();
-
-    const result = await checkUrl(
-      url.startsWith("http") ? new URL(url).host : url
-    );
-
-    if (result === undefined) {
-      Alert.alert(
-        "Connection failed",
-        "Could not connect to the server. Please check the URL and your network connection."
-      );
+  const handleConnect = (url: string) => {
+    if (!url.startsWith("http")) {
+      Alert.alert("Error", "URL needs to start with http or https.");
       return;
     }
-
-    setServer({ address: result });
+    setServer({ address: url.trim() });
   };
 
   const handleQuickConnect = async () => {
@@ -199,9 +113,7 @@ const Login: React.FC = () => {
             <View></View>
             <View>
               <View className="mb-4">
-                <Text className="text-3xl font-bold mb-1">
-                  {serverName || "Streamyfin"}
-                </Text>
+                <Text className="text-3xl font-bold mb-2">Streamyfin</Text>
                 <Text className="text-neutral-500 mb-2">
                   Server: {api.basePath}
                 </Text>
@@ -209,6 +121,7 @@ const Login: React.FC = () => {
                   color="black"
                   onPress={() => {
                     removeServer();
+                    setServerURL("");
                   }}
                   justify="between"
                   iconLeft={
@@ -225,6 +138,9 @@ const Login: React.FC = () => {
 
               <View className="flex flex-col space-y-2">
                 <Text className="text-2xl font-bold">Log in</Text>
+                <Text className="text-neutral-500">
+                  Log in to any user account
+                </Text>
                 <Input
                   placeholder="Username"
                   onChangeText={(text) =>
@@ -302,13 +218,11 @@ const Login: React.FC = () => {
               textContentType="URL"
               maxLength={500}
             />
+            <Text className="opacity-30">
+              Server URL requires http or https
+            </Text>
           </View>
-          <Button
-            loading={loadingServerCheck}
-            disabled={loadingServerCheck}
-            onPress={async () => await handleConnect(serverURL)}
-            className="mb-2"
-          >
+          <Button onPress={() => handleConnect(serverURL)} className="mb-2">
             Connect
           </Button>
         </View>

components/AudioTrackSelector.tsx

@@ -45,6 +45,7 @@ export const AudioTrackSelector: React.FC<Props> = ({
     }
     const index = source.DefaultAudioStreamIndex;
     if (index !== undefined && index !== null) {
+      console.log("DefaultAudioStreamIndex", index);
       onChange(index);
       return;
     }

components/ContinueWatchingPoster.tsx

@@ -5,18 +5,17 @@ import { useAtom } from "jotai";
 import { useMemo, useState } from "react";
 import { View } from "react-native";
 import { WatchedIndicator } from "./WatchedIndicator";
-import React from "react";
 
 type ContinueWatchingPosterProps = {
   item: BaseItemDto;
+  width?: number;
   useEpisodePoster?: boolean;
-  size?: "small" | "normal";
 };
 
 const ContinueWatchingPoster: React.FC<ContinueWatchingPosterProps> = ({
   item,
+  width = 176,
   useEpisodePoster = false,
-  size = "normal",
 }) => {
   const [api] = useAtom(apiAtom);
 
@@ -40,38 +39,28 @@ const ContinueWatchingPoster: React.FC<ContinueWatchingPosterProps> = ({
       else
         return `${api?.basePath}/Items/${item.Id}/Images/Primary?fillHeight=389&quality=80`;
     }
-    if (item.Type === "Program") {
-      if (item.ImageTags?.["Thumb"])
-        return `${api?.basePath}/Items/${item.Id}/Images/Thumb?fillHeight=389&quality=80&tag=${item.ImageTags?.["Thumb"]}`;
-      else
-        return `${api?.basePath}/Items/${item.Id}/Images/Primary?fillHeight=389&quality=80`;
-    }
   }, [item]);
 
-  const progress = useMemo(() => {
-    if (item.Type === "Program") {
-      const startDate = new Date(item.StartDate || "");
-      const endDate = new Date(item.EndDate || "");
-      const now = new Date();
-      const total = endDate.getTime() - startDate.getTime();
-      const elapsed = now.getTime() - startDate.getTime();
-      return (elapsed / total) * 100;
-    } else {
-      return item.UserData?.PlayedPercentage || 0;
-    }
-  }, []);
+  const [progress, setProgress] = useState(
+    item.UserData?.PlayedPercentage || 0
+  );
 
   if (!url)
     return (
-      <View className="aspect-video border border-neutral-800 w-44"></View>
+      <View
+        className="aspect-video border border-neutral-800"
+        style={{
+          width,
+        }}
+      ></View>
     );
 
   return (
     <View
-      className={`
-      relative w-44 aspect-video rounded-lg overflow-hidden border border-neutral-800
-      ${size === "small" ? "w-32" : "w-44"}
-    `}
+      style={{
+        width,
+      }}
+      className="relative aspect-video rounded-lg overflow-hidden border border-neutral-800"
     >
       <Image
         key={item.Id}
@@ -87,7 +76,10 @@ const ContinueWatchingPoster: React.FC<ContinueWatchingPosterProps> = ({
       {progress > 0 && (
         <>
           <View
-            className={`absolute w-100 bottom-0 left-0 h-1 bg-neutral-700 opacity-80 w-full`}
+            style={{
+              width: `100%`,
+            }}
+            className={`absolute bottom-0 left-0 h-1 bg-neutral-700 opacity-80 w-full`}
           ></View>
           <View
             style={{

components/CurrentlyPlayingBar.tsx

@@ -0,0 +1,313 @@
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { usePlayback } from "@/providers/PlaybackProvider";
+import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
+import { getAuthHeaders } from "@/utils/jellyfin/jellyfin";
+import { writeToLog } from "@/utils/log";
+import { Ionicons } from "@expo/vector-icons";
+import { BlurView } from "expo-blur";
+import { useRouter, useSegments } from "expo-router";
+import { useAtom } from "jotai";
+import { useEffect, useMemo } from "react";
+import { Alert, Platform, TouchableOpacity, View } from "react-native";
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
+import Video from "react-native-video";
+import { Text } from "./common/Text";
+import { Loader } from "./Loader";
+
+export const CurrentlyPlayingBar: React.FC = () => {
+  const segments = useSegments();
+  const {
+    currentlyPlaying,
+    pauseVideo,
+    playVideo,
+    stopPlayback,
+    setVolume,
+    setIsPlaying,
+    isPlaying,
+    videoRef,
+    presentFullscreenPlayer,
+    onProgress,
+    onBuffer,
+  } = usePlayback();
+
+  const [api] = useAtom(apiAtom);
+
+  const aBottom = useSharedValue(0);
+  const aPadding = useSharedValue(0);
+  const aHeight = useSharedValue(100);
+  const router = useRouter();
+  const animatedOuterStyle = useAnimatedStyle(() => {
+    return {
+      bottom: withTiming(aBottom.value, { duration: 500 }),
+      height: withTiming(aHeight.value, { duration: 500 }),
+      padding: withTiming(aPadding.value, { duration: 500 }),
+    };
+  });
+
+  const aPaddingBottom = useSharedValue(30);
+  const aPaddingInner = useSharedValue(12);
+  const aBorderRadiusBottom = useSharedValue(12);
+  const animatedInnerStyle = useAnimatedStyle(() => {
+    return {
+      padding: withTiming(aPaddingInner.value, { duration: 500 }),
+      paddingBottom: withTiming(aPaddingBottom.value, { duration: 500 }),
+      borderBottomLeftRadius: withTiming(aBorderRadiusBottom.value, {
+        duration: 500,
+      }),
+      borderBottomRightRadius: withTiming(aBorderRadiusBottom.value, {
+        duration: 500,
+      }),
+    };
+  });
+
+  const from = useMemo(() => segments[2], [segments]);
+
+  useEffect(() => {
+    if (segments.find((s) => s.includes("tabs"))) {
+      // Tab screen - i.e. home
+      aBottom.value = Platform.OS === "ios" ? 78 : 50;
+      aHeight.value = 80;
+      aPadding.value = 8;
+      aPaddingBottom.value = 8;
+      aPaddingInner.value = 8;
+    } else {
+      // Inside a normal screen
+      aBottom.value = Platform.OS === "ios" ? 0 : 0;
+      aHeight.value = Platform.OS === "ios" ? 110 : 80;
+      aPadding.value = Platform.OS === "ios" ? 0 : 8;
+      aPaddingInner.value = Platform.OS === "ios" ? 12 : 8;
+      aPaddingBottom.value = Platform.OS === "ios" ? 40 : 12;
+    }
+  }, [segments]);
+
+  const startPosition = useMemo(
+    () =>
+      currentlyPlaying?.item?.UserData?.PlaybackPositionTicks
+        ? Math.round(
+            currentlyPlaying?.item.UserData.PlaybackPositionTicks / 10000
+          )
+        : 0,
+    [currentlyPlaying?.item]
+  );
+
+  const poster = useMemo(() => {
+    if (currentlyPlaying?.item.Type === "Audio")
+      return `${api?.basePath}/Items/${currentlyPlaying.item.AlbumId}/Images/Primary?tag=${currentlyPlaying.item.AlbumPrimaryImageTag}&quality=90&maxHeight=200&maxWidth=200`;
+    else
+      return getBackdropUrl({
+        api,
+        item: currentlyPlaying?.item,
+        quality: 70,
+        width: 200,
+      });
+  }, [currentlyPlaying?.item.Id, api]);
+
+  const videoSource = useMemo(() => {
+    if (!api || !currentlyPlaying || !poster) return null;
+    return {
+      uri: currentlyPlaying.url,
+      isNetwork: true,
+      startPosition,
+      headers: getAuthHeaders(api),
+      metadata: {
+        artist: currentlyPlaying.item?.AlbumArtist
+          ? currentlyPlaying.item?.AlbumArtist
+          : undefined,
+        title: currentlyPlaying.item?.Name || "Unknown",
+        description: currentlyPlaying.item?.Overview
+          ? currentlyPlaying.item?.Overview
+          : undefined,
+        imageUri: poster,
+        subtitle: currentlyPlaying.item?.Album
+          ? currentlyPlaying.item?.Album
+          : undefined,
+      },
+    };
+  }, [currentlyPlaying, startPosition, api, poster]);
+
+  if (!api || !currentlyPlaying) return null;
+
+  return (
+    <Animated.View
+      style={[animatedOuterStyle]}
+      className="absolute left-0 w-screen"
+    >
+      <BlurView
+        intensity={Platform.OS === "android" ? 60 : 100}
+        experimentalBlurMethod={Platform.OS === "android" ? "none" : undefined}
+        className={`h-full w-full rounded-xl overflow-hidden ${
+          Platform.OS === "android" && "bg-black"
+        }`}
+      >
+        <Animated.View
+          style={[
+            { padding: 8, borderTopLeftRadius: 12, borderTopEndRadius: 12 },
+            animatedInnerStyle,
+          ]}
+          className="h-full w-full  flex flex-row items-center justify-between overflow-hidden"
+        >
+          <View className="flex flex-row items-center space-x-4 shrink">
+            <TouchableOpacity
+              onPress={() => {
+                videoRef.current?.presentFullscreenPlayer();
+              }}
+              className={`relative h-full bg-neutral-800 rounded-md overflow-hidden
+                ${
+                  currentlyPlaying.item?.Type === "Audio"
+                    ? "aspect-square"
+                    : "aspect-video"
+                }
+                `}
+            >
+              {videoSource && (
+                <Video
+                  ref={videoRef}
+                  allowsExternalPlayback
+                  style={{ width: "100%", height: "100%" }}
+                  playWhenInactive={true}
+                  playInBackground={true}
+                  showNotificationControls={true}
+                  ignoreSilentSwitch="ignore"
+                  controls={false}
+                  pictureInPicture={true}
+                  poster={
+                    poster && currentlyPlaying.item?.Type === "Audio"
+                      ? poster
+                      : undefined
+                  }
+                  debug={{
+                    enable: true,
+                    thread: true,
+                  }}
+                  onIdle={() => {
+                    console.log("IDLE");
+                  }}
+                  fullscreenAutorotate={true}
+                  onReadyForDisplay={() => {
+                    console.log("READY FOR DISPLAY");
+                  }}
+                  onProgress={(e) => onProgress(e)}
+                  subtitleStyle={{
+                    fontSize: 16,
+                  }}
+                  onBuffer={(e) => onBuffer(e.isBuffering)}
+                  source={videoSource}
+                  onRestoreUserInterfaceForPictureInPictureStop={() => {
+                    setTimeout(() => {
+                      presentFullscreenPlayer();
+                    }, 300);
+                  }}
+                  onPlaybackStateChanged={(e) => {
+                    if (e.isPlaying === true) {
+                      playVideo(false);
+                    } else if (e.isPlaying === false) {
+                      pauseVideo(false);
+                    }
+                  }}
+                  onVolumeChange={(e) => {
+                    setVolume(e.volume);
+                  }}
+                  progressUpdateInterval={4000}
+                  onError={(e) => {
+                    console.log(e);
+                    writeToLog(
+                      "ERROR",
+                      "Video playback error: " + JSON.stringify(e)
+                    );
+                    Alert.alert("Error", "Cannot play this video file.");
+                    setIsPlaying(false);
+                    // setCurrentlyPlaying(null);
+                  }}
+                  renderLoader={
+                    currentlyPlaying.item?.Type !== "Audio" && (
+                      <View className="flex flex-col items-center justify-center h-full">
+                        <Loader />
+                      </View>
+                    )
+                  }
+                />
+              )}
+            </TouchableOpacity>
+            <View className="shrink text-xs">
+              <TouchableOpacity
+                onPress={() => {
+                  if (currentlyPlaying.item?.Type === "Audio") {
+                    router.push(
+                      // @ts-ignore
+                      `/(auth)/(tabs)/${from}/albums/${currentlyPlaying.item.AlbumId}`
+                    );
+                  } else {
+                    router.push(
+                      // @ts-ignore
+                      `/(auth)/(tabs)/${from}/items/page?id=${currentlyPlaying.item?.Id}`
+                    );
+                  }
+                }}
+              >
+                <Text>{currentlyPlaying.item?.Name}</Text>
+              </TouchableOpacity>
+              {currentlyPlaying.item?.Type === "Episode" && (
+                <TouchableOpacity
+                  onPress={() => {
+                    router.push(
+                      // @ts-ignore
+                      `/(auth)/(tabs)/${from}/series/${currentlyPlaying.item.SeriesId}`
+                    );
+                  }}
+                  className="text-xs opacity-50"
+                >
+                  <Text>{currentlyPlaying.item.SeriesName}</Text>
+                </TouchableOpacity>
+              )}
+              {currentlyPlaying.item?.Type === "Movie" && (
+                <View>
+                  <Text className="text-xs opacity-50">
+                    {currentlyPlaying.item?.ProductionYear}
+                  </Text>
+                </View>
+              )}
+              {currentlyPlaying.item?.Type === "Audio" && (
+                <TouchableOpacity
+                  onPress={() => {
+                    router.push(`/albums/${currentlyPlaying.item?.AlbumId}`);
+                  }}
+                >
+                  <Text className="text-xs opacity-50">
+                    {currentlyPlaying.item?.Album}
+                  </Text>
+                </TouchableOpacity>
+              )}
+            </View>
+          </View>
+          <View className="flex flex-row items-center space-x-2">
+            <TouchableOpacity
+              onPress={() => {
+                if (isPlaying) pauseVideo();
+                else playVideo();
+              }}
+              className="aspect-square rounded flex flex-col items-center justify-center p-2"
+            >
+              {isPlaying ? (
+                <Ionicons name="pause" size={24} color="white" />
+              ) : (
+                <Ionicons name="play" size={24} color="white" />
+              )}
+            </TouchableOpacity>
+            <TouchableOpacity
+              onPress={() => {
+                stopPlayback();
+              }}
+              className="aspect-square rounded flex flex-col items-center justify-center p-2"
+            >
+              <Ionicons name="close" size={24} color="white" />
+            </TouchableOpacity>
+          </View>
+        </Animated.View>
+      </BlurView>
+    </Animated.View>
+  );
+};

components/DownloadItem.tsx

@@ -1,6 +1,6 @@
 import { useRemuxHlsToMp4 } from "@/hooks/useRemuxHlsToMp4";
-import { useDownload } from "@/providers/DownloadProvider";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { runningProcesses } from "@/utils/atoms/downloads";
 import { queueActions, queueAtom } from "@/utils/atoms/queue";
 import { useSettings } from "@/utils/atoms/settings";
 import ios from "@/utils/profiles/ios";
@@ -17,6 +17,8 @@ import {
   BaseItemDto,
   MediaSourceInfo,
 } from "@jellyfin/sdk/lib/generated-client/models";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { useQuery } from "@tanstack/react-query";
 import { router } from "expo-router";
 import { useAtom } from "jotai";
 import { useCallback, useMemo, useRef, useState } from "react";
@@ -29,8 +31,6 @@ import { Loader } from "./Loader";
 import { MediaSourceSelector } from "./MediaSourceSelector";
 import ProgressCircle from "./ProgressCircle";
 import { SubtitleTrackSelector } from "./SubtitleTrackSelector";
-import { toast } from "sonner-native";
-import iosFmp4 from "@/utils/profiles/iosFmp4";
 
 interface DownloadProps extends ViewProps {
   item: BaseItemDto;
@@ -39,10 +39,10 @@ interface DownloadProps extends ViewProps {
 export const DownloadItem: React.FC<DownloadProps> = ({ item, ...props }) => {
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
+  const [process] = useAtom(runningProcesses);
   const [queue, setQueue] = useAtom(queueAtom);
   const [settings] = useSettings();
-  const { processes, startBackgroundDownload } = useDownload();
-  const { startRemuxing, cancelRemuxing } = useRemuxHlsToMp4(item);
+  const { startRemuxing } = useRemuxHlsToMp4(item);
 
   const [selectedMediaSource, setSelectedMediaSource] =
     useState<MediaSourceInfo | null>(null);
@@ -67,7 +67,9 @@ export const DownloadItem: React.FC<DownloadProps> = ({ item, ...props }) => {
     bottomSheetModalRef.current?.present();
   }, []);
 
-  const handleSheetChanges = useCallback((index: number) => {}, []);
+  const handleSheetChanges = useCallback((index: number) => {
+    console.log("handleSheetChanges", index);
+  }, []);
 
   const closeModal = useCallback(() => {
     bottomSheetModalRef.current?.dismiss();
@@ -83,7 +85,7 @@ export const DownloadItem: React.FC<DownloadProps> = ({ item, ...props }) => {
       );
     }
 
-    let deviceProfile: any = iosFmp4;
+    let deviceProfile: any = ios;
 
     if (settings?.deviceProfile === "Native") {
       deviceProfile = native;
@@ -113,7 +115,6 @@ export const DownloadItem: React.FC<DownloadProps> = ({ item, ...props }) => {
     );
 
     let url: string | undefined = undefined;
-    let fileExtension: string | undefined | null = "mp4";
 
     const mediaSource: MediaSourceInfo = response.data.MediaSources.find(
       (source: MediaSourceInfo) => source.Id === selectedMediaSource?.Id
@@ -125,6 +126,7 @@ export const DownloadItem: React.FC<DownloadProps> = ({ item, ...props }) => {
 
     if (mediaSource.SupportsDirectPlay) {
       if (item.MediaType === "Video") {
+        console.log("Using direct stream for video!");
         url = `${api.basePath}/Videos/${item.Id}/stream.mp4?mediaSourceId=${item.Id}&static=true&mediaSourceId=${mediaSource.Id}&deviceId=${api.deviceInfo.id}&api_key=${api.accessToken}`;
       } else if (item.MediaType === "Audio") {
         console.log("Using direct stream for audio!");
@@ -147,40 +149,40 @@ export const DownloadItem: React.FC<DownloadProps> = ({ item, ...props }) => {
         }/universal?${searchParams.toString()}`;
       }
     } else if (mediaSource.TranscodingUrl) {
+      console.log("Using transcoded stream!");
       url = `${api.basePath}${mediaSource.TranscodingUrl}`;
-      fileExtension = mediaSource.TranscodingContainer;
     }
 
     if (!url) throw new Error("No url");
-    if (!fileExtension) throw new Error("No file extension");
 
-    if (settings?.downloadMethod === "optimized") {
-      return await startBackgroundDownload(url, item, fileExtension);
-    } else {
-      return await startRemuxing(url);
-    }
+    return await startRemuxing(url);
   }, [
     api,
     item,
-    startBackgroundDownload,
+    startRemuxing,
     user?.Id,
     selectedMediaSource,
     selectedAudioStream,
     selectedSubtitleStream,
     maxBitrate,
-    settings?.downloadMethod,
   ]);
 
   /**
    * Check if item is downloaded
    */
-  const { downloadedFiles } = useDownload();
+  const { data: downloaded, isFetching } = useQuery({
+    queryKey: ["downloaded", item.Id],
+    queryFn: async () => {
+      if (!item.Id) return false;
 
-  const isDownloaded = useMemo(() => {
-    if (!downloadedFiles) return false;
+      const data: BaseItemDto[] = JSON.parse(
+        (await AsyncStorage.getItem("downloaded_files")) || "[]"
+      );
 
-    return downloadedFiles.some((file) => file.Id === item.Id);
-  }, [downloadedFiles, item.Id]);
+      return data.some((d) => d.Id === item.Id);
+    },
+    enabled: !!item.Id,
+  });
 
   const renderBackdrop = useCallback(
     (props: BottomSheetBackdropProps) => (
@@ -193,18 +195,14 @@ export const DownloadItem: React.FC<DownloadProps> = ({ item, ...props }) => {
     []
   );
 
-  const process = useMemo(() => {
-    if (!processes) return null;
-
-    return processes.find((process) => process?.item?.Id === item.Id);
-  }, [processes, item.Id]);
-
   return (
     <View
       className="bg-neutral-800/80 rounded-full h-10 w-10 flex items-center justify-center"
       {...props}
     >
-      {process && process?.item.Id === item.Id ? (
+      {isFetching ? (
+        <Loader />
+      ) : process && process?.item.Id === item.Id ? (
         <TouchableOpacity
           onPress={() => {
             router.push("/downloads");
@@ -232,7 +230,7 @@ export const DownloadItem: React.FC<DownloadProps> = ({ item, ...props }) => {
         >
           <Ionicons name="hourglass" size={24} color="white" />
         </TouchableOpacity>
-      ) : isDownloaded ? (
+      ) : downloaded ? (
         <TouchableOpacity
           onPress={() => {
             router.push("/downloads");
@@ -292,36 +290,25 @@ export const DownloadItem: React.FC<DownloadProps> = ({ item, ...props }) => {
               className="mt-auto"
               onPress={() => {
                 if (userCanDownload === true) {
-                  if (!item.Id) {
-                    throw new Error("No item id");
-                  }
                   closeModal();
-                  if (settings?.downloadMethod === "remux") {
-                    queueActions.enqueue(queue, setQueue, {
-                      id: item.Id,
-                      execute: async () => {
-                        await initiateDownload();
-                      },
-                      item,
-                    });
-                  } else {
-                    initiateDownload();
-                  }
+                  queueActions.enqueue(queue, setQueue, {
+                    id: item.Id!,
+                    execute: async () => {
+                      await initiateDownload();
+                    },
+                    item,
+                  });
                 } else {
-                  toast.error("You are not allowed to download files.");
+                  Alert.alert(
+                    "Disabled",
+                    "This user is not allowed to download files."
+                  );
                 }
               }}
               color="purple"
             >
               Download
             </Button>
-            <View className="opacity-70 text-center w-full flex items-center">
-              {settings?.downloadMethod === "optimized" ? (
-                <Text className="text-xs">Using optimized server</Text>
-              ) : (
-                <Text className="text-xs">Using default method</Text>
-              )}
-            </View>
           </View>
         </BottomSheetView>
       </BottomSheetModal>

components/FullScreenMusicPlayer.tsx

@@ -1,544 +0,0 @@
-import { useAdjacentEpisodes } from "@/hooks/useAdjacentEpisodes";
-import { useCreditSkipper } from "@/hooks/useCreditSkipper";
-import { useIntroSkipper } from "@/hooks/useIntroSkipper";
-import { useTrickplay } from "@/hooks/useTrickplay";
-import { apiAtom } from "@/providers/JellyfinProvider";
-import { usePlayback } from "@/providers/PlaybackProvider";
-import { useSettings } from "@/utils/atoms/settings";
-import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
-import { getAuthHeaders } from "@/utils/jellyfin/jellyfin";
-import { writeToLog } from "@/utils/log";
-import orientationToOrientationLock from "@/utils/OrientationLockConverter";
-import { secondsToTicks } from "@/utils/secondsToTicks";
-import { formatTimeString, ticksToSeconds } from "@/utils/time";
-import { Ionicons } from "@expo/vector-icons";
-import { Image } from "expo-image";
-import { useRouter, useSegments } from "expo-router";
-import * as ScreenOrientation from "expo-screen-orientation";
-import { useAtom } from "jotai";
-import React, { useCallback, useEffect, useMemo, useState } from "react";
-import {
-  Alert,
-  BackHandler,
-  Dimensions,
-  Pressable,
-  TouchableOpacity,
-  View,
-} from "react-native";
-import { Slider } from "react-native-awesome-slider";
-import {
-  runOnJS,
-  useAnimatedReaction,
-  useSharedValue,
-} from "react-native-reanimated";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import Video, { OnProgressData } from "react-native-video";
-import { Text } from "./common/Text";
-import { itemRouter } from "./common/TouchableItemRouter";
-import { Loader } from "./Loader";
-
-const windowDimensions = Dimensions.get("window");
-const screenDimensions = Dimensions.get("screen");
-
-export const FullScreenMusicPlayer: React.FC = () => {
-  const {
-    currentlyPlaying,
-    pauseVideo,
-    playVideo,
-    stopPlayback,
-    setIsPlaying,
-    isPlaying,
-    videoRef,
-    onProgress,
-    setIsBuffering,
-  } = usePlayback();
-
-  const [settings] = useSettings();
-  const [api] = useAtom(apiAtom);
-  const router = useRouter();
-  const segments = useSegments();
-  const insets = useSafeAreaInsets();
-
-  const { previousItem, nextItem } = useAdjacentEpisodes({ currentlyPlaying });
-
-  const [showControls, setShowControls] = useState(true);
-  const [isBuffering, setIsBufferingState] = useState(true);
-
-  // Seconds
-  const [currentTime, setCurrentTime] = useState(0);
-  const [remainingTime, setRemainingTime] = useState(0);
-
-  const isSeeking = useSharedValue(false);
-
-  const cacheProgress = useSharedValue(0);
-  const progress = useSharedValue(0);
-  const min = useSharedValue(0);
-  const max = useSharedValue(currentlyPlaying?.item.RunTimeTicks || 0);
-
-  const [dimensions, setDimensions] = useState({
-    window: windowDimensions,
-    screen: screenDimensions,
-  });
-
-  useEffect(() => {
-    const subscription = Dimensions.addEventListener(
-      "change",
-      ({ window, screen }) => {
-        setDimensions({ window, screen });
-      }
-    );
-    return () => subscription?.remove();
-  });
-
-  const from = useMemo(() => segments[2], [segments]);
-
-  const updateTimes = useCallback(
-    (currentProgress: number, maxValue: number) => {
-      const current = ticksToSeconds(currentProgress);
-      const remaining = ticksToSeconds(maxValue - current);
-
-      setCurrentTime(current);
-      setRemainingTime(remaining);
-    },
-    []
-  );
-
-  const { showSkipButton, skipIntro } = useIntroSkipper(
-    currentlyPlaying?.item.Id,
-    currentTime,
-    videoRef
-  );
-
-  const { showSkipCreditButton, skipCredit } = useCreditSkipper(
-    currentlyPlaying?.item.Id,
-    currentTime,
-    videoRef
-  );
-
-  useAnimatedReaction(
-    () => ({
-      progress: progress.value,
-      max: max.value,
-      isSeeking: isSeeking.value,
-    }),
-    (result) => {
-      if (result.isSeeking === false) {
-        runOnJS(updateTimes)(result.progress, result.max);
-      }
-    },
-    [updateTimes]
-  );
-
-  useEffect(() => {
-    const backAction = () => {
-      if (currentlyPlaying) {
-        Alert.alert("Hold on!", "Are you sure you want to exit?", [
-          {
-            text: "Cancel",
-            onPress: () => null,
-            style: "cancel",
-          },
-          {
-            text: "Yes",
-            onPress: () => {
-              stopPlayback();
-              router.back();
-            },
-          },
-        ]);
-        return true;
-      }
-      return false;
-    };
-
-    const backHandler = BackHandler.addEventListener(
-      "hardwareBackPress",
-      backAction
-    );
-
-    return () => backHandler.remove();
-  }, [currentlyPlaying, stopPlayback, router]);
-
-  const poster = useMemo(() => {
-    if (!currentlyPlaying?.item || !api) return "";
-    return currentlyPlaying.item.Type === "Audio"
-      ? `${api.basePath}/Items/${currentlyPlaying.item.AlbumId}/Images/Primary?tag=${currentlyPlaying.item.AlbumPrimaryImageTag}&quality=90&maxHeight=200&maxWidth=200`
-      : getBackdropUrl({
-          api,
-          item: currentlyPlaying.item,
-          quality: 70,
-          width: 200,
-        });
-  }, [currentlyPlaying?.item, api]);
-
-  const videoSource = useMemo(() => {
-    if (!api || !currentlyPlaying || !poster) return null;
-    const startPosition = currentlyPlaying.item?.UserData?.PlaybackPositionTicks
-      ? Math.round(currentlyPlaying.item.UserData.PlaybackPositionTicks / 10000)
-      : 0;
-    return {
-      uri: currentlyPlaying.url,
-      isNetwork: true,
-      startPosition,
-      headers: getAuthHeaders(api),
-      metadata: {
-        artist: currentlyPlaying.item?.AlbumArtist ?? undefined,
-        title: currentlyPlaying.item?.Name || "Unknown",
-        description: currentlyPlaying.item?.Overview ?? undefined,
-        imageUri: poster,
-        subtitle: currentlyPlaying.item?.Album ?? undefined,
-      },
-    };
-  }, [currentlyPlaying, api, poster]);
-
-  useEffect(() => {
-    if (currentlyPlaying) {
-      progress.value =
-        currentlyPlaying.item?.UserData?.PlaybackPositionTicks || 0;
-      max.value = currentlyPlaying.item.RunTimeTicks || 0;
-      setShowControls(true);
-      playVideo();
-    }
-  }, [currentlyPlaying]);
-
-  const toggleControls = () => setShowControls(!showControls);
-
-  const handleVideoProgress = useCallback(
-    (data: OnProgressData) => {
-      if (isSeeking.value === true) return;
-      progress.value = secondsToTicks(data.currentTime);
-      cacheProgress.value = secondsToTicks(data.playableDuration);
-      setIsBufferingState(data.playableDuration === 0);
-      setIsBuffering(data.playableDuration === 0);
-      onProgress(data);
-    },
-    [onProgress, setIsBuffering, isSeeking]
-  );
-
-  const handleVideoError = useCallback(
-    (e: any) => {
-      console.log(e);
-      writeToLog("ERROR", "Video playback error: " + JSON.stringify(e));
-      Alert.alert("Error", "Cannot play this video file.");
-      setIsPlaying(false);
-    },
-    [setIsPlaying]
-  );
-
-  const handlePlayPause = useCallback(() => {
-    if (isPlaying) pauseVideo();
-    else playVideo();
-  }, [isPlaying, pauseVideo, playVideo]);
-
-  const handleSliderComplete = (value: number) => {
-    progress.value = value;
-    isSeeking.value = false;
-    videoRef.current?.seek(value / 10000000);
-  };
-
-  const handleSliderChange = (value: number) => {};
-
-  const handleSliderStart = useCallback(() => {
-    if (showControls === false) return;
-    isSeeking.value = true;
-  }, []);
-
-  const handleSkipBackward = useCallback(async () => {
-    if (!settings) return;
-    try {
-      const curr = await videoRef.current?.getCurrentPosition();
-      if (curr !== undefined) {
-        videoRef.current?.seek(Math.max(0, curr - settings.rewindSkipTime));
-      }
-    } catch (error) {
-      writeToLog("ERROR", "Error seeking video backwards", error);
-    }
-  }, [settings]);
-
-  const handleSkipForward = useCallback(async () => {
-    if (!settings) return;
-    try {
-      const curr = await videoRef.current?.getCurrentPosition();
-      if (curr !== undefined) {
-        videoRef.current?.seek(Math.max(0, curr + settings.forwardSkipTime));
-      }
-    } catch (error) {
-      writeToLog("ERROR", "Error seeking video forwards", error);
-    }
-  }, [settings]);
-
-  const handleGoToPreviousItem = useCallback(() => {
-    if (!previousItem || !from) return;
-    const url = itemRouter(previousItem, from);
-    stopPlayback();
-    // @ts-ignore
-    router.push(url);
-  }, [previousItem, from, stopPlayback, router]);
-
-  const handleGoToNextItem = useCallback(() => {
-    if (!nextItem || !from) return;
-    const url = itemRouter(nextItem, from);
-    stopPlayback();
-    // @ts-ignore
-    router.push(url);
-  }, [nextItem, from, stopPlayback, router]);
-
-  if (!currentlyPlaying) return null;
-
-  return (
-    <View
-      style={{
-        width: dimensions.window.width,
-        height: dimensions.window.height,
-        backgroundColor: "black",
-      }}
-    >
-      <Pressable
-        onPress={toggleControls}
-        style={[
-          {
-            position: "absolute",
-            top: 0,
-            bottom: 0,
-            left: insets.left,
-            right: insets.right,
-            width: dimensions.window.width - (insets.left + insets.right),
-          },
-        ]}
-      >
-        {videoSource && (
-          <>
-            <Video
-              ref={videoRef}
-              source={videoSource}
-              style={{ width: "100%", height: "100%" }}
-              resizeMode={"contain"}
-              onProgress={handleVideoProgress}
-              onLoad={(data) => (max.value = secondsToTicks(data.duration))}
-              onError={handleVideoError}
-              playWhenInactive={true}
-              allowsExternalPlayback={true}
-              playInBackground={true}
-              pictureInPicture={true}
-              showNotificationControls={true}
-              ignoreSilentSwitch="ignore"
-              fullscreen={false}
-            />
-          </>
-        )}
-      </Pressable>
-
-      <View pointerEvents="none" className="p-4">
-        <Image
-          source={poster ? { uri: poster } : undefined}
-          style={{
-            width: "100%",
-            height: "100%",
-            resizeMode: "contain",
-          }}
-        />
-      </View>
-
-      {(showControls || isBuffering) && (
-        <View
-          pointerEvents="none"
-          style={[
-            {
-              top: 0,
-              left: 0,
-              position: "absolute",
-              width: dimensions.window.width,
-              height: dimensions.window.height,
-            },
-          ]}
-          className="  bg-black/50 z-0"
-        ></View>
-      )}
-
-      {isBuffering && (
-        <View
-          pointerEvents="none"
-          className="fixed top-0 left-0 w-screen h-screen flex flex-col items-center justify-center"
-        >
-          <Loader />
-        </View>
-      )}
-
-      {showSkipButton && (
-        <View
-          style={[
-            {
-              position: "absolute",
-              bottom: insets.bottom + 70,
-              right: insets.right + 16,
-              height: 70,
-            },
-          ]}
-          className="z-10"
-        >
-          <TouchableOpacity
-            onPress={skipIntro}
-            className="bg-purple-600 rounded-full px-2.5 py-2 font-semibold"
-          >
-            <Text className="text-white">Skip Intro</Text>
-          </TouchableOpacity>
-        </View>
-      )}
-
-      {showSkipCreditButton && (
-        <View
-          style={[
-            {
-              position: "absolute",
-              bottom: insets.bottom + 70,
-              right: insets.right + 16,
-              height: 70,
-            },
-          ]}
-          className="z-10"
-        >
-          <TouchableOpacity
-            onPress={skipCredit}
-            className="bg-purple-600 rounded-full px-2.5 py-2 font-semibold"
-          >
-            <Text className="text-white">Skip Credits</Text>
-          </TouchableOpacity>
-        </View>
-      )}
-
-      {showControls && (
-        <>
-          <View
-            style={[
-              {
-                position: "absolute",
-                top: insets.top,
-                right: insets.right + 16,
-                height: 70,
-                zIndex: 10,
-              },
-            ]}
-            className="flex flex-row items-center space-x-2 z-10"
-          >
-            <TouchableOpacity
-              onPress={() => {
-                stopPlayback();
-                router.back();
-              }}
-              className="aspect-square flex flex-col bg-neutral-800 rounded-xl items-center justify-center p-2"
-            >
-              <Ionicons name="close" size={24} color="white" />
-            </TouchableOpacity>
-          </View>
-
-          <View
-            style={[
-              {
-                position: "absolute",
-                bottom: insets.bottom + 8,
-                left: insets.left + 16,
-                width:
-                  dimensions.window.width - insets.left - insets.right - 32,
-              },
-            ]}
-          >
-            <View className="shrink flex flex-col justify-center h-full mb-2">
-              <Text className="font-bold">{currentlyPlaying.item?.Name}</Text>
-              {currentlyPlaying.item?.Type === "Episode" && (
-                <Text className="opacity-50">
-                  {currentlyPlaying.item.SeriesName}
-                </Text>
-              )}
-              {currentlyPlaying.item?.Type === "Movie" && (
-                <Text className="text-xs opacity-50">
-                  {currentlyPlaying.item?.ProductionYear}
-                </Text>
-              )}
-              {currentlyPlaying.item?.Type === "Audio" && (
-                <Text className="text-xs opacity-50">
-                  {currentlyPlaying.item?.Album}
-                </Text>
-              )}
-            </View>
-            <View
-              className={`flex ${"flex-col-reverse py-4 px-4 rounded-2xl"} 
-          items-center  bg-neutral-800`}
-            >
-              <View className="flex flex-row items-center space-x-4">
-                <TouchableOpacity
-                  style={{
-                    opacity: !previousItem ? 0.5 : 1,
-                  }}
-                  onPress={handleGoToPreviousItem}
-                >
-                  <Ionicons name="play-skip-back" size={24} color="white" />
-                </TouchableOpacity>
-                <TouchableOpacity onPress={handleSkipBackward}>
-                  <Ionicons
-                    name="refresh-outline"
-                    size={26}
-                    color="white"
-                    style={{
-                      transform: [{ scaleY: -1 }, { rotate: "180deg" }],
-                    }}
-                  />
-                </TouchableOpacity>
-                <TouchableOpacity onPress={handlePlayPause}>
-                  <Ionicons
-                    name={isPlaying ? "pause" : "play"}
-                    size={30}
-                    color="white"
-                  />
-                </TouchableOpacity>
-                <TouchableOpacity onPress={handleSkipForward}>
-                  <Ionicons name="refresh-outline" size={26} color="white" />
-                </TouchableOpacity>
-                <TouchableOpacity
-                  style={{
-                    opacity: !nextItem ? 0.5 : 1,
-                  }}
-                  onPress={handleGoToNextItem}
-                >
-                  <Ionicons name="play-skip-forward" size={24} color="white" />
-                </TouchableOpacity>
-              </View>
-              <View
-                className={`flex flex-col w-full shrink
-              ${""}
-            `}
-              >
-                <Slider
-                  theme={{
-                    maximumTrackTintColor: "rgba(255,255,255,0.2)",
-                    minimumTrackTintColor: "#fff",
-                    cacheTrackTintColor: "rgba(255,255,255,0.3)",
-                  }}
-                  cache={cacheProgress}
-                  onSlidingStart={handleSliderStart}
-                  onSlidingComplete={handleSliderComplete}
-                  onValueChange={handleSliderChange}
-                  containerStyle={{
-                    borderRadius: 100,
-                  }}
-                  sliderHeight={10}
-                  progress={progress}
-                  thumbWidth={0}
-                  minimumValue={min}
-                  maximumValue={max}
-                />
-                <View className="flex flex-row items-center justify-between mt-0.5">
-                  <Text className="text-[12px] text-neutral-400">
-                    {formatTimeString(currentTime)}
-                  </Text>
-                  <Text className="text-[12px] text-neutral-400">
-                    -{formatTimeString(remainingTime)}
-                  </Text>
-                </View>
-              </View>
-            </View>
-          </View>
-        </>
-      )}
-    </View>
-  );
-};

components/FullScreenVideoPlayer.tsx

@@ -1,626 +0,0 @@
-import { useAdjacentEpisodes } from "@/hooks/useAdjacentEpisodes";
-import { useCreditSkipper } from "@/hooks/useCreditSkipper";
-import { useIntroSkipper } from "@/hooks/useIntroSkipper";
-import { useTrickplay } from "@/hooks/useTrickplay";
-import { apiAtom } from "@/providers/JellyfinProvider";
-import { usePlayback } from "@/providers/PlaybackProvider";
-import { useSettings } from "@/utils/atoms/settings";
-import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
-import { getAuthHeaders } from "@/utils/jellyfin/jellyfin";
-import { writeToLog } from "@/utils/log";
-import orientationToOrientationLock from "@/utils/OrientationLockConverter";
-import { secondsToTicks } from "@/utils/secondsToTicks";
-import { formatTimeString, ticksToSeconds } from "@/utils/time";
-import { Ionicons } from "@expo/vector-icons";
-import { Image } from "expo-image";
-import { useRouter, useSegments } from "expo-router";
-import * as ScreenOrientation from "expo-screen-orientation";
-import { useAtom } from "jotai";
-import React, { useCallback, useEffect, useMemo, useState } from "react";
-import {
-  Alert,
-  BackHandler,
-  Dimensions,
-  Pressable,
-  TouchableOpacity,
-  View,
-} from "react-native";
-import { Slider } from "react-native-awesome-slider";
-import {
-  runOnJS,
-  useAnimatedReaction,
-  useSharedValue,
-} from "react-native-reanimated";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import Video, { OnProgressData, ReactVideoProps } from "react-native-video";
-import { Text } from "./common/Text";
-import { itemRouter } from "./common/TouchableItemRouter";
-import { Loader } from "./Loader";
-
-const windowDimensions = Dimensions.get("window");
-const screenDimensions = Dimensions.get("screen");
-
-export const FullScreenVideoPlayer: React.FC = () => {
-  const {
-    currentlyPlaying,
-    pauseVideo,
-    playVideo,
-    stopPlayback,
-    setIsPlaying,
-    isPlaying,
-    videoRef,
-    onProgress,
-    setIsBuffering,
-  } = usePlayback();
-
-  const [settings] = useSettings();
-  const [api] = useAtom(apiAtom);
-  const router = useRouter();
-  const segments = useSegments();
-  const insets = useSafeAreaInsets();
-
-  const { previousItem, nextItem } = useAdjacentEpisodes({ currentlyPlaying });
-  const { trickPlayUrl, calculateTrickplayUrl, trickplayInfo } =
-    useTrickplay(currentlyPlaying);
-
-  const [showControls, setShowControls] = useState(true);
-  const [isBuffering, setIsBufferingState] = useState(true);
-  const [ignoreSafeArea, setIgnoreSafeArea] = useState(false);
-  const [orientation, setOrientation] = useState(
-    ScreenOrientation.OrientationLock.UNKNOWN
-  );
-
-  // Seconds
-  const [currentTime, setCurrentTime] = useState(0);
-  const [remainingTime, setRemainingTime] = useState(0);
-
-  const isSeeking = useSharedValue(false);
-
-  const cacheProgress = useSharedValue(0);
-  const progress = useSharedValue(0);
-  const min = useSharedValue(0);
-  const max = useSharedValue(currentlyPlaying?.item.RunTimeTicks || 0);
-
-  const [dimensions, setDimensions] = useState({
-    window: windowDimensions,
-    screen: screenDimensions,
-  });
-
-  useEffect(() => {
-    const dimensionsSubscription = Dimensions.addEventListener(
-      "change",
-      ({ window, screen }) => {
-        setDimensions({ window, screen });
-      }
-    );
-
-    const orientationSubscription =
-      ScreenOrientation.addOrientationChangeListener((event) => {
-        setOrientation(
-          orientationToOrientationLock(event.orientationInfo.orientation)
-        );
-      });
-
-    ScreenOrientation.getOrientationAsync().then((orientation) => {
-      setOrientation(orientationToOrientationLock(orientation));
-    });
-
-    return () => {
-      dimensionsSubscription.remove();
-      orientationSubscription.remove();
-    };
-  }, []);
-
-  const from = useMemo(() => segments[2], [segments]);
-
-  const updateTimes = useCallback(
-    (currentProgress: number, maxValue: number) => {
-      const current = ticksToSeconds(currentProgress);
-      const remaining = ticksToSeconds(maxValue - current);
-
-      setCurrentTime(current);
-      setRemainingTime(remaining);
-    },
-    []
-  );
-
-  const { showSkipButton, skipIntro } = useIntroSkipper(
-    currentlyPlaying?.item.Id,
-    currentTime,
-    videoRef
-  );
-
-  const { showSkipCreditButton, skipCredit } = useCreditSkipper(
-    currentlyPlaying?.item.Id,
-    currentTime,
-    videoRef
-  );
-
-  useAnimatedReaction(
-    () => ({
-      progress: progress.value,
-      max: max.value,
-      isSeeking: isSeeking.value,
-    }),
-    (result) => {
-      if (result.isSeeking === false) {
-        runOnJS(updateTimes)(result.progress, result.max);
-      }
-    },
-    [updateTimes]
-  );
-
-  useEffect(() => {
-    const backAction = () => {
-      if (currentlyPlaying) {
-        Alert.alert("Hold on!", "Are you sure you want to exit?", [
-          {
-            text: "Cancel",
-            onPress: () => null,
-            style: "cancel",
-          },
-          {
-            text: "Yes",
-            onPress: () => {
-              stopPlayback();
-              router.back();
-            },
-          },
-        ]);
-        return true;
-      }
-      return false;
-    };
-
-    const backHandler = BackHandler.addEventListener(
-      "hardwareBackPress",
-      backAction
-    );
-
-    return () => backHandler.remove();
-  }, [currentlyPlaying, stopPlayback, router]);
-
-  const isLandscape = useMemo(() => {
-    return orientation === ScreenOrientation.OrientationLock.LANDSCAPE_LEFT ||
-      orientation === ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT
-      ? true
-      : false;
-  }, [orientation]);
-
-  const poster = useMemo(() => {
-    if (!currentlyPlaying?.item || !api) return "";
-    return currentlyPlaying.item.Type === "Audio"
-      ? `${api.basePath}/Items/${currentlyPlaying.item.AlbumId}/Images/Primary?tag=${currentlyPlaying.item.AlbumPrimaryImageTag}&quality=90&maxHeight=200&maxWidth=200`
-      : getBackdropUrl({
-          api,
-          item: currentlyPlaying.item,
-          quality: 70,
-          width: 200,
-        });
-  }, [currentlyPlaying?.item, api]);
-
-  const videoSource: ReactVideoProps["source"] = useMemo(() => {
-    if (!api || !currentlyPlaying || !poster) return undefined;
-    const startPosition = currentlyPlaying.item?.UserData?.PlaybackPositionTicks
-      ? Math.round(currentlyPlaying.item.UserData.PlaybackPositionTicks / 10000)
-      : 0;
-    return {
-      uri: currentlyPlaying.url,
-      isNetwork: true,
-      startPosition,
-      headers: getAuthHeaders(api),
-      metadata: {
-        artist: currentlyPlaying.item?.AlbumArtist ?? undefined,
-        title: currentlyPlaying.item?.Name || "Unknown",
-        description: currentlyPlaying.item?.Overview ?? undefined,
-        imageUri: poster,
-        subtitle: currentlyPlaying.item?.Album ?? undefined,
-      },
-    };
-  }, [currentlyPlaying, api, poster]);
-
-  useEffect(() => {
-    if (currentlyPlaying) {
-      progress.value =
-        currentlyPlaying.item?.UserData?.PlaybackPositionTicks || 0;
-      max.value = currentlyPlaying.item.RunTimeTicks || 0;
-      setShowControls(true);
-      playVideo();
-    }
-  }, [currentlyPlaying]);
-
-  const toggleControls = () => setShowControls(!showControls);
-
-  const handleVideoProgress = useCallback(
-    (data: OnProgressData) => {
-      if (isSeeking.value === true) return;
-      progress.value = secondsToTicks(data.currentTime);
-      cacheProgress.value = secondsToTicks(data.playableDuration);
-      setIsBufferingState(data.playableDuration === 0);
-      setIsBuffering(data.playableDuration === 0);
-      onProgress(data);
-    },
-    [onProgress, setIsBuffering, isSeeking]
-  );
-
-  const handleVideoError = useCallback(
-    (e: any) => {
-      console.log(e);
-      writeToLog("ERROR", "Video playback error: " + JSON.stringify(e));
-      Alert.alert("Error", "Cannot play this video file.");
-      setIsPlaying(false);
-    },
-    [setIsPlaying]
-  );
-
-  const handlePlayPause = useCallback(() => {
-    if (isPlaying) pauseVideo();
-    else playVideo();
-  }, [isPlaying, pauseVideo, playVideo]);
-
-  const handleSliderComplete = (value: number) => {
-    progress.value = value;
-    isSeeking.value = false;
-    videoRef.current?.seek(value / 10000000);
-  };
-
-  const handleSliderChange = (value: number) => {
-    calculateTrickplayUrl(value);
-  };
-
-  const handleSliderStart = useCallback(() => {
-    if (showControls === false) return;
-    isSeeking.value = true;
-  }, []);
-
-  const handleSkipBackward = useCallback(async () => {
-    if (!settings) return;
-    try {
-      const curr = await videoRef.current?.getCurrentPosition();
-      if (curr !== undefined) {
-        videoRef.current?.seek(Math.max(0, curr - settings.rewindSkipTime));
-      }
-    } catch (error) {
-      writeToLog("ERROR", "Error seeking video backwards", error);
-    }
-  }, [settings]);
-
-  const handleSkipForward = useCallback(async () => {
-    if (!settings) return;
-    try {
-      const curr = await videoRef.current?.getCurrentPosition();
-      if (curr !== undefined) {
-        videoRef.current?.seek(Math.max(0, curr + settings.forwardSkipTime));
-      }
-    } catch (error) {
-      writeToLog("ERROR", "Error seeking video forwards", error);
-    }
-  }, [settings]);
-
-  const handleGoToPreviousItem = useCallback(() => {
-    if (!previousItem || !from) return;
-    const url = itemRouter(previousItem, from);
-    stopPlayback();
-    // @ts-ignore
-    router.push(url);
-  }, [previousItem, from, stopPlayback, router]);
-
-  const handleGoToNextItem = useCallback(() => {
-    if (!nextItem || !from) return;
-    const url = itemRouter(nextItem, from);
-    stopPlayback();
-    // @ts-ignore
-    router.push(url);
-  }, [nextItem, from, stopPlayback, router]);
-
-  const toggleIgnoreSafeArea = useCallback(() => {
-    setIgnoreSafeArea((prev) => !prev);
-  }, []);
-
-  if (!currentlyPlaying) return null;
-
-  return (
-    <View
-      style={{
-        width: dimensions.window.width,
-        height: dimensions.window.height,
-        backgroundColor: "black",
-      }}
-    >
-      <Pressable
-        onPress={toggleControls}
-        style={[
-          {
-            position: "absolute",
-            top: 0,
-            bottom: 0,
-            left: ignoreSafeArea ? 0 : insets.left,
-            right: ignoreSafeArea ? 0 : insets.right,
-            width: ignoreSafeArea
-              ? dimensions.window.width
-              : dimensions.window.width - (insets.left + insets.right),
-          },
-        ]}
-      >
-        <Video
-          ref={videoRef}
-          source={videoSource}
-          style={{ width: "100%", height: "100%" }}
-          resizeMode={ignoreSafeArea ? "cover" : "contain"}
-          onProgress={handleVideoProgress}
-          onLoad={(data) => (max.value = secondsToTicks(data.duration))}
-          onError={handleVideoError}
-          playWhenInactive={true}
-          allowsExternalPlayback={true}
-          playInBackground={true}
-          pictureInPicture={true}
-          showNotificationControls={true}
-          ignoreSilentSwitch="ignore"
-          fullscreen={false}
-          onVideoTracks={(d) => {
-            console.log("onVideoTracks ~", d);
-          }}
-        />
-      </Pressable>
-
-      {(showControls || isBuffering) && (
-        <View
-          pointerEvents="none"
-          style={[
-            {
-              top: 0,
-              left: 0,
-              position: "absolute",
-              width: dimensions.window.width,
-              height: dimensions.window.height,
-            },
-          ]}
-          className="  bg-black/50 z-0"
-        ></View>
-      )}
-
-      {isBuffering && (
-        <View
-          pointerEvents="none"
-          className="fixed top-0 left-0 w-screen h-screen flex flex-col items-center justify-center"
-        >
-          <Loader />
-        </View>
-      )}
-
-      {showSkipButton && (
-        <View
-          style={[
-            {
-              position: "absolute",
-              bottom: isLandscape ? insets.bottom + 26 : insets.bottom + 70,
-              right: isLandscape ? insets.right + 32 : insets.right + 16,
-              height: 70,
-            },
-          ]}
-          className="z-10"
-        >
-          <TouchableOpacity
-            onPress={skipIntro}
-            className="bg-purple-600 rounded-full px-2.5 py-2 font-semibold"
-          >
-            <Text className="text-white">Skip Intro</Text>
-          </TouchableOpacity>
-        </View>
-      )}
-
-      {showSkipCreditButton && (
-        <View
-          style={[
-            {
-              position: "absolute",
-              bottom: isLandscape ? insets.bottom + 26 : insets.bottom + 70,
-              right: isLandscape ? insets.right + 32 : insets.right + 16,
-              height: 70,
-            },
-          ]}
-          className="z-10"
-        >
-          <TouchableOpacity
-            onPress={skipCredit}
-            className="bg-purple-600 rounded-full px-2.5 py-2 font-semibold"
-          >
-            <Text className="text-white">Skip Credits</Text>
-          </TouchableOpacity>
-        </View>
-      )}
-
-      {showControls && (
-        <>
-          <View
-            style={[
-              {
-                position: "absolute",
-                top: insets.top,
-                right: isLandscape ? insets.right + 32 : insets.right + 16,
-                height: 70,
-                zIndex: 10,
-              },
-            ]}
-            className="flex flex-row items-center space-x-2 z-10"
-          >
-            <TouchableOpacity
-              onPress={toggleIgnoreSafeArea}
-              className="aspect-square flex flex-col bg-neutral-800 rounded-xl items-center justify-center p-2"
-            >
-              <Ionicons
-                name={ignoreSafeArea ? "contract-outline" : "expand"}
-                size={24}
-                color="white"
-              />
-            </TouchableOpacity>
-            <TouchableOpacity
-              onPress={() => {
-                stopPlayback();
-                router.back();
-              }}
-              className="aspect-square flex flex-col bg-neutral-800 rounded-xl items-center justify-center p-2"
-            >
-              <Ionicons name="close" size={24} color="white" />
-            </TouchableOpacity>
-          </View>
-
-          <View
-            style={[
-              {
-                position: "absolute",
-                bottom: insets.bottom + 8,
-                left: isLandscape ? insets.left + 32 : insets.left + 16,
-                width: isLandscape
-                  ? dimensions.window.width - insets.left - insets.right - 64
-                  : dimensions.window.width - insets.left - insets.right - 32,
-              },
-            ]}
-          >
-            <View className="shrink flex flex-col justify-center h-full mb-2">
-              <Text className="font-bold">{currentlyPlaying.item?.Name}</Text>
-              {currentlyPlaying.item?.Type === "Episode" && (
-                <Text className="opacity-50">
-                  {currentlyPlaying.item.SeriesName}
-                </Text>
-              )}
-              {currentlyPlaying.item?.Type === "Movie" && (
-                <Text className="text-xs opacity-50">
-                  {currentlyPlaying.item?.ProductionYear}
-                </Text>
-              )}
-              {currentlyPlaying.item?.Type === "Audio" && (
-                <Text className="text-xs opacity-50">
-                  {currentlyPlaying.item?.Album}
-                </Text>
-              )}
-            </View>
-            <View
-              className={`flex ${
-                isLandscape
-                  ? "flex-row space-x-6 py-2 px-4 rounded-full"
-                  : "flex-col-reverse py-4 px-4 rounded-2xl"
-              } 
-          items-center  bg-neutral-800`}
-            >
-              <View className="flex flex-row items-center space-x-4">
-                <TouchableOpacity
-                  style={{
-                    opacity: !previousItem ? 0.5 : 1,
-                  }}
-                  onPress={handleGoToPreviousItem}
-                >
-                  <Ionicons name="play-skip-back" size={24} color="white" />
-                </TouchableOpacity>
-                <TouchableOpacity onPress={handleSkipBackward}>
-                  <Ionicons
-                    name="refresh-outline"
-                    size={26}
-                    color="white"
-                    style={{
-                      transform: [{ scaleY: -1 }, { rotate: "180deg" }],
-                    }}
-                  />
-                </TouchableOpacity>
-                <TouchableOpacity onPress={handlePlayPause}>
-                  <Ionicons
-                    name={isPlaying ? "pause" : "play"}
-                    size={30}
-                    color="white"
-                  />
-                </TouchableOpacity>
-                <TouchableOpacity onPress={handleSkipForward}>
-                  <Ionicons name="refresh-outline" size={26} color="white" />
-                </TouchableOpacity>
-                <TouchableOpacity
-                  style={{
-                    opacity: !nextItem ? 0.5 : 1,
-                  }}
-                  onPress={handleGoToNextItem}
-                >
-                  <Ionicons name="play-skip-forward" size={24} color="white" />
-                </TouchableOpacity>
-              </View>
-              <View
-                className={`flex flex-col w-full shrink
-              ${""}
-            `}
-              >
-                <Slider
-                  theme={{
-                    maximumTrackTintColor: "rgba(255,255,255,0.2)",
-                    minimumTrackTintColor: "#fff",
-                    cacheTrackTintColor: "rgba(255,255,255,0.3)",
-                    bubbleBackgroundColor: "#fff",
-                    bubbleTextColor: "#000",
-                    heartbeatColor: "#999",
-                  }}
-                  cache={cacheProgress}
-                  onSlidingStart={handleSliderStart}
-                  onSlidingComplete={handleSliderComplete}
-                  onValueChange={handleSliderChange}
-                  containerStyle={{
-                    borderRadius: 100,
-                  }}
-                  renderBubble={() => {
-                    if (!trickPlayUrl || !trickplayInfo) {
-                      return null;
-                    }
-                    const { x, y, url } = trickPlayUrl;
-
-                    const tileWidth = 150;
-                    const tileHeight = 150 / trickplayInfo.aspectRatio!;
-                    return (
-                      <View
-                        style={{
-                          position: "absolute",
-                          bottom: 0,
-                          left: 0,
-                          width: tileWidth,
-                          height: tileHeight,
-                          marginLeft: -tileWidth / 4,
-                          marginTop: -tileHeight / 4 - 60,
-                          zIndex: 10,
-                        }}
-                        className=" bg-neutral-800 overflow-hidden"
-                      >
-                        <Image
-                          cachePolicy={"memory-disk"}
-                          style={{
-                            width: 150 * trickplayInfo?.data.TileWidth!,
-                            height:
-                              (150 / trickplayInfo.aspectRatio!) *
-                              trickplayInfo?.data.TileHeight!,
-                            transform: [
-                              { translateX: -x * tileWidth },
-                              { translateY: -y * tileHeight },
-                            ],
-                          }}
-                          source={{ uri: url }}
-                          contentFit="cover"
-                        />
-                      </View>
-                    );
-                  }}
-                  sliderHeight={10}
-                  thumbWidth={0}
-                  progress={progress}
-                  minimumValue={min}
-                  maximumValue={max}
-                />
-                <View className="flex flex-row items-center justify-between mt-0.5">
-                  <Text className="text-[12px] text-neutral-400">
-                    {formatTimeString(currentTime)}
-                  </Text>
-                  <Text className="text-[12px] text-neutral-400">
-                    -{formatTimeString(remainingTime)}
-                  </Text>
-                </View>
-              </View>
-            </View>
-          </View>
-        </>
-      )}
-    </View>
-  );
-};

components/GenreTags.tsx

@@ -1,25 +0,0 @@
-// GenreTags.tsx
-import React from "react";
-import { View } from "react-native";
-import { Text } from "./common/Text";
-
-interface GenreTagsProps {
-  genres?: string[];
-}
-
-export const GenreTags: React.FC<GenreTagsProps> = ({ genres }) => {
-  if (!genres || genres.length === 0) return null;
-
-  return (
-    <View className="flex flex-row flex-wrap mt-2">
-      {genres.map((genre) => (
-        <View
-          key={genre}
-          className="bg-neutral-800 rounded-full px-2 py-1 mr-1"
-        >
-          <Text className="text-xs">{genre}</Text>
-        </View>
-      ))}
-    </View>
-  );
-};

components/ItemCardText.tsx

@@ -10,7 +10,7 @@ type ItemCardProps = {
 
 export const ItemCardText: React.FC<ItemCardProps> = ({ item }) => {
   return (
-    <View className="mt-2 flex flex-col">
+    <View className="mt-2 flex flex-col h-12">
       {item.Type === "Episode" ? (
         <>
           <Text numberOfLines={2} className="">

components/ItemContent.tsx

@@ -14,16 +14,15 @@ import { SeasonEpisodesCarousel } from "@/components/series/SeasonEpisodesCarous
 import { useImageColors } from "@/hooks/useImageColors";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
+import { getItemImage } from "@/utils/getItemImage";
 import { getLogoImageUrlById } from "@/utils/jellyfin/image/getLogoImageUrlById";
 import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
+import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
 import { chromecastProfile } from "@/utils/profiles/chromecast";
-import iosFmp4 from "@/utils/profiles/iosFmp4";
+import ios from "@/utils/profiles/ios";
 import native from "@/utils/profiles/native";
 import old from "@/utils/profiles/old";
-import {
-  BaseItemDto,
-  MediaSourceInfo,
-} from "@jellyfin/sdk/lib/generated-client/models";
+import { MediaSourceInfo } from "@jellyfin/sdk/lib/generated-client/models";
 import { getMediaInfoApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery } from "@tanstack/react-query";
 import { Image } from "expo-image";
@@ -33,223 +32,287 @@ import { useAtom } from "jotai";
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import { View } from "react-native";
 import { useCastDevice } from "react-native-google-cast";
-import Animated from "react-native-reanimated";
+import Animated, {
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Chromecast } from "./Chromecast";
 import { ItemHeader } from "./ItemHeader";
+import { Loader } from "./Loader";
 import { MediaSourceSelector } from "./MediaSourceSelector";
-import { MoreMoviesWithActor } from "./MoreMoviesWithActor";
 
-export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
-  ({ item }) => {
-    const [api] = useAtom(apiAtom);
-    const [user] = useAtom(userAtom);
+export const ItemContent: React.FC<{ id: string }> = React.memo(({ id }) => {
+  const [api] = useAtom(apiAtom);
+  const [user] = useAtom(userAtom);
 
-    const castDevice = useCastDevice();
-    const navigation = useNavigation();
-    const [settings] = useSettings();
-    const [selectedMediaSource, setSelectedMediaSource] =
-      useState<MediaSourceInfo | null>(null);
-    const [selectedAudioStream, setSelectedAudioStream] = useState<number>(-1);
-    const [selectedSubtitleStream, setSelectedSubtitleStream] =
-      useState<number>(-1);
-    const [maxBitrate, setMaxBitrate] = useState<Bitrate>({
-      key: "Max",
-      value: undefined,
-    });
+  const opacity = useSharedValue(0);
+  const castDevice = useCastDevice();
+  const navigation = useNavigation();
+  const [settings] = useSettings();
+  const [selectedMediaSource, setSelectedMediaSource] =
+    useState<MediaSourceInfo | null>(null);
+  const [selectedAudioStream, setSelectedAudioStream] = useState<number>(-1);
+  const [selectedSubtitleStream, setSelectedSubtitleStream] =
+    useState<number>(0);
+  const [maxBitrate, setMaxBitrate] = useState<Bitrate>({
+    key: "Max",
+    value: undefined,
+  });
 
-    const [loadingLogo, setLoadingLogo] = useState(true);
+  const [loadingLogo, setLoadingLogo] = useState(true);
 
-    const [orientation, setOrientation] = useState(
-      ScreenOrientation.Orientation.PORTRAIT_UP
+  const [orientation, setOrientation] = useState(
+    ScreenOrientation.Orientation.PORTRAIT_UP
+  );
+
+  useEffect(() => {
+    const subscription = ScreenOrientation.addOrientationChangeListener(
+      (event) => {
+        setOrientation(event.orientationInfo.orientation);
+      }
     );
 
-    useEffect(() => {
-      const subscription = ScreenOrientation.addOrientationChangeListener(
-        (event) => {
-          setOrientation(event.orientationInfo.orientation);
-        }
-      );
+    ScreenOrientation.getOrientationAsync().then((initialOrientation) => {
+      setOrientation(initialOrientation);
+    });
 
-      ScreenOrientation.getOrientationAsync().then((initialOrientation) => {
-        setOrientation(initialOrientation);
-      });
+    return () => {
+      ScreenOrientation.removeOrientationChangeListener(subscription);
+    };
+  }, []);
 
-      return () => {
-        ScreenOrientation.removeOrientationChangeListener(subscription);
-      };
-    }, []);
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      opacity: opacity.value,
+    };
+  });
 
-    const headerHeightRef = useRef(400);
+  const fadeIn = () => {
+    opacity.value = withTiming(1, { duration: 300 });
+  };
 
-    useImageColors({ item });
-
-    useEffect(() => {
-      navigation.setOptions({
-        headerRight: () =>
-          item && (
-            <View className="flex flex-row items-center space-x-2">
-              <Chromecast background="blur" width={22} height={22} />
-              {item.Type !== "Program" && (
-                <>
-                  <DownloadItem item={item} />
-                  <PlayedStatus item={item} />
-                </>
-              )}
-            </View>
-          ),
-      });
-    }, [item]);
-
-    useEffect(() => {
-      if (orientation !== ScreenOrientation.Orientation.PORTRAIT_UP) {
-        headerHeightRef.current = 230;
-        return;
+  const fadeOut = (callback: any) => {
+    opacity.value = withTiming(0, { duration: 300 }, (finished) => {
+      if (finished) {
+        runOnJS(callback)();
       }
-      if (item.Type === "Episode") headerHeightRef.current = 400;
-      else if (item.Type === "Movie") headerHeightRef.current = 500;
-      else headerHeightRef.current = 400;
-    }, [item, orientation]);
-
-    const { data: sessionData } = useQuery({
-      queryKey: ["sessionData", item.Id],
-      queryFn: async () => {
-        if (!api || !user?.Id || !item.Id) {
-          return null;
-        }
-        const playbackData = await getMediaInfoApi(api!).getPlaybackInfo(
-          {
-            itemId: item.Id,
-            userId: user?.Id,
-          },
-          {
-            method: "POST",
-          }
-        );
-
-        return playbackData.data;
-      },
-      enabled: !!item.Id && !!api && !!user?.Id,
-      staleTime: 0,
     });
+  };
 
-    const { data: playbackUrl } = useQuery({
-      queryKey: [
-        "playbackUrl",
-        item.Id,
-        maxBitrate,
-        castDevice?.deviceId,
-        selectedMediaSource?.Id,
-        selectedAudioStream,
-        selectedSubtitleStream,
-        settings,
-        sessionData?.PlaySessionId,
-      ],
-      queryFn: async () => {
-        if (!api || !user?.Id) {
-          return null;
-        }
+  const headerHeightRef = useRef(400);
 
-        if (
-          item.Type !== "Program" &&
-          (!sessionData || !selectedMediaSource?.Id)
-        ) {
-          return null;
-        }
+  const {
+    data: item,
+    isLoading,
+    isFetching,
+  } = useQuery({
+    queryKey: ["item", id],
+    queryFn: async () => {
+      const res = await getUserItemData({
+        api,
+        userId: user?.Id,
+        itemId: id,
+      });
 
-        let deviceProfile: any = iosFmp4;
+      return res;
+    },
+    enabled: !!id && !!api,
+    staleTime: 60 * 1000 * 5,
+  });
 
-        if (castDevice?.deviceId) {
-          deviceProfile = chromecastProfile;
-        } else if (settings?.deviceProfile === "Native") {
-          deviceProfile = native;
-        } else if (settings?.deviceProfile === "Old") {
-          deviceProfile = old;
-        }
+  const [localItem, setLocalItem] = useState(item);
 
-        console.log("playbackUrl...");
-
-        const url = await getStreamUrl({
-          api,
-          userId: user.Id,
-          item,
-          startTimeTicks: item.UserData?.PlaybackPositionTicks || 0,
-          maxStreamingBitrate: maxBitrate.value,
-          sessionData,
-          deviceProfile,
-          audioStreamIndex: selectedAudioStream,
-          subtitleStreamIndex: selectedSubtitleStream,
-          forceDirectPlay: settings?.forceDirectPlay,
-          height: maxBitrate.height,
-          mediaSourceId: selectedMediaSource?.Id,
+  useEffect(() => {
+    if (item) {
+      if (localItem) {
+        // Fade out current item
+        fadeOut(() => {
+          // Update local item after fade out
+          setLocalItem(item);
+          // Then fade in
+          fadeIn();
         });
+      } else {
+        // If there's no current item, just set and fade in
+        setLocalItem(item);
+        fadeIn();
+      }
+    } else {
+      // If item is null, fade out and clear local item
+      fadeOut(() => setLocalItem(null));
+    }
+  }, [item]);
 
-        console.info("Stream URL:", url);
-
-        return url;
-      },
-      enabled: !!api && !!user?.Id && !!item.Id,
-      staleTime: 0,
+  useEffect(() => {
+    navigation.setOptions({
+      headerRight: () =>
+        item && (
+          <View className="flex flex-row items-center space-x-2">
+            <Chromecast background="blur" width={22} height={22} />
+            <DownloadItem item={item} />
+            <PlayedStatus item={item} />
+          </View>
+        ),
     });
+  }, [item]);
 
-    const logoUrl = useMemo(() => getLogoImageUrlById({ api, item }), [item]);
+  useEffect(() => {
+    if (orientation !== ScreenOrientation.Orientation.PORTRAIT_UP) {
+      headerHeightRef.current = 230;
+      return;
+    }
+    if (item?.Type === "Episode") headerHeightRef.current = 400;
+    else if (item?.Type === "Movie") headerHeightRef.current = 500;
+    else headerHeightRef.current = 400;
+  }, [item]);
 
-    const loading = useMemo(() => {
-      return Boolean(logoUrl && loadingLogo);
-    }, [loadingLogo, logoUrl]);
+  const { data: sessionData } = useQuery({
+    queryKey: ["sessionData", item?.Id],
+    queryFn: async () => {
+      if (!api || !user?.Id || !item?.Id) return null;
+      const playbackData = await getMediaInfoApi(api!).getPlaybackInfo({
+        itemId: item?.Id,
+        userId: user?.Id,
+      });
 
-    const insets = useSafeAreaInsets();
+      return playbackData.data;
+    },
+    enabled: !!item?.Id && !!api && !!user?.Id,
+    staleTime: 0,
+  });
 
-    return (
-      <View
-        className="flex-1 relative"
-        style={{
-          paddingLeft: insets.left,
-          paddingRight: insets.right,
-        }}
-      >
-        <ParallaxScrollView
-          className={`flex-1 ${loading ? "opacity-0" : "opacity-100"}`}
-          headerHeight={headerHeightRef.current}
-          headerImage={
-            <>
-              <Animated.View style={[{ flex: 1 }]}>
+  const { data: playbackUrl } = useQuery({
+    queryKey: [
+      "playbackUrl",
+      item?.Id,
+      maxBitrate,
+      castDevice,
+      selectedMediaSource,
+      selectedAudioStream,
+      selectedSubtitleStream,
+      settings,
+    ],
+    queryFn: async () => {
+      if (!api || !user?.Id || !sessionData || !selectedMediaSource?.Id)
+        return null;
+
+      let deviceProfile: any = ios;
+
+      if (castDevice?.deviceId) {
+        deviceProfile = chromecastProfile;
+      } else if (settings?.deviceProfile === "Native") {
+        deviceProfile = native;
+      } else if (settings?.deviceProfile === "Old") {
+        deviceProfile = old;
+      }
+
+      const url = await getStreamUrl({
+        api,
+        userId: user.Id,
+        item,
+        startTimeTicks: item?.UserData?.PlaybackPositionTicks || 0,
+        maxStreamingBitrate: maxBitrate.value,
+        sessionData,
+        deviceProfile,
+        audioStreamIndex: selectedAudioStream,
+        subtitleStreamIndex: selectedSubtitleStream,
+        forceDirectPlay: settings?.forceDirectPlay,
+        height: maxBitrate.height,
+        mediaSourceId: selectedMediaSource.Id,
+      });
+
+      console.info("Stream URL:", url);
+
+      return url;
+    },
+    enabled: !!sessionData && !!api && !!user?.Id && !!item?.Id,
+    staleTime: 0,
+  });
+
+  const logoUrl = useMemo(() => getLogoImageUrlById({ api, item }), [item]);
+  const themeImageColorSource = useMemo(() => {
+    if (!api || !item) return;
+    return getItemImage({
+      item,
+      api,
+      variant: "Primary",
+      quality: 80,
+      width: 300,
+    });
+  }, [api, item]);
+
+  useImageColors(themeImageColorSource?.uri);
+
+  const loading = useMemo(() => {
+    return Boolean(isLoading || isFetching || (logoUrl && loadingLogo));
+  }, [isLoading, isFetching, loadingLogo, logoUrl]);
+
+  const insets = useSafeAreaInsets();
+
+  return (
+    <View
+      className="flex-1 relative"
+      style={{
+        paddingLeft: insets.left,
+        paddingRight: insets.right,
+      }}
+    >
+      {loading && (
+        <View className="absolute top-0 left-0 right-0 bottom-0 w-full h-full flex flex-col justify-center items-center z-50">
+          <Loader />
+        </View>
+      )}
+      <ParallaxScrollView
+        className={`flex-1 ${loading ? "opacity-0" : "opacity-100"}`}
+        headerHeight={headerHeightRef.current}
+        headerImage={
+          <>
+            <Animated.View style={[animatedStyle, { flex: 1 }]}>
+              {localItem && (
                 <ItemImage
+                  useThemeColor
                   variant={
-                    item.Type === "Movie" && logoUrl ? "Backdrop" : "Primary"
+                    localItem.Type === "Movie" && logoUrl
+                      ? "Backdrop"
+                      : "Primary"
                   }
-                  item={item}
+                  item={localItem}
                   style={{
                     width: "100%",
                     height: "100%",
                   }}
                 />
-              </Animated.View>
-            </>
-          }
-          logo={
-            <>
-              {logoUrl ? (
-                <Image
-                  source={{
-                    uri: logoUrl,
-                  }}
-                  style={{
-                    height: 130,
-                    width: "100%",
-                    resizeMode: "contain",
-                  }}
-                  onLoad={() => setLoadingLogo(false)}
-                  onError={() => setLoadingLogo(false)}
-                />
-              ) : null}
-            </>
-          }
-        >
-          <View className="flex flex-col bg-transparent shrink">
-            <View className="flex flex-col px-4 w-full space-y-2 pt-2 mb-2 shrink">
-              <ItemHeader item={item} className="mb-4" />
-              {item.Type !== "Program" && (
+              )}
+            </Animated.View>
+          </>
+        }
+        logo={
+          <>
+            {logoUrl ? (
+              <Image
+                source={{
+                  uri: logoUrl,
+                }}
+                style={{
+                  height: 130,
+                  width: "100%",
+                  resizeMode: "contain",
+                }}
+                onLoad={() => setLoadingLogo(false)}
+                onError={() => setLoadingLogo(false)}
+              />
+            ) : null}
+          </>
+        }
+      >
+        <View className="flex flex-col bg-transparent shrink">
+          <View className="flex flex-col px-4 w-full space-y-2 pt-2 mb-2 shrink">
+            <Animated.View style={[animatedStyle, { flex: 1 }]}>
+              <ItemHeader item={localItem} className="mb-4" />
+              {localItem ? (
                 <View className="flex flex-row items-center justify-start w-full h-16">
                   <BitrateSelector
                     className="mr-1"
@@ -258,7 +321,7 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
                   />
                   <MediaSourceSelector
                     className="mr-1"
-                    item={item}
+                    item={localItem}
                     onChange={setSelectedMediaSource}
                     selected={selectedMediaSource}
                   />
@@ -278,45 +341,33 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
                     </>
                   )}
                 </View>
+              ) : (
+                <View className="h-16">
+                  <View className="bg-neutral-900 h-4 w-2/4 rounded-md mb-1"></View>
+                  <View className="bg-neutral-900 h-10 w-3/4 rounded-lg"></View>
+                </View>
               )}
+            </Animated.View>
 
-              <PlayButton item={item} url={playbackUrl} className="grow" />
-            </View>
-
-            {item.Type === "Episode" && (
-              <SeasonEpisodesCarousel item={item} loading={loading} />
-            )}
-
-            <OverviewText text={item.Overview} className="px-4 my-4" />
-            {item.Type !== "Program" && (
-              <>
-                <CastAndCrew item={item} className="mb-4" loading={loading} />
-
-                {item.People && item.People.length > 0 && (
-                  <View className="mb-4">
-                    {item.People.slice(0, 3).map((person) => (
-                      <MoreMoviesWithActor
-                        currentItem={item}
-                        key={person.Id}
-                        actorId={person.Id!}
-                        className="mb-4"
-                      />
-                    ))}
-                  </View>
-                )}
-
-                {item.Type === "Episode" && (
-                  <CurrentSeries item={item} className="mb-4" />
-                )}
-
-                <SimilarItems itemId={item.Id} />
-              </>
-            )}
-
-            <View className="h-16"></View>
+            <PlayButton item={item} url={playbackUrl} className="grow" />
           </View>
-        </ParallaxScrollView>
-      </View>
-    );
-  }
-);
+
+          {item?.Type === "Episode" && (
+            <SeasonEpisodesCarousel item={item} loading={loading} />
+          )}
+
+          <OverviewText text={item?.Overview} className="px-4 mb-4" />
+
+          <CastAndCrew item={item} className="mb-4" loading={loading} />
+
+          {item?.Type === "Episode" && (
+            <CurrentSeries item={item} className="mb-4" />
+          )}
+          <SimilarItems itemId={item?.Id} />
+
+          <View className="h-16"></View>
+        </View>
+      </ParallaxScrollView>
+    </View>
+  );
+});

components/ItemHeader.tsx

@@ -3,8 +3,6 @@ import { View, ViewProps } from "react-native";
 import { MoviesTitleHeader } from "./movies/MoviesTitleHeader";
 import { Ratings } from "./Ratings";
 import { EpisodeTitleHeader } from "./series/EpisodeTitleHeader";
-import { GenreTags } from "./GenreTags";
-import React from "react";
 
 interface Props extends ViewProps {
   item?: BaseItemDto | null;
@@ -14,7 +12,7 @@ export const ItemHeader: React.FC<Props> = ({ item, ...props }) => {
   if (!item)
     return (
       <View
-        className="flex flex-col space-y-1.5 w-full items-start h-32"
+        className="flex flex-col space-y-1.5 w-full items-start h-24"
         {...props}
       >
         <View className="w-1/3 h-6 bg-neutral-900 rounded" />
@@ -25,22 +23,16 @@ export const ItemHeader: React.FC<Props> = ({ item, ...props }) => {
     );
 
   return (
-    <View className="flex flex-col" {...props}>
-      <View className="flex flex-col" {...props}>
-        <Ratings item={item} className="mb-2" />
-        {item.Type === "Episode" && (
-          <>
-            <EpisodeTitleHeader item={item} />
-            <GenreTags genres={item.Genres!} />
-          </>
-        )}
-        {item.Type === "Movie" && (
-          <>
-            <MoviesTitleHeader item={item} />
-            <GenreTags genres={item.Genres!} />
-          </>
-        )}
-      </View>
+    <View
+      style={{
+        minHeight: 96,
+      }}
+      className="flex flex-col"
+      {...props}
+    >
+      <Ratings item={item} className="mb-2" />
+      {item.Type === "Episode" && <EpisodeTitleHeader item={item} />}
+      {item.Type === "Movie" && <MoviesTitleHeader item={item} />}
     </View>
   );
 };

components/List.tsx

@@ -0,0 +1,19 @@
+import { View, ViewProps } from "react-native";
+import { Text } from "@/components/common/Text";
+import { PropsWithChildren } from "react";
+
+interface Props extends ViewProps {}
+
+export const List: React.FC<PropsWithChildren<Props>> = ({
+  children,
+  ...props
+}) => {
+  return (
+    <View
+      className="flex flex-col rounded-xl overflow-hidden border-neutral-800 divide-y-2 divide-solid divide-neutral-800"
+      {...props}
+    >
+      {children}
+    </View>
+  );
+};

components/ListItem.tsx

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

components/MediaSourceSelector.tsx

@@ -7,7 +7,6 @@ import { useEffect, useMemo } from "react";
 import { TouchableOpacity, View } from "react-native";
 import * as DropdownMenu from "zeego/dropdown-menu";
 import { Text } from "./common/Text";
-import { convertBitsToMegabitsOrGigabits } from "@/utils/bToMb";
 
 interface Props extends React.ComponentProps<typeof View> {
   item: BaseItemDto;
@@ -79,9 +78,7 @@ export const MediaSourceSelector: React.FC<Props> = ({
               }}
             >
               <DropdownMenu.ItemTitle>
-                {`${name(source.Name)} - ${convertBitsToMegabitsOrGigabits(
-                  source.Size
-                )}`}
+                {name(source.Name)}
               </DropdownMenu.ItemTitle>
             </DropdownMenu.Item>
           ))}

components/MoreMoviesWithActor.tsx

@@ -1,100 +0,0 @@
-import React from "react";
-import { View, ViewProps } from "react-native";
-import { Text } from "@/components/common/Text";
-import { HorizontalScroll } from "@/components/common/HorrizontalScroll";
-import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
-import MoviePoster from "@/components/posters/MoviePoster";
-import { ItemCardText } from "@/components/ItemCardText";
-import { useAtom } from "jotai";
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { useQuery } from "@tanstack/react-query";
-import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
-
-interface Props extends ViewProps {
-  actorId: string;
-  currentItem: BaseItemDto;
-}
-
-export const MoreMoviesWithActor: React.FC<Props> = ({
-  actorId,
-  currentItem,
-  ...props
-}) => {
-  const [api] = useAtom(apiAtom);
-  const [user] = useAtom(userAtom);
-
-  const { data: actor } = useQuery({
-    queryKey: ["actor", actorId],
-    queryFn: async () => {
-      if (!api || !user?.Id) return null;
-      return await getUserItemData({
-        api,
-        userId: user.Id,
-        itemId: actorId,
-      });
-    },
-    enabled: !!api && !!user?.Id && !!actorId,
-  });
-
-  const { data: items, isLoading } = useQuery({
-    queryKey: ["actor", "movies", actorId, currentItem.Id],
-    queryFn: async () => {
-      if (!api || !user?.Id) return [];
-      const response = await getItemsApi(api).getItems({
-        userId: user.Id,
-        personIds: [actorId],
-        limit: 20,
-        sortOrder: ["Descending"],
-        includeItemTypes: ["Movie", "Series"],
-        recursive: true,
-        fields: ["ParentId", "PrimaryImageAspectRatio"],
-        sortBy: ["PremiereDate"],
-        collapseBoxSetItems: false,
-        excludeItemIds: [currentItem.SeriesId || "", currentItem.Id || ""],
-      });
-
-      // Remove duplicates based on item ID
-      const uniqueItems =
-        response.data.Items?.reduce((acc, current) => {
-          const x = acc.find((item) => item.Id === current.Id);
-          if (!x) {
-            return acc.concat([current]);
-          } else {
-            return acc;
-          }
-        }, [] as BaseItemDto[]) || [];
-
-      return uniqueItems;
-    },
-    enabled: !!api && !!user?.Id && !!actorId,
-  });
-
-  if (items?.length === 0) return null;
-
-  return (
-    <View {...props}>
-      <Text className="text-lg font-bold mb-2 px-4">
-        More with {actor?.Name}
-      </Text>
-      <HorizontalScroll
-        data={items}
-        loading={isLoading}
-        height={247}
-        renderItem={(item: BaseItemDto, idx: number) => (
-          <TouchableItemRouter
-            key={idx}
-            item={item}
-            className="flex flex-col w-28"
-          >
-            <View>
-              <MoviePoster item={item} />
-              <ItemCardText item={item} />
-            </View>
-          </TouchableItemRouter>
-        )}
-      />
-    </View>
-  );
-};

components/OverviewText.tsx

@@ -19,7 +19,7 @@ export const OverviewText: React.FC<Props> = ({
 
   return (
     <View className="flex flex-col" {...props}>
-      <Text className="text-lg font-bold mb-2">Overview</Text>
+      <Text className="text-xl font-bold mb-2">Overview</Text>
       <TouchableOpacity
         onPress={() =>
           setLimit((prev) =>

components/PlatformBlurView.tsx

@@ -1,35 +0,0 @@
-import { BlurView } from "expo-blur";
-import React from "react";
-import { Platform, View, ViewProps } from "react-native";
-interface Props extends ViewProps {
-  blurAmount?: number;
-  blurType?: "light" | "dark" | "xlight";
-}
-
-/**
- * BlurView for iOS and simple View for Android
- */
-export const PlatformBlurView: React.FC<Props> = ({
-  blurAmount = 100,
-  blurType = "light",
-  style,
-  children,
-  ...props
-}) => {
-  if (Platform.OS === "ios") {
-    return (
-      <BlurView style={style} intensity={blurAmount} {...props}>
-        {children}
-      </BlurView>
-    );
-  }
-
-  return (
-    <View
-      style={[{ backgroundColor: "rgba(50, 50, 50, 0.9)" }, style]}
-      {...props}
-    >
-      {children}
-    </View>
-  );
-};

components/PlayButton.tsx

@@ -27,7 +27,6 @@ import Animated, {
 } from "react-native-reanimated";
 import { Button } from "./Button";
 import { Text } from "./common/Text";
-import { useRouter } from "expo-router";
 
 interface Props extends React.ComponentProps<typeof Button> {
   item?: BaseItemDto | null;
@@ -46,8 +45,6 @@ export const PlayButton: React.FC<Props> = ({ item, url, ...props }) => {
   const [colorAtom] = useAtom(itemThemeColorAtom);
   const [api] = useAtom(apiAtom);
 
-  const router = useRouter();
-
   const memoizedItem = useMemo(() => item, [item?.Id]); // Memoize the item
   const memoizedColor = useMemo(() => colorAtom, [colorAtom]); // Memoize the color
 
@@ -60,13 +57,12 @@ export const PlayButton: React.FC<Props> = ({ item, url, ...props }) => {
 
   const directStream = useMemo(() => {
     return !url?.includes("m3u8");
-  }, [url]);
+  }, []);
 
   const onPress = async () => {
     if (!url || !item) return;
     if (!client) {
       setCurrentlyPlayingState({ item, url });
-      router.push("/play");
       return;
     }
     const options = ["Chromecast", "Device", "Cancel"];
@@ -164,7 +160,6 @@ export const PlayButton: React.FC<Props> = ({ item, url, ...props }) => {
             break;
           case 1:
             setCurrentlyPlayingState({ item, url });
-            router.push("/play");
             break;
           case cancelButtonIndex:
             break;
@@ -231,7 +226,7 @@ export const PlayButton: React.FC<Props> = ({ item, url, ...props }) => {
     backgroundColor: interpolateColor(
       colorChangeProgress.value,
       [0, 1],
-      [startColor.value.primary, endColor.value.primary]
+      [startColor.value.average, endColor.value.average]
     ),
   }));
 
@@ -284,7 +279,7 @@ export const PlayButton: React.FC<Props> = ({ item, url, ...props }) => {
         </View>
 
         <Animated.View
-          style={[animatedAverageStyle, { opacity: 0.5 }]}
+          style={[animatedAverageStyle]}
           className="absolute w-full h-full top-0 left-0 rounded-xl"
         />
         <View

components/PlayedStatus.tsx

@@ -21,17 +21,11 @@ export const PlayedStatus: React.FC<Props> = ({ item, ...props }) => {
 
   const invalidateQueries = () => {
     queryClient.invalidateQueries({
-      queryKey: ["item", item.Id],
+      queryKey: ["item"],
     });
     queryClient.invalidateQueries({
       queryKey: ["resumeItems"],
     });
-    queryClient.invalidateQueries({
-      queryKey: ["continueWatching"],
-    });
-    queryClient.invalidateQueries({
-      queryKey: ["nextUp-all"],
-    });
     queryClient.invalidateQueries({
       queryKey: ["nextUp"],
     });

components/SimilarItems.tsx

@@ -10,8 +10,6 @@ import { ScrollView, TouchableOpacity, View, ViewProps } from "react-native";
 import { Text } from "./common/Text";
 import { ItemCardText } from "./ItemCardText";
 import { Loader } from "./Loader";
-import { HorizontalScroll } from "./common/HorrizontalScroll";
-import { TouchableItemRouter } from "./common/TouchableItemRouter";
 
 interface SimilarItemsProps extends ViewProps {
   itemId?: string | null;
@@ -48,24 +46,29 @@ export const SimilarItems: React.FC<SimilarItemsProps> = ({
   return (
     <View {...props}>
       <Text className="px-4 text-lg font-bold mb-2">Similar items</Text>
-      <HorizontalScroll
-        data={movies}
-        loading={isLoading}
-        height={247}
-        noItemsText="No similar items found"
-        renderItem={(item: BaseItemDto, idx: number) => (
-          <TouchableItemRouter
-            key={idx}
-            item={item}
-            className="flex flex-col w-28"
-          >
-            <View>
-              <MoviePoster item={item} />
-              <ItemCardText item={item} />
-            </View>
-          </TouchableItemRouter>
-        )}
-      />
+      {isLoading ? (
+        <View className="my-12">
+          <Loader />
+        </View>
+      ) : (
+        <ScrollView horizontal>
+          <View className="px-4 flex flex-row gap-x-2">
+            {movies.map((item) => (
+              <TouchableOpacity
+                key={item.Id}
+                onPress={() => router.push(`/items/page?id=${item.Id}`)}
+                className="flex flex-col w-32"
+              >
+                <MoviePoster item={item} />
+                <ItemCardText item={item} />
+              </TouchableOpacity>
+            ))}
+          </View>
+        </ScrollView>
+      )}
+      {movies.length === 0 && (
+        <Text className="px-4 text-neutral-500">No similar items</Text>
+      )}
     </View>
   );
 };

components/common/HeaderBackButton.tsx

@@ -1,5 +1,4 @@
 import {
-  Platform,
   TouchableOpacity,
   TouchableOpacityProps,
   View,
@@ -22,7 +21,7 @@ export const HeaderBackButton: React.FC<Props> = ({
 }) => {
   const router = useRouter();
 
-  if (background === "transparent" && Platform.OS !== "android")
+  if (background === "transparent")
     return (
       <BlurView
         {...props}
@@ -53,7 +52,7 @@ export const HeaderBackButton: React.FC<Props> = ({
         className="drop-shadow-2xl"
         name="arrow-back"
         size={24}
-        color="white"
+        color="#077DF2"
       />
     </TouchableOpacity>
   );

components/common/HorrizontalScroll.tsx

@@ -22,7 +22,6 @@ interface HorizontalScrollProps<T>
   height?: number;
   loading?: boolean;
   extraData?: any;
-  noItemsText?: string;
 }
 
 export const HorizontalScroll = forwardRef<
@@ -39,7 +38,6 @@ export const HorizontalScroll = forwardRef<
       loading = false,
       height = 164,
       extraData,
-      noItemsText,
       ...props
     }: HorizontalScrollProps<T>,
     ref: React.ForwardedRef<HorizontalScrollRef>
@@ -93,11 +91,10 @@ export const HorizontalScroll = forwardRef<
         }}
         ListEmptyComponent={() => (
           <View className="flex-1 justify-center items-center">
-            <Text className="text-center text-gray-500">
-              {noItemsText || "No data available"}
-            </Text>
+            <Text className="text-center text-gray-500">No data available</Text>
           </View>
         )}
+        {...props}
       />
     );
   }

components/common/ItemImage.tsx

@@ -22,6 +22,7 @@ interface Props extends ImageProps {
     | "Thumb";
   quality?: number;
   width?: number;
+  useThemeColor?: boolean;
   onError?: () => void;
 }
 
@@ -30,6 +31,7 @@ export const ItemImage: React.FC<Props> = ({
   variant = "Primary",
   quality = 90,
   width = 1000,
+  useThemeColor = false,
   onError,
   ...props
 }) => {

components/common/TouchableItemRouter.tsx

@@ -8,46 +8,6 @@ interface Props extends TouchableOpacityProps {
   item: BaseItemDto;
 }
 
-export const itemRouter = (item: BaseItemDto, from: string) => {
-  if (item.CollectionType === "livetv") {
-    return `/(auth)/(tabs)/${from}/livetv`;
-  }
-
-  if (item.Type === "Series") {
-    return `/(auth)/(tabs)/${from}/series/${item.Id}`;
-  }
-
-  if (item.Type === "MusicAlbum") {
-    return `/(auth)/(tabs)/${from}/albums/${item.Id}`;
-  }
-
-  if (item.Type === "Audio") {
-    return `/(auth)/(tabs)/${from}/albums/${item.AlbumId}`;
-  }
-
-  if (item.Type === "MusicArtist") {
-    return `/(auth)/(tabs)/${from}/artists/${item.Id}`;
-  }
-
-  if (item.Type === "Person") {
-    return `/(auth)/(tabs)/${from}/actors/${item.Id}`;
-  }
-
-  if (item.Type === "BoxSet") {
-    return `/(auth)/(tabs)/${from}/collections/${item.Id}`;
-  }
-
-  if (item.Type === "UserView") {
-    return `/(auth)/(tabs)/${from}/collections/${item.Id}`;
-  }
-
-  if (item.Type === "CollectionFolder") {
-    return `/(auth)/(tabs)/(libraries)/${item.Id}`;
-  }
-
-  return `/(auth)/(tabs)/${from}/items/page?id=${item.Id}`;
-};
-
 export const TouchableItemRouter: React.FC<PropsWithChildren<Props>> = ({
   item,
   children,
@@ -63,9 +23,54 @@ export const TouchableItemRouter: React.FC<PropsWithChildren<Props>> = ({
       <TouchableOpacity
         onPress={() => {
           Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
-          const url = itemRouter(item, from);
-          // @ts-ignore
-          router.push(url);
+
+          if (item.Type === "Series") {
+            router.push(`/(auth)/(tabs)/${from}/series/${item.Id}`);
+            return;
+          }
+
+          if (item.Type === "MusicAlbum") {
+            router.push(`/(auth)/(tabs)/${from}/albums/${item.Id}`);
+            return;
+          }
+
+          if (item.Type === "Audio") {
+            router.push(`/(auth)/(tabs)/${from}/albums/${item.AlbumId}`);
+            return;
+          }
+
+          if (item.Type === "MusicArtist") {
+            router.push(`/(auth)/(tabs)/${from}/artists/${item.Id}`);
+            return;
+          }
+
+          if (item.Type === "Person") {
+            router.push(`/(auth)/(tabs)/${from}/actors/${item.Id}`);
+            return;
+          }
+
+          if (item.Type === "BoxSet") {
+            router.push(`/(auth)/(tabs)/${from}/collections/${item.Id}`);
+            return;
+          }
+
+          if (item.Type === "UserView") {
+            router.push(`/(auth)/(tabs)/${from}/collections/${item.Id}`);
+            return;
+          }
+
+          if (item.Type === "CollectionFolder") {
+            router.push(`/(auth)/(tabs)/(libraries)/${item.Id}`);
+            return;
+          }
+
+          // Same as default
+          // if (item.Type === "Episode") {
+          //   router.push(`/items/${item.Id}`);
+          //   return;
+          // }
+
+          router.push(`/(auth)/(tabs)/${from}/items/page?id=${item.Id}`);
         }}
         {...props}
       >

components/downloads/ActiveDownloads.tsx

@@ -1,191 +0,0 @@
-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, startDownload } = 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.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();
-        setProcesses((prev) => prev.filter((p) => p.id !== id));
-      }
-    },
-    onSuccess: () => {
-      toast.success("Download canceled");
-    },
-    onError: (e) => {
-      console.log(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, true);
-  };
-
-  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/EpisodeCard.tsx

@@ -1,41 +1,36 @@
+import React, { useCallback } from "react";
+import { TouchableOpacity } from "react-native";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import * as ContextMenu from "zeego/context-menu";
 import * as Haptics from "expo-haptics";
-import React, { useCallback, useMemo, useRef } from "react";
-import { TouchableOpacity, View } from "react-native";
-import {
-  ActionSheetProvider,
-  useActionSheet,
-} from "@expo/react-native-action-sheet";
+import * as FileSystem from "expo-file-system";
+import { useAtom } from "jotai";
 
-import { useFileOpener } from "@/hooks/useDownloadedFileOpener";
 import { Text } from "../common/Text";
-import { useDownload } from "@/providers/DownloadProvider";
-import { storage } from "@/utils/mmkv";
-import { Image } from "expo-image";
-import { ItemCardText } from "../ItemCardText";
-import { Ionicons } from "@expo/vector-icons";
+import { useFiles } from "@/hooks/useFiles";
+import { useSettings } from "@/utils/atoms/settings";
+import { usePlayback } from "@/providers/PlaybackProvider";
 
 interface EpisodeCardProps {
   item: BaseItemDto;
 }
 
 /**
- * EpisodeCard component displays an episode with action sheet options.
+ * EpisodeCard component displays an episode with context menu options.
  * @param {EpisodeCardProps} props - The component props.
  * @returns {React.ReactElement} The rendered EpisodeCard component.
  */
 export const EpisodeCard: React.FC<EpisodeCardProps> = ({ item }) => {
-  const { deleteFile } = useDownload();
-  const { openFile } = useFileOpener();
-  const { showActionSheetWithOptions } = useActionSheet();
+  const { deleteFile } = useFiles();
 
-  const base64Image = useMemo(() => {
-    return storage.getString(item.Id!);
-  }, []);
+  const { startDownloadedFilePlayback } = usePlayback();
 
-  const handleOpenFile = useCallback(() => {
-    openFile(item);
-  }, [item, openFile]);
+  const handleOpenFile = useCallback(async () => {
+    startDownloadedFilePlayback({
+      item,
+      url: `${FileSystem.documentDirectory}/${item.Id}.mp4`,
+    });
+  }, [item, startDownloadedFilePlayback]);
 
   /**
    * Handles deleting the file with haptic feedback.
@@ -47,70 +42,43 @@ export const EpisodeCard: React.FC<EpisodeCardProps> = ({ item }) => {
     }
   }, [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]);
+  const contextMenuOptions = [
+    {
+      label: "Delete",
+      onSelect: handleDeleteFile,
+      destructive: true,
+    },
+  ];
 
   return (
-    <TouchableOpacity
-      onPress={handleOpenFile}
-      onLongPress={showActionSheet}
-      className="flex flex-col"
-    >
-      {base64Image ? (
-        <View className="w-44 aspect-video rounded-lg overflow-hidden mr-2">
-          <Image
-            source={{
-              uri: `data:image/jpeg;base64,${base64Image}`,
-            }}
-            style={{
-              width: "100%",
-              height: "100%",
-              resizeMode: "cover",
-            }}
-          />
-        </View>
-      ) : (
-        <View className="w-44 aspect-video rounded-lg bg-neutral-900 mr-2 flex items-center justify-center">
-          <Ionicons
-            name="image-outline"
-            size={24}
-            color="gray"
-            className="self-center mt-16"
-          />
-        </View>
-      )}
-      <ItemCardText item={item} />
-    </TouchableOpacity>
+    <ContextMenu.Root>
+      <ContextMenu.Trigger>
+        <TouchableOpacity
+          onPress={handleOpenFile}
+          className="bg-neutral-900 border border-neutral-800 rounded-2xl p-4"
+        >
+          <Text className="font-bold">{item.Name}</Text>
+          <Text className="text-xs opacity-50">Episode {item.IndexNumber}</Text>
+        </TouchableOpacity>
+      </ContextMenu.Trigger>
+      <ContextMenu.Content
+        alignOffset={0}
+        avoidCollisions
+        collisionPadding={10}
+        loop={false}
+      >
+        {contextMenuOptions.map((option) => (
+          <ContextMenu.Item
+            key={option.label}
+            onSelect={option.onSelect}
+            destructive={option.destructive}
+          >
+            <ContextMenu.ItemTitle style={{ color: "red" }}>
+              {option.label}
+            </ContextMenu.ItemTitle>
+          </ContextMenu.Item>
+        ))}
+      </ContextMenu.Content>
+    </ContextMenu.Root>
   );
 };
-
-// Wrap the parent component with ActionSheetProvider
-export const EpisodeCardWithActionSheet: React.FC<EpisodeCardProps> = (
-  props
-) => (
-  <ActionSheetProvider>
-    <EpisodeCard {...props} />
-  </ActionSheetProvider>
-);

components/downloads/MovieCard.tsx

@@ -1,43 +1,39 @@
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import * as Haptics from "expo-haptics";
-import React, { useCallback, useMemo } from "react";
+import React, { useCallback } from "react";
 import { TouchableOpacity, View } from "react-native";
-import {
-  ActionSheetProvider,
-  useActionSheet,
-} from "@expo/react-native-action-sheet";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import * as ContextMenu from "zeego/context-menu";
+import * as FileSystem from "expo-file-system";
+import * as Haptics from "expo-haptics";
+import { useAtom } from "jotai";
 
-import { runtimeTicksToMinutes } from "@/utils/time";
 import { Text } from "../common/Text";
+import { useFiles } from "@/hooks/useFiles";
+import { runtimeTicksToMinutes } from "@/utils/time";
 
-import { useFileOpener } 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 { ItemCardText } from "../ItemCardText";
+import { useSettings } from "@/utils/atoms/settings";
+import { usePlayback } from "@/providers/PlaybackProvider";
 
 interface MovieCardProps {
   item: BaseItemDto;
 }
 
 /**
- * MovieCard component displays a movie with action sheet options.
+ * MovieCard component displays a movie with context menu 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 } = useFileOpener();
-  const { showActionSheetWithOptions } = useActionSheet();
+  const { deleteFile } = useFiles();
+  const [settings] = useSettings();
+
+  const { startDownloadedFilePlayback } = usePlayback();
 
   const handleOpenFile = useCallback(() => {
-    openFile(item);
-  }, [item, openFile]);
-
-  const base64Image = useMemo(() => {
-    return storage.getString(item.Id!);
-  }, []);
+    startDownloadedFilePlayback({
+      item,
+      url: `${FileSystem.documentDirectory}/${item.Id}.mp4`,
+    });
+  }, [item, startDownloadedFilePlayback]);
 
   /**
    * Handles deleting the file with haptic feedback.
@@ -49,64 +45,48 @@ export const MovieCard: React.FC<MovieCardProps> = ({ item }) => {
     }
   }, [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]);
+  const contextMenuOptions = [
+    {
+      label: "Delete",
+      onSelect: handleDeleteFile,
+      destructive: true,
+    },
+  ];
 
   return (
-    <TouchableOpacity onPress={handleOpenFile} onLongPress={showActionSheet}>
-      {base64Image ? (
-        <View className="w-28 aspect-[10/15] rounded-lg overflow-hidden mr-2 border border-neutral-900">
-          <Image
-            source={{
-              uri: `data:image/jpeg;base64,${base64Image}`,
-            }}
-            style={{
-              width: "100%",
-              height: "100%",
-              resizeMode: "cover",
-            }}
-          />
-        </View>
-      ) : (
-        <View className="w-28 aspect-[10/15] rounded-lg bg-neutral-900 mr-2 flex items-center justify-center">
-          <Ionicons
-            name="image-outline"
-            size={24}
-            color="gray"
-            className="self-center mt-16"
-          />
-        </View>
-      )}
-      <ItemCardText item={item} />
-    </TouchableOpacity>
+    <ContextMenu.Root>
+      <ContextMenu.Trigger>
+        <TouchableOpacity
+          onPress={handleOpenFile}
+          className="bg-neutral-900 border border-neutral-800 rounded-2xl p-4"
+        >
+          <Text className="font-bold">{item.Name}</Text>
+          <View className="flex flex-col">
+            <Text className="text-xs opacity-50">{item.ProductionYear}</Text>
+            <Text className="text-xs opacity-50">
+              {runtimeTicksToMinutes(item.RunTimeTicks)}
+            </Text>
+          </View>
+        </TouchableOpacity>
+      </ContextMenu.Trigger>
+      <ContextMenu.Content
+        loop={false}
+        alignOffset={0}
+        avoidCollisions={false}
+        collisionPadding={0}
+      >
+        {contextMenuOptions.map((option) => (
+          <ContextMenu.Item
+            key={option.label}
+            onSelect={option.onSelect}
+            destructive={option.destructive}
+          >
+            <ContextMenu.ItemTitle style={{ color: "red" }}>
+              {option.label}
+            </ContextMenu.ItemTitle>
+          </ContextMenu.Item>
+        ))}
+      </ContextMenu.Content>
+    </ContextMenu.Root>
   );
 };
-
-// Wrap the parent component with ActionSheetProvider
-export const MovieCardWithActionSheet: React.FC<MovieCardProps> = (props) => (
-  <ActionSheetProvider>
-    <MovieCard {...props} />
-  </ActionSheetProvider>
-);

components/downloads/SeriesCard.tsx

@@ -1,5 +1,5 @@
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { ScrollView, View } from "react-native";
+import { View } from "react-native";
 import { EpisodeCard } from "./EpisodeCard";
 import { Text } from "../common/Text";
 import { useMemo } from "react";
@@ -22,32 +22,26 @@ export const SeriesCard: React.FC<{ items: BaseItemDto[] }> = ({ items }) => {
     );
   }, [items]);
 
-  const sortByIndex = (a: BaseItemDto, b: BaseItemDto) => {
-    return a.IndexNumber! > b.IndexNumber! ? 1 : -1;
-  };
-
   return (
     <View>
-      <View className="flex flex-row items-center justify-between px-4">
-        <Text className="text-lg font-bold shrink">{items[0].SeriesName}</Text>
+      <View className="flex flex-row items-center justify-between">
+        <Text className="text-2xl font-bold shrink">{items[0].SeriesName}</Text>
         <View className="bg-purple-600 rounded-full h-6 w-6 flex items-center justify-center">
           <Text className="text-xs font-bold">{items.length}</Text>
         </View>
       </View>
 
-      <Text className="opacity-50 mb-2 px-4">TV-Series</Text>
+      <Text className="opacity-50 mb-2">TV-Series</Text>
       {groupBySeason.map((seasonItems, seasonIndex) => (
         <View key={seasonIndex}>
-          <Text className="mb-2 font-semibold px-4">
+          <Text className="mb-2 font-semibold">
             {seasonItems[0].SeasonName}
           </Text>
-          <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-            <View className="px-4 flex flex-row">
-              {seasonItems.sort(sortByIndex)?.map((item, index) => (
-                <EpisodeCard item={item} key={index} />
-              ))}
+          {seasonItems.map((item, index) => (
+            <View className="mb-2" key={index}>
+              <EpisodeCard item={item} />
             </View>
-          </ScrollView>
+          ))}
         </View>
       ))}
     </View>

components/home/LargeMovieCarousel.tsx

@@ -4,29 +4,25 @@ import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
 import { getLogoImageUrlById } from "@/utils/jellyfin/image/getLogoImageUrlById";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
-import { useQuery } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { Image } from "expo-image";
+import { useRouter } from "expo-router";
 import { useAtom } from "jotai";
-import React, { useCallback, useMemo } from "react";
-import { Dimensions, TouchableOpacity, View, ViewProps } from "react-native";
-import Animated, {
-  runOnJS,
-  useSharedValue,
-  withTiming,
-} from "react-native-reanimated";
+import React, { useMemo } from "react";
+import { Dimensions, View, ViewProps } from "react-native";
+import { useSharedValue } from "react-native-reanimated";
 import Carousel, {
   ICarouselInstance,
   Pagination,
 } from "react-native-reanimated-carousel";
-import { itemRouter, TouchableItemRouter } from "../common/TouchableItemRouter";
+import { TouchableItemRouter } from "../common/TouchableItemRouter";
 import { Loader } from "../Loader";
-import { Gesture, GestureDetector } from "react-native-gesture-handler";
-import { useRouter, useSegments } from "expo-router";
-import * as Haptics from "expo-haptics";
 
 interface Props extends ViewProps {}
 
 export const LargeMovieCarousel: React.FC<Props> = ({ ...props }) => {
+  const router = useRouter();
+  const queryClient = useQueryClient();
   const [settings] = useSettings();
 
   const ref = React.useRef<ICarouselInstance>(null);
@@ -84,7 +80,13 @@ export const LargeMovieCarousel: React.FC<Props> = ({ ...props }) => {
 
   const width = Dimensions.get("screen").width;
 
-  if (l1 || l2) return null;
+  if (l1 || l2)
+    return (
+      <View className="h-[242px] flex items-center justify-center">
+        <Loader />
+      </View>
+    );
+
   if (!popularItems) return null;
 
   return (
@@ -120,7 +122,7 @@ export const LargeMovieCarousel: React.FC<Props> = ({ ...props }) => {
 
 const RenderItem: React.FC<{ item: BaseItemDto }> = ({ item }) => {
   const [api] = useAtom(apiAtom);
-  const router = useRouter();
+
   const screenWidth = Dimensions.get("screen").width;
 
   const uri = useMemo(() => {
@@ -139,41 +141,11 @@ const RenderItem: React.FC<{ item: BaseItemDto }> = ({ item }) => {
     return getLogoImageUrlById({ api, item, height: 100 });
   }, [item]);
 
-  const segments = useSegments();
-  const from = segments[2];
-
-  const opacity = useSharedValue(1);
-
-  const handleRoute = useCallback(() => {
-    if (!from) return;
-    const url = itemRouter(item, from);
-    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
-    // @ts-ignore
-    if (url) router.push(url);
-  }, [item, from]);
-
-  const tap = Gesture.Tap()
-    .maxDuration(2000)
-    .onBegin(() => {
-      opacity.value = withTiming(0.5, { duration: 100 });
-    })
-    .onEnd(() => {
-      runOnJS(handleRoute)();
-    })
-    .onFinalize(() => {
-      opacity.value = withTiming(1, { duration: 100 });
-    });
-
   if (!uri || !logoUri) return null;
 
   return (
-    <GestureDetector gesture={tap}>
-      <Animated.View
-        style={{
-          opacity: opacity,
-        }}
-        className="px-4"
-      >
+    <TouchableItemRouter item={item}>
+      <View className="px-4">
         <View className="relative flex justify-center rounded-2xl overflow-hidden border border-neutral-800">
           <Image
             source={{
@@ -199,7 +171,7 @@ const RenderItem: React.FC<{ item: BaseItemDto }> = ({ item }) => {
             />
           </View>
         </View>
-      </Animated.View>
-    </GestureDetector>
+      </View>
+    </TouchableItemRouter>
   );
 };

components/home/ScrollingCollectionList.tsx

@@ -1,22 +1,23 @@
 import { Text } from "@/components/common/Text";
 import MoviePoster from "@/components/posters/MoviePoster";
+import { useSettings } from "@/utils/atoms/settings";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import {
   useQuery,
   type QueryFunction,
   type QueryKey,
 } from "@tanstack/react-query";
-import { ScrollView, View, ViewProps } from "react-native";
+import { View, ViewProps } from "react-native";
 import ContinueWatchingPoster from "../ContinueWatchingPoster";
 import { ItemCardText } from "../ItemCardText";
 import { HorizontalScroll } from "../common/HorrizontalScroll";
 import { TouchableItemRouter } from "../common/TouchableItemRouter";
 import SeriesPoster from "../posters/SeriesPoster";
-import { FlashList } from "@shopify/flash-list";
 
 interface Props extends ViewProps {
   title?: string | null;
   orientation?: "horizontal" | "vertical";
+  height?: "small" | "large";
   disabled?: boolean;
   queryKey: QueryKey;
   queryFn: QueryFunction<BaseItemDto[]>;
@@ -25,11 +26,13 @@ interface Props extends ViewProps {
 export const ScrollingCollectionList: React.FC<Props> = ({
   title,
   orientation = "vertical",
+  height = "small",
   disabled = false,
   queryFn,
   queryKey,
   ...props
 }) => {
+  const [settings] = useSettings();
   const { data, isLoading } = useQuery({
     queryKey,
     queryFn,
@@ -40,78 +43,41 @@ export const ScrollingCollectionList: React.FC<Props> = ({
   if (disabled || !title) return null;
 
   return (
-    <View {...props} className="">
-      <Text className="px-4 text-lg font-bold mb-2 text-neutral-100">
+    <View {...props}>
+      <Text className="px-4 text-2xl font-bold mb-2 text-neutral-100">
         {title}
       </Text>
-      {isLoading === false && data?.length === 0 && (
-        <View className="px-4">
-          <Text className="text-neutral-500">No items</Text>
-        </View>
-      )}
-      {isLoading ? (
-        <View
-          className={`
-            flex flex-row gap-2 px-4
-        `}
-        >
-          {[1, 2, 3].map((i) => (
-            <View className="w-44" key={i}>
-              <View className="bg-neutral-900 h-24 w-full rounded-md mb-1"></View>
-              <View className="rounded-md overflow-hidden mb-1 self-start">
-                <Text
-                  className="text-neutral-900 bg-neutral-900 rounded-md"
-                  numberOfLines={1}
-                >
-                  Nisi mollit voluptate amet.
-                </Text>
-              </View>
-              <View className="rounded-md overflow-hidden self-start mb-1">
-                <Text
-                  className="text-neutral-900 bg-neutral-900 text-xs rounded-md "
-                  numberOfLines={1}
-                >
-                  Lorem ipsum
-                </Text>
-              </View>
-            </View>
-          ))}
-        </View>
-      ) : (
-        <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-          <View className="px-4 flex flex-row">
-            {data?.map((item, index) => (
-              <TouchableItemRouter
-                item={item}
-                key={index}
-                className={`
-              mr-2 
-
+      <HorizontalScroll
+        data={data}
+        height={orientation === "vertical" ? 247 : 164}
+        loading={isLoading}
+        renderItem={(item, index) => (
+          <TouchableItemRouter
+            key={index}
+            item={item}
+            className={`flex flex-col
               ${orientation === "horizontal" ? "w-44" : "w-28"}
             `}
-              >
-                {item.Type === "Episode" && orientation === "horizontal" && (
-                  <ContinueWatchingPoster item={item} />
-                )}
-                {item.Type === "Episode" && orientation === "vertical" && (
-                  <SeriesPoster item={item} />
-                )}
-                {item.Type === "Movie" && orientation === "horizontal" && (
-                  <ContinueWatchingPoster item={item} />
-                )}
-                {item.Type === "Movie" && orientation === "vertical" && (
-                  <MoviePoster item={item} />
-                )}
-                {item.Type === "Series" && <SeriesPoster item={item} />}
-                {item.Type === "Program" && (
-                  <ContinueWatchingPoster item={item} />
-                )}
-                <ItemCardText item={item} />
-              </TouchableItemRouter>
-            ))}
-          </View>
-        </ScrollView>
-      )}
+          >
+            <View>
+              {item.Type === "Episode" && orientation === "horizontal" && (
+                <ContinueWatchingPoster item={item} />
+              )}
+              {item.Type === "Episode" && orientation === "vertical" && (
+                <SeriesPoster item={item} />
+              )}
+              {item.Type === "Movie" && orientation === "horizontal" && (
+                <ContinueWatchingPoster item={item} />
+              )}
+              {item.Type === "Movie" && orientation === "vertical" && (
+                <MoviePoster item={item} />
+              )}
+              {item.Type === "Series" && <SeriesPoster item={item} />}
+              <ItemCardText item={item} />
+            </View>
+          </TouchableItemRouter>
+        )}
+      />
     </View>
   );
 };

components/library/LibraryItemCard.tsx

@@ -15,13 +15,17 @@ import { useEffect, useMemo, useState } from "react";
 import { TouchableOpacityProps, View } from "react-native";
 import { getColors } from "react-native-image-colors";
 import { TouchableItemRouter } from "../common/TouchableItemRouter";
-import { useImageColors } from "@/hooks/useImageColors";
-import { itemThemeColorAtom } from "@/utils/atoms/primaryColor";
 
 interface Props extends TouchableOpacityProps {
   library: BaseItemDto;
 }
 
+type LibraryColor = {
+  dominantColor: string;
+  averageColor: string;
+  secondary: string;
+};
+
 type IconName = React.ComponentProps<typeof Ionicons>["name"];
 
 const icons: Record<CollectionType, IconName> = {
@@ -44,6 +48,12 @@ export const LibraryItemCard: React.FC<Props> = ({ library, ...props }) => {
   const [user] = useAtom(userAtom);
   const [settings] = useSettings();
 
+  const [imageInfo, setImageInfo] = useState<LibraryColor>({
+    dominantColor: "#fff",
+    averageColor: "#fff",
+    secondary: "#fff",
+  });
+
   const url = useMemo(
     () =>
       getPrimaryImageUrl({
@@ -53,10 +63,6 @@ export const LibraryItemCard: React.FC<Props> = ({ library, ...props }) => {
     [library]
   );
 
-  // If we want to use image colors for library cards
-  // const [color] = useAtom(itemThemeColorAtom)
-  // useImageColors({ url });
-
   const { data: itemsCount } = useQuery({
     queryKey: ["library-count", library.Id],
     queryFn: async () => {
@@ -70,6 +76,40 @@ export const LibraryItemCard: React.FC<Props> = ({ library, ...props }) => {
     },
   });
 
+  useEffect(() => {
+    if (url) {
+      getColors(url, {
+        fallback: "#fff",
+        cache: true,
+        key: url,
+      })
+        .then((colors) => {
+          let dominantColor: string = "#fff";
+          let averageColor: string = "#fff";
+          let secondary: string = "#fff";
+
+          if (colors.platform === "android") {
+            dominantColor = colors.dominant;
+            averageColor = colors.average;
+            secondary = colors.muted;
+          } else if (colors.platform === "ios") {
+            dominantColor = colors.primary;
+            averageColor = colors.background;
+            secondary = colors.detail;
+          }
+
+          setImageInfo({
+            dominantColor,
+            averageColor,
+            secondary,
+          });
+        })
+        .catch((error) => {
+          console.error("Error getting colors", error);
+        });
+    }
+  }, [url]);
+
   if (!url) return null;
 
   if (settings?.libraryOptions?.display === "row") {
@@ -85,7 +125,7 @@ export const LibraryItemCard: React.FC<Props> = ({ library, ...props }) => {
             {library.Name}
           </Text>
           {settings?.libraryOptions?.showStats && (
-            <Text className="font-bold text-xs text-neutral-500 text-start ml-auto">
+            <Text className="font-bold text-xs text-neutral-500 text-start px-4 ml-auto">
               {itemsCount} items
             </Text>
           )}

components/livetv/HourHeader.tsx

@@ -1,43 +0,0 @@
-import React from "react";
-import { View } from "react-native";
-import { Text } from "../common/Text";
-
-export const HourHeader = ({ height }: { height: number }) => {
-  const now = new Date();
-  const currentHour = now.getHours();
-  const hoursRemaining = 24 - currentHour;
-  const hours = generateHours(currentHour, hoursRemaining);
-
-  return (
-    <View
-      className="flex flex-row"
-      style={{
-        height,
-      }}
-    >
-      {hours.map((hour, index) => (
-        <HourCell key={index} hour={hour} />
-      ))}
-    </View>
-  );
-};
-
-const HourCell = ({ hour }: { hour: Date }) => (
-  <View className="w-[200px] flex items-center justify-center bg-neutral-800">
-    <Text className="text-xs text-gray-600">
-      {hour.toLocaleTimeString([], {
-        hour: "2-digit",
-        minute: "2-digit",
-      })}
-    </Text>
-  </View>
-);
-
-const generateHours = (startHour: number, count: number): Date[] => {
-  const now = new Date();
-  return Array.from({ length: count }, (_, i) => {
-    const hour = new Date(now);
-    hour.setHours(startHour + i, 0, 0, 0);
-    return hour;
-  });
-};

components/livetv/LiveTVGuideRow.tsx

@@ -1,96 +0,0 @@
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
-import { useMemo, useRef } from "react";
-import { Dimensions, View } from "react-native";
-import { Text } from "../common/Text";
-import { TouchableItemRouter } from "../common/TouchableItemRouter";
-
-export const LiveTVGuideRow = ({
-  channel,
-  programs,
-  scrollX = 0,
-  isVisible = true,
-}: {
-  channel: BaseItemDto;
-  programs?: BaseItemDto[] | null;
-  scrollX?: number;
-  isVisible?: boolean;
-}) => {
-  const positionRefs = useRef<{ [key: string]: number }>({});
-  const screenWidth = Dimensions.get("window").width;
-
-  const calculateWidth = (s?: string | null, e?: string | null) => {
-    if (!s || !e) return 0;
-    const start = new Date(s);
-    const end = new Date(e);
-    const duration = end.getTime() - start.getTime();
-    const minutes = duration / 60000;
-    const width = (minutes / 60) * 200;
-    return width;
-  };
-
-  const programsWithPositions = useMemo(() => {
-    let cumulativeWidth = 0;
-    return programs
-      ?.filter((p) => p.ChannelId === channel.Id)
-      .map((p) => {
-        const width = calculateWidth(p.StartDate, p.EndDate);
-        const position = cumulativeWidth;
-        cumulativeWidth += width;
-        return { ...p, width, position };
-      });
-  }, [programs, channel.Id]);
-
-  const isCurrentlyLive = (program: BaseItemDto) => {
-    if (!program.StartDate || !program.EndDate) return false;
-    const now = new Date();
-    const start = new Date(program.StartDate);
-    const end = new Date(program.EndDate);
-    return now >= start && now <= end;
-  };
-
-  if (!isVisible) {
-    return <View style={{ height: 64 }} />;
-  }
-
-  return (
-    <View key={channel.ChannelNumber} className="flex flex-row h-16">
-      {programsWithPositions?.map((p) => (
-        <TouchableItemRouter item={p} key={p.Id}>
-          <View
-            style={{
-              width: p.width,
-              height: "100%",
-              position: "absolute",
-              left: p.position,
-              backgroundColor: isCurrentlyLive(p)
-                ? "rgba(255, 255, 255, 0.1)"
-                : "transparent",
-            }}
-            className="flex flex-col items-center justify-center border border-neutral-800 overflow-hidden"
-          >
-            {(() => {
-              return (
-                <View
-                  style={{
-                    marginLeft:
-                      p.width > screenWidth && scrollX > p.position
-                        ? scrollX - p.position
-                        : 0,
-                  }}
-                  className="px-4 self-start"
-                >
-                  <Text
-                    numberOfLines={2}
-                    className="text-xs text-start self-start"
-                  >
-                    {p.Name}
-                  </Text>
-                </View>
-              );
-            })()}
-          </View>
-        </TouchableItemRouter>
-      ))}
-    </View>
-  );
-};

components/movies/MoviesTitleHeader.tsx

@@ -9,9 +9,7 @@ interface Props extends ViewProps {
 export const MoviesTitleHeader: React.FC<Props> = ({ item, ...props }) => {
   return (
     <View {...props}>
-      <Text className=" font-bold text-2xl mb-1" selectable>
-        {item?.Name}
-      </Text>
+      <Text className=" font-bold text-2xl mb-1">{item?.Name}</Text>
       <Text className=" opacity-50">{item?.ProductionYear}</Text>
     </View>
   );

components/music/SongsListItem.tsx

@@ -4,12 +4,10 @@ import { usePlayback } from "@/providers/PlaybackProvider";
 import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
 import { chromecastProfile } from "@/utils/profiles/chromecast";
 import ios from "@/utils/profiles/ios";
-import iosFmp4 from "@/utils/profiles/iosFmp4";
 import { runtimeTicksToSeconds } from "@/utils/time";
 import { useActionSheet } from "@expo/react-native-action-sheet";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { getMediaInfoApi } from "@jellyfin/sdk/lib/utils/api";
-import { useRouter } from "expo-router";
 import { useAtom } from "jotai";
 import { TouchableOpacity, TouchableOpacityProps, View } from "react-native";
 import CastContext, {
@@ -37,7 +35,7 @@ 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();
 
@@ -91,7 +89,7 @@ export const SongsListItem: React.FC<Props> = ({
       item,
       startTimeTicks: item?.UserData?.PlaybackPositionTicks || 0,
       sessionData,
-      deviceProfile: castDevice?.deviceId ? chromecastProfile : iosFmp4,
+      deviceProfile: castDevice?.deviceId ? chromecastProfile : ios,
       mediaSourceId: item.Id,
     });
 
@@ -125,7 +123,6 @@ export const SongsListItem: React.FC<Props> = ({
         item,
         url,
       });
-      router.push("/play-music");
     }
   };
 

components/posters/MoviePoster.tsx

@@ -36,7 +36,7 @@ const MoviePoster: React.FC<MoviePosterProps> = ({
   }, [item]);
 
   return (
-    <View className="relative rounded-lg overflow-hidden border border-neutral-900 w-28 aspect-[10/15]">
+    <View className="relative rounded-lg overflow-hidden border border-neutral-900">
       <Image
         placeholder={{
           blurhash,
@@ -57,6 +57,7 @@ const MoviePoster: React.FC<MoviePosterProps> = ({
           width: "100%",
         }}
       />
+
       <WatchedIndicator item={item} />
       {showProgress && progress > 0 && (
         <View className="h-1 bg-red-600 w-full"></View>

components/posters/SeriesPoster.tsx

@@ -32,7 +32,7 @@ const SeriesPoster: React.FC<MoviePosterProps> = ({ item }) => {
   }, [item]);
 
   return (
-    <View className="w-28 aspect-[10/15] relative rounded-lg overflow-hidden border border-neutral-900 ">
+    <View className="relative rounded-lg overflow-hidden border border-neutral-900">
       <Image
         placeholder={{
           blurhash,
@@ -49,7 +49,7 @@ const SeriesPoster: React.FC<MoviePosterProps> = ({ item }) => {
         cachePolicy={"memory-disk"}
         contentFit="cover"
         style={{
-          height: "100%",
+          aspectRatio: "10/15",
           width: "100%",
         }}
       />

components/series/CastAndCrew.tsx

@@ -25,7 +25,6 @@ export const CastAndCrew: React.FC<Props> = ({ item, loading, ...props }) => {
       <Text className="text-lg font-bold mb-2 px-4">Cast & Crew</Text>
       <HorizontalScroll
         loading={loading}
-        height={247}
         data={item?.People || []}
         renderItem={(item, index) => (
           <TouchableOpacity
@@ -33,7 +32,7 @@ export const CastAndCrew: React.FC<Props> = ({ item, loading, ...props }) => {
               router.push(`/actors/${item.Id}`);
             }}
             key={item.Id}
-            className="flex flex-col w-28"
+            className="flex flex-col w-32"
           >
             <Poster item={item} url={getPrimaryImageUrl({ api, item })} />
             <Text className="mt-2">{item.Name}</Text>

components/series/CurrentSeries.tsx

@@ -21,12 +21,11 @@ export const CurrentSeries: React.FC<Props> = ({ item, ...props }) => {
       <Text className="text-lg font-bold mb-2 px-4">Series</Text>
       <HorizontalScroll
         data={[item]}
-        height={247}
         renderItem={(item, index) => (
           <TouchableOpacity
             key={item.Id}
             onPress={() => router.push(`/series/${item.SeriesId}`)}
-            className="flex flex-col space-y-2 w-28"
+            className="flex flex-col space-y-2 w-32"
           >
             <Poster
               item={item}

components/series/EpisodeTitleHeader.tsx

@@ -12,9 +12,7 @@ export const EpisodeTitleHeader: React.FC<Props> = ({ item, ...props }) => {
 
   return (
     <View {...props}>
-      <Text className="font-bold text-2xl" selectable>
-        {item?.Name}
-      </Text>
+      <Text className="font-bold text-2xl">{item?.Name}</Text>
       <View className="flex flex-row items-center mb-1">
         <TouchableOpacity
           onPress={() => {

components/series/NextUp.tsx

@@ -10,7 +10,6 @@ import { HorizontalScroll } from "../common/HorrizontalScroll";
 import { Text } from "../common/Text";
 import ContinueWatchingPoster from "../ContinueWatchingPoster";
 import { ItemCardText } from "../ItemCardText";
-import { TouchableItemRouter } from "../common/TouchableItemRouter";
 
 export const NextUp: React.FC<{ seriesId: string }> = ({ seriesId }) => {
   const [user] = useAtom(userAtom);
@@ -47,14 +46,16 @@ export const NextUp: React.FC<{ seriesId: string }> = ({ seriesId }) => {
       <HorizontalScroll
         data={items}
         renderItem={(item, index) => (
-          <TouchableItemRouter
-            item={item}
-            key={index}
+          <TouchableOpacity
+            onPress={() => {
+              router.push(`/(auth)/items/page?id=${item.Id}`);
+            }}
+            key={item.Id}
             className="flex flex-col w-44"
           >
             <ContinueWatchingPoster item={item} useEpisodePoster />
             <ItemCardText item={item} />
-          </TouchableItemRouter>
+          </TouchableOpacity>
         )}
       />
     </View>

components/series/SeasonEpisodesCarousel.tsx

@@ -85,7 +85,7 @@ export const SeasonEpisodesCarousel: React.FC<Props> = ({
             userId: user?.Id,
             itemId: previousId,
           }),
-        staleTime: 60 * 1000 * 5,
+        staleTime: 60 * 1000,
       });
     }
 
@@ -101,7 +101,7 @@ export const SeasonEpisodesCarousel: React.FC<Props> = ({
             userId: user?.Id,
             itemId: nextId,
           }),
-        staleTime: 60 * 1000 * 5,
+        staleTime: 60 * 1000,
       });
     }
   }, [episodes, api, user?.Id, item]);

components/series/SeasonPicker.tsx

@@ -15,7 +15,6 @@ import { getTvShowsApi } from "@jellyfin/sdk/lib/utils/api";
 import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
 import { Image } from "expo-image";
 import { getLogoImageUrlById } from "@/utils/jellyfin/image/getLogoImageUrlById";
-import { TouchableItemRouter } from "../common/TouchableItemRouter";
 
 type Props = {
   item: BaseItemDto;
@@ -193,16 +192,18 @@ export const SeasonPicker: React.FC<Props> = ({ item, initialSeasonIndex }) => {
           </View>
         ) : (
           episodes?.map((e: BaseItemDto) => (
-            <TouchableItemRouter
-              item={e}
+            <TouchableOpacity
               key={e.Id}
+              onPress={() => {
+                router.push(`/(auth)/items/page?id=${e.Id}`);
+              }}
               className="flex flex-col mb-4"
             >
-              <View className="flex flex-row items-start mb-2">
-                <View className="mr-2">
+              <View className="flex flex-row items-center mb-2">
+                <View className="w-32 aspect-video overflow-hidden mr-2">
                   <ContinueWatchingPoster
-                    size="small"
                     item={e}
+                    width={128}
                     useEpisodePoster
                   />
                 </View>
@@ -217,7 +218,7 @@ export const SeasonPicker: React.FC<Props> = ({ item, initialSeasonIndex }) => {
                     {runtimeTicksToSeconds(e.RunTimeTicks)}
                   </Text>
                 </View>
-                <View className="self-start ml-auto -mt-0.5">
+                <View className="self-start ml-auto">
                   <DownloadItem item={e} />
                 </View>
               </View>
@@ -228,7 +229,7 @@ export const SeasonPicker: React.FC<Props> = ({ item, initialSeasonIndex }) => {
               >
                 {e.Overview}
               </Text>
-            </TouchableItemRouter>
+            </TouchableOpacity>
           ))
         )}
       </View>

components/settings/MediaToggles.tsx

@@ -1,16 +1,39 @@
-import { useSettings } from "@/utils/atoms/settings";
-import { TouchableOpacity, View, ViewProps } from "react-native";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import {
+  DefaultLanguageOption,
+  DownloadOptions,
+  useSettings,
+} from "@/utils/atoms/settings";
+import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useAtom } from "jotai";
+import {
+  Linking,
+  Switch,
+  TouchableOpacity,
+  View,
+  ViewProps,
+} from "react-native";
 import * as DropdownMenu from "zeego/dropdown-menu";
 import { Text } from "../common/Text";
-import { LANGUAGES } from "@/constants/Languages";
+import { Loader } from "../Loader";
+import { Input } from "../common/Input";
+import { useState } from "react";
+import { Button } from "../Button";
+
+const LANGUAGES: DefaultLanguageOption[] = [
+  { label: "eng", value: "eng" },
+  {
+    label: "sv",
+    value: "sv",
+  },
+];
 
 interface Props extends ViewProps {}
 
 export const MediaToggles: React.FC<Props> = ({ ...props }) => {
   const [settings, updateSettings] = useSettings();
 
-  if (!settings) return null;
-
   return (
     <View>
       <Text className="text-lg font-bold mb-2">Media</Text>
@@ -121,82 +144,6 @@ export const MediaToggles: React.FC<Props> = ({ ...props }) => {
             </DropdownMenu.Content>
           </DropdownMenu.Root>
         </View>
-
-        <View
-          className={`
-              flex flex-row items-center space-x-2 justify-between bg-neutral-900 p-4
-            `}
-        >
-          <View className="flex flex-col shrink">
-            <Text className="font-semibold">Forward skip length</Text>
-            <Text className="text-xs opacity-50">
-              Choose length in seconds when skipping in video playback.
-            </Text>
-          </View>
-          <View className="flex flex-row items-center">
-            <TouchableOpacity
-              onPress={() =>
-                updateSettings({
-                  forwardSkipTime: Math.max(0, settings.forwardSkipTime - 5),
-                })
-              }
-              className="w-8 h-8 bg-neutral-800 rounded-l-lg flex items-center justify-center"
-            >
-              <Text>-</Text>
-            </TouchableOpacity>
-            <Text className="w-12 h-8 bg-neutral-800 first-letter:px-3 py-2 flex items-center justify-center">
-              {settings.forwardSkipTime}s
-            </Text>
-            <TouchableOpacity
-              className="w-8 h-8 bg-neutral-800 rounded-r-lg flex items-center justify-center"
-              onPress={() =>
-                updateSettings({
-                  forwardSkipTime: Math.min(60, settings.forwardSkipTime + 5),
-                })
-              }
-            >
-              <Text>+</Text>
-            </TouchableOpacity>
-          </View>
-        </View>
-
-        <View
-          className={`
-              flex flex-row items-center space-x-2 justify-between bg-neutral-900 p-4
-            `}
-        >
-          <View className="flex flex-col shrink">
-            <Text className="font-semibold">Rewind length</Text>
-            <Text className="text-xs opacity-50">
-              Choose length in seconds when skipping in video playback.
-            </Text>
-          </View>
-          <View className="flex flex-row items-center">
-            <TouchableOpacity
-              onPress={() =>
-                updateSettings({
-                  rewindSkipTime: Math.max(0, settings.rewindSkipTime - 5),
-                })
-              }
-              className="w-8 h-8 bg-neutral-800 rounded-l-lg flex items-center justify-center"
-            >
-              <Text>-</Text>
-            </TouchableOpacity>
-            <Text className="w-12 h-8 bg-neutral-800 first-letter:px-3 py-2 flex items-center justify-center">
-              {settings.rewindSkipTime}s
-            </Text>
-            <TouchableOpacity
-              className="w-8 h-8 bg-neutral-800 rounded-r-lg flex items-center justify-center"
-              onPress={() =>
-                updateSettings({
-                  rewindSkipTime: Math.min(60, settings.rewindSkipTime + 5),
-                })
-              }
-            >
-              <Text>+</Text>
-            </TouchableOpacity>
-          </View>
-        </View>
       </View>
     </View>
   );

components/settings/SettingToggles.tsx

@@ -1,85 +1,31 @@
-import { useDownload } from "@/providers/DownloadProvider";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import {
-  apiAtom,
-  getOrSetDeviceId,
-  userAtom,
-} from "@/providers/JellyfinProvider";
-import { ScreenOrientationEnum, useSettings } from "@/utils/atoms/settings";
-import {
-  BACKGROUND_FETCH_TASK,
-  registerBackgroundFetchAsync,
-  unregisterBackgroundFetchAsync,
-} from "@/utils/background-tasks";
+  DefaultLanguageOption,
+  DownloadOptions,
+  useSettings,
+} from "@/utils/atoms/settings";
 import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
-import * as BackgroundFetch from "expo-background-fetch";
-import * as ScreenOrientation from "expo-screen-orientation";
-import * as TaskManager from "expo-task-manager";
 import { useAtom } from "jotai";
-import { useEffect, useState } from "react";
-import {
-  ActivityIndicator,
-  Linking,
-  Switch,
-  TouchableOpacity,
-  View,
-  ViewProps,
-} from "react-native";
-import { toast } from "sonner-native";
+import { Linking, Switch, TouchableOpacity, View } from "react-native";
 import * as DropdownMenu from "zeego/dropdown-menu";
-import { Button } from "../Button";
-import { Input } from "../common/Input";
 import { Text } from "../common/Text";
 import { Loader } from "../Loader";
+import { Input } from "../common/Input";
+import { useState } from "react";
+import { Button } from "../Button";
 import { MediaToggles } from "./MediaToggles";
-import axios from "axios";
-import { getStatistics } from "@/utils/optimize-server";
 
-interface Props extends ViewProps {}
-
-export const SettingToggles: React.FC<Props> = ({ ...props }) => {
+export const SettingToggles: React.FC = () => {
   const [settings, updateSettings] = useSettings();
-  const { setProcesses } = useDownload();
 
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
 
   const [marlinUrl, setMarlinUrl] = useState<string>("");
-  const [optimizedVersionsServerUrl, setOptimizedVersionsServerUrl] =
-    useState<string>(settings?.optimizedVersionsServerUrl || "");
 
   const queryClient = useQueryClient();
 
-  /********************
-   * Background task
-   *******************/
-  const checkStatusAsync = async () => {
-    await BackgroundFetch.getStatusAsync();
-    return await TaskManager.isTaskRegisteredAsync(BACKGROUND_FETCH_TASK);
-  };
-
-  useEffect(() => {
-    (async () => {
-      const registered = await checkStatusAsync();
-
-      if (settings?.autoDownload === true && !registered) {
-        registerBackgroundFetchAsync();
-        toast.success("Background downlodas enabled");
-      } else if (settings?.autoDownload === false && registered) {
-        unregisterBackgroundFetchAsync();
-        toast.info("Background downloads disabled");
-      } else if (settings?.autoDownload === true && registered) {
-        // Don't to anything
-      } else if (settings?.autoDownload === false && !registered) {
-        // Don't to anything
-      } else {
-        updateSettings({ autoDownload: false });
-      }
-    })();
-  }, [settings?.autoDownload]);
-  /**********************
-   *********************/
-
   const {
     data: mediaListCollections,
     isLoading: isLoadingMediaListCollections,
@@ -102,10 +48,8 @@ export const SettingToggles: React.FC<Props> = ({ ...props }) => {
     staleTime: 0,
   });
 
-  if (!settings) return null;
-
   return (
-    <View {...props}>
+    <View>
       {/* <View>
         <Text className="text-lg font-bold mb-2">Look and feel</Text>
         <View className="flex flex-col rounded-xl mb-4 overflow-hidden divide-y-2 divide-solid divide-neutral-800 opacity-50">
@@ -126,7 +70,7 @@ export const SettingToggles: React.FC<Props> = ({ ...props }) => {
       <View>
         <Text className="text-lg font-bold mb-2">Other</Text>
 
-        <View className="flex flex-col rounded-xl overflow-hidden  divide-y-2 divide-solid divide-neutral-800">
+        <View className="flex flex-col rounded-xl mb-4 overflow-hidden  divide-y-2 divide-solid divide-neutral-800">
           <View className="flex flex-row items-center justify-between bg-neutral-900 p-4">
             <View className="shrink">
               <Text className="font-semibold">Auto rotate</Text>
@@ -136,116 +80,25 @@ export const SettingToggles: React.FC<Props> = ({ ...props }) => {
               </Text>
             </View>
             <Switch
-              value={settings.autoRotate}
+              value={settings?.autoRotate}
               onValueChange={(value) => updateSettings({ autoRotate: value })}
             />
           </View>
 
-          <View
-            pointerEvents={settings.autoRotate ? "none" : "auto"}
-            className={`
-            ${
-              settings.autoRotate
-                ? "opacity-50 pointer-events-none"
-                : "opacity-100"
-            }
-                flex flex-row items-center space-x-2 justify-between bg-neutral-900 p-4
-              `}
-          >
-            <View className="flex flex-col shrink">
-              <Text className="font-semibold">Video orientation</Text>
+          <View className="flex flex-row items-center justify-between bg-neutral-900 p-4">
+            <View className="shrink">
+              <Text className="font-semibold">Start videos in fullscreen</Text>
               <Text className="text-xs opacity-50">
-                Set the full screen video player orientation.
+                Clicking a video will start it in fullscreen mode, instead of
+                inline.
               </Text>
             </View>
-            <DropdownMenu.Root>
-              <DropdownMenu.Trigger>
-                <TouchableOpacity className="bg-neutral-800 rounded-lg border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between">
-                  <Text>
-                    {ScreenOrientationEnum[settings.defaultVideoOrientation]}
-                  </Text>
-                </TouchableOpacity>
-              </DropdownMenu.Trigger>
-              <DropdownMenu.Content
-                loop={true}
-                side="bottom"
-                align="start"
-                alignOffset={0}
-                avoidCollisions={true}
-                collisionPadding={8}
-                sideOffset={8}
-              >
-                <DropdownMenu.Label>Orientation</DropdownMenu.Label>
-                <DropdownMenu.Item
-                  key="1"
-                  onSelect={() => {
-                    updateSettings({
-                      defaultVideoOrientation:
-                        ScreenOrientation.OrientationLock.DEFAULT,
-                    });
-                  }}
-                >
-                  <DropdownMenu.ItemTitle>
-                    {
-                      ScreenOrientationEnum[
-                        ScreenOrientation.OrientationLock.DEFAULT
-                      ]
-                    }
-                  </DropdownMenu.ItemTitle>
-                </DropdownMenu.Item>
-                <DropdownMenu.Item
-                  key="2"
-                  onSelect={() => {
-                    updateSettings({
-                      defaultVideoOrientation:
-                        ScreenOrientation.OrientationLock.PORTRAIT_UP,
-                    });
-                  }}
-                >
-                  <DropdownMenu.ItemTitle>
-                    {
-                      ScreenOrientationEnum[
-                        ScreenOrientation.OrientationLock.PORTRAIT_UP
-                      ]
-                    }
-                  </DropdownMenu.ItemTitle>
-                </DropdownMenu.Item>
-                <DropdownMenu.Item
-                  key="3"
-                  onSelect={() => {
-                    updateSettings({
-                      defaultVideoOrientation:
-                        ScreenOrientation.OrientationLock.LANDSCAPE_LEFT,
-                    });
-                  }}
-                >
-                  <DropdownMenu.ItemTitle>
-                    {
-                      ScreenOrientationEnum[
-                        ScreenOrientation.OrientationLock.LANDSCAPE_LEFT
-                      ]
-                    }
-                  </DropdownMenu.ItemTitle>
-                </DropdownMenu.Item>
-                <DropdownMenu.Item
-                  key="4"
-                  onSelect={() => {
-                    updateSettings({
-                      defaultVideoOrientation:
-                        ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT,
-                    });
-                  }}
-                >
-                  <DropdownMenu.ItemTitle>
-                    {
-                      ScreenOrientationEnum[
-                        ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT
-                      ]
-                    }
-                  </DropdownMenu.ItemTitle>
-                </DropdownMenu.Item>
-              </DropdownMenu.Content>
-            </DropdownMenu.Root>
+            <Switch
+              value={settings?.openFullScreenVideoPlayerByDefault}
+              onValueChange={(value) =>
+                updateSettings({ openFullScreenVideoPlayerByDefault: value })
+              }
+            />
           </View>
 
           <View className="flex flex-row space-x-2 items-center justify-between bg-neutral-900 p-4">
@@ -257,7 +110,7 @@ export const SettingToggles: React.FC<Props> = ({ ...props }) => {
               </Text>
             </View>
             <Switch
-              value={settings.openInVLC}
+              value={settings?.openInVLC}
               onValueChange={(value) => {
                 updateSettings({ openInVLC: value, forceDirectPlay: value });
               }}
@@ -280,13 +133,13 @@ export const SettingToggles: React.FC<Props> = ({ ...props }) => {
                 </TouchableOpacity>
               </View>
               <Switch
-                value={settings.usePopularPlugin}
+                value={settings?.usePopularPlugin}
                 onValueChange={(value) =>
                   updateSettings({ usePopularPlugin: value })
                 }
               />
             </View>
-            {settings.usePopularPlugin && (
+            {settings?.usePopularPlugin && (
               <View className="flex flex-col py-2 bg-neutral-900">
                 {mediaListCollections?.map((mlc) => (
                   <View
@@ -297,7 +150,9 @@ export const SettingToggles: React.FC<Props> = ({ ...props }) => {
                       <Text className="font-semibold">{mlc.Name}</Text>
                     </View>
                     <Switch
-                      value={settings.mediaListCollectionIds?.includes(mlc.Id!)}
+                      value={settings?.mediaListCollectionIds?.includes(
+                        mlc.Id!
+                      )}
                       onValueChange={(value) => {
                         if (!settings.mediaListCollectionIds) {
                           updateSettings({
@@ -308,11 +163,11 @@ export const SettingToggles: React.FC<Props> = ({ ...props }) => {
 
                         updateSettings({
                           mediaListCollectionIds:
-                            settings.mediaListCollectionIds.includes(mlc.Id!)
-                              ? settings.mediaListCollectionIds.filter(
+                            settings?.mediaListCollectionIds.includes(mlc.Id!)
+                              ? settings?.mediaListCollectionIds.filter(
                                   (id) => id !== mlc.Id
                                 )
-                              : [...settings.mediaListCollectionIds, mlc.Id!],
+                              : [...settings?.mediaListCollectionIds, mlc.Id!],
                         });
                       }}
                     />
@@ -343,7 +198,7 @@ export const SettingToggles: React.FC<Props> = ({ ...props }) => {
               </Text>
             </View>
             <Switch
-              value={settings.forceDirectPlay}
+              value={settings?.forceDirectPlay}
               onValueChange={(value) =>
                 updateSettings({ forceDirectPlay: value })
               }
@@ -352,9 +207,9 @@ export const SettingToggles: React.FC<Props> = ({ ...props }) => {
 
           <View
             className={`
-              flex flex-row items-center space-x-2 justify-between bg-neutral-900 p-4
-              ${settings.forceDirectPlay ? "opacity-50 select-none" : ""}
-            `}
+        flex flex-row items-center space-x-2 justify-between bg-neutral-900 p-4
+        ${settings?.forceDirectPlay ? "opacity-50 select-none" : ""}
+      `}
           >
             <View className="flex flex-col shrink">
               <Text className="font-semibold">Device profile</Text>
@@ -366,7 +221,7 @@ export const SettingToggles: React.FC<Props> = ({ ...props }) => {
             <DropdownMenu.Root>
               <DropdownMenu.Trigger>
                 <TouchableOpacity className="bg-neutral-800 rounded-lg border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between">
-                  <Text>{settings.deviceProfile}</Text>
+                  <Text>{settings?.deviceProfile}</Text>
                 </TouchableOpacity>
               </DropdownMenu.Trigger>
               <DropdownMenu.Content
@@ -406,12 +261,11 @@ export const SettingToggles: React.FC<Props> = ({ ...props }) => {
               </DropdownMenu.Content>
             </DropdownMenu.Root>
           </View>
-
           <View className="flex flex-col">
             <View
               className={`
-                flex flex-row items-center space-x-2 justify-between bg-neutral-900 p-4
-              `}
+            flex flex-row items-center space-x-2 justify-between bg-neutral-900 p-4
+          `}
             >
               <View className="flex flex-col shrink">
                 <Text className="font-semibold">Search engine</Text>
@@ -422,7 +276,7 @@ export const SettingToggles: React.FC<Props> = ({ ...props }) => {
               <DropdownMenu.Root>
                 <DropdownMenu.Trigger>
                   <TouchableOpacity className="bg-neutral-800 rounded-lg border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between">
-                    <Text>{settings.searchEngine}</Text>
+                    <Text>{settings?.searchEngine}</Text>
                   </TouchableOpacity>
                 </DropdownMenu.Trigger>
                 <DropdownMenu.Content
@@ -456,179 +310,42 @@ export const SettingToggles: React.FC<Props> = ({ ...props }) => {
                 </DropdownMenu.Content>
               </DropdownMenu.Root>
             </View>
-            {settings.searchEngine === "Marlin" && (
+            {settings?.searchEngine === "Marlin" && (
               <View className="flex flex-col bg-neutral-900 px-4 pb-4">
-                <View className="flex flex-row items-center space-x-2">
-                  <View className="grow">
-                    <Input
-                      placeholder="Marlin Server URL..."
-                      defaultValue={settings.marlinServerUrl}
-                      value={marlinUrl}
-                      keyboardType="url"
-                      returnKeyType="done"
-                      autoCapitalize="none"
-                      textContentType="URL"
-                      onChangeText={(text) => setMarlinUrl(text)}
-                    />
+                <>
+                  <View className="flex flex-row items-center space-x-2">
+                    <View className="grow">
+                      <Input
+                        placeholder="Marlin Server URL..."
+                        defaultValue={settings.marlinServerUrl}
+                        value={marlinUrl}
+                        keyboardType="url"
+                        returnKeyType="done"
+                        autoCapitalize="none"
+                        textContentType="URL"
+                        onChangeText={(text) => setMarlinUrl(text)}
+                      />
+                    </View>
+                    <Button
+                      color="purple"
+                      className="shrink w-16 h-12"
+                      onPress={() => {
+                        updateSettings({ marlinServerUrl: marlinUrl });
+                      }}
+                    >
+                      Save
+                    </Button>
                   </View>
-                  <Button
-                    color="purple"
-                    className="shrink w-16 h-12"
-                    onPress={() => {
-                      updateSettings({
-                        marlinServerUrl: marlinUrl.endsWith("/")
-                          ? marlinUrl
-                          : marlinUrl + "/",
-                      });
-                    }}
-                  >
-                    Save
-                  </Button>
-                </View>
 
-                {settings.marlinServerUrl && (
                   <Text className="text-neutral-500 mt-2">
-                    Current: {settings.marlinServerUrl}
+                    {settings?.marlinServerUrl}
                   </Text>
-                )}
+                </>
               </View>
             )}
           </View>
         </View>
       </View>
-
-      <View className="mt-4">
-        <Text className="text-lg font-bold mb-2">Downloads</Text>
-        <View className="flex flex-col rounded-xl overflow-hidden  divide-y-2 divide-solid divide-neutral-800">
-          <View
-            className={`
-                flex flex-row items-center space-x-2 justify-between bg-neutral-900 p-4
-              `}
-          >
-            <View className="flex flex-col shrink">
-              <Text className="font-semibold">Download method</Text>
-              <Text className="text-xs opacity-50">
-                Choose the download method to use. Optimized requires the
-                optimized server.
-              </Text>
-            </View>
-            <DropdownMenu.Root>
-              <DropdownMenu.Trigger>
-                <TouchableOpacity className="bg-neutral-800 rounded-lg border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between">
-                  <Text>
-                    {settings.downloadMethod === "remux"
-                      ? "Default"
-                      : "Optimized"}
-                  </Text>
-                </TouchableOpacity>
-              </DropdownMenu.Trigger>
-              <DropdownMenu.Content
-                loop={true}
-                side="bottom"
-                align="start"
-                alignOffset={0}
-                avoidCollisions={true}
-                collisionPadding={8}
-                sideOffset={8}
-              >
-                <DropdownMenu.Label>Methods</DropdownMenu.Label>
-                <DropdownMenu.Item
-                  key="1"
-                  onSelect={() => {
-                    updateSettings({ downloadMethod: "remux" });
-                    setProcesses([]);
-                  }}
-                >
-                  <DropdownMenu.ItemTitle>Default</DropdownMenu.ItemTitle>
-                </DropdownMenu.Item>
-                <DropdownMenu.Item
-                  key="2"
-                  onSelect={() => {
-                    updateSettings({ downloadMethod: "optimized" });
-                    setProcesses([]);
-                    queryClient.invalidateQueries({ queryKey: ["search"] });
-                  }}
-                >
-                  <DropdownMenu.ItemTitle>Optimized</DropdownMenu.ItemTitle>
-                </DropdownMenu.Item>
-              </DropdownMenu.Content>
-            </DropdownMenu.Root>
-          </View>
-          <View className="flex flex-row space-x-2 items-center justify-between bg-neutral-900 p-4">
-            <View className="flex flex-col shrink">
-              <Text className="font-semibold">Auto download</Text>
-              <Text className="text-xs opacity-50 shrink">
-                This will automatically download the media file when it's
-                finished optimizing on the server.
-              </Text>
-            </View>
-            <Switch
-              value={settings.autoDownload}
-              onValueChange={(value) => updateSettings({ autoDownload: value })}
-            />
-          </View>
-          <View
-            pointerEvents={
-              settings.downloadMethod === "optimized" ? "auto" : "none"
-            }
-            className={`
-              ${
-                settings.downloadMethod === "optimized"
-                  ? "opacity-100"
-                  : "opacity-50"
-              }`}
-          >
-            <View className="flex flex-col bg-neutral-900 px-4 py-4">
-              <View className="flex flex-col shrink mb-2">
-                <View className="flex flex-row justify-between items-center">
-                  <Text className="font-semibold">
-                    Optimized versions server
-                  </Text>
-                </View>
-                <Text className="text-xs opacity-50">
-                  Set the URL for the optimized versions server for downloads.
-                </Text>
-              </View>
-              <View></View>
-              <View className="flex flex-col">
-                <Input
-                  placeholder="Optimized versions server URL..."
-                  value={optimizedVersionsServerUrl}
-                  keyboardType="url"
-                  returnKeyType="done"
-                  autoCapitalize="none"
-                  textContentType="URL"
-                  onChangeText={(text) => setOptimizedVersionsServerUrl(text)}
-                />
-                <Button
-                  color="purple"
-                  className="h-12 mt-2"
-                  onPress={async () => {
-                    updateSettings({
-                      optimizedVersionsServerUrl:
-                        optimizedVersionsServerUrl.length === 0
-                          ? null
-                          : optimizedVersionsServerUrl.endsWith("/")
-                          ? optimizedVersionsServerUrl
-                          : optimizedVersionsServerUrl + "/",
-                    });
-                    const res = await getStatistics({
-                      url: settings?.optimizedVersionsServerUrl,
-                      authHeader: api?.accessToken,
-                      deviceId: await getOrSetDeviceId(),
-                    });
-                    if (res) {
-                      toast.success("Connected");
-                    } else toast.error("Could not connect");
-                  }}
-                >
-                  Save
-                </Button>
-              </View>
-            </View>
-          </View>
-        </View>
-      </View>
     </View>
   );
 };

components/stacks/NestedTabPageStack.tsx

@@ -1,3 +1,5 @@
+import { Stack } from "expo-router";
+import { Chromecast } from "../Chromecast";
 import { HeaderBackButton } from "../common/HeaderBackButton";
 
 const commonScreenOptions = {
@@ -13,6 +15,7 @@ const routes = [
   "albums/[albumId]",
   "artists/index",
   "artists/[artistId]",
+  "collections/[collectionId]",
   "items/page",
   "series/[id]",
 ];

constants/Colors.ts

@@ -7,7 +7,6 @@ const tintColorLight = "#0a7ea4";
 const tintColorDark = "#fff";
 
 export const Colors = {
-  primary: "#9334E9",
   text: "#ECEDEE",
   background: "#151718",
   tint: tintColorDark,

constants/Languages.ts

@@ -1,39 +0,0 @@
-import { DefaultLanguageOption } from "@/utils/atoms/settings";
-
-export const LANGUAGES: DefaultLanguageOption[] = [
-  { label: "English", value: "eng" },
-  { label: "Spanish", value: "spa" },
-  { label: "Chinese (Mandarin)", value: "cmn" },
-  { label: "Hindi", value: "hin" },
-  { label: "Arabic", value: "ara" },
-  { label: "French", value: "fra" },
-  { label: "Russian", value: "rus" },
-  { label: "Portuguese", value: "por" },
-  { label: "Japanese", value: "jpn" },
-  { label: "German", value: "deu" },
-  { label: "Italian", value: "ita" },
-  { label: "Korean", value: "kor" },
-  { label: "Turkish", value: "tur" },
-  { label: "Dutch", value: "nld" },
-  { label: "Polish", value: "pol" },
-  { label: "Vietnamese", value: "vie" },
-  { label: "Thai", value: "tha" },
-  { label: "Indonesian", value: "ind" },
-  { label: "Greek", value: "ell" },
-  { label: "Swedish", value: "swe" },
-  { label: "Danish", value: "dan" },
-  { label: "Norwegian", value: "nor" },
-  { label: "Finnish", value: "fin" },
-  { label: "Czech", value: "ces" },
-  { label: "Hungarian", value: "hun" },
-  { label: "Romanian", value: "ron" },
-  { label: "Ukrainian", value: "ukr" },
-  { label: "Hebrew", value: "heb" },
-  { label: "Bengali", value: "ben" },
-  { label: "Punjabi", value: "pan" },
-  { label: "Tagalog", value: "tgl" },
-  { label: "Swahili", value: "swa" },
-  { label: "Malay", value: "msa" },
-  { label: "Persian", value: "fas" },
-  { label: "Urdu", value: "urd" },
-];

constants/Values.ts

@@ -1,3 +0,0 @@
-import { Platform } from "react-native";
-
-export const TAB_HEIGHT = Platform.OS === "android" ? 58 : 74;

eas.json

@@ -1,7 +1,6 @@
 {
   "cli": {
-    "version": ">= 9.1.0",
-    "appVersionSource": "local"
+    "version": ">= 9.1.0"
   },
   "build": {
     "development": {
@@ -22,13 +21,13 @@
       }
     },
     "production": {
-      "channel": "0.17.0",
+      "channel": "0.12.0",
       "android": {
         "image": "latest"
       }
     },
     "production-apk": {
-      "channel": "0.17.0",
+      "channel": "0.12.0",
       "android": {
         "buildType": "apk",
         "image": "latest"

hooks/useAdjacentEpisodes.ts

@@ -1,76 +0,0 @@
-import { Api } from "@jellyfin/sdk";
-import { getItemsApi } from "@jellyfin/sdk/lib/utils/api/items-api";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
-import { useQuery } from "@tanstack/react-query";
-import { CurrentlyPlayingState } from "@/providers/PlaybackProvider";
-import { useAtom } from "jotai";
-import { apiAtom } from "@/providers/JellyfinProvider";
-
-interface AdjacentEpisodesProps {
-  currentlyPlaying?: CurrentlyPlayingState | null;
-}
-
-export const useAdjacentEpisodes = ({
-  currentlyPlaying,
-}: AdjacentEpisodesProps) => {
-  const [api] = useAtom(apiAtom);
-
-  const { data: previousItem } = useQuery({
-    queryKey: [
-      "previousItem",
-      currentlyPlaying?.item.ParentId,
-      currentlyPlaying?.item.IndexNumber,
-    ],
-    queryFn: async (): Promise<BaseItemDto | null> => {
-      if (
-        !api ||
-        !currentlyPlaying?.item.ParentId ||
-        currentlyPlaying?.item.IndexNumber === undefined ||
-        currentlyPlaying?.item.IndexNumber === null ||
-        currentlyPlaying.item.IndexNumber - 2 < 0
-      ) {
-        console.log("No previous item");
-        return null;
-      }
-
-      const res = await getItemsApi(api).getItems({
-        parentId: currentlyPlaying.item.ParentId!,
-        startIndex: currentlyPlaying.item.IndexNumber! - 2,
-        limit: 1,
-      });
-
-      return res.data.Items?.[0] || null;
-    },
-    enabled: currentlyPlaying?.item.Type === "Episode",
-  });
-
-  const { data: nextItem } = useQuery({
-    queryKey: [
-      "nextItem",
-      currentlyPlaying?.item.ParentId,
-      currentlyPlaying?.item.IndexNumber,
-    ],
-    queryFn: async (): Promise<BaseItemDto | null> => {
-      if (
-        !api ||
-        !currentlyPlaying?.item.ParentId ||
-        currentlyPlaying?.item.IndexNumber === undefined ||
-        currentlyPlaying?.item.IndexNumber === null
-      ) {
-        console.log("No next item");
-        return null;
-      }
-
-      const res = await getItemsApi(api).getItems({
-        parentId: currentlyPlaying.item.ParentId!,
-        startIndex: currentlyPlaying.item.IndexNumber!,
-        limit: 1,
-      });
-
-      return res.data.Items?.[0] || null;
-    },
-    enabled: currentlyPlaying?.item.Type === "Episode",
-  });
-
-  return { previousItem, nextItem };
-};

hooks/useControlsVisibility.ts

@@ -1,41 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-import {
-  runOnJS,
-  useAnimatedReaction,
-  useSharedValue,
-} from "react-native-reanimated";
-
-export const useControlsVisibility = (timeout: number = 3000) => {
-  const opacity = useSharedValue(1);
-
-  const hideControlsTimerRef = useRef<ReturnType<typeof setTimeout> | null>(
-    null
-  );
-
-  const showControls = useCallback(() => {
-    opacity.value = 1;
-    if (hideControlsTimerRef.current) {
-      clearTimeout(hideControlsTimerRef.current);
-    }
-    hideControlsTimerRef.current = setTimeout(() => {
-      opacity.value = 0;
-    }, timeout);
-  }, [timeout]);
-
-  const hideControls = useCallback(() => {
-    opacity.value = 0;
-    if (hideControlsTimerRef.current) {
-      clearTimeout(hideControlsTimerRef.current);
-    }
-  }, []);
-
-  useEffect(() => {
-    return () => {
-      if (hideControlsTimerRef.current) {
-        clearTimeout(hideControlsTimerRef.current);
-      }
-    };
-  }, []);
-
-  return { opacity, showControls, hideControls };
-};

hooks/useCreditSkipper.ts

@@ -1,72 +0,0 @@
-import { useCallback, useEffect, useState } from "react";
-import { useQuery } from "@tanstack/react-query";
-import { useAtom } from "jotai";
-import { apiAtom } from "@/providers/JellyfinProvider";
-import { getAuthHeaders } from "@/utils/jellyfin/jellyfin";
-import { writeToLog } from "@/utils/log";
-
-interface CreditTimestamps {
-  Introduction: {
-    Start: number;
-    End: number;
-    Valid: boolean;
-  };
-  Credits: {
-    Start: number;
-    End: number;
-    Valid: boolean;
-  };
-}
-
-export const useCreditSkipper = (
-  itemId: string | undefined,
-  currentTime: number,
-  videoRef: React.RefObject<any>
-) => {
-  const [api] = useAtom(apiAtom);
-  const [showSkipCreditButton, setShowSkipCreditButton] = useState(false);
-
-  const { data: creditTimestamps } = useQuery<CreditTimestamps | null>({
-    queryKey: ["creditTimestamps", itemId],
-    queryFn: async () => {
-      if (!itemId) {
-        console.log("No item id");
-        return null;
-      }
-
-      const res = await api?.axiosInstance.get(
-        `${api.basePath}/Episode/${itemId}/Timestamps`,
-        {
-          headers: getAuthHeaders(api),
-        }
-      );
-
-      if (res?.status !== 200) {
-        return null;
-      }
-
-      return res?.data;
-    },
-    enabled: !!itemId,
-  });
-
-  useEffect(() => {
-    if (creditTimestamps) {
-      setShowSkipCreditButton(
-        currentTime > creditTimestamps.Credits.Start &&
-          currentTime < creditTimestamps.Credits.End
-      );
-    }
-  }, [creditTimestamps, currentTime]);
-
-  const skipCredit = useCallback(() => {
-    if (!creditTimestamps || !videoRef.current) return;
-    try {
-      videoRef.current.seek(creditTimestamps.Credits.End);
-    } catch (error) {
-      writeToLog("ERROR", "Error skipping intro", error);
-    }
-  }, [creditTimestamps, videoRef]);
-
-  return { showSkipCreditButton, skipCredit };
-};

hooks/useDownloadMedia.ts

@@ -0,0 +1,117 @@
+import { useCallback, useRef, useState } from "react";
+import { useAtom } from "jotai";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import * as FileSystem from "expo-file-system";
+import { Api } from "@jellyfin/sdk";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { runningProcesses } from "@/utils/atoms/downloads";
+
+/**
+ * Custom hook for downloading media using the Jellyfin API.
+ *
+ * @param api - The Jellyfin API instance
+ * @param userId - The user ID
+ * @returns An object with download-related functions and state
+ */
+export const useDownloadMedia = (api: Api | null, userId?: string | null) => {
+  const [isDownloading, setIsDownloading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [_, setProgress] = useAtom(runningProcesses);
+  const downloadResumableRef = useRef<FileSystem.DownloadResumable | null>(
+    null,
+  );
+
+  const downloadMedia = useCallback(
+    async (item: BaseItemDto | null): Promise<boolean> => {
+      if (!item?.Id || !api || !userId) {
+        setError("Invalid item or API");
+        return false;
+      }
+
+      setIsDownloading(true);
+      setError(null);
+      setProgress({ item, progress: 0 });
+
+      try {
+        const filename = item.Id;
+        const fileUri = `${FileSystem.documentDirectory}${filename}`;
+        const url = `${api.basePath}/Items/${item.Id}/File`;
+
+        downloadResumableRef.current = FileSystem.createDownloadResumable(
+          url,
+          fileUri,
+          {
+            headers: {
+              Authorization: `MediaBrowser DeviceId="${api.deviceInfo.id}", Token="${api.accessToken}"`,
+            },
+          },
+          (downloadProgress) => {
+            const currentProgress =
+              downloadProgress.totalBytesWritten /
+              downloadProgress.totalBytesExpectedToWrite;
+            setProgress({ item, progress: currentProgress * 100 });
+          },
+        );
+
+        const res = await downloadResumableRef.current.downloadAsync();
+
+        if (!res?.uri) {
+          throw new Error("Download failed: No URI returned");
+        }
+
+        await updateDownloadedFiles(item);
+
+        setIsDownloading(false);
+        setProgress(null);
+        return true;
+      } catch (error) {
+        console.error("Error downloading media:", error);
+        setError("Failed to download media");
+        setIsDownloading(false);
+        setProgress(null);
+        return false;
+      }
+    },
+    [api, userId, setProgress],
+  );
+
+  const cancelDownload = useCallback(async (): Promise<void> => {
+    if (!downloadResumableRef.current) return;
+
+    try {
+      await downloadResumableRef.current.pauseAsync();
+      setIsDownloading(false);
+      setError("Download cancelled");
+      setProgress(null);
+      downloadResumableRef.current = null;
+    } catch (error) {
+      console.error("Error cancelling download:", error);
+      setError("Failed to cancel download");
+    }
+  }, [setProgress]);
+
+  return { downloadMedia, isDownloading, error, cancelDownload };
+};
+
+/**
+ * Updates the list of downloaded files in AsyncStorage.
+ *
+ * @param item - The item to add to the downloaded files list
+ */
+async function updateDownloadedFiles(item: BaseItemDto): Promise<void> {
+  try {
+    const currentFiles: BaseItemDto[] = JSON.parse(
+      (await AsyncStorage.getItem("downloaded_files")) ?? "[]",
+    );
+    const updatedFiles = [
+      ...currentFiles.filter((file) => file.Id !== item.Id),
+      item,
+    ];
+    await AsyncStorage.setItem(
+      "downloaded_files",
+      JSON.stringify(updatedFiles),
+    );
+  } catch (error) {
+    console.error("Error updating downloaded files:", error);
+  }
+}

hooks/useDownloadedFileOpener.ts

@@ -1,55 +0,0 @@
-// hooks/useFileOpener.ts
-
-import { usePlayback } from "@/providers/PlaybackProvider";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
-import * as FileSystem from "expo-file-system";
-import { useRouter } from "expo-router";
-import { useCallback } from "react";
-
-export const useFileOpener = () => {
-  const router = useRouter();
-  const { startDownloadedFilePlayback } = usePlayback();
-
-  const openFile = useCallback(
-    async (item: BaseItemDto) => {
-      const directory = FileSystem.documentDirectory;
-
-      if (!directory) {
-        throw new Error("Document directory is not available");
-      }
-
-      if (!item.Id) {
-        throw new Error("Item ID is not available");
-      }
-
-      try {
-        const files = await FileSystem.readDirectoryAsync(directory);
-        for (let f of files) {
-          console.log(f);
-        }
-        const path = item.Id!;
-        const matchingFile = files.find((file) => file.startsWith(path));
-
-        if (!matchingFile) {
-          throw new Error(`No file found for item ${path}`);
-        }
-
-        const url = `${directory}${matchingFile}`;
-
-        console.log("Opening " + url);
-
-        startDownloadedFilePlayback({
-          item,
-          url,
-        });
-        router.push("/play");
-      } catch (error) {
-        console.error("Error opening file:", error);
-        // Handle the error appropriately, e.g., show an error message to the user
-      }
-    },
-    [startDownloadedFilePlayback]
-  );
-
-  return { openFile };
-};

hooks/useFiles.ts

@@ -0,0 +1,85 @@
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { useQueryClient } from "@tanstack/react-query";
+import * as FileSystem from "expo-file-system";
+
+/**
+ * Custom hook for managing downloaded files.
+ * @returns An object with functions to delete individual files and all files.
+ */
+export const useFiles = () => {
+  const queryClient = useQueryClient();
+
+  /**
+   * Deletes all downloaded files and clears the download record.
+   */
+  const deleteAllFiles = async (): Promise<void> => {
+    const directoryUri = FileSystem.documentDirectory;
+    if (!directoryUri) {
+      console.error("Document directory is undefined");
+      return;
+    }
+
+    try {
+      const fileNames = await FileSystem.readDirectoryAsync(directoryUri);
+      await Promise.all(
+        fileNames.map((item) =>
+          FileSystem.deleteAsync(`${directoryUri}/${item}`, {
+            idempotent: true,
+          })
+        )
+      );
+      await AsyncStorage.removeItem("downloaded_files");
+      queryClient.invalidateQueries({ queryKey: ["downloaded_files"] });
+      queryClient.invalidateQueries({ queryKey: ["downloaded"] });
+    } catch (error) {
+      console.error("Failed to delete all files:", error);
+    }
+  };
+
+  /**
+   * Deletes a specific file and updates the download record.
+   * @param id - The ID of the file to delete.
+   */
+  const deleteFile = async (id: string): Promise<void> => {
+    if (!id) {
+      console.error("Invalid file ID");
+      return;
+    }
+
+    try {
+      await FileSystem.deleteAsync(
+        `${FileSystem.documentDirectory}/${id}.mp4`,
+        { idempotent: true }
+      );
+
+      const currentFiles = await getDownloadedFiles();
+      const updatedFiles = currentFiles.filter((f) => f.Id !== id);
+
+      await AsyncStorage.setItem(
+        "downloaded_files",
+        JSON.stringify(updatedFiles)
+      );
+
+      queryClient.invalidateQueries({ queryKey: ["downloaded_files"] });
+    } catch (error) {
+      console.error(`Failed to delete file with ID ${id}:`, error);
+    }
+  };
+
+  return { deleteFile, deleteAllFiles };
+};
+
+/**
+ * Retrieves the list of downloaded files from AsyncStorage.
+ * @returns An array of BaseItemDto objects representing downloaded files.
+ */
+async function getDownloadedFiles(): Promise<BaseItemDto[]> {
+  try {
+    const filesJson = await AsyncStorage.getItem("downloaded_files");
+    return filesJson ? JSON.parse(filesJson) : [];
+  } catch (error) {
+    console.error("Failed to retrieve downloaded files:", error);
+    return [];
+  }
+}

hooks/useImageColors.ts

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

hooks/useImageStorage.ts

@@ -1,89 +0,0 @@
-import { useState, useCallback } from "react";
-import AsyncStorage from "@react-native-async-storage/async-storage";
-import * as FileSystem from "expo-file-system";
-import { storage } from "@/utils/mmkv";
-
-const useImageStorage = () => {
-  const saveBase64Image = useCallback(async (base64: string, key: string) => {
-    try {
-      // Save the base64 string to AsyncStorage
-      storage.set(key, base64);
-      console.log("Image saved successfully");
-    } catch (error) {
-      console.error("Error saving image:", error);
-      throw error;
-    }
-  }, []);
-
-  const image2Base64 = useCallback(async (url?: string | null) => {
-    if (!url) return null;
-
-    let blob: Blob;
-    try {
-      // Fetch the data from the URL
-      const response = await fetch(url);
-      blob = await response.blob();
-    } catch (error) {
-      console.warn("Error fetching image:", error);
-      return null;
-    }
-
-    // Create a FileReader instance
-    const reader = new FileReader();
-
-    // Convert blob to base64
-    return new Promise<string>((resolve, reject) => {
-      reader.onloadend = () => {
-        if (typeof reader.result === "string") {
-          // Extract the base64 string (remove the data URL prefix)
-          const base64 = reader.result.split(",")[1];
-          resolve(base64);
-        } else {
-          reject(new Error("Failed to convert image to base64"));
-        }
-      };
-      reader.onerror = reject;
-      reader.readAsDataURL(blob);
-    });
-  }, []);
-
-  const saveImage = useCallback(
-    async (key?: string | null, imageUrl?: string | null) => {
-      if (!imageUrl || !key) {
-        console.warn("Invalid image URL or key");
-        return;
-      }
-
-      try {
-        const base64Image = await image2Base64(imageUrl);
-        if (!base64Image || base64Image.length === 0) {
-          console.warn("Failed to convert image to base64");
-          return;
-        }
-        saveBase64Image(base64Image, key);
-      } catch (error) {
-        console.warn("Error saving image:", error);
-      }
-    },
-    []
-  );
-
-  const loadImage = useCallback(async (key: string) => {
-    try {
-      // Retrieve the base64 string from AsyncStorage
-      const base64Image = storage.getString(key);
-      if (base64Image !== null) {
-        // Set the loaded image state
-        return `data:image/jpeg;base64,${base64Image}`;
-      }
-      return null;
-    } catch (error) {
-      console.error("Error loading image:", error);
-      throw error;
-    }
-  }, []);
-
-  return { saveImage, loadImage, saveBase64Image, image2Base64 };
-};
-
-export default useImageStorage;

hooks/useIntroSkipper.ts

@@ -1,68 +0,0 @@
-import { useCallback, useEffect, useState } from "react";
-import { useQuery } from "@tanstack/react-query";
-import { useAtom } from "jotai";
-import { apiAtom } from "@/providers/JellyfinProvider";
-import { getAuthHeaders } from "@/utils/jellyfin/jellyfin";
-import { writeToLog } from "@/utils/log";
-
-interface IntroTimestamps {
-  EpisodeId: string;
-  HideSkipPromptAt: number;
-  IntroEnd: number;
-  IntroStart: number;
-  ShowSkipPromptAt: number;
-  Valid: boolean;
-}
-
-export const useIntroSkipper = (
-  itemId: string | undefined,
-  currentTime: number,
-  videoRef: React.RefObject<any>
-) => {
-  const [api] = useAtom(apiAtom);
-  const [showSkipButton, setShowSkipButton] = useState(false);
-
-  const { data: introTimestamps } = useQuery<IntroTimestamps | null>({
-    queryKey: ["introTimestamps", itemId],
-    queryFn: async () => {
-      if (!itemId) {
-        console.log("No item id");
-        return null;
-      }
-
-      const res = await api?.axiosInstance.get(
-        `${api.basePath}/Episode/${itemId}/IntroTimestamps`,
-        {
-          headers: getAuthHeaders(api),
-        }
-      );
-
-      if (res?.status !== 200) {
-        return null;
-      }
-
-      return res?.data;
-    },
-    enabled: !!itemId,
-  });
-
-  useEffect(() => {
-    if (introTimestamps) {
-      setShowSkipButton(
-        currentTime > introTimestamps.ShowSkipPromptAt &&
-          currentTime < introTimestamps.HideSkipPromptAt
-      );
-    }
-  }, [introTimestamps, currentTime]);
-
-  const skipIntro = useCallback(() => {
-    if (!introTimestamps || !videoRef.current) return;
-    try {
-      videoRef.current.seek(introTimestamps.IntroEnd);
-    } catch (error) {
-      writeToLog("ERROR", "Error skipping intro", error);
-    }
-  }, [introTimestamps, videoRef]);
-
-  return { showSkipButton, skipIntro };
-};

hooks/useNavigationBarVisibility.ts

@@ -1,27 +0,0 @@
-// hooks/useNavigationBarVisibility.ts
-
-import { useEffect } from "react";
-import { Platform } from "react-native";
-import * as NavigationBar from "expo-navigation-bar";
-
-export const useNavigationBarVisibility = (isPlaying: boolean | null) => {
-  useEffect(() => {
-    const handleVisibility = async () => {
-      if (Platform.OS === "android") {
-        if (isPlaying) {
-          await NavigationBar.setVisibilityAsync("hidden");
-        } else {
-          await NavigationBar.setVisibilityAsync("visible");
-        }
-      }
-    };
-
-    handleVisibility();
-
-    return () => {
-      if (Platform.OS === "android") {
-        NavigationBar.setVisibilityAsync("visible");
-      }
-    };
-  }, [isPlaying]);
-};

hooks/useRemuxHlsToMp4.ts

@@ -4,12 +4,9 @@ import AsyncStorage from "@react-native-async-storage/async-storage";
 import * as FileSystem from "expo-file-system";
 import { FFmpegKit, FFmpegKitConfig } from "ffmpeg-kit-react-native";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { runningProcesses } from "@/utils/atoms/downloads";
 import { writeToLog } from "@/utils/log";
 import { useQueryClient } from "@tanstack/react-query";
-import { toast } from "sonner-native";
-import { useDownload } from "@/providers/DownloadProvider";
-import { useRouter } from "expo-router";
-import { JobStatus } from "@/utils/optimize-server";
 
 /**
  * Custom hook for remuxing HLS to MP4 using FFmpeg.
@@ -19,9 +16,8 @@ import { JobStatus } from "@/utils/optimize-server";
  * @returns An object with remuxing-related functions
  */
 export const useRemuxHlsToMp4 = (item: BaseItemDto) => {
+  const [_, setProgress] = useAtom(runningProcesses);
   const queryClient = useQueryClient();
-  const { saveDownloadedItemInfo, setProcesses } = useDownload();
-  const router = useRouter();
 
   if (!item.Id || !item.Name) {
     writeToLog("ERROR", "useRemuxHlsToMp4 ~ missing arguments");
@@ -32,18 +28,6 @@ export const useRemuxHlsToMp4 = (item: BaseItemDto) => {
 
   const startRemuxing = useCallback(
     async (url: string) => {
-      if (!item.Id) throw new Error("Item must have an Id");
-
-      toast.success(`Download started for ${item.Name}`, {
-        action: {
-          label: "Go to download",
-          onClick: () => {
-            router.push("/downloads");
-            toast.dismiss();
-          },
-        },
-      });
-
       const command = `-y -loglevel quiet -thread_queue_size 512 -protocol_whitelist file,http,https,tcp,tls,crypto -multiple_requests 1 -tcp_nodelay 1 -fflags +genpts -i ${url} -c copy -bufsize 50M -max_muxing_queue_size 4096 ${output}`;
 
       writeToLog(
@@ -52,20 +36,7 @@ export const useRemuxHlsToMp4 = (item: BaseItemDto) => {
       );
 
       try {
-        setProcesses((prev) => [
-          ...prev,
-          {
-            id: "",
-            deviceId: "",
-            inputUrl: "",
-            item,
-            itemId: item.Id,
-            outputPath: "",
-            progress: 0,
-            status: "downloading",
-            timestamp: new Date(),
-          } as JobStatus,
-        ]);
+        setProgress({ item, progress: 0, startTime: new Date(), speed: 0 });
 
         FFmpegKitConfig.enableStatisticsCallback((statistics) => {
           const videoLength =
@@ -80,19 +51,11 @@ export const useRemuxHlsToMp4 = (item: BaseItemDto) => {
               ? Math.floor((processedFrames / totalFrames) * 100)
               : 0;
 
-          if (!item.Id) throw new Error("Item is undefined");
-          setProcesses((prev) => {
-            return prev.map((process) => {
-              if (process.itemId === item.Id) {
-                return {
-                  ...process,
-                  progress: percentage,
-                  speed: Math.max(speed, 0),
-                };
-              }
-              return process;
-            });
-          });
+          setProgress((prev) =>
+            prev?.item.Id === item.Id!
+              ? { ...prev, progress: percentage, speed }
+              : prev
+          );
         });
 
         // Await the execution of the FFmpeg command and ensure that the callback is awaited properly.
@@ -102,16 +65,11 @@ export const useRemuxHlsToMp4 = (item: BaseItemDto) => {
               const returnCode = await session.getReturnCode();
 
               if (returnCode.isValueSuccess()) {
-                if (!item) throw new Error("Item is undefined");
-                await saveDownloadedItemInfo(item);
-                toast.success("Download completed");
+                await updateDownloadedFiles(item);
                 writeToLog(
                   "INFO",
                   `useRemuxHlsToMp4 ~ remuxing completed successfully for item: ${item.Name}`
                 );
-                await queryClient.invalidateQueries({
-                  queryKey: ["downloadedItems"],
-                });
                 resolve();
               } else if (returnCode.isValueError()) {
                 writeToLog(
@@ -127,35 +85,63 @@ export const useRemuxHlsToMp4 = (item: BaseItemDto) => {
                 resolve();
               }
 
-              setProcesses((prev) => {
-                return prev.filter((process) => process.itemId !== item.Id);
-              });
+              setProgress(null);
             } catch (error) {
               reject(error);
             }
           });
         });
+
+        await queryClient.invalidateQueries({ queryKey: ["downloaded_files"] });
+        await queryClient.invalidateQueries({ queryKey: ["downloaded"] });
       } catch (error) {
         console.error("Failed to remux:", error);
         writeToLog(
           "ERROR",
           `useRemuxHlsToMp4 ~ remuxing failed for item: ${item.Name}`
         );
-        setProcesses((prev) => {
-          return prev.filter((process) => process.itemId !== item.Id);
-        });
+        setProgress(null);
         throw error; // Re-throw the error to propagate it to the caller
       }
     },
-    [output, item]
+    [output, item, setProgress]
   );
 
   const cancelRemuxing = useCallback(() => {
     FFmpegKit.cancel();
-    setProcesses((prev) => {
-      return prev.filter((process) => process.itemId !== item.Id);
-    });
-  }, [item.Name]);
+    setProgress(null);
+    writeToLog(
+      "INFO",
+      `useRemuxHlsToMp4 ~ remuxing cancelled for item: ${item.Name}`
+    );
+  }, [item.Name, setProgress]);
 
   return { startRemuxing, cancelRemuxing };
 };
+
+/**
+ * Updates the list of downloaded files in AsyncStorage.
+ *
+ * @param item - The item to add to the downloaded files list
+ */
+async function updateDownloadedFiles(item: BaseItemDto): Promise<void> {
+  try {
+    const currentFiles: BaseItemDto[] = JSON.parse(
+      (await AsyncStorage.getItem("downloaded_files")) || "[]"
+    );
+    const updatedFiles = [
+      ...currentFiles.filter((i) => i.Id !== item.Id),
+      item,
+    ];
+    await AsyncStorage.setItem(
+      "downloaded_files",
+      JSON.stringify(updatedFiles)
+    );
+  } catch (error) {
+    console.error("Error updating downloaded files:", error);
+    writeToLog(
+      "ERROR",
+      `Failed to update downloaded files for item: ${item.Name}`
+    );
+  }
+}

hooks/useTrickplay.ts

@@ -1,108 +0,0 @@
-// hooks/useTrickplay.ts
-
-import { useState, useCallback, useMemo, useRef } from "react";
-import { Api } from "@jellyfin/sdk";
-import { SharedValue } from "react-native-reanimated";
-import { CurrentlyPlayingState } from "@/providers/PlaybackProvider";
-import { useAtom } from "jotai";
-import { apiAtom } from "@/providers/JellyfinProvider";
-
-interface TrickplayData {
-  Interval?: number;
-  TileWidth?: number;
-  TileHeight?: number;
-  Height?: number;
-  Width?: number;
-  ThumbnailCount?: number;
-}
-
-interface TrickplayInfo {
-  resolution: string;
-  aspectRatio: number;
-  data: TrickplayData;
-}
-
-interface TrickplayUrl {
-  x: number;
-  y: number;
-  url: string;
-}
-
-export const useTrickplay = (
-  currentlyPlaying?: CurrentlyPlayingState | null
-) => {
-  const [api] = useAtom(apiAtom);
-  const [trickPlayUrl, setTrickPlayUrl] = useState<TrickplayUrl | null>(null);
-  const lastCalculationTime = useRef(0);
-  const throttleDelay = 200; // 200ms throttle
-
-  const trickplayInfo = useMemo(() => {
-    if (!currentlyPlaying?.item.Id || !currentlyPlaying?.item.Trickplay) {
-      return null;
-    }
-
-    const mediaSourceId = currentlyPlaying.item.Id;
-    const trickplayData = currentlyPlaying.item.Trickplay[mediaSourceId];
-
-    if (!trickplayData) {
-      return null;
-    }
-
-    // Get the first available resolution
-    const firstResolution = Object.keys(trickplayData)[0];
-    return firstResolution
-      ? {
-          resolution: firstResolution,
-          aspectRatio:
-            trickplayData[firstResolution].Width! /
-            trickplayData[firstResolution].Height!,
-          data: trickplayData[firstResolution],
-        }
-      : null;
-  }, [currentlyPlaying]);
-
-  const calculateTrickplayUrl = useCallback(
-    (progress: number) => {
-      const now = Date.now();
-      if (now - lastCalculationTime.current < throttleDelay) {
-        return null;
-      }
-      lastCalculationTime.current = now;
-
-      if (!trickplayInfo || !api || !currentlyPlaying?.item.Id) {
-        return null;
-      }
-
-      const { data, resolution } = trickplayInfo;
-      const { Interval, TileWidth, TileHeight } = data;
-
-      if (!Interval || !TileWidth || !TileHeight || !resolution) {
-        throw new Error("Invalid trickplay data");
-      }
-
-      const currentSecond = Math.max(0, Math.floor(progress / 10000000));
-
-      const cols = TileWidth;
-      const rows = TileHeight;
-      const imagesPerTile = cols * rows;
-      const imageIndex = Math.floor(currentSecond / (Interval / 1000));
-      const tileIndex = Math.floor(imageIndex / imagesPerTile);
-
-      const positionInTile = imageIndex % imagesPerTile;
-      const rowInTile = Math.floor(positionInTile / cols);
-      const colInTile = positionInTile % cols;
-
-      const newTrickPlayUrl = {
-        x: rowInTile,
-        y: colInTile,
-        url: `${api.basePath}/Videos/${currentlyPlaying.item.Id}/Trickplay/${resolution}/${tileIndex}.jpg?api_key=${api.accessToken}`,
-      };
-
-      setTrickPlayUrl(newTrickPlayUrl);
-      return newTrickPlayUrl;
-    },
-    [trickplayInfo, currentlyPlaying, api]
-  );
-
-  return { trickPlayUrl, calculateTrickplayUrl, trickplayInfo };
-};

package.json

@@ -17,76 +17,65 @@
   "dependencies": {
     "@config-plugins/ffmpeg-kit-react-native": "^8.0.0",
     "@expo/react-native-action-sheet": "^4.1.0",
-    "@expo/vector-icons": "^14.0.3",
-    "@futurejj/react-native-visibility-sensor": "^1.3.4",
+    "@expo/vector-icons": "^14.0.2",
     "@gorhom/bottom-sheet": "^4",
     "@jellyfin/sdk": "^0.10.0",
-    "@kesha-antonov/react-native-background-downloader": "^3.2.1",
+    "@kesha-antonov/react-native-background-downloader": "^3.2.0",
     "@react-native-async-storage/async-storage": "1.23.1",
     "@react-native-community/netinfo": "11.3.1",
-    "@react-native-menu/menu": "^1.1.3",
-    "@react-navigation/material-top-tabs": "^6.6.14",
+    "@react-native-menu/menu": "^1.1.2",
     "@react-navigation/native": "^6.0.2",
     "@shopify/flash-list": "1.6.4",
-    "@tanstack/react-query": "^5.56.2",
-    "@types/lodash": "^4.17.9",
+    "@tanstack/react-query": "^5.54.1",
+    "@types/lodash": "^4.17.7",
     "@types/uuid": "^10.0.0",
     "axios": "^1.7.7",
-    "expo": "~51.0.36",
-    "expo-background-fetch": "~12.0.1",
+    "expo": "~51.0.32",
     "expo-blur": "~13.0.2",
     "expo-build-properties": "~0.12.5",
     "expo-constants": "~16.0.2",
-    "expo-dev-client": "~4.0.27",
+    "expo-dev-client": "~4.0.26",
     "expo-device": "~6.0.2",
     "expo-font": "~12.0.10",
     "expo-haptics": "~13.0.1",
-    "expo-image": "~1.13.0",
+    "expo-image": "~1.12.15",
     "expo-keep-awake": "~13.0.2",
     "expo-linear-gradient": "~13.0.2",
     "expo-linking": "~6.3.1",
     "expo-navigation-bar": "~3.0.7",
     "expo-network": "~6.0.1",
-    "expo-notifications": "~0.28.18",
     "expo-router": "~3.5.23",
     "expo-screen-orientation": "~7.0.5",
     "expo-sensors": "~13.0.9",
-    "expo-splash-screen": "~0.27.6",
+    "expo-splash-screen": "~0.27.5",
     "expo-status-bar": "~1.12.1",
     "expo-system-ui": "~3.0.7",
-    "expo-task-manager": "~11.8.2",
-    "expo-updates": "~0.25.26",
+    "expo-updates": "~0.25.24",
     "expo-web-browser": "~13.0.3",
     "ffmpeg-kit-react-native": "^6.0.2",
-    "install": "^0.13.0",
-    "jotai": "^2.10.0",
+    "jotai": "^2.9.3",
     "lodash": "^4.17.21",
     "nativewind": "^2.0.11",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "~0.75.0",
-    "react-native-awesome-slider": "^2.5.3",
+    "react-native": "0.74.5",
     "react-native-circular-progress": "^1.4.0",
     "react-native-compressor": "^1.8.25",
-    "react-native-gesture-handler": "~2.18.1",
+    "react-native-gesture-handler": "~2.16.1",
     "react-native-get-random-values": "^1.11.0",
-    "react-native-google-cast": "^4.8.3",
+    "react-native-google-cast": "^4.8.2",
     "react-native-image-colors": "^2.4.0",
     "react-native-ios-context-menu": "^2.5.1",
     "react-native-ios-utilities": "^4.4.5",
-    "react-native-mmkv": "^2.12.2",
-    "react-native-pager-view": "^6.4.1",
-    "react-native-reanimated": "~3.15.0",
-    "react-native-reanimated-carousel": "4.0.0-canary.15",
+    "react-native-reanimated": "~3.10.1",
+    "react-native-reanimated-carousel": "4.0.0-alpha.12",
     "react-native-safe-area-context": "4.10.5",
-    "react-native-screens": "~3.34.0",
+    "react-native-screens": "3.31.1",
     "react-native-svg": "15.2.0",
-    "react-native-tab-view": "^3.5.2",
     "react-native-url-polyfill": "^2.0.0",
     "react-native-uuid": "^2.0.2",
-    "react-native-video": "^6.6.4",
+    "react-native-video": "^6.5.0",
     "react-native-web": "~0.19.10",
-    "sonner-native": "^0.14.2",
     "tailwindcss": "3.3.2",
     "use-debounce": "^10.0.3",
     "uuid": "^10.0.0",
@@ -103,15 +92,5 @@
     "react-test-renderer": "18.2.0",
     "typescript": "~5.3.3"
   },
-  "private": true,
-  "expo": {
-    "install": {
-      "exclude": [
-        "react-native@~0.74.0",
-        "react-native-reanimated@~3.10.0",
-        "react-native-gesture-handler@~2.16.1",
-        "react-native-screens@~3.31.1"
-      ]
-    }
-  }
+  "private": true
 }

plugins/withRNBackgroundDownloader.js

@@ -1,48 +0,0 @@
-const { withAppDelegate } = require("@expo/config-plugins");
-
-function withRNBackgroundDownloader(expoConfig) {
-  return withAppDelegate(expoConfig, async (appDelegateConfig) => {
-    const { modResults: appDelegate } = appDelegateConfig;
-    const appDelegateLines = appDelegate.contents.split("\n");
-
-    // Define the code to be added to AppDelegate.mm
-    const backgroundDownloaderImport =
-      "#import <RNBackgroundDownloader.h> // Required by react-native-background-downloader. Generated by expoPlugins/withRNBackgroundDownloader.js";
-    const backgroundDownloaderDelegate = `\n// Delegate method required by react-native-background-downloader. Generated by expoPlugins/withRNBackgroundDownloader.js
-- (void)application:(UIApplication *)application handleEventsForBackgroundURLSession:(NSString *)identifier completionHandler:(void (^)(void))completionHandler
-{
-  [RNBackgroundDownloader setCompletionHandlerWithIdentifier:identifier completionHandler:completionHandler];
-}`;
-
-    // Find the index of the AppDelegate import statement
-    const importIndex = appDelegateLines.findIndex((line) =>
-      /^#import "AppDelegate.h"/.test(line)
-    );
-
-    // Find the index of the last line before the @end statement
-    const endStatementIndex = appDelegateLines.findIndex((line) =>
-      /@end/.test(line)
-    );
-
-    // Insert the import statement if it's not already present
-    if (!appDelegate.contents.includes(backgroundDownloaderImport)) {
-      appDelegateLines.splice(importIndex + 1, 0, backgroundDownloaderImport);
-    }
-
-    // Insert the delegate method above the @end statement
-    if (!appDelegate.contents.includes(backgroundDownloaderDelegate)) {
-      appDelegateLines.splice(
-        endStatementIndex,
-        0,
-        backgroundDownloaderDelegate
-      );
-    }
-
-    // Update the contents of the AppDelegate file
-    appDelegate.contents = appDelegateLines.join("\n");
-
-    return appDelegateConfig;
-  });
-}
-
-module.exports = withRNBackgroundDownloader;

providers/DownloadProvider.tsx

@@ -1,560 +0,0 @@
-import { useSettings } from "@/utils/atoms/settings";
-import { getOrSetDeviceId } from "@/utils/device";
-import { writeToLog } from "@/utils/log";
-import {
-  cancelAllJobs,
-  cancelJobById,
-  getAllJobsByDeviceId,
-  JobStatus,
-} from "@/utils/optimize-server";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import {
-  checkForExistingDownloads,
-  completeHandler,
-  download,
-  setConfig,
-} from "@kesha-antonov/react-native-background-downloader";
-import AsyncStorage from "@react-native-async-storage/async-storage";
-import {
-  focusManager,
-  QueryClient,
-  QueryClientProvider,
-  useQuery,
-  useQueryClient,
-} from "@tanstack/react-query";
-import axios from "axios";
-import * as FileSystem from "expo-file-system";
-import { useRouter } from "expo-router";
-import { useAtom } from "jotai";
-import React, {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useState,
-} from "react";
-import { AppState, AppStateStatus } from "react-native";
-import { toast } from "sonner-native";
-import { apiAtom } from "./JellyfinProvider";
-import * as Notifications from "expo-notifications";
-import { getItemImage } from "@/utils/getItemImage";
-import useImageStorage from "@/hooks/useImageStorage";
-
-function onAppStateChange(status: AppStateStatus) {
-  focusManager.setFocused(status === "active");
-}
-
-const DownloadContext = createContext<ReturnType<
-  typeof useDownloadProvider
-> | null>(null);
-
-function useDownloadProvider() {
-  const queryClient = useQueryClient();
-  const [settings] = useSettings();
-  const router = useRouter();
-  const [api] = useAtom(apiAtom);
-
-  const { loadImage, saveImage, image2Base64, saveBase64Image } =
-    useImageStorage();
-
-  const [processes, setProcesses] = useState<JobStatus[]>([]);
-
-  const authHeader = useMemo(() => {
-    return api?.accessToken;
-  }, [api]);
-
-  const { data: downloadedFiles, refetch } = useQuery({
-    queryKey: ["downloadedItems"],
-    queryFn: getAllDownloadedItems,
-    staleTime: 0,
-    refetchOnMount: true,
-    refetchOnReconnect: true,
-    refetchOnWindowFocus: true,
-  });
-
-  useEffect(() => {
-    const subscription = AppState.addEventListener("change", onAppStateChange);
-
-    return () => subscription.remove();
-  }, []);
-
-  useQuery({
-    queryKey: ["jobs"],
-    queryFn: async () => {
-      const deviceId = await getOrSetDeviceId();
-      const url = settings?.optimizedVersionsServerUrl;
-
-      if (
-        settings?.downloadMethod !== "optimized" ||
-        !url ||
-        !deviceId ||
-        !authHeader
-      )
-        return [];
-
-      const jobs = await getAllJobsByDeviceId({
-        deviceId,
-        authHeader,
-        url,
-      });
-
-      // Local downloading processes that are still valid
-      const downloadingProcesses = processes
-        .filter((p) => p.status === "downloading")
-        .filter((p) => jobs.some((j) => j.id === p.id));
-
-      const updatedProcesses = jobs.filter(
-        (j) => !downloadingProcesses.some((p) => p.id === j.id)
-      );
-
-      setProcesses([...updatedProcesses, ...downloadingProcesses]);
-
-      // Go though new jobs and compare them to old jobs
-      // if new job is now completed, start download.
-      for (let job of jobs) {
-        const process = processes.find((p) => p.id === job.id);
-        if (
-          process &&
-          process.status === "optimizing" &&
-          job.status === "completed"
-        ) {
-          if (settings.autoDownload) {
-            startDownload(job);
-          } else {
-            toast.info(`${job.item.Name} is ready to be downloaded`, {
-              action: {
-                label: "Go to downloads",
-                onClick: () => {
-                  router.push("/downloads");
-                  toast.dismiss();
-                },
-              },
-            });
-            Notifications.scheduleNotificationAsync({
-              content: {
-                title: job.item.Name,
-                body: `${job.item.Name} is ready to be downloaded`,
-                data: {
-                  url: `/downloads`,
-                },
-              },
-              trigger: null,
-            });
-          }
-        }
-      }
-
-      return jobs;
-    },
-    staleTime: 0,
-    refetchInterval: 2000,
-    enabled: settings?.downloadMethod === "optimized",
-  });
-
-  useEffect(() => {
-    const checkIfShouldStartDownload = async () => {
-      if (processes.length === 0) return;
-      await checkForExistingDownloads();
-    };
-
-    checkIfShouldStartDownload();
-  }, [settings, processes]);
-
-  const removeProcess = useCallback(
-    async (id: string) => {
-      const deviceId = await getOrSetDeviceId();
-      if (!deviceId || !authHeader || !settings?.optimizedVersionsServerUrl)
-        return;
-
-      try {
-        await cancelJobById({
-          authHeader,
-          id,
-          url: settings?.optimizedVersionsServerUrl,
-        });
-      } catch (error) {
-        console.log(error);
-      }
-    },
-    [settings?.optimizedVersionsServerUrl, authHeader]
-  );
-
-  const startDownload = useCallback(
-    async (process: JobStatus) => {
-      if (!process?.item.Id || !authHeader) throw new Error("No item id");
-
-      console.log("[0] Setting process to downloading");
-      setProcesses((prev) =>
-        prev.map((p) =>
-          p.id === process.id
-            ? {
-                ...p,
-                speed: undefined,
-                status: "downloading",
-                progress: 0,
-              }
-            : p
-        )
-      );
-
-      setConfig({
-        isLogsEnabled: true,
-        progressInterval: 500,
-        headers: {
-          Authorization: authHeader,
-        },
-      });
-
-      toast.info(`Download started for ${process.item.Name}`, {
-        action: {
-          label: "Go to downloads",
-          onClick: () => {
-            router.push("/downloads");
-            toast.dismiss();
-          },
-        },
-      });
-
-      const baseDirectory = FileSystem.documentDirectory;
-
-      download({
-        id: process.id,
-        url: settings?.optimizedVersionsServerUrl + "download/" + process.id,
-        destination: `${baseDirectory}/${process.item.Id}.mp4`,
-      })
-        .begin(() => {
-          setProcesses((prev) =>
-            prev.map((p) =>
-              p.id === process.id
-                ? {
-                    ...p,
-                    speed: undefined,
-                    status: "downloading",
-                    progress: 0,
-                  }
-                : p
-            )
-          );
-        })
-        .progress((data) => {
-          const percent = (data.bytesDownloaded / data.bytesTotal) * 100;
-          console.log("Download progress:", percent);
-          setProcesses((prev) =>
-            prev.map((p) =>
-              p.id === process.id
-                ? {
-                    ...p,
-                    speed: undefined,
-                    status: "downloading",
-                    progress: percent,
-                  }
-                : p
-            )
-          );
-        })
-        .done(async () => {
-          await saveDownloadedItemInfo(process.item);
-          toast.success(`Download completed for ${process.item.Name}`, {
-            duration: 3000,
-            action: {
-              label: "Go to downloads",
-              onClick: () => {
-                router.push("/downloads");
-                toast.dismiss();
-              },
-            },
-          });
-          setTimeout(() => {
-            completeHandler(process.id);
-            removeProcess(process.id);
-          }, 1000);
-        })
-        .error(async (error) => {
-          removeProcess(process.id);
-          completeHandler(process.id);
-          let errorMsg = "";
-          if (error.errorCode === 1000) {
-            errorMsg = "No space left";
-          }
-          if (error.errorCode === 404) {
-            errorMsg = "File not found on server";
-          }
-          toast.error(`Download failed for ${process.item.Name} - ${errorMsg}`);
-          writeToLog("ERROR", `Download failed for ${process.item.Name}`, {
-            error,
-            processDetails: {
-              id: process.id,
-              itemName: process.item.Name,
-              itemId: process.item.Id,
-            },
-          });
-          console.error("Error details:", {
-            errorCode: error.errorCode,
-          });
-        });
-    },
-    [queryClient, settings?.optimizedVersionsServerUrl, authHeader]
-  );
-
-  const startBackgroundDownload = useCallback(
-    async (url: string, item: BaseItemDto, fileExtension: string) => {
-      if (!api || !item.Id || !authHeader)
-        throw new Error("startBackgroundDownload ~ Missing required params");
-
-      try {
-        const deviceId = await getOrSetDeviceId();
-        const itemImage = getItemImage({
-          item,
-          api,
-          variant: "Primary",
-          quality: 90,
-          width: 500,
-        });
-
-        await saveImage(item.Id, itemImage?.uri);
-
-        const response = await axios.post(
-          settings?.optimizedVersionsServerUrl + "optimize-version",
-          {
-            url,
-            fileExtension,
-            deviceId,
-            itemId: item.Id,
-            item,
-          },
-          {
-            headers: {
-              "Content-Type": "application/json",
-              Authorization: authHeader,
-            },
-          }
-        );
-
-        if (response.status !== 201) {
-          throw new Error("Failed to start optimization job");
-        }
-
-        toast.success(`Queued ${item.Name} for optimization`, {
-          action: {
-            label: "Go to download",
-            onClick: () => {
-              router.push("/downloads");
-              toast.dismiss();
-            },
-          },
-        });
-      } catch (error) {
-        console.error("Error in startBackgroundDownload:", error);
-        if (axios.isAxiosError(error)) {
-          console.error("Axios error details:", {
-            message: error.message,
-            response: error.response?.data,
-            status: error.response?.status,
-            headers: error.response?.headers,
-          });
-          toast.error(
-            `Failed to start download for ${item.Name}: ${error.message}`
-          );
-          if (error.response) {
-            toast.error(
-              `Server responded with status ${error.response.status}`
-            );
-          } else if (error.request) {
-            toast.error("No response received from server");
-          } else {
-            toast.error("Error setting up the request");
-          }
-        } else {
-          console.error("Non-Axios error:", error);
-          toast.error(
-            `Failed to start download for ${item.Name}: Unexpected error`
-          );
-        }
-      }
-    },
-    [settings?.optimizedVersionsServerUrl, authHeader]
-  );
-
-  const deleteAllFiles = async (): Promise<void> => {
-    try {
-      await deleteLocalFiles();
-      await removeDownloadedItemsFromStorage();
-      await cancelAllServerJobs();
-      queryClient.invalidateQueries({ queryKey: ["downloadedItems"] });
-      toast.success("All files, folders, and jobs deleted successfully");
-    } catch (error) {
-      console.error("Failed to delete all files, folders, and jobs:", error);
-      toast.error("An error occurred while deleting files and jobs");
-    }
-  };
-
-  const deleteLocalFiles = async (): Promise<void> => {
-    const baseDirectory = FileSystem.documentDirectory;
-    if (!baseDirectory) {
-      throw new Error("Base directory not found");
-    }
-
-    const dirContents = await FileSystem.readDirectoryAsync(baseDirectory);
-    for (const item of dirContents) {
-      const itemPath = `${baseDirectory}${item}`;
-      const itemInfo = await FileSystem.getInfoAsync(itemPath);
-      if (itemInfo.exists) {
-        if (itemInfo.isDirectory) {
-          await FileSystem.deleteAsync(itemPath, { idempotent: true });
-        } else {
-          await FileSystem.deleteAsync(itemPath, { idempotent: true });
-        }
-      }
-    }
-  };
-
-  const removeDownloadedItemsFromStorage = async (): Promise<void> => {
-    try {
-      await AsyncStorage.removeItem("downloadedItems");
-    } catch (error) {
-      console.error(
-        "Failed to remove downloadedItems from AsyncStorage:",
-        error
-      );
-      throw error;
-    }
-  };
-
-  const cancelAllServerJobs = async (): Promise<void> => {
-    if (!authHeader) {
-      throw new Error("No auth header available");
-    }
-    if (!settings?.optimizedVersionsServerUrl) {
-      throw new Error("No server URL configured");
-    }
-
-    const deviceId = await getOrSetDeviceId();
-    if (!deviceId) {
-      throw new Error("Failed to get device ID");
-    }
-
-    try {
-      await cancelAllJobs({
-        authHeader,
-        url: settings.optimizedVersionsServerUrl,
-        deviceId,
-      });
-    } catch (error) {
-      console.error("Failed to cancel all server jobs:", error);
-      throw error;
-    }
-  };
-
-  const deleteFile = async (id: string): Promise<void> => {
-    if (!id) {
-      console.error("Invalid file ID");
-      return;
-    }
-
-    try {
-      const directory = FileSystem.documentDirectory;
-
-      if (!directory) {
-        console.error("Document directory not found");
-        return;
-      }
-      const dirContents = await FileSystem.readDirectoryAsync(directory);
-
-      for (const item of dirContents) {
-        const itemNameWithoutExtension = item.split(".")[0];
-        if (itemNameWithoutExtension === id) {
-          const filePath = `${directory}${item}`;
-          await FileSystem.deleteAsync(filePath, { idempotent: true });
-          console.log(`Successfully deleted file: ${item}`);
-          break;
-        }
-      }
-
-      const downloadedItems = await AsyncStorage.getItem("downloadedItems");
-      if (downloadedItems) {
-        let items = JSON.parse(downloadedItems);
-        items = items.filter((item: any) => item.Id !== id);
-        await AsyncStorage.setItem("downloadedItems", JSON.stringify(items));
-      }
-
-      queryClient.invalidateQueries({ queryKey: ["downloadedItems"] });
-
-      console.log(
-        `Successfully deleted file and AsyncStorage entry for ID ${id}`
-      );
-    } catch (error) {
-      console.error(
-        `Failed to delete file and AsyncStorage entry for ID ${id}:`,
-        error
-      );
-    }
-  };
-
-  async function getAllDownloadedItems(): Promise<BaseItemDto[]> {
-    try {
-      const downloadedItems = await AsyncStorage.getItem("downloadedItems");
-      if (downloadedItems) {
-        return JSON.parse(downloadedItems) as BaseItemDto[];
-      } else {
-        return [];
-      }
-    } catch (error) {
-      console.error("Failed to retrieve downloaded items:", error);
-      return [];
-    }
-  }
-
-  async function saveDownloadedItemInfo(item: BaseItemDto) {
-    try {
-      const downloadedItems = await AsyncStorage.getItem("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);
-      }
-
-      await AsyncStorage.setItem("downloadedItems", JSON.stringify(items));
-      await queryClient.invalidateQueries({ queryKey: ["downloadedItems"] });
-      refetch();
-    } catch (error) {
-      console.error("Failed to save downloaded item information:", error);
-    }
-  }
-
-  return {
-    processes,
-    startBackgroundDownload,
-    downloadedFiles,
-    deleteAllFiles,
-    deleteFile,
-    saveDownloadedItemInfo,
-    removeProcess,
-    setProcesses,
-    startDownload,
-  };
-}
-
-export function DownloadProvider({ children }: { children: React.ReactNode }) {
-  const downloadProviderValue = useDownloadProvider();
-  const queryClient = new QueryClient();
-
-  return (
-    <DownloadContext.Provider value={downloadProviderValue}>
-      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
-    </DownloadContext.Provider>
-  );
-}
-
-export function useDownload() {
-  const context = useContext(DownloadContext);
-  if (context === null) {
-    throw new Error("useDownload must be used within a DownloadProvider");
-  }
-  return context;
-}

providers/JellyfinProvider.tsx

@@ -40,6 +40,17 @@ const JellyfinContext = createContext<JellyfinContextValue | undefined>(
   undefined
 );
 
+const getOrSetDeviceId = async () => {
+  let deviceId = await AsyncStorage.getItem("deviceId");
+
+  if (!deviceId) {
+    deviceId = uuid.v4() as string;
+    await AsyncStorage.setItem("deviceId", deviceId);
+  }
+
+  return deviceId;
+};
+
 export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
   children,
 }) => {
@@ -52,7 +63,7 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
       setJellyfin(
         () =>
           new Jellyfin({
-            clientInfo: { name: "Streamyfin", version: "0.17.0" },
+            clientInfo: { name: "Streamyfin", version: "0.12.0" },
             deviceInfo: { name: Platform.OS === "ios" ? "iOS" : "Android", id },
           })
       );
@@ -86,7 +97,7 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
     return {
       authorization: `MediaBrowser Client="Streamyfin", Device=${
         Platform.OS === "android" ? "Android" : "iOS"
-      }, DeviceId="${deviceId}", Version="0.17.0"`,
+      }, DeviceId="${deviceId}", Version="0.12.0"`,
     };
   }, [deviceId]);
 
@@ -258,10 +269,10 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
     ],
     queryFn: async () => {
       try {
-        const token = await getTokenFromStoraage();
-        const serverUrl = await getServerUrlFromStorage();
+        const token = await AsyncStorage.getItem("token");
+        const serverUrl = await AsyncStorage.getItem("serverUrl");
         const user = JSON.parse(
-          (await getUserFromStorage()) as string
+          (await AsyncStorage.getItem("user")) as string
         ) as UserDto;
 
         if (serverUrl && token && user.Id && jellyfin) {
@@ -320,26 +331,3 @@ function useProtectedRoute(user: UserDto | null, loading = false) {
     }
   }, [user, segments, loading]);
 }
-
-export async function getTokenFromStoraage() {
-  return await AsyncStorage.getItem("token");
-}
-
-export async function getUserFromStorage() {
-  return await AsyncStorage.getItem("user");
-}
-
-export async function getServerUrlFromStorage() {
-  return await AsyncStorage.getItem("serverUrl");
-}
-
-export async function getOrSetDeviceId() {
-  let deviceId = await AsyncStorage.getItem("deviceId");
-
-  if (!deviceId) {
-    deviceId = uuid.v4() as string;
-    await AsyncStorage.setItem("deviceId", deviceId);
-  }
-
-  return deviceId;
-}

providers/PlaybackProvider.tsx

@@ -11,7 +11,6 @@ import React, {
 
 import { useSettings } from "@/utils/atoms/settings";
 import { getDeviceId } from "@/utils/device";
-import { SubtitleTrack } from "@/utils/hls/parseM3U8ForSubtitles";
 import { reportPlaybackProgress } from "@/utils/jellyfin/playstate/reportPlaybackProgress";
 import { reportPlaybackStopped } from "@/utils/jellyfin/playstate/reportPlaybackStopped";
 import { postCapabilities } from "@/utils/jellyfin/session/capabilities";
@@ -19,16 +18,23 @@ import {
   BaseItemDto,
   PlaybackInfoResponse,
 } from "@jellyfin/sdk/lib/generated-client/models";
-import { getMediaInfoApi } from "@jellyfin/sdk/lib/utils/api";
+import { getMediaInfoApi, getSyncPlayApi } from "@jellyfin/sdk/lib/utils/api";
 import * as Linking from "expo-linking";
-import { useRouter } from "expo-router";
 import { useAtom } from "jotai";
-import { debounce } from "lodash";
+import { debounce, isBuffer } from "lodash";
 import { Alert } from "react-native";
 import { OnProgressData, type VideoRef } from "react-native-video";
 import { apiAtom, userAtom } from "./JellyfinProvider";
+import {
+  GroupData,
+  GroupJoinedData,
+  PlayQueueData,
+  StateUpdateData,
+} from "@/types/syncplay";
+import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
+import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
 
-export type CurrentlyPlayingState = {
+type CurrentlyPlayingState = {
   url: string;
   item: BaseItemDto;
 };
@@ -37,6 +43,8 @@ interface PlaybackContextType {
   sessionData: PlaybackInfoResponse | null | undefined;
   currentlyPlaying: CurrentlyPlayingState | null;
   videoRef: React.MutableRefObject<VideoRef | null>;
+  onBuffer: (isBuffering: boolean) => void;
+  onReady: () => void;
   isPlaying: boolean;
   isFullscreen: boolean;
   progressTicks: number | null;
@@ -47,8 +55,6 @@ interface PlaybackContextType {
   dismissFullscreenPlayer: () => void;
   setIsFullscreen: (isFullscreen: boolean) => void;
   setIsPlaying: (isPlaying: boolean) => void;
-  isBuffering: boolean;
-  setIsBuffering: (val: boolean) => void;
   onProgress: (data: OnProgressData) => void;
   setVolume: (volume: number) => void;
   setCurrentlyPlayingState: (
@@ -57,7 +63,6 @@ interface PlaybackContextType {
   startDownloadedFilePlayback: (
     currentlyPlaying: CurrentlyPlayingState | null
   ) => void;
-  subtitles: SubtitleTrack[];
 }
 
 const PlaybackContext = createContext<PlaybackContextType | null>(null);
@@ -68,8 +73,6 @@ export const PlaybackProvider: React.FC<{ children: ReactNode }> = ({
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
 
-  const router = useRouter();
-
   const videoRef = useRef<VideoRef | null>(null);
 
   const [settings] = useSettings();
@@ -77,12 +80,11 @@ export const PlaybackProvider: React.FC<{ children: ReactNode }> = ({
   const previousVolume = useRef<number | null>(null);
 
   const [isPlaying, _setIsPlaying] = useState<boolean>(false);
-  const [isBuffering, setIsBuffering] = useState<boolean>(false);
   const [isFullscreen, setIsFullscreen] = useState<boolean>(false);
   const [progressTicks, setProgressTicks] = useState<number | null>(0);
   const [volume, _setVolume] = useState<number | null>(null);
   const [session, setSession] = useState<PlaybackInfoResponse | null>(null);
-  const [subtitles, setSubtitles] = useState<SubtitleTrack[]>([]);
+  const [syncplayGroup, setSyncplayGroup] = useState<GroupData | null>(null);
   const [currentlyPlaying, setCurrentlyPlaying] =
     useState<CurrentlyPlayingState | null>(null);
 
@@ -114,12 +116,17 @@ export const PlaybackProvider: React.FC<{ children: ReactNode }> = ({
 
       setCurrentlyPlaying(state);
       setIsPlaying(true);
+      if (settings?.openFullScreenVideoPlayerByDefault) {
+        setTimeout(() => {
+          presentFullscreenPlayer();
+        }, 300);
+      }
     },
-    []
+    [settings?.openFullScreenVideoPlayerByDefault]
   );
 
   const setCurrentlyPlayingState = useCallback(
-    async (state: CurrentlyPlayingState | null) => {
+    async (state: CurrentlyPlayingState | null, paused = false) => {
       try {
         if (state?.item.Id && user?.Id) {
           const vlcLink = "vlc://" + state?.url;
@@ -128,28 +135,31 @@ export const PlaybackProvider: React.FC<{ children: ReactNode }> = ({
             return;
           }
 
-          // Support live tv
-          const res =
-            state.item.Type !== "Program"
-              ? await getMediaInfoApi(api!).getPlaybackInfo({
-                  itemId: state.item.Id,
-                  userId: user.Id,
-                })
-              : await getMediaInfoApi(api!).getPlaybackInfo({
-                  itemId: state.item.ChannelId!,
-                  userId: user.Id,
-                });
+          const res = await getMediaInfoApi(api!).getPlaybackInfo({
+            itemId: state.item.Id,
+            userId: user.Id,
+          });
 
           await postCapabilities({
             api,
             itemId: state.item.Id,
             sessionId: res.data.PlaySessionId,
-            deviceProfile: settings?.deviceProfile,
           });
 
           setSession(res.data);
           setCurrentlyPlaying(state);
-          setIsPlaying(true);
+
+          if (paused === true) {
+            pauseVideo();
+          } else {
+            playVideo();
+          }
+
+          if (settings?.openFullScreenVideoPlayerByDefault) {
+            setTimeout(() => {
+              presentFullscreenPlayer();
+            }, 300);
+          }
         } else {
           setCurrentlyPlaying(null);
           setIsFullscreen(false);
@@ -167,6 +177,11 @@ export const PlaybackProvider: React.FC<{ children: ReactNode }> = ({
               onPress: () => {
                 setCurrentlyPlaying(state);
                 setIsPlaying(true);
+                if (settings?.openFullScreenVideoPlayerByDefault) {
+                  setTimeout(() => {
+                    presentFullscreenPlayer();
+                  }, 300);
+                }
               },
             },
             {
@@ -215,15 +230,13 @@ export const PlaybackProvider: React.FC<{ children: ReactNode }> = ({
   );
 
   const stopPlayback = useCallback(async () => {
-    const id = currentlyPlaying?.item?.Id;
-    setCurrentlyPlayingState(null);
-
     await reportPlaybackStopped({
       api,
-      itemId: id,
+      itemId: currentlyPlaying?.item?.Id,
       sessionId: session?.PlaySessionId,
       positionTicks: progressTicks ? progressTicks : 0,
     });
+    setCurrentlyPlayingState(null);
   }, [currentlyPlaying?.item.Id, session?.PlaySessionId, progressTicks, api]);
 
   const setIsPlaying = useCallback(
@@ -254,10 +267,57 @@ export const PlaybackProvider: React.FC<{ children: ReactNode }> = ({
     [session?.PlaySessionId, currentlyPlaying?.item.Id, isPlaying, api]
   );
 
+  const onBuffer = useCallback(
+    (isBuffering: boolean) => {
+      console.log("Buffering...", "Playing:", isPlaying);
+      if (
+        isBuffering &&
+        syncplayGroup?.GroupId &&
+        isPlaying === false &&
+        currentlyPlaying?.item.PlaylistItemId
+      ) {
+        console.log("Sending syncplay buffering...");
+        getSyncPlayApi(api!).syncPlayBuffering({
+          bufferRequestDto: {
+            IsPlaying: isPlaying,
+            When: new Date().toISOString(),
+            PositionTicks: progressTicks ? progressTicks : 0,
+            PlaylistItemId: currentlyPlaying?.item.PlaylistItemId,
+          },
+        });
+      }
+    },
+    [
+      isPlaying,
+      syncplayGroup?.GroupId,
+      currentlyPlaying?.item.PlaylistItemId,
+      api,
+    ]
+  );
+
+  const onReady = useCallback(() => {
+    if (syncplayGroup?.GroupId && currentlyPlaying?.item.PlaylistItemId) {
+      getSyncPlayApi(api!).syncPlayReady({
+        readyRequestDto: {
+          When: new Date().toISOString(),
+          PlaylistItemId: currentlyPlaying?.item.PlaylistItemId,
+          IsPlaying: isPlaying,
+          PositionTicks: progressTicks ? progressTicks : 0,
+        },
+      });
+    }
+  }, [
+    syncplayGroup?.GroupId,
+    currentlyPlaying?.item.PlaylistItemId,
+    progressTicks,
+    isPlaying,
+    api,
+  ]);
+
   const onProgress = useCallback(
     debounce((e: OnProgressData) => {
       _onProgress(e);
-    }, 500),
+    }, 1000),
     [_onProgress]
   );
 
@@ -271,70 +331,191 @@ export const PlaybackProvider: React.FC<{ children: ReactNode }> = ({
     setIsFullscreen(false);
   }, []);
 
+  const seek = useCallback((ticks: number) => {
+    const time = ticks / 10000000;
+    videoRef.current?.seek(time);
+  }, []);
+
   useEffect(() => {
-    if (!deviceId || !api?.accessToken) return;
+    if (!deviceId || !api?.accessToken || !user?.Id) {
+      console.info("[WS] Waiting for deviceId, accessToken and userId");
+      return;
+    }
 
     const protocol = api?.basePath.includes("https") ? "wss" : "ws";
-
     const url = `${protocol}://${api?.basePath
       .replace("https://", "")
       .replace("http://", "")}/socket?api_key=${
       api?.accessToken
     }&deviceId=${deviceId}`;
 
-    const newWebSocket = new WebSocket(url);
-
+    let ws: WebSocket | null = null;
     let keepAliveInterval: NodeJS.Timeout | null = null;
 
-    newWebSocket.onopen = () => {
-      setIsConnected(true);
-      // Start sending "KeepAlive" message every 30 seconds
-      keepAliveInterval = setInterval(() => {
-        if (newWebSocket.readyState === WebSocket.OPEN) {
-          newWebSocket.send(JSON.stringify({ MessageType: "KeepAlive" }));
+    const connect = () => {
+      ws = new WebSocket(url);
+
+      ws.onopen = () => {
+        setIsConnected(true);
+        keepAliveInterval = setInterval(() => {
+          if (ws && ws.readyState === WebSocket.OPEN) {
+            console.log("⬆︎ KeepAlive...");
+            ws.send(JSON.stringify({ MessageType: "KeepAlive" }));
+          }
+        }, 30000);
+      };
+
+      ws.onerror = (e) => {
+        console.error("WebSocket error:", e);
+        setIsConnected(false);
+      };
+
+      ws.onclose = () => {
+        setIsConnected(false);
+        if (keepAliveInterval) {
+          clearInterval(keepAliveInterval);
         }
-      }, 30000);
+        setTimeout(connect, 5000); // Attempt to reconnect after 5 seconds
+      };
+
+      setWs(ws);
     };
 
-    newWebSocket.onerror = (e) => {
-      console.error("WebSocket error:", e);
-      setIsConnected(false);
-    };
-
-    newWebSocket.onclose = (e) => {
-      if (keepAliveInterval) {
-        clearInterval(keepAliveInterval);
-      }
-    };
-
-    setWs(newWebSocket);
+    connect();
 
     return () => {
+      if (ws) {
+        ws.close();
+      }
       if (keepAliveInterval) {
         clearInterval(keepAliveInterval);
       }
-      newWebSocket.close();
     };
-  }, [api, deviceId, user]);
+  }, [api?.accessToken, deviceId, user]);
 
   useEffect(() => {
-    if (!ws) return;
+    if (!ws || !api) return;
 
     ws.onmessage = (e) => {
       const json = JSON.parse(e.data);
       const command = json?.Data?.Command;
 
-      console.log("[WS] ~ ", json);
+      if (json.MessageType === "KeepAlive") {
+        console.log("⬇︎ KeepAlive...");
+      } else if (json.MessageType === "ForceKeepAlive") {
+        console.log("⬇︎ ForceKeepAlive...");
+      } else if (json.MessageType === "SyncPlayCommand") {
+        console.log("SyncPlayCommand ~", command, json.Data);
+        switch (command) {
+          case "Stop":
+            console.log("STOP");
+            stopPlayback();
+            break;
+          case "Pause":
+            console.log("PAUSE");
+            pauseVideo();
+            break;
+          case "Play":
+          case "Unpause":
+            console.log("PLAY");
+            playVideo();
+            break;
+          case "Seek":
+            console.log("SEEK", json.Data.PositionTicks);
+            seek(json.Data.PositionTicks);
+            break;
+        }
+      } else if (json.MessageType === "SyncPlayGroupUpdate") {
+        const type = json.Data.Type;
+
+        if (type === "StateUpdate") {
+          const data = json.Data.Data as StateUpdateData;
+          console.log("StateUpdate ~", data);
+        } else if (type === "GroupJoined") {
+          const data = json.Data.Data as GroupData;
+          setSyncplayGroup(data);
+          console.log("GroupJoined ~", data);
+        } else if (type === "GroupLeft") {
+          console.log("GroupLeft");
+          setSyncplayGroup(null);
+        } else if (type === "PlayQueue") {
+          const data = json.Data.Data as PlayQueueData;
+          console.log("PlayQueue ~", {
+            IsPlaying: data.IsPlaying,
+            Reason: data.Reason,
+          });
+
+          if (data.Reason === "SetCurrentItem") {
+            console.log("SetCurrentItem ~ ", json);
+            return;
+          }
+
+          if (data.Reason === "NewPlaylist") {
+            const itemId = data.Playlist?.[data.PlayingItemIndex].ItemId;
+            if (!itemId) {
+              console.error("No itemId found in PlayQueue");
+              return;
+            }
+
+            // Set playback item
+            getUserItemData({
+              api,
+              userId: user?.Id,
+              itemId,
+            }).then(async (item) => {
+              if (!item) {
+                Alert.alert("Error", "Could not find item for syncplay");
+                return;
+              }
+
+              const url = await getStreamUrl({
+                api,
+                item,
+                startTimeTicks: data.StartPositionTicks,
+                userId: user?.Id,
+                mediaSourceId: item?.MediaSources?.[0].Id!,
+              });
+
+              if (!url) {
+                Alert.alert("Error", "Could not find stream url for syncplay");
+                return;
+              }
+
+              await setCurrentlyPlayingState(
+                {
+                  item,
+                  url,
+                },
+                !data.IsPlaying
+              );
+
+              await getSyncPlayApi(api).syncPlayReady({
+                readyRequestDto: {
+                  IsPlaying: data.IsPlaying,
+                  PositionTicks: data.StartPositionTicks,
+                  PlaylistItemId: data.Playlist[0].PlaylistItemId,
+                  When: new Date().toISOString(),
+                },
+              });
+            });
+          }
+        } else {
+          console.log("[WS] ~ ", json);
+        }
+
+        return;
+      } else {
+        console.log("[WS] ~ ", json);
+      }
 
-      // On PlayPause
       if (command === "PlayPause") {
+        // On PlayPause
         console.log("Command ~ PlayPause");
         if (isPlaying) pauseVideo();
         else playVideo();
       } else if (command === "Stop") {
         console.log("Command ~ Stop");
         stopPlayback();
-        router.canGoBack() && router.back();
       } else if (command === "Mute") {
         console.log("Command ~ Mute");
         setVolume(0);
@@ -350,18 +531,18 @@ export const PlaybackProvider: React.FC<{ children: ReactNode }> = ({
         Alert.alert(title, body);
       }
     };
-  }, [ws, stopPlayback, playVideo, pauseVideo]);
+  }, [ws, stopPlayback, playVideo, pauseVideo, setVolume, api, seek]);
 
   return (
     <PlaybackContext.Provider
       value={{
         onProgress,
-        isBuffering,
-        setIsBuffering,
+        onReady,
         progressTicks,
         setVolume,
         setIsPlaying,
         setIsFullscreen,
+        onBuffer,
         isFullscreen,
         isPlaying,
         currentlyPlaying,
@@ -374,7 +555,6 @@ export const PlaybackProvider: React.FC<{ children: ReactNode }> = ({
         presentFullscreenPlayer,
         dismissFullscreenPlayer,
         startDownloadedFilePlayback,
-        subtitles,
       }}
     >
       {children}

types/syncplay.ts

@@ -0,0 +1,47 @@
+export type PlaylistItem = {
+  ItemId: string;
+  PlaylistItemId: string;
+};
+
+export type PlayQueueData = {
+  IsPlaying: boolean;
+  LastUpdate: string;
+  PlayingItemIndex: number;
+  Playlist: PlaylistItem[];
+  Reason: "NewPlaylist" | "SetCurrentItem"; // or use string if more values are expected
+  RepeatMode: "RepeatNone"; // or use string if more values are expected
+  ShuffleMode: "Sorted"; // or use string if more values are expected
+  StartPositionTicks: number;
+};
+
+export type GroupData = {
+  GroupId: string;
+  GroupName: string;
+  LastUpdatedAt: string;
+  Participants: Participant[];
+  State: string; // You can use an enum or union type if there are known possible states
+};
+
+export type SyncPlayCommandData = {
+  Command: string;
+  EmittedAt: string;
+  GroupId: string;
+  PlaylistItemId: string;
+  PositionTicks: number;
+  When: string;
+};
+
+export type StateUpdateData = {
+  State: "Waiting" | "Playing" | "Paused";
+  Reason: "Pause" | "Unpause";
+};
+
+export type GroupJoinedData = {
+  GroupId: string;
+  GroupName: string;
+  LastUpdatedAt: string;
+  Participants: string[];
+  State: "Idle";
+};
+
+export type Participant = string[];

utils/OrientationLockConverter.ts

@@ -1,21 +0,0 @@
-import { Orientation, OrientationLock } from "expo-screen-orientation";
-
-function orientationToOrientationLock(
-  orientation: Orientation
-): OrientationLock {
-  switch (orientation) {
-    case Orientation.PORTRAIT_UP:
-      return OrientationLock.PORTRAIT_UP;
-    case Orientation.PORTRAIT_DOWN:
-      return OrientationLock.PORTRAIT_DOWN;
-    case Orientation.LANDSCAPE_LEFT:
-      return OrientationLock.LANDSCAPE_LEFT;
-    case Orientation.LANDSCAPE_RIGHT:
-      return OrientationLock.LANDSCAPE_RIGHT;
-    case Orientation.UNKNOWN:
-    default:
-      return OrientationLock.DEFAULT;
-  }
-}
-
-export default orientationToOrientationLock;

utils/atoms/downloads.ts

@@ -0,0 +1,11 @@
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { atom } from "jotai";
+
+export type ProcessItem = {
+  item: BaseItemDto;
+  progress: number;
+  speed?: number;
+  startTime?: Date;
+};
+
+export const runningProcesses = atom<ProcessItem | null>(null);

utils/atoms/primaryColor.ts

@@ -2,10 +2,12 @@ import { atom, useAtom } from "jotai";
 
 interface ThemeColors {
   primary: string;
+  secondary: string;
+  average: string;
   text: string;
 }
 
-export const calculateTextColor = (backgroundColor: string): string => {
+const calculateTextColor = (backgroundColor: string): string => {
   // Convert hex to RGB
   const r = parseInt(backgroundColor.slice(1, 3), 16);
   const g = parseInt(backgroundColor.slice(3, 5), 16);
@@ -46,22 +48,26 @@ const calculateRelativeLuminance = (rgb: number[]): number => {
   return 0.2126 * r + 0.7152 * g + 0.0722 * b;
 };
 
-export const isCloseToBlack = (color: string): boolean => {
-  const r = parseInt(color.slice(1, 3), 16);
-  const g = parseInt(color.slice(3, 5), 16);
-  const b = parseInt(color.slice(5, 7), 16);
-
-  // Check if the color is very dark (close to black)
-  return r < 20 && g < 20 && b < 20;
-};
-
-export const adjustToNearBlack = (color: string): string => {
-  return "#212121"; // A very dark gray, almost black
-};
-
-export const itemThemeColorAtom = atom<ThemeColors>({
+const baseThemeColorAtom = atom<ThemeColors>({
   primary: "#FFFFFF",
+  secondary: "#000000",
+  average: "#888888",
   text: "#000000",
 });
 
+export const itemThemeColorAtom = atom(
+  (get) => get(baseThemeColorAtom),
+  (get, set, update: Partial<ThemeColors>) => {
+    const currentColors = get(baseThemeColorAtom);
+    const newColors = { ...currentColors, ...update };
+
+    // Recalculate text color if primary color changes
+    if (update.average) {
+      newColors.text = calculateTextColor(update.average);
+    }
+
+    set(baseThemeColorAtom, newColors);
+  }
+);
+
 export const useItemThemeColor = () => useAtom(itemThemeColorAtom);

utils/atoms/queue.ts

@@ -1,7 +1,5 @@
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import AsyncStorage from "@react-native-async-storage/async-storage";
 import { atom, useAtom } from "jotai";
-import { atomWithStorage } from "jotai/utils";
 import { useEffect } from "react";
 
 export interface Job {
@@ -10,9 +8,8 @@ export interface Job {
   execute: () => void | Promise<void>;
 }
 
-export const runningAtom = atom<boolean>(false);
-
 export const queueAtom = atom<Job[]>([]);
+export const isProcessingAtom = atom(false);
 
 export const queueActions = {
   enqueue: (queue: Job[], setQueue: (update: Job[]) => void, job: Job) => {
@@ -23,7 +20,7 @@ export const queueActions = {
   processJob: async (
     queue: Job[],
     setQueue: (update: Job[]) => void,
-    setProcessing: (processing: boolean) => void
+    setProcessing: (processing: boolean) => void,
   ) => {
     const [job, ...rest] = queue;
     setQueue(rest);
@@ -31,17 +28,13 @@ export const queueActions = {
     console.info("Processing job", job);
 
     setProcessing(true);
-
-    // Excute the function assiociated with the job.
     await job.execute();
-
     console.info("Job done", job);
-
     setProcessing(false);
   },
   clear: (
     setQueue: (update: Job[]) => void,
-    setProcessing: (processing: boolean) => void
+    setProcessing: (processing: boolean) => void,
   ) => {
     setQueue([]);
     setProcessing(false);
@@ -50,12 +43,12 @@ export const queueActions = {
 
 export const useJobProcessor = () => {
   const [queue, setQueue] = useAtom(queueAtom);
-  const [running, setRunning] = useAtom(runningAtom);
+  const [isProcessing, setProcessing] = useAtom(isProcessingAtom);
 
   useEffect(() => {
-    if (queue.length > 0 && !running) {
+    if (queue.length > 0 && !isProcessing) {
       console.info("Processing queue", queue);
-      queueActions.processJob(queue, setQueue, setRunning);
+      queueActions.processJob(queue, setQueue, setProcessing);
     }
-  }, [queue, running, setQueue, setRunning]);
+  }, [queue, isProcessing, setQueue, setProcessing]);
 };

utils/atoms/settings.ts

@@ -1,7 +1,6 @@
 import { atom, useAtom } from "jotai";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import { useEffect } from "react";
-import * as ScreenOrientation from "expo-screen-orientation";
 
 export type DownloadQuality = "original" | "high" | "low";
 
@@ -10,22 +9,6 @@ export type DownloadOption = {
   value: DownloadQuality;
 };
 
-export const ScreenOrientationEnum: Record<
-  ScreenOrientation.OrientationLock,
-  string
-> = {
-  [ScreenOrientation.OrientationLock.DEFAULT]: "Default",
-  [ScreenOrientation.OrientationLock.ALL]: "All",
-  [ScreenOrientation.OrientationLock.PORTRAIT]: "Portrait",
-  [ScreenOrientation.OrientationLock.PORTRAIT_UP]: "Portrait Up",
-  [ScreenOrientation.OrientationLock.PORTRAIT_DOWN]: "Portrait Down",
-  [ScreenOrientation.OrientationLock.LANDSCAPE]: "Landscape",
-  [ScreenOrientation.OrientationLock.LANDSCAPE_LEFT]: "Landscape Left",
-  [ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT]: "Landscape Right",
-  [ScreenOrientation.OrientationLock.OTHER]: "Other",
-  [ScreenOrientation.OrientationLock.UNKNOWN]: "Unknown",
-};
-
 export const DownloadOptions: DownloadOption[] = [
   {
     label: "Original quality",
@@ -54,9 +37,10 @@ export type DefaultLanguageOption = {
   label: string;
 };
 
-export type Settings = {
+type Settings = {
   autoRotate?: boolean;
   forceLandscapeInVideoPlayer?: boolean;
+  openFullScreenVideoPlayerByDefault?: boolean;
   usePopularPlugin?: boolean;
   deviceProfile?: "Expo" | "Native" | "Old";
   forceDirectPlay?: boolean;
@@ -69,13 +53,8 @@ export type Settings = {
   defaultSubtitleLanguage: DefaultLanguageOption | null;
   defaultAudioLanguage: DefaultLanguageOption | null;
   showHomeTitles: boolean;
-  defaultVideoOrientation: ScreenOrientation.OrientationLock;
-  forwardSkipTime: number;
-  rewindSkipTime: number;
-  optimizedVersionsServerUrl?: string | null;
-  downloadMethod: "optimized" | "remux";
-  autoDownload: boolean;
 };
+
 /**
  *
  * The settings atom is a Jotai atom that stores the user's settings.
@@ -88,6 +67,7 @@ const loadSettings = async (): Promise<Settings> => {
   const defaultValues: Settings = {
     autoRotate: true,
     forceLandscapeInVideoPlayer: false,
+    openFullScreenVideoPlayerByDefault: false,
     usePopularPlugin: false,
     deviceProfile: "Expo",
     forceDirectPlay: false,
@@ -106,12 +86,6 @@ const loadSettings = async (): Promise<Settings> => {
     defaultAudioLanguage: null,
     defaultSubtitleLanguage: null,
     showHomeTitles: true,
-    defaultVideoOrientation: ScreenOrientation.OrientationLock.DEFAULT,
-    forwardSkipTime: 30,
-    rewindSkipTime: 10,
-    optimizedVersionsServerUrl: null,
-    downloadMethod: "remux",
-    autoDownload: false,
   };
 
   try {

utils/bToMb.ts

@@ -1,19 +0,0 @@
-/**
- * Convert bits to megabits or gigabits
- *
- * Return nice looking string
- * If under 1000Mb, return XXXMB, else return X.XGB
- */
-
-export function convertBitsToMegabitsOrGigabits(bits?: number | null): string {
-  if (!bits) return "0MB";
-
-  const megabits = bits / 1000000;
-
-  if (megabits < 1000) {
-    return Math.round(megabits) + "MB";
-  } else {
-    const gigabits = megabits / 1000;
-    return gigabits.toFixed(1) + "GB";
-  }
-}

utils/background-tasks.ts

@@ -1,23 +0,0 @@
-import * as BackgroundFetch from "expo-background-fetch";
-
-export const BACKGROUND_FETCH_TASK = "background-fetch";
-
-export async function registerBackgroundFetchAsync() {
-  try {
-    BackgroundFetch.registerTaskAsync(BACKGROUND_FETCH_TASK, {
-      minimumInterval: 60 * 1, // 1 minutes
-      stopOnTerminate: false, // android only,
-      startOnBoot: false, // android only
-    });
-  } catch (error) {
-    console.log("Error registering background fetch task", error);
-  }
-}
-
-export async function unregisterBackgroundFetchAsync() {
-  try {
-    BackgroundFetch.unregisterTaskAsync(BACKGROUND_FETCH_TASK);
-  } catch (error) {
-    console.log("Error unregistering background fetch task", error);
-  }
-}