Message Requests

ts/util/imageToBlurHash.ts

@@ -0,0 +1,50 @@
+import loadImage from 'blueimp-load-image';
+import { encode } from 'blurhash';
+
+type Input = Parameters<typeof loadImage>[0];
+
+const loadImageData = async (input: Input): Promise<ImageData> => {
+  return new Promise((resolve, reject) => {
+    loadImage(
+      input,
+      canvasOrError => {
+        if (canvasOrError instanceof Event && canvasOrError.type === 'error') {
+          const processError = new Error(
+            'imageToBlurHash: Failed to process image'
+          );
+          processError.cause = canvasOrError;
+          reject(processError);
+          return;
+        }
+        if (canvasOrError instanceof HTMLCanvasElement) {
+          const context = canvasOrError.getContext('2d');
+          resolve(
+            context?.getImageData(
+              0,
+              0,
+              canvasOrError.width,
+              canvasOrError.height
+            )
+          );
+        }
+        const error = new Error(
+          'imageToBlurHash: Failed to place image on canvas'
+        );
+        reject(error);
+        return;
+      },
+      // Calculating the blurhash on large images is a long-running and
+      // synchronous operation, so here we ensure the images are a reasonable
+      // size before calculating the blurhash. iOS uses a max size of 200x200
+      // and Android uses a max size of 1/16 the original size. 200x200 is
+      // easier for us.
+      { canvas: true, orientation: true, maxWidth: 200, maxHeight: 200 }
+    );
+  });
+};
+
+export const imageToBlurHash = async (input: Input) => {
+  const { data, width, height } = await loadImageData(input);
+  // 4 horizontal components and 3 vertical components
+  return encode(data, width, height, 4, 3);
+};

ts/util/lint/exceptions.json

@@ -219,6 +219,14 @@
     "reasonCategory": "usageTrusted",
     "updated": "2020-03-25T15:45:04.024Z"
   },
+  {
+    "rule": "jQuery-wrap(",
+    "path": "js/models/conversations.js",
+    "line": "      await wrap(",
+    "lineNumber": 641,
+    "reasonCategory": "falseMatch",
+    "updated": "2020-05-27T21:15:43.044Z"
+  },
   {
     "rule": "jQuery-append(",
     "path": "js/modules/debuglogs.js",
@@ -570,7 +578,7 @@
     "line": "      if (e && this.$(e.target).closest('.capture-audio').length > 0) {",
     "lineNumber": 198,
     "reasonCategory": "usageTrusted",
-    "updated": "2019-10-21T22:30:15.622Z",
+    "updated": "2020-05-20T20:10:43.540Z",
     "reasonDetail": "Known DOM elements"
   },
   {
@@ -579,7 +587,7 @@
     "line": "      this.$('.conversation:first .recorder').trigger('close');",
     "lineNumber": 201,
     "reasonCategory": "usageTrusted",
-    "updated": "2019-10-21T22:30:15.622Z",
+    "updated": "2020-05-20T20:10:43.540Z",
     "reasonDetail": "Hardcoded selector"
   },
   {
@@ -11426,18 +11434,18 @@
     "rule": "DOM-innerHTML",
     "path": "ts/components/CompositionArea.js",
     "line": "    el.innerHTML = '';",
-    "lineNumber": 22,
+    "lineNumber": 23,
     "reasonCategory": "usageTrusted",
-    "updated": "2019-08-01T14:10:37.481Z",
+    "updated": "2020-05-20T20:10:43.540Z",
     "reasonDetail": "Our code, no user input, only clearing out the dom"
   },
   {
     "rule": "DOM-innerHTML",
     "path": "ts/components/CompositionArea.tsx",
     "line": "  el.innerHTML = '';",
-    "lineNumber": 73,
+    "lineNumber": 80,
     "reasonCategory": "usageTrusted",
-    "updated": "2019-12-16T14:36:25.614ZZ",
+    "updated": "2020-06-03T19:23:21.195Z",
     "reasonDetail": "Our code, no user input, only clearing out the dom"
   },
   {
@@ -11507,9 +11515,9 @@
     "rule": "React-createRef",
     "path": "ts/components/conversation/ConversationHeader.tsx",
     "line": "    this.menuTriggerRef = React.createRef();",
-    "lineNumber": 67,
+    "lineNumber": 68,
     "reasonCategory": "usageTrusted",
-    "updated": "2019-07-31T00:19:18.696Z",
+    "updated": "2020-05-20T20:10:43.540Z",
     "reasonDetail": "Used to reference popup menu"
   },
   {
@@ -11553,7 +11561,7 @@
     "line": "  public audioRef: React.RefObject<HTMLAudioElement> = React.createRef();",
     "lineNumber": 184,
     "reasonCategory": "usageTrusted",
-    "updated": "2020-04-30T15:59:13.160Z"
+    "updated": "2020-05-21T16:56:07.875Z"
   },
   {
     "rule": "React-createRef",
@@ -11561,7 +11569,7 @@
     "line": "  > = React.createRef();",
     "lineNumber": 188,
     "reasonCategory": "usageTrusted",
-    "updated": "2020-04-30T15:59:13.160Z"
+    "updated": "2020-05-21T16:56:07.875Z"
   },
   {
     "rule": "React-createRef",
@@ -11784,4 +11792,4 @@
     "reasonCategory": "falseMatch",
     "updated": "2020-04-05T23:45:16.746Z"
   }
-]
+]