fix

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

@@ -27,6 +27,16 @@ export default function TabLayout() {
               color={color}
             />
           ),
+          headerLeft: () => (
+            <TouchableOpacity
+              style={{ marginHorizontal: 17 }}
+              onPress={() => {
+                router.push("/(auth)/downloads");
+              }}
+            >
+              <Feather name="download" color={"white"} size={24} />
+            </TouchableOpacity>
+          ),
           headerRight: () => (
             <TouchableOpacity
               style={{ marginHorizontal: 17 }}

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

@@ -132,8 +132,6 @@ export default function index() {
       </View>
     );
 
-  if (!data || data.length === 0) return <Text>No data...</Text>;
-
   return (
     <ScrollView
       nestedScrollEnabled

app/(auth)/downloads.tsx

@@ -0,0 +1,85 @@
+import { Text } from "@/components/common/Text";
+import { EpisodeCard } from "@/components/downloads/EpisodeCard";
+import { MovieCard } from "@/components/downloads/MovieCard";
+import { SeriesCard } from "@/components/downloads/SeriesCard";
+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 { useEffect, useMemo } from "react";
+import { ScrollView, View } from "react-native";
+import * as FileSystem from "expo-file-system";
+
+const downloads: React.FC = () => {
+  const { data: downloadedFiles } = useQuery({
+    queryKey: ["downloaded_files"],
+    queryFn: async () =>
+      JSON.parse(
+        (await AsyncStorage.getItem("downloaded_files")) || "[]"
+      ) as BaseItemDto[],
+  });
+
+  const movies = useMemo(
+    () => downloadedFiles?.filter((f) => f.Type === "Movie"),
+    [downloadedFiles]
+  );
+
+  const groupedBySeries = useMemo(() => {
+    const episodes = downloadedFiles?.filter((f) => f.Type === "Episode");
+    const series: { [key: string]: BaseItemDto[] } = {};
+    episodes?.forEach((e) => {
+      if (!series[e.SeriesName!]) series[e.SeriesName!] = [];
+      series[e.SeriesName!].push(e);
+    });
+    return Object.values(series);
+  }, [downloadedFiles]);
+
+  useEffect(() => {
+    console.log(
+      downloadedFiles?.map((i) => ({
+        name: i.Name,
+        codec: i.SourceType,
+        media: i.MediaSources?.[0].Container,
+      }))
+    );
+  }, [downloadedFiles]);
+
+  useEffect(() => {
+    // Get all files from FileStorage
+    // const filename = `${itemId}.mp4`;
+    // const fileUri = `${FileSystem.documentDirectory}`;
+    (async () => {
+      if (!FileSystem.documentDirectory) return;
+      const f = await FileSystem.readDirectoryAsync(
+        FileSystem.documentDirectory
+      );
+      console.log("files", FileSystem.documentDirectory, f);
+    })();
+  }, []);
+
+  return (
+    <ScrollView>
+      <View className="px-4 py-4">
+        <View className="mb-4">
+          <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>
+          {movies?.map((item: BaseItemDto) => (
+            <View className="mb-2 last:mb-0" key={item.Id}>
+              <MovieCard item={item} />
+            </View>
+          ))}
+        </View>
+        <View>
+          {groupedBySeries?.map((items: BaseItemDto[], index: number) => (
+            <SeriesCard items={items} key={items[0].SeriesId} />
+          ))}
+        </View>
+      </View>
+    </ScrollView>
+  );
+};
+
+export default downloads;

app/(auth)/items/[id]/page.tsx

@@ -1,3 +1,4 @@
+import { Chromecast } from "@/components/Chromecast";
 import { Text } from "@/components/common/Text";
 import { DownloadItem } from "@/components/DownloadItem";
 import { PlayedStatus } from "@/components/PlayedStatus";
@@ -9,7 +10,6 @@ import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import {
   getBackdrop,
   getLogoImageById,
-  getPrimaryImage,
   getUserItemData,
 } from "@/utils/jellyfin";
 import { useQuery } from "@tanstack/react-query";
@@ -24,8 +24,6 @@ import {
   View,
 } from "react-native";
 import { ParallaxScrollView } from "../../../../components/ParallaxPage";
-import { Chromecast } from "@/components/Chromecast";
-import { useRemoteMediaClient } from "react-native-google-cast";
 
 const page: React.FC = () => {
   const local = useLocalSearchParams();
@@ -114,7 +112,7 @@ const page: React.FC = () => {
                   {item?.SeriesName}
                 </Text>
               </TouchableOpacity>
-              <View className="flex flex-row items-center self-center">
+              <View className="flex flex-row items-center self-center px-4">
                 <Text className="text-center font-bold text-2xl mr-2">
                   {item?.Name}
                 </Text>

app/(auth)/player/offline/page.tsx

@@ -9,7 +9,9 @@ export default function page() {
   const { itemId, url } = searchParams as { itemId: string; url: string };
 
   const fileUrl = useMemo(() => {
-    return FileSystem.documentDirectory + url;
+    const u = FileSystem.documentDirectory + url;
+    console.log({ u });
+    return u;
   }, [url]);
 
   if (!fileUrl) return null;

app/_layout.tsx

@@ -77,6 +77,19 @@ export default function RootLayout() {
                   ),
                 }}
               />
+              <Stack.Screen
+                name="(auth)/downloads"
+                options={{
+                  headerShown: true,
+                  title: "Downloads",
+                  presentation: "modal",
+                  headerLeft: () => (
+                    <TouchableOpacity onPress={() => router.back()}>
+                      <Feather name="x-circle" size={24} color="white" />
+                    </TouchableOpacity>
+                  ),
+                }}
+              />
               <Stack.Screen
                 name="(auth)/player/offline/page"
                 options={{