Better starterpack embed (#4659)

1 files changed, 47 insertions, 29 deletions

diff --git a/src/view/com/util/post-embeds/ExternalLinkEmbed.tsx b/src/view/com/util/post-embeds/ExternalLinkEmbed.tsx
index 3b2a12c24..f5f220c62 100644
--- a/src/view/com/util/post-embeds/ExternalLinkEmbed.tsx
+++ b/src/view/com/util/post-embeds/ExternalLinkEmbed.tsx
@@ -2,11 +2,17 @@ import React, {useCallback} from 'react'
 import {StyleProp, View, ViewStyle} from 'react-native'
 import {Image} from 'expo-image'
 import {AppBskyEmbedExternal} from '@atproto/api'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
 
 import {usePalette} from 'lib/hooks/usePalette'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 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'
@@ -28,10 +34,16 @@ export const ExternalLinkEmbed = ({
   style?: StyleProp<ViewStyle>
   hideAlt?: boolean
 }) => {
+  const {_} = useLingui()
   const pal = usePalette('default')
   const {isMobile} = useWebMediaQueries()
   const externalEmbedPrefs = useExternalEmbedsPrefs()
 
+  const starterPackParsed = parseStarterPackUri(link.uri)
+  const imageUri = starterPackParsed
+    ? getStarterPackOgCard(starterPackParsed.name, starterPackParsed.rkey)
+    : link.thumb
+
   const embedPlayerParams = React.useMemo(() => {
     const params = parseEmbedPlayerFromUrl(link.uri)
 
@@ -47,15 +59,19 @@ export const ExternalLinkEmbed = ({
   return (
     <View style={[a.flex_col, a.rounded_sm, a.overflow_hidden, a.mt_sm]}>
       <LinkWrapper link={link} onOpen={onOpen} style={style}>
-        {link.thumb && !embedPlayerParams ? (
+        {imageUri && !embedPlayerParams ? (
           <Image
             style={{
               aspectRatio: 1.91,
               borderTopRightRadius: 6,
               borderTopLeftRadius: 6,
             }}
-            source={{uri: link.thumb}}
+            source={{uri: imageUri}}
             accessibilityIgnoresInvertColors
+            accessibilityLabel={starterPackParsed ? link.title : undefined}
+            accessibilityHint={
+              starterPackParsed ? _(msg`Navigate to starter pack`) : undefined
+            }
           />
         ) : undefined}
         {embedPlayerParams?.isGif ? (
@@ -63,35 +79,37 @@ export const ExternalLinkEmbed = ({
         ) : embedPlayerParams ? (
           <ExternalPlayer link={link} params={embedPlayerParams} />
         ) : undefined}
-        <View
-          style={[
-            a.flex_1,
-            a.py_sm,
-            {
-              paddingHorizontal: isMobile ? 10 : 14,
-            },
-          ]}>
-          <Text
-            type="sm"
-            numberOfLines={1}
-            style={[pal.textLight, {marginVertical: 2}]}>
-            {toNiceDomain(link.uri)}
-          </Text>
-
-          {!embedPlayerParams?.isGif && !embedPlayerParams?.dimensions && (
-            <Text type="lg-bold" numberOfLines={3} style={[pal.text]}>
-              {link.title || link.uri}
-            </Text>
-          )}
-          {link.description ? (
+        {!starterPackParsed ? (
+          <View
+            style={[
+              a.flex_1,
+              a.py_sm,
+              {
+                paddingHorizontal: isMobile ? 10 : 14,
+              },
+            ]}>
             <Text
-              type="md"
-              numberOfLines={link.thumb ? 2 : 4}
-              style={[pal.text, a.mt_xs]}>
-              {link.description}
+              type="sm"
+              numberOfLines={1}
+              style={[pal.textLight, {marginVertical: 2}]}>
+              {toNiceDomain(link.uri)}
             </Text>
-          ) : undefined}
-        </View>
+
+            {!embedPlayerParams?.isGif && !embedPlayerParams?.dimensions && (
+              <Text type="lg-bold" numberOfLines={3} style={[pal.text]}>
+                {link.title || link.uri}
+              </Text>
+            )}
+            {link.description ? (
+              <Text
+                type="md"
+                numberOfLines={link.thumb ? 2 : 4}
+                style={[pal.text, a.mt_xs]}>
+                {link.description}
+              </Text>
+            ) : undefined}
+          </View>
+        ) : null}
       </LinkWrapper>
     </View>
   )