Add link embeds to posts

zio/stable
Paul Frazee 2022-11-23 17:01:00 -06:00
parent 89638dbd18
commit f5ff0fd274
8 changed files with 178 additions and 4 deletions

View File

@ -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

View File

@ -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

View File

@ -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
}
}
}

View File

@ -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, {

View File

@ -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}

View File

@ -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}

View File

@ -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,
},
})

View File

@ -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'