src

src/app/channel/page.tsx

@@ -1,8 +1,15 @@
 import { AppQueryProps } from "@/types"
 import { Main } from "../main"
 import { getChannel } from "../server/actions/ai-tube-hf/getChannel"
+import { getChannelVideos } from "../server/actions/ai-tube-hf/getChannelVideos"
 
 export default async function ChannelPage({ searchParams: { c: channelId } }: AppQueryProps) {
   const channel = await getChannel({ channelId, neverThrow: true })
-  return (<Main channel={channel} />)
+
+  const publicVideos = await getChannelVideos({
+    channel: channel,
+    status: "published",
+  })
+  
+  return (<Main channel={channel} publicVideos={publicVideos} />)
 }

src/app/interface/channel-card/index.tsx

@@ -7,6 +7,7 @@ import { IoAdd } from "react-icons/io5"
 import { cn } from "@/lib/utils"
 import { ChannelInfo } from "@/types"
 import { isCertifiedUser } from "@/app/certification"
+import Link from "next/link"
 
 const DefaultAvatar = dynamic(() => import("../default-avatar"), {
   loading: () => null,
@@ -36,81 +37,83 @@ export function ChannelCard({
   const isCreateButton = !channel.id
 
   return (
-  <div
-    className={cn(
-      `flex flex-col`,
-      `items-center justify-center`,
-      `space-y-1`,
-      `w-52 h-52`,
-      `rounded-lg`,
-      `text-neutral-100/80`,
-      isCreateButton ? '' : `hover:bg-neutral-800/30 hover:text-neutral-100/100`,
-      `cursor-pointer`,
-      className,
-    )}
-    onClick={() => {
-      if (onClick) {
-        onClick(channel)
-      }
-    }}
-    >
+    // <Link href={`/channel?c=${channel.id}`}>
       <div
         className={cn(
-          `flex flex-col items-center justify-center`,
-          `rounded-full overflow-hidden`,
-          `w-26 h-26`
-        )}
+        `flex flex-col`,
+        `items-center justify-center`,
+        `space-y-1`,
+        `w-52 h-52`,
+        `rounded-lg`,
+        `text-neutral-100/80`,
+        isCreateButton ? '' : `hover:bg-neutral-800/30 hover:text-neutral-100/100`,
+        `cursor-pointer`,
+        className,
+      )}
+      onClick={() => {
+        if (onClick) {
+          onClick(channel)
+        }
+      }}
       >
-        {isCreateButton
-        ? <div className={cn(
-          `flex flex-col justify-center items-center text-center`,
-          `w-full h-full rounded-full`,
-          `bg-neutral-700 hover:bg-neutral-600`,
-          `border-2 border-neutral-400 hover:border-neutral-300`
-          )}>
-            <IoAdd className="w-8 h-8" />
-          </div>
-        : channelThumbnail
-        ? <img
-            src={channelThumbnail}
-            onError={handleBadChannelThumbnail}
-          />
-        : <DefaultAvatar
-          username={channel.datasetUser}
-          bgColor="#fde047"
-          textColor="#1c1917"
-          width={104}
-          roundShape
-        />}
-      </div>
+        <div
+          className={cn(
+            `flex flex-col items-center justify-center`,
+            `rounded-full overflow-hidden`,
+            `w-26 h-26`
+          )}
+        >
+          {isCreateButton
+          ? <div className={cn(
+            `flex flex-col justify-center items-center text-center`,
+            `w-full h-full rounded-full`,
+            `bg-neutral-700 hover:bg-neutral-600`,
+            `border-2 border-neutral-400 hover:border-neutral-300`
+            )}>
+              <IoAdd className="w-8 h-8" />
+            </div>
+          : channelThumbnail
+          ? <img
+              src={channelThumbnail}
+              onError={handleBadChannelThumbnail}
+            />
+          : <DefaultAvatar
+            username={channel.datasetUser}
+            bgColor="#fde047"
+            textColor="#1c1917"
+            width={104}
+            roundShape
+          />}
+        </div>
 
-      <div className={cn(
-        `flex flex-col`,
-         `items-center justify-center text-center`,
-         `space-y-1`
-      )}>
         <div className={cn(
-          `text-center text-base font-medium text-zinc-100`,
-          isCreateButton ? 'mt-2' : ''
-        )}>{
-          isCreateButton ? "Create a channel" : channel.label
-        }</div>
-        {/*<div className="text-center text-sm font-semibold">
-          by <a href={
-            `https://huggingface.co/${channel.datasetUser}`
-          } target="_blank">@{channel.datasetUser}</a>
+          `flex flex-col`,
+          `items-center justify-center text-center`,
+          `space-y-1`
+        )}>
+          <div className={cn(
+            `text-center text-base font-medium text-zinc-100`,
+            isCreateButton ? 'mt-2' : ''
+          )}>{
+            isCreateButton ? "Create a channel" : channel.label
+          }</div>
+          {/*<div className="text-center text-sm font-semibold">
+            by <a href={
+              `https://huggingface.co/${channel.datasetUser}`
+            } target="_blank">@{channel.datasetUser}</a>
+          </div>
+          */}
+          {!isCreateButton && <div className="flex flex-row items-center space-x-0.5">
+            <div className="flex flex-row items-center text-center text-xs font-medium">@{channel.datasetUser}</div>
+            {isCertifiedUser(channel.datasetUser) ? <div className="text-xs text-neutral-400"><RiCheckboxCircleFill className="" /></div> : null}
+          </div>}
+          {!isCreateButton && <div className="flex flex-row items-center justify-center text-neutral-400">
+            <div className="text-center text-xs">{0} videos</div>
+            <div className="px-1">-</div>
+            <div className="text-center text-xs">{channel.likes} likes</div>
+          </div>}
         </div>
-        */}
-        {!isCreateButton && <div className="flex flex-row items-center space-x-0.5">
-          <div className="flex flex-row items-center text-center text-xs font-medium">@{channel.datasetUser}</div>
-          {isCertifiedUser(channel.datasetUser) ? <div className="text-xs text-neutral-400"><RiCheckboxCircleFill className="" /></div> : null}
-        </div>}
-        {!isCreateButton && <div className="flex flex-row items-center justify-center text-neutral-400">
-          <div className="text-center text-xs">{0} videos</div>
-          <div className="px-1">-</div>
-          <div className="text-center text-xs">{channel.likes} likes</div>
-        </div>}
       </div>
-    </div>
+    // </Link>
   )
 }

src/app/interface/top-header/index.tsx

@@ -36,7 +36,7 @@ export function TopHeader() {
 
 
   useEffect(() => {
-    if (view === "public_video") {
+    if (view === "public_video" ||  view === "public_channel") {
       setHeaderMode("compact")
       setMenuMode("slider_hidden")
     } else {

src/app/main.tsx

@@ -23,10 +23,12 @@ import { TubeLayout } from "./interface/tube-layout"
 // more easily
 export function Main({
   video,
+  publicVideos,
   channel,
 }: {
  // server side params
  video?: VideoInfo
+ publicVideos?: VideoInfo[]
  channel?: ChannelInfo
 }) {
   const pathname = usePathname()
@@ -35,10 +37,21 @@ export function Main({
   const setPublicVideo = useStore(s => s.setPublicVideo)
   const setView = useStore(s => s.setView)
   const setPathname = useStore(s => s.setPathname)
+  const setPublicChannel = useStore(s => s.setPublicChannel)
+  const setPublicVideos = useStore(s => s.setPublicVideos)
 
   const videoId = `${video?.id || ""}`
   // console.log("Main video= "+ videoId)
 
+  const publicVideoIds = (publicVideos || []).map(v => v.id || "").filter(x => x)
+
+  useEffect(() => {
+    if (!publicVideos?.length) { return }
+    // note: it is important to ALWAYS set the current video to videoId
+    // even if it's undefined
+    setPublicVideos(publicVideos)
+  }, publicVideoIds)
+
   useEffect(() => {
     // note: it is important to ALWAYS set the current video to videoId
     // even if it's undefined
@@ -54,6 +67,24 @@ export function Main({
     }
   }, [videoId])
 
+  const channelId = `${channel?.id || ""}`
+  // console.log("Main video= "+ videoId)
+
+  useEffect(() => {
+    // note: it is important to ALWAYS set the current video to videoId
+    // even if it's undefined
+    setPublicChannel(channel)
+
+    if (channelId) {
+      // this is a hack for hugging face:
+      // we allow the ?v=<id> param on the root of the domain
+      if (pathname !== "/channel") {
+        // console.log("we are on huggingface apparently!")
+        router.replace(`/channel?v=${channelId}`)
+      }
+    }
+  }, [channelId])
+
 
   // this is critical: it sync the current route (coming from server-side)
   // with the zustand state manager

src/app/server/actions/ai-tube-hf/getChannelVideos.ts

@@ -12,12 +12,14 @@ export async function getChannelVideos({
   channel,
   status,
 }: {
-  channel: ChannelInfo
+  channel?: ChannelInfo
 
   // filter videos by status
   status?: VideoStatus
 }): Promise<VideoInfo[]> {
 
+  if (!channel) { return [] }
+  
   const videos = await getVideoRequestsFromChannel({
     channel,
     apiKey: adminApiKey,

src/app/server/actions/stats.ts

@@ -26,11 +26,11 @@ export async function getNumberOfViewsForVideos(videoIds: string[]): Promise<Rec
       stats[videoId] = 0
     }
 
-
     const values = await redis.mget<number[]>(...ids)
 
     values.forEach((nbViews, i) => {
-      const videoId = ids[i]
+      const redisId = `${ids[i] || ""}`
+      const videoId = redisId.replace(":stats:views", "").replace("videos:", "")
       stats[videoId] = nbViews || 0
     })
 

src/app/views/home-view/index.tsx

@@ -8,6 +8,7 @@ import { VideoInfo } from "@/types"
 import { getVideos } from "@/app/server/actions/ai-tube-hf/getVideos"
 import { VideoList } from "@/app/interface/video-list"
 import { getTags } from "@/app/server/actions/ai-tube-hf/getTags"
+import { extendVideosWithStats } from "@/app/server/actions/ai-tube-hf/extendVideosWithStats"
 
 export function HomeView() {
   const [_isPending, startTransition] = useTransition()
@@ -25,6 +26,9 @@ export function HomeView() {
         maxVideos: 25
       })
 
+      // due to some caching on the first function.. we update with fresh data!
+      // const updatedVideos = await extendVideosWithStats(videos)
+
       setPublicVideos(videos)
     })
   }, [currentTag])

src/app/views/public-channel-view/index.tsx

@@ -1,12 +1,16 @@
 "use client"
 
-import { useEffect, useTransition } from "react"
+import { useEffect, useState, useTransition } from "react"
+import dynamic from "next/dynamic"
 
 import { useStore } from "@/app/state/useStore"
 import { cn } from "@/lib/utils"
 import { VideoList } from "@/app/interface/video-list"
 import { getChannelVideos } from "@/app/server/actions/ai-tube-hf/getChannelVideos"
 
+const DefaultAvatar = dynamic(() => import("../../interface/default-avatar"), {
+  loading: () => null,
+})
 
 export function PublicChannelView() {
   const [_isPending, startTransition] = useTransition()
@@ -14,7 +18,21 @@ export function PublicChannelView() {
   const publicVideos = useStore(s => s.publicVideos)
   const setPublicVideos = useStore(s => s.setPublicVideos)
 
+  const [channelThumbnail, setChannelThumbnail] = useState(publicChannel?.thumbnail || "")
+
+  const handleBadChannelThumbnail = () => {
+    try {
+      if (channelThumbnail) {
+        setChannelThumbnail("")
+      }
+    } catch (err) {
+      
+    }
+  }
+
   useEffect(() => {
+    setChannelThumbnail(publicChannel?.thumbnail || "")
+
     if (!publicChannel) {
       return
     }
@@ -24,16 +42,69 @@ export function PublicChannelView() {
         channel: publicChannel,
         status: "published",
       })
+      console.log("videos:", videos)
       setPublicVideos(videos)
     })
 
     setPublicVideos([])
   }, [publicChannel, publicChannel?.id])
 
+  if (!publicChannel) { return null }
+
   return (
     <div className={cn(
       `flex flex-col`
     )}>
+      {/* BANNER */}
+      <div className={cn(
+        `flex flex-col items-center justify-center w-full h-44`
+      )}>
+        {channelThumbnail
+        ? <img
+            src={channelThumbnail}
+            onError={handleBadChannelThumbnail}
+            className="w-full h-full overflow-hidden object-cover"
+          />
+        : <DefaultAvatar
+          username={publicChannel.datasetUser}
+          bgColor="#fde047"
+          textColor="#1c1917"
+          width={160}
+          roundShape
+        />}
+      </div>
+
+      {/* CHANNEL INFO - HORIZONTAL */}
+      <div className={cn(
+        `flex flex-row`
+      )}>
+
+        {/* AVATAR */}
+        <div className={cn(
+          `flex flex-col items-center justify-center w-full`
+        )}>
+          {channelThumbnail
+            ? <img
+                src={channelThumbnail}
+                onError={handleBadChannelThumbnail}
+                className="w-40 h-40 overflow-hidden"
+              />
+            : <DefaultAvatar
+                username={publicChannel.datasetUser}
+                bgColor="#fde047"
+                textColor="#1c1917"
+                width={160}
+                roundShape
+              />}
+        </div>
+
+        <div className={cn(
+          `flex flex-col items-center justify-center w-full`
+        )}>
+          <h3 className="tex-xl text-zinc-100">{publicChannel.label}</h3>
+        </div>
+      </div>
+
       <VideoList
         videos={publicVideos}
       />

src/app/views/public-video-view/index.tsx

@@ -32,6 +32,7 @@ export function PublicVideoView() {
   const [copied, setCopied] = useState<boolean>(false)
 
   const [channelThumbnail, setChannelThumbnail] = useState(`${video?.channel.thumbnail || ""}`)
+  const setPublicVideo = useStore(s => s.setPublicVideo)
 
   // we inject the current videoId in the URL, if it's not already present
   // this is a hack for Hugging Face iframes
@@ -71,15 +72,19 @@ export function PublicVideoView() {
   }
 
   useEffect(() => {
-    if (!videoId) {
-      return
-    }
-
     startTransition(async () => {
-      await watchVideo(videoId)
+      if (!video || !video.id) {
+        return
+      }
+      const numberOfViews = await watchVideo(videoId)
+
+      setPublicVideo({
+        ...video,
+        numberOfViews
+      })
     })
 
-  }, [videoId])
+  }, [video?.id])
 
   if (!video) { return null }