Surface errors in PreJoin (#245)
* Don't use noSSR wrapper for prejoin * wrap callbacks * use client for room pages
This commit is contained in:
parent
51a47a02d8
commit
3fa395bbe1
2 changed files with 24 additions and 22 deletions
|
@ -1,3 +1,4 @@
|
|||
'use client';
|
||||
import { formatChatMessageLinks, LiveKitRoom, VideoConference } from '@livekit/components-react';
|
||||
import {
|
||||
ExternalE2EEKeyProvider,
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue