feat: toasts

apps/expo/package.json

@@ -30,7 +30,9 @@
     "@tamagui/babel-plugin": "^1.91.4",
     "@tamagui/config": "^1.91.4",
     "@tamagui/metro-plugin": "^1.91.4",
+    "@tamagui/toast": "1.91.4",
     "@tanstack/react-query": "^5.22.2",
+    "burnt": "^0.12.2",
     "class-variance-authority": "^0.7.0",
     "expo": "~50.0.13",
     "expo-av": "~13.10.5",

apps/expo/src/app/_layout.tsx

@@ -5,6 +5,7 @@ import { useFonts } from "expo-font";
 import { SplashScreen, Stack } from "expo-router";
 import FontAwesome from "@expo/vector-icons/FontAwesome";
 import { DarkTheme, ThemeProvider } from "@react-navigation/native";
+import { ToastProvider, ToastViewport } from "@tamagui/toast";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { TamaguiProvider, Theme, useTheme } from "tamagui";
 import tamaguiConfig from "tamagui.config";
@@ -106,11 +107,14 @@ function RootLayoutNav() {
   return (
     <QueryClientProvider client={queryClient}>
       <TamaguiProvider config={tamaguiConfig} defaultTheme="main">
-        <ThemeProvider value={DarkTheme}>
-          <Theme name={themeStore}>
-            <ScreenStacks />
-          </Theme>
-        </ThemeProvider>
+        <ToastProvider>
+          <ThemeProvider value={DarkTheme}>
+            <Theme name={themeStore}>
+              <ScreenStacks />
+            </Theme>
+          </ThemeProvider>
+          <ToastViewport />
+        </ToastProvider>
       </TamaguiProvider>
     </QueryClientProvider>
   );

apps/expo/src/components/item/item.tsx

@@ -5,7 +5,7 @@ import ContextMenu from "react-native-context-menu-view";
 import { useRouter } from "expo-router";
 import { Image, Text, View } from "tamagui";
 
-import { useDownloadManager } from "~/hooks/DownloadManagerContext";
+// import { useDownloadManager } from "~/hooks/DownloadManagerContext";
 import { usePlayerStore } from "~/stores/player/store";
 
 export interface ItemData {
@@ -19,7 +19,7 @@ export interface ItemData {
 export default function Item({ data }: { data: ItemData }) {
   const resetVideo = usePlayerStore((state) => state.resetVideo);
   const router = useRouter();
-  const { startDownload } = useDownloadManager();
+  //   const { startDownload } = useDownloadManager();
 
   const { title, type, year, posterUrl } = data;
 
@@ -41,10 +41,10 @@ export default function Item({ data }: { data: ItemData }) {
     e: NativeSyntheticEvent<ContextMenuOnPressNativeEvent>,
   ) => {
     console.log(e.nativeEvent.name);
-    startDownload(
-      "https://samplelib.com/lib/preview/mp4/sample-5s.mp4",
-      "mp4",
-    ).catch(console.error);
+    // startDownload(
+    //   "https://samplelib.com/lib/preview/mp4/sample-5s.mp4",
+    //   "mp4",
+    // ).catch(console.error);
   };
 
   return (

apps/expo/src/hooks/DownloadManagerContext.tsx

@@ -2,6 +2,7 @@ import type { ReactNode } from "react";
 import React, { createContext, useContext, useEffect, useState } from "react";
 import * as FileSystem from "expo-file-system";
 import * as MediaLibrary from "expo-media-library";
+import { useToastController } from "@tamagui/toast";
 
 import { loadDownloadHistory, saveDownloadHistory } from "~/settings";
 
@@ -42,6 +43,7 @@ export const DownloadManagerProvider: React.FC<{ children: ReactNode }> = ({
   children,
 }) => {
   const [downloads, setDownloads] = useState<DownloadItem[]>([]);
+  const toastController = useToastController();
 
   useEffect(() => {
     const initializeDownloads = async () => {
@@ -58,7 +60,16 @@ export const DownloadManagerProvider: React.FC<{ children: ReactNode }> = ({
     void saveDownloadHistory(downloads.slice(0, 10));
   }, [downloads]);
 
-  const startDownload = async (url: string, type: "mp4" | "hls") => {
+  const startDownload = async (
+    url: string,
+    type: "mp4" | "hls",
+    headers?: Record<string, string>,
+  ) => {
+    toastController.show("Download started", {
+      burntOptions: { preset: "none" },
+      native: true,
+    });
+
     const newDownload: DownloadItem = {
       id: `download-${Date.now()}-${Math.random().toString(16).slice(2)}`,
       filename: url.split("/").pop() ?? "unknown",
@@ -74,7 +85,7 @@ export const DownloadManagerProvider: React.FC<{ children: ReactNode }> = ({
     setDownloads((currentDownloads) => [newDownload, ...currentDownloads]);
 
     if (type === "mp4") {
-      await downloadMP4(url, newDownload.id);
+      await downloadMP4(url, newDownload.id, headers ?? {});
     } else if (type === "hls") {
       // HLS stuff later
     }
@@ -88,7 +99,11 @@ export const DownloadManagerProvider: React.FC<{ children: ReactNode }> = ({
     );
   };
 
-  const downloadMP4 = async (url: string, downloadId: string) => {
+  const downloadMP4 = async (
+    url: string,
+    downloadId: string,
+    headers: Record<string, string>,
+  ) => {
     let lastBytesWritten = 0;
     let lastTimestamp = Date.now();
 
@@ -126,7 +141,7 @@ export const DownloadManagerProvider: React.FC<{ children: ReactNode }> = ({
     const downloadResumable = FileSystem.createDownloadResumable(
       url,
       fileUri,
-      {},
+      { headers },
       callback,
     );
 
@@ -161,8 +176,16 @@ export const DownloadManagerProvider: React.FC<{ children: ReactNode }> = ({
         isFinished: true,
       });
       console.log("File saved to media library and original deleted");
+      toastController.show("Download finished", {
+        burntOptions: { preset: "done" },
+        native: true,
+      });
     } catch (error) {
       console.error("Error saving file to media library:", error);
+      toastController.show("Download failed", {
+        burntOptions: { preset: "error" },
+        native: true,
+      });
     }
   };