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>

1 files changed, 8 insertions, 61 deletions

diff --git a/src/lib/media/picker.web.tsx b/src/lib/media/picker.web.tsx
index 158c37971..3a9869985 100644
--- a/src/lib/media/picker.web.tsx
+++ b/src/lib/media/picker.web.tsx
@@ -1,16 +1,10 @@
 /// <reference lib="dom" />
 
-import {PickerOpts, CameraOpts, CropperOpts, PickedMedia} from './types'
-export type {PickedMedia} from './types'
+import {PickerOpts, CameraOpts, CropperOptions} from './types'
 import {RootStoreModel} from 'state/index'
-import {
-  scaleDownDimensions,
-  getImageDim,
-  Dim,
-  compressIfNeeded,
-  moveToPremanantPath,
-} from 'lib/media/manip'
+import {getImageDim} from 'lib/media/manip'
 import {extractDataUriMime} from './util'
+import {Image as RNImage} from 'react-native-image-crop-picker'
 
 interface PickedFile {
   uri: string
@@ -21,13 +15,12 @@ interface PickedFile {
 export async function openPicker(
   _store: RootStoreModel,
   opts: PickerOpts,
-): Promise<PickedMedia[]> {
+): Promise<RNImage[]> {
   const res = await selectFile(opts)
   const dim = await getImageDim(res.uri)
   const mime = extractDataUriMime(res.uri)
   return [
     {
-      mediaType: 'photo',
       path: res.uri,
       mime,
       size: res.size,
@@ -40,21 +33,21 @@ export async function openPicker(
 export async function openCamera(
   _store: RootStoreModel,
   _opts: CameraOpts,
-): Promise<PickedMedia> {
+): Promise<RNImage> {
   // const mediaType = opts.mediaType || 'photo' TODO
   throw new Error('TODO')
 }
 
 export async function openCropper(
   store: RootStoreModel,
-  opts: CropperOpts,
-): Promise<PickedMedia> {
+  opts: CropperOptions,
+): Promise<RNImage> {
   // TODO handle more opts
   return new Promise((resolve, reject) => {
     store.shell.openModal({
       name: 'crop-image',
       uri: opts.path,
-      onSelect: (img?: PickedMedia) => {
+      onSelect: (img?: RNImage) => {
         if (img) {
           resolve(img)
         } else {
@@ -65,52 +58,6 @@ export async function openCropper(
   })
 }
 
-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
-}
-
-// helpers
-// =
-
 /**
  * Opens the select file dialog in the browser.
  * NOTE: