diff --git a/src/components/Post/Link/index.tsx b/src/components/Post/Link/index.tsx index f3b8916bc7..20c2edf03a 100644 --- a/src/components/Post/Link/index.tsx +++ b/src/components/Post/Link/index.tsx @@ -1,36 +1,17 @@ import React from 'react' import {AtUri} from '@atproto/api' -import {msg, plural} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useGetTimeAgo} from '#/lib/hooks/useTimeAgo' import {makeProfileLink} from '#/lib/routes/links' import {Link as InternalLink} from '#/components/Link' import {Props} from '#/components/Post/Link/types' +import {useReadablePostLabel} from '#/components/Post/Link/util' -export function Link({children, post, ...props}: Props) { - const {_} = useLingui() - const getTimeAgo = useGetTimeAgo() +export function Link({children, post, reason, ...props}: Props) { const href = React.useMemo(() => { const urip = new AtUri(post.uri) return makeProfileLink(post.author, 'post', urip.rkey) }, [post.uri, post.author]) - const label = _(msg`${post.author.handle}: - ${(post.record as any).text}. - ${getTimeAgo(post.indexedAt, new Date(), {format: 'long'})} ago. - ${plural(post.replyCount || 0, { - one: '1 reply', - other: '# replies', - })} - ${plural(post.repostCount || 0, { - one: '1 repost', - other: '# reposts', - })} - ${plural(post.quoteCount || 0, { - one: '1 quote post', - other: '# quote posts', - })} - `) + const label = useReadablePostLabel({post, reason}) return ( diff --git a/src/components/Post/Link/index.web.tsx b/src/components/Post/Link/index.web.tsx index 753f8e84f6..a9715beb68 100644 --- a/src/components/Post/Link/index.web.tsx +++ b/src/components/Post/Link/index.web.tsx @@ -1,17 +1,13 @@ import React from 'react' import {Pressable} from 'react-native' import {AtUri} from '@atproto/api' -import {msg, plural} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useGetTimeAgo} from '#/lib/hooks/useTimeAgo' import {makeProfileLink} from '#/lib/routes/links' import {useLink} from '#/components/Link' import {Props} from '#/components/Post/Link/types' +import {useReadablePostLabel} from '#/components/Post/Link/util' -export function Link({children, post, ...props}: Props) { - const {_} = useLingui() - const getTimeAgo = useGetTimeAgo() +export function Link({children, post, reason, ...props}: Props) { const href = React.useMemo(() => { const urip = new AtUri(post.uri) return makeProfileLink(post.author, 'post', urip.rkey) @@ -21,22 +17,9 @@ export function Link({children, post, ...props}: Props) { displayText: '', disableMismatchWarning: true, }) - const label = _(msg`${post.author.handle}: - ${(post.record as any).text}. - ${getTimeAgo(post.indexedAt, new Date(), {format: 'long'})} ago. - ${plural(post.replyCount || 0, { - one: '1 reply', - other: '# replies', - })} - ${plural(post.repostCount || 0, { - one: '1 repost', - other: '# reposts', - })} - ${plural(post.quoteCount || 0, { - one: '1 quote post', - other: '# quote posts', - })} - `) + const label = useReadablePostLabel({post, reason}) + + console.log({post, reason, label}) return ( & | React.ReactElement | Iterable post: AppBskyFeedDefs.PostView + reason?: + | AppBskyFeedDefs.ReasonRepost + | AppBskyFeedDefs.ReasonPin + | {[k: string]: unknown; $type: string} + | undefined } diff --git a/src/components/Post/Link/util.ts b/src/components/Post/Link/util.ts new file mode 100644 index 0000000000..0bec3287ac --- /dev/null +++ b/src/components/Post/Link/util.ts @@ -0,0 +1,79 @@ +import React from 'react' +import {AppBskyEmbedImages, AppBskyFeedDefs} from '@atproto/api' +import {msg, plural} from '@lingui/macro' +import {useLingui} from '@lingui/react' + +import {useGetTimeAgo} from '#/lib/hooks/useTimeAgo' +import {sanitizeDisplayName} from '#/lib/strings/display-names' +import {useSession} from '#/state/session' +import {Props} from '#/components/Post/Link/types' + +export function useReadablePostLabel({ + post, + reason, +}: { + post: AppBskyFeedDefs.PostView + reason: Props['reason'] +}) { + const {_} = useLingui() + const getTimeAgo = useGetTimeAgo() + const {currentAccount} = useSession() + + return React.useMemo(() => { + const record = post.record as any + const embed = record.embed + const ago = getTimeAgo(post.indexedAt, new Date(), {format: 'long'}) + const images = AppBskyEmbedImages.isMain(embed) ? embed.images : [] + + const isMe = currentAccount?.did === post.author.did + + const repostLede = AppBskyFeedDefs.isReasonRepost(reason) + ? isMe + ? msg({ + message: `You re-posted`, + comment: `Used for screen readers, heard when a post is focused by the user.`, + }) + : msg({ + message: `${sanitizeDisplayName( + reason.by.displayName || reason.by.handle, + )} re-posted`, + comment: `Used for screen readers, heard when a post is focused by the user.`, + }) + : `` + + return _(msg` + ${repostLede} + + ${sanitizeDisplayName(post.author.displayName || post.author.handle)}: + + ${record.text}. + + ${ + images.length > 0 + ? images + .map((img, i) => { + return `Image ${i + 1} of ${images.length}: ${ + img.alt ?? `no alt text available.` + }` + }) + .join('. ') + : '' + } + + ${ago} ago. + + ${plural(post.replyCount || 0, { + one: '1 reply', + other: '# replies', + })} + ${plural(post.repostCount || 0, { + one: '1 repost', + other: '# reposts', + })} + ${plural(post.quoteCount || 0, { + one: '1 quote post', + other: '# quote posts', + })} + `) + }, [_, getTimeAgo, post, reason, currentAccount]) +} diff --git a/src/view/com/posts/FeedItem.tsx b/src/view/com/posts/FeedItem.tsx index 0ddf1f00e7..5a67556ff8 100644 --- a/src/view/com/posts/FeedItem.tsx +++ b/src/view/com/posts/FeedItem.tsx @@ -245,6 +245,7 @@ let FeedItemInner = ({