From dc0fc959ad17ac9f663c51045644134f16e8f6d8 Mon Sep 17 00:00:00 2001
From: DJ2LS <75909252+DJ2LS@users.noreply.github.com>
Date: Sat, 25 Feb 2023 23:23:59 +0100
Subject: [PATCH] added image compression - still broken

---
 gui/main.js              | 34 +++++++++++++++++++
 gui/package.json         |  3 +-
 gui/preload-chat.js      | 70 +++++++++++++++++++++++++++++++++++++---
 gui/src/chat-module.html |  6 ++++
 4 files changed, 107 insertions(+), 6 deletions(-)

diff --git a/gui/main.js b/gui/main.js
index a3a98b65..d12df0b1 100644
--- a/gui/main.js
+++ b/gui/main.js
@@ -511,6 +511,40 @@ ipcMain.on("select-file", (event, data) => {
     });
 });
 
+//select file
+ipcMain.on("select-user-image", (event, data) => {
+  dialog
+    .showOpenDialog({
+      defaultPath: path.join(__dirname, "../"),
+      buttonLabel: "Select file",
+      properties: ["openFile"],
+    })
+    .then((filepath) => {
+      console.log(filepath.filePaths[0]);
+
+      try {
+        //fs.readFile(filepath.filePaths[0], 'utf8',  function (err, data) {
+        //Has to be binary
+        fs.readFile(filepath.filePaths[0], "binary", function (err, data) {
+          console.log(data.length);
+
+          var filename = path.basename(filepath.filePaths[0]);
+          var mimeType = mime.getType(filename);
+          console.log(mimeType);
+          if (mimeType == "" || mimeType == null) {
+            mimeType = "plain/text";
+          }
+          chat.webContents.send("return-select-user-image", {
+            data: data,
+            mime: mimeType,
+            filename: filename,
+          });
+        });
+      } catch (err) {
+        console.log(err);
+      }
+    });
+});
 //save file to folder
 ipcMain.on("save-file-to-folder", (event, data) => {
   console.log(data.file);
diff --git a/gui/package.json b/gui/package.json
index cfce9425..cd3a61ba 100644
--- a/gui/package.json
+++ b/gui/package.json
@@ -35,6 +35,7 @@
     "bootstrap": "^5.2.3",
     "bootstrap-icons": "^1.10.3",
     "bootswatch": "^5.2.3",
+    "browser-image-compression": "^2.0.0",
     "chart.js": "^4.2.1",
     "chartjs-plugin-annotation": "^2.1.2",
     "electron-log": "^4.4.8",
@@ -53,9 +54,9 @@
     "uuid": "^9.0.0"
   },
   "devDependencies": {
+    "@electron/notarize": "^1.2.3",
     "electron": "^23.0.0",
     "electron-builder": "^23.6.0",
-    "@electron/notarize": "^1.2.3",
     "electron-builder-notarize": "^1.5.1"
   },
   "build": {
diff --git a/gui/preload-chat.js b/gui/preload-chat.js
index 48228522..1244b5a7 100644
--- a/gui/preload-chat.js
+++ b/gui/preload-chat.js
@@ -1,6 +1,9 @@
 const path = require("path");
 const { ipcRenderer } = require("electron");
 const { v4: uuidv4 } = require("uuid");
+const imageCompression = require("browser-image-compression");
+
+
 // https://stackoverflow.com/a/26227660
 var appDataFolder =
   process.env.APPDATA ||
@@ -70,17 +73,20 @@ var users = new PouchDB(userDB);
 createChatIndex();
 createUserIndex();
 
-/*
+
 // REMOTE SYNC ATTEMPTS
 
 
-var remoteDB = new PouchDB('http://172.20.10.4:5984/chatDB')
-
+//var remoteDB = new PouchDB('http://172.20.10.4:5984/chatDB')
+/*
 // we need express packages for running pouchdb sync "express-pouchdb"
 var express = require('express');
 var app = express();
-//app.use('/chatDB', require('express-pouchdb')(PouchDB));
-//app.listen(5984);
+app.use('/chatDB', require('express-pouchdb')(PouchDB));
+app.listen(5984);
+
+
+
 
 app.use('/chatDB', require('pouchdb-express-router')(PouchDB));
 app.listen(5984);
@@ -371,6 +377,16 @@ window.addEventListener("DOMContentLoaded", () => {
       update_chat_obj_by_uuid(uuid);
     });
 
+// open file selector for user image
+document.getElementById("userImageSelector").addEventListener("click", () => {
+
+ipcRenderer.send("select-user-image", {
+      title: "Title",
+    });
+
+});
+
+
   // SEND MSG
   document.getElementById("sendMessage").addEventListener("click", () => {
     document.getElementById("emojipickercontainer").style.display = "none";
@@ -482,6 +498,50 @@ ipcRenderer.on("return-selected-files", (event, arg) => {
      </span>
     `;
 });
+
+ipcRenderer.on("return-select-user-image", (event, arg) => {
+  filetype = arg.mime;
+  //console.log(filetype);
+
+  file = arg.data;
+  //filename = arg.filename;
+
+  //console.log(arg.data)
+
+  //document.getElementById("userImage").src = '';
+
+
+
+  //var imageFile = arg.data;
+var imageFile = arg.data;
+console.log(imageFile)
+
+  var options = {
+    maxSizeMB: 1,
+    maxWidthOrHeight: 1920,
+    useWebWorker: true
+  }
+
+
+  imageCompression(imageFile, options)
+    .then(function (compressedFile) {
+      console.log('compressedFile instanceof Blob', compressedFile instanceof Blob); // true
+      console.log(`compressedFile size ${compressedFile.size / 1024 / 1024} MB`); // smaller than maxSizeMB
+
+      console.log(compressedFile.size);
+    })
+    .catch(function (error) {
+      console.log(error.message);
+    });
+
+
+
+
+
+
+});
+
+
 ipcRenderer.on("action-update-transmission-status", (event, arg) => {
   var data = arg["data"][0];
   console.log(data.status);
diff --git a/gui/src/chat-module.html b/gui/src/chat-module.html
index 7f442ccc..ce4bc704 100644
--- a/gui/src/chat-module.html
+++ b/gui/src/chat-module.html
@@ -34,6 +34,10 @@
     <script
       type="module"
       src="../node_modules/emoji-picker-element/database.js"
+    ></script>
+        <script
+      type="module"
+      src="../node_modules/browser-image-compression/dist/browser-image-compression.js"
     ></script>
     <div
       class="position-absolute container w-100 h-100 bottom-0 end-0 mb-5"
@@ -300,10 +304,12 @@
                       src="img/icon.png"
                       class="img-fluid rounded-start"
                       alt="..."
+                      id="userImage"
                     />
                   </div>
                   <div
                     class="col position-absolute image-overlay text-white justify-content-center align-items-center d-flex align-middle h-100 bg-dark opacity-0"
+                    id="userImageSelector"
                   >
                     <i class="bi bi-upload" style="font-size: 2.2rem"></i>
                   </div>