🐛(frontend) pass participant's name while creating a room

Fixed an issue where users' chosen usernames were not
being included when creating a room.

src/frontend/src/features/home/routes/Home.tsx

@@ -9,11 +9,16 @@ import { generateRoomId } from '@/features/rooms'
 import { authUrl, useUser, UserAware } from '@/features/auth'
 import { JoinMeetingDialog } from '../components/JoinMeetingDialog'
 import { useCreateRoom } from '@/features/rooms'
+import { usePersistentUserChoices } from '@livekit/components-react'
 
 export const Home = () => {
   const { t } = useTranslation('home')
   const { isLoggedIn } = useUser()
 
+  const {
+    userChoices: { username },
+  } = usePersistentUserChoices()
+
   const { mutateAsync: createRoom } = useCreateRoom({
     onSuccess: (data) => {
       navigateTo('room', data.slug, {
@@ -44,7 +49,7 @@ export const Home = () => {
                 isLoggedIn
                   ? async () => {
                       const slug = generateRoomId()
-                      await createRoom({ slug })
+                      await createRoom({ slug, username })
                     }
                   : undefined
               }

src/frontend/src/features/rooms/api/createRoom.ts

@@ -5,10 +5,14 @@ import { ApiRoom } from './ApiRoom'
 
 export interface CreateRoomParams {
   slug: string
+  username?: string
 }
 
-const createRoom = ({ slug }: CreateRoomParams): Promise<ApiRoom> => {
-  return fetchApi(`rooms/`, {
+const createRoom = ({
+  slug,
+  username = '',
+}: CreateRoomParams): Promise<ApiRoom> => {
+  return fetchApi(`rooms/?username=${encodeURIComponent(username)}`, {
     method: 'POST',
     body: JSON.stringify({
       name: slug,

src/frontend/src/features/rooms/components/Conference.tsx

@@ -57,7 +57,7 @@ export const Conference = ({
         username: userConfig.username,
       }).catch((error) => {
         if (error.statusCode == '404') {
-          createRoom({ slug: roomId })
+          createRoom({ slug: roomId, username: userConfig.username })
         }
       }),
     retry: false,