Switch from downloadjs to multi-download (#174)

* Delete FUNDING.yml

* fix: docker-compose now 

- docker-compose version 1.29.2, build unknown
- Linux 5.15.0-1029-oracle #35-Ubuntu SMP Tue Jan 24 15:17:52 UTC 2023 x86_64 x86_64 x86_64 GNU/Linux

```
ERROR: The Compose file './docker-compose.yml' is invalid because:
services.blaze-server.environment.TRUST_PROXY contains true, which is an invalid type, it should be a string, number, or a null
```

* Migrate to GA4

Universal Analytics has been shut down

* Switch from downloadjs to multi-download

* Move to utils/download.js

* Amend comment

* Add URL.revokeObjectURL

* Simplify delay behaviour, add JSDoc comments

* Typo

* Fix typo

* Fix multi-file downloads for WebTorrent

* Update client/src/utils/download.js

Co-authored-by: ddelange <[email protected]>

---------

Co-authored-by: Akash Hamirwasia <[email protected]>
Co-authored-by: 薛定谔的meow <[email protected]>
Co-authored-by: Akash Hamirwasia <[email protected]>

client/package.json

@@ -23,7 +23,6 @@
     "classnames": "^2.3.2",
     "copy-to-clipboard": "^3.3.3",
     "date-fns": "^2.29.3",
-    "downloadjs": "^1.4.7",
     "nanoid": "^3.3.4",
     "preact": "^10.3.2",
     "preact-feather": "^4.2.1",

client/src/routes/App/FileTransfer/FileTransfer.js

@@ -1,5 +1,4 @@
 import { h, createRef } from 'preact';
-import download from 'downloadjs';
 import { route } from 'preact-router';
 import { PureComponent, forwardRef, memo } from 'preact/compat';
 import { ArrowLeft, CheckCircle, Home, Plus, Image, Film, Box, Music, File, Zap, Share2, Send } from 'preact-feather';
@@ -17,6 +16,7 @@ import Visualizer from '../../../utils/visualizer';
 import formatSize from '../../../utils/formatSize';
 import pluralize from '../../../utils/pluralize';
 import urls from '../../../utils/urls';
+import { multiDownload } from '../../../utils/download';
 import constants from '../../../../../common/constants';
 import roomsDispatch from '../../../reducers/rooms';
 
@@ -292,17 +292,10 @@ class FileTransfer extends PureComponent {
           isSelectorEnabled: false,
         });
       },
-      onDone: (file, meta) => {
-        if (file !== undefined) {
-          if (Array.isArray(file)) {
-            file.forEach(file => {
-              file.getBlob((err, blob) => download(blob, file.name));
-            });
-          }
-          else {
-            download(file, meta.name, meta.type);
-          }
-        }
+      onDone: (files) => {
+        if (files === undefined) return;
+
+        multiDownload(files);
         this.resetState();
       },
     });

client/src/utils/download.js

@@ -0,0 +1,41 @@
+// Adapted from https://github.com/sindresorhus/multi-download/blob/v4.0.0/index.js
+// to take File as input https://developer.mozilla.org/en-US/docs/Web/API/File
+
+/**
+ * Creates a promise that resolves after the specified number of milliseconds
+ */
+const delay = milliseconds => new Promise(resolve => {
+  setTimeout(resolve, milliseconds);
+});
+
+/**
+ * Downloads a single file
+ * @param file - An instance of the File type representing the file to download
+ */
+const download = async (file) => {
+  const a = document.createElement('a');
+  const url = URL.createObjectURL(file);
+  a.download = file.name;
+  a.href = url;
+  a.style.display = 'none';
+  document.body.append(a);
+  a.click();
+  await delay(100);  // for Chrome
+  a.remove();
+  URL.revokeObjectURL(url);
+};
+
+/**
+ * Initiates multiple file downloads with a constant delay between each one
+ * @param files - An array of instances of the File type representing the files to download
+ */
+export const multiDownload = async (files) => {
+  if (!files) {
+    throw new Error('`files` required');
+  };
+
+  for (const file of files) {
+    download(file);
+    await delay(1000);
+  }
+};

client/src/utils/fileShare.js

@@ -50,7 +50,9 @@ class FileShare {
     this.socket.listen(constants.FILE_INIT, (data) => {
       if (data.end) {
         if (fileParts.length) {
-          onDone(new Blob(fileParts), metaData.meta[0]);
+          onDone([
+            new File(fileParts, metaData.meta[0].name, {type: metaData.meta[0].type})
+          ]);
           fileParts = [];
           size = 0;
           statProg = 0.25;
@@ -106,8 +108,20 @@ class FileShare {
 
     torrent.on('upload', update);
     torrent.on('download', update);
-    torrent.on('done', () => {
-      onDone(torrent.files);
+    torrent.on('done', async () => {
+      const files = await Promise.all(
+        torrent.files.map(
+          (file) =>
+            new Promise((resolve, reject) => {
+              // make regular File from webtorrent File https://github.com/webtorrent/webtorrent/blob/v1.9.7/lib/file.js#L13
+              file.getBlob((err, blob) => {
+                if (err) reject(err);
+                resolve(new File([blob], file.name, { type: file.type }));
+              });
+            })
+        )
+      );
+      onDone(files);
     });
   }
 
@@ -227,4 +241,4 @@ class FileShare {
 
 }
 
-export default FileShare;
+export default FileShare;