Merge ae5505da7f into a3f184979e

2025-09-13 12:53:24 +00:00 · 2024-04-08 18:36:52 +02:00
14 changed files with 467 additions and 493 deletions
--- a/apps/expo/app.config.ts
+++ b/apps/expo/app.config.ts
@@ -2,6 +2,7 @@ import type { ExpoConfig } from "expo/config";

 import { version } from "./package.json";
 import withRemoveiOSNotificationEntitlement from "./src/plugins/withRemoveiOSNotificationEntitlement";
+import withRNBackgroundDownloader from "./src/plugins/withRNBackgroundDownloader";

 const defineConfig = (): ExpoConfig => ({
  name: "movie-web",
@@ -47,6 +48,7 @@ const defineConfig = (): ExpoConfig => ({
  plugins: [
    "expo-router",
    [withRemoveiOSNotificationEntitlement as unknown as string],
+    [withRNBackgroundDownloader as unknown as string],
    [
      "expo-screen-orientation",
      {
--- a/apps/expo/package.json
+++ b/apps/expo/package.json
@@ -19,6 +19,7 @@
  },
  "dependencies": {
    "@expo/metro-config": "^0.17.3",
+    "@kesha-antonov/react-native-background-downloader": "^3.1.2",
    "@movie-web/api": "*",
    "@movie-web/colors": "*",
    "@movie-web/provider-utils": "*",
--- a/apps/expo/src/app/(downloads)/[tmdbId].tsx
+++ b/apps/expo/src/app/(downloads)/[tmdbId].tsx
@@ -1,61 +0,0 @@
-import { useMemo } from "react";
-import { Stack, useLocalSearchParams, useRouter } from "expo-router";
-import { YStack } from "tamagui";
-
-import { DownloadItem } from "~/components/DownloadItem";
-import ScreenLayout from "~/components/layout/ScreenLayout";
-import { PlayerStatus } from "~/stores/player/slices/interface";
-import { usePlayerStore } from "~/stores/player/store";
-import { useDownloadHistoryStore } from "~/stores/settings";
-
-export default function Page() {
-  const { tmdbId } = useLocalSearchParams();
-  const allDownloads = useDownloadHistoryStore((state) => state.downloads);
-  const resetVideo = usePlayerStore((state) => state.resetVideo);
-  const setVideoSrc = usePlayerStore((state) => state.setVideoSrc);
-  const setIsLocalFile = usePlayerStore((state) => state.setIsLocalFile);
-  const setPlayerStatus = usePlayerStore((state) => state.setPlayerStatus);
-  const router = useRouter();
-
-  const download = useMemo(() => {
-    return allDownloads.find((download) => download.media.tmdbId === tmdbId);
-  }, [allDownloads, tmdbId]);
-
-  const handlePress = (localPath?: string) => {
-    if (!localPath) return;
-    resetVideo();
-    setIsLocalFile(true);
-    setPlayerStatus(PlayerStatus.READY);
-    setVideoSrc({
-      uri: localPath,
-    });
-    router.push({
-      pathname: "/videoPlayer",
-    });
-  };
-
-  return (
-    <ScreenLayout showHeader={false}>
-      <Stack.Screen
-        options={{
-          title: download?.media.title ?? "Downloads",
-        }}
-      />
-      <YStack gap="$3">
-        {download?.downloads.map((download) => {
-          return (
-            <DownloadItem
-              key={
-                download.media.type === "show"
-                  ? download.media.episode.tmdbId
-                  : download.media.tmdbId
-              }
-              item={download}
-              onPress={() => handlePress(download.localPath)}
-            />
-          );
-        })}
-      </YStack>
-    </ScreenLayout>
-  );
-}
--- a/apps/expo/src/app/(downloads)/_layout.tsx
+++ b/apps/expo/src/app/(downloads)/_layout.tsx
@@ -1,14 +0,0 @@
-import { Stack } from "expo-router";
-
-import { BrandPill } from "~/components/BrandPill";
-
-export default function Layout() {
-  return (
-    <Stack
-      screenOptions={{
-        headerTransparent: true,
-        headerRight: BrandPill,
-      }}
-    />
-  );
-}
--- a/apps/expo/src/app/(tabs)/downloads.tsx
+++ b/apps/expo/src/app/(tabs)/downloads.tsx
@@ -7,7 +7,7 @@ import { ScrollView, useTheme, YStack } from "tamagui";

 import type { ScrapeMedia } from "@movie-web/provider-utils";

-import { DownloadItem, ShowDownloadItem } from "~/components/DownloadItem";
+import { DownloadItem } from "~/components/DownloadItem";
 import ScreenLayout from "~/components/layout/ScreenLayout";
 import { MWButton } from "~/components/ui/Button";
 import { useDownloadManager } from "~/hooks/useDownloadManager";
@@ -15,69 +15,15 @@ import { PlayerStatus } from "~/stores/player/slices/interface";
 import { usePlayerStore } from "~/stores/player/store";
 import { useDownloadHistoryStore } from "~/stores/settings";

-const exampleMovieMedia: ScrapeMedia = {
-  type: "movie",
-  title: "Avengers: Endgame",
-  releaseYear: 2019,
-  imdbId: "tt4154796",
-  tmdbId: "299534",
-};
-
-const getExampleShowMedia = (seasonNumber: number, episodeNumber: number) =>
-  ({
-    type: "show",
-    title: "Loki",
-    releaseYear: 2021,
-    imdbId: "tt9140554",
-    tmdbId: "84958",
-    season: {
-      number: seasonNumber,
-      tmdbId: seasonNumber.toString(),
-    },
-    episode: {
-      number: episodeNumber,
-      tmdbId: episodeNumber.toString(),
-    },
-  }) as const;
-
-const TestDownloadButton = (props: {
-  media: ScrapeMedia;
-  type: "hls" | "mp4";
-  url: string;
-}) => {
-  const { startDownload } = useDownloadManager();
-  const theme = useTheme();
-  return (
-    <MWButton
-      type="secondary"
-      backgroundColor="$sheetItemBackground"
-      icon={
-        <MaterialCommunityIcons
-          name="download"
-          size={24}
-          color={theme.buttonSecondaryText.val}
-        />
-      }
-      onPress={async () => {
-        await startDownload(props.url, props.type, props.media).catch(
-          console.error,
-        );
-      }}
-    >
-      test download
-      {props.type === "hls" ? " (hls)" : "(mp4)"}{" "}
-      {props.media.type === "show" ? "show" : "movie"}
-    </MWButton>
-  );
-};
-
 const DownloadsScreen: React.FC = () => {
+  const { startDownload } = useDownloadManager();
  const downloads = useDownloadHistoryStore((state) => state.downloads);
  const resetVideo = usePlayerStore((state) => state.resetVideo);
  const setVideoSrc = usePlayerStore((state) => state.setVideoSrc);
  const setIsLocalFile = usePlayerStore((state) => state.setIsLocalFile);
  const setPlayerStatus = usePlayerStore((state) => state.setPlayerStatus);
  const router = useRouter();
+  const theme = useTheme();

  useFocusEffect(
    React.useCallback(() => {
@@ -109,54 +55,85 @@ const DownloadsScreen: React.FC = () => {
    });
  };

+  const exampleShowMedia: ScrapeMedia = {
+    type: "show",
+    title: "Example Show Title",
+    releaseYear: 2022,
+    imdbId: "tt1234567",
+    tmdbId: "12345",
+    season: {
+      number: 1,
+      tmdbId: "54321",
+    },
+    episode: {
+      number: 3,
+      tmdbId: "98765",
+    },
+  };
+
  return (
    <ScreenLayout>
      <YStack gap={2} style={{ padding: 10 }}>
-        <TestDownloadButton
-          media={exampleMovieMedia}
-          type="mp4"
-          url="https://samplelib.com/lib/preview/mp4/sample-5s.mp4"
-        />
-        <TestDownloadButton
-          media={getExampleShowMedia(1, 1)}
-          type="mp4"
-          url="https://samplelib.com/lib/preview/mp4/sample-5s.mp4"
-        />
-        <TestDownloadButton
-          media={getExampleShowMedia(1, 2)}
-          type="mp4"
-          url="https://samplelib.com/lib/preview/mp4/sample-5s.mp4"
-        />
-        <TestDownloadButton
-          media={getExampleShowMedia(1, 1)}
-          type="hls"
-          url="http://sample.vodobox.com/skate_phantom_flex_4k/skate_phantom_flex_4k.m3u8"
-        />
+        <MWButton
+          type="secondary"
+          backgroundColor="$sheetItemBackground"
+          icon={
+            <MaterialCommunityIcons
+              name="download"
+              size={24}
+              color={theme.buttonSecondaryText.val}
+            />
+          }
+          onPress={async () => {
+            await startDownload(
+              "https://samplelib.com/lib/preview/mp4/sample-5s.mp4",
+              "mp4",
+              exampleShowMedia,
+            ).catch(console.error);
+          }}
+        >
+          test download (mp4)
+        </MWButton>
+        <MWButton
+          type="secondary"
+          backgroundColor="$sheetItemBackground"
+          icon={
+            <MaterialCommunityIcons
+              name="download"
+              size={24}
+              color={theme.buttonSecondaryText.val}
+            />
+          }
+          onPress={async () => {
+            await startDownload(
+              "http://sample.vodobox.com/skate_phantom_flex_4k/skate_phantom_flex_4k.m3u8",
+              "hls",
+              {
+                ...exampleShowMedia,
+                tmdbId: "123456",
+              },
+            ).catch(console.error);
+          }}
+        >
+          test download (hls)
+        </MWButton>
      </YStack>
      <ScrollView
        contentContainerStyle={{
          gap: "$4",
        }}
      >
-        {downloads.map((download) => {
-          if (download.downloads.length === 0) return null;
-          if (download.media.type === "movie") {
-            return (
-              <DownloadItem
-                key={download.media.tmdbId}
-                item={download.downloads[0]!}
-                onPress={() => handlePress(download.downloads[0]!.localPath)}
-              />
-            );
-          } else {
-            return (
-              <ShowDownloadItem
-                key={download.media.tmdbId}
-                download={download}
-              />
-            );
-          }
-        })}
+        {/* TODO: Differentiate movies/shows, shows in new page */}
+        {downloads
+          .map((item) => item.downloads)
+          .flat()
+          .map((item) => (
+            <DownloadItem
+              key={item.id}
+              item={item}
+              onPress={() => handlePress(item.localPath)}
+            />
+          ))}
      </ScrollView>
    </ScreenLayout>
  );
--- a/apps/expo/src/components/DownloadItem.tsx
+++ b/apps/expo/src/components/DownloadItem.tsx
@@ -3,12 +3,10 @@ import type { ContextMenuOnPressNativeEvent } from "react-native-context-menu-vi
 import React from "react";
 import ContextMenu from "react-native-context-menu-view";
 import { TouchableOpacity } from "react-native-gesture-handler";
-import { useRouter } from "expo-router";
 import { Image, Text, View, XStack, YStack } from "tamagui";

-import type { Download, DownloadContent } from "~/hooks/useDownloadManager";
+import type { Download } from "~/hooks/useDownloadManager";
 import { useDownloadManager } from "~/hooks/useDownloadManager";
-import { mapSeasonAndEpisodeNumberToText } from "./player/utils";
 import { MWProgress } from "./ui/Progress";
 import { FlashingText } from "./ui/Text";

@@ -103,11 +101,6 @@ export function DownloadItem(props: DownloadItemProps) {
          <YStack gap="$2">
            <XStack gap="$6" maxWidth="65%">
              <Text fontWeight="$bold" ellipse flexGrow={1}>
-                {props.item.media.type === "show" &&
-                  mapSeasonAndEpisodeNumberToText(
-                    props.item.media.season.number,
-                    props.item.media.episode.number,
-                  ) + " "}
                {props.item.media.title}
              </Text>
              {props.item.type !== "hls" && (
@@ -143,54 +136,3 @@ export function DownloadItem(props: DownloadItemProps) {
    </ContextMenu>
  );
 }
-
-export function ShowDownloadItem({ download }: { download: DownloadContent }) {
-  const router = useRouter();
-
-  return (
-    <TouchableOpacity
-      onPress={() =>
-        router.push({
-          pathname: "/(downloads)/[tmdbId]",
-          params: { tmdbId: download.media.tmdbId },
-        })
-      }
-      activeOpacity={0.7}
-    >
-      <XStack gap="$4" alignItems="center">
-        <View
-          aspectRatio={9 / 14}
-          width={70}
-          maxHeight={180}
-          overflow="hidden"
-          borderRadius="$2"
-        >
-          <Image
-            source={{
-              uri: "https://image.tmdb.org/t/p/original//or06FN3Dka5tukK1e9sl16pB3iy.jpg",
-            }}
-            width="100%"
-            height="100%"
-          />
-        </View>
-        <YStack gap="$2">
-          <YStack gap="$1">
-            <Text fontWeight="$bold" ellipse flexGrow={1} fontSize="$5">
-              {download.media.title}
-            </Text>
-            <Text fontSize="$2">
-              {download.downloads.length} Episode
-              {download.downloads.length > 1 ? "s" : ""} |{" "}
-              {formatBytes(
-                download.downloads.reduce(
-                  (acc, curr) => acc + curr.fileSize,
-                  0,
-                ),
-              )}
-            </Text>
-          </YStack>
-        </YStack>
-      </XStack>
-    </TouchableOpacity>
-  );
-}
--- a/apps/expo/src/components/item/item.tsx
+++ b/apps/expo/src/components/item/item.tsx
@@ -124,7 +124,6 @@ export default function Item({ data }: { data: ItemData }) {
            width="100%"
            overflow="hidden"
            borderRadius={24}
-            height="$14"
          >
            <Image source={{ uri: posterUrl }} width="100%" height="100%" />
          </View>
--- a/apps/expo/src/components/layout/Header.tsx
+++ b/apps/expo/src/components/layout/Header.tsx
@@ -1,4 +1,5 @@
 import { Linking } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import * as Haptics from "expo-haptics";
 import { FontAwesome6, MaterialIcons } from "@expo/vector-icons";
 import { Circle, View } from "tamagui";
@@ -7,13 +8,20 @@ import { DISCORD_LINK, GITHUB_LINK } from "~/constants/core";
 import { BrandPill } from "../BrandPill";

 export function Header() {
+  const insets = useSafeAreaInsets();
+
  return (
-    <View alignItems="center" gap="$3" flexDirection="row">
+    <View
+      paddingTop={insets.top}
+      alignItems="center"
+      gap="$3"
+      flexDirection="row"
+    >
      <BrandPill />

      <Circle
        backgroundColor="$pillBackground"
-        size="$3.5"
+        size="$4.5"
        pressStyle={{
          opacity: 1,
          scale: 1.05,
@@ -25,11 +33,11 @@ export function Header() {
          Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy)
        }
      >
-        <MaterialIcons name="discord" size={28} color="white" />
+        <MaterialIcons name="discord" size={32} color="white" />
      </Circle>
      <Circle
        backgroundColor="$pillBackground"
-        size="$3.5"
+        size="$4.5"
        pressStyle={{
          opacity: 1,
          scale: 1.05,
@@ -41,7 +49,7 @@ export function Header() {
          Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy)
        }
      >
-        <FontAwesome6 name="github" size={28} color="white" />
+        <FontAwesome6 name="github" size={32} color="white" />
      </Circle>
    </View>
  );
--- a/apps/expo/src/components/layout/ScreenLayout.tsx
+++ b/apps/expo/src/components/layout/ScreenLayout.tsx
@@ -1,4 +1,3 @@
-import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { ScrollView } from "tamagui";
 import { LinearGradient } from "tamagui/linear-gradient";

@@ -8,7 +7,6 @@ interface Props {
  children?: React.ReactNode;
  onScrollBeginDrag?: () => void;
  onMomentumScrollEnd?: () => void;
-  showHeader?: boolean;
  scrollEnabled?: boolean;
  keyboardDismissMode?: "none" | "on-drag" | "interactive";
  keyboardShouldPersistTaps?: "always" | "never" | "handled";
@@ -19,14 +17,11 @@ export default function ScreenLayout({
  children,
  onScrollBeginDrag,
  onMomentumScrollEnd,
-  showHeader = true,
  scrollEnabled,
  keyboardDismissMode,
  keyboardShouldPersistTaps,
  contentContainerStyle,
 }: Props) {
-  const insets = useSafeAreaInsets();
-
  return (
    <LinearGradient
      flex={1}
@@ -43,9 +38,8 @@ export default function ScreenLayout({
      start={[0, 0]}
      end={[1, 1]}
      flexGrow={1}
-      paddingTop={showHeader ? insets.top : insets.top + 50}
    >
-      {showHeader && <Header />}
+      <Header />
      <ScrollView
        onScrollBeginDrag={onScrollBeginDrag}
        onMomentumScrollEnd={onMomentumScrollEnd}
--- a/apps/expo/src/components/player/Header.tsx
+++ b/apps/expo/src/components/player/Header.tsx
@@ -4,7 +4,10 @@ import { usePlayerStore } from "~/stores/player/store";
 import { BrandPill } from "../BrandPill";
 import { BackButton } from "./BackButton";
 import { Controls } from "./Controls";
-import { mapSeasonAndEpisodeNumberToText } from "./utils";
+
+const mapSeasonAndEpisodeNumberToText = (season: number, episode: number) => {
+  return `S${season.toString().padStart(2, "0")}E${episode.toString().padStart(2, "0")}`;
+};

 export const Header = () => {
  const isIdle = usePlayerStore((state) => state.interface.isIdle);
--- a/apps/expo/src/components/player/utils.ts
+++ b/apps/expo/src/components/player/utils.ts
@@ -16,10 +16,3 @@ export const mapMillisecondsToTime = (milliseconds: number): string => {

  return formattedTime;
 };
-
-export const mapSeasonAndEpisodeNumberToText = (
-  season: number,
-  episode: number,
-) => {
-  return `S${season.toString().padStart(2, "0")}E${episode.toString().padStart(2, "0")}`;
-};
--- a/apps/expo/src/hooks/useDownloadManager.tsx
+++ b/apps/expo/src/hooks/useDownloadManager.tsx
@@ -1,10 +1,16 @@
-import type { DownloadProgressData } from "expo-file-system";
+import type { DownloadTask } from "@kesha-antonov/react-native-background-downloader";
 import type { Asset } from "expo-media-library";
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import * as FileSystem from "expo-file-system";
 import * as MediaLibrary from "expo-media-library";
 import * as Network from "expo-network";
 import { NetworkStateType } from "expo-network";
+import {
+  checkForExistingDownloads,
+  completeHandler,
+  download,
+  setConfig,
+} from "@kesha-antonov/react-native-background-downloader";
 import VideoManager from "@salihgun/react-native-video-processor";

 import type { ScrapeMedia } from "@movie-web/provider-utils";
@@ -16,6 +22,11 @@ import {
  useNetworkSettingsStore,
 } from "~/stores/settings";

+interface DownloadProgress {
+  bytesDownloaded: number;
+  bytesTotal: number;
+}
+
 export interface Download {
  id: string;
  progress: number;
@@ -33,7 +44,7 @@ export interface Download {
    | "importing";
  localPath?: string;
  media: ScrapeMedia;
-  downloadTask?: FileSystem.DownloadResumable;
+  downloadTask?: DownloadTask;
 }

 export interface DownloadContent {
@@ -41,6 +52,12 @@ export interface DownloadContent {
  downloads: Download[];
 }

+// @ts-expect-error - types are not up to date
+setConfig({
+  isLogsEnabled: false,
+  progressInterval: 250,
+});
+
 export const useDownloadManager = () => {
  const cancellationFlags = useState<Record<string, boolean>>({})[0];

@@ -59,10 +76,10 @@ export const useDownloadManager = () => {
    [cancellationFlags],
  );

-  const cancelDownload = async (download: Download) => {
+  const cancelDownload = (download: Download) => {
    setCancellationFlag(download.id, true);
    if (download?.downloadTask) {
-      await download.downloadTask.cancelAsync();
+      download.downloadTask.stop();
    }
    showToast("Download cancelled", {
      burntOptions: { preset: "done" },
@@ -124,97 +141,112 @@ export const useDownloadManager = () => {
    [setDownloads],
  );

-  const saveFileToMediaLibraryAndDeleteOriginal = async (
-    fileUri: string,
-    download: Download,
-  ): Promise<Asset | void> => {
-    console.log("Saving file to media library and deleting original", fileUri);
-    try {
-      updateDownloadItem(download.id, { status: "importing" });
+  const saveFileToMediaLibraryAndDeleteOriginal = useCallback(
+    async (fileUri: string, download: Download): Promise<Asset | void> => {
+      console.log(
+        "Saving file to media library and deleting original",
+        fileUri,
+      );
+      try {
+        updateDownloadItem(download.id, { status: "importing" });

-      const asset = await MediaLibrary.createAssetAsync(fileUri);
-      const { localUri } = await MediaLibrary.getAssetInfoAsync(asset);
-      await FileSystem.deleteAsync(fileUri);
+        const asset = await MediaLibrary.createAssetAsync(fileUri);
+        const { localUri } = await MediaLibrary.getAssetInfoAsync(asset);
+        await FileSystem.deleteAsync(fileUri);

-      updateDownloadItem(download.id, {
-        status: "finished",
-        localPath: localUri,
-      });
-      console.log("File saved to media library and original deleted");
-      showToast("Download finished", {
-        burntOptions: { preset: "done" },
-      });
-      return asset;
-    } catch (error) {
-      console.error("Error saving file to media library:", error);
-      showToast("Download failed", {
-        burntOptions: { preset: "error" },
-      });
-    }
-  };
-
-  const downloadMP4 = async (
-    url: string,
-    downloadItem: Download,
-    headers: Record<string, string>,
-  ): Promise<Asset | void> => {
-    let lastBytesWritten = 0;
-    let lastTimestamp = Date.now();
-
-    const updateProgress = (downloadProgress: DownloadProgressData) => {
-      const currentTime = Date.now();
-      const timeElapsed = (currentTime - lastTimestamp) / 1000;
-
-      if (timeElapsed === 0) return;
-
-      const newBytes = downloadProgress.totalBytesWritten - lastBytesWritten;
-      const speed = newBytes / timeElapsed / 1024 / 1024;
-      const progress =
-        downloadProgress.totalBytesWritten /
-        downloadProgress.totalBytesExpectedToWrite;
-
-      updateDownloadItem(downloadItem.id, {
-        progress,
-        speed,
-        fileSize: downloadProgress.totalBytesExpectedToWrite,
-        downloaded: downloadProgress.totalBytesWritten,
-      });
-
-      lastBytesWritten = downloadProgress.totalBytesWritten;
-      lastTimestamp = currentTime;
-    };
-
-    const fileUri =
-      FileSystem.cacheDirectory + "movie-web"
-        ? FileSystem.cacheDirectory + "movie-web" + url.split("/").pop()
-        : null;
-    if (!fileUri) {
-      console.error("Cache directory is unavailable");
-      return;
-    }
-
-    const downloadResumable = FileSystem.createDownloadResumable(
-      url,
-      fileUri,
-      {
-        headers,
-      },
-      updateProgress,
-    );
-
-    try {
-      const result = await downloadResumable.downloadAsync();
-      if (result) {
-        console.log("Finished downloading to ", result.uri);
-        return saveFileToMediaLibraryAndDeleteOriginal(
-          result.uri,
-          downloadItem,
-        );
+        updateDownloadItem(download.id, {
+          status: "finished",
+          localPath: localUri,
+        });
+        console.log("File saved to media library and original deleted");
+        showToast("Download finished", {
+          burntOptions: { preset: "done" },
+        });
+        return asset;
+      } catch (error) {
+        console.error("Error saving file to media library:", error);
+        showToast("Download failed", {
+          burntOptions: { preset: "error" },
+        });
      }
-    } catch (e) {
-      console.error(e);
-    }
-  };
+    },
+    [updateDownloadItem, showToast],
+  );
+
+  const downloadMP4 = useCallback(
+    (
+      url: string,
+      downloadItem: Download,
+      headers: Record<string, string>,
+    ): Promise<Asset> => {
+      return new Promise<Asset>((resolve, reject) => {
+        let lastBytesWritten = 0;
+        let lastTimestamp = Date.now();
+
+        const updateProgress = (downloadProgress: DownloadProgress) => {
+          const currentTime = Date.now();
+          const timeElapsed = (currentTime - lastTimestamp) / 1000;
+
+          if (timeElapsed === 0) return;
+
+          const newBytes = downloadProgress.bytesDownloaded - lastBytesWritten;
+          const speed = newBytes / timeElapsed / 1024 / 1024;
+          const progress =
+            downloadProgress.bytesDownloaded / downloadProgress.bytesTotal;
+
+          updateDownloadItem(downloadItem.id, {
+            progress,
+            speed,
+            fileSize: downloadProgress.bytesTotal,
+            downloaded: downloadProgress.bytesDownloaded,
+          });
+
+          lastBytesWritten = downloadProgress.bytesDownloaded;
+          lastTimestamp = currentTime;
+        };
+
+        const fileUri =
+          FileSystem.cacheDirectory + "movie-web"
+            ? FileSystem.cacheDirectory + "movie-web" + url.split("/").pop()
+            : null;
+        if (!fileUri) {
+          console.error("Cache directory is unavailable");
+          reject(new Error("Cache directory is unavailable"));
+          return;
+        }
+
+        const downloadTask = download({
+          id: downloadItem.id,
+          url,
+          destination: fileUri,
+          headers,
+          isNotificationVisible: true,
+        })
+          .begin(() => {
+            updateDownloadItem(downloadItem.id, { downloadTask });
+          })
+          .progress(({ bytesDownloaded, bytesTotal }) => {
+            updateProgress({ bytesDownloaded, bytesTotal });
+          })
+          .done(() => {
+            saveFileToMediaLibraryAndDeleteOriginal(fileUri, downloadItem)
+              .then((asset) => {
+                if (asset) {
+                  resolve(asset);
+                } else {
+                  reject(new Error("No asset returned"));
+                }
+              })
+              .catch((error) => reject(error));
+          })
+          .error(({ error, errorCode }) => {
+            console.error(`Download error: ${errorCode} - ${error}`);
+            reject(new Error(`Download error: ${errorCode} - ${error}`));
+          });
+      });
+    },
+    [saveFileToMediaLibraryAndDeleteOriginal, updateDownloadItem],
+  );

  const cleanupDownload = useCallback(
    async (segmentDir: string, download: Download) => {
@@ -224,184 +256,202 @@ export const useDownloadManager = () => {
    [removeDownload],
  );

-  const downloadHLS = async (
-    url: string,
-    download: Download,
-    headers: Record<string, string>,
-  ) => {
-    const segments = await extractSegmentsFromHLS(url, headers);
+  const downloadHLS = useCallback(
+    async (
+      url: string,
+      download: Download,
+      headers: Record<string, string>,
+    ) => {
+      const segments = await extractSegmentsFromHLS(url, headers);

-    if (!segments || segments.length === 0) {
-      return removeDownload(download);
-    }
+      if (!segments || segments.length === 0) {
+        return removeDownload(download);
+      }

-    const totalSegments = segments.length;
-    let segmentsDownloaded = 0;
+      const totalSegments = segments.length;
+      let segmentsDownloaded = 0;

-    const segmentDir = FileSystem.cacheDirectory + "movie-web/segments/";
-    await ensureDirExists(segmentDir);
+      const segmentDir = FileSystem.cacheDirectory + "movie-web/segments/";
+      await ensureDirExists(segmentDir);

-    const updateProgress = () => {
-      const progress = segmentsDownloaded / totalSegments;
-      updateDownloadItem(download.id, {
-        progress,
-        downloaded: segmentsDownloaded,
-        fileSize: totalSegments,
-      });
-    };
+      const updateProgress = () => {
+        const progress = segmentsDownloaded / totalSegments;
+        updateDownloadItem(download.id, {
+          progress,
+          downloaded: segmentsDownloaded,
+          fileSize: totalSegments,
+        });
+      };

-    const localSegmentPaths = [];
+      const localSegmentPaths = [];
+
+      for (const [index, segment] of segments.entries()) {
+        if (getCancellationFlag(download.id)) {
+          await cleanupDownload(segmentDir, download);
+          return;
+        }
+
+        const segmentFile = `${segmentDir}${index}.ts`;
+        localSegmentPaths.push(segmentFile);
+
+        try {
+          await downloadSegment(download.id, segment, segmentFile, headers);
+
+          if (getCancellationFlag(download.id)) {
+            await cleanupDownload(segmentDir, download);
+            return;
+          }
+
+          segmentsDownloaded++;
+          updateProgress();
+        } catch (e) {
+          console.error(e);
+          if (getCancellationFlag(download.id)) {
+            await cleanupDownload(segmentDir, download);
+            return;
+          }
+        }
+      }

-    for (const [index, segment] of segments.entries()) {
      if (getCancellationFlag(download.id)) {
-        await cleanupDownload(segmentDir, download);
+        return removeDownload(download);
+      }
+
+      updateDownloadItem(download.id, { status: "merging" });
+      const uri = await VideoManager.mergeVideos(
+        localSegmentPaths,
+        `${FileSystem.cacheDirectory}movie-web/output.mp4`,
+      );
+      const asset = await saveFileToMediaLibraryAndDeleteOriginal(
+        uri,
+        download,
+      );
+      return asset;
+    },
+    [
+      cleanupDownload,
+      getCancellationFlag,
+      removeDownload,
+      saveFileToMediaLibraryAndDeleteOriginal,
+      updateDownloadItem,
+    ],
+  );
+
+  const startDownload = useCallback(
+    async (
+      url: string,
+      type: "mp4" | "hls",
+      media: ScrapeMedia,
+      headers?: Record<string, string>,
+    ): Promise<Asset | void> => {
+      const { allowMobileData } = useNetworkSettingsStore.getState();
+
+      const { type: networkType } = await Network.getNetworkStateAsync();
+
+      if (networkType === NetworkStateType.CELLULAR && !allowMobileData) {
+        showToast("Mobile data downloads are disabled", {
+          burntOptions: { preset: "error" },
+        });
        return;
      }

-      const segmentFile = `${segmentDir}${index}.ts`;
-      localSegmentPaths.push(segmentFile);
-
-      try {
-        await downloadSegment(segment, segmentFile, headers);
-
-        if (getCancellationFlag(download.id)) {
-          await cleanupDownload(segmentDir, download);
-          return;
-        }
-
-        segmentsDownloaded++;
-        updateProgress();
-      } catch (e) {
-        console.error(e);
-        if (getCancellationFlag(download.id)) {
-          await cleanupDownload(segmentDir, download);
-          return;
-        }
+      const { status } = await MediaLibrary.requestPermissionsAsync();
+      if (status !== MediaLibrary.PermissionStatus.GRANTED) {
+        showToast("Permission denied", {
+          burntOptions: { preset: "error" },
+        });
+        return;
      }
-    }

-    if (getCancellationFlag(download.id)) {
-      return removeDownload(download);
-    }
-
-    updateDownloadItem(download.id, { status: "merging" });
-    const uri = await VideoManager.mergeVideos(
-      localSegmentPaths,
-      `${FileSystem.cacheDirectory}movie-web/output.mp4`,
-    );
-    const asset = await saveFileToMediaLibraryAndDeleteOriginal(uri, download);
-    return asset;
-  };
-
-  const startDownload = async (
-    url: string,
-    type: "mp4" | "hls",
-    media: ScrapeMedia,
-    headers?: Record<string, string>,
-  ): Promise<Asset | void> => {
-    const { allowMobileData } = useNetworkSettingsStore.getState();
-
-    const { type: networkType } = await Network.getNetworkStateAsync();
-
-    if (networkType === NetworkStateType.CELLULAR && !allowMobileData) {
-      showToast("Mobile data downloads are disabled", {
-        burntOptions: { preset: "error" },
-      });
-      return;
-    }
-
-    const { status } = await MediaLibrary.requestPermissionsAsync();
-    if (status !== MediaLibrary.PermissionStatus.GRANTED) {
-      showToast("Permission denied", {
-        burntOptions: { preset: "error" },
-      });
-      return;
-    }
-
-    const existingDownload = downloads.find(
-      (d) => d.media.tmdbId === media.tmdbId,
-    );
-
-    if (existingDownload && media.type === "movie") {
-      showToast("Download already exists", {
-        burntOptions: { preset: "error" },
-      });
-      return;
-    }
-
-    if (existingDownload && media.type === "show") {
-      const existingEpisode = existingDownload.downloads.find(
-        (d) =>
-          d.media.type === "show" &&
-          d.media.episode.tmdbId === media.episode.tmdbId,
+      const existingDownload = downloads.find(
+        (d) => d.media.tmdbId === media.tmdbId,
      );

-      if (existingEpisode) {
+      if (existingDownload && media.type === "movie") {
        showToast("Download already exists", {
          burntOptions: { preset: "error" },
        });
        return;
      }
-    }
-    showToast("Download started", {
-      burntOptions: { preset: "none" },
-    });

-    const newDownload: Download = {
-      id: `download-${Date.now()}-${Math.random().toString(16).slice(2)}`,
-      progress: 0,
-      speed: 0,
-      fileSize: 0,
-      downloaded: 0,
-      type,
-      url,
-      status: "downloading",
-      media,
-    };
-
-    if (existingDownload) {
-      existingDownload.downloads.push(newDownload);
-      setDownloads((prev) => {
-        return prev.map((d) =>
-          d.media.tmdbId === media.tmdbId ? existingDownload : d,
+      if (existingDownload && media.type === "show") {
+        const existingEpisode = existingDownload.downloads.find(
+          (d) =>
+            d.media.type === "show" &&
+            d.media.episode.tmdbId === media.episode.tmdbId,
        );
-      });
-    } else {
-      setDownloads((prev) => {
-        return [...prev, { media, downloads: [newDownload] }];
-      });
-    }

-    if (type === "mp4") {
-      const asset = await downloadMP4(url, newDownload, headers ?? {});
-      return asset;
-    } else if (type === "hls") {
-      const asset = await downloadHLS(url, newDownload, headers ?? {});
-      return asset;
-    }
-  };
+        if (existingEpisode) {
+          showToast("Download already exists", {
+            burntOptions: { preset: "error" },
+          });
+          return;
+        }
+      }
+      showToast("Download started", {
+        burntOptions: { preset: "none" },
+      });
+
+      const newDownload: Download = {
+        id: `download-${Date.now()}-${Math.random().toString(16).slice(2)}`,
+        progress: 0,
+        speed: 0,
+        fileSize: 0,
+        downloaded: 0,
+        type,
+        url,
+        status: "downloading",
+        media,
+      };
+
+      const newDownloadContent = existingDownload
+        ? {
+            ...existingDownload,
+            downloads: [newDownload, ...existingDownload.downloads],
+          }
+        : {
+            media,
+            downloads: [newDownload],
+          };
+
+      setDownloads((prev) => {
+        return [...prev, newDownloadContent];
+      });
+
+      if (type === "mp4") {
+        const asset = await downloadMP4(url, newDownload, headers ?? {});
+        return asset;
+      } else if (type === "hls") {
+        const asset = await downloadHLS(url, newDownload, headers ?? {});
+        return asset;
+      }
+    },
+    [downloadHLS, downloadMP4, downloads, setDownloads, showToast],
+  );

  const downloadSegment = async (
+    downloadId: string,
    segmentUrl: string,
    segmentFile: string,
    headers: Record<string, string>,
  ) => {
-    const downloadResumable = FileSystem.createDownloadResumable(
-      segmentUrl,
-      segmentFile,
-      {
-        headers,
-      },
-    );
+    return new Promise<void>((resolve, reject) => {
+      const task = download({
+        id: `${downloadId}-${segmentUrl.split("/").pop()}`,
+        url: segmentUrl,
+        destination: segmentFile,
+        headers: headers,
+      });

-    try {
-      const result = await downloadResumable.downloadAsync();
-      if (result) {
-        console.log("Finished downloading to ", result.uri);
-      }
-    } catch (e) {
-      console.error(e);
-    }
+      task
+        .done(() => {
+          resolve();
+        })
+        .error((error) => {
+          console.error(error);
+          reject(error);
+        });
+    });
  };

  async function ensureDirExists(dir: string) {
@@ -409,6 +459,27 @@ export const useDownloadManager = () => {
    await FileSystem.makeDirectoryAsync(dir, { intermediates: true });
  }

+  useEffect(() => {
+    const checkRunningTasks = async () => {
+      const existingTasks = await checkForExistingDownloads();
+      existingTasks.forEach((task) => {
+        task
+          .progress(({ bytesDownloaded, bytesTotal }) => {
+            const progress = bytesDownloaded / bytesTotal;
+            updateDownloadItem(task.id, { progress });
+          })
+          .done(() => {
+            completeHandler(task.id);
+          })
+          .error(({ error, errorCode }) => {
+            console.error(`Download error: ${errorCode} - ${error}`);
+          });
+      });
+    };
+
+    void checkRunningTasks();
+  }, [updateDownloadItem]);
+
  return {
    startDownload,
    removeDownload,
--- a/apps/expo/src/plugins/withRNBackgroundDownloader.js
+++ b/apps/expo/src/plugins/withRNBackgroundDownloader.js
@@ -0,0 +1,48 @@
+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;
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -29,6 +29,9 @@ importers:
      '@expo/metro-config':
        specifier: ^0.17.3
        version: 0.17.3(@react-native/babel-preset@0.73.21)
+      '@kesha-antonov/react-native-background-downloader':
+        specifier: ^3.1.2
+        version: 3.1.2(react-native@0.73.6)
      '@movie-web/api':
        specifier: '*'
        version: link:../../packages/api
@@ -2839,6 +2842,14 @@ packages:
      '@jridgewell/sourcemap-codec': 1.4.15
    dev: true

+  /@kesha-antonov/react-native-background-downloader@3.1.2(react-native@0.73.6):
+    resolution: {integrity: sha512-xBs1DyGOdGCSI7mfE7cT7V1Ecv6G99A4zh08o0q7/DXOqttX4tymiTQNuWQxW2dMe7clOHGjzeW1BLYwofSYNw==}
+    peerDependencies:
+      react-native: '>=0.57.0'
+    dependencies:
+      react-native: 0.73.6(@babel/core@7.23.9)(@babel/preset-env@7.23.9)(react@18.2.0)
+    dev: false
+
  /@motionone/animation@10.17.0:
    resolution: {integrity: sha512-ANfIN9+iq1kGgsZxs+Nz96uiNcPLGTXwfNo2Xz/fcJXniPYpaz/Uyrfa+7I5BPLxCP82sh7quVDudf1GABqHbg==}
    dependencies: