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) {