Clean up cards, remove entry interstitial

src/components/FeedInterstitials.tsx

@@ -18,16 +18,14 @@ import * as userActionHistory from '#/state/userActionHistory'
 import {SeenPost} from '#/state/userActionHistory'
 import {BlockDrawerGesture} from '#/view/shell/BlockDrawerGesture'
 import {atoms as a, useBreakpoints, useTheme, ViewStyleProp, web} from '#/alf'
-import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import {Button} from '#/components/Button'
 import * as FeedCard from '#/components/FeedCard'
-import {ArrowRight_Stroke2_Corner0_Rounded as ArrowRightIcon} from '#/components/icons/Arrow'
 import {ArrowRight_Stroke2_Corner0_Rounded as Arrow} from '#/components/icons/Arrow'
 import {Hashtag_Stroke2_Corner0_Rounded as Hashtag} from '#/components/icons/Hashtag'
 import {PersonPlus_Stroke2_Corner0_Rounded as Person} from '#/components/icons/Person'
-import {InlineLinkText, Link} from '#/components/Link'
+import {InlineLinkText} from '#/components/Link'
 import * as ProfileCard from '#/components/ProfileCard'
 import {Text} from '#/components/Typography'
-import {LinearGradientBackground} from './LinearGradientBackground'
 import {ProgressGuideList} from './ProgressGuide/List'
 
 const MOBILE_CARD_WIDTH = 300
@@ -520,43 +518,3 @@ export function ProgressGuide() {
     </View>
   )
 }
-
-export function VideoModeEntranceInterstitial() {
-  const {_} = useLingui()
-  const t = useTheme()
-
-  return (
-    <LinearGradientBackground gradient="bonfire" start={[0, 0]} end={[1, 1]}>
-      <View
-        style={[
-          t.atoms.border_contrast_low,
-          a.border_t,
-          a.flex_row,
-          a.align_center,
-          a.gap_lg,
-          a.px_lg,
-          a.py_sm,
-          a.relative,
-        ]}>
-        <Text style={[a.text_md, a.flex_1, {color: t.palette.white}]}>
-          <Text style={[a.text_md, a.font_bold, {color: t.palette.white}]}>
-            NEW!
-          </Text>{' '}
-          Scroll this feed in video mode
-        </Text>
-        <Link
-          label={_(msg`Start watching`)}
-          to="/temp-vibe"
-          size="small"
-          // why don't the gradient ones work?
-          color="secondary_inverted"
-          variant="solid">
-          <ButtonText>
-            <Trans>Start watching</Trans>
-          </ButtonText>
-          <ButtonIcon icon={ArrowRightIcon} />
-        </Link>
-      </View>
-    </LinearGradientBackground>
-  )
-}

src/components/VideoPostCard.tsx

@@ -1,7 +1,7 @@
 import {View} from 'react-native'
 import {Image} from 'expo-image'
 import {LinearGradient} from 'expo-linear-gradient'
-import {AppBskyEmbedVideo, AppBskyFeedDefs} from '@atproto/api'
+import {AppBskyEmbedVideo, AppBskyFeedDefs, AppBskyFeedPost} from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
@@ -16,6 +16,7 @@ import {useInteractionState} from '#/components/hooks/useInteractionState'
 import {Heart2_Stroke2_Corner0_Rounded as Heart} from '#/components/icons/Heart2'
 import {Repost_Stroke2_Corner2_Rounded as Repost} from '#/components/icons/Repost'
 import {Link} from '#/components/Link'
+import {MediaInsetBorder} from '#/components/MediaInsetBorder'
 import {Text} from '#/components/Typography'
 
 export function VideoPostCard({
@@ -29,9 +30,9 @@ export function VideoPostCard({
   const {_, i18n} = useLingui()
   const embed = post.embed
   const {
-    state: hovered,
+    state: pressed,
-    onIn: onHoverIn,
+    onIn: onPressIn,
-    onOut: onHoverOut,
+    onOut: onPressOut,
   } = useInteractionState()
 
   /**
@@ -40,9 +41,12 @@ export function VideoPostCard({
    */
   if (!AppBskyEmbedVideo.isView(embed)) return null
 
+  const text = AppBskyFeedPost.isRecord(post.record) ? post.record?.text : ''
+  const likeCount = post?.likeCount ?? 0
+  const repostCount = post?.repostCount ?? 0
   const {thumbnail} = embed
   const black = select(t.name, {
-    light: t.atoms.bg_contrast_25.backgroundColor,
+    light: t.palette.black,
     dark: t.atoms.bg_contrast_25.backgroundColor,
     dim: `hsl(${BLUE_HUE}, 28%, 6%)`,
   })
@@ -57,8 +61,8 @@ export function VideoPostCard({
           postUri: post.uri,
         },
       }}
-      onHoverIn={onHoverIn}
+      onPressIn={onPressIn}
-      onHoverOut={onHoverOut}
+      onPressOut={onPressOut}
       style={[
         a.flex_col,
         {
@@ -69,7 +73,7 @@ export function VideoPostCard({
       <View
         style={[
           a.justify_center,
-          a.rounded_sm,
+          a.rounded_md,
           a.overflow_hidden,
           {
             backgroundColor: black,
@@ -78,28 +82,17 @@ export function VideoPostCard({
         ]}>
         <Image
           source={{uri: thumbnail}}
-          style={[a.w_full, a.h_full]}
+          style={[a.w_full, a.h_full, {opacity: pressed ? 0.8 : 1}]}
           accessibilityIgnoresInvertColors
         />
+        <MediaInsetBorder />
 
         <View style={[a.absolute, a.inset_0]}>
           <View
             style={[
               a.absolute,
               a.inset_0,
-              a.transition_opacity,
+              a.pt_2xl,
-              {
-                backgroundColor: black,
-                opacity: hovered ? 0 : 0.2,
-              },
-            ]}
-          />
-
-          <View
-            style={[
-              a.absolute,
-              a.inset_0,
-              a.pt_3xl,
               {
                 top: 'auto',
               },
@@ -109,39 +102,50 @@ export function VideoPostCard({
               locations={[0.02, 1]}
               start={{x: 0, y: 1}}
               end={{x: 0, y: 0}}
-              style={[a.absolute, a.inset_0]}
+              style={[a.absolute, a.inset_0, {opacity: 0.9}]}
             />
 
             <View style={[a.relative, a.z_10, a.p_md, a.flex_row, a.gap_md]}>
-              <View style={[a.flex_row, a.align_center, a.gap_xs]}>
+              {likeCount > 0 && (
-                <Heart size="md" fill="white" />
+                <View style={[a.flex_row, a.align_center, a.gap_xs]}>
-                <Text style={[a.text_md, a.font_bold]}>
+                  <Heart size="sm" fill="white" />
-                  {formatCount(i18n, post.likeCount || 0)}
+                  <Text style={[a.text_sm, a.font_bold, {color: 'white'}]}>
-                </Text>
+                    {formatCount(i18n, likeCount)}
-              </View>
+                  </Text>
-              <View style={[a.flex_row, a.align_center, a.gap_xs]}>
+                </View>
-                <Repost size="md" fill="white" />
+              )}
-                <Text style={[a.text_md, a.font_bold]}>
+              {repostCount > 0 && (
-                  {formatCount(i18n, post.repostCount || 0)}
+                <View style={[a.flex_row, a.align_center, a.gap_xs]}>
-                </Text>
+                  <Repost size="sm" fill="white" />
-              </View>
+                  <Text style={[a.text_sm, a.font_bold, {color: 'white'}]}>
+                    {formatCount(i18n, repostCount)}
+                  </Text>
+                </View>
+              )}
             </View>
           </View>
         </View>
       </View>
-      <View style={[a.pt_sm, a.flex_row, a.gap_sm, a.align_center]}>
+      <View style={[a.pr_xs, {paddingTop: 6, gap: 4}]}>
-        <PreviewableUserAvatar type="user" size={24} profile={post.author} />
+        {text && (
-        <Text
+          <Text style={[a.text_md, a.leading_snug]} numberOfLines={2}>
-          style={[
+            {text}
-            a.flex_1,
+          </Text>
-            a.text_sm,
+        )}
-            a.font_bold,
+        <View style={[a.flex_row, a.gap_xs, a.align_center]}>
-            a.leading_tight,
+          <PreviewableUserAvatar type="user" size={20} profile={post.author} />
-            t.atoms.text_contrast_medium,
+          <Text
-          ]}
+            style={[
-          numberOfLines={1}>
+              a.flex_1,
-          {sanitizeHandle(post.author.handle, '@')}
+              a.text_sm,
-        </Text>
+              a.font_bold,
+              a.leading_tight,
+              t.atoms.text_contrast_medium,
+            ]}
+            numberOfLines={1}>
+            {sanitizeHandle(post.author.handle, '@')}
+          </Text>
+        </View>
       </View>
     </Link>
   )

src/components/feeds/PostFeedVideoGridRow.tsx

@@ -25,7 +25,7 @@ export function PostFeedVideoGridRow({
 
   return (
     <View style={[gutters]}>
-      <View style={[a.flex_row, a.gap_lg]}>
+      <View style={[a.flex_row, a.gap_sm]}>
         {posts.map(post => (
           <View key={post.uri} style={[a.flex_1]}>
             <VideoPostCard post={post} sourceFeedUri={sourceFeedUri} />

src/view/com/posts/PostFeed.tsx

@@ -44,11 +44,7 @@ import {List, ListRef} from '#/view/com/util/List'
 import {PostFeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
 import {LoadMoreRetryBtn} from '#/view/com/util/LoadMoreRetryBtn'
 import {useBreakpoints} from '#/alf'
-import {
+import {ProgressGuide, SuggestedFollows} from '#/components/FeedInterstitials'
-  ProgressGuide,
-  SuggestedFollows,
-  VideoModeEntranceInterstitial,
-} from '#/components/FeedInterstitials'
 import {PostFeedVideoGridRow} from '#/components/feeds/PostFeedVideoGridRow'
 import {TrendingInterstitial} from '#/components/interstitials/Trending'
 import {DiscoverFallbackHeader} from './DiscoverFallbackHeader'
@@ -113,10 +109,6 @@ type FeedRow =
       type: 'interstitialTrending'
       key: string
     }
-  | {
-      type: 'videoModeEntrance'
-      key: string
-    }
 
 export function getFeedPostSlice(feedRow: FeedRow): FeedPostSlice | null {
   if (feedRow.type === 'sliceItem') {
@@ -327,13 +319,6 @@ let PostFeed = ({
         let sliceIndex = -1
         for (const page of data?.pages) {
           if (feedKind === 'thevids' && isNative) {
-            if (sliceIndex === -1) {
-              arr.push({
-                type: 'videoModeEntrance',
-                key: 'videoModeEntrance',
-              })
-            }
-
             const rows: FeedPostSliceItem[][] = []
             for (let i = 0; i < page.slices.length; i++) {
               const slice = page.slices[i]
@@ -560,8 +545,6 @@ let PostFeed = ({
         return <ProgressGuide />
       } else if (row.type === 'interstitialTrending') {
         return <TrendingInterstitial />
-      } else if (row.type === 'videoModeEntrance') {
-        return <VideoModeEntranceInterstitial />
       } else if (row.type === 'sliceItem') {
         const slice = row.slice
         if (slice.isFallbackMarker) {