Surface errors in PreJoin (#245)

* Don't use noSSR wrapper for prejoin

* wrap callbacks

* use client for room pages
This commit is contained in:
lukasIO 2024-04-17 14:42:06 +02:00 committed by GitHub
parent 51a47a02d8
commit 3fa395bbe1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 24 additions and 22 deletions

View file

@ -1,3 +1,4 @@
'use client';
import { formatChatMessageLinks, LiveKitRoom, VideoConference } from '@livekit/components-react';
import {
ExternalE2EEKeyProvider,

View file

@ -5,11 +5,11 @@ import {
formatChatMessageLinks,
useToken,
LocalUserChoices,
PreJoin,
} from '@livekit/components-react';
import {
DeviceUnsupportedError,
ExternalE2EEKeyProvider,
LogLevel,
Room,
RoomConnectOptions,
RoomOptions,
@ -19,7 +19,6 @@ import {
} from 'livekit-client';
import type { NextPage } from 'next';
import dynamic from 'next/dynamic';
import Head from 'next/head';
import { useRouter } from 'next/router';
import * as React from 'react';
@ -27,13 +26,6 @@ import { DebugMode } from '../../lib/Debug';
import { decodePassphrase, useServerUrl } from '../../lib/client-utils';
import { SettingsMenu } from '../../lib/SettingsMenu';
const PreJoinNoSSR = dynamic(
async () => {
return (await import('@livekit/components-react')).PreJoin;
},
{ ssr: false },
);
const Home: NextPage = () => {
const router = useRouter();
const { name: roomName } = router.query;
@ -42,9 +34,24 @@ const Home: NextPage = () => {
undefined,
);
function handlePreJoinSubmit(values: LocalUserChoices) {
const preJoinDefaults = React.useMemo(() => {
return {
username: '',
videoEnabled: true,
audioEnabled: true,
};
}, []);
const handlePreJoinSubmit = React.useCallback((values: LocalUserChoices) => {
setPreJoinChoices(values);
}
}, []);
const onPreJoinError = React.useCallback((e: any) => {
console.error(e);
}, []);
const onLeave = React.useCallback(() => router.push('/'), []);
return (
<>
<Head>
@ -57,21 +64,15 @@ const Home: NextPage = () => {
<ActiveRoom
roomName={roomName}
userChoices={preJoinChoices}
onLeave={() => {
router.push('/');
}}
onLeave={onLeave}
></ActiveRoom>
) : (
<div style={{ display: 'grid', placeItems: 'center', height: '100%' }}>
<PreJoinNoSSR
onError={(err) => console.log('error while setting up prejoin', err)}
defaults={{
username: '',
videoEnabled: true,
audioEnabled: true,
}}
<PreJoin
onError={onPreJoinError}
defaults={preJoinDefaults}
onSubmit={handlePreJoinSubmit}
></PreJoinNoSSR>
></PreJoin>
</div>
)}
</main>