fix: call with correct args

Removed episodelist button and previous/next buttons for offline playback

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

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

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

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

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

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

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

@@ -1,4 +1,5 @@
 import { Text } from "@/components/common/Text";
+import { DownloadItems } from "@/components/DownloadItem";
 import { ParallaxScrollView } from "@/components/ParallaxPage";
 import { NextUp } from "@/components/series/NextUp";
 import { SeasonPicker } from "@/components/series/SeasonPicker";
@@ -6,16 +7,14 @@ import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
 import { getLogoImageUrlById } from "@/utils/jellyfin/image/getLogoImageUrlById";
 import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
+import { Ionicons } from "@expo/vector-icons";
+import { getTvShowsApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery } from "@tanstack/react-query";
 import { Image } from "expo-image";
-import {useLocalSearchParams, useNavigation} from "expo-router";
+import { useLocalSearchParams, useNavigation } from "expo-router";
 import { useAtom } from "jotai";
-import React, {useEffect} from "react";
-import { useMemo } from "react";
+import React, { useEffect, useMemo } from "react";
 import { View } from "react-native";
-import {DownloadItems} from "@/components/DownloadItem";
-import {MaterialCommunityIcons} from "@expo/vector-icons";
-import {getTvShowsApi} from "@jellyfin/sdk/lib/utils/api";
 
 const page: React.FC = () => {
   const navigation = useNavigation();
@@ -60,7 +59,7 @@ const page: React.FC = () => {
     [item]
   );
 
-  const {data: allEpisodes, isLoading} = useQuery({
+  const { data: allEpisodes, isLoading } = useQuery({
     queryKey: ["AllEpisodes", item?.Id],
     queryFn: async () => {
       const res = await getTvShowsApi(api!).getEpisodes({
@@ -69,34 +68,38 @@ const page: React.FC = () => {
         enableUserData: true,
         fields: ["MediaSources", "MediaStreams", "Overview"],
       });
-      return res?.data.Items || []
+      return res?.data.Items || [];
     },
-    enabled: !!api && !!user?.Id && !!item?.Id
+    enabled: !!api && !!user?.Id && !!item?.Id,
   });
 
   useEffect(() => {
     navigation.setOptions({
-      headerRight: () => (
-        (!isLoading && allEpisodes && allEpisodes.length > 0) && (
+      headerRight: () =>
+        !isLoading &&
+        allEpisodes &&
+        allEpisodes.length > 0 && (
           <View className="flex flex-row items-center space-x-2">
             <DownloadItems
+              title="Download Series"
               items={allEpisodes || []}
               MissingDownloadIconComponent={() => (
-                <MaterialCommunityIcons name="folder-download" size={24} color="white"/>
+                <Ionicons name="download" size={22} color="white" />
               )}
               DownloadedIconComponent={() => (
-                <MaterialCommunityIcons name="folder-check" size={26} color="#9333ea"/>
+                <Ionicons
+                  name="checkmark-done-outline"
+                  size={24}
+                  color="#9333ea"
+                />
               )}
             />
           </View>
-        )
-      )
-    })
+        ),
+    });
   }, [allEpisodes, isLoading]);
 
-  if (!item || !backdropUrl)
-    return null;
-
+  if (!item || !backdropUrl) return null;
 
   return (
     <ParallaxScrollView

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

@@ -32,6 +32,7 @@ import {
 import {
   BaseItemDto,
   BaseItemDtoQueryResult,
+  BaseItemKind,
 } from "@jellyfin/sdk/lib/generated-client/models";
 import {
   getFilterApi,
@@ -40,8 +41,7 @@ import {
 } from "@jellyfin/sdk/lib/utils/api";
 import { FlashList } from "@shopify/flash-list";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-
-const MemoizedTouchableItemRouter = React.memo(TouchableItemRouter);
+import { colletionTypeToItemType } from "@/utils/collectionTypeToItemType";
 
 const Page = () => {
   const searchParams = useLocalSearchParams();
@@ -141,6 +141,18 @@ const Page = () => {
     }): Promise<BaseItemDtoQueryResult | null> => {
       if (!api || !library) return null;
 
+      console.log("[libraryId] ~", library);
+
+      let itemType: BaseItemKind | undefined;
+
+      // This fix makes sure to only return 1 type of items, if defined.
+      // This is because the underlying directory some times contains other types, and we don't want to show them.
+      if (library.CollectionType === "movies") {
+        itemType = "Movie";
+      } else if (library.CollectionType === "tvshows") {
+        itemType = "Series";
+      }
+
       const response = await getItemsApi(api).getItems({
         userId: user?.Id,
         parentId: libraryId,
@@ -155,6 +167,7 @@ const Page = () => {
         genres: selectedGenres,
         tags: selectedTags,
         years: selectedYears.map((year) => parseInt(year)),
+        includeItemTypes: itemType ? [itemType] : undefined,
       });
 
       return response.data || null;

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

@@ -43,6 +43,7 @@ import {
   View,
   AppState,
   AppStateStatus,
+  Platform,
 } from "react-native";
 import { useSharedValue } from "react-native-reanimated";
 import settings from "../(tabs)/(home)/settings";
@@ -448,7 +449,7 @@ export default function page() {
           position: "relative",
           flexDirection: "column",
           justifyContent: "center",
-          opacity: showControls ? 0.5 : 1,
+          opacity: showControls ? (Platform.OS === "android" ? 0.7 : 0.5) : 1,
         }}
       >
         <VlcPlayerView
@@ -501,7 +502,7 @@ export default function page() {
           enableTrickplay={true}
           getAudioTracks={videoRef.current?.getAudioTracks}
           getSubtitleTracks={videoRef.current?.getSubtitleTracks}
-          offline={false}
+          offline={offline}
           setSubtitleTrack={videoRef.current.setSubtitleTrack}
           setSubtitleURL={videoRef.current.setSubtitleURL}
           setAudioTrack={videoRef.current.setAudioTrack}

app/_layout.tsx

@@ -336,7 +336,11 @@ function Layout() {
                             />
                             <Stack.Screen
                               name="login"
-                              options={{ headerShown: false, title: "Login" }}
+                              options={{
+                                headerShown: true,
+                                title: "",
+                                headerTransparent: true,
+                              }}
                             />
                             <Stack.Screen name="+not-found" />
                           </Stack>

app/login.tsx

@@ -6,7 +6,7 @@ import { Ionicons } from "@expo/vector-icons";
 import { PublicSystemInfo } from "@jellyfin/sdk/lib/generated-client";
 import { getSystemApi } from "@jellyfin/sdk/lib/utils/api";
 import { Image } from "expo-image";
-import { useLocalSearchParams } from "expo-router";
+import { useLocalSearchParams, useNavigation } from "expo-router";
 import { useAtom } from "jotai";
 import React, { useEffect, useState } from "react";
 import {
@@ -14,6 +14,7 @@ import {
   KeyboardAvoidingView,
   Platform,
   SafeAreaView,
+  TouchableOpacity,
   View,
 } from "react-native";
 
@@ -65,6 +66,23 @@ const Login: React.FC = () => {
     })();
   }, [_apiUrl, _username, _password]);
 
+  const navigation = useNavigation();
+  useEffect(() => {
+    navigation.setOptions({
+      headerTitle: serverName,
+      headerLeft: () =>
+        api?.basePath ? (
+          <TouchableOpacity
+            onPress={() => {
+              removeServer();
+            }}
+          >
+            <Ionicons name="chevron-back" size={24} color="white" />
+          </TouchableOpacity>
+        ) : null,
+    });
+  }, [serverName, navigation, api?.basePath]);
+
   const [loading, setLoading] = useState<boolean>(false);
 
   const handleLogin = async () => {
@@ -176,38 +194,21 @@ const Login: React.FC = () => {
           behavior={Platform.OS === "ios" ? "padding" : "height"}
           style={{ flex: 1, height: "100%" }}
         >
-          <View className="flex flex-col w-full h-full relative items-center justify-center">
-            <View className="px-4 -mt-20">
-              <View className="mb-4">
-                <Text className="text-3xl font-bold mb-1">
-                  {serverName || "Streamyfin"}
-                </Text>
-                <View className="bg-neutral-900 rounded-xl p-4 mb-2 flex flex-row items-center justify-between">
-                  <Text className="">URL</Text>
-                  <Text numberOfLines={1} className="shrink">
-                    {api.basePath}
-                  </Text>
-                </View>
-                <Button
-                  color="black"
-                  onPress={() => {
-                    removeServer();
-                  }}
-                  justify="between"
-                  iconLeft={
-                    <Ionicons
-                      name="arrow-back-outline"
-                      size={18}
-                      color={"white"}
-                    />
-                  }
-                >
-                  Change server
-                </Button>
-              </View>
-
+          <View className="flex flex-col h-full relative items-center justify-center">
+            <View className="px-4 -mt-20 w-full">
               <View className="flex flex-col space-y-2">
-                <Text className="text-2xl font-bold">Log in</Text>
+                <Text className="text-2xl font-bold -mb-2">
+                  Log in
+                  <>
+                    {serverName ? (
+                      <>
+                        {" to "}
+                        <Text className="text-purple-600">{serverName}</Text>
+                      </>
+                    ) : null}
+                  </>
+                </Text>
+                <Text className="text-xs text-neutral-400">{serverURL}</Text>
                 <Input
                   placeholder="Username"
                   onChangeText={(text) =>
@@ -281,7 +282,7 @@ const Login: React.FC = () => {
             />
             <Text className="text-3xl font-bold">Streamyfin</Text>
             <Text className="text-neutral-500">
-              Connect to your Jellyfin server
+              Enter the URL to your Jellyfin server
             </Text>
             <Input
               placeholder="Server URL"
@@ -293,6 +294,9 @@ const Login: React.FC = () => {
               textContentType="URL"
               maxLength={500}
             />
+            <Text className="text-xs text-neutral-500">
+              Make sure to include http or https
+            </Text>
           </View>
           <View className="mb-2 absolute bottom-0 left-0 w-full px-4">
             <Button

components/Chromecast.tsx

@@ -10,6 +10,7 @@ import GoogleCast, {
   useMediaStatus,
   useRemoteMediaClient,
 } from "react-native-google-cast";
+import { RoundButton } from "./RoundButton";
 
 interface Props extends ViewProps {
   width?: number;
@@ -53,51 +54,30 @@ export const Chromecast: React.FC<Props> = ({
 
   if (background === "transparent")
     return (
-      <>
-        <TouchableOpacity
-          onPress={() => {
-            if (mediaStatus?.currentItemId) CastContext.showExpandedControls();
-            else CastContext.showCastDialog();
-          }}
-          className="rounded-full h-10 w-10 flex items-center justify-center b"
-          {...props}
-        >
-          <Feather name="cast" size={22} color={"white"} />
-        </TouchableOpacity>
-        <AndroidCastButton />
-      </>
-    );
-
-  if (Platform.OS === "android")
-    return (
-      <TouchableOpacity
+      <RoundButton
+        size="large"
+        className="mr-2"
+        background={false}
         onPress={() => {
           if (mediaStatus?.currentItemId) CastContext.showExpandedControls();
           else CastContext.showCastDialog();
         }}
-        className="rounded-full h-10 w-10 flex items-center justify-center bg-neutral-800/80"
         {...props}
       >
         <Feather name="cast" size={22} color={"white"} />
-      </TouchableOpacity>
+      </RoundButton>
     );
 
   return (
-    <TouchableOpacity
+    <RoundButton
+      size="large"
       onPress={() => {
         if (mediaStatus?.currentItemId) CastContext.showExpandedControls();
         else CastContext.showCastDialog();
       }}
       {...props}
     >
-      <BlurView
-        intensity={100}
-        className="rounded-full overflow-hidden h-10 aspect-square flex items-center justify-center"
-        {...props}
-      >
-        <Feather name="cast" size={22} color={"white"} />
-      </BlurView>
-      <AndroidCastButton />
-    </TouchableOpacity>
+      <Feather name="cast" size={22} color={"white"} />
+    </RoundButton>
   );
 };

components/DownloadItem.tsx

@@ -21,7 +21,7 @@ import {
 import { Href, router, useFocusEffect } from "expo-router";
 import { useAtom } from "jotai";
 import React, { useCallback, useMemo, useRef, useState } from "react";
-import { Alert, TouchableOpacity, View, ViewProps } from "react-native";
+import { Alert, View, ViewProps } from "react-native";
 import { toast } from "sonner-native";
 import { AudioTrackSelector } from "./AudioTrackSelector";
 import { Bitrate, BitrateSelector } from "./BitrateSelector";
@@ -30,18 +30,25 @@ import { Text } from "./common/Text";
 import { Loader } from "./Loader";
 import { MediaSourceSelector } from "./MediaSourceSelector";
 import ProgressCircle from "./ProgressCircle";
+import { RoundButton } from "./RoundButton";
 import { SubtitleTrackSelector } from "./SubtitleTrackSelector";
 
 interface DownloadProps extends ViewProps {
   items: BaseItemDto[];
   MissingDownloadIconComponent: () => React.ReactElement;
   DownloadedIconComponent: () => React.ReactElement;
+  title?: string;
+  subtitle?: string;
+  size?: "default" | "large";
 }
 
 export const DownloadItems: React.FC<DownloadProps> = ({
   items,
   MissingDownloadIconComponent,
   DownloadedIconComponent,
+  title = "Download",
+  subtitle = "",
+  size = "default",
   ...props
 }) => {
   const [api] = useAtom(apiAtom);
@@ -71,9 +78,6 @@ export const DownloadItems: React.FC<DownloadProps> = ({
     [settings]
   );
 
-  /**
-   * Bottom sheet
-   */
   const bottomSheetModalRef = useRef<BottomSheetModal>(null);
 
   const handlePresentModalPress = useCallback(() => {
@@ -86,18 +90,18 @@ export const DownloadItems: React.FC<DownloadProps> = ({
     bottomSheetModalRef.current?.dismiss();
   }, []);
 
-  // region computed
   const itemIds = useMemo(() => items.map((i) => i.Id), [items]);
-  const pendingItems = useMemo(
+
+  const itemsNotDownloaded = useMemo(
     () =>
       items.filter((i) => !downloadedFiles?.some((f) => f.item.Id === i.Id)),
     [items, downloadedFiles]
   );
-  const isDownloaded = useMemo(() => {
-    if (!downloadedFiles) return false;
-    return pendingItems.length == 0;
-  }, [downloadedFiles, pendingItems]);
 
+  const allItemsDownloaded = useMemo(() => {
+    if (items.length === 0) return false;
+    return itemsNotDownloaded.length === 0;
+  }, [items, itemsNotDownloaded]);
   const itemsProcesses = useMemo(
     () => processes?.filter((p) => itemIds.includes(p.item.Id)),
     [processes, itemIds]
@@ -116,13 +120,10 @@ export const DownloadItems: React.FC<DownloadProps> = ({
 
   const itemsQueued = useMemo(() => {
     return (
-      pendingItems.length > 0 &&
-      pendingItems.every((p) => queue.some((q) => p.Id == q.item.Id))
+      itemsNotDownloaded.length > 0 &&
+      itemsNotDownloaded.every((p) => queue.some((q) => p.Id == q.item.Id))
     );
-  }, [queue, pendingItems]);
-  // endregion computed
-
-  // region helper functions
+  }, [queue, itemsNotDownloaded]);
   const navigateToDownloads = () => router.push("/downloads");
 
   const onDownloadedPress = () => {
@@ -141,17 +142,17 @@ export const DownloadItems: React.FC<DownloadProps> = ({
 
   const acceptDownloadOptions = useCallback(() => {
     if (userCanDownload === true) {
-      if (pendingItems.some((i) => !i.Id)) {
+      if (itemsNotDownloaded.some((i) => !i.Id)) {
         throw new Error("No item id");
       }
       closeModal();
 
-      if (usingOptimizedServer) initiateDownload(...pendingItems);
+      if (usingOptimizedServer) initiateDownload(...itemsNotDownloaded);
       else {
         queueActions.enqueue(
           queue,
           setQueue,
-          ...pendingItems.map((item) => ({
+          ...itemsNotDownloaded.map((item) => ({
             id: item.Id!,
             execute: async () => await initiateDownload(item),
             item,
@@ -164,27 +165,22 @@ export const DownloadItems: React.FC<DownloadProps> = ({
   }, [
     queue,
     setQueue,
-    pendingItems,
+    itemsNotDownloaded,
     usingOptimizedServer,
     userCanDownload,
-
-    // Need to be reference at the time async lambda is created for initiateDownload
     maxBitrate,
     selectedMediaSource,
     selectedAudioStream,
     selectedSubtitleStream,
   ]);
 
-  /**
-   * Start download
-   */
   const initiateDownload = useCallback(
     async (...items: BaseItemDto[]) => {
       if (
         !api ||
         !user?.Id ||
         items.some((p) => !p.Id) ||
-        (pendingItems.length === 1 && !selectedMediaSource?.Id)
+        (itemsNotDownloaded.length === 1 && !selectedMediaSource?.Id)
       ) {
         throw new Error(
           "DownloadItem ~ initiateDownload: No api or user or item"
@@ -195,7 +191,7 @@ export const DownloadItems: React.FC<DownloadProps> = ({
       let subtitleIndex: number | undefined = selectedSubtitleStream;
 
       for (const item of items) {
-        if (pendingItems.length > 1) {
+        if (itemsNotDownloaded.length > 1) {
           ({ mediaSource, audioIndex, subtitleIndex } = getDefaultPlaySettings(
             item,
             settings!
@@ -238,7 +234,7 @@ export const DownloadItems: React.FC<DownloadProps> = ({
     [
       api,
       user?.Id,
-      pendingItems,
+      itemsNotDownloaded,
       selectedMediaSource,
       selectedAudioStream,
       selectedSubtitleStream,
@@ -260,58 +256,61 @@ export const DownloadItems: React.FC<DownloadProps> = ({
     ),
     []
   );
-  // endregion helper functions
-
-  // Allow to select & set settings for single download
   useFocusEffect(
     useCallback(() => {
       if (!settings) return;
-      if (pendingItems.length !== 1) return;
+      if (itemsNotDownloaded.length !== 1) return;
       const { bitrate, mediaSource, audioIndex, subtitleIndex } =
         getDefaultPlaySettings(items[0], settings);
 
-      // 4. Set states
       setSelectedMediaSource(mediaSource ?? undefined);
       setSelectedAudioStream(audioIndex ?? 0);
       setSelectedSubtitleStream(subtitleIndex ?? -1);
       setMaxBitrate(bitrate);
-    }, [items, pendingItems, settings])
+    }, [items, itemsNotDownloaded, settings])
   );
 
-  return (
-    <View
-      className="bg-neutral-800/80 rounded-full h-9 w-9 flex items-center justify-center"
-      {...props}
-    >
-      {processes && itemsProcesses.length > 0 ? (
-        <TouchableOpacity onPress={navigateToDownloads}>
-          {progress === 0 ? (
-            <Loader />
-          ) : (
-            <View className="-rotate-45">
-              <ProgressCircle
-                size={24}
-                fill={progress}
-                width={4}
-                tintColor="#9334E9"
-                backgroundColor="#bdc3c7"
-              />
-            </View>
-          )}
-        </TouchableOpacity>
-      ) : itemsQueued ? (
-        <TouchableOpacity onPress={navigateToDownloads}>
-          <Ionicons name="hourglass" size={24} color="white" />
-        </TouchableOpacity>
-      ) : isDownloaded ? (
-        <TouchableOpacity onPress={onDownloadedPress}>
-          {DownloadedIconComponent()}
-        </TouchableOpacity>
+  const renderButtonContent = () => {
+    if (processes && itemsProcesses.length > 0) {
+      return progress === 0 ? (
+        <Loader />
       ) : (
-        <TouchableOpacity onPress={handlePresentModalPress}>
-          {MissingDownloadIconComponent()}
-        </TouchableOpacity>
-      )}
+        <View className="-rotate-45">
+          <ProgressCircle
+            size={24}
+            fill={progress}
+            width={4}
+            tintColor="#9334E9"
+            backgroundColor="#bdc3c7"
+          />
+        </View>
+      );
+    } else if (itemsQueued) {
+      return <Ionicons name="hourglass" size={24} color="white" />;
+    } else if (allItemsDownloaded) {
+      return <DownloadedIconComponent />;
+    } else {
+      return <MissingDownloadIconComponent />;
+    }
+  };
+
+  const onButtonPress = () => {
+    if (processes && itemsProcesses.length > 0) {
+      navigateToDownloads();
+    } else if (itemsQueued) {
+      navigateToDownloads();
+    } else if (allItemsDownloaded) {
+      onDownloadedPress();
+    } else {
+      handlePresentModalPress();
+    }
+  };
+
+  return (
+    <View {...props}>
+      <RoundButton size={size} onPress={onButtonPress}>
+        {renderButtonContent()}
+      </RoundButton>
       <BottomSheetModal
         ref={bottomSheetModalRef}
         enableDynamicSizing
@@ -326,16 +325,21 @@ export const DownloadItems: React.FC<DownloadProps> = ({
       >
         <BottomSheetView>
           <View className="flex flex-col space-y-4 px-4 pb-8 pt-2">
-            <Text className="font-bold text-2xl text-neutral-10">
-              Download options
-            </Text>
+            <View>
+              <Text className="font-bold text-2xl text-neutral-100">
+                {title}
+              </Text>
+              <Text className="text-neutral-300">
+                {subtitle || `Download ${itemsNotDownloaded.length} items`}
+              </Text>
+            </View>
             <View className="flex flex-col space-y-2 w-full items-start">
               <BitrateSelector
                 inverted
                 onChange={setMaxBitrate}
                 selected={maxBitrate}
               />
-              {pendingItems.length === 1 && (
+              {itemsNotDownloaded.length === 1 && (
                 <>
                   <MediaSourceSelector
                     item={items[0]}
@@ -380,11 +384,15 @@ export const DownloadItems: React.FC<DownloadProps> = ({
   );
 };
 
-export const DownloadSingleItem: React.FC<{ item: BaseItemDto }> = ({
-  item,
-}) => {
+export const DownloadSingleItem: React.FC<{
+  size?: "default" | "large";
+  item: BaseItemDto;
+}> = ({ item, size = "default" }) => {
   return (
     <DownloadItems
+      size={size}
+      title="Download Episode"
+      subtitle={item.Name!}
       items={[item]}
       MissingDownloadIconComponent={() => (
         <Ionicons name="cloud-download-outline" size={24} color="white" />

components/ItemCardText.tsx

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

components/ItemContent.tsx

@@ -90,7 +90,7 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
               <Chromecast background="blur" width={22} height={22} />
               {item.Type !== "Program" && (
                 <View className="flex flex-row items-center space-x-2">
-                  <DownloadSingleItem item={item} />
+                  <DownloadSingleItem item={item} size="large" />
                   <PlayedStatus item={item} />
                 </View>
               )}
@@ -286,8 +286,6 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
                 <SimilarItems itemId={item.Id} />
               </>
             )}
-
-            <View className="h-16"></View>
           </View>
         </ParallaxScrollView>
       </View>

components/ItemTechnicalDetails.tsx

@@ -124,11 +124,11 @@ const AudioStreamInfo = ({ audioStreams }: { audioStreams: MediaStream[] }) => {
   return (
     <View className="flex flex-col">
       {audioStreams.map((audioStreams, index) => (
-        <View className="flex flex-col">
+        <View key={index} className="flex flex-col">
           <Text className="mb-3 text-neutral-400 text-xs">
             {audioStreams.DisplayTitle}
           </Text>
-          <View key={index} className="flex-row flex-wrap gap-2">
+          <View className="flex-row flex-wrap gap-2">
             <Badge
               variant="gray"
               iconLeft={

components/PlayButton.tsx

@@ -32,6 +32,7 @@ import Animated, {
 import { Button } from "./Button";
 import { SelectedOptions } from "./ItemContent";
 import { chromecastProfile } from "@/utils/profiles/chromecast";
+import * as Haptics from "expo-haptics";
 
 interface Props extends React.ComponentProps<typeof Button> {
   item: BaseItemDto;
@@ -78,6 +79,8 @@ export const PlayButton: React.FC<Props> = ({
   const onPress = useCallback(async () => {
     if (!item) return;
 
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+
     const queryParams = new URLSearchParams({
       itemId: item.Id!,
       audioIndex: selectedOptions.audioIndex?.toString() ?? "",

components/PlayedStatus.tsx

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

components/RoundButton.tsx

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

components/common/TouchableItemRouter.tsx

@@ -1,8 +1,10 @@
+import { useMarkAsPlayed } from "@/hooks/useMarkAsPlayed";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import * as Haptics from "expo-haptics";
 import { useRouter, useSegments } from "expo-router";
 import { PropsWithChildren } from "react";
 import { TouchableOpacity, TouchableOpacityProps } from "react-native";
+import * as ContextMenu from "zeego/context-menu";
 
 interface Props extends TouchableOpacityProps {
   item: BaseItemDto;
@@ -62,18 +64,82 @@ export const TouchableItemRouter: React.FC<PropsWithChildren<Props>> = ({
 
   const from = segments[2];
 
+  const markAsPlayedStatus = useMarkAsPlayed(item);
+
   if (from === "(home)" || from === "(search)" || from === "(libraries)")
     return (
-      <TouchableOpacity
-        onPress={() => {
-          Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
-          const url = itemRouter(item, from);
-          // @ts-ignore
-          router.push(url);
-        }}
-        {...props}
-      >
-        {children}
-      </TouchableOpacity>
+      <ContextMenu.Root>
+        <ContextMenu.Trigger>
+          <TouchableOpacity
+            onPress={() => {
+              const url = itemRouter(item, from);
+              // @ts-ignore
+              router.push(url);
+            }}
+            {...props}
+          >
+            {children}
+          </TouchableOpacity>
+        </ContextMenu.Trigger>
+        <ContextMenu.Content
+          avoidCollisions
+          alignOffset={0}
+          collisionPadding={0}
+          loop={false}
+          key={"content"}
+        >
+          <ContextMenu.Label key="label-1">Actions</ContextMenu.Label>
+          <ContextMenu.Item
+            key="item-1"
+            onSelect={() => {
+              markAsPlayedStatus(true);
+            }}
+            shouldDismissMenuOnSelect
+          >
+            <ContextMenu.ItemTitle key="item-1-title">
+              Mark as watched
+            </ContextMenu.ItemTitle>
+            <ContextMenu.ItemIcon
+              ios={{
+                name: "checkmark.circle", // Changed to "checkmark.circle" which represents "watched"
+                pointSize: 18,
+                weight: "semibold",
+                scale: "medium",
+                hierarchicalColor: {
+                  dark: "green", // Changed to green for "watched"
+                  light: "green",
+                },
+              }}
+              androidIconName="checkmark-circle"
+            ></ContextMenu.ItemIcon>
+          </ContextMenu.Item>
+          <ContextMenu.Item
+            key="item-2"
+            onSelect={() => {
+              markAsPlayedStatus(false);
+            }}
+            shouldDismissMenuOnSelect
+            destructive
+          >
+            <ContextMenu.ItemTitle key="item-2-title">
+              Mark as not watched
+            </ContextMenu.ItemTitle>
+            <ContextMenu.ItemIcon
+              ios={{
+                name: "eye.slash", // Changed to "eye.slash" which represents "not watched"
+                pointSize: 18, // Adjusted for better visibility
+                weight: "semibold",
+                scale: "medium",
+                hierarchicalColor: {
+                  dark: "red", // Changed to red for "not watched"
+                  light: "red",
+                },
+                // Removed paletteColors as it's not necessary in this case
+              }}
+              androidIconName="eye-slash"
+            ></ContextMenu.ItemIcon>
+          </ContextMenu.Item>
+        </ContextMenu.Content>
+      </ContextMenu.Root>
     );
 };

components/downloads/MovieCard.tsx

@@ -97,7 +97,9 @@ export const MovieCard: React.FC<MovieCardProps> = ({ item }) => {
           />
         </View>
       )}
-      <ItemCardText item={item} />
+      <View className="w-28">
+        <ItemCardText item={item} />
+      </View>
       <DownloadSize items={[item]} />
     </TouchableOpacity>
   );

components/series/SeasonPicker.tsx

@@ -125,21 +125,14 @@ export const SeasonPicker: React.FC<Props> = ({ item, initialSeasonIndex }) => {
           }}
         />
         <DownloadItems
+          title="Download Season"
           className="ml-2"
           items={episodes || []}
           MissingDownloadIconComponent={() => (
-            <MaterialCommunityIcons
-              name="download-multiple"
-              size={20}
-              color="white"
-            />
+            <Ionicons name="download" size={20} color="white" />
           )}
           DownloadedIconComponent={() => (
-            <MaterialCommunityIcons
-              name="check-all"
-              size={20}
-              color="#9333ea"
-            />
+            <Ionicons name="download" size={20} color="#9333ea" />
           )}
         />
       </View>

components/stacks/NestedTabPageStack.tsx

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

components/video-player/controls/Controls.tsx

@@ -1,3 +1,4 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import { Text } from "@/components/common/Text";
 import { Loader } from "@/components/Loader";
 import { useAdjacentItems } from "@/hooks/useAdjacentEpisodes";
@@ -33,7 +34,6 @@ import { Image } from "expo-image";
 import { useLocalSearchParams, useRouter } from "expo-router";
 import { useAtom } from "jotai";
 import { debounce } from "lodash";
-import { useCallback, useEffect, useRef, useState } from "react";
 import { Dimensions, Pressable, TouchableOpacity, View } from "react-native";
 import { Slider } from "react-native-awesome-slider";
 import {
@@ -42,7 +42,10 @@ import {
   useAnimatedReaction,
   useSharedValue,
 } from "react-native-reanimated";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
+import {
+  SafeAreaView,
+  useSafeAreaInsets,
+} from "react-native-safe-area-context";
 import { VideoRef } from "react-native-video";
 import AudioSlider from "./AudioSlider";
 import BrightnessSlider from "./BrightnessSlider";
@@ -79,7 +82,7 @@ interface Props {
   setSubtitleURL?: (url: string, customName: string) => void;
   setSubtitleTrack?: (index: number) => void;
   setAudioTrack?: (index: number) => void;
-  stop?: (() => Promise<void>) | (() => void);
+  stop: (() => Promise<void>) | (() => void);
   isVlc?: boolean;
 }
 
@@ -506,11 +509,23 @@ export const Controls: React.FC<Props> = ({
             setSubtitleTrack={setSubtitleTrack}
             setSubtitleURL={setSubtitleURL}
           >
-            {!mediaSource?.TranscodingUrl ? (
-              <DropdownViewDirect showControls={showControls} />
-            ) : (
-              <DropdownViewTranscoding showControls={showControls} />
-            )}
+            <View
+              style={[
+                {
+                  position: "absolute",
+                  top: insets.top,
+                  left: insets.left,
+                  opacity: showControls ? 1 : 0,
+                  zIndex: 1000,
+                },
+              ]}
+            >
+              {!mediaSource?.TranscodingUrl ? (
+                <DropdownViewDirect showControls={showControls} />
+              ) : (
+                <DropdownViewTranscoding showControls={showControls} />
+              )}
+            </View>
           </VideoProvider>
 
           <Pressable
@@ -528,15 +543,15 @@ export const Controls: React.FC<Props> = ({
             style={[
               {
                 position: "absolute",
-                top: 0,
-                right: 0,
+                top: insets.top,
+                right: insets.right,
                 opacity: showControls ? 1 : 0,
               },
             ]}
             pointerEvents={showControls ? "auto" : "none"}
             className={`flex flex-row items-center space-x-2 z-10 p-4 `}
           >
-            {item?.Type === "Episode" && (
+            {item?.Type === "Episode" && !offline && (
               <TouchableOpacity
                 onPress={() => {
                   switchOnEpisodeMode();
@@ -546,7 +561,7 @@ export const Controls: React.FC<Props> = ({
                 <Ionicons name="list" size={24} color="white" />
               </TouchableOpacity>
             )}
-            {previousItem && (
+            {previousItem && !offline && (
               <TouchableOpacity
                 onPress={goToPreviousItem}
                 className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"
@@ -555,7 +570,7 @@ export const Controls: React.FC<Props> = ({
               </TouchableOpacity>
             )}
 
-            {nextItem && (
+            {nextItem && !offline && (
               <TouchableOpacity
                 onPress={goToNextItem}
                 className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"
@@ -578,6 +593,7 @@ export const Controls: React.FC<Props> = ({
             )}
             <TouchableOpacity
               onPress={async () => {
+                Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
                 router.back();
               }}
               className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"
@@ -590,8 +606,8 @@ export const Controls: React.FC<Props> = ({
             style={{
               position: "absolute",
               top: "50%", // Center vertically
-              left: 0,
-              right: 0,
+              left: insets.left,
+              right: insets.right,
               flexDirection: "row",
               justifyContent: "space-between",
               alignItems: "center",
@@ -704,9 +720,9 @@ export const Controls: React.FC<Props> = ({
             style={[
               {
                 position: "absolute",
-                right: 0,
-                left: 0,
-                bottom: 0,
+                right: insets.right,
+                left: insets.left,
+                bottom: insets.bottom,
               },
             ]}
             className={`flex flex-col p-4`}

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

@@ -72,105 +72,93 @@ const DropdownViewDirect: React.FC<DropdownViewDirectProps> = ({
   }>();
 
   return (
-    <View
-      style={{
-        position: "absolute",
-        zIndex: 1000,
-        opacity: showControls ? 1 : 0,
-      }}
-      className="p-4"
-    >
-      <DropdownMenu.Root>
-        <DropdownMenu.Trigger>
-          <TouchableOpacity className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2">
-            <Ionicons name="ellipsis-horizontal" size={24} color={"white"} />
-          </TouchableOpacity>
-        </DropdownMenu.Trigger>
-        <DropdownMenu.Content
-          loop={true}
-          side="bottom"
-          align="start"
-          alignOffset={0}
-          avoidCollisions={true}
-          collisionPadding={8}
-          sideOffset={8}
-        >
-          <DropdownMenu.Sub>
-            <DropdownMenu.SubTrigger key="subtitle-trigger">
-              Subtitle
-            </DropdownMenu.SubTrigger>
-            <DropdownMenu.SubContent
-              alignOffset={-10}
-              avoidCollisions={true}
-              collisionPadding={0}
-              loop={true}
-              sideOffset={10}
-            >
-              {allSubtitleTracksForDirectPlay?.map((sub, idx: number) => (
-                <DropdownMenu.CheckboxItem
-                  key={`subtitle-item-${idx}`}
-                  value={subtitleIndex === sub.index.toString()}
-                  onValueChange={() => {
-                    if ("deliveryUrl" in sub && sub.deliveryUrl) {
-                      setSubtitleURL &&
-                        setSubtitleURL(
-                          api?.basePath + sub.deliveryUrl,
-                          sub.name
-                        );
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger>
+        <TouchableOpacity className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2">
+          <Ionicons name="ellipsis-horizontal" size={24} color={"white"} />
+        </TouchableOpacity>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content
+        loop={true}
+        side="bottom"
+        align="start"
+        alignOffset={0}
+        avoidCollisions={true}
+        collisionPadding={8}
+        sideOffset={8}
+      >
+        <DropdownMenu.Sub>
+          <DropdownMenu.SubTrigger key="subtitle-trigger">
+            Subtitle
+          </DropdownMenu.SubTrigger>
+          <DropdownMenu.SubContent
+            alignOffset={-10}
+            avoidCollisions={true}
+            collisionPadding={0}
+            loop={true}
+            sideOffset={10}
+          >
+            {allSubtitleTracksForDirectPlay?.map((sub, idx: number) => (
+              <DropdownMenu.CheckboxItem
+                key={`subtitle-item-${idx}`}
+                value={subtitleIndex === sub.index.toString()}
+                onValueChange={() => {
+                  if ("deliveryUrl" in sub && sub.deliveryUrl) {
+                    setSubtitleURL &&
+                      setSubtitleURL(api?.basePath + sub.deliveryUrl, sub.name);
 
-                      console.log(
-                        "Set external subtitle: ",
-                        api?.basePath + sub.deliveryUrl
-                      );
-                    } else {
-                      console.log("Set sub index: ", sub.index);
-                      setSubtitleTrack && setSubtitleTrack(sub.index);
-                    }
-                    router.setParams({
-                      subtitleIndex: sub.index.toString(),
-                    });
-                    console.log("Subtitle: ", sub);
-                  }}
-                >
-                  <DropdownMenu.ItemTitle key={`subtitle-item-title-${idx}`}>
-                    {sub.name}
-                  </DropdownMenu.ItemTitle>
-                </DropdownMenu.CheckboxItem>
-              ))}
-            </DropdownMenu.SubContent>
-          </DropdownMenu.Sub>
-          <DropdownMenu.Sub>
-            <DropdownMenu.SubTrigger key="audio-trigger">
-              Audio
-            </DropdownMenu.SubTrigger>
-            <DropdownMenu.SubContent
-              alignOffset={-10}
-              avoidCollisions={true}
-              collisionPadding={0}
-              loop={true}
-              sideOffset={10}
-            >
-              {audioTracks?.map((track, idx: number) => (
-                <DropdownMenu.CheckboxItem
-                  key={`audio-item-${idx}`}
-                  value={audioIndex === track.index.toString()}
-                  onValueChange={() => {
-                    setAudioTrack && setAudioTrack(track.index);
-                    router.setParams({
-                      audioIndex: track.index.toString(),
-                    });
-                  }}
-                >
-                  <DropdownMenu.ItemTitle key={`audio-item-title-${idx}`}>
-                    {track.name}
-                  </DropdownMenu.ItemTitle>
-                </DropdownMenu.CheckboxItem>
-              ))}
-            </DropdownMenu.SubContent>
-          </DropdownMenu.Sub>
-        </DropdownMenu.Content>
-      </DropdownMenu.Root>
-    </View>
+                    console.log(
+                      "Set external subtitle: ",
+                      api?.basePath + sub.deliveryUrl
+                    );
+                  } else {
+                    console.log("Set sub index: ", sub.index);
+                    setSubtitleTrack && setSubtitleTrack(sub.index);
+                  }
+                  router.setParams({
+                    subtitleIndex: sub.index.toString(),
+                  });
+                  console.log("Subtitle: ", sub);
+                }}
+              >
+                <DropdownMenu.ItemTitle key={`subtitle-item-title-${idx}`}>
+                  {sub.name}
+                </DropdownMenu.ItemTitle>
+              </DropdownMenu.CheckboxItem>
+            ))}
+          </DropdownMenu.SubContent>
+        </DropdownMenu.Sub>
+        <DropdownMenu.Sub>
+          <DropdownMenu.SubTrigger key="audio-trigger">
+            Audio
+          </DropdownMenu.SubTrigger>
+          <DropdownMenu.SubContent
+            alignOffset={-10}
+            avoidCollisions={true}
+            collisionPadding={0}
+            loop={true}
+            sideOffset={10}
+          >
+            {audioTracks?.map((track, idx: number) => (
+              <DropdownMenu.CheckboxItem
+                key={`audio-item-${idx}`}
+                value={audioIndex === track.index.toString()}
+                onValueChange={() => {
+                  setAudioTrack && setAudioTrack(track.index);
+                  router.setParams({
+                    audioIndex: track.index.toString(),
+                  });
+                }}
+              >
+                <DropdownMenu.ItemTitle key={`audio-item-title-${idx}`}>
+                  {track.name}
+                </DropdownMenu.ItemTitle>
+              </DropdownMenu.CheckboxItem>
+            ))}
+          </DropdownMenu.SubContent>
+        </DropdownMenu.Sub>
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
   );
 };
 

hooks/useCreditSkipper.ts

@@ -5,6 +5,7 @@ import { apiAtom } from "@/providers/JellyfinProvider";
 import { getAuthHeaders } from "@/utils/jellyfin/jellyfin";
 import { writeToLog } from "@/utils/log";
 import { msToSeconds, secondsToMs } from "@/utils/time";
+import * as Haptics from "expo-haptics";
 
 interface CreditTimestamps {
   Introduction: {
@@ -78,6 +79,7 @@ export const useCreditSkipper = (
     if (!creditTimestamps) return;
     console.log(`Skipping credits to ${creditTimestamps.Credits.End}`);
     try {
+      Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
       wrappedSeek(creditTimestamps.Credits.End);
       setTimeout(() => {
         play();

hooks/useIntroSkipper.ts

@@ -5,6 +5,7 @@ import { apiAtom } from "@/providers/JellyfinProvider";
 import { getAuthHeaders } from "@/utils/jellyfin/jellyfin";
 import { writeToLog } from "@/utils/log";
 import { msToSeconds, secondsToMs } from "@/utils/time";
+import * as Haptics from "expo-haptics";
 
 interface IntroTimestamps {
   EpisodeId: string;
@@ -78,6 +79,7 @@ export const useIntroSkipper = (
     console.log("skipIntro");
     if (!introTimestamps) return;
     try {
+      Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
       wrappedSeek(introTimestamps.IntroEnd);
       setTimeout(() => {
         play();

hooks/useMarkAsPlayed.ts

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

providers/DownloadProvider.tsx

@@ -423,20 +423,32 @@ function useDownloadProvider() {
       throw new Error("Base directory not found");
     }
 
+    console.log(`ignoreList length: ${ignoreList?.length}`);
+
     const dirContents = await FileSystem.readDirectoryAsync(baseDirectory);
     for (const item of dirContents) {
       // Exclude mmkv directory.
       // Deleting this deletes all user information as well. Logout should handle this.
-      if ((item == "mmkv" && !includeMMKV) || ignoreList.some(i => item.includes(i))) {
+      if (
+        (item == "mmkv" && !includeMMKV) ||
+        ignoreList.some(i => item.includes(i))
+      ) {
         console.log("Skipping read for item", item)
         continue;
       }
-      const itemInfo = await FileSystem.getInfoAsync(`${baseDirectory}${item}`);
-      if (!itemInfo.isDirectory && itemInfo.exists) {
-        callback(itemInfo);
-      }
+      await FileSystem.getInfoAsync(`${baseDirectory}${item}`)
+        .then((itemInfo) => {
+          console.log("Loading itemInfo", itemInfo);
+
+          if (itemInfo.exists && !itemInfo.isDirectory) {
+            callback(itemInfo);
+          }
+        })
+        .catch(e =>
+          console.error(e)
+        )
     }
-  };
+  }
 
   const deleteLocalFiles = async (): Promise<void> => {
     await forEveryDocumentDirFile(false, [], (file) => {
@@ -571,21 +583,23 @@ function useDownloadProvider() {
   };
 
   const appSizeUsage = useMemo(async () => {
-    const ignore: string[] = [];
     const sizes: number[] = downloadedFiles?.map(d => {
-      ignore.push(d.item.Id!!)
       return getDownloadedItemSize(d.item.Id!!)
     }) || [];
 
-    await forEveryDocumentDirFile(true, ignore, (file) => {
-      // Skip reading downloaded files since these are saved in storage
-      if (!downloadedFiles?.some(d => file.uri.includes(d.item.Id!!)) && file.exists) {
-        sizes.push(file.size);
-      }
-    });
+    await forEveryDocumentDirFile(
+      true,
+      getAllDownloadedItems().map(d => d.item.Id!!),
+      (file) => {
+        if (file.exists) {
+          sizes.push(file.size);
+        }
+      }).catch(e => {
+      console.error(e)
+    })
 
     return sizes.reduce((sum, size) => sum + size, 0);
-  }, [logs, downloadedFiles]);
+  }, [logs, downloadedFiles, forEveryDocumentDirFile]);
 
   function getDownloadedItem(itemId: string): DownloadedItem | null {
     try {

utils/collectionTypeToItemType.ts

@@ -0,0 +1,53 @@
+import {
+  BaseItemKind,
+  CollectionType,
+} from "@jellyfin/sdk/lib/generated-client";
+
+/**
+ * Converts a ColletionType to a BaseItemKind (also called ItemType)
+ * 
+ * CollectionTypes
+ *  readonly Unknown: "unknown";
+    readonly Movies: "movies";
+    readonly Tvshows: "tvshows";
+    readonly Music: "music";
+    readonly Musicvideos: "musicvideos";
+    readonly Trailers: "trailers";
+    readonly Homevideos: "homevideos";
+    readonly Boxsets: "boxsets";
+    readonly Books: "books";
+    readonly Photos: "photos";
+    readonly Livetv: "livetv";
+    readonly Playlists: "playlists";
+    readonly Folders: "folders";
+ */
+export const colletionTypeToItemType = (
+  collectionType?: CollectionType | null
+): BaseItemKind | undefined => {
+  if (!collectionType) return undefined;
+
+  switch (collectionType) {
+    case CollectionType.Movies:
+      return BaseItemKind.Movie;
+    case CollectionType.Tvshows:
+      return BaseItemKind.Series;
+    case CollectionType.Homevideos:
+      return BaseItemKind.Video;
+    case CollectionType.Musicvideos:
+      return BaseItemKind.MusicVideo;
+    case CollectionType.Books:
+      return BaseItemKind.Book;
+    case CollectionType.Playlists:
+      return BaseItemKind.Playlist;
+    case CollectionType.Folders:
+      return BaseItemKind.Folder;
+    case CollectionType.Photos:
+      return BaseItemKind.Photo;
+    case CollectionType.Trailers:
+      return BaseItemKind.Trailer;
+    case CollectionType.Playlists:
+      return BaseItemKind.Playlist;
+  }
+
+  return undefined;
+};