Merge pull request #26 from ente-io/rendering-heic-images

Rendering heic images

package.json

@@ -14,6 +14,7 @@
     "comlink": "^4.3.0",
     "exif-js": "^2.3.0",
     "formik": "^2.1.5",
+    "heic2any": "^0.0.3",
     "http-proxy-middleware": "^1.0.5",
     "libsodium-wrappers": "^0.7.8",
     "localforage": "^1.9.0",

src/pages/gallery/components/UploadProgress.tsx

@@ -37,7 +37,7 @@ export default function UploadProgress({
                         <ProgressBar animated now={now} />
                     </>
                 )}
-                {uploadErrors.length > 0 && (
+                {uploadErrors && uploadErrors.length > 0 && (
                     <>
                         <Alert variant="danger">
                             <div
@@ -46,8 +46,8 @@ export default function UploadProgress({
                                     height: '100px',
                                 }}
                             >
-                                {uploadErrors.map((error) => (
-                                    <li key={error.message}>{error.message}</li>
+                                {uploadErrors.map((error, index) => (
+                                    <li key={index}>{error.message}</li>
                                 ))}
                             </div>
                         </Alert>

src/services/downloadManager.ts

@@ -3,12 +3,16 @@ import { file } from './fileService';
 import HTTPService from './HTTPService';
 import { getEndpoint } from 'utils/common/apiUtil';
 import * as Comlink from 'comlink';
+import { getFileExtension } from 'utils/common/utilFunctions';
 
 const ENDPOINT = getEndpoint();
 const CryptoWorker: any =
     typeof window !== 'undefined' &&
     Comlink.wrap(new Worker('worker/crypto.worker.js', { type: 'module' }));
 
+const heic2any = typeof window !== 'undefined' && require('heic2any');
+const TYPE_HEIC = 'heic';
+
 class DownloadManager {
     private fileDownloads = new Map<number, Promise<string>>();
     private thumbnailDownloads = new Map<number, Promise<string>>();
@@ -50,7 +54,7 @@ class DownloadManager {
             }
             return await this.thumbnailDownloads.get(file.id);
         } catch (e) {
-            console.log('get preview Failed' , e );
+            console.log('get preview Failed', e);
         }
     }
 
@@ -65,20 +69,35 @@ class DownloadManager {
                         { responseType: 'arraybuffer' }
                     );
                     const worker = await new CryptoWorker();
-                    const decrypted: any = await worker.decryptFile(
+                    const decryptedFile: any = await worker.decryptFile(
                         new Uint8Array(resp.data),
                         await worker.fromB64(file.file.decryptionHeader),
                         file.key
                     );
-                    return URL.createObjectURL(new Blob([decrypted]));
+                    let decryptedFileBlob = new Blob([decryptedFile]);
+
+                    if (getFileExtension(file.metadata.title) === TYPE_HEIC) {
+                        decryptedFileBlob = await this.convertHEIC2JPEG(
+                            decryptedFileBlob
+                        );
+                    }
+                    return URL.createObjectURL(decryptedFileBlob);
                 } catch (e) {
-                    console.log('get file failed ' , e );
+                    console.log('get file failed ', e);
                 }
             })();
             this.fileDownloads.set(file.id, download);
         }
         return await this.fileDownloads.get(file.id);
     };
+
+    private async convertHEIC2JPEG(fileBlob): Promise<Blob> {
+        return await heic2any({
+            blob: fileBlob,
+            toType: 'image/jpeg',
+            quality: 1,
+        });
+    }
 }
 
 export default new DownloadManager(getToken());

src/utils/common/utilFunctions.ts

@@ -1,4 +1,4 @@
-import {errorCodes} from './errorUtil';
+import { errorCodes } from './errorUtil';
 
 export function checkConnectivity() {
     if (navigator.onLine) {
@@ -7,3 +7,7 @@ export function checkConnectivity() {
         throw new Error(errorCodes.ERR_NO_INTERNET_CONNECTION);
     }
 }
+
+export function getFileExtension(fileName): string {
+    return fileName.substr(fileName.lastIndexOf('.') + 1).toLowerCase();
+}

yarn.lock

@@ -3306,6 +3306,11 @@ he@1.1.1:
   resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd"
   integrity sha1-k0EP0hsAlzUVH4howvJx80J+I/0=
 
+heic2any@^0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/heic2any/-/heic2any-0.0.3.tgz#59248665a3646424b1f88c0aaaa1abba3bbd1aae"
+  integrity sha512-1KG0LzZuIPiqyJjwLgGlgrgWd3UBwUE9g5+tOuHy8PbeH2hF0U4gc4ZWT4ChlCmcdISr1xVRimSehsTOPdRXnQ==
+
 hmac-drbg@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"