From 6b4034dae9578debc0d62499a68179c5e9f00bc9 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Sun, 29 Dec 2024 19:54:48 +1300
Subject: [PATCH] implement optional image compression when adding images to
 messages

---
 package-lock.json                             |  26 ++++
 package.json                                  |   1 +
 .../components/messages/AddImageButton.vue    | 135 ++++++++++++++++++
 .../messages/ConversationViewer.vue           |  46 +++---
 4 files changed, 178 insertions(+), 30 deletions(-)
 create mode 100644 src/frontend/components/messages/AddImageButton.vue

diff --git a/package-lock.json b/package-lock.json
index 8ae2d65..7ed4d10 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
         "autoprefixer": "^10.4.20",
         "axios": "^1.7.9",
         "click-outside-vue3": "^4.0.1",
+        "compressorjs": "^1.2.1",
         "electron-prompt": "^1.7.0",
         "mitt": "^3.0.1",
         "moment": "^2.30.1",
@@ -1979,6 +1980,11 @@
         "bluebird": "^3.5.5"
       }
     },
+    "node_modules/blueimp-canvas-to-blob": {
+      "version": "3.29.0",
+      "resolved": "https://registry.npmjs.org/blueimp-canvas-to-blob/-/blueimp-canvas-to-blob-3.29.0.tgz",
+      "integrity": "sha512-0pcSSGxC0QxT+yVkivxIqW0Y4VlO2XSDPofBAqoJ1qJxgH9eiUDLv50Rixij2cDuEfx4M6DpD9UGZpRhT5Q8qg=="
+    },
     "node_modules/boolean": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/boolean/-/boolean-3.2.0.tgz",
@@ -2414,6 +2420,15 @@
         "node": ">= 10"
       }
     },
+    "node_modules/compressorjs": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/compressorjs/-/compressorjs-1.2.1.tgz",
+      "integrity": "sha512-+geIjeRnPhQ+LLvvA7wxBQE5ddeLU7pJ3FsKFWirDw6veY3s9iLxAQEw7lXGHnhCJvBujEQWuNnGzZcvCvdkLQ==",
+      "dependencies": {
+        "blueimp-canvas-to-blob": "^3.29.0",
+        "is-blob": "^2.1.0"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -3751,6 +3766,17 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-blob": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-blob/-/is-blob-2.1.0.tgz",
+      "integrity": "sha512-SZ/fTft5eUhQM6oF/ZaASFDEdbFVe89Imltn9uZr03wdKMcWNVYSMjQPFtg05QuNkt5l5c135ElvXEQG0rk4tw==",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/is-ci": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-3.0.1.tgz",
diff --git a/package.json b/package.json
index 3979bec..ed2cba7 100644
--- a/package.json
+++ b/package.json
@@ -100,6 +100,7 @@
     "autoprefixer": "^10.4.20",
     "axios": "^1.7.9",
     "click-outside-vue3": "^4.0.1",
+    "compressorjs": "^1.2.1",
     "electron-prompt": "^1.7.0",
     "mitt": "^3.0.1",
     "moment": "^2.30.1",
diff --git a/src/frontend/components/messages/AddImageButton.vue b/src/frontend/components/messages/AddImageButton.vue
new file mode 100644
index 0000000..89a120c
--- /dev/null
+++ b/src/frontend/components/messages/AddImageButton.vue
@@ -0,0 +1,135 @@
+<template>
+    <div class="inline-flex rounded-md shadow-sm">
+
+        <button @click="showMenu" type="button" class="my-auto mr-1 inline-flex items-center gap-x-1 rounded-md bg-gray-500 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500 dark:bg-zinc-800 dark:text-white dark:hover:bg-zinc-700 dark:focus-visible:outline-zinc-500">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-5">
+                <path fill-rule="evenodd" d="M1.5 6a2.25 2.25 0 0 1 2.25-2.25h16.5A2.25 2.25 0 0 1 22.5 6v12a2.25 2.25 0 0 1-2.25 2.25H3.75A2.25 2.25 0 0 1 1.5 18V6ZM3 16.06V18c0 .414.336.75.75.75h16.5A.75.75 0 0 0 21 18v-1.94l-2.69-2.689a1.5 1.5 0 0 0-2.12 0l-.88.879.97.97a.75.75 0 1 1-1.06 1.06l-5.16-5.159a1.5 1.5 0 0 0-2.12 0L3 16.061Zm10.125-7.81a1.125 1.125 0 1 1 2.25 0 1.125 1.125 0 0 1-2.25 0Z" clip-rule="evenodd" />
+            </svg>
+            <span class="ml-1 hidden xl:inline-block whitespace-nowrap">Add Image</span>
+        </button>
+
+        <div class="relative block">
+            <Transition
+                enter-active-class="transition ease-out duration-100"
+                enter-from-class="transform opacity-0 scale-95"
+                enter-to-class="transform opacity-100 scale-100"
+                leave-active-class="transition ease-in duration-75"
+                leave-from-class="transform opacity-100 scale-100"
+                leave-to-class="transform opacity-0 scale-95">
+                <div v-if="isShowingMenu" v-click-outside="hideMenu" class="absolute bottom-0 -ml-11 sm:right-0 sm:ml-0 z-10 mb-10 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+                    <div class="py-1">
+                        <button @click="addImage('low')" type="button" class="w-full block text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 whitespace-nowrap">Low Quality (320x320)</button>
+                        <button @click="addImage('medium')" type="button" class="w-full block text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 whitespace-nowrap">Medium Quality (640x640)</button>
+                        <button @click="addImage('high')" type="button" class="w-full block text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 whitespace-nowrap">High Quality (1280x1280)</button>
+                        <button @click="addImage('original')" type="button" class="w-full block text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 whitespace-nowrap">Original Quality</button>
+                    </div>
+                </div>
+            </Transition>
+        </div>
+
+        <!-- hidden file input for selecting files -->
+        <input ref="image-input" @change="onImageInputChange" type="file" accept="image/*" style="display:none"/>
+
+    </div>
+</template>
+
+<script>
+import Compressor from 'compressorjs';
+import DialogUtils from "../../js/DialogUtils";
+export default {
+    name: 'AddImageButton',
+    emits: [
+        "add-image",
+    ],
+    data() {
+        return {
+            isShowingMenu: false,
+            selectedImageQuality: null,
+        };
+    },
+    methods: {
+        showMenu() {
+            this.isShowingMenu = true;
+        },
+        hideMenu() {
+            this.isShowingMenu = false;
+        },
+        addImage(quality) {
+            this.isShowingMenu = false;
+            this.selectedImageQuality = quality;
+            this.$refs["image-input"].click();
+        },
+        clearImageInput: function() {
+            this.$refs["image-input"].value = null;
+        },
+        onImageInputChange: async function(event) {
+            if(event.target.files.length > 0){
+
+                // get selected file
+                const file = event.target.files[0];
+
+                // process file based on selected image quality
+                switch(this.selectedImageQuality) {
+                    case "low": {
+                        new Compressor(file, {
+                            maxWidth: 320,
+                            maxHeight: 320,
+                            quality: 0.2,
+                            mimeType: "image/webp",
+                            success: (result) => {
+                                this.$emit("add-image", result);
+                            },
+                            error: (err) => {
+                                DialogUtils.alert(err.message);
+                            },
+                        });
+                        break;
+                    }
+                    case "medium": {
+                        new Compressor(file, {
+                            maxWidth: 640,
+                            maxHeight: 640,
+                            quality: 0.6,
+                            mimeType: "image/webp",
+                            success: (result) => {
+                                this.$emit("add-image", result);
+                            },
+                            error: (err) => {
+                                DialogUtils.alert(err.message);
+                            },
+                        });
+                        break;
+                    }
+                    case "high": {
+                        new Compressor(file, {
+                            maxWidth: 1280,
+                            maxHeight: 1280,
+                            quality: 0.75,
+                            mimeType: "image/webp",
+                            success: (result) => {
+                                this.$emit("add-image", result);
+                            },
+                            error: (err) => {
+                                DialogUtils.alert(err.message);
+                            },
+                        });
+                        break;
+                    }
+                    case "original": {
+                        this.$emit("add-image", file);
+                        break;
+                    }
+                    default: {
+                        DialogUtils.alert(`Unsupported image quality: ${this.selectedImageQuality}`);
+                        break;
+                    }
+                }
+
+                // clear image input to allow selecting the same file after user removed it
+                this.clearImageInput();
+
+            }
+        },
+    },
+}
+</script>
diff --git a/src/frontend/components/messages/ConversationViewer.vue b/src/frontend/components/messages/ConversationViewer.vue
index 9eb2e20..d4e942f 100644
--- a/src/frontend/components/messages/ConversationViewer.vue
+++ b/src/frontend/components/messages/ConversationViewer.vue
@@ -334,12 +334,9 @@
                         </button>
 
                         <!-- add image -->
-                        <button @click="addImageToMessage" type="button" class="my-auto mr-1 inline-flex items-center gap-x-1 rounded-md bg-gray-500 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500 dark:bg-zinc-800 dark:text-white dark:hover:bg-zinc-700 dark:focus-visible:outline-zinc-500">
-                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5">
-                                <path fill-rule="evenodd" d="M1.5 6a2.25 2.25 0 0 1 2.25-2.25h16.5A2.25 2.25 0 0 1 22.5 6v12a2.25 2.25 0 0 1-2.25 2.25H3.75A2.25 2.25 0 0 1 1.5 18V6ZM3 16.06V18c0 .414.336.75.75.75h16.5A.75.75 0 0 0 21 18v-1.94l-2.69-2.689a1.5 1.5 0 0 0-2.12 0l-.88.879.97.97a.75.75 0 1 1-1.06 1.06l-5.16-5.159a1.5 1.5 0 0 0-2.12 0L3 16.061Zm10.125-7.81a1.125 1.125 0 1 1 2.25 0 1.125 1.125 0 0 1-2.25 0Z" clip-rule="evenodd" />
-                            </svg>
-                            <span class="ml-1 hidden xl:inline-block whitespace-nowrap">Add Image</span>
-                        </button>
+                        <div>
+                            <AddImageButton @add-image="onImageSelected"/>
+                        </div>
 
                         <!-- add audio -->
                         <div>
@@ -369,7 +366,6 @@
         </div>
 
         <!-- hidden file input for selecting files -->
-        <input ref="image-input" @change="onImageInputChange" type="file" accept="image/*" style="display:none"/>
         <input ref="file-input" @change="onFileInputChange" type="file" multiple style="display:none"/>
 
     </div>
@@ -398,10 +394,12 @@ import moment from "moment";
 import SendMessageButton from "./SendMessageButton.vue";
 import MaterialDesignIcon from "../MaterialDesignIcon.vue";
 import ConversationDropDownMenu from "./ConversationDropDownMenu.vue";
+import AddImageButton from "./AddImageButton.vue";
 
 export default {
     name: 'ConversationViewer',
     components: {
+        AddImageButton,
         ConversationDropDownMenu,
         MaterialDesignIcon,
         SendMessageButton,
@@ -1095,7 +1093,6 @@ export default {
                 this.newMessageImageUrl = null;
                 this.newMessageAudio = null;
                 this.newMessageFiles = [];
-                this.clearImageInput();
                 this.clearFileInput();
 
             } catch(e) {
@@ -1166,28 +1163,20 @@ export default {
             this.newMessageImage = null;
             this.newMessageImageUrl = null;
         },
-        onImageInputChange: function(event) {
-            if(event.target.files.length > 0){
+        onImageSelected: function(imageBlob) {
 
-                // update selected file
-                this.newMessageImage = event.target.files[0];
-
-                // update image url when file is read
-                const fileReader = new FileReader();
-                fileReader.onload = (event) => {
-                    this.newMessageImageUrl = event.target.result
-                }
-
-                // convert image to data url
-                fileReader.readAsDataURL(this.newMessageImage);
-
-                // clear image input to allow selecting the same file after user removed it
-                this.clearImageInput();
+            // update selected file
+            this.newMessageImage = imageBlob;
 
+            // update image url when file is read
+            const fileReader = new FileReader();
+            fileReader.onload = (event) => {
+                this.newMessageImageUrl = event.target.result
             }
-        },
-        clearImageInput: function() {
-            this.$refs["image-input"].value = null;
+
+            // convert image to data url
+            fileReader.readAsDataURL(this.newMessageImage);
+
         },
         async startRecordingAudioAttachment(args) {
 
@@ -1376,9 +1365,6 @@ export default {
         addFilesToMessage: function() {
             this.$refs["file-input"].click();
         },
-        addImageToMessage: function() {
-            this.$refs["image-input"].click();
-        },
         findConversation: function(destinationHash) {
             return this.conversations.find((conversation) => {
                 return conversation.destination_hash === destinationHash;