diff --git a/src/lib/link-meta.ts b/src/lib/link-meta.ts index b6cc6cae..b48d920a 100644 --- a/src/lib/link-meta.ts +++ b/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 { + 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 { 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 diff --git a/src/lib/strings.ts b/src/lib/strings.ts index 74f4ea6a..032eec56 100644 --- a/src/lib/strings.ts +++ b/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 diff --git a/src/state/models/link-metas-view.ts b/src/state/models/link-metas-view.ts new file mode 100644 index 00000000..0187f426 --- /dev/null +++ b/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 +export class LinkMetasViewModel { + cache: LRUMap = 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 + } + } +} diff --git a/src/state/models/root-store.ts b/src/state/models/root-store.ts index b7a04800..af79ccc1 100644 --- a/src/state/models/root-store.ts +++ b/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, { diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx index 98d6bd37..95b02837 100644 --- a/src/view/com/post-thread/PostThreadItem.tsx +++ b/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]} /> + {item._isHighlightedPost && hasEngagement ? ( {item.repostCount ? ( @@ -252,6 +254,7 @@ export const PostThreadItem = observer(function PostThreadItem({ style={[styles.postText]} /> + + +}) { + const store = useStores() + const [linkMeta, setLinkMeta] = useState(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 + } + + return ( + + {linkMeta ? ( + <> + + {linkMeta.title || linkMeta.url} + + + {linkMeta.url} + + {linkMeta.description ? ( + + {linkMeta.description} + + ) : undefined} + + ) : ( + + )} + + ) +} + +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, + }, +}) diff --git a/src/view/com/util/PostMeta.tsx b/src/view/com/util/PostMeta.tsx index d158418e..80dde0e0 100644 --- a/src/view/com/util/PostMeta.tsx +++ b/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'