working on the route system

src/app/channel/page.tsx

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

src/app/channels/page.tsx

@@ -0,0 +1,11 @@
+import { useEffect, useState, useTransition } from "react"
+import Head from "next/head"
+import Script from "next/script"
+import { Metadata, ResolvingMetadata } from "next"
+
+
+import { Main } from "../main"
+
+export default async function ChannelsPage() {
+  return (<Main />)
+}

src/app/globals.css

@@ -3,16 +3,16 @@
 @tailwind utilities;
 
 :root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
+  --foreground-rgb: 255, 255, 255;
+  --background-start-rgb: 10, 10, 10;
+  --background-end-rgb: 10, 10, 10;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
     --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
+    --background-start-rgb: 10, 10, 10;
+    --background-end-rgb: 10, 10, 10;
   }
 }
 
@@ -25,15 +25,3 @@ body {
     )
     rgb(var(--background-start-rgb));
 }
-
-
-/* this is the trick to bypass the style={{}} attribute when printing */
-@media print {
-  .comic-page[style] { width: 100vw !important; }
-}
-
-
-.render-to-image .comic-panel {
-  height: auto !important;
-  /* max-width: fit-content !important; */
-}

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

@@ -8,6 +8,7 @@ import { useStore } from "@/app/state/useStore"
 import { cn } from "@/lib/utils"
 import { MenuItem } from "./menu-item"
 import { showBetaFeatures } from "@/app/config"
+import Link from "next/link"
 
 
 export function LeftMenu() {
@@ -26,20 +27,24 @@ export function LeftMenu() {
       <div className={cn(
         `flex flex-col w-full`,
       )}>
-        <MenuItem
-          icon={<RiHome8Line className="h-6 w-6" />}
-          selected={view === "home"}
-          onClick={() => setView("home")}
-          >
-          Discover
-        </MenuItem>
-        <MenuItem
-          icon={<GrChannel className="h-5 w-5" />}
-          selected={view === "public_channels"}
-          onClick={() => setView("public_channels")}
-          >
-          Channels
-        </MenuItem>
+        <Link href="/">
+          <MenuItem
+            icon={<RiHome8Line className="h-6 w-6" />}
+            selected={view === "home"}
+            // </Link>onClick={() => setView("home")}
+            >
+            Discover
+          </MenuItem>
+        </Link>
+        <Link href="/channels">
+          <MenuItem
+            icon={<GrChannel className="h-5 w-5" />}
+            selected={view === "public_channels"}
+            // onClick={() => setView("public_channels")}
+            >
+            Channels
+          </MenuItem>
+        </Link>
       </div>
       <div className={cn(
         `flex flex-col w-full`,

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

@@ -1,3 +1,5 @@
+import { useEffect, useTransition } from 'react'
+
 import { Pathway_Gothic_One } from 'next/font/google'
 import { PiPopcornBold } from "react-icons/pi"
 
@@ -11,9 +13,10 @@ const pathway = Pathway_Gothic_One({
 import { videoCategoriesWithLabels } from "@/app/state/categories"
 import { useStore } from "@/app/state/useStore"
 import { cn } from "@/lib/utils"
-import { useEffect } from 'react'
+import { getTags } from '@/app/server/actions/ai-tube-hf/getTags'
 
 export function TopHeader() {
+  const [_pending, startTransition] = useTransition()
   const view = useStore(s => s.view)
   const setView = useStore(s => s.setView)
   const displayMode = useStore(s => s.displayMode)
@@ -32,6 +35,9 @@ export function TopHeader() {
   const currentVideos = useStore(s => s.currentVideos)
   const currentVideo = useStore(s => s.currentVideo)
 
+  const currentTags = useStore(s => s.currentTags)
+  const setCurrentTags = useStore(s => s.setCurrentTags)
+
   const isNormalSize = headerMode === "normal"
 
 
@@ -44,6 +50,13 @@ export function TopHeader() {
       setMenuMode("normal_icon")
     }
   }, [view])
+
+  useEffect(() => {
+    startTransition(async () => {
+      const tags = await getTags()
+      setCurrentTags(tags)
+    })
+  }, [])
   
   return (
     <div className={cn(
@@ -109,27 +122,27 @@ export function TopHeader() {
         `text-[13px] font-semibold`,
         `mb-4`
       )}>
-        {Object.entries(videoCategoriesWithLabels)
-          .map(([ key, label ]) => (
+        {currentTags.slice(0, 9).map(tag => (
           <div
-            key={key}
+            key={tag}
             className={cn(
               `flex flex-col items-center justify-center`,
               `rounded-lg px-3 py-1 h-8`,
               `cursor-pointer`,
               `transition-all duration-200 ease-in-out`,
-              currentTag === key
+              currentTag === tag
                 ? `bg-neutral-100 text-neutral-800`
                 : `bg-neutral-800 text-neutral-50/90 hover:bg-neutral-700 hover:text-neutral-50/90`,
               // `text-clip`
             )}
             onClick={() => {
-              setCurrentTag(key)
+              setCurrentTag(currentTag === tag ? undefined : tag)
             }}
           >
             <span className={cn(
-              `text-center`
-            )}>{label}</span>
+              `text-center`,
+              `capitalize`,
+            )}>{tag}</span>
           </div>
         ))}
       </div> : null}

src/app/interface/tube-layout/index.tsx

@@ -0,0 +1,39 @@
+"use client"
+import { ReactNode } from "react"
+
+import { cn } from "@/lib/utils"
+import { useStore } from "@/app/state/useStore"
+
+import { LeftMenu } from "../left-menu"
+import { TopHeader } from "../top-header"
+
+export function TubeLayout({ children }: { children?: ReactNode }) {
+  const headerMode = useStore(s => s.headerMode)
+  const view = useStore(s => s.view)
+  return (
+    <div className={cn(
+      `dark flex flex-row h-screen w-screen inset-0 overflow-hidden`,
+       view === "public_video"
+       ? `bg-gradient-radial from-neutral-900 to-neutral-950`
+       : ''// bg-gradient-to-br from-neutral-950 via-neutral-950 to-neutral-950`
+     
+    )}>
+      <LeftMenu />
+      <div className={cn(
+        `flex flex-col`,
+        `w-[calc(100vw-96px)]`,
+        `px-2`
+      )}>
+        <TopHeader />
+        <main className={cn(
+          `w-full overflow-x-hidden overflow-y-scroll`,
+          headerMode === "normal"
+            ? `h-[calc(100vh-112px)]`
+            : `h-[calc(100vh-48px)]`
+          )}>
+          {children}
+        </main>
+      </div>
+    </div>
+  )
+}

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

@@ -5,6 +5,7 @@ import { cn } from "@/lib/utils"
 import { VideoInfo } from "@/types"
 import { formatDuration } from "@/lib/formatDuration"
 import { formatTimeAgo } from "@/lib/formatTimeAgo"
+import Link from "next/link"
 
 export function VideoCard({
   video,
@@ -37,83 +38,85 @@ export function VideoCard({
   }
 
   return (
-  <div
-    className={cn(
-      `w-full`,
-      `flex flex-col`,
-      `bg-line-900`,
-      `space-y-3`,
-      `cursor-pointer`,
-      className,
-    )}
-    onPointerEnter={handlePointerEnter}
-    onPointerLeave={handlePointerLeave}
-    onClick={handleClick}
-    >
-      <div
-        className={cn(
-          `flex flex-col aspect-video items-center justify-center`,
-          `rounded-xl overflow-hidden`,
-        )}
+  <Link href={`/watch?v=${video.id}`}>
+    <div
+      className={cn(
+        `w-full`,
+        `flex flex-col`,
+        `bg-line-900`,
+        `space-y-3`,
+        `cursor-pointer`,
+        className,
+      )}
+      onPointerEnter={handlePointerEnter}
+      onPointerLeave={handlePointerLeave}
+      // onClick={handleClick}
       >
-        <video
-          ref={ref}
-          src={video.assetUrl}
-          className="w-full"
-          onLoadedMetadata={handleLoad}
-          muted
-        />
+        <div
+          className={cn(
+            `flex flex-col aspect-video items-center justify-center`,
+            `rounded-xl overflow-hidden`,
+          )}
+        >
+          <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(
+            ``,
+            `w-full flex flex-row items-end justify-end`
+            )}>
               <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]`,
+                `-mt-8`,
+                `mr-0`,
               )}
-              >{formatDuration(duration)}</div>
-            </div>
-        </div>
-      </div>
-      <div className={cn(
-        `flex flex-row space-x-4`,
-      )}>
-        <div className="flex flex-col">
-          <div className="flex w-9 rounded-full overflow-hidden">
-            <img
-              src="huggingface-avatar.jpeg"
-            />
+              >
+                <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="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 className={cn(
+          `flex flex-row space-x-4`,
+        )}>
+          <div className="flex flex-col">
+            <div className="flex w-9 rounded-full overflow-hidden">
+              <img
+                src="huggingface-avatar.jpeg"
+              />
+            </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 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>
-    </div>
+    </Link>
   )
 }

src/app/layout.tsx

@@ -4,6 +4,7 @@ import { Roboto } from 'next/font/google'
 import { cn } from '@/lib/utils'
 
 import './globals.css'
+import Head from 'next/head'
 
 const roboto = Roboto({
   weight: ['100', '300', '400', '500', '700', '900'],
@@ -24,12 +25,36 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
+      <Head>
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
+        <link rel="preconnect" href="https://fonts.googleapis.com" crossOrigin="anonymous" />
+        <meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=5.0, minimum-scale=0.86" />
+      </Head>
       <body className={cn(
         `h-full w-full overflow-auto`,
+        `dark text-neutral-100 bg-neutral-950`,
         roboto.className
         )}>
         {children}
       </body>
+
+        {/*
+        TODO: use a new tracker
+
+        import Script from "next/script"
+
+        This is the kind of project on which we want custom analytics!
+        <Script src="https://www.googletagmanager.com/gtag/js?id=GTM-NJ2ZZFBX" />
+        <Script id="google-analytics">
+          {`
+            window.dataLayer = window.dataLayer || [];
+            function gtag(){dataLayer.push(arguments);}
+            gtag('js', new Date());
+    
+            gtag('config', 'GTM-NJ2ZZFBX');
+          `}
+        </Script>
+        */}
     </html>
   )
 }

src/app/main.tsx

@@ -1,8 +1,5 @@
 "use client"
 
-import { cn } from "@/lib/utils"
-import { TopHeader } from "./interface/top-header"
-import { LeftMenu } from "./interface/left-menu"
 import { useStore } from "./state/useStore"
 import { HomeView } from "./views/home-view"
 import { PublicChannelsView } from "./views/public-channels-view"
@@ -11,39 +8,57 @@ import { PublicChannelView } from "./views/public-channel-view"
 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 { useEffect } from "react"
+import { usePathname } from "next/navigation"
+import { TubeLayout } from "./interface/tube-layout"
+
+// this is where we transition from the server-side space
+// and the client-side space
+// basically, all the views are generated in client-side space
+// so the role of Main is to map server-side provided params
+// to the Zustand store (client-side)
+//
+// one benefit of doing this is that we will able to add some animations/transitions
+// more easily
+export function Main({
+  video
+}: {
+ // server side params
+ video?: VideoInfo
+}) {
+  const pathname = usePathname()
+
+  const setCurrentVideo = useStore(s => s.setCurrentVideo)
+  const setView = useStore(s => s.setView)
+  const setPathname = useStore(s => s.setPathname)
+
+  useEffect(() => {
+    if (video?.id) {
+      setCurrentVideo(video)
+    }
+  }, [video?.id])
+
+
+  useEffect(() => {
+    setPathname(pathname)
+  }, [pathname])
+
 
-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`,
-      `dark`
-    )}>
-      <LeftMenu />
-      <div className={cn(
-        `flex flex-col`,
-        `w-[calc(100vw-96px)]`,
-        `px-2`
-      )}>
-        <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 />}
-          {view === "public_channel" && <PublicChannelView />}
-          {view === "user_channels" && <UserChannelsView />}
-          {/*view === "user_videos" && <UserVideosView />*/}
-          {view === "user_channel" && <UserChannelView />}
-          {view === "user_account" && <UserAccountView />}
-
-        </div>
-      </div>
-    </div>
+    <TubeLayout>
+      {view === "home" && <HomeView />}
+      {view === "public_video" && <PublicVideoView />}
+      {view === "public_channels" && <PublicChannelsView />}
+      {view === "public_channel" && <PublicChannelView />}
+      {view === "user_channels" && <UserChannelsView />}
+      {/*view === "user_videos" && <UserVideosView />*/}
+      {view === "user_channel" && <UserChannelView />}
+      {view === "user_account" && <UserAccountView />}
+      {view === "not_found" && <NotFoundView />}
+    </TubeLayout>
   )
 }

src/app/page.tsx

@@ -1,50 +1,8 @@
-"use client"
-
-import { useEffect, useState } from "react"
-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 (
-    <>
-      <Head>
-        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
-        <link rel="preconnect" href="https://fonts.googleapis.com" crossOrigin="anonymous" />
-        <meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=5.0, minimum-scale=0.86" />
-      </Head>
-      <main className={cn(
-        `light text-neutral-100`,
-        // `bg-gradient-to-r from-green-500 to-yellow-400`,
-        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 />}
-        {/*
-        TODO: use a new tracker
-        This is the kind of project on which we want custom analytics!
-        <Script src="https://www.googletagmanager.com/gtag/js?id=GTM-NJ2ZZFBX" />
-        <Script id="google-analytics">
-          {`
-            window.dataLayer = window.dataLayer || [];
-            function gtag(){dataLayer.push(arguments);}
-            gtag('js', new Date());
-    
-            gtag('config', 'GTM-NJ2ZZFBX');
-          `}
-        </Script>
-        */}
-      </main>
-    </>
+    <Main />
   )
 }

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

@@ -4,17 +4,19 @@ import { adminUsername } from "../config"
 
 export async function getIndex({
   status,
-  renewCache,
+  renewCache = true,
+  neverThrow = true,
 }: {
   status: VideoStatus
 
   renewCache?: boolean
+  neverThrow?: boolean
 }): Promise<Record<string, VideoInfo>> {
   try {
     const response = await fetch(
       `https://huggingface.co/datasets/${adminUsername}/ai-tube-index/raw/main/${status}.json`
     , {
-      cache: "no-store"
+      cache: renewCache ? "no-store" : "default"
     })
 
     const jsonResponse = await response?.json()
@@ -31,7 +33,10 @@ export async function getIndex({
 
     return videos
   } catch (err) {
-    console.error(`failed to get index ${status}:`, err)
-    return {}
+    if (neverThrow) {
+      console.error(`failed to get index ${status}:`, err)
+      return {}
+    }
+    throw err
   }
 }

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

@@ -0,0 +1,36 @@
+"use server"
+
+import { getIndex } from "./getIndex"
+
+export async function getTags({
+  renewCache = true,
+  neverThrow = true,
+}: {
+  renewCache?: boolean
+  neverThrow?: boolean
+} = {
+  renewCache: true,
+  neverThrow: true,
+}): Promise<string[]> {
+  try {
+    const published = Object.values(await getIndex({
+      status: "published",
+      renewCache,
+    }))
+
+    const tags: Record<string, number> = {}
+    for (const video of published) {
+      for (const tag of video.tags) {
+        const key = tag.trim().toLowerCase()
+        tags[key] = 1 + (tags[key] || 0)
+      }
+    }
+
+    return Object.entries(tags).sort((a, b) => b[1] - a[1]).map(i => i[0])
+  } catch (err) {
+    if (neverThrow) {
+      return []
+    }
+    throw err
+  }
+}

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

@@ -0,0 +1,22 @@
+"use server"
+
+import { VideoInfo } from "@/types"
+
+import { getIndex } from "./getIndex"
+
+export async function getVideo(videoId?: string | string[] | null): Promise<VideoInfo> {
+  const id = `${videoId || ""}`
+
+  if (!id) {
+    throw new Error(`cannot get the video, invalid id: "${id}"`)
+  }
+  const published = await getIndex({ status: "published" })
+
+  const video = published[id] || undefined
+
+  if (!video) {
+    throw new Error(`cannot get the video, nothing found for id "${id}"`)
+  }
+
+  return video
+}

src/app/state/useStore.ts

@@ -17,6 +17,8 @@ export const useStore = create<{
   view: InterfaceView
   setView: (view?: InterfaceView) => void
 
+  setPathname: (patname: string) => void
+
   currentChannel?: ChannelInfo
   setCurrentChannel: (currentChannel?: ChannelInfo) => void
 
@@ -26,6 +28,9 @@ export const useStore = create<{
   currentTag?: string
   setCurrentTag: (currentTag?: string) => void
 
+  currentTags: string[]
+  setCurrentTags: (currentTags?: string[]) => void
+
   currentVideos: VideoInfo[]
   setCurrentVideos: (currentVideos: VideoInfo[]) => void
 
@@ -46,6 +51,16 @@ export const useStore = create<{
     set({ view: view || "home" })
   },
 
+  setPathname: (pathname: string) => {
+    const routes: Record<string, InterfaceView> = {
+      "/": "home",
+      "/watch": "public_video",
+      "/channels": "public_channels"
+    }
+    console.log("setPathname: ", pathname)
+    set({ view: routes[pathname] || "not_found" })
+  },
+
   headerMode: "normal",
   setHeaderMode: (headerMode: InterfaceHeaderMode) => {
     set({ headerMode })
@@ -73,6 +88,11 @@ export const useStore = create<{
     set({ currentTag })
   },
 
+  currentTags: [],
+  setCurrentTags: (currentTags?: string[]) => {
+    set({ currentTags })
+  },
+
   currentVideos: [],
   setCurrentVideos: (currentVideos: VideoInfo[] = []) => {
     set({

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

@@ -7,6 +7,7 @@ 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"
+import { getTags } from "@/app/server/actions/ai-tube-hf/getTags"
 
 export function HomeView() {
   const [_isPending, startTransition] = useTransition()
@@ -18,6 +19,7 @@ export function HomeView() {
   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)
@@ -27,6 +29,7 @@ export function HomeView() {
     startTransition(async () => {
       const videos = await getVideos({
         sortBy: "date",
+        tag: currentTag,
         maxVideos: 25
       })
 

src/app/views/not-found-view/index.tsx

@@ -0,0 +1,15 @@
+"use client"
+
+import { cn } from "@/lib/utils"
+
+export function NotFoundView() {
+  return (
+    <div className={cn(
+      `w-full`,
+      `flex flex-row`,
+      `items-center justify-center`
+    )}>
+      <h1>Sorry, we couldn&apos;t find this content.</h1>
+    </div>
+  )
+}

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

@@ -6,13 +6,11 @@ import { RiCheckboxCircleFill } from "react-icons/ri"
 import { useStore } from "@/app/state/useStore"
 import { cn } from "@/lib/utils"
 import { VideoPlayer } from "@/app/interface/video-player"
+import { VideoInfo } from "@/types"
 
 
 export function PublicVideoView() {
-  const displayMode = useStore(s => s.displayMode)
   const video = useStore(s => s.currentVideo)
-  const setMenuMode = useStore(s => s.setMenuMode)
-  const setHeaderMode = useStore(s => s.setHeaderMode)
 
   if (!video) { return null }
   
@@ -36,7 +34,7 @@ export function PublicVideoView() {
           `text-xl text-zinc-100 font-medium mb-0 line-clamp-2`,
           `mb-2`
         )}>
-          {video?.label}
+          {video.label}
         </div>
         
         {/** VIDEO TOOLBAR - HORIZONTAL */}

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

@@ -5,7 +5,7 @@ import { useLocalStorage } from "usehooks-ts"
 
 import { cn } from "@/lib/utils"
 import { Input } from "@/components/ui/input"
-import { localStorageKeys } from "@/app/state/locaStorageKeys"
+import { localStorageKeys } from "@/app/state/localStorageKeys"
 import { defaultSettings } from "@/app/state/defaultSettings"
 
 export function UserAccountView() {

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

@@ -7,7 +7,7 @@ import { cn } from "@/lib/utils"
 import { VideoInfo } from "@/types"
 
 import { useLocalStorage } from "usehooks-ts"
-import { localStorageKeys } from "@/app/state/locaStorageKeys"
+import { localStorageKeys } from "@/app/state/localStorageKeys"
 import { defaultSettings } from "@/app/state/defaultSettings"
 import { Input } from "@/components/ui/input"
 import { Textarea } from "@/components/ui/textarea"

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

@@ -7,7 +7,7 @@ import { useStore } from "@/app/state/useStore"
 import { cn } from "@/lib/utils"
 import { getChannels } from "@/app/server/actions/ai-tube-hf/getChannels"
 import { ChannelList } from "@/app/interface/channel-list"
-import { localStorageKeys } from "@/app/state/locaStorageKeys"
+import { localStorageKeys } from "@/app/state/localStorageKeys"
 import { defaultSettings } from "@/app/state/defaultSettings"
 import { Input } from "@/components/ui/input"
 

src/app/watch/page.tsx

@@ -0,0 +1,84 @@
+import { useEffect, useState, useTransition } from "react"
+import Head from "next/head"
+import Script from "next/script"
+import { Metadata, ResolvingMetadata } from "next"
+
+
+import { Main } from "../main"
+
+import { getVideo } from "../server/actions/ai-tube-hf/getVideo"
+
+type Props = {
+  params: { id: string }
+  searchParams: {
+    v?: string | string[],
+    [key: string]: string | string[] | undefined
+  }
+}
+
+// https://nextjs.org/docs/pages/building-your-application/optimizing/fonts 
+export async function generateMetadata(
+  { params, searchParams: { v: videoId } }: Props,
+  parent: ResolvingMetadata
+): Promise<Metadata> {
+  // read route params
+
+  const metadataBase = new URL('https://huggingface.co/spaces/jbilcke-hf/ai-tube')
+
+  try {
+    const video = await getVideo(videoId)
+
+    if (!video) {
+      throw new Error("Video not found")
+    }
+
+    return {
+      title: `${video.label} - AI Tube`,
+      metadataBase: new URL('https://huggingface.co/spaces/jbilcke-hf/ai-tube'),
+      openGraph: {
+        type: "website",
+        // url: "https://example.com",
+        title: video.label || "", // put the video title here
+        description: video.description || "", // put the vide description here
+        siteName: "AI Tube",
+  
+        videos: [
+          {
+            "url": video.assetUrl
+          }
+        ],
+        // images: ['/some-specific-page-image.jpg', ...previousImages],
+      },
+    }
+  } catch (err) {
+    return {
+      title: "AI Tube - 404 Video Not Found",
+      metadataBase,
+      openGraph: {
+        type: "website",
+        // url: "https://example.com",
+        title: "AI Tube - 404 Not Found", // put the video title here
+        description: "", // put the vide description here
+        siteName: "AI Tube",
+  
+        videos: [],
+        images: [],
+      },
+    }
+  }
+}
+
+
+export default async function WatchPage({ searchParams: { v: videoId } }: Props) {
+  // const [_pending, startTransition] = useTransition()
+  // const setView = useStore(s => s.setView)
+  // const setCurrentVideo = useStore(s => s.setCurrentVideo)
+  const id = `${videoId || ""}`
+
+  const video = await getVideo(videoId)
+
+  // console.log("got video:", video.id)
+  return (
+    <Main video={video} />
+   )
+}

src/types.ts

@@ -366,6 +366,7 @@ export type InterfaceView =
   | "public_channels"
   | "public_channel" // public view of a channel
   | "public_video" // public view of a video
+  | "not_found"
 
 export type Settings = {
   huggingfaceApiKey: string