replaced heic2any pacakeg with heic-convert and use custom worker

next.config.js

@@ -43,6 +43,12 @@ module.exports = withSentryConfig(
                     },
                 ];
             },
+            webpack: (config, { isServer }) => {
+                if (!isServer) {
+                    config.resolve.fallback.fs = false;
+                }
+                return config;
+            },
         })
     ),
     { release: gitSha }

package.json

@@ -31,6 +31,7 @@
     "exif-js": "^2.3.0",
     "file-type": "^16.5.3",
     "formik": "^2.1.5",
+    "heic-convert": "^1.2.4",
     "heic2any": "^0.0.3",
     "http-proxy-middleware": "^1.0.5",
     "is-electron": "^2.2.0",

src/services/upload/thumbnailService.ts

@@ -1,6 +1,5 @@
 import { FILE_TYPE } from 'services/fileService';
 import { CustomError, errorWithContext } from 'utils/common/errorUtil';
-import { convertHEIC2JPEG } from 'utils/file';
 import { logError } from 'utils/sentry';
 import { BLACK_THUMBNAIL_BASE64 } from '../../../public/images/black-thumbnail-b64';
 import FFmpegService from 'services/ffmpegService';
@@ -23,7 +22,7 @@ export async function generateThumbnail(
         let thumbnail: Uint8Array;
         try {
             if (fileType === FILE_TYPE.IMAGE) {
-                canvas = await generateImageThumbnail(file, isHEIC);
+                canvas = await generateImageThumbnail(worker, file, isHEIC);
             } else {
                 try {
                     const thumb = await FFmpegService.generateThumbnail(file);
@@ -52,6 +51,7 @@ export async function generateThumbnail(
 }
 
 export async function generateImageThumbnail(
+    worker,
     file: globalThis.File,
     isHEIC: boolean
 ) {
@@ -62,7 +62,11 @@ export async function generateImageThumbnail(
     let timeout = null;
 
     if (isHEIC) {
-        file = new globalThis.File([await convertHEIC2JPEG(file)], null, null);
+        file = new globalThis.File(
+            [await worker.convertHEIC2JPEG(file)],
+            null,
+            null
+        );
     }
     let image = new Image();
     imageURL = URL.createObjectURL(file);

src/utils/file/convertHEIC.ts

@@ -0,0 +1,15 @@
+import * as HeicConvert from 'heic-convert';
+
+export async function convertHEIC2JPEG(fileBlob: Blob): Promise<Blob> {
+    try {
+        const filedata = new Uint8Array(await fileBlob.arrayBuffer());
+        console.log(filedata);
+        const result = await HeicConvert({ buffer: filedata, format: 'JPEG' });
+        const convertedFileData = new Uint8Array(result);
+        const convertedFileBlob = new Blob([convertedFileData]);
+        console.log(URL.createObjectURL(convertedFileBlob));
+        return convertedFileBlob;
+    } catch (e) {
+        console.log(e);
+    }
+}

src/utils/file/index.ts

@@ -2,7 +2,6 @@ import { Collection } from 'services/collectionService';
 import { File, FILE_TYPE } from 'services/fileService';
 import { decodeMotionPhoto } from 'services/motionPhotoService';
 import { getMimeTypeFromBlob } from 'services/upload/readFileService';
-import { runningInBrowser } from 'utils/common';
 import CryptoWorker from 'utils/crypto';
 
 export const TYPE_HEIC = 'heic';
@@ -25,15 +24,6 @@ export function downloadAsFile(filename: string, content: string) {
     a.remove();
 }
 
-export async function convertHEIC2JPEG(fileBlob: Blob): Promise<Blob> {
-    const heic2any = runningInBrowser() && require('heic2any');
-    return await heic2any({
-        blob: fileBlob,
-        toType: 'image/jpeg',
-        quality: 1,
-    });
-}
-
 export function fileIsHEIC(mimeType: string) {
     return (
         mimeType.toLowerCase().endsWith(TYPE_HEIC) ||
@@ -190,9 +180,8 @@ export async function convertForPreview(file: File, fileBlob: Blob) {
 
     const mimeType =
         (await getMimeTypeFromBlob(worker, fileBlob)) ?? typeFromExtension;
-
     if (fileIsHEIC(mimeType)) {
-        fileBlob = await convertHEIC2JPEG(fileBlob);
+        fileBlob = await worker.convertHEIC2JPEG(fileBlob);
     }
     return fileBlob;
 }

src/worker/crypto.worker.js

@@ -1,5 +1,6 @@
 import * as Comlink from 'comlink';
 import * as libsodium from 'utils/crypto/libsodium';
+import { convertHEIC2JPEG } from 'utils/file/convertHEIC';
 
 export class Crypto {
     async decryptMetadata(file) {
@@ -171,6 +172,10 @@ export class Crypto {
             throw e;
         }
     }
+
+    async convertHEIC2JPEG(file) {
+        return convertHEIC2JPEG(file);
+    }
 }
 
 Comlink.expose(Crypto);

yarn.lock

@@ -3619,6 +3619,22 @@ he@1.2.0:
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
+heic-convert@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/heic-convert/-/heic-convert-1.2.4.tgz#605820f98ace3949a40fc7b263ee0bc573a0176b"
+  integrity sha512-klJHyv+BqbgKiCQvCqI9IKIvweCcohDuDl0Jphearj8+16+v8eff2piVevHqq4dW9TK0r1onTR6PKHP1I4hdbA==
+  dependencies:
+    heic-decode "^1.1.2"
+    jpeg-js "^0.4.1"
+    pngjs "^3.4.0"
+
+heic-decode@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/heic-decode/-/heic-decode-1.1.2.tgz#974701666432e31ed64b2263a1ece7cff5218209"
+  integrity sha512-UF8teegxvzQPdSTcx5frIUhitNDliz/9Pui0JFdIqVRE00spVE33DcCYtZqaLNyd4y5RP/QQWZFIc1YWVKKm2A==
+  dependencies:
+    libheif-js "^1.10.0"
+
 heic2any@^0.0.3:
   version "0.0.3"
   resolved "https://registry.yarnpkg.com/heic2any/-/heic2any-0.0.3.tgz#59248665a3646424b1f88c0aaaa1abba3bbd1aae"
@@ -4055,6 +4071,11 @@ jest-worker@^24.9.0:
     merge-stream "^2.0.0"
     supports-color "^6.1.0"
 
+jpeg-js@^0.4.1:
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/jpeg-js/-/jpeg-js-0.4.3.tgz#6158e09f1983ad773813704be80680550eff977b"
+  integrity sha512-ru1HWKek8octvUHFHvE5ZzQ1yAsJmIvRdGWvSoKV52XKyuyYA437QWDttXT8eZXDSbuMpHlLzPDZUPd6idIz+Q==
+
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
@@ -4162,6 +4183,11 @@ levn@^0.4.1:
     prelude-ls "^1.2.1"
     type-check "~0.4.0"
 
+libheif-js@^1.10.0:
+  version "1.12.0"
+  resolved "https://registry.yarnpkg.com/libheif-js/-/libheif-js-1.12.0.tgz#9ad1ed16a8e6412b4d3d83565d285465a00e7305"
+  integrity sha512-hDs6xQ7028VOwAFwEtM0Q+B2x2NW69Jb2MhQFUbk3rUrHzz4qo5mqS8VrqNgYnSc8TiUGnR691LnO4uIfEE23w==
+
 libsodium-wrappers@^0.7.8:
   version "0.7.9"
   resolved "https://registry.yarnpkg.com/libsodium-wrappers/-/libsodium-wrappers-0.7.9.tgz#4ffc2b69b8f7c7c7c5594a93a4803f80f6d0f346"
@@ -5018,6 +5044,11 @@ please-upgrade-node@^3.2.0:
   dependencies:
     semver-compare "^1.0.0"
 
+pngjs@^3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-3.4.0.tgz#99ca7d725965fb655814eaf65f38f12bbdbf555f"
+  integrity sha512-NCrCHhWmnQklfH4MtJMRjZ2a8c80qXeMlQMv2uVp9ISJMTt562SbGd6n2oq0PaPgKm7Z6pL9E2UlLIhC+SHL3w==
+
 pnp-webpack-plugin@1.6.4:
   version "1.6.4"
   resolved "https://registry.yarnpkg.com/pnp-webpack-plugin/-/pnp-webpack-plugin-1.6.4.tgz#c9711ac4dc48a685dabafc86f8b6dd9f8df84149"