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