Add link embeds to posts
parent
89638dbd18
commit
f5ff0fd274
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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, {
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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,
|
||||
},
|
||||
})
|
|
@ -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'
|
||||
|
|
Loading…
Reference in New Issue