diff --git a/src/components/Post/Embed/ExternalEmbed/index.tsx b/src/components/Post/Embed/ExternalEmbed/index.tsx index 2a27fd1b1..85134d79a 100644 --- a/src/components/Post/Embed/ExternalEmbed/index.tsx +++ b/src/components/Post/Embed/ExternalEmbed/index.tsx @@ -23,8 +23,9 @@ import {atoms as a, useTheme} from '#/alf' import {Divider} from '#/components/Divider' import {Earth_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe' import {Link} from '#/components/Link' +import {PostEmbedViewContext} from '#/components/Post/Embed/types' import {Text} from '#/components/Typography' -import {IS_NATIVE} from '#/env' +import {IS_ANDROID, IS_NATIVE} from '#/env' import {ExternalGif} from './ExternalGif' import {ExternalPlayer} from './ExternalPlayer' import {GifEmbed} from './Gif' @@ -35,12 +36,14 @@ export const ExternalEmbed = ({ style, hideAlt, preview, + viewContext, }: { link: AppBskyEmbedExternal.ViewExternal onOpen?: () => void style?: StyleProp hideAlt?: boolean preview?: boolean + viewContext?: PostEmbedViewContext }) => { const {_} = useLingui() const t = useTheme() @@ -66,6 +69,8 @@ export const ExternalEmbed = ({ } }, [link.uri, externalEmbedPrefs]) const hasMedia = Boolean(imageUri || embedPlayerParams) + const isAndroidCarousel = + IS_ANDROID && viewContext === PostEmbedViewContext.FeedCarousel const onPress = () => { playHaptic('Light') @@ -145,7 +150,7 @@ export const ExternalEmbed = ({ + viewContext?: PostEmbedViewContext }) => { const ax = useAnalytics() const {t: l, i18n} = useLingui() @@ -48,6 +51,8 @@ export const StandardSiteEmbed = ({ const niceUrl = toNiceDomain(view.uri) const imageUri = view.thumb const hasMedia = Boolean(imageUri) + const isAndroidCarousel = + IS_ANDROID && viewContext === PostEmbedViewContext.FeedCarousel const isStandard = view.associatedRefs?.some(ref => new AtUri(ref.uri).collection.startsWith('site.standard.'), ) @@ -113,6 +118,7 @@ export const StandardSiteEmbed = ({ void themeColors: ssTypes.ThemeColors style?: StyleProp + isAndroidCarousel?: boolean }) { const t = useTheme() const {t: l} = useLingui() @@ -353,7 +362,7 @@ export function PublicationCard({ void onLongPress?: () => void interactedOuter?: boolean + isAndroidCarousel?: boolean }) { const t = useTheme() const {t: l} = useLingui() @@ -646,7 +657,7 @@ export function PublicationFooter({ return ( @@ -136,6 +138,7 @@ function MediaEmbed({ @@ -398,6 +401,8 @@ export function QuoteEmbed({ const itemUrip = new AtUri(quote.uri) const itemHref = makeProfileLink(quote.author, 'post', itemUrip.rkey) const itemTitle = `Post by ${quote.author.handle}` + const isAndroidCarousel = + IS_ANDROID && viewContext === PostEmbedViewContext.FeedCarousel const richText = useMemo(() => { if ( @@ -439,14 +444,8 @@ export function QuoteEmbed({ postHref={itemHref} timestamp={quote.indexedAt} linkDisabled - /* - * Quotes sit in a nested, width-constrained box (especially carousel - * cards with the width:0 flex trick). Give the name row room to - * ellipsize instead of collapsing, and cancel Android flex_1. - */ - narrowLayout - constrainWidth - style={[{flexGrow: 0, flexShrink: 1, minWidth: 0}]} + narrowLayout={isAndroidCarousel} + style={isAndroidCarousel ? {flex: 0} : undefined} /> {moderation ? ( - + @@ -616,9 +621,8 @@ const styles = StyleSheet.create({ width: 0, }, postMetaCarousel: { + flex: 0, flexGrow: 0, - flexShrink: 1, - minWidth: 0, }, alert: { marginTop: 6, diff --git a/src/view/com/util/PostMeta.tsx b/src/view/com/util/PostMeta.tsx index 099a83879..7b9852ccf 100644 --- a/src/view/com/util/PostMeta.tsx +++ b/src/view/com/util/PostMeta.tsx @@ -72,22 +72,16 @@ let PostMeta = (opts: PostMetaOpts): React.ReactNode => { return ( {opts.showAvatar && ( - + { a.flex_shrink, opts.constrainWidth && {flex: 1, minWidth: 0}, ]}> - {/* - * Wrap the name in a flex View - flex styles on Text/UITextView - * are unreliable on native, and without this the handle's - * intrinsic width wins and the name collapses to 0. - */} - - - {forceLTR(displayName)} - - + {forceLTR(displayName)} + { style={[ a.pl_2xs, a.self_center, - a.flex_shrink_0, { marginTop: platform({web: 1, ios: 0, android: -1}), }, @@ -168,7 +150,7 @@ let PostMeta = (opts: PostMetaOpts): React.ReactNode => { t.atoms.text_contrast_medium, {lineHeight: 1.17}, opts.narrowLayout - ? [a.flex_shrink, {minWidth: 0}] + ? a.flex_shrink : [{flexBasis: '30%'}, a.flex_grow, a.flex_shrink_0], web({maxWidth: 'max-content'}), ]}> @@ -210,7 +192,6 @@ let PostMeta = (opts: PostMetaOpts): React.ReactNode => { a.pl_xs, a.text_md, a.leading_tight, - a.flex_shrink_0, IS_ANDROID && !opts.narrowLayout && a.flex_grow, a.text_right, t.atoms.text_contrast_medium, @@ -218,18 +199,22 @@ let PostMeta = (opts: PostMetaOpts): React.ReactNode => { whiteSpace: 'nowrap', }), ]}> - {!IS_ANDROID && ( - - ·{' '} - + {!opts.showPronouns && ( + <> + {!IS_ANDROID && ( + + ·{' '} + + )} + {timeElapsed} + )} - {timeElapsed} )}