Skip to content

Commit

Permalink
Rework discover-feed trending interstitial (#7314)
Browse files Browse the repository at this point in the history 
* Rework discover-feed trending interstitial to take one row

* Fix loading state

* Try putting it at the top

* Color consistency

* Tweak some spacing

* Show trending when progress guide is there
  • Loading branch information
@pfrazee
pfrazee authored Dec 31, 2024
1 parent c6d26a0 commit 2dc6932
Show file tree
Hide file tree
Showing 3 changed files with 71 additions and 89 deletions.
2 changes: 1 addition & 1 deletion src/components/hooks/useHeaderOffset.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,5 +12,5 @@ export function useHeaderOffset() {
const tabBarPad = 10 + 10 + 3 // padding + border
const normalLineHeight = 20 // matches tab bar
const tabBarText = normalLineHeight * fontScale
return navBarHeight + tabBarPad + tabBarText
return navBarHeight + tabBarPad + tabBarText - 4 // for some reason, this calculation is wrong by 4 pixels, which we adjust
}
131 changes: 57 additions & 74 deletions src/components/interstitials/Trending.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,22 @@
import React from 'react'
import {View} from 'react-native'
import {msg, Trans} from '@lingui/macro'
import {ScrollView} from 'react-native-gesture-handler'
import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'

import {logEvent} from '#/lib/statsig/statsig'
import {
useTrendingSettings,
useTrendingSettingsApi,
} from '#/state/preferences/trending'
import {
DEFAULT_LIMIT as TRENDING_TOPICS_COUNT,
useTrendingTopics,
} from '#/state/queries/trending/useTrendingTopics'
import {useTrendingTopics} from '#/state/queries/trending/useTrendingTopics'
import {useTrendingConfig} from '#/state/trending-config'
import {atoms as a, tokens, useGutters, useTheme} from '#/alf'
import {atoms as a, useGutters, useTheme} from '#/alf'
import {Button, ButtonIcon} from '#/components/Button'
import {GradientFill} from '#/components/GradientFill'
import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
import {Trending2_Stroke2_Corner2_Rounded as Graph} from '#/components/icons/Trending2'
import * as Prompt from '#/components/Prompt'
import {
TrendingTopic,
TrendingTopicLink,
TrendingTopicSkeleton,
} from '#/components/TrendingTopics'
import {TrendingTopicLink} from '#/components/TrendingTopics'
import {Text} from '#/components/Typography'

export function TrendingInterstitial() {
Expand All @@ -35,7 +28,7 @@ export function TrendingInterstitial() {
export function Inner() {
const t = useTheme()
const {_} = useLingui()
const gutters = useGutters(['wide', 'base'])
const gutters = useGutters([0, 'base', 0, 'base'])
const trendingPrompt = Prompt.usePromptControl()
const {setTrendingDisabled} = useTrendingSettingsApi()
const {data: trending, error, isLoading} = useTrendingTopics()
Expand All @@ -47,69 +40,59 @@ export function Inner() {
}, [setTrendingDisabled])

return error || noTopics ? null : (
<View
style={[
gutters,
a.gap_lg,
a.border_t,
t.atoms.border_contrast_low,
t.atoms.bg_contrast_25,
]}>
<View style={[a.flex_row, a.align_center, a.gap_sm]}>
<View style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}>
<Graph size="lg" />
<Text style={[a.text_lg, a.font_heavy]}>
<Trans>Trending</Trans>
</Text>
<View style={[a.py_xs, a.px_sm, a.rounded_sm, a.overflow_hidden]}>
<GradientFill gradient={tokens.gradients.primary} />
<Text style={[a.text_sm, a.font_heavy, {color: 'white'}]}>
<Trans>BETA</Trans>
</Text>
<View style={[t.atoms.border_contrast_low, a.border_t]}>
<ScrollView
horizontal
showsHorizontalScrollIndicator={false}
decelerationRate="fast">
<View style={[gutters, a.flex_row, a.align_center, a.gap_lg]}>
<View style={{paddingLeft: 4, paddingRight: 2}}>
<Graph size="sm" />
</View>
</View>

<Button
label={_(msg`Hide trending topics`)}
size="tiny"
variant="outline"
color="secondary"
shape="round"
onPress={() => trendingPrompt.open()}>
<ButtonIcon icon={X} />
</Button>
</View>

<View style={[a.flex_row, a.flex_wrap, {rowGap: 8, columnGap: 6}]}>
{isLoading ? (
Array(TRENDING_TOPICS_COUNT)
.fill(0)
.map((_n, i) => <TrendingTopicSkeleton key={i} index={i} />)
) : !trending?.topics ? null : (
<>
{trending.topics.map(topic => (
<TrendingTopicLink
key={topic.link}
topic={topic}
onPress={() => {
logEvent('trendingTopic:click', {context: 'interstitial'})
}}>
{({hovered}) => (
<TrendingTopic
{isLoading ? (
<View style={[a.py_lg]}>
<Text
style={[t.atoms.text_contrast_medium, a.text_sm, a.font_bold]}>
{' '}
</Text>
</View>
) : !trending?.topics ? null : (
<>
{trending.topics.map(topic => (
<>
<TrendingTopicLink
key={topic.link}
topic={topic}
style={[
hovered && [
t.atoms.border_contrast_high,
t.atoms.bg_contrast_25,
],
]}
/>
)}
</TrendingTopicLink>
))}
</>
)}
</View>
onPress={() => {
logEvent('trendingTopic:click', {context: 'interstitial'})
}}>
<View style={[a.py_lg]}>
<Text
style={[
t.atoms.text,
a.text_sm,
a.font_bold,
{opacity: 0.7}, // NOTE: we use opacity 0.7 instead of a color to match the color of the home pager tab bar
]}>
{topic.topic}
</Text>
</View>
</TrendingTopicLink>
</>
))}
<Button
label={_(msg`Hide trending topics`)}
size="tiny"
variant="ghost"
color="secondary"
shape="round"
onPress={() => trendingPrompt.open()}>
<ButtonIcon icon={X} />
</Button>
</>
)}
</View>
</ScrollView>

<Prompt.Basic
control={trendingPrompt}
Expand Down
27 changes: 13 additions & 14 deletions src/view/com/posts/PostFeed.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -309,20 +309,19 @@ let PostFeed = ({

if (hasSession) {
if (feedKind === 'discover') {
if (sliceIndex === 0 && showProgressIntersitial) {
arr.push({
type: 'interstitialProgressGuide',
key: 'interstitial-' + sliceIndex + '-' + lastFetchedAt,
})
} else if (
sliceIndex === 15 &&
!gtTablet &&
!trendingDisabled
) {
arr.push({
type: 'interstitialTrending',
key: 'interstitial-' + sliceIndex + '-' + lastFetchedAt,
})
if (sliceIndex === 0) {
if (showProgressIntersitial) {
arr.push({
type: 'interstitialProgressGuide',
key: 'interstitial-' + sliceIndex + '-' + lastFetchedAt,
})
}
if (!gtTablet && !trendingDisabled) {
arr.push({
type: 'interstitialTrending',
key: 'interstitial2-' + sliceIndex + '-' + lastFetchedAt,
})
}
} else if (sliceIndex === 30) {
arr.push({
type: 'interstitialFollows',
Expand Down

0 comments on commit 2dc6932

Please sign in to comment.