acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Clean up cards, remove entry interstitial

Browse Source
This commit is contained in:
Eric Bailey
2025-01-16 16:39:33 -06:00
parent 786155ce5b
commit 7cdb2789fd
4 changed files with 56 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/FeedInterstitials.tsx
+2 -44
View File
@@ -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
+52 -48
View File
@@ -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({
<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,
{
backgroundColor: black,
opacity: hovered ? 0 : 0.2,
},
]}
/>
<View
style={[
a.absolute,
a.inset_0,
a.pt_3xl,
a.pt_2xl,
{
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]}>
<Heart size="md" fill="white" />
<Text style={[a.text_md, a.font_bold]}>
{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.repostCount || 0)}
</Text>
</View>
{likeCount > 0 && (
<View style={[a.flex_row, a.align_center, a.gap_xs]}>
<Heart size="sm" fill="white" />
<Text style={[a.text_sm, a.font_bold, {color: 'white'}]}>
{formatCount(i18n, likeCount)}
</Text>
</View>
)}
{repostCount > 0 && (
<View style={[a.flex_row, a.align_center, a.gap_xs]}>
<Repost size="sm" fill="white" />
<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]}>
<PreviewableUserAvatar type="user" size={24} profile={post.author} />
<Text
style={[
a.flex_1,
a.text_sm,
a.font_bold,
a.leading_tight,
t.atoms.text_contrast_medium,
]}
numberOfLines={1}>
{sanitizeHandle(post.author.handle, '@')}
</Text>
<View style={[a.pr_xs, {paddingTop: 6, gap: 4}]}>
{text && (
<Text style={[a.text_md, a.leading_snug]} numberOfLines={2}>
{text}
</Text>
)}
<View style={[a.flex_row, a.gap_xs, a.align_center]}>
<PreviewableUserAvatar type="user" size={20} profile={post.author} />
<Text
style={[
a.flex_1,
a.text_sm,
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
+1 -1
View File
@@ -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
+1 -18
View File
@@ -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 <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) {