WIP expand label

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 (
     <InternalLink {...props} to={href} label={label}>

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 (
     <Pressable

src/components/Post/Link/types.ts

@@ -9,4 +9,9 @@ export type Props = Pick<LinkProps, 'onPress' | 'style' | 'testID'> &
       | React.ReactElement
       | Iterable<React.ReactElement | null | undefined | boolean>
     post: AppBskyFeedDefs.PostView
+    reason?:
+      | AppBskyFeedDefs.ReasonRepost
+      | AppBskyFeedDefs.ReasonPin
+      | {[k: string]: unknown; $type: string}
+      | undefined
   }

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])
+}

src/view/com/posts/FeedItem.tsx

@@ -245,6 +245,7 @@ let FeedItemInner = ({
     <PostLink
       testID={`feedItem-by-${post.author.handle}`}
       post={post}
+      reason={reason}
       style={outerStyles}
       onPress={onBeforePress}
       //dataSet={{feedContext}}