Merge remote-tracking branch 'upstream/dbkr/openid' into SimonBrandner/feat/url

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

src/room/GroupCallView.tsx

@@ -28,13 +28,14 @@ import { useGroupCall } from "./useGroupCall";
 import { ErrorView, FullScreenView } from "../FullScreenView";
 import { LobbyView } from "./LobbyView";
 import { MatrixInfo } from "./VideoPreview";
-import { ActiveCall } from "./InCallView";
 import { CallEndedView } from "./CallEndedView";
 import { useSentryGroupCallHandler } from "./useSentryGroupCallHandler";
 import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
 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 {
@@ -218,21 +219,39 @@ export function GroupCallView({
     undefined
   );
 
+  const [livekitServiceURL, setLivekitServiceURL] = useState<
+    string | undefined
+  >(groupCall.foci[0]?.livekitServiceUrl);
+
+  useEffect(() => {
+    setLivekitServiceURL(groupCall.foci[0]?.livekitServiceUrl);
+  }, [setLivekitServiceURL, groupCall]);
+
+  if (!livekitServiceURL) {
+    return <ErrorView error={new Error("No livekit_service_url defined")} />;
+  }
+
   if (error) {
     return <ErrorView error={error} />;
   } else if (state === GroupCallState.Entered && userChoices) {
     return (
-      <ActiveCall
-        groupCall={groupCall}
+      <OpenIDLoader
         client={client}
-        participants={participants}
-        onLeave={onLeave}
-        unencryptedEventsFromUsers={unencryptedEventsFromUsers}
-        hideHeader={hideHeader}
-        matrixInfo={matrixInfo}
-        userChoices={userChoices}
-        otelGroupCallMembership={otelGroupCallMembership}
-      />
+        livekitServiceURL={livekitServiceURL}
+        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

@@ -83,6 +83,7 @@ import { UserChoices, useLiveKit } from "../livekit/useLiveKit";
 import { useMediaDevices } from "../livekit/useMediaDevices";
 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
@@ -90,18 +91,13 @@ const canScreenshare = "getDisplayMedia" in (navigator.mediaDevices ?? {});
 // For now we can disable screensharing in Safari.
 const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
 
-interface ActiveCallProps extends Omit<Props, "livekitRoom"> {
+export interface ActiveCallProps extends Omit<InCallViewProps, "livekitRoom"> {
   userChoices: UserChoices;
 }
 
 export function ActiveCall(props: ActiveCallProps) {
-  const livekitRoom = useLiveKit(props.userChoices, {
-    sfuUrl: props.groupCall.foci[0]!.url,
-    jwtUrl: `${props.groupCall.foci[0]!.jwtServiceUrl}/token`,
-    roomName: props.matrixInfo.roomName,
-    userDisplayName: props.matrixInfo.displayName,
-    userIdentity: `${props.client.getUserId()}:${props.client.getDeviceId()}`,
-  });
+  const sfuConfig = useSFUConfig();
+  const livekitRoom = useLiveKit(props.userChoices, sfuConfig);
 
   return (
     livekitRoom && (
@@ -112,7 +108,7 @@ export function ActiveCall(props: ActiveCallProps) {
   );
 }
 
-interface Props {
+export interface InCallViewProps {
   client: MatrixClient;
   groupCall: GroupCall;
   livekitRoom: Room;
@@ -134,7 +130,7 @@ export function InCallView({
   hideHeader,
   matrixInfo,
   otelGroupCallMembership,
-}: Props) {
+}: InCallViewProps) {
   const { t } = useTranslation();
   usePreventScroll();