Creator Studio

Manage your channel, stream key, and OBS broadcast sessions.

{channel && ( )}

{!channel ? (

Create your channel

Each account can own one channel in this version.

createForm.setData( 'display_name', event.target.value, ) } placeholder="Nyone Live" /> createForm.setData( 'slug', event.target.value.toLowerCase(), ) } placeholder="nyone-live" /> createForm.setData('category_id', value) } />

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 Nyone live"
                                        />
                                    </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(
                                                            stopBroadcastRoute(
                                                                broadcast.id,
                                                            ),
                                                        )
                                                    }
                                                >
                                                    <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(rotateStreamKeyRoute())
                                        }
                                    >
                                        <RotateCw className="size-4" />
                                        Rotate key
                                    </Button>
                                </div>
                            </section>

{liveBroadcast && (
                                <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">
                                            {liveBroadcast.title}
                                        </div>
                                        <div className="text-muted-foreground">
                                            {liveBroadcast.recording_enabled
                                                ? 'Recording enabled'
                                                : 'Live only'}
                                        </div>
                                        <Button
                                            variant="destructive"
                                            size="sm"
                                            onClick={() =>
                                                router.post(
                                                    stopBroadcastRoute(
                                                        liveBroadcast.id,
                                                    ),
                                                )
                                            }
                                        >
                                            <StopCircle className="size-4" />
                                            Stop broadcast
                                        </Button>
                                    </div>
                                </section>
                            )}
                        </aside>
                    </div>
                )}
            </div>
        </>
    );
}

Dashboard.layout = {
    breadcrumbs: [
        {
            title: 'Creator Studio',
            href: dashboardRoute(),
        },
    ],
};