wip

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

@@ -1,39 +1,103 @@
 import { Text } from "@/components/common/Text";
+import { DownloadInfo } from "@/modules/hls-downloader/src/HlsDownloader.types";
 import { useNativeDownloads } from "@/providers/NativeDownloadProvider";
 import { useRouter } from "expo-router";
 import { useEffect } from "react";
-import { TouchableOpacity, View } from "react-native";
+import { ActivityIndicator, TouchableOpacity, View } from "react-native";
 
-export default function index() {
-  const { downloadedFiles, getDownloadedItem, activeDownloads } =
-    useNativeDownloads();
+const PROGRESSBAR_HEIGHT = 10;
+
+const formatETA = (seconds: number): string => {
+  const pad = (n: number) => n.toString().padStart(2, "0");
+  const hrs = Math.floor(seconds / 3600);
+  const mins = Math.floor((seconds % 3600) / 60);
+  const secs = Math.floor(seconds % 60);
+  return `${pad(hrs)}:${pad(mins)}:${pad(secs)}`;
+};
+
+const getETA = (download: DownloadInfo): string | null => {
+  console.log("getETA", download);
+  if (
+    !download.startTime ||
+    !download.bytesDownloaded ||
+    !download.bytesTotal
+  ) {
+    console.log(download);
+    return null;
+  }
+
+  const elapsed = Date.now() / 100 - download.startTime; // seconds
+
+  console.log("Elapsed (s):", Number(download.startTime), Date.now(), elapsed);
+
+  if (elapsed <= 0 || download.bytesDownloaded <= 0) return null;
+
+  const speed = download.bytesDownloaded / elapsed; // bytes per second
+  const remainingBytes = download.bytesTotal - download.bytesDownloaded;
+
+  if (speed <= 0) return null;
+
+  const secondsLeft = remainingBytes / speed;
+
+  return formatETA(secondsLeft);
+};
+
+export default function Index() {
+  const { downloadedFiles, activeDownloads } = useNativeDownloads();
   const router = useRouter();
 
   const goToVideo = (item: any) => {
-    console.log(item);
     // @ts-expect-error
     router.push("/player/direct-player?offline=true&itemId=" + item.id);
   };
 
-  useEffect(() => {
-    console.log(activeDownloads);
-  }, [activeDownloads]);
-
   return (
     <View className="p-4 space-y-2">
-      {activeDownloads.map((i) => (
-        <View>
-          <Text>{i.id}</Text>
-        </View>
-      ))}
+      {activeDownloads.map((i) => {
+        const progress =
+          i.bytesTotal && i.bytesDownloaded
+            ? i.bytesDownloaded / i.bytesTotal
+            : 0;
+        const eta = getETA(i);
+        return (
+          <View key={i.id}>
+            <Text>{i.metadata?.item?.Name}</Text>
+            {i.state === "PENDING" ? (
+              <ActivityIndicator size={"small"} color={"white"} />
+            ) : i.state === "DOWNLOADING" ? (
+              <Text>
+                {i.bytesDownloaded} / {i.bytesTotal}
+              </Text>
+            ) : null}
+            <View
+              className="bg-neutral-800"
+              style={{
+                height: PROGRESSBAR_HEIGHT,
+                borderRadius: 5,
+                overflow: "hidden",
+                marginVertical: 4,
+              }}
+            >
+              <View
+                className="bg-purple-600"
+                style={{
+                  width: `${progress * 100}%`,
+                  height: "100%",
+                }}
+              />
+            </View>
+            {eta ? <Text>ETA: {eta}</Text> : <Text>Calculating...</Text>}
+          </View>
+        );
+      })}
       {downloadedFiles.map((i) => (
         <TouchableOpacity
           key={i.id}
           onPress={() => goToVideo(i)}
           className="bg-neutral-800 p-4 rounded-lg"
         >
-          <Text>{i.metadata.item.Name}</Text>
-          <Text>{i.metadata.item.Type}</Text>
+          <Text>{i.metadata.item?.Name}</Text>
+          <Text>{i.metadata.item?.Type}</Text>
         </TouchableOpacity>
       ))}
     </View>

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

@@ -4,6 +4,7 @@ import { LargeMovieCarousel } from "@/components/home/LargeMovieCarousel";
 import { ScrollingCollectionList } from "@/components/home/ScrollingCollectionList";
 import { Loader } from "@/components/Loader";
 import { MediaListSection } from "@/components/medialists/MediaListSection";
+import { Colors } from "@/constants/Colors";
 import { useInvalidatePlaybackProgressCache } from "@/hooks/useRevalidatePlaybackProgressCache";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import {
@@ -11,7 +12,7 @@ import {
   useSplashScreenVisible,
 } from "@/providers/SplashScreenProvider";
 import { useSettings } from "@/utils/atoms/settings";
-import { Ionicons } from "@expo/vector-icons";
+import { Feather, Ionicons } from "@expo/vector-icons";
 import { Api } from "@jellyfin/sdk";
 import {
   BaseItemDto,
@@ -26,7 +27,11 @@ import {
 } from "@jellyfin/sdk/lib/utils/api";
 import NetInfo from "@react-native-community/netinfo";
 import { QueryFunction, useQuery } from "@tanstack/react-query";
-import { useRouter } from "expo-router";
+import {
+  useNavigation,
+  useNavigationContainerRef,
+  useRouter,
+} from "expo-router";
 import { useAtomValue } from "jotai";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -34,6 +39,7 @@ import {
   ActivityIndicator,
   RefreshControl,
   ScrollView,
+  TouchableOpacity,
   View,
 } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
@@ -83,6 +89,23 @@ export default function index() {
     setLoadingRetry(false);
   }, []);
 
+  const navigation = useNavigation();
+
+  useEffect(() => {
+    navigation.setOptions({
+      headerLeft: () => (
+        <TouchableOpacity
+          onPress={() => {
+            router.push("/(auth)/downloads");
+          }}
+          className="p-2"
+        >
+          <Feather name="download" color={Colors.primary} size={22} />
+        </TouchableOpacity>
+      ),
+    });
+  }, []);
+
   useEffect(() => {
     const unsubscribe = NetInfo.addEventListener((state) => {
       if (state.isConnected == false || state.isInternetReachable === false)

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

@@ -21,9 +21,6 @@ import React, { lazy, useEffect } from "react";
 import { ScrollView, TouchableOpacity, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { storage } from "@/utils/mmkv";
-const DownloadSettings = lazy(
-  () => import("@/components/settings/DownloadSettings")
-);
 
 export default function settings() {
   const router = useRouter();
@@ -72,8 +69,6 @@ export default function settings() {
 
         <OtherSettings />
 
-        {!Platform.isTV && <DownloadSettings />}
-
         <PluginSettings />
 
         <AppLanguageSelector />

app/(auth)/(tabs)/(home)/settings/optimized-server/page.tsx

@@ -1,89 +0,0 @@
-import { Text } from "@/components/common/Text";
-import { OptimizedServerForm } from "@/components/settings/OptimizedServerForm";
-import { apiAtom } from "@/providers/JellyfinProvider";
-import { useSettings } from "@/utils/atoms/settings";
-import { getOrSetDeviceId } from "@/utils/device";
-import { getStatistics } from "@/utils/optimize-server";
-import { useMutation } from "@tanstack/react-query";
-import { useNavigation } from "expo-router";
-import { useAtom } from "jotai";
-import { useEffect, useState } from "react";
-import { ActivityIndicator, TouchableOpacity, View } from "react-native";
-import { toast } from "sonner-native";
-import { useTranslation } from "react-i18next";
-import DisabledSetting from "@/components/settings/DisabledSetting";
-
-export default function page() {
-  const navigation = useNavigation();
-
-  const { t } = useTranslation();
-
-  const [api] = useAtom(apiAtom);
-  const [settings, updateSettings, pluginSettings] = useSettings();
-
-  const [optimizedVersionsServerUrl, setOptimizedVersionsServerUrl] =
-    useState<string>(settings?.optimizedVersionsServerUrl || "");
-
-  const saveMutation = useMutation({
-    mutationFn: async (newVal: string) => {
-      if (newVal.length === 0 || !newVal.startsWith("http")) {
-        toast.error(t("home.settings.toasts.invalid_url"));
-        return;
-      }
-
-      const updatedUrl = newVal.endsWith("/") ? newVal : newVal + "/";
-
-      updateSettings({
-        optimizedVersionsServerUrl: updatedUrl,
-      });
-
-      return await getStatistics({
-        url: settings?.optimizedVersionsServerUrl,
-        authHeader: api?.accessToken,
-        deviceId: getOrSetDeviceId(),
-      });
-    },
-    onSuccess: (data) => {
-      if (data) {
-        toast.success(t("home.settings.toasts.connected"));
-      } else {
-        toast.error(t("home.settings.toasts.could_not_connect"));
-      }
-    },
-    onError: () => {
-      toast.error(t("home.settings.toasts.could_not_connect"));
-    },
-  });
-
-  const onSave = (newVal: string) => {
-    saveMutation.mutate(newVal);
-  };
-
-  useEffect(() => {
-    if (!pluginSettings?.optimizedVersionsServerUrl?.locked) {
-      navigation.setOptions({
-        title: t("home.settings.downloads.optimized_server"),
-        headerRight: () =>
-          saveMutation.isPending ? (
-            <ActivityIndicator size={"small"} color={"white"} />
-          ) : (
-            <TouchableOpacity onPress={() => onSave(optimizedVersionsServerUrl)}>
-              <Text className="text-blue-500">{t("home.settings.downloads.save_button")}</Text>
-            </TouchableOpacity>
-          ),
-      });
-    }
-  }, [navigation, optimizedVersionsServerUrl, saveMutation.isPending]);
-
-  return (
-    <DisabledSetting
-      disabled={pluginSettings?.optimizedVersionsServerUrl?.locked === true}
-      className="p-4"
-    >
-      <OptimizedServerForm
-        value={optimizedVersionsServerUrl}
-        onChangeValue={setOptimizedVersionsServerUrl}
-      />
-    </DisabledSetting>
-  );
-}

app/_layout.tsx

@@ -1,53 +1,38 @@
 import "@/augmentations";
-import { Platform } from "react-native";
-import { Text } from "@/components/common/Text";
 import i18n from "@/i18n";
-import { DownloadProvider } from "@/providers/DownloadProvider";
-import {
-  getOrSetDeviceId,
-  getTokenFromStorage,
-  JellyfinProvider,
-} from "@/providers/JellyfinProvider";
-import { JobQueueProvider } from "@/providers/JobQueueProvider";
+import * as ScreenOrientation from "@/packages/expo-screen-orientation";
+import { JellyfinProvider } from "@/providers/JellyfinProvider";
+import { NativeDownloadProvider } from "@/providers/NativeDownloadProvider";
 import { PlaySettingsProvider } from "@/providers/PlaySettingsProvider";
 import {
   SplashScreenProvider,
   useSplashScreenLoading,
 } from "@/providers/SplashScreenProvider";
 import { WebSocketProvider } from "@/providers/WebSocketProvider";
-import { Settings, useSettings } from "@/utils/atoms/settings";
-import { BACKGROUND_FETCH_TASK } from "@/utils/background-tasks";
+import { useSettings } from "@/utils/atoms/settings";
 import { LogProvider, writeToLog } from "@/utils/log";
 import { storage } from "@/utils/mmkv";
-import { cancelJobById, getAllJobsByDeviceId } from "@/utils/optimize-server";
 import { ActionSheetProvider } from "@expo/react-native-action-sheet";
 import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
-const BackGroundDownloader = !Platform.isTV
-  ? require("@kesha-antonov/react-native-background-downloader")
-  : null;
 import { DarkTheme, ThemeProvider } from "@react-navigation/native";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-const BackgroundFetch = !Platform.isTV
-  ? require("expo-background-fetch")
-  : null;
-import * as FileSystem from "expo-file-system";
 import { useFonts } from "expo-font";
 import { useKeepAwake } from "expo-keep-awake";
-const Notifications = !Platform.isTV ? require("expo-notifications") : null;
-import { router, Stack } from "expo-router";
-import * as ScreenOrientation from "@/packages/expo-screen-orientation";
-const TaskManager = !Platform.isTV ? require("expo-task-manager") : null;
 import { getLocales } from "expo-localization";
+import { router, Stack } from "expo-router";
 import { Provider as JotaiProvider } from "jotai";
 import { useEffect, useRef } from "react";
 import { I18nextProvider, useTranslation } from "react-i18next";
-import { Appearance, AppState } from "react-native";
+import { Appearance, AppState, Platform } from "react-native";
 import { SystemBars } from "react-native-edge-to-edge";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import "react-native-reanimated";
 import { Toaster } from "sonner-native";
-import { NativeDownloadProvider } from "@/providers/NativeDownloadProvider";
+const BackGroundDownloader = !Platform.isTV
+  ? require("@kesha-antonov/react-native-background-downloader")
+  : null;
+const Notifications = !Platform.isTV ? require("expo-notifications") : null;
 
 if (!Platform.isTV) {
   Notifications.setNotificationHandler({
@@ -94,102 +79,6 @@ function useNotificationObserver() {
   }, []);
 }
 
-if (!Platform.isTV) {
-  TaskManager.defineTask(BACKGROUND_FETCH_TASK, async () => {
-    console.log("TaskManager ~ trigger");
-
-    const now = Date.now();
-
-    const settingsData = storage.getString("settings");
-
-    if (!settingsData) return BackgroundFetch.BackgroundFetchResult.NoData;
-
-    const settings: Partial<Settings> = JSON.parse(settingsData);
-    const url = settings?.optimizedVersionsServerUrl;
-
-    if (!settings?.autoDownload || !url)
-      return BackgroundFetch.BackgroundFetchResult.NoData;
-
-    const token = getTokenFromStorage();
-    const deviceId = getOrSetDeviceId();
-    const baseDirectory = FileSystem.documentDirectory;
-
-    if (!token || !deviceId || !baseDirectory)
-      return BackgroundFetch.BackgroundFetchResult.NoData;
-
-    const jobs = await getAllJobsByDeviceId({
-      deviceId,
-      authHeader: token,
-      url,
-    });
-
-    console.log("TaskManager ~ Active jobs: ", jobs.length);
-
-    for (let job of jobs) {
-      if (job.status === "completed") {
-        const downloadUrl = url + "download/" + job.id;
-        const tasks = await BackGroundDownloader.checkForExistingDownloads();
-
-        if (tasks.find((task: { id: string }) => task.id === job.id)) {
-          console.log("TaskManager ~ Download already in progress: ", job.id);
-          continue;
-        }
-
-        BackGroundDownloader.download({
-          id: job.id,
-          url: downloadUrl,
-          destination: `${baseDirectory}${job.item.Id}.mp4`,
-          headers: {
-            Authorization: token,
-          },
-        })
-          .begin(() => {
-            console.log("TaskManager ~ Download started: ", job.id);
-          })
-          .done(() => {
-            console.log("TaskManager ~ Download completed: ", job.id);
-            saveDownloadedItemInfo(job.item);
-            BackGroundDownloader.completeHandler(job.id);
-            cancelJobById({
-              authHeader: token,
-              id: job.id,
-              url: url,
-            });
-            Notifications.scheduleNotificationAsync({
-              content: {
-                title: job.item.Name,
-                body: "Download completed",
-                data: {
-                  url: `/downloads`,
-                },
-              },
-              trigger: null,
-            });
-          })
-          .error((error: any) => {
-            console.log("TaskManager ~ Download error: ", job.id, error);
-            BackGroundDownloader.completeHandler(job.id);
-            Notifications.scheduleNotificationAsync({
-              content: {
-                title: job.item.Name,
-                body: "Download failed",
-                data: {
-                  url: `/downloads`,
-                },
-              },
-              trigger: null,
-            });
-          });
-      }
-    }
-
-    console.log(`Auto download started: ${new Date(now).toISOString()}`);
-
-    // Be sure to return the successful result type!
-    return BackgroundFetch.BackgroundFetchResult.NewData;
-  });
-}
-
 const checkAndRequestPermissions = async () => {
   try {
     const hasAskedBefore = storage.getString(
@@ -316,64 +205,62 @@ function Layout() {
 
   return (
     <QueryClientProvider client={queryClient}>
-      <JobQueueProvider>
-        <JellyfinProvider>
-          <PlaySettingsProvider>
-            <LogProvider>
-              <WebSocketProvider>
-                <NativeDownloadProvider>
-                  <BottomSheetModalProvider>
-                    <SystemBars style="light" hidden={false} />
-                    <ThemeProvider value={DarkTheme}>
-                      <Stack>
-                        <Stack.Screen
-                          name="(auth)/(tabs)"
-                          options={{
-                            headerShown: false,
-                            title: "",
-                            header: () => null,
-                          }}
-                        />
-                        <Stack.Screen
-                          name="(auth)/player"
-                          options={{
-                            headerShown: false,
-                            title: "",
-                            header: () => null,
-                          }}
-                        />
-                        <Stack.Screen
-                          name="login"
-                          options={{
-                            headerShown: true,
-                            title: "",
-                            headerTransparent: true,
-                          }}
-                        />
-                        <Stack.Screen name="+not-found" />
-                      </Stack>
-                      <Toaster
-                        duration={4000}
-                        toastOptions={{
-                          style: {
-                            backgroundColor: "#262626",
-                            borderColor: "#363639",
-                            borderWidth: 1,
-                          },
-                          titleStyle: {
-                            color: "white",
-                          },
+      <JellyfinProvider>
+        <PlaySettingsProvider>
+          <LogProvider>
+            <WebSocketProvider>
+              <NativeDownloadProvider>
+                <BottomSheetModalProvider>
+                  <SystemBars style="light" hidden={false} />
+                  <ThemeProvider value={DarkTheme}>
+                    <Stack>
+                      <Stack.Screen
+                        name="(auth)/(tabs)"
+                        options={{
+                          headerShown: false,
+                          title: "",
+                          header: () => null,
                         }}
-                        closeButton
                       />
-                    </ThemeProvider>
-                  </BottomSheetModalProvider>
-                </NativeDownloadProvider>
-              </WebSocketProvider>
-            </LogProvider>
-          </PlaySettingsProvider>
-        </JellyfinProvider>
-      </JobQueueProvider>
+                      <Stack.Screen
+                        name="(auth)/player"
+                        options={{
+                          headerShown: false,
+                          title: "",
+                          header: () => null,
+                        }}
+                      />
+                      <Stack.Screen
+                        name="login"
+                        options={{
+                          headerShown: true,
+                          title: "",
+                          headerTransparent: true,
+                        }}
+                      />
+                      <Stack.Screen name="+not-found" />
+                    </Stack>
+                    <Toaster
+                      duration={4000}
+                      toastOptions={{
+                        style: {
+                          backgroundColor: "#262626",
+                          borderColor: "#363639",
+                          borderWidth: 1,
+                        },
+                        titleStyle: {
+                          color: "white",
+                        },
+                      }}
+                      closeButton
+                    />
+                  </ThemeProvider>
+                </BottomSheetModalProvider>
+              </NativeDownloadProvider>
+            </WebSocketProvider>
+          </LogProvider>
+        </PlaySettingsProvider>
+      </JellyfinProvider>
     </QueryClientProvider>
   );
 }