wip

2024-09-28 15:45:00 +02:00
parent 79020c357f
commit 41a23d3437
18 changed files with 806 additions and 783 deletions
--- a/components/DownloadItem.tsx
+++ b/components/DownloadItem.tsx
@@ -1,6 +1,6 @@
 import { useRemuxHlsToMp4 } from "@/hooks/useRemuxHlsToMp4";
+import { useDownload } from "@/providers/DownloadProvider";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { runningProcesses } from "@/utils/atoms/downloads";
 import { queueActions, queueAtom } from "@/utils/atoms/queue";
 import { useSettings } from "@/utils/atoms/settings";
 import ios from "@/utils/profiles/ios";
@@ -17,8 +17,6 @@ import {
  BaseItemDto,
  MediaSourceInfo,
 } from "@jellyfin/sdk/lib/generated-client/models";
-import AsyncStorage from "@react-native-async-storage/async-storage";
-import { useQuery } from "@tanstack/react-query";
 import { router } from "expo-router";
 import { useAtom } from "jotai";
 import { useCallback, useMemo, useRef, useState } from "react";
@@ -31,8 +29,6 @@ import { Loader } from "./Loader";
 import { MediaSourceSelector } from "./MediaSourceSelector";
 import ProgressCircle from "./ProgressCircle";
 import { SubtitleTrackSelector } from "./SubtitleTrackSelector";
-import { useDownloadM3U8Files } from "@/hooks/useDownloadM3U8Files";
-import * as FileSystem from "expo-file-system";

 interface DownloadProps extends ViewProps {
  item: BaseItemDto;
@@ -41,12 +37,10 @@ interface DownloadProps extends ViewProps {
 export const DownloadItem: React.FC<DownloadProps> = ({ item, ...props }) => {
  const [api] = useAtom(apiAtom);
  const [user] = useAtom(userAtom);
-  const [process] = useAtom(runningProcesses);
  const [queue, setQueue] = useAtom(queueAtom);
  const [settings] = useSettings();
-  // const { startRemuxing } = useRemuxHlsToMp4(item);
-
-  const { startBackgroundDownload } = useDownloadM3U8Files(item);
+  const { process, startBackgroundDownload } = useDownload();
+  const { startRemuxing, cancelRemuxing } = useRemuxHlsToMp4(item);

  const [selectedMediaSource, setSelectedMediaSource] =
    useState<MediaSourceInfo | null>(null);
@@ -157,7 +151,14 @@ export const DownloadItem: React.FC<DownloadProps> = ({ item, ...props }) => {

    if (!url) throw new Error("No url");

-    return await startBackgroundDownload(url);
+    if (
+      settings?.optimizedVersionsServerUrl &&
+      settings.optimizedVersionsServerUrl.length > 0
+    ) {
+      return await startBackgroundDownload(url, item);
+    } else {
+      return await startRemuxing(url);
+    }
  }, [
    api,
    item,
@@ -172,42 +173,13 @@ export const DownloadItem: React.FC<DownloadProps> = ({ item, ...props }) => {
  /**
   * Check if item is downloaded
   */
-  const { data: downloaded, isFetching } = useQuery({
-    queryKey: ["downloaded", item.Id],
-    queryFn: async () => {
-      if (!item.Id) {
-        return false;
-      }
+  const { downloadedFiles } = useDownload();

-      try {
-        // Check if the item exists in AsyncStorage
-        const downloadedItems = await AsyncStorage.getItem("downloadedItems");
-        const items: BaseItemDto[] = downloadedItems
-          ? JSON.parse(downloadedItems)
-          : [];
-        const isInStorage = items.some(
-          (storedItem) => storedItem.Id === item.Id
-        );
+  const isDownloaded = useMemo(() => {
+    if (!downloadedFiles) return false;

-        if (!isInStorage) {
-          return false;
-        }
-
-        // Check if the directory and m3u8 file exist
-        const directoryPath = `${FileSystem.documentDirectory}${item.Id}`;
-        const m3u8FilePath = `${directoryPath}/local.m3u8`;
-
-        const dirInfo = await FileSystem.getInfoAsync(directoryPath);
-        const fileInfo = await FileSystem.getInfoAsync(m3u8FilePath);
-
-        return dirInfo.exists && fileInfo.exists;
-      } catch (error) {
-        console.error("Error checking download status:", error);
-        return false;
-      }
-    },
-    enabled: !!item.Id,
-  });
+    return downloadedFiles.some((file) => file.Id === item.Id);
+  }, [downloadedFiles, item.Id]);

  const renderBackdrop = useCallback(
    (props: BottomSheetBackdropProps) => (
@@ -225,9 +197,7 @@ export const DownloadItem: React.FC<DownloadProps> = ({ item, ...props }) => {
      className="bg-neutral-800/80 rounded-full h-10 w-10 flex items-center justify-center"
      {...props}
    >
-      {isFetching ? (
-        <Loader />
-      ) : process && process?.item.Id === item.Id ? (
+      {process && process?.item.Id === item.Id ? (
        <TouchableOpacity
          onPress={() => {
            router.push("/downloads");
@@ -255,7 +225,7 @@ export const DownloadItem: React.FC<DownloadProps> = ({ item, ...props }) => {
        >
          <Ionicons name="hourglass" size={24} color="white" />
        </TouchableOpacity>
-      ) : downloaded ? (
+      ) : isDownloaded ? (
        <TouchableOpacity
          onPress={() => {
            router.push("/downloads");
@@ -315,9 +285,13 @@ export const DownloadItem: React.FC<DownloadProps> = ({ item, ...props }) => {
              className="mt-auto"
              onPress={() => {
                if (userCanDownload === true) {
+                  if (!item.Id) {
+                    Alert.alert("Error", "Item ID is undefined.");
+                    return;
+                  }
                  closeModal();
                  queueActions.enqueue(queue, setQueue, {
-                    id: item.Id!,
+                    id: item.Id,
                    execute: async () => {
                      await initiateDownload();
                    },
--- a/components/downloads/ActiveDownload.tsx
+++ b/components/downloads/ActiveDownload.tsx
@@ -0,0 +1,83 @@
+import { TouchableOpacity, View, ViewProps } from "react-native";
+import { Text } from "@/components/common/Text";
+import { useRouter } from "expo-router";
+import { checkForExistingDownloads } from "@kesha-antonov/react-native-background-downloader";
+import { Ionicons } from "@expo/vector-icons";
+import { useEffect, useState } from "react";
+import { useDownload } from "@/providers/DownloadProvider";
+import { useMutation } from "@tanstack/react-query";
+import axios from "axios";
+import { toast } from "sonner-native";
+import { useSettings } from "@/utils/atoms/settings";
+
+interface Props extends ViewProps {}
+
+export const ActiveDownload: React.FC<Props> = ({ ...props }) => {
+  const router = useRouter();
+  const { clearProcess, process } = useDownload();
+  const [settings] = useSettings();
+
+  const cancelJobMutation = useMutation({
+    mutationFn: async (id: string) => {
+      if (!process) return;
+
+      await axios.delete(settings?.optimizedVersionsServerUrl + id);
+      const tasks = await checkForExistingDownloads();
+      for (const task of tasks) task.stop();
+      clearProcess();
+    },
+    onSuccess: () => {
+      toast.success("Download cancelled");
+    },
+    onError: () => {
+      toast.error("Failed to cancel download");
+    },
+  });
+
+  if (!process)
+    return (
+      <View {...props}>
+        <Text className="text-2xl font-bold mb-2">Active download</Text>
+        <Text className="opacity-50">No active downloads</Text>
+      </View>
+    );
+
+  return (
+    <View {...props}>
+      <Text className="text-2xl font-bold mb-2">Active download</Text>
+      <TouchableOpacity
+        onPress={() => router.push(`/(auth)/items/page?id=${process.item.Id}`)}
+        className="relative bg-neutral-900 border border-neutral-800 rounded-2xl overflow-hidden"
+      >
+        <View
+          className={`
+            bg-purple-600 h-1 absolute bottom-0 left-0
+            `}
+          style={{
+            width: process.progress
+              ? `${Math.max(5, process.progress)}%`
+              : "5%",
+          }}
+        ></View>
+        <View className="p-4 flex flex-row items-center justify-between w-full">
+          <View>
+            <Text className="font-semibold">{process.item.Name}</Text>
+            <Text className="text-xs opacity-50">{process.item.Id}</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 className="flex flex-row items-center space-x-2 mt-1 text-purple-600">
+              <Text className="text-xs capitalize">{process.state}</Text>
+            </View>
+          </View>
+          <TouchableOpacity
+            onPress={() => cancelJobMutation.mutate(process.id)}
+          >
+            <Ionicons name="close" size={24} color="red" />
+          </TouchableOpacity>
+        </View>
+      </TouchableOpacity>
+    </View>
+  );
+};
--- a/components/downloads/EpisodeCard.tsx
+++ b/components/downloads/EpisodeCard.tsx
@@ -5,8 +5,8 @@ import { TouchableOpacity } from "react-native";
 import * as ContextMenu from "zeego/context-menu";

 import { useFileOpener } from "@/hooks/useDownloadedFileOpener";
-import { useFiles } from "@/hooks/useFiles";
 import { Text } from "../common/Text";
+import { useDownload } from "@/providers/DownloadProvider";

 interface EpisodeCardProps {
  item: BaseItemDto;
@@ -18,7 +18,7 @@ interface EpisodeCardProps {
 * @returns {React.ReactElement} The rendered EpisodeCard component.
 */
 export const EpisodeCard: React.FC<EpisodeCardProps> = ({ item }) => {
-  const { deleteFile } = useFiles();
+  const { deleteFile } = useDownload();
  const { openFile } = useFileOpener();

  const handleOpenFile = useCallback(() => {
--- a/components/downloads/MovieCard.tsx
+++ b/components/downloads/MovieCard.tsx
@@ -4,11 +4,11 @@ import React, { useCallback } from "react";
 import { TouchableOpacity, View } from "react-native";
 import * as ContextMenu from "zeego/context-menu";

-import { useFiles } from "@/hooks/useFiles";
 import { runtimeTicksToMinutes } from "@/utils/time";
 import { Text } from "../common/Text";

 import { useFileOpener } from "@/hooks/useDownloadedFileOpener";
+import { useDownload } from "@/providers/DownloadProvider";

 interface MovieCardProps {
  item: BaseItemDto;
@@ -20,7 +20,7 @@ interface MovieCardProps {
 * @returns {React.ReactElement} The rendered MovieCard component.
 */
 export const MovieCard: React.FC<MovieCardProps> = ({ item }) => {
-  const { deleteFile } = useFiles();
+  const { deleteFile } = useDownload();
  const { openFile } = useFileOpener();

  const handleOpenFile = useCallback(() => {
--- a/components/settings/SettingToggles.tsx
+++ b/components/settings/SettingToggles.tsx
@@ -33,6 +33,8 @@ export const SettingToggles: React.FC<Props> = ({ ...props }) => {
  const [user] = useAtom(userAtom);

  const [marlinUrl, setMarlinUrl] = useState<string>("");
+  const [optimizedVersionsServerUrl, setOptimizedVersionsServerUrl] =
+    useState<string>("");

  const queryClient = useQueryClient();

@@ -308,9 +310,9 @@ export const SettingToggles: React.FC<Props> = ({ ...props }) => {

          <View
            className={`
-        flex flex-row items-center space-x-2 justify-between bg-neutral-900 p-4
-        ${settings.forceDirectPlay ? "opacity-50 select-none" : ""}
-      `}
+              flex flex-row items-center space-x-2 justify-between bg-neutral-900 p-4
+              ${settings.forceDirectPlay ? "opacity-50 select-none" : ""}
+            `}
          >
            <View className="flex flex-col shrink">
              <Text className="font-semibold">Device profile</Text>
@@ -362,6 +364,7 @@ export const SettingToggles: React.FC<Props> = ({ ...props }) => {
              </DropdownMenu.Content>
            </DropdownMenu.Root>
          </View>
+
          <View className="flex flex-col">
            <View
              className={`
@@ -413,38 +416,90 @@ export const SettingToggles: React.FC<Props> = ({ ...props }) => {
            </View>
            {settings.searchEngine === "Marlin" && (
              <View className="flex flex-col bg-neutral-900 px-4 pb-4">
-                <>
-                  <View className="flex flex-row items-center space-x-2">
-                    <View className="grow">
-                      <Input
-                        placeholder="Marlin Server URL..."
-                        defaultValue={settings.marlinServerUrl}
-                        value={marlinUrl}
-                        keyboardType="url"
-                        returnKeyType="done"
-                        autoCapitalize="none"
-                        textContentType="URL"
-                        onChangeText={(text) => setMarlinUrl(text)}
-                      />
-                    </View>
-                    <Button
-                      color="purple"
-                      className="shrink w-16 h-12"
-                      onPress={() => {
-                        updateSettings({ marlinServerUrl: marlinUrl });
-                      }}
-                    >
-                      Save
-                    </Button>
+                <View className="flex flex-row items-center space-x-2">
+                  <View className="grow">
+                    <Input
+                      placeholder="Marlin Server URL..."
+                      defaultValue={settings.marlinServerUrl}
+                      value={marlinUrl}
+                      keyboardType="url"
+                      returnKeyType="done"
+                      autoCapitalize="none"
+                      textContentType="URL"
+                      onChangeText={(text) => setMarlinUrl(text)}
+                    />
                  </View>
+                  <Button
+                    color="purple"
+                    className="shrink w-16 h-12"
+                    onPress={() => {
+                      updateSettings({
+                        marlinServerUrl: marlinUrl.endsWith("/")
+                          ? marlinUrl
+                          : marlinUrl + "/",
+                      });
+                    }}
+                  >
+                    Save
+                  </Button>
+                </View>

+                {settings.marlinServerUrl && (
                  <Text className="text-neutral-500 mt-2">
-                    {settings.marlinServerUrl}
+                    Current: {settings.marlinServerUrl}
                  </Text>
-                </>
+                )}
              </View>
            )}
          </View>
+          <View className="flex flex-col bg-neutral-900 px-4 py-4">
+            <View className="flex flex-col shrink mb-2">
+              <Text className="font-semibold">Optimized versions server</Text>
+              <Text className="text-xs opacity-50">
+                Set the URL for the optimized versions server for downloads.
+              </Text>
+            </View>
+            <View className="flex flex-row items-center space-x-2">
+              <View className="grow">
+                <Input
+                  placeholder="Optimized versions server URL..."
+                  defaultValue={
+                    settings.optimizedVersionsServerUrl
+                      ? settings.optimizedVersionsServerUrl
+                      : ""
+                  }
+                  value={optimizedVersionsServerUrl}
+                  keyboardType="url"
+                  returnKeyType="done"
+                  autoCapitalize="none"
+                  textContentType="URL"
+                  onChangeText={(text) => setOptimizedVersionsServerUrl(text)}
+                />
+              </View>
+              <Button
+                color="purple"
+                className="shrink w-16 h-12"
+                onPress={() => {
+                  updateSettings({
+                    optimizedVersionsServerUrl:
+                      optimizedVersionsServerUrl.length === 0
+                        ? null
+                        : optimizedVersionsServerUrl.endsWith("/")
+                        ? optimizedVersionsServerUrl
+                        : optimizedVersionsServerUrl + "/",
+                  });
+                }}
+              >
+                Save
+              </Button>
+            </View>
+
+            {settings.optimizedVersionsServerUrl && (
+              <Text className="text-neutral-500 mt-2">
+                Current: {settings.optimizedVersionsServerUrl}
+              </Text>
+            )}
+          </View>
        </View>
      </View>
    </View>