Refactor how we aquire the jwt token for the local user. (only fetch it

once)

The local jwt token needs to be aquired via the right endpoint. The
endpoint defines how our rtcBackendIdentity is computed. Based on us
using sticky events or state events we also need to use the right
endpoint. This cannot be done generically in the connection manager. The
jwt token now is computed in the localTransport and the resolved sfu
config is passed to the connection manager.

Add JWT endpoint version and SFU config support Pin matrix-js-sdk to a
specific commit and update dev auth image tag. Propagate SFU config and
JWT endpoint choice through local transport, ConnectionManager and
Connection; add JwtEndpointVersion enum and LocalTransportWithSFUConfig
type. Add NO_MATRIX_2 auth error and locale string, thread
rtcBackendIdentity through UI props, and include related test, CSS and
minor imports updates

src/settings/DeveloperSettingsTab.module.css

@@ -8,3 +8,14 @@ Please see LICENSE in the repository root for full details.
 pre {
   font-size: var(--font-size-micro);
 }
+
+.livekit_room_box {
+  border: 3px solid var(--cpd-color-bg-subtle-secondary);
+  border-radius: var(--cpd-space-8x);
+  padding: var(--cpd-space-4x);
+  margin-bottom: var(--cpd-space-4x);
+  margin-top: var(--cpd-space-4x);
+  li {
+    font-size: var(--font-size-micro);
+  }
+}

src/settings/DeveloperSettingsTab.tsx

@@ -29,6 +29,7 @@ import {
   Label,
   RadioControl,
 } from "@vector-im/compound-web";
+import { type Room as LivekitRoom } from "livekit-client";
 
 import { FieldRow, InputField } from "../input/Input";
 import {
@@ -42,7 +43,6 @@ import {
   customLivekitUrl as customLivekitUrlSetting,
   MatrixRTCMode,
 } from "./settings";
-import type { Room as LivekitRoom } from "livekit-client";
 import styles from "./DeveloperSettingsTab.module.css";
 import { useUrlParams } from "../UrlParams";
 
@@ -304,12 +304,12 @@ export const DeveloperSettingsTab: FC<Props> = ({
         </InlineField>
       </Form>
       {livekitRooms?.map((livekitRoom) => (
-        <>
-          <h3>
+        <div className={styles.livekit_room_box}>
+          <h4>
             {t("developer_mode.livekit_sfu", {
               url: livekitRoom.url || "unknown",
             })}
-          </h3>
+          </h4>
           {livekitRoom.isLocal && <p>ws-url: {localSfuUrl?.href}</p>}
           <p>
             {t("developer_mode.livekit_server_info")}(
@@ -321,7 +321,19 @@ export const DeveloperSettingsTab: FC<Props> = ({
               : "undefined"}
             {livekitRoom.room.metadata}
           </pre>
-        </>
+          <p>Local Participant</p>
+          <pre className={styles.pre}>
+            {livekitRoom.room.localParticipant.identity}
+          </pre>
+          <p>Remote Participants</p>
+          <ul>
+            {Array.from(livekitRoom.room.remoteParticipants.keys()).map(
+              (id) => (
+                <li key={id}>{id}</li>
+              ),
+            )}
+          </ul>
+        </div>
       ))}
       <p>{t("developer_mode.environment_variables")}</p>
       <pre>{JSON.stringify(env, null, 2)}</pre>