Implement thumbnail creation for heic images

public/scripts/main.js

@@ -16,7 +16,8 @@ class PairDrop {
             "scripts/ui.js",
             "scripts/qr-code.min.js",
             "scripts/zip.min.js",
-            "scripts/no-sleep.min.js"
+            "scripts/no-sleep.min.js",
+            "scripts/heic2any.min.js"
         ];
 
         this.registerServiceWorker();

public/scripts/network.js

@@ -450,13 +450,12 @@ class Peer {
 
         Events.fire('set-progress', {peerId: this._peerId, progress: 0.8, status: 'prepare'})
 
-        let dataUrl;
+        let dataUrl = '';
-
         if (files[0].type.split('/')[0] === 'image') {
             try {
-                dataUrl = await getResizedImageDataUrl(files[0], 400, null, 0.9);
+                dataUrl = await getThumbnailAsDataUrl(files[0], 400, null, 0.9);
             } catch (e) {
-                dataUrl = '';
+                console.error(e);
             }
         }
 

public/scripts/ui.js

@@ -276,14 +276,28 @@ class PeersUI {
             files = await mime.addMissingMimeTypesToFiles(files);
 
             if (files[0].type.split('/')[0] === 'image') {
-                getResizedImageDataUrl(files[0], 80, null, 0.9)
+                try {
-                    .then(dataUrl => {
+                    let image = files[0]
-                        this.$shareModeImageThumb.style.backgroundImage = `url(${dataUrl})`;
+
-                        this.$shareModeImageThumb.removeAttribute('hidden');
+                    // Heic files can't be shown by browsers natively --> convert to jpeg
-                    })
+                    if (image.type === "image/heif" || image.type === "image/heic") {
-                    .catch(_ => {
+                        let blob = await fileToBlob(image);
-                        this.$shareModeFileThumb.removeAttribute('hidden');
+                        image = await heic2any({
-                    });
+                            blob,
+                            toType: "image/jpeg",
+                            quality: 0.9
+                        });
+                    }
+
+                    let imageUrl = URL.createObjectURL(image);
+                    this.$shareModeImageThumb.style.backgroundImage = `url(${imageUrl})`;
+
+                    await waitUntilImageIsLoaded(imageUrl);
+                    this.$shareModeImageThumb.removeAttribute('hidden');
+                } catch (e) {
+                    console.error(e);
+                    this.$shareModeFileThumb.removeAttribute('hidden');
+                }
             } else {
                 this.$shareModeFileThumb.removeAttribute('hidden');
             }

public/scripts/util.js

@@ -469,11 +469,30 @@ function base64ToArrayBuffer(base64) {
     return bytes.buffer;
 }
 
-function getResizedImageDataUrl(file, width = undefined, height = undefined, quality = 0.7) {
+async function fileToBlob (file) {
-    return new Promise((resolve, reject) => {
+    return new Blob([new Uint8Array(await file.arrayBuffer())], {type: file.type});
-        let image = new Image();
+}
-        image.src = URL.createObjectURL(file);
+
-        image.onload = _ => {
+function getThumbnailAsDataUrl(file, width = undefined, height = undefined, quality = 0.7) {
+    return new Promise(async (resolve, reject) => {
+        try {
+            if (file.type === "image/heif" || file.type === "image/heic") {
+                // browsers can't show heic files --> convert to jpeg before creating thumbnail
+                let blob = await fileToBlob(file);
+                file = await heic2any({
+                    blob,
+                    toType: "image/jpeg",
+                    quality: quality
+                });
+            }
+
+            let imageUrl = URL.createObjectURL(file);
+
+            let image = new Image();
+            image.src = imageUrl;
+
+            await waitUntilImageIsLoaded(imageUrl);
+
             let imageWidth = image.width;
             let imageHeight = image.height;
             let canvas = document.createElement('canvas');
@@ -501,11 +520,46 @@ function getResizedImageDataUrl(file, width = undefined, height = undefined, qua
 
             let dataUrl = canvas.toDataURL("image/jpeg", quality);
             resolve(dataUrl);
+        } catch (e) {
+            console.error(e);
+            reject(new Error(`Could not create an image thumbnail from type ${file.type}`));
         }
-        image.onerror = _ => reject(`Could not create an image thumbnail from type ${file.type}`);
     })
 }
 
+// Resolves returned promise when image is loaded and throws error if image cannot be shown
+function waitUntilImageIsLoaded(imageUrl, timeout = 10000) {
+    return new Promise((resolve, reject) => {
+        let image = new Image();
+        image.src = imageUrl;
+
+        const onLoad = () => {
+            cleanup();
+            resolve();
+        };
+
+        const onError = () => {
+            cleanup();
+            reject(new Error('Image failed to load.'));
+        };
+
+        const cleanup = () => {
+            clearTimeout(timeoutId);
+            image.onload = null;
+            image.onerror = null;
+            URL.revokeObjectURL(imageUrl);
+        };
+
+        const timeoutId = setTimeout(() => {
+            cleanup();
+            reject(new Error('Image loading timed out.'));
+        }, timeout);
+
+        image.onload = onLoad;
+        image.onerror = onError;
+    });
+}
+
 async function decodeBase64Files(base64) {
     if (!base64) throw new Error('Base64 is empty');