From dbd9ac6eea54b8ce814e8477f5d8541d0d87df3d Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Thu, 25 Jul 2024 17:41:16 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=A9=B9(frontend)=20fix=20ignored=20pre-jo?=
 =?UTF-8?q?in=20options?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Closes #50.

Adopted LiveKit demo app approach for passing
configurations to LiveKitRoom.

Introduced roomOptions for future customizations (e.g.,
video quality, e2e, codec).

DeviceId is persisted in local storage despite boolean flag.
---
 .../features/rooms/components/Conference.tsx  | 24 ++++++++++++++-----
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/frontend/src/features/rooms/components/Conference.tsx b/src/frontend/src/features/rooms/components/Conference.tsx
index 22848a9c..0d4daa17 100644
--- a/src/frontend/src/features/rooms/components/Conference.tsx
+++ b/src/frontend/src/features/rooms/components/Conference.tsx
@@ -1,9 +1,11 @@
+import { useMemo } from "react";
 import { useQuery } from '@tanstack/react-query'
 import {
   LiveKitRoom,
   VideoConference,
   type LocalUserChoices,
 } from '@livekit/components-react'
+import { Room, RoomOptions } from "livekit-client";
 import { keys } from '@/api/queryKeys'
 import { QueryAware } from '@/layout/QueryAware'
 import { navigateToHome } from '@/features/home'
@@ -25,18 +27,28 @@ export const Conference = ({
       }),
   })
 
+  const roomOptions = useMemo((): RoomOptions => {
+    return {
+      videoCaptureDefaults: {
+        deviceId: userConfig.videoDeviceId ?? undefined,
+      },
+      audioCaptureDefaults: {
+        deviceId: userConfig.audioDeviceId ?? undefined,
+      },
+    };
+  }, [userConfig]);
+
+  const room = useMemo(() => new Room(roomOptions), [roomOptions]);
+
   return (
     <QueryAware status={status}>
       <LiveKitRoom
+        room={room}
         serverUrl={data?.livekit?.url}
         token={data?.livekit?.token}
         connect={true}
-        audio={{
-          deviceId: userConfig.audioDeviceId,
-        }}
-        video={{
-          deviceId: userConfig.videoDeviceId,
-        }}
+        audio={userConfig.audioEnabled}
+        video={userConfig.videoEnabled}
         onDisconnected={() => {
           navigateToHome()
         }}