diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/hooks/useHeaderOffset.ts | 2 | ||||
| -rw-r--r-- | src/components/interstitials/Trending.tsx | 131 | ||||
| -rw-r--r-- | src/view/com/posts/PostFeed.tsx | 27 |
3 files changed, 71 insertions, 89 deletions
diff --git a/src/components/hooks/useHeaderOffset.ts b/src/components/hooks/useHeaderOffset.ts index c9987df77..2d18fb99b 100644 --- a/src/components/hooks/useHeaderOffset.ts +++ b/src/components/hooks/useHeaderOffset.ts @@ -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 } diff --git a/src/components/interstitials/Trending.tsx b/src/components/interstitials/Trending.tsx index 153f08aaa..1da361ef7 100644 --- a/src/components/interstitials/Trending.tsx +++ b/src/components/interstitials/Trending.tsx @@ -1,6 +1,7 @@ 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' @@ -8,22 +9,14 @@ 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() { @@ -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() @@ -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} diff --git a/src/view/com/posts/PostFeed.tsx b/src/view/com/posts/PostFeed.tsx index 7860d568d..f9b2e6e76 100644 --- a/src/view/com/posts/PostFeed.tsx +++ b/src/view/com/posts/PostFeed.tsx @@ -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', |