TODO: settings modal with multiple connections

Signed-off-by: Timo K <toger5@hotmail.de>

src/room/InCallView.tsx

@@ -897,7 +897,7 @@ export const InCallView: FC<InCallViewProps> = ({
             onDismiss={closeSettings}
             tab={settingsTab}
             onTabChange={setSettingsTab}
-            livekitRoom={undefined} // TODO-MULTI-SFU
+            livekitRooms={allLivekitRooms}
           />
         </>
       )}

src/settings/DeveloperSettingsTab.tsx

@@ -26,10 +26,10 @@ import styles from "./DeveloperSettingsTab.module.css";
 import { useUrlParams } from "../UrlParams";
 interface Props {
   client: MatrixClient;
-  livekitRoom?: LivekitRoom;
+  livekitRooms?: { room: LivekitRoom; url: string; isLocal?: boolean }[];
 }
 
-export const DeveloperSettingsTab: FC<Props> = ({ client, livekitRoom }) => {
+export const DeveloperSettingsTab: FC<Props> = ({ client, livekitRooms }) => {
   const { t } = useTranslation();
   const [duplicateTiles, setDuplicateTiles] = useSetting(duplicateTilesSetting);
   const [debugTileLayout, setDebugTileLayout] = useSetting(
@@ -59,15 +59,16 @@ export const DeveloperSettingsTab: FC<Props> = ({ client, livekitRoom }) => {
 
   const urlParams = useUrlParams();
 
-  const sfuUrl = useMemo((): URL | null => {
+  const localSfuUrl = useMemo((): URL | null => {
-    if (livekitRoom?.engine.client.ws?.url) {
+    const localRoom = livekitRooms?.find((r) => r.isLocal)?.room;
+    if (localRoom?.engine.client.ws?.url) {
       // strip the URL params
-      const url = new URL(livekitRoom.engine.client.ws.url);
+      const url = new URL(localRoom.engine.client.ws.url);
       url.search = "";
       return url;
     }
     return null;
-  }, [livekitRoom]);
+  }, [livekitRooms]);
 
   return (
     <>
@@ -211,22 +212,26 @@ export const DeveloperSettingsTab: FC<Props> = ({ client, livekitRoom }) => {
           )}
         />{" "}
       </FieldRow>
-      {livekitRoom ? (
+      {livekitRooms?.map((livekitRoom) => (
         <>
-          <p>
+          <h3>
             {t("developer_mode.livekit_sfu", {
-              url: sfuUrl?.href || "unknown",
+              url: livekitRoom.url || "unknown",
             })}
+          </h3>
+          {livekitRoom.isLocal && <p>ws-url: {localSfuUrl?.href}</p>}
+          <p>
+            {t("developer_mode.livekit_server_info")}(
+            {livekitRoom.isLocal ? "local" : "remote"})
           </p>
-          <p>{t("developer_mode.livekit_server_info")}</p>
           <pre className={styles.pre}>
-            {livekitRoom.serverInfo
+            {livekitRoom.room.serverInfo
-              ? JSON.stringify(livekitRoom.serverInfo, null, 2)
+              ? JSON.stringify(livekitRoom.room.serverInfo, null, 2)
               : "undefined"}
-            {livekitRoom.metadata}
+            {livekitRoom.room.metadata}
           </pre>
         </>
-      ) : null}
+      ))}
       <p>{t("developer_mode.environment_variables")}</p>
       <pre>{JSON.stringify(import.meta.env, null, 2)}</pre>
       <p>{t("developer_mode.url_params")}</p>

src/settings/SettingsModal.tsx

@@ -51,7 +51,11 @@ interface Props {
   onTabChange: (tab: SettingsTab) => void;
   client: MatrixClient;
   roomId?: string;
-  livekitRoom?: LivekitRoom;
+  livekitRooms?: {
+    room: LivekitRoom;
+    url: string;
+    isLocal?: boolean;
+  }[];
 }
 
 export const defaultSettingsTab: SettingsTab = "audio";
@@ -63,7 +67,7 @@ export const SettingsModal: FC<Props> = ({
   onTabChange,
   client,
   roomId,
-  livekitRoom,
+  livekitRooms,
 }) => {
   const { t } = useTranslation();
 
@@ -204,7 +208,9 @@ export const SettingsModal: FC<Props> = ({
   const developerTab: Tab<SettingsTab> = {
     key: "developer",
     name: t("settings.developer_tab_title"),
-    content: <DeveloperSettingsTab client={client} livekitRoom={livekitRoom} />,
+    content: (
+      <DeveloperSettingsTab client={client} livekitRooms={livekitRooms} />
+    ),
   };
 
   const tabs = [audioTab, videoTab];

src/state/CallViewModel.ts

@@ -593,11 +593,18 @@ export class CallViewModel extends ViewModel {
     ]).pipe(
       map(([remoteConnections, localConnection, localFocus]) =>
         Array.from(remoteConnections.entries())
-          .map(([index, c]) => ({ room: c.livekitRoom, url: index }))
+          .map(
+            ([index, c]) =>
+              ({
+                room: c.livekitRoom,
+                url: index,
+              }) as { room: LivekitRoom; url: string; isLocal?: boolean },
+          )
           .concat([
             {
               room: localConnection.livekitRoom,
               url: localFocus.livekit_service_url,
+              isLocal: true,
             },
           ]),
       ),