hide some features for the beta + improve player

.env

@@ -1,12 +1,11 @@
 
+NEXT_PUBLIC_SHOW_BETA_FEATURES="false"
+
 ADMIN_HUGGING_FACE_API_TOKEN=""
 ADMIN_HUGGING_FACE_USERNAME=""
 
 AI_TUBE_ROBOT_API="https://jbilcke-hf-ai-tube-robot.hf.space"
 
-VIDEOCHAIN_API_URL=""
-VIDEOCHAIN_API_TOKEN=""
-
 # ----------- CENSORSHIP -------
 ENABLE_CENSORSHIP=
 FINGERPRINT_KEY=

package-lock.json

@@ -36,6 +36,7 @@
         "clsx": "^2.0.0",
         "cmdk": "^0.2.0",
         "cookies-next": "^2.1.2",
+        "date-fns": "^2.30.0",
         "eslint": "8.45.0",
         "eslint-config-next": "13.4.10",
         "hash-wasm": "^4.11.0",
@@ -50,6 +51,7 @@
         "react-dom": "18.2.0",
         "react-icons": "^4.12.0",
         "react-smooth-scroll-hook": "^1.3.4",
+        "react-tuby": "^0.1.24",
         "react-virtualized-auto-sizer": "^1.0.20",
         "replicate": "^0.17.0",
         "sbd": "^1.0.19",
@@ -2910,6 +2912,21 @@
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
       "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA=="
     },
+    "node_modules/date-fns": {
+      "version": "2.30.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
+      "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0"
+      },
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -5639,6 +5656,17 @@
         }
       }
     },
+    "node_modules/react-tuby": {
+      "version": "0.1.24",
+      "resolved": "https://registry.npmjs.org/react-tuby/-/react-tuby-0.1.24.tgz",
+      "integrity": "sha512-NbCZSgzzeP1vnXpeb6mWlTmIbJVYcputd7Sck14ZN12mREO+IndPQHLfDL3S/l1CKuualFyK+fvpoq79EyYx0A==",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=16"
+      }
+    },
     "node_modules/react-virtualized-auto-sizer": {
       "version": "1.0.20",
       "resolved": "https://registry.npmjs.org/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.20.tgz",

package.json

@@ -37,6 +37,7 @@
     "clsx": "^2.0.0",
     "cmdk": "^0.2.0",
     "cookies-next": "^2.1.2",
+    "date-fns": "^2.30.0",
     "eslint": "8.45.0",
     "eslint-config-next": "13.4.10",
     "hash-wasm": "^4.11.0",
@@ -51,6 +52,7 @@
     "react-dom": "18.2.0",
     "react-icons": "^4.12.0",
     "react-smooth-scroll-hook": "^1.3.4",
+    "react-tuby": "^0.1.24",
     "react-virtualized-auto-sizer": "^1.0.20",
     "replicate": "^0.17.0",
     "sbd": "^1.0.19",

src/app/config.ts

@@ -0,0 +1,3 @@
+export const showBetaFeatures = `${
+  process.env.NEXT_PUBLIC_SHOW_BETA_FEATURES || ""
+}`.trim().toLowerCase() === "true"

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

@@ -16,9 +16,10 @@ export function ChannelCard({
     className={cn(
       `flex flex-col`,
       `items-center justify-center`,
-      `w-[300px] h-[200px]`,
+      `w-52 h-52`,
       `rounded-lg`,
-      `bg-neutral-800 hover:bg-neutral-500/80`,
+      `bg-neutral-900 hover:bg-neutral-700/80`,
+      `text-neutral-100/80 hover:text-neutral-100/100`,
       `cursor-pointer`,
       className,
     )}
@@ -37,10 +38,25 @@ export function ChannelCard({
       </div>
 
       <div className={cn(
-        `text-center`
+        `flex flex-col`,
+         `items-center justify-center text-center`,
+         `space-y-2`
       )}>
-        <h3>{channel.label}</h3>
-        <p>{channel.likes} likes</p>
+        <div className="text-center text-lg">{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>
+        */}
+        <div className="text-center text-sm font-semibold">
+          @{channel.datasetUser}
+        </div>
+        <div className="flex flex-row items-center justify-center">
+          <div className="text-center text-sm">{0} videos</div>
+          <div className="px-1">-</div>
+          <div className="text-center text-sm">{channel.likes} likes</div>
+        </div>
       </div>
     </div>
   )

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

@@ -7,14 +7,20 @@ import { CgProfile } from "react-icons/cg"
 import { useStore } from "@/app/state/useStore"
 import { cn } from "@/lib/utils"
 import { MenuItem } from "./menu-item"
+import { showBetaFeatures } from "@/app/config"
+
 
 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)
+
   return (
     <div className={cn(
       `flex flex-col`,
       `w-24 px-1 pt-4`,
+      `justify-between`
      // `bg-orange-500`,
     )}>
       <div className={cn(
@@ -27,16 +33,17 @@ export function LeftMenu() {
           >
           Discover
         </MenuItem>
-        <MenuItem
+        {showBetaFeatures && <MenuItem
           icon={<GrChannel className="h-5 w-5" />}
           selected={view === "public_channels"}
           onClick={() => setView("public_channels")}
           >
           Channels
-        </MenuItem>
+        </MenuItem>}
       </div>
       <div className={cn(
         `flex flex-col w-full`,
+       
       )}>
         {/*<MenuItem
           icon={<MdVideoLibrary className="h-6 w-6" />}
@@ -46,20 +53,13 @@ export function LeftMenu() {
           My Videos
         </MenuItem>
       */}
-        <MenuItem
-          icon={<PiRobot className="h-6 w-6" />}
+        {showBetaFeatures && <MenuItem
+          icon={<CgProfile className="h-6 w-6" />}
           selected={view === "user_channels"}
           onClick={() => setView("user_channels")}
           >
-          My Robots
-        </MenuItem>
-        <MenuItem
-          icon={<CgProfile className="h-6 w-6" />}
-          selected={view === "user_account"}
-          onClick={() => setView("user_account")}
-          >
           Account
-        </MenuItem>
+        </MenuItem>}
       </div>
     </div>
     )

src/app/interface/pending-video-card/index.tsx

@@ -0,0 +1,44 @@
+import { PiTrashBold } from "react-icons/pi"
+
+import { TableCell, TableRow } from "@/components/ui/table"
+import { cn } from "@/lib/utils"
+import { MdLockClock } from "react-icons/md"
+import { VideoInfo } from "@/types"
+import { truncate } from "./truncate"
+
+export function PendingVideoCard({
+  video,
+  onDelete,
+  className = "",
+}: {
+  video: VideoInfo
+  onDelete?: (video: VideoInfo) => void
+  className?: string
+ }) {
+
+  const isBusy = video.status === "queued" || video.status === "generating"
+  const hasError = video.status === "error"
+  const isNotGeneratedYet = video.status === "submitted" || video.status === "queued" || video.status === "generating"
+  const isGenerated = video.status === "published"
+
+  return (
+    <TableRow className={cn(
+      className,
+    )}>
+      <TableCell className="w-[100px] text-xs">{truncate(video.id, 8)}</TableCell>
+      <TableCell className="w-[120px]">{video.updatedAt || "N.A."}</TableCell>
+      <TableCell className="w-[150px] truncate">{truncate(video.description, 20)}</TableCell>
+      <TableCell className="w-[150px] truncate">{truncate(video.description, 45)}</TableCell> 
+      <TableCell className="w-[100px]">{video.status}</TableCell>
+      <TableCell>
+        {
+        isBusy
+        ? <MdLockClock className="h-5 w-5" />
+        : <div
+          className="h-8 w-8 rounded-full cursor-pointer hover:bg-neutral-600 flex flex-col items-center justify-center"
+          onClick={() => { onDelete?.(video) }}><PiTrashBold className="h-6 w-6" />
+        </div>
+       }</TableCell>
+    </TableRow>
+  )
+}

src/app/interface/pending-video-card/truncate.ts

@@ -0,0 +1,5 @@
+export function truncate(text: string, length: number): string {
+  const truncated = text.slice(0, length)
+
+  return `${truncated}${truncated !== text ? '...' : ''}`
+}

src/app/interface/pending-video-list/index.tsx

@@ -0,0 +1,39 @@
+import { cn } from "@/lib/utils"
+import { VideoInfo } from "@/types"
+import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+
+import { PendingVideoCard } from "../pending-video-card"
+
+export function PendingVideoList({
+  videos,
+  onDelete,
+  className = "",
+}: {
+  videos: VideoInfo[]
+  onDelete?: (video: VideoInfo) => void
+  className?: string
+}) {
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead className="w-[100px]">ID</TableHead>
+          <TableHead className="w-[120px]">Updated at</TableHead>
+          <TableHead className="w-[150px]">Title</TableHead>
+          <TableHead className="w-[150px]">Description</TableHead>
+          <TableHead className="w-[100px]">Status</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {videos.map((video) => (
+          <PendingVideoCard
+            key={video.id}
+            video={video}
+            className=""
+            onDelete={onDelete}
+          />
+        ))}
+      </TableBody>
+    </Table>
+  )
+}

src/app/interface/{top-menu → top-header}/index.tsx

@@ -1,23 +1,57 @@
+import { Pathway_Gothic_One } from 'next/font/google'
+import { PiPopcornBold } from "react-icons/pi"
+
+const pathway = Pathway_Gothic_One({
+  weight: "400",
+  style: "normal",
+  subsets: ["latin"],
+  display: "swap"
+})
+
 import { videoCategoriesWithLabels } from "@/app/state/categories"
 import { useStore } from "@/app/state/useStore"
 import { cn } from "@/lib/utils"
+import { useEffect } from 'react'
 
-export function TopMenu() {
+export function TopHeader() {
+  const view = useStore(s => s.view)
+  const setView = useStore(s => s.setView)
   const displayMode = useStore(s => s.displayMode)
   const setDisplayMode = useStore(s => s.setDisplayMode)
+
+  const headerMode = useStore(s => s.headerMode)
+  const setHeaderMode = useStore(s => s.setHeaderMode)
+
+  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 setCurrentVideo = useStore(s => s.setCurrentVideo)
 
+  const isNormalSize = headerMode === "normal"
+
+
+  useEffect(() => {
+    if (view === "public_video") {
+      setHeaderMode("compact")
+      setMenuMode("slider_hidden")
+    } else {
+      setHeaderMode("normal")
+      setMenuMode("normal_icon")
+    }
+  }, [view])
+  
   return (
     <div className={cn(
       `flex flex-col`,
       `overflow-hidden`,
-      `w-full h-28 pt-4`,
+      `transition-all duration-200 ease-in-out`,
+      `w-full`,
+
     )}>
       <div className={cn(
         `flex flex-row justify-between`,
@@ -25,26 +59,58 @@ export function TopMenu() {
       )}>
         <div className={cn(
           `flex flex-col items-start justify-center`,
-          `py-2 w-64`,
+          `w-64`,
         )}>
-          <div className="flex flex-row items-center justify-start">
-            <span className="text-4xl mr-1">🍿 </span>
-            <span className="text-4xl font-semibold">AI Tube</span>
+          <div className={cn(
+            `flex flex-row items-center justify-start`,
+            `transition-all duration-200 ease-in-out`,
+            `cursor-pointer`,
+             "pt-2 text-3xl space-x-1",
+              pathway.className,
+              isNormalSize
+              ? "scale-125 ml-4 mb-4" : "scale-100 mb-2"
+            )}
+            onClick={() => {
+              setView("home")
+            }}
+            >
+            <div className="mr-1">
+              <div className={cn(
+                `flex flex-col items-center justify-center`,
+                `bg-yellow-300 text-neutral-950`,
+                `rounded-lg w-6 h-7`
+              )}>
+                <PiPopcornBold className={cn(
+                 `w-5 h-5`
+                )} />
+              </div>
+            </div>
+            <div className="font-semibold">
+              {view === "user_channels"
+                ? "My account"
+              : view === "public_channels"
+                ? "AI Channels"
+              : "AiTube" }
+            </div>
           </div>
         </div>
         <div className={cn(
+           `transition-all duration-200 ease-in-out`,
            `flex flex-col items-center justify-center`,
            `px-4 py-2 w-max-64`,
         )}>
-          [ Search bar goes here ]
+          {/*[ Search bar goes here ]*/}
         </div>
         <div className={cn()}>
-          &nbsp; {/* unused for now */}
+          &nbsp; {/* more buttons? unused for now */}
         </div>
       </div>
+      {
+      isNormalSize ? 
       <div className={cn(
         `flex flex-row space-x-3`,
         `text-[13px] font-semibold`,
+        `mb-4`
       )}>
         {Object.entries(videoCategoriesWithLabels)
           .map(([ key, label ]) => (
@@ -54,7 +120,7 @@ export function TopMenu() {
               `flex flex-col items-center justify-center`,
               `rounded-lg px-3 py-1 h-8`,
               `cursor-pointer`,
-              `transition-all duration-300 ease-in-out`,
+              `transition-all duration-200 ease-in-out`,
               currentTag === key
                 ? `bg-neutral-100 text-neutral-800`
                 : `bg-neutral-800 text-neutral-50/90 hover:bg-neutral-700 hover:text-neutral-50/90`,
@@ -69,7 +135,7 @@ export function TopMenu() {
             )}>{label}</span>
           </div>
         ))}
-      </div>
+      </div> : null}
     </div>
   )
-}
+}

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

@@ -1,33 +1,118 @@
+import { useRef, useState } from "react"
+import { RiCheckboxCircleFill } from "react-icons/ri"
+
 import { cn } from "@/lib/utils"
 import { VideoInfo } from "@/types"
+import { formatDuration } from "@/lib/formatDuration"
+import { formatTimeAgo } from "@/lib/formatTimeAgo"
 
 export function VideoCard({
   video,
   className = "",
+  onSelect,
 }: {
   video: VideoInfo
   className?: string
+  onSelect?: (video: VideoInfo) => void
  }) {
+  const ref = useRef<HTMLVideoElement>(null)
+  const [duration, setDuration] = useState(0)
+
+  const handlePointerEnter = () => {
+    // ref.current?.load()
+    ref.current?.play()
+  }
+  const handlePointerLeave = () => {
+    ref.current?.pause()
+    // ref.current?.load()
+  }
+  const handleLoad = () => {
+    if (ref.current?.readyState) {
+      setDuration(ref.current.duration)
+    }
+  }
+
+  const handleClick = () => {
+    onSelect?.(video)
+  }
 
   return (
   <div
     className={cn(
+      `w-full`,
       `flex flex-col`,
-      `w-[300px] h-[400px]`,
       `bg-line-900`,
+      `space-y-3`,
+      `cursor-pointer`,
       className,
-    )}>
+    )}
+    onPointerEnter={handlePointerEnter}
+    onPointerLeave={handlePointerLeave}
+    onClick={handleClick}
+    >
       <div
         className={cn(
-          `rounded-lg overflow-hidden`
+          `flex flex-col aspect-video items-center justify-center`,
+          `rounded-xl overflow-hidden`,
         )}
       >
-        <img src="" />
+        <video
+          ref={ref}
+          src={video.assetUrl}
+          className="w-full"
+          onLoadedMetadata={handleLoad}
+          muted
+        />
+
+        <div className={cn(
+          ``,
+          `w-full flex flex-row items-end justify-end`
+          )}>
+            <div className={cn(
+              `-mt-8`,
+              `mr-0`,
+            )}
+            >
+              <div className={cn(
+                `mb-[5px]`,
+                `mr-[5px]`,
+                `flex flex-col items-center justify-center text-center`,
+                `bg-neutral-900 rounded`,
+                `text-2xs font-semibold px-[3px] py-[1px]`,
+              )}
+              >{formatDuration(duration)}</div>
+            </div>
+        </div>
       </div>
       <div className={cn(
-
+        `flex flex-row space-x-4`,
       )}>
-        <h3>{video.label}</h3>
+        <div className="flex flex-col">
+          <div className="flex w-9 rounded-full overflow-hidden">
+            <img
+              src="huggingface-avatar.jpeg"
+            />
+          </div>
+        </div>
+        <div className="flex flex-col flex-grow">
+          <h3 className="text-zinc-100 text-base font-medium mb-0 line-clamp-2">{video.label}</h3>
+          <div className={cn(
+            `flex flex-row items-center`,
+            `text-neutral-400 text-sm font-normal space-x-1`,
+            )}>
+            <div>{video.channel.label}</div>
+            <div><RiCheckboxCircleFill className="" /></div>
+          </div>
+          <div className={cn(
+            `flex flex-row`,
+            `text-neutral-400 text-sm font-normal`,
+            `space-x-1`
+          )}>
+           <div>0 views</div>
+           <div className="font-semibold scale-125">·</div>
+           <div>{formatTimeAgo(video.updatedAt)}</div>
+          </div>
+        </div>
       </div>
     </div>
   )

src/app/interface/video-list/index.tsx

@@ -7,6 +7,7 @@ export function VideoList({
   videos,
   layout = "flex",
   className = "",
+  onSelect,
 }: {
   videos: VideoInfo[]
 
@@ -20,13 +21,15 @@ export function VideoList({
   layout?: "grid" | "flex"
 
   className?: string
+
+  onSelect?: (video: VideoInfo) => void
 }) {
   
   return (
     <div
       className={cn(
         layout === "grid"
-          ? `grid grid-cols-4 gap-4`
+          ? `grid grid-cols-2 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4`
           : `flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4`,
         className,
       )}
@@ -35,7 +38,8 @@ export function VideoList({
       <VideoCard
         key={video.id}
         video={video}
-        className=""
+        className="w-full"
+        onSelect={onSelect}
       />
     ))}
     </div>

src/app/interface/video-player/index.tsx

@@ -0,0 +1,46 @@
+"use client"
+
+import { Player } from "react-tuby"
+import "react-tuby/css/main.css"
+
+import { cn } from "@/lib/utils"
+import { VideoInfo } from "@/types"
+
+export function VideoPlayer({
+  video,
+  className = ""
+ }: {
+  video?: VideoInfo
+  className?: string
+}) {
+
+  // TODO: keep the same form factor?
+  if (!video) { return null }
+
+  return (
+    <div className={cn(
+      `w-full`,
+      `flex flex-col items-center justify-center`,
+      `rounded-xl overflow-hidden`,
+      className
+      )}>
+      <div className={cn(
+        `w-[calc(100%+16px)]`,
+        `-ml-2 -mr-2`,
+        `flex flex-col items-center justify-center`,
+        )}>
+        <Player
+        
+          src={[
+            {
+              quality: "Full HD",
+              url: video.assetUrl,
+            }
+          ]}
+          subtitles={[]}
+          // poster="https://cdn.jsdelivr.net/gh/naptestdev/video-examples@master/poster.png"
+        />
+      </div>
+    </div>
+  )
+}

src/app/layout.tsx

@@ -1,11 +1,16 @@
 import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
+import { Roboto } from 'next/font/google'
 
 import { cn } from '@/lib/utils'
 
 import './globals.css'
 
-const inter = Inter({ subsets: ['latin'] })
+const roboto = Roboto({
+  weight: ['100', '300', '400', '500', '700', '900'],
+  style: ['normal', 'italic'],
+  subsets: ['latin'],
+  display: 'swap',
+})
 
 export const metadata: Metadata = {
   title: '🍿 AI Tube',
@@ -21,7 +26,7 @@ export default function RootLayout({
     <html lang="en">
       <body className={cn(
         `h-full w-full overflow-auto`,
-        inter.className
+        roboto.className
         )}>
         {children}
       </body>

src/app/main.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { cn } from "@/lib/utils"
-import { TopMenu } from "./interface/top-menu"
+import { TopHeader } from "./interface/top-header"
 import { LeftMenu } from "./interface/left-menu"
 import { useStore } from "./state/useStore"
 import { HomeView } from "./views/home-view"
@@ -14,7 +14,7 @@ import { UserAccountView } from "./views/user-account-view"
 
 export function Main() {
   const view = useStore(s => s.view)
-
+  const headerMode = useStore(s => s.headerMode)
   return (
     <div className={cn(
       `flex flex-row h-screen w-screen inset-0 overflow-hidden`,
@@ -23,11 +23,16 @@ export function Main() {
       <LeftMenu />
       <div className={cn(
         `flex flex-col`,
-        `w-[calc(100vh-96px)]`,
+        `w-[calc(100vw-96px)]`,
         `px-2`
       )}>
-        <TopMenu />
-        <div className="pt-4">
+        <TopHeader />
+        <div className={cn(
+          `w-full overflow-x-hidden overflow-y-scroll`,
+          headerMode === "normal"
+            ? `h-[calc(100vh-112px)]`
+            : `h-[calc(100vh-48px)]`
+        )}>
           {view === "home" && <HomeView />}
           {view === "public_video" && <PublicVideoView />}
           {view === "public_channels" && <PublicChannelsView />}

src/app/page.tsx

@@ -5,12 +5,14 @@ import Head from "next/head"
 import Script from "next/script"
 
 import { cn } from "@/lib/utils"
+import { useStore } from "@/app/state/useStore"
 
 import { Main } from "./main"
 
 // https://nextjs.org/docs/pages/building-your-application/optimizing/fonts 
 
 export default function Page() {
+  const view = useStore(s => s.view)
   const [isLoaded, setLoaded] = useState(false)
   useEffect(() => { setLoaded(true) }, [])
   return (
@@ -23,7 +25,9 @@ export default function Page() {
       <main className={cn(
         `light text-neutral-100`,
         // `bg-gradient-to-r from-green-500 to-yellow-400`,
-        `bg-gradient-to-r from-neutral-950 to-neutral-950`,
+        view === "public_video"
+          ? `bg-gradient-radial from-neutral-900 to-neutral-950`
+          : `bg-neutral-950` // bg-gradient-to-br from-neutral-950 via-neutral-950 to-neutral-950`
         )}>
         {isLoaded && <Main />}
         {/*

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

@@ -0,0 +1,42 @@
+import { deleteFile } from "@/huggingface/hub/src"
+
+import { getCredentials } from "./getCredentials"
+
+export async function deleteFileFromDataset({
+  repo,
+  path,
+  apiKey,
+  neverThrow = false
+}: {
+  repo: string
+
+  path: string
+
+  apiKey?: string
+
+  /**
+   * If set to true, this function will never throw an exception
+   * this is useful in workflow where we don't care about what happened
+   * 
+   * False by default
+   */
+  neverThrow?: boolean
+}): Promise<boolean> {
+  try {
+    const { credentials } = await getCredentials(apiKey)
+
+    await deleteFile({
+      repo,
+      path,
+      credentials
+    })
+    return true
+  } catch (err) {
+    if (neverThrow) {
+      console.error(`deleteFileFromDataset():`, err)
+      return false
+    } else {
+      throw err
+    }
+  }
+}

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

@@ -0,0 +1,24 @@
+
+import { VideoInfo } from "@/types"
+
+import { deleteFileFromDataset } from "./deleteFileFromDataset"
+import { formatPromptFileName } from "../utils/formatPromptFileName"
+
+export async function deleteVideoRequest({
+  video,
+  apiKey,
+  neverThrow,
+}: {
+   video: VideoInfo
+   apiKey: string
+   neverThrow?: boolean
+}): Promise<boolean> {
+  const repo = `datasets/${video.channel.datasetUser}/${video.channel.datasetName}`
+  const { fileName } = formatPromptFileName(video.id)
+  return deleteFileFromDataset({
+    repo,
+    path: fileName,
+    apiKey,
+    neverThrow,
+  })
+}

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

@@ -0,0 +1,59 @@
+import { downloadFile } from "@/huggingface/hub/src"
+import { getCredentials } from "./getCredentials"
+
+export async function downloadFileAsText({
+  repo,
+  path,
+  apiKey,
+  renewCache = false,
+  neverThrow = false
+}: {
+  repo: string
+
+  path: string
+
+  apiKey?: string
+
+  /**
+   * Force renewing the cache
+   * 
+   * False by default
+   */
+  renewCache?: boolean
+
+  /**
+   * If set to true, this function will never throw an exception
+   * this is useful in workflow where we don't care about what happened
+   * 
+   * False by default
+   */
+  neverThrow?: boolean
+}): Promise<string> {
+  try {
+    const { credentials } = await getCredentials(apiKey)
+
+    const response = await downloadFile({
+      repo,
+      path,
+      credentials,
+      requestInit: renewCache
+        ? { cache: "no-cache" }
+        : undefined
+    })
+    
+    const text = await response?.text()
+
+    if (typeof text !== "string") {
+      throw new Error(`file has no text content`)
+    }
+
+    return text
+  } catch (err) {
+    if (neverThrow) {
+      console.error(`downloadFileAsText():`, err)
+      return ""
+    } else {
+      throw err
+    }
+  }
+}

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

@@ -9,6 +9,7 @@ import { adminCredentials } from "../config"
 export async function getChannels(options: {
   apiKey?: string
   owner?: string
+  renewCache?: boolean
 } = {}): Promise<ChannelInfo[]> {
 
   let credentials: Credentials = adminCredentials
@@ -37,11 +38,14 @@ 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
+    credentials,
+    requestInit: options?.renewCache
+    ? { cache: "no-cache" }
+    : undefined
   })) {
 
     // TODO: need to handle better cases where the username is missing
@@ -83,25 +87,24 @@ export async function getChannels(options: {
       })
       const readme = await response?.text()
 
-      const ParsedDatasetReadme = parseDatasetReadme(readme)
+      const parsedDatasetReadme = parseDatasetReadme(readme)
       
-      // console.log("ParsedDatasetReadme: ", ParsedDatasetReadme)
+      // console.log("parsedDatasetReadme: ", parsedDatasetReadme)
 
-  
-      prompt = ParsedDatasetReadme.prompt
-      label = ParsedDatasetReadme.pretty_name
-      description = ParsedDatasetReadme.description
+      prompt = parsedDatasetReadme.prompt
+      label = parsedDatasetReadme.pretty_name
+      description = parsedDatasetReadme.description
 
       const prefix = "ai-tube:"
 
-      tags = ParsedDatasetReadme.tags
+      tags = parsedDatasetReadme.tags
         .filter(tag => tag.startsWith(prefix)) // remove any tag not belonging to us
         .map(tag => tag.replaceAll(prefix, "").trim()) // remove the prefix
         .filter(tag => tag) // remove empty tags
       
       
     } catch (err) {
-      console.log("failed to read the readme:", err)
+      // console.log("failed to read the readme:", err)
     }
 
     const channel: ChannelInfo = {

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

@@ -0,0 +1,38 @@
+
+// safe way to get the credentials
+
+import { Credentials, WhoAmIUser, whoAmI } from "@/huggingface/hub/src"
+
+import { adminCredentials, adminUsername } from "../config"
+
+export async function getCredentials(apiKey?: string): Promise<{
+  username: string
+  avatarUrl: string
+  credentials: Credentials
+}> {
+  let username = adminUsername
+  let credentials: Credentials = adminCredentials
+  let avatarUrl = ""
+
+  if (apiKey) {
+    try {
+      credentials = { accessToken: apiKey }
+      const user = await whoAmI({ credentials }) as unknown as WhoAmIUser
+      if (!user.name) {
+        throw new Error(`couldn't get the username`)
+      }
+      username = user.name
+      avatarUrl = user.avatarUrl || ""
+    } catch (err) {
+      console.error(err)
+      // important: we throw an error if an apiKey was explicitely given but is empty
+      throw new Error(`the provided Hugging Face API key is invalid or has expired`)
+    }
+  }
+
+  return {
+    username,
+    avatarUrl,
+    credentials
+  }
+}

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

@@ -1,112 +1,110 @@
 "use server"
 
-import { Credentials, downloadFile, listFiles, whoAmI } from "@/huggingface/hub/src"
-import { parseDatasetReadme } from "@/app/server/actions/utils/parseDatasetReadme"
 import { ChannelInfo, VideoRequest } from "@/types"
-
-import { adminCredentials } from "../config"
+import { getCredentials } from "./getCredentials"
+import { listFiles } from "@/huggingface/hub/src"
+import { parsePromptFileName } from "../utils/parsePromptFileName"
+import { downloadFileAsText } from "./downloadFileAsText"
+import { parseDatasetPrompt } from "../utils/parseDatasetPrompt"
 
 /**
  * Return all the videos requests created by a user on their channel
- * 
- * @param options 
- * @returns 
+ *
  */
-export async function getVideoRequestsFromChannel(options: {
-  channel: ChannelInfo,
-  apiKey?: string,
+export async function getVideoRequestsFromChannel({
+  channel,
+  apiKey,
+  renewCache,
+  neverThrow,
+}: {
+  channel: ChannelInfo
+  apiKey?: string
   renewCache?: boolean
-}): Promise<Record<string, VideoRequest>> {
+  neverThrow?: boolean
+}): Promise<VideoRequest[]> {
 
-  let credentials: Credentials = adminCredentials
+  try {
+    const { credentials } = await getCredentials(apiKey)
 
-  if (options?.apiKey) {
-    try {
-      credentials = { accessToken: options.apiKey }
-      const { name: username } = await whoAmI({ credentials })
-      if (!username) {
-        throw new Error(`couldn't get the username`)
-      }
-    } catch (err) {
-      console.error(err)
-      return {}
-    }
-  }
+    let videos: Record<string, VideoRequest> = {}
 
-  let videos: Record<string, VideoRequest> = {}
+    const repo = `datasets/${channel.datasetUser}/${channel.datasetName}`
 
-  const repo = `datasets/${options.channel.datasetUser}/${options.channel.datasetName}`
+    // console.log(`scanning ${repo}`)
 
-  console.log(`scanning ${repo}`)
+    for await (const file of listFiles({
+      repo,
+      // recursive: true,
+      // expand: true,
+      credentials,
+      requestInit: renewCache
+        ? { cache: "no-cache" }
+        : undefined
+    })) {
 
-  for await (const file of listFiles({
-    repo,
-    // recursive: true,
-    // expand: true,
-    credentials,
-    requestInit: {
-      // cache invalidation should be called right after adding a new video
-      cache: options?.renewCache ? "no-cache" : "default",
-      next: {
-        revalidate: 10, // otherwise we only update very 10 seconds by default
-        // tags: [] // tags used for cache invalidation (ie. this is added to the cache key)
-      }
-    }
-  })) {
-
-    // TODO we should add some safety mechanisms here:
-    // skip lists of files that are too long
-    // skip files that are too big
-    // skip files with file.security.safe !== true
-
-     console.log("file.path:", file.path)
-    /// { type, oid, size, path }
-    if (file.path === "README.md") {
-      console.log("found the README")
-      // TODO: read this readme
-    } else if (file.path.startsWith("prompt_") && file.path.endsWith(".txt")) {
-      console.log("yes!!")
-      const fileWithoutSuffix = file.path.split(".txt").shift() || ""
-      const words = fileWithoutSuffix.split("_")
-      console.log("debug:", { path: file.path, fileWithoutSuffix, words })
-      if (words.length !== 3) {
-        console.log("found an invalid prompt file format: " + file.path)
-        continue
-      }
-      const [_prefix, date, id] = words
-      console.log("found a prompt:", file.path)
+      // TODO we should add some safety mechanisms here:
+      // skip lists of files that are too long
+      // skip files that are too big
+      // skip files with file.security.safe !== true
+
+      // console.log("file.path:", file.path)
+      /// { type, oid, size, path }
+      if (file.path === "README.md") {
+        // console.log("found the README")
+        // TODO: read this readme
+      } else if (file.path.startsWith("prompt_") && file.path.endsWith(".md")) {
+        
+        const id = parsePromptFileName(file.path)
+
+        if (!id) { continue }
 
-      try {
-        const response = await downloadFile({
+        const rawMarkdown = await downloadFileAsText({
           repo,
           path: file.path,
-          credentials
+          apiKey,
+          renewCache,
+          neverThrow: true,
         })
-        const rawMarkdown = await response?.text()
-  
-        const parsedDatasetReadme = parseDatasetReadme(rawMarkdown)
-        console.log("prompt parsed markdown:", parsedDatasetReadme)
-      } catch (err) {
-        console.log("failed to parse the prompt file")
-        continue
-      }
-      const video: VideoRequest = {
-        id,
-        label: "",
-        description: "",
-        prompt: "",
-        thumbnailUrl: "",
-
-        updatedAt: file.lastCommit?.date || "",
-        tags: [], // read them from the file?
-        channel: options.channel
+
+        if (!rawMarkdown) {
+          // console.log(`markdown file is empty, skipping`)
+          continue
+        }
+
+        const { title, description, tags, prompt } = parseDatasetPrompt(rawMarkdown)
+
+        if (!title || !description || !prompt) {
+          // console.log("dataset prompt is incomplete or unparseable")
+          continue
+        }
+        // console.log("prompt parsed markdown:", { title, description, tags })
+
+        const video: VideoRequest = {
+          id,
+          label: title,
+          description,
+          prompt,
+          thumbnailUrl: "",
+    
+          updatedAt: file.lastCommit?.date || "",
+          tags, // read them from the file?
+          channel,
+        }
+
+        videos[id] = video
+
+      } else if (file.path.endsWith(".mp4")) {
+        // console.log("found a video:", file.path)
       }
+    }
 
-      videos[id] = video
-    } else if (file.path.endsWith(".mp4")) {
-      console.log("found a video:", file.path)
+    return Object.values(videos)
+  } catch (err) {
+    if (neverThrow) {
+      console.error(`getVideoRequestsFromChannel():`, err)
+      return []
+    } else {
+      throw err
     }
   }
-
-  return videos
 }

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

@@ -0,0 +1,46 @@
+"use server"
+
+import { VideoInfo } from "@/types"
+
+import { getIndex } from "./getIndex"
+
+const HARD_LIMIT = 100
+
+// this just return ALL videos on the platform
+export async function getVideos({
+  tag = "",
+  sortBy = "date",
+  maxVideos = HARD_LIMIT,
+}: {
+  tag?: string
+  sortBy?: "random" | "date",
+  maxVideos?: number
+}): Promise<VideoInfo[]> {
+  // the index is gonna grow more and more,
+  // but in the future we will use some DB eg. Prisma or sqlite
+  const published = await getIndex({
+    status: "published",
+    renewCache: true
+  })
+
+
+  let videos = Object.values(published)
+  
+  // filter videos by tag, or else we return everything
+  const requestedTag = tag.toLowerCase().trim()
+  if (requestedTag) {
+    videos = videos
+      .filter(v =>
+        v.tags.map(t => t.toLowerCase().trim()).includes(requestedTag)
+      )
+  }
+
+  if (sortBy === "date") {
+    videos.sort(((a, b) => a.updatedAt.localeCompare(b.updatedAt)))
+  } else {
+    videos.sort(() => Math.random() - 0.5)
+  }
+
+  // we enforce a max limit of HARD_LIMIT (eg. 100)
+  return videos.slice(0, Math.min(HARD_LIMIT, maxVideos))
+}

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

@@ -1,16 +1,14 @@
 "use server"
 
 import { Blob } from "buffer"
-import { v4 as uuidv4 } from "uuid"
 
 import { Credentials, uploadFile, whoAmI } from "@/huggingface/hub/src"
 import { ChannelInfo, VideoInfo, VideoRequest } from "@/types"
+import { formatPromptFileName } from "../utils/formatPromptFileName"
 
 /**
  * Save the video request to the user's own dataset
- * 
- * @param param0
- * @returns 
+ *
  */
 export async function uploadVideoRequestToDataset({
   channel,
@@ -41,16 +39,7 @@ export async function uploadVideoRequestToDataset({
     throw new Error(`couldn't get the username`)
   }
 
-  const date = new Date()
-  const dateSlug = date.toISOString().replace(/[^0-9]/gi, '').slice(0, 12);
-
-  // there is a bug in the [^] maybe, because all characters are removed
-  // const nameSlug = title.replaceAll(/\S+/gi, "-").replaceAll(/[^A-Za-z0-9\-_]/gi, "")
-  // const fileName = `prompt-${dateSlug}-${nameSlug}.txt`
-
-  const videoId = uuidv4()
-
-  const fileName = `prompt_${dateSlug}_${videoId}.txt`
+  const { id, fileName } = formatPromptFileName()
 
   // Convert string to a Buffer
   const blob = new Blob([`
@@ -62,7 +51,7 @@ ${description}
 
 # Tags
 
-${tags.map(tag => `- ${tag}\n`)}
+${tags.map(tag => `- ${tag}`).join("\n")}
 
 # Prompt
 ${prompt}
@@ -82,18 +71,18 @@ ${prompt}
   // TODO: now we ping the robot to come read our prompt
 
   const newVideoRequest: VideoRequest = {
-    id: videoId,
+    id,
     label: title,
     description,
     prompt,
     thumbnailUrl: "",
     updatedAt: new Date().toISOString(),
-    tags: [...channel.tags],
+    tags,
     channel,
   }
 
   const newVideo: VideoInfo = {
-    id: videoId,
+    id,
     status: "submitted",
     label: title,
     description,
@@ -103,7 +92,7 @@ ${prompt}
     numberOfViews: 0,
     numberOfLikes: 0,
     updatedAt: new Date().toISOString(),
-    tags: [...channel.tags],
+    tags,
     channel,
   }
 

src/app/server/actions/submitVideoRequest.ts

@@ -33,15 +33,6 @@ export async function submitVideoRequest({
     tags
   })
 
-  try {
-    await updateQueue({ apiKey, channel })
-    
-    return {
-      ...videoInfo,
-      status: "queued"
-    }
-  } catch (err) {
-    console.error(`failed to update the queue, but this can be done later :)`)
-    return videoInfo
-  }
+
+  return videoInfo
 }

src/app/server/actions/utils/formatPromptFileName.ts

@@ -0,0 +1,14 @@
+
+import { v4 as uuidv4 } from "uuid"
+
+export function formatPromptFileName(id?: string): { id: string; fileName: string } {
+
+  const videoId = typeof id === "string" ? id : uuidv4()
+  
+  const fileName = `prompt_${videoId}.md`
+
+  return {
+    id: videoId,
+    fileName
+  }
+}

src/app/server/actions/utils/parseDatasetPrompt.ts

@@ -3,17 +3,19 @@ import { ParsedDatasetPrompt } from "@/types"
 
 export function parseDatasetPrompt(markdown: string = ""): ParsedDatasetPrompt {
   try {
-    const { title, description, prompt } = parseMarkdown(markdown)
+    const { title, description, tags, prompt } = parseMarkdown(markdown)
 
     return {
       title: typeof title === "string" && title ? title : "",
       description: typeof description === "string" && description ? description : "",
+      tags: tags && typeof tags === "string" ? tags.split("-").map(x => x.trim()).filter(x => x) : [], 
       prompt: typeof prompt === "string" && prompt ? prompt : "",
     }
   } catch (err) {
     return {
       title: "",
       description:  "",
+      tags: [],
       prompt:  "",
     }
   }
@@ -24,9 +26,14 @@ export function parseDatasetPrompt(markdown: string = ""): ParsedDatasetPrompt {
  * @param markdown A Markdown string containing Description and Prompt sections
  * @returns A JSON object with { "description": "...", "prompt": "..." }
  */
-function parseMarkdown(markdown: string): ParsedDatasetPrompt {
+function parseMarkdown(markdown: string): {
+  title: string
+  description: string
+  tags: string
+  prompt: string
+} {
   // Regular expression to find markdown sections based on the provided structure
-  const sectionRegex = /^## (.+?)\n\n([\s\S]+?)(?=\n## |$)/gm;
+  const sectionRegex = /^#+ (.+?)\n+([\s\S]+?)(?=\n+? |$)/gm;
 
   let match;
   const sections: { [key: string]: string } = {};
@@ -41,7 +48,7 @@ function parseMarkdown(markdown: string): ParsedDatasetPrompt {
   const result = {
     title: sections['title'] || '',
     description: sections['description'] || '',
-    // categories: sections['categories'] || '',
+    tags: sections['tags'] || '',
     prompt: sections['prompt'] || '',
   };
 

src/app/server/actions/utils/parseDatasetReadme.ts

@@ -7,8 +7,6 @@ export function parseDatasetReadme(markdown: string = ""): ParsedDatasetReadme {
   try {
     const { metadata, content } = metadataParser(markdown) as ParsedMetadataAndContent
 
-    // console.log("DEBUG README:", { metadata, content })
-    
     const { description, prompt } = parseMarkdown(content)
 
     return {

src/app/server/actions/utils/parsePromptFileName.ts

@@ -0,0 +1,3 @@
+export function parsePromptFileName(filePath: string): string {
+  return (filePath || "").replaceAll("prompt_", "").replaceAll(".md", "")
+}

src/app/state/useStore.ts

@@ -2,12 +2,18 @@
 
 import { create } from "zustand"
 
-import { ChannelInfo, VideoInfo, InterfaceDisplayMode, InterfaceView } from "@/types"
+import { ChannelInfo, VideoInfo, InterfaceDisplayMode, InterfaceView, InterfaceMenuMode, InterfaceHeaderMode } from "@/types"
 
 export const useStore = create<{
   displayMode: InterfaceDisplayMode
   setDisplayMode: (displayMode: InterfaceDisplayMode) => void
 
+  headerMode: InterfaceHeaderMode
+  setHeaderMode: (headerMode: InterfaceHeaderMode) => void
+
+  menuMode: InterfaceMenuMode
+  setMenuMode: (menuMode: InterfaceMenuMode) => void
+
   view: InterfaceView
   setView: (view?: InterfaceView) => void
 
@@ -40,6 +46,16 @@ export const useStore = create<{
     set({ view: view || "home" })
   },
 
+  headerMode: "normal",
+  setHeaderMode: (headerMode: InterfaceHeaderMode) => {
+    set({ headerMode })
+  },
+
+  menuMode: "normal_icon",
+  setMenuMode: (menuMode: InterfaceMenuMode) => {
+    set({ menuMode })
+  },
+
   currentChannel: undefined,
   setCurrentChannel: (currentChannel?: ChannelInfo) => {
     // TODO: download videos for this new channel

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

@@ -1,10 +1,17 @@
-import { useEffect } from "react"
+"use client"
+
+import { useEffect, useTransition } from "react"
 
 import { useStore } from "@/app/state/useStore"
 import { cn } from "@/lib/utils"
 import { VideoInfo } from "@/types"
+import { getVideos } from "@/app/server/actions/ai-tube-hf/getVideos"
+import { VideoList } from "@/app/interface/video-list"
 
 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)
@@ -17,38 +24,30 @@ export function HomeView() {
   const setCurrentVideo = useStore(s => s.setCurrentVideo)
 
   useEffect(() => {
+    startTransition(async () => {
+      const videos = await getVideos({
+        sortBy: "date",
+        maxVideos: 25
+      })
 
-    // we use fake data for now
-    // this will be pulled from the Hugging Face API
-    const newCategoryVideos: VideoInfo[] = []
-    setCurrentVideos(newCategoryVideos)
+      setCurrentVideos(videos)
+    })
   }, [currentTag])
 
+  const handleSelect = (video: VideoInfo) => {
+    setCurrentVideo(video)
+    setView("public_video")
+  }
+
   return (
     <div className={cn(
-      `grid grid-cols-4`
+     //  `grid grid-cols-4`
     )}>
-      {currentVideos.map((video) => (
-        <div
-          key={video.id}
-          className={cn(
-            `flex flex-col`,
-            `w-[300px] h-[400px]`
-          )}>
-            <div
-              className={cn(
-
-              )}
-            >
-              <img src="" />
-            </div>
-            <div className={cn(
-
-            )}>
-              <h3>{video.label}</h3>
-            </div>
-          </div>
-      ))}
+      <VideoList
+        videos={currentVideos}
+        layout="grid"
+        onSelect={handleSelect}
+      />
     </div>
   )
 }

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

@@ -1,3 +1,5 @@
+"use client"
+
 import { useEffect, useTransition } from "react"
 
 import { useStore } from "@/app/state/useStore"

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

@@ -1,3 +1,5 @@
+"use client"
+
 import { useEffect, useState, useTransition } from "react"
 
 import { useStore } from "@/app/state/useStore"
@@ -29,9 +31,7 @@ export function PublicChannelsView() {
   }, [isLoaded])
 
   return (
-    <div className={cn(
-      `flex flex-col`
-    )}>
+    <div className={cn(`flex flex-col`)}>
       <ChannelList
         channels={currentChannels}
       />

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

@@ -1,28 +1,91 @@
+"use client"
+
 import { useEffect } from "react"
+import { RiCheckboxCircleFill } from "react-icons/ri"
 
 import { useStore } from "@/app/state/useStore"
 import { cn } from "@/lib/utils"
+import { VideoPlayer } from "@/app/interface/video-player"
+
 
 export function PublicVideoView() {
   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 currentVideos = useStore(s => s.currentVideos)
-  const currentVideo = useStore(s => s.currentVideo)
-  const setCurrentVideo = useStore(s => s.setCurrentVideo)
-
-  useEffect(() => {
-
-  }, [currentTag])
+  const video = useStore(s => s.currentVideo)
+  const setMenuMode = useStore(s => s.setMenuMode)
+  const setHeaderMode = useStore(s => s.setHeaderMode)
 
+  if (!video) { return null }
+  
   return (
     <div className={cn(
-      `grid grid-cols-4`
+      `w-full`,
+      `flex flex-row`
     )}>
-      {null}
+      <div className={cn(
+        `flex-grow`,
+        `flex flex-col`,
+      )}>
+        {/** VIDEO PLAYER - HORIZONTAL */}
+        <VideoPlayer
+          video={video}
+          className="mb-4"
+        />
+
+        {/** VIDEO TITLE - HORIZONTAL */}
+        <div className={cn(
+          `text-xl text-zinc-100 font-medium mb-0 line-clamp-2`,
+          `mb-2`
+        )}>
+          {video?.label}
+        </div>
+        
+        {/** VIDEO TOOLBAR - HORIZONTAL */}
+        <div className={cn(
+          `flex flex-row`,
+          `items-center`
+        )}>
+          {/** CHANNEL LOGO - VERTICAL */}
+          <div className={cn(
+            `flex flex-col`,
+            `mr-3`
+          )}>
+            <div className="flex w-10 rounded-full overflow-hidden">
+              <img
+                src="huggingface-avatar.jpeg"
+              />
+            </div>
+          </div>
+
+          {/** CHANNEL INFO - VERTICAL */}
+          <div className={cn(
+            `flex flex-col`
+            )}>
+            <div className={cn(
+              `flex flex-row items-center`,
+              `text-zinc-100 text-base font-medium space-x-1`,
+              )}>
+              <div>{video.channel.label}</div>
+              <div className="text-sm text-neutral-400"><RiCheckboxCircleFill className="" /></div>
+            </div>
+            <div className={cn(
+              `flex flex-row items-center`,
+              `text-neutral-400 text-xs font-normal space-x-1`,
+              )}>
+              <div>0 followers</div>
+              <div></div>
+            </div>
+          </div>
+
+        </div>
+
+      </div>
+      <div className={cn(
+        `sm:w-56 md:w-96`,
+        `hidden sm:flex flex-col`,
+        `px-4`
+      )}>
+        {/*[ TO BE CONTINUED ]*/}
+      </div>
     </div>
   )
-}
+}

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

@@ -18,7 +18,7 @@ export function UserAccountView() {
     <div className={cn(
       `flex flex-col space-y-4`
     )}>
-      <div className="flex flex-col space-y-2">
+      <div className="flex flex-col space-y-2 max-w-4xl">
         <div className="flex flex-row space-x-2 items-center">
           <label className="flex w-64">Hugging Face token:</label>
           <Input
@@ -37,7 +37,7 @@ export function UserAccountView() {
       </div>
       {huggingfaceApiKey
         ? <p>You are ready to go!</p>
-        : <p>Please setup your accountabove  to get started</p>}
+        : <p>Please setup your account (see above) to get started</p>}
     </div>
   )
 }

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

@@ -1,9 +1,10 @@
+"use client"
+
 import { useEffect, useState, useTransition } from "react"
 
 import { useStore } from "@/app/state/useStore"
 import { cn } from "@/lib/utils"
 import { VideoInfo } from "@/types"
-import { VideoList } from "@/app/interface/video-list"
 
 import { useLocalStorage } from "usehooks-ts"
 import { localStorageKeys } from "@/app/state/locaStorageKeys"
@@ -12,6 +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"
 
 export function UserChannelView() {
   const [_isPending, startTransition] = useTransition()
@@ -20,8 +23,13 @@ export function UserChannelView() {
     defaultSettings.huggingfaceApiKey
   )
   const [titleDraft, setTitleDraft] = useState("")
+  const [descriptionDraft, setDescriptionDraft] = useState("")
+  const [tagsDraft, setTagsDraft] = useState("")
   const [promptDraft, setPromptDraft] = useState("")
   
+  // we do not include the tags in the list of required fields
+  const missingFields = !titleDraft || !descriptionDraft || !promptDraft
+
   const [isSubmitting, setIsSubmitting] = useState(false)
 
   const currentChannel = useStore(s => s.currentChannel)
@@ -29,22 +37,40 @@ export function UserChannelView() {
   const setCurrentVideos = useStore(s => s.setCurrentVideos)
   const setCurrentVideo = useStore(s => s.setCurrentVideo)
 
+  console.log("CURRENT VIDEOS:", currentVideos)
   useEffect(() => {
     if (!currentChannel) {
       return
     }
 
     startTransition(async () => {
-      /*
-      const videos = await getChannelVideos({
+
+      const videoRequests = await getVideoRequestsFromChannel({
         channel: currentChannel,
         apiKey: huggingfaceApiKey,
+        renewCache: true
       })
-      console.log("videos:", videos)
-      */
+
+      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)
     })
 
-    setCurrentVideos([])
   }, [huggingfaceApiKey, currentChannel, currentChannel?.id])
 
   const handleSubmit = () => {
@@ -64,17 +90,18 @@ export function UserChannelView() {
           channel: currentChannel,
           apiKey: huggingfaceApiKey,
           title: titleDraft,
-          description: "",
+          description: descriptionDraft,
           prompt: promptDraft,
-          tags: [],
+          tags: tagsDraft.trim().split(",").map(x => x.trim()).filter(x => x),
         })
 
         // in case of success we update the frontend immediately
         // with our draft video
         setCurrentVideos([newVideo, ...currentVideos])
         setPromptDraft("")
+        setDescriptionDraft("")
+        setTagsDraft("")
         setTitleDraft("")
-
         // also renew the cache on Next's side
         /*
         await getChannelVideos({
@@ -91,67 +118,113 @@ export function UserChannelView() {
     })
   }
 
+  const handleDelete = (video: VideoInfo) => {
+    // step 1: delete it from the dataset
+    
+
+    // step 2: if the video has already been generated,
+    // we ask the robot to delete it from the index
+    
+  }
+
   return (
     <div className={cn(
       `flex flex-col space-y-8`
     )}>
-      <h2 className="text-3xl font-bold">Robot channel settings:</h2>
-      <p>TODO</p>
-
-      <h2 className="text-3xl font-bold">Schedule a new prompt:</h2>
-
-      <div className="flex flex-row space-x-2 items-start">
-        <label className="flex w-24">Title:</label>
-        <div className="flex flex-col space-y-2 flex-grow">
-          <Input
-            placeholder="Title"
-            className="font-mono"
-            onChange={(x) => {
-              setTitleDraft(x.target.value)
-            }}
-            value={titleDraft}
-          />
-          <p className="text-neutral-100/70">
-            Title of the video, keep it short.
-          </p>
+      <div className="flex flex-col space-y-8 max-w-4xl">
+        <h2 className="text-3xl font-bold">Robot channel settings:</h2>
+        <p>TODO</p>
+
+        <h2 className="text-3xl font-bold">Create a new AI video:</h2>
+
+        <div className="flex flex-row space-x-2 items-start">
+          <label className="flex w-24 pt-1">Title (required):</label>
+          <div className="flex flex-col space-y-2 flex-grow">
+            <Input
+              placeholder="Title"
+              className="font-mono"
+              onChange={(x) => {
+                setTitleDraft(x.target.value)
+              }}
+              value={titleDraft}
+            />
+          </div>
         </div>
-      </div>
 
-      <div className="flex flex-row space-x-2 items-start">
-        <label className="flex w-24">Prompt:</label>
-        <div className="flex flex-col space-y-2 flex-grow">
-          <Textarea
-            placeholder="Prompt"
-            className="font-mono"
-            rows={6}
-            onChange={(x) => {
-              setPromptDraft(x.target.value)
-            }}
-            value={promptDraft}
-          />
-          <p className="text-neutral-100/70">
-            Describe your video in natural language.
-          </p>
+
+        <div className="flex flex-row space-x-2 items-start">
+          <label className="flex w-24 pt-1">Description (required):</label>
+          <div className="flex flex-col space-y-2 flex-grow">
+            <Textarea
+              placeholder="Description"
+              className="font-mono"
+              rows={2}
+              onChange={(x) => {
+                setDescriptionDraft(x.target.value)
+              }}
+              value={descriptionDraft}
+            />
+            <p className="text-neutral-100/70">
+              Short description (visible to humans, and used as context by the AI).
+            </p>
+          </div>
+        </div>
+
+        <div className="flex flex-row space-x-2 items-start">
+          <label className="flex w-24 pt-1">Prompt (required):</label>
+          <div className="flex flex-col space-y-2 flex-grow">
+            <Textarea
+              placeholder="Prompt"
+              className="font-mono"
+              rows={6}
+              onChange={(x) => {
+                setPromptDraft(x.target.value)
+              }}
+              value={promptDraft}
+            />
+            <p className="text-neutral-100/70">
+              Describe your video content, in a synthetic way.
+            </p>
+          </div>
+        </div>
+
+        <div className="flex flex-row space-x-2 items-start">
+          <label className="flex w-24 pt-1">Tags (optional):</label>
+          <div className="flex flex-col space-y-2 flex-grow">
+            <Input
+              placeholder="Tags"
+              className="font-mono"
+              onChange={(x) => {
+                setTagsDraft(x.target.value)
+              }}
+              value={tagsDraft}
+            />
+            <p className="text-neutral-100/70">
+            Comma-separated tags (eg. &quot;Education, Sports&quot;)
+            </p>
+          </div>
+        </div>
+
+        <div className="flex flex-row space-x-2 items-center justify-between">
+          <Button
+            onClick={handleSubmit}
+            disabled={isSubmitting}
+            className={cn(
+              isSubmitting || missingFields ? `opacity-50` : `opacity-100`
+            )}
+          >
+            {missingFields ? 'Please fill the form' : isSubmitting ? 'Adding to the queue..' : 'Add prompt to the queue'}
+          </Button>
+          <p>Note: It can take a few hours for the video to be generated.</p>
         </div>
-      </div>
 
-      <div className="flex flex-row space-x-2 items-center justify-between">
-        <Button
-          onClick={handleSubmit}
-          disabled={isSubmitting}
-          className={cn(
-            isSubmitting ? `opacity-50` : `opacity-100`
-          )}
-        >
-          {isSubmitting ? 'Adding to the queue..' : 'Add prompt to the queue'}
-        </Button>
-        <p>Note: It can take a few hours for the video to be generated.</p>
       </div>
 
       <h2 className="text-3xl font-bold">Current video prompts:</h2>
 
-      <VideoList
+      <PendingVideoList
         videos={currentVideos}
+        onDelete={handleDelete}
       />
     </div>
   )

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

@@ -9,14 +9,14 @@ import { getChannels } from "@/app/server/actions/ai-tube-hf/getChannels"
 import { ChannelList } from "@/app/interface/channel-list"
 import { localStorageKeys } from "@/app/state/locaStorageKeys"
 import { defaultSettings } from "@/app/state/defaultSettings"
+import { Input } from "@/components/ui/input"
 
 export function UserChannelsView() {
   const [_isPending, startTransition] = useTransition()
-  const [huggingfaceApiKey,] = useLocalStorage<string>(
+  const [huggingfaceApiKey, setHuggingfaceApiKey] = useLocalStorage<string>(
     localStorageKeys.huggingfaceApiKey,
     defaultSettings.huggingfaceApiKey
   )
-
   const setView = useStore(s => s.setView)
   const setCurrentChannel = useStore(s => s.setCurrentChannel)
 
@@ -41,17 +41,41 @@ export function UserChannelsView() {
   }, [isLoaded, huggingfaceApiKey])
 
   return (
-    <div className={cn(
-      `flex flex-col space-y-4`
-    )}>
+    <div className={cn(`flex flex-col space-y-4`)}>
+      <h2 className="text-3xl font-bold">Want your own channels? Setup your account!</h2>
+        
+      <div className="flex flex-col space-y-4 max-w-2xl">
+        <div className="flex flex-row space-x-2 items-center">
+          <label className="flex w-64">Hugging Face token:</label>
+          <Input
+            placeholder="Hugging Face token (with WRITE access)"
+            type="password"
+            className="font-mono"
+            onChange={(x) => {
+              setHuggingfaceApiKey(x.target.value)
+            }}
+            value={huggingfaceApiKey}
+          />
+        </div>
+        <p className="text-neutral-100/70">
+          Note: your Hugging Face token must be a <span className="font-bold font-mono text-yellow-300">WRITE</span> access token.
+        </p>
+        {huggingfaceApiKey
+        ? <p className="">Nice, looks like you are ready to go!</p>
+        : <p>Please setup your account (see above) to get started</p>}
+      </div>
+
       {huggingfaceApiKey ? 
-        <ChannelList
+      <div className="flex flex-col space-y-4">
+        <h2 className="text-3xl font-bold">Your custom channels:</h2>
+        {currentChannels?.length ? <ChannelList
           channels={currentChannels}
           onSelect={(channel) => {
             setCurrentChannel(channel)
             setView("user_channel")
           }}
-        /> : <p>Please setup your account to get started creating robot channels!</p>}
+        /> : <p>Ask <span className="font-mono">@jbilcke-hf</span> for help to create a channel!</p>}
+      </div> : null}
     </div>
   )
 }

src/components/ui/table.tsx

@@ -6,7 +6,7 @@ const Table = React.forwardRef<
   HTMLTableElement,
   React.HTMLAttributes<HTMLTableElement>
 >(({ className, ...props }, ref) => (
-  <div className="w-full overflow-auto">
+  <div className="relative w-full overflow-auto">
     <table
       ref={ref}
       className={cn("w-full caption-bottom text-sm", className)}
@@ -42,7 +42,10 @@ const TableFooter = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <tfoot
     ref={ref}
-    className={cn("bg-neutral-900 font-medium text-neutral-50 dark:bg-neutral-50 dark:text-neutral-900", className)}
+    className={cn(
+      "border-t bg-stone-100/50 font-medium [&>tr]:last:border-b-0 dark:bg-stone-800/50",
+      className
+    )}
     {...props}
   />
 ))
@@ -55,7 +58,7 @@ const TableRow = React.forwardRef<
   <tr
     ref={ref}
     className={cn(
-      "border-b transition-colors hover:bg-neutral-100/50 data-[state=selected]:bg-neutral-100 dark:hover:bg-neutral-800/50 dark:data-[state=selected]:bg-neutral-800",
+      "border-b transition-colors hover:bg-stone-100/50 data-[state=selected]:bg-stone-100 dark:hover:bg-stone-800/50 dark:data-[state=selected]:bg-stone-800",
       className
     )}
     {...props}
@@ -70,7 +73,7 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      "h-12 px-4 text-left align-middle font-medium text-neutral-500 [&:has([role=checkbox])]:pr-0 dark:text-neutral-400",
+      "h-12 px-4 text-left align-middle font-medium text-stone-500 [&:has([role=checkbox])]:pr-0 dark:text-stone-400",
       className
     )}
     {...props}
@@ -96,7 +99,7 @@ const TableCaption = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <caption
     ref={ref}
-    className={cn("mt-4 text-sm text-neutral-500 dark:text-neutral-400", className)}
+    className={cn("mt-4 text-sm text-stone-500 dark:text-stone-400", className)}
     {...props}
   />
 ))

src/huggingface/hub/src/lib/list-datasets.ts

@@ -48,6 +48,7 @@ export async function* listDatasets(params?: {
 				accept: "application/json",
 				...(params?.credentials ? { Authorization: `Bearer ${params.credentials.accessToken}` } : undefined),
 			},
+			...params?.requestInit,
 		});
 
 		if (!res.ok) {

src/lib/fonts.ts

@@ -1,29 +0,0 @@
-import { Ubuntu } from "next/font/google"
-import localFont from "next/font/local"
-
-export const actionman = localFont({
-  src: "../fonts/Action-Man/Action-Man.woff2",
-  variable: "--font-action-man"
-})
-
-// https://nextjs.org/docs/pages/building-your-application/optimizing/fonts 
-// If loading a variable font, you don"t need to specify the font weight
-export const fonts = {
-  actionman,
-  // ubuntu: Ubuntu
-}
-
-// https://nextjs.org/docs/pages/building-your-application/optimizing/fonts 
-// If loading a variable font, you don"t need to specify the font weight
-export const fontList = Object.keys(fonts)
-
-export type FontName = keyof typeof fonts
-
-export const defaultFont = "actionman" as FontName
-
-export const classNames = Object.values(fonts).map(font => font.className)
-
-export const className = classNames.join(" ")
-
-export type FontClass =
-  | "font-actionman"

src/lib/formatDuration.ts

@@ -0,0 +1,12 @@
+
+import {  intervalToDuration } from 'date-fns'
+
+export function formatDuration(seconds: number) {
+  const duration = intervalToDuration({ start: 0, end: seconds * 1000 })
+
+  const zeroPad = (num: any) => String(num).padStart(2, '0')
+  
+  const formatted = `${zeroPad(duration.minutes)}:${zeroPad(duration.seconds)}`
+
+  return formatted
+}

src/lib/formatTimeAgo.ts

@@ -0,0 +1,5 @@
+import { formatDistance } from 'date-fns'
+
+export function formatTimeAgo(time: string) {
+  return formatDistance(new Date(time), new Date(), { addSuffix: true })
+}

src/types.ts

@@ -275,6 +275,7 @@ export type VideoRequest = {
   channel: ChannelInfo
 }
 
+
 export type VideoInfo = {
   /**
    * UUID (v4)
@@ -345,6 +346,16 @@ export type InterfaceDisplayMode =
   | "desktop"
   | "tv"
 
+export type InterfaceHeaderMode =
+  | "normal"
+  | "compact"
+
+export type InterfaceMenuMode =
+  | "slider_hidden"
+  | "slider_text"
+  | "normal_icon"
+  | "normal_text"
+
 export type InterfaceView =
   | "home"
   | "user_channels"
@@ -380,6 +391,7 @@ export type ParsedMetadataAndContent = {
 export type ParsedDatasetPrompt = {
   title: string
   description: string
+  tags: string[]
   prompt: string
 }
 

tailwind.config.js

@@ -17,8 +17,8 @@ module.exports = {
       },
     },
     extend: {
-      fontFamily: {
-        actionman: ['var(--font-action-man)'],
+      backgroundImage: {
+        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
       },
       fontSize: {
         "7xs": "5px",
@@ -27,7 +27,7 @@ module.exports = {
         "5xs": "8px",
         "4xs": "9px",
         "3xs": "10px",
-        "2xs": "11px"
+        "2xs": "11px",
       },
       keyframes: {
         "accordion-down": {