diff --git a/src/components/MediaPreview.tsx b/src/components/MediaPreview.tsx index f292ea4422..9d9c755456 100644 --- a/src/components/MediaPreview.tsx +++ b/src/components/MediaPreview.tsx @@ -1,20 +1,15 @@ import React from 'react' import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native' import {Image} from 'expo-image' -import { - AppBskyEmbedExternal, - AppBskyEmbedImages, - AppBskyEmbedRecordWithMedia, - AppBskyEmbedVideo, -} from '@atproto/api' -import {$Typed} from '@atproto/api/dist/client/util' +import {AppBskyFeedDefs} from '@atproto/api' import {Trans} from '@lingui/macro' -import {isTenorGifUri} from '#/lib/strings/embed-player' +import {parseTenorGif} from '#/lib/strings/embed-player' import {atoms as a, useTheme} from '#/alf' import {MediaInsetBorder} from '#/components/MediaInsetBorder' import {Text} from '#/components/Typography' import {PlayButtonIcon} from '#/components/video/PlayButtonIcon' +import {parseEmbed} from '#/types/atproto/post' /** * Streamlined MediaPreview component which just handles images, gifs, and videos @@ -23,22 +18,17 @@ export function Embed({ embed, style, }: { - embed?: - | $Typed - | $Typed - | $Typed - | $Typed - | {$type: string} + embed: AppBskyFeedDefs.PostView['embed'] style?: StyleProp }) { - if (!embed) { - return null - } else if (AppBskyEmbedRecordWithMedia.isView(embed)) { - return - } else if (AppBskyEmbedImages.isView(embed)) { + const e = parseEmbed(embed) + + if (!e) return null + + if (e.type === 'images') { return ( - {embed.images.map(image => ( + {e.view.images.map(image => ( ) - } else if (AppBskyEmbedExternal.isView(embed)) { - if (!embed.external.thumb) return null - if (!isTenorGifUri(embed.external.uri)) return null - + } else if (e.type === 'link' && e.view.external.thumb) { + let url: URL | undefined + try { + url = new URL(e.view.external.uri) + } catch {} + if (url) { + const {success} = parseTenorGif(url) + if (success) { + return ( + + + + ) + } + } + } else if (e.type === 'video') { return ( - - - ) - } else if (AppBskyEmbedVideo.isView(embed)) { - return ( - - + ) } - // media is {$type: string} return null } diff --git a/src/components/interstitials/Trending.tsx b/src/components/interstitials/Trending.tsx index a217a7da2d..1da361ef79 100644 --- a/src/components/interstitials/Trending.tsx +++ b/src/components/interstitials/Trending.tsx @@ -59,24 +59,26 @@ export function Inner() { ) : !trending?.topics ? null : ( <> {trending.topics.map(topic => ( - { - logEvent('trendingTopic:click', {context: 'interstitial'}) - }}> - - - {topic.topic} - - - + <> + { + logEvent('trendingTopic:click', {context: 'interstitial'}) + }}> + + + {topic.topic} + + + + ))}