diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/StarterPack/StarterPackCard.tsx | 1 | ||||
| -rw-r--r-- | src/view/com/composer/Composer.tsx | 1 | ||||
| -rw-r--r-- | src/view/com/composer/ExternalEmbed.tsx | 71 | ||||
| -rw-r--r-- | src/view/com/util/post-embeds/ExternalLinkEmbed.tsx | 9 | ||||
| -rw-r--r-- | src/view/com/util/post-embeds/index.tsx | 24 |
5 files changed, 54 insertions, 52 deletions
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 ( <View style={[ - a.mt_xs, a.border, a.rounded_sm, a.overflow_hidden, diff --git a/src/view/com/composer/Composer.tsx b/src/view/com/composer/Composer.tsx index 88052addc..249ba99e5 100644 --- a/src/view/com/composer/Composer.tsx +++ b/src/view/com/composer/Composer.tsx @@ -668,6 +668,7 @@ export const ComposePost = ({ <View style={a.relative} key={extLink}> <ExternalEmbedLink uri={extLink} + hasQuote={!!quote} onRemove={() => { 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 ( + <ExternalLinkEmbed + link={{ + title: data.title || uri, + uri, + description: data.description, + thumb: data.thumb?.source.path, + }} + hideAlt + /> + ) + } else if (data.kind === 'feed') { + return <MaybeFeedCard view={data.view} /> + } else if (data.kind === 'list') { + return <MaybeListCard view={data.view} /> + } else if (data.kind === 'starter-pack') { + return <StarterPackEmbed starterPack={data.view} /> + } + } + }, [data, uri]) + + if (data?.type === 'record' && hasQuote) { + // This is not currently supported by the data model so don't preview it. + return null + } + return ( <View style={[a.mb_xl, a.overflow_hidden, t.atoms.border_contrast_medium]}> - {linkInfo ? ( - <View style={{pointerEvents: 'none'}}> - <ExternalLinkEmbed link={linkInfo} hideAlt /> - </View> + {linkComponent ? ( + <View style={{pointerEvents: 'none'}}>{linkComponent}</View> ) : error ? ( <Container style={[a.align_start, a.p_md, a.gap_xs]}> <Text numberOfLines={1} style={t.atoms.text_contrast_high}> @@ -120,7 +139,6 @@ function Container({ return ( <View style={[ - a.mt_sm, a.rounded_sm, a.border, a.align_center, @@ -134,22 +152,3 @@ function Container({ </View> ) } - -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 <MaybeFeedCard view={embed.record} /> + return ( + <View style={a.mt_sm}> + <MaybeFeedCard view={embed.record} /> + </View> + ) } // list embed if (AppBskyGraphDefs.isListView(embed.record)) { - return <MaybeListCard view={embed.record} /> + return ( + <View style={a.mt_sm}> + <MaybeListCard view={embed.record} /> + </View> + ) } // starter pack embed if (AppBskyGraphDefs.isStarterPackViewBasic(embed.record)) { - return <StarterPackCard starterPack={embed.record} /> + return ( + <View style={a.mt_sm}> + <StarterPackCard starterPack={embed.record} /> + </View> + ) } // quote post @@ -203,7 +215,7 @@ export function PostEmbeds({ return <View /> } -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, ]}> <ListCard.Default view={view} /> </View> @@ -264,7 +275,6 @@ const styles = StyleSheet.create({ customFeedOuter: { borderWidth: StyleSheet.hairlineWidth, borderRadius: 8, - marginTop: 4, paddingHorizontal: 12, paddingVertical: 12, }, |