import { Head, Link, router, useForm, usePage } from '@inertiajs/react'; import { Heart, LogIn, MessageSquare, Radio, Send, Users, Video, } from 'lucide-react'; import type { FormEvent } from 'react'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { VideoPlayer } from '@/components/video-player'; import type { BroadcastSummary, ChannelDetail, ChatMessage, VodSummary, } from '@/types'; type Props = { channel: ChannelDetail; currentBroadcast: BroadcastSummary | null; vods: VodSummary[]; chatMessages: ChatMessage[]; isFollowing: boolean; }; export default function ChannelShow({ channel, currentBroadcast, vods, chatMessages, isFollowing, }: Props) { const { auth } = usePage().props; const chatForm = useForm({ body: '' }); function submitChat(event: FormEvent) { event.preventDefault(); chatForm.post(`/channels/${channel.slug}/chat`, { preserveScroll: true, onSuccess: () => chatForm.reset('body'), }); } return ( <>
{channel.is_live ? ( LIVE ) : ( Offline )} {channel.category && ( {channel.category.name} )}

{currentBroadcast?.title ?? channel.display_name}

{channel.display_name} {channel.viewer_count} viewers {channel.followers_count} followers
{channel.description && (

{channel.description}

)}
{auth.user ? ( ) : ( )}
{vods.length > 0 ? (
{vods.map((vod) => (
{vod.title}
Expires{' '} {vod.expires_at ? new Date( vod.expires_at, ).toLocaleDateString() : 'later'}
{vod.playback_url ? ( ) : (
Processing recording
)}
))}
) : (
No public recordings yet.
)}
); } ChannelShow.layout = { breadcrumbs: [ { title: 'Channel', href: '/', }, ], };