Filter out posts without videos

src/components/VideoPostCard.tsx

@@ -1,12 +1,11 @@
-import {Pressable,View} from 'react-native'
+import {Pressable, View} from 'react-native'
 import {Image} from 'expo-image'
 import {LinearGradient} from 'expo-linear-gradient'
-import {AppBskyEmbedVideo} from '@atproto/api'
+import {AppBskyEmbedVideo,AppBskyFeedDefs} from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {sanitizeHandle} from '#/lib/strings/handles'
-import {FeedPostSliceItem} from '#/state/queries/post-feed'
 import {formatCount} from '#/view/com/util/numeric/format'
 import {PreviewableUserAvatar} from '#/view/com/util/UserAvatar'
 import {atoms as a, useTheme} from '#/alf'
@@ -17,20 +16,21 @@ import {Heart2_Stroke2_Corner0_Rounded as Heart} from '#/components/icons/Heart2
 import {Repost_Stroke2_Corner2_Rounded as Repost} from '#/components/icons/Repost'
 import {Text} from '#/components/Typography'
 
-export function VideoPostCard({post}: {post: FeedPostSliceItem}) {
+export function VideoPostCard({post}: {post: AppBskyFeedDefs.PostView}) {
   const t = useTheme()
   const {_, i18n} = useLingui()
-  const embed = post.post.embed
+  const embed = post.embed
   const {
     state: hovered,
     onIn: onHoverIn,
     onOut: onHoverOut,
   } = useInteractionState()
 
-  if (!AppBskyEmbedVideo.isView(embed)) {
-    // TODO unavailable?
-    return null
-  }
+  /**
+   * Filtering should be done at a higher level, such as `PostFeed` or
+   * `PostFeedVideoGridRow`, but we need to protect here as well.
+   */
+  if (!AppBskyEmbedVideo.isView(embed)) return null
 
   const {thumbnail} = embed
   const black = select(t.name, {
@@ -95,13 +95,13 @@ export function VideoPostCard({post}: {post: FeedPostSliceItem}) {
               <View style={[a.flex_row, a.align_center, a.gap_xs]}>
                 <Heart size="md" fill="white" />
                 <Text style={[a.text_md, a.font_bold]}>
-                  {formatCount(i18n, post.post.likeCount || 0)}
+                  {formatCount(i18n, post.likeCount || 0)}
                 </Text>
               </View>
               <View style={[a.flex_row, a.align_center, a.gap_xs]}>
                 <Repost size="md" fill="white" />
                 <Text style={[a.text_md, a.font_bold]}>
-                  {formatCount(i18n, post.post.repostCount || 0)}
+                  {formatCount(i18n, post.repostCount || 0)}
                 </Text>
               </View>
             </View>
@@ -109,11 +109,7 @@ export function VideoPostCard({post}: {post: FeedPostSliceItem}) {
         </View>
       </View>
       <View style={[a.pt_sm, a.flex_row, a.gap_sm, a.align_center]}>
-        <PreviewableUserAvatar
-          type="user"
-          size={24}
-          profile={post.post.author}
-        />
+        <PreviewableUserAvatar type="user" size={24} profile={post.author} />
         <Text
           style={[
             a.flex_1,
@@ -123,7 +119,7 @@ export function VideoPostCard({post}: {post: FeedPostSliceItem}) {
             t.atoms.text_contrast_medium,
           ]}
           numberOfLines={1}>
-          {sanitizeHandle(post.post.author.handle, '@')}
+          {sanitizeHandle(post.author.handle, '@')}
         </Text>
       </View>
     </Pressable>