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/view/com/modals/EditProfile.tsx

@@ -8,7 +8,7 @@ import {
 } from 'react-native'
 import LinearGradient from 'react-native-linear-gradient'
 import {ScrollView, TextInput} from './util'
-import {PickedMedia} from '../../../lib/media/picker'
+import {Image as RNImage} from 'react-native-image-crop-picker'
 import {Text} from '../util/text/Text'
 import {ErrorMessage} from '../util/error/ErrorMessage'
 import {useStores} from 'state/index'
@@ -53,15 +53,15 @@ export function Component({
     profileView.avatar,
   )
   const [newUserBanner, setNewUserBanner] = useState<
-    PickedMedia | undefined | null
+    RNImage | undefined | null
   >()
   const [newUserAvatar, setNewUserAvatar] = useState<
-    PickedMedia | undefined | null
+    RNImage | undefined | null
   >()
   const onPressCancel = () => {
     store.shell.closeModal()
   }
-  const onSelectNewAvatar = async (img: PickedMedia | null) => {
+  const onSelectNewAvatar = async (img: RNImage | null) => {
     track('EditProfile:AvatarSelected')
     try {
       // if img is null, user selected "remove avatar"
@@ -71,13 +71,13 @@ export function Component({
         return
       }
       const finalImg = await compressIfNeeded(img, 1000000)
-      setNewUserAvatar({mediaType: 'photo', ...finalImg})
+      setNewUserAvatar(finalImg)
       setUserAvatar(finalImg.path)
     } catch (e: any) {
       setError(cleanError(e))
     }
   }
-  const onSelectNewBanner = async (img: PickedMedia | null) => {
+  const onSelectNewBanner = async (img: RNImage | null) => {
     if (!img) {
       setNewUserBanner(null)
       setUserBanner(null)
@@ -86,7 +86,7 @@ export function Component({
     track('EditProfile:BannerSelected')
     try {
       const finalImg = await compressIfNeeded(img, 1000000)
-      setNewUserBanner({mediaType: 'photo', ...finalImg})
+      setNewUserBanner(finalImg)
       setUserBanner(finalImg.path)
     } catch (e: any) {
       setError(cleanError(e))

src/view/com/modals/crop-image/CropImage.web.tsx

@@ -4,7 +4,7 @@ import ImageEditor from 'react-avatar-editor'
 import {Slider} from '@miblanchard/react-native-slider'
 import LinearGradient from 'react-native-linear-gradient'
 import {Text} from 'view/com/util/text/Text'
-import {PickedMedia} from 'lib/media/types'
+import {Dimensions, Image} from 'lib/media/types'
 import {getDataUriSize} from 'lib/media/util'
 import {s, gradients} from 'lib/styles'
 import {useStores} from 'state/index'
@@ -16,11 +16,8 @@ enum AspectRatio {
   Wide = 'wide',
   Tall = 'tall',
 }
-interface Dim {
-  width: number
-  height: number
-}
-const DIMS: Record<string, Dim> = {
+
+const DIMS: Record<string, Dimensions> = {
   [AspectRatio.Square]: {width: 1000, height: 1000},
   [AspectRatio.Wide]: {width: 1000, height: 750},
   [AspectRatio.Tall]: {width: 750, height: 1000},
@@ -33,7 +30,7 @@ export function Component({
   onSelect,
 }: {
   uri: string
-  onSelect: (img?: PickedMedia) => void
+  onSelect: (img?: Image) => void
 }) {
   const store = useStores()
   const pal = usePalette('default')
@@ -52,7 +49,6 @@ export function Component({
     if (canvas) {
       const dataUri = canvas.toDataURL('image/jpeg')
       onSelect({
-        mediaType: 'photo',
         path: dataUri,
         mime: 'image/jpeg',
         size: getDataUriSize(dataUri),