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

Wrap interstitials with BlockDrawerGesture

Browse Source
This commit is contained in:
Eric Bailey
2025-01-17 18:17:33 -06:00
parent ff581253a1
commit 890d66849e
2 changed files with 69 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/interstitials/TrendingVideos.tsx
+34 -31
View File
@@ -9,6 +9,7 @@ import {makeCustomFeedLink} from '#/lib/routes/links'
import {logEvent} from '#/lib/statsig/statsig' import {logEvent} from '#/lib/statsig/statsig'
import {useTrendingSettingsApi} from '#/state/preferences/trending' import {useTrendingSettingsApi} from '#/state/preferences/trending'
import {usePostFeedQuery} from '#/state/queries/post-feed' import {usePostFeedQuery} from '#/state/queries/post-feed'
import {BlockDrawerGesture} from '#/view/shell/BlockDrawerGesture'
import {atoms as a, useGutters, useTheme} from '#/alf' import {atoms as a, useGutters, useTheme} from '#/alf'
import {Button, ButtonIcon} from '#/components/Button' import {Button, ButtonIcon} from '#/components/Button'
import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron' import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron'
@@ -75,37 +76,39 @@ export function TrendingVideos() {
</Button> </Button>
</View> </View>
<ScrollView <BlockDrawerGesture>
horizontal <ScrollView
showsHorizontalScrollIndicator={false} horizontal
decelerationRate="fast" showsHorizontalScrollIndicator={false}
snapToInterval={CARD_WIDTH + a.gap_sm.gap}> decelerationRate="fast"
<View snapToInterval={CARD_WIDTH + a.gap_sm.gap}>
style={[ <View
a.flex_row, style={[
a.gap_sm, a.flex_row,
{ a.gap_sm,
paddingLeft: gutters.paddingLeft, {
paddingRight: gutters.paddingRight, paddingLeft: gutters.paddingLeft,
}, paddingRight: gutters.paddingRight,
]}> },
{isLoading ? ( ]}>
Array(10) {isLoading ? (
.fill(0) Array(10)
.map((_, i) => ( .fill(0)
<View key={i} style={[{width: CARD_WIDTH}]}> .map((_, i) => (
<CompactVideoPostCardPlaceholder /> <View key={i} style={[{width: CARD_WIDTH}]}>
</View> <CompactVideoPostCardPlaceholder />
)) </View>
) : error || !data ? ( ))
<Text> ) : error || !data ? (
<Trans>Whoops! Trending videos failed to load.</Trans> <Text>
</Text> <Trans>Whoops! Trending videos failed to load.</Trans>
) : ( </Text>
<VideoCards data={data} /> ) : (
)} <VideoCards data={data} />
</View> )}
</ScrollView> </View>
</ScrollView>
</BlockDrawerGesture>
<Prompt.Basic <Prompt.Basic
control={trendingPrompt} control={trendingPrompt}
src/screens/Search/components/ExploreTrendingVideos.tsx
+35 -32
View File
@@ -11,6 +11,7 @@ import {isWeb} from '#/platform/detection'
import {useSavedFeeds} from '#/state/queries/feed' import {useSavedFeeds} from '#/state/queries/feed'
import {usePostFeedQuery} from '#/state/queries/post-feed' import {usePostFeedQuery} from '#/state/queries/post-feed'
import {useAddSavedFeedsMutation} from '#/state/queries/preferences' import {useAddSavedFeedsMutation} from '#/state/queries/preferences'
import {BlockDrawerGesture} from '#/view/shell/BlockDrawerGesture'
import {atoms as a, tokens, useGutters, useTheme} from '#/alf' import {atoms as a, tokens, useGutters, useTheme} from '#/alf'
import {Button, ButtonIcon, ButtonText} from '#/components/Button' import {Button, ButtonIcon, ButtonText} from '#/components/Button'
import {GradientFill} from '#/components/GradientFill' import {GradientFill} from '#/components/GradientFill'
@@ -95,38 +96,40 @@ export function ExploreTrendingVideos() {
</View> </View>
</View> </View>
<ScrollView <BlockDrawerGesture>
horizontal <ScrollView
showsHorizontalScrollIndicator={false} horizontal
decelerationRate="fast" showsHorizontalScrollIndicator={false}
snapToInterval={CARD_WIDTH + tokens.space.sm}> decelerationRate="fast"
<View snapToInterval={CARD_WIDTH + tokens.space.sm}>
style={[ <View
a.pt_lg, style={[
a.flex_row, a.pt_lg,
a.gap_sm, a.flex_row,
{ a.gap_sm,
paddingLeft: gutters.paddingLeft, {
paddingRight: gutters.paddingRight, paddingLeft: gutters.paddingLeft,
}, paddingRight: gutters.paddingRight,
]}> },
{isLoading ? ( ]}>
Array(10) {isLoading ? (
.fill(0) Array(10)
.map((_, i) => ( .fill(0)
<View key={i} style={[{width: CARD_WIDTH}]}> .map((_, i) => (
<CompactVideoPostCardPlaceholder /> <View key={i} style={[{width: CARD_WIDTH}]}>
</View> <CompactVideoPostCardPlaceholder />
)) </View>
) : error || !data ? ( ))
<Text> ) : error || !data ? (
<Trans>Whoops! Trending videos failed to load.</Trans> <Text>
</Text> <Trans>Whoops! Trending videos failed to load.</Trans>
) : ( </Text>
<VideoCards data={data} /> ) : (
)} <VideoCards data={data} />
</View> )}
</ScrollView> </View>
</ScrollView>
</BlockDrawerGesture>
{!isSavedAlready && ( {!isSavedAlready && (
<View <View