Merge pull request #378 from monkvision/fix/drivably

fix: MOZJPEG Compression format for Safari

Author: souyahia-monk

packages/camera/src/components/Camera/hooks/useCamera.js

@@ -18,7 +18,8 @@ const toBlob = (canvasElement, type) => new Promise((resolve) => {
  */
 const diff = 1;
 const canvas = document.createElement('canvas');
-const imageType = utils.supportsWebP ? 'image/webp' : 'image/png';
+const imageType = utils.supportsWebP ? 'image/webp' : 'image/jpeg';
+const imageFilenameExtension = imageType.substring('image/'.length);
 
 /**
  * `useCamera` is a hook that takes the `canvasResolution` which holds the dimensions of the canvas,
@@ -83,7 +84,7 @@ export default function useCamera(
 
     webCaptureTracing?.finish();
 
-    return { uri, width, height };
+    return { uri, width, height, imageType, imageFilenameExtension };
   }, [width, height, stream]);
 
   const resumePreview = async () => {

packages/camera/src/components/Camera/hooks/useCompression/index.js

@@ -37,19 +37,29 @@ export default function useCompression() {
    * @returns {Blob} - the compressed picture on webp format
    */
   return useCallback((data, width, height, options = {}) => {
+    const tweakedOptions = {
+      ...options,
+      quality: options.quality && options.quality <= 1 ? options.quality * 100 : options.quality,
+    };
+
     if (module) {
       return new Promise((resolve) => {
-        const result = module.encode(data, width, height, { ...defaultOptions, ...options });
+        const result = module.encode(data, width, height, { ...defaultOptions, ...tweakedOptions });
 
-        resolve(new Blob([result, { type: 'image/jpeg' }]));
+        resolve(new Blob([result], { type: 'image/jpeg' }));
       });
     }
 
     return new Promise((resolve, reject) => {
       webEnc()
         .then((newModule) => {
           setModule(newModule);
-          const result = newModule.encode(data, width, height, { ...defaultOptions, options });
+          const result = newModule.encode(
+            data,
+            width,
+            height,
+            { ...defaultOptions, tweakedOptions },
+          );
 
           resolve(new Blob([result], { type: 'image/jpeg' }));
         })

packages/camera/src/components/Capture/hooks.js

@@ -1,5 +1,5 @@
 import monk from '@monkvision/corejs';
-import { useSentry } from '@monkvision/toolkit';
+import { useSentry, utils } from '@monkvision/toolkit';
 import { SentryConstants } from '@monkvision/toolkit/src/hooks/useSentry';
 import axios from 'axios';
 import { Buffer } from 'buffer';
@@ -110,7 +110,7 @@ export function useSetPictureAsync({ current, sights, uploads, Sentry }) {
       const uri = picture.localUri || picture.uri;
 
       const actions = [{ resize: { width: 133 } }];
-      const saveFormat = Platform.OS === 'web' ? SaveFormat.WEBP : SaveFormat.JPEG;
+      const saveFormat = (Platform.OS === 'web' && utils.supportsWebP()) ? SaveFormat.WEBP : SaveFormat.JPEG;
       const saveOptions = { compress: 1, format: saveFormat };
       const imageResult = await manipulateAsync(uri, actions, saveOptions);
 
@@ -264,9 +264,14 @@ export function useStartUploadAsync({
         payload: { id, status: 'pending', label },
       });
 
-      const fileType = Platform.OS === 'web' ? 'webp' : 'jpg';
-      const filename = `${id}-${inspectionId}.${fileType}`;
-      const multiPartKeys = { image: 'image', json: 'json', filename, type: `image/${fileType}` };
+      const fileType = picture.fileType;
+      const filename = `${id}-${inspectionId}.${picture.imageFilenameExtension}`;
+      const multiPartKeys = {
+        image: 'image',
+        json: 'json',
+        type: fileType,
+        filename,
+      };
 
       const json = JSON.stringify({
         acquisition: {
@@ -296,7 +301,7 @@ export function useStartUploadAsync({
         fileBits = [file];
       } else {
         const buffer = Buffer.from(picture.uri, 'base64');
-        fileBits = new Blob([buffer], { type: 'png' });
+        fileBits = new Blob([buffer], { type: picture.imageFilenameExtension });
       }
 
       const file = await new File(

packages/camera/src/components/UploadCenter/UploadCard/index.js

@@ -22,7 +22,7 @@ function UploadCard({
   colors,
 }) {
   const { i18n } = useTranslation();
-  const { uri } = picture;
+  const uri = picture?.uri;
 
   const {
     isPending,
@@ -159,7 +159,7 @@ UploadCard.propTypes = {
   onReupload: PropTypes.func,
   picture: PropTypes.shape({
     uri: PropTypes.string,
-  }).isRequired,
+  }),
   upload: PropTypes.shape({
     error: PropTypes.objectOf(PropTypes.any),
     picture: PropTypes.shape({ uri: PropTypes.string }),
@@ -171,5 +171,6 @@ UploadCard.defaultProps = {
   onRetake: () => {},
   onReupload: () => {},
   onRecheck: () => {},
+  picture: undefined,
 };
 export default UploadCard;