Split image cropping into secondary step (#473)

* Split image cropping into secondary step

* Use ImageModel and GalleryModel

* Add fix for pasting image URLs

* Move models to state folder

* Fix things that broke after rebase

* Latest -- has image display bug

* Remove contentFit

* Fix iOS display in gallery

* Tuneup the api signatures and implement compress/resize on web

* Fix await

* Lint fix and remove unused function

* Fix android image pathing

* Fix external embed x button on android

* Remove min-height from composer (no longer useful and was mispositioning the composer on android)

* Fix e2e picker

---------

Co-authored-by: Paul Frazee <pfrazee@gmail.com>

src/lib/media/picker.e2e.tsx

@@ -1,13 +1,8 @@
 import {RootStoreModel} from 'state/index'
-import {PickerOpts, CameraOpts, CropperOpts, PickedMedia} from './types'
-import {
-  scaleDownDimensions,
-  Dim,
-  compressIfNeeded,
-  moveToPremanantPath,
-} from 'lib/media/manip'
-export type {PickedMedia} from './types'
+import {Image as RNImage} from 'react-native-image-crop-picker'
 import RNFS from 'react-native-fs'
+import {CropperOptions} from './types'
+import {compressAndResizeImageForPost} from './manip'
 
 let _imageCounter = 0
 async function getFile() {
@@ -17,100 +12,33 @@ async function getFile() {
       .concat(['Media', 'DCIM', '100APPLE'])
       .join('/'),
   )
-  return files[_imageCounter++ % files.length]
-}
-
-export async function openPicker(
-  _store: RootStoreModel,
-  opts: PickerOpts,
-): Promise<PickedMedia[]> {
-  const mediaType = opts.mediaType || 'photo'
-  const items = await getFile()
-  const toMedia = (item: RNFS.ReadDirItem) => ({
-    mediaType,
-    path: item.path,
+  const file = files[_imageCounter++ % files.length]
+  return await compressAndResizeImageForPost({
+    path: file.path,
     mime: 'image/jpeg',
-    size: item.size,
+    size: file.size,
     width: 4288,
     height: 2848,
   })
-  if (Array.isArray(items)) {
-    return items.map(toMedia)
-  }
-  return [toMedia(items)]
 }
 
-export async function openCamera(
-  _store: RootStoreModel,
-  opts: CameraOpts,
-): Promise<PickedMedia> {
-  const mediaType = opts.mediaType || 'photo'
-  const item = await getFile()
-  return {
-    mediaType,
-    path: item.path,
-    mime: 'image/jpeg',
-    size: item.size,
-    width: 4288,
-    height: 2848,
-  }
+export async function openPicker(_store: RootStoreModel): Promise<RNImage[]> {
+  return [await getFile()]
+}
+
+export async function openCamera(_store: RootStoreModel): Promise<RNImage> {
+  return await getFile()
 }
 
 export async function openCropper(
   _store: RootStoreModel,
-  opts: CropperOpts,
-): Promise<PickedMedia> {
-  const mediaType = opts.mediaType || 'photo'
-  const item = await getFile()
+  opts: CropperOptions,
+): Promise<RNImage> {
   return {
-    mediaType,
-    path: item.path,
+    path: opts.path,
     mime: 'image/jpeg',
-    size: item.size,
+    size: 123,
     width: 4288,
     height: 2848,
   }
 }
-
-export async function pickImagesFlow(
-  store: RootStoreModel,
-  maxFiles: number,
-  maxDim: Dim,
-  maxSize: number,
-) {
-  const items = await openPicker(store, {
-    multiple: true,
-    maxFiles,
-    mediaType: 'photo',
-  })
-  const result = []
-  for (const image of items) {
-    result.push(
-      await cropAndCompressFlow(store, image.path, image, maxDim, maxSize),
-    )
-  }
-  return result
-}
-
-export async function cropAndCompressFlow(
-  store: RootStoreModel,
-  path: string,
-  imgDim: Dim,
-  maxDim: Dim,
-  maxSize: number,
-) {
-  // choose target dimensions based on the original
-  // this causes the photo cropper to start with the full image "selected"
-  const {width, height} = scaleDownDimensions(imgDim, maxDim)
-  const cropperRes = await openCropper(store, {
-    mediaType: 'photo',
-    path,
-    freeStyleCropEnabled: true,
-    width,
-    height,
-  })
-
-  const img = await compressIfNeeded(cropperRes, maxSize)
-  const permanentPath = await moveToPremanantPath(img.path)
-  return permanentPath
-}