Set up jig for testing Matrix 2.0

.gitignore

@@ -2,6 +2,7 @@ node_modules
 .DS_Store
 .env
 dist
+dist-embedded
 dist-ssr
 *.local
 *.bkp

README.md

@@ -360,6 +360,33 @@ pnpm backend
 # podman-compose -f docker-compose-dev.yml up
 ```
 
+The two Element Web instances load the Element Call widget from
+`./dist-embedded`, which is mounted over the copy bundled in the Element Web
+image. Build it from the current sources before starting the backend, and keep
+it rebuilding on change:
+
+```sh
+VITE_MATRIX_RTC_MODE=matrix_2_0 pnpm build:embedded:development --outDir dist-embedded --watch
+```
+
+Build it at least once before the first `pnpm backend`, since Docker otherwise
+creates an empty `dist-embedded` directory that the build cannot write to.
+Reload the page after a rebuild to pick up the new widget. The widget has no
+`config.json` in this setup, so `VITE_MATRIX_RTC_MODE` sets the default
+MatrixRTC mode of the build instead (see
+[docs/matrix_rtc_modes.md](docs/matrix_rtc_modes.md)); it can still be changed
+under Settings → Developer. Do not delete `dist-embedded` while the backend is
+running: the containers hold a mount of the directory, and a new directory of
+the same name is not picked up until they are recreated.
+
+> [!NOTE]
+> When Docker runs in a VM (colima, Docker Desktop), the SFUs' container IPs
+> are not routable from the host, so they advertise `127.0.0.1` as their ICE
+> candidate instead and the browser reaches them through the published ports.
+> This only works in Chromium-based browsers: Firefox ignores loopback
+> candidates, and calls drop about fifteen seconds after joining. Media runs
+> over ICE-TCP, since the UDP port ranges are not forwarded out of the VM.
+
 > [!NOTE]
 > To ensure your local development frontend functions properly, you’ll need to
 > add certificate exceptions in your browser for `https://localhost:3000` and

backend/app-service-othersite.yaml

@@ -5,7 +5,7 @@ sender_localpart: "_lk_jwt_service"
 namespaces:
   users:
     - exclusive: false
-      regex: "@.*:homeserver-1" # Cover all local users
+      regex: "@.*:synapse\\.othersite\\.m\\.localhost" # Cover all local users
 # Required for Synapse to call POST /_matrix/app/v1/ping on this service.
 url: "http://auth-server-1:16080"
 # Enable membership look-ups via /is_joined.

backend/app-service.yaml

@@ -5,7 +5,7 @@ sender_localpart: "_lk_jwt_service"
 namespaces:
   users:
     - exclusive: false
-      regex: "@.*:homeserver" # Cover all local users
+      regex: "@.*:synapse\\.m\\.localhost" # Cover all local users
 # Required for Synapse to call POST /_matrix/app/v1/ping on this service.
 url: "http://auth-server:6080"
 # Enable membership look-ups via /is_joined.

backend/dev_livekit-othersite.yaml

@@ -6,6 +6,11 @@ rtc:
   port_range_start: 50300
   port_range_end: 50400
   use_external_ip: false
+  # Advertise the loopback address instead of the container IP, which is not
+  # routable from the host when Docker runs in a VM (colima, Docker Desktop).
+  # The browser then reaches the SFU through the published ports. Firefox
+  # ignores loopback candidates, so this only works in Chromium-based browsers.
+  node_ip: 127.0.0.1
 turn:
   enabled: false
   domain: localhost

backend/dev_livekit.yaml

@@ -6,6 +6,11 @@ rtc:
   port_range_start: 50100
   port_range_end: 50200
   use_external_ip: false
+  # Advertise the loopback address instead of the container IP, which is not
+  # routable from the host when Docker runs in a VM (colima, Docker Desktop).
+  # The browser then reaches the SFU through the published ports. Firefox
+  # ignores loopback candidates, so this only works in Chromium-based browsers.
+  node_ip: 127.0.0.1
 turn:
   enabled: false
   domain: localhost

docker-compose-dev.yml

@@ -157,6 +157,9 @@ services:
     pull_policy: always
     volumes:
       - ./backend/ew.test.config.json:/app/config.json:Z
+      # Replaces the Element Call widget bundled in the image with the embedded
+      # build of the current sources. See "Backend" in README.md.
+      - ./dist-embedded:/app/widgets/element-call:ro,Z
     environment:
       ELEMENT_WEB_PORT: 8081
     ports:
@@ -169,6 +172,9 @@ services:
     pull_policy: always
     volumes:
       - ./backend/ew.test.othersite.config.json:/app/config.json:Z
+      # Replaces the Element Call widget bundled in the image with the embedded
+      # build of the current sources. See "Backend" in README.md.
+      - ./dist-embedded:/app/widgets/element-call:ro,Z
     environment:
       ELEMENT_WEB_PORT: 18081
     ports:

docs/matrix_rtc_modes.md

@@ -46,3 +46,11 @@ Valid values are `compatibility` and `matrix_2_0`; an invalid value is
 ignored (with a warning) and the user's choice applies. Pinning `matrix_2_0` on a
 homeserver without sticky event support makes joining fail with a "sticky events
 required" error.
+
+A build can change the default mode, for setups without a `config.json` by setting
+`VITE_MATRIX_RTC_MODE` at build time:
+
+```sh
+VITE_MATRIX_RTC_MODE=matrix_2_0 pnpm build:embedded
+```
+

src/settings/settings.test.ts

@@ -5,12 +5,15 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { describe, expect, it, beforeEach } from "vitest";
+import { describe, expect, it, beforeEach, vi } from "vitest";
+import { logger } from "matrix-js-sdk/lib/logger";
 
+import { MatrixRTCMode } from "../config/ConfigOptions";
 import {
   Setting,
   parseResolution,
   seedSettingsFromConfig,
+  defaultMatrixRTCMode,
   screenShareCodec,
   screenShareResolution,
   screenShareFramerate,
@@ -38,6 +41,28 @@ describe("parseResolution", () => {
   });
 });
 
+describe("defaultMatrixRTCMode", () => {
+  it("is Compatibility when the build sets nothing", () => {
+    expect(defaultMatrixRTCMode(undefined)).toBe(MatrixRTCMode.Compatibility);
+  });
+
+  it.each([MatrixRTCMode.Compatibility, MatrixRTCMode.Matrix_2_0])(
+    "takes a valid build value (%s)",
+    (mode) => {
+      expect(defaultMatrixRTCMode(mode)).toBe(mode);
+    },
+  );
+
+  it("ignores an invalid build value and warns", () => {
+    const warn = vi.spyOn(logger, "warn").mockImplementation(() => {});
+    expect(defaultMatrixRTCMode("nonsense")).toBe(MatrixRTCMode.Compatibility);
+    expect(warn).toHaveBeenCalledWith(
+      expect.stringContaining("VITE_MATRIX_RTC_MODE"),
+    );
+    warn.mockRestore();
+  });
+});
+
 describe("Setting", () => {
   describe("seedFromConfig", () => {
     it("updates value when no localStorage value exists", () => {

src/settings/settings.ts

@@ -148,9 +148,20 @@ export const enableExtendedLivekitLogs = new Setting<boolean>(
   false,
 );
 
+export function defaultMatrixRTCMode(
+  buildValue: string | undefined = import.meta.env.VITE_MATRIX_RTC_MODE,
+): MatrixRTCMode {
+  if (buildValue === undefined) return MatrixRTCMode.Compatibility;
+  if (Object.values<string>(MatrixRTCMode).includes(buildValue)) {
+    return buildValue as MatrixRTCMode;
+  }
+  logger.warn(`Ignoring invalid VITE_MATRIX_RTC_MODE: ${buildValue}`);
+  return MatrixRTCMode.Compatibility;
+}
+
 export const matrixRTCMode = new Setting<MatrixRTCMode>(
   "matrix-rtc-mode",
-  MatrixRTCMode.Compatibility,
+  defaultMatrixRTCMode(),
 );
 
 export const customLivekitUrl = new Setting<string | null>(