diff --git a/src/components/FeedInterstitials.tsx b/src/components/FeedInterstitials.tsx index 9f1505cc98..268a5ff5b8 100644 --- a/src/components/FeedInterstitials.tsx +++ b/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() { ) } - -export function VideoModeEntranceInterstitial() { - const {_} = useLingui() - const t = useTheme() - - return ( - - - - - NEW! - {' '} - Scroll this feed in video mode - - - - Start watching - - - - - - ) -} diff --git a/src/components/VideoPostCard.tsx b/src/components/VideoPostCard.tsx index 401771dd1b..c8072464df 100644 --- a/src/components/VideoPostCard.tsx +++ b/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, - onIn: onHoverIn, - onOut: onHoverOut, + state: pressed, + onIn: onPressIn, + 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} - onHoverOut={onHoverOut} + onPressIn={onPressIn} + onPressOut={onPressOut} style={[ a.flex_col, { @@ -69,7 +73,7 @@ export function VideoPostCard({ + - - - - - - {formatCount(i18n, post.likeCount || 0)} - - - - - - {formatCount(i18n, post.repostCount || 0)} - - + {likeCount > 0 && ( + + + + {formatCount(i18n, likeCount)} + + + )} + {repostCount > 0 && ( + + + + {formatCount(i18n, repostCount)} + + + )} - - - - {sanitizeHandle(post.author.handle, '@')} - + + {text && ( + + {text} + + )} + + + + {sanitizeHandle(post.author.handle, '@')} + + ) diff --git a/src/components/feeds/PostFeedVideoGridRow.tsx b/src/components/feeds/PostFeedVideoGridRow.tsx index 11fa84eb73..222290377b 100644 --- a/src/components/feeds/PostFeedVideoGridRow.tsx +++ b/src/components/feeds/PostFeedVideoGridRow.tsx @@ -25,7 +25,7 @@ export function PostFeedVideoGridRow({ return ( - + {posts.map(post => ( diff --git a/src/view/com/posts/PostFeed.tsx b/src/view/com/posts/PostFeed.tsx index 7844fb40b8..8325756f7c 100644 --- a/src/view/com/posts/PostFeed.tsx +++ b/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 { - ProgressGuide, - SuggestedFollows, - VideoModeEntranceInterstitial, -} from '#/components/FeedInterstitials' +import {ProgressGuide, SuggestedFollows} 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 } else if (row.type === 'interstitialTrending') { return - } else if (row.type === 'videoModeEntrance') { - return } else if (row.type === 'sliceItem') { const slice = row.slice if (slice.isFallbackMarker) {