start project
This commit is contained in:
198
resources/js/pages/admin/dashboard.tsx
Normal file
198
resources/js/pages/admin/dashboard.tsx
Normal file
@@ -0,0 +1,198 @@
|
||||
import { Head, Link, router } from '@inertiajs/react';
|
||||
import { Ban, Radio, Shield, StopCircle, Undo2 } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
|
||||
type LiveBroadcast = {
|
||||
id: number;
|
||||
title: string;
|
||||
started_at: string | null;
|
||||
channel: {
|
||||
id: number;
|
||||
slug: string;
|
||||
display_name: string;
|
||||
owner: string;
|
||||
};
|
||||
};
|
||||
|
||||
type AdminChannel = {
|
||||
id: number;
|
||||
slug: string;
|
||||
display_name: string;
|
||||
is_live: boolean;
|
||||
suspended_at: string | null;
|
||||
owner: {
|
||||
id: number;
|
||||
name: string;
|
||||
};
|
||||
};
|
||||
|
||||
type Props = {
|
||||
stats: {
|
||||
users: number;
|
||||
channels: number;
|
||||
live_channels: number;
|
||||
vods: number;
|
||||
};
|
||||
liveBroadcasts: LiveBroadcast[];
|
||||
channels: AdminChannel[];
|
||||
};
|
||||
|
||||
export default function AdminDashboard({
|
||||
stats,
|
||||
liveBroadcasts,
|
||||
channels,
|
||||
}: Props) {
|
||||
return (
|
||||
<>
|
||||
<Head title="Admin" />
|
||||
<div className="grid gap-6 p-4 md:p-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="flex size-10 items-center justify-center rounded-md border">
|
||||
<Shield className="size-5" />
|
||||
</span>
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold">Admin</h1>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Moderate live streams, channels, users, and
|
||||
recordings.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section className="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
|
||||
<Stat label="Users" value={stats.users} />
|
||||
<Stat label="Channels" value={stats.channels} />
|
||||
<Stat label="Live channels" value={stats.live_channels} />
|
||||
<Stat label="VODs" value={stats.vods} />
|
||||
</section>
|
||||
|
||||
<section className="rounded-md border bg-card p-5">
|
||||
<div className="mb-4 flex items-center gap-2">
|
||||
<Radio className="size-5 text-red-600" />
|
||||
<h2 className="font-semibold">Live broadcasts</h2>
|
||||
</div>
|
||||
<div className="grid gap-3">
|
||||
{liveBroadcasts.map((broadcast) => (
|
||||
<div
|
||||
key={broadcast.id}
|
||||
className="flex flex-col gap-3 rounded-md border p-3 md:flex-row md:items-center md:justify-between"
|
||||
>
|
||||
<div>
|
||||
<div className="font-medium">
|
||||
{broadcast.title}
|
||||
</div>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{broadcast.channel.display_name} by{' '}
|
||||
{broadcast.channel.owner}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button asChild variant="outline" size="sm">
|
||||
<Link
|
||||
href={`/channels/${broadcast.channel.slug}`}
|
||||
>
|
||||
Open
|
||||
</Link>
|
||||
</Button>
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
router.post(
|
||||
`/admin/broadcasts/${broadcast.id}/stop`,
|
||||
)
|
||||
}
|
||||
>
|
||||
<StopCircle className="size-4" />
|
||||
Stop
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{liveBroadcasts.length === 0 && (
|
||||
<div className="rounded-md border border-dashed p-6 text-sm text-muted-foreground">
|
||||
No channels are live.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="rounded-md border bg-card p-5">
|
||||
<h2 className="mb-4 font-semibold">Recent channels</h2>
|
||||
<div className="grid gap-3">
|
||||
{channels.map((channel) => (
|
||||
<div
|
||||
key={channel.id}
|
||||
className="flex flex-col gap-3 rounded-md border p-3 md:flex-row md:items-center md:justify-between"
|
||||
>
|
||||
<div>
|
||||
<div className="font-medium">
|
||||
{channel.display_name}
|
||||
</div>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
@{channel.slug} owned by{' '}
|
||||
{channel.owner.name}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button asChild variant="outline" size="sm">
|
||||
<Link
|
||||
href={`/channels/${channel.slug}`}
|
||||
>
|
||||
Open
|
||||
</Link>
|
||||
</Button>
|
||||
{channel.suspended_at ? (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
router.post(
|
||||
`/admin/channels/${channel.slug}/restore`,
|
||||
)
|
||||
}
|
||||
>
|
||||
<Undo2 className="size-4" />
|
||||
Restore
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
router.post(
|
||||
`/admin/channels/${channel.slug}/suspend`,
|
||||
)
|
||||
}
|
||||
>
|
||||
<Ban className="size-4" />
|
||||
Suspend
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
AdminDashboard.layout = {
|
||||
breadcrumbs: [
|
||||
{
|
||||
title: 'Admin',
|
||||
href: '/admin',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
function Stat({ label, value }: { label: string; value: number }) {
|
||||
return (
|
||||
<div className="rounded-md border bg-card p-4">
|
||||
<div className="text-sm text-muted-foreground">{label}</div>
|
||||
<div className="mt-1 text-2xl font-semibold">{value}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
264
resources/js/pages/channels/show.tsx
Normal file
264
resources/js/pages/channels/show.tsx
Normal file
@@ -0,0 +1,264 @@
|
||||
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 (
|
||||
<>
|
||||
<Head title={channel.display_name} />
|
||||
<div className="grid min-h-[calc(100vh-4rem)] gap-0 xl:grid-cols-[1fr_360px]">
|
||||
<main className="min-w-0">
|
||||
<div className="bg-black">
|
||||
<VideoPlayer
|
||||
src={currentBroadcast?.hls_url ?? null}
|
||||
title={
|
||||
currentBroadcast?.title ?? channel.display_name
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<section className="grid gap-6 p-4 md:p-6">
|
||||
<div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
|
||||
<div className="min-w-0 space-y-2">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
{channel.is_live ? (
|
||||
<span className="inline-flex items-center gap-2 rounded-md bg-red-600 px-2 py-1 text-xs font-medium text-white">
|
||||
<Radio className="size-3" />
|
||||
LIVE
|
||||
</span>
|
||||
) : (
|
||||
<span className="rounded-md border px-2 py-1 text-xs text-muted-foreground">
|
||||
Offline
|
||||
</span>
|
||||
)}
|
||||
{channel.category && (
|
||||
<span className="rounded-md border px-2 py-1 text-xs">
|
||||
{channel.category.name}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<h1 className="text-2xl font-semibold">
|
||||
{currentBroadcast?.title ??
|
||||
channel.display_name}
|
||||
</h1>
|
||||
<div className="flex flex-wrap gap-4 text-sm text-muted-foreground">
|
||||
<span>{channel.display_name}</span>
|
||||
<span className="inline-flex items-center gap-1">
|
||||
<Users className="size-4" />
|
||||
{channel.viewer_count} viewers
|
||||
</span>
|
||||
<span>
|
||||
{channel.followers_count} followers
|
||||
</span>
|
||||
</div>
|
||||
{channel.description && (
|
||||
<p className="max-w-3xl text-sm leading-6 text-muted-foreground">
|
||||
{channel.description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{auth.user ? (
|
||||
<Button
|
||||
variant={
|
||||
isFollowing ? 'outline' : 'default'
|
||||
}
|
||||
onClick={() =>
|
||||
isFollowing
|
||||
? router.delete(
|
||||
`/channels/${channel.slug}/follow`,
|
||||
{
|
||||
preserveScroll: true,
|
||||
},
|
||||
)
|
||||
: router.post(
|
||||
`/channels/${channel.slug}/follow`,
|
||||
undefined,
|
||||
{
|
||||
preserveScroll: true,
|
||||
},
|
||||
)
|
||||
}
|
||||
>
|
||||
<Heart className="size-4" />
|
||||
{isFollowing ? 'Following' : 'Follow'}
|
||||
</Button>
|
||||
) : (
|
||||
<Button asChild variant="outline">
|
||||
<Link href="/login">
|
||||
<LogIn className="size-4" />
|
||||
Log in to follow
|
||||
</Link>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<section className="grid gap-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Video className="size-5" />
|
||||
<h2 className="font-semibold">Recent VODs</h2>
|
||||
</div>
|
||||
{vods.length > 0 ? (
|
||||
<div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
|
||||
{vods.map((vod) => (
|
||||
<div
|
||||
key={vod.id}
|
||||
className="rounded-md border p-4"
|
||||
>
|
||||
<div className="font-medium">
|
||||
{vod.title}
|
||||
</div>
|
||||
<div className="mt-1 text-sm text-muted-foreground">
|
||||
Expires{' '}
|
||||
{vod.expires_at
|
||||
? new Date(
|
||||
vod.expires_at,
|
||||
).toLocaleDateString()
|
||||
: 'later'}
|
||||
</div>
|
||||
{vod.playback_url ? (
|
||||
<Button
|
||||
asChild
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="mt-3"
|
||||
>
|
||||
<a href={vod.playback_url}>
|
||||
Watch VOD
|
||||
</a>
|
||||
</Button>
|
||||
) : (
|
||||
<div className="mt-3 text-sm text-muted-foreground">
|
||||
Processing recording
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="rounded-md border border-dashed p-6 text-sm text-muted-foreground">
|
||||
No public recordings yet.
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<aside className="flex min-h-[480px] flex-col border-l bg-card">
|
||||
<div className="flex h-14 items-center gap-2 border-b px-4">
|
||||
<MessageSquare className="size-5" />
|
||||
<h2 className="font-semibold">Live chat</h2>
|
||||
</div>
|
||||
<div className="flex-1 space-y-3 overflow-y-auto p-4">
|
||||
{chatMessages.map((message) => (
|
||||
<div key={message.id} className="text-sm">
|
||||
<span className="font-medium">
|
||||
{message.user.name}
|
||||
</span>
|
||||
<span className="ml-2 text-muted-foreground">
|
||||
{message.body}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
{chatMessages.length === 0 && (
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{channel.is_live
|
||||
? 'No messages yet.'
|
||||
: 'Chat appears when the channel is live.'}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="border-t p-4">
|
||||
{auth.user ? (
|
||||
<form onSubmit={submitChat} className="flex gap-2">
|
||||
<Input
|
||||
value={chatForm.data.body}
|
||||
onChange={(event) =>
|
||||
chatForm.setData(
|
||||
'body',
|
||||
event.target.value,
|
||||
)
|
||||
}
|
||||
placeholder={
|
||||
channel.is_live
|
||||
? 'Send a message'
|
||||
: 'Channel is offline'
|
||||
}
|
||||
disabled={!channel.is_live}
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
size="icon"
|
||||
disabled={
|
||||
!channel.is_live || chatForm.processing
|
||||
}
|
||||
>
|
||||
<Send className="size-4" />
|
||||
</Button>
|
||||
</form>
|
||||
) : (
|
||||
<Button
|
||||
asChild
|
||||
variant="outline"
|
||||
className="w-full"
|
||||
>
|
||||
<Link href="/login">Log in to chat</Link>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
ChannelShow.layout = {
|
||||
breadcrumbs: [
|
||||
{
|
||||
title: 'Channel',
|
||||
href: '/',
|
||||
},
|
||||
],
|
||||
};
|
||||
541
resources/js/pages/dashboard.tsx
Normal file
541
resources/js/pages/dashboard.tsx
Normal file
@@ -0,0 +1,541 @@
|
||||
import { Head, router, useForm } from '@inertiajs/react';
|
||||
import {
|
||||
Copy,
|
||||
KeyRound,
|
||||
Radio,
|
||||
RotateCw,
|
||||
Save,
|
||||
StopCircle,
|
||||
Video,
|
||||
} from 'lucide-react';
|
||||
import type { FormEvent } from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { useClipboard } from '@/hooks/use-clipboard';
|
||||
import type { BroadcastSummary, Category } from '@/types';
|
||||
|
||||
type CreatorChannel = {
|
||||
id: number;
|
||||
slug: string;
|
||||
display_name: string;
|
||||
description: string | null;
|
||||
is_live: boolean;
|
||||
viewer_count: number;
|
||||
stream_key_last_used_at: string | null;
|
||||
category_id: number | null;
|
||||
live_broadcast: BroadcastSummary | null;
|
||||
};
|
||||
|
||||
type Props = {
|
||||
channel: CreatorChannel | null;
|
||||
plainStreamKey: string | null;
|
||||
streaming: {
|
||||
ingestServer: string;
|
||||
tokenizedPath: string | null;
|
||||
};
|
||||
categories: Category[];
|
||||
recentBroadcasts: BroadcastSummary[];
|
||||
};
|
||||
|
||||
export default function Dashboard({
|
||||
channel,
|
||||
plainStreamKey,
|
||||
streaming,
|
||||
categories,
|
||||
recentBroadcasts,
|
||||
}: Props) {
|
||||
const [, copy] = useClipboard();
|
||||
const createForm = useForm({
|
||||
display_name: '',
|
||||
slug: '',
|
||||
description: '',
|
||||
category_id: '',
|
||||
});
|
||||
const channelForm = useForm({
|
||||
display_name: channel?.display_name ?? '',
|
||||
slug: channel?.slug ?? '',
|
||||
description: channel?.description ?? '',
|
||||
category_id: channel?.category_id ? String(channel.category_id) : '',
|
||||
});
|
||||
const broadcastForm = useForm({
|
||||
title: '',
|
||||
recording_enabled: false,
|
||||
});
|
||||
|
||||
function createChannel(event: FormEvent) {
|
||||
event.preventDefault();
|
||||
createForm.post('/creator/channel');
|
||||
}
|
||||
|
||||
function updateChannel(event: FormEvent) {
|
||||
event.preventDefault();
|
||||
channelForm.patch('/creator/channel');
|
||||
}
|
||||
|
||||
function createBroadcast(event: FormEvent) {
|
||||
event.preventDefault();
|
||||
broadcastForm.post('/creator/broadcasts', {
|
||||
onSuccess: () => broadcastForm.reset('title', 'recording_enabled'),
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head title="Creator Studio" />
|
||||
<div className="flex flex-1 flex-col gap-6 p-4 md:p-6">
|
||||
<div className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold">
|
||||
Creator Studio
|
||||
</h1>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Manage your channel, stream key, and OBS broadcast
|
||||
sessions.
|
||||
</p>
|
||||
</div>
|
||||
{channel && (
|
||||
<Button asChild variant="outline">
|
||||
<a href={`/channels/${channel.slug}`}>
|
||||
<Radio className="size-4" />
|
||||
View channel
|
||||
</a>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{!channel ? (
|
||||
<section className="max-w-2xl rounded-md border bg-card p-5">
|
||||
<div className="mb-5">
|
||||
<h2 className="font-semibold">
|
||||
Create your channel
|
||||
</h2>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Each account can own one channel in this
|
||||
version.
|
||||
</p>
|
||||
</div>
|
||||
<form onSubmit={createChannel} className="grid gap-4">
|
||||
<Field
|
||||
label="Display name"
|
||||
error={createForm.errors.display_name}
|
||||
>
|
||||
<Input
|
||||
value={createForm.data.display_name}
|
||||
onChange={(event) =>
|
||||
createForm.setData(
|
||||
'display_name',
|
||||
event.target.value,
|
||||
)
|
||||
}
|
||||
placeholder="Nyone Live"
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Slug" error={createForm.errors.slug}>
|
||||
<Input
|
||||
value={createForm.data.slug}
|
||||
onChange={(event) =>
|
||||
createForm.setData(
|
||||
'slug',
|
||||
event.target.value.toLowerCase(),
|
||||
)
|
||||
}
|
||||
placeholder="nyone-live"
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Category">
|
||||
<CategorySelect
|
||||
categories={categories}
|
||||
value={createForm.data.category_id}
|
||||
onChange={(value) =>
|
||||
createForm.setData('category_id', value)
|
||||
}
|
||||
/>
|
||||
</Field>
|
||||
<Field
|
||||
label="Description"
|
||||
error={createForm.errors.description}
|
||||
>
|
||||
<textarea
|
||||
value={createForm.data.description}
|
||||
onChange={(event) =>
|
||||
createForm.setData(
|
||||
'description',
|
||||
event.target.value,
|
||||
)
|
||||
}
|
||||
className="min-h-28 rounded-md border bg-background px-3 py-2 text-sm shadow-xs outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50"
|
||||
/>
|
||||
</Field>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={createForm.processing}
|
||||
>
|
||||
<Save className="size-4" />
|
||||
Create channel
|
||||
</Button>
|
||||
</form>
|
||||
</section>
|
||||
) : (
|
||||
<div className="grid gap-6 xl:grid-cols-[1fr_360px]">
|
||||
<div className="grid gap-6">
|
||||
<section className="rounded-md border bg-card p-5">
|
||||
<div className="mb-5 flex items-center justify-between gap-4">
|
||||
<div>
|
||||
<h2 className="font-semibold">
|
||||
Channel details
|
||||
</h2>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Public metadata used in the
|
||||
directory and channel page.
|
||||
</p>
|
||||
</div>
|
||||
<span className="rounded-md border px-2 py-1 text-xs">
|
||||
{channel.is_live
|
||||
? `${channel.viewer_count} viewers`
|
||||
: 'Offline'}
|
||||
</span>
|
||||
</div>
|
||||
<form
|
||||
onSubmit={updateChannel}
|
||||
className="grid gap-4"
|
||||
>
|
||||
<Field
|
||||
label="Display name"
|
||||
error={channelForm.errors.display_name}
|
||||
>
|
||||
<Input
|
||||
value={
|
||||
channelForm.data.display_name
|
||||
}
|
||||
onChange={(event) =>
|
||||
channelForm.setData(
|
||||
'display_name',
|
||||
event.target.value,
|
||||
)
|
||||
}
|
||||
/>
|
||||
</Field>
|
||||
<Field
|
||||
label="Slug"
|
||||
error={channelForm.errors.slug}
|
||||
>
|
||||
<Input
|
||||
value={channelForm.data.slug}
|
||||
onChange={(event) =>
|
||||
channelForm.setData(
|
||||
'slug',
|
||||
event.target.value.toLowerCase(),
|
||||
)
|
||||
}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Category">
|
||||
<CategorySelect
|
||||
categories={categories}
|
||||
value={channelForm.data.category_id}
|
||||
onChange={(value) =>
|
||||
channelForm.setData(
|
||||
'category_id',
|
||||
value,
|
||||
)
|
||||
}
|
||||
/>
|
||||
</Field>
|
||||
<Field
|
||||
label="Description"
|
||||
error={channelForm.errors.description}
|
||||
>
|
||||
<textarea
|
||||
value={
|
||||
channelForm.data.description ??
|
||||
''
|
||||
}
|
||||
onChange={(event) =>
|
||||
channelForm.setData(
|
||||
'description',
|
||||
event.target.value,
|
||||
)
|
||||
}
|
||||
className="min-h-28 rounded-md border bg-background px-3 py-2 text-sm shadow-xs outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50"
|
||||
/>
|
||||
</Field>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={channelForm.processing}
|
||||
>
|
||||
<Save className="size-4" />
|
||||
Save channel
|
||||
</Button>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section className="rounded-md border bg-card p-5">
|
||||
<div className="mb-5">
|
||||
<h2 className="font-semibold">
|
||||
Broadcast setup
|
||||
</h2>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Create a pending broadcast, then start
|
||||
OBS with your stream key.
|
||||
</p>
|
||||
</div>
|
||||
<form
|
||||
onSubmit={createBroadcast}
|
||||
className="grid gap-4 md:grid-cols-[1fr_auto]"
|
||||
>
|
||||
<Field
|
||||
label="Stream title"
|
||||
error={broadcastForm.errors.title}
|
||||
>
|
||||
<Input
|
||||
value={broadcastForm.data.title}
|
||||
onChange={(event) =>
|
||||
broadcastForm.setData(
|
||||
'title',
|
||||
event.target.value,
|
||||
)
|
||||
}
|
||||
placeholder="Building live with Laravel"
|
||||
/>
|
||||
</Field>
|
||||
<label className="mt-6 flex h-9 items-center gap-2 rounded-md border px-3 text-sm">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={
|
||||
broadcastForm.data
|
||||
.recording_enabled
|
||||
}
|
||||
onChange={(event) =>
|
||||
broadcastForm.setData(
|
||||
'recording_enabled',
|
||||
event.target.checked,
|
||||
)
|
||||
}
|
||||
/>
|
||||
Record VOD
|
||||
</label>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={broadcastForm.processing}
|
||||
className="md:col-span-2"
|
||||
>
|
||||
<Video className="size-4" />
|
||||
Prepare broadcast
|
||||
</Button>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section className="rounded-md border bg-card p-5">
|
||||
<h2 className="mb-4 font-semibold">
|
||||
Recent broadcasts
|
||||
</h2>
|
||||
<div className="grid gap-2">
|
||||
{recentBroadcasts.map((broadcast) => (
|
||||
<div
|
||||
key={broadcast.id}
|
||||
className="flex flex-col gap-3 rounded-md border p-3 md:flex-row md:items-center md:justify-between"
|
||||
>
|
||||
<div>
|
||||
<div className="font-medium">
|
||||
{broadcast.title}
|
||||
</div>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{broadcast.status}{' '}
|
||||
{broadcast.recording_enabled
|
||||
? 'with recording'
|
||||
: 'live only'}
|
||||
</div>
|
||||
</div>
|
||||
{broadcast.status !== 'ended' && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
router.post(
|
||||
`/creator/broadcasts/${broadcast.id}/stop`,
|
||||
)
|
||||
}
|
||||
>
|
||||
<StopCircle className="size-4" />
|
||||
Stop
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
{recentBroadcasts.length === 0 && (
|
||||
<div className="rounded-md border border-dashed p-6 text-center text-sm text-muted-foreground">
|
||||
No broadcasts yet.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<aside className="grid content-start gap-6">
|
||||
<section className="rounded-md border bg-card p-5">
|
||||
<div className="mb-4 flex items-center gap-2">
|
||||
<KeyRound className="size-5 text-amber-600" />
|
||||
<h2 className="font-semibold">
|
||||
OBS stream key
|
||||
</h2>
|
||||
</div>
|
||||
<div className="grid gap-3 text-sm">
|
||||
<CopyRow
|
||||
label="Server"
|
||||
value={streaming.ingestServer}
|
||||
onCopy={copy}
|
||||
/>
|
||||
<CopyRow
|
||||
label="Stream key"
|
||||
value={
|
||||
streaming.tokenizedPath ??
|
||||
'Rotate the key to reveal it once.'
|
||||
}
|
||||
onCopy={copy}
|
||||
muted={!streaming.tokenizedPath}
|
||||
/>
|
||||
{plainStreamKey && (
|
||||
<div className="rounded-md border border-amber-300 bg-amber-50 p-3 text-amber-900 dark:border-amber-900/50 dark:bg-amber-950/30 dark:text-amber-200">
|
||||
This key is shown once. Store it in
|
||||
OBS before leaving this page.
|
||||
</div>
|
||||
)}
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() =>
|
||||
router.post(
|
||||
'/creator/stream-key/rotate',
|
||||
)
|
||||
}
|
||||
>
|
||||
<RotateCw className="size-4" />
|
||||
Rotate key
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{channel.live_broadcast && (
|
||||
<section className="rounded-md border bg-card p-5">
|
||||
<h2 className="mb-3 font-semibold">
|
||||
Current live session
|
||||
</h2>
|
||||
<div className="space-y-2 text-sm">
|
||||
<div className="font-medium">
|
||||
{channel.live_broadcast.title}
|
||||
</div>
|
||||
<div className="text-muted-foreground">
|
||||
{channel.live_broadcast
|
||||
.recording_enabled
|
||||
? 'Recording enabled'
|
||||
: 'Live only'}
|
||||
</div>
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
router.post(
|
||||
`/creator/broadcasts/${channel.live_broadcast?.id}/stop`,
|
||||
)
|
||||
}
|
||||
>
|
||||
<StopCircle className="size-4" />
|
||||
Stop broadcast
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
</aside>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Dashboard.layout = {
|
||||
breadcrumbs: [
|
||||
{
|
||||
title: 'Creator Studio',
|
||||
href: '/dashboard',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
function Field({
|
||||
label,
|
||||
error,
|
||||
children,
|
||||
}: {
|
||||
label: string;
|
||||
error?: string;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<label className="grid gap-2">
|
||||
<Label>{label}</Label>
|
||||
{children}
|
||||
{error && <span className="text-sm text-destructive">{error}</span>}
|
||||
</label>
|
||||
);
|
||||
}
|
||||
|
||||
function CategorySelect({
|
||||
categories,
|
||||
value,
|
||||
onChange,
|
||||
}: {
|
||||
categories: Category[];
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
}) {
|
||||
return (
|
||||
<select
|
||||
value={value}
|
||||
onChange={(event) => onChange(event.target.value)}
|
||||
className="h-9 rounded-md border bg-background px-3 text-sm shadow-xs outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50"
|
||||
>
|
||||
<option value="">No category</option>
|
||||
{categories.map((category) => (
|
||||
<option key={category.id} value={category.id}>
|
||||
{category.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
);
|
||||
}
|
||||
|
||||
function CopyRow({
|
||||
label,
|
||||
value,
|
||||
muted = false,
|
||||
onCopy,
|
||||
}: {
|
||||
label: string;
|
||||
value: string;
|
||||
muted?: boolean;
|
||||
onCopy: (text: string) => Promise<boolean>;
|
||||
}) {
|
||||
return (
|
||||
<div className="grid gap-2">
|
||||
<div className="text-xs font-medium text-muted-foreground uppercase">
|
||||
{label}
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<code
|
||||
className={`min-w-0 flex-1 rounded-md border px-3 py-2 text-xs ${muted ? 'text-muted-foreground' : ''}`}
|
||||
>
|
||||
{value}
|
||||
</code>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => void onCopy(value)}
|
||||
>
|
||||
<Copy className="size-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user