Adopt room context provider pattern (#412)

app/custom/VideoConferenceClientImpl.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { formatChatMessageLinks, LiveKitRoom, VideoConference } from '@livekit/components-react';
+import { formatChatMessageLinks, RoomContext, VideoConference } from '@livekit/components-react';
 import {
   ExternalE2EEKeyProvider,
   LogLevel,
@@ -11,7 +11,7 @@ import {
   type VideoCodec,
 } from 'livekit-client';
 import { DebugMode } from '@/lib/Debug';
-import { useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 import { decodePassphrase } from '@/lib/client-utils';
 import { SettingsMenu } from '@/lib/SettingsMenu';
 
@@ -57,22 +57,26 @@ export function VideoConferenceClientImpl(props: {
     };
   }, []);
 
+  useEffect(() => {
+    room.connect(props.liveKitUrl, props.token, connectOptions).catch((error) => {
+      console.error(error);
+    });
+    room.localParticipant.enableCameraAndMicrophone().catch((error) => {
+      console.error(error);
+    });
+  }, [room, props.liveKitUrl, props.token, connectOptions]);
+
   return (
-    <LiveKitRoom
+    <div className="lk-room-container">
-      room={room}
+      <RoomContext.Provider value={room}>
-      token={props.token}
+        <VideoConference
-      connectOptions={connectOptions}
+          chatMessageFormatter={formatChatMessageLinks}
-      serverUrl={props.liveKitUrl}
+          SettingsComponent={
-      audio={true}
+            process.env.NEXT_PUBLIC_SHOW_SETTINGS_MENU === 'true' ? SettingsMenu : undefined
-      video={true}
+          }
-    >
+        />
-      <VideoConference
+        <DebugMode logLevel={LogLevel.debug} />
-        chatMessageFormatter={formatChatMessageLinks}
+      </RoomContext.Provider>
-        SettingsComponent={
+    </div>
-          process.env.NEXT_PUBLIC_SHOW_SETTINGS_MENU === 'true' ? SettingsMenu : undefined
-        }
-      />
-      <DebugMode logLevel={LogLevel.debug} />
-    </LiveKitRoom>
   );
 }

app/rooms/[roomName]/PageClientImpl.tsx

@@ -7,9 +7,9 @@ import { SettingsMenu } from '@/lib/SettingsMenu';
 import { ConnectionDetails } from '@/lib/types';
 import {
   formatChatMessageLinks,
-  LiveKitRoom,
   LocalUserChoices,
   PreJoin,
+  RoomContext,
   VideoConference,
 } from '@livekit/components-react';
 import {
@@ -20,6 +20,7 @@ import {
   Room,
   DeviceUnsupportedError,
   RoomConnectOptions,
+  RoomEvent,
 } from 'livekit-client';
 import { useRouter } from 'next/navigation';
 import React from 'react';
@@ -164,6 +165,38 @@ function VideoConferenceComponent(props: {
     };
   }, []);
 
+  React.useEffect(() => {
+    room.on(RoomEvent.Disconnected, handleOnLeave);
+    room.on(RoomEvent.EncryptionError, handleEncryptionError);
+    room.on(RoomEvent.MediaDevicesError, handleError);
+    if (e2eeSetupComplete) {
+      room
+        .connect(
+          props.connectionDetails.serverUrl,
+          props.connectionDetails.participantToken,
+          connectOptions,
+        )
+        .catch((error) => {
+          handleError(error);
+        });
+      if (props.userChoices.videoEnabled) {
+        room.localParticipant.setCameraEnabled(true).catch((error) => {
+          handleError(error);
+        });
+      }
+      if (props.userChoices.audioEnabled) {
+        room.localParticipant.setMicrophoneEnabled(true).catch((error) => {
+          handleError(error);
+        });
+      }
+    }
+    return () => {
+      room.off(RoomEvent.Disconnected, handleOnLeave);
+      room.off(RoomEvent.EncryptionError, handleEncryptionError);
+      room.off(RoomEvent.MediaDevicesError, handleError);
+    };
+  }, [e2eeSetupComplete, room, props.connectionDetails, props.userChoices]);
+
   const router = useRouter();
   const handleOnLeave = React.useCallback(() => router.push('/'), [router]);
   const handleError = React.useCallback((error: Error) => {
@@ -178,26 +211,15 @@ function VideoConferenceComponent(props: {
   }, []);
 
   return (
-    <>
+    <div className="lk-room-container">
-      <LiveKitRoom
+      <RoomContext.Provider value={room}>
-        connect={e2eeSetupComplete}
-        room={room}
-        token={props.connectionDetails.participantToken}
-        serverUrl={props.connectionDetails.serverUrl}
-        connectOptions={connectOptions}
-        video={props.userChoices.videoEnabled}
-        audio={props.userChoices.audioEnabled}
-        onDisconnected={handleOnLeave}
-        onEncryptionError={handleEncryptionError}
-        onError={handleError}
-      >
         <VideoConference
           chatMessageFormatter={formatChatMessageLinks}
           SettingsComponent={SHOW_SETTINGS_MENU ? SettingsMenu : undefined}
         />
         <DebugMode />
         <RecordingIndicator />
-      </LiveKitRoom>
+      </RoomContext.Provider>
-    </>
+    </div>
   );
 }