From 0ecc98d0de4bcc086902f83e14da529ce6569730 Mon Sep 17 00:00:00 2001 From: dan Date: Thu, 24 Oct 2024 20:44:24 +0100 Subject: Display non-post embeds in composer preview (#5647) * Display non-post embeds in composer preview * Remove starter pack special case from ExternalLinkEmbed This should not be needed because starter pack composer preview now goes through the record preview codepath, just like in the feed/post view. * Hide record ext links if quote is present * Align remove buttons Remove the implicit top padding in record embeds and make it conditional, which is similar to how we treat external link embeds. This makes the X button appear in the same place for record embeds as with links. --- src/components/StarterPack/StarterPackCard.tsx | 1 - src/view/com/composer/Composer.tsx | 1 + src/view/com/composer/ExternalEmbed.tsx | 71 +++++++++++----------- .../com/util/post-embeds/ExternalLinkEmbed.tsx | 9 +-- src/view/com/util/post-embeds/index.tsx | 24 +++++--- 5 files changed, 54 insertions(+), 52 deletions(-) (limited to 'src') diff --git a/src/components/StarterPack/StarterPackCard.tsx b/src/components/StarterPack/StarterPackCard.tsx index 6af1e1358..ce458bc84 100644 --- a/src/components/StarterPack/StarterPackCard.tsx +++ b/src/components/StarterPack/StarterPackCard.tsx @@ -141,7 +141,6 @@ export function Embed({ return ( { dispatch({type: 'embed_remove_link'}) }} diff --git a/src/view/com/composer/ExternalEmbed.tsx b/src/view/com/composer/ExternalEmbed.tsx index 1f1feaf91..d819b28b7 100644 --- a/src/view/com/composer/ExternalEmbed.tsx +++ b/src/view/com/composer/ExternalEmbed.tsx @@ -1,8 +1,6 @@ import React from 'react' import {StyleProp, View, ViewStyle} from 'react-native' -import {AppBskyGraphStarterpack} from '@atproto/api' -import {ResolvedLink} from '#/lib/api/resolve' import {cleanError} from '#/lib/strings/errors' import { useResolveGifQuery, @@ -13,7 +11,9 @@ import {ExternalEmbedRemoveBtn} from '#/view/com/composer/ExternalEmbedRemoveBtn import {ExternalLinkEmbed} from '#/view/com/util/post-embeds/ExternalLinkEmbed' import {atoms as a, useTheme} from '#/alf' import {Loader} from '#/components/Loader' +import {Embed as StarterPackEmbed} from '#/components/StarterPack/StarterPackCard' import {Text} from '#/components/Typography' +import {MaybeFeedCard, MaybeListCard} from '../util/post-embeds' export const ExternalEmbedGif = ({ onRemove, @@ -67,29 +67,48 @@ export const ExternalEmbedGif = ({ export const ExternalEmbedLink = ({ uri, + hasQuote, onRemove, }: { uri: string + hasQuote: boolean onRemove: () => void }) => { const t = useTheme() const {data, error} = useResolveLinkQuery(uri) - const linkInfo = React.useMemo( - () => - data && { - title: getExternalLinkTitle(data) ?? uri, - uri, - description: data.type === 'external' ? data.description : '', - thumb: data.type === 'external' ? data.thumb?.source.path : undefined, - }, - [data, uri], - ) + const linkComponent = React.useMemo(() => { + if (data) { + if (data.type === 'external') { + return ( + + ) + } else if (data.kind === 'feed') { + return + } else if (data.kind === 'list') { + return + } else if (data.kind === 'starter-pack') { + return + } + } + }, [data, uri]) + + if (data?.type === 'record' && hasQuote) { + // This is not currently supported by the data model so don't preview it. + return null + } + return ( - {linkInfo ? ( - - - + {linkComponent ? ( + {linkComponent} ) : error ? ( @@ -120,7 +139,6 @@ function Container({ return ( ) } - -function getExternalLinkTitle(link: ResolvedLink): string | undefined { - if (link.type === 'external') { - return link.title - } - switch (link.kind) { - // These are currently treated as external. - // TODO: Display them as embeds instead. - case 'feed': - return link.view.displayName - case 'list': - return link.view.name - case 'starter-pack': - const record = link.view.record - return AppBskyGraphStarterpack.isRecord(record) - ? record.name - : 'Starter Pack' - } -} diff --git a/src/view/com/util/post-embeds/ExternalLinkEmbed.tsx b/src/view/com/util/post-embeds/ExternalLinkEmbed.tsx index 0399667b0..0fe308417 100644 --- a/src/view/com/util/post-embeds/ExternalLinkEmbed.tsx +++ b/src/view/com/util/post-embeds/ExternalLinkEmbed.tsx @@ -8,10 +8,6 @@ import {useLingui} from '@lingui/react' import {parseAltFromGIFDescription} from '#/lib/gif-alt-text' import {shareUrl} from '#/lib/sharing' import {parseEmbedPlayerFromUrl} from '#/lib/strings/embed-player' -import { - getStarterPackOgCard, - parseStarterPackUri, -} from '#/lib/strings/starter-pack' import {toNiceDomain} from '#/lib/strings/url-helpers' import {isNative} from '#/platform/detection' import {useExternalEmbedsPrefs} from '#/state/preferences' @@ -39,10 +35,7 @@ export const ExternalLinkEmbed = ({ const t = useTheme() const externalEmbedPrefs = useExternalEmbedsPrefs() const niceUrl = toNiceDomain(link.uri) - const starterPackParsed = parseStarterPackUri(link.uri) - const imageUri = starterPackParsed - ? getStarterPackOgCard(starterPackParsed.name, starterPackParsed.rkey) - : link.thumb + const imageUri = link.thumb const embedPlayerParams = React.useMemo(() => { const params = parseEmbedPlayerFromUrl(link.uri) diff --git a/src/view/com/util/post-embeds/index.tsx b/src/view/com/util/post-embeds/index.tsx index d4982b0e2..70192c813 100644 --- a/src/view/com/util/post-embeds/index.tsx +++ b/src/view/com/util/post-embeds/index.tsx @@ -89,17 +89,29 @@ export function PostEmbeds({ if (AppBskyEmbedRecord.isView(embed)) { // custom feed embed (i.e. generator view) if (AppBskyFeedDefs.isGeneratorView(embed.record)) { - return + return ( + + + + ) } // list embed if (AppBskyGraphDefs.isListView(embed.record)) { - return + return ( + + + + ) } // starter pack embed if (AppBskyGraphDefs.isStarterPackViewBasic(embed.record)) { - return + return ( + + + + ) } // quote post @@ -203,7 +215,7 @@ export function PostEmbeds({ return } -function MaybeFeedCard({view}: {view: AppBskyFeedDefs.GeneratorView}) { +export function MaybeFeedCard({view}: {view: AppBskyFeedDefs.GeneratorView}) { const pal = usePalette('default') const moderationOpts = useModerationOpts() const moderation = React.useMemo(() => { @@ -223,7 +235,7 @@ function MaybeFeedCard({view}: {view: AppBskyFeedDefs.GeneratorView}) { ) } -function MaybeListCard({view}: {view: AppBskyGraphDefs.ListView}) { +export function MaybeListCard({view}: {view: AppBskyGraphDefs.ListView}) { const moderationOpts = useModerationOpts() const moderation = React.useMemo(() => { return moderationOpts ? moderateUserList(view, moderationOpts) : undefined @@ -238,7 +250,6 @@ function MaybeListCard({view}: {view: AppBskyGraphDefs.ListView}) { t.atoms.border_contrast_medium, a.p_md, a.rounded_sm, - a.mt_sm, ]}> @@ -264,7 +275,6 @@ const styles = StyleSheet.create({ customFeedOuter: { borderWidth: StyleSheet.hairlineWidth, borderRadius: 8, - marginTop: 4, paddingHorizontal: 12, paddingVertical: 12, }, -- cgit 1.4.1