yolo interstitial

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() {
     </View>
   )
 }
+
+export function VideoModeEntranceInterstitial() {
+  const {_} = useLingui()
+  const t = useTheme()
+
+  return (
+    <LinearGradientBackground gradient="bonfire" start={[0, 0]} end={[1, 1]}>
+      <View
+        style={[
+          t.atoms.border_contrast_low,
+          a.border_t,
+          a.flex_row,
+          a.align_center,
+          a.gap_lg,
+          a.px_lg,
+          a.py_sm,
+          a.relative,
+        ]}>
+        <Text style={[a.text_md, a.flex_1, {color: t.palette.white}]}>
+          <Text style={[a.text_md, a.font_bold, {color: t.palette.white}]}>
+            NEW!
+          </Text>{' '}
+          Scroll this feed in video mode
+        </Text>
+        <Link
+          label={_(msg`Start watching`)}
+          to="/temp-thevids"
+          size="small"
+          // why don't the gradient ones work?
+          color="secondary_inverted"
+          variant="solid">
+          <ButtonText>
+            <Trans>Start watching</Trans>
+          </ButtonText>
+          <ButtonIcon icon={ArrowRightIcon} />
+        </Link>
+      </View>
+    </LinearGradientBackground>
+  )
+}

src/components/LinearGradientBackground.tsx

@@ -6,12 +6,18 @@ import {gradients} from '#/alf/tokens'
 
 export function LinearGradientBackground({
   style,
+  gradient = 'sky',
   children,
+  start,
+  end,
 }: {
-  style: StyleProp<ViewStyle>
-  children: React.ReactNode
+  style?: StyleProp<ViewStyle>
+  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 (
-    <LinearGradient colors={gradient} style={style}>
+    <LinearGradient colors={colors} style={style} start={start} end={end}>
       {children}
     </LinearGradient>
   )

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,

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 <ProgressGuide />
       } else if (row.type === 'interstitialTrending') {
         return <TrendingInterstitial />
+      } else if (row.type === 'videoModeEntrance') {
+        return <VideoModeEntranceInterstitial />
       } else if (row.type === 'sliceItem') {
         const slice = row.slice
         if (slice.isFallbackMarker) {