From 8ea6155bb4348346eeb2918ae522deccf0559d19 Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Wed, 4 Sep 2024 13:08:39 -0500
Subject: [PATCH] Only do reduced layout if images embed

---
 src/view/com/util/images/AutoSizedImage.tsx  |  4 +-
 src/view/com/util/images/Gallery.tsx         | 76 ++++++++++++--------
 src/view/com/util/images/ImageLayoutGrid.tsx |  4 +-
 src/view/com/util/post-embeds/QuoteEmbed.tsx |  4 +-
 src/view/com/util/post-embeds/index.tsx      |  3 +
 5 files changed, 59 insertions(+), 32 deletions(-)

diff --git a/src/view/com/util/images/AutoSizedImage.tsx b/src/view/com/util/images/AutoSizedImage.tsx
index be4b1490ab..1b4b8593cb 100644
--- a/src/view/com/util/images/AutoSizedImage.tsx
+++ b/src/view/com/util/images/AutoSizedImage.tsx
@@ -97,12 +97,14 @@ export function ConstrainedImage({
 export function AutoSizedImage({
   image,
   crop = 'constrained',
+  hideBadge,
   onPress,
   onLongPress,
   onPressIn,
 }: {
   image: AppBskyEmbedImages.ViewImage
   crop?: 'none' | 'square' | 'constrained'
+  hideBadge?: boolean
   onPress?: () => void
   onLongPress?: () => void
   onPressIn?: () => void
@@ -133,7 +135,7 @@ export function AutoSizedImage({
         accessibilityHint=""
       />
 
-      {hasAlt || isCropped ? (
+      {(hasAlt || isCropped) && !hideBadge ? (
         <View
           accessible={false}
           style={[
diff --git a/src/view/com/util/images/Gallery.tsx b/src/view/com/util/images/Gallery.tsx
index 7787f7db73..88e57052a3 100644
--- a/src/view/com/util/images/Gallery.tsx
+++ b/src/view/com/util/images/Gallery.tsx
@@ -1,13 +1,14 @@
 import React, {ComponentProps, FC} from 'react'
-import {Pressable, StyleSheet, Text, View} from 'react-native'
+import {Pressable, View} from 'react-native'
 import {Image} from 'expo-image'
 import {AppBskyEmbedImages} from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {isWeb} from '#/platform/detection'
 import {useLargeAltBadgeEnabled} from '#/state/preferences/large-alt-badge'
 import {atoms as a, useTheme} from '#/alf'
+import {Crop_Stroke2_Corner0_Rounded as Crop} from '#/components/icons/Crop'
+import {Text} from '#/components/Typography'
 
 type EventFunction = (index: number) => void
 
@@ -18,6 +19,7 @@ interface GalleryItemProps {
   onLongPress?: EventFunction
   onPressIn?: EventFunction
   imageStyle: ComponentProps<typeof Image>['style']
+  hideBadges?: boolean
 }
 
 export const GalleryItem: FC<GalleryItemProps> = ({
@@ -27,11 +29,18 @@ export const GalleryItem: FC<GalleryItemProps> = ({
   onPress,
   onPressIn,
   onLongPress,
+  hideBadges,
 }) => {
   const t = useTheme()
   const {_} = useLingui()
   const largeAltBadge = useLargeAltBadgeEnabled()
   const image = images[index]
+  const hasAlt = !!image.alt
+  const isCropped = React.useMemo(() => {
+    if (!image.aspectRatio) return true
+    const aspect = image.aspectRatio.width / image.aspectRatio.height
+    return aspect !== 1
+  }, [image.aspectRatio])
   return (
     <View style={a.flex_1}>
       <Pressable
@@ -57,34 +66,43 @@ export const GalleryItem: FC<GalleryItemProps> = ({
           accessibilityIgnoresInvertColors
         />
       </Pressable>
-      {image.alt === '' ? null : (
-        <View style={styles.altContainer}>
-          <Text
-            style={[styles.alt, largeAltBadge && a.text_xs]}
-            accessible={false}>
-            ALT
-          </Text>
+      {(hasAlt || isCropped) && !hideBadges ? (
+        <View
+          accessible={false}
+          style={[
+            a.absolute,
+            a.flex_row,
+            a.align_center,
+            a.rounded_xs,
+            t.atoms.bg_contrast_25,
+            {
+              gap: 3,
+              padding: 3,
+              bottom: a.p_sm.padding,
+              right: a.p_sm.padding,
+              opacity: 0.8,
+            },
+            largeAltBadge && [
+              {
+                gap: 4,
+                padding: 5,
+              },
+            ],
+          ]}>
+          {isCropped && (
+            <Crop
+              fill={t.atoms.text_contrast_high.color}
+              width={largeAltBadge ? 18 : 12}
+            />
+          )}
+          {hasAlt && (
+            <Text
+              style={[a.font_heavy, largeAltBadge ? a.text_xs : {fontSize: 8}]}>
+              ALT
+            </Text>
+          )}
         </View>
-      )}
+      ) : null}
     </View>
   )
 }
-
-const styles = StyleSheet.create({
-  altContainer: {
-    backgroundColor: 'rgba(0, 0, 0, 0.75)',
-    borderRadius: 6,
-    paddingHorizontal: 6,
-    paddingVertical: 3,
-    position: 'absolute',
-    // Related to margin/gap hack. This keeps the alt label in the same position
-    // on all platforms
-    right: isWeb ? 8 : 5,
-    bottom: isWeb ? 8 : 5,
-  },
-  alt: {
-    color: 'white',
-    fontSize: 7,
-    fontWeight: 'bold',
-  },
-})
diff --git a/src/view/com/util/images/ImageLayoutGrid.tsx b/src/view/com/util/images/ImageLayoutGrid.tsx
index ba6c04f505..927136b014 100644
--- a/src/view/com/util/images/ImageLayoutGrid.tsx
+++ b/src/view/com/util/images/ImageLayoutGrid.tsx
@@ -1,8 +1,9 @@
 import React from 'react'
 import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native'
 import {AppBskyEmbedImages} from '@atproto/api'
-import {GalleryItem} from './Gallery'
+
 import {isWeb} from 'platform/detection'
+import {GalleryItem} from './Gallery'
 
 interface ImageLayoutGridProps {
   images: AppBskyEmbedImages.ViewImage[]
@@ -10,6 +11,7 @@ interface ImageLayoutGridProps {
   onLongPress?: (index: number) => void
   onPressIn?: (index: number) => void
   style?: StyleProp<ViewStyle>
+  hideBadges?: boolean
 }
 
 export function ImageLayoutGrid({style, ...props}: ImageLayoutGridProps) {
diff --git a/src/view/com/util/post-embeds/QuoteEmbed.tsx b/src/view/com/util/post-embeds/QuoteEmbed.tsx
index d1a2561e09..53cc3b8a15 100644
--- a/src/view/com/util/post-embeds/QuoteEmbed.tsx
+++ b/src/view/com/util/post-embeds/QuoteEmbed.tsx
@@ -207,6 +207,7 @@ export function QuoteEmbed({
       }
     }
   }, [quote.embeds, allowNestedQuotes])
+  const isImagesEmbed = AppBskyEmbedImages.isView(embed)
 
   const onBeforePress = React.useCallback(() => {
     precacheProfile(queryClient, quote.author)
@@ -237,7 +238,8 @@ export function QuoteEmbed({
           <PostAlerts modui={moderation.ui('contentView')} style={[a.py_xs]} />
         ) : null}
 
-        {viewContext === QuoteEmbedViewContext.FeedEmbedRecordWithMedia ? (
+        {viewContext === QuoteEmbedViewContext.FeedEmbedRecordWithMedia &&
+        isImagesEmbed ? (
           <View style={[a.flex_row, a.gap_md]}>
             {embed && (
               <View style={[{width: gtMobile ? 100 : 80}]}>
diff --git a/src/view/com/util/post-embeds/index.tsx b/src/view/com/util/post-embeds/index.tsx
index 1bca262390..10ebd400a6 100644
--- a/src/view/com/util/post-embeds/index.tsx
+++ b/src/view/com/util/post-embeds/index.tsx
@@ -164,6 +164,9 @@ export function PostEmbeds({
               images={embed.images}
               onPress={_openLightbox}
               onPressIn={onPressIn}
+              hideBadges={
+                viewContext === PostEmbedViewContext.FeedEmbedRecordWithMedia
+              }
             />
           </View>
         </ContentHider>