From 2c0e8136bc489cf36a6b12a55c9d5bf8fab4ace7 Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Tue, 14 Jan 2025 13:13:21 +0000 Subject: [PATCH] yolo interstitial --- src/components/FeedInterstitials.tsx | 46 ++++++++++++++++++++- src/components/LinearGradientBackground.tsx | 14 +++++-- src/lib/constants.ts | 2 + src/view/com/posts/PostFeed.tsx | 36 +++++++++++++--- 4 files changed, 86 insertions(+), 12 deletions(-) diff --git a/src/components/FeedInterstitials.tsx b/src/components/FeedInterstitials.tsx index 268a5ff5b8..3c6c4f53f4 100644 --- a/src/components/FeedInterstitials.tsx +++ b/src/components/FeedInterstitials.tsx @@ -18,14 +18,16 @@ 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} from '#/components/Button' +import {Button, ButtonIcon, ButtonText} 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} from '#/components/Link' +import {InlineLinkText, Link} 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 @@ -518,3 +520,43 @@ 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/LinearGradientBackground.tsx b/src/components/LinearGradientBackground.tsx index 724df43f31..9b28b897c0 100644 --- a/src/components/LinearGradientBackground.tsx +++ b/src/components/LinearGradientBackground.tsx @@ -6,12 +6,18 @@ import {gradients} from '#/alf/tokens' export function LinearGradientBackground({ style, + gradient = 'sky', children, + start, + end, }: { - style: StyleProp - children: React.ReactNode + style?: StyleProp + gradient?: keyof typeof gradients + children?: React.ReactNode + start?: [number, number] + end?: [number, number] }) { - const gradient = gradients.sky.values.map(([_, color]) => { + const colors = gradients[gradient].values.map(([_, color]) => { return color }) as [string, string, ...string[]] @@ -20,7 +26,7 @@ export function LinearGradientBackground({ } return ( - + {children} ) diff --git a/src/lib/constants.ts b/src/lib/constants.ts index 5ae000f729..82936ed55a 100644 --- a/src/lib/constants.ts +++ b/src/lib/constants.ts @@ -124,6 +124,8 @@ export const BSKY_FEED_OWNER_DIDS = [ export const DISCOVER_FEED_URI = 'at://did:plc:z72i7hdynmk6r22z27h6tvur/app.bsky.feed.generator/whats-hot' +export const THEVIDS_FEED_URI = + 'at://did:plc:yofh3kx63drvfljkibw5zuxo/app.bsky.feed.generator/thevids' export const DISCOVER_SAVED_FEED = { type: 'feed', value: DISCOVER_FEED_URI, diff --git a/src/view/com/posts/PostFeed.tsx b/src/view/com/posts/PostFeed.tsx index f9b2e6e76b..e2cae4d9bd 100644 --- a/src/view/com/posts/PostFeed.tsx +++ b/src/view/com/posts/PostFeed.tsx @@ -14,7 +14,11 @@ import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' import {useQueryClient} from '@tanstack/react-query' -import {DISCOVER_FEED_URI, KNOWN_SHUTDOWN_FEEDS} from '#/lib/constants' +import { + DISCOVER_FEED_URI, + KNOWN_SHUTDOWN_FEEDS, + THEVIDS_FEED_URI, +} from '#/lib/constants' import {useInitialNumToRender} from '#/lib/hooks/useInitialNumToRender' import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' import {logEvent} from '#/lib/statsig/statsig' @@ -35,12 +39,16 @@ import { } from '#/state/queries/post-feed' import {useSession} from '#/state/session' import {useProgressGuide} from '#/state/shell/progress-guide' +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} from '#/components/FeedInterstitials' +import { + ProgressGuide, + SuggestedFollows, + VideoModeEntranceInterstitial, +} from '#/components/FeedInterstitials' import {TrendingInterstitial} from '#/components/interstitials/Trending' -import {List, ListRef} from '../util/List' -import {PostFeedLoadingPlaceholder} from '../util/LoadingPlaceholder' -import {LoadMoreRetryBtn} from '../util/LoadMoreRetryBtn' import {DiscoverFallbackHeader} from './DiscoverFallbackHeader' import {FeedShutdownMsg} from './FeedShutdownMsg' import {PostFeedErrorMessage} from './PostFeedErrorMessage' @@ -97,6 +105,10 @@ type FeedRow = type: 'interstitialTrending' key: string } + | { + type: 'videoModeEntrance' + key: string + } export function getFeedPostSlice(feedRow: FeedRow): FeedPostSlice | null { if (feedRow.type === 'sliceItem') { @@ -270,11 +282,13 @@ let PostFeed = ({ const {trendingDisabled} = useTrendingSettings() const feedItems: FeedRow[] = React.useMemo(() => { - let feedKind: 'following' | 'discover' | 'profile' | undefined + let feedKind: 'following' | 'discover' | 'profile' | 'thevids' | undefined if (feedType === 'following') { feedKind = 'following' } else if (feedUri === DISCOVER_FEED_URI) { feedKind = 'discover' + } else if (feedUri === THEVIDS_FEED_URI) { + feedKind = 'thevids' } else if ( feedType === 'author' && (feedTab === 'posts_and_author_threads' || @@ -335,6 +349,14 @@ let PostFeed = ({ key: 'interstitial-' + sliceIndex + '-' + lastFetchedAt, }) } + } else if (feedKind === 'thevids') { + if (sliceIndex === 0) { + arr.push({ + type: 'videoModeEntrance', + key: + 'videoModeEntrance-' + sliceIndex + '-' + lastFetchedAt, + }) + } } } @@ -498,6 +520,8 @@ 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) {