Spaces:
Running
on
CPU Upgrade
Running
on
CPU Upgrade
File size: 3,143 Bytes
f27679f b161bd3 f62b8d3 f42b4a1 f62b8d3 a3f1817 8f2b05f f62b8d3 b161bd3 f62b8d3 b161bd3 a3f1817 f62b8d3 8f2b05f f62b8d3 8f2b05f a3f1817 f62b8d3 8f2b05f f62b8d3 8f2b05f f62b8d3 a3f1817 f62b8d3 b161bd3 f62b8d3 b161bd3 e4d3d8a b161bd3 f62b8d3 8f2b05f f62b8d3 |
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 |
"use client"
import { useEffect, useState, useTransition } from "react"
import { useStore } from "@/app/state/useStore"
import { cn } from "@/lib/utils/cn"
import { VideoList } from "@/components/interface/video-list"
import { DefaultAvatar } from "@/components/interface/default-avatar"
export function PublicChannelView() {
const [_isPending, startTransition] = useTransition()
const publicChannel = useStore(s => s.publicChannel)
const publicChannelVideos = useStore(s => s.publicChannelVideos)
const setPublicChannelVideos = useStore(s => s.setPublicChannelVideos)
const [channelThumbnail, setChannelThumbnail] = useState(publicChannel?.thumbnail || "")
const handleBadChannelThumbnail = () => {
try {
if (channelThumbnail) {
setChannelThumbnail("")
}
} catch (err) {
}
}
useEffect(() => {
setChannelThumbnail(publicChannel?.thumbnail || "")
if (!publicChannel) {
return
}
// we already have all the videos we need (eg. they were rendered server-side)
// if (publicChannelVideos.length) { return }
// setPublicChannelVideos([])
// do we really need this? normally this was computed server-side
/*
startTransition(async () => {
const newPublicChannelVideos = await getChannelVideos({
channel: publicChannel,
status: "published",
})
console.log("publicChannelVideos:", newPublicChannelVideos)
setPublicChannelVideos(newPublicChannelVideos)
})
*/
}, [publicChannel, publicChannel?.id])
if (!publicChannel) { return null }
return (
<div className={cn(
`flex flex-col`
)}>
{/* BANNER */}
<div className={cn(
`flex flex-col items-center justify-center w-full h-44`
)}>
{channelThumbnail
? <img
src={channelThumbnail}
onError={handleBadChannelThumbnail}
className="w-full h-full overflow-hidden object-cover"
/>
: <DefaultAvatar
username={publicChannel.datasetUser}
bgColor="#fde047"
textColor="#1c1917"
width={160}
roundShape
/>}
</div>
{/* CHANNEL INFO - HORIZONTAL */}
<div className={cn(
`flex flex-row`
)}>
{/* AVATAR */}
<div className={cn(
`flex flex-col items-center justify-center w-full`
)}>
{channelThumbnail
? <img
src={channelThumbnail}
onError={handleBadChannelThumbnail}
className="w-40 h-40 overflow-hidden"
/>
: <DefaultAvatar
username={publicChannel.datasetUser}
bgColor="#fde047"
textColor="#1c1917"
width={160}
roundShape
/>}
</div>
<div className={cn(
`flex flex-col items-center justify-center w-full`
)}>
<h3 className="tex-xl text-zinc-100">{publicChannel.label}</h3>
</div>
</div>
<VideoList
items={publicChannelVideos}
/>
</div>
)
} |