DGNum/livekit-dgn
15
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Surface errors in PreJoin (#245)

Browse source 
* 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
Show stats Download patch file Download diff file Expand all files Collapse all files

1
pages/custom/index.tsx
View file

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

45
pages/rooms/[name].tsx
View file

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