Provide sfu config via context

src/livekit/OpenIDLoader.tsx

@@ -15,21 +15,29 @@ limitations under the License.
 */
 
 import { MatrixClient } from "matrix-js-sdk";
-import React, { useEffect, useState } from "react";
+import React, {
+  ReactNode,
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
 import { logger } from "matrix-js-sdk/src/logger";
 
 import { SFUConfig, getSFUConfigWithOpenID } from "./openIDSFU";
 import { ErrorView, LoadingView } from "../FullScreenView";
-import { ActiveCall, InCallViewProps } from "../room/InCallView";
-import { UserChoices } from "./useLiveKit";
 
-interface Props extends Omit<InCallViewProps, "livekitRoom"> {
+interface Props {
   client: MatrixClient;
   roomName: string;
-  userChoices: UserChoices;
+  children: ReactNode;
 }
 
-export function OpenIDLoader({ client, roomName, ...rest }: Props) {
+const SFUConfigContext = createContext<SFUConfig>(undefined);
+
+export const useSFUConfig = () => useContext(SFUConfigContext);
+
+export function OpenIDLoader({ client, roomName, children }: Props) {
   const [sfuConfig, setSFUConfig] = useState<SFUConfig>();
   const [error, setError] = useState<Error>();
 
@@ -48,7 +56,11 @@ export function OpenIDLoader({ client, roomName, ...rest }: Props) {
   if (error) {
     return <ErrorView error={error} />;
   } else if (sfuConfig) {
-    return <ActiveCall client={client} sfuConfig={sfuConfig} {...rest} />;
+    return (
+      <SFUConfigContext.Provider value={sfuConfig}>
+        {children}
+      </SFUConfigContext.Provider>
+    );
   } else {
     return <LoadingView />;
   }

src/room/GroupCallView.tsx

@@ -35,6 +35,7 @@ import { useProfile } from "../profile/useProfile";
 import { UserChoices } from "../livekit/useLiveKit";
 import { findDeviceByName } from "../media-utils";
 import { OpenIDLoader } from "../livekit/OpenIDLoader";
+import { ActiveCall } from "./InCallView";
 
 declare global {
   interface Window {
@@ -222,18 +223,19 @@ export function GroupCallView({
     return <ErrorView error={error} />;
   } else if (state === GroupCallState.Entered && userChoices) {
     return (
-      <OpenIDLoader
-        client={client}
-        roomName={matrixInfo.roomName}
-        groupCall={groupCall}
-        participants={participants}
-        onLeave={onLeave}
-        unencryptedEventsFromUsers={unencryptedEventsFromUsers}
-        hideHeader={hideHeader}
-        matrixInfo={matrixInfo}
-        userChoices={userChoices}
-        otelGroupCallMembership={otelGroupCallMembership}
-      />
+      <OpenIDLoader client={client} roomName={matrixInfo.roomName}>
+        <ActiveCall
+          client={client}
+          groupCall={groupCall}
+          participants={participants}
+          onLeave={onLeave}
+          unencryptedEventsFromUsers={unencryptedEventsFromUsers}
+          hideHeader={hideHeader}
+          matrixInfo={matrixInfo}
+          userChoices={userChoices}
+          otelGroupCallMembership={otelGroupCallMembership}
+        />
+      </OpenIDLoader>
     );
   } else if (left) {
     // The call ended view is shown for two reasons: prompting guests to create

src/room/InCallView.tsx

@@ -81,9 +81,9 @@ import { RageshakeRequestModal } from "./RageshakeRequestModal";
 import { VideoTile } from "../video-grid/VideoTile";
 import { UserChoices, useLiveKit } from "../livekit/useLiveKit";
 import { useMediaDevices } from "../livekit/useMediaDevices";
-import { SFUConfig } from "../livekit/openIDSFU";
 import { useFullscreen } from "./useFullscreen";
 import { useLayoutStates } from "../video-grid/Layout";
+import { useSFUConfig } from "../livekit/OpenIDLoader";
 
 const canScreenshare = "getDisplayMedia" in (navigator.mediaDevices ?? {});
 // There is currently a bug in Safari our our code with cloning and sending MediaStreams
@@ -93,11 +93,11 @@ const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
 
 export interface ActiveCallProps extends Omit<InCallViewProps, "livekitRoom"> {
   userChoices: UserChoices;
-  sfuConfig: SFUConfig;
 }
 
 export function ActiveCall(props: ActiveCallProps) {
-  const livekitRoom = useLiveKit(props.userChoices, props.sfuConfig);
+  const sfuConfig = useSFUConfig();
+  const livekitRoom = useLiveKit(props.userChoices, sfuConfig);
 
   return (
     livekitRoom && (