Add link embeds to posts

src/lib/link-meta.ts

@@ -1,4 +1,9 @@
-import {extractHtmlMeta} from './strings'
+import {
+  extractHtmlMeta,
+  isBskyAppUrl,
+  convertBskyAppUrlIfNeeded,
+} from './strings'
+import {match as matchRoute} from '../view/routes'
 
 export enum LikelyType {
   HTML,
@@ -6,6 +11,7 @@ export enum LikelyType {
   Image,
   Video,
   Audio,
+  AtpData,
   Other,
 }
 
@@ -18,6 +24,18 @@ export interface LinkMeta {
 }
 
 export async function getLinkMeta(url: string): Promise<LinkMeta> {
+  if (isBskyAppUrl(url)) {
+    // TODO this could be better
+    url = convertBskyAppUrlIfNeeded(url)
+    const route = matchRoute(url)
+    return {
+      likelyType: LikelyType.AtpData,
+      url,
+      title: route.defaultTitle,
+      // description: ''
+    }
+  }
+
   let urlp
   try {
     urlp = new URL(url)
@@ -53,7 +71,15 @@ export async function getLinkMeta(url: string): Promise<LinkMeta> {
   return meta
 }
 
-function getLikelyType(url: URL): LikelyType {
+export function getLikelyType(url: URL | string): LikelyType {
+  if (typeof url === 'string') {
+    try {
+      url = new URL(url)
+    } catch (e) {
+      return LikelyType.Other
+    }
+  }
+
   const ext = url.pathname.split('.').pop() || ''
   if (ext === 'html' || ext === 'htm') {
     return LikelyType.HTML

src/lib/strings.ts

@@ -209,8 +209,12 @@ export function toShareUrl(url: string): string {
   return url
 }
 
+export function isBskyAppUrl(url: string): boolean {
+  return url.startsWith('https://bsky.app/')
+}
+
 export function convertBskyAppUrlIfNeeded(url: string): string {
-  if (url.startsWith('https://bsky.app/')) {
+  if (isBskyAppUrl(url)) {
     try {
       const urlp = new URL(url)
       return urlp.pathname

src/state/models/link-metas-view.ts

@@ -0,0 +1,44 @@
+import {makeAutoObservable} from 'mobx'
+import {LRUMap} from 'lru_map'
+import {RootStoreModel} from './root-store'
+import {LinkMeta, getLinkMeta} from '../../lib/link-meta'
+
+type CacheValue = Promise<LinkMeta> | LinkMeta
+export class LinkMetasViewModel {
+  cache: LRUMap<string, CacheValue> = new LRUMap(100)
+
+  constructor(public rootStore: RootStoreModel) {
+    makeAutoObservable(
+      this,
+      {
+        rootStore: false,
+        cache: false,
+      },
+      {autoBind: true},
+    )
+  }
+
+  // public api
+  // =
+
+  async getLinkMeta(url: string) {
+    const cached = this.cache.get(url)
+    if (cached) {
+      try {
+        return await cached
+      } catch (e) {
+        // ignore, we'll try again
+      }
+    }
+    try {
+      const promise = getLinkMeta(url)
+      this.cache.set(url, promise)
+      const res = await promise
+      this.cache.set(url, res)
+      return res
+    } catch (e) {
+      this.cache.delete(url)
+      throw e
+    }
+  }
+}

src/state/models/root-store.ts

@@ -11,6 +11,7 @@ import {SessionModel} from './session'
 import {NavigationModel} from './navigation'
 import {ShellUiModel} from './shell-ui'
 import {ProfilesViewModel} from './profiles-view'
+import {LinkMetasViewModel} from './link-metas-view'
 import {MeModel} from './me'
 import {OnboardModel} from './onboard'
 
@@ -21,6 +22,7 @@ export class RootStoreModel {
   me = new MeModel(this)
   onboard = new OnboardModel()
   profiles = new ProfilesViewModel(this)
+  linkMetas = new LinkMetasViewModel(this)
 
   constructor(public api: SessionServiceClient) {
     makeAutoObservable(this, {

src/view/com/post-thread/PostThreadItem.tsx

@@ -14,6 +14,7 @@ import {s, colors} from '../../lib/styles'
 import {ago, pluralize} from '../../../lib/strings'
 import {useStores} from '../../../state'
 import {PostMeta} from '../util/PostMeta'
+import {PostEmbeds} from '../util/PostEmbeds'
 import {PostCtrls} from '../util/PostCtrls'
 
 const PARENT_REPLY_LINE_LENGTH = 8
@@ -151,6 +152,7 @@ export const PostThreadItem = observer(function PostThreadItem({
               style={[styles.postText, styles.postTextLarge]}
             />
           </View>
+          <PostEmbeds entities={record.entities} />
           {item._isHighlightedPost && hasEngagement ? (
             <View style={styles.expandedInfo}>
               {item.repostCount ? (
@@ -252,6 +254,7 @@ export const PostThreadItem = observer(function PostThreadItem({
                 style={[styles.postText]}
               />
             </View>
+            <PostEmbeds entities={record.entities} style={{marginBottom: 10}} />
             <PostCtrls
               replyCount={item.replyCount}
               repostCount={item.repostCount}

src/view/com/posts/FeedItem.tsx

@@ -9,6 +9,7 @@ import {Link} from '../util/Link'
 import {UserInfoText} from '../util/UserInfoText'
 import {PostMeta} from '../util/PostMeta'
 import {PostCtrls} from '../util/PostCtrls'
+import {PostEmbeds} from '../util/PostEmbeds'
 import {RichText} from '../util/RichText'
 import Toast from '../util/Toast'
 import {UserAvatar} from '../util/UserAvatar'
@@ -172,6 +173,7 @@ export const FeedItem = observer(function FeedItem({
               style={styles.postText}
             />
           </View>
+          <PostEmbeds entities={record.entities} style={{marginBottom: 10}} />
           <PostCtrls
             replyCount={item.replyCount}
             repostCount={item.repostCount}

src/view/com/util/PostEmbeds.tsx

@@ -0,0 +1,93 @@
+import React, {useEffect, useState} from 'react'
+import {
+  ActivityIndicator,
+  StyleSheet,
+  StyleProp,
+  Text,
+  View,
+  ViewStyle,
+} from 'react-native'
+import {Entity} from '../../../third-party/api/src/client/types/app/bsky/feed/post'
+import {Link} from '../util/Link'
+import {
+  LinkMeta,
+  getLinkMeta,
+  getLikelyType,
+  LikelyType,
+} from '../../../lib/link-meta'
+import {colors} from '../../lib/styles'
+import {useStores} from '../../../state'
+
+export function PostEmbeds({
+  entities,
+  style,
+}: {
+  entities?: Entity[]
+  style?: StyleProp<ViewStyle>
+}) {
+  const store = useStores()
+  const [linkMeta, setLinkMeta] = useState<LinkMeta | undefined>(undefined)
+  const link = entities?.find(
+    ent =>
+      ent.type === 'link' && getLikelyType(ent.value || '') === LikelyType.HTML,
+  )
+
+  useEffect(() => {
+    let aborted = false
+    store.linkMetas.getLinkMeta(link?.value || '').then(linkMeta => {
+      if (!aborted) {
+        setLinkMeta(linkMeta)
+      }
+    })
+
+    return () => {
+      aborted = true
+    }
+  }, [link])
+
+  if (!link) {
+    return <View />
+  }
+
+  return (
+    <Link style={[styles.outer, style]} href={link.value}>
+      {linkMeta ? (
+        <>
+          <Text numberOfLines={1} style={styles.title}>
+            {linkMeta.title || linkMeta.url}
+          </Text>
+          <Text numberOfLines={1} style={styles.url}>
+            {linkMeta.url}
+          </Text>
+          {linkMeta.description ? (
+            <Text numberOfLines={2} style={styles.description}>
+              {linkMeta.description}
+            </Text>
+          ) : undefined}
+        </>
+      ) : (
+        <ActivityIndicator />
+      )}
+    </Link>
+  )
+}
+
+const styles = StyleSheet.create({
+  outer: {
+    borderWidth: 1,
+    borderColor: colors.gray2,
+    borderRadius: 8,
+    padding: 10,
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+  description: {
+    marginTop: 4,
+    fontSize: 15,
+  },
+  url: {
+    color: colors.gray4,
+  },
+})

src/view/com/util/PostMeta.tsx

@@ -1,4 +1,4 @@
-import React, {useMemo} from 'react'
+import React from 'react'
 import {StyleSheet, Text, View} from 'react-native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {Link} from '../util/Link'