From 5727afcfa869eaa14751793feab08752b0a68c73 Mon Sep 17 00:00:00 2001
From: Thaum Rystra <9525416+ThaumRystra@users.noreply.github.com>
Date: Tue, 3 Sep 2024 16:02:56 +0200
Subject: [PATCH] Added ThumbHash to user images

---
 .vscode/settings.json                         |  1 +
 .../client/ui/components/ImageUploadInput.vue | 32 +++++++++++++------
 .../ui/files/userImages/UserImageCard.vue     |  9 ++++++
 app/imports/client/ui/utility/getThumbHash.js | 14 ++++++++
 .../server/imageProcessing/createThumbnail.js |  8 -----
 app/package-lock.json                         |  5 +++
 app/package.json                              |  1 +
 7 files changed, 53 insertions(+), 17 deletions(-)
 create mode 100644 app/imports/client/ui/utility/getThumbHash.js
 delete mode 100644 app/imports/server/imageProcessing/createThumbnail.js

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 2704425a..9a719366 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -18,6 +18,7 @@
     "Ruleset",
     "snackbars",
     "Spellcasting",
+    "thumbhash",
     "uncomputed",
     "vuetify",
     "Vuex",
diff --git a/app/imports/client/ui/components/ImageUploadInput.vue b/app/imports/client/ui/components/ImageUploadInput.vue
index 5d2b0b98..8a331ff8 100644
--- a/app/imports/client/ui/components/ImageUploadInput.vue
+++ b/app/imports/client/ui/components/ImageUploadInput.vue
@@ -33,6 +33,7 @@
 
 <script lang="js">
 import UserImages from '/imports/api/files/userImages/UserImages';
+import getThumbHash from '/imports/client/ui/utility/getThumbHash.js'
 
 export default {
   data(){return {
@@ -42,20 +43,34 @@ export default {
     fileUploadError: undefined,
   }},
   watch: {
-    file(file){
+    async file(file){
       if (!file) return;
       let self = this;
+      let thumbHash = undefined;
+
+      // Start the loading state here, because we are loading and processing the image into
+      // a thumb hash
+      self.uploadingInProgress = true;
+      self.uploadIndeterminate = true;
+
+      // ThumbHashes are nice to have, but don't break upload if they fail
+      try {
+        thumbHash = await getThumbHash(file);
+      } catch (e) {
+        console.error('Failed to generate thumbHash')
+        console.error(e);
+      }
+
+      // Start the image insert process
       let uploadInstance = UserImages.insert({
         file: file,
         chunkSize: 'dynamic',
         allowWebWorkers: true,
         meta: {
           createdAt: new Date(),
+          thumbHash,
         },
-      }, false)
-
-      self.uploadingInProgress = true;
-      self.uploadIndeterminate = true;
+      }, false);
 
       uploadInstance.on('start', function () {
         self.progress = 0;
@@ -68,15 +83,11 @@ export default {
       });
 
       uploadInstance.on('uploaded', function (error, fileObj) {
-        // Remove the file from the input box
-        self.file = undefined;
         self.resetState();
         self.progress = 0;
       });
 
       uploadInstance.on('error', function (error, fileObj) {
-        // Remove the file from the input box
-        self.file = undefined;
         self.resetState();
         this.fileUploadError = error.reason || error.message || error.toString();
       });
@@ -99,9 +110,12 @@ export default {
       return;
     },
     resetState() {
+      // Remove file from input
       this.file = undefined;
+      // stop progress
       this.uploadingInProgress = false;
       this.progress = 0;
+      // Remove errors
       this.fileUploadError = undefined;
     },
   },
diff --git a/app/imports/client/ui/files/userImages/UserImageCard.vue b/app/imports/client/ui/files/userImages/UserImageCard.vue
index d6c2f7f7..0ecf75c3 100644
--- a/app/imports/client/ui/files/userImages/UserImageCard.vue
+++ b/app/imports/client/ui/files/userImages/UserImageCard.vue
@@ -4,6 +4,7 @@
     @click="previewImage"
   >
     <v-img
+      :lazy-src="thumbHashDataUrl"
       :src="model.link"
       :data-id="`${model._id}-image`"
     />
@@ -50,6 +51,7 @@
 <script lang="js">
 import { snackbar } from '/imports/client/ui/components/snackbars/SnackbarQueue';
 import removeUserImage from '/imports/api/files/userImages/methods/removeUserImage';
+import { thumbHashToDataURL } from 'thumbhash';
 
 export default {
   props: {
@@ -63,6 +65,13 @@ export default {
       removeLoading: false,
     }
   },
+  computed: {
+    thumbHashDataUrl() {
+      const thumbHash = this.model.meta?.thumbHash;
+      if (!thumbHash) return;
+      return thumbHashToDataURL(thumbHash);
+    }
+  },
   methods: {
     removeUserFile() {
       this.removeLoading = true;
diff --git a/app/imports/client/ui/utility/getThumbHash.js b/app/imports/client/ui/utility/getThumbHash.js
new file mode 100644
index 00000000..6360dee4
--- /dev/null
+++ b/app/imports/client/ui/utility/getThumbHash.js
@@ -0,0 +1,14 @@
+import * as ThumbHash from 'thumbhash';
+
+export default async function getThumbHash(file) {
+  const image = await createImageBitmap(file);
+  const canvas = document.createElement('canvas')
+  const context = canvas.getContext('2d')
+  if (!context) throw new Error('Could not get context');
+  const scale = 100 / Math.max(image.width, image.height)
+  canvas.width = Math.round(image.width * scale)
+  canvas.height = Math.round(image.height * scale)
+  context.drawImage(image, 0, 0, canvas.width, canvas.height)
+  const pixels = context.getImageData(0, 0, canvas.width, canvas.height)
+  return ThumbHash.rgbaToThumbHash(pixels.width, pixels.height, pixels.data)
+}
diff --git a/app/imports/server/imageProcessing/createThumbnail.js b/app/imports/server/imageProcessing/createThumbnail.js
deleted file mode 100644
index 4837133d..00000000
--- a/app/imports/server/imageProcessing/createThumbnail.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import * as sharp from 'sharp';
-
-export default async function createThumbnail(image) {
-  await sharp(image)
-  .resize(320, 240)
-  .png()
-  .toBuffer();
-}
diff --git a/app/package-lock.json b/app/package-lock.json
index 4f588061..7c536713 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -7941,6 +7941,11 @@
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
       "dev": true
     },
+    "thumbhash": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/thumbhash/-/thumbhash-0.1.1.tgz",
+      "integrity": "sha512-kH5pKeIIBPQXAOni2AiY/Cu/NKdkFREdpH+TLdM0g6WA7RriCv0kPLgP731ady67MhTAqrVG/4mnEeibVuCJcg=="
+    },
     "to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
diff --git a/app/package.json b/app/package.json
index bffca6f1..5c01d617 100644
--- a/app/package.json
+++ b/app/package.json
@@ -56,6 +56,7 @@
     "simpl-schema": "^1.13.1",
     "source-map-support": "^0.5.21",
     "speakingurl": "^14.0.1",
+    "thumbhash": "^0.1.1",
     "vivagraphjs": "^0.12.0",
     "vue": "2.6.14",
     "vue-meteor-tracker": "^2.0.0",