Add example docker compose; fix dynamic reg

README.md

@@ -209,6 +209,7 @@ A docker compose file `dev-backend-docker-compose.yml` is provided to start the
 whole stack of components which is required for a local development environment:
 
 - Minimum Synapse Setup (servername: `synapse.m.localhost`)
+- Matrix Authentication Service Setup (issuer: `mas.m.localhost`)
 - MatrixRTC Authorization Service (Note requires Federation API and hence a TLS reverse proxy)
 - Minimum LiveKit SFU Setup using dev defaults for config
 - Redis db for completeness
@@ -218,6 +219,7 @@ whole stack of components which is required for a local development environment:
     certificates
 - Minimum TLS reverse proxy for
   - Synapse homeserver: `synapse.m.localhost`
+  - Matrix Authentication Service: `mas.m.localhost`
   - MatrixRTC backend: `matrix-rtc.m.localhost`
   - Local Element Call development `call.m.localhost` via `yarn dev --host `
   - Element Web `app.m.localhost`

backend/dev_homeserver.yaml

@@ -12,6 +12,11 @@ listeners:
       - names: [client, federation, openid]
         compress: false
 
+matrix_authentication_service:
+  enabled: true
+  secret: "mas-matrix-secret"
+  endpoint: http://mas:8080
+
 database:
   name: sqlite3
   args:
@@ -46,9 +51,5 @@ rc_message:
   per_second: 0.5
   burst_count: 30
 
-# Required for Element Call in Single Page Mode due to on-the-fly user registration
-enable_registration: true
-enable_registration_without_verification: true
-
 report_stats: false
 serve_server_wellknown: true

backend/dev_mas.yaml

@@ -0,0 +1,96 @@
+http:
+  listeners:
+  - name: web
+    resources:
+    - name: discovery
+    - name: human
+    - name: oauth
+    - name: assets
+    - name: adminapi
+    binds:
+    - address: '[::]:8080'
+    proxy_protocol: false
+  trusted_proxies:
+  - 192.168.0.0/16
+  - 172.16.0.0/12
+  - 10.0.0.0/10
+  - 127.0.0.1/8
+  - fd00::/8
+  - ::1/128
+  public_base: https://mas.m.localhost/
+database:
+  uri: postgres://postgres@mas-db/mas
+  max_connections: 10
+  min_connections: 0
+  connect_timeout: 30
+  idle_timeout: 600
+  max_lifetime: 1800
+email:
+  from: '"Authentication Service" <root@localhost>'
+  reply_to: '"Authentication Service" <root@localhost>'
+  transport: blackhole
+secrets:
+  encryption: 91c9eda308d874d1b8ba51c0fe3b7cbb868638c8fbb82d7eec0e6912586bdabd
+  keys:
+  - kid: H30QE7M5eX
+    key: |
+      -----BEGIN RSA PRIVATE KEY-----
+      MIIEogIBAAKCAQEA3+t9XjM8LhYMpagIKXnpTXVWxIo5zwM/R8wYRPg0MPGCrOUB
+      i/L/Vof4yK7lIMWtCT724e989PLR4YmG2pXBpB8P7SZ3feggLoUMi8+QNzyKsGD+
+      lYmZd0D/2aVmxBxK83JP3LLodmoHduva2qSBF9YdZ6Greg/IcEdG2UY3iGYeojsQ
+      1Wx7V2+WPeUCtaIONBPk/rwOgWmzAhqGyCXONbvGazElNEuM0fwI278qveP5kNoh
+      aL6HvlaYQbMSGAg1tf06AKOjsJG0CRsvsMdFxuG9GEwd4pJr9+v+OqwnaFJHJ70z
+      kQFC3s/w+xCk4NnO+jSopBptu8ycwjZYMuq2kQIDAQABAoIBAHbDqFL2Sc0H1N1o
+      KiwVhTCYM9U6mz65Mi8aiSTLoKL09aJONGvODrAOnl2SpeSj9AsbYkajh1tEDx3Y
+      m7YECBjMgN3/sREOtUL3PphJFuy1J7o1N9KIkOU3jHwbxk3t07MbxlAAdFuaESt6
+      HTIqXm4OGrqEfTbYeC9VHrbPD1VAFj/OGHsYDurJzhfIlFSlZWZqHNjdNh2HAOJM
+      FElqJWqqR9fj2pYYdpo+oaheI/iIAuWpAgcZOJzaZ4iui4R9i4od+qqQ3EVECPvS
+      /QnezvDpiobShG6WOmrRj3WBtheiPLdNlNB0sVW9h3dHcrkE/l2n5pfArVbHB+wg
+      4e5FEAECgYEA4XjB6hpN1iX66ADf27L5mHymu1hTojZLoQdy76OcjgG+4ZoQl71U
+      OAww4ek9I6Alz+aQqTAnRtLHBKH+xSuO2VoxQfimk71mUmByCr25vIU8mGtXRIJO
+      rtWEVE4HQPhK2LODLm5zbp3I1GsrfNgMCsuA/yse5MIczC8bRFyf+DECgYEA/jzx
+      ddl1asjArcFcQyKFJxdobNqYJ4P+rbDLIOmC9IQ8n/v+ETERCzj/y93yaXXqCBlR
+      uHDzo72F/+SYDDWGYanpRmN2cUv1A0XTUs+dWYjfrscFJUEx8CZh0GeoLE4H3uru
+      GlwqPnc9sMPee98mj4yDMyrNqLx/VaXV+wnpbGECgYAh4JoKSa9+SLCdYVxBT2/v
+      OHN43LmcOto8NLlRRl0EfUCn9xUdJ4Za8YH6v6e/DZYA2dzMfv63xn2+tXRpPbU1
+      9TZHekvVEPUp1XHtKTqaF87V+/LdyVJ3NH+whxTR7zyXuMkyFchkS3Lcb8nV9URB
+      7vfP3zPCHWRkTYOkTuJ+UQKBgFCrj8ZgMOSoPJMlppvayTtFLypTFjJ7rIT6cwnH
+      bnkduIrfD5fu5MSV2nyauT+DXbYiKo8GsBhFm849f41oMnKs0ks2Zi++9UiLkGlX
+      XUs6phc0KUrP7AOSejkBmxgrzk2KZ/DPS8w0U8vR6reNcBPedwb2Tvl6jkDj9QjJ
+      9VohAoGAISjlufqw3y8F/0on1AhqyROlJghTBsQ+xDEBZ9txx/HcKVghqMhBCbFj
+      LRf8B4vH9QXtlZVtPFj0wE3INxsYtilsbD8wbwkxsLeGUFdPDucPacfBSyX+wLRh
+      S1/twrPS9KVhkU5d0TbyfOlEB1OSXZTWZ1n9NaqOZUPf6FAwm78=
+      -----END RSA PRIVATE KEY-----
+  - kid: VrRd3Y2OeF
+    key: |
+      -----BEGIN EC PRIVATE KEY-----
+      MHcCAQEEIB3zBxhuh275A3piMMDZ2BEM6vsoxswNLrTJRiaY+m80oAoGCCqGSM49
+      AwEHoUQDQgAECqFotDpyEYNrWf2UZaUB0CZz6KiptQL2wi8oRNkKlarjgDDNCBzR
+      dgCokx9C8bLpfqhTJE/6aSe6T19qkaPHIg==
+      -----END EC PRIVATE KEY-----
+  - kid: SHaCwxflXU
+    key: |
+      -----BEGIN EC PRIVATE KEY-----
+      MIGkAgEBBDCdchyP7aFxQce7vA+QMPkMkOaYKbmNoN1fnlKviKsJK1riq+1eKSEe
+      UeUF5BOczfugBwYFK4EEACKhZANiAAR1pIE4xN9xkULiCgMd/uztt4Lnu8FhvEZD
+      3BhUfy5kdBVbYyk1khgKy3k+dQvXaTVkzsHkQN8K78WxlUDlF5zKXLjgkeEiqgz7
+      HU0rr2e8geUiaEE2AkzWhvmIikvhuMo=
+      -----END EC PRIVATE KEY-----
+  - kid: ngjUaMfCuT
+    key: |
+      -----BEGIN EC PRIVATE KEY-----
+      MHQCAQEEIE11jnxjUvPk93ylMuIcwcayJsFUhsSH2EqAn97CiHf8oAcGBSuBBAAK
+      oUQDQgAE1XySwFNBUkzZ946MBf2/3ecXVptrauZEQ8d8zqUdBS7wOe5pZwZ15Jx4
+      aZhlusZ3BPl0KiTlWwOlaRDMrw9EGA==
+      -----END EC PRIVATE KEY-----
+passwords:
+  enabled: true
+  schemes:
+  - version: 1
+    algorithm: argon2id
+  minimum_complexity: 0
+matrix:
+  kind: synapse
+  homeserver: synapse.m.localhost
+  secret: "mas-matrix-secret"
+  endpoint: http://homeserver:8008/

backend/dev_nginx.conf

@@ -40,6 +40,23 @@ server {
 
 }
 
+# Matrix Authentication Server reverse proxy
+server {
+    listen                  443 ssl;
+    listen                  [::]:443 ssl;
+    server_name             mas.m.localhost;
+    ssl_certificate         /root/ssl/cert.pem;
+    ssl_certificate_key     /root/ssl/key.pem;
+
+    location / {
+        proxy_pass "http://mas:8080";
+        proxy_http_version 1.1;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+    }
+
+    error_page   500 502 503 504  /50x.html;
+}
+
 # MatrixRTC reverse proxy
 # - MatrixRTC Authorization Service
 # - LiveKit SFU websocket signaling connection

config/config.devenv.json

@@ -15,5 +15,8 @@
     "delayed_leave_event_delay_ms": 18000,
     "delayed_leave_event_restart_ms": 4000,
     "network_error_retry_ms": 100
+  },
+  "oidc_metadata": {
+    "client_name": "Element Call (dev)"
   }
 }

dev-backend-docker-compose.yml

@@ -26,7 +26,6 @@ services:
 
   livekit:
     image: livekit/livekit-server:latest
-    pull_policy: always
     hostname: livekit-sfu
     command: --dev --config /etc/livekit.yaml
     restart: unless-stopped
@@ -46,7 +45,6 @@ services:
 
   redis:
     image: redis:6-alpine
-    pull_policy: always
     command: redis-server /etc/redis.conf
     ports:
       # HOST_PORT:CONTAINER_PORT
@@ -59,7 +57,6 @@ services:
   synapse:
     hostname: homeserver
     image: docker.io/matrixdotorg/synapse:latest
-    pull_policy: always
     environment:
       - SYNAPSE_CONFIG_PATH=/data/cfg/homeserver.yaml
       # Needed for rootless podman-compose such that the uid/gid mapping does
@@ -71,6 +68,31 @@ services:
     volumes:
       - ./backend/synapse_tmp:/data:Z
       - ./backend/dev_homeserver.yaml:/data/cfg/homeserver.yaml:Z
+    depends_on:
+      - mas
+    networks:
+      - ecbackend
+
+  mas:
+    # To add users, see `docker exec element-call-mas-1 mas-cli manage register-user -h`
+    image: ghcr.io/element-hq/matrix-authentication-service:latest
+    pull_policy: always
+    hostname: mas
+    volumes:
+      - ./backend/dev_mas.yaml:/config.yaml:ro,Z
+    depends_on:
+      - mas-db
+    networks:
+      - ecbackend
+
+  mas-db:
+    image: docker.io/postgres:16-alpine
+    hostname: mas-db
+    restart: always
+    shm_size: 128mb
+    environment:
+      - POSTGRES_HOST_AUTH_METHOD=trust
+      - POSTGRES_DB=mas
     networks:
       - ecbackend
 
@@ -90,7 +112,6 @@ services:
     #  see backend/dev_tls_setup for how to generate the tls certs
     hostname: synapse.m.localhost
     image: nginx:latest
-    pull_policy: always
     volumes:
       - ./backend/dev_nginx.conf:/etc/nginx/conf.d/default.conf:Z
       - ./backend/dev_tls_m.localhost.key:/root/ssl/key.pem:Z
@@ -105,7 +126,9 @@ services:
       - "host.docker.internal:host-gateway"
     depends_on:
       - synapse
+      - mas
     networks:
       ecbackend:
         aliases:
+          - mas.m.localhost
           - matrix-rtc.m.localhost

docs/self-hosting.md

@@ -126,32 +126,6 @@ server {
 }
 ```
 
-Or Using Caddy, you can achieve this by:
-
-```caddy configuration file
-# Route for lk-jwt-service with livekit/jwt prefix
-@jwt_service path /livekit/jwt/sfu/get /livekit/jwt/healthz
-handle @jwt_service {
-  uri strip_prefix /livekit/jwt
-  reverse_proxy http://[::1]:8080 {
-    header_up Host {host}
-    header_up X-Forwarded-Server {host}
-    header_up X-Real-IP {remote_addr}
-    header_up X-Forwarded-For {remote_addr}
-  }
-}
-
-# Default route for livekit
-handle {
-  reverse_proxy http://localhost:7880 {
-    header_up Host {host}
-    header_up X-Forwarded-Server {host}
-    header_up X-Real-IP {remote_addr}
-    header_up X-Forwarded-For {remote_addr}
-  }
-}
-```
-
 #### MatrixRTC backend announcement
 
 > [!IMPORTANT]
@@ -240,7 +214,7 @@ server {
 There are currently two different config files. `.env` holds variables that are
 used at build time, while `public/config.json` holds variables that are used at
 runtime. Documentation and default values for `public/config.json` can be found
-in [ConfigOptions.ts](../src/config/ConfigOptions.ts).
+in [ConfigOptions.ts](src/config/ConfigOptions.ts).
 
 > [!CAUTION]
 > Please note configuring MatrixRTC backend via `config.json` of

docs/url-params.md

@@ -70,8 +70,6 @@ These parameters are relevant to both [widget](./embedded-standalone.md) and [st
 | `theme`                                                 | One of: `light`, `dark`, `light-high-contrast`, `dark-high-contrast`                                 | No, defaults to `dark`                                                                            | No, defaults to `dark`       | UI theme to use.                                                                                                                                                                                                                                                                                                                                                                                    |
 | `viaServers`                                            | Comma separated list of [Matrix Server Names](https://spec.matrix.org/v1.12/appendices/#server-name) | Not applicable                                                                                    | No                           | Homeserver for joining a room, non-empty value required for rooms not on the user’s default homeserver.                                                                                                                                                                                                                                                                                             |
 | `sendNotificationType`                                  | `ring` or `notification`                                                                             | No                                                                                                | No                           | Will send a "ring" or "notification" `m.rtc.notification` event if the user is the first one in the call.                                                                                                                                                                                                                                                                                           |
-| `autoLeaveWhenOthersLeft`                               | `true` or `false`                                                                                    | No, defaults to `false`                                                                           | No, defaults to `false`      | Whether the app should automatically leave the call when there is no one left in the call.                                                                                                                                                                                                                                                                                                          |
-| `waitForCallPickup`                                     | `true` or `false`                                                                                    | No, defaults to `false`                                                                           | No, defaults to `false`      | When sending a notification, show UI that the app is awaiting an answer, play a dial tone, and (in widget mode) auto-close the widget once the notification expires.                                                                                                                                                                                                                                |
 
 ### Widget-only parameters
 

locales/en/app.json

@@ -90,6 +90,7 @@
     "e2ee_unsupported_description": "Your web browser does not support encrypted calls. Supported browsers include Chrome, Safari, and Firefox 117+.",
     "generic": "Something went wrong",
     "generic_description": "Submitting debug logs will help us track down the problem.",
+    "homeserver_misconfig": "Misconfigured homeserver",
     "insufficient_capacity": "Insufficient capacity",
     "insufficient_capacity_description": "The server has reached its maximum capacity and you cannot join the call at this time. Try again later, or contact your server admin if the problem persists.",
     "matrix_rtc_focus_missing": "The server is not configured to work with {{brand}}. Please contact your server admin (Domain: {{domain}}, Error Code: {{ errorCode }}).",

package.json

@@ -129,7 +129,7 @@
     "typescript-eslint-language-service": "^5.0.5",
     "unique-names-generator": "^4.6.0",
     "vaul": "^1.0.0",
-    "vite": "^7.0.0",
+    "vite": "^6.0.0",
     "vite-plugin-generate-file": "^0.3.0",
     "vite-plugin-html": "^3.2.2",
     "vite-plugin-svgr": "^4.0.0",

playwright/create-call.spec.ts

@@ -40,11 +40,6 @@ test("Start a new call then leave and show the feedback screen", async ({
   // The tooltip with the name should be visible
   await expect(page.getByTestId("name_tag")).toContainText("John Doe");
 
-  // Resize the window to resemble a small mobile phone
-  await page.setViewportSize({ width: 350, height: 660 });
-  // We should still be able to send reactions at this screen size
-  await expect(page.getByRole("button", { name: "Reactions" })).toBeVisible();
-
   // leave the call
   await page.getByTestId("incall_leave").click();
   await expect(page.getByRole("heading")).toContainText(

src/App.tsx

@@ -20,6 +20,7 @@ import { logger } from "matrix-js-sdk/lib/logger";
 
 import { HomePage } from "./home/HomePage";
 import { LoginPage } from "./auth/LoginPage";
+import { OidcRedirectPage } from "./auth/OidcRedirectPage";
 import { RegisterPage } from "./auth/RegisterPage";
 import { RoomPage } from "./room/RoomPage";
 import { ClientProvider } from "./ClientContext";
@@ -88,6 +89,7 @@ export const App: FC<Props> = ({ vm }) => {
             <Routes>
               <SentryRoute path="/" element={<HomePage />} />
               <SentryRoute path="/login" element={<LoginPage />} />
+              <SentryRoute path="/after-login" element={<OidcRedirectPage />} />
               <SentryRoute path="/register" element={<RegisterPage />} />
               <SentryRoute path="*" element={<RoomPage />} />
             </Routes>

src/Avatar.test.tsx

@@ -21,6 +21,7 @@ const TestComponent: FC<
     <ClientContextProvider
       value={{
         state: "valid",
+        oidcClientConfig: null,
         disconnected: false,
         supportedFeatures: {
           reactions: true,

src/ClientContext.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2021-2024 New Vector Ltd.
+Copyright 2021-2025 New Vector Ltd.
 
 SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
@@ -19,7 +19,7 @@ import {
 import { useNavigate } from "react-router-dom";
 import { logger } from "matrix-js-sdk/lib/logger";
 import { type ISyncStateData, type SyncState } from "matrix-js-sdk/lib/sync";
-import { ClientEvent, type MatrixClient } from "matrix-js-sdk";
+import { ClientEvent, type OidcClientConfig, type MatrixClient } from "matrix-js-sdk";
 
 import type { WidgetApi } from "matrix-widget-api";
 import { ErrorPage } from "./FullScreenView";
@@ -29,6 +29,7 @@ import {
   RegistrationType,
 } from "./analytics/PosthogAnalytics";
 import { useEventTarget } from "./useEvents";
+import { getAuthMetadata } from "./utils/oidc/discovery";
 import { OpenElsewhereError } from "./RichError";
 
 declare global {
@@ -42,6 +43,7 @@ export type ClientState = ValidClientState | ErrorState;
 
 export type ValidClientState = {
   state: "valid";
+  oidcClientConfig: OidcClientConfig | null,
   authenticated?: AuthenticatedClient;
   // 'Disconnected' rather than 'connected' because it tracks specifically
   // whether the client is supposed to be connected but is not
@@ -74,17 +76,20 @@ export const useClientState = (): ClientState | undefined => use(ClientContext);
 export function useClient(): {
   client?: MatrixClient;
   setClient?: (client: MatrixClient, session: Session) => void;
+  oidcClientConfig: OidcClientConfig | null | undefined;
 } {
   let client;
   let setClient;
+  let oidcClientConfig;
 
   const clientState = useClientState();
   if (clientState?.state === "valid") {
     client = clientState.authenticated?.client;
     setClient = clientState.setClient;
+    oidcClientConfig = clientState.oidcClientConfig;
   }
 
-  return { client, setClient };
+  return { client, setClient, oidcClientConfig };
 }
 
 // Plain representation of the `ClientContext` as a helper for old components that expected an object with multiple fields.
@@ -140,6 +145,12 @@ interface Props {
 export const ClientProvider: FC<Props> = ({ children }) => {
   const navigate = useNavigate();
 
+  // null = no OIDC config, undefined = loading
+  const [oidcClientConfig, setOidcClientConfig] = useState<
+    OidcClientConfig | null | undefined
+  >(undefined);
+  const [oidcErr, setOidcErr] = useState<Error | undefined>(undefined);
+
   // null = signed out, undefined = loading
   const [initClientState, setInitClientState] = useState<
     InitResult | null | undefined
@@ -153,6 +164,11 @@ export const ClientProvider: FC<Props> = ({ children }) => {
     if (initializing.current) return;
     initializing.current = true;
 
+    if (!widget) {
+      // TODO: spec says this may change over time & should be refreshed upon cache expiry
+      getAuthMetadata().then(setOidcClientConfig, setOidcErr);
+    }
+
     loadClient()
       .then((initResult) => {
         setInitClientState(initResult);
@@ -251,12 +267,18 @@ export const ClientProvider: FC<Props> = ({ children }) => {
   const [supportsReactions, setSupportsReactions] = useState(false);
   const [supportsThumbnails, setSupportsThumbnails] = useState(false);
 
-  const state: ClientState | undefined = useMemo(() => {
-    if (alreadyOpenedErr) {
-      return { state: "error", error: alreadyOpenedErr };
+  const state = useMemo((): ClientState | undefined => {
+    const error = alreadyOpenedErr || oidcErr;
+    if (error) {
+      return { state: "error", error };
     }
 
-    if (initClientState === undefined) return undefined;
+    if (
+      initClientState === undefined ||
+      oidcClientConfig === undefined
+    ) {
+      return undefined;
+    }
 
     const authenticated =
       initClientState === null
@@ -270,6 +292,7 @@ export const ClientProvider: FC<Props> = ({ children }) => {
 
     return {
       state: "valid",
+      oidcClientConfig,
       authenticated,
       setClient,
       disconnected: isDisconnected,
@@ -280,6 +303,8 @@ export const ClientProvider: FC<Props> = ({ children }) => {
     };
   }, [
     alreadyOpenedErr,
+    oidcErr,
+    oidcClientConfig,
     changePassword,
     initClientState,
     logout,
@@ -345,8 +370,9 @@ export const ClientProvider: FC<Props> = ({ children }) => {
     };
   }, [initClientState, onSync]);
 
-  if (alreadyOpenedErr) {
-    return <ErrorPage widget={widget} error={alreadyOpenedErr} />;
+  const error = alreadyOpenedErr || oidcErr;
+  if (error) {
+    return <ErrorPage widget={widget} error={error} />;
   }
 
   return <ClientContext value={state}>{children}</ClientContext>;

src/RichError.tsx

@@ -6,7 +6,7 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { useTranslation } from "react-i18next";
-import { PopOutIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { ErrorIcon, PopOutIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import type { FC, ReactNode } from "react";
 import { ErrorView } from "./ErrorView";
@@ -51,3 +51,29 @@ export class OpenElsewhereError extends RichError {
     super("App opened in another tab", <OpenElsewhere />);
   }
 }
+
+const HomeserverMisconfig: FC<{message?: string}> = (props) => {
+  const { t } = useTranslation();
+
+  // TODO: don't want to show "Return to home screen" button for an error as fatal as this
+  return (
+    <ErrorView
+      widget={widget}
+      Icon={ErrorIcon}
+      title={t("error.homeserver_misconfig")}
+      fatal={true}
+    >
+      {props.message && (
+        <p>
+          {props.message}
+        </p>
+      )}
+    </ErrorView>
+  );
+};
+
+export class HomeserverMisconfigError extends RichError {
+  public constructor(message?: string) {
+    super(message || "Unknown error", <HomeserverMisconfig message={message} />);
+  }
+}

src/UrlParams.test.ts

@@ -228,7 +228,7 @@ describe("UrlParams", () => {
     const startNewCallDefaults = (platform: string): object => ({
       confineToRoom: true,
       appPrompt: false,
-      preload: false,
+      preload: true,
       header: platform === "desktop" ? HeaderStyle.None : HeaderStyle.AppBar,
       showControls: true,
       hideScreensharing: false,
@@ -242,7 +242,7 @@ describe("UrlParams", () => {
     const joinExistingCallDefaults = (platform: string): object => ({
       confineToRoom: true,
       appPrompt: false,
-      preload: false,
+      preload: true,
       header: platform === "desktop" ? HeaderStyle.None : HeaderStyle.AppBar,
       showControls: true,
       hideScreensharing: false,

src/UrlParams.ts

@@ -216,17 +216,6 @@ export interface UrlConfiguration {
    * This is one part to make the call matrixRTC session behave like a telephone call.
    */
   autoLeaveWhenOthersLeft: boolean;
-
-  /**
-   * If the client should behave like it is awaiting an answer if a notification was sent (wait for call pick up).
-   * This is a no-op if not combined with sendNotificationType.
-   *
-   * This entails:
-   *  - show ui that it is awaiting an answer
-   *  - play a sound that indicates that it is awaiting an answer
-   *  - auto-dismiss the call widget once the notification lifetime expires on the receivers side.
-   */
-  waitForCallPickup: boolean;
 }
 
 // If you need to add a new flag to this interface, prefer a name that describes
@@ -347,7 +336,7 @@ export const getUrlParams = (
   const inAppDefault = {
     confineToRoom: true,
     appPrompt: false,
-    preload: false,
+    preload: true,
     header: platform === "desktop" ? HeaderStyle.None : HeaderStyle.AppBar,
     showControls: true,
     hideScreensharing: false,
@@ -358,7 +347,6 @@ export const getUrlParams = (
     returnToLobby: false,
     sendNotificationType: "notification" as RTCNotificationType,
     autoLeaveWhenOthersLeft: false,
-    waitForCallPickup: false,
   };
   switch (intent) {
     case UserIntent.StartNewCall:
@@ -378,7 +366,6 @@ export const getUrlParams = (
         ...inAppDefault,
         skipLobby: true,
         autoLeaveWhenOthersLeft: true,
-        waitForCallPickup: true,
       };
       break;
     case UserIntent.JoinExistingCallDM:
@@ -404,7 +391,6 @@ export const getUrlParams = (
         returnToLobby: false,
         sendNotificationType: undefined,
         autoLeaveWhenOthersLeft: false,
-        waitForCallPickup: false,
       };
   }
 
@@ -456,7 +442,6 @@ export const getUrlParams = (
       "ring",
       "notification",
     ]),
-    waitForCallPickup: parser.getFlag("waitForCallPickup"),
     autoLeaveWhenOthersLeft: parser.getFlag("autoLeave"),
   };
 

src/auth/LoginPage.tsx

@@ -1,11 +1,11 @@
 /*
-Copyright 2021-2024 New Vector Ltd.
+Copyright 2021-2025 New Vector Ltd.
 
 SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type FC, type FormEvent, useCallback, useRef, useState } from "react";
+import { type FC, type FormEvent, type ReactElement, useCallback, useRef, useState } from "react";
 import { useNavigate, useLocation } from "react-router-dom";
 import { Trans, useTranslation } from "react-i18next";
 import { Button } from "@vector-im/compound-web";
@@ -19,13 +19,14 @@ import { usePageTitle } from "../usePageTitle";
 import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
 import { Config } from "../config/Config";
 import { Link } from "../button/Link";
+import { LoadingPage } from "../FullScreenView";
+import { getOidcClientId } from "../utils/oidc/registerClient";
+import { startOidcLogin } from "../utils/oidc/authorize";
 
 export const LoginPage: FC = () => {
   const { t } = useTranslation();
   usePageTitle(t("login_title"));
 
-  const { client, setClient } = useClient();
-  const login = useInteractiveLogin(client);
   const homeserver = Config.defaultHomeserverUrl(); // TODO: Make this configurable
   const usernameRef = useRef<HTMLInputElement>(null);
   const passwordRef = useRef<HTMLInputElement>(null);
@@ -36,19 +37,23 @@ export const LoginPage: FC = () => {
 
   // TODO: Handle hitting login page with authenticated client
 
-  const onSubmitLoginForm = useCallback(
-    (e: FormEvent<HTMLFormElement>) => {
-      e.preventDefault();
-      setLoading(true);
+  let node: ReactElement;
+  const { client, setClient, oidcClientConfig } = useClient();
+  if (oidcClientConfig === null) {
+    const login = useInteractiveLogin(client);
+    const onSubmitLoginForm = useCallback(
+      async (e: FormEvent<HTMLFormElement>): Promise<void> => {
+        e.preventDefault();
+        setLoading(true);
 
-      if (!homeserver || !usernameRef.current || !passwordRef.current) {
-        setError(Error("Login parameters are undefined"));
-        setLoading(false);
-        return;
-      }
+        if (!homeserver) {
+          setError(Error("Login parameters are undefined"));
+          setLoading(false);
+          return;
+        }
 
-      login(homeserver, usernameRef.current.value, passwordRef.current.value)
-        .then(async ([client, session]) => {
+        try {
+          const [client, session] = await login(homeserver, usernameRef.current?.value ?? "", passwordRef.current?.value ?? "");
           if (!setClient) {
             return;
           }
@@ -66,20 +71,84 @@ export const LoginPage: FC = () => {
             await navigate("/");
           }
           PosthogAnalytics.instance.eventLogin.track();
-        })
-        .catch((error) => {
+        } catch (error: any) {
           setError(error);
           setLoading(false);
-        });
-    },
-    [login, location, navigate, homeserver, setClient],
-  );
-  // we need to limit the length of the homserver name to not cover the whole loginview input with the string.
-  let shortendHomeserverName = Config.defaultServerName()?.slice(0, 25);
-  shortendHomeserverName =
-    shortendHomeserverName?.length !== Config.defaultServerName()?.length
-      ? shortendHomeserverName + "..."
-      : shortendHomeserverName;
+        }
+      },
+      [login, location, navigate, homeserver, setClient],
+    );
+    // we need to limit the length of the homserver name to not cover the whole loginview input with the string.
+    let shortendHomeserverName = Config.defaultServerName()?.slice(0, 25);
+    shortendHomeserverName =
+      shortendHomeserverName?.length !== Config.defaultServerName()?.length
+        ? shortendHomeserverName + "..."
+        : shortendHomeserverName;
+    node = (
+      <form onSubmit={onSubmitLoginForm}>
+        <FieldRow>
+          <InputField
+            type="text"
+            ref={usernameRef}
+            placeholder={t("common.username")}
+            label={t("common.username")}
+            autoCorrect="off"
+            autoCapitalize="none"
+            prefix="@"
+            suffix={`:${shortendHomeserverName}`}
+            data-testid="login_username"
+          />
+        </FieldRow>
+        <FieldRow>
+          <InputField
+            type="password"
+            ref={passwordRef}
+            placeholder={t("common.password")}
+            label={t("common.password")}
+            data-testid="login_password"
+          />
+        </FieldRow>
+        {error && (
+          <FieldRow>
+            <ErrorMessage error={error} />
+          </FieldRow>
+        )}
+        <FieldRow>
+          <Button
+            type="submit"
+            disabled={loading}
+            data-testid="login_login"
+          >
+            {loading ? t("logging_in") : t("login_title")}
+          </Button>
+        </FieldRow>
+      </form>
+    );
+  } else if (oidcClientConfig !== undefined) {
+    if (!homeserver) {
+      setError(Error("No homeserver is configured"));
+      setLoading(false);
+      return;
+    }
+
+    node = <Button
+      kind="primary"
+      onClick={async () => {
+        // TODO: get the clientId at the same time as doing OIDC discovery
+        const clientId = await getOidcClientId(oidcClientConfig);
+        await startOidcLogin(
+          oidcClientConfig,
+          clientId,
+          homeserver,
+        );
+      }}
+    >
+      {t("room_auth_view_continue_button") /* TODO: make a dedicated word for this */}
+    </Button>;
+  } else {
+    return <LoadingPage />;
+  }
+
   return (
     <>
       <div className={styles.container}>
@@ -89,44 +158,7 @@ export const LoginPage: FC = () => {
 
             <h2>{t("log_in")}</h2>
             <h4>{t("login_subheading")}</h4>
-            <form onSubmit={onSubmitLoginForm}>
-              <FieldRow>
-                <InputField
-                  type="text"
-                  ref={usernameRef}
-                  placeholder={t("common.username")}
-                  label={t("common.username")}
-                  autoCorrect="off"
-                  autoCapitalize="none"
-                  prefix="@"
-                  suffix={`:${shortendHomeserverName}`}
-                  data-testid="login_username"
-                />
-              </FieldRow>
-              <FieldRow>
-                <InputField
-                  type="password"
-                  ref={passwordRef}
-                  placeholder={t("common.password")}
-                  label={t("common.password")}
-                  data-testid="login_password"
-                />
-              </FieldRow>
-              {error && (
-                <FieldRow>
-                  <ErrorMessage error={error} />
-                </FieldRow>
-              )}
-              <FieldRow>
-                <Button
-                  type="submit"
-                  disabled={loading}
-                  data-testid="login_login"
-                >
-                  {loading ? t("logging_in") : t("login_title")}
-                </Button>
-              </FieldRow>
-            </form>
+            {node}
           </div>
           <div className={styles.authLinks}>
             <p>{t("login_auth_links_prompt")}</p>

src/auth/OidcRedirectPage.tsx

@@ -0,0 +1,104 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { useState, type FC } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { createClient, type MatrixClient } from "matrix-js-sdk/src/matrix";
+
+import { useClient } from "../ClientContext";
+import { usePageTitle } from "../usePageTitle";
+import { completeOidcLogin } from "../utils/oidc/authorize";
+import { initClient } from "../utils/matrix";
+
+/**
+ * TODO: Yoinked from element-web, so move to SDK if possible
+ * Gets information about the owner of a given access token.
+ * @returns Promise that resolves with whoami response
+ * @throws when whoami request fails
+ */
+async function getUserIdFromAccessToken(
+  accessToken: string,
+  homeserverUrl: string,
+): Promise<ReturnType<MatrixClient["whoami"]>> {
+  try {
+    const client = createClient({
+      baseUrl: homeserverUrl,
+      accessToken: accessToken,
+    });
+
+    return await client.whoami();
+  } catch (error) {
+    throw new Error("Failed to retrieve userId using accessToken");
+  }
+}
+
+export const OidcRedirectPage: FC = async () => {
+  const { t } = useTranslation();
+  // TODO: probably want a new page title
+  usePageTitle(t("login_title"));
+
+  const navigate = useNavigate();
+  const location = useLocation();
+  const [_, setError] = useState<Error>();
+
+  const { setClient } = useClient();
+  if (!setClient) {
+    return;
+  }
+
+  // TODO: make reactive
+  try {
+    const queryParams = new URLSearchParams(location.search);
+    const { accessToken, refreshToken, homeserverUrl, idToken, clientId, issuer } =
+      await completeOidcLogin(queryParams);
+
+    const {
+      user_id: userId,
+      device_id: deviceId,
+    } = await getUserIdFromAccessToken(accessToken, homeserverUrl);
+
+    const session = {
+      user_id: userId,
+      access_token: accessToken,
+      device_id: deviceId!, // TODO: make sure this really is always defined
+      passwordlessUser: false,
+    };
+
+    console.debug(`TODO: use ${refreshToken}`);
+    const client = await initClient(
+      {
+        baseUrl: homeserverUrl,
+        accessToken,
+        userId,
+        deviceId,
+      },
+      false,
+    );
+    setClient(client, session);
+    console.debug(`TODO: use ${clientId}, ${issuer}, ${idToken}`);
+    // persistOidcAuthenticatedSettings(clientId, issuer, idToken);
+
+    const locationState = location.state;
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    if (locationState && locationState.from) {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      await navigate(locationState.from);
+    } else {
+      await navigate("/");
+    }
+  } catch (error: any) {
+    setError(error);
+    return;
+  }
+
+  return (
+    <></>
+  );
+}

src/config/ConfigOptions.ts

@@ -1,5 +1,5 @@
 /*
-Copyright 2022-2024 New Vector Ltd.
+Copyright 2022-2025 New Vector Ltd.
 
 SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
@@ -151,6 +151,23 @@ export interface ConfigOptions {
      */
     membership_event_expiry_ms?: number;
   };
+
+  /**
+   * Configuration for OIDC issuers where a static client_id has been issued for the app.
+   * Otherwise dynamic client registration is attempted.
+   */
+  oidc_static_clients?: {
+    [issuer: string]: { client_id: string };
+  };
+
+  oidc_metadata?: {
+    client_name?: string;
+    client_uri?: string;
+    logo_uri?: string;
+    tos_uri?: string;
+    policy_uri?: string;
+    contacts?: string[];
+  }
 }
 
 // Overrides members from ConfigOptions that are always provided by the

src/livekit/useECConnectionState.test.tsx

@@ -94,7 +94,7 @@ describe("Leaking connection prevention", () => {
   test("Should cancel pending connections when the component is unmounted", async () => {
     const connectCall = vi.fn();
     const pendingConnection = Promise.withResolvers<void>();
-    // let pendingDisconnection = Promise.withResolvers<void>()
+    // let pendingDisconnection = defer<void>()
     const disconnectMock = vi.fn();
 
     const mockRoom = {
@@ -142,7 +142,7 @@ describe("Leaking connection prevention", () => {
   test("Should cancel about to open but not yet opened connection", async () => {
     const createTracksCall = vi.fn();
     const pendingCreateTrack = Promise.withResolvers<void>();
-    // let pendingDisconnection = Promise.withResolvers<void>()
+    // let pendingDisconnection = defer<void>()
     const disconnectMock = vi.fn();
     const connectMock = vi.fn();
 

src/room/CallEventAudioRenderer.test.tsx

@@ -19,7 +19,10 @@ import { act } from "react";
 import { type CallMembership } from "matrix-js-sdk/lib/matrixrtc";
 
 import { mockRtcMembership } from "../utils/test";
-import { CallEventAudioRenderer } from "./CallEventAudioRenderer";
+import {
+  CallEventAudioRenderer,
+  MAX_PARTICIPANT_COUNT_FOR_SOUND,
+} from "./CallEventAudioRenderer";
 import { useAudioContext } from "../useAudioContext";
 import { prefetchSounds } from "../soundUtils";
 import { getBasicCallViewModelEnvironment } from "../utils/test-viewmodel";
@@ -30,7 +33,6 @@ import {
   local,
   localRtcMember,
 } from "../utils/test-fixtures";
-import { MAX_PARTICIPANT_COUNT_FOR_SOUND } from "../state/CallViewModel";
 
 vitest.mock("../useAudioContext");
 vitest.mock("../soundUtils");
@@ -54,8 +56,6 @@ beforeEach(() => {
   playSound = vitest.fn();
   (useAudioContext as MockedFunction<typeof useAudioContext>).mockReturnValue({
     playSound,
-    playSoundLooping: vitest.fn(),
-    soundDuration: {},
   });
 });
 
@@ -107,20 +107,6 @@ test("plays a sound when a user leaves", () => {
   expect(playSound).toBeCalledWith("left");
 });
 
-test("does not play a sound before the call is successful", () => {
-  const { vm, rtcMemberships$ } = getBasicCallViewModelEnvironment(
-    [local, alice],
-    [localRtcMember],
-    { waitForCallPickup: true },
-  );
-  render(<CallEventAudioRenderer vm={vm} />);
-
-  act(() => {
-    rtcMemberships$.next([localRtcMember]);
-  });
-  expect(playSound).not.toBeCalledWith("left");
-});
-
 test("plays no sound when the participant list is more than the maximum size", () => {
   const mockRtcMemberships: CallMembership[] = [localRtcMember];
   for (let i = 0; i < MAX_PARTICIPANT_COUNT_FOR_SOUND; i++) {
@@ -172,7 +158,6 @@ test("should not play a sound when a hand raise is retracted", () => {
   ]);
   render(<CallEventAudioRenderer vm={vm} />);
 
-  playSound.mockClear();
   act(() => {
     handRaisedSubject$.next({
       ["foo"]: {
@@ -187,7 +172,7 @@ test("should not play a sound when a hand raise is retracted", () => {
       },
     });
   });
-  expect(playSound).toHaveBeenCalledExactlyOnceWith("raiseHand");
+  expect(playSound).toHaveBeenCalledTimes(2);
   act(() => {
     handRaisedSubject$.next({
       ["foo"]: {
@@ -197,5 +182,5 @@ test("should not play a sound when a hand raise is retracted", () => {
       },
     });
   });
-  expect(playSound).toHaveBeenCalledExactlyOnceWith("raiseHand");
+  expect(playSound).toHaveBeenCalledTimes(2);
 });

src/room/CallEventAudioRenderer.tsx

@@ -6,6 +6,7 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { type ReactNode, useEffect } from "react";
+import { filter, interval, throttle } from "rxjs";
 
 import { type CallViewModel } from "../state/CallViewModel";
 import joinCallSoundMp3 from "../sound/join_call.mp3";
@@ -16,14 +17,15 @@ import handSoundOgg from "../sound/raise_hand.ogg";
 import handSoundMp3 from "../sound/raise_hand.mp3";
 import screenShareStartedOgg from "../sound/screen_share_started.ogg";
 import screenShareStartedMp3 from "../sound/screen_share_started.mp3";
-import declineMp3 from "../sound/call_declined.mp3?url";
-import declineOgg from "../sound/call_declined.ogg?url";
-import timeoutMp3 from "../sound/call_timeout.mp3?url";
-import timeoutOgg from "../sound/call_timeout.ogg?url";
 import { useAudioContext } from "../useAudioContext";
 import { prefetchSounds } from "../soundUtils";
 import { useLatest } from "../useLatest";
 
+// Do not play any sounds if the participant count has exceeded this
+// number.
+export const MAX_PARTICIPANT_COUNT_FOR_SOUND = 8;
+export const THROTTLE_SOUND_EFFECT_MS = 500;
+
 export const callEventAudioSounds = prefetchSounds({
   join: {
     mp3: joinCallSoundMp3,
@@ -41,18 +43,8 @@ export const callEventAudioSounds = prefetchSounds({
     mp3: screenShareStartedMp3,
     ogg: screenShareStartedOgg,
   },
-  decline: {
-    mp3: declineMp3,
-    ogg: declineOgg,
-  },
-  timeout: {
-    mp3: timeoutMp3,
-    ogg: timeoutOgg,
-  },
 });
 
-export type CallEventSounds = keyof Awaited<typeof callEventAudioSounds>;
-
 export function CallEventAudioRenderer({
   vm,
   muted,
@@ -68,18 +60,37 @@ export function CallEventAudioRenderer({
   const audioEngineRef = useLatest(audioEngineCtx);
 
   useEffect(() => {
-    const joinSub = vm.joinSoundEffect$.subscribe(
-      () => void audioEngineRef.current?.playSound("join"),
-    );
-    const leftSub = vm.leaveSoundEffect$.subscribe(
-      () => void audioEngineRef.current?.playSound("left"),
-    );
-    const handRaisedSub = vm.newHandRaised$.subscribe(
-      () => void audioEngineRef.current?.playSound("raiseHand"),
-    );
-    const screenshareSub = vm.newScreenShare$.subscribe(
-      () => void audioEngineRef.current?.playSound("screenshareStarted"),
-    );
+    const joinSub = vm.participantChanges$
+      .pipe(
+        filter(
+          ({ joined, ids }) =>
+            ids.length <= MAX_PARTICIPANT_COUNT_FOR_SOUND && joined.length > 0,
+        ),
+        throttle(() => interval(THROTTLE_SOUND_EFFECT_MS)),
+      )
+      .subscribe(() => {
+        void audioEngineRef.current?.playSound("join");
+      });
+
+    const leftSub = vm.participantChanges$
+      .pipe(
+        filter(
+          ({ ids, left }) =>
+            ids.length <= MAX_PARTICIPANT_COUNT_FOR_SOUND && left.length > 0,
+        ),
+        throttle(() => interval(THROTTLE_SOUND_EFFECT_MS)),
+      )
+      .subscribe(() => {
+        void audioEngineRef.current?.playSound("left");
+      });
+
+    const handRaisedSub = vm.newHandRaised$.subscribe(() => {
+      void audioEngineRef.current?.playSound("raiseHand");
+    });
+
+    const screenshareSub = vm.newScreenShare$.subscribe(() => {
+      void audioEngineRef.current?.playSound("screenshareStarted");
+    });
 
     return (): void => {
       joinSub.unsubscribe();

src/room/GroupCallErrorBoundary.test.tsx

@@ -132,10 +132,9 @@ test("ConnectionLostError: Action handling should reset error state", async () =
   const WrapComponent = (): ReactNode => {
     const [failState, setFailState] = useState(true);
     const reconnectCallback = useCallback(
-      async (action: CallErrorRecoveryAction) => {
+      (action: CallErrorRecoveryAction) => {
         reconnectCallbackSpy(action);
         setFailState(false);
-        return Promise.resolve();
       },
       [setFailState],
     );

src/room/GroupCallErrorBoundary.tsx

@@ -36,9 +36,7 @@ import { type WidgetHelpers } from "../widget.ts";
 
 export type CallErrorRecoveryAction = "reconnect"; // | "retry" ;
 
-export type RecoveryActionHandler = (
-  action: CallErrorRecoveryAction,
-) => Promise<void>;
+export type RecoveryActionHandler = (action: CallErrorRecoveryAction) => void;
 
 interface ErrorPageProps {
   error: ElementCallError;
@@ -73,7 +71,7 @@ const ErrorPage: FC<ErrorPageProps> = ({
   if (error instanceof ConnectionLostError) {
     actions.push({
       label: t("call_ended_view.reconnect_button"),
-      onClick: () => void recoveryActionHandler("reconnect"),
+      onClick: () => recoveryActionHandler("reconnect"),
     });
   }
 
@@ -133,9 +131,9 @@ export const GroupCallErrorBoundary = ({
           widget={widget ?? null}
           error={callError}
           resetError={resetError}
-          recoveryActionHandler={async (action: CallErrorRecoveryAction) => {
-            await recoveryActionHandler(action);
+          recoveryActionHandler={(action: CallErrorRecoveryAction) => {
             resetError();
+            recoveryActionHandler(action);
           }}
         />
       );

src/room/GroupCallView.test.tsx

@@ -12,14 +12,10 @@ import {
   onTestFinished,
   test,
   vi,
-  vitest,
 } from "vitest";
-import { render, waitFor, screen, act } from "@testing-library/react";
+import { render, waitFor, screen } from "@testing-library/react";
 import { type MatrixClient, JoinRule, type RoomState } from "matrix-js-sdk";
-import {
-  MatrixRTCSessionEvent,
-  type MatrixRTCSession,
-} from "matrix-js-sdk/lib/matrixrtc";
+import { type MatrixRTCSession } from "matrix-js-sdk/lib/matrixrtc";
 import { BrowserRouter } from "react-router-dom";
 import userEvent from "@testing-library/user-event";
 import { type RelationsContainer } from "matrix-js-sdk/lib/models/relations-container";
@@ -98,15 +94,13 @@ beforeEach(() => {
   playSound = vi.fn();
   (useAudioContext as MockedFunction<typeof useAudioContext>).mockReturnValue({
     playSound,
-    playSoundLooping: vi.fn(),
-    soundDuration: {},
   });
   // A trivial implementation of Active call to ensure we are testing GroupCallView exclusively here.
   (ActiveCall as MockedFunction<typeof ActiveCall>).mockImplementation(
     ({ onLeave }) => {
       return (
         <div>
-          <button onClick={() => onLeave("user")}>Leave</button>
+          <button onClick={() => onLeave()}>Leave</button>
         </div>
       );
     },
@@ -212,8 +206,6 @@ test("GroupCallView plays a leave sound synchronously in widget mode", async ()
     );
   (useAudioContext as MockedFunction<typeof useAudioContext>).mockReturnValue({
     playSound,
-    playSoundLooping: vitest.fn(),
-    soundDuration: {},
   });
 
   const { getByText, rtcSession } = createGroupCallView(
@@ -266,19 +258,3 @@ test("GroupCallView shows errors that occur during joining", async () => {
   await user.click(screen.getByRole("button", { name: "Join call" }));
   screen.getByText("Call is not supported");
 });
-
-test("user can reconnect after a membership manager error", async () => {
-  const user = userEvent.setup();
-  const { rtcSession } = createGroupCallView(null, true);
-  await act(() =>
-    rtcSession.emit(MatrixRTCSessionEvent.MembershipManagerError, undefined),
-  );
-  // XXX: Wrapping the following click in act() shouldn't be necessary (the
-  // async state update should be processed automatically by the waitFor call),
-  // and yet here we are.
-  await act(async () =>
-    user.click(screen.getByRole("button", { name: "Reconnect" })),
-  );
-  // In-call controls should be visible again
-  await waitFor(() => screen.getByRole("button", { name: "Leave" }));
-});

src/room/GroupCallView.tsx

@@ -50,13 +50,10 @@ import { useRoomAvatar } from "./useRoomAvatar";
 import { useRoomName } from "./useRoomName";
 import { useJoinRule } from "./useJoinRule";
 import { InviteModal } from "./InviteModal";
-import { HeaderStyle, type UrlParams, useUrlParams } from "../UrlParams";
+import { HeaderStyle, useUrlParams } from "../UrlParams";
 import { E2eeType } from "../e2ee/e2eeType";
 import { useAudioContext } from "../useAudioContext";
-import {
-  callEventAudioSounds,
-  type CallEventSounds,
-} from "./CallEventAudioRenderer";
+import { callEventAudioSounds } from "./CallEventAudioRenderer";
 import { useLatest } from "../useLatest";
 import { usePageTitle } from "../usePageTitle";
 import {
@@ -86,8 +83,8 @@ interface Props {
   client: MatrixClient;
   isPasswordlessUser: boolean;
   confineToRoom: boolean;
-  preload: UrlParams["preload"];
-  skipLobby: UrlParams["skipLobby"];
+  preload: boolean;
+  skipLobby: boolean;
   header: HeaderStyle;
   rtcSession: MatrixRTCSession;
   isJoined: boolean;
@@ -279,28 +276,34 @@ export const GroupCallView: FC<Props> = ({
     };
 
     if (skipLobby) {
-      if (widget && preload) {
-        // In preload mode without lobby we wait for a join action before entering
-        const onJoin = (ev: CustomEvent<IWidgetApiRequest>): void => {
+      if (widget) {
+        if (preload) {
+          // In preload mode without lobby we wait for a join action before entering
+          const onJoin = (ev: CustomEvent<IWidgetApiRequest>): void => {
+            (async (): Promise<void> => {
+              await defaultDeviceSetup(
+                ev.detail.data as unknown as JoinCallData,
+              );
+              await enterRTCSessionOrError(rtcSession);
+              widget.api.transport.reply(ev.detail, {});
+            })().catch((e) => {
+              logger.error("Error joining RTC session", e);
+            });
+          };
+          widget.lazyActions.on(ElementWidgetActions.JoinCall, onJoin);
+          return (): void => {
+            widget.lazyActions.off(ElementWidgetActions.JoinCall, onJoin);
+          };
+        } else {
+          // No lobby and no preload: we enter the rtc session right away
           (async (): Promise<void> => {
-            await defaultDeviceSetup(ev.detail.data as unknown as JoinCallData);
             await enterRTCSessionOrError(rtcSession);
-            widget.api.transport.reply(ev.detail, {});
           })().catch((e) => {
-            logger.error("Error joining RTC session on preload", e);
+            logger.error("Error joining RTC session", e);
           });
-        };
-        widget.lazyActions.on(ElementWidgetActions.JoinCall, onJoin);
-        return (): void => {
-          widget.lazyActions.off(ElementWidgetActions.JoinCall, onJoin);
-        };
+        }
       } else {
-        // No lobby and no preload: we enter the rtc session right away
-        (async (): Promise<void> => {
-          await enterRTCSessionOrError(rtcSession);
-        })().catch((e) => {
-          logger.error("Error joining RTC session immediately", e);
-        });
+        void enterRTCSessionOrError(rtcSession);
       }
     }
   }, [
@@ -320,11 +323,8 @@ export const GroupCallView: FC<Props> = ({
   const navigate = useNavigate();
 
   const onLeave = useCallback(
-    (
-      cause: "user" | "error" = "user",
-      playSound: CallEventSounds = "left",
-    ): void => {
-      const audioPromise = leaveSoundContext.current?.playSound(playSound);
+    (cause: "user" | "error" = "user"): void => {
+      const audioPromise = leaveSoundContext.current?.playSound("left");
       // In embedded/widget mode the iFrame will be killed right after the call ended prohibiting the posthog event from getting sent,
       // therefore we want the event to be sent instantly without getting queued/batched.
       const sendInstantly = !!widget;
@@ -453,6 +453,7 @@ export const GroupCallView: FC<Props> = ({
           matrixInfo={matrixInfo}
           rtcSession={rtcSession as MatrixRTCSession}
           matrixRoom={room}
+          participantCount={participantCount}
           onLeave={onLeave}
           header={header}
           muteStates={muteStates}
@@ -494,7 +495,6 @@ export const GroupCallView: FC<Props> = ({
     // Left in widget mode:
     body = returnToLobby ? lobbyView : null;
   } else if (preload || skipLobby) {
-    // The RTC session is not joined to yet (`isJoined`), but enterRTCSessionOrError should have been called.
     body = null;
   } else {
     body = lobbyView;
@@ -503,11 +503,10 @@ export const GroupCallView: FC<Props> = ({
   return (
     <GroupCallErrorBoundary
       widget={widget}
-      recoveryActionHandler={async (action) => {
-        setExternalError(null);
+      recoveryActionHandler={(action) => {
         if (action == "reconnect") {
           setLeft(false);
-          await enterRTCSessionOrError(rtcSession).catch((e) => {
+          enterRTCSessionOrError(rtcSession).catch((e) => {
             logger.error("Error re-entering RTC session", e);
           });
         }

src/room/InCallView.module.css

@@ -108,6 +108,13 @@ Please see LICENSE in the repository root for full details.
 }
 
 @media (max-width: 370px) {
+  .raiseHand {
+    display: none;
+  }
+}
+
+@media (max-width: 340px) {
+  .invite,
   .shareScreen {
     display: none;
   }
@@ -119,13 +126,6 @@ Please see LICENSE in the repository root for full details.
   }
 }
 
-@media (max-width: 320px) {
-  .invite,
-  .raiseHand {
-    display: none;
-  }
-}
-
 @media (max-height: 400px) {
   .footer {
     padding-block: var(--cpd-space-4x);

src/room/InCallView.test.tsx

@@ -17,7 +17,7 @@ import { act, render, type RenderResult } from "@testing-library/react";
 import { type MatrixClient, JoinRule, type RoomState } from "matrix-js-sdk";
 import { type MatrixRTCSession } from "matrix-js-sdk/lib/matrixrtc";
 import { type RelationsContainer } from "matrix-js-sdk/lib/models/relations-container";
-import { type LocalParticipant } from "livekit-client";
+import { ConnectionState, type LocalParticipant } from "livekit-client";
 import { of } from "rxjs";
 import { BrowserRouter } from "react-router-dom";
 import { TooltipProvider } from "@vector-im/compound-web";
@@ -177,9 +177,11 @@ function createInCallView(): RenderResult & {
                 }}
                 matrixRoom={room}
                 livekitRoom={livekitRoom}
+                participantCount={0}
                 onLeave={function (): void {
                   throw new Error("Function not implemented.");
                 }}
+                connState={ConnectionState.Connected}
                 onShareClick={null}
               />
             </RoomContext>

src/room/InCallView.tsx

@@ -25,11 +25,7 @@ import useMeasure from "react-use-measure";
 import { type MatrixRTCSession } from "matrix-js-sdk/lib/matrixrtc";
 import classNames from "classnames";
 import { BehaviorSubject, map } from "rxjs";
-import {
-  useObservable,
-  useObservableEagerState,
-  useSubscription,
-} from "observable-hooks";
+import { useObservable, useSubscription } from "observable-hooks";
 import { logger } from "matrix-js-sdk/lib/logger";
 import { RoomAndToDeviceEvents } from "matrix-js-sdk/lib/matrixrtc/RoomAndToDeviceKeyTransport";
 import {
@@ -54,7 +50,6 @@ import { type HeaderStyle, useUrlParams } from "../UrlParams";
 import { useCallViewKeyboardShortcuts } from "../useCallViewKeyboardShortcuts";
 import { ElementWidgetActions, widget } from "../widget";
 import styles from "./InCallView.module.css";
-import overlayStyles from "../Overlay.module.css";
 import { GridTile } from "../tile/GridTile";
 import { type OTelGroupCallMembership } from "../otel/OTelGroupCallMembership";
 import { SettingsModal, defaultSettingsTab } from "../settings/SettingsModal";
@@ -67,6 +62,7 @@ import { type MuteStates } from "./MuteStates";
 import { type MatrixInfo } from "./VideoPreview";
 import { InviteButton } from "../button/InviteButton";
 import { LayoutToggle } from "./LayoutToggle";
+import { type ECConnectionState } from "../livekit/useECConnectionState";
 import { useOpenIDSFU } from "../livekit/openIDSFU";
 import {
   CallViewModel,
@@ -98,10 +94,7 @@ import {
 } from "../reactions/useReactionsSender";
 import { ReactionsAudioRenderer } from "./ReactionAudioRenderer";
 import { ReactionsOverlay } from "./ReactionsOverlay";
-import {
-  CallEventAudioRenderer,
-  type CallEventSounds,
-} from "./CallEventAudioRenderer";
+import { CallEventAudioRenderer } from "./CallEventAudioRenderer";
 import {
   debugTileLayout as debugTileLayoutSetting,
   useExperimentalToDeviceTransport as useExperimentalToDeviceTransportSetting,
@@ -119,12 +112,6 @@ import { EarpieceOverlay } from "./EarpieceOverlay.tsx";
 import { useAppBarHidden, useAppBarSecondaryButton } from "../AppBar.tsx";
 import { useBehavior } from "../useBehavior.ts";
 import { Toast } from "../Toast.tsx";
-import { Avatar, Size as AvatarSize } from "../Avatar";
-import waitingStyles from "./WaitingForJoin.module.css";
-import { prefetchSounds } from "../soundUtils";
-import { useAudioContext } from "../useAudioContext";
-import ringtoneMp3 from "../sound/ringtone.mp3?url";
-import ringtoneOgg from "../sound/ringtone.ogg?url";
 
 const canScreenshare = "getDisplayMedia" in (navigator.mediaDevices ?? {});
 
@@ -171,8 +158,7 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
     };
   }, [livekitRoom]);
 
-  const { autoLeaveWhenOthersLeft, sendNotificationType, waitForCallPickup } =
-    useUrlParams();
+  const { autoLeaveWhenOthersLeft } = useUrlParams();
 
   useEffect(() => {
     if (livekitRoom !== undefined) {
@@ -185,8 +171,6 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
         {
           encryptionSystem: props.e2eeSystem,
           autoLeaveWhenOthersLeft,
-          waitForCallPickup:
-            waitForCallPickup && sendNotificationType === "ring",
         },
         connStateObservable$,
         reactionsReader.raisedHands$,
@@ -206,8 +190,6 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
     props.e2eeSystem,
     connStateObservable$,
     autoLeaveWhenOthersLeft,
-    sendNotificationType,
-    waitForCallPickup,
   ]);
 
   if (livekitRoom === undefined || vm === null) return null;
@@ -215,7 +197,12 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
   return (
     <RoomContext value={livekitRoom}>
       <ReactionsSenderProvider vm={vm} rtcSession={props.rtcSession}>
-        <InCallView {...props} vm={vm} livekitRoom={livekitRoom} />
+        <InCallView
+          {...props}
+          vm={vm}
+          livekitRoom={livekitRoom}
+          connState={connState}
+        />
       </ReactionsSenderProvider>
     </RoomContext>
   );
@@ -229,10 +216,12 @@ export interface InCallViewProps {
   matrixRoom: MatrixRoom;
   livekitRoom: LivekitRoom;
   muteStates: MuteStates;
+  participantCount: number;
   /** Function to call when the user explicitly ends the call */
-  onLeave: (cause: "user", soundFile?: CallEventSounds) => void;
+  onLeave: () => void;
   header: HeaderStyle;
   otelGroupCallMembership?: OTelGroupCallMembership;
+  connState: ECConnectionState;
   onShareClick: (() => void) | null;
 }
 
@@ -244,8 +233,10 @@ export const InCallView: FC<InCallViewProps> = ({
   matrixRoom,
   livekitRoom,
   muteStates,
+  participantCount,
   onLeave,
   header: headerStyle,
+  connState,
   onShareClick,
 }) => {
   const { t } = useTranslation();
@@ -253,11 +244,10 @@ export const InCallView: FC<InCallViewProps> = ({
     useReactionsSender();
 
   useWakeLock();
-  const connectionState = useObservableEagerState(vm.livekitConnectionState$);
 
   // annoyingly we don't get the disconnection reason this way,
   // only by listening for the emitted event
-  if (connectionState === ConnectionState.Disconnected)
+  if (connState === ConnectionState.Disconnected)
     throw new ConnectionLostError();
 
   const containerRef1 = useRef<HTMLDivElement | null>(null);
@@ -272,21 +262,6 @@ export const InCallView: FC<InCallViewProps> = ({
   });
 
   const muteAllAudio = useBehavior(muteAllAudio$);
-  // Call pickup state and display names are needed for waiting overlay/sounds
-  const callPickupState = useBehavior(vm.callPickupState$);
-
-  // Preload a waiting and decline sounds
-  const pickupPhaseSoundCache = useInitial(async () => {
-    return prefetchSounds({
-      waiting: { mp3: ringtoneMp3, ogg: ringtoneOgg },
-    });
-  });
-
-  const pickupPhaseAudio = useAudioContext({
-    sounds: pickupPhaseSoundCache,
-    latencyHint: "interactive",
-    muted: muteAllAudio,
-  });
 
   // This seems like it might be enough logic to use move it into the call view model?
   const [didFallbackToRoomKey, setDidFallbackToRoomKey] = useState(false);
@@ -337,7 +312,6 @@ export const InCallView: FC<InCallViewProps> = ({
     () => void toggleRaisedHand(),
   );
 
-  const participantCount = useBehavior(vm.participantCount$);
   const reconnecting = useBehavior(vm.reconnecting$);
   const windowMode = useBehavior(vm.windowMode$);
   const layout = useBehavior(vm.layout$);
@@ -348,90 +322,7 @@ export const InCallView: FC<InCallViewProps> = ({
   const showFooter = useBehavior(vm.showFooter$);
   const earpieceMode = useBehavior(vm.earpieceMode$);
   const audioOutputSwitcher = useBehavior(vm.audioOutputSwitcher$);
-  useSubscription(vm.autoLeave$, () => onLeave("user"));
-
-  // We need to set the proper timings on the animation based upon the sound length.
-  const ringDuration = pickupPhaseAudio?.soundDuration["waiting"] ?? 1;
-  useEffect((): (() => void) => {
-    // The CSS animation includes the delay, so we must double the length of the sound.
-    window.document.body.style.setProperty(
-      "--call-ring-duration-s",
-      `${ringDuration * 2}s`,
-    );
-    window.document.body.style.setProperty(
-      "--call-ring-delay-s",
-      `${ringDuration}s`,
-    );
-    // Remove properties when we unload.
-    return () => {
-      window.document.body.style.removeProperty("--call-ring-duration-s");
-      window.document.body.style.removeProperty("--call-ring-delay-s");
-    };
-  }, [pickupPhaseAudio?.soundDuration, ringDuration]);
-
-  // When we enter timeout or decline we will leave the call.
-  useEffect((): void | (() => void) => {
-    if (callPickupState === "timeout") {
-      onLeave("user", "timeout");
-    }
-    if (callPickupState === "decline") {
-      onLeave("user", "decline");
-    }
-  }, [callPickupState, onLeave, pickupPhaseAudio]);
-
-  // When waiting for pickup, loop a waiting sound
-  useEffect((): void | (() => void) => {
-    if (callPickupState !== "ringing" || !pickupPhaseAudio) return;
-    const endSound = pickupPhaseAudio.playSoundLooping("waiting", ringDuration);
-    return () => {
-      void endSound().catch((e) => {
-        logger.error("Failed to stop ringing sound", e);
-      });
-    };
-  }, [callPickupState, pickupPhaseAudio, ringDuration]);
-
-  // Waiting UI overlay
-  const waitingOverlay: JSX.Element | null = useMemo(() => {
-    // No overlay if not in ringing state
-    if (callPickupState !== "ringing") return null;
-
-    // Use room state for other participants data (the one that we likely want to reach)
-    const roomOthers = [
-      ...matrixRoom.getMembersWithMembership("join"),
-      ...matrixRoom.getMembersWithMembership("invite"),
-    ].filter((m) => m.userId !== client.getUserId());
-    // Yield if there are not other members in the room.
-    if (roomOthers.length === 0) return null;
-
-    const otherMember = roomOthers.length > 0 ? roomOthers[0] : undefined;
-    const isOneOnOne = roomOthers.length === 1 && otherMember;
-    const text = isOneOnOne
-      ? `Waiting for ${otherMember.name ?? otherMember.userId} to join…`
-      : "Waiting for other participants…";
-    const avatarMxc = isOneOnOne
-      ? (otherMember.getMxcAvatarUrl?.() ?? undefined)
-      : (matrixRoom.getMxcAvatarUrl() ?? undefined);
-
-    return (
-      <div className={classNames(overlayStyles.bg, waitingStyles.overlay)}>
-        <div
-          className={classNames(overlayStyles.content, waitingStyles.content)}
-        >
-          <div className={waitingStyles.pulse}>
-            <Avatar
-              id={isOneOnOne ? otherMember.userId : matrixRoom.roomId}
-              name={isOneOnOne ? otherMember.name : matrixRoom.name}
-              src={avatarMxc}
-              size={AvatarSize.XL}
-            />
-          </div>
-          <Text size="md" className={waitingStyles.text}>
-            {text}
-          </Text>
-        </div>
-      </div>
-    );
-  }, [callPickupState, client, matrixRoom]);
+  useSubscription(vm.autoLeaveWhenOthersLeft$, onLeave);
 
   // Ideally we could detect taps by listening for click events and checking
   // that the pointerType of the event is "touch", but this isn't yet supported
@@ -828,7 +719,7 @@ export const InCallView: FC<InCallViewProps> = ({
     <EndCallButton
       key="end_call"
       onClick={function (): void {
-        onLeave("user");
+        onLeave();
       }}
       onTouchEnd={onControlsTouchEnd}
       data-testid="incall_leave"
@@ -911,7 +802,6 @@ export const InCallView: FC<InCallViewProps> = ({
         onBackToVideoPressed={audioOutputSwitcher?.switch}
       />
       <ReactionsOverlay vm={vm} />
-      {waitingOverlay}
       {footer}
       {layout.type !== "pip" && (
         <>

src/room/ReactionAudioRenderer.test.tsx

@@ -69,8 +69,6 @@ beforeEach(() => {
   playSound = vitest.fn();
   (useAudioContext as MockedFunction<typeof useAudioContext>).mockReturnValue({
     playSound,
-    playSoundLooping: vitest.fn(),
-    soundDuration: {},
   });
 });
 

src/room/WaitingForJoin.module.css

@@ -1,61 +0,0 @@
-.overlay {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  pointer-events: none;
-}
-
-.content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 16px;
-}
-
-.pulse {
-  position: relative;
-  height: 90px;
-}
-
-.pulse::before {
-  content: "";
-  position: absolute;
-  inset: -12px;
-  border-radius: 9999px;
-  border: 12px solid rgba(255, 255, 255, 0.6);
-  animation: pulse var(--call-ring-duration-s) ease-out infinite;
-  animation-delay: 1s;
-  opacity: 0;
-}
-
-.text {
-  color: var(--cpd-color-text-on-solid-primary);
-}
-
-@keyframes pulse {
-  0% {
-    transform: scale(0.95);
-    opacity: 0.7;
-    transform: scale(0);
-    opacity: 1;
-  }
-  35% {
-    transform: scale(1.15);
-    opacity: 0.15;
-  }
-  50% {
-    transform: scale(1.2);
-    opacity: 0;
-  }
-  50.01% {
-    transform: scale(0);
-  }
-  85% {
-    transform: scale(0);
-  }
-  100% {
-    transform: scale(0);
-  }
-}

src/room/__snapshots__/InCallView.test.tsx.snap

@@ -49,34 +49,6 @@ exports[`InCallView > rendering > renders 1`] = `
               </svg>
             </span>
           </div>
-          <div
-            class="participantsLine"
-          >
-            <svg
-              aria-label="Participants"
-              fill="currentColor"
-              height="20"
-              viewBox="0 0 24 24"
-              width="20"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M9.175 13.825Q10.35 15 12 15t2.825-1.175T16 11t-1.175-2.825T12 7 9.175 8.175 8 11t1.175 2.825m4.237-1.412A1.93 1.93 0 0 1 12 13q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 11q0-.825.588-1.412A1.93 1.93 0 0 1 12 9q.825 0 1.412.588Q14 10.175 14 11t-.588 1.412"
-              />
-              <path
-                d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10m-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0"
-              />
-              <path
-                d="M16.23 18.792a13 13 0 0 0-1.455-.455 11.6 11.6 0 0 0-5.55 0q-.73.18-1.455.455a8 8 0 0 1-1.729-1.454q1.336-.618 2.709-.95A13.8 13.8 0 0 1 12 16q1.65 0 3.25.387 1.373.333 2.709.95a8 8 0 0 1-1.73 1.455"
-              />
-            </svg>
-            <span
-              class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41"
-              data-testid="roomHeader_participants_count"
-            >
-              2
-            </span>
-          </div>
         </div>
       </div>
       <div

src/settings/useSubmitRageshake.test.tsx

@@ -75,6 +75,7 @@ function renderWithMockClient(
     <ClientContextProvider
       value={{
         state: "valid",
+        oidcClientConfig: null,
         disconnected: false,
         supportedFeatures: {
           reactions: true,

src/state/CallViewModel.test.ts

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { test, vi, onTestFinished, it, describe } from "vitest";
+import { test, vi, onTestFinished, it } from "vitest";
 import EventEmitter from "events";
 import {
   BehaviorSubject,
@@ -18,16 +18,7 @@ import {
   of,
   switchMap,
 } from "rxjs";
-import {
-  ClientEvent,
-  SyncState,
-  type MatrixClient,
-  RoomEvent as MatrixRoomEvent,
-  MatrixEvent,
-  type IRoomTimelineData,
-  EventType,
-  type IEvent,
-} from "matrix-js-sdk";
+import { ClientEvent, SyncState, type MatrixClient } from "matrix-js-sdk";
 import {
   ConnectionState,
   type LocalParticipant,
@@ -41,9 +32,6 @@ import {
   Status,
   type CallMembership,
   type MatrixRTCSession,
-  type IRTCNotificationContent,
-  type ICallNotifyContent,
-  MatrixRTCSessionEvent,
 } from "matrix-js-sdk/lib/matrixrtc";
 import { deepCompare } from "matrix-js-sdk/lib/utils";
 
@@ -246,23 +234,6 @@ function summarizeLayout$(l$: Observable<Layout>): Observable<LayoutSummary> {
   );
 }
 
-function mockRingEvent(
-  eventId: string,
-  lifetimeMs: number | undefined,
-  sender = local.userId,
-): { event_id: string } & IRTCNotificationContent {
-  return {
-    event_id: eventId,
-    ...(lifetimeMs === undefined ? {} : { lifetime: lifetimeMs }),
-    notification_type: "ring",
-    sender,
-  } as unknown as { event_id: string } & IRTCNotificationContent;
-}
-
-// The app doesn't really care about the content of these legacy events, we just
-// need a value to fill in for them when emitting notifications
-const mockLegacyRingEvent = {} as { event_id: string } & ICallNotifyContent;
-
 interface CallViewModelInputs {
   remoteParticipants$: Behavior<RemoteParticipant[]>;
   rtcMembers$: Behavior<Partial<CallMembership>[]>;
@@ -337,7 +308,7 @@ function withCallViewModel(
 
   const roomEventSelectorSpy = vi
     .spyOn(ComponentsCore, "roomEventSelector")
-    .mockImplementation((_room, _eventType) => of());
+    .mockImplementation((room, eventType) => of());
 
   const livekitRoom = mockLivekitRoom(
     { localParticipant },
@@ -1097,9 +1068,9 @@ it("should rank raised hands above video feeds and below speakers and presenters
 });
 
 function nooneEverThere$<T>(
-  behavior: (marbles: string, values: Record<string, T[]>) => Behavior<T[]>,
-): Behavior<T[]> {
-  return behavior("a-b-c-d", {
+  hot: (marbles: string, values: Record<string, T[]>) => Observable<T[]>,
+): Observable<T[]> {
+  return hot("a-b-c-d", {
     a: [], // Start empty
     b: [], // Alice joins
     c: [], // Alice still there
@@ -1108,12 +1079,12 @@ function nooneEverThere$<T>(
 }
 
 function participantJoinLeave$(
-  behavior: (
+  hot: (
     marbles: string,
     values: Record<string, RemoteParticipant[]>,
-  ) => Behavior<RemoteParticipant[]>,
-): Behavior<RemoteParticipant[]> {
-  return behavior("a-b-c-d", {
+  ) => Observable<RemoteParticipant[]>,
+): Observable<RemoteParticipant[]> {
+  return hot("a-b-c-d", {
     a: [], // Start empty
     b: [aliceParticipant], // Alice joins
     c: [aliceParticipant], // Alice still there
@@ -1122,12 +1093,12 @@ function participantJoinLeave$(
 }
 
 function rtcMemberJoinLeave$(
-  behavior: (
+  hot: (
     marbles: string,
     values: Record<string, CallMembership[]>,
-  ) => Behavior<CallMembership[]>,
-): Behavior<CallMembership[]> {
-  return behavior("a-b-c-d", {
+  ) => Observable<CallMembership[]>,
+): Observable<CallMembership[]> {
+  return hot("a-b-c-d", {
     a: [localRtcMember], // Start empty
     b: [localRtcMember, aliceRtcMember], // Alice joins
     c: [localRtcMember, aliceRtcMember], // Alice still there
@@ -1135,15 +1106,47 @@ function rtcMemberJoinLeave$(
   });
 }
 
-test("autoLeave$ emits only when autoLeaveWhenOthersLeft option is enabled", () => {
-  withTestScheduler(({ behavior, expectObservable }) => {
+test("allOthersLeft$ emits only when someone joined and then all others left", () => {
+  withTestScheduler(({ hot, expectObservable, scope }) => {
+    // Test scenario 1: No one ever joins - should only emit initial false and never emit again
+    withCallViewModel(
+      { remoteParticipants$: scope.behavior(nooneEverThere$(hot), []) },
+      (vm) => {
+        expectObservable(vm.allOthersLeft$).toBe("n------", { n: false });
+      },
+    );
+  });
+});
+
+test("allOthersLeft$ emits true when someone joined and then all others left", () => {
+  withTestScheduler(({ hot, expectObservable, scope }) => {
     withCallViewModel(
       {
-        remoteParticipants$: participantJoinLeave$(behavior),
-        rtcMembers$: rtcMemberJoinLeave$(behavior),
+        remoteParticipants$: scope.behavior(participantJoinLeave$(hot), []),
+        rtcMembers$: scope.behavior(rtcMemberJoinLeave$(hot), []),
       },
       (vm) => {
-        expectObservable(vm.autoLeave$).toBe("------(e|)", { e: undefined });
+        expectObservable(vm.allOthersLeft$).toBe(
+          "n-----u", // false initially, then at frame 6: true then false emissions in same frame
+          { n: false, u: true }, // map(() => {})
+        );
+      },
+    );
+  });
+});
+
+test("autoLeaveWhenOthersLeft$ emits only when autoLeaveWhenOthersLeft option is enabled", () => {
+  withTestScheduler(({ hot, expectObservable, scope }) => {
+    withCallViewModel(
+      {
+        remoteParticipants$: scope.behavior(participantJoinLeave$(hot), []),
+        rtcMembers$: scope.behavior(rtcMemberJoinLeave$(hot), []),
+      },
+      (vm) => {
+        expectObservable(vm.autoLeaveWhenOthersLeft$).toBe(
+          "------e", // false initially, then at frame 6: true then false emissions in same frame
+          { e: undefined },
+        );
       },
       {
         autoLeaveWhenOthersLeft: true,
@@ -1153,15 +1156,15 @@ test("autoLeave$ emits only when autoLeaveWhenOthersLeft option is enabled", ()
   });
 });
 
-test("autoLeave$ never emits autoLeaveWhenOthersLeft option is enabled but no-one is there", () => {
-  withTestScheduler(({ behavior, expectObservable }) => {
+test("autoLeaveWhenOthersLeft$ never emits autoLeaveWhenOthersLeft option is enabled but no-one is there", () => {
+  withTestScheduler(({ hot, expectObservable, scope }) => {
     withCallViewModel(
       {
-        remoteParticipants$: nooneEverThere$(behavior),
-        rtcMembers$: nooneEverThere$(behavior),
+        remoteParticipants$: scope.behavior(nooneEverThere$(hot), []),
+        rtcMembers$: scope.behavior(nooneEverThere$(hot), []),
       },
       (vm) => {
-        expectObservable(vm.autoLeave$).toBe("-");
+        expectObservable(vm.autoLeaveWhenOthersLeft$).toBe("-------");
       },
       {
         autoLeaveWhenOthersLeft: true,
@@ -1171,15 +1174,15 @@ test("autoLeave$ never emits autoLeaveWhenOthersLeft option is enabled but no-on
   });
 });
 
-test("autoLeave$ doesn't emit when autoLeaveWhenOthersLeft option is disabled and all others left", () => {
-  withTestScheduler(({ behavior, expectObservable }) => {
+test("autoLeaveWhenOthersLeft$ doesn't emit when autoLeaveWhenOthersLeft option is disabled and all others left", () => {
+  withTestScheduler(({ hot, expectObservable, scope }) => {
     withCallViewModel(
       {
-        remoteParticipants$: participantJoinLeave$(behavior),
-        rtcMembers$: rtcMemberJoinLeave$(behavior),
+        remoteParticipants$: scope.behavior(participantJoinLeave$(hot), []),
+        rtcMembers$: scope.behavior(rtcMemberJoinLeave$(hot), []),
       },
       (vm) => {
-        expectObservable(vm.autoLeave$).toBe("-");
+        expectObservable(vm.autoLeaveWhenOthersLeft$).toBe("-------");
       },
       {
         autoLeaveWhenOthersLeft: false,
@@ -1189,25 +1192,31 @@ test("autoLeave$ doesn't emit when autoLeaveWhenOthersLeft option is disabled an
   });
 });
 
-test("autoLeave$ emits when autoLeaveWhenOthersLeft option is enabled and all others left", () => {
-  withTestScheduler(({ behavior, expectObservable }) => {
+test("autoLeaveWhenOthersLeft$ doesn't emits when autoLeaveWhenOthersLeft option is enabled and all others left", () => {
+  withTestScheduler(({ hot, expectObservable, scope }) => {
     withCallViewModel(
       {
-        remoteParticipants$: behavior("a-b-c-d", {
-          a: [], // Alone
-          b: [aliceParticipant], // Alice joins
-          c: [aliceParticipant],
-          d: [], // Local joins with a second device
-        }),
-        rtcMembers$: behavior("a-b-c-d", {
-          a: [localRtcMember], // Start empty
-          b: [localRtcMember, aliceRtcMember], // Alice joins
-          c: [localRtcMember, aliceRtcMember, localRtcMemberDevice2], // Alice still there
-          d: [localRtcMember, localRtcMemberDevice2], // The second Alice leaves
-        }),
+        remoteParticipants$: scope.behavior(
+          hot("a-b-c-d", {
+            a: [], // Alone
+            b: [aliceParticipant], // Alice joins
+            c: [aliceParticipant],
+            d: [], // Local joins with a second device
+          }),
+          [], //Alice leaves
+        ),
+        rtcMembers$: scope.behavior(
+          hot("a-b-c-d", {
+            a: [localRtcMember], // Start empty
+            b: [localRtcMember, aliceRtcMember], // Alice joins
+            c: [localRtcMember, aliceRtcMember, localRtcMemberDevice2], // Alice still there
+            d: [localRtcMember, localRtcMemberDevice2], // The second Alice leaves
+          }),
+          [],
+        ),
       },
       (vm) => {
-        expectObservable(vm.autoLeave$).toBe("------(e|)", {
+        expectObservable(vm.autoLeaveWhenOthersLeft$).toBe("------e", {
           e: undefined,
         });
       },
@@ -1219,366 +1228,6 @@ test("autoLeave$ emits when autoLeaveWhenOthersLeft option is enabled and all ot
   });
 });
 
-describe("waitForCallPickup$", () => {
-  test("unknown -> ringing -> timeout when notified and nobody joins", () => {
-    withTestScheduler(({ schedule, expectObservable }) => {
-      // No one ever joins (only local user)
-      withCallViewModel(
-        { remoteParticipants$: constant([]) },
-        (vm, rtcSession) => {
-          // Fire a call notification at 10ms with lifetime 30ms
-          schedule("          10ms r", {
-            r: () => {
-              rtcSession.emit(
-                MatrixRTCSessionEvent.DidSendCallNotification,
-                mockRingEvent("$notif1", 30),
-                mockLegacyRingEvent,
-              );
-            },
-          });
-
-          expectObservable(vm.callPickupState$).toBe("a 9ms b 29ms c", {
-            a: "unknown",
-            b: "ringing",
-            c: "timeout",
-          });
-        },
-        {
-          waitForCallPickup: true,
-          encryptionSystem: { kind: E2eeType.PER_PARTICIPANT },
-        },
-      );
-    });
-  });
-
-  test("ringing -> success if someone joins before timeout", () => {
-    withTestScheduler(({ behavior, schedule, expectObservable }) => {
-      // Someone joins at 20ms (both LiveKit participant and MatrixRTC member)
-      withCallViewModel(
-        {
-          remoteParticipants$: behavior("a 19ms b", {
-            a: [],
-            b: [aliceParticipant],
-          }),
-          rtcMembers$: behavior("a 19ms b", {
-            a: [localRtcMember],
-            b: [localRtcMember, aliceRtcMember],
-          }),
-        },
-        (vm, rtcSession) => {
-          // Notify at 5ms so we enter ringing, then success at 20ms
-          schedule("          5ms r", {
-            r: () => {
-              rtcSession.emit(
-                MatrixRTCSessionEvent.DidSendCallNotification,
-                mockRingEvent("$notif2", 100),
-                mockLegacyRingEvent,
-              );
-            },
-          });
-
-          expectObservable(vm.callPickupState$).toBe("a 4ms b 14ms c", {
-            a: "unknown",
-            b: "ringing",
-            c: "success",
-          });
-        },
-        {
-          waitForCallPickup: true,
-          encryptionSystem: { kind: E2eeType.PER_PARTICIPANT },
-        },
-      );
-    });
-  });
-
-  test("ringing -> unknown if we get disconnected", () => {
-    withTestScheduler(({ behavior, schedule, expectObservable }) => {
-      const connectionState$ = new BehaviorSubject(ConnectionState.Connected);
-      // Someone joins at 20ms (both LiveKit participant and MatrixRTC member)
-      withCallViewModel(
-        {
-          remoteParticipants$: behavior("a 19ms b", {
-            a: [],
-            b: [aliceParticipant],
-          }),
-          rtcMembers$: behavior("a 19ms b", {
-            a: [localRtcMember],
-            b: [localRtcMember, aliceRtcMember],
-          }),
-          connectionState$,
-        },
-        (vm, rtcSession) => {
-          // Notify at 5ms so we enter ringing, then get disconnected 5ms later
-          schedule("          5ms r 5ms d", {
-            r: () => {
-              rtcSession.emit(
-                MatrixRTCSessionEvent.DidSendCallNotification,
-                mockRingEvent("$notif2", 100),
-                mockLegacyRingEvent,
-              );
-            },
-            d: () => {
-              connectionState$.next(ConnectionState.Disconnected);
-            },
-          });
-
-          expectObservable(vm.callPickupState$).toBe("a 4ms b 5ms c", {
-            a: "unknown",
-            b: "ringing",
-            c: "unknown",
-          });
-        },
-        {
-          waitForCallPickup: true,
-          encryptionSystem: { kind: E2eeType.PER_PARTICIPANT },
-        },
-      );
-    });
-  });
-
-  test("success when someone joins before we notify", () => {
-    withTestScheduler(({ behavior, schedule, expectObservable }) => {
-      // Join at 10ms, notify later at 20ms (state should stay success)
-      withCallViewModel(
-        {
-          remoteParticipants$: behavior("a 9ms b", {
-            a: [],
-            b: [aliceParticipant],
-          }),
-          rtcMembers$: behavior("a 9ms b", {
-            a: [localRtcMember],
-            b: [localRtcMember, aliceRtcMember],
-          }),
-        },
-        (vm, rtcSession) => {
-          schedule("          20ms r", {
-            r: () => {
-              rtcSession.emit(
-                MatrixRTCSessionEvent.DidSendCallNotification,
-                mockRingEvent("$notif3", 50),
-                mockLegacyRingEvent,
-              );
-            },
-          });
-          expectObservable(vm.callPickupState$).toBe("a 9ms b", {
-            a: "unknown",
-            b: "success",
-          });
-        },
-        {
-          waitForCallPickup: true,
-          encryptionSystem: { kind: E2eeType.PER_PARTICIPANT },
-        },
-      );
-    });
-  });
-
-  test("notify without lifetime -> immediate timeout", () => {
-    withTestScheduler(({ schedule, expectObservable }) => {
-      withCallViewModel(
-        {},
-        (vm, rtcSession) => {
-          schedule("          10ms r", {
-            r: () => {
-              rtcSession.emit(
-                MatrixRTCSessionEvent.DidSendCallNotification,
-                mockRingEvent("$notif4", undefined),
-                mockLegacyRingEvent,
-              );
-            },
-          });
-          expectObservable(vm.callPickupState$).toBe("a 9ms b", {
-            a: "unknown",
-            b: "timeout",
-          });
-        },
-        {
-          waitForCallPickup: true,
-          encryptionSystem: { kind: E2eeType.PER_PARTICIPANT },
-        },
-      );
-    });
-  });
-
-  test("stays null when waitForCallPickup=false", () => {
-    withTestScheduler(({ behavior, schedule, expectObservable }) => {
-      withCallViewModel(
-        {
-          remoteParticipants$: behavior("a--b", {
-            a: [],
-            b: [aliceParticipant],
-          }),
-          rtcMembers$: behavior("a--b", {
-            a: [localRtcMember],
-            b: [localRtcMember, aliceRtcMember],
-          }),
-        },
-        (vm, rtcSession) => {
-          schedule("          5ms r", {
-            r: () => {
-              rtcSession.emit(
-                MatrixRTCSessionEvent.DidSendCallNotification,
-                mockRingEvent("$notif5", 30),
-                mockLegacyRingEvent,
-              );
-            },
-          });
-          expectObservable(vm.callPickupState$).toBe("(n)", {
-            n: null,
-          });
-        },
-        {
-          waitForCallPickup: false,
-          encryptionSystem: { kind: E2eeType.PER_PARTICIPANT },
-        },
-      );
-    });
-  });
-
-  test("decline before timeout window ends -> decline", () => {
-    withTestScheduler(({ schedule, expectObservable }) => {
-      withCallViewModel(
-        {},
-        (vm, rtcSession) => {
-          // Notify at 10ms with 50ms lifetime, decline at 40ms with matching id
-          schedule("          10ms r 29ms d", {
-            r: () => {
-              rtcSession.emit(
-                MatrixRTCSessionEvent.DidSendCallNotification,
-                mockRingEvent("$decl1", 50),
-                mockLegacyRingEvent,
-              );
-            },
-            d: () => {
-              // Emit decline timeline event with id matching the notification
-              rtcSession.room.emit(
-                MatrixRoomEvent.Timeline,
-                new MatrixEvent({
-                  type: EventType.RTCDecline,
-                  content: {
-                    "m.relates_to": {
-                      rel_type: "m.reference",
-                      event_id: "$decl1",
-                    },
-                  },
-                }),
-                rtcSession.room,
-                undefined,
-                false,
-                {} as IRoomTimelineData,
-              );
-            },
-          });
-          expectObservable(vm.callPickupState$).toBe("a 9ms b 29ms e", {
-            a: "unknown",
-            b: "ringing",
-            e: "decline",
-          });
-        },
-        {
-          waitForCallPickup: true,
-          encryptionSystem: { kind: E2eeType.PER_PARTICIPANT },
-        },
-      );
-    });
-  });
-
-  test("decline after timeout window ends -> stays timeout", () => {
-    withTestScheduler(({ schedule, expectObservable }) => {
-      withCallViewModel(
-        {},
-        (vm, rtcSession) => {
-          // Notify at 10ms with 20ms lifetime (timeout at 30ms), decline at 40ms
-          schedule("          10ms r 20ms t 10ms d", {
-            r: () => {
-              rtcSession.emit(
-                MatrixRTCSessionEvent.DidSendCallNotification,
-                mockRingEvent("$decl2", 20),
-                mockLegacyRingEvent,
-              );
-            },
-            t: () => {},
-            d: () => {
-              rtcSession.room.emit(
-                MatrixRoomEvent.Timeline,
-                new MatrixEvent({ event_id: "$decl2", type: "m.rtc.decline" }),
-                rtcSession.room,
-                undefined,
-                false,
-                {} as IRoomTimelineData,
-              );
-            },
-          });
-          expectObservable(vm.callPickupState$).toBe("a 9ms b 19ms c", {
-            a: "unknown",
-            b: "ringing",
-            c: "timeout",
-          });
-        },
-        {
-          waitForCallPickup: true,
-          encryptionSystem: { kind: E2eeType.PER_PARTICIPANT },
-        },
-      );
-    });
-  });
-
-  function testStaysRinging(declineEvent: Partial<IEvent>): void {
-    withTestScheduler(({ schedule, expectObservable }) => {
-      withCallViewModel(
-        {},
-        (vm, rtcSession) => {
-          // Notify at 10ms with id A, decline arrives at 20ms with id B
-          schedule("          10ms r 10ms d", {
-            r: () => {
-              rtcSession.emit(
-                MatrixRTCSessionEvent.DidSendCallNotification,
-                mockRingEvent("$right", 50),
-                mockLegacyRingEvent,
-              );
-            },
-            d: () => {
-              rtcSession.room.emit(
-                MatrixRoomEvent.Timeline,
-                new MatrixEvent(declineEvent),
-                rtcSession.room,
-                undefined,
-                false,
-                {} as IRoomTimelineData,
-              );
-            },
-          });
-          // We assert up to 21ms to see the ringing at 10ms and no change at 20ms
-          expectObservable(vm.callPickupState$, "21ms !").toBe("a 9ms b", {
-            a: "unknown",
-            b: "ringing",
-          });
-        },
-        {
-          waitForCallPickup: true,
-          encryptionSystem: { kind: E2eeType.PER_PARTICIPANT },
-        },
-      );
-    });
-  }
-
-  test("decline with wrong id is ignored (stays ringing)", () => {
-    testStaysRinging({
-      event_id: "$wrong",
-      type: "m.rtc.decline",
-      sender: local.userId,
-    });
-  });
-
-  test("decline with sender being the local user is ignored (stays ringing)", () => {
-    testStaysRinging({
-      event_id: "$right",
-      type: "m.rtc.decline",
-      sender: alice.userId,
-    });
-  });
-});
-
 test("audio output changes when toggling earpiece mode", () => {
   withTestScheduler(({ schedule, expectObservable }) => {
     getUrlParams.mockReturnValue({ controlledAudioDevices: true });

src/state/CallViewModel.ts

@@ -19,9 +19,6 @@ import {
 } from "livekit-client";
 import {
   ClientEvent,
-  type EventTimelineSetHandlerMap,
-  EventType,
-  RoomEvent,
   RoomStateEvent,
   SyncState,
   type Room as MatrixRoom,
@@ -30,33 +27,26 @@ import {
 import {
   BehaviorSubject,
   EMPTY,
-  NEVER,
   type Observable,
   Subject,
   combineLatest,
   concat,
   distinctUntilChanged,
-  endWith,
   filter,
   forkJoin,
   fromEvent,
-  ignoreElements,
   map,
   merge,
   mergeMap,
   of,
-  pairwise,
   race,
   scan,
   skip,
-  skipWhile,
   startWith,
   switchAll,
   switchMap,
   switchScan,
   take,
-  takeUntil,
-  throttleTime,
   timer,
   withLatestFrom,
 } from "rxjs";
@@ -65,7 +55,6 @@ import {
   type CallMembership,
   type MatrixRTCSession,
   MatrixRTCSessionEvent,
-  type MatrixRTCSessionEventHandlerMap,
   MembershipManagerEvent,
   Status,
 } from "matrix-js-sdk/lib/matrixrtc";
@@ -116,27 +105,16 @@ import { observeSpeaker$ } from "./observeSpeaker";
 import { shallowEquals } from "../utils/array";
 import { calculateDisplayName, shouldDisambiguate } from "../utils/displayname";
 import { type MediaDevices } from "./MediaDevices";
-import { constant, type Behavior } from "./Behavior";
+import { type Behavior } from "./Behavior";
 
 export interface CallViewModelOptions {
   encryptionSystem: EncryptionSystem;
   autoLeaveWhenOthersLeft?: boolean;
-  /**
-   * If the call is started in a way where we want it to behave like a telephone usecase
-   * If we sent a notification event, we want the ui to show a ringing state
-   */
-  waitForCallPickup?: boolean;
 }
-
 // How long we wait after a focus switch before showing the real participant
 // list again
 const POST_FOCUS_PARTICIPANT_UPDATE_DELAY_MS = 3000;
 
-// Do not play any sounds if the participant count has exceeded this
-// number.
-export const MAX_PARTICIPANT_COUNT_FOR_SOUND = 8;
-export const THROTTLE_SOUND_EFFECT_MS = 500;
-
 // This is the number of participants that we think constitutes a "small" call
 // on mobile. No spotlight tile should be shown below this threshold.
 const smallMobileCallThreshold = 3;
@@ -577,17 +555,6 @@ export class CallViewModel extends ViewModel {
     )
     .pipe(pauseWhen(this.pretendToBeDisconnected$));
 
-  private readonly memberships$ = this.scope.behavior(
-    fromEvent(
-      this.matrixRTCSession,
-      MatrixRTCSessionEvent.MembershipsChanged,
-    ).pipe(
-      startWith(null),
-      pauseWhen(this.pretendToBeDisconnected$),
-      map(() => this.matrixRTCSession.memberships),
-    ),
-  );
-
   /**
    * Displaynames for each member of the call. This will disambiguate
    * any displaynames that clashes with another member. Only members
@@ -597,17 +564,18 @@ export class CallViewModel extends ViewModel {
   // than on Chrome/Firefox). This means it is important that we multicast the result so that we
   // don't do this work more times than we need to. This is achieved by converting to a behavior:
   public readonly memberDisplaynames$ = this.scope.behavior(
-    // React to call memberships and also display name updates
-    // (calculateDisplayName implicitly depends on the room member data)
-    combineLatest(
-      [
-        this.memberships$,
-        fromEvent(this.matrixRoom, RoomStateEvent.Members).pipe(
-          startWith(null),
-          pauseWhen(this.pretendToBeDisconnected$),
-        ),
-      ],
-      (memberships, _members) => {
+    merge(
+      // Handle call membership changes.
+      fromEvent(
+        this.matrixRTCSession,
+        MatrixRTCSessionEvent.MembershipsChanged,
+      ),
+      // Handle room membership changes (and displayname updates)
+      fromEvent(this.matrixRoom, RoomStateEvent.Members),
+    ).pipe(
+      startWith(null),
+      map(() => {
+        const memberships = this.matrixRTCSession.memberships;
         const displaynameMap = new Map<string, string>();
         const room = this.matrixRoom;
 
@@ -629,7 +597,8 @@ export class CallViewModel extends ViewModel {
           );
         }
         return displaynameMap;
-      },
+      }),
+      pauseWhen(this.pretendToBeDisconnected$),
     ),
   );
 
@@ -659,7 +628,13 @@ export class CallViewModel extends ViewModel {
       this.remoteParticipants$,
       observeParticipantMedia(this.livekitRoom.localParticipant),
       duplicateTiles.value$,
-      this.memberships$,
+      // Also react to changes in the MatrixRTC session list.
+      // The session list will also be update if a room membership changes.
+      // No additional RoomState event listener needs to be set up.
+      fromEvent(
+        this.matrixRTCSession,
+        MatrixRTCSessionEvent.MembershipsChanged,
+      ).pipe(startWith(null), pauseWhen(this.pretendToBeDisconnected$)),
       showNonMemberTiles.value$,
     ]).pipe(
       scan(
@@ -669,7 +644,7 @@ export class CallViewModel extends ViewModel {
             remoteParticipants,
             { participant: localParticipant },
             duplicateTiles,
-            memberships,
+            _membershipsChanged,
             showNonMemberTiles,
           ],
         ) => {
@@ -677,7 +652,7 @@ export class CallViewModel extends ViewModel {
             function* (this: CallViewModel): Iterable<[string, MediaItem]> {
               const room = this.matrixRoom;
               // m.rtc.members are the basis for calculating what is visible in the call
-              for (const rtcMember of memberships) {
+              for (const rtcMember of this.matrixRTCSession.memberships) {
                 const { member, id: livekitParticipantId } =
                   getRoomMemberFromRtcMember(rtcMember, room);
                 const matrixIdentifier = `${rtcMember.sender}:${rtcMember.deviceId}`;
@@ -843,162 +818,77 @@ export class CallViewModel extends ViewModel {
     ),
   );
 
-  public readonly joinSoundEffect$ = this.userMedia$.pipe(
-    pairwise(),
-    filter(
-      ([prev, current]) =>
-        current.length <= MAX_PARTICIPANT_COUNT_FOR_SOUND &&
-        current.length > prev.length,
-    ),
-    map(() => {}),
-    throttleTime(THROTTLE_SOUND_EFFECT_MS),
-  );
-
   /**
-   * The number of participants currently in the call.
+   * This observable tracks the currently connected participants.
    *
+   *  - Each participant has one livekit connection
    *  - Each participant has a corresponding MatrixRTC membership state event
-   *  - There can be multiple participants for one Matrix user if they join from
-   *    multiple devices.
+   *  - There can be multiple participants for one matrix user.
    */
-  public readonly participantCount$ = this.scope.behavior(
-    this.memberships$.pipe(map((ms) => ms.length)),
-  );
-
-  private readonly allOthersLeft$ = this.memberships$.pipe(
-    pairwise(),
-    filter(
-      ([prev, current]) =>
-        current.every((m) => m.sender === this.userId) &&
-        prev.some((m) => m.sender !== this.userId),
+  public readonly participantChanges$ = this.userMedia$.pipe(
+    map((mediaItems) => mediaItems.map((m) => m.id)),
+    scan<string[], { ids: string[]; joined: string[]; left: string[] }>(
+      (prev, ids) => {
+        const left = prev.ids.filter((id) => !ids.includes(id));
+        const joined = ids.filter((id) => !prev.ids.includes(id));
+        return { ids, joined, left };
+      },
+      { ids: [], joined: [], left: [] },
     ),
-    map(() => {}),
-    take(1),
   );
 
-  public readonly autoLeave$ = this.options.autoLeaveWhenOthersLeft
-    ? this.allOthersLeft$
-    : NEVER;
-
   /**
-   * Whenever the RTC session tells us that it intends to ring the remote
-   * participant's devices, this emits an Observable tracking the current state of
-   * that ringing process.
+   * This observable tracks the matrix users that are currently in the call.
+   * There can be just one matrix user with multiple participants (see also participantChanges$)
    */
-  private readonly ring$: Observable<
-    Observable<"ringing" | "timeout" | "decline">
-  > = (
-    fromEvent(
-      this.matrixRTCSession,
-      MatrixRTCSessionEvent.DidSendCallNotification,
-    ) as Observable<
-      Parameters<
-        MatrixRTCSessionEventHandlerMap[MatrixRTCSessionEvent.DidSendCallNotification]
-      >
-    >
-  ).pipe(
-    filter(
-      ([notificationEvent]) => notificationEvent.notification_type === "ring",
-    ),
-    map(([notificationEvent]) => {
-      const lifetimeMs = notificationEvent?.lifetime ?? 0;
-      return concat(
-        lifetimeMs === 0
-          ? // If no lifetime, skip the ring state
-            EMPTY
-          : // Ring until lifetime ms have passed
-            timer(lifetimeMs).pipe(
-              ignoreElements(),
-              startWith("ringing" as const),
-            ),
-        // The notification lifetime has timed out, meaning ringing has likely
-        // stopped on all receiving clients.
-        of("timeout" as const),
-        NEVER,
-      ).pipe(
-        takeUntil(
-          (
-            fromEvent(this.matrixRoom, RoomEvent.Timeline) as Observable<
-              Parameters<EventTimelineSetHandlerMap[RoomEvent.Timeline]>
-            >
-          ).pipe(
-            filter(
-              ([event]) =>
-                event.getType() === EventType.RTCDecline &&
-                event.getRelation()?.rel_type === "m.reference" &&
-                event.getRelation()?.event_id === notificationEvent.event_id &&
-                event.getSender() !== this.userId,
-            ),
-          ),
+  public readonly matrixUserChanges$ = this.userMedia$.pipe(
+    map(
+      (mediaItems) =>
+        new Set(
+          mediaItems
+            .map((m) => m.vm.member?.userId)
+            .filter((id) => id !== undefined),
         ),
-        endWith("decline" as const),
+    ),
+    scan<
+      Set<string>,
+      {
+        userIds: Set<string>;
+        joinedUserIds: Set<string>;
+        leftUserIds: Set<string>;
+      }
+    >(
+      (prevState, userIds) => {
+        const left = new Set(
+          [...prevState.userIds].filter((id) => !userIds.has(id)),
+        );
+        const joined = new Set(
+          [...userIds].filter((id) => !prevState.userIds.has(id)),
+        );
+        return { userIds: userIds, joinedUserIds: joined, leftUserIds: left };
+      },
+      { userIds: new Set(), joinedUserIds: new Set(), leftUserIds: new Set() },
+    ),
+  );
+
+  public readonly allOthersLeft$ = this.matrixUserChanges$.pipe(
+    map(({ userIds, leftUserIds }) => {
+      if (!this.userId) {
+        logger.warn("Could not access user ID to compute allOthersLeft");
+        return false;
+      }
+      return (
+        userIds.size === 1 && userIds.has(this.userId) && leftUserIds.size > 0
       );
     }),
+    startWith(false),
+    distinctUntilChanged(),
   );
 
-  /**
-   * Whether some Matrix user other than ourself is joined to the call.
-   */
-  private readonly someoneElseJoined$ = this.memberships$.pipe(
-    map((ms) => ms.some((m) => m.sender !== this.userId)),
-  );
-
-  /**
-   * The current call pickup state of the call.
-   *  - "unknown": The client has not yet sent the notification event. We don't know if it will because it first needs to send its own membership.
-   *     Then we can conclude if we were the first one to join or not.
-   *     This may also be set if we are disconnected.
-   *  - "ringing": The call is ringing on other devices in this room (This client should give audiovisual feedback that this is happening).
-   *  - "timeout": No-one picked up in the defined time this call should be ringing on others devices.
-   *     The call failed. If desired this can be used as a trigger to exit the call.
-   *  - "success": Someone else joined. The call is in a normal state. No audiovisual feedback.
-   *  - null: EC is configured to never show any waiting for answer state.
-   */
-  public readonly callPickupState$: Behavior<
-    "unknown" | "ringing" | "timeout" | "decline" | "success" | null
-  > = this.options.waitForCallPickup
-    ? this.scope.behavior<
-        "unknown" | "ringing" | "timeout" | "decline" | "success"
-      >(
-        combineLatest([
-          this.livekitConnectionState$,
-          this.someoneElseJoined$,
-        ]).pipe(
-          switchMap(([livekitConnectionState, someoneElseJoined]) => {
-            if (livekitConnectionState === ConnectionState.Disconnected) {
-              // Do not ring until we're connected.
-              return of("unknown" as const);
-            } else if (someoneElseJoined) {
-              return of("success" as const);
-            }
-            // Show the ringing state of the most recent ringing attempt.
-            return this.ring$.pipe(switchAll());
-          }),
-          // The state starts as 'unknown' because we don't know if the RTC
-          // session will actually send a notify event yet. It will only be
-          // known once we send our own membership and see that we were the
-          // first one to join.
-          startWith("unknown" as const),
-        ),
-      )
-    : constant(null);
-
-  public readonly leaveSoundEffect$ = combineLatest([
-    this.callPickupState$,
-    this.userMedia$,
-  ]).pipe(
-    // Until the call is successful, do not play a leave sound.
-    // If callPickupState$ is null, then we always play the sound as it will not conflict with a decline sound.
-    skipWhile(([c]) => c !== null && c !== "success"),
-    map(([, userMedia]) => userMedia),
-    pairwise(),
-    filter(
-      ([prev, current]) =>
-        current.length <= MAX_PARTICIPANT_COUNT_FOR_SOUND &&
-        current.length < prev.length,
-    ),
+  public readonly autoLeaveWhenOthersLeft$ = this.allOthersLeft$.pipe(
+    distinctUntilChanged(),
+    filter((leave) => (leave && this.options.autoLeaveWhenOthersLeft) ?? false),
     map(() => {}),
-    throttleTime(THROTTLE_SOUND_EFFECT_MS),
   );
 
   /**
@@ -1690,7 +1580,7 @@ export class CallViewModel extends ViewModel {
     private readonly livekitRoom: LivekitRoom,
     private readonly mediaDevices: MediaDevices,
     private readonly options: CallViewModelOptions,
-    public readonly livekitConnectionState$: Observable<ECConnectionState>,
+    private readonly livekitConnectionState$: Observable<ECConnectionState>,
     private readonly handsRaisedSubject$: Observable<
       Record<string, RaisedHandInfo>
     >,

src/useAudioContext.tsx

@@ -32,8 +32,6 @@ async function playSound(
   buffer: AudioBuffer,
   volume: number,
   stereoPan: number,
-  delayS = 0,
-  abort?: AbortController,
 ): Promise<void> {
   const gain = ctx.createGain();
   gain.gain.setValueAtTime(volume, 0);
@@ -41,62 +39,13 @@ async function playSound(
   pan.pan.setValueAtTime(stereoPan, 0);
   const src = ctx.createBufferSource();
   src.buffer = buffer;
-  abort?.signal.addEventListener("abort", () => {
-    src.disconnect();
-  });
-  const p = new Promise<void>((r) => src.addEventListener("ended", () => r()));
   src.connect(gain).connect(pan).connect(ctx.destination);
+  const p = new Promise<void>((r) => src.addEventListener("ended", () => r()));
   controls.setPlaybackStarted();
-  src.start(ctx.currentTime + delayS);
+  src.start();
   return p;
 }
 
-/**
- * Play a sound though a given AudioContext, looping until stopped. Will take
- * care of connecting the correct buffer and gating
- * through gain.
- * @param volume The volume to play at.
- * @param ctx The context to play through.
- * @param buffer The buffer to play.
- * @returns A function used to end the sound. This function will return a promise when the sound has stopped.
- */
-function playSoundLooping(
-  ctx: AudioContext,
-  buffer: AudioBuffer,
-  volume: number,
-  stereoPan: number,
-  delayS?: number,
-): () => Promise<void> {
-  if (delayS === 0) {
-    throw Error("Looping sounds must have a delay");
-  }
-
-  // Our audio loop
-  let lastSoundPromise: Promise<void>;
-  let nextSoundPromise: Promise<void>;
-  let ac: AbortController | undefined;
-  void (async (): Promise<void> => {
-    ac = new AbortController();
-    // Play a sound immediately
-    lastSoundPromise = Promise.resolve();
-    do {
-      // Queue up the next sound.
-      nextSoundPromise = playSound(ctx, buffer, volume, stereoPan, delayS, ac);
-      // Await the previous sound.
-      await lastSoundPromise;
-      // Swap the promises over, and loop round to play the next sound.
-      lastSoundPromise = nextSoundPromise;
-    } while (!ac.signal.aborted);
-  })();
-
-  return async () => {
-    ac?.abort();
-    // Wait for sounds to finish.
-    await lastSoundPromise;
-    await nextSoundPromise;
-  };
-}
-
 interface Props<S extends string> {
   /**
    * The sounds to play. If no sounds should be played then
@@ -108,13 +57,8 @@ interface Props<S extends string> {
   muted?: boolean;
 }
 
-interface UseAudioContext<S extends string> {
+interface UseAudioContext<S> {
   playSound(soundName: S): Promise<void>;
-  playSoundLooping(soundName: S, delayS?: number): () => Promise<void>;
-  /**
-   * Map of sound name to duration in seconds.
-   */
-  soundDuration: Record<string, number>;
 }
 
 /**
@@ -202,23 +146,5 @@ export function useAudioContext<S extends string>(
         earpiecePan,
       );
     },
-    playSoundLooping: (name, delayS: number): (() => Promise<void>) => {
-      if (!audioBuffers[name]) {
-        throw Error(`Tried to play a sound that wasn't buffered (${name})`);
-      }
-      return playSoundLooping(
-        audioContext,
-        audioBuffers[name],
-        soundEffectVolume * earpieceVolume,
-        earpiecePan,
-        delayS,
-      );
-    },
-    soundDuration: Object.fromEntries(
-      Object.entries(audioBuffers).map(([k, v]) => [
-        k,
-        (v as AudioBuffer).duration,
-      ]),
-    ),
   };
 }

src/utils/oidc/authorize.ts

@@ -0,0 +1,96 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { completeAuthorizationCodeGrant, generateOidcAuthorizationUrl } from "matrix-js-sdk/src/oidc/authorize";
+import { OidcClientConfig } from "matrix-js-sdk/src/matrix";
+import { secureRandomString } from "matrix-js-sdk/src/randomstring";
+import { type IdTokenClaims } from "oidc-client-ts";
+
+import { getOidcCallbackUrl } from "./callbackUrl";
+import { OidcClientError } from "./error";
+
+/**
+ * TODO: Mostly yoinked from element-web, so move to SDK if possible
+ * 
+ * Start OIDC authorization code flow
+ * Generates auth params, stores them in session storage and
+ * Navigates to configured authorization endpoint
+ * @param delegatedAuthConfig from discovery
+ * @param clientId this client's id as registered with configured issuer
+ * @param homeserverUrl target homeserver
+ * @returns Promise that resolves after we have navigated to auth endpoint
+ */
+export async function startOidcLogin(
+    delegatedAuthConfig: OidcClientConfig,
+    clientId: string,
+    homeserverUrl: string,
+    isRegistration?: boolean,
+): Promise<void> {
+  const redirectUri = getOidcCallbackUrl().href;
+
+  const nonce = secureRandomString(10);
+
+  const prompt = isRegistration ? "create" : undefined;
+
+  const authorizationUrl = await generateOidcAuthorizationUrl({
+    metadata: delegatedAuthConfig,
+    redirectUri,
+    clientId,
+    homeserverUrl,
+    identityServerUrl: undefined,
+    nonce,
+    prompt,
+  });
+
+  window.location.href = authorizationUrl;
+}
+
+// TODO: Mostly yoinked from element-web, so move to SDK if possible
+type CompleteOidcLoginResponse = {
+  // url of the homeserver selected during login
+  homeserverUrl: string;
+  // accessToken gained from OIDC token issuer
+  accessToken: string;
+  // refreshToken gained from OIDC token issuer, when falsy token cannot be refreshed
+  refreshToken?: string;
+  // idToken gained from OIDC token issuer
+  idToken: string;
+  // this client's id as registered with the OIDC issuer
+  clientId: string;
+  // issuer used during authentication
+  issuer: string;
+  // claims of the given access token; used during token refresh to validate new tokens
+  idTokenClaims: IdTokenClaims;
+};
+
+/**
+ * TODO: Mostly yoinked from element-web, so move to SDK if possible
+ * 
+ * Attempt to complete authorization code flow to get an access token
+ * @param queryParams the query-parameters extracted from the real query-string of the starting URI.
+ * @returns Promise that resolves with a CompleteOidcLoginResponse when login was successful
+ * @throws When we failed to get a valid access token
+ */
+export async function completeOidcLogin(queryParams: URLSearchParams): Promise<CompleteOidcLoginResponse> {
+    const code = queryParams.get("code");
+    const state = queryParams.get("state");
+    if (!code || !state) {
+      throw new Error(OidcClientError.InvalidQueryParameters);
+    }
+    const { homeserverUrl, tokenResponse, idTokenClaims, oidcClientSettings } =
+        await completeAuthorizationCodeGrant(code, state);
+
+    return {
+        homeserverUrl,
+        accessToken: tokenResponse.access_token,
+        refreshToken: tokenResponse.refresh_token,
+        idToken: tokenResponse.id_token,
+        clientId: oidcClientSettings.clientId,
+        issuer: oidcClientSettings.issuer,
+        idTokenClaims,
+    };
+}

src/utils/oidc/callbackUrl.ts

@@ -0,0 +1,14 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+/**
+ * The URL to return to after a successful OIDC authentication
+ */
+export function getOidcCallbackUrl(): URL {
+  // TODO: save the path somewhere
+  return new URL("after-login", window.location.origin);
+}

src/utils/oidc/discovery.ts

@@ -0,0 +1,30 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { MatrixClient, MatrixError, OidcClientConfig } from "matrix-js-sdk";
+
+import { Config } from "../../config/Config";
+import { HomeserverMisconfigError } from "../../RichError";
+
+export async function getAuthMetadata(): Promise<OidcClientConfig | null> {
+  const baseUrl = Config.defaultHomeserverUrl(); // TODO: Make this configurable
+  if (!baseUrl) {
+    throw new Error("No homeserver URL configured");
+  }
+  
+  const tempClient = new MatrixClient({ baseUrl });
+  try {
+    return await tempClient.getAuthMetadata();
+  } catch (e) {
+    if (e instanceof MatrixError && e.httpStatus === 404 && e.errcode === "M_UNRECOGNIZED") {
+      // 404 M_UNRECOGNIZED means the server does not support OIDC
+      return null;
+    } else {
+      throw new HomeserverMisconfigError(e instanceof Error ? e.message : undefined);
+    }
+  }
+}

src/utils/oidc/error.ts

@@ -0,0 +1,16 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+/**
+ * TODO: Yoinked from element-web, so move to SDK if possible
+ * 
+ * Errors thrown by EC during OIDC native flow authentication.
+ * Intended to be logged, not read by users.
+ */
+export enum OidcClientError {
+    InvalidQueryParameters = "Invalid query parameters for OIDC native login. `code` and `state` are required.",
+}

src/utils/oidc/isUserRegistrationSupported.ts

@@ -0,0 +1,21 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+// TODO: File yoinked from element-web, so move to SDK if possible
+
+import { type OidcClientConfig } from "matrix-js-sdk/src/matrix";
+
+/**
+ * Check the create prompt is supported by the OP, if so, we can do a registration flow
+ * https://openid.net/specs/openid-connect-prompt-create-1_0.html
+ * @param delegatedAuthConfig config as returned from discovery
+ * @returns whether user registration is supported
+ */
+export function isUserRegistrationSupported(delegatedAuthConfig: OidcClientConfig): boolean {
+    const supportedPrompts = delegatedAuthConfig.prompt_values_supported;
+    return Array.isArray(supportedPrompts) && supportedPrompts?.includes("create");
+}

src/utils/oidc/registerClient.ts

@@ -0,0 +1,62 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { logger } from "matrix-js-sdk/src/logger";
+import { registerOidcClient, type OidcClientConfig } from "matrix-js-sdk";
+
+import { ConfigOptions } from "../../config/ConfigOptions";
+import { Config } from "../../config/Config";
+import { getOidcCallbackUrl } from "./callbackUrl";
+
+/**
+ * TODO: Mostly yoinked from element-web, so move to SDK if possible
+ * 
+ * Get the statically configured clientId for the issuer
+ * @param issuer delegated auth OIDC issuer
+ * @param staticOidcClients static client config from config.json
+ * @returns clientId if found, otherwise undefined
+ */
+function getStaticOidcClientId(
+  issuer: string,
+  staticOidcClients?: ConfigOptions["oidc_static_clients"],
+): string | undefined {
+    // static_oidc_clients are configured with a trailing slash
+    const issuerWithTrailingSlash = issuer.endsWith("/") ? issuer : issuer + "/";
+    return staticOidcClients?.[issuerWithTrailingSlash]?.client_id;
+}
+
+/**
+ * TODO: Mostly yoinked from element-web, so move to SDK if possible
+ * 
+ * Get the statically configured clientId for an OIDC OP
+ * @param delegatedAuthConfig Auth config from OP
+ * @returns resolves with clientId
+ * @throws if no clientId is found
+ */
+export async function getOidcClientId(
+  delegatedAuthConfig: OidcClientConfig,
+): Promise<string> {
+  const config = Config.get();
+  const staticClientId = getStaticOidcClientId(delegatedAuthConfig.issuer, config.oidc_static_clients);
+  if (staticClientId) {
+    logger.debug(`Using static clientId for issuer ${delegatedAuthConfig.issuer}`);
+    return staticClientId;
+  }
+  return await registerOidcClient(
+    delegatedAuthConfig,
+    {
+      clientName: config.oidc_metadata?.client_name ?? "Element Call",
+      clientUri: config.oidc_metadata?.client_uri ?? window.location.origin,
+      logoUri: config.oidc_metadata?.logo_uri,
+      redirectUris: [getOidcCallbackUrl().href],
+      applicationType: "web",
+      contacts: config.oidc_metadata?.contacts,
+      tosUri: config.oidc_metadata?.tos_uri,
+      policyUri: config.oidc_metadata?.policy_uri,
+    },
+  );
+}

src/utils/test-viewmodel.ts

@@ -22,10 +22,7 @@ import {
 } from "matrix-js-sdk";
 
 import { E2eeType } from "../e2ee/e2eeType";
-import {
-  CallViewModel,
-  type CallViewModelOptions,
-} from "../state/CallViewModel";
+import { CallViewModel } from "../state/CallViewModel";
 import {
   mockLivekitRoom,
   mockMatrixRoom,
@@ -125,7 +122,6 @@ export function getBasicRTCSession(
 export function getBasicCallViewModelEnvironment(
   members: RoomMember[],
   initialRtcMemberships: CallMembership[] = [localRtcMember, aliceRtcMember],
-  callViewModelOptions: Partial<CallViewModelOptions> = {},
 ): {
   vm: CallViewModel;
   rtcMemberships$: BehaviorSubject<CallMembership[]>;
@@ -152,7 +148,6 @@ export function getBasicCallViewModelEnvironment(
     mockMediaDevices({}),
     {
       encryptionSystem: { kind: E2eeType.PER_PARTICIPANT },
-      ...callViewModelOptions,
     },
     of(ConnectionState.Connected),
     handRaisedSubject$,

src/utils/test.ts

@@ -38,7 +38,6 @@ import {
   type RoomAndToDeviceEventsHandlerMap,
 } from "matrix-js-sdk/lib/matrixrtc/RoomAndToDeviceKeyTransport";
 import { type TrackReference } from "@livekit/components-core";
-import EventEmitter from "events";
 
 import {
   LocalUserMediaViewModel,
@@ -145,25 +144,26 @@ export function withTestScheduler(
 }
 
 interface EmitterMock<T> {
-  on: (...args: unknown[]) => T;
-  off: (...args: unknown[]) => T;
-  addListener: (...args: unknown[]) => T;
-  removeListener: (...args: unknown[]) => T;
-  emit: (event: string | symbol, ...args: unknown[]) => boolean;
+  on: () => T;
+  off: () => T;
+  addListener: () => T;
+  removeListener: () => T;
 }
 
 export function mockEmitter<T>(): EmitterMock<T> {
-  const ee = new EventEmitter();
   return {
-    on: ee.on.bind(ee) as unknown as (...args: unknown[]) => T,
-    off: ee.off.bind(ee) as unknown as (...args: unknown[]) => T,
-    addListener: ee.addListener.bind(ee) as unknown as (
-      ...args: unknown[]
-    ) => T,
-    removeListener: ee.removeListener.bind(ee) as unknown as (
-      ...args: unknown[]
-    ) => T,
-    emit: ee.emit.bind(ee),
+    on(): T {
+      return this as T;
+    },
+    off(): T {
+      return this as T;
+    },
+    addListener(): T {
+      return this as T;
+    },
+    removeListener(): T {
+      return this as T;
+    },
   };
 }
 

src/widget.ts

@@ -116,7 +116,6 @@ export const widget = ((): WidgetHelpers | null => {
         EventType.Reaction,
         EventType.RoomRedaction,
         ElementCallReactionEventType,
-        EventType.RTCDecline,
       ];
 
       const sendState = [

yarn.lock

@@ -4503,149 +4503,142 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/rollup-android-arm-eabi@npm:4.50.1":
-  version: 4.50.1
-  resolution: "@rollup/rollup-android-arm-eabi@npm:4.50.1"
+"@rollup/rollup-android-arm-eabi@npm:4.41.1":
+  version: 4.41.1
+  resolution: "@rollup/rollup-android-arm-eabi@npm:4.41.1"
   conditions: os=android & cpu=arm
   languageName: node
   linkType: hard
 
-"@rollup/rollup-android-arm64@npm:4.50.1":
-  version: 4.50.1
-  resolution: "@rollup/rollup-android-arm64@npm:4.50.1"
+"@rollup/rollup-android-arm64@npm:4.41.1":
+  version: 4.41.1
+  resolution: "@rollup/rollup-android-arm64@npm:4.41.1"
   conditions: os=android & cpu=arm64
   languageName: node
   linkType: hard
 
-"@rollup/rollup-darwin-arm64@npm:4.50.1":
-  version: 4.50.1
-  resolution: "@rollup/rollup-darwin-arm64@npm:4.50.1"
+"@rollup/rollup-darwin-arm64@npm:4.41.1":
+  version: 4.41.1
+  resolution: "@rollup/rollup-darwin-arm64@npm:4.41.1"
   conditions: os=darwin & cpu=arm64
   languageName: node
   linkType: hard
 
-"@rollup/rollup-darwin-x64@npm:4.50.1":
-  version: 4.50.1
-  resolution: "@rollup/rollup-darwin-x64@npm:4.50.1"
+"@rollup/rollup-darwin-x64@npm:4.41.1":
+  version: 4.41.1
+  resolution: "@rollup/rollup-darwin-x64@npm:4.41.1"
   conditions: os=darwin & cpu=x64
   languageName: node
   linkType: hard
 
-"@rollup/rollup-freebsd-arm64@npm:4.50.1":
-  version: 4.50.1
-  resolution: "@rollup/rollup-freebsd-arm64@npm:4.50.1"
+"@rollup/rollup-freebsd-arm64@npm:4.41.1":
+  version: 4.41.1
+  resolution: "@rollup/rollup-freebsd-arm64@npm:4.41.1"
   conditions: os=freebsd & cpu=arm64
   languageName: node
   linkType: hard
 
-"@rollup/rollup-freebsd-x64@npm:4.50.1":
-  version: 4.50.1
-  resolution: "@rollup/rollup-freebsd-x64@npm:4.50.1"
+"@rollup/rollup-freebsd-x64@npm:4.41.1":
+  version: 4.41.1
+  resolution: "@rollup/rollup-freebsd-x64@npm:4.41.1"
   conditions: os=freebsd & cpu=x64
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-arm-gnueabihf@npm:4.50.1":
-  version: 4.50.1
-  resolution: "@rollup/rollup-linux-arm-gnueabihf@npm:4.50.1"
+"@rollup/rollup-linux-arm-gnueabihf@npm:4.41.1":
+  version: 4.41.1
+  resolution: "@rollup/rollup-linux-arm-gnueabihf@npm:4.41.1"
   conditions: os=linux & cpu=arm & libc=glibc
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-arm-musleabihf@npm:4.50.1":
-  version: 4.50.1
-  resolution: "@rollup/rollup-linux-arm-musleabihf@npm:4.50.1"
+"@rollup/rollup-linux-arm-musleabihf@npm:4.41.1":
+  version: 4.41.1
+  resolution: "@rollup/rollup-linux-arm-musleabihf@npm:4.41.1"
   conditions: os=linux & cpu=arm & libc=musl
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-arm64-gnu@npm:4.50.1":
-  version: 4.50.1
-  resolution: "@rollup/rollup-linux-arm64-gnu@npm:4.50.1"
+"@rollup/rollup-linux-arm64-gnu@npm:4.41.1":
+  version: 4.41.1
+  resolution: "@rollup/rollup-linux-arm64-gnu@npm:4.41.1"
   conditions: os=linux & cpu=arm64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-arm64-musl@npm:4.50.1":
-  version: 4.50.1
-  resolution: "@rollup/rollup-linux-arm64-musl@npm:4.50.1"
+"@rollup/rollup-linux-arm64-musl@npm:4.41.1":
+  version: 4.41.1
+  resolution: "@rollup/rollup-linux-arm64-musl@npm:4.41.1"
   conditions: os=linux & cpu=arm64 & libc=musl
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-loongarch64-gnu@npm:4.50.1":
-  version: 4.50.1
-  resolution: "@rollup/rollup-linux-loongarch64-gnu@npm:4.50.1"
+"@rollup/rollup-linux-loongarch64-gnu@npm:4.41.1":
+  version: 4.41.1
+  resolution: "@rollup/rollup-linux-loongarch64-gnu@npm:4.41.1"
   conditions: os=linux & cpu=loong64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-ppc64-gnu@npm:4.50.1":
-  version: 4.50.1
-  resolution: "@rollup/rollup-linux-ppc64-gnu@npm:4.50.1"
+"@rollup/rollup-linux-powerpc64le-gnu@npm:4.41.1":
+  version: 4.41.1
+  resolution: "@rollup/rollup-linux-powerpc64le-gnu@npm:4.41.1"
   conditions: os=linux & cpu=ppc64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-riscv64-gnu@npm:4.50.1":
-  version: 4.50.1
-  resolution: "@rollup/rollup-linux-riscv64-gnu@npm:4.50.1"
+"@rollup/rollup-linux-riscv64-gnu@npm:4.41.1":
+  version: 4.41.1
+  resolution: "@rollup/rollup-linux-riscv64-gnu@npm:4.41.1"
   conditions: os=linux & cpu=riscv64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-riscv64-musl@npm:4.50.1":
-  version: 4.50.1
-  resolution: "@rollup/rollup-linux-riscv64-musl@npm:4.50.1"
+"@rollup/rollup-linux-riscv64-musl@npm:4.41.1":
+  version: 4.41.1
+  resolution: "@rollup/rollup-linux-riscv64-musl@npm:4.41.1"
   conditions: os=linux & cpu=riscv64 & libc=musl
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-s390x-gnu@npm:4.50.1":
-  version: 4.50.1
-  resolution: "@rollup/rollup-linux-s390x-gnu@npm:4.50.1"
+"@rollup/rollup-linux-s390x-gnu@npm:4.41.1":
+  version: 4.41.1
+  resolution: "@rollup/rollup-linux-s390x-gnu@npm:4.41.1"
   conditions: os=linux & cpu=s390x & libc=glibc
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-x64-gnu@npm:4.50.1":
-  version: 4.50.1
-  resolution: "@rollup/rollup-linux-x64-gnu@npm:4.50.1"
+"@rollup/rollup-linux-x64-gnu@npm:4.41.1":
+  version: 4.41.1
+  resolution: "@rollup/rollup-linux-x64-gnu@npm:4.41.1"
   conditions: os=linux & cpu=x64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-x64-musl@npm:4.50.1":
-  version: 4.50.1
-  resolution: "@rollup/rollup-linux-x64-musl@npm:4.50.1"
+"@rollup/rollup-linux-x64-musl@npm:4.41.1":
+  version: 4.41.1
+  resolution: "@rollup/rollup-linux-x64-musl@npm:4.41.1"
   conditions: os=linux & cpu=x64 & libc=musl
   languageName: node
   linkType: hard
 
-"@rollup/rollup-openharmony-arm64@npm:4.50.1":
-  version: 4.50.1
-  resolution: "@rollup/rollup-openharmony-arm64@npm:4.50.1"
-  conditions: os=openharmony & cpu=arm64
-  languageName: node
-  linkType: hard
-
-"@rollup/rollup-win32-arm64-msvc@npm:4.50.1":
-  version: 4.50.1
-  resolution: "@rollup/rollup-win32-arm64-msvc@npm:4.50.1"
+"@rollup/rollup-win32-arm64-msvc@npm:4.41.1":
+  version: 4.41.1
+  resolution: "@rollup/rollup-win32-arm64-msvc@npm:4.41.1"
   conditions: os=win32 & cpu=arm64
   languageName: node
   linkType: hard
 
-"@rollup/rollup-win32-ia32-msvc@npm:4.50.1":
-  version: 4.50.1
-  resolution: "@rollup/rollup-win32-ia32-msvc@npm:4.50.1"
+"@rollup/rollup-win32-ia32-msvc@npm:4.41.1":
+  version: 4.41.1
+  resolution: "@rollup/rollup-win32-ia32-msvc@npm:4.41.1"
   conditions: os=win32 & cpu=ia32
   languageName: node
   linkType: hard
 
-"@rollup/rollup-win32-x64-msvc@npm:4.50.1":
-  version: 4.50.1
-  resolution: "@rollup/rollup-win32-x64-msvc@npm:4.50.1"
+"@rollup/rollup-win32-x64-msvc@npm:4.41.1":
+  version: 4.41.1
+  resolution: "@rollup/rollup-win32-x64-msvc@npm:4.41.1"
   conditions: os=win32 & cpu=x64
   languageName: node
   linkType: hard
@@ -5155,10 +5148,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/estree@npm:1.0.8":
-  version: 1.0.8
-  resolution: "@types/estree@npm:1.0.8"
-  checksum: 10c0/39d34d1afaa338ab9763f37ad6066e3f349444f9052b9676a7cc0252ef9485a41c6d81c9c4e0d26e9077993354edf25efc853f3224dd4b447175ef62bdcc86a5
+"@types/estree@npm:1.0.7":
+  version: 1.0.7
+  resolution: "@types/estree@npm:1.0.7"
+  checksum: 10c0/be815254316882f7c40847336cd484c3bc1c3e34f710d197160d455dc9d6d050ffbf4c3bc76585dba86f737f020ab20bdb137ebe0e9116b0c86c7c0342221b8c
   languageName: node
   linkType: hard
 
@@ -7565,7 +7558,7 @@ __metadata:
     typescript-eslint-language-service: "npm:^5.0.5"
     unique-names-generator: "npm:^4.6.0"
     vaul: "npm:^1.0.0"
-    vite: "npm:^7.0.0"
+    vite: "npm:^6.0.0"
     vite-plugin-generate-file: "npm:^0.3.0"
     vite-plugin-html: "npm:^3.2.2"
     vite-plugin-svgr: "npm:^4.0.0"
@@ -8490,18 +8483,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fdir@npm:^6.5.0":
-  version: 6.5.0
-  resolution: "fdir@npm:6.5.0"
-  peerDependencies:
-    picomatch: ^3 || ^4
-  peerDependenciesMeta:
-    picomatch:
-      optional: true
-  checksum: 10c0/e345083c4306b3aed6cb8ec551e26c36bab5c511e99ea4576a16750ddc8d3240e63826cc624f5ae17ad4dc82e68a253213b60d556c11bfad064b7607847ed07f
-  languageName: node
-  linkType: hard
-
 "fflate@npm:^0.4.8":
   version: 0.4.8
   resolution: "fflate@npm:0.4.8"
@@ -10299,7 +10280,7 @@ __metadata:
 
 "matrix-js-sdk@github:matrix-org/matrix-js-sdk#head=develop":
   version: 37.13.0
-  resolution: "matrix-js-sdk@https://github.com/matrix-org/matrix-js-sdk.git#commit=2f1d654f14be8dd03896e9e76f12017b6f9eec1c"
+  resolution: "matrix-js-sdk@https://github.com/matrix-org/matrix-js-sdk.git#commit=3a33c658bbcb8ce8791ec066db899f2571f5c52f"
   dependencies:
     "@babel/runtime": "npm:^7.12.5"
     "@matrix-org/matrix-sdk-crypto-wasm": "npm:^15.1.0"
@@ -10315,7 +10296,7 @@ __metadata:
     sdp-transform: "npm:^2.14.1"
     unhomoglyph: "npm:^1.0.6"
     uuid: "npm:11"
-  checksum: 10c0/ecd019c677c272c5598617dcde407dbe4b1b11460863b2a577e33f3fd8732c9d9073ec0221b471ec1eb24e2839eec20728db7f92c9348be83126547286e50805
+  checksum: 10c0/1db0d39cfbe4f1c69c8acda0ea7580a4819fc47a7d4bff057382e33e72d9a610f8c03043a6c00bc647dfdc2815aa643c69d25022fb759342a92b77e1841524f1
   languageName: node
   linkType: hard
 
@@ -11116,13 +11097,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"picomatch@npm:^4.0.3":
-  version: 4.0.3
-  resolution: "picomatch@npm:4.0.3"
-  checksum: 10c0/9582c951e95eebee5434f59e426cddd228a7b97a0161a375aed4be244bd3fe8e3a31b846808ea14ef2c8a2527a6eeab7b3946a67d5979e81694654f939473ae2
-  languageName: node
-  linkType: hard
-
 "playwright-core@npm:1.54.1":
   version: 1.54.1
   resolution: "playwright-core@npm:1.54.1"
@@ -11549,7 +11523,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss@npm:^8.4.41, postcss@npm:^8.5.6":
+"postcss@npm:^8.4.41, postcss@npm:^8.5.3":
   version: 8.5.6
   resolution: "postcss@npm:8.5.6"
   dependencies:
@@ -12277,32 +12251,31 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rollup@npm:^4.43.0":
-  version: 4.50.1
-  resolution: "rollup@npm:4.50.1"
+"rollup@npm:^4.34.9, rollup@npm:^4.40.0":
+  version: 4.41.1
+  resolution: "rollup@npm:4.41.1"
   dependencies:
-    "@rollup/rollup-android-arm-eabi": "npm:4.50.1"
-    "@rollup/rollup-android-arm64": "npm:4.50.1"
-    "@rollup/rollup-darwin-arm64": "npm:4.50.1"
-    "@rollup/rollup-darwin-x64": "npm:4.50.1"
-    "@rollup/rollup-freebsd-arm64": "npm:4.50.1"
-    "@rollup/rollup-freebsd-x64": "npm:4.50.1"
-    "@rollup/rollup-linux-arm-gnueabihf": "npm:4.50.1"
-    "@rollup/rollup-linux-arm-musleabihf": "npm:4.50.1"
-    "@rollup/rollup-linux-arm64-gnu": "npm:4.50.1"
-    "@rollup/rollup-linux-arm64-musl": "npm:4.50.1"
-    "@rollup/rollup-linux-loongarch64-gnu": "npm:4.50.1"
-    "@rollup/rollup-linux-ppc64-gnu": "npm:4.50.1"
-    "@rollup/rollup-linux-riscv64-gnu": "npm:4.50.1"
-    "@rollup/rollup-linux-riscv64-musl": "npm:4.50.1"
-    "@rollup/rollup-linux-s390x-gnu": "npm:4.50.1"
-    "@rollup/rollup-linux-x64-gnu": "npm:4.50.1"
-    "@rollup/rollup-linux-x64-musl": "npm:4.50.1"
-    "@rollup/rollup-openharmony-arm64": "npm:4.50.1"
-    "@rollup/rollup-win32-arm64-msvc": "npm:4.50.1"
-    "@rollup/rollup-win32-ia32-msvc": "npm:4.50.1"
-    "@rollup/rollup-win32-x64-msvc": "npm:4.50.1"
-    "@types/estree": "npm:1.0.8"
+    "@rollup/rollup-android-arm-eabi": "npm:4.41.1"
+    "@rollup/rollup-android-arm64": "npm:4.41.1"
+    "@rollup/rollup-darwin-arm64": "npm:4.41.1"
+    "@rollup/rollup-darwin-x64": "npm:4.41.1"
+    "@rollup/rollup-freebsd-arm64": "npm:4.41.1"
+    "@rollup/rollup-freebsd-x64": "npm:4.41.1"
+    "@rollup/rollup-linux-arm-gnueabihf": "npm:4.41.1"
+    "@rollup/rollup-linux-arm-musleabihf": "npm:4.41.1"
+    "@rollup/rollup-linux-arm64-gnu": "npm:4.41.1"
+    "@rollup/rollup-linux-arm64-musl": "npm:4.41.1"
+    "@rollup/rollup-linux-loongarch64-gnu": "npm:4.41.1"
+    "@rollup/rollup-linux-powerpc64le-gnu": "npm:4.41.1"
+    "@rollup/rollup-linux-riscv64-gnu": "npm:4.41.1"
+    "@rollup/rollup-linux-riscv64-musl": "npm:4.41.1"
+    "@rollup/rollup-linux-s390x-gnu": "npm:4.41.1"
+    "@rollup/rollup-linux-x64-gnu": "npm:4.41.1"
+    "@rollup/rollup-linux-x64-musl": "npm:4.41.1"
+    "@rollup/rollup-win32-arm64-msvc": "npm:4.41.1"
+    "@rollup/rollup-win32-ia32-msvc": "npm:4.41.1"
+    "@rollup/rollup-win32-x64-msvc": "npm:4.41.1"
+    "@types/estree": "npm:1.0.7"
     fsevents: "npm:~2.3.2"
   dependenciesMeta:
     "@rollup/rollup-android-arm-eabi":
@@ -12327,7 +12300,7 @@ __metadata:
       optional: true
     "@rollup/rollup-linux-loongarch64-gnu":
       optional: true
-    "@rollup/rollup-linux-ppc64-gnu":
+    "@rollup/rollup-linux-powerpc64le-gnu":
       optional: true
     "@rollup/rollup-linux-riscv64-gnu":
       optional: true
@@ -12339,8 +12312,6 @@ __metadata:
       optional: true
     "@rollup/rollup-linux-x64-musl":
       optional: true
-    "@rollup/rollup-openharmony-arm64":
-      optional: true
     "@rollup/rollup-win32-arm64-msvc":
       optional: true
     "@rollup/rollup-win32-ia32-msvc":
@@ -12351,7 +12322,7 @@ __metadata:
       optional: true
   bin:
     rollup: dist/bin/rollup
-  checksum: 10c0/2029282826d5fb4e308be261b2c28329a4d2bd34304cc3960da69fd21d5acccd0267d6770b1656ffc8f166203ef7e865b4583d5f842a519c8ef059ac71854205
+  checksum: 10c0/c4d5f2257320b50dc0e035e31d8d2f78d36b7015aef2f87cc984c0a1c97ffebf14337dddeb488b4b11ae798fea6486189b77e7cf677617dcf611d97db41ebfda
   languageName: node
   linkType: hard
 
@@ -13187,7 +13158,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tinyglobby@npm:^0.2.14":
+"tinyglobby@npm:^0.2.13, tinyglobby@npm:^0.2.14":
   version: 0.2.14
   resolution: "tinyglobby@npm:0.2.14"
   dependencies:
@@ -13197,16 +13168,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tinyglobby@npm:^0.2.15":
-  version: 0.2.15
-  resolution: "tinyglobby@npm:0.2.15"
-  dependencies:
-    fdir: "npm:^6.5.0"
-    picomatch: "npm:^4.0.3"
-  checksum: 10c0/869c31490d0d88eedb8305d178d4c75e7463e820df5a9b9d388291daf93e8b1eb5de1dad1c1e139767e4269fe75f3b10d5009b2cc14db96ff98986920a186844
-  languageName: node
-  linkType: hard
-
 "tinypool@npm:^1.1.1":
   version: 1.1.1
   resolution: "tinypool@npm:1.1.1"
@@ -13925,17 +13886,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vite@npm:^5.0.0 || ^6.0.0 || ^7.0.0-0, vite@npm:^7.0.0":
-  version: 7.1.5
-  resolution: "vite@npm:7.1.5"
+"vite@npm:^5.0.0 || ^6.0.0 || ^7.0.0-0":
+  version: 7.0.0-beta.0
+  resolution: "vite@npm:7.0.0-beta.0"
   dependencies:
     esbuild: "npm:^0.25.0"
-    fdir: "npm:^6.5.0"
+    fdir: "npm:^6.4.4"
     fsevents: "npm:~2.3.3"
-    picomatch: "npm:^4.0.3"
-    postcss: "npm:^8.5.6"
-    rollup: "npm:^4.43.0"
-    tinyglobby: "npm:^0.2.15"
+    picomatch: "npm:^4.0.2"
+    postcss: "npm:^8.5.3"
+    rollup: "npm:^4.40.0"
+    tinyglobby: "npm:^0.2.14"
   peerDependencies:
     "@types/node": ^20.19.0 || >=22.12.0
     jiti: ">=1.21.0"
@@ -13976,7 +13937,62 @@ __metadata:
       optional: true
   bin:
     vite: bin/vite.js
-  checksum: 10c0/782d2f20c25541b26d1fb39bef5f194149caff39dc25b7836e25f049ca919f2e2ce186bddb21f3f20f6195354b3579ec637a8ca08d65b117f8b6f81e3e730a9c
+  checksum: 10c0/d13907d67b4991a2862dafe6a31d10ffe28f26ba04e511049e9d86d06293b3a8d6733c896c8fb38e3f2d5805d240e3cad27700f3c42536602035e4c324b48d58
+  languageName: node
+  linkType: hard
+
+"vite@npm:^6.0.0":
+  version: 6.3.5
+  resolution: "vite@npm:6.3.5"
+  dependencies:
+    esbuild: "npm:^0.25.0"
+    fdir: "npm:^6.4.4"
+    fsevents: "npm:~2.3.3"
+    picomatch: "npm:^4.0.2"
+    postcss: "npm:^8.5.3"
+    rollup: "npm:^4.34.9"
+    tinyglobby: "npm:^0.2.13"
+  peerDependencies:
+    "@types/node": ^18.0.0 || ^20.0.0 || >=22.0.0
+    jiti: ">=1.21.0"
+    less: "*"
+    lightningcss: ^1.21.0
+    sass: "*"
+    sass-embedded: "*"
+    stylus: "*"
+    sugarss: "*"
+    terser: ^5.16.0
+    tsx: ^4.8.1
+    yaml: ^2.4.2
+  dependenciesMeta:
+    fsevents:
+      optional: true
+  peerDependenciesMeta:
+    "@types/node":
+      optional: true
+    jiti:
+      optional: true
+    less:
+      optional: true
+    lightningcss:
+      optional: true
+    sass:
+      optional: true
+    sass-embedded:
+      optional: true
+    stylus:
+      optional: true
+    sugarss:
+      optional: true
+    terser:
+      optional: true
+    tsx:
+      optional: true
+    yaml:
+      optional: true
+  bin:
+    vite: bin/vite.js
+  checksum: 10c0/df70201659085133abffc6b88dcdb8a57ef35f742a01311fc56a4cfcda6a404202860729cc65a2c401a724f6e25f9ab40ce4339ed4946f550541531ced6fe41c
   languageName: node
   linkType: hard