renaming to avoid confusion

src/app/account/channel/page.tsx

@@ -0,0 +1,5 @@
+import { Main } from "../../main"
+
+export default async function AccountChannelPage() {
+  return (<Main />)
+}

src/app/channel/page.tsx

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

src/app/interface/left-menu/index.tsx

@@ -13,10 +13,6 @@ import Link from "next/link"
 
 export function LeftMenu() {
   const view = useStore(s => s.view)
-  const setView = useStore(s => s.setView)
-  const menuMode = useStore(s => s.menuMode)
-  const setMenuMode = useStore(s => s.setMenuMode)
-  const setCurrentVideo = useStore(s => s.setCurrentVideo)
 
   return (
     <div className={cn(
@@ -63,7 +59,7 @@ export function LeftMenu() {
         <Link href="/account">
           <MenuItem
             icon={<CgProfile className="h-6 w-6" />}
-            selected={view === "user_channels"}
+            selected={view === "user_account" || view === "user_channel"}
             >
             Account
           </MenuItem>

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

@@ -10,7 +10,6 @@ const pathway = Pathway_Gothic_One({
   display: "swap"
 })
 
-import { videoCategoriesWithLabels } from "@/app/state/categories"
 import { useStore } from "@/app/state/useStore"
 import { cn } from "@/lib/utils"
 import { getTags } from '@/app/server/actions/ai-tube-hf/getTags'
@@ -27,13 +26,8 @@ export function TopHeader() {
 
   const setMenuMode = useStore(s => s.setMenuMode)
 
-
-  const currentChannel = useStore(s => s.currentChannel)
-  const setCurrentChannel = useStore(s => s.setCurrentChannel)
   const currentTag = useStore(s => s.currentTag)
   const setCurrentTag = useStore(s => s.setCurrentTag)
-  const currentVideos = useStore(s => s.currentVideos)
-  const currentVideo = useStore(s => s.currentVideo)
 
   const currentTags = useStore(s => s.currentTags)
   const setCurrentTags = useStore(s => s.setCurrentTags)

src/app/main.tsx

@@ -8,7 +8,7 @@ import { UserChannelView } from "./views/user-channel-view"
 import { PublicVideoView } from "./views/public-video-view"
 import { UserAccountView } from "./views/user-account-view"
 import { NotFoundView } from "./views/not-found-view"
-import { VideoInfo } from "@/types"
+import { ChannelInfo, VideoInfo } from "@/types"
 import { useEffect } from "react"
 import { usePathname, useRouter } from "next/navigation"
 import { TubeLayout } from "./interface/tube-layout"
@@ -22,15 +22,17 @@ import { TubeLayout } from "./interface/tube-layout"
 // one benefit of doing this is that we will able to add some animations/transitions
 // more easily
 export function Main({
-  video
+  video,
+  channel,
 }: {
  // server side params
  video?: VideoInfo
+ channel?: ChannelInfo
 }) {
   const pathname = usePathname()
   const router = useRouter()
 
-  const setCurrentVideo = useStore(s => s.setCurrentVideo)
+  const setPublicVideo = useStore(s => s.setPublicVideo)
   const setView = useStore(s => s.setView)
   const setPathname = useStore(s => s.setPathname)
 
@@ -40,7 +42,7 @@ export function Main({
   useEffect(() => {
     // note: it is important to ALWAYS set the current video to videoId
     // even if it's undefined
-    setCurrentVideo(video)
+    setPublicVideo(video)
 
     if (videoId) {
       // this is a hack for hugging face:

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

@@ -1,131 +1,40 @@
 "use server"
 
-import { Credentials, downloadFile, whoAmI } from "@/huggingface/hub/src"
-import { parseDatasetReadme } from "@/app/server/actions/utils/parseDatasetReadme"
+
 import { ChannelInfo } from "@/types"
 
-import { adminCredentials } from "../config"
+import { getChannels } from "./getChannels"
 
 export async function getChannel(options: {
-  id: string
-  name: string
-  likes: number
-  updatedAt: Date
+  channelId?: string | string[] | null
   apiKey?: string
   owner?: string
   renewCache?: boolean
-}): Promise<ChannelInfo> {
-  // console.log("getChannels")
-  let credentials: Credentials = adminCredentials
-  let owner = options.owner
-
-  if (options.apiKey) {
-    try {
-      credentials = { accessToken: options.apiKey }
-      const { name: username } = await whoAmI({ credentials })
-      if (!username) {
-        throw new Error(`couldn't get the username`)
-      }
-      // everything is in order,
-      owner = username
-    } catch (err) {
-      console.error(err)
-      throw err
+  neverThrow?: boolean
+} = {}): Promise<ChannelInfo | undefined> {
+  try {
+    const id = `${options?.channelId || ""}`
+    if (!id) {
+      throw new Error(`invalid channel id: "${id}"`)
     }
-  }
-
-
-  const prefix = "ai-tube-"
-
-  const name = options.name
-
-  const chunks = name.split("/")
-  const [datasetUser, datasetName] = chunks.length === 2
-    ? chunks
-    : [name, name]
-
-  // console.log(`found a candidate dataset "${datasetName}" owned by @${datasetUser}`)
-  
-  // ignore channels which don't start with ai-tube
-  if (!datasetName.startsWith(prefix)) {
-    throw new Error("this is not an AI Tube channel")
-  }
-
-  // ignore the video index
-  if (datasetName === "ai-tube-index") {
-    throw new Error("cannot get channel of ai-tube-index: time-space continuum broken!")
-  }
-
-  const slug = datasetName.replaceAll(prefix, "")
-  
-  // console.log(`found an AI Tube channel: "${slug}"`)
-
-  // TODO parse the README to get the proper label
-  let label = slug.replaceAll("-", " ")
 
-  let model = ""
-  let lora = ""
-  let style = ""
-  let thumbnail = ""
-  let prompt = ""
-  let description = ""
-  let voice = ""
-  let tags: string[] = []
-
-  // console.log(`going to read datasets/${name}`)
-  try {
-    const response = await downloadFile({
-      repo: `datasets/${name}`,
-      path: "README.md",
-      credentials
+    const channels = await getChannels({
+      channelId: id,
+      apiKey: options?.apiKey,
+      owner: options?.owner,
+      renewCache: options.renewCache,
     })
-    const readme = await response?.text()
-
-    const parsedDatasetReadme = parseDatasetReadme(readme)
-    
-    // console.log("parsedDatasetReadme: ", parsedDatasetReadme)
 
-    prompt = parsedDatasetReadme.prompt
-    label = parsedDatasetReadme.pretty_name
-    description = parsedDatasetReadme.description
-    thumbnail = parsedDatasetReadme.thumbnail || "thumbnail.jpg"
-    model = parsedDatasetReadme.model || ""
-    lora = parsedDatasetReadme.lora || ""
-    style = parsedDatasetReadme.style || ""
-    voice = parsedDatasetReadme.voice || ""
-
-    thumbnail =
-      thumbnail.startsWith("http")
-        ? thumbnail
-        : (thumbnail.endsWith(".jpg") || thumbnail.endsWith(".jpeg"))
-        ? `https://huggingface.co/datasets/${name}/resolve/main/${thumbnail}`
-        : ""
+    if (channels.length === 1) {
+      return channels[0]
+    }
 
-    tags = parsedDatasetReadme.tags
-      .map(tag => tag.trim()) // clean them up
-      .filter(tag => tag) // remove empty tags
-    
+    throw new Error(`couldn't find channel ${options.channelId}`)
   } catch (err) {
-    // console.log("failed to read the readme:", err)
-  }
+    if (options.neverThrow) {
+      return undefined
+    }
 
-  const channel: ChannelInfo = {
-    id: options.id,
-    datasetUser,
-    datasetName,
-    slug,
-    label,
-    description,
-    model,
-    lora,
-    style,
-    voice,
-    thumbnail,
-    prompt,
-    likes: options.likes,
-    tags,
-    updatedAt: options.updatedAt.toISOString()
+    throw err
   }
-
-  return channel
 }

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

@@ -0,0 +1,61 @@
+"use server"
+
+import { ChannelInfo, VideoInfo, VideoStatus } from "@/types"
+
+import { getVideoRequestsFromChannel  } from "./getVideoRequestsFromChannel"
+import { adminApiKey } from "../config"
+import { getIndex } from "./getIndex"
+
+// return 
+export async function getChannelVideos({
+  channel,
+  status,
+}: {
+  channel: ChannelInfo
+
+  // filter videos by status
+  status?: VideoStatus
+}): Promise<VideoInfo[]> {
+
+  const videos = await getVideoRequestsFromChannel({
+    channel,
+    apiKey: adminApiKey,
+    renewCache: true
+  })
+
+  // TODO: use a database instead
+  // normally 
+  const queued = await getIndex({ status: "queued" })
+  const published = await getIndex({ status: "published" })
+
+  return videos.map(v => {
+   let video: VideoInfo = {
+      id: v.id,
+      status: "submitted",
+      label: v.label,
+      description: v.description,
+      prompt: v.prompt,
+      thumbnailUrl: v.thumbnailUrl,
+      assetUrl: "",
+      numberOfViews: 0,
+      numberOfLikes: 0,
+      updatedAt: v.updatedAt,
+      tags: v.tags,
+      channel,
+    }
+
+    if (queued[v.id]) {
+      video = queued[v.id]
+    } else if (published[v.id]) {
+      video = published[v.id]
+    }
+
+    return video
+  }).filter(video => {
+    if (!status || typeof status === "undefined") {
+      return true
+    }
+
+    return video.status === status
+  })
+}

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

@@ -4,9 +4,10 @@ import { Credentials, listDatasets, whoAmI } from "@/huggingface/hub/src"
 import { ChannelInfo } from "@/types"
 
 import { adminCredentials } from "../config"
-import { getChannel } from "./getChannel"
+import { parseChannel } from "./parseChannel"
 
 export async function getChannels(options: {
+  channelId?: string
   apiKey?: string
   owner?: string
   renewCache?: boolean
@@ -38,7 +39,8 @@ export async function getChannels(options: {
     ? { owner } // search channels of a specific user
     : prefix // global search (note: might be costly?)
 
-  console.log("search:", search)
+  // console.log("search:", search)
+  
   for await (const { id, name, likes, updatedAt } of listDatasets({
     search,
     credentials,
@@ -46,6 +48,9 @@ export async function getChannels(options: {
     ? { cache: "no-store" }
     : undefined
   })) {
+    if (options.channelId && options.channelId !== id) {
+      continue
+    }
 
     // TODO: need to handle better cases where the username is missing
 
@@ -66,12 +71,16 @@ export async function getChannels(options: {
       continue
     }
 
-    const channel = await getChannel({
+    const channel = await parseChannel({
       ...options,
       id, name, likes, updatedAt
     })
 
     channels.push(channel)
+
+    if (options.channelId && options.channelId === id) {
+      break
+    }
   }
 
   return channels

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

@@ -0,0 +1,130 @@
+"use server"
+
+import { Credentials, downloadFile, whoAmI } from "@/huggingface/hub/src"
+import { parseDatasetReadme } from "@/app/server/actions/utils/parseDatasetReadme"
+import { ChannelInfo } from "@/types"
+
+import { adminCredentials } from "../config"
+
+export async function parseChannel(options: {
+  id: string
+  name: string
+  likes: number
+  updatedAt: Date
+  apiKey?: string
+  owner?: string
+  renewCache?: boolean
+}): Promise<ChannelInfo> {
+  // console.log("getChannels")
+  let credentials: Credentials = adminCredentials
+  let owner = options.owner
+
+  if (options.apiKey) {
+    try {
+      credentials = { accessToken: options.apiKey }
+      const { name: username } = await whoAmI({ credentials })
+      if (!username) {
+        throw new Error(`couldn't get the username`)
+      }
+      // everything is in order,
+      owner = username
+    } catch (err) {
+      console.error(err)
+      throw err
+    }
+  }
+
+  const prefix = "ai-tube-"
+
+  const name = options.name
+
+  const chunks = name.split("/")
+  const [datasetUser, datasetName] = chunks.length === 2
+    ? chunks
+    : [name, name]
+
+  // console.log(`found a candidate dataset "${datasetName}" owned by @${datasetUser}`)
+  
+  // ignore channels which don't start with ai-tube
+  if (!datasetName.startsWith(prefix)) {
+    throw new Error("this is not an AI Tube channel")
+  }
+
+  // ignore the video index
+  if (datasetName === "ai-tube-index") {
+    throw new Error("cannot get channel of ai-tube-index: time-space continuum broken!")
+  }
+
+  const slug = datasetName.replaceAll(prefix, "")
+  
+  // console.log(`found an AI Tube channel: "${slug}"`)
+
+  // TODO parse the README to get the proper label
+  let label = slug.replaceAll("-", " ")
+
+  let model = ""
+  let lora = ""
+  let style = ""
+  let thumbnail = ""
+  let prompt = ""
+  let description = ""
+  let voice = ""
+  let tags: string[] = []
+
+  // console.log(`going to read datasets/${name}`)
+  try {
+    const response = await downloadFile({
+      repo: `datasets/${name}`,
+      path: "README.md",
+      credentials
+    })
+    const readme = await response?.text()
+
+    const parsedDatasetReadme = parseDatasetReadme(readme)
+    
+    // console.log("parsedDatasetReadme: ", parsedDatasetReadme)
+
+    prompt = parsedDatasetReadme.prompt
+    label = parsedDatasetReadme.pretty_name
+    description = parsedDatasetReadme.description
+    thumbnail = parsedDatasetReadme.thumbnail || "thumbnail.jpg"
+    model = parsedDatasetReadme.model || ""
+    lora = parsedDatasetReadme.lora || ""
+    style = parsedDatasetReadme.style || ""
+    voice = parsedDatasetReadme.voice || ""
+
+    thumbnail =
+      thumbnail.startsWith("http")
+        ? thumbnail
+        : (thumbnail.endsWith(".jpg") || thumbnail.endsWith(".jpeg"))
+        ? `https://huggingface.co/datasets/${name}/resolve/main/${thumbnail}`
+        : ""
+
+    tags = parsedDatasetReadme.tags
+      .map(tag => tag.trim()) // clean them up
+      .filter(tag => tag) // remove empty tags
+    
+  } catch (err) {
+    // console.log("failed to read the readme:", err)
+  }
+
+  const channel: ChannelInfo = {
+    id: options.id,
+    datasetUser,
+    datasetName,
+    slug,
+    label,
+    description,
+    model,
+    lora,
+    style,
+    voice,
+    thumbnail,
+    prompt,
+    likes: options.likes,
+    tags,
+    updatedAt: options.updatedAt.toISOString()
+  }
+
+  return channel
+}

src/app/state/useStore.ts

@@ -19,11 +19,17 @@ export const useStore = create<{
 
   setPathname: (patname: string) => void
 
-  currentChannel?: ChannelInfo
-  setCurrentChannel: (currentChannel?: ChannelInfo) => void
+  publicChannel?: ChannelInfo
+  setPublicChannel: (setPublicChannel?: ChannelInfo) => void
 
-  currentChannels: ChannelInfo[]
-  setCurrentChannels: (currentChannels?: ChannelInfo[]) => void
+  publicChannels: ChannelInfo[]
+  setPublicChannels: (publicChannels?: ChannelInfo[]) => void
+
+  userChannel?: ChannelInfo
+  setUserChannel: (userChannel?: ChannelInfo) => void
+
+  userChannels: ChannelInfo[]
+  setUserChannels: (userChannels?: ChannelInfo[]) => void
 
   currentTag?: string
   setCurrentTag: (currentTag?: string) => void
@@ -37,11 +43,17 @@ export const useStore = create<{
   currentModel?: string
   setCurrentModel: (currentModel?: string) => void
 
-  currentVideos: VideoInfo[]
-  setCurrentVideos: (currentVideos: VideoInfo[]) => void
+  publicVideo?: VideoInfo
+  setPublicVideo: (publicVideo?: VideoInfo) => void
+
+  publicVideos: VideoInfo[]
+  setPublicVideos: (userVideos: VideoInfo[]) => void
+
+  userVideo?: VideoInfo
+  setUserVideo: (userVideo?: VideoInfo) => void
 
-  currentVideo?: VideoInfo
-  setCurrentVideo: (currentVideo?: VideoInfo) => void
+  userVideos: VideoInfo[]
+  setUserVideos: (userVideos: VideoInfo[]) => void
 
   // currentPrompts: VideoInfo[]
   // setCurrentPrompts: (currentPrompts: VideoInfo[]) => void
@@ -62,7 +74,9 @@ export const useStore = create<{
       "/": "home",
       "/watch": "public_video",
       "/channels": "public_channels",
-      "/account": "user_account"
+      "/channel": "public_channel",
+      "/account": "user_account",
+      "/account/channel": "user_channel",
     }
 
     set({ view: routes[pathname] || "not_found" })
@@ -78,16 +92,28 @@ export const useStore = create<{
     set({ menuMode })
   },
 
-  currentChannel: undefined,
-  setCurrentChannel: (currentChannel?: ChannelInfo) => {
+  publicChannel: undefined,
+  setPublicChannel: (publicChannel?: ChannelInfo) => {
+    // TODO: download videos for this new channel
+    set({ publicChannel })
+  },
+
+  publicChannels: [],
+  setPublicChannels: (publicChannels: ChannelInfo[] = []) => {
+    // TODO: download videos for this new channel
+    set({ publicChannels: Array.isArray(publicChannels) ? publicChannels : [] })
+  },
+
+  userChannel: undefined,
+  setUserChannel: (userChannel?: ChannelInfo) => {
     // TODO: download videos for this new channel
-    set({ currentChannel })
+    set({ userChannel })
   },
 
-  currentChannels: [],
-  setCurrentChannels: (currentChannels: ChannelInfo[] = []) => {
+  userChannels: [],
+  setUserChannels: (userChannels: ChannelInfo[] = []) => {
     // TODO: download videos for this new channel
-    set({ currentChannels: Array.isArray(currentChannels) ? currentChannels : [] })
+    set({ userChannels: Array.isArray(userChannels) ? userChannels : [] })
   },
 
   currentTag: undefined,
@@ -110,13 +136,25 @@ export const useStore = create<{
     set({ currentModel })
   },
 
-  currentVideos: [],
-  setCurrentVideos: (currentVideos: VideoInfo[] = []) => {
+  publicVideo: undefined,
+  setPublicVideo: (publicVideo?: VideoInfo) => {
+    set({ publicVideo })
+  },
+
+  publicVideos: [],
+  setPublicVideos: (publicVideos: VideoInfo[] = []) => {
     set({
-      currentVideos: Array.isArray(currentVideos) ? currentVideos : [] 
+      publicVideos: Array.isArray(publicVideos) ? publicVideos : [] 
     })
   },
 
-  currentVideo: undefined,
-  setCurrentVideo: (currentVideo?: VideoInfo) => { set({ currentVideo }) },
+  userVideo: undefined,
+  setUserVideo: (userVideo?: VideoInfo) => { set({ userVideo }) },
+
+  userVideos: [],
+  setUserVideos: (userVideos: VideoInfo[] = []) => {
+    set({
+      userVideos: Array.isArray(userVideos) ? userVideos : [] 
+    })
+  },
 }))

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

@@ -11,19 +11,11 @@ import { getTags } from "@/app/server/actions/ai-tube-hf/getTags"
 
 export function HomeView() {
   const [_isPending, startTransition] = useTransition()
-
   const setView = useStore(s => s.setView)
-  const displayMode = useStore(s => s.displayMode)
-  const setDisplayMode = useStore(s => s.setDisplayMode)
-  const currentChannel = useStore(s => s.currentChannel)
-  const setCurrentChannel = useStore(s => s.setCurrentChannel)
   const currentTag = useStore(s => s.currentTag)
-  const setCurrentTag = useStore(s => s.setCurrentTag)
-  const setCurrentTags = useStore(s => s.setCurrentTags)
-  const currentVideos = useStore(s => s.currentVideos)
-  const setCurrentVideos = useStore(s => s.setCurrentVideos)
-  const currentVideo = useStore(s => s.currentVideo)
-  const setCurrentVideo = useStore(s => s.setCurrentVideo)
+  const setPublicVideos = useStore(s => s.setPublicVideos)
+  const setPublicVideo = useStore(s => s.setPublicVideo)
+  const publicVideos = useStore(s => s.publicVideos)
 
   useEffect(() => {
     startTransition(async () => {
@@ -33,13 +25,13 @@ export function HomeView() {
         maxVideos: 25
       })
 
-      setCurrentVideos(videos)
+      setPublicVideos(videos)
     })
   }, [currentTag])
 
   const handleSelect = (video: VideoInfo) => {
-    setCurrentVideo(video)
     setView("public_video")
+    setPublicVideo(video)
   }
 
   return (
@@ -47,7 +39,7 @@ export function HomeView() {
      `pr-4`
     )}>
       <VideoList
-        videos={currentVideos}
+        videos={publicVideos}
         layout="grid"
         onSelect={handleSelect}
       />

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

@@ -5,38 +5,38 @@ import { useEffect, useTransition } from "react"
 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"
 
 
 export function PublicChannelView() {
   const [_isPending, startTransition] = useTransition()
-  const currentChannel = useStore(s => s.currentChannel)
-  const currentVideos = useStore(s => s.currentVideos)
-  const setCurrentVideos = useStore(s => s.setCurrentVideos)
-  const setCurrentVideo = useStore(s => s.setCurrentVideo)
+  const publicChannel = useStore(s => s.publicChannel)
+  const publicVideos = useStore(s => s.publicVideos)
+  const setPublicVideos = useStore(s => s.setPublicVideos)
 
   useEffect(() => {
-    if (!currentChannel) {
+    if (!publicChannel) {
       return
     }
 
     startTransition(async () => {
-      /*
       const videos = await getChannelVideos({
-        channel: currentChannel,
+        channel: publicChannel,
+        status: "published",
       })
-      console.log("videos:", videos)
-      */
+      setPublicVideos(videos)
     })
 
-    setCurrentVideos([])
-  }, [currentChannel, currentChannel?.id])
+    setPublicVideos([])
+  }, [publicChannel, publicChannel?.id])
 
   return (
     <div className={cn(
       `flex flex-col`
     )}>
       <VideoList
-        videos={currentVideos}
+        layout="grid"
+        videos={publicVideos}
       />
     </div>
   )

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

@@ -10,8 +10,8 @@ import { ChannelList } from "@/app/interface/channel-list"
 export function PublicChannelsView() {
   const [_isPending, startTransition] = useTransition()
 
-  const currentChannels = useStore(s => s.currentChannels)
-  const setCurrentChannels = useStore(s => s.setCurrentChannels)
+  const publicChannels = useStore(s => s.publicChannels)
+  const setPublicChannels = useStore(s => s.setPublicChannels)
   const [isLoaded, setLoaded] = useState(false)
 
   useEffect(() => {
@@ -19,10 +19,10 @@ export function PublicChannelsView() {
       startTransition(async () => {
         try {
           const channels = await getChannels()
-          setCurrentChannels(channels)
+          setPublicChannels(channels)
         } catch (err) {
           console.error("failed to load the public channels", err)
-          setCurrentChannels([])
+          setPublicChannels([])
         } finally {
           setLoaded(true)
         }
@@ -34,7 +34,7 @@ export function PublicChannelsView() {
     <div className={cn(`flex flex-col`)}>
       <ChannelList
         layout="grid"
-        channels={currentChannels}
+        channels={publicChannels}
       />
     </div>
   )

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

@@ -10,7 +10,7 @@ import { VideoInfo } from "@/types"
 
 
 export function PublicVideoView() {
-  const video = useStore(s => s.currentVideo)
+  const video = useStore(s => s.publicVideo)
 
   const videoId = `${video?.id || ""}`
 

src/app/views/user-account-view/index.tsx

@@ -18,10 +18,10 @@ export function UserAccountView() {
     defaultSettings.huggingfaceApiKey
   )
   const setView = useStore(s => s.setView)
-  const setCurrentChannel = useStore(s => s.setCurrentChannel)
+  const setUserChannel = useStore(s => s.setUserChannel)
 
-  const currentChannels = useStore(s => s.currentChannels)
-  const setCurrentChannels = useStore(s => s.setCurrentChannels)
+  const userChannels = useStore(s => s.userChannels)
+  const setUserChannels = useStore(s => s.setUserChannels)
   const [isLoaded, setLoaded] = useState(false)
 
   useEffect(() => {
@@ -32,10 +32,10 @@ export function UserAccountView() {
             apiKey: huggingfaceApiKey,
             renewCache: true,
           })
-          setCurrentChannels(channels)
+          setUserChannels(channels)
         } catch (err) {
           console.error("failed to load the channel for the current user:", err)
-          setCurrentChannels([])
+          setUserChannels([])
         } finally {
           setLoaded(true)
         }
@@ -71,11 +71,11 @@ export function UserAccountView() {
       {huggingfaceApiKey ? 
       <div className="flex flex-col space-y-4">
         <h2 className="text-3xl font-bold">Your custom channels:</h2>
-        {currentChannels?.length ? <ChannelList
+        {userChannels?.length ? <ChannelList
           layout="grid"
-          channels={currentChannels}
-          onSelect={(channel) => {
-            setCurrentChannel(channel)
+          channels={userChannels}
+          onSelect={(userChannel) => {
+            setUserChannel(userChannel)
             setView("user_channel")
           }}
         /> : <p>Ask <span className="font-mono">@jbilcke-hf</span> for help to create a channel!</p>}

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

@@ -13,8 +13,8 @@ import { Input } from "@/components/ui/input"
 import { Textarea } from "@/components/ui/textarea"
 import { Button } from "@/components/ui/button"
 import { submitVideoRequest } from "@/app/server/actions/submitVideoRequest"
-import { getVideoRequestsFromChannel } from "@/app/server/actions/ai-tube-hf/getVideoRequestsFromChannel"
 import { PendingVideoList } from "@/app/interface/pending-video-list"
+import { getChannelVideos } from "@/app/server/actions/ai-tube-hf/getChannelVideos"
 
 export function UserChannelView() {
   const [_isPending, startTransition] = useTransition()
@@ -32,49 +32,35 @@ export function UserChannelView() {
 
   const [isSubmitting, setIsSubmitting] = useState(false)
 
-  const currentChannel = useStore(s => s.currentChannel)
-  const currentVideos = useStore(s => s.currentVideos)
-  const setCurrentVideos = useStore(s => s.setCurrentVideos)
-  const setCurrentVideo = useStore(s => s.setCurrentVideo)
+  const userChannel = useStore(s => s.userChannel)
+  const userChannels = useStore(s => s.userChannels)
+  const userVideos = useStore(s => s.userVideos)
+  const setUserChannel = useStore(s => s.setUserChannel)
+  const setUserChannels = useStore(s => s.setUserChannels)
+  const setUserVideos = useStore(s => s.setUserVideos)
+
 
-  console.log("CURRENT VIDEOS:", currentVideos)
   useEffect(() => {
-    if (!currentChannel) {
+    if (!userChannel) {
       return
     }
 
     startTransition(async () => {
 
-      const videoRequests = await getVideoRequestsFromChannel({
-        channel: currentChannel,
-        apiKey: huggingfaceApiKey,
-        renewCache: true
+      const videos = await getChannelVideos({
+        channel: userChannel,
+        // status: undefined, // we want *all* status
       })
 
-      const videos: VideoInfo[] = Object.values(videoRequests).map(videoRequest => ({
-        id: videoRequest.id,
-        status: "submitted",
-        label: videoRequest.label,
-        description: videoRequest.description,
-        prompt: videoRequest.prompt,
-        thumbnailUrl: videoRequest.thumbnailUrl,
-        assetUrl: "",
-        numberOfViews: 0,
-        numberOfLikes: 0,
-        updatedAt: videoRequest.updatedAt,
-        tags: videoRequest.tags,
-        channel: currentChannel
-      }))
-
       console.log("setCurrentVideos:", videos)
 
-      setCurrentVideos(videos)
+      setUserVideos(videos)
     })
 
-  }, [huggingfaceApiKey, currentChannel, currentChannel?.id])
+  }, [huggingfaceApiKey, userChannel, userChannel?.id])
 
   const handleSubmit = () => {
-    if (!currentChannel) {
+    if (!userChannel) {
       return
     }
     if (!titleDraft || !promptDraft) {
@@ -87,7 +73,7 @@ export function UserChannelView() {
     startTransition(async () => {
       try {
         const newVideo = await submitVideoRequest({
-          channel: currentChannel,
+          channel: userChannel,
           apiKey: huggingfaceApiKey,
           title: titleDraft,
           description: descriptionDraft,
@@ -97,7 +83,7 @@ export function UserChannelView() {
 
         // in case of success we update the frontend immediately
         // with our draft video
-        setCurrentVideos([newVideo, ...currentVideos])
+        setUserVideos([newVideo, ...userVideos])
         setPromptDraft("")
         setDescriptionDraft("")
         setTagsDraft("")
@@ -223,7 +209,7 @@ export function UserChannelView() {
       <h2 className="text-3xl font-bold">Current video prompts:</h2>
 
       <PendingVideoList
-        videos={currentVideos}
+        videos={userVideos}
         onDelete={handleDelete}
       />
     </div>