mobile: show currently downloading file

apps/mobile/app/common/filesystem/download-attachment.js

@@ -195,7 +195,11 @@ export default async function downloadAttachment(
   }
 
   try {
-    console.log("starting download attachment", attachment.metadata.hash);
+    console.log(
+      "starting download attachment",
+      attachment.metadata.hash,
+      options.groupId
+    );
     await db.fs.downloadFile(
       options.groupId || attachment.metadata.hash,
       attachment.metadata.hash

apps/mobile/app/components/attachments/attachment-item.js

@@ -35,12 +35,14 @@ function getFileExtension(filename) {
   var ext = /^.+\.([^.]+)$/.exec(filename);
   return ext == null ? "" : ext[1];
 }
-/**
- *
- * @param {any} param0
- * @returns
- */
-export const AttachmentItem = ({ attachment, encryption, setAttachments }) => {
+
+export const AttachmentItem = ({
+  attachment,
+  encryption,
+  setAttachments,
+  pressable = true,
+  hideWhenNotDownloading
+}) => {
   const colors = useThemeStore((state) => state.colors);
   const [currentProgress, setCurrentProgress] = useAttachmentProgress(
     attachment,
@@ -48,9 +50,12 @@ export const AttachmentItem = ({ attachment, encryption, setAttachments }) => {
   );
 
   const onPress = () => {
+    if (!pressable) return;
     Actions.present(attachment, setAttachments, attachment.metadata.hash);
   };
-  return (
+
+  return hideWhenNotDownloading &&
+    (!currentProgress || !currentProgress.value) ? null : (
     <TouchableOpacity
       activeOpacity={0.9}
       onPress={onPress}
@@ -113,12 +118,14 @@ export const AttachmentItem = ({ attachment, encryption, setAttachments }) => {
             {attachment.metadata.filename}
           </Paragraph>
 
-          <Paragraph color={colors.icon} size={SIZE.xs}>
-            {formatBytes(attachment.length)}{" "}
-            {currentProgress?.type
-              ? "(" + currentProgress.type + "ing - tap to cancel)"
-              : ""}
-          </Paragraph>
+          {!hideWhenNotDownloading ? (
+            <Paragraph color={colors.icon} size={SIZE.xs}>
+              {formatBytes(attachment.length)}{" "}
+              {currentProgress?.type
+                ? "(" + currentProgress.type + "ing - tap to cancel)"
+                : ""}
+            </Paragraph>
+          ) : null}
         </View>
       </View>
 
@@ -126,7 +133,7 @@ export const AttachmentItem = ({ attachment, encryption, setAttachments }) => {
         <TouchableOpacity
           activeOpacity={0.9}
           onPress={() => {
-            if (encryption) return;
+            if (encryption || !pressable) return;
             db.fs.cancel(attachment.metadata.hash);
             setCurrentProgress(null);
           }}

apps/mobile/app/components/attachments/download-attachments.js

@@ -27,6 +27,8 @@ import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { ProgressBarComponent } from "../ui/svg/lazy";
 import { useThemeStore } from "../../stores/use-theme-store";
+import { FlatList } from "react-native-actions-sheet";
+import { AttachmentItem } from "./attachment-item";
 
 const DownloadAttachments = ({ close, attachments, isNote, update }) => {
   const colors = useThemeStore((state) => state.colors);
@@ -50,7 +52,7 @@ const DownloadAttachments = ({ close, attachments, isNote, update }) => {
       attachments,
       (progress, statusText) => setProgress({ value: progress, statusText }),
       canceled,
-      groupId
+      groupId.current
     );
     if (canceled.current) return;
     setResult(result);
@@ -65,6 +67,7 @@ const DownloadAttachments = ({ close, attachments, isNote, update }) => {
       disableClosing: false
     });
     canceled.current = true;
+    console.log(groupId.current, "canceling groupId downloads");
     await db.fs.cancel(groupId.current);
     setDownloading(false);
     groupId.current = null;
@@ -162,6 +165,38 @@ const DownloadAttachments = ({ close, attachments, isNote, update }) => {
         </View>
       ) : null}
 
+      <FlatList
+        style={{
+          maxHeight: 300,
+          width: "100%",
+          minHeight: 60,
+          backgroundColor: colors.nav,
+          borderRadius: 5,
+          marginVertical: 12
+        }}
+        data={downloading ? attachments : []}
+        ListEmptyComponent={
+          <View
+            style={{
+              width: "100%",
+              justifyContent: "center",
+              alignItems: "center",
+              height: 60
+            }}
+          >
+            <Paragraph color={colors.icon}>No downloads in progress.</Paragraph>
+          </View>
+        }
+        renderItem={({ item }) => (
+          <AttachmentItem
+            attachment={item}
+            setAttachments={() => {}}
+            pressable={false}
+            hideWhenNotDownloading={true}
+          />
+        )}
+      />
+
       {result.size ? (
         <Button
           style={{

apps/mobile/app/hooks/use-attachment-progress.ts

@@ -56,7 +56,9 @@ export const useAttachmentProgress = (
         type: type
       });
     } else {
-      setCurrentProgress(undefined);
+      setTimeout(() => {
+        setCurrentProgress(undefined);
+      }, 300);
     }
   }, [attachment.metadata.hash, progress]);