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,
+      });
     }
   };
 

pnpm-lock.yaml

@@ -62,9 +62,15 @@ importers:
       '@tamagui/metro-plugin':
         specifier: ^1.91.4
         version: 1.91.4(@babel/core@7.23.9)(react-dom@18.2.0)(react-native-reanimated@3.6.2)(react-native-safe-area-context@4.8.2)(react-native-svg@14.1.0)(react-native@0.73.5)(react@18.2.0)(tailwindcss@3.4.1)(typescript@5.3.3)
+      '@tamagui/toast':
+        specifier: 1.91.4
+        version: 1.91.4(react-native@0.73.5)(react@18.2.0)
       '@tanstack/react-query':
         specifier: ^5.22.2
         version: 5.22.2(react@18.2.0)
+      burnt:
+        specifier: ^0.12.2
+        version: 0.12.2(expo@50.0.13)(react-dom@18.2.0)(react-native@0.73.5)(react@18.2.0)
       class-variance-authority:
         specifier: ^0.7.0
         version: 0.7.0
@@ -4745,6 +4751,29 @@ packages:
     resolution: {integrity: sha512-mr7y7CulY4QAkGDhpCzZwNbHBsCDsVFMtnmwTZdQzJ8HzoDKx7MOFDywstBjL8TjSu5HeO1ExF3JrLzCrhpwCA==}
     dev: false
 
+  /@tamagui/toast@1.91.4(react-native@0.73.5)(react@18.2.0):
+    resolution: {integrity: sha512-04EMrFPhFYaFopaSw6SiJKpwtOlXyq/Qb4Q0ox+ksFs5FQdHD99pB/DnsAZDQXziz8WuQQFOsH+/lM16loCMng==}
+    peerDependencies:
+      react: '*'
+      react-native: '*'
+    dependencies:
+      '@tamagui/animate-presence': 1.91.4(react@18.2.0)
+      '@tamagui/compose-refs': 1.91.4(react@18.2.0)
+      '@tamagui/constants': 1.91.4(react@18.2.0)
+      '@tamagui/core': 1.91.4(react@18.2.0)
+      '@tamagui/create-context': 1.91.4(react@18.2.0)
+      '@tamagui/dismissable': 1.91.4(react@18.2.0)
+      '@tamagui/helpers': 1.91.4(react@18.2.0)
+      '@tamagui/polyfill-dev': 1.91.4
+      '@tamagui/portal': 1.91.4(react-native@0.73.5)(react@18.2.0)
+      '@tamagui/stacks': 1.91.4(react@18.2.0)
+      '@tamagui/text': 1.91.4(react-native@0.73.5)(react@18.2.0)
+      '@tamagui/use-controllable-state': 1.91.4(react@18.2.0)
+      '@tamagui/visually-hidden': 1.91.4(react@18.2.0)
+      react: 18.2.0
+      react-native: 0.73.5(@babel/core@7.23.9)(@babel/preset-env@7.23.9)(react@18.2.0)
+    dev: false
+
   /@tamagui/toggle-group@1.91.4(@types/react@18.2.52)(immer@10.0.3)(react-native@0.73.5)(react@18.2.0):
     resolution: {integrity: sha512-5ynNkWDIt8bsdMaWuLMW/KCTwG5kHFRTN1xKWsjqfqKP5wjYhUKros+OhCu51E+Odw9CIsIh7glqRzrAjruMjg==}
     peerDependencies:
@@ -6058,6 +6087,22 @@ packages:
       semver: 7.5.4
     dev: true
 
+  /burnt@0.12.2(expo@50.0.13)(react-dom@18.2.0)(react-native@0.73.5)(react@18.2.0):
+    resolution: {integrity: sha512-bbZjGN4Om7dykr8ZcLb0tTO5L2becMR+HIez1ySUGgG/rvK+ePgBEuBA6lMOZqOTsUXhIKFUBH0sCXQ25fq5SA==}
+    peerDependencies:
+      expo: '*'
+      react: '*'
+      react-native: '*'
+    dependencies:
+      expo: 50.0.13(@babel/core@7.23.9)(@react-native/babel-preset@0.73.21)
+      react: 18.2.0
+      react-native: 0.73.5(@babel/core@7.23.9)(@babel/preset-env@7.23.9)(react@18.2.0)
+      sf-symbols-typescript: 1.0.0
+      sonner: 0.3.5(react-dom@18.2.0)(react@18.2.0)
+    transitivePeerDependencies:
+      - react-dom
+    dev: false
+
   /bytes@3.0.0:
     resolution: {integrity: sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw==}
     engines: {node: '>= 0.8'}
@@ -12130,6 +12175,11 @@ packages:
     resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==}
     dev: false
 
+  /sf-symbols-typescript@1.0.0:
+    resolution: {integrity: sha512-DkS7q3nN68dEMb4E18HFPDAvyrjDZK9YAQQF2QxeFu9gp2xRDXFMF8qLJ1EmQ/qeEGQmop4lmMM1WtYJTIcCMw==}
+    engines: {node: '>=10'}
+    dev: false
+
   /sha.js@2.4.11:
     resolution: {integrity: sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==}
     hasBin: true
@@ -12271,6 +12321,16 @@ packages:
       smart-buffer: 4.2.0
     dev: true
 
+  /sonner@0.3.5(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-yIwaQ4dftMvFApuruto2t7wGyyaPRpj5qYBWYJIz4Z7uGcVn0IfqI/hWN0JyJN4izNbZFuCYZISf3fOGnvSlNQ==}
+    peerDependencies:
+      react: ^18.0.0
+      react-dom: ^18.0.0
+    dependencies:
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
   /sort-keys@2.0.0:
     resolution: {integrity: sha512-/dPCrG1s3ePpWm6yBbxZq5Be1dXGLyLn9Z791chDC3NFrpkVbWGzkBwPN1knaciexFXgRJ7hzdnwZ4stHSDmjg==}
     engines: {node: '>=4'}