add source videos count in channel home

Etherna · Jul 24, 2024 · ce3ff00 · ce3ff00
1 parent fa621ab
commit ce3ff00
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 11 deletions.
diff --git a/src/components/profile/ProfileIndexPreview.tsx b/src/components/profile/ProfileIndexPreview.tsx
@@ -44,6 +44,7 @@ interface ProfileIndexPreviewProps {
 const ProfileIndexPreview: React.FC<ProfileIndexPreviewProps> = ({ address, url }) => {
   const hostname = urlHostname(url)!
   const [hasSomeVideos, setHasSomeVideos] = useState<boolean>()
+  const [total, setTotal] = useState<number>()
 
   return (
     <ProfileSource>
@@ -54,7 +55,8 @@ const ProfileIndexPreview: React.FC<ProfileIndexPreviewProps> = ({ address, url
             <span>Index {hostname}</span>
           </ProfileSourceTitle>
           <ProfileSourceDescription>
-            Videos list provided by the {hostname} index
+            <span>Videos list provided by the {hostname} index</span>
+            {total != null && <span> - {total} videos</span>}
           </ProfileSourceDescription>
         </ProfileSourceHeaderSection>
       </ProfileSourceHeader>
@@ -64,7 +66,10 @@ const ProfileIndexPreview: React.FC<ProfileIndexPreviewProps> = ({ address, url
           source={{ type: "index", url }}
           variant="preview"
           rows={2}
-          onVideosFetched={videos => setHasSomeVideos(videos.length > 0)}
+          onVideosFetched={(videos, total) => {
+            setHasSomeVideos(videos.length > 0)
+            setTotal(total)
+          }}
         />
 
         {hasSomeVideos === false && (

diff --git a/src/components/profile/ProfilePlaylistPreview.tsx b/src/components/profile/ProfilePlaylistPreview.tsx
@@ -116,6 +116,9 @@ const ProfilePlaylistPreview: React.FC<ProfilePlaylistPreviewProps> = ({
                 })()}
               </>
             )}
+            {playlistQuery.isSuccess && (
+              <span> - {playlistQuery.data.details.videos.length} videos</span>
+            )}
           </ProfileSourceDescription>
         </ProfileSourceHeaderSection>
         {"rootManifest" in identification && (

diff --git a/src/components/profile/ProfileSourceVideos.tsx b/src/components/profile/ProfileSourceVideos.tsx
@@ -38,7 +38,7 @@ interface ProfileSourceVideosProps {
   isLoading?: boolean
   variant?: "default" | "preview"
   rows?: number
-  onVideosFetched?: (videos: Video[]) => void
+  onVideosFetched?: (videos: Video[], total: number) => void
 }
 
 const ProfileSourceVideos: React.FC<ProfileSourceVideosProps> = ({
@@ -68,15 +68,16 @@ const ProfileSourceVideos: React.FC<ProfileSourceVideosProps> = ({
     sequentialFetchCount: 12,
   })
 
+  const videos = (videosQuery.data?.pages.flat() ?? []).flatMap(({ videos }) => videos)
+
   useEffect(() => {
     if (videosQuery.isSuccess) {
-      onVideosFetched?.(videosQuery.data?.pages.flat() ?? [])
+      const total = videosQuery.data?.pages[0]?.total ?? 0
+      onVideosFetched?.(videos, total)
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [videosQuery.data])
 
-  const videos = videosQuery.data?.pages.flat() ?? []
-
   return (
     <div>
       {error && !(error instanceof FundsMissingError) && (

diff --git a/src/queries/channel-videos-query.ts b/src/queries/channel-videos-query.ts
@@ -78,13 +78,15 @@ export const useChannelVideosQuery = (opts: ChannelVideosQueryOptions) => {
       const ownerAddress = await getOwnerAddress()
       const source = opts.source
 
+      let videos: VideoWithOwner[] = []
+
       if (source?.type === "index") {
         const client = new IndexClient(source.url)
         const resp = await client.users.fetchVideos(ownerAddress, page, limit)
 
         total.current = resp.totalElements
 
-        return resp.elements
+        videos = resp.elements
           .filter(vid => vid.lastValidManifest)
           .map(indexVideo => {
             try {
@@ -112,19 +114,21 @@ export const useChannelVideosQuery = (opts: ChannelVideosQueryOptions) => {
           })
           .filter(Boolean) as VideoWithOwner[]
       } else if (source?.type === "playlist") {
+        total.current = source.data.details.videos.length
+
         const from = input.pageParam
           ? firstFetchPagesCount + (input.pageParam - 1) * sequentialFetchCount
           : 0
         const to = from + limit
         const vids = source.data.details.videos.slice(from, to) ?? []
-        const videos = await Promise.all(
+        const playlistVideos = await Promise.all(
           vids.map(async playlistVid => {
             return await queryClient.fetchQuery(
               useVideoPreviewQuery.getQueryConfig({ reference: playlistVid.reference })
             )
           })
         )
-        const videosIndexes = videos.map<VideoWithOwner>((video, i) => ({
+        videos = playlistVideos.map<VideoWithOwner>((video, i) => ({
           reference: video?.reference ?? (vids[i]!.reference as Reference),
           preview: video?.preview ?? {
             reference: "" as Reference,
@@ -140,11 +144,11 @@ export const useChannelVideosQuery = (opts: ChannelVideosQueryOptions) => {
           indexesStatus: {},
           owner: profile,
         }))
-
-        return videosIndexes
       } else {
         throw new Error("Invalid source")
       }
+
+      return { videos, total: total.current }
     },
     initialPageParam: 0,
     getNextPageParam: (_lastPage, _allPages, lastPageParam) => {