Start with highest quality compression and find a suitable size (#33)

src/view/com/composer/PhotoCarouselPicker.tsx

@@ -7,13 +7,14 @@ import {
   openCamera,
   openCropper,
 } from 'react-native-image-crop-picker'
+import {compressIfNeeded} from '../../../lib/images'
 
 const IMAGE_PARAMS = {
   width: 500,
   height: 500,
   freeStyleCropEnabled: true,
   forceJpg: true, // ios only
-  compressImageQuality: 0.7,
+  compressImageQuality: 1.0,
 }
 
 export const PhotoCarouselPicker = ({
@@ -25,29 +26,35 @@ export const PhotoCarouselPicker = ({
   onSelectPhotos: (v: string[]) => void
   localPhotos: any
 }) => {
-  const handleOpenCamera = useCallback(() => {
-    openCamera({
-      mediaType: 'photo',
-      cropping: true,
-      ...IMAGE_PARAMS,
-    }).then(
-      item => {
-        onSelectPhotos([item.path, ...selectedPhotos])
-      },
-      _err => {
-        // ignore
-      },
-    )
+  const handleOpenCamera = useCallback(async () => {
+    try {
+      const cameraRes = await openCamera({
+        mediaType: 'photo',
+        cropping: true,
+        ...IMAGE_PARAMS,
+      })
+      const uri = await compressIfNeeded(cameraRes, 300000)
+      onSelectPhotos([uri, ...selectedPhotos])
+    } catch (err) {
+      // ignore
+      console.log('Error using camera', err)
+    }
   }, [selectedPhotos, onSelectPhotos])
 
   const handleSelectPhoto = useCallback(
     async (uri: string) => {
-      const img = await openCropper({
-        mediaType: 'photo',
-        path: uri,
-        ...IMAGE_PARAMS,
-      })
-      onSelectPhotos([img.path, ...selectedPhotos])
+      try {
+        const cropperRes = await openCropper({
+          mediaType: 'photo',
+          path: uri,
+          ...IMAGE_PARAMS,
+        })
+        const finalUri = await compressIfNeeded(cropperRes, 300000)
+        onSelectPhotos([finalUri, ...selectedPhotos])
+      } catch (err) {
+        // ignore
+        console.log('Error selecting photo', err)
+      }
     },
     [selectedPhotos, onSelectPhotos],
   )
@@ -60,13 +67,14 @@ export const PhotoCarouselPicker = ({
     }).then(async items => {
       const result = []
 
-      for await (const image of items) {
-        const img = await openCropper({
+      for (const image of items) {
+        const cropperRes = await openCropper({
           mediaType: 'photo',
           path: image.path,
           ...IMAGE_PARAMS,
         })
-        result.push(img.path)
+        const finalUri = await compressIfNeeded(cropperRes, 300000)
+        result.push(finalUri)
       }
       onSelectPhotos([...result, ...selectedPhotos])
     })

src/view/com/modals/EditProfile.tsx

@@ -20,6 +20,7 @@ import {
   MAX_DESCRIPTION,
 } from '../../../lib/strings'
 import {isNetworkError} from '../../../lib/errors'
+import {compressIfNeeded} from '../../../lib/images'
 import {UserBanner} from '../util/UserBanner'
 import {UserAvatar} from '../util/UserAvatar'
 
@@ -52,13 +53,23 @@ export function Component({
   const onPressCancel = () => {
     store.shell.closeModal()
   }
-  const onSelectNewAvatar = (img: PickedImage) => {
-    setNewUserAvatar(img)
-    setUserAvatar(img.path)
+  const onSelectNewAvatar = async (img: PickedImage) => {
+    try {
+      setNewUserAvatar(img)
+      const uri = await compressIfNeeded(img, 300000)
+      setUserAvatar(uri)
+    } catch (e: any) {
+      setError(e.message || e.toString())
+    }
   }
-  const onSelectNewBanner = (img: PickedImage) => {
-    setNewUserBanner(img)
-    setUserBanner(img.path)
+  const onSelectNewBanner = async (img: PickedImage) => {
+    try {
+      setNewUserBanner(img)
+      const uri = await compressIfNeeded(img, 500000)
+      setUserBanner(uri)
+    } catch (e: any) {
+      setError(e.message || e.toString())
+    }
   }
   const onPressSave = async () => {
     setProcessing(true)

src/view/com/util/UserAvatar.tsx

@@ -39,7 +39,7 @@ export function UserAvatar({
             height: 400,
             cropperCircleOverlay: true,
             forceJpg: true, // ios only
-            compressImageQuality: 0.7,
+            compressImageQuality: 1,
           }).then(onSelectNewAvatar)
         },
       },
@@ -56,7 +56,7 @@ export function UserAvatar({
               height: 400,
               cropperCircleOverlay: true,
               forceJpg: true, // ios only
-              compressImageQuality: 0.7,
+              compressImageQuality: 1,
             }).then(onSelectNewAvatar)
           })
         },

src/view/com/util/UserBanner.tsx

@@ -35,7 +35,7 @@ export function UserBanner({
             compressImageMaxHeight: 500,
             height: 500,
             forceJpg: true, // ios only
-            compressImageQuality: 0.4,
+            compressImageQuality: 1,
             includeExif: true,
           }).then(onSelectNewBanner)
         },
@@ -54,7 +54,7 @@ export function UserBanner({
               compressImageMaxHeight: 500,
               height: 500,
               forceJpg: true, // ios only
-              compressImageQuality: 0.4,
+              compressImageQuality: 1,
               includeExif: true,
             }).then(onSelectNewBanner)
           })