diff --git a/src/frontend/src/features/home/routes/Home.tsx b/src/frontend/src/features/home/routes/Home.tsx index 86ced491..32130928 100644 --- a/src/frontend/src/features/home/routes/Home.tsx +++ b/src/frontend/src/features/home/routes/Home.tsx @@ -31,7 +31,10 @@ export const Home = () => { variant="primary" onPress={ isLoggedIn - ? () => navigateTo('room', generateRoomId()) + ? () => + navigateTo('room', generateRoomId(), { + state: { create: true }, + }) : undefined } href={isLoggedIn ? undefined : authUrl()} diff --git a/src/frontend/src/features/rooms/components/Conference.tsx b/src/frontend/src/features/rooms/components/Conference.tsx index 08745f9d..c841a735 100644 --- a/src/frontend/src/features/rooms/components/Conference.tsx +++ b/src/frontend/src/features/rooms/components/Conference.tsx @@ -35,8 +35,9 @@ export const Conference = ({ audioCaptureDefaults: { deviceId: userConfig.audioDeviceId ?? undefined, }, - }; - }, [userConfig]); + } + // do not rely on the userConfig object directly as its reference may change on every render + }, [userConfig.videoDeviceId, userConfig.audioDeviceId]) const room = useMemo(() => new Room(roomOptions), [roomOptions]); diff --git a/src/frontend/src/features/rooms/routes/Room.tsx b/src/frontend/src/features/rooms/routes/Room.tsx index 7a3e3401..e7f3199d 100644 --- a/src/frontend/src/features/rooms/routes/Room.tsx +++ b/src/frontend/src/features/rooms/routes/Room.tsx @@ -1,24 +1,46 @@ -import { type LocalUserChoices } from '@livekit/components-react' import { useState } from 'react' +import { + usePersistentUserChoices, + type LocalUserChoices, +} from '@livekit/components-react' import { useParams } from 'wouter' -import { Conference } from '../components/Conference' -import { Join } from '../components/Join' import { Screen } from '@/layout/Screen' import { ErrorScreen } from '@/layout/ErrorScreen' +import { useUser } from '@/features/auth' +import { Conference } from '../components/Conference' +import { Join } from '../components/Join' export const Room = () => { + const { user, isLoggedIn } = useUser() + const { userChoices: existingUserChoices } = usePersistentUserChoices() const [userConfig, setUserConfig] = useState(null) + const { roomId } = useParams() + const mode = isLoggedIn && history.state?.create ? 'create' : 'join' + const skipJoinScreen = isLoggedIn && mode === 'create' + if (!roomId) { return } + + if (!userConfig && !skipJoinScreen) { + return ( + + + + ) + } + return ( - {userConfig ? ( - - ) : ( - - )} + ) }