Handle record-with-media separately, clarify intent using enums

src/components/dms/MessageItemEmbed.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import {View} from 'react-native'
 import {AppBskyEmbedRecord} from '@atproto/api'
 
-import {PostEmbeds} from '#/view/com/util/post-embeds'
+import {PostEmbeds, PostEmbedViewContext} from '#/view/com/util/post-embeds'
 import {atoms as a, native, useTheme} from '#/alf'
 
 let MessageItemEmbed = ({
@@ -14,7 +14,11 @@ let MessageItemEmbed = ({
 
   return (
     <View style={[a.my_xs, t.atoms.bg, native({flexBasis: 0})]}>
-      <PostEmbeds embed={embed} allowNestedQuotes />
+      <PostEmbeds
+        embed={embed}
+        allowNestedQuotes
+        viewContext={PostEmbedViewContext.Feed}
+      />
     </View>
   )
 }

src/view/com/post-thread/PostThreadItem.tsx

@@ -43,7 +43,7 @@ import {ErrorMessage} from '../util/error/ErrorMessage'
 import {Link, TextLink} from '../util/Link'
 import {formatCount} from '../util/numeric/format'
 import {PostCtrls} from '../util/post-ctrls/PostCtrls'
-import {PostEmbeds} from '../util/post-embeds'
+import {PostEmbeds, PostEmbedViewContext} from '../util/post-embeds'
 import {PostMeta} from '../util/PostMeta'
 import {Text} from '../util/text/Text'
 import {PreviewableUserAvatar} from '../util/UserAvatar'
@@ -366,7 +366,7 @@ let PostThreadItemLoaded = ({
                   <PostEmbeds
                     embed={post.embed}
                     moderation={moderation}
-                    viewContext="thread-highlighted"
+                    viewContext={PostEmbedViewContext.ThreadHighlighted}
                   />
                 </View>
               )}
@@ -595,7 +595,11 @@ let PostThreadItemLoaded = ({
               ) : undefined}
               {post.embed && (
                 <View style={[a.pb_xs]}>
-                  <PostEmbeds embed={post.embed} moderation={moderation} />
+                  <PostEmbeds
+                    embed={post.embed}
+                    moderation={moderation}
+                    viewContext={PostEmbedViewContext.Feed}
+                  />
                 </View>
               )}
               <PostCtrls

src/view/com/post/Post.tsx

@@ -32,7 +32,7 @@ import {LabelsOnMyPost} from '../../../components/moderation/LabelsOnMe'
 import {PostAlerts} from '../../../components/moderation/PostAlerts'
 import {Link, TextLink} from '../util/Link'
 import {PostCtrls} from '../util/post-ctrls/PostCtrls'
-import {PostEmbeds} from '../util/post-embeds'
+import {PostEmbeds, PostEmbedViewContext} from '../util/post-embeds'
 import {PostMeta} from '../util/PostMeta'
 import {Text} from '../util/text/Text'
 import {PreviewableUserAvatar} from '../util/UserAvatar'
@@ -238,7 +238,11 @@ function PostInner({
               />
             ) : undefined}
             {post.embed ? (
-              <PostEmbeds embed={post.embed} moderation={moderation} />
+              <PostEmbeds
+                embed={post.embed}
+                moderation={moderation}
+                viewContext={PostEmbedViewContext.Feed}
+              />
             ) : null}
           </ContentHider>
           <PostCtrls

src/view/com/posts/FeedItem.tsx

@@ -34,7 +34,7 @@ import {useComposerControls} from '#/state/shell/composer'
 import {useMergedThreadgateHiddenReplies} from '#/state/threadgate-hidden-replies'
 import {FeedNameText} from '#/view/com/util/FeedInfoText'
 import {PostCtrls} from '#/view/com/util/post-ctrls/PostCtrls'
-import {PostEmbeds} from '#/view/com/util/post-embeds'
+import {PostEmbeds, PostEmbedViewContext} from '#/view/com/util/post-embeds'
 import {PostMeta} from '#/view/com/util/PostMeta'
 import {Text} from '#/view/com/util/text/Text'
 import {PreviewableUserAvatar} from '#/view/com/util/UserAvatar'
@@ -488,6 +488,7 @@ let PostContent = ({
             embed={postEmbed}
             moderation={moderation}
             onOpen={onOpenEmbed}
+            viewContext={PostEmbedViewContext.Feed}
           />
         </View>
       ) : null}

src/view/com/util/images/AutoSizedImage.tsx

@@ -55,11 +55,13 @@ export function useImageAspectRatio({
   }
 }
 
-export function SquareFramedImage({
+export function ConstrainedImage({
   aspectRatio,
+  fullBleed,
   children,
 }: {
   aspectRatio: number
+  fullBleed?: boolean
   children: React.ReactNode
 }) {
   const t = useTheme()
@@ -82,7 +84,7 @@ export function SquareFramedImage({
               a.rounded_sm,
               a.overflow_hidden,
               t.atoms.bg_contrast_25,
-              {aspectRatio},
+              {aspectRatio: fullBleed ? 1 : aspectRatio},
             ]}>
             {children}
           </View>
@@ -94,13 +96,13 @@ export function SquareFramedImage({
 
 export function AutoSizedImage({
   image,
-  disableCrop,
+  crop = 'constrained',
   onPress,
   onLongPress,
   onPressIn,
 }: {
   image: AppBskyEmbedImages.ViewImage
-  disableCrop?: boolean
+  crop?: 'none' | 'square' | 'constrained'
   onPress?: () => void
   onLongPress?: () => void
   onPressIn?: () => void
@@ -116,7 +118,8 @@ export function AutoSizedImage({
     src: image.thumb,
     dimensions: image.aspectRatio,
   })
-  const isCropped = rawIsCropped && !disableCrop
+  const cropDisabled = crop === 'none'
+  const isCropped = rawIsCropped && !cropDisabled
   const hasAlt = !!image.alt
 
   const contents = (
@@ -169,7 +172,7 @@ export function AutoSizedImage({
     </>
   )
 
-  if (disableCrop) {
+  if (cropDisabled) {
     return (
       <Pressable
         onPress={onPress}
@@ -190,7 +193,7 @@ export function AutoSizedImage({
     )
   } else {
     return (
-      <SquareFramedImage aspectRatio={constrained}>
+      <ConstrainedImage fullBleed={crop === 'square'} aspectRatio={constrained}>
         <Pressable
           onPress={onPress}
           onLongPress={onLongPress}
@@ -201,7 +204,7 @@ export function AutoSizedImage({
           style={[a.h_full]}>
           {contents}
         </Pressable>
-      </SquareFramedImage>
+      </ConstrainedImage>
     )
   }
 }

src/view/com/util/post-embeds/QuoteEmbed.tsx

@@ -41,17 +41,20 @@ import {Link} from '../Link'
 import {PostMeta} from '../PostMeta'
 import {Text} from '../text/Text'
 import {PostEmbeds} from '.'
+import {PostEmbedViewContext, QuoteEmbedViewContext} from './types'
 
 export function MaybeQuoteEmbed({
   embed,
   onOpen,
   style,
   allowNestedQuotes,
+  viewContext,
 }: {
   embed: AppBskyEmbedRecord.View
   onOpen?: () => void
   style?: StyleProp<ViewStyle>
   allowNestedQuotes?: boolean
+  viewContext?: QuoteEmbedViewContext
 }) {
   const pal = usePalette('default')
   const {currentAccount} = useSession()
@@ -67,6 +70,7 @@ export function MaybeQuoteEmbed({
         onOpen={onOpen}
         style={style}
         allowNestedQuotes={allowNestedQuotes}
+        viewContext={viewContext}
       />
     )
   } else if (AppBskyEmbedRecord.isViewBlocked(embed.record)) {
@@ -113,12 +117,14 @@ function QuoteEmbedModerated({
   onOpen,
   style,
   allowNestedQuotes,
+  viewContext,
 }: {
   viewRecord: AppBskyEmbedRecord.ViewRecord
   postRecord: AppBskyFeedPost.Record
   onOpen?: () => void
   style?: StyleProp<ViewStyle>
   allowNestedQuotes?: boolean
+  viewContext?: QuoteEmbedViewContext
 }) {
   const moderationOpts = useModerationOpts()
   const moderation = React.useMemo(() => {
@@ -144,6 +150,7 @@ function QuoteEmbedModerated({
       onOpen={onOpen}
       style={style}
       allowNestedQuotes={allowNestedQuotes}
+      viewContext={viewContext}
     />
   )
 }
@@ -154,12 +161,14 @@ export function QuoteEmbed({
   onOpen,
   style,
   allowNestedQuotes,
+  viewContext,
 }: {
   quote: ComposerOptsQuote
   moderation?: ModerationDecision
   onOpen?: () => void
   style?: StyleProp<ViewStyle>
   allowNestedQuotes?: boolean
+  viewContext?: QuoteEmbedViewContext
 }) {
   const queryClient = useQueryClient()
   const pal = usePalette('default')
@@ -226,15 +235,40 @@ export function QuoteEmbed({
         {moderation ? (
           <PostAlerts modui={moderation.ui('contentView')} style={[a.py_xs]} />
         ) : null}
-        {richText ? (
+
-          <RichText
+        {viewContext === QuoteEmbedViewContext.FeedEmbedRecordWithMedia ? (
-            value={richText}
+          <View style={[a.flex_row, a.gap_md]}>
-            style={a.text_md}
+            {embed && (
-            numberOfLines={20}
+              <View style={[{width: 100}]}>
-            disableLinks
+                <PostEmbeds
-          />
+                  embed={embed}
-        ) : null}
+                  moderation={moderation}
-        {embed && <PostEmbeds embed={embed} moderation={moderation} />}
+                  viewContext={PostEmbedViewContext.FeedEmbedRecordWithMedia}
+                />
+              </View>
+            )}
+            {richText ? (
+              <RichText
+                value={richText}
+                style={a.text_md}
+                numberOfLines={20}
+                disableLinks
+              />
+            ) : null}
+          </View>
+        ) : (
+          <>
+            {richText ? (
+              <RichText
+                value={richText}
+                style={a.text_md}
+                numberOfLines={20}
+                disableLinks
+              />
+            ) : null}
+            {embed && <PostEmbeds embed={embed} moderation={moderation} />}
+          </>
+        )}
       </Link>
     </ContentHider>
   )

src/view/com/util/post-embeds/index.tsx

@@ -32,8 +32,11 @@ import {AutoSizedImage} from '../images/AutoSizedImage'
 import {ImageLayoutGrid} from '../images/ImageLayoutGrid'
 import {ExternalLinkEmbed} from './ExternalLinkEmbed'
 import {MaybeQuoteEmbed} from './QuoteEmbed'
+import {PostEmbedViewContext, QuoteEmbedViewContext} from './types'
 import {VideoEmbed} from './VideoEmbed'
 
+export * from './types'
+
 type Embed =
   | AppBskyEmbedRecord.View
   | AppBskyEmbedImages.View
@@ -55,7 +58,7 @@ export function PostEmbeds({
   onOpen?: () => void
   style?: StyleProp<ViewStyle>
   allowNestedQuotes?: boolean
-  viewContext?: 'thread-highlighted'
+  viewContext?: PostEmbedViewContext
 }) {
   const {openLightbox} = useLightboxControls()
 
@@ -70,7 +73,15 @@ export function PostEmbeds({
           onOpen={onOpen}
           viewContext={viewContext}
         />
-        <MaybeQuoteEmbed embed={embed.record} onOpen={onOpen} />
+        <MaybeQuoteEmbed
+          embed={embed.record}
+          onOpen={onOpen}
+          viewContext={
+            viewContext === PostEmbedViewContext.Feed
+              ? QuoteEmbedViewContext.FeedEmbedRecordWithMedia
+              : undefined
+          }
+        />
       </View>
     )
   }
@@ -129,7 +140,14 @@ export function PostEmbeds({
           <ContentHider modui={moderation?.ui('contentMedia')}>
             <View style={[styles.container, style]}>
               <AutoSizedImage
-                disableCrop={viewContext === 'thread-highlighted'}
+                crop={
+                  viewContext === PostEmbedViewContext.ThreadHighlighted
+                    ? 'none'
+                    : viewContext ===
+                      PostEmbedViewContext.FeedEmbedRecordWithMedia
+                    ? 'square'
+                    : 'constrained'
+                }
                 image={image}
                 onPress={() => _openLightbox(0)}
                 onPressIn={() => onPressIn(0)}

src/view/com/util/post-embeds/types.ts

@@ -0,0 +1,9 @@
+export enum PostEmbedViewContext {
+  ThreadHighlighted = 'ThreadHighlighted',
+  Feed = 'Feed',
+  FeedEmbedRecordWithMedia = 'FeedEmbedRecordWithMedia',
+}
+
+export enum QuoteEmbedViewContext {
+  FeedEmbedRecordWithMedia = PostEmbedViewContext.FeedEmbedRecordWithMedia,
+}