diff --git a/src/components/VideoPostCard.tsx b/src/components/VideoPostCard.tsx index 008274969e..2c9c2ed9be 100644 --- a/src/components/VideoPostCard.tsx +++ b/src/components/VideoPostCard.tsx @@ -12,6 +12,7 @@ import { import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' +import {getVideoEmbed} from '#/lib/embeds' import {sanitizeHandle} from '#/lib/strings/handles' import {formatCount} from '#/view/com/util/numeric/format' import {UserAvatar} from '#/view/com/util/UserAvatar' @@ -52,7 +53,7 @@ export function VideoPostCard({ }) { const t = useTheme() const {_, i18n} = useLingui() - const embed = post.embed + const embed = getVideoEmbed(post.embed) const { state: pressed, onIn: onPressIn, diff --git a/src/components/feeds/PostFeedVideoGridRow.tsx b/src/components/feeds/PostFeedVideoGridRow.tsx index 7f98980837..24fb3db7e3 100644 --- a/src/components/feeds/PostFeedVideoGridRow.tsx +++ b/src/components/feeds/PostFeedVideoGridRow.tsx @@ -1,6 +1,6 @@ import {View} from 'react-native' -import {AppBskyEmbedVideo} from '@atproto/api' +import {isVideoView} from '#/lib/embeds' import {logEvent} from '#/lib/statsig/statsig' import {FeedPostSliceItem} from '#/state/queries/post-feed' import {VideoFeedSourceContext} from '#/screens/VideoFeed/types' @@ -20,7 +20,7 @@ export function PostFeedVideoGridRow({ }) { const gutters = useGutters(['base', 'base', 0, 'base']) const posts = slices - .filter(slice => AppBskyEmbedVideo.isView(slice.post.embed)) + .filter(slice => isVideoView(slice.post.embed)) .map(slice => ({ post: slice.post, moderation: slice.moderation, diff --git a/src/lib/embeds.ts b/src/lib/embeds.ts index 2904f1cc36..f44199b92e 100644 --- a/src/lib/embeds.ts +++ b/src/lib/embeds.ts @@ -1,6 +1,7 @@ import { AppBskyEmbedRecord, AppBskyEmbedRecordWithMedia, + AppBskyEmbedVideo, AppBskyFeedDefs, } from '@atproto/api' @@ -22,3 +23,27 @@ export function isEmbedByEmbedder( } return true } + +export function isVideoView( + v: unknown, +): v is + | AppBskyEmbedVideo.View + | (AppBskyEmbedRecordWithMedia.View & {media: AppBskyEmbedVideo.View}) { + return ( + AppBskyEmbedVideo.isView(v) || + (AppBskyEmbedRecordWithMedia.isView(v) && AppBskyEmbedVideo.isView(v.media)) + ) +} + +export function getVideoEmbed(v: unknown): AppBskyEmbedVideo.View | null { + if (AppBskyEmbedVideo.isView(v)) { + return v + } + if ( + AppBskyEmbedRecordWithMedia.isView(v) && + AppBskyEmbedVideo.isView(v.media) + ) { + return v.media + } + return null +} diff --git a/src/screens/VideoFeed/index.tsx b/src/screens/VideoFeed/index.tsx index da842d9218..4180abefae 100644 --- a/src/screens/VideoFeed/index.tsx +++ b/src/screens/VideoFeed/index.tsx @@ -46,6 +46,7 @@ import { import {NativeStackScreenProps} from '@react-navigation/native-stack' import {HITSLOP_20} from '#/lib/constants' +import {getVideoEmbed, isVideoView} from '#/lib/embeds' import {useHaptics} from '#/lib/haptics' import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback' import {CommonNavigatorParams, NavigationProp} from '#/lib/routes/types' @@ -210,14 +211,17 @@ function Feed() { const feedPost = slice.items.find( item => item.uri === slice.feedPostUri, ) - if (feedPost && AppBskyEmbedVideo.isView(feedPost.post.embed)) { - items.push({ - _reactKey: feedPost._reactKey, - moderation: feedPost.moderation, - post: feedPost.post, - video: feedPost.post.embed, - feedContext: slice.feedContext, - }) + if (feedPost && isVideoView(feedPost.post.embed)) { + const video = getVideoEmbed(feedPost.post.embed) + if (video) { + items.push({ + _reactKey: feedPost._reactKey, + moderation: feedPost.moderation, + post: feedPost.post, + video: video, + feedContext: slice.feedContext, + }) + } } } return items diff --git a/src/view/com/posts/PostFeed.tsx b/src/view/com/posts/PostFeed.tsx index c50d7f9797..64d73679b5 100644 --- a/src/view/com/posts/PostFeed.tsx +++ b/src/view/com/posts/PostFeed.tsx @@ -9,12 +9,13 @@ import { View, ViewStyle, } from 'react-native' -import {AppBskyActorDefs, AppBskyEmbedVideo} from '@atproto/api' +import {AppBskyActorDefs} from '@atproto/api' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' import {useQueryClient} from '@tanstack/react-query' import {DISCOVER_FEED_URI, KNOWN_SHUTDOWN_FEEDS} from '#/lib/constants' +import {isVideoView} from '#/lib/embeds' import {useInitialNumToRender} from '#/lib/hooks/useInitialNumToRender' import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' import {logEvent} from '#/lib/statsig/statsig' @@ -350,7 +351,7 @@ let PostFeed = ({ const item = slice.items.find( item => item.uri === slice.feedPostUri, ) - if (item && AppBskyEmbedVideo.isView(item.post.embed)) { + if (item && isVideoView(item.post.embed)) { videos.push({item, feedContext: slice.feedContext}) } }