wip

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

@@ -1,30 +1,28 @@
 import { Text } from "@/components/common/Text";
+import { ActiveDownload } from "@/components/downloads/ActiveDownload";
 import { MovieCard } from "@/components/downloads/MovieCard";
 import { SeriesCard } from "@/components/downloads/SeriesCard";
-import { Loader } from "@/components/Loader";
-import { getAllDownloadedItems } from "@/hooks/useDownloadM3U8Files";
-import { runningProcesses } from "@/utils/atoms/downloads";
+import { useDownload } from "@/providers/DownloadProvider";
 import { queueAtom } from "@/utils/atoms/queue";
 import { Ionicons } from "@expo/vector-icons";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { useQuery } from "@tanstack/react-query";
 import * as FileSystem from "expo-file-system";
 import { router } from "expo-router";
-import { FFmpegKit } from "ffmpeg-kit-react-native";
 import { useAtom } from "jotai";
 import { useEffect, 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 { data: downloadedFiles, isLoading } = useQuery({
-    queryKey: ["downloaded_files", process?.item.Id],
-    queryFn: getAllDownloadedItems,
-    staleTime: 0,
-  });
+  const {
+    clearProcess,
+    process,
+    readProcess,
+    startBackgroundDownload,
+    updateProcess,
+    downloadedFiles,
+  } = useDownload();
 
   const movies = useMemo(
     () => downloadedFiles?.filter((f) => f.Type === "Movie") || [],
@@ -96,14 +94,6 @@ const downloads: React.FC = () => {
 
   const insets = useSafeAreaInsets();
 
-  if (isLoading) {
-    return (
-      <View className="h-full flex flex-col items-center justify-center -mt-6">
-        <Loader />
-      </View>
-    );
-  }
-
   return (
     <ScrollView
       contentContainerStyle={{
@@ -130,7 +120,11 @@ const downloads: React.FC = () => {
                   </View>
                   <TouchableOpacity
                     onPress={() => {
-                      setQueue((prev) => prev.filter((i) => i.id !== q.id));
+                      clearProcess();
+                      setQueue(async (prev) => {
+                        if (!prev) return [];
+                        return [...(await prev).filter((i) => i.id !== q.id)];
+                      });
                     }}
                   >
                     <Ionicons name="close" size={24} color="red" />
@@ -144,49 +138,7 @@ const downloads: React.FC = () => {
             )}
           </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>
-                  </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>
+          <ActiveDownload />
         </View>
         {movies.length > 0 && (
           <View className="mb-4">
@@ -212,15 +164,3 @@ const downloads: React.FC = () => {
 };
 
 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)/settings.tsx

@@ -2,22 +2,20 @@ import { Button } from "@/components/Button";
 import { Text } from "@/components/common/Text";
 import { ListItem } from "@/components/ListItem";
 import { SettingToggles } from "@/components/settings/SettingToggles";
-import { useFiles } from "@/hooks/useFiles";
+import { useDownload } from "@/providers/DownloadProvider";
 import { apiAtom, useJellyfin, userAtom } from "@/providers/JellyfinProvider";
 import { clearLogs, readFromLog } from "@/utils/log";
-import { Ionicons } from "@expo/vector-icons";
 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 { red } from "react-native-reanimated/lib/typescript/reanimated2/Colors";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { toast } from "sonner-native";
 
 export default function settings() {
   const { logout } = useJellyfin();
-  const { deleteAllFiles } = useFiles();
+  const { deleteAllFiles } = useDownload();
 
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);

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

@@ -1,5 +1,6 @@
 import { TabBarIcon } from "@/components/navigation/TabBarIcon";
 import { Colors } from "@/constants/Colors";
+import { useCheckRunningJobs } from "@/hooks/useCheckRunningJobs";
 import { BlurView } from "expo-blur";
 import * as NavigationBar from "expo-navigation-bar";
 import { Tabs } from "expo-router";

app/_layout.tsx

@@ -14,12 +14,15 @@ import * as ScreenOrientation from "expo-screen-orientation";
 import * as SplashScreen from "expo-splash-screen";
 import { StatusBar } from "expo-status-bar";
 import { Provider as JotaiProvider, useAtom } from "jotai";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import "react-native-reanimated";
 import * as Linking from "expo-linking";
 import { orientationAtom } from "@/utils/atoms/orientation";
 import { Toaster } from "sonner-native";
+import { checkForExistingDownloads } from "@kesha-antonov/react-native-background-downloader";
+import { AppState } from "react-native";
+import { DownloadProvider } from "@/providers/DownloadProvider";
 
 SplashScreen.preventAutoHideAsync();
 
@@ -74,6 +77,25 @@ 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) => {
@@ -101,57 +123,59 @@ function Layout() {
     <GestureHandlerRootView style={{ flex: 1 }}>
       <QueryClientProvider client={queryClientRef.current}>
         <JobQueueProvider>
-          <ActionSheetProvider>
-            <BottomSheetModalProvider>
-              <JellyfinProvider>
-                <PlaybackProvider>
-                  <StatusBar style="light" backgroundColor="#000" />
-                  <ThemeProvider value={DarkTheme}>
-                    <Stack
-                      initialRouteName="/home"
-                      screenOptions={{
-                        autoHideHomeIndicator: true,
-                      }}
-                    >
-                      <Stack.Screen
-                        name="(auth)/(tabs)"
-                        options={{
-                          headerShown: false,
-                          title: "",
+          <DownloadProvider>
+            <ActionSheetProvider>
+              <BottomSheetModalProvider>
+                <JellyfinProvider>
+                  <PlaybackProvider>
+                    <StatusBar style="light" backgroundColor="#000" />
+                    <ThemeProvider value={DarkTheme}>
+                      <Stack
+                        initialRouteName="/home"
+                        screenOptions={{
+                          autoHideHomeIndicator: true,
+                        }}
+                      >
+                        <Stack.Screen
+                          name="(auth)/(tabs)"
+                          options={{
+                            headerShown: false,
+                            title: "",
+                          }}
+                        />
+                        <Stack.Screen
+                          name="(auth)/play"
+                          options={{
+                            headerShown: false,
+                            title: "",
+                            animation: "fade",
+                          }}
+                        />
+                        <Stack.Screen
+                          name="login"
+                          options={{ headerShown: false, title: "Login" }}
+                        />
+                        <Stack.Screen name="+not-found" />
+                      </Stack>
+                      <Toaster
+                        duration={2000}
+                        toastOptions={{
+                          style: {
+                            backgroundColor: "#262626",
+                            borderColor: "#363639",
+                            borderWidth: 1,
+                          },
+                          titleStyle: {
+                            color: "white",
+                          },
                         }}
                       />
-                      <Stack.Screen
-                        name="(auth)/play"
-                        options={{
-                          headerShown: false,
-                          title: "",
-                          animation: "fade",
-                        }}
-                      />
-                      <Stack.Screen
-                        name="login"
-                        options={{ headerShown: false, title: "Login" }}
-                      />
-                      <Stack.Screen name="+not-found" />
-                    </Stack>
-                    <Toaster
-                      duration={2000}
-                      toastOptions={{
-                        style: {
-                          backgroundColor: "#262626",
-                          borderColor: "#363639",
-                          borderWidth: 1,
-                        },
-                        titleStyle: {
-                          color: "white",
-                        },
-                      }}
-                    />
-                  </ThemeProvider>
-                </PlaybackProvider>
-              </JellyfinProvider>
-            </BottomSheetModalProvider>
-          </ActionSheetProvider>
+                    </ThemeProvider>
+                  </PlaybackProvider>
+                </JellyfinProvider>
+              </BottomSheetModalProvider>
+            </ActionSheetProvider>
+          </DownloadProvider>
         </JobQueueProvider>
       </QueryClientProvider>
     </GestureHandlerRootView>