Spaces:
Running
on
CPU Upgrade
Running
on
CPU Upgrade
File size: 2,569 Bytes
1f122c3 f62b8d3 df83860 a3f1817 df83860 9cea1bb df83860 a3f1817 df83860 a3f1817 df83860 9cea1bb df83860 a3f1817 df83860 9cea1bb df83860 9cea1bb a3f1817 9cea1bb df83860 9cea1bb df83860 b965e2b df83860 1f122c3 df83860 1f122c3 df83860 1f122c3 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
"use client"
import { useStore } from "./state/useStore"
import { HomeView } from "./views/home-view"
import { PublicChannelsView } from "./views/public-channels-view"
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 { ChannelInfo, VideoInfo } from "@/types"
import { useEffect } from "react"
import { usePathname, useRouter } 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,
channel,
}: {
// server side params
video?: VideoInfo
channel?: ChannelInfo
}) {
const pathname = usePathname()
const router = useRouter()
const setPublicVideo = useStore(s => s.setPublicVideo)
const setView = useStore(s => s.setView)
const setPathname = useStore(s => s.setPathname)
const videoId = `${video?.id || ""}`
// console.log("Main video= "+ videoId)
useEffect(() => {
// note: it is important to ALWAYS set the current video to videoId
// even if it's undefined
setPublicVideo(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}`)
}
}
}, [videoId])
// this is critical: it sync the current route (coming from server-side)
// with the zustand state manager
useEffect(() => {
setPathname(pathname)
}, [pathname])
const view = useStore(s => s.view)
return (
<TubeLayout>
{view === "home" && <HomeView />}
{view === "public_video" && <PublicVideoView />}
{view === "public_channels" && <PublicChannelsView />}
{view === "public_channel" && <PublicChannelView />}
{/*view === "user_videos" && <UserVideosView />*/}
{view === "user_channel" && <UserChannelView />}
{view === "user_account" && <UserAccountView />}
{view === "not_found" && <NotFoundView />}
</TubeLayout>
)
} |