improve huggingface support

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

@@ -16,6 +16,7 @@ export function LeftMenu() {
   const setView = useStore(s => s.setView)
   const menuMode = useStore(s => s.menuMode)
   const setMenuMode = useStore(s => s.setMenuMode)
+  const setCurrentVideo = useStore(s => s.setCurrentVideo)
 
   return (
     <div className={cn(
@@ -27,11 +28,15 @@ export function LeftMenu() {
       <div className={cn(
         `flex flex-col w-full`,
       )}>
-        <Link href="/">
+        <Link href={{
+            pathname: '/',
+            query: { v: undefined },
+          }}>
           <MenuItem
             icon={<RiHome8Line className="h-6 w-6" />}
             selected={view === "home"}
             // </Link>onClick={() => setView("home")}
+            // onClick={() => setCurrentVideo(undefiend)}
             >
             Discover
           </MenuItem>

src/app/main.tsx

@@ -11,7 +11,7 @@ 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 { usePathname, useRouter } from "next/navigation"
 import { TubeLayout } from "./interface/tube-layout"
 
 // this is where we transition from the server-side space
@@ -29,16 +29,29 @@ export function Main({
  video?: VideoInfo
 }) {
   const pathname = usePathname()
+  const router = useRouter()
 
   const setCurrentVideo = useStore(s => s.setCurrentVideo)
   const setView = useStore(s => s.setView)
   const setPathname = useStore(s => s.setPathname)
 
+  const videoId = `${video?.id || ""}`
+  // console.log("Main video= "+ videoId)
+
   useEffect(() => {
-    if (video?.id) {
-      setCurrentVideo(video)
+    // note: it is important to ALWAYS set the current video to videoId
+    // even if it's undefined
+    setCurrentVideo(video)
+
+    if (videoId) {
+      // this is a hack for hugging face:
+      // we allow the ?v=<id> param on the root of the domain
+      if (pathname !== "/watch") {
+        // console.log("we are on huggingface apparently!")
+        router.replace(`/watch?v=${videoId}`)
+      }
     }
-  }, [video?.id])
+  }, [videoId])
 
 
   useEffect(() => {

src/app/page.tsx

@@ -1,8 +1,15 @@
 
+import { AppQueryProps } from "@/types"
+
 import { Main } from "./main"
+import { getVideo } from "./server/actions/ai-tube-hf/getVideo"
 
-export default function Page() {
+// we have routes but on Hugging Face we don't see them
+// so.. let's use the work around
+export default async function Page({ searchParams: { v: videoId } }: AppQueryProps) {
+  const video = await getVideo({ videoId, neverThrow: true })
+  // console.log("Root page: videoId ----> ", video?.id)
   return (
-    <Main />
+    <Main video={video} />
   )
 }

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

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

src/app/state/useStore.ts

@@ -31,6 +31,12 @@ export const useStore = create<{
   currentTags: string[]
   setCurrentTags: (currentTags?: string[]) => void
 
+  currentModels: string[]
+  setCurrentModels: (currentModels?: string[]) => void
+
+  currentModel?: string
+  setCurrentModel: (currentModel?: string) => void
+
   currentVideos: VideoInfo[]
   setCurrentVideos: (currentVideos: VideoInfo[]) => void
 
@@ -93,6 +99,16 @@ export const useStore = create<{
     set({ currentTags })
   },
 
+  currentModels: [],
+  setCurrentModels: (currentModels?: string[]) => {
+    set({ currentModels })
+  },
+
+  currentModel: undefined,
+  setCurrentModel: (currentModel?: string) => {
+    set({ currentModel })
+  },
+
   currentVideos: [],
   setCurrentVideos: (currentVideos: VideoInfo[] = []) => {
     set({

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

@@ -12,8 +12,28 @@ import { VideoInfo } from "@/types"
 export function PublicVideoView() {
   const video = useStore(s => s.currentVideo)
 
+  const videoId = `${video?.id || ""}`
+
+  // we inject the current videoId in the URL, if it's not already present
+  // this is a hack for Hugging Face iframes
+  useEffect(() => {
+    const queryString = new URL(location.href).search
+    const searchParams = new URLSearchParams(queryString)
+    if (videoId) {
+      if (searchParams.get("v") !== videoId) {
+        console.log(`current videoId "${videoId}" isn't set in the URL query params.. TODO we should set it`)
+        
+        // searchParams.set("v", videoId)
+        // location.search = searchParams.toString()
+      }
+    } else {
+      // searchParams.delete("v")
+      // location.search = searchParams.toString()
+    }
+  }, [videoId])
+
   if (!video) { return null }
-  
+
   return (
     <div className={cn(
       `w-full`,

src/app/watch/page.tsx

@@ -3,22 +3,15 @@ import Head from "next/head"
 import Script from "next/script"
 import { Metadata, ResolvingMetadata } from "next"
 
+import { AppQueryProps } from "@/types"
 
 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,
+  { params, searchParams: { v: videoId } }: AppQueryProps,
   parent: ResolvingMetadata
 ): Promise<Metadata> {
   // read route params
@@ -26,7 +19,7 @@ export async function generateMetadata(
   const metadataBase = new URL('https://huggingface.co/spaces/jbilcke-hf/ai-tube')
 
   try {
-    const video = await getVideo(videoId)
+    const video = await getVideo({ videoId, neverThrow: true })
 
     if (!video) {
       throw new Error("Video not found")
@@ -69,15 +62,9 @@ export async function generateMetadata(
 }
 
 
-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)
+export default async function WatchPage({ searchParams: { v: videoId } }: AppQueryProps) {
+  const video = await getVideo({ videoId, neverThrow: true })
+  // console.log("WatchPage: --> " + video?.id)
   return (
     <Main video={video} />
    )

src/types.ts

@@ -410,4 +410,13 @@ export type UpdateQueueRequest = {
 export type UpdateQueueResponse = {
   error?: string
   nbUpdated: number
+}
+
+
+export type AppQueryProps = {
+  params: { id: string }
+  searchParams: {
+    v?: string | string[],
+    [key: string]: string | string[] | undefined
+  }
 }