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/composer/photos/Gallery.tsx

@@ -104,63 +104,61 @@ export const Gallery = observer(function ({gallery}: Props) {
 
   return !gallery.isEmpty ? (
     <View testID="selectedPhotosView" style={styles.gallery}>
-      {gallery.images.map(image =>
-        image.compressed !== undefined ? (
-          <View key={`selected-image-${image.path}`} style={[imageStyle]}>
+      {gallery.images.map(image => (
+        <View key={`selected-image-${image.path}`} style={[imageStyle]}>
+          <TouchableOpacity
+            testID="altTextButton"
+            accessibilityRole="button"
+            accessibilityLabel="Add alt text"
+            accessibilityHint=""
+            onPress={() => {
+              handleAddImageAltText(image)
+            }}
+            style={imageControlLabelStyle}>
+            <Text style={styles.imageControlTextContent}>ALT</Text>
+          </TouchableOpacity>
+          <View style={imageControlsSubgroupStyle}>
             <TouchableOpacity
-              testID="altTextButton"
+              testID="editPhotoButton"
               accessibilityRole="button"
-              accessibilityLabel="Add alt text"
+              accessibilityLabel="Edit image"
               accessibilityHint=""
               onPress={() => {
-                handleAddImageAltText(image)
+                handleEditPhoto(image)
               }}
-              style={imageControlLabelStyle}>
-              <Text style={styles.imageControlTextContent}>ALT</Text>
+              style={styles.imageControl}>
+              <FontAwesomeIcon
+                icon="pen"
+                size={12}
+                style={{color: colors.white}}
+              />
+            </TouchableOpacity>
+            <TouchableOpacity
+              testID="removePhotoButton"
+              accessibilityRole="button"
+              accessibilityLabel="Remove image"
+              accessibilityHint=""
+              onPress={() => handleRemovePhoto(image)}
+              style={styles.imageControl}>
+              <FontAwesomeIcon
+                icon="xmark"
+                size={16}
+                style={{color: colors.white}}
+              />
             </TouchableOpacity>
-            <View style={imageControlsSubgroupStyle}>
-              <TouchableOpacity
-                testID="editPhotoButton"
-                accessibilityRole="button"
-                accessibilityLabel="Edit image"
-                accessibilityHint=""
-                onPress={() => {
-                  handleEditPhoto(image)
-                }}
-                style={styles.imageControl}>
-                <FontAwesomeIcon
-                  icon="pen"
-                  size={12}
-                  style={{color: colors.white}}
-                />
-              </TouchableOpacity>
-              <TouchableOpacity
-                testID="removePhotoButton"
-                accessibilityRole="button"
-                accessibilityLabel="Remove image"
-                accessibilityHint=""
-                onPress={() => handleRemovePhoto(image)}
-                style={styles.imageControl}>
-                <FontAwesomeIcon
-                  icon="xmark"
-                  size={16}
-                  style={{color: colors.white}}
-                />
-              </TouchableOpacity>
-            </View>
-
-            <Image
-              testID="selectedPhotoImage"
-              style={[styles.image, imageStyle] as ImageStyle}
-              source={{
-                uri: image.compressed.path,
-              }}
-              accessible={true}
-              accessibilityIgnoresInvertColors
-            />
           </View>
-        ) : null,
-      )}
+
+          <Image
+            testID="selectedPhotoImage"
+            style={[styles.image, imageStyle] as ImageStyle}
+            source={{
+              uri: image.cropped?.path ?? image.path,
+            }}
+            accessible={true}
+            accessibilityIgnoresInvertColors
+          />
+        </View>
+      ))}
     </View>
   ) : null
 })

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
-}