Ensure ProfileFeed view also supports video feed

src/lib/constants.ts

@@ -124,8 +124,12 @@ export const BSKY_FEED_OWNER_DIDS = [
 
 export const DISCOVER_FEED_URI =
   'at://did:plc:z72i7hdynmk6r22z27h6tvur/app.bsky.feed.generator/whats-hot'
+// TODO replace with PROD
 export const VIDEO_FEED_URI =
   'at://did:plc:yofh3kx63drvfljkibw5zuxo/app.bsky.feed.generator/thevids'
+export const STAGING_VIDEO_FEED_URI =
+  'at://did:plc:yofh3kx63drvfljkibw5zuxo/app.bsky.feed.generator/thevids'
+export const VIDEO_FEED_URIS = [VIDEO_FEED_URI, STAGING_VIDEO_FEED_URI]
 export const DISCOVER_SAVED_FEED = {
   type: 'feed',
   value: DISCOVER_FEED_URI,

src/screens/Profile/ProfileFeed/index.tsx

@@ -1,17 +1,20 @@
 import React, {useCallback, useMemo} from 'react'
 import {StyleSheet, View} from 'react-native'
 import {useAnimatedRef} from 'react-native-reanimated'
+import {AppBskyFeedDefs} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useIsFocused, useNavigation} from '@react-navigation/native'
 import {NativeStackScreenProps} from '@react-navigation/native-stack'
 import {useQueryClient} from '@tanstack/react-query'
 
+import {VIDEO_FEED_URIS} from '#/lib/constants'
 import {usePalette} from '#/lib/hooks/usePalette'
 import {useSetTitle} from '#/lib/hooks/useSetTitle'
 import {ComposeIcon2} from '#/lib/icons'
 import {CommonNavigatorParams} from '#/lib/routes/types'
 import {NavigationProp} from '#/lib/routes/types'
+import {useGate} from '#/lib/statsig/statsig'
 import {makeRecordUri} from '#/lib/strings/url-helpers'
 import {s} from '#/lib/styles'
 import {isNative} from '#/platform/detection'
@@ -170,6 +173,16 @@ export function ProfileFeedScreenInner({
     return <EmptyState icon="hashtag" message={_(msg`This feed is empty.`)} />
   }, [_])
 
+  const gate = useGate()
+  const isVideoFeed = React.useMemo(() => {
+    const isBskyVideoFeed = VIDEO_FEED_URIS.includes(feedInfo.uri)
+    const feedIsVideoMode =
+      feedInfo.contentMode === AppBskyFeedDefs.CONTENTMODEVIDEO
+    const isFeatureEnabled = gate('yolo')
+    const _isVideoFeed = isBskyVideoFeed || feedIsVideoMode
+    return isFeatureEnabled && isNative && _isVideoFeed
+  }, [gate, feedInfo])
+
   return (
     <>
       <ProfileFeedHeader info={feedInfo} />
@@ -183,6 +196,7 @@ export function ProfileFeedScreenInner({
           scrollElRef={scrollElRef}
           onScrolledDownChange={setIsScrolledDown}
           renderEmptyState={renderPostsEmpty}
+          isVideoFeed={isVideoFeed}
         />
       </FeedFeedbackProvider>
 

src/screens/Settings/ContentAndMediaSettings.tsx

@@ -148,7 +148,7 @@ export function ContentAndMediaSettingsScreen({}: Props) {
               {areVideoFeedsEnabled && (
                 <Toggle.Item
                   name="show_trending_videos"
-                  label={_(msg`Enable trending videos`)}
+                  label={_(msg`Enable trending videos in your Discover feed.`)}
                   value={!trendingVideoDisabled}
                   onChange={value => {
                     const hide = Boolean(!value)
@@ -162,7 +162,9 @@ export function ContentAndMediaSettingsScreen({}: Props) {
                   <SettingsList.Item>
                     <SettingsList.ItemIcon icon={Graph} />
                     <SettingsList.ItemText>
-                      <Trans>Enable trending videos</Trans>
+                      <Trans>
+                        Enable trending videos in your Discover feed
+                      </Trans>
                     </SettingsList.ItemText>
                     <Toggle.Platform />
                   </SettingsList.Item>

src/view/com/feeds/FeedPage.tsx

@@ -6,7 +6,7 @@ import {useLingui} from '@lingui/react'
 import {NavigationProp, useNavigation} from '@react-navigation/native'
 import {useQueryClient} from '@tanstack/react-query'
 
-import {VIDEO_FEED_URI} from '#/lib/constants'
+import {VIDEO_FEED_URIS} from '#/lib/constants'
 import {ComposeIcon2} from '#/lib/icons'
 import {getRootNavigation, getTabState, TabState} from '#/lib/routes/helpers'
 import {AllNavigatorParams} from '#/lib/routes/types'
@@ -68,7 +68,7 @@ export function FeedPage({
   const setHomeBadge = useSetHomeBadge()
   const gate = useGate()
   const isVideoFeed = React.useMemo(() => {
-    const isBskyVideoFeed = [VIDEO_FEED_URI].includes(feedInfo.uri)
+    const isBskyVideoFeed = VIDEO_FEED_URIS.includes(feedInfo.uri)
     const feedIsVideoMode =
       feedInfo.contentMode === AppBskyFeedDefs.CONTENTMODEVIDEO
     const isFeatureEnabled = gate('yolo')