Add videos tab to profile (#7517)

* Add videos tab to profile

* Modify sourceContext for author feeds

* Use actual typecast, better name for feedUri

* Make EOF conditional

* Clearer condition

---------

Co-authored-by: Dan Abramov <[email protected]>

src/screens/Profile/Sections/Feed.tsx

@@ -45,6 +45,7 @@ export const ProfileFeedSection = React.forwardRef<
   const [hasNew, setHasNew] = React.useState(false)
   const [isScrolledDown, setIsScrolledDown] = React.useState(false)
   const shouldUseAdjustedNumToRender = feed.endsWith('posts_and_author_threads')
+  const isVideoFeed = isNative && feed.endsWith('posts_with_video')
   const adjustedInitialNumToRender = useInitialNumToRender({
     screenHeightOffset: headerHeight,
   })
@@ -84,11 +85,12 @@ export const ProfileFeedSection = React.forwardRef<
         renderEmptyState={renderPostsEmpty}
         headerOffset={headerHeight}
         progressViewOffset={ios(0)}
-        renderEndOfFeed={ProfileEndOfFeed}
+        renderEndOfFeed={isVideoFeed ? undefined : ProfileEndOfFeed}
         ignoreFilterFor={ignoreFilterFor}
         initialNumToRender={
           shouldUseAdjustedNumToRender ? adjustedInitialNumToRender : undefined
         }
+        isVideoFeed={isVideoFeed}
       />
       {(isScrolledDown || hasNew) && (
         <LoadLatestBtn

src/state/queries/post-feed.ts

@@ -49,6 +49,7 @@ export type AuthorFilter =
   | 'posts_no_replies'
   | 'posts_and_author_threads'
   | 'posts_with_media'
+  | 'posts_with_video'
 type FeedUri = string
 type ListUri = string
 

src/view/com/posts/PostFeed.tsx

@@ -25,6 +25,7 @@ import {useFeedFeedbackContext} from '#/state/feed-feedback'
 import {useTrendingSettings} from '#/state/preferences/trending'
 import {STALE} from '#/state/queries'
 import {
+  AuthorFilter,
   FeedDescriptor,
   FeedParams,
   FeedPostSlice,
@@ -38,6 +39,7 @@ 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 {VideoFeedSourceContext} from '#/screens/VideoFeed/types'
 import {useBreakpoints} from '#/alf'
 import {ProgressGuide, SuggestedFollows} from '#/components/FeedInterstitials'
 import {
@@ -194,7 +196,7 @@ let PostFeed = ({
   const [isPTRing, setIsPTRing] = React.useState(false)
   const checkForNewRef = React.useRef<(() => void) | null>(null)
   const lastFetchRef = React.useRef<number>(Date.now())
-  const [feedType, feedUri, feedTab] = feed.split('|')
+  const [feedType, feedUriOrActorDid, feedTab] = feed.split('|')
   const {gtMobile, gtTablet} = useBreakpoints()
   const areVideoFeedsEnabled = isNative
 
@@ -307,7 +309,7 @@ let PostFeed = ({
     let feedKind: 'following' | 'discover' | 'profile' | 'thevids' | undefined
     if (feedType === 'following') {
       feedKind = 'following'
-    } else if (feedUri === DISCOVER_FEED_URI) {
+    } else if (feedUriOrActorDid === DISCOVER_FEED_URI) {
       feedKind = 'discover'
     } else if (
       feedType === 'author' &&
@@ -318,7 +320,7 @@ let PostFeed = ({
     }
 
     let arr: FeedRow[] = []
-    if (KNOWN_SHUTDOWN_FEEDS.includes(feedUri)) {
+    if (KNOWN_SHUTDOWN_FEEDS.includes(feedUriOrActorDid)) {
       arr.push({
         type: 'feedShutdownMsg',
         key: 'feedShutdownMsg',
@@ -376,7 +378,7 @@ let PostFeed = ({
               type: 'videoGridRow',
               key: row.map(r => r.item._reactKey).join('-'),
               items: row.map(r => r.item),
-              sourceFeedUri: feedUri,
+              sourceFeedUri: feedUriOrActorDid,
               feedContexts: row.map(r => r.feedContext),
             })
           }
@@ -504,7 +506,7 @@ let PostFeed = ({
     lastFetchedAt,
     data,
     feedType,
-    feedUri,
+    feedUriOrActorDid,
     feedTab,
     hasSession,
     showProgressIntersitial,
@@ -595,7 +597,7 @@ let PostFeed = ({
       } else if (row.type === 'loading') {
         return <PostFeedLoadingPlaceholder />
       } else if (row.type === 'feedShutdownMsg') {
-        return <FeedShutdownMsg feedUri={feedUri} />
+        return <FeedShutdownMsg feedUri={feedUriOrActorDid} />
       } else if (row.type === 'interstitialFollows') {
         return <SuggestedFollows feed={feed} />
       } else if (row.type === 'interstitialProgressGuide') {
@@ -646,14 +648,25 @@ let PostFeed = ({
           </View>
         )
       } else if (row.type === 'videoGridRow') {
+        let sourceContext: VideoFeedSourceContext
+        if (feedType === 'author') {
+          sourceContext = {
+            type: 'author',
+            did: feedUriOrActorDid,
+            filter: feedTab as AuthorFilter,
+          }
+        } else {
+          sourceContext = {
+            type: 'feedgen',
+            uri: row.sourceFeedUri,
+            sourceInterstitial: feedCacheKey ?? 'none',
+          }
+        }
+
         return (
           <PostFeedVideoGridRow
             items={row.items}
-            sourceContext={{
-              type: 'feedgen',
-              uri: row.sourceFeedUri,
-              sourceInterstitial: feedCacheKey ?? 'none',
-            }}
+            sourceContext={sourceContext}
           />
         )
       } else {
@@ -668,7 +681,9 @@ let PostFeed = ({
       savedFeedConfig,
       _,
       onPressRetryLoadMore,
-      feedUri,
+      feedType,
+      feedUriOrActorDid,
+      feedTab,
       feedCacheKey,
     ],
   )

src/view/screens/Profile.tsx

@@ -195,6 +195,7 @@ function ProfileScreenLoaded({
   const postsSectionRef = React.useRef<SectionRef>(null)
   const repliesSectionRef = React.useRef<SectionRef>(null)
   const mediaSectionRef = React.useRef<SectionRef>(null)
+  const videosSectionRef = React.useRef<SectionRef>(null)
   const likesSectionRef = React.useRef<SectionRef>(null)
   const feedsSectionRef = React.useRef<SectionRef>(null)
   const listsSectionRef = React.useRef<SectionRef>(null)
@@ -218,6 +219,7 @@ function ProfileScreenLoaded({
   const showPostsTab = true
   const showRepliesTab = hasSession
   const showMediaTab = !hasLabeler
+  const showVideosTab = !hasLabeler
   const showLikesTab = isMe
   const showFeedsTab = isMe || (profile.associated?.feedgens || 0) > 0
   const showStarterPacksTab =
@@ -231,6 +233,7 @@ function ProfileScreenLoaded({
     showPostsTab ? _(msg`Posts`) : undefined,
     showRepliesTab ? _(msg`Replies`) : undefined,
     showMediaTab ? _(msg`Media`) : undefined,
+    showVideosTab ? _(msg`Videos`) : undefined,
     showLikesTab ? _(msg`Likes`) : undefined,
     showFeedsTab ? _(msg`Feeds`) : undefined,
     showStarterPacksTab ? _(msg`Starter Packs`) : undefined,
@@ -242,6 +245,7 @@ function ProfileScreenLoaded({
   let postsIndex: number | null = null
   let repliesIndex: number | null = null
   let mediaIndex: number | null = null
+  let videosIndex: number | null = null
   let likesIndex: number | null = null
   let feedsIndex: number | null = null
   let starterPacksIndex: number | null = null
@@ -258,6 +262,9 @@ function ProfileScreenLoaded({
   if (showMediaTab) {
     mediaIndex = nextIndex++
   }
+  if (showVideosTab) {
+    videosIndex = nextIndex++
+  }
   if (showLikesTab) {
     likesIndex = nextIndex++
   }
@@ -281,6 +288,8 @@ function ProfileScreenLoaded({
         repliesSectionRef.current?.scrollToTop()
       } else if (index === mediaIndex) {
         mediaSectionRef.current?.scrollToTop()
+      } else if (index === videosIndex) {
+        videosSectionRef.current?.scrollToTop()
       } else if (index === likesIndex) {
         likesSectionRef.current?.scrollToTop()
       } else if (index === feedsIndex) {
@@ -296,6 +305,7 @@ function ProfileScreenLoaded({
       postsIndex,
       repliesIndex,
       mediaIndex,
+      videosIndex,
       likesIndex,
       feedsIndex,
       listsIndex,
@@ -435,6 +445,19 @@ function ProfileScreenLoaded({
               />
             )
           : null}
+        {showVideosTab
+          ? ({headerHeight, isFocused, scrollElRef}) => (
+              <ProfileFeedSection
+                ref={videosSectionRef}
+                feed={`author|${profile.did}|posts_with_video`}
+                headerHeight={headerHeight}
+                isFocused={isFocused}
+                scrollElRef={scrollElRef as ListRef}
+                ignoreFilterFor={profile.did}
+                setScrollViewTag={setScrollViewTag}
+              />
+            )
+          : null}
         {showLikesTab
           ? ({headerHeight, isFocused, scrollElRef}) => (
               <ProfileFeedSection