Rework scaled dimensions and compression (#737)

* Rework scaled dimensions and compression

* Unbreak image / banner uploads

---------

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

src/view/com/modals/EditImage.tsx

@@ -118,9 +118,9 @@ export const Component = observer(function ({image, gallery}: Props) {
   )
 
   useEffect(() => {
-    image.prev = image.compressed
+    image.prev = image.cropped
     image.prevAttributes = image.attributes
-    image.resetCompressed()
+    image.resetCropped()
   }, [image])
 
   const onCloseModal = useCallback(() => {
@@ -152,7 +152,7 @@ export const Component = observer(function ({image, gallery}: Props) {
         : {}),
     })
 
-    image.prev = image.compressed
+    image.prev = image.cropped
     image.prevAttributes = image.attributes
     onCloseModal()
   }, [altText, image, position, scale, onCloseModal])
@@ -168,8 +168,7 @@ export const Component = observer(function ({image, gallery}: Props) {
     }
   }, [])
 
-  // Prevents preliminary flash when transformations are being applied
-  if (image.compressed === undefined) {
+  if (image.cropped === undefined) {
     return null
   }
 
@@ -177,7 +176,7 @@ export const Component = observer(function ({image, gallery}: Props) {
     windowDimensions.width > 500 ? 410 : windowDimensions.width - 80
   const sideLength = isDesktopWeb ? 300 : computedWidth
 
-  const dimensions = image.getDisplayDimensions(aspectRatio, sideLength)
+  const dimensions = image.getResizedDimensions(aspectRatio, sideLength)
   const imgContainerStyles = {width: sideLength, height: sideLength}
 
   const imgControlStyles = {
@@ -196,7 +195,7 @@ export const Component = observer(function ({image, gallery}: Props) {
             <ImageEditor
               ref={editorRef}
               style={styles.imgEditor}
-              image={image.compressed.path}
+              image={image.cropped.path}
               scale={scale}
               border={0}
               position={position}

src/view/com/modals/Modal.tsx

@@ -15,6 +15,7 @@ import * as RepostModal from './Repost'
 import * as CreateOrEditMuteListModal from './CreateOrEditMuteList'
 import * as ListAddRemoveUserModal from './ListAddRemoveUser'
 import * as AltImageModal from './AltImage'
+import * as EditImageModal from './AltImage'
 import * as ReportAccountModal from './ReportAccount'
 import * as DeleteAccountModal from './DeleteAccount'
 import * as ChangeHandleModal from './ChangeHandle'
@@ -83,6 +84,9 @@ export const ModalsContainer = observer(function ModalsContainer() {
   } else if (activeModal?.name === 'alt-text-image') {
     snapPoints = AltImageModal.snapPoints
     element = <AltImageModal.Component {...activeModal} />
+  } else if (activeModal?.name === 'edit-image') {
+    snapPoints = AltImageModal.snapPoints
+    element = <EditImageModal.Component {...activeModal} />
   } else if (activeModal?.name === 'change-handle') {
     snapPoints = ChangeHandleModal.snapPoints
     element = <ChangeHandleModal.Component {...activeModal} />

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

@@ -1,11 +0,0 @@
-/**
- * NOTE
- * This modal is used only in the web build
- * Native uses a third-party library
- */
-
-export const snapPoints = ['0%']
-
-export function Component() {
-  return null
-}