Compress new avatar images

CHANGES.md

@@ -2,6 +2,7 @@
 
 ## 9.0.0 (Unreleased)
 
+- Compress new avatar images before uploading them
 - Add initial support for XEP-0421 occupant Ids.
 - Use more specific types for form fields based on XEP-0122
 - Fix trimming of chats in overlayed view mode

package-lock.json

@@ -12,6 +12,7 @@
 				"@fortawesome/fontawesome-free": "5.14.0",
 				"bootstrap": "^4.6.0",
 				"bootstrap.native": "^2.0.27",
+				"client-compress": "^2.2.2",
 				"dayjs": "1.10.6",
 				"dompurify": "^2.3.1",
 				"favico.js-slevomat": "^0.3.11",
@@ -7030,6 +7031,14 @@
 				"node": ">= 10"
 			}
 		},
+		"node_modules/client-compress": {
+			"version": "2.2.2",
+			"resolved": "https://registry.npmjs.org/client-compress/-/client-compress-2.2.2.tgz",
+			"integrity": "sha512-L1k7W16ZFIKw5HJdmloLSnTxSyBGCtGyfH7BiyOWMEXHevBnAlud2UysPcHwangWkU9xnVcUgVStHaB6gfnYEQ==",
+			"dependencies": {
+				"babel-runtime": "^6.26.0"
+			}
+		},
 		"node_modules/cliui": {
 			"version": "7.0.4",
 			"resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
@@ -28866,6 +28875,14 @@
 			"integrity": "sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==",
 			"dev": true
 		},
+		"client-compress": {
+			"version": "2.2.2",
+			"resolved": "https://registry.npmjs.org/client-compress/-/client-compress-2.2.2.tgz",
+			"integrity": "sha512-L1k7W16ZFIKw5HJdmloLSnTxSyBGCtGyfH7BiyOWMEXHevBnAlud2UysPcHwangWkU9xnVcUgVStHaB6gfnYEQ==",
+			"requires": {
+				"babel-runtime": "^6.26.0"
+			}
+		},
 		"cliui": {
 			"version": "7.0.4",
 			"resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",

package.json

@@ -110,6 +110,7 @@
     "@fortawesome/fontawesome-free": "5.14.0",
     "bootstrap": "^4.6.0",
     "bootstrap.native": "^2.0.27",
+    "client-compress": "^2.2.2",
     "dompurify": "^2.3.1",
     "favico.js-slevomat": "^0.3.11",
     "jed": "1.1.1",

src/plugins/profile/modals/profile.js

@@ -2,11 +2,21 @@ import BootstrapModal from "plugins/modal/base.js";
 import bootstrap from "bootstrap.native";
 import log from "@converse/headless/log";
 import tpl_profile_modal from "../templates/profile_modal.js";
+import Compress from 'client-compress';
 import { __ } from 'i18n';
 import { _converse, api, converse } from "@converse/headless/core";
 
 const { sizzle } = converse.env;
 
+const options = {
+  targetSize: 0.1,
+  quality: 0.75,
+  maxWidth: 256,
+  maxHeight: 256
+}
+
+const compress = new Compress(options)
+
 
 const ProfileModal = BootstrapModal.extend({
     id: "user-profile-modal",
@@ -71,14 +81,18 @@ const ProfileModal = BootstrapModal.extend({
             });
             this.setVCard(data);
         } else {
-            reader.onloadend = () => {
-                Object.assign(data, {
-                    'image': btoa(reader.result),
-                    'image_type': image_file.type
-                });
-                this.setVCard(data);
-            };
-            reader.readAsBinaryString(image_file);
+            const files = [image_file];
+            compress.compress(files).then((conversions) => {
+                const { photo, } = conversions[0];
+                reader.onloadend = () => {
+                    Object.assign(data, {
+                        'image': btoa(reader.result),
+                        'image_type': image_file.type
+                    });
+                    this.setVCard(data);
+                };
+                reader.readAsBinaryString(photo.data);
+            });
         }
     }
 });