File size: 5,058 Bytes
1f122c3
 
 
 
f62b8d3
 
 
 
 
df83860
8f2b05f
df83860
9cea1bb
df83860
8f2b05f
 
df83860
 
 
 
 
 
 
 
 
 
8f2b05f
 
b161bd3
8f2b05f
 
 
a3f1817
df83860
 
8f2b05f
 
b161bd3
8f2b05f
 
 
a3f1817
df83860
8f2b05f
df83860
9cea1bb
df83860
a3f1817
df83860
 
b161bd3
 
8f2b05f
 
 
b161bd3
 
 
 
 
 
8f2b05f
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
b161bd3
df83860
9cea1bb
 
8f2b05f
 
 
 
 
 
 
 
 
df83860
8f2b05f
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
df83860
b161bd3
 
 
 
 
 
8f2b05f
 
 
 
 
 
 
b161bd3
8f2b05f
 
b161bd3
df83860
b965e2b
 
df83860
 
 
 
1f122c3
 
df83860
1f122c3
df83860
 
 
8f2b05f
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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
"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, InterfaceView, VideoInfo } from "@/types"
import { useEffect } from "react"
import { usePathname, useRouter } from "next/navigation"
import { TubeLayout } from "./interface/tube-layout"
import { PublicMusicVideosView } from "./views/public-music-videos-view"
import { getCollectionKey } from "@/lib/getCollectionKey"

// 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({
  // view,
  publicVideo,
  publicVideos,
  publicChannelVideos,
  publicTracks,
  publicTrack,
  channel,
}: {
 // server side params
 // view?: InterfaceView
 publicVideo?: VideoInfo
 publicVideos?: VideoInfo[]
 publicChannelVideos?: VideoInfo[]
 publicTracks?: VideoInfo[]
 publicTrack?: VideoInfo
 channel?: ChannelInfo
}) {
  // this could be also a parameter of main, where we pass this manually
  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 setPublicChannel = useStore(s => s.setPublicChannel)
  const setPublicVideos = useStore(s => s.setPublicVideos)
  const setPublicChannelVideos = useStore(s => s.setPublicChannelVideos)
  const setPublicTracks = useStore(s => s.setPublicTracks)
  const setPublicTrack = useStore(s => s.setPublicTrack)

  useEffect(() => {
    if (!publicVideos?.length) { return }
    // note: it is important to ALWAYS set the current video to videoId
    // even if it's undefined
    setPublicVideos(publicVideos)
  }, [getCollectionKey(publicVideos)])


  useEffect(() => {
    if (!publicChannelVideos?.length) { return }
    // note: it is important to ALWAYS set the current video to videoId
    // even if it's undefined
    setPublicChannelVideos(publicChannelVideos)
  }, [getCollectionKey(publicChannelVideos)])

  useEffect(() => {
    if (!publicTracks?.length) { return }
    // note: it is important to ALWAYS set the current video to videoId
    // even if it's undefined
    setPublicTracks(publicTracks)
  }, [getCollectionKey(publicTracks)])


  useEffect(() => {
    // note: it is important to ALWAYS set the current video to videoId
    // even if it's undefined
    setPublicTrack(publicTrack)

    if (!publicTrack || !publicTrack?.id) { return }

    // this is a hack for hugging face:
    // we allow the ?v=<id> param on the root of the domain
    if (pathname !== "/music") {
      // console.log("we are on huggingface apparently!")
      router.replace(`/music?m=${publicTrack.id}`)
    }
  }, [publicTrack?.id])

  useEffect(() => {
    // note: it is important to ALWAYS set the current video to videoId
    // even if it's undefined
    setPublicVideo(publicVideo)

    if (!publicVideo || !publicVideo?.id) { return }

    // 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=${publicVideo.id}`)
    }
    
  }, [publicVideo?.id])


  useEffect(() => {
    // note: it is important to ALWAYS set the current video to videoId
    // even if it's undefined
    setPublicChannel(channel)

    if (!channel || !channel?.id) { return }

    // this is a hack for hugging face:
    // we allow the ?v=<id> param on the root of the domain
    if (pathname !== "/channel") {
      // console.log("we are on huggingface apparently!")
      router.replace(`/channel?v=${channel.id}`)
    }
  
  }, [channel?.id])


  // 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_music_videos" && <PublicMusicVideosView />}
      {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>
  )
}